/* ═══════════════════════════════════════════════════════════════════════════
   ОБОЛОЧКИ (темы оформления) — ВРЕМЕННЫЙ ВЫБОР ДЛЯ ВЛАДЕЛЬЦА
   ───────────────────────────────────────────────────────────────────────────
   Владелец 31.08.2026: «накидай вариации оболочек, захватывающие все пункты
   отображения информации, с переключателем; позднее выберем нужную».

   Как это работает. Весь вид программы собран на объявленных токенах
   (styles/tokens.css): цвета, отступы, высоты строк, скругления, тени, размеры
   шрифта. Тема — это НАБОР ЗНАЧЕНИЙ тех же токенов, и ничего больше: никакой
   темы не нужен свой CSS для каждого экрана. Отсюда два следствия — тему
   переключает один атрибут `data-tc-theme` на <html>, и любая новая тема
   действует сразу на все 27 экранов, включая те, которых ещё нет.

   Файл лежит в public/, а не в src/, СОЗНАТЕЛЬНО: его читают ДВОЕ — программа
   (ссылка в index.html) и страница примеров (предложения-оболочки.html). Один
   источник значений вместо двух копий, которые разъедутся на второй правке.

   ⚠ ВРЕМЕННОЕ. Когда владелец выберет оболочку, её значения переезжают в
   styles/tokens.css, а файл и переключатель удаляются. Пока выбор не сделан,
   удалять нечего.

   Как добавить тему: блок `:root[data-tc-theme="ключ"] { … }` здесь + строка в
   src/lib/themes.js. Проверка `themes.spec.js` следит, чтобы список на экране и
   список в этом файле не разошлись.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Общее: развязать зашитые белые в меню ─────────────────────────────────
   В SideMenu.vue три места написаны литералом `#fff` — подпись программы,
   активный пункт и логотип. На тёмном меню это верно, на светлом — текст
   исчезает. Выносим в токены и подменяем правилом с ПОВЫШЕННОЙ точностью:
   стили компонента scoped (`.menu-item[data-v-…]`), и глобальное правило по
   одному классу им проиграло бы. */
:root {
  --menu-strong: #ffffff;                    /* подпись и активный пункт меню */
  --menu-logo-bg: rgba(255, 255, 255, .18);  /* плашка логотипа */
}
:root[data-tc-theme] aside.menu .menu-brand-title,
:root[data-tc-theme] aside.menu .menu-item.active { color: var(--menu-strong); }
:root[data-tc-theme] aside.menu .menu-logo {
  background: var(--menu-logo-bg); color: var(--menu-strong);
}
:root[data-tc-theme] aside.menu .menu-item:focus-visible { outline-color: var(--menu-strong); }

/* ── Общее: развязать зашитые светлые чернила в ШАПКЕ ──────────────────────
   Шапка, поиск, колокол и аватар написаны в расчёте на индиго: ссылки
   `rgba(255,255,255,.78)`, активный пункт белый, подсказка поиска белёсая. На
   светлом каркасе они исчезают — «Асана» с белой шапкой выглядела пустой
   полосой. Выносим в токены с умолчаниями, равными сегодняшним значениям:
   тёмным темам менять нечего, светлые задают три токена и получают читаемую
   шапку. Точность правил повышена тегом (`header.topbar …`) — стили этих
   компонентов scoped. */
:root {
  --frame-ink: rgba(255, 255, 255, .78);   /* обычная ссылка и значок в шапке */
  --frame-ink-strong: #ffffff;             /* активный пункт, наведение */
  --frame-on: rgba(255, 255, 255, .17);    /* подсветка активного пункта */
  --frame-ph: rgba(255, 255, 255, .60);    /* подсказка в поле поиска */
  --frame-border: transparent;             /* линия под шапкой */
  --frame-ring: rgba(255, 255, 255, .50);  /* обвод аватара при наведении */
}
:root[data-tc-theme] header.topbar { border-bottom: 1px solid var(--frame-border); }
:root[data-tc-theme] header.topbar .tt,
:root[data-tc-theme] header.topbar .nb-btn,
:root[data-tc-theme] header.topbar .gs-field { color: var(--frame-ink); }
:root[data-tc-theme] header.topbar .tt:hover,
:root[data-tc-theme] header.topbar .tt.on { color: var(--frame-ink-strong); }
:root[data-tc-theme] header.topbar .tt.on { background: var(--frame-on); }
:root[data-tc-theme] header.topbar .gs-field input::placeholder { color: var(--frame-ph); }
:root[data-tc-theme] header.topbar .um-btn.on,
:root[data-tc-theme] header.topbar .um-btn:hover { box-shadow: 0 0 0 2px var(--frame-ring); }

/* ═══ 01. МИГРАЦИЯ — то, что есть сейчас ══════════════════════════════════
   Индиго-меню Битрикса + белая рабочая область Asana + чат в духе Telegram.
   Оставлена как точка отсчёта: с ней сравниваются остальные. Блок пустой
   намеренно — базовые значения токенов И ЕСТЬ эта тема. */
:root[data-tc-theme="migration"] { }

/* ═══ 01b. МИГРАЦИЯ.V2 — то же самое, но с исправлениями ══════════════════
   Владелец 01.09.2026: «если будешь менять внешность — пусть будет
   Миграция.v2». Здесь собрано то, что я предлагаю поправить в нынешнем виде,
   ничего в самой «Миграции» не трогая: её можно открыть рядом и сравнить.

   1. Полоса прокрутки перестаёт быть белой. Белая капсула видна на синем
      полотне чата и почти исчезает на белом списке — отсюда «местами
      нормальный, местами не подходит». Нейтральная тёмная видна везде одинаково.
   2. Границы чуть плотнее: на светлом фоне линия #e0e1e3 читается как
      «почти нет», и таблица выглядит размытой.
   3. Вторичный текст темнее на полтона: 13 px серым #626364 на белом — на
      грани комфортного чтения для тех, кто в очках.
   4. Показатели «Главной» одной полосой вместо плиток и один поток вместо двух
      колонок — прямой ответ на пустоты (ось «Компоновка»). */
:root[data-tc-theme="migration2"] {
  --border: #d7d9dc; --divider: #e3e4e6; --border-strong: #c2c5c9;
  --text-secondary: #56585b; --text-tertiary: #64686c;
  --scroll-thumb: rgba(60, 68, 82, .34); --scroll-thumb-edge: rgba(60, 68, 82, .12);
  --scroll-thumb-hover: rgba(60, 68, 82, .60); --scroll-thumb-ff: rgba(60, 68, 82, .55);
}

/* ═══ 02. АСАНА — светлое меню, воздух, границы вместо теней ═══════════════
   Одна визуальная семья вместо трёх: меню перестаёт быть чужим тёмным блоком,
   рабочая область и меню — одного рода поверхности, разделены линией. */
:root[data-tc-theme="asana"] {
  --chat-canvas: #dfe3e8;
  --frame-ink: #5b5e62; --frame-ink-strong: #1d1f21; --frame-on: #eceef0;
  --frame-ph: #9aa0a6; --frame-border: #e6e7e9; --frame-ring: rgba(28,110,196,.35);
  --menu-bg: #fbfbfb; --menu-bg-top: #fbfbfb; --menu-bg-bottom: #fbfbfb;
  --menu-text: #4a4d50; --menu-text-hover: #1d1f21;
  --menu-item-hover: #f0f0f0; --menu-item-active: #ececec;
  --menu-active-bar: #1c6ec4; --menu-strong: #1d1f21;
  --menu-logo-bg: #1c6ec4;
  --topbar-bg: #ffffff; --on-purple: #1d1f21;
  --field-purple-bg: #f2f3f4; --field-purple-bd: #dcdee0; --hover-purple: #f0f0f0;
  --app-bg: #f5f5f5; --content-bg: #ffffff; --card-bg: #ffffff;
  --content-radius: 10px;
  --scroll-thumb: rgba(60, 68, 82, .30); --scroll-thumb-edge: rgba(60, 68, 82, .10);
  --scroll-thumb-hover: rgba(60, 68, 82, .55);
}
/* Логотип на светлом меню: белая буква на синем — иначе она пропадает. */
:root[data-tc-theme="asana"] aside.menu .menu-logo { color: #ffffff; }

/* ═══ 03. ЛИНЕЙКА — почти чёрный каркас, плотно, контрастно ════════════════
   Инструмент для тех, кто в программе живёт весь день: строк на экран больше,
   цвета скупые, акцент один. */
:root[data-tc-theme="linear"] {
  --chat-canvas: #e6e7ea;
  --menu-bg: #16171a; --menu-bg-top: #16171a; --menu-bg-bottom: #101114;
  --menu-text: #a1a3a8; --menu-text-hover: #ffffff;
  --menu-item-hover: rgba(255,255,255,.06); --menu-item-active: rgba(255,255,255,.10);
  --menu-active-bar: #7c6cff; --menu-logo-bg: #7c6cff;
  --menu-width: 216px;
  --topbar-bg: #16171a;
  --app-bg: #f6f6f7; --content-bg: #ffffff;
  --primary: #5b4bd6; --primary-hover: #4a3cbb; --primary-soft: #eeecfb; --primary-subtle: #eeecfb;
  --border: #e6e6e8; --divider: #ececee; --border-strong: #cfd0d3;
  --radius-sm: 5px; --radius: 6px; --radius-lg: 8px; --content-radius: 8px;
  --row-h: 32px; --row-h-compact: 34px; --head-h: 34px; --ctl-h: 30px; --ctl-h-sm: 26px;
  --row-pad-y: 5px; --page-pad-y: 16px; --page-pad-x: 20px;
  --fs-body: 13px; --fs-meta: 12px; --fs-cap: 11px; --fs-title: 20px; --fs-head: 15px;
  --scroll-thumb: rgba(30, 34, 42, .35); --scroll-thumb-edge: rgba(30, 34, 42, .12);
  --scroll-thumb-hover: rgba(30, 34, 42, .60);
}

/* ═══ 04. БУМАГА — тёплый лист, крупный текст, минимум цвета ═══════════════
   Для проектной организации, где половина работы — читать и писать: длинные
   названия, протоколы, замечания. Цвет остаётся только там, где он несёт смысл
   (статус, просрочка). */
:root[data-tc-theme="paper"] {
  --chat-canvas: #e7e0d3; --chat-out-bg: #f0e6c8; --chat-out-time: #6a5a33;
  --frame-ink: #6a635a; --frame-ink-strong: #26221d; --frame-on: #ece7dc;
  --frame-ph: #a49b8e; --frame-border: #e2ddd2; --frame-ring: rgba(138,109,59,.40);
  --menu-bg: #f4f1ea; --menu-bg-top: #f4f1ea; --menu-bg-bottom: #efece4;
  --menu-text: #55504a; --menu-text-hover: #26221d;
  --menu-item-hover: #e9e5dc; --menu-item-active: #e2ddd2;
  --menu-active-bar: #8a6d3b; --menu-strong: #26221d; --menu-logo-bg: #8a6d3b;
  --topbar-bg: #ffffff; --on-purple: #26221d;
  --field-purple-bg: #f4f1ea; --field-purple-bd: #ddd7cb; --hover-purple: #efece4;
  --app-bg: #efece4; --content-bg: #fffdf8; --card-bg: #fffdf8;
  --text: #26221d; --text-secondary: #6a635a; --text-tertiary: #857d72;
  --border: #e2ddd2; --divider: #e8e3d9; --border-strong: #cfc7b8;
  --primary: #8a6d3b; --primary-hover: #6f5729; --primary-soft: #f5efe2; --primary-subtle: #f5efe2;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --content-radius: 6px;
  --row-h: 42px; --row-h-compact: 44px; --head-h: 42px;
  --fs-body: 15px; --fs-meta: 14px; --fs-cap: 12px; --fs-title: 24px; --lh-body: 1.55;
  --page-pad-y: 24px; --page-pad-x: 28px;
  --scroll-thumb: rgba(80, 70, 55, .30); --scroll-thumb-edge: rgba(80, 70, 55, .12);
  --scroll-thumb-hover: rgba(80, 70, 55, .55);
}
:root[data-tc-theme="paper"] aside.menu .menu-logo { color: #ffffff; }

/* ═══ 05. ИНЖЕНЕРНАЯ — графит и янтарь, острые углы, сетка ═════════════════
   Ближе всего к чертёжной культуре: прямые углы, видимая сетка, табличные
   цифры, ни одного скругления «для красоты». */
:root[data-tc-theme="engineer"] {
  --chat-canvas: #dde2e6;
  --menu-bg: #2b3038; --menu-bg-top: #2b3038; --menu-bg-bottom: #23272e;
  --menu-text: #b3b9c2; --menu-text-hover: #ffffff;
  --menu-item-hover: rgba(255,255,255,.07); --menu-item-active: rgba(255,255,255,.12);
  --menu-active-bar: #d98b1f; --menu-logo-bg: #d98b1f;
  --topbar-bg: #2b3038;
  --app-bg: #eceef0; --content-bg: #ffffff;
  --primary: #1f6f8b; --primary-hover: #185a72; --primary-soft: #e6f1f5; --primary-subtle: #e6f1f5;
  --border: #d5d8dc; --divider: #dfe2e5; --border-strong: #b9bec4;
  --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 4px; --content-radius: 4px;
  --row-h: 34px; --row-h-compact: 36px; --head-h: 36px; --ctl-h: 32px;
  --fs-body: 13px; --fs-meta: 12px; --fs-cap: 11px;
  --scroll-thumb: rgba(43, 48, 56, .38); --scroll-thumb-edge: rgba(43, 48, 56, .14);
  --scroll-thumb-hover: rgba(43, 48, 56, .62);
}

/* ═══ 06. КОМПАКТ — та же палитра, но строк на экран в полтора раза больше ══
   Меняется ТОЛЬКО плотность: полезно проверить отдельно от цвета, потому что
   плотность спорят чаще, чем оттенок. */
:root[data-tc-theme="compact"] {
  --row-h: 30px; --row-h-compact: 32px; --head-h: 32px;
  --ctl-h: 28px; --ctl-h-sm: 24px; --row-pad-y: 4px;
  --page-pad-y: 12px; --page-pad-x: 16px;
  --fs-body: 13px; --fs-meta: 12px; --fs-cap: 11px; --fs-title: 19px; --fs-head: 14px;
  --sp-4: 12px; --sp-5: 14px; --sp-6: 18px; --sp-8: 24px;
  --menu-width: 208px; --content-radius: 10px;
  --scroll-thumb: rgba(60, 68, 82, .32); --scroll-thumb-edge: rgba(60, 68, 82, .12);
  --scroll-thumb-hover: rgba(60, 68, 82, .58);
}

/* ═══ 07. ПРОСТОР — крупно и спокойно ═════════════════════════════════════
   Обратная крайность: строки выше, шрифт крупнее, поля шире. Смотреть на том
   же экране, что и «Компакт», — вместе они задают вилку, внутри которой
   выбирается рабочая плотность. */
:root[data-tc-theme="roomy"] {
  --row-h: 46px; --row-h-compact: 48px; --head-h: 44px;
  --ctl-h: 40px; --ctl-h-sm: 34px; --row-pad-y: 12px;
  --page-pad-y: 28px; --page-pad-x: 32px;
  --fs-body: 15px; --fs-meta: 14px; --fs-cap: 12px; --fs-title: 26px; --fs-head: 18px;
  --lh-body: 1.55; --menu-width: 248px;
  --radius: 10px; --radius-lg: 14px; --content-radius: 16px;
  --scroll-thumb: rgba(60, 68, 82, .30); --scroll-thumb-edge: rgba(60, 68, 82, .10);
  --scroll-thumb-hover: rgba(60, 68, 82, .55);
}

/* ═══ 08. СИНИЙ КАБИНЕТ — Битрикс целиком, а не наполовину ════════════════
   Сегодня индиго только в меню, а шапка и полотно — от Asana. Здесь семья
   одна: синий каркас, холодная рабочая область. Если людям привычен Битрикс,
   переучиваться почти не придётся. */
:root[data-tc-theme="bitrix"] {
  --chat-canvas: #ccd6e8;
  --menu-bg: #2f3193; --menu-bg-top: #363aa8; --menu-bg-bottom: #2a2c85;
  --menu-text: #c3c2e4; --menu-item-hover: rgba(255,255,255,.10);
  --menu-item-active: rgba(255,255,255,.18); --menu-active-bar: #64c6ff;
  --topbar-bg: #2f3193;
  --app-bg: #e3e8f0; --content-bg: #ffffff; --surface-2: #eef1f6;
  --primary: #2066b0; --primary-hover: #17538f; --primary-soft: #e8f0fa; --primary-subtle: #e8f0fa;
  --border: #d8dee7; --divider: #e2e7ee;
  --radius: 6px; --radius-lg: 10px; --content-radius: 8px;
  --scroll-thumb: rgba(47, 49, 147, .32); --scroll-thumb-edge: rgba(47, 49, 147, .14);
  --scroll-thumb-hover: rgba(47, 49, 147, .58);
}

/* ═══ 09. ТЁМНАЯ — весь интерфейс на тёмных поверхностях ══════════════════
   ⚠ Честное предупреждение: тема меняет ТОКЕНЫ, а в коде экранов остались
   места с зашитым белым (несколько модальных окон, подложки чата, отдельные
   плашки). Они останутся светлыми, и это видно. Тема здесь для того, чтобы
   владелец сказал, нужна ли она вообще: если да — под неё нужен отдельный
   проход по этим местам, а не подкрутка значений. */
:root[data-tc-theme="dark"] {
  /* Правка 01.09.2026 по замечанию владельца «тёмная сильно сливается».
     Причина была не в яркости, а в РАССТОЯНИИ между поверхностями: меню, фон и
     карточка стояли в пределах шести пунктов светлоты, границы едва читались.
     Разводим: фон уходит темнее, карточка светлее, граница заметно светлее —
     теперь видно, где кончается одна плоскость и начинается другая. */
  /* Правка 03.09.2026 по замечанию владельца: «левая часть меню стала сливаться
     с фоном; уместнее цвет, близкий к плашке мессенджера, и чуть выделить
     границы». Меню было #101319 при фоне #0b0e13 — четыре пункта светлоты, то
     есть на глаз одна плоскость. Берём семейство карточки и топбара (#1e232b /
     #171b22) и добавляем видимый край: полоса справа отделяет меню от полотна,
     а не заставляет угадывать, где оно кончается. */
  --menu-bg: #1b2028; --menu-bg-top: #1b2028; --menu-bg-bottom: #171b22;
  --menu-edge: #39414d;
  --menu-text: #a7aeb9; --menu-text-hover: #ffffff;
  --menu-item-hover: rgba(255,255,255,.08); --menu-item-active: rgba(255,255,255,.16);
  --menu-active-bar: #4f8ef7; --menu-logo-bg: #4f8ef7;
  --topbar-bg: #171b22;
  --app-bg: #0b0e13; --content-bg: #171b22; --card-bg: #1e232b; --bg-2: #262c35;
  --row-hover: #262c35; --surface-2: #2b323c;
  --text: #eceef2; --text-secondary: #a7aeb9; --text-tertiary: #8b93a0;
  --border: #39414d; --divider: #2e3641; --border-strong: #4a5462;
  --primary: #5b98f8; --primary-hover: #7aacfa; --primary-soft: #1b2941; --primary-subtle: #1b2941;
  --st-open-bg: #2b323c; --st-working-bg: #16304f; --st-review-bg: #33223f;
  --st-overdue-bg: #40241f; --st-completed-bg: #163a26;
  --st-open: #b9c1cd; --st-working: #7db3ff; --st-review: #c99ae0;
  --st-overdue: #ff9384; --st-completed: #74d6a1;
  --warning-bg: #3a2c12; --amber-ink: #e5b767; --danger-ink: #ff9384; --violet-ink: #b794f4;
  --chat-canvas: #12161d; --chat-backdrop: #0b0e13;
  --chat-in-bg: #262c35; --chat-out-bg: #21402c; --chat-text: #eceef2;
  --chat-author: #7db3ff; --chat-in-time: #a7aeb9; --chat-out-time: #a9c9b4;
  --chat-unread-bg: rgba(255,255,255,.08); --chat-unread-ink: #9cc4ff;   /* черта «Не прочитано», 8,2:1 */
  /* Новое до прочтения — янтарь этой же палитры: светлая заливка светлой темы под светлым текстом не читалась бы.
     Текст 11,7:1, время 6,1:1, имя 6,3:1. */
  --chat-new-bg: #3a2c12; --chat-new-bar: #e5b767; --chat-new-author: #7db3ff;
  --shadow-pop: 0 4px 14px rgba(0,0,0,.6); --shadow-modal: 0 16px 48px -8px rgba(0,0,0,.7);
  --scroll-thumb: rgba(236, 238, 242, .30); --scroll-thumb-edge: rgba(0, 0, 0, .4);
  --scroll-thumb-hover: rgba(236, 238, 242, .62); --scroll-thumb-ff: rgba(210, 215, 222, .5);
}
/* Обои переписки — светлый рисунок: на тёмном полотне они и есть главное
   «сливается», потому что светлее всего вокруг. Снимаем. */
:root[data-tc-theme="dark"] div.chat .cv-thread { background-image: none; }
/* Янтарные плашки (заметки, вспышки) написаны светлыми литералами и на тёмном
   светятся. Приглушаем — точечно, теми же местами, что и в светлой теме. */
/* Заметка поддержки рисуется тем же ChatBubble, что и обычное сообщение
   (`.cb-bubble.note`): собственные `.st-row/.st-bubble` в SupportThread.vue
   остались от прежней разметки и ничего не красят — проба это и показала. */
:root[data-tc-theme="dark"] .cb-bubble.note { background: #3a2c12; box-shadow: inset 0 0 0 1px #5c4a22; }

/* Поля ввода на тёмном. В экранах фон полей написан литералом `#fff` внутри
   scoped-стилей, и токеном это не перекрыть: у правила компонента точность
   выше. Здесь стоит `!important` — единственное место во всём проекте, и стоит
   оно осознанно: это СЛОЙ ПРЕДПРОСМОТРА, который живёт ровно до выбора
   владельца. Выберут тёмную — литералы уходят в токены по-настоящему, и этот
   блок удаляется вместе с файлом. Не выберут — удаляется тем более. */
:root[data-tc-theme="dark"] input:not([type=checkbox]):not([type=radio]),
:root[data-tc-theme="dark"] textarea,
:root[data-tc-theme="dark"] select {
  background: var(--bg-2) !important; color: var(--text) !important;
  border-color: var(--border) !important;
}
:root[data-tc-theme="dark"] input::placeholder,
:root[data-tc-theme="dark"] textarea::placeholder { color: var(--text-tertiary) !important; }

/* ═══ 10. РЕЛЬС — меню одними значками ════════════════════════════════════
   Структурная, а не цветовая: сайдбар сжимается до 64 px, подписи прячутся,
   рабочей области достаётся ещё 168 px ширины. Подпись показывается при
   наведении — иначе значки придётся заучивать. */
:root[data-tc-theme="rail"] {
  --menu-bg: #1f2430; --menu-bg-top: #1f2430; --menu-bg-bottom: #171b24;
  --menu-text: #aeb4bf; --menu-item-hover: rgba(255,255,255,.08);
  --menu-item-active: rgba(255,255,255,.14); --menu-active-bar: #4f8ef7;
  --menu-logo-bg: #4f8ef7; --topbar-bg: #1f2430;
  --app-bg: #eef0f4; --content-radius: 12px;
  --scroll-thumb: rgba(31, 36, 48, .34); --scroll-thumb-edge: rgba(31, 36, 48, .12);
  --scroll-thumb-hover: rgba(31, 36, 48, .60);
}
:root[data-tc-nav="rail"] aside.menu .menu-label,
:root[data-tc-nav="rail"] aside.menu .menu-brand-text { display: none; }
:root[data-tc-nav="rail"] aside.menu .menu-item { justify-content: center; padding: 10px 0; }
:root[data-tc-nav="rail"] aside.menu .menu-brand { justify-content: center; padding: 14px 0 12px; }
:root[data-tc-nav="rail"] aside.menu .menu-badge {
  position: absolute; top: 4px; right: 8px; margin-left: 0; min-width: 16px; height: 16px; font-size: 10px;
}
/* Подпись всплывает у края — иначе значки надо помнить наизусть. */
:root[data-tc-nav="rail"] aside.menu .menu-item:hover .menu-label {
  display: block; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #1f2430; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 13px;
  white-space: nowrap; z-index: 120; box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* ═══ 11. ВЕРХНЕЕ МЕНЮ — разделов нет слева, они сверху ═══════════════════
   Вторая структурная: меню ложится горизонтальной полосой под шапкой, вся
   ширина экрана достаётся работе. Плата названа честно — разделов много, и в
   узком окне полоса прокручивается вбок. */
:root[data-tc-theme="top"] {
  --menu-bg: #2b3038; --menu-bg-top: #2b3038; --menu-bg-bottom: #2b3038;
  --menu-text: #c2c7cf; --menu-item-hover: rgba(255,255,255,.09);
  --menu-item-active: rgba(255,255,255,.16); --menu-active-bar: transparent;
  --menu-logo-bg: #4f8ef7; --topbar-bg: #2b3038;
  --app-bg: #eef0f4;
  --scroll-thumb: rgba(43, 48, 56, .34); --scroll-thumb-edge: rgba(43, 48, 56, .12);
  --scroll-thumb-hover: rgba(43, 48, 56, .60);
}
/* `div.app-shell`, а не `.app-shell`: стили App.vue scoped, у них точность
   класс+атрибут. Добавленный тег делает наше правило точнее — иначе исход
   решал бы порядок подключения, а он у сборки свой. */
:root[data-tc-nav="top"] div.app-shell { flex-direction: column; }
:root[data-tc-nav="top"] aside.menu {
  width: 100%; height: auto; flex-direction: row; align-items: center; gap: 4px;
  padding-right: 12px; overflow: hidden;
}
:root[data-tc-nav="top"] aside.menu .menu-brand { padding: 8px 14px; flex-shrink: 0; }
:root[data-tc-nav="top"] aside.menu .menu-nav {
  flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 4px; gap: 2px; flex: 1;
}
:root[data-tc-nav="top"] aside.menu .menu-item { padding: 8px 12px; white-space: nowrap; }
:root[data-tc-nav="top"] aside.menu .menu-item.active::before { display: none; }
/* В шапке живут БЫСТРЫЕ вкладки тех же пяти разделов. Когда всё меню
   переезжает наверх, они превращаются во второй ряд тех же слов — убираем. */
:root[data-tc-nav="top"] header.topbar .top-tabs { display: none; }

/* ═══ 12. ЗЕЛЁНЫЙ ПРОЕКТ — тёплые нейтральные и один спокойный акцент ══════
   Проверка на то, что программа не обязана быть синей. Зелёный здесь не
   «успех», а фирменный тон: статусы при этом свои цвета сохраняют. */
:root[data-tc-theme="green"] {
  --chat-canvas: #dce5df; --chat-out-bg: #ddf3e2; --chat-out-time: #3f6b4e;
  --menu-bg: #1f3d33; --menu-bg-top: #234539; --menu-bg-bottom: #1b352c;
  --menu-text: #b6c9c1; --menu-item-hover: rgba(255,255,255,.08);
  --menu-item-active: rgba(255,255,255,.14); --menu-active-bar: #7bc9a4;
  --menu-logo-bg: #2f7d5c; --topbar-bg: #1f3d33;
  --app-bg: #eef1ee; --content-bg: #ffffff;
  --primary: #1f6b4f; --primary-hover: #175540; --primary-soft: #e8f3ee; --primary-subtle: #e8f3ee;
  --border: #dfe3df; --divider: #e6eae6;
  --radius: 8px; --radius-lg: 12px; --content-radius: 12px;
  --scroll-thumb: rgba(31, 61, 51, .32); --scroll-thumb-edge: rgba(31, 61, 51, .12);
  --scroll-thumb-hover: rgba(31, 61, 51, .58);
}

/* ═══ 13. НОЧЬ И ЛИСТ — тёмный каркас, светлая работа ════════════════════
   Гибрид: каркас (меню и шапка) почти чёрный, рабочая область белая. Тёмное и
   светлое разведены по ролям — «где я» и «с чем я работаю». */
:root[data-tc-theme="hybrid"] {
  --chat-canvas: #dfe3e9;
  --menu-bg: #0e1116; --menu-bg-top: #0e1116; --menu-bg-bottom: #0e1116;
  --menu-text: #9ba2ad; --menu-text-hover: #ffffff;
  --menu-item-hover: rgba(255,255,255,.06); --menu-item-active: rgba(255,255,255,.12);
  --menu-active-bar: #ffb020; --menu-logo-bg: #ffb020; --menu-strong: #ffffff;
  --menu-width: 220px; --topbar-bg: #0e1116;
  --app-bg: #f4f5f7; --content-bg: #ffffff;
  --primary: #1c6ec4; --border: #e3e5e8; --divider: #eaecef;
  --radius: 7px; --content-radius: 10px;
  --scroll-thumb: rgba(14, 17, 22, .32); --scroll-thumb-edge: rgba(14, 17, 22, .12);
  --scroll-thumb-hover: rgba(14, 17, 22, .58);
}
:root[data-tc-theme="hybrid"] aside.menu .menu-logo { color: #0e1116; }

/* ═══ 14. КОНТРАСТ — крупнее, чётче, для любого зрения ═══════════════════
   Не «тема для слабовидящих», а рабочий вариант для больших экранов и для
   тех, кому мелкий серый текст неудобен: границы плотнее, вторичный текст
   темнее, шрифт крупнее, фокус виден издалека. */
:root[data-tc-theme="contrast"] {
  --chat-canvas: #d6dde6;
  --menu-bg: #12294a; --menu-bg-top: #12294a; --menu-bg-bottom: #0e2340;
  --menu-text: #d3dced; --menu-text-hover: #ffffff;
  --menu-item-hover: rgba(255,255,255,.12); --menu-item-active: rgba(255,255,255,.22);
  --menu-active-bar: #ffd166; --menu-logo-bg: #1c6ec4; --topbar-bg: #12294a;
  --app-bg: #e9edf2; --content-bg: #ffffff;
  --text: #101317; --text-secondary: #3f454c; --text-tertiary: #4d545c;
  --border: #c9ced5; --divider: #d5dae1; --border-strong: #a8afb8;
  --primary: #0b5fb0; --primary-hover: #084a8b;
  --fs-body: 15px; --fs-meta: 14px; --fs-cap: 13px; --fs-badge: 12px; --fs-title: 24px;
  --row-h: 42px; --head-h: 42px; --ctl-h: 38px;
  --scroll-thumb: rgba(16, 19, 23, .45); --scroll-thumb-edge: rgba(16, 19, 23, .20);
  --scroll-thumb-hover: rgba(16, 19, 23, .70);
}

/* ═══════════════════════════════════════════════════════════════════════════
   РАСКЛАДКИ — вторая половина оболочки
   ───────────────────────────────────────────────────────────────────────────
   Владелец 01.09.2026: «оболочки не меняют расположения кнопок, вид чата и
   оформление внутри кнопок; я просил не только цвета, но и сам вид и
   расположение панелей».

   Справедливо: первая редакция меняла ЗНАЧЕНИЯ (цвет, отступ, кегль) и не
   трогала СТРОЕНИЕ. Здесь второе: где стоят панели, как выглядит переписка,
   какой формы кнопка и есть ли у карточки рамка.

   Раскладка — отдельная ось, атрибут `data-tc-layout`. Шесть штук, и каждая
   тема выбирает свою (src/lib/themes.js). Ось отдельная НАМЕРЕННО: палитра и
   строение выбираются по разным причинам, и владелец должен иметь право
   сказать «каркас отсюда, раскладка оттуда».

   Правила бьют по НАСТОЯЩИМ классам программы (div.card, .chat, .msg, .bubble,
   .ui-btn, div.page-head). Точность везде поднята тегом: стили экранов scoped,
   и правило по одному классу им проигрывает.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. КЛАССИЧЕСКАЯ — как сейчас: карточки с рамкой, пузыри в чате ────────
   Пустой блок: сегодняшнее строение и есть эта раскладка. */

/* ── 2. БЕСШОВНАЯ — карточек нет, полосы во всю ширину ────────────────────
   Списку отдаётся вся ширина рабочей области: у карточки убираются боковые
   рамки и скругления, строки различаются чередованием фона, а не сеткой.
   Кнопка действия уходит ВЛЕВО, к заголовку: в списках глаз идёт слева
   направо, и главное действие логичнее встретить первым. */
:root[data-tc-layout="flat"] div.card {
  border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
}
:root[data-tc-layout="flat"] main.app-content,
:root[data-tc-layout="flat"] div.page { padding-left: 0; padding-right: 0; }
:root[data-tc-layout="flat"] div.page-head { padding-left: var(--page-pad-x); }
:root[data-tc-layout="flat"] div.page-head .ph-create { order: -1; margin-left: 0; margin-right: 8px; }
:root[data-tc-layout="flat"] button.ui-btn,
:root[data-tc-layout="flat"] button.ph-create { border-radius: 4px; }
:root[data-tc-layout="flat"] table.rt tbody tr:nth-child(even) td,
:root[data-tc-layout="flat"] .trow:nth-child(even) { background: var(--bg-2); }
:root[data-tc-layout="flat"] th:not(:last-child),
:root[data-tc-layout="flat"] .tc-cols > *:not(:last-child) { border-right: 0; }
/* Переписка без полотна и без пузырей: строки, как в рабочем чате. */
:root[data-tc-layout="flat"] div.chat { padding: 0; gap: 0; background: var(--content-bg); }
:root[data-tc-layout="flat"] div.chat > .cl { border-right: 1px solid var(--border); border-radius: 0; width: 300px; }
:root[data-tc-layout="flat"] div.chat > .cv { border-radius: 0; }
:root[data-tc-layout="flat"] div.chat .cv-thread {
  background-image: none; background-color: var(--content-bg); padding: 10px 16px; gap: 0;
}
:root[data-tc-layout="flat"] div.chat .cb,
:root[data-tc-layout="flat"] div.chat .cb.mine { flex-direction: row; align-items: flex-start; max-width: 100%; }
:root[data-tc-layout="flat"] div.chat .cb-col { max-width: 100%; }
:root[data-tc-layout="flat"] div.chat .cb-bubble,
:root[data-tc-layout="flat"] div.chat .cb.mine .cb-bubble {
  background: transparent; box-shadow: none; border-radius: 0; padding: 4px 0;
}
/* ПАЧКА СООБЩЕНИЙ ОДНОГО АВТОРА ЖИВЁТ И ЗДЕСЬ (21.09.2026). Владелец, уточняя
   жалобу про общий чат: «Про группировку - я имел ввиду группировку сообщений
   от одного автора». Правило считает сам экран (`sameRun` → класс `same`), а
   плоская раскладка его отменяла двумя строками: возвращала аватар каждому
   сообщению и рисовала черту под каждым. Пачка распадалась ровно в той
   оболочке, ради которой её и заводили, — рабочий чат тем и отличается от
   почты, что подряд идущие реплики одного человека читаются одним куском.
   Черта теперь отделяет ПАЧКИ, а не сообщения: она стоит НАД первым сообщением
   пачки, и внутри пачки её нет. */
:root[data-tc-layout="flat"] div.chat .cb { padding: 4px 0; border-bottom: 0; }
:root[data-tc-layout="flat"] div.chat .cb:not(.same) { border-top: 1px solid var(--divider); padding-top: 8px; }
:root[data-tc-layout="flat"] div.chat .cb.same { margin-top: 0; }

/* ── 3. ПЛОТНАЯ — панели уже, органы управления мельче ────────────────────
   Список переписки сжимается с 340 до 264 px, аватар с 44 до 32, шапка
   страницы теряет половину отступа. Всё это — место, отданное содержимому. */
:root[data-tc-layout="dense"] div.chat > .cl { width: 264px; }
:root[data-tc-layout="dense"] div.chat .cl-av { width: 32px; height: 32px; }
:root[data-tc-layout="dense"] div.chat .cl-row { padding-top: 6px; padding-bottom: 6px; }
:root[data-tc-layout="dense"] div.chat .cv-head { height: 46px; }
:root[data-tc-layout="dense"] div.page-head { padding-top: 8px; padding-bottom: 6px; }
:root[data-tc-layout="dense"] button.ui-btn { height: 30px; padding: 0 12px; font-size: var(--fs-meta); }
:root[data-tc-layout="dense"] button.ph-create { padding: 6px 13px; font-size: 12px; }
:root[data-tc-layout="dense"] div.card { border-radius: 6px; }
:root[data-tc-layout="dense"] div.chat .cb-bubble { padding: 5px 9px; }

/* ── 4. МЯГКАЯ — тени вместо рамок, крупные скругления, кнопки-капсулы ────
   Карточка «лежит» на фоне, а не «вырезана» из него. Формы и кнопки
   округлые: программа выглядит спокойнее, но границы читаются слабее. */
:root[data-tc-layout="soft"] div.card {
  border-color: transparent; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 28px -14px rgba(16,24,40,.28);
}
:root[data-tc-layout="soft"] button.ui-btn,
:root[data-tc-layout="soft"] button.ph-create { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
:root[data-tc-layout="soft"] input, :root[data-tc-layout="soft"] select,
:root[data-tc-layout="soft"] textarea { border-radius: 10px; }
:root[data-tc-layout="soft"] div.chat { --chat-radius: 16px; gap: 14px; padding: 14px; }
:root[data-tc-layout="soft"] div.chat .cb-bubble { padding: 9px 14px; }
:root[data-tc-layout="soft"] div.chat > .cl,
:root[data-tc-layout="soft"] div.chat > .cv { border-radius: 16px; }

/* ── 5. СЕТКА — чертёжная: прямые углы, видимые линии, список переписки справа
   Единственная, где ПАНЕЛИ МЕНЯЮТСЯ МЕСТАМИ: переписка слева, список каналов
   справа. Смысл не в оригинальности — в том, что читаемое содержимое
   оказывается ближе к левому краю, откуда начинается чтение. */
:root[data-tc-layout="grid"] div.card { border-radius: 0; box-shadow: none; border-color: var(--border-strong); }
:root[data-tc-layout="grid"] button.ui-btn,
:root[data-tc-layout="grid"] button.ph-create { border-radius: 2px; }
:root[data-tc-layout="grid"] button.ui-btn { border: 1px solid var(--primary); }
:root[data-tc-layout="grid"] input, :root[data-tc-layout="grid"] select,
:root[data-tc-layout="grid"] textarea { border-radius: 2px; }
:root[data-tc-layout="grid"] div.chat { flex-direction: row-reverse; padding: 8px; gap: 8px; }
:root[data-tc-layout="grid"] div.chat > .cl { border-radius: 0; border-left: 1px solid var(--border); }
:root[data-tc-layout="grid"] div.chat > .cv { border-radius: 0; }
:root[data-tc-layout="grid"] div.chat .cb-bubble,
:root[data-tc-layout="grid"] div.chat .cb.mine .cb-bubble { border-radius: 3px; }
:root[data-tc-layout="grid"] div.chat .cv-thread { background-image: none; }
:root[data-tc-layout="grid"] div.chat .cl-av,
:root[data-tc-layout="grid"] div.chat .cb-av,
:root[data-tc-layout="grid"] span.avatar { border-radius: 4px; }

/* ── 6. ЧИТАЛЬНАЯ — колонка чтения шире, карточки без рамок, воздух ───────
   Для тех, кто в программе больше читает, чем кликает: рамки уходят, между
   блоками появляется воздух, переписка занимает всю ширину без полотна. */
:root[data-tc-layout="reading"] div.card {
  border-color: transparent; box-shadow: none; border-radius: 10px;
}
:root[data-tc-layout="reading"] main.app-content { gap: 20px; }
:root[data-tc-layout="reading"] button.ui-btn,
:root[data-tc-layout="reading"] button.ph-create { border-radius: 6px; }
:root[data-tc-layout="reading"] div.chat { background: var(--content-bg); padding: 0; gap: 0; }
:root[data-tc-layout="reading"] div.chat > .cl { width: 300px; border-right: 1px solid var(--border); border-radius: 0; }
:root[data-tc-layout="reading"] div.chat > .cv { border-radius: 0; }
:root[data-tc-layout="reading"] div.chat .cv-thread {
  background-image: none; background-color: var(--content-bg); padding: 18px 24px;
}
:root[data-tc-layout="reading"] div.chat .cb-bubble,
:root[data-tc-layout="reading"] div.chat .cb.mine .cb-bubble {
  padding: 10px 14px; line-height: 1.55; box-shadow: none; border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ОБОЛОЧКА ЦЕЛИКОМ: меню, переписка, прокрутка, поля, компоновка разделов
   ───────────────────────────────────────────────────────────────────────────
   Владелец 01.09.2026: «оболочка затрагивает отображение полностью: верхние
   меню, боковые, вид чата, компоновка в каждом разделе — где какие панели
   лежат; катающийся кирпич — есть он, нету, может точка будет; справа полоса
   от экрана — есть она, нету. Сам вид чата: телеграм-подобный, whatsapp,
   ВК, твиттер».

   Поэтому оболочка разложена на ШЕСТЬ независимых осей, у каждой свой атрибут
   на <html>. Готовая оболочка — это набор из шести значений; но любую ось можно
   поменять отдельно, не трогая остальные («палитра отсюда, чат оттуда»).

     data-tc-theme   палитра и размеры          14 значений
     data-tc-layout  карточки, кнопки, формы     6 значений
     data-tc-nav     меню: сбоку / рельс / сверху / скрыто
     data-tc-chat    переписка: telegram | whatsapp | vk | twitter
     data-tc-scroll  полоса прокрутки: капсула | линия | точка | тихая | системная
     data-tc-frame   поля страницы: с полями | до края | широкие
     data-tc-panels  компоновка разделов: как есть | полосой | зеркально
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-tc-nav="rail"] { --menu-width: 64px; }
:root[data-tc-nav="top"] { --menu-width: 100%; }

/* ── ПЕРЕПИСКА ────────────────────────────────────────────────────────────── */

/* Telegram (умолчание): обои, пузыри с хвостиком, своё справа зелёным.
   Отдельных правил не нужно — так написан сам экран. */

/* WhatsApp: те же обои, но песочные; своё — светло-зелёное, чужое — белое,
   углы мельче, строки плотнее, время внутри пузыря. */
:root[data-tc-chat="whatsapp"] {
  --chat-canvas: #e5ddd5; --chat-in-bg: #ffffff; --chat-out-bg: #d9fdd3;
  --chat-radius: 8px; --chat-out-time: #667781; --chat-in-time: #667781;
}
/* Обои у нас ОДНИ — тёмный «телеграмный» узор (public/chat-pattern.webp), и он
   непрозрачный: на светлом песочном полотне он просто закрыл бы цвет собой.
   Поэтому здесь узор снимается, а полотно остаётся ровным песочным. Захочется
   обоев в этом духе — нужна вторая картинка, светлая; это отдельная работа. */
:root[data-tc-chat="whatsapp"] div.chat .cv-thread { background-image: none; }
:root[data-tc-chat="whatsapp"] div.chat .cb-bubble { padding: 6px 9px 6px 10px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
:root[data-tc-chat="whatsapp"] div.chat .cb-av { display: none; }   /* в личной переписке аватар не нужен */

/* ВКонтакте: обоев нет, полотно белое, пузыри мягкие и БЕЗ разворота — свои
   сообщения тоже слева, различаются заливкой. Аватар у каждого сообщения. */
:root[data-tc-chat="vk"] {
  --chat-canvas: #ffffff; --chat-in-bg: #f0f2f5; --chat-out-bg: #e5f0ff;
  --chat-radius: 14px; --chat-text: #000000;
}
:root[data-tc-chat="vk"] div.chat .cv-thread { background-image: none; padding: 12px 16px; gap: 4px; }
:root[data-tc-chat="vk"] div.chat .cb,
:root[data-tc-chat="vk"] div.chat .cb.mine { flex-direction: row; align-items: flex-start; }
:root[data-tc-chat="vk"] div.chat .cb.same .cb-av { visibility: hidden; }
:root[data-tc-chat="vk"] div.chat .cb-bubble { box-shadow: none; padding: 8px 12px; }
:root[data-tc-chat="vk"] div.chat .cb-col { max-width: 70%; }

/* Твиттер: пузырей нет вовсе. Лента сообщений — строки во всю ширину, крупный
   аватар слева, имя жирным, разделители волосяные, наведение подсвечивает
   строку целиком. Своё от чужого отличается только пометкой, а не стороной. */
:root[data-tc-chat="twitter"] {
  --chat-canvas: #ffffff; --chat-in-bg: transparent; --chat-out-bg: transparent;
}
:root[data-tc-chat="twitter"] div.chat .cv-thread { background-image: none; padding: 0; gap: 0; }
:root[data-tc-chat="twitter"] div.chat .cb,
:root[data-tc-chat="twitter"] div.chat .cb.mine {
  flex-direction: row; align-items: flex-start; max-width: 100%;
  padding: 12px 18px; border-bottom: 1px solid var(--divider); gap: 12px;
}
:root[data-tc-chat="twitter"] div.chat .cb:hover { background: var(--row-hover); }
:root[data-tc-chat="twitter"] div.chat .cb-col { max-width: 100%; flex: 1; }
:root[data-tc-chat="twitter"] div.chat .cb-bubble {
  background: transparent; box-shadow: none; border-radius: 0; padding: 0; line-height: 1.5;
}
:root[data-tc-chat="twitter"] div.chat .cb-av { width: 44px; height: 44px; align-self: flex-start; }
/* Вид «как в Twitter» тоже не разбирает пачку на отдельные карточки: аватар в
   пачке скрыт (правило программы), а плотность остаётся своей. */
:root[data-tc-chat="twitter"] div.chat .cb.same { margin-top: 0; }

/* ── «В СЕТИ» ТОЧКОЙ (ось «В сети», строка 360) ────────────────────────────
   Владелец 23.10.2026 на вопрос «“В сети” — точкой на краю кружка, цвета те же?» — «5. Точка». Класс присутствия
   один на программу (`аураИмени`, lib/signal.js → .aura-online / .aura-away), ось меняет только его вид: кольца
   нет, на правом нижнем краю кружка — точка тех же ярких цветов (его же 29.09 «прям яркое») с ободком цвета
   фона. Опору для точки (position: relative) и «не резать края» (Avatar.vue режет круг по `overflow: hidden`) правило
   ставит само — кружков своей разметки в программе несколько (Avatar.vue, кружки переписки), и забыть одно у одного
   значило бы точку «на краю окна» или срезанную. Кольцо (умолчание, у людей) этим правилом не задето вовсе: кружок
   у них тот же до точки. Размер точки — доля кружка в пределах 9–14 точек. */
:root[data-tc-presence="dot"] .aura-online,
:root[data-tc-presence="dot"] .aura-away { box-shadow: none; position: relative; overflow: visible; }
:root[data-tc-presence="dot"] .aura-online::after,
:root[data-tc-presence="dot"] .aura-away::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; pointer-events: none;
  width: clamp(9px, 30%, 14px); height: clamp(9px, 30%, 14px); box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--card-bg);
}
:root[data-tc-presence="dot"] .aura-online::after { background: var(--presence-online); }
:root[data-tc-presence="dot"] .aura-away::after { background: var(--presence-away); }

/* ── ПОЛОСА ПРОКРУТКИ («катающийся кирпич») ───────────────────────────────
   Полоса у нас своя, нарисованная (lib/scrollbar.js, элемент .tc-sb): системную
   в программе не показывают нигде — иначе вид расходится между браузерами.
   Здесь меняется ЕЁ характер. */

/* Капсула (умолчание) — 6 px, скруглённая, полупрозрачная. Правил не нужно. */

/* Линия: тонкая, прямая, плотного цвета — заметнее на светлом, но скромнее. */
:root[data-tc-scroll="line"] .tc-sb { border-radius: 0; border: 0; background: var(--scroll-thumb-hover); }
:root[data-tc-scroll="line"] .tc-sb-y { width: 3px; }
:root[data-tc-scroll="line"] .tc-sb-x { height: 3px; }

/* Точка: короткий кружок, который едет по краю. Меньше всего мешает глазу и
   меньше всего говорит о длине содержимого — это её честная цена. */
:root[data-tc-scroll="dot"] .tc-sb { border-radius: 999px; border: 0; background: var(--scroll-thumb-hover); }
:root[data-tc-scroll="dot"] .tc-sb-y { width: 8px; max-height: 44px; }
:root[data-tc-scroll="dot"] .tc-sb-x { height: 8px; max-width: 44px; }

/* Тихая: видна только при наведении и во время прокрутки. */
:root[data-tc-scroll="quiet"] .tc-sb.on { opacity: .22; }
:root[data-tc-scroll="quiet"] .tc-sb.on:hover, :root[data-tc-scroll="quiet"] .tc-sb.drag { opacity: 1; }

/* Системная: своей нет вовсе, полосу рисует браузер. Вид будет разным в
   Chrome и Firefox — это и есть то, от чего мы уходили; вариант оставлен,
   потому что владелец спросил «есть он, нету». */
:root[data-tc-scroll="native"] .tc-sb { display: none; }
:root[data-tc-scroll="native"] .tc-sb-on, :root[data-tc-scroll="native"] .tc-sb-on * { scrollbar-width: thin; }
:root[data-tc-scroll="native"] .tc-sb-on ::-webkit-scrollbar,
:root[data-tc-scroll="native"] .tc-sb-on::-webkit-scrollbar { display: block; width: 12px; height: 12px; }
:root[data-tc-scroll="native"] .tc-sb-on ::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-hover); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}

/* ── ПОЛЯ СТРАНИЦЫ («справа полоса от экрана») ────────────────────────────── */

/* С полями (умолчание): рабочая область — карточка на фоне, вокруг видна рамка
   фона. Правил не нужно. */

/* До края: фона по краям нет, содержимое доходит до самого края окна. Экран
   кажется больше, но теряется ощущение «листа на столе». */
/* ТА САМАЯ ПРАВАЯ ПОЛОСА. Она не от отступов и не от прокрутки: у рабочей
   области стоит `margin: 0 12px 0 0` и скруглён верхний правый угол (App.vue) —
   выбор владельца 28.08.2026 «зазор только справа». Первая редакция этой оси
   меняла padding, а полоса живёт на margin, и потому не убиралась ни в одной
   оболочке (владелец заметил это снимком со стрелкой 01.09.2026).
   Теперь полосой управляет ось «Поля». */
:root[data-tc-frame="flush"] main.app-content {
  margin-right: 0; border-radius: 0; padding-left: 0; padding-right: 0;
}
/* ПОЛОСКА ПОД ПРОКРУТКУ — даже когда полей нет. Капсула рисуется ПОВЕРХ области
   у правого края, и в «до края экрана» под неё уезжало содержимое: владелец
   22.09.2026 — «кнопка + Проект упирается в правый край экрана — там же
   прокрутка». Отдаём прокрутке ровно столько, сколько заняла бы системная
   полоса; «до края» остаётся до края, а нажимать на кнопку больше ничто не
   мешает. Правило включено ТОЛЬКО когда рисуем мы (`.tc-sb-on`): без нашей
   полосы место занимает системная, и полоска стала бы двойной. */
:root.tc-sb-on[data-tc-frame="flush"] main.app-content { padding-right: var(--tc-sb-gutter, 10px); }
:root[data-tc-frame="flush"] div.page { padding-left: 0; padding-right: 0; }
:root[data-tc-frame="flush"] div.app-main { background: var(--content-bg); }
:root[data-tc-frame="flush"] div.card {
  border-left: 0; border-right: 0; border-radius: 0;
}

/* Широкие поля: содержимое ограничено по ширине и стоит по центру. Для больших
   мониторов: строка не растягивается на метр, глазу легче вести её до конца. */
/* Широкие поля: полоса справа шире, содержимое ограничено и стоит по центру —
   на большом мониторе строка перестаёт растягиваться через весь экран. */
:root[data-tc-frame="wide"] main.app-content { margin-right: 24px; }
:root[data-tc-frame="wide"] main.app-content > * { max-width: 1360px; margin-left: auto; margin-right: auto; width: 100%; }
:root[data-tc-frame="wide"] div.page-head { max-width: 1360px; margin-left: auto; margin-right: auto; width: 100%; }

/* ── КОМПОНОВКА РАЗДЕЛОВ ──────────────────────────────────────────────────── */

/* Как есть (умолчание) — правил не нужно. */

/* Полосой: показатели «Главной» становятся одной полосой вместо плиток, две
   колонки складываются в один поток, правый рельс ленты убирается. Это прямой
   ответ на пустоты: содержимое перестаёт делиться на колонки, которые
   заканчиваются в разное время. */
:root[data-tc-panels="strip"] div.cards {
  display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
:root[data-tc-panels="strip"] div.cards > .kpi {
  flex: 1; border: 0; border-right: 1px solid var(--border); border-radius: 0;
}
:root[data-tc-panels="strip"] div.cards > .kpi:last-child { border-right: 0; }
:root[data-tc-panels="strip"] div.cols { grid-template-columns: minmax(0, 1fr); }
/* Правый рельс ленты — это `aside.widgets`, а не `.rail`: первая редакция
   целилась в выдуманный класс, и рельс не убирался НИ В ОДНОЙ оболочке
   (владелец заметил 01.09.2026: «правую полосу везде не убирают?»). Правило
   молча ничего не делало — тот самый случай, когда настройка есть, а следствия
   у неё нет. */
:root[data-tc-panels="strip"] aside.widgets { display: none; }

/* Зеркально: колонки меняются местами — сводки и виджеты слева, поток справа.
   Кому-то так удобнее: взгляд первым встречает не список, а состояние дел. */
:root[data-tc-panels="mirror"] div.cols { direction: rtl; }
:root[data-tc-panels="mirror"] div.cols > * { direction: ltr; }
:root[data-tc-panels="mirror"] div.chat { flex-direction: row-reverse; }
/* Рельс переезжает налево: `margin-left: auto` прижимал его к правому краю —
   значит, зеркалить надо и порядок, и отступ. */
:root[data-tc-panels="mirror"] aside.widgets { order: -1; margin-left: 0; margin-right: auto; }

/* ═══ 15. MATTERMOST — их оболочка, снятая с исходников ═══════════════════
   Задача владельца 04.09.2026: «разбери оболочку их программы и в конструктор
   наш добавь пункты… у них колонки и прочее уже адекватно отформатированы».

   Значения НЕ на глаз, а из репозитория (mattermost/mattermost, webapp —
   Apache 2.0; читаем, не копируем код):
     • палитра — их тема по умолчанию Denim
       (`packages/mattermost-redux/src/constants/preferences.ts`);
     • ширина левого списка 240 → 264 → 304 px по ширине окна
       (`sass/layout/_sidebar-left.scss`);
     • строка канала: высота 32, шрифт 14, скругление 4
       (там же);
     • шапка канала: не выше 56 (`sass/layout/_headers.scss`);
     • правая панель: 400 (`sass/layout/_sidebar-right.scss`);
     • черта «новые сообщения» — ЯНТАРНАЯ (#cc8f00), а не красная.
   Тёмная синева слева и белое полотно справа — их узнаваемая часть; светлые
   темы у них есть, но по умолчанию видят эту. */
:root[data-tc-theme="mattermost"] {
  --chat-canvas: #ffffff;
  /* Шапка здесь тёмно-синяя (--topbar-bg ниже), а чернила шапки стояли от белой шапки
     «Асаны»: вкладки писались #5b5e62 по #192a4d — 2,18:1 на всех 36 экранах (строка
     126, 28.09.2026). Чернила, подсветка пункта и подсказка поиска — умолчания `:root`
     для тёмного каркаса; своими остаются линия под шапкой и обвод аватара. */
  --frame-border: #e0e1e3; --frame-ring: rgba(28,88,217,.35);
  --menu-bg: #1e325c; --menu-bg-top: #192a4d; --menu-bg-bottom: #1e325c;
  --menu-text: #b8c4dc; --menu-text-hover: #ffffff;
  --menu-item-hover: #28427b; --menu-item-active: #28427b;
  --menu-active-bar: #5d89ea; --menu-strong: #ffffff;
  --menu-logo-bg: #162545; --menu-width: 264px;
  --topbar-bg: #192a4d; --on-purple: #ffffff;
  --field-purple-bg: #28427b; --field-purple-bd: #3b5590; --hover-purple: #28427b;
  --app-bg: #ffffff; --content-bg: #ffffff; --card-bg: #ffffff;
  --content-radius: 0px;
  /* Третичный — тот же серо-синий тон, темнее: #8b8f9c давал на белом 3,23:1, на
     --surface-2 2,98:1. Теперь 4,93:1 и 4,56:1, и он по-прежнему светлее вторичного
     (6,25:1). Слово владельца 28.09.2026 — «Затемнить» (строка 126). */
  --text: #3f4350; --text-secondary: #5c6070; --text-tertiary: #6c707e;
  --primary: #1c58d9; --primary-hover: #1747ad; --primary-soft: #edf2fc; --primary-subtle: #edf2fc;
  --link: #386fe5;
  --border: rgba(63,67,80,.12); --divider: rgba(63,67,80,.12); --border-strong: rgba(63,67,80,.24);
  --row-hover: rgba(63,67,80,.04); --surface-2: #f5f6f8; --bg-2: #f5f6f8;
  /* Тон Mattermost, светлота — по контрасту (строка 126, 28.09.2026, слово владельца
     «Чинить»). #3db887 и #d24b4e давали на своих тинтах 2,24:1 и 3,75:1, на белом —
     2,50:1 и 4,32:1: правило базы «тинт-заливка с тёмным текстом того же тона»
     разошлось, едва палитра поменяла одну сторону пары. Теперь 5,32 и 5,93, 5,11 и
     5,89. Вместе с надписью темнеют точки присутствия и полосы — они ссылаются сюда. */
  --st-completed: #16724a; --st-overdue: #c0272b;
  /* Присутствие — не надпись, а знак: кольцо у аватара и точка у имени. Ему нужна
     яркость, а не тёмные чернила текста. После строки 126 кольцо брало тёмный
     «Завершено» #16724a и сливалось с узором переписки, а «отошёл» #b05e12 — с
     коричневой заливкой аватара. Владелец 28.09.2026: «тусклая аура. Чуть жирнее
     контур, по ярче» — взяли цвета присутствия Mattermost. 29.09.2026, посмотрев:
     «Уже лучше, но может быть сделать прям яркое?» — неоново-зелёный и сочный
     жёлтый: кольцо — знак, ему нужна заметность, а не спокойствие (строка 135). */
  --presence-online: #00e676; --presence-away: #ffc400;
  --row-h: 32px; --head-h: 40px;
}
/* Их лента и списки живут без скруглений и без рамки вокруг рабочей области. */
:root[data-tc-theme="mattermost"] .app-content { border-radius: 0; margin: 0; }

/* ─── Правила таблиц Mattermost (`components/admin_console/list_table`) ────
   Четыре отличия от наших, и каждое видно глазом:
     1. ВЕРТИКАЛЬНЫХ ЛИНИЙ НЕТ ВОВСЕ. Колонки разделяет только воздух;
        горизонтальная линия — одна, между строками, и та в 12% плотности.
     2. Шапка мельче тела: 12 px полужирным и приглушённым цветом против 14 px
        обычным в ячейках. У нас шапка того же размера, что и текст.
     3. Поля по краям таблицы 24 px, между колонками 12 px — то есть первая и
        последняя колонка НЕ прижаты к рамке.
     4. Текст не переносится: длинное режется многоточием, а таблица целиком
        прокручивается вбок. У нас перенос — отсюда двухэтажные строки.
   Включается осью «Таблицы» на странице предложений и работает с любой темой:
   это правила формата, а не палитра. */
:root[data-tc-table="mm"] table { border-collapse: collapse; }
:root[data-tc-table="mm"] th,
:root[data-tc-table="mm"] td { border-left: 0 !important; border-right: 0 !important; }
:root[data-tc-table="mm"] thead th {
  padding: 12px; font-size: 12px; font-weight: 600; line-height: 16px;
  color: var(--text-secondary); white-space: nowrap; text-transform: none;
  border-bottom: 1px solid var(--divider);
}
:root[data-tc-table="mm"] tbody td {
  padding: 12px; font-size: 14px; font-weight: 400; line-height: 20px;
  border-top: 1px solid var(--divider); border-bottom: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-tc-table="mm"] thead th:first-child,
:root[data-tc-table="mm"] tbody td:first-child { padding-left: 24px; }
:root[data-tc-table="mm"] thead th:last-child,
:root[data-tc-table="mm"] tbody td:last-child { padding-right: 24px; }

/* ─── Переписка по-ихнему: плоская лента вместо пузырей ──────────────────
   Своё от чужого отличают имя и аватар, а не сторона и цвет; подряд идущие
   сообщения одного человека сливаются в пачку. Черта новых — янтарная. */
:root[data-tc-chat="mm"] .cb-bubble {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 2px 0 !important; max-width: none !important; box-shadow: none !important;
  color: var(--text);
}
:root[data-tc-chat="mm"] .cb { flex-direction: row !important; padding: 2px 16px; }
:root[data-tc-chat="mm"] .cb.mine { flex-direction: row !important; }
:root[data-tc-chat="mm"] .cb:hover { background: var(--row-hover); }
:root[data-tc-chat="mm"] .cb-col { align-items: flex-start !important; width: 100%; }
:root[data-tc-chat="mm"] .cb-bubble b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
:root[data-tc-chat="mm"] .cb-bubble i { float: none; display: inline; margin-left: 8px; color: var(--text-tertiary); font-size: 12px; }
:root[data-tc-chat="mm"] .day-sep span { background: var(--content-bg); color: var(--text-secondary); }
:root[data-tc-chat="mm"] .cv-thread { background: var(--content-bg); }