/* Чат Владлена — самостоятельный плавающий виджет.
   Стили соответствуют реальной разметке js/live-chat.js.
   Не скрываем элементы остальной страницы. */

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

.live-chat {
    position: fixed;
    right: 16px; /* Кнопка стоит под Telegram, в одном правом столбце */
    bottom: 18px;
    z-index: 1450;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #f5f2f8;
    pointer-events: none;
}

.live-chat__launcher,
.live-chat__window {
    pointer-events: auto;
}

/* Кнопка открытия */
.live-chat__launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    min-width: 210px;
    padding: 7px 15px 7px 8px;
    border: 1px solid rgba(217, 182, 99, .54);
    border-radius: 999px;
    background: linear-gradient(145deg, #242337 0%, #121222 100%);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .025) inset;
    color: #f9f4eb;
    cursor: pointer;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.live-chat__launcher:hover {
    transform: translateY(-2px);
    border-color: #e4c57c;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .52);
}

.live-chat__launcher:focus-visible,
.live-chat__close:focus-visible,
.live-chat__send:focus-visible {
    outline: 2px solid #e5c77e;
    outline-offset: 3px;
}

.live-chat__launcher-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ddbd69, #a57b29);
    color: #1c1720;
    font-size: 19px;
}

.live-chat__launcher-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.live-chat__launcher-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.live-chat__launcher-text span {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    color: #bab6c8;
}

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

/* Окно без затемнения и блокировки остального сайта */
.live-chat__window {
    position: fixed;
    right: 166px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    width: min(386px, calc(100vw - 195px));
    height: min(570px, calc(100vh - 92px));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(214, 177, 94, .32);
    border-radius: 20px;
    background: linear-gradient(160deg, #1d1c2e 0%, #12121f 55%, #0e0f1d 100%);
    box-shadow: 0 24px 75px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .035) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.985);
    transform-origin: bottom right;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.live-chat.is-open .live-chat__window {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Шапка */
.live-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 72px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    background: rgba(255, 255, 255, .025);
}

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

.live-chat__avatar {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    border: 1px solid rgba(255, 231, 180, .38);
    background: linear-gradient(145deg, #e0c579, #89651c);
    color: #17131b;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(223, 184, 96, .075);
}

.live-chat__operator > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.live-chat__operator strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.live-chat__operator span:not(.live-chat__avatar) {
    display: block;
    color: #c0bacc;
    font-size: 10px;
    line-height: 1.35;
}

.live-chat__close {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: #eee9f0;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.live-chat__close:hover {
    background: rgba(255, 255, 255, .11);
}

/* Beta notice: visible in the launcher and chat header. */
.live-chat .live-chat__beta-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    border: 1px solid rgba(232, 195, 112, .55);
    border-radius: 5px;
    background: rgba(222, 179, 90, .14);
    color: #f2d38d;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .035em;
    vertical-align: middle;
    white-space: nowrap;
}
.live-chat__beta-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(232, 195, 112, .12);
    background: rgba(232, 195, 112, .055);
    color: #beb8c9;
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
}

/* Переписка */
.live-chat__messages {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 14px 14px;
    scrollbar-width: thin;
    scrollbar-color: #555168 transparent;
}

.live-chat__message {
    display: flex;
    width: fit-content;
    max-width: 88%;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.live-chat__message-author {
    padding: 0 6px;
    color: #c9c2d4;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
}

.live-chat__message--visitor .live-chat__message-author {
    color: #e6c780;
}

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

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

.live-chat__message-bubble {
    max-width: 100%;
    padding: 11px 13px;
    border-radius: 15px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.5;
}

.live-chat__message--operator .live-chat__message-bubble {
    border: 1px solid rgba(229, 197, 126, .2);
    border-bottom-left-radius: 5px;
    background: #282532;
    color: #f3eef4;
}

.live-chat__message--visitor .live-chat__message-bubble {
    border-bottom-right-radius: 5px;
    background: linear-gradient(135deg, #d8b86e, #b7903c);
    color: #201b21;
    font-weight: 500;
}

.live-chat__message--system {
    align-self: center;
    max-width: 94%;
}

.live-chat__message--system .live-chat__message-bubble {
    padding: 7px 9px;
    border: 0;
    background: transparent;
    color: #9d97ac;
    text-align: center;
    font-size: 11px;
}

/* После успешного сохранения имени поле больше не занимает место. */
.live-chat__name[hidden],
.live-chat__form.has-visitor-name .live-chat__name {
    display: none !important;
}

/* Форма */
.live-chat__form {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    background: rgba(5, 5, 14, .27);
}

.live-chat__name,
.live-chat__textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    background: #11121f;
    color: #f8f5fc;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    outline: none;
}

.live-chat__name {
    height: 41px;
}

.live-chat__name::placeholder,
.live-chat__textarea::placeholder {
    color: #858092;
}

.live-chat__name:focus,
.live-chat__textarea:focus {
    border-color: rgba(221, 185, 101, .7);
    box-shadow: 0 0 0 2px rgba(221, 185, 101, .085);
}

.live-chat__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.live-chat__textarea {
    display: block;
    flex: 1 1 auto;
    min-height: 43px;
    max-height: 120px;
    height: 43px;
    resize: none;
    overflow-y: auto;
}

.live-chat__send {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    min-width: 43px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(145deg, #eccd81, #bf943d);
    box-shadow: 0 6px 17px rgba(0, 0, 0, .28);
    color: #211c20;
    font-size: 20px;
    cursor: pointer;
}

.live-chat__send:hover {
    filter: brightness(1.08);
}

.live-chat__send:disabled {
    opacity: .55;
    cursor: wait;
}

.live-chat__status {
    min-height: 0;
    color: #b7afc3;
    font-size: 11px;
    line-height: 1.3;
}

.live-chat__status:empty {
    display: none;
}

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

/* Автоквиз и чат не отображаются одновременно. */
body.auto-quiz-modal-open .live-chat {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* В тестовой версии столбец мессенджеров поднимаем вверх.
   Самый нижний элемент справа — кнопка чата. */
body .float {
    bottom: 190px !important;
}

/* Небольшое ненавязчивое приглашение, когда чат закрыт. */
.live-chat__nudge {
    position: absolute;
    right: 0;
    bottom: calc(100% + 13px);
    width: 236px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 9px 9px 11px;
    border-radius: 12px;
    border: 1px solid rgba(213, 181, 104, .4);
    background: #232133;
    color: #fff8e9;
    font-size: 11px;
    line-height: 1.34;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .40);
    animation: chatInvitationGlow 3.2s ease-in-out infinite;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    pointer-events: none;
}

.live-chat.show-nudge:not(.is-open) .live-chat__nudge,
.live-chat:not(.is-open):not(.nudge-dismissed) .live-chat__launcher:hover + .live-chat__nudge,
.live-chat:not(.is-open):not(.nudge-dismissed) .live-chat__launcher:focus-visible + .live-chat__nudge {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.live-chat__nudge-close {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .07);
    color: #e4dfe7;
    font-size: 18px;
    line-height: 22px;
    border-radius: 50%;
    cursor: pointer;
}

.live-chat__nudge-close:hover {
    background: rgba(255, 255, 255, .17);
}

/* Адаптив: все мессенджеры и квиз остаются доступными */
@media (max-width: 760px) {
    .live-chat {
        left: auto;
        right: 10px;
        bottom: 14px;
        transform: none;
    }

    .live-chat__launcher {
        min-width: 208px;
    }

    .live-chat__window {
        position: fixed;
        left: auto;
        right: 67px;
        bottom: 14px;
        width: min(390px, calc(100vw - 87px));
        height: min(570px, calc(100dvh - 75px));
        transform: translateY(10px) scale(.985);
        transform-origin: bottom right;
    }

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

    .live-chat__nudge {
        right: 0;
        bottom: calc(100% + 12px);
        width: min(236px, calc(100vw - 25px));
    }
}

@media (max-width: 480px) {
    .live-chat__window {
        height: min(73dvh, 540px);
        border-radius: 17px;
    }

    .live-chat__header {
        min-height: 65px;
        padding: 10px 12px;
    }

    .live-chat__messages {
        padding: 12px;
    }

    .live-chat__form {
        padding: 10px 11px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-chat__window,
    .live-chat__launcher {
        transition: none;
    }
}


/* The invitation sits above the launcher, not across the main lead form. */
@keyframes chatInvitationGlow {
    0%, 100% {
        border-color: rgba(215, 175, 75, .4);
        box-shadow: 0 9px 24px rgba(0, 0, 0, .4), 0 0 0 0 rgba(215, 175, 75, .08);
    }
    50% {
        border-color: rgba(247, 211, 120, .8);
        box-shadow: 0 9px 30px rgba(0, 0, 0, .48), 0 0 0 6px rgba(215, 175, 75, .09);
    }
}

.live-chat__typing {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0 13px 8px;
    padding: 7px 12px;
    border: 1px solid rgba(222, 190, 110, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    color: #c5b8d4;
    font-size: 11px;
    line-height: 1.35;
}

.live-chat__typing[hidden] {
    display: none !important;
}

.live-chat__typing span {
    display: inline-block;
    margin-left: 4px;
    letter-spacing: 2px;
    color: #ddbf73;
    animation: chatTypingLight 1.25s ease-in-out infinite;
}

@keyframes chatTypingLight {
    0%,100% { opacity: .28; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .live-chat__nudge,
    .live-chat__typing span {
        animation: none !important;
    }
}

@media (max-width: 760px) {
    body .float {
        bottom: 176px !important;
    }
}


/* Real portrait and truthful presence light. */
.live-chat__avatar { position: relative; }
.live-chat__avatar-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
}
.live-chat__online-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    border: 2px solid #171626;
    background: #3ad987;
    box-shadow: 0 0 0 2px rgba(58,217,135,.13),0 0 11px rgba(58,217,135,.35);
}
.live-chat__online-dot[hidden] { display: none !important; }

/* Compact messenger/chat stack; raised only while the invitation is visible. */
body .float { bottom: 96px !important; }
body:has(.live-chat.show-nudge:not(.is-open)) .float {
    bottom: 156px !important;
}

/* Timestamp in the visitor's own local timezone. */
.live-chat__message-time {
    font-size: 10px;
    line-height: 1.2;
    color: #a19bae;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
}
.live-chat__message--visitor .live-chat__message-time {
    text-align: right;
    align-self: flex-end;
}

@media (max-width: 760px) {
    body .float { bottom: 94px !important; }
    body:has(.live-chat.show-nudge:not(.is-open)) .float {
        bottom: 154px !important;
    }
}


/* Portrait: enforce an actual circular clip regardless of global theme styles. */
.live-chat .live-chat__avatar {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    aspect-ratio: 1 / 1;
    overflow: visible;
    border-radius: 50%;
    padding: 0;
}
.live-chat .live-chat__avatar-photo {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 20%;
    clip-path: circle(50% at 50% 50%);
}
.live-chat .live-chat__online-dot {
    z-index: 2;
    right: -2px;
    bottom: -2px;
}

/* The invitation actually floats and gently moves; not just a glowing border. */
.live-chat.show-nudge:not(.is-open) .live-chat__nudge {
    animation: chatNudgeMove 3.6s ease-in-out infinite;
}
@keyframes chatNudgeMove {
    0%, 28%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    8% { transform: translate3d(0, -8px, 0) rotate(-1deg); }
    16% { transform: translate3d(0, -3px, 0) rotate(.5deg); }
    35% { transform: translate3d(-3px, 0, 0) rotate(0); }
    43% { transform: translate3d(2px, 0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-chat.show-nudge:not(.is-open) .live-chat__nudge {
        animation: none;
    }
}

/* Compact contact card inside the thread; no redirect to a main lead form. */
.live-chat__contact-form {
    display: grid;
    gap: 7px;
    flex: 0 0 auto;
    padding: 12px 14px;
    background: #1d2030;
    border-top: 1px solid rgba(226, 194, 110, .33);
    max-height: min(260px, 38vh);
    overflow-y: auto;
}
.live-chat__contact-form[hidden] { display: none !important; }
.live-chat__contact-heading {
    font-weight: 700;
    font-size: 13px;
    color: #f8e3ab;
}
.live-chat__contact-note {
    margin: 0 0 2px;
    font-size: 11px;
    line-height: 1.4;
    color: #c2bbcf;
}
.live-chat__contact-form input,
.live-chat__contact-form select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 37px;
    min-height: 37px;
    padding: 8px 10px;
    color: #f6f3fa;
    background: #111220;
    border: 1px solid rgba(232, 205, 149, .27);
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
}
.live-chat__contact-form select option { background: #111220; color: #fff; }
.live-chat__contact-submit {
    height: 38px;
    border: 1px solid #b5934a;
    border-radius: 10px;
    background: linear-gradient(130deg, #e5cb8c, #be943e);
    color: #211a16;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.live-chat__contact-submit:disabled { opacity: .6; cursor: wait; }
.live-chat__contact-error { color: #f4a6b0; font-size: 11px; min-height: 0; }
.live-chat__contact-error:empty { display: none; }


/* Let the invitation text move too, not only its frame/glow. */
.live-chat.show-nudge:not(.is-open) .live-chat__nudge > span {
    display: inline-block;
    animation: chatInvitationText 3.6s ease-in-out infinite;
}
@keyframes chatInvitationText {
    0%, 27%, 100% { transform: translateY(0); }
    7% { transform: translateY(-2px); }
    14% { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
    .live-chat.show-nudge:not(.is-open) .live-chat__nudge > span {
        animation: none;
    }
}


.live-chat__typing #liveChatTypingLabel {
    margin-left: 0;
    letter-spacing: normal;
    color: #c5b8d4;
    animation: none !important;
}

/* Full-screen conversation on phones, including landscape and safe areas. */
@media (max-width: 760px), (max-height: 600px) and (pointer: coarse) {
    html.live-chat-fullscreen,
    body.live-chat-fullscreen {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .live-chat.is-open {
        z-index: 9000;
    }

    .live-chat .live-chat__window {
        position: fixed;
        top: var(--live-chat-viewport-top, 0px);
        left: 0;
        right: 0;
        bottom: auto;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        height: var(--live-chat-viewport-height, 100dvh);
        min-height: 0;
        max-height: none;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform-origin: center;
    }

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

    .live-chat__header {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
    }

    .live-chat__form {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .live-chat__contact-form {
        max-height: min(320px, 45dvh);
    }
}