/*!
 * SmitAgentDock — компактная панель AI-помощника.
 * Тёмная по умолчанию: помощник должен читаться как отдельный слой поверх
 * страницы, а не как ещё одна карточка формы.
 */

/* Палитра компонента: светлая по умолчанию, тёмная — под тёмной темой.
   Значения держим здесь, а не в правилах, чтобы тема переключалась одним
   блоком и не расползалась по файлу. */
.sagd,
.sagd-panel,
.sagd-float {
    --sagd-accent: var(--smit-green, #43b77a);
    --sagd-bg: #ffffff;
    --sagd-bg-2: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
    --sagd-sunken: #f6f8fa;
    --sagd-border: #e2e8f0;
    --sagd-border-2: #eef1f5;
    --sagd-text: #1f2933;
    --sagd-muted: #64748b;
    --sagd-faint: #94a3b8;
    --sagd-act-bg: #f6f8fa;
    --sagd-act-hover: #eef2f6;
    --sagd-act-text: #475569;
    --sagd-scroll: #c9d2dc;
    --sagd-scroll-hover: #a9b4c0;
    --sagd-shadow: 0 8px 24px rgba(15, 23, 32, .10);
}

[data-bs-theme="dark"] .sagd,
[data-bs-theme="dark"] .sagd-panel,
[data-bs-theme="dark"] .sagd-float {
    --sagd-bg: #171b21;
    --sagd-bg-2: linear-gradient(160deg, #1c2128 0%, #171b21 100%);
    --sagd-sunken: #12161c;
    --sagd-border: #262c34;
    --sagd-border-2: #1e242c;
    --sagd-text: #e8edf2;
    --sagd-muted: #9aa6b2;
    --sagd-faint: #6b7683;
    --sagd-act-bg: #212831;
    --sagd-act-hover: #283039;
    --sagd-act-text: #cfd6de;
    --sagd-scroll: #39424d;
    --sagd-scroll-hover: #4d5866;
    --sagd-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.sagd {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--sagd-bg-2);
    border: 1px solid var(--sagd-border);
    color: var(--sagd-text);
    box-shadow: var(--sagd-shadow);
}

.sagd-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sagd-ava {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--sagd-sunken);
}

.sagd-ava-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #0b1a14;
    background: linear-gradient(135deg, var(--sagd-accent), #6fd3a4);
}

.sagd-id { min-width: 0; flex: 1 1 auto; }

.sagd-name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sagd-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--sagd-muted);
}

.sagd-status-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Точка состояния: ровная в покое, пульсирует в работе */
.sagd-pulse {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sagd-accent);
}

.sagd-working .sagd-pulse { animation: sagdPulse 1.1s ease-in-out infinite; }
.sagd-working .sagd-status-txt { color: var(--sagd-accent); }

@keyframes sagdPulse {
    0%, 100% { transform: scale(1); opacity: .55 }
    50% { transform: scale(1.5); opacity: 1 }
}

/* Действия */
.sagd-acts {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.sagd-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-act-bg);
    color: var(--sagd-act-text);
    font-size: .8rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sagd-act:hover {
    background: var(--sagd-act-hover);
    border-color: var(--sagd-accent);
    color: var(--sagd-text);
}

.sagd-act:focus-visible {
    outline: 2px solid var(--sagd-accent);
    outline-offset: 2px;
}

.sagd-open .sagd-chat {
    background: var(--sagd-accent);
    border-color: var(--sagd-accent);
    color: #fff;
}

/* Поле ввода раскрывается в самой плашке */
.sagd-composer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sagd-border);
    animation: sagdOpen .2s cubic-bezier(.2, .9, .3, 1);
}

@keyframes sagdOpen {
    from { opacity: 0; transform: translateY(-6px) }
    to { opacity: 1; transform: none }
}

.sagd-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-bg);
    color: var(--sagd-text);
    font-size: .88rem;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
}

.sagd-input::placeholder { color: var(--sagd-faint); }
.sagd-input:focus {
    outline: none;
    border-color: var(--sagd-accent);
    box-shadow: var(--shadow-sm);
}

.sagd-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.sagd-hint { font-size: .74rem; color: var(--sagd-faint); }

.sagd-reply {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--sagd-sunken);
    border: 1px solid var(--sagd-border);
    font-size: .86rem;
    line-height: 1.55;
    color: var(--sagd-text);
    max-height: 46vh;
    overflow-y: auto;
}

/* Компактный вид: одна строка, кнопки только значками */
.sagd-compact { padding: 9px 11px; }
.sagd-compact .sagd-ava { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.sagd-compact .sagd-act span { display: none; }
.sagd-compact .sagd-act { padding: 0 9px; }

/* На светлой теме плашка остаётся тёмной, но тень мягче — иначе она
   выглядит вырезанной из страницы */


@media (max-width: 575.98px) {
    .sagd-acts { flex-direction: column; }
    .sagd-act span { display: none; }
    .sagd-act { padding: 0 9px; }
    .sagd-composer-foot { flex-wrap: wrap; }
    .sagd-send { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sagd-composer { animation: none !important; }
    .sagd-working .sagd-pulse { animation: none !important; opacity: 1; }
    .sagd-act { transition: none !important; }
}

/* ═══ Плавающий помощник ═════════════════════════════════════════════════
   Свёрнут в кнопку у нижнего края, разворачивается панелью поверх страницы.
   Слой ниже знакомства с разделом (4100) и подтверждений (4200): помощник —
   рабочий инструмент, а не то, что перекрывает вопрос «вы уверены?». */

.sagd-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Ниже сайдбаров (1045/2000) и модалок (1050/2500): помощник — фоновый
       инструмент, любое открытое окно должно его перекрывать. */
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.sagd-float > * { pointer-events: auto; }
.sagd-float-left { right: auto; left: 20px; align-items: flex-start; }

/* Пока человек листает список вниз, кнопка уезжает за край: она стоит поверх
   правого нижнего угла и закрывала последние строки таблиц. */
.sagd-float { transition: transform .2s ease, opacity .2s ease; }
.sagd-float.is-away { transform: translateY(130%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .sagd-float { transition: none; }
}

.sagd-bubble {
    position: relative;
    /* build 3259: 83 px занимали заметный кусок правого нижнего угла поверх
       таблицы — кнопка уменьшена, лицо по-прежнему узнаётся. */
    width: 64px;
    height: 64px;
    border: 0;
    /* Круг, а не скруглённый квадрат: у квадрата по углам торчал зелёный
       градиент фона, и кнопка выглядела заплаткой поверх страницы. */
    border-radius: 50%;
    background: linear-gradient(135deg, #2f9e6b, #217a52);
    color: #fff;
    font-size: 32px;
    box-shadow: var(--shadow-lg);
    transition: transform .18s cubic-bezier(.2, .9, .3, 1), box-shadow .18s ease;
}
.sagd-bubble:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sagd-bubble:focus-visible { outline: 2px solid var(--smit-green, #43b77a); outline-offset: 3px; }
.sagd-float.is-open .sagd-bubble { order: 2; }

/* Зелёная точка «помощник на связи» */
.sagd-bubble-dot {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--smit-green, #43b77a);
    box-shadow: var(--shadow-sm);
}

.sagd-panel {
    width: 400px;
    max-width: calc(100vw - 32px);
    /* Запас: кнопка помощника снизу (72 + 20 + зазор 10) и место под верхнюю
       панель страницы — иначе шапка окна уходит под навбар и её не видно. */
    max-height: calc(100dvh - 176px);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sagd-bg);
    border: 1px solid var(--sagd-border);
    box-shadow: var(--shadow-lg);
    animation: sagdPanelUp .2s cubic-bezier(.2, .9, .3, 1);
}

@keyframes sagdPanelUp {
    from { opacity: 0; transform: translateY(10px) scale(.99) }
    to { opacity: 1; transform: none }
}

.sagd-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 14px;
    background: var(--sagd-bg-2);
    border-bottom: 1px solid var(--sagd-border);
}

.sagd-panel-title {
    flex: 1 1 auto;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--sagd-text);
}

.sagd-panel-min {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sagd-muted);
    font-size: .8rem;
}
.sagd-panel-min:hover { background: var(--sagd-act-hover); color: var(--sagd-text); }

/* Внутри панели плашка без своей рамки — рамку держит панель */
/* min-height:0 обязателен: без него колонка не сжимается ниже содержимого,
   max-height панели перестаёт работать, и при длинном списке истории шапка
   уезжала выше края экрана. */
.sagd-panel-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.sagd-panel-head { flex: 0 0 auto; }
.sagd-panel-body .sagd {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* ═══ Трасса работы ══════════════════════════════════════════════════════ */

.sagd-trace {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--sagd-sunken);
    border: 1px solid var(--sagd-border);
    max-height: 240px;
    overflow-y: auto;
}

.sagd-trace-head {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--sagd-faint);
    margin-bottom: 6px;
}

.sagd-trace-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--sagd-text);
    animation: sagdRowIn .22s ease;
}
.sagd-trace-row + .sagd-trace-row { border-top: 1px solid var(--sagd-border-2); }

@keyframes sagdRowIn {
    from { opacity: 0; transform: translateY(-3px) }
    to { opacity: 1; transform: none }
}

.sagd-trace-ic {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: .68rem;
    background: var(--sagd-act-bg);
    color: var(--sagd-muted);
}

.sagd-trace-body { flex: 1 1 auto; min-width: 0; }
.sagd-trace-label { display: block; }
.sagd-trace-text {
    display: block;
    margin-top: 2px;
    font-size: .76rem;
    color: var(--sagd-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.sagd-trace-time {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--sagd-faint);
    font-variant-numeric: tabular-nums;
}

/* Шаг в работе: значок дышит, чтобы было видно — процесс живой */
.sagd-trace-row.is-run .sagd-trace-ic {
    color: var(--sagd-accent);
    background: rgba(67, 183, 122, .14);
    animation: sagdStepPulse 1.2s ease-in-out infinite;
}
@keyframes sagdStepPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

.sagd-trace-row.is-ok .sagd-trace-ic { color: var(--sagd-accent); background: rgba(67, 183, 122, .14); }
.sagd-trace-row.is-err .sagd-trace-ic { color: #c0392b; background: rgba(220, 80, 80, .14); }
.sagd-trace-row.is-err .sagd-trace-label { color: #c0392b; }

/* ═══ Карточка вопроса и согласования ════════════════════════════════════ */

.sagd-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--sagd-sunken);
    border: 1px solid var(--sagd-border);
    animation: sagdCardIn .22s cubic-bezier(.2, .9, .3, 1);
}

@keyframes sagdCardIn {
    from { opacity: 0; transform: translateY(6px) }
    to { opacity: 1; transform: none }
}

.sagd-card-q {
    font-size: .9rem;
    font-weight: 600;
    color: var(--sagd-text);
    line-height: 1.4;
}

.sagd-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--sagd-text);
}
.sagd-card-title i { color: var(--sagd-accent); }

.sagd-card-hint,
.sagd-card-sum {
    margin-top: 5px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--sagd-muted);
}

.sagd-card-list {
    margin: 8px 0 0;
    padding-left: 16px;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--sagd-muted);
}

.sagd-card-code {
    margin: 10px 0 0;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--sagd-bg);
    border: 1px solid var(--sagd-border);
    font-size: .74rem;
    line-height: 1.5;
    color: var(--sagd-text);
    max-height: 200px;
    overflow: auto;
    white-space: pre;
}

/* Варианты ответа */
.sagd-card-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.sagd-opt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-bg);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.sagd-opt:hover { border-color: var(--sagd-accent); background: var(--sagd-act-hover); }
.sagd-opt:has(input:checked) {
    border-color: var(--sagd-accent);
    background: rgba(67, 183, 122, .09);
}
.sagd-opt input { margin-top: 2px; accent-color: var(--sagd-accent); }
.sagd-opt-body { min-width: 0; }
.sagd-opt-label { display: block; font-size: .84rem; color: var(--sagd-text); }
.sagd-opt-hint { display: block; margin-top: 1px; font-size: .75rem; color: var(--sagd-muted); }

.sagd-card-custom {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-bg);
    color: var(--sagd-text);
    font-size: .84rem;
}
.sagd-card-custom::placeholder { color: var(--sagd-faint); }
.sagd-card-custom:focus {
    outline: none;
    border-color: var(--sagd-accent);
    box-shadow: var(--shadow-sm);
}

.sagd-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.sagd-card-acts { display: flex; gap: 8px; margin-left: auto; }
.sagd-card-skip { padding: 0; font-size: .8rem; color: var(--sagd-muted); text-decoration: none; }
.sagd-card-skip:hover { color: var(--sagd-text); }

/* Точки-шаги вопросов */
.sagd-pager { display: flex; gap: 5px; }
.sagd-pager-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sagd-border);
    transition: width .2s ease, background .2s ease;
}
.sagd-pager-dot.on { width: 16px; border-radius: var(--radius-sm); background: var(--sagd-accent); }

/* Затемнение под шторкой — только на телефоне */
.sagd-scrim { display: none; }

/* Телефон: помощник — шторка снизу, как остальные окна панели.
   Раньше панель поднималась почти во всю высоту и накрывала раздел. */
@media (max-width: 575.98px) {
    .sagd-float { right: 0; left: 0; bottom: 0; align-items: stretch; gap: 0; }
    .sagd-float.is-open { top: 0; }

    .sagd-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(9, 15, 22, .45);
        pointer-events: auto;
        animation: sagd-scrim-in .18s ease;
    }

    .sagd-panel {
        /* Затемнение лежит fixed внутри того же контейнера и без этого
           перекрывало саму шторку: нажатия уходили в него, а не в панель. */
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: none;
        max-height: 80dvh;
        margin-top: auto;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border-bottom: 0;
        box-shadow: var(--shadow-lg);
        animation: sagd-sheet-up .22s cubic-bezier(.2, .9, .3, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    /* Ручка шторки: показывает, что окно тянется снизу и закрывается вниз */
    .sagd-panel-head { position: relative; padding-top: 16px; }
    .sagd-panel-head::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        width: 38px;
        height: 4px;
        margin-left: -19px;
        border-radius: var(--radius-sm);
        background: var(--sagd-border);
    }

    /* Свёрнутая кнопка живёт над краем экрана, при открытой шторке не нужна */
    .sagd-bubble { align-self: flex-end; width: 74px; height: 74px; font-size: 29px;
                   margin: 0 12px 12px 0; }
    .sagd-float.is-open .sagd-bubble { display: none; }

    .sagd-card-acts { width: 100%; }
    .sagd-card-acts .btn { flex: 1; }

    /* overflow:hidden на body телефон игнорирует — держит только fixed;
       прокрутку возвращает скрипт при закрытии шторки. */
    body.sagd-sheet-open { overflow: hidden; position: fixed; width: 100%; }
}

@keyframes sagd-sheet-up { from { transform: translateY(14%); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes sagd-scrim-in { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
    .sagd-panel, .sagd-scrim { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sagd-panel,
    .sagd-trace-row,
    .sagd-card { animation: none !important; }
    .sagd-trace-row.is-run .sagd-trace-ic { animation: none !important; opacity: 1; }
    .sagd-bubble { transition: none !important; }
}

/* ═══ Разметка ответа помощника ══════════════════════════════════════════ */

.sagd-reply .sagd-md-h {
    margin: 12px 0 4px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--sagd-text);
    line-height: 1.35;
}
.sagd-reply .sagd-md-h:first-child { margin-top: 0; }

.sagd-reply .sagd-md-p { margin: 0 0 8px; }
.sagd-reply .sagd-md-p:last-child { margin-bottom: 0; }

.sagd-reply .sagd-md-list {
    margin: 0 0 8px;
    padding-left: 18px;
}
.sagd-reply .sagd-md-list li { margin-bottom: 3px; }

.sagd-reply .sagd-md-code {
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--sagd-act-bg);
    border: 1px solid var(--sagd-border);
    font-size: .82em;
    color: var(--sagd-text);
}

.sagd-reply .sagd-md-pre {
    margin: 8px 0;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--sagd-sunken);
    border: 1px solid var(--sagd-border);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--sagd-text);
    overflow-x: auto;
    white-space: pre;
}

.sagd-reply b { color: var(--sagd-text); font-weight: 700; }

/* На телефоне панель тоже во всю высоту, но с местом под кнопку */
@media (max-width: 575.98px) {
    .sagd-panel { max-height: calc(100dvh - 96px); }
    .sagd-reply { max-height: 40vh; }
}

/* Лицо ассистента: кадр, поверх которого изредка проигрывается ролик */
.sagd-ava-face {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--sagd-sunken);
}
.sagd-ava-face img,
.sagd-ava-face video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sagd-ava-face video { opacity: 0; }
.sagd-ava-face.is-playing video { opacity: 1; }
.sagd-ava-face.is-playing img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .sagd-ava-face video { display: none; }
}

/* Свёрнутая кнопка с лицом: кадр во всю кнопку, точка «на связи» поверх */
.sagd-bubble.has-face { padding: 0; overflow: hidden; }
.sagd-bubble-face {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sagd-bubble.has-face .sagd-bubble-dot {
    right: 5px;
    bottom: 5px;
    box-shadow: var(--shadow-sm);
}

/* Таблица в ответе: узкая колонка дока, поэтому таблица прокручивается
   внутри своей рамки, а не растягивает панель. */
.sagd-md-tablewrap {
    overflow-x: auto;
    margin: 8px 0;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
}
.sagd-md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.sagd-md-table th,
.sagd-md-table td {
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sagd-border);
}
.sagd-md-table th {
    font-weight: 600;
    background: var(--sagd-sunken);
    white-space: nowrap;
}
.sagd-md-table tr:last-child td { border-bottom: 0; }

/* Действия под ответом: переслать коллеге */
.sagd-reply-acts {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sagd-border);
}
.sagd-reply-act {
    border: 1px solid var(--sagd-border);
    background: var(--sagd-sunken);
    color: var(--sagd-text-dim);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: .78rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.sagd-reply-act:hover {
    color: var(--sagd-accent);
    border-color: var(--sagd-accent);
}
.sagd-reply-act:focus-visible {
    outline: 2px solid var(--sagd-accent);
    outline-offset: 2px;
}

/* Выбор адресата раскрывается на месте кнопки «Переслать» */
.sagd-share-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.sagd-share-pick { flex: 1 1 auto; min-width: 0; }

/* Под ответом блок стоит в ряду действий — отделяем так же. */
.sagd-reply-acts .sagd-share-box {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-sunken);
}

/* Телефон: помощник круглый — рядом с круглой кнопкой действия раздела
   квадрат выглядит чужим. Поднимаем его над ней: главная кнопка страницы
   остаётся у края экрана. */
@media (max-width: 575.98px) {
    .sagd-float:not(.is-open) { bottom: 86px; }
}

/* Телефон: окно помощника всегда поверх содержимого страницы — липкие шапки,
   панели и нижние полосы разделов иначе накрывают его край. Ниже остаются
   только подтверждения (4200) и меню выбора сотрудника (4300): вопрос
   «вы уверены?» и список адресатов должны перекрывать сам помощник. */
@media (max-width: 575.98px) {
    /* На телефоне тот же порядок: шторка помощника уступает окнам и панелям. */
    .sagd-float { z-index: 1030; }
}

/* Появление помощника: кнопка не возникает рывком вместе с версткой, а
   всплывает, когда страница уже отрисована. Панель разворачивается из угла —
   так видно, откуда она взялась. */
@keyframes sagd-bubble-in {
    from { opacity: 0; transform: translateY(14px) scale(.86); }
    to   { opacity: 1; transform: none; }
}
@keyframes sagd-panel-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.sagd-panel:not([hidden]) {
    animation: sagd-panel-in .2s cubic-bezier(.2, .9, .3, 1);
    transform-origin: bottom right;
}

@media (prefers-reduced-motion: reduce) {
    .sagd-bubble, .sagd-panel:not([hidden]) { animation: none !important; }
}

/* Лицо ассистента круглое — как и сама кнопка помощника. */
.sagd-ava-face,
.sagd-ava-face img,
.sagd-ava-face video { border-radius: 50%; }
.sagd-bubble .sagd-bubble-face { border-radius: 50%; }

/* Панель выезжает снизу: видно, откуда она взялась и куда уйдёт. */
@keyframes sagd-panel-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.sagd-panel:not([hidden]) {
    animation: sagd-panel-up .22s cubic-bezier(.2, .9, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .sagd-panel:not([hidden]) { animation: none !important; }
}

/* Шапка панели: название, раздел, кнопки и «свернуть» — одной строкой.
   Строка с аватаром под шапкой повторяла имя и состояние и занимала четверть
   окна ещё до первого вопроса; аватар остаётся в свёрнутой кнопке. */
.sagd-panel-body .sagd-row { display: none; }

.sagd-head-slim { display: flex; align-items: center; gap: 8px; }
.sagd-head-slim .sagd-panel-title { flex: 0 0 auto; }

/* Раздел, в котором работает помощник, — подпись рядом с названием. */
.sagd-head-slim .sagd-status {
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
}
.sagd-head-slim .sagd-status-txt { font-size: .78rem; }

/* Действия прижаты к правому краю, «свернуть» — за ними. */
.sagd-head-slim .sagd-acts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.sagd-head-slim .sagd-acts .sagd-act { height: 30px; padding: 0 10px; }
.sagd-head-slim .sagd-panel-min { flex: 0 0 auto; margin-left: 0; }

/* Телефон: место занимает кнопка, название раздела уходит — оно уже видно
   на самой странице. */
@media (max-width: 575.98px) {
    .sagd-head-slim { gap: 10px; }
    .sagd-head-slim .sagd-status-txt { display: none; }
    /* Правила для прежней строки с аватаром ставили кнопки столбиком и
       прятали подписи — в шапке нужно ровно наоборот. */
    .sagd-head-slim .sagd-acts { flex-direction: row; margin-left: auto; }
    .sagd-head-slim .sagd-acts .sagd-act { padding: 0 10px; }
    .sagd-head-slim .sagd-acts .sagd-act span { display: inline; }
    /* Двум подписям в шапке телефона места нет: у истории остаётся значок. */
    .sagd-head-slim .sagd-acts .sagd-hist .sagd-hist-txt { display: none; }
    .sagd-head-slim .sagd-acts .sagd-hist { padding: 0 9px; }
}

/* Лицо в свёрнутой кнопке занимает её целиком. */
.sagd-bubble .sagd-bubble-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.sagd-bubble .sagd-bubble-face img,
.sagd-bubble .sagd-bubble-face video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Переход «ролик → кадр» такой же плавный, как и обратный: раньше картинка
   возвращалась рывком, потому что переход был описан только у состояния
   проигрывания. */
.sagd-ava-face img { transition: opacity .9s ease; }
.sagd-ava-face video { transition: opacity .9s ease; }

/* Кнопка выезжает справа через три секунды после загрузки: страница успевает
   отрисоваться, и помощник не мельтешит перед глазами при каждом переходе. */
@keyframes sagd-bubble-slide-in {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: none; }
}
/* Появление одноразовое: класс снимается после анимации. Иначе кнопка
   выезжала заново каждый раз, когда возвращалась из-под открытой шторки. */
.sagd-bubble.sagd-appear {
    animation: sagd-bubble-slide-in .45s cubic-bezier(.2, .9, .3, 1) both;
    animation-delay: 3s;
}
@media (prefers-reduced-motion: reduce) {
    .sagd-bubble.sagd-appear { animation: none !important; }
}


/* ── история запросов по странице ───────────────────────────────────────── */

/* Пустой истории — пустое место в шапке: кнопку прячем совсем. */
.sagd-hist.is-off { display: none !important; }

.sagd-hist.is-on {
    background: var(--sagd-accent);
    border-color: var(--sagd-accent);
    color: #fff;
}

.sagd-histbox {
    margin: 0 0 10px;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: var(--sagd-bg-2);
    overflow: hidden;
}

.sagd-hist-head {
    padding: 8px 12px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--sagd-muted);
    border-bottom: 1px solid var(--sagd-border);
}

.sagd-hist-empty {
    padding: 12px;
    font-size: .8rem;
    color: var(--sagd-muted);
}

/* «Начать заново» — действие с последствиями (обрывает разговор), поэтому
   стоит особняком от «Уточнить» и «Переслать». */
.sagd-reply-act.sagd-reply-reset { margin-left: auto; }

.sagd-hist-retry {
    border: 0;
    background: none;
    padding: 0;
    color: var(--sagd-accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.sagd-hist-item + .sagd-hist-item { border-top: 1px solid var(--sagd-border); }

/* Вопрос занимает строку, «переслать» прижата к правому краю. Выбор коллеги
   компонент вставляет рядом с кнопкой — пускаем его на всю ширину под ней,
   иначе он сжимается во flex-строке до нечитаемой ширины. */
.sagd-hist-row { display: flex; align-items: flex-start; flex-wrap: wrap; }
/* width:100% из базового правила кнопки вопроса выталкивал «переслать»
   на вторую строку — в строке ширину задаёт flex. Основа 0 и min-width:0
   держат кнопку справа даже у длинного вопроса без пробелов: переносится
   текст, а не кнопка. */
.sagd-hist-row .sagd-hist-q { flex: 1 1 0; width: auto; min-width: 0; }
.sagd-hist-qt { overflow-wrap: anywhere; word-break: break-word; }
/* Выбор получателя — отдельный шаг поверх списка: своя подложка потемнее и
   отбивка сверху, иначе он читался как часть предыдущей записи. */
.sagd-hist-row .sagd-share-box {
    flex: 0 0 100%;
    padding: 10px 12px;
    background: var(--sagd-sunken);
    border-top: 1px solid var(--sagd-border);
}

.sagd-hist-fwd {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 8px 0 4px;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sagd-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sagd-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sagd-hist-fwd:hover {
    background: var(--sagd-act-hover);
    border-color: var(--sagd-accent);
    color: var(--sagd-text);
}
.sagd-hist-fwd:focus-visible { outline: 2px solid var(--sagd-accent); outline-offset: 2px; }

/* Пересылать имеет смысл прочитанный ответ, поэтому кнопка появляется у
   раскрытой записи: в свёрнутом списке она была шумом на каждой строке.
   Правило стоит после блока выше — иначе его display перебивает скрытие. */
.sagd-hist-fwd { display: none; }
.sagd-hist-item.is-open .sagd-hist-fwd { display: inline-flex; }

/* Строка вопроса: сам вопрос сверху, автор и время — подписью под ним. */
.sagd-hist-q {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--sagd-text);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}
.sagd-hist-q:hover { background: var(--sagd-act-hover); }
.sagd-hist-q:focus-visible { outline: 2px solid var(--sagd-accent); outline-offset: -2px; }

.sagd-hist-qt {
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sagd-hist-meta {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    color: var(--sagd-muted);
}

/* Раскрытая запись — выбранная: строка и кнопка пересылки красятся заодно,
   чтобы в длинном списке было видно, чей ответ сейчас открыт. */
.sagd-hist-item.is-open .sagd-hist-row {
    background: linear-gradient(135deg,
        rgba(67, 183, 122, .18) 0%, rgba(67, 183, 122, .06) 100%);
}
.sagd-hist-item.is-open .sagd-hist-q { background: transparent; }
.sagd-hist-item.is-open .sagd-hist-q:hover { background: rgba(67, 183, 122, .10); }
.sagd-hist-item.is-open .sagd-hist-qt { font-weight: 600; }

.sagd-hist-item.is-open .sagd-hist-fwd {
    background: linear-gradient(135deg,
        var(--sagd-accent) 0%, rgba(46, 160, 100, .95) 100%);
    border-color: transparent;
    color: #fff;
}
.sagd-hist-item.is-open .sagd-hist-fwd:hover {
    background: linear-gradient(135deg,
        rgba(46, 160, 100, 1) 0%, rgba(36, 140, 86, 1) 100%);
    color: #fff;
}

.sagd-hist-a {
    padding: 2px 12px 12px;
    font-size: .82rem;
    line-height: 1.5;
    max-height: 260px;
    overflow-y: auto;
}
.sagd-hist-a .sagd-md-p:first-child { margin-top: 0; }


/* ── полосы прокрутки ───────────────────────────────────────────────────────
   Системная полоса в тёмной панели выглядит чужой светлой лентой, а в списке
   истории занимает половину отступа. Держим тонкую и в цветах панели. */
.sagd,
.sagd-float,
.sagd *,
.sagd-float * {
    scrollbar-width: thin;
    scrollbar-color: var(--sagd-scroll, #c3ccd6) transparent;
}

.sagd ::-webkit-scrollbar,
.sagd-float ::-webkit-scrollbar { width: 8px; height: 8px; }

.sagd ::-webkit-scrollbar-track,
.sagd-float ::-webkit-scrollbar-track { background: transparent; }

.sagd ::-webkit-scrollbar-thumb,
.sagd-float ::-webkit-scrollbar-thumb {
    background: var(--sagd-scroll, #c3ccd6);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-sm);
}

.sagd ::-webkit-scrollbar-thumb:hover,
.sagd-float ::-webkit-scrollbar-thumb:hover {
    background: var(--sagd-scroll-hover, #9aa6b2);
    background-clip: content-box;
}

/* Угол между полосами — той же заливкой, иначе торчит белый квадрат. */
.sagd ::-webkit-scrollbar-corner,
.sagd-float ::-webkit-scrollbar-corner { background: transparent; }