/* Каркас оболочки vesquadra — вынесен дословно из base.html (этап 1
   UI-фундамента, ui-plan.md). Значения-литералы уходят в tokens.css на
   этапе 2; компоненты поверх Bootstrap — components.css (этап 3+). */

* { box-sizing: border-box; }
/* Табличные цифры на всём тексте (стандарт «Весквадра 26-09-08»): цифры одной
   ширины, столбцы чисел сходятся сами без ручного .mono/.num на каждом месте.
   font-variant-numeric наследуется — точечные .num/.dt-mono/.mono ниже задают
   его же значение, оставлены как явная документация роли на компоненте. */
body { margin: 0; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
       color: var(--text); background: var(--bg); }
/* height (не min-height) + overflow:hidden фиксируют оболочку на высоту экрана
   (C4): контент прокручивается внутри .content, а шапка (topnav+subnav+лента
   вкладок) никогда не уезжает. С min-height корень рос вместе с контентом и
   прокручивалось всё окно вместе с шапкой. */
.layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Верхний ряд навигации — канон «Модули» §25: светлый лист, чернильная линия 1px ──
   Высота 52px (--topnav-height из kit), нижняя граница 1px сплошная чернилами.
   align-items: stretch — пункты растягиваются на всю высоту (активный box-shadow). */
.topnav {
  background: var(--surface-module, var(--sheet));
  border-bottom: 1px solid var(--edge-strong, var(--ink));
  display: flex; align-items: stretch; gap: 0;
  padding: 0; height: var(--topnav-height, 52px); flex-shrink: 0;
}

/* Логотип: канонный знак «V» (inline-SVG 18×18) + Manrope 600 13px. §25.
   align-self совместимость: flex-item внутри stretch-контейнера. */
.topnav .brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px;
  border-right: 1px solid var(--edge-field, var(--rule));
  font-family: var(--font-sans, var(--font-ui));
  font-weight: var(--weight-semibold, 600);
  font-size: var(--size-module-title, 13px);
  letter-spacing: var(--track-row-title, -.02em);
  color: var(--text-data, var(--ink));
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
/* ::before убран: знак теперь inline-SVG в разметке, дублировать не нужно. */
/* Точка и <small> скрыты: канон «Модули» — без точки и без подписей рядом с брендом. */
.topnav .brand b { display: none; }
.topnav .brand small { display: none; }

/* Пункты навигации: растягиваются по высоте (align-items: stretch у .topnav) */
.topnav-items { display: flex; gap: 0; align-self: stretch; align-items: stretch; flex: 1; }
.topnav-items a {
  display: inline-flex; align-items: center;
  padding: 15px 16px;
  font-family: var(--font-sans, var(--font-ui));
  font-size: var(--size-body, var(--fs-12, 12px));
  font-weight: var(--weight-regular, 400);
  color: var(--text-muted, var(--ink-soft)); /* §25 обычный = #6B7280 */
  text-decoration: none; white-space: nowrap;
  transition: none;
}
/* Наведение: фон surface-hover (#F8FAFC) + текст data (#111827) —
   волна 1, добор repoint-нула surface-hover/text-data на ярус 1 */
.topnav-items a:hover {
  background: var(--surface-hover, var(--brand-dark-hover));
  color: var(--text-data, var(--ink));
}
/* Активный раздел: лёгкая сливовая заливка + box-shadow 2px снизу акцентом,
   weight 500. Заливка --surface-selected (#F6F0F7) — тот же тон, что у
   выделенной строки таблицы; решение Ильи 2026-09-01: одного подчёркивания
   мало, активный раздел должен читаться пятном. */
.topnav-items a.active {
  background: var(--surface-selected, var(--accent-tint));
  color: var(--text-data, var(--ink));
  font-weight: var(--weight-medium, 500); /* 500, не 600/700 */
  box-shadow: var(--underline-nav, inset 0 -2px 0 var(--accent, var(--wax)));
}
/* Раздел «в разработке»: text-disabled (#9CA3AF, было #C3C8CE), некликабельный */
.topnav-items .nav-wip {
  display: inline-flex; align-items: center;
  padding: 15px 16px;
  color: var(--text-disabled, var(--ink-faint));
  font-family: var(--font-sans, var(--font-ui));
  font-size: var(--size-body, var(--fs-12, 12px));
  white-space: nowrap; cursor: default; user-select: none;
}
/* Правая часть: IBM Plex Mono 10.5px, text-label (#6B7280, было #A2A8B0) — имя пользователя без PT Serif */
.topnav-right {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; margin-left: auto; align-self: center;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--size-meta, 10.5px);
  color: var(--text-label, var(--ink-soft));
}
.topnav-right .username {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-style: normal; /* убираем PT Serif italic */
  color: var(--text-label, var(--ink-soft));
  font-size: var(--size-meta, 10.5px);
}
.topnav-right a { color: var(--text-label, var(--ink-soft)); font-size: var(--size-meta, 10.5px); text-decoration: none; }
.topnav-right a:hover { color: var(--text-data, var(--ink)); }
.topnav-admin {
  display: inline-flex; align-items: center;
  padding: 0 12px; height: var(--topnav-height, 52px);
  color: var(--text-label, var(--ink-faint)); text-decoration: none;
  font-size: var(--size-meta, 10.5px);
}
.topnav-admin:hover { color: var(--text-data, var(--ink)); }

/* ── Второй ряд ─────────────────────────────────────────────────────── */
/* Подменю всегда занимает высоту (даже без пунктов): при переключении разделов
   лента и контент не прыгают — симметрия (пожелание Ильи). Сайдбар убран —
   пункты начинаются от левого края с единым горизонтальным отступом. */
.subnav { background: var(--subnav-bg); border-bottom: 1px solid var(--line);
          display: flex; align-items: center; gap: 0;
          padding: 0 16px;
          height: var(--subnav-h); flex-shrink: 0; }
.subnav a { display: block; padding: 0 14px; height: var(--subnav-h); line-height: var(--subnav-h);
            color: var(--subnav-text); text-decoration: none; font-size: var(--fs-13);
            white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--accent); }
.subnav a.active { color: var(--accent); font-weight: 600;
                   border-bottom-color: var(--accent); }

/* ── Рабочая область: горизонтальный ряд [левая колонка | чат] ──────── */
/* .workspace занимает всё место под topnav, включая высоту subnav и ленты.
   Левая .workzone — колонка с subnav, лентой и body-row; чат — правый сосед
   на всю высоту. min-width:0 обязателен: не даёт широким таблицам толкать чат. */
.workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; }
/* min-height:0 обязателен наравне с min-width:0 (C4): без него колонка не
   сжимается по высоте, контент распирает страницу и прокручивается всё окно —
   шапка (topnav+subnav+лента) уезжает вверх. С ним прокрутка уходит внутрь
   .content (.body-row min-height:0), а шапка раздела остаётся на месте везде. */
.workzone  { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

/* ── Основная область внутри .workzone ───────────────────────────────── */
.body-row { display: flex; flex: 1; min-height: 0; }

/* ── Левая панель убрана (блок 1 навигации, 2026-07) ─────────────────────
   Стили .sidebar / .sidebar-home / .leftnav / .userbox удалены.
   Git помнит историю, если понадобятся. --sidebar-w = 0 в tokens.css. */

/* ── Левая вертикальная полоска пунктов раздела (tabs-standard, 2026-07) ─
   Видна только когда у активного раздела есть modules (группы: Закупки,
   Панель администратора). Разделы-одиночки (Каталог, Главная, OZON→Кабинет)
   полоску не показывают. WIP-вид — финальная полировка в следующем блоке. */
/* Канон «Ведомость»: фон paper, граница-право rule-strong */
.subnav-left {
  width: var(--subnav-left-w);
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  padding: 18px 0 0 0;
  overflow-y: auto;
  /* overflow-x: hidden — вылет margin-right: -1px у .subnav-left a намеренный
     (акцентная полоса активного пункта ложится поверх border-right панели),
     по горизонтали панель не прокручивается по замыслу. */
  overflow-x: hidden;
}
.subnav-left a {
  display: block;
  padding: 6px 0 6px 16px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-13);
  white-space: nowrap;
  /* Метка длиннее полоски обрезалась МОЛЧА: панель по горизонтали не
     прокручивается (overflow-x: hidden выше — по замыслу), и хвост уходил за
     край без следа. Многоточие делает обрезку видимой; целое слово отдаёт
     подсказка, которую ui.js ставит только действительно обрезанному пункту. */
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 3px solid transparent;
  margin-right: -1px;
}
.subnav-left a:hover { color: var(--ink); text-decoration: none; }
.subnav-left a.active {
  color: var(--ink);
  font-weight: 700;
  border-right-color: var(--wax);
  background: transparent;
}

/* ── Контент ─────────────────────────────────────────────────────────── */
.content { flex: 1; padding: 28px 36px; overflow: auto; }
/* ── Экран «во всю высоту» (волна 2, добор 10.09) ────────────────────────
   .content--stretch делает .content флекс-колонкой — растяжка идёт чистым
   CSS всей цепочкой обёрток вниз до .table-mod (components.css), взамен
   инлайн-скриптов fitCatalogWrap/fitPrajsyTableMod, считавших высоту от
   getBoundingClientRect() на каждой отрисовке (сняты этим заходом).
   height:100%/проценты тут не годятся (см. sticky-shapka-zazor.md, третий
   провал — .tab-pane резолвит их в auto), а flex:1;min-height:0 в определённой
   высоте родителя не нуждается — ей достаточно, чтобы КАЖДОЕ звено цепочки
   было флекс-контейнером; сама .content уже флекс-item .body-row с давно
   рабочей границей высоты (не тронуто).
   Экраны без модификатора (остальные экраны, документы без табличного
   модуля, свои калькуляции высоты) не получают ни байта этого правила —
   класс не навешен, .content не меняется ни на пиксель. Исключение —
   карточка поставщика (postavshchiki/edit.html): своего table-mod внутри
   нет, но её «Назад» лениво грузит партиал списка «Поставщики» в тот же
   #tab-panes (data-vq-open, не полная навигация) — класс на .content решает
   ХОЗЯИН страницы, зафиксированный при первой SSR-отдаче, а не сам список,
   поэтому карточка тоже держит content--stretch. */
.content--stretch { display: flex; flex-direction: column; }
/* .content-area (обёртка над модулем на «Прайсах») — прозрачна для флекса
   только внутри .content--stretch; на остальных экранах прайсов (карточка,
   загрузка), где модификатор не подключён, остаётся обычным блоком. */
.content--stretch .content-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Волна 2, седьмой заход прайсов (14.09, находка 9 приёмки): карточка прайса
   (prajsy/detail.html) объявила content--stretch, но растяжка внутри нужна
   ГЛУБЖЕ одного .content-area — до .table-mod внутри Bootstrap-подвкладок
   корзин (.tab-matched/.tab-review/.tab-notfound), а не сразу под ним, как
   на «Прайсах»-списке. Три звена цепочки, все ЗАЖАТЫ под .prajsy-korziny-area
   (доводка приёмки 14.09) — единственный потребитель этой цепочки, а не
   Bootstrap .tab-content вообще где угодно под content--stretch: без прицела
   на свой класс чужая подвкладка на другом content--stretch экране унаследовала
   бы флекс молча, даже если её растяжка никогда не задумывалась.
   1) .prajsy-korziny-area — свой класс на прежде безымянной обёртке
      (#sopostavlenie-area, _korziny.html) между .content-area и .tab-content;
   2) .tab-content внутри неё — Bootstrap-класс; grep по всем шаблонам
      подтвердил, что его несёт ТОЛЬКО _korziny.html, но прицел всё равно на
      .prajsy-korziny-area .tab-content, не на голый .tab-content;
   3) сама активная панель — см. отдельное правило ниже. */
.content--stretch .prajsy-korziny-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.content--stretch .prajsy-korziny-area .tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Свой селектор на классе .active (Bootstrap data-bs-toggle="tab"), НЕ общий
   канон-путь растяжки для системы документ-вкладок в components.css (tabs.js,
   #tab-panes) — тот держит на активной панели СВОЁ имя класса-маркера
   (короткая приставка «is-», не голое слово «active»). Здесь другой механизм
   переключения (Bootstrap JS) с тем же именем тега `.tab-pane`, но другим
   активным классом. Объединять оба пути нельзя (разный маркер активности),
   а components.css сейчас под чужой заявкой — свой параллельный селектор в
   base.css, не трогая соседний файл. :has(.table-mod) оставляет пустое
   состояние корзины (просто абзац) обычным display:block. */
.content--stretch .prajsy-korziny-area .tab-content > .tab-pane.active:has(.table-mod) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Заголовок экрана: Golos Text 600 22px/1.15 трекинг -.02em (канон §06;
   карточка «Типографика», волна 1, доводка 08.09 — было 1/-.045em) */
.content h1 {
  margin-top: 0;
  font-family: var(--font-sans, var(--font-ui));
  font-size: var(--size-screen-title, 22px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--track-screen-title, -.02em);
  line-height: var(--leading-screen-title, 1.15);
}
.note { color: var(--text-muted); }

/* ── Таблица данных §06 — канон «Модули» ────────────────────────────── */
/* Шапка: IBM Plex Mono КАПС 9.5px, трекинг .12em, border-bottom 1px solid #111827 */
/* Строка: высота 44px (row-pad-y 11px), разделитель 1px #F0F2F5, hover #F8FAFC —
   волна 1, добор repoint-нула edge-strong/edge-row/surface-hover на ярус 1 */
.data-table { width: 100%; border-collapse: collapse;
              font-family: var(--font-sans, var(--font-ui)); }
.data-table thead tr { border-bottom: 1px solid var(--edge-strong, var(--ink)); }
.data-table th {
  /* Волна 2 (09.09): было --surface-module (белый) — шапка расходилась с
     местным правилом каталога (серая только в его собственном <style>).
     Общее правило чинит разом: серая шапка на всех столах, каталог и прайсы
     совпадают, местный оверрайд каталога больше не нужен для цвета — только
     для sticky. */
  background: var(--thead-bg, var(--sub));
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--size-label, 9.5px);
  font-weight: var(--weight-regular, 400);
  letter-spacing: var(--track-label, .12em);
  text-transform: uppercase;
  color: var(--text-label, var(--ink-soft));
  text-align: left;
  padding: 0 var(--module-pad-x, 18px) var(--table-head-pad-b, 11px);
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--edge-row, var(--rule-soft)); }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table td {
  padding: var(--row-pad-y, 11px) var(--module-pad-x, 18px);
  height: var(--row-height, 44px);
  font-size: var(--size-row-title, 12.5px);
  font-weight: var(--weight-medium, 500);
  color: var(--text-data, var(--ink));
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--surface-hover, var(--row-hover-bg)); }
.data-table tbody tr.selected td { background: var(--surface-selected, var(--accent-soft)); }
/* Числовые и артикульные колонки — моно, вправо */
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.mono, .data-table th.mono {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
}
.data-table a { color: var(--accent, var(--wax)); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* ── Поиск §05: только нижняя кромка (border:0 сверху/слева/справа — радиус
   элементов --radius-2 не даёт видимого скругления при пустом фоне) ─────── */
.search-form { display: flex; gap: 8px; margin-bottom: 20px; align-items: flex-end; }
.search-form input {
  flex: 1;
  padding: 0 0 var(--field-pad-b, 8px);
  border: 0;
  border-bottom: 1px solid var(--edge-field, var(--rule));
  border-radius: var(--radius-2);
  background: transparent;
  font: inherit; font-size: var(--size-field-value, 13px);
  color: var(--text-data, var(--ink));
  outline: none;
}
.search-form input::placeholder { color: var(--text-placeholder, var(--ink-faint)); }
.search-form input:focus { border-bottom-color: var(--edge-focus, var(--accent)); }
.search-form select {
  padding: 0 24px var(--field-pad-b, 8px) 0;
  border: 0;
  border-bottom: 1px solid var(--edge-field, var(--rule));
  border-radius: var(--radius-2);
  background: transparent;
  font: inherit; font-size: var(--size-field-value, 13px);
  color: var(--text-data, var(--ink));
  outline: none; cursor: pointer; appearance: none;
}
.search-form select:focus { border-bottom-color: var(--edge-focus, var(--accent)); }
.search-form button {
  padding: var(--btn-pad-y, 9px) var(--btn-pad-x, 15px);
  background: transparent;
  color: var(--accent, var(--wax));
  border: 1px solid var(--accent, var(--wax));
  border-radius: var(--radius-2);
  font: inherit; font-size: var(--size-control, 11.5px);
  font-weight: var(--weight-medium, 500);
  cursor: pointer; white-space: nowrap;
}
.search-form button:hover {
  color: var(--accent-press, var(--wax-dark));
  border-color: var(--accent-press, var(--wax-dark));
  background: var(--accent-tint, var(--accent-soft));
}
.search-form button:active {
  background: var(--accent, var(--wax));
  color: var(--text-on-accent, var(--text-invert));
}

/* ── Карточка товара ─────────────────────────────────────────────────── */
.card-section { margin-bottom: 24px; }
.card-section h3 { font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .04em;
                   color: var(--text-faint); margin: 0 0 8px; }
.field-list { display: grid; grid-template-columns: 180px 1fr; gap: 4px 16px;
              font-size: var(--fs-13); }
.field-list dt { color: var(--text-muted); }
.field-list dd { margin: 0; }
/* Статусные бейджи мигрировали на Bootstrap-компонент .badge (этап 3):
   механика — bootstrap.min.css, вид — components.css с токенами. */

/* Шапка просмотра товара (detail.html): название + кнопка справа */
.doc-head-view { display: flex; align-items: flex-start; justify-content: space-between;
                 gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
                 margin-bottom: 16px; }
/* .product-title — роль ScreenHead h1 кита (AppShell.jsx:47):
   --type-screen-title (600 / 22px / Golos Text / leading-screen-title 1.15) +
   --track-screen-title (-.02em) + --text-heading — волна 1, доводка 08.09 */
.product-title { margin: 0; font: var(--type-screen-title);
                 letter-spacing: var(--track-screen-title);
                 color: var(--text-heading); }
/* .variants-line — роль meta под заголовком кита (AppShell.jsx:48):
   --type-meta (regular / 10.5px / IBM Plex Mono / leading-flat) + --text-secondary */
.variants-line { font: var(--type-meta); color: var(--text-secondary); margin-top: 4px; }
.variant-link { color: var(--accent); text-decoration: none; }
.variant-link.parent-link { font-size: 11.5px; }
.field-list-view { /* Одна колонка (одноколоночная раскладка решения 2026-07-31) */ }
.mono-code { font-family: var(--font-mono); }
.mono-list li { font-family: var(--font-mono); }
.stub-block { border: 1px dashed var(--line); border-radius: var(--radius-2);
              background: var(--bg); padding: 14px; font-size: 13px;
              color: var(--text-faint); text-align: center; }
.card-meta-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Панель чата ─────────────────────────────────────────────────────── */
/* Флекс-ребёнок .workspace: занимает всю высоту контейнера (= 100vh - header-h),
   не прокручивает страницу — скроллится только .chat-log внутри. */
.chatpanel { width: var(--chat-w); flex-shrink: 0; background: var(--panel);
             border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.chat-head { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line);
             font-weight: 600; font-size: var(--fs-13); }
.chat-head small { display: block; font-weight: 400; font-size: var(--fs-11); color: var(--text-faint); margin-top: 3px; }
/* Метка активной модели (C6): значение из потока «Агент» (chat_model_label). */
.chat-model { display: inline-block; margin-top: 5px; padding: 1px 8px; font-weight: 500;
              font-size: var(--fs-11); color: var(--text-muted); background: var(--hover-bg);
              border-radius: var(--radius-2); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; }
.chat-msg { margin-bottom: 12px; }
.chat-meta { font-size: var(--fs-11); color: var(--text-faint); margin-bottom: 2px; }
.chat-text { background: var(--hover-bg); border-radius: var(--radius-3); padding: 8px 10px;
             white-space: pre-wrap; word-break: break-word; font-size: var(--fs-13); }
.chat-msg.user .chat-text { background: var(--accent-soft); }
.chat-msg.assistant .chat-text { background: var(--hover-bg); }
.chat-group { border-top: 1px solid var(--line); }
.chat-group > summary { padding: 10px 14px; cursor: pointer; font-size: var(--fs-12); color: var(--accent); }
.chat-group .chat-log { flex: none; max-height: 180px; }
.chat-empty { color: var(--text-muted); font-size: var(--fs-12); line-height: 1.5; }
.chat-form { border-top: 1px solid var(--line); padding: 10px 12px; }
.chat-form textarea { width: 100%; resize: vertical; font: inherit; padding: 7px;
                      border: 1px solid var(--line); border-radius: var(--radius-3); font-size: var(--fs-13); }
.chat-form button { margin-top: 7px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-3);
                    background: var(--accent); color: var(--text-invert); font: inherit; cursor: pointer;
                    font-size: var(--fs-13); }
.chat-form button:hover { background: var(--accent-strong); }
/* Сжатие при нажатии — паспорт 3.9.3. Кнопка чата живёт вне канона (свои стили,
   сплошная заливка во всю ширину — решение Ильи 05.09: вид не трогаем, канон
   сделал бы её тише). Свойства названы поимённо, `all` запрещён.
   Зону нажатия ей не даём нарочно: 275 на 34 живьём — орган не мелкий,
   а правило узкое. */
.chat-form button { transition-property: transform, background; transition-duration: var(--dur-2); }
.chat-form button:active { transform: scale(0.96); }

/* ── Панель архива чатов ──────────────────────────────────────────────── */
/* Флекс-ребёнок .workspace (через display:contents на .chat-region).
   Выезжает вплотную слева от помощника; ширина = --chat-w (по решению Ильи). */
.chat-archive-panel { width: var(--chat-w); flex-shrink: 0;
                      background: var(--panel); border-left: 1px solid var(--line);
                      display: none; flex-direction: column; overflow: hidden; }
html.chat-archive-open .chat-archive-panel { display: flex; }
/* Когда помощник свёрнут, панель архива тоже прячем. */
html.chat-collapsed .chat-archive-panel { display: none !important; }

/* ── Сворачивание чата в ярлык ────────────────────────────────────────── */
/* .chat-region — обёртка Alpine (панель + ярлык); display:contents убирает её
   из раскладки, панель и ярлык остаются прямыми флекс-детьми .workspace.
   Состояние — класс на <html> (см. base.html + _chat.html), не x-cloak. */
.chat-region { display: contents; }

/* Кнопка «свернуть» в шапке чата (шеврон вправо, C6). Оформлена видимым
   квадратом-кнопкой: прежний прозрачный шеврон сливался с фоном шапки
   (--panel) и читался только на hover. Теперь — квадрат 28×28 с собственным
   фоном (--hover-bg), бордером и тенью: явно виден в покое, выделяется на hover. */
.chat-collapse { position: absolute; top: 8px; right: 10px;
                 display: flex; align-items: center; justify-content: center;
                 width: 28px; height: 28px; padding: 0;
                 background: var(--hover-bg); color: var(--text-muted);
                 border: 1px solid var(--line); border-radius: var(--radius-2);
                 font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
                 /* shadow-1=none по канону; отделение — уже через border */
                 transition: background .12s, color .12s, border-color .12s; }
.chat-collapse:hover { background: var(--accent-soft); color: var(--accent);
                       border-color: var(--accent); }

/* Ярлык «ЧАТ»: скрыт по умолчанию, виден в свёрнутом состоянии — у верхней
   кромки правого края, чуть больше двух строк шапки чата. */
.chat-tab { display: none; }
html.chat-collapsed .chatpanel { display: none; }
html.chat-collapsed .chat-tab {
  display: flex; align-items: center; justify-content: center; align-self: flex-start;
  flex-shrink: 0; margin-top: 12px; min-height: 50px; padding: 8px 11px;
  background: var(--panel); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius-3) 0 0 var(--radius-3);
  /* shadow-1=none по канону; отделение через border */
  color: var(--accent); font-weight: 600; font-size: var(--fs-12); letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; }
html.chat-collapsed .chat-tab:hover { background: var(--hover-bg); }

/* Alpine: скрываем x-cloak элементы до инициализации компонента. */
[x-cloak] { display: none !important; }

/* ── Экран аутентификации (base_auth.html) ───────────────────────────── */
/* Центрирование карточки входа; нет topnav/subnav/chat. */
.auth-screen { display: flex; align-items: center; justify-content: center;
               min-height: 100vh; background: var(--bg); }
.auth-card   { background: var(--panel); border: 1px solid var(--rule-strong);
               border-radius: var(--radius-3);
               /* shadow-2=none по канону; отделение через более тёмную рамку */
               padding: 40px 36px; width: 100%; max-width: 380px; }
.auth-card h1 { font-size: var(--fs-16); font-weight: 700; margin: 0 0 24px; }
.auth-card label { display: block; font-size: var(--fs-13); color: var(--text-muted);
                   margin-bottom: 4px; }
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"] { width: 100%; padding: 8px 10px; font: inherit;
                                  font-size: var(--fs-13); border: 1px solid var(--line);
                                  border-radius: var(--radius-2); margin-bottom: 14px;
                                  box-sizing: border-box; }
.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="email"]:focus { outline: var(--focus-ring); outline-offset: 1px; }
/* Площадь нажатия: строка «Запомнить меня» добирается до 40 (паспорт 3.9.3).
   Сама галочка системная и остаётся прежней, растёт только строка. */
.auth-card .auth-checkbox { display: flex; align-items: center; gap: 8px; min-height: 40px;
                             font-size: var(--fs-13); margin-bottom: 18px; }
.auth-card .auth-checkbox input { margin: 0; }
.auth-btn { display: block; width: 100%; padding: 9px; border: 0;
            border-radius: var(--radius-2); background: var(--accent);
            color: var(--text-invert); font: inherit; font-size: var(--fs-13);
            font-weight: 600; cursor: pointer; margin-bottom: 14px; }
.auth-btn:hover { background: var(--accent-strong); }
/* Сжатие при нажатии — паспорт 3.9.3. Кнопка входа живёт вне канона (свои
   стили, сплошная заливка во всю ширину — как у кнопки чата), вид не трогаем:
   берём только поведение. Свойства названы поимённо, `all` запрещён. */
.auth-btn { transition-property: transform, background; transition-duration: var(--dur-2); }
.auth-btn:active { transform: scale(0.96); }
.auth-link { font-size: var(--fs-12); color: var(--accent); cursor: pointer;
             background: none; border: none; padding: 0; text-decoration: underline; }
.auth-link:hover { color: var(--accent-strong); }
.auth-reset { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }