/* JORDIS app — направление Air (RFC-0046, решение Романа 15.10; ADR-0017 заменяет ADR-0016 Graphite): светлый нейтральный
   фон с небесным свечением, полупрозрачные поверхности с тонким световым краем, мягкие тени, небесно-голубой акцент;
   знак S «Geometric» — контур глифа Sora ExtraBold (selma-s.svg). Две темы: светлая и тёмная Air (графитово-синяя).
   Тема — выбор человека (localStorage `selmaTheme`), без выбора — системная (selma.js). Файл отдаётся Caddy; RFC-0006. */

/* Hanken Grotesk — SIL Open Font License 1.1, Copyright 2021 The Hanken Grotesk Project Authors
   (github.com/marcologous/hanken-grotesk). Латиница, вариативный 400–700; текст лицензии — docs/design/2026-10-14-redesign/OFL.txt. */
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("./hanken-grotesk.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f0f5f8; --bg1: #f9fbfd; --bg2: #e2edf5; --bg3: #d7edfa;
  --surface: #fbfdfe; --surface2: #f1f6f9; --surface3: #e6eff5;
  --glass: rgba(255, 255, 255, .76); --glass-edge: rgba(255, 255, 255, .92); --glass-solid: #f7fbfd;
  --line: rgba(35, 77, 107, .16); --line2: rgba(35, 77, 107, .09);
  --text: #1d3345; --muted: #536b7e; --faint: #5f7587;
  --accent: #1d6f9f; --accent2: #155b84; --accent-soft: #e2f0f8; --on-accent: #ffffff; --link: #1d6f9f;
  --sky: #80c9ee;
  --amber: #8a5a12; --amber-soft: #f7efe1;
  --red: #9a4549; --red-soft: #f8e9ea;
  --blue: #2f6a96; --blue-soft: #e5f0f8;
  --purple: #6e5d92; --purple-soft: #efecf6;
  --green: #2c7560; --green-soft: #e2f1ec;
  --gray-soft: #edf2f5;
  --dot: #2f9e68;
  /* Тип записи и отправителя — знак цвета у имени (клиент, лид, партнёр, неизвестный). */
  --t-client: #0f9d63; --t-lead: #d97706; --t-partner: #7c3aed; --t-unknown: #9fb0bc;
  --lead-bg: #fbfdfe; --lead-bg-h: #f1f6f9; --lead-edge: #d97706; --lead-tag-bg: #e5f0f8; --lead-tag: #23496c;
  --client-bg: #fbfdfe; --client-bg-h: #f1f6f9; --client-edge: #0f9d63; --client-tag-bg: #e2f1ec; --client-tag: #1d5444;
  --paused-bg: #fbfdfe; --paused-bg-h: #f1f6f9; --paused-edge: #8399a8; --paused-tag-bg: #edf2f5; --paused-tag: #3d5263;
  --row-muted: #536b7e;
  --rail: rgba(255, 255, 255, .62); --rail-edge: rgba(255, 255, 255, .86); --rail-ink: #56707f; --rail-on: #176b99; --rail-strong: #1d3345;
  --rail-faint: #5f7587; --rail-hover: rgba(115, 173, 209, .13); --rail-active: rgba(93, 172, 219, .16);
  --focus: #1477ae;
  --shadow: 0 3px 4px -4px rgba(43, 79, 108, .16), 0 18px 46px -28px rgba(51, 91, 120, .24), inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-lift: 0 4px 8px -6px rgba(43, 79, 108, .2), 0 26px 56px -30px rgba(51, 91, 120, .32), inset 0 1px 0 rgba(255, 255, 255, .9);
  --ring: rgba(29, 111, 159, .28);
  --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}

/* Тёмная Air — не инверсия: глубокое графитово-синее основание, светлый текст, небесный акцент, сдержанное стекло. */
html.dark, html.forest {
  --bg: #0f1a24; --bg1: #13212e; --bg2: #0a121a; --bg3: rgba(56, 130, 182, .2);
  --surface: #172634; --surface2: #1c2d3c; --surface3: #243747;
  --glass: rgba(23, 38, 52, .74); --glass-edge: rgba(190, 225, 250, .09); --glass-solid: #172634;
  --line: rgba(165, 205, 235, .18); --line2: rgba(165, 205, 235, .1);
  --text: #e6eef4; --muted: #a3b8c7; --faint: #8299ab;
  --accent: #6cc0ec; --accent2: #9dd6f4; --accent-soft: #1d3a50; --on-accent: #0b1822; --link: #8fd0f2;
  --amber: #e6b86a; --amber-soft: #3a2f1c;
  --red: #f0a3a6; --red-soft: #3d2428;
  --blue: #9cc8ee; --blue-soft: #1d3247;
  --purple: #c4b4ee; --purple-soft: #2b2742;
  --green: #7fd0b0; --green-soft: #1b3a31;
  --gray-soft: #1f2f3d;
  --dot: #4fd08f;
  --t-client: #34d399; --t-lead: #fbbf24; --t-partner: #a78bfa; --t-unknown: #6b8090;
  --lead-bg: #172634; --lead-bg-h: #1c2d3c; --lead-edge: #fbbf24; --lead-tag-bg: #1d3247; --lead-tag: #cfe2f6;
  --client-bg: #172634; --client-bg-h: #1c2d3c; --client-edge: #34d399; --client-tag-bg: #1b3a31; --client-tag: #c4eadb;
  --paused-bg: #172634; --paused-bg-h: #1c2d3c; --paused-edge: #6b8090; --paused-tag-bg: #1f2f3d; --paused-tag: #d6e1e9;
  --row-muted: #a3b8c7;
  --rail: rgba(19, 33, 46, .74); --rail-edge: rgba(190, 225, 250, .08); --rail-ink: #a6bccb; --rail-on: #bfe6ff; --rail-strong: #e6eef4;
  --rail-faint: #7f96a8; --rail-hover: rgba(140, 200, 240, .09); --rail-active: rgba(108, 192, 236, .17);
  --focus: #7fcbf2;
  --shadow: 0 3px 4px -4px rgba(0, 0, 0, .5), 0 22px 50px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(190, 225, 250, .07);
  --shadow-lift: 0 4px 8px -6px rgba(0, 0, 0, .55), 0 28px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(190, 225, 250, .09);
  --ring: rgba(108, 192, 236, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 14px/1.5 "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Небо Air: свечение сверху справа и мягкий наклонный градиент; неподвижно, за читаемыми поверхностями. */
  background-image:
    radial-gradient(ellipse at 85% 0%, var(--bg3) 0%, transparent 48%),
    linear-gradient(140deg, var(--bg1) 0%, var(--bg) 70%, var(--bg2) 100%);
  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; }
/* RFC-0049 F0-1: «missing» — пункты словами, без меток квалификатора. */
.case-body .card .missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.case-body .card .missing-list li { display: block; padding: 0; border: 0; }
.case-body .card .missing-list li.doc { font-weight: 550; }

/* ───────── окно чата поверх карточки ───────── */
.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); }

/* панель Jordis справа */
.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); }
/* Роман 04.11: карандаш имени — сразу справа от имени дела в шапке чата; длинное имя сжимается многоточием, карандаш остаётся. */
.panel-t-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.panel-t-row .t { min-width: 0; }
#panelPencil { display: contents; }
.panel-head .pencil { width: 22px; height: 22px; }
.panel-head .pencil .ic { width: 14px; height: 14px; }
#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; }
/* Подпись под текстом получателю — мелко и отдельно: на одном кегле она читалась продолжением письма клиенту. */
.bub .ready .note { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line2); color: var(--muted); font-size: 11.5px; }
/* RFC-0057: предложение Jordis под ответом и в карточке черновика — строка предложения, кнопки OK / Edit / Cancel по записи сервера,
   у решённых и устаревших — отметка состояния без кнопок. */
.bub .proposal, .card .proposal { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--accent); }
.bub .proposal:not(.open), .card .proposal:not(.open):not(.in-card) { border-color: var(--line); background: var(--surface2); }
.card .proposal.in-card { margin-top: 10px; }
.proposal .pr-h { font-size: 12px; color: var(--faint); margin-bottom: 2px; }
.proposal .pr-t { font-weight: 600; overflow-wrap: anywhere; }
.proposal .pr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.proposal .pr-mark { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.proposal.accepted .pr-mark { color: var(--green); }
.proposal.cancelled .pr-mark, .proposal.superseded .pr-mark, .proposal.stale .pr-mark { color: var(--faint); }
.proposal.edit .pr-mark { color: var(--accent2); }
.proposal .btn.ghost { margin-top: 6px; }
/* Телефон: кадр чата там во весь экран (≤ 768 px) и палец — во всю ширину и ≥ 44 px. Ширину считает сам кадр, а на компьютере
   панель чата тоже уже 768 px, поэтому условие ещё и по сенсорному экрану: мышью — в строку, как прочие кнопки. */
@media (max-width: 768px) and (pointer: coarse) {
  .proposal .pr-actions { flex-direction: column; }
  .proposal .pr-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
}
/* Контрольная версия (Роман 19.10): немецкий текст только для Андрея — без кнопки копирования, приглушённая, с пунктирной рамкой. */
.bub .ready.control { border-style: dashed; background: var(--surface2); }
.bub .ready.control .ready-h { color: var(--amber); }
.bub .ready.control .ready-t { color: var(--muted); }

/* ───────── 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-0067: Talk — живой разговор с Jordis (общий чат) ─────────
   Круглая кнопка со значком трубки (Роман 03.11; прежде слово «Talk», 27.10). Во время разговора — экран звонка:
   шар из частиц, внизу живая расшифровка, красная «положить трубку». */
.talk {
  --talk-level: 0;
  width: 44px; height: 44px; flex: none; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 0 0 calc(var(--talk-level) * 7px) var(--accent-soft);
  transition: background-color .15s ease, color .15s ease, box-shadow .08s linear;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.talk:hover { border-color: var(--faint); }
.talk .ic { width: 22px; height: 22px; display: block; margin: auto; }
.talk.hide { display: none; }
.talk[disabled] { opacity: .55; cursor: default; }
.talk.on { background: #e5484d; color: #fff; border-color: transparent; }   /* «положить трубку» — красная в обеих темах */
.talk.connecting { background: var(--surface2); color: var(--muted); border-color: var(--line); animation: talkwait 1.4s ease-in-out infinite; }
.talk.thinking { background: var(--amber-soft); color: var(--amber); border-color: transparent; animation: talkwait 1.4s ease-in-out infinite; }
@keyframes talkwait { 50% { opacity: .6; } }
.talk-state { color: var(--accent); }
.talk-state.bad { color: var(--red); }
.talk-state.hide { display: none; }
.talk-lines { display: flex; flex-direction: column; gap: 10px; }
.talk-lines:empty { display: none; }
/* Звонок в ленте (Роман 03.11): одна запись — трубка, время, длительность; по нажатию — вся расшифровка.
   В ленте — цвета темы: Андрей текстом, Jordis акцентом (белый — только на тёмном экране звонка). */
.call { align-self: stretch; max-width: 640px; margin: 4px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.call.hit { border-color: var(--accent); }
.call-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; border-radius: 14px;
}
.call-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.call-ic .ic { width: 16px; height: 16px; }
.call-what { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.call-n { flex: none; color: var(--muted); font-size: 12.5px; }
.call-caret { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .15s; }
.call.open .call-caret { transform: rotate(-135deg); margin-top: 4px; }
.call-lines { display: flex; flex-direction: column; gap: 8px; padding: 2px 14px 14px 54px; }
.call-lines .cap { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.call-lines .cap b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 1px; }
.call-lines .cap.me { color: var(--text); }
.call-lines .cap.selma { color: var(--accent); }
/* RFC-0072: поручение агенту дела — компактная строка: номер карточки ссылкой, состояние, время, вопрос; по нажатию — ответ. */
.disp {
  align-self: stretch; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px;
}
.disp-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--muted); }
.disp-ic .ic { width: 13px; height: 13px; }
.disp-card { flex: none; border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
span.disp-card { color: var(--text); text-decoration: none; cursor: default; }
.disp-card:focus-visible, .disp-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.disp-head { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; padding: 2px 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.disp-st { flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.disp-st.done { background: var(--accent-soft); color: var(--accent); }
.disp-st.human { background: var(--amber-soft); color: var(--amber); }
.disp-st.bad { background: var(--red-soft); color: var(--red); }
.disp-tm { flex: none; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.disp-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.disp.open .disp-txt { visibility: hidden; }
.disp.open .call-caret { transform: rotate(-135deg); margin-top: 4px; }
.disp-body { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 4px 30px; }
.disp-body p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.disp-body b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.disp-a.done { color: var(--text); }
.disp-a.human b { color: var(--amber); }
.disp-a.bad b { color: var(--red); }
.disp-count {
  flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--amber-soft); color: var(--amber);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.disp-count.hide { display: none; }
.disp-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) { .disp-body { padding-left: 2px; } }
@media (max-width: 620px) { .call-lines { padding-left: 14px; } }
.talk-line .talk-mark { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
/* Полоска звонка над полем ввода (Роман 03.11: вместо экрана с шаром). Цвета — темы: светлая в светлой, тёмная в тёмной. */
.call-bar {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.call-bar.hide { display: none; }
.call-wave-box { flex: 1 1 auto; min-width: 80px; height: 40px; display: block; overflow: hidden; }
.call-wave-box canvas { display: block; }
.call-state { flex: none; max-width: 46%; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.call-mute, .call-end { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.call-mute { border: 1px solid var(--line); background: var(--surface2); color: var(--text); }
.call-mute:hover { border-color: var(--faint); }
.call-mute.off { background: var(--text); color: var(--surface); border-color: transparent; }   /* выключен — залит, как в телефоне */
.call-end { border: 0; background: #e5484d; color: #fff; }                                        /* отбой — красный в обеих темах */
.call-end:hover { background: #d13d42; }
.call-mute:focus-visible, .call-end:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-mute .ic, .call-end .ic { width: 22px; height: 22px; }
@media (max-width: 620px) { .call-state { max-width: 38%; font-size: 12px; } .call-bar { gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .talk.connecting, .talk.thinking { animation: none; }
  .talk { transition: none; }
}

/* ───────── 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; }
  .btn.sm.excl-del { min-width: 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: операции в ленте ─────────
   Вопрос до приёма — пунктирный и бледный: он ещё не у Jordis. Состояние операции — строка
   под вопросом; 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; }
/* RFC-0074: карандаш — маленький, рядом со значением; виден всегда (на телефоне наведения нет), но тихий. */
.pencil { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; vertical-align: middle; }
.pencil .ic { width: 15px; height: 15px; }
.pencil:hover { color: var(--accent); background: var(--accent-soft, rgba(127,127,127,.12)); }
.pencil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--accent); }
.chead .nm { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chead .nm .pencil { margin-left: -4px; }
.chead .nm .nm-t { min-width: 0; overflow-wrap: anywhere; }
.fact .fact-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.fact .fact-mail { font-size: 14px; }
.fact .fact-add { display: flex; align-items: center; gap: 2px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.fact .fact-add .pencil { margin-left: -4px; }
.contact-form { max-width: 560px; }
.contact-form .cf-h { font-size: 13px; font-weight: 650; }
.contact-form .cf-row { display: grid; gap: 4px; }
.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); }

/* RFC-0040: большая задача со всем делом (dossier-ui.js). Покрытие папки и «без текста» — состав дела,
   а не ошибка: нейтральные цвета, красного нет. Итог — документы первыми, крупными кнопками. */
.big-task { font-size: 12px; color: var(--muted); white-space: nowrap; }
.big-task.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.big-task-note { margin-top: 6px; }
.dz-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 2px 0 6px; }
.dz-cov { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface2); }
.dz-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.dz-src li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.dz-src li b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.dz-more, .dz-check { margin-top: 6px; font-size: 12.5px; }
.dz-more summary, .dz-check summary, .prog-more summary { cursor: pointer; color: var(--muted); }
.dz-check summary { color: var(--text); font-weight: 600; }
.dz-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.dz-list .note { font-size: 11.5px; }
.dz-check .dz-list li.sev-danger { font-weight: 600; color: var(--amber); }
.dz-docs { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.dz-docs .btn.dz-doc { margin: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; gap: 12px;
  min-height: 40px; background: var(--surface); color: var(--text); border-color: var(--accent); font-weight: 600; }
.dz-docs .btn.dz-doc:hover { background: var(--accent-soft); }
.dz-doc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dz-doc-d { flex: none; font-size: 12px; font-weight: 500; color: var(--accent); }
.dz-auto { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 12.5px; }
.dz-auto-b { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-auto-b .btn { margin-top: 8px; }
.dz-answer .dz-docs { margin-bottom: 12px; }
.dz-answer .dz-check { margin-top: 10px; }
.prog.prog-more { margin-top: 10px; padding: 8px 12px; }
.prog.prog-more[open] summary { margin-bottom: 8px; }
@media (pointer: coarse) { .big-task, .dz-docs .btn.dz-doc { min-height: 44px; } }

/* RFC-0038: библиотека знаний в «More» и ссылки на знания в карточке плана */
.kb { margin-bottom: 14px; }
.kb-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.kb-stats b { color: var(--text); font-weight: 650; }
.kb-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.kb-tools input { flex: 1 1 220px; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 14px; }
.kb-tools select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; }
.kb-group h3 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); font-weight: 650; }
.kb-group h3 .c { font-weight: 500; }
.kb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kb-item { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 11px;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); }
.kb-item:hover { border-color: var(--accent); }
.kb-item .t { font-weight: 600; overflow-wrap: anywhere; }
.kb-item .bd { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.kb-item .m, .kb-item .why { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.kb-item .why { color: var(--amber); }
.kb-st { align-self: start; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.kb-st.ok { color: var(--green); background: var(--green-soft); }
.kb-st.warn { color: var(--amber); background: var(--amber-soft); }
.kb-st.err { color: var(--red); background: var(--red-soft); }
.kb-st.muted { color: var(--muted); background: var(--surface3); }
.kb-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 16px; }
.kb-dl { display: grid; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.kb-dl div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.kb-dl dt { color: var(--muted); }
.kb-dl dd { margin: 0; overflow-wrap: anywhere; }
.kb-secs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.kb-secs .note { width: 100%; }
.kb-closed { padding: 10px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.kb-closed ul, .kb-closed p { margin: 6px 0 0; }
.kb-text { padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); font-size: 14px; line-height: 1.55; overflow-x: auto; }
.kb-text .kb-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; overflow-wrap: anywhere; }
.kb-text table { border-collapse: collapse; margin: 8px 0; }
.kb-text th, .kb-text td { border: 1px solid var(--line2); padding: 4px 8px; text-align: left; }
.kb-text pre { white-space: pre-wrap; background: var(--surface3); padding: 8px; border-radius: 8px; }
.kb-text blockquote { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.prog-n.warn { color: var(--amber); }
.prog-kb { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kb-ref { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--accent); background: var(--surface); }
.kb-ref:hover { border-color: var(--accent); }
@media (max-width: 620px) { .kb-dl div { grid-template-columns: 1fr; gap: 0; } }
/* RFC-0038: куда уходит ответ — ожидающему заданию или новым вопросом */
.reply-to { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--amber-soft); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.reply-to .reply-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reply-to .reply-err { margin-top: 6px; color: var(--red); }

/* Одна строка = одно дело (13.10): карточки дела в шапке — дело и его вторые карточки, каждую можно открыть. */
.case-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 12.5px; }
.case-cards .k { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-right: 2px; }
.case-cards .case-card { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--text); }
.case-cards .btn { margin: 0; }
@media (pointer: coarse) { .case-cards .btn { min-height: 44px; } }

/* Решения Романа 14.10: «перед отправкой уточнить» — первым над документами, заметно, но не тревогой. */
.dz-clarify { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--text); font-size: 13px; }
.dz-clarify .dz-h { color: var(--amber); margin-top: 0; }
.dz-clarify .note { margin-top: 6px; font-size: 12px; }
.dz-answer .dz-clarify { margin-bottom: 10px; }
.hours-mark { white-space: nowrap; }

/* RFC-0043: брифинг к созвону и разбор — задание Jordis. Вместо пузыря «вопроса» — строка по центру; над ответом — метка. */
.bub.sys { align-self: stretch; max-width: 100%; background: transparent; border: 0; box-shadow: none; padding: 2px 0; }
.sys-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.sys-strip .sys-who { font-weight: 600; letter-spacing: .02em; }
.sys-strip .sys-what { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); }
.sys-strip .job-st, .sys-strip .prog { flex-basis: 100%; }
.sys-chip { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent2); font-size: 11.5px; font-weight: 600; }
.sys-dot { color: var(--accent); font-weight: 600; white-space: nowrap; }
.sys-today { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); }
.sys-today .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); font-weight: 600; margin-bottom: 6px; }
.sys-today ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sys-today .btn { margin: 0; text-align: left; }
@media (pointer: coarse) { .sys-today .btn { min-height: 44px; } }

/* RFC-0044: первый экран — три равные колонки, строка коучинга под ними; галочка задачи и окно подтверждения. */
.home-col { display: flex; flex-direction: column; }
.home-sub { font-size: 11px; color: var(--muted); margin: 10px 0 2px; font-weight: 600; }
.home-sub:first-child { margin-top: 0; }
.card li .home-link { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; background: none; border: 0; padding: 2px 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
.card li .home-link:hover .t { color: var(--accent2); text-decoration: underline; text-underline-offset: 2px; }
.card li .home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card li .muted, .card .muted { color: var(--muted); }
.home-zoom { font-size: 11.5px; color: var(--accent2); }
/* В узкой колонке название дела и задачи — до двух строк, а не обрезка на первом слове. */
.home-col li .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.home-col li .hours-mark { white-space: normal; font-size: 11px; }
.home-inbox { margin-top: 10px; align-self: flex-start; }
.home-task { align-items: center !important; }
.task-check { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface);
  cursor: pointer; padding: 0; position: relative; }
.task-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.task-check:hover::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-dot { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.task-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.task-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-line { grid-column: 1 / -1; font-size: 12px; color: var(--muted); padding: 2px 4px; }
.coach-line b { color: var(--text); font-weight: 600; }
.task-dialog { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.task-dialog-in { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.task-dialog-h { font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.task-dialog-err { margin-top: 10px; font-size: 12.5px; color: var(--red); }
.task-dialog-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.task-dialog-b .btn { min-width: 72px; justify-content: center; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .task-check, .task-dot { width: 26px; height: 26px; } .task-check:hover::after { left: 9px; top: 5px; } .task-dialog-b .btn { min-height: 44px; } }

/* RFC-0045: первый экран — Today шире, Waiting for reply уже; «From JORDIS» — в «Jordis chats» слева. */
.cards.home2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cards.home2 { grid-template-columns: 1fr; } }
/* Список дел без «Waiting for»: следующий шаг одной строкой. */
#table .tr { grid-template-columns: minmax(180px, 1.5fr) 150px minmax(220px, 2.4fr) 170px 34px; }
.tr .step .t.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .step .t.one .d { display: inline; }
/* «Jordis chats»: новое сообщение Jordis — зелёная точка, чат вверху. */
.mark.new { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip.sys-new .nm { font-weight: 650; }
.chip.sys-new .st { color: var(--accent2); }
@media (max-width: 1000px) { #table .tr { grid-template-columns: minmax(140px, 1.4fr) 120px minmax(160px, 1.6fr) 150px; } }
@media (max-width: 620px) { #table .tr { grid-template-columns: 1fr; } }

/* ═════════════════ RFC-0046 · направление Air (решение Романа 15.10, ADR-0017; прототипы docs/design/prototypes/2026-10-15-sky-glass и -s-marks) ═════════════════
   Последний слой файла: перекрывает прежние правила, не трогая их смысла. Меню — парящая стеклянная колонка иконок, раскрывается
   наведением или фокусом поверх экрана; карточки — полупрозрачное стекло со световым краем и мягкой тенью; подписи типа и
   стадии — знак цвета, не плашка; переключатели — подчёркивание. Знак S — selma-s.svg (Geometric), без подложки.
   Значки — icons.js (Phosphor Light). Размытие фона — только у закреплённых слоёв (меню, панель чата, окна), не у ленты. */

/* Логотип «кристалл S» (ADR-0019; прежде — знак S «Geometric», ADR-0017) везде, где раньше был квадрат с буквой: буква остаётся
   в разметке для читалки, на экране — selma-s.svg. */
#sidebar .brand .logo, .signin-card .lg, .panel-head .lg.sm, .chat .head .lg, .general-entry .ge-lg, .row-chat {
  color: transparent !important; background: url("./selma-s.svg") center / contain no-repeat !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none; user-select: none;
}

.ic { width: 20px; height: 20px; flex: none; display: block; }
.sr, .type-tag { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Опора для невидимых подписей: без неё они вставали по странице, а не по строке, и вытягивали документ вниз на высоту
   списка — под списком дел появлялось пустое место и прокрутка всей страницы (замечание Романа 15.10). */
.tr, .ue-cell, .lg-it, #main .scroll, .card { position: relative; }
.av, .chead .av.lg, .case-head .av.lg { display: none !important; }

/* ── каркас ── */
.shell { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 0 0 0 92px; }
#sidebar {
  position: fixed; left: 14px; top: 14px; bottom: 14px; z-index: 35; width: 64px; overflow: hidden auto; scrollbar-width: none;
  display: flex; flex-direction: column; padding: 12px 10px; border: 1px solid var(--rail-edge); border-radius: 22px;
  background: var(--rail); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25);
  transition: width .26s var(--ease-out), box-shadow .26s var(--ease-out);
}
#sidebar::-webkit-scrollbar { display: none; }
#sidebar:hover, #sidebar:focus-within { width: 236px; box-shadow: var(--shadow-lift); }
#sidebar .rl { opacity: 0; transform: translateX(-4px); white-space: nowrap; transition: opacity .18s ease-out, transform .3s var(--ease); }
#sidebar:hover .rl, #sidebar:focus-within .rl { opacity: 1; transform: none; transition-delay: .06s; }
#sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; }
#sidebar .brand .logo { width: 38px; height: 30px; flex: none; font-size: 15px; font-weight: 650; margin-left: -3px; }
#sidebar .brand .t { color: var(--rail-strong); font-weight: 650; letter-spacing: .14em; font-size: 12px; }
#sidebar .brand .s { color: var(--rail-faint); font-size: 11.5px; max-width: 150px; }
#sidebar .nav { gap: 2px; }
#sidebar .nav button, .side-btn {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 40px; padding: 0 12px;
  border-radius: 10px; color: var(--rail-ink); font-weight: 500; white-space: nowrap; box-shadow: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
#sidebar .nav button:hover, .side-btn:hover { background: var(--rail-hover); color: var(--rail-on); }
#sidebar .nav button.on { background: var(--rail-active); color: var(--rail-on); box-shadow: none; }
#sidebar .nav .badge { margin-left: auto; background: none; color: var(--rail-faint); font-weight: 500; padding: 0; font-size: 12px; }
#sidebar .nav .pip { position: absolute; left: 30px; top: 9px; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); transition: opacity .15s; }
#sidebar:hover .nav .pip, #sidebar:focus-within .nav .pip { opacity: 0; }
.side-ic { position: relative; display: inline-flex; flex: none; }
#sidebar .side-h {
  position: relative; display: flex; align-items: center; gap: 14px; height: 40px; margin: 12px 0 2px; padding: 10px 12px 0;
  border-top: 1px solid var(--line2); color: var(--rail-faint); font-size: 12px; letter-spacing: 0; text-transform: none;
}
#sidebar .side-h .any { position: absolute; left: 14px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--surface); transition: opacity .15s; }
#sidebar:hover .side-h .any, #sidebar:focus-within .side-h .any { opacity: 0; }
#sidebar .chips { flex: 0 1 auto; min-height: 0; gap: 1px; opacity: 0; pointer-events: none; transition: opacity .18s ease-out; }
#sidebar:hover .chips, #sidebar:focus-within .chips { opacity: 1; pointer-events: auto; transition-delay: .08s; }
#sidebar .chip {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  color: var(--rail-ink); font-size: 13px; white-space: nowrap;
}
#sidebar .chip:hover { background: var(--rail-hover); color: var(--rail-on); }
#sidebar .chip.on { background: var(--rail-active); color: var(--rail-on); border: 0; }
#sidebar .chip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sidebar .chip .st { display: none; }
#sidebar .chip .mark { width: 7px; height: 7px; margin: 0 3px 0 6px; flex: none; }
#sidebar .chip .mark.idle { background: transparent; }
/* №9 (Андрей 19.10): ход кончился ответом — зелёная точка. Прозрачная с редизайна dcf8a037, видны были только красные.
   «Новое сообщение Jordis» (RFC-0045) тоже зелёное, но с ободком и жирным именем — так их не спутать. */
#sidebar .chip .mark.ok, .ptab .mark.ok { background: var(--dot); box-shadow: none; }
#sidebar .chip .mark.new { background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 30%, transparent); }
#sidebar .chip .mark.run { border-color: var(--accent); border-top-color: transparent; width: 9px; height: 9px; margin: 0 2px 0 5px; }
#sidebar .chip.sys-new { color: var(--rail-strong); font-weight: 600; }
#sidebar .chips .empty, #sidebar .chips .note { color: var(--rail-faint); font-size: 12px; padding: 4px 12px; }
#sidebar .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.side-btn .ic { width: 20px; height: 20px; }

#main { border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#main .top { height: 64px; padding: 0 32px; gap: 12px; border-bottom: 0; }
#main .top .crumb { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
#main .top .crumb b { color: var(--text); font-weight: 600; }
#main .top .crumb .btn.ghost { font-size: 13px; font-weight: 500; color: var(--muted); }
#main .scroll { padding: 6px 32px 56px; gap: 24px; }
#main .scroll > * { width: 100%; max-width: 1240px; margin-inline: auto; }
.state { color: var(--faint); }
.state .dot { width: 6px; height: 6px; }

/* ── кнопка S-Chat ── */
.general-entry {
  position: relative; min-height: 42px; padding: 6px 17px 6px 10px; gap: 10px; border: 1px solid var(--glass-edge); border-radius: 15px;
  font-size: 13.5px; font-weight: 600; background: var(--glass); color: var(--link);
  box-shadow: 0 2px 3px rgba(73, 116, 145, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: transform .13s var(--ease-out), background .16s ease, box-shadow .2s ease;
}
.general-entry:hover { background: var(--surface); box-shadow: var(--shadow); }
.general-entry:active { transform: scale(.97); }
.general-entry.on { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); }
.general-entry .ge-lg { width: 30px; height: 24px; }
.general-entry.has-new::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--bg1); }
html.dark .general-entry { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(190, 225, 250, .07); }

/* ── кнопки и поля ── */
.btn { border-radius: 9px; border-color: var(--line); background: var(--surface); font-weight: 500; transition: border-color .2s, background .2s; }
.btn:hover { border-color: var(--faint); }
.btn.pri { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface3); color: var(--text); }
.btn.icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.btn.icon .ic { width: 18px; height: 18px; }
.btn.icon.ghost { border-color: transparent; background: none; }
.btn .ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }
.filters select, .filters input, .kb-tools input, .kb-tools select { border-radius: 9px; border-color: var(--line); background: var(--surface); min-height: 34px; }

/* ── карточки: белое в лотке ── */
.card, .table { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card { padding: 18px 20px; }
.card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--text); }
.h2-n { margin-left: auto; color: var(--faint); font-weight: 500; font-size: 13px; }
.card .card, .card .table, .card.conv .table { box-shadow: none; border-radius: 14px; background: var(--surface); border-color: var(--line2); }
.list-card { padding: 0; overflow: hidden; }
.list-card > .table { box-shadow: none; border: 0; border-radius: 0; background: transparent; }
.cards, .cards.home2 { gap: 24px; }
.nodata { font-style: normal; color: var(--faint); }

/* ── стадия и тип: знак, не плашка ── */
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font-weight: 500; font-size: 12.5px; --tone: var(--faint); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--tone); flex: none; }
.tag.blue, .tag.green, .tag.amber, .tag.red, .tag.purple { background: none; color: var(--text); }
.tag.blue { --tone: var(--blue); } .tag.green { --tone: var(--green); } .tag.amber { --tone: var(--amber); } .tag.red { --tone: var(--red); } .tag.purple { --tone: var(--purple); }
.tag.line { border: 0; color: var(--faint); }
.t-client { --tc: var(--t-client); } .t-lead { --tc: var(--t-lead); } .t-partner { --tc: var(--t-partner); }
.t-unknown, .t-unlinked, .t-paused { --tc: var(--t-unknown); }
.tr .who::before, .tmark::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--tc, transparent); }
.tmark { display: flex; align-items: center; gap: 10px; }
.legend { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 12.5px; }
.lg-it { display: inline-flex; align-items: center; gap: 7px; }
.lg-it .tm { width: 4px; height: 14px; border-radius: 2px; background: var(--tc); }
.seg button.lg-it { display: inline-flex; align-items: center; gap: 7px; }
.lg-it .ic { width: 16px; height: 16px; color: var(--text); }
.lg-it.late .ic { color: var(--red); }

/* ── переключатели: подчёркивание ── */
.seg, .filters .seg { gap: 22px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg button, .filters .seg button { padding: 8px 0 9px; border-radius: 0; background: none; color: var(--muted); font-size: 13px; }
.seg button:hover { background: none; color: var(--text); }
.seg button.on, .filters .seg button.on { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.seg button .tnum { color: var(--faint); margin-left: 3px; }
.tabs { border-bottom-color: var(--line2); }
.tabs button.on { border-bottom-color: var(--accent); }

/* ── список дел ── */
.tr { padding: 12px 18px; border-top: 1px solid var(--line2); }
.tr.h { background: none; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--faint); padding: 12px 18px 8px; }
.tr.t-lead, .tr.t-client, .tr.t-paused { background: none; box-shadow: none; }
.tr.t-lead:hover, .tr.t-client:hover, .tr.t-paused:hover, button.tr:hover, .tr[data-row]:hover, .tr[data-partner]:hover { background: var(--surface2); }
.tr .who { gap: 12px; }
.tr .nm { font-weight: 600; }
.tr .meta { color: var(--faint); }
.row-chat { width: 30px; height: 28px; padding: 4px 3px; background-origin: content-box !important; font-size: 12px; }
.row-chat:hover { background-color: var(--accent-soft) !important; border-radius: 8px !important; }
.row-chat[disabled] { opacity: .35; filter: grayscale(1); }
.tr .chev .ch { display: none; }
.sys-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--dot); vertical-align: 1px; }
/* Ревизия 26.10: в деле ждёт подтверждения отправка — полое янтарное кольцо (не точка: «новое» — зелёная, «ошибка» — красная). */
.await { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; border: 1.5px solid var(--amber);
  box-sizing: border-box; vertical-align: 1px; flex: none; }
#sidebar .chip .await { margin: 0 2px 0 4px; }
.foot { border-top-color: var(--line2); color: var(--faint); padding: 12px 18px; }

/* ── первый экран ── */
.cards.home2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.ue-strip { grid-column: 1 / -1; display: flex; padding: 0; }
.ue-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 22px; }
.ue-cell + .ue-cell { border-left: 1px solid var(--line2); }
.ue-cell .k, .ue-cell .v { margin: 0; }
.ue-cell .k { color: var(--muted); font-size: 12.5px; }
.ue-cell .v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ue-cell .v small { margin-left: 5px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--faint); }
.ue-strip.partial .v::after { content: "*"; color: var(--amber); margin-left: 2px; font-size: 16px; }
.card ul.hlist { display: block; margin: 0 -20px; padding: 0; list-style: none; }
.card ul.hlist li.hrow {
  display: grid; grid-template-columns: 104px 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-top: 1px solid var(--line2); font-size: 13.5px;
}
.card ul.hlist li.hrow:first-child { border-top: 0; }
.card ul.hlist li.hrow:hover { background: var(--surface2); }
.card ul.hlist li.wrow { grid-template-columns: minmax(0, 1fr) auto; }
/* RFC-0049 F1-T: «Waiting on others» — чужой мяч под задачами дня, в той же сетке: пустой срок, галочка, дело, справа «Waiting for … · n working days». */
.card .hsub { margin: 14px 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hrow .wo { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.hrow .d { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .d.soon { color: var(--amber); font-weight: 500; }
.hrow .d.over { color: var(--red); font-weight: 500; }
.hrow .hi, .hrow .task-dot { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.hrow .task-dot::before { content: none; }
.hrow .ic { width: 18px; height: 18px; }
.card li .home-link { padding: 0; min-width: 0; }
.home-col li .t, .card li .home-link .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.home-link .nm { font-weight: 600; color: var(--text); }
.card li .home-link:hover .t { color: inherit; text-decoration: none; }
.card li .home-link:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.home-zoom { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--faint); }
.home-zoom:hover { background: var(--surface3); color: var(--text); }
.home-zoom .ic { width: 16px; height: 16px; }
.task-check { width: 18px; height: 18px; border-radius: 5px; border: 1px solid #96aebd; background: rgba(255, 255, 255, .35); justify-self: center; }
html.dark .task-check { border-color: #6f8a9e; background: rgba(255, 255, 255, .04); }
.task-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.task-check:hover::after { border-color: var(--accent); left: 5px; top: 1.5px; }
.more-link { margin-top: 12px; color: var(--muted); font-size: 12.5px; }
.more-link:hover { color: var(--text); }

/* ── Inbox ── */
.inbox-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tr.inbox-row { grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) 14px 110px; align-items: center; padding: 13px 20px; }
.tr.inbox-row .prev { -webkit-line-clamp: 1; color: var(--muted); }
.tr.inbox-row .meta { display: block; font-size: 12px; }
.tr.inbox-row.reply .nm { font-weight: 700; }
.tr.inbox-row .when { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--faint); font-size: 12px; }
.tr.inbox-row .when .d { color: inherit; }
.ch-ic .ic { width: 16px; height: 16px; }
.wait-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@container (max-width: 620px) {
  .tr.inbox-row { grid-template-columns: 1fr auto; grid-template-areas: "who when" "prev wait"; }
  .tr.inbox-row .wait { grid-area: wait; justify-self: end; }
}

/* ── календарь ── */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cal-card { padding: 0; overflow: hidden; }
.cal-card > .nodata { padding: 0 20px 10px; }
.cal-head { margin: 0; padding: 10px 14px 10px 20px; gap: 4px; flex-wrap: wrap; row-gap: 6px; }
.cal-head .cal-legend { padding: 0 0 0 18px; border: 0; font-size: 12px; gap: 4px 14px; }
.cal-title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.cal-grid { gap: 0; border-top: 1px solid var(--line2); }
.cal-dow { padding: 6px 10px; text-align: left; text-transform: none; letter-spacing: .02em; font-size: 11.5px; color: var(--faint); }
.cal-day {
  /* Высота клетки — от высоты окна: месяц целиком на одном экране (замечание Романа 15.10). */
  min-height: clamp(52px, calc((100vh - 230px) / 6), 86px); padding: 8px 10px; border: 0; border-radius: 0; border-top: 1px solid var(--line2); border-left: 1px solid var(--line2);
  background: none; justify-content: space-between; transition: background .2s var(--ease);
}
.cal-day:nth-child(7n+1) { border-left: 0; }
.cal-day:hover { background: var(--surface2); border-color: var(--line2); }
.cal-day.out { opacity: 1; }
.cal-day.out .n { color: var(--faint); }
.cal-day.today { border-color: var(--line2); box-shadow: none; }
.cal-day.today .n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -3px 0 0 -5px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-day.on { background: var(--accent-soft); }
.cal-day .n { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-day .dots { gap: 8px; }
.cal-day .ci { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.cal-day .ci .ic { width: 16px; height: 16px; }
.cal-day .ci small { font-size: 11px; color: var(--muted); }
.cal-day .ci.late { color: var(--red); }
.cal-legend { display: flex; padding: 12px 20px; border-top: 1px solid var(--line2); }
.card ul.day-list { display: block; margin: 0 -20px; padding: 0; list-style: none; }
.card ul.day-list li.ce {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 20px; border-top: 1px solid var(--line2); font-size: 13.5px;
}
.card ul.day-list li.ce:first-child { border-top: 0; }
.card ul.day-list li.ce .t { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.ce .t .nm { font-weight: 600; }
.ce .d { color: var(--muted); font-size: 12.5px; }
.ce-ic { display: grid; place-items: center; color: var(--muted); }
.ce-ic .ic { width: 18px; height: 18px; }
.ce-go { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--faint); font-size: 16px; }
.ce-go:hover { background: var(--surface3); color: var(--text); }
.ce-go .ic { width: 16px; height: 16px; }
li.ce.evt { opacity: .62; }
li.ce.cancelled .t { text-decoration: line-through; }
.day-card h2 { margin-bottom: 8px; }

/* ── партнёры ── */
.partners-table .tr { grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(96px, 1fr)); align-items: center; }
.partners-table .num { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; }
.partners-table .tr:not(.h) .num { font-size: 14px; font-weight: 500; }
.partners-table .zero { color: var(--faint); font-weight: 400; }

/* ── прочее без овалов ── */
.kb-st, .kb-st.ok, .kb-st.warn, .kb-st.err, .kb-st.muted { border-radius: 0; background: none; padding: 0; font-weight: 500; }
.kb-ref, .case-cards .case-card { border-radius: 7px; }
.sys-strip .sys-what, .sys-chip { border-radius: 6px; }
.thread .day { border-radius: 6px; }
.to-new { border-radius: 10px; }
.kb-foot { display: flex; justify-content: flex-end; }
.chip.on { border-color: transparent; }
.panel-inner { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
.panel-head { border-bottom-color: var(--line2); }
.bub.ai { border-color: var(--line2); }
.signin-card { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); border-radius: 22px;
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
.signin-card .lg { width: 58px; height: 45px; }
.signin { background: transparent; }

/* ── подписи полей: обычный регистр, без разрядки (прописные «кикеры» — шум) ── */
.fact > .k, .case-cards .k, .id-block .k, .id-pair .k, .sec, .dz-h, .prog-h, .ms-h, .bub .sep, .bub .ready-h, .sys-today .k, .home-sub, .cal-dow, .side-h {
  text-transform: none; letter-spacing: 0;
}
.fact > .k, .case-cards .k, .id-block .k, .id-pair .k, .sec, .dz-h, .prog-h, .ms-h { font-size: 12px; font-weight: 500; color: var(--faint); }

/* ── узкий экран: колонка меню становится строкой сверху ── */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0; }
  #sidebar, #sidebar:hover, #sidebar:focus-within { position: static; width: auto; box-shadow: var(--shadow); overflow: visible; }
  #sidebar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; margin: 8px 8px 0; border-radius: 18px; }
  #sidebar .brand { padding: 0; }
  #sidebar .side-foot { margin: 0; padding: 0; }
  #sidebar .nav button { width: auto; flex: none; }
  #sidebar .rl { opacity: 1; transform: none; }
  #sidebar .brand .rl .s { display: none; }
  #sidebar .side-h { display: none; }
  #sidebar .chips { opacity: 1; pointer-events: auto; }
  #sidebar .nav .pip { display: none; }
  #sidebar .side-foot { flex-direction: row; }
  #sidebar .side-foot .side-btn { width: auto; height: 36px; padding: 0 10px; gap: 8px; }
  #sidebar .nav button { height: 38px; gap: 8px; padding: 0 12px; }
  #main .top { padding: 0 14px; height: auto; min-height: 56px; }
  #main .scroll { padding: 6px 14px 40px; }
  .cards.home2, .cal-wrap { grid-template-columns: 1fr; }
  .partners-table .tr { grid-template-columns: minmax(130px, 1.4fr) repeat(4, minmax(48px, .6fr)); padding: 10px 12px; font-size: 13px; }
  .partners-table .tr.h { display: grid; font-size: 10.5px; line-height: 1.25; align-items: end; }
  .card ul.hlist li.hrow:not(.wrow) { grid-template-columns: 76px 22px minmax(0, 1fr) auto; }
  .card ul.hlist li.hrow .d { white-space: normal; line-height: 1.25; }
  .card ul.hlist.waiting-on li.hrow { padding-top: 6px; padding-bottom: 6px; }
  .card ul.hlist.waiting-on li.hrow .wo { grid-column: 3 / -1; white-space: normal; }
}
/* Мобильное меню (Роман 19.10): строка с «тремя полосками», затемнение и крестик меню есть только на телефоне (≤ 768 px) —
   раскладка в конце файла; здесь — скрытие для всех остальных ширин. Кнопка S-Chat в рабочей области на телефоне уходит в строку сверху. */
.mbar, .nav-scrim, #sidebar .nav-close { display: none; }
@media (max-width: 768px) { #main .top .general-entry { display: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .cal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .cal-day { min-height: 56px; padding: 6px; } .cal-day .dots { gap: 3px; } .cal-day .ci .ic { width: 13px; height: 13px; } }
@media (prefers-reduced-motion: reduce) {
  #sidebar, #sidebar .rl, #sidebar .chips, .general-entry, .cal-day, .tr, .btn { transition: none !important; }
  .general-entry:active { transform: none; }
}

/* ── Air: фокус, окна, чат, запасные пути ── */
/* Роман 16.10: в панели на компьютере имя и знак чата — только в шапке панели; в шапке самого чата дубля нет. */
body.in-shell-head .chat .head .lg, body.in-shell-head .chat .head #title { display: none; }
body.in-shell-head .chat .head .s { font-size: 12px; }
/* Имя дела в шапке чата — ссылка на карточку (Роман 15.10); у общего помощника — просто заголовок. */
.title-link { display: block; max-width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-link:not([disabled]) { cursor: pointer; }
.title-link:not([disabled]):hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.title-link[disabled] { cursor: default; opacity: 1; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.tr[data-row]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.chooser-card, .task-dialog-in, .model-sheet .ms-in {
  background: var(--glass-solid); color: var(--text); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--shadow-lift);
}
.chooser, .task-dialog, .model-sheet { background: rgba(25, 48, 67, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.dark .chooser, html.dark .task-dialog, html.dark .model-sheet { background: rgba(0, 0, 0, .45); }
.chat .head, .comp, .searchbar { background: var(--glass); border-color: var(--line2); }
.bub.ai { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: 0 1px 2px rgba(43, 79, 108, .06); }
html.dark .bub.ai { box-shadow: none; }
.bub.me { background: var(--accent); color: var(--on-accent); }
.bubble { background: var(--surface2); border-color: var(--line2); }
.bubble-row.out .bubble { background: var(--accent-soft); }
.comp textarea, .composer textarea, .signin-card input { background: var(--surface); border-color: var(--line); }
.version-bar { background: var(--accent); color: var(--on-accent); }
.version-bar .btn { background: var(--surface); color: var(--accent); }
.skeleton { background: var(--surface3); }
.signin-error, .banner.err { background: var(--red-soft); color: var(--red); }
.signin-hint, .banner { background: var(--amber-soft); color: var(--amber); }
/* Без поддержки размытия и при «меньше прозрачности» — плотные поверхности того же тона. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #sidebar, .panel-inner, .general-entry, .signin-card { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .table, #sidebar, .panel-inner, .general-entry, .signin-card, .bub.ai, .chat .head, .comp { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═════════════════ RFC-0046 · правки 15.10 (пакет dashboard-fixes-2026-10-15, D1–D4) ═════════════════ */

/* D3 → ADR-0019 (Роман 15.10): наверху меню — логотип «кристалл S» (selma-s.svg) вместо надписи «Jordis»; один файл на обе
   темы — его градиент читается и на светлом, и на тёмном стекле. 42 px — помещается в узкое меню без обрезки. */
#sidebar .brand { gap: 10px; margin: 0 -5px; padding: 6px 0 18px; }
#sidebar .brand .brand-mark { display: block; flex: none; width: 42px; height: 32px; background: url("./selma-s.svg") center / contain no-repeat; }
#sidebar .brand .rl { min-width: 0; }
/* Имя продукта JORDIS (Роман 15.10, ADR-0019) — рядом с кристаллом в раскрытом меню и на входе: широкая жирная надпись. */
#sidebar .brand .t { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--rail-strong); line-height: 1.1; }
.signin-card h1 { font-weight: 800; letter-spacing: .16em; }
@media (max-width: 900px) {
  #sidebar .brand { margin: 0; padding: 0 4px; align-items: center; }
  #sidebar .brand .brand-mark { width: 46px; height: 35px; }
}

/* D1. Отправка в разговоре: файлы получателю и документы дела — иконками (размер иконок меню), ряд справа у «Send». */
.composer .send-row { align-items: center; gap: 4px; flex-wrap: nowrap; }
.composer .send-row .grow { flex: 1 1 auto; min-width: 0; }   /* «Send» — у правого края, иконки рядом слева от него */
.composer .send-row .note { margin: 0 6px 0 0; }
.composer .send-ic { width: 36px; height: 36px; color: var(--muted); }
.composer .send-ic .ic { width: 20px; height: 20px; }
.composer .send-ic:hover, .composer .send-ic.on { color: var(--link); background: var(--surface3); }
.composer .send-row [data-manual-send] { margin-left: 4px; }

/* D2. Первый экран: «Today» и «Waiting for reply» сворачиваются — заголовок-кнопка с числом и стрелкой. */
.home-col.fold { padding-top: 0; padding-bottom: 0; }
.home-col.fold .fold-h { margin: 0; }
.fold-btn {
  display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 15px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.fold-btn .fold-n { color: var(--muted); font-weight: 500; }
.fold-btn .fold-caret { margin-left: auto; align-self: center; color: var(--muted); transition: transform .2s var(--ease-out); }
.fold-btn .fold-caret .ic { width: 16px; height: 16px; }
.fold-btn:hover .fold-caret, .fold-btn:hover .fold-n { color: var(--text); }
.home-col.fold.open .fold-caret { transform: rotate(180deg); }
.home-col.fold .fold-b { padding-bottom: 16px; }
.home-col.fold .fold-b[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fold-btn .fold-caret { transition: none; } }

/* D4. «Where you stopped»: строка шага дела (`nextStep` · срок), ниже — ближайшая задача отдельной строкой. */
.card .step-line { display: flex; align-items: baseline; gap: 10px; }
.card .step-line .t { font-weight: 600; color: var(--text); min-width: 0; }
.card .step-line .d, .card .next-task .d { margin-left: auto; white-space: nowrap; font-size: 12.5px; }
.card .next-task { align-items: center; gap: 8px; }
.card .next-task .k { flex: none; }
.card .next-task .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-body .card .row .d.over { color: var(--red); font-weight: 600; }
.case-body .card .row .d.soon { color: var(--amber); font-weight: 600; }

/* D5 (RFC-0048). Модель и тип выбирает панель; ручная настройка — только у админа: тихая кнопка «Auto» без рамки. */
.model-btn.quiet { border-color: transparent; background: none; color: var(--faint); font-weight: 500; }
.model-btn.quiet:hover { color: var(--text); background: var(--surface3); }
.model-btn.quiet.on { color: var(--text); border-color: var(--line); }

/* D6 (RFC-0047). «Exclude number» — тихая кнопка в шапке разговора; у карточки лида — красная корзина (Роман 04.11, вместо «⋯»). */
.excl-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.excl-btn .ic { width: 16px; height: 16px; }
.excl-btn:hover { color: var(--red); }
/* Корзина — рядом с «Chat with JORDIS», той же высоты и такая же сплошная, только красная: видна в обеих темах (Роман 04.11: «не вижу»). */
.btn.sm.excl-del { flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px; min-width: 34px; color: var(--surface); background: var(--red); border-color: transparent; }
.excl-del .ic { width: 16px; height: 16px; }
.btn.sm.excl-del:hover:not([disabled]) { filter: brightness(1.12); }
.excl-del:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn.sm.excl-del[disabled] { opacity: .45; cursor: default; }
.excl-toast-host { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%); max-width: calc(100vw - 32px); }
.excl-toast {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px;
  background: var(--glass-solid); color: var(--text); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); font-size: 13.5px;
}
.excl-toast.error { color: var(--red); }
.excl-toast .t { min-width: 0; }
.excl-list { list-style: none; margin: 8px 0 0; padding: 0; }
.excl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line2); }
.excl-row .n { font-weight: 600; }
.excl-row .m { color: var(--muted); font-size: 12.5px; min-width: 0; }
.settings-card .note { margin: 0 0 6px; }
@media (max-width: 620px) { .excl-row { grid-template-columns: 1fr auto; } .excl-row .m { grid-column: 1 / -1; grid-row: 2; } }

/* D9. Окно «Exclude this number?» — то же окно, что у закрытия задачи; номер — крупно, текст Романа — под ним. */
.excl-dialog-n { margin: 6px 0 2px; font-weight: 650; font-size: 15px; }
.excl-dialog-t { margin: 6px 0 14px; color: var(--muted); line-height: 1.45; max-width: 420px; }
.excl-dialog-who { margin-top: 4px; color: var(--muted); }
.excl-pick { display: grid; gap: 4px; margin: 8px 0 2px; }
.excl-pick-r { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.excl-pick-r .muted { font-weight: 400; font-size: 12.5px; }
.btn.danger { background: var(--red-soft); color: var(--red); border-color: var(--red); font-weight: 650; }
.btn.danger:hover { background: var(--red); color: var(--surface, #fff); }

/* D7. Канал Communications — иконки, как в строках списка; D8. Поиск над списком. */
.ch-seg { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line2); border-radius: 0; }
.ch-seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
.ch-seg button .ic { width: 17px; height: 17px; }
.inbox-search {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 0 6px 0 12px; height: 40px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted);
}
.inbox-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.inbox-search .ic { width: 17px; height: 17px; flex: none; }
.inbox-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; }
.inbox-search input::-webkit-search-cancel-button { display: none; }
.inbox-count { white-space: nowrap; }
.inbox-row .prev .muted { color: var(--faint); }
@media (max-width: 620px) { .ch-seg { margin-left: 0; } }

/* ───────── RFC-0070: утренний брифинг — кнопка «Briefing · <дата>» справа вверху и экран (briefing-ui.js) ───────── */
.briefing-slot:empty { display: none; }
.briefing-btn {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: border-color .2s, background .2s;
}
.briefing-btn:hover { border-color: var(--faint); }
.briefing-btn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.briefing-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Зелёная точка — тот же знак «новое», что у S-Chat; после открытия точки нет (Роман 03.11). */
.briefing-btn.has-new::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--bg1); }

.brief { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.brief-card h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.brief-card h4 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.brief-card h4:first-of-type { margin-top: 0; }
.brief-n { font-size: 12px; font-weight: 500; color: var(--faint); }
.brief-head .note { margin: 0 0 10px; }
/* Сводка — навигация по разделам, закреплена сверху при прокрутке; справа крестик (Роман 03.11). */
.brief-nav {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  margin: -4px 0 0; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .35);
}
.brief-counts { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.brief-counts b { color: var(--text); font-weight: 600; }
.brief-count { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 13px; }
button.brief-count { cursor: pointer; border-color: var(--line); background: var(--surface2); }
button.brief-count:hover { border-color: var(--accent); color: var(--text); }
button.brief-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-close { flex: none; align-self: flex-start; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.brief-close:hover { border-color: var(--faint); }
.brief-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-close .ic { width: 18px; height: 18px; }
.brief > section[id] { scroll-margin-top: 76px; }
@media (max-width: 900px) {
  /* Телефон: прокручивается сама страница, а #main и .scroll режут overflow и становятся рамкой прокрутки — липкая сводка
     без этого уезжала вверх вместе с экраном (проверка 03.11 на 390). `clip` режет по горизонтали, рамкой не становясь. */
  #main:has(.brief-nav), #main .scroll:has(.brief-nav) { overflow: clip visible; }
}
@media (max-width: 768px) {
  /* Под липкой строкой меню телефона (.mbar: 56 px + вырез экрана), а не под ней; части сводки — одной строкой с прокруткой вбок. */
  .brief-nav { top: calc(var(--demo-h, 0px) + 57px + env(safe-area-inset-top, 0px)); border-radius: 12px; padding: 6px 6px 6px 8px; }
  .brief-counts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .brief-counts::-webkit-scrollbar { display: none; }
  .brief-count { flex: none; white-space: nowrap; }
  .brief-close { align-self: center; }
  .brief > section[id] { scroll-margin-top: calc(var(--demo-h, 0px) + 120px + env(safe-area-inset-top, 0px)); }
}
.brief-gaps { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.brief-gaps ul { margin: 4px 0 0; padding-left: 18px; }
.brief-list { list-style: none; margin: 0; padding: 0; }
.brief-list li { display: block; padding: 8px 0; border-top: 1px solid var(--line2); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.brief-list li:first-child { border-top: 0; padding-top: 2px; }
.brief-list li.closed { color: var(--muted); }
.brief-list li.closed .brief-case b { font-weight: 500; }
.brief-list .brief-more { color: var(--faint); font-size: 12.5px; }
.brief-sep { color: var(--faint); }
.brief-case { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.brief-case { cursor: pointer; }
button.brief-case:hover b { color: var(--link); text-decoration: underline; }
.brief-num { color: var(--faint); font-size: 12px; }
.brief-txt { margin-top: 3px; }
.brief-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.brief-chg, .brief-st { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.brief-chg.new { background: var(--green-soft); color: var(--green); }
.brief-chg.hanging { background: var(--amber-soft); color: var(--amber); }
.brief-chg.closed { background: var(--gray-soft); color: var(--muted); }
.brief-st { font-weight: 500; background: var(--gray-soft); color: var(--muted); }
.brief-st.open { background: var(--blue-soft); color: var(--blue); }
.brief-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.brief-draft { padding: 10px 0; border-top: 1px solid var(--line2); }
.brief-draft:first-of-type { border-top: 0; }
.brief-draft .brief-meta { margin: 0 0 4px; }
@media (max-width: 620px) {
  .briefing-btn { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
}

/* D10. Экран «Clients»: переключатель стадий с числом; строка — имя и стадия, договор (UE, период), встреча, шаг, ALG · партнёр · телефон.
   Замечание Романа 16.10 («заезжает текст»): колонки не перекрываются при любой ширине — у каждой ячейки min-width 0 и перенос,
   имя с номером — до двух строк (полное — в подсказке), ALG, партнёр и телефон — столбиком целиком (телефон не рвётся). Раскладка — по ширине самой
   таблицы (container query), а не окна: рядом открытая панель чата сужает таблицу, а не окно. */
.clients-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clients-seg .c { color: var(--faint); font-weight: 500; margin-left: 2px; }
.clients-seg button.on .c { color: inherit; opacity: .8; }
/* Поиск по клиентам (Роман 19.10) — та же строка, что в Communications, справа от переключателя; на узком — во всю ширину. */
.clients-search { flex: 1 1 260px; max-width: 420px; margin: 0 0 0 auto; }
/* «Recent» (Роман 27.10, до 28.10 — «Zuletzt»): порядок по последнему общению — сегмент из одной кнопки.
   Роман 28.10: на Home и Clients первый ряд — только вкладки (число у «All» не перекрывается), второй — Recent, фильтры и поиск от левого края. */
.list-tabs { flex: 1 1 100%; min-width: 0; }
.list-tools { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.list-tools .clients-search { margin: 0; }
/* Телефон: вкладки переносятся, а не уезжают за край — «All» с числом видно без прокрутки; фильтры и поиск — по ширине ряда. */
@media (max-width: 620px) {
  .list-tabs .seg { flex-wrap: wrap; overflow: visible; row-gap: 0; column-gap: 18px; }
  .list-tools select, .list-tools input { flex: 1 1 140px; max-width: none; }
  .list-tools #q { flex-basis: 100%; }
}
.recent-seg button .spin { width: 10px; height: 10px; margin: 0 6px 0 0; vertical-align: -1px; }
.recent-seg button.warn { color: var(--amber); }
.recent-seg button.on.warn { background: var(--amber); color: var(--on-accent); }
@media (max-width: 620px) { .clients-search { max-width: none; margin: 0; flex-basis: 100%; } }
.clients-table { container-type: inline-size; container-name: clients; }
.clients-table .tr { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.4fr) minmax(0, 1.3fr);
  grid-template-areas: "who contract meet step facts"; gap: 6px 18px; align-items: start; padding: 12px 18px; }
.clients-table .tr > * { min-width: 0; overflow-wrap: anywhere; }
.clients-table .tr.h { font-size: 12px; color: var(--faint); font-weight: 500; padding-top: 10px; padding-bottom: 8px; }
.client-row .who { grid-area: who; align-items: flex-start; }
.client-row .who::before { margin-top: 1px; }
.client-row .cl-contract { grid-area: contract; }
.client-row .cl-meet { grid-area: meet; }
.client-row .cl-step { grid-area: step; }
.client-row .cl-facts { grid-area: facts; }
.client-row .who-in { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-width: 0; }
.client-row .nm-link { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; min-width: 0; }
.client-row .nm-link:hover .nm { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.client-row .nm { font-weight: 600; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.client-row .meta { color: var(--muted); font-size: 12px; white-space: normal; }
.cl-contract { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.cl-meet { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.35; }
.cl-meet .ic { width: 16px; height: 16px; color: var(--muted); flex: none; margin-top: 1px; }
.cl-step { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.cl-step .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-step .d { font-size: 12px; color: var(--muted); }
.cl-step .d.over { color: var(--red); font-weight: 600; }
.cl-step .d.soon { color: var(--amber); font-weight: 600; }
.cl-facts { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cl-facts .f { white-space: normal; }
.cl-facts .f.ph { white-space: nowrap; }
/* Узкая таблица (чат открыт, небольшое окно): две строки ячеек, ничего не прячется. */
@container clients (max-width: 860px) {
  .clients-table .tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "who contract step" "who meet facts"; }
  .clients-table .tr.h { display: none; }
}
@container clients (max-width: 540px) {
  .clients-table .tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "contract" "meet" "step" "facts"; gap: 4px; }
}

/* Меню (замечания Романа 16.10, тёмная тема): «Jordis chats» — своя прокручиваемая область между заголовком и нижним блоком; нижний
   блок (Settings, тема, Sign out) закреплён внизу и не перекрывается ни при каком числе чатов и высоте окна; отступы в нём плотнее.
   У строки чата — × «Remove from list» (виден при наведении и с клавиатуры; на сенсорном экране — всегда). */
@media (min-width: 901px) {
  #sidebar { overflow: hidden; }
  #sidebar .brand, #sidebar .nav, #sidebar .side-h, #sidebar .side-foot { flex: none; }
  #sidebar .chips { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; margin-right: -4px; padding-right: 4px; }
  #sidebar .side-foot { margin-top: 0; gap: 0; padding-top: 6px; border-top: 1px solid var(--line2); }
  #sidebar .side-foot .side-btn { height: 34px; }
}
#sidebar .chip-row { position: relative; display: flex; align-items: center; flex: none; min-width: 0; }
#sidebar .chip-row .chip { flex: 1; min-width: 0; padding-right: 30px; }
#sidebar .chip-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 7px; background: none; color: var(--rail-faint); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
#sidebar .chip-x .ic { width: 14px; height: 14px; }
#sidebar .chip-row:hover .chip-x, #sidebar .chip-x:focus-visible { opacity: 1; }
#sidebar .chip-x:hover { background: var(--rail-hover); color: var(--rail-on); }
@media (hover: none) { #sidebar .chip-x { opacity: 1; } }
@media (max-width: 900px) { #sidebar .chip-row { flex: none; } #sidebar .chip-row .chip { max-width: 70vw; } }

/* ───────── RFC-0049 F1-D: верх карточки дела — шапка, три дорожки, светофор, «Now», «Deadlines» (fallakte-ui.js) ───────── */
.fk-top { display: flex; flex-direction: column; gap: 12px; }
.fk-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--text); }
.fk-meta > i { color: var(--faint); font-style: normal; }
.fk-meta .k { color: var(--muted); }
.fk-meta .fk-check { color: var(--amber); font-size: 12px; }
.fk-unknown { font-size: 12px; color: var(--muted); margin-top: -6px; }
.fk-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.fk-chip { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; min-width: 0; background: var(--surface2); }
.fk-chip.gap { border-color: var(--amber); }
.fk-chip.end { opacity: .75; }
.fk-chip-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fk-chip-s { margin-top: 3px; font-weight: 600; font-size: 13.5px; }
.fk-chip-g { margin-top: 3px; font-size: 12px; color: var(--amber); }
.fk-trk { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 650; color: var(--muted); margin-right: 6px; }
.fk-ampel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
.fk-ampel.red { background: var(--red-soft); color: var(--red); }
.fk-ampel.yellow { background: var(--amber-soft); color: var(--amber); }
.fk-ampel.green { background: var(--green-soft); color: var(--green); }
.fk-ampel .fk-light { width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-top: 4px; flex: none; }
.fk-ampel > b, .fk-ampel > .fk-more { line-height: 18px; }
.fk-ampel li { line-height: 18px; }
.fk-ampel li.no-trk { padding-left: 24px; }
.fk-ampel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; color: var(--text); }
.fk-ampel li { display: block; font-size: 13px; }
.fk-more { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fk-now-row, .fk-wait { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; }
.fk-sub { display: flex; align-items: center; gap: 8px; justify-self: end; }
.fk-sub .fk-trk { margin-right: 0; }
.fk-now-row .t { font-weight: 600; font-size: 14px; }
.fk-now-row .d { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.fk-wait { border-top: 1px solid var(--line2); margin-top: 6px; padding-top: 6px; font-size: 13px; }
.fk-wait .t b { font-weight: 550; }
.fk-prop { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.fk-prop .k { font-weight: 600; margin-right: 4px; }
.card .fk-dl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.card .fk-dl li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line2); font-size: 13px; }
.card .fk-dl li:first-child { border-top: 0; }
.fk-dl .fk-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .fk-dl li .t { white-space: normal; overflow: visible; }
.fk-dl .fk-basis { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.fk-dl .fk-left { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.fk-dl li.red .fk-left { color: var(--red); font-weight: 600; }
.fk-dl li.yellow .fk-left { color: var(--amber); font-weight: 600; }
.fk-dl li.unknown .t { color: var(--muted); font-style: italic; }
.fk-proof { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; line-height: 17px;
  color: var(--muted); white-space: nowrap; vertical-align: 1px; }
/* RFC-0049 этап 2: зоны карточки, конфликты, слоты документов, «Case rules». */
.fk-viol { list-style: none; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--amber-soft); color: var(--text);
  display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fk-viol li { display: block; }
.fk-zone h3 { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fk-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 13px; align-items: baseline; }
.fk-row .k { color: var(--muted); }
.fk-row .v { min-width: 0; overflow-wrap: anywhere; }
.fk-ok { color: var(--green); font-size: 12px; }
.fk-warn { color: var(--amber); font-size: 12px; }
.fk-ue { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 0 4px; font-size: 13px; color: var(--muted); }
.fk-ue b { color: var(--text); font-size: 15px; font-weight: 650; }
.fk-ue-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; margin: 2px 0 8px; }
.fk-ue-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.fk-ue-bar i.delivered { background: var(--accent-soft); }
.fk-ue-bar i.documented { background: var(--accent); opacity: .55; }
.fk-ue-bar i.invoiced { background: var(--accent); }
.card .fk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.card .fk-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0;
  border-top: 1px solid var(--line2); font-size: 13px; }
.card .fk-list li:first-child { border-top: 0; }
.card .fk-list li .t { white-space: normal; overflow: visible; }
.fk-list li.yellow .fk-st { color: var(--amber); font-weight: 600; }
.fk-list li.red .fk-st { color: var(--red); font-weight: 600; }
.fk-list li.req .fk-st { color: var(--accent2); }
.fk-st { color: var(--muted); white-space: nowrap; }
.fk-authority.collapsed h2 { margin: 0; }
.fk-authority.collapsed h2 .muted { font-weight: 400; font-size: 12.5px; margin-left: 8px; }
.fk-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: 12.5px; }
.fk-slot.busy { opacity: .7; }
.fk-slot-n { font-weight: 600; }
.fk-sug { color: var(--accent2); }
.fk-slot-pick { font-size: 12px; max-width: 220px; }
.fk-err { flex-basis: 100%; color: var(--red); font-size: 12px; }
.fk-accept-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 8px; font-size: 12.5px; }
.fk-missing .fk-sub .btn { margin-left: 8px; }
.fk-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.fk-toggle input { margin-top: 3px; }
.fk-undo { margin-top: 8px; font-size: 13px; }
@media (max-width: 900px) {
  .fk-now-row, .fk-wait { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .card .fk-dl li { grid-template-columns: 56px minmax(0, 1fr); row-gap: 3px; }
  .fk-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card .fk-list li { grid-template-columns: minmax(0, 1fr); }
  .card .fk-list li > .fk-sub { justify-self: start; flex-wrap: wrap; }
  .fk-now-row > .fk-sub, .fk-wait > .fk-sub, .card .fk-dl li > .fk-sub { grid-column: 2; justify-self: start; }
}

/* ═════════════════ Мобильное меню (Роман 19.10, ≤ 768 px) ═════════════════
   Сверху — только логотип, «три полоски» и S-Chat. Разделы, Settings, тема, выход и «Jordis chats» с точками — в левом выдвижном
   меню: это тот же #sidebar, вторая копия навигации не заводится (DNA-10). Закрывается нажатием вне меню, крестиком, Esc и выбором
   пункта (screen.js). Вырезы экрана iPhone — env(safe-area-inset-*); страница под открытым меню не прокручивается. `--demo-h` — только в
   демо: высота плашки DEMO, чтобы она не закрывала верх меню; на рабочем сайте её нет (0).
   Компьютер (> 900 px) и планшетная строка 769–900 px не меняются. */
@media (max-width: 768px) {
  /* `overflow: hidden` оболочки делал её контейнером прокрутки, и строка сверху «прилипала» к ней, а не к странице (на телефоне
     прокручивается документ). `clip` режет так же, но контейнером прокрутки не становится. */
  .shell { overflow: visible; overflow: clip; }
  .mbar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: var(--demo-h, 0px); z-index: 30; min-height: 56px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 12px) 6px calc(env(safe-area-inset-left, 0px) + 6px);
    background: var(--glass-solid); border-bottom: 1px solid var(--line2);
  }
  .mbar .grow { flex: 1; }
  .mbar .brand-mark { flex: none; width: 38px; height: 29px; background: url("./selma-s.svg") center / contain no-repeat; }
  .mbar-t { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--rail-strong); }
  .mbar-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 12px; background: none; color: var(--rail-strong); -webkit-tap-highlight-color: transparent;
  }
  .mbar-btn:active { background: var(--rail-hover); }
  .mbar-btn { position: relative; }
  .mbar-btn.has-new::after { content: ""; position: absolute; top: 9px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--glass-solid); }
  .burger { display: grid; gap: 4px; width: 20px; }
  .burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .mbar .mbar-chat { min-height: 40px; padding: 4px 14px 4px 8px; }

  #sidebar, #sidebar:hover, #sidebar:focus-within {
    position: fixed; top: var(--demo-h, 0px); bottom: 0; left: 0; z-index: 60; width: min(86vw, 320px); margin: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; overflow: hidden auto; overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 12px);
    border: 0; border-right: 1px solid var(--line2); border-radius: 0 22px 22px 0; background: var(--glass-solid); box-shadow: var(--shadow-lift);
    transform: translateX(-104%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  body.nav-open #sidebar { transform: none; visibility: visible; transition: transform .3s var(--ease-out), visibility 0s; }
  #sidebar:focus { outline: 0; }
  #sidebar .brand { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 12px 4px; flex: none; }
  #sidebar .brand .rl .s { display: block; }
  #sidebar .nav-close {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: auto;
    border: 0; border-radius: 12px; background: none; color: var(--rail-ink); font-size: 26px; line-height: 1;
  }
  #sidebar .nav { display: flex; flex-direction: column; flex-wrap: nowrap; flex: none; gap: 2px; overflow: visible; grid-column: auto; }
  #sidebar .nav button { width: 100%; height: 46px; flex: none; gap: 14px; padding: 0 12px; }
  #sidebar .side-h { display: flex; flex: none; margin: 12px 0 2px; }
  #sidebar .side-h .any { opacity: 0; }
  #sidebar .chips { display: flex; flex-direction: column; flex: none; gap: 2px; overflow: visible; grid-column: auto; opacity: 1; pointer-events: auto; }
  #sidebar .chips > .empty { display: block; }
  #sidebar .chip-row, #sidebar .chips .chip, #sidebar .chips .note { flex: none; width: 100%; max-width: none; }
  #sidebar .chip-row .chip { height: 44px; max-width: none; }
  #sidebar .side-foot { flex: none; flex-direction: column; gap: 0; margin: auto 0 0; padding: 10px 0 0; border-top: 1px solid var(--line2); grid-column: auto; grid-row: auto; }
  #sidebar .side-foot .side-btn { width: 100%; height: 44px; gap: 14px; padding: 0 12px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(25, 48, 67, .28);
    opacity: 0; pointer-events: none; transition: opacity .25s ease-out; -webkit-tap-highlight-color: transparent;
  }
  html.dark .nav-scrim { background: rgba(0, 0, 0, .5); }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html:has(body.nav-open), body.nav-open { overflow: hidden; }
  #main .top { min-height: 48px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { #sidebar, .nav-scrim { transition: none !important; } }

/* 21.10 (Андрей, телефон): «Opening…» и фраза отказа над экраном — на виду, а не за панелью чата; «‹ Chat» возвращает в чат,
   свёрнутый переходом из него в экран. */
.screen-note {
  display: flex; align-items: center; gap: 10px; margin: 0 32px 6px; padding: 8px 12px; border-radius: 12px;
  background: var(--accent-soft); color: var(--text); font-size: 13px; line-height: 1.4;
}
.screen-note.warn { background: var(--amber-soft); color: var(--amber); }
.screen-note > span:not(.spin) { flex: 1; min-width: 0; }
.back-chat { flex: none; font-weight: 600; }
@media (max-width: 900px) { .screen-note { margin: 0 14px 6px; } }
@media (pointer: coarse) { .back-chat, .screen-note .btn { min-height: 44px; min-width: 44px; } }