/* ==================================================
   LIVE CHAT — ОБНОВЛЁННЫЙ ДИЗАЙН
================================================== */

.live-chat {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 800;

    transform: translateX(-50%);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.live-chat,
.live-chat * {
    box-sizing: border-box;
}

.live-chat button,
.live-chat input,
.live-chat textarea {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* ==================================================
   КНОПКА ОТКРЫТИЯ
================================================== */

.live-chat__launcher {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 18px 8px 9px;

    border: 1px solid rgba(210, 181, 91, .62);
    border-radius: 999px;

    background:
        linear-gradient(145deg,
            rgba(33, 32, 51, .99),
            rgba(10, 10, 20, .99));

    color: #f6f6ff;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .58),
        0 0 25px rgba(210, 181, 91, .12),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.live-chat__launcher:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 210, 119, .88);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, .65),
        0 0 32px rgba(210, 181, 91, .18);
}

.live-chat__launcher:active {
    transform: translateY(0);
}

.live-chat__launcher-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;

    border: 1px solid rgba(210, 181, 91, .34);
    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 255, 255, .16),
            transparent 35%),
        linear-gradient(145deg,
            rgba(210, 181, 91, .30),
            rgba(138, 124, 255, .20));

    font-size: 18px;
}

.live-chat__launcher-text {
    display: grid;
    gap: 2px;
    text-align: left;
}

.live-chat__launcher-text strong {
    color: #f6f6ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.live-chat__launcher-text span {
    color: rgba(246, 246, 255, .60);
    font-size: 11px;
    line-height: 1.15;
}

/* ==================================================
   ОСНОВНОЕ ОКНО
================================================== */

.live-chat__window {
    position: absolute;
    left: 50%;
    bottom: 68px;

    width: min(410px, calc(100vw - 28px));
    height: min(560px, calc(100vh - 115px));
    min-height: 430px;

    display: grid;
    grid-template-rows:
        auto minmax(0, 1fr) auto;

    overflow: hidden;

    border: 1px solid rgba(210, 181, 91, .42);
    border-radius: 23px;

    background:
        linear-gradient(180deg,
            rgba(19, 19, 35, .99),
            rgba(10, 10, 20, .995));

    box-shadow:
        0 32px 100px rgba(0, 0, 0, .78),
        0 0 0 1px rgba(255, 255, 255, .025) inset,
        0 0 45px rgba(210, 181, 91, .09);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%) translateY(15px) scale(.975);

    transform-origin: center bottom;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.live-chat.is-open .live-chat__window {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%) translateY(0) scale(1);
}

/* ==================================================
   ШАПКА
================================================== */

.live-chat__header {
    position: relative;
    z-index: 2;

    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 14px 15px;

    border-bottom: 1px solid rgba(255, 255, 255, .075);

    background:
        radial-gradient(circle at 25% 0%,
            rgba(210, 181, 91, .20),
            transparent 48%),
        linear-gradient(145deg,
            rgba(210, 181, 91, .09),
            rgba(255, 255, 255, .012));

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .18);
}

.live-chat__operator {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.live-chat__avatar {
    position: relative;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;
    flex: 0 0 42px;

    border: 1px solid rgba(210, 181, 91, .56);
    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 255, 255, .16),
            transparent 35%),
        rgba(210, 181, 91, .09);

    color: #f1d894;
    font-size: 18px;

    box-shadow:
        0 0 18px rgba(210, 181, 91, .11);
}

.live-chat__avatar::after {
    content: "";

    position: absolute;
    left: 0;
    top: 1px;

    width: 8px;
    height: 8px;

    border: 2px solid #171724;
    border-radius: 50%;

    background: #52dc8c;

    box-shadow:
        0 0 9px rgba(82, 220, 140, .72);
}

.live-chat__operator div {
    min-width: 0;
}

.live-chat__operator strong,
.live-chat__operator span {
    display: block;
}

.live-chat__operator strong {
    color: #f6f6ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.live-chat__operator span {
    margin-top: 3px;

    color: #85dfa7;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-chat__close {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;
    flex: 0 0 36px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;

    background: rgba(255, 255, 255, .045);
    color: rgba(246, 246, 255, .82);

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        background .17s ease,
        border-color .17s ease,
        color .17s ease,
        transform .17s ease;
}

.live-chat__close:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transform: rotate(5deg);
}

/* ==================================================
   ОБЛАСТЬ СООБЩЕНИЙ
================================================== */

.live-chat__messages {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 17px 14px 20px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(138, 124, 255, .035),
            transparent 40%),
        rgba(7, 7, 16, .34);

    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(210, 181, 91, .48) rgba(255, 255, 255, .035);
}

/* Chrome, Edge, Safari */
.live-chat__messages::-webkit-scrollbar {
    width: 7px;
}

.live-chat__messages::-webkit-scrollbar-track {
    margin: 7px 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
}

.live-chat__messages::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        rgba(210, 181, 91, .46);
    background-clip: padding-box;
}

.live-chat__messages::-webkit-scrollbar-thumb:hover {
    background:
        rgba(230, 201, 111, .72);
    background-clip: padding-box;
}

.live-chat__message {
    width: fit-content;
    max-width: 84%;
    margin-bottom: 11px;
}

.live-chat__message:last-child {
    margin-bottom: 0;
}

.live-chat__message-bubble {
    padding: 10px 12px;

    border-radius: 15px;

    color: #f6f6ff;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .16);
}

.live-chat__message--operator,
.live-chat__message--system {
    align-self: flex-start;
}

.live-chat__message--visitor {
    align-self: flex-end;
}

.live-chat__message--operator .live-chat__message-bubble {
    border: 1px solid rgba(210, 181, 91, .24);
    border-bottom-left-radius: 5px;

    background:
        linear-gradient(145deg,
            rgba(210, 181, 91, .13),
            rgba(210, 181, 91, .065));
}

.live-chat__message--visitor .live-chat__message-bubble {
    border: 1px solid rgba(138, 124, 255, .42);
    border-bottom-right-radius: 5px;

    background:
        linear-gradient(145deg,
            rgba(138, 124, 255, .27),
            rgba(93, 79, 195, .18));
}

.live-chat__message--system {
    width: 100%;
    max-width: 100%;
}

.live-chat__message--system .live-chat__message-bubble {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .018));

    color: rgba(246, 246, 255, .68);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;

    box-shadow: none;
}

/* ==================================================
   НИЖНЯЯ ФОРМА
================================================== */

.live-chat__form {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 9px;

    padding: 12px 13px 13px;

    border-top: 1px solid rgba(255, 255, 255, .075);

    background:
        linear-gradient(180deg,
            rgba(15, 15, 28, .99),
            rgba(10, 10, 19, .995));

    box-shadow:
        0 -12px 28px rgba(0, 0, 0, .15);
}

.live-chat__name {
    width: 100%;
    height: 40px;
    min-height: 40px;

    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 11px;
    outline: none;

    background: rgba(7, 7, 16, .72);
    color: #f6f6ff;

    font-size: 13px;
    font-weight: 500;

    appearance: none;

    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        background .17s ease;
}

.live-chat__name::placeholder,
.live-chat__textarea::placeholder {
    color: rgba(246, 246, 255, .36);
}

.live-chat__composer {
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 47px;
    gap: 8px;
    align-items: end;
}

.live-chat__textarea {
    width: 100%;
    height: 46px;
    min-height: 46px;
    max-height: 105px;

    display: block;

    resize: none;
    overflow-y: auto;

    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 13px;
    outline: none;

    background: rgba(7, 7, 16, .72);
    color: #f6f6ff;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;

    appearance: none;

    scrollbar-width: thin;

    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        background .17s ease;
}

.live-chat__name:hover,
.live-chat__textarea:hover {
    border-color: rgba(255, 255, 255, .16);
}

.live-chat__name:focus,
.live-chat__textarea:focus {
    border-color: rgba(210, 181, 91, .68);
    background: rgba(9, 9, 19, .95);

    box-shadow:
        0 0 0 3px rgba(210, 181, 91, .075);
}

.live-chat__send {
    width: 47px;
    min-width: 47px;
    height: 46px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(237, 207, 112, .78);
    border-radius: 13px;

    background:
        radial-gradient(circle at 35% 25%,
            rgba(255, 255, 255, .18),
            transparent 38%),
        linear-gradient(180deg,
            rgba(218, 185, 82, .98),
            rgba(151, 124, 57, .98));

    color: #161108;

    font-size: 18px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .22);

    transition:
        transform .17s ease,
        filter .17s ease,
        opacity .17s ease;
}

.live-chat__send:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.live-chat__send:active:not(:disabled) {
    transform: translateY(0);
}

.live-chat__send:disabled {
    cursor: not-allowed;
    opacity: .50;
}

.live-chat__status {
    min-height: 15px;

    color: rgba(246, 246, 255, .52);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

.live-chat__status.is-error {
    color: #ffaaaa;
}

/* ==================================================
   ПЛАНШЕТЫ И НЕВЫСОКИЕ ЭКРАНЫ
================================================== */

@media (max-height: 700px) and (min-width: 561px) {
    .live-chat__window {
        height: calc(100vh - 100px);
        min-height: 390px;
    }

    .live-chat__header {
        min-height: 64px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* ==================================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================================== */

@media (max-width: 560px) {
    .live-chat {
        left: 50%;
        right: auto;
        bottom: calc(10px + env(safe-area-inset-bottom));

        transform: translateX(-50%);
    }

    .live-chat__launcher {
        min-height: 52px;
        padding-right: 15px;
    }

    .live-chat__window {
        position: fixed;

        inset:
            calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) 8px;

        width: auto;
        height: auto;
        min-height: 0;
        max-height: none;

        border-radius: 20px;

        transform: none;
        transform-origin: center bottom;
    }

    .live-chat.is-open .live-chat__window {
        transform: none;
    }

    .live-chat.is-open .live-chat__launcher {
        visibility: hidden;
        pointer-events: none;
    }

    .live-chat__header {
        min-height: 68px;
        padding: 12px 13px;
    }

    .live-chat__messages {
        padding: 15px 12px 18px;
    }

    .live-chat__message {
        max-width: 88%;
    }

    .live-chat__message--system {
        max-width: 100%;
    }

    .live-chat__form {
        padding:
            10px 11px calc(11px + env(safe-area-inset-bottom));
    }

    .live-chat__name {
        height: 42px;
    }

    .live-chat__textarea {
        height: 47px;
        min-height: 47px;
    }

    .live-chat__send {
        width: 48px;
        min-width: 48px;
        height: 47px;
    }

    html:has(body.live-chat-open),
    body.live-chat-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
    }

    body.live-chat-open .live-chat__window {
        touch-action: pan-y;
    }

    body.live-chat-open .live-chat__messages {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
}

/* ==================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
================================================== */

@media (max-width: 380px) {
    .live-chat {
        max-width: calc(100vw - 125px) !important;
    }

    .live-chat__launcher {
        min-width: 170px !important;
        max-width: 205px !important;
        padding-right: 11px !important;
    }

    .live-chat__operator span {
        max-width: 210px;
    }

    .live-chat__launcher-text strong {
        font-size: 11px !important;
    }

    .live-chat__launcher-text span {
        display: block !important;
        font-size: 8px !important;
    }
}

/* Когда на странице открыт любой попап — чат прячем */
body.modal-open .live-chat,
body.popup-open .live-chat,
body.is-popup-open .live-chat,
body.has-open-modal .live-chat,
body.scroll-locked .live-chat {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.live-chat__development-note {
    margin: 0 13px 10px;
    padding: 10px 12px;

    border: 1px solid rgba(210, 181, 91, .28);
    border-radius: 12px;

    background: rgba(210, 181, 91, .07);
    color: rgba(246, 246, 255, .72);

    font-size: 11px;
    line-height: 1.45;
}

/* ==================================================
   ИСПРАВЛЕНИЕ ЧАТА НА МОБИЛЬНЫХ
================================================== */

/* ==================================================
   ИСПРАВЛЕНИЕ ЧАТА НА МОБИЛЬНЫХ
================================================== */

@media (max-width: 560px) {

    /*
     * Важно: у родителя не должно быть transform,
     * иначе position: fixed у окна привязывается
     * к кнопке, а не ко всему экрану.
     */
    .live-chat {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;

        width: 100% !important;
        max-width: none !important;

        transform: none !important;

        pointer-events: none;
    }

    /*
     * Кнопка располагается по центру самостоятельно.
     */
    .live-chat__launcher {
        width: fit-content !important;
        min-width: 190px !important;
        max-width: calc(100vw - 135px) !important;
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;

        margin: 0 auto !important;
        padding: 7px 14px 7px 8px !important;

        overflow: hidden !important;
        white-space: nowrap !important;

        pointer-events: auto;
    }

    .live-chat__launcher-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    .live-chat__launcher-text {
        min-width: 0 !important;

        display: grid !important;
        gap: 2px !important;

        overflow: hidden !important;
        text-align: left !important;
    }

    .live-chat__launcher-text strong,
    .live-chat__launcher-text span {
        display: block !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .live-chat__launcher-text strong {
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .live-chat__launcher-text span {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    /*
     * Закрытое окно полностью убирается.
     */
    .live-chat:not(.is-open) .live-chat__window {
        display: none !important;
    }

    /*
     * Открытое окно занимает почти весь экран.
     */
    .live-chat.is-open .live-chat__window {
        display: grid !important;

        position: fixed !important;

        top: calc(8px + env(safe-area-inset-top)) !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;

        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;

        grid-template-rows:
            auto minmax(0, 1fr) auto !important;

        margin: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;
    }

    .live-chat.is-open .live-chat__launcher {
        display: none !important;
    }

    .live-chat__messages {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .live-chat__form {
        min-width: 0 !important;
    }
}

@media (max-width: 380px) {
    .live-chat__launcher {
        min-width: 165px !important;
        max-width: calc(100vw - 125px) !important;
        padding-right: 10px !important;
    }

    .live-chat__launcher-text strong {
        font-size: 10px !important;
    }

    .live-chat__launcher-text span {
        font-size: 8px !important;
    }
}

/* ==================================================
   СКРЫВАЕМ ОСТАЛЬНЫЕ ПЛАВАЮЩИЕ КНОПКИ,
   КОГДА ОТКРЫТ ЧАТ
================================================== */

body.live-chat-open .float,
body.live-chat-open #quizFloatBtn,
body.live-chat-open .quiz-float-btn,
body.live-chat-open #scrollTopBtn,
body.live-chat-open #backToTopBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(.85) !important;
}

/*
 * Сам чат при открытии поднимаем выше
 * всех обычных элементов сайта.
 */
body.live-chat-open .live-chat {
    z-index: 2500 !important;
}

.float,
#quizFloatBtn,
.quiz-float-btn,
#scrollTopBtn,
#backToTopBtn {
    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease !important;
}

/* ==================================================
   ОТКЛЮЧЕНИЕ ЧАТА
================================================== */

@media (prefers-reduced-motion: reduce) {

    .live-chat__window,
    .live-chat__launcher,
    .live-chat__close,
    .live-chat__send {
        transition: none;
    }
}

/* ВРЕМЕННО СКРЫТЬ ЧАТ */
.live-chat {
    display: none !important;
}