/* Онлайн-консультант: всплывающий чат в правом нижнем углу.
 *
 * Правила намеренно узко заскоплены на .uk-sitechat: виджет вставляется в
 * унаследованные шаблоны с очень «щедрой» глобальной типографикой, и любая
 * попытка опереться на общие классы сайта ломается на первой же странице,
 * где эти классы переопределены.
 */

.uk-sitechat {
    --uk-sitechat-accent: #f55d25;
    /* Тот же фирменный оранжевый, но темнее — для поверхностей, на которых
       лежит текст. У #f55d25 с белым контраст 3.2:1, ниже требований WCAG AA
       для основного текста; у этого — 5.2:1. Светлый остаётся там, где он и
       нужен: на пузырьке-призыве и на иконке отправки. */
    --uk-sitechat-accent-deep: #c2410c;
    --uk-sitechat-online: #16a34a;
    --uk-sitechat-ink: #1f2430;
    --uk-sitechat-muted: #6b7280;
    --uk-sitechat-line: #e5e7eb;
    --uk-sitechat-surface: #ffffff;

    /* Отступ от угла и подъём над тем, что уже занимает низ экрана.
       Плашка про cookie прижата к низу во всю ширину и с почти максимальным
       z-index — перекрывала пузырёк целиком. Поднять виджет выше по z-index
       нельзя: он закроет кнопку «Понятно», а решение про cookie важнее чата.
       Поэтому виджет встаёт НАД плашкой и опускается, когда её убрали. */
    --uk-sitechat-gap: 20px;
    --uk-sitechat-lift: 0px;

    position: fixed;
    right: var(--uk-sitechat-gap);
    bottom: calc(var(--uk-sitechat-gap) + var(--uk-sitechat-lift));
    transition: bottom 220ms ease;
    z-index: 9000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--uk-sitechat-ink);
}

.uk-sitechat[hidden] {
    display: none !important;
}

/* --- Пузырёк --- */

.uk-sitechat__launcher {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: uk-sitechat-in 240ms ease-out;
}

.uk-sitechat__bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border: 0;
    border-radius: 30px;
    background: var(--uk-sitechat-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(31, 36, 48, 0.22);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.uk-sitechat__bubble:hover,
.uk-sitechat__bubble:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(31, 36, 48, 0.28);
}

/* Метка «есть ответ» на свёрнутом пузырьке. Псевдоэлемент, а не отдельный
   узел: считать непрочитанное умеет js, а рисовать точку — дело стилей. */
.uk-sitechat__bubble--unread::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #c0392b;
}

.uk-sitechat__bubble {
    position: relative;
}

.uk-sitechat__bubble svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: currentColor;
}

.uk-sitechat__dismiss {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--uk-sitechat-line);
    border-radius: 50%;
    background: var(--uk-sitechat-surface);
    color: var(--uk-sitechat-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(31, 36, 48, 0.12);
}

.uk-sitechat__dismiss:hover {
    color: var(--uk-sitechat-ink);
}

/* --- Панель --- */

.uk-sitechat__panel {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 480px;
    /* Поднявшись над плашкой, окно не должно упереться в шапку сайта. */
    max-height: calc(100vh - 120px - var(--uk-sitechat-lift));
    background: var(--uk-sitechat-surface);
    border: 1px solid rgba(31, 36, 48, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(31, 36, 48, 0.24);
    overflow: hidden;
    animation: uk-sitechat-in 180ms ease-out;
}

/* Шапка нейтральная, а не фирменного цвета.
 *
 * Раньше шапка и пузырьки посетителя заливались одним оранжевым, и верхнее
 * сообщение сливалось с шапкой в одно пятно — граница между «кто это» и «что
 * я написал» пропадала. Лечится не разделителем, а иерархией: цвет — дорогой
 * ресурс, и тратить его на целое поле шапки не за что. Фирменный оранжевый
 * остаётся там, где он работает: пузырёк-призыв, аватар, кнопка отправки и
 * собственные реплики. Так же устроены Intercom, Crisp и Telegram Web. */
.uk-sitechat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    background: var(--uk-sitechat-surface);
    color: var(--uk-sitechat-ink);
    border-bottom: 1px solid var(--uk-sitechat-line);
}

/* Аватар возвращает шапке фирменность, отняв у неё вес: пятно 34×34 вместо
   полосы во всю ширину. */
.uk-sitechat__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--uk-sitechat-accent-deep);
    color: #fff;
}

.uk-sitechat__avatar svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.uk-sitechat__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

/* Расписание с поясом и телефоном в 360 пикселей одной строкой не влезает и
   переносится на вторую. Переносить должен текст внутри своей колонки, а не
   флекс-элементы целиком: иначе на перенос уходит вся строка вместе с точкой
   статуса, и она повисает над текстом сама по себе. */
.uk-sitechat__subtitle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--uk-sitechat-muted);
}

.uk-sitechat__availability-text {
    /* Без этого флекс-элемент не сжимается ниже своей min-content ширины и
       текст не переносится вовсе. */
    min-width: 0;
    flex: 1 1 auto;
}

.uk-sitechat__subtitle a {
    color: var(--uk-sitechat-ink);
    text-decoration: underline;
    /* Телефон — единое целое: разорванный посередине номер не читается. */
    white-space: nowrap;
}

/* Зелёная точка «юрист на связи».
 *
 * Пульсация — не украшение: статичный кружок читается как элемент оформления,
 * а мигающий сразу говорит «здесь кто-то есть». Тем, у кого движение выключено
 * в системе, оставляем просто цвет (см. ниже). На белой шапке зелёный взят
 * темнее, чем берут на цветной: рядом с ним стоит серый текст, и слишком
 * светлый оттенок рядом с ним теряется. */
.uk-sitechat__dot {
    flex: 0 0 auto;
    /* Выравниваем по первой строке подписи, а не по центру блока: при переносе
       центр уезжает вниз и точка перестаёт читаться как статус. */
    margin-top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfd4dc;
}

.uk-sitechat__subtitle--online .uk-sitechat__dot {
    background: var(--uk-sitechat-online);
    animation: uk-sitechat-pulse 2s ease-out infinite;
}

@keyframes uk-sitechat-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

.uk-sitechat__icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uk-sitechat-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.uk-sitechat__icon-button:hover {
    background: #f0f1f4;
    color: var(--uk-sitechat-ink);
}

.uk-sitechat__icon-button:focus-visible {
    outline: 2px solid rgba(245, 93, 37, 0.5);
    outline-offset: 1px;
}

.uk-sitechat__log {
    flex: 1 1 auto;
    margin: 0;
    /* Сверху воздуха больше: первый пузырёк не должен упираться в шапку —
       именно это упирание и читалось как слияние. */
    padding: 18px 16px 16px;
    overflow-y: auto;
    background: #eef0f4;
    list-style: none;
}

.uk-sitechat__message {
    width: fit-content;
    max-width: 84%;
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.uk-sitechat__message--visitor {
    margin-left: auto;
    background: var(--uk-sitechat-accent-deep);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.uk-sitechat__message--operator {
    background: var(--uk-sitechat-surface);
    border: 1px solid var(--uk-sitechat-line);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(31, 36, 48, 0.05);
}

.uk-sitechat__message--system {
    width: auto;
    max-width: 100%;
    background: transparent;
    color: var(--uk-sitechat-muted);
    font-size: 13px;
    text-align: center;
}

.uk-sitechat__author {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--uk-sitechat-muted);
}

.uk-sitechat__footer {
    border-top: 1px solid var(--uk-sitechat-line);
    background: var(--uk-sitechat-surface);
}

.uk-sitechat__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
}

.uk-sitechat__input {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--uk-sitechat-line);
    border-radius: 12px;
    font: inherit;
    color: inherit;
    resize: none;
}

.uk-sitechat__input:focus {
    outline: 2px solid rgba(245, 93, 37, 0.4);
    outline-offset: 1px;
}

.uk-sitechat__send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--uk-sitechat-accent-deep);
    color: #fff;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.uk-sitechat__send:disabled {
    opacity: 0.5;
    cursor: default;
}

.uk-sitechat__send svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.uk-sitechat__contact {
    padding: 10px 12px 12px;
    border-top: 1px dashed var(--uk-sitechat-line);
    background: #fffdf9;
}

.uk-sitechat__contact-note {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--uk-sitechat-muted);
}

.uk-sitechat__contact-row {
    display: flex;
    gap: 8px;
}

.uk-sitechat__contact-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--uk-sitechat-line);
    border-radius: 10px;
    font: inherit;
}

.uk-sitechat__contact-submit {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--uk-sitechat-accent-deep);
    border-radius: 10px;
    background: transparent;
    color: var(--uk-sitechat-accent-deep);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.uk-sitechat__contact-submit:hover {
    background: var(--uk-sitechat-accent-deep);
    color: #fff;
}

/* Honeypot: поле есть в DOM, но недоступно человеку. */
.uk-sitechat__trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.uk-sitechat__status {
    padding: 0 12px 10px;
    margin: 0;
    font-size: 12px;
    color: var(--uk-sitechat-muted);
}

.uk-sitechat__status--error {
    color: #b3261e;
}

@keyframes uk-sitechat-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .uk-sitechat {
        transition: none;
    }

    .uk-sitechat__launcher,
    .uk-sitechat__panel,
    .uk-sitechat__subtitle--online .uk-sitechat__dot {
        animation: none;
    }
}

@media (max-width: 480px) {
    .uk-sitechat {
        --uk-sitechat-gap: 12px;
        left: 12px;
    }

    .uk-sitechat__panel {
        width: auto;
        height: min(70vh, 520px);
    }

    .uk-sitechat__launcher {
        justify-content: flex-end;
    }
}

/* --- Согласие на обработку персональных данных --- */

.uk-sitechat__consent {
    padding: 10px 12px 2px;
}

.uk-sitechat__consent[hidden] {
    display: none !important;
}

.uk-sitechat__consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--uk-sitechat-ink);
    cursor: pointer;
}

/* Чекбокс рисуем сами.
 *
 * Системный на этих страницах оказывался белым на белом: унаследованный
 * глобальный CSS сайта снимает у полей рамку, а `accent-color` красит только
 * отмеченное состояние — то есть ровно то, которое человек ещё не видел.
 * Своя рамка и своя галочка не зависят ни от темы браузера, ни от чужих
 * правил. */
.uk-sitechat__consent-label input[type="checkbox"] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #8a93a0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.uk-sitechat__consent-label input[type="checkbox"]:hover {
    border-color: var(--uk-sitechat-accent-deep);
}

.uk-sitechat__consent-label input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(245, 93, 37, 0.5);
    outline-offset: 2px;
}

.uk-sitechat__consent-label input[type="checkbox"]:checked {
    background: var(--uk-sitechat-accent-deep);
    border-color: var(--uk-sitechat-accent-deep);
}

.uk-sitechat__consent-label input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 4px;
    height: 9px;
    margin: 0 auto;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.uk-sitechat__consent-label a {
    color: var(--uk-sitechat-ink);
    text-decoration: underline;
}

/* Пока согласия нет, поле ввода выглядит выключенным, а не «сломанным»:
   человек должен понимать, что мешает, а не гадать, почему не печатается. */
.uk-sitechat__input:disabled {
    background: #f2f3f5;
    color: var(--uk-sitechat-muted);
    cursor: not-allowed;
}

.uk-sitechat__input:disabled::placeholder {
    color: #a5abb5;
}