/* Кабинет VoiceQA. Цвета -- токены на :root, тёмная тема -- свои шаги тех же
   тонов, а не переворот. Статусы вердиктов (соблюдено / нарушено / не ясно /
   неприменимо) -- отдельные цвета и никогда не цвета рядов графика; рядом с
   цветом всегда подпись или значок. */

:root {
  color-scheme: light;
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eef0f5;
  --ink: #131620;
  --ink-2: #4a4f5e;
  --muted: #7d8290;
  --line: #e4e6ee;
  --line-strong: #cfd3de;
  --shadow: 0 1px 2px rgba(19, 22, 32, .04), 0 4px 16px rgba(19, 22, 32, .05);
  --accent: #4f5bd5;
  --accent-ink: #3942b3;
  --accent-soft: #eceefe;
  --brand: linear-gradient(135deg, #5b5fe0 0%, #2a78d6 55%, #1baf7a 100%);

  --good: #0ca30c;  --good-ink: #067406;  --good-soft: #e5f5e5;
  --bad: #d03b3b;   --bad-ink: #b02727;   --bad-soft: #fbe9e9;
  --warn: #e39a00;  --warn-ink: #8a5d00;  --warn-soft: #fff3d9;
  --na: #a3a8b5;    --na-ink: #6b7080;    --na-soft: #eef0f4;

  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;

  /* последовательная шкала: нагрузка по часам */
  --q0: #f1f5fc; --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #184f95;
  /* расходящаяся: соблюдение пункта, красный -- плохо, синий -- хорошо */
  --d0: #c2413f; --d1: #e27a78; --d2: #f3bcbb; --d3: #eceae6; --d4: #b7d3f6; --d5: #6da7ec; --d6: #2a6ec4;
  --radius: 14px;
  --radius-s: 9px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0e1016; --surface: #161922; --surface-2: #1b1f2a; --surface-3: #232835;
    --ink: #f1f2f5; --ink-2: #c3c6d0; --muted: #8b90a0; --line: #272c38; --line-strong: #363c4b;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --accent: #8189f0; --accent-ink: #a3a9f6; --accent-soft: #252a4a;
    --good: #22b422; --good-ink: #5fd35f; --good-soft: #15301a;
    --bad: #e05656; --bad-ink: #f08a8a; --bad-soft: #3a1d1f;
    --warn: #f0ad2a; --warn-ink: #f5c35e; --warn-soft: #362a12;
    --na: #6f7586; --na-ink: #a3a8b5; --na-soft: #262a35;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --q0: #1b2130; --q1: #1c3350; --q2: #184f95; --q3: #1c5cab; --q4: #2a78d6; --q5: #5598e7; --q6: #9ec5f4;
    --d0: #e05656; --d1: #b44848; --d2: #6e3434; --d3: #383835; --d4: #1c4a82; --d5: #2f71c9; --d6: #6da7ec;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1016; --surface: #161922; --surface-2: #1b1f2a; --surface-3: #232835;
  --ink: #f1f2f5; --ink-2: #c3c6d0; --muted: #8b90a0; --line: #272c38; --line-strong: #363c4b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --accent: #8189f0; --accent-ink: #a3a9f6; --accent-soft: #252a4a;
  --good: #22b422; --good-ink: #5fd35f; --good-soft: #15301a;
  --bad: #e05656; --bad-ink: #f08a8a; --bad-soft: #3a1d1f;
  --warn: #f0ad2a; --warn-ink: #f5c35e; --warn-soft: #362a12;
  --na: #6f7586; --na-ink: #a3a8b5; --na-soft: #262a35;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --q0: #1b2130; --q1: #1c3350; --q2: #184f95; --q3: #1c5cab; --q4: #2a78d6; --q5: #5598e7; --q6: #9ec5f4;
  --d0: #e05656; --d1: #b44848; --d2: #6e3434; --d3: #383835; --d4: #1c4a82; --d5: #2f71c9; --d6: #6da7ec;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
svg.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.tile .label svg.icon, .health .k svg.icon, .pill svg.icon { width: 14px; height: 14px; vertical-align: -2px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0; font-weight: 650; }
h3 { font-size: 14px; margin: 0; font-weight: 650; }
p { margin: 0 0 10px; }
code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.good { color: var(--good-ink); }
.bad { color: var(--bad-ink); }
.warn { color: var(--warn-ink); }
.ok { color: var(--good-ink); }
.error { color: var(--bad-ink); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ каркас */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--brand);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(79, 91, 213, .35);
}
.brand-name { font-weight: 750; font-size: 16px; letter-spacing: -.01em; }
.brand-sub { font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.point-switch { margin: 4px 0 14px; }
.point-switch select { width: 100%; font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 8px 6px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  color: var(--ink-2); font-weight: 520;
}
.nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.nav a .icon { width: 18px; height: 18px; flex: none; }
.nav .count {
  margin-left: auto; background: var(--bad); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px;
}
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.side-foot .who { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.who:hover { color: var(--ink); text-decoration: underline; }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn .icon { width: 16px; height: 16px; }

.main { min-width: 0; padding: 26px 32px 64px; }
.page { max-width: 1320px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .titles { flex: 1; min-width: 240px; }
.page-head .sub { color: var(--muted); margin: 4px 0 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }

/* ------------------------------------------------------------ элементы */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; min-width: 0;
}
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { flex: 1; }
.card-head .hint { color: var(--muted); font-size: 12.5px; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .card-head { padding: 16px 20px 0; }
.grid { display: grid; gap: 16px; }
.page > .grid + .grid, .page > .grid + .card, .page > .card + .grid, .page > .card + .card, .page > .tiles + .grid, .page > .tiles + .card { margin-top: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.span-2 { grid-column: span 2; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; position: relative; overflow: hidden; min-width: 0;
}
.tile .label { color: var(--muted); font-size: 12.5px; font-weight: 550; display: flex; gap: 6px; align-items: center; }
.tile .value { font-size: 30px; font-weight: 750; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.1; }
.tile .value small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.tile .note { font-size: 12.5px; color: var(--muted); }
.tile .spark { height: 30px; margin-top: 10px; opacity: .9; }
.tile.hero { background: var(--brand); color: #fff; border: none; box-shadow: 0 8px 24px rgba(42, 120, 214, .28); }
.tile.hero .label, .tile.hero .note, .tile.hero .value small { color: rgba(255, 255, 255, .85); }
.tile.hero .delta { background: rgba(255, 255, 255, .2); color: #fff; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 999px; }
.delta.up { background: var(--good-soft); color: var(--good-ink); }
.delta.down { background: var(--bad-soft); color: var(--bad-ink); }
.delta.flat { background: var(--na-soft); color: var(--na-ink); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 550; white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-soft); color: var(--good-ink); }
.pill.bad { background: var(--bad-soft); color: var(--bad-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill.na { background: var(--na-soft); color: var(--na-ink); }
.pill.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.score {
  display: inline-grid; place-items: center; min-width: 46px; padding: 3px 8px; border-radius: 8px;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.score.hi { background: var(--good-soft); color: var(--good-ink); }
.score.mid { background: var(--warn-soft); color: var(--warn-ink); }
.score.lo { background: var(--bad-soft); color: var(--bad-ink); }
.score.none { background: var(--na-soft); color: var(--na-ink); }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--na); flex: none; }
.status-dot.on { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.status-dot.off { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }
.status-dot.idle { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }

.banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px;
}
.banner .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.banner.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad-ink); }
.banner.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); }
.banner.good { background: var(--good-soft); border-color: transparent; color: var(--good-ink); }
.banner.info { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.banner b { color: inherit; }
.banner .body { flex: 1; }
.banner .body p { margin: 2px 0 0; color: inherit; opacity: .9; }

/* кнопки и поля */
button, .btn {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 14px; border-radius: 9px; cursor: pointer; line-height: 1.3;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
button:hover, .btn:hover { background: var(--surface-3); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.07); background: var(--accent); }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
button.ghost:hover, .btn.ghost:hover { background: var(--surface-3); }
button.danger { color: var(--bad-ink); }
button.small, .btn.small { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
button .icon, .btn .icon { width: 15px; height: 15px; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink); min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
label.check { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
form.inline { display: inline; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.vc-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.vc-bar { flex: 1; max-width: 320px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.vc-bar span { display: block; height: 100%; background: var(--accent, #4f46e5); }
.violation-card { max-width: 820px; }
.violation-card .vc-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.violation-card .vc-why { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.vc-dialogue { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.vc-turn { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; padding: 6px 10px; border-radius: 10px; }
.vc-turn .who { flex: 0 0 110px; color: var(--muted); font-size: 12.5px; text-transform: lowercase; }
.vc-turn.admin .who { color: var(--accent-ink); }
.vc-turn.hit { background: var(--warn-soft); }
.vc-more { color: var(--muted); padding: 0 10px; }
.violation-card .vc-audio { margin: 8px 0 12px; }
.violation-card .vc-audio audio { width: 100%; }
@media (max-width: 640px) { .vc-turn { flex-direction: column; gap: 2px; } .vc-turn .who { flex: none; } }
.vc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
button.big { padding: 12px 20px; font-size: 15px; border-radius: 12px; }
button.big kbd, .vc-link kbd { font-size: 11px; opacity: .6; margin-left: 6px; }
.vc-link { color: var(--muted); font-size: 14px; padding: 8px 6px; }
@media (max-width: 640px) { .vc-actions form, .vc-actions button.big { width: 100%; } button.big kbd, .vc-link kbd { display: none; } }

.segmented { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented a {
  padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.segmented a:hover { text-decoration: none; color: var(--ink); }
.segmented a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Разделы списка разговоров: по умолчанию -- с клиентами, остальное рядом со счётчиком. */
.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.view-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 13.5px; font-weight: 600;
}
.view-tabs a b { color: var(--muted); font-weight: 700; }
.view-tabs a:hover { text-decoration: none; border-color: var(--line-strong); color: var(--ink); }
.view-tabs a.muted-tab { color: var(--muted); }
.view-tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.view-tabs a.on b { color: rgba(255, 255, 255, .85); }
.view-note { margin: -2px 0 12px; max-width: 760px; }

.toolbar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.toolbar .grow { flex: 1; min-width: 180px; }
.toolbar .grow input { width: 100%; }

/* таблицы */
table { border-collapse: collapse; width: 100%; }
table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
table.data tr:last-child td { border-bottom: none; }
table.data tr.link:hover td { background: var(--surface-2); cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; }
table.plain { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--surface); }
table.plain th, table.plain td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
table.plain th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
table.plain tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

details.tableview { margin-top: 12px; }
details.tableview summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; }
details.tableview summary::before { content: "▸ "; }
details.tableview[open] summary::before { content: "▾ "; }
details.tableview table { margin-top: 8px; font-size: 13px; }

/* ------------------------------------------------------------ графики */
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.chart { position: relative; }
.plot { position: relative; height: 180px; margin-left: 38px; }
.plot.tall { height: 220px; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.plot .gridline.base { border-top-color: var(--line-strong); }
.plot .ylab { position: absolute; left: -38px; width: 32px; text-align: right; font-size: 11px; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.xlabels { position: relative; height: 18px; margin-left: 38px; font-size: 11px; color: var(--muted); }
.xlabels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hover-cols { position: absolute; inset: 0; display: flex; }
.hover-cols > div { flex: 1; position: relative; }
.hover-cols > div:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.line-path { fill: none; stroke: var(--s1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.area-path { fill: color-mix(in srgb, var(--s1) 14%, transparent); stroke: none; }
.target-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dots circle { fill: var(--s1); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }

.vbars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.vbars > div { flex: 1; display: flex; align-items: flex-end; height: 100%; justify-content: center; }
.vbars > div > i { display: block; width: 100%; max-width: 22px; background: var(--s1); border-radius: 4px 4px 0 0; min-height: 2px; }
.vbars > div:hover > i { filter: brightness(1.12); }
.vbars.alt > div > i { background: var(--s7); }

.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 36%) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.hbar .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.hbar .track > i { display: block; height: 100%; background: var(--s1); border-radius: 999px; }
.hbar .val { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.hbar.link { cursor: pointer; }
.hbar.link:hover .name { color: var(--accent-ink); }

.stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.stack > i { display: block; height: 100%; min-width: 3px; }
.stack.tall { height: 22px; border-radius: 7px; }
.st-ok { background: var(--good); }
.st-bad { background: var(--bad); }
.st-unc { background: var(--warn); }
.st-na { background: var(--na); }
.k-client { background: var(--s1); }
.k-fragment { background: var(--s4); }
.k-internal { background: var(--s7); }
.k-noise { background: var(--na); }
.k-silent { background: var(--na-ink); }
.c-live { background: var(--s3); }
.c-phone { background: var(--s7); }

.items-chart { display: flex; flex-direction: column; gap: 4px; }
.item-row {
  display: grid; grid-template-columns: minmax(150px, 32%) 1fr 58px; gap: 14px; align-items: center;
  padding: 7px 8px; border-radius: 9px; color: inherit;
}
.item-row:hover { background: var(--surface-2); text-decoration: none; }
.item-row .name { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .name small { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.item-row .rate { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Процент по малому числу вердиктов: виден, но не спорит с надёжными. */
.item-row .rate.few { font-weight: 500; opacity: .7; }
/* Чему в проценте не верить без оговорки (dashboard.item_flags): строкой под
   названием, чтобы не съедаться многоточием узкой колонки. */
.item-row .name .flags { display: block; white-space: normal; line-height: 1.2; }
.item-row .name .flag {
  display: inline-block; margin: 2px 4px 0 0; padding: 0 6px; border-radius: 6px;
  background: var(--warn-soft); color: var(--warn-ink); font-size: 11px;
}
.heat .c.few { opacity: .45; }

.heat { display: grid; gap: 3px; font-size: 11px; }
.heat .h { color: var(--muted); display: grid; place-items: center; font-size: 11px; }
.heat .r { color: var(--ink-2); display: flex; align-items: center; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat .c { border-radius: 5px; min-height: 22px; display: grid; place-items: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.heat .c.empty { background: var(--surface-3); color: transparent; }
.q0 { background: var(--q0); } .q1 { background: var(--q1); } .q2 { background: var(--q2); }
.q3 { background: var(--q3); color: #fff; } .q4 { background: var(--q4); color: #fff; }
.q5 { background: var(--q5); color: #fff; } .q6 { background: var(--q6); color: #fff; }
.d0 { background: var(--d0); color: #fff; } .d1 { background: var(--d1); color: #fff; } .d2 { background: var(--d2); color: var(--ink); }
.d3 { background: var(--d3); color: var(--ink); } .d4 { background: var(--d4); color: var(--ink); }
.d5 { background: var(--d5); color: #fff; } .d6 { background: var(--d6); color: #fff; }
.heat-scale { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.heat-scale i { width: 22px; height: 10px; border-radius: 3px; display: inline-block; }

.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: var(--surface-3); }
.ring .val { font-size: 19px; font-weight: 750; position: absolute; inset: 0; display: grid; place-items: center; font-variant-numeric: tabular-nums; }

.spark-svg { width: 100%; height: 100%; display: block; }
.spark-svg path { fill: none; stroke: var(--s1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tile.hero .spark-svg path { stroke: #fff; }

#tip {
  position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--surface);
  font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: 8px; max-width: 280px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: pre-line; opacity: 0; transition: opacity .08s;
}
#tip.on { opacity: 1; }

/* ------------------------------------------------------------ страницы */
.point-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.point-card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
.point-card:hover { text-decoration: none; border-color: var(--line-strong); }
.point-card .top { display: flex; align-items: center; gap: 10px; }
.point-card .top h2 { flex: 1; font-size: 17px; }
.point-card .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.point-card .kpis div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.point-card .kpis b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.point-card .kpis span { font-size: 11.5px; color: var(--muted); }
.point-card .sparkbox { height: 44px; }

.feed { display: flex; flex-direction: column; }
.feed a { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: inherit; }
.feed a:last-child { border-bottom: none; }
.feed a:hover { background: var(--surface-2); text-decoration: none; }
.feed .time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.feed .what { font-size: 13.5px; }
.feed .what .sub { color: var(--muted); font-size: 12.5px; }

.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.health > div { padding: 12px 16px; border-right: 1px solid var(--line); }
.health > div:last-child { border-right: none; }
.health .k { font-size: 12px; color: var(--muted); display: flex; gap: 7px; align-items: center; }
.health .v { font-weight: 650; margin-top: 3px; }
.health .n { font-size: 12px; color: var(--muted); }

/* список разговоров */
.conv-list .row {
  display: grid; grid-template-columns: 92px 56px minmax(0, 1fr) 150px 60px; gap: 14px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line); color: inherit;
}
.conv-list .row:hover { background: var(--surface-2); text-decoration: none; }
.conv-list .row:last-child { border-bottom: none; }
.conv-list .when b { display: block; font-variant-numeric: tabular-nums; }
.conv-list .when span { font-size: 12px; color: var(--muted); }
.conv-list .dur { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.conv-list .body { min-width: 0; }
.conv-list .body .text { color: var(--ink-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list .body .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.conv-list .who { font-size: 13px; color: var(--ink-2); }
.conv-list .head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); font-weight: 600; padding: 9px 18px; }
.pager { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }

/* разговор */
.conv-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.conv-head .facts { display: flex; gap: 8px 22px; flex-wrap: wrap; flex: 1; }
.conv-head .fact .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.conv-head .fact .v { font-weight: 650; }
audio { width: 100%; height: 36px; }
.verdicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
/* Вердикты таблицей-чеклистом (30.09): строка на пункт, по нажатию -- цитата и запись. */
.vtable { border-top: 1px solid var(--line); }
.vrow > summary { display: grid; grid-template-columns: 22px minmax(150px, 230px) minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; font-size: 13.5px; }
.vrow > summary::-webkit-details-marker { display: none; }
.vrow > summary:hover { background: var(--surface-2); }
.vrow[open] > summary { background: var(--surface-2); border-bottom-color: transparent; }
.vrow .vicon { display: inline-flex; color: var(--na); }
.vrow .vact button, .vrow .vact .pill { white-space: nowrap; }
.vrow .vicon .icon { width: 16px; height: 16px; }
.vrow.v-good .vicon { color: var(--good); }
.vrow.v-bad .vicon { color: var(--bad); }
.vrow.v-warn .vicon { color: var(--warn); }
.vrow.v-freq .vicon { color: var(--accent); }
.vrow.v-bad .vtitle { font-weight: 600; }
.vrow .vnote { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow.v-na .vtitle, .vrow.v-na .vnote { color: var(--muted); }
.vrow .vbody { padding: 4px 6px 12px 38px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vrow .vbody blockquote { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink-2); }
.vrow .vbody .comment { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.vrow .vbody .t-time { border: none; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; }
.vrow .vbody .na-line { font-size: 13px; color: var(--ink-2); padding: 2px 0; }
.vrow .vbody .check-row { margin-top: 6px; }
.verdict { border: 1px solid var(--line); border-left: 4px solid var(--na); border-radius: 11px; padding: 11px 13px; background: var(--surface); }
.verdict.good { border-left-color: var(--good); }
.verdict.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
.verdict.warn { border-left-color: var(--warn); }
.verdict.out { opacity: .55; }
.verdict .top { display: flex; align-items: center; gap: 8px; }
.verdict .top h3 { flex: 1; font-size: 13.5px; }
.verdict blockquote { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.verdict .comment { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.verdict form { margin-top: 8px; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bubble .who { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; opacity: .75; }
.bubble.admin { align-self: flex-start; background: var(--accent-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.client { align-self: flex-end; background: var(--surface-3); border-bottom-right-radius: 4px; }
.bubble.other { align-self: center; background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-2); }
.transcript { white-space: pre-wrap; line-height: 1.65; color: var(--ink-2); font-size: 14px; }
.transcript .unsure { opacity: .5; text-decoration: underline dotted; text-underline-offset: 3px; }
.bubble .unsure, .vc-turn .unsure { opacity: .5; text-decoration: underline dotted; text-underline-offset: 3px; }
.chat .gap { align-self: center; font-size: 12px; color: var(--muted); font-style: italic; padding: 2px 10px; }
.chat .gap::before, .chat .gap::after { content: " · · · "; opacity: .6; }
.bubble .who .t-time { border: none; background: none; padding: 0 0 0 6px; margin: 0; font: inherit; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; opacity: .9; }
.bubble .who .t-time:hover { text-decoration: underline; background: none; }

.editor-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.editor-row:last-child { border-bottom: none; }
.stack-v { display: flex; flex-direction: column; gap: 8px; }

/* Регламент глазами РОПа: пункт одной фразой слева, как он выполняется -- справа. */
.rules { padding-top: 4px; padding-bottom: 4px; }
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rule-row:last-child { border-bottom: none; }
.rule-main h3 { margin: 0 0 4px; font-size: 15px; }
.rule-text { margin: 0 0 8px; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.rule-how { margin-top: 8px; }
.rule-how summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; }
.rule-how summary::before { content: "▸ "; }
.rule-how[open] summary::before { content: "▾ "; }
.rule-how p { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 70ch; }
.rule-stat { display: flex; flex-direction: column; gap: 5px; color: inherit; padding: 2px 0; }
.rule-stat:hover { text-decoration: none; }
.rule-stat:hover .rule-num { color: var(--accent); }
.rule-num { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rule-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rule-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--good); }
.rule-bar.mid > span { background: var(--warn); }
.rule-bar.lo > span { background: var(--bad); }
.rule-bar.freq > span { background: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.empty .icon { width: 30px; height: 30px; opacity: .5; }

.auth { max-width: 380px; margin: 12vh auto 0; }
.auth .brand { justify-content: center; margin-bottom: 18px; }
.auth form { display: flex; flex-direction: column; gap: 12px; }
.auth input { width: 100%; }

@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .brand-sub, .nav-title { display: none; }
  .point-switch { margin: 0; flex: 1; min-width: 150px; }
  .nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .nav a { white-space: nowrap; padding: 6px 10px; }
  .side-foot { margin: 0; padding: 0; border: none; }
  .side-foot .who { display: none; }
  .main { padding: 18px 16px 48px; }
  .g-2, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .conv-list .row { grid-template-columns: 70px minmax(0, 1fr) 54px; }
  .conv-list .row .dur, .conv-list .row .who, .conv-list .head { display: none; }
  .health > div { border-right: none; border-bottom: 1px solid var(--line); }
  .editor-row { grid-template-columns: 1fr; }
  .rule-row { grid-template-columns: 1fr; gap: 10px; }
  .vrow > summary { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .vrow .vnote { grid-column: 2 / -1; white-space: normal; }
  .vrow .vact { grid-column: 3; grid-row: 1; }
  .vrow .vbody { padding-left: 10px; }
  .rule-stat { max-width: 260px; }
  .item-row { grid-template-columns: minmax(110px, 40%) 1fr 48px; }
}