:root {
--lale-magenta: #C6006D;
--lale-navy: #002776;
--lale-green: #72BA6F;
--lale-white: #FFFFFF;
--lale-light-bg: #F5F7FA;
}
.lale-chatbot-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999; font-family: 'Poppins', sans-serif;
} .lale-chat-toggle {
background-color: var(--lale-magenta);
color: var(--lale-white);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, background-color 0.3s ease;
position: relative;
} .lale-chat-toggle::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 14px;
background-color: #4CAF50; border: 2px solid var(--lale-white);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
animation: lale-pulse 2s infinite;
}
@keyframes lale-pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
.lale-chat-toggle:hover {
transform: scale(1.05);
background-color: #a5005b;
}
.lale-chat-toggle svg {
fill: currentColor;
} .lale-chat-window {
width: 350px;
max-height: 500px;
height: 500px;
background-color: var(--lale-white);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 80px;
right: 0;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.95);
pointer-events: none;
transition: all 0.3s ease-in-out;
}
.lale-chat-window.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
} .lale-chat-header {
background-color: var(--lale-navy);
color: var(--lale-white);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.lale-chat-title {
display: flex;
align-items: center;
font-weight: 600;
font-size: 16px;
}
.lale-chat-logo {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 4px;
}
.lale-chat-close {
background: none;
border: none;
color: var(--lale-white);
font-size: 24px;
cursor: pointer;
line-height: 1;
} .lale-chat-body {
flex-grow: 1;
padding: 15px;
background-color: var(--lale-light-bg);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
} .lale-message {
max-width: 80%;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.4;
position: relative;
animation: fadeIn 0.3s ease-in-out;
word-wrap: break-word;
}
.lale-message.bot {
background-color: var(--lale-white);
color: var(--lale-navy);
align-self: flex-start;
border-bottom-left-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.lale-message.user {
background-color: var(--lale-magenta);
color: var(--lale-white);
align-self: flex-end;
border-bottom-right-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} .lale-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 5px;
animation: fadeIn 0.5s ease-in-out;
}
.lale-option-btn {
background-color: var(--lale-navy);
color: var(--lale-white);
border: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
text-align: left;
transition: background-color 0.2s, transform 0.1s;
font-family: inherit;
}
.lale-option-btn:hover {
background-color: var(--lale-green);
transform: translateX(2px);
} .lale-input-group {
display: flex;
margin-top: 5px;
gap: 5px;
animation: fadeIn 0.3s ease;
}
.lale-chat-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
font-family: inherit;
font-size: 14px;
outline: none;
}
.lale-chat-input:focus {
border-color: var(--lale-magenta);
}
.lale-chat-submit {
background-color: var(--lale-magenta);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.lale-chat-submit:hover {
background-color: #a5005b;
} @media (max-width: 480px) {
.lale-chat-window {
position: fixed; bottom: 0px;
right: 0;
left: 0; width: 100%; height: 100dvh; max-height: 100dvh;
border-radius: 0; z-index: 100000; margin: 0;
transform: translateY(100%); }
.lale-chat-window.open {
transform: translateY(0);
opacity: 1; }
.lale-chat-header {
border-radius: 0; padding: 20px 15px; }
.lale-chatbot-container { z-index: 100001;
}
.lale-chat-toggle {
bottom: 15px;
right: 15px;
} .lale-chatbot-container:has(.lale-chat-window.open) .lale-chat-toggle {
display: none;
} }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}