@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400..800&family=JetBrains+Mono:wght@400..600&display=swap');

/* ═════════════════════════════════════════════════════════════════════════
   core/ui/v5.css — вигляд панелі "v5" (напрямок A «Нічна зміна»).

   Вмикається DASHBOARD_SKIN = "v5" у config.py бота; тоді сторінка вантажить
   цей файл ПІСЛЯ app.css, а `<body>` отримує клас `v5` поруч із `sk`.
   Без прапорця файл не вантажиться взагалі — решта ботів не бачить жодного
   байта звідси.

   Правила гри (ті самі, що стережуть app.css у tests/test_stylesheet.py):
     • усе скоуплено під `body.v5` — без класу файл не чіпає нічого;
     • кольори — лише в двох блоках токенів нижче; правила беруть var();
     • жодного @media: ширину описують класи `body.narrow` (≤860) і
       `body.mid` (≤1180), які ставить app.js; «менше руху» — клас
       `body.reduce-motion`, який ставить v5.js;
     • один селектор — одне визначення кольору.

   Джерело значень — docs/mockups/v5/index.html, рядки 11-31: світла тема =
   `:root` + `.t-a-light`, темна = `:root` + `.t-a-dark`. Значення перенесено
   дослівно.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── токени: світла тема ─────────────────────────────────────────────── */

body.v5 {
  --v5-bg: #f3efec;
  --v5-panel: #ffffff;
  --v5-panel2: #f7f3f0;
  --v5-ink: #15100e;
  --v5-ink2: #46403c;
  --v5-ink3: #6a645f;
  --v5-line: #e6dfda;
  --v5-accent: #c93a17;
  --v5-accent-ink: #ffffff;
  --v5-bot: #ff5a36;
  --v5-bot-ink: #b8360f;
  --v5-mgr: #15100e;
  --v5-auto: #cfc8c2;
  --v5-hero: #15100e;
  --v5-hero2: #221a17;
  --v5-hero-ink: #fff4ee;
  --v5-hero-ink2: #cdb2a8;
  --v5-glow: rgba(255,90,54,.45);
  --v5-hmgr: #fff4ee;
  --v5-ok: #1f7a52;
  --v5-warn: #9a6410;
  --v5-bad: #c23a30;
  /* текст на червоному лічильнику — у мокапі білий в обох темах */
  --v5-on-bad: #ffffff;
  --v5-ch-site: #3b3d42;
  /* кольори людей (аватарки менеджерів): перші три — з мокапу, решта в тон;
     клас v5-p1…v5-p6 за стабільним хешем логіна (core/dashboard_v5.py) */
  --v5-p1: #6b44c9;
  --v5-p2: #17707f;
  --v5-p3: #a4481f;
  --v5-p4: #2f7a45;
  --v5-p5: #b0306a;
  --v5-p6: #3d5a99;
  --v5-p-ink: #ffffff;
  /* на темному героєві: дельти й «решта» мусять читатись і в світлій темі
     (≥4.5:1 для тексту, ≥3:1 для смуги) — тож значення темної теми */
  --v5-hero-up: #4fd19a;
  --v5-hero-down: #ff6b5e;
  --v5-hero-rest: #8a807b;
  --v5-shadow: 0 1px 0 rgba(13,13,15,.04), 0 10px 30px -14px rgba(13,13,15,.14);
  /* чати: ініціали гостя на кольорі каналу, тіні меню й шухляди — з мокапу */
  --v5-ini-ink: #ffffff;
  --v5-menu-shadow: 0 20px 50px -20px rgba(0,0,0,.4);
  --v5-drawer-shadow: -30px 0 60px -30px rgba(0,0,0,.35);
  /* затемнення під модалкою */
  --v5-scrim: rgba(21,16,14,.42);

  --v5-r: 22px;
  --v5-r-s: 14px;
  --v5-pill: 999px;

  --v5-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --v5-body: "Manrope", system-ui, sans-serif;
  --v5-mono: "JetBrains Mono", ui-monospace, monospace;
  --v5-num: var(--v5-display);

  /* канали: кольори брендів, тож однакові в обох темах (крім сайту) */
  --v5-ig1: #feda75;
  --v5-ig2: #fa7e1e;
  --v5-ig3: #d62976;
  --v5-ig4: #4f5bd5;
  --v5-ch-telegram: #2aabee;
  --v5-ch-live_chat: var(--v5-ch-site);
  --v5-ch-viber: #7360f2;
  --v5-ch-whatsapp: #25d366;
  --v5-ch-glyph: #ffffff;

  color-scheme: light;
}

/* ── токени: темна тема ──────────────────────────────────────────────── */

:root[data-theme="dark"] body.v5 {
  --v5-bg: #0b0a0c;
  --v5-panel: #151317;
  --v5-panel2: #1d1b20;
  --v5-ink: #f6f1ec;
  --v5-ink2: #cfc8c1;
  --v5-ink3: #a39c96;
  --v5-line: #2c292f;
  --v5-accent: #ff5a36;
  --v5-accent-ink: #140806;
  --v5-bot: #ff5a36;
  --v5-bot-ink: #ff7a5c;
  --v5-mgr: #f3e6d8;
  --v5-auto: #4a464e;
  --v5-hero: #1a100e;
  --v5-hero2: #251714;
  --v5-hero-ink: #fff4ee;
  --v5-hero-ink2: #d1b3a8;
  --v5-glow: rgba(255,90,54,.40);
  --v5-hmgr: #f3e6d8;
  --v5-ok: #4fd19a;
  --v5-warn: #f2b54a;
  --v5-bad: #ff6b5e;
  --v5-ch-site: #55525a;
  --v5-p1: #7d58d8;
  --v5-p2: #1f8796;
  --v5-p3: #b8582c;
  --v5-p4: #3a8e53;
  --v5-p5: #c2427c;
  --v5-p6: #4f6db0;
  --v5-hero-rest: #7d736e;
  --v5-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  --v5-scrim: rgba(0,0,0,.62);
  /* текст на червоному: на світлому червоному темної теми білий дає 2.8:1 —
     темне чорнило дає понад 4.5:1 */
  --v5-on-bad: #140806;

  /* Міст нижче посилається лише на --v5-*, а ті щойно перевизначено на
     тому самому <body> — тож темна тема проходить крізь міст сама, і
     дублювати його тут не треба. Лишається те, що токеном не виражається. */
  color-scheme: dark;
}

/* ── міст: токени app.css → токени v5 ────────────────────────────────────
   ЄДИНЕ місце, де вигляд v5 торкається імен app.css. Наявні екрани (CRM,
   Автоматизація, Промти, Звіти, Керування) не мають своєї розмітки v5 —
   вони беруть палітру саме звідси.

   Псевдоніми (`--page`, `--surface`, `--ink`, `--ok`…) оголошено тут
   ВДРУГЕ навмисно. У app.css вони стоять на `:root` як `var(--bg)` тощо, а
   змінна, що посилається на іншу, обчислюється там, де оголошена: без цього
   `--ink` лишився б чорнилом app.css, хоч `--ink1` уже v5.

   Селектор `body.v5.sk`, а не `body.v5`, свідомо: так міст — окреме правило,
   яке тести перевіряють як звичайне (жодного літерального кольору), а
   виняток «тут можна кольори» лишається лише за двома блоками токенів.
   `sk` є на <body> завжди (_body_cls). */

body.v5.sk {
  --bg: var(--v5-bg);
  --card: var(--v5-panel);
  --panel: var(--v5-panel2);
  --rail: var(--v5-bg);

  --ink1: var(--v5-ink);
  --ink2: var(--v5-ink2);
  --ink3: var(--v5-ink3);
  --ink4: color-mix(in srgb, var(--v5-ink3) 72%, var(--v5-bg));

  --border: var(--v5-line);
  --line: var(--v5-line);
  --line2: color-mix(in srgb, var(--v5-line) 60%, var(--v5-panel));
  --line3: color-mix(in srgb, var(--v5-line) 35%, var(--v5-panel));

  --accent: var(--v5-accent);
  --on-accent: var(--v5-accent-ink);
  --on-tone: var(--v5-accent-ink);

  --success: var(--v5-ok);
  --warning: var(--v5-warn);
  --danger: var(--v5-bad);
  --ok-soft: color-mix(in srgb, var(--v5-ok) 14%, var(--v5-panel));
  --bad-soft: color-mix(in srgb, var(--v5-bad) 12%, var(--v5-panel));
  --bad-soft-2: color-mix(in srgb, var(--v5-bad) 22%, var(--v5-panel));

  /* «скло» в v5 — суцільні панелі: мокап не має напівпрозорих шарів */
  --glass: var(--v5-panel);
  --glass-line: var(--v5-line);
  --lift: var(--v5-panel2);
  --pop: var(--v5-panel);
  --pop-line: var(--v5-line);
  --gcard: var(--v5-panel);
  --gcard-line: var(--v5-line);
  --bubble: var(--v5-panel2);
  --sit: var(--v5-panel2);
  --chb: var(--v5-panel);
  --sh-lift: none;
  --sh-bub: none;
  --sh-glass: var(--v5-shadow);
  --sh-pop: var(--v5-shadow);
  --sh-gcard: var(--v5-shadow);
  --sh-a: var(--v5-shadow);
  --sh-b: var(--v5-shadow);

  --disp: var(--v5-display);
  --body: var(--v5-body);
  --mono: var(--v5-mono);

  --r: var(--v5-r-s);
  --r-l: var(--v5-r);

  /* псевдоніми — див. пояснення над блоком */
  --page: var(--bg);
  --surface: var(--card);
  --sunk: var(--panel);
  --ink: var(--ink1);
  --faint: var(--ink4);
  --on: var(--accent);
  --on-ink: var(--on-accent);
  --warn: var(--warning);
  --bad: var(--danger);
  --ok: var(--success);
  --ink-ok: color-mix(in srgb, var(--ok) 58%, var(--ink1));
  --ink-warn: color-mix(in srgb, var(--warn) 58%, var(--ink1));
  --ink-bad: color-mix(in srgb, var(--bad) 58%, var(--ink1));
}

/* ── основа ──────────────────────────────────────────────────────────── */

body.v5 { font-weight: 500; }
body.v5 .page, body.v5 .page.flowpage { background: var(--v5-bg); }
:root[data-theme="dark"] body.v5 .page,
:root[data-theme="dark"] body.v5 .page.flowpage { background: var(--v5-bg); }

/* Градієнт Instagram: нульовий розмір, а не display:none — схований так
   <svg> у частині браузерів забирає з собою і градієнт. */
body.v5 .v5-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.v5 .chi { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* ── рейка: колонка 76 px, як у мокапі ───────────────────────────────── */

body.v5 .irail {
  width: 76px; background: var(--v5-bg); border-right: 0;
  padding: 18px 0; gap: 10px;
}
body.v5 .page { margin-left: 76px; }

/* логотип: плитка чорнила з жаринкою акценту */
body.v5 .irail .tile {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px;
  background: var(--v5-ink); color: var(--v5-bg);
  font: 700 18px var(--v5-display);
}
body.v5 .irail .tile { width: 60px; }
body.v5 .tile .sela-mark { width: 78%; }
body.v5 .tile .bs { box-shadow: 0 0 0 3px var(--v5-bg); }

/* пункти: 48 px, радіус 15, активний — заливка чорнилом */
body.v5 .ir {
  width: 48px; height: 48px; border-radius: 15px;
  color: var(--v5-ink3); font-size: 18px;
}
body.v5 .ir svg { width: 22px; height: 22px; display: block; }
body.v5 .ir:hover { background: var(--v5-panel2); color: var(--v5-ink); }
body.v5 .ir.on { background: var(--v5-ink); color: var(--v5-bg); box-shadow: none; }
body.v5 .ir.on::before { display: none; }

/* червоний лічильник «чекають» */
body.v5 .ir .cnt {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px; text-align: center;
  background: var(--v5-bad); color: var(--v5-on-bad);
  font: 800 10.5px/18px var(--v5-body);
}

/* підказка: та сама attr(data-tip) з app.css, вигляд мокапу */
body.v5 .ir::after, body.v5 .rwho::after, body.v5 .tile[data-tip]::after {
  background: var(--v5-ink); color: var(--v5-bg);
  border-radius: 8px; font: 600 12px var(--v5-body);
  padding: 5px 9px; box-shadow: none;
}

body.v5 .irail .sep { width: 24px; background: var(--v5-line); margin: 4px 0; }
body.v5 .rwho {
  width: 34px; height: 34px; background: var(--v5-panel);
  border-color: var(--v5-line); color: var(--v5-ink2);
  font: 700 13px var(--v5-body);
}

/* ── шапка сторінки ──────────────────────────────────────────────────── */

body.v5 .page h1 {
  font: 600 22px/1.15 var(--v5-display); letter-spacing: -.02em;
  color: var(--v5-ink);
}

/* ── картки ──────────────────────────────────────────────────────────── */

body.v5 .card {
  background: var(--v5-panel); border-color: var(--v5-line);
  border-radius: var(--v5-r); box-shadow: var(--v5-shadow);
}

/* ── телефон: нижня панель замість рейки ─────────────────────────────── */

body.v5.narrow .page { margin-left: 0; }
body.v5.narrow .card { border-radius: var(--v5-r-s); }
body.v5.narrow .tabbar { background: var(--v5-panel); border-top-color: var(--v5-line); }
body.v5.narrow .tabbar a { color: var(--v5-ink3); position: relative; }
body.v5.narrow .tabbar a .ic {
  display: grid; place-items: center; width: 48px; height: 30px; border-radius: 15px;
}
body.v5.narrow .tabbar a .ic svg { width: 21px; height: 21px; display: block; }
body.v5.narrow .tabbar a.on { color: var(--v5-ink); }
body.v5.narrow .tabbar a.on .ic { background: var(--v5-ink); color: var(--v5-bg); }
/* лічильник «чекають» на вкладці «Чати» — той самий, що в рейці */
body.v5.narrow .tabbar a .cnt {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px; text-align: center;
  background: var(--v5-bad); color: var(--v5-on-bad);
  font: 800 10.5px/18px var(--v5-body);
}

/* аркуш «Ще»: ті самі лінійні значки, що в рейці */
body.v5 .sheet .si svg { width: 20px; height: 20px; display: block; }

/* ── менше руху ──────────────────────────────────────────────────────────
   Замість @media (prefers-reduced-motion): клас ставить v5.js за тим самим
   matchMedia, і його можна ввімкнути руками, щоб перевірити. */

body.v5.reduce-motion *, body.v5.reduce-motion *::before, body.v5.reduce-motion *::after {
  transition: none !important; animation: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   Аналітика (core/dashboard_v5.py) — компоненти мокапу 1:1, напрямок A.

   Імена класів мокапу з префіксом `v5-`: у app.css уже є неперекриті `.card`,
   `.seg`, `.tile`, `.chip`, `.num`, `.lbl`, `.heat`, `.ch`… і вони протекли б
   у розмітку. Короткі внутрішні класи (`b`, `m`, `o`, `n`, `late`, `wide`)
   діють лише всередині свого компонента. Ширину/висоту смуг дає змінна `--v`
   з атрибута `style` — сама цифра, колір лише тут.
   ═════════════════════════════════════════════════════════════════════════ */

body.v5 .page.v5page { padding: 18px 28px 96px 6px; }
body.v5 .v5an { color: var(--v5-ink); font: 500 14px/1.45 var(--v5-body); }
body.v5 .v5an * { box-sizing: border-box; }
body.v5 .v5-num {
  font-family: var(--v5-num); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; white-space: nowrap;
}
body.v5 .v5-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v5-ink3);
}
body.v5 .v5-muted { color: var(--v5-ink3); }
body.v5 .v5-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; background: var(--v5-ink3);
}
body.v5 .v5-dot.b { background: var(--v5-bot); }
body.v5 .v5-dot.m { background: var(--v5-mgr); }
body.v5 .v5-dot.hm { background: var(--v5-hmgr); }
body.v5 .v5-dot.o { background: var(--v5-auto); }
body.v5 .v5-dot.g { background: var(--v5-ok); }
body.v5 .v5-dot.y { background: var(--v5-warn); }
body.v5 .v5-dot.x { background: var(--v5-bad); }

/* ── шапка: заголовок, період, «журнал з» ────────────────────────────── */

body.v5 .v5-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
body.v5 .v5-crumb { display: flex; flex-direction: column; min-width: 0; }
body.v5 .v5-crumb b { font: 600 22px/1.15 var(--v5-display); letter-spacing: -.02em; }
body.v5 .v5-crumb span { font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-sp { flex: 1; }
body.v5 .v5-seg {
  display: inline-flex; background: var(--v5-panel); border: 1px solid var(--v5-line);
  border-radius: var(--v5-pill); padding: 4px; gap: 2px;
}
body.v5 .v5-seg a {
  border: 0; background: transparent; padding: 7px 14px; border-radius: var(--v5-pill);
  font-weight: 700; font-size: 13px; color: var(--v5-ink3); text-decoration: none;
  white-space: nowrap; text-align: center;
}
body.v5 .v5-seg a:hover { color: var(--v5-ink); }
body.v5 .v5-seg a[aria-pressed="true"] { background: var(--v5-ink); color: var(--v5-bg); }
body.v5 .v5-since { font-size: 12px; color: var(--v5-ink3); }
body.v5 .v5-me {
  display: flex; align-items: center; gap: 10px; background: var(--v5-panel);
  border: 1px solid var(--v5-line); border-radius: var(--v5-pill); padding: 4px 14px 4px 4px;
  font-weight: 700; font-size: 13px; color: var(--v5-ink);
}
body.v5 .v5-me small {
  display: block; font-weight: 500; color: var(--v5-ink3); font-size: 11.5px; line-height: 1.1;
}
body.v5 .v5-pre {
  margin: -6px 0 16px; font-size: 13px; color: var(--v5-ink2);
  border-left: 3px solid var(--v5-line); padding: 2px 0 2px 12px;
}
body.v5 .v5-pre b { color: var(--v5-ink); }

/* ── сітка й картки ──────────────────────────────────────────────────── */

body.v5 .v5-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr));
}
body.v5 .v5-grid .s12 { grid-column: span 12; }
body.v5 .v5-grid .s8 { grid-column: span 8; }
body.v5 .v5-grid .s7 { grid-column: span 7; }
body.v5 .v5-grid .s5 { grid-column: span 5; }
body.v5 .v5-grid .s4 { grid-column: span 4; }
body.v5 .v5-card {
  background: var(--v5-panel); border: 1px solid var(--v5-line); border-radius: var(--v5-r);
  padding: 24px; box-shadow: var(--v5-shadow); min-width: 0; position: relative; margin: 0;
}
body.v5 .v5-card h3 { margin: 0; font: 600 18px/1.25 var(--v5-display); letter-spacing: -.01em; }
body.v5 .v5-sub { margin-top: 4px; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-how {
  margin-top: 16px; font-size: 12.5px; color: var(--v5-ink3);
  border-top: 1px dashed var(--v5-line); padding-top: 10px;
}
body.v5 .v5-how b { color: var(--v5-ink2); }
body.v5 .v5-ch {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
body.v5 .v5-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.v5 .v5-btn {
  border: 0; border-radius: var(--v5-pill); padding: 9px 16px; font-weight: 800; font-size: 13px;
  background: var(--v5-ink); color: var(--v5-bg); display: inline-flex; align-items: center;
  gap: 8px; white-space: nowrap; text-decoration: none;
}
body.v5 .v5-btn.ghost { background: transparent; border: 1px solid var(--v5-line); color: var(--v5-ink); }
body.v5 .v5-btn.ghost:hover { background: var(--v5-panel2); }
body.v5 .v5-btn.ghost.sm { padding: 6px 11px; font-size: 12px; color: var(--v5-ink3); }
body.v5 .v5-delta {
  display: inline-flex; align-items: center; gap: 4px; font: 800 12px var(--v5-body);
  padding: 3px 8px; border-radius: var(--v5-pill); white-space: nowrap;
}
body.v5 .v5-delta.up { color: var(--v5-ok); background: color-mix(in srgb, var(--v5-ok) 14%, transparent); }
body.v5 .v5-delta.down { color: var(--v5-bad); background: color-mix(in srgb, var(--v5-bad) 14%, transparent); }
body.v5 .v5-info {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid currentColor; font: 800 11px var(--v5-body); opacity: .6; cursor: help;
  vertical-align: 2px; margin-left: 4px;
}
body.v5 .v5-empty { margin: 0; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-note { margin: 10px 0 0; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-warn {
  margin: -6px 0 12px; font-size: 13px; font-weight: 700; color: var(--v5-warn);
}
body.v5 .v5-min0 { min-width: 0; }
body.v5 .v5-blank p { margin: 8px 0 0; color: var(--v5-ink2); }
body.v5 .v5-blank .v5-pre { margin: 12px 0 0; }

/* ── герой ───────────────────────────────────────────────────────────── */

body.v5 .v5-hero {
  background: var(--v5-hero); color: var(--v5-hero-ink); border-color: transparent;
  overflow: hidden; padding: 32px; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px;
}
body.v5 .v5-hero::before {
  content: ""; position: absolute; width: 620px; height: 620px; left: 18%; top: -330px;
  border-radius: 50%; background: radial-gradient(circle, var(--v5-glow), transparent 62%);
  pointer-events: none;
}
body.v5 .v5-hero .v5-lbl { color: var(--v5-hero-ink2); }
body.v5 .v5-hmain { position: relative; min-width: 0; }
body.v5 .v5-big {
  font-size: clamp(88px, 11vw, 176px); line-height: .86; font-weight: 500;
  margin: 16px 0 10px; display: flex; align-items: flex-start; gap: 6px;
}
body.v5 .v5-big sup { font-size: .4em; line-height: 1; margin-top: .12em; }
body.v5 .v5-say {
  font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--v5-display); letter-spacing: -.01em;
  max-width: 28ch; text-wrap: balance;
}
body.v5 .v5-say em { font-style: normal; color: var(--v5-bot); }
body.v5 .v5-after {
  margin-top: 10px; font-size: 14px; color: var(--v5-hero-ink2);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
body.v5 .v5-after b { color: var(--v5-hero-ink); }
body.v5 .v5-split { margin-top: 22px; max-width: 620px; }
body.v5 .v5-sbar {
  display: flex; height: 12px; border-radius: var(--v5-pill); overflow: hidden; gap: 3px;
}
body.v5 .v5-sbar i {
  display: block; height: 100%; border-radius: var(--v5-pill); width: var(--v); flex: 0 1 auto;
}
body.v5 .v5-sbar i.b { background: var(--v5-bot); }
body.v5 .v5-sbar i.m { background: var(--v5-hmgr); }
body.v5 .v5-sbar i.o { background: var(--v5-hero-rest); }
body.v5 .v5-hero .v5-dot.o { background: var(--v5-hero-rest); }
body.v5 .v5-hero .v5-delta.up {
  color: var(--v5-hero-up); background: color-mix(in srgb, var(--v5-hero-up) 16%, transparent);
}
body.v5 .v5-hero .v5-delta.down {
  color: var(--v5-hero-down); background: color-mix(in srgb, var(--v5-hero-down) 16%, transparent);
}
body.v5 .v5-leg {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px;
  color: var(--v5-hero-ink2);
}
body.v5 .v5-leg b { color: var(--v5-hero-ink); font-variant-numeric: tabular-nums; }
body.v5 .v5-hside {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: end; position: relative;
}
body.v5 .v5-hs {
  border-radius: var(--v5-r-s); padding: 16px 18px; background: var(--v5-hero2);
  border: 1px solid color-mix(in srgb, var(--v5-hero-ink) 12%, transparent); min-width: 0;
}
body.v5 .v5-hs.wide { grid-column: span 2; }
body.v5 .v5-hs .v5-num { font-size: 34px; line-height: 1; font-weight: 500; }
body.v5 .v5-hs p { margin: 6px 0 0; font-size: 13px; color: var(--v5-hero-ink2); }
body.v5 .v5-hs.alarm { border-color: color-mix(in srgb, var(--v5-bad) 55%, transparent); }
body.v5 .v5-hs.alarm .v5-num { color: var(--v5-bad); }
body.v5 .v5-hs.waitnow { border-color: color-mix(in srgb, var(--v5-bad) 35%, transparent); }
body.v5 .v5-hs.waitnow .v5-num { color: var(--v5-hero-down); }
body.v5 .v5-arow {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
body.v5 .v5-aw { font-weight: 800; }
body.v5 .v5-wait { font-size: 13px; color: var(--v5-hero-ink2); }
body.v5 .v5-wait b { color: var(--v5-hero-ink); }
body.v5 .v5-hc { display: block; margin-top: 6px; font-size: 12.5px; color: var(--v5-hero-ink2); }
body.v5 .v5-link {
  display: inline-block; color: var(--v5-hero-ink); font-weight: 800; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; margin-top: 8px;
}

/* ── швидкість ───────────────────────────────────────────────────────── */

body.v5 .v5-speed { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
body.v5 .v5-side { padding: 0 22px 0 0; min-width: 0; }
body.v5 .v5-side + .v5-side { padding-left: 22px; border-left: 1px solid var(--v5-line); }
body.v5 .v5-speed .v5-num { font-size: clamp(48px, 5vw, 76px); line-height: 1; font-weight: 500; }
body.v5 .v5-speed .v5-num small {
  font-size: .38em; margin-left: 5px; letter-spacing: 0; font-family: var(--v5-body); font-weight: 700;
}
body.v5 .v5-who {
  display: flex; align-items: center; gap: 6px; font-weight: 800; margin-bottom: 10px; flex-wrap: wrap;
}
body.v5 .v5-meta { margin-top: 10px; font-size: 13px; color: var(--v5-ink3); line-height: 1.5; }
body.v5 .v5-meta b { color: var(--v5-ink); }
body.v5 .v5-times {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--v5-r-s); background: var(--v5-panel2);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
body.v5 .v5-times .v5-num { font-size: 40px; font-weight: 500; color: var(--v5-bot-ink); }
body.v5 .v5-times span { font-size: 14px; color: var(--v5-ink2); max-width: 40ch; }
body.v5 .v5-buckets {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 16px;
}
body.v5 .v5-buckets > div { display: flex; flex-direction: column; gap: 6px; }
body.v5 .v5-bk {
  height: 52px; border-radius: 8px; background: var(--v5-panel2); position: relative; overflow: hidden;
}
body.v5 .v5-bk i {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--v);
  background: var(--v5-mgr); border-radius: 6px;
}
body.v5 .v5-bk i.ok { background: var(--v5-mgr); }
body.v5 .v5-bk i.late { background: var(--v5-bad); }
body.v5 .v5-buckets small { font-size: 12px; color: var(--v5-ink3); text-align: center; }
body.v5 .v5-buckets b { font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── розмови: плитки й графік ────────────────────────────────────────── */

body.v5 .v5-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px;
}
body.v5 .v5-tile {
  background: var(--v5-panel2); border-radius: var(--v5-r-s); padding: 14px 16px; min-width: 0;
}
body.v5 .v5-tile .v5-num { font-size: 32px; line-height: 1.05; font-weight: 500; display: block; }
body.v5 .v5-tile p { margin: 4px 0 0; font-size: 12.5px; color: var(--v5-ink3); }
body.v5 .v5-tile.lead { background: var(--v5-hero); color: var(--v5-hero-ink); }
body.v5 .v5-tile.lead .v5-num { color: var(--v5-bot); }
body.v5 .v5-tile.lead p { color: var(--v5-hero-ink2); }
body.v5 .v5-chartbox { width: 100%; min-height: 200px; }
body.v5 .v5-chart { display: block; width: 100%; height: auto; overflow: visible; }
body.v5 .v5-chart text { fill: var(--v5-ink3); font: 600 11.5px var(--v5-body); }
body.v5 .v5-chart .gl { stroke: var(--v5-line); stroke-width: 1; }
body.v5 .v5-chart .b { fill: var(--v5-bot); }
body.v5 .v5-chart .m { fill: var(--v5-mgr); }
body.v5 .v5-cap { margin: 6px 0 0; font-size: 12px; color: var(--v5-ink3); }
body.v5 .v5-legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--v5-ink2); margin-top: 10px;
}

/* ── години ──────────────────────────────────────────────────────────── */

body.v5 .v5-hpct { font-size: 28px; }
body.v5 .v5-heat {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px;
  align-items: end; height: 120px; margin-top: 4px;
}
body.v5 .v5-heat i {
  display: block; height: var(--v); border-radius: 4px 4px 2px 2px; background: var(--v5-auto);
}
body.v5 .v5-heat i.w { background: var(--v5-auto); }
body.v5 .v5-heat i.n { background: var(--v5-bot); }
body.v5 .v5-hx {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  font: 600 11.5px var(--v5-body); color: var(--v5-ink3); margin-top: 6px;
}
body.v5 .v5-hx span { visibility: hidden; white-space: nowrap; }
body.v5 .v5-hx span:nth-child(3n+1) { visibility: visible; }

/* ── менеджери ───────────────────────────────────────────────────────── */

body.v5 .v5-mtable { overflow-x: auto; }
body.v5 .v5-mtable table {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0;
}
body.v5 .v5-mtable th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--v5-ink3); padding: 0 10px 10px;
  border-bottom: 1px solid var(--v5-line); white-space: nowrap; background: transparent;
  font-family: var(--v5-body);
}
body.v5 .v5-mtable td {
  padding: 12px 10px; border-bottom: 1px solid var(--v5-line); white-space: nowrap;
  color: var(--v5-ink); background: transparent; font-size: 14px; vertical-align: middle;
}
body.v5 .v5-mtable tbody tr:hover { background: transparent; }
body.v5 .v5-mtable tr:last-child td { border-bottom: 0; }
body.v5 .v5-mtable td.r, body.v5 .v5-mtable th.r { text-align: right; }
body.v5 .v5-mtable tr.sys td { color: var(--v5-ink3); }
body.v5 .v5-person { display: flex; align-items: center; gap: 10px; font-weight: 700; }
body.v5 .v5-person small { display: block; font-weight: 500; color: var(--v5-ink3); font-size: 12px; }
body.v5 .v5-av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 13px var(--v5-body); background: var(--v5-ink); color: var(--v5-bg);
}
body.v5 .v5-av.v5-p1 { background: var(--v5-p1); color: var(--v5-p-ink); }
body.v5 .v5-av.v5-p2 { background: var(--v5-p2); color: var(--v5-p-ink); }
body.v5 .v5-av.v5-p3 { background: var(--v5-p3); color: var(--v5-p-ink); }
body.v5 .v5-av.v5-p4 { background: var(--v5-p4); color: var(--v5-p-ink); }
body.v5 .v5-av.v5-p5 { background: var(--v5-p5); color: var(--v5-p-ink); }
body.v5 .v5-av.v5-p6 { background: var(--v5-p6); color: var(--v5-p-ink); }
body.v5 .v5-av.sys {
  background: var(--v5-panel2); color: var(--v5-ink3); border: 1px solid var(--v5-line);
}
body.v5 .v5-av.sm { width: 28px; height: 28px; font-size: 12px; }
body.v5 .v5-mrow .v5-av { width: 40px; height: 40px; }
body.v5 .v5-sla {
  display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--v5-panel2);
  vertical-align: middle; margin-left: 8px; overflow: hidden;
}
body.v5 .v5-sla i { display: block; height: 100%; width: var(--v); background: var(--v5-ok); }
body.v5 .v5-mlist { display: none; }
body.v5 .v5-mrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--v5-line);
}
body.v5 .v5-mrow:last-child { border: 0; }
body.v5 .v5-facts { font-size: 13px; color: var(--v5-ink3); margin-top: 2px; }
body.v5 .v5-facts b { color: var(--v5-ink); font-variant-numeric: tabular-nums; }

/* ── канали ──────────────────────────────────────────────────────────── */

body.v5 .v5-chrow {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--v5-line);
}
body.v5 .v5-chrow:last-child { border-bottom: 0; }
body.v5 .v5-top3 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
body.v5 .v5-top3 span { font-size: 13px; color: var(--v5-ink3); white-space: nowrap; }
body.v5 .v5-top3 span b { color: var(--v5-ink); font-variant-numeric: tabular-nums; }
body.v5 .v5-bar2 {
  height: 8px; border-radius: 4px; background: var(--v5-panel2); overflow: hidden;
  margin-top: 7px; display: flex;
}
body.v5 .v5-bar2 i { display: block; height: 100%; width: var(--v); flex: none; }
body.v5 .v5-bar2 i.b { background: var(--v5-bot); }
body.v5 .v5-bar2 i.m { background: var(--v5-mgr); }

/* ── картки з попереднього екрана: вартість, настрій, доба, прогалини ── */

body.v5 .v5-kpi .v5-num { font-size: 40px; line-height: 1; font-weight: 500; display: block; }
body.v5 .v5-kpi p { margin: 8px 0 0; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-mood {
  display: flex; height: 12px; border-radius: var(--v5-pill); overflow: hidden; gap: 3px;
}
body.v5 .v5-mood i {
  display: block; height: 100%; width: var(--v); flex: 0 1 auto; border-radius: var(--v5-pill);
}
body.v5 .v5-mood i.g { background: var(--v5-ok); }
body.v5 .v5-mood i.y { background: var(--v5-warn); }
body.v5 .v5-mood i.x { background: var(--v5-bad); }
body.v5 .v5-leg2 {
  display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px;
  color: var(--v5-ink2);
}
body.v5 .v5-leg2 b { color: var(--v5-ink); font-variant-numeric: tabular-nums; }
body.v5 .v5-seg.v5-mini { margin-bottom: 14px; }
body.v5 .v5-seg.v5-mini a { padding: 5px 11px; font-size: 12px; }
body.v5 .v5-dheat {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px;
  align-items: end; height: 64px;
}
body.v5 .v5-dheat i {
  display: block; height: var(--v); border-radius: 3px 3px 1px 1px; background: var(--v5-auto);
}
body.v5 .v5-dheat i[data-l="0"] { background: var(--v5-panel2); }
body.v5 .v5-dheat i[data-l="3"], body.v5 .v5-dheat i[data-l="4"] { background: var(--v5-bot); }
body.v5 .v5-dhx {
  display: flex; justify-content: space-between; margin-top: 6px;
  font: 600 11.5px var(--v5-body); color: var(--v5-ink3);
}
body.v5 .v5-gaps { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
body.v5 .v5-gaps li {
  break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--v5-line);
  font-size: 13.5px; color: var(--v5-ink2);
}

/* ── до 1320: менеджери й канали — на всю ширину ─────────────────────────
   Таблиці менеджерів у 8 колонках сітки тісно вже нижче ~1320 px: клас
   `lg` ставить app.js (syncNarrow) поруч із `mid`/`narrow`. */

body.v5.lg .v5-grid .v5-wide-lg { grid-column: span 12; }

/* ── проміжна ширина (≤1180): картки на всю ширину ───────────────────── */

body.v5.mid .v5-grid .s8, body.v5.mid .v5-grid .s7,
body.v5.mid .v5-grid .s5, body.v5.mid .v5-grid .s4 { grid-column: span 12; }
/* таблиця менеджерів: числа можуть переноситись, міні-смуга SLA зникає —
   жодної схованої горизонтальної прокрутки на будь-якій ширині */
body.v5.mid .v5-mtable th, body.v5.mid .v5-mtable td { white-space: normal; padding-left: 6px; padding-right: 6px; }
body.v5.mid .v5-mtable .v5-sla { display: none; }

/* ── телефон (≤860) ──────────────────────────────────────────────────── */

body.v5.narrow .page.v5page { padding: 14px 16px 96px; }
body.v5.narrow .v5-period { order: 5; width: 100%; justify-content: space-between; }
body.v5.narrow .v5-period a { flex: 1; }
body.v5.narrow .v5-since { order: 6; }
body.v5.narrow .v5-me { padding-right: 4px; }
body.v5.narrow .v5-who-txt { display: none; }
body.v5.narrow .v5-card { padding: 18px; border-radius: var(--v5-r-s); }
body.v5.narrow .v5-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 20px; }
body.v5.narrow .v5-big { font-size: clamp(84px, 28vw, 120px); }
body.v5.narrow .v5-hs { padding: 12px 14px; }
body.v5.narrow .v5-hs .v5-num { font-size: 26px; }
body.v5.narrow .v5-speed { grid-template-columns: minmax(0, 1fr); }
body.v5.narrow .v5-side + .v5-side {
  padding-left: 0; border-left: 0; border-top: 1px solid var(--v5-line);
  padding-top: 16px; margin-top: 16px;
}
body.v5.narrow .v5-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.v5.narrow .v5-tiles .v5-tile:first-child { grid-column: span 2; }
body.v5.narrow .v5-mtable { display: none; }
body.v5.narrow .v5-mlist { display: block; }
body.v5.narrow .v5-gaps { columns: 1; }

/* ═════════════════════════════════════════════════════════════════════════
   Чати (core/dashboard_v5.py, етап 4) — `chats()` мокапу 1:1, напрямок A.

   Дві шпальти: список і розмова; дані гостя — у шухляді ⓘ поверх розмови,
   а не в третій колонці. Імена мокапу з префіксом `v5-` (у app.css уже є
   `.row`, `.tab`, `.chip`, `.menu`, `.state`, `.btn`, `.av`…). Хук-класи
   наявної панелі (`frow`, `ctop3`, `back`, `ovf`, `bub`, `qrbar`, `cdraft`)
   лишаються в розмітці заради скриптів — їхні правила з app.css тут
   перекрито повністю там, де вони перетинаються з мокапом.
   ═════════════════════════════════════════════════════════════════════════ */

body.v5 .page.v5cpage { padding: 18px 28px 18px 6px; height: 100vh; overflow: hidden; }
body.v5 .v5-chats {
  display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px;
  height: 100%; min-height: 560px; color: var(--v5-ink); font: 500 14px/1.45 var(--v5-body);
}
body.v5 .v5-chats * { box-sizing: border-box; }
body.v5 .v5-pane {
  background: var(--v5-panel); border: 1px solid var(--v5-line); border-radius: var(--v5-r);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  box-shadow: var(--v5-shadow); overflow: hidden; position: relative;
}

/* ── список: пошук, вкладки, канал ───────────────────────────────────── */

body.v5 .v5-lhead { padding: 18px 18px 10px; border-bottom: 1px solid var(--v5-line); flex: 0 0 auto; }
body.v5 .v5-search {
  display: flex; align-items: center; gap: 8px; background: var(--v5-panel2);
  border-radius: var(--v5-pill); padding: 9px 14px; color: var(--v5-ink3); font-size: 13px;
  margin: 0; cursor: text;
}
body.v5 .v5-search svg { flex: none; }
body.v5 .v5-search input {
  border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; padding: 0;
  font: inherit; color: var(--v5-ink); border-radius: 0;
}
body.v5 .v5-search input::placeholder { color: var(--v5-ink3); }
body.v5 .v5-search:focus-within { box-shadow: 0 0 0 2px var(--v5-accent); }
body.v5 .v5-tabs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
body.v5 .v5-tab {
  border: 1px solid var(--v5-line); background: transparent; border-radius: var(--v5-pill);
  padding: 6px 11px; font-size: 13px; font-weight: 700; color: var(--v5-ink2);
  display: inline-flex; gap: 6px; align-items: center; text-decoration: none; white-space: nowrap;
}
body.v5 .v5-tab:hover { border-color: var(--v5-ink3); }
body.v5 .v5-tab b { font-weight: 800; color: var(--v5-ink3); font-variant-numeric: tabular-nums; }
body.v5 .v5-tab.hot b { color: var(--v5-bad); }
body.v5 .v5-tab[aria-pressed="true"] {
  background: var(--v5-ink); color: var(--v5-bg); border-color: var(--v5-ink);
}
body.v5 .v5-tab[aria-pressed="true"] b { color: inherit; opacity: .75; }
body.v5 .v5-chsel { position: relative; margin-top: 10px; }
body.v5 .v5-chbtn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--v5-line);
  background: transparent; border-radius: var(--v5-pill); padding: 5px 12px 5px 6px;
  font: 700 13px/1.45 var(--v5-body); color: var(--v5-ink); cursor: pointer;
}
body.v5 .v5-chbtn:hover { background: var(--v5-panel2); }
body.v5 .v5-stack { display: inline-flex; }
body.v5 .v5-stack .chi { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--v5-panel); }
body.v5 .v5-stack .chi:first-child { margin-left: 0; }
body.v5 .v5-list { overflow-y: auto; flex: 1; padding: 6px 8px 10px; min-height: 0; }
body.v5 .v5-lempty { padding: 28px 20px; margin: 0; text-align: center; color: var(--v5-ink3); font-size: 13px; }
body.v5 .v5-lnote { padding: 8px 20px 4px; margin: 0; color: var(--v5-ink3); font-size: 12px; font-weight: 600; }

/* ── рядок списку (`frow` — гачок підміни екрана) ─────────────────────── */

body.v5 .v5-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--v5-r-s); border: 0; background: transparent; width: 100%;
  text-align: left; margin: 0; color: var(--v5-ink); text-decoration: none; cursor: pointer;
  animation: none; box-shadow: none; transform: none;
}
body.v5 .v5-row:hover { background: var(--v5-panel2); }
body.v5 .v5-row[aria-current="true"] { background: var(--v5-panel2); }
body.v5 .v5-rmain { min-width: 0; display: flex; flex-direction: column; }
body.v5 .v5-nm {
  font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v5 .v5-ln {
  font-size: 13px; color: var(--v5-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v5 .v5-row.v5-unread .v5-nm { font-weight: 800; }
body.v5 .v5-row.v5-unread .v5-ln { color: var(--v5-ink); font-weight: 600; }
body.v5 .v5-igsoon { font-size: 11.5px; font-weight: 700; color: var(--v5-warn); margin-top: 2px; }
body.v5 .v5-rt {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 12px; color: var(--v5-ink3);
}
body.v5 .v5-rtm { white-space: nowrap; }

/* аватарка гостя: ініціали під фото, значок каналу, крапка непрочитаного */
body.v5 .v5-gav { position: relative; width: 48px; height: 48px; flex: none; display: block; }
body.v5 .v5-gav.s48 { width: 48px; height: 48px; }
body.v5 .v5-gav.s44 { width: 44px; height: 44px; }
body.v5 .v5-gav img, body.v5 .v5-gav .v5-ini {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
}
body.v5 .v5-gav img { object-fit: cover; display: block; }
body.v5 .v5-gav img.v5-noimg { display: none; }
body.v5 .v5-gav .v5-ini {
  display: grid; place-items: center; font: 700 16px var(--v5-body);
  color: var(--v5-ini-ink); background: var(--v5-ch-site);
}
body.v5 .v5-gav .chi {
  position: absolute; right: -3px; bottom: -3px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--v5-panel);
}
body.v5 .v5-gav .v5-ud {
  position: absolute; left: -2px; top: -2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--v5-accent); box-shadow: 0 0 0 2.5px var(--v5-panel);
}

/* чипи статусу */
body.v5 .v5-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
  border-radius: var(--v5-pill); padding: 2px 8px; white-space: nowrap; line-height: 1.45;
}
body.v5 .v5-chip .v5-av { width: 18px; height: 18px; font-size: 9px; margin-left: -6px; }
body.v5 .v5-chip.person { color: var(--v5-ink2); background: var(--v5-panel2); padding-left: 8px; }
body.v5 .v5-chip.bot { color: var(--v5-bot-ink); background: color-mix(in srgb, var(--v5-bot) 13%, transparent); }
body.v5 .v5-chip.wait { color: var(--v5-on-bad); background: var(--v5-bad); }
/* у межах SLA — ще не тривога: та сама барва, тихіше */
body.v5 .v5-chip.wait.ok { color: var(--v5-bad); background: color-mix(in srgb, var(--v5-bad) 13%, transparent); }
body.v5 .v5-chip.wait.warn { color: var(--v5-on-bad); background: var(--v5-bad); }
body.v5 .v5-chip.wait.breach {
  color: var(--v5-on-bad); background: var(--v5-bad);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--v5-bad) 35%, transparent);
}
body.v5 .v5-chip.done { color: var(--v5-ink3); background: var(--v5-panel2); }

/* аватарки людей: розміри поруч із наявним `.v5-av` */
body.v5 .v5-av.xs { width: 18px; height: 18px; font-size: 9px; }
body.v5 .v5-av.s22 { width: 22px; height: 22px; font-size: 9px; }
body.v5 .v5-av.md { width: 32px; height: 32px; font-size: 12px; }

/* ── шапка розмови (`.ctop3` — гачок стрілки «назад») ─────────────────── */

body.v5 .v5-head { flex: 0 0 auto; }
body.v5 .v5-tpane .ctop3 {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--v5-line); flex-wrap: wrap;
}
body.v5 .v5-tpane .ctop3 .back {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v5-line);
  background: transparent; color: var(--v5-ink); place-items: center;
  text-decoration: none; font-size: 16px; flex: none;
}
body.v5 .v5-tt { min-width: 0; }
body.v5 .v5-t1 {
  font: 600 17px/1.3 var(--v5-display); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.v5 .v5-t2 { font-size: 13px; color: var(--v5-ink3); display: flex; align-items: center; gap: 6px; min-width: 0; }
body.v5 .v5-t2 > :not(.v5-t2x) { flex: none; }
body.v5 .v5-t2x { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v5 .v5-tpane .v5-acts { position: relative; }
body.v5 button.v5-btn { font-family: var(--v5-body); line-height: 1.45; cursor: pointer; }
body.v5 button.v5-btn:disabled { opacity: .55; cursor: progress; }
body.v5 .v5-btn.acc { background: var(--v5-accent); color: var(--v5-accent-ink); }
body.v5 .v5-btn.icon { padding: 8px 10px; }
body.v5 .v5-btn:focus-visible, body.v5 .v5-tab:focus-visible, body.v5 .v5-mi:focus-visible,
body.v5 .v5-chbtn:focus-visible, body.v5 .v5-row:focus-visible {
  outline: 2px solid var(--v5-accent); outline-offset: 2px;
}
body.v5 .v5-state {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px;
  border-bottom: 1px solid var(--v5-line); background: var(--v5-panel2); color: var(--v5-ink2);
}
body.v5 .v5-state.wait {
  background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel)); color: var(--v5-bad); font-weight: 700;
}
body.v5 .v5-state b { color: var(--v5-ink); }
body.v5 .v5-igstrip {
  display: flex; align-items: center; gap: 8px; padding: 7px 18px; font-size: 12.5px; font-weight: 700;
  border-bottom: 1px solid var(--v5-line); color: var(--v5-warn);
  background: color-mix(in srgb, var(--v5-warn) 8%, var(--v5-panel));
}
body.v5 .v5-igstrip.closed {
  color: var(--v5-bad); background: color-mix(in srgb, var(--v5-bad) 8%, var(--v5-panel));
}

/* меню: «Призначити / Передати», «Закрити», канал */
body.v5 .v5-menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--v5-panel);
  border: 1px solid var(--v5-line); border-radius: var(--v5-r-s); box-shadow: var(--v5-menu-shadow);
  padding: 6px; min-width: 260px; z-index: 30; text-align: left;
}
body.v5 .v5-menu[hidden] { display: none; }
body.v5 .v5-menu.v5-chmenu { left: 0; right: auto; }
body.v5 .v5-mh { font-size: 12px; font-weight: 700; color: var(--v5-ink3); padding: 6px 10px; }
body.v5 .v5-mi {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 10px; text-align: left; font: 700 13.5px/1.3 var(--v5-body);
  color: var(--v5-ink); text-decoration: none; cursor: pointer;
}
body.v5 .v5-mi:hover { background: var(--v5-panel2); }
body.v5 .v5-mi small { display: block; font-weight: 500; color: var(--v5-ink3); font-size: 12px; }
body.v5 .v5-mi[disabled] { opacity: .45; cursor: not-allowed; }
body.v5 .v5-mi[disabled]:hover { background: transparent; }
body.v5 .v5-mi .v5-av { width: 30px; height: 30px; font-size: 11px; }
body.v5 .v5-mempty { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-closem { min-width: 300px; }
body.v5 .v5-ctx { display: block; padding: 2px 6px 4px; margin: 0; }
body.v5 .v5-ctx span { display: block; font-size: 12px; font-weight: 600; color: var(--v5-ink3); margin-bottom: 4px; }
body.v5 .v5-ctx textarea {
  width: 100%; resize: vertical; min-height: 52px; border: 1px solid var(--v5-line);
  border-radius: 10px; background: var(--v5-panel2); color: var(--v5-ink);
  font: 500 13px/1.4 var(--v5-body); padding: 7px 9px;
}
body.v5 .v5-close-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
body.v5 .v5-close-opts button {
  border: 1px solid var(--v5-line); background: transparent; border-radius: 10px; padding: 10px;
  font: 700 13px/1.3 var(--v5-body); text-align: left; color: var(--v5-ink); cursor: pointer;
}
body.v5 .v5-close-opts button:hover { background: var(--v5-panel2); }

/* ── стрічка ──────────────────────────────────────────────────────────── */

body.v5 .v5-msgs {
  flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column;
  gap: 10px; min-height: 0;
}
body.v5 .v5-day {
  align-self: center; font-size: 12px; font-weight: 700; color: var(--v5-ink3);
  letter-spacing: .04em; text-transform: uppercase; margin: 6px 0;
}
body.v5 .v5-msgs .bub {
  max-width: min(540px, 80%); padding: 10px 14px; border-radius: 18px; font-size: 14px;
  line-height: 1.45; border: 0; box-shadow: none; animation: none; position: relative;
  margin: 0; overflow-wrap: anywhere;
}
body.v5 .v5-msgs .bub.in {
  align-self: flex-start; background: var(--v5-panel2); color: var(--v5-ink); border-bottom-left-radius: 6px;
}
body.v5 .v5-msgs .bub.out {
  align-self: flex-end; background: var(--v5-ink); color: var(--v5-bg); border-bottom-right-radius: 6px;
}
body.v5 .v5-msgs .bub.out.v5-bot {
  background: color-mix(in srgb, var(--v5-bot) 12%, var(--v5-panel)); color: var(--v5-ink);
}
body.v5 .v5-msgs .bub.out.mgr { background: var(--v5-ink); color: var(--v5-bg); }
body.v5 .v5-msgs .bub.out a { color: inherit; text-decoration: underline; }
body.v5 .v5-by { display: block; font-size: 12px; font-weight: 800; margin-bottom: 3px; }
body.v5 .v5-msgs .bub.out.v5-bot .v5-by { color: var(--v5-bot-ink); }
body.v5 .v5-msgs .bub.out.mgr .v5-by { opacity: .75; }
body.v5 .v5-tm { display: block; font: 500 11px var(--v5-mono); margin-top: 4px; opacity: .65; text-align: right; }
/* не доставлено: та сама бульбашка, червона рамка й причина під текстом */
body.v5 .v5-msgs .bub.out.fail {
  background: color-mix(in srgb, var(--v5-bad) 14%, var(--v5-panel)); color: var(--v5-ink);
  box-shadow: inset 0 0 0 2px var(--v5-bad); opacity: 1;
}
body.v5 .v5-msgs .bub.out.fail .why { color: var(--v5-bad); font-weight: 700; }
body.v5 .v5-msgs .bub-edit { color: inherit; top: 4px; right: 6px; }
body.v5 .v5-msgs .bub.bub-editbox { max-width: min(560px, 92%); }
body.v5 .v5-ev {
  align-self: center; display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--v5-ink2); border: 1px dashed var(--v5-line); border-radius: var(--v5-pill);
  padding: 5px 12px; max-width: 94%; text-align: center;
}
body.v5 .v5-ev.hand {
  border-style: solid; border-color: color-mix(in srgb, var(--v5-bad) 45%, transparent); color: var(--v5-bad);
}
body.v5 .v5-ev .v5-tm { margin: 0; display: inline; }
body.v5 .v5-tempty { margin: auto; padding: 40px 20px; color: var(--v5-ink3); font-weight: 600; text-align: center; }
body.v5 .v5-tpane.v5-none { display: grid; place-items: center; }
/* розмову щойно передали іншій людині (C6, 7b): пояснення на місці стрічки */
body.v5 .v5-lost { margin: auto; padding: 32px 20px; text-align: center; color: var(--v5-ink2); }
body.v5 .v5-lost b { display: block; font-size: 15px; color: var(--v5-ink); }
body.v5 .v5-lost p { margin: 6px 0 14px; font-size: 13px; color: var(--v5-ink3); }

/* ── чернетка бота (`#cact`) ───────────────────────────────────────────── */

body.v5 .v5-cact { flex: 0 0 auto; }
body.v5 .v5-cact .cdraft.v5-draft {
  margin: 0 14px 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--v5-bad) 45%, transparent);
  border-radius: var(--v5-r-s); background: color-mix(in srgb, var(--v5-bad) 6%, var(--v5-panel));
}
body.v5 .v5-dhd {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--v5-bad);
  margin-bottom: 6px;
}
body.v5 .v5-dhd b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.v5 .v5-dhd span { color: var(--v5-ink3); font: 500 11.5px var(--v5-mono); }
body.v5 .v5-cact .v5-dtext { font-size: 14px; line-height: 1.5; color: var(--v5-ink); padding: 4px 6px; border-radius: 8px; }
body.v5 .v5-cact .v5-dtext:focus { box-shadow: inset 0 0 0 1px var(--v5-ink3); }
body.v5 .v5-dact { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── поле вводу ───────────────────────────────────────────────────────── */

body.v5 .v5-qrbar { gap: 6px; padding: 0 14px 10px; flex-wrap: wrap; }
body.v5 .v5-qr {
  border: 1px solid var(--v5-line); background: transparent; border-radius: var(--v5-pill);
  padding: 5px 11px; font: 700 12.5px/1.4 var(--v5-body); color: var(--v5-ink2); cursor: pointer;
}
body.v5 .v5-qr:hover { border-color: var(--v5-ink3); color: var(--v5-ink); }
body.v5 .v5-tpl {
  margin: 0 14px 8px; border: 1px solid var(--v5-line); border-radius: var(--v5-r-s);
  background: var(--v5-panel); box-shadow: var(--v5-menu-shadow); padding: 6px; max-height: 240px; overflow-y: auto;
}
body.v5 .v5-tpl[hidden] { display: none; }
body.v5 .v5-tpl .v5-mi[aria-selected="true"] { background: var(--v5-panel2); }
body.v5 .v5-composer {
  border-top: 1px solid var(--v5-line); padding: 12px 14px; display: flex; gap: 10px; align-items: center;
  flex: 0 0 auto; margin: 0;
}
body.v5 .v5-composer input#compinp {
  flex: 1; min-width: 0; border: 1px solid var(--v5-line); background: var(--v5-panel2);
  border-radius: var(--v5-pill); padding: 11px 16px; font: 500 14px/1.3 var(--v5-body); color: var(--v5-ink);
}
body.v5 .v5-composer input#compinp:focus { border-color: var(--v5-ink3); outline: 0; }
body.v5 .v5-ib {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--v5-line);
  background: transparent; color: var(--v5-ink2); display: grid; place-items: center;
  font-size: 15px; cursor: pointer; padding: 0;
}
body.v5 .v5-ib:hover { background: var(--v5-panel2); color: var(--v5-ink); }
body.v5 .v5-cnote { padding: 0 18px 10px; font-size: 12px; color: var(--v5-ink3); flex: 0 0 auto; }
body.v5 .v5-cnote:empty { display: none; }

/* ── шухляда ⓘ (корінь — `.ovf#ovf`, відкриває `#ovfbtn`) ─────────────── */

body.v5 .v5-tpane .ovf.v5-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: min(340px, 100%); min-width: 0;
  background: var(--v5-panel); border: 0; border-left: 1px solid var(--v5-line); border-radius: 0;
  box-shadow: var(--v5-drawer-shadow); z-index: 25; padding: 0; animation: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; display: none; flex-direction: column;
}
body.v5 .v5-tpane .ovf.v5-drawer.on { display: flex; }
body.v5 .v5-dh {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-bottom: 1px solid var(--v5-line); font: 600 16px var(--v5-display); flex: 0 0 auto;
}
body.v5 .v5-db { overflow-y: auto; overflow-x: hidden; padding: 18px; min-height: 0; flex: 1; }
body.v5 .v5-db h4 {
  margin: 18px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--v5-ink3); font-weight: 700;
}
body.v5 .v5-db h4:first-child { margin-top: 0; }
body.v5 .v5-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
body.v5 .v5-kv span { color: var(--v5-ink3); }
body.v5 .v5-kv b {
  text-align: right; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
}
body.v5 .v5-log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
/* перша колонка фіксованої ширини (під «25.09 19:48» моноширинним):
   з `auto` рядки «лише час» і «дата + час» починали текст з різного x */
body.v5 .v5-log li {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--v5-line);
}
body.v5 .v5-log li:last-child { border: 0; }
body.v5 .v5-log time {
  font: 500 11.5px var(--v5-mono); color: var(--v5-ink3); padding-top: 1px; white-space: nowrap; min-width: 40px;
}
body.v5 .v5-notes { display: flex; flex-direction: column; gap: 8px; }
body.v5 .v5-nt {
  position: relative; background: color-mix(in srgb, var(--v5-warn) 12%, var(--v5-panel));
  border-radius: var(--v5-r-s); padding: 10px 28px 10px 12px; font-size: 13px; overflow-wrap: anywhere;
}
body.v5 .v5-ntext { white-space: pre-wrap; }
body.v5 .v5-nt small { display: block; color: var(--v5-ink3); margin-top: 4px; font-size: 12px; }
body.v5 .v5-ndel {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: transparent; color: var(--v5-ink3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
body.v5 .v5-ndel:hover { color: var(--v5-bad); background: var(--v5-panel); }
body.v5 .v5-nadd { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: flex-start; }
body.v5 .v5-nadd .v5-nin {
  width: 100%; resize: vertical; min-height: 48px; border: 1px solid var(--v5-line); border-radius: 10px;
  background: var(--v5-panel2); color: var(--v5-ink); font: 500 13px/1.4 var(--v5-body); padding: 7px 9px;
}
/* @згадки (C5): список колег під полем нотатки */
body.v5 .v5-nadd { position: relative; }
body.v5 .v5-mention {
  width: 100%; border: 1px solid var(--v5-line); border-radius: var(--v5-r-s);
  background: var(--v5-panel); box-shadow: var(--v5-menu-shadow); padding: 6px; max-height: 220px; overflow-y: auto;
}
body.v5 .v5-mention[hidden] { display: none; }
body.v5 .v5-mention .v5-mi[aria-selected="true"] { background: var(--v5-panel2); }
body.v5 .v5-mention .v5-mi.off { opacity: .55; }
body.v5 .v5-nwarn { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--v5-warn); }
body.v5 .v5-nwarn[hidden] { display: none; }
body.v5 .v5-dmuted { margin: 0; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-dp { margin: 0; font-size: 13px; color: var(--v5-ink2); }
body.v5 .v5-db .v5-btn.sm { padding: 6px 12px; font-size: 12.5px; margin-top: 8px; }
body.v5 .v5-dsec .v5-btn.sm { margin-top: 0; }
body.v5 .v5-dbox { font-size: 13px; color: var(--v5-ink2); }
body.v5 .v5-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
body.v5 .v5-pchip {
  border: 1px solid var(--v5-line); border-radius: var(--v5-pill); padding: 4px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--v5-ink2); text-decoration: none; cursor: pointer;
}
body.v5 .v5-pchip:hover { background: var(--v5-panel2); color: var(--v5-ink); }
body.v5 .v5-pchip.undo { color: var(--v5-ok); border-color: color-mix(in srgb, var(--v5-ok) 45%, var(--v5-line)); }
body.v5 .v5-svc { display: flex; flex-direction: column; gap: 2px; }
body.v5 .v5-svci {
  padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--v5-ink2);
  text-decoration: none; cursor: pointer;
}
body.v5 .v5-svci:hover { background: var(--v5-panel2); color: var(--v5-ink); }
/* теги й змінні: фрагменти /chats/tags і /chats/vars у мові v5 */
body.v5 .v5-dbox .tchip { background: var(--v5-panel2); border-color: var(--v5-line); color: var(--v5-ink); }
body.v5 .v5-dbox .cvio input, body.v5 .v5-dbox .cvadd input, body.v5 .v5-dbox .tadd input {
  background: var(--v5-panel2); border: 1px solid var(--v5-line); color: var(--v5-ink); border-radius: 10px;
}
body.v5 .v5-dbox .cvr { border-bottom-color: var(--v5-line); }
/* «+ нова змінна» й поля тегів: поле стискається, кнопка — ніколи */
body.v5 .v5-dbox .cvio, body.v5 .v5-dbox .cvadd, body.v5 .v5-dbox .tadd { display: flex; gap: 6px; min-width: 0; }
body.v5 .v5-dbox .cvio input, body.v5 .v5-dbox .cvadd input, body.v5 .v5-dbox .tadd input { min-width: 0; flex: 1 1 0; }
body.v5 .v5-dbox .cvio button, body.v5 .v5-dbox .cvadd button, body.v5 .v5-dbox .tadd button { flex: 0 0 auto; }

/* ── проміжна ширина (≤1180) ──────────────────────────────────────────── */

body.v5.mid .v5-chats { grid-template-columns: 300px minmax(0, 1fr); }
body.v5.mid .page.v5cpage { padding-right: 18px; }
/* шапка: ⓘ лишається в першому рядку біля імені, дії — окремим рядком без
   переносу (≤1180, тож і на телефоні) */
/* назва бере весь вільний рядок і стискається («…») замість переносу:
   інакше flex-wrap кладе ⓘ на окремий рядок, щойно нікнейм довгий */
body.v5.mid .v5-tpane .ctop3 .v5-tt { flex: 1 1 0; }
body.v5.mid .v5-tpane .ctop3 .v5-sp { order: 1; flex: 0 0 0; }
body.v5.mid .v5-tpane .ctop3 #ovfbtn { order: 2; }
body.v5.mid .v5-tpane .ctop3 .v5-acts { order: 3; flex: 1 0 100%; flex-wrap: nowrap; }
body.v5.mid .v5-tpane .v5-acts .v5-btn { padding: 8px 12px; }

/* ── телефон (≤860): одна панель за раз ───────────────────────────────── */

body.v5.narrow .page.v5cpage { padding: 0 0 76px; height: 100dvh; }
body.v5.narrow.inconv .page.v5cpage { padding: 0; }
body.v5.narrow .v5-chats { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
body.v5.narrow .v5-pane { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
body.v5.narrow:not(.inconv) .v5-tpane { display: none; }
body.v5.narrow.inconv .v5-lpane { display: none; }
body.v5.narrow .v5-lhead { padding: 14px 16px 10px; }
body.v5.narrow .v5-tpane .ctop3 { padding: 12px 14px; gap: 10px; }
/* дії — по дві в рядок (як у мокапі): три кнопки в один рядок на 390 px
   не влазять, і «Закрити ▾» обрізався краєм екрана */
body.v5.narrow .v5-tpane .ctop3 .v5-acts { width: 100%; flex-wrap: wrap; }
body.v5.narrow .v5-tpane .v5-acts .v5-btn { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; }
body.v5.narrow .v5-tpane .v5-acts .v5-btn.icon { flex: 0 0 auto; }
body.v5.narrow .v5-menu { left: 0; right: 0; min-width: 0; }
body.v5.narrow .v5-msgs { padding: 14px 12px; }
body.v5.narrow .v5-msgs .bub { max-width: 86%; }
body.v5.narrow .v5-state { padding: 9px 14px; }
body.v5.narrow .v5-composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
body.v5.narrow .v5-composer .v5-av { display: none; }
body.v5.narrow .v5-tpane .ovf.v5-drawer { width: 100%; }

/* ═════════════════════════════════════════════════════════════════════════
   Команда (етап 5, core/dashboard_v5.py → render_team) — `team()` мокапу,
   рядки 298-328: картки людей у чотири колонки, «Черга зараз», правила
   розподілу й перемикачі. Перемикач, якого бекенд ще не виконує, —
   `disabled` з підписом `.v5-soon`, а не зелений вимикач.
   ═════════════════════════════════════════════════════════════════════════ */

body.v5 .v5-teamp { min-width: 0; }
body.v5 .v5-tgrid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.v5 .v5-tlow { margin-top: 16px; align-items: start; }
body.v5 .v5-tcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* на широкому черга лишається на виду, поки власник гортає довгі правила */
body.v5:not(.mid) .v5-tlow > .v5-tcol.s5 { position: sticky; top: 16px; }
body.v5 .v5-mcard { display: flex; flex-direction: column; gap: 14px; }
body.v5 .v5-mcard.off { opacity: .7; }
body.v5 .v5-mtop { display: flex; align-items: center; gap: 12px; }
body.v5 .v5-av.lg { width: 48px; height: 48px; font-size: 17px; }
body.v5 .v5-mnm { font: 600 16px/1.25 var(--v5-display); overflow-wrap: anywhere; }
body.v5 .v5-mnm small { font: 500 12.5px var(--v5-body); color: var(--v5-ink3); }
body.v5 .v5-mrole { font-size: 12.5px; color: var(--v5-ink3); overflow-wrap: anywhere; }
body.v5 .v5-mshift { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
body.v5 .v5-shiftb { padding: 5px 12px; }
body.v5 .v5-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
body.v5 .v5-st::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v5-ink3); flex: none;
}
body.v5 .v5-st.on::before { background: var(--v5-ok); }
body.v5 .v5-st.unk { color: var(--v5-ink3); }
body.v5 .v5-mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.v5 .v5-mstats.q4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.v5 .v5-mstats > div { background: var(--v5-panel2); border-radius: 12px; padding: 10px; min-width: 0; }
body.v5 .v5-mstats .v5-num {
  font-size: 20px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis;
}
body.v5 .v5-mstats .v5-num i {
  font: 700 12px/1 var(--v5-body); font-style: normal; letter-spacing: 0; margin-left: 3px;
}
body.v5 .v5-mstats small { display: block; font-size: 12px; color: var(--v5-ink3); line-height: 1.3; }
body.v5 .v5-mopen { display: flex; flex-wrap: wrap; gap: 6px; }
body.v5 .v5-mopen a.v5-chip { text-decoration: none; }
body.v5 .v5-mopen a.v5-chip:hover { color: var(--v5-ink); }
body.v5 .v5-madm { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px dashed var(--v5-line); padding-top: 12px; }
body.v5 .v5-mcfg { margin: -6px 0 0; font-size: 12px; color: var(--v5-ink3); }

/* «+ Додати менеджера»: пунктирна картка, як у мокапі */
body.v5 .v5-addcard {
  border: 1.5px dashed var(--v5-line); background: transparent; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--v5-ink2); font: 800 14px var(--v5-body); min-height: 180px; cursor: pointer;
}
body.v5 .v5-addcard:hover { border-color: var(--v5-ink3); }
body.v5 .v5-addcard:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }
body.v5 .v5-addcard span { font-size: 28px; font-weight: 500; line-height: 1; }
body.v5 .v5-addcard small { font-weight: 500; color: var(--v5-ink3); font-size: 12.5px; }
body.v5 .v5-addcard[hidden], body.v5 .v5-addform[hidden], body.v5 .v5-tform[hidden],
body.v5 .v5-ferr[hidden], body.v5 .v5-otp[hidden] { display: none; }
body.v5 .v5-addform h3 { margin-bottom: 12px; }

/* форми картки: додати / змінити */
body.v5 .v5-tform { display: flex; flex-direction: column; gap: 10px; }
body.v5 .v5-tform label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
body.v5 .v5-tform label span { font-size: 12px; font-weight: 600; color: var(--v5-ink3); }
body.v5 .v5-tform input, body.v5 .v5-tform select {
  width: 100%; min-width: 0; border: 1px solid var(--v5-line); border-radius: 10px;
  background: var(--v5-panel2); color: var(--v5-ink); font: 500 13.5px/1.3 var(--v5-body);
  padding: 8px 10px;
}
body.v5 .v5-tform input:focus, body.v5 .v5-tform select:focus { outline: 2px solid var(--v5-accent); outline-offset: 0; }
body.v5 .v5-fbtns { display: flex; gap: 8px; flex-wrap: wrap; }
body.v5 .v5-ferr { margin: 0; font-size: 13px; font-weight: 700; color: var(--v5-bad); }

/* одноразовий пароль: видно до «Готово», у розмітці сервера його немає */
body.v5 .v5-otp {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 16px 20px;
  border-radius: var(--v5-r-s); border: 1px solid var(--v5-ok);
  background: color-mix(in srgb, var(--v5-ok) 9%, var(--v5-panel));
}
body.v5 .v5-otp > div { flex: 1; }
body.v5 .v5-otp .v5-otpt { font-weight: 800; }
body.v5 .v5-otp .v5-otpc {
  display: inline-block; margin-left: 8px; font: 600 16px var(--v5-mono); letter-spacing: .04em;
  user-select: all; overflow-wrap: anywhere;
}
body.v5 .v5-otp p { margin: 4px 0 0; font-size: 13px; color: var(--v5-ink2); }

/* вимкнені — згорнуто, лише адмінові */
body.v5 .v5-off { margin-top: 16px; }
body.v5 .v5-off summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--v5-ink3); padding: 4px 0 12px; }

/* «Черга зараз» */
body.v5 .v5-qrow {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--v5-line); position: relative;
}
body.v5 .v5-qrow:last-child { border-bottom: 0; }
body.v5 .v5-gav.s40 { width: 40px; height: 40px; }
body.v5 .v5-gav.s40 .v5-ini { font-size: 14px; }
body.v5 .v5-qnm { font-weight: 800; color: var(--v5-ink); text-decoration: none; }
body.v5 .v5-qnm:hover { text-decoration: underline; }
body.v5 .v5-why {
  font-size: 13px; color: var(--v5-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v5 .v5-qact { position: static; }
body.v5 .v5-qact .v5-btn { padding: 7px 13px; }

/* правила розподілу */
body.v5 .v5-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.v5 .v5-rule {
  border: 1px solid var(--v5-line); border-radius: var(--v5-r-s); padding: 16px; background: transparent;
  text-align: left; display: flex; flex-direction: column; gap: 6px; color: var(--v5-ink);
  font: 500 13px/1.4 var(--v5-body); min-width: 0;
}
body.v5 button.v5-rule { cursor: pointer; }
body.v5 button.v5-rule:hover { border-color: var(--v5-ink3); }
/* неактивний режим: текст лишається читабельним (≥4.5:1), про недоступність
   кажуть пунктирна рамка, курсор і підпис кольором попередження */
body.v5 button.v5-rule:disabled { cursor: not-allowed; border-style: dashed; }
body.v5 button.v5-rule:disabled:hover { border-color: var(--v5-line); }
body.v5 button.v5-rule:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }
body.v5 .v5-rule b { font-size: 14.5px; }
body.v5 .v5-rule span { font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-rule.on { border-color: var(--v5-ink); box-shadow: inset 0 0 0 1px var(--v5-ink); }
body.v5 .v5-rule .v5-pick { font-size: 12px; font-weight: 800; color: var(--v5-ok); }
body.v5 .v5-soon { display: block; font-size: 12px; font-weight: 600; color: var(--v5-warn); }
body.v5 .v5-tgls { margin-top: 14px; }
body.v5 .v5-tgl {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--v5-line);
}
body.v5 .v5-tgl:last-child { border-bottom: 0; }
body.v5 .v5-tgl p { margin: 2px 0 0; font-size: 13px; color: var(--v5-ink3); }
body.v5 .v5-tgl p.v5-soon { color: var(--v5-warn); }
/* «Мій Telegram» (C4) і правила команд (C9) */
body.v5 .v5-tgcard p { margin: 8px 0 0; font-size: 13px; color: var(--v5-ink2); }
body.v5 .v5-tgcard .v5-st { margin-right: 6px; }
body.v5 .v5-tglink a { font-weight: 700; color: var(--v5-ink); }
body.v5 .v5-tglink[hidden] { display: none; }
body.v5 .v5-rules-form { margin-top: 12px; }
body.v5 .v5-rrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.v5.narrow .v5-rrow { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--v5-line); }
body.v5 .v5-rlist { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--v5-ink2); }
body.v5 .v5-sw {
  width: 44px; height: 26px; border-radius: 13px; border: 0; background: var(--v5-line);
  position: relative; flex: none; cursor: pointer; padding: 0;
}
body.v5 .v5-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--v5-p-ink); transition: left .15s;
}
body.v5 .v5-sw[aria-checked="true"] { background: var(--v5-ok); }
body.v5 .v5-sw[aria-checked="true"]::after { left: 21px; }
body.v5 .v5-sw:disabled { cursor: not-allowed; opacity: .5; }
body.v5 .v5-sw:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }
body.v5.reduce-motion .v5-sw::after { transition: none; }

/* ≤1180: дві колонки карток, черга й правила — на всю ширину (s5/s7 вище) */
body.v5.mid .v5-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* телефон (≤860): одна колонка, у черзі ховаємо чип очікування */
body.v5.narrow .v5-tgrid { grid-template-columns: minmax(0, 1fr); }
body.v5.narrow .v5-rules { grid-template-columns: minmax(0, 1fr); }
body.v5.narrow .v5-qrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
body.v5.narrow .v5-qrow .v5-chip { display: none; }
body.v5.narrow .v5-otp { flex-direction: column; align-items: flex-start; }
body.v5.narrow .v5-addcard { min-height: 120px; }

/* ── вхід (/login) ───────────────────────────────────────────────────────
   Рейки немає: людина ще не увійшла. Дві половини — темний герой зі сяйвом
   (той самий, що на «Аналітиці») і форма. Без @media: flex-wrap з базовою
   шириною сам ставить їх одну під одною на телефоні. */

body.v5.v5-authpage {
  min-height: 100vh; background: var(--v5-bg); color: var(--v5-ink);
  font-family: var(--v5-body); display: grid; place-items: center;
  padding: 24px 16px;
}
/* wrap-reverse: на широкому екрані — один ряд, герой ліворуч; коли половини
   стають одна під одною (телефон), форма йде ПЕРШОЮ, а герой — під нею:
   на 375×667 поле й кнопка мають бути на першому екрані без прокрутки. */
body.v5 .v5-auth {
  width: 100%; max-width: 940px; display: flex; flex-wrap: wrap-reverse;
  background: var(--v5-panel); border: 1px solid var(--v5-line);
  border-radius: calc(var(--v5-r) + 6px); box-shadow: var(--v5-shadow); overflow: hidden;
}
body.v5 .v5-auth-hero {
  flex: 1 1 360px; min-width: 0; position: relative; overflow: hidden;
  background: var(--v5-hero); color: var(--v5-hero-ink);
  padding: clamp(26px, 5vw, 44px); display: flex; flex-direction: column; gap: 22px;
}
body.v5 .v5-auth-hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; left: -12%; top: -300px;
  border-radius: 50%; background: radial-gradient(circle, var(--v5-glow), transparent 62%);
  pointer-events: none;
}
body.v5 .v5-auth-hero > * { position: relative; }

body.v5 .v5-auth-head { margin-top: auto; }
body.v5 .v5-auth-title {
  font: 700 clamp(32px, 5vw, 46px)/1.04 var(--v5-display); letter-spacing: -.03em;
  color: var(--v5-hero-ink); overflow-wrap: anywhere;
}
body.v5 .v5-auth-sub { margin-top: 10px; font-size: 15px; color: var(--v5-hero-ink2); }
body.v5 .v5-auth-pts {
  list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--v5-hero-ink2);
  border-top: 1px solid color-mix(in srgb, var(--v5-hero-ink) 12%, transparent); padding-top: 18px;
}
body.v5 .v5-auth-pts li { display: flex; gap: 10px; align-items: baseline; }
body.v5 .v5-auth-pts li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--v5-bot); transform: translateY(-1px);
}
body.v5 .v5-auth-form {
  flex: 1 1 320px; min-width: 0; padding: clamp(26px, 5vw, 44px);
  display: flex; flex-direction: column; justify-content: center;
}
body.v5 .v5-auth-form h2 { font: 600 26px/1.2 var(--v5-display); letter-spacing: -.02em; color: var(--v5-ink); }
body.v5 .v5-auth-form .v5-sub { margin-top: 6px; font-size: 13.5px; }
body.v5 .v5-auth-err {
  margin-top: 18px; padding: 11px 14px; border-radius: var(--v5-r-s);
  font-size: 13px; font-weight: 700; color: var(--v5-bad);
  background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel));
  border: 1px solid color-mix(in srgb, var(--v5-bad) 35%, var(--v5-line));
}
body.v5 .v5-auth-f { display: grid; gap: 14px; margin-top: 22px; }
body.v5 .v5-auth-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--v5-ink2); }
body.v5 .v5-auth-field input {
  width: 100%; padding: 12px 14px; margin: 0; border: 1px solid var(--v5-line);
  border-radius: var(--v5-r-s); background: var(--v5-panel2); color: var(--v5-ink);
  font: 500 15px var(--v5-body); outline: none;
}
body.v5 .v5-auth-field input:focus {
  border-color: var(--v5-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-accent) 20%, transparent);
}
body.v5 .v5-auth-btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14px; margin-top: 4px; }
body.v5 .v5-auth-btn:hover { filter: brightness(1.06); }


/* ── модалка (<dialog class="v5-dlg">) ────────────────────────────────────
   Сам <dialog> — це затемнення на весь екран (кольором токена, бо ::backdrop
   у старих рушіях не успадковує змінних), а панель — `.v5-dlgin`. Клік по
   затемненню = клік по самому <dialog>, і v5.js закриває модалку. */
body.v5.v5-lock { overflow: hidden; }
body.v5 .v5-dlg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px 16px; border: 0; box-sizing: border-box;
  background: var(--v5-scrim); color: var(--v5-ink);
  display: none; align-items: center; justify-content: center; z-index: 80;
}
body.v5 .v5-dlg[open] { display: flex; }
body.v5 .v5-dlg::backdrop { background: transparent; }
body.v5 .v5-dlgin {
  background: var(--v5-panel); border-radius: var(--v5-r); box-shadow: var(--v5-menu-shadow);
  width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  overflow: hidden; font: 500 14px/1.5 var(--v5-body); text-align: left;
}
body.v5 .v5-dlg.wide .v5-dlgin { width: min(820px, 100%); }
body.v5 .v5-dlgh { display: flex; align-items: center; gap: 12px; padding: 20px 22px 12px; }
body.v5 .v5-dlgh h3 { margin: 0; flex: 1; font: 600 18px/1.25 var(--v5-display); letter-spacing: -.01em; }
body.v5 .v5-x {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--v5-line);
  background: transparent; color: var(--v5-ink3); font: 500 20px/1 var(--v5-body); cursor: pointer;
}
body.v5 .v5-x:hover { background: var(--v5-panel2); color: var(--v5-ink); }
body.v5 .v5-dlgb { padding: 4px 22px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
body.v5 .v5-dlgf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--v5-line);
}
body.v5.narrow .v5-dlg { align-items: flex-end; padding: 0; }
body.v5.narrow .v5-dlgf .v5-sp { display: none; }
body.v5.narrow .v5-dlgf .v5-btn { flex: 1 1 0; justify-content: center; text-align: center; }
/* на телефоні «Скасувати» й «Зберегти» — поруч, другорядна дія — окремим рядком нижче */
body.v5.narrow .v5-dlgf .v5-danger, body.v5.narrow .v5-dlgf .v5-btn.sm { order: 2; flex-basis: 100%; }
body.v5.narrow .v5-dlgin { width: 100%; max-height: 92vh; border-radius: var(--v5-r) var(--v5-r) 0 0; }

/* поля форм у модалках */
body.v5 .v5-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
body.v5 .v5-frow { display: flex; gap: 12px; flex-wrap: wrap; }
body.v5 .v5-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: none; margin: 0; }
/* у рядку поля діляться шириною; у стовпці форми — лише своя висота */
body.v5 .v5-frow > .v5-fld { flex: 1 1 180px; }
body.v5 .v5-frow > .v5-fs { flex: 0 0 110px; }
body.v5 .v5-fld > span { font-size: 12.5px; font-weight: 700; color: var(--v5-ink2); }
body.v5 .v5-fld small { font-size: 12px; color: var(--v5-ink3); line-height: 1.4; }
body.v5 .v5-fld[hidden], body.v5 .v5-check[hidden], body.v5 .v5-btn[hidden] { display: none; }
body.v5 .v5-fld input, body.v5 .v5-fld select, body.v5 .v5-fld textarea,
body.v5 .v5-trgh input, body.v5 .v5-askf textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--v5-line); border-radius: 12px;
  background: var(--v5-panel); color: var(--v5-ink); padding: 10px 12px;
  font: 500 14px/1.4 var(--v5-body); outline: none;
}
body.v5 .v5-fld textarea, body.v5 .v5-askf textarea { resize: vertical; }
body.v5 .v5-fld input:focus, body.v5 .v5-fld select:focus, body.v5 .v5-fld textarea:focus,
body.v5 .v5-trgh input:focus, body.v5 .v5-askf textarea:focus {
  border-color: var(--v5-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-accent) 20%, transparent);
}
body.v5 .v5-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
body.v5 .v5-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--v5-accent); flex: none; }
body.v5 .v5-mono { font-family: var(--v5-mono); font-size: 12.5px; }
body.v5 .v5-btn.v5-danger { color: var(--v5-bad); border-color: color-mix(in srgb, var(--v5-bad) 40%, var(--v5-line)); }
body.v5 .v5-okline { margin: 0; font-size: 13px; font-weight: 700; color: var(--v5-ok); }

/* ── Автоматизація: чотири рівноправні блоки 2×2 ──────────────────────────
   Однакова ширина й висота, однакова будова (dashboard_v5.au_card): шапка з
   однією головною дією, тіло зі списком, що прокручується всередині картки,
   і підвал «підсумок · Журнал →». Жоден блок не більший за інший. */
body.v5 .v5-augrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 470px; gap: 16px;
}
/* два стовпці аж до телефона: на 1180 один стовпець розтягував блоки на всю ширину */
body.v5.narrow .v5-augrid { grid-template-columns: minmax(0, 1fr); }
body.v5 .v5-autop .v5-au { scroll-margin-top: 16px; }
body.v5 .v5-au { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
body.v5 .v5-au .v5-ch { margin-bottom: 0; }
body.v5 .v5-aubody { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
/* телефон: один стовпець, але блоки тієї самої висоти (шапка переноситься
   по-різному — тож фіксуємо всю картку, а тіло займає решту) */
body.v5.narrow .v5-augrid { grid-auto-rows: 520px; }
body.v5 .v5-aufoot > span { flex: 1 1 auto; min-width: 0; }
body.v5 .v5-aufoot .v5-jlink { flex: none; white-space: nowrap; }
body.v5 .v5-aufoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
  padding-top: 12px; border-top: 1px dashed var(--v5-line); font-size: 13px; color: var(--v5-ink3);
}
body.v5 .v5-jlink {
  border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--v5-ink);
  font: 800 13px/1.4 var(--v5-body); text-decoration: underline; text-underline-offset: 3px;
}
body.v5 .v5-jlink:hover { color: var(--v5-accent); }
body.v5 .v5-alist { display: flex; flex-direction: column; }
body.v5 .v5-aurow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--v5-line); }
body.v5 .v5-aurow:first-child { border-top: 0; padding-top: 2px; }
body.v5 .v5-aurow > .v5-min0 { flex: 1; display: flex; flex-direction: column; gap: 2px; }
body.v5 .v5-aurow b { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v5 .v5-aurow > .v5-min0 > span { font-size: 12.5px; color: var(--v5-ink3); }
body.v5 .v5-aurow.off b { color: var(--v5-ink3); }
body.v5 .v5-aurow .v5-sw { flex: none; }
/* рядки блоків однакової висоти: мета — в один рядок із трикрапкою (повне —
   у модалці), щоб жоден блок не вміщав менше рядків, ніж сусідній */
body.v5 .v5-aubody .v5-aurow > .v5-min0 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v5 .v5-more {
  width: 100%; border: 0; border-top: 1px solid var(--v5-line); background: transparent; cursor: pointer;
  padding: 11px 0 0; text-align: left; color: var(--v5-ink); font: 800 13px/1.4 var(--v5-body);
}
body.v5 .v5-more:hover { color: var(--v5-accent); }
/* «як це працює» в порожньому блоці */
body.v5 .v5-steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: v5s; display: grid; gap: 10px; }
body.v5 .v5-steps li {
  counter-increment: v5s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center;
  background: var(--v5-panel2); border-radius: var(--v5-r-s); padding: 12px 14px;
}
body.v5 .v5-steps li::before {
  content: counter(v5s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--v5-panel); font: 600 14px/1 var(--v5-display);
}
body.v5 .v5-steps b { font-size: 14px; font-weight: 800; }
body.v5 .v5-steps span { font-size: 12.5px; color: var(--v5-ink3); }
/* рядок щоденного звіту — кнопка, що відкриває звіт */
body.v5 .v5-reprow {
  width: 100%; border: 0; border-top: 1px solid var(--v5-line); background: transparent;
  color: var(--v5-ink); text-align: left; font: inherit; cursor: pointer; border-radius: 0;
}
body.v5 .v5-reprow:first-child { border-top: 0; }
body.v5 .v5-reprow:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* журнали в модалках — список, не таблиця: текст переноситься, скролу вбік немає */
body.v5 .v5-jrow {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 0;
  border: 0; border-top: 1px solid var(--v5-line); background: transparent;
  color: var(--v5-ink); text-align: left; font: 500 14px/1.5 var(--v5-body);
}
body.v5 .v5-jrow:first-child { border-top: 0; padding-top: 0; }
body.v5 button.v5-jrow { cursor: pointer; }
body.v5 button.v5-jrow:hover p { color: var(--v5-ink); }
body.v5 .v5-jmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
body.v5 .v5-jmeta .v5-mono { color: var(--v5-ink3); }
body.v5 .v5-jmeta b { overflow-wrap: anywhere; }
body.v5 .v5-jrow p { margin: 0; color: var(--v5-ink2); overflow-wrap: anywhere; white-space: pre-line; }
body.v5 .v5-genf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--v5-line);
}
body.v5 .v5-genf small { font-size: 12px; color: var(--v5-ink3); }
/* переглядач звіту */
body.v5 .v5-repv { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
body.v5 .v5-repv a { color: var(--v5-accent); font-weight: 700; }
body.v5 .v5-temo {
  width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--v5-panel2);
  display: grid; place-items: center; font-size: 16px;
}

/* тригери в модалці: картка на категорію */
body.v5 .v5-trg {
  border: 1px solid var(--v5-line); border-radius: var(--v5-r-s); padding: 14px; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
body.v5 .v5-trgh { display: flex; align-items: center; gap: 10px; }
body.v5 .v5-trgh input.v5-mono { flex: 1; min-width: 0; width: auto; }

/* звіти: стрічка «питання → відповідь» */
body.v5 .v5-askleft { margin: 0 0 10px; }
body.v5 .v5-askt {
  display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; padding: 2px;
  margin-bottom: 12px;
}
body.v5 .v5-q {
  align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; gap: 2px;
  background: var(--v5-ink); color: var(--v5-bg); border-radius: 16px 16px 4px 16px; padding: 10px 14px;
}
body.v5 .v5-q span { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
body.v5 .v5-q small { font-size: 11px; opacity: .7; }
body.v5 .v5-a {
  align-self: flex-start; max-width: 92%; background: var(--v5-panel2); border-radius: 16px 16px 16px 4px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere;
}
body.v5 .v5-a a { color: var(--v5-accent); font-weight: 700; }
body.v5 .v5-askj { display: flex; flex-direction: column; gap: 10px; }
body.v5 .v5-a.v5-pend { color: var(--v5-ink3); font-style: italic; }
body.v5 .v5-tips { display: flex; flex-wrap: wrap; gap: 6px; }
body.v5 .v5-chip.v5-tip {
  border: 1px solid var(--v5-line); background: var(--v5-panel); color: var(--v5-ink2);
  font-family: var(--v5-body); padding: 5px 11px; cursor: pointer;
}
body.v5 .v5-chip.v5-tip:hover { background: var(--v5-panel2); color: var(--v5-ink); }
body.v5 .v5-askf { display: flex; gap: 10px; align-items: flex-end; margin: 0; }
body.v5 .v5-askf textarea { flex: 1; min-height: 48px; resize: none; }
body.v5 .v5-askf .v5-btn { flex: none; }

/* розсилка в модалці: той самий фрагмент, без «картки в картці» */
body.v5 .v5-dlg .bcwrap,
body.v5.v5s-auto .v5-dlg .bcwrap {
  max-width: none !important; border: 0; box-shadow: none; background: transparent; overflow: visible;
}
body.v5 .v5-dlg .bcwrap > .cb { padding: 0; }

/* ── сповіщення: дзвіночок, поповер, /alerts ───────────────────────────── */
body.v5 .irail .v5-bell { margin-bottom: 6px; }
/* поповер відкрито — підказка рейки не лізе поверх нього */
body.v5 .irail .v5-bell[aria-expanded="true"]::after { visibility: hidden; opacity: 0; }
body.v5 .ir .v5-bcnt {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px; text-align: center;
  background: var(--v5-bad); color: var(--v5-on-bad); font: 800 10.5px/18px var(--v5-body);
}
body.v5.narrow .tabbar a .v5-bcnt {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px; text-align: center;
  background: var(--v5-bad); color: var(--v5-on-bad); font: 800 10.5px/18px var(--v5-body);
}
body.v5 .oi .v5-bcnt {
  margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  background: var(--v5-bad); color: var(--v5-on-bad); font: 800 11px/20px var(--v5-body); text-align: center;
}
body.v5 .v5-pop {
  position: fixed; z-index: 70; width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--v5-panel); border: 1px solid var(--v5-line); border-radius: var(--v5-r-s);
  box-shadow: var(--v5-menu-shadow); padding: 6px 8px; color: var(--v5-ink); font: 500 14px/1.45 var(--v5-body);
}
body.v5 .v5-pop[hidden] { display: none; }
body.v5 .v5-popl { display: flex; flex-direction: column; }
body.v5 .v5-popf { padding: 10px 6px 6px; border-top: 1px solid var(--v5-line); }
body.v5 .v5-poplink {
  font-weight: 800; font-size: 13px; color: var(--v5-ink); text-decoration: underline; text-underline-offset: 3px;
}
body.v5 .v5-pop .v5-empty { padding: 12px 6px; }
body.v5 .v5-alertsp .v5-alcard { padding: 6px 24px; }
body.v5 .v5-alrow { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-top: 1px solid var(--v5-line); }
body.v5 .v5-alrow:first-child { border-top: 0; }
body.v5 .v5-alrow > .v5-min0 { flex: 1; }
body.v5 .v5-pop .v5-alrow { flex-wrap: wrap; gap: 8px; padding: 10px 6px; }
body.v5.narrow .v5-alrow { flex-wrap: wrap; }
body.v5.narrow .v5-alrow > .v5-min0 { flex-basis: 100%; }
body.v5 .v5-empty .v5-tips { margin-top: 12px; }
body.v5 .v5-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.v5 .v5-alt a { color: var(--v5-ink); text-decoration: none; }
body.v5 .v5-alt a:hover { text-decoration: underline; }
body.v5 .v5-alt small { font-size: 12px; color: var(--v5-ink3); }
body.v5 .v5-alrow p { margin: 6px 0 0; font-size: 13.5px; color: var(--v5-ink2); overflow-wrap: anywhere; }
body.v5 .v5-alrow.bad { box-shadow: inset 3px 0 0 var(--v5-bad); padding-left: 12px; }
body.v5 .v5-alrow.warn { box-shadow: inset 3px 0 0 var(--v5-warn); padding-left: 12px; }
body.v5 .v5-alrow.ok { box-shadow: inset 3px 0 0 var(--v5-ok); padding-left: 12px; }
body.v5 .v5-chip.bad { color: var(--v5-bad); background: color-mix(in srgb, var(--v5-bad) 13%, transparent); }
body.v5 .v5-chip.warn { color: var(--v5-warn); background: color-mix(in srgb, var(--v5-warn) 15%, transparent); }
body.v5 .v5-chip.ok { color: var(--v5-ok); background: color-mix(in srgb, var(--v5-ok) 13%, transparent); }



/* ═════════════════════════════════════════════════════════════════════════
   ЕТАП 6 — наявні екрани в мові v5: CRM і картка угоди, Автоматизація,
   Промти, Звіти, Керування, синхронізація status_crm, /chat_analyze,
   /delay_approve і сторінки-результати.

   Розмітку цих екранів НЕ форковано: палітру дає міст (`body.v5.sk`), а тут
   лише форма, типографіка й ритм у словнику мокапу — картки 22, плитки 14,
   «пігулки», Unbounded у заголовках, Manrope в тексті, JetBrains Mono в
   числах, чорнильні кнопки, сегменти, пунктирні примітки.

   Скоуп — класи, які `_body_cls(config, screen=…)` ставить ЛИШЕ у v5:
   `v5x` (спільна мова) і `v5s-<екран>`. «Чати», «Аналітика» й «Команда»
   мають власну розмітку v5 і цих класів не отримують — правила нижче їх не
   торкаються.

   Старі f-рядки несуть інлайнові `style="…"` (радіуси 4–10 px, відступи,
   кегль). Перемогти їх можна лише `!important`, тож він тут стоїть ТІЛЬКИ на
   властивостях, які задані інлайново, і ЛИШЕ в селекторах, прицілених у
   конкретний елемент. Кольори в тих атрибутах — токени app.css, їх уже
   перефарбовує міст.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── спільне: заголовки, підписи, примітки ───────────────────────────── */

body.v5.v5x .page h1 { margin: 0 0 4px; }
body.v5.v5x .page h2 { font: 600 18px/1.25 var(--v5-display) !important; letter-spacing: -.01em; color: var(--v5-ink); }
body.v5.v5x .lbl {
  font: 700 11.5px/1.3 var(--v5-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--v5-ink3);
}
body.v5.v5x .hint { font-size: 12.5px; color: var(--v5-ink3); }
body.v5.v5x .note {
  background: transparent; border: 1px dashed var(--v5-line); border-radius: var(--v5-r-s);
  padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--v5-ink3);
}
body.v5.v5x .note b { color: var(--v5-ink2); }
body.v5.v5x .page code { font-family: var(--v5-mono); font-size: .92em; }
body.v5.v5x .clast, body.v5.v5x .empty { color: var(--v5-ink3); }

/* ── картки: радіус 22, шапка — заголовок картки, а не смуга ─────────── */

body.v5.v5x .card { overflow: hidden; margin-bottom: 16px; }
body.v5.v5x .ch {
  background: transparent; border-bottom: 0; padding: 20px 24px 4px; gap: 10px; flex-wrap: wrap;
  font: 600 16px/1.3 var(--v5-display); letter-spacing: -.01em; color: var(--v5-ink);
}
body.v5.v5x .ch b { font-weight: 600; }
body.v5.v5x .cb { padding: 14px 24px 22px; }
body.v5.v5x .res { border-radius: var(--v5-r-s); font-weight: 600; }
body.v5.v5x .res.ok { color: color-mix(in srgb, var(--v5-ok) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-ok) 10%, var(--v5-panel)); box-shadow: none; }
body.v5.v5x .res.err { color: color-mix(in srgb, var(--v5-bad) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel)); box-shadow: none; }

/* ── кнопки: пігулки; основна — чорнило, підтвердження — акцент ──────── */

body.v5.v5x .btn {
  border-radius: var(--v5-pill); padding: 9px 16px; gap: 8px;
  font: 800 13px/1.2 var(--v5-body); text-decoration: none; white-space: nowrap;
  background: transparent; border: 1px solid var(--v5-line); color: var(--v5-ink); box-shadow: none;
}
body.v5.v5x .btn:hover { background: var(--v5-panel2); border-color: var(--v5-line); }
body.v5.v5x .btn-blue, body.v5.v5x .btn-primary, body.v5.v5x .btn.solid {
  background: var(--v5-ink); color: var(--v5-bg); border-color: var(--v5-ink);
}
body.v5.v5x .btn-blue:hover, body.v5.v5x .btn-primary:hover, body.v5.v5x .btn.solid:hover {
  background: var(--v5-ink); opacity: .88;
}
body.v5.v5x .btn-green { background: var(--v5-ink); color: var(--v5-bg); border-color: var(--v5-ink); }
body.v5.v5x .btn-green:hover { background: var(--v5-ink); opacity: .88; }
body.v5.v5x .btn-gray, body.v5.v5x .btn.quiet { color: var(--v5-ink2); }
body.v5.v5x .btn-red { color: var(--v5-bad); border-color: color-mix(in srgb, var(--v5-bad) 45%, var(--v5-line)); }
body.v5.v5x .btn-red:hover { background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel)); }
body.v5.v5x .btn-amber { color: var(--v5-warn); border-color: color-mix(in srgb, var(--v5-warn) 45%, var(--v5-line)); }
body.v5.v5x .btn-amber:hover { background: color-mix(in srgb, var(--v5-warn) 10%, var(--v5-panel)); }
body.v5.v5x .btn.sm { padding: 6px 12px; font-size: 12px; }
body.v5.v5x .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── сегменти: як перемикач періоду в мокапі ─────────────────────────── */

body.v5.v5x .seg {
  background: var(--v5-panel); border: 1px solid var(--v5-line); border-radius: var(--v5-pill);
  padding: 4px; gap: 2px; max-width: 100%;
}
body.v5.v5x .seg a, body.v5.v5x .seg button {
  padding: 7px 14px; border-radius: var(--v5-pill); border: 0; box-shadow: none;
  font: 700 13px/1.2 var(--v5-body); color: var(--v5-ink3); white-space: nowrap; background: transparent;
}
body.v5.v5x .seg a:hover, body.v5.v5x .seg button:hover { color: var(--v5-ink); }
body.v5.v5x .seg a.on, body.v5.v5x .seg button.on { background: var(--v5-ink); color: var(--v5-bg); }

/* ── поля: плитки 14, Manrope 14 ─────────────────────────────────────── */

body.v5.v5x .page input[type="text"], body.v5.v5x .page input[type="password"],
body.v5.v5x .page input[type="number"], body.v5.v5x .page input:not([type]),
body.v5.v5x .page textarea, body.v5.v5x .page select,
body.v5.v5x .inp, body.v5.v5x .ta, body.v5.v5x .sel,
body.v5.v5x .modal input:not([type]), body.v5.v5x .modal select {
  font: 500 14px/1.45 var(--v5-body); color: var(--v5-ink); background: var(--v5-panel);
  border: 1px solid var(--v5-line); border-radius: var(--v5-r-s); padding: 10px 14px; outline: none;
}
body.v5.v5x .page input:focus, body.v5.v5x .page textarea:focus, body.v5.v5x .page select:focus,
body.v5.v5x .modal input:focus, body.v5.v5x .modal select:focus {
  border-color: var(--v5-ink); outline: 2px solid color-mix(in srgb, var(--v5-ink) 14%, transparent); outline-offset: 0;
}
body.v5.v5x .page input::placeholder, body.v5.v5x .page textarea::placeholder,
body.v5.v5x .modal input::placeholder { color: var(--v5-ink3); }
body.v5.v5x .page input:disabled, body.v5.v5x .page textarea:disabled, body.v5.v5x .page select:disabled,
body.v5.v5x .page textarea[readonly] {
  background: var(--v5-panel2); color: var(--v5-ink2); cursor: default;
}
body.v5.v5x .field > span { font-size: 12.5px; font-weight: 700; color: var(--v5-ink2); }

/* перемикачі: той самий `.v5-sw` «Команди» — лінія, увімкнено — зелений */
body.v5.v5x .tog { width: 44px; height: 26px; }
body.v5.v5x .tog .sl { background: var(--v5-line); border-radius: 13px; }
body.v5.v5x .tog .sl::before {
  width: 20px; height: 20px; left: 3px; bottom: 3px; background: var(--v5-p-ink); box-shadow: none;
}
body.v5.v5x .tog input:checked + .sl { background: var(--v5-ok); }
body.v5.v5x .tog input:checked + .sl::before { transform: translateX(18px); }
body.v5.v5x .tog input:focus-visible + .sl { outline: 2px solid var(--v5-accent); outline-offset: 2px; }
body.v5.v5x .tog input:disabled + .sl { opacity: .55; cursor: not-allowed; }
body.v5.v5x .swcb {
  width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--v5-line);
}
body.v5.v5x .swcb::after { width: 20px; height: 20px; background: var(--v5-p-ink); box-shadow: none; }
body.v5.v5x .swcb:checked { background: var(--v5-ok); }
body.v5.v5x .swcb:checked::after { left: 21px; }
body.v5.v5x .swcb:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }
body.v5.reduce-motion.v5x .tog .sl, body.v5.reduce-motion.v5x .tog .sl::before,
body.v5.reduce-motion.v5x .swcb, body.v5.reduce-motion.v5x .swcb::after { transition: none; }

/* таблиці: підписи стовпців — підписи мокапу */
body.v5.v5x .tbl th, body.v5.v5x .card table th {
  font: 700 11px/1.3 var(--v5-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--v5-ink3); padding: 10px 24px; border-bottom: 1px solid var(--v5-line);
}
body.v5.v5x .tbl td, body.v5.v5x .card table td {
  padding: 11px 24px; border-bottom: 1px solid var(--v5-line); font-size: 13.5px; color: var(--v5-ink);
}
body.v5.v5x .tbl tbody tr:hover { background: var(--v5-panel2); }

/* плитки статистики (.sg/.st/.sv/.sl) = .tile мокапу */
body.v5.v5x .sg { gap: 12px; }
body.v5.v5x .sg .st {
  background: var(--v5-panel2); border: 0; border-radius: var(--v5-r-s); padding: 14px 16px; box-shadow: none;
}
body.v5.v5x .st .sv, body.v5.v5x .sg .sv {
  font: 500 30px/1.05 var(--v5-num); letter-spacing: -.02em; color: var(--v5-ink); font-variant-numeric: tabular-nums;
}
body.v5.v5x .st .sl, body.v5.v5x .sg .sl { margin-top: 6px; font: 600 12.5px/1.4 var(--v5-body); color: var(--v5-ink3); }
/* текст чипів і рядків результату — колір стану, притемнений чорнилом:
   чистий --v5-warn на своєму відтінку дає 4.2:1, а треба ≥4.5 */
body.v5.v5x .badge {
  border-radius: var(--v5-pill); padding: 3px 10px; box-shadow: none;
  font: 800 12px/1.3 var(--v5-body); letter-spacing: 0; text-transform: none;
}
body.v5.v5x .badge-ok { color: color-mix(in srgb, var(--v5-ok) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-ok) 13%, var(--v5-panel)); }
body.v5.v5x .badge-warn { color: color-mix(in srgb, var(--v5-warn) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-warn) 13%, var(--v5-panel)); }
body.v5.v5x .badge-err { color: color-mix(in srgb, var(--v5-bad) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-bad) 13%, var(--v5-panel)); }

/* поле сторінки — те саме, що в «Аналітики» й «Команди» (`.page.v5page`):
   заголовок стоїть в одній точці на кожному екрані, нічого не «стрибає» */
body.v5.v5x .page, body.v5.v5x .page.pad { padding: 18px 28px 96px 6px; }
/* /chat_analyze і /delay_approve центрувались (`max-width` + `margin: 0 auto`
   інлайново): шапку лишаємо на місці, вужчим робимо лише вміст */
body.v5.v5s-analyze .page { max-width: none !important; margin: 0 0 0 76px !important; }
body.v5.v5s-analyze .page > :not(.v5-top), body.v5.v5s-delay .page > :not(.v5-top) { max-width: 900px; }

/* шапка екрана (core/dashboard_v5.page_head): та сама `.v5-top`, що на
   «Аналітиці»; праворуч — керування, під заголовком — підпис */
body.v5.v5x .v5-top { margin-bottom: 20px; font: 500 14px/1.45 var(--v5-body); color: var(--v5-ink); }
body.v5.v5x .page > .v5-top + * { margin-top: 0; }
body.v5.v5x .v5-crumb .v5-hsub { margin-top: 2px; }
body.v5.v5x .v5-hright { justify-content: flex-end; min-width: 0; max-width: 100%; }
body.v5.v5x .v5-pill {
  border-radius: var(--v5-pill); background: var(--v5-panel2); padding: 5px 12px;
  font: 700 12.5px/1.3 var(--v5-body); color: var(--v5-ink2);
}
body.v5.v5x a.v5-btn.ghost { color: var(--v5-ink); }
body.v5.v5s-prompts .v5-ptabs { margin: 0 0 16px; }

/* «рядок дій»: кнопки переносяться, а не розпирають сторінку */
body.v5.v5x .v5-wrap { flex-wrap: wrap; }

/* ── CRM: дошка ──────────────────────────────────────────────────────── */

body.v5.v5s-crm .board { gap: 14px; padding: 2px 2px 16px; }
body.v5.v5s-crm .col {
  flex: 0 0 272px; background: var(--v5-panel); border: 1px solid var(--v5-line);
  border-radius: var(--v5-r); padding: 14px; box-shadow: var(--v5-shadow);
  transition: background .12s, outline-color .12s;
}
/* куди впаде картка під час перетягування */
body.v5.v5s-crm .col.over {
  background: color-mix(in srgb, var(--v5-accent) 7%, var(--v5-panel));
  outline: 2px dashed var(--v5-accent); outline-offset: -6px;
}
body.v5.v5s-crm .colh { padding: 2px 4px 12px; gap: 8px; }
body.v5.v5s-crm .colh .t { font: 600 14px/1.25 var(--v5-display); letter-spacing: -.01em; color: var(--v5-ink); }
body.v5.v5s-crm .colh .n {
  font: 600 11.5px/1.5 var(--v5-mono); background: var(--v5-panel2); border: 0;
  border-radius: var(--v5-pill); padding: 0 8px; color: var(--v5-ink2);
}
body.v5.v5s-crm .colh .lbl { font: 600 12px/1.3 var(--v5-mono); letter-spacing: 0; text-transform: none; color: var(--v5-ink3); }
body.v5.v5s-crm .deal {
  background: var(--v5-panel2); border: 1px solid transparent; border-radius: var(--v5-r-s);
  padding: 12px 14px; margin: 0; cursor: grab; box-shadow: none;
}
body.v5.v5s-crm .deal:hover { border-color: var(--v5-line); background: var(--v5-panel); box-shadow: var(--v5-shadow); }
body.v5.v5s-crm .deal:active { cursor: grabbing; }
body.v5.v5s-crm .deal .dn { font: 700 13.5px/1.35 var(--v5-body); color: var(--v5-ink); }
body.v5.v5s-crm .deal .dp { font: 600 12px/1.3 var(--v5-mono); color: var(--v5-ink2); }
body.v5.v5s-crm .col-b { gap: 8px; }
body.v5.v5s-crm .col .empty { padding: 14px; font-size: 12.5px; }
/* «＋ Додати» — пунктирна плитка, як «+ Додати менеджера» */
body.v5.v5s-crm .js-new-deal {
  margin-top: 10px; border: 1px dashed var(--v5-line); border-radius: var(--v5-r-s);
  background: transparent; color: var(--v5-ink2); padding: 9px 12px;
}
body.v5.v5s-crm .js-new-deal:hover { border-color: var(--v5-ink3); color: var(--v5-ink); background: transparent; }

/* ── CRM: картка угоди (модалка, `#dealModal`) ───────────────────────── */

body.v5.v5s-crm .modal-bg {
  background: color-mix(in srgb, var(--v5-hero) 55%, transparent); align-items: flex-start;
}
/* висота — за вмістом: гортає `.modal-bg` (overflow-y: auto), тож поле
   «написати» досяжне на 390×844 і 1366×700 */
body.v5.v5s-crm .modal {
  max-height: none; overflow: visible; flex: none; margin-bottom: 24px;
  width: min(980px, 100%); background: var(--v5-panel); border: 1px solid var(--v5-line);
  border-radius: var(--v5-r); box-shadow: var(--v5-menu-shadow); color: var(--v5-ink);
}
body.v5.v5s-crm .modal-h {
  padding: 18px 24px; border-bottom: 1px solid var(--v5-line);
  border-radius: var(--v5-r) var(--v5-r) 0 0; background: var(--v5-panel);
}
body.v5.v5s-crm .modal-h h3 { font: 600 18px/1.25 var(--v5-display); letter-spacing: -.01em; }
body.v5.v5s-crm .modal-x {
  width: 36px; height: 36px; border: 1px solid var(--v5-line); background: var(--v5-panel);
  color: var(--v5-ink); border-radius: var(--v5-pill);
}
body.v5.v5s-crm .modal-x:hover { background: var(--v5-panel2); }
body.v5.v5s-crm .modal-b { padding: 20px 24px; }
body.v5.v5s-crm .mcols { gap: 24px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
body.v5.v5s-crm .mcol-l { min-width: 0; }
body.v5.v5s-crm .msec { margin-bottom: 18px; }
body.v5.v5s-crm .msec-t {
  margin-bottom: 10px; font: 600 15px/1.3 var(--v5-display); letter-spacing: -.01em; color: var(--v5-ink);
}
body.v5.v5s-crm .msec-t span { font-size: 12.5px; font-weight: 500; }
body.v5.v5s-crm .mfield { margin-bottom: 10px; gap: 5px; }
body.v5.v5s-crm .mfield label { font: 700 12px/1.3 var(--v5-body); color: var(--v5-ink3); }
body.v5.v5s-crm .mgrid { gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.v5.v5s-crm .mfield input, body.v5.v5s-crm .mfield select { width: 100%; min-width: 0; }
body.v5.v5s-crm .mchat {
  background: var(--v5-panel2); border-radius: var(--v5-r-s); padding: 14px; gap: 8px;
}
body.v5.v5s-crm .mbub {
  border-radius: 18px; padding: 9px 13px; font: 500 13.5px/1.45 var(--v5-body); max-width: 84%;
}
body.v5.v5s-crm .mbub.in {
  background: var(--v5-panel); border: 0; color: var(--v5-ink); border-bottom-left-radius: 6px;
}
body.v5.v5s-crm .mbub.out {
  background: color-mix(in srgb, var(--v5-bot) 12%, var(--v5-panel)); color: var(--v5-ink);
  border-bottom-right-radius: 6px;
}
body.v5.v5s-crm .mbub.out.mgr { background: var(--v5-ink); color: var(--v5-bg); border: 0; }
body.v5.v5s-crm .mbub.out a { color: inherit; }
body.v5.v5s-crm .mbub .bub-edit { color: var(--v5-ink3); }
body.v5.v5s-crm .mbub .bub-editta {
  border: 1px solid var(--v5-line); border-radius: 10px; background: var(--v5-panel); color: var(--v5-ink);
}
body.v5.v5s-crm .mbub .bub-editbar button { border-radius: var(--v5-pill); padding: 5px 12px; font-weight: 800; }
body.v5.v5s-crm .mbub .bub-ok { background: var(--v5-ink); color: var(--v5-bg); }
body.v5.v5s-crm .mbub .bub-no { background: transparent; color: var(--v5-ink2); border: 1px solid var(--v5-line); }
/* «написати від імені бота»: у справжній картці `.dmsend` (зі «Файлом»), у
   вітринній — `.mchat-in`; обидва — поле-пігулка з круглою кнопкою */
body.v5.v5s-crm .dmsend, body.v5.v5s-crm .mchat-in, body.v5.v5s-crm .dcadd {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
body.v5.v5s-crm .dmsend input, body.v5.v5s-crm .mchat-in input, body.v5.v5s-crm .dcadd input {
  flex: 1; min-width: 0; border-radius: var(--v5-pill); padding: 10px 16px;
}
body.v5.v5s-crm .dmsend button, body.v5.v5s-crm .mchat-in button, body.v5.v5s-crm .dcadd button {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--v5-pill); cursor: pointer;
  background: var(--v5-ink); color: var(--v5-bg); font: 800 16px/1 var(--v5-body);
}
body.v5.v5s-crm .dmsend .dmattach {
  width: auto; padding: 0 14px; background: transparent; color: var(--v5-ink);
  border: 1px solid var(--v5-line); font-size: 13px;
}
body.v5.v5s-crm .mlink {
  display: inline-block; margin-top: 12px; font: 800 13px/1.3 var(--v5-body);
  color: var(--v5-ink); text-decoration: none; border-bottom: 1px solid var(--v5-line);
}
body.v5.v5s-crm .mlink:hover { border-bottom-color: var(--v5-ink); }
body.v5.v5s-crm .mchat-sec .mlink { align-self: flex-start; }
body.v5.v5s-crm .dcmt { background: var(--v5-panel2); border-radius: var(--v5-r-s); padding: 9px 12px; }
body.v5.v5s-crm .dcmt-m { color: var(--v5-ink3); }
body.v5.v5s-crm .msave { border-top: 1px dashed var(--v5-line); padding-top: 16px; }
body.v5.v5s-crm .msave button {
  border-radius: var(--v5-pill); padding: 10px 20px; font: 800 13px/1.2 var(--v5-body);
  background: var(--v5-ink); color: var(--v5-bg);
}
body.v5.v5s-crm .msave button.dmdel {
  background: transparent; color: var(--v5-bad); border: 1px solid color-mix(in srgb, var(--v5-bad) 45%, var(--v5-line));
}
body.v5.v5s-crm .msave button.dmdel:hover { background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel)); }
body.v5.v5s-crm .msave .ok { color: var(--v5-ok); }

/* ── Автоматизація ───────────────────────────────────────────────────── */


/* «Активні пуші»: заголовок і картки — інлайнові стилі f-рядка */
body.v5.v5s-auto .page > div > h2 { margin: 0 0 14px !important; flex-wrap: wrap; }
body.v5.v5s-auto .page > div > h2 > span:nth-child(2) {
  font: 800 12px/1.5 var(--v5-body) !important; border-radius: var(--v5-pill) !important;
}
body.v5.v5s-auto .page > div > h2 ~ div {
  border-radius: var(--v5-r) !important; padding: 16px 20px !important; margin-bottom: 12px !important;
  box-shadow: var(--v5-shadow);
}
body.v5.v5s-auto .page > div > h2 ~ div > div:first-child:empty { display: none; }
body.v5.v5s-auto .page > div > h2 ~ div span[style*="border-radius:4px"] {
  border-radius: var(--v5-pill) !important; padding: 3px 10px !important;
  font: 800 11.5px/1.3 var(--v5-body) !important; letter-spacing: .02em;
}
body.v5.v5s-auto .page > div > h2 ~ div button.js-go {
  border-radius: var(--v5-pill) !important; padding: 9px 16px !important;
  font: 800 13px/1.2 var(--v5-body) !important;
}
body.v5.v5s-auto .page > div > h2 button.js-go {
  border-radius: var(--v5-pill) !important; padding: 7px 14px !important;
  font: 800 12px/1.2 var(--v5-body) !important;
}
body.v5.v5s-auto .page > div > h2 ~ div button.js-go[data-url^="/followup_confirm/"] {
  background: var(--v5-ink) !important; color: var(--v5-bg) !important; border: 1px solid var(--v5-ink) !important;
}
body.v5.v5s-auto .page > div > h2 ~ div button.js-go:not([data-url^="/followup_confirm/"]),
body.v5.v5s-auto .page > div > h2 button.js-go {
  background: transparent !important; color: var(--v5-bad) !important;
  border: 1px solid color-mix(in srgb, var(--v5-bad) 45%, var(--v5-line)) !important;
}
/* «Немає активних пушів» — плитка */
body.v5.v5s-auto .page > div[style*="margin-bottom:24px"][style*="color:var(--ok)"] {
  border-radius: var(--v5-r-s) !important; font-weight: 700;
}

/* редактор правил фолоапів (рендерить скрипт у #rules-list) */
body.v5.v5s-auto #rules-list > .card { padding: 20px 24px; margin-bottom: 14px; }
body.v5.v5s-auto #rules-list .lbl { display: block; margin: 0 0 6px; }
body.v5.v5s-auto #rules-list input[type="number"], body.v5.v5s-auto #rules-list select,
body.v5.v5s-auto #rules-list textarea {
  border-radius: var(--v5-r-s) !important; padding: 9px 12px !important; font-size: 14px !important;
  font-family: var(--v5-body) !important; background: var(--v5-panel) !important;
}
body.v5.v5s-auto #rules-list input[type="number"] { width: 110px !important; }
body.v5.v5s-auto #rules-list select { max-width: 100%; }
body.v5.v5s-auto #rules-list input:disabled, body.v5.v5s-auto #rules-list select:disabled,
body.v5.v5s-auto #rules-list textarea:disabled { background: var(--v5-panel2) !important; }
/* назва правила — заголовок картки, що редагується на місці */
body.v5.v5s-auto #rules-list .f-lbl {
  font: 600 16px/1.3 var(--v5-display) !important; letter-spacing: -.01em; color: var(--v5-ink);
  border-radius: 0 !important; padding: 2px 0 !important; min-width: 0;
}
body.v5.v5s-auto #rules-list .f-lbl:disabled { background: transparent !important; color: var(--v5-ink); }
body.v5.v5s-auto #rules-list > .card > div:first-child { flex-wrap: wrap; }
body.v5.v5s-auto #rules-list button[onclick^="deleteRule"] {
  background: transparent !important; color: var(--v5-bad) !important;
  border: 1px solid color-mix(in srgb, var(--v5-bad) 45%, var(--v5-line)) !important;
  border-radius: var(--v5-pill) !important; padding: 6px 12px !important; font: 800 12px/1.2 var(--v5-body) !important;
}
/* у менеджера (лише читання) видаляти нічого — кнопку не показуємо */
body.v5.v5s-auto #rules-list button[onclick^="deleteRule"]:disabled { display: none; }
body.v5.v5s-auto #rules-list .ai-mode-row > div { font-size: 12.5px !important; color: var(--v5-ink3); }
body.v5.v5s-auto #rules-list .confirm-row > span { font-size: 13.5px !important; font-weight: 600; }
body.v5.v5s-auto #sv-res { border-radius: var(--v5-r-s); }
/* журнал відправлених: час — моно, тип правила — чип */
body.v5.v5s-auto .tbl td[style*="monospace"] { font-family: var(--v5-mono) !important; color: var(--v5-ink3) !important; }
body.v5.v5s-auto .tbl span[style*="border-radius:4px"] {
  border-radius: var(--v5-pill) !important; padding: 2px 9px !important; font: 700 11.5px/1.4 var(--v5-mono) !important;
  background: var(--v5-panel2) !important; color: var(--v5-bot-ink) !important;
}

/* тригери: картка категорії — шапка з перемикачем і ключем */
body.v5.v5s-auto .trig-row .ch { padding: 18px 24px 4px; font: 500 14px/1.3 var(--v5-body); }
body.v5.v5s-auto .trigkey { font-family: var(--v5-mono); font-size: 13px; }
/* перемикач, ключ і «Видалити» — один рядок на будь-якій ширині: ключ
   стискається, кнопка — ніколи */
body.v5.v5s-auto .trig-row .ch { flex-wrap: nowrap; }
body.v5.v5s-auto .trig-row .trigkey { flex: 1 1 auto; min-width: 0; width: auto; }
body.v5.v5s-auto .trig-row .ch .btn { flex: none; }
body.v5.v5s-auto .trig-row .ch .sp { flex: 0 1 auto; }

/* розсилка: `.bcwrap label/input` з app.css робили з перемикача поле на всю
   ширину — повертаємо йому розмір і рядок «перемикач + підпис» */
body.v5.v5s-auto .bcwrap { max-width: 680px !important; }
body.v5.v5s-auto .bcwrap label { margin: 0; }
body.v5.v5s-auto .bcwrap label.rowf { display: flex; }
body.v5.v5s-auto .bcwrap label.rowf > span { font-size: 13.5px !important; font-weight: 600; color: var(--v5-ink2); }
body.v5.v5s-auto .bcwrap .swcb { width: 44px; flex: none; }
body.v5.v5s-auto .bcprev { background: var(--v5-panel2); border: 0; border-radius: var(--v5-r-s); }
body.v5.v5s-auto .bcmsg { background: var(--v5-panel); border-color: var(--v5-line); border-radius: var(--v5-r-s); }
body.v5.v5s-auto .bclbl { font: 700 11.5px/1.3 var(--v5-body); letter-spacing: .06em; text-transform: uppercase; color: var(--v5-ink3); }
body.v5.v5s-auto .bcsmp { color: var(--v5-ink3); }
body.v5.v5s-auto .bcerr { border-radius: var(--v5-r-s); color: color-mix(in srgb, var(--v5-bad) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-bad) 10%, var(--v5-panel)); }
body.v5.v5s-auto .bcok { border-radius: var(--v5-r-s); color: color-mix(in srgb, var(--v5-ok) 75%, var(--v5-ink)); background: color-mix(in srgb, var(--v5-ok) 10%, var(--v5-panel)); }

/* ── Промти ──────────────────────────────────────────────────────────── */

body.v5.v5s-prompts .prompt-area {
  height: 520px; padding: 16px 18px; border-radius: var(--v5-r-s);
  font: 500 14px/1.65 var(--v5-body); background: var(--v5-panel); color: var(--v5-ink);
}
body.v5.v5s-prompts form > .btn { margin-top: 16px !important; }
body.v5.v5s-prompts form > span { color: var(--v5-ok) !important; }
/* банер «куди піде збереження»: пунктирна примітка з попереджувальною рамкою */
body.v5.v5s-prompts form > .note {
  border: 1px dashed color-mix(in srgb, var(--v5-warn) 60%, var(--v5-line)) !important;
  border-radius: var(--v5-r-s) !important; padding: 10px 14px !important; margin-top: 14px !important;
}

/* ── Звіти ───────────────────────────────────────────────────────────── */

body.v5.v5s-reports .cb > b { font: 600 16px/1.3 var(--v5-display); letter-spacing: -.01em; }
body.v5.v5s-reports .cb textarea {
  height: 96px !important; padding: 12px 14px !important; border-radius: var(--v5-r-s) !important;
  margin: 12px 0 !important; font-size: 14px !important;
}
body.v5.v5s-reports .page > div[style*="margin-bottom:15px"] > b { font: 600 16px/1.3 var(--v5-display); letter-spacing: -.01em; }
body.v5.v5s-reports .page > div[style*="margin-bottom:15px"] .btn {
  margin: 4px 4px 0 0 !important; background: var(--v5-panel); color: var(--v5-ink);
  border-color: var(--v5-line); font-weight: 700;
}
body.v5.v5s-reports .page > div[style*="margin-bottom:15px"] .btn:hover { background: var(--v5-panel2); opacity: 1; }
body.v5.v5s-reports .page > h2 { margin: 24px 0 12px !important; }
body.v5.v5s-reports .card[onclick] { margin-bottom: 10px; transition: border-color .12s; }
body.v5.v5s-reports .card[onclick]:hover { border-color: var(--v5-ink3); }
body.v5.v5s-reports .card[onclick] > .ch { padding: 16px 24px; font: 700 14px/1.4 var(--v5-body); letter-spacing: 0; }
body.v5.v5s-reports .rb { font: 500 14px/1.6 var(--v5-body) !important; color: var(--v5-ink2); padding-top: 0; }

/* ── Керування ───────────────────────────────────────────────────────── */

body.v5.v5s-admin .sg .sv[style] { font-size: 16px !important; line-height: 1.6; }
body.v5.v5s-admin #model-bot-label {
  border-radius: var(--v5-pill) !important; padding: 3px 10px !important; background: var(--v5-panel2) !important;
  font: 700 12px/1.3 var(--v5-body) !important; letter-spacing: 0;
}
/* чотири колонки моделей: на середній ширині — дві, на телефоні — одна */
body.v5.v5s-admin .cb > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] > div > div:first-child {
  font: 700 11.5px/1.3 var(--v5-body) !important; letter-spacing: .06em; text-transform: uppercase;
  color: var(--v5-ink3); margin-bottom: 8px !important;
}
body.v5.mid.v5s-admin .cb > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
body.v5.narrow.v5s-admin .cb > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
body.v5.v5s-admin [id$="-model-btns"] button {
  border-radius: var(--v5-r-s) !important; border-width: 1px !important; padding: 9px 14px !important;
  font-family: var(--v5-body) !important; margin: 0 0 6px !important;
}
body.v5.v5s-admin [id$="-model-btns"] button:not([style*="font-weight:700"]):hover { background: var(--v5-panel2) !important; }
body.v5.v5s-admin [id$="-model-btns"] button[style*="font-weight:700"] {
  background: var(--v5-ink) !important; color: var(--v5-bg) !important; border-color: var(--v5-ink) !important;
}
/* «History розмови»: рядок переноситься, поле — плитка */
body.v5.v5s-admin .cb > div[style*="border-top:1px solid"] {
  flex-wrap: wrap; border-top: 1px dashed var(--v5-line) !important; padding-top: 16px !important;
}
body.v5.v5s-admin #max-history-input { width: 90px !important; padding: 8px 12px !important; border-radius: var(--v5-r-s) !important; }
body.v5.v5s-admin .cb > div[style*="border-top:1px solid"] .btn { padding: 8px 14px !important; }
/* ключі: поля — плитки, «Показати» — тиха кнопка всередині поля */
body.v5.v5s-admin .cb input[type="password"], body.v5.v5s-admin #reset-cid {
  border-radius: var(--v5-r-s) !important; padding-top: 10px !important; padding-bottom: 10px !important;
  font-family: var(--v5-mono) !important;
}
body.v5.v5s-admin #keye { font: 800 12px/1 var(--v5-body) !important; color: var(--v5-ink2) !important; }
body.v5.v5s-admin .cb > p[style*="font-weight:600"] { font-size: 14px !important; font-weight: 700 !important; color: var(--v5-ink); }
body.v5.v5s-admin #key-st code { border-radius: 8px !important; font-family: var(--v5-mono); }
body.v5.v5s-admin .ch > span[style] { font: 700 12px/1.3 var(--v5-mono) !important; color: var(--v5-ink3) !important; }
/* журнал: консоль на темному героєві в обох темах */
body.v5.v5s-admin .lc { gap: 8px; margin-bottom: 12px; }
body.v5.v5s-admin .li { border-radius: var(--v5-pill); padding: 9px 16px; min-width: 0; flex-basis: 220px; }
body.v5.v5s-admin .lb {
  border-radius: var(--v5-pill); padding: 8px 14px; font: 700 12.5px/1.2 var(--v5-body);
  background: transparent; color: var(--v5-ink2); border: 1px solid var(--v5-line);
}
body.v5.v5s-admin .lb:hover { color: var(--v5-ink); border-color: var(--v5-ink3); background: var(--v5-panel2); }
body.v5.v5s-admin .lbox {
  background: var(--v5-hero); color: var(--v5-hero-ink); border-radius: var(--v5-r-s);
  font: 500 11.5px/1.65 var(--v5-mono); padding: 16px 18px;
}

/* ── синхронізація status_crm ────────────────────────────────────────── */

body.v5.v5s-sync .card table td:first-child { color: var(--v5-ink3) !important; font-family: var(--v5-mono); font-size: 12.5px; }
body.v5.v5s-sync .card table td { padding: 9px 24px 9px 0 !important; }
/* ключ — значення: таблиця за вмістом, а не на всю картку; числа — моно */
body.v5.v5s-sync .card table { width: auto; min-width: min(460px, 100%); }
body.v5.v5s-sync .card table td + td { font-family: var(--v5-mono); font-variant-numeric: tabular-nums; }
body.v5.v5s-sync .cb > div[style*="background"] { border-radius: var(--v5-r-s) !important; }

/* ── /chat_analyze ───────────────────────────────────────────────────── */

/* настрій — плитка з зеленим відтінком */
body.v5.v5s-analyze .page > div[style*="border-radius:8px"] {
  border-radius: var(--v5-r-s) !important; padding: 14px 16px !important; font-size: 14px;
}
/* історія: бульбашки чатів v5 (гість — ліворуч, бот — праворуч) */
body.v5.v5s-analyze .cb > div[style*="margin-right:60px"] {
  background: var(--v5-panel2) !important; border-radius: 18px 18px 18px 6px !important;
  padding: 10px 14px !important; margin: 6px 60px 6px 0 !important; font-size: 14px; line-height: 1.45;
}
body.v5.v5s-analyze .cb > div[style*="margin-left:60px"] {
  background: color-mix(in srgb, var(--v5-bot) 12%, var(--v5-panel)) !important; border-radius: 18px 18px 6px 18px !important;
  padding: 10px 14px !important; margin: 6px 0 6px 60px !important; font-size: 14px; line-height: 1.45;
}
body.v5.narrow.v5s-analyze .cb > div[style*="margin-right:60px"] { margin-right: 28px !important; }
body.v5.narrow.v5s-analyze .cb > div[style*="margin-left:60px"] { margin-left: 28px !important; }

/* ── /delay_approve ──────────────────────────────────────────────────── */

body.v5.v5s-delay .ta { min-height: 200px; }
body.v5.v5s-delay .v5-kv {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 18px;
}
body.v5.v5s-delay .v5-kv dt { font: 700 11.5px/1.6 var(--v5-body); letter-spacing: .06em; text-transform: uppercase; color: var(--v5-ink3); }
body.v5.v5s-delay .v5-kv dd { margin: 0; font-size: 14px; color: var(--v5-ink); overflow-wrap: anywhere; }

/* ── сторінки-результати (/followup_*, /delay_*, /ig_link, звіт) ─────── */

body.v5.v5s-result .v5-resp { display: flex; justify-content: center; padding-top: 8vh; }
body.v5.v5s-result .v5-res {
  display: flex; align-items: flex-start; gap: 14px; width: min(560px, 100%); padding: 24px;
}
body.v5.v5s-result .v5-res > .v5-dot { width: 12px; height: 12px; margin-top: 7px; flex: none; }
body.v5.v5s-result .v5-restxt { font: 600 18px/1.35 var(--v5-display); letter-spacing: -.01em; color: var(--v5-ink); }
body.v5.v5s-result .v5-restxt h3 { margin: 0; font: inherit; }
body.v5.v5s-result .v5-restxt p { margin: 8px 0 0; font: 500 14px/1.5 var(--v5-body); color: var(--v5-ink2); letter-spacing: 0; }
body.v5.v5s-result .v5-restxt code { font: 500 .85em var(--v5-mono); }
body.v5.v5s-result .v5-restxt a { color: var(--v5-accent); font-weight: 800; }
body.v5.v5s-result .v5-acts { margin-top: 16px; }

/* ── ширини ──────────────────────────────────────────────────────────── */

body.v5.mid.v5s-crm .mcols { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
body.v5.narrow.v5x .page, body.v5.narrow.v5x .page.pad { padding: 14px 16px 96px; }
body.v5.narrow.v5s-analyze .page { margin: 0 !important; }
body.v5.narrow.v5x .ch { padding: 18px 18px 4px; }
body.v5.narrow.v5x .cb { padding: 12px 18px 18px; }
body.v5.narrow.v5x .tbl th, body.v5.narrow.v5x .card table th { padding: 9px 12px; }
body.v5.narrow.v5x .tbl td, body.v5.narrow.v5x .card table td { padding: 10px 12px; }
/* сегменти на телефоні гортаються всередині себе, а не розпирають сторінку */
body.v5.narrow.v5x .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.v5.narrow.v5s-crm .col { flex: 0 0 84%; }
body.v5.narrow.v5s-crm .modal-bg { padding: 12px 8px; }
body.v5.narrow.v5s-crm .modal-b { padding: 16px; }
body.v5.narrow.v5s-crm .mcols { grid-template-columns: minmax(0, 1fr); }
body.v5.narrow.v5s-auto #rules-list > .card { padding: 16px 18px; }
body.v5.narrow.v5s-auto .page > div > h2 ~ div { padding: 14px 16px !important; }
body.v5.narrow.v5s-auto .page > div > h2 ~ div > div[style*="flex:1"] { flex: 1 0 100% !important; }
body.v5.narrow.v5s-auto #rules-list .f-lbl { order: 3; flex: 1 0 100% !important; }
body.v5.narrow.v5s-auto #rules-list button[onclick^="deleteRule"] { margin-left: auto; }
body.v5.narrow.v5s-prompts .prompt-area { height: 60vh; }
body.v5.narrow.v5s-result .v5-resp { padding-top: 16px; }
body.v5.narrow.v5s-admin .li { flex-basis: 100%; }
/* журнал відправлених на телефоні: таблиця гортається вбік усередині картки,
   а не ховає стовпчик «Повідомлення» за краєм */
body.v5.narrow.v5x .tbl { display: block; overflow-x: auto; }
body.v5.narrow.v5x .tbl td:last-child { min-width: 220px; }