/* Макет: рабочее место в одном окне — слева разделы, справа очередь решений и карточки заявок.
   Компоненты — те же, что в прототипе (dashboard/prototype-v2.html); цвета и шрифт — фирменные BOUZ (BRAND, 20.10):
   фиолетовый #8100F1 — кнопки, активный раздел, ссылки, фокус; зелёный #74D855 — «готово»; заголовки #222228, вторичный
   текст #555558, фон-плашка #F4F4F4; шрифт сайта «Wix Madefor Text», если он есть на компьютере, иначе системный.
   --accent — заливки (кнопки, полосы, рамка фокуса), --accent-text — фиолетовый текст и ссылки (в тёмной теме светлее).
   Контраст основных пар — не ниже 4.5:1 (WCAG AA), его считает tests/test_brand.py по этим строкам. */
:root {
  color-scheme: light;
  --page: #f4f4f4; --card: #ffffff; --fill: rgba(118,118,128,.12); --fill-2: rgba(118,118,128,.07);
  --hover: rgba(0,0,0,.035); --sidebar: rgba(242,242,247,.86);
  --ink: #222228; --ink-2: #555558; --ink-3: #6b6b70; --line: rgba(60,60,67,.12);
  --accent: #8100f1; --accent-soft: rgba(129,0,241,.10); --accent-text: #8100f1;
  --good: #74d855; --warn: #e3a008; --crit: #d03b3b; --violet: #2f6bff;
  --good-bg: rgba(116,216,85,.18); --warn-bg: rgba(250,178,25,.18); --crit-bg: rgba(208,59,59,.10);
  --accent-bg: rgba(129,0,241,.10); --muted-bg: rgba(118,118,128,.12); --violet-bg: rgba(47,107,255,.12);
  --good-ink: #2a6e12; --crit-ink: #b42323; --warn-ink: #7a5300; --violet-ink: #1f4fc4; --accent-ink: #6a00c8;
  --shadow: 0 1px 1px rgba(0,0,0,.03), 0 6px 22px rgba(0,0,0,.05);
  --seg-on: #ffffff; --seg-shadow: 0 1px 3px rgba(0,0,0,.12);
  --toast: rgba(34,34,40,.95); --toast-ink: #fff;
  --crit-fill: #c62828; --ours-bg: rgba(116,216,85,.16);   /* красный счётчик и кнопка «удалить» (белый текст); наши сообщения WeChat */
  --brand-line: linear-gradient(90deg, #8100f1 0%, #d23bd8 50%, #2f6bff 100%);
  --logo-plate: transparent; --logo-pad: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #000000; --card: #1c1c1e; --fill: rgba(118,118,128,.24); --fill-2: rgba(118,118,128,.14);
    --hover: rgba(255,255,255,.05); --sidebar: rgba(28,28,30,.8);
    --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #8e8e93; --line: rgba(255,255,255,.10);
    --accent: #9333ff; --accent-soft: rgba(147,51,255,.22); --accent-text: #b98cff;
    --good: #74d855; --warn: #ffd60a; --crit: #ff6b6b; --violet: #5b8cff;
    --good-bg: rgba(116,216,85,.20); --warn-bg: rgba(250,178,25,.22); --crit-bg: rgba(208,59,59,.24);
    --accent-bg: rgba(147,51,255,.22); --muted-bg: rgba(118,118,128,.18); --violet-bg: rgba(91,140,255,.22);
    --good-ink: #8fe371; --crit-ink: #ff8a8a; --warn-ink: #ffd479; --violet-ink: #a9c2ff; --accent-ink: #c9a6ff;
    --shadow: 0 0 0 1px rgba(255,255,255,.06);
    --seg-on: #636366; --seg-shadow: none;
    --toast: rgba(58,58,60,.97);
    --crit-fill: #c62828; --ours-bg: rgba(116,216,85,.09);
    --logo-plate: #f4f4f4; --logo-pad: 4px 8px;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #000000; --card: #1c1c1e; --fill: rgba(118,118,128,.24); --fill-2: rgba(118,118,128,.14);
  --hover: rgba(255,255,255,.05); --sidebar: rgba(28,28,30,.8);
  --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #8e8e93; --line: rgba(255,255,255,.10);
  --accent: #9333ff; --accent-soft: rgba(147,51,255,.22); --accent-text: #b98cff;
  --good: #74d855; --warn: #ffd60a; --crit: #ff6b6b; --violet: #5b8cff;
  --good-bg: rgba(116,216,85,.20); --warn-bg: rgba(250,178,25,.22); --crit-bg: rgba(208,59,59,.24);
  --accent-bg: rgba(147,51,255,.22); --muted-bg: rgba(118,118,128,.18); --violet-bg: rgba(91,140,255,.22);
  --good-ink: #8fe371; --crit-ink: #ff8a8a; --warn-ink: #ffd479; --violet-ink: #a9c2ff; --accent-ink: #c9a6ff;
  --shadow: 0 0 0 1px rgba(255,255,255,.06);
  --seg-on: #636366; --seg-shadow: none;
  --toast: rgba(58,58,60,.97);
  --crit-fill: #c62828; --ours-bg: rgba(116,216,85,.09);
  --logo-plate: #f4f4f4; --logo-pad: 4px 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font: 15px/1.45 "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Фирменная полоска (неон баннеров bouz.ru): 3 px вдоль верхнего края окна, ничего не перекрывает */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-line); z-index: 60; pointer-events: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ico { width: 16px; height: 16px; flex: none; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dim { color: var(--ink-2); } .dim2 { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Каркас ── */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 12px 16px; display: flex; flex-direction: column; gap: 2px;
  background: var(--sidebar); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--line); z-index: 20;
}
/* Логотип BOUZ (официальный файл bouz.ru): слово «bouz» в нём тёмное — в тёмной теме под ним светлая плашка */
.brand { display: grid; justify-items: start; gap: 9px; padding: 0 10px 18px; }
.brand-logo { display: block; flex: none; box-sizing: content-box; background: var(--logo-plate); padding: var(--logo-pad); border-radius: 8px; }
.brand b { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand span { display: block; font-size: 13px; color: var(--ink-2); }
.m-mark { display: none; flex: none; }
.title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; font-weight: 500; font-size: 14px; color: var(--ink); position: relative; }
.nav button:hover { background: var(--hover); }
.nav button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.nav .lbl { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; }  /* подпись раздела, не ярлык Gmail (.lbl ниже) — как в прототипе */
.nav .count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nav .count.alert { color: #fff; background: var(--crit-fill); border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.side-foot { margin-top: auto; display: grid; gap: 10px; padding: 12px 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
/* тема — внизу боковой панели (в шапке она переносилась на вторую строку и сдвигала экран); на телефоне — в листе «Ещё» */
.side-theme { display: grid; gap: 4px; padding: 10px 10px 0; font-size: 13px; color: var(--ink-2); }
.side-theme .seg { display: flex; width: 100%; }
.side-theme .seg button { flex: 1 1 0; padding: 4px 4px; min-width: 0; color: var(--ink); }
.agent-state { display: flex; align-items: flex-start; gap: 8px; }
.agent-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); margin-top: 5px; flex: none; }
.agent-state i.off { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.agent-state i.busy { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.agent-state b { color: var(--ink); font-weight: 600; display: block; }
.side-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.main { min-width: 0; width: 100%; max-width: 1400px; padding-block: 26px 80px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.title h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
.title p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.controls [hidden] { display: none !important; }
.seg { display: inline-flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--seg-on); box-shadow: var(--seg-shadow); font-weight: 600; }
.search { height: 32px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 12px 0 32px; font-size: 13.5px; width: 240px; max-width: 100%;
  background-image: radial-gradient(circle at 13px 14px, transparent 5px, var(--ink-3) 5.5px, var(--ink-3) 6.6px, transparent 7px); background-repeat: no-repeat; }
.search::placeholder { color: var(--ink-3); }

/* ── Карточки, плитки, кнопки ── */
.view { display: none; animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.view.on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.kpi { background: var(--card); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.kpi .d { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.kpi .d button { padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.card h3 { margin: 0; font-size: 16.5px; font-weight: 650; }
/* шкала шрифта (22.10, владелец: «много мелкого нечитаемого текста»): ничего содержательного мельче 13 px */
.sub { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.stack { display: grid; gap: 16px; align-content: start; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.55; }
.tone-good { background: var(--good-bg); color: var(--good-ink); } .tone-warn { background: var(--warn-bg); color: var(--warn-ink); }
.tone-crit { background: var(--crit-bg); color: var(--crit-ink); } .tone-accent { background: var(--accent-bg); color: var(--accent-ink); }
.tone-muted { background: var(--muted-bg); color: var(--ink-2); } .tone-violet { background: var(--violet-bg); color: var(--violet-ink); }
.btn { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--fill); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); }
.btn:hover { filter: brightness(.97); }
.btn.primary { background: var(--accent); color: #fff; }
a.btn { text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent-text); }
.btn.danger { color: var(--crit-ink); }
.btn.danger-fill { background: var(--crit-fill); color: #fff; }
.btn.sm { height: 32px; padding: 0 11px; font-size: 14px; border-radius: 9px; }
/* неактивная кнопка — читается (без прозрачности): светлая подложка, серый текст; причина — словами рядом */
.btn:disabled, .btn.primary:disabled, .btn.ghost:disabled, .btn.danger-fill:disabled, .chip:disabled, .more-item:disabled {
  opacity: 1; background: var(--fill-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; filter: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--fill); font-size: 13.5px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.chip .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }
.empty { color: var(--ink-3); font-size: 14px; padding: 10px 0; margin: 0; }
.hint { font-size: 14px; color: var(--ink-3); }
.ta { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--fill-2); resize: vertical; font-size: 14px; line-height: 1.5; }
.ta.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.in { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--fill-2); width: 100%; min-width: 0; }
.in.pct { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.in.sm { height: 28px; font-size: 13px; }
select.in { appearance: auto; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--fill); border: 0; padding: 0; flex: none; transition: background .2s; }
.switch[aria-checked="true"] { background: var(--good); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.confirm { background: var(--warn-bg); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink); }
.demo-pill { background: var(--warn-bg); color: var(--warn-ink); }

/* Таблицы */
.table-wrap { overflow-x: auto; margin: 0 -6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.mono { white-space: nowrap; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--hover); }
tr.grp td { border-top: 1px solid var(--line); }
.src { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; }
.age { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); margin-left: 6px; font-weight: 600; }
.cell-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Очередь решений */
.q-group { margin-bottom: 24px; }
.q-group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px 2px; flex-wrap: wrap; }
.q-group-head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.q-group-head .hint { flex: 1; }
.q-card { position: relative; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px 14px 22px; margin-bottom: 10px; overflow: hidden; --stripe: var(--accent); }
.q-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--stripe); }
.q-card[data-group="decide"] { --stripe: var(--warn); } .q-card[data-group="wechat"] { --stripe: var(--good); }
.q-card[data-group="quote"] { --stripe: var(--violet); } .q-card[data-group="lesson"] { --stripe: var(--ink-3); }
.q-card.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); } to { box-shadow: var(--shadow); } }
.q-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.q-kind { font-weight: 700; color: var(--ink); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.q-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); font-weight: 600; font-size: 13px; }
.q-title { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; color: var(--ink); line-height: 1.35; }
.q-body { font-size: 14px; line-height: 1.5; }
.q-body ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.q-body blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink-2); font-style: italic; }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.q-actions .spacer { flex: 1; }
.q-card.sent, .q-card.done { padding: 10px 14px 10px 20px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.q-card.sent { --stripe: var(--ink-3); } .q-card.done { --stripe: var(--good); }
.q-card.sent .q-code, .q-card.done .q-code { margin-right: 2px; }
pre.draft { margin: 10px 0 0; padding: 12px 14px; background: var(--fill-2); border-radius: 10px; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; max-height: 240px; overflow: auto; color: var(--ink); }
.opt { display: grid; gap: 1px; text-align: left; height: auto; padding: 8px 14px; align-items: start; }
.opt small { font-weight: 400; color: var(--ink-2); font-size: 13px; }
.btn.primary.opt small { color: rgba(255,255,255,.8); }
.fixbox { margin-top: 10px; display: grid; gap: 8px; }
.mini { font-size: 13px; }
.klist { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.klist li { display: flex; gap: 8px; flex-wrap: wrap; }
.klist .mono { color: var(--ink); }

/* Канбан */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--fill-2); border-radius: 14px; padding: 10px; min-height: 200px; }
.kcol h4 { margin: 2px 4px 10px; font-size: 13px; color: var(--ink-2); display: flex; justify-content: space-between; font-weight: 600; }
.kcard { background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; font-size: 13px; border: 0; width: 100%; text-align: left; }
.kcard b { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; margin-bottom: 2px; }
.kcard span { color: var(--ink-2); }

/* Страница заявки */
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--accent-text); background: none; border: 0; padding: 0; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.req-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.req-head h1 { font-size: 28px; margin: 0; letter-spacing: -.02em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.req-head .client { font-size: 17px; color: var(--ink-2); }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; font-size: 13px; color: var(--ink-2); margin: 12px 0 18px; }
.meta b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 58px 12px 1fr; gap: 0 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); align-items: start; }
.tl li:last-child { border-bottom: 0; }
.tl time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 2px; white-space: nowrap; }
.tl .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--ink-3); }
.tl .dot.agent { background: var(--accent); } .tl .dot.vika { background: var(--good); } .tl .dot.supplier { background: var(--violet); } .tl .dot.bitrix { background: var(--warn); } .tl .dot.mail { background: var(--ink-3); }
.tl .who { font-weight: 600; margin-right: 4px; }
.feed { display: grid; gap: 8px; }
.feed-item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; font-size: 13.5px; }
.feed-item time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini-h { font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 4px; }
.mini-h:first-child { margin-top: 0; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mini-row:last-child { border-bottom: 0; }
/* только сама правая колонка: плашка внутри неё («подтверждение в кабинете») — своего цвета, иначе серый текст на зелёном */
.mini-row > span:last-child { color: var(--ink-3); white-space: nowrap; }
.lesson { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lesson:last-child { border-bottom: 0; }
.lesson span { color: var(--ink-3); font-size: 13px; }

#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; background: var(--toast); color: var(--toast-ink); padding: 10px 16px; border-radius: 12px; font-size: 14px; pointer-events: none; transition: .25s; z-index: 50; max-width: calc(100vw - 32px); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1060px) { .detail { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: auto; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--line); }
  .brand, .side-foot, .side-theme { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav button { flex-direction: column; gap: 3px; font-size: 12px; padding: 4px 2px; border-radius: 8px; }
  .nav .count { display: none; } .nav .count.alert { display: block; position: absolute; top: 0; right: 6px; margin: 0; font-size: 11.5px; font-weight: 700; min-width: 18px; padding: 0 5px; line-height: 1.45; }
  .main { padding-block: 16px 96px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .title h1 { font-size: 24px; } .req-head h1 { font-size: 22px; }
  .m-mark { display: block; }  /* боковой панели с логотипом на телефоне нет — знак «b» у заголовка экрана */
  .card, .q-card { padding: 14px 14px 12px 18px; border-radius: 14px; }
  .search { width: 100%; }
}

/* ── Кабинет: дополнения к прототипу (вход, формы администратора, состояния без данных) ── */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-page::before { display: none; }  /* на экране входа фирменная полоска — у карточки */
.login-card { position: relative; overflow: hidden; width: 100%; max-width: 380px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 30px 26px 22px; }
.login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-line); }
.login-brand { display: grid; justify-items: start; gap: 10px; margin-bottom: 18px; }
.login-brand .brand-logo { max-width: 100%; height: auto; }
.login-brand b { display: block; font-size: 15px; letter-spacing: -.01em; }
.login-brand span { display: block; font-size: 13px; color: var(--ink-2); }
.login-h { margin: 0 0 14px; font-size: 24px; letter-spacing: -.02em; }
.field { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.field .in { height: 38px; font-size: 15px; }
.login-btn { width: 100%; justify-content: center; height: 40px; margin-top: 6px; }
.login-error { margin: 0 0 10px; color: var(--crit-ink); font-size: 13.5px; }
.login-hint { margin: 14px 0 0; }
.user-badge { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13.5px; }
.user-badge b { color: var(--ink); }
.empty-card { text-align: center; padding: 34px 20px; }
.empty-card h3 { margin: 0 0 6px; font-size: 16px; }
.empty-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.offline-pill { background: var(--crit-bg); color: var(--crit-ink); }
.admin-form { display: grid; gap: 8px; max-width: 560px; margin-top: 10px; }
.admin-form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-form .row .in { flex: 1; min-width: 140px; }
.secret-box { background: var(--fill-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; word-break: break-all; }
.secret-box .mono { display: block; margin: 4px 0; }
.totp-ask { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.totp-ask .in { width: 120px; }
.bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.bar .seg { margin-bottom: 14px; }
.mb14 { margin-bottom: 14px; } .mb16 { margin-bottom: 16px; } .mb8 { margin-bottom: 8px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .m0 { margin: 0; } .m4 { margin: 4px; }
.flex1 { flex: 1; }
.ta.short { min-height: 56px; } .ta.wx { margin-top: 10px; min-height: 96px; }
.ta.lesson { margin-top: 8px; min-height: 60px; }
.nowrap { white-space: nowrap; }
.warn-ink { color: var(--warn-ink); }
.inline-select { width: auto; display: inline-block; }
.radio-line { display: flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 13.5px; }
.pct-wrap { display: inline-flex; align-items: center; gap: 4px; }
.selected-row { background: var(--accent-soft); }
.sub-14 { font-size: 14px; }
.code-pre { white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--fill-2); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; max-height: 220px; overflow: auto; }
.data-frame { border-left: 3px solid var(--warn); padding: 6px 10px; margin: 6px 0 0; background: var(--warn-bg); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.data-frame small { display: block; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.draft-note { margin-top: 0; }
.bitrix-off { font-size: 13.5px; color: var(--ink-2); }
.wrap-anywhere { overflow-wrap: anywhere; }

/* ── Шапка: «Обновить» и время данных ── */
.refresh-box { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }  /* «Обновить» + «Подтянуть свежую почту»: на телефоне — переносом */
.fresh { font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 20em; text-align: right; }  /* место под «Почта в базе по … · обновлено …» занято сразу — шапка не переносится после загрузки */
.title p { min-height: 1.45em; }  /* подзаголовок появляется после загрузки — место под него занято сразу (без сдвига экрана) */
.btn.loading .ico { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.loading .ico { animation: none; } }

/* ── Графики аналитики (SVG, без style-атрибутов) ── */
.span-all { grid-column: 1 / -1; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) minmax(40px, 1fr) auto; gap: 2px 10px; align-items: center; font-size: 13.5px; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-svg { width: 100%; height: 12px; display: block; background: var(--fill-2); border-radius: 6px; overflow: hidden; }
.hbar-rect { fill: var(--accent); }
.hbar-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hbar-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); margin-top: -4px; }
.cols { display: grid; gap: 6px; }
.cols-top { display: flex; justify-content: flex-end; }
.cols-svg { width: 100%; height: 180px; display: block; }
.col-rect { fill: var(--accent); }
.col-rect:hover { fill: var(--violet); }
.cols-axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .hbar { grid-template-columns: minmax(80px, 40%) minmax(30px, 1fr) auto; }
  .cols-svg { height: 140px; }
}

/* ── WeChat: «Проверьте WeChat» — текст, который мог уйти (только textContent) ── */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px; min-height: 0; }

/* ── Изменения: подтверждение правок ядра ── */
.crit-ink { color: var(--crit-ink); } .good-ink { color: var(--good-ink); font-weight: 600; }
.warn-card { border: 1px solid var(--crit-bg); }
.warn-card ul { margin: 6px 0 0; padding-left: 18px; }
.attn-card { border-left: 4px solid var(--warn); }
.card blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink-2); }
.diff { margin: 10px 0 0; padding: 12px; max-height: 70vh; overflow: auto; background: var(--fill-2); border: 1px solid var(--line); border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.45; white-space: pre; tab-size: 4; }
.check-line { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; }
.check-line input { margin-top: 3px; flex: none; }
.pill.wrap { white-space: normal; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; }
.mini-row.col { flex-direction: column; }
.mini-row.col ul { margin: 4px 0 0; padding-left: 18px; }
.mini-row.col > span:last-child { white-space: normal; }

/* ── Чат с агентом: сообщения только текстом (textContent), Markdown не разбирается ── */
.chat-log { display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding: 4px 2px 10px; margin-bottom: 8px; }
.msg { max-width: 92%; border-radius: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.5; }
.msg-meta { font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { justify-self: end; background: var(--accent-soft); }
.msg.agent { justify-self: start; background: var(--fill-2); border: 1px solid var(--line); }
.msg.tool { justify-self: start; display: flex; gap: 8px; align-items: flex-start; padding: 3px 10px; font-size: 13.5px; color: var(--ink-2); background: none; }
.msg.tool .mono { font-size: 13px; overflow-wrap: anywhere; }
.msg.tool .ico { margin-top: 2px; }
.msg.note { justify-self: start; background: var(--warn-bg); color: var(--warn-ink); }
.msg.err { justify-self: start; background: var(--crit-bg); color: var(--crit-ink); }
.admin-field { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.chat-card .ta { min-height: 72px; }
.chat-card [hidden] { display: none !important; }

/* ── UX-1: «Сегодня» — очередь работы компактными строками ── */
.fresh .stale { color: var(--crit-ink); font-weight: 600; }
.banner { display: flex; gap: 10px; align-items: flex-start; background: var(--crit-bg); color: var(--ink); border-radius: 12px; padding: 10px 14px; margin: -8px 0 16px; font-size: 13.5px; }
.banner b { color: var(--crit-ink); }
.banner[hidden] { display: none; }
.today-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 12px; }
.today-head .big { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.today-head .big.hot { color: var(--crit-ink); }
.kpi.click { cursor: pointer; border: 0; text-align: left; font: inherit; color: inherit; width: 100%; }
.kpi.click:hover { filter: brightness(.98); }
.kpi.hot .v { color: var(--crit-ink); }
.kpi.zero .v { color: var(--ink-3); }
.sec { margin-bottom: 22px; scroll-margin-top: 12px; }
.sec-head { display: flex; align-items: baseline; gap: 6px 10px; margin: 0 0 8px 2px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.sec-head h2 .n { color: var(--ink); margin-left: 4px; }
.sec-head h2 .n.crit-ink { color: var(--crit-ink); margin-left: 0; }
.sec-head .hint { flex: 1; min-width: 200px; }
.sec.flash .sec-head h2 { animation: flash-text 1.6s ease-out; }
@keyframes flash-text { from { background: var(--accent-soft); } to { background: transparent; } }
.rows { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: visible; }
.ri { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); --stripe: var(--accent); }
.ri:last-child { border-bottom: 0; }
.ri::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--stripe); }
.ri[data-sec="asked"] { --stripe: var(--warn); } .ri[data-sec="quotes"], .ri[data-sec="rfq"] { --stripe: var(--violet); }
.ri[data-sec="waiting"] { --stripe: var(--ink-3); } .ri[data-sec="wechat"] { --stripe: var(--good); } .ri[data-sec="agent"] { --stripe: var(--warn); }
.ri.flash { animation: flash 1.6s ease-out; }
.ri-main { min-width: 0; }
.ri-l1 { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 14px; }
.ri-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 650; color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; }
.ri-code:hover { text-decoration: underline; }
.ri-code.plain { color: var(--ink); cursor: default; } .ri-code.plain:hover { text-decoration: none; }
.feed-item { grid-template-columns: minmax(48px, auto) 1fr; }
.feed-item time { white-space: nowrap; }
.tl li { grid-template-columns: minmax(58px, auto) 12px 1fr; }
button.linkish.mono { white-space: nowrap; }
.bar .seg { max-width: 100%; overflow-x: auto; }
.ri-kind { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.ri-client { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ri-l2 { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.ri-l2 .sep { color: var(--ink-3); margin: 0 4px; }
.ri-l2 .q { color: var(--ink); }
.ri-wait { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ri-wait.hot { color: var(--crit-ink); font-weight: 700; }
.ri-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ri-panel { grid-column: 1 / -1; padding: 6px 0 2px; }
.ri-panel .q-actions { margin-top: 8px; }
.ri-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }
.ri-text { grid-column: 1 / -1; margin: 2px 0 0; padding: 8px 10px; background: var(--fill-2); border-radius: 8px; font: 13.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow: auto; color: var(--ink); }
.ri .ta { margin-top: 6px; }
.ri.sent { opacity: .8; }
.pos-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.pos-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pos-list label { display: inline-flex; gap: 6px; align-items: baseline; }
.more { position: relative; display: inline-block; }
.more > summary { list-style: none; cursor: pointer; min-width: 30px; justify-content: center; font-weight: 700; letter-spacing: .05em; }
.more > summary::-webkit-details-marker { display: none; }
.more-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; max-width: min(320px, 86vw); background: var(--card); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line); padding: 6px; display: grid; gap: 2px; }
.more-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--ink); text-decoration: none; white-space: normal; }
.more-item:hover, .more-item:focus-visible { background: var(--hover); }
.more-item.danger { color: var(--crit-ink); }
.more-item.more-close { display: none; }  /* «Закрыть» — только у листа меню на телефоне */
.done-box summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; padding: 4px 2px; }
.done-box[open] summary { margin-bottom: 8px; }
.older-note { margin: 8px 2px 0; }
.nav-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nav-row .back { margin: 0; }
.kbd { font: 12.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink-3); }
th.sortable { padding: 0; }
th.sortable button { border: 0; background: none; font: inherit; color: inherit; padding: 8px 10px; cursor: pointer; width: 100%; text-align: inherit; white-space: nowrap; }
th.sortable button:hover { color: var(--ink); }
th[aria-sort="ascending"] button::after { content: " ↑"; } th[aria-sort="descending"] button::after { content: " ↓"; }
.more-rows { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px 0 2px; }
.feed-item .x { color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.pill.hot { background: var(--crit-bg); color: var(--crit-ink); }

/* ── UX-3: срочное внутри разделов, плитки-фильтры, «Только срочные» ── */
.ri.hot { --stripe: var(--crit); background: var(--crit-bg); }
.ri.hot:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.ri.hot:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.ri.hot .ri-wait { white-space: normal; max-width: 260px; }
.kpi.click.on { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.kpi.click.hot.on { box-shadow: 0 0 0 2px var(--crit), var(--shadow); }
.kpi.has-hot .d { font-weight: 600; }
.today-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: -4px 2px 14px; font-size: 13.5px; }
.switch-line { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 600; }
.switch-line input { width: 16px; height: 16px; accent-color: var(--crit); }

/* ── UX-3: «Задания агенту» и «Выполнить сейчас» ── */
.agent-panel .card-head { margin-bottom: 8px; }
.agent-panel h3 .pill { vertical-align: 2px; margin-left: 4px; }
.run-live { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.run-last { display: grid; gap: 6px; font-size: 13.5px; padding: 8px 0 2px; }
.run-result summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.run-result .ri-text { max-height: 16em; margin-top: 6px; font: 14px/1.5 "Wix Madefor Text", -apple-system, "Segoe UI", system-ui, sans-serif; }  /* итог агента — обычным шрифтом */
.tasks { display: grid; gap: 2px; margin-top: 10px; }
.task-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row .task-what { flex: 1; min-width: 200px; }
.task-row .cell-sub { flex-basis: 100%; }
.tasks-done summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); font-weight: 600; margin-top: 10px; }
/* «Сегодня» на телефоне: агент одной строкой (что делает / ждёт + одна кнопка), подробности — экран «Агент» */
.agent-line { padding: 10px 12px; }
.agent-line-row { display: flex; align-items: center; gap: 10px; font-size: 15px; min-width: 0; }
.agent-line-row .flex1 { min-width: 0; overflow-wrap: anywhere; }
.agent-line-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); flex: none; }
.agent-line-row .dot.off { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.agent-line-row .btn { flex: none; }
.agent-line .cell-sub { margin-top: 6px; }
/* плитки «Сегодня» на телефоне — строкой фильтров под разделами */
.today-chips .chips { margin-bottom: 8px; }
.today-chips .chip-hot .n { color: var(--crit-ink); font-weight: 700; }
.today-chips .chip-hot[aria-pressed="true"] .n { color: inherit; }
/* код заявки, на странице которой стоим, — текстом, а не ссылкой на эту же страницу */
.code-here { font-weight: 600; }
/* «Для администратора»: номер, хеши, файлы, дифф — свёрнуто */
.admin-more > summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.admin-more[open] > summary { margin-bottom: 10px; }
details.card.admin-more > summary { list-style-position: inside; }
/* окно «Точно?» (вместо confirm() браузера) */
.modal.ask-modal { width: min(460px, 100%); }
.modal.ask-modal .sub { margin: 0; font-size: 15px; color: var(--ink); }

/* ── UX-3: запрос поставщикам — кому уйдёт и как это работает ── */
.rfq-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.route { display: grid; gap: 4px; }
.route-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.how-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.how-steps b { color: var(--ink); }
.how-box { margin: 0 2px 10px; }
.how-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.how-box .how-steps { margin-top: 6px; }
.mini-h { font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

/* ── UX-3: заявка — переписка как в Gmail, ярлыки, черновик, цепочка цены ── */
.mail-subject { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mail-subject h3 { font-size: 17px; overflow-wrap: anywhere; }
.lbls { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lbl { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; background: var(--fill); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.lbl.sys { background: var(--muted-bg); color: var(--ink-2); font-weight: 500; }
.lbl-dot { width: 9px; height: 9px; flex: none; }
.mail-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail-msg { border-bottom: 1px solid var(--line); min-width: 0; }
.mail-msg:last-child { border-bottom: 0; }
.mail-msg > summary { list-style: none; cursor: pointer; display: block; padding: 10px 12px; }
.mail-msg > summary::-webkit-details-marker { display: none; }
.mail-msg > summary:hover { background: var(--hover); }
.mail-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13.5px; min-width: 0; }
.mail-head time { margin-left: auto; }
.mail-from { font-weight: 600; }
.mail-msg.unread .mail-from, .mail-msg.unread .mail-snippet { font-weight: 700; color: var(--ink); }
.mail-snippet { flex: 1 1 160px; min-width: 0; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg[open] .mail-snippet { display: none; }
.mail-msg[open] > summary { padding-bottom: 4px; }
.mail-msg.last-mgr { box-shadow: inset 3px 0 0 var(--accent); }
.mail-msg.auth-fail { box-shadow: inset 3px 0 0 var(--crit); }
.mail-body { padding: 0 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mail-addr summary { cursor: pointer; font-size: 13.5px; color: var(--ink-3); }
.mail-addr div { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.mail-text { margin: 0; padding: 10px 12px; background: var(--fill-2); border-radius: 8px; font: 13.5px/1.5 "Wix Madefor Text", -apple-system, "Segoe UI", system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28em; overflow: auto; color: var(--ink); }
.draft-text { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.draft-edit { min-height: 180px; }
.mail-att { display: flex; flex-wrap: wrap; gap: 6px; }
.att { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; max-width: 100%; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.mail-fields { display: grid; gap: 2px; margin-bottom: 8px; }
.mf { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.mf span { color: var(--ink-3); }
.mf b { font-weight: 500; overflow-wrap: anywhere; }
.crit-box { background: var(--crit-bg); color: var(--crit-ink); }
.ok-box { background: var(--good-bg); color: var(--good-ink); }
.draft-notes summary { cursor: pointer; font-size: 13px; color: var(--ink-2); font-weight: 600; margin-top: 8px; }
.chain { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.chain-step { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.chain-arrow { color: var(--ink-3); font-size: 13px; }

/* ── UX-3: окно поверх страницы (отправка письма, ярлыки) ── */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px; overflow: auto; }
.modal { background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px 20px; width: min(640px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.modal h3 { margin: 0; font-size: 17px; }
.modal .mail-text { max-height: 50vh; }
.modal-err { color: var(--crit-ink); font-size: 13.5px; font-weight: 600; }
.modal-err:empty { display: none; }
.lbl-list { display: grid; gap: 2px; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.lbl-row { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.lbl-row:hover { background: var(--hover); }
@media (max-width: 640px) {
  .ri { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 10px 10px 14px; }
  .ri-wait { grid-column: 2; grid-row: 1; align-self: start; }
  .ri-act { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; order: 5; }
  .ri-text { order: 4; } .ri-note { order: 6; } .ri-panel { order: 7; }  /* текст WeChat — до кнопки «Подтвердить отправку» */
  .mini-row { flex-wrap: wrap; }
  .mini-row > span:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 10px 12px; } .kpi .v { font-size: 22px; }
  .today-head .big { font-size: 18px; }
  .more-pop { right: auto; left: 0; }
}

/* ───────────── Заявка: окна «Почта · WeChat · Битрикс» вкладками ───────────── */
.win { display: grid; }
.win-tabs { display: flex; gap: 4px; padding: 0 6px; overflow-x: auto; }
.win-tab { border: 0; background: var(--fill); color: var(--ink-2); padding: 8px 16px; border-radius: 12px 12px 0 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.win-tab[aria-selected="true"] { background: var(--card); color: var(--ink); }
.win > .card { border-top-left-radius: 0; }
.req-side { position: sticky; top: 12px; }
@media (max-width: 900px) { .req-side { position: static; } }

/* ───────────── Заявка: окно WeChat ───────────── */
.wx { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; align-items: start; }
.wx-list { display: grid; gap: 4px; align-content: start; }
.wx-chat { display: grid; gap: 2px; justify-items: start; text-align: left; border: 0; background: var(--fill-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; min-width: 0; }
.wx-chat:hover { background: var(--hover); }
.wx-chat[aria-selected="true"] { background: var(--accent-soft); }
.wx-chat .cell-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.wx-thread { min-width: 0; display: grid; gap: 8px; }
.wx-thread-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; }
.wx-log { display: flex; flex-direction: column; gap: 8px; max-height: 64vh; overflow: auto; padding: 10px; background: var(--fill-2); border-radius: 12px; }
.wx-log > * { flex: none; }
.wx-msg { max-width: 88%; min-width: 0; border-radius: 12px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.wx-msg.wx-ours { align-self: flex-end; background: var(--ours-bg); }
/* наше сообщение: подписи и пояснения — --ink-2 (серый --ink-3 на зелёном не читается), кнопки — на подложке карточки */
.wx-ours .wx-meta, .wx-ours .cell-sub { color: var(--ink-2); }
.wx-ours .btn:not(.primary):not(:disabled) { background: var(--card); }
.wx-msg.wx-theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--line); }
.wx-msg.wx-faded { opacity: .72; }
.wx-msg .cell-sub { margin: 0; }
.wx-msg .q-actions { margin-top: 2px; }
.wx-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.wx-meta .pill { white-space: normal; }
.wx-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--ink); }
.wx-lines { display: flex; flex-direction: column; gap: 3px; }
.wx-sys { align-self: center; max-width: 94%; text-align: center; font-size: 13.5px; color: var(--ink-2); background: var(--card); border-radius: 10px; padding: 4px 10px; overflow-wrap: anywhere; }
.wx-edit { display: grid; gap: 6px; }
.wx-edit .ta, .wx-compose .ta { min-height: 96px; background: var(--card); }
.wx-compose { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.wx-compose .confirm { margin-top: 0; }
.wx-pos { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wx-pos label { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border-radius: 8px; background: var(--fill-2); font-size: 13.5px; cursor: pointer; }
.wx-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.wx-card > .confirm { margin-top: 10px; }
@media (max-width: 720px) {
  .wx { grid-template-columns: minmax(0, 1fr); }
  .wx-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }  /* чаты поставщиков — переносом, все видны */
  .wx-msg { max-width: 100%; }
}

/* ───────────── Заявка: окно Битрикса ───────────── */
.bx-block { display: grid; gap: 6px; margin-top: 12px; }
.bx-deal { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.bx-deal .cell-sub { margin: 0; }
.bx-deal-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; overflow-wrap: anywhere; }
.bx-res { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--fill-2); font-size: 13px; }
.bx-res-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.bx-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); max-height: 8em; overflow: auto; }
.bx-card .run-live { margin-top: 4px; }


/* ───────────── Заявка: агент по этой заявке ───────────── */
/* «Агент по заявке»: разговор пузырями (.msg — как во вкладке «Чат»), записи журнала — тонкие серые строки, живая строка
   с крутилкой и бегущими точками; разговор прокручивается внутри карточки, чтобы поле ввода было на экране */
.ra-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ra-card .card-head { margin-bottom: 0; }
.ra-card .card-head .sub { font-size: 14px; }
.ra-card h3 .pill { vertical-align: 2px; margin-left: 4px; }
.ra-card .confirm { margin-top: 4px; }
/* the whole card fits the screen in the sticky right column: the conversation scrolls inside it */
.ra-log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-height: 120px;
  max-height: max(220px, calc(100vh - 470px)); overflow: auto; padding: 8px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ra-log .msg { max-width: 94%; font-size: 14px; }
.ra-log .msg-text { overflow-wrap: anywhere; }
.ra-empty { font-size: 14px; }
.ra-more { justify-self: center; font-size: 13.5px; }
.ra-sys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); padding: 0 4px; }
.ra-sys time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ra-sys span { overflow-wrap: anywhere; }
.ra-me.ra-cancelled { opacity: .6; }
.ra-me.ra-cancelled .msg-text { text-decoration: line-through; }
.ra-wait { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--violet-ink); }
.ra-wait-text { display: inline-flex; gap: 4px; align-items: center; flex: 1 1 180px; }
.ra-wait-act { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ra-answer.ra-fail { border-color: var(--crit-bg); }
.ra-answer.ra-stopped .msg-text.dim { margin-top: 4px; }
.ra-err { color: var(--crit-ink); margin-top: 4px; }
.ra-steps { margin-top: 6px; font-size: 13.5px; }
.ra-steps summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.ra-step-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; color: var(--ink-2); max-height: 14em; overflow: auto; }
.ra-step-list time { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 6px; }
.ra-live { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.ra-live .spin { margin-top: 3px; }
.ra-live-body { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.ra-dots { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.ra-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; animation: ra-dot 1.2s infinite ease-in-out; }
.ra-dots i:nth-child(2) { animation-delay: .2s; } .ra-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ra-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ra-dots i { animation: none; opacity: .6; } }
.ra-tools { display: flex; justify-content: flex-end; font-size: 13.5px; }
.ra-quick { margin-bottom: 0; gap: 6px; }
.ra-quick .chip { font-size: 13.5px; padding: 5px 11px; text-align: left; }
.ra-input { min-height: 64px; }
.ra-actions { margin-top: 0; align-items: center; }
.ra-actions .hint { flex: 1 1 160px; }
@media (max-width: 900px) { .ra-log { max-height: 60vh; } }
@media (max-width: 480px) {
  .ra-log .msg { max-width: 100%; }
  .ra-wait-act, .ra-wait-act .btn { width: 100%; }
  .ra-wait-act .btn { justify-content: center; }
  .ra-actions .btn { width: 100%; justify-content: center; }
}


/* ───────────── Заявка: почта фоном ───────────── */
.mail-refreshing { color: var(--accent-text); font-weight: 600; }
.mail-cache-note { color: var(--ink-3); }
.meta .from-thread { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-3); }
.att.att-noname .att-name { color: var(--ink-2); }

/* ───────────── Длинный текст агента и вопросы агента (21.10) ─────────────
   Владелец: «в окне статуса слишком много мелкого текста — нечитаемо». Коротко — одна-две строки обычным размером,
   весь текст — под «подробнее» пунктами; вопрос менеджеру / вам — жёлтая плашка с «?», а не серый текст. */
.clamp1, .clamp2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clamp1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clampbox { min-width: 0; }
.clampbox:has(> details[open]) > .clamp1, .clampbox:has(> details[open]) > .clamp2 { display: none; }
.more-text > summary { display: inline-block; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--accent-text); margin-top: 1px; }
.more-text > summary::-webkit-details-marker { display: none; }
.more-text > summary .m-open::after { content: " ▾"; } .more-text > summary .m-close::after { content: " ▴"; }
.more-text > summary .m-close, .more-text[open] > summary .m-open { display: none; }
.more-text[open] > summary .m-close { display: inline; }
.more-list { margin: 4px 0 2px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.more-list li + li { margin-top: 3px; }
.reason { margin-top: 2px; min-width: 0; }
.reason-head { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.ri-note .clampbox { font-size: 13.5px; }
.qmark { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #222228; font-weight: 800; font-size: 12px; line-height: 1; }
.qmark.big { width: 28px; height: 28px; font-size: 17px; }
.qchip { display: inline-flex; gap: 7px; align-items: flex-start; max-width: 100%; margin-top: 3px; padding: 5px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--ink); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.qchip .qmark { margin-top: 1px; }
.qcalls { display: grid; gap: 10px; margin: 0 0 16px; }
.qcall { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); border: 1px solid var(--warn); }
.qcall-body { flex: 1 1 auto; min-width: 0; }
.qcall-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn-ink); }
.qcall .hint { color: var(--ink-2); }  /* на жёлтой плашке --ink-3 не дотягивает до 4.5:1 */
.qcall-text { margin: 3px 0 8px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.qcall .q-actions { align-items: center; }
.qcall .hint { flex: 1 1 200px; }
.same-item { margin-top: 2px; font-size: 13px; color: var(--ink); }
.same-note { font-family: "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 13px; color: var(--ink-2); }
.feed-item .clampbox { margin-top: 1px; }
@media (max-width: 480px) { .qcall { padding: 10px 12px; gap: 10px; } .qcall .btn { width: 100%; justify-content: center; } }

/* ───── Телефон (21.10) ─────
   iPhone 17 Pro Max (440 × 956: вырез сверху, полоска «Домой» снизу), OnePlus 15 (412–450, жесты внизу), 375 px — тоже.
   Пока разделы внизу (до 820 px): 5 пунктов — Сегодня, Заявки, Поставщики, Агент, «Ещё» (лист снизу: Цены, Аналитика,
   Изменения, Чат, тема, пауза, выход). Телефон (до 600 px): шапка одной строкой — заголовок и две кнопки-значка, поиск —
   отдельной строкой только в «Заявках» и «Ценах»; кнопки и вкладки не ниже 44 px; поля ввода 16 px (иначе Safari
   увеличивает страницу); позиции заявки, заявки и цены — карточками вместо широких таблиц; меню «⋯» — листом снизу;
   «Отправить…» черновика и поле «Агента по заявке» прилипают к низу экрана над полосой разделов. Отступы — от безопасной
   зоны экрана (env(safe-area-inset-*), в index.html viewport-fit=cover). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, summary, a, label, select { touch-action: manipulation; }
.nav button.nav-more { display: none; }
.nav-sheet { display: none; }
.ra-compose { display: contents; }
/* вкладка «Агент» окон заявки (в одну колонку): точка — агент работает над заявкой или сообщение ждёт его */
.win-badge { display: none; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-left: 6px; vertical-align: 1px; }
.win-badge.on { display: inline-block; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: ra-dot 1.2s infinite ease-in-out; }
.win-badge.wait { display: inline-block; background: var(--violet); }
@media (prefers-reduced-motion: reduce) { .win-badge.on { animation: none; } }
@media (hover: none) {
  .btn:hover, .kpi.click:hover { filter: none; }
  .nav button:hover { background: transparent; }
}
/* компьютер, низкое окно (телефон боком шире 820 px): боковая панель прокручивается, слева — вырез экрана */
@media (min-width: 821px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; padding-left: max(12px, env(safe-area-inset-left, 0px)); }
}

/* ── разделы внизу: 5 пунктов и «Ещё» ── */
@media (max-width: 820px) {
  :root { --tabbar-h: 61px; }
  .sidebar { padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .nav { justify-content: stretch; gap: 2px; }
  .nav button { flex: 1 1 0; min-width: 0; min-height: 52px; justify-content: center; gap: 2px; padding: 5px 2px 4px; border-radius: 12px;
    font-size: 12px; font-weight: 600; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
  .nav button[aria-current="page"] { background: transparent; color: var(--accent-text); }
  .nav button .ico { width: 24px; height: 24px; }
  .nav .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav button.nav-x { display: none; }
  .nav button.nav-more { display: flex; }
  .nav .count.alert { top: 1px; right: calc(50% - 25px); }
  .main { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  /* всплывающее сообщение — сверху: внизу его закрывали бы кнопки черновика и поле агента; при переходе оно убирается */
  #toast { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -16px); z-index: 95; }
  #toast.on { transform: translate(-50%, 0); }

  /* лист «Ещё» */
  .nav-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; }
  .nav-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
  .nav-sheet-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
    overscroll-behavior: contain; background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25);
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .nav-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .nav-sheet-head b { font-size: 17px; }
  .nav-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nav-sheet-grid button { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 10px 12px; border: 0;
    border-radius: 14px; background: var(--fill-2); color: var(--ink); font-size: 16px; font-weight: 600; text-align: left; }
  .nav-sheet-grid button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  .nav-sheet-grid .ico { width: 22px; height: 22px; }
  .nav-sheet-grid .count { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--crit-fill); color: #fff; font-size: 13px; text-align: center; }
  .nav-sheet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 15px; }
  .nav-sheet-row .seg button { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
  .nav-sheet-foot { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
  .nav-sheet-foot .side-btns { gap: 8px; }
  .nav-sheet-foot .side-btns .btn { flex: 1 1 auto; justify-content: center; }
  html.sheet-open { overflow: hidden; }
  /* печатает (открыта клавиатура) — полоса разделов прячется, прилипшие поля встают к самому низу */
  :root:has(:is(textarea, input:not([type="checkbox"]):not([type="radio"])):focus) { --tabbar-h: 0px; }
  body:has(:is(textarea, input:not([type="checkbox"]):not([type="radio"])):focus) .sidebar { display: none; }

  /* меню «⋯» — листом снизу, поверх затемнения (нажатие мимо — закрыть) */
  .more > summary.btn:hover { filter: none; }
  .more[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); cursor: default; }
  .more-pop { position: fixed; z-index: 71; top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 18px; box-shadow: 0 -10px 40px rgba(0,0,0,.25), 0 0 0 1px var(--line); }
  .more-item { display: flex; align-items: center; min-height: 50px; padding: 10px 14px; border-radius: 12px; font-size: 16px; }
  .more-item.more-close { display: flex; justify-content: center; color: var(--ink-2); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; }
}
:root[data-theme="dark"] .nav-sheet-back, :root[data-theme="dark"] .more[open] > summary::after { background: rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-sheet-back, :root:not([data-theme="light"]) .more[open] > summary::after { background: rgba(0,0,0,.6); }
}

/* ── телефон ── */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .main { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px)); overflow-wrap: break-word; }  /* длинные причины и ответы агента — переносом */

  /* шапка: заголовок и две кнопки-значка в одну строку; ниже — состояние агента («Сегодня»), время почты, поиск */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; margin-bottom: 14px; }
  .topbar .title, .topbar .controls, .topbar .refresh-box { display: contents; }
  .title-row { grid-column: 1; grid-row: 1; min-width: 0; }
  .title h1 { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #refresh { grid-column: 2; grid-row: 1; }
  #fetch-mail { grid-column: 3; grid-row: 1; }
  #refresh, #fetch-mail { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  #refresh .btn-lbl, #fetch-mail-label { display: none; }
  #refresh .ico, #fetch-mail .ico { width: 20px; height: 20px; }
  #fetch-mail[aria-busy="true"] .ico { animation: spin .9s linear infinite; }
  #subtitle { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font-size: 13.5px; }
  #subtitle { display: none; }  /* на телефоне подзаголовок не нужен: первый экран — срочные дела (состояние агента — строкой ниже) */
  #fresh { grid-column: 1 / -1; grid-row: 3; white-space: normal; font-size: 13px; min-width: 0; text-align: left; }
  #q { grid-column: 1 / -1; grid-row: 4; width: 100%; height: 44px; margin-top: 8px; padding-left: 38px; border-radius: 12px; font-size: 16px;
    background-image: radial-gradient(circle at 17px 21px, transparent 5.5px, var(--ink-3) 6px, var(--ink-3) 7.2px, transparent 7.6px); }
  body:not([data-view="requests"]):not([data-view="prices"]):not([data-view="orders"]) #q { display: none; }
  #theme-seg { display: none; }
  .banner { margin-top: 0; font-size: 14px; }

  /* общие: текст, кнопки, поля */
  .card, .q-card { padding: 14px 14px 12px; }
  .q-card { padding-left: 18px; }
  .card h3 { font-size: 17px; }
  .sub { font-size: 14px; }
  .hint { font-size: 14px; }
  .cell-sub { font-size: 14px; }
  .pill { font-size: 13px; }
  .mono { font-size: 14px; }
  .empty { font-size: 15px; }
  .confirm { font-size: 14.5px; }
  table { font-size: 15px; }
  th { font-size: 13px; }
  .btn { min-height: 44px; height: auto; padding: 6px 14px; border-radius: 12px; font-size: 15px; line-height: 1.25; white-space: normal; text-align: left; }
  .btn.sm { min-height: 44px; height: auto; padding: 6px 12px; border-radius: 11px; font-size: 14.5px; }
  .chip { min-height: 44px; padding: 8px 14px; font-size: 14.5px; }
  .seg button { min-height: 44px; padding: 6px 14px; font-size: 14.5px; }
  /* цели нажатия не ниже 44 px: ссылки-кнопки внутри текста — с невидимым запасом сверху и снизу (строки не раздвигаются),
     отдельные — высотой 44 px; «подробнее», коды заявок, переключатели, строки с галочками, «⋯» */
  .linkish, .more-text > summary { padding-block: 12px; margin-block: -12px; }
  .linkish { min-width: 44px; }
  .done-box > summary, .admin-more > summary { padding-top: 12px; padding-bottom: 12px; }
  .nav-sheet-row .seg button { min-height: 44px; }
  .ra-tools .linkish, .ra-more, .run-last > .linkish, .tasks > .linkish, .agent-state .linkish {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
  .ri-code { padding-block: 11px; margin-block: -11px; }
  .switch-line, .check-line, .pos-list label, .wx-pos label { min-height: 44px; }
  .more > summary.btn { min-width: 44px; justify-content: center; }
  #view-analytics tr.click td { padding-top: 13px; padding-bottom: 13px; }
  .draft-notes > summary, .ra-steps > summary, .run-result > summary, .tasks-done > summary, .how-box > summary, .mail-addr > summary { padding-block: 12px; }
  input, select, textarea, .in, .in.sm, .ta, .ta.mono, .ta.wx, .search { font-size: 16px; }
  .in, .in.sm { height: 44px; border-radius: 10px; }
  .field .in { height: 46px; font-size: 16px; }   /* экран входа */
  .login-btn { height: 48px; font-size: 16px; justify-content: center; }
  .login-page { padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  /* переключатель: дорожка 50 × 30, а нажимать можно на всю высоту 44 px (прозрачная кнопка, дорожка — ::before) */
  .switch, .switch[aria-checked="true"] { width: 52px; height: 44px; border-radius: 15px; background: transparent; }
  .switch::before { content: ""; position: absolute; left: 1px; right: 1px; top: 7px; height: 30px; border-radius: 15px; background: var(--fill); transition: background .2s; }
  .switch[aria-checked="true"]::before { background: var(--good); }
  .switch::after { top: 9px; left: 3px; width: 26px; height: 26px; }
  .switch[aria-checked="true"]::after { transform: translateX(20px); }
  .feed-item { font-size: 14.5px; }
  .mini-row { font-size: 14.5px; }
  .lesson { font-size: 15px; }
  .msg { font-size: 15px; }
  .modal-back { align-items: flex-end; padding: 12px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 16px; border-radius: 20px; }
  .modal .q-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .mf { grid-template-columns: 56px minmax(0, 1fr); font-size: 14px; }
  /* «Изменения ждут подтверждения» (Сегодня, Чат): текст, под ним кнопка во всю ширину */
  .attn-card .row-actions { flex-direction: column; align-items: stretch; }
  .attn-card .row-actions > .btn { justify-content: center; text-align: center; }

  /* «Сегодня»: строка — код и клиент сверху, ниже суть, под ней — кнопки во всю ширину и «⋯» */
  .today-head { margin-bottom: 10px; }
  .today-head .big { font-size: 20px; }
  .today-head .hint { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 24px; }
  .kpi .l { font-size: 14px; }
  .kpi .d { font-size: 13px; }
  .today-filter { margin-top: 0; font-size: 15px; }
  .switch-line input, .check-line input, .pos-list input, .wx-pos input, .lbl-row input, .radio-line input { width: 22px; height: 22px; flex: none; }
  .lbl-row { min-height: 44px; }
  .sec-head .hint { flex-basis: 100%; min-width: 0; font-size: 14px; }
  .agent-line .btn.sm { padding: 6px 12px; }
  /* одна колонка во всю ширину: код, клиент, менеджер → сколько ждёт → суть → текст WeChat → кнопки → пояснение → панель */
  .ri { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 12px 12px 16px; }
  .ri-main { display: contents; }
  .ri-l1 { order: 1; font-size: 15.5px; }
  .ri-code { font-size: 15px; }
  .ri-kind { font-size: 13px; }
  .ri-wait, .ri.hot .ri-wait { grid-column: 1; grid-row: auto; order: 2; max-width: none; text-align: left; font-size: 13px; }
  .ri-wait:empty { display: none; }
  .ri.hot .ri-wait { font-size: 13.5px; }
  .ri-l2 { order: 3; margin-top: 0; font-size: 14px; line-height: 1.4; }
  .ri-act { margin-top: 6px; }
  .ri-text { margin-top: 4px; }
  .ri-act { flex-wrap: nowrap; gap: 8px; }
  .ri-act > .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ri-act > .more > summary { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 18px; }
  .ri-text { font-size: 14px; max-height: 16em; }
  .ri-note { font-size: 13.5px; }
  .pos-list { font-size: 14.5px; gap: 6px; }
  /* «Задания агенту»: пояснение — на компьютере; здесь «Выполнить сейчас» во всю ширину, две другие — рядом */
  .agent-panel .card-head .sub { display: none; }
  .agent-panel > .q-actions .btn { flex: 1 1 40%; justify-content: center; text-align: center; }
  .agent-panel > .q-actions .btn.primary { flex-basis: 100%; }
  .run-live, .run-last, .task-row { font-size: 14.5px; }
  .task-row .task-what { min-width: 0; flex-basis: 55%; }

  /* «Заявки»: фильтры и сортировка — переносом на следующую строку (не прячутся за краем экрана); заявки — карточками */
  #view-requests .chips { flex-wrap: wrap; margin: 0 0 12px; }
  #view-requests .chips .chip { flex: none; }
  #view-requests .table-wrap { margin: 0; overflow: visible; }
  #view-requests table, #view-requests tbody { display: block; }
  #view-requests thead { display: block; margin: 0 0 4px; }
  #view-requests thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  #view-requests th { padding: 0; border: 0; }
  #view-requests th.sortable button { min-height: 44px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: 13.5px; }
  #view-requests th[aria-sort="ascending"] button, #view-requests th[aria-sort="descending"] button { background: var(--ink); color: var(--card); }
  #view-requests tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  #view-requests tbody tr:last-child { border-bottom: 0; }
  #view-requests td { display: block; padding: 0; border: 0; text-align: left; }
  #view-requests td:nth-child(1) { order: 1; font-size: 15.5px; font-weight: 700; }
  #view-requests td:nth-child(7) { order: 2; margin-left: auto; font-size: 13px; }
  #view-requests td:nth-child(2) { order: 3; flex-basis: 100%; font-size: 15px; }
  #view-requests td:nth-child(6) { order: 4; flex-basis: 100%; }
  #view-requests td:nth-child(6) .cell-sub { display: inline-block; margin: 0 0 0 6px; }
  #view-requests td:nth-child(3) { order: 5; font-size: 14px; }
  #view-requests td:nth-child(4) { order: 6; font-size: 14px; }
  #view-requests td:nth-child(4)::after { content: " поз."; }
  #view-requests td:nth-child(5) { order: 7; font-size: 14px; }
  #view-requests td:nth-child(5)::before { content: "с ценой "; color: var(--ink-3); }
  #view-requests td:nth-child(8) { order: 8; font-size: 14px; }
  #view-requests td:nth-child(8)::before { content: "ответ через "; }

  /* заявка: шапка — сеткой в 2 колонки, окна вкладками (прокрутка вбок, если не влезут) */
  .nav-row { gap: 8px; }
  .nav-row .row-actions { width: 100%; flex-wrap: nowrap; }
  .nav-row .row-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .back { min-height: 44px; font-size: 15px; }
  .req-head { gap: 6px 10px; }
  .req-head h1 { font-size: 21px; }
  .req-head .client { flex-basis: 100%; font-size: 16px; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px;
    background: var(--card); box-shadow: var(--shadow); font-size: 13px; }
  .meta b { font-size: 14.5px; overflow-wrap: anywhere; }
  /* сведения о заявке — под «Подробнее»; «Ждёт вашего решения» — одной строкой: письмо и черновик — на первом экране */
  .meta-more, details.req-dec { margin: 8px 0 12px; padding: 0 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
  .meta-more > summary, .req-dec > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 44px; padding: 6px 0; cursor: pointer; font-size: 15px; font-weight: 600; }
  .meta-more > summary .dim, .req-dec > summary .dim { font-weight: 400; font-size: 14px; }
  .meta-more > .meta { margin: 0; padding: 0 0 12px; box-shadow: none; background: none; }
  .req-dec > .rows { margin: 0 -14px 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
  .detail, .stack { gap: 14px; }
  .win-tabs { gap: 4px; padding: 0 2px; scrollbar-width: none; }
  .win-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px; font-size: 15px; }
  .mail-subject h3 { font-size: 16px; }
  .mail-msg > summary { padding: 12px; }
  .mail-head { font-size: 14.5px; }
  .mail-snippet { flex-basis: 100%; order: 5; }
  .mail-text { max-height: 60vh; font-size: 15px; }
  .mail-addr summary, .mail-addr div { font-size: 13.5px; }
  .draft-text { font-size: 14px; }
  .att { font-size: 13.5px; }
  .att-name { max-width: 200px; }
  /* «Отправить…» черновика — у нижнего края экрана, пока черновик на экране */
  #draft-card > .q-actions { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 25; margin: 12px -14px -12px;
    padding: 10px 14px 12px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: var(--card); }
  #draft-card > .q-actions > .btn.primary { flex: 1 1 auto; justify-content: center; text-align: center; }
  /* открыта вкладка «Агент»: внизу прилипает только поле агента — две «отправить» на одном экране путали бы */
  .stack:has(> .win[data-tab="agent"]) > #draft-card > .q-actions { position: static; margin: 12px 0 0; padding: 0; border-top: 0; background: none; }
  /* позиции — карточками: партномер и количество, цена по шагам, вес и кнопки */
  .card .table-wrap:has(.chain) { margin: 0; overflow: visible; }
  .card table:has(.chain), .card table:has(.chain) tbody { display: block; }
  .card table:has(.chain) thead { display: none; }
  .card table:has(.chain) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pn qty" "chain chain" "w act";
    gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .card table:has(.chain) tr:last-child { border-bottom: 0; padding-bottom: 2px; }
  .card table:has(.chain) td { display: block; padding: 0; border: 0; }
  .card table:has(.chain) td:nth-child(1) { grid-area: pn; white-space: normal; font-size: 15.5px; font-weight: 650; }
  .card table:has(.chain) td:nth-child(1) .cell-sub { font-weight: 400; }
  .card table:has(.chain) td:nth-child(2) { grid-area: qty; align-self: start; font-size: 16px; font-weight: 700; }
  .card table:has(.chain) td:nth-child(2)::before { content: "× "; color: var(--ink-3); font-weight: 400; }
  .card table:has(.chain) td:nth-child(3) { grid-area: chain; }
  .card table:has(.chain) td:nth-child(4) { grid-area: w; text-align: left; font-size: 14px; }
  .card table:has(.chain) td:nth-child(4)::before { content: "вес "; }
  .card table:has(.chain) td:nth-child(5) { grid-area: act; }
  .chain-step { padding: 3px 9px; font-size: 13.5px; }
  /* WeChat и Битрикс */
  .wx-log { max-height: 60vh; padding: 8px; overscroll-behavior: contain; }
  .wx-msg { max-width: 100%; font-size: 15px; }
  .wx-meta { font-size: 12.5px; }
  .wx-chat { min-height: 44px; }
  .wx-pos label { min-height: 44px; padding: 4px 10px; font-size: 14px; }
  .wx-compose .q-actions .btn, .wx-msg .q-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .wx-msg .q-actions .btn.primary { flex-basis: 100%; }
  .wx-count { flex-basis: 100%; text-align: right; }
  .bx-res { font-size: 14px; }
  .bx-text { font-size: 13.5px; }
  .bx-card .table-wrap { margin: 0; overflow: visible; }
  .bx-card table, .bx-card tbody { display: block; }
  .bx-card thead { display: none; }
  .bx-card tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bx-card tbody tr:last-child { border-bottom: 0; }
  .bx-card td { display: block; padding: 0; border: 0; }
  .bx-card td:first-child { flex-basis: 100%; font-weight: 600; overflow-wrap: anywhere; }
  .bx-card td:last-child { margin-left: auto; }
  /* «Агент по заявке» (вкладка «Агент»): разговор прокручивается внутри, поле и «Отправить» — у нижнего края экрана */
  .ra-card .card-head .sub { font-size: 13.5px; }
  .ra-log { max-height: 52vh; max-height: 52dvh; overscroll-behavior: contain; }
  .ra-log .msg { max-width: 100%; font-size: 15px; }
  .ra-sys { font-size: 13px; }
  .ra-quick { flex-wrap: wrap; }   /* быстрые поручения — переносом, а не полосой за краем экрана */
  .ra-quick .chip { min-height: 44px; font-size: 14px; }
  .ra-compose { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 25; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; margin: 0 -14px -12px; padding: 10px 14px 12px;
    border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: var(--card); }
  .ra-compose .ra-actions { display: contents; }
  .ra-compose .ra-input { min-height: 64px; height: 64px; resize: none; }
  .ra-compose #ra-send { width: auto; min-height: 48px; justify-content: center; }
  .ra-compose #ra-hint { grid-column: 1 / -1; font-size: 13px; }
  .ra-wait { font-size: 13.5px; }
  .win-tab .win-badge { margin-left: 0; }

  /* «Цены»: выбранный партномер — сверху, список — карточками (сортировка — строка кнопок над ним) */
  #view-prices .detail > :last-child { order: -1; }
  #view-prices .detail > .card:first-child .table-wrap { margin: 0; overflow: visible; }
  #view-prices .detail > .card:first-child table, #view-prices .detail > .card:first-child tbody { display: block; }
  #view-prices .detail > .card:first-child thead { display: block; margin: 0 0 4px; }
  #view-prices .detail > .card:first-child thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  #view-prices .detail > .card:first-child th { padding: 0; border: 0; }
  #view-prices .detail > .card:first-child th.sortable button { min-height: 44px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: 13.5px; }
  #view-prices .detail > .card:first-child th[aria-sort="ascending"] button,
  #view-prices .detail > .card:first-child th[aria-sort="descending"] button { background: var(--ink); color: var(--card); }
  #view-prices .detail > .card:first-child tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 8px;
    border-bottom: 1px solid var(--line); border-radius: 10px; }
  /* строка-карточка: партномер и цена / вендор, кто и когда / предложений, закупка, вес (::before и ::after — переносы строк) */
  #view-prices .detail > .card:first-child tbody tr::before, #view-prices .detail > .card:first-child tbody tr::after { content: ""; flex-basis: 100%; height: 0; }
  #view-prices .detail > .card:first-child tbody tr::before { order: 3; }
  #view-prices .detail > .card:first-child tbody tr::after { order: 6; }
  #view-prices .detail > .card:first-child td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
  #view-prices .detail > .card:first-child td:nth-child(1) { order: 1; font-size: 15px; font-weight: 700; }
  #view-prices .detail > .card:first-child td:nth-child(3) { order: 2; margin-left: auto; font-size: 16px; font-weight: 700; }
  #view-prices .detail > .card:first-child td:nth-child(2) { order: 4; }
  #view-prices .detail > .card:first-child td:nth-child(4) { order: 5; }
  #view-prices .detail > .card:first-child td:nth-child(5) { order: 7; }
  #view-prices .detail > .card:first-child td:nth-child(5)::before { content: "предложений "; color: var(--ink-3); }
  #view-prices .detail > .card:first-child td:nth-child(6) { order: 8; }
  #view-prices .detail > .card:first-child td:nth-child(6)::before { content: "закупка "; color: var(--ink-3); }
  #view-prices .detail > .card:first-child td:nth-child(7) { order: 9; }
  #view-prices .detail > .card:first-child td:nth-child(7)::before { content: "вес "; color: var(--ink-3); }

  /* «Дать цену клиенту» (закупка в строке «Сегодня» и заявки): позиция — карточкой, наценка и цена клиенту видны сразу */
  .ri-panel .table-wrap { margin: 0; overflow: visible; }
  .ri-panel table, .ri-panel tbody { display: block; }
  .ri-panel thead { display: none; }
  .ri-panel tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ri-panel tbody tr:last-child { border-bottom: 0; }
  .ri-panel td { display: block; padding: 0; border: 0; text-align: left; }
  .ri-panel td:nth-child(1) { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
  .ri-panel td:nth-child(2) { font-weight: 700; }
  .ri-panel td:nth-child(2)::before { content: "× "; color: var(--ink-3); font-weight: 400; }
  .ri-panel td:nth-child(3), .ri-panel td:nth-child(4) { flex-basis: 100%; }
  .ri-panel td:nth-child(4)::before { content: "вес "; color: var(--ink-3); }
  .ri-panel td:nth-child(5) { display: flex; align-items: center; gap: 6px; }
  .ri-panel td:nth-child(5):has(.pct-wrap)::before { content: "наценка"; color: var(--ink-3); }
  .ri-panel td:nth-child(6)::before { content: "клиенту "; color: var(--ink-3); font-weight: 400; }
  .ri-panel td:nth-child(7)::before { content: "сумма "; color: var(--ink-3); }
  .ri-panel .radio-line { align-items: flex-start; padding: 4px 0; white-space: normal; }
  .in.pct { width: 76px; }

  /* «Поставщики → Ответы» и «Справочник» — карточками (цены и «белый список» не уезжают за край экрана) */
  #view-suppliers .table-wrap { margin: 0; overflow: visible; }
  #view-suppliers table, #view-suppliers tbody { display: block; }
  #view-suppliers thead { display: none; }
  #view-suppliers tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #view-suppliers tbody tr:last-child { border-bottom: 0; }
  #view-suppliers td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
  #view-suppliers td:empty { display: none; }
  #view-suppliers table:has(th:nth-child(9)) tbody tr::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(1) { order: 0; flex-basis: 100%; font-size: 15px; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(1) .cell-sub { display: inline; margin-left: 6px; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(2) { order: 1; font-size: 15px; font-weight: 700; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(3) { order: 2; font-weight: 700; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(3)::before { content: "× "; color: var(--ink-3); font-weight: 400; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(5) { order: 3; margin-left: auto; font-size: 16px; font-weight: 700; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(4) { order: 5; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(6) { order: 6; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(6)::before { content: "срок "; color: var(--ink-3); }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(7) { order: 7; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(7)::before { content: "вес "; color: var(--ink-3); }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(8) { order: 8; }
  #view-suppliers table:has(th:nth-child(9)) td:nth-child(9) { order: 9; flex-basis: 100%; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(1) { flex: 1 1 auto; font-size: 15px; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(4) { order: 1; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(4)::before { content: "белый список "; color: var(--ink-3); }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(2) { order: 2; flex-basis: 100%; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(2)::before { content: "вендоры: "; color: var(--ink-3); }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(3) { order: 3; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(3)::before { content: "язык "; color: var(--ink-3); }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(5) { order: 4; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(5)::before { content: "медиана ответа "; color: var(--ink-3); }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(6) { order: 5; }
  #view-suppliers table:not(:has(th:nth-child(7))) td:nth-child(6)::before { content: "ответов "; color: var(--ink-3); }

  /* поставщики, агент, чат: вкладки «Поставщиков» — переносом, все видны */
  .bar .seg { flex-wrap: wrap; overflow: visible; }
  .bar .seg button { min-height: 44px; }
  #view-analytics .bar .hint { flex-basis: 100%; }
  .chat-log { max-height: 55vh; max-height: 55dvh; overscroll-behavior: contain; }
}

/* ───── Вложения (22.10) ─────
   Вложение письма — кнопка: картинка — окно просмотра (← → между картинками письма), PDF — окно с просмотрщиком браузера
   (Android — «Открыть» и «Скачать»), Excel, Word, CSV, TXT — окно с таблицей, остальное — «скачать». Миниатюры картинок —
   над кнопками. Окно: ✕ справа сверху, Esc, нажатие мимо; на телефоне — во весь экран, кнопки не ниже 44 px. */
.mail-att-wrap { display: grid; gap: 8px; }
.att-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.att-thumb { display: grid; place-items: center; width: 120px; height: 90px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--fill-2); overflow: hidden; cursor: zoom-in; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-thumb img.broken { display: none; }
.att-thumb:has(img.broken)::after { content: "не загрузилось"; font-size: 13px; color: var(--ink-3); }
.att-btn { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); cursor: pointer; text-decoration: none; text-align: left; }
.att-btn:hover, .att-thumb:hover { background: var(--hover); }
.att-btn:focus-visible, .att-thumb:focus-visible, .att-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.att-act { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.modal-back.att-back { padding: 3vh 12px; }
.modal.att-modal { width: min(1100px, 100%); gap: 12px; }
.att-head { display: flex; gap: 8px 10px; align-items: flex-start; }
.att-head-text { flex: 1 1 auto; min-width: 0; }
.att-title { overflow-wrap: anywhere; }
.att-sub { margin: 2px 0 0; overflow-wrap: anywhere; }
.att-head-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.att-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--fill);
  color: var(--ink); cursor: pointer; }
.att-x:hover { background: var(--hover); }
.att-x .ico { width: 18px; height: 18px; }
.att-stage { display: grid; place-items: center; min-height: 200px; max-height: 76vh; overflow: auto; border-radius: 12px; background: var(--fill-2); }
.att-img { display: block; max-width: 100%; max-height: 76vh; object-fit: contain; }
.att-nav { display: flex; gap: 10px; align-items: center; justify-content: center; }
.att-count { min-width: 64px; text-align: center; color: var(--ink-2); font-size: 14px; }
.att-frame { display: block; width: 100%; height: 74vh; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.att-nopdf { display: grid; gap: 14px; align-content: start; font-size: 15px; }
.att-nopdf .q-actions { align-content: flex-start; }
.att-textbox { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-height: 120px; max-height: 74vh;
  overflow: auto; overscroll-behavior: contain; }
.att-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.att-sheet { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.att-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.att-table { border-collapse: collapse; min-width: 100%; font-size: 13px; line-height: 1.4; }
.att-table td { padding: 5px 9px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; vertical-align: top; color: var(--ink); }
.att-table tr:last-child td { border-bottom: 0; }
.att-table td:last-child { border-right: 0; }
.att-table tr:nth-child(even) td { background: var(--fill-2); }
.att-table td.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.att-scroll-hint { display: none; margin: 0; }
.att-pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--fill-2); white-space: pre-wrap; overflow-wrap: anywhere;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
@media (max-width: 600px) {
  .att-thumb { width: 104px; height: 78px; }
  .att-btn { min-height: 44px; font-size: 14px; }
  .modal-back.att-back { align-items: stretch; padding: 0; }
  .modal.att-modal { width: 100%; height: 100vh; height: 100dvh; max-height: none; overflow: hidden; border-radius: 0; grid-template-rows: auto minmax(0, 1fr) auto;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .att-head { flex-wrap: wrap; }
  .att-head-text { order: 1; flex: 1 1 0; }
  .att-x { order: 2; width: 44px; height: 44px; border-radius: 12px; }
  .att-x .ico { width: 22px; height: 22px; }
  .att-head-act { order: 3; flex: 1 1 100%; justify-content: stretch; }
  .att-head-act .btn { flex: 1 1 0; justify-content: center; text-align: center; min-height: 44px; }
  .att-stage { height: 100%; max-height: none; min-height: 0; }
  .att-img { max-height: 100%; }
  .att-frame { height: 100%; }
  .att-textbox { max-height: none; }
  .att-nav .btn { flex: 1 1 0; justify-content: center; min-height: 48px; }
  .att-nopdf .q-actions .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; font-size: 16px; }
  .att-table { font-size: 14px; }
  .att-scroll-hint { display: block; }  /* таблица Excel шире экрана — сказано, что её листают вбок */
}

/* ───── «В работе» и чаты Битрикса для заказов (22.10) ─────
   «В работе»: на компьютере — таблица (заявка, менеджер, с какого дня и почему, оплата, поставщики, последнее из Битрикса,
   кнопки), на телефоне — карточки. «Настройки» → «Битрикс24» → «Битрикс24 — чаты для заказов»: строка — название, «что в этом чате», кнопки
   администратора. Заявка → «Битрикс»: сообщения о заявке, сгруппированные по чатам. Текст не мельче 13 px. */
.ord-card .bar { margin-bottom: 8px; }
.ord-card .run-live { margin: 0 0 10px; }
.ord-table td { vertical-align: top; }
.ord-table .cell-sub { max-width: 260px; }
.ord-bx-cell { min-width: 200px; max-width: 340px; }
.ord-bx { display: grid; gap: 2px; font-size: 14px; }
.ord-bx-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ord-bx-head b { font-weight: 600; }
.ord-bx-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.ord-act { flex-wrap: nowrap; justify-content: flex-end; }
.ord-link { margin-left: 4px; }
.ord-help { margin: 4px 2px 0; }
.ord-list { display: grid; }
.ord-item { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ord-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.ord-l1 { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ord-code { font-size: 15.5px; font-weight: 700; }
.ord-client { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.ord-l2 { font-size: 14px; color: var(--ink-2); }
.ord-fact { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 14.5px; }
.ord-k { color: var(--ink-2); font-size: 13.5px; }
.ord-item .ord-act { margin-top: 4px; flex-wrap: wrap; justify-content: flex-start; }
.ord-req { min-width: 150px; }
.req-last .more { margin-left: 8px; vertical-align: middle; }
.req-last .more > summary.btn { padding: 0 9px; }
.more-pop.pop-fixed { position: fixed; right: auto; z-index: 40; }
.nav-sheet-grid .count.plain { background: var(--fill); color: var(--ink-2); }

.bxc-list { display: grid; }
.bxc-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bxc-row:last-child { border-bottom: 0; }
.bxc-main { flex: 1 1 320px; min-width: 0; display: grid; gap: 4px; }
.bxc-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 15px; }
.bxc-about { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bxc-about.dim { color: var(--ink-3); }
.bxc-act { flex: 0 1 auto; align-items: center; }
.bxc-add { max-width: 640px; }
.bxc-label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

.bx-chat { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.bx-chat-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; overflow-wrap: anywhere; }
.bx-about { margin: 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.bx-msg { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--fill-2); font-size: 13.5px; }
.bx-msg-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; color: var(--ink-2); }
.bx-msg-head b { color: var(--ink); font-weight: 600; }
.bx-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; line-height: 1.45; }

@media (max-width: 600px) {
  .ord-fact { grid-template-columns: 96px minmax(0, 1fr); font-size: 15px; }
  .ord-item .ord-act .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ord-item .ord-act > .more > summary { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 18px; }
  .ord-bx { font-size: 15px; }
  .ord-bx-text { font-size: 14px; }
  #view-requests td.req-last { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
  .bx-msg-text { font-size: 15px; }
  .bxc-act { flex-basis: 100%; }
  .bxc-act .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .bxc-about { font-size: 15px; }
  .bx-msg { font-size: 14px; }
  .bx-about { font-size: 14px; }
}

/* ── «Разобрать все новые заявки» (22.10): ход очереди агента, итог на «Сегодня», проверка по порядку ── */
.batch-live { display: grid; gap: 8px; background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.batch-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.batch-line .flex1 { min-width: 0; overflow-wrap: anywhere; }
.batch-line b { font-weight: 650; }
.batch-line .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); flex: none; }
/* полоса хода — элемент <progress> (строгая CSP: без style-атрибутов), цвета темы */
.batch-bar { display: block; width: 100%; height: 10px; border: 0; border-radius: 6px; background: var(--card); overflow: hidden;
  -webkit-appearance: none; appearance: none; accent-color: var(--accent); }
.batch-bar::-webkit-progress-bar { background: var(--card); border-radius: 6px; }
.batch-bar::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
.batch-bar::-moz-progress-bar { background: var(--accent); border-radius: 6px; }
.batch-live .cell-sub { margin: 0; }
.batch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.batch-acts .btn.danger { background: var(--card); }
/* низ боковой панели и лист «Ещё» на телефоне — компактнее */
.batch-live.side { margin: 0; padding: 10px 12px; font-size: 14px; gap: 6px; }
.btn.side-batch { justify-self: stretch; height: auto; min-height: 32px; padding: 6px 11px; white-space: normal; text-align: left; line-height: 1.3; }
.agent-line .batch-live { margin: 10px 0 0; }
.agent-line .btn.batch-start { margin-top: 10px; width: 100%; justify-content: center; }
.sec-head .btn.batch-sec { margin-left: auto; align-self: center; }
.in-batch { color: var(--accent-ink); font-weight: 600; }
/* итог очереди сверху «Сегодня» */
.batch-card { border-left: 4px solid var(--accent); }
.batch-card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.batch-card-row .flex1 { min-width: 260px; }
.batch-card-title { margin: 0; font-size: 17px; }
.batch-card-counts { margin: 4px 0 6px; font-size: 15px; color: var(--ink); }
.batch-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* страница заявки во время «Проверить по порядку» */
.review-pos { font-weight: 650; color: var(--accent-ink); }
.batch-review { display: grid; gap: 8px; border-left: 4px solid var(--accent); padding-top: 14px; padding-bottom: 14px; }
.batch-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.batch-why { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.batch-review .q-actions { margin-top: 2px; }
@media (max-width: 600px) {
  .batch-acts .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .batch-card-row .flex1 { min-width: 0; flex-basis: 100%; }
  .batch-card-acts { width: 100%; }
  .batch-card-acts .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .batch-review .q-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .sec-head .btn.batch-sec { display: none; }  /* на телефоне та же кнопка — в строке агента прямо над разделом */
  .btn.side-batch { min-height: 44px; justify-content: center; text-align: center; }
}

/* ───── «Настройки» (23.10): вкладки, строка состояния вкладки, строки «что — как сейчас» ─────
   Вкладки — кнопками в строку (на телефоне — сеткой 3 × 2, не ниже 44 px), у вкладки — значок ✓ / ! / ✕, как в Центре
   управления. Первая строка вкладки — состояние словами в цвет (работает / замечание / не работает). Строка настройки: слева
   что это и пояснение, справа как сейчас — плашкой или переключатель. Текст не мельче 13 px, светлая и тёмная тема. */
.cfg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cfg-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 10px;
  background: var(--fill); color: var(--ink); font-size: 14.5px; font-weight: 600; }
.cfg-tab:hover { filter: brightness(.97); }
.cfg-tab[aria-selected="true"] { background: var(--card); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.cfg-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  font-size: 13px; font-weight: 800; line-height: 1; }
.cfg-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; margin-bottom: 16px;
  font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cfg-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid currentColor; font-size: 13px; font-weight: 800; line-height: 1; }
.cfg-status-text { min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
.cfg-rows { display: grid; }
.cfg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cfg-row:last-child { border-bottom: 0; }
.cfg-k { flex: 1 1 220px; min-width: 0; }
.cfg-k b { font-weight: 600; overflow-wrap: anywhere; }
.cfg-v { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.cfg-v .pill { white-space: normal; text-align: left; border-radius: 10px; }
.cfg-where { margin: 10px 0 0; }
.cfg-sum { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cfg-num { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.cfg-link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; margin: 0 0 16px; border-radius: 12px;
  background: var(--accent-soft); color: var(--ink); font-size: 14.5px; }
.cfg-link > .ico { color: var(--accent-text); width: 18px; height: 18px; flex: none; }
.cfg-link .flex1 { min-width: 200px; }
.cfg-runs { display: grid; }
.cfg-run { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cfg-run:last-child { border-bottom: 0; }
.cfg-run-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14.5px; }
.cfg-run-head b { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .cfg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfg-tab { min-height: 44px; justify-content: center; padding: 6px; font-size: 14.5px; }
  .cfg-status { font-size: 16px; padding: 12px 14px; }
  .cfg-row { font-size: 15px; align-items: flex-start; }
  .cfg-k { flex-basis: 180px; }
  .cfg-v { text-align: left; }
  .cfg-num { width: 96px; }
  .cfg-link .flex1 { min-width: 0; flex-basis: calc(100% - 30px); }
  .cfg-link .btn { width: 100%; justify-content: center; text-align: center; }
  .cfg-run-head { font-size: 15px; }
}

/* ───────────── Вход в WeChat на компьютере агента (пожелание 75, 23.10) ─────────────
   Панель вкладки WeChat раздела настроек (app.js, wechatLoginPanel): состояние словами, снимок окна входа WeChat крупно,
   одна главная кнопка. Снимок — светлое окно WeChat: в тёмной теме у него своя светлая подложка и рамка. */
.wxl { display: grid; gap: 12px; }
.wxl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wxl-head h3 { margin: 0; }
.wxl-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.wxl-text.dim { color: var(--ink-2); font-size: 14px; }
.wxl-strong { font-weight: 650; font-size: 16px; }
.wxl-ok { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: var(--good-ink); overflow-wrap: anywhere; }
.wxl-ok .ico { width: 20px; height: 20px; flex: none; }
.wxl-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--ink); font-size: 15px; line-height: 1.5; }
.wxl-note.crit { background: var(--crit-bg); }
.wxl-err { margin: 0; color: var(--crit-ink); font-size: 14px; }
/* снимок слева, слова и кнопка справа; уже 720 px — слова и кнопка над снимком (главное видно без прокрутки) */
.wxl-main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-areas: "shot side"; gap: 14px 28px; align-items: start; }
.wxl-main.no-shot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side"; }
.wxl-side { grid-area: side; display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.wxl-lead { font-size: 16.5px; line-height: 1.55; }
.wxl-shot { grid-area: shot; display: grid; justify-items: start; gap: 8px; min-width: 0; }
.wxl-img { display: block; width: 100%; max-width: 400px; height: auto; padding: 6px; border-radius: 14px; background: #ffffff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.wxl-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wxl-foot { margin: 0; font-size: 13px; color: var(--ink-2); }
.wxl-phone-hint { display: none; margin: 0; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 720px) {
  .wxl-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "shot"; }
  .wxl-side { padding-top: 0; }
}
@media (max-width: 600px) {
  .wxl-shot { justify-items: center; }
  .wxl-img { max-width: none; }
  .wxl-phone-hint { display: block; }
  .wxl-act .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}