/* Общая типографика и геометрия «Проверятора документов» (llm/ui).
 *
 * Единый источник переменных и базовых правил для chat.html, room.html,
 * admin.html: цвета, шрифтовая шкала, шкала отступов, радиусы, шапка,
 * кнопки/иконки, диалоги, класс .meta для технических подписей и
 * пульсирующий фокус .ann-focus на маркере в документе.
 *
 * Подключается <link rel="stylesheet" href="common.css"> ПЕРЕД инлайн-
 * <style> страницы — страничные правила дополняют/уточняют общие.
 * Работает и по file:// (тот же каталог).
 */

/* Темы оформления: три тёмные пастельные (серая/коричневая/оранжевая).
 * Тема = переопределение переменных палитры на :root[data-theme="…"];
 * атрибут data-theme на <html> ставит theme.js (localStorage checker-theme).
 * Дефолт (без атрибута / "gray") — нейтральная серая. Сигнальные цвета
 * (--ok/--err/--warn, severity в документе) — общие, темой НЕ меняются.
 * Доп. переменные для rgba()-подсветок и производных поверхностей:
 * --accent-rgb/--text-rgb (rgb-формы для rgba(var(--accent-rgb),α)),
 * --hover-bg/--hover-border (hover кнопок-иконок), --msg-user-bg (пузырь
 * пользователя), --code-bg (подложка code). */
:root {
  /* палитра — тема «серая», нейтральная тёмная пастель (дефолт) */
  --bg: #161719; --panel: #1e2023; --panel2: #26282c; --border: #33363c;
  --text: #dcdee2; --dim: #9a9ea6; --accent: #8793a3; --accent2: #a7b1bf;
  --accent-rgb: 135,147,163; --text-rgb: 220,222,226;
  --ok: #3fb96b; --err: #d9534f; --warn: #d9a03f; --think: #7b7f88;
  /* текст сообщений чата — сероватый, заметно темнее белого */
  --msg-text: #a6a9af;
  /* имена участников/заголовки сообщений — чуть ярче текста, но не белые */
  --who: #c5c8ce;
  /* hover/active кнопок-иконок и микро-кнопок */
  --hover-bg: #2a2d32; --hover-border: #3c4046;
  /* пузырь сообщения пользователя; подложка inline-кода */
  --msg-user-bg: #3a4048; --code-bg: #101113;
  /* плейсхолдер полей ввода: лишь чуть светлее фона поля (--panel2),
   * заметно темнее основного текста — не читается как введённый текст.
   * Первое значение — fallback (≈ color-mix(--dim 40%, --panel2)). */
  --placeholder: #4e5258;
  --placeholder: color-mix(in srgb, var(--dim) 40%, var(--panel2));
  /* шрифт: один стек на весь проект */
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* шкала размеров */
  --fs-meta: 11px;   /* технические подписи */
  --fs-small: 12px;  /* вторичный текст, кнопки в карточках */
  --fs-base: 13px;   /* основной текст */
  --fs-h1: 15px;     /* заголовки экрана/диалогов */
  /* шкала отступов */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  /* радиусы */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  /* геометрия каркаса */
  --header-pad: var(--sp-2) var(--sp-4);   /* шапка: 8px 16px */
  --ctrl-h: 44px;                          /* высота контролов инпут-бара */
}

/* тема «коричневая» — тёплый тёмный шоколад, явно теплее серой */
:root[data-theme="brown"] {
  --bg: #221a13; --panel: #2c231a; --panel2: #382c21; --border: #4a3a2b;
  --text: #e6d9c6; --dim: #b09a80; --accent: #c08a52; --accent2: #d4a876;
  --accent-rgb: 192,138,82; --text-rgb: 230,217,198;
  --think: #8d7c68;
  --msg-text: #b6a892; --who: #d8c9b4;
  --hover-bg: #382d21; --hover-border: #524130;
  --msg-user-bg: #523e28; --code-bg: #17110c;
}

/* тема «оранжевая» — заметная тёмная терракота */
:root[data-theme="orange"] {
  --bg: #261409; --panel: #331c0e; --panel2: #402512; --border: #573519;
  --text: #f0dcc4; --dim: #c29b72; --accent: #e08b3e; --accent2: #f2a860;
  --accent-rgb: 224,139,62; --text-rgb: 240,220,196;
  --think: #a07d58;
  --msg-text: #c4a887; --who: #e2cba8;
  --hover-bg: #40260f; --hover-border: #5e3a1a;
  --msg-user-bg: #6b3d16; --code-bg: #180e07;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg); color: var(--text);
  font: var(--fs-base)/1.5 var(--font);
}

/* --- шапка (одинаковая на всех экранах) -------------------------------- */
header {
  display: flex; align-items: center; gap: 10px;
  padding: var(--header-pad);
  background: var(--panel); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
header h1 { font-size: var(--fs-h1); font-weight: 600; }
header a { color: var(--accent2); font-size: var(--fs-small); text-decoration: none; }
header a:hover { text-decoration: underline; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dot.off { background: var(--err); }
.sub { color: var(--dim); font-size: var(--fs-small); }
.spacer { flex: 1; }

/* --- базовые контролы --------------------------------------------------- */
select, button {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 5px 10px; font-size: var(--fs-base); cursor: pointer;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

/* Единый класс кнопок-иконок: инлайн-SVG (icons.js), монохром —
 * цвет от currentColor, hover/active меняют только яркость/фон. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; width: 30px; height: 30px; padding: 0;
  background: var(--panel2); color: var(--dim);
  border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; flex-shrink: 0;
}
.icon-btn svg { display: block; }
.icon-btn:hover { color: var(--text); background: var(--hover-bg); border-color: var(--hover-border); }
.icon-btn:active { background: var(--hover-bg); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* Микро-кнопка 24×24: без рамки и заливки — только иконка currentColor,
 * hover/active — лёгкая подсветка фона. Общий класс (шапка, инпут-бар). */
.micro-btn {
  width: 24px; height: 24px; padding: 0; background: none; border: none;
  border-radius: var(--r-sm); color: var(--dim); cursor: pointer;
  flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.micro-btn svg { display: block; }
.micro-btn:hover { color: var(--text); background: rgba(var(--text-rgb),.08); }
.micro-btn:active { background: rgba(var(--text-rgb),.14); }
.micro-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* плейсхолдеры всех полей ввода (чат, поиск диалогов, админка/комната):
 * приглушены до --placeholder; opacity: 1 — отменяет дефолт Firefox (0.54) */
::placeholder { color: var(--placeholder); opacity: 1; }

/* --- технические подписи: мелко, блёкло, без жирного -------------------- */
.meta {
  font-size: var(--fs-meta);
  color: var(--dim);
  opacity: 0.6;
  font-weight: 400;
}

/* --- диалоги ------------------------------------------------------------ */
dialog {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; min-width: 320px;
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h2, dialog h3 { font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
dialog .field { margin-bottom: 10px; display: flex; flex-direction: column; gap: var(--sp-1); }
dialog .field label { font-size: var(--fs-small); color: var(--dim); }
dialog input {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 7px 10px; font: inherit;
}
dialog input:focus { outline: none; border-color: var(--accent); }
dialog .actions { display: flex; gap: var(--sp-2); margin-top: 14px; }
dialog .actions .primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- фокус на маркере в документе (клик по находке/цитате) -------------- */
@keyframes ann-focus-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  40% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .55); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.ann-focus {
  outline: 3px solid var(--accent) !important;
  outline-offset: 1px;
  animation: ann-focus-pulse 1.1s ease-in-out 3;
}