/*
 * RU: Кабинет организации — вкладки «Сообщения» и «Аналитика» (ДО8.1–ДО8.6, 26.09.2026, public/js/biz-inbox.js).
 *     Здесь только то, чего нет в общем словаре `.bc-*` (biz-commerce.css) и в стилях переписки (ad-chat.css): раскладка
 *     строки ящика и открытого диалога, точка цвета метки, полосы графика по дням и полоска доли источника.
 *
 *     Только токены `--k-*` из kartivi.css (храповик `node scripts/check-theme.mjs`). Цвет метки — выбор организации,
 *     а не тема: его ставит разметка инлайн-стилем, а в этом файле литералов цвета нет. Высота полосы и ширина доли —
 *     числа в переменных `--bi-h` и `--bi-w`, тоже из разметки. Страница на 375 px вбок не прокручивается: строки ящика
 *     перестраиваются в две колонки, таблицы листаются в `.bc-table-wrap`.
 *
 * EN: The organisation cabinet — the "Сообщения" and "Аналитика" tabs (DO8.1–DO8.6, 2026-09-26, public/js/biz-inbox.js).
 *     Only what the shared `.bc-*` vocabulary (biz-commerce.css) and the conversation styles (ad-chat.css) lack: the inbox
 *     row and open dialogue layout, the label colour dot, the per-day chart bars and the source share bar.
 *
 *     Only `--k-*` tokens from kartivi.css (the `node scripts/check-theme.mjs` ratchet). A label colour is the
 *     organisation's choice, not the theme: the markup sets it as an inline style, and this file holds no colour literals.
 *     The bar height and share width are numbers in the `--bi-h` and `--bi-w` variables, also from the markup. The page
 *     never scrolls sideways at 375 px: inbox rows reflow into two columns, tables scroll inside `.bc-table-wrap`.
 */

/* RU: Контейнер вкладки — контейнер для @container ниже: ширина панели кабинета не равна ширине окна (сбоку меню
       разделов), и медиазапрос по окну разложил бы диалог в две колонки там, где места на них нет.
   EN: The tab wrapper is the container for @container below: the cabinet panel is narrower than the window (the section
       menu sits beside it), and a window media query would split the dialogue into two columns where they do not fit. */
.bi {
  min-width: 0;
  container-type: inline-size;
}

/* RU: `.bc-btn` и строки с display: flex/grid перебивают атрибут hidden — скрытие задано явно, с весом выше их класса.
   EN: `.bc-btn` and flex/grid rows override the hidden attribute — hiding is explicit, weighted above their class. */
.bi [hidden] {
  display: none;
}

/* RU: Текст только для читалки: число непрочитанных, название шаблона у кнопки «Удалить».
   EN: Screen-reader-only text: the unread count, a template name on its "Удалить" button. */
.bi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ——— Шапка ящика / Inbox header ——— */

.bi-speed {
  margin: 0 0 var(--k-s-1);
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
}

.bi-summary .bc-stats {
  margin: var(--k-s-3) 0 0;
}

/* ——— Строка ящика / Inbox row ——— */

/* RU: Сетка «фото · текст · время»; minmax(0, …) даёт превью обрезаться многоточием, а не распирать строку.
   EN: A "photo · text · time" grid; minmax(0, …) lets the preview truncate with an ellipsis rather than stretch the row. */
.bc-item-open.bi-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--k-s-3);
}

.bi-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bi-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bi-who {
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  overflow-wrap: anywhere;
}

.bi-preview {
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-1);
  margin: var(--k-s-1) 0 0;
}

.bi-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--k-s-1);
  color: var(--k-text-subtle);
  font-size: var(--k-fs-1);
  line-height: var(--k-lh-cap);
  white-space: nowrap;
}

.bi-unread {
  min-width: 1.5em;
  padding: 0 var(--k-s-1);
  border-radius: var(--k-r-pill);
  background: var(--k-brand);
  color: var(--k-text-on-accent);
  font-weight: 700;
  text-align: center;
}

/* RU: Метка — нейтральная плашка с точкой; цвет точки ставит разметка (background-color), здесь — запасной тон.
   EN: A label is a neutral chip with a dot; the markup sets the dot colour (background-color), here is the fallback tone. */
.bi-label {
  gap: var(--k-s-1);
}

.bi-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--k-text-subtle);
}

/* ——— Открытый диалог / Open dialogue ——— */

.bi-thread,
.bi-thread-main,
.bi-thread-side {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-3);
  min-width: 0;
}

.bi-thread-side > .bc-card {
  margin: 0;
}

/* RU: Колонка — flex, и без этого «Показать ранние» растянулся бы на всю ширину, как поле ввода.
   EN: The column is flex, and without this "Показать ранние" would stretch full width like an input field. */
.bi-thread-main > .bc-btn {
  align-self: flex-start;
}

.bi-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--k-s-3);
}

.bi-head-copy {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-1);
  min-width: 0;
}

.bi-head-copy .bc-item-title {
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
}

.bi-head-copy .bc-item-title:focus-visible {
  outline: none;
  box-shadow: var(--k-focus);
}

.bi-head-copy .bi-tags {
  margin: 0;
}

.bi-thread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--k-s-3);
}

/* RU: Колонка управления и заметок справа — только когда самой панели хватает места на ленту и колонку.
   EN: The controls and notes column on the right — only when the panel itself has room for the thread and the column. */
@container (min-width: 52rem) {
  .bi-thread-grid {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  }
}

/* RU: Шаблон и кнопки у поля ответа — ряд с переносом: на 375 px выбор шаблона встаёт над кнопками.
   EN: The template picker and buttons at the reply field — a wrapping row: at 375 px the picker sits above the buttons. */
.bi-template-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--k-s-2);
}

.bi-template-row .bc-field {
  flex: 1 1 14rem;
}

.bi-template-row .bc-actions {
  margin: 0;
}

/* RU: Заметка отличается от сообщения фоном «внимание» и пунктиром: это внутренняя запись, а не реплика в переписке.
   EN: A note differs from a message by the "attention" background and a dashed border: an internal record, not a reply. */
.bi-note {
  border-style: dashed;
  background: var(--k-warn-soft);
}

.bi-note .bc-actions {
  margin: 0;
}

.bi-legend {
  width: 100%;
  margin-bottom: var(--k-s-1);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  font-weight: 600;
}

/* RU: Фокус на образце цвета: сама радиокнопка скрыта, поэтому кольцо рисуется на подписи-образце.
   EN: Focus on a colour swatch: the radio itself is hidden, so the ring is drawn on the swatch label. */
.bi .bc-swatch {
  position: relative;
}

.bi .bc-swatch:has(input:focus-visible) {
  box-shadow: var(--k-focus);
}

/* ——— Аналитика / Analytics ——— */

.bi-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-2);
  margin: 0 0 var(--k-s-2);
}

.bi-card-head h4 {
  margin: 0;
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
  font-weight: 700;
}

/* RU: Полосы по дням: высота — процент от самого «просмотрового» дня (переменная из разметки). Ноль — тонкая линия
       цвета границы, чтобы пустой день был виден как день, а не как дыра.
   EN: Per-day bars: the height is a percentage of the busiest day (a variable from the markup). Zero is a thin line in
       the border colour so an empty day reads as a day rather than a gap. */
.bi-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 8rem;
  padding-top: var(--k-s-2);
  border-bottom: 1px solid var(--k-border);
}

.bi-chart.is-dense {
  gap: 1px;
}

.bi-bar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bi-h, 0%);
  min-height: 1px;
  border-radius: var(--k-r-1) var(--k-r-1) 0 0;
  background: var(--k-brand);
}

.bi-bar.is-zero {
  background: var(--k-border);
}

.bi-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--k-s-2);
  margin: var(--k-s-1) 0 var(--k-s-2);
  color: var(--k-text-subtle);
  font-size: var(--k-fs-1);
  line-height: var(--k-lh-cap);
}

/* RU: Полоска доли источника рядом с процентом; ширина — переменная из разметки.
   EN: The source share bar next to the percentage; the width is a variable from the markup. */
.bi-share {
  display: flex;
  align-items: center;
  gap: var(--k-s-2);
  min-width: 9rem;
  white-space: nowrap;
}

.bi-meter {
  display: block;
  flex: 1 1 4rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--k-r-pill);
  background: var(--k-surface-3);
}

.bi-meter > span {
  display: block;
  width: var(--bi-w, 0%);
  height: 100%;
  background: var(--k-brand);
}

/* RU: На телефоне время и счётчик непрочитанного уходят под текст строки — третья колонка съела бы ширину превью.
   EN: On a phone the time and unread counter move under the row text — a third column would eat the preview width. */
@media (max-width: 560px) {
  .bc-item-open.bi-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bi-meta {
    grid-column: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}