:root {
  --bg: #0f172a;
  --bg-soft: #1e293b;
  --panel: #ffffff;
  --line: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;      /* фон «выбрано/акцент» на светлой подложке — уже был литералом в нескольких местах */
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  /* Шкала теней (elevation) — раньше была одна --shadow на всё; отдельная
     чуть заметная (карточки/тайлы) и «поднятая» (модалки/дропдауны) версии
     читаются как настоящая иерархия слоёв, а не просто рамка потемнее. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 56px rgba(2, 6, 23, .30), 0 6px 18px rgba(2, 6, 23, .14);
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  /* Единая кривая для хover/motion-переходов по всему приложению — раньше
     переходы были где .15s ease, где .2s ease, где вообще без transition. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, .16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #f1f5f9;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- Иконки (см. ICONS/icon() в app.js, TG_ICON, .intake-tab-ico) ----------
   svg stroke="currentColor" — иконка сама красится в цвет текста родителя,
   поэтому hover/active/disabled у кнопки красят и иконку бесплатно, без
   отдельных цветов на каждый экземпляр. .ico-svg — та же svg-разметка, но
   вставленная напрямую в HTML (топ-бар, index.html), а не через icon(). */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
.ico svg, .ico-svg { display: block; flex: 0 0 auto; }

/* Клавиатурная фокус-рамка — раньше её не было вообще ни у одной кнопки
   (только у текстовых полей через :focus). Табом по интерфейсу было не
   видно, где фокус. :focus-visible — рамка только при навигации с
   клавиатуры, не при клике мышью. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--brand); }

.hidden { display: none !important; }

/* ---------- Login (premium glass) ---------- */
#login-screen {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111f3d;               /* сплошной однотонный тёмно-синий */
  padding: 24px;
  perspective: 1200px;               /* для 3D-наклона карточки */
}

/* ===== обёртка для 3D-наклона (JS ставит --rx/--ry) ===== */
.login-tilt {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out;
}

/* ===== стеклянная карточка ===== */
.login-card {
  width: 100%;
  border-radius: 22px;
  padding: 34px 30px 30px;
  animation: cardIn .7s cubic-bezier(.22,.9,.28,1) both;
}
.login-card.glass {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 30px 60px rgba(2,6,23,.55),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
/* бегущий по периметру световой блик рамки */
.login-card.glass::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 65%, rgba(150,220,255,.85) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sweep 6s linear infinite;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card.glass { background: linear-gradient(160deg, #14224a, #0b1631); }
}

.login-card h1 { margin: 4px 0 4px; font-size: 24px; color: #eef4ff; text-align: center; letter-spacing: .01em; }
.login-card .sub { margin: 0 0 22px; color: #9fb3d9; font-size: 14px; text-align: center; }

/* поля/лейблы — только внутри логина, чтобы не задеть модалки приложения */
#login-screen .field { animation: fieldIn .6s ease both; }
#login-screen .field:nth-of-type(1) { animation-delay: .18s; }
#login-screen .field:nth-of-type(2) { animation-delay: .28s; }
#login-screen .field label { color: #9fb3d9; }
#login-screen .field input {
  background: rgba(8,18,45,.4);
  border: 1px solid rgba(255,255,255,.16);
  color: #eef4ff;
}
#login-screen .field input::placeholder { color: #6f83a8; }
#login-screen .field input:focus {
  border-color: rgba(120,200,255,.8);
  box-shadow: 0 0 0 3px rgba(90,170,255,.22);
}
#login-screen #login-btn { margin-top: 6px; animation: fieldIn .6s ease .36s both; }
#login-screen .error { text-align: center; }

/* ===== бейдж с лого + «сигнальные» кольца ===== */
.brand-badge {
  position: relative;
  width: 92px; height: 92px; margin: 0 auto 14px;
  animation: badgeIn .7s cubic-bezier(.22,.9,.28,1) both;
}
.brand-badge img {
  position: relative; z-index: 2;
  width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 22px rgba(2,10,40,.6), 0 0 26px rgba(80,170,255,.45),
              inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-badge .sig {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(130,200,255,.55);
  z-index: 1; opacity: 0; pointer-events: none;
  animation: signal 4.2s ease-out infinite;
}
.brand-badge .s2 { animation-delay: 1.4s; }
.brand-badge .s3 { animation-delay: 2.8s; }

@keyframes signal {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { opacity: 0; }
  100% { transform: scale(2.1);  opacity: 0; }
}
@keyframes sweep    { to { transform: rotate(1turn); } }
@keyframes cardIn   { from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
                      to   { opacity: 1; transform: translateY(0);    filter: blur(0); } }
@keyframes badgeIn  { from { opacity: 0; transform: scale(.6); }
                      to   { opacity: 1; transform: scale(1); } }
@keyframes fieldIn  { from { opacity: 0; transform: translateY(10px); }
                      to   { opacity: 1; transform: translateY(0); } }

/* тряска карточки при ошибке входа (класс вешает JS) */
.login-card.shake { animation: cardShake .5s cubic-bezier(.36,.07,.19,.97); }
.login-card.shake { border-color: rgba(255,120,120,.7); box-shadow: 0 30px 60px rgba(2,6,23,.55), 0 0 26px rgba(255,70,70,.4); }
@keyframes cardShake {
  10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card.glass::before, .brand-badge .sig,
  .login-card, .brand-badge, #login-screen .field, #login-screen #login-btn { animation: none !important; }
  .brand-badge .sig { display: none; }
}
@media (max-width: 640px) {
  .login-card.glass { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }

/* выбор времени перезвона при статусе «Нет ответа» (внутри поля «Статус») */
.na-callback { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; flex-wrap: wrap; }
.na-callback .na-lbl { font-size: 13px; font-weight: 600; color: #9a3412; margin: 0; }
.na-callback select, .na-callback input { width: auto; padding: 6px 9px; margin: 0; }
.na-callback .na-time { max-width: 110px; }

/* строка «когда» в окне массовой задачи */
.bulk-when { display: flex; gap: 8px; }
.bulk-when select, .bulk-when input { width: auto; }

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
  transition: background .15s var(--ease), opacity .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--brand-dark); box-shadow: 0 4px 14px rgba(79, 70, 229, .28); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }

/* «Водяная» кнопка: WebGL-рябь на canvas + неоновая рамка + мокрый блик под
   курсором. Градиент-фон — это фолбэк: он виден, если WebGL/анимация недоступны
   (canvas тогда не добавляется, класс .btn-water--nogl). */
.btn-water {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #143a7a 0%, #0a1f46 100%); border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(120,210,255,.55), 0 0 22px rgba(70,160,255,.40),
              0 8px 22px rgba(2,6,23,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-water:hover {
  background: linear-gradient(160deg, #143a7a 0%, #0a1f46 100%);
  box-shadow: 0 0 0 1.5px rgba(150,225,255,.9), 0 0 30px rgba(90,180,255,.65),
              0 10px 26px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
/* canvas.water непрозрачный — вода становится самой поверхностью кнопки */
.btn-water > canvas.water {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; border-radius: inherit; display: block;
}
.btn-water > .btn-label {
  position: relative; z-index: 2;
  letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0,20,50,.9);
}
/* мягкий блик, следующий за курсором (CSS-переменные --mx/--my ставит JS) */
.btn-water::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(90px 90px at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%);
  mix-blend-mode: screen;
}
.btn-water:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-water::after { display: none; }
}
.btn.block { width: 100%; }
.btn.ghost { background: #fff; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: #f8fafc; border-color: #cbd5e1; box-shadow: none; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; box-shadow: 0 4px 14px rgba(220, 38, 38, .28); }
.btn.tg { background: #229ED9; display: inline-flex; align-items: center; gap: 7px; }
.btn.tg:hover { background: #1c86b8; }
.btn.tg svg { display: block; }
/* кнопка после отправки — «Отправлено ✓» (повторная отправка всё ещё доступна) */
.btn.tg.sent { background: #0ea5a3; }
.btn.tg.sent:hover { background: #0c8d8b; }
/* индикатор в шапке карточки: прижат к правому краю, слева от × */
.tg-sent-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; margin-right: 12px;
  background: #e0f2fe; color: #0369a1;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.tg-sent-badge svg { display: block; width: 15px; height: 15px; }

.hint { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- App shell ---------- */
/* #app = горизонтальный флекс: слева боковая панель, справа основная колонка.
   `.hidden { display:none !important }` продолжает перебивать это, поэтому
   экран входа (когда #app.hidden) не затрагивается. */
#app { display: flex; align-items: stretch; }
/* margin-left резервирует место под панель — единственный источник истины по
   ширине колонки (см. .sidebar ниже: она специально вне потока, position:fixed,
   чтобы временное раскрытие по наведению ложилось ПОВЕРХ контента, а не
   толкало эту колонку вправо). */
.app-main { flex: 1 1 auto; min-width: 0; margin-left: 240px; transition: margin-left .2s ease; }
/* бренд теперь живёт в боковой панели — убираем дубль из шапки.
   header.topbar повышает специфичность, чтобы перебить .topbar .logo{display:flex} ниже. */
header.topbar .logo { display: none; }

/* ---------- Боковая панель (выдвигается слева, сворачивается) ----------
   position: fixed (не sticky) — панель нарочно вне потока #app: свёрнутая
   .sidebar.collapsed раскрывается по наведению/фокусу (см. :is(:hover,
   :focus-within) ниже) и ложится поверх контента, не меняя раскладку —
   .app-main держит своё margin-left независимо от того, наведена мышь или нет. */
.sidebar {
  width: 240px;
  position: fixed; top: 0; left: 0; height: 100vh;
  background: var(--bg); color: #cbd5e1;
  display: flex; flex-direction: column; overflow: hidden; z-index: 25;
  transition: width .2s ease;
}
.sidebar.collapsed { width: 64px; }
/* ~ (любой последующий сосед), а не + (строго следующий за ним): между
   #sidebar и .app-main в разметке теперь ещё и #sidebar-backdrop (мобильная
   подложка) — с + правило переставало матчиться вообще, и margin-left
   всегда оставался как для развёрнутой панели (240px), даже когда сайдбар
   на самом деле свёрнут (64px) — слева повисала пустая полоса ~176px. */
.sidebar.collapsed ~ .app-main { margin-left: 64px; }
.sb-head {
  flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; color: #fff; font-size: 16px; }
.sb-logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(79,70,229,.25); flex: 0 0 auto; }
.sb-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-toggle {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1;
  display: grid; place-items: center; line-height: 1;
  transition: transform .2s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.sb-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar.collapsed .sb-toggle { transform: rotate(180deg); }
.sidebar.collapsed .sb-brand { display: none; }
.sidebar.collapsed .sb-head { justify-content: center; padding: 0; }
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.sb-group { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #64748b; font-weight: 700; padding: 12px 12px 4px; white-space: nowrap; }
.sidebar.collapsed .sb-group { display: none; }
.sb-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; color: #cbd5e1; padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.sb-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-item.sb-primary { color: #c7d2fe; font-weight: 700; }
.sb-ico { flex: 0 0 auto; width: 22px; display: flex; align-items: center; justify-content: center; opacity: .82; transition: opacity .15s var(--ease); }
.sb-item:hover .sb-ico, .sb-item.sb-active .sb-ico { opacity: 1; }
.sb-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sb-label { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 10px 0; }

/* Наведение мышью или фокус клавиатурой (Tab) на свёрнутую панель — временно
   отменяет все "свёрнутые" правила выше и раскрывает подписи, пока курсор/
   фокус внутри. Само состояние "свёрнуто" (класс + localStorage,
   setupSidebar()) не меняем — уйдёт курсор, вернётся обратно в 64px.
   .sb-peek — класс от JS (mouseenter/mouseleave/focusin/focusout в
   setupSidebar()), НЕ псевдокласс :hover/:focus-within: чистый CSS :hover
   срабатывал сразу после клика по пункту меню (autoCollapseSidebar
   сворачивает панель мгновенно, а курсор в этот момент физически ещё стоит
   на только что нажатой кнопке) — панель оставалась раскрытой ПОВЕРХ
   только что открытой страницы и перехватывала клики (нашёл QA-прогон на
   «Настройках» и «Базе знаний»). mouseenter не срабатывает просто от того,
   что элемент сжался под неподвижным курсором — нужно настоящее пересечение
   границы, поэтому такой ложный «hover сразу после клика» больше невозможен. */
.sidebar.collapsed.sb-peek {
  width: 240px;
  box-shadow: 4px 0 24px rgba(2, 6, 23, .35);
}
.sidebar.collapsed.sb-peek .sb-brand { display: flex; }
.sidebar.collapsed.sb-peek .sb-head { justify-content: flex-start; padding: 0 14px; }
.sidebar.collapsed.sb-peek .sb-group { display: block; }
.sidebar.collapsed.sb-peek .sb-label { display: inline; }
.sidebar.collapsed.sb-peek .sb-item { justify-content: flex-start; padding: 10px 12px; }
.sidebar.collapsed.sb-peek .sb-toggle { transform: none; }
/* Пункт организации — это КОНТЕКСТ («с какой организацией сейчас работаем»),
   а не пункт списка экранов, поэтому у него нет собственной постоянной
   подсветки (раньше была — и путалась с настоящим «вы здесь» у текущего
   экрана). Только тонкая граница снизу отделяет его от списка разделов;
   подсвечивается точно так же, как остальные (.sb-active), и только когда
   пользователь действительно на экране «Организации». */
.sb-item.sb-org { margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-item.sb-org .sb-label { font-weight: 600; }
.sidebar.collapsed .sb-item.sb-org { padding-bottom: 10px; }

/* Пункт экрана, на котором сейчас находится пользователь — тонированный фон
   + индиго-полоса слева (inset, а не отдельный элемент: не зависит от
   padding .sb-nav и одинаково выглядит что в развёрнутом, что в свёрнутом
   меню, где остаётся только иконка). */
.sb-item.sb-active {
  background: rgba(79, 70, 229, .28);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.sb-item.sb-active:hover { background: rgba(79, 70, 229, .36); color: #fff; }

/* Индиго-точка допущения — показывает, где именно фокус сейчас (клавиатура) */
.sb-item:focus-visible { box-shadow: inset 3px 0 0 var(--brand), 0 0 0 2px rgba(79, 70, 229, .35); outline: none; }

/* ---------- Гамбургер + затемнение мобильного сайдбара ----------
   На десктопе оба всегда скрыты — навигация через постоянную панель слева.
   Раскрытие для телефона задаёт медиазапрос ниже (styles.css, @media max-width:640px). */
.mobile-menu-btn {
  display: none; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1;
  align-items: center; justify-content: center; transition: background .15s var(--ease);
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 89;
  background: rgba(2, 6, 23, .5); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* ---------- Организации (AMP, Фаза 0) ---------- */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.org-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.org-card.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,70,229,.15); }
.org-head { display: flex; align-items: center; gap: 8px; }
.org-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-code { font-size: 11px; font-weight: 700; color: var(--brand-dark); background: #eef2ff; border-radius: 6px; padding: 2px 7px; flex: 0 0 auto; }
.org-counts { display: flex; gap: 8px; }
.org-counts .oc { flex: 1; display: flex; flex-direction: column; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.org-counts .oc span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-counts .oc b { font-size: 18px; font-variant-numeric: tabular-nums; }
.org-actions { display: flex; gap: 6px; align-items: center; }
.org-actions .btn:first-child { flex: 1; }
.org-actions .btn.small { flex: 0 0 auto; }
.org-confirm { font-size: 13px; font-weight: 600; color: var(--danger); }

/* ---------- Формы + конструктор (AMP, Фаза 1) ---------- */
.modal.fc-modal { max-width: 980px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 8px; }
.form-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-card-main { flex: 1; min-width: 0; }
.form-card-name { font-weight: 700; font-size: 15px; }
.form-card-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.fc-layout { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.fc-main { flex: 1; min-width: 0; }
.fc-canvas { display: flex; flex-direction: column; gap: 10px; }
.fc-field { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fbfcfe; }
.fc-field .field { margin-bottom: 8px; }
.fc-field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fc-type { font-size: 12px; font-weight: 700; color: var(--brand-dark); background: #eef2ff; border-radius: 6px; padding: 3px 8px; }
.fc-field-head .spacer2 { flex: 1; }
.fc-required { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 2px; }
.fc-required input { width: 16px; height: 16px; }
/* drag-and-drop полей формы: грип-ручка + индикатор места вставки */
.fc-grip { cursor: grab; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 6px 2px 0; user-select: none; flex: 0 0 auto; touch-action: none; }
.fc-grip:active { cursor: grabbing; }
.fc-field.fc-dragging { opacity: .45; }
.fc-field.fc-drop-before { box-shadow: inset 0 3px 0 0 var(--brand); }
.fc-field.fc-drop-after { box-shadow: inset 0 -3px 0 0 var(--brand); }
/* top:18px — область прокрутки .amp-view считается по padding-box, поэтому при
   top:0 палитра прилипла бы вплотную к верхнему краю; 18px повторяют её padding.
   max-height/overflow — на случай роста списка компонентов: прилипший блок выше
   экрана иначе обрезался бы без возможности прокрутки. */
.fc-palette { flex: 0 0 220px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; position: sticky; top: 18px; z-index: 5; max-height: calc(100vh - 92px); overflow-y: auto; }
.fc-palette .section-title { margin-top: 0; }
.fc-comp { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.fc-comp:hover { background: #eef2ff; border-color: var(--brand); }
.fc-comp-ico { width: 22px; text-align: center; flex: 0 0 auto; }
@media (max-width: 760px) { .fc-layout { flex-direction: column; } .fc-palette { flex-basis: auto; width: 100%; position: static; } }
/* «Условный список»: подполя вариантов внутри карточки поля. Ни одному из этих
   контейнеров НЕЛЬЗЯ давать overflow — любой скролл-контейнер между .fc-palette
   и .amp-view снова сломает липкую палитру (см. .amp-view:has(.fc-layout)). */
.fc-branches { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fc-branch { border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.fc-branch-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.fc-branch-head .n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.fc-branch-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.fc-branch-add { display: flex; gap: 6px; align-items: center; }
.fc-branch-add select { flex: 1; min-width: 0; }
/* Осиротевшая ветка: вариант переименовали/удалили, а подполя остались. Не
   удаляем молча — показываем и даём решить. */
.fc-branch.orphan { border-color: #fdba74; background: #fff7ed; }
.fc-orphan-note { font-size: 12px; color: #9a3412; padding: 2px 10px 8px; }
.fc-field.fc-nested { background: #fff; border-left: 3px solid var(--brand); }
/* Липкая панель сохранения снизу конструктора — форма длинная, кнопка «Сохранить»
   всегда под рукой, не нужно скроллить наверх. Стиль как у панелей (#fff) —
   Chrome auto-dark инвертирует её вместе с остальным интерфейсом. */
.fc-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 -6px 18px rgba(2, 6, 23, .08);
}
.fc-savebar .spacer2 { flex: 1; }
.fc-savebar-hint { font-size: 13px; }
.fc-save-lg { min-width: 200px; padding: 12px 22px; font-weight: 600; }
@media (max-width: 640px) {
  .fc-savebar { flex-wrap: wrap; }
  .fc-savebar-hint { flex-basis: 100%; }
  .fc-save-lg { flex: 1; }
}

/* ---------- Организации: тулбар/поиск ---------- */
.org-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 16px; }
.org-toolbar .flt-search { flex: 1 1 260px; max-width: 420px; }
.org-head-info { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }

/* ---------- Заявки: приём (intake) ---------- */
.intake-form { display: flex; flex-direction: column; gap: 12px; }
.intake-field { display: flex; flex-direction: column; gap: 5px; }
.intake-field > label:first-child { font-size: 13px; color: var(--muted); font-weight: 500; }
.intake-field input:not([type=checkbox]):not([type=radio]), .intake-field select, .intake-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; font-family: inherit; resize: vertical; }
.intake-field input:focus, .intake-field select:focus, .intake-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.intake-field input[type=checkbox] { width: 18px; height: 18px; }
.intake-helper { font-size: 12px; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.radio-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.radio-item input { width: auto; }

/* ---------- Заявки: список (Arizalar) ---------- */
.app-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.app-table th, .app-table td { white-space: nowrap; }
.app-table td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- AMP: полноэкранные страницы ---------- */
.amp-view { padding: 18px 22px; overflow-y: auto; min-height: calc(100vh - 56px); }
.amp-page-head { margin-bottom: 16px; }
.amp-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.amp-crumb { font-size: 13px; color: var(--muted); font-weight: 600; }
.amp-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.amp-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; flex: 1; min-width: 0; }
.amp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.amp-sub { margin: 6px 0 0; }
.amp-body { max-width: 1280px; }

/* ---------- Doska (канбан заявок) ---------- */
.amp-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0; align-items: flex-start; }
.amp-col { flex: 0 0 270px; background: #eef2f7; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.amp-col h3 { margin: 4px 6px 10px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.amp-col h3 .cname { flex: 1; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); font-weight: 700; }
.amp-col h3 .cdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.amp-col h3 .n { background: #cbd5e1; color: #1e293b; border-radius: 20px; padding: 1px 8px; font-size: 12px; flex: 0 0 auto; }
.amp-col-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; min-height: 44px; flex: 1; }
.amp-col-body.drop-hi { outline: 2px dashed var(--brand); outline-offset: -2px; background: #e0e7ff; border-radius: 8px; }
.amp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; box-shadow: var(--shadow); cursor: grab; }
.amp-card:hover { border-color: #c7d2fe; }
.amp-card.dragging { opacity: .4; }
.amp-card-num { font-size: 11px; font-weight: 700; color: var(--brand-dark); }
.amp-card-name { font-weight: 600; font-size: 14px; margin-top: 2px; }
.amp-card-form { font-size: 11px; margin-top: 3px; }

@media (max-width: 640px) { .amp-view { padding: 12px; flex: 1 1 auto; min-height: 0; } }

/* ---------- Настройки организации ---------- */
.settings-layout { display: flex; gap: 16px; align-items: flex-start; }
.settings-nav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.settings-content { flex: 1; min-width: 0; }
.settings-tab { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 14px; cursor: pointer; }
.settings-tab.active { background: #eef2ff; border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.settings-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: #fff; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.settings-logo { max-width: 120px; max-height: 80px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: #fff; }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* предпросмотр «Исправить номера»: список «было → стало» может быть длинным —
   держим его в своей прокрутке, чтобы карточка настроек не растягивалась */
.phone-fix-list { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.phone-fix-list li { margin: 2px 0; }
@media (max-width: 760px) { .settings-layout { flex-direction: column; } .settings-nav { flex-basis: auto; width: 100%; flex-direction: row; flex-wrap: wrap; } }

/* ---------- Скрипты / Вики (документы) ---------- */
.doc-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; margin-bottom: 10px; }
.doc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-title { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.doc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-content { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-content * { max-width: 100%; }
.doc-content ul, .doc-content ol { margin: 6px 0 6px 22px; }
.doc-content a { color: var(--brand); }
.doc-content img { max-width: 100%; height: auto; }

/* ---------- Rich-text редактор (скрипты / база знаний) ---------- */
.rich-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 8px; background: #f8fafc; border-bottom: 1px solid var(--line); }
.rich-toolbar .rt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; font-size: 14px; color: var(--text); line-height: 1; }
.rich-toolbar .rt-btn:hover { background: #e8edf5; border-color: var(--line); }
.rich-toolbar .rt-sel { height: 28px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12.5px; padding: 0 4px; cursor: pointer; }
.rich-toolbar .rt-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.rich-toolbar .rt-color-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; overflow: hidden; }
.rich-toolbar .rt-color-wrap:hover { background: #e8edf5; }
.rich-toolbar .rt-color-a { font-weight: 700; font-size: 14px; border-bottom: 3px solid #ef4444; line-height: 1; padding-bottom: 1px; pointer-events: none; }
.rich-toolbar .rt-color-hl { font-weight: 700; font-size: 14px; background: #fff3b0; padding: 0 2px; border-radius: 2px; line-height: 1; pointer-events: none; }
.rich-toolbar .rt-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rich-editor { min-height: 240px; max-height: 52vh; overflow: auto; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text); outline: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.rich-editor img { max-width: 100%; height: auto; }

/* Таблицы, вставленные из Google Таблиц/Excel — в редакторе и в карточке.
   Высота строк и отступы как в Google Docs — текст читается свободно. */
.rich-editor table, .doc-content table { border-collapse: collapse; max-width: 100%; margin: 8px 0; font-size: 13.5px; line-height: 1.5; }
.rich-editor td, .rich-editor th, .doc-content td, .doc-content th { padding: 8px 12px; vertical-align: middle; overflow-wrap: anywhere; white-space: normal; }
.rich-editor tr, .doc-content tr { min-height: 34px; }

/* ---------- Раздел «Скрипты / База знаний»: слева список, справа контент ---------- */
.doc-layout { display: flex; gap: 16px; align-items: flex-start; }
.doc-list { flex: 0 0 260px; max-width: 260px; }
.doc-list-add { margin-bottom: 10px; }
.doc-list-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; box-sizing: border-box; margin-bottom: 10px; }
.doc-list-scroll { display: flex; flex-direction: column; gap: 4px; max-height: 72vh; overflow-y: auto; }
.doc-list-item { padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list-item:hover { background: #f1f5f9; }
.doc-list-item.active { background: #eef2ff; border-color: #c7d2fe; color: var(--brand-dark); font-weight: 600; }
.doc-list-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.doc-main { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.doc-view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc-view-title { font-size: 18px; letter-spacing: -.2px; flex: 1; min-width: 0; }
.doc-view-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-view-body { overflow-x: auto; }
.doc-empty { padding: 48px 12px; text-align: center; }
.doc-edit-head { margin-bottom: 10px; }
.doc-edit-head h3 { font-size: 17px; }
.doc-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { .doc-layout { flex-direction: column; } .doc-list, .doc-main { max-width: 100%; width: 100%; flex-basis: auto; } }

/* ---------- Виджет-помощник на приёме заявки (FAQ / Скрипты / супервайзер) ---------- */
/* Кнопка живёт в ряду действий шапки (.amp-actions), рядом с «К заявкам», а не
   плавает над контентом — так она ни на что не наезжает при любой ширине окна.
   Панель раскрывается под кнопкой, прижатая к правому краю. */
.help-widget { position: relative; display: inline-flex; }
.help-fab {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--brand); color: #fff; font-size: 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(79,70,229,.3); transition: background .15s, transform .15s ease;
}
.help-fab:hover { background: var(--brand-dark); transform: translateY(-1px); }
.help-fab.open { background: var(--brand-dark); transform: none; }
.help-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 360px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 200px); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.25); overflow: hidden; }
.help-panel.hidden { display: none; }
.help-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.help-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand); color: #fff; flex: 0 0 auto; }
.help-title { flex: 1; font-weight: 600; font-size: 15px; }
.help-logo { font-size: 18px; }
.help-back, .help-x { background: rgba(255,255,255,.18); border: none; color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.help-back:hover, .help-x:hover { background: rgba(255,255,255,.3); }
.help-body { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.help-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 14px; text-align: left; }
.help-item:hover { background: #f5f7ff; border-color: #c7d2fe; }
.help-ico { font-size: 20px; flex: 0 0 auto; }
.help-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; box-sizing: border-box; }
.help-results { display: flex; flex-direction: column; gap: 8px; }
.help-empty { text-align: center; padding: 14px 4px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.faq-q { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: #f8fafc; border: none; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); }
.faq-q:hover { background: #eef2ff; }
.faq-q-ico { flex: 0 0 auto; }
.faq-q-text { flex: 1; }
.faq-answer { padding: 10px 12px; font-size: 13px; border-top: 1px solid var(--line); overflow-x: auto; }
.faq-answer.hidden { display: none; }
@media (max-width: 760px) { .help-panel { width: calc(100vw - 32px); } }

/* Строка FAQ/скрипта в виджете — клик уводит в полный раздел (Скрипты / База
   знаний), поэтому это просто пункт списка, а не разворачивающийся аккордеон. */
.help-doc-item { justify-content: flex-start; gap: 10px; }
.help-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-doc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* метка «Скрипт»/«База знаний» у находок из соседнего раздела */
.help-doc-src { font-size: 11.5px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .3px; }
/* Фрагмент текста документа вокруг совпадения (docSnippet в app.js) — раньше
   строка результата показывала только название, оператору приходилось
   открывать каждый скрипт, чтобы понять, тот ли это. Строго одна строка с
   троеточием: при переносе на 2+ строки само совпадение (обычно в середине
   фрагмента) могло уехать во вторую строку и обрезаться line-clamp'ом —
   сниппет показывался бы, а подсветка в нём — нет. */
.help-doc-snippet {
  font-size: 12.5px; color: var(--muted); line-height: 1.4; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.help-doc-snippet mark.doc-hit { padding: 0 1px; box-shadow: none; } /* компактнее, чем подсветка в открытом документе */
.help-doc-open { flex: 0 0 auto; padding: 5px 10px; font-size: 12.5px; }
.help-doc-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* блок «в своём разделе не нашлось, но есть в соседнем» */
.help-cross { display: flex; flex-direction: column; gap: 8px; }
.help-cross-hint { margin: 0 0 2px; font-size: 12.5px; color: var(--muted); }

/* точка-уведомление на кнопке-чате (fab), когда супервайзер ответил, а виджет закрыт */
.help-fab { position: relative; }
.help-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; box-shadow: 0 0 8px rgba(220, 38, 38, .9); }
/* Ответ СУПЕРВАЙЗЕРА/АДМИНА оператору. Кнопка стоит в шапке страницы на светлом
   фоне, поэтому здесь фирменный индиго, а не голубой как в тёмной шапке.
   Базовую тень кнопки (0 2px 8px) повторяем в обоих состояниях — иначе на время
   свечения кнопка «проваливается», теряя объём. */
.help-fab.has-reply { --neon: 99, 102, 241; box-shadow: 0 2px 8px rgba(79, 70, 229, .3), 0 0 0 2px rgba(var(--neon), .3), 0 0 15px rgba(var(--neon), .6); }
.help-fab.has-reply.neon-arrive { animation: neonArrive 1.4s ease-out 2; }
.help-fab.has-reply:hover { transform: none; }

/* ---------- Найденный текст в статье/скрипте (переход из поиска помощника) ---------- */
mark.doc-hit { background: #ddd6fe; color: var(--text); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(139, 92, 246, .45); }
/* совпадение, к которому подвели экран — вспыхивает и гаснет, чтобы глаз сразу
   зацепился именно за него, а не за все подсветки сразу */
mark.doc-hit.doc-hit-first { --neon: 139, 92, 246; background: #c4b5fd; animation: neonFlash 1.1s ease-out 3; }
/* отключение анимаций для prefers-reduced-motion — в самом конце файла, иначе
   правила ниже перебили бы его: медиазапрос специфичности не добавляет */

/* ---------- Чат-пузыри (виджет оператора + переписка супервайзера) ---------- */
.chat-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-msgs { flex: 1; min-height: 120px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.chat-bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.chat-bubble-meta { font-size: 10.5px; font-weight: 700; opacity: .65; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .3px; }
.chat-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.mine .chat-bubble-meta { color: rgba(255,255,255,.85); }
.chat-bubble.their { align-self: flex-start; background: #f1f5f9; color: var(--text); border-bottom-left-radius: 4px; }
.chat-inputrow { display: flex; gap: 8px; margin-top: 10px; flex: 0 0 auto; }
.chat-input { flex: 1; resize: none; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; box-sizing: border-box; }
.chat-inputrow .btn { flex: 0 0 auto; align-self: flex-end; }
.rich-editor:focus { box-shadow: inset 0 0 0 2px rgba(79,70,229,.14); }
.rich-editor ul, .rich-editor ol { margin: 6px 0 6px 22px; }
.rich-editor a { color: var(--brand); }
.rich-editor:empty::before { content: "Текст…"; color: var(--muted, #9ca3af); }

/* ---------- Заявки: приоритет / метки / обработка ---------- */
.prio-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.tag-chip { display: inline-block; font-size: 11px; background: #eef2ff; color: #3730a3; border-radius: 6px; padding: 1px 7px; margin: 2px 3px 0 0; }
.amp-card-meta { font-size: 11px; margin-top: 4px; }
.amp-card-tags { margin-top: 4px; }
.intake-meta { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--line); }

/* ============================================================
   AMP — визуальная полировка (senior UI pass)
   ============================================================ */
.amp-page-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.amp-crumbs { margin-bottom: 10px; }
.amp-crumb { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; }
.amp-title { font-size: 25px; letter-spacing: -.4px; }
.amp-sub { font-size: 13.5px; margin-top: 6px; max-width: 760px; }
.amp-actions .btn { border-radius: 10px; }

/* карточки: единый радиус, мягкая тень, приятный hover */
.org-card, .form-card, .doc-card, .settings-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.org-card:hover, .form-card:hover, .doc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); border-color: #c7d2fe; }
.org-card.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,70,229,.18), 0 12px 28px rgba(79,70,229,.12); }

/* Организации. auto-fit, а не auto-fill: с auto-fill лишние колонки, для
   которых не хватило карточек, остаются пустыми track'ами (именно тот
   пустой хвост справа, который иначе видно на широком экране при небольшом
   числе организаций) — auto-fit схлопывает пустые колонки и отдаёт их
   ширину существующим карточкам через 1fr. */
.org-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.org-head { gap: 10px; }
.org-icon { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.org-name { font-size: 16px; letter-spacing: -.2px; }
.org-counts { gap: 8px; }
.org-counts .oc { background: #f8fafc; border-radius: 11px; padding: 8px 10px; }
.org-counts .oc span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.org-counts .oc b { font-size: 19px; color: var(--brand-dark); }

.form-card, .doc-card { border-radius: 14px; }
.form-card-name, .doc-title { letter-spacing: -.2px; }

/* Приём заявки — форма и «обработка» не на всю ширину */
.intake-form, .intake-meta { max-width: 720px; }
.intake-field > label:first-child { font-weight: 600; color: var(--text); }

/* Доска */
.amp-board { padding: 4px 0 14px; }
.amp-col { background: #f1f5f9; border: 1px solid var(--line); border-radius: 14px; }
.amp-col h3 .cname { font-size: 12.5px; }
.amp-card { border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.07); transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease; }
.amp-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.12); border-color: #c7d2fe; }

/* Настройки */
.settings-tab { border-radius: 11px; transition: background .12s, border-color .12s; }
.settings-card { border-radius: 14px; }

/* Таблица заявок */
.app-table tbody tr:hover td { background: #f8fafc; }
.prio-badge { padding: 3px 10px; }
.tag-chip { padding: 2px 8px; border-radius: 7px; }

/* ---------- Доска AMP — как доска Prime ---------- */
.amp-board { gap: 14px; padding: 16px 0 20px; align-items: flex-start; }
.amp-col { flex: 0 0 288px; background: #eef2f7; border: none; border-radius: 12px; padding: 10px; max-height: calc(100vh - 220px); }
.amp-col h3 { margin: 4px 6px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.amp-col h3 .cname { flex: 1; color: var(--muted); font-weight: 600; gap: 7px; }
.amp-col h3 .cdot { width: 9px; height: 9px; }
.amp-col h3 .n { background: #cbd5e1; color: #1e293b; border-radius: 20px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.amp-col-body { gap: 9px; min-height: 160px; }
.amp-col-body .empty { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 8px; }
.amp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow); }
.amp-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.12); border-color: #c7d2fe; }
.amp-card-num { font-size: 11px; font-weight: 700; color: var(--brand-dark); }
.amp-card-name { font-weight: 600; font-size: 14px; margin-top: 2px; }

/* ---------- Приём/детали заявки — карточка + 2 колонки (как у сделки Prime) ---------- */
.intake-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); max-width: 920px; }
.intake-form { display: grid; grid-template-columns: 1fr; gap: 14px 20px; max-width: none; }
.intake-field--full { grid-column: 1 / -1; }
/* Подполя «Условного списка» на приёме. Блоки всех вариантов отрисованы сразу и
   скрываются классом .hidden — благодаря этому набранное в одном варианте
   переживает переключение туда-обратно. Без overflow: иначе выпадающее меню
   поиска (.ss-menu, position:absolute) обрезалось бы. */
.cond-host { display: grid; grid-template-columns: 1fr; gap: 14px 20px; }
.cond-host:empty { display: none; }
.intake-subform { display: grid; grid-template-columns: 1fr; gap: 14px 20px; grid-column: 1 / -1; padding-left: 14px; border-left: 2px solid var(--line); }
.intake-field > label:first-child { font-weight: 600; font-size: 13px; color: var(--text); }
.intake-field > label:first-child .req { color: var(--danger); font-weight: 700; }
.intake-helper { font-size: 12px; color: var(--muted); }
.intake-meta { border-top: none; margin-top: 0; max-width: none; }
.lead-main > .intake-card, .lead-main > .path { max-width: none; margin-bottom: 14px; }
.intake-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Галка «Отправить в Telegram» — слева от кнопок (margin-right:auto прижимает кнопки вправо) */
.intake-tg-send { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.intake-tg-send input { width: 16px; height: 16px; accent-color: #0284c7; cursor: pointer; }
/* Кнопка ✈ в списке заявок: зелёная, если заявка уже отправлена в Telegram */
.btn.tg-btn.sent { background: #dcfce7; border-color: #86efac; color: #15803d; }
.btn.tg-btn.sent:hover { background: #bbf7d0; border-color: #4ade80; }
.intake-center { display: flex; justify-content: center; }
.intake-center .intake-card { width: 100%; }
/* На экране нового приёма заявки снимаем ограничение ширины .amp-body,
   чтобы .intake-center центрировал карточку по всей ширине области, а не
   внутри прижатого влево блока 1280px. .intake-center используется только
   здесь, поэтому правка не затрагивает другие AMP-страницы. */
.amp-body:has(.intake-center) { max-width: none; }
/* Сетка организаций — карточки, не текст: ограничение читаемости в 1280px
   только оставляло пустой хвост на широких экранах вместо того, чтобы
   auto-fill сам разложил дополнительные колонки. */
.amp-body:has(.org-grid) { max-width: none; }
/* Скрипты и База знаний (общая вёрстка .doc-layout: список слева + текст/
   таблица справа, .doc-main уже flex:1 1 auto) — тот же потолок 1280px не
   давал панели документа развернуться на широких мониторах: у таблиц из
   вставленного текста (см. скриншот пользователя) не хватало места и они
   сжимались, хотя справа оставалось пустое поле. */
.amp-body:has(.doc-layout) { max-width: none; }
/* Экран приёма с вкладками форм: делаем .amp-view контейнером фиксированной
   высоты со своим скроллом (только когда есть .intake-tabs), чтобы поля формы
   прокручивались ВНУТРИ области, а панель вкладок липла к низу экрана (как в
   AMP). На других AMP-страницах поведение прежнее (min-height + скролл страницы). */
.amp-view:has(.intake-tabs) { height: calc(100vh - 56px); }
/* Конструктор формы — тот же приём. Без этого палитра «Компоненты» (.fc-palette,
   position:sticky) и нижняя панель сохранения (.fc-savebar) не липнут вообще:
   .amp-view объявлен scroll-контейнером (overflow-y:auto), но имеет только
   min-height, поэтому всегда растёт под контент, никогда не прокручивается сам —
   а sticky отсчитывается именно от него, и смещение всегда выходит нулевым.
   Прокручивать начинает .amp-view — и обе панели встают на место.
   .fc-layout есть только на экране конструктора. */
.amp-view:has(.fc-layout) { height: calc(100vh - 56px); }
/* Нижняя панель вкладок форм — центрируем по ширине формы (стоит ровно под
   карточкой) и прилипаем к низу области прокрутки. Короткая форма — панель сразу
   под ней; длинная — панель закреплена снизу, поля формы скроллятся. */
.intake-tabs { position: sticky; bottom: -18px; z-index: 5; display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; align-items: center; max-width: 920px; margin: 18px auto 0; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 16px rgba(15,23,42,.08); }
.intake-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 160px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.intake-tab:hover { border-color: #7dd3fc; background: #f0f9ff; }
.intake-tab.active { background: #e0f2fe; border-color: #38bdf8; color: #0369a1; }
.intake-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Монохромный значок-документ (как на фото): SVG через mask, цвет = фон (наследует
   muted у неактивной вкладки и brand у активной). */
.intake-tab-ico { width: 15px; height: 15px; flex: 0 0 auto; background-color: var(--muted); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='16' y2='17'/><line x1='8' y1='9' x2='10' y2='9'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='16' y2='17'/><line x1='8' y1='9' x2='10' y2='9'/></svg>") center/contain no-repeat; }
.intake-tab.active .intake-tab-ico { background-color: #0284c7; }
@media (max-width: 700px) { .intake-form { grid-template-columns: 1fr; } .intake-card { max-width: none; } .intake-submit-row { flex-direction: column-reverse; } .intake-submit-row .btn { width: 100%; } }

/* Телефон: сайдбар становится выезжающей панелью (гамбургер слева в шапке,
   см. #mobile-menu-btn), а не постоянной колонкой. Раньше здесь стояло
   display:none — то есть на телефоне перейти куда-либо, кроме доски,
   было физически нечем: меню профиля с тех же экранов давно отключено
   (buildProfileMenu). */
@media (max-width: 640px) {
  .mobile-menu-btn, .sidebar-backdrop { display: flex; }
  .sidebar-backdrop { display: block; z-index: 44; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    /* Выше топбара/доски (20 и ниже), но НАМЕРЕННО ниже модалок (.modal-
       backdrop: 50) и тостов (100) — если модалка вдруг откроется, пока
       панель ещё не успела закрыться, она не должна оказаться под ней. */
    z-index: 45;
    width: min(86vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s var(--ease-out);
    box-shadow: none;
  }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(2, 6, 23, .35); }
  /* Свёрнутый вид (иконки без подписей) не имеет смысла для выезжающей
     панели на весь рост — на телефоне всегда показываем полную панель,
     независимо от класса .collapsed (это desktop-состояние, персистится в
     localStorage и телефон его не трогает). */
  .sidebar.collapsed { width: min(86vw, 300px); }
  .sidebar.collapsed .sb-brand,
  .sidebar .sb-brand { display: flex; }
  .sidebar.collapsed .sb-head,
  .sidebar .sb-head { justify-content: flex-start; padding: 0 14px; }
  .sidebar.collapsed .sb-group,
  .sidebar .sb-group { display: block; }
  .sidebar.collapsed .sb-label,
  .sidebar .sb-label { display: inline; }
  .sidebar.collapsed .sb-item,
  .sidebar .sb-item { justify-content: flex-start; padding: 10px 12px; }
  .sb-toggle { display: none; } /* сворачивание — desktop-only, на телефоне панель закрывают гамбургером/тапом по фону */
  /* .sidebar теперь position:fixed и вне потока — margin-left у .app-main
     ей под неё больше не нужен ни в каком состоянии. */
  .sidebar.collapsed ~ .app-main,
  .app-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-left: 0; }
}

header.topbar {
  height: 56px;
  background: var(--bg);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .logo { font-weight: 700; letter-spacing: .3px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.topbar .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(79,70,229,.25); }
.topbar .spacer { flex: 1; }
.admin-org-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 11px;
  white-space: nowrap;
}
.admin-org-filter select { min-width: 160px; max-width: 240px; }
.topbar select {
  background: var(--bg-soft);
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 7px 10px;
}
.topbar .user { font-size: 13px; color: #cbd5e1; text-align: right; line-height: 1.3; }
.topbar .user b { color: #fff; }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; display: inline-block; margin-right: 6px; }
.ws-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }

/* ---------- Profile dropdown menu (карточка пользователя + выход) ---------- */
.profile { position: relative; display: flex; align-items: center; gap: 6px; }
.profile.clickable { cursor: pointer; padding: 4px 8px; border-radius: 9px; }
.profile.clickable:hover { background: rgba(255,255,255,.08); }
.profile .caret { color: #94a3b8; font-size: 11px; transition: transform .15s; }
.profile.open .caret { transform: rotate(180deg); }
/* Лёгкое появление выпадающих панелей (профиль, ☰ Меню) — раньше .hidden→flex
   переключался мгновенно, без единого перехода в приложении. Анимация, а не
   transition: display:none не участвует в transition, зато при каждом снятии
   .hidden проигрывается заново. */
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.profile-menu {
  position: absolute; top: calc(100% + 4px); right: 12px; z-index: 60;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 248px; max-height: 80vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  animation: popIn .14s var(--ease-out);
}
.pm-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 9px 10px 4px; font-weight: 700; }
.pm-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; }
.pm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); cursor: pointer; transition: background .12s var(--ease); }
.pm-item:hover { background: #f1f5f9; }
.pm-item.pm-primary { font-weight: 700; color: var(--brand); }
.pm-ico { width: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); }
.pm-item:hover .pm-ico, .pm-item.pm-primary .pm-ico { color: currentColor; }

/* Карточка пользователя в выпадашке профиля: кто я + текущая организация,
   ниже — «Выйти». Раньше кнопка выхода стояла отдельно в топ-баре и занимала
   там место (особенно тесно было на телефоне). */
.pm-user { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.pm-user-ava { width: 38px; height: 38px; font-size: 14px; flex: 0 0 auto; }
.pm-user-meta { min-width: 0; }
.pm-user-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-user-role { font-size: 12px; color: var(--brand); font-weight: 600; margin-top: 1px; }
.pm-user-login { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-org {
  display: flex; align-items: center; gap: 7px; margin: 0 4px 6px; padding: 7px 8px;
  background: #f8fafc; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--muted);
}
.pm-org .ico { color: var(--muted); flex: 0 0 auto; }
.pm-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Выйти» — единственное действие панели, отделено линией и окрашено в
   danger, чтобы не нажать случайно вместо чего-то безобидного. */
.pm-logout { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 2px; padding-top: 11px; color: var(--danger); font-weight: 600; }
.pm-logout:hover { background: #fef2f2; }
.pm-logout .pm-ico { color: var(--danger); }

/* ---------- Меню админ-действий в строке фильтров (справа после «Сбросить») ---------- */
.fb-menu { position: relative; margin-left: auto; }
.fb-menu-btn.open { background: #eef2ff; border-color: var(--brand); color: var(--brand-dark); }
.fb-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 240px; max-width: calc(100vw - 24px);
  max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  animation: popIn .14s var(--ease-out);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
/* когда единственное, что могло бы показаться в тулбаре (кнопка массовой задачи),
   скрыто — прячем и саму полосу, чтобы не было пустой белой строки */
.toolbar:has(> #bulk-noanswer-btn.hidden) { display: none; }

/* ---------- Filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.filterbar:empty { display: none; }
/* Тумблер «Фильтры» и обёртка «всё, кроме поиска» (buildFilterBar в app.js) —
   на десктопе показываем как раньше, без изменений: контейнер как будто не
   существует (display:contents — его дети становятся обычными детьми
   .filterbar), а сам тумблер скрыт. Мобильная версия — ниже, в @media. */
.filterbar-toggle { display: none; }
.filterbar-extra { display: contents; }
.flt-search { flex: 1 1 220px; min-width: 180px; max-width: 340px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.flt-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

/* Поиск по номеру среди всех операторов (входящий звонок) */
.lookup-box { flex-basis: 100%; width: 100%; background: #fff; border: 1px solid var(--brand); border-radius: 10px; margin-top: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(2,6,23,.12); }
.lookup-head { background: #eef2ff; color: var(--brand-dark); font-weight: 700; font-size: 12px; padding: 8px 12px; }
.lookup-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.lookup-item:hover { background: #f8fafc; }
.lookup-item .avatar { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
.lk-main { flex: 1; min-width: 0; }
.lk-name { font-weight: 600; font-size: 13px; }
.lk-sub { font-size: 12px; }
.lk-open { color: var(--brand); font-size: 12px; font-weight: 600; white-space: nowrap; }
.flt-sel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; max-width: 200px; }
.flt-sel:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.flt-date-group { display: inline-flex; gap: 4px; }
.flt-date, .flt-time { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; }
.flt-date:focus, .flt-time:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.flt-time { width: 100px; }
.flt-time:disabled { background: #f8fafc; color: #94a3b8; }

/* ---------- Диапазон дат «с — до» (попап-календарь на доске) ---------- */
.daterange-wrap { position: relative; display: inline-flex; }
.flt-daterange-btn {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none;
  background: #fff; cursor: pointer; font: inherit; white-space: nowrap;
}
.flt-daterange-btn:hover { border-color: var(--brand); }
.daterange-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(2,6,23,.30);
  padding: 12px; width: 260px;
}
.daterange-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.daterange-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.daterange-weekdays span { min-width: 0; }
.daterange-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.daterange-cell {
  min-width: 0; width: 100%; box-sizing: border-box; aspect-ratio: 1;
  margin: 0; padding: 0; border: none; background: transparent; border-radius: 8px;
  font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
}
.daterange-cell:hover { background: #f1f5f9; }
.daterange-cell.empty { cursor: default; pointer-events: none; }
.daterange-cell.today { box-shadow: inset 0 0 0 1px var(--brand); }
.daterange-cell.in-range { background: rgba(79,70,229,.12); border-radius: 0; }
.daterange-cell.endpoint { background: var(--brand); color: #fff; border-radius: 8px; }
.daterange-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: space-between; }
.app-form-picker { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.app-form-picker .muted { font-size: 13px; white-space: nowrap; }
.app-form-sel { max-width: 280px; }

/* ---------- Board ---------- */
.board {
  display: flex;
  gap: 14px;
  padding: 18px;
  overflow-x: auto;
  align-items: flex-start;
  min-height: calc(100vh - 56px - 58px);
}
.column {
  flex: 0 0 288px;
  background: #eef2f7;
  border-radius: 12px;
  padding: 10px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.column h3 {
  margin: 4px 6px 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.column h3 .n {
  background: #cbd5e1;
  color: #1e293b;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 12px;
}
.col-body { overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 2px; }
/* «Показать ещё N» — колонки с сотнями лидов (обычный случай для «Новый лид»
   у активной организации) рендерили ВСЕ карточки разом; теперь показываем
   пачками, кнопка снизу списка. Не карточка — сама выделяется пунктиром,
   чтобы не путаться со сделками при быстром скролле. */
.col-more {
  flex: 0 0 auto; margin-top: 2px; padding: 9px; border: 1.5px dashed #cbd5e1;
  border-radius: var(--radius); background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.col-more:hover { background: #fff; border-color: var(--brand); color: var(--brand-dark); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c7d2fe; }
/* Клавиатурная навигация (Tab) по доске — раньше карточка открывалась только
   кликом/тапом, с клавиатуры до неё нельзя было даже добраться. tabindex+
   keydown — в attachCardInteractions (app.js). */
.card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); border-color: var(--brand); }
.card .name { font-weight: 600; font-size: 14px; }
.card .phone { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card .meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* Стикеры статуса — раньше плоская заливка без глубины и с чуть тяжеловатым
   для 11px кеглем весом. Тонкое внутреннее кольцо (inset) на тон темнее фона
   даёт лёгкий объём, не трогая сами цвета (они завязаны на статусы и могут
   быть переопределены редактором статусов, см. statusBadge() в app.js). */
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .1px;
  border-radius: 20px; padding: 3px 10px; line-height: 1.3;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.badge.new { background: #e0e7ff; color: #3730a3; }
.badge.informed { background: #dcfce7; color: #166534; }
.badge.no_answer { background: #fee2e2; color: #991b1b; }
.badge.callback { background: #fef3c7; color: #92400e; }
.badge.success { background: #bbf7d0; color: #14532d; }
.badge.fail { background: #e5e7eb; color: #374151; }

.who { font-size: 11px; color: #475569; display: inline-flex; align-items: center; gap: 5px; }
.avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 700; }
/* Не назначен — раньше сплошной серый кружок с «—», выглядел как обычный
   аватар без подписи. Пунктирный контур однозначнее читается как «пусто». */
.avatar.none { background: #fff; color: #94a3b8; border: 1.5px dashed #cbd5e1; font-size: 9px; }

.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; }

/* ---------- Modal ---------- */
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, .55);
  display: grid; place-items: center;
  z-index: 50; padding: 20px;
  animation: modalBackdropIn .15s var(--ease-out);
}
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s var(--ease-out);
}
.modal.wide { max-width: 720px; }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal, .profile-menu, .fb-menu-dropdown { animation: none !important; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-head .x { border: none; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; align-items: center; position: sticky; bottom: 0; background: #fff; }
.modal-foot .confirm-text { color: var(--danger); font-weight: 600; font-size: 13px; margin-right: auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Инлайн-форма «создать нового пользователя» во вкладке Пользователи (настройки орг.) */
.user-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin-top: 4px; }
.user-create-grid > button { grid-column: 1 / -1; }
.user-create-grid input, .user-create-grid select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff;
}
.user-create-grid input:focus, .user-create-grid select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
@media (max-width: 560px) { .user-create-grid { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; align-items: center; }
/* Контролы в строке тянутся на всю доступную ширину и оформлены единообразно
   с остальными полями (бордер/паддинг/скругление) — иначе выглядят как голые
   нативные селекты, а плейсхолдер обрезается. */
.row > input:not([type=checkbox]):not([type=radio]):not([type=color]),
.row > select,
.row > textarea {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; font: inherit;
}
.row > input:focus, .row > select:focus, .row > textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
/* Селект роли — узкий, не во всю ширину (роль короткая). */
.row > select.role-pick { flex: 0 0 auto; width: 168px; }
/* Строки создания «контролы + кнопка» не растягиваем на всю ширину страницы. */
.row.create { max-width: 640px; }
@media (max-width: 560px) { .row.create { flex-wrap: wrap; } .row.create > .role-pick, .row.create > .btn { flex: 1 1 auto; width: auto; } }
/* Панель поиска/добавления во вкладке «Пользователи» (settingsPeople) */
.member-add-head { align-items: flex-end; }
.member-add-head > .field { flex: 0 0 auto; margin: 0; }
.member-search-results { max-height: 320px; overflow-y: auto; }
/* Переключатель «В организации» / «Все пользователи» — сегментированный, чтобы
   читался как два вида ОДНОГО списка, а не как два разных раздела. */
.people-scope { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.people-scope-btn {
  background: #fff; border: 0; padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.people-scope-btn + .people-scope-btn { border-left: 1px solid var(--line); }
.people-scope-btn:hover { background: #f8fafc; }
.people-scope-btn.active { background: #eef2ff; color: var(--brand-dark); }
.people-tools { margin-top: 2px; }
.people-tools .row.create { max-width: 980px; }
.org-branch-filter { align-items: flex-end; max-width: 720px; }
.org-branch-filter > .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .people-scope { width: 100%; } .people-scope-btn { flex: 1 1 0; } }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 18px 0 8px; }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv span:first-child { color: var(--muted); }

/* ---------- ПУТЬ (маршрут по воронкам) ---------- */
.path { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px; }
.path-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.path-bar { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), #93c5fd); margin-bottom: 12px; }
.path-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.path-node { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.path-node.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79, 70, 229, .15); }
.path-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.path-node.current .path-dot { background: var(--brand); }
.path-name { font-weight: 600; font-size: 13px; }
.path-pipe { font-size: 10px; color: var(--muted); }
.path-date { font-size: 11px; color: var(--muted); }
.path-arrow { color: var(--muted); font-size: 14px; }

/* ---------- Заметки ---------- */
/* ---------- Lead modal: two-column layout with a right-side Notes panel ---------- */
.modal.lead-modal { max-width: 940px; }
.lead-layout { display: flex; gap: 18px; align-items: stretch; }
.lead-main { flex: 1 1 auto; min-width: 0; }

.notes-panel {
  flex: 0 0 300px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe;
  min-height: 420px; align-self: stretch;
}
.notes-head { font-weight: 700; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notes-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.notes-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; margin: auto 0; }
.note-item { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.note-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.note-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.note-add-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.note-add-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.note-add-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
/* Раньше была тёмно-серой, выпадала из фирменной индиго-палитры (.btn уже
   индиго по умолчанию) — просто убираем переопределение цвета. */
.note-add { white-space: nowrap; }

@media (max-width: 760px) {
  .lead-layout { flex-direction: column; }
  .notes-panel { flex-basis: auto; min-height: 300px; }
}

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.activity li .t { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 88px; }
.activity li .act-ico { flex: 0 0 auto; }
.activity li .act-main { flex: 1; }
.activity li .act-by { margin-left: 6px; font-size: 12px; }
.activity li .act-by::before { content: "· "; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: #f8fafc; border-radius: 20px; padding: 4px 10px; font-size: 12px; }

.stepper { display: flex; gap: 8px; margin-bottom: 16px; }
.step { flex: 1; text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.step.active { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.step.done { color: var(--ok); border-color: var(--ok); }

table.preview { width: 100%; border-collapse: collapse; font-size: 12px; }
table.preview th, table.preview td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.preview th { background: #f1f5f9; }

/* ---------- Import: custom fields + templates ---------- */
.custom-fields { display: flex; flex-direction: column; gap: 8px; }
.custom-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.tpl-list { margin-top: 14px; }
.tpl-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; }
.tpl-row.sel { border-color: var(--brand); background: #eef2ff; }
.tpl-row .tpl-name { flex: 1; font-weight: 600; font-size: 14px; }

/* ---------- Отчёт обзвона (admin) ---------- */
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cr-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.cr-tile b { font-size: 22px; line-height: 1.1; }
.cr-tile span { font-size: 12px; color: var(--muted); }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; font-size: 14px; }

/* ---------- Lead fields manager (admin) ---------- */
.fields-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.field-row input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; width: 100%; }
.field-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }

/* ---------- Stats / сводка ---------- */
/* auto-fit вместо жёстких 4 колонок: карточка автодозвона использует те же
   .stat-tiles, и при 4 плитках в узком контейнере они раньше сплющивались. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat-tile {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px 16px 20px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand)); }
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c7d2fe; }
.stat-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.stat-meta { min-width: 0; }
/* Число — крупная доминанта плитки; подпись под ним капсом помельче, чтобы
   пара «значение + что это» читалась сверху вниз одним движением глаза. */
.stat-val { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stat-tile.danger { --accent: var(--danger); border-color: #fecaca; background: #fff7f7; }
.stat-tile.danger .stat-val { color: var(--danger); }

/* чипы активности за день — цветная точка на тип действия */
.chip.act { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
.chip.act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }
.chip.act b { font-variant-numeric: tabular-nums; margin-left: 2px; }

/* бары «сделки по статусам» */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 152px 1fr 78px; gap: 12px; align-items: center; }
.bar-row:hover .bar-fill { filter: brightness(.93); }
.bar-label { font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef2f7; border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; min-width: 3px; border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--text); }
.bar-pct { display: inline-block; margin-left: 6px; font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--muted); }

/* таблица операторов */
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th, .stat-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; }
/* Шапка липнет при прокрутке длинного списка операторов — иначе на середине
   таблицы уже не видно, какой столбец что означает. */
.stat-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: #fff; z-index: 1; }
.stat-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table th.num { text-align: right; }
.stat-table td.num.strong { font-weight: 800; color: var(--brand); }
.stat-table .small { font-size: 12px; }
.stat-table tbody tr { transition: background .12s var(--ease); }
.stat-table tbody tr:hover { background: #f8fafc; }
.stat-table tbody tr.top td { background: #eef2ff; }
.stat-table tbody tr:last-child td { border-bottom: none; }
.op-cell { display: flex; align-items: center; gap: 10px; }
.op-cell .avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
/* Место в рейтинге: раньше топ-3 отмечались эмодзи-медалями (единственные
   растровые глифы в таблице). Теперь цифра в кружке, у призовых мест —
   своя окраска: золото / серебро / бронза. */
.op-rank {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.op-rank.rank-1 { background: #fef3c7; color: #92400e; box-shadow: inset 0 0 0 1px #fcd34d; }
.op-rank.rank-2 { background: #f1f5f9; color: #475569; box-shadow: inset 0 0 0 1px #cbd5e1; }
.op-rank.rank-3 { background: #ffedd5; color: #9a3412; box-shadow: inset 0 0 0 1px #fdba74; }
.act-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.act-num { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.mini-track { width: 88px; height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.mini-fill { height: 100%; background: linear-gradient(90deg, var(--brand), #818cf8); border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }

/* Сводка как отдельный экран */
.stats-view { padding: 20px; overflow-y: auto; min-height: calc(100vh - 56px); }
/* Шапка: слева «назад + заголовок», справа сгруппированные инструменты
   (период / заливки / выгрузка-обновление). Раньше всё шло одной сплошной
   лентой кнопок вперемешку с заголовком — не за что зацепиться глазу.
   Липнет к верху: при прокрутке длинной сводки переключатель дня и
   «Обновить» остаются под рукой. */
.stats-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
  background: #f1f5f9; padding: 4px 0 12px;
}
.stats-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stats-head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* Выбор заливок в шапке: имена файлов бывают длинными («Самарканд ЯНВАРЬ №2
   491.xlsx · 23.07.2026 · 461 шт.») и распирали панель на пол-экрана.
   Ограничиваем ширину — подпись сама обрежется с многоточием (.msel-label). */
.stats-head-tools .msel { width: 240px; flex: 0 0 auto; }
.stats-head .spacer { flex: 1; }
.stats-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 8px; }
/* Переключатель дня — единый сегмент «◀ дата ▶» вместо трёх независимых
   кнопок вразнобой: сразу читается как один орган управления периодом. */
.stats-daynav { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.stats-daynav-btn {
  display: grid; place-items: center; width: 30px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease);
}
.stats-daynav-btn:hover:not(:disabled) { background: #f1f5f9; color: var(--text); }
.stats-daynav-btn:disabled { opacity: .35; cursor: default; }
.stats-daynav-btn .ico.flip { transform: rotate(180deg); }
.stats-daynav .stats-date { border: none; border-radius: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.stats-date { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; background: #fff; }
.stats-date:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
/* «Сегодня» при выбранной текущей дате — подсвечен как активный фильтр */
.btn.ghost.is-active { background: var(--brand-soft); border-color: #c7d2fe; color: var(--brand-dark); }
.stats-body { max-width: 1240px; display: flex; flex-direction: column; gap: 16px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 16px; align-items: start; }
.stats-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stats-card-head { font-weight: 700; font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.stats-card-head .ico { color: var(--muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 8px; text-align: center; }
.es-ico { color: #cbd5e1; }

/* ---------- Экран «Операторы» (живые статусы WFM) ---------- */
/* Полоса состояния синхронизации. Три вида: всё хорошо, данные устарели,
   синхронизация выключена — цветом, а не только текстом, чтобы «устарело»
   было видно боковым зрением, не вчитываясь. */
.op-syncbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 9px 14px; margin-bottom: 16px; border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--line);
}
.op-syncbar.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.op-syncbar.stale { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.op-syncbar.off { background: #f8fafc; color: var(--muted); }
.op-syncerr { color: var(--danger); font-weight: 500; }
.op-unlinked { margin-left: auto; color: var(--muted); font-weight: 600; }

.op-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.op-row {
  display: grid; grid-template-columns: 40px 1fr auto auto 118px;
  align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow-sm);
}
.op-ava {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: 12.5px;
}
.op-name { font-weight: 600; font-size: 14px; }
.op-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* Подпись статуса из самого WFM («Обед») — второстепенная относительно
   статуса CRM справа, поэтому приглушена. */
.op-raw { font-size: 12.5px; color: var(--muted); }
.op-since { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.op-badge {
  justify-self: end; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* На телефоне «сколько уже в статусе» и подпись WFM уходят: имя и сам
     статус важнее, а в пять колонок строка не влезает. */
  .op-row { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 9px 11px; }
  .op-raw, .op-since { display: none; }
  .stats-view { padding: 12px; }
  .bar-row { grid-template-columns: 96px 1fr 62px; gap: 8px; }
  .mini-track { width: 48px; }
  /* На телефоне шапка занимала пол-экрана: заголовок, «назад» и 6 инструментов
     в столбик. Прячем дублирующий заголовок (раздел и так открыт из меню),
     инструменты пускаем в одну прокручиваемую строку. */
  .stats-head { gap: 8px; padding: 2px 0 10px; }
  .stats-title { font-size: 18px; }
  .stats-head-tools { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .stats-head-tools > * { flex: 0 0 auto; }
  /* Плитки: значение над подписью, компактнее по высоте */
  .stat-tile { padding: 12px 12px 12px 14px; gap: 10px; border-radius: var(--radius); }
  .stat-ico { width: 36px; height: 36px; border-radius: 10px; }
  .stat-val { font-size: 22px; }
  .stat-lbl { font-size: 10px; margin-top: 4px; }
  .stats-card { padding: 14px; border-radius: var(--radius); }
  /* Таблица операторов на узком экране: компактнее ячейки, чтобы влезала
     без агрессивного горизонтального скролла */
  .stat-table th, .stat-table td { padding: 9px 8px; }
  .op-cell { gap: 7px; }
  .op-cell .avatar { width: 26px; height: 26px; }
}
/* поле с вариантами (Регион и т.п.): имя+кнопки сверху, textarea со значениями снизу */
.field-row.col { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.field-row.col .row input { flex: 1; }
.opts { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; font-family: inherit; font-size: 13px; resize: vertical; }
.opts:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }

/* Справочник: таблица значений (статус, даты создания/обновления/удаления, действия) */
.cat-add { margin-top: 10px; }
/* только горизонтальный скролл при узкой модалке; по вертикали прокручивается
   сама модалка (.modal), иначе получались два скроллбара рядом */
.cat-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-table th, .cat-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.cat-table th { color: var(--muted); font-size: 12px; font-weight: 600; }
.cat-table tbody tr:last-child td { border-bottom: none; }
.cat-table td.cat-name { white-space: normal; min-width: 160px; }
.cat-table tr.deleted { opacity: .55; }
.cat-num { color: var(--muted); }
.cat-date { color: var(--muted); }
.cat-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cat-status.on { background: rgba(22,163,74,.16); color: #22c55e; cursor: pointer; }
.cat-status.off { background: rgba(148,163,184,.18); color: #94a3b8; cursor: pointer; }
.cat-status.del { background: rgba(239,68,68,.15); color: #ef4444; }
.cat-actions { display: flex; gap: 6px; }

/* Экспорт справочников в другую организацию: список чекбоксов */
.exp-cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.exp-cat-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.exp-cat-row input[type="checkbox"] { width: auto; flex: none; }
.exp-all { margin-bottom: 6px; }

/* Свой выпадающий список с поиском (searchableSelect) — цвета из переменных темы,
   чтобы совпадало с полями формы (в т.ч. под Chrome force-dark). */
.ss { position: relative; }
.ss-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(2,6,23,.22); padding: 4px; }
.ss-menu.hidden { display: none; }
.ss-opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); white-space: normal; }
.ss-opt:hover, .ss-opt.active { background: rgba(79,70,229,.12); }
.ss-opt.sel { font-weight: 600; }
.ss-empty { padding: 8px 10px; }
/* строки редактора статусов */
.status-row { display: flex; align-items: center; gap: 8px; }
.status-row input:not(.color-inp) { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.status-row input:not(.color-inp):focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.color-inp { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; flex: 0 0 auto; }
/* группы чекбоксов (мультивыбор в «Распределить») */
.chk-group { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--brand); }

/* мультивыбор выпадающей панелью (кнопка + чекбоксы по клику, как flt-sel) */
.msel { position: relative; }
.msel-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.msel-trigger:hover { border-color: #cbd5e1; }
.msel-trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.msel.open .msel-trigger { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.msel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-caret { color: var(--muted); font-size: 11px; flex: 0 0 auto; transition: transform .14s ease; }
.msel.open .msel-caret { transform: rotate(180deg); }
.msel-panel {
  /* left+right (не width:max-content) — иначе ellipsis на подписях (см. ниже)
     обнуляет их "естественную" ширину и панель схлопывается в узкую колонку */
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 6; min-width: 200px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  padding: 8px; max-height: 220px; overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.msel.open .msel-panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .14s ease, transform .14s ease;
}
/* .chk строки внутри панели — это <label>, а глобальное правило «.field label»
   иначе делает их display:block и это конфликтует с чекбоксом-и-подписью в ряд;
   фиксируем раскладку явно, чтобы не зависеть от порядка каскада */
.msel-panel label.chk {
  display: flex !important; align-items: center; gap: 8px; justify-content: flex-start;
  width: 100%; margin: 0; padding: 7px 8px; border-radius: 6px; line-height: 1.3;
}
.msel-panel label.chk:hover { background: #f8fafc; }
.msel-panel label.chk:focus-within { background: #eef2ff; }
/* реальный чекбокс остаётся в разметке (состояние + доступность с клавиатуры),
   но визуально не показываем квадратик — вместо него текст пункта + галочка,
   как выбор в обычном выпадающем списке (см. «Воронка»), а не форма-чекбокс */
.msel-panel .msel-real-cb {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0; clip: rect(0, 0, 0, 0);
}
.msel-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-check {
  flex: 0 0 auto; width: 14px; color: var(--brand); font-weight: 700; font-size: 13px;
  opacity: 0; transform: scale(.5); transition: opacity .1s ease, transform .1s ease;
}
.msel-real-cb:checked ~ .msel-check, .msel-real-cb:indeterminate ~ .msel-check { opacity: 1; transform: scale(1); }
.msel-real-cb:checked ~ .msel-text { color: var(--brand); font-weight: 600; }
.msel-all { padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
/* выбор колонок оператора */
.stage-pick { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fbfcfe; }
.sp-pipe-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.sp-pipe:not(:first-child) { border-top: 1px dashed var(--line); padding-top: 8px; }

.toast-wrap { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--bg); color: #fff; padding: 11px 15px; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(2,6,23,.35); font-size: 13px; max-width: 320px;
  animation: slidein .18s ease;
}
.toast.ok { background: #14532d; }
.toast.err { background: #7f1d1d; }
/* сообщение в чате — единственный тип уведомления, на который человек должен
   ответить, поэтому у него неоновая рамка, а не просто цветной фон */
.toast.neon { --neon: 56, 189, 248; border: 1px solid rgba(56, 189, 248, .8); animation: slidein .18s ease, neonFlash 1.2s ease-out 2; }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.muted { color: var(--muted); }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }

/* ---------- Deals count pill (topbar) ---------- */
/* ---------- Пилюли топ-бара — общая база ----------
   Раньше deals/overdue/notask/lockouts были почти дословными копиями друг
   друга (одинаковый border-radius/padding/font, чуть разные цвета) — теперь
   общее в одном месте, а модификаторы ниже задают только цвет/поведение. */
.deals-pill, .overdue-pill, .notask-pill, .lockouts-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.deals-pill { background: var(--bg-soft); color: #e2e8f0; border: 1px solid #475569; }

.overdue-pill { background: #7f1d1d; color: #fff; border: 1px solid #b91c1c; cursor: pointer; animation: pulseGlow 2s infinite; }
.overdue-pill:hover { background: #991b1b; }
.overdue-pill b { font-size: 14px; }
.overdue-pill.active { background: #dc2626; border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2626; animation: none; }
.overdue-pill.active::after { content: "✕"; margin-left: 4px; opacity: .85; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.notask-pill { background: #334155; color: #fff; border: 1px solid #475569; cursor: pointer; }
.notask-pill:hover { background: #1e293b; }
.notask-pill b { font-size: 14px; }
.notask-pill.active { background: var(--brand); border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.notask-pill.active::after { content: "✕"; margin-left: 4px; opacity: .85; }

/* Заблокированные входы — точка входа ВСЕГДА на виду в топ-баре (не спрятана
   в ☰ Меню и не скрывается при нуле блокировок, в отличие от overdue/notask —
   так и было явно попрошено: «видилась дефолтна»). Нейтральный вид, пока
   блокировок нет; красный + pulseGlow (как у просрочки), когда кого-то
   реально держит — .has-lockouts переключает refreshLockoutsBadge(). */
.lockouts-pill { background: var(--bg-soft); color: #e2e8f0; border: 1px solid #475569; cursor: pointer; }
.lockouts-pill:hover { background: #1e293b; }
.lockouts-pill b { font-size: 14px; }
.lockouts-pill.has-lockouts {
  background: #7f1d1d; border-color: #b91c1c; animation: pulseGlow 2s infinite;
}
.lockouts-pill.has-lockouts:hover { background: #991b1b; }

/* ============================================================
   НЕОН УВЕДОМЛЕНИЙ — единый механизм на все каналы связи.
   Цвет задаётся переменной --neon (RGB-компоненты через запятую), анимация
   общая: так эффект одинаково узнаваем и на тёмной шапке, и на светлом
   контенте, а меняется только оттенок под фон. Перекликается с неоновой
   кнопкой входа (.btn-water) — это уже «фирменное» свечение проекта.
   ============================================================ */
/* Вспышка В МОМЕНТ прихода сообщения: волна расходится и гаснет. Сознательно
   НЕ бесконечная — оператор сидит в системе весь день, и вечно мигающий бейдж
   он начинает игнорировать (а к вечеру и раздражаться). Внимание привлекает
   момент события, дальше работает спокойное статичное свечение-состояние. */
@keyframes neonArrive {
  0%   { box-shadow: 0 0 0 0 rgba(var(--neon), .75), 0 0 26px rgba(var(--neon), .95); }
  100% { box-shadow: 0 0 0 12px rgba(var(--neon), 0), 0 0 14px rgba(var(--neon), .5); }
}
/* Одноразовая вспышка для того, что живёт недолго само по себе: найденный текст
   и всплывающее уведомление. */
@keyframes neonFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--neon), .7), 0 0 24px rgba(var(--neon), .9); }
  100% { box-shadow: 0 0 0 10px rgba(var(--neon), 0), 0 0 6px rgba(var(--neon), 0); }
}

/* ---------- Chat pill + dropdown (топ-бар, только у супервайзера) ---------- */
.chat-pill-wrap { position: relative; }
.chat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff; border: 1px solid var(--brand-dark);
  border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-pill:hover { background: var(--brand-dark); }
.chat-pill b { font-size: 14px; }
/* Непрочитанное ОТ ОПЕРАТОРА (видит супервайзер/админ). Голубой, а не прежний
   красный pulseGlow: пилюля сама фиолетовая, а красное кольцо на ней читалось
   как ошибка. Голубой ещё и заметнее на тёмном фоне шапки.
   Состояние «есть непрочитанное» — статичное свечение; вспышку даёт класс
   neon-arrive, который JS вешает ровно на момент прихода сообщения. */
.chat-pill.has-unread { --neon: 56, 189, 248; border-color: #7dd3fc; box-shadow: 0 0 0 2px rgba(var(--neon), .28), 0 0 14px rgba(var(--neon), .55); }
.chat-pill.has-unread.neon-arrive { animation: neonArrive 1.4s ease-out 2; }
.chat-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.22); padding: 6px;
}
.chat-dd-empty { padding: 16px 10px; text-align: center; }
.chat-dd-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 10px; cursor: pointer; transition: background .12s var(--ease); }
.chat-dd-item:hover { background: #f1f5f9; }
.chat-dd-item.unread { background: #eef2ff; }
.chat-dd-main { flex: 1; min-width: 0; }
.chat-dd-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.chat-dd-org { font-size: 11.5px; margin-top: 1px; color: var(--muted); }
/* Текст последнего сообщения — раньше был .muted (#64748b на белом, едва
   проходит по контрасту и мелким кеглем читался плохо, особенно на непрочитанном
   входящем от оператора). Прочитанное чуть темнее обычного muted, непрочитанное —
   почти чёрным и полужирным, чтобы новое сообщение реально бросалось в глаза. */
.chat-dd-preview { font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.chat-dd-item.unread .chat-dd-preview { color: var(--text); font-weight: 600; }
.chat-dd-badge { flex: 0 0 auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 7px; }

/* Кнопка «Написать оператору» — закреплена сверху дропдауна, отделена от
   списка тредов линией снизу (свой фон, чтобы не путалась с обычными
   .chat-dd-item). */
.chat-dd-compose {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--brand-soft); color: var(--brand-dark); border: none;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .12s var(--ease);
}
.chat-dd-compose:hover { background: #e0e7ff; }

/* ---------- Колокольчик уведомлений о новых сделках (топ-бар) ----------
   Янтарный, а не голубой как у чата: два источника уведомлений в одной шапке
   должны различаться боковым зрением, иначе оператор не понимает, что мигнуло —
   сообщение супервайзера или новая сделка. Свечение и вспышка переиспользуют
   ту же переменную --neon и @keyframes neonArrive, что и чат. */
.notif-pill-wrap { position: relative; }
.notif-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #b45309; color: #fff; border: 1px solid transparent;
  border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.notif-pill:hover { background: #92400e; }
.notif-pill b { font-size: 14px; }
.notif-pill.has-unread { --neon: 251, 191, 36; border-color: #fcd34d; box-shadow: 0 0 0 2px rgba(var(--neon), .28), 0 0 14px rgba(var(--neon), .55); }
.notif-pill.has-unread.neon-arrive { animation: neonArrive 1.4s ease-out 2; }

/* Тревога: время на первый контакт вышло, отсчёт пошёл в минус.
   Красный намеренно перебивает жёлтое свечение has-unread: уведомление о
   просрочке приходит ровно тогда, когда тревога и должна быть видна, и обычное
   «есть непрочитанное» её бы перекрыло. Отсюда второй селектор — равная
   специфичность плюс позиция ниже по файлу. */
.notif-pill.sla-alarm,
.notif-pill.sla-alarm.has-unread {
  --neon: 220, 38, 38;
  background: #dc2626;
  border-color: #fca5a5;
  animation: slaAlarm 1.1s ease-in-out infinite;
}
.notif-pill.sla-alarm:hover { background: #b91c1c; }
@keyframes slaAlarm {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, .35), 0 0 16px rgba(220, 38, 38, .60); }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, .12), 0 0 26px rgba(220, 38, 38, .95); }
}

.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.22); padding: 6px;
}
.notif-dd-empty { padding: 16px 10px; text-align: center; }
.notif-item { padding: 10px; border-radius: 10px; cursor: pointer; transition: background .12s var(--ease); }
.notif-item:hover { background: #f1f5f9; }
.notif-item.unread { background: #fffbeb; }
/* Организация — крупно и первой строкой: ради неё уведомление и существует,
   оператор должен видеть источник, не открывая карточку. */
.notif-org { font-weight: 700; font-size: 13.5px; color: var(--text); }
.notif-title { font-size: 12.5px; margin-top: 2px; color: #475569; }
.notif-item.unread .notif-title { color: var(--text); font-weight: 600; }
.notif-time { font-size: 11.5px; margin-top: 3px; }
/* Подсказка «включить уведомления браузера» — сверху, как «Написать оператору» */
.notif-dd-ask {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fef3c7; color: #92400e; border: none;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .12s var(--ease);
}
.notif-dd-ask:hover { background: #fde68a; }
.notif-dd-clear {
  display: block; width: 100%; text-align: center; margin-top: 6px;
  background: transparent; border: none; border-top: 1px solid var(--line);
  padding: 9px 10px 4px; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.notif-dd-clear:hover { color: var(--text); }

/* Список операторов в модалке «Написать оператору» */
.compose-op-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.compose-op-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease);
}
.compose-op-row:hover { background: #f8fafc; border-color: var(--line); }
.compose-op-meta { display: flex; flex-direction: column; min-width: 0; }
.compose-op-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.compose-op-email { font-size: 12px; }

/* ---------- Card: due line + overdue state ---------- */
.card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.card .due {
  margin-top: 7px; font-size: 12px; color: var(--info); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.card .due.over { color: var(--danger); }
.card .due-text { flex: 1; min-width: 0; }
/* «✓» — закрыть перезвон, не открывая сделку. Кнопка маленькая и появляется
   заметнее при наведении на карточку, чтобы не спорить со строкой срока */
.card-task-done {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--muted); font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.card-task-done:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.card-task-done:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.card.overdue .card-task-done { border-color: #fecaca; color: var(--danger); }
.card.overdue .card-task-done:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.card.overdue {
  border-color: #fecaca;
  border-left: 4px solid var(--danger);
  background: #fff5f5;
}
/* лид с назначенной задачей-перезвоном: синий акцент слева + часы в углу */
.card.has-task { border-left: 4px solid var(--info); }
.card-clock { position: absolute; top: 8px; right: 9px; color: var(--info); line-height: 0; pointer-events: none; }
.card-clock.over { color: var(--danger); }
.card-clock svg { display: block; width: 15px; height: 15px; }
.card.has-task .name, .card.overdue .name { padding-right: 18px; }
/* «светофор» в левом верхнем углу: красный — просрочена, жёлтый — есть задача
   (в срок), зелёный — новый лид, синий — не новый и без задачи */
.card-dot { position: absolute; top: 13px; left: 11px; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }
.card-dot.dot-red { background: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
.card-dot.dot-yellow { background: var(--warn); box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
.card-dot.dot-green { background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.card-dot.dot-blue { background: var(--info); box-shadow: 0 0 0 3px rgba(8, 145, 178, .16); }
.card .name { padding-left: 15px; }
/* иконка Telegram в правом верхнем углу карточки (левее часов, если они есть) */
.card-tg { position: absolute; top: 6px; right: 9px; color: #229ED9; line-height: 0; pointer-events: none; }
.card-tg svg { display: block; width: 16px; height: 16px; }
.card.has-task .card-tg, .card.overdue .card-tg { right: 30px; }
.card.tg-sent .name { padding-right: 24px; }
.card.tg-sent.has-task .name, .card.tg-sent.overdue .name { padding-right: 46px; }

/* ---------- Overdue column ---------- */
.column.overdue-col { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; }
.column.overdue-col h3 { color: #b91c1c; }
.column.overdue-col h3 .n { background: #fecaca; color: #7f1d1d; }
.column.pulse { animation: colPulse 1.5s ease; }
@keyframes colPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px #fecaca; }
  30% { box-shadow: 0 0 0 4px rgba(220,38,38,.35), inset 0 0 0 1px #fecaca; }
}

/* ---------- Drag & drop ---------- */
body.dragging-active { cursor: grabbing; touch-action: none; user-select: none; }
body.dragging-active .card { cursor: grabbing; }
.card.drag-src { opacity: .35; }
.drag-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  width: 260px; transform: rotate(-2deg);
  box-shadow: 0 12px 30px rgba(2,6,23,.35);
  border-color: var(--brand) !important;
}
.column.drop-hi { outline: 2px dashed var(--brand); outline-offset: -2px; background: #eef2ff; }

/* ---------- Pipeline drop bar (appears while dragging a card) ---------- */
.pipeline-dropbar {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 210; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg); color: #fff; padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .45); max-width: 92vw;
  animation: slidein .15s ease;
}
.pipeline-dropbar .pdb-label { font-size: 13px; color: #cbd5e1; }
.pipe-drop {
  background: var(--bg-soft); border: 1px dashed #475569; color: #e2e8f0;
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
}
.pipe-drop.drop-hi { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.05); }

/* ---------- Lead modal: overdue banner + task list ---------- */
.od-banner {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.tasklist { list-style: none; margin: 0 0 6px; padding: 0; }
.tasklist li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; font-size: 13px;
}
.tasklist li.over { border-color: #fecaca; background: #fff5f5; }
.od-tag {
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 20px; padding: 1px 8px; margin-left: 8px; text-transform: uppercase;
}
.taskadd { margin-top: 6px; }
.task-when-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.task-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-btn {
  border: 1px solid var(--line); background: #f8fafc; color: var(--text);
  border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip-btn:hover { background: #eef2ff; border-color: var(--brand); color: var(--brand-dark); }
.task-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.task-due-wrap { display: flex; flex-direction: column; gap: 3px; }
.task-due, .task-note {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff;
}
.task-due:focus, .task-note:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.task-due { min-width: 190px; }
.task-note { flex: 1; min-width: 180px; }
.task-hint { font-size: 12px; color: var(--brand-dark); font-weight: 600; padding-left: 2px; min-height: 14px; }
.task-hint:empty { display: none; }
/* ---------- Булева настройка: подпись + переключатель ----------
   Одна кликабельная строка вместо прежних двух этажей («заголовок» сверху,
   чекбокс со словом «включено» снизу): у булева значения не бывает отдельного
   заголовка и отдельного значения — это одно и то же. */
.checkfield {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 10px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.checkfield:hover { border-color: #c7d2fe; background: #fafbff; }
.checkfield:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.checkfield-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.checkfield-label { font-size: 14px; color: var(--text); line-height: 1.4; }
/* пояснение живёт внутри своей настройки, а не отдельным абзацем под формой —
   так видно, к чему оно относится */
.checkfield-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* в двухколоночной сетке (мастер импорта) вертикальный отступ задаёт сама сетка */
.grid2 .checkfield { margin-bottom: 0; }

/* сам переключатель: нативный checkbox, перерисованный через appearance:none —
   состояние и работа с клавиатуры остаются штатными */
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: #cbd5e1; border: none; cursor: pointer; transition: background .18s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: transform .18s;
}
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
/* поля внутри .field растягиваются на всю ширину — переключателю это не нужно */
.field .switch, .checkfield .switch { width: 40px; height: 22px; padding: 0; }

/* ---------- Users list ---------- */
.userlist { list-style: none; margin: 10px 0 0; padding: 0; }
.userlist li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.userlist .avatar { width: 34px; height: 34px; font-size: 13px; flex: 0 0 auto; }
.userlist .u-main { flex: 1; min-width: 0; }
.userlist .u-name { font-weight: 600; font-size: 14px; }
.userlist .u-login { font-size: 12px; }
.role-badge { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.role-badge.admin { background: #e0e7ff; color: #3730a3; }
.role-badge.operator { background: #dcfce7; color: #166534; }
.role-badge.supervisor { background: #fef3c7; color: #92400e; }
.role-badge.service_owner { background: #ecfeff; color: #0e7490; }
.role-badge.off { background: #fee2e2; color: #991b1b; }

/* Владелец услуги смотрит на доску, но ничего с неё не запускает: пилюли
   «Просрочено»/«Без задач» ведут к массовым действиям (кнопки в .toolbar),
   выгрузка и чат ему закрыты и на сервере. Кнопки прячем и здесь — на случай,
   когда фильтр включён не кликом по пилюле, а deep-link'ом #overdue. */
body.role-service-owner #overdue-pill,
body.role-service-owner #overdue-export-btn,
body.role-service-owner #notask-pill,
body.role-service-owner #bulk-noanswer-btn,
body.role-service-owner #bulk-done-btn,
body.role-service-owner .chat-pill-wrap { display: none !important; }

.owner-scripts { display: flex; flex-direction: column; gap: 8px; }
.owner-script { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.owner-script-name { font-weight: 600; }
.userlist li.inactive { opacity: .62; }
.userlist .u-badges { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.userlist .u-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.userlist .u-actions .btn.small { padding: 6px 9px; }
.userlist .u-confirm { flex: 1; font-size: 13px; font-weight: 600; color: var(--danger); }

/* ---------- Import history ---------- */
.import-help { margin: 8px 0 14px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.import-help li { margin-bottom: 4px; }
.import-help b { color: var(--text); font-weight: 600; }
.importlist { list-style: none; margin: 12px 0 0; padding: 0; }
.importlist li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.importlist .imp-main { flex: 1 1 auto; min-width: 220px; }
.importlist .imp-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importlist .imp-meta { font-size: 12px; margin-top: 2px; }
/* бейдж + кнопки строки — отдельная группа, которая переносится сама по себе
   (несколько кнопок в ряд не помещаются рядом с текстом даже на десктопе —
   раньше весь дефицит ширины забирал текстовый блок и слова расползались) */
.importlist .imp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; flex: 0 1 auto; }
.imp-count {
  background: #e0e7ff; color: #3730a3; font-size: 12px; font-weight: 700;
  border-radius: 20px; padding: 3px 11px; white-space: nowrap; flex: 0 0 auto;
}
.imp-confirm { flex: 1; font-size: 13px; font-weight: 600; color: var(--danger); }
.importlist .imp-chk { width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; accent-color: var(--brand); }
.importlist li.imp-hidden { background: #fffbeb; border-color: #fde68a; }   /* скрытые у операторов — жёлтый фон */
.importlist li.imp-hidden-all { background: #fee2e2; border-color: #fecaca; }   /* скрытые ото всех — красноватый фон */

/* ---------- Диалог экспорта (точечные фильтры) ---------- */
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 6px 0 4px; }
.export-grid .field { margin-bottom: 0; }
.export-grid .flt-sel, .export-grid input { width: 100%; max-width: none; }
.export-count { margin-top: 12px; font-size: 14px; font-weight: 600; }
.export-count.ok { color: var(--ok); }
@media (max-width: 640px) { .export-grid { grid-template-columns: 1fr; } }

/* ---------- Pipeline stage editor ---------- */
.stage-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.stage-row { display: flex; align-items: center; gap: 6px; }
.stage-handle {
  flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #f1f5f9; border-radius: 6px;
}
.stage-name {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; outline: none; background: #fff;
}
.stage-name:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.stage-row .btn.small { padding: 6px 9px; }

/* ============================================================
   Мобильная адаптация (телефон ≤640px). Десктоп не меняется.
   ============================================================ */
@media (max-width: 640px) {
  /* поля 16px — iOS не зумит при фокусе */
  input, select, textarea { font-size: 16px; }

  /* приложение — колонка на весь экран телефона: шапка/тулбар/фильтр сверху,
     доска забирает оставшуюся высоту и скроллится ВНУТРИ себя (страница не
     превращается в бесконечную «простыню» при большом числе карточек) */
  #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  header.topbar, .toolbar, .filterbar { flex: 0 0 auto; }

  /* топбар: тянется по высоте и переносится, компактные отступы */
  header.topbar { height: auto; min-height: 52px; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .topbar .logo { display: none; }                 /* бренд скрываем — экономим ширину */
  .topbar .spacer { display: none; }
  .topbar select { padding: 9px 10px; flex: 1 1 100%; max-width: none; min-width: 0; }
  .admin-org-filter { flex: 1 1 100%; }
  .admin-org-filter span { display: none; }
  .admin-org-filter select { width: 100%; max-width: none; min-width: 0; }
  .topbar .user { font-size: 12px; }
  .profile.clickable { padding: 4px 6px; }
  .profile-menu { left: 8px; right: 8px; min-width: 0; width: auto; max-height: 72vh; }

  /* тулбар и фильтры */
  .toolbar { padding: 10px 12px; gap: 6px; }
  .filterbar { padding: 8px 12px; }
  .flt-search, .flt-sel { flex: 1 1 100%; max-width: none; min-width: 0; }

  /* Раньше все фильтры (поиск + статус + оператор + заливка + колонка + доп.
     поля + диапазон дат + время + Сбросить + ☰ Меню) шли на телефоне сплошным
     списком на всю ширину — под шапкой не оставалось видно ни одной карточки
     доски без прокрутки. Теперь виден только поиск + тумблер «Фильтры» с
     бейджем количества активных; остальное — по тапу. */
  .filterbar-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex: 1 1 100%;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: var(--text); font-size: 13.5px; font-weight: 600;
  }
  .filterbar-toggle-badge { margin-left: auto; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
  .filterbar-extra { display: none; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; }
  .filterbar-extra.open { display: flex; }

  /* доска: горизонтальные страницы-колонки с прилипанием; каждая колонка
     скроллится сама по вертикали, а не тянет за собой всю страницу */
  .board {
    flex: 1 1 auto; min-height: 0;
    padding: 12px; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    align-items: stretch;
  }
  .column { flex: 0 0 88vw; height: 100%; max-height: none; scroll-snap-align: start; }
  .col-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .stats-view { flex: 1 1 auto; min-height: 0; padding: 12px; }

  /* панель «перенести в воронку» при перетаскивании — внизу, не под шапкой */
  .pipeline-dropbar { top: auto; bottom: 12px; }

  /* модалки почти на весь экран. Бэкдроп на телефоне — block (а не grid):
     иначе auto-трек грида растягивается под min-content модалки и она вылезает
     за экран. Block даёт модалке ширину = экран − отступы. */
  .modal-backdrop { padding: 8px; display: block; }
  .modal, .modal.wide, .modal.lead-modal { width: 100%; max-width: 100%; min-width: 0; max-height: 94vh; }
  .modal-body { padding: 14px; }
  .modal-head, .modal-foot { padding: 12px 14px; }
  .modal-foot { flex-wrap: wrap; }
  /* поле заметки + кнопка не помещаются в строку — переносим */
  .note-add-row { flex-wrap: wrap; }
  .note-add-row input { min-width: 0; }
  .note-add-row .note-add { flex: 1 1 100%; }

  /* формы и строки-редакторы в один столбец / с переносом */
  .grid2, .custom-row, .field-row { grid-template-columns: 1fr; }
  .status-row, .stage-row, .tpl-row, .row { flex-wrap: wrap; }
  .task-due, .task-note { flex: 1 1 100%; min-width: 0; }

  /* списки пользователей и импортов: действия переносятся вниз */
  .userlist li, .importlist li { flex-wrap: wrap; }
  .userlist .u-actions { flex: 1 1 100%; justify-content: flex-end; margin-top: 6px; }
  .importlist .imp-actions { flex: 1 1 100%; margin-top: 6px; }

  /* тач-таргеты покрупнее */
  .modal-head .x { padding: 4px 12px; font-size: 26px; }
  .btn.small, .pm-item, .chip-btn { min-height: 40px; }
  .chk input { width: 20px; height: 20px; }
  /* переключатель и так крупнее пальца — увеличиваем только строку под него */
  .checkfield { padding: 13px 14px; }
}

/* ---------- Неон: уважение к prefers-reduced-motion ----------
   Стоит в конце файла осознанно: медиазапрос не повышает специфичность, и если
   поставить блок раньше самих неоновых правил, они его перебьют по каскаду.
   Движение убираем, но уведомление должно остаться заметным — вместо пульсации
   даём статичное свечение той же яркости. */
@media (prefers-reduced-motion: reduce) {
  /* Селекторы с .neon-arrive — не забыть: у них специфичность выше, и правило
     без этого класса их анимацию не погасит. Статичное свечение «есть
     непрочитанное» остаётся: оно задано в базовых правилах и движения не даёт. */
  .chat-pill.has-unread.neon-arrive, .notif-pill.has-unread.neon-arrive, .help-fab.has-reply.neon-arrive, .toast.neon { animation: none; }
  /* Тревога о просроченном первом контакте: гасим мигание, но оставляем
     красный и свечение — сам сигнал терять нельзя. Второй селектор обязателен
     по той же причине, что и выше: без него правило проиграет по специфичности
     колокольчику, у которого есть и непрочитанное. */
  .notif-pill.sla-alarm, .notif-pill.sla-alarm.has-unread {
    animation: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .40), 0 0 18px rgba(220, 38, 38, .70);
  }
  mark.doc-hit.doc-hit-first { animation: none; box-shadow: 0 0 0 2px rgba(139, 92, 246, .85); }
}

/* Карточка «Word-шаблон формы» в конструкторе: список доступных меток.
   Метка кликабельна (копируется в буфер), поэтому выглядит как кнопка-код. */
.tpl-tags { display: grid; gap: 6px; margin: 8px 0 4px; max-height: 320px; overflow-y: auto; }
.tpl-tag-row { display: flex; align-items: baseline; gap: 10px; }
.tpl-tag {
  flex: 0 0 auto; cursor: pointer; user-select: all;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px;
  background: var(--chip, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; padding: 2px 7px; transition: background .12s, border-color .12s;
}
.tpl-tag:hover { background: #e0e7ff; border-color: #a5b4fc; }
.num-preview { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; margin: 6px 0 2px; }
.num-preview.ok { color: var(--ok, #16a34a); }
/* Поле, которое заполняет система (номер обращения, дата приёма): видно, что
   оно не редактируется, но значение читается наравне с остальными. */
.intake-auto { background: var(--chip, #f1f5f9); color: var(--muted, #64748b); cursor: default; }
.intake-auto-edit { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; background: #fff; }
.num-form-row { display: grid; gap: 6px; padding: 10px 0; }
.num-form-row + .num-form-row { border-top: 1px solid var(--border, #e2e8f0); }
.num-form-name { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.num-form-summary { margin: 6px 0 0; padding-left: 1.2em; }
.num-form-summary li { margin: 4px 0; }
/* Счётчик заявок, ждущих отправки в группу — у пункта «Заявки» в сайдбаре. */
.sb-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: var(--danger, #dc2626); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
/* Организация, скрытая от всех пользователей (видит только админ). Тот же
   чип — у заявки, скрытой супервайзером (видит тоже только админ). */
.org-hidden-chip, .app-hidden-chip { font-size: 11px; font-weight: 700; color: var(--danger, #dc2626);
  border: 1px solid currentColor; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
/* Строка скрытой заявки в списке (видна только админу) — приглушаем, чтобы
   не путалась с обычными действующими заявками. */
.app-row-hidden { opacity: .55; }
/* Инпут причины при скрытии заявки супервайзером — без ширины он тянется на
   всю доступную ячейку и вместе с кнопками вываливается за край таблицы. */
.app-hide-comment { width: 140px; }
.app-row-hidden:hover { opacity: .85; }

/* ---------- Правила «формы -> чаты» (Настройки → Интеграция) ---------- */
/* Строка правила: мультивыбор форм, поле чатов и кнопка удаления. На узком
   экране столбцы схлопываются в один — иначе поле chat_id сжимается до
   нечитаемой ширины и в него не видно, что вставили. */
.tg-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tg-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.tg-rule-forms, .tg-rule-chats { min-width: 0; }
.tg-rule-chats input { width: 100%; }
/* Кнопка «✕» квадратная и не растягивается по высоте строки. */
.tg-rule-del { padding: 8px 12px; line-height: 1; }
@media (max-width: 720px) {
  .tg-rule { grid-template-columns: minmax(0, 1fr) auto; }
  .tg-rule-forms { grid-column: 1 / -1; }
}

/* ---------- Раскрытие строки заявки (Arizalar) ---------- */
/* Стрелка стоит отдельной первой колонкой, а не в ячейке действий:
   restoreActions() пересобирает ту ячейку из жёсткого списка кнопок и стрелку
   бы стёрло после отмены удаления. */
.app-table th.app-expand-th, .app-table td.app-expand-td { width: 1%; padding-right: 0; }
.app-expand-btn { padding: 4px 6px; line-height: 0; color: var(--muted); }
.app-expand-btn.open { color: var(--brand); }
/* базовый chevron смотрит вправо, поэтому 90°, а не 180° как у .flip */
.app-expand-btn .ico { transition: transform .15s var(--ease); }
.app-expand-btn.open .ico { transform: rotate(90deg); }
/* Обязательно снимаем nowrap/max-width/ellipsis от .app-table td — иначе вся
   панель схлопнется в одну обрезанную строку с многоточием. */
.app-table td.app-detail-cell {
  white-space: normal; max-width: none; overflow: visible; text-overflow: clip;
  padding: 0 12px 12px; background: #f8fafc;
}
/* .app-table tbody tr:hover td подсветил бы панель отдельно от её строки —
   связь между ними визуально распадается. Правило специфичнее, чтобы победить. */
.app-table tbody tr.app-detail-row:hover td { background: #f8fafc; }
.app-detail-grid {
  display: grid; grid-template-columns: minmax(120px, 260px) minmax(0, 1fr);
  gap: 6px 14px; padding: 10px 12px; font-size: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.app-detail-k { color: var(--muted); }
.app-detail-k.orphan { font-style: italic; }   /* поля в форме уже нет — подпись = сырой ключ */
.app-detail-v { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Заметки и журнал — двумя колонками под ответами. */
.app-detail-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.app-detail-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.app-detail-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 6px;
}
.app-detail-note { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.app-detail-note:last-child { border-bottom: 0; }
.app-detail-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-detail-act { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.app-detail-act-name { font-weight: 600; }
.app-detail-act-note { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .app-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .app-detail-k { margin-top: 6px; }
  .app-detail-extra { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Google-таблица: сопоставление колонок ----------
   Строка на каждую колонку листа: слева заголовок и пример значения, справа —
   чем эта колонка является. Три селекта «поле → колонка», как было раньше, не
   позволяли сказать «а это не тащить», и лист Google Forms приезжал в карточку
   вместе со служебными колонками. */
.sheet-map-table {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
}
.sheet-map-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 190px;
  gap: 8px; align-items: center; padding: 8px 10px;
}
.sheet-map-row + .sheet-map-row { border-top: 1px solid var(--line); }
.sheet-map-row:nth-child(even) { background: var(--bg, #f8fafc); }
.sheet-map-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-map-col b { font-size: 13px; overflow-wrap: anywhere; }
.sheet-map-col .muted { font-size: 12px; overflow-wrap: anywhere; }
.sheet-map-name[hidden] { display: none !important; }
.sheet-map-preview { margin-top: 4px; }
.sheet-map-preview p { margin: 2px 0; font-size: 12px; }
@media (max-width: 720px) {
  .sheet-map-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- SLA: обратный отсчёт до первого контакта ----------
   Значение тикает раз в секунду одним общим таймером (paintSlaTimers в
   app.js); классы переключаются там же. Отрицательное время показывается со
   знаком «−» — просили видеть не «просрочено», а НАСКОЛЬКО просрочено. */
.sla { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }
.sla-ok { color: var(--ok, #16a34a); }
.sla-warn { color: #d97706; }
.sla-over { color: #dc2626; }
.sla-line { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; font-size: 12px; }
.sla-line .muted { font-size: 11px; }
/* пульсация только у просроченных: постоянное мигание на доске утомляет */
.card .sla-over { animation: sla-pulse 1.4s ease-in-out infinite; }
@keyframes sla-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .card .sla-over { animation: none; }
}

/* «Ждёт раздачи»: сделка приехала из таблицы, но на линии никого не было. */
.pending-chip {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}

/* Счётчик в топ-баре — рядом с «Просрочено» и «Без задач». */
.sla-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
}
.sla-pill.sla-over { border-color: #fecaca; background: #fef2f2; }
.sla-pill.sla-warn { border-color: #fed7aa; background: #fff7ed; }

/* Отсчёт в ленте уведомлений. */
.notif-sla { display: flex; align-items: baseline; gap: 4px; font-size: 12px; margin-top: 2px; }
.notif-sla .muted { font-size: 11px; }

/* ---------- Сводка: вкладки и отчёт по первому контакту ----------
   Три разреза одного вопроса «как работает смена», поэтому вкладки внутри
   экрана, а не три пункта меню. */
.stats-tabs { display: inline-flex; gap: 2px; margin-left: 12px; background: var(--bg, #f1f5f9); padding: 3px; border-radius: 10px; }
.stats-tab {
  border: 0; background: transparent; cursor: pointer; padding: 5px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.stats-tab.is-active { background: #fff; color: var(--text, #0f172a); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.stats-daynav-btn.is-active { background: var(--brand, #4f46e5); color: #fff; border-color: transparent; }

/* Четыре числа в строку: медиана, среднее, p90 и доля уложившихся. */
.sla-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sla-summary > div { display: flex; flex-direction: column; gap: 2px; }
.sla-summary b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sla-summary .muted { font-size: 12px; }
@media (max-width: 720px) {
  .sla-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-tabs { margin-left: 0; }
}

/* Строка лога переходов кликабельна — ведёт в сделку. */
.stat-table tr.row-click { cursor: pointer; }
.stat-table tr.row-click:hover td { background: var(--bg, #f8fafc); }

/* Отсчёт замер: смена кончилась, время не идёт (см. paintSlaTimers). */
.sla-paused { color: var(--muted); font-weight: 600; }