.evrai {
--evrai-blue: #103683;
--evrai-blue-dark: #0B245C;
--evrai-blue-50: #EEF3FC;
--evrai-red: #A80504;
--evrai-ink: #14213D;
--evrai-grey: #5A667E;
--evrai-line: #D9E1EE;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99990;
font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
line-height: 1.45;
color: var(--evrai-ink);
-webkit-font-smoothing: antialiased;
}
.evrai *,
.evrai *::before,
.evrai *::after {
box-sizing: border-box;
}
.evrai button,
.evrai textarea {
font: inherit;
letter-spacing: normal;
text-transform: none;
margin: 0;
}
.evrai .evrai__sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .evrai .evrai__launcher {
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin-left: auto;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--evrai-blue);
color: #fff;
box-shadow: 0 8px 24px rgba(16, 54, 131, .35);
cursor: pointer;
transition: background-color .2s, transform .2s;
}
.evrai .evrai__launcher:hover {
background: var(--evrai-blue-dark);
transform: translateY(-2px);
}
.evrai .evrai__launcher:focus-visible,
.evrai .evrai__icon-btn:focus-visible,
.evrai .evrai__chip:focus-visible,
.evrai .evrai__send:focus-visible,
.evrai .evrai__action:focus-visible {
outline: 3px solid #7FA2E6;
outline-offset: 2px;
}
.evrai .evrai__launcher svg {
width: 32px;
height: 32px;
} .evrai .evrai__label {
position: absolute;
right: 80px;
bottom: 15px;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--evrai-blue);
font-weight: 600;
font-size: 14.5px;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 6px 20px rgba(20, 33, 61, .18);
cursor: pointer;
animation: evrai-label-in .35s ease-out .6s both;
}
.evrai .evrai__label:hover {
color: var(--evrai-blue-dark);
box-shadow: 0 8px 24px rgba(20, 33, 61, .24);
}
.evrai.is-open .evrai__label {
display: none;
}
@keyframes evrai-label-in {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: none; }
}
@keyframes evrai-label-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.evrai .evrai__icon-close,
.evrai.is-open .evrai__icon-chat {
display: none;
}
.evrai.is-open .evrai__icon-close {
display: block;
} .evrai .evrai__panel {
display: flex;
flex-direction: column;
width: 380px;
height: min(620px, calc(100vh - 120px));
margin-bottom: 14px;
overflow: hidden;
background: #fff;
border-radius: 16px;
box-shadow: 0 18px 48px rgba(20, 33, 61, .22);
animation: evrai-in .2s ease-out;
}
.evrai .evrai__panel[hidden] {
display: none;
}
@keyframes evrai-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.evrai .evrai__head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 12px 14px 16px;
background: var(--evrai-blue);
color: #fff;
}
.evrai .evrai__avatar {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
color: var(--evrai-blue);
font-weight: 800;
font-size: 18px;
}
.evrai .evrai__titles {
flex: 1;
min-width: 0;
}
.evrai .evrai__title,
.evrai .evrai__sub {
margin: 0;
padding: 0;
color: #fff;
}
.evrai .evrai__title {
font-weight: 700;
font-size: 16px;
}
.evrai .evrai__sub {
font-size: 12.5px;
opacity: .85;
}
.evrai .evrai__badge {
display: inline-block;
padding: 0 6px;
margin-right: 2px;
border-radius: 4px;
background: rgba(255, 255, 255, .2);
font-weight: 700;
font-size: 11px;
letter-spacing: .04em;
}
.evrai .evrai__icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #fff;
cursor: pointer;
}
.evrai .evrai__icon-btn:hover {
background: rgba(255, 255, 255, .15);
}
.evrai .evrai__icon-btn svg {
width: 20px;
height: 20px;
}
.evrai .evrai__test {
margin: 0;
padding: 6px 16px;
background: #FFF4D6;
color: #6B4E00;
font-size: 12.5px;
} .evrai .evrai__log {
flex: 1;
overflow-y: auto;
padding: 16px 14px 8px;
background: var(--evrai-blue-50);
overscroll-behavior: contain;
}
.evrai .evrai__log:focus {
outline: none;
}
.evrai .evrai__msg {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.evrai .evrai__msg--user {
align-items: flex-end;
}
.evrai .evrai__msg--bot {
align-items: flex-start;
}
.evrai .evrai__bubble {
max-width: 86%;
padding: 10px 13px;
border-radius: 14px;
overflow-wrap: anywhere;
}
.evrai .evrai__msg--user .evrai__bubble {
background: var(--evrai-blue);
color: #fff;
border-bottom-right-radius: 4px;
white-space: pre-wrap;
}
.evrai .evrai__msg--bot .evrai__bubble {
background: #fff;
color: var(--evrai-ink);
border: 1px solid var(--evrai-line);
border-bottom-left-radius: 4px;
}
.evrai .evrai__msg.is-error .evrai__bubble {
border-color: #F1C6C5;
}
.evrai .evrai__bubble ul {
margin: 4px 0;
padding-left: 18px;
}
.evrai .evrai__bubble li {
margin: 2px 0;
}
.evrai .evrai__bubble a {
color: var(--evrai-blue);
text-decoration: underline;
}
.evrai .evrai__bubble strong {
font-weight: 700;
}
.evrai .evrai__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 92%;
margin-top: 6px;
}
.evrai .evrai__action {
display: inline-block;
padding: 7px 12px;
border: 1px solid var(--evrai-blue);
border-radius: 8px;
background: #fff;
color: var(--evrai-blue);
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
transition: background-color .15s, color .15s;
}
.evrai .evrai__action:hover {
background: var(--evrai-blue);
color: #fff;
}
.evrai .evrai__action--primary {
border-color: var(--evrai-red);
background: var(--evrai-red);
color: #fff;
}
.evrai .evrai__action--primary:hover {
border-color: #8A0403;
background: #8A0403;
} .evrai .evrai__typing .evrai__bubble {
display: flex;
gap: 4px;
padding: 13px 14px;
}
.evrai .evrai__typing .evrai__bubble span:not(.evrai__sr) {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--evrai-grey);
opacity: .4;
animation: evrai-dot 1.2s infinite;
}
.evrai .evrai__typing .evrai__bubble span:nth-child(2) { animation-delay: .2s; }
.evrai .evrai__typing .evrai__bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes evrai-dot {
0%, 60%, 100% { opacity: .3; transform: none; }
30% { opacity: 1; transform: translateY(-3px); }
} .evrai .evrai__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 14px 10px;
background: var(--evrai-blue-50);
}
.evrai .evrai__chips[hidden] {
display: none;
}
.evrai .evrai__chip {
padding: 6px 11px;
border: 1px solid var(--evrai-line);
border-radius: 999px;
background: #fff;
color: var(--evrai-blue);
font-weight: 600;
font-size: 13px;
line-height: 1.3;
cursor: pointer;
}
.evrai .evrai__chip:hover {
border-color: var(--evrai-blue);
} .evrai .evrai__form {
display: flex;
align-items: flex-end;
gap: 8px;
margin: 0;
padding: 10px 12px;
border-top: 1px solid var(--evrai-line);
background: #fff;
}
.evrai .evrai__input {
flex: 1;
min-height: 42px;
max-height: 120px;
padding: 10px 12px;
border: 1px solid var(--evrai-line);
border-radius: 8px;
background: #fff;
color: var(--evrai-ink);
font-size: 15px;
line-height: 1.4;
resize: none;
box-shadow: none;
}
.evrai .evrai__input:focus {
border-color: var(--evrai-blue);
outline: none;
box-shadow: 0 0 0 3px rgba(16, 54, 131, .15);
}
.evrai .evrai__send {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 8px;
background: var(--evrai-red);
color: #fff;
cursor: pointer;
}
.evrai .evrai__send:hover {
background: #8A0403;
}
.evrai .evrai__send:disabled {
background: #C9CFDA;
cursor: default;
}
.evrai .evrai__send svg {
width: 20px;
height: 20px;
}
.evrai .evrai__foot {
margin: 0;
padding: 0 14px 10px;
background: #fff;
color: var(--evrai-grey);
font-size: 11.5px;
line-height: 1.4;
}
.evrai .evrai__foot a {
color: var(--evrai-grey);
text-decoration: underline;
} @media (max-width: 480px) {
.evrai {
right: 14px;
bottom: 14px;
}
.evrai .evrai__launcher {
width: 60px;
height: 60px;
} .evrai .evrai__label {
right: 0;
bottom: 70px;
padding: 8px 12px;
font-size: 13.5px;
animation-name: evrai-label-up;
}
.evrai .evrai__panel {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
height: 100dvh;
margin: 0;
border-radius: 0;
}
.evrai.is-open .evrai__launcher {
display: none;
}
.evrai .evrai__input {
font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.evrai .evrai__panel,
.evrai .evrai__label,
.evrai .evrai__typing .evrai__bubble span {
animation: none;
}
.evrai .evrai__launcher {
transition: none;
}
}
@media print {
.evrai {
display: none;
}
}