/* Тёмная тема (по умолчанию) и светлая — через [data-theme="light"] */
:root {
  --bg:#171717; --panel:#212121; --panel2:#303030; --line:#424242;   /* палитра тёмной темы ChatGPT (была почти чёрная) */
  --txt:#ececec; --mut:#b4b4b4; --acc:#ff8a3d; --acc-soft:#3a2a1c;   /* акцент — бренд-оранжевый, сохранён */
  /* --acc-fg — текст/иконки НА цветных заливках (кнопки, бейджи). Владелец выбрал белый и в тёмной теме
     (тёмный на оранжевом смотрится хуже); это ниже WCAG AA (2.35:1 на #ff8a3d) — осознанный трейд-офф. */
  --acc-fg:#ffffff;
  --ok:#2ecc71; --warn:#e0a32e; --danger:#ff5d5d;
  --info:#4a90c9;   /* «скоро»-чипы и прочие информационные акценты: 4.7:1 на var(--panel) */
  /* Движки дашборда (dataviz-скилл, dark-слоты, валидировано validate_palette.js) */
  --eng-auto:#3987e5; --eng-claude:#199e70; --eng-chatgpt:#c98500; --eng-agents:#9085e9; --eng-dev:#e66767; --eng-other:#8a8a82;
}
[data-theme="light"] {
  --bg:#ffffff; --panel:#ffffff; --panel2:#ffffff; --line:#e2e2e4;
  /* Акцент — фирменный #e8720c: затемнение до AA (#b45708) владелец отверг («грязно-рыжий»).
     3.07:1 на белом — осознанный трейд-офф в пользу бренда, как и белый текст на кнопках тёмной темы. */
  --txt:#1b1b1d; --mut:#6c6c70; --acc:#e8720c; --acc-soft:#fff1e6;
  --acc-fg:#ffffff;
  --ok:#16b85c; --warn:#b9802a; --danger:#d63b3b;
  --info:#2b6ca3;   /* 5.6:1 на белом */
  --eng-auto:#2a78d6; --eng-claude:#1baf7a; --eng-chatgpt:#eda100; --eng-agents:#4a3aa7; --eng-dev:#e34948; --eng-other:#8a8a82;   /* light-слоты dataviz */
}
* { box-sizing:border-box; }
html, body { width:100%; height:100%; max-width:100%; overflow:hidden; }
body { margin:0; font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); overflow:hidden; }
.katex-mathml { display:none !important; } /* убрать нативный MathML — он раздувал высоту страницы */
a { color:var(--acc); text-decoration:none; }
svg { display:inline-block; vertical-align:middle; }
button { cursor:pointer; border:1px solid var(--acc); background:var(--acc); color:var(--acc-fg); padding:8px 14px; border-radius:8px; font-size:14px; display:inline-flex; align-items:center; gap:7px; }
button.ghost { background:transparent; color:var(--txt); border-color:var(--line); }
button:hover { opacity:.92; }
input, select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line); background:var(--bg); color:var(--txt); border-radius:8px; font-size:14px; }
/* range — не «поле»: глобальные padding/рамка/фон рисовали вокруг ползунка коробку, из которой он вылезал */
input[type=range] { padding:0; border:0; background:transparent; height:auto; }
[data-theme="light"] input, [data-theme="light"] select { background:#fff; }
[data-theme="light"] input[type=range] { background:transparent; }
label { display:block; margin:10px 0 4px; color:var(--mut); font-size:12px; }
h2 { font-size:18px; margin:0; } h3 { font-size:15px; margin:0 0 12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
/* Единая «плитка» хаба: фон+рамка всех карточек в одном правиле (было продублировано в 8 классах).
   Радиусы по семьям: 16 — карточки/панели вкладок (дашборд, агенты, скилы), 14 — вставки чата
   (файл-карточки, ask-card, графики), 12 — базовый .card, 8 — контролы и строки списков. */
.cz-card, .cz-stats, .ag2-summary-stats, .cz-summary, .ag2-summary, .ag2-card, .d2-panel, .d2-sat, .file-card { background:var(--panel); border:1px solid var(--line); }
/* «Актуальные данные»: три карточки-таблицы одного типа — фиксированные колонки, чтобы «Значение/Источник/
   Обновлено» стояли на одних вертикалях во всех карточках (авто-ширина давала рваное выравнивание) */
.ad-table { table-layout:fixed; width:100%; }
.ad-table th:nth-child(1) { width:32%; }
.ad-table th:nth-child(2) { width:16%; }
.ad-table th:nth-child(3) { width:19%; }
.ad-table th:nth-child(4) { width:auto; }   /* «Обновлено» — самый длинный текст («не обновлялось» + дата), ему остаток */
.ad-table th:nth-child(5) { width:36px; }
.ad-table td:not(:last-child) { overflow:hidden; text-overflow:ellipsis; }   /* не last-child: ellipsis в ячейке с кнопкой рисовал точки рядом с карандашом */
.muted { color:var(--mut); } .ok { color:var(--ok); }
.tag { display:inline-block; padding:1px 9px; border-radius:20px; font-size:11px; border:1px solid var(--line); color:var(--mut); }
.tag.acc { background:var(--acc-soft); color:var(--acc); border-color:transparent; }

/* Auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.auth { width:370px; }
.brand { font-weight:700; letter-spacing:.5px; font-size:20px; }
.brand b { color:var(--acc); }
.err { color:var(--danger); font-size:13px; min-height:18px; margin-top:8px; }
.themeBtn { position:fixed; top:16px; right:16px; }

/* App layout */
.layout { display:grid; grid-template-columns:230px minmax(0,1fr); width:100%; max-width:100%; height:100vh; overflow:hidden; }
.side { background:var(--panel); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.side-sessions { flex:1 1 auto; min-height:0; overflow-y:auto; }   /* список чатов: занимает остаток и СКРОЛЛИТСЯ (много чатов не выталкивают профиль) */
.side .brand { padding:6px 10px 16px; }
.nav a { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; color:var(--mut); margin-bottom:2px; cursor:pointer; }
.nav a.active, .nav a:hover { background:var(--panel2); color:var(--txt); }
.nav a.active { color:var(--acc); }
.side .foot { flex-shrink:0; border-top:1px solid var(--line); padding-top:12px; }   /* профиль/выход ЗАКРЕПЛЕНЫ снизу (margin-top:auto убран — остаток забирает список чатов) */
.side .foot .row { justify-content:space-between; }
.main { min-width:0; max-width:100%; padding:22px 26px; overflow:auto; overflow-x:hidden; height:100vh; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.stat { font-size:26px; font-weight:600; margin-top:2px; }
.stat small { font-size:13px; font-weight:400; color:var(--mut); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); }
th { color:var(--mut); font-weight:500; }
.row { display:flex; gap:10px; align-items:center; }
.flex { display:flex; gap:14px; } .flex > * { flex:1; min-width:0; }
.hr { height:1px; background:var(--line); margin:16px 0; }

/* Кастомизация: карточки скилов/коннекторов сеткой по 2 в ряд — компактно, с иконкой, без полос во всю ширину */
.cz-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ .cz-grid { grid-template-columns:1fr; } }
.cz-card { border-radius:16px; padding:12px 13px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cz-card.lib { padding:10px 12px; }
.cz-head { display:flex; align-items:center; gap:9px; min-width:0; }
.cz-ico { width:30px; height:30px; border-radius:8px; background:var(--acc-soft); color:var(--acc); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cz-name { font-weight:500; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cz-note { color:var(--mut); font-size:12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cz-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; }
.cz-acts { display:inline-flex; gap:3px; margin-left:auto; }
.cz-sec { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:18px 0 9px; }

/* Chat */
.msgs { flex:1; overflow:auto; padding:8px 2px; }
.msg { margin:8px 0 3px; padding:10px 13px; border-radius:10px; max-width:78%; white-space:pre-wrap; }   /* низ 3px: строка времени/действий хугает свой пузырь, интервал между блоками задают ряды снизу */
.msg.user { background:var(--acc-soft); margin-left:auto; }
.msg.user.queued { opacity:.48; filter:saturate(.75); }
.msg.user.queued .meta { color:var(--mut); }
.msg.assistant { background:var(--panel); border:1px solid var(--line); }
.msg.sys { background:transparent; border:1px dashed var(--line); color:var(--mut); max-width:100%; }
.msg .meta { font-size:11px; color:var(--mut); margin-top:7px; }

/* ─── Совместный чат v2: аватарки вместо строк-подписей ─── */
.ava { border-radius:50%; overflow:hidden; position:relative; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:600; flex:none; letter-spacing:.3px; vertical-align:middle; }
.ava i { font-style:normal; line-height:1; }
.ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.msg.user.foreign { margin-left:36px; margin-right:auto; background:var(--panel); border:1px solid var(--line); position:relative; overflow:visible; }
.msg-ava { position:absolute; left:-36px; top:1px; }
.read-stack { display:flex; justify-content:flex-end; align-items:center; gap:3px; margin:-2px 4px 8px 0; }
.read-stack .rs-l, .read-stack .rs-more { font-size:11px; color:var(--mut); }
.read-stack .rs-l { margin-right:2px; }

/* Charts */
.chart { display:flex; align-items:flex-end; gap:4px; height:170px; padding-top:8px; }
.bar { flex:1; display:flex; flex-direction:column-reverse; min-width:6px; }
.bar .seg { width:100%; border-radius:2px 2px 0 0; }
.bar .seg.in { background:var(--acc); } .bar .seg.out { background:#ffb27a; } .bar .seg.cache { background:var(--ok); }
.bar .seg.cost { background:var(--acc); border-radius:2px; }
.legend { display:flex; gap:14px; font-size:12px; color:var(--mut); margin-top:10px; flex-wrap:wrap; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.hbar { height:13px; background:var(--acc); border-radius:4px; }

/* ── Дашборд: палитра графиков, SVG-чарты, тулбар, пай-чарты, баннер ── */
:root {
  --chart-1:#ff8a3d; --chart-2:#ffb27a; --chart-3:#2ecc71; --chart-4:#9a7bff;
  --chart-5:#e0a32e; --chart-6:#ff5d8a;
}
[data-theme="light"] {
  --chart-1:#e8720c; --chart-2:#f5a35e; --chart-3:#16b85c; --chart-4:#8a5cf6;
  --chart-5:#b9802a; --chart-6:#e0507a;
}
.svgchart { width:100%; height:auto; display:block; overflow:visible; }
.svgchart .axis-line { stroke:var(--line); stroke-width:1; }
.svgchart .axis-text { fill:var(--mut); font-size:10px; }
.svgchart .area-fill { fill:var(--acc); opacity:.14; }
.svgchart .area-line { stroke:var(--acc); stroke-width:2; fill:none; }
.svgchart .area-dot { fill:var(--bg); stroke:var(--acc); stroke-width:1.6; }
.svgchart .stack-seg { cursor:default; }
.svgchart .stack-seg:hover, .pie-slice:hover { opacity:.82; }
.svgchart .hover-line { stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.svgchart-tip { position:absolute; pointer-events:none; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; white-space:nowrap; opacity:0; transition:opacity .1s; z-index:5; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.chart-wrap { position:relative; }

.dash-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dash-toolbar select { width:auto; padding:7px 10px; font-size:13px; }
.dash-toolbar .spacer { flex:1; }

.pie-row { display:flex; flex-direction:column; align-items:center; gap:14px; }
.pie-row .pie-legend { display:flex; flex-direction:column; gap:7px; font-size:13px; width:100%; }
.pie-legend .pl-row { display:flex; align-items:center; gap:8px; }
.pie-legend .pl-row i { display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; }
.pie-legend .pl-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pie-legend .pl-val { color:var(--mut); }

.dash-banner { display:flex; gap:10px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13px; color:var(--mut); }
.dash-banner svg { flex:none; margin-top:1px; }

/* ══ Дашборд v2 (dataviz-скилл): ритм из надзаголовков-eyebrow, доминанта-hero + спутники,
   асимметричные ряды, круговая движков, бары людей. Воздух вместо «всё в строчку». ══ */
.d2-eye { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.d2-h3 { font-size:16px; font-weight:600; margin:2px 0 14px; letter-spacing:-.01em; }
.d2-panel { border-radius:16px; padding:20px 22px; }
.d2-row2 { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px; }   /* асимметрия: люди шире круговой */
.d2-wide { margin-bottom:16px; }
.d2-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* hero-лента: доминанта (активность) крупнее спутников */
.d2-hero { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:14px; margin:18px 0 20px; }
.d2-hero-main { background:linear-gradient(135deg, var(--acc-soft), transparent 130%); border:1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; }
.d2-heronum { font-size:46px; font-weight:700; line-height:1; letter-spacing:-.03em; margin-top:8px; color:var(--txt); }
.d2-heroof { font-size:20px; font-weight:500; color:var(--mut); margin-left:8px; letter-spacing:0; }
.d2-herolbl { font-size:12.5px; color:var(--mut); margin-top:8px; }
.d2-meter { height:6px; border-radius:6px; background:color-mix(in srgb, var(--acc) 16%, transparent); margin-top:auto; overflow:hidden; }
.d2-meter span { display:block; height:100%; border-radius:6px; background:var(--acc); }
.d2-sat { border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; justify-content:center; }
.d2-satnum { font-size:28px; font-weight:600; letter-spacing:-.02em; margin-top:6px; }
.d2-satsub { font-size:12px; color:var(--mut); margin-top:3px; }

/* люди: бар = объём, аватар = личность */
.d2-people { display:flex; flex-direction:column; gap:14px; }
.d2-person { display:flex; align-items:center; gap:12px; }
.d2-person-body { flex:1; min-width:0; }
.d2-person-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.d2-person-nm { font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d2-person-v { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.d2-track { height:8px; border-radius:5px; background:var(--panel2); margin:5px 0 3px; overflow:hidden; }
.d2-fill { display:block; height:100%; border-radius:5px; background:var(--acc); min-width:5px; }
.d2-person-sub { font-size:11px; color:var(--mut); }

/* круговая (donut) */
.d2-donut-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.d2-donut { position:relative; width:172px; height:172px; }
.d2-donut-svg { width:100%; height:100%; transform:rotate(0); }
.d2-seg { transition:opacity .15s, stroke-width .15s; cursor:default; }
.d2-seg:hover { stroke-width:5.4; }
.d2-seg.dim { opacity:.32; }
.d2-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.d2-donut-center b { font-size:26px; font-weight:700; letter-spacing:-.02em; }
.d2-donut-center span { font-size:11px; color:var(--mut); }
.d2-donut-tip { position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%); background:var(--txt); color:var(--bg); font-size:12px; padding:4px 9px; border-radius:7px; white-space:nowrap; opacity:0; transition:opacity .12s; pointer-events:none; z-index:5; }
.d2-donut-tip.show { opacity:1; }
.d2-legend { display:flex; flex-direction:column; gap:7px; width:100%; }
.d2-leg-row { display:flex; align-items:center; gap:9px; font-size:13px; }
.d2-dot { width:11px; height:11px; min-width:11px; border-radius:3px; }
.d2-leg-nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d2-leg-v { font-weight:600; font-variant-numeric:tabular-nums; }
.d2-leg-p { color:var(--mut); font-size:12px; width:38px; text-align:right; font-variant-numeric:tabular-nums; }

/* последние чаты — компактный список вместо таблицы */
.d2-chats { display:flex; flex-direction:column; }
.d2-chat { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.d2-chat:last-child { border-bottom:0; }
.d2-chat-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d2-chat-v { font-weight:600; color:var(--mut); font-variant-numeric:tabular-nums; flex:0 0 auto; }

@media (max-width:820px) {
  .d2-hero { grid-template-columns:1fr 1fr; }
  .d2-hero-main { grid-column:1 / -1; }
  .d2-row2 { grid-template-columns:1fr; }
}

/* ══ Вкладка «Агенты» v2: карточки показывают ЖИЗНЬ агента (прогоны/память/автономность/лимбика),
   единый язык с дашбордом (eyebrow, мини-статы, аватары). ══ */
.ag2-hint, .cz-hint { display:flex; gap:10px; align-items:flex-start; background:var(--acc-soft); border-radius:12px; padding:12px 15px; margin:14px 0 4px; font-size:13px; color:var(--mut); }
.ag2-hint svg, .cz-hint svg { color:var(--acc); flex:none; margin-top:1px; }
.ag2-hint b, .cz-hint b { color:var(--txt); font-weight:600; }

/* Сегмент-контрол (подтабы) — единый компонент вместо inline-стилей */
.seg-ctl { display:inline-flex; gap:3px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:3px; margin-bottom:14px; }
.seg-ctl .seg { padding:7px 14px; border:0; border-radius:8px; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--mut); transition:background .14s, color .14s; }
.seg-ctl .seg:hover { color:var(--txt); }
.seg-ctl .seg.on { background:var(--acc); color:var(--acc-fg); }
/* Подвкладок «Компании» много (до 5) — штатный seg-ctl, на узком экране скроллится, не ломает строку */
#md-tabs { display:flex; max-width:100%; overflow-x:auto; scrollbar-width:none; }
#md-tabs .seg { white-space:nowrap; flex:0 0 auto; }

/* ряд мини-статов (замена старого dashCell-грида) — язык дашборда */
.cz-stats, .ag2-summary-stats { display:flex; gap:28px; flex-wrap:wrap; border-radius:16px; padding:14px 20px; margin-top:14px; }
.cz-summary { display:flex; gap:28px; flex-wrap:wrap; border-radius:16px; padding:14px 20px; margin-top:14px; }

/* ── Администрирование: health-пиллы, переключатели, сетка таблиц ── */
.adm-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); }
.adm-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.adm-pill.ok .adm-dot { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.adm-pill.bad { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.adm-pill.bad .adm-dot { background:var(--danger); }
.ui-sw { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; }
.ui-sw input { position:absolute; opacity:0; width:0; height:0; }
.ui-sw-t { position:relative; width:38px; height:22px; border-radius:12px; background:var(--line); flex:0 0 auto; transition:background .16s; }
.ui-sw-t::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .16s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.ui-sw input:checked + .ui-sw-t { background:var(--acc); }
.ui-sw input:checked + .ui-sw-t::after { transform:translateX(16px); }
.ui-sw input:focus-visible + .ui-sw-t { outline:2px solid var(--acc); outline-offset:2px; }
/* Тумблер-кнопка — тот же вид, что .ui-sw (38×22, шайба 18), для мест, где переключение делает onclick,
   а не чекбокс (карточка скила и т.п.). Раньше там была точка ●/○ — нечитаемый «третий вид» тумблера. */
.sw-btn { position:relative; width:38px; height:22px; flex:0 0 auto; border:0; padding:0; border-radius:12px; background:var(--line); transition:background .16s; }
.sw-btn::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .16s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.sw-btn.on { background:var(--acc); }
.sw-btn.on::after { transform:translateX(16px); }
.adm-usage { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.adm-usage table { width:100%; }
.tbl-wrap { overflow-x:auto; }
@media (max-width:820px) { .adm-usage { grid-template-columns:1fr; } }
.ag2-summary { display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-radius:16px; padding:16px 20px; margin-top:14px; }
.ag2-sum-avatars { display:flex; }
/* Маскоты прозрачные — под каждым НЕПРОЗРАЧНАЯ плитка, иначе кольцо-обводка соседа рисовало
   «полосы» поверх предыдущего маскота при нахлёсте стопки (жалоба владельца 14.07). */
.ag2-sum-ava { width:52px; height:52px; margin-left:-12px; border-radius:14px; overflow:hidden; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); box-shadow:0 0 0 2px var(--panel);
  transition:transform .15s; display:inline-flex; align-items:center; justify-content:center; position:relative; }
.ag2-sum-ava:first-child { margin-left:0; }
.ag2-sum-ava:hover { transform:translateY(-3px); z-index:2; }
.ag2-sum-ava svg { width:100%; height:100%; padding:3px; box-sizing:border-box; }
.ag2-sum-stats { display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; }
.ag2-sum-stats .d2-sat { background:none; border:0; padding:0; }

.ag2-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; margin-top:10px; }
.ag2-card { border-radius:16px; padding:16px 18px; cursor:pointer; transition:border-color .16s, transform .16s; display:flex; flex-direction:column; }
.ag2-card:hover { border-color:var(--acc); transform:translateY(-2px); }
.ag2-head { display:flex; align-items:flex-start; gap:12px; }
.ag2-ava { width:44px; height:44px; flex:0 0 auto; display:inline-flex; }
.ag2-id { flex:1; min-width:0; }
.ag2-name { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.ag2-lock { display:inline-flex; color:var(--mut); }
.ag2-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.ag2-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); color:var(--mut); white-space:nowrap; }
.ag2-tag.prov { font-weight:600; }
.ag2-tag.prov.gpt { color:var(--eng-chatgpt); border-color:color-mix(in srgb, var(--eng-chatgpt) 40%, transparent); }
.ag2-tag.prov.cl { color:var(--acc); border-color:color-mix(in srgb, var(--acc) 40%, transparent); }
.ag2-tag.lim { color:var(--eng-agents); border-color:color-mix(in srgb, var(--eng-agents) 40%, transparent); }
.ag2-actions { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.ag2-actions .ghost { padding:5px 7px; }
.ag2-actions .ghost.danger:hover { color:var(--danger); border-color:var(--danger); }
.ag2-state { width:9px; height:9px; border-radius:50%; margin-right:2px; flex:0 0 auto; }
.ag2-state.live { background:var(--ok); box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); animation:ag2pulse 2s infinite; }
.ag2-state.idle { background:var(--mut); }
.ag2-state.off { background:transparent; border:1.5px solid var(--line); }
@keyframes ag2pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)} 70%{box-shadow:0 0 0 6px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.ag2-desc { font-size:12.5px; color:var(--mut); line-height:1.5; margin:12px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ag2-metrics { display:flex; gap:20px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.ag2-metric { display:flex; flex-direction:column; }
.ag2-metric b { font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ag2-metric span { font-size:10.5px; color:var(--mut); margin-top:1px; letter-spacing:.01em; }
.ag2-assign { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.ag2-assign .d2-eye { margin-right:4px; }


/* ── Сайдбар: бренд + сворачивание ── */
.brand-row { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 16px; }
.iconbtn { background:transparent; border:none; color:var(--mut); padding:5px; border-radius:7px; cursor:pointer; display:inline-flex; }
.iconbtn:hover { color:var(--txt); background:var(--panel2); }
.who { padding:0 10px 10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout.collapsed { grid-template-columns:62px 1fr; }
.layout.collapsed .nav a span, .layout.collapsed .brand, .layout.collapsed .who, .layout.collapsed #theme span, .layout.collapsed #logout span { display:none; }
.layout.collapsed .nav a { justify-content:center; padding:10px 0; }
.layout.collapsed .brand-row { justify-content:center; }
.layout.collapsed .foot .row { flex-direction:column; }

/* ── Чат: две панели (актуальная раскладка — flex, ниже по файлу) ── */
.sessions { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.s-new { margin-bottom:8px; justify-content:center; }
.s-item { padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:6px; color:var(--mut); }
.s-item:hover { background:var(--panel2); color:var(--txt); }
.s-item.active { background:var(--acc-soft); color:var(--txt); }
.s-item .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-size:13px; }
.s-item .x { opacity:0; }
.s-item:hover .x { opacity:.7; }
.chat-main { display:flex; flex-direction:column; min-width:0; background:var(--panel); border:1px solid var(--line); position:relative; }
.chat-main .msgs { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 18px; }   /* overflow-x:hidden — страховка от горизонтальной полосы, если что-то вылезет за ширину (03.07) */

/* Минимапа-«чёрточки»: 1 черта = 1 сообщение пользователя (навигация, как в Claude.ai). Активная следует за прокруткой.
   .msgs-wrap — общий relative-контейнер сообщений и чёрточек: top:50% минимапы считается ОТ ЗОНЫ СООБЩЕНИЙ,
   а не от всей колонки .chat-main с топбаром и композером (визуально была смещена вниз — жалоба 13.07). */
.msgs-wrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.msgs-wrap .msgs { flex:1; min-height:0; }
.msg-ticks { position:absolute; right:3px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:2px; align-items:flex-end; z-index:6; padding:6px 2px; max-height:90%; overflow:hidden; }
.msg-ticks:empty { display:none; }
.msg-tick { width:30px; height:14px; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; cursor:pointer; position:relative; }   /* КРУПНАЯ зона клика; flex:0 0 auto — не сжиматься */
.msg-tick::before { content:''; width:15px; height:2px; border-radius:2px; background:var(--mut); opacity:.4; transition:width .14s ease, opacity .14s ease, background .14s ease; }
.msg-ticks:hover .msg-tick::before { width:20px; opacity:.7; }   /* наведение на полосу — раскрывает чёрточки */
.msg-tick:hover::before { width:30px; opacity:1; background:var(--acc); }
.msg-tick.active::before { background:var(--acc); opacity:1; width:26px; }
/* На телефоне мини-навигация по сообщениям ложится поверх текста и читается как артефакт — прячем */
@media (max-width:768px) { .msg-ticks { display:none; } }
.tick-label { position:absolute; right:34px; top:50%; transform:translateY(-50%); background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:5px 9px; font-size:12px; line-height:1.3; color:var(--txt); white-space:nowrap; max-width:min(320px,40vw); overflow:hidden; text-overflow:ellipsis; opacity:0; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:opacity .14s ease; }
.msg-tick:hover .tick-label { opacity:1; }                    /* показывает, к какому сообщению привязана */
@keyframes msgflash { 0%,100%{ background:transparent; } 25%{ background:var(--acc-soft); } }
.msg.msg-flash { animation:msgflash 1.1s ease; border-radius:10px; }
.composer { border-top:1px solid var(--line); padding:10px 14px; position:relative; z-index:6; background:var(--panel); }   /* явный слой + фон: разметка сообщений (hr/списки/таблицы) не налезает на кнопку отправки (03.07) */
.scroll-bottom { position:absolute; left:50%; top:-44px; transform:translateX(-50%); width:38px; height:38px; align-items:center; justify-content:center; padding:0; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--txt); box-shadow:0 8px 24px rgba(0,0,0,.24); opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease, background-color .16s ease; }
.scroll-bottom.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(-2px); }
.scroll-bottom:hover { background:var(--panel2); }
.composer textarea { resize:none; max-height:240px; overflow-y:auto; line-height:1.5; font-family:inherit; }   /* textarea по умолчанию monospace — наследуем шрифт сайта (03.07) */
.composer textarea:disabled { opacity:.6; }
.att-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
/* Флайауты меню «+»: кнопка + список, выпадающий ВПРАВО по наведению (скилы, коннекторы, восстановление) — не громоздим меню */
.pm-fly { position:relative; }
.flyout-chev { margin-left:auto; opacity:.55; flex:0 0 auto; }
.flyout-btn { display:flex; align-items:center; gap:8px; width:100%; }
.pm-fly-list { position:absolute; left:100%; bottom:-4px; min-width:210px; max-width:280px; max-height:320px; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:4px; box-shadow:0 8px 26px rgba(0,0,0,.3); display:none; z-index:70; }
.pm-fly-list::before { content:''; position:absolute; left:-8px; top:0; bottom:0; width:8px; }   /* прозрачный мост через зазор при наведении */
.pm-fly:hover > .pm-fly-list, .pm-fly-list:hover { display:block; }
.pm-restore-item, .plus-skill, .plus-connector-info { font-size:13px; width:100%; text-align:left; }
/* Слэш-меню скилов в композере: «/» в пустом поле → выбор скила стрелками/Enter, как слэш-команды */
.slash-menu { position:absolute; left:14px; bottom:100%; margin-bottom:6px; min-width:260px; max-width:min(440px,82vw); max-height:280px; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:5px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:80; display:none; }
.slash-menu.open { display:block; }
.slash-empty { color:var(--mut); font-size:12px; padding:8px 10px; }
.slash-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px; border-radius:8px; font-size:13px; cursor:pointer; border:0; background:transparent; color:inherit; }
.slash-item .s-desc { color:var(--mut); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slash-item:hover, .slash-item.sel { background:var(--acc-soft); color:var(--acc); }
.slash-item.on::after { content:'✓'; margin-left:auto; opacity:.75; }
.chip { background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:3px 8px 3px 11px; font-size:12px; display:inline-flex; gap:6px; align-items:center; }
.chip .x { cursor:pointer; color:var(--mut); }
.composer-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.composer-bar .send { margin-left:auto; padding:9px; }
.toggle { border:1px solid var(--line); background:transparent; color:var(--mut); padding:6px 10px; border-radius:8px; font-size:12px; }
.toggle.on { background:var(--acc-soft); color:var(--acc); border-color:transparent; }
.model-row { margin-top:8px; display:flex; align-items:center; gap:8px; }
.model-row select { width:auto; font-size:12px; color:var(--mut); padding:5px 8px; }
button:disabled, .iconbtn:disabled { opacity:.45; cursor:not-allowed; }

/* ── Markdown в ответах ── */
/* max-width + перенос длинных слов/путей/URL: без этого длинное имя файла (koroto_..._template.xlsx)
   или ссылка растягивали сообщение шире экрана → горизонтальный скролл всего чата (03.07). */
.md { white-space:normal; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.md > :first-child { margin-top:0; } .md > :last-child { margin-bottom:0; }
.md p { margin:.5em 0; } .md h1,.md h2,.md h3,.md h4 { margin:.7em 0 .4em; line-height:1.3; }
.md h1 { font-size:20px; } .md h2 { font-size:17px; } .md h3 { font-size:15px; }
.md ul,.md ol { margin:.4em 0; padding-left:1.4em; } .md li { margin:.2em 0; }
.md pre { background:#0b0e13; border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; margin:.6em 0; }
.md code { font-family:ui-monospace,Consolas,monospace; font-size:13px; }
.md :not(pre) > code { background:var(--panel2); padding:1px 5px; border-radius:4px; }
.md blockquote { border-left:3px solid var(--acc); margin:.6em 0; padding:2px 0 2px 12px; color:var(--mut); }
.md table { margin:.6em 0; font-size:13px; } .md th,.md td { border:1px solid var(--line); padding:5px 9px; }
.md a { color:var(--acc); } .md hr { border:none; border-top:1px solid var(--line); margin:.8em 0; }
.md img { max-width:100%; border-radius:8px; }

/* ── Модалка (заметка/файл) ── */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:50; }
.modal.open { display:flex; }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; max-width:780px; width:90%; max-height:85vh; overflow:auto; padding:26px 28px; position:relative; }
.modal-x { position:absolute; top:12px; right:12px; }

/* ── v3: лого, тема в углу, аккордеон, дерево, зум ── */
.themetop { position:fixed; top:14px; right:18px; z-index:40; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px; }
.brand-row { display:flex; align-items:center; gap:9px; padding:6px 8px 16px; justify-content:flex-start; }
.brand-logo { border-radius:7px; cursor:pointer; flex:0 0 auto; }
.brand-row .brand { padding:0; line-height:28px; }   /* убираем асимметр. паддинг .side .brand (6/16) — текст был поднят выше логотипа/кнопки; выравниваем по центру */
.brand-row #collapse { margin-left:auto; align-items:center; justify-content:center; }   /* .iconbtn inline-flex без align → значок прижат вверх; центрируем */
.layout.collapsed .brand { display:none; }
.layout.collapsed .brand-row { justify-content:center; }
.layout.collapsed #collapse { display:none; }
.layout.collapsed .who, .layout.collapsed .acct .chev { display:none; }
.layout.collapsed .acct-menu { display:none; }
.layout.collapsed .acct { justify-content:center; padding:8px 0; }

/* Аккаунт-аккордеон */
.foot { margin-top:auto; border-top:1px solid var(--line); padding-top:8px; }
.acct { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.acct:hover { background:var(--panel2); }
.ava { width:30px; height:30px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex:0 0 auto; }
.acct .who { flex:1; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct .chev { color:var(--mut); transition:transform .15s; display:inline-flex; }
.acct.open .chev { transform:rotate(180deg); }
.acct-menu { max-height:0; overflow:hidden; transition:max-height .2s ease; display:flex; flex-direction:column; gap:2px; }
.acct-menu.open { max-height:220px; margin-bottom:4px; }   /* 120 резало 4-ю кнопку (Обучение) — запас на призрака+Профиль+Обучение+Выход */

/* Чат: список сессий скрывается полностью */
.chat-wrap { gap:0; }
.sessions { border-radius:0; border-left:none; }
.sessions.hidden { display:none; }
.chat-wrap.no-sessions { grid-template-columns:1fr; }
.chat-head { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); }
.chat-head .ttl { font-size:13px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── v4: чат на весь экран, фиксированные head/composer, правая панель ── */
.main.nopad { padding:0; height:100vh; }
/* Оболочка страницы: заполняет main целиком (как чат) — шапка + прокручиваемое тело, без «карточки в карточке» */
.page { display:flex; flex-direction:column; height:100vh; min-height:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 22px; border-bottom:1px solid var(--line); flex-shrink:0; }
.page-head h2 { margin:0; }
.page-head .top { margin:0; flex:1; }
.page-body { flex:1; min-height:0; overflow:auto; padding:20px 24px; }
.page-body.flush { padding:0; overflow:hidden; }   /* для полноэкранных лэйаутов (таблицы) */
/* Карточные вкладки: заполняют main целиком, .top превращается в липкую шапку-бар во всю ширину */
.main.paged { padding:0 24px 22px; overflow:auto; overflow-x:hidden; height:100vh; }
.main.paged > .top { position:sticky; top:0; z-index:6; margin:0 -24px 18px; padding:13px 24px; background:var(--bg); border-bottom:1px solid var(--line); }

/* Верхние скролл-контейнеры не должны рисовать серую полосу у правого края экрана.
   Прокрутка остаётся колесом/тачем, скрывается только track/thumb. */
.main, .main.paged, .page-body, .chat-main .msgs, .msgs, .sessions, .side-sessions {
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.main::-webkit-scrollbar,
.main.paged::-webkit-scrollbar,
.page-body::-webkit-scrollbar,
.chat-main .msgs::-webkit-scrollbar,
.msgs::-webkit-scrollbar,
.sessions::-webkit-scrollbar,
.side-sessions::-webkit-scrollbar {
  width:0;
  height:0;
}
.chat-wrap { display:flex; height:100vh; gap:0; }
.sessions { width:214px; flex:0 0 214px; background:var(--panel); border:none; border-right:1px solid var(--line); border-radius:0; }
.sessions.hidden { display:none; }
.chat-main { flex:1; min-width:280px; display:flex; flex-direction:column; height:100vh; }
.chat-head { flex:0 0 auto; }
.chat-main .msgs { flex:1; overflow:auto; }
.composer { flex:0 0 auto; }
.composer-input { display:flex; gap:8px; align-items:center; }   /* центр, а не низ: поле выше кнопки на 4px → send сидел ниже центра поля (03.07) */
.composer-input textarea { flex:1; }
.composer-input .send { flex:0 0 auto; padding:10px 12px; }
.composer-input .queue-next { display:none; flex:0 0 auto; align-items:center; justify-content:center; padding:10px; color:var(--acc); background:var(--acc-soft); }
.composer-input .queue-next.show { display:inline-flex; }
.composer-bar .toggle { padding:6px 9px; }
.composer-bar select { font-size:12px; color:var(--mut); padding:5px 8px; }

/* ── Кастомный выпадающий список выбора модели ── */
.model-picker { position:relative; margin-left:auto; }
.model-picker-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--panel2); color:var(--txt);
  border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; font-size:12px;
  transition:border-color .15s, background-color .15s;
}
.model-picker-btn:hover { border-color:var(--acc); }
.model-picker-btn svg { color:var(--mut); transition:transform .15s; flex:0 0 auto; }
.model-picker.open .model-picker-btn { border-color:var(--acc); }
.model-picker.open .model-picker-btn svg { transform:rotate(180deg); }
.model-picker-label { white-space:nowrap; }

.model-picker-menu {
  position:absolute; bottom:calc(100% + 6px); right:0;
  min-width:180px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:20;
}
.model-picker.open .model-picker-menu { opacity:1; visibility:visible; transform:translateY(0); }

.model-picker-item {
  padding:7px 10px; border-radius:7px;
  font-size:13px; color:var(--txt); cursor:pointer;
  white-space:nowrap;
  transition:background-color .12s, color .12s;
}
.model-picker-item:hover { background:var(--panel2); }
.model-picker-item.active { background:var(--acc-soft); color:var(--acc); }
/* правая скрываемая панель: контекст + файлы */
.rightpanel { width:288px; flex:0 0 288px; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; height:100vh; }
.rightpanel.hidden { display:none; }
/* на узких экранах прячем правую панель, чтобы чат не схлопывался (на широком — видна для баланса) */
@media (max-width:1080px) { .rightpanel { display:none; } }

/* ── Задачи ── */
.task-card { padding:12px 14px; border-bottom:1px solid var(--line); }
.task-card:last-child { border-bottom:none; }
.task-card.task-paused { opacity:.6; }
.task-meta { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--mut); margin-top:4px; flex-wrap:wrap; }
.task-meta svg { flex:none; color:var(--mut); }
.section-label { font-size:11px; font-weight:600; color:var(--mut); letter-spacing:.06em; text-transform:uppercase; padding:0 2px 8px; }

.rp-tabs { display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--line); }
.rp-tab { flex:1; padding:6px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--mut); cursor:pointer; font-size:12px; }
.rp-tab.active { background:var(--acc-soft); color:var(--acc); border-color:transparent; }
.rp-body { padding:12px; overflow:auto; flex:1; }
/* действия под сообщением: copy + запуск кода */
.msg-actions { margin-top:8px; display:flex; align-items:center; gap:6px; }
/* Время ответа ИИ — в одном ряду с действиями (копировать/закладка), слева, всегда видно */
.msg.assistant .msg-actions .ma-time { font-size:11px; color:var(--mut); margin-right:3px; }
/* Своё сообщение: время + действия ОТДЕЛЬНОЙ строкой ПОД пузырём (как у ответов ИИ), не внутри.
   Строка прижата вправо — под правый край своего пузыря. Кнопки видны всегда, ярче на ховере (14.07). */
.msg-actions-user { margin:2px 0 20px; justify-content:flex-end; align-items:center; gap:5px; }
.msg-actions-user .ma-time { font-size:11px; color:var(--mut); margin-right:1px; }
.msg-actions-user .mini { opacity:.7; transition:opacity .15s; }
.msg-actions-user:hover .mini { opacity:1; }
/* Чужое сообщение: время отдельной строкой под пузырём, слева (под левым краем, с учётом аватара), всегда видно */
.msg-time-row { display:flex; font-size:11px; color:var(--mut); }
.msg-time-row.foreign { justify-content:flex-start; margin:2px 0 20px 36px; }
.mini { background:transparent; border:1px solid var(--line); color:var(--mut); padding:3px 8px; border-radius:6px; font-size:11px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.mini:hover { color:var(--txt); }
/* блок кода с плашкой (как в других ИИ): язык + копировать + запустить, вывод свапается на месте */
.codeblock { border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:.6em 0; }
.cb-head { display:flex; align-items:center; justify-content:space-between; padding:3px 6px 3px 10px; background:var(--panel2); border-bottom:1px solid var(--line); }
.cb-lang { font-size:11px; color:var(--mut); font-family:ui-monospace,Consolas,monospace; }
.cb-actions { display:flex; gap:2px; }
.cbtn { background:transparent; border:none; color:var(--mut); padding:4px; border-radius:6px; cursor:pointer; display:inline-flex; }
.cbtn:hover { color:var(--txt); background:var(--line); }
.cbtn:disabled { opacity:.5; }
.codeblock > pre { margin:0; border:none; border-radius:0; }
.cb-saved-chips { display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; background:var(--panel2); border-top:1px solid var(--line); }
.cb-output { display:none; position:relative; background:#06140a; color:#bff0d0; }
.cb-output.show { display:block; }
.cb-out-pre { margin:0; padding:12px 12px 12px 14px; white-space:pre-wrap; font-size:12px; color:inherit; background:transparent; border:none; }
.cb-back { position:absolute; top:4px; right:6px; color:#bff0d0; }
.cb-back:hover { background:rgba(255,255,255,.12); color:#fff; }
[data-theme="light"] .cb-output { background:#e4f7ec; color:#15803d; }
[data-theme="light"] .cb-back { color:#15803d; }

/* ── v5: стриминг, стоп, скроллбары, боковые строки ── */
.thinking { display:flex; align-items:center; gap:9px; color:var(--mut); font-size:13px; padding:2px 0; }
.spinner { width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:spin .7s linear infinite; flex:0 0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.tt { animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
/* ── Мини-призрак в индикаторе: рыжий (акцент --acc), адаптивен под темы; повадка = действие бота ── */
.ghost-mini { width:24px; height:24px; flex:0 0 auto; display:inline-block; line-height:0; }
.ghost-mini svg { width:100%; height:100%; display:block; overflow:hidden; transform:none !important; }   /* hidden → матричный дождь остаётся в габаритах значка, за телом */
.gm-body { transform-origin:center; animation:gm-float 2.8s ease-in-out infinite; }
.gm-blob { fill:var(--acc); }
.gm-eye { fill:#3a2413; transform-box:fill-box; transform-origin:center; animation:gm-blink 3.8s infinite; }
.gm-glasses { fill:none; stroke:#3a2413; stroke-width:1.1; opacity:0; transform:translateY(-5px); }
/* ПРЕДМЕТЫ в «руках» призрака — наглядность действия (появляются по классу, как очки) */
.gm-loupe,.gm-gear { fill:none; stroke:var(--txt); stroke-width:1.15; opacity:0; }   /* var(--txt) → контраст с фоном в ЛЮБОЙ теме */
.gm-pencil { opacity:0; }
.gm-pen-body { fill:none; stroke:var(--txt); stroke-width:2; stroke-linecap:round; }
.gm-pencil .gm-lead { fill:#f6c453; stroke:none; }   /* грифель — контрастный жёлтый, читается на 24px */
/* лупа (интернет): появляется и водит по дуге — «ищет в сети» */
.ghost-mini.gm-web .gm-loupe { opacity:1; transform-box:fill-box; transform-origin:center; animation:gm-loupe-scan 1.7s ease-in-out infinite; }
@keyframes gm-loupe-scan { 0%,100% { transform:translate(0,0) rotate(0); } 30% { transform:translate(-3.5px,-2.5px) rotate(-8deg); } 65% { transform:translate(-6px,.5px) rotate(4deg); } }
.ghost-mini.gm-web .gm-body { animation:gm-look-side 1.7s ease-in-out infinite; }
@keyframes gm-look-side { 0%,100% { transform:rotate(0); } 40% { transform:rotate(-5deg); } }
/* карандаш (пишет/правит): появляется и штрихует */
.ghost-mini.gm-write .gm-pencil { opacity:1; transform-box:fill-box; transform-origin:center; animation:gm-pencil-draw .5s ease-in-out infinite; }
@keyframes gm-pencil-draw { 0%,100% { transform:translate(0,0); } 50% { transform:translate(1.6px,-1.4px); } }
/* шестерёнка (код/команда/1С): крутится */
.ghost-mini.gm-run .gm-gear { opacity:1; transform-box:fill-box; transform-origin:center; animation:gm-gear-spin 1.5s linear infinite; }
@keyframes gm-gear-spin { to { transform:rotate(360deg); } }
/* матричный дождь ПОЗАДИ призрака — бесконечный поток кода при gm-run/gm-write.
   тело перекрывает центр (лицо чистое), цифры «текут» по краям/за головой */
.gm-code { opacity:0; }
.ghost-mini.gm-run .gm-code,.ghost-mini.gm-write .gm-code { opacity:1; }
.gm-d { font:700 4px ui-monospace,monospace; fill:#3fb950; text-anchor:middle; }
.gm-col { animation:gm-rain 1.6s linear infinite; will-change:transform; }
.gm-col2 { animation-duration:2.1s; animation-delay:-.6s; }
.gm-col3 { animation-duration:1.8s; animation-delay:-1.1s; }
.gm-col4 { animation-duration:2.4s; animation-delay:-.3s; }
/* тайл из 16 цифр периодичен (шаг 32px) → сдвиг на 32px бесшовно зациклен */
@keyframes gm-rain { from { transform:translateY(-32px); } to { transform:translateY(0); } }
@keyframes gm-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2.5px); } }
@keyframes gm-blink { 0%,92%,100% { transform:scaleY(1); } 96% { transform:scaleY(.14); } }
/* 8 повадок маскота (дизайн-консультация с codex 10.07): РАЗНЫЕ типы движения —
   наклон/пульс/кивок/резкий поворот/вибрация/подпрыг/сдвиг/bounce, а не только глаза. */
/* think (по умолчанию): дышит + задумчивый наклон */
.ghost-mini.gm-think .gm-body,.ghost-mini.gm-look .gm-body { animation:gm-think-tilt 1.9s ease-in-out infinite; }
.ghost-mini.gm-think .gm-blob,.ghost-mini.gm-look .gm-blob { transform-origin:center; animation:gm-think-pulse 1.9s ease-in-out infinite; }
@keyframes gm-think-tilt { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(5deg) translateY(-1px); } }
@keyframes gm-think-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
/* read: надевает очки + сканирует строку за строкой (вертикально) */
.ghost-mini.gm-read .gm-glasses { animation:gm-wear .45s ease-out forwards; }
@keyframes gm-wear { to { opacity:1; transform:translateY(0); } }
.ghost-mini.gm-read .gm-body { animation:gm-read-scan 1.4s steps(3,end) infinite; }
@keyframes gm-read-scan { 0% { transform:translateY(-1px); } 33% { transform:translateY(0); } 66% { transform:translateY(1px); } 100% { transform:translateY(-1px); } }
/* write: быстрые кивки, будто печатает */
.ghost-mini.gm-write .gm-body { animation:gm-write-nod .55s ease-in-out infinite; }
.ghost-mini.gm-write .gm-eyes { animation:gm-write-down .55s ease-in-out infinite; }
@keyframes gm-write-nod { 0%,100% { transform:rotate(0) translateY(0); } 45% { transform:rotate(7deg) translateY(1px); } }
@keyframes gm-write-down { 0%,100% { transform:translateY(0); } 45% { transform:translateY(2px); } }
/* search: резкие повороты, как поиск по полкам */
.ghost-mini.gm-search .gm-body { animation:gm-search-snap 1s cubic-bezier(.3,0,.2,1) infinite; }
.ghost-mini.gm-search .gm-eyes { animation:gm-search-eyes 1s steps(4,end) infinite; }
@keyframes gm-search-snap { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-14deg); } 45% { transform:rotate(12deg); } 70% { transform:rotate(-6deg); } }
@keyframes gm-search-eyes { 0% { transform:translateX(-2px); } 25% { transform:translateX(2px); } 50% { transform:translateY(-1px); } 75% { transform:translateY(1px); } 100% { transform:translateX(-2px); } }
/* run: вибрация терминала + squash&stretch — «мотор работает» */
.ghost-mini.gm-run .gm-body { animation:gm-run-shake 1.2s ease-in-out infinite; }
.ghost-mini.gm-run .gm-blob { transform-origin:center; animation:gm-run-squash 1.2s ease-in-out infinite; }
/* спокойное «сосредоточен на коде» покачивание — не вибрация: активность несёт матрица, тело не дёргается */
@keyframes gm-run-shake { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.6px); } }
@keyframes gm-run-squash { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.03,.97); } }
/* wait: медленный подпрыг + редкое моргание — ждёт человека */
.ghost-mini.gm-wait .gm-body { animation:gm-wait-bob 2.2s ease-in-out infinite; }
.ghost-mini.gm-wait .gm-eye { animation:gm-wait-blink 2.2s ease-in-out infinite; }
@keyframes gm-wait-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes gm-wait-blink { 0%,88%,100% { transform:scaleY(1); } 92% { transform:scaleY(.15); } }
/* delegate: отскок вбок + stretch — передаёт задачу дальше */
.ghost-mini.gm-delegate .gm-body { animation:gm-deleg-pass 1.15s ease-in-out infinite; }
.ghost-mini.gm-delegate .gm-blob { transform-origin:center; animation:gm-deleg-stretch 1.15s ease-in-out infinite; }
@keyframes gm-deleg-pass { 0%,100% { transform:translateX(0) rotate(0); } 35% { transform:translateX(4px) rotate(12deg); } 65% { transform:translateX(-2px) rotate(-5deg); } }
@keyframes gm-deleg-stretch { 0%,100% { transform:scale(1,1); } 35% { transform:scale(1.16,.9); } 65% { transform:scale(.95,1.08); } }
/* done: happy-bounce + улыбка глазами */
.ghost-mini.gm-done .gm-body { animation:gm-done-pop 2.6s ease-out infinite; }
.ghost-mini.gm-done .gm-eyes { animation:gm-done-smile 2.6s ease-out infinite; }
@keyframes gm-done-pop { 0% { transform:scale(1); } 8% { transform:scale(1.14,.9) translateY(1px); } 16% { transform:scale(.96,1.08) translateY(-2px); } 26%,100% { transform:scale(1) translateY(0); } }
@keyframes gm-done-smile { 0%,26%,100% { transform:scaleY(1); } 12% { transform:scaleY(.45); } }
.think-timer { margin-left:8px; font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; opacity:.7; }   /* прижат к тексту действия (auto улетал на другой край строки) */
.send.stopbtn { background:var(--danger); border-color:var(--danger); }
/* тонкие скроллбары в стиле сайта */
* { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover { background:var(--mut); }
*::-webkit-scrollbar-track { background:transparent; }
.composer textarea { scrollbar-width:none; -ms-overflow-style:none; }
.composer textarea::-webkit-scrollbar { width:0; height:0; display:none; }
/* боковые строки: сессии + навигация */
.s-new { margin:2px 4px 8px; }
.s-item { padding:7px 9px; border-radius:7px; margin:1px 4px; }
.s-item.active { box-shadow:inset 2px 0 0 var(--acc); }
.nav a { font-size:13px; }

/* ── Фокус: мышь не рисует обводку (:focus), клавиатура — рисует всегда (:focus-visible).
   Раньше outline:none стоял глобально — Tab-навигация была слепой (WCAG 2.4.7, Nielsen «видимость статуса»). ── */
:focus { outline:none; }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* Поля ввода: без оранжевого кольца — фокус показывает светлая обводка самого поля (белая в тёмной теме) */
input:focus, select:focus, textarea:focus { border-color:var(--txt); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; border-color:var(--txt); }
.composer textarea { background:var(--panel2); border-color:var(--line); border-radius:10px; }
.composer textarea:focus { border-color:var(--txt); }

/* ── Поле промта с иконкой микрофона ── */
.prompt-wrap { flex:1; display:flex; align-items:center; gap:4px; }
.prompt-wrap textarea { flex:1; }
.mic-wrap { flex:0 0 auto; display:flex; align-items:center; align-self:flex-end; padding-bottom:2px; }

/* индикатор изоляции запуска кода */
.cb-runmeta { position:absolute; top:6px; left:12px; font-size:10px; color:var(--mut); letter-spacing:.3px; }
.cb-runmeta.warn { color:var(--warn); }
.cb-output.show .cb-out-pre { padding-top:22px; }
.cb-frame { width:100%; height:300px; border:0; background:#fff; margin-top:24px; display:block; }
.cb-back, .cb-runmeta { z-index:2; }

/* ── Ask card (Claude-style clarification widget) ── */
.ask-card { background:var(--panel2); border:1px solid var(--line); border-radius:14px; margin-top:16px; overflow:hidden; animation:askIn .18s ease; }
@keyframes askIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.ask-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; }
.ask-card-title { font-size:14px; font-weight:600; color:var(--txt); }
.ask-card-close { background:transparent; border:none; color:var(--mut); padding:3px; border-radius:6px; cursor:pointer; display:inline-flex; }
.ask-card-close:hover { color:var(--txt); background:var(--line); }
.ask-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-top:1px solid var(--line); transition:background .1s; }
.ask-item:hover, .ask-item.focused { background:var(--panel); }
.ask-item-num { width:22px; height:22px; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--mut); flex:0 0 auto; transition:background .1s,border-color .1s,color .1s; }
.ask-item.focused .ask-item-num { background:var(--acc); border-color:var(--acc); color:#fff; }
.ask-item-text { flex:1; font-size:14px; color:var(--txt); }
.ask-item-return { color:var(--mut); font-size:13px; opacity:0; transition:opacity .1s; flex:0 0 auto; line-height:1; }
.ask-item.focused .ask-item-return { opacity:1; }
.ask-other-row { display:flex; align-items:center; gap:9px; padding:9px 14px; border-top:1px solid var(--line); }
.ask-other-icon { color:var(--mut); display:inline-flex; flex:0 0 auto; }
.ask-other-input { flex:1; background:transparent; border:none; color:var(--txt); font-size:13px; padding:0; min-width:0; }
.ask-other-input::placeholder { color:var(--mut); }
.ask-other-input:focus { outline:none; border:none; }
.ask-skip { background:transparent; border:1px solid var(--line); color:var(--mut); padding:4px 10px; border-radius:7px; font-size:12px; cursor:pointer; white-space:nowrap; flex:0 0 auto; line-height:1.4; }
.ask-skip:hover { color:var(--txt); border-color:var(--mut); }
.ask-footer { padding:8px 14px; border-top:1px solid var(--line); font-size:11px; color:var(--mut); display:flex; align-items:center; gap:4px; }
.ask-footer kbd { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:10px; font-family:inherit; }

/* скачивание файла в панели рабочей папки */
.rp-dl { cursor:pointer; color:var(--mut); margin-left:auto; display:inline-flex; flex:0 0 auto; }
.rp-dl:hover { color:var(--acc); }
.rp-file .fi, .rp-file .rp-fname { cursor:pointer; }

/* просмотрщик файлов с интерпретатором */
.fv-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.fv-head h2 { margin:0; }
.fv-frame { width:100%; height:62vh; border:1px solid var(--line); border-radius:8px; background:#fff; display:block; }
.fv-code { max-height:62vh; overflow:auto; margin:0; }
.mini.fv-tab.active { background:var(--acc-soft); color:var(--acc); border-color:transparent; }
.modal-card { max-width:900px; }

/* ── v7: ответы ИИ на всю ширину без бордера; правая панель — карточки в духе фото ── */
.msg.assistant { background:transparent; border:none; max-width:100%; padding:4px 0 2px; margin-bottom:20px; }   /* воздух между блоками сообщений (действия ИИ — внутри, поэтому интервал снизу самого ответа) */
.rightpanel { background:var(--panel); }
.rp-scroll { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:12px; }
.rp-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.rp-head { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; cursor:pointer; font-size:13px; font-weight:600; color:var(--txt); user-select:none; }
.rp-head .chev { color:var(--mut); display:inline-flex; transform:rotate(90deg); transition:transform .15s; }
.rp-card.collapsed .chev { transform:rotate(0); }
.rp-card.collapsed .rp-content { display:none; }
.rp-content { padding:0 13px 13px; }
.rp-sub { font-size:11px; color:var(--mut); margin:12px 0 5px; }
.rp-file { display:flex; align-items:center; gap:8px; padding:6px 0; color:var(--txt); cursor:pointer; }
.rp-file:hover { color:var(--acc); }
.rp-file .fi { color:var(--mut); display:inline-flex; flex:0 0 auto; }
.rp-fname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-skill { display:flex; align-items:center; gap:7px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 10px; font-size:12px; color:var(--txt); }
.rp-skill svg { color:var(--mut); flex:0 0 auto; }

/* ── v8: copy без бордера; центрированная колонка диалога; режимы списка; тема в профиле ── */
.msg-actions .mini { border:none; padding:3px 5px; }
.chat-main .msgs { padding:18px max(16px, calc((100% - 760px) / 2)); }
.composer { padding:10px max(14px, calc((100% - 760px) / 2)); }
.s-top { display:flex; gap:6px; align-items:center; margin:0 4px 8px; }
.s-top .s-new { flex:1; margin:0; }
.s-top .s-mode { flex:0 0 auto; }
/* компактный режим списка «как на фото» */
.s-label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; margin:8px 9px 4px; }
.s-row { display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:7px; cursor:pointer; color:var(--mut); margin:1px 4px; }
.s-row:hover { background:var(--panel2); color:var(--txt); }
.s-row.active { background:var(--acc-soft); color:var(--txt); }
.s-row .s-dot { width:7px; height:7px; border-radius:50%; border:1.5px solid var(--mut); flex:0 0 auto; box-sizing:border-box; }
.s-row.active .s-dot { background:var(--acc); border-color:var(--acc); }
.nav-less { color:var(--mut); }
/* Статусы точки у чата: думает (прыгающие точки) · ждёт вашего ответа (жёлтая) · готов ответ (зелёная) */
.s-dot.dot-done { background:var(--ok); border-color:var(--ok); }
.s-dot.dot-wait { background:var(--warn); border-color:var(--warn); }
.s-dot.dot-think { border:none; background:none; display:inline-flex; gap:2px; align-items:center; width:auto; height:auto; }
.s-dot.dot-think i { width:3px; height:3px; border-radius:50%; background:var(--acc); animation:dotjump 1s infinite; }
.s-dot.dot-think i:nth-child(2){ animation-delay:.16s } .s-dot.dot-think i:nth-child(3){ animation-delay:.32s }
@keyframes dotjump { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-3px);opacity:1} }
.s-row .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.s-row .s-x { opacity:0; cursor:pointer; flex:0 0 auto; color:var(--mut); }
.s-row:hover .s-x { opacity:.6; }
/* Список чатов — теперь в левом сайдбаре (между навигацией и аккаунтом), компактный «s-label» вид */
/* Группа «Новый чат» + список чатов — отделена отступом+линией от блока вкладок (это отдельная группа) */
.side-sessions { flex:1 1 auto; min-height:0; overflow:auto; margin:16px 0 8px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.side-sessions .s-new { width:100%; justify-content:center; margin:0 0 6px; box-sizing:border-box; }
.side-sessions:empty { display:none; }
/* «Ещё» — выглядит как обычный пункт навигации (прикреплён к блоку вкладок, а не отдельная секция).
   При раскрытии сам «Ещё» ПРОПАДАЕТ, а скрытые вкладки выезжают вниз (плавно). */
.nav-head { display:flex; align-items:center; gap:10px; padding:9px 11px; margin-bottom:2px; border-radius:8px; color:var(--mut); font-size:14px; line-height:1.3; cursor:pointer; user-select:none; transition:color .15s ease, background-color .15s ease; }
.nav-head:hover { color:var(--txt); background:var(--panel2); }
.nav-head > span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-chev { flex:0 0 auto; width:16px; height:16px; opacity:.55; transition:transform .2s ease, opacity .15s ease; }
.nav-head:hover .nav-chev { opacity:.8; }
.nav-more { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.nav.more-open .nav-more { max-height:360px; }         /* скрытые вкладки выезжают вниз */
.nav.more-open #navmore { display:none; }              /* сама «Ещё» пропадает при раскрытии */
/* Свёрнутый сайдбар (кнопка ⟨): прячем список чатов, «Ещё» и его секцию, чтобы не вылезали за 62px */
.layout.collapsed .side-sessions,
.layout.collapsed .nav-head,
.layout.collapsed .nav-more { display:none; }
/* Красивый пустой экран нового чата */
.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; min-height:62vh; padding:24px; }
.chat-empty .ce-logo { opacity:.95; }
.chat-empty h2 { font-size:23px; font-weight:500; margin:0; color:var(--txt); }
.chat-empty p { color:var(--mut); font-size:14px; max-width:460px; margin:0; line-height:1.6; }
/* Пикер модели: Claude → выбор модели + глубина */
.mp-claude { padding:8px 4px 4px; border-top:1px solid var(--line); margin-top:4px; }
.mp-sub-label { font-size:11px; color:var(--mut); margin:6px 8px 4px; }
.mp-chips { display:flex; gap:5px; flex-wrap:wrap; padding:0 6px 4px; }
.mp-chip { padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--mut); font-size:12px; cursor:pointer; transition:all .12s; }
.mp-chip:hover { color:var(--txt); }
.mp-chip.active { background:var(--acc-soft); color:var(--acc); border-color:var(--acc); }
/* ── «Мой отдел» v2: люди с фото, чипы сроков (как в Битриксе), нагрузка, активность, группы ── */
/* Палитра нагрузки прогнана валидатором dataviz (обе темы); порядок сегментов над-/в работе/сделано
   разводит красный и зелёный оранжевым (CVD), у каждого сегмента есть числовая подпись */
:root { --wl-over:#d95555; --wl-open:#cf7226; --wl-done:#2f9e57; }
[data-theme="light"] { --wl-over:#d63b3b; --wl-open:#e8720c; --wl-done:#16b85c; }
.md-col { flex:1; min-width:0; }
.md-nm { font-size:13.5px; }
.md-sub { font-size:12px; color:var(--mut); margin-top:2px; }
.md-red { color:var(--wl-over); font-weight:600; }
.md-green { color:var(--wl-done); }
.md-nums { font-size:12px; }
.md-det-h { margin:6px 0 2px; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.md-units { margin-bottom:12px; border-bottom:none; padding:0 0 2px; scrollbar-width:none; }   /* лента отделов: скролл вбок, без рамки таск-тулбара */
.md-units::-webkit-scrollbar { height:0; }
.md-uchip { flex:0 0 auto; }
.md-uchip b { font-weight:600; }
.md-stats { margin:0 0 14px; flex-wrap:wrap; }
/* фото сотрудника: инициалы под картинкой (сбой фото деградирует незаметно) */
.md-photo { flex:0 0 auto; position:relative; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.md-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* эффективность: цвет + ЧИСЛО (не только цвет) */
.md-eff { font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px; margin-left:7px; vertical-align:1px; }
.md-eff.hi { background:color-mix(in srgb, var(--wl-done) 18%, transparent); color:var(--wl-done); }
.md-eff.mid { background:color-mix(in srgb, var(--wl-open) 18%, transparent); color:var(--wl-open); }
.md-eff.lo { background:color-mix(in srgb, var(--wl-over) 18%, transparent); color:var(--wl-over); }
/* кликабельные элементы отдела/структуры/дашборда: карточка по клику */
.md-task.clickable, .md-pname, .md-pwrap, .org-head.clickable, .org-chip.clickable, .d2-person.clickable { cursor:pointer; }
.md-task.clickable:hover .md-task-t, .md-pname:hover { color:var(--acc); }
.org-head.clickable:hover b { color:var(--acc); }
.d2-person.clickable:hover .d2-person-nm { color:var(--acc); }
/* фото поверх инициалов в аватарках структуры и дашборда */
/* карточка задачи/сотрудника: сетка полей и описание */
.md-tv-grid { display:grid; grid-template-columns:110px 1fr; gap:5px 12px; font-size:13px; }
.md-tv-desc { font-size:13px; white-space:pre-wrap; color:var(--txt); background:var(--panel2); border-radius:8px; padding:10px 12px; max-height:220px; overflow:auto; }
.md-tv-comments { max-height:180px; overflow:auto; }
.md-team-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
/* переключатель видов задач — тихие ссылки, как «Список | Сроки | Гант» в Битриксе */
.md-views { display:inline-flex; gap:2px; }
.md-view { padding:5px 10px; border-radius:7px; font-size:12.5px; color:var(--mut); cursor:pointer; }
.md-view:hover { color:var(--txt); }
.md-view.on { background:var(--panel2); color:var(--txt); font-weight:600; }
/* канбан «Сроки»: цветные колонки, как в Битриксе */
.md-kanban { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.md-kcol { flex:0 0 236px; min-width:236px; }
.md-khead { display:flex; align-items:center; gap:6px; color:#fff; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; }
.md-khead b { margin-left:auto; font-weight:700; opacity:.9; }
/* padding:0 обязателен: глобальный button даёт 8px 14px, и при border-box кнопка не ужимается уже 28px — «+» растягивало прямоугольником */
.md-kadd { border:none; background:rgba(255,255,255,.22); color:#fff; width:20px; height:20px; padding:0; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; }
.md-kadd:hover { background:rgba(255,255,255,.38); }
.md-kbody { display:flex; flex-direction:column; gap:8px; margin-top:8px; max-height:62vh; overflow-y:auto; scrollbar-width:none; }
.md-kbody::-webkit-scrollbar { width:0; }
.md-kcard { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; }
.md-kcard:hover { border-color:var(--acc); }
.md-kt { font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.md-kempty { color:var(--mut); font-size:11.5px; text-align:center; padding:10px 0; }
/* группы задач по срокам — как вид «Сроки» в Битриксе */
.md-group { margin-top:4px; }
.md-group > summary { cursor:pointer; list-style:none; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); padding:8px 0 6px; display:flex; align-items:center; gap:6px; }
.md-group > summary::before { content:'▸'; font-size:10px; transition:transform .12s; }
.md-group[open] > summary::before { transform:rotate(90deg); }
.md-group > summary.md-red { color:var(--wl-over); }
.md-group > summary.md-green { color:var(--wl-done); }
.md-twho { display:inline-flex; align-items:center; gap:6px; min-width:0; }
/* таблица задач в стиле «Списка» Битрикса: срок | задача | (исполнитель) | постановщик */
.md-thead, .md-trow { display:grid; grid-template-columns:128px 1fr 130px; gap:10px; align-items:center; }
.md-thead.wide, .md-trow.wide { grid-template-columns:128px 1fr 150px 150px; }
.md-thead { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); padding:6px 0 6px; border-bottom:1px solid var(--line); }
.md-trow { padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.md-trow:last-child { border-bottom:none; }
.md-trow:hover { background:color-mix(in srgb, var(--panel2) 55%, transparent); }
.md-trow .md-tt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.md-trow:hover .md-tt { color:var(--acc); }
.md-tcell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.md-more { margin-top:6px; font-size:12px; }
.md-more > summary { cursor:pointer; color:var(--acc); list-style:none; padding:3px 0; }
.md-moret { margin-top:8px; padding:6px 12px; font-size:12.5px; }
@media (max-width:768px) {
  .md-thead.wide, .md-trow.wide { grid-template-columns:104px 1fr 96px; }
  .md-thead.wide span:last-child, .md-trow.wide .md-tcell:last-child { display:none; }   /* постановщик на телефоне — в карточке */
  .md-thead, .md-trow { grid-template-columns:104px 1fr; }
  .md-trow .md-tcell.muted { display:none; }
}
/* зелёная точка «в сети» — как в Битриксе */
.md-on { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--wl-done); margin-right:4px; vertical-align:1px; }
/* чипы сроков — семантика Битрикса: красный просрочен / синий скоро / серый далеко / зелёный сделана */
.md-chip { flex:0 0 auto; font-size:11px; border-radius:10px; padding:2px 8px; white-space:nowrap; }
.md-chip.over { background:color-mix(in srgb, var(--wl-over) 16%, transparent); color:var(--wl-over); font-weight:600; }
.md-chip.soon { border:1px solid var(--info); color:var(--info); }
.md-chip.far { border:1px solid var(--line); color:var(--mut); }
.md-chip.donec { color:var(--wl-done); border:1px solid color-mix(in srgb, var(--wl-done) 45%, transparent); }
/* нагрузка по людям: горизонтальные стеки с 2px зазорами и числами в сегментах */
.md-wl-row { display:flex; align-items:center; gap:10px; margin:5px 0; }
.md-wl-nm { flex:0 0 128px; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; color:var(--mut); }
.md-wl-track { display:flex; gap:2px; min-width:40px; }
.md-seg { height:18px; border-radius:4px; min-width:17px; font-size:10.5px; font-weight:600; color:#fff; display:flex; align-items:center; justify-content:center; }
.md-seg.over { background:var(--wl-over); }
.md-seg.open { background:var(--wl-open); }
.md-seg.done { background:var(--wl-done); }
/* активность по дням: тонкие столбики с ховер-тултипом (title) */
/* строки людей: разворот со списком задач */
.md-person { border-bottom:1px solid var(--line); }
.md-person:last-child { border-bottom:none; }
.md-person > summary { display:flex; gap:10px; align-items:center; padding:10px 0; cursor:pointer; list-style:none; }
.md-person > summary.noexp { cursor:default; }
.md-person > summary::-webkit-details-marker { display:none; }
.md-chev { color:var(--mut); transition:transform .15s; }
.md-person[open] .md-chev { transform:rotate(180deg); }
.md-tasks { padding:0 0 12px 50px; }
.md-task { display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:12.5px; }
.md-task.done .md-task-t { color:var(--mut); }
.md-task-t { min-width:0; }
.md-grp { padding:8px 0; border-bottom:1px solid var(--line); }
.md-grp:last-child { border-bottom:none; }
.md-grp > summary { cursor:pointer; list-style:none; font-size:13px; }
.md-msg { font-size:12.5px; padding:4px 0 4px 10px; border-left:2px solid var(--line); margin:4px 0 4px 2px; }
@media (max-width:768px) {
  .md-charts { grid-template-columns:1fr; }
  .md-wl-nm { flex-basis:92px; }
  .md-tasks { padding-left:12px; }
}
/* Ползунок глубины размышлений (все уровни CLI); подпись — текущий уровень словами */
.mp-slider { padding:2px 10px 6px; min-width:190px; }
.mp-slider input[type=range] { width:100%; accent-color:var(--acc); cursor:pointer; }
.mp-slider-lbl { font-size:12px; color:var(--txt); text-align:center; margin-top:1px; }
.s-row .s-x { opacity:0; color:var(--mut); display:inline-flex; }
.s-row:hover .s-x { opacity:.65; }
/* совместный чат: бейдж участников в строке (в стиле локальных чатов, не «битрикс-плашка») */
.s-row .s-shared { display:inline-flex; align-items:center; flex:0 0 auto; color:var(--acc); opacity:.85; }
.s-row .s-pin { display:inline-flex; align-items:center; flex:0 0 auto; color:var(--acc); opacity:.9; }   /* значок закреплённого чата */
.s-row .s-imp { flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--mut); border:1px solid var(--line); border-radius:4px; padding:0 4px; line-height:14px; }   /* бейдж импортированного чата (GPT/CL) */
/* «Смотреть глазами»: переключатель роли в меню аккаунта + плашка активного превью */
.va-sw { border-top:1px solid var(--line); margin-top:6px; padding:8px 10px 4px; }
.va-lbl { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--mut); letter-spacing:.03em; text-transform:uppercase; margin-bottom:6px; }
.va-btns { display:flex; gap:4px; }
.va-b { flex:1; border:1px solid var(--line); background:var(--panel); color:var(--mut); border-radius:6px; padding:4px 2px; font-size:11px; cursor:pointer; }
.va-b:hover { color:var(--txt); border-color:var(--mut); }
.va-b.on { background:var(--acc-soft); color:var(--acc); border-color:var(--acc); font-weight:600; }
.va-banner { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1.5px solid var(--acc); border-radius:20px; padding:5px 14px; font-size:12.5px; color:var(--txt);
  box-shadow:0 6px 22px rgba(0,0,0,.18); }
.va-banner svg { color:var(--acc); }
.va-banner button { border:none; background:var(--acc); color:#fff; border-radius:12px; padding:3px 10px; font-size:11.5px; cursor:pointer; }

/* «Под капотом»: таймлайн тракта ответа в правой панели (админская функция) */
#rp-trace { max-height:46vh; overflow:auto; }
.tr-line { position:relative; padding-left:2px; }
.tr-line::before { content:''; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line); border-radius:1px; }   /* вертикальная нить цепочки */
.tr-step { position:relative; display:flex; gap:10px; padding:5px 0 5px 0; }
.tr-dot { flex:0 0 auto; width:12px; height:12px; margin-top:3px; border-radius:50%; background:var(--panel); border:2.5px solid var(--acc); z-index:1; }
.tr-dot[data-stage="движок"] { background:var(--acc); }
.tr-dot[data-stage="финал"] { border-color:var(--ok); background:var(--ok); }
.tr-dot[data-stage="доступ"] { border-color:var(--warn); }
.tr-body { min-width:0; flex:1; }
.tr-top { display:flex; align-items:center; gap:8px; }
.tr-stage { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--acc); background:var(--acc-soft); border-radius:4px; padding:1px 6px; }
.tr-step:has(.tr-dot[data-stage="финал"]) .tr-stage { color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.tr-t { font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; }
.tr-title { font-size:12.5px; font-weight:600; color:var(--txt); margin-top:2px; overflow-wrap:anywhere; }
.tr-reason { font-size:11px; line-height:1.45; color:var(--mut); margin-top:2px; overflow-wrap:anywhere; }
.s-row.active .s-shared { opacity:1; }
/* кебаб-меню действий чата (⋮, как у битрикс-строк) */
.s-row .s-kebab { opacity:0; flex:0 0 auto; background:none; border:0; color:var(--mut); cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.s-row:hover .s-kebab { opacity:.7; }
.s-row .s-kebab:hover { opacity:1; color:var(--txt); }
/* ТАЧ/МОБИЛА: ховера нет — действия чата видимы всегда (иначе не переименовать/не удалить).
   Два критерия: указатель-палец И узкий экран (эмуляторы/планшеты с мышью). */
@media (hover:none), (pointer:coarse), (max-width:768px) {
  .s-row .s-kebab, .s-row .s-x { opacity:.55; }
  .s-row .s-kebab { padding:4px 6px; }   /* крупнее цель для пальца */
}
.chat-menu { position:fixed; z-index:210; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:0 10px 30px rgba(0,0,0,.3); display:flex; flex-direction:column; min-width:172px; }
.chat-menu button { display:flex; align-items:center; gap:8px; background:none; border:0; color:var(--txt); font-size:13px; padding:8px 10px; border-radius:7px; cursor:pointer; text-align:left; }
.chat-menu button:hover { background:var(--panel2); }
.chat-menu button.danger { color:var(--danger); }
/* непрочитанные: цифра вместо точки статуса */
.s-row .s-unread { flex:0 0 auto; min-width:17px; height:17px; border-radius:9px; background:var(--acc); color:var(--acc-fg); font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; box-sizing:border-box; }
/* разделитель «Новые сообщения» в ленте чата */
.unread-div { display:flex; align-items:center; gap:10px; margin:14px 0 8px; color:var(--acc); font-size:11.5px; white-space:nowrap; }
.unread-div::before, .unread-div::after { content:''; flex:1; height:1px; background:var(--acc-soft); }
/* ── Оргструктура: дерево отделов с линиями связи (не «свалка» отступов) ── */
.org-tree { margin-top:6px; }
.org-dept { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:12px 14px; margin:0 0 12px; }
.org-dept-hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.org-dept-hd .org-dot { width:8px; height:8px; border-radius:50%; background:var(--acc); flex:0 0 auto; }
.org-dept-hd b { font-size:14px; }
.org-dept-hd .org-cnt { margin-left:auto; font-size:11.5px; color:var(--mut); }
.org-head { display:flex; align-items:center; gap:9px; padding:5px 0; }
.org-head .org-hn { display:flex; flex-direction:column; line-height:1.25; }
.org-head .org-hn b { font-size:13px; }
.org-head .org-hn span { font-size:11px; color:var(--mut); }
.org-nohead { font-size:12px; color:var(--mut); padding:4px 0; }
.org-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.org-chip { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:2px 10px 2px 2px; font-size:12px; }
.org-chip.out { opacity:.55; }
/* вложенные отделы = ветка с линией слева (оргдерево, а не лесенка карточек) */
.org-kids { margin:10px 0 0 14px; padding-left:16px; border-left:2px solid var(--acc-soft, rgba(120,120,255,.28)); }
.org-kids .org-dept { margin-bottom:10px; }
/* выбор темы в профиле */
.tsel { background:var(--bg); border:1px solid var(--line); color:var(--txt); padding:8px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:7px; }
.tsel.on { background:var(--acc-soft); border-color:var(--acc); color:var(--acc); }
/* бренд по размеру + стиль аккордеон-меню */
/* Бренд VALANACLAUDE — вариант 4 (выбор Михаила 03.07): плотный жирный капс 15px.
   Подгонка по живому замеру (нужно 129px): логотип 24, gap 7, кнопка-collapse компактнее. */
.brand { font-size:15px; white-space:nowrap; letter-spacing:0; font-weight:800; }
.brand-row { gap:7px; }
.brand-row #collapse { padding:2px; }
/* внутри brand-row у надписи НЕТ собственных отступов (двойной padding с .side .brand ужимал текст до «…») */
.brand-row .brand { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; padding:0 0 0 2px; }
.acct-menu .ghost { padding:8px 10px; font-size:13px; border-radius:8px; }
.acct-menu .ghost:hover { background:var(--panel2); color:var(--txt); }


/* ── Просмотрщик файлов — flex-панель в chat-wrap (отталкивает chat-main) ── */
.fv-panel {
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  height: 100vh;
  border-left: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  position: relative;
}

/* Рукоятка resize — левый край */
.fv-handle {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
}
.fv-handle::after {
  content: '';
  position: absolute;
  left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 40px;
  border-radius: 2px;
  background: var(--line);
  transition: background .15s;
}
.fv-handle:hover::after { background: var(--acc); }

/* Шапка панели */
.fv-ph {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}
.fv-ph-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
}
.fv-ph-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-ph-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Тело панели */
.fv-pbody {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.fv-pmd { padding: 18px 20px; font-size: 14px; flex: 1; overflow: auto; min-height: 0; }
.fv-edit { flex: 1; width: 100%; min-height: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--txt); padding: 16px 20px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; }
.fv-iframe { flex: 1; width: 100%; border: none; min-height: 0; background: #fff; display: block; }

/* Просмотр кода: каждая строка — отдельный flex-блок (номер + код).
   Длинные строки переносятся внутри своей колонки, нумерация не съезжает. */
.fv-codewrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
  padding: 8px 0;
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.375rem;
}
.code-line {
  display: flex;
  align-items: flex-start;
  border-left: 3px solid transparent;
}
.code-line:hover { background: var(--panel2); }
.code-line-num {
  flex: 0 0 auto;
  width: 2.6rem;
  padding-right: 8px;
  text-align: right;
  color: var(--mut);
  user-select: none;
  border-right: 1px solid var(--line);
}
.code-line-content {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  white-space: pre-wrap;
  word-break: break-all;
  background: transparent;
}
.code-line-content.hljs { background: transparent; }
.fv-panel .fv-tab.active { background: var(--acc-soft); color: var(--acc); border-color: transparent; }

/* Просмотрщик: загрузка, картинки/pdf, таблицы Excel, документы docx */
.fv-loading { padding:20px; color:var(--mut); font-size:13px; display:flex; align-items:center; gap:8px; }
.fv-media { flex:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; background:var(--panel2); padding:16px; }
.fv-media img { max-width:100%; height:auto; border-radius:6px; box-shadow:0 2px 14px rgba(0,0,0,.28); }
/* Excel: листы с вкладками */
.fv-sheets { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.fv-sheet-tabs { display:flex; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line); overflow-x:auto; flex:0 0 auto; }
.fv-stab.active { background:var(--acc-soft); color:var(--acc); border-color:transparent; }
.fv-sheet-scroll { flex:1; min-height:0; overflow:auto; padding:10px; }
.fv-sheets table { border-collapse:collapse; font-size:12px; }
.fv-sheets td, .fv-sheets th { border:1px solid var(--line); padding:4px 10px; white-space:nowrap; min-width:44px; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
.fv-sheets tr:first-child td { background:var(--panel2); font-weight:600; position:sticky; top:0; z-index:1; box-shadow:inset 0 -1px 0 var(--line); }
.fv-sheets tr:nth-child(even) td { background:rgba(128,128,128,.06); }
.fv-sheets tr:hover td { background:var(--acc-soft); }
/* ZIP — список содержимого архива */
.fv-zip { flex:1; min-height:0; overflow:auto; padding:10px 12px; }
.fv-zip-head { font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.fv-zip-row { display:flex; align-items:center; gap:10px; padding:6px 8px; border-bottom:1px solid var(--line); font-size:13px; }
.fv-zip-row:hover { background:var(--acc-soft); border-radius:6px; }
.fv-zip-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-zip-size { flex:0 0 auto; color:var(--mut); font-size:11.5px; font-variant-numeric:tabular-nums; }
/* Luckysheet — полноценный Excel внутри вьювера */
.fv-lucky { position: relative; flex: 1; width: 100%; min-height: 0; }
.fv-lucky .luckysheet { border: none; }
/* Вкладка «Таблицы»: селектор отдела и загрузка xlsx */
.tbl-dep-sel { width: calc(100% - 24px); margin: 0 12px 10px; padding: 7px 10px; background: var(--bg); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.tbl-upload { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px; border: 1px dashed var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--mut); }
.tbl-upload:hover { border-color: var(--acc); color: var(--acc); }
/* docx — как лист бумаги */
.fv-doc { flex:1; min-height:0; overflow:auto; background:#fff; color:#1a1a1a; padding:28px 32px; font-size:14px; line-height:1.55; }
.fv-doc img { max-width:100%; height:auto; }
.fv-doc table { border-collapse:collapse; margin:8px 0; }
.fv-doc td, .fv-doc th { border:1px solid #ccc; padding:4px 8px; }
.fv-doc h1, .fv-doc h2, .fv-doc h3 { margin:.6em 0 .3em; }

/* ── Карточки файлов (как в Claude) ── */
/* align-items:center — фото по центру (карточки на всю ширину, им всё равно) */
.file-cards-wrap { display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); width:100%; max-width:none; align-items:center; }
.file-cards-wrap .file-card { width:100%; }
/* Вложение в ТОЧКЕ появления в тексте (токен ⟦вложение:⟧ от моста) — по центру, как график .vchart */
.att-inline { display:flex; flex-direction:column; align-items:center; margin:14px 0; }
.att-inline .bot-image { margin:0; width:min(520px,100%); }
.att-inline .file-card { width:min(520px,100%); }
/* График советника (```chart) — по центру между абзацами; клик → лайтбокс (.md img) */
.vchart { display:flex; justify-content:center; margin:16px 0; }
.vchart img, .vchart svg { max-width:min(100%,520px); width:100%; height:auto; border-radius:14px; box-shadow:0 2px 12px rgba(20,30,50,.14); }
.vchart img { cursor:zoom-in; }
.vchart svg { font-family:inherit; }   /* inline-SVG: тема через var(--*), шрифт — от страницы (в <img> и то и то не работало) */
/* Инлайн-картинка, сгенерированная/приложенная ботом (в т.ч. $imagegen ChatGPT) */
/* Фото бота: skeleton-заглушка при загрузке (shimmer), плавное проявление по onload, ошибка — только при реальном сбое (дизайн Codex) */
.bot-image { position:relative; display:block; margin:6px 0; width:min(440px,100%); border-radius:12px; overflow:hidden; }
.bot-image img { display:block; width:100%; border-radius:12px; border:1px solid var(--line); cursor:zoom-in;
  opacity:0; transform:scale(1.015); transition:opacity .28s ease, transform .42s ease; }
.bot-image.loaded img { opacity:1; transform:scale(1); }
.bot-image.loading img, .bot-image.error img { opacity:0; }
/* loading — мягкий shimmer + пульсирующая рамка */
.bot-image.loading { min-height:200px; background:linear-gradient(180deg,#303030 0%,#292929 100%); }
.bot-image.loading::before { content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(224,117,45,.10) 22%, rgba(255,255,255,.08) 34%, rgba(224,117,45,.10) 46%, transparent 62%);
  background-size:260% 100%; animation:bot-image-shimmer 1.35s ease-in-out infinite; }
.bot-image.loading::after { content:""; position:absolute; inset:18px; border-radius:10px; border:1px solid rgba(224,117,45,.16);
  animation:bot-image-pulse 1.6s ease-in-out infinite; }
/* error — только если fetch реально упал */
.bot-image.error { min-height:120px; display:grid; place-items:center; background:linear-gradient(180deg,#303030 0%,#262626 100%); border:1px solid rgba(224,117,45,.28); }
.bot-image.error::before { content:"Не удалось загрузить изображение"; max-width:80%; text-align:center; color:var(--mut); font-size:13px; }
@keyframes bot-image-shimmer { 0% { background-position:120% 0; } 100% { background-position:-120% 0; } }
@keyframes bot-image-pulse { 0%,100% { opacity:.35; } 50% { opacity:.8; } }
.file-card { display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:14px; margin:4px 0; border-radius:14px; cursor:pointer; transition:.18s; }
.file-card:hover { background:var(--panel2); border-color:var(--acc); }
.file-card-icon { width:40px; height:40px; min-width:40px; border-radius:10px; background:color-mix(in srgb, var(--fc, var(--acc)) 12%, transparent); border:1px solid color-mix(in srgb, var(--fc, var(--acc)) 25%, transparent); display:flex; align-items:center; justify-content:center; flex:0 0 40px; }
.file-card-info { flex:1; min-width:0; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.file-card-name { width:100%; font-size:14px; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.file-card-meta { margin-top:6px; }
.file-card-badge { font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fc, var(--mut)); background:color-mix(in srgb, var(--fc, var(--mut)) 12%, transparent); border-radius:4px; padding:1px 6px; display:inline-block; }
.file-card-dl { margin-left:auto; align-self:center; background:transparent; border:1px solid var(--line); color:var(--mut); width:32px; height:32px; padding:0; border-radius:7px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:border-color .15s, color .15s, background .15s; }
.file-card-dl:hover { border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }

/* ── Единый пикер людей «Поделиться/Раздать» (13.07): иерархия по отделам + СВОИ галочки вместо
   системных (жалоба: «поделиться везде разная, как системная без css галочка»). ── */
.ppl-pick { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); }
.ppl-dep { margin:0 0 12px; }
.ppl-dep:last-child { margin-bottom:0; }
.ppl-row { display:flex; align-items:center; gap:8px; margin:0 0 2px 18px; }
.ppl-row .ppk { flex:1; margin:0; }
.ppl-extra { padding:2px 7px; font-size:11px; flex:0 0 auto; }
.ppk { display:flex; align-items:center; gap:9px; margin:0 0 6px; font-size:13px; color:var(--txt); cursor:pointer; position:relative; padding:3px 4px; border-radius:7px; }
.ppk:hover { background:var(--panel2); }
.ppk.dep { font-size:12px; color:var(--mut); margin-bottom:4px; }
.ppk.dep b { color:var(--txt); font-size:12.5px; }
.ppk input { position:absolute; opacity:0; width:0; height:0; }
.ppk .ppk-box { width:16px; height:16px; min-width:16px; border:1.5px solid var(--line); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; transition:.14s; background:var(--panel); box-sizing:border-box; }
.ppk input:checked + .ppk-box { background:var(--acc); border-color:var(--acc); }
.ppk input:checked + .ppk-box::after { content:''; width:8px; height:4px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(0,-1px); }
.ppk:hover .ppk-box { border-color:var(--acc); }
.ppl-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppl-sub { color:var(--mut); font-size:11px; margin-left:auto; padding-left:10px; flex:0 0 auto; }
.cb-saved-chips { padding:10px 12px; background:var(--panel2); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }

/* ── Шаги агента: сворачиваемый блок "Размышляю…" ── */
.steps-block { margin-bottom:10px; }
.steps-summary {
  display:flex; align-items:center; gap:9px;
  list-style:none; cursor:pointer;
  font-size:13px; color:var(--mut);
  padding:2px 0;
  user-select:none;
}
.steps-summary::-webkit-details-marker { display:none; }
.steps-summary .steps-title { font-weight:500; color:var(--txt); white-space:nowrap; }
.steps-summary .steps-sub { font-size:11.5px; color:var(--mut); opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.steps-summary .steps-timer { margin-left:auto; font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; opacity:.7; flex:0 0 auto; }
.steps-summary > svg:last-child { transition:transform .15s; flex:0 0 auto; }
.steps-block[open] .steps-summary > svg:last-child { transform:rotate(90deg); }
.steps-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
/* Блок «План» — задачи бота (TaskCreate/TaskUpdate), как в Claude Code */
.plan-list { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.plan-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.plan-mark { flex:0 0 auto; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--mut); }
.plan-mark .spinner { width:12px; height:12px; }
.plan-dot { width:8px; height:8px; border:1.5px solid var(--mut); border-radius:50%; display:inline-block; }
.plan-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); }
.plan-completed .plan-text { color:var(--mut); text-decoration:line-through; }
.plan-completed .plan-mark { color:var(--ok); }
.plan-in_progress .plan-text { font-weight:600; }
.plan-in_progress .plan-mark { color:var(--acc); }

/* Блок «Ход мыслей» — живой текст extended thinking Клода */
.think-text {
  margin-top:8px; padding:8px 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  font-size:12.5px; line-height:1.5; color:var(--mut); font-style:italic;
  max-height:160px; overflow-y:auto; white-space:pre-wrap;
}

/* Блок «Контекст из базы знаний» — реальный срез бота */
.kb-list { gap:8px; }
.kb-src { border-left:2px solid var(--acc); padding:3px 0 3px 10px; }
.kb-src-head { display:flex; align-items:center; gap:6px; min-width:0; }
.kb-src-head svg { flex:0 0 auto; opacity:.7; }
.kb-src-title { font-size:13px; color:var(--txt); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-src-date { font-size:11px; color:var(--mut); flex:0 0 auto; margin-left:auto; }
.kb-src-snip { font-size:12px; color:var(--mut); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.agent-step {
  display:flex; align-items:flex-start; gap:10px;
  flex-direction:column;
  width:100%; min-width:0;
  padding:9px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
.agent-step-main { display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
.agent-step-icon {
  width:28px; height:28px; min-width:28px;
  border-radius:8px;
  background:var(--acc-soft); color:var(--acc);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 28px;
}
.agent-step-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.agent-step-title { font-size:13px; font-weight:600; color:var(--txt); }
.agent-step-detail, .agent-step-result {
  font-size:12px; color:var(--mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.agent-step-status { flex:0 0 auto; color:var(--mut); display:flex; align-items:center; justify-content:center; }
.agent-step-status.spin { animation:spin .9s linear infinite; }
.agent-step-status.done { color:var(--acc); }
.agent-step-elapsed { flex:0 0 auto; font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; }

/* ── Голосовой ввод ── */
/* Обёртка textarea + плавающий mic внутри */
.prompt-wrap { position:relative; flex:1; min-width:0; display:flex; }
.prompt-wrap textarea { flex:1; padding-right:38px; } /* место под иконку mic */
.prompt-wrap .mic-wrap {
  /* центрируем по вертикали поля: bottom:5px давал top:-3px (кнопка 42 в поле 44) — микрофон
     торчал выше строки (03.07). top:50% + translateY держит его ровно при любой высоте поля. */
  position:absolute; right:9px; top:50%; transform:translateY(-50%); z-index:2;
  transition:opacity .15s, transform .15s;
}
.prompt-wrap .mic-wrap.mic-hide {
  opacity:0; pointer-events:none; transform:translateY(-50%) scale(.8);
}

.mic-wrap { position:relative; display:inline-flex; }
#mic.recording {
  color:var(--acc-fg); background:var(--danger); border-color:var(--danger);
  animation:micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse { 0%,100% { box-shadow:0 0 0 0 rgba(229,72,77,.45); } 55% { box-shadow:0 0 0 7px rgba(229,72,77,0); } }

/* Попап статуса над кнопкой микрофона */
.mic-popup {
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:6px 13px 6px 10px; font-size:12px; color:var(--txt); white-space:nowrap;
  pointer-events:none; opacity:0;
  transition:opacity .16s, transform .16s;
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:8px; z-index:60;
}
.mic-popup.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.mic-popup--recording { border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.mic-popup--busy     { border-color:rgba(59,123,255,.35); }

/* Точка / спиннер слева в попапе */
.mic-popup-dot { flex:0 0 auto; border-radius:50%; }
.mic-popup--recording .mic-popup-dot {
  width:8px; height:8px; background:var(--danger);
  animation:micDot 1s ease-in-out infinite;
}
.mic-popup--busy .mic-popup-dot {
  width:12px; height:12px;
  border:2px solid var(--line); border-top-color:var(--acc);
  animation:spin .7s linear infinite;
}
@keyframes micDot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.5); opacity:.3; } }

/* Убираем чёрную рамку textarea в светлой теме */
[data-theme="light"] .composer textarea {
  border-color:var(--line);
  outline:none; box-shadow:none;
}
[data-theme="light"] .composer textarea:focus {
  border-color:#b0b0b8;
  box-shadow:none; outline:none;
}

.msg-file-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.msg-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; background:var(--panel2); border:1px solid var(--line); border-radius:20px; font-size:12px; cursor:pointer; color:var(--txt); transition:border-color .15s, color .15s; }
.msg-chip:hover { border-color:var(--acc); color:var(--acc); }
.msg-chip span { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Drag-and-drop overlay ── */
.drop-overlay {
  position:absolute; inset:0; z-index:100;
  background:rgba(15,15,16,.82);
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
  backdrop-filter:blur(2px);
}
.drop-overlay.visible { opacity:1; pointer-events:auto; }
.drop-overlay-inner {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:40px 56px;
  background:var(--panel);
  border:2px dashed var(--acc);
  border-radius:18px;
  text-align:center;
  animation:dropPop .15s ease;
}
@keyframes dropPop { from { transform:scale(.94); opacity:.5; } to { transform:scale(1); opacity:1; } }
.drop-overlay-inner svg { color:var(--acc); opacity:.85; }
.drop-overlay-label { font-size:17px; font-weight:600; color:var(--txt); }
.drop-overlay-sub { font-size:12px; color:var(--mut); }
[data-theme="light"] .drop-overlay { background:rgba(243,243,244,.86); }
/* ── Секции правой панели: загружено / создано ── */
.rp-section { margin-bottom:14px; }
.rp-section-label {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--mut);
  text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:7px;
}
.rp-section-label svg { opacity:.7; }

/* ── Excel / xlsx шаги агента ── */
.agent-step-extra {
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
/* Список листов (xlsx_info) */
.step-sheets { display:flex; flex-direction:column; gap:4px; }
.step-sheet-row {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--mut);
}
.step-sheet-row svg { color:#22c55e; opacity:.8; flex:0 0 auto; }
.step-sheet-name { font-weight:500; color:var(--txt); }
.step-sheet-size { margin-left:auto; color:var(--mut); font-size:11px; }
/* Мини-таблица (xlsx_read / xlsx_query) */
.step-table-info {
  display:block; font-size:11px; color:var(--mut);
  margin-bottom:7px;
}
.step-table-wrap {
  overflow-x:auto;
  border-radius:7px;
  border:1px solid var(--line);
  max-height:220px;
  overflow-y:auto;
}
.step-table {
  border-collapse:collapse; font-size:12px;
  width:100%; min-width:max-content;
}
.step-table th {
  position:sticky; top:0; z-index:1;
  background:var(--panel2);
  padding:5px 10px;
  text-align:left;
  font-weight:600;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  color:var(--txt);
}
.step-table td {
  padding:4px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  color:var(--txt);
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.step-table tr:last-child td { border-bottom:none; }
.step-table tr:hover td { background:var(--panel2); }
.step-table-more {
  font-size:11px; color:var(--mut);
  padding:5px 10px;
  border-top:1px solid var(--line);
  background:var(--panel2);
}
/* ── Таблицы (views.tables) ── */
.tbl-layout { display:grid; grid-template-columns:300px 1fr; gap:0; height:100%; overflow:hidden; background:var(--panel); }

.tbl-sidebar { border-right:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; padding:12px 0; }
.tbl-sidebar .section-label { padding:0 14px 6px; }
.tbl-sidebar .hr { margin:14px 12px; }
.tbl-sec-head { display:flex; align-items:center; gap:7px; padding:2px 15px 9px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); }
.tbl-sec-head svg { opacity:.6; }

.tbl-list { padding:0 8px; display:flex; flex-direction:column; gap:1px; }
.tbl-list-sm { max-height:200px; overflow-y:auto; }
.tbl-item { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; cursor:pointer; color:var(--mut); transition:background .12s, box-shadow .12s; }
.tbl-item:hover { background:var(--panel2); }
.tbl-item.active { background:var(--panel2); box-shadow:inset 2px 0 0 var(--acc); }
.tbl-item-icon { flex-shrink:0; opacity:.6; display:flex; }
.tbl-item:hover .tbl-item-icon { opacity:.9; }
.tbl-item.active .tbl-item-icon { opacity:1; color:var(--acc); }
.tbl-item-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.tbl-item-name { font-size:13px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl-item.active .tbl-item-name { color:var(--acc); }
.tbl-item-tag { font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbl-del { background:transparent; border:none; color:var(--mut); padding:3px 5px; border-radius:5px; opacity:0; flex-shrink:0; align-self:center; }
.tbl-item:hover .tbl-del { opacity:.5; }
.tbl-del:hover { opacity:1 !important; color:var(--danger); background:transparent; border:none; }
.tbl-empty-list { display:flex; align-items:center; gap:6px; color:var(--mut); font-size:12px; padding:6px 8px; }

.tbl-add { margin:4px 12px 2px; }
.tbl-add > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); padding:7px 5px; border-radius:7px; user-select:none; }
.tbl-add > summary::-webkit-details-marker { display:none; }
.tbl-add > summary:hover { color:var(--acc); background:var(--panel2); }
.tbl-add[open] > summary { color:var(--txt); }
.tbl-add-form { padding:4px 2px 6px; display:flex; flex-direction:column; }
.tbl-add-form input { font-size:13px; padding:7px 10px; }

.tbl-main { overflow:hidden; display:flex; flex-direction:column; background:var(--panel); }

.tbl-panel { display:flex; flex-direction:column; height:100%; }
.tbl-panel.tbl-empty, .tbl-panel.tbl-loading { justify-content:center; align-items:center; padding-bottom:9vh; }
.tbl-empty-state { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--mut); text-align:center; max-width:360px; padding:0 24px; }
.tbl-empty-state svg { opacity:.2; }
.tbl-empty-state p { margin:0; font-size:13px; line-height:1.7; }
.tbl-empty-state b { color:var(--txt); font-size:16px; }
.tbl-empty-state .ghost { margin-top:2px; }

/* Живой просмотр Google Таблицы (iframe) */
.gs-head { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel); flex-shrink:0; }
.gs-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; min-width:0; flex:0 1 auto; }
.gs-title svg { opacity:.85; flex-shrink:0; color:var(--acc); }
.gs-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-tag { flex:0 0 auto; font-size:11px; color:var(--mut); background:var(--panel2); border-radius:20px; padding:2px 9px; white-space:nowrap; }
.gs-actions { margin-left:auto; display:flex; gap:6px; align-items:center; flex-shrink:0; }
.gs-actions .mini { text-decoration:none; }
.gs-frame-wrap { flex:1; min-height:0; background:#fff; }
.gs-frame { width:100%; height:100%; border:none; display:block; }
.gs-hint { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:7px 14px; font-size:11px; color:var(--mut); border-top:1px solid var(--line); background:var(--panel); }
.gs-hint svg { flex-shrink:0; opacity:.7; }

.tbl-load-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel); flex-shrink:0; }
.tbl-panel-title { font-size:13px; font-weight:500; display:flex; align-items:center; gap:7px; }
.tbl-data-wrap { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.tbl-data-meta { padding:8px 16px; font-size:11px; color:var(--mut); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; background:var(--panel); flex-shrink:0; }
.tbl-data-scroll { flex:1; overflow:auto; }
.tbl-data { width:100%; border-collapse:collapse; font-size:13px; }
.tbl-data th { padding:8px 12px; text-align:left; color:var(--mut); font-weight:500; font-size:12px; background:var(--panel2); border-bottom:1px solid var(--line); position:sticky; top:0; white-space:nowrap; }
.tbl-data td { padding:7px 12px; border-bottom:1px solid var(--line); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.tbl-data tr:last-child td { border-bottom:none; }
.tbl-data tbody tr:hover td { background:var(--panel2); }

/* ── + Меню (файлы / скилы / коннекторы) ── */
.plus-wrap { position:relative; }
.plus-btn { border:1px solid var(--line) !important; }
.plus-btn:hover { border-color:var(--acc) !important; color:var(--acc); }

.plus-menu {
  position:absolute; bottom:calc(100% + 8px); left:0;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  min-width:220px; padding:6px; z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.plus-wrap.open .plus-menu { opacity:1; visibility:visible; transform:translateY(0); }

.plus-section-label {
  font-size:10px; font-weight:600; color:var(--mut);
  letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px 3px;
}
.plus-divider { height:1px; background:var(--line); margin:5px 0; }

.plus-item {
  display:flex; align-items:center; gap:8px;
  width:100%; text-align:left; border:none !important;
  background:transparent; color:var(--txt); padding:7px 10px;
  border-radius:7px; font-size:13px; cursor:pointer;
}
.plus-item:hover { background:var(--panel2); }
.plus-item.active { background:var(--acc-soft); color:var(--acc); }
.plus-item.active::after { content:'✓'; margin-left:auto; font-size:12px; }

/* Чипы скилов и коннекторов */
.chip-skill { background:var(--acc-soft); border-color:transparent; color:var(--acc); }
.chip-conn  { background:rgba(46,204,113,.1); border-color:transparent; color:var(--ok); }

/* Скилы в адmine */
.skill-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); font-size:13px;
}
.skill-icon { flex-shrink:0; color:var(--acc); opacity:.8; }
.skill-name { font-weight:500; flex-shrink:0; }
.skill-prompt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }

/* ── Вкладка «Файлы»: библиотека документов бота ── */
.fdrop { border:1.5px dashed var(--line); border-radius:12px; padding:18px; text-align:center; cursor:pointer; color:var(--acc); transition:border-color .15s, background .15s; }
.fdrop:hover, .fdrop.drag { border-color:var(--acc); background:var(--acc-soft); }
.fdrop > div { color:var(--txt); }
.fdrop-hint { font-size:12px; color:var(--mut) !important; margin-top:2px; }
.fdrop-hint select { width:auto; display:inline; padding:2px 6px; font-size:12px; }
.fsearch { flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:0 11px; color:var(--mut); }
.fsearch input { border:none; background:transparent; padding:8px 0; }
.ffilter { display:flex; gap:4px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:3px; }
.ffilter .fchip { font-size:13px; padding:5px 12px; border-radius:6px; color:var(--mut); cursor:pointer; white-space:nowrap; }
.ffilter .fchip.active { background:var(--acc-soft); color:var(--acc); }
.frow { display:flex; align-items:center; gap:11px; padding:10px 14px; border-bottom:1px solid var(--line); }
.frow:last-child { border-bottom:none; }
.frow:hover { background:var(--bg); }
.ftile { width:36px; height:36px; flex:0 0 auto; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; border:1px solid var(--line); color:var(--mut); }
.ftile.pdf { color:var(--danger); border-color:var(--danger); }
.ftile.doc { color:var(--acc); border-color:var(--acc); }
.ftile.xls { color:var(--ok); border-color:var(--ok); }
.ftile.img { color:var(--warn); border-color:var(--warn); }
.fname { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fmeta { font-size:12px; color:var(--mut); }
.fbadge { font-size:11px; padding:2px 9px; border-radius:20px; white-space:nowrap; flex:0 0 auto; }
.fbadge.on { color:var(--ok); border:1px solid var(--ok); }
.fbadge.off { color:var(--mut); border:1px solid var(--line); }
.fsrc { font-size:11px; color:var(--mut); border:1px solid var(--line); border-radius:20px; padding:2px 8px; white-space:nowrap; flex:0 0 auto; }
.fscope { font-size:12px; color:var(--mut); border:1px solid var(--line); border-radius:20px; padding:2px 9px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.fscope:hover { border-color:var(--acc); color:var(--acc); }
.fact { display:flex; gap:8px; color:var(--mut); flex:0 0 auto; }
.fact > span { display:inline-flex; cursor:pointer; }
.fact > span:hover { color:var(--acc); }
.fact > span[data-act="del"]:hover { color:var(--danger); }
/* ── Выравнивание иконок в строках файлов/папок: svg блочный и по центру, глифы и svg — одна ось ── */
.fact { align-items:center; }
.fact > span { align-items:center; justify-content:center; width:24px; height:24px; line-height:1; }
.fact svg, .ftile svg { display:block; }
.ftile.plain { background:transparent; border:none; }        /* плитка-иконка папки: без рамки-коробки */
.fname svg, .fmeta svg { vertical-align:-2px; }
#fx-bar svg, .fx-crumb svg { vertical-align:-2px; }
.model-picker-item svg { vertical-align:-2px; }
.section-label svg, .task-meta svg { vertical-align:-2px; }

/* ── Вкладка «Задачи»: простой список; статус — мягкой строкой, агентские — свёрнуты ── */
.tk-hint { margin:0 0 14px; font-size:13px; color:var(--mut); }
.tk-sumline { color:var(--mut); }
.tk-errline { color:var(--danger); }
.tasks-shell { border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.tk-toolbar { display:flex; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tk-filter { flex:0 0 auto; background:transparent; color:var(--mut); border:1px solid transparent; border-radius:8px; padding:5px 8px; font-size:12px; gap:6px; }
.tk-filter b { color:var(--txt); font-size:11px; font-weight:600; background:var(--panel2); border-radius:10px; padding:0 6px; min-width:10px; text-align:center; }
.tk-filter:hover, .tk-filter.active { opacity:1; background:var(--acc-soft); color:var(--acc); border-color:transparent; }
.tk-filter.active b { background:var(--acc); color:#fff; }
.tk-list { min-height:88px; }
.task-card2 { display:grid; grid-template-columns:94px minmax(0,1fr) auto; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); align-items:flex-start; transition:background .12s; }
.task-card2:last-child { border-bottom:none; }
.task-card2:hover { background:var(--bg); }
.task-card2.tk-dim .tk-main { opacity:.6; }
.tk-state { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:18px; padding:3px 9px; font-size:11.5px; color:var(--mut); white-space:nowrap; }
.tk-state.run { color:var(--acc); border-color:color-mix(in srgb, var(--acc) 35%, var(--line)); background:var(--acc-soft); }
.tk-state.err { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
.tk-status { flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
.tk-status.ok { background:var(--ok); }
.tk-status.pause { background:var(--mut); }
.tk-status.err { background:var(--danger); }
.tk-status.run { background:var(--acc); animation:tkpulse 1.6s ease-out infinite; }
@keyframes tkpulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.tk-main { flex:1; min-width:0; }
.tk-title-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px; }
.tk-kind { display:inline-flex; align-items:center; gap:5px; color:var(--acc); background:var(--acc-soft); border-radius:14px; padding:1px 8px; font-size:11px; }
.tk-kind.muted-kind { color:var(--mut); background:transparent; border:1px solid var(--line); }
.tk-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:5px; font-size:12px; color:var(--mut); }
.tk-meta span { display:inline-flex; align-items:center; gap:5px; }
.tk-meta .tk-live { color:var(--acc); }
.tk-meta svg { flex:0 0 auto; }
.tk-prompt { margin-top:4px; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-actions { display:flex; gap:2px; flex:0 0 auto; opacity:.68; transition:opacity .12s; }
.task-card2:hover .tk-actions { opacity:1; }
.tk-actions button { border:none; background:transparent; color:var(--mut); cursor:pointer; padding:6px; border-radius:7px; display:inline-flex; }
.tk-actions button:hover { background:var(--panel2); color:var(--acc); }
.tk-actions button.danger:hover { color:var(--danger); }
.tk-empty { display:flex; align-items:flex-start; gap:10px; color:var(--mut); padding:18px 16px; font-size:13px; }
.tk-empty svg { color:var(--acc); flex:0 0 auto; }
.tk-empty b, .tk-empty span { display:block; }
.tk-botjobs { margin-top:16px; }
.tk-botjobs > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:0 2px 8px; }
.tk-botjobs > summary span { font-size:11.5px; font-weight:400; text-transform:none; letter-spacing:0; }
@media (max-width:760px) {
  .task-card2 { grid-template-columns:1fr auto; gap:8px; }
  .tk-state { grid-column:1 / -1; }
  .tk-actions { opacity:1; }
}

/* ── Фирменный дропдаун (vt-select) вместо системного <select> ── */
.vt-select { position:relative; display:flex; width:100%; min-width:0; }
.vt-select select { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; margin:0; padding:0; border:0; }
.vt-select-btn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:0;
  background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px;
  padding:8px 11px; font-size:13px; cursor:pointer; text-align:left; font-family:inherit; }
.vt-select-btn:hover { border-color:var(--acc); }
.vt-sel-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vt-select-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; z-index:120;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.28); padding:4px; display:none; max-height:280px; overflow:auto; }
.vt-select.open .vt-select-menu { display:block; }
.vt-select-item { padding:7px 11px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--txt); white-space:nowrap; }
.vt-select-item:hover { background:var(--panel2); }
.vt-select-item.active { background:var(--acc); color:#fff; }
.vt-select-item.dis { opacity:.45; cursor:default; }
.vt-select.inline { display:inline-flex; width:auto; vertical-align:middle; }
.vt-select.inline .vt-select-btn { width:auto; padding:3px 8px; font-size:12px; }

/* ── Адаптив композера: узкие экраны (iframe Битрикса) ── */
.composer-bar { flex-wrap:wrap; row-gap:6px; }                     /* пикеры переносятся, ничего не выдавливается за край */
.model-picker-menu { max-width:calc(100vw - 24px); }               /* меню никогда не шире вьюпорта */
#wfmenu { left:0; right:auto; max-height:300px; overflow:auto; }   /* меню ПАПКИ у левого края — раскрываем ВПРАВО от кнопки */
@media (max-width:600px) {
  .composer-bar .model-picker-label { max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── МОБИЛЬНАЯ АДАПТАЦИЯ ── */
/* Вне мобильного режима топбар/бургер/оверлей — display:none: они прямые дети грида .layout,
   и видимый лишний элемент занимал бы грид-ячейку, ломая колонки десктопа. */
#mtop { display:none; }
#mnav { display:none !important; }
.nav-overlay { display:none; }
.rightpanel .rp-close { display:none; }
#mbot { display:none; }
#mtop-ctx { display:none; }

@media (max-width:768px) {
  /* Каркас и мобильное меню */
  .layout { grid-template-columns:1fr; }
  .layout.collapsed { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; bottom:0; width:min(300px,84vw); z-index:70; transform:translateX(-100%); transition:transform .25s; background:var(--panel); box-shadow:18px 0 40px rgba(0,0,0,.34); }
  .layout.nav-open .side { transform:translateX(0); }
  /* Мобильный сайдбар = ОДНО прокручиваемое полотно (меню+чаты+профиль листаются целиком):
     вложенный мини-скролл списка чатов оставлял на низких экранах щель в 2 строки, а профиль
     «висел под потолком» сразу за ней (жалоба 03.07). */
  .side { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .side .side-sessions { flex:0 0 auto; overflow:visible; }
  .side .foot { margin-top:14px; }
  .nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:69; }
  .layout.nav-open ~ .nav-overlay, .layout.nav-open .nav-overlay { display:block; }
  /* Мобильный топбар: бургер + имя вкладки (вместо плавающей кнопки поверх контента) */
  /* Без боковых паддингов: иконка по центру 44px-кнопки встаёт на ~13px от края — вровень с контентом вкладок (12px) */
  #mtop { display:flex; position:fixed; top:0; left:0; right:0; height:calc(48px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 0 0; align-items:center; gap:8px; background:var(--panel); border-bottom:1px solid var(--line); z-index:68; }
  #mtop #mnav { position:static; display:flex !important; flex:0 0 44px; width:44px; height:44px; align-items:center; justify-content:center; padding:0; border:none; background:transparent; color:var(--txt); border-radius:10px; }
  #mtop #mnav:active { background:var(--panel2); }
  #mtop button svg { width:18px; height:18px; display:block; }
  #mtop-title { flex:1 1 auto; min-width:0; text-align:center; font-size:15px; font-weight:600; line-height:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); }

  /* Основная область */
  /* box-sizing ОБЯЗАТЕЛЕН: иначе 100dvh + верхний паддинг = контейнер выше экрана, композер уезжает под таб-бар */
  .main, .main.nopad, .chat-main, #chatwrap { box-sizing:border-box; }
  /* Десктопное .chat-main{height:100vh} (строка ~263) распирало контейнер выше родителя — на мобиле высота по родителю */
  .chat-wrap { display:flex; height:calc(100dvh - 48px - env(safe-area-inset-top)); }
  .chat-main { height:auto; flex:1; min-height:0; }
  .main { padding:calc(56px + env(safe-area-inset-top)) 12px 12px; height:100dvh; }
  .main.nopad { padding:calc(48px + env(safe-area-inset-top)) 0 0; height:100dvh; }
  /* Шапка вкладки на телефоне (правка 14.07): имя вкладки уже в топбаре #mtop — дубль-заголовок h2
     прячем, остаётся ровная строка действий ВПЛОТНУЮ под топбаром. Контейнер сдвинут ПОД топбар
     маргином (не паддингом: сдвиг паддингом ломает sticky — отступ липучки считается от контентной
     кромки скролл-контейнера, и бар «уезжал» вниз на второй такой же отступ). Липнет на top:0 =
     ровно под топбаром; раньше липла под фиксированный топбар (z-index 68 против 6) + щель 8px. */
  .main.paged { margin-top:calc(48px + env(safe-area-inset-top)); height:calc(100dvh - 48px - env(safe-area-inset-top)); padding:0 12px 12px; }
  .main.paged > .top { top:0; margin:0 -12px 14px; padding:9px 12px; background:var(--panel); }
  .main.paged > .top h2 { display:none; }
  /* Вкладка, где после скрытия h2 в шапке пусто (нет действий) — бар не рисуем вовсе */
  .main.paged > .top:not(:has(> :not(h2):not(:empty))) { display:none; }
  /* Кнопки в шапках вкладок не переносят подпись на вторую строку (жалоба 14.07 на «Задача себе») */
.main.paged > .top button, .main.paged > .top .ghost { white-space:nowrap; }
/* Одинокое главное действие вкладки «Задачи» — к правому краю (просьба владельца 14.07) */
  .main.paged > .top #tk-new { margin-left:auto; }
  /* Таблицы (лэйаут .page): та же логика — заголовок в топбаре, пустую шапку прячем */
  .page-head h2 { display:none; }
  .page-head { padding:9px 12px; }
  .page-head:not(:has(> :not(h2):not(:empty))) { display:none; }
  .page { height:100%; }
  .top { flex-wrap:wrap; gap:8px; }
  .chat-main .msgs { padding:10px 10px; }
  .msgs .msg { max-width:100%; }
  #fx-bar { row-gap:6px; }

  /* Боковые и выезжающие панели */
  /* Правая панель на мобиле — выезжающая, СКРЫТА по умолчанию (не через hidden — десктопная колонка
     видна при входе и накрывала топбар). Показ ТОЛЬКО явным rp-mobile-open (клик по папке в топбаре). */
  .rightpanel { position:fixed; top:0; right:0; bottom:0; width:min(340px,92vw); z-index:72; box-shadow:-18px 0 40px rgba(0,0,0,.34); display:none; }   /* z-index выше топбара (68), иначе кнопка папки перекрывала крестик закрытия */
  .rightpanel.rp-mobile-open { display:flex; }
  .fv-panel, .fv-panel.fv-fixed, .ag-panel { position:fixed; inset:0; width:100vw !important; max-width:100vw; z-index:80; }
  /* Шапка вьювера/панели уходила под вырез/статусбар телефона — тапы по крестику не проходили.
     Опускаем под safe-area и укрупняем тач-цель закрытия. */
  .fv-panel .fv-ph, .ag-panel .agp-head { padding-top:calc(10px + env(safe-area-inset-top)); }
  .fv-panel #fv-close-btn, .ag-panel #ap-close { min-width:44px; min-height:44px; justify-content:center; }
  .fv-panel #fv-close-btn svg, .ag-panel #ap-close svg { pointer-events:none; }   /* клик всегда на кнопку, не на <line> внутри */

  /* Модальные окна */
  .modal-card, #confirmDlg .cd-card, #promptDlg .cd-card, #alertDlg .cd-card { width:94vw; max-width:94vw; max-height:92vh; overflow:auto; }

  /* Композер и тач-таргеты */
  #prompt { font-size:16px; }
  .iconbtn, .model-picker-btn { min-height:40px; }

  /* Списки, сетки, таблицы */
  .cz-grid { grid-template-columns:1fr; }
  .grid { grid-template-columns:1fr 1fr; }
  .tbl-layout { display:flex; flex-direction:column; }
  .tbl-sidebar { width:100%; }

  /* iOS-высоты: динамический вьюпорт (адресная строка/клавиатура) */
  .layout { height:100vh; height:100dvh; }
  .chat-wrap { height:calc(100dvh - 46px); }
  .chat-main { padding-bottom:env(safe-area-inset-bottom); }

  /* Тач: ховера нет — действия видимы сразу */
  .tk-actions { opacity:1; }
  .s-row .s-x { opacity:.55; }
  .bx-kebab { opacity:.55 !important; }
  .bx-recent-row .bx-kebab { opacity:.55; }

  /* Крестик правой панели (панель на мобиле поверх контента) */
  .rightpanel { padding-top:36px; }
  .rightpanel .rp-close { display:flex; position:absolute; top:calc(6px + env(safe-area-inset-top)); right:8px; z-index:2; }

  /* Композер: пикеры компактные, всё в одну строку с вводом по центру внимания */
  .composer { padding:8px 10px; }
  .composer-bar { gap:6px; }
  /* тач-таргеты не ниже 40px (Apple HIG 44pt, WCAG 2.5.8 — минимум 24; 36px было слишком мелко для пальца) */
  .composer-bar .model-picker-btn { padding:6px 8px; min-height:40px; font-size:12px; }
  .composer-bar .model-picker-label { max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .composer-bar .iconbtn { min-height:40px; }

  /* Выпадашки композера не выше половины экрана */
  .model-picker-menu { max-height:55vh; overflow:auto; }

  /* Таблицы данных — горизонтальная прокрутка вместо расползания */
  .main table { display:block; max-width:100%; overflow-x:auto; }

  /* Формы: 16px, чтобы iOS не зумил */
  .modal-card input, .modal-card textarea, #drawer-body input, #drawer-body textarea,
  .ag-panel input, .ag-panel textarea, .vt-select-btn, #prompt { font-size:16px; }

  /* Правый drawer скилов — на весь экран */
  .drawer { width:100vw; max-width:100vw; }

  /* Контент чата */
  .msgs .msg img { max-width:100%; height:auto; }
  .card { padding:12px 14px; }

  /* Десктопный collapsed-режим (сайдбар в иконки) на телефоне НЕ действует: меню всегда полное,
     даже если класс остался с десктопа (сохраняется в store) */
  .layout.collapsed .side { width:min(320px, 88vw); }
  .layout.collapsed .nav a span, .layout.collapsed .brand, .layout.collapsed .who { display:inline; }
  .layout.collapsed .nav a { justify-content:flex-start; padding:12px 14px; }
  .layout.collapsed .brand-row { justify-content:flex-start; }
  .layout.collapsed #collapse { display:inline-flex; }
  .layout.collapsed .foot .row { flex-direction:row; }

  /* Быстрые сценарии пустого чата на телефоне скрыты (съедали весь экран); приветствие — компактное */
  .ce-grid { display:none !important; }   /* important: empty-state.js инжектит свой <style> позже style.css */
  .ce-subtitle { display:none !important; }
  .ce-hero { transform:scale(.72); margin:-14px 0; }

  /* Плашка чата (заголовок+кнопки) на мобиле скрыта: имя чата — в топбаре, контекст — кнопкой там же */
  .chat-head { display:none; }
  #mtop-ctx { display:flex; margin-left:0; flex:0 0 44px; width:44px; height:44px; align-items:center; justify-content:center;
    border:none; background:transparent; color:var(--txt); border-radius:10px; padding:0; }
  #mtop-ctx:active { background:var(--panel2); }

  /* ── НИЖНИЙ ТАБ-БАР: главная навигация телефона ── */
  /* Нижний таб-бар УБРАН с телефона (просьба Михаила 03.07): дублировал боковое меню (бургер),
     навигация — через #mnav. Освобождает высоту экрана; компенсация под него больше не нужна. */
  #mbot { display:none !important; }
  .main { padding-bottom:env(safe-area-inset-bottom); }
  .main.nopad { padding-bottom:0; }
  .chat-main { padding-bottom:env(safe-area-inset-bottom); }
  .side { padding-bottom:env(safe-area-inset-bottom); }

  /* Боковое меню «Ещё»: крупные пункты, удобные тап-цели */
  .side { width:min(320px, 88vw); }
  .nav a { padding:12px 14px; font-size:15px; }
  .s-row { min-height:44px; }

  /* ── ШТОРКИ: меню пикеров и модалки поднимаются снизу ── */
  .model-picker-menu, #wfmenu {
    position:fixed; left:0; right:0; top:auto; bottom:calc(56px + env(safe-area-inset-bottom));
    max-height:60vh; overflow:auto; border-radius:16px 16px 0 0; min-width:0; width:auto;
    box-shadow:0 -14px 40px rgba(0,0,0,.4); padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .model-picker-item { padding:12px 12px; font-size:15px; }
  .modal { align-items:flex-end; }
  .modal-card { width:100vw; max-width:100vw; border-radius:18px 18px 0 0; max-height:88vh; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }

}

/* ════════════ ОБУЧЕНИЕ: тур-спотлайт + страница со скриншотами (training.js) ════════════ */
#tour { position:fixed; inset:0; z-index:1200; pointer-events:none; }
#tour .tour-shade { position:fixed; background:rgba(10,10,12,.62); pointer-events:auto; }
#tour .tour-ring { position:fixed; border:2px solid var(--acc); border-radius:12px;
  box-shadow:0 0 0 4px var(--acc-soft); pointer-events:none; transition:all .18s ease-out; }
#tour .tour-card { position:fixed; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; box-shadow:0 12px 40px rgba(0,0,0,.45); pointer-events:auto; max-width:400px; }
#tour .tour-card.centered { left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,calc(100vw - 32px)); }
#tour .tour-num { font-size:11px; color:var(--mut); margin-bottom:4px; }
#tour .tour-card h3 { margin:0 0 6px; font-size:16px; }
#tour .tour-card p { margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--txt); }
#tour .tour-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#tour .tour-btns .tr-skip { margin-right:auto; color:var(--mut); font-size:12px; padding:6px 8px; }
#tour-chip { position:fixed; right:16px; bottom:16px; z-index:1200; display:flex; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--acc); border-radius:12px; padding:10px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.4); font-size:13px; max-width:min(420px,calc(100vw - 32px)); }
#tour-chip .trc-skip { background:transparent; border:none; color:var(--mut); cursor:pointer; padding:2px 6px; }
.tr-intro { font-size:13.5px; line-height:1.55; }
.tr-sec h3 { margin:0 0 10px; }
.tr-fig { position:relative; margin:0 0 12px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--panel2); cursor:zoom-in; }
.tr-fig img { display:block; width:100%; height:auto; }
.tr-fig.zoom { position:fixed; inset:4vh 4vw; z-index:1300; overflow:auto; cursor:zoom-out;
  box-shadow:0 0 0 100vmax rgba(10,10,12,.7); }
.tr-mark { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:var(--acc); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center;
  justify-content:center; box-shadow:0 0 0 3px var(--acc-soft); pointer-events:none; }
.tr-steps { margin:0; padding-left:20px; font-size:13.5px; line-height:1.6; }
.tr-steps li { margin-bottom:4px; }
@media (max-width: 768px) {
  #tour .tour-card { left:8px !important; right:8px; bottom:calc(64px + env(safe-area-inset-bottom)) !important;
    top:auto !important; width:auto !important; max-width:none; }
  #tour .tour-card.centered { transform:none; }
  #tour-chip { bottom:calc(64px + env(safe-area-inset-bottom)); left:16px; }
  .tr-fig.zoom { inset:2vh 2vw; }
}