/* ------------------------------------------------------------------ */
/* Сократ — базовые стили, operations-grade aesthetic        */
/* Вдохновение: Linear, Warp, Superhuman. Плотно, точно, без лишнего.  */
/* ------------------------------------------------------------------ */

:root {
    color-scheme: dark;
    /* Темы переопределяют эти переменные. Здесь — безопасные значения. */
    --bg: #0f1116;
    --surface: #171a21;
    --surface-2: #1e222c;
    --surface-3: #262b36;
    --border: #2a2f3a;
    --border-strong: #383d48;
    --fg: #e7e9ef;
    --fg-dim: #a0a6b2;
    --fg-faint: #6b7180;
    --accent: #88c0d0;
    --accent-fg: #0f1116;
    --success: #a3be8c;
    --warning: #ebcb8b;
    --danger: #bf616a;
    --info: #81a1c1;

    /* Алиасы — объявлены через var(), поэтому автоматически следуют теме */
    --primary: var(--info);        /* использовался с hardcoded fallback #4a7ac8 */
    --muted:   var(--fg-dim);      /* использовался без fallback -> свойства падали */
    --bg-alt:  var(--surface-2);   /* использовался с fallback rgba(127,127,127,..) */

    --radius: 4px;
    --radius-lg: 8px;

    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
    --font-display: 'IBM Plex Sans', sans-serif;

    --shadow-1: 0 1px 0 rgba(0,0,0,0.15), 0 0 0 1px var(--border);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.25);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    height: 100%;
    overflow-x: hidden;
    max-width: 100vw;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
code, pre, kbd, .mono { font-family: var(--font-mono); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* Scrollbar — тоньше, темнее */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.app-shell {
    display: grid;
    grid-template-rows: 48px 1fr;
    height: 100vh;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 24px;
    height: 48px; max-height: 48px; min-height: 48px;
    box-sizing: border-box;
}
#topbar { height: 48px; }
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 15px;
}
.topbar-brand .dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.topbar-nav {
    display: flex;
    gap: 4px;
}
.topbar-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius);
    color: var(--fg-dim);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.12s, background 0.12s;
}
.topbar-nav a .nav-ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.12s;
}
.topbar-nav a:hover .nav-ico,
.topbar-nav a.active .nav-ico { opacity: 1; }
.topbar-nav a .nav-label {
    white-space: nowrap;
}
.topbar-nav a.active,
.topbar-nav a:hover {
    color: var(--fg);
    background: var(--surface-2);
    text-decoration: none;
}
.topbar-nav a.active {
    color: var(--accent);
}
.topbar-nav a.active .nav-ico { color: var(--accent); }

/* Средний десктоп: скрываем подписи, оставляем только иконки —
   иначе 12 вкладок не влезают в ряд. Подпись остаётся как title-тултип. */
@media (max-width: 1400px) and (min-width: 1025px) {
    .topbar-nav a .nav-label { display: none; }
    .topbar-nav a {
        padding: 7px 9px;
        gap: 0;
    }
    .topbar-nav a .nav-ico {
        width: 18px;
        height: 18px;
        opacity: 0.85;
    }
    .topbar-nav { gap: 2px; }
}

/* ─── Роли head/admin: 10–13 пунктов nav — подписи скрываем всегда ── */
/* При подписях ряд просто не помещается ни на каком десктопе,
   поэтому для этих ролей в топбаре оставляем только иконки;
   название пункта показывает tooltip по атрибуту title. */
@media (min-width: 1025px) {
    html[data-role="head"]  .topbar-nav a .nav-label,
    html[data-role="admin"] .topbar-nav a .nav-label { display: none; }
    html[data-role="head"]  .topbar-nav a,
    html[data-role="admin"] .topbar-nav a {
        padding: 7px 9px;
        gap: 0;
    }
    html[data-role="head"]  .topbar-nav a .nav-ico,
    html[data-role="admin"] .topbar-nav a .nav-ico {
        width: 18px; height: 18px;
        opacity: 0.85;
    }
    html[data-role="head"]  .topbar-nav,
    html[data-role="admin"] .topbar-nav { gap: 2px; }
}

/* Имя пользователя в правой части — никогда не переносить на 2 строки */
.topbar-right > .mono.xs.muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* При нехватке места у head/admin имя полностью скрываем */
@media (max-width: 1500px) and (min-width: 1025px) {
    html[data-role="head"] .topbar-right > .mono.xs.muted,
    html[data-role="admin"] .topbar-right > .mono.xs.muted { display: none; }
}

/* Совсем тесно — у правых кнопок оставляем только иконки/глифы */
@media (max-width: 1366px) and (min-width: 1025px) {
    html[data-role="head"]  #roleBtn span,
    html[data-role="head"]  #cacheBtn span,
    html[data-role="head"]  #themeBtn span,
    html[data-role="admin"] #roleBtn span,
    html[data-role="admin"] #cacheBtn span,
    html[data-role="admin"] #themeBtn span { display: none; }
    html[data-role="head"]  .topbar-right,
    html[data-role="admin"] .topbar-right { gap: 6px; }
    html[data-role="head"]  .topbar,
    html[data-role="admin"] .topbar { gap: 12px; }
}

/* Мобильное меню: иконка слева, текст справа */
.mobile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mobile-menu a .nav-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--fg-dim);
}
.mobile-menu a.active .nav-ico { color: var(--accent); opacity: 1; }
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--fg-dim);
}

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--fg);
    font-weight: 500;
    font-size: 13px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
    font-weight: 600;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--fg)); }
.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-dim);
}
.btn-ghost:hover { color: var(--fg); background: var(--surface-2); }
.btn-sm { padding: 4px 8px; font-size: 12px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-body { padding: 16px; }
.card-body.dense { padding: 0; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--surface-3);
    color: var(--fg-dim);
    border: 1px solid var(--border);
}
/* Классические цвета сегментов — одинаковы во всех темах */
.badge-vip       { background: rgba(212, 175, 55, .16);  color: #d4af37; border-color: rgba(212, 175, 55, .45); }  /* золото */
.badge-at_risk   { background: rgba(226, 87, 76, .16);   color: #e2574c; border-color: rgba(226, 87, 76, .45); }  /* красноватый */
.badge-dormant   { background: rgba(88, 138, 196, .16);  color: #4a7ac8; border-color: rgba(88, 138, 196, .40); }  /* синеватый */
.badge-new       { background: rgba(90, 166, 122, .16);  color: #4a9b6b; border-color: rgba(90, 166, 122, .40); }  /* зелёный */
.badge-standard  { background: rgba(127, 127, 127, .10); color: inherit; }
.badge-danger    { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.kbd {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--fg-dim);
}

.tag {
    display: inline-block;
    padding: 1px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    color: var(--fg-dim);
    margin-right: 4px;
    font-family: var(--font-mono);
}

.hr { height: 1px; background: var(--border); margin: 12px 0; }

.stat {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stat-label {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin-bottom: 6px;
}
.stat-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.02em;
}
.stat-sub { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }

table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.grid th {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--fg-faint);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--surface);
}
table.grid td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
table.grid tr:hover td { background: var(--surface-2); }

.input {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--fg);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
}
.input:focus { outline: none; border-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Utilities                                                            */
/* ------------------------------------------------------------------ */

.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.muted { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.mono  { font-family: var(--font-mono); }
.small { font-size: 12px; }
.xs    { font-size: 11px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.bordered { border: 1px solid var(--border); border-radius: var(--radius); }

/* ------------------------------------------------------------------ */
/* Fade-in for stream items                                             */
/* ------------------------------------------------------------------ */

@keyframes slideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stream-in { animation: slideIn 200ms ease-out; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.pulse { animation: pulse 1.2s infinite ease-in-out; }

/* ─── Подсказки: иерархия блоков ─────────────────────────────────── */
.suggestion.active {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    transition: opacity .18s ease, transform .18s ease;
}
.suggestion.active.kind-warning  { border-left: 4px solid var(--danger, #e2574c); background: rgba(226,87,76,.05); }
.suggestion.active.kind-answer   { border-left: 4px solid var(--primary, #4a7ac8); }
.suggestion.active.kind-next_step{ border-left: 4px solid var(--success, #5aa67a); }
.suggestion.active.fade-out { opacity: 0; transform: translateY(-4px); }

.suggestion-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kind-badge {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 6px; border-radius: 3px;
    background: var(--bg-alt, rgba(127,127,127,.1));
}
.suggestion-title { font-weight: 600; line-height: 1.35; }
.suggestion-source { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.suggestion-actions { display: flex; gap: 6px; margin-top: 10px; }

/* Очередь: компактные строки "ещё возможные" */
.suggestion-queue { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.queued {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 4px; cursor: pointer;
    font-size: 12px; line-height: 1.3;
    transition: background .12s ease;
}
.queued:hover { background: var(--bg-alt, rgba(127,127,127,.08)); }
.queued .kind-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--muted);
}
.queued.kind-warning  .kind-dot { background: var(--danger, #e2574c); }
.queued.kind-answer   .kind-dot { background: var(--primary, #4a7ac8); }
.queued.kind-next_step .kind-dot { background: var(--success, #5aa67a); }

/* Справочник и апселлы — спокойные блоки */
.kb-item, .upsell-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.kb-item:last-child, .upsell-item:last-child { border-bottom: 0; }
.kb-item.kb-fold { opacity: .55; }
#knowledgeCard .card-body,
#upsellCard .card-body { max-height: 260px; overflow-y: auto; }

/* Автоматически отмеченные пункты чек-листа — тонкая подсветка */
.checklist-item.auto-marked {
    background: rgba(90,166,122,.08);
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
}

.call-item.selected { background: var(--surface-2); border-left: 3px solid var(--accent); }
.kv-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.kv-row b { font-variant-numeric: tabular-nums; }

/* ─── Голос: микрофон, тумблер озвучки ──────────────────────────── */
.mic-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 4px; cursor: pointer;
    color: var(--muted); user-select: none;
}
.mic-toggle input { cursor: pointer; }
#micBtn.recording {
    background: var(--danger, #e2574c) !important;
    color: white !important;
    animation: mic-pulse 1.2s infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(226,87,76, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(226,87,76, 0); }
}
.utterance .audio-badge {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary, #4a7ac8); margin-left: 4px;
    animation: audio-play 1s infinite;
}
@keyframes audio-play { 50% { opacity: .3; } }

/* ─── Адаптив: планшет (<=1024px) и мобильный (<=720px) ───────── */

/* Топбар — компактнее на узких экранах */
@media (max-width: 1024px) {
    .topbar { padding: 0 10px; font-size: 13px; }
    .topbar-nav { gap: 4px; }
    .topbar-nav a { padding: 6px 8px; font-size: 12px; }
    .topbar-right .btn { padding: 4px 8px; font-size: 12px; }
    .topbar-brand span:not(.dot) { font-size: 13px; }
    .topbar-brand .mono { display: none; }  /* скрываем "v0.1" */
}

@media (max-width: 720px) {
    .topbar-brand span:not(.dot) { display: none; }   /* скрываем "Сократ" */
    .topbar-brand .dot { margin-right: 0; }
    .topbar-nav a { padding: 5px 6px; font-size: 11px; }
    .topbar-right .btn span { display: none; }        /* скрываем текст кнопок темы/выхода */
    .mic-toggle { font-size: 10px; padding: 2px 4px; }
}

/* На мобильном прячем сам топбар-бренд и делаем всё компактнее */
@media (max-width: 480px) {
    .topbar-brand { gap: 0; }
    .topbar-right { gap: 2px; }
    #themeBtn { font-size: 14px; padding: 4px 6px; }
}

/* Карточки — меньше padding на узких */
@media (max-width: 720px) {
    .card-head { padding: 8px 10px; font-size: 13px; }
    .card-body { padding: 10px; }
    .xs { font-size: 10px; }
    .small { font-size: 12px; }
    h2 { font-size: 15px; }
    .kv-row { font-size: 11px; }
    .detail-head h2 { font-size: 16px; }
}

/* Кнопки и инпуты на мобилке — крупнее чтоб пальцем тыкать */
@media (max-width: 720px) {
    .btn, .input { min-height: 36px; }
    .btn-sm { min-height: 32px; padding: 6px 10px; }
    .call-actions { flex-wrap: wrap; gap: 6px; }
    .call-actions .btn { flex: 1 1 auto; }
}

/* Таблицы заказов на мобилке — тонкие колонки */
@media (max-width: 720px) {
    .orders-table th, .orders-table td { padding: 6px 4px; font-size: 11px; }
    .orders-table th:nth-child(4), .orders-table td:nth-child(4) { display: none; }  /* скроем статус */
}

/* Подсказки на мобилке чуть плотнее */
@media (max-width: 720px) {
    .suggestion.active { padding: 10px; }
    .suggestion.active .suggestion-title { font-size: 13px; line-height: 1.3; }
    .suggestion-actions { flex-wrap: wrap; }
    .suggestion-actions .btn-sm { flex: 1 1 auto; }
}


/* === Моб. адаптив для топбара === */
.app-shell { max-width: 100vw; width: 100%; }



/* === Мобильное меню (hamburger) и скрытие desktop-only элементов === */

.mobile-only { display: none; }
.desktop-only { display: inline-flex; }

.mobile-menu {
    position: absolute; top: 52px; right: 8px;
    min-width: 240px; max-width: calc(100vw - 16px);
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    padding: 6px;
    animation: mm-in 120ms ease-out;
}
@keyframes mm-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu.hidden { display: none; }
.mobile-menu-section {
    padding: 4px 4px;
}
.mobile-menu-section + .mobile-menu-section {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 8px;
}
.mobile-menu-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--fg-faint); padding: 4px 10px; margin-bottom: 2px;
}
.mobile-menu a,
.mobile-menu-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--fg);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.mobile-menu a:hover,
.mobile-menu-btn:hover { background: var(--bg-alt, rgba(127,127,127,.08)); text-decoration: none; }
.mobile-menu a.active { color: var(--accent); font-weight: 600; }
.mobile-menu-btn.theme-row { font-size: 13px; padding: 8px 12px; }
.mobile-menu-btn .theme-glyph { margin-right: 2px; }
.mobile-menu-user { padding: 6px 12px 8px; }
.mobile-menu-user b { font-size: 13px; }

@media (max-width: 1024px) {
    .mobile-only { display: inline-flex; }
    .desktop-only { display: none !important; }
    .topbar { padding: 0 12px; overflow: visible; }
    .topbar-brand .brand-text { font-size: 14px; }
}
@media (max-width: 720px) {
    .topbar-brand .brand-text { font-size: 13px; }
    .topbar { padding: 0 10px; }
}

@media (max-width: 420px) {
    .topbar-brand .brand-text { display: none; }
    .topbar-brand .dot { margin-right: 0; }
}

.topbar-page-title {
    flex: 1 1 auto; min-width: 0;
    text-align: center;
    font-size: 13px; font-weight: 600;
    color: var(--fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 8px;
}
@media (max-width: 420px) {
    .topbar-page-title { font-size: 12.5px; }
}


/* === Градация ошибок по уровню === */
.badge-sev-error  { background: rgba(226, 87, 76, .18);  color: #e2574c; border-color: rgba(226, 87, 76, .45); }
.badge-sev-warn   { background: rgba(212, 175, 55, .16); color: #b38d1f; border-color: rgba(212, 175, 55, .45); }
.badge-sev-info   { background: rgba(88, 138, 196, .14); color: #4a7ac8; border-color: rgba(88, 138, 196, .35); }

/* === Градация сложности сценариев === */
.badge-diff-easy   { background: rgba(90, 166, 122, .18); color: #4a9b6b; }
.badge-diff-medium { background: rgba(212, 175, 55, .18); color: #b38d1f; }
.badge-diff-hard   { background: rgba(226, 87, 76, .18);  color: #e2574c; }

/* === Подсказки под репликой клиента на странице оператора === */
.op-hint-slot {
    margin: 4px 0 8px 14px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
}
.op-hint-slot::before {
    content: ""; position: absolute;
    left: -10px; top: -4px; bottom: 4px; width: 0;
    border-left: 2px dashed var(--border);
}
.op-hint-slot:empty { display: none; }
.op-hint-label {
    font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
}
.op-hint-card {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface, var(--bg));
    border: 1px solid var(--border);
    font-size: 12.5px; line-height: 1.4;
    max-width: 85%;
    animation: op-hint-in 180ms ease-out;
}
@keyframes op-hint-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.op-hint-card .op-hint-kind {
    font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 2px;
}
.op-hint-card .op-hint-title { font-weight: 600; }
.op-hint-card.kind-answer     { border-left: 3px solid var(--accent, #4a7ac8); }
.op-hint-card.kind-next_step  { border-left: 3px solid var(--success, #5aa67a); }
.op-hint-card.kind-knowledge  { border-left: 3px solid var(--muted, #888); }
.op-hint-card.kind-warning    { border-left: 3px solid var(--danger, #e2574c); background: rgba(226,87,76,.04); }
.op-hint-card.kind-upsell     { border-left: 3px solid #d4af37; }
.op-hint-card.kind-compliance { border-left: 3px solid var(--warning, #e6a23c); }


/* ---------------------------------------------------------------- */
/* Светлые темы: color-scheme, видимые скроллбары, читаемый VIP      */
/* ---------------------------------------------------------------- */
[data-theme="light"],
[data-theme="sunlight"] {
    color-scheme: light;
}
[data-theme="light"]   ::-webkit-scrollbar-thumb,
[data-theme="sunlight"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
[data-theme="light"]   ::-webkit-scrollbar-thumb:hover,
[data-theme="sunlight"] ::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* VIP-золото на белом еле видно — даём плотнее фон и тёмный текст */
[data-theme="light"]   .badge-vip,
[data-theme="sunlight"] .badge-vip {
    background: rgba(180, 130, 20, .16);
    color: #8a6a14;
    border-color: rgba(180, 130, 20, .40);
}
/* Рискованный/Спящий/Новый на белом читаются, но делаем чуть плотнее */
[data-theme="light"]   .badge-at_risk, [data-theme="sunlight"] .badge-at_risk   { color: #b83f34; }
[data-theme="light"]   .badge-dormant, [data-theme="sunlight"] .badge-dormant   { color: #3860a6; }
[data-theme="light"]   .badge-new,     [data-theme="sunlight"] .badge-new       { color: #2f7a4e; }

/* sev/diff — усиливаем контраст на свету */
[data-theme="light"]   .badge-sev-info, [data-theme="sunlight"] .badge-sev-info { color: #3860a6; }


/* ---------------------------------------------------------------- */
/* Toasts (неблокирующие уведомления в правом нижнем углу)          */
/* ---------------------------------------------------------------- */
#toastRoot {
    position: fixed; right: 16px; bottom: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 1000;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 240px; max-width: 380px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    font-size: 13px; line-height: 1.35;
    animation: toast-in 180ms ease-out;
}
.toast.kind-success { border-left-color: var(--success); }
.toast.kind-danger  { border-left-color: var(--danger); }
.toast.kind-warn    { border-left-color: var(--warning); }
.toast.kind-info    { border-left-color: var(--info); }
.toast.fade-out { animation: toast-out 220ms ease-in forwards; }
.toast-icon { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.toast.kind-success .toast-icon { color: var(--success); }
.toast.kind-danger  .toast-icon { color: var(--danger); }
.toast.kind-warn    .toast-icon { color: var(--warning); }
.toast.kind-info    .toast-icon { color: var(--info); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-text { color: var(--fg-dim); font-size: 12px; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(8px); } }
@media (max-width: 720px) {
    #toastRoot { right: 8px; left: 8px; bottom: 8px; }
    .toast { min-width: 0; max-width: none; width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Skeleton-плейсхолдеры                                              */
/* ---------------------------------------------------------------- */
.sk {
    display: block;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 40%,
        var(--surface-2) 80%
    );
    background-size: 200% 100%;
    border-radius: var(--radius);
    animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line     { height: 12px; margin: 6px 0; }
.sk-title    { height: 18px; width: 60%; margin: 4px 0 10px; }
.sk-stat     { height: 82px; }
.sk-chart    { height: 100%; min-height: 180px; }
.sk-row      { height: 40px; margin-bottom: 6px; }
@keyframes sk-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---------------------------------------------------------------- */
/* Sparkline в .stat                                                  */
/* ---------------------------------------------------------------- */
.stat { position: relative; overflow: hidden; }
.stat-spark {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 6px;
    overflow: visible;
}
.stat-spark-area { fill: var(--accent); opacity: 0.12; }
.stat-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.stat-spark-dot  { fill: var(--accent); }
.stat-spark.trend-down .stat-spark-area,
.stat-spark.trend-down .stat-spark-dot  { fill: var(--danger); }
.stat-spark.trend-down .stat-spark-line { stroke: var(--danger); }
.stat-spark.trend-up .stat-spark-area,
.stat-spark.trend-up .stat-spark-dot    { fill: var(--success); }
.stat-spark.trend-up .stat-spark-line   { stroke: var(--success); }
.stat-delta {
    position: absolute; top: 10px; right: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-faint);
    letter-spacing: -0.01em;
}
.stat-delta.up   { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* ---------------------------------------------------------------- */
/* Подсказка оператора — интерактивная, кликом копирует в буфер     */
/* ---------------------------------------------------------------- */
.suggestion.active { position: relative; cursor: pointer; }
.suggestion.active:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg), var(--fg) 3%);
}
.suggestion.active .suggestion-actions button { cursor: pointer; }
.suggestion.active::after {
    content: attr(data-hotkey);
    position: absolute;
    top: 8px; right: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-faint);
    letter-spacing: 0.04em;
    pointer-events: none;
}
.suggestion.copied { animation: sug-flash 400ms ease-out; }
@keyframes sug-flash {
    0%   { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); }
    100% { background: var(--bg); }
}

.queued { position: relative; }
.queued::after {
    content: attr(data-hotkey);
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-faint);
    padding-left: 6px;
}

/* ---------------------------------------------------------------- */
/* Hotkey-хинт: свёрнут в иконку-пилюлю, раскрывается по клику/?   */
/* ---------------------------------------------------------------- */
.hotkey-hints {
    position: fixed; bottom: 10px; left: 10px;
    z-index: 50;
    display: flex; align-items: flex-end; gap: 6px;
    pointer-events: none;          /* кликается только кнопка */
}
.hotkey-hints > * { pointer-events: auto; }
.hotkey-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--fg-faint);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 150ms, color 150ms, border-color 150ms;
    user-select: none;
}
.hotkey-toggle:hover,
.hotkey-hints.open .hotkey-toggle {
    opacity: 1;
    color: var(--fg);
    border-color: var(--border-strong);
}
.hotkey-panel {
    display: none;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--fg-dim);
    box-shadow: var(--shadow-2);
    gap: 10px; align-items: center;
    white-space: nowrap;
    max-width: calc(100vw - 60px);
    overflow-x: auto;
}
.hotkey-hints.open .hotkey-panel { display: flex; }
.hotkey-panel .kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin: 0 2px;
    color: var(--fg);
}
@media (max-width: 720px) { .hotkey-hints { display: none; } }


/* ─── Режим встраивания (iframe на offer-standalone) ─────────────────
   Активируется через query-параметр ?embed=1 и класс .embed-mode
   на <html>/<body>. Прячет топбар Сократа целиком и расширяет
   контентную область на всю высоту app-shell (grid-template-rows: 1fr).
   Без этого в iframe виден двойной хедер: наша шапка page-viewer
   на offer-standalone + родной topbar страницы под ней. */
html.embed-mode #topbar,
body.embed-mode #topbar,
html.embed-mode .topbar,
body.embed-mode .topbar {
    display: none !important;
}
html.embed-mode .app-shell,
body.embed-mode .app-shell {
    /* В embed-режиме .app-shell работает как обычный блок, не grid:
       1) Родной grid (48px 1fr) рассчитан на видимый #topbar.
       2) Grid с 1fr-track корректно НЕ резолвит height:100% у детей
          с собственным скроллом (.ac-shell / .wh-shell / .pr-shell) —
          из-за этого Академия/Склад/Акции рендерились пустыми.
       3) В block-режиме #topbar с display:none просто не занимает места,
          а ребёнок-контент с height:100% получает ровно 100vh.
       4) padding-top: 48px + box-sizing: border-box — отступ под шапку
          page-viewer (которая плавающая absolute сверху iframe). Страницы
          без внутреннего скролла (Оператор/Клиенты/БЗ/Мессенджер/Панель/
          Сотрудники/Задачи) получают естественный отступ сверху. Для страниц
          с .XX-shell { height: 100% } (Академия/Склад/Акции) — border-box
          гарантирует, что 100% ребёнка = 100vh - 48px, а не 100vh. */
    display: block !important;
    height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-top: 48px !important;
}


/* Вариант phone: iPhone mockup-iframe в offer-standalone.
   В отличие от обычного ?embed=1, тут НЕТ внешней шапки page-viewer —
   только iOS-статус-бар в макете, который уже обрабатывается самим iframe.
   Поэтому padding-top: 48px не нужен — контент должен начинаться с верха
   app-shell чтобы мессенджер корректно использовал свои @media (max-width: 720px). */
html.embed-mode-phone .app-shell,
body.embed-mode-phone .app-shell {
    padding-top: 0 !important;
}




/* ═══════════════════════════════════════════════════════════════════
   Полный каскадный fix для messenger.html при открытии в embed-mode
   (iframe на offer-standalone, iPhone mockup).

   Проблема, которую мы решаем:
   1) messenger.html в @media (max-width: 720px) показывает ТОЛЬКО
      одну из двух панелей — либо .msgr-sidebar, либо .msgr-main
      (по классу .show-chat). В iframe 358×714 это срабатывает.
   2) .msgr-shell имеет height: calc(100vh - 48px) — рассчитано
      под видимый topbar, но в embed-mode topbar скрыт.
   3) .msgr-messages без min-height:0 в flex-column колонке ломается,
      если высота контейнера не фиксирована.

   Решение: принудительно фиксируем размеры по всей цепочке
   app-shell → msgr-shell → msgr-main → msgr-messages.
   ═══════════════════════════════════════════════════════════════════ */

/* msgr-shell занимает весь iframe, одна колонка в phone-mode */
html.embed-mode-phone .msgr-shell,
body.embed-mode-phone .msgr-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: 100vh !important;
    position: relative !important;
}

/* В embed-mode-phone всегда показываем main, независимо от .show-chat */
html.embed-mode-phone .msgr-sidebar,
body.embed-mode-phone .msgr-sidebar {
    display: none !important;
}
html.embed-mode-phone .msgr-main,
body.embed-mode-phone .msgr-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* .msgr-messages: flex:1 + min-height:0 — без этого flex-child со
   своим скроллом не получает высоту в flex-column контейнере */
html.embed-mode-phone .msgr-messages,
body.embed-mode-phone .msgr-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Для обычного embed-mode (page-viewer, 100% ширины) тоже даём 100vh */
html.embed-mode .msgr-shell,
body.embed-mode .msgr-shell {
    height: 100vh !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ПРИНУДИТЕЛЬНЫЙ фикс messenger.html в embed-mode-phone (iPhone mockup).
   
   Реальная проблема после всех предыдущих итераций:
   .msgr-main — это flex-column с height: 100vh, внутри:
      .msgr-main-head   (display: grid, БЕЗ flex-shrink: 0)
      .msgr-banner      (display: grid, БЕЗ flex-shrink: 0) ← pinned task
      .msgr-messages    (flex: 1, overflow-y: auto)
      .msgr-compose     (display: grid, БЕЗ flex-shrink: 0) ← поле ввода
   
   На узкой ширине 358px .msgr-banner с 4-мя детьми grid-шапкой
   wrap'ается в 3 строки — резко растёт в высоту. Т.к. flex-shrink
   у всех детей = 1 по умолчанию, .msgr-messages сжимается до ~0 и
   сообщения не видны.
   
   Решение:
   1) Всем не-messages детям — flex-shrink: 0, чтобы они не раздувались
      за свой естественный размер.
   2) Сам .msgr-banner (pinned task) скрываем — в iPhone-mockup это
      отвлекающий элемент с длинным текстом на узком экране.
   ═══════════════════════════════════════════════════════════════════ */

html.embed-mode-phone .msgr-main-head,
body.embed-mode-phone .msgr-main-head,
html.embed-mode-phone .msgr-compose,
body.embed-mode-phone .msgr-compose {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
}

/* Pinned task ("Срочно:...") — убираем в phone-mockup. На мобильной
   ширине её длинный текст занимает 2-3 строки и съедает всё место
   у списка сообщений. В демо-предпросмотре важнее сами сообщения. */
html.embed-mode-phone .msgr-banner,
body.embed-mode-phone .msgr-banner {
    display: none !important;
}

/* .msgr-main в mobile-режиме должен гарантированно быть 100vh, иначе
   .msgr-messages с flex:1 считается от 0 высоты = сообщений не видно. */
html.embed-mode-phone .msgr-main,
body.embed-mode-phone .msgr-main {
    height: 100vh !important;
    max-height: 100vh !important;
}