/* ─────────────────────────────────────────────────────────────────────────
   NETTO — дизайн-система админки
   ─────────────────────────────────────────────────────────────────────────
   Один слой токенов, один базовый слой, компоненты, затем два брейкпоинта:
   ≤960 — планшет (сайдбар становится верхней полосой), ≤640 — телефон.

   Правила, которых держится файл:
   · цвет только через токены; каждая пара «текст/фон» ≥ 4.5:1 в обеих темах
     (проверяется скриптом, таблица — в docs/design);
   · шесть размеров шрифта (--fs-*), отступы кратны 4 (--sp-*), три радиуса;
   · акцент жёлтый — выбор владельца; текст на нём всегда графитовый, белый
     на жёлтом не читается;
   · плоские кнопки, тени почти нет: спокойный минимализм, а не 3D.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Поверхности и текст */
  --bg: #f8f6f1;
  --surface: #ffffff;
  --surface-2: #f2efe6;
  --ink: #23221d;
  --ink-2: #5f5a4e;
  --ink-3: #6a6558;
  --line: #e6e1d5;
  --line-strong: #8e8775;

  /* Акцент. --accent-ink — тёмный янтарь для текста и ссылок на светлом. */
  --accent: #f2b400;
  --accent-hover: #e3a800;
  --accent-pressed: #c99500;
  --accent-soft: #fff1c9;
  --accent-ink: #6f4a00;
  --accent-text-on: #23221d;
  --link: #6f4a00;
  --focus: #6f4a00;

  /* Семантика: жёлтый в ней не участвует, чтобы «внимание» не путалось с брендом */
  --ok: #176e3f;
  --ok-soft: #e6f5ea;
  --warn: #9a4407;
  --warn-soft: #fdeedf;
  --danger: #b8262f;
  --danger-soft: #fbe8e8;
  --danger-text-on: #ffffff;
  --info: #1a5fa8;
  --info-soft: #e7f0fb;

  /* Предпросмотр WhatsApp: цвета самого мессенджера, чтобы менеджер видел
     сообщение таким, каким его увидит клиент. */
  --wa-bg: #efe7dd;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-ink: #111b21;
  --wa-meta: #4f5d66;
  --wa-chip: rgb(0 0 0 / 9%);

  /* Код (YAML): один и тот же вид у поля ввода и просмотра */
  --code-bg: #f2efe6;
  --code-ink: #23221d;

  /* Боковое меню и лента директа Instagram */
  --sidebar: var(--surface);
  --ig-bg: #f5f4f2;
  --ig-in: #ffffff;
  --ig-out: #ece4ff;
  --ig-ink: #1c1917;
  --ig-meta: #6b6560;

  --shadow: 0 1px 2px rgb(35 30 20 / 5%);
  --shadow-modal: 0 16px 48px rgb(35 30 20 / 18%);

  /* Типографика: шесть размеров, две высоты строки */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --lh: 1.5;
  --lh-tight: 1.25;

  /* Отступы кратно 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-pill: 999px;

  --card-pad: var(--sp-5);
  --sidebar-w: 248px;
}

/* Тёмная тема: значения одни и те же в двух блоках — автоматический выбор по
   системе и ручной переключатель. Менять синхронно. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Графит (26.10.2026, по деке NETTO и прежней тёмной теме Claude): основа почти чёрная,
       боковое меню и карточки на тон светлее, текст почти белый, акцент жёлтый #facc15 */
    --bg: #1c1a18;
    --sidebar: #262321;
    --surface: #262321;
    --surface-2: #312d2a;
    --ink: #f5f5f4;
    --ink-2: #d6d3d1;
    --ink-3: #a8a29e;
    --line: #37332f;
    --line-strong: #5f5a55;
    --accent: #facc15;
    --accent-hover: #fde047;
    --accent-pressed: #eab308;
    --accent-soft: #3a3214;
    --accent-ink: #fde047;
    --accent-text-on: #1c1917;
    --link: #fde047;
    --focus: #facc15;
    --ok: #4ade80;
    --ok-soft: #14291c;
    --warn: #fb923c;
    --warn-soft: #33200f;
    --danger: #f87171;
    --danger-soft: #3b1c1c;
    --danger-text-on: #1c1917;
    --info: #7cb8f2;
    --info-soft: #15263a;
    --wa-bg: #0b141a;
    --wa-out: #134f3c;
    --wa-in: #202c33;
    --wa-ink: #e9edef;
    --wa-meta: #b3bfc6;
    --wa-chip: rgb(255 255 255 / 14%);
    --ig-bg: #1a1817;
    --ig-in: #2e2a27;
    --ig-out: #3d2f5c;
    --ig-ink: #f5f5f4;
    --ig-meta: #b8b2ad;
    --code-bg: #161412;
    --code-ink: #e7e5e4;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%);
    --shadow-modal: 0 16px 48px rgb(0 0 0 / 55%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Графит (26.10.2026, по деке NETTO и прежней тёмной теме Claude): основа почти чёрная,
     боковое меню и карточки на тон светлее, текст почти белый, акцент жёлтый #facc15 */
  --bg: #1c1a18;
  --sidebar: #262321;
  --surface: #262321;
  --surface-2: #312d2a;
  --ink: #f5f5f4;
  --ink-2: #d6d3d1;
  --ink-3: #a8a29e;
  --line: #37332f;
  --line-strong: #5f5a55;
  --accent: #facc15;
  --accent-hover: #fde047;
  --accent-pressed: #eab308;
  --accent-soft: #3a3214;
  --accent-ink: #fde047;
  --accent-text-on: #1c1917;
  --link: #fde047;
  --focus: #facc15;
  --ok: #4ade80;
  --ok-soft: #14291c;
  --warn: #fb923c;
  --warn-soft: #33200f;
  --danger: #f87171;
  --danger-soft: #3b1c1c;
  --danger-text-on: #1c1917;
  --info: #7cb8f2;
  --info-soft: #15263a;
  --wa-bg: #0b141a;
  --wa-out: #134f3c;
  --wa-in: #202c33;
  --wa-ink: #e9edef;
  --wa-meta: #b3bfc6;
  --wa-chip: rgb(255 255 255 / 14%);
  --ig-bg: #1a1817;
  --ig-in: #2e2a27;
  --ig-out: #3d2f5c;
  --ig-ink: #f5f5f4;
  --ig-meta: #b8b2ad;
  --code-bg: #161412;
  --code-ink: #e7e5e4;
  --shadow: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow-modal: 0 16px 48px rgb(0 0 0 / 55%);
}

/* ── База ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; padding: 0; }
body {
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-md) / var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}
a { color: var(--link); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }

/* Единый язык фокуса: кольцо в цвете --focus у всего интерактивного */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Типографические утилиты ───────────────────────────────────────────── */
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--mono); font-size: .93em; font-variant-numeric: tabular-nums; }
.text-danger { color: var(--danger); }
/* Кикер: одна мелкая прописная подпись на весь интерфейс (eyebrow, заголовки
   групп меню, подписи секций). --ink-3 проходит 4.5:1 в обеих темах. */
.kicker, .eyebrow, .nav-label, .section-title, .tile-status, .login-kicker {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

/* Отступы по шкале. Старые имена оставлены как синонимы — ими пользуются
   соседние разделы, свёрстанные на прежних классах. */
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-2); } .mt-8 { margin-top: var(--sp-2); } .mt-10 { margin-top: var(--sp-3); } .mt-12 { margin-top: var(--sp-3); } .mt-14 { margin-top: var(--sp-4); }
.mb0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--sp-2); }
.row.end { align-items: flex-end; }
.row-between { justify-content: space-between; }
.right { margin-left: auto; }
.grow { flex: 1; min-width: 0; }
/* Ширины полей: с тегом в селекторе, чтобы перебить правило «поля в ряду не тянутся» */
.input-wide, input.input-wide { flex: 1; min-width: 160px; max-width: 420px; }
.w-sm, input.w-sm, select.w-sm { width: 120px; max-width: 100%; }
.w-md, input.w-md, select.w-md { width: 200px; max-width: 100%; }
.w-lg, input.w-lg, select.w-lg { width: 280px; max-width: 100%; }
.inline { display: inline; }

/* ── Каркас ────────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  z-index: 5;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.logo { display: flex; align-items: center; gap: var(--sp-3); margin: 0 var(--sp-2) var(--sp-4); }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--r-m);
  background: var(--accent);
  color: var(--accent-text-on);
  font-size: var(--fs-lg); font-weight: 800; line-height: 1;
}
.brand-copy { min-width: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 750; letter-spacing: .06em; }
.brand-copy small {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0;
}
.nav-label { margin: var(--sp-4) var(--sp-3) var(--sp-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 40px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  color: var(--ink-2); font-weight: 550;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.nav-item .ico { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; }
.nav-item .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .spacer { flex: 1; }
.sidebar-actions { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.sidebar-actions form { margin: 0; }
.sidebar-button { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }

.main { flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.container { max-width: 1160px; margin: 0 auto; }

.topbar { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.topbar-title { flex: 1; min-width: 0; }
.topbar h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.topbar .badge { margin-top: var(--sp-2); }

/* ── Карточки, секции, герой ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
  margin-bottom: var(--sp-4);
}
.card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.card .sub, .sub { color: var(--ink-2); }
.card > .sub { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.card.tight { padding: var(--sp-4); }

.section-head, .page-head, .section-heading {
  display: flex; align-items: flex-end; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}
.section-head:first-child, .page-head:first-child, .section-heading:first-child,
.alert + .section-head, .alert + .page-head { margin-top: 0; }
.card .page-head, .card .section-head { margin: 0 0 var(--sp-3); }
.section-head h2, .page-head h2, .section-heading h2 { font-size: var(--fs-xl); }
.section-head p, .page-head p, .section-heading p { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: var(--fs-md); }
.section-head .actions, .page-head .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; align-items: center; }
.section-head .grow, .page-head .grow { flex: 1; }
.section-title { margin: var(--sp-6) 0 var(--sp-2); }
.section-title:first-child { margin-top: 0; }

.hero {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
.hero-copy { flex: 1; min-width: 0; }
.hero h2 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; }
.hero p { margin: 0; max-width: 60ch; color: var(--ink-2); }
.hero-stats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.stat {
  min-width: 96px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-m);
  text-align: center;
}
.stat strong { display: block; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-sm); }

/* Кольцо успешности за сутки (обзор) */
.score-ring {
  display: grid; place-items: center;
  width: 112px; height: 112px; flex: 0 0 112px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--line) 0);
}
.score-ring > div {
  display: grid; place-items: center; gap: 0;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--surface); text-align: center;
}
.score-ring strong { font-size: var(--fs-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.score-ring span { color: var(--ink-3); font-size: var(--fs-xs); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--sp-4);
}
.card .tiles { margin-bottom: var(--sp-3); }
.card .tile { background: var(--surface-2); border-color: transparent; }
.tile .num { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .lbl { margin-top: var(--sp-1); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35; }
.tile-status { margin-bottom: var(--sp-2); }
.tile.t-ok .num { color: var(--ok); }
.tile.t-warn .num { color: var(--warn); }
.tile.t-danger .num { color: var(--danger); }
.tile.t-info .num { color: var(--info); }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-m);
  background: var(--accent); color: var(--accent-text-on);
  font-size: var(--fs-md); font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { background: var(--accent-pressed); }
.btn.ok { background: var(--accent); color: var(--accent-text-on); }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.ghost:active { background: var(--line); }
.btn.danger { background: var(--danger); color: var(--danger-text-on); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--ink)); }
.btn.sm { min-height: 32px; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-s); font-size: var(--fs-sm); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* Состояние загрузки: текст прячем, поверх — спиннер того же цвета */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--accent-text-on); border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.ghost.is-loading::after { border-color: var(--ink); border-right-color: transparent; }
.btn.danger.is-loading::after { border-color: var(--danger-text-on); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Фишка-кнопка: быстрые подстановки, переключатели */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 28px; padding: 2px var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 550; cursor: pointer;
}
.chip:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* Сегментированный переключатель (тип шаблона) */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-pill); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
}
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Значки ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px; padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}
.badge.is-ok, .badge.ok, .badge.b-done, .badge.b-mode-real { background: var(--ok-soft); color: var(--ok); }
.badge.is-warn, .badge.b-waiting, .badge.b-mode-mock { background: var(--warn-soft); color: var(--warn); }
.badge.is-danger, .badge.danger, .badge.b-error { background: var(--danger-soft); color: var(--danger); }
.badge.is-info, .badge.b-running { background: var(--info-soft); color: var(--info); }
.badge.is-neutral, .badge.b-stopped { background: var(--surface-2); color: var(--ink-2); }
.badge.is-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge.lower { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.b-running .dot, .badge.is-info .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ── Уведомления ───────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface-2); color: var(--ink);
}
.alert > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert.a-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert.a-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.alert.a-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert.a-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert.small { padding: var(--sp-2) var(--sp-3); }
.alert ul { margin: var(--sp-1) 0 0; padding-left: 18px; }
.alert .grow { flex: 1; }
.alert-close { background: none; border: 0; padding: 0 var(--sp-1); cursor: pointer; color: inherit; font-size: var(--fs-lg); line-height: 1; opacity: .7; }
.alert-close:hover { opacity: 1; }

/* Пустое состояние: что это, почему пусто, что сделать дальше */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-2);
}
.empty .big { font-size: var(--fs-2xl); line-height: 1; color: var(--ink-3); }
.empty strong { color: var(--ink); font-size: var(--fs-lg); font-weight: 600; }
.empty p { margin: 0; max-width: 46ch; }
.empty .btn { margin-top: var(--sp-2); }
.empty.compact { padding: var(--sp-4); }

/* ── Таблицы, списки ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--card-pad)); padding: 0 var(--card-pad); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.tbl td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num, .tbl td.mono { font-variant-numeric: tabular-nums; }
.tbl .num { text-align: right; }
.tbl th.num { text-align: right; }
.th-narrow { width: 100px; }
.tbl td.wrap { max-width: 320px; overflow-wrap: anywhere; }

.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

pre.code, .mermaid-box {
  margin: 0; padding: var(--sp-4); overflow: auto;
  background: var(--code-bg); color: var(--code-ink);
  border: 1px solid var(--line); border-radius: var(--r-m);
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.5;
}
pre.code.wrap { white-space: pre-wrap; }
.mermaid-box svg { max-width: 100%; }

/* Чек-лист подключения: бейдж · описание · действие */
.checklist { display: flex; flex-direction: column; }
.checklist-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.checklist-row:first-child { border-top: none; padding-top: 0; }
.checklist-badge { min-width: 80px; justify-content: center; }
.checklist-body { flex: 1; min-width: 160px; }
.checklist-row form { gap: var(--sp-2); }

.steps-line { display: flex; flex-direction: column; }
.step-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.step-row:last-child { border-bottom: none; }
.step-row .t { color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.step-row .body { flex: 1; min-width: 0; }
.step-row .body > * + * { margin-left: var(--sp-2); }
.step-row .body > div { margin-left: 0; margin-top: var(--sp-1); }

.list { margin: 0; padding-left: 20px; }
.list li { margin: var(--sp-1) 0; }

/* ── Формы ─────────────────────────────────────────────────────────────── */
/* :where — нулевая специфичность, чтобы .w-sm и .row > input могли задать ширину */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])),
select, textarea {
  min-height: 40px; width: 100%; max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
select { padding-right: var(--sp-6); }
textarea { min-height: 96px; resize: vertical; line-height: var(--lh); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-2); color: var(--ink-3); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; vertical-align: -3px; accent-color: var(--accent-pressed); cursor: pointer; }
select.select-sm { min-height: 32px; width: auto; padding: var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
/* В ряду поля не тянутся на всю ширину; :where — чтобы input.w-sm и т.п. могли задать свою */
.row > :where(input:not([type="checkbox"]):not([type="radio"]), select) { width: auto; }
.row > :where(select) { min-width: 140px; }

.field { display: block; margin-bottom: var(--sp-4); }
.field-inline { margin-bottom: 0; }
.field > span:first-child, .field > label:first-child, .field label.lbl {
  display: block; margin-bottom: var(--sp-1);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
}
.field > span.hint:first-child { font-weight: 500; }
.field .hint { display: block; margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.field .err { display: block; margin-top: var(--sp-1); color: var(--danger); font-size: var(--fs-sm); font-weight: 550; }
.field .err:empty { display: none; }
.field textarea { min-height: 80px; }
/* Флажок и подпись в одну строку */
.field:has(> input[type="checkbox"]) { display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap; font-size: var(--fs-md); }
.field:has(> input[type="checkbox"]) > input { margin-top: 3px; }
.field:has(> input[type="checkbox"]) .hint { flex-basis: 100%; margin-left: 24px; }
.label-inline { font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }

textarea.yaml {
  min-height: 320px; padding: var(--sp-4);
  border-radius: var(--r-m); border-color: var(--line);
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.5; white-space: pre;
}
.tpl-name {
  width: auto; min-width: 200px; max-width: 100%; min-height: 36px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-s);
  background: transparent; font-size: var(--fs-lg); font-weight: 650;
}
.tpl-name:hover { border-color: var(--line); }
.tpl-name:focus { background: var(--surface); }

/* ── Диалоги ───────────────────────────────────────────────────────────── */
.modal {
  width: min(560px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-modal);
}
.modal::backdrop { background: rgb(20 16 8 / 45%); backdrop-filter: blur(2px); }
.modal.wide { width: min(760px, calc(100vw - 32px)); }
.modal.xl { width: min(980px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: var(--fs-lg); }
.modal-head .sub { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.modal-close { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink-3); font-size: var(--fs-xl); line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body { padding: var(--sp-4) var(--sp-5); max-height: min(72vh, 680px); overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); }
.modal-foot .grow { flex: 1; }
/* Ошибка формы целиком (ключи Meta не заданы) — рядом с кнопкой, а не у поля */
.modal-foot .err { color: var(--danger); font-size: var(--fs-sm); font-weight: 550; }
.modal-foot .err:empty { display: none; }

/* ── Аватары, сотрудники ───────────────────────────────────────────────── */
.avatar, .chat-ava, .mgr-ava {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-weight: 700; font-size: var(--fs-md);
}
.mgr-ava { width: 28px; height: 28px; font-size: var(--fs-sm); }
.mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.mgr {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer;
}
.mgr:hover { border-color: var(--line-strong); }
.mgr.on { border-color: var(--accent-pressed); background: var(--accent-soft); }
.mgr.stale { border-color: var(--danger); background: var(--danger-soft); }
.mgr.stale .mgr-ava { background: var(--danger); color: var(--danger-text-on); }
.mgr-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mgr-name { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-mail { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-cnt { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.auto-row { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; }
.auto-row input { margin-top: 3px; }
.auto-row .sub { display: block; font-size: var(--fs-sm); margin-top: 2px; }
.active-tpl { border-color: var(--accent-pressed); }

.avatar-edit { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.avatar-edit .pic { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); flex: 0 0 auto; }
.avatar-edit .pic.empty { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink-3); font-size: var(--fs-xl); font-weight: 700; }

/* QR для привязки номера */
.qr-pair { align-items: flex-start; gap: var(--sp-5); }
.qr-box { flex: 0 0 auto; width: 220px; }
.qr-box img { width: 220px; height: 220px; padding: var(--sp-2); background: #fff; border-radius: var(--r-m); }
.qr-placeholder { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); border-radius: var(--r-m); color: var(--ink-2); }
.qr-copy { flex: 1; min-width: 240px; }
.pairing-code { font-size: var(--fs-xl); letter-spacing: 3px; margin: var(--sp-1) 0; }

/* ── Песочница ─────────────────────────────────────────────────────────── */
.sandbox-lead { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface); }
.sandbox-lead .head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.task-block, .form-block, .timer-block { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); border-left: 3px solid; }
.task-block { background: var(--info-soft); border-color: var(--info); }
.form-block { background: var(--surface-2); border-color: var(--accent); }
.timer-block { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); font-weight: 600; }
.task-block .q, .form-block .q { font-weight: 600; margin-bottom: var(--sp-2); }
.skeleton { display: inline-block; height: 14px; width: 60%; border-radius: var(--r-s); background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Вход, публичные страницы, ошибки ──────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.login-card { width: min(400px, 100%); padding: var(--sp-6); margin: 0; }
.login-card .logo { justify-content: center; margin: 0 0 var(--sp-5); }
.login-card .brand-copy small { max-width: none; }
.login-kicker { margin-bottom: var(--sp-1); }
.login-title { margin: 0 0 var(--sp-5); font-size: var(--fs-xl); }

.public { display: flex; justify-content: center; padding: var(--sp-6) var(--sp-4); }
.public-card { width: 100%; max-width: 480px; margin: 0; height: fit-content; }
.public-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.public-card .done { text-align: center; padding: var(--sp-5) 0; }
.public-card .done .big { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.public-brand { margin-top: var(--sp-4); text-align: center; }
.public-brand .kicker { display: inline; }

.error-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.error-card { width: min(460px, 100%); padding: var(--sp-6); margin: 0; text-align: center; }
.error-card .logo { justify-content: center; margin: 0 0 var(--sp-5); }
.error-code { font-size: var(--fs-2xl); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.error-card h1 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-xl); }
.error-card p { color: var(--ink-2); }
.error-card .row { justify-content: center; margin-top: var(--sp-5); }

.prose { max-width: 720px; margin: 0 auto; padding: var(--sp-7) var(--sp-4); font-size: var(--fs-lg); line-height: 1.6; }
.prose h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.prose h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-2); }
.prose p, .prose ul { margin: 0 0 var(--sp-3); }
.prose ul { padding-left: 22px; }
.prose li { margin: var(--sp-1) 0; }
.prose .box { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0; background: var(--surface); }

/* ── Процессы: импорт ──────────────────────────────────────────────────── */
.import-card { display: grid; grid-template-columns: minmax(200px, .6fr) minmax(320px, 1.4fr); gap: var(--sp-5); scroll-margin-top: var(--sp-5); }
.import-copy h2 { margin-top: var(--sp-1); }
.import-steps { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.import-steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.import-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-s); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; }
.import-form { min-width: 0; }
.import-result { grid-column: 1 / -1; }
.import-result:empty { display: none; }
.process-table td:first-child { min-width: 200px; }
.filter-card { padding: var(--sp-3) var(--card-pad); }

/* ── Чаты ──────────────────────────────────────────────────────────────── */
.chat-layout {
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--sp-4);
  height: calc(100dvh - 168px); min-height: 480px;
}
.chat-list {
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
}
.chat-search { position: sticky; top: 0; z-index: 1; padding: var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--line); color: inherit; }
.chat-item:hover { background: var(--surface-2); text-decoration: none; }
.chat-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.chat-info { flex: 1; min-width: 0; }
.chat-top, .chat-bottom { display: flex; align-items: center; gap: var(--sp-2); }
.chat-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-time { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chat-last { flex: 1; color: var(--ink-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unread {
  display: flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-text-on); font-size: var(--fs-xs); font-weight: 700;
}
.chat-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.chat-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.chat-back { display: none; }
.chat-title { font-size: var(--fs-lg); font-weight: 650; }
.chat-feed { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--wa-bg); }
.chat-feed .empty, .chat-pane > .empty { margin: auto; }
.msg { display: flex; }
.msg.in { justify-content: flex-start; }
.msg.out { justify-content: flex-end; }
.bubble {
  max-width: min(560px, 82%); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m) var(--r-m) var(--r-m) var(--sp-1);
  background: var(--wa-in); color: var(--wa-ink); line-height: 1.4;
  box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
}
.msg.out .bubble { background: var(--wa-out); border-radius: var(--r-m) var(--r-m) var(--sp-1) var(--r-m); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-img { max-width: 240px; max-height: 240px; border-radius: var(--r-s); display: block; margin-bottom: var(--sp-1); }
.msg-audio { max-width: 240px; margin-bottom: var(--sp-1); }
.msg-video { max-width: 240px; border-radius: var(--r-s); display: block; margin-bottom: var(--sp-1); }
.msg-file { display: inline-block; margin-bottom: var(--sp-1); color: var(--wa-ink); text-decoration: underline; }
.msg-meta { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; margin-top: 2px; font-size: var(--fs-xs); color: var(--wa-meta); }
.msg-meta .tick-read { color: var(--info); }
.chat-reply { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--line); }
.chat-reply input { flex: 1; }
.chat-hint { margin: var(--sp-1) var(--sp-3) var(--sp-3); }

/* Вкладки над чатами: WhatsApp и Instagram в одном окне, как вкладки браузера (26.10.2026) */
.chat-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.chat-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--ink-2); font-weight: 600;
}
.chat-tab:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.chat-tab.active { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.chat-tab .tab-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-layout.with-tabs { height: calc(100dvh - 214px); }
.chat-ava.ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); color: #fff; }
.chat-feed.ig { background: var(--ig-bg); }
.chat-feed.ig .bubble { background: var(--ig-in); color: var(--ig-ink); }
.chat-feed.ig .msg.out .bubble { background: var(--ig-out); }
.chat-feed.ig .msg-meta { color: var(--ig-meta); }
.msg-err { color: var(--danger); font-weight: 600; }

/* Вкладки страницы (Аналитика: «Процессы и WhatsApp» | «Посты и ссылки») */
.page-tabs { display: flex; gap: var(--sp-1); margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--line); }
.page-tab { padding: var(--sp-2) var(--sp-4); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; }
.page-tab:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); border-radius: var(--r-s) var(--r-s) 0 0; }
.page-tab.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ── Шаблоны сообщений ─────────────────────────────────────────────────── */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tpl-card { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: var(--sp-4); }
.tpl-card.is-off { opacity: .72; }
.tpl-card .tpl-head { display: flex; gap: var(--sp-2); align-items: flex-start; }
.tpl-card h3 { flex: 1; min-width: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.tpl-card h3 .mono { font-size: var(--fs-md); }
.tpl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-meta { color: var(--ink-3); font-size: var(--fs-sm); }
.tpl-card .tpl-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; flex-wrap: wrap; }
.tpl-card .tpl-foot form { margin: 0; }
.tpl-card .wa { flex: 1; }
input.tpl-search { width: 260px; max-width: 100%; }
:where(.section-head, .page-head) .actions > :where(input:not([type="checkbox"])) { width: auto; }
.tpl-none:not(.is-visible) { display: none; }

/* Пузырь WhatsApp — как увидит клиент */
.wa { padding: var(--sp-3); border-radius: var(--r-m); background: var(--wa-bg); }
.wa-bubble {
  position: relative; max-width: 100%;
  margin-left: 12%; padding: var(--sp-2) var(--sp-3) 18px;
  border-radius: var(--r-s) 0 var(--r-s) var(--r-s);
  background: var(--wa-out); color: var(--wa-ink);
  font-size: var(--fs-md); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.wa-bubble::before {
  content: ""; position: absolute; top: 0; right: -7px;
  border: 7px solid transparent; border-top-color: var(--wa-out); border-left-color: var(--wa-out); border-radius: 0 0 0 4px;
}
.wa-bubble.in { margin-left: 0; margin-right: 12%; border-radius: 0 var(--r-s) var(--r-s) var(--r-s); background: var(--wa-in); }
.wa-bubble.in::before { right: auto; left: -7px; border-top-color: var(--wa-in); border-left-color: transparent; border-right-color: var(--wa-in); }
.wa-bubble .wa-header { display: block; font-weight: 650; margin-bottom: var(--sp-1); }
.wa-bubble .wa-footer { display: block; margin-top: var(--sp-1); color: var(--wa-meta); font-size: var(--fs-sm); }
.wa-bubble .wa-time { position: absolute; right: var(--sp-2); bottom: 3px; color: var(--wa-meta); font-size: var(--fs-xs); }
.wa-body.is-empty::after { content: "Текст сообщения появится здесь"; color: var(--wa-meta); }
.var-chip { padding: 0 3px; border-radius: 4px; background: var(--wa-chip); color: inherit; }
.var-chip.unknown { text-decoration: underline dotted; }
.wa-caption { margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.wa-caption .grow { flex: 1; }
.bubble-preview { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Редактор шаблона: слева поля, справа предпросмотр */
.tpl-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: var(--sp-5); align-items: start; }
.tpl-editor .tpl-preview { position: sticky; top: 0; }
.tpl-editor .form-grid { grid-template-columns: 1fr; gap: 0; }
.tpl-editor .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.tpl-editor textarea[name="body"] { min-height: 140px; }
.tpl-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-2); }
.tpl-toolbar .kicker { margin-right: var(--sp-1); }
.tpl-count { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tpl-count.is-over { color: var(--danger); font-weight: 600; }
.tpl-rules { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); }
.tpl-rules ul { margin: var(--sp-1) 0 0; padding-left: 18px; }
.tpl-rules li { margin: 2px 0; }
.tpl-rules li.is-bad { color: var(--danger); font-weight: 550; }
.tpl-rules li.is-good { color: var(--ok); }
.tpl-lead { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.tpl-lead input { width: 140px; min-height: 32px; }
.tpl-meta-text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.tpl-meta-text code { display: block; margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--code-bg); color: var(--code-ink); font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Подстановки: панель раскрывается в потоке, чтобы не обрезаться прокруткой диалога */
.var-picker { display: block; }
.var-panel { margin-top: var(--sp-2); padding: var(--sp-2); max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.var-search { min-height: 34px; margin-bottom: var(--sp-1); background: var(--surface-2); border-color: transparent; }
.var-group { padding: var(--sp-2) var(--sp-2) 2px; }
.var-item { display: flex; align-items: baseline; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border: 0; border-radius: var(--r-s); background: none; text-align: left; cursor: pointer; }
.var-item:hover { background: var(--accent-soft); color: var(--accent-ink); }
.var-label { flex: 1; }
.var-code { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.var-item:hover .var-code { color: inherit; }

/* ── Рассылки ──────────────────────────────────────────────────────────── */
/* Статусы рассылки: paused — «требует внимания» (жёлтый), draft — ещё не
   запущена (нейтральный, как stopped). running/done/error уже есть выше. */
.badge.b-paused { background: var(--warn-soft); color: var(--warn); }
.badge.b-draft { background: var(--surface-2); color: var(--ink-2); }
/* Полоса прогресса в списке: доля отправленных от всех получателей */
.progress { height: 6px; min-width: 120px; margin: var(--sp-2) 0; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); transition: width .3s ease; }
.bc-actions { gap: var(--sp-2); }
.bc-actions form { margin: 0; }
.bc-pager { justify-content: center; margin-top: var(--sp-4); }
/* Причина паузы — одной строкой с многоточием, полный текст на странице рассылки */
.bc-reason { color: var(--danger); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Выбор файла CSV: общее правило форм исключает type=file, поэтому рамка отдельно */
.field input[type="file"] { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--ink); }
.filter-row input[type="search"] { width: 200px; }

/* ── Планшет ≤960: сайдбар → верхняя полоса, чат в столбик ─────────────── */
@media (max-width: 960px) {
  :root { --card-pad: var(--sp-4); }
  .layout { display: block; }
  .sidebar {
    position: sticky; top: 0; width: 100%; height: auto;
    flex-direction: row; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .logo { margin: 0; }
  .brand-copy { display: none; }
  .sidebar-nav {
    flex: 1; flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-label, .sidebar .spacer { display: none; }
  .nav-item { min-height: 36px; padding: var(--sp-1) var(--sp-3); white-space: nowrap; font-size: var(--fs-sm); }
  .sidebar-actions { flex-direction: row; padding: 0; border: 0; margin-left: auto; }
  .sidebar-actions .nav-item { width: 36px; padding: 0; justify-content: center; }
  .sidebar-actions .nav-item span:not(.ico) { display: none; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .kv { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  .kv dt { padding-top: var(--sp-2); }
  .kv dt:first-child { padding-top: 0; }
  .hero { flex-direction: column; align-items: flex-start; }
  .import-card { grid-template-columns: 1fr; }
  .import-result { grid-column: auto; }
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  .chat-list { max-height: 320px; }
  .chat-pane { min-height: 60dvh; }
  .tpl-editor { grid-template-columns: 1fr; }
  .tpl-editor .tpl-preview { position: static; }
}

/* ── Телефон ≤640 ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .main { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
  .topbar { margin-bottom: var(--sp-4); }
  .topbar h1 { font-size: var(--fs-xl); }
  .card, .hero { border-radius: var(--r-m); }
  .hero { padding: var(--sp-4); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .num { font-size: var(--fs-xl); }
  .section-head, .page-head, .section-heading { flex-direction: column; align-items: stretch; }
  .section-head .actions, .page-head .actions { margin-left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .row > :where(input:not([type="checkbox"]):not([type="radio"]), select),
  .w-sm, input.w-sm, select.w-sm, .w-md, input.w-md, select.w-md, .w-lg, input.w-lg, select.w-lg,
  .input-wide, input.input-wide, input.tpl-search { width: 100%; max-width: 100%; }
  .modal-head, .modal-body, .modal-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .modal-body { max-height: calc(100dvh - 200px); }
  .tpl-grid { grid-template-columns: 1fr; }
  .qr-pair { flex-direction: column; }
  .checklist-row { flex-wrap: wrap; }
  /* Чат: список и диалог — два экрана, диалог на всю высоту, ответ прилипает снизу */
  .chat-layout { display: block; }
  .chat-layout.has-chat .chat-list { display: none; }
  .chat-layout:not(.has-chat) .chat-pane { display: none; }
  .chat-list { height: calc(100dvh - 150px); max-height: none; }
  .chat-pane { height: calc(100dvh - 150px); min-height: 400px; }
  .chat-layout.with-tabs { height: auto; }
  .chat-layout.with-tabs .chat-list, .chat-layout.with-tabs .chat-pane { height: calc(100dvh - 196px); }
  .chat-tab { flex: 1; justify-content: center; padding: var(--sp-2); }
  .chat-back { display: inline-flex; }
  .chat-hint { display: none; }
  .bubble { max-width: 88%; }
  .wa-bubble { margin-left: 6%; }
}

/* ============================================================
   ВНУТРИ pulse (html.embedded, класс ставит head.ejs, когда страница открыта
   в рамке раздела «Процессы»). Бесшовно: своей боковой колонки и шапки нет —
   разделы движка стали вкладками pulse; фон прозрачный — просвечивает фон
   pulse; высоту рамки задаёт содержимое (admin.js шлёт её родителю), поэтому
   прокрутка одна — внешняя. Палитра выше — та же, что в ui.css pulse.
   ============================================================ */
html.embedded, html.embedded body { background: transparent; min-height: 0; }
html.embedded .layout { min-height: 0; display: block; }
html.embedded .sidebar { display: none; }
html.embedded .main { padding: 0 0 var(--sp-4); }
html.embedded .container { max-width: none; }
html.embedded .topbar { display: none; }
html.embedded .alert { margin-top: 0; }

/* Плитки показателей в рамке pulse — вид KPI-плитки pulse (ui.css .kpi):
   градиентная карточка, подпись капителью сверху, число крупно, акцентная линия. */
html.embedded .tiles { gap: 14px; }
html.embedded .tile, html.embedded .card .tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  padding: 16px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: none;
}
html.embedded .tile::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); opacity: .85; }
html.embedded .tile.t-ok::after { background: var(--ok); } html.embedded .tile.t-warn::after { background: var(--warn); }
html.embedded .tile.t-danger::after { background: var(--danger); } html.embedded .tile.t-info::after { background: var(--info); }
html.embedded .tile .lbl { order: -1; margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
html.embedded .tile .num { font-size: 26px; font-weight: 680; letter-spacing: -1px; }
html.embedded .tile .tile-status { order: 1; margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }
html[data-theme="light"].embedded .tile, html[data-theme="light"].embedded .card .tile { background: #fff; }

/* Чаты в разделе WhatsApp pulse (18.09.2026): высоту рамки задаёт pulse — вся свободная высота
   экрана; окно чатов заполняет её целиком, без обрезки и второй прокрутки. На узкой рамке
   (телефон, планшет) — два экрана: список, затем диалог с кнопкой «назад». */
html.embedded .chat-layout { height: calc(100dvh - var(--sp-4) - 2px); min-height: 320px; }
html.embedded .chat-layout.with-tabs { height: calc(100dvh - var(--sp-4) - 50px); }
@media (max-width: 900px) {
  html.embedded .chat-layout { display: block; height: auto; min-height: 0; }
  html.embedded .chat-layout.has-chat .chat-list { display: none; }
  html.embedded .chat-layout:not(.has-chat) .chat-pane { display: none; }
  html.embedded .chat-list, html.embedded .chat-pane { height: calc(100dvh - var(--sp-4) - 2px); max-height: none; min-height: 320px; }
  html.embedded .chat-back { display: inline-flex; }
  html.embedded .chat-hint { display: none; }
}