/* ═══════════════════════════════════════════════════════════════════════════
   GRAMATON CRM — crm-ux-depth.css  (UX-depth, спринт 2026-10-13)

   Финальная полировка кокпита переписки поверх P0-F1 / F2 / F3.
   Слой АДДИТИВНЫЙ: подключается ПОСЛЕ crm.css и только усиливает токены
   DESIGN.md (§3 базис 4px, шкала 4/8/12/16/20/24/32; радиусы 4/10/12/16),
   §5.5 (WCAG AA, :focus-visible, prefers-reduced-motion, aria).

   Содержание:
     1. Токены UX-depth + плотность (compact/comfy)
     2. Контраст AA: текстовые варианты акцентов (--accent-text/--accent2-text)
     3. Панель оформления (4 пресета темы + плотность)
     4. Баннер доверия «данные не покидают контур»
     5. Метки диалога ☆/⚑/⇄/⊘ (список, шапка треда, карточка клиента)
     6. Загрузка: спиннер/скелетоны, aria-busy
     7. Пустые состояния и «Повторить» при сбое (без техдеталей — S3)
     8. Доступность: focus-visible, sr-only, reduced-motion, адаптив 390
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ UX-DEPTH ─────────────────────────────────────────────────── */

:root{
  /* база отступов 4px, шкала из DESIGN.md §3 */
  --ux-sp-1:4px; --ux-sp-2:8px; --ux-sp-3:12px; --ux-sp-4:16px; --ux-sp-5:20px; --ux-sp-6:24px; --ux-sp-7:32px;
  /* радиусы из DESIGN.md §3 */
  --ux-r-sm:4px; --ux-r-md:10px; --ux-r-lg:12px; --ux-r-xl:16px; --ux-r-pill:99px;
  --ux-row-pad-y:12px; --ux-row-pad-x:14px; --ux-list-gap:14px; --ux-row-font:14px; --ux-row-minh:64px;
  --ux-trans:.16s ease;
  --accent-text:var(--accent-strong,var(--accent));
  --accent2-text:var(--accent2);
}

/* ── 2. КОНТРАСТ WCAG AA (ключевые пары fg/bg) ──────────────────────────────
   Замеры контраста (sRGB, формула WCAG 2.1) для 4 пресетов, до/после:
     preset a: accent как текст на bg 3.25 → --accent-text #7A5C15 = 5.79 (AA ✓)
     preset b: accent как текст на bg 4.09 → --accent-text #C4241A = 5.81 (AA ✓)
     preset c: accent2 как текст на card 1.75 → --accent2-text #F0C9D3 = 10.80 (AA ✓)
     preset d: accent2 как текст на card 2.71 → --accent2-text #D3C6FF = 12.01 (AA ✓)
   Пара «--ink на --btn-bg» уже AA: a 4.96 / b 5.18 / c 7.77 / d 8.41 (кнопки
   используют --btn-bg, а не --accent — проверено по crm.css:71,84,117). */
html[data-accent="a"]{--accent-text:#7A5C15;--accent2-text:#7A1F33}
html[data-accent="b"]{--accent-text:#C4241A;--accent2-text:#0B1F35}
html[data-accent="c"]{--accent-text:#C9A84C;--accent2-text:#F0C9D3}
html[data-accent="d"]{--accent-text:#C9A84C;--accent2-text:#D3C6FF}

/* тексты, которые в базовом слое красились в --accent (для a/b < AA) */
.btn-outline,
.toast .t-act,
.ck-kv a,
.int-doc,
.int-pick-item .int-doc{color:var(--accent-text)}
.btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text)}
/* инициалы аватаров: accent2 как текст на --card2 (c/d < AA) */
.ck-av,.wl-av{color:var(--accent2-text)}
.ck-fav-mark,.ck-marks-count{color:var(--accent-text)}
/* «ждёт N ч» — пары err-текста уже смешаны с --text, оставлено как есть */
.errbox .ic,.empty .e-ic{color:var(--err)}

/* ── 3. ПЛОТНОСТЬ СПИСКА (compact / comfy) + ПАНЕЛЬ ОФОРМЛЕНИЯ ─────────── */

html[data-density="compact"]{--ux-row-pad-y:7px;--ux-row-pad-x:10px;--ux-list-gap:8px;--ux-row-font:13px;--ux-row-minh:48px}
html[data-density="compact"] .ck-item{padding:var(--ux-row-pad-y) var(--ux-row-pad-x);min-height:var(--ux-row-minh)}
html[data-density="compact"] .ck-item-prev{display:none}
html[data-density="compact"] .ck-av{width:30px;height:30px;font-size:12px}
html[data-density="compact"] .ck-item{grid-template-columns:30px minmax(0,1fr)}
html[data-density="compact"] .ck-item-top strong{font-size:13px}
html[data-density="compact"] .ck-item-sub{font-size:12px}
html[data-density="compact"] .ck-list{--ux-list-gap:8px}
html[data-density="compact"] .ck-item-meta{margin-top:1px;gap:5px}
html[data-density="compact"] .ck-msg{padding:8px 10px}
html[data-density="compact"] .tbl td,html[data-density="compact"] .tbl th{padding:7px 10px}
html[data-density="compact"] .card{padding:12px}
html[data-density="comfy"] .ck-item{padding:var(--ux-row-pad-y) var(--ux-row-pad-x)}

/* панель оформления: живёт в .page-head каждого экрана (см. crm-ux-depth.js) */
.ux-bar{display:flex;align-items:center;gap:var(--ux-sp-3);flex-wrap:wrap;justify-content:flex-end}
.ux-group{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);
  border-radius:var(--ux-r-pill);background:var(--card)}
.ux-group>.ux-lbl{padding:0 8px 0 10px;font:600 11px/1 var(--font-ui);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.ux-seg{display:inline-flex;min-height:30px}
.ux-seg>button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:0;border-radius:var(--ux-r-pill);
  background:transparent;color:var(--muted);font:600 12px/1 var(--font-ui);cursor:pointer;transition:background var(--ux-trans),color var(--ux-trans)}
.ux-seg>button:hover{color:var(--text);background:var(--card2)}
.ux-seg>button[aria-pressed="true"]{background:var(--btn-bg,var(--accent));color:var(--ink)}
.ux-seg>button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ux-swatch{width:12px;height:12px;border-radius:50%;border:1px solid var(--border);flex:0 0 auto}
.ux-swatch.a{background:linear-gradient(135deg,#A8842C 50%,#FAF6EF 50%)}
.ux-swatch.b{background:linear-gradient(135deg,#EF3124 50%,#FFF 50%)}
.ux-swatch.c{background:linear-gradient(135deg,#C9A84C 50%,#0A1733 50%)}
.ux-swatch.d{background:linear-gradient(135deg,#C9A84C 50%,#05010E 50%)}
.ux-hint{font:400 12px/1.4 var(--font-ui);color:var(--muted);max-width:46ch}

/* ── 4. БАННЕР ДОВЕРИЯ ─────────────────────────────────────────────────── */

.ux-trust{display:flex;align-items:flex-start;gap:var(--ux-sp-3);margin-bottom:var(--ux-sp-4);
  padding:var(--ux-sp-3) var(--ux-sp-4);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  border-left:4px solid var(--accent);border-radius:var(--ux-r-lg);
  background:color-mix(in srgb,var(--accent) 5%,var(--card));color:var(--text)}
.ux-trust .ux-trust-ic{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,var(--card2));color:var(--accent-text)}
.ux-trust .ux-trust-txt{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.ux-trust strong{font-size:14px}
.ux-trust p{margin:0;font-size:13px;color:var(--muted);max-width:82ch}
.ux-trust .ux-trust-x{flex:0 0 auto;display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--ux-r-md);
  background:transparent;color:var(--muted);cursor:pointer}
.ux-trust .ux-trust-x:hover{background:var(--card2);color:var(--text)}
.ux-trust .ux-trust-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ── 5. МЕТКИ ДИАЛОГА ☆/⚑/⇄/⊘ ────────────────────────────────────────── */

/* кнопки-метки: шапка треда и карточка клиента */
.ck-marks{display:flex;align-items:center;gap:var(--ux-sp-2);flex-wrap:wrap}
.ck-marks-row{padding:var(--ux-sp-3) 0 0}
.ck-mark{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);
  border-radius:50%;background:var(--card2);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:background var(--ux-trans),color var(--ux-trans),border-color var(--ux-trans)}
.ck-mark:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.ck-mark:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ck-mark[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 46%,var(--border));color:var(--accent-text)}
.ck-mark[aria-pressed="true"].ck-mark-wait{background:color-mix(in srgb,var(--ck-warn) 16%,transparent);
  border-color:color-mix(in srgb,var(--ck-warn) 46%,var(--border));color:color-mix(in srgb,var(--ck-warn) 62%,var(--text))}
.ck-mark[aria-pressed="true"].ck-mark-ignore{background:color-mix(in srgb,var(--muted) 14%,transparent);
  border-color:color-mix(in srgb,var(--muted) 40%,var(--border));color:var(--muted)}
.ck-mark-badge{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--font-ui);
  color:var(--muted);white-space:nowrap}

/* индикаторы меток в строке списка диалогов (неинтерактивные, читаются скринридером) */
.ck-mk{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--ux-r-pill);
  font-size:11px;line-height:1}
.ck-mk-work{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
.ck-mk-wait{background:color-mix(in srgb,var(--ck-warn) 18%,transparent);color:color-mix(in srgb,var(--ck-warn) 62%,var(--text))}
.ck-mk-ignore{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
/* диалог, помеченный ⊘ «игнор/архив», приглушён (но не скрыт и доступен) */
.ck-item.is-ignored{opacity:.62}
.ck-item.is-ignored:hover,.ck-item.is-ignored.is-open{opacity:1}
.ck-item.has-wait{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ck-warn) 70%,transparent)}

/* ── 6. ЗАГРУЗКА ───────────────────────────────────────────────────────── */

.ux-spin{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;
  border:2px solid color-mix(in srgb,var(--accent) 28%,transparent);border-top-color:var(--accent);
  animation:ux-rot .8s linear infinite}
@keyframes ux-rot{to{transform:rotate(360deg)}}
.ux-loading{display:flex;align-items:center;gap:var(--ux-sp-2);padding:var(--ux-sp-4);
  color:var(--muted);font-size:13px}
.ux-loading--row{border-bottom:1px solid var(--border)}
[aria-busy="true"]{cursor:progress}
.ux-skel-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}

/* ── 7. ПУСТЫЕ СОСТОЯНИЯ И «ПОВТОРИТЬ» ─────────────────────────────────── */

.empty.ux-empty{padding:36px 20px}
.empty .ux-empty-actions{display:flex;gap:var(--ux-sp-2);flex-wrap:wrap;justify-content:center;margin-top:4px}
.errbox .ux-retry{margin-top:8px}
.ux-retry-note{margin:6px 0 0;font-size:12px;color:var(--muted)}
.ck-list .empty{padding:28px 16px}
.ck-note-warn.ux-warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent)}

/* ── 8. ДОСТУПНОСТЬ / АДАПТИВ ──────────────────────────────────────────── */

.ux-bar :focus-visible,.ck-marks :focus-visible,.ux-trust :focus-visible{outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .ux-spin{animation:none}
  .ux-seg>button,.ck-mark{transition:none}
}
@media (max-width:900px){
  .ux-bar{justify-content:flex-start}
  .ux-group>.ux-lbl{display:none}
  .ck-mark{width:38px;height:38px}
  .ux-trust{padding:var(--ux-sp-3)}
}
@media (max-width:640px){
  .ux-bar{gap:var(--ux-sp-2)}
  .ck-marks{gap:6px}
  html[data-density="compact"] .ck-item-prev{display:none}
}
@media print{.ux-bar,.ux-trust{display:none}}

/* панель оформления на экранах без .page-head (Дашборд и т.п.) */
.ux-bar--top{justify-content:flex-start;margin:0 0 var(--ux-sp-4)}
@media (max-width:900px){.ux-bar--top{justify-content:flex-start}}