/* SELMA app — палитра концепта v2 (Pearl / Forest, зелёный акцент).
   Тема берётся у CRM (класс light/dark на <html> родительского окна), иначе — из системы.
   Файл отдаётся Caddy с домена CRM; RFC-0006. */

:root {
  --bg1: #cfe4d6; --bg2: #d6e6dc; --bg3: #e9f0ea; --bg: #e4ebe6;
  --surface: #fbfcf9; --surface2: #f3f7f4; --surface3: #eaf0ec;
  --glass: rgba(251, 252, 249, .72);
  --line: #d3dfd8; --line2: #e2e9e4;
  --text: #1a332b; --muted: #5f776c; --faint: #8fa399;
  --accent: #186549; --accent2: #14573f; --accent-soft: #e2efe7; --on-accent: #fff;
  --amber: #855300; --amber-soft: #fff0d3;
  --red: #a13e38; --red-soft: #fbe8e3;
  --blue: #375e91; --blue-soft: #e8eff9;
  --purple: #6b4aa8; --purple-soft: #efe9fa;
  --green: #186549; --green-soft: #e2efe7;
  --gray-soft: #eceff0;
  /* RFC-0024 D5: тип записи. Лид — светло-жёлтый, клиент — светло-зелёный, пауза (после её
     внедрения в CRM) — серый. Контраст посчитан по WCAG: текст ≥ 11.8, вторичный ≥ 5.4, плашка ≥ 7.2. */
  --lead-bg: #fff7dc; --lead-bg-h: #fdf0c6; --lead-edge: #d9a520; --lead-tag-bg: #f7e3a1; --lead-tag: #5c4000;
  --client-bg: #e9f5ed; --client-bg-h: #dcefe3; --client-edge: #3f9a6f; --client-tag-bg: #cfe8d8; --client-tag: #11503a;
  --paused-bg: #eef0f1; --paused-bg-h: #e4e7e9; --paused-edge: #8a969c; --paused-tag-bg: #d9dee1; --paused-tag: #3b4549;
  --row-muted: #4a6156;
  --shadow: 0 10px 30px -18px rgba(25, 60, 41, .35), 0 1px 3px rgba(25, 60, 41, .06);
  --ring: rgba(24, 101, 73, .28);
  color-scheme: light;
}

html.dark, html.forest {
  --bg1: #244b3c; --bg2: #1b3f37; --bg3: #15281f; --bg: #0e1915;
  --surface: #16221d; --surface2: #1a2822; --surface3: #213129;
  --glass: rgba(22, 34, 29, .72);
  --line: #2a3d33; --line2: #223228;
  --text: #e9f1ec; --muted: #9db1a5; --faint: #6f8579;
  --accent: #4ab98a; --accent2: #7fd4ad; --accent-soft: #1b3d2f; --on-accent: #0b1712;
  --amber: #f0c678; --amber-soft: #3a3020;
  --red: #ffb2a5; --red-soft: #43302b;
  --blue: #adcaef; --blue-soft: #243446;
  --purple: #c9b6f5; --purple-soft: #2f2846;
  --green: #7fd4ad; --green-soft: #1b3d2f;
  --gray-soft: #26322c;
  --lead-bg: #2a2616; --lead-bg-h: #332e1b; --lead-edge: #d9b24a; --lead-tag-bg: #4a3f19; --lead-tag: #f6dc8f;
  --client-bg: #15302a; --client-bg-h: #1a3a31; --client-edge: #4ab98a; --client-tag-bg: #1f4a3a; --client-tag: #aee8cc;
  --paused-bg: #23292a; --paused-bg-h: #2a3133; --paused-edge: #7d898e; --paused-tag-bg: #394245; --paused-tag: #d6dde0;
  --row-muted: #9db1a5;
  --shadow: 0 10px 30px -18px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .3);
  --ring: rgba(74, 185, 138, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 13.5px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(900px 560px at 0% -10%, var(--bg1) 0%, transparent 62%),
    radial-gradient(800px 520px at 100% 110%, var(--bg2) 0%, transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.hide { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ───────── каркас ───────── */
.wrap { padding: 14px 16px 24px; max-width: 1500px; margin: 0 auto; }

.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.top h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.top .sub { color: var(--muted); font-size: 12px; }
.top .grow { flex: 1; }

.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.state.warn .dot { background: var(--amber); }
.state.err { color: var(--red); }
.state.err .dot { background: var(--red); }

.btn {
  padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500;
}
.btn:hover { border-color: var(--faint); }
.btn.pri { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: default; }

/* ───────── блоки сводки ───────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.card {
  background: var(--glass); border: 1px solid var(--line2); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow); min-width: 0;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.card h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.card .big { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.card .row { display: flex; align-items: baseline; gap: 8px; }
.card .row + .row { margin-top: 6px; }
.card .k { color: var(--muted); font-size: 12px; }
.card .v { margin-left: auto; font-weight: 600; }
.card ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.card li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; min-width: 0; }
.card li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card li .d { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.card li .d.over { color: var(--red); font-weight: 600; }
.card li .d.soon { color: var(--amber); font-weight: 600; }
.card .note { color: var(--muted); font-size: 11.5px; margin-top: 8px; }
.card .nodata { color: var(--faint); font-size: 12.5px; font-style: italic; }

/* ───────── фильтры ───────── */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filters .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.filters .seg button { padding: 4px 10px; border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.filters .seg button.on { background: var(--accent); color: var(--on-accent); }
.filters select, .filters input {
  padding: 5px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.5px; max-width: 200px;
}
.filters .count { color: var(--muted); font-size: 12px; margin-left: auto; }

/* ───────── таблица дел ───────── */
.table { border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--glass); box-shadow: var(--shadow); }
.tr {
  display: grid; grid-template-columns: minmax(180px, 1.5fr) 150px minmax(200px, 2fr) 170px 120px 34px;
  gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 9px 12px; border-top: 1px solid var(--line2); background: none;
}
.tr:first-child { border-top: 0; }
.tr.h { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); background: var(--surface2); padding: 8px 12px; }
button.tr:hover { background: var(--surface2); }
.tr .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.av {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--surface3); color: var(--muted); font-size: 10.5px; font-weight: 700;
}
.tr .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .meta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .step { min-width: 0; }
.tr .step .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .step .t.none { color: var(--faint); font-style: italic; }
.tr .step .d { font-size: 11.5px; color: var(--muted); }
.tr .step .d.over { color: var(--red); font-weight: 600; }
.tr .step .d.soon { color: var(--amber); font-weight: 600; }
.tr .wait { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .chev { color: var(--faint); justify-self: end; }
.tr .more { font-size: 11px; color: var(--muted); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--gray-soft); color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag.blue { background: var(--blue-soft); color: var(--blue); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.purple { background: var(--purple-soft); color: var(--purple); }
.tag.line { background: none; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }

.foot { display: flex; gap: 12px; flex-wrap: wrap; padding: 9px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line2); }
.foot .grow { flex: 1; }

.msg { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.msg.err { color: var(--red); }
.msg code { font-size: 11.5px; background: var(--surface3); padding: 1px 5px; border-radius: 5px; word-break: break-all; }

.skeleton { height: 10px; border-radius: 5px; background: var(--surface3); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ───────── чат ───────── */
.chat { display: flex; flex-direction: column; height: 100vh; }
.chat .head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line2); background: var(--glass); }
.chat .head .lg { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.chat .head .t { font-weight: 650; font-size: 13px; }
.chat .head .s { font-size: 11px; color: var(--muted); }
.chat .head .grow { flex: 1; }

.thread { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 90%; padding: 9px 11px; border-radius: 13px; font-size: 13px; overflow-wrap: anywhere; }
.bub .txt { white-space: pre-wrap; }
/* Кнопка «открыть карточку» на месте строки `→ Имя · номер` (N09 через /history). */
.bub .txt .open-card { white-space: normal; max-width: 100%; text-align: left; margin: 2px 0; }
.open-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bub.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.bub.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line2); border-bottom-left-radius: 5px; }
.bub .tools { display: flex; gap: 6px; margin-top: 7px; }
.bub .tm { font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.bub .sep { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 2px 2px 0; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; flex: none; }
/* Точечная сфера (orb.js) поверх того же .spin: цвет — --orb-ink, в зелёном пузыре вопроса — цвет его текста. */
.spin { --orb-ink: var(--accent); }
.bub.me .spin { --orb-ink: var(--on-accent); }
.spin.orb { width: 18px; height: 18px; border: 0; border-radius: 0; animation: none; display: inline-block; vertical-align: middle; }
.spin.orb canvas { width: 100%; height: 100%; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .skeleton { animation: none; }
}

.comp { border-top: 1px solid var(--line2); padding: 10px 12px; background: var(--glass); }
.comp textarea {
  width: 100%; min-height: 58px; max-height: 160px; resize: vertical;
  padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
}
.comp .r { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
/* Ask — у правого края, под большим пальцем; скрепка и микрофон слева (Роман 04.10). */
.comp .r .grow { flex: 1; }
.comp .hint { font-size: 11px; color: var(--faint); flex: 1; }

.banner { margin: 10px 12px 0; padding: 8px 10px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 12px; }
.banner.err { background: var(--red-soft); color: var(--red); }

/* ───────── узкий экран ───────── */
@media (max-width: 1000px) {
  .cards { grid-template-columns: 1fr; }
  .tr { grid-template-columns: minmax(140px, 1.4fr) 120px minmax(160px, 1.6fr) 150px; }
  .tr .wait, .tr .chev { display: none; }
}
@media (max-width: 620px) {
  .wrap { padding: 12px 12px 20px; }
  .tr { grid-template-columns: 1fr; gap: 5px; }
  .tr.h { display: none; }
}

/* ───────── чат: поиск, подгрузка, сводки, раскрытие ───────── */
.searchbar { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line2); background: var(--surface2); }
.searchbar input { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); }
.searchbar .cnt { font-size: 11.5px; color: var(--muted); white-space: nowrap; min-width: 62px; text-align: right; }

.older { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 8px 0 4px; font-size: 12px; color: var(--muted); }
.older .dim { color: var(--faint); font-size: 11.5px; }

.thread .day {
  align-self: center; margin: 4px 0; padding: 2px 10px; border-radius: 999px;
  background: var(--surface3); color: var(--muted); font-size: 11px; white-space: nowrap;
}
#messages { display: flex; flex-direction: column; gap: 10px; }

.bub.summary {
  align-self: stretch; max-width: 100%; background: var(--surface2); border: 1px dashed var(--line);
  color: var(--muted); font-size: 12.5px;
}
.bub.summary .sep { margin-bottom: 4px; }
.bub mark { background: var(--amber-soft); color: var(--amber); border-radius: 3px; padding: 0 1px; }
.bub.hit { box-shadow: 0 0 0 1px var(--amber) inset; }
.bub.hit-active { box-shadow: 0 0 0 2px var(--accent) inset; }

body.wide .chat { max-width: 1100px; margin: 0 auto; }
body.wide .bub { max-width: 70%; }
body.wide .bub.summary { max-width: 100%; }

/* ───────── вход ───────── */
.signin { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; z-index: 40; background: var(--bg); }
.signin-card {
  width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line2); border-radius: 18px;
  padding: 24px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.signin-card .lg {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); margin-bottom: 4px;
}
.signin-card h1 { margin: 0; font-size: 19px; letter-spacing: .02em; }
.signin-card .sub { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.signin-card label { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.signin-card input {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); width: 100%;
}
.signin-card .btn { margin-top: 12px; padding: 9px 12px; justify-content: center; text-align: center; }
.signin-google { display: block; text-align: center; text-decoration: none; margin-top: 6px; padding: 10px 12px; }
.signin-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; color: var(--faint); font-size: 11.5px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.signin-alt { width: 100%; justify-content: center; text-align: center; }
.signin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.signin-error { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: var(--red-soft); color: var(--red); font-size: 12.5px; }
.signin-note { margin-top: 12px; color: var(--faint); font-size: 11px; line-height: 1.4; }

/* ───────── карточка дела ───────── */
.case { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; }
.case-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.case-panel {
  position: relative; width: min(860px, 100%); height: 100%; overflow: auto;
  background: var(--bg); border-left: 1px solid var(--line2); box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.case-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--line2); background: var(--glass); position: sticky; top: 0; z-index: 2;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.case-head .av.lg { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.case-head .nm { font-weight: 650; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-head .pl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); flex-wrap: wrap; margin-top: 3px; }
.case-body { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.case-body .card h2 { margin-bottom: 10px; }
.case-body .card .t { font-weight: 550; }
.case-body .card .row .v.over { color: var(--red); font-weight: 600; }
.case-body .card .row .v.soon { color: var(--amber); font-weight: 600; }
.case-body .card li { align-items: flex-start; }

/* ───────── окно чата поверх карточки ───────── */
.chatwin { position: fixed; inset: 0; z-index: 50; }
.chatwin-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .22); }
.chatwin-frame {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(720px, 58vw); min-width: 340px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line2);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .55); background: var(--bg);
}
.chatwin-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 720px) {
  .case-panel { width: 100%; border-left: 0; }
  .chatwin-frame { left: 8px; right: 8px; width: auto; }
}

/* ───────── оболочка по концепту v2 ───────── */
/* U07. `min-height: 0` обязателен на обоих уровнях. Без него флекс-ребёнок с overflow:auto
   не сжимается (по умолчанию min-height: auto), вырастает по содержимому, и родитель с
   overflow:hidden просто срезает хвост списка — прокрутки нет, а часть дел недоступна.
   Ряд сетки тоже фиксируем minmax(0,1fr): иначе высота ряда тянется за содержимым. */
.shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  gap: 12px; height: 100vh; padding: 12px; box-sizing: border-box; overflow: hidden;
}
#sidebar {
  display: flex; flex-direction: column; border-radius: 18px; padding: 12px 10px;
  background: var(--glass); border: 1px solid var(--line2); box-shadow: var(--shadow); overflow: auto;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
#sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; }
#sidebar .brand .logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent);
}
#sidebar .brand .t { font-weight: 700; letter-spacing: .04em; }
#sidebar .brand .s { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; color: var(--muted); font-weight: 500; text-align: left; width: 100%; }
.nav button:hover { background: var(--surface2); color: var(--text); }
.nav button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--line2) inset; }
.nav .badge { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 1px 7px; }
.side-h { margin: 16px 10px 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.chips { display: flex; flex-direction: column; gap: 4px; }
.chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line2); font-size: 12.5px; width: 100%; text-align: left; }
.chip.on { border-color: var(--accent); }
.chip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip .st { font-size: 11px; color: var(--muted); }
.chips .empty { color: var(--faint); font-size: 11.5px; padding: 4px 10px; line-height: 1.4; }
.side-foot { margin-top: auto; display: flex; gap: 6px; padding-top: 12px; }
.side-foot .btn { flex: 1; justify-content: center; text-align: center; }

#main {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line2); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
#main .top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line2); }
#main .top .crumb { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
#main .top .crumb b { color: var(--text); }
#main .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* Карточки и таблица не должны сжиматься до нуля внутри прокручиваемой колонки. */
#main .scroll > * { flex: none; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }

/* вкладки карточки */
.chead { display: flex; align-items: center; gap: 12px; }
.chead .av.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
.chead .nm { font-weight: 650; font-size: 17px; }
.chead .pl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); flex-wrap: wrap; margin-top: 3px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line2); }
/* RFC-0036: «Rename» у карточки лида — форма под заголовком, итог сохранения строкой */
.chead { flex-wrap: wrap; }
.rename-form { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px 14px; max-width: 560px;
  background: var(--surface2); border: 1px solid var(--line2); border-radius: 12px; }
.rename-form.note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.rename-form label { font-size: 12px; font-weight: 600; color: var(--muted); }
.rename-form input { width: 100%; min-width: 0; padding: 9px 11px; font-size: 15px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); }
.rename-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rename-form input:disabled { opacity: .7; }
.rename-form .hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.rename-form .kept { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 12.5px; }
.rename-form .kept div { display: flex; gap: 6px; min-width: 0; }
.rename-form .kept dt { color: var(--muted); }
.rename-form .kept dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rename-form .msg { padding: 8px 10px; text-align: left; border-radius: 8px; font-size: 13px; }
.rename-form .msg.err { color: var(--red); background: var(--red-soft); }
.rename-form .msg.warn { color: var(--amber); background: var(--amber-soft); }
.rename-form .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rename-note { margin: 10px 0 2px; padding: 8px 12px; border-radius: 9px; font-size: 13px; max-width: 560px; overflow-wrap: anywhere; }
.rename-note.ok { color: var(--green); background: var(--green-soft); }
.tabs button { padding: 8px 12px 10px; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 550; }
.tabs .c { margin-left: 6px; font-size: 11px; color: var(--faint); }
.sec { margin: 12px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* панель Сельмы справа */
.panel { width: 0; transition: width .18s ease; position: relative; display: flex; overflow: hidden; }
body.resizing .panel { transition: none; }
.panel.open { min-width: 320px; }
.panel-grip { width: 8px; cursor: col-resize; flex: none; border-radius: 4px; }
.panel.open .panel-grip { background: linear-gradient(var(--line2), var(--line2)) center / 2px 40px no-repeat; }
.panel-inner {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line2); box-shadow: var(--shadow);
}
/* N01. Крестик стоит у правого края всегда: имя дела бывает длинным, а панель — узкой.
   `min-width: 0` на растягивающемся блоке обязателен, иначе длинное имя раздвигает шапку и
   выталкивает кнопку за край; `margin-left: auto` держит её справа даже без распорки. */
.panel-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.panel-head > div { min-width: 0; flex: 1 1 auto; }
.panel-head .btn.icon { margin-left: auto; flex: none; }
.panel-head .lg.sm { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); }
.panel-head .t { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .s { font-size: 11px; color: var(--muted); }
#panelFrame { flex: 1; width: 100%; border: 0; display: block; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing #panelFrame { pointer-events: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; height: auto; }
  #sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #sidebar .side-h, #sidebar .chips { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin: 0 0 0 auto; padding-top: 0; }
  .panel.open { position: fixed; inset: 8px; width: auto !important; z-index: 40; }
}

/* строки переписки и документов с файлами */
.msg-row { flex-direction: column; align-items: stretch !important; gap: 3px; padding: 8px 0; border-top: 1px solid var(--line2); }
.card ul li.msg-row:first-child { border-top: 0; }
.msg-row .t { white-space: normal !important; overflow: visible !important; }
.msg-row .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.msg-row .file {
  display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface2); color: var(--text);
}
.msg-row .file:hover { border-color: var(--accent); }

/* кнопка чата прямо в строке списка */
.tr .chev { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.row-chat {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--accent); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.tr:hover .row-chat, .row-chat:focus-visible { opacity: 1; }
.row-chat:hover { border-color: var(--accent); background: var(--accent-soft); }
.row-chat[disabled] { color: var(--muted); cursor: not-allowed; }
.tr:hover .row-chat[disabled] { opacity: .5; }

/* полоса режима проверки вёрстки: видна всегда, закрыть нельзя */
.demo-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 9999; padding: 6px 14px;
  background: var(--red); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-align: center;
}
/* отступ под полосу ставит скрипт: её высота зависит от ширины экрана */

/* подсказка у кнопки входа: предупреждение о поведении CRM, а не украшение */
.signin-hint {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--amber-soft); color: var(--amber);
  font-size: 11.5px; line-height: 1.45;
}

/* ───────── U02: курсор и фокус говорят правду о том, что можно нажать ─────────
   Раньше строка списка и вкладки были div/button без явного курсора: рука появлялась
   не везде, а у текста местами стоял pointer, будто его можно нажать. Правило одно:
   нажимаемое — рука, текст и поля — обычное выделение и caret. */
[role="button"], .tr[data-row], .tabs button, .seg button, .chip, a[href] { cursor: pointer; }
.tr[data-row] .nm, .tr[data-row] .meta, .msg-row .t, .card p, .note, .nodata { cursor: inherit; }
input, textarea, select { cursor: auto; }
input[type="search"], input[type="email"], input[type="password"], textarea { cursor: text; }
.card h2, .sec, .foot { cursor: default; user-select: text; }

/* Видимый фокус с клавиатуры — на всём, что нажимается. Ободок рисуется внутрь, чтобы
   не срезался прокручиваемым родителем. */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Иконочная кнопка: лупа и крестик. Имя для читалки задаётся aria-label в разметке. */
.btn.icon {
  width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted);
}
.btn.icon:hover { color: var(--text); border-color: var(--accent); }

/* Длинный текст сообщения: показываем целиком, перенося слова. */
.msg-row .t { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-row .more { margin-top: 3px; font-size: 11.5px; color: var(--accent); background: none; border: 0; padding: 0; }
.msg-row .body { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-row .body.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ───────── U05: переписка как переписка ─────────
   Входящие слева, наши справа другим цветом. Пузырь не шире двух третей, текст переносится
   целиком — обрезать сообщение клиента нельзя. */
ul.thread { display: flex; flex-direction: column; gap: 8px; }
.bubble-row { display: flex; border: 0; padding: 0; }
.bubble-row.in { justify-content: flex-start; }
.bubble-row.out { justify-content: flex-end; }
.bubble {
  max-width: 68%; min-width: 0; padding: 8px 11px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--line2);
}
.bubble-row.out .bubble { background: var(--accent-soft); border-color: transparent; }
.bubble .b-top { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.bubble .b-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .b-foot { font-size: 10.5px; color: var(--faint); margin-top: 4px; }
.bubble .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ───────── U08: строка очереди ───────── */
/* N10. Превью бывает в тысячу знаков. Колонки фиксированы по минимуму, превью живёт только в
   своей и обрезается двумя строками; `min-width: 0` на всех ячейках — иначе длинное слово
   распирает грид и наезжает на время, имя и стрелку. Проверять надо и при открытом чате:
   там колонка вдвое уже. */
.tr.inbox-row {
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 128px 96px 28px;
  cursor: pointer; align-items: start;
}
.tr.inbox-row > * { min-width: 0; overflow: hidden; }
.tr.inbox-row .prev {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; color: var(--muted);
}
.tr.inbox-row .wait, .tr.inbox-row .when { white-space: nowrap; }
/* N10. Ширина строки зависит не только от окна: открытый чат забирает половину, и колонки
   128+96+28 уже не помещаются — время схлопывалось в ноль и пропадало с экрана. Поэтому меряем
   САМУ таблицу, а не окно: @container реагирует и на узкое окно, и на открытый чат одинаково. */
.table { container-type: inline-size; }

@container (max-width: 620px) {
  /* Узко — строка перестаёт быть таблицей и становится двумя рядами: имя и время сверху,
     превью под ними. Ничего не прячется и ничто ни на что не наезжает. */
  .tr.inbox-row {
    grid-template-columns: 1fr auto 20px;
    grid-template-areas: "who when chev" "prev prev prev" "wait wait wait";
    row-gap: 4px;
  }
  .tr.inbox-row .who { grid-area: who; }
  .tr.inbox-row .when { grid-area: when; }
  .tr.inbox-row .chev { grid-area: chev; }
  .tr.inbox-row .prev { grid-area: prev; -webkit-line-clamp: 3; }
  .tr.inbox-row .wait { grid-area: wait; }
  .tr.contact-row { grid-template-columns: 1fr 20px; grid-template-areas: "who chev" "prev prev"; row-gap: 4px; }
  .tr.contact-row .who { grid-area: who; }
  .tr.contact-row .prev { grid-area: prev; }
  .tr.contact-row .chev { grid-area: chev; }
}

/* Запасной путь для браузеров без @container: там ориентир — окно. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .tr.inbox-row {
      grid-template-columns: 1fr auto 20px;
      grid-template-areas: "who when chev" "prev prev prev" "wait wait wait";
      row-gap: 4px;
    }
    .tr.inbox-row .who { grid-area: who; }
    .tr.inbox-row .when { grid-area: when; }
    .tr.inbox-row .chev { grid-area: chev; }
    .tr.inbox-row .prev { grid-area: prev; }
    .tr.inbox-row .wait { grid-area: wait; }
  }
}
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.line { background: none; border: 1px solid var(--line); color: var(--muted); }

/* ───────── U15: сетка месяца ───────── */
.cal-head { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.cal-title { font-size: 14px; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: center; padding: 4px 0; }
.cal-day {
  min-height: 56px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 7px; cursor: pointer;
}
.cal-day:hover { border-color: var(--accent); }
.cal-day.out { opacity: .38; }
.cal-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.on { background: var(--accent-soft); }
.cal-day .n { font-size: 12px; color: var(--muted); }
.cal-day .dots { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.cal-day .dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-day .dots i.ses { background: var(--accent); }
.cal-day .dots i.due { background: var(--amber); }
.cal-day .dots b { font-size: 10px; color: var(--faint); font-weight: 600; }

@media (max-width: 900px) {
  .cal-day { min-height: 44px; }
  .bubble { max-width: 88%; }
}

/* ───────── U12: вкладки закреплённых чатов ───────── */
.panel-tabs { display: flex; gap: 4px; padding: 6px 8px 0; overflow-x: auto; flex: none; }
.panel-tabs:empty { display: none; }
.ptab {
  display: flex; align-items: center; gap: 2px; flex: none; max-width: 170px;
  border: 1px solid var(--line2); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--surface2);
}
.ptab.on { background: var(--surface); border-color: var(--line); }
.ptab .nm {
  padding: 6px 4px 6px 10px; font-size: 12px; color: var(--muted);
  max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptab.on .nm { color: var(--text); }
.ptab .nm .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-left: 6px; }
.ptab .x { padding: 6px 8px 6px 2px; color: var(--faint); font-size: 14px; line-height: 1; }
.ptab .x:hover { color: var(--red); }
.panel-frames { flex: 1 1 auto; min-height: 0; position: relative; }
.panel-frames iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* U04: встроенный плеер голосового */
.bubble .audio { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.bubble .audio audio { width: 100%; max-width: 260px; height: 32px; }

/* ───────── N03/N08: разговор с постоянным полем ввода ─────────
   Лента прокручивается сама, поле ввода прижато к низу карточки и не уезжает вместе с лентой. */
.card.conv { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 220px); }
.conv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.conv-scroll .older { display: flex; justify-content: center; padding: 6px 0 10px; }
.composer {
  flex: none; border-top: 1px solid var(--line2); padding-top: 10px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.composer textarea {
  width: 100%; resize: vertical; min-height: 44px; border-radius: 12px; padding: 9px 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit;
}
.composer textarea:disabled { opacity: .6; }

/* N06/N07: строки контактов и связанных дел партнёра открываются */
.tr.contact-row { grid-template-columns: minmax(160px, 1.2fr) minmax(0, 2fr) 28px; cursor: pointer; align-items: center; }
.tr.partner-case { grid-template-columns: minmax(200px, 1fr) 28px; cursor: pointer; align-items: center; }
.tr.contact-row > *, .tr.partner-case > * { min-width: 0; overflow: hidden; }
.tr.contact-row:hover, .tr.partner-case:hover { background: var(--surface2); }

/* №9: состояние разговора в левом меню и на вкладке */
.mark { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-left: 6px; flex: none; }
.mark.idle { background: var(--line); }
.mark.ok { background: var(--accent); }
.mark.err { background: var(--red); }
.mark.run {
  background: none; border: 1.5px solid var(--accent); border-top-color: transparent;
  width: 9px; height: 9px; animation: spin .7s linear infinite;
}
.chip .st { display: flex; align-items: center; gap: 2px; }
.chip .st .mark { margin-left: 0; margin-right: 5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* №6: готовый текст получателю — отдельный блок со своей кнопкой копирования */
.bub .ready {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
}
.bub .ready-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.bub .ready-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.bub .ready .tools { margin-top: 6px; }

/* ───────── RFC-0022: выбор на седьмом чате и закрепление ───────── */
.chooser { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink, #1b1f1c) 28%, transparent); padding: 16px; }
.chooser.hide { display: none; }
.chooser-card { background: var(--card, #fff); color: var(--ink, #1b1f1c); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 18px; width: min(460px, 100%); max-height: 86vh; overflow: auto; }
.chooser-card h2 { font-size: 15px; margin: 0 0 6px; }
.chooser-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.chooser-list li { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  border: 1px solid var(--line, #e3e6e3); border-radius: 10px; padding: 8px 10px; }
.chooser-list .nm { min-width: 0; overflow-wrap: anywhere; }
.chooser-list .warn { color: var(--warn, #9a5b00); font-weight: 600; }
.ptab .pin { border: 0; background: transparent; cursor: pointer; color: var(--faint, #8a918c);
  padding: 4px 5px; line-height: 0; border-radius: 6px; display: inline-flex; align-items: center; }
.ptab .pin:hover { color: var(--text); }
.ptab .pin.on { color: var(--accent, #2f5d46); }
.ptab .pin:focus-visible { outline: 2px solid var(--accent, #2f5d46); outline-offset: 1px; }
.ptab .pin.on svg { transform: rotate(-30deg); }
/* Палец, а не мышь: кнопка — не меньше 36 px, иначе на телефоне попадают в название или крестик. */
@media (pointer: coarse) {
  .ptab .pin, .ptab .x { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}
.chip.closed { opacity: .72; }

/* ───────── RFC-0022: лоток вложений (оба чата) ───────── */
.tray { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; max-height: 38vh; overflow: auto; }
.tray-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line, #e3e6e3);
  border-radius: 10px; padding: 6px 8px; min-width: 0; }
.tray-item.error { border-color: color-mix(in srgb, var(--danger, #b3261e) 45%, transparent); }
.tray-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.tray-ext { width: 36px; height: 36px; border-radius: 6px; flex: none; display: grid; place-items: center;
  font-size: 10px; text-transform: uppercase; background: var(--soft, #f1f3f1); color: var(--muted, #6b726d); }
.tray-main { display: grid; min-width: 0; flex: 1; }
.tray-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-st { font-size: 12px; color: var(--muted, #6b726d); overflow-wrap: anywhere; }
.tray-item.error .tray-st { color: var(--danger, #b3261e); }
.tray-x { flex: none; }
body.dragging .comp { outline: 2px dashed var(--accent, #2f5d46); outline-offset: 4px; }

/* Новая версия опубликована — полоса вверху, не всплывающее окно: работу не прерывает. */
.version-bar { position: sticky; top: 0; z-index: 70; display: flex; gap: 10px; align-items: center;
  justify-content: center; flex-wrap: wrap; padding: 8px 16px; font-size: 13px;
  background: var(--accent, #2f5d46); color: #fff; }
.version-bar .btn { background: #fff; color: var(--accent, #2f5d46); }

/* RFC-0022, пункт 6: календарь Андрея рядом с нашими встречами. */
.cal-day .dots i.evt { background: var(--muted, #9aa19c); opacity: .6; }
li.evt .t { color: var(--muted, #6b726d); }
li.cancelled .t { text-decoration: line-through; }
.muted { color: var(--muted, #6b726d); }

/* ───────── RFC-0024 D2: вход в общий чат — центр верхней панели ───────── */
.general-entry {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 36px; padding: 4px 14px 4px 5px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45);
}
.general-entry:hover { background: var(--accent2); }
.general-entry.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.general-entry:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.general-entry .ge-lg {
  width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--on-accent); color: var(--accent); font-weight: 700; font-size: 12px;
}
@media (pointer: coarse) { .general-entry { min-height: 44px; } }
/* Узкий экран: заголовок, статус и Refresh — первой строкой, вход — своей строкой во всю ширину.
   Так он заметен и ни на что не наезжает, даже при длинном имени дела в заголовке. */
@media (max-width: 620px) {
  #main .top { flex-wrap: wrap; }
  #main .top .general-entry { order: 10; flex: 1 1 100%; justify-content: center; }
  #main .top .crumb { min-width: 0; flex: 1 1 auto; }
}

/* ───────── RFC-0024 D5: тип записи цветом И словом ─────────
   Заливка строки, полоса слева и плашка «Lead»/«Client». Цвет не единственный признак: плашка
   читается и без него. Наведение и фокус темнеют в пределах того же тона — тип не теряется.
   Вторичный и бледный текст в окрашенной строке переключается на --row-muted: обычный
   --muted/--faint на жёлтом и зелёном не дотягивает до 4.5:1. */
.tr.t-lead, .tr.t-client, .tr.t-paused { --muted: var(--row-muted); --faint: var(--row-muted); }
.tr.t-lead { background: var(--lead-bg); box-shadow: inset 4px 0 0 var(--lead-edge); }
.tr.t-client { background: var(--client-bg); box-shadow: inset 4px 0 0 var(--client-edge); }
.tr.t-paused { background: var(--paused-bg); box-shadow: inset 4px 0 0 var(--paused-edge); }
.tr.t-lead:hover, .tr.t-lead:focus-visible { background: var(--lead-bg-h); }
.tr.t-client:hover, .tr.t-client:focus-visible { background: var(--client-bg-h); }
.tr.t-paused:hover, .tr.t-paused:focus-visible { background: var(--paused-bg-h); }
.tr[data-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr.t-lead .av { background: var(--lead-tag-bg); color: var(--lead-tag); }
.tr.t-client .av { background: var(--client-tag-bg); color: var(--client-tag); }
.tr.t-paused .av { background: var(--paused-tag-bg); color: var(--paused-tag); }
.type-tag {
  display: inline-block; padding: 0 6px; margin-right: 2px; border-radius: 6px; font-size: 11px; font-weight: 650;
  line-height: 17px; vertical-align: baseline;
}
.type-tag.lead { background: var(--lead-tag-bg); color: var(--lead-tag); }
.type-tag.client { background: var(--client-tag-bg); color: var(--client-tag); }
.type-tag.paused { background: var(--paused-tag-bg); color: var(--paused-tag); }
.chead .av.t-lead { background: var(--lead-tag-bg); color: var(--lead-tag); box-shadow: inset 0 0 0 2px var(--lead-edge); }
.chead .av.t-client { background: var(--client-tag-bg); color: var(--client-tag); box-shadow: inset 0 0 0 2px var(--client-edge); }

/* ───────── RFC-0024 D6: «к новым» поверх ленты ───────── */
.to-new {
  position: sticky; bottom: 10px; z-index: 5; display: block; margin: 8px auto 0; padding: 8px 14px;
  min-height: 36px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
}
.to-new.hide { display: none; }
.to-new:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ───────── RFC-0024 D3: голосовое ───────── */
.btn.mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Идёт запись — зелёный микрофон с мягкой пульсацией (Роман 30.09: красный сбивал с толку).
   Красным остаётся только квадрат отмены рядом. */
.btn.mic.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); animation: vmic 1.6s ease-in-out infinite; }
@keyframes vmic {
  0%, 100% { box-shadow: 0 0 0 0 var(--ring); }
  50% { box-shadow: 0 0 0 7px var(--ring); }
}
.btn.mic-cancel { color: var(--red); border-color: var(--red); }
.btn.mic-cancel.hide { display: none; }
.vrec { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.vrec .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: vpulse 1.6s ease-in-out infinite; }
@keyframes vpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .vrec .dot { animation: none; }
  .btn.mic.on { animation: none; box-shadow: 0 0 0 4px var(--ring); }
}
.note.bad { color: var(--red); }
.vplayer { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.vplayer.hide { display: none; }
.vplayer audio { height: 34px; flex: 1; min-width: 0; }
.vcard { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 0 0 6px; background: var(--surface2); }
.vcard .vhead { display: flex; align-items: center; gap: 8px; }
.vcard .vhead b { font-size: 12.5px; }
.vcard .vhead .btn { margin-left: auto; }
.vcard .row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vcard .vtext { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub .vline { margin-bottom: 4px; }
@media (pointer: coarse) {
  .btn.mic, .btn.mic-cancel, #attachRead { min-width: 44px; min-height: 44px; }
  #send, .vcard .btn { min-height: 44px; min-width: 44px; padding-left: 14px; padding-right: 14px; }
}

/* ───────── RFC-0024 D4: мобильная приёмка (этап 5, 01.10) ─────────
   Найдено обходом опубликованной страницы на 360/390/430: поля 12.5–13.5 px (Safari iOS
   приближает страницу при фокусе на поле мельче 16 px), кнопки 15–38 px, меню столбцом
   занимало весь первый экран, список чатов скрыт вовсе, вкладка History уезжала за край. */

/* Палец, а не мышь: поля — 16 px, всё нажимаемое — не меньше 44 px. Настольный вид не трогаем. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .btn, .btn.sm, select, input[type="search"], input[type="text"], input[type="email"], input[type="password"],
  .tabs button, .seg button, .chip, .nav button, #panelClose, #panelTabs .ptab .nm,
  .row-chat, .msg-row .more, .bubble .more, .cal-day, .picker .btn { min-height: 44px; }
  .btn.sm { padding: 6px 12px; font-size: 13px; }
  .btn.icon, .row-chat, #panelClose, [data-month], .ptab .pin, .ptab .x { min-width: 44px; min-height: 44px; }
  .ptab .pin, .ptab .x { display: inline-flex; align-items: center; justify-content: center; }
  .seg button { padding: 6px 12px; min-width: 44px; }
  .bubble .more, .msg-row .more { display: inline-flex; align-items: center; padding: 0 6px; }
  a.file { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}

/* Узкий экран: меню — одна строка вкладок с прокруткой вбок; тема и выход — в строке с логотипом;
   список открытых и закреплённых чатов виден строкой ниже (раньше скрыт: закрытый закреплённый
   чат на телефоне было не открыть). */
@media (max-width: 900px) {
  #sidebar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; }
  #sidebar .brand { padding: 0; }
  #sidebar .side-foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
  #sidebar .side-foot .btn { flex: none; white-space: nowrap; }
  #sidebar .nav { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  #sidebar .nav::-webkit-scrollbar { display: none; }
  #sidebar .nav button { width: auto; flex: none; white-space: nowrap; padding: 8px 14px; }
  #sidebar .chips { display: flex; grid-column: 1 / -1; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  #sidebar .chips::-webkit-scrollbar { display: none; }
  #sidebar .chips:empty, #sidebar .chips > .empty { display: none; }
  #sidebar .chips .chip { width: auto; flex: none; max-width: 70vw; }
  #sidebar .chips .note { flex: none; max-width: 80vw; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; }
  .tr > * { min-width: 0; }
  /* Панель чата — во весь видимый экран над клавиатурой: высоту и сдвиг ставит screen.js по
     visualViewport (iOS при клавиатуре не уменьшает fixed-элементы, и ввод уходил под неё). */
  .panel.open { top: calc(var(--vv-top, 0px) + 8px); bottom: auto; height: calc(var(--vv-h, 100dvh) - 16px); }
  /* Настольный min-width 320 px на узком экране (текст 200% ≈ 195 CSS px) выталкивал чат за край. */
  .panel.open { min-width: 0; }
}
@media (max-width: 400px) {
  /* Семь дней по 44 px не помещались в карточку на 360–390: сетка берёт поля карточки. */
  .cal-grid { gap: 1px; margin-inline: -14px; }
  #main .scroll { padding-left: 10px; padding-right: 10px; }
}
/* Подпись строки Inbox срезалась краем без многоточия: строчный span не обрезается с «…». */
.inbox-row .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Очень узкий чат (текст 200% на телефоне, кадр ≈ 170 px): заголовок переносится, а не уводит
   кнопку поиска за край. */
@media (max-width: 300px) {
  .chat .head { flex-wrap: wrap; }
}

/* Карточка подтверждения: состав файлов списком (этап 5). */
.draft-files { margin-top: 8px; }
.draft-files ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.draft-files li { overflow-wrap: anywhere; font-size: 12.5px; }

/* ───────── Поле правки черновика (01.10) ─────────
   Прежде — голый textarea без стилей: узкий, без фона и отступов, на настольной узкой панели
   с мышью — тоже. Теперь: вся ширина карточки, читаемо в обеих темах, растёт по тексту до 60 %
   окна (JS) — Save/Back остаются видны в низком окне. */
.draft .draft-editor {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px;
  min-height: calc(8 * 1.5em + 22px); max-height: 60vh; overflow-y: auto; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.draft .draft-editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
@media (max-height: 520px) { .draft .draft-editor { min-height: calc(4 * 1.5em + 22px); } }

/* ───────── Фильтры-сегменты — самостоятельный компонент (01.10) ─────────
   Прежние стили жили только внутри .filters, а фильтры Inbox стоят вне его: кнопки сливались
   в строку текста без видимого выбора. Теперь .seg одинаков везде; на узком месте — прокрутка. */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.card > .seg { margin: 6px 0 4px; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; white-space: nowrap; padding: 5px 12px; border-radius: 999px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.seg button:hover { color: var(--text); background: var(--surface2); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inbox-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-head h2 { margin: 0; }

/* Исход отправки после подтверждения (01.10): отдельная строка, пока исход не окончательный. */
.card.outcome { padding: 10px 12px; }
.card.outcome.bad { border-color: var(--red); }

/* ───────── RFC-0028: операции в ленте ─────────
   Вопрос до приёма — пунктирный и бледный: он ещё не у Сельмы. Состояние операции — строка
   под вопросом; Stop/Cancel — рядом. Файлы — строка с многоточием, подробности раскрываются
   и не выталкивают поле ввода. */
.bub.pending { opacity: .72; border-style: dashed; }
.job-st { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bub.me .job-st { color: inherit; opacity: .9; }
.job-st.failed, .job-st.refused, .job-st.needs_reconciliation, .job-st.unconfirmed { color: var(--amber); }
.job-st .btn.stop { color: var(--red); border-color: var(--red); }
/* Причина ожидания/отказа и действие (review D2) — под строкой состояния, переносится, не толкает Stop. */
.job-why { margin-top: 4px; font-size: 12px; line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.job-file { margin-top: 4px; font-size: 12px; max-width: 100%; }
.job-file summary { display: flex; gap: 6px; align-items: baseline; cursor: pointer; list-style: none; min-width: 0; }
.job-file summary::-webkit-details-marker { display: none; }
.job-file .jf-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-file .jf-st { flex: none; }
.job-file.partial .jf-st, .job-file.failed .jf-st { color: var(--amber); font-weight: 600; }
.bub.me .job-file.partial .jf-st, .bub.me .job-file.failed .jf-st { color: inherit; text-decoration: underline; }
.job-file .note { overflow-wrap: anywhere; }
.tray-main { min-width: 0; }
.tray-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-st { overflow-wrap: anywhere; }
.win-note .row { margin-top: 6px; gap: 6px; flex-wrap: wrap; }
@media (pointer: coarse) { .job-file summary { min-height: 44px; align-items: center; } }

/* Чат на телефоне — отдельный экран, а не слой поверх основного (Роман 04.10, iPhone): панель
   стояла с отступом 8 px на полупрозрачном стекле, и сквозь неё читались шапка и меню. Теперь —
   весь видимый экран, сплошной фон; сверху одна строка: вкладки чатов и крестик. Имя чата уже
   есть в шапке самого чата, второй заголовок не нужен. Закрыл — снова основной экран. */
@media (max-width: 900px) {
  .panel.open { inset: auto 0 auto 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); }
  .panel.open .panel-grip { display: none; }
  .panel-inner { position: relative; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
  .panel-head { position: absolute; top: 0; right: 0; z-index: 2; border: 0; padding: 6px 8px; }
  .panel-head .lg.sm, .panel-head > div, .panel-head .grow { display: none; }
  .panel-tabs, .panel-tabs:empty { display: flex; align-items: flex-end; min-height: 56px; padding: 6px 64px 0 8px; border-bottom: 1px solid var(--line2); }
  body.chat-open { overflow: hidden; }
  /* Закрытая панель на телефоне занимала свою строку сетки (268 px пустоты под Inbox — скриншот
     Романа 04.10). Кадры чатов в ней живут дальше (идущий ответ не рвётся), но места не берут. */
  .panel:not(.open) { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }
}

/* RFC-0028 B: связанные карточки и экран пары. Две карточки рядом, на узком экране — друг под другом. */
.id-block .k, .id-pair .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
.id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line2); }
.id-row .id-card { flex: 1 1 200px; min-width: 0; }
.id-row > .s { font-size: 12px; color: var(--muted); flex: 1 1 140px; }
.id-card .t { font-weight: 600; overflow-wrap: anywhere; }
.id-card .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.id-card .btn { margin-top: 6px; }
.id-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.id-two .id-card { border: 1px solid var(--line2); border-radius: 12px; padding: 10px; background: var(--surface2); }
.id-two .id-card .k { margin-top: 0; }
.id-actions { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.id-note { margin: 6px 0; }
@media (max-width: 520px) { .id-two { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .id-block .btn, .id-pair .btn { min-height: 44px; } }

/* RFC-0029: кнопка выбора модели в строке ввода (не шире 110 px) и нижний лист выбора. */
.model-btn { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.model-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; }
.model-sheet.hide { display: none; }
.model-sheet .ms-in { width: 100%; max-width: 520px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line2);
  border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
.ms-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.ms-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ms-m { min-height: 44px; justify-content: center; }
.ms-m.on { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.ms-m[disabled] { opacity: .5; }
.ms-m .note { font-size: 10px; }
#effortRange { width: 100%; accent-color: var(--accent); min-height: 32px; }
.ms-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ms-ticks .on { color: var(--text); font-weight: 600; }
.ms-actions { display: flex; margin-top: 12px; gap: 8px; flex-wrap: wrap; align-items: center; }
.ms-actions .grow { flex: 1; }
.model-tag { margin-top: 4px; font-size: 11px; color: var(--muted); }
.model-tag summary { cursor: pointer; list-style: none; }
.model-tag summary::-webkit-details-marker { display: none; }
.model-tag.bad summary { color: var(--amber); }
@media (pointer: coarse) { .model-btn, .ms-actions .btn { min-height: 44px; } }

/* RFC-0031: ALG → телефон → одобренные UE первым блоком Overview. Три поля в строку на компьютере;
   на узкой панели и телефоне переносятся в том же порядке (порядок — порядок разметки). */
.card.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
.fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact > .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.fact .fact-v, .fact .fact-v b { font-size: 14px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.fact .fact-v b.not-alg { font-weight: 600; color: var(--muted); }
.fact .fact-state { font-size: 13px; color: var(--faint); font-style: italic; }
.fact .fact-state.err { color: var(--red); font-style: normal; }
.fact .fact-src { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.fact .fact-warn { font-size: 11.5px; color: var(--amber); overflow-wrap: anywhere; }
.fact .fact-phone, .fact .fact-ue { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fact .fact-phone + .fact-phone, .fact .fact-ue + .fact-ue { margin-top: 4px; }
.phone-link {
  align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; color: var(--accent); text-align: left;
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.phone-link:hover { color: var(--accent2); }
@media (pointer: coarse) { .phone-link { min-height: 44px; } }

/* Колонка списка «ALG · Phone · UE» — вместо Due (распоряжение Романа 05.10). */
.tr .lf { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 12px; }
.tr .lf .d { font-size: 11.5px; color: var(--muted); }
.tr .lf .lf-alg { font-weight: 650; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .lf .lf-ue { color: var(--muted); font-weight: 600; }
.tr .lf .warn { color: var(--amber); }
.lf-phone {
  max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.lf-phone:hover { color: var(--accent2); }
@media (max-width: 620px) {
  .tr .lf { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
}
@media (pointer: coarse) { .lf-phone { min-height: 44px; } }

/* RFC-0033 §7: прогресс большого задания в ленте чата (progress.js). Появляется только у
   операции, для которой /jobs прислал события плана; сервер до RFC-0033 их не шлёт. */
.prog { border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); padding: 10px 12px; font-size: 13px; max-width: 100%; }
.prog.ready { border-color: var(--accent); }
.prog-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 6px; }
.prog-h b { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.prog-h b.ok { color: var(--accent); }
.prog-h b.warn { color: var(--amber); }
.prog-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.prog-steps li { overflow-wrap: anywhere; }
.prog-steps li::marker { color: var(--muted); }
.prog-steps li .t { color: var(--text); }
.prog-steps li .l { color: var(--muted); font-size: 12px; margin-left: 6px; }
.prog-steps li .c { display: block; font-size: 11.5px; color: var(--muted); }
.prog-steps li .c.warn { color: var(--amber); }
.prog-steps li .c.err { color: var(--red); }
.prog-steps li.cur .t { font-weight: 650; }
.prog-steps li.st-completed .l { color: var(--accent); }
.prog-steps li.stale .t, .prog-steps li.st-cancelled .t { color: var(--faint); }
.prog-steps li.stale .l { color: var(--amber); }
.prog-log { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line2); font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.prog-n { margin-top: 6px; font-size: 12px; color: var(--muted); }
.prog .btn { margin-top: 8px; }
@media (pointer: coarse) { .prog .btn { min-height: 44px; } }

/* RFC-0033: этап крупно и безопасный просмотр HTML-результата (safe-html.js). */
.prog-phase { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.prog-preview { margin-top: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface2); max-width: 100%; overflow: hidden; }
.prog-preview-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--line2); }
.prog-preview-h .btn { flex: none; white-space: nowrap; }
.prog-preview-b { padding: 10px 12px; max-height: 60vh; overflow: auto; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; color: var(--text); }
.prog-preview-b table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.prog-preview-b th, .prog-preview-b td { border: 1px solid var(--line2); padding: 3px 6px; vertical-align: top; }
.prog-preview-b h1, .prog-preview-b h2, .prog-preview-b h3 { font-size: 15px; margin: 10px 0 4px; }
.ms-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 8px; }
.model-btn.on { color: var(--text); border-color: var(--accent); }