:root {
  --red: #e21b1f;
  --red-soft: #fde8e8;
  --ink: #1d1a1a;
  --muted: #736b68;
  --line: #e7e2df;
  --paper: #f4f2f0;
  --card: #ffffff;
  --ok: #1f7a4d;
  --ok-soft: #e3f3ea;
  --warn: #9a6400;
  --warn-soft: #fbf0d9;
  --info: #2f5fa7;
  --info-soft: #e6eefb;
  --violet: #6a3fb5;
  --violet-soft: #efe6fb;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(29, 26, 26, .05), 0 8px 24px rgba(29, 26, 26, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
p { margin: 0; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(226, 27, 31, .35); outline-offset: 2px; }

/* --- верхняя панель --- */
.topbar-stack { position: sticky; top: 0; z-index: 10; }
.topbar {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 28px;
  background: #1d1a1a; color: #fff;
}
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; }
/* Логотип: облачко с нотой (_brand.html), под названием — точки цветов каналов бота. */
.brand__mark { display: block; flex-shrink: 0; width: 32px; height: 32px; }
.brand__text { display: grid; gap: 5px; line-height: 1.1; }
.brand__dots { display: flex; gap: 4px; }
.brand__dot { width: 7px; height: 7px; border-radius: 50%; }
.brand__dot--telegram { background: #2aabee; }
.brand__dot--vk { background: #0077ff; }
.brand__dot--max { background: #8b3dff; }
.brand__dot--instagram { background: #e4405f; }
.brand--center { justify-content: center; margin-bottom: 18px; }
/* Разделы не помещаются в окно — переносятся на вторую строку, страница вбок не прокручивается. */
.topbar__nav { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-right: auto; }
.topbar__nav a { padding: 6px 12px; border-radius: 8px; text-decoration: none; opacity: .72; white-space: nowrap; }
.topbar__nav a.is-active, .topbar__nav a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.topbar__logout { margin: 0; }
.topbar__user { flex-shrink: 100; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .72; }
@media (max-width: 1600px) {
  .topbar { gap: 14px; padding-inline: 20px; }
  .topbar__nav { gap: 2px; }
  .topbar__nav a { padding: 6px 9px; }
}
@media (max-width: 1440px) {
  .topbar__nav a { font-size: 13px; }
}
/* Подписи ботов в шапке прячутся раньше, чем она переполнится: у владельца восемь разделов, «?» и имя. С подписями
   на 1441–1799 px имя сжималось до нуля (ссылка на «Вход и защита» пропадала), а разделы уезжали на вторую строку.
   Без подписи бот узнаётся по значку мессенджера, название — во всплывающей подсказке. */
@media (max-width: 1800px) {
  .channel-pill__label { display: none; }
}

/* Метки работающих каналов: зелёная точка, клик ведёт в «Каналы». */
.channel-pills { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.channel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px;
  background: rgba(255,255,255,.08); font-size: 12px; font-weight: 600;
}
.channel-pills:hover .channel-pill { background: rgba(255,255,255,.14); }
.channel-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9290; }
.channel-pill--running { color: #bff0d3; }
.channel-pill--running .channel-pill__dot { background: #3ecf7a; box-shadow: 0 0 0 3px rgba(62, 207, 122, .25); }
.channel-pills--none { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; opacity: .6; white-space: nowrap; }
.channel-pills--none:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* --- кнопки и поля --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #cfc7c3; }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover { background: #c9161a; border-color: #c9161a; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.2); color: #fff; }
.btn--danger { color: #a3161a; }
.btn--danger:hover { border-color: #e9a5a7; background: var(--red-soft); }
.btn--block { width: 100%; }
.btn--small { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); font-weight: 500; text-decoration: underline; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer;
}
.icon-btn:hover { border-color: #cfc7c3; }
.icon-btn[disabled] { opacity: .35; cursor: default; }
.icon-btn--danger:hover { background: var(--red-soft); border-color: #e9a5a7; color: #a3161a; }

.field { display: grid; gap: 6px; margin-bottom: 14px; align-content: start; }
.field > span { font-size: 13px; font-weight: 600; }
input, textarea, select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit;
}
select { padding-right: 28px; }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; accent-color: var(--red); }
input[type="file"] { padding: 7px; }
input[readonly] { background: #faf9f8; color: var(--muted); }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(226, 27, 31, .15); }
.hint { font-size: 12px; line-height: 1.45; color: var(--muted); }
.hint--warn { color: var(--warn); }
.field-error { font-size: 12px; font-weight: 600; color: #a3161a; }
.has-error > input, .has-error > textarea, .has-error > select, .has-error .range input { border-color: var(--red); background: #fffafa; }
.check { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.check .hint { flex-basis: 100%; margin-left: 24px; }
.check.is-disabled { color: var(--muted); cursor: default; }
.check--field { align-self: end; margin-bottom: 22px; }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid { display: grid; gap: 0 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 4px; }

.alert { padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert a { font-weight: 600; }
.alert--ok { background: var(--ok-soft); color: var(--ok); }
.alert--error { background: var(--red-soft); color: #a3161a; }
.alert--warn { background: var(--warn-soft); color: #7a4f00; }
.alert--compact { margin: 8px 0; padding: 8px 10px; font-size: 13px; word-break: break-word; }

/* Уведомления после действий — поверх страницы, блоки не сдвигают. */
/* Полоса сохранения: появляется внизу экрана, как только в настройках что-то поменяли. */
.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12);
  transform: translateY(130%); transition: transform 0.18s ease; visibility: hidden;
}
.save-bar.is-shown { transform: none; visibility: visible; }
.save-bar__note { color: var(--muted); font-size: 13px; }
/* Под полосой не должен прятаться конец страницы. */
body.has-save-bar { padding-bottom: 68px; }
@media (max-width: 640px) {
  .save-bar { gap: 10px; padding: 8px 12px; }
  .save-bar__note { font-size: 12px; }
}

.toast-stack { position: fixed; top: 76px; right: 20px; z-index: 50; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { position: fixed; top: 76px; right: 20px; z-index: 50; width: min(380px, calc(100vw - 32px)); margin: 0; padding-right: 38px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 10px 28px rgba(20, 20, 20, .16); pointer-events: auto; animation: toast-in .22s ease-out; transition: opacity .25s ease, transform .25s ease; }
.toast-stack .toast { position: relative; top: auto; right: auto; width: auto; }
.toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.toast__close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; }
.toast__close:hover, .toast__close:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 640px) { .toast-stack, .toast { top: 12px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* --- страница --- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px; }
.page--wide { max-width: 1360px; }
.page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.page__head p { margin-top: 4px; max-width: 760px; }
.page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page__actions form { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 4px !important; }
.search { display: flex; gap: 8px; min-width: min(100%, 360px); }
.back { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card--flush { padding: 0; overflow: hidden; }
.card--link { display: flex; justify-content: space-between; font-weight: 700; text-decoration: none; }
.card--link:hover { border-color: #cfc7c3; }

/* --- фильтры --- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-weight: 600; font-size: 13px; }
.chip b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-active b { color: rgba(255,255,255,.7); }
/* Фильтры списка обращений — одной строкой: мессенджеры кнопками, шаг, метка и ответственный списками. */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.list-filters .chips { margin: 0; gap: 6px; }
.chips--compact .chip { gap: 6px; padding: 4px 10px; font-size: 12.5px; }
.list-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.list-filter select { width: auto; max-width: 240px; padding: 4px 26px 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.list-filter.is-active select { border-color: var(--ink); background-color: var(--ink); color: #fff; }
.list-filters__reset { font-size: 12.5px; color: var(--muted); }

/* --- таблица --- */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 11px 16px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); background: #faf9f8; white-space: nowrap; }
.table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfafa; }
/* Строка обращения целиком ведёт в чат (admin.js). */
.table tbody[data-rows] tr { cursor: pointer; }
.table tbody[data-rows] tr:hover { background: #f6f3f1; }
.table tbody[data-rows] tr:hover .row-link b { text-decoration: underline; text-underline-offset: 2px; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .preview { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.table tr.is-unread .preview { color: var(--ink); font-weight: 600; }
.order-cell span { display: block; font-size: 13px; }
.order-cell b { font-variant-numeric: tabular-nums; }
.row-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.row-link small { display: block; }
.empty { text-align: center; padding: 48px 16px !important; color: var(--muted); }

.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--red-soft); color: var(--red); font-weight: 700; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 44px; height: 44px; font-size: 18px; }
.messenger-icon { display: inline-block; flex: none; vertical-align: -3px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eeebe9; color: var(--muted); white-space: nowrap; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--wait { background: var(--warn-soft); color: var(--warn); }
.badge--error { background: var(--red-soft); color: #a3161a; }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--soon { background: var(--violet-soft); color: var(--violet); }
.badge--count { margin-left: auto; min-width: 22px; text-align: center; background: var(--red); color: #fff; }

/* Шаг клиента: оттенок подсказывает, где он: решает, ждёт генератор, оплатил, получил песню. */
.step { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #eeebe9; color: var(--muted); }
.step--wait { background: var(--warn-soft); color: var(--warn); }
.step--work { background: var(--info-soft); color: var(--info); }
.step--paid { background: var(--violet-soft); color: var(--violet); }
.step--done { background: var(--ok-soft); color: var(--ok); }

/* --- диалог --- */
.dialog { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dialog__chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* Шапка чата — компактная: аватар, имя и одна строка о клиенте, шаг и тех.поддержка справа. */
.dialog__head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.dialog__title { flex: 1; min-width: 0; }
.dialog__name { overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.dialog__who { overflow: hidden; margin-top: 1px; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.dialog__head .step { flex: none; padding: 2px 8px; font-size: 11px; }
.dialog__head .support-report { padding: 4px 10px; font-size: 12px; }
.dialog__who .messenger-icon, .row-link small .messenger-icon { margin-right: 2px; }
.dialog__side { display: grid; gap: 10px; }
/* Блоки правой колонки карточки плотнее: колонка длинная, а смотрят её, не отрываясь от переписки. */
.dialog__side > .card { padding: 14px 16px; }
.dialog__side > .card > h2 { margin-bottom: 8px; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.side-head h2 { margin: 0; }
.side-head small { font-size: 12px; white-space: nowrap; }
.dialog__side .ai-badge:last-child { margin-bottom: 0; }
/* «Генерация» — конвейер этапов: точка и линия между этапами, как на производстве. */
.pipeline { list-style: none; margin: 0 0 10px; padding: 0; }
.pipeline__stage { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.pipeline__stage:last-child { padding-bottom: 0; }
.pipeline__stage:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.pipeline__dot { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #c9c3bb; box-shadow: 0 0 0 3px var(--card); position: relative; z-index: 1; }
.pipeline__stage--ok .pipeline__dot { background: var(--ok); }
.pipeline__stage--work .pipeline__dot { background: #e2a100; }
.pipeline__stage--error .pipeline__dot { background: var(--red); }
.pipeline__body { display: grid; gap: 3px; min-width: 0; }
.pipeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pipeline__state { font-size: 13px; }
.pipeline__stage--ok .pipeline__state { color: var(--ok); }
.pipeline__stage--work .pipeline__state { color: #9a6a00; }
.pipeline__stage--error .pipeline__state { color: var(--red); }
.pipeline__stage--idle .pipeline__state, .pipeline__stage--idle b { color: var(--muted); }
.pipeline__head small { font-size: 12px; }
.pipeline__meta { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pipeline__meta code { font-size: 11px; }
.pipeline .lyrics summary { font-size: 12px; }
.pipeline .lyrics summary::after { margin-left: 0; }
.pipeline .lyrics__text { margin-top: 6px; }
/* «Перевести на шаг» свёрнут: раскрывается по клику. */
.step-move { margin-top: 10px; }
.step-move summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.step-move summary::-webkit-details-marker { display: none; }
.step-move summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.step-move[open] summary::before { transform: rotate(90deg); }
.step-move form { margin-top: 10px; }

/* Список обращений слева от чата: обновляется сам, открытый клиент подсвечен. */
.dialog__list { display: none; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.dialog__list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.dialog__list-head h2 { margin: 0; }
.dialog__list-head a { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.dialog__list-head a:hover { color: var(--ink); }
.side-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); text-decoration: none; }
.side-row:hover { background: #faf8f7; }
.side-row.is-active { background: var(--red-soft); }
.side-row__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.side-row__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.side-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.side-row.is-unread .side-row__name { font-weight: 800; }
.side-row__time { flex: none; font-size: 11px; color: var(--muted); }
.side-row__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.side-row .badge--count { margin-left: 0; }
.side-list__empty { padding: 24px 16px; text-align: center; color: var(--muted); }
.side-list__more { display: flex; justify-content: center; width: calc(100% - 28px); margin: 12px 14px 14px; }
.side-list__more[hidden] { display: none; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }

.timeline { display: flex; flex-direction: column; gap: 10px; padding: 18px; height: min(62vh, 680px); overflow-y: auto; background: #faf8f7; }
.timeline__note { align-self: center; margin: 0; font-size: 12px; color: var(--muted); }
.timeline__earlier { align-self: center; flex: none; }
.timeline__earlier.is-busy { opacity: .6; pointer-events: none; }

.event { display: flex; flex-direction: column; max-width: 78%; }
.event time { font-size: 11px; color: var(--muted); margin-top: 3px; padding: 0 4px; }
.event--in { align-self: flex-start; }
.event--out, .event--admin { align-self: flex-end; align-items: flex-end; }
.event__meta { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0 4px; }
.event__meta time { margin: 0; padding: 0; }
.event__sent { flex: none; color: var(--ok); }
.event__failed { max-width: 100%; margin-top: 3px; padding: 0 4px; font-size: 12px; font-weight: 600; line-height: 1.35; color: #a3161a; text-align: right; overflow-wrap: anywhere; }
/* Служебная отметка — как сервисное сообщение мессенджера: текст по центру ровными строками, время — в конце текста. */
.event--system { display: block; align-self: center; max-width: min(90%, 680px); padding: 6px 14px; border-radius: 14px; background: #eeebe9; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.event--system time { display: inline-block; margin: 0 0 0 8px; padding: 0; font-weight: 400; opacity: .8; white-space: nowrap; }
.event--system .event__error { display: block; margin-top: 2px; font-weight: 400; }
.event--milestone { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.event--error { background: var(--red-soft); color: #a3161a; }
.event__error { flex-basis: 100%; text-align: center; font-family: ui-monospace, monospace; font-size: 11px; }

.bubble { padding: 9px 13px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); word-break: break-word; }
/* Переносы строк сохраняются только в тексте сообщения: отступы шаблона не превращаются в пустые строки. */
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble--in { border-bottom-left-radius: 5px; }
.bubble--out { background: #efedeb; border-color: transparent; border-bottom-right-radius: 5px; }
/* Ответ оператора — светло-голубой пузырь с тёмным текстом: отличается от бота и не давит тёмным цветом. */
.bubble--admin { background: #eaf0fd; border-color: #d5e0f7; color: var(--ink); border-bottom-right-radius: 5px; }
.bubble--admin .bubble__author { color: var(--info); opacity: .85; }
.bubble--failed { outline: 2px dashed rgba(226, 27, 31, .5); }
.bubble--button { border: 1px dashed #cfc7c3; background: transparent; }
.bubble__hint { display: block; font-size: 11px; color: var(--muted); }
.bubble__author { display: block; font-size: 11px; font-weight: 700; opacity: .6; margin-bottom: 2px; }
.bubble__buttons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bubble__buttons span { padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.bubble__note { display: block; margin-top: 6px; font-size: 11px; opacity: .7; }
.file { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.file small { font-weight: 400; color: var(--muted); }

.reply { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.reply textarea { min-height: 64px; }
.dialog__chat .alert { margin: 12px 18px 0; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; word-break: break-word; }
.facts--stacked { grid-template-columns: 1fr; gap: 2px; }
.facts--stacked dd { margin-bottom: 8px; font-weight: 600; }
.facts--stacked dd small { font-weight: 400; }
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.receipts { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.order-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.order-lines li { display: flex; justify-content: space-between; gap: 10px; }
.order-lines__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-total { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 15px; }

.lyrics summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.lyrics summary::-webkit-details-marker { display: none; }
.lyrics summary::after { content: "показать"; margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: underline; }
.lyrics[open] summary::after { content: "скрыть"; }
.lyrics__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lyrics__text { margin-top: 12px; white-space: pre-wrap; max-height: 460px; overflow-y: auto; padding: 12px; border-radius: 10px; background: #faf8f7; }

.jobs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.job { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.job__error { flex-basis: 100%; font-family: ui-monospace, monospace; font-size: 11px; color: #a3161a; word-break: break-word; }

/* --- каналы --- */
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.channel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.channel__title { margin: 0 0 4px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.channel__form .hint { margin: -6px 0 12px; }
.channel--soon { background: #fbfaf9; box-shadow: none; }
/* Instagram: кнопка входа и блок настройки приложения Meta. */
.btn--instagram { display: inline-flex; align-items: center; gap: 8px; border: 0; color: #fff; background: linear-gradient(90deg, #f9a03f 0%, #e1306c 45%, #833ab4 100%); }
.btn--instagram:hover:not(:disabled) { filter: brightness(1.06); }
.btn--instagram:disabled { opacity: .55; }
.btn--instagram .messenger-icon rect:first-of-type { fill: transparent; }
.ig-setup { margin-top: 18px; max-width: 860px; }
.ig-setup__steps { margin: 0 0 14px; }
.ig-setup__steps summary { cursor: pointer; font-weight: 600; }
.ig-setup__steps ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.ig-setup__urls dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ig-setup__urls code { overflow-wrap: anywhere; }
.ig-setup__form { max-width: 520px; }
.ig-i2crm { margin: 0 0 12px; }
.ig-i2crm__steps { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.ig-i2crm__url { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; }
.ig-i2crm__url code { overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #9a9290; }
.status--running { color: var(--ok); }
.status--running i { background: #3ecf7a; box-shadow: 0 0 0 3px rgba(62, 207, 122, .2); }
.status--no_token { color: var(--warn); }
.status--no_token i { background: #e0a100; }
.status--error { color: #a3161a; }
.status--error i { background: var(--red); }
/* Токен маскируется стилем, а не type=password: иначе браузер предложит сохранить его как пароль CRM. */
.masked { -webkit-text-security: disc; text-security: disc; }

/* --- сценарии --- */
.flow-list { display: grid; gap: 12px; margin-bottom: 18px; }
.flow-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.flow-card__title { margin: 0 0 8px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.flow-card__title a { text-decoration: none; }
.flow-card__title a:hover { text-decoration: underline; }
.flow-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.flow-card__channels { display: inline-flex; gap: 10px; }
.flow-card__channel { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.owners { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.owners li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.flow-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.flow-editor__side { display: grid; gap: 14px; position: sticky; top: 76px; }
.step-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; counter-reset: steps; }
.step-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  scroll-margin-top: 80px;
}
.step-card:target { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226, 27, 31, .12); }
.step-card--error { border-left: 4px solid var(--red); }
.step-card--warning { border-left: 4px solid #e0a100; }
.step-card__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #eeebe9; font-weight: 700; font-size: 13px; color: var(--muted); }
.step-card__body { min-width: 0; }
.step-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.step-card__title { font-size: 16px; font-weight: 700; text-decoration: none; margin-right: 8px; }
.step-card__title:hover { text-decoration: underline; }
.step-card__key { color: var(--muted); font-size: 12px; }
.step-card__text { margin-top: 4px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.step-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.step-card__problems { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.step-card__tools { display: flex; align-items: flex-start; gap: 6px; }
.step-card__tools form { margin: 0; }
.step-card__add { grid-column: 2 / -1; }
.step-card__add summary { display: inline-block; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; }
.step-card__add summary::-webkit-details-marker { display: none; }
.step-card__add summary:hover { color: var(--red); }
.add-step { display: flex; gap: 8px; margin-top: 8px; max-width: 480px; }
.add-last { box-shadow: none; }

.type-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #eeebe9; color: var(--muted); }
.type-tag--choice, .type-tag--text_input { background: var(--info-soft); color: var(--info); }
.type-tag--generate_lyrics, .type-tag--edit_lyrics, .type-tag--lyrics_review, .type-tag--start_song { background: var(--violet-soft); color: var(--violet); }
.type-tag--checkout, .type-tag--payment_success { background: var(--warn-soft); color: var(--warn); }
.type-tag--song_ready, .type-tag--voice_request { background: var(--ok-soft); color: var(--ok); }

.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.problem { font-size: 13px; }
.step-card__problems .problem::before { content: "• "; }
.problem--error { color: #a3161a; }
.problem--warning { color: var(--warn); }
.problems .problem { color: var(--ink); }
.ok-note { color: var(--ok); font-weight: 600; }
.channels-pick { margin: 6px 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.channels-pick legend { padding: 0 4px; font-size: 13px; font-weight: 600; }

/* --- редактор шага --- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.editor__main { display: grid; gap: 14px; min-width: 0; }
.editor__side { display: grid; gap: 14px; position: sticky; top: 76px; }
.editor__save { display: flex; gap: 10px; }
.section > h2 { margin-bottom: 14px; }
.section > .hint { margin: -8px 0 12px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
.toolbar__btn { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #faf9f8; font: inherit; font-size: 13px; cursor: pointer; }
.toolbar__btn:hover { background: var(--card); border-color: #cfc7c3; }
#step-text { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.55; }
.variables { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.variable { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px dashed #cfc7c3; border-radius: 8px; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.variable code { color: var(--red); }
.variable:hover { border-style: solid; background: var(--red-soft); }

.repeat-item { position: relative; }
.repeat-tools { display: flex; gap: 4px; }
.options { display: grid; gap: 10px; margin-bottom: 10px; }
.option { padding: 12px 12px 4px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfb; }
.option.has-error { border-color: var(--red); }
.option > .repeat-tools { position: absolute; top: 8px; right: 8px; }
.option__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding-right: 108px; }
.option__label, .option__next, .option__summary { grid-column: span 1; }
.option__next { grid-column: 1 / -1; }
.option__more { margin: -4px 0 10px; }
.option__more summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); }
.option__more .option__grid { margin-top: 10px; padding-right: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option__more .option__summary { grid-column: 1 / -1; }

.button-rows { display: grid; gap: 10px; margin-bottom: 10px; }
.button-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfb; }
.button-row__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.button-row__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.button-item { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.button-item.has-error { border-color: var(--red); }
.button-item .field { margin-bottom: 8px; }
.button-item__url, .button-item.is-url .button-item__target { display: none; }
.button-item.is-url .button-item__url { display: grid; }

.attachments { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.attachment { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.attachment__preview { width: 96px; height: 64px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #f1eeec; }
.attachment__preview img, .attachment__preview video { width: 100%; height: 100%; object-fit: cover; }
.attachment__preview audio { width: 96px; }
.attachment__icon { font-size: 26px; }
.attachment__info { display: grid; min-width: 0; overflow-wrap: anywhere; }
.upload { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.upload .field { margin-bottom: 0; flex: 1 1 260px; }
.upload + .hint { margin-top: 8px; }

.phone { padding: 14px; border-radius: 18px; background: #dfe7ee; }
.phone__bubble { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
.phone__bubble blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid #2aabee; background: #f1f8fd; white-space: pre-wrap; }
.phone__bubble a { color: #1f79c2; }
.phone__bubble:empty::before { content: "Текст пустой"; color: var(--muted); }
.phone__keyboard { display: grid; gap: 4px; margin-top: 6px; }
.phone__keyboard:empty { display: none; }
.phone__row { display: flex; gap: 4px; }
.phone__button { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }

/* --- оплата и интеграции --- */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.settings-main { display: grid; gap: 14px; }
.settings-side { position: sticky; top: 76px; }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226, 27, 31, .12); }
.radio-card input { margin-top: 3px; }
.radio-card small { display: block; color: var(--muted); }
.copy-list { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.copy-field { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.copy-field__label { font-size: 13px; font-weight: 600; }
.secret { padding: 12px 0; border-top: 1px solid var(--line); }
.secret__head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.secret__form { display: flex; gap: 8px; }
.secret__clear { margin-top: 6px; }

/* --- вход --- */
.login-body { min-height: 100vh; display: grid; place-items: center; }
.login { width: min(100%, 380px); padding: 24px; }
.login__card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.login__card h1 { font-size: 18px; text-align: center; margin-bottom: 18px; }

/* --- сотрудники --- */
.section-tabs { margin: 0 0 18px; }
.security-layout { display: grid; gap: 16px; max-width: 760px; }
.totp-qr { display: flex; justify-content: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; width: fit-content; }
.totp-manual { margin: 10px 0; }
.totp-secret { display: inline-block; padding: 6px 10px; border-radius: 8px; background: var(--paper); font-size: 15px; letter-spacing: 1px; user-select: all; }
.totp-form { margin-top: 12px; display: grid; gap: 10px; max-width: 280px; }
.device-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.device-list small { display: block; font-size: 12px; }
.device-list form { margin: 0; }
.login__back { text-align: center; margin: 12px 0 0; }
/* Ответ клиента вместо вопроса: строка под шагом в сценарии и пример в редакторе шага. */
.step-card__answer { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); text-decoration: none; }
.step-card__answer:hover { color: var(--ink); text-decoration: underline; }
.answer-preview { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--paper); }
/* Подпись под выключателем — своей строкой под заголовком. */
.ai-switch-row small { display: block; font-weight: 400; }
/* Галочки способов оплаты ЮKassa. */
.pay-methods { margin: 0; padding: 0; border: 0; }
.pay-methods legend { padding: 0; font-weight: 600; }
.pay-methods .check small { display: block; }
.staff-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
/* Таблица не сжимается до переносов по буквам: узкий экран прокручивает её вбок. */
.staff-table { min-width: 1020px; }
.staff-totp .row-actions { margin-top: 6px; }
.role-table { min-width: 760px; }
.role-table td { vertical-align: middle; }
.role-table td small { display: block; font-size: 12px; }
.role-table__check { text-align: center; }
.role-table__check .check { justify-content: center; margin: 0; }
.role-hint { margin: 0 16px 10px; }
.role-add { padding: 0 16px 16px; }
.staff-side { display: grid; gap: 14px; }
.staff-table__title { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.staff-table__title b { margin-left: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.staff-table td small { display: block; font-size: 12px; }
.staff-table__who { overflow-wrap: break-word; }
.staff-table__email { overflow-wrap: anywhere; }
/* Имя сотрудника меняется прямо в списке — по ссылке, чтобы первая колонка не расширялась. */
.staff-name summary { display: inline-block; margin-top: 2px; color: var(--muted); font-size: 12px; text-decoration: underline dotted; cursor: pointer; list-style: none; }
.staff-name summary::-webkit-details-marker { display: none; }
.staff-name__form { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.staff-name__form input { width: 11em; min-width: 0; }
.staff-table tr.is-off .staff-table__who { color: var(--muted); }
/* Администратор — не строка базы: отделяем его от списка сотрудников. */
.staff-table__owner > td { background: var(--paper); }
.staff-role { display: flex; gap: 6px; align-items: center; margin: 0; }
.staff-role select { min-width: 130px; padding-top: 5px; padding-bottom: 5px; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
.staff-secret { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.staff-secret code { padding: 3px 8px; border-radius: 6px; background: var(--paper); font-size: 13px; user-select: all; }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.password-field input { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.role-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.role-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-list form { margin: 0; }
.role-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }

/* --- материалы клиента в карточке --- */
.ui-icon { flex: none; vertical-align: -3px; }
.materials { display: grid; gap: 12px; margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.materials__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.material { display: grid; gap: 6px; justify-items: start; }
.material__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
/* Купленные голос и фото: зелёная точка — есть, жёлтая — ждём от клиента, серая — не будет или после оплаты. */
.material__dot { width: 9px; height: 9px; border-radius: 50%; background: #c9c3bb; flex: none; }
.material--ok .material__dot { background: var(--ok); }
.material--wait .material__dot, .material--confirm .material__dot { background: #e2a100; }
.material__note { font-weight: 400; color: var(--muted); }
.material--wait .material__note, .material--confirm .material__note { color: #9a6a00; }
.material__audio { width: 100%; height: 36px; }
.material__photo { position: relative; display: block; width: 132px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); cursor: zoom-in; }
.material__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.material__photo:hover img, .material__photo:focus-visible img { transform: scale(1.04); }
.material__zoom { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(29, 26, 26, .62); color: #fff; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 18, 18, .84); }
.lightbox img { display: block; max-width: 94vw; max-height: 88vh; border-radius: 12px; cursor: zoom-out; }
.lightbox__stage { display: grid; place-items: center; }
.lightbox video { display: block; max-width: 94vw; max-height: 88vh; border-radius: 12px; background: #000; }
.lightbox__nav { position: fixed; top: 50%; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.lightbox__nav:hover, .lightbox__nav:focus-visible { background: rgba(255, 255, 255, .3); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__close { position: fixed; top: 16px; right: 16px; }
@media (prefers-reduced-motion: reduce) { .material__photo img { transition: none; } }

/* --- рассылки --- */
.bc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.bc-side { display: grid; gap: 14px; }
.bc-table__progress { min-width: 190px; }
.bc-table__progress small { display: block; margin-top: 4px; }
.bc-progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--paper); appearance: none; -webkit-appearance: none; }
.bc-progress::-webkit-progress-bar { background: var(--paper); border-radius: 999px; }
.bc-progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
.bc-progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.bc-progress--big { height: 12px; margin: 4px 0 14px; }
.wizard { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.wizard__step a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; font-size: 13px; font-weight: 600; }
.wizard__num { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-size: 12px; font-variant-numeric: tabular-nums; }
.wizard__step.is-current a { border-color: var(--ink); background: var(--ink); color: #fff; }
.wizard__step.is-current .wizard__num { background: var(--red); color: #fff; }
.bc-segment { max-width: 780px; }
.bc-date { display: grid; gap: 4px; }
.bc-radio-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.bc-messengers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bc-messenger { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.bc-messenger:has(input:checked) { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226, 27, 31, .12); }
.bc-messenger.is-disabled { opacity: .6; cursor: not-allowed; }
.audience { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--info-soft); }
.audience__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); }
.audience__count { font-size: 20px; font-variant-numeric: tabular-nums; }
.audience small { flex-basis: 100%; }
.bc-buttons { display: grid; gap: 10px; margin-bottom: 10px; }
.bc-button { display: grid; grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 1.4fr) auto; gap: 10px; align-items: end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfb; }
.bc-button .field { margin-bottom: 0; }
.bc-button .bc-button__url, .bc-button.is-url .bc-button__code { display: none; }
.bc-button.is-url .bc-button__url { display: grid; }
.bc-button .repeat-tools { align-self: center; }
.phone__media { display: block; width: 100%; margin-bottom: 6px; border-radius: 12px; }
.bc-status__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bc-status__badge { padding: 4px 12px; font-size: 13px; }
.bc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-actions form { margin: 0; }
.bc-waiting { margin: 0 0 14px; }
.bc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bc-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.bc-stat span { font-size: 12px; color: var(--muted); }
.bc-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.bc-stat--ok b { color: var(--ok); }
.bc-stat--error b { color: #a3161a; }
.bc-facts { margin-bottom: 0; }
.bc-failures, .bc-log, .bc-button-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bc-failures li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bc-failures li:last-child { border-bottom: 0; }
.bc-failures b { font-variant-numeric: tabular-nums; }
.bc-log { max-height: 420px; overflow-y: auto; }
.bc-log__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.bc-log__item time { color: var(--muted); font-variant-numeric: tabular-nums; }
.bc-log__item--warn { background: var(--warn-soft); }
.bc-log__item--error { background: var(--red-soft); }
.bc-button-list { margin-top: 10px; }
.bc-button-list li { overflow-wrap: anywhere; }
@media (max-width: 1180px) { .bc-layout { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .bc-button, .bc-radio-cards { grid-template-columns: 1fr; }
  .bc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-log__item { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 1180px) {
  .topbar__user { display: none; }
  .staff-layout { grid-template-columns: 1fr; }
  .staff-table, .role-table { min-width: 720px; }
  .channel-pill__label { display: none; }
  .editor, .settings-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 960px) {
  .dialog, .flow-editor, .editor, .settings-layout { grid-template-columns: 1fr; }
  .flow-editor__side, .editor__side, .settings-side { position: static; }
  .topbar { gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
  .page { padding: 18px 14px; }
  .event { max-width: 92%; }
  .grid--2, .grid--3, .radio-cards { grid-template-columns: 1fr; }
  .option__grid { grid-template-columns: 1fr 1fr; padding-right: 0; padding-top: 30px; }
  .option__label { grid-column: 1 / -1; }
  .step-card { grid-template-columns: 30px minmax(0, 1fr); }
  .step-card__tools { grid-column: 2; }
  .copy-field { grid-template-columns: 1fr auto; }
  .copy-field__label { grid-column: 1 / -1; }
}

/* Карточка обращения на широком экране — как в мессенджере: переписка во всю высоту окна,
   поле ответа всегда внизу, а данные клиента справа прокручиваются отдельно. */
@media (min-width: 961px) and (min-height: 600px) {
  .dialog-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .dialog-body .page { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: 20px; }
  .dialog-body .back { align-self: flex-start; }
  .dialog-body .dialog { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .dialog-body .dialog__chat { min-height: 0; }
  .dialog-body .timeline { flex: 1 1 0; height: auto; min-height: 0; overscroll-behavior: contain; }
  .dialog-body .dialog__side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-right: 4px; scrollbar-width: thin; }
}

/* Шире 1100 px слева от чата — список обращений: к следующему клиенту в один клик. */
@media (min-width: 1100px) and (min-height: 600px) {
  .dialog-body .page { max-width: 1760px; }
  .dialog-body .back { display: none; }
  .dialog-body .dialog { grid-template-columns: 300px minmax(0, 1fr) 340px; }
  .dialog-body .dialog__list { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Вложение рассылки в «Как увидит клиент»: картинка, видео или аудиоплеер. */
.phone__attachment { margin-bottom: 6px; }
.phone__attachment:empty { display: none; }
.phone__attachment .phone__media { margin-bottom: 0; }
video.phone__media { max-height: 320px; background: #000; }
.phone__audio { display: block; width: 100%; margin-bottom: 6px; }
.attachment[hidden] { display: none; }
/* Рассылка: тест перед запуском и черновик. «Сохранить черновик» стоит слева, но в разметке идёт после
   «Далее»: Enter в поле формы нажимает первую кнопку, и это должна быть «Далее». */
.editor__save .btn--draft { order: -1; margin-right: auto; }
.bc-launch-form { display: contents; }
.bc-testers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bc-tester { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.bc-tester .check { flex: 1; min-width: 0; margin: 0; }
.bc-add-tester { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bc-add-tester .field { margin: 0; }
.bc-add-tester input { width: 16ch; }

/* Вкладки раздела «Чат-центр». */
/* Линия под вкладками — тенью, а не рамкой: активная вкладка ложится на неё без отрицательного отступа,
   и у строки не появляется лишняя вертикальная прокрутка. */
.tabs { display: flex; gap: 4px; margin: 0 0 16px; box-shadow: inset 0 -1px var(--line); overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--info); }

/* Правила назначения ответственного. */
.rules { list-style: none; margin: 0; padding: 0; }
.rule + .rule { border-top: 1px solid var(--line); }
.rule__form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; margin: 0; padding: 14px 18px; }
.rule__body { display: grid; gap: 3px; min-width: 0; }
.rule__body p { margin: 0; }
.rule.is-on .rule__title { color: var(--ok); }
.switch { position: relative; display: inline-block; flex: none; width: 40px; height: 22px; margin-top: 1px; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: #d9d2ce; transition: background .15s; pointer-events: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch input:checked + .switch__track { background: var(--ok); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--info); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch__track, .switch__track::after { transition: none; } }

/* Ответственный за обращение. */
.assignee-form { display: grid; gap: 8px; margin: 0; }
.assignee-tag { color: var(--info); white-space: nowrap; }
.role-list li { flex-wrap: wrap; }
.role-scope { margin: 0; font-size: 13px; }

/* Фото от клиента в переписке. */
.bubble__photo { display: block; margin: -3px -7px 4px; border-radius: 12px; overflow: hidden; background: #efebe8; line-height: 0; }
.bubble__photo img { display: block; min-width: 120px; min-height: 90px; max-width: min(280px, 100%); max-height: 340px; object-fit: contain; }
.bubble__photo:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* Голосовые, аудио и видео клиента слушаются и смотрятся прямо в переписке. */
.bubble__audio { display: block; width: min(280px, 100%); height: 40px; margin: 2px 0 6px; }
.bubble__video { display: block; max-width: min(280px, 100%); max-height: 340px; margin: -3px -7px 6px; border-radius: 12px; background: #1d1a1a; }
.file a { color: inherit; overflow-wrap: anywhere; }
.photo-missing { display: block; font-size: 12px; color: var(--muted); }

/* «Чат-центр»: обращения за сегодня, неделю и месяц, доля новых — полосой. */
.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cc-card { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.cc-card:hover { border-color: #cfc7c3; }
.cc-card.is-active { border-color: var(--info); box-shadow: 0 0 0 1px var(--info), var(--shadow); }
.cc-card:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.cc-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.cc-card__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-number { display: grid; min-width: 0; }
.cc-number b { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cc-number small { font-size: 12px; color: var(--muted); }
.cc-number--new b, .cc-stat--new b { color: var(--info); }
.cc-progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--info-soft); appearance: none; -webkit-appearance: none; }
.cc-progress::-webkit-progress-bar { background: var(--info-soft); border-radius: 999px; }
.cc-progress::-webkit-progress-value { background: var(--info); border-radius: 999px; }
.cc-progress::-moz-progress-bar { background: var(--info); border-radius: 999px; }
.cc-progress--big { height: 12px; margin: 4px 0 18px; }
.cc-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.cc-period .field { margin: 0; }
.cc-period .hint { align-self: center; }
.bc-stats.cc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-subtitle { margin: 20px 0 10px; font-size: 16px; }
.cc-table__share { min-width: 160px; }
.cc-table__share small { display: block; margin-top: 4px; }
@media (max-width: 960px) { .cc-cards { grid-template-columns: 1fr; } }

/* Напоминания шага в редакторе. */
.reminders { display: grid; gap: 10px; margin-bottom: 10px; }
.reminder { padding: 12px 12px 4px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfb; }
.reminder.has-error { border-color: var(--red); }
.reminder > .repeat-tools { position: absolute; top: 8px; right: 8px; }
.reminder__when { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding-right: 96px; }
.reminder__when .field { width: 120px; }

/* Фильтр «Непрочитанные»: над списком обращений и в колонке слева от чата. */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
/* Ширина поиска задана явно: иначе рядом с фильтром он переносится на новую строку. На телефоне — во всю ширину. */
.list-tools .search { width: 360px; max-width: 100%; }
.unread-filter { margin: 0; }
.chip--unread { color: var(--ink); font-family: inherit; line-height: inherit; cursor: pointer; }
.chip--unread:hover { border-color: #cfc7c3; }
.chip--unread b { color: var(--red); }
.chip--unread.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.chip--unread.is-active b { color: rgba(255,255,255,.8); }
.dialog__list-filter { padding: 10px 14px; border-bottom: 1px solid var(--line); }

/* Картинки и видео от бота в переписке — как фото от клиента, по размеру картинки; у видео первый кадр и значок по центру.
   Предел ширины в пикселях: с процентами ссылка по размеру картинки выходит шире самой картинки. */
.bubble__media { position: relative; width: fit-content; max-width: calc(100% + 14px); cursor: zoom-in; }
.bubble__media img, .bubble__media video { max-width: 280px; }
.bubble__media video { display: block; min-width: 160px; min-height: 90px; max-height: 340px; background: #1d1a1a; pointer-events: none; }
.bubble__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(29, 26, 26, .62); }
.bubble__play::after { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.bubble--admin .bubble__photo { background: rgba(47, 95, 167, .08); }

/* Запланированные напоминания клиента — свёрнутым блоком между перепиской и полем ответа; крестик отменяет напоминание. */
.planned { padding: 7px 18px; border-top: 1px dashed var(--line); background: var(--warn-soft); font-size: 13px; }
.planned__title { font-weight: 600; color: var(--warn); cursor: pointer; }
.planned[open] .planned__title { margin-bottom: 6px; }
.planned__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.planned__list li { position: relative; padding-right: 30px; }
.planned__text { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.planned__cancel { position: absolute; top: 0; right: 0; margin: 0; }
.planned__x { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 24px; cursor: pointer; }
.planned__x:hover, .planned__x:focus-visible { background: rgba(29, 26, 26, .08); color: var(--red); }

/* Реферальная программа. */
.bc-stats.rf-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rf-stats small { font-size: 12px; color: var(--muted); }
.rf-table td { vertical-align: middle; }
.rf-limit { margin: 0; padding: 10px 18px; }
.rf-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.rf-numbers .field { margin: 0; }
.order-total--minor { font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .bc-stats.rf-stats, .rf-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ссылки с метками в карточке сценария («Настройка бота») и метки перехода в карточке клиента. */
.flow-card__id code { font-size: 12px; }
.flow-links { flex-basis: 100%; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.flow-links__params { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.flow-links__title { margin: 0 8px 0 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.flow-links__params input { width: 128px; min-height: 32px; padding: 4px 10px; font-size: 13px; }
.flow-links__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.flow-links__list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.flow-links__channel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.flow-links__url { min-width: 0; padding: 5px 8px; border-radius: 6px; background: #f6f3f1; font-size: 12px; overflow-wrap: anywhere; }
.flow-links__list .muted { grid-column: 2 / -1; font-size: 13px; }
.flow-links .hint { margin: 0; }
.flow-links [hidden] { display: none; }
@media (max-width: 720px) { .flow-links__list li { grid-template-columns: 1fr; } .flow-links__list .muted { grid-column: auto; } }
.link-params .badge { margin: 0 4px 4px 0; }
.ref-link code { font-size: 12px; overflow-wrap: anywhere; user-select: all; }

/* Правый блок карточки: выбор заказа для просмотра и свёрнутые подробности лида. */
.order-pick { margin: 0 0 12px; }
.order-pick select { font-weight: 700; }
.order-pick__note { margin: -4px 0 12px; }
.order-part { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.order-pick + .order-part, .order-pick__note + .order-part { margin-top: 4px; }
/* Свёрнутая анкета: заголовок как у разделов заказа, стрелка и число ответов. */
.answers-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.answers-fold > summary::-webkit-details-marker { display: none; }
.answers-fold > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.answers-fold[open] > summary::before { transform: rotate(90deg); }
.answers-fold__count { padding: 0 6px; border-radius: 999px; background: var(--paper); font-size: 11px; letter-spacing: 0; }
.facts--tight { margin-bottom: 10px; }
.more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; color: var(--muted); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "показать"; margin-left: auto; font-size: 12px; text-decoration: underline; }
.more[open] summary { margin-bottom: 12px; }
.more[open] summary::after { content: "скрыть"; }

/* Картинки и видео в исходящих сообщениях — одинаковые небольшие миниатюры в ряд: что за файл, оператор и так знает,
   целиком — по нажатию. Фото от клиентов остаются крупными. */
.bubble__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.bubble__thumbs .bubble__media { width: 96px; height: 96px; max-width: none; margin: 0; border-radius: 10px; }
.bubble__thumbs .bubble__media img, .bubble__thumbs .bubble__media video { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: cover; }
.bubble__thumbs .bubble__play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.bubble__thumbs .bubble__play::after { left: 11px; top: 8px; border-width: 7px 0 7px 11px; }

/* --- схема сценария: карта бота только для чтения --- */
.page--scheme { max-width: none; }
.scheme-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.scheme-legend li { display: inline-flex; align-items: center; gap: 8px; }
.scheme-legend__line { display: inline-block; width: 34px; height: 0; border-top: 2px solid var(--ink); }
.scheme-legend__line--choice { border-top-color: var(--info); }
.scheme-legend__line--back { border-top-style: dashed; border-top-color: var(--muted); }
.scheme-legend__line--auto { border-top: 3px dotted var(--violet); }
.scheme { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #faf9f8; }
.scheme__wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* Общая схема сверху вниз: основной путь — левая колонка со стрелками вниз, ответвления — справа от своего шага,
   слева — место для петель возвратов и пропусков. Заголовок этапа — с отступом от линии основного пути. */
.scheme--flow { display: grid; grid-template-columns: 340px minmax(340px, 700px); justify-content: center; column-gap: 96px; row-gap: 34px; align-items: start; padding: 20px 40px 40px 200px; }
.scheme__phase-head { grid-column: 1 / -1; position: relative; z-index: 1; padding: 10px 0 0 52px; }
.scheme__phase-head h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.scheme__phase-head h2::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.scheme__phase-head p { margin: 0; max-width: 600px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.scheme__main { position: relative; z-index: 1; }
.scheme__branches { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.scheme__branches .scheme-node { width: 320px; }
/* Меню бота — отдельно под схемой, деревом сверху вниз: под командой с отступом — куда ведут её кнопки. */
.scheme-menu { margin-top: 32px; }
.scheme-menu > h2 { margin-bottom: 4px; }
.scheme-menu > p { margin: 0 0 12px; max-width: 760px; }
.scheme--menu { display: grid; justify-items: start; row-gap: 24px; padding: 24px 190px 32px 28px; }
.scheme__leaf { position: relative; z-index: 1; width: 340px; }
.scheme__leaf--1 { margin-left: 72px; }
.scheme__leaf--2 { margin-left: 144px; }
.scheme__leaf--3 { margin-left: 216px; }
.scheme__leaf--4 { margin-left: 288px; }
.scheme-node { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; scroll-margin-top: 80px; transition: opacity .15s ease; }
.scheme-node--branch { border-style: dashed; box-shadow: none; }
.scheme-node:hover, .scheme-node:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.scheme.is-focused .scheme-node:not(:hover):not(:focus-within):not(.is-linked) { opacity: .42; }
.scheme-node__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.scheme-node__num { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.scheme-node__title { margin: 0 0 4px; font-size: 15px; }
/* Длинное описание типа шага — в три строки, целиком оно в подсказке и в «Подробнее». */
.scheme-node__hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.scheme-node__waits { margin: 0 0 6px; font-size: 12px; }
.scheme-node__next { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; }
.scheme-next { padding-left: 9px; border-left: 2px solid var(--ink); }
.scheme-next--choice { border-left-color: var(--info); }
.scheme-next--back { border-left-style: dashed; border-left-color: var(--muted); }
.scheme-next--auto { border-left-style: dotted; border-left-color: var(--violet); }
.scheme-next a { font-weight: 600; }
.scheme-node__end { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.scheme-node__more { margin-top: 8px; font-size: 12px; }
.scheme-node__more summary { cursor: pointer; color: var(--muted); }
.scheme-node__more h4 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.scheme-node__more ul { display: grid; gap: 2px; margin: 0; padding-left: 16px; }
.scheme-node__more .facts { margin: 0; }
.scheme-node__text { margin: 8px 0 0; padding: 8px; border-radius: 8px; background: #f6f3f1; overflow-wrap: anywhere; }
.scheme-node__key { margin: 10px 0 0; color: var(--muted); }
.scheme-wire { fill: none; stroke-width: 1.6; opacity: .55; transition: opacity .15s ease; }
.scheme-wire--flow { stroke: var(--ink); }
.scheme-wire--choice { stroke: var(--info); }
.scheme-wire--back { stroke: var(--muted); stroke-dasharray: 6 5; }
.scheme-wire--auto { stroke: var(--violet); stroke-dasharray: 2 4; }
.scheme.is-focused .scheme-wire { opacity: .1; }
.scheme.is-focused .scheme-wire.is-active { opacity: 1; stroke-width: 2.4; }
.scheme-arrow--flow { fill: var(--ink); }
.scheme-arrow--choice { fill: var(--info); }
.scheme-arrow--back { fill: var(--muted); }
.scheme-arrow--auto { fill: var(--violet); }
@media (prefers-reduced-motion: reduce) { .scheme-node, .scheme-wire { transition: none; } }

/* --- теги клиентов: в карточке обращения и в списке --- */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.badge--tag { display: inline-flex; align-items: center; gap: 4px; background: #efe9fb; color: var(--violet); }
.badge--tag form { display: inline; }
.tag-remove { padding: 0 0 0 2px; border: 0; background: none; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; opacity: .55; }
.tag-remove:hover { opacity: 1; }
.tag-add__button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; list-style: none; }
.tag-add__button::-webkit-details-marker { display: none; }
.tag-add[open] .tag-add__button { border-style: solid; border-color: var(--ink); background: var(--ink); color: #fff; }
.tag-add__form { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.chip--tag b { color: var(--violet); }
.row-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* --- файл к ответу оператора --- */
/* Кнопки над полем ответа: прямоугольные, с иконкой и подписью, в ряд слева направо. */
/* Слева от поля ответа — кнопки-иконки в ряд: прямоугольные, без подписей (название — подсказкой). */
.reply__tools { display: flex; gap: 6px; }
.reply__tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.reply__tool:hover, .reply__tpl[aria-expanded="true"] { border-color: #cfc7c3; background: #f6f3f2; }
.reply__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply__clip:focus-within { outline: 3px solid rgba(226, 27, 31, .35); outline-offset: 2px; }
.reply__clip input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Имя выбранного файла появляется рядом со скрепкой; пока файла нет, кнопка — одна иконка. */
.reply__clip-text { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.reply__clip-text:empty { display: none; }

/* --- ответ оператора: загрузка файла и сообщение в пути --- */
.reply__clip-bar { width: 44px; height: 4px; border: 0; border-radius: 999px; background: #eeebe9; }
.reply__clip-bar::-webkit-progress-bar { background: #eeebe9; border-radius: 999px; }
.reply__clip-bar::-webkit-progress-value { background: var(--ink); border-radius: 999px; }
.reply__clip-bar::-moz-progress-bar { background: var(--ink); border-radius: 999px; }
.reply__error { margin: 12px 18px 0; }
.event--pending .bubble { opacity: .65; }
.event--pending .event__meta { color: var(--muted); font-size: 12px; }

/* --- мониторинг: плашка о сбоях, точка в меню и раздел --- */
.alert-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 24px; border-bottom: 1px solid #f0c2c2; background: #fdecec; color: #8a1d1d; font-size: 14px; }
.alert-strip a { color: inherit; font-weight: 700; }
.nav-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 999px; vertical-align: middle; }
.nav-dot--warn { background: #e39a2d; }
.nav-dot--crit { background: var(--red); }
.monitor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.monitor h2 { margin: 0 0 10px; }
.monitor-status { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.monitor-status--warn { border-color: #efd29f; }
.monitor-status--crit { border-color: #f0c2c2; }
.monitor-status__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.monitor-status__head h2, .monitor-status__head p { margin: 0; }
.monitor-findings { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.monitor-finding { padding: 10px 12px; border-left: 4px solid var(--line); border-radius: 10px; background: #f7f5f4; }
.monitor-finding--warn { border-left-color: #e39a2d; background: var(--warn-soft); }
.monitor-finding--crit { border-left-color: var(--red); background: var(--red-soft); }
.monitor-calm { margin: 8px 0 0; color: var(--ok); }
.monitor-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.monitor-tile { padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid #2e9e6a; border-radius: 12px; background: var(--card); }
.monitor-tile--warn { border-left-color: #e39a2d; }
.monitor-tile--crit { border-left-color: var(--red); }
.monitor-tile__title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.monitor-tile__value { margin: 4px 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-tile__sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.monitor-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.monitor-chart { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.monitor-chart figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
/* Точка на конце линии выходит за край рисунка — не обрезаем её. */
.monitor-chart svg { display: block; width: 100%; height: 48px; margin: 8px 0 4px; overflow: visible; }
.monitor-chart polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.monitor-chart .monitor-chart__area { fill: rgba(29, 26, 26, .07); stroke: none; }
.monitor-chart .monitor-chart__limit { stroke: #e39a2d; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.monitor-chart .monitor-chart__end { stroke-width: 6; stroke-linecap: round; }
.monitor-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.monitor-section-head h2 { margin: 0; }
.monitor-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #2e9e6a; vertical-align: middle; }
.monitor-dot--warn { background: #e39a2d; }
.monitor-dot--crit { background: var(--red); }
.monitor-dot--off { background: #c9c1bd; }
.monitor-disk { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.monitor-disk li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.monitor-disk meter { grid-column: 1 / -1; width: 100%; height: 8px; }
.monitor-disk__size { color: var(--muted); font-variant-numeric: tabular-nums; }
.monitor-errors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.monitor-errors article { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.monitor-errors h3 { margin: 0 0 8px; font-size: 15px; }
.monitor-log { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.monitor-log li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.monitor-log time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.monitor-log pre { max-height: 240px; margin: 6px 0 0; padding: 8px; overflow: auto; border-radius: 8px; background: #f6f3f1; font-size: 12px; white-space: pre-wrap; }
.monitor-guide summary { cursor: pointer; font-weight: 600; }
@media (max-width: 1100px) { .monitor-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .monitor-tiles, .monitor-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .monitor-tiles, .monitor-charts { grid-template-columns: minmax(0, 1fr); } }

/* AI-ассистент (Чат-центр → AI-ассистент) */
.ai-tabs { margin-bottom: 14px; }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.ai-main, .ai-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ai-title { margin: 0 0 8px; font-size: 17px; }
.ai-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-role { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ai-roles .ai-role { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.ai-role--support { border-top: 3px solid var(--info) !important; }
.ai-role--sales { border-top: 3px solid var(--ok) !important; }
.ai-role p { margin: 0; }
.ai-role .btn { justify-self: start; }
.ai-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.ai-doc p { margin: 0 0 10px; }
.ai-doc h2 { margin-top: 22px; }
.ai-doc h2:first-child { margin-top: 0; }
.ai-steps { display: grid; gap: 10px; margin: 0 0 12px; padding-left: 20px; }
.ai-steps .hint { display: block; margin-top: 2px; }
.ai-facts { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.ai-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ai-facts li > span, .ai-facts li > a { color: var(--muted); }
.ai-facts b { text-align: right; font-variant-numeric: tabular-nums; }
.ai-facts--key { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-reset { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-switch-row { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.ai-prompt summary { cursor: pointer; font-weight: 600; }
.ai-prompt + .ai-prompt { margin-top: 8px; }
.ai-prompt pre { max-height: 480px; margin: 8px 0 0; padding: 10px; overflow: auto; border-radius: 8px; background: #f6f3f1; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-kb__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.ai-kb__head h2 { margin-bottom: 4px; }
.ai-kb__head p, .ai-kb__head .chips { margin: 0; }
.ai-kb { margin: 0; padding: 0; list-style: none; }
.ai-kb__item { display: grid; gap: 4px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ai-kb__item:last-child { border-bottom: 0; }
.ai-kb__item.is-off { background: #faf9f8; }
.ai-kb__item.is-off .ai-kb__link b { color: var(--muted); }
.ai-kb__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-decoration: none; }
.ai-kb__link:hover b { text-decoration: underline; }
.ai-kb__body { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.ai-chat { display: grid; gap: 10px; max-height: 60vh; margin-bottom: 14px; padding: 12px; overflow-y: auto; border-radius: 12px; background: var(--paper); }
.ai-chat__empty { margin: 0; }
.ai-msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(29, 26, 26, .06); }
.ai-msg small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.ai-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-msg--user { justify-self: end; background: var(--info-soft); }
.ai-chat__form.is-busy [data-ai-send] { opacity: .6; pointer-events: none; }
.bc-stats.ai-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ai-log__text { min-width: 280px; max-width: 520px; }
.ai-log__text summary { cursor: pointer; }
.ai-log__text p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .ai-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ai-roles, .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .bc-stats.ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-msg { max-width: 100%; }
}
.ai-msg__buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-msg__buttons--list { margin: 4px 0 14px; }
.ai-button { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid #c9d6ee; border-radius: 8px; background: #f3f7fe; color: var(--info); font-size: 13px; font-weight: 600; }
.ai-flag { display: block; margin-top: 4px; color: var(--warn); font-weight: 600; }
.ai-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-blocked details { margin-top: 6px; }
.ai-blocked pre { margin: 6px 0 0; padding: 8px; overflow: auto; border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-security { border-left: 4px solid var(--ok); }
.ai-security q { font-style: italic; }
.ai-pause { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ai-pause legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.ai-pause .ai-switch-row { margin-bottom: 10px; }
.event--handoff { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.ai-handoff { display: block; margin-top: 6px; color: var(--warn); font-size: 12px; font-weight: 600; }
/* Действия ассистента: отметка в ленте, строка в черновике, журнале и тестовом чате. */
.event--ai-action { background: var(--info-soft); color: var(--info); }
.ai-action { display: block; margin-top: 6px; color: var(--info); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.ai-action--off { color: #a3161a; }
.ai-conditions { margin-top: 2px; color: var(--muted); font-size: 13px; }
.ai-callout { border-left: 4px solid var(--warn); }
.ai-triggers { margin-bottom: 16px; }
.ai-triggers .rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; }
.ai-triggers .rule__body .badge { justify-self: start; }
.ai-limit { max-width: 560px; }
.ai-handoffs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ai-handoffs li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.ai-handoffs .ai-handoff { margin-top: 0; }
.ai-doc > .hint { margin: 10px 0 12px; }
.ai-doc > .ai-list { margin-bottom: 12px; }
.ai-mode { margin: 6px 0 0; font-size: 13px; }
.ai-mode--auto b { color: var(--ok); }
.ai-mode--draft b { color: var(--info); }
.ai-mode--night b { color: var(--violet); }
.ai-callout--night { border-left-color: var(--violet); }
.ai-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-mode-card { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ai-mode-card input { justify-self: start; margin: 0; }
.ai-mode-card small { color: var(--muted); line-height: 1.45; }
.ai-mode-card.is-on, .ai-mode-card:has(input:checked) { border-color: var(--info); background: var(--info-soft); }
.ai-mode-card--auto.is-on, .ai-mode-card--auto:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.ai-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.ai-card h2 b { font-weight: 600; text-transform: none; letter-spacing: 0; }
.ai-card form { margin: 0; }
.ai-draft { display: grid; gap: 6px; padding: 10px; border: 1px solid #c9d6ee; border-radius: 10px; background: #f7faff; }
.ai-draft p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-draft .ai-actions { gap: 6px; margin-top: 4px; }
@media (max-width: 720px) { .ai-modes { grid-template-columns: minmax(0, 1fr); } }
.bubble__author--ai { color: var(--info); }
/* Релей зарубежных сервисов («Интеграции»). */
.relay-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.relay-list__item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.relay-list__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.relay-list__head .btn--link { margin-left: auto; }
.relay-list__problem { color: var(--red); overflow-wrap: anywhere; }
.relay-services { border: 0; margin: 14px 0 4px; padding: 0; min-width: 0; }
.relay-services legend { font-weight: 600; margin-bottom: 8px; }
/* Заголовок блока ассистента и кнопка «Остановить» в одну строку. */
.ai-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-card__head h2 { margin: 0; }
.ai-card__head form { margin: 0; flex: none; }
.ai-badge { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.ai-badge--on { background: var(--ok-soft); color: var(--ok); }
.ai-badge--off { background: var(--warn-soft); color: var(--warn); }
.ai-night-check { margin: 0 0 12px; }
/* «Мониторинг» → «Релеи»: куда сейчас идёт Telegram. */
.relay-route { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
/* Очередь исходящих: сообщение ждёт связи с мессенджером — янтарным; ушедшее позже — мелкая пометка о времени отправки. */
.bubble--queued { outline: 2px dashed rgba(154, 100, 0, .45); }
/* Сообщение ушло без файла, которого не нашлось ни на сервере, ни в архиве. */
.bubble--dropped { outline: 2px dashed rgba(163, 22, 26, .45); }
.event__wait { flex: none; color: var(--warn); }
.event__queued { max-width: 100%; margin-top: 3px; padding: 0 4px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--warn); text-align: right; overflow-wrap: anywhere; }
.event__late { margin-top: 1px; padding: 0 4px; font-size: 11px; color: var(--muted); text-align: right; }
/* «Чат-центр → Работа чат-центра»: сейчас у операторов, время ответа, дни периода; ожидание ответа в карточке. */
.cc-rules { max-width: 760px; margin: 6px 0 0; padding-left: 18px; }
.cc-rules li + li { margin-top: 2px; }
.cc-now { margin-bottom: 18px; }
.cc-now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.cc-now__head h2 { margin: 0; }
.cc-now__table td:first-child { min-width: 11em; }
.cc-now__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-now__time small { display: block; font-size: 12px; }
.cc-now__row--warn td { background: #fffaf0; }
.cc-now__row--alarm td { background: #fff5f5; }
.cc-now > .cc-now__legend { margin: 10px 0 0; }
.cc-wait { font-weight: 700; }
.cc-wait--warn { color: var(--warn); }
.cc-wait--alarm { color: #a3161a; }
.cc-card__reply { font-size: 13px; color: var(--muted); }
.cc-card__reply b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-stats .bc-stat b { overflow-wrap: anywhere; }
.cc-progress--big + .cc-stats--replies { margin-top: -4px; }
.cc-days__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-days__empty td { color: var(--muted); }
@media (max-width: 720px) {
  .bc-stats.cc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-stats .bc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cc-stats .bc-stat b { font-size: 20px; }
}
.wait-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; line-height: 1.35; }
.wait-note form { margin: 0; }
/* Бонусы клиента в карточке: начислить или списать. */
.bonus-edit { display: inline; margin-left: 8px; }
.bonus-edit > summary { display: inline; color: var(--muted); font-size: 12px; text-decoration: underline dotted; cursor: pointer; }
.bonus-edit > summary::marker, .bonus-edit > summary::-webkit-details-marker { content: ""; display: none; }
.bonus-form { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bonus-form__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
/* Ручная ссылка на оплату в блоке «Статус и оплата»: кнопка и окно с типом, способом оплаты и суммой. */
.pay-link { margin: 12px 0 0; }
.modal { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 18px 44px rgba(20, 18, 18, .22); }
.modal::backdrop { background: rgba(20, 18, 18, .48); }
.modal__body { display: grid; gap: 10px; margin: 0; padding: 18px; }
.modal__title { margin: 0; font-size: 16px; }
.modal__field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.modal__field select, .modal__field input { font-weight: 400; }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 4px 0 0; }
/* Значок «?» в шапке — окно «Помощь» (_help.html); красная точка — есть новые инструкции или новости. */
.topbar__help {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: transparent; color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; opacity: .8;
}
.topbar__help:hover, .topbar__help:focus-visible { opacity: 1; background: rgba(255,255,255,.1); }
.topbar__help-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #1d1a1a; }
/* Окно «Помощь»: шире обычного, прокручивается внутри (так у <dialog> по умолчанию), ролик 16:9 во всю ширину. */
.modal--help { width: min(900px, calc(100vw - 32px)); }
.help { gap: 16px; }
.help__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.help__close:hover { background: #f3f0ee; color: var(--ink); }
.help__block { display: grid; gap: 8px; }
.help__subtitle { margin: 0; font-size: 14px; }
.help__lead { margin: 0; color: var(--muted); font-size: 13px; }
.help__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
.help__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.help__list { display: grid; gap: 6px; }
.help__empty { margin: 0; color: var(--muted); font-size: 13px; }
.help__foot { padding-top: 12px; border-top: 1px solid var(--line); }
.help-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #faf8f7; }
.help-form[hidden] { display: none; }
.help-form textarea { resize: vertical; }
.help-form__error { margin: 0; color: #a3161a; font-size: 13px; }
.help-item { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.help-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary::before { content: "▸"; color: var(--muted); }
.help-item[open] > summary::before { content: "▾"; }
.help-item__title { font-weight: 600; }
.help-item__date { margin-left: auto; color: var(--muted); font-size: 12px; }
.help-item__body { padding: 0 12px 4px 30px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.help-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 4px 12px 10px 30px; color: var(--muted); font-size: 12px; }
/* База знаний в окне «Помощь» (_help_kb.html): разделы свёрнуты, схема бота (_help_funnel.html) раскрыта. */
.help-kb { display: grid; gap: 6px; }
.help-kb__item { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.help-kb__item > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.help-kb__item > summary::-webkit-details-marker { display: none; }
.help-kb__item > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-weight: 400; }
.help-kb__item[open] > summary::after { content: "▾"; }
.help-kb__item > summary:hover { background: #faf8f7; border-radius: 10px; }
.help-kb__list { display: grid; gap: 6px; margin: 0; padding: 0 14px 12px 32px; font-size: 14px; line-height: 1.45; }
.help-kb__note { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: 13px; }
.help-kb code { padding: 0 4px; border-radius: 4px; background: #f3f0ee; font-size: 13px; }
.funnel { display: grid; gap: 18px; padding: 0 12px 12px; }
.funnel__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.funnel__phase { --phase: var(--info); --phase-bg: var(--info-soft); position: relative; padding: 10px 12px 12px; border-left: 4px solid var(--phase); border-radius: 10px; background: var(--phase-bg); }
.funnel__phase + .funnel__phase::before { content: "↓"; position: absolute; top: -18px; left: 22px; height: 18px; color: var(--muted); font-size: 14px; line-height: 18px; }
.funnel__phase--pay { --phase: var(--warn); --phase-bg: var(--warn-soft); }
.funnel__phase--make { --phase: var(--violet); --phase-bg: var(--violet-soft); }
.funnel__phase--after { --phase: var(--ok); --phase-bg: var(--ok-soft); }
.funnel__phase-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--phase); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.funnel__phase-step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--phase); color: #fff; font-size: 11px; letter-spacing: 0; }
.funnel__stages { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.funnel__stage { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.funnel__stage + .funnel__stage::before { content: ""; position: absolute; top: -8px; left: 16px; height: 8px; border-left: 2px dotted var(--phase); }
.funnel__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--phase); border-radius: 50%; background: var(--card); font-size: 16px; line-height: 1; }
.funnel__body { min-width: 0; padding: 7px 10px; border-radius: 8px; background: var(--card); }
.funnel__title { margin: 0; font-size: 14px; font-weight: 600; }
.funnel__optional { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 12px; font-weight: 400; vertical-align: 1px; }
.funnel__text { margin: 2px 0 0; color: #4a4443; font-size: 13px; }
.funnel__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.fchip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; }
.fchip--bot { background: var(--info-soft); color: var(--info); }
.fchip--wait { background: var(--warn-soft); color: var(--warn); }
.fchip--remind { background: var(--violet-soft); color: var(--violet); }
.fchip--person { background: var(--ok-soft); color: var(--ok); }
.funnel__phase .fchip { box-shadow: inset 0 0 0 1px rgba(29, 26, 26, .06); }
.funnel__branch { margin: 4px 0 0; padding: 4px 8px; border-left: 3px solid var(--phase); border-radius: 0 6px 6px 0; background: var(--phase-bg); font-size: 12.5px; }
.funnel__branch--alert { border-left-color: var(--red); background: var(--red-soft); }
.funnel__always { margin: 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; }
.funnel__source { margin: -8px 0 0; color: var(--muted); font-size: 12px; }

/* --- Тех.поддержка (app/support.py) --- */
/* Число на пункте шапки: администратору — новые заявки, автору — просьбы уточнить. */
.nav-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.tab-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #eeebe9; color: var(--ink); font-size: 12px; line-height: 18px; text-align: center; }
/* Шапка чата: «Сообщить о проблеме» и справа жёлтый кружок — сколько нерешённых заявок у клиента. */
.dialog__support { display: flex; align-items: center; gap: 6px; }
.support-count-box:empty { display: none; }
.support-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #f6c343; color: #4a3300; font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; }
.support-count:hover { background: #efb320; }
.support-report { white-space: nowrap; }
.support-files input[type="file"] { font-weight: 400; }
.support-modal { width: min(520px, calc(100vw - 32px)); }
.support-modal textarea { width: 100%; font: inherit; font-weight: 400; resize: vertical; }
/* Раздел: карточки контроля, виды проблем, список-очередь. */
.sp-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-stats a.bc-stat { text-decoration: none; }
.sp-stats a.bc-stat:hover { border-color: #d6cfcb; }
.bc-stat small { color: var(--muted); font-size: 12px; }
.bc-stat--wait b { color: var(--warn); }
.bc-stat--bad b, .sp-bad { color: #a3161a; }
.sp-kinds, .sp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sp-kind { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-kind b { margin-left: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-kind.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.sp-kind.is-active b { color: #fff; }
.sp-filter input[type="search"] { flex: 1 1 260px; min-width: 0; }
.sp-filter__date { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.sp-table td { vertical-align: top; }
.sp-table td small { display: block; }
.sp-row__link { font-weight: 700; }
.sp-row__text { max-width: 520px; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
.sp-row__text--answer { color: var(--ok); }
.sp-kind-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sp-row--returned td:first-child { box-shadow: inset 3px 0 var(--info); }
.sp-row--late .sp-wait { color: var(--warn); font-weight: 700; }
.sp-row--overdue { background: var(--red-soft); }
.sp-row--overdue .sp-wait { color: #a3161a; font-weight: 700; }
.sp-status--new { background: var(--info-soft); color: var(--info); }
.sp-status--clarify { background: var(--warn-soft); color: var(--warn); }
.sp-status--resolved { background: var(--ok-soft); color: var(--ok); }
.sp-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; }
.sp-report { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-report .card { margin: 0; }
/* Заявка: лента слева, сведения справа. */
.sp-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sp-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sp-ticket__kind { margin-bottom: 4px; font-size: 13px; }
.sp-thread { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sp-event { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfb; }
.sp-event--clarify { border-color: #efd9a8; background: var(--warn-soft); }
.sp-event--resolved { border-color: #bfe0cc; background: var(--ok-soft); }
.sp-event--closed { background: #f3f1f0; }
.sp-event__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; }
.sp-event__body { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-reply { display: grid; gap: 8px; }
.sp-reply textarea { width: 100%; font: inherit; resize: vertical; }
.sp-reply__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-cancel summary { color: var(--muted); cursor: pointer; }
.sp-cancel .sp-reply { margin-top: 8px; }
.sp-facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; }
.sp-facts dt { color: var(--muted); }
.sp-facts dd { margin: 0; overflow-wrap: anywhere; }
.sp-facts small { display: block; }
.sp-history { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-history small { display: block; }
/* Шаблоны ответов: кнопка «📋» рядом со скрепкой, окошко над полем ответа. */
.reply-box { position: relative; }
/* Скрытое внутри окошка (форма, отфильтрованные поиском шаблоны) скрыто, какой бы display ни был у блока. */
.tpl-panel[hidden], .tpl-panel [hidden] { display: none !important; }

.tpl-panel { position: absolute; left: 18px; bottom: calc(100% - 6px); z-index: 20; width: min(560px, calc(100% - 36px)); max-height: min(460px, 60vh); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 18px 44px rgba(20, 18, 18, .18); }
.tpl__head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.tpl__title { font-size: 13px; }
.tpl__search { flex: 1 1 180px; min-width: 0; }
.tpl__form { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fcfbfb; }
.tpl__form textarea { width: 100%; font: inherit; resize: vertical; }
.tpl__form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tpl__list { padding: 4px 6px 8px; }
.tpl__group-title { margin: 10px 8px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tpl__item { display: flex; align-items: flex-start; gap: 4px; border-radius: 8px; }
.tpl__item:hover { background: #f6f3f2; }
.tpl__use { display: grid; flex: 1; gap: 2px; min-width: 0; padding: 6px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tpl__use b { font-size: 13px; }
.tpl__use span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* Подсказка менеджеру: видна в списке, в ответ клиенту не вставляется. */
.tpl__note { color: var(--info); font-size: 11px; overflow-wrap: anywhere; }
.tpl__tools { display: flex; gap: 2px; padding-top: 4px; opacity: .35; }
.tpl__item:hover .tpl__tools, .tpl__tools:focus-within { opacity: 1; }
.tpl__tool { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.tpl__tool:hover { background: #ece7e5; }
.tpl__empty { padding: 12px 8px; }
@media (max-width: 720px) { .reply { grid-template-columns: auto minmax(0, 1fr); } .reply .btn--primary { grid-column: 1 / -1; } }
/* Файлы заявки: фото миниатюрами (открываются целиком), видео и аудио — плеером, остальное ссылкой. */
.sp-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.sp-file { display: grid; gap: 4px; max-width: 280px; font-size: 13px; }
.sp-file img { display: block; max-width: 220px; max-height: 160px; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; }
.sp-file video { width: 280px; max-height: 200px; border-radius: 8px; background: #000; }
.sp-file audio { width: 260px; }
.sp-file__name { overflow-wrap: anywhere; }
.sp-clip { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sp-lead { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
/* Уведомления в Telegram. */
.sp-settings { max-width: 760px; }
.sp-settings .hint { margin-bottom: 12px; }
.sp-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sp-settings__form { display: grid; gap: 10px; }
.sp-settings__form .field { margin-bottom: 0; }
.sp-settings__row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; }
.sp-settings__events { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.sp-settings__events legend { padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sp-settings__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-settings__tools form { margin: 0; }
.sp-chats { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sp-chats li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 1180px) {
  .sp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-ticket, .sp-report { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-settings__row { grid-template-columns: 1fr; }
  .dialog__head { flex-wrap: wrap; }
}

/* --- ♡ закрепить (сердечко, как в Telegram) и ⭐ избранное в строках списков (app/chat_marks.py) --- */
.marks { display: inline-flex; flex: none; align-items: center; gap: 1px; vertical-align: middle; }
.mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.mark svg { width: 15px; height: 15px; }
/* Сердечко: не закреплён — только серый контур, закреплён — залито серым. */
.mark--pin svg { fill: none; stroke: #9d9491; stroke-width: 1.9; stroke-linejoin: round; }
.mark--star svg { fill: none; stroke: #b9b0ad; stroke-width: 1.8; stroke-linejoin: round; }
.side-row:hover .mark, tr:hover .mark, .mark:focus-visible { opacity: .75; }
.mark:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.mark.is-on { opacity: 1; }
.mark--pin.is-on svg { fill: #8a817e; stroke: #8a817e; }
.mark--star.is-on svg { fill: #f5b301; stroke: #f5b301; }
@media (hover: none) { .mark { opacity: .6; } }
.side-row.is-pinned, tr.is-pinned > td { background: #fff7f4; }
.side-row.is-pinned.is-active { background: var(--red-soft); }
.chip--favorites svg { width: 14px; height: 14px; fill: none; stroke: #f5b301; stroke-width: 2; stroke-linejoin: round; vertical-align: -2px; }
.chip--favorites.is-active svg { fill: #f5b301; }
/* «Запросить голос клиента» под строкой голоса в «Материалах клиента». */
.material__action { margin: 6px 0 0; }
.material__action .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Свёрнутый раздел внутри блока настроек («Отказ по пожеланиям» в генераторе песен). */
.section-fold { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.section-fold > summary { cursor: pointer; font-weight: 700; }
.section-fold > summary small { font-weight: 400; }
.section-fold[open] > summary { margin-bottom: 10px; }
.section-fold .field, .section-fold .check { margin-top: 10px; }