.aegle-chatbot {
--aegle-chatbot-color: #0f766e;
position: fixed;
right: 22px;
bottom: 86px;
z-index: 99999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.aegle-chatbot * {
box-sizing: border-box;
}
.aegle-chatbot__toggle {
position: relative;
min-width: 96px;
height: 48px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--aegle-chatbot-color);
color: #fff;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.24), 0 0 0 0 color-mix(in srgb, var(--aegle-chatbot-color) 34%, transparent);
cursor: pointer;
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
white-space: nowrap;
animation: aegle-chatbot-nudge 6s ease-in-out infinite;
transform-origin: center bottom;
}
.aegle-chatbot__toggle::before {
content: "👋";
position: absolute;
top: -24px;
left: 50%;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
color: #f59e0b;
font-size: 21px;
line-height: 34px;
text-align: center;
opacity: 0;
transform: translateX(-50%) translateY(16px) rotate(0deg) scale(0.55);
transform-origin: 65% 75%;
animation: aegle-chatbot-wave 6s ease-in-out infinite;
pointer-events: none;
}
.aegle-chatbot__toggle:hover,
.aegle-chatbot__toggle:focus {
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.3), 0 0 0 8px color-mix(in srgb, var(--aegle-chatbot-color) 12%, transparent);
outline: none;
transform: translateY(-1px);
}
@keyframes aegle-chatbot-nudge {
0%,
72%,
100% {
transform: translateY(0) scale(1);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.24), 0 0 0 0 color-mix(in srgb, var(--aegle-chatbot-color) 30%, transparent);
}
76% {
transform: translateY(-7px) scale(1.03);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.28), 0 0 0 8px color-mix(in srgb, var(--aegle-chatbot-color) 14%, transparent);
}
80% {
transform: translateY(0) scale(1);
}
84% {
transform: translateY(-4px) scale(1.02);
}
88% {
transform: translateY(0) scale(1);
}
}
@keyframes aegle-chatbot-wave {
0%,
72%,
100% {
opacity: 0;
transform: translateX(-50%) translateY(16px) rotate(0deg) scale(0.55);
}
76% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
}
79% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotate(18deg) scale(1);
}
82% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotate(-16deg) scale(1);
}
85% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotate(16deg) scale(1);
}
89% {
opacity: 1;
transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
}
93% {
opacity: 0;
transform: translateX(-50%) translateY(16px) rotate(0deg) scale(0.55);
}
}
@media (prefers-reduced-motion: reduce) {
.aegle-chatbot__toggle,
.aegle-chatbot__toggle::before {
animation: none;
}
}
.aegle-chatbot__panel {
position: relative;
display: flex;
flex-direction: column;
width: 340px;
max-width: calc(100vw - 36px);
height: min(590px, calc(100vh - 44px));
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}
.aegle-chatbot__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--aegle-chatbot-color);
color: #fff;
}
.aegle-chatbot__header strong,
.aegle-chatbot__header span {
display: block;
line-height: 1.25;
}
.aegle-chatbot__header span {
opacity: 0.78;
font-size: 12px;
}
.aegle-chatbot__close {
width: 32px;
height: 32px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
}
.aegle-chatbot__messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 16px;
background: #f8fafc;
}
.aegle-chatbot__message {
max-width: 88%;
width: fit-content;
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 8px;
color: #0f172a;
font-size: 14px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
.aegle-chatbot__message--bot {
background: #fff;
border: 1px solid #e2e8f0;
}
.aegle-chatbot__message--user {
margin-left: auto;
background: var(--aegle-chatbot-color);
color: #fff;
}
.aegle-chatbot__message a {
color: var(--aegle-chatbot-color);
text-decoration: underline;
}
.aegle-chatbot__message--user a {
color: #fff;
}
.aegle-chatbot__manual {
padding: 10px 12px 0;
background: #fff;
border-top: 1px solid #e2e8f0;
}
.aegle-chatbot__manual[hidden] {
display: none;
}
.aegle-chatbot__manual-link {
display: block;
width: 100%;
min-height: 38px;
border: 1px solid var(--aegle-chatbot-color);
border-radius: 8px;
padding: 9px 12px;
color: var(--aegle-chatbot-color);
background: color-mix(in srgb, var(--aegle-chatbot-color) 7%, #fff);
font-size: 14px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-decoration: none;
}
.aegle-chatbot__manual-link:hover,
.aegle-chatbot__manual-link:focus {
background: color-mix(in srgb, var(--aegle-chatbot-color) 12%, #fff);
outline: none;
}
.aegle-chatbot__form {
display: grid;
grid-template-columns: minmax(0, 1fr) 74px;
align-items: center;
gap: 8px;
padding: 12px;
border-top: 1px solid #e2e8f0;
background: #fff;
}
.aegle-chatbot__input {
width: 100%;
height: 46px;
min-height: 46px;
max-height: 104px;
resize: none;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 10px 11px;
color: #0f172a;
font: inherit;
line-height: 1.35;
}
.aegle-chatbot__input:focus {
border-color: var(--aegle-chatbot-color);
outline: 2px solid color-mix(in srgb, var(--aegle-chatbot-color) 18%, transparent);
}
.aegle-chatbot__send {
width: 74px;
min-width: 0;
height: 46px;
border: 0;
border-radius: 8px;
background: var(--aegle-chatbot-color);
color: #fff;
cursor: pointer;
font-weight: 700;
}
.aegle-chatbot__send:disabled {
cursor: wait;
opacity: 0.7;
}
.aegle-chatbot__lead {
position: absolute;
inset: 58px 0 66px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(15, 23, 42, 0.38);
}
.aegle-chatbot__lead[hidden] {
display: none;
}
.aegle-chatbot__lead-form {
width: 100%;
max-width: 320px;
padding: 18px;
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
}
.aegle-chatbot__lead-form strong {
display: block;
margin-bottom: 6px;
color: #0f172a;
font-size: 16px;
}
.aegle-chatbot__lead-form p {
margin: 0 0 14px;
color: #475569;
font-size: 13px;
line-height: 1.45;
}
.aegle-chatbot__lead-form .aegle-chatbot__privacy {
margin-top: -6px;
color: #64748b;
font-size: 12px;
}
.aegle-chatbot__lead-form label,
.aegle-chatbot__lead-form span {
display: block;
}
.aegle-chatbot__lead-form label {
margin-bottom: 10px;
color: #334155;
font-size: 13px;
}
.aegle-chatbot__lead-form input {
width: 100%;
height: 40px;
margin-top: 5px;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 8px 10px;
font: inherit;
}
.aegle-chatbot__lead-submit {
width: 100%;
height: 40px;
border: 0;
border-radius: 8px;
background: var(--aegle-chatbot-color);
color: #fff;
cursor: pointer;
font-weight: 700;
}
.aegle-chatbot__lead-submit:disabled {
cursor: wait;
opacity: 0.7;
}
.aegle-chatbot__lead-error {
display: block;
min-height: 18px;
margin-top: 8px;
color: #dc2626;
font-size: 12px;
}
@media (max-width: 480px) {
.aegle-chatbot {
right: 12px;
bottom: 76px;
}
.aegle-chatbot__panel {
width: min(340px, calc(100vw - 24px));
height: min(560px, calc(100vh - 28px));
}
}