/* ============================================================
   sensim Design System — Productboard-inspired, ICS blue
   ============================================================ */
:root {
    --brand-700: #0d47a1;
    --brand-600: #1565d8;
    --brand-500: #2f7de1;
    --brand-400: #5c9cec;
    --brand-100: #dbe9fb;
    --brand-50:  #eef5ff;

    --bg-app: #f5f7fb;
    --bg-surface: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-hover: #f1f5f9;

    --border: #e3e8f0;
    --border-strong: #cbd5e1;

    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;

    --green: #16a34a;
    --red: #dc2626;
    --amber: #d97706;

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;

    --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
    --shadow-2: 0 4px 12px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);
    --shadow-3: 0 12px 32px rgba(15,23,42,.12);

    --rail-w: 76px;
    --font: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, sans-serif;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-fast: 140ms;
    --dur-med: 220ms;
    --focus-ring: 0 0 0 3px rgba(21, 101, 216, .18);

    /* Glassmorphism (apple-style frosted panels). Все белые стеклянные
       заливки собраны на ОДНОМ канале --glass-tint: тема меняет только его
       (светлая — белое стекло, тёмная — тёмное), альфа у правил общая. */
    --glass-tint: 255 255 255;
    --glass-blur: 22px;
    --glass-saturate: 180%;
    --glass-bg: rgb(var(--glass-tint) / .44);
    --glass-bg-hover: rgb(var(--glass-tint) / .55);
    --glass-bg-strong: rgb(var(--glass-tint) / .60);
    --glass-border: rgb(var(--glass-tint) / .62);
    --glass-input-bg: rgb(var(--glass-tint) / .70);
    --glass-shadow: 0 12px 40px rgba(13, 71, 161, .13), 0 2px 8px rgba(15, 23, 42, .05);
    --glass-shadow-hover: 0 18px 52px rgba(13, 71, 161, .17), 0 4px 12px rgba(15, 23, 42, .06);
    --glass-highlight: inset 0 1px 0 rgb(var(--glass-tint) / .78);
    --glass-radius: 18px;

    /* Алиасы старых имён (battlecard/notify/чат-чипы используют var() с
       fallback'ами) — теперь управляются темой централизованно. */
    --surface: #ffffff;
    --surface-2: #eef1f6;
    --bg: #f6f8fb;
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-1: #e2e8f0;
    --brand-200: #bcd0f7;
    /* Тёмно-синий текст на светлых подложках; в тёмной теме — светлый синий. */
    --brand-ink: #0d47a1;
    /* Ссылки/активные акценты-текст (в тёмной теме светлее brand-600). */
    --brand-link: #1565d8;
    /* Собственный фон «комнаты» чата (без точечной сетки). */
    --chat-bg: linear-gradient(165deg, #edf1f8 0%, #e2e8f3 52%, #dbe2ef 100%);
    /* Подложка баннера на Главной. */
    --banner-bg: linear-gradient(90deg, rgba(238, 245, 255, .72), rgba(244, 240, 255, .66));

    /* Единый фон приложения (как во вкладке Деревья): бренд-синий + янтарный,
       фиолетовый и бирюзовый акценты + тонкая точечная сетка.
       Исключение без сетки — фон чата. */
    --bg-aurora:
        radial-gradient(1150px 780px at 90% -10%, rgba(21, 101, 216, .40), rgba(21, 101, 216, 0) 60%),
        radial-gradient(880px 660px at -8% 110%, rgba(228, 172, 62, .42), rgba(228, 172, 62, 0) 58%),
        radial-gradient(760px 560px at 16% -14%, rgba(123, 97, 196, .24), rgba(123, 97, 196, 0) 60%),
        radial-gradient(680px 520px at 80% 114%, rgba(76, 195, 165, .20), rgba(76, 195, 165, 0) 60%),
        radial-gradient(rgba(21, 45, 95, .05) 1px, transparent 1.4px),
        linear-gradient(158deg, #eef3fc 0%, #e6edfa 45%, #dce7f8 100%);
    --bg-aurora-size: auto, auto, auto, auto, 22px 22px, auto;
}

/* ═══════════════ ТЁМНАЯ ТЕМА (data-theme="dark" на <html>) ═══════════════
   Принцип «двух цветов»: меняется белая основа фона (линейная база авроры —
   цвета плавающих форм/радиалов прежние) и цвет текста; стекло собрано на
   канале --glass-tint, поэтому все панели переключаются одним значением. */
[data-theme="dark"] {
    --brand-100: #20335c;
    --brand-50:  #17264a;

    --bg-app: #0b1220;
    --bg-surface: #111d36;
    --bg-subtle: #172440;
    --bg-hover: #1d2c4e;

    --border: #2b3c5e;
    --border-strong: #3d5379;

    --text-1: #edf2fa;
    --text-2: #c2cde0;
    --text-3: #8b9bb8;

    --shadow-1: 0 1px 2px rgba(2, 6, 18, .35), 0 1px 3px rgba(2, 6, 18, .3);
    --shadow-2: 0 4px 12px rgba(2, 6, 18, .4), 0 1px 3px rgba(2, 6, 18, .3);
    --shadow-3: 0 12px 32px rgba(2, 6, 18, .55);

    --glass-tint: 17 26 46;
    --glass-shadow: 0 12px 40px rgba(2, 6, 18, .45), 0 2px 8px rgba(2, 6, 18, .30);
    --glass-shadow-hover: 0 18px 52px rgba(2, 6, 18, .55), 0 4px 12px rgba(2, 6, 18, .36);
    --glass-highlight: inset 0 1px 0 rgb(var(--glass-tint) / .14);

    --surface: #111d36;
    --surface-2: #1b2947;
    --bg: #172440;
    --text: #edf2fa;
    --text-secondary: #c2cde0;
    --text-muted: #8b9bb8;
    --border-1: #2b3c5e;
    --brand-200: #31517f;
    --brand-ink: #9ec2ff;
    --brand-link: #6ea8ff;
    --chat-bg: linear-gradient(165deg, #14203c 0%, #101a32 52%, #0d1628 100%);
    --banner-bg: linear-gradient(90deg, rgba(24, 43, 84, .72), rgba(34, 30, 70, .66));

    /* Цветные радиалы авроры — те же (живой фон не меняется), тёмная только
       белая основа: точечная сетка светлеет, линейная база уходит в navy. */
    --bg-aurora:
        radial-gradient(1150px 780px at 90% -10%, rgba(21, 101, 216, .40), rgba(21, 101, 216, 0) 60%),
        radial-gradient(880px 660px at -8% 110%, rgba(228, 172, 62, .42), rgba(228, 172, 62, 0) 58%),
        radial-gradient(760px 560px at 16% -14%, rgba(123, 97, 196, .24), rgba(123, 97, 196, 0) 60%),
        radial-gradient(680px 520px at 80% 114%, rgba(76, 195, 165, .20), rgba(76, 195, 165, 0) 60%),
        radial-gradient(rgba(148, 178, 255, .07) 1px, transparent 1.4px),
        linear-gradient(158deg, #111c34 0%, #0d1526 45%, #0a1120 100%);
}

/* ── Shell ─────────────────────────────────────────────── */
.shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg-aurora); background-size: var(--bg-aurora-size); position: relative; }

/* Живой фон (.ambient-bg + .amb-shape) — канонический блок в css/ambient.css
   (грузится через AssetLoader; boot-страницы держат инлайн-копии). */

/* ── Icon rail ─────────────────────────────────────────── */
.rail {
    width: var(--rail-w); flex-shrink: 0; height: 100vh;
    background: rgb(var(--glass-tint) / .38);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgb(var(--glass-tint) / .55);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 10px 6px; gap: 2px; z-index: 60;
}
.rail-logo {
    height: 44px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px; cursor: pointer; user-select: none;
}
.rail-logo-badge {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .4px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(21,101,216,.35);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.rail-logo:hover .rail-logo-badge { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(21,101,216,.4); }
.rail-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 2px 7px; border-radius: var(--radius-m);
    color: var(--text-2); text-decoration: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    position: relative;
}
.rail-item svg { width: 21px; height: 21px; stroke-width: 1.7; }
.rail-item span { font-size: 9.5px; font-weight: 500; line-height: 1; letter-spacing: .1px; }
.rail-item:hover { background: rgb(var(--glass-tint) / .50); color: var(--text-1); }
.rail-item:active { transform: scale(.94); }
.rail-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rail-item.active { background: rgb(var(--glass-tint) / .68); color: var(--brand-link); box-shadow: var(--glass-highlight), 0 2px 8px rgba(13, 71, 161, .10); }
.rail-item.active::before {
    content: ''; position: absolute; left: -6px; top: 20%; bottom: 20%;
    width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
}
.rail-spacer { flex: 1; }

/* ── Мини-меню деревьев (hover вкладки «Деревья») ────────── */
.rail-tree-menu {
    position: fixed; z-index: 500; min-width: 230px; max-width: 310px;
    overflow-y: auto; overscroll-behavior: contain;
    background: rgb(var(--glass-tint) / .60);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgb(var(--glass-tint) / .62);
    border-radius: 16px;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    padding: 8px;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
}
.rail-tree-menu.open { opacity: 1; transform: translateX(0); }
.rail-tree-menu-group {
    font-size: .68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--text-3); padding: 8px 10px 4px;
}
.rail-tree-menu-group:first-child { padding-top: 4px; }
.rail-tree-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; border: none; background: transparent;
    padding: 7px 10px; border-radius: 10px; cursor: pointer;
    font-family: var(--font); font-size: .82rem; color: var(--text-1);
    transition: background 140ms var(--ease-out);
}
.rail-tree-menu-item:hover { background: rgba(21, 101, 216, .10); }
.rail-tree-menu-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 550;
}
.rail-tree-menu-type {
    flex-shrink: 0; font-size: .68rem; color: var(--text-3);
    background: rgb(var(--glass-tint) / .4); padding: 2px 7px; border-radius: 999px;
}
.rail-tree-menu-empty { padding: 12px; font-size: .8rem; color: var(--text-3); }

/* Кнопка «Настройки просмотра» снизу списка деревьев (разворачивает flyout
   в панель просмотра — перенос вкладки «Просмотр» правой панели, 2026-09-05) */
.rail-tree-menu-expand {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: calc(100% - 4px); margin: 6px 2px 2px; padding: 7px 10px;
    border: none; border-top: 1px solid rgb(var(--glass-tint) / .55);
    background: transparent; cursor: pointer; border-radius: 0 0 10px 10px;
    font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--text-3);
    transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.rail-tree-menu-expand svg { width: 13px; height: 13px; flex-shrink: 0; }
.rail-tree-menu-expand:hover { color: var(--brand-link); background: rgba(21, 101, 216, .08); }

/* Развёрнутый flyout: настройки просмотра (двухколоночная #view-options) */
.rail-tree-menu-expanded { min-width: 480px; max-width: min(560px, calc(100vw - 100px)); }
.rail-tree-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 6px; border-bottom: 1px solid rgb(var(--glass-tint) / .5);
    margin-bottom: 6px;
}
.rail-tree-menu-head .rail-tree-menu-group { padding: 0 6px; }
.rail-tree-menu-collapse {
    display: flex; align-items: center; gap: 5px;
    border: none; background: transparent; cursor: pointer;
    font-family: var(--font); font-size: .74rem; font-weight: 600; color: var(--text-3);
    padding: 4px 8px; border-radius: 8px;
    transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.rail-tree-menu-collapse svg { width: 12px; height: 12px; }
.rail-tree-menu-collapse:hover { color: var(--brand-link); background: rgba(21, 101, 216, .08); }
.rail-tree-menu-viewhost .view-options { padding: 2px 4px 6px; }
/* Анимация смены вида: уходящий слой гаснет, новый приходит слева мягко */
.rail-tree-menu.switching-out { opacity: 0; transform: translateX(-6px); }

/* Колонки настроек просмотра внутри узкого flyout'а — чуть компактнее */
.rail-tree-menu-viewhost .view-col { min-width: 0; }
.rail-tree-menu-viewhost .view-slot-btn { max-width: 100%; }

.rail-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-100), rgb(var(--glass-tint) / .7));
    border: 1px solid rgb(var(--glass-tint) / .7);
    color: var(--brand-ink); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}

/* ── Views ─────────────────────────────────────────────── */
.shell-main { flex: 1; min-width: 0; height: 100vh; position: relative; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }
.view-scroll { flex: 1; overflow-y: auto; padding: 32px 40px 48px; }
.view-narrow { max-width: 1080px; margin: 0 auto; width: 100%; }

.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 1.45rem; font-weight: 700; color: var(--text-1); letter-spacing: -.01em; }
.page-head .page-sub { color: var(--text-2); font-size: .9rem; margin-top: 2px; }
.page-head .spacer { flex: 1; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; border: 1px solid var(--glass-border);
    background: rgb(var(--glass-tint) / .55); color: var(--text-1); font-size: .85rem; font-weight: 500;
    cursor: pointer; font-family: var(--font);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: rgb(var(--glass-tint) / .78); border-color: rgb(var(--glass-tint) / .9); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 10px rgba(21, 101, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); border-color: transparent; box-shadow: 0 4px 14px rgba(21, 101, 216, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
/* Приглушённое («чистое») состояние кнопки сохранения: изменений нет —
   кнопка гаснет; «загорается» при появлении несохранённых правок. */
.btn-primary:disabled {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    opacity: .4; cursor: not-allowed; box-shadow: none;
}
.btn-primary:disabled:hover {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    box-shadow: none;
}
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-ghost:hover { background: rgb(var(--glass-tint) / .5); color: var(--text-1); border-color: transparent; }

/* ── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.card-pad { padding: 18px 20px; }
.card-title { font-size: .95rem; font-weight: 600; color: var(--text-1); letter-spacing: -.005em; }
.card-sub { font-size: .78rem; color: var(--text-3); margin-top: 2px; }

/* ── Типографика (SF Pro-like) ─────────────────────────── */
h1, h2, h3, h4 { letter-spacing: -.015em; }
.page-head h1, .home-greeting, .home-subgreeting { letter-spacing: -.02em; }

/* ── Glass-инпуты (глобально) ──────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea {
    background: rgb(var(--glass-tint) / .62);
    border: 1px solid rgb(var(--glass-tint) / .68);
    border-radius: 10px;
    font-family: var(--font);
    color: var(--text-1);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):hover,
select:hover,
textarea:hover { background: rgb(var(--glass-tint) / .74); }
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* ═══════════════════════ HOME ═══════════════════════════ */
#view-home { background: transparent; }
.home-hero { max-width: 860px; margin: 6vh auto 0; width: 100%; padding: 0 24px; }
.home-greeting { font-size: 1.7rem; font-weight: 700; color: var(--text-1); letter-spacing: -.02em; line-height: 1.25; }
.home-greeting .accent { color: var(--brand-link); }
.home-subgreeting { font-size: 1.7rem; font-weight: 700; color: var(--brand-link); letter-spacing: -.02em; }

.home-banner {
    margin-top: 22px; display: flex; align-items: center; gap: 14px;
    background: var(--banner-bg);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgb(var(--glass-tint) / .6); border-radius: var(--glass-radius);
    padding: 13px 16px;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.home-banner-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--brand-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.home-banner-icon svg { width: 18px; height: 18px; }
.home-banner-text { flex: 1; min-width: 0; }
.home-banner-title { font-weight: 600; font-size: .9rem; color: var(--text-1); }
.home-banner-sub { font-size: .8rem; color: var(--text-2); margin-top: 1px; min-height: 2.2em; }
/* Карусель вопросов баннера: стрелки ‹ › + счётчик */
.home-banner-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.home-banner-arrow {
    width: 26px; height: 26px; border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgb(var(--glass-tint) / .5); color: var(--text-2);
    font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.home-banner-arrow:hover { background: rgb(var(--glass-tint) / .9); color: var(--brand-link, #1565d8); border-color: var(--brand-400, #5c9cec); }
.home-banner-counter { font-size: .72rem; color: var(--text-3); min-width: 30px; text-align: center; user-select: none; }

.home-chat-card {
    margin-top: 18px; border-radius: 22px;
    display: flex; flex-direction: column; height: 570px;
}
.home-chat-card .quikchat { height: 100%; }
#assistant-mount-home { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.home-skills-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; }
.home-skills-head h2 { font-size: .95rem; font-weight: 600; color: var(--text-1); letter-spacing: -.01em; }
.home-skills-head a { margin-left: auto; font-size: .82rem; color: var(--brand-link); text-decoration: none; cursor: pointer; }
.home-skills-head a:hover { text-decoration: underline; }

/* ── Плитки навыков (стиль "Apps in your plan") ────────── */
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding-bottom: 40px; }
.home-card {
    background: rgb(var(--glass-tint) / .50);
    backdrop-filter: blur(18px) saturate(175%);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
    border: 1px solid var(--glass-border); border-radius: 16px;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    padding: 16px; cursor: pointer;
    transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
    display: flex; flex-direction: column; gap: 9px; min-height: 118px; position: relative;
}
.home-card:hover {
    background: rgb(var(--glass-tint) / .62);
    box-shadow: var(--glass-shadow-hover), var(--glass-highlight);
    border-color: rgb(var(--glass-tint) / .85); transform: translateY(-3px);
}
.home-card:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-fast); }
.home-card-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.home-card-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 9px rgba(21, 101, 216, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.home-card-icon svg { width: 19px; height: 19px; }
.home-card-title { font-weight: 600; font-size: .92rem; color: var(--text-1); line-height: 1.25; letter-spacing: -.008em; }
.home-card-sub { font-size: .74rem; color: var(--text-3); font-family: ui-monospace, monospace; }
.home-card-status { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.home-card-status.running { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.home-card-status.error { background: var(--red); }
.home-card-add { border: 1.5px dashed rgb(var(--glass-tint) / .75); background: rgb(var(--glass-tint) / .22); align-items: center; justify-content: center; color: var(--text-3); flex-direction: row; gap: 8px; min-height: 118px; }
.home-card-add:hover { border-color: var(--brand-500); color: var(--brand-link); }

/* ═══════════════════════ STATS ══════════════════════════ */
.stats-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.stats-toolbar select {
    padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
    background: var(--bg-surface); font-size: .85rem; color: var(--text-1); cursor: pointer;
}
.stats-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.stats-widget { grid-column: span 6; display: flex; flex-direction: column; min-height: 340px; }
.stats-widget.wide { grid-column: span 12; }
.stats-widget-head { padding: 16px 18px 0; }
.stats-widget-title { font-size: .95rem; font-weight: 600; color: var(--text-1); }
.stats-widget-sub { font-size: .76rem; color: var(--text-3); margin-top: 2px; }
.stats-widget-body { flex: 1; padding: 10px 14px 14px; min-height: 0; position: relative; }
.stats-widget-body svg { width: 100%; height: 100%; display: block; }
#w-trends-body, #w-sources-body { flex: none; height: 250px; box-sizing: border-box; }
.stats-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: .85rem; }
.stats-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0 18px 14px; font-size: .78rem; color: var(--text-2); }
.stats-legend-item { display: flex; align-items: center; gap: 6px; cursor: default; }
.stats-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.chart-tooltip {
    position: fixed; z-index: 1000; pointer-events: none;
    background: var(--text-1); color: #fff; font-size: .78rem;
    padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow-2);
    opacity: 0; transition: opacity 120ms var(--ease-out); max-width: 260px;
}
.chart-tooltip .tt-title { font-weight: 600; margin-bottom: 3px; }
.chart-tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; }

/* ═══════════════════ SETTINGS ═══════════════════════════ */
.settings-layout { display: flex; flex: 1; min-height: 0; }
/* Колонки разделов нет (2026-09-06): разделы открываются из flyout'а при
   наведении на кнопку «Настройки» (десктоп) или по тапу на неё (мобильная). */
.settings-content-col { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 36px; }
.settings-content-col h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-1); margin-bottom: 18px; }
.settings-sub-pane { display: none; flex-direction: column; }
.settings-sub-pane.active { display: flex; }

/* ═══════════════ SETTINGS: LLM API ═══════════════════════ */
.llm-status {
    font-size: .82rem; padding: 10px 14px; border-radius: var(--radius-s);
    margin-bottom: 16px; max-width: 640px; line-height: 1.5;
}
.llm-status-user { background: rgba(22, 163, 74, .10); border: 1px solid rgba(22, 163, 74, .35); color: #166534; }
[data-theme="dark"] .llm-status-user { background: rgba(74, 222, 128, .10); border-color: rgba(74, 222, 128, .28); color: #86efac; }
.llm-status-global { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--text-2); }
.llm-key-mask-row { display: flex; align-items: center; gap: 10px; }
.llm-key-mask {
    font-family: monospace; font-size: .9rem; background: var(--bg-subtle);
    border: 1px solid var(--border); border-radius: var(--radius-s);
    padding: 7px 12px; color: var(--text-2); letter-spacing: .5px; user-select: none;
}
.llm-reset-btn { font-size: .8rem; padding: 6px 12px; color: #b91c1c; border-color: #fecaca; }
.llm-reset-btn:hover { background: #fef2f2; }
[data-theme="dark"] .llm-reset-btn { color: #f87171; border-color: rgba(248, 113, 113, .4); }
[data-theme="dark"] .llm-reset-btn:hover { background: rgba(248, 113, 113, .12); }
.llm-cb-row { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.llm-cb-row label { cursor: pointer; font-weight: normal; margin: 0; }

/* Слайдер провайдера LLM (YandexGPT | Базовая | Другая) */
.llm-seg {
    display: inline-flex; background: var(--surface-2, #eef1f6); border-radius: 10px;
    padding: 3px; gap: 2px; border: 1px solid var(--border-1, #e2e8f0);
}
.llm-seg-btn {
    border: none; background: transparent; padding: 7px 18px; border-radius: 8px;
    font-size: .86rem; font-weight: 500; color: var(--text-2); cursor: pointer;
    transition: background var(--dur-fast, 140ms) var(--ease-out, ease),
                color var(--dur-fast, 140ms) var(--ease-out, ease),
                box-shadow var(--dur-fast, 140ms) var(--ease-out, ease);
}
.llm-seg-btn:hover { color: var(--text-1); }
.llm-seg-btn:active { transform: scale(.97); }
.llm-seg-btn.active {
    background: var(--bg-surface); color: var(--brand-link); box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.llm-basic-note {
    background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--text-2);
    border-radius: 10px; padding: 12px 14px; font-size: .86rem; line-height: 1.5;
}

/* ═══════════════════ COMPETITORS ════════════════════════ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.empty-state-icon {
    width: 64px; height: 64px; border-radius: 18px; background: var(--brand-50);
    color: var(--brand-link); display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state h2 { font-size: 1.15rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.empty-state p { color: var(--text-2); font-size: .88rem; max-width: 420px; line-height: 1.55; }
.badge-soon {
    display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-link); font-size: .75rem; font-weight: 600;
}

/* ═══════════════ RECOLOR EXISTING UI ════════════════════ */
.tab-btn.active { color: var(--brand-link); border-bottom-color: var(--brand-link); }
.header-bar { background: var(--bg-surface); border-bottom-color: var(--border); }
.header-bar a { color: var(--brand-link); }
.resizer:hover { background: var(--brand-500); }
.resizer:hover::after { background: var(--brand-500); }
.make-root-btn:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-link); }
.panel-name-input:focus, .panel-textarea:focus { border-color: var(--brand-500); }
.checkbox-row input { accent-color: var(--brand-link); }
.panel-static-checkbox { border-color: var(--brand-link); }
.panel-static-checkbox.checked { background: var(--brand-600); }
.node-rect.selected { stroke: var(--brand-600) !important; }
.desc-edit-toggle { color: var(--brand-link); }
.assistant-tool-btn { background: var(--brand-600); }
.assistant-tool-btn:hover { background: var(--brand-700); }

/* Trees view inside shell */
#view-trees .app-container { height: 100%; width: 100%; }
#view-trees .properties-panel { height: 100%; width: 460px; }

/* Responsive rail labels — мобильная версия (условие как в блоке MOBILE ниже) */
@media (orientation: portrait), (hover: none) and (pointer: coarse) {
    :root { --rail-w: 60px; }
    .rail-item span { display: none; }
}

/* ═══════════════ SKILLS (home) ══════════════════════════ */
.skill-card { min-height: 158px; }
.skill-badge {
    position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px;
    background: rgb(var(--glass-tint) / .62); border: 1px solid rgb(var(--glass-tint) / .7);
    color: var(--brand-link); font-size: .68rem; font-weight: 600;
}
.skill-cmd {
    font-size: .68rem; color: var(--brand-ink); font-family: ui-monospace, monospace;
    background: rgb(var(--glass-tint) / .55); border: 1px solid rgb(var(--glass-tint) / .65);
    border-radius: 6px; padding: 1px 7px; align-self: flex-start;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill-desc {
    font-size: .8rem; color: var(--text-2); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.skill-by { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-3); }
.skill-by-logo { width: 15px; height: 15px; flex: 0 0 auto; }

/* ═══════════════ CHAT (quikchat restyle) ════════════════ */
.quikchat-base { display: flex; flex-direction: column; height: 100%; font-family: var(--font); }
.quikchat-messages-wrapper { flex: 1; min-height: 0; position: relative; display: flex; }

/* Каркас чата — светлая «комната» с собственным фоном (композиция референса:
   фрейм → лента сообщений → парящая капсула ввода). Оттенок глубже авроры
   приложения, поэтому стеклянные кнопки и поле ввода не теряются на фоне
   содержимого. Точечной сетки в чате нет — спокойный фон для чтения. */
.quikchat-theme-appraiser {
    border: 1px solid rgb(var(--glass-tint) / .72);
    border-radius: 22px;
    background:
        radial-gradient(760px 420px at 88% -6%, rgba(21, 101, 216, .13), rgba(21, 101, 216, 0) 60%),
        radial-gradient(640px 460px at -10% 110%, rgba(217, 164, 65, .11), rgba(217, 164, 65, 0) 56%),
        radial-gradient(520px 380px at 8% -14%, rgba(123, 97, 196, .09), rgba(123, 97, 196, 0) 60%),
        var(--chat-bg);
    box-shadow: 0 16px 44px rgba(13, 71, 161, .16), inset 0 1px 0 rgb(var(--glass-tint) / .85);
    color: var(--text-1);
}

.quikchat-messages-area {
    flex: 1; overflow-y: auto; padding: 22px 24px 8px; background: transparent;
    display: flex; flex-direction: column; gap: 6px;
}
.quikchat-message { margin: 0 0 14px; max-width: 100%; }
.quikchat-user-label { font-size: .72rem; color: var(--text-3); margin-bottom: 5px; font-weight: 600; letter-spacing: .01em; }
/* white-space: normal — marked-разметка сама управляет переносами (<p>, <br>);
   унаследованный pre-wrap рендерил хвостовой \n из marked.parse пустой строкой. */
.quikchat-message-content { font-size: .9rem; line-height: 1.62; color: var(--text-1); word-wrap: break-word; white-space: normal; }

/* Пузырь пользователя — бренд-градиент, компактный (shrink-to-fit по тексту) */
.quikchat-role-user { align-self: flex-end; max-width: 78%; }
.quikchat-role-user .quikchat-message-content {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border: none; border-radius: 18px 18px 6px 18px;
    box-shadow: 0 4px 14px rgba(21, 101, 216, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    padding: 9px 14px; text-align: left !important; color: #fff;
    line-height: 1.5;
}
.quikchat-role-user .quikchat-message-content p { margin: 0; }
.quikchat-role-user .quikchat-message-content p + p { margin-top: 8px; }
.quikchat-role-user .quikchat-message-content a { color: #eaf2ff; text-decoration: underline; }
.quikchat-role-user .quikchat-message-content code { background: rgba(255, 255, 255, .22); color: #fff; }
.quikchat-role-user .quikchat-user-label { display: none; }

/* Ассистент — как в референсе: орб-аватар + подпись, текст без пузыря,
   вертикальная линия-таймлайн под аватаром */
.quikchat-role-assistant, .quikchat-role-tool { align-self: flex-start; max-width: 92%; }
.quikchat-role-assistant .quikchat-user-label {
    display: flex; align-items: center; gap: 9px;
    color: var(--brand-link); font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.quikchat-role-assistant .quikchat-user-label::before {
    content: '✦'; flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 32% 30%, var(--brand-400), var(--brand-600) 62%, var(--brand-700));
    color: #fff; font-size: 11px;
    box-shadow: 0 2px 8px rgba(21, 101, 216, .40), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.quikchat-role-assistant .quikchat-message-content {
    background: transparent; border: none; box-shadow: none;
    margin-left: 12px; padding: 2px 0 4px 21px;
    border-left: 2px solid rgba(21, 101, 216, .16);
    text-align: left !important;
}
.quikchat-role-tool .quikchat-message-content {
    background: rgb(var(--glass-tint) / .55);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgb(var(--glass-tint) / .68); border-left: 3px solid var(--brand-400);
    border-radius: 10px; padding: 8px 12px; font-size: .8rem; color: var(--text-2);
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(13, 71, 161, .07);
}
.quikchat-timestamp { display: none; }

/* markdown внутри сообщений ассистента */
.quikchat-message-content h1, .quikchat-message-content h2, .quikchat-message-content h3,
.quikchat-message-content h4 { margin: 14px 0 6px; line-height: 1.3; color: var(--text-1); letter-spacing: -.01em; }
.quikchat-message-content h1 { font-size: 1.15rem; } .quikchat-message-content h2 { font-size: 1.05rem; }
.quikchat-message-content h3 { font-size: .95rem; }
.quikchat-message-content p { margin: 6px 0; }
.quikchat-message-content ul, .quikchat-message-content ol { margin: 6px 0 6px 20px; }
.quikchat-message-content li { margin: 3px 0; }
.quikchat-message-content code {
    background: rgb(var(--glass-tint) / .6); border: 1px solid rgb(var(--glass-tint) / .5);
    border-radius: 5px; padding: 1px 5px;
    font-family: ui-monospace, monospace; font-size: .82em;
}
.quikchat-message-content pre {
    background: rgba(15, 23, 42, .92); color: #e2e8f0; border-radius: 12px; padding: 12px 14px;
    overflow-x: auto; font-size: .8rem; margin: 8px 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
.quikchat-message-content pre code { background: none; border: none; color: inherit; padding: 0; }
.quikchat-message-content table { border-collapse: collapse; margin: 10px 0; font-size: .84rem; width: 100%; }
.quikchat-message-content th, .quikchat-message-content td {
    border: 1px solid rgb(var(--glass-tint) / .55); padding: 6px 10px; text-align: left;
}
.quikchat-message-content th { background: rgb(var(--glass-tint) / .5); font-weight: 600; }
.quikchat-message-content blockquote {
    border-left: 3px solid var(--brand-400); margin: 8px 0; padding: 4px 12px; color: var(--text-2);
    background: rgb(var(--glass-tint) / .4); border-radius: 0 8px 8px 0;
}
.quikchat-message-content a { color: var(--brand-link); }
/* Ссылки на тикеты из отчётов ассистента ([текст](ticket:<id>)) */
.quikchat-message-content a[href^="ticket:"] {
    display: inline-block; padding: 0 8px; border-radius: 8px;
    background: rgba(21, 101, 216, .10); border: 1px solid rgba(21, 101, 216, .22);
    text-decoration: none; font-size: .92em; line-height: 1.55;
}
.quikchat-message-content a[href^="ticket:"]:hover { background: rgba(21, 101, 216, .18); }
.quikchat-message-content a[href^="ticket:"]::before { content: '⌕ '; }

/* input — парящая стеклянная капсула. Радиус 26px: в одну строку (высота ~52px)
   выглядит таблеткой, при росте textarea — аккуратным скруглённым блоком
   (999px на многострочном поле «растягивал» форму). */
.quikchat-input-area {
    display: flex; gap: 10px; margin: 10px 14px 14px; padding: 7px 7px 7px 16px;
    background: color-mix(in srgb, var(--bg-subtle) 94%, transparent);
    backdrop-filter: blur(16px) saturate(175%);
    -webkit-backdrop-filter: blur(16px) saturate(175%);
    border: 1px solid var(--border-strong); border-radius: 26px;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    align-items: flex-end;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-radius var(--dur-med) var(--ease-out);
}
.quikchat-input-area:focus-within {
    border-color: var(--brand-400);
    box-shadow: var(--glass-shadow), var(--focus-ring), var(--glass-highlight);
}
.quikchat-input-textbox {
    flex: 1; border: none; border-radius: 0;
    padding: 9px 0; font-family: var(--font); font-size: .92rem; resize: none;
    background: transparent; color: var(--text-1); line-height: 1.4;
    min-height: 20px; max-height: 132px;
}
.quikchat-input-textbox:hover { background: transparent; }
.quikchat-input-textbox:focus { outline: none; box-shadow: none; }
/* Кнопка отправки — идеальный круг со стрелкой вправо (SVG-маска).
   min-width/padding сброшены: у базовой темы quikchat min-width 5rem делал её овалом. */
.quikchat-input-send-btn {
    width: 38px; height: 38px; min-width: 38px; padding: 0; margin-left: 0;
    border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff; font-size: 0; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(21, 101, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quikchat-input-send-btn::after {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quikchat-input-send-btn:hover { transform: scale(1.06); box-shadow: 0 5px 14px rgba(21, 101, 216, .42), inset 0 1px 0 rgba(255, 255, 255, .25); }
.quikchat-input-send-btn:active { transform: scale(.9); }
.quikchat-input-send-btn:disabled { background: var(--border-strong); cursor: default; transform: none; box-shadow: none; }

/* кнопка «вниз» — стеклянный кружок */
.quikchat-scroll-bottom {
    background: rgb(var(--glass-tint) / .88) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(var(--glass-tint) / .9) !important;
    color: var(--brand-link);
    box-shadow: 0 6px 16px rgba(13, 71, 161, .20);
}

.quikchat-typing-dots span { animation: qc-blink 1.2s infinite; display: inline-block; }
.quikchat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.quikchat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes qc-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ─── Анимация отправки/появления сообщений ─── */
@keyframes qc-msg-in-right { from { opacity: 0; transform: translateX(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qc-msg-in-left { from { opacity: 0; transform: translateX(-16px) scale(.98); } to { opacity: 1; transform: none; } }
.quikchat-role-user { animation: qc-msg-in-right 210ms var(--ease-out) both; }
.quikchat-role-assistant, .quikchat-role-tool { animation: qc-msg-in-left 230ms var(--ease-out) both; }
/* Массовая загрузка истории — без анимации (класс ставит tunnel на время rebuild) */
#assistant-chat-container.qc-loading .quikchat-message { animation: none !important; }

/* ═══════════════ STATS: фильтр-бар ══════════════════════ */
.stats-filterbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-m);
    padding: 8px 12px; margin-bottom: 18px; box-shadow: var(--shadow-1);
    /* Липкий: при прокрутке статистики остаётся у верхнего края */
    position: sticky; top: 8px; z-index: 6;
}
.stats-preset-group { display: flex; gap: 2px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 2px; }
.stats-preset {
    border: none; background: none; padding: 5px 11px; border-radius: 6px;
    font-size: .8rem; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: var(--font);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.stats-preset:hover { color: var(--text-1); }
.stats-preset:active { transform: scale(.95); }
.stats-preset.active { background: var(--bg-surface); color: var(--brand-link); box-shadow: var(--shadow-1); }
.stats-custom-dates { display: none; align-items: center; gap: 6px; }
.stats-custom-dates.visible { display: flex; }
.stats-custom-dates input {
    border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 8px;
    font-size: .8rem; font-family: var(--font); color: var(--text-1);
}
.stats-custom-dates span { color: var(--text-3); font-size: .8rem; }
#stats-product {
    padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
    background: var(--bg-surface); font-size: .82rem; color: var(--text-1); cursor: pointer;
    font-family: var(--font); max-width: 220px;
}
.stats-reset-btn {
    border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: var(--radius-s);
    padding: 6px 12px; font-size: .8rem; color: var(--text-2); cursor: pointer; font-family: var(--font);
}
.stats-reset-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.stats-sentiment-toggle { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); font-weight: 500; }
/* Детализация — бегунок глубины дерева для данных статистики */
.stats-depth { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); font-weight: 500; }
.stats-depth-label { white-space: nowrap; }
.stats-depth-value {
    min-width: 26px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--brand-link);
    background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px;
}
#stats-depth {
    -webkit-appearance: none; appearance: none; width: 110px; height: 4px; border-radius: 999px;
    /* Градиент в сторону большей детализации (вправо — насыщеннее). */
    background: linear-gradient(90deg, var(--border-strong), var(--brand-400)); outline: none; cursor: pointer;
}
#stats-depth::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-600); box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) var(--ease-out);
}
#stats-depth::-webkit-slider-thumb:hover { transform: scale(1.15); }
#stats-depth::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-600); box-shadow: var(--shadow-1);
}
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.switch input { display: none; }
.switch .switch-track {
    position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong);
    transition: background var(--dur-med) var(--ease-out);
}
.switch .switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: var(--shadow-1);
    transition: transform var(--dur-med) var(--ease-out);
}
.switch:active .switch-track::after { width: 19px; }
.switch input:checked + .switch-track { background: var(--brand-600); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:checked:active + .switch-track::after { transform: translateX(13px); }

/* ═══════════════ STATS: виджеты (utb-стиль) ═════════════ */
.stats-widget-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 18px 0; }
.stats-widget-actions { margin-left: auto; display: flex; gap: 4px; }
.stats-icon-btn {
    border: none; background: none; color: var(--text-3); cursor: pointer; padding: 4px;
    border-radius: 6px; display: flex; align-items: center;
}
.stats-icon-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.stats-icon-btn svg { width: 16px; height: 16px; }
.stats-showall-strip {
    display: flex; align-items: center; gap: 8px; padding: 8px 18px;
    font-size: .78rem; color: var(--text-2); border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}
/* Инфо-текст никогда не переносится на вторую строку: иначе появление
   легенды «доля негатива» (узкая мобильная ширина) раздвигало полосу по
   высоте и сдвигало графики (баг 2026-09-06). При нехватке места текст
   уходит в троеточие, чип и ссылка не сжимаются. */
.stats-showall-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-showall-strip .neg-chip { flex-shrink: 0; }
.stats-showall-link { color: var(--brand-link); font-weight: 600; cursor: pointer; margin-left: auto; white-space: nowrap; }
.stats-showall-link:hover { text-decoration: underline; }
.stats-widget-body.with-side-label { display: flex; flex-direction: column; padding: 0; }
.stats-side-label {
    flex: 0 0 18px; display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .68rem; color: var(--text-3); letter-spacing: .04em; user-select: none;
}
.stats-bottom-caption { padding: 8px 18px 12px; text-align: center; font-size: .76rem; color: var(--text-3); }
.theme-row, .cat-row { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.theme-row:hover, .cat-row:hover { background: var(--bg-hover); }

/* сегменты настроения в барах */
.bar-seg { height: 100%; float: left; transition: width 320ms var(--ease-out), background-color 320ms var(--ease-out); }
.bar-seg-neg { background: #dc2626 !important; position: relative; overflow: hidden; }
.bar-fill { transition: width 620ms var(--ease-out); }
.bar-seg-neg-label { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: .64rem; font-weight: 600; color: #fff; white-space: nowrap; pointer-events: none; transition: opacity 220ms var(--ease-out); }

/* легенда «доля негативных» — плавное появление/скрытие */
.neg-chip { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity 280ms var(--ease-out), max-width 320ms var(--ease-out); }
.neg-chip.visible { opacity: 1; max-width: 240px; }

/* ═══════════════ STATS: view-all overlay ════════════════ */
.stats-viewall-overlay {
    position: fixed; inset: 0; z-index: 500; background: var(--bg-app);
    display: none; flex-direction: column;
}
.stats-viewall-overlay.open { display: flex; animation: overlay-in 200ms var(--ease-out); }
.stats-viewall-head {
    display: flex; align-items: center; gap: 14px; padding: 18px 32px;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.stats-viewall-head h2 { font-size: 1.15rem; font-weight: 700; color: var(--text-1); }
.stats-viewall-head .sub { font-size: .8rem; color: var(--text-3); }
.stats-viewall-back { display: inline-flex; align-items: center; gap: 6px; }
.stats-viewall-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 32px; font-size: .8rem; color: var(--text-2); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.stats-viewall-body { flex: 1; overflow-y: auto; padding: 18px 32px 60px; }
.stats-viewall-body .viewall-row { max-width: 1100px; }

/* ═══════════════ STATS: detail drawer ═══════════════════ */
.stats-detail-overlay {
    /* Затемнение — от box-shadow дроуэра, не от подложки (см. glass-секцию ниже). */
    position: fixed; inset: 0; z-index: 600; background: transparent;
    display: none; justify-content: flex-end;
}
.stats-detail-overlay.open { display: flex; animation: overlay-in 180ms var(--ease-out); }
.stats-detail-drawer {
    width: 520px; max-width: 92vw; height: 100%; background: var(--bg-surface);
    box-shadow: var(--shadow-3); display: flex; flex-direction: column;
    animation: drawer-in 220ms var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.stats-detail-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.stats-detail-title { font-size: 1.05rem; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.stats-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .78rem; color: var(--text-2); }
.stats-detail-close {
    position: absolute; top: 14px; right: 14px; border: none; background: var(--bg-hover);
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 14px;
}
.stats-detail-close:hover { background: var(--border); color: var(--text-1); }
.stats-detail-body { flex: 1; overflow-y: auto; padding: 16px 22px 40px; }
.stats-detail-sort-bar { margin: 0 0 12px; }
.stats-detail-ticket {
    border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 14px;
    margin-bottom: 10px; background: var(--bg-subtle);
}
.stats-detail-ticket-summary { font-size: .84rem; line-height: 1.55; color: var(--text-1); }
.stats-detail-ticket-meta { display: flex; gap: 12px; margin-top: 8px; font-size: .74rem; color: var(--text-3); flex-wrap: wrap; }
.stats-detail-open-tree-wrap { margin: 2px 0 16px; }
.stats-detail-open-tree { display: inline-block; }

/* ═══════════════ STATS: glassmorphism-редизайн ══════════ */
/* Фон — живой ambient слой .shell (css/ambient.css): вид прозрачен, переливы
   сквозь стекло виджетов. Своя аврора нужна только полноэкранному оверлею
   «Показать все» — он вне .shell и держит собственный .ambient-bg. */
.stats-viewall-overlay {
    background: var(--bg-aurora);
    background-size: var(--bg-aurora-size);
}

/* Панели первого уровня — матовое стекло поверх авроры */
#view-stats .stats-widget {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out),
                background var(--dur-med) var(--ease-out);
}
#view-stats .stats-widget:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover), var(--glass-highlight);
}

/* Фильтр-бар — второй, более плотный слой стекла (липкий) */
#view-stats .stats-filterbar {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(13, 71, 161, .10), var(--glass-highlight);
}
#view-stats .stats-preset-group {
    background: rgb(var(--glass-tint) / .40);
    border: 1px solid rgb(var(--glass-tint) / .55);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .05);
}
#view-stats .stats-preset.active {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    color: #fff;
    box-shadow: 0 2px 8px rgba(21, 101, 216, .35);
}
#view-stats .stats-custom-dates input,
#view-stats #stats-product,
#view-stats .stats-reset-btn {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-border);
}
#view-stats .stats-reset-btn:hover,
#view-stats .stats-icon-btn:hover,
#view-stats .theme-row:hover,
#view-stats .cat-row:hover {
    background: rgb(var(--glass-tint) / .55);
}

/* Внутренние полосы виджетов — полностью прозрачны к стеклянной
   подложке виджета: без цвета и без рамок */
#view-stats .stats-showall-strip {
    background: transparent;
    border-bottom: none;
}

/* Тултип графиков — тёмное стекло */
.chart-tooltip {
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgb(var(--glass-tint) / .14);
    border-radius: 10px;
}

/* View-all overlay: аврора + стеклянные полосы. Легенда и тело — одно
   стеклянное полотно (единый фон, без разделителя): аврорные «волны»
   в углах закрыты сплошным стеклом. */
.stats-viewall-head {
    background: rgb(var(--glass-tint) / .55);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border-bottom: 1px solid var(--glass-border);
}
.stats-viewall-legend {
    background: rgb(var(--glass-tint) / .34);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: none;
}
.stats-viewall-body {
    background: rgb(var(--glass-tint) / .34);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* Detail drawer — матовое стекло (единый стандарт с модалками). Затемнение —
   box-shadow дроуэра (0 0 0 100vmax), а не подложка оверлея: стекло дроуэра
   не перенимает затемнение. */
.stats-detail-overlay { background: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.stats-detail-drawer {
    background: rgb(var(--glass-tint) / .60);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border-left: 1px solid rgb(var(--glass-tint) / .62);
    box-shadow: 0 0 0 100vmax rgba(13, 40, 90, .28), -16px 0 48px rgba(13, 71, 161, .16), inset 1px 0 0 rgb(var(--glass-tint) / .6);
}
.stats-detail-head { border-bottom: 1px solid rgb(var(--glass-tint) / .55); }
.stats-detail-close { background: rgb(var(--glass-tint) / .55); }
.stats-detail-close:hover { background: rgb(var(--glass-tint) / .80); }
.stats-detail-ticket {
    background: rgb(var(--glass-tint) / .50);
    border: 1px solid rgb(var(--glass-tint) / .62);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(13, 71, 161, .06), inset 0 1px 0 rgb(var(--glass-tint) / .65);
}

/* Фолбэк без backdrop-filter: почти непрозрачные панели */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .home-card, .home-banner, .btn, .channel-modal, .notify-toast,
    .channel-tile,
    .quikchat-role-tool .quikchat-message-content,
    .chat-thinking-block { background: rgb(var(--glass-tint) / .95); }
    .quikchat-input-area { background: var(--bg-subtle); }
    .quikchat-theme-appraiser {
        background: var(--chat-bg);
    }
    .rail { background: var(--bg-surface); }
    #view-stats .stats-widget,
    #view-stats .stats-filterbar,
    .stats-viewall-head { background: rgb(var(--glass-tint) / .94); }
    .stats-detail-drawer { background: var(--bg-surface); }
    .chart-tooltip { background: rgba(15, 23, 42, .92); }
}

@media (prefers-reduced-motion: reduce) {
    #view-stats .stats-widget { transition: none; }
    #view-stats .stats-widget:hover { transform: none; }
}

/* ═══════════════ CHANNELS: плитки (стиль карточек навыков) ═ */
.channels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.channel-tile {
    position: relative; min-height: 118px; border-radius: 16px; cursor: pointer;
    background: rgb(var(--glass-tint) / .50);
    backdrop-filter: blur(18px) saturate(175%);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    padding: 16px; display: flex; flex-direction: column; gap: 9px;
    transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.channel-tile:hover {
    background: rgb(var(--glass-tint) / .62);
    box-shadow: var(--glass-shadow-hover), var(--glass-highlight);
    border-color: rgb(var(--glass-tint) / .85); transform: translateY(-3px);
}
.channel-tile:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-fast); }
.channel-tile-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.channel-tile-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: #fff;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    box-shadow: 0 3px 9px rgba(21, 101, 216, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.channel-tile-icon svg { width: 19px; height: 19px; }
.channel-tile-icon.icon-doc {
    background: linear-gradient(135deg, #2b313b, #4a525e); color: #a9c6f8;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .30), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.channel-tile-icon.icon-vk {
    background: linear-gradient(135deg, #0077ff, #00a2ff); color: #eaf5ff;
    box-shadow: 0 3px 9px rgba(0, 119, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.channel-tile-icon.icon-none {
    background: linear-gradient(135deg, #b6c2d4, #8fa0b8);
    box-shadow: 0 3px 9px rgba(71, 85, 105, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.channel-tile-icon.icon-bc {
    background: linear-gradient(135deg, #1565d8, #0d3f8f); color: #cfe1fb;
}
.channel-tile-name {
    font-weight: 600; font-size: .92rem; color: var(--text-1); line-height: 1.25; letter-spacing: -.008em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-tile-meta {
    font-size: .78rem; color: var(--text-2); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.channel-tile-add {
    border: 1.5px dashed rgb(var(--glass-tint) / .75); background: rgb(var(--glass-tint) / .22);
    align-items: center; justify-content: center; color: var(--text-3);
    flex-direction: row; gap: 8px; font-size: .85rem; font-weight: 500;
}
.channel-tile-add:hover { border-color: var(--brand-500); color: var(--brand-link); background: rgb(var(--glass-tint) / .35); }
.channel-tile-add svg { width: 20px; height: 20px; }
/* drag-and-drop файла на плитку канала */
.channel-tile.drag-over { outline: 2.5px dashed var(--brand-500); outline-offset: -2.5px; transform: translateY(-2px); box-shadow: var(--glass-shadow-hover), var(--glass-highlight); }
.channel-tile.drag-over::after {
    content: 'Бросьте файл для загрузки'; position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(21, 101, 216, .72); color: #fff; font-size: .85rem; font-weight: 600;
    border-radius: inherit; padding: 10px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* модалка канала */
.channel-modal-overlay {
    position: fixed; inset: 0; z-index: 700;
    /* Затемнение даёт НЕ оверлей, а box-shadow самой модалки (0 0 0 100vmax
       в .channel-modal): стекло окна не сэмплирует затемнённый фон — темнеет
       только часть интерфейса вокруг окна, «паразитного» затемнения нет.
       Оверлей оставляет только blur. */
    background: transparent;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.channel-modal-overlay.open { display: flex; animation: overlay-in 180ms var(--ease-out); }
/* Единый стандарт всплывающих окон: полупрозрачное стекло + тонкая светлая
   кромка (1px). Применяется ко всем модалкам (.channel-modal и производные:
   канал, дерево, welcome, votes-chart popup). */
.channel-modal {
    width: 640px; max-width: 100%; max-height: 88vh; overflow-y: auto;
    background: rgb(var(--glass-tint) / .55);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgb(var(--glass-tint) / .62);
    border-radius: 22px;
    box-shadow: 0 0 0 100vmax rgba(13, 40, 90, .30), 0 24px 64px rgba(13, 40, 90, .20), inset 0 1px 0 rgb(var(--glass-tint) / .78);
    padding: 22px 24px; position: relative; animation: modal-in 200ms var(--ease-out);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { transform: translateY(10px) scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }
.channel-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
}
/* В модалке убираем рамку И ПОДЛОЖКУ блока (иначе сплошной #f8fafc-бокс
   внутри стекла читается как широкая двойная рамка). Нижний отступ больше
   не нужен: кнопки живут во flex-футере (.channel-form-footer), а не
   абсолютном позиционировании поверх контента. */
#channel-modal-body .tree-def-block { border: none; box-shadow: none; background: transparent; padding: 0; }
#channel-modal-body .source-sync-area { flex-wrap: wrap; }
#channel-modal-body .source-sync-status { min-width: 0; max-width: 100%; word-break: break-word; }
#channel-modal-body .source-topics-load { margin-top: 8px; }
#channel-modal-body .source-topics-status,
#channel-modal-body .source-topic-upload-hint { margin-top: 6px; font-size: .82rem; color: var(--text-2); }
#channel-modal-body .source-topics-status[data-error="true"] { color: var(--danger, #dc2626); }
#channel-modal-body .chat-upload-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Модалка канала: композиция ─────────────────────────── */
/* Поле «Ссылка на канал»: фиксированный префикс-плашка внутри поля
   (автозаполнение, убрать нельзя) + ввод только короткого имени. */
.link-input-group {
    display: flex; align-items: stretch; width: 100%;
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--glass-input-bg);
    overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.link-input-group:focus-within { border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.link-input-prefix {
    display: flex; align-items: center; padding: 0 4px 0 12px;
    background: rgb(var(--glass-tint) / .5); color: var(--text-2);
    font-size: .95rem; font-weight: 600; white-space: nowrap;
    border-right: 1px solid var(--border); user-select: none; cursor: default;
}
.link-input-group .panel-name-input {
    border: none !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; padding-left: 8px;
}
.link-input-group .panel-name-input:focus { outline: none; }

/* Мета-строка (кол-во сообщений, последняя дата) */
#channel-modal-body .source-info {
    font-size: .8rem; color: var(--text-3, #94a3b8); margin: -4px 0 12px;
    min-height: 1em;
}

/* Ряд действий (загрузка файла + синхронизация) */
.channel-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.channel-actions .chat-upload-area { margin-top: 0; }
.channel-actions .source-sync-area { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.channel-actions .source-sync-status { font-size: .8rem; color: var(--text-2); }

/* Футер формы канала: корзина слева, «Сохранить» справа — в потоке,
   без абсолютного позиционирования (композиция не рассыпается). */
.channel-form-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .25);
}
.channel-form-footer .source-save-status {
    position: static; display: block;  /* перекрывает старый absolute вне модалки */
    flex: 1; min-width: 0; font-size: .8rem; color: #16a34a;
}
#channel-modal-body .source-save-btn {
    position: static; min-width: 110px;
    padding: 8px 18px; border: none; border-radius: 9px;
    background: var(--brand-600, #1565d8); color: #fff;
    font-size: .84rem; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
#channel-modal-body .source-save-btn:hover:not(:disabled) { background: var(--brand-700, #0f52ba); color: #fff; }
#channel-modal-body .source-save-btn:disabled { opacity: .45; cursor: not-allowed; }
#channel-modal-body .source-delete-icon {
    position: static; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); background: transparent; color: var(--text-2);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
#channel-modal-body .source-delete-icon svg { width: 15px; height: 15px; }
#channel-modal-body .source-delete-icon:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* ═══════════════ Загрузочный экран (app-loading-veil) ═══════════════ */
/* Полноэкранная вуаль на время загрузки данных: тот же аврора-фон, что у
   shell — переход в интерфейс бесшовный. Прячется классом .hidden (fade-out;
   visibility переключается после окончания fade, при показе — мгновенно). */
.app-loading-veil {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-aurora); background-size: var(--bg-aurora-size);
    opacity: 1; visibility: visible;
    transition: opacity .35s var(--ease-out), visibility 0s;
}
.app-loading-veil.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.app-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: veil-inner-in .34s var(--ease-out) both; }
@keyframes veil-inner-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.app-loading-badge {
    width: 52px; height: 52px; border-radius: 15px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .6px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(21,101,216,.35);
    margin-bottom: 4px;
}
.app-loading-title { font-size: 1.02rem; font-weight: 650; color: var(--text-1); }
.app-loading-sub { font-size: .82rem; color: var(--text-3); }
.app-loading-spinner {
    width: 22px; height: 22px; margin-top: 6px; border-radius: 50%;
    border: 2.5px solid rgba(21, 101, 216, .18); border-top-color: var(--brand-link);
    animation: app-load-spin .8s linear infinite;
}
@keyframes app-load-spin { to { transform: rotate(360deg); } }

/* ═══════════════ NOTIFY (push-уведомления + инлайн-подтверждения) ═══ */
.notify-stack {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
/* Стеклянный тост: компактная однострочная пилюля — тонкая подложка,
   blur, минимальные отступы; тип читается маленькой цветной меткой-иконкой
   без тяжёлых плашек и полос. */
.notify-toast {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 8px;
    background: rgb(var(--glass-tint) / .46);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgb(var(--glass-tint) / .62);
    border-radius: 12px; padding: 7px 10px 7px 12px;
    box-shadow: 0 8px 22px rgba(13, 40, 90, .12),
                inset 0 1px 0 rgb(var(--glass-tint) / .8);
    font-size: .8rem; color: var(--text, #0f172a); line-height: 1.35;
    opacity: 0; transform: translateX(16px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.notify-toast.notify-in { opacity: 1; transform: translateX(0); }
.notify-toast.notify-out { opacity: 0; transform: translateX(16px); }
.notify-icon {
    flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .58rem; font-weight: 700; color: #fff;
    background: var(--brand-600, #1565d8);
}
.notify-success .notify-icon { background: #16a34a; }
.notify-error .notify-icon { background: #dc2626; }
.notify-body { flex: 1; min-width: 0; word-break: break-word; }
.notify-close {
    flex-shrink: 0; border: none; background: none; color: var(--text-3, #94a3b8);
    cursor: pointer; font-size: .72rem; padding: 0 3px; border-radius: 6px;
    line-height: 1;
}
.notify-close:hover { color: var(--text, #0f172a); }

.notify-confirm-band {
    position: absolute; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 10px; border-radius: inherit;
    background: rgb(var(--glass-tint) / .78);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    opacity: 0; transition: opacity 160ms var(--ease-out);
    text-align: center;
}
.notify-confirm-band.open { opacity: 1; }
.notify-confirm-text { font-size: .88rem; font-weight: 600; color: var(--text, #0f172a); }
.notify-confirm-btns { display: inline-flex; gap: 8px; }
.notify-confirm-yes {
    background: #dc2626; color: #fff; border: none; border-radius: 8px;
    padding: 6px 16px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.notify-confirm-yes:hover { background: #b91c1c; }
.notify-confirm-no {
    background: var(--bg-surface); color: var(--text, #0f172a); border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px; padding: 6px 16px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.notify-confirm-no:hover { background: var(--bg-hover, #f1f5f9); }

/* ═══════════════ BACK TO TOP ════════════════════════════ */.back-to-top {
    position: fixed; right: 28px; bottom: 28px; z-index: 800;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text-2); cursor: pointer;
    box-shadow: var(--shadow-2); display: none; align-items: center; justify-content: center;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.back-to-top.visible { display: flex; animation: overlay-in 160ms var(--ease-out); }
.back-to-top:hover { color: var(--brand-link); transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0) scale(.94); }
.back-to-top svg { width: 18px; height: 18px; }

/* ═══════════════ GLOBAL POLISH ══════════════════════════ */
/* Скроллбары: тонкие, не отвлекают */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.32); border-radius: 8px;
    border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }

/* Единые focus-кольца */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring);
}
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Пустой чат: приглашение вместо белого листа */
.quikchat-messages-area:empty::before {
    content: 'Спросите ассистента о продукте — например: «Что сейчас больше всего беспокоит пользователей?»';
    margin: auto; max-width: 400px; text-align: center;
    color: var(--text-3); font-size: .88rem; line-height: 1.6; padding: 24px;
}

/* Меньше движения для тех, кто просит */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1100px) {
    .stats-widget { grid-column: span 12; }
}

/* ═════════ Чат ассистента: вложения и сброс истории ═════════ */
#assistant-chat-container { position: relative; }

.chat-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: flex;
    gap: 6px;
}
.chat-tool-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgb(var(--glass-tint) / .92);
    background: rgb(var(--glass-tint) / .80);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 3px 10px rgba(13, 71, 161, .16);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: background var(--dur-fast,140ms) var(--ease-out,ease), color var(--dur-fast,140ms) var(--ease-out,ease), transform var(--dur-fast,140ms);
}
.chat-tool-btn svg { width: 16px; height: 16px; }
.chat-tool-btn:hover { background: var(--brand-600, #1565d8); color: #fff; border-color: transparent; }
.chat-tool-btn:active { transform: scale(.94); }

.chat-attachments {
    position: absolute;
    left: 8px; right: 48px;
    bottom: 56px;
    z-index: 5;
    display: flex; flex-wrap: wrap; gap: 6px;
    pointer-events: none;
}
.chat-attachments[style*="display: none"] { display: none !important; }
.chat-attach-chip {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 220px;
    padding: 3px 4px 3px 8px;
    border-radius: 999px;
    background: var(--brand-50, #eef4ff);
    border: 1px solid var(--brand-200, #bcd0f7);
    color: var(--brand-ink, #0d47a1);
    font-size: 12px; line-height: 1.4;
}
.chat-attach-chip-ico { font-weight: 700; color: var(--brand-link, #1565d8); }
.chat-attach-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-chip-x {
    border: none; background: rgba(21,101,216,.12); color: var(--brand-ink, #0d47a1);
    width: 18px; height: 18px; border-radius: 50%;
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.chat-attach-chip-x:hover { background: var(--brand-600, #1565d8); color: #fff; }

.chat-toast {
    position: absolute;
    left: 50%; bottom: 70px;
    transform: translate(-50%, 10px);
    z-index: 8;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    max-width: 80%;
    text-align: center;
}
.chat-toast.show { opacity: .95; transform: translate(-50%, 0); }

.chat-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(21,101,216,.10);
    border: 2px dashed var(--brand-600, #1565d8);
    border-radius: 12px;
    display: none;
    align-items: center; justify-content: center;
    pointer-events: none;
}
.chat-drop-overlay.active { display: flex; }
.chat-drop-inner {
    text-align: center;
    color: var(--brand-ink, #0d47a1);
    font-weight: 600; font-size: 14px;
}
.chat-drop-ico { font-size: 34px; margin-bottom: 6px; }

/* ─── File card в сообщении (как DeepSeek) ─── */
.chat-file-card {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(21,101,216,.06);
    border: 1px solid rgba(21,101,216,.15);
    margin-bottom: 6px;
    max-width: 260px;
}
.chat-file-ico { flex-shrink: 0; }
.chat-file-info { overflow: hidden; min-width: 0; }
.chat-file-name {
    font-size: 13px; font-weight: 600; color: var(--text, #0f172a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-file-meta {
    font-size: 11px; color: var(--text-secondary, #64748b);
    margin-top: 1px;
}

/* ─── Thinking / reasoning block ─── */
.chat-thinking-block {
    border-radius: 10px;
    background: rgb(var(--glass-tint) / .50);
    border: 1px solid rgb(var(--glass-tint) / .68);
    box-shadow: 0 2px 8px rgba(13, 71, 161, .06);
    margin-bottom: 6px;
    overflow: hidden;
}
.chat-thinking-header {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    cursor: pointer; user-select: none;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary, #64748b);
    transition: background 140ms var(--ease-out, ease);
}
.chat-thinking-header:hover { background: rgb(var(--glass-tint) / .45); }
.chat-thinking-ico { width: 14px; height: 14px; color: var(--brand-link, #1565d8); }
.chat-thinking-chev {
    width: 12px; height: 12px; margin-left: auto;
    transition: transform 200ms var(--ease-out, ease);
    color: var(--text-secondary, #64748b);
}
.chat-thinking-expanded .chat-thinking-chev { transform: rotate(180deg); }
.chat-thinking-body {
    display: none;
    padding: 0 10px 8px;
    font-size: 12.5px; line-height: 1.55;
    color: var(--text-secondary, #64748b);
    white-space: pre-wrap; word-wrap: break-word;
}
.chat-thinking-expanded .chat-thinking-body { display: block; }

/* ─── Streaming: плавное появление новых блоков + каретка ─── */
@keyframes qc-block-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.qc-block-in { animation: qc-block-in 240ms var(--ease-out) both; }
/* Каретка в конце стримящегося ответа — мягкий пульс, не прыжок.
   Только текстовые блоки: внутри <ul>/<pre> псевдоэлемент сломал бы разметку. */
.qc-streaming .quikchat-message-content > p:last-child::after {
    content: ''; display: inline-block; width: 2px; height: 1em;
    margin-left: 2px; vertical-align: -0.12em;
    background: var(--brand-400); border-radius: 1px;
    animation: qc-caret-pulse 1.1s var(--ease-out) infinite;
}
@keyframes qc-caret-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
/* После завершения стрима — каретка исчезает, никакой анимации-«прыжка» */
.chat-stream-done .quikchat-message-content > p:last-child::after { content: none; }

/* ─── Индикатор активных фоновых инструментов ───
   min-height + padding-right: полоска захватывает зону абсолютных кнопок
   чата (.chat-tools, top:8px;right:8px) — кнопки визуально сидят ВНУТРИ
   полоски, а не наползают на её содержимое. */
.chat-running-tools {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    min-height: 46px;
    padding: 6px 90px 6px 12px;
    background: rgb(var(--glass-tint) / .42);
    border-bottom: 1px solid rgb(var(--glass-tint) / .60);
}
.chat-running-tool {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-50, #eef4ff);
    border: 1px solid var(--brand-200, #bcd0f7);
    color: var(--brand-ink, #0d47a1);
    font-size: 12px; font-weight: 600;
}
.chat-running-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand-600, #1565d8);
    animation: chat-pulse 1.4s var(--ease-out, ease) infinite;
}
.chat-running-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
@keyframes chat-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.3); }
}

/* ═════════ Конкуренты — battlecard ═════════ */
.bc-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.bc-back-btn, .bc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--border, rgba(15,23,42,.12));
    background: var(--surface, #fff); color: var(--text-secondary, #475569);
    font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: background var(--dur-fast,140ms) var(--ease-out,ease), color var(--dur-fast,140ms), transform var(--dur-fast,140ms);
}
/* Кнопки «Сохранить» с единым откликом «Сохранено ✓»: фиксированная ширина,
   чтобы более широкая подпись не растягивала кнопку. */
#bc-save, #llm-save { min-width: 118px; justify-content: center; box-sizing: border-box; }
.bc-back-btn:hover, .bc-btn:hover { background: var(--brand-50, #eef4ff); color: var(--brand-link, #1565d8); }
.bc-btn:active { transform: scale(.97); }
.bc-btn.primary { background: var(--brand-600, #1565d8); color: #fff; border-color: var(--brand-link, #1565d8); }
.bc-btn.primary:hover { background: var(--brand-700, #0f4ec0); color: #fff; }
.bc-btn.danger { color: #c0392b; }
.bc-btn.danger:hover { background: #fdecea; color: #c0392b; }
.bc-edit-toggle.on { background: var(--brand-50, #eef4ff); color: var(--brand-link, #1565d8); border-color: var(--brand-200, #bcd0f7); }
.bc-title-input {
    flex: 1; min-width: 180px;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border, rgba(15,23,42,.12));
    background: var(--surface, #fff); color: var(--text, #0f172a);
    font-size: 14px; font-weight: 600;
}
.bc-title-input:focus { outline: none; border-color: var(--brand-link, #1565d8); box-shadow: var(--focus-ring, 0 0 0 3px rgba(21,101,216,.18)); }

.bc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bc-list-item {
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(15,23,42,.10));
    border-radius: 12px; padding: 18px;
    cursor: pointer; transition: border-color var(--dur-fast,140ms), box-shadow var(--dur-fast,140ms), transform var(--dur-fast,140ms);
}
.bc-list-item:hover { border-color: var(--brand-200, #bcd0f7); box-shadow: 0 4px 14px rgba(15,23,42,.06); transform: translateY(-1px); }
.bc-list-item h3 { font-size: 16px; margin-bottom: 6px; color: var(--text, #0f172a); }
.bc-list-item .bc-meta { font-size: 12.5px; color: var(--text-muted, #64748b); }
.bc-list-item .bc-comp { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--brand-50, #eef4ff); color: var(--brand-ink, #0d47a1); margin: 2px 4px 0 0; }

.bc-nav {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg, #f6f8fb);
    display: flex; gap: 4px; overflow-x: auto;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08));
    margin: 0 -8px 16px; padding: 8px 8px 0;
}
.bc-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 16px; font-size: 13.5px; font-weight: 600;
    color: var(--text-muted, #64748b);
    border-bottom: 2px solid transparent; white-space: nowrap;
    border-radius: 0;
    transition: color var(--dur-fast,140ms), border-color var(--dur-fast,140ms);
}
.bc-tab:hover { color: var(--text, #0f172a); }
.bc-tab.active { color: var(--brand-link, #1565d8); border-bottom-color: var(--brand-link, #1565d8); }
.bc-tab .bc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.bc-dot.you { background: #10b981; } .bc-dot.them { background: #e2574c; } .bc-dot.ov { background: var(--brand-600, #1565d8); }

.bc-pane { display: none; }
.bc-pane.active { display: block; animation: bc-fade 200ms ease; }
@keyframes bc-fade { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none; } }

.bc-section { font-size: 18px; font-weight: 700; margin: 8px 0 14px; color: var(--text, #0f172a); letter-spacing:-.2px; }
.bc-section .bc-num { color: var(--brand-link, #1565d8); margin-right: 8px; }
.bc-sub { font-size: 12.5px; color: var(--text-muted, #64748b); margin: -8px 0 16px; }
.bc-block { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 26px 0 10px; color: var(--text, #0f172a); }
.bc-card { background: var(--surface, #fff); border:1px solid var(--border, rgba(15,23,42,.08)); border-radius: 12px; padding: 18px; margin-bottom: 14px; }

.bc-table-wrap { overflow-x: auto; border: 1px solid var(--border, rgba(15,23,42,.08)); border-radius: 12px; }
table.bc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
table.bc-table th, table.bc-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--border, rgba(15,23,42,.08)); vertical-align: top; }
table.bc-table thead th { background: var(--bg, #f6f8fb); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #64748b); font-weight: 700; position: sticky; top: 0; }
table.bc-table th.bc-col-you { border-top: 3px solid #10b981; color: var(--text, #0f172a); font-size: 13px; }
table.bc-table th.bc-col-them { border-top: 3px solid #e2574c; color: var(--text, #0f172a); font-size: 13px; }
table.bc-table td.bc-cat { color: var(--text-muted, #64748b); font-weight: 600; font-size: 12px; }
table.bc-table tbody tr:hover { background: var(--brand-50, #f6faff); }
table.bc-table td[contenteditable="true"] { outline-offset: -2px; }
table.bc-table td[contenteditable="true"]:focus { outline: 2px solid var(--brand-600, #1565d8); background: var(--surface); }

.bc-pill { display:inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .3px; margin-right: 6px; vertical-align: middle; }
.bc-pill.you { background: rgba(16,185,129,.14); color: #059669; }
.bc-pill.them { background: rgba(226,87,76,.14); color: #c0392b; }
.bc-pill.tie { background: rgba(245,158,11,.14); color: #b7791f; }
.bc-pill.na { background: rgba(100,116,139,.12); color: var(--text-muted, #64748b); }

.bc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 820px){ .bc-grid-2, .bc-grid-3 { grid-template-columns: 1fr; } }

.bc-wl { border-radius: 12px; padding: 16px; border: 1px solid; }
.bc-wl.you { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.28); }
.bc-wl.them { background: rgba(226,87,76,.07); border-color: rgba(226,87,76,.28); }
.bc-wl h4 { font-size: 13.5px; margin-bottom: 8px; display:flex; align-items:center; gap:8px; }
.bc-wl ul { list-style:none; margin:0; padding:0; }
.bc-wl li { font-size: 13px; color: var(--text-secondary, #475569); padding: 5px 0 5px 20px; position: relative; }
.bc-wl.you li::before { content:"▲"; position:absolute; left:0; color:#10b981; font-size:10px; top:6px; }
.bc-wl.them li::before { content:"▼"; position:absolute; left:0; color:#e2574c; font-size:10px; top:6px; }

.bc-list-rows { list-style: none; margin: 0; padding: 0; }
.bc-list-rows li { padding: 12px 0; border-bottom: 1px solid var(--border, rgba(15,23,42,.08)); font-size: 13.5px; color: var(--text-secondary, #475569); }
.bc-list-rows li:last-child { border-bottom: none; }
.bc-list-rows .bc-li-head { font-weight: 700; color: var(--text, #0f172a); font-size: 14px; margin-bottom: 4px; }
.bc-list-rows .bc-li-sub { font-size: 12px; color: var(--text-muted, #64748b); }

.bc-profile-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media (max-width:820px){ .bc-profile-grid { grid-template-columns: repeat(2,1fr);} }
.bc-profile-item { background: var(--bg,#f6f8fb); border:1px solid var(--border, rgba(15,23,42,.08)); border-radius: 10px; padding: 12px; }
.bc-profile-item .k { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color: var(--text-muted,#64748b); margin-bottom:4px; font-weight:700; }
.bc-profile-item .v { font-size: 13.5px; font-weight: 600; color: var(--text,#0f172a); word-break: break-word; }

.bc-hero-name { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.bc-hero-ess { font-size: 13px; color: var(--brand-600,#1565d8); font-weight: 600; margin-bottom: 8px; }
.bc-hero-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted,#64748b); font-weight: 700; margin: 12px 0 6px; }
.bc-hero p { font-size: 13px; color: var(--text-secondary,#475569); margin: 0; }
.bc-callout { background: linear-gradient(135deg, rgba(21,101,216,.08), rgba(21,101,216,.02)); border:1px solid rgba(21,101,216,.25); border-radius: 12px; padding: 16px; margin: 14px 0; }
.bc-callout .bc-label { font-size: 11px; text-transform: uppercase; letter-spacing:.5px; color: var(--brand-600,#1565d8); font-weight: 700; margin-bottom: 6px; }
.bc-callout p { font-size: 13.5px; color: var(--text-secondary,#475569); margin:0; }
.bc-dirty { display:none; margin-left: auto; font-size: 12px; color: var(--brand-600,#1565d8); font-weight: 600; }
.bc-toolbar.dirty .bc-dirty { display: inline; }

/* ═════════ Battlecard: раскладки в стиле эталона (светлая тема) ═════════ */
table.bc-table td.bc-cat-cell { color: var(--text,#0f172a); }
table.bc-table td.bc-cat-cell .bc-cat { color: var(--text-muted,#64748b); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }

.bc-feat-list { list-style: none; margin: 0; padding: 0; }
.bc-feat-list li { font-size: 13px; color: var(--text-secondary,#475569); padding: 4px 0 4px 22px; position: relative; }
.bc-feat-list li::before { content: "✓"; position: absolute; left: 0; top: 4px; color: #10b981; font-weight: 700; }
.bc-feat-list span[contenteditable] { display:block; }

/* hero cards */
.bc-hero-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (orientation: portrait), (hover: none) and (pointer: coarse){ .bc-hero-grid { grid-template-columns: 1fr; } }
.bc-hero-card { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 12px; padding: 20px; }
.bc-hero-card.you { border-color: rgba(16,185,129,.4); box-shadow: 0 0 0 1px rgba(16,185,129,.12); }
.bc-hero-card.them { border-color: rgba(226,87,76,.22); }
.bc-hero-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--text-muted,#64748b); margin-bottom: 8px; }
.bc-hero-card.you .bc-hero-tag { color: #059669; }
.bc-hero-card.them .bc-hero-tag { color: #c0392b; }
.bc-hero-counter { font-size: 12.5px; color: var(--text-secondary,#475569); margin-top: 14px; padding: 10px 12px; background: var(--bg,#f6f8fb); border-radius: 8px; border-left: 3px solid var(--brand-600,#1565d8); line-height: 1.5; }

/* architecture blocks */
.bc-arch-block { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 14px; }
.bc-arch-head { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-600,#1565d8); margin-bottom: 8px; }

/* timeline (релизы) */
.bc-timeline { position: relative; padding-left: 22px; }
.bc-timeline::before { content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background: var(--border,rgba(15,23,42,.16)); }
.bc-release { position: relative; margin-bottom: 18px; }
.bc-release::before { content:""; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%; background: var(--brand-600,#1565d8); border:3px solid var(--bg,#f6f8fb); box-shadow: 0 0 0 2px var(--brand-600,#1565d8); }
.bc-release-date { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-600,#1565d8); font-weight: 700; }
.bc-release-title { font-size: 14.5px; font-weight: 700; margin: 3px 0 4px; color: var(--text,#0f172a); }
.bc-release-impact { font-size: 13px; color: var(--text-secondary,#475569); }

/* diff (дифференциация) */
.bc-diff-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.bc-diff-col.them h4 { color: #c0392b; }
.bc-diff-col.you h4 { color: #059669; }
.bc-diff-item { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.bc-diff-area { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--text,#0f172a); }
.bc-diff-body { font-size: 13px; color: var(--text-secondary,#475569); }
.bc-diff-counter { font-size: 12.5px; color: var(--text-muted,#64748b); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border,rgba(15,23,42,.16)); }
.bc-diff-counter b { color: var(--text-secondary,#475569); }

/* pricing box */
.bc-price-box { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 4px 16px; }
.bc-price-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border,rgba(15,23,42,.08)); font-size:13.5px; }
.bc-price-row:last-child { border-bottom:none; }
.bc-price-row .k { color: var(--text-muted,#64748b); }
.bc-price-row .v { color: var(--text-secondary,#475569); font-weight: 600; text-align: right; }

/* talk tracks */
.bc-tt { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 16px; }
.bc-tt-scenario { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-600,#1565d8); font-weight: 700; margin-bottom: 8px; }
.bc-tt-text { font-size: 13.5px; color: var(--text-secondary,#475569); }

/* objections */
.bc-obj { background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 14px 16px; }
.bc-obj-q { font-size: 13.5px; font-weight: 600; color: #b7791f; margin-bottom: 6px; }
.bc-obj-q::before { content:"«"; } .bc-obj-q::after { content:"»"; }
.bc-obj-a { font-size: 13px; color: var(--text-secondary,#475569); }

/* landmines */
.bc-landmine { display:flex; gap:12px; background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-left:3px solid #e2574c; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.bc-lm-q { font-size: 20px; color: #e2574c; font-weight: 700; line-height: 1; }
.bc-lm-text { font-size: 13.5px; color: var(--text,#0f172a); font-weight: 600; }
.bc-lm-why { font-size: 12px; color: var(--text-muted,#64748b); margin-top: 6px; font-style: italic; }

/* you actions */
.bc-actions { display: grid; gap: 10px; }
.bc-action { display: flex; gap: 12px; background: var(--surface,#fff); border:1px solid var(--border,rgba(15,23,42,.08)); border-radius: 10px; padding: 14px; }
.bc-action-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-600,#1565d8); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size: 13px; }
.bc-action-t { font-weight: 700; font-size: 14px; color: var(--text,#0f172a); margin-bottom: 3px; }
.bc-action-d { font-size: 13px; color: var(--text-secondary,#475569); }

/* ═══════════════ MOBILE (вертикальный экран / мобильное устройство) ════
   Адаптация десктопной композиции под узкий вертикальный формат:
   — рельс скрыт, открывается бургером и наплывает поверх контента;
   — вкладки-«простыни»: контент во всю ширину на единой белой подложке,
     фон-аврора виден только сверху (там же бургер);
   — плитки статистики/каналов/истории сливаются в простыню (без стекла
     и зазоров, разделители-волоски);
   — строки баров: название+значение на первой линии, тонкая полоска
     во всю ширину — на второй;
   — настройки: панель разделов наплывает слева и заезжает после выбора;
   — деревья: правая панель — оверлей во всю ширину поверх treemap;
   — размеры элементов зафиксированы (инпуты 16px — без авто-зума iOS,
     тач-цели ≥ 40px), высоты — в dvh (100vh на мобильных включает зону
     под системной панелью браузера → низ рельса обрезался). */
.rail-burger { display: none; }
.mobile-nav-scrim { display: none; }
.skills-pill { display: none; }

/* Мобильная версия: вертикальный экран (любая ширина) или мобильное
   устройство (тач без hover) при любом соотношении сторон.
   JS-зеркало условия — window.isMobileView() (mobileDetect.js). */
@media (orientation: portrait), (hover: none) and (pointer: coarse) {

    /* ── Высоты: динамический вьюпорт ─────────────────────────── */
    .shell, .shell-main, .rail { height: 100dvh; }

    /* ── Бургер ───────────────────────────────────────────────── */
    .rail-burger {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 650;
        width: 42px; height: 42px; padding: 0; border-radius: 13px;
        background: rgb(var(--glass-tint) / .82);
        backdrop-filter: blur(16px) saturate(170%);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        border: 1px solid rgb(var(--glass-tint) / .72);
        box-shadow: 0 4px 16px rgba(13, 40, 90, .14), var(--glass-highlight);
        color: var(--text-1); cursor: pointer;
    }
    .rail-burger svg { width: 20px; height: 20px; }
    .rail-burger:active { transform: scale(.94); }

    /* ── Рельс → наплывающая панель ───────────────────────────── */
    .rail {
        position: fixed; left: 0; top: 0; z-index: 630;
        transform: translateX(-110%); visibility: hidden;
        transition: transform .26s var(--ease-out), visibility 0s linear .26s;
        background: rgb(var(--glass-tint) / .78);
        box-shadow: 12px 0 40px rgba(13, 40, 90, .18);
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    body.rail-open .rail {
        transform: none; visibility: visible;
        transition: transform .26s var(--ease-out);
    }
    .rail-item svg { width: 24px; height: 24px; }

    /* Скрим под выезжающими панелями (рельс / разделы настроек) */
    .mobile-nav-scrim {
        display: block; position: fixed; inset: 0; z-index: 605;
        background: rgba(15, 23, 42, .22);
        opacity: 0; pointer-events: none;
        transition: opacity .22s var(--ease-out);
    }
    body.rail-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; }

    /* Flyout выбора дерева/раздела — поверх рельса и скрима; почти
       непрозрачный: затемнение скрима в его области не считывается
       (стекло на затемнённой подложке выглядело грязно). */
    .rail-tree-menu { z-index: 645; background: rgb(var(--glass-tint) / .94); }

    /* ── Вкладки-«простыни»: белая подложка во весь экран, без островка
          фона сверху; заголовок — в одной линии с плавающим бургером ── */
    .view-scroll { padding: 0; }
    .view-sheet, .home-hero {
        max-width: none; margin: 0; width: 100%; min-height: 100%;
        background: var(--bg-surface);
        padding: 12px 14px 44px;
    }
    .page-head { margin-bottom: 14px; padding-left: 52px; }
    .page-head h1 { font-size: 1.3rem; }

    /* ── Статистика: плитки сливаются в простыню ──────────────── */
    .stats-grid { gap: 0; }
    #view-stats .stats-widget {
        background: transparent; border: none; border-radius: 0;
        box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
        min-height: 0;
    }
    #view-stats .stats-widget:hover { background: transparent; transform: none; box-shadow: none; }
    #view-stats .stats-widget + .stats-widget { border-top: 1px solid var(--border); }
    .stats-widget-head { padding: 14px 4px 0; }
    .stats-widget-body { padding: 8px 4px 12px; }
    .stats-widget-body.with-side-label { padding: 0; }
    .stats-legend { padding: 0 4px 12px; }
    #w-trends-body, #w-sources-body { height: 220px; }

    /* Фильтр-бар: не липкий, пресеты — одной строкой с горизонтальным скроллом */
    .stats-filterbar { position: static; padding: 8px; gap: 6px; margin-bottom: 12px; }
    #stats-product { flex: 1 1 100%; max-width: 100%; }
    .stats-preset-group {
        flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .stats-preset-group::-webkit-scrollbar { display: none; }
    .stats-preset { padding: 8px 13px; font-size: .85rem; flex-shrink: 0; }
    .stats-sentiment-toggle { margin-left: 0; }

    /* Строки баров: название+значение — первая линия, полоска — вторая */
    .theme-rows { padding: 6px 2px 4px !important; gap: 4px !important; }
    .theme-row { flex-wrap: wrap; gap: 3px 8px !important; padding: 6px 2px !important; margin: 0 !important; }
    /* basis 0: название всегда делит первую линию со значением (иначе
       длинное имя выталкивало значение на вторую линию), обрезка — ellipsis. */
    .theme-row-name { order: 1; flex: 1 1 0 !important; font-size: .82rem !important; }
    .theme-row-val { order: 2; flex: 0 0 auto !important; font-size: .82rem !important; }
    .theme-row-bar { order: 3; flex: 0 0 100% !important; height: 9px !important; }
    .bar-seg-neg-label { display: none; }

    /* View-all / detail drawer статистики — во всю ширину */
    .stats-viewall-head { padding: 14px 16px 14px 64px; }
    .stats-viewall-legend { padding: 10px 16px; }
    .stats-viewall-body { padding: 12px 14px 60px; }
    .stats-detail-drawer { width: 100%; max-width: 100%; }

    /* ── Главная: чат — главное. Без приветствия и навыков (навыки — в
          шторке из поля ввода), чат во всю ширину до нижнего края,
          страница без прокрутки; баннер — островок сверху ── */
    #view-home .view-scroll { overflow: hidden; }
    .home-hero {
        display: flex; flex-direction: column;
        height: 100%; min-height: 0; padding: 0;
    }
    .home-greeting, .home-subgreeting, .home-skills-head, .home-cards { display: none; }
    .home-banner { flex-wrap: wrap; gap: 10px; padding: 12px; margin: calc(58px + env(safe-area-inset-top)) 10px 0; }
    .home-banner-text { flex: 1 1 calc(100% - 48px); }
    .home-banner-sub { min-height: 0; }
    #home-banner-close { margin-left: auto; }
    .home-banner .btn { min-height: 40px; }
    .home-chat-card {
        flex: 1; min-height: 0; height: auto;
        margin: 10px 0 0; border-radius: 0;
    }
    .home-chat-card .quikchat-theme-appraiser { border-radius: 0; border: none; box-shadow: none; }
    .quikchat-messages-area { padding: 18px 12px 8px; }

    /* ── Каналы / История: строки простыни ────────────────────── */
    .channels-grid { grid-template-columns: 1fr; gap: 0; }
    .channel-tile {
        min-height: 0; border-radius: 0; border: none; box-shadow: none;
        background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
        border-bottom: 1px solid var(--border); padding: 14px 2px;
    }
    /* Метка типа — ровно под названием (иконка 38px + зазор 11px) */
    .channel-tile-meta { margin-left: 49px; }
    .history-item {
        border-radius: 0; box-shadow: none; background: transparent;
        border: none; border-bottom: 1px solid var(--border);
        margin-bottom: 0; padding: 12px 2px;
    }

    /* ── Настройки: контент на всю ширину (разделы — flyout у рельса) ── */
    .settings-content-col { padding: 12px 16px 40px; }
    /* Заголовок раздела — вровень с плавающим бургером (справа от него). */
    .settings-content-col h2 { padding-left: 52px; }

    /* ── Деревья: правая панель — оверлей во всю ширину ───────── */
    #view-trees .left-side { padding-top: calc(56px + env(safe-area-inset-top)); }
    #view-trees .properties-panel {
        position: absolute; top: 0; right: 0; bottom: 0;
        width: min(460px, 100%); height: auto; z-index: 80;
        border-left: none; box-shadow: -14px 0 44px rgba(13, 40, 90, .22);
    }
    /* Бургер плавает поверх открытой панели — табам нужен отступ слева. */
    #view-trees .properties-panel .tabs { padding-left: 60px; }
    #view-trees .resizer { display: none; }

    /* ── Фиксированные размеры мелких элементов ───────────────── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select, textarea { font-size: 16px !important; }
    .btn { min-height: 40px; }
    .tab-btn { font-size: .95rem; padding: 12px 9px; }
    .tab-content { padding: 14px 12px; }
    .make-root-btn { padding: 13px 0; font-size: .95rem; }
    .tree-node-mini { width: min(332px, calc(100vw - 24px)); max-height: 76dvh; }

    /* ── Модалки / тосты / прочее ─────────────────────────────── */
    .channel-modal-overlay { padding: 8px; }
    .channel-modal { padding: 18px 14px; border-radius: 18px; max-height: 92dvh; }
    .notify-stack { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }

    /* ── Бургер скрывается, когда панель выдвинута (не накрывает логотип) ── */
    body.rail-open .rail-burger {
        opacity: 0; pointer-events: none; visibility: hidden;
        transition: opacity .18s var(--ease-out), visibility 0s linear .18s;
    }

    /* Кнопка «вниз» чата — у правого края, не перекрывает текст сообщений */
    .quikchat-scroll-bottom { left: auto; right: 12px; transform: none; }

    /* ── Поле ввода чата: ряд пилюль под текстбоксом (стиль DeepSeek) ── */
    .quikchat-input-area { flex-wrap: wrap; row-gap: 8px; }
    .quikchat-input-textbox { flex: 1 1 100%; order: 1; }
    .quikchat-input-send-btn { order: 3; margin-left: auto; }
    .skills-pill {
        order: 2; display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 14px; border-radius: 999px; cursor: pointer;
        border: 1px solid rgba(21, 101, 216, .35); background: rgb(var(--glass-tint) / .65);
        color: var(--brand-link); font-size: .84rem; font-weight: 600; font-family: var(--font);
    }
    .skills-pill svg { width: 16px; height: 16px; }
    .skills-pill:active { transform: scale(.96); }
}

/* ── Нижняя шторка (bottom sheet): навыки, миниатюра узла дерева ── */
.msheet-overlay {
    position: fixed; inset: 0; z-index: 660;
    background: rgba(15, 23, 42, .30);
    display: flex; align-items: flex-end;
    opacity: 0; transition: opacity .22s var(--ease-out);
}
.msheet-overlay.open { opacity: 1; }
.msheet {
    width: 100%; height: 92dvh; box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 44px rgba(13, 40, 90, .25);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(8%); transition: transform .26s var(--ease-out);
}
.msheet-overlay.open .msheet { transform: none; }
.msheet-grabber {
    width: 40px; height: 5px; border-radius: 999px; flex-shrink: 0;
    background: var(--border-strong); margin: 10px auto 2px;
}
.msheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; flex-shrink: 0; }
.msheet-head-bare { display: none; }
.msheet-title { font-size: 1.05rem; font-weight: 700; color: var(--text-1); }
.msheet-close {
    margin-left: auto; width: 32px; height: 32px; border-radius: 9px;
    border: none; background: var(--bg-hover); color: var(--text-2);
    font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.msheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 24px; }

/* Список навыков в шторке */
.msheet-skills { display: flex; flex-direction: column; }
.msheet-skill {
    display: flex; gap: 12px; align-items: flex-start; width: 100%;
    text-align: left; padding: 13px 4px; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--border);
    font-family: var(--font);
}
.msheet-skill:active { background: var(--bg-hover); }
.msheet-skill-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--brand-50); color: var(--brand-link);
    display: flex; align-items: center; justify-content: center;
}
.msheet-skill-icon svg { width: 18px; height: 18px; }
.msheet-skill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msheet-skill-title { font-weight: 600; font-size: .92rem; color: var(--text-1); }
.msheet-skill-title .skill-badge { position: static; margin-left: 6px; }
.msheet-skill-desc { font-size: .8rem; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.msheet-skill-cmd {
    font-size: .72rem; color: var(--brand-ink); font-family: ui-monospace, monospace; margin-top: 4px;
}
.msheet-skill.is-disabled { opacity: .55; }

/* Миниатюра узла дерева внутри шторки: снимаем плавающее позиционирование */
.msheet-node .msheet-body { padding: 0; }
.msheet-node .tree-node-mini {
    position: static; width: auto; max-height: none; overflow: visible;
    border: none; border-radius: 0; box-shadow: none;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: none;
}
.msheet-node .mini-body { overflow-y: visible; }

/* ═══════════════ ТЁМНАЯ ТЕМА: компонентные оверрайды ═══════════════
   Токены — в блоке [data-theme="dark"] у :root; здесь — то, что токенами
   не выразить: мини-панель узла, поля-исключения
   (подписи/обводки плиток дерева переехали в css/treeTiles.css). */
/* Оверрайды плиток дерева (node-label/node-rect) — в css/treeTiles.css. */
/* Чат-тост — тёмная пилюля; на тёмном фоне нужна кромка, иначе сливается. */
[data-theme="dark"] .chat-toast { box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Карточки канонических запусков анализа, общие для всех точек запуска. */
.analysis-run-cards { display: grid; gap: 8px; padding: 8px 12px; max-height: 36vh; overflow-y: auto; }
.analysis-run-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); }
.analysis-run-card progress { width: calc(100% - 48px); margin-right: 8px; accent-color: var(--accent, #3b82f6); }
.analysis-run-origin, .analysis-run-source, .analysis-run-stage { color: var(--text-3); font-size: 12px; }
.analysis-run-status { margin: 4px 0; font-size: 13px; }
.analysis-run-error, .chat-completion-notice { color: var(--text-2); font-size: 13px; padding: 6px 0; }
.analysis-run-card button, .process-analysis-link { margin-top: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); color: var(--text-1); cursor: pointer; }
.analysis-run-card button:disabled { opacity: .55; cursor: default; }