/* быстрозвон — продуктовый слой поверх бренда «Естественный интеллект».
   Подключать ПОСЛЕ vendor/naint-tokens.css и fonts.css.

   Правила бренда, соблюдаемые здесь без исключений:
     • прямые углы: радиусы не задаются вообще (умолчание — 0),
       единственное исключение — skiplink, 8px из tokens.css;
     • теней нет: ни одного правила тени в файле;
     • единственный акцент — teal, красного в палитре нет;
     • обводка 2px teal — только у кнопки и фокуса, 1px --line — рамки комнаты;
     • статус никогда не кодируется только цветом (рядом слово или иконка).

   Каждая цветовая пара помечена комментарием
   `contrast: --a on --b = X.XX (текст|нетекст|декор)`
   — формат для scripts/check-contrast.mjs (T-101).
   Порог: текст 4.5, нетекст 3.0 (WCAG 2.1 AA 1.4.3/1.4.11).
   `декор` — линии, которые не являются границей контрола и не несут смысл
   в одиночку (порог 1.4.11 к ним не применяется). */

:root {
  --accent-on-light: #0a7a68;   /* contrast: --accent-on-light on --white = 5.25 (текст) */
  --on-accent: #000;            /* ИСПРАВЛЕНИЕ бренда: contrast: --on-accent on --teal = 7.43 (текст);
                                   было --white on --teal = 2.83 — провал AA */
  --line: #2a2a2a;              /* contrast: --line on --black = 1.46 (декор: рамка тайла) */
  --tile-bg: var(--carbon);     /* тайл тёмный в обеих темах: видео всегда на чёрном */
  /* тайл тёмный в обеих темах: текст на нём — всегда --white, а не --ink
     (в светлой теме --ink чёрный и на угле даёт 1.21) */
  --tile-ink: var(--white);     /* contrast: --tile-ink on --tile-bg = 17.40 (текст) */
  --font-ui: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Шкала UI из ADR-0009 (кратность 2). Значение — пара `font-size / line-height`,
     рассчитанная на шорткат `font: <weight> var(--ui-NN) var(--font-ui)`. */
  --ui-12: 12px / 16px;
  --ui-14: 14px / 20px;
  --ui-16: 16px / 24px;
  --ui-20: 20px / 28px;
}

/* tokens.css объявляет --on-accent: var(--white) и в :root, и в [data-theme="dark"].
   Специфичность :root и [data-theme] одинаковая (0,1,0), решает порядок подключения —
   дублируем явно, чтобы исправление не зависело от порядка файлов. */
[data-theme="dark"] {
  --on-accent: #000;            /* contrast: --on-accent on --teal = 7.43 (текст) */
}

[data-theme="light"] {
  --line: #e7e5e4;              /* contrast: --line on --white = 1.26 (декор: рамка тайла) */
}

/* ------------------------------------------------------------------ тайл */

.ui-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-width: 0;
  background: var(--tile-bg);
  color: var(--white);          /* contrast: --white on --tile-bg = 17.40 (текст) */
  border: 1px solid var(--line);
}

.ui-tile > video,
.ui-tile > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* «говорит»: 1px teal по периметру + бейдж/иконка в разметке — не только цветом */
.ui-tile--speaking {
  border-color: var(--accent);  /* contrast: --accent on --tile-bg = 6.16 (нетекст) */
}

.ui-tile__name {
  margin: 8px;
  font: 500 var(--ui-14) var(--font-ui);
  color: var(--white);          /* contrast: --white on --tile-bg = 17.40 (текст) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Субтитр: подложка фиксированно тёмная, поэтому и текст фиксированно белый —
   --ink в светлой теме стал бы чёрным и пропал. Стоит в потоке над именем,
   чтобы не перекрывать его. Подложка только затемняет фон, поэтому пара
   считается по худшему случаю (без неё = 17.40, с ней ≈ 20.14). */
.ui-tile__cap {
  align-self: stretch;
  padding: 6px 8px;
  background: rgba(0, 0, 0, .72);
  color: var(--white);          /* contrast: --white on --tile-bg = 17.40 (текст) */
  font: 400 var(--ui-14) var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ сетка */

.ui-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px;
  background: var(--black);
  min-height: 0;
}

.ui-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ui-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2×2 */
.ui-grid[data-count="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3×3 */
.ui-grid[data-count="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* 4×4 */

.ui-grid[data-count="1"] .ui-tile { aspect-ratio: 16 / 9; }
.ui-grid[data-count="2"] .ui-tile,
.ui-grid[data-count="3"] .ui-tile { aspect-ratio: 16 / 10; }
.ui-grid[data-count="4"] .ui-tile,
.ui-grid[data-count="9"] .ui-tile,
.ui-grid[data-count="16"] .ui-tile { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------- управление */

.ui-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--graphite);
  color: var(--white);                /* contrast: --white on --graphite = 19.17 (текст) */
  border-top: 1px solid var(--line);  /* contrast: --line on --graphite = 1.34 (декор) */
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);         /* contrast: --accent on --graphite = 6.79 (текст) */
  font: 600 var(--ui-16) var(--font-ui);
  text-transform: lowercase;    /* правило бренда: кнопки — строчными */
  cursor: pointer;
}

.ui-btn:hover,
.ui-btn:focus-visible,
.ui-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);      /* contrast: --on-accent on --accent = 7.43 (текст) */
}

.ui-btn:focus-visible {
  outline: 2px solid var(--accent);  /* contrast: --accent on --graphite = 6.79 (нетекст) */
  outline-offset: 2px;
}

/* В светлой теме teal на белом = 2.83 — ни текстом, ни границей контрола нельзя;
   берём затемнённый акцент из DESIGN.md §2. */
[data-theme="light"] .ui-btn {
  border-color: var(--accent-on-light);
  color: var(--accent-on-light);       /* contrast: --accent-on-light on --white = 5.25 (текст) */
}

[data-theme="light"] .ui-btn:hover,
[data-theme="light"] .ui-btn:focus-visible,
[data-theme="light"] .ui-btn[aria-pressed="true"] {
  background: var(--accent-on-light);
  color: var(--white);                 /* contrast: --white on --accent-on-light = 5.25 (текст) */
  outline-color: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25 (нетекст) */
}

/* «покинуть звонок»: красного в палитре нет — белая заливка, чёрный текст */
.ui-btn--danger {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);          /* contrast: --black on --white = 21.00 (текст) */
}

.ui-btn--danger:hover,
.ui-btn--danger:focus-visible {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--black);          /* contrast: --black on --mist = 13.82 (текст) */
}

/* в светлой теме белая заливка слилась бы с белым холстом — отделяем контуром */
[data-theme="light"] .ui-btn--danger {
  border-color: var(--carbon);  /* contrast: --carbon on --white = 17.40 (нетекст) */
}

/* (0,3,0) `[data-theme="light"] .ui-btn:hover` красит заливку в акцент — необратимую
   кнопку перекрываем явно: заливка остаётся белой, текст чёрным */
[data-theme="light"] .ui-btn--danger:hover,
[data-theme="light"] .ui-btn--danger:focus-visible,
[data-theme="light"] .ui-btn--danger[aria-pressed="true"] {
  background: var(--white);
  border-color: var(--mist);    /* contrast: --mist on --white = 1.52 (декор: контур заливки) */
  color: var(--black);          /* contrast: --black on --white = 21.00 (текст) */
}

/* ------------------------------------------------------- метки и статус */

/* агент в сетке: teal-текст, без обводки (обводка в бренде — только у кнопки) */
.ui-badge-ai {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--accent);         /* contrast: --accent on --tile-bg = 6.16 (текст) */
  font: 600 var(--ui-12) var(--font-mono);
  text-transform: lowercase;
  letter-spacing: .04em;
}

[data-theme="light"] .ui-badge-ai {
  color: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25 (текст) */
}

/* Тайл тёмный в обеих темах (--tile-bg = --carbon): --accent-on-light на --carbon =
   3.31 — провал AA. Внутри тайла возвращаем брендовый teal; правило идёт последним
   при равной специфичности (0,2,0). */
.ui-tile .ui-badge-ai {
  color: var(--accent);         /* contrast: --accent on --tile-bg = 6.16 (текст) */
}

/* -------------------------------------------------- панель контролов: светлая тема */

/* Панель `.ui-controls` затемнена в ОБЕИХ темах (background: var(--graphite)),
   а правила светлой темы выше красят её содержимое затемнённым акцентом для
   белого холста: --accent-on-light на --graphite = 3.65 — провал AA (axe:
   `color-contrast [serious]`, T-242). Внутри панели возвращаем брендовый teal,
   как это уже сделано для тайла. `:not(.ui-btn--danger)` — «покинуть» остаётся
   белой заливкой с чёрным текстом (светлые правила ниже в файле не трогаем). */
[data-theme="light"] .ui-controls .ui-btn:not(.ui-btn--danger) {
  border-color: var(--accent);  /* contrast: --accent on --graphite = 6.79 (нетекст) */
  color: var(--accent);         /* contrast: --accent on --graphite = 6.79 (текст) */
}

[data-theme="light"] .ui-controls .ui-btn:not(.ui-btn--danger):hover,
[data-theme="light"] .ui-controls .ui-btn:not(.ui-btn--danger):focus-visible,
[data-theme="light"] .ui-controls .ui-btn:not(.ui-btn--danger)[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);      /* contrast: --on-accent on --accent = 7.43 (текст) */
  outline-color: var(--accent); /* contrast: --accent on --graphite = 6.79 (нетекст) */
}

/* статус панели: тот же провал 3.65, лечится тем же teal-текстом */
[data-theme="light"] .ui-controls .ui-badge-ai {
  color: var(--accent);         /* contrast: --accent on --graphite = 6.79 (текст) */
}

/* «идёт запись»: teal-квадрат 8×8 + слово — статус не кодируется одним цветом */
.ui-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 var(--ui-12) var(--font-ui);
  /* цвет слова не фиксируем: он наследуется от контекста и остаётся контрастным —
     contrast: --white on --tile-bg = 17.40, --white on --graphite = 19.17,
     --ink on --surface = 21.00 (текст) */
  text-transform: lowercase;
}

.ui-rec::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--accent);    /* contrast: --accent on --black = 7.43, on --tile-bg = 6.16, on --graphite = 6.79 (нетекст) */
}

/* в светлой теме на белом teal = 2.83 < 3.0 для нетекста — квадрат затемняем */
[data-theme="light"] .ui-rec::before {
  background: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25, on --graphite = 3.65 (нетекст) */
}

/* ------------------------------------------------------------------- чат */

.ui-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 360px;
  max-width: 100%;
  padding: 12px;
  overflow-y: auto;
  background: var(--surface);   /* contrast: --ink on --surface = 21.00 (текст) */
  color: var(--ink);
  font: 400 var(--ui-14) var(--font-ui);
  border-left: 1px solid var(--line);
}

/* реплика — тёмная плашка в обеих темах, поэтому текст фиксированно белый */
.ui-msg {
  padding: 8px 10px;
  max-width: 100%;
  background: var(--carbon);
  color: var(--white);          /* contrast: --white on --carbon = 17.40 (текст) */
  font: 400 var(--ui-14) var(--font-ui);
  overflow-wrap: anywhere;
}

/* время реплики — моно, приглушённое, но всё ещё выше AA */
.ui-msg time,
.ui-msg .ui-mono {
  color: var(--mist);           /* contrast: --mist on --carbon = 11.46 (текст) */
}

/* ------------------------------------------------------ цифры, ID, таймкоды */

.ui-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- skiplink */

/* Единственный радиус в слое — 8px из бренда (--radius-skiplink). */
.ui-skip {
  position: absolute;
  left: -9999px;
  padding: 8px 12px;
  background: var(--skiplink);
  color: var(--black);          /* contrast: --black on --skiplink = 13.82 (текст) */
  font: 600 var(--ui-14) var(--font-ui);
  text-decoration: none;
  border-radius: 8px;           /* = --radius-skiplink из tokens.css; буквально 8px — критерий T-106 */
}

.ui-skip:focus {
  left: 8px;
  top: 8px;
  z-index: 100;
}

/* ------------------------------------ поля ввода, диалог, тост, ссылка (T-116) */

/* Продуктовые токены блока. Новых цветов не заводим: красного в палитре бренда
   нет (docs/DESIGN.md §3), поэтому «ошибка/опасно» — самый контрастный цвет
   палитры (--white, как --danger-surface в DESIGN §4), «внимание» — --mist,
   «инфо» — единственный акцент teal. Статус никогда не кодируется одним цветом:
   у ошибки есть «!» и текст, у тоста — слово «инфо»/«внимание»/«ошибка». */
:root {
  --danger: var(--white);
  --danger-on-dark: var(--white);
  --info: var(--accent);
  --warn: var(--mist);
  --error: var(--white);
}

/* ------------------------------------------------------------------ поля */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ui-field__label {
  font: 500 var(--ui-14) var(--font-ui);
  color: var(--ink);            /* contrast: --ink on --surface = 21.00 (текст) */
}

/* Поле остаётся чёрным в обеих темах (как тайл), поэтому текст фиксированно
   белый: --ink в светлой теме чёрный и на --black дал бы 1.00. */
.ui-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;                 /* палец: минимум 44px */
  padding: 12px;
  border: 1px solid var(--line);   /* contrast: --line on --black = 1.46 (декор: контур поля, опознаётся по label и подсказке) */
  border-radius: 0;             /* бренд: прямые углы */
  background: var(--black);
  color: var(--white);          /* contrast: --white on --black = 21.00 (текст) */
  font: 400 var(--ui-16) var(--font-ui);
  appearance: none;
}

.ui-input::placeholder {
  color: var(--mist);           /* contrast: --mist on --black = 13.82 (текст) */
}

/* фокус — 2px teal: у кнопки и фокуса это единственное исключение из «1px рамки» */
.ui-input:focus-visible {
  outline: 2px solid var(--accent);  /* contrast: --accent on --black = 7.43 (нетекст) */
  outline-offset: 2px;
}

[data-theme="light"] .ui-input:focus-visible {
  outline-color: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25 (нетекст) */
}

/* невалидное поле: рамка 2px (толщина — второй, нецветовой признак) + знак «!» */
.ui-input[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--danger);  /* contrast: --danger on --black = 21.00 (нетекст) */
}

.ui-field__hint {
  font: 400 var(--ui-12) var(--font-ui);
  color: var(--mist);           /* contrast: --mist on --black = 13.82 (текст) */
}

[data-theme="light"] .ui-field__hint {
  color: var(--carbon);         /* contrast: --carbon on --white = 17.40 (текст) */
}

/* ошибка — не только цветом: слева знак «!», справа формулировка безличная */
.ui-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: 500 var(--ui-12) var(--font-ui);
  color: var(--danger-on-dark); /* contrast: --danger-on-dark on --carbon = 17.40 (текст) */
}

[data-theme="light"] .ui-field__error {
  color: var(--carbon);         /* contrast: --carbon on --white = 17.40 (текст) */
}

.ui-field__mark {
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--danger);    /* contrast: --danger on --carbon = 17.40 (нетекст) */
  color: var(--black);          /* contrast: --black on --white = 21.00 (текст) */
  font: 600 11px / 16px var(--font-mono);
  text-align: center;
}

/* в светлой теме белый квадрат слился бы с --surface — инвертируем */
[data-theme="light"] .ui-field__mark {
  background: var(--black);     /* contrast: --black on --white = 21.00 (нетекст) */
  color: var(--white);          /* contrast: --white on --black = 21.00 (текст) */
}

/* ---------------------------------------------------------------- диалог */

.ui-dialog {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: auto;
  padding: 20px;
  border: 1px solid var(--line);   /* contrast: --line on --surface = 1.46 (декор: контур диалога) */
  background: var(--surface);
  color: var(--ink);            /* contrast: --ink on --surface = 21.00 (текст) */
  font: 400 var(--ui-14) var(--font-ui);
  box-shadow: none;             /* бренд: теней нет */
}

/* подложка только затемняет — отделяет диалог без тени */
.ui-dialog::backdrop {
  background: rgba(0, 0, 0, .72); /* contrast: rgba(0, 0, 0, .72) on --surface (декор) */
}

.ui-dialog__title {
  margin: 0 0 8px;
  font: 600 var(--ui-20) var(--font-ui);
  color: var(--ink);            /* contrast: --ink on --surface = 21.00 (текст) */
}

.ui-dialog__body {
  margin: 0 0 16px;
  font: 400 var(--ui-14) var(--font-ui);
}

.ui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line); /* contrast: --line on --surface = 1.46 (декор: разделитель) */
}

/* ------------------------------------------------------------------ тост */

/* Плашка снизу слева: тёмная в обеих темах (как .ui-msg), без радиуса, без тени.
   Вариант виден и по цвету полосы, и по слову в .ui-toast__mark. */
.ui-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 12px;
  border-left: 1px solid var(--info); /* contrast: --info on --carbon = 6.16 (нетекст) */
  background: var(--carbon);
  color: var(--white);          /* contrast: --white on --carbon = 17.40 (текст) */
  font: 400 var(--ui-14) var(--font-ui);
}

.ui-toast--warn {
  border-left-color: var(--warn); /* contrast: --warn on --carbon = 11.46 (нетекст) */
}

.ui-toast--error {
  border-left-color: var(--error); /* contrast: --error on --carbon = 17.40 (нетекст) */
}

/* цвет слова наследуется от плашки и остаётся контрастным:
   contrast: --white on --carbon = 17.40 (текст) */
.ui-toast__mark {
  flex: none;
  font: 600 var(--ui-12) var(--font-mono);
  text-transform: lowercase;
  letter-spacing: .04em;
}

/* ----------------------------------------------------------------- ссылка */

.ui-link {
  color: var(--accent);          /* contrast: --accent on --black = 7.43 (текст) */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* hover — 2px подчёркивание: признак не только цвета */
.ui-link:hover {
  text-decoration-thickness: 2px;
}

.ui-link:focus-visible {
  outline: 2px solid var(--accent);  /* contrast: --accent on --black = 7.43 (нетекст) */
  outline-offset: 2px;
}

/* в светлой теме брендовый teal на белом = 2.83:1 — берём затемнённый акцент */
[data-theme="light"] .ui-link {
  color: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25 (текст) */
}

[data-theme="light"] .ui-link:focus-visible {
  outline-color: var(--accent-on-light); /* contrast: --accent-on-light on --white = 5.25 (нетекст) */
}

/* --------------------------------------------------------------- реакции */

/* Панель реакций: пять кнопок в ряду управления (T-226). */
.ui-reactions-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ui-reactions-bar__button {
  min-width: 32px;
  min-height: 32px;
  padding: 0 4px;
  background: var(--graphite);
  color: var(--white);                 /* contrast: --white on --graphite = 19.17 (текст) */
  border: 1px solid var(--line);       /* contrast: --line on --graphite = 1.34 (декор) */
  font: 400 var(--ui-16) var(--font-ui);
  cursor: pointer;
}

/* Окно троттлинга: кнопка гаснет, но остаётся кликабельной — клик внутри окна
   отбрасывает `Throttle`, а не копится в браузере до конца окна (T-248). */
.ui-reactions-bar__button[aria-disabled="true"] {
  opacity: .5;                         /* состояние видно, отказ озвучен словами */
}

.ui-reactions-bar__button:focus-visible {
  outline: 2px solid var(--accent);    /* contrast: --accent on --graphite = 6.29 (нетекст) */
  outline-offset: 2px;
}

.ui-reactions-bar__hint {
  color: var(--ink-muted);        /* contrast: --ink-muted on --graphite = 12.30 (текст) */
  font: 400 var(--ui-14) var(--font-ui);
}

/* Оверлей: правый нижний угол, ВНЕ сетки плиток — видео не перекрывается. */
.ui-reactions {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;                /* клики проходят к кнопкам под оверлеем */
  z-index: 2;
}

.ui-reactions__item {
  font: 400 var(--ui-20) var(--font-ui);
  animation: ui-reaction-rise 2.5s ease-out both;
}

@keyframes ui-reaction-rise {
  from { transform: translateY(12px); opacity: 0; }
  10%  { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Без анимации всплытия: реакция появляется сразу (доступность). */
@media (prefers-reduced-motion: reduce) {
  .ui-reactions__item {
    animation: none;
  }
}