/* Панель 2.0: склейка css-2.css (98 файлов: wallets-2.css, staff-pick.css, access.css ... refchecks.css), собирает src/dash/bundle.py */
/* «Реквизиты», дополнение 08.10 (js/screens/wallets.js, wallets-2.js, wallets-3.js): значок биржи монограммой (как в «Счетах»,
   .bk из ledger-acc.css), «не принимаем», кто работает, окно правки (на телефоне по центру экрана). */

/* биржа: монограмма перед названием */
.wl-ex, .tbl .sub.wl-ex { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bk.wl-bk.xs { display: inline-grid; width: 18px; height: 18px; border-radius: 6px; }
.bk.wl-bk.xs b { font-size: 7.5px; letter-spacing: 0; }
.bk.wl-bk.xs.l3 b { font-size: 6px; }
.chip .bk.wl-bk.xs { margin-left: -4px; }

/* не принимаем: адрес наш, но клиентам не даём */
.chip.wl-offc { background: var(--surface-3); color: var(--ink-2); }
.chip.wl-offc .ic { width: 12px; height: 12px; }
.wl-row.is-off .wl-netcell, .wl-row.is-off .wl-addr, .wl-card.is-off .wl-card-top > .wl-net, .wl-card.is-off .wl-card-addr { opacity: .55; }
.wl-card-st { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wl-card-top > .grow { min-width: 76px; }
.wl-c-st .chip.wl-offc { margin-left: 4px; }
.wl-wk { display: block; max-width: 180px; color: var(--ink-3); }
.wl-card .wl-wk { max-width: 100%; }

/* четыре правила статусов: два ряда по два */
@media (min-width: 861px) { .wl-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* окно правки */
.pop.wl-edit-pop { max-width: none; }
.pop.wl-edit-pop .wl-editbox { width: 340px; }
.modal:has(.wl-editbox) { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; }
.modal .wl-editbox { width: auto; max-width: none; }
.modal .wl-eacts { position: sticky; bottom: 0; margin: 12px -16px -16px; padding: 12px 16px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.wl-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); text-align: left; color: var(--ink); }
.wl-act b { display: block; font-weight: 600; }
.wl-act .t-xs { display: block; margin-top: 2px; line-height: 1.35; }
.wl-act.dis { opacity: .45; pointer-events: none; }
.wl-exin { display: flex; align-items: center; gap: 8px; }
.wl-exin .input { flex: 1; min-width: 0; }
.wl-exin .bk { width: 34px; height: 34px; border-radius: 11px; }
.wl-exin .bk b { font-size: 11px; }
.wl-exin [data-e-bk]:empty { display: none; }
/* Выбор людей кнопками (js/screens/staff-pick.js, владелец 08.10): «Чей кошелёк», «Кто работает», ответственный счёта.
   Кнопки переносятся строками: на телефоне ничего не уезжает вбок. */

.sp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sp-c { display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 100%; padding: 0 11px 0 5px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.sp-c > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-c:hover { border-color: var(--line-2); color: var(--ink); }
.sp-c[aria-pressed="true"] { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-ink); }
.sp-c .ava.sp-ava { width: 22px; height: 22px; font-size: 9px; }
.sp-in.input { height: 32px; width: 132px; flex: 1 1 120px; min-width: 0; max-width: 200px; border-radius: var(--r-pill); padding: 0 12px; font-size: var(--t-sm); }
/* поле с кнопками в формах «Счетов»: подпись сверху, не <label> (нажатие по подписи нажало бы первую кнопку) */
.sp-fld { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
/* «Доступы»: кто входит в пульт и что видит каждая роль. Все классы с префиксом ac-. Стили из концепта, без устройств и часов в пульте (их нет в API). */

/* ---------- герой: вход только через Telegram ---------- */
.ac-hero { display: flex; flex-direction: column; gap: 18px; }
.ac-tg { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--hero-accent); color: var(--hero-bg); }
.ac-tg .ic { width: 22px; height: 22px; }
.ac-hero-t { font: 500 38px/1.04 var(--f-display); letter-spacing: -.04em; }
.ac-steps { counter-reset: st; display: flex; flex-direction: column; gap: 12px; }
.ac-steps li { counter-increment: st; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.ac-steps li::before { content: counter(st); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); font: 600 12.5px/1 var(--f-ui); }
.ac-steps li:last-child::before { background: var(--hero-accent); color: var(--hero-bg); }
.ac-steps b { font-weight: 600; line-height: 1.3; }
.ac-steps span { font-size: var(--t-sm); color: var(--hero-ink-2); margin-top: 1px; }
.ac-hero-foot { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 22%, transparent); font-size: var(--t-sm); color: var(--hero-ink-2); line-height: 1.45; }
.ac-hero-foot .ic { color: var(--hero-accent); width: 17px; height: 17px; margin-top: 1px; }

/* ---------- состав ---------- */
.ac-team { display: flex; flex-direction: column; }
.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.ac-stats .mini-stat { padding: 0 18px; justify-content: space-between; }
.ac-stats .mini-stat:first-child { padding-left: 0; }
.ac-stats .mini-stat + .mini-stat { border-left: 1px solid var(--line); }
.ac-stats .v { font-size: 34px; }
.ac-stats .v.warn { color: var(--warn); }
.ac-sect { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.ac-live { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-live-p { display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); background: var(--surface-2); line-height: 1.2; }
.ac-live-p > span:last-child { display: flex; flex-direction: column; }
.ac-live-p b { font-weight: 500; font-size: var(--t-sm); }
button.ac-live-p { border: 0; font: inherit; line-height: 1.2; color: inherit; text-align: left; cursor: pointer; transition: background var(--dur-2) var(--ease); }
button.ac-live-p:hover { background: var(--surface-3); }
.ac-attn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; padding-top: 0; border-top: 1px solid var(--line); }
.ac-attn > .ac-sect { padding-top: 18px; align-self: start; }
.ac-roles-bar { height: 34px; }
.ac-roles-bar > i { border-radius: 10px; }
.ac-team .legend b { color: var(--ink); font-weight: 600; margin-left: 2px; }

/* ---------- люди ---------- */
.ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ac-tools { display: flex; align-items: center; gap: 10px; }
.ac-search { width: 300px; max-width: 100%; }
.ac-search .input { height: 40px; }
.ac-tabs { margin-bottom: 12px; }
.ac-cnt { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font-size: 10.5px; font-weight: 600; }
.seg button[aria-pressed="true"] .ac-cnt { background: var(--accent); color: var(--accent-ink); }
.ac-tbl td { height: 68px; }
.ac-tbl tr.is-off td { opacity: .62; }
.ac-tbl tr.is-off td.ac-c-act { opacity: 1; }
.ac-tbl tr.ac-me td, .ac-tbl tr.ac-me td.ac-c-act { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.ac-tbl tr.ac-me td:first-child { border-radius: 14px 0 0 14px; }
.ac-tbl tr.ac-me td:last-child { border-radius: 0 14px 14px 0; }
.ac-who { min-width: 0; }
.ac-who .name { font-weight: 500; }
.ac-nick { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-3); }
.ac-nick > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ac-id { font-size: var(--t-xs); }
.ac-quick { display: inline-flex; gap: 1px; opacity: 0; transition: opacity var(--dur-1); }
.ac-tbl tbody tr:hover .ac-quick, .ac-quick:focus-within { opacity: 1; }
@media (hover: none) { .ac-quick { opacity: 1; } }
.ac-q { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.ac-q:hover { background: var(--surface-3); color: var(--ink); }
.ac-q .ic { width: 13px; height: 13px; }
.ac-c-act { width: 1%; }
.ac-tbl td.ac-c-act, .ac-tbl th.ac-h-act { position: sticky; right: 0; z-index: 1; background: var(--surface); }
.ac-tbl th.ac-h-act { z-index: 3; background: var(--surface-2); }
.ac-tbl tbody tr:hover td.ac-c-act { background: var(--surface-2); }
.ac-btns { display: inline-flex; align-items: center; gap: 6px; }
.ac-rm { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 28%, transparent); background: transparent; }
.ac-rm:hover { background: var(--neg-soft); border-color: var(--neg); }
.ac-rm-t { display: none; }
.ac-self { display: inline-flex; align-items: flex-start; gap: 6px; text-align: left; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); }
.ac-self .ic { width: 13px; height: 13px; margin-top: 1px; }

/* ---------- матрица ролей ---------- */
.ac-mx { width: 100%; min-width: 520px; table-layout: fixed; font-size: var(--t-body); border-collapse: separate; border-spacing: 0; }
.ac-mx .ac-mx-c0 { width: 31%; }
.ac-mx th { height: 62px; padding: 0 8px; background: var(--surface-2); font-weight: 500; color: var(--ink-2); position: sticky; top: 0; z-index: 1; }
.ac-mx th:first-child { border-radius: 14px 0 0 14px; padding-left: 14px; text-align: left; }
.ac-mx th:last-child { border-radius: 0 14px 14px 0; }
.ac-mx td { height: 44px; padding: 0 8px; text-align: center; border-bottom: 1px solid var(--line); transition: background var(--dur-1); }
.ac-mx td.ac-mx-sec { text-align: left; padding-left: 14px; color: var(--ink); white-space: nowrap; }
.ac-mx td.ac-mx-sec .ic { color: var(--ink-3); }
.ac-mx tr.ac-mx-g td { height: 34px; padding: 12px 14px 0; text-align: left; border-bottom: 0; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ac-mx tbody tr:last-child td { border-bottom: 0; }
.ac-mx tbody tr:not(.ac-mx-g):hover td { background: var(--surface-2); }
.ac-mx[data-hc="1"] [data-hc="1"], .ac-mx[data-hc="2"] [data-hc="2"], .ac-mx[data-hc="3"] [data-hc="3"] { background: var(--accent-soft); }
.ac-mx-role { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 14px; color: var(--ink); font-weight: 500; white-space: nowrap; transition: background var(--dur-1); max-width: 100%; }
.ac-mx-role:hover { background: var(--surface); }
.ac-mx-rk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.ac-mx-role .ic { width: 15px; height: 15px; color: var(--ink-3); }
.ac-mx-n { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
/* значки: полностью, частично (полукруг), нет */
.ac-m { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.ac-m.f { background: var(--inverse); color: var(--accent); }
:root[data-theme="dark"] .ac-m.f { background: var(--accent); color: var(--accent-ink); }
.ac-m.f .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.ac-m.p { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%), repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 2px var(--ink); }
.ac-mp { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; vertical-align: middle; padding: 4px 0; cursor: help; }
.ac-why { font-size: 10.5px; line-height: 1.15; color: var(--ink-2); white-space: nowrap; }
.ac-m.n { width: 14px; height: 2px; border-radius: 2px; background: var(--ink-4); }
.ac-m.sm { width: 16px; height: 16px; }
.ac-m.sm.f .ic { width: 10px; height: 10px; }
.ac-m.n.sm { width: 12px; height: 2px; }
.ac-mxcard .card-head .legend { gap: 14px; }
.ac-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.ac-note .ic { width: 17px; height: 17px; color: var(--ink); margin-top: 1px; }
.ac-note b { color: var(--ink); font-weight: 600; }

/* ---------- добавить человека: обычная карточка, лаймовая только кнопка ---------- */
.ac-add { display: flex; flex-direction: column; gap: 10px; }
.ac-add-ic { width: 46px; height: 46px; border-radius: 15px; }
:root[data-theme="dark"] .ac-add-ic { background: var(--surface-3); color: var(--accent); }
.ac-add-t { font: 500 24px/1.1 var(--f-display); letter-spacing: -.03em; margin-top: 8px; }
.ac-add-s { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ac-add-btn { margin-top: 6px; }

/* ---------- последние входы ---------- */
.ac-logins .card-head { flex-wrap: nowrap; align-items: flex-start; }
.ac-logins .tl-item { grid-template-columns: 44px 22px minmax(0, 1fr); }
.ac-tl-t { font-weight: 500; line-height: 1.3; }
.ac-logins .tl-dot i { background: var(--pos-soft); color: var(--pos); }
.ac-rej .tl-dot i { background: var(--neg-soft); color: var(--neg); }
.ac-rej .ac-tl-t { color: var(--neg); }

/* ---------- всплывашка роли, окна ---------- */
.pop.ac-rpop { width: 320px; max-width: calc(100vw - 16px); }
.ac-ritem { height: auto; padding: 9px 10px; align-items: center; }
.ac-ric { width: 32px; height: 32px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.ac-ric .ic { width: 16px; height: 16px; }
.ac-ric.ink { background: var(--inverse); color: var(--accent); }
:root[data-theme="dark"] .ac-ric.ink { background: var(--accent); color: var(--accent-ink); }
.ac-ric.violet { background: var(--violet-soft); color: var(--violet); }
.ac-rk { display: block; color: var(--ink); font-weight: 600; }
.ac-rd { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; line-height: 1.35; margin-top: 1px; white-space: normal; }
.ac-big { width: 52px; height: 52px; border-radius: 17px; }
.ac-conseq { display: flex; flex-direction: column; gap: 10px; }
.ac-conseq li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.ac-conseq .ic { width: 16px; height: 16px; color: var(--ink-3); margin-top: 1px; }
.ac-ident { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.ac-err { font-size: var(--t-sm); color: var(--neg); }
.ac-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); line-height: 1.45; }
.ac-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ac-tbl td .sub.ac-idwarn { color: var(--warn); }
.ac-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ac-rcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid transparent; text-align: left; transition: border-color var(--dur-1), background var(--dur-1); }
.ac-rcard:hover { border-color: var(--line-2); }
.ac-rcard[disabled] { opacity: .45; cursor: not-allowed; }
.ac-rcard[disabled]:hover { border-color: transparent; }
.ac-rcard[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); box-shadow: var(--sh-1); }
.ac-rcard .ac-rk { font-size: var(--t-sm); margin-top: 2px; }
.ac-next { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--info-soft); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.ac-next .ic { width: 16px; height: 16px; color: var(--info); margin-top: 1px; }
.modal:has(.ac-addm) { width: min(520px, calc(100vw - 24px)); }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  .ac-hero-t { font-size: 34px; }
  .ac-tbl th, .ac-tbl td { padding: 0 8px; }
  .ac-tbl th:first-child, .ac-tbl td:first-child { padding-left: 12px; }
  .ac-quick { display: none; }
  .ac-tbl td .sub { display: block; white-space: normal; max-width: 150px; }
}
@media (max-width: 860px) {
  /* люди на планшете и телефоне: строка таблицы становится карточкой */
  .ac-people .tbl-wrap { overflow: visible; }
  .ac-tbl, .ac-tbl tbody { display: block; }
  .ac-tbl thead { display: none; }
  .ac-tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ac-tbl tbody tr:last-child { border-bottom: 0; }
  .ac-tbl tbody tr:hover { background: transparent; }
  .ac-tbl td { display: block; height: auto; padding: 0; border: 0; white-space: normal; background: transparent !important; border-radius: 0 !important; }
  .ac-tbl td:nth-child(2) { justify-self: end; }
  .ac-tbl td:nth-child(3) { padding-left: 48px; font-size: var(--t-sm); }
  .ac-tbl td:nth-child(4) { justify-self: end; font-size: var(--t-sm); text-align: right; }
  .ac-tbl td.ac-c-act { grid-column: 1 / -1; width: auto; text-align: left; }
  .ac-self { display: none; }
  .ac-tbl tr.ac-me { margin: 0 -12px; padding: 14px 12px; border-radius: 18px; border-bottom: 0; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
}
@media (max-width: 720px) {
  .ac-hero-t { font-size: 30px; }
  .ac-stats { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .ac-stats .mini-stat { padding: 0 12px; }
  .ac-stats .mini-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ac-stats .v { font-size: 28px; }
  .ac-attn { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ac-search, .ac-tools { width: 100%; }
  .ac-tabs .seg { width: 100%; }
  .ac-btns { display: grid; grid-template-columns: 1fr auto auto; width: 100%; }
  .ac-btns > .btn:first-child { width: 100%; }
  .ac-btns .btn.sm.icon-only.ac-rm { width: auto; padding: 0 13px; }
  .ac-rm-t { display: inline; }
  .ac-why { font-size: 9.5px; white-space: normal; text-align: center; max-width: 64px; }
  .ac-mx { min-width: 0; }
  .ac-mx .ac-mx-c0 { width: 37%; }
  .ac-mx th { height: 54px; }
  .ac-mx-role { padding: 4px 2px; }
  .ac-mx-rk { flex-direction: column; gap: 3px; font-size: var(--t-xs); }
  .ac-mx-n { display: none; }
  .ac-mx td, .ac-mx th { padding: 0 4px; }
  .ac-mx td.ac-mx-sec, .ac-mx th:first-child { padding-left: 10px; }
  .ac-mx td.ac-mx-sec { font-size: var(--t-sm); }
  .ac-mxcard .card-head .legend { font-size: var(--t-xs); }
  .ac-rgrid { grid-template-columns: 1fr; }
  .ac-rcard { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; }
  .ac-rcard .ac-ric { grid-row: span 2; }
  .ac-rcard .ac-rk { margin: 0; }
}

/* уведомления PWA: одна строка над экраном (кто включил и на скольких устройствах) */
.ac-push { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap); padding: 12px 16px; border-radius: var(--r-md); background: var(--pos-soft); color: var(--ink); font-size: var(--t-sm); line-height: 1.45; }
.ac-push > .ic { flex: none; color: var(--pos); }
.ac-push.off { background: var(--warn-soft); }
.ac-push.off > .ic { color: var(--warn); }
/* личная галочка человека в окне «Изменить» (владелец 19.10: секунды во времени сообщений) */
.ac-sw-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; line-height: 1.35; }
.ac-sw-row input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.ac-sw-row .t-xs { display: block; margin-top: 2px; }
.ac-sw-row.off { opacity: .65; cursor: default; }
/* «Доступы»: галочки прав ролей в матрице (владелец 09.10, js/screens/roles-access.js). Классы с префиксом ac-pk. Цвета только токенами. */
.ac-pk { position: relative; border: 2px solid var(--ink-4); background: transparent; color: transparent; cursor: pointer; padding: 0; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); }
.ac-pk::before { content: ""; position: absolute; inset: -10px; }
.ac-pk:hover:not(.f) { border-color: var(--ink-2); }
.ac-pk:active { transform: scale(.92); }
.ac-pk.f { border-color: transparent; }
.ac-pk:disabled { opacity: .5; cursor: progress; }
.ac-pk:focus-visible { box-shadow: var(--focus); }
.ac-pk-note { margin-top: 12px; }
.ac-mx td.ac-pk-lab { white-space: normal; line-height: 1.2; }
.ac-pk-lab .row > span { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .ac-pk { transition: none; } .ac-pk:active { transform: none; } }
/* «Доступы»: карточка «Прямой доступ к серверу» (владелец 10.10, js/screens/access-edge.js). Все классы с префиксом ed-, цвета только токенами. */
.ed-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.ed-main { display: grid; gap: 14px; min-width: 0; }
.ed-text { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ed-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-st { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.ed-st .ic { width: 15px; height: 15px; margin-top: 1px; flex: none; color: var(--ink-3); }
.ed-st.ok .ic { color: var(--pos); }
.ed-st.bad { color: var(--ink); }
.ed-st.bad .ic { color: var(--neg); }
.ed-st.warn .ic, .ed-st.wait .ic { color: var(--warn); }
.ed-side { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.ed-obs-t { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.ed-ips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ed-ips li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); min-width: 0; }
.ed-ips li:first-child { border-top: 0; }
.ed-ip { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ed-ips .num { color: var(--ink-2); flex: none; }
.ed-gives { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); line-height: 1.5; }
.ed-gives p { margin: 0; max-width: 80ch; }
@media (max-width: 720px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ed-act .btn { width: 100%; }
}
/* «Контакты»: контакты рабочего аккаунта, пометки в именах, удаление лишних (владелец 07.10). Классы с префиксом cn-. */

/* ---------- герой: сколько контактов и лимит ---------- */
.cn-hero { display: flex; flex-direction: column; gap: 16px; }
.cn-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--hero-accent); color: var(--hero-bg); }
.cn-ic .ic { width: 22px; height: 22px; }
.cn-big { display: flex; align-items: baseline; gap: 10px; }
.cn-big .unit, .cn-del-n .unit { font-size: 16px; font-weight: 500; opacity: .75; }
.cn-big .num { font: 500 64px/1 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cn-hero-t { font-size: var(--t-md, 15px); font-weight: 500; line-height: 1.4; }
.cn-hero-foot { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 22%, transparent); font-size: var(--t-sm); color: var(--hero-ink-2); line-height: 1.45; }
.cn-hero-foot .ic { color: var(--hero-accent); width: 16px; height: 16px; margin-top: 2px; flex: none; }
@media (min-width: 1025px) { .cn-hero { align-self: start; } } /* рядом с высокой «Что в контактах» зелёная карточка не тянется: было около 270 px пустоты между полосой и подписью (аудит 19.10, п. 17) */

/* ---------- категории ---------- */
.cn-cats { display: flex; flex-direction: column; }
.cn-cat-list { display: flex; flex-direction: column; gap: 4px; }
.cn-cat { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(50px, 1.4fr) 56px minmax(86px, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cn-cat:last-child { border-bottom: 0; }
.cn-cat-k { font-weight: 500; line-height: 1.25; }
.cn-cat-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cn-cat-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--c-1); }
.cn-cat-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cn-cat-d { text-align: right; white-space: nowrap; }
.cn-cat.is-zero { opacity: .55; }
.cn-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.cn-note .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--ink-3); }

/* ---------- удаление ---------- */
.cn-del { display: flex; flex-direction: column; gap: 16px; }
.cn-del-top { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cn-del-n { display: flex; align-items: baseline; gap: 8px; color: var(--neg); }
.cn-del-n .num { font: 500 48px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cn-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cn-sample .chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-del-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cn-del-act .btn[disabled] { opacity: .45; cursor: not-allowed; }
.cn-prog { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.cn-prog.is-act { border-color: var(--line-2); }
.cn-prog .bar > i { background: var(--neg); }
.cn-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--warn); font-size: var(--t-sm); }
.cn-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cn-bad { color: var(--neg); margin-top: 6px; }

/* ---------- окно подтверждения ---------- */
.cn-modal { display: flex; flex-direction: column; }
.cn-big-ic { width: 52px; height: 52px; border-radius: 17px; }
.cn-conseq { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.cn-conseq li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.cn-conseq .ic { width: 17px; height: 17px; color: var(--ink-3); margin-top: 1px; }
.cn-err { color: var(--neg); font-size: var(--t-sm); }

/* ---------- список ---------- */
.cn-list-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.cn-search { min-width: 260px; flex: 1; max-width: 360px; }
.cn-tabs { margin-bottom: 8px; }
.cn-cnt { margin-left: 4px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cn-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cn-more { display: flex; justify-content: center; padding: 14px 0 2px; }

@media (max-width: 720px) {
  .cn-big .num { font-size: 48px; }
  .cn-cat { grid-template-columns: minmax(0, 1fr) 56px; }
  .cn-cat-bar, .cn-cat-d { display: none; }
  .cn-del-n .num { font-size: 40px; }
  .cn-search { min-width: 0; max-width: none; }
  .cn-del-top .grow { flex: 1 1 100%; }  /* иначе описание сжимается в узкую колонку рядом с числом */
  .cn-del-act .btn { white-space: normal; width: 100%; justify-content: center; text-align: left; }
}
/* Пульт 2.0: значки наших аккаунтов логотипами аккаунтов (js/acc-badge.js, владелец 08.10). Круглые, 16-24 px,
   картинка 128 px: на экранах retina не размыта. Нет фото: прежние значки-буквы своих экранов (.ch-svc, .now-svc), в стопке круглая буква .acb-l. */
.acb { --s: 18px; flex: none; display: inline-block; vertical-align: middle; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-2); line-height: 0; }
/* свои логотипы (img/acc, 128 px) уже кадрированы под круг: картинка целиком, без увеличения */
.acb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* «Чаты»: вкладки аккаунтов и значок в углу аватарки клиента (на месте прежней буквы .ch-svc) */
.ch-tabs button .acb { --s: 24px; margin: 0 -2px 0 -7px; }
.ch-ava > .acb { --s: 20px; position: absolute; right: -4px; bottom: -3px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); }
.ch-it.on .ch-ava > .acb { box-shadow: 0 0 0 2px var(--inverse); }
/* «Сейчас» и «Клиенты» */
.now-lead-top .acb, .cl-who-sub .acb { --s: 16px; }
.seg .acb { --s: 18px; margin-right: 6px; }
/* меню аккаунтов на телефоне («Чаты», chats-12.js): значок перед названием */
.menu-item .acb { --s: 20px; margin: 0; }
/* стопка внахлёст, как аватарки в Instagram (AccBadge.stack, владелец 09.10). Вырез: кольцо цвета фона места (--acs-ring)
   поверх соседа, около 10% стороны. Буква без логотипа в стопке круглая (.acb-l или класс места, .cd-acl), как логотипы.
   .acs > [class] весит как «.место .acb» и стоит ниже: размер в стопке задаёт стопка. */
.acs { --acs-s: 18px; --acs-ring: var(--surface); flex: none; display: inline-flex; align-items: center; vertical-align: middle; isolation: isolate; }
.acs > [class] { --s: var(--acs-s); box-shadow: 0 0 0 max(1.5px, calc(var(--s) * .1)) var(--acs-ring); }
.acb-l { --s: 18px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font: 600 calc(var(--s) * .55)/1 var(--f-ui); font-style: normal; }
/* ряд: следующий заходит под предыдущий на треть, первый (главный) сверху */
.acs-row > * + * { margin-left: calc(var(--acs-s) * -.3); }
.acs-row > :nth-child(1) { z-index: 5; } .acs-row > :nth-child(2) { z-index: 4; } .acs-row > :nth-child(3) { z-index: 3; } .acs-row > :nth-child(4) { z-index: 2; }
/* диагональ: квадрат --acs-s, значки по 70% стороны, первый слева вверху, второй справа внизу поверх */
.acs-diag { position: relative; width: var(--acs-s); height: var(--acs-s); }
.acs-diag > [class] { --s: calc(var(--acs-s) * .7); position: absolute; left: 0; top: 0; }
.acs-diag > :last-child { left: auto; top: auto; right: 0; bottom: 0; z-index: 1; }
/* Пульт 2.0, раздел «Чаты»: раскладка как в Telegram Desktop (слева диалоги, справа переписка и поле ответа).
   Без шапки экрана: вкладки аккаунтов сразу под верхней строкой, раздел занимает высоту окна, список и диалог
   прокручиваются сами. Префикс ch-, пузыри сообщений из dialog.css (cd-). Только токены. */
.page:has(> .screen > .ch) { padding-bottom: 0; }
.ch { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh / var(--zoom, 1) - var(--top-h) - var(--frame) * 2 - var(--gap) - 6px - var(--la-h, 0px)); min-height: 480px; }
.ch-top { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.ch-tabs-wrap { flex: 1; min-width: 0; }
.ch-tabs button { height: 36px; padding: 0 14px; font-size: var(--t-sm); }
.ch-tabs .badge { margin-left: 2px; }
.ch-only-wrap { flex: none; }
.ch-segn { min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: center; }
.ch-box { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 344px) minmax(0, 1fr); }

/* ---------- список ---------- */
.ch-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.ch-tools { padding: 10px 10px 9px; border-bottom: 1px solid var(--line); }
.ch-search .input { height: 38px; }
.ch-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.ch-list .empty { padding: 40px 12px; }
.ch-it { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px; border-radius: var(--r-md); text-align: left; color: var(--ink); transition: background var(--dur-1); }
.ch-it:hover { background: var(--surface-2); }
.ch-it.on { background: var(--inverse); color: var(--inverse-ink); }
.ch-ava { position: relative; flex: none; }
.ch-ava .ava { width: 46px; height: 46px; font-size: 15px; }
.ch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-svc { position: absolute; right: -4px; bottom: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 7px; background: var(--surface); color: var(--ink-2); font: 600 10px/17px var(--f-ui); text-align: center; border: 1px solid var(--line-2); }
.ch-it.on .ch-svc { background: var(--accent); color: var(--accent-ink); border-color: var(--inverse); }
.ch-it-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.ch-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-nm { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-body); }
.ch-nm .chip { vertical-align: 1px; }
.ch-tm { flex: none; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-pv { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--ink-2); }
.ch-you { color: var(--ink-3); }
.ch-typing { color: var(--accent-text); font-style: italic; }
.ch-it.on .ch-tm, .ch-it.on .ch-pv, .ch-it.on .ch-you { color: var(--inverse-ink-2); }
.ch-it.on .ch-typing { color: var(--accent); }
.ch-it .badge { flex: none; background: var(--ink-3); color: var(--surface); }
.ch-it .badge.warn { background: var(--warn); }
.ch-it .badge.neg { background: var(--neg); }
.ch-wt { align-self: flex-start; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-wt.ok { background: var(--accent-soft); color: var(--accent-text); }
.ch-wt.warn { background: var(--warn-soft); color: var(--warn); }
.ch-wt.neg { background: var(--neg-soft); color: var(--neg); }
.ch-it.on .ch-wt.ok { background: var(--accent); color: var(--accent-ink); }
.ch-more-wrap { display: flex; justify-content: center; padding: 10px; min-height: 52px; align-items: center; }
.ch-end { text-align: center; padding: 12px 0 14px; }
.ch-row3 { gap: 6px; }
/* скелет до первого ответа (экран без общего скелета ядра: тот рисует заголовок) */
.ch-sk-tabs { display: block; width: min(420px, 100%); height: 36px; border-radius: var(--r-pill); }
.ch-sk-ava { flex: none; width: 46px; height: 46px; border-radius: 50%; }
.ch-sk-l, .ch-sk-s { display: block; height: 12px; border-radius: 6px; }
.ch-sk-l { width: 62%; margin-top: 6px; }
.ch-sk-s { width: 88%; margin-top: 8px; }
.ch-rd { flex: none; display: inline-grid; place-items: center; margin-right: -4px; color: var(--ink-3); }
.ch-rd .ic { width: 15px; height: 15px; }
.ch-rd.ok { color: var(--info); }
.ch-it.on .ch-rd { color: var(--inverse-ink-2); }
.ch-it.on .ch-rd.ok { color: var(--accent); }
.ch-seen { display: inline-grid; place-items: center; color: var(--ink-3); }
.ch-seen .ic { width: 14px; height: 14px; }
.ch-it.on .ch-seen { color: var(--inverse-ink-2); }

/* ---------- поиск по всей переписке (chats-3.js): вместо списка, пока в поле от 2 знаков ---------- */
.ch-found { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; transition: opacity var(--dur-1); }
.ch[data-find] .ch-list { display: none; }
.ch[data-find] .ch-found { display: block; }
.ch[data-find] .ch-only-wrap { opacity: .4; pointer-events: none; } /* «Все / Ждут ответа» на поиск не влияет */
.ch-found.busy { opacity: .55; }
.ch-found .empty { padding: 36px 12px 16px; }
.ch-fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ch-fh ~ .ch-fh { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ch-fn { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-weight: 500; }
.ch-hl { background: var(--accent-soft); color: inherit; border-radius: 4px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ch-it.on .ch-hl { background: var(--accent); color: var(--accent-ink); }
.ch-fx { font-size: var(--t-sm); line-height: 1.38; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ch-found .ch-it.off { cursor: default; }
.ch-found .ch-it.off:hover { background: transparent; }
.ch-found .ch-nm .chip { vertical-align: 1px; }
.ch-nmw { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } /* имя с плашкой (роль, скам): длинное имя сокращается, плашка остаётся */
.ch-nmw .ch-nm { flex: 0 1 auto; }
.ch-nmw .chip { flex: none; }
.ch-fnote { padding: 12px 10px 10px; line-height: 1.45; }
.ch-jump { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.ch-jump > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ch-jump .ic { width: 15px; height: 15px; flex: none; }
.ch-from { color: var(--ink-2); font-weight: 600; } /* автор в архиве группы */
.ch-arc-sk { height: 240px; margin: 16px; }

/* ---------- диалог ---------- */
.ch-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-pick { flex: 1; display: grid; place-items: center; background: var(--surface-2); padding: 20px; }
.ch-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ch-head > .ava { width: 40px; height: 40px; flex: none; }
.ch-back { display: none; }
.ch-hmain { flex: 1; min-width: 0; }
.ch-hn { font: 500 17px/1.2 var(--f-display); letter-spacing: -.01em; }
.ch-hr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-hr .bot-chip { flex: none; margin-left: 0; }
@media (max-width: 860px) { .ch-hr .bot-chip:not(.bot-btn) { font-size: 0; gap: 0; padding: 0 6px; } } /* узкая шапка: у тихой метки бота только значок, текст в подсказке; у выключенного (кнопка) текст остаётся */
.ch-hs, .ch-pv, .ch-fx { font-family: "Onest", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif; } /* реакция «ответили ❤️» и эмодзи в тексте цветные */
.ch-hs { margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-hs .ch-wt { height: 18px; padding: 0 7px; vertical-align: 1px; }
.ch-hact { display: flex; gap: 6px; flex: none; }
@media (max-width: 1320px) { .ch-mute > span { display: none; } }
.ch-scroll { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface-2); scrollbar-width: thin; }
.ch-msgs.cd-chat { background: transparent; border-radius: 0; padding: 14px 18px 16px; min-height: 100%; justify-content: flex-end; }
/* «вниз» посередине снизу, как в Telegram: видна, когда ушли к старым сообщениям; зелёное число: пришло, пока читали выше (chats-2.js) */
.ch-tobot { position: absolute; left: 50%; bottom: 80px; z-index: 5; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2), 0 0 0 1px var(--line-2); }
.ch-tobot[hidden] { display: none; }
.ch-tobot .ic { width: 18px; height: 18px; }
.ch-tobot b { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 600 11px/20px var(--f-ui); text-align: center; font-variant-numeric: tabular-nums; }
.ch-tobot b[hidden] { display: none; }
.ch-none { text-align: center; padding: 30px 0; }
.ch-outbox { display: flex; flex-direction: column; gap: 10px; }
.ch-outbox:empty { display: none; }
.ch-ob .cd-bub { border: 1px dashed var(--line-2); }
.ch-ob.bad .cd-bub { border-color: var(--neg); background: var(--neg-soft); }
.ch-pult { color: var(--accent-text); }
.ch-st { display: inline-flex; align-items: center; gap: 4px; }
.ch-st .ic { width: 12px; height: 12px; }
.ch-st.neg { color: var(--neg); }
.ch-redo { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: var(--ink-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ch-redo .ic { width: 12px; height: 12px; }

/* ---------- поле ответа ---------- */
/* как в Telegram Web A (владелец 18.10): строка 40 px, круглая кнопка 40 px, зазор 4 px; пилюля, варианты кнопок и разворот: compose.css */
.ch-foot { border-top: 1px solid var(--line); padding: 8px 10px; }
.ch-compose { display: flex; align-items: flex-end; gap: 6px; }
.ch-ta { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; resize: none; padding: calc((40px - 1.3125em) / 2) 6px calc((40px - 1.3125em) / 2) 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.3125; outline: none; }
.ch-ta:disabled { opacity: .6; }
.ch-send { flex: none; height: 36px; }
.ch-compose.off .ch-send { width: 36px; padding: 0; justify-content: center; color: var(--ink-3); }
.ch-lockbar { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; font-size: var(--t-sm); color: var(--accent-text); }
.ch-lockbar.off { color: var(--ink-2); }
.ch-lockbar .ic { width: 15px; height: 15px; }
.ch-note { display: flex; align-items: center; gap: 12px; }
.ch-note .ico-tile { width: 38px; height: 38px; border-radius: 12px; flex: none; }

@media (max-width: 860px) {
  .ch-box { grid-template-columns: minmax(0, 1fr); }
  .ch[data-pane="chat"] .ch-side, .ch[data-pane="list"] .ch-main { display: none; }
  .ch-side { border-right: 0; }
  .ch-back { display: inline-grid; }
  .ch-msgs.cd-chat { padding: 12px 10px 14px; }
  .ch-head { padding: 10px 10px 10px 6px; gap: 8px; }
}
@media (max-width: 720px) {
  /* телефон: снизу плавающий док (место под него), открытый чат забирает экран целиком (без вкладок) */
  .ch { height: calc(100dvh / var(--zoom, 1) - var(--top-h) - var(--frame) * 2 - var(--gap) - 2px - 84px - var(--la-h, 0px)); min-height: 360px; gap: 8px; }
  .ch-top { flex-wrap: wrap; gap: 8px; }
  .ch-tabs-wrap { flex: 1 1 100%; }
  .ch[data-pane="chat"] .ch-top { display: none; }
  .ch-foot { padding: 8px; }
  .ch-note { flex-wrap: wrap; }
  .ch-note > .grow { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .ch-note > .btn { flex: 1 1 100%; justify-content: center; }
}

/* последний комментарий клиента в шапке диалога (client-notes.js); плашки у имени: notes.css */
.ch-head { flex-wrap: wrap; }
.ch-hm { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.ch-hm .chip { flex: none; }
.ch-hnote { flex: 1 1 150px; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; text-align: left; font-size: var(--t-xs); color: var(--ink-2); }
.ch-hnote:hover { color: var(--ink); }
.ch-hnote .ic { width: 13px; height: 13px; flex: none; }
.ch-hnote span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .ch-hact { gap: 2px; } .ch-hact .btn.sm:not(.icon-only) { padding: 0 9px; } } /* телефон: четыре кнопки шапки, имени остаётся место */
/* Пульт 2.0, «Чаты» (часть 2): фото, файлы и ответ цитатой (chats-5.js). Только токены. */
.ch-scroll { overflow-x: hidden; } /* свайп «ответить» сдвигает строку: горизонтальной прокрутки он давать не должен */

/* «Ответить» в углу пузыря сообщения клиента: при наведении и при фокусе с клавиатуры; на телефоне свайп и долгое нажатие */
.ch-msgs .cd-bub { position: relative; }
.ch-rp { position: absolute; top: -13px; right: 8px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); opacity: 0; transition: opacity var(--dur-2); }
.ch-rp .ic { width: 14px; height: 14px; }
.ch-rp:hover { color: var(--ink); background: var(--surface-3); }
.cd-msg:hover .ch-rp, .ch-rp:focus-visible { opacity: 1; }
@media (hover: none) { .ch-rp { display: none; } }
.ch-msgs .cd-msg.in { position: relative; touch-action: pan-y; }
.ch-swcue { position: absolute; left: -44px; top: 50%; margin-top: -15px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); opacity: .7; }
.ch-swcue .ic { width: 15px; height: 15px; }
.cd-msg.go .ch-swcue { background: var(--accent); color: var(--accent-ink); opacity: 1; }

/* полоса над полем ответа: на что отвечаем и что прикреплено */
.ch-ctx { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.ch-ctx[hidden] { display: none; }
.ch-ctx.busy { opacity: .55; pointer-events: none; }
.ch-pv { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ch-pq { border-left: 3px solid var(--accent); border-radius: 6px 14px 14px 6px; }
.ch-pq-i { flex: none; display: grid; color: var(--accent-text); }
.ch-pq-i .ic { width: 16px; height: 16px; }
.ch-pq-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; font-size: var(--t-sm); line-height: 1.3; }
.ch-pq-b b { color: var(--accent-text); font-weight: 600; }
.ch-pq-b span { color: var(--ink-2); }
.ch-pf { padding-left: 6px; }
.ch-pf-t { flex: none; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--surface-3); }
.ch-pf-b { flex: 1; min-width: 0; font-size: var(--t-sm); line-height: 1.35; }
.ch-cnt { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-cnt.neg { color: var(--neg); font-weight: 600; }
.ch-spin .ic { animation: spin 1s linear infinite; }
.ch-attach { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; }
.ch-attach .ic { width: 24px; height: 24px; }

/* файл тащат на диалог */
.ch-main.drop::after { content: "Отпустите, чтобы прикрепить к ответу"; position: absolute; inset: 8px; z-index: 6; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); font-weight: 600; pointer-events: none; }

/* вложение в очереди отправки */
.ch-ob-f { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--t-sm); }
.ch-ob-f .ic { width: 15px; height: 15px; flex: none; }
.ch-ob-f .faint { flex: none; }
/* Пульт 2.0, «Чаты» (часть 3): контекстное меню сообщения, «⋯» в пузыре, закреплённое, выбор нескольких, изменение
   (js/screens/chats-6.js, владелец 06.10). Только токены, обе темы; меню поверх на базе .pop и .menu-item из components.css. */
.ch-mb { position: absolute; top: -13px; right: 8px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); opacity: 0; transition: opacity var(--dur-2); }
.ch-mb .ic { width: 14px; height: 14px; }
.ch-mb:hover { color: var(--ink); background: var(--surface-3); }
.cd-msg:hover .ch-mb, .ch-mb:focus-visible { opacity: 1; }
.ch-mb ~ .ch-rp { right: 40px; }
@media (hover: none) and (pointer: coarse) { .ch-mb { display: none; } } /* телефон: долгое нажатие */
.ch-msgs .cd-msg { -webkit-touch-callout: none; } /* долгое нажатие открывает наше меню, а не системное */

.cm { min-width: 232px; max-width: 300px; padding: 6px; }
.cm:focus { outline: none; }
.cm .menu-item { height: 40px; }
.cm .menu-item .ic { width: 17px; height: 17px; flex: none; }
.cm .menu-item.neg { color: var(--neg); }
.cm .menu-item.neg:hover { background: var(--neg-soft); color: var(--neg); }
.cm .menu-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cm .menu-item[aria-disabled="true"]:hover { background: transparent; color: var(--ink-2); }
.cm-hint { margin: 2px 4px 2px; padding: 6px 8px 4px; border-top: 1px solid var(--line); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.cm-del-q { padding: 8px 12px; border-left: 3px solid var(--neg); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
/* телефон: лист снизу на всю ширину, под ним затемнение, пункты крупнее */
@media (max-width: 720px) {
  .cm { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; max-width: none; border-radius: 22px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); animation: slide-up var(--dur-3) var(--ease) both; }
  .cm .menu-item { height: 48px; font-size: 15px; }
  .cm-scrim { z-index: 69; }
}
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* закреплённое под шапкой (владелец 09.10: одна тонкая строка, сверху не отъедать место): булавка, «Закреплено», текст в одну строку, «1/3»; нажатие ведёт к сообщению.
   Высота 32 px, на телефоне 30 px */
.ch-pinw:empty { display: none; }
.ch-pinrow { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.ch-pinbar { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; text-align: left; font-size: var(--t-sm); line-height: 1; }
.ch-pinbar > .ic { width: 14px; height: 14px; flex: none; color: var(--accent-text); }
.ch-pinbar b { flex: none; color: var(--accent-text); font-weight: 600; }
.ch-pinbar .ellipsis { flex: 1; color: var(--ink-2); }
.ch-pinbar-n { flex: none; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ch-pinbar:hover { background: var(--surface-2); }
.ch-pinrow .icon-btn { flex: none; }
@media (max-width: 720px) { .ch-pinrow { height: 30px; } }

/* изменение сообщения: полоса над полем ответа (на базе .ch-pv) */
.ch-pe .ch-pq-b b { color: var(--warn); }

/* выбрать несколько: кружок слева у каждого сообщения, сверху полоса с числом и «Скопировать» */
.ch-selbar { position: absolute; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-1); }
.ch-selt { flex: 1; font-weight: 600; white-space: nowrap; }
/* «Переслать» и «Удалить» (chats-18.js, владелец 08.10): серые не пропадают, нажатие говорит причину; на телефоне одни значки */
.ch-selbar .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ch-selbar .btn.neg { color: var(--neg); }
@media (max-width: 720px) { .ch-selbar { gap: 6px; padding: 8px 10px; } .ch-selbar .btn.sm { height: 40px; min-width: 40px; padding: 0 11px; } }
.ch-sel .cd-msg { position: relative; align-self: stretch; max-width: none; padding-left: 36px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ch-sel .cd-msg::before { content: ""; position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.ch-sel .cd-msg.sel::before { background: var(--accent); border-color: var(--accent); }
.ch-sel .cd-msg.sel::after { content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ch-sel .cd-msg.sel .cd-bub { box-shadow: 0 0 0 2px var(--accent); }
.ch-sel .ch-mb, .ch-sel .ch-rp { display: none; }
/* «Чаты»: поиск по смыслу (волна 46, js/screens/chats-meaning.js). Чипы годов над результатами поиска и блок «Похоже по смыслу» под словами. Строки блока те же .ch-it .ch-fm, что у
   найденных сообщений, поэтому наведение, фокус и обе темы общие; здесь только чипы, отступы заметок и фрагмент подлиннее (до четырёх строк, у сообщений две). Только токены. */
.cm-years { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 8px; }
.cm-years .chip.btnish { cursor: pointer; }
.cm-years .chip.btnish[aria-pressed="true"] { cursor: default; }
.cm-it .ch-fx { -webkit-line-clamp: 4; white-space: pre-line; }  /* реплики фрагмента с новой строки */
.ch-fnote.cm-hint { padding: 0 10px 6px; text-wrap: pretty; }
.ch-fnote.cm-learn { padding: 10px 10px 4px; text-wrap: pretty; }
@media (max-width: 720px) {
  .cm-years { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .cm-years .chip { flex: none; }
  .cm-years::-webkit-scrollbar { display: none; }
}
/* Пульт 2.0, «Чаты» (часть 4): защита от ошибки при отправке, цвет аккаунта, счётчики удалённого и правок, ссылки в тексте
   (js/screens/chats-7.js и dialog-5.js, владелец 06.10, вечер; 07.10 «снять все», ник и ID; 08.10 вопрос «снять?» и карандаш в сегменте,
   js/screens/chats-20.js). Только токены, обе темы; цвет аккаунта приходит с сервера как
   --acc-rgb (r g b) и --acc-ink, фон полутоном 8-14% (читается в светлой и тёмной темах). */

/* подпись автора (чужое из пульта) в нижней строке: мелко и бледно; ссылки и @ники в тексте */
.cd-au { color: var(--ink-3); font-weight: 400; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-lnk, .cd-ref { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.cd-ref.un { text-decoration-style: dotted; }
.cd-lnk:hover, .cd-ref:hover { text-decoration-thickness: 2px; }
.cd-refmenu { position: fixed; z-index: 70; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--glass-line); border-radius: 14px; box-shadow: var(--sh-pop); animation: pop-fade var(--dur-2) var(--ease) both; }
.cd-refmenu > * { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-weight: 500; text-align: left; }
.cd-refmenu > *:hover { background: var(--surface-2); color: var(--ink); }
.cd-refmenu .ic { width: 16px; height: 16px; }
.cd-rd { cursor: help; }

/* красное «-N» (удалил клиент) и жёлтое число правок: у имени в шапке и в строке списка */
.ch-chg { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: #fff; background: var(--neg); }
.ch-chg.warn { background: var(--warn); color: var(--accent-ink); }
button.ch-chg:hover { filter: brightness(1.08); }
.ch-chgs { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.ch-chg-x { flex: none; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: 500 11px/1 var(--f-ui); white-space: nowrap; }
.ch-chg-x:hover { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.ch-chg-x:disabled { opacity: .5; }
/* «снять все» спрашивает на том же месте (chats-20.js, владелец 08.10): «снять?» и две маленькие кнопки «да» и «нет», та же высота 20 px;
   нажимаемая зона у кнопок выше вида (до 40 px), чтобы попасть пальцем */
.ch-ack-q { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 6px; cursor: default; }
.ch-ack-q:hover { background: var(--surface-3); box-shadow: none; color: var(--ink-2); }
.ch-ack-t { padding-right: 2px; }
.ch-ack-b { position: relative; flex: none; height: 16px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: inherit; box-shadow: inset 0 0 0 1px var(--line-2); }
.ch-ack-b.yes { background: var(--inverse); color: var(--inverse-ink); box-shadow: none; }
.ch-ack-b::after { content: ""; position: absolute; inset: -12px -2px; }
.ch-ack-b:disabled { opacity: .5; }
/* карандаш (правки и удаления) третьей кнопкой сегмента «Все / Ждут ответа» */
.ch-only-wrap .seg button.ch-chg-seg { padding: 0 9px; gap: 5px; }
.ch-chg-seg .ic { width: 15px; height: 15px; }
/* @ник в шапке: по нажатию Telegram ID и обратно, рядом «скопировать» */
.ch-nickw { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.ch-nick { color: inherit; font: inherit; padding: 0; background: none; border: 0; }
button.ch-nick { cursor: pointer; border-bottom: 1px dotted var(--ink-3); }
button.ch-nick:hover { color: var(--ink); }
.ch-nickw .copy { width: 20px; height: 20px; }
.ch-nickw .copy .ic { width: 12px; height: 12px; }
.cd-msg.cs-flash .cd-bub { animation: cs-flash 1.6s var(--ease); }
@keyframes cs-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--neg); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* вопрос перед отправкой: аккаунт и текст, вставленный дважды */
.ch-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-sm); color: var(--ink); }
.ch-ask > .ic { width: 18px; height: 18px; flex: none; color: var(--warn); }
.ch-ask-t { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.ch-ask-b { display: flex; gap: 8px; flex: none; }
.ch-ask-b .btn { height: 34px; }
.ch-an { display: inline-block; padding: 0 7px; border-radius: 7px; font-weight: 600; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.ch-an[style] { background: rgb(var(--an) / .18); box-shadow: inset 0 0 0 1px rgb(var(--an) / .55); }

/* цвет аккаунта: шапка чата, кнопка отправки, мои сообщения (полутон); включает js, у «Деньги Exchange» цвета нет */
.ch-main[style*="--acc-rgb"].t-head .ch-head { background: rgb(var(--acc-rgb) / .11); box-shadow: inset 4px 0 0 rgb(var(--acc-rgb) / .9); }
.ch-main[style*="--acc-rgb"].t-send .ch-send:not(.soft) { background: rgb(var(--acc-rgb)); color: var(--acc-ink); }
.ch-main[style*="--acc-rgb"].t-mine .cd-msg.out .cd-bub { background: linear-gradient(rgb(var(--acc-rgb) / .12), rgb(var(--acc-rgb) / .12)), var(--surface); border-color: rgb(var(--acc-rgb) / .35); }
:root[data-theme="dark"] .ch-main[style*="--acc-rgb"].t-head .ch-head { background: rgb(var(--acc-rgb) / .14); }
:root[data-theme="dark"] .ch-main[style*="--acc-rgb"].t-mine .cd-msg.out .cd-bub { background: linear-gradient(rgb(var(--acc-rgb) / .14), rgb(var(--acc-rgb) / .14)), var(--surface-3); border-color: rgb(var(--acc-rgb) / .4); }

/* настройка «Цвет аккаунта» */
.ch-set { flex: none; }
.ch-setp { min-width: 250px; }
.ch-setp .t-xs { padding: 4px 8px 6px; }
.ch-setp .menu-item { height: 40px; }
.ch-setp .menu-item .ic { width: 16px; height: 16px; flex: none; }
.ch-setp .menu-item[aria-checked="true"] { color: var(--ink); }
.ch-setp .menu-item .ck { margin-left: auto; opacity: 0; }
.ch-setp .menu-item[aria-checked="true"] .ck { opacity: 1; color: var(--accent-text); }
@media (max-width: 720px) {
  .ch-ask-b { flex: 1 1 100%; }
  .ch-ask-b .btn { flex: 1; justify-content: center; height: 40px; }
  .ch-chg { height: 18px; min-width: 20px; }
  .ch-only-wrap .seg button.ch-chg-seg { min-width: 40px; justify-content: center; }
}
/* Пульт 2.0, «Чаты» (часть 5): реакция и «Переслать» из меню сообщения (js/screens/chats-8.js, владелец 07.10). Только токены, обе темы.
   Ряд из 7 эмодзи сверху меню сообщения, окно всех реакций, выбор чата для пересылки, заметка «переслано в ...». */
.cx-row { display: flex; align-items: center; gap: 2px; margin: 0 0 4px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line); }
.cx-e { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-pill); font: 400 22px/1 "Onest", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; transition: transform var(--dur-1), background var(--dur-1); }
.cx-e:hover { background: var(--surface-3); transform: scale(1.12); }
.cx-e:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cx-e.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cx-more { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: var(--r-pill); color: var(--ink-3); }
.cx-more:hover { background: var(--surface-3); color: var(--ink); }
.cx-more .ic { width: 16px; height: 16px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.cx-grid .cx-e { width: 100%; height: 44px; border-radius: 12px; }
.cx-list { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 380px); overflow: auto; }
.cx-it { height: 44px; }
.cx-it .ic { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.cx-nm { flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 500; }
.cx-it .faint { flex: none; max-width: 40%; font-size: var(--t-xs); }
.cx-q { padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.cx-sent { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.cx-sent .ic { width: 12px; height: 12px; flex: none; }
.cx-sent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .cx-row { justify-content: space-between; padding: 2px 0 8px; }
  .cx-e { width: 40px; height: 40px; }
  .cx-list { max-height: 46vh; }
}
/* Пульт 2.0, «Чаты» (часть 6): полоса ждущих чатов, ответ через телефон, служебные строки (js/screens/chats-9.js, chats-10.js, владелец 07.10).
   Только токены, обе темы. Кнопка ответа по стадии (владелец 08.10): .wb-m.
   Владелец 09.10: карточки больше не краснеют целиком, просрочку показывает таймер (красный «+0:23»), тон карточки по аккаунту в strip.css;
   позиция в одну строку: имя, таймер, одна кнопка и «⋯» (меню strip-menu.js), общий контейнер и телефон в strip.css. */
.wb-it { display: flex; align-items: center; flex: none; gap: 8px; min-height: 38px; padding: 0 5px 0 9px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wb-open { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 0; text-align: left; font-size: var(--t-sm); }
.wb-open b { flex: 0 1 auto; min-width: 0; max-width: 140px; font-weight: 600; }
.wb-open:hover b { text-decoration: underline; }
.wb-svc { flex: none; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font-size: var(--t-xs); line-height: 18px; }
.wb-t { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.wb-it.soon .wb-t, .wb-it.over .wb-t { padding: 0 7px; border-radius: var(--r-pill); line-height: 20px; }
.wb-it.soon .wb-t { background: var(--warn-soft); color: var(--warn); }
.wb-it.over .wb-t { background: var(--neg-soft); color: var(--neg); }
.wb-qs { display: flex; flex: none; align-items: center; gap: 4px; }
.wb-q { height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; transition: background var(--dur-1); }
.wb-q:hover:not(:disabled) { background: var(--accent-soft); }
.wb-q.yes { background: var(--accent); color: var(--accent-ink); }
.wb-q:disabled { opacity: .5; cursor: default; }
.wb-ask { font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.wb-off { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.wb-off .ic { width: 12px; height: 12px; }
.wb-q.wb-m { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; } /* ответ по стадии клиента (владелец 08.10, chats-10.js) */
.wb-q.wb-mo { display: inline-grid; place-items: center; width: 28px; padding: 0; background: transparent; color: var(--ink-3); } /* «⋯»: меню позиции (владелец 09.10, strip-menu.js) */
.wb-q.wb-mo .ic { width: 16px; height: 16px; }
.wb-q.wb-mo:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.ch-phbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--info-soft); color: var(--ink); font-size: var(--t-sm); line-height: 1.35; }
.ch-phbar .ic { width: 16px; height: 16px; flex: none; color: var(--info); }
.ch-foot:has([data-cp-ask]) .ch-phbar { display: none; } /* пока спрашиваем «Отправить?», вопрос и полоса не дублируют друг друга */
.cd-via { display: inline-flex; align-items: center; gap: 3px; color: var(--info); font-weight: 600; }
.cd-via .ic { width: 11px; height: 11px; }
.cd-sln { display: flex; justify-content: center; margin: 6px 0; }
.cd-sln span { display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--t-xs); overflow-wrap: anywhere; }
.cd-sln .ic { width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.cd-sln[data-kind="del"] .ic { color: var(--neg); }
.cd-sln[data-kind="edit"] .ic { color: var(--warn); }
.cd-sln time { color: var(--ink-3); }
.ch-cpm { min-width: 250px; }
.ch-cpm .menu-item { height: 40px; }
.ch-cpm .menu-item .ic { width: 16px; height: 16px; flex: none; }
@media (max-width: 720px) {
  .wb-q { height: 32px; padding: 0 11px; }
  .wb-q.wb-mo { width: 36px; padding: 0; }
}
.ch-setp .menu-item + .t-xs { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }

/* телефон (владелец 07.10): в шапке диалога только комментарии, карточка и «⋯» (chats-11.js); имя клиента получает место */
.ch-more-m { display: none; }
.show-m-only { display: none; }
@media (max-width: 720px) {
  .ch-hact [data-ch-mute], .ch-hact [data-mpn-open], .ch-hact a.btn.ghost[href], .ch-hact [data-cp-more], .ch-hact [data-cp-askphone] { display: none !important; }
  .ch-more-m { display: inline-flex; }
  .ch-hact { gap: 4px; flex: none; }
  .topbar [data-theme-toggle], .topbar [data-bl-muted] { display: none; }
  .show-m-only { display: flex; }
}
/* телефон: шапка диалога одной строкой (стрелка, аватар, имя и ник, кнопки); вторая строка только у заметки и меток */
@media (max-width: 720px) {
  .ch-head { flex-wrap: wrap; row-gap: 6px; }
  .ch-head > .ch-hmain { flex: 1 1 0; min-width: 0; }
  .ch-head > .ava { width: 34px; height: 34px; }
  .ch-head .ch-hm { flex-basis: 100%; order: 9; }
  .ch-hn { font-size: var(--t-md, 16px); }
  .ch-hs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-hact .btn.sm.icon-only { width: 34px; height: 34px; padding: 0; }
}
/* «Чаты»: служебные строки о закрепе и звонках (js/screens/chats-pins.js, владелец 09.10). Плашка та же, что у прежних служебных строк (.cd-sln, chats-6.css);
   внутри текст и нажимаемая цитата закреплённого. Текст течёт обычной строкой (не колонками): на телефоне длинное «закрепил(а) «...»» переносится целиком,
   время не рвётся. */
.cd-slp > span { display: block; text-align: center; padding: 4px 12px; border-radius: 14px; line-height: 1.4; }
.cd-slp .ic { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.cd-slp time { display: inline-block; margin-left: 6px; white-space: nowrap; }
.cd-sln[data-kind="pin"] > span > .ic { color: var(--accent-text); }
.cd-slq { display: inline; padding: 0; min-width: 0; font: inherit; color: var(--accent-text); text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.cd-slq:hover { text-decoration-style: solid; }
.cd-slq[disabled] { color: inherit; text-decoration: none; cursor: default; }
/* Пульт 2.0 на телефоне (владелец 07.10: «мобильная вёрстка корявая и не информативная»): плитки показателей компактные, чтобы
   рабочие списки («Ждут нашего ответа», сетка графика) были на первом экране; строка состояния переносится, а не обрезается. */
@media (max-width: 720px) {
  .now-kpis .kpi, .kpi.sch-kpi { padding: 12px 14px; min-height: 0; gap: 6px; }
  .now-kpis .kpi .kpi-top, .kpi.sch-kpi .kpi-top { min-height: 0; }
  .now-kpi-row { min-height: 0; }
  .now-kpi-row i { display: none; } /* мини-диаграммы точками: на телефоне только число */
  .now-kpis .num, .kpi.sch-kpi .num { font-size: 28px; line-height: 1.05; }
  .now-kpis .kpi-foot, .kpi.sch-kpi .kpi-foot { font-size: 12px; margin-top: auto; min-height: 0; } /* подпись плитки внизу у всех плиток ряда (раньше у одной стояла сразу под числом) */
  .now-kpis .kpi .round-btn, .kpi.sch-kpi .round-btn { width: 30px; height: 30px; }
  .kpi.contour-glow::before, .kpi.contour::after { display: none; }
  .now-strip { flex-wrap: wrap; row-gap: 6px; }
  .page-actions { max-width: 100%; min-width: 0; }
  /* «Клиенты»: четыре плитки в две колонки и без украшений, чтобы реестр начинался на первом экране */
  .cl-kpis > .cl-kpi.cl-kpi { grid-column: auto; padding: 12px 14px; min-height: 0; gap: 4px; }
  .cl-kpis .cl-kpi .num { font-size: 28px; line-height: 1.05; }
  .cl-kpis .cl-kpi .unit { font-size: 13px; }
  .cl-kpis .cl-kpi .ring, .cl-kpis .cl-kpi .kpi-foot { display: none; }
  .cl-kpis .cl-hrow { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cl-kpis .cl-hside { flex-direction: row; flex-wrap: wrap; gap: 0 8px; font-size: 12px; text-align: left; }
  .cl-kpis .cl-hside .num { font-size: 12px; }
  .page-actions .seg { max-width: 100%; }
  .cl-dock-in { max-width: 100%; min-width: 0; } /* масштаб 120%: плашка выбора клиентов не шире экрана */ /* длинный ряд периодов листается внутри себя, страница не уезжает вбок */
  .now-kpi-row { height: auto !important; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .now-kpi-row svg:not(.ic), .now-kpi-row canvas, .kpi.sch-kpi svg:not(.ic) { display: none; } /* кольца и графики: только число */
  .now-kpis .kpi-foot .chip { font-size: 12px; }
  .now-qbars, .now-kpis [class*="gauge"], .now-kpis [class*="ring"] { display: none !important; } /* полоски очереди и кольца */
  .now-kpis .kpi-label, .kpi.sch-kpi .kpi-label { font-size: 13px; white-space: normal; line-height: 1.25; } /* заголовок плитки в две строки, без многоточия (аудит 19.10, п. 7); у «Сейчас» две строки держит line-clamp в now.css */
  .now-kpis .kpi-top, .kpi.sch-kpi .kpi-top { gap: 6px; }
  .now-kpis .kpi-foot b, .now-kpis .kpi-foot [class*="timer"] { font-size: 14px; }
}

/* журнал входов (sessions.js) */
.ss-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 70vh; overflow: auto; }
.ss-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; border-top: 1px solid var(--line); }
.ss-row:first-child { border-top: 0; }
.ss-row.ss-off { opacity: .6; }
.ss-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-t { font-size: var(--t-sm); }
.ss-flag { align-self: flex-start; }
/* 08.10: IPv4 крупно, IPv6 мелко под ним (владелец: «хочу видеть IPv4») */
.ss-ip { font-size: var(--t-body); color: var(--ink); }
.ss-ip4 { font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-ip6 { overflow-wrap: anywhere; margin-top: -1px; }
/* Голосовой ввод (src/dash/static/v2/js/voice.js): микрофон рядом с полем; идёт запись: красная кнопка с таймером */
.vc-btn { flex: none; gap: 4px; color: var(--ink-2); }
.ch-compose .vc-btn { width: 36px; height: 36px; border-radius: 50%; }
.ch-compose .vc-btn .ic { width: 20px; height: 20px; }
.vc-btn .vc-t:empty { display: none; }
.vc-btn .vc-t { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.vc-btn.rec { width: auto; padding: 0 10px; background: var(--neg); color: #fff; animation: vc-pulse 1.4s ease-in-out infinite; }
.vc-btn.busy .ic { animation: vc-spin 1s linear infinite; }
.tr-end .vc-btn { margin-top: 6px; }
/* нет доступа к микрофону: всплывашка у кнопки поверх тура и окон */
.pop.vc-pop { z-index: 140; padding: 12px; max-width: min(320px, calc(100vw - 16px)); }
.vc-err { display: grid; gap: 8px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.vc-err b { color: var(--ink); font-weight: 600; }
.vc-err p { margin: 0; }
@keyframes vc-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--neg) 25%, transparent); } }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vc-btn.rec, .vc-btn.busy .ic { animation: none; } }
/* Список чатов как в Telegram (владелец 07.10 вечер, скрины Telegram и пульта): имя и рядом «ждёт N мин» (цвет по срочности),
   ниже превью обычным текстом без подложки, справа время и число непрочитанных; меньше жирности и высоты строк.
   Превью в одну или две строки с многоточием и высота строки: chats-pv.css (владелец 08.10). Открытый диалог на телефоне до нижнего края
   экрана, без пустой полосы под полем: см. .ch[data-pane="chat"] ниже (владелец 08.10). */
.ch-list .ch-it { padding: 8px 10px; gap: 12px; align-items: center; }
.ch-list .ch-it-main { gap: 2px; padding-top: 0; }
.ch-list .ch-nm { font-weight: 500; }
.ch-list .ch-pv { background: none; border: 0; padding: 0; border-radius: 0; color: var(--ink-3); font-size: var(--t-sm); }
.ch-list .ch-it.on .ch-pv { background: none; }
.ch-list .ch-you { color: var(--ink-2); }
.ch-nmw .ch-wt { flex: none; height: 18px; padding: 0 7px; font-size: 11px; }
.ch-nmw .ch-seen { flex: none; }
.ch-list .ch-ava .ava { width: 48px; height: 48px; }
.ch-list .ch-it + .ch-it { position: relative; }
.ch-list .ch-it + .ch-it::before { content: ""; position: absolute; left: 70px; right: 10px; top: 0; border-top: 1px solid var(--line); opacity: .6; }
.ch-list .ch-it.on::before, .ch-list .ch-it.on + .ch-it::before { display: none; }
/* поиск над списком открывает лупа верхней строки (chats-12.js); с введённым запросом поле остаётся */
.ch:not(.ch-q-on):not([data-find]) .ch-tools { display: none; }
@media (max-width: 720px) {
  /* аккаунты одной кнопкой с выбранным, остальные в списке по нажатию; всё управление списком в одну строку */
  .ch-top { flex-wrap: wrap; gap: 6px; }
  .ch-top .ch-tabs-wrap { flex: 0 1 auto; min-width: 0; }
  .ch-tabs button:not([aria-pressed="true"]) { display: none; }
  .ch-tabs button[aria-pressed="true"] { padding: 0 12px; }
  .ch-tabs button[aria-pressed="true"]::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
  .ch-top .ch-only-wrap { flex: 0 1 auto; min-width: 0; }
  .ch-top [data-tg-folders] { font-size: 0; gap: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .ch-top [data-tg-folders] .ic { margin: 0; }
  .ch-list .ch-it { padding: 7px 4px; gap: 10px; }
  .ch-list .ch-ava .ava { width: 46px; height: 46px; }
  .ch-list .ch-it + .ch-it::before { left: 60px; right: 4px; }
}

/* «⋯» диалога (chats-11.js): панель выезжает справа налево поверх переписки, шапку не сжимает */
.ch-main, .ch-head { position: relative; }
.ch-head:has(.chm-sheet) { z-index: 31; }
.chm-sheet { position: absolute; z-index: 30; top: calc(100% + 6px); right: 8px; min-width: 240px; padding: 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line); box-shadow: var(--sh-pop); transform: translateX(calc(100% + 16px)); opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.chm-sheet.on { transform: none; opacity: 1; }
.chm-sheet .menu-item { height: 44px; }
@media (prefers-reduced-motion: reduce) { .chm-sheet { transition: none; } }
@media (max-width: 720px) {
  .ch-hact [data-cn-open], .ch-hact [data-ch-card], .ch-hact [data-lg-new] { display: none !important; }
  /* открытый диалог как в Telegram: верх свободен, без верхней строки пульта и нижней панели разделов */
  body:has(.ch[data-pane="chat"]) #topbar, body:has(.ch[data-pane="chat"]) #dock { display: none; }
  body:has(.ch[data-pane="chat"]) .page { padding-bottom: 0; }
  :root[data-dock="off"] .ch[data-pane="list"] { height: calc(100dvh / var(--zoom, 1) - var(--top-h) - var(--frame) * 2 - var(--gap) - 12px - var(--la-h, 0px)); }
  /* открытый диалог прибит к видимой части экрана (visualViewport, js/kb.js): клавиатура iPhone не уводит его вверх и не
     оставляет пустоту между полем и клавиатурой (владелец 08.10; при клавиатуре высота и отступы в css/screens/kb.css). Снизу карточка до самого
     края экрана, без рамки и пустой полосы под полем (владелец 08.10): место под полосу «Домой» это отступ внутри подвала (compose.css, --safe-b) */
  .ch[data-pane="chat"] { position: fixed; z-index: 30; left: var(--frame); right: var(--frame); top: calc(var(--vvt, 0px) + var(--frame));
    height: calc(var(--vvh, 100dvh) - var(--frame)); min-height: 0; }
}

/* лупа слева в строке поиска: расширенный поиск (chats-12.js), видно, что это кнопка */
/* лупа и крестик внутри поля, поверх него (кнопки, а не просто значок; 08.10: лупа съезжала над полем) */
.ch-search .ch-q-more, .ch-search .ch-q-x { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.ch-search .ch-q-more { left: 6px; }
.ch-search .ch-q-x { right: 6px; }
.ch-search .ch-q-more .ic, .ch-search .ch-q-x .ic { position: static; transform: none; width: 17px; height: 17px; }
.ch-search .ch-q-more:hover, .ch-search .ch-q-more:focus-visible, .ch-search .ch-q-x:hover { background: var(--surface-2); color: var(--ink); }
.ch-search .input { padding-right: 42px; }
/* масштаб 80%: превью в две строки и выравнивание строки по верху: chats-pv.css (владелец 08.10) */
/* предпросмотр по долгому нажатию */
.ch-list .ch-it { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pv-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pv-note { margin: 2px 0 10px; }
.pv-m { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; padding: 7px 10px; border-radius: 14px; background: var(--surface-2); font-size: var(--t-sm); line-height: 1.35; }
.pv-m.pv-out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.pv-m.pv-svc { align-self: center; background: none; color: var(--ink-3); font-size: var(--t-xs); }
.pv-m.del .pv-t { opacity: .6; } /* удалённое не зачёркиваем (владелец 07.10) */
.pv-t { white-space: pre-wrap; word-break: break-word; }
.pv-at { flex: none; font-size: 10.5px; color: var(--ink-3); }

/* полоса ждущих: текст кнопок не выделяется при прокрутке пальцем; раскрытая кнопка (первое нажатие) с полным текстом */
.ch-wbar, .ch-wbar * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wb-q.armed { height: auto; min-height: 24px; padding: 4px 10px; background: var(--accent); color: var(--accent-ink); white-space: normal; max-width: 240px; text-align: left; line-height: 1.25; }
.wb-q.armed::after { content: " · ещё раз: отправить"; opacity: .7; font-weight: 400; }
/* отсчёт перед отправкой быстрого ответа (chats-17.js) */
.cq { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  width: min(440px, calc(100vw - 24px)); padding: 8px 8px 8px 10px; border-radius: 18px; background: var(--inverse); color: var(--inverse-ink); box-shadow: var(--sh-pop); }
@media (max-width: 720px) { .cq { bottom: calc(96px + env(safe-area-inset-bottom)); } body:has(.ch[data-pane="chat"]) .cq { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.cq-ring { position: relative; flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.cq-ring svg { position: absolute; inset: 0; transform: rotate(-90deg) scaleY(-1); } /* убывает против часовой */
.cq-ring circle { fill: none; stroke-width: 2.5; }
.cq-bg { stroke: color-mix(in srgb, var(--inverse-ink) 18%, transparent); }
.cq-fg { stroke: var(--accent); stroke-linecap: round; animation-name: cq-run; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes cq-run { to { stroke-dashoffset: 69.12; } }
.cq-ring b { font-size: 12px; font-variant-numeric: tabular-nums; }
.cq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-xs); line-height: 1.3; }
.cq-t .ellipsis { opacity: .8; }
.cq-undo { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); }
.cq.sent .cq-ring { color: var(--accent); }
.ch-search input[type="search"]::-webkit-search-cancel-button, .ch-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* свой крестик, без системного */

/* 08.10: долгое нажатие на телефоне открывает меню сообщения, а не выделение текста с лупой. 08.10 (iPhone, снимок владельца): иногда iOS
   всё же заливал синим всю страницу за меню и показывал «Скопировать / Найти / Перевести». На сенсорных устройствах текст диалога, списка
   чатов, подложки и самого меню не выделяется нигде, кроме полей ввода; копировать можно пунктом меню «Скопировать» и режимом «Выбрать».
   body.cm-open ставит chats-6.js, пока меню открыто (подложка закрывает всю страницу). Мышью текст сообщений выделяется, как раньше. */
@media (pointer: coarse) {
  .ch, .ch *, .cm, .cm *, .cm-scrim, body.cm-open, body.cm-open * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .ch input, .ch textarea, .ch [contenteditable="true"], .cm input, .cm textarea, body.cm-open input, body.cm-open textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
}
/* 29.10: двойное касание по пузырю копирует его текст (js/screens/chats-copy.js), страница от него не увеличивается; у входящих свой pan-y (свайп «Ответить», chats-2.css) */
@media (pointer: coarse) { .ch-msgs .cd-msg { touch-action: manipulation; } }
/* Превью последнего сообщения в списке «Чатов» (владелец 08.10): на телефоне при масштабе 80% превью в две строки налезало на имя
   следующей строки, а в одну строку обрезалось посреди слова без «…». Причины в вёрстке (высот у строки и списка с фиксированным шагом нет:
   список рисуется целиком через innerHTML):
   1. .ch-pv ещё и класс полосы ответа в диалоге (chats-2.css, display:flex): в списке text-overflow на flex-контейнере не работает, хвост
      резался без «…».
   2. Две строки (80%) держались на display:-webkit-box у flex-элемента .ch-row (align-items:center): высоту строки считал движок по
      своим правилам, на iPhone она получалась меньше нарисованного текста.
   Теперь вторая строка (.ch-row + .ch-row) обычный блок, превью в нём обычный блок в потоке: высоту строки задаёт его содержимое
   (при 80% не больше двух строк, max-height страхует, если движок не применит line-clamp), число непрочитанных лежит справа поверх строки,
   место под него оставлено отступом. Строки списка поиска (.ch-found) не затронуты. */
.ch-list .ch-it-main > .ch-row + .ch-row { position: relative; display: block; min-width: 0; }
.ch-list .ch-it-main > .ch-row + .ch-row .ch-pv { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.ch-list .ch-it-main > .ch-row + .ch-row:has(.badge) .ch-pv { padding-right: 36px; }
.ch-list .ch-it-main > .ch-row + .ch-row .badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* масштаб 80%: больше текста, а не просто мельче (владелец 08.10): превью в две строки с многоточием, строка растёт по содержимому */
:root[data-scale="80"] .ch-list .ch-it { align-items: flex-start; }
:root[data-scale="80"] .ch-list .ch-it-main > .ch-row + .ch-row .ch-pv { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; max-height: 2.6em; }
/* Предпросмотр чата по долгому нажатию (js/screens/chats-25.js, владелец 08.10: «нету даты, за когда мы листаем» и «подлиннее»).
   Окно растёт по высоте экрана: заголовок, подпись и «Открыть чат» на месте, список сообщений занимает остальное (раньше потолок был 52vh).
   Дни блоками (.cd-dayb) и плашка даты (.cd-day, липнет к верху в пределах дня) приходят из dialog.css, здесь только отступы под узкий список.
   Сами пузыри (.pv-m, .pv-in/.pv-out/.pv-svc): chats-tg.css. */
.pv-modal { display: flex; flex-direction: column; max-width: 440px; max-height: calc(var(--vvh, 100dvh) - 32px); }
.pv-head, .pv-note, .pv-modal > .btn { flex: none; }
.pv-list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 160px; max-height: min(78dvh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px; }
.pv-list .cd-dayb { gap: 6px; }
.pv-list .cd-day { top: 2px; margin-bottom: 2px; }
.pv-list .cd-more-wrap { margin-bottom: 0; }
/* «Чаты»: окно перед отправкой и «не ушло» (js/screens/chats-14.js), «На разбор» и удаление чужого с причиной (chats-15.js),
   справедливое распределение в тени (managers-fair.js). Владелец 08.10, BACKLOG 10.27, 10.28. */
.ch-ob.ch-hold .cd-bub { opacity: .8; }
.ch-hold-t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* «не ушло»: тёплая плашка поверх цвета наших пузырей (dialog.css, цвет аккаунта chats-4.css), поэтому селектор длиннее */
.ch-main .ch-msgs .cd-msg.out.ch-ob.ch-yield .cd-bub,
:root[data-theme] .ch-main .ch-msgs .cd-msg.out.ch-ob.ch-yield .cd-bub { border-style: solid; border-color: var(--warn); background: var(--warn-soft); }
.ch-yield-t { color: var(--warn); white-space: normal; }
.ch-hold-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.ch-hold-a .btn .ic { width: 14px; height: 14px; }
.ch-overbar { align-items: flex-start; color: var(--info); }
.ch-overbar .ic { flex: none; margin-top: 2px; }
.cr-q { padding: 8px 12px; border-left: 3px solid var(--line-2); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }

/* «Менеджеры»: сводка тени справедливого распределения (только владелец и управляющий) */
.fair-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
.fair-top .num { font-size: 28px; font-weight: 600; }
.fair-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.fair-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); }
.fair-cases { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); }
.fair-cases li { padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
/* Автоперевод в «Чатах» (js/screens/chats-13.js, chats-16.js; владелец 08.10): как правка, только в голубых полутонах вместо оранжевого.
   Только токены (--info, --info-soft), обе темы. Пузырь с переводом на лёгком голубом оттенке, метка у времени, плашка оригинала над текстом. */
.cd-trtag { padding: 1px 7px 1px 5px; border: 0; border-radius: var(--r-pill); background: var(--info-soft); color: var(--info); font: inherit; font-weight: 600; cursor: pointer; transition: box-shadow var(--dur-1); }
.cd-trtag:hover { box-shadow: inset 0 0 0 1px var(--info); }
.cd-trtag:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cd-trtag.wait { background: none; color: var(--ink-3); cursor: default; box-shadow: none; }
.cd-trtag.wait:not(.no) .ic { animation: ct-spin 1s linear infinite; }
.cd-msg.ct-tr .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--info) 8%, transparent), color-mix(in srgb, var(--info) 8%, transparent)); }
.cd-msg.out.ct-tr .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--info) 11%, transparent), color-mix(in srgb, var(--info) 11%, transparent)); }
:root[data-theme="dark"] .cd-msg.ct-tr .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--info) 10%, transparent), color-mix(in srgb, var(--info) 10%, transparent)); }
:root[data-theme="dark"] .cd-msg.out.ct-tr .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--info) 14%, transparent), color-mix(in srgb, var(--info) 14%, transparent)); }
.cd-msg.ct-tr:not(.ed) .cd-bub { cursor: pointer; }
.cd-trv { display: grid; gap: 2px; margin: 0 0 7px; padding: 6px 10px 7px; border-radius: 12px; background: var(--info-soft); font-size: var(--t-sm); }
.cd-trv[hidden] { display: none; }
.cd-trv .cd-vl { color: var(--info); }
:root[data-theme="dark"] .cd-trv { background: color-mix(in srgb, var(--info) 17%, var(--surface)); }
.cd-trx { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-family: "Onest", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif; }
.cd-trn { color: var(--ink-2); font-size: var(--t-xs); }
.ct-ob { display: flex; margin-bottom: 6px; }
.ct-ob .cd-trtag { font-size: var(--t-xs); }

/* поле ответа: голубая полоса над полем (на базе .ch-pv), кнопки у отправки */
.ch-pv.ct-pv { align-items: flex-start; gap: 8px; padding: 4px 4px 4px 10px; background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
:root[data-theme="dark"] .ch-pv.ct-pv { background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.ct-pv .ch-pq-i { color: var(--info); margin-top: 2px; }
.ct-pv.busy .ch-pq-i .ic { animation: ct-spin 1s linear infinite; }
.ct-b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ct-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--t-sm); }
.ct-h b { color: var(--info); font-weight: 600; }
.ct-pick { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 8px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); font: inherit; font-weight: 600; cursor: pointer; }
.ct-pick .ic { width: 13px; height: 13px; }
.ct-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ct-st { color: var(--ink-3); font-size: var(--t-xs); }
.ct-t { max-height: 96px; overflow-y: auto; color: var(--ink); font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.ct-n { display: flex; gap: 6px; color: var(--ink-2); font-size: var(--t-xs); }
.ct-n .ic { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--info); }
.ch-compose .ct-lang { flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2); }
.ch-compose .ct-lang .ic { width: 24px; height: 24px; }
.ch-compose .ct-lang[hidden] { display: none; }
.ct-h .ct-raw { flex: none; margin-left: auto; }
.ct-pv .ct-h .ct-raw { height: 26px; padding: 0 10px; font-size: var(--t-xs); } /* 18.10: полоса перевода тоньше (владелец: «сильно жирная»): кнопка 26 px, текст мельче, ниже предел */
.ch-compose .ch-send.ct-go { background: var(--info); color: var(--surface); }
.ch-compose .ch-send.ct-go:hover { background: color-mix(in srgb, var(--info) 86%, var(--ink)); }
.ct-menu { max-height: min(420px, calc(100vh - 16px)); overflow-y: auto; }
.ct-menu .menu-item .faint { margin-left: auto; font-size: var(--t-xs); }
.ct-menu .menu-item .ck { opacity: 0; color: var(--info); }
.ct-menu .menu-item[aria-checked="true"] { color: var(--ink); }
.ct-menu .menu-item[aria-checked="true"] .ck { opacity: 1; }
@media (max-width: 720px) {
  .ct-h .ct-raw { height: 30px; padding: 0 10px; }
  .ct-h .ct-st { order: 3; flex-basis: 100%; } /* на телефоне строка состояния под языком и «Оригиналом» */
  .ch-compose .ch-send.ct-go { padding: 0 12px; }
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-trtag.wait .ic, .ct-pv.busy .ch-pq-i .ic { animation: none; } }
/* «Перепроверить» бота в чате (chats-22.js, владелец 08.10): кнопка и «проверено в 10:42» в полосе «Бот не видит этот чат» и в заметке вместо поля ответа */
.cbr { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ch-phbar .cbr { margin-left: auto; }
.ch-note .cbr { flex-direction: column; align-items: flex-end; gap: 4px; }
.cbr-at { white-space: nowrap; }
.cbr-go .ic.spin { animation: spin 1s linear infinite; }
@media (max-width: 720px) {
  .ch-phbar:has(.cbr) { flex-wrap: wrap; }
  .ch-phbar:has(.cbr) > span:not(.cbr) { flex: 1 1 0; min-width: 0; } /* значок и текст в одну строку, кнопка ниже */
  .ch-phbar .cbr { flex: 0 0 100%; margin-left: 0; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .cbr-go .ic.spin { animation: none; } }
/* Поиск внутри открытого чата (владелец 09.10, js/screens/chat-find.js): на время поиска шапка диалога заменяется одной строкой той же высоты,
   постоянных строк сверху нет. Строка лежит рядом с шапкой (в .ch-main), а не в ней: опрос диалога пересоздаёт шапку. */
.ch-main.cf-on > .ch-head { display: none; }
.cf-bar { display: flex; align-items: center; gap: 4px; flex: none; min-height: 61px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.cf-in { position: relative; flex: 1 1 auto; min-width: 0; display: block; }
.cf-in > .ic { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cf-in .input { width: 100%; height: 40px; padding: 0 12px 0 36px; }
.cf-n { flex: none; max-width: 40%; padding: 0 6px; font: 500 var(--t-sm)/1.2 var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-n.link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cf-n:disabled { opacity: 1; cursor: default; }
.cf-bar .icon-btn { position: relative; flex: none; }
.cf-bar .icon-btn:disabled { opacity: .35; pointer-events: none; }
.cf-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.cf-dot[hidden] { display: none; }
/* подсветка совпадений в пузырях (CSS Custom Highlight API: текст не меняется). Янтарная, а не зелёная: зелёным в пузырях уже отмечены слова,
   добавленные правкой (mark.cd-chg); текущее совпадение плотнее и с тёмным текстом в обеих темах */
::highlight(cf-hit) { background-color: rgba(245, 185, 74, .45); color: inherit; }
::highlight(cf-cur) { background-color: #F5B94A; color: #1b1b17; }
@media (max-width: 720px) {
  .cf-bar { min-height: 55px; padding: 8px 4px 8px 10px; gap: 0; }
  .cf-in .input { height: 38px; }
  .cf-n { padding: 0 4px; font-size: var(--t-xs); max-width: 34%; }
  .cf-bar .icon-btn.sm { width: 34px; height: 34px; }
}
/* Единый код заявки (волна 12б, js/lead-code.js): мелкий вторичный текст в строке под именем клиента, список расчётов по нажатию, строка заявки в поиске
   «Чатов» и код у записей карточки клиента. Только токены, обе темы. Код не спорит с именем: размер строки под именем, цвет второго плана, число
   моноширинное по цифрам (tabular-nums), без плашки и значка. */
/* третья строка в колонке имени: одна строка, лишнее режется многоточием, как строка с ником */
.lc-line { margin-top: 1px; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chip { color: inherit; border-radius: 4px; }
.lc-c { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-btn { cursor: pointer; text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
.lc-btn:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.lc-btn:hover .lc-c { color: var(--ink); }
.lc-btn:focus-visible { outline: none; box-shadow: var(--focus); }
/* Список расчётов: окно у кода, закрывается по Esc, нажатием мимо и повторным нажатием на код (App.pop) */
.pop.lc-pop { width: min(360px, calc(100vw - 16px)); max-width: none; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.lc-box { padding: 4px 8px 6px; }
.lc-box:not(.t-sm) { padding: 0; }
.lc-list { margin: 0; padding: 0; list-style: none; }
.lc-r { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 11px; }
.lc-r.now { background: var(--surface-2); }
.lc-nn { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; font: 600 var(--t-xs)/1 var(--f-ui); color: var(--ink-2); background: var(--surface-3); }
.lc-r.now .lc-nn { background: var(--accent-soft); color: var(--accent-text); }
.lc-b { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lc-m { font-size: var(--t-body); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lc-cur { background: var(--accent-soft); color: var(--accent-text); }
.lc-s { flex-basis: 100%; font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.lc-none { padding: 6px 10px 8px; }
.lc-none.neg { color: var(--neg); }
/* строка заявки в результатах поиска «Чатов»: плашка с кодом перед именем, закрытая заявка приглушена */
.ch-it.ch-fl .lc-code { flex: none; margin-right: 6px; color: var(--ink-2); background: var(--surface-3); font-variant-numeric: tabular-nums; }
.ch-it.ch-fl.lc-shut .ch-pv { opacity: .75; }
/* код заявки в подвале карточки доски «Сейчас» и списков «На разбор» (js/screens/now-2.js, NW.cdTag): мелкий второй план перед давностью, имя клиента остаётся главным */
.now-lead-no { flex: none; margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* код у записей бота и запросов без сделки в карточке клиента */
.cd-bd.cd-code { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* клавиатура открыта (js/kb.js, css/screens/kb.css): шапка сжимается до имени, строка с кодом прячется вместе с остальными */
:root[data-kb="1"] .ch[data-pane="chat"] .lc-line { display: none !important; }
/* телефон: стадия в шапке скрыта (код и «расчёт N из M» остаются), попадать пальцем проще: нажимаемое место выше строки на 4 px сверху и снизу */
@media (max-width: 720px) {
  .lc-chip .lc-st { display: none; }
  .lc-btn { padding: 4px 2px; }
}
/* Окно «Понял так» над полем ответа (js/screens/calc-ask.js, L-22): строит на .ch-ask из chats-4.css, добавляет образец текста, выключатель курса и предупреждения */
.cc-ask { align-items: flex-start; }
.cc-ask > .ic { margin-top: 1px; color: var(--accent-text); }
.cc-ask .ch-ask-t { flex: 1 1 0; }
.cc-ask .ck-pv, .cc-ask .ck-w, .cc-ask .ck-sw, .cc-ask .ch-ask-b { flex: 1 1 100%; }
/* образец ровно так, как уйдёт клиенту: переносы и неразрывные пробелы сохранены; на телефоне не выше трети экрана, дальше прокрутка внутри */
.ck-pv { box-sizing: border-box; margin: 0; padding: 10px 12px; max-height: min(34vh, 260px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-body); line-height: 1.45; color: var(--ink); }
.ck-pv:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ck-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ck-sw:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.ck-w { margin: 0; padding: 0 0 0 18px; list-style: disc; color: var(--ink-2); line-height: 1.4; }
.cc-ask .ch-ask-b { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .cc-ask .ch-ask-b { flex-direction: column-reverse; }
  .cc-ask .ch-ask-b .btn { flex: none; width: 100%; height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cc-ask { animation: cc-in var(--dur-2) var(--ease); }
  @keyframes cc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
/* Панель, «Чаты»: калькулятор расчёта у поля ввода (js/screens/calc-box.js, calc-box-2.js, calc-bar.js, L-23) и вопросы перед отправкой (calc-warn.js). Только токены, обе темы.
   Окно живёт в колонке .ch-main между перепиской и подвалом: сжимается первым (flex 0 1 auto), тело прокручивается внутри, шапка и кнопки остаются. Компьютер: две колонки (ввод, итог),
   телефон: одна колонка, нижний лист с округлыми верхними углами, поля 16 px (iOS не приближает), кнопки 44 px. Строка с кнопками .cb-bar над формой поля, раскладку поля не трогает; на телефоне её заменяет
   плавающая кнопка (css/screens/calc-fab.css), «Курс» тогда в шапке окна. Строка источника курса раскрывает уровни (.cb-lad), пара без таблицы получает поле курса (.cb-man). */
.cb-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cb-bar .btn { height: 32px; padding: 0 12px; }
.cb-open[aria-expanded="true"] { background: var(--inverse); color: var(--inverse-ink); }
.ch-foot:has(.cx-full) .cb-bar, .ch-main:has(.cb-panel) .cb-bar { display: none; } /* окно открыто: у него свои «Отмена» и крестик */
body:has(.cb-panel) .lg-dot, .ch-main:has(.cb-panel) .ch-tobot { display: none !important; } /* кружок сделок и «вниз» не лежат поверх окна */
:root[data-kb="1"] .cb-bar { display: none; } /* клавиатура открыта на телефоне: место нужно тексту */

.cb-panel:focus { outline: none; }
.cb-panel { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; max-height: min(74vh, 640px); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-1); }
.cb-h { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; }
.cb-ht { flex: 1 1 0; min-width: 0; line-height: 1.25; }
.cb-ht b { display: block; font-size: var(--t-h3); }
/* строка источника курса: кнопка; нажимаемая, только когда сервер прислал уровни (calc-lad.js), иначе обычный текст (disabled без вида кнопки) */
.cb-src { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: var(--t-xs); line-height: inherit; text-align: left; color: var(--ink-2); -webkit-text-fill-color: currentColor; opacity: 1; cursor: default; }
.cb-src.warn { color: var(--warn); }
.cb-src.tap { cursor: pointer; padding: 5px 0; margin: -5px 0 -3px; text-decoration: underline dotted; text-underline-offset: 3px; }
.cb-src.tap::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-1); }
.cb-src.tap[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.cb-src.tap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.cb-rate-in { display: none; flex: none; }
.cb-lad { grid-column: 1 / -1; min-width: 0; max-width: 640px; padding: 2px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.cb-lad[hidden], .cb-man[hidden] { display: none; }
.cb-lad table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.cb-lad caption { padding: 6px 8px 4px; text-align: left; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.cb-lad th { padding: 2px 8px 4px; text-align: left; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.cb-lad td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.cb-lad td:nth-child(2) { white-space: nowrap; }
.cb-lad .r { text-align: right; white-space: nowrap; }
.cb-lad tr.on td { background: var(--surface); font-weight: 600; color: var(--ink); }
.cb-lad tr.on td:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); box-shadow: inset 3px 0 0 var(--accent-text); }
.cb-now { display: block; width: fit-content; margin-top: 3px; padding: 0 8px; border-radius: var(--r-pill); background: var(--inverse); color: var(--inverse-ink); font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.cb-mr { display: flex; align-items: center; gap: 8px; }
.cb-mr1 { color: var(--ink-2); }
.cb-mr .seg { flex: none; }
.cb-mr .cb-n { flex: 1 1 0; min-width: 0; }
/* биржевой ориентир под полем курса (L-55, calc-man.js): подсказка основным цветом, кнопка «Подставить», подпись источника мельче (условие источника) */
.cb-mk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); line-height: 1.4; }
.cb-mk[hidden] { display: none; }
.cb-mkt { flex: 1 1 180px; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-mks { white-space: nowrap; } /* источник в скобках не рвётся внутри: перенос только перед скобкой */
.cb-mk .btn { flex: none; }
.cb-mkr { flex: 1 1 100%; font-size: var(--t-xs); }
.cb-mka { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cb-mka:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.cb-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 22px; padding: 6px 12px 12px; align-content: start; }
.cb-in, .cb-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cb-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-f > span:first-child { font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; }
.cb-panel .input, .cb-panel .select { height: 38px; font-size: var(--t-body); }
.cb-panel .select { padding-right: 32px; background-position: right 11px center; }
.cb-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: end; }
.cb-pair .icon-btn { margin-bottom: 1px; }
.cb-am { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-am .seg { flex: none; }
.cb-am .input { flex: 1 1 120px; width: auto; min-width: 0; }
.cb-more > summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); list-style: none; display: flex; gap: 6px; align-items: center; min-height: 28px; }
.cb-more > summary::-webkit-details-marker { display: none; }
.cb-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--dur-1); }
.cb-more[open] > summary::before { transform: rotate(45deg); }
.cb-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.cb-more > summary b { font-weight: 500; color: var(--ink); }
.cb-lb { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.cb-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.cb-ar { display: grid; place-items: center; width: 20px; height: 38px; color: var(--ink-3); }
.cb-ar .ic { width: 16px; height: 16px; }
.cb-n { position: relative; display: block; }
.cb-n .input { padding-right: 52px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-n .input[data-n="s"] { --fit: 14px; } /* длинная сумма: calc-num.js уменьшает шрифт, пока число не уходит под код валюты */
.cb-n .input[data-n="xs"] { --fit: 12px; }
.cb-n .input[data-n="xx"] { --fit: 10.5px; }
.cb-n .input[data-n] { font-size: var(--fit); }
.cb-n i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--t-sm); color: var(--ink-3); pointer-events: none; }
.cb-hint { margin-top: -4px; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* подстрочник курса под суммами, вид строки под курсом в карточке сделки (ledger.css .lg-rate-f) */
.cb-hint b { color: var(--ink); font-weight: 600; }
.cb-hint[hidden] { display: none; }
.cb-note, .cb-opts { display: grid; gap: 8px; }
.cb-note[hidden], .cb-opts[hidden] { display: none; }
.cb-note > .btn { justify-self: start; }
.cb-w { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; }
.cb-w .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cb-w.bad { background: var(--warn-soft); color: var(--ink); }
.cb-w.bad .ic { color: var(--warn); }
.cb-ot { font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; }
.cb-pn { margin-top: -4px; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); } /* L-60: «Валюты как в прошлой сделке» под парой, приглушённо */
.cb-pn[hidden] { display: none; }
.cb-ob { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-ob .btn[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); }
.cb-pv { font-size: 13.5px; line-height: 1.4; }
.cb-pv.dim { color: var(--ink-2); }
.cb-panel.busy .cb-pv { opacity: .6; }
.cb-b { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.cb-b .ck-sw { margin-right: auto; min-height: 34px; }
.cb-q { flex: 1 1 auto; font-size: var(--t-sm); color: var(--ink-2); }
.cb-cmp { display: grid; gap: 6px; flex: 1 1 100%; }
.cb-cmp > div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cb-cmp .faint { color: var(--ink-3); }

@media (pointer: coarse) { .cb-panel .input, .cb-panel .select { height: 44px; font-size: 16px; } .cb-ar { height: 44px; } .cb-mk .btn { height: 44px; } }
@media (pointer: coarse) { .cb-n .input[data-n]:not(:focus) { font-size: var(--fit) !important; } } /* css/screens/menu.css ставит полям 16 px !important (iPhone не приближает страницу): длинной сумме без фокуса шрифт меньше, в фокусе снова 16 px */
@media (max-width: 720px) {
  .cb-panel { max-height: min(78vh, 680px); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .cb-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cb-b { flex-wrap: wrap; }
  .cb-src.tap { padding: 12px 0; margin: -12px 0 -10px; } /* L-39: строку «Курс таблицы ...» удобно нажать пальцем (около 40 px), место в шапке не растёт */
  .cb-b .ck-sw { margin-right: 0; min-height: 44px; }
  .cb-b .btn { flex: 1 1 0; height: 44px; justify-content: center; }
  .cb-q { flex: 1 1 100%; }
  .cb-h .cb-rate-in { display: inline-flex; height: 40px; padding: 0 12px; }
  .cb-h .ico-tile { display: none; } /* место под «Курс» в шапке: на телефоне значок ничего не сообщает */
}
@media (prefers-reduced-motion: no-preference) {
  .cb-panel { animation: cb-in var(--dur-2) var(--ease); }
  @keyframes cb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Панель, «Чаты»: калькулятор, строка «Не уверены? Другие пары» и «Спросить клиента» (L-71, js/screens/calc-alt.js); кнопки как у вариантов под кратность (.cb-ob) */
.cb-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.cb-alt[hidden] { display: none; }
.cb-alt-t { flex: 1 1 100%; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); font-weight: 500; }
.cb-alt .btn small { margin-left: 6px; font-size: var(--t-xs); font-weight: 400; color: var(--ink-2); }
.cb-alt .btn b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .cb-alt .btn { min-height: 44px; } }
/* Панель, «Чаты»: калькулятор, кнопка «Копировать» под текстом (js/screens/calc-copy.js), подсказка «клиент отказался» с «Подставить» и блок себестоимости и профита
   (js/screens/calc-cost.js; владелец 29.10). Цвета только токенами, кнопки под палец 44 px на сенсорных экранах. */
.cb-cp { display: flex; justify-content: flex-end; margin-top: -4px; }
.cb-ref { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); font-size: var(--t-sm); line-height: 1.4; color: var(--ink); }
.cb-ref[hidden], .cb-cost[hidden] { display: none; }
.cb-ref-t { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; }
.cb-ref-t .ic, .cb-cost-h .ic { flex: none; margin-top: 2px; }
.cb-ref-o { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cb-ref-o > span { flex: 1 1 180px; min-width: 0; font-variant-numeric: tabular-nums; }
.cb-ref-o small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-2); }
.cb-ref-o .btn { flex: none; }
.cb-ref-n { font-size: var(--t-xs); color: var(--ink-2); }
.cb-cost { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-xs); line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-cost-h { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; color: var(--ink-2); font-weight: 500; }
.cb-cost-s { color: var(--ink-3); }
@media (pointer: coarse) { .cb-cp .btn, .cb-ref-o .btn { min-height: 44px; } }
/* Меню по логотипу, один колокольчик с вкладками, нижняя панель и масштаб (владелец 07.10 вечер; js/menu.js, js/bell.js).
   Сдержанное стекло только у переключателей, главное читаемость. Владелец 08.10: пока в поле ответа есть текст, микрофон и стикер прячутся,
   перевод и скрепка стоят колонкой слева от поля (compose.css). */
button.logo { border: 0; padding: 0; cursor: pointer; }
.pop.lm { width: min(392px, calc(100vw - 16px)); }
.lm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 2px 0 6px; }
.lm-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 8px; border-radius: 14px; color: var(--ink-2); font-size: 11.5px; line-height: 1.15; text-align: center; }
.lm-tile:hover { background: var(--surface-2); color: var(--ink); }
.lm-tile.on { background: var(--inverse); color: var(--inverse-ink); }
.lm-tile .ic { width: 20px; height: 20px; }
.lm-row { cursor: default; height: auto; min-height: 42px; }
.lm-row .seg { flex: none; }
label.lm-row { cursor: pointer; }
.lm-sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--line-2, var(--line)); cursor: pointer; transition: background var(--dur-1); }
.lm-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--dur-1); }
.lm-sw:checked { background: var(--accent); }
.lm-sw:checked::after { transform: translateX(16px); }
.seg.glass { background: color-mix(in srgb, var(--surface-2) 72%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--glass-line); }
.bl-tabs { display: flex; margin: 2px 0 8px; }
.bl-tabs button { flex: 1; }
:root[data-dock="off"] .dock { display: none !important; }
@media (max-width: 720px) {
  :root[data-dock="off"] .page { padding-bottom: 24px; }
  .pop.lm .lm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .topbar { min-width: 0; overflow: hidden; } /* аватар целиком внутри строки */
}

/* 08.10: на телефоне у всплывашек крестик, у окна поиска крестик вместо Esc и подсказок клавиатуры; окно поиска у верха
   экрана и не выше видимой части (клавиатура iPhone закрывала низ, --vvh ставит js/kb.js по visualViewport) */
.pop-x { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ink-3); background: var(--surface-2); }
.pop-x .ic { width: 16px; height: 16px; }
.pop:has(> .pop-x) { padding-top: 10px; }
.pop:has(> .pop-x) > .menu-label:first-of-type { padding-right: 40px; }
.cmdk-x { display: none; }
@media (pointer: coarse) {
  .hide-touch, .cmdk-foot { display: none !important; }
  .cmdk-x { display: inline-grid; }
}
@media (max-width: 720px) {
  .cmdk { top: calc(env(safe-area-inset-top) + 8px); max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 16px); display: flex; flex-direction: column; }
  .cmdk-in { height: 54px; padding: 0 8px 0 14px; flex: none; }
  .cmdk-in input { font-size: 16px; } /* меньше 16 px iPhone приближает страницу при вводе */
  .cmdk-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
}

/* окно поиска: поле без своей рамки фокуса, строка и так видна (08.10: зелёная рамка налезала на строку, веб и телефон) */
.cmdk-in input, .cmdk-in input:focus, .cmdk-in input:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }
.cmdk-in:focus-within { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ch-head > .ava, .ch-head > .ch-ava, .ch-head .ch-hn { cursor: pointer; }

/* 08.10 iPhone: шрифт полей ввода меньше 16 px заставляет Safari приближать страницу при вводе, и она остаётся приближенной */
@media (pointer: coarse) {
  input, textarea, select, .input, .textarea, .ch-ta { font-size: 16px !important; }
  html, body { touch-action: pan-x pan-y; }
}
/* клавиатура открыта (js/kb.js ставит data-kb, правила в css/screens/kb.css): шапка диалога сжимается, полосы и плашки прячутся */
@media (max-width: 720px) {
  .ch-hs { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* подпись в две строки, без обрезки */
}
.ch-unmute { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }

/* поле ответа: пилюля, кнопки по варианту (одна или две) и разворот живут в css/screens/compose.css, js/screens/chats-24.js (владелец 18.10) */

/* поиск ⌘K (js/cmdk.js, 08.10): ↵ только у выбранной строки (стрелки не перерисовывают список), строка о том, что ищется */
.cmdk .cmdk-enter { display: none; }
.cmdk .menu-item[aria-selected="true"] > .cmdk-enter { display: inline-grid; }
.cmdk-hint { padding: 12px 12px 8px; line-height: 1.5; }
.cmdk-list > .menu-label:first-child { padding-top: 4px; }
/* Клавиатура открыта (владелец 08.10, iPhone, приложение с экрана «Домой»; js/kb.js ставит data-kb="1" на корень и --vvh, --vvt).
   Как в Telegram: диалог занимает видимую часть до самой клавиатуры, шапка клиента одна тонкая строка (стрелка, маленький аватар и имя),
   полосы и плашки прячутся, отступа снизу нет совсем (ни рамки, ни запаса под полосу «Домой», ни нижней панели разделов).
   Закрыли клавиатуру: data-kb="0", всё возвращается само (переходы короткие, без анимации у тех, кто её отключил).
   Владелец 09.10: полосу ждущих и строку напоминаний теперь сворачивает до тонкой сводки strip-bar.js (css/screens/strip.css), а не прячет
   целиком; прежнее скрытие осталось только там, где контейнера нет (полоса прямо в .ch-main). Плашки бота под шапкой больше нет (dialog-3.js). */
@media (max-width: 720px) {
  /* высота = видимая часть без рамки снизу; нижние углы прямые, карточка стоит прямо на клавиатуре */
  :root[data-kb="1"] .ch[data-pane="chat"] { top: calc(var(--vvt, 0px) + var(--frame)); height: calc(var(--vvh, 100dvh) - var(--frame)); }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-box { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-foot { padding-bottom: 8px; }
  /* в диалоге только шапка, переписка и поле: полосы и плашки прячем */
  :root[data-kb="1"] .ch-main > .ch-wbar, :root[data-kb="1"] .ch-main > .ch-rbar, :root[data-kb="1"] .ch-phbar, :root[data-kb="1"] .ch-pinrow,
  :root[data-kb="1"] .lg-dot, :root[data-kb="1"] .ch-lockbar { display: none !important; }
  /* шапка: одна тонкая строка, остальное (ник, аккаунт, менеджер, метки, кнопки) скрыто */
  .ch-head, .ch-head > .ava, .ch-hn { transition: padding var(--dur-2) var(--ease), width var(--dur-2) var(--ease), height var(--dur-2) var(--ease), font-size var(--dur-2) var(--ease); }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-head { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; gap: 6px; }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-head > .ava { width: 28px; height: 28px; font-size: 11px; }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-hs, :root[data-kb="1"] .ch[data-pane="chat"] .ch-hm,
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-hr > :not(.ch-hn), :root[data-kb="1"] .ch[data-pane="chat"] .ch-hact { display: none !important; }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-hn { font-size: var(--t-body); }
  /* остальные экраны: нижняя панель разделов под клавиатурой не нужна, запас под неё на странице тоже */
  :root[data-kb="1"] .dock { display: none !important; }
  :root[data-kb="1"] .page { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-head, .ch-head > .ava, .ch-hn { transition: none; }
}
/* ДДС: экран «Счета» (js/screens/ledger.js; вкладка счетов: ledger-acc.css), кружок «закрой сделку» (js/ledger-3.js) и карточка сделки (js/ledger.js). Владелец 08.10. Владелец 09.10: в открытом диалоге язычок «$ N» узкий, справа у ленты оставлено поле, текст сообщений он не закрывает; правила в css/screens/phonechk.css (грузится позже). */
.lg-dot { position: fixed; z-index: 45; right: 18px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill); background: var(--inverse); color: var(--inverse-ink); border: 1px solid var(--glass-line); box-shadow: var(--sh-pop); font-weight: 600; }
.lg-dot .ic { width: 18px; height: 18px; }
.lg-dot b { font-variant-numeric: tabular-nums; }
.lg-dot.late { background: var(--warn); color: var(--surface); animation: lg-pulse 1.8s ease-in-out infinite; }
.lg-dot.calm { opacity: .78; }
@keyframes lg-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warn) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lg-dot.late { animation: none; } }
@media (max-width: 720px) { .lg-dot { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); height: 42px; } :root[data-dock="off"] .lg-dot { bottom: 18px; } }
/* поле под плавающими кнопками («$ N» над нижней панелью, «вверх» в шторке карточки): низ страницы, список «Чатов» и шторка карточки клиента кончаются выше них,
   чтобы счётчик последней строки и суммы справа не лежали под кнопкой (аудит 19.10, п. 8). Кнопка «$ N» стоит на bottom: 96px + safe-area (home-индикатор iPhone,
   index.html с viewport-fit=cover) и 42 px высотой, значит запас 150px + safe-area; при выключенной нижней панели bottom: 18px, запас 72px + safe-area. Запас только там,
   где кнопка есть (.lg-dot в DOM, пока есть сделки без карточки). Правило menu.css (:root[data-dock="off"] .page, 24px) легче селектора ниже. */
@media (max-width: 720px) {
  body:has(.lg-dot):not(:has(.ch)) .page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  :root[data-dock="off"] body:has(.lg-dot):not(:has(.ch)) .page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:has(.lg-dot) .ch .ch-list { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .cd-drawer .cd-body { padding-bottom: 72px; }
}
/* в открытом диалоге: язычок у правого края посередине, переписку не закрывает; его можно двигать по вертикали (js/screens/fab-drag.js пишет --fab-top, css/screens/calc-fab.css) */
body:has(.ch[data-pane="chat"]) .lg-dot { top: var(--fab-top, 46%); bottom: auto; right: 0; height: 40px; padding: 0 8px 0 10px; border-radius: 14px 0 0 14px; border-right: 0; }
.lg-it { height: auto; min-height: 50px; padding: 6px 10px; }
.lg-it .grow { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.lg-sub { display: block; }
.lg-none { padding: 8px 10px; }
.lg-card { display: flex; flex-direction: column; gap: 10px; }
.lg-card label, .lg-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.lg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.lg-grid .row .input:last-child { width: 76px; flex: none; text-transform: uppercase; }
.lg-h { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-weight: 600; }
.lg-legs { display: flex; flex-direction: column; gap: 8px; }
.lg-leg { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lg-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.lg-arrow { color: var(--ink-3); }
.lg-sums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.lg-sums label { flex-direction: row; align-items: center; gap: 6px; font-size: var(--t-xs); }
.lg-num { width: 130px; }
.lg-cur { width: 64px; text-transform: uppercase; }
.lg-hint b.neg { color: var(--neg); }
.lg-warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); font-size: var(--t-sm); }
.lg-dep { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.lg-acts { position: sticky; bottom: 0; padding-top: 8px; background: var(--surface); }
.lg-top { margin-bottom: 12px; }
.lg-body { display: flex; flex-direction: column; gap: var(--gap); }
.lg-total { font-weight: 600; font-size: var(--t-h3, 18px); }
.lg-mv { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.lg-mv:first-child { border-top: 0; }
.lg-rc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; border-top: 1px solid var(--line); text-align: left; border-radius: 10px; }
.lg-rc:hover { background: var(--surface-2); }
.lg-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
@media (max-width: 720px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-ends { grid-template-columns: minmax(0, 1fr); }
  .lg-arrow { justify-self: center; transform: rotate(90deg); }
  .lg-num { width: 110px; }
}

/* выбор валюты со значками и строка курса (js/ledger-2.js, 08.10) */
.lg-cur-pick { flex: none; display: inline-flex; }
.lg-cbtn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: var(--t-sm); white-space: nowrap; }
.lg-cbtn .ic { width: 14px; height: 14px; color: var(--ink-3); }
.lg-sums .lg-cbtn { height: 34px; }
.lg-cdot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.pop.lg-cpop { width: min(300px, calc(100vw - 16px)); }
.lg-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lg-copt { height: 40px; gap: 8px; }
.lg-copt.on { background: var(--surface-2); }
/* «Ещё валюты из отчёта» под основными (владелец 08.10 вечер) */
.lg-cmore { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.lg-cmore > summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--t-sm); }
.lg-cmore > summary::-webkit-details-marker { display: none; }
.lg-cmore > summary .ic { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.lg-cmore[open] > summary .ic { transform: rotate(180deg); }
.pop.lg-cpop { max-height: min(70vh, 520px); overflow-y: auto; }
.lg-rate-f { display: block; min-height: 1em; line-height: 1.35; }
.lg-rate-f b { color: var(--ink); }

/* 08.10: ярлычок «закрой сделку» время от времени подёргивается, чтобы на него нажали */
.lg-dot { animation: lg-nudge 14s ease-in-out 3s infinite; }
@keyframes lg-nudge { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-5px) rotate(-4deg); } 94% { transform: translateX(3px) rotate(3deg); } 96% { transform: translateX(-3px) rotate(-2deg); } 98% { transform: translateX(1px); } }
.lg-dot.late { animation: lg-nudge 6s ease-in-out 1s infinite, lg-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lg-dot, .lg-dot.late { animation: none; } }

/* 08.10: «Уже есть» у кнопки карточки в чате, «Сделки не было», подписи ждущих и снятых (js/ledger-4.js, js/screens/ledger-cards.js) */
.lg-sheet .scrim, .lg-sheet .modal { z-index: 75; }
.lg-have { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 12px; }
.lg-have-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); text-align: left; font-size: var(--t-sm); }
button.lg-have-row:hover { background: var(--line); }
.lg-have-row .ic { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.lg-have-row.off { color: var(--ink-3); }
.lg-void { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: var(--t-sm); line-height: 1.4; }
.lg-void.gone { background: var(--surface-2); }
.lg-void > .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lg-void button.btnish:not(.chip) { padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.lg-form label.lg-rad { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-body); color: var(--ink); }
.lg-rad input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.lg-ro { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lg-ro:disabled { opacity: .7; }
.lg-acts { flex-wrap: wrap; }
.lg-rcw { border-top: 1px solid var(--line); }
.lg-rcw:first-child { border-top: 0; }
.lg-rcw .lg-rc { border-top: 0; min-height: 48px; }
.lg-rcw .lg-rc .chip { margin-left: 6px; vertical-align: middle; }
.lg-rwhy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 6px 10px; font-size: var(--t-sm); color: var(--ink-2); }
.lg-rwhy .grow { min-width: 220px; }
@media (pointer: coarse) { .lg-acts .btn, .lg-rwhy .btn { min-height: 44px; } .lg-top .seg.sm button { height: 36px; } }
@media (max-width: 420px) { .lg-top .seg.sm button { padding: 0 8px; } } /* пять вкладок руководителя в одну строку */
/* «Криптоадреса» (волна 17г): шестая вкладка ряда, как остальные. Ряд на узком экране прокручивается (.seg: overflow-x auto), активная вкладка выезжает в видимую часть
   (js/screens/ledger-wal.js); у края, за которым есть ещё вкладки (data-more), затухание: видно, что ряд едет дальше. Отдельной кнопки «Криптоадреса» больше нет. */
.lg-top .seg { scroll-behavior: auto; }
.lg-top .seg[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.lg-wal-sub { margin: 0 0 12px; }

/* 08.10: подсказки карточки сделки, почему выбран тип и счёт, подходящие счета кнопками (js/ledger-8.js) */
.lg-tw { line-height: 1.3; }
.lg-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink-3); line-height: 1.35; }
.lg-why.warn { color: var(--warn); }
.lg-alt { border: 0; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface); color: var(--ink); }
.lg-alt:hover { background: var(--line); }
@media (pointer: coarse) { .lg-alt { min-height: 44px; } }
/* «Счета» → вкладка «Счета» (js/screens/ledger-acc.js, владелец 08.10): Фиат / Крипта, валюты, строки счетов со значком банка.
   Значок банка: монограмма в фирменных цветах (--bk фон, --bk-ink буквы из config/banks.yaml), картинок логотипов нет. */

.lg-acc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; min-width: 0; }
.lg-n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }
.seg button[aria-pressed="true"] .lg-n { color: var(--ink-2); }

/* валюты: таблетки с переносом строки (на телефоне без прокрутки вбок) */
.lg-curs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lg-curs button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-sm);
  transition: background var(--dur-2) var(--ease), color var(--dur-1), border-color var(--dur-1); }
.lg-curs button b { font: 600 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink); }
.lg-curs button span { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.lg-curs button:hover { border-color: var(--line-2); }
.lg-curs button[aria-pressed="true"] { background: var(--inverse); border-color: var(--inverse); }
.lg-curs button[aria-pressed="true"] b { color: var(--inverse-ink); }
.lg-curs button[aria-pressed="true"] span { color: var(--inverse-ink-2); }

.lg-cur-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.lg-cur-meta { display: inline-flex; align-items: center; gap: 4px; }
.lg-warn-t { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); }
.lg-warn-t .ic { width: 12px; height: 12px; }

/* строка счёта: значок, название и реквизиты, справа остаток и кнопки */
.lg-alist { display: flex; flex-direction: column; }
.lg-a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.lg-a:first-child { border-top: 0; }
.lg-a.off { opacity: .55; }
.lg-a-main { min-width: 0; padding-top: 1px; }
.lg-a-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; overflow-wrap: anywhere; }
.lg-a-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px; color: var(--ink-3); min-width: 0; }
.lg-a-sub .mono { color: var(--ink-2); }
.lg-dot-sep { color: var(--ink-4); }
.lg-a-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lg-a-bal { font-weight: 600; white-space: nowrap; padding-top: 1px; }
.lg-a-bal.neg { color: var(--neg); }
/* отображаемый баланс (25.10): руководитель видит «сотрудникам показано: X» под настоящим остатком; кнопка владельца горит, когда сумма задана */
.lg-a-shown { color: var(--ink-3); }
.lg-a-shown b { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.lg-a-side .lg-a-shown { text-align: right; }
@media (max-width: 720px) { .lg-a-side .lg-a-shown { max-width: 13.5em; } }
.icon-btn.on { color: var(--accent-text); }

.bk { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--bk-ink, #fff);
  background: linear-gradient(155deg, color-mix(in srgb, var(--bk, #72766E) 84%, #fff) 0%, var(--bk, #72766E) 62%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .18); }
.bk b { font: 700 13px/1 var(--f-ui); letter-spacing: -.02em; }
.bk.l3 b { font-size: 10.5px; letter-spacing: 0; }
:root[data-theme="dark"] .bk { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }

/* полные реквизиты по «показать» */
.lg-rv { grid-column: 2 / -1; display: grid; gap: 2px; margin-top: 4px; padding: 6px 4px 6px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.lg-rv-l { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-height: 28px; }
.lg-rv-l .mono { color: var(--ink); overflow-wrap: anywhere; }

/* широкий экран: счета в две колонки, чтобы остаток не уезжал далеко от названия */
@media (min-width: 1180px) {
  .lg-alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .lg-a:nth-child(2) { border-top: 0; }
}

@media (max-width: 720px) {
  .lg-a { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; }
  .bk, .lg-a .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
  .lg-rv { grid-column: 1 / -1; }
  .lg-rv-l { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-rv-l .t-xs { grid-column: 1 / -1; }
}
/* Карточка сделки (владелец 08.10 с iPhone): нижние кнопки значками, «предупреждения» и «правки бота» (js/ledger-6.js), выбор счёта
   в шаге маршрута (js/ledger-7.js). Остальное карточки: ledger.css. */

/* нижние кнопки: «Сохранить» значком слева, главная по центру, «Проверено» значком справа; на телефоне значки без текста */
/* полоса липнет к самому низу шторки: её нижний отступ (28px у .drawer-body) закрыт своим фоном, под кнопками ничего не просвечивает */
.lg-acts { display: flex; flex-direction: column; gap: 8px; flex-wrap: nowrap; bottom: -28px; margin-bottom: -28px; padding-bottom: 28px; }
.lg-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.lg-bar .btn, .lg-acts-v .btn { height: 48px; }
.lg-main { flex: 1 1 auto; min-width: 0; padding: 0 14px; white-space: normal; text-align: center; line-height: 1.15; font-size: 15px; }
.lg-ib { flex: none; padding: 0 16px; }
.lg-ib .ic { width: 20px; height: 20px; }
.lg-ib[data-lg-check] .ic { color: var(--pos); }
.lg-acts-v { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-acts-v .btn { flex: 1 1 150px; }
.lg-cap { position: absolute; bottom: calc(100% + 8px); max-width: 100%; padding: 6px 10px; border-radius: 10px; background: var(--inverse); color: var(--inverse-ink);
  font-size: var(--t-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.lg-cap.l { left: 0; }
.lg-cap.r { right: 0; }
.lg-cap.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lg-cap { transition: none; } }
@media (max-width: 720px) {
  .lg-ib { width: 48px; padding: 0; }
  .lg-bl { display: none; }
  .lg-bar .lg-main { height: 52px; font-weight: 600; }
}

/* «предупреждения: N» и «правки бота: N»: чипы, по нажатию строки; в списке под строкой карточки, в карточке над формой */
.lgf { display: flex; flex-direction: column; gap: 6px; }
.lg-rcw > .lgf { padding: 0 6px 10px; }
.lgf-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lgf-t { height: 28px; padding: 0 10px; font-size: var(--t-sm); }
.lgf-t .ic:last-child { transition: transform var(--dur-1) var(--ease); }
.lgf-t[aria-expanded="true"] { background: var(--inverse); color: var(--inverse-ink); }
.lgf-t[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
.lgf-p { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--t-sm); line-height: 1.4; overflow-wrap: anywhere; }
.lgf-p[hidden] { display: none; }
.lgf-p.w { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.lgf-l + .lgf-l { padding-top: 6px; border-top: 1px solid var(--line); }
@media (pointer: coarse) { .lgf-t { height: 36px; padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .lgf-t .ic:last-child { transition: none; } }

/* выбор счёта: кнопка с подписью «банк •1234 · ответственный», окно с группами, поле для сторонних реквизитов */
.lg-pk { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-pkb { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); text-align: left; }
.lg-pkb:hover { border-color: var(--ink-3); }
.lg-pkb .ic { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); }
.lg-pf { flex: 1 1 auto; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.lg-pf-unset { color: var(--warn); } /* бот не определил счёт: менеджер выбирает (js/ledger-8.js) */
.lg-pkb:has(.lg-pf-unset) { border-color: var(--warn); }
.lg-ext { height: 44px; font-size: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.pop.lg-apop { width: min(380px, calc(100vw - 16px)); max-width: none; max-height: min(72vh, 560px); overflow-y: auto; padding: 6px; }
.lg-pr { height: auto; min-height: 48px; padding: 8px 10px; justify-content: space-between; align-items: center; }
.lg-pr.on { background: var(--surface-2); color: var(--ink); }
.lg-pr-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lg-pr-l { color: var(--ink); overflow-wrap: anywhere; }
.lg-pr-b { flex: none; color: var(--ink-3); white-space: nowrap; }

/* шаг маршрута на телефоне: суммы на всю ширину, чтобы «19 000 000» не обрезалось */
@media (max-width: 720px) {
  .lg-sums { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .lg-sums label { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; }
  .lg-sums .lg-num { width: auto; min-width: 0; }
  .lg-sums .icon-btn { align-self: flex-end; }
}

/* «Движения» на телефоне: подписи счетов длиннее (банк, 4 знака, ответственный), поэтому текст на отдельной строке под датой и суммой */
@media (max-width: 720px) {
  .lg-mv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
  .lg-mv > .grow { grid-column: 1 / -1; grid-row: 2; }
  .lg-mv > .num { grid-column: 2; grid-row: 1; }
}
/* Список «Закрыть сделки» у кружка (js/ledger-3.js, владелец 18.10: 134 строки не прокручивались, колесо крутило чат под окном): окно не выше
   экрана, шапка с поиском, порядком и менеджерами стоит, прокручиваются только строки и прокрутка не уходит на страницу под окном */
.pop.lg-pop { display: flex; flex-direction: column; width: min(460px, calc(100vw - 16px)); max-width: none; max-height: min(680px, calc(100vh - 24px)); max-height: min(680px, calc(100dvh - 24px)); padding: 0; overflow: hidden; overscroll-behavior: contain; }
.lg-lh { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); }
.lg-lt { padding: 4px 6px 0; }
.lg-lt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-pop:has(> .pop-x) .lg-lt { padding-right: 40px; }
.lg-tools { display: flex; align-items: center; gap: 8px; }
.lg-q { flex: 1; min-width: 0; }
.lg-q .input { height: 36px; }
.lg-sort { flex: none; }
.lg-ppl, .lg-links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lg-ppl::-webkit-scrollbar, .lg-links::-webkit-scrollbar { display: none; }
.lg-ppl:empty, .lg-links:empty { display: none; }
.lg-ppl .chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-lb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; }
.lg-none .chip { margin-left: 6px; }
.lg-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* клиент и менеджер одной строкой */
/* 18.10: галочка «На проверке» в шапке списка (js/ledger-3.js); в карточке «К расчёту» в шапке и красная «Отправить всё равно» (js/ledger-9.js) */
.lg-rev { cursor: pointer; }
.lg-rev input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
.drawer-head .lg-chat { flex: none; }
.lg-bar .btn.danger, .lg-bar .btn.danger:hover { background: var(--neg); color: #fff; border-color: transparent; }
@media (max-width: 480px) { .drawer-head .lg-chat { padding: 0 10px; } }
/* Автопроверка отправленной карточки (js/ledger-check.js, владелец 19.10): блок «Проверка системы» в карточке, отметки и «Только расхождения»
   в «На проверку», галочка «Оповестить ответственного» у правки отправленной (js/ledger-6.js). */
.lgc { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.lgc.bad { border-color: var(--neg); }
.lgc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.lgc.bad .lgc-h b { color: var(--neg); }
.lgc.ok .lgc-h b { color: var(--pos); }
.lgc.wait .lgc-h b { color: var(--warn); }
.lgc-l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lgc-i { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); line-height: 1.45; }
.lgc-i .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.lgc-i.ok .ic { color: var(--pos); }
.lgc-i.bad .ic { color: var(--neg); }
.lgc-i.wait .ic { color: var(--warn); }
.lgc-i.info { color: var(--ink-2); }
.lgc-i .grow { min-width: 0; overflow-wrap: anywhere; }
.lgc-i .btn { flex: none; }
.lgc-edit { margin-top: 8px; }
.lgc-hint .lgc-l { margin-top: 0; }
.lgc-hint a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.lgc-first { padding: 0 14px 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.lgc-first.bad { color: var(--neg); }
.lgc-only { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); cursor: pointer; }
.lgc-only input, .lg-notify input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.lg-card label.lg-notify, .lg-notify { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-2); cursor: pointer; }
/* телефон: галочка отдельной строкой под кнопками, а не столбиком рядом с ними */
@media (max-width: 640px) { .lg-bar { flex-wrap: wrap; } .lg-bar .lg-notify { flex: 1 1 100%; order: 9; justify-content: center; padding-top: 4px; } }
/* «Счета» → вкладка «Разобрать» (js/screens/ledger-mail.js, ДДС этап 4, волна 3): разделы кнопками-чипами с числами, строки писем, кандидаты «Связать»,
   кружок с числом на вкладке. Список в карточке .card.flush, строки как в «Операциях» (.lgo-row). */
.lgm-secs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lgm-secs .chip { height: 30px; padding: 0 12px; }
.lgm-secs .chip b { font-variant-numeric: tabular-nums; }
.lgm-note { padding: 8px 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.lgm-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.lgm-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lgm-sum { margin-top: 4px; font-variant-numeric: tabular-nums; }
.lgm-why { margin-top: 2px; color: var(--neg); }
.lgm-why.lgm-calm { color: var(--ink-2); } /* «Безопасность» и пометки без тревоги: серым, красный только в «Тревогах» */
.lgm-have { margin-top: 2px; color: var(--ink-2); }
.lgm-cand { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: var(--t-sm); }
.lgm-acts { flex: none; justify-content: flex-end; }
.lgm-pick { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.lgm-pick .btn { height: auto; min-height: 30px; padding: 6px 10px; white-space: normal; text-align: left; justify-content: flex-start; }
.lgm-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--neg); color: #fff; font-size: var(--t-xs); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.lgm-main .row > b::first-letter { text-transform: uppercase; } /* «похоже на Permata» с большой буквы */
.lgm-void .btn.danger { background: var(--neg); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .lgm-n, :root[data-theme="dark"] .lgm-void .btn.danger { color: var(--inverse-ink); } /* белое на светлом красном не читается */
@media (max-width: 640px) { .lgm-row { flex-direction: column; } .lgm-acts { justify-content: flex-start; } .lgm-secs { padding: 10px; } /* на телефоне кнопки не ниже 36 px */
  .lgm-secs .chip { height: 36px; } .lgm-row .btn, .lgm-cand .btn, .lgm-pick .btn, .lgm-void .btn { min-height: 36px; } .lgm-pick .btn { padding: 8px 12px; } }
/* «Счета» → вкладка «Лимиты» (js/screens/ledger-lim.js, ДДС, владелец 20.10): группа на валюту, строка со счётом, остатком через дробь и полосой (.bar панели).
   Цвета только токены панели: жёлтый (--warn) и красный (--neg) на числе и полосе; пустая красная полоса получает красноватую дорожку, чтобы её было видно. */
.lglim-g { margin-bottom: 16px; }
.lglim-h { margin: 0 2px 8px; }
.lglim-msg { padding: 16px 2px; }
.lglim-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.lglim-g .card.flush > .lglim-row:first-child { border-top: 0; }
.lglim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lglim-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.lglim-name { font-weight: 500; overflow-wrap: anywhere; }
.lglim-n { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.lglim-v { font-size: var(--t-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.lglim-u { font-size: var(--t-xs); color: var(--ink-3); }
.lglim-foot { display: flex; flex-wrap: wrap; gap: 2px 6px; min-height: 1em; }
.lglim-row.is-neg .bar { background: color-mix(in srgb, var(--neg) 22%, transparent); }
.lglim-who { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.lglim-gen { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
@media (max-width: 640px) { .lglim-row { padding: 12px; } .lglim-head { align-items: flex-start; } }
.lglim-gen a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.lglim-off > summary { cursor: pointer; }
/* «Счета» → вкладка «Тикеты» (js/screens/ledger-tick.js, волна 37) и значок числа у пункта «Счета» (js/ledger-tick-badge.js). Цвета только токены панели. */
.lgt-top { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lgt-row { align-items: flex-start; justify-content: space-between; padding: 12px 16px; }
.lgt-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.lgt-meta { align-items: center; }
.lgt-title { font-weight: 500; overflow-wrap: anywhere; }
.lgt-body { color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.lgt-links { align-items: center; }
.lgt-sum { font-variant-numeric: tabular-nums; }
.lgt-sum.neg { color: var(--neg); }
.lgt-acts { flex: none; }
.lgt-more { padding: 12px 16px; text-align: center; border-top: 1px solid var(--line); }
.lgt-done { color: var(--ink-2); }
.lgt-row.is-done .lgt-title { color: var(--ink-2); }
.lgt-who { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .lgt-top, .lgt-row { padding: 12px; } .lgt-row { flex-direction: column; align-items: stretch; } .lgt-acts .btn { width: 100%; } }
/* на кнопке «Ещё» рядом может стоять число непрочитанных новостей: наш значок слева */
.dock [data-more] [data-tick-badge] { right: auto; left: 6px; }
.more-tile[href$="#ledger"] { position: relative; }
.more-tile[href$="#ledger"] .badge { position: absolute; top: 6px; right: 8px; }
/* Окно «Операция» (js/ledger-ops.js, ДДС этап 2, владелец 18.10): виды кнопками, поля формой «Счетов» (.lg-form), под полями «было → станет»,
   предупреждения как в карточке (.lg-warn). Слой поверх карточки сделки: .lg-sheet (css/screens/ledger.css). */
.lgo .modal { width: min(520px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.lgo .t-h2 { display: flex; align-items: center; gap: 8px; }
.lgo .t-h2 .ic { width: 18px; height: 18px; color: var(--ink-3); }
.lgo-k { margin-top: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lgo-k::-webkit-scrollbar { display: none; }
.lgo-f { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lgo-f .row > label { flex: 1 1 0; min-width: 0; }
.lgo-chk { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--ink) !important; cursor: pointer; }
.lgo-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.lgo-w { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lgo-w[hidden] { display: none; }
.lgo-h { margin-top: 12px; color: var(--ink-2); line-height: 1.6; font-variant-numeric: tabular-nums; }
.lgo-h:empty { display: none; }
.lgo-h b.neg { color: var(--neg); }
.lgo .lg-warn { margin-top: 12px; }
.lgo .btn.danger, .lgo .btn.danger:hover { background: var(--neg); color: #fff; border-color: transparent; }
/* вкладка «Операции» (js/screens/ledger-ops-list.js) */
/* закуп за день над списком (владелец 20.10): по строке на валюту */
.lgo-pd { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; margin-bottom: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.lgo-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.lgo-legs { margin-top: 4px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.lgo-acts { flex: none; justify-content: flex-end; }
.lgo-void { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 260px; max-width: 340px; }
.lgo-void > .t-xs, .lgo-void > label { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
/* семь видов (ревью 19.10: «Приход» и «Расход») на телефоне в два ряда, а не прокруткой: иначе последние не видно */
@media (max-width: 640px) { .lgo-row { flex-direction: column; } .lgo-acts { justify-content: flex-start; } .lgo-k { overflow: visible; } .lgo-k .seg { flex-wrap: wrap; border-radius: 18px; } }
/* «Счета», волна 16в (владелец 12.10): выписка по счёту (js/screens/ledger-stmt.js), сверка (ledger-recon.js), «Ввести остатки» (ledger-open.js),
   окно счёта с плашкой «Проверено» (ledger-form.js), «Движения» с фильтрами и итогом (ledger-moves.js), пометки в списке счетов (ledger-acc.js). */

/* список счетов: строка нажимается (выписка), метка «проверь» кнопка, счётчик «проверить N» фильтр */
.lg-a[data-lga] { cursor: pointer; border-radius: 0; transition: background var(--dur-1) var(--ease); } /* без скругления: верхняя линия строки (ledger-acc.css) загибалась дужками по краям (аудит 19.10, п. 10) */
.lg-a[data-lga]:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.lg-a[data-lga]:focus-visible { outline: none; box-shadow: var(--focus); }
.lg-a-go { display: inline-grid; place-items: center; width: 16px; color: var(--ink-4); }
.lg-a-go .ic { width: 14px; height: 14px; }
.lg-since { margin-top: 2px; }
button.lg-warn-t { background: none; border: 0; padding: 2px 6px; margin: -2px -4px; border-radius: var(--r-pill); cursor: pointer; font: inherit; }
button.lg-warn-t:hover { background: var(--warn-soft); }
button.lg-warn-t[aria-pressed="true"] { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
button.chip.warn { border: 0; cursor: pointer; }

/* окно счёта: плашка «Проверено» и остаток с датой */
.lg-chk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); }
.lg-chk .ic { width: 16px; height: 16px; flex: none; color: var(--warn); }
.lg-chk .btn { flex: none; }
.lg-bal label { min-width: 150px; }
.lg-bal input[type="datetime-local"] { min-width: 0; }
@media (max-width: 720px) { .lg-bal label { flex: 1 1 100%; } } /* телефон: остаток и дата друг под другом, время в поле видно целиком (ревью волны 16в) */

/* выписка */
.lg-st-h { min-width: 0; overflow-wrap: anywhere; }
.lg-st-bal { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.lg-st-bal.neg { color: var(--neg); }
.lg-st-list { margin-top: 14px; display: flex; flex-direction: column; }
.lg-st-r { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.lg-st-r:first-child { border-top: 0; }
.lg-st-r.off { opacity: .6; }
.lg-st-d { padding-top: 2px; font-variant-numeric: tabular-nums; }
.lg-st-o { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.lg-st-a { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.lg-st-a .pos { color: var(--pos); }
.lg-st-a .neg { color: var(--neg); }
.lg-st-line { margin: 10px 0 2px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border-top: 1px dashed var(--line-2); font-size: var(--t-xs); color: var(--ink-3); text-align: center; }

/* сверка */
.lg-rc-box { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.lg-rc-box label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.lg-rc-neg { flex-direction: row !important; align-items: center; }
.lg-rc-res { min-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* «Ввести остатки» */
.lg-op { display: flex; flex-direction: column; gap: 14px; }
.lg-op > * { flex: none; }
.lg-op-at { display: flex; flex-direction: column; gap: 4px; max-width: 320px; font-size: var(--t-sm); color: var(--ink-2); }
.lg-op-g { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lg-op-gh { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: var(--surface-2); }
.lg-op-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, auto) minmax(150px, 190px); align-items: center; gap: 4px 12px; padding: 8px 12px; border-top: 1px solid var(--line); }
.lg-op-gh + .lg-op-r { border-top: 0; }
.lg-op-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.lg-op-b { display: flex; flex-direction: column; align-items: flex-end; }
.lg-op-f { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.lg-op-n { display: inline-flex; align-items: center; gap: 4px; color: var(--neg); }
.lg-op-tot { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); font-size: var(--t-sm); }
.lg-op-tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.lg-op-tr .mono { min-width: 48px; }

/* «Движения»: фильтры и итог */
.lg-fl { margin-bottom: 8px; }
.lg-fl-l { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.lg-mt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 4px 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.lg-mt .pos { color: var(--pos); }
.lg-mt .neg { color: var(--neg); }

@media (max-width: 720px) {
  .lg-st-r { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-st-d { grid-column: 1 / -1; padding-top: 0; }
  .lg-st-bal { font-size: 28px; }
  .lg-op-r { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-op-f { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .lg-op-f .input { flex: 1; min-width: 0; }
  .lg-chk { flex-wrap: wrap; }
  .lg-fl-l { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .lg-a[data-lga] { transition: none; } }
/* «Счета»: реквизиты полями, CVV, запросы CVV, архив (волна 38, js/screens/ledger-req.js, ledger-cvv.js, ledger-sec.js, ledger-arch.js). Только токены панели. */

/* окно счёта: блок реквизитов */
.lgr-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.lgr-box label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); min-width: 0; }
.lgr-box-h { align-items: center; }
.lgr-card { align-items: flex-end; }
.lgr-exp { width: 112px; flex: none; }
.lgr-cvv-f > label { width: 160px; max-width: 100%; }
.lgr-cvv-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; }
.lgr-note { min-height: 0; }
.lgr-note:empty { display: none; }
.lgr-danger { margin-top: 4px; }
.lgr-danger .btn { flex: 1 1 0; }

/* строка CVV в раскрытых реквизитах списка */
.lgr-cvv { grid-template-columns: 72px 56px minmax(0, 1fr); }
.lgr-cvv .btn { justify-self: start; }
.lgr-cvv-n { grid-column: 2 / -1; }

/* окно с кодом 2FA и показ на 60 секунд */
.lgr-code { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lgr-sub { color: var(--ink-2); overflow-wrap: anywhere; }
.lgr-code-in { font-size: 22px; letter-spacing: .28em; text-align: center; height: 52px; }
.lgr-err { min-height: 1.2em; color: var(--neg); overflow-wrap: anywhere; }
.lgr-err:empty { min-height: 0; }
.lgr-shown { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lgr-big { font-size: 40px; font-weight: 600; letter-spacing: .24em; text-align: center; padding: 14px 0 2px; font-variant-numeric: tabular-nums; }
.lgr-shown > .t-xs { text-align: center; }
.lgr-left { text-align: center; color: var(--warn); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* блок «Запросы CVV» над списком счетов */
.lgr-reqs { margin-bottom: 12px; padding: 12px 16px; }
.lgr-reqs-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lgr-reqs-h .ic { width: 16px; height: 16px; color: var(--ink-3); }
.lgr-req { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.lgr-req:first-of-type { border-top: 0; }
.lgr-req.done { opacity: .62; }
.lgr-req-t { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .lgr-card > label.grow { flex: 1 1 100%; }
  .lgr-req { flex-direction: column; align-items: stretch; }
  .lgr-big { font-size: 34px; }
}
/* Панель, «Чаты»: плавающая кнопка калькулятора на телефоне (js/screens/calc-fab.js, L-37) и перетаскивание плавающих кнопок по вертикали (js/screens/fab-drag.js): язычок сделок (js/ledger-3.js) и эта кнопка.
   Телефон (до 720 px): строка .cb-bar над полем ответа не показывается (калькулятор там вместо неё), у кнопки круглый вид, 48 px под палец, правый край. Положение: переменная --fab-top (её пишет
   fab-drag.js, пока кнопку не двигали, её нет и действует умолчание: над язычком сделок, по видимой части экрана --vvh и --vvt из js/kb.js, чтобы клавиатура не уводила кнопку). Кнопки не видно, пока
   открыто окно калькулятора, развёрнуто поле ответа или открыты шаблоны (они лежат на том же месте); при клавиатуре она остаётся. Только токены, обе темы. */
.cb-fab { display: none; position: fixed; z-index: 45; right: 8px; top: var(--fab-top, calc(var(--vvt, 0px) + var(--vvh, 100dvh) * .46 - 64px)); width: 48px; height: 48px; margin: 0; padding: 0; place-items: center;
  border-radius: 50%; border: 1px solid var(--glass-line); background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-pop); cursor: pointer; opacity: .95;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cb-fab .ic { width: 22px; height: 22px; }
.cb-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cb-fab:disabled { opacity: .45; }
.cb-fab[data-drag], .lg-dot[data-drag] { opacity: 1; animation: none; box-shadow: var(--sh-pop), 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.lg-dot[data-fab] { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 720px) {
  body:has(.ch[data-pane="chat"]) .cb-fab { display: grid; } /* только в открытом диалоге: на списке чатов (pane list) поле ответа есть в DOM, но скрыто */
  .cb-bar[data-fab] { display: none; }
}
body:has(.cb-panel) .cb-fab, body:has(.ch-compose.cx-full) .cb-fab, body:has(.tpl-win) .cb-fab { display: none !important; }
/* Сворачиваемая шапка-сводка (js/screens/hero-fold.js): «Наши адреса» (wallets.js) и «Наши счета» (ledger-sum.js, волна 17г, владелец 12.10). Вид тот же, что у героя
   криптоадресов (карточка hero, классы wl-hero, wl-pg, wl-hero-foot из wallets.css): здесь только кнопка в углу, свёрнутая строка и раскладка рядом. */
.card.hf { gap: 0; }
.hf > .kpi-top { align-items: center; }
.hf-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.hf-btn:hover { transform: none; }
.hf-btn .hf-dn, .hf.is-folded .hf-btn .hf-up { display: none; }
.hf.is-folded .hf-btn .hf-dn { display: block; }
.hf .kpi-label { min-width: 0; }
.hf-line { display: none; }
.hf.is-folded .hf-line { display: inline; }
.hf-line .num { font-weight: 600; }
.hf-nb { white-space: nowrap; } /* строка переносится по смыслу: «2 не проверено» не рвётся */
.hf-line .chip { margin-left: 4px; vertical-align: 1px; }
.hf.is-folded .hf-x { display: none; }

/* тело сворачивается по высоте и прозрачности (до 180 мс); свёрнутое не берёт фокус и не читается с экрана (visibility) */
.hf-fold { flex: 1 1 auto; display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .18s ease, opacity .18s ease; }
.hf-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.hf-pad { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.hf.is-folded .hf-fold { flex-grow: 0; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .18s ease, opacity .18s ease, visibility 0s linear .18s; }
@media (prefers-reduced-motion: reduce) { .hf-fold, .hf.is-folded .hf-fold { transition: none; } }

/* криптоадреса: рядом с шапкой «Чей это адрес?». Шапка свёрнута: обе карточки на всю строку, слева дыры нет */
.wl-top.hf-on > .wl-hero, .wl-top.hf-on > .wl-check { grid-column: 1 / -1; }
.wl-top.hf-on .wl-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { .wl-top.hf-on .wl-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .wl-top.hf-on .wl-rules { grid-template-columns: minmax(0, 1fr); } }

/* счета: шапка на всю ширину; число и текст слева, таблетки по валютам справа, внизу пояснения. Левая колонка не уже 220 px, правая берёт столько, сколько осталось,
   и переносит группы валют строкой ниже (боевой объём 89 счетов: волна 17г). Валюта с 10 счетами и больше рисуется полосой толщиной с таблетку (16 px) (js/screens/ledger-sum.js, MANY) */
.lg-sum .chip[aria-pressed="true"] { background: var(--hero-ink); color: var(--hero-bg); }
.lg-sum .wl-hero-of .chip { margin-left: 2px; }
.lg-sum .wl-pg-row { min-width: 0; }
.lg-sum .wl-pg-bar { width: 144px; height: 16px; align-items: stretch; }
.lg-sum .wl-pg-bar > i { flex: 1 1 0; width: auto; min-width: 10px; }
.lg-sum .wl-pg-code { white-space: nowrap; }
@media (min-width: 900px) {
  .lg-sum .hf-pad { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, auto); align-items: end; gap: 18px 32px; }
  .lg-sum .wl-pg-row { margin-top: 0; justify-content: flex-end; }
  .lg-sum .wl-hero-foot { grid-column: 1 / -1; }
}
/* Пульт 2.0: комментарии, метки и скам клиента (client-notes*.js, владелец 06.10): узкий блок в карточке и в шторке «Чатов»,
   плашки СКАМ, Скам?, метки и источник у имени во всех списках. Только токены. */
.cn { display: grid; gap: 8px; margin-top: 12px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cn-solo { margin-top: 0; }
/* одна строка (владелец 08.10): слева метки и «N комментариев», справа три тихие кнопки; скам серый до наведения и нажатия */
.cn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 34px; }
.cn > .cn-row { padding: 0; border-top: 0; } /* тот же класс у «Контактов» (contacts.css) с отступами и чертой */
.cn-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.cn-tags:empty { display: none; }
.cn-bs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.btn.sm.cn-b { padding: 0 10px; }
.cn-b .ic { color: var(--ink-3); }
.cn-b[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
.cn-scb:hover, .cn-scb[aria-expanded="true"], .cn-scb:hover .ic, .cn-scb[aria-expanded="true"] .ic { color: var(--neg); }
.cn-scb:hover, .cn-scb[aria-expanded="true"] { background: var(--neg-soft); }
.cn-tg { cursor: pointer; border: 1px solid transparent; }
.cn-tg.on { border-color: currentColor; }
.cn-pq { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--warn); }
.cn-scam { background: var(--scam-bg); color: var(--scam-ink); border-color: var(--scam-bd); font-weight: 700; letter-spacing: .02em; }
.cn-sus { background: var(--sus-bg); color: var(--sus-ink); border-color: var(--sus-bd); font-weight: 700; }
.ch-it.on .cn-scam { border-color: var(--scam-bd-on); }
.ch-it.on .cn-sus { border-color: var(--sus-bd-on); }
.cn-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.cn-lk { color: var(--ink-2); font-size: inherit; text-decoration: underline dashed var(--ink-4); text-underline-offset: 3px; }
.cn-lk:hover { color: var(--ink); }
.cn-lk.arm { color: var(--neg); text-decoration-color: var(--neg); }
.cn-sb { display: grid; gap: 3px; padding: 8px 10px; border-radius: var(--r-md); background: var(--neg-soft); border: 1px solid color-mix(in srgb, var(--neg) 30%, transparent); }
.cn-sb.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
/* баннер скама одной строкой: СКАМ · причина · кто, когда · чат · открыть чат; переносится по словам */
.cn-sl { margin: 0; color: var(--ink); font-size: var(--t-sm); line-height: 1.75; overflow-wrap: anywhere; }
.cn-sl .chip { vertical-align: 1px; }
.cn-sp { margin: 0 3px; color: var(--ink-3); }
.cn-sb.neg, .cn-sb.warn { color: var(--ink-2); }
.cn-sba { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.cn-act { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-act:empty { display: none; }
.cn-gh { margin-top: 4px; }
.cn-pick { margin-top: 0; }
.cn-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 3px 0; text-align: left; }
.cn-opt[disabled] { opacity: .4; cursor: default; }
.cn-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-in, .cn-rs, .cn-so { flex: 1; min-width: 150px; }
.cn-so { width: 100%; }
.cn-hb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; transition: background var(--dur-1); }
.cn-hb:hover, .cn-hb[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
.cn-hb .ic { width: 14px; height: 14px; color: var(--ink-3); }
.cn-add { display: grid; gap: 8px; }
.cn-ta { width: 100%; min-height: 56px; }
ul.cn-list { display: grid; margin: 0; padding: 0; list-style: none; } /* только список заметок: одноимённый класс карточки «На ваше решение» (contacts.js) терял из-за этого поля (аудит 19.10, п. 4) */
.cn-n { padding: 8px 0; border-top: 1px solid var(--line); }
.cn-nt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-body); }
.cn-nt.open { display: block; overflow: visible; }
.cn-more { font-size: var(--t-xs); color: var(--ink-2); text-decoration: underline dashed var(--ink-4); text-underline-offset: 3px; }
.cn-more[hidden] { display: none; }
.cn-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.cn-nm b { color: var(--ink-2); font-weight: 600; }
.cn-ac { padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); }
/* удалённый комментарий (видит владелец): приглушён, слева красноватая кромка, внизу «удалён: имя, время»; зачёркивания нет */
.cn-n.is-del { padding-left: 10px; border-left: 3px solid color-mix(in srgb, var(--neg) 55%, transparent); }
.cn-n.is-del .cn-nt { color: var(--ink-3); }
.cn-dl { color: var(--neg); font-weight: 600; }
/* прежние версии: «было» с убранными словами на мягком красном, «стало» с добавленными на мягком зелёном */
.cn-vs { display: grid; gap: 8px; margin-top: 6px; padding: 4px 10px; border-left: 2px solid var(--line-2); font-size: var(--t-xs); }
.cn-v { display: grid; gap: 3px; overflow-wrap: anywhere; }
.cn-vl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; white-space: pre-wrap; line-height: 1.55; }
.cn-vk { color: var(--ink-3); font-weight: 600; }
.cn-rm, .cn-ad { border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cn-rm { background: var(--neg-soft); color: var(--neg); }
.cn-ad { background: var(--pos-soft); color: var(--pos); }
.cn-rq { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.cn-rqi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cn-rqi .grow { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.cn-rl { display: grid; gap: 12px; }
.cn-rl .cn-rqi { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cn-reqb .badge { margin-left: 2px; }
@media (pointer: coarse) { .cn-tg, .cn-hb { height: 32px; } .btn.sm.cn-b { height: 38px; } .cn-lk, .cn-more { padding: 6px 0; } }

/* плашки у имени в списках: имя сжимается, плашки остаются, длинный ряд переносится (ничего не прячется до наведения) */
.cn-src { color: var(--ink-2); }
.ch-nmw { flex-wrap: wrap; row-gap: 2px; }
.ch-nmw .ch-nm { min-width: 5ch; max-width: 100%; }
.ch-it.sc-c { box-shadow: inset 4px 0 0 var(--edge-c); }
.ch-it.sc-s { box-shadow: inset 4px 0 0 var(--edge-s); }
.ch-it.on.sc-c { box-shadow: inset 4px 0 0 var(--edge-c-on); }
.ch-it.on.sc-s { box-shadow: inset 4px 0 0 var(--edge-s-on); }
.ch-hr { flex-wrap: wrap; row-gap: 3px; }
.ch-hr .ch-hn { flex: 0 1 auto; min-width: 5ch; }
.ch-hr .chip { flex: none; }
.cl-nmr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; }
.cl-nmr .chip { flex: none; }
.cl-nmr .cl-name { flex: 0 1 auto; min-width: 4ch; }
.now-nick-line .chip { flex: none; }
.cd-namerow .chip { flex: none; }
/* Карточка клиента, шапка (владелец 09.10): аккаунты логотипами стопкой внахлёст (AccBadge.stack, ряд, css/screens/acc-badge.css) и значение, которое ещё сохраняется
   (js/screens/cardhead-accs.js, cardhead-save.js). Цвета, радиусы и сроки только токены. */
.cd-an { display: contents; } /* метки у имени в одном месте, чтобы источник обновлялся на месте; раскладка строки имени прежняя */
.cd-accst { display: inline-flex; align-items: center; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; border-radius: var(--r-pill); }
button.cd-accst { cursor: pointer; gap: 4px; }
button.cd-accst:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cd-acl { display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font: 600 10px/1 var(--f-ui); }
.cd-accx { display: inline-flex; color: var(--ink-3); transition: transform var(--dur-1) var(--ease); }
.cd-accx .ic { width: 13px; height: 13px; }
button.cd-accst[aria-expanded="true"] .cd-accx { transform: rotate(180deg); }
.cd-meta > .cd-accl { flex-basis: 100%; display: block; font-size: var(--t-xs); color: var(--ink-2); margin-top: -2px; }
.cd-accl > span { white-space: nowrap; }
/* поле сохраняется: значение уже новое, но сервер ещё не подтвердил */
[data-cd-pend] { opacity: .55; transition: opacity var(--dur-1) var(--ease); }
@media (pointer: coarse) { button.cd-accst { padding: 7px 6px; margin: -7px -6px; } }
@media (prefers-reduced-motion: reduce) { .cd-accx, [data-cd-pend] { transition: none; } }
/* Пульт 2.0, шторка «Карточка клиента» (владелец 09.10): прокрутка. Строка вкладок закреплена вверху шторки (cardscroll-bar.js ведёт высоту
   --cd-tabs-h и класс stuck); при упоре прокрутка шторки не уходит на страницу под ней (там листалась лента «Чатов»); колонка дат и плашки
   дат диалога липнут под строкой вкладок; таблица «Сделки» стоит в окне с собственной прокруткой, а её упор передаёт колесо шторке
   (overscroll-behavior по умолчанию auto: сначала список, потом шторка, шторка до страницы не доходит). Раскладка и размеры из card.css и dialog.css. */

/* тело шторки: прокрутка остаётся внутри; scroll-padding под строкой вкладок для scrollIntoView и фокуса */
.cd-drawer .cd-body { --cd-tabs-h: 54px; overscroll-behavior: contain; scroll-padding-top: calc(var(--cd-tabs-h) + 6px); }
/* липкая строка прижимается к краю содержимого, без отступа тела: верхний отступ переехал на первый блок (иначе над строкой видна полоса проезжающего текста) */
.cd-drawer .cd-body { padding-top: 0; }
.cd-drawer .cd-body > :first-child { margin-top: 22px; }

/* строка вкладок: липнет к верху тела, на всю его ширину, фон закрывает то, что проезжает под ней; значки вкладок и переключатель аккаунта остаются в ней */
.cd-drawer .cd-tabsbar { position: sticky; top: 0; z-index: 4; margin: 14px -24px 6px; padding: 8px 24px; background: var(--surface); scroll-margin-top: calc(-1 * (var(--cd-tabs-h) + 6px)); }
.cd-drawer .cd-tabsbar.stuck { box-shadow: 0 1px 0 var(--line); }

/* диалог: колонка дат и плашка дня липнут не к самому верху, а под строкой вкладок */
.cd-drawer .cd-rail { top: calc(var(--cd-tabs-h) + 10px); max-height: calc(100vh - var(--cd-tabs-h) - 160px); max-height: calc(100dvh - var(--cd-tabs-h) - 160px); }
.cd-drawer .cd-day { top: calc(var(--cd-tabs-h) + 14px); }

/* сделки: «Показать раньше» над списком */
.cd-earlier { margin: 0 0 8px; }
/* список в своём окне, новые сделки внизу; помещается под строкой вкладок, фильтрами и счётчиком; на телефоне card.css снимал прокрутку (overflow: visible), здесь возвращаем:
   иначе новые сделки (внизу списка из сорока) были бы в нескольких экранах от начала вкладки */
.cd-drawer .cd-deals-wrap { overflow: auto; max-height: max(260px, calc(100vh - 300px)); max-height: max(260px, calc(100dvh - 300px)); }
@media (max-width: 720px) {
  .cd-drawer .cd-body > :first-child { margin-top: 16px; }
  .cd-drawer .cd-tabsbar { margin: 10px -14px 6px; padding: 8px 14px; }
}
/* Пульт 2.0: скамер без диалога (scam-add.js), связанные аккаунты (card-6.js) и вкладка «KYC» (card-7.js, card-8.js, card-16.js), владелец 07.10, проверка плательщика 08.10. Только токены. */
.sc-f { display: grid; gap: 10px; }
.sc-lead { margin: 0; }
.sc-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.sc-l { display: grid; gap: 3px; min-width: 0; }
.sc-l .cd-in, .sc-l .select { width: 100%; height: 34px; }
.sc-l .textarea { min-height: 64px; }
.sc-lk { min-height: 20px; display: grid; gap: 4px; }
.sc-hit, .sc-warn, .sc-bad { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; border-radius: var(--r-md); overflow-wrap: anywhere; }
.sc-hit { background: var(--neg-soft); color: var(--ink); }
.sc-hit .ic { color: var(--neg); flex: none; margin-top: 2px; }
.sc-warn { background: var(--warn-soft); color: var(--ink); }
.sc-warn .ic { color: var(--warn); flex: none; margin-top: 2px; }
.sc-bad { color: var(--warn); padding: 0; }
.sc-list { display: grid; gap: 0; margin-top: 14px; }
.sc-list .t-label { margin-bottom: 6px; }
.sc-r { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.sc-r .grow { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.sc-id { font-weight: 600; font-size: var(--t-sm); }
.sc-cf { flex: 1 0 100%; }
.sc-cf .cd-in { flex: 1; min-width: 160px; }
.sc-inline { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.sc-inline[hidden] { display: none; }
.sc-open { flex: none; }

.lk { display: grid; gap: 8px; margin-bottom: 18px; }
.lk-f { margin-top: 0; }
.lk-in { width: 100%; }
.lk-res { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.lk-res:empty, .lk-picked:empty { display: none; }
.lk-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--r-md); text-align: left; border: 1px solid transparent; }
.lk-pick.on { background: var(--accent-soft); border-color: var(--accent-text); }
.lk-pick[disabled] { opacity: .5; cursor: default; }
.lk-picked { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); }
.lk-r { align-items: flex-start; gap: 8px; }
.lk-r .li-main { flex: 1; min-width: 0; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.lk-t { min-width: 0; flex: 1; }
.lk-t .li-title, .lk-t .li-sub { white-space: normal; overflow-wrap: anywhere; }
.lk-a { flex: none; padding-top: 2px; }
.lk-r.sc-c { box-shadow: inset 4px 0 0 var(--edge-c); padding-left: 10px; }
.lk-r.sc-s { box-shadow: inset 4px 0 0 var(--edge-s); padding-left: 10px; }

.kc { display: grid; gap: 4px; }
/* KYC проще (владелец 08.10): строка «что это и зачем» и одна кнопка, форма с выбором вида записи */
.kc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.kc-top p { margin: 0; flex: 1 1 240px; color: var(--ink-2); }
.kc-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--surface); flex: none; }
.kc-f { margin: 0 0 14px; }
.kc-kind { justify-self: start; }
.kc-who { margin: 10px 2px 0; }
.kc-own { display: flex; align-items: center; gap: 10px; }
.kc-n { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.kc-r { align-items: flex-start; gap: 10px; }
.kc-r .li-main { min-width: 0; flex: 1; }
.kc-r .li-title, .kc-r .li-sub { white-space: normal; overflow-wrap: anywhere; }
.kc-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 2px; }
.kc-l:empty { display: none; }
.kc-a { display: flex; gap: 2px; flex: none; }
.kc-a .arm { background: var(--neg-soft); color: var(--neg); }
/* проверка плательщика (владелец 08.10): форма тремя группами, строки «Telegram и WhatsApp» в записи, свёрнутый блок старых задержек */
.kc-f [hidden] { display: none; }
.kc-g { display: grid; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.kc-gh { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.kc-f .textarea { min-height: 64px; background: var(--surface); border-color: var(--line-2); border-radius: var(--r-md); }
.kc-tg { display: grid; gap: 4px; }
.kc-tgb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.kc-tgl { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.kc-tr, .kc-c { display: inline-flex; align-items: flex-start; gap: 5px; font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.kc-tr .ic, .kc-c .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.kc-tr.ok, .kc-c.ok { color: var(--pos); }
.kc-tr.warn, .kc-c.warn { color: var(--warn); }
.kc-tr.neg { color: var(--neg); }
.kc-tw { overflow-wrap: anywhere; }
.kc-ck { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 3px 0; }
.kc-hint { margin: 0; }
.kc-old { margin-top: 18px; }
.kc-old summary { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); list-style: none; }
.kc-old summary::-webkit-details-marker { display: none; }
.kc-old summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-1); }
.kc-old[open] summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .kc-old summary::before { transition: none; } }
@media (max-width: 560px) {
  .sc-g { grid-template-columns: minmax(0, 1fr); }
  .kc-r, .lk-r { flex-wrap: wrap; }
  .lk-a { padding-left: 38px; }
}
@media (pointer: coarse) {
  .lk-pick { min-height: 44px; } .kc-a .icon-btn { width: 36px; height: 36px; }
  .kc-f .cd-in, .kc-f .select { height: 44px; } .kc-f .seg.sm button { height: 40px; padding: 0 14px; } .kc-f .btn.sm { min-height: 44px; }
  .kc-old summary { min-height: 44px; }
}
/* Платёж Multiflow (владелец 08.10): строка в карточке сделки (js/ledger-8.js, LGW.mf). Предложение «Плательщик по Multiflow» во вкладке KYC убрано 09.10:
   платёж система записывает сама (css/screens/kycpay.css). Только токены. */
.lg-mf { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: var(--t-sm); line-height: 1.4; overflow-wrap: anywhere; }
.lg-mf > .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lg-mf.paid { background: color-mix(in srgb, var(--pos) 12%, transparent); }
.lg-mf.paid > .ic { color: var(--pos); }
.lg-mf.created, .lg-mf.cancelled, .lg-mf.conflict { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.lg-mf.created > .ic, .lg-mf.cancelled > .ic, .lg-mf.conflict > .ic { color: var(--warn); }
.lg-mf-t { min-width: 0; }
.lg-mf-s { margin-top: 2px; color: var(--ink-3); }
/* Автозапись платежей Multiflow в KYC и предупреждение менеджеру (владелец 09.10): строка предупреждения (js/screens/kycpay-bar.js, kycpay-kyc.js), блок
   «Платежи по шлюзу» во вкладке KYC (js/screens/kycpay-kyc.js), флаги в строке Multiflow карточки сделки (js/ledger-8.js). Только токены. */
.cd-pw b { font-weight: 600; }
.kc-pw { margin: 0 0 14px; }
.kc-gwp { margin: -2px 2px 8px; }
.kc-fl, .lg-mf-f { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.kc-gw.off { opacity: .72; }
.kc-gw .kc-un { color: var(--warn); white-space: normal; overflow-wrap: anywhere; }
.lg-mf.paid.bad { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.lg-mf.paid.bad > .ic { color: var(--warn); }
/* Платёж с плохим флагом сейчас, «Платил другой человек» и выбор платежа среди сделок одной суммы (владелец 09.10): js/screens/kycpay2-warn.js, kycpay2-pick.js,
   строки в карточке сделки (css/screens/mflow.css, lg-mf) и полосы шапки чата (cd-gap, css/screens/dialog-2.css). Только токены. */
.kp-b { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.kp-b b { font-weight: 600; }
.kp-h { margin-top: 2px; color: var(--ink-3); }
.kp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kp-form { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.kp-form[hidden], .kp-go[hidden] { display: none; }
.kp-c { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.kp-c.on { border-color: var(--accent-text); background: var(--accent-soft); }
.kp-s { display: grid; gap: 4px; }
.kp-res { display: grid; gap: 6px; }
.kp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kp-now.done { background: var(--pos-soft); }
.kp-now.done > .ic { color: var(--pos); }
.kp-it { display: grid; gap: 6px; margin-top: 10px; }
.kp-ih { font-weight: 600; font-size: var(--t-sm); }
.kp-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.kp-op.mine { border-color: var(--warn); }
.kp-op.off { opacity: .7; }
.kp-ot { min-width: 0; }
.kp-op .btn { flex: none; }
.kp-picked > .ic { color: var(--pos); }
.kp-picked { background: color-mix(in srgb, var(--pos) 12%, transparent); }
.kp-picked.stale > .ic { color: var(--warn); }
.kp-picked.stale { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.kp-picked .btn { margin-left: 6px; }
.kp-picked .btn.arm { color: var(--neg); }
@media (pointer: coarse) { .kp-c, .kp-form .input, .kp-op .btn, .kp-acts .btn { min-height: 44px; } }
@media (max-width: 480px) { .kp-op { flex-direction: column; align-items: stretch; } .kp-op .btn { width: 100%; } }
/* Пульт 2.0: колокольчик (js/bell.js, окна .pop.bl) и «Поделиться» без доступа (js/screens/card-3.js, окна .pop.sh).
   Только токены, общие классы из components.css (.pop, .menu-item, .chip, .btn). */

/* значок со скрытыми чатами: число в углу */
.icon-btn .bl-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--surface); }

.pop.bl, .pop.sh { width: min(540px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; }
.pop.bl { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); } /* помещается под верхней строкой, окно не прыгает вверх на колокольчик */
.pop.sh { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }

/* строка сигнала и строка скрытого чата */
.bl-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px; }
.bl-item + .bl-item { border-top: 1px solid var(--line); }
.bl-item .ico-tile { width: 30px; height: 30px; border-radius: 10px; }
.bl-body { flex: 1; min-width: 0; line-height: 1.35; }
.bl-t { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.bl-acts { display: grid; gap: 8px; margin-top: 10px; }
.bl-hide { line-height: 1.7; }
.bl-lk { padding: 3px 0; color: var(--accent-text); font-weight: 500; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.bl-lk:hover { text-decoration-color: currentColor; }
.bl-lk[disabled] { opacity: .5; pointer-events: none; }
.bl-m { align-items: center; }
.bl-macts { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.bl-note { padding: 0 10px 6px; }
.bl-ok { padding: 12px 10px; }
.bl-spin .ic { animation: bl-spin 1.1s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bl-spin .ic { animation: none; } }

/* «Поделиться» */
.sh-opt { height: auto; align-items: flex-start; padding: 10px; }
.sh-opt > .ic { flex: none; margin-top: 2px; }
.sh-opt > span { display: grid; gap: 2px; min-width: 0; }
.sh-opt b { color: var(--ink); font-weight: 600; }
.sh-opt small { color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; line-height: 1.35; }
.sh-opt[disabled] { opacity: .5; pointer-events: none; }
.sh-made { margin: 4px 6px 6px; padding: 12px; border-radius: var(--r-md); background: var(--accent-soft); }
.sh-url { padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; user-select: all; }
.sh-made .row { align-items: flex-end; gap: 12px; }
.sh-hint { display: flex; gap: 10px; margin: 6px 6px 4px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.sh-hint > .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.sh-hint b { color: var(--ink); font-weight: 600; }
.sh-li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.sh-li + .sh-li { border-top: 1px solid var(--line); }
.sh-lt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); font-weight: 600; }
.sh-none { padding: 4px 10px 8px; }
.sh-deal { margin: 6px 0 0 -8px; }

@media (max-width: 720px) {
  .bl-m { flex-wrap: wrap; }
  .bl-m .bl-body { flex-basis: calc(100% - 44px); }
  .bl-macts { width: 100%; justify-content: flex-start; padding-left: 40px; }
  .sh-li { flex-wrap: wrap; }
}
/* Пульт 2.0: медиа целиком в диалоге карточки и в «Чатах» (media.js): фото с просмотром, плеер голосового, кружок, видео,
   документ, расшифровка под стрелкой. Только токены, префикс mp-. Просмотр фото (.cd-viewer) создаёт card-2.js, стилей у него
   раньше не было: окно на токенах темы (карточка на затемнении), а не чёрный экран с белым текстом. */

/* размер фото и видео в чате как в Telegram Web (волна 28, владелец 18.10: «размер как в Telegram и на телефоне, и на компьютере»). Исходник:
   https://github.com/morethanwords/tweb/blob/master/src/helpers/mediaSizes.ts (MOBILE_SIZE = 600; у телефона regular: makeMediaSize(340, 340), у компьютера makeMediaSize(420, 400)).
   Кадр вписывается в рамку --mp-w на --mp-h с сохранением пропорций, ограничены обе стороны: вертикальный чек 0,46 на телефоне около 156 x 340, горизонтальный 2,4 около 340 x 142
   (на узком экране ещё не шире колонки: 100vw минус поля). Карточка клиента, «Чаты», окно «Медиа» и архив рисуют тот же пузырь, галерея «Фото профиля» (card-photos.css) своя. */
:root { --mp-w: 420px; --mp-h: 400px; }
@media (max-width: 600px) { :root { --mp-w: 340px; --mp-h: 340px; } }
.mp { max-width: 100%; }
.mp button { -webkit-tap-highlight-color: transparent; }
.mp [hidden] { display: none !important; }
.mp :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* крутилка и кольцо прогресса (цвет берут у текста: на кнопке плеера лайм или светлый, на затемнении фото светлый) */
.mp-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.mp-spin.sm { width: 14px; height: 14px; }
.mp-ring { display: block; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(currentColor calc(var(--p, 0) * 1%), color-mix(in srgb, currentColor 24%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--ink) calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--ink) calc(100% - 3px)); }
.mp-ov { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: color-mix(in srgb, var(--ink) 46%, transparent); color: var(--surface); }
.mp-ov > * { grid-area: 1 / 1; }
.mp-ov b { font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.mp-ov .mp-spin { width: 26px; height: 26px; }
.mp-ov.err .ic { width: 24px; height: 24px; }

/* фото и миниатюра видео: кнопка вокруг картинки */
.mp-ph, .mp-vt { position: relative; display: block; margin: 2px 0 4px; border-radius: 12px; overflow: hidden; text-align: left; }
.mp-ph { cursor: zoom-in; }
.mp-ph .cd-thumb, .mp-vt .cd-thumb { margin: 0; }
.mp-ph:hover .cd-thumb { filter: brightness(.93); }
.mp-video .cd-thumb { max-width: 260px; max-height: 240px; }
.mp-vph { display: grid; place-items: center; width: 220px; height: 124px; background: var(--surface-3); color: var(--ink-3); }
.mp-vph .ic { width: 28px; height: 28px; }
/* пузырь фото и видео по пропорциям кадра (волна 22, владелец 18.10: «квадратный квадратиком, прямоугольный прямоугольником, вертикальный вытянутым»): --ar это ширина к высоте от 0,42 до 2,4,
   ширина не больше рамки (--mp-w) и ширины экрана за вычетом полей, а от высоты рамки (--mp-h) зависит через пропорции: ширина не больше --mp-h * --ar, поэтому высота не выше --mp-h
   (до волны 28 было 60% высоты экрана: вертикальный чек на телефоне вырастал до 230 x 500 px). Место занято сразу, лента при загрузке не прыгает. Без размеров от сервера остаётся ящик
   180 x 135 (dialog.css), он тоже не выходит за рамку. max-width: 100% держит кадр внутри пузыря сообщения, когда окно 900-1250 px, а пузырь уже рамки (ревью волны 28, M1: на 960 фото было шире пузыря на 83 px);
   пропорции при этом держит aspect-ratio */
.mp-sh, .mp-vslot.mp-sh { width: max(96px, min(var(--mp-w), calc(var(--mp-h) * var(--ar)), calc(100vw - 112px))); max-width: 100%; aspect-ratio: var(--ar); }
.mp .mp-sh .cd-thumb, .mp .mp-sh .mp-vph { width: 100%; height: 100%; max-width: none; max-height: none; object-position: 50% 50%; }
.mp-vslot.mp-sh { max-height: none; }
.mp-sz { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 52%, transparent); color: var(--surface); font: 500 var(--t-xs)/1.3 var(--f-ui); font-variant-numeric: tabular-nums; pointer-events: none; }
.mp-vslot { display: block; width: min(100%, var(--mp-w), calc(var(--mp-h) * var(--ar, 1.7778))); max-height: var(--mp-h); aspect-ratio: var(--ar, 16 / 9); border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.mp-vslot video { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp[data-pl] .cd-circle-play { opacity: 0; pointer-events: none; }
:root[data-theme="dark"] .cd-circle-play { color: var(--inverse-ink); }

/* голосовое: кнопка, полоса перемотки, время, скорость, стрелка расшифровки */
.mp-v { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; width: 256px; max-width: 100%; }
.mp-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--accent); transition: transform var(--dur-1) var(--ease); }
:root[data-theme="dark"] .mp-btn { color: var(--inverse-ink); }
.mp-btn:active { transform: scale(.94); }
.mp-btn .ic { width: 16px; height: 16px; }
.mp-f { fill: currentColor; }
.mp-btn .mp-ring { width: 26px; height: 26px; }
.mp-vm { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-bar { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.mp-bar::before, .mp-bar i { content: ""; position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--r-pill); }
.mp-bar::before { right: 0; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.mp-bar i { width: 0; background: var(--ink); }
.mp-bar:hover::before, .mp-bar:focus-visible::before, .mp-bar:hover i, .mp-bar:focus-visible i { height: 8px; margin-top: -4px; }
.mp-vr { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: var(--t-xs); color: var(--ink-3); }
.mp-time { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.mp-rate { height: 22px; min-width: 38px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.mp-txb { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); transition: background var(--dur-1); }
.mp-txb .ic { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.mp-txb[aria-expanded="true"] .ic { transform: rotate(180deg); }
.mp-txb:hover, .mp-rate:hover { background: var(--line-2); }
.mp-txb.lb { display: inline-flex; align-items: center; gap: 4px; width: auto; height: 26px; padding: 0 10px 0 7px; border-radius: var(--r-pill); font: 600 11.5px/1 var(--f-ui); }
.mp-txr { display: flex; margin-top: 6px; }
.mp-txr:empty { display: none; }
:root[data-theme="dark"] .cd-msg.out .mp-rate, :root[data-theme="dark"] .cd-msg.out .mp-txb { background: var(--surface-2); }
.cd-msg.mo .mp-txb, .cd-msg.mo .mp-tx { background: var(--surface); }

/* расшифровка */
.mp-tx { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.mp-tx .ic { flex: none; width: 15px; height: 15px; }
.mp-tt { flex: 1 1 100%; color: var(--ink); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.mp-lk { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .cd-msg.out .mp-tx { background: var(--surface-2); }

/* кружок */
.mp-n { position: relative; width: 158px; }
.mp-circ { display: block; width: 158px; height: 158px; padding: 4px; border-radius: 50%; }
.mp[data-st="ready"] .mp-circ { background: conic-gradient(var(--ink) calc(var(--p, 0) * 1%), var(--line-2) 0); }
.mp-cin { position: relative; display: block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--surface-3); }
.mp-cin img, .mp-cin video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-cin .mp-vslot { width: 100%; max-height: none; aspect-ratio: auto; height: 100%; border-radius: 50%; }
.mp-cin .mp-vslot video { object-fit: cover; }
.mp-n .cd-circle-dur { left: 12px; bottom: 10px; }

/* документ, файл без миниатюры, подтверждение большого файла, полоса загрузки */
.mp-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; width: 280px; max-width: 100%; margin-bottom: 6px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--surface-2); }
.mp-cb { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; border-radius: 10px; }
.mp-chip .ico-tile { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); }
.mp-cm { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-cb .mp-cm { flex: 1; }
.mp-cm b { font-size: var(--t-sm); font-weight: 600; }
.mp-cm small { display: flex; align-items: center; gap: 6px; min-height: 16px; font-size: var(--t-xs); color: var(--ink-3); }
.mp-pg { flex: 1; min-width: 90px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.mp-pg i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--ink); transition: width var(--dur-2) var(--ease); }
.mp-ask { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-2); }
.mp-ask .mp-pg { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.mp-chip .btn { height: 32px; padding: 0 12px; font-size: var(--t-sm); }
:root[data-theme="dark"] .cd-msg.out .mp-chip { background: var(--surface-2); }

/* просмотр фото: окно на затемнении, увеличение по нажатию на картинку */
.cd-viewer { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 64px 16px 20px; overflow: auto; background: linear-gradient(var(--scrim), var(--scrim)), var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade var(--dur-2) var(--ease) both; }
.cd-viewer figure { margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; max-width: 100%; padding: 10px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop); }
.cd-viewer img { grid-column: 1 / -1; display: block; max-width: min(92vw, 1200px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); margin: 0 auto; border-radius: var(--r-md); background: var(--surface-3); object-fit: contain; cursor: zoom-in; }
.cd-viewer figcaption { padding-left: 6px; color: var(--ink-2); font-size: var(--t-sm); }
.cd-viewer .cd-vd { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mp-orig { display: inline-block; margin: 2px 0 0; font-size: var(--t-xs); }
.cd-viewer .cd-vx { position: fixed; top: 14px; right: 14px; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); }
.cd-viewer .cd-vx .ic { width: 18px; height: 18px; }
.cd-viewer.zoom { place-items: start center; }
.cd-viewer.zoom figure { max-width: none; }
.cd-viewer.zoom img { max-width: none; max-height: none; cursor: zoom-out; }

/* просмотр PDF (media-2.js): окно на затемнении, страница на холсте, плавающая панель страниц и масштаба */
.pv { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: var(--frame); background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade var(--dur-2) var(--ease) both; outline: 0; }
.pv [hidden] { display: none !important; }
.pv :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pv-win { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(980px, 100%); height: 100%; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop); overflow: hidden; }
.pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); }
.pv-bar .ico-tile { width: 34px; height: 34px; border-radius: 11px; }
.pv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pv-t b { font-size: var(--t-sm); font-weight: 600; }
.pv-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--ink-3); }
.pv-body { position: relative; display: flex; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px 84px; background: var(--surface-3); touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* manipulation: прокрутка и щипок браузера остаются, увеличение двойным касанием своё (media-2.js) */
.pv-pan { cursor: grab; }
.pv-pan:active { cursor: grabbing; }
.pv-page { flex: none; margin: auto; border-radius: 4px; box-shadow: var(--sh-2); overflow: hidden; } /* страница целиком стоит по центру окна, увеличенная больше окна идёт с начала и прокручивается */
.pv-page:empty { width: 100%; height: 50vh; background: var(--surface); }
.pv-page canvas { display: block; }
.pv-nav { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: var(--r-pill); background: var(--inverse); color: var(--inverse-ink); box-shadow: 0 0 0 1px var(--line-2), var(--sh-pop); white-space: nowrap; }
.pv-pg { display: inline-flex; align-items: center; gap: 2px; }
.pv-pg i { width: 1px; height: 20px; margin: 0 6px; background: color-mix(in srgb, var(--inverse-ink) 24%, transparent); }
.pv-b, .pv-z { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--r-pill); color: inherit; -webkit-tap-highlight-color: transparent; transition: background var(--dur-1); }
.pv-b:hover:not(:disabled), .pv-z:hover { background: color-mix(in srgb, var(--inverse-ink) 14%, transparent); }
.pv-b:disabled { opacity: .32; cursor: default; }
.pv-b .ic { width: 18px; height: 18px; }
.pv-n, .pv-z { padding: 0 8px; font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-n { min-width: 54px; text-align: center; }
.pv-z { min-width: 52px; }
.pv-nav :focus-visible { outline-color: var(--inverse-ink); }
.pv-st { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 340px; padding: 24px; text-align: center; font-size: var(--t-sm); color: var(--ink-2); }
.pv-st b { font-size: 15px; color: var(--ink); }
.pv-st .mp-spin { width: 26px; height: 26px; }
.pv-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

@media (max-width: 720px) {
  .mp-v { width: 236px; }
  .cd-viewer { padding: 60px 8px 12px; }
  .cd-viewer img { max-width: calc(100vw - 36px); }
  .cd-viewer figure { grid-template-columns: minmax(0, 1fr); }
  .cd-viewer .cd-vd { grid-column: 1; grid-row: auto; justify-content: stretch; }
  .cd-viewer .cd-vd .btn { flex: 1; }
  .pv { padding: 0; }
  .pv-win { width: 100%; padding-top: env(safe-area-inset-top); border-radius: 0; }
  .pv-bar { padding: 8px 10px; }
  .pv-body { padding: 8px 8px 84px; }
}
/* Панель 2.0: общий просмотр фото и видео «как в Telegram» (js/screens/viewer.js, волна 22, владелец 18.10). Затемнённый слой на весь экран, фото по центру во весь доступный размер с сохранением
   пропорций, ряд из трёх слайдов, который двигает палец. Корень несёт ещё и .cd-viewer (на нём держатся другие файлы), прежние правила .cd-viewer из media.css здесь сняты.
   Только токены темы (светлая и тёмная), движение только transform и opacity, prefers-reduced-motion: общее правило base.css делает переходы мгновенными, контент виден и без анимации. */
.cd-viewer.vw { position: fixed; inset: 0; z-index: 75; display: block; padding: 0; overflow: hidden; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; outline: 0; touch-action: none; }
.vw-bg { position: absolute; inset: 0; opacity: var(--vw-o, 1); background: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(var(--scrim), var(--scrim)), linear-gradient(var(--scrim), var(--scrim)), var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade var(--dur-2) var(--ease) backwards; }
.vw-st { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.vw-z .vw-st { touch-action: pan-x pan-y pinch-zoom; }
.vw-tr { position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; display: flex; will-change: transform; }
.vw-sl { position: relative; flex: 0 0 33.3333%; min-width: 0; box-sizing: border-box; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: var(--vw-pt, 60px) 8px var(--vw-pb, 116px); overflow: hidden; } /* ячейка определённой высоты: height: 100% у картинки считается от неё */
.vw .vw-im { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; background: none; object-fit: contain; cursor: zoom-in; -webkit-user-drag: none; }
.vw img.vw-im:not(.vw-lo) { object-fit: scale-down; } /* по размеру экрана, но маленькое фото не крупнее своих пикселей (раньше растягивалось на весь экран); размытая миниатюра-заглушка по-прежнему на весь слайд */
.vw video.vw-im { cursor: default; }
.vw .vw-lo { filter: blur(6px); cursor: default; }
.vw-z .vw-sl.vw-c { overflow: auto; overscroll-behavior: contain; }
.vw-z .vw-sl.vw-c .vw-im { width: auto; height: auto; margin: auto; object-fit: fill; cursor: zoom-out; } /* размер увеличенного фото ставит viewer.js (style), без него натуральный */
.vw-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.vw-play .ic { box-sizing: border-box; width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); }
.vw-none { align-self: center; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); }
.vw-none .ic { width: 18px; height: 18px; }
.vw-spin { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--surface); border: 4px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite; pointer-events: none; }
.vw-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; opacity: var(--vw-o, 1); pointer-events: none; }
.vw-n { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); font: 600 var(--t-sm)/1 var(--f-ui); font-variant-numeric: tabular-nums; pointer-events: auto; }
.vw-n:empty { display: none; }
.vw-x, .vw-nav { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); pointer-events: auto; }
.vw-x { margin-left: auto; }
.vw-x .ic, .vw-nav .ic { width: 18px; height: 18px; }
.vw-nav { position: absolute; top: 50%; margin-top: -21px; display: none; }
.vw-nav.l { left: 14px; }
.vw-nav.r { right: 14px; }
.vw-nav[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .vw-nav:not([hidden]) { display: grid; } }
.vw-bot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); opacity: var(--vw-o, 1); pointer-events: none; }
.vw-cap { max-width: min(92vw, 720px); padding: 7px 14px; border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; text-align: center; overflow-wrap: anywhere; pointer-events: auto; }
.vw-cap:empty { display: none; }
.vw-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 6px; border-radius: var(--r-lg); background: var(--surface); pointer-events: auto; }
.vw-act:empty { display: none; }
.vw-act .ic { width: 16px; height: 16px; }
.vw-act > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; }
.vw-snap .vw-tr { transition: transform var(--dur-2) var(--ease); }
.vw-snap .vw-bg, .vw-snap .vw-top, .vw-snap .vw-bot { transition: opacity var(--dur-2) var(--ease); }
@media (max-width: 560px) { .vw-sl { padding: var(--vw-pt, 56px) 0 var(--vw-pb, 112px); } .vw-nav.l { left: 6px; } .vw-nav.r { right: 6px; } }
/* телефон: зона нажатия не меньше 44 px */
@media (pointer: coarse) { .vw-x { width: 44px; height: 44px; } .vw-act .btn.sm { height: 40px; } }
/* без анимации: фон не проявляется, переходов нет (js/screens/viewer.js в этом режиме меняет фото сразу, без перелёта), контент виден сразу */
@media (prefers-reduced-motion: reduce) { .vw-bg, .vw-spin { animation: none; } .vw-snap .vw-tr, .vw-snap .vw-bg, .vw-snap .vw-top, .vw-snap .vw-bot { transition: none; } }
/* Пульт 2.0: панель «Медиа» клиента (mpanel.js, mpanel-2.js, владелец 07.10): вкладки, сетка фото и видео, голосовые, файлы,
   ссылки и «Общие группы». Плеер и просмотр фото рисует media.js (.mp-*), здесь только раскладка вокруг него. Только токены.
   Подключается после media.css: правила для .mp-* внутри панели перекрывают размеры пузыря. */
.drawer-body.mpn { display: flex; flex-direction: column; padding: 0; }
.mpn-top { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; padding: 12px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mpn-acc { justify-self: start; }
.mpn-tabs { flex-wrap: wrap; overflow: visible; padding: 2px 0; gap: 6px; }
.mpn-tabs button { height: 32px; padding: 0 12px; gap: 6px; font-size: var(--t-sm); }
.mpn-n { min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); line-height: 18px; text-align: center; }
.mpn-tabs button[aria-pressed="true"] .mpn-n { background: var(--inverse-2); color: var(--inverse-ink); }
.mpn-box { padding: 12px 16px 24px; }

/* сетка: квадратные плитки, дата и длительность на плитке */
.mpn-g, .mpn-sk { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px; }
.mpn-sk .skel { aspect-ratio: 1; }
.mpn-t { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-3); }
.mpn-t .mp, .mpn-t .mp-ph, .mpn-t .mp-vt { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.mpn-t .cd-thumb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 50%; }
.mpn-t .mp-vph { width: 100%; height: 100%; }
.mpn-t .mp-sz { display: none; } /* в сетке кадры квадратные и мелкие: подпись размера и пропорции пузыря чата (media.css, волна 22) здесь не нужны */
.mpn-t .mp-vslot.mp-sh { width: min(100%, var(--mp-w)); }
.mpn-t .mp-txr, .mpn-t .mp-orig { display: none; }
.mpn-cap, .mpn-du { position: absolute; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--inverse) 74%, transparent); color: var(--inverse-ink); font-size: var(--t-xs); line-height: 18px; pointer-events: none; }
.mpn-cap { left: 6px; bottom: 6px; }
.mpn-du { right: 6px; top: 6px; }
/* видео, которое грузится или играет, занимает всю строку сетки */
.mpn-t:has(.mp-video:not([data-st="idle"])) { grid-column: 1 / -1; aspect-ratio: auto; padding: 8px; background: var(--surface-2); }
.mpn-t:has(.mp-video:not([data-st="idle"])) .mp, .mpn-t:has(.mp-video:not([data-st="idle"])) .mp-vt { height: auto; }
.mpn-t:has(.mp-video:not([data-st="idle"])) .mp-txr, .mpn-t:has(.mp-video:not([data-st="idle"])) .mp-orig { display: flex; }
.mpn-t:has(.mp-video:not([data-st="idle"])) .mpn-cap, .mpn-t:has(.mp-video:not([data-st="idle"])) .mpn-du { display: none; }

/* голосовые, файлы, ссылки: строка с подписью «кто, когда» */
.mpn-r { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.mpn-r:first-child { border-top: 0; padding-top: 2px; }
.mpn-m { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--ink-3); }
.mpn-m b { color: var(--ink-2); font-weight: 600; }
.mpn-r .mp-v, .mpn-r .mp-chip { width: 100%; max-width: 360px; }
.mpn-lk { display: flex; align-items: center; gap: 10px; color: var(--ink); overflow-wrap: anywhere; }
.mpn-lk .ico-tile { width: 34px; height: 34px; border-radius: 11px; }
.mpn-lk:hover span.grow { text-decoration: underline; text-underline-offset: 3px; }
.mpn-tx { color: var(--ink-2); overflow-wrap: anywhere; }
.mpn-more { display: flex; justify-content: center; padding: 14px 0 0; }

/* общие группы: ожидание, список, подпись */
.mpn-wait { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.mpn-wait b { font-weight: 600; }
.mpn-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent-text); animation: mpn-rot .8s linear infinite; }
@keyframes mpn-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mpn-spin { animation: none; } }
.mpn-cg .mpn-sk { grid-template-columns: 1fr; }
.mpn-cg .mpn-sk .skel { aspect-ratio: auto; height: 48px; }
.mpn-cgl { display: grid; }
.mpn-cgi { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.mpn-cgi:first-child { border-top: 0; padding-top: 2px; }
.mpn-cga { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.mpn-cgt { font-weight: 600; overflow-wrap: anywhere; }
.mpn-cgf { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .mpn-top { padding: 10px 12px 8px; } .mpn-box { padding: 10px 12px 20px; } .mpn-g, .mpn-sk { grid-template-columns: repeat(3, 1fr); } }

/* опасные файлы и QR (mpanel-3.js, владелец 07.10) */
.mpn-q { border-left: 3px solid var(--neg); padding-left: 12px; }
.mpn-qw { display: flex; align-items: flex-start; gap: 10px; }
.mpn-qw .ic { flex: none; margin-top: 2px; color: var(--neg); }
.mpn-qw.warn .ic { color: var(--warn); }
.mpn-qt { font-weight: 600; overflow-wrap: anywhere; }
.mpn-qa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mpn-qs { color: var(--ink-2); overflow-wrap: anywhere; }
.mpn-qs a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.mpn-qs .neg { color: var(--neg); font-weight: 600; }
.mpn-qs .pos { color: var(--pos); font-weight: 600; }
.mpn-qs .warn { color: var(--warn); font-weight: 600; }
.mpn-qh { font-family: var(--f-mono, monospace); overflow-wrap: anywhere; }
.mpn-qc { position: absolute; left: 4px; right: 4px; top: 4px; display: flex; align-items: flex-start; gap: 4px; padding: 3px 6px; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--accent) 88%, transparent); color: var(--accent-ink); font-size: 11px; line-height: 1.25; font-weight: 600; }
.mpn-qc .ic { flex: none; width: 12px; height: 12px; margin-top: 1px; }
.mpn-qc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mpn-qv { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--surface); }
.mpn-qvh { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mpn-qvb { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; }
.mpn-qvb.qrv-host { margin-top: 0; }
/* тело окна рисует QRV (js/qr-view.js, стили .qrv* в dialog-3.css) */
/* Пульт 2.0: «Найти QR» на фото (js/qr-find.js, волна 16б, владелец 12.10): значок в нижней строке пузыря диалога, на плитке и в строке «Файлов» панели «Медиа», кнопка в просмотре фото
   и короткое сообщение «QR на фото не найден» рядом с фото. Только токены темы (светлая и тёмная); двигается один значок и только пока идёт поиск. */
.qf-b { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.qf-b .ic { width: 14px; height: 14px; }
.qf-b:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.qf-b:focus-visible { outline: none; box-shadow: var(--focus); }
.qf-b:disabled { cursor: progress; color: var(--accent-text); }
/* телефон: зона нажатия 36 px при значке 22 px, лента не пухнет */
@media (pointer: coarse) { .qf-b::after { content: ""; position: absolute; inset: -7px; } }
.qf-load .ic { animation: qf-spin 1s linear infinite; }
@keyframes qf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qf-load .ic { animation: none; } .qf-load { opacity: .55; } }
.qf-n { color: var(--ink-3); font-size: var(--t-xs); line-height: 1.3; overflow-wrap: anywhere; }
.qf-n[hidden] { display: none; }
/* диалог: сообщение под фото, там же, где чип */
.cd-bub > .qf-n { display: block; margin-top: 6px; }
/* панель «Медиа», плитка фото: значок справа внизу (слева дата), сообщение над ними */
.mpn-t .qf-b { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 26px; height: 26px; background: color-mix(in srgb, var(--inverse) 74%, transparent); color: var(--inverse-ink); }
.mpn-t .qf-b:hover:not(:disabled) { background: var(--inverse); color: var(--inverse-ink); }
.mpn-t .qf-b:disabled { color: var(--inverse-ink); }
.mpn-t .qf-n { position: absolute; left: 4px; right: 4px; bottom: 38px; z-index: 2; padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--inverse) 84%, transparent); color: var(--inverse-ink); }
/* вкладка «Файлы»: значок справа в строке подписи (кто, когда, размер), сообщение под файлом */
.mpn-m .qf-b { margin: -3px 0 -3px auto; background: var(--surface-2); }
.mpn-m .qf-b:hover:not(:disabled) { background: var(--surface-3); }
.mpn-r > .qf-n { padding-left: 2px; }
/* вкладка «Файлы»: чип найденного кода стоит в строке, а не поверх плитки (у плитки он абсолютный, mpanel.css) */
.mpn-r > .mpn-qc { position: static; justify-self: start; max-width: 100%; }
/* просмотр фото: текстовая кнопка рядом с «Скачать», сообщение той же строкой */
.cd-vd .qf-n { align-self: center; color: var(--ink-2); font-size: var(--t-sm); }
/* Панель 2.0: чистый QR прямо в чате (js/qr-block.js, волна 29, владелец 18.10). Блок под фото в диалоге «Чатов» и в карточке клиента: картинка кода 168 px, рядом подпись «сумма, место» и «подробнее»,
   узко (телефон) подпись под картинкой. Только токены темы; подложка кода белая и в тёмной теме (камера не прочитает светлый код на тёмном), поля тишины 12 px и сам код без скругления.
   Красная и жёлтая строки: классы окна .qrv-w (dialog-3.css). Крупный вид .cd-qrx: белая карточка по центру, до 80% меньшей стороны экрана. */
.cd-qrb { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 6px; padding: 8px; min-width: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-xs); }
.cd-qrb-i { flex: none; display: block; box-sizing: border-box; width: 192px; max-width: 100%; margin: 0; padding: 12px; border: 0; border-radius: var(--r-sm); background: #fff; cursor: zoom-in; }
.cd-qrb-i:focus-visible { outline: none; box-shadow: var(--focus); }
.cd-qrb-i img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.cd-qrb-t { flex: 1 1 140px; min-width: 0; display: grid; gap: 8px; align-content: start; justify-items: start; }
.cd-qrb-t .cd-qr-l { flex: none; }
.cd-qrb-m { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-1); }
.cd-qrb-m:hover { background: var(--accent-soft); }
.cd-qrb-m:focus-visible { outline: none; box-shadow: var(--focus); }
.cd-qrb-t .qrv-w { justify-self: stretch; }
.cd-qrb-h { flex: 1 1 100%; min-width: 0; font-size: var(--t-xs); }
.cd-qrb-h .ic { width: 14px; height: 14px; }
.cd-qrb-f { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cd-qrb-f:hover:not(:disabled) { color: var(--ink); }
.cd-qrb-f:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.cd-qrb-f:disabled { opacity: .55; cursor: progress; }
/* крупный вид: слой поверх всего (выше окон и шторок 61, ниже подсказок), белая карточка с полями тишины */
.cd-qrx { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: zoom-out; animation: fade var(--dur-2) var(--ease) both; }
.cd-qrx:focus, .cd-qrx:focus-visible { outline: none; box-shadow: none; }
.cd-qrx-c { box-sizing: border-box; width: min(80vmin, 92vw); padding: 16px; border-radius: var(--r-sm); background: #fff; cursor: default; box-shadow: var(--sh-2); }
.cd-qrx-c img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.cd-qrx-x { position: absolute; top: 14px; right: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); }
.cd-qrx-x:hover { background: var(--surface-3); }
@media (prefers-reduced-motion: reduce) { .cd-qrx { animation: none; } }
/* Панель 2.0: кнопки менеджеру у QR и свёрнутое фото клиента (волна 31, владелец 19.10; js/qr-chat.js, js/qr-photo.js). Только токены темы, движение гасится при prefers-reduced-motion.
   «Отправить «Confirm ✅ нажмите»» (.cd-qrb-c на общей .btn.sm.accent): длинная подпись переносится, а не обрезается; серая (.off, причина строкой под ней), «Отправляю...» (.busy), «отправлено, ЧЧ:ММ» (.done) и
   «Отправить ещё раз?» (.ask). «Вставить ответ: QR не читается» (.cd-qrb-u): светлая кнопка как «подробнее» у блока QR. Строка свёрнутого фото (.cd-qph-h): миниатюра 40 px, подпись, «развернуть» и шеврон;
   на телефоне строка не ниже 48 px (нажимать пальцем). */
.cd-qrb-cw { display: grid; gap: 4px; justify-items: start; min-width: 0; max-width: 100%; }
.btn.cd-qrb-c { height: auto; min-height: 34px; max-width: 100%; padding: 6px 14px; border-radius: var(--r-md); white-space: normal; text-align: left; line-height: 1.25; }
.cd-qrb-c span { min-width: 0; overflow-wrap: anywhere; }
.cd-qrb-c.off, .cd-qrb-c.off:hover, .cd-qrb-c.off:active { background: var(--surface-3); color: var(--ink-3); border-color: transparent; cursor: not-allowed; transform: none; }
.cd-qrb-c.busy { cursor: progress; opacity: .75; }
.cd-qrb-c.busy .ic { animation: spin 1s linear infinite; }
.cd-qrb-c.done, .cd-qrb-c.done:hover { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.cd-qrb-c.ask, .cd-qrb-c.ask:hover { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.cd-qrb-c:focus-visible, .cd-qrb-u:focus-visible { outline: none; box-shadow: var(--focus); }
.cd-qrb-cr { font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.cd-qrb-u { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: var(--t-sm); font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background var(--dur-1); }
.cd-qrb-u .ic { flex: none; width: 15px; height: 15px; }
.cd-qrb-u span { min-width: 0; overflow-wrap: anywhere; }
.cd-qrb-u:hover { background: var(--accent-soft); }
.cd-qrb-u.off, .cd-qrb-u.off:hover { background: var(--surface-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.cd-qrb-h { flex-wrap: wrap; }
.cd-qrb-h .cd-qrb-u { margin-left: 24px; }
.cd-qrb-u[data-qfu] { display: flex; width: fit-content; max-width: 100%; margin: 6px 0 2px; } /* у фото без кодов: отдельной строкой, подпись клиента идёт в строку и прилипла бы к кнопке */
.cd-qrb-u[hidden] { display: none; }
/* свёрнутое фото */
.cd-qph { margin: 2px 0 4px; min-width: 0; }
.cd-qph-h { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 12px 6px 6px; border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-1); }
.cd-qph-h:hover { background: var(--surface-3); }
.cd-qph-h:focus-visible { outline: none; box-shadow: var(--focus); }
.cd-qph-t { flex: none; display: block; width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-3); }
.cd-qph-t.ph { display: grid; place-items: center; color: var(--ink-3); }
.cd-qph-t.ph .ic { width: 18px; height: 18px; }
.cd-qph-l { flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.cd-qph-a { flex: none; font-size: var(--t-xs); color: var(--ink-2); }
.cd-qph-h .ic { flex: none; width: 14px; height: 14px; color: var(--ink-2); transition: transform var(--dur-2) var(--ease); }
.cd-qph-h[aria-expanded="true"] .ic { transform: rotate(180deg); }
.cd-qph-b { margin-top: 6px; }
.cd-qph-b[hidden] { display: none; }
@media (pointer: coarse) { .cd-qph-h { min-height: 48px; } .btn.cd-qrb-c, .cd-qrb-u { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cd-qrb-c.busy .ic { animation: none; } .cd-qph-h .ic, .cd-qrb-u, .cd-qph-h { transition: none; } }
/* Пульт 2.0: «Архив телефона» в панели «Медиа» клиента и окно «Докачать архив чата» (js/screens/archive.js, archive-job.js, archive-win.js, волна 17д, владелец 12.10).
   Только токены темы (светлая и тёмная), ничего не движется. Строка стоит между шапкой с вкладками и списком и уезжает вместе с ним; окно лежит поверх шторки, как окно QR. */
.mpn-arch { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ar-h { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.ar-h .ic { flex: none; width: 18px; height: 18px; color: var(--accent-text); }
.ar-t { color: var(--ink-2); overflow-wrap: anywhere; }
.ar-j { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ar-s { color: var(--ink-2); overflow-wrap: anywhere; font-size: var(--t-sm); }
.ar-s.pos { color: var(--pos); }
.ar-s.warn { color: var(--warn); }
.ar-s.bad, .ar-bad, .ar-m { color: var(--neg); }
.ar-m { overflow-wrap: anywhere; }

/* окно поверх шторки */
.mpn-aw { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--surface); outline: none; }
.mpn-awh { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mpn-awb { flex: 1; min-height: 0; display: grid; align-content: start; gap: 18px; padding: 16px; overflow-y: auto; }
.ar-sec { display: grid; gap: 8px; }
.ar-ar { display: flex; align-items: center; gap: 8px; }
.ar-a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ar-a:hover { border-color: var(--ink-3); }
.ar-a:focus-visible, .ar-c input:focus-visible { outline: none; box-shadow: var(--focus); }
.ar-a[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
.ar-a .grow { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ar-l { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--t-sm); }
.ar-a[aria-pressed="true"] .ar-l { background: var(--accent-text); color: var(--surface); }
.ar-c { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.ar-c input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-text); }
.ar-c > span { display: grid; gap: 2px; overflow-wrap: anywhere; }
.ar-c.off { opacity: .55; cursor: default; }
.ar-lim { overflow-wrap: anywhere; }
.ar-w { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--ink); }
.ar-w .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.ar-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ar-emg { padding-top: 14px; border-top: 1px solid var(--line); justify-items: start; }
@media (max-width: 560px) { .mpn-arch { padding: 10px 12px; } .mpn-awb { padding: 12px; } .mpn-awh { padding: 10px 12px; } }
/* телефон: зона нажатия не меньше 40 px */
@media (pointer: coarse) { .mpn-arch .btn.sm, .mpn-aw .btn.sm { height: 40px; } .ar-a { min-height: 48px; } .ar-c input { width: 22px; height: 22px; } }
/* Панель 2.0: кнопки прямо в чате и блок архива в панели «Медиа» (js/screens/archive-tap.js, archive-hist.js, mpanel-4.js, волна 20, владелец 17.10). Только токены темы (светлая и
   тёмная), ничего не движется. .at: плитка «Загрузить» на месте миниатюры архивного вложения; .ah: полоса «Загрузить историю» вверху ленты; .mpn-am: блок «Из архива телефона». */
.at { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.at .ico-tile { flex: none; }
.at-t { display: grid; gap: 2px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.at-t b { font-size: var(--t-sm); }
.at-t small { color: var(--ink-3); font-size: var(--t-xs); }
.at-t small.bad { color: var(--neg); }
.at .btn { flex: none; }
.ah { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; color: var(--ink-2); font-size: var(--t-sm); }
.ah[hidden] { display: none; }
.ah-t { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ah-t.pos { color: var(--pos); }
.ah-t.warn { color: var(--warn); }
.ah-t.bad { color: var(--neg); }
.mpn-am { display: grid; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.mpn-amh { display: flex; align-items: baseline; gap: 8px; }
@media (max-width: 560px) { .at { padding: 8px; } .ah { padding: 6px 8px; } }
/* телефон: зона нажатия не меньше 40 px */
@media (pointer: coarse) { .at .btn.sm, .ah .btn.sm { height: 40px; } }
.ar-per { display: flex; align-items: center; gap: 8px; padding-left: 28px; }
.ar-per select { max-width: 100%; }
/* «Аналитика → Время» (живой пульт 2.0): вкладки, период, выводы бота, тепловая карта, «Сегодня по часам», «Тишина», сделки по дням недели.
   Только своё, префикс an-. Цвета только токенами. Стили вкладок «Деньги» и «Клиенты» лежат в их файлах. */

/* ---------- вкладки, сервис и выбор периода ---------- */
.an-tools { flex-wrap: nowrap; }
.an-per { justify-content: flex-start; gap: 10px 16px; margin-top: -2px; }
.an-nav { display: inline-flex; align-items: center; gap: 4px; }
.an-nav .icon-btn[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.an-lbl { min-width: 176px; padding: 0 8px; text-align: center; font: 500 15px/1.2 var(--f-ui); letter-spacing: -.01em; white-space: nowrap; }
.an-lbl em { display: block; margin-top: 2px; font: 400 var(--t-xs)/1.2 var(--f-ui); font-style: normal; color: var(--ink-3); }
.an-yr, .an-date { width: auto; min-width: 96px; height: 36px; }
.an-date { min-width: 150px; padding-right: 12px; }
.an-svc { width: auto; min-width: 170px; max-width: 240px; height: 36px; }
.an-tabs { flex: 0 1 auto; min-width: 0; }
.an-tabs button { height: 46px; padding: 0 22px; font-size: 15px; }
.an-tabs button .ic { width: 18px; height: 18px; }
.an-tabs button[aria-pressed="true"] .ic { color: var(--accent); }
:root[data-theme="dark"] .an-tabs button[aria-pressed="true"] .ic { color: var(--inverse-ink); }

/* подпись над рядом выводов */
.an-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 4px 12px; font-size: var(--t-sm); color: var(--ink-3); }
.an-sec .ic { color: var(--accent-text); }
.an-sec b { color: var(--ink); font-weight: 600; }

/* мелкие утилиты экрана (вместо inline style) */
.an-center { justify-content: center; }
.an-note { align-items: flex-start; }
.an-note .ic { margin-top: 2px; color: var(--accent-text); }
.an-l-short { display: none; }

/* ---------- выводы бота: карточки с маленьким графиком ---------- */
.an-ins { display: flex; flex-direction: column; gap: 10px; min-height: 252px; }
.an-ins-w { margin-top: -4px; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-3); }
.card.hero .an-ins-w { color: var(--hero-ink-2); }
.an-cap { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.card.hero .an-cap { color: var(--hero-ink-2); }
.an-ins-top { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.an-ins-top .ico-tile { width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--ink); }
.card.hero .an-ins-top .ico-tile { background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); }
.card.accent .an-ins-top .ico-tile { background: color-mix(in srgb, var(--accent-ink) 10%, transparent); color: var(--accent-ink); }
.an-ins-v { font: 500 32px/1.05 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 4px; }
.an-ins-v .unit { font-size: 13px; vertical-align: baseline; }
.an-ins-s { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.card.hero .an-ins-s { color: var(--hero-ink-2); }
.an-vis { min-height: 64px; display: flex; flex-direction: column; } /* сразу под текстом; остаток высоты ряда уходит вниз карточки (аудит 19.10, п. 21: зазор до диаграммы был 155-202 px) */

/* столбики профиля дня: ширина ограничена, чтобы на широкой карточке не превращались в плиты */
.an-mini { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 64px; }
.an-mini i { flex: 1 1 0; min-width: 0; max-width: 22px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.an-mini i.on { background: var(--accent); }
.card.hero .an-mini i { background: color-mix(in srgb, var(--hero-ink) 20%, transparent); }
.card.hero .an-mini i.on { background: var(--hero-accent); }

/* таблетки-деления в «Тишине»: отрезки периода, не шире 34 px */
.an-pills-sm { height: 20px; gap: 4px; flex: 1; justify-content: space-between; }
.an-pills-sm > i { min-width: 2px; max-width: 34px; }
.an-pills-sm > i.off { border-width: 1.2px; }
.an-pills-sm.dense { gap: 2px; }
.an-pills-sm.dense > i { min-width: 1px; }
.an-pills-sm.dense > i.off { border-width: 1px; }

/* самое тихое: 24 столбика-часа суток, высота = в какой доле дней в этот час никто не писал, тёмные = само окно */
.an-q { gap: 2px; }
.an-q i { max-width: none; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.an-q i.on { background: var(--inverse); }
.an-ax { display: flex; justify-content: space-between; margin-top: 5px; font: 500 10.5px/1 var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* крупные сделки по частям суток: справа медианный чек, под названием полоса доли сделок от порога и подпись словами */
.an-bg { display: flex; flex-direction: column; gap: 2px; }
.an-bg-h, .an-bg-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.an-bg-h { padding: 0 9px 3px; font-size: 10.5px; color: var(--ink-3); }
.an-bg-r { padding: 6px 9px 7px; border-radius: 10px; }
.an-bg-t { font-size: 13px; font-weight: 500; }
.an-bg-t em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--ink-3); }
.an-bg-t b { font-weight: 600; }
.an-bg-t small { margin-left: 3px; font-size: 10px; font-weight: 400; color: var(--ink-3); }
.an-bg-b { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.an-bg-b .bar { flex: 0 0 22%; height: 6px; }
.an-bg-n { min-width: 0; font-size: 10.5px; line-height: 1.25; color: var(--ink-2); }
.an-bg-r.on { background: var(--inverse); color: var(--inverse-ink); }
.an-bg-r.on em, .an-bg-r.on small, .an-bg-r.on .an-bg-n { color: color-mix(in srgb, var(--inverse-ink) 68%, transparent); }
.an-bg-r.on .bar { background: color-mix(in srgb, var(--inverse-ink) 22%, transparent); }
.an-bg-r.on .bar i { background: var(--accent); }
:root[data-theme="dark"] .an-bg-r.on .bar i { background: var(--inverse-ink); }

/* последние 7 дней: столбик дня на дорожке, риска = обычный такой же день */
.an-pairs { display: flex; gap: 4px; height: 64px; }
.an-pair { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.an-pair-bar { position: relative; width: 22px; height: 46px; }
.an-pair-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--surface-2); }
.an-pair-bar i { position: absolute; left: 50%; bottom: 0; width: 12px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--inverse); }
.an-pair-bar i.on { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--inverse); }
:root[data-theme="dark"] .an-pair-bar i.on { box-shadow: none; }
.an-pair-bar b { position: absolute; left: 50%; width: 22px; height: 3px; border-radius: 2px; transform: translate(-50%, 50%); background: var(--ink-3); box-shadow: 0 0 0 2px var(--surface); }
:root[data-theme="dark"] .an-pair-bar b { background: var(--ink-2); }
.an-pair em { font: 500 10.5px/1 var(--f-ui); font-style: normal; color: var(--ink-3); }

/* ---------- тепловая карта ---------- */
.an-heat .card-head { margin-bottom: 14px; }
.an-hrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; min-width: 0; }
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.an-chips .chip { gap: 7px; }
.an-chip-h { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip.btnish[aria-pressed="true"] .an-chip-h { color: color-mix(in srgb, var(--inverse-ink) 62%, transparent); }
.an-heat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
.an-heat-main { min-width: 0; }
.an-heat-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px; }
.an-heat-scroll .chart { height: 346px; min-width: 640px; }
.an-heat-main > [hidden], .an-hours [hidden] { display: none; }
.an-heat-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.an-heat-legend-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.an-help { line-height: 1.4; }
.an-heat-none { padding: 36px 0; }
.an-heat-legend b { font-weight: 600; color: var(--ink); }
.an-grad { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }
.an-grad i { width: 120px; height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--heat-1), var(--heat-3) 50%, var(--heat-5)); box-shadow: inset 0 0 0 1px var(--line); }
/* обозначения: точка = вне выбранных часов, штриховка = мало данных */
.an-key { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ink-3); }
.an-key-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--ink-4); flex: none; }
.an-key-na { width: 16px; height: 14px; border-radius: 4px; flex: none; background-color: var(--surface-2); background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.2px, transparent 1.2px 4px); box-shadow: inset 0 0 0 1px var(--line); }

/* колонка итогов справа (как у «Обзора») */
.an-side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding-left: 24px; border-left: 1px solid var(--line); min-width: 0; }
.an-side .mini-stat .v { font-size: 24px; }
.an-side .mini-stat .v .unit { font-size: 11px; vertical-align: .5em; }

/* лучшие часы: кнопки-фильтры */
.an-top { display: flex; flex-direction: column; gap: 5px; }
.an-top > .t-xs { margin-bottom: 2px; }
.an-top-i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px 0 7px; border-radius: 12px; background: var(--surface-2); font-size: var(--t-sm); text-align: left; transition: background var(--dur-1); }
.an-top-i:hover { background: var(--surface-3); }
.an-top-i b { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 600 11px/1 var(--f-ui); color: var(--ink-2); }
.an-top-i:first-of-type b { background: var(--inverse); color: var(--inverse-ink); }
.an-top-i em { font-style: normal; font-weight: 600; white-space: nowrap; }
.an-top-i .grow { white-space: nowrap; }

/* ---------- сегодня по часам ---------- */
.an-hours { display: flex; flex-direction: column; }
.an-hours .chart { flex: 1; min-height: 250px; margin-top: 6px; }
.an-hsum { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.an-hsum-main { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.an-hsum-main .t-kpi { font-size: 44px; }
.an-hsum-main .chip { margin-bottom: 4px; }
.an-hsum-rest { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; }

/* ---------- тишина ---------- */
.an-sil { display: flex; flex-direction: column; }
.an-sil .list { flex: 1; }
.an-sil-row { padding: 12px 0; }
.an-sil .list.lined .an-sil-row + .an-sil-row { border-top: 1px solid var(--line); }
.an-sil-row .li-title { font-size: 14px; }
.an-sil-row .li-sub { white-space: normal; }
.an-sil-k { min-width: 52px; text-align: right; color: var(--ink-2); flex: none; white-space: nowrap; line-height: 1.2; }
.an-sil-k em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.an-sil .card-foot { align-items: flex-start; line-height: 1.45; }

/* вкладки без данных сервера: неактивны, подсказка при наведении */
.an-tabs button.an-soon { opacity: .55; cursor: default; }
.an-tabs button.an-soon:hover { color: var(--ink-2); }

/* вывод без данных: условие, при котором он появится */
.an-ins.an-none { min-height: 170px; }
.an-none .an-ins-v { font-size: 22px; color: var(--ink-3); }
.an-none .ico-tile { color: var(--ink-3); }

/* остальные строки выжимки и источник данных */
.an-more { display: flex; flex-direction: column; gap: 6px; margin: 16px 4px 0; font-size: var(--t-sm); color: var(--ink-2); }
.an-more + .grid { margin-top: var(--gap); }
.an-more > span { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.an-more .ic { margin-top: 2px; color: var(--accent-text); flex: none; }
.an-src { display: flex; align-items: flex-start; gap: 8px; margin: var(--gap) 4px 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.an-src .ic { margin-top: 1px; flex: none; }
.an-lock { padding: 24px 22px 32px; }
.an-pop { padding: 10px 8px 8px; width: 280px; }

/* ---------- день: четыре числа к обычному ---------- */
.an-kpi { min-height: 150px; }
.an-kpi .kpi-top { align-items: center; }
.an-kpi .ico-tile { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.an-kpi .kpi-value .unit { font-size: 14px; }
.an-kpi-no { font: 500 22px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink-3); }
.an-kpi-note { grid-column: 1 / -1; margin: 0 4px; }

/* ---------- сделки по дням недели из отчёта ---------- */
.an-rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
.an-rp-h { margin-bottom: 4px; }
.an-rep-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 4px; }
.an-rp-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.an-rp-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.an-rp-d { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.an-rp-v { text-align: right; font-size: var(--t-sm); }
.an-rp-r .bar { height: 14px; }
.an-rep-foot { margin-top: 18px; align-items: flex-start; line-height: 1.45; }
.an-rep .card-foot .an-note { color: var(--ink-3); }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  /* пары 8 + 4 на этой ширине тесные: обе карточки ряда на всю ширину, внутри раскладываем в колонки */
  .card.an-hours, .card.an-sil { grid-column: span 12; }
  .an-sil .list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .an-sil .list.lined .an-sil-row:nth-child(2) { border-top: 0; }
  /* карте нужна вся ширина (24 часа без прокрутки): итоги уходят под неё строкой */
  .an-heat-grid { grid-template-columns: 1fr; }
  .an-heat .an-side { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .an-heat .an-side > div:first-child { flex-basis: 100%; }
  .an-heat .an-side .mini-stat { min-width: 140px; flex: 1; }
  .an-heat .an-side .mini-stat:nth-child(2) { flex: 2 1 240px; }
  .an-heat .an-side .an-top { flex: 2 1 280px; }
  .an-rep-grid { grid-template-columns: 1fr; }
  .an-rep-side { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .an-rep-side .mini-stat { flex: 1 1 160px; }
}
@media (max-width: 860px) {
  .an-sil .list { display: flex; flex-direction: column; }
  .an-sil .list.lined .an-sil-row:nth-child(2) { border-top: 1px solid var(--line); }
  .an-tools { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .an-tools { flex-wrap: wrap; row-gap: 10px; }
  .an-tabs { flex: 1 1 100%; }
  .an-tabs button { height: 42px; padding: 0 16px; font-size: 14px; }
  .an-svc { flex: 1 1 100%; max-width: none; }
  .an-per .seg { flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .an-per .seg button { padding: 0 8px; font-size: 12.5px; }
  .an-nav { flex: 1 1 auto; justify-content: space-between; }
  .an-lbl { min-width: 0; flex: 1; }
  .an-yr { min-width: 84px; }
  .an-date { flex: 1 1 100%; }
  .an-rep-day { grid-template-columns: 1fr; gap: 14px; }
  .an-rep-grid { grid-template-columns: 1fr; }
  .an-rep-side { flex-direction: row; flex-wrap: wrap; gap: 14px 22px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .an-rep-side .mini-stat { flex: 1 1 130px; }
  .an-sec { margin: 0 2px 10px; }
  .an-ins { min-height: 0; }
  .an-l-full { display: none; }
  .an-l-short { display: inline; }
  /* переключатель показателя карты: шесть значений сеткой 3 × 2 */
  .an-heat .card-head > .seg { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px; }
  .an-heat .card-head > .seg button { padding: 0 6px; justify-content: center; text-align: center; }
  .an-hrow { flex-direction: column; align-items: stretch; gap: 8px; }
  .an-hrow .an-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 0 22px; }
  .an-hrow .an-chips::-webkit-scrollbar { display: none; }
  /* карта повёрнута (часы строками): без прокрутки, все 24 часа видны сразу */
  .an-heat-scroll { overflow: visible; margin: 0; padding: 0; }
  .an-heat-scroll .chart { min-width: 0; height: 640px; }
  .an-side .mini-stat { min-width: 40%; }
  .an-hsum-main .t-kpi { font-size: 38px; }
}
/* телефон: четыре вкладки («Время», «Деньги», «Клиенты», «Торг») в одном ряду 370 px: значок только у активной, поля уже; если не влезло, ряд прокручивается, активная в поле зрения (analytics-3.js revealTab) */
@media (max-width: 480px) {
  .an-tabs { gap: 6px; }
  .an-tabs button { padding: 0 12px; }
  .an-tabs button:not([aria-pressed="true"]) .ic { display: none; }
}
/* «Аналитика → Деньги» (живой пульт 2.0): строка периода, KPI, оборот год к году, темп месяца, структура и страны.
   Только своё, префикс am- (общее с «Временем» и «Клиентами» не делим: правки одной вкладки не трогают другую).
   Цвета только токенами. */

/* ---------- строка периода: как во «Времени» (период, стрелки по отрезку, год) ---------- */
.am-bar { justify-content: flex-start; gap: 10px 16px; margin-top: -2px; }
.am-nav { display: inline-flex; align-items: center; gap: 4px; }
.am-nav .icon-btn[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.am-lbl { min-width: 176px; padding: 0 8px; text-align: center; font: 500 15px/1.2 var(--f-ui); letter-spacing: -.01em; white-space: nowrap; }
.am-lbl em { display: block; margin-top: 2px; font: 400 var(--t-xs)/1.2 var(--f-ui); font-style: normal; color: var(--ink-3); }
.am-yr { width: auto; min-width: 96px; height: 36px; }
.am-src { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.am-chips { display: flex; gap: 6px; min-width: 0; }
.am-chips .chip { gap: 7px; height: 30px; padding: 0 12px; }
.am-chips .chip .flag { font-size: 14px; }
.am-h { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip.btnish[aria-pressed="true"] .am-h { color: color-mix(in srgb, var(--inverse-ink) 62%, transparent); }
.am-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.am-scroll::-webkit-scrollbar { display: none; }
.am-scroll.am-ovf:not(.am-end) { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent); }

/* ---------- KPI ---------- */
.am-kpi .kpi-value .unit { font-size: 14px; }
.am-kpi-ico { width: 38px; height: 38px; border-radius: 50%; }
.am-kpi .kpi-foot { flex-wrap: nowrap; }
.am-kpi .kpi-foot > span:not(.chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-kpi .kpi-value.am-none { font-size: 24px; color: var(--ink-3); }
.am-fc { height: 12px; margin-top: auto; }
.am-fc + .kpi-foot { margin-top: 0; }
.am-fc > i { background: var(--inverse); }
.am-note { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); margin-top: auto; }
.am-note + .kpi-foot { margin-top: 0; }

/* ---------- оборот год к году ---------- */
.am-yoy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 24px; height: 100%; }
.am-yoy-col { min-width: 0; display: flex; flex-direction: column; }
.am-yoy-col .chart { flex: 1; min-height: 300px; max-height: 390px; margin-top: 6px; }
.am-big { font-size: 50px; }
.am-side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding-left: 24px; border-left: 1px solid var(--line); min-width: 0; }
.am-side .mini-stat .v { font-size: 22px; }
.am-side .mini-stat .v .unit { font-size: 11px; vertical-align: .5em; }

/* ---------- темп месяца ---------- */
.am-goals { display: flex; flex-direction: column; }
.am-goal-list { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.am-goal { display: flex; flex-direction: column; gap: 8px; }
.am-goal + .am-goal { padding-top: 14px; border-top: 1px solid var(--line); }
.am-goal-ico { width: 36px; height: 36px; border-radius: 12px; color: var(--ink); margin-right: 4px; }
.am-goal-t { font-weight: 600; }
.am-goal-v { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; text-align: right; }
.am-goal-v small { display: block; margin-top: 4px; font: 400 var(--t-xs)/1.2 var(--f-ui); letter-spacing: 0; color: var(--ink-3); }
.am-gbar { position: relative; }
.am-gbar .bar { height: 12px; }
.am-gmark { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); border-radius: 2px; transform: translateX(-1px); cursor: default; }
.am-gmark::after { content: ""; position: absolute; top: -3px; left: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.am-goal-none .am-goal-ico { color: var(--ink-3); }
.am-goal-none .am-hint { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-2); padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.am-goal-none code { font: 500 12px/1 var(--f-mono); padding: 1px 4px; border-radius: 6px; background: var(--surface-3); }
.am-goals .card-foot { align-items: flex-start; line-height: 1.45; }
.am-goals .card-foot .ic, .am-struct .card-foot .ic { color: var(--accent-text); flex: none; margin-top: 2px; }

/* ---------- структура оборота ---------- */
.card.am-struct { display: flex; flex-direction: column; }
.am-struct .card-head { margin-bottom: 14px; }
.am-filter { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px 10px 8px; border-radius: var(--r-lg); background: var(--surface-2); }
.am-filter-ic { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-3); cursor: default; }
.am-filter-ic .ic { width: 16px; height: 16px; }
.am-filter .am-chips { gap: 4px; flex: none; }
.am-filter .chip { height: 30px; padding: 0 10px; gap: 5px; }
.am-filter .chip.btnish { background: var(--surface); }
.am-filter .chip.btnish[aria-pressed="true"] { background: var(--inverse); }
.am-st-grid { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 18px; }
.am-donut .chart { height: 220px; }
.am-st-li { padding: 8px 0; gap: 10px; }
.am-st-li .sw { width: 8px; height: 26px; border-radius: 4px; }
.am-st-ico { width: 34px; height: 34px; border-radius: 11px; }
.am-st-li .li-title { font-weight: 600; }
.am-st-bar { width: 22%; min-width: 60px; }
.am-st-p { width: 44px; text-align: right; font-weight: 600; }
.am-st-d { width: 94px; text-align: right; }

/* ---------- страны ---------- */
.am-cts { display: flex; flex-direction: column; }
.am-ct-list { display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: space-between; }
.am-ct-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px); border-radius: 16px; text-align: left; transition: background var(--dur-1); }
.am-ct-row:hover { background: var(--surface-2); }
.am-ct-row[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.am-ct-flag { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.am-ct-row[aria-pressed="true"] .am-ct-flag { background: var(--surface); }
.am-ct-flag .flag { font-size: 18px; }
.am-ct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-ct-main .bar { display: block; }
.am-ct-name { font-weight: 600; }
.am-ct-v { font-weight: 500; }
.am-ct-v .unit { font-size: 11px; vertical-align: baseline; }
.am-ct-main .chip { height: 20px; }

.am-src-note { display: flex; align-items: flex-start; gap: 8px; margin: var(--gap) 4px 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.am-src-note .ic { margin-top: 1px; flex: none; }
.am-empty { padding: 8px 0; }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  .card.am-yoy, .card.am-struct, .card.am-goals, .card.am-cts { grid-column: span 12; }
  .am-goal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
  .am-goal + .am-goal { padding-top: 0; border-top: 0; }
  .am-ct-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 4px; }
  .am-ct-row { margin: 0; width: 100%; }
  .am-yoy-grid { grid-template-columns: 1fr; }
  .am-yoy .am-side { flex-direction: row; flex-wrap: wrap; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); justify-content: space-between; }
  .am-yoy .am-side > div:first-child { flex-basis: 100%; }
}
@media (max-width: 860px) {
  .am-st-grid { grid-template-columns: 1fr; }
  .am-ct-list { display: flex; flex-direction: column; }
  .am-goal-list { display: flex; flex-direction: column; gap: 18px; }
  .am-goal + .am-goal { padding-top: 18px; border-top: 1px solid var(--line); }
  .am-ct-row { margin: 0 -12px; width: calc(100% + 24px); }
  .am-donut .chart { height: 200px; }
}
@media (max-width: 720px) {
  .am-bar .seg { flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .am-nav { flex: 1 1 auto; justify-content: space-between; }
  .am-lbl { min-width: 0; flex: 1; }
  .am-yr { min-width: 84px; }
  .am-src { margin-left: 0; }
  .am-big { font-size: 38px; }
  .am-side .mini-stat { min-width: 40%; }
  .am-filter { padding: 8px 10px 8px 6px; gap: 6px; }
  .am-st-bar { display: none; }
  .am-st-d { width: auto; }
}
/* Пульт 2.0, «Аналитика → Клиенты» (живая вкладка): только токены var(--...). Из концепта design/pult-v2/css/screens/analytics.css
   (блок «клиенты»), классы acl-*: общий analytics.css принадлежит вкладке «Время» и здесь не нужен. */

.acl-tools .seg { max-width: 100%; }

/* ---------- KPI ---------- */
.acl-kpi .kpi-value .unit { font-size: 14px; }
.acl-kpi-ico { width: 38px; height: 38px; border-radius: 50%; }
.acl-kpi .kpi-label[data-tip] { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.acl-kpi .kpi-label .ic { color: var(--ink-4); }
/* подвал в одну строку: чип на общей линии с соседями, длинная подпись обрезается */
.acl-kpi .kpi-foot { flex-wrap: nowrap; }
.acl-kpi .kpi-foot > span:not(.chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- когорты ---------- */
.acl-coh .card-head { padding-bottom: 0; }
.acl-coh-wrap { padding: 0 22px 6px; }
.acl-tbl { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.acl-tbl th { height: 34px; padding: 0 6px; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500; line-height: 1; color: var(--ink-3); text-align: left; white-space: nowrap; }
.acl-tbl th.c { text-align: center; }
.acl-tbl th.r, .acl-tbl td.r { text-align: right; padding-right: 14px; }
.acl-tbl td { padding: 0; white-space: nowrap; font-size: var(--t-sm); }
.acl-k { font-weight: 500; padding-right: 8px !important; min-width: 82px; }
.acl-tbl tfoot td { padding-top: 6px; }
.acl-tbl tfoot .acl-k { color: var(--ink-3); }
.acl-tbl tfoot .acl-c { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* фон: серый, лайм, чернила; текст по светлоте фона (mid: тёмный на лайме, top: инверсия на чернилах) */
.acl-c {
  display: grid; place-items: center; height: 34px; min-width: 54px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in srgb, var(--accent) var(--k, 0%), var(--surface-2));
}
.acl-c.hi { background: color-mix(in srgb, var(--inverse) var(--k, 0%), var(--accent)); }
.acl-c.mid { color: var(--accent-ink); }
.acl-c.top { color: var(--inverse-ink); }
/* месяц ещё не наступил: штриховка; в когорте никого: пустая плитка */
.acl-c.na { background-color: transparent; background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.2px, transparent 1.2px 6px); box-shadow: inset 0 0 0 1px var(--line); opacity: .7; }
.acl-c.none { background: var(--surface-2); opacity: .55; }
/* последняя когорта: первый месяц после неё ещё идёт, вместо строки штриховки короткая подпись */
.acl-c.acl-wait { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 14px; background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; white-space: normal; height: auto; min-height: 34px; }
.acl-c.acl-wait .ic { color: var(--ink-3); flex: none; }
.acl-foot { margin: 6px 22px 0; padding-bottom: 18px; flex-wrap: wrap; justify-content: flex-start; gap: 10px 22px; }
.acl-foot > .t-sm { margin-left: auto; }
.acl-back .card-foot > span { min-width: 0; text-wrap: balance; }
.acl-grad { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }
.acl-grad i { width: 120px; height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--surface-2), var(--accent) 55%, var(--inverse)); box-shadow: inset 0 0 0 1px var(--line); }
.acl-keys { display: contents; }
.acl-key { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ink-3); }
.acl-key-none { width: 16px; height: 14px; border-radius: 4px; flex: none; background: var(--surface-2); opacity: .55; }
.acl-key-na { width: 16px; height: 14px; border-radius: 4px; flex: none; background-color: var(--surface-2); background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.2px, transparent 1.2px 4px); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- новые и вернувшиеся: график на всю ширину, итоги выбранного месяца строкой под ним ---------- */
.card.acl-nr { display: flex; flex-direction: column; }
.acl-nr .card-head { margin-bottom: 10px; }
.acl-nr-grid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.acl-nr-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acl-nr .chart { flex: 1; min-height: 240px; margin-top: 8px; }
.acl-nr-side { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.acl-nr-head { display: flex; align-items: baseline; gap: 10px; }
.acl-nr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); gap: 18px; align-items: start; }
.acl-nr-stats .mini-stat .v { font-size: 22px; }
.acl-nr-stats .mini-stat .v .unit { font-size: 11px; vertical-align: .5em; }
.acl-nr-stats .mini-stat .v .v-no { font-family: var(--f-ui); font-size: var(--t-body); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.acl-nr-split { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.acl-nr-split b { font-weight: 600; color: var(--ink); }
.acl-nr-split .chip { height: 20px; }
.stackbar.acl-split { height: 12px; gap: 3px; }
.acl-split > i { border-radius: var(--r-pill); background: var(--inverse); }
.acl-split > i.new { background: var(--accent); }

/* ---------- вторая сделка (лаймовая) ---------- */
.acl-second { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.acl-top-row { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.acl-top-row .ico-tile { width: 42px; height: 42px; border-radius: 14px; }
.acl-none { line-height: 1.45; color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.acl-second .pills { height: 44px; }
.acl-second-v { display: flex; align-items: flex-end; gap: 14px; }
.acl-second-v .kpi-value { font-size: 48px; line-height: .9; }
.acl-second-of { font-size: var(--t-sm); line-height: 1.35; color: color-mix(in srgb, var(--accent-ink) 70%, transparent); padding-bottom: 2px; }
.acl-second-split { display: flex; gap: 6px; flex-wrap: wrap; }
.acl-second-split span { display: inline-flex; gap: 5px; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--t-xs); background: color-mix(in srgb, var(--accent-ink) 9%, transparent); color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.acl-second-split b { color: var(--accent-ink); font-weight: 600; }
.acl-second-n { line-height: 1.4; color: color-mix(in srgb, var(--accent-ink) 65%, transparent); }

/* ---------- кого вернуть ---------- */
.acl-back { display: flex; flex-direction: column; }
.acl-back .list { flex: 1; }
/* подзаголовок длинный: переносится внутри своего столбца, кнопка остаётся справа */
.acl-back .card-head { flex-wrap: nowrap; gap: 12px; }
.acl-back .card-head > div { min-width: 0; flex: 1; }
.acl-back .card-head > .round-btn { flex: none; }
.acl-back-li { padding: 8px 0; gap: 8px; }
.acl-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 12px; padding: 4px; margin: -4px; }
.acl-who:hover { background: var(--surface-2); }
.acl-who .li-main { display: flex; flex-direction: column; }
.acl-who .li-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acl-who .li-sub { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acl-who .li-sub .flag { font-size: 13px; }
.acl-back-v { display: flex; flex-direction: column; font-weight: 500; font-size: var(--t-sm); }
.acl-back .copy { width: 30px; height: 30px; border-radius: 10px; background: var(--surface-2); }
/* у клиента без ника в Telegram кнопки нет: место за ней занято, суммы стоят одним столбцом */
.acl-tg-ph { width: 30px; flex: none; }

/* ---------- источник ---------- */
.acl-src { display: flex; align-items: flex-start; gap: 8px; margin: var(--gap) 4px 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.acl-src .ic { margin-top: 1px; flex: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  /* пары 8 + 4 на этой ширине тесные: обе карточки ряда на всю ширину, внутри раскладываем в колонки */
  .card.acl-nr, .stack.acl-cstack { grid-column: span 12; }
  .stack.acl-cstack { flex-direction: row; align-items: stretch; }
  .stack.acl-cstack > .card { flex: 1 1 0; min-width: 0; }
  /* лаймовая карточка растянута по соседу: таблетки растут в высоту, без пустого поля */
  .stack.acl-cstack > .acl-second { justify-content: space-between; }
  .stack.acl-cstack .acl-second .pills { height: auto; flex: 1 1 44px; max-height: 104px; }
  .acl-nr .chart { min-height: 280px; }
}
@media (max-width: 860px) {
  .stack.acl-cstack { flex-direction: column; }
  .stack.acl-cstack > .acl-second { justify-content: flex-start; }
  .stack.acl-cstack .acl-second .pills { height: 44px; flex: none; }
}
@media (max-width: 720px) {
  .acl-coh-wrap { padding: 0 14px 6px; }
  .acl-foot { margin: 6px 16px 0; }
  .acl-foot > .t-sm { margin-left: 0; }
  .acl-nr-stats { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .acl-nr-split { grid-column: 1 / -1; }
  .acl-src { margin: var(--gap) 2px 0; }
}
/* Пульт 2.0, «Аналитика → Торг» (живая вкладка): итоги, из чего сложились пересчёты, три таблицы. Только токены var(--...), префикс abg-.
   Общее со «Временем» (вкладки, строка периода, выбор сервиса) берётся из analytics.css; своё здесь, правки одной вкладки не трогают другую.
   На телефоне таблицы складываются в карточки (подпись поля из data-l), как в «Сверке» и «Курсах». */

.abg > * + * { margin-top: var(--gap); }
.abg > .abg-kpis + * { margin-top: var(--gap); }

/* ---------- итоги: пять карточек в ряд ---------- */
.abg-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.abg-kpi { min-height: 156px; }
.abg-kpi .kpi-label { display: inline-flex; align-items: center; gap: 6px; }
.abg-kpi .kpi-label[data-tip] { cursor: help; }
.abg-kpi .kpi-label .ic { color: var(--ink-4); }
.abg-kpi .kpi-foot { flex-wrap: wrap; row-gap: 6px; }
.abg-kpi .kpi-value .t-h3 { font-weight: 500; }
.abg-kpi .abg-approx { flex-basis: 100%; font-size: var(--t-xs); line-height: 1.35; }
.abg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.abg-pair .mini-stat .v { font-size: 30px; }
.abg-pair { white-space: normal; }
.abg-pair .mini-stat .l { font: 400 var(--t-sm)/1.3 var(--f-ui); letter-spacing: 0; }
.chip.accent .ic { width: 13px; height: 13px; }

/* ---------- из чего сложились пересчёты ---------- */
.abg-split .card-head { margin-bottom: 14px; }
.abg-bar { height: 16px; gap: 3px; }
.abg-bar > i, .abg-lg .sw { background: var(--line-2); }
.abg-bar > i.k-pos, .abg-lg .sw.k-pos { background: var(--pos); }
.abg-bar > i.k-info, .abg-lg .sw.k-info { background: var(--info); }
.abg-bar > i.k-neg, .abg-lg .sw.k-neg { background: var(--neg); }
.abg-bar > i.k-warn, .abg-lg .sw.k-warn { background: var(--warn); }
.abg-bar > i { border-radius: var(--r-pill); }
.abg-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 24px; margin-top: 16px; }
.abg-lg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: var(--t-sm); }
.abg-lg .sw { width: 12px; height: 12px; border-radius: 4px; margin-top: 3px; }
.abg-lg-t { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.abg-lg-t em { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; }
.abg-lg b { font-weight: 600; font-size: var(--t-body); }

/* ---------- таблицы ---------- */
.abg-card .card-head { padding-bottom: 6px; }
.abg-tbl { min-width: 640px; }
.abg-tbl th { white-space: nowrap; }
.abg-tbl th[data-tip] { cursor: help; }
.abg-tbl td { white-space: nowrap; height: 48px; }
.abg-tbl tr[hidden] { display: none !important; }
.abg-nm { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.abg-nm-t { min-width: 0; }
.abg-nm .chip { flex: none; }
.abg-who, .abg-code { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; text-align: left; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
button.abg-who:hover, button.abg-code:hover { background: var(--surface-3); }
.abg-code b { font-weight: 600; }
.abg-who .ellipsis { max-width: 240px; }
.abg-cases td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.abg-cases .sub { max-width: 220px; }
.abg-cases td.abg-marks { white-space: normal; min-width: 150px; max-width: 280px; }
.abg-cases td.abg-marks .chip { margin: 0 6px 6px 0; height: auto; min-height: 22px; padding-top: 3px; padding-bottom: 3px; line-height: 1.25; white-space: normal; }
.abg-cases tr.abg-out td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.abg-cases tr.abg-k-later td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.abg-cases tr.abg-k-against td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.abg-more { display: flex; justify-content: center; padding: 6px 0 20px; }
.abg-more:empty { display: none; }
.abg-more .btn { gap: 8px; }
.abg-more .btn[disabled] { opacity: .5; }
.abg-note, .abg-src { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.abg-note { margin: 4px 22px 18px; }
.abg-src { margin: var(--gap) 4px 0; }
.abg-note .ic, .abg-src .ic { margin-top: 1px; flex: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  /* три карточки в первом ряду и две во втором: ряд всегда заполнен */
  .abg-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .abg-kpi { grid-column: span 2; }
  .abg-kpi:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 860px) {
  .abg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abg-kpi, .abg-kpi:nth-child(n+4) { grid-column: auto; }
  .abg-kpis .abg-kpi:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .abg-kpi { min-height: 0; }
  .abg-kpi .kpi-value { font-size: 32px; }
  .abg-pair .mini-stat .v { font-size: 26px; }
  .abg-note { margin: 0 14px 14px; }
  .abg-tbl, .abg-tbl tbody { display: block; width: 100%; min-width: 0; }
  .abg-tbl thead { display: none; }
  .abg-tbl tbody { display: grid; gap: 10px; padding: 4px 12px 12px; }
  .abg-tbl tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
  .abg-mt td:last-child { grid-column: 1 / -1; }
  .abg-tbl tbody tr:hover { background: var(--surface-3); }
  .abg-tbl td, .abg-cases td { display: block; height: auto; padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left; }
  .abg-tbl td.r { text-align: left; }
  .abg-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: var(--t-xs); color: var(--ink-3); }
  .abg-tbl td:first-child { grid-column: 1 / -1; }
  .abg-tbl td:first-child::before { display: none; }
  .abg-who .ellipsis { max-width: 100%; }
  .abg-cases .sub { max-width: none; }
  /* случаи: время и уступка в первой строке, дальше заявка, менеджер с парой, курс, метки */
  .abg-cases tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t u" "w w" "m p" "r r" "k k"; }
  .abg-cases td:first-child { grid-column: auto; }
  .abg-cases td[data-l]::before { display: none; } /* в карточке случая подписей нет: время, код, менеджер, пара, курс и метки понятны по виду */
  .abg-cases .abg-c-t { grid-area: t; } .abg-cases .abg-c-w { grid-area: w; } .abg-cases .abg-c-m { grid-area: m; } .abg-cases .abg-c-p { grid-area: p; text-align: right; }
  .abg-cases .abg-c-r { grid-area: r; text-align: left; } .abg-cases .abg-c-u { grid-area: u; text-align: right; } .abg-cases td.abg-marks { grid-area: k; max-width: none; min-width: 0; }
  .abg-cases td.abg-marks:empty { display: none; }
  .abg-cases tbody tr { gap: 6px 12px; }
  .abg-cases .abg-c-w { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .abg-cases .abg-c-w .sub { margin: 0; }
  .abg-cases .abg-c-t .sub { display: inline; margin-left: 8px; }
  .abg-cases tr.abg-out td:first-child, .abg-cases tr.abg-k-later td:first-child, .abg-cases tr.abg-k-against td:first-child { box-shadow: none; }
  .abg-cases tr.abg-out { box-shadow: inset 3px 0 0 var(--warn); }
  .abg-cases tr.abg-k-later { box-shadow: inset 3px 0 0 var(--info); }
  .abg-cases tr.abg-k-against { box-shadow: inset 3px 0 0 var(--neg); }
  .abg-more { padding-bottom: 14px; }
}
/* Пульт 2.0, «Аналитика → Клиенты»: блок «Напоминания клиентам» (js/screens/remind2-an.js, владелец 09.10). Только токены var(--...). */

.rm2 .card-head { gap: 12px; flex-wrap: wrap; }
.rm2 .card-title .ic { margin-right: 8px; vertical-align: -3px; }
.rm2-sum { margin: 2px 0 14px; color: var(--ink-2); }
.rm2-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rm2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.rm2-tiles .mini-stat .t-xs { overflow-wrap: anywhere; }
.rm2-low { display: inline-block; padding-top: 6px; font: 500 var(--t-md, 15px)/1.2 var(--f-ui); letter-spacing: 0; color: var(--ink-3); white-space: normal; }

.rm2-tbl { width: 100%; max-width: 760px; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rm2-tbl th { padding: 8px 10px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); text-align: left; white-space: nowrap; }
.rm2-tbl td { padding: 10px; border-top: 1px solid var(--line); vertical-align: top; font-size: var(--t-sm); }
.rm2-tbl .r { text-align: right; }
.rm2-tbl td.r { white-space: nowrap; }
.rm2-tbl td.r b { display: block; font-weight: 600; }
.rm2-n { min-width: 0; max-width: 0; width: 34%; }
.rm2-n .ellipsis { display: block; font-weight: 500; }
.rm2-s { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.rm2-w { font-size: var(--t-xs); color: var(--ink-3); }
.rm2-g td { padding: 14px 10px 6px; border-top: 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.rm2-foot { align-items: flex-start; }

@media (max-width: 560px) {
  .rm2-tiles { gap: 12px; }
  .rm2-tiles .mini-stat .v { font-size: 22px; }
  .rm2-tbl th, .rm2-tbl td { padding-left: 6px; padding-right: 6px; }
  .rm2-tbl th { font-size: 11px; }
}
/* Люди как сущности (владелец 09.10): реестр «Клиенты» с партнёрами и не клиентами, блок в карточке, окно человека без карточки, подписи
   контактов. Только токены, классы с префиксом ent-. Файлы: js/screens/entities-list.js, -card.js, -person.js, -forms.js. */

/* ---------- «Кто в списке» в строке фильтров реестра ---------- */
.ent-kinds { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ent-kinds .seg button { white-space: nowrap; }
.ent-n { margin-left: 6px; font-size: var(--t-xs); font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
.ent-via { margin-top: 2px; font-size: var(--t-xs); color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-chip { flex: none; gap: 4px; }
.ent-chip .ic { width: 12px; height: 12px; }

/* упомянутые в переписке, карточки нет */
.ent-ment { display: grid; gap: 4px; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.ent-mrow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--surface-2); text-align: left; transition: background var(--dur-1); }
.ent-mrow:hover, .ent-mrow:focus-visible { background: var(--surface-3); }
.ent-mrow .ic { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.ent-mrow .faint { font-size: var(--t-xs); }
.ent-go { margin-left: auto; font-size: var(--t-xs); font-weight: 600; color: var(--accent-text); }

/* ---------- блок в карточке и в окне человека ---------- */
.ent-box { display: grid; gap: 8px; margin-top: 10px; }
.ent-row { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-sm); }
.ent-k { flex: none; width: 88px; color: var(--ink-3); font-size: var(--t-xs); text-transform: none; }
.ent-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ent-un { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 11px; border-radius: var(--r-pill); background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.ent-un em { font-style: normal; font-weight: 500; font-size: var(--t-xs); color: var(--ink-3); }
.ent-un.alias, .ent-un.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
.ent-un.off { color: var(--ink-3); }
.ent-ct { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: var(--r-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.ent-ct b { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.ent-form { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--ink); }
.ent-form.soft { background: var(--surface-2); }
.ent-form > .ic { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--warn); }
.ent-form.soft > .ic { color: var(--ink-3); }
.ent-fb { display: grid; gap: 4px; min-width: 0; }
.ent-ft { font-size: var(--t-sm); font-weight: 600; }
.ent-ft .faint { font-weight: 400; }
.ent-sug { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ent-sug .mono, .ent-fl .mono { overflow-wrap: anywhere; }
.ent-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ent-res { display: inline-flex; align-items: center; gap: 5px; }
.ent-res .ic { width: 13px; height: 13px; }
.ent-res.wait .ic { animation: cd-ph-spin 1s linear infinite; }
.ent-res.neg { color: var(--neg); }

/* окно человека без карточки */
.ent-p { display: grid; align-content: start; gap: 12px; }
.ent-src { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.ent-src > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.ent-q { margin-top: 2px; overflow-wrap: anywhere; }
.ent-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- подписи контактов не по форме ---------- */
.ent-tmpl { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; min-width: 0; }
.ent-tmpl .chip.sm { height: auto; min-height: 24px; max-width: 100%; padding-block: 3px; white-space: normal; text-align: left; line-height: 1.3; }
.ent-flist { display: grid; }
.ent-fitem { display: grid; gap: 4px; padding: 12px 20px; border-top: 1px solid var(--line); }
.ent-fh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; }
.ent-fl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.ent-fl > .faint:first-child { width: 48px; flex: none; font-size: var(--t-xs); }
.ent-fp { font-size: var(--t-xs); color: var(--warn); }
.ent-frefs { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-xs); color: var(--ink-2); }
.ent-ok { color: var(--pos); }
.ent-ref { display: inline-flex; align-items: center; gap: 4px; }
.ent-ref .ic { width: 12px; height: 12px; color: var(--ink-3); }

@media (max-width: 720px) {
  .ent-kinds { margin: 0 -14px; padding: 0 14px; width: calc(100% + 28px); overflow-x: auto; scrollbar-width: none; }
  .ent-kinds::-webkit-scrollbar { display: none; }
  .ent-kinds .t-xs { display: none; }
  .ent-kinds .seg { flex: none; }
  .ent-ment { padding: 12px 14px 14px; }
  .ent-row { flex-direction: column; gap: 4px; }
  .ent-k { width: auto; }
  .ent-tmpl, .ent-fitem { padding-left: 14px; padding-right: 14px; }
  .ent-fl > .faint:first-child { width: auto; }
}
/* Пульт 2.0: экран входа (js/login.js). Только токены из tokens.css, обе темы. */
.login {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px 9vh;
}
.login-theme { position: fixed; top: 16px; right: 16px; z-index: 2; background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.login-card { width: min(100%, 440px); padding: 0; overflow: hidden; box-shadow: var(--sh-2), var(--sh-inset); animation: rise var(--dur-3) var(--ease) both; }

/* шапка: главная плашка экрана (чернила и лайм в светлой теме, лайм и чернила в тёмной) */
.login-hero {
  position: relative; overflow: hidden;
  min-height: 200px; padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background-color: var(--hero-bg); color: var(--hero-ink);
}
.login-hero > * { position: relative; z-index: 1; }
.login-mark { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--hero-accent); color: var(--hero-bg); }
.login-mark svg { width: 28px; height: 28px; }
.login-title { font: 500 32px/1.08 var(--f-display); letter-spacing: -.04em; }
.login-lead { margin-top: 6px; min-height: 1.5em; font-size: var(--t-body); line-height: 1.5; color: var(--hero-ink-2); }
/* печатающийся подстрочник (js/login-type.js): курсор ровной чертой, не мигает; чтецу экрана своя неизменная строка */
.lt-c { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -.14em; background: currentColor; opacity: .7; }
.lt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lt-c { display: none; } }

.login-body { padding: 24px 28px 26px; display: grid; gap: 18px; }
.login-text { color: var(--ink-2); text-align: center; }
.login-foot { padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: var(--t-sm); color: var(--ink-3); text-align: center; }

/* кнопка Telegram (iframe виджета, 40 px); пока грузится, на её месте дорожка */
.login-tg { position: relative; min-height: 40px; display: flex; justify-content: center; } /* владелец 09.10: текст и кнопка по центру */
.login-tg iframe { display: block; max-width: 100%; border-radius: var(--r-pill); } /* белая подложка iframe в тёмной теме не торчит углами */
.login-skel { width: 238px; max-width: 100%; height: 40px; border-radius: var(--r-pill); }
.login-tg:has(iframe) .login-skel { display: none; }
.login-tg.failed { display: none; }

/* ошибка входа (красная) и «кнопка не загрузилась» (жёлтая): смысл и в значке, и в тексте, не только в цвете */
.login-msg { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); background: var(--neg-soft); font-size: var(--t-sm); line-height: 1.45; color: var(--ink); }
.login-msg > .ic { flex: none; margin-top: 1px; color: var(--neg); }
.login-msg > span { flex: 1 1 180px; min-width: 0; }
.login-msg.note { background: var(--warn-soft); }
.login-msg.note > .ic { color: var(--warn); }
.login-msg .btn { margin-left: 28px; background: var(--surface); }

@media (max-width: 720px) {
  .login-hero { min-height: 172px; padding: 22px; }
  .login-title { font-size: 28px; }
  .login-body { padding: 22px; }
}

/* «Первый вход: что будет дальше» под кнопкой (js/login.js): свёрнуто, чтобы вход оставался чистым */
.login-help { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.login-help > summary { cursor: pointer; list-style: none; text-align: center; color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 3px; min-height: 24px; }
.login-help > summary::-webkit-details-marker { display: none; }
.login-help ol { margin: 10px 0 0; padding-left: 22px; list-style: decimal; }
.login-help li + li { margin-top: 4px; }
.login-help p { margin: 8px 0 0; }
/* Панель 2.0: вход через бота (js/login-bot.js и js/login-bot-flow.js на экране входа, static/v2/login-bot.html и js/login-bot-page.js на странице /login/bot, владелец 25.10). Только токены. */
.login-bot { display: grid; gap: 10px; }
.login-or { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: var(--ink-3); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.login-bot .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.login-bot-sub, .login-bot-alt { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3); text-align: center; text-wrap: balance; }
.login-bot-alt a { color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; }
/* запрос с экрана ждёт бота (js/login-bot-flow.js): что делать дальше, или почему не вышло (красная плашка), и «Отменить» */
.login-bot-state { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); text-align: center; text-wrap: balance; }
.login-bot-state.err { padding: 10px 12px; border-radius: var(--r-md); background: var(--neg-soft); color: var(--ink); }
.login-bot-cancel { justify-self: center; }
/* виджет не загрузился (жёлтая пометка показана): вход через бота становится главной кнопкой */
#login-note:not([hidden]) ~ .login-bot #login-bot-go { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; box-shadow: var(--sh-2); }
#login-note:not([hidden]) ~ .login-bot #login-bot-go .ic { color: var(--accent); }
:root[data-theme="dark"] #login-note:not([hidden]) ~ .login-bot #login-bot-go .ic { color: var(--inverse-ink); }
/* жёлтая пометка длиннее прежней (первым советом вход через бота): текст на всю ширину, «Обновить» под ним */
#login-note > span { flex: 1 1 calc(100% - 28px); }
/* страница /login/bot: кнопки под сообщением, дорожка проверки по центру */
.lb-actions { display: grid; gap: 8px; }
#lb-error > span { text-wrap: balance; }
.lb-skel { margin: 0 auto; }
.login-body .btn { text-decoration: none; }
/* Пульт 2.0: окна 2FA (js/mfa.js, mfa-challenge.js, mfa-setup.js, mfa-pass.js, mfa-owner.js): «Вход с защитой», «Защита входа», «Сменить пароль».
   Волна 18 (владелец 17.10: «кривое поле, пароль и 2фа в одном моменте, всё коряво»). Раньше стили лежали в mobile.css.
   Причина кривого поля: поля стояли внутри блока без правил раскладки (inline-block подряд), зазор .mfa { gap } до них не доходил, поэтому поля,
   кнопка и кольцо фокуса (3 px) слипались: кольцо нижнего поля пряталось под кнопкой. Теперь каждый шаг это колонка с зазором 16 px.
   Только токены из tokens.css, обе темы. Окно 480 px, на телефоне вся ширина минус 16 с каждой стороны. Все поля окна одной высоты (48 px). */
.modal.mfa-modal { width: min(480px, calc(100vw - 32px)); overflow-x: hidden; }
.mfa { display: flex; flex-direction: column; gap: 16px; }
.mfa-head { display: flex; align-items: flex-start; gap: 12px; }
.mfa-ttl { flex: 1; min-width: 0; }
.mfa-ttl .t-h2 { margin: 0; }
.mfa-sub { margin-top: 2px; }
.mfa-head .icon-btn { margin-left: auto; flex: none; }
/* знак Exchange OS на плитке окна входа: те же цвета, что на экране входа (css/screens/login.css, .login-mark) */
.mfa-mark { width: 44px; height: 44px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--hero-accent); color: var(--hero-bg); }
.mfa-mark svg { width: 26px; height: 26px; }
/* шаги «1 из 2»: полоски; смысл несёт и подпись под заголовком, не только цвет */
.mfa-prog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.mfa-prog i { height: 4px; border-radius: 4px; background: var(--surface-3); transition: background var(--dur-2) var(--ease); }
.mfa-prog i.on { background: var(--inverse); }

/* шаг: колонка с зазором 16 px (поле, поле, строка сообщения, кнопка); одно поле пароля ИЛИ шесть клеток, не оба */
.mfa-step { display: flex; flex-direction: column; gap: 16px; }
.mfa-enter { animation: mfa-in 180ms var(--ease) both; }
@keyframes mfa-in { from { opacity: 0; transform: translateX(var(--mfa-dx, 14px)); } to { opacity: 1; transform: none; } }
.mfa-lead { margin: 0; }
.mfa .input { height: 48px; font-size: 16px; } /* 16 px: iPhone не приближает страницу при входе в поле */
.mfa-pwrow { position: relative; }
.mfa-pwrow .input { padding-right: 52px; }
.mfa-pwrow.bad .input, .mfa-code.bad .mfa-cells span { border-color: color-mix(in srgb, var(--neg) 70%, var(--ink)); }
.mfa-eye { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--ink-2); transition: color var(--dur-1) var(--ease); }
.mfa-eye:hover { color: var(--ink); }
.mfa-eye:focus-visible { border-radius: var(--r-md); }

/* шесть клеток поверх одного поля: вставка любой длины, цифры раскладываются по клеткам; кольцо только у текущей клетки */
.mfa-code { position: relative; height: 48px; }
.mfa-in { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: none; opacity: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.mfa-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 100%; pointer-events: none; }
.mfa-cells span { display: grid; place-items: center; min-width: 0; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; font: 600 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.mfa-code:hover .mfa-cells span { border-color: var(--line-2); }
.mfa-code:focus-within .mfa-cells span.on { background: var(--surface); border-color: var(--ink-3); box-shadow: var(--focus); }
.mfa-cgroup { display: flex; flex-direction: column; gap: 8px; }
.mfa-aux { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mfa-aux .t-sm { margin: 0; }

/* строка внизу шага: подсказка (раскладка, Caps Lock) или ошибка кода, одна на месте, чтобы кнопка не прыгала; ошибка поля пароля стоит у самого поля (.field > .mfa-msg) */
.mfa-slot { min-height: 20px; margin: -8px 0 -4px; } /* до поля 8 px, до кнопки 12 px: кольцо фокуса (3 px) ни во что не упирается */
.mfa-msg, .mfa-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; line-height: 1.45; }
.mfa-msg { color: color-mix(in srgb, var(--neg) 82%, var(--ink)); } /* не ниже 4,5:1 на белом и на тёмном окне (--neg в светлой теме 4,1) */
.mfa-hint { color: var(--ink-2); }
.mfa-hint .ic { margin-top: 1px; color: var(--warn); }
.field > .mfa-msg { margin-top: 2px; } /* 8 px от поля (6 зазор поля и 2): кольцо фокуса (3 px) текст не задевает; без ошибки строка скрыта и места не занимает */
.mfa-msg[hidden], .mfa-hint[hidden] { display: none; }
.mfa-step:has(.mfa-msg:not([hidden])) .mfa-hint { display: none; } /* ошибка поля или кода на шаге: подсказка внизу молчит (иначе тот же текст дважды: красным под полем и с треугольником внизу) */

.mfa-alt { align-self: center; }
.mfa-spin .ic { animation: spin .9s linear infinite; }

/* настройка: QR на белой плитке (иначе приложение его не прочитает) и ключ для ручного ввода */
.mfa-qrbox { display: grid; place-items: center; padding: 12px; border-radius: var(--r-md); background: #fff; align-self: center; }
.mfa-qr { display: block; width: 188px; height: 188px; image-rendering: pixelated; }
.mfa-keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mfa-key { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); white-space: pre-line; overflow-wrap: anywhere; text-align: center; user-select: all; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .mfa-enter { animation: none; }
  .mfa-prog i, .mfa-cells span, .mfa-eye { transition: none; }
  .mfa-spin .ic { animation: none; }
}

/* подсказка внизу шага: кому писать, если забыли пароль или потеряли телефон (js/mfa.js, Mfa.HELP) */
.mfa-help { margin: 0; text-align: center; }
/* Пульт 2.0: окно первого запуска на устройстве (js/push.js): три шага крупными кнопками. Только токены из tokens.css, обе темы.
   Шаг, который ещё нужно сделать, тёмная плашка (как главная кнопка), готовый зелёный, запрещённый красный, недоступный серый:
   смысл дублирует подпись справа, не один цвет. */
.pf {
  position: fixed; inset: 0; z-index: 62;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start;
  padding: 16px; overflow-y: auto;
}
/* по центру автоотступами, а не align-items: выше экрана окно иначе уходит за верх и до его начала не доскроллить (Android с советом про батарею, маленький iPhone) */
.pf-card { position: relative; z-index: 61; width: 100%; max-width: 440px; margin: auto 0; padding: 0; overflow: hidden; box-shadow: var(--sh-pop), var(--sh-inset); animation: rise var(--dur-3) var(--ease) both; }

.pf-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 22px 22px;
  background-color: var(--hero-bg); color: var(--hero-ink);
}
.pf-head > * { position: relative; z-index: 1; }
.pf-mark { width: 44px; height: 44px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--hero-accent); color: var(--hero-bg); }
.pf-mark svg { width: 24px; height: 24px; }
.pf-title { font: 500 22px/1.15 var(--f-display); letter-spacing: -.03em; }

.pf-steps { list-style: none; margin: 0; padding: 16px 16px 4px; display: grid; gap: 10px; }
.pf-item { display: grid; gap: 8px; padding: 0; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.pf-step {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 72px; padding: 14px 14px 14px 12px;
  text-align: left; color: inherit; font-weight: 600; font-size: 15px; line-height: 1.25;
  transition: transform var(--dur-1) var(--ease);
}
.pf-step[aria-disabled="false"]:active { transform: scale(.98); }
.pf-step[aria-disabled="true"] { cursor: default; }
.pf-step .ico-tile { width: 44px; height: 44px; border-radius: 15px; background: var(--surface); }
.pf-name { min-width: 0; }
.pf-hint { padding: 0 16px 14px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.pf-hint ol { margin: 0; padding-left: 22px; list-style: decimal; }
.pf-hint li + li { margin-top: 4px; }
.pf-item > .btn { width: calc(100% - 28px); margin: 0 14px 14px; }

.pf-item[data-st="todo"] { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; box-shadow: var(--sh-2); }
.pf-item[data-st="todo"] .ico-tile { background: var(--accent); color: var(--accent-ink); }
.pf-item[data-st="todo"] .pf-hint { color: var(--inverse-ink-2); }
.pf-item[data-st="done"] { background: var(--pos-soft); border-color: transparent; }
.pf-item[data-st="done"] .ico-tile { background: var(--surface); color: var(--pos); }
.pf-item[data-st="denied"] { background: var(--neg-soft); border-color: transparent; }
.pf-item[data-st="denied"] .ico-tile { background: var(--surface); color: var(--neg); }
.pf-item[data-st="na"] .pf-step { color: var(--ink-3); }

.pf-foot { padding: 8px 16px 18px; }

@media (max-width: 720px) {
  .pf { padding: 12px; }
  .pf-card { margin: auto 0 0; } /* телефон: окно у нижнего края */
  .pf-head { padding: 18px; }
  .pf-title { font-size: 20px; }
  .pf-steps { padding: 12px 12px 2px; }
}
/* как показывать уведомление: подпись и переключатель в одну строку, в узком окне друг под другом */
.pf-style { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 2px 14px 14px; }
.pf-style .pf-merge { flex: 0 0 100%; }

/* вступление окна (js/push-fix.js, lead): зачем всё это; подсказка «что случится по нажатию» и бота из абзацев; «Уведомления не приходят?» под пробным уведомлением */
.pf-lead { list-style: none; padding: 2px 4px 4px; display: grid; gap: 6px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.pf-lead p { margin: 0; }
.pf-hint p { margin: 0 0 6px; }
.pf-hint p:last-child { margin-bottom: 0; }
.pf-trial { margin: 0; }
.pf-np { margin-top: 10px; }
.pf-np > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.pf-np > summary::-webkit-details-marker { display: none; }
.pf-np ol { margin: 6px 0 0; padding-left: 22px; list-style: decimal; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.pf-np li + li { margin-top: 4px; }
.pf-np-end { margin: 8px 0 0; }
/* Пульт 2.0: «Память устройства» (js/devmem.js, владелец 23.10) и полоса «обновляется» над копией переписки (js/screens/chats-cache.js).
   Только токены из tokens.css. */
.dm { min-width: 0; } /* ширину даёт .modal (components.css); своя ширина выпирала за поля на телефоне */
.dm .icon-btn { flex: none; }
.dm-on { cursor: pointer; margin-top: 8px; padding-left: 0; padding-right: 0; gap: 12px; }
.dm-on input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent-text); }
.dm-stat { margin-top: 8px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.dm-stat b { color: var(--ink); font-weight: 600; }
.dm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* копия переписки на экране, свежий ответ ещё в пути: тонкая бегущая полоса сверху диалога */
.ch-main[data-stale] { position: relative; }
.ch-main[data-stale]::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-text) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: dm-run 1.1s var(--ease, ease) infinite;
}
@keyframes dm-run { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .ch-main[data-stale]::before { animation: none; background: var(--accent-text); opacity: .5; } }
/* Панель 2.0: обязательные разрешения и обучение (js/onboard.js, onboard-2.js, push-help.js, screens/access-onb.js). Только токены из tokens.css, обе
   темы. Состояние всегда дублируется подписью: цвет не единственный признак. */
body.ob-lock, body.tr-on { overflow: hidden; }

/* окно «Настройте устройство» у менеджера: без закрытия, поверх окна новости, длинное окно листается */
.pf.lock { z-index: 120; display: flex; flex-direction: column; align-items: center; }
.pf.lock .pf-card { margin: auto 0; flex-shrink: 0; } /* владелец 29.10: в колонке карточка с overflow: hidden сжималась до высоты экрана, низ (геолокация, бот) обрезался и не прокручивался */
.pf.lock .scrim { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-how { display: grid; gap: 6px; }
.pf-how b { font-weight: 600; color: var(--ink); }
.pf-how ol { display: block; margin: 0; padding-left: 22px; list-style: decimal; }
.pf-how li + li { margin-top: 5px; }
.pf-item[data-st="todo"] .pf-how b { color: var(--inverse-ink); }
.pf-item.pf-tip { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--info-soft); border-color: transparent; }
.pf-item.pf-tip .ico-tile { width: 44px; height: 44px; border-radius: 15px; background: var(--surface); color: var(--info); }
/* iPhone: свёрнутая подсказка про настройки Safari (js/push-keep.js, владелец 08.10) */
.pf-ios > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.pf-ios > summary::-webkit-details-marker { display: none; }
.pf-ios[open] > summary { min-height: 0; }
.pf-ios p { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.pf-dtest { display: grid; gap: 8px; padding: 0 14px 14px; }
.pf-dtest .btn { margin: 0; justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.pf-dbtns { display: grid; gap: 8px; }
.pf-down { display: flex; align-items: center; gap: 8px; }
.pf-down .input { flex: none; width: 84px; height: 40px; }
.pf-down .btn { margin-left: auto; }
.pf-dleft { color: var(--ink-2); }
.pf-dleft:empty { display: none; }

/* карточка «Пройдите обучение, и панель откроется» и приглашение «Пройти обучение?»: панель под ними видна. На телефоне шторка снизу */
.ob {
  position: fixed; inset: 0; z-index: 120; overflow-y: auto; overscroll-behavior: contain;
  display: flex; justify-content: center; padding: 24px 16px;
  background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade var(--dur-3) var(--ease) both;
}
.ob-card { width: min(520px, 100%); margin: auto 0; padding: 26px 26px 24px; box-shadow: var(--sh-pop); animation: rise var(--dur-3) var(--ease) both; }
.ob-top { display: flex; align-items: center; gap: 8px 12px; }
.ob-top .chip { font-weight: 600; }
.ob-h { margin: 14px 0 6px; font: 500 26px/1.15 var(--f-display); letter-spacing: -.03em; outline: none; overflow-wrap: anywhere; }
.ob-lead { margin: 0 0 16px; font-size: var(--t-sm); color: var(--ink-3); }
.ob-bar { height: 8px; margin-bottom: 14px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ob-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width var(--dur-3) var(--ease); }
.ob-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.mt-12.ob-list { margin-top: 12px; }
.ob-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); text-align: left; color: inherit; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-1), transform var(--dur-1);
}
.ob-row:hover { border-color: var(--ink-3); }
.ob-row:active { transform: scale(.99); }
.ob-row[data-done="true"] { background: var(--pos-soft); border-color: transparent; }
.ob-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: var(--t-sm); font-weight: 600; }
.ob-n .ic { width: 18px; height: 18px; }
.ob-row[data-done="true"] .ob-n { background: var(--surface); color: var(--pos); }
.ob-t { min-width: 0; overflow-wrap: anywhere; }
.ob-out { margin-top: 8px; }

/* «Доступы»: обучение и устройства людей */
.ab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-p { border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.ab-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: inherit; cursor: pointer; }
.ab-row > .ic { color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
.ab-p[data-open="true"] .ab-row > .ic { transform: rotate(180deg); }
.ab-who { display: grid; min-width: 0; line-height: 1.25; }
.ab-who .name { font-weight: 600; overflow-wrap: anywhere; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ab-d { display: grid; gap: 8px; padding: 4px 14px 14px; }
.ab-b { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ab-bh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ab-fb { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent-text); background: var(--accent-soft); border-radius: var(--r-xs); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.ab-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* обязательное обучение у человека: переключатель, подпись про умолчание роли, возврат к умолчанию */
.ab-req { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 14px 12px; }
.ab-req .switch { cursor: pointer; }
.ab-req .switch::before { content: ""; position: absolute; inset: 0 -6px -10px; } /* зона нажатия не заходит вверх на шапку человека (на телефоне зазора нет) */
.ab-req .switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-rq { font-size: var(--t-sm); font-weight: 600; }
.ab-rd { margin-left: auto; }

@media (max-width: 720px) {
  .ob { padding: 0; align-items: flex-end; }
  .ob-card { width: 100%; margin: 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
  .ob-h { font-size: 22px; }
  .ab-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .ab-row .ab-chips { grid-column: 1 / -1; grid-row: 2; }
  .ab-rd { margin-left: 0; }
}
/* 08.10: проверка и настройка уведомлений свёрнуты под одной строкой, как остальные шаги */
/* «Проверить и настроить уведомления» (владелец 08.10: строка прилипала к краю плашки): строка под названием шага
   (12 + 44 + 12 = 68 px от края, как текст «Разрешить уведомления»), раскрытое содержимое с полями плашки */
.pf-more { margin: -10px 14px 12px 12px; }
.pf-more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--t-sm); padding: 2px 0 2px 56px; min-height: 32px; }
.pf-more .pf-dtest { padding: 0; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary .ic { width: 16px; height: 16px; }
.pf-more[open] > summary { margin-bottom: 8px; }
.pf-st-hint { display: block; font-size: var(--t-xs); opacity: .8; }
/* Панель 2.0: тур по панели (js/tour.js, tour-scenes.js, tour-pill.js, спека 5.1-5.5): затемнение рисуют четыре прямоугольника .tr-dim вокруг выреза, сам корень #tr
   и рамка выреза нажатий не ловят (баг s8-05: раньше корень закрывал весь экран, и ⋯ с правой кнопкой в вырезе не работали); подсказка кликабельна, на телефоне лист
   снизу. Полоса учебной панели (#trn-bar, 140) всегда выше тура и сдвигает его вниз на --trn-h. Только токены, обе темы.
   19.10 (train-fix3, iPhone): слой #tr лежит на видимой области (top: --vvt, height: --vvh из js/kb.js, деленные на --zoom: CSS zoom корня на компьютере), а четыре прямоугольника, вырез и подсказка стоят внутри него
   (absolute), и js/tour-view.js считает все координаты от собственной рамки слоя: когда iOS сдвигает видимую область относительно fixed-слоя, рамка не уезжает от цели.
   Лист подсказки (bottom: 0) держится у видимого низа, над клавиатурой. Клавиатура открыта в поле панели (html[data-kb="1"]): слой не виден и не мешает печатать. */
.tr { position: fixed; left: 0; right: 0; top: calc(var(--vvt, 0px) / var(--zoom, 1)); height: calc(var(--vvh, 100dvh) / var(--zoom, 1)); z-index: 130; pointer-events: none; animation: fade var(--dur-2) var(--ease) both; }
html[data-kb="1"] .tr:not(:focus-within) { visibility: hidden; pointer-events: none; } /* фокус в самом туре (поле отзыва на экране итога): слой остаётся, иначе клавиатура гасила бы своё поле */
.tr[hidden] { display: none; }
.tr-dim { position: absolute; display: block; background: var(--scrim); pointer-events: auto; }
.tr.dim .tr-dim { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tr-hole {
  position: absolute; border-radius: var(--r-md); pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent);
  transition: left var(--dur-2) var(--ease), top var(--dur-2) var(--ease), width var(--dur-2) var(--ease), height var(--dur-2) var(--ease);
}
.tr-hole[hidden] { display: none; }
.tr-tip { position: absolute; width: min(380px, calc(100vw - 24px)); padding: 18px; box-shadow: var(--sh-pop); pointer-events: auto; animation: fade var(--dur-2) var(--ease) both; }
.tr-tip.mid { left: 50%; top: calc(50% + var(--trn-h, 0px) / 2); transform: translate(-50%, -50%); }
.tr-arrow { display: none; position: absolute; width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--glass-line); transform: rotate(45deg); }
.tr-tip[data-side="b"] .tr-arrow { display: block; top: -8px; left: calc(var(--ax) - 7px); border-right: 0; border-bottom: 0; }
.tr-tip[data-side="t"] .tr-arrow { display: block; bottom: -8px; left: calc(var(--ax) - 7px); border-left: 0; border-top: 0; }
.tr-tip[data-side="r"] .tr-arrow { display: block; left: -8px; top: calc(var(--ay) - 7px); border-right: 0; border-top: 0; }
.tr-tip[data-side="l"] .tr-arrow { display: block; right: -8px; top: calc(var(--ay) - 7px); border-left: 0; border-bottom: 0; }
.tr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tr-chip { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-title { margin: 0 0 6px; font: 500 20px/1.2 var(--f-display); letter-spacing: -.02em; outline: none; overflow-wrap: anywhere; }
/* длинный шаг (памятка про напоминание) на невысоком окне: прокручивается текст, а заголовок, кнопки и стрелка остаются на виду; на телефоне прокручивается весь лист */
.tr-text { max-height: max(120px, calc(100vh - 210px)); max-height: max(120px, calc(100dvh - 210px)); overflow-y: auto; }
.tr-text p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
/* картинки в подсказке (js/tour-pic.js): пример уведомления и шкала ожидания */
.tr-pic { margin: 2px 0 8px; }
.tr-pic[hidden] { display: none; }
.tp-push { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.tp-push .logo { width: 36px; height: 36px; border-radius: 11px; }
.tp-push .logo svg { width: 22px; height: 22px; }
.tp-push-b { min-width: 0; flex: 1; }
.tp-push-h { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }
.tp-push-h b { color: var(--ink); font-weight: 600; }
.tp-push-t { margin-top: 2px; font-size: var(--t-sm); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.tp-lad { display: flex; margin: 0; padding: 4px 0 0; list-style: none; }
.tp-lad li { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 2px; text-align: center; }
.tp-lad li::before { content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 2px; background: var(--line-2); }
.tp-lad li:last-child::before { display: none; }
.tp-lad i { position: relative; width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--ink-3); box-shadow: 0 0 0 3px var(--surface); }
.tp-lad .pos i { background: var(--pos); }
.tp-lad .warn i { background: var(--warn); }
.tp-lad .neg i { background: var(--neg); }
.tp-lad b { margin-top: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.tp-lad span { font-size: var(--t-xs); line-height: 1.25; color: var(--ink-3); overflow-wrap: anywhere; }
.tr-end { display: grid; gap: 6px; margin-top: 6px; }
.tr-end[hidden] { display: none; }
.tr-end .textarea { width: 100%; resize: vertical; }
.tr-err { color: var(--neg); font-weight: 600; }
.tr-err:empty { display: none; }
.tr-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tr-foot [hidden] { display: none; }

/* шаг с действием: меню и всплывашки панели выше тура, чтобы их можно было нажать; сообщения (тост «Вернули к обучению») над затемнением, но ниже полосы */
body.tr-do .pop, body.tr-do .cm { z-index: 135; }
body.tr-mb .ch-mb { opacity: 1; } /* шаг, где действие это ⋯ (класс ставит js/tour-view.js): ⋯ видно сразу, а не только при наведении */
body.tr-on .toasts { z-index: 135; }

/* цель в полосе учебной панели: полоса выше тура, поэтому рамка на самом элементе (js/tour-view.js) */
.tr-lit { outline: 3px solid var(--accent); outline-offset: 3px; }

/* плашка свёрнутого тура: снизу слева, на телефоне над нижним меню (док: низ max(12px, safe-area) и высота 62px) */
.tr-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 130; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--surface); color: var(--ink); box-shadow: var(--sh-pop);
  font: inherit; font-size: var(--t-sm); white-space: nowrap; cursor: pointer; animation: fade var(--dur-2) var(--ease) both;
}
.tr-pill:hover { border-color: var(--accent); }
.tr-pill:focus-visible { outline: none; box-shadow: var(--focus); }
.tr-pill .ic { flex: none; color: var(--accent-text); }
.tr-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.tr-pill b { flex: none; font-weight: 600; }

@media (max-width: 720px) {
  .tr-tip, .tr-tip.mid {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none; max-height: 64vh; max-height: 64dvh; overflow-y: auto;
    padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
  }
  .tr-tip[data-side="sheet-t"] { top: var(--trn-h, 0px); bottom: auto; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; border-radius: 0 0 var(--r-lg) var(--r-lg); border-bottom: 1px solid var(--glass-line); border-top: 0; }
  .tr-arrow { display: none !important; }
  .tr-text { max-height: none; overflow-y: visible; }
  .tr-tip.fit { display: flex; flex-direction: column; overflow: hidden; } /* лист ужат до свободного места (js/tour-view.js): прокручивается текст, а заголовок и кнопки на месте */
  .tr-tip.fit .tr-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .tr-title { font-size: 18px; }
  .tr-pill { left: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); max-width: calc(100vw - 24px); }
}
/* Пульт 2.0: ворота новостей (js/news-gate.js): карточка или страница, узкая плашка, блок «прочитал и понял». Только токены. */
:root { --ngbar-h: 0px; }
.topbar { top: calc(var(--frame) + var(--ngbar-h)); }
.side { top: calc(var(--frame) + var(--ngbar-h)); height: calc(100vh - var(--frame) * 2 - var(--ngbar-h)); }
body.ng-lock { overflow: hidden; }

/* плашка: пока клиенты ждут, новости только напоминают о себе; закрыть нельзя */
.ng-bar {
  position: sticky; top: 0; z-index: 56; padding: 7px 14px; text-align: center;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
}
.ng-bar .ic { vertical-align: -3px; margin-right: 6px; }
.ng-bar-a { display: inline-block; margin-left: 8px; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* окно новости. Короткая: карточка по центру поверх затемнённого пульта (пульт виден, но недоступен: inert в js). На телефоне
   шторка снизу. Длинная (.page, js/news-gate.js): страница на весь экран без затемнения. Закрыть нельзя, пока не отмечено. */
.ng {
  position: fixed; inset: 0; z-index: 100; overscroll-behavior: contain;
  display: flex; justify-content: center; align-items: center; padding: 24px 16px;
  background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade var(--dur-3) var(--ease) both;
}
.ng[hidden] { display: none; }
.ng .ng-card {
  width: min(600px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; scroll-padding: 12px;
  box-shadow: var(--sh-pop); animation: rise var(--dur-3) var(--ease) both;
}
.ng.page {
  overflow-y: auto; align-items: flex-start; padding: 28px 16px calc(40px + env(safe-area-inset-bottom));
  background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ng.page .ng-card { width: min(720px, 100%); max-height: none; overflow: visible; margin: auto 0; box-shadow: var(--sh-2); }
.ng-card { padding: 28px 28px 26px; box-shadow: var(--sh-2); }
.ng-top { display: flex; align-items: center; gap: 8px 12px; }
.ng-top .chip { font-weight: 600; }
.ng-lead { margin: 6px 0 18px; font-size: var(--t-sm); color: var(--ink-3); }
.ng-clients { width: 100%; justify-content: center; margin-bottom: 16px; white-space: normal; text-align: center; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.ng-title { margin: 0 0 16px; font: 500 28px/1.15 var(--f-display); letter-spacing: -.03em; overflow-wrap: anywhere; outline: none; }
.ng-meta { margin: -10px 0 14px; } /* под заголовком: тянется к нему, пустая строка не занимает места */
.ng-meta:empty { display: none; }
.ng-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; color: var(--ink); }
.ng-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ng-read { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* «прочитал и понял», вопрос, большие варианты ответа */
.nw-read { display: flex; flex-direction: column; gap: 14px; }
.nw-check {
  display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 14px 16px; cursor: pointer;
  border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--line-2);
  font-weight: 600; transition: border-color var(--dur-1), background var(--dur-1);
}
.nw-check input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--accent-text); }
.nw-check small { display: block; margin-top: 2px; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); }
.nw-check:has(input:checked) { border-color: var(--accent-text); background: var(--accent-soft); }
.nw-q-t { margin: 6px 0 12px; font: 600 18px/1.35 var(--f-ui); overflow-wrap: anywhere; }
.nw-opts { display: grid; gap: 10px; }
.nw-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 12px 16px; cursor: pointer;
  border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 500; text-align: left; overflow-wrap: anywhere;
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
button.nw-opt:hover { border-color: var(--ink); background: var(--surface-2); }
button.nw-opt:active { transform: scale(.99); }
.nw-opt[disabled] { opacity: .5; pointer-events: none; }
.nw-opt-i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-size: var(--t-sm); font-weight: 600; }
.nw-msg { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--neg-soft); color: var(--neg); font-weight: 600; }
.nw-msg[hidden], .nw-q[hidden] { display: none; }
/* поздравление и прощание: поле «пара слов» вместо вопроса (js/news-read.js) */
.nw-gt { display: flex; flex-direction: column; gap: 6px; }
.nw-gt .textarea { width: 100%; min-height: 84px; font-size: 16px; resize: vertical; }

/* напоминание владельцу (js/news-owner.js): та же липкая плашка, что у ворот, но спокойная и со ссылкой, не запирает */
.ng-bar.own { background: var(--accent-soft); color: var(--ink); border-bottom-color: var(--line-2); }
.ng-bar.own .ic { color: var(--accent-text); }
.ng-bar.own .ng-bar-a { color: var(--accent-text); font-weight: 600; }

@media (max-width: 720px) {
  .ng { padding: 0; align-items: flex-end; }
  .ng .ng-card { width: 100%; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 90vh; max-height: 90dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; animation-name: ng-up; }
  .ng.page { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); align-items: flex-start; }
  .ng.page .ng-card { padding: 20px 16px 18px; border-radius: var(--r-lg); border-bottom: 1px solid var(--line); max-height: none; }
  .ng-title { font-size: 22px; }
  .ng-text { font-size: 15px; }
}
@keyframes ng-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.ng-title:focus, .ng-title:focus-visible { outline: none; box-shadow: none; }
/* Число непрочитанных новостей (js/news-badge.js): плитка «Новости» в шторке «Разделы» на телефоне; в боковом меню и нижней панели значок уже оформлен (base.css). */
.more-tile[href$="#news"] { position: relative; }
.more-tile .badge { position: absolute; top: 6px; right: 8px; }
/* Пульт 2.0, экран «Новости» (js/screens/news.js, news-2.js): список, шторка, редактор, «Кто прочитал». Только токены. */
.nw-wrap { max-width: 860px; }
.nw-tabs { margin-bottom: 2px; overflow-x: auto; }
.nw-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; }
.nw-item.pend { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.nw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-chips:empty { display: none; }
.nw-t { padding: 0; text-align: left; font: 600 18px/1.3 var(--f-ui); letter-spacing: -.01em; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.nw-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.nw-pre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); overflow-wrap: anywhere; }
.nw-st { display: grid; gap: 6px; margin-top: 4px; }
.nw-st-t { font-size: var(--t-sm); color: var(--ink-2); }
.nw-st-t b { color: var(--ink); font-variant-numeric: tabular-nums; }
.nw-acts { margin-top: 6px; }
.nw-full { margin: 14px 0 6px; }
.nw-qv { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.nw-qo { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ink-2); overflow-wrap: anywhere; }
.nw-qo.ok { color: var(--pos); font-weight: 600; }

/* редактор */
.nw-ed { display: flex; flex-direction: column; gap: 16px; }
.nw-ed > * { flex-shrink: 0; } /* шторка короче содержимого: поля не сжимаются, шторка прокручивается */
.nw-ed .nw-check { font-weight: 500; }
.nw-qed .input { background: var(--surface); }
.nw-ed .seg { flex-wrap: wrap; height: auto; }
.nw-qed[hidden], .nw-pvw[hidden], .nw-err[hidden] { display: none; }
.nw-oe { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nw-oe input[type="radio"] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent-text); }
.nw-pv { padding: 20px 18px; box-shadow: none; border: 1px dashed var(--line-2); }
.nw-pv .ng-title { font-size: 22px; }
.nw-err { padding: 12px 14px; border-radius: var(--r-md); background: var(--neg-soft); color: var(--neg); font-weight: 600; }
.nw-ed-foot { position: sticky; bottom: 0; padding: 12px 0 2px; background: var(--surface); border-top: 1px solid var(--line); }
.nw-kh { margin-top: 6px; }
.nw-kh:empty { display: none; }
.nw-qbox { display: flex; flex-direction: column; gap: 10px; }
.nw-qbox[hidden] { display: none; }
.nw-ai { align-self: flex-start; }
.nw-ai-n { padding: 8px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink-2); }
.nw-ai-n[hidden] { display: none; }

/* «Кто прочитал» */
.nw-sum { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-2); }
.nw-rr { align-items: flex-start; }
.nw-rc { margin-top: 6px; }
.nw-rn { font-weight: 600; overflow-wrap: anywhere; }
.nw-rd-sub { margin-top: 2px; font-size: var(--t-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.nw-gr { margin-top: 6px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 720px) {
  .nw-item { padding: 16px 16px; }
  .nw-acts .btn { flex: 1 1 auto; justify-content: center; }
}
/* Пульт 2.0: смена и AFK дольше плана (js/shift.js, js/afk-over.js, владелец 06.10). Только токены из tokens.css, обе темы.
   Чип смены в верхней строке: зелёный на смене по графику, синий смена вручную, серый не на смене; на телефоне только значок
   с точкой статуса (текст в aria-label и подсказке). Вопрос в конце смены не блокирует экран: карточка внизу справа. */
.shift-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 40px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent;
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease);
}
.shift-chip:hover { border-color: var(--line-2); }
.shift-chip:active { transform: scale(.97); }
.shift-chip.on { background: var(--pos-soft); color: var(--pos); }
.shift-chip.manual { background: var(--info-soft); color: var(--info); }
.shift-chip .sc-ic { display: none; }
.shift-chip.manual .sdot { background: var(--info); }
.shift-pop { width: 300px; max-width: calc(100vw - 32px); padding: 10px 8px 8px; }
.shift-pop .sdot { margin-right: 2px; }
.shift-pop .sdot.manual { background: var(--info); }
.shift-opt { cursor: pointer; }
.shift-opt input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent-text); }

.shift-ask {
  position: fixed; z-index: 45; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 24px));
  display: grid; gap: 12px; padding: 16px 16px 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  animation: rise var(--dur-3) var(--ease) both;
}
.shift-ask .sa-t { font-size: var(--t-body); line-height: 1.45; }
.shift-ask .sa-b { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .shift-chip { width: 40px; padding: 0; justify-content: center; }
  .shift-chip .sc-t, .shift-chip > .sdot { display: none; }
  .shift-chip .sc-ic { display: inline-flex; }
  .shift-chip::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--surface); }
  .shift-chip.off::after { background: var(--ink-4); }
  .shift-ask { left: 12px; right: 12px; bottom: 92px; width: auto; }
  /* на 375 px строка и так полная (значок, поиск, «Отойти», тема, уведомления, колокол, аватар): чипу место даём за счёт
     значка-логотипа (он ничего не нажимает) и ширины кнопки «Отойти» */
  .topbar:has(.shift-chip) .logo.show-m { display: none; }
  .topbar:has(.shift-chip) > [data-afk-open] { width: 42px; padding: 0; }
}

/* AFK дольше плана: таймер мягко мигает, затемнение медленно наливается тёмно-красным. JS ставит .over и --afk-over (сколько
   секунд плана уже вышло): анимация с отрицательной задержкой, поэтому после перезагрузки страницы цвет не начинается с нуля.
   Краснеет отдельный слой (прозрачность, без перерисовки размытия), полный цвет через 5 минут, когда уходит пуш. */
.afk-scrim::before { content: ""; position: absolute; inset: 0; background: var(--afk-red); opacity: 0; pointer-events: none; }
.afk-scrim .afk-card { position: relative; z-index: 1; }
.afk-scrim.over::before { animation: afk-redden 300s linear forwards; animation-delay: calc(var(--afk-over, 0) * -1s); }
@keyframes afk-redden { to { opacity: .9; } }
.afk-card .t-hero.over, .afk-pill.over [data-afk-left] { color: var(--neg); animation: afk-blink 2.6s ease-in-out infinite; }
@keyframes afk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.afk-card [data-afk-plan] { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }
.afk-sum { text-align: center; padding: 8px 4px 4px; }
.afk-sum .t-hero { font-size: 40px; margin: 12px 0 4px; }
.sch-cf.over { color: var(--neg); }
@media (prefers-reduced-motion: reduce) {
  .afk-scrim.over::before { animation: none; opacity: .75; }
  .afk-card .t-hero.over, .afk-pill.over [data-afk-left] { animation: none; }
}
:root[data-shot] .afk-scrim.over::before { opacity: .75; }
/* Пульт 2.0: горячая кнопка «Перейти в Чаты» в верхней строке (js/chats-hot.js, владелец 08.10). Основа .icon-btn (42 px: область
   нажатия не меньше 40 px и на телефоне). Число ждущих ответа красным значком в правом верхнем углу, кольцо цвета кнопки отделяет его
   от значка. Белый текст на красном читается в светлой теме (5,3:1), в тёмной красный светлее, поэтому там текст тёмный (7:1).
   В «Чатах» кнопки нет (hidden): display у .icon-btn перебивает атрибут, поэтому правило ниже. Движения нет, только цвет при наведении. */
.chats-hot[hidden] { display: none; }
.chats-hot .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px;
  background: var(--neg); color: #fff; box-shadow: 0 0 0 2px var(--surface-2); pointer-events: none; }
:root[data-theme="dark"] .chats-hot .badge { color: #1A0606; }
.chats-hot:hover .badge { box-shadow: 0 0 0 2px var(--surface-3); }
/* Ход выдачи через банкомат (js/atm-live.js, ДДС этап 4, волна 5c; слова владельца 20.10: «выданно», совместная выдача). Узкая строка под шапкой чата
   (.ch-atm) и такая же под подсказкой остатков в шаге маршрута карточки (.lg-atm). Цвета только из токенов, поэтому тёмная тема работает сама: готово (.done) зелёным,
   выдано больше цели (.over) жёлтым, значок и текст не меняют размер между состояниями, строка не прыгает при опросе раз в 5 секунд. Движения нет. */
.ch-atm, .lg-atm { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm); line-height: 1.35; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-atm[hidden], .lg-atm[hidden] { display: none; }
.ch-atm { padding: 7px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lg-atm { padding: 2px 0 0; }
.ch-atm .ic, .lg-atm .ic { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.atm-t { min-width: 0; overflow-wrap: anywhere; }
.atm-n { white-space: nowrap; }
.atm-t .atm-ok { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -3px; color: var(--pos); }
.ch-atm.done { background: var(--pos-soft); }
.ch-atm.over { background: var(--warn-soft); }
.ch-atm.done > .ic, .lg-atm.done > .ic { color: var(--pos); }
.ch-atm.over > .ic, .lg-atm.over > .ic { color: var(--warn); }
@media (max-width: 860px) { .ch-atm { padding: 6px 12px; } }
/* Стикеры в «Чатах» (владелец 08.10): кнопка у поля ответа, панель выбора над полем, стикер в очереди, стикеры в полосе ждущих,
   библиотека по людям. Логика: js/screens/stickers.js, stickers-2.js, stickers-4.js; полоса: chats-10.js. Только токены кита. */

/* ---------- кнопка у поля и в шапке ---------- */
.ch-compose .ch-stk { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; }
.ch-stk .ic { width: 22px; height: 22px; }
.ch-stk.warn { color: var(--warn); background: var(--warn-soft); }
.ch-stkset.off { color: var(--warn); }
@media (max-width: 720px) {
  .ch-hact [data-stk-set] { display: none !important; } /* на телефоне пункт «⋯» (chats-11.js) */
}

/* ---------- стикер в очереди и в диалоге ---------- */
.cd-thumb[alt="стикер"] { width: 150px; height: 150px; object-fit: contain; object-position: 50% 50%; background: transparent; } /* входящие и наши стикеры целиком, не обрезанные до 180x135 */
.ch-ob-stk { display: block; width: 112px; height: 112px; object-fit: contain; }
.ch-ob-stk.none { display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); }
.ch-ob-stk.none .ic { width: 40px; height: 40px; }

/* ---------- панель выбора ---------- */
.stk-win { flex: none; display: flex; flex-direction: column; gap: 8px; max-height: min(46%, 340px); padding: 10px 14px 4px; border-top: 1px solid var(--line); background: var(--surface); }
.stk-h { display: flex; align-items: center; gap: 8px; flex: none; }
.stk-b { min-height: 0; overflow-y: auto; padding-bottom: 8px; overscroll-behavior: contain; }
.stk-s { margin: 4px 0 6px; font-size: var(--t-xs); color: var(--ink-3); }
.stk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.stk-t { aspect-ratio: 1; display: grid; place-items: center; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); transition: background var(--dur-1); }
.stk-t:hover:not(:disabled) { background: var(--accent-soft); }
.stk-t:disabled { opacity: .5; cursor: default; }
.stk-t.hit { box-shadow: inset 0 0 0 2px var(--accent); }
.stk-t img { width: 100%; height: 100%; object-fit: contain; }
.stk-em { font-size: 34px; line-height: 1; }
.stk-w, .stk-n, .stk-a { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.35; }
.stk-w, .stk-a { background: var(--warn-soft); }
.stk-n { background: var(--info-soft); }
.stk-a { box-shadow: inset 0 0 0 1px var(--line-2); }
.stk-w span, .stk-n span, .stk-a span { flex: 1 1 160px; min-width: 0; }
.stk-w .ic, .stk-n .ic, .stk-a .ic { width: 16px; height: 16px; flex: none; }
.stk-w .ic, .stk-a .ic { color: var(--warn); }
.stk-n .ic { color: var(--info); }
.stk-e { display: grid; justify-items: center; gap: 8px; padding: 18px 10px 22px; text-align: center; color: var(--ink-2); }
.stk-e .ic { width: 28px; height: 28px; color: var(--ink-3); }
.stk-e p { margin: 0; }
.stk-sk { height: 120px; }
@media (max-width: 720px) { .stk-win { max-height: 52%; padding: 8px 10px 2px; } .stk-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- полоса ждущих чатов: стикеры в меню «⋯» позиции (strip-menu.js, владелец 09.10) ---------- */
.wb-q.wb-s { display: inline-grid; place-items: center; width: 34px; height: 30px; padding: 0; }
.wb-s img { width: 24px; height: 24px; object-fit: contain; }
.wb-s .stk-em { font-size: 18px; }
.wb-q.wb-s.armed { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; padding: 4px 10px 4px 6px; background: var(--accent); color: var(--accent-ink); }
.wb-s.armed img { width: 48px; height: 48px; }
.wb-q.wb-s.armed::after { content: "ещё раз: отправить"; font-size: var(--t-xs); opacity: .85; }

/* ---------- настройка клиента и библиотека ---------- */
.stk-set { display: flex; align-items: center; gap: 16px; }
.modal:has(.stk-lib) { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.stk-up { padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.stk-pick { cursor: pointer; }
.stk-em-in { flex: 1 1 180px; min-width: 0; height: 36px; }
.stk-fl { display: grid; gap: 4px; margin-top: 10px; }
.stk-f { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.stk-f .ellipsis { flex: 1; min-width: 0; }
.stk-f.err .stk-fs { color: var(--neg); }
.stk-f.ok .stk-fs { color: var(--pos); }
.stk-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stk-rl { display: grid; gap: 6px; }
.stk-r { border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.stk-r.off .stk-rh { opacity: .6; }
.stk-rh { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.stk-rt { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); }
.stk-rt img { width: 100%; height: 100%; object-fit: contain; }
.stk-rt b { font-size: 26px; font-weight: 400; }
.stk-rb { flex: 1; min-width: 0; display: grid; gap: 2px; }
.stk-re { display: grid; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.stk-re .stk-ml { margin-top: 8px; } /* «Способ выдачи» под рядом стадий: отступ, как у подписей выше */
.stk-none { padding: 14px 0; text-align: center; }

/* ---------- наборы по людям (stickers-4.js) ---------- */
.stk-gr { display: grid; gap: 6px; }
.stk-gr + .stk-gr { margin-top: 8px; }
.stk-gh { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border-radius: var(--r-md); text-align: left; transition: background var(--dur-1); }
.stk-gh:hover { background: var(--surface-2); }
.stk-gh .ic { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.stk-gh .t-xs { margin-left: auto; }
.stk-ow { display: grid; gap: 4px; margin-top: 10px; }
.stk-sel { height: 36px; max-width: 100%; }
/* Пульт 2.0, «Чаты»: напоминание клиенту «уточнить актуальность» (js/screens/chats-23.js, владелец 08.10). Только токены, обе темы.
   Чаты, где можно напомнить, стоят в той же строке, что ждущие (strip.css: карточки те же .wb-it, кнопки .wb-q из chats-6.css), подсказка с готовым
   текстом стоит над полем ответа и в чате, и в полосе движения нет. */
.wb-rm .wb-t { font-weight: 500; color: var(--ink-3); }
.ch-rmh { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--t-sm); color: var(--ink); }
.ch-rmh > .ic { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.rmh-b { flex: 1 1 auto; min-width: 0; }
.rmh-x { color: var(--ink-2); overflow-wrap: anywhere; }
.rmh-m { margin-top: 2px; }
.rmh-a { display: flex; flex: none; gap: 6px; }
@media (max-width: 720px) {
  .ch-rmh { flex-wrap: wrap; padding: 8px 10px; }
  .rmh-b { flex-basis: calc(100% - 28px); }
  .rmh-a { flex-basis: 100%; }
  .rmh-a .btn { flex: 1 1 0; justify-content: center; }
}
/* Памятка «Как работает» про напоминание клиенту (js/screens/chats-26.js, владелец 08.10). Только токены, обе темы.
   Кнопка «?» стоит в строке подсказки над полем ответа (.ch-rmh) и пунктом меню «⋯» у напоминания в полосе (strip-menu.js); окно: App.modal. */
.rm-help { flex: none; vertical-align: middle; color: var(--ink-3); }
.rm-help:hover { color: var(--ink); }
.ch-rmh .rm-help { margin: -3px 0 -3px 2px; }
.rmh-modal { max-width: 460px; }
.rmh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rmh-lead { margin: 8px 0 14px; color: var(--ink-2); }
.rmh-modal .t-label { margin: 14px 0 6px; }
.rmh-ul { margin: 0; padding: 0 0 0 18px; list-style: disc; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink); }
.rmh-ul li::marker { color: var(--ink-3); }
.rmh-modal p.t-sm { margin: 0; line-height: 1.45; }
/* Пульт 2.0, «Чаты»: все ждущие и напоминания в одной строке над диалогом (js/screens/strip-bar.js и strip-menu.js, владелец 09.10: «две строки занять
   сверху это просто борщ, а на телефоне так и подавно не надо»). Только токены, обе темы.
   1. Тон по аккаунту (на всех ширинах): карточка получает из AccBadge.tone() переменные --tn (r g b: полутон и рамка), --tn-b и --tn-i
      (кнопка и текст на ней, контраст не меньше 4,5:1), атрибут data-tn; рядом с именем логотип аккаунта. Просрочка красит только таймер (chats-6.css).
   2. Компьютер: .ch-strip > .ch-stl одна горизонтальная строка (ждущие, потом напоминания), высота не больше 52 px; позиция в одну линию:
      логотип, имя, таймер, главная кнопка и «⋯». Не влезает: прокрутка вбок, край затухает (data-sc: l, r, lr). Сводка .ch-stp скрыта.
   3. Телефон (до 720 px): строка свёрнута в сводку .ch-stp не выше 40 px вместе с линией снизу (39 + 1; при клавиатуре 31 + 1), список раскрывается поверх чата и сворачивается тем же
      нажатием (data-open). Шапки нет (скрипт не загрузился): полосы стоят друг под другом, ждущую под клавиатурой прячет kb.css. */
.ch-stp { display: none; }
.wb-open .acb { --s: 18px; }

/* ---------- строка ---------- */
.ch-strip { position: relative; flex: none; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ch-stl { display: flex; align-items: center; gap: 8px; padding: 6px 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ch-stl::-webkit-scrollbar { display: none; }
.ch-stl[data-sc="r"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.ch-stl[data-sc="l"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.ch-stl[data-sc="lr"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.ch-wbar, .ch-rbar { display: flex; flex: none; align-items: center; gap: 8px; }
.ch-wbar + .ch-rbar { padding-left: 8px; border-left: 1px solid var(--line); }

/* первое нажатие главной кнопки (4 с) показывает полный текст: в одну строку и той же высоты, иначе длинный текст из YAML (chats-tg.css: перенос, высота auto) растит строку
   выше 52 px; совсем длинный обрезается многоточием, полный текст в подсказке. strip-bar.js подводит кнопку в видимую часть строки. */
@media (min-width: 721px) { .ch-stl .wb-q.armed { height: 26px; padding: 0 10px; white-space: nowrap; max-width: min(560px, 70vw); overflow: hidden; text-overflow: ellipsis; } }

/* ---------- меню «⋯» (strip-menu.js) ---------- */
.sm-menu { min-width: 200px; max-width: min(320px, calc(100vw - 16px)); }
.sm-menu .menu-label { max-width: 280px; line-height: 1.3; }
.sm-stk { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 10px 8px; }

/* ---------- тон аккаунта ---------- */
.wb-it[data-tn] { background: linear-gradient(rgb(var(--tn) / .10), rgb(var(--tn) / .10)), var(--surface); box-shadow: inset 3px 0 0 rgb(var(--tn)), inset 0 0 0 1px rgb(var(--tn) / .30); }
:root[data-theme="dark"] .wb-it[data-tn] { background: linear-gradient(rgb(var(--tn) / .16), rgb(var(--tn) / .16)), var(--surface); }
.wb-it[data-tn] .wb-q { background: rgb(var(--tn) / .16); color: var(--ink); }
.wb-it[data-tn] .wb-q:hover:not(:disabled) { background: rgb(var(--tn) / .28); }
.wb-it[data-tn] .wb-q.wb-mo { background: transparent; color: var(--ink-2); }
.wb-it[data-tn] .wb-q.wb-mo:hover:not(:disabled) { background: rgb(var(--tn) / .16); color: var(--ink); }
.wb-it[data-tn] .wb-q.wb-m, .wb-it[data-tn] .wb-q.yes, .wb-it[data-tn] .wb-q.armed { background: var(--tn-b); color: var(--tn-i); box-shadow: none; }
.wb-it[data-tn] .wb-q.wb-m:hover:not(:disabled) { filter: brightness(1.08); }

/* ---------- телефон ---------- */
@media (max-width: 720px) {
  .ch-stp { --stp-h: 39px; display: flex; align-items: center; min-height: var(--stp-h); padding: 0 4px 0 12px; }
  :root[data-kb="1"] .ch-stp { --stp-h: 31px; }
  .stp-tog { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; height: var(--stp-h); padding: 0; text-align: left; color: var(--ink); }
  .stp-lg { --acs-ring: var(--surface-2); } /* логотипы аккаунтов внахлёст: AccBadge.stack, css/screens/acc-badge.css */
  .stp-n { flex: none; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
  .stp-r { font-weight: 500; color: var(--ink-3); }
  .ch-stp[data-u="over"] .stp-w { color: var(--neg); }
  .ch-stp[data-u="soon"] .stp-w { color: var(--warn); }
  .stp-u { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; font-size: var(--t-xs); color: var(--ink-2); }
  .stp-un { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stp-ut { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
  .stp-ut[data-u="over"] { color: var(--neg); }
  .stp-ut[data-u="soon"] { color: var(--warn); }
  .stp-ch { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-2); }
  .stp-tog:active .stp-ch { background: var(--accent-soft); }
  .stp-ch .ic { width: 16px; height: 16px; }
  /* список поверх чата, сводка остаётся на месте */
  .ch-stl { display: none; }
  .ch-strip[data-open="1"] .ch-stl { display: flex; flex-direction: column; align-items: stretch; gap: 6px; position: absolute; left: 0; right: 0; top: 100%; z-index: 12; max-height: min(60vh, 440px);
    overflow: hidden auto; overscroll-behavior: contain; padding: 6px 8px 8px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); -webkit-mask-image: none; mask-image: none; }
  :root[data-kb="1"] .ch-strip[data-open="1"] .ch-stl { max-height: 40vh; }
  .ch-wbar, .ch-rbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .ch-wbar + .ch-rbar { padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .wb-it { flex-wrap: wrap; min-height: 48px; padding: 4px 4px 4px 10px; row-gap: 4px; }
  .wb-open { flex: 1 1 110px; }
  .wb-open b { flex: 1 1 auto; max-width: none; }
  .wb-qs { margin-left: auto; }
  .wb-q.armed { max-width: 240px; }
}
@media (max-width: 400px) { .stp-r { display: none; } }
/* Поле ответа в «Чатах» как в Telegram (владелец 08.10, 18.10, 25.10; логика js/screens/chats-24.js, window.CF). Только токены, обе темы.
   Строка 42 px, круг 36 px, колонка слева 42 px (значки 40), стикер 32 px, текст 16 px на сенсорных (menu.css), 15 px на компьютере, рост поля до 160 px сразу (CH.grow), дальше прокрутка внутри.
   Слева .cx-side (язык, скрепка), справа .cx-pill: поле, стикер, микрофон, «Отправить». Микрофон, пока пусто, «Отправить», когда есть текст или вложение (cx-att). Рамки нет (владелец 19.10), прозрачная 1 px держит размеры.
   «Отправить» не лежит в одной ячейке с полем без z-index (s2-52: в WebKit поле рисовалось поверх). Разворот (.cx-full): форма поверх диалога, шапка (крестик, имя, перевод, микрофон, отправка), колонка и пилюля растворяются (display: contents). */
:root { --safe-b: env(safe-area-inset-bottom, 0px); }

/* ---------- колонка слева: язык и скрепка ---------- */
/* Два вида (25.10, владелец: «скачок из-за того, что перевод уходит наверх ... в строчку отжирает место»). Обычный: язык слева от скрепки, стикер и «Отправить» в строке справа.
   Высокий (cx-multi, js tall()): заходит на трёх строках, выходит только при пустом поле; язык над скрепкой, стикер над «Отправить», поле шире. Колонки зависят от вида, а не от числа строк:
   ширина поля не дёргается. Без анимации размера (текст перестраивался бы на каждом кадре). */
.cx-side { position: relative; flex: none; align-self: flex-end; width: 42px; height: 42px; border: 1px solid transparent; border-radius: 21px; background: var(--surface-2); }
.cx-side:has(> .ct-lang:not([hidden])) { width: 82px; }
.cx-side > :is(.ch-attach, .ct-lang) { position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); box-shadow: none; transition: background var(--dur-1); }
.cx-side > :is(.ch-attach, .ct-lang):hover { background: var(--surface-3); color: var(--ink); }
.cx-side > .ct-lang.cx-on { color: var(--info); background: var(--info-soft); }
.cx-side:has(> .ct-lang:not([hidden])) > .ch-attach { transform: translateX(40px); }
.cx-side .ic { width: 24px; height: 24px; }

/* ---------- поле-пилюля: поле, стикер, микрофон, отправка ---------- */
.cx-pill { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; min-height: 42px; border: 1px solid transparent; border-radius: 21px; background: var(--surface-2); } /* при фокусе рамка и фон не меняются (владелец 18.10) */
.cx-pill > .ch-ta { scrollbar-width: thin; } /* рост высоты без анимации (24.10): пока поле росло 100 мс, текст в нём дёргался на строку вверх и обратно */
.cx-pill > .ch-stk { flex: none; width: 32px; height: 32px; margin: 0 0 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); box-shadow: none; }
.cx-pill > .ch-stk:hover { background: var(--surface-3); color: var(--ink); }
.cx-pill > .ch-stk.warn { color: var(--warn); background: var(--warn-soft); }
.cx-pill > :is(.ch-send, .vc-btn) { flex: none; width: 36px; height: 36px; margin: 0 2px 2px 4px; padding: 0; border-radius: 50%; }
.cx-pill > .ch-send .ic { width: 20px; height: 20px; }
.cx-pill > .vc-btn.rec { position: relative; z-index: 1; width: 36px; padding: 0; border-radius: 50%; animation-name: vc-ring; } /* запись (M-20): тот же круг на том же месте, таймер слева в поле, кольцо внутри круга (наружное вылезало за поле) */
.cx-pill > .vc-btn.rec .vc-t { position: absolute; top: 50%; right: calc(100% + 8px); transform: translateY(-50%); color: var(--neg); font-size: var(--t-sm); line-height: 1; white-space: nowrap; pointer-events: none; z-index: 1; }
.cx-pill > .vc-btn.rec .vc-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.ch-compose:has(.vc-btn.rec) .ch-ta::placeholder { opacity: 0; }
.ch-compose:not(.cx-full):has(.vc-btn.rec) .cx-pill > .ch-stk { visibility: hidden; } /* на его месте таймер, место не меняется */
@keyframes vc-ring { 50% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--neg), var(--surface) 45%); } }
.cx-pill > :is(.ch-send.ct-go, .ch-send[data-ed="1"]) { width: auto; min-width: 36px; padding: 0 12px; border-radius: var(--r-pill); } /* перевод («EN») и «Сохранить» с подписью */

/* значок «развернуть» с трёх строк в правом верхнем углу поля; вне своих состояний, шапки и крестика разворота нет */
.ch-compose .cx-open, .ch-compose .cx-close, .ch-compose .cx-title { display: none; }
.icon-btn.cx-open, .icon-btn.cx-close { background: transparent; color: var(--ink-3); }
.icon-btn.cx-open:hover, .icon-btn.cx-close:hover { background: var(--surface-3); color: var(--ink); }
.cx-open .ic { width: 16px; height: 16px; }
.cx-close .ic { width: 20px; height: 20px; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-pill > .cx-open { display: inline-grid; position: absolute; top: 4px; right: 9px; z-index: 1; width: 24px; height: 24px; border-radius: 8px; }

/* высокий вид: слева значки друг над другом, справа стикер над «Отправить» (под «развернуть»); поле не ниже правой колонки (28 + 36 + 38 px) */
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-side:has(> .ct-lang:not([hidden])) { width: 42px; height: 82px; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-side > .ct-lang { transform: translateY(-40px); }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-side > .ch-attach { transform: none; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-pill { display: grid; grid-template: 1fr auto auto / minmax(0, 1fr) auto; justify-items: center; align-items: end; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-pill > .ch-ta { grid-area: 1 / 1 / 4 / 2; justify-self: stretch; min-height: 102px; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-pill > .ch-stk { grid-area: 2 / 2; margin: 0 0 4px; }
.ch-compose.cx-multi:not(.cx-off, .cx-full) .cx-pill > :is(.ch-send, .vc-btn) { grid-area: 3 / 2; margin: 0 3px 2px; }

/* микрофон, пока пусто, отправка, когда есть текст или вложение; микрофона нет (браузер не умеет) или поле выключено: отправка остаётся */
:root .ch-compose:not(.cx-full, .cx-att):has(.cx-pill > .vc-btn):has(.ch-ta:placeholder-shown) .cx-pill > .ch-send { display: none; }
:root .ch-compose:not(.cx-full):is(.cx-att, :has(.ch-ta:not(:placeholder-shown))) .cx-pill > .vc-btn { display: none; }
:root .ch-compose:not(.cx-full) .cx-pill > .vc-btn:not(.rec) { background: var(--accent); color: var(--accent-ink); }
:root .ch-compose:not(.cx-full) .cx-pill > .vc-btn:not(.rec):hover { background: var(--accent-2); }

@media (max-width: 720px) {
  /* пустое поле: перевод только когда пошёл текст (при включенном переводе язык выбирается в полосе над полем) */
  .ch-compose:not(.cx-full):has(.ch-ta:placeholder-shown) .ct-lang { display: none; }
  .ch-compose:not(.cx-full):has(.ch-ta:placeholder-shown) .cx-side { width: 42px; height: 42px; }
  .ch-compose:not(.cx-full):has(.ch-ta:placeholder-shown) .cx-side > .ch-attach { transform: none; }

  /* открытый диалог до самого низа экрана: карточка стоит на нижней кромке с прямыми углами, под полем только safe-area для полосы «Домой» */
  .ch[data-pane="chat"] .ch-box { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; }
  .ch[data-pane="chat"] .ch-foot { padding-bottom: max(8px, var(--safe-b)); }
}

@media (prefers-reduced-motion: reduce) { .cx-side, .cx-side > :is(.ch-attach, .ct-lang), .cx-pill > .ch-ta { transition: none; } .cx-pill > .vc-btn.rec { animation: none; } }

/* разворот: форма поверх всей видимой части диалога (.ch-main), шапка сверху, поле на всю остальную высоту; колонка и пилюля растворяются, их дети встают в сетку формы */
:root .ch-foot .ch-compose.cx-full { position: absolute; inset: 0; z-index: 25; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 8px 10px max(10px, var(--safe-b)); background: var(--surface); }
:root[data-kb="1"] .ch-foot .ch-compose.cx-full { padding-bottom: 8px; }
:root .ch-foot .ch-compose.cx-full > :is(.cx-side, .cx-pill) { display: contents; }
:root .ch-foot .ch-compose.cx-full > .cx-close { display: inline-grid; grid-area: 1 / 1; width: 40px; height: 40px; }
:root .ch-foot .ch-compose.cx-full > .cx-title { display: block; grid-area: 1 / 2; font-weight: 600; }
:root .ch-foot .ch-compose.cx-full .ct-lang { position: static; transform: none; grid-area: 1 / 3; align-self: center; width: 40px; height: 40px; margin: 0; background: var(--surface-2); color: var(--ink-2); }
:root .ch-foot .ch-compose.cx-full .ct-lang.cx-on { color: var(--info); background: var(--info-soft); }
:root .ch-foot .ch-compose.cx-full .vc-btn { display: inline-grid; grid-area: 1 / 4; width: 40px; height: 40px; margin: 0; }
:root .ch-foot .ch-compose.cx-full .vc-btn.rec { width: auto; display: inline-flex; align-items: center; padding: 0 12px; animation-name: vc-pulse; }
:root .ch-foot .ch-compose.cx-full .vc-btn.rec .vc-t { position: static; transform: none; color: inherit; }
:root .ch-foot .ch-compose.cx-full .ch-send { grid-area: 1 / 5; align-self: center; justify-self: end; margin: 0; width: auto; height: 40px; padding: 0 16px; border-radius: var(--r-pill); }
@media (min-width: 721px) { :root .ch-foot .ch-compose.cx-full .ch-send:not(.ct-go, [data-ed="1"])::after { content: "Отправить"; } }
:root .ch-foot .ch-compose.cx-full :is(.ch-attach, .ch-stk, .cx-open) { display: none !important; }
:root .ch-foot .ch-compose.cx-full .ch-ta,
:root .ch-foot .ch-compose.cx-full .ch-ta:focus { grid-area: 2 / 1 / 3 / 6; align-self: stretch; height: auto !important; max-height: none !important; min-height: 0 !important; padding: 14px 4px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; outline: none; box-shadow: none; }
body:has(.ch-compose.cx-full) .lg-dot { display: none !important; } /* кружок сделок не лежит поверх разворота */
/* Шаблоны ответов (владелец 25.10; js/tpl-menu.js, tpl-edit.js, tpl-trig.js, tpl-edit-2.js). Только токены кита, обе темы.
   Меню в поле ответа: окно .tpl-win встаёт над подвалом, как панель стикеров (в потоке столбца .ch-main), поэтому поле ответа не двигается, а переписка сжимается;
   на телефоне окно не выше 44% диалога и 232 px, строка не ниже 46 px (нажатие пальцем). В развёрнутом поле (.cx-full) окно внутри формы, внизу (js даёт полю отступ снизу на высоту окна). */
.tpl-win { flex: none; display: flex; flex-direction: column; max-height: min(46%, 300px); border-top: 1px solid var(--line); background: var(--surface); }
.tpl-l { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 2px; }
.tpl-it { display: grid; gap: 1px; width: 100%; min-height: 46px; padding: 6px 12px; border-radius: var(--r-sm); text-align: left; color: var(--ink-2); transition: background var(--dur-1); }
.tpl-it.on { background: var(--accent-soft); color: var(--ink); }
.tpl-n { color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.tpl-t { color: var(--ink-3); font-size: var(--t-sm); }
.tpl-it.on .tpl-t { color: var(--ink-2); }
.tpl-win mark { padding: 0 1px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); }
.tpl-e { padding: 14px 12px; color: var(--ink-2); font-size: var(--t-sm); }
.tpl-f { flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 6px 2px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-xs); }
.tpl-k { margin-right: auto; }
.tpl-f .btn { height: 30px; padding: 0 10px; }
@media (max-width: 720px), (pointer: coarse) {
  .tpl-win { max-height: min(44%, 232px); }
  .tpl-k { display: none; }
  .tpl-c { margin-right: auto; }
}
:root .ch-foot .ch-compose.cx-full > .tpl-win { position: absolute; z-index: 30; left: 8px; right: 8px; bottom: 8px; max-height: 46%; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-pop); }

/* ---------- окно «Мои шаблоны» ---------- */
.modal:has(.tpl-ed, .tpl-form) { width: min(640px, calc(100vw - 24px)); }
.tpl-ed, .tpl-form { display: grid; gap: 12px; min-width: 0; }
.tpl-lead { margin: 0; line-height: 1.45; }
.tpl-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); }
.tpl-note .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.tpl-tr { gap: 8px; }
.tpl-trl { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
.tpl-trg { display: grid; gap: 6px; }
.tpl-trs { display: flex; flex-wrap: wrap; gap: 5px; }
.tpl-tr2 { align-items: center; justify-content: space-between; gap: 8px 14px; }
.tpl-tc { min-width: 34px; height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 600 var(--t-body) var(--f-mono, monospace); cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
.tpl-tc:hover { background: var(--surface-2); }
.tpl-tc.off { padding: 0 14px; font: 500 var(--t-sm) var(--f-ui); }
.tpl-tc.on { border-color: var(--accent-text); background: var(--accent-soft); }
.tpl-tc:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tpl-tc[disabled] { opacity: .5; pointer-events: none; }
.tpl-cs { display: flex; align-items: center; gap: 8px; }
.tpl-cs label { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
.tpl-cs .input { width: 64px; height: 40px; padding: 0 8px; text-align: center; font-family: var(--f-mono, monospace); font-size: var(--t-body); }
.tpl-tr > p { margin: 0; line-height: 1.4; }
.tpl-bar { align-items: stretch; }
.tpl-bar .input { height: 42px; }
.tpl-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); }
.tpl-undo:empty { display: none; }
.tpl-rows { margin: 0; padding: 0; list-style: none; max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.tpl-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); transition: background var(--dur-3); }
.tpl-r.flat { grid-template-columns: minmax(0, 1fr) auto; }
.tpl-g { display: inline-grid; color: var(--ink-4); cursor: grab; }
.tpl-g .ic { width: 16px; height: 16px; }
.tpl-rb { display: grid; gap: 2px; min-width: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
div.tpl-rb { cursor: default; }
.tpl-rb:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.tpl-rb > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.35; }
.tpl-ra { display: flex; gap: 2px; }
.tpl-ra .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.tpl-em { padding: 22px 8px; color: var(--ink-2); font-size: var(--t-sm); text-align: center; }
.tpl-r.fresh { background: var(--accent-soft); }
.tpl-r.drag { opacity: .45; }
.tpl-r.drop-before { box-shadow: 0 -2px 0 0 var(--accent-text); }
.tpl-r.drop-after { box-shadow: 0 2px 0 0 var(--accent-text); }
.tpl-foot { flex-wrap: wrap; gap: 8px; }
.tpl-foot [data-tpl-resetbox] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tpl-ask { flex: 1 1 100%; text-align: right; color: var(--ink-2); font-size: var(--t-sm); }
.tpl-ta { min-height: 180px; font: inherit; line-height: 1.5; }
.tpl-err { padding: 8px 12px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--neg); font-size: var(--t-sm); }
.tpl-fa .icon-btn { flex: none; width: 42px; height: 42px; color: var(--neg); }
@media (pointer: coarse), (max-width: 720px) {
  .tpl-g, .tpl-ie { display: none; } /* телефон: правка нажатием на строку, удаление в форме (там «Вернуть» после удаления), в строке только «выше» и «ниже» */
  .tpl-r { grid-template-columns: minmax(0, 1fr) auto; }
  .tpl-ra .icon-btn { width: 40px; height: 40px; }
  .tpl-rb b.ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: var(--t-body); }
}
@media (max-width: 720px) {
  .modal:has(.tpl-ed, .tpl-form) { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 16px; }
  .tpl-tc { min-width: 42px; height: 44px; }
  .tpl-cs .input { height: 44px; }
  .tpl-tr2 { justify-content: flex-start; }
  .tpl-rows { max-height: calc(100dvh - 470px); min-height: 140px; }
  .tpl-foot [data-tpl-resetbox] { flex: 1 1 100%; justify-content: stretch; }
  .tpl-ask { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .tpl-it, .tpl-r, .tpl-tc { transition: none; } }
/* «Чаты»: переключатель аккаунтов клиента (волна 32, js/screens/chats-accsw.js). Чипы .chip.sm.btnish из общих компонентов: логотип аккаунта (js/acc-badge.js)
   и подпись; открытый аккаунт залит тоном логотипа (--tn-b и --tn-i из AccBadge.tone, контраст не меньше 4,5:1), у аккаунта без логотипа чернилами.
   Стоят первыми в строке под именем в шапке диалога (дальше ник и менеджер) и третьим рядом строки клиента в поиске. Только токены, обе темы.
   Строка шапки .ch-hs обрезает лишнее (overflow: hidden, text-overflow: ellipsis), а Chrome прячет под многоточием целиком и чип, не влезший до конца
   строки: поэтому у строки с чипами многоточие выключено (обрезка по краю), на компьютере она переносится, на телефоне остаётся одной строкой. */
.cas { flex: none; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.ch-hs > .cas { margin-right: 8px; }
.ch-hs:has(> .cas) { text-overflow: clip; }
@media (min-width: 721px) { .ch-hs:has(> .cas) { white-space: normal; } }
.chip.cas-b { height: 20px; padding: 0 8px; gap: 5px; line-height: 1; cursor: pointer; }
.chip.cas-b:has(.acb) { padding-left: 3px; }
.cas-b .acb { --s: 14px; margin: 0; }
.chip.cas-b[data-tn] { border-color: rgb(var(--tn) / .55); background: rgb(var(--tn) / .10); color: var(--ink); }
.chip.cas-b[data-tn]:hover { border-color: rgb(var(--tn)); }
.chip.cas-b[aria-pressed="true"] { cursor: default; }
.chip.cas-b[data-tn][aria-pressed="true"] { background: var(--tn-b); color: var(--tn-i); border-color: transparent; }
:root[data-theme="dark"] .chip.cas-b[data-tn] { background: rgb(var(--tn) / .16); }
:root[data-theme="dark"] .chip.cas-b[data-tn][aria-pressed="true"] { background: var(--tn-b); }
/* строка поиска: третий ряд под строкой совпадения; строка выделена чернилами (.ch-it.on): чипы остаются светлыми, читаются в обеих темах */
.cas-row { flex-wrap: wrap; margin-top: 1px; }
.cas-row .chip.cas-b { height: 18px; padding-right: 7px; }
.ch-it.on .chip.cas-b:not([data-tn]) { background: var(--surface-3); color: var(--ink); }
.ch-it.on .chip.cas-b[data-tn]:not([aria-pressed="true"]) { background: var(--surface); }
/* телефон (шапка диалога в одну строку не выше 56 px, css/screens/dense.css): открытый аккаунт с подписью, остальные только логотипом (название в подсказке и aria-label) */
@media (max-width: 720px) {
  .ch-hmain > .ch-hs:has(> .cas) { text-overflow: clip; } /* dense.css ставит многоточие: ник, не влезший целиком, остаётся виден до края */
  .ch-hs:has(> .cas) .ch-nickw .copy { display: none; } /* ник без кнопки «скопировать»: ей нет места рядом с чипами */
  .ch-hs .chip.cas-b { height: 18px; padding-right: 7px; }
  .ch-hs .chip.cas-b .acb { --s: 12px; }
  .ch-hs .chip.cas-b[aria-pressed="false"] { padding: 0 2px 0 2px; }
  .ch-hs .chip.cas-b[aria-pressed="false"] .cas-t { display: none; }
  .ch-hs .chip.cas-b[aria-pressed="false"]:not(:has(.acb)) .cas-t { display: inline; padding: 0 5px; }
}
/* «Чаты»: рабочие папки Telegram вкладками (волна 33а, владелец 19.10; js/screens/chats-folders.js). Ряд вкладок стоит над списком в .ch-side, под ним вместо
   списка .cfd-list (его чаты). Вкладки те же .tabs, что у аккаунтов (высота 36 px, один ряд, на телефоне прокручивается вбок без переноса). Строки как в списке «Чатов»
   (chats-tg.css, chats-pv.css): тут свои правила под .cfd-list, потому что те работают только под .ch-list. Поиск (data-find) перекрывает папку и приглушает ряд.
   Только токены, обе темы. */
.cfd-bar { flex: none; padding: 8px 8px 2px; min-width: 0; }
.cfd-tabs { padding: 2px; }
.cfd-tabs button { height: 36px; padding: 0 14px; font-size: var(--t-sm); }
.cfd-tabs button .acb { --s: 18px; }
.cfd-list { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.cfd-list .empty { padding: 40px 12px; }
.ch[data-folder] .ch-list { display: none; }
.ch[data-folder]:not([data-find]) .cfd-list { display: block; }
.ch[data-find] .cfd-bar { opacity: .4; pointer-events: none; }
.cfd-list .ch-it { padding: 8px 10px; gap: 12px; align-items: center; -webkit-touch-callout: none; }
.cfd-list .ch-it-main { gap: 2px; padding-top: 0; }
.cfd-list .ch-nm { display: flex; align-items: center; gap: 6px; font-weight: 500; } /* название в своём .ellipsis: многоточие у flex-контейнера не работает */
.cfd-list .ch-ava .ava { width: 48px; height: 48px; }
.cfd-list .ch-it-main > .ch-row + .ch-row { position: relative; display: block; min-width: 0; }
.cfd-list .ch-pv { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: var(--t-sm); } /* .ch-pv в chats-2.css это ещё и полоса ответа: подложку и рамку убираем */
.cfd-list .ch-you { color: var(--ink-2); }
/* тема форума перед автором: в строке группы папки и в совпадении поиска (L-52) */
.ch-tp { color: var(--ink-2); font-weight: 500; }
.ch-it.on .ch-tp { color: var(--inverse-ink-2); }
.cfd-list .ch-it.on .ch-pv, .cfd-list .ch-it.on .ch-you { color: var(--inverse-ink-2); }
.cfd-list .ch-it + .ch-it { position: relative; }
.cfd-list .ch-it + .ch-it::before { content: ""; position: absolute; left: 70px; right: 10px; top: 0; border-top: 1px solid var(--line); opacity: .6; }
.cfd-list .ch-it.on::before, .cfd-list .ch-it.on + .ch-it::before { display: none; }
.cfd-ic { flex: none; display: inline-grid; place-items: center; color: var(--ink-3); }
.cfd-ic .ic { width: 14px; height: 14px; }
.cfd-list .ch-it.on .cfd-ic { color: var(--inverse-ink-2); }
.cfd-list .cfd-pin { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.cfd-list .ch-it-main > .ch-row + .ch-row:has(.cfd-pin) .ch-pv { padding-right: 22px; }
.cfd-list .ch-it.on .ch-pv { background: none; }
/* большая группа без архива: строка не нажимается, пояснение переносится, под ним кнопка в Telegram */
.cfd-list .cfd-big { align-items: flex-start; cursor: default; }
.cfd-list .cfd-big:hover { background: transparent; }
.cfd-list .cfd-big .ch-pv { white-space: normal; }
.cfd-bigact { margin-top: 6px; }
.cfd-list .ch-end { padding: 10px 12px 14px; text-align: center; }
@media (max-width: 720px) {
  .cfd-bar { padding: 4px 4px 0; }
  .cfd-list .ch-it { padding: 7px 4px; gap: 10px; }
  .cfd-list .ch-ava .ava { width: 46px; height: 46px; }
  .cfd-list .ch-it + .ch-it::before { left: 60px; right: 4px; }
  :root[data-dock="off"] .ch[data-pane="list"] .cfd-list { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* «Чаты»: окно группы с темами форума, поле ответа и раздел «Группы в панели» (L-28, 26.10; js/screens/chats-groups*.js). Пузыри те же, что у диалога (dialog.css), здесь только то,
   что у группы своё: ряд вкладок тем, значок темы и подпись автора над текстом, подсветка сообщений «нам», кнопка «Ответить», поле с рамкой другого цвета, меню автора и «@N» в строке
   списка. Только токены, обе темы, ряд вкладок прокручивается вбок на телефоне. */
.cgr-hs { display: flex; align-items: center; gap: 0; }
.cgr-hs .acb { --s: 14px; margin-right: 6px; }
.cgr-tabbox { flex: none; padding: 8px 12px 2px; min-width: 0; border-bottom: 1px solid var(--line); }
.cgr-tabbox:empty { display: none; }
.cgr-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 2px; scrollbar-width: none; max-width: 100%; }
.cgr-tabs::-webkit-scrollbar { display: none; }
.cgr-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; max-width: 220px; font-size: var(--t-sm); }
.cgr-tabs button .ic { width: 13px; height: 13px; flex: none; }
.cgr-tabs button .ellipsis { min-width: 0; }
.cgr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.cgr-n, .cfd-at { flex: none; min-width: 18px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-style: normal; }
.cfd-list .cfd-pin.cfd-at { right: 0; width: auto; height: 18px; display: inline-block; }
.cfd-list .ch-it.on .cfd-at { background: var(--inverse-ink); color: var(--inverse); }
.cgr-tabs button[aria-pressed="true"] .cgr-n { background: var(--ink); color: var(--surface); }
/* плашка про сообщения без известной темы (L-52): под рядом вкладок, кнопка «Показать» открывает вкладку «Без темы» */
.cgr-nt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 8px; padding: 4px 6px 4px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); line-height: 1.35; }
.cgr-nt .ic { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.cgr-nt > span { flex: 1 1 200px; min-width: 0; }
.cgr-nt .btn { flex: none; }
/* сообщения: рядом с пузырём кнопка «Ответить» (на компьютере по наведению, на телефоне всегда бледная), над текстом автор и тема */
.cgr-msgs .cd-msg { position: relative; }
.cgr-us .cd-bub { box-shadow: inset 3px 0 0 var(--accent); }
.cgr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cgr-top .ch-from { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink-2); }
.cgr-top button.ch-from { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cgr-top button.ch-from:hover { color: var(--ink); }
.cgr-tp { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; height: 18px; padding: 0 7px 0 5px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.cgr-tp .ic { width: 11px; height: 11px; flex: none; }
.cgr-tp:hover { background: var(--line-2); }
.cgr-q { cursor: pointer; }
.cgr-q:hover { background: var(--surface-3); }
.cgr-rp { flex: none; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); opacity: 0; cursor: pointer; transition: opacity var(--dur-1), background var(--dur-1); }
.cgr-rp .ic { width: 16px; height: 16px; }
.cgr-rp:hover, .cgr-rp:focus-visible { background: var(--surface-3); color: var(--ink); opacity: 1; }
.cd-msg:hover .cgr-rp { opacity: 1; }
@media (hover: none) { .cgr-rp { opacity: .55; } }
.cgr-pend .cd-bub { opacity: .8; border-style: dashed; }
.cgr-pend.bad .cd-bub { border-color: var(--neg); }
.cgr-pend.bad .cd-bm { color: var(--neg); }
.cgr-redo { align-self: center; display: flex; flex-direction: column; gap: 4px; }
/* поле ответа: рамка и строка над ним другого цвета, чтобы не спутать с личным чатом клиента */
.cgr-foot { border-top: 2px solid var(--info); }
.cgr-comp { display: flex; flex-direction: column; gap: 6px; }
.cgr-hint { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 4px; font-size: var(--t-xs); font-weight: 500; color: var(--info); }
.cgr-hint .ic { width: 14px; height: 14px; flex: none; }
.cgr-hint-end { flex: none; white-space: nowrap; } /* кто увидит сообщение, не обрезается длинным названием группы (390 px) */
.cgr-reply { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 4px 4px 10px; border-left: 3px solid var(--info); border-radius: 6px; background: var(--info-soft); font-size: var(--t-sm); color: var(--ink-2); }
.cgr-reply .ellipsis { flex: 1; min-width: 0; }
.cgr-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); }
.cgr-shut { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); }
.cgr-shut .ic { width: 16px; height: 16px; flex: none; }
.cgr-form .cx-pill { border-color: var(--info); }
.cgr-form .cx-pill > .ch-send { background: var(--info); color: var(--surface); }
/* меню автора */
.cgr-menu { position: fixed; z-index: 80; min-width: 190px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-pop); display: flex; flex-direction: column; }
.cgr-menu .menu-item { text-align: left; }
/* настройка «Группы в панели» в окне «Папки» */
.cgs { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.cgs .input { width: 100%; }
.cgs-row .li-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cgs-cs { display: grid; gap: 8px; margin-top: 10px; }
.cgs-row .li-side { align-self: flex-start; } /* ползунок «В панели» у названия группы, а не посередине карточки напротив «Кому видна» */
.cgs-sw { display: grid; justify-items: center; gap: 4px; padding-top: 2px; }
.cgs-sw .t-xs { white-space: nowrap; }
.cgs-c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cgs-c > .t-xs { flex: none; min-width: 92px; }
.cgs-c .seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* ползунок «Отправка в группы из панели» (L-51, js/screens/chats-groups-send.js): подпись переносится, причина под ней, серый ползунок не нажимается */
.cgs-send .li-sub { white-space: normal; overflow: visible; }
.cgs-send-note { margin-top: 6px; }
.cgs-send .switch { cursor: pointer; }
.cgs-send .switch::before { content: ""; position: absolute; inset: -10px -6px; } /* зона нажатия больше самого ползунка (на телефоне рядом нет зазора) */
.cgs-send .switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cgs-send .switch[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
  .cgr-tabbox { padding: 6px 4px 0; }
  .cgr-hs { overflow: hidden; }
  .cgs-c > .t-xs { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cgr-rp { transition: none; } }
/* «Чаты»: «Заготовки» в поле ответа окна группы (L-32, 26.10; js/screens/chats-groups-presets.js). Кнопка над формой и список под ней, выше поля: названия и тексты заготовок с переносами строк
   как уйдут в группу. На широком окне плитки в несколько колонок (список низкий, переписка остаётся видна), на телефоне одна колонка с прокруткой внутри списка. Только токены, обе темы. */
.cgr-pre { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; }
.cgr-pre .btn { flex: none; }
.cgr-pre-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-content: start; gap: 6px; max-height: min(40vh, 320px); overflow-y: auto; padding: 0 4px; }
.cgr-pre-note { grid-column: 1 / -1; padding: 0 2px; }
.cgr-pre-it { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--surface-2); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.cgr-pre-it:hover, .cgr-pre-it:focus-visible { background: var(--surface-3); }
.cgr-pre-it b { max-width: 100%; font-size: var(--t-sm); font-weight: 600; }
.cgr-pre-it span { max-width: 100%; font-size: var(--t-xs); color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
/* «Чаты»: заявка Балифорума в окне группы (L-33, 26.10, тень автоответов; js/screens/chats-groups-shadow.js). Карточка над полем ответа: заголовок с типом заявки, что написал клиент, поле имени,
   два черновика с кнопками «Отправить от ...» и «Не отвечать». Серые кнопки (отправка выключена) подписаны причиной. Невысокая: внутри прокручивается, чтобы переписка над ней оставалась видна.
   L-34 (27.10, chats-groups-shadow-2.js, chats-groups-pace.js): черновик в поле, которое можно править (.bfs-ta), подсказки по правилам под ним (.bfs-wn), строка темпа у названия аккаунта (.bfs-pc:
   пауза и окно баллов), кнопка «Разрешить ответы от ...» (.bfs-al) и строка темпа над полем ответа окна группы (.cgr-pace).
   Только токены, обе темы; на телефоне кнопки на всю ширину. */
.bfs { display: flex; flex-direction: column; gap: 8px; max-height: min(46vh, 420px); overflow-y: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.bfs > * { flex: none; }  /* внутри прокручивается весь блок, части не сжимаются */
.bfs-fold { max-height: none; padding-block: 6px; }
.bfs-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bfs-h .grow { min-width: 0; }
.bfs-t { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.bfs-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
.bfs-ic .ic { width: 16px; height: 16px; }
.bfs-q { padding: 6px 10px; border-left: 3px solid var(--info); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: var(--t-sm); white-space: pre-line; overflow-wrap: anywhere; max-height: 4.8em; overflow-y: auto; }
.bfs-in { height: 36px; max-width: 360px; background: var(--surface); border-color: var(--line); font-size: var(--t-sm); }
.bfs-nt:empty { display: none; }
.bfs-dr { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; align-items: start; }
.bfs-dr > .bfs-st { grid-column: 1 / -1; }
.bfs-d { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); }
.bfs-dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.bfs-pc { font-weight: 400; overflow-wrap: anywhere; }
.bfs-ta { min-height: 76px; max-height: 220px; resize: vertical; padding: 8px 10px; background: var(--surface); border-color: var(--line); font-size: var(--t-sm); line-height: 1.4; }
.bfs-wn { color: var(--warn); }
.bfs-wn:empty { display: none; }
.bfs-al .ic { width: 14px; height: 14px; }
.cgr-pace { padding: 4px 12px; color: var(--ink-2); border-top: 1px solid var(--line); background: var(--surface-2); overflow-wrap: anywhere; }
.bfs-tx { font-size: var(--t-sm); color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.bfs-do { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bfs-b { max-width: 100%; }
.bfs-b .ic { width: 14px; height: 14px; }
.bfs-b[disabled] { background: var(--surface-3); color: var(--ink-3); opacity: 1; cursor: not-allowed; }  /* серая кнопка: отправка выключена или аккаунту нельзя */
.bfs-why { flex: 1 1 100%; }
.bfs-st { font-size: var(--t-sm); color: var(--ink-2); }
.bfs-st.bad { color: var(--neg); }
.bfs-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* окно компьютера (1440x900: окно группы около 680 px): карточка с лентой, полем ответа и «Заготовками» делит это место, поэтому выше трети высоты экрана она не растёт, остальное прокручивается внутри;
   цитата клиента и поле имени стоят в одну строку (минус ~50 px высоты). Телефон и свёрнутая карточка (.bfs-fold) как были */
@media (min-width: 901px) {
  .bfs { max-height: min(34vh, 320px); }
  .bfs.bfs-fold { max-height: none; }
}
@media (min-width: 1201px) {  /* 901-1200 px: окно группы узкое, цитата в одну строку с полем имени сжималась до 75-175 px (ревью пачки 27.10) */
  .bfs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); align-content: start; gap: 8px 12px; }
  .bfs > * { grid-column: 1 / -1; }
  .bfs > .bfs-q { grid-column: 1; }
  .bfs > .bfs-in { grid-column: 2; max-width: none; }
}
@media (max-width: 720px) {
  .bfs { padding: 8px; max-height: 50vh; }
  .bfs-dr { grid-template-columns: 1fr; }
  .bfs-b, .bfs-al { width: 100%; justify-content: center; }
  .bfs-in { max-width: none; }
}
/* «Чаты» на телефоне плотнее, как в Telegram (владелец 18.10, s2-58: «очень много неэффективного жрётся, особенно в мобильной версии, сравни с телегой: отступы снизу,
   между сообщениями, по ширине»; снимок Telegram того же диалога). Только телефон (до 720 px), компьютер не меняется. Только токены, обе темы. Планка (замеры на 430 и 390 px,
   tests/test_dense_layout.py): открытый диалог до краёв экрана; шапка диалога одной строкой не выше 56 px, полоса «Ждут ответа» свёрнута до 26 px; строка архива не выше 28 px и скрыта, пока всё выгружено; поля ленты 6 px (было 10 и 26);
   зазор между сообщениями одной стороны 3 px, разных 7 px (было 10-14); поля пузыря 6x10 px (было 10x13), время и подпись в одной строке с текстом, если помещаются (однострочное
   сообщение 33 px вместо 60); в списке один ряд управления на любую роль (кнопка «Папки» ушла в шестерёнку), без пустой полосы внизу, когда нижней панели нет. */
.ch-setp [data-tg-folders] { display: none; } /* пункт «Папки» шестерёнки нужен только на телефоне */
@media (max-width: 720px) {
  /* ---------- открытый диалог до краёв экрана: ни рамки, ни скруглений, ни полей ---------- */
  .ch[data-pane="chat"], :root[data-kb="1"] .ch[data-pane="chat"] { left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); gap: 0; }
  .ch[data-pane="chat"] .ch-box { border-radius: 0; border-width: 0; box-shadow: none; }

  /* ---------- список: «Папки» не отдельным рядом, а пунктом шестерёнки; без нижней панели список до нижнего края (внутри отступ под полосу «Домой») ---------- */
  .ch-top { gap: 4px; }
  .ch-only-wrap .seg button { padding-left: 9px; padding-right: 9px; }
  .ch-top > [data-tg-folders] { display: none; }
  .ch-setp [data-tg-folders] { display: flex; }
  :root[data-dock="off"] .ch[data-pane="list"] { height: calc(100dvh / var(--zoom, 1) - var(--top-h) - var(--frame) - var(--gap) - 4px - var(--la-h, 0px)); }
  :root[data-dock="off"] .ch[data-pane="list"] .ch-list { padding-bottom: env(safe-area-inset-bottom, 0px); }
  :root[data-dock="off"] body:has(.lg-dot) .ch[data-pane="list"] .ch-list { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } /* кнопка «$ N» (ledger.css, аудит 19.10): правило выше её запас перебивало */

  /* ---------- шапка диалога: одна строка имени (метки сжимаются), одна подписи, код заявки справа от подписи ---------- */
  .ch[data-pane="chat"] .ch-head { flex-wrap: nowrap; row-gap: 0; padding: 6px 8px 6px 4px; gap: 8px; }
  .ch-head > .ava { width: 36px; height: 36px; }
  .ch-hmain { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; }
  .ch-hmain > .ch-hr { grid-column: 1 / -1; flex-wrap: nowrap; overflow: hidden; row-gap: 0; gap: 6px; }
  .ch-hr .ch-hn { flex: 0 1 auto; min-width: 9ch; } /* метки справа обрезаются раньше имени: имя не меньше девяти знаков (24.10, снимок владельца: от имени оставалась одна буква) */
  .ch-hr > :not(.ch-hn) { flex: none; }
  .ch-hr button.ch-chg-x[data-cs-ack] { font-size: 0; width: 22px; padding: 0; } /* «снять все» в шапке крестиком: надпись выдавливала имя (снимок 24.10), вопрос «снять? да нет» остаётся словами */
  .ch-hr button.ch-chg-x[data-cs-ack]::before { content: "\00d7"; font-size: 15px; line-height: 20px; }
  .ch-hmain > .ch-hs { grid-column: 1; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-hs > .ch-wt { margin-right: 6px; height: 16px; padding: 0 6px; font-size: 11px; } /* «ждёт N мин» первым в подписи: раньше стояло в конце и пряталось за многоточием */
  .ch-hs .ch-nickw .copy { display: none; } /* «скопировать ник» на телефоне уходит: ник и так выделяется долгим нажатием, а место нужно подписи (аккаунт, менеджер) */
  /* последний комментарий (заметка) третьей строкой под подписью, на ширину имени и кнопок, а не в ту же строку, где она выдавливала имя в ноль (владелец 24.10: «шапка не читается»);
     высота около 56 px: строки плотнее, отступы сверху и снизу 4 px. Заметки нет: шапка прежняя */
  .ch[data-pane="chat"] .ch-head:has(> .ch-hm) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  .ch-head:has(> .ch-hm) > :is(.ch-back, .nb-back) { grid-column: 1; grid-row: 1 / 3; }
  .ch-head:has(> .ch-hm) > .ava { grid-column: 2; grid-row: 1 / 3; }
  .ch-head:has(> .ch-hm) > .ch-hmain { grid-column: 3; grid-row: 1; }
  .ch-head:has(> .ch-hm) .ch-hn { line-height: 1.1; }
  .ch-head:has(> .ch-hm) .ch-hs { line-height: 14px; margin-top: 0; }
  .ch-head:has(> .ch-hm) > .ch-hact { grid-column: 4; grid-row: 1; }
  .ch-head > .ch-hm { grid-column: 3 / 5; grid-row: 2; flex-wrap: nowrap; overflow: hidden; line-height: 15px; }
  .ch-head > .ch-hm .ch-hnote { max-width: 100%; }

  /* ---------- строка архива («Переписка в архиве: N сообщений», «Загрузить историю»): одна тонкая строка ---------- */
  .ah { flex-wrap: nowrap; gap: 8px; padding: 0 8px; min-height: 28px; font-size: var(--t-xs); }
  .ah-t { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .ah .btn.sm { height: 24px; padding: 0 8px; font-size: var(--t-xs); gap: 4px; }
  .ah .btn.sm .ic { width: 13px; height: 13px; }
  :root[data-kb="1"] .ah { display: none; } /* клавиатура открыта: в диалоге только шапка, лента и поле */
  .ch-main .ah[data-calm="1"] { display: none; } /* всё выгружено и ничего не идёт: строки нет, «Загрузить историю» в меню «⋯» диалога (chats-11.js, владелец 19.10); идёт задание или нужно внимание: строка видна */

  /* полоса «Ждут ответа» под спойлером (владелец 19.10): в диалоге свёрнутая сводка одной тонкой строкой (было 40 px), без логотипов и самого срочного клиента, цвет числа по сроку остаётся;
     нажатие раскрывает список поверх чата, как и раньше */
  .ch[data-pane="chat"] .ch-stp { --stp-h: 26px; padding: 0 2px 0 10px; }
  :root[data-kb="1"] .ch[data-pane="chat"] .ch-stp { --stp-h: 22px; }
  .ch[data-pane="chat"] .stp-lg, .ch[data-pane="chat"] .stp-u { display: none; }
  .ch[data-pane="chat"] .stp-n { font-size: var(--t-xs); }
  .ch[data-pane="chat"] .stp-ch { width: 26px; height: 26px; margin-left: auto; }

  /* ---------- лента: поля, зазоры, пузыри ---------- */
  .ch-msgs.cd-chat { padding: 6px 6px 8px; gap: 6px; }
  html body:has(.lg-dot):has(.ch[data-pane="chat"]) .ch-msgs.cd-chat { padding-right: 6px; }
  .ch-msgs .cd-dayb, .ch-msgs .ch-outbox { gap: 3px; }
  .ch-msgs .cd-msg.in + .cd-msg.out, .ch-msgs .cd-msg.out + .cd-msg.in { margin-top: 4px; }
  .ch-msgs .cd-msg { max-width: 94%; gap: 6px; }
  .ch-msgs .cd-bub { display: flow-root; padding: 6px 10px 5px; border-radius: 15px 15px 15px 5px; }
  .ch-msgs .cd-msg.out .cd-bub { border-radius: 15px 15px 5px 15px; }
  /* время, автор и галочки справа на последней строке текста, если она короткая (как в Telegram), иначе отдельной строкой; пузырь с картинкой по-прежнему по ширине картинки */
  .ch-msgs .cd-bub > .cd-btext { display: inline; }
  .ch-msgs .cd-bub > .cd-bm { float: right; max-width: 100%; margin: 4px 0 -2px 10px; padding-top: 0; line-height: 1.25; }
  .ch-msgs .cd-day { margin-bottom: 0; }

  /* кружок сделок у края открытого диалога: узкой плашкой столбиком, а не 61 px; под него поля ленты больше не режутся (было 26 px справа) */
  body:has(.ch[data-pane="chat"]) .lg-dot { flex-direction: column; justify-content: center; gap: 1px; width: 34px; height: 46px; padding: 0 0 0 4px; font-size: 12px; opacity: .92; }
  body:has(.ch[data-pane="chat"]) .lg-dot .ic { width: 16px; height: 16px; }
}
/* «Чаты» плотнее: компьютер и время в строке с текстом (владелец 19.10, s2-64: «Чаты на десктопе тоже можно сделать плотнее: сообщения подряд, отступ меньше, это ничему не мешает»).
   Только лента «Чатов» (.ch-msgs): карточку клиента и «Ленту» не трогаем. Только токены, обе темы. Планка (замеры на 1440 и 430 px, tests/test_dense_desktop.py): зазор между подряд
   идущими сообщениями одной стороны 4 px, при смене стороны 10 px (было 10 и 10); поля ленты 14 px сверху и слева, 12 снизу (было 14, 18, 16); поля пузыря 7x12 px (было 10x13);
   однострочное сообщение 33-35 px вместо 54-58. Ширина пузыря, шапка, полосы и список не меняются.
   Время (.cd-bm) лежит не прямо в пузыре, а в строке .cd-bf (реакции слева, метки и время справа). Правило dense.css для телефона целило в .cd-bm прямо в пузыре и попадало только в
   отправляемые (.ch-outbox), у остальных время оставалось отдельной строкой; здесь строка .cd-bf (без реакций) уходит вправо на последнюю строку текста, если помещается, иначе
   ниже. Это правило для любой ширины, поля пузыря и зазоры ниже только для компьютера (на телефоне они в dense.css). */
.ch-msgs .cd-bub > .cd-bf:not(:has(.cd-react)) { float: right; max-width: 100%; margin: 4px 0 -2px 10px; line-height: 1.25; }
@media (min-width: 721px) {
  .ch-msgs.cd-chat { padding: 12px 14px 12px; gap: 8px; }
  .ch-msgs .cd-dayb, .ch-msgs .ch-outbox { gap: 4px; }
  .ch-msgs .cd-msg.in + .cd-msg.out, .ch-msgs .cd-msg.out + .cd-msg.in { margin-top: 6px; }
  .ch-msgs .cd-msg { gap: 8px; }
  .ch-msgs .cd-bub { display: flow-root; padding: 7px 12px 6px; }
  .ch-msgs .cd-day { margin-bottom: 0; }
  .ch-msgs .cd-bub > .cd-btext { display: inline; }
  .ch-msgs .cd-bub > .cd-bm { float: right; max-width: 100%; margin: 4px 0 -2px 12px; padding-top: 0; line-height: 1.25; }
  .ch-msgs .cd-bub > .cd-bf:not(:has(.cd-react)) { margin-left: 12px; }
}
/* Пульт 2.0: окно «Значок на экране «Домой»», предложение обновить значок (js/home-icon.js) и указатель на шапках для подъёма экрана
   касанием (js/scroll-top.js), владелец 09.10. Только токены, обе темы.
   Превью это настоящая картинка значка (apple-touch-icon.png) в скруглении iPhone (около 22,4%), выбранный отмечен рамкой и галочкой. */
/* окно открывают и из окна первого запуска (.pf 62, закрытое 120): поднять над ним */
.layer-modal:has(.hi) > .scrim, .layer-modal:has(.hi) > .modal { z-index: 130; }
.hi { display: grid; gap: 14px; }
.hi-lab { padding: 6px 0 0; }
.hi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: -6px; }
.hi-opt {
  position: relative; display: grid; justify-items: center; gap: 10px; padding: 18px 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: transparent; color: var(--ink);
  font: inherit; font-weight: 500; font-size: var(--t-sm); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hi-opt:hover { background: var(--surface-2); }
.hi-opt:active { transform: scale(.97); }
.hi-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); }
.hi-ic { width: 76px; height: 76px; border-radius: 22.37%; overflow: hidden; display: block; box-shadow: var(--sh-2), 0 0 0 1px var(--line-2); } /* тонкая кромка: чернильная плитка не тонет в тёмной теме */
.hi-ic img { width: 100%; height: 100%; display: block; }
.hi-ck {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--inverse); color: var(--inverse-ink);
  opacity: 0; transform: scale(.7); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hi-opt[aria-pressed="true"] .hi-ck { opacity: 1; transform: none; }
.hi-how { padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; }
.hi-warn { line-height: 1.45; }
/* окно первого запуска: кнопка выбора сразу под шагом установки, с превью выбранного значка (HomeIcon.pickBtn) */
.pf-item > .pf-pick {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin-bottom: 14px; border: 0;
  background: color-mix(in srgb, var(--inverse-ink) 14%, transparent); color: var(--inverse-ink);
}
.pf-item > .pf-pick:hover { background: color-mix(in srgb, var(--inverse-ink) 22%, transparent); }
.pf-pick .hi-th { width: 28px; height: 28px; flex: none; border-radius: 22.37%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inverse-ink) 30%, transparent); }
.pf-pick + .pf-hint { margin-top: -6px; }
/* телефон: шапки, по которым касание поднимает экран (js/scroll-top.js). iPhone не присылает click на то, что не выглядит нажимаемым
   (div и header без своего обработчика), поэтому шапкам задан cursor: pointer; вспышку подсветки касания по всей шапке гасим */
@media (max-width: 720px) {
  #topbar, .drawer-head, .ch-head, .pv-head, .pv-bar { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}
/* предложение после смены палитры: текст и две кнопки, в узком окне кнопки второй строкой */
.hi-toast { flex-wrap: wrap; row-gap: 10px; }
.hi-tx { flex: 1 1 150px; min-width: 0; line-height: 1.35; }
.hi-bt { display: flex; flex: 1 1 100%; gap: 8px; justify-content: flex-end; }
.hi-go, .hi-no { height: 36px; padding: 0 14px; border-radius: var(--r-pill); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.hi-go { background: var(--accent); color: var(--accent-ink); }
.hi-no { background: transparent; color: var(--inverse-ink-2); }
@media (prefers-reduced-motion: reduce) {
  .hi-opt, .hi-ck { transition: none; }
  .hi-ck { transform: none; }
}
/* «Сейчас» и «Чаты»: переходы между экранами (владелец 10.10). Логотип аккаунта как кнопка «Открыть чат» (now-nav.js), кнопка «Назад» в шапке
   чата (nav-back.js), окно «Дальше: <стадия>» (now-nav.js). Цвета только из токенов, обе темы. */

/* значок 16-18 px остаётся на месте: область нажатия 24 px (поля внутрь, внешние отрицательные), на пальце 28 px */
.now-svc-go { flex: none; display: inline-grid; place-items: center; padding: 4px; margin: -4px; border-radius: 8px; line-height: 0; cursor: pointer; transition: background var(--dur-1); -webkit-tap-highlight-color: transparent; }
.now-svc-go:hover { background: var(--surface-3); }
.now-svc-go:focus-visible { border-radius: 8px; }
.now-svc-go:active { transform: scale(.94); }
@media (pointer: coarse) { .now-svc-go { padding: 6px; margin: -6px; } }

/* «Назад» в шапке диалога: строк сверху не прибавляет (владелец против места сверху; замер в Chrome по витрине 10.10: кнопка с подписью
   117 px сжимала имя и плашку «бот работает», шапка вырастала с 64 до 85 px на 1440 px и с 85 до 110 px на 1100-1280 px).
   Поэтому до 1600 px только стрелка 32 px (подпись в aria-label и в подсказке), полная подпись «К «Сейчас»» только на очень широком экране.
   До 860 px «Чаты» в одну колонку: стрелка встаёт на место «К списку» (тот же размер, шапка не меняется); в список ведёт меню слева,
   а на телефоне, где панель разделов в открытом диалоге скрыта, пункт «К списку чатов» в «⋯» шапки (chats-11.js). */
.btn.sm.nb-back { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; } /* .btn.sm.: перебить padding и высоту у .btn.sm */
.nb-back .nb-f { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1600px) { .btn.sm.nb-back { width: auto; max-width: 200px; padding: 0 10px 0 8px; } .nb-back .nb-f { display: inline; } }
@media (max-width: 860px) { .ch-head:has(> .nb-back) > .ch-back { display: none; } }
/* 861-1599 px: «Назад» (32 px и зазор 12) в этот ряд не помещается без потери: на 1200 px шапка прыгала с 85 до 110 px. Чтобы ряд не рос,
   подписи кнопок справа («Карточка», «Telegram») на это время уходят в подсказки: как у них же на телефоне, освобождается больше, чем занимает стрелка */
@media (min-width: 861px) and (max-width: 1599px) { .ch-head:has(> .nb-back) .ch-hact .hide-m { display: none; } }

/* окно «Дальше»: что видно в чате */
.now-menu .now-mi-next { color: var(--ink); font-weight: 600; }
.now-menu .now-mi-next .ic { color: var(--accent-text); }
.nx-ev { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--t-sm); }
.nx-ev > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.nx-ev[data-tone="ok"] > .ic { color: var(--pos); }
.nx-ev[data-tone="warn"] > .ic { color: var(--warn); }
.nx-ev-b { min-width: 0; }
.nx-ev-t { font-weight: 600; color: var(--ink); }
.nx-ev-q { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 720px) { .now-mbtns { flex-wrap: wrap; } .now-mbtns .btn { flex: 1 1 auto; justify-content: center; } }
/* Пульт 2.0: плашка «Входы и попытки входа» у владельца (js/login-alerts.js, владелец 09.10). Только токены, общие классы из components.css.
   Красный: чужая попытка. Янтарный: новое устройство или страна у сотрудника. Без цвета: обычный вход. */
#la { z-index: 19; }
#la.min { position: sticky; top: calc(var(--frame) + var(--ngbar-h, 0px) + var(--top-h) + var(--gap)); } /* развёрнутая плашка уезжает со страницей, узкая полоса висит под строкой пульта */
.la {
  display: flex; flex-direction: column; max-height: min(66vh, 620px); max-height: min(66dvh, 620px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--sh-2); overflow: hidden;
}
.la.lv-bad { border-color: color-mix(in srgb, var(--neg) 45%, var(--line-2)); }
.la.lv-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); }
.la-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; flex: none; }
.la.min .la-top { padding: 8px 8px 8px 12px; }
.la-top .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
.la-ttl { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.la-ttl b { font: 500 16px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.la-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.la-body { display: grid; gap: 8px; padding: 0 12px 12px; overflow-y: auto; overscroll-behavior: contain; }

/* группа: один человек (или один чужой Telegram ID) */
.la-g { padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.la-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 6px; }
.la-who b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.la-who .ico-tile, .la-ev .ico-tile { width: 30px; height: 30px; border-radius: 10px; }
.la-who .ico-tile .ic { width: 15px; height: 15px; }

/* событие */
.la-ev { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.la-ev + .la-ev, .la-who + .la-ev { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.la-b { flex: 1; min-width: 0; line-height: 1.4; }
.la-t { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.la-ev.lv-bad .la-t { color: var(--neg); }
.la-ip { font-family: var(--f-mono); font-size: 12px; overflow-wrap: anywhere; }
.la-fl { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.la-ac { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 420px; }
.la-g .btn.soft { background: var(--surface); border-color: var(--line-2); } /* группа серая: кнопка на ней не должна сливаться */
.la-more { padding: 2px 4px; }
.la-note { margin-top: -4px; }
.la-neg { color: var(--neg); }
.la-neg:hover { border-color: var(--neg); }

/* окно «Подробнее» */
.la-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 16px 0 12px; font-size: var(--t-sm); }
.la-dl dt { color: var(--ink-3); }
.la-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.la-mact { margin-top: 16px; }
.ss-row.ss-focus { background: var(--accent-soft); border-radius: var(--r-sm); }
/* архив входов (владелец 09.10): вкладки «Входы» и «Попытки входа», «Показать ещё», строка «страна, город» */
.ss-head { margin-top: 12px; }
.ss-head + .ss-list { margin-top: 8px; }
.ss-more { align-self: center; margin: 10px 0 4px; }
.ss-place { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .la { border-radius: var(--r-lg); max-height: min(72vh, 640px); max-height: min(72dvh, 640px); }
  .la-top { flex-wrap: wrap; padding: 12px 12px 10px; }
  .la-acts { width: 100%; padding-left: 48px; }
  /* свёрнутая строка (при загрузке плашка свёрнута всегда, владелец 19.10): один ряд без переноса, остаётся «Показать»; «Все свои» и «Весь архив» в развёрнутой */
  #la.min { position: static; } /* строка теперь всегда на экране: на телефоне не липнет под верхней строкой, иначе 55 px закрыты на любом экране */
  .la.min .la-top { flex-wrap: nowrap; gap: 8px; padding: 8px 6px 8px 10px; }
  .la.min .la-top .ico-tile { width: 32px; height: 32px; border-radius: 10px; }
  .la.min .la-acts { width: auto; padding-left: 0; }
  .la.min .la-acts > :not([data-la-min]) { display: none; }
  .la.min .la-acts .btn { padding: 0 10px; }
  .la.min .la-rest { display: none; }
  .la-ev { flex-wrap: wrap; }
  .la-b { flex-basis: calc(100% - 44px); }
  .la-ac { width: 100%; max-width: none; justify-content: flex-start; padding-left: 40px; }
  .la-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .la-dl dd { margin-bottom: 8px; }
}
/* «Чаты»: окно правки своего сообщения и актуализация расчёта (msgs-edit.js), окошко у галочек (msgs-read.js), владелец 09.10 */
.mse-note { padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.mse-note.warn { background: var(--warn-soft); color: var(--warn); }
.mse-note.neg { background: var(--neg-soft); color: var(--neg); }
.mse-ta { width: 100%; min-height: 132px; max-height: 40vh; resize: vertical; }
.mse-q { padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.mse-err { color: var(--neg); font-size: var(--t-sm); line-height: 1.4; }
.mse-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; }
.modal [data-mse-ok][disabled], .modal [data-mse-yes][disabled], .modal [data-mse-acc][disabled] { opacity: .55; cursor: default; }
/* расчёт в окне «Изменить» (msgs-calc.js): кнопки в ряд справа, на телефоне столбиком и главная сверху */
.mec-b { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mec-b .btn { min-height: 40px; }
.mec-col { flex-direction: column-reverse; align-items: stretch; } .mec-col .btn { justify-content: center; } /* «Понял так»: два длинных названия не помещаются в ряд, главная кнопка сверху */
@media (max-width: 720px) { .mec-b { flex-direction: column-reverse; align-items: stretch; } .mec-b .btn { min-height: 44px; justify-content: center; } }

/* окошко у галочек: две строки, подпись слева, время справа моноширинным; своё, а не [data-tip], чтобы цифры не сливались */
.rdp { position: fixed; z-index: 90; display: grid; grid-template-columns: max-content max-content; column-gap: 12px; row-gap: 3px; max-width: calc(100vw - 16px); padding: 9px 12px; border-radius: 11px; background: var(--inverse); color: var(--inverse-ink); box-shadow: var(--sh-2); font-size: var(--t-sm); line-height: 1.35; pointer-events: none; }
.rdp-r { display: contents; }
.rdp-r.full { display: block; grid-column: 1 / -1; }
.rdp-k { color: var(--inverse-ink-2); white-space: nowrap; }
.rdp-v { white-space: nowrap; }
.rdp-v i { font-style: normal; color: var(--inverse-ink-2); }
.rdp-t { font: 500 var(--t-sm)/1.35 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
@media (max-width: 720px) { .rdp-v { white-space: normal; } }
@media (prefers-reduced-motion: no-preference) { .rdp { animation: rdp-in var(--dur-1, .12s) var(--ease, ease-out) both; } }
@keyframes rdp-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* Пульт 2.0: проверка номера (владелец 09.10, js/screens/phonechk-chip.js и phonechk-kyc.js). Дополняет dialog-3.css: чип стал кнопкой с
   подробностями и может занимать несколько строк (имя, @ник и ID чужого аккаунта), рядом «проверено 2 ч назад» и ссылка на нашего клиента;
   итог старше суток блёклый, рядом «проверить заново». Блок «Проверки номеров» вкладки KYC. Только токены, обе темы. */
.cd-pst { display: inline; }
button.cd-phr { font-size: var(--t-xs); font-weight: 600; text-align: left; cursor: pointer; transition: filter var(--dur-1); }
.cd-phr { max-width: 100%; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; line-height: 1.35; }
button.cd-phr:hover { filter: brightness(.95); }
.cd-phr.old { opacity: .8; box-shadow: inset 0 0 0 1px var(--line); }
.cd-pha { margin-left: 6px; color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; }
.cd-phl { margin-left: 6px; color: var(--accent-text); font-size: var(--t-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cd-phl:hover { color: var(--ink); }
.cd-phb { vertical-align: middle; }
.pc { margin-top: 18px; }
.pc-none { margin: 4px 2px 0; }
.pc-r .li-sub { white-space: normal; overflow-wrap: anywhere; }
/* Кнопка карточки сделки («$ 17», js/ledger-3.js, ledger.css) в открытом диалоге (владелец 09.10: закрывала текст сообщения у правого края).
   Язычок стал узким (значок над числом), а справа у ленты оставлено поле под него: тексты сообщений он больше не закрывает. */
body:has(.ch[data-pane="chat"]) .lg-dot { flex-direction: column; justify-content: center; gap: 1px; width: 32px; height: 52px; padding: 0 0 0 4px; }
body:has(.lg-dot):has(.ch[data-pane="chat"]) .ch-msgs.cd-chat { padding-right: 40px; }
@media (max-width: 720px) { body:has(.lg-dot):has(.ch[data-pane="chat"]) .ch-msgs.cd-chat { padding-right: 26px; } }
/* Пульт 2.0: связи людей и источники в «Антифроде» (владелец 09.10, js/screens/relations-block.js, relations-src.js, relations-phone.js). Блок «Связи»: строка
   человека с чипом типа, кнопки типа, предложение менеджера, история; плашка «Связан с подозрительным аккаунтом» (в карточке, «Диалоге» и шапке чата);
   метка источника, которая открывает всплывашку, и сама всплывашка. Только токены, обе темы, телефон 390 px. */
.rl-list { display: grid; gap: 8px; }
.rl-r { padding: 4px 12px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rl-r.k-suspicious { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); background: color-mix(in srgb, var(--neg-soft) 55%, var(--surface)); }
.rl-r .lk-r { padding-left: 0; padding-right: 0; border: 0; background: none; box-shadow: none; }
.rl-a { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.rl-n { color: var(--ink); }
.rl-b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 2px 0 2px 38px; }
.rl-b .btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 30px; }
.rl-p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0 38px; padding: 8px 10px; border-radius: var(--r-md); background: var(--warn-soft); }
.rl-pa { display: inline-flex; gap: 6px; margin-left: auto; }
.rl-hist { display: grid; gap: 3px; margin: 6px 0 0 38px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.rl-lk { margin: 4px 0 0 38px; }
.rl-m { display: grid; gap: 4px; margin: 6px 0 0 38px; }
.rl-c { padding: 6px 10px; border-left: 2px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; }
.rl-m .rl-b { padding-left: 0; }
.rl-cf { margin: 0; }
.rl-f { margin: 8px 0 0 38px; }
.cd-rw { background: var(--neg-soft); }
.cd-rw .ic { color: var(--neg); }
.cd-rw .cn-lk { margin-left: 4px; }
.af-s em[data-af-src] { cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.af-s em[data-af-src]:hover, .af-s em[data-af-src]:focus-visible { background: var(--accent-soft); color: var(--accent-text); }
.sp-pop { width: min(420px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; padding: 12px 14px; }
.sp-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.sp-d { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 5px 12px; margin: 0 0 8px; font-size: var(--t-sm); }
.sp-d dt { color: var(--ink-3); }
.sp-d dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sp-l { display: grid; gap: 4px; font-size: var(--t-sm); }
.sp-t { margin-top: 8px; }
@media (max-width: 720px) {
  .rl-r .lk-r { flex-wrap: wrap; }
  .rl-r .rl-a { width: 100%; padding: 0 0 2px 38px; }
  .rl-b, .rl-p, .rl-hist, .rl-lk, .rl-f, .rl-m { margin-left: 0; padding-left: 0; }
  .rl-p, .rl-hist { padding: 8px 10px; }
  .sp-d { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-d dd { margin-bottom: 6px; }
}
button.cd-phl { padding: 0; border: 0; background: none; cursor: pointer; }
button.cd-phl.plain { color: var(--ink-3); font-weight: 500; }
/* Пульт 2.0: проверка рефералов в «Антифроде» карточки (владелец 09.10, js/screens/refchecks.js). Строка на кандидата: чип состояния, рекомендатель или приведённый,
   откуда, чем плох, пометка «Ссылается на постоянного клиента», кнопки решения, предложение менеджера. Предложение и форма причины берут стили из relations.css
   (.rl-p, .rl-pa, .lk-f). Только токены, обе темы, телефон 390 px. */
.rc-list { display: grid; gap: 8px; }
.rc-r { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rc-r.s-review { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rc-r.s-suspicious { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); background: color-mix(in srgb, var(--neg-soft) 55%, var(--surface)); }
.rc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.rc-t { font-size: var(--t-sm); }
.rc-why { color: var(--ink); }
.rc-reg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--warn-soft); font-size: var(--t-sm); }
.rc-reg .ic { color: var(--warn); flex: none; }
.rc-reg > span { flex: 1 1 200px; min-width: 0; }
.rc-b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rc-b:empty { display: none; }
.rc-b .btn, .rc-reg .btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 30px; }
.rc-r .rl-p { margin-left: 0; }
.rc-f { margin: 4px 0 0; }
.rc-w { cursor: help; }
@media (max-width: 720px) {
  .rc-r { padding: 10px; }
  .rc-r .rl-p { padding: 8px 10px; }
}