/* ============================================================
   ARENA SUPPORT — PREMIUM V2
============================================================ */

.support-page-v2,
.support-queue-page-v2 {
    --sp-bg: #ffffff;
    --sp-panel: #ffffff;
    --sp-panel-soft: #f7f4f3;
    --sp-input: #f6f3f2;
    --sp-border: rgba(37, 24, 21, .11);
    --sp-border-strong: rgba(37, 24, 21, .18);
    --sp-text: #1b1514;
    --sp-muted: #817471;
    --sp-mine: #b22000;
    --sp-mine-text: #ffffff;
    --sp-other: #f1edec;
    --sp-other-text: #241b19;

    width: min(920px, 100%);
    margin: 0 auto;
}


html[data-theme="dark"] .support-page-v2,
html[data-theme="dark"] .support-queue-page-v2 {
    --sp-bg: #0d0a0a;
    --sp-panel: #151111;
    --sp-panel-soft: #191414;
    --sp-input: #110e0e;
    --sp-border: rgba(255, 239, 235, .09);
    --sp-border-strong: rgba(255, 239, 235, .15);
    --sp-text: #f4edeb;
    --sp-muted: #948784;
    --sp-mine: #b22000;
    --sp-mine-text: #ffffff;
    --sp-other: #211a19;
    --sp-other-text: #f2eae8;
}


/* ============================================================
   HEADER DIALOG
============================================================ */

.support-conversation-header-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 18px;
}


.support-conversation-heading-v2 {
    min-width: 0;
}


.support-conversation-kicker-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 10px;
}


.support-live-badge-v2,
.support-status-v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 27px;
    padding: 0 10px;

    border: 1px solid var(--sp-border);
    border-radius: 999px;

    background: var(--sp-panel-soft);

    color: var(--sp-muted);

    font-size: 11px;
    font-weight: 750;
}


.support-live-dot-v2 {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: #28b978;

    box-shadow:
        0 0 0 4px
        rgba(40, 185, 120, .10);
}


#connection-state[data-kind="offline"] +
.support-live-dot-v2 {
    background: #a99691;
}


.support-conversation-header-v2 h1 {
    max-width: 760px;

    margin: 0;

    color: var(--sp-text);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.02;

    letter-spacing: -.04em;
}


.support-conversation-meta-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 12px;
}


.support-conversation-meta-v2 a,
.support-conversation-meta-v2 span {
    color: var(--sp-muted);

    font-size: 12px;

    text-decoration: none;
}


.support-conversation-meta-v2 a {
    padding-bottom: 1px;

    border-bottom:
        1px solid var(--sp-border-strong);
}


.support-close-form-v2 {
    flex: 0 0 auto;
}


.support-close-button-v2 {
    min-height: 38px;

    padding: 0 14px;

    border:
        1px solid var(--sp-border);

    border-radius:
        12px;

    background:
        transparent;

    color:
        var(--sp-muted);

    font: inherit;
    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}


.support-close-button-v2:hover {
    border-color:
        rgba(178, 32, 0, .28);

    background:
        rgba(178, 32, 0, .07);

    color:
        #cf3b1d;
}


/* ============================================================
   CHAT PANEL
============================================================ */

.support-chat-panel-v2 {
    overflow: hidden;

    border:
        1px solid var(--sp-border);

    border-radius:
        22px;

    background:
        var(--sp-panel);

    box-shadow:
        0 16px 50px
        rgba(22, 12, 10, .055);
}


html[data-theme="dark"]
.support-chat-panel-v2 {
    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, .22);
}


.support-chat-log-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;

    height:
        clamp(340px, 52vh, 540px);

    padding:
        20px 18px 16px;

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

    overscroll-behavior: contain;

    background:
        linear-gradient(
            180deg,
            var(--sp-panel) 0%,
            var(--sp-panel-soft) 100%
        );

    scrollbar-width: thin;
}


.support-chat-log-v2::-webkit-scrollbar {
    width: 7px;
}


.support-chat-log-v2::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(128, 108, 103, .22);
}


/* ============================================================
   MESSAGE
============================================================ */

.support-message-v2 {
    display: flex;
    justify-content: flex-start;

    width: 100%;

    animation:
        support-message-enter-v2
        220ms
        cubic-bezier(.2,.75,.2,1)
        both;
}


.support-message-v2.mine {
    justify-content: flex-end;
}


.support-message-bubble-v2 {
    width: fit-content;
    max-width: min(72%, 620px);

    padding: 11px 13px 9px;

    border:
        1px solid var(--sp-border);

    border-radius:
        16px 16px 16px 5px;

    background:
        var(--sp-other);

    color:
        var(--sp-other-text);

    box-shadow:
        0 4px 14px
        rgba(18, 10, 8, .035);
}


.support-message-v2.mine
.support-message-bubble-v2 {
    border-color:
        rgba(178, 32, 0, .28);

    border-radius:
        16px 16px 5px 16px;

    background:
        linear-gradient(
            145deg,
            #b22000,
            #98200a
        );

    color:
        var(--sp-mine-text);

    box-shadow:
        0 7px 22px
        rgba(178, 32, 0, .14);
}


.support-message-author-v2 {
    margin-bottom: 5px;

    color:
        var(--sp-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .035em;
}


.support-message-v2.mine
.support-message-author-v2 {
    color:
        rgba(255,255,255,.68);
}


.support-message-text-v2 {
    color: inherit !important;

    font-size: 14px;
    line-height: 1.48;

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


.support-message-meta-v2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    min-height: 15px;

    margin-top: 7px;

    color:
        var(--sp-muted);

    font-size: 9px;
}


.support-message-v2.mine
.support-message-meta-v2 {
    color:
        rgba(255,255,255,.62);
}


.support-attachment-v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 9px;
    padding: 7px 9px;

    border:
        1px solid var(--sp-border);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.35);

    color:
        inherit !important;

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;
}


html[data-theme="dark"]
.support-attachment-v2 {
    background:
        rgba(255,255,255,.045);
}


.support-message-v2.mine
.support-attachment-v2 {
    border-color:
        rgba(255,255,255,.17);

    background:
        rgba(255,255,255,.10);
}


.support-message-v2.is-new
.support-message-bubble-v2 {
    animation:
        support-message-pop-v2
        360ms
        cubic-bezier(.2,.8,.2,1);
}


@keyframes support-message-enter-v2 {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes support-message-pop-v2 {
    0% {
        transform:
            translateY(7px)
            scale(.985);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}


/* ============================================================
   EMPTY / TYPING
============================================================ */

.support-empty-v2 {
    margin: auto;

    color:
        var(--sp-muted);

    font-size: 13px;

    text-align: center;
}


.support-typing-v2 {
    min-height: 24px;

    padding:
        5px 19px 4px;

    background:
        var(--sp-panel);

    color:
        var(--sp-muted);

    font-size: 10px;
}


/* ============================================================
   COMPOSER
============================================================ */

.support-composer-v2 {
    padding:
        10px 12px 12px;

    border-top:
        1px solid var(--sp-border);

    background:
        var(--sp-panel);
}


html[data-theme="dark"]
.support-composer-v2
#chat-body {
    width: 100%;

    min-height: 44px;

    padding:
        11px 12px !important;

    border:
        1px solid var(--sp-border) !important;

    border-radius:
        14px !important;

    background:
        #110e0e !important;

    color:
        #f5efed !important;

    font-size:
        14px;

    line-height:
        1.45;

    resize:
        none;

    box-shadow:
        none !important;
}


.support-composer-v2
#chat-body {
    width: 100%;

    min-height: 44px;

    padding:
        11px 12px;

    border:
        1px solid var(--sp-border);

    border-radius:
        14px;

    background:
        var(--sp-input);

    color:
        var(--sp-text);

    font: inherit;
    font-size:
        14px;

    line-height:
        1.45;

    resize:
        none;

    outline:
        none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.support-composer-v2
#chat-body:focus {
    border-color:
        rgba(178, 32, 0, .55) !important;

    box-shadow:
        0 0 0 3px
        rgba(178, 32, 0, .08) !important;
}


.support-composer-bottom-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 8px;
}


.support-composer-file-v2 {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}


.support-file-button-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 11px;

    border:
        1px solid var(--sp-border);

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--sp-muted);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 150ms ease,
        color 150ms ease;
}


.support-file-button-v2:hover {
    background:
        var(--sp-panel-soft);

    color:
        var(--sp-text);
}


.support-file-name-v2 {
    max-width: 270px;

    overflow: hidden;

    color:
        var(--sp-muted);

    font-size: 10px;

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


.support-send-button-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;
    padding: 0 15px;

    border: 0;
    border-radius: 12px;

    background:
        #b22000;

    color:
        #fff;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 6px 18px
        rgba(178,32,0,.16);

    transition:
        transform 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}


.support-send-button-v2:hover {
    background:
        #c92e0e;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 24px
        rgba(178,32,0,.21);
}


.support-send-button-v2:disabled {
    cursor:
        wait;

    opacity:
        .55;

    transform:
        none;
}


.support-composer-error-v2 {
    min-height: 16px;

    margin-top: 5px;

    color:
        #db4d30;

    font-size: 10px;
}


.support-readonly-v2 {
    padding: 15px;

    border-top:
        1px solid var(--sp-border);

    color:
        var(--sp-muted);

    font-size: 12px;
}


/* ============================================================
   CURATOR QUEUE
============================================================ */

.support-queue-header-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}


.support-queue-eyebrow-v2 {
    margin-bottom: 6px;

    color: #c53b20;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.support-queue-header-v2 h1 {
    margin: 0;

    color:
        var(--sp-text);

    font-size:
        clamp(34px, 5vw, 52px);

    line-height:
        1;

    letter-spacing:
        -.045em;
}


.support-queue-header-v2 p {
    margin:
        9px 0 0;

    color:
        var(--sp-muted);

    font-size:
        13px;
}


.support-queue-live-v2 {
    display: flex;
    align-items: center;
    gap: 7px;

    padding:
        7px 10px;

    border:
        1px solid var(--sp-border);

    border-radius:
        999px;

    color:
        var(--sp-muted);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.support-queue-live-v2 span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #29bb78;
}


.support-queue-list-v2 {
    display: grid;
    gap: 8px;
}


.support-queue-item-v2 {
    display: grid;

    grid-template-columns:
        36px
        minmax(0,1fr)
        28px;

    align-items: center;
    gap: 12px;

    padding:
        13px 14px;

    border:
        1px solid var(--sp-border);

    border-radius:
        16px;

    background:
        var(--sp-panel);

    color:
        var(--sp-text);

    text-decoration:
        none !important;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}


.support-queue-item-v2:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--sp-border-strong);

    background:
        var(--sp-panel-soft);

    box-shadow:
        0 10px 28px
        rgba(23,14,12,.055);
}


.support-queue-item-v2.is-new {
    animation:
        support-queue-new-v2
        650ms
        ease;
}


@keyframes support-queue-new-v2 {
    0% {
        background:
            rgba(178,32,0,.12);

        transform:
            translateY(-4px);
    }

    100% {
        background:
            var(--sp-panel);

        transform:
            translateY(0);
    }
}


.support-queue-avatar-v2 {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius:
        12px;

    background:
        rgba(178,32,0,.10);

    color:
        #cf3c20;

    font-size:
        13px;

    font-weight:
        900;
}


.support-queue-content-v2 {
    min-width: 0;
}


.support-queue-top-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.support-queue-subject-v2 {
    overflow: hidden;

    color:
        var(--sp-text);

    font-size:
        13px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.support-queue-status-v2 {
    flex: 0 0 auto;

    padding:
        4px 7px;

    border:
        1px solid var(--sp-border);

    border-radius:
        999px;

    color:
        var(--sp-muted);

    font-size:
        9px;

    font-weight:
        800;
}


.support-queue-status-v2[
data-status="waiting_curator"
] {
    border-color:
        rgba(178,32,0,.22);

    background:
        rgba(178,32,0,.08);

    color:
        #d44729;
}


.support-queue-status-v2[
data-status="waiting_student"
] {
    background:
        rgba(125,112,108,.07);
}


.support-queue-user-v2 {
    margin-top:
        4px;

    color:
        var(--sp-muted);

    font-size:
        11px;
}


.support-queue-bottom-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-top:
        6px;

    color:
        var(--sp-muted);

    font-size:
        9px;
}


.support-queue-arrow-v2 {
    color:
        var(--sp-muted);

    font-size:
        17px;

    transition:
        transform 150ms ease,
        color 150ms ease;
}


.support-queue-item-v2:hover
.support-queue-arrow-v2 {
    color:
        #c83b20;

    transform:
        translateX(2px);
}


.support-queue-empty-v2 {
    display: grid;
    gap: 3px;

    padding:
        24px;

    border:
        1px dashed var(--sp-border);

    border-radius:
        17px;

    color:
        var(--sp-muted);

    text-align:
        center;
}


.support-queue-empty-v2 strong {
    color:
        var(--sp-text);
}


/* ============================================================
   GLOBAL CURATOR TOASTS
============================================================ */

.curator-toast-stack-v2 {
    position:
        fixed;

    top:
        78px;

    right:
        18px;

    z-index:
        9000;

    display:
        grid;

    width:
        min(360px, calc(100vw - 30px));

    gap:
        8px;

    pointer-events:
        none;
}


.curator-toast-v2 {
    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    padding:
        13px 38px 13px 14px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        16px;

    background:
        rgba(18,14,14,.96);

    color:
        #f7efed !important;

    text-decoration:
        none !important;

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.34);

    backdrop-filter:
        blur(18px);

    pointer-events:
        auto;

    animation:
        curator-toast-in-v2
        300ms
        cubic-bezier(.2,.8,.2,1);
}


.curator-toast-v2::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        #b22000;
}


.curator-toast-kicker-v2 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    color:
        #9f918e;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.curator-toast-title-v2 {
    margin-top:
        5px;

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        850;

    line-height:
        1.3;
}


.curator-toast-preview-v2 {
    display:
        -webkit-box;

    margin-top:
        4px;

    overflow:
        hidden;

    color:
        #bcaeab;

    font-size:
        11px;

    line-height:
        1.4;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


.curator-toast-count-v2 {
    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    position:
        absolute;

    top:
        11px;

    right:
        11px;

    min-width:
        20px;

    height:
        20px;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        #b22000;

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        900;
}


.curator-toast-v2[data-count]:not(
[data-count="1"]
)
.curator-toast-count-v2 {
    display:
        flex;
}


.curator-toast-v2.is-leaving {
    animation:
        curator-toast-out-v2
        220ms
        ease
        forwards;
}


@keyframes curator-toast-in-v2 {
    from {
        opacity:
            0;

        transform:
            translateX(16px)
            scale(.98);
    }

    to {
        opacity:
            1;

        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes curator-toast-out-v2 {
    to {
        opacity:
            0;

        transform:
            translateX(12px)
            scale(.985);
    }
}


/* nav unread dot */

.curator-nav-live-count-v2 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        17px;

    height:
        17px;

    margin-left:
        4px;

    padding:
        0 4px;

    border-radius:
        999px;

    background:
        #b22000;

    color:
        #fff !important;

    font-size:
        8px;

    font-weight:
        900;

    vertical-align:
        middle;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .support-conversation-header-v2 {
        align-items:
            flex-start;
    }


    .support-conversation-header-v2 h1 {
        font-size:
            30px;
    }


    .support-chat-log-v2 {
        height:
            min(58vh, 490px);

        padding:
            14px 10px;
    }


    .support-message-bubble-v2 {
        max-width:
            86%;
    }


    .support-close-button-v2 {
        min-height:
            34px;

        padding:
            0 10px;
    }


    .support-queue-header-v2 {
        align-items:
            flex-start;
    }


    .support-queue-item-v2 {
        grid-template-columns:
            34px minmax(0,1fr);

        padding:
            11px;
    }


    .support-queue-arrow-v2 {
        display:
            none;
    }


    .support-queue-top-v2 {
        align-items:
            flex-start;
    }


    .support-queue-status-v2 {
        max-width:
            100px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .curator-toast-stack-v2 {
        top:
            68px;

        right:
            12px;

        width:
            calc(100vw - 24px);
    }
}


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

    .support-message-v2,
    .support-message-v2.is-new
    .support-message-bubble-v2,
    .support-queue-item-v2.is-new,
    .curator-toast-v2 {
        animation:
            none !important;
    }
}


/* ============================================================
   support-premium-v21-fixes
============================================================ */


/* ------------------------------------------------------------
   Главная проблема v2:
   чат больше НЕ занимает половину экрана без причины.
------------------------------------------------------------ */

.support-page-v2 {
    width:
        min(860px, 100%) !important;
}


.support-chat-log-v2 {
    height:
        auto !important;

    min-height:
        180px !important;

    max-height:
        min(46vh, 420px) !important;

    justify-content:
        flex-start !important;

    align-content:
        flex-start !important;

    align-items:
        stretch !important;

    gap:
        8px !important;

    padding:
        16px 14px 13px !important;
}


/*
Никакой message не может сам
растягивать чат по вертикали.
*/

.support-chat-log-v2
.support-message-v2 {
    flex:
        0 0 auto !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-self:
        stretch !important;
}


.support-chat-log-v2
.support-message-v2.mine {
    margin:
        0 !important;
}


/* ------------------------------------------------------------
   Более компактные bubbles
------------------------------------------------------------ */

.support-message-bubble-v2 {
    max-width:
        min(68%, 520px) !important;

    min-width:
        68px;

    padding:
        9px 11px 8px !important;

    border-radius:
        14px 14px 14px 5px !important;
}


.support-message-v2.mine
.support-message-bubble-v2 {
    border-radius:
        14px 14px 5px 14px !important;
}


.support-message-text-v2 {
    font-size:
        13px !important;

    line-height:
        1.42 !important;
}


.support-message-author-v2 {
    margin-bottom:
        4px !important;

    font-size:
        9px !important;
}


.support-message-meta-v2 {
    margin-top:
        5px !important;
}


/* ------------------------------------------------------------
   Несколько сообщений подряд от одного человека
   выглядят как одна нормальная серия.
------------------------------------------------------------ */

.support-message-v2.is-continuation {
    margin-top:
        -4px !important;
}


.support-message-v2.is-continuation
.support-message-author-v2 {
    display:
        none;
}


.support-message-v2.is-continuation:not(.mine)
.support-message-bubble-v2 {
    border-radius:
        5px 14px 14px 5px !important;
}


.support-message-v2.is-continuation.mine
.support-message-bubble-v2 {
    border-radius:
        14px 5px 5px 14px !important;
}


/* ------------------------------------------------------------
   STATUS
------------------------------------------------------------ */

#conversation-status-v2[
data-status="waiting_curator"
] {
    border-color:
        rgba(178,32,0,.20);

    background:
        rgba(178,32,0,.07);

    color:
        #d85539;
}


#conversation-status-v2[
data-status="waiting_student"
] {
    color:
        var(--sp-muted);
}


/* ------------------------------------------------------------
   Header делаем компактнее.
------------------------------------------------------------ */

.support-conversation-header-v2 {
    align-items:
        center !important;

    margin-bottom:
        13px !important;
}


.support-conversation-header-v2 h1 {
    font-size:
        clamp(28px, 3.5vw, 42px) !important;
}


.support-conversation-meta-v2 {
    margin-top:
        8px !important;
}


.support-conversation-kicker-v2 {
    margin-bottom:
        8px !important;
}


/* ------------------------------------------------------------
   Composer тоже компактнее.
------------------------------------------------------------ */

.support-composer-v2 {
    padding:
        8px 10px 10px !important;
}


.support-composer-v2
#chat-body {
    min-height:
        40px !important;

    padding:
        9px 11px !important;

    border-radius:
        12px !important;

    font-size:
        13px !important;
}


.support-composer-bottom-v2 {
    margin-top:
        6px !important;
}


.support-file-button-v2 {
    min-height:
        31px !important;

    padding:
        0 9px !important;
}


.support-send-button-v2 {
    min-height:
        34px !important;

    padding:
        0 13px !important;
}


/* ------------------------------------------------------------
   Убираем лишнюю визуальную пустоту внизу страницы.
------------------------------------------------------------ */

.support-page-v2
+ * {
    margin-top:
        0;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 700px) {

    .support-chat-log-v2 {
        min-height:
            170px !important;

        max-height:
            52vh !important;

        padding:
            12px 9px !important;
    }


    .support-message-bubble-v2 {
        max-width:
            84% !important;
    }


    .support-conversation-header-v2 {
        gap:
            10px !important;
    }


    .support-conversation-header-v2 h1 {
        font-size:
            27px !important;
    }
}



/* ============================================================
   arena-support-chat-v3
   Compact messenger layout
============================================================ */


/* ============================================================
   ОБЩИЙ РАЗМЕР
============================================================ */

.support-page-v2 {
    width: min(820px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   HEADER
============================================================ */

.support-conversation-header-v2 {
    align-items: center !important;

    margin-bottom: 12px !important;
}


.support-conversation-header-v2 h1 {
    margin: 0 !important;

    font-size: clamp(
        27px,
        3.2vw,
        38px
    ) !important;

    line-height: 1.02 !important;

    letter-spacing: -.035em !important;
}


.support-conversation-kicker-v2 {
    margin-bottom: 7px !important;
}


.support-conversation-meta-v2 {
    margin-top: 7px !important;
}


/* ============================================================
   ОСНОВНОЕ ОКНО ЧАТА

   Важное:
   больше НЕТ постоянного огромного окна.
   Оно растёт по сообщениям и только потом начинает скроллиться.
============================================================ */

.support-chat-panel-v2 {
    overflow: hidden !important;

    border-radius: 18px !important;

    border:
        1px solid
        var(--sp-border) !important;
}


.support-chat-log-v2 {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    height: auto !important;

    min-height: 100px !important;

    max-height: 390px !important;

    padding:
        14px 13px 12px !important;

    gap: 6px !important;

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

    justify-content:
        flex-start !important;

    align-items:
        stretch !important;

    align-content:
        flex-start !important;
}


/* ============================================================
   СТРОКА СООБЩЕНИЯ
============================================================ */

.support-message-v2 {
    display: flex !important;

    flex:
        0 0 auto !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-content:
        flex-start !important;

    align-items:
        flex-end !important;
}


.support-message-v2.mine {
    justify-content:
        flex-end !important;
}


/* ============================================================
   BUBBLE

   Полный reset, чтобы старые CSS-правила сайта
   больше не могли раздувать сообщение.
============================================================ */

.support-message-v2
.support-message-bubble-v2 {

    display: block !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        min(68%, 500px) !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        8px 10px 7px !important;

    overflow:
        visible !important;

    border-radius:
        12px 12px 12px 4px !important;

    box-sizing:
        border-box !important;

    background:
        var(--sp-other) !important;

    border:
        1px solid
        var(--sp-border) !important;

    color:
        var(--sp-other-text) !important;

    box-shadow:
        none !important;
}


.support-message-v2.mine
.support-message-bubble-v2 {

    border-radius:
        12px 12px 4px 12px !important;

    border-color:
        rgba(178, 32, 0, .28) !important;

    background:
        #B22000 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 15px
        rgba(178,32,0,.11) !important;
}


/* ============================================================
   ИМЯ
============================================================ */

.support-message-author-v2 {

    display:
        block !important;

    min-height:
        0 !important;

    margin:
        0 0 3px !important;

    padding:
        0 !important;

    background:
        none !important;

    border:
        0 !important;

    color:
        var(--sp-muted) !important;

    font-size:
        9px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;
}


.support-message-v2.mine
.support-message-author-v2 {

    color:
        rgba(255,255,255,.65) !important;
}


/* ============================================================
   ТЕКСТ СООБЩЕНИЯ
============================================================ */

.support-message-v2
.support-message-text-v2 {

    display:
        block !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        normal !important;

    white-space:
        pre-wrap !important;
}


/* ============================================================
   ВРЕМЯ / ПРОЧИТАНО
============================================================ */

.support-message-meta-v2 {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        6px !important;

    min-height:
        0 !important;

    margin:
        4px 0 0 !important;

    padding:
        0 !important;

    color:
        var(--sp-muted) !important;

    font-size:
        8px !important;

    line-height:
        1 !important;
}


.support-message-v2.mine
.support-message-meta-v2 {

    color:
        rgba(255,255,255,.63) !important;
}


/* ============================================================
   СООБЩЕНИЯ ПОДРЯД

   Не повторяем имя и уменьшаем расстояние.
============================================================ */

.support-message-v2.is-continuation {

    margin-top:
        -2px !important;
}


.support-message-v2.is-continuation
.support-message-author-v2 {

    display:
        none !important;
}


.support-message-v2.is-continuation:not(.mine)
.support-message-bubble-v2 {

    border-radius:
        4px 12px 12px 4px !important;
}


.support-message-v2.is-continuation.mine
.support-message-bubble-v2 {

    border-radius:
        12px 4px 4px 12px !important;
}


/* ============================================================
   ФАЙЛ
============================================================ */

.support-attachment-v2 {

    display:
        inline-flex !important;

    min-height:
        0 !important;

    margin:
        6px 0 0 !important;

    padding:
        5px 7px !important;

    border-radius:
        8px !important;

    font-size:
        10px !important;

    line-height:
        1.2 !important;
}


/* ============================================================
   COMPOSER
============================================================ */

.support-composer-v2 {

    padding:
        8px 10px 9px !important;
}


.support-composer-v2 #chat-body {

    min-height:
        38px !important;

    max-height:
        110px !important;

    margin:
        0 !important;

    padding:
        9px 10px !important;

    border-radius:
        11px !important;

    font-size:
        13px !important;

    line-height:
        1.35 !important;
}


.support-composer-bottom-v2 {

    margin-top:
        6px !important;
}


.support-file-button-v2 {

    min-height:
        30px !important;

    padding:
        0 9px !important;

    border-radius:
        9px !important;

    font-size:
        10px !important;
}


.support-send-button-v2 {

    min-height:
        34px !important;

    padding:
        0 13px !important;

    border-radius:
        10px !important;

    font-size:
        11px !important;

    box-shadow:
        none !important;
}


/* ============================================================
   EMPTY
============================================================ */

.support-empty-v2 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        105px;

    margin:
        0 !important;

    font-size:
        12px !important;
}


/* ============================================================
   TYPING

   Не создаёт огромной пустой строки.
============================================================ */

.support-typing-v2 {

    min-height:
        0 !important;

    height:
        auto !important;

    padding:
        0 13px !important;

    font-size:
        9px !important;

    line-height:
        0 !important;
}


.support-typing-v2:not(:empty) {

    padding:
        5px 13px !important;

    line-height:
        1.2 !important;

    border-top:
        1px solid
        var(--sp-border);
}


/* ============================================================
   DARK MODE
============================================================ */

html[data-theme="dark"]
.support-chat-log-v2 {

    background:
        #100d0d !important;
}


html[data-theme="dark"]
.support-message-v2:not(.mine)
.support-message-bubble-v2 {

    background:
        #1b1615 !important;

    border-color:
        rgba(255,255,255,.08) !important;

    color:
        #f2eae8 !important;
}


html[data-theme="dark"]
.support-composer-v2 {

    background:
        #151111 !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .support-page-v2 {
        width:
            100% !important;
    }


    .support-chat-log-v2 {

        max-height:
            52vh !important;

        min-height:
            90px !important;

        padding:
            10px 8px !important;

        gap:
            5px !important;
    }


    .support-message-v2
    .support-message-bubble-v2 {

        max-width:
            82% !important;
    }


    .support-message-text-v2 {

        font-size:
            13px !important;
    }
}



/* ============================================================
   arena-support-message-alignment-v31
   Одинаковая геометрия сообщений ученика и куратора
============================================================ */


/* Строка сообщения */

.support-chat-log-v2 .support-message-v2 {
    display: flex !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: flex-end !important;
}


/* Ученик слева */

.support-chat-log-v2
.support-message-v2:not(.mine) {
    justify-content: flex-start !important;
}


/* Куратор справа */

.support-chat-log-v2
.support-message-v2.mine {
    justify-content: flex-end !important;
}


/* ============================================================
   ГЛАВНОЕ:
   bubble всегда сжимается ровно по содержимому
============================================================ */

.support-chat-log-v2
.support-message-v2
.support-message-bubble-v2 {

    display: inline-flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    flex: 0 1 auto !important;

    width: fit-content !important;
    min-width: 0 !important;

    max-width: min(68%, 500px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    text-align: left !important;
}


/* Небольшое сообщение не превращается в квадрат */

.support-chat-log-v2
.support-message-v2:not(.mine)
.support-message-bubble-v2 {

    padding: 8px 10px 7px !important;

    border-radius:
        12px 12px 12px 4px !important;

    background:
        #1b1615 !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    color:
        #f2eae8 !important;
}


/* Админ — та же самая геометрия */

.support-chat-log-v2
.support-message-v2.mine
.support-message-bubble-v2 {

    padding: 8px 10px 7px !important;

    border-radius:
        12px 12px 4px 12px !important;

    background:
        #B22000 !important;

    color:
        #ffffff !important;
}


/* ============================================================
   ТЕКСТ
============================================================ */

.support-chat-log-v2
.support-message-text-v2 {

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    line-height: 1.35 !important;

    white-space: pre-wrap !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    align-self: flex-start !important;
}


/* ============================================================
   ИМЯ
============================================================ */

.support-chat-log-v2
.support-message-author-v2 {

    display: block !important;

    width: auto !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    text-align: left !important;

    align-self: flex-start !important;
}


/* ============================================================
   ВРЕМЯ
============================================================ */

.support-chat-log-v2
.support-message-meta-v2 {

    display: flex !important;

    width: auto !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: flex-end !important;

    align-self: flex-end !important;

    text-align: right !important;
}


/* ============================================================
   Серия сообщений одного человека
============================================================ */

.support-chat-log-v2
.support-message-v2.is-continuation
.support-message-author-v2 {

    display: none !important;
}


.support-chat-log-v2
.support-message-v2.is-continuation:not(.mine)
.support-message-bubble-v2 {

    border-radius:
        4px 12px 12px 4px !important;
}


.support-chat-log-v2
.support-message-v2.is-continuation.mine
.support-message-bubble-v2 {

    border-radius:
        12px 4px 4px 12px !important;
}


/* ============================================================
   Светлая тема
============================================================ */

html[data-theme="light"]
.support-chat-log-v2
.support-message-v2:not(.mine)
.support-message-bubble-v2 {

    background:
        #f1edec !important;

    border-color:
        rgba(37,24,21,.10) !important;

    color:
        #241b19 !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .support-chat-log-v2
    .support-message-v2
    .support-message-bubble-v2 {

        max-width:
            84% !important;
    }
}



/* ============================================================
   arena-support-message-structure-v32

   Имя / bubble / время — отдельные элементы.
   Ширина bubble зависит только от содержимого сообщения.
============================================================ */


/* ============================================================
   ЧАТ
============================================================ */

.support-page-v2 {
    width:
        min(800px, 100%) !important;
}


.support-chat-log-v2 {
    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        7px !important;

    height:
        auto !important;

    min-height:
        130px !important;

    max-height:
        350px !important;

    padding:
        14px 12px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    justify-content:
        flex-start !important;
}


/* ============================================================
   MESSAGE ROW
============================================================ */

.support-message-v3 {
    display:
        flex;

    flex:
        0 0 auto;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    justify-content:
        flex-start;

    align-items:
        flex-end;
}


.support-message-v3.mine {
    justify-content:
        flex-end;
}


/* ============================================================
   MESSAGE STACK

   Это невидимая колонка:
   имя
   bubble
   время
============================================================ */

.support-message-stack-v3 {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    width:
        fit-content;

    min-width:
        0;

    max-width:
        min(72%, 520px);
}


.support-message-v3.mine
.support-message-stack-v3 {
    align-items:
        flex-end;
}


/* ============================================================
   AUTHOR

   Имя больше НЕ влияет на bubble.
============================================================ */

.support-message-author-v3 {
    margin:
        0 7px 4px;

    padding:
        0;

    color:
        #807572;

    font-size:
        9px;

    font-weight:
        750;

    line-height:
        1.2;
}


html[data-theme="dark"]
.support-message-author-v3 {
    color:
        #847977;
}


/* ============================================================
   BUBBLE

   Самое главное:
   он содержит только сообщение/файл.
============================================================ */

.support-message-bubble-v3 {
    display:
        block;

    width:
        fit-content;

    min-width:
        0;

    max-width:
        100%;

    height:
        auto;

    min-height:
        0;

    margin:
        0;

    padding:
        8px 10px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(34,24,22,.10);

    border-radius:
        13px 13px 13px 4px;

    background:
        #f0eceb;

    color:
        #211918;

    box-shadow:
        none;

    text-align:
        left;
}


html[data-theme="dark"]
.support-message-bubble-v3 {
    border-color:
        rgba(255,255,255,.085);

    background:
        #1b1615;

    color:
        #f2eae8;
}


/* ADMIN */

.support-message-v3.mine
.support-message-bubble-v3 {
    border-color:
        rgba(178,32,0,.32);

    border-radius:
        13px 13px 4px 13px;

    background:
        #B22000;

    color:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(178,32,0,.12);
}


/* ============================================================
   TEXT
============================================================ */

.support-message-text-v3 {
    display:
        block;

    width:
        auto;

    min-width:
        0;

    max-width:
        100%;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.38;

    text-align:
        left;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
   META

   Время теперь находится СНАРУЖИ bubble,
   поэтому "Прочитано" не раздувает сообщение.
============================================================ */

.support-message-meta-v3 {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        10px;

    margin:
        4px 7px 0;

    padding:
        0;

    color:
        #817572;

    font-size:
        8px;

    line-height:
        1;
}


.support-message-v3.mine
.support-message-meta-v3 {
    justify-content:
        flex-end;
}


html[data-theme="dark"]
.support-message-meta-v3 {
    color:
        #736966;
}


/* ============================================================
   ATTACHMENT
============================================================ */

.support-attachment-v3 {
    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        6px;

    padding:
        5px 7px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.06);

    color:
        inherit !important;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none;
}


/* ============================================================
   CONTINUATION

   Если один человек написал 3 сообщения подряд,
   имя показываем один раз.
============================================================ */

.support-message-v3.is-continuation {
    margin-top:
        -3px;
}


.support-message-v3.is-continuation
.support-message-author-v3 {
    display:
        none;
}


.support-message-v3.is-continuation:not(.mine)
.support-message-bubble-v3 {
    border-radius:
        4px 13px 13px 4px;
}


.support-message-v3.is-continuation.mine
.support-message-bubble-v3 {
    border-radius:
        13px 4px 4px 13px;
}


/* ============================================================
   NEW MESSAGE ANIMATION
============================================================ */

.support-message-v3.is-new
.support-message-stack-v3 {
    animation:
        arena-message-v32
        230ms
        cubic-bezier(.2,.8,.2,1);
}


@keyframes arena-message-v32 {

    from {
        opacity:
            0;

        transform:
            translateY(5px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   COMPOSER

   Немного ещё уменьшаем всё окно.
============================================================ */

.support-chat-panel-v2 {
    border-radius:
        17px !important;
}


.support-composer-v2 {
    padding:
        8px 10px 9px !important;
}


.support-composer-v2 #chat-body {
    min-height:
        38px !important;

    max-height:
        105px !important;

    padding:
        9px 10px !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .support-chat-log-v2 {
        max-height:
            50vh !important;

        min-height:
            110px !important;
    }


    .support-message-stack-v3 {
        max-width:
            84%;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .support-message-v3.is-new
    .support-message-stack-v3 {
        animation:
            none;
    }
}



/* ============================================================
   arena-support-compact-feed-v33

   Главное исправление:
   список сообщений больше НЕ flex-column.
   Каждое сообщение занимает ровно свою высоту.
============================================================ */


/* ============================================================
   PANEL
============================================================ */

.support-chat-panel-v2 {

    display:
        block !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    overflow:
        hidden !important;
}


/* ============================================================
   MESSAGE FEED

   GRID + max-content полностью убирает
   возможность расталкивать сообщения по вертикали.
============================================================ */

.support-chat-log-v2 {

    display:
        grid !important;

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

    grid-auto-rows:
        max-content !important;

    grid-auto-flow:
        row !important;

    align-content:
        start !important;

    align-items:
        start !important;

    justify-content:
        stretch !important;

    gap:
        7px !important;


    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        360px !important;


    margin:
        0 !important;

    padding:
        12px 12px !important;


    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;


    box-sizing:
        border-box !important;

    overscroll-behavior:
        contain;
}


/* ============================================================
   MESSAGE ROW

   Никогда не может занимать свободную высоту.
============================================================ */

.support-chat-log-v2
.support-message-v3 {

    position:
        static !important;

    inset:
        auto !important;


    display:
        flex !important;

    grid-column:
        1 !important;

    align-self:
        start !important;


    flex:
        none !important;

    width:
        100% !important;

    height:
        max-content !important;

    min-height:
        0 !important;

    max-height:
        none !important;


    margin:
        0 !important;

    padding:
        0 !important;


    justify-content:
        flex-start !important;

    align-items:
        flex-end !important;
}


.support-chat-log-v2
.support-message-v3.mine {

    justify-content:
        flex-end !important;
}


/* ============================================================
   STACK

   Тоже исключительно высота содержимого.
============================================================ */

.support-chat-log-v2
.support-message-stack-v3 {

    position:
        static !important;


    display:
        flex !important;

    flex-direction:
        column !important;


    flex:
        none !important;


    width:
        fit-content !important;

    height:
        max-content !important;

    min-height:
        0 !important;

    max-height:
        none !important;


    margin:
        0 !important;

    padding:
        0 !important;


    align-items:
        flex-start !important;
}


.support-chat-log-v2
.support-message-v3.mine
.support-message-stack-v3 {

    align-items:
        flex-end !important;
}


/* ============================================================
   BUBBLE
============================================================ */

.support-chat-log-v2
.support-message-bubble-v3 {

    display:
        block !important;


    flex:
        none !important;


    width:
        fit-content !important;

    height:
        auto !important;

    min-height:
        0 !important;


    max-width:
        min(520px, 70vw) !important;


    margin:
        0 !important;

    padding:
        8px 10px !important;
}


/* ============================================================
   Никаких странных вертикальных отступов
   между сообщениями подряд.
============================================================ */

.support-chat-log-v2
.support-message-v3.is-continuation {

    margin-top:
        -3px !important;
}


.support-chat-log-v2
.support-message-v3:not(.is-continuation) {

    margin-top:
        0 !important;
}


/* ============================================================
   AUTHOR + META
============================================================ */

.support-message-author-v3 {

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 7px 4px !important;
}


.support-message-meta-v3 {

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        4px 7px 0 !important;
}


/* ============================================================
   TYPING

   Пустой typing вообще не занимает места.
============================================================ */

.support-typing-v2 {

    display:
        none !important;

    min-height:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.support-typing-v2:not(:empty) {

    display:
        block !important;

    height:
        auto !important;

    padding:
        5px 12px !important;

    border-top:
        1px solid
        var(--sp-border);
}


/* ============================================================
   COMPOSER
============================================================ */

.support-composer-v2 {

    position:
        relative !important;

    display:
        block !important;

    flex:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;
}


/* ============================================================
   Когда сообщений нет
============================================================ */

.support-empty-v2 {

    min-height:
        80px !important;

    height:
        auto !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .support-chat-log-v2 {

        max-height:
            52vh !important;

        padding:
            9px !important;
    }


    .support-chat-log-v2
    .support-message-bubble-v3 {

        max-width:
            82vw !important;
    }
}