/* ClientsChat dev-тест-клиент — стиль. Ванильный CSS, без зависимостей.
   Тёмная тема, минимум декора: это QA-инструмент, не продакшн-UI. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --panel-3: #262b36;     /* поднятый слой: тултипы/меню/поповеры/undo-тост (раньше токен был
                             «битым» — инжекты/таймлайн падали в тёмный фолбэк даже в светлой) */
  --line: #2a2f3a;
  --line-strong: #353b48; /* границы контролов / hover-границы */
  --text: #e6e9ef;
  --muted: #8b93a3;
  --text-dim: #9aa4b2;    /* третичный текст (плейсхолдеры/мета) = бывший фолбэк в коде */
  --primary: #667eea;     /* индиго — старт фирменного градиента */
  --primary-2: #8b9cf5;   /* светлый акцент: имена/кольца/цитаты */
  --primary-hi: #7b8bf1;  /* hover primary-кнопки */
  --accent: #667eea;      /* = --primary. Раньше НЕ определён → cli/dir-оверлеи (поиск/
                             компании/клиенты) падали в случайный #5b8def. Гармонизирует. */
  /* 🔴 ЛЕГАСИ-АЛИАСЫ: инжектируемый CSS (co-/cli-/dir-/tip-/v2-/stf-) использует НЕсуществовавшие
     токены с хардкод-фолбэками → рассинхрон. Определение алиасов «самозалечивает» БЕЗ правки JS. */
  --border: var(--line);
  --input-bg: #141821;    /* поля УТОПЛЕНЫ относительно панели (были = --panel-2 — светлее панели,
                             читались как кнопки). Фокус «всплывает» до --panel (см. §3). */
  --surface: var(--panel);      /* алиас: staffEnsureStyles (.stf-*) юзал несуществующий токен */
  --surface2: var(--panel-2);   /* — тот же случай */
  --text-secondary: var(--muted);
  --grad: linear-gradient(135deg, #667eea, #764ba2);
  --glow: rgba(102,126,234,.4);
  /* Состояния (вместо россыпи случайных rgba) */
  --hover: rgba(230,233,239,.05);
  --active: rgba(230,233,239,.09);
  --sel: rgba(102,126,234,.16);
  /* Тени: плотные и короткие; в тёмной глубину держит цвет слоёв, тень — усилитель */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 4px 10px rgba(0,0,0,.38), 0 16px 32px -8px rgba(0,0,0,.5);
  --shadow-3: 0 8px 20px rgba(0,0,0,.45), 0 32px 72px -12px rgba(0,0,0,.6);
  --edge: inset 0 1px 0 rgba(255,255,255,.04);  /* верхний «блик» поднятых слоёв (только тёмная) */
  --scrim: rgba(8,10,16,.6);                    /* единый бэкдроп модалок */
  --danger: #ef4444;      --danger-soft: rgba(239,68,68,.14);
  --ok: #22c55e;          --ok-soft: rgba(34,197,94,.13);
  --warning: #e5a23c;     --warning-soft: rgba(229,162,60,.14);  /* раньше --warning был не определён */
  /* 🔴 ЗАЛИВКИ ГРАФИКИ ≠ ТЕКСТ. Семантические токены в светлой теме затемняются под AA-контраст
     ТЕКСТА (--warning там #9a6a00) — как заливка полосы/столбца это выглядит грязно-оливковым.
     Для графических плоскостей (план-факт, столбцы) — свои fill-токены, одинаковые в обеих темах. */
  --fill-warn: #e5a23c;   --fill-danger: #ef4444;   --fill-ok: #22c55e;
  --info: #7ea6f5;        --info-soft: rgba(102,126,234,.16);    /* «в работе» (взамен сырого var(--info)) */
  /* семантические цвета срочности/статуса — токенами, чтобы не было сырых hex */
  --urg-overdue: #F2607A; --urg-overdue-soft: rgba(242,96,122,.14);
  --urg-today: #E5A23C;   --urg-today-soft: rgba(229,162,60,.14);
  --urg-done: #5DCAA5;    --urg-done-soft: rgba(93,202,165,.13);
  --mine: #2b3553;
  --theirs: #222637;
  --system: #3a2f12;
  --radius: 14px;
  /* Единая высота ВСЕХ шапок столбцов (Проекты/Мои задачи/Чаты/тред) — чтобы верхняя
     кромка ленты сообщений и списков шла ровной линией. Задаёт самый высокий контент
     (кнопки звонка в треде = 44px) + вертикальные отступы. Меняется в ОДНОМ месте. */
  --head-h: 60px;
  /* Высота ВЕРХНЕЙ ПАНЕЛИ приложения (.topbar) — и ровно её же вычитает .screen.
     🔴 Раньше .screen жёстко вычитал 49px, а реальная .topbar давно выросла до 57px
     (самый высокий её ребёнок — кнопка «Настройки» 36px + паддинги 10/10 + бордер 1).
     Разница 8px делала .screen на 8px выше свободного места, и body{overflow:hidden}
     срезал нижние 8px композера: сверху пилюли ввода зазор 12px, снизу — только 4px
     («сверху пространство есть, снизу нет»). Теперь высота задаётся в ОДНОМ месте и
     разъехаться не может. Меняешь высоту/паддинги .topbar — меняй эту переменную. */
  --topbar-h: 57px;
  /* шкала радиусов вторичных элементов (--radius 14 — контейнеры) */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* движение: единая шкала (микро / поповеры / модалки-шторки) */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 260ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ui-scale: 1;          /* масштаб интерфейса (доступность): 1 = 100%. Ставит бутстрап в index.html <head> */
  font-synthesis: none;
}

* { box-sizing: border-box; }

/* 🔴 ГЛОБАЛЬНЫЙ дефолт размера иконок svgIcon: без width/height у <svg> в гибком/блочном
   контейнере иконка растягивается на всю ширину («гигантские иконки»). Базовый размер
   16px + flex:none. Контексты переопределяют (рельс 22px, звонок 24px и т.п.). */
svg.ic { width: 16px; height: 16px; flex: none; vertical-align: middle; }

html, body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* ══ РАЗМЕР ИНТЕРФЕЙСА (доступность для возрастной аудитории) ═══════════════════
   Весь CSS в px → менять корневой font-size бесполезно. Единственный надёжный
   глобальный масштаб — CSS zoom на <html> (Chromium/Safari/Firefox 126+; PWA и
   Flutter-WebView как раз на них). Zoom заодно магнифицирует и iframe документа.
   Бутстрап в <head> ставит зум и data-uis ещё до отрисовки (без мигания).
   Грабли, проверенные на живом проде инъекцией:
   (1) height:100dvh НЕ пересчитывается под zoom (985px×1.3=1281 > экран) →
       вертикальный overflow. Лечим компенсацией высоты html/body (÷ масштаб).
   (2) Оверлеи с max-height:NNvh так же переполняются под zoom (модалка 88vh при
       1.4× вылезает за экран, крестик уходит вверх) → кап высоты 96dvh/scale
       (после зума ≤96% реального экрана). Явный список оверлеев — без широких
       substring-селекторов, чтобы не задеть layout-элементы. */
html[data-uis], html[data-uis] body { height: calc(100dvh / var(--ui-scale, 1)); }
html[data-uis] :is(
  .modal-box, .lightbox-content, .cc-sheet, .cli-modal, .cli-panel, .co-panel,
  .ev-modal, .pinned-sheet, .pr-panel, .notif-panel, .task-info-panel,
  .ticket-info-panel, .v2-drawer, .v2-modal, .ai-assist-box, .ck-composer, .rec-report-body,
  .msged-box
) { max-height: calc(96dvh / var(--ui-scale, 1)) !important; }

/* Контролы «А− А+» в шапке (всегда на виду — пожилой человек сразу находит) */
.ui-scale-ctl { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.ui-scale-btn {
  min-width: 30px; padding: 4px 8px; font-weight: 700; line-height: 1;
  font-size: 13px; letter-spacing: .5px;
}
.ui-scale-btn .ui-scale-sign { font-size: 15px; }
/* Секция «Размер интерфейса» в Настройках */
.ui-scale-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ui-scale-preset {
  flex: 1 1 auto; min-width: 120px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
}
.ui-scale-preset:hover { border-color: var(--primary-2); }
.ui-scale-preset.active { border-color: var(--primary); background: rgba(102,126,234,.16); color: var(--primary-2); }
.ui-scale-stepper { display: flex; align-items: center; gap: 14px; }
.ui-scale-step {
  min-width: 56px; padding: 12px 0; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 20px; font-weight: 700; cursor: pointer;
}
.ui-scale-step:hover { border-color: var(--primary-2); }
.ui-scale-value { font-size: 20px; font-weight: 700; min-width: 74px; text-align: center; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
}

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* высота фиксирована токеном (см. --topbar-h) — .screen вычитает ровно её */
  height: var(--topbar-h); box-sizing: border-box; flex: none;
  padding: 10px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative; z-index: 2;
}
/* Кнопки шапки — всегда в ОДНУ строку. На узких экранах подпись («Установить»,
   «Включить уведомления») переносилась на 2 строки → кнопка 44px вместо 30px и
   шапка распиралась выше --topbar-h. Высота шапки фиксирована, поэтому перенос
   здесь недопустим: текст ужимается многоточием, а не ломает сетку. */
.topbar button { white-space: nowrap; }
/* Крайние элементы шапки не должны липнуть к кромке/обрезаться: у первого и
   последнего — гарантированный отступ от края (свыше основного padding). */
.topbar > :first-child { margin-left: 2px; }
.topbar > :last-child { margin-right: 2px; }
.topbar .conn { flex-shrink: 0; }
.topbar .brand { flex-shrink: 0; }
.brand { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.who { margin-left: auto; font-weight: 600; }
.conn { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot-off { background: #555; }

/* ---- screens ---- */
.screen { height: calc(100% - var(--topbar-h)); }

/* ---- login ---- */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card h1 { margin: 0 0 8px; font-size: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.field > span { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: flex-end; }
.grow { flex: 1; }
.hint { margin: -6px 0 8px; }

/* ── Знакомство (онбординг нового пользователя): аватар-герой + поля + тумблер ── */
#stepOnboard .ob-avw { position: relative; width: 96px; height: 96px; margin: 6px auto 16px; }
.ob-av { width: 96px; height: 96px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--primary); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; cursor: pointer; transition: transform .13s ease; }
.ob-av:hover { transform: scale(1.03); }
.ob-av .ic { width: 40px; height: 40px; }
.ob-av-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: filter .12s ease; }
.ob-av-cam:hover { filter: brightness(1.08); }
.ob-av-cam svg { width: 15px; height: 15px; }
#stepOnboard textarea { resize: none; }
.ob-uname { display: flex; align-items: center; gap: 4px; }
.ob-uname .ob-at { color: var(--muted); flex: 0 0 auto; }
.ob-uname input { flex: 1; min-width: 0; }
.ob-toggle { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.ob-toggle-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-toggle-tx b { font-size: 14px; font-weight: 600; color: var(--text); }
.ob-toggle-tx small { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }

/* ── iOS-тумблер (переиспользуемый: онбординг + Настройки→Профиль) ── */
.cc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; cursor: pointer; display: inline-block; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch-tr { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.cc-switch-tr::before { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.3,.8,.4,1); }
.cc-switch input:checked + .cc-switch-tr { background: var(--ok); }
.cc-switch input:checked + .cc-switch-tr::before { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch-tr { box-shadow: 0 0 0 3px var(--sel); }

/* 🔴 БАЗА элементов = эталон дизайн-системы. Любая НОВАЯ страница на «голых»
   input/select/textarea/button получает единый вид (радиус 11, фокус-кольцо, свой
   шеврон) БЕЗ пер-компонентного CSS. Пер-компонентные *-input/*-select — легаси. */
input, select, textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--glow);
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}

button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-2);
  transition: background .12s, border-color .12s, opacity .12s;
}
button:hover { border-color: var(--primary); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  width: 100%;
  margin-top: 6px;
  box-shadow: 0 6px 16px -4px var(--glow);
}
.primary:hover { border-color: transparent; box-shadow: 0 8px 22px -4px var(--glow); }
.danger { background: var(--danger); border-color: transparent; color: #fff; font-weight: 600; }
.ghost { background: transparent; }
.ghost.small { padding: 6px 10px; font-size: 12px; }
.error { color: var(--danger); min-height: 18px; margin: 10px 0 0; font-size: 13px; }
.picker { margin-top: 8px; }

/* ---- международный ввод телефона: селектор страны + маска ----
   ВНИМАНИЕ: базовая раскладка (flex/ширины/размер шеврона) продублирована
   инлайном в <head> index.html — чтобы протухший в кеше style.css не ломал
   вёрстку. Здесь — тема, отступы, состояния. */
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row #phoneInput { flex: 1; min-width: 0; }
.cc-cc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 11px 0 13px; margin: 0; flex: 0 0 auto; height: 46px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-size: 15px; line-height: 1; white-space: nowrap;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.cc-cc-btn:hover { border-color: var(--primary); }
.cc-cc-btn:active { background: var(--panel); }
.cc-cc-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.cc-cc-flag { font-size: 19px; line-height: 1; }
.cc-cc-dial { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .2px; }
.cc-cc-chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.cc-cc-btn[aria-expanded="true"] .cc-cc-chev { transform: rotate(180deg); }
.cc-cc-chev { transition: transform .16s ease; }
/* поповер списка стран */
.cc-cc-pop {
  position: relative; margin-top: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 48px -20px rgba(0,0,0,.55); overflow: hidden;
}
/* строка поиска с иконкой */
.cc-cc-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--line); position: relative; }
.cc-cc-search-ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cc-cc-search input { width: 100%; margin: 0; padding-left: 36px; height: 40px; }
.cc-cc-list { max-height: min(46vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.cc-cc-item {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  min-height: 46px; padding: 7px 12px; margin: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-size: 15px; text-align: left;
  cursor: pointer; transition: background .1s;
}
.cc-cc-item:hover, .cc-cc-item.active { background: var(--panel-2); }
.cc-cc-item .cc-cc-flag { font-size: 22px; flex: 0 0 auto; }
.cc-cc-item .cc-cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cc-item .cc-cc-code { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cc-cc-item .cc-cc-check { width: 18px; height: 18px; flex: 0 0 auto; color: var(--primary); opacity: 0; }
.cc-cc-item.sel .cc-cc-name { font-weight: 600; }
.cc-cc-item.sel .cc-cc-code { color: var(--primary); font-weight: 600; }
.cc-cc-item.sel .cc-cc-check { opacity: 1; }
.cc-cc-empty { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---- chat layout ---- */
/* колонки: рельс | мои задачи | список чатов | тред.
   Ширины задач/чатов — в CSS-переменных (тянутся мышью, см. .col-resizer
   и initColumnResize в app.js); значения сохраняются в localStorage.
   (Контакты раньше были этой колонкой — теперь они в модалке с рельса.) */
.chat {
  display: grid;
  /* «render-width» столбцов проектов/задач: по умолчанию = пользовательская ширина
     (--w-*), но состояния «свернуть»/«скрыть»/«режим Личное» переопределяют их на
     42px/0 (см. uiColsEnsureStyles в app.js). Так все комбинации свёрнуто/скрыто ×
     инфо-панель складываются БЕЗ комбинаторного перечисления grid-template-columns. */
  --rw-projects: var(--w-projects, 200px);
  --rw-tasks: var(--w-tasks, 250px);
  grid-template-columns: 96px var(--rw-projects) var(--rw-tasks) var(--w-chats, 280px) 1fr;
}

/* ---- левый вертикальный рельс папок/фильтров (Telegram-style) ---- */
.chat-rail {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; padding: 10px 8px;
  background: linear-gradient(180deg, #0e1018, #0b0d14);
  border-right: 1px solid var(--line);
  overflow-y: auto; min-height: 0;
}
.rail-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px; border-radius: var(--radius);
  cursor: pointer; color: var(--muted); border: 1px solid transparent;
  background: transparent; width: 100%; text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.rail-item:hover { background: var(--panel-2); color: var(--text); }
.rail-item .rail-ic { display: flex; align-items: center; justify-content: center; line-height: 1; }
.rail-item .rail-ic svg.ic { width: 22px; height: 22px; }
.rail-item .rail-label {
  font-size: 10.5px; line-height: 1.12; max-width: 100%;
  /* Рельс расширен 76→96px (жалоба владельца: «одна буква не влезает» —
     «Помощни/к», «Обращен/ия», «Пользова/т.» рубились). При 96px обычные
     ОДНОсловные ярлыки помещаются в одну строку. Клэмп ниже — уже ФОЛБЭК:
     на 2 строки с word-break (без «…») переносятся лишь редкие сверхдлинные
     («Приглашения») и пользовательские имена папок; ellipsis — только если и
     в 2 строки не влезло. */
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.rail-item.active {
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 16px -4px var(--glow); border-color: transparent;
}
.rail-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px -1px var(--glow);
}
.rail-item.active .rail-badge { background: #fff; color: var(--primary); }
.rail-sep { height: 1px; background: var(--line); margin: 6px 4px; flex: none; }
/* «Папки» — последний пункт верхнего блока (управление папками) */
.rail-folders {
  border: 1px dashed var(--line); color: var(--muted);
}
.rail-folders:hover { border-color: var(--primary); color: var(--text); background: transparent; }
/* «Пользователи» — отдельный пункт в самом низу рельса */
.rail-users {
  margin-top: auto;
  border: 1px dashed var(--line); color: var(--muted);
}
.rail-users:hover { border-color: var(--primary); color: var(--text); background: transparent; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative; /* якорь для .col-resizer на правой кромке */
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); flex: none;
  padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.conv-list { list-style: none; margin: 0; padding: 6px; }
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-subhead {
  padding: 10px 14px 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-top: 1px solid var(--line); margin-top: 6px;
}
.conv-item {
  display: flex; align-items: center; gap: 11px; position: relative;
  padding: 9px 11px; border-radius: 12px; cursor: pointer; margin-bottom: 2px;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
/* ── Акцент статуса у чата задачи/ИИ-чата — плавающая капсула цвета статуса (столбика),
   не жёсткая квадратная скобка вдоль border-radius строки (0141, apple-style). Цвет
   передаётся через --conv-accent (см. convRowHtml); растягивается по высоте строки. ── */
.conv-item.tkc-conv, .conv-item.aic-item, .conv-item.tk-item[style*="--conv-accent"] { padding-left: 18px; }
.conv-item.tkc-conv::before, .conv-item.aic-item::before, .conv-item.tk-item[style*="--conv-accent"]::before {
  content: ""; position: absolute; left: 6px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--conv-accent, #5DCAA5);
  box-shadow: 0 0 7px -1px color-mix(in srgb, var(--conv-accent, #5DCAA5) 65%, transparent);
  transition: box-shadow .15s ease;
}
.conv-item.tkc-conv.active::before, .conv-item.aic-item.active::before {
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--conv-accent, #5DCAA5) 85%, transparent);
}
.conv-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  box-shadow: 0 4px 12px -4px var(--glow);
}
.conv-item-body { min-width: 0; flex: 1; }
/* онлайн-статус: зелёная точка на аватаре, когда собеседник 1-на-1 «в сети» */
.conv-av { position: relative; }
.conv-item.online .conv-av::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--panel);
  box-shadow: 0 0 6px var(--ok);
}
/* фото/видео-аватар беседы в списке (постер видео = <url>.jpg) */
.conv-av.has-img { background-size: cover; background-position: center; color: transparent; }
.conv-av .conv-av-vid {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65);
  pointer-events: none;
}
/* ── Кольцо ИСТОРИИ вокруг любого аватара (список чатов, шапка беседы, профиль). Instagram-градиент
   для непросмотренных, серое для просмотренных. Рисуем ::before (::after занят онлайн-точкой). ── */
.has-story { position: relative; }
.has-story::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; padding: 2.5px;
  background: linear-gradient(135deg,#feda75,#d62976 45%,#962fbf 80%,#4f5bd5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.has-story.seen::before { background: var(--line); }
.has-story.clickable { cursor: pointer; }
#convList .conv-av.has-story::before { inset: -3.5px; }
/* Компания — ЗОЛОТАЯ обводка (отличить от личной цветной). */
.has-story.company::before { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.has-story.company.seen::before { background: linear-gradient(135deg,#ffe08a,#e8a51c); }

/* ── Полоса ИСТОРИЙ вверху списка «Чаты» — ВСЕГДА на виду (Telegram/WhatsApp Status). ── */
.chat-stories { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); transition: padding .18s var(--ease-standard, ease); }
.chat-stories[hidden], .chat-stories:empty { display: none; }
.chat-stories .cs-full { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.chat-stories .cs-full::-webkit-scrollbar { display: none; }
/* Мини-кластер (перекрытые аватары) — виден при свёрнутом состоянии (скролл вниз). */
.chat-stories .cs-mini { display: none; align-items: center; cursor: pointer; padding: 1px 2px; }
.cs-mini-av { width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg,#feda75,#d62976 45%,#962fbf 80%,#4f5bd5); display: inline-flex; flex: 0 0 auto; }
.cs-mini-av.company { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.cs-mini-av .feed-av { width: 100% !important; height: 100% !important; border: 2px solid var(--panel); border-radius: 50% !important; overflow: hidden; }
.cs-mini-lbl { font-size: 12.5px; font-weight: 600; color: var(--text); margin-left: 8px; }
.chat-stories.collapsed { padding: 6px 12px; }
.chat-stories.collapsed .cs-full { display: none; }
.chat-stories.collapsed .cs-mini { display: flex; }
.cs-item { flex: 0 0 auto; width: 62px; text-align: center; cursor: pointer; }
.cs-ring { position: relative; width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; padding: 2.5px; background: var(--line); display: flex; align-items: center; justify-content: center; }
.cs-item.unseen .cs-ring { background: linear-gradient(135deg,#feda75,#d62976 45%,#962fbf 80%,#4f5bd5); }
.cs-item.company.unseen .cs-ring { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.cs-item.company .cs-ring { background: linear-gradient(135deg,#ffe08a,#e8a51c); }
/* Только сам аватар заполняет кольцо; «+»-бейдж (.cs-add) НЕ трогаем (иначе он раздувался на весь круг). */
.cs-ring > :not(.cs-add) { width: 100% !important; height: 100% !important; border: 2.5px solid var(--panel); border-radius: 50% !important; overflow: hidden; box-sizing: border-box; }
.cs-ring img { width: 100%; height: 100%; object-fit: cover; }
.cs-add { box-sizing: border-box; padding: 0; position: absolute; right: -3px; bottom: -3px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; border: 2.5px solid var(--panel); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cs-item .cs-add { transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease); }
.cs-item .cs-add:hover { transform: scale(1.12); }
/* Насечки-сегменты поверх кольца (по числу сториз) — над аватаром, под «+». Тот же приём
   в дорожке страницы «Лента» (.feed-story .ring) — паритет со списком «Чаты». */
.cs-ring .cs-seg, .feed-story .ring .cs-seg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.cs-name { margin-top: 5px; font-size: 11px; color: var(--textSecondary, #9aa0b4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-item.me .cs-name { color: var(--text); font-weight: 600; }
.conv-item:hover { background: var(--panel-2); }
.conv-item.active {
  background: linear-gradient(135deg, rgba(102,126,234,.22), rgba(118,75,162,.16));
  border-color: rgba(124,116,220,.35);
  box-shadow: 0 4px 14px -6px var(--glow);
}
.conv-name { font-weight: 600; }
.logout { margin: 8px; }

/* кнопка-📌 на строке чата: видна на hover/закреплённых, не мешает клику по чату */
.conv-pin-mark { margin-right: 4px; font-size: 12px; opacity: .9; }
.conv-pin-btn, .contact-pin-btn {
  flex: none; border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px; border-radius: 8px;
  opacity: 0; filter: grayscale(1); transition: opacity .12s, filter .12s, background .12s;
}
.conv-item:hover .conv-pin-btn,
.contact-row:hover .contact-pin-btn { opacity: .55; }
.conv-pin-btn.on, .contact-pin-btn.on { opacity: 1; filter: none; }
.conv-pin-btn:hover, .contact-pin-btn:hover { opacity: 1; filter: none; background: var(--panel-2); }

/* ---- мои контакты (телефонная книга) ---- */
/* ---- колонка «Мои задачи» (на месте бывших контактов) ------------------- */
.tasks-col {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  position: relative; /* якорь для .col-resizer на правой кромке */
}
.tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); flex: none;
  padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.tasks-head-actions { display: flex; gap: 6px; }
.tasks-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.tasks-empty { padding: 14px; line-height: 1.4; }

/* ---- колонка «Проекты» (слева от задач): фильтр столбика «Мои задачи» по проекту ----
   «Все проекты» вверху = без фильтра; выбор проекта = только его задачи; «Без проекта» =
   задачи вне проектов. Счётчики — из state.tasks (renderProjectsRail), живут в реалтайме. */
.projects-col {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  position: relative; /* якорь для .col-resizer на правой кромке */
}
.projects-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); flex: none;
  padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.projects-head-actions { display: flex; gap: 6px; }
.projects-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.projects-empty { padding: 14px 12px; line-height: 1.45; color: var(--muted); font-size: 12.5px; }
.projects-sep { height: 1px; background: var(--line); margin: 6px 8px; }

.proj-item {
  position: relative; /* якорь для .proj-qacts (пилюля быстрых действий справа) */
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px; cursor: pointer; margin-bottom: 2px;
  border: 1px solid transparent; color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.proj-item:hover { background: var(--panel-2); }
.proj-item.active {
  background: linear-gradient(135deg, rgba(102,126,234,.22), rgba(118,75,162,.16));
  border-color: rgba(124,116,220,.35);
  box-shadow: 0 4px 14px -6px var(--glow);
}
/* цветная «монета» проекта (буква/иконка) */
.proj-dot {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
  background: var(--grad);
  box-shadow: 0 3px 10px -5px var(--glow);
  overflow: hidden;
}
.proj-dot svg { width: 15px; height: 15px; }
.proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.proj-count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
/* активная строка: счётчик читаемым в ОБЕИХ темах (белый на светлой теме пропадал) */
.proj-item.active .proj-count { background: var(--panel-2); color: var(--text); }
/* «Все проекты» — фирменная строка-иконка; «Без проекта» — приглушённая пунктирная */
.proj-item.all .proj-dot { background: linear-gradient(135deg, #5b8def, #7c74dc); }
.proj-item.none .proj-dot { background: transparent; color: var(--muted); box-shadow: none; border: 1px dashed var(--line); }
/* Архивный проект в рельсе: приглушён + пометка «архив» (задачи тоже в архиве; вернуть через ✎). */
.proj-item.archived { opacity: .5; }

/* Плашка активного фильтра по проекту над списком чатов (0099) УБРАНА по требованию владельца:
   проект уже подсвечен в рельсе «Проекты», дублирующий индикатор над «Историями» лишний и
   создавал пустое пространство. Сужение списка по проекту работает как прежде (без плашки). */
.proj-item.archived:hover { opacity: .75; }
/* Drag-перестановка проектов = ручной приоритет (position/0075). Курсор-«захват», плавный сдвиг
   соседей, приподнятая полупрозрачная строка под курсором — как перетаскивание в Finder/Reminders. */
.proj-item[draggable="true"] { cursor: grab; }
.proj-item[draggable="true"]:active { cursor: grabbing; }
.projects-list.reordering .proj-item[draggable="true"] { transition: transform .14s cubic-bezier(.2,.7,.3,1), background .12s, border-color .12s, box-shadow .12s; }
.proj-item.dragging {
  opacity: .6; cursor: grabbing;
  background: var(--panel-2);
  border-color: rgba(124,116,220,.35);
  box-shadow: 0 10px 24px -10px var(--glow);
}
.proj-item.archived .proj-name::after { content: " · архив"; color: var(--muted); font-size: 10px; font-weight: 600; }

/* быстрые действия строки проекта: пилюля справа, всплывает по наведению (перекрывает счётчик,
   как на карточках доски .tw-qacts). «Перейти в задачи» / «Новая задача» / «Изменить». */
.proj-qacts {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1px; padding: 2px;
  border-radius: 9px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.proj-item:hover .proj-qacts { opacity: 1; pointer-events: auto; }
.proj-qa {
  width: 26px; height: 26px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 7px;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.proj-qa:hover { background: var(--panel-2); color: var(--text); }
.proj-qa .ic { width: 15px; height: 15px; }

/* секции: этапы (Бэклог/К выполнению/В работе/На проверке/Готово) · срок · проект */
.tasks-list .task-section-title {
  list-style: none; padding: 12px 10px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.tasks-list .task-section-title[data-group] { cursor: pointer; user-select: none; border-radius: 8px; transition: background .12s ease; }
.tasks-list .task-section-title[data-group]:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.tasks-list .task-section-title .ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-section-title .tsec-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-list .task-section-title .tsec-n { flex: none; font-variant-numeric: tabular-nums; opacity: .85; }
/* каретка сворачивания: вниз = раскрыто, вправо (−90°) = свёрнуто */
.tasks-list .task-section-title .tsec-caret { display: inline-flex; width: 12px; height: 12px; flex: none; opacity: .6; transition: transform .14s ease; }
.tasks-list .task-section-title .tsec-caret .ic { width: 12px; height: 12px; }
.tasks-list .task-section-title.collapsed .tsec-caret { transform: rotate(-90deg); }
.tasks-list .task-section-title .tsec-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.tasks-list .task-section-title:first-child { padding-top: 6px; }
/* «Идёт таймер» — одна семья с бейджем таймера (.task-chip.wip / .tw-pill-timer): тот же
   var(--info) и тот же мягкий пульс на иконке. Заливки строки НЕТ — только цвет и хэйрлайн. */
.tasks-list .tst-running { color: var(--info); }
.tasks-list .tst-running svg.ic { animation: wipPulse 1.8s ease-in-out infinite; }
.tasks-list .tst-backlog { color: #8b93a3; }
.tasks-list .tst-todo    { color: var(--primary-2); }
.tasks-list .tst-wip     { color: var(--info); }
.tasks-list .tst-test    { color: #d08b1f; }
.tasks-list .tst-project { color: var(--text); }
.tasks-list .tst-overdue { color: var(--urg-overdue); }
.tasks-list .tst-today   { color: var(--urg-today); }
.tasks-list .tst-soon    { color: var(--primary-2); }
.tasks-list .tst-none    { color: #6B7280; }
.tasks-list .tst-done    { color: var(--urg-done); }
.tasks-list .tst-cancelled { color: #8b93a3; }

/* ── Панель управления столбиком «Мои задачи» (группировка · сортировка · этапы) ── */
.tasks-list .task-ctrlbar { list-style: none; display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; }
.tasks-list .tcol-btn {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text-2, var(--text)); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tasks-list .tcol-btn:first-child { flex: 1 1 auto; }
.tasks-list .tcol-btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.tasks-list .tcol-btn .ic { width: 14px; height: 14px; flex: none; opacity: .75; }
.tasks-list .tcol-btn .ic:last-child { width: 12px; height: 12px; opacity: .5; margin-left: auto; }
.tasks-list .tcol-btn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-list .tcol-sortglyph { font-size: 13px; font-weight: 800; opacity: .7; line-height: 1; }
.tasks-list .tcol-gear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--muted); cursor: pointer; transition: all .12s ease;
}
.tasks-list .tcol-gear:hover { background: var(--panel-2); color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.tasks-list .tcol-gear .ic { width: 15px; height: 15px; }
/* мягкая строка «скрыто N задач» */
.tasks-list .task-hidden-note { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.tasks-list .task-hidden-note .thn-txt { display: inline-flex; align-items: center; gap: 6px; }
.tasks-list .task-hidden-note .ic { width: 13px; height: 13px; opacity: .7; }
.tasks-list .task-hidden-note .thn-cfg { background: none; border: none; color: var(--primary-2); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.tasks-list .task-hidden-note .thn-cfg:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }

/* ── Поповер «Настроить этапы» ── */
.tc-pop .tcol-cfg-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 6px; }
.tc-pop .tcol-cfg-hint { font-size: 11.5px; line-height: 1.45; color: var(--muted); padding: 0 4px 10px; }
.tc-pop .tcol-cfg-list { display: flex; flex-direction: column; gap: 3px; }
.tc-pop .tcol-cfg-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px;
  background: var(--panel); border: 1px solid transparent; cursor: grab; transition: background .12s ease, opacity .12s ease, border-color .12s ease;
}
.tc-pop .tcol-cfg-row:hover { background: var(--panel-2); }
.tc-pop .tcol-cfg-row.dragging { opacity: .55; border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); cursor: grabbing; }
.tc-pop .tcol-cfg-row.off { opacity: .5; }
.tc-pop .tcol-cfg-row.off .tcol-cfg-lbl { text-decoration: line-through; }
.tc-pop .tcol-drag { display: inline-flex; color: var(--muted); flex: none; }
.tc-pop .tcol-drag .ic { width: 15px; height: 15px; }
.tc-pop .tcol-cfg-ic { display: inline-flex; flex: none; }
.tc-pop .tcol-cfg-ic .ic { width: 15px; height: 15px; }
.tc-pop .tcol-cfg-lbl { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--text); }
.tc-pop .tcol-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; color: var(--muted); border-radius: 7px; cursor: pointer; transition: all .12s ease; }
.tc-pop .tcol-eye .ic { width: 15px; height: 15px; }
.tc-pop .tcol-eye.on { color: var(--primary-2); }
.tc-pop .tcol-eye:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tc-pop .tcol-cfg-foot { display: flex; justify-content: flex-end; padding-top: 8px; }

.tasks-list .task-row {
  position: relative; /* якорь для .task-hover-acts (плавают top-right) */
  padding: 8px 8px; border-radius: 10px; cursor: pointer;
  border-left: 3px solid transparent;
}
/* Верх карточки: круглешок-чекбокс + заголовок на ВСЮ ширину (заголовок больше не ужимается
   аватарами справа — они уехали в нижнюю полосу причастных .tr-ppl). */
.tasks-list .tr-top { display: flex; align-items: flex-start; gap: 9px; }
.tasks-list .task-row:hover { background: var(--panel-2); }
.tasks-list .task-row:hover .task-del { opacity: .65; }
/* левый акцент по приоритету */
.tasks-list .task-row.prio-urgent { border-left-color: var(--urg-overdue); }
.tasks-list .task-row.prio-high   { border-left-color: var(--urg-today); }

.tasks-list .task-check {
  flex: none; margin-top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: transparent; padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.tasks-list .task-check:hover { border-color: var(--primary); }
.tasks-list .task-check svg { width: 12px; height: 12px; }
.tasks-list .task-row.done .task-check {
  background: var(--grad); border-color: transparent; color: #fff;
}
/* Отменённая задача: приглушена + серый «×» (НЕ зелёная галка — это не «выполнено»,
   а «отменено»; кружок-кнопка = «вернуть в работу»). Заголовок зачёркнут ниже. */
.tasks-list .task-row.cancelled { opacity: .6; }
.tasks-list .task-row.cancelled .task-check {
  background: transparent; border-color: var(--muted); color: var(--muted);
}
.tasks-list .task-row.cancelled .task-check:hover { border-color: var(--primary); color: var(--primary); }

.tasks-list .task-main { min-width: 0; flex: 1; }
.tasks-list .task-title {
  flex: 1; min-width: 0; /* заголовок занимает всю ширину строки .tr-top */
  font-size: 13.5px; line-height: 1.3; color: var(--text);
  word-break: break-word;
}
.tasks-list .task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.tasks-list .task-row.cancelled .task-title { color: var(--muted); text-decoration: line-through; }
/* Мета и полоса причастных выровнены под ЗАГОЛОВОК (28px = 19px чекбокс + 9px gap). */
.tasks-list .task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 3px; margin-left: 28px; font-size: 11px;
}
.tasks-list .task-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 6px;
  background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.tasks-list .task-chip.due-overdue { background: var(--urg-overdue-soft); color: var(--urg-overdue); }
.tasks-list .task-chip.due-today   { background: var(--urg-today-soft); color: var(--urg-today); }
.tasks-list .task-chip.conv { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.tasks-list .task-chip.chat.unread { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-2); position: relative; }
.tasks-list .task-chip .task-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--urg-overdue); display: inline-block; margin-left: 1px; }
.tasks-list .task-chip.sub, .tasks-list .task-chip.link { color: var(--primary-2); }
.tasks-list .task-chip.parent { color: var(--muted); font-weight: 700; padding-inline: 6px; }
.tasks-list .task-chip.rel { cursor: pointer; }
.tasks-list .task-chip.rel:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); color: var(--primary-2); }
/* Задача «В работе» (status=in_progress): синий чип + мягкая заливка строки — чтобы с
   одного взгляда было видно, что по задаче идёт работа/учёт времени (левый акцент строки
   не трогаем — там приоритет). */
.tasks-list .task-row.in-progress { background: color-mix(in srgb, #3B82F6 8%, transparent); }
.tasks-list .task-row.in-progress:hover { background: color-mix(in srgb, #3B82F6 13%, transparent); }
.tasks-list .task-chip.wip { background: var(--info-soft); color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums; }
.tasks-list .task-chip.wip .ic { animation: wipPulse 1.8s ease-in-out infinite; }
@keyframes wipPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html[data-theme="light"] .tasks-list .task-chip.wip { color: #1d4ed8; }
/* Бейдж «в работе» (живой таймер учёта времени) — доска/плитки/список/таймлайн. Иконка пульсирует
   как у .task-chip.wip; tabular-nums чтобы секундомер не дёргал ширину. Не путать со статусом (колонкой). */
.tw-pill.tw-pill-timer { background: var(--info-soft); color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-pill.tw-pill-timer .ic { animation: wipPulse 1.8s ease-in-out infinite; }
html[data-theme="light"] .tw-pill.tw-pill-timer { color: #1d4ed8; background: rgba(37,99,235,.12); }
.tw-pill.tw-pill-timer.tl-timer { font-size: 10.5px; padding: 1px 6px; margin-left: 6px; flex: 0 0 auto; }
/* Время в РАБОЧЕЙ стадии (started-столбцы) — янтарный чип «портфель», пульс-точка пока в работе. */
.tw-pill.tw-pill-worktime { background: rgba(245,166,35,.16); color: #e0912a; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-pill.tw-pill-worktime.running::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; animation: wipPulse 1.8s ease-in-out infinite; }
html[data-theme="light"] .tw-pill.tw-pill-worktime { color: #b5710f; background: rgba(245,166,35,.14); }
/* «Раунд N» — задачу возвращали в работу. Янтарный чип (тон разделителей раундов в «Заметках»),
   виден на карточке доски/плиток и в списке. Тонкая рамка — чтобы читался как «важный статус». */
.tw-pill.tw-pill-round { background: var(--warning-soft); color: var(--warning); font-weight: 650; letter-spacing: .1px; border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); }
.tw-pill.tw-pill-round .ic { width: 12px; height: 12px; opacity: .9; }
/* Бейдж раунда в ШАПКЕ открытой задачи (рядом с пилюлей статуса). */
.tip-round-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.tip-round-badge .ic { width: 13px; height: 13px; }
/* Чип раунда в инбоксе «Моя работа» (v2). */
.v2-chip.mini.round { color: var(--warning); background: var(--warning-soft); font-weight: 650; }
/* Подсветка связанных/подзадач (по клику на чип): столбик «Мои задачи» и карточки доски.
   Тонкий 2px-glow терялся на плотной доске (владелец: «перестали подсвечиваться») — усилили:
   яркое кольцо + цветной ореол + разовый «пинг»-пульс, чтобы сразу увидеть связанные карточки. */
/* База (ТЁМНАЯ тема): яркое 2px-кольцо + цветной ореол — карточка остаётся тёмной/читаемой,
   заливку НЕ даём (на тёмном тинт выглядел бы «серым/приглушённым»). */
.task-row.rel-hl { box-shadow: inset 3px 0 0 var(--primary), 0 0 0 2px var(--primary), 0 6px 20px color-mix(in srgb, var(--primary) 32%, transparent); border-radius: 8px; position: relative; z-index: 2; }
.tw-card.rel-hl { box-shadow: 0 0 0 2px var(--primary), 0 6px 22px color-mix(in srgb, var(--primary) 42%, transparent); z-index: 2; }
.task-row.rel-hl, .tw-card.rel-hl { animation: relHlPing 1.5s ease-out 1; transition: box-shadow .15s ease; }
/* СВЕТЛАЯ тема: на белом тонкое кольцо/ореол теряются → добавляем тинт-заливку через inset
   box-shadow (реальный background не трогаем — не ломаем done/cancelled). Читается как выбранный
   элемент в Reminders: мягкая заливка + акцентное кольцо. `data-theme="light"` ставит и режим
   «Система» (index.html), так что покрыт и системный светлый. */
html[data-theme="light"] .tw-card.rel-hl { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primary) 12%, transparent), 0 0 0 2px var(--primary), 0 6px 22px color-mix(in srgb, var(--primary) 26%, transparent); }
html[data-theme="light"] .task-row.rel-hl { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primary) 12%, transparent), inset 3px 0 0 var(--primary), 0 0 0 2px var(--primary), 0 6px 20px color-mix(in srgb, var(--primary) 22%, transparent); }
/* «Пинг»: цветное кольцо разово расходится наружу, затем оседает в постоянный ореол. */
@keyframes relHlPing {
  0%   { box-shadow: 0 0 0 2px var(--primary), 0 0 0 0   color-mix(in srgb, var(--primary) 60%, transparent); }
  65%  { box-shadow: 0 0 0 2px var(--primary), 0 0 0 13px color-mix(in srgb, var(--primary) 0%,  transparent); }
  100% { box-shadow: 0 0 0 2px var(--primary), 0 6px 22px color-mix(in srgb, var(--primary) 42%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .task-row.rel-hl, .tw-card.rel-hl { animation: none; } }
/* Пульс «идёт таймер» (бейдж, заголовок секции, тумблер «Идёт») гасим при reduce-motion:
   смысл несут цвет и текст, мигание — только акцент. */
@media (prefers-reduced-motion: reduce) {
  .tasks-list .task-chip.wip .ic,
  .tw-pill.tw-pill-timer .ic,
  .tw-pill.tw-pill-worktime.running::after,
  .tasks-list .tst-running svg.ic,
  .tw-run-btn.active svg.ic { animation: none; }
}
/* «Прыжок» по кнопке «На доске»: разовый пульс, чтобы сразу увидеть куда переместились. */
.tw-card.tw-jump, .task-row.tw-jump { animation: twJumpPulse 1.5s ease-out 2; }
@keyframes twJumpPulse {
  0%   { box-shadow: 0 0 0 2px var(--primary), 0 0 0 7px color-mix(in srgb, var(--primary) 45%, transparent); }
  55%  { box-shadow: 0 0 0 2px var(--primary), 0 0 0 15px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--primary); }
}
/* «Требует внимания» (push/WS событие notify по задаче) — красная точка перед названием. */
.tasks-list .task-title .task-attention-dot, .tw-card-title .task-attention-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--urg-overdue); display: inline-block; margin-right: 5px; vertical-align: middle; flex: none; }
/* ── «Задача изменена другим участником или ИИ, я ещё не смотрел» ──────────────────
   🔴 ИСТОРИЯ ПРАВКИ (не откатывать в «скромную точку»): сначала метка была одиночным
   кругом 7px перед названием. Владелец открыл доску, где 23 карточки «ИИ выполнил»
   стоят в «На проверке», и написал «ничего не видно, они никак не выделяются». На
   плотной доске точка такого размера просто не читается — её не видно, пока не
   присматриваешься. В задаче дословно просили «помечать ЦВЕТОМ или ВЫДЕЛЕНИЕМ».
   Поэтому метка теперь двухуровневая:
     1) заливка карточки/строки — мягкая подложка цветом --primary (то, что ловит глаз
        при беглом взгляде на колонку);
     2) точка 9px с гало + плотный заголовок — то, что говорит «вот именно эта».
   Чтобы это НЕ стало ёлкой, заливка намеренно слабая (7–10% primary) и живёт только до
   первого взгляда: наведение/открытие её гасят. Левую полосу карточки не трогаем — она
   занята ПРИОРИТЕТОМ (.tw-card.prio-*), второй цветной акцент там читался бы как ошибка.
   --primary объявлен и в тёмной (:root), и в светлой (html[data-theme="light"]) теме,
   поэтому базовые правила намеренно БЕЗ префикса темы — одно на обе; ниже только та
   пара мест, где светлой нужен свой замес (карточка там не --panel, а #edf1f8).
   Гашение по наведению/открытию — класс .seen: точка растворяется и схлопывает свою
   ширину за 140мс, а не пропадает рывком (сам узел уберёт ближайшая перерисовка). */
.task-changed-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
  display: inline-block; margin-right: 7px; vertical-align: middle; flex: none;
  /* Гало — тот же приём, что у .tw-card.rel-hl: делает точку заметной на любом фоне,
     не увеличивая её саму (иначе она спорит с чекбоксом и красной «требует внимания»). */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
  transition: opacity .14s ease, width .14s ease, margin-right .14s ease, box-shadow .14s ease;
}
.task-changed-dot.seen { opacity: 0; width: 0; margin-right: 0; box-shadow: none; }
/* .tw-row-title — флекс с gap: собственный отступ точки там лишний (иначе двойной зазор). */
.tw-row-title .task-changed-dot { margin-right: 0; }
/* Пока не просмотрено — заголовок плотнее. :has() снимает выделение САМ, как только точка
   получила .seen, — второй класс в JS для этого не нужен. */
.tw-card-title:has(> .task-changed-dot:not(.seen)),
.tw-row-title:has(> .task-changed-dot:not(.seen)),
.tl-name:has(> .task-changed-dot:not(.seen)) { font-weight: 600; }
/* Уровень 1 — подложка. :has() на КОНТЕЙНЕРЕ: точка лежит внутри заголовка, поэтому
   селектор без `>`. Как только JS повесил на точку .seen (наведение/открытие), правило
   перестаёт совпадать и заливка уходит сама — отдельного класса на карточку не нужно,
   и точечное гашение не требует пересборки DOM (см. taskSeenRepaint в app.js). */
.tw-card:has(.task-changed-dot:not(.seen)),
.tw-row:has(.task-changed-dot:not(.seen)),
.tl-row:has(.task-changed-dot:not(.seen)) {
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
  transition: background .16s ease, box-shadow .16s ease;
}
/* Карточка доски — плюс тонкий контур цветом акцента: на светлой колонке одной заливки
   мало, карточка должна «оторваться» от соседей. Не border (он занят приоритетом слева
   и рамкой), а inset-кольцо — оно не двигает геометрию и не ломает hover-состояние. */
.tw-card:has(.task-changed-dot:not(.seen)) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent);
}
/* Наведение на непросмотренную карточку: кольцо остаётся, но подъём-тень с .tw-card:hover
   надо вернуть руками — правило выше перебивает её по специфичности, а без тени карточка
   под курсором перестаёт «подниматься» и hover ощущается сломанным. */
.tw-card:has(.task-changed-dot:not(.seen)):hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent),
              0 6px 18px -8px rgba(0,0,0,.5);
}
/* Светлая тема: карточка в списке задач залита #edf1f8 (см. ниже по файлу), поэтому
   мешаем primary с НЕЙ, а не с --panel — иначе подложка выйдет грязной. */
html[data-theme="light"] .tasks-list .tw-card:has(.task-changed-dot:not(.seen)) {
  background: color-mix(in srgb, var(--primary) 12%, #edf1f8);
}
/* Чип комментариев на карточке «Мои задачи»: непрочитанные → акцент + красная точка. */
.tw-pill.chat.unread { color: var(--accent); }
.tw-pill .tw-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--urg-overdue); display: inline-block; margin-left: 1px; }
.tasks-list .task-del {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; padding: 2px 4px;
  opacity: 0; transition: opacity .12s, color .12s;
}
.tasks-list .task-del:hover { color: var(--urg-overdue); opacity: 1; }
.tasks-list .task-del svg.ic { width: 14px; height: 14px; }
/* секции с иконками (без эмодзи) */
.tasks-list .task-section-title { display: flex; align-items: center; gap: 6px; }
.tasks-list .task-section-title svg.ic { width: 13px; height: 13px; }
.tasks-list .task-section-title .tsec-n { margin-left: auto; opacity: .65; font-weight: 600; }
.tasks-list .task-chip svg.ic { width: 12px; height: 12px; }
.tasks-list .task-row-side { flex: none; display: flex; align-items: center; gap: 5px; margin-top: 1px; }

/* ── Полоса причастных (нижняя строка карточки): ответственный + соисполнители + наблюдатели,
   с явной МОЕЙ ролью. Крупнее аватары (26px), «я» — всегда яркая пилюля, не кружок. ───────── */
.tasks-list .tr-ppl {
  display: flex; align-items: center; gap: 7px;
  margin: 7px 0 0 28px; padding-top: 7px;
  border-top: 1px solid var(--line); min-width: 0; overflow: hidden;
}
.tasks-list .tr-ppl .tp-clu { display: inline-flex; align-items: center; min-width: 0; }
/* Кластер наблюдателей: отделён вертикальной чертой + ведущий глаз, аватары мельче/приглушены. */
.tasks-list .tr-ppl .tp-watch { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.tasks-list .tr-ppl .tp-watch > svg.ic { width: 13px; height: 13px; color: var(--muted); margin-right: 4px; flex: none; }
.tasks-list .tr-ppl .tp-av {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--panel);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; color: #fff; flex: none; position: relative;
}
/* Наложение — только МЕЖДУ соседними аватарами (и первый аватар — на пилюлю «я»). Не
   :first-child (первым в кластере может быть глаз/пилюля) — берём смежных соседей. */
.tasks-list .tr-ppl .tp-av + .tp-av { margin-left: -8px; }
.tasks-list .tr-ppl .tp-me + .tp-av { margin-left: -8px; }
/* Ответственный — единственное золотое кольцо на карточке (кольцо box-shadow не клипается соседом). */
.tasks-list .tr-ppl .tp-av.tp-resp { box-shadow: 0 0 0 2px var(--urg-today); z-index: 2; }
.tasks-list .tr-ppl .tp-av.tp-more { background: var(--panel-2); color: var(--muted); font-size: 10px; }
/* Наблюдатели: мельче и приглушены (без grayscale — паритет с Flutter). */
.tasks-list .tr-ppl .tp-watch .tp-av { width: 22px; height: 22px; font-size: 10px; opacity: .82; }
.tasks-list .tr-ppl .tp-watch .tp-av + .tp-av { margin-left: -7px; }
/* «Я» — пилюля с ролью (никогда не прячется в +N). */
.tasks-list .tr-ppl .tp-me {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 26px; padding: 0 9px 0 3px; border-radius: 13px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
  background: var(--accent); color: #fff; z-index: 5;
}
.tasks-list .tr-ppl .tp-me svg.ic { width: 11px; height: 11px; flex: none; }
.tasks-list .tr-ppl .tp-me-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.22); background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
/* Ответственный-«я» — золотая пилюля, тёмный текст (читаемо и на светлой теме). */
.tasks-list .tr-ppl .tp-me-resp { background: var(--urg-today); color: #20242c; }
.tasks-list .tr-ppl .tp-me-resp .tp-me-dot { background: rgba(0,0,0,.18); color: #20242c; }
/* Наблюдатель-«я» — светлый контурный вариант (пассивная роль). */
.tasks-list .tr-ppl .tp-me-watch {
  height: 24px; background: var(--panel-2); color: var(--primary-2);
  border: 1.5px solid var(--accent); font-weight: 600;
}
.tasks-list .tr-ppl .tp-me-watch .tp-me-dot { width: 18px; height: 18px; background: var(--accent); }
/* Выполненная задача — вся полоса приглушена. */
.tasks-list .task-row.done .tr-ppl { opacity: .5; }
/* «Не назначено» — явный чип вместо пустоты/висящего аватара (жалоба «почему нет аватарки»).
   Полоса держит min-height, чтобы карточки не «прыгали» по высоте. */
.tasks-list .tr-ppl { min-height: 34px; }
.tp-noone {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border: 1px dashed var(--line); border-radius: 14px; background: transparent;
  color: var(--muted); font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.tp-noone:hover { border-color: var(--accent); color: var(--primary-2); }
.tp-noone svg.ic { width: 13px; height: 13px; flex: none; }
/* Меню «⋯» задачи: разделитель + опасное действие (удаление отделено и подкрашено). */
.tc-pop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.tc-pop-row.danger { color: var(--danger); }
.tc-pop-row.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* ── V3 карточка ДОСКИ: ручка перетаскивания, действия ⋯, полоса причастных ──────────
   Раньше карточки доски (v1/v2) показывали лишь плоские аватары исполнителей — теперь та же
   полоса, что в списке: ответственный в золотом кольце, наблюдатели за глазом, «Не назначено». */
.tw-card { position: relative; }
.tw-card-grip { position: absolute; left: 1px; top: 10px; color: var(--muted); opacity: 0; cursor: grab; transition: opacity .12s; }
.tw-card-grip .ic { width: 14px; height: 14px; }
.tw-card:hover .tw-card-grip { opacity: .4; }
.tw-card-acts { position: absolute; top: 7px; right: 7px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; z-index: 3; }
.tw-card:hover .tw-card-acts { opacity: 1; }
.tw-card-acts button { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tw-card-acts button:hover { color: var(--text); border-color: var(--primary); }
.tw-card-acts .ic { width: 15px; height: 15px; }
/* Быстрые кнопки карточки (исполнитель/метка/срок/приоритет/⋯) — плавающая «пилюля» по
   наведению, как .task-hover-acts в строке списка: сплошной фон + тень, бордерлесс-кнопки. */
.tw-card-acts.tw-qacts { top: 6px; right: 6px; gap: 1px; padding: 2px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.tw-card-acts.tw-qacts button { width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px; }
.tw-card-acts.tw-qacts button:hover { background: var(--panel-2); color: var(--text); border-color: transparent; }
.tw-card-acts.tw-qacts .tw-qa[data-qprio]:hover { color: var(--warn, var(--urg-today)); }
/* Плей/пауза таймера в быстрых кнопках: активная пауза («мой таймер идёт») — синий акцент,
   как .tqact-running в строке списка. */
.tw-card-acts.tw-qacts .tw-qa[data-qstart]:hover { color: var(--urg-done); }
.tw-card-acts.tw-qacts .tw-qa.tw-qa-running { color: var(--info); }
.tw-card-acts.tw-qacts .tw-qa.tw-qa-running:hover { background: var(--info-soft); color: var(--info); }
html[data-theme="light"] .tw-card-acts.tw-qacts .tw-qa.tw-qa-running { color: #1d4ed8; }
/* «Мои задачи»: та же ЕДИНАЯ карточка (boardCardHtml), обёрнутая в <li> (список — <ul>).
   Верх карточки = чекбокс «Готово» + заголовок (флекс), как раньше в .tr-top у строки. */
.tasks-list .tw-card-li { list-style: none; margin: 0 0 7px 0; }
.tasks-list .tw-card-li:last-child { margin-bottom: 0; }
/* Перетаскивание порядка (ручной приоритет внутри секции): хват за карточку, мягкий подъём. */
.tasks-list .tw-card-li.tw-drag .tw-card { cursor: grab; }
.tasks-list .tw-card-li.tw-drag .tw-card:active { cursor: grabbing; }
.tasks-list .tw-card-li.dragging { opacity: .55; }
.tasks-list .tw-card-li.dragging .tw-card { box-shadow: 0 8px 24px rgba(0,0,0,.28); transform: scale(1.012); }
.tasks-list .tw-card-li.tw-drag .tw-card { transition: box-shadow .14s ease, transform .14s ease; }
.tw-card-head { display: flex; align-items: flex-start; gap: 9px; }
.tw-card-head .tw-card-title { flex: 1; min-width: 0; }
.tw-card-head .task-check { flex: none; }
.tasks-list .tw-card.done .task-check { background: var(--grad); border-color: transparent; color: #fff; }
.tasks-list .tw-card.cancelled .task-check { background: transparent; border-color: var(--muted); color: var(--muted); }
.tasks-list .tw-card.cancelled .task-check:hover { border-color: var(--primary); color: var(--primary); }
@media (hover: none) { .tw-card-grip, .tw-card-acts { opacity: 1; } }
.tw-card .tr-ppl { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); min-height: 34px; }
.tw-card .tr-ppl .tp-clu { display: inline-flex; align-items: center; }
.tw-card .tr-ppl .tp-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; position: relative; }
.tw-card .tr-ppl .tp-av + .tp-av, .tw-card .tr-ppl .tp-me + .tp-av { margin-left: -8px; }
.tw-card .tr-ppl .tp-av.tp-resp { box-shadow: 0 0 0 2px var(--urg-today); z-index: 2; }
.tw-card .tr-ppl .tp-av.tp-more { background: var(--panel-2); color: var(--muted); }
.tw-card .tr-ppl .tp-watch { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); display: inline-flex; align-items: center; }
.tw-card .tr-ppl .tp-watch > .ic { width: 13px; height: 13px; color: var(--muted); margin-right: 4px; }
.tw-card .tr-ppl .tp-watch .tp-av { width: 22px; height: 22px; opacity: .82; }
.tw-card .tr-ppl .tp-me { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 3px; border-radius: 12px; font-size: 10px; font-weight: 700; background: var(--accent); color: #fff; }
.tw-card .tr-ppl .tp-me .ic { width: 11px; height: 11px; }
.tw-card .tr-ppl .tp-me-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.22); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.tw-card .tr-ppl .tp-me-resp { background: var(--urg-today); color: #20242c; }
.tw-card .tr-ppl .tp-me-resp .tp-me-dot { background: rgba(0,0,0,.18); color: #20242c; }
.tw-card .tr-ppl .tp-me-watch { height: 24px; background: var(--panel-2); color: var(--primary-2); border: 1.5px solid var(--accent); }
.tw-card.done .tr-ppl { opacity: .5; }
/* Заголовок оставляем место под ручку/действия слева-справа. */
.tw-card .tw-card-title { padding-right: 30px; }

/* ── Звезда-бейдж ответственного + ЕДИНЫЙ вид полосы причастных (список = доска) ──────
   Ответственного показываем ОДИНАКОВО везде: реальный аватар (фото) в золотом кольце + звезда.
   Никаких пилюль «отв.»/«соисп.» и опоры на state.me — только данные задачи. */
.tp-star { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--urg-today); color: #20242c; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--panel); z-index: 3; }
.tp-star .ic { width: 9px; height: 9px; }
/* Звезда/кольцо не должны обрезаться контейнером полосы. */
.tasks-list .tr-ppl { overflow: visible; }
/* Единый размер аватаров причастных на доске = как в списке (26px / наблюдатели 22px). */
.tw-card .tr-ppl .tp-av { width: 26px; height: 26px; }
.tw-card .tr-ppl .tp-watch .tp-av { width: 22px; height: 22px; }

/* линза ролей: Мне / Я поставил / Наблюдаю */
.tasks-list .task-lens { list-style: none; display: flex; gap: 5px; padding: 8px 6px 10px;
  /* Sticky-бар фильтра ролей: фон = фон КОЛОНКИ (--panel), а не --bg (тот темнее панели →
     читался «тёмной полосой» над списком). Совпадает с .tasks-col → полоса не выделяется. */
  position: sticky; top: 0; background: var(--panel); z-index: 2;
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.tasks-list .task-lens::-webkit-scrollbar { height: 0; display: none; }
.tasks-list .task-lens-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; font-size: 11px; white-space: nowrap; }
.tasks-list .task-lens-btn svg.ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-lens-btn .tl-label { white-space: nowrap; }
.tasks-list .task-lens-btn.active { background: var(--panel-2); color: var(--text); border-color: var(--primary); }
/* Двойной счётчик чипа: [К выполнению] · [В работе и тестирование]. Первый — приглушён
   (очередь), второй — акцент/жирный (активная работа). Разделены тонким хэйрлайном. */
.tasks-list .task-lens-n { flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel); border-radius: 6px; padding: 1px 6px; font-size: 10px; line-height: 1.4; }
.tasks-list .task-lens-n .tln-todo { color: var(--muted); }
.tasks-list .task-lens-n .tln-work { color: var(--primary); font-weight: 600; }
.tasks-list .task-lens-n .tln-sep { width: 1px; height: 9px; border-radius: 1px; background: var(--line); }
.tasks-list .task-lens-btn.active .task-lens-n { background: rgba(255,255,255,.18); }
.tasks-list .task-lens-btn.active .task-lens-n .tln-todo { color: rgba(255,255,255,.72); }
.tasks-list .task-lens-btn.active .task-lens-n .tln-work { color: #fff; }
.tasks-list .task-lens-btn.active .task-lens-n .tln-sep { background: rgba(255,255,255,.38); }
/* Поиск по столбику «Мои задачи» */
.tasks-list .task-searchbar { list-style: none; display: flex; align-items: center; gap: 7px; margin: 0 6px 8px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.tasks-list .task-searchbar .tsb-ic { display: inline-flex; color: var(--muted); }
.tasks-list .task-searchbar .tsb-ic svg.ic { width: 15px; height: 15px; }
.tasks-list .task-search-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; padding: 0; }
.tasks-list .task-search-input::placeholder { color: var(--muted); }
.tasks-list .task-searchbar .tsb-clr { flex: none; display: inline-flex; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.tasks-list .task-searchbar .tsb-clr:hover { color: var(--text); }
.tasks-list .task-searchbar .tsb-clr svg.ic { width: 13px; height: 13px; }
/* Плашка «скрыто фильтром компании» (вариант A): объясняет пустой столбик и снимает фильтр одним кликом. */
.tasks-list .task-company-hidden { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0 6px 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tasks-list .task-company-hidden .tch-txt { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; min-width: 0; }
.tasks-list .task-company-hidden .tch-txt svg.ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-company-hidden .tch-txt b { color: var(--text); font-weight: 600; }
.tasks-list .task-company-hidden .tch-showall { flex: none; background: transparent; border: none; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.tasks-list .task-company-hidden .tch-showall:hover { text-decoration: underline; }
/* Та же плашка «скрыто фильтром компании», но в пространстве задач (доска/список/плитки/таймлайн). */
.tw-company-hidden { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tw-company-hidden .tch-txt { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; min-width: 0; }
.tw-company-hidden .tch-txt svg.ic { width: 14px; height: 14px; flex: none; }
.tw-company-hidden .tch-txt b { color: var(--text); font-weight: 600; }
.tw-company-hidden .tch-showall { flex: none; background: transparent; border: none; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.tw-company-hidden .tch-showall:hover { text-decoration: underline; }

/* списки в модалках (контакты/задачи) не должны растягиваться на весь экран */
.contacts-list.in-modal,
.tasks-list.in-modal { flex: none; max-height: 62vh; padding: 2px; }

/* поля модалки задачи */
.task-fields-row { display: flex; gap: 10px; }
.task-fields-row .field { flex: 1; min-width: 0; }
.task-conv-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.task-conv-row input { width: auto; margin: 0; }
/* подвал модалки задачи — две кнопки в ряд (общий .modal-foot .primary тянет на 100%) */
#taskModal .modal-foot { display: flex; gap: 10px; }
#taskModal .modal-foot .primary { width: auto; flex: 1; }
#taskModal .modal-foot .ghost { flex: none; }

/* ---- перетаскиваемые границы колонок ------------------------------------
   Ничего лишнего «на виду»: зона захвата прозрачна и сидит ровно на шве
   между колонками. Тонкая акцентная линия проявляется ТОЛЬКО при наведении
   на шов (или во время перетаскивания). Двойной клик — сброс ширины. */
.col-resizer {
  position: absolute; top: 0; bottom: 0; right: -4px;
  width: 9px;               /* удобная зона захвата, перекрывает шов */
  z-index: 15; cursor: col-resize;
  touch-action: none;       /* чтобы pointermove не превращался в скролл/жест */
  -webkit-user-select: none; user-select: none;
}
.col-resizer::after {       /* и есть та самая линия, что показываем у шва */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: var(--primary); border-radius: 2px;
  box-shadow: 0 0 8px -1px var(--glow);
  opacity: 0; transition: opacity .15s ease;
}
.col-resizer:hover::after,
.col-resizer.dragging::after { opacity: 1; }
/* во время перетаскивания курсор/без-выделения на весь экран */
body.col-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
.contacts-head-actions { display: flex; gap: 6px; }
/* статус формы «Новый контакт» */
.addcontact-status { margin: 4px 0 0; }
.contacts-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.contacts-empty { padding: 14px; line-height: 1.4; }

/* заголовки секций: «В ПРИЛОЖЕНИИ · N» (зелёный), «ИЗ ТЕЛЕФОННОЙ КНИГИ» (серый), «📌 ЗАКРЕПЛЁННЫЕ» */
.contacts-list .contact-section-title {
  list-style: none; padding: 12px 10px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.contacts-list .contact-section-title:first-child { padding-top: 6px; }
.contacts-list .cst-inapp { color: var(--urg-done); }
.contacts-list .cst-book  { color: #6B7280; }
.contacts-list .cst-pin   { color: var(--primary-2); }

/* строка контакта */
.contacts-list .contact-row {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: 12px; margin-bottom: 1px;
  border: 1px solid transparent; transition: background .12s;
}
.contacts-list .contact-row.matched { cursor: pointer; }
.contacts-list .contact-row:hover { background: var(--panel-2); }

/* плоский цветной аватар-инициалы (цвет задаётся inline по имени) */
.contacts-list .contact-avatar {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.contacts-list .contact-row.unmatched .contact-avatar { opacity: .92; }
.contacts-list .contact-avatar.has-img { color: transparent; }

/* зелёная точка-индикатор (правый-нижний угол) у matched */
.contacts-list .contact-online-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--urg-done); border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.contacts-list .contact-body { min-width: 0; flex: 1; }
.contacts-list .contact-name {
  font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contacts-list .contact-pin-mark { margin-right: 4px; font-size: 11px; }

/* «Пригласить» — лёгкая ссылка-текст (без рамки/фона) */
.contacts-list .contact-invite-link {
  flex: none; cursor: pointer;
  color: #818CF8; font-weight: 600; font-size: 13px;
  padding: 4px 4px; border: none; background: none; border-radius: 6px;
  transition: color .12s, background .12s;
}
.contacts-list .contact-invite-link:hover { color: #a5b0fa; text-decoration: underline; }
.contacts-list .contact-invite-link:focus-visible { outline: none; background: var(--panel-2); }

/* иконка «сообщение» (accent) у matched-строк */
.contacts-list .contact-msg-btn {
  flex: none; border: none; background: transparent; cursor: pointer;
  color: var(--primary-2); padding: 5px; border-radius: 9px; line-height: 0;
  opacity: .85; transition: opacity .12s, background .12s, color .12s;
}
.contacts-list .contact-msg-btn:hover { opacity: 1; color: #fff; background: var(--grad); }

/* ── имя на ВСЮ ширину; действия (Пригласить/написать/пин) скрыты и появляются ПРИ
   НАВЕДЕНИИ поверх правого края (плавное затемнение фона), чтобы имя не обрезалось ── */
.contacts-list .contact-row { position: relative; }
.contacts-list .contact-body { flex: 1; min-width: 0; }
.contacts-list .contact-actions {
  position: absolute; right: 6px; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 2px;
  padding-left: 34px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--panel-2) 44%);
  transition: opacity .12s;
}
.contacts-list .contact-row:hover .contact-actions { opacity: 1; pointer-events: auto; }

/* ── Скроллбары: СКРЫТЫ по умолчанию, ПОЯВЛЯЮТСЯ при наведении на блок (владелец, 2026-07-15).
   Ширину на :hover НЕ меняем (иначе контент дёргается) — держим ПОСТОЯННЫЙ прозрачный жёлоб, а
   видимость даём ЦВЕТОМ бегунка: прозрачный → видимый. :hover поднимается по предкам, поэтому
   бегунок показывается у скролл-блока под курсором. Цвета через токены → адаптивно к теме.
   (border+padding-box = бегунок с отступом, визуально тоньше жёлоба.) ── */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; transition: background .15s; }
*:hover::-webkit-scrollbar-thumb { background: var(--text-dim); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox: тот же приём (Safari 18+ идёт по ::-webkit- выше). Жёлоб постоянный (thin), цвет
   бегунка прозрачный → видимый на hover блока. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: var(--text-dim) transparent; }
}
/* Рельс (96px) — ИСКЛЮЧЕНИЕ из правила выше: жёлоб скрыт ПОЛНОСТЬЮ, без резервирования места.
   Постоянный 11px-жёлоб на узкой иконочной навигации сдвигал иконки влево, а справа зияла
   пустая полоса (жалоба владельца «справа лишнее пространство»). Рельс скролл не показывает
   вовсе (Telegram/macOS-sidebar): иконки центрируются во всю ширину — ровно. Прокрутка
   колёсиком/тачпадом сохраняется. */
.chat-rail { scrollbar-width: none; -ms-overflow-style: none; }
.chat-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- тост (напр. «Ссылка скопирована») ---- */
.cc-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 90; max-width: min(86vw, 460px);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  word-break: break-word; text-align: center;
}
.cc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Тост с ДЕЙСТВИЕМ («Таймер на паузе → Снять „В работе“»). Не отдельный компонент, а второй
   слот того же тоста: класс вешает toast() при наличии action. Центровка текста уступает
   место флексу, иначе подпись и кнопка слипаются. Цвет — через --accent, поэтому светлая
   тема (там --accent переопределён) подхватывается сама, без отдельного правила. */
.cc-toast.has-act { display: flex; align-items: center; gap: 10px; text-align: left; padding-right: 6px; }
.cc-toast-act {
  flex: none; appearance: none; border: 0; background: transparent;
  /* 🔴 На тёмной панели тоста чистый --accent (#667eea на #262b36) даёт контраст 3.87 —
     ниже порога WCAG AA 4.5 для текста 13px (послабление 3:1 действует только от 18.66px
     bold). Осветляем акцент к белому; светлая тема ниже возвращает чистый --accent, там
     на белом фоне он и так даёт 5.78. Измерено в браузере, а не на глаз. */
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cc-toast-act:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cc-toast-act:active { transform: scale(.97); }
.cc-toast-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- thread ---- */
/* position:relative — система координат для плавающей даты (#dateFloat) поверх ленты */
.thread { display: flex; flex-direction: column; min-height: 0; position: relative; }
.thread-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); flex: none;
  /* шапка чата = белая (--panel), как остальные шапки столбцов; лента ниже остаётся
     на градиенте .thread. Иначе тред-шапка показывала бы фон .thread (в светлой —
     голубоватый градиент) и отличалась от «Проекты/Мои задачи/Чаты». */
  background: var(--panel);
  padding: 0 18px; border-bottom: 1px solid var(--line);
}
.thread-title { font-weight: 700; font-size: 16px; }
/* шапка кликабельна (cursor/title ставятся в openConversation) → лёгкая подсветка имени */
.thread-title[style*="pointer"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread-av[style*="pointer"]:hover { filter: brightness(1.08); }
/* аватар беседы в шапке чата (группа — своя аватарка/постер видео, личка — собеседник) */
.thread-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.thread-av.has-img { background-size: cover; background-position: center; color: transparent; }
.thread-av.hidden { display: none; }
/* кнопки действий в шапке (звонки + настройки группы) — держим рядом справа */
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.call-btn {
  background: var(--grad);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 5px 14px -5px var(--glow);
}

.messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; flex-direction: column; max-width: 70%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg.system { align-self: center; align-items: center; max-width: 80%; }
.msg.system .meta { justify-content: center; text-align: center; }
.bubble {
  padding: 9px 13px; border-radius: 14px; line-height: 1.35; word-break: break-word;
}
.msg.mine .bubble { background: var(--grad); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px -5px var(--glow); }
.msg.theirs .bubble { background: var(--theirs); border: 1px solid rgba(255,255,255,.05); border-bottom-left-radius: 4px; }
.msg.system .bubble { background: var(--system); color: #f0d9a0; font-size: 12px; }
.meta { display: flex; gap: 6px; align-items: center; font-size: 10px; color: var(--muted); margin-top: 2px; }
.seq { opacity: .7; }
/* время сообщения (HH:MM) вместо служебного #seq (Task 7) */
.msg-time { opacity: .65; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.status.sending { color: var(--muted); }
.status.failed { color: var(--danger); cursor: pointer; } /* «ошибка ⟳» кликабельна → переотправить */
.status.sent { color: var(--ok); }
.status.read { color: var(--primary-2); } /* двойная галка — прочитано собеседником (индиго) */
/* Галки доставки рисуются SVG-иконкой (svgIcon check/checkAll), а НЕ текстом «✓»/«✓✓».
   Прежний хак (letter-spacing:-.34em чтобы стянуть текстовые галки) слипался в нечитаемую
   кашу на части устройств/браузеров — постоянно «возвращался». SVG стабилен везде. */
.status.sent, .status.read { display: inline-flex; align-items: center; line-height: 1; }
.status.sent svg.ic, .status.read svg.ic { width: 16px; height: 16px; display: block; }

/* разделитель-дата по центру (Сегодня / Вчера / «5 июн») — Task 7 */
.day-divider { align-self: center; margin: 10px 0 4px; }
.day-divider span {
  display: inline-block; padding: 3px 12px; border-radius: 12px;
  background: var(--system, rgba(255,255,255,.06)); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
}
/* крестик отмены загрузки рядом с «загрузка N%» */
.upload-cancel { display: inline-block; margin-left: 4px; padding: 0 3px; cursor: pointer; color: var(--muted); font-weight: 700; line-height: 1; }
.upload-cancel:hover { color: var(--danger); }

/* ---- поиск по чату (панель под шапкой) ---- */
.chat-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  background: var(--panel, rgba(255,255,255,.02));
}
.chat-search-bar.hidden { display: none; }
.chat-search-input {
  flex: 1; min-width: 0; padding: 7px 12px; border-radius: 10px;
  background: var(--input-bg, rgba(255,255,255,.05)); color: inherit;
  border: 1px solid var(--line); font-size: 14px;
}
.chat-search-input:focus { outline: none; border-color: var(--primary, #6c5ce7); }
.chat-search-count { flex: none; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- плавающая дата поверх ленты (Telegram-style) ---- */
.date-float {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.date-float.show { opacity: 1; }
.date-float span {
  display: inline-block; padding: 3px 12px; border-radius: 12px;
  background: var(--system, rgba(28,28,34,.92)); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}

/* Кнопка «в конец чата» — появляется при прокрутке вверх от низа ленты (как в Telegram).
   Позиционируется относительно .thread (position: relative), над композером. */
.jump-down {
  position: absolute; right: 20px; bottom: 90px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(8px) scale(.92); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .12s, background .12s;
}
.jump-down svg { width: 22px; height: 22px; display: block; }
.jump-down.show { opacity: 1; transform: none; pointer-events: auto; }
.jump-down:hover { border-color: var(--primary); background: var(--panel); }

/* подсветка текущего совпадения поиска (стойкая, поверх кратковременного .flash) */
.msg.search-current .bubble { box-shadow: 0 0 0 2px var(--primary), 0 0 16px 3px var(--glow); }
.msg.search-current.theirs .bubble, .msg.search-current.mine .bubble { box-shadow: 0 0 0 2px var(--primary), 0 0 16px 3px var(--glow); }
mark.search-hit { background: var(--primary, #6c5ce7); color: #fff; border-radius: 3px; padding: 0 1px; }

.typing { padding: 0 18px 4px; height: 16px; }

.composer { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: flex-end; }
/* поле ввода — авто-растущая textarea (растёт при переносе строк до лимита) */
.composer textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 120px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 18px; padding: 9px 14px; font-size: 14px; line-height: 1.35;
  font-family: inherit; outline: none;
}
.composer textarea:focus { border-color: var(--primary); }
.composer .primary { width: auto; margin: 0; padding: 10px 20px; }
/* Кнопки-иконки композера ровно по высоте поля ввода (40px). Иначе они были 42px
   (icon 16px + padding 9 + border 1 сверху/снизу), а при align-items:flex-end поле
   опускалось на 2px → зазор СНИЗУ пилюли меньше, чем сверху («не ровно»). Высота
   фиксирована = симметрия при однострочном вводе; flex-end сохраняет рост вверх. */
.composer > button { height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
/* единая кнопка режима (кружок/голос); при записи — крупнее и красная */
.mode-btn { padding: 9px 12px; font-size: 20px; flex: none; transition: transform .12s, color .12s; touch-action: none; user-select: none; }
.mode-btn.recording { transform: scale(1.3); color: var(--danger); }
/* ✨ ИИ-улучшение текста */
.ai-btn { padding: 9px 12px; font-size: 18px; flex: none; }
.ai-btn.loading { animation: recpulse .8s infinite; pointer-events: none; }
/* ⌨ Подсказка смены раскладки (ghbdtn → привет) — плашка НАД полем ввода.
   Появляется только когда текст похож на русский латиницей; тап = заменить. */
.layout-suggest {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 14px; margin: 0; text-align: left; cursor: pointer;
  border: none; border-top: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(102,126,234,.16), rgba(118,75,162,.12));
  color: var(--text); border-radius: 0;
  animation: lsIn .16s ease-out;
}
.layout-suggest:hover { background: linear-gradient(135deg, rgba(102,126,234,.26), rgba(118,75,162,.2)); border-top-color: var(--primary); }
.layout-suggest .ls-icon { display: inline-flex; color: var(--primary-2); flex: none; }
.layout-suggest .ls-icon svg.ic { width: 18px; height: 18px; }
.layout-suggest .ls-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.layout-suggest .ls-hint { font-size: 11px; color: var(--muted); }
.layout-suggest .ls-preview {
  font-size: 14px; font-weight: 600; color: var(--primary-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.layout-suggest .ls-key {
  flex: none; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
}
@keyframes lsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rec-bar.cancel { color: var(--danger); }
.rec-bar.cancel .rec-dot { background: var(--danger); }

/* ---- call overlay (ПОЛНОЭКРАННО, как у топ-мессенджеров) ---- */
.call-overlay { position: fixed; inset: 0; z-index: 50; background: #000; }
.call-box {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #000; border: none; border-radius: 0; padding: 0;
}
.videos { position: absolute; inset: 0; background: #000; overflow: hidden; }
.videos .remote { width: 100%; height: 100%; object-fit: cover; background: #000; }
.videos .local {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px); right: 14px;
  width: 32%; max-width: 150px; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.25);
  background: #111; transform: scaleX(-1); z-index: 3;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
/* Демонстрация экрана (1-на-1): широкий экран ПК показываем ЦЕЛИКОМ (contain), чтобы на
   телефоне собеседника не обрезались края. .peer-screen — собеседник показывает экран
   (сигнал screen_state), .local.screen — я сам показываю (моё превью тоже целиком). */
.videos.peer-screen .remote { object-fit: contain; }
.videos .local.screen { object-fit: contain; transform: none; }
.call-status {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top) + 18px);
  z-index: 2; text-align: center; font-size: 18px; font-weight: 700;
  padding: 0 16px; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.call-controls {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 28px);
  z-index: 2; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  padding: 0 16px;
}
.call-controls button {
  min-width: 64px; border-radius: 999px; padding: 14px 22px; font-size: 16px;
  background: rgba(255,255,255,.14); border-color: transparent; backdrop-filter: blur(6px);
}
.call-controls .primary { background: var(--grad); }
.call-controls .danger { background: var(--danger); }
.call-controls .off { opacity: .5; text-decoration: line-through; }
/* демонстрация экрана активна — подсветка кнопки */
.call-controls .sharing { background: var(--grad); box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; }
.call-diag {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 4px);
  z-index: 2; text-align: center; font-size: 10px; opacity: .5;
}

/* ─────────── Аудиозвонок: красивый режим (градиент, аватар с пульсацией, эквалайзер) ─────────── */
.call-audio { display: none; }
.call-overlay.audio-mode .call-box {
  background: linear-gradient(180deg, #7A6CF0 0%, #5B57D8 52%, #3B368F 100%);
}
.call-overlay.audio-mode .videos { display: none; }
.call-overlay.audio-mode .call-status { display: none; } /* дублируется по центру в .ca-status */
.call-overlay.audio-mode .call-audio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 1; gap: 14px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 150px);
}
.ca-avatar {
  position: relative; width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #A99BF7, #6D5FE0);
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 14px 44px rgba(20,18,70,.55);
  margin-bottom: 10px;
}
.ca-initial { font-size: 54px; font-weight: 600; color: #fff; line-height: 1; }
.call-overlay.audio-mode.ringing .ca-avatar::before,
.call-overlay.audio-mode.ringing .ca-avatar::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  animation: caPulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.call-overlay.audio-mode.ringing .ca-avatar::after { animation-delay: 1.2s; }
@keyframes caPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.15); opacity: 0; } }
.ca-name { font-size: 27px; font-weight: 700; color: #fff; text-align: center; padding: 0 24px; letter-spacing: .3px; }
.ca-status { font-size: 15px; color: rgba(255,255,255,.85); }
.ca-wave { display: none; align-items: flex-end; gap: 4px; height: 30px; margin-top: 6px; }
.call-overlay.audio-mode.in-call .ca-wave { display: flex; }
.ca-wave i { width: 4px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.85); animation: caWave 1s ease-in-out infinite; }
.ca-wave i:nth-child(1){animation-delay:0s}.ca-wave i:nth-child(2){animation-delay:.1s}.ca-wave i:nth-child(3){animation-delay:.2s}.ca-wave i:nth-child(4){animation-delay:.3s}.ca-wave i:nth-child(5){animation-delay:.15s}.ca-wave i:nth-child(6){animation-delay:.25s}.ca-wave i:nth-child(7){animation-delay:.05s}.ca-wave i:nth-child(8){animation-delay:.35s}.ca-wave i:nth-child(9){animation-delay:.2s}
@keyframes caWave { 0%,100% { height: 8px; } 50% { height: 26px; } }
/* панель кнопок поверх градиента — читаемый фон */
.call-overlay.audio-mode .call-controls button { background: rgba(255,255,255,.18); }
.call-overlay.audio-mode .call-controls .danger { background: var(--danger); }
.call-overlay.audio-mode .call-controls .off { opacity: .5; }

/* ---- свёрнутый звонок: плавающее окно в углу (чат остаётся доступен) ---- */
.call-overlay.minimized {
  inset: auto; bottom: 84px; right: 16px;
  width: 132px; height: 200px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,.6); cursor: pointer;
}
.call-overlay.minimized .videos .local { display: none; }       /* в мини — только собеседник */
.call-overlay.minimized .call-status { font-size: 10px; top: 6px; text-shadow: 0 1px 3px #000; }
.call-overlay.minimized .call-controls,
.call-overlay.minimized .call-diag { display: none; }
.call-overlay.minimized .mini-bar { display: flex; }
.mini-bar {
  display: none; position: absolute; left: 0; right: 0; bottom: 8px; z-index: 4;
  align-items: center; justify-content: center; gap: 12px;
}
/* 🔴 КОРЕНЬ «иконки не ровно»: без flex-центрирования текстовая «›» и SVG-иконки сидят на
   РАЗНОЙ базовой линии → скачут по высоте. Центрируем содержимое каждой круглой кнопки. */
.mini-bar button {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); border-color: transparent; color: #fff;
}
.mini-bar button svg.ic { display: block; }
.mini-bar .danger { background: var(--danger); }

/* ---- перетаскивание + прижатие вбок свёрнутой плашки ---- */
.call-overlay.minimized { transition: transform .22s ease; touch-action: none; }
/* ручное позиционирование (drag) перебивает угловые bottom/right из .minimized */
.call-overlay.minimized.placed { bottom: auto; right: auto; }
/* прижато к краю: уезжает почти за экран, виден ярлычок ~26px (стрелка возврата) */
.call-overlay.minimized.docked[data-dock="right"] { transform: translateX(calc(100% - 26px)); }
.call-overlay.minimized.docked[data-dock="left"]  { transform: translateX(calc(-100% + 26px)); }
.call-overlay.minimized.docked .mini-bar { display: none; } /* в доке кнопки прячем */
/* стрелка возврата (общая для личного и группового окна) — видна только в доке */
.mini-restore {
  display: none; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 46px; padding: 0; z-index: 6; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.22); border: none; border-radius: 8px;
}
.minimized.docked .mini-restore { display: flex; }
/* видимый ярлычок: при доке вправо видна ЛЕВАЯ кромка окна, при доке влево — правая */
.minimized.docked[data-dock="right"] .mini-restore { left: 3px; }
.minimized.docked[data-dock="left"]  .mini-restore { right: 3px; }

/* кнопка «развернуть» на свёрнутой плашке — слева сверху, иконка «2 стрелки навстречу»
   (как у всех PiP). Видна только когда звонок свёрнут и НЕ прижат вбок. */
.mini-tl-btn { display: none; }
.minimized .mini-tl-btn {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 8px; left: 8px; z-index: 6;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: none;
}
.minimized .mini-tl-btn svg.ic { width: 18px; height: 18px; display: block; }
.minimized.docked .mini-tl-btn { display: none; }

/* кнопка «показать всех участников» — справа сверху свёрнутой плашки (только группа) */
.mini-tr-btn { display: none; }
.minimized .mini-tr-btn {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 8px; right: 8px; z-index: 6;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: none;
}
.minimized .mini-tr-btn svg.ic { width: 18px; height: 18px; display: block; }
.minimized.docked .mini-tr-btn { display: none; }

/* ---- свёрнутый ГРУППОВОЙ созвон: плавающее окно со ВСЕМИ участниками ----
   Было: фикс. 150×200 + сетка тайлов min-height:140 → даже ОДИН участник обрезался,
   несколько не влезали вовсе. Стало: мини = вертикальная лента маленьких тайлов;
   окно тянется по контенту до max-height и скроллит остаток. Кнопка ↕ (gcListBtn)
   ПРЯЧЕТ/ПОКАЗЫВАЕТ саму ленту участников (класс .gc-collapsed): свёрнуто = только
   шапка + подвал; развёрнуто = все участники вертикально. НЕ ресайз поля. */
.groupcall-overlay.minimized {
  inset: auto; bottom: 84px; right: 16px;
  width: 176px; height: auto; max-height: 62vh;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #141822, #0b0d12);
  cursor: pointer; touch-action: none;
  transition: transform .22s ease, width .18s ease, max-height .18s ease;
  display: flex; flex-direction: column;
}
.groupcall-overlay.minimized.placed { bottom: auto; right: auto; }
/* шапка — компактная, заголовок по центру между угловыми кнопками */
.groupcall-overlay.minimized .groupcall-head {
  flex: 0 0 auto; flex-wrap: nowrap; font-size: 11px; padding: 8px 34px 6px; gap: 6px;
  justify-content: center; text-align: center; color: #fff;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06);
}
.groupcall-overlay.minimized .groupcall-title {
  flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.groupcall-overlay.minimized .groupcall-head .small { flex: 0 0 auto; white-space: nowrap; }
.groupcall-overlay.minimized .groupcall-controls { display: none; }
/* сетка → вертикальная лента: влезают ВСЕ участники (скролл, если очень много) */
.groupcall-overlay.minimized .group-grid,
.groupcall-overlay.minimized .group-grid.spotlight {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; margin: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  align-content: flex-start; /* тонкий скролл — через общий ::-webkit-scrollbar (Safari/Chrome) */
}
.groupcall-overlay.minimized .group-grid .gtile,
.groupcall-overlay.minimized .group-grid.spotlight .gtile,
.groupcall-overlay.minimized .group-grid .gtile.main {
  flex: 0 0 auto; width: 100%; height: 92px; min-height: 0;
  aspect-ratio: auto; order: 0; border-radius: 12px;
}
.groupcall-overlay.minimized .gname { font-size: 10px; padding: 2px 7px; left: 6px; bottom: 6px; height: auto; }
/* активный спикер в мини — рамка ВНУТРЬ тайла (не задевает соседей/шапку); анимацию гасим,
   иначе keyframes gcSpeak перекрыл бы этот inset-box-shadow и свечение полезло бы наружу окна */
.groupcall-overlay.minimized .gtile.speaking { box-shadow: inset 0 0 0 2px var(--primary); animation: none; }
/* ── совместимость редизайна со свёрнутым (PiP) режимом ── */
.groupcall-overlay.minimized .gc-stage { flex: 1 1 auto; min-height: 0; display: flex; padding: 0; }
.groupcall-overlay.minimized .gc-head-main { flex-direction: row; align-items: center; gap: 6px; }
.groupcall-overlay.minimized .gc-head-sub, .groupcall-overlay.minimized .gc-head-right { display: none; }
.groupcall-overlay.minimized .gt-eq { display: none; }
.groupcall-overlay.minimized .gt-avatar { width: 44px; font-size: 16px; box-shadow: none; }
/* «Скрыть участников» — прячем ленту целиком; окно = шапка + подвал (тонкая плашка) */
.groupcall-overlay.minimized.gc-collapsed { max-height: none; }
.groupcall-overlay.minimized.gc-collapsed .group-grid { display: none; }
/* нижняя панель (свернуть вбок / выйти) — обычная строка-подвал, не поверх видео */
.groupcall-overlay.minimized .gc-mini-bar {
  position: static; flex: 0 0 auto; display: flex; justify-content: center; gap: 12px;
  padding: 7px; background: rgba(0,0,0,.28); border-top: 1px solid rgba(255,255,255,.06);
}
/* угловые кнопки в мини — компактнее, чтобы не давить шапку */
.groupcall-overlay.minimized .mini-tl-btn,
.groupcall-overlay.minimized .mini-tr-btn {
  width: 28px; height: 28px; top: 7px; background: rgba(0,0,0,.45);
}
.groupcall-overlay.minimized .mini-tl-btn { left: 7px; }
.groupcall-overlay.minimized .mini-tr-btn { right: 7px; }
.groupcall-overlay.minimized .mini-tl-btn svg.ic,
.groupcall-overlay.minimized .mini-tr-btn svg.ic { width: 15px; height: 15px; }
/* прижатие вбок (док) */
.groupcall-overlay.minimized.docked[data-dock="right"] { transform: translateX(calc(100% - 26px)); }
.groupcall-overlay.minimized.docked[data-dock="left"]  { transform: translateX(calc(-100% + 26px)); }
.groupcall-overlay.minimized.docked .gc-mini-bar,
.groupcall-overlay.minimized.docked .mini-tr-btn { display: none; }

/* ---- log ---- */
.log-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--panel); border-top: 1px solid var(--line);
  max-height: 40vh; z-index: 20;
}
.log-panel summary { padding: 6px 12px; cursor: pointer; color: var(--muted); font-size: 12px; }
.log {
  margin: 0; padding: 8px 12px; max-height: 32vh; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #9fb0c8; white-space: pre-wrap;
}

/* ---- login polish ---- */
.card .logo { font-size: 44px; text-align: center; margin-bottom: 6px; }
.card h1 { text-align: center; }
#stepPhone > p.muted, #stepCode > p.muted { text-align: center; margin: 0 0 18px; }
#codeInput { letter-spacing: .35em; text-align: center; font-size: 22px; font-weight: 600; }
.hint { text-align: center; }
#backBtn { width: 100%; margin-top: 8px; }

.thread-head-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.back-mobile { display: none; }
.composer .primary { width: auto; min-width: 52px; margin: 0; padding: 10px 18px; font-size: 16px; }

/* средние экраны: прячем колонку «Мои контакты», оставляя рельс+чаты+тред.
   Ширина чатов остаётся перетаскиваемой (var сохраняется). */
/* рельс-кнопка «Задачи» видна ВЕЗДЕ, включая десктоп (задача fa8dd2a0, владелец: «самый
   левый рейл, между Проекты и События»). Раньше на десктопе пряталась (дубль столбика
   «Мои задачи»), но рейл открывает ПОЛНОЕ пространство задач — это не дубль столбика. */

@media (max-width: 1080px) and (min-width: 721px) {
  .chat { grid-template-columns: 96px var(--w-chats, 280px) 1fr; }
  .tasks-col { display: none; }                 /* мало места — задачи прячем (как раньше контакты) */
  .projects-col { display: none; }              /* столбик проектов прячем вместе с задачами */
}

/* узкие экраны / мобила */
@media (max-width: 720px) {
  .chat { grid-template-columns: 62px 1fr; }    /* рельс остаётся слева, уже */
  .tasks-col { display: none; }                 /* столбик задач прячем — мало места */
  .projects-col { display: none; }              /* столбик проектов тоже прячем */
  .col-resizer { display: none; }               /* на мобиле колонки не тянем */
  .chat-rail { padding: 8px 5px; }
  .rail-item { padding: 7px 2px; }
  .rail-item .rail-ic svg.ic { width: 20px; height: 20px; }
  .rail-item .rail-label { font-size: 10px; }
  .chat .sidebar { display: flex; }            /* список чатов — главный экран */
  .chat .thread { display: none; }
  .chat.show-thread .chat-rail { display: none; } /* в треде рельс скрыт, тред во всю ширину */
  .chat.show-thread { grid-template-columns: 1fr; }
  .chat.show-thread .sidebar { display: none; }
  .chat.show-thread .thread { display: flex; }
  .back-mobile { display: inline-flex; align-items: center; }
  .login { padding: 16px; align-items: flex-start; padding-top: 8vh; }
  .card { border: none; background: transparent; padding: 10px; }
  .messages { padding: 14px; }
  .composer { padding: 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .topbar { padding: 10px 16px; gap: 10px; }
}

/* ---- модалка: контакты / новый чат ---- */
.sidebar-head-actions { display: flex; gap: 6px; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8,10,14,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* ── Панель участников созвона: выезжает справа, поверх сетки ──────────────────
   Содержимое строит общий модуль participants.js (он же на странице гостя).
   Здесь только «рама»: положение, стекло, движение. */
.gc-people {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 12;
  width: min(348px, 92vw);
  display: flex; flex-direction: column;
  background: rgba(18, 21, 28, .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-left: 1px solid rgba(255, 255, 255, .10);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .42);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), opacity .16s cubic-bezier(.2,.8,.2,1);
}
.gc-people.hidden { display: flex !important; transform: translateX(102%); opacity: 0; pointer-events: none; }
.gc-people > #gcPeopleMount { flex: 1 1 auto; min-height: 0; }
.gc-people-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(238,241,247,.62); cursor: pointer;
  transition: background .14s, color .14s;
}
.gc-people-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.gc-people-x .ic { width: 16px; height: 16px; }
/* на узком экране панель занимает всю ширину — список важнее сетки */
@media (max-width: 560px) { .gc-people { width: 100%; border-left: 0; } }
/* свёрнутый в PiP созвон панель не показывает — там нет места */
.groupcall-overlay.minimized .gc-people { display: none !important; }

/* Счётчик «сколько ждёт входа» на кнопке участников — единственный способ
   заметить гостя, если панель закрыта. */
.gc-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--danger, #ef4444); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px rgba(11,13,18,.9);
}
.groupcall-controls .ghost { position: relative; }

/* 🔴 Модалка, поднятая в ВЕРХНИЙ СЛОЙ поверх полноэкранного созвона (initModalsTopLayer в
   app.js). Popover приносит свои UA-стили (fit-content, рамка, своя подложка, margin:auto) —
   гасим их, чтобы модалка выглядела ТОЧНО так же, как в обычном режиме. Без этого сброса
   всплывшая модалка съезжала бы в угол с чужой рамкой. */
.modal-overlay[popover] {
  position: fixed; inset: 0; margin: 0; border: 0; padding: 16px;
  width: auto; height: auto; max-width: none; max-height: none;
  overflow: visible; color: inherit;
  /* background НЕ задаём: пусть работает общая тема (.modal-overlay → var(--scrim) + блюр),
     иначе всплывшая модалка отличалась бы фоном от обычной. UA-фон поповера перебит автором. */
}
.modal-overlay[popover]:popover-open { display: flex; }
.modal-overlay[popover]::backdrop { background: transparent; }
.modal-box {
  width: 100%; max-width: 460px; max-height: 80vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.modal-box .conv-list { overflow-y: auto; flex: 1; }
@media (max-width: 720px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box { max-width: none; max-height: none; height: 100dvh; border: none; border-radius: 0; }
}

/* ══════ ИИ-Помощник (со-пилот, DeepSeek) — полноценный чат ══════ */
/* Широкая двухколоночная модалка: слева столбик бесед, справа диалог. */
.ai-assist-box { max-width: 960px; width: 94vw; flex-direction: row; padding: 0; overflow: hidden; position: relative; }
/* Оверлей при перетаскивании файла с компьютера на панель Помощника */
.ai-assist-box.ai-drag::after { content: "Отпустите файл — добавлю в Помощника 📎"; position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(102,126,234,.16); border: 2px dashed var(--primary); border-radius: inherit; color: var(--text); font-weight: 600; font-size: 15px; pointer-events: none; }
@media (min-width: 721px) { .ai-assist-box { height: 84vh; } }

/* ── левый столбик бесед ── */
.ai-assist-side { width: 252px; flex: none; display: flex; flex-direction: column; background: var(--panel-2); border-right: 1px solid var(--line); }
.ai-assist-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; font-weight: 700; border-bottom: 1px solid var(--line); }
.ai-assist-brand { font-size: 15px; }
.ai-assist-new { width: 30px; height: 30px; flex: none; border: none; border-radius: 9px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; }
.ai-assist-new:hover { filter: brightness(1.08); }
.ai-assist-new .ic { width: 17px; height: 17px; }
.ai-assist-brand { display: inline-flex; align-items: center; gap: 7px; }
.ai-assist-brand-ic { display: inline-flex; color: var(--primary); }
.ai-assist-brand-ic .ic { width: 17px; height: 17px; }
/* ── фильтр Активные/Архив + поиск бесед ── */
.ai-assist-filter { display: flex; gap: 6px; padding: 8px 10px 0; }
.ai-filter-tab { flex: 1; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-filter-tab:hover { color: var(--text); }
.ai-filter-tab.active { background: rgba(102,126,234,.18); border-color: var(--primary); color: var(--text); }
.ai-assist-search { display: flex; align-items: center; gap: 7px; margin: 8px 10px 2px; padding: 0 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; }
.ai-assist-search:focus-within { border-color: var(--primary); }
.ai-assist-search-ic { display: inline-flex; flex: none; opacity: .6; }
.ai-assist-search-ic .ic { width: 15px; height: 15px; }
.ai-assist-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--text); font-size: 13px; padding: 8px 0; outline: none; }
.ai-chat-arch { flex: none; opacity: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; display: inline-flex; }
.ai-chat-arch .ic { width: 14px; height: 14px; }
.ai-chat-item:hover .ai-chat-arch { opacity: .8; }
.ai-chat-arch:hover { opacity: 1 !important; color: var(--text); background: rgba(255,255,255,.08); }
.ai-chat-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-chat-del .ic { width: 14px; height: 14px; }
.ai-assist-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 6px; }
.ai-chat-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; color: var(--muted); }
.ai-chat-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.ai-chat-item.active { background: rgba(102,126,234,.18); color: var(--text); }
.ai-chat-ic { flex: none; display: inline-flex; opacity: .7; }
.ai-chat-ic .ic { width: 15px; height: 15px; }
.ai-chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ai-chat-del { flex: none; opacity: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.ai-chat-item:hover .ai-chat-del { opacity: .8; }
.ai-chat-del:hover { opacity: 1 !important; color: var(--text); background: rgba(255,255,255,.08); }

/* ── правая часть: заголовок + диалог + ввод ── */
.ai-assist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.ai-assist-head .ai-assist-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-assist-menu { display: none; }
.ai-assist-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }
.ai-thread { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.ai-msg { display: flex; flex-direction: column; max-width: 88%; }
.ai-msg.mine { align-self: flex-end; align-items: flex-end; }
.ai-msg.bot { align-self: flex-start; align-items: flex-start; }
.ai-bubble { padding: 10px 14px; border-radius: 15px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ai-msg.mine .ai-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.bot .ai-bubble { background: var(--panel-2); color: var(--text); border-bottom-left-radius: 5px; }
.ai-msg.bot.err .ai-bubble { background: #3a1f24; color: #ffb4b4; }
.ai-bubble strong { font-weight: 700; }
.ai-typing { color: var(--muted); letter-spacing: 2px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ai-action { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-action:hover { filter: brightness(1.08); }
.ai-assist-foot { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 12px 16px; border-top: 1px solid var(--line); }
.ai-assist-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.ai-assist-foot textarea { flex: 1; resize: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 14.5px; max-height: 140px; overflow-y: auto; }
.ai-assist-foot textarea:focus { outline: none; border-color: var(--primary); }
.ai-assist-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 17px; cursor: pointer; }
.ai-assist-send:hover { filter: brightness(1.08); }
.ai-assist-attach { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.ai-assist-attach:hover { border-color: var(--primary); color: var(--text); }
.ai-assist-attach:disabled { opacity: .5; cursor: default; }
/* Голосовой режим (hands-free): кнопка микрофона + оверлей */
.ai-assist-mic { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.ai-assist-mic:hover { border-color: var(--primary); color: var(--text); }
.ai-assist-mic.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* размеры SVG-иконок Помощника (эмодзи → иконки) */
.ai-assist-attach .ic, .ai-assist-mic .ic { width: 19px; height: 19px; }
.ai-assist-send .ic { width: 18px; height: 18px; }
.ai-msg-file .ic { width: 13px; height: 13px; }
.ai-action .ic { width: 14px; height: 14px; vertical-align: -2px; }
.ai-assist-chip .ai-chip-ic .ic { width: 14px; height: 14px; }
.ai-assist-chip .rm .ic { width: 12px; height: 12px; }
.ai-voice-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; text-align: center; background: var(--panel); }
.ai-voice-overlay.hidden { display: none; }
.ai-voice-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 16px; cursor: pointer; }
.ai-voice-x:hover { color: var(--text); border-color: var(--primary); }
/* Реактивный «шар» — цвет и анимация ЯВНО показывают состояние (слушает/думает/говорит) */
.ai-voice-orb { position: relative; width: 148px; height: 148px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 54px; color: #fff; background: radial-gradient(circle at 50% 36%, #8b98f2, #5561c9); transition: transform .1s ease, background .35s ease; }
.ai-voice-ico { display: inline-flex; }
.ai-voice-ico .ic { width: 56px; height: 56px; }
.ai-voice-orb::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; border: 3px solid transparent; }
.ai-voice-orb.ph-listening { background: radial-gradient(circle at 50% 36%, #8b98f2, #5561c9); animation: aiVoicePulse 1.6s ease-in-out infinite; }
.ai-voice-orb.ph-recognizing { background: radial-gradient(circle at 50% 36%, #8b98f2, #5561c9); animation: aiVoicePulse 1s ease-in-out infinite; }
.ai-voice-orb.ph-thinking { background: radial-gradient(circle at 50% 36%, #f4c15a, #cf8a12); }
.ai-voice-orb.ph-thinking::before { border-top-color: #cf8a12; border-right-color: #cf8a12; animation: aiVoiceSpin .9s linear infinite; }
.ai-voice-orb.ph-speaking { background: radial-gradient(circle at 50% 36%, #4fc79f, #1d8a68); animation: aiVoiceBreathe .85s ease-in-out infinite; }
@keyframes aiVoicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(102,126,234,.5); } 50% { box-shadow: 0 0 0 22px rgba(102,126,234,0); } }
@keyframes aiVoiceBreathe { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29,158,117,.45); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(29,158,117,0); } }
@keyframes aiVoiceSpin { to { transform: rotate(360deg); } }
.ai-voice-status { font-size: 19px; font-weight: 600; color: var(--text); }
.ai-voice-said { font-size: 17px; line-height: 1.45; color: var(--text); max-width: 480px; min-height: 22px; font-weight: 500; }
.ai-voice-reply { font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 480px; }
.ai-voice-hint { font-size: 12px; color: var(--muted); max-width: 440px; line-height: 1.5; }
.ai-voice-end { margin-top: 4px; padding: 10px 22px; border-radius: 8px; border: none; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.ai-voice-end:hover { filter: brightness(1.08); }
/* Чипы прикреплённых файлов над полем ввода */
.ai-assist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-assist-chips.hidden { display: none; }
.ai-assist-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; color: var(--text); }
.ai-assist-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-assist-chip .rm { flex: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; border: none; background: none; padding: 0; }
.ai-assist-chip .rm:hover { color: var(--danger, #e5484d); }
.ai-assist-chip.uploading { opacity: .7; }
.ai-assist-chip.failed { border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); }
/* Значок файла внутри пузыря сообщения пользователя */
.ai-msg-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.14); font-size: 12.5px; }
.ai-welcome { margin: auto; text-align: center; max-width: 420px; padding: 24px 8px; color: var(--muted); }
.ai-welcome-ic { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: rgba(102,126,234,.16); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.ai-welcome-ic .ic { width: 30px; height: 30px; }
.ai-welcome-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ai-welcome-sub { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-sugg { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; font-size: 13px; cursor: pointer; }
.ai-sugg:hover { border-color: var(--primary); color: var(--primary-2); background: var(--sel); }

/* ── мобильный: столбик бесед выезжает поверх по кнопке ☰ ── */
@media (max-width: 720px) {
  .ai-assist-side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 2px 0 18px rgba(0,0,0,.45); }
  .ai-assist-box.show-side .ai-assist-side { transform: translateX(0); }
  .ai-assist-menu { display: inline-flex; }
}

/* подсветка пункта интерфейса по подсказке ассистента */
.cc-guide-pulse { animation: ccGuidePulse 1.3s ease-in-out 2; border-radius: 10px; }
@keyframes ccGuidePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0); }
  50% { box-shadow: 0 0 0 4px rgba(102,126,234,.6); background: rgba(102,126,234,.14); }
}
/* ЯРКАЯ подсветка конкретной кнопки: кольцо + метка «👉 Нажмите здесь» */
.cc-spot { position: fixed; z-index: 9999; pointer-events: none; }
.cc-spot-ring {
  border: 3px solid var(--primary); border-radius: 11px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.35), 0 0 22px 7px rgba(102,126,234,.55);
  animation: ccSpotPulse 1s ease-in-out infinite;
}
.cc-spot-label {
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
@keyframes ccSpotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(102,126,234,.30), 0 0 18px 5px rgba(102,126,234,.45); }
  50%      { box-shadow: 0 0 0 7px rgba(102,126,234,.16), 0 0 30px 11px rgba(102,126,234,.7); }
}

/* ---- вложения (фото/видео/файл) ---- */
.attach-btn { padding: 9px 12px; font-size: 18px; flex: none; }
/* Task 11: у медиа-пузыря отступы почти в ноль — медиа во всю ширину пузыря */
.bubble.has-media { padding: 0; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border: none !important; overflow: hidden; }
/* кружок + кольцо прогресса выходят за края круга — баббл их НЕ клипает (иначе кольцо обрезается) */
.bubble.has-media:has(.upl-circle), .bubble.has-media:has(.circle-wrap) { overflow: visible; }
/* Одиночное фото/видео крупнее (владелец: «когда фотка или видео одно — ещё чуть больше»).
   Фото и видео = ОДИН размер 384×432 (было 240×300 / 336×384): единичное медиа консистентно,
   и превью загрузки совпадает с итоговым (.upl-thumb тоже 384×432 ниже). Альбом НЕ трогаем. */
.att-image { max-width: 384px; max-height: 432px; border-radius: 10px; display: block; cursor: pointer; }
.att-video { max-width: 384px; max-height: 432px; border-radius: 10px; display: block; background: #000; }
/* подпись под медиа прижата к краю, без широких полей.
   🔴 Пузырь медиа ПРОЗРАЧНЫЙ (has-media снимает фон), но `.msg.mine .bubble{color:#fff}`
   наследовался в подпись → на СВЕТЛОЙ канве белый текст был НЕВИДИМ. Красим подпись
   в основной цвет текста (читаемо и в тёмной, и в светлой теме — как в Telegram). */
.bubble.has-media .att-cap { padding: 4px 2px 0; color: var(--text); }

/* ---- альбом: мозаика фото/видео (Telegram-стиль), крупные миниатюры ----
   Ряды с флекс-ячейками; высота ряда задаётся его aspect-ratio (инлайн). Одна и та
   же модель рядов на вебе (albumRows) и во Flutter (album_grid.dart) — паритет. */
.album-grid { display: flex; flex-direction: column; gap: 3px; width: min(100%, 576px); border-radius: 16px; overflow: hidden; } /* плитка −20% (владелец: громоздко) 720→576 */
/* 🔴 КРУПНЫЕ миниатюры (владелец: «в 2-3 раза больше»). Раньше альбом схлопывался до
   ширины ПОДПИСИ: .msg.mine/.theirs — shrink-to-fit (align-self flex-end/start), пузырь
   media тоже, а `width:min(100%,cap)` без определённого родителя резолвился в min-content
   (≈ширина текста «Тестим загрузку»). Даём АЛЬБОМНОМУ сообщению определённую ширину:
   .msg тянется по ленте (align-self:stretch) до 92% → пузырь на всю .msg → альбом
   = min(100%, 720px). Только для альбомов (:has(.album-grid)) — одиночное фото/видео
   остаётся «по контенту» (img capped 240/280), чтобы не висеть в пустом широком пузыре. */
.msg:has(.album-grid) { align-self: stretch; max-width: 74%; } /* плитка −20% (92%→74%) */
.msg:has(.album-grid) > .bubble.has-media { width: 100%; }
.msg:has(.album-grid) .upl-album { width: 100%; } /* превью загрузки: inline-block-обёртка → на всю ширину */
.album-row { display: flex; gap: 3px; width: 100%; }
.album-cell { position: relative; overflow: hidden; cursor: pointer; background: #0b1220; min-width: 0; align-self: stretch; }
.album-cell img, .album-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.album-cell:hover img { transform: scale(1.05); }
/* значок ▶ на видео-ячейке: полупрозрачный диск + иконка по центру */
.album-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.album-play::before { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.album-play .ic { position: relative; z-index: 1; width: 27px; height: 27px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* «+N» на последней ячейке, если вложений больше показанных */
.album-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; font-weight: 600; letter-spacing: .5px; pointer-events: none; }
/* загрузка альбома: мозаика локальных превью + общий % поверх */
.upl-album { position: relative; display: inline-block; line-height: 0; border-radius: 16px; overflow: hidden; }
.upl-album .album-grid.uploading .album-cell { filter: brightness(.6); cursor: default; }

/* ---- Task 10: превью загрузки (миниатюра + прогресс + крестик ПО ЦЕНТРУ) ---- */
.upl-preview { position: relative; display: inline-block; line-height: 0; border-radius: 10px; overflow: hidden; }
.upl-thumb { max-width: 384px; max-height: 432px; border-radius: 10px; display: block; object-fit: cover; filter: brightness(.7); } /* превью загрузки = размер итогового медиа (384×432). Кружок upl (.att-circle 220) увеличение маскирует */
.upl-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; pointer-events: none;
}
.upl-pct { color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.upl-cancel-center {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85); color: #fff;
  cursor: pointer; padding: 0; transition: background .15s, transform .1s;
}
.upl-cancel-center:hover { background: var(--danger); transform: scale(1.06); }
.upl-cancel-center .ic { width: 22px; height: 22px; }
/* тонкая полоса прогресса по низу превью */
.upl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.upl-bar span { display: block; height: 100%; background: var(--primary-2); transition: width .2s ease; }
/* строка загрузки ФАЙЛА-документа: иконка + имя + полоса % + отмена (видно, что идёт upload) */
.upl-file { display: flex; align-items: center; gap: 8px; min-width: 200px; max-width: 300px; }
.upl-file .att-file-ic { flex: 0 0 auto; }
.upl-file-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.upl-file-body .att-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-file-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.upl-file-bar span { display: block; height: 100%; background: var(--primary-2); transition: width .2s ease; }
.upl-file-pct { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.upl-file-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; line-height: 0; }
.upl-file-x:hover { color: var(--text); }
/* кружок во время загрузки: первый кадр + КРУГЛОЕ кольцо прогресса + % и отмена по центру */
.upl-circle { position: relative; width: 220px; height: 220px; display: inline-block; line-height: 0; }
.upl-circle .att-circle { filter: brightness(.55); }
.upl-circle-blank { width: 220px; height: 220px; border-radius: 50%; background: #1b1f2a; display: block; }
.upl-circle-ring { position: absolute; inset: -4px; width: 228px; height: 228px; transform: rotate(-90deg); pointer-events: none; }
.upl-circle-ring .r-bg { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 4; }
.upl-circle-ring .r-fg { fill: none; stroke: var(--primary-2); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .2s ease; }
.upl-circle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; line-height: normal; }
.upl-circle-center .upl-pct { color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; }
.att-file {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 10px 14px; background: var(--panel-2); border-radius: 12px;
  color: var(--text); text-decoration: none; cursor: pointer; max-width: 100%;
}
.att-file:hover { filter: brightness(1.12); }
.att-file .att-file-ic { flex: 0 0 auto; display: inline-flex; color: var(--primary-2, var(--text)); }
.att-file .att-file-ic svg.ic { width: 20px; height: 20px; }
.att-file .att-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file .att-file-dl {
  flex: 0 0 auto; margin-left: 2px; color: var(--muted); text-decoration: none;
  line-height: 1; padding: 4px 6px; border-radius: 8px; display: inline-flex;
}
.att-file .att-file-dl svg.ic { width: 16px; height: 16px; }
.att-file .att-file-dl:hover { background: rgba(255,255,255,.12); color: var(--text); }
/* Пузырь-«моё»: чип файла тоже светлый (контраст на ярком градиенте) */
.msg.mine .att-file .att-file-ic { color: rgba(255,255,255,.92); }
.msg.mine .att-file .att-file-dl { color: rgba(255,255,255,.85); }
.msg.mine .att-file .att-file-dl:hover { color: #fff; }
.att-cap { margin-top: 4px; padding: 0 4px; }

/* ───── Просмотрщик документов в чате (iframe /app/docviewer.html) ─────
   На ВЕСЬ экран (редактору OnlyOffice нужна вся ширина; владелец просил). */
#docViewer.modal-overlay { padding: 0; }
.docviewer-box {
  width: 100vw; height: 100dvh; max-width: none;
  background: var(--panel); border: 0; border-radius: 0;
  overflow: hidden; display: flex;
}
#docViewerFrame { width: 100%; height: 100%; border: 0; background: #fff; }
/* Свёрнуто: модалка прозрачна и СКВОЗНАЯ (клики уходят в сервис), но iframe жив —
   сессия OnlyOffice/автосейв/соавторы продолжаются. */
#docViewer.dv-min { opacity: 0; pointer-events: none; }
/* Плашка «свёрнутый документ» — снизу справа, поверх сервиса. */
.dv-pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 8px; max-width: 340px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 8px 8px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  cursor: move; user-select: none; touch-action: none; /* тащим мышью/пальцем */
}
.dv-pill button { cursor: pointer; }
.dv-pill.hidden { display: none; }
.dv-pill .dv-pill-ic { display: inline-flex; color: var(--primary-2, var(--text)); }
.dv-pill .dv-pill-ic svg.ic { width: 18px; height: 18px; }
.dv-pill .dv-pill-name {
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--text);
}
.dv-pill button { border: 0; cursor: pointer; border-radius: 8px; }
.dv-pill .dv-pill-open { background: var(--primary, #5b8def); color: #fff; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dv-pill .dv-pill-open:hover { filter: brightness(1.08); }
.dv-pill .dv-pill-x { background: transparent; color: var(--muted); padding: 6px; display: inline-flex; }
.dv-pill .dv-pill-x:hover { color: var(--text); }
.dv-pill .dv-pill-x svg.ic { width: 15px; height: 15px; }

/* ───── Меню скрепки: файл / создать документ ───── */
.attach-menu {
  position: fixed; z-index: 80; min-width: 216px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.attach-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  padding: 9px 10px; border-radius: 8px; font-size: 14px; text-align: left;
}
.attach-menu button:hover { background: rgba(255,255,255,.08); }
.attach-menu button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.attach-menu .am-ic { font-size: 17px; width: 18px; text-align: center; flex: 0 0 auto; }
.attach-menu .am-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 8px 10px 4px; margin: 2px 0 0;
  border-top: 1px solid var(--line);
}

/* ---- Перетаскивание файлов: оверлей поверх .thread ---- */
.drop-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 17, 21, 0.82);
  border: 2px dashed var(--accent); border-radius: 14px;
  pointer-events: none;
}
.drop-overlay.hidden { display: none; }
.drop-inner { text-align: center; color: var(--accent); font-weight: 600; }
.drop-inner .drop-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; }

/* ---- Лоток прикреплённых файлов (staging) над композером ---- */
.attach-tray {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 0 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}
.attach-tray.hidden { display: none; }
.att-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; }
.att-tile-thumb {
  position: relative; width: 84px; height: 84px; border-radius: 10px;
  overflow: hidden; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
}
.att-tile-thumb img, .att-tile-thumb video { width: 100%; height: 100%; object-fit: cover; }
.att-tile-file { font-size: 34px; }
.att-tile-badge { position: absolute; left: 6px; bottom: 4px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.att-tile-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; line-height: 20px; padding: 0;
}
.att-tile-x:hover { background: rgba(0,0,0,0.85); }
/* Сегмент «Фото/Файл» = РОВНО по ширине плитки (84px), кнопки делят её поровну и не
   вылезают наружу. Раньше inline-flex без ширины → две кнопки шире плитки НАЛЕЗАЛИ на
   соседнюю плитку (баг владельца, паритет с Flutter-фиксом FittedBox). */
.att-tile-mode { display: flex; width: 100%; max-width: 84px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.att-mode-btn {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 11px; padding: 2px 4px; cursor: pointer; white-space: nowrap; text-align: center;
}
.att-mode-btn.on { background: var(--accent); color: #fff; }

/* ---- office-документ в лотке: право правки + режим сохранения (0098) ----
   Плитка ШИРЕ обычной (лоток flex-wrap → просто переносится): узкая обрезала «Новый файл».
   Сегмент-контрол в стиле iOS: трек-подложка + внутренние скруглённые кнопки. */
.att-tile.att-tile-wide { width: 158px; }
.att-tile-oo { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.att-oo-perm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; border: 1px solid var(--border); border-radius: 9px; background: transparent;
  color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 5px 8px; cursor: pointer;
  white-space: nowrap; transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.att-oo-perm svg.ic { width: 14px; height: 14px; flex: 0 0 auto; }
.att-oo-perm.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.att-oo-perm:hover { border-color: var(--accent); }
.att-oo-mode {
  display: flex; width: 100%; gap: 2px; padding: 2px; border-radius: 9px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.att-oo-mbtn {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 600; padding: 5px 6px; cursor: pointer; white-space: nowrap;
  text-align: center; border-radius: 7px; transition: background .13s ease, color .13s ease;
}
.att-oo-mbtn.on { background: var(--accent); color: #fff; }
.att-oo-mbtn:not(.on):hover { color: var(--text); }
/* «только просмотр» бейдж на пузыре файла */
.att-file .att-file-ro { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
.att-file .att-file-ro svg.ic { width: 14px; height: 14px; }

/* ---- карточка контакта (поделились контактом) ---- */
.contact-card { min-width: 180px; }
.contact-row { display: flex; align-items: center; gap: 10px; }
.contact-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 18px;
}
.contact-meta { min-width: 0; }
.contact-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-phone { margin-top: 1px; }
.contact-write { margin-top: 8px; width: 100%; }
.msg.mine .contact-phone { color: rgba(255,255,255,.9); }

/* ---- голосовые ---- */
.mic-btn { padding: 9px 12px; font-size: 18px; flex: none; }
.rec-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--line);
}
.rec-bar .rec-hint { flex: 1; }
.rec-bar .primary { width: auto; margin: 0; padding: 10px 18px; }
.rec-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--danger);
  animation: recpulse 1s infinite; flex: none;
}
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
/* ── Голосовое сообщение: кастомный плеер (play + волна + время), как в приложении.
   Раньше был сырой <audio controls> («ерунда» на вебе). Тема адаптируется под пузырь:
   в СВОИХ (градиент) — белым, у СОБЕСЕДНИКА — акцентным индиго. ──────────────────── */
.voice-msg {
  display: flex; align-items: center; gap: 11px;
  padding: 3px 2px 2px; min-width: 226px;
  --vp-w: 168px;                       /* ширина волны = ширине «залитого» слоя (бары совпадают) */
  --vp-dim: rgba(255,255,255,.4);      /* непройденные бары */
  --vp-lit: #fff;                      /* пройденные бары / ползунок / время */
  --vp-btn-bg: rgba(255,255,255,.92);  /* фон кнопки play */
  --vp-btn-fg: var(--primary);         /* значок play */
}
.msg.theirs .voice-msg {
  --vp-dim: rgba(139,156,245,.34);
  --vp-lit: var(--primary-2);
  --vp-btn-bg: var(--grad);
  --vp-btn-fg: #fff;
}
.vp-play {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vp-btn-bg); color: var(--vp-btn-fg);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.vp-play:hover { transform: scale(1.06); filter: brightness(1.03); }
.vp-play:active { transform: scale(.93); }
.vp-play svg.ic { width: 20px; height: 20px; }
.vp-play:not(.playing) svg.ic { margin-left: 2px; } /* треугольник ▶ — оптический центр */

.vp-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vp-wave {
  position: relative; width: var(--vp-w); height: 26px;
  cursor: pointer; touch-action: none; outline: none;
}
.vp-bars {
  position: absolute; top: 0; bottom: 0; left: 0;
  display: flex; align-items: center; gap: 2px; pointer-events: none;
}
.vp-wave > .vp-bars { right: 0; }              /* базовый слой = вся ширина волны */
.vp-bar {
  flex: 1 1 0; min-width: 2px; height: 40%;
  border-radius: 2px; background: var(--vp-dim);
  transition: background .1s linear;
}
.vp-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
  overflow: hidden; pointer-events: none;
}
.vp-fill .vp-bars { width: var(--vp-w); }      /* фикс. ширина → пройденные бары точно над базовыми */
.vp-fill .vp-bar { background: var(--vp-lit); }
.vp-knob {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--vp-lit);
  transform: translate(-50%, -50%); pointer-events: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .15s ease;
}
.vp-wave:hover .vp-knob, .voice-msg.playing .vp-knob { opacity: 1; }

.vp-meta { display: flex; align-items: center; gap: 5px; height: 14px; }
.vp-time {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--vp-lit); opacity: .9; line-height: 1;
}
.vp-meta svg.ic { width: 13px; height: 13px; color: var(--vp-lit); opacity: .55; }

/* ---- видео-кружки ---- */
.circle-btn { padding: 9px 12px; font-size: 18px; flex: none; }
.circle-wrap { position: relative; width: 220px; height: 220px; cursor: pointer; }
.att-circle {
  width: 220px; height: 220px; border-radius: 50%;
  object-fit: cover; background: #000; display: block;
}
/* кольцо прогресса по краю кружка */
.circle-ring { position: absolute; inset: -3px; width: 226px; height: 226px; transform: rotate(-90deg); pointer-events: none; }
.circle-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.circle-ring .ring-fg { fill: none; stroke: var(--primary-2); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
/* большой ▶ когда на паузе; прячется во время проигрывания */
.circle-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: rgba(255,255,255,.92); pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.circle-wrap.playing .circle-play { display: none; }
/* видео-кружок УВЕЛИЧИВАЕТСЯ на время просмотра (как в Telegram). 🔴 Меняем РЕАЛЬНЫЙ
   размер (width/height), а НЕ transform:scale — scale выходил за пределы .messages
   (overflow-y:auto → overflow-x тоже клипует) и кружок обрезался сверху/снизу. При
   изменении размера в потоке .messages просто доскролливается, ничего не режется.
   Кольцо (inset:-3px) тянется за кружком; размер задаём и ему (симметрично +3px). */
.circle-wrap,
.circle-wrap .att-circle,
.circle-wrap .circle-ring {
  transition: width .22s cubic-bezier(.22,.61,.36,1), height .22s cubic-bezier(.22,.61,.36,1);
}
.circle-wrap.playing,
.circle-wrap.playing .att-circle { width: 300px; height: 300px; }
.circle-wrap.playing .circle-ring { width: 306px; height: 306px; }
@media (max-width: 560px) {
  .circle-wrap.playing,
  .circle-wrap.playing .att-circle { width: 264px; height: 264px; }
  .circle-wrap.playing .circle-ring { width: 270px; height: 270px; }
}

/* ── Плавающее мини-видео (PiP): остаётся на фоне при переходе на другую страницу ──
   Живёт поверх всего (как свёрнутый звонок). Перетаскивается, ✕ закрывает,
   тап по кадру — вернуться в исходный чат.
   🔴 z-index ВЫШЕ полноэкранных оверлеев-«страниц» (Работа/Клиенты/Спец-ты/Компании
   = 9000–9200), иначе при открытии такой страницы PiP прятался бы ЗА ней. */
#mediaPip {
  position: fixed; z-index: 9300; right: 20px; bottom: 92px;
  display: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
#mediaPip.placed { right: auto; bottom: auto; }
#mediaPip .pip-media { display: block; }
#mediaPip .pip-video {
  display: block; width: 210px; height: auto; max-height: 300px;
  border-radius: 14px; background: #000; box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
#mediaPip.circle .pip-video {
  width: 176px; height: 176px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
#mediaPip .pip-close {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; background: rgba(20,22,30,.92);
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 2;
}
#mediaPip .pip-close:hover { background: #ef4444; }
.circle-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(8,10,14,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.circle-rec-box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.circle-preview {
  width: 280px; height: 280px; border-radius: 50%;
  object-fit: cover; background: #000; border: 3px solid var(--primary);
  transform: scaleX(-1);  /* зеркалим превью как селфи (запись не зеркалится) */
}
.circle-rec-info { display: flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.circle-rec-controls { display: flex; gap: 14px; }
.circle-rec-controls .primary { width: auto; margin: 0; }

/* запись видео с камеры / экрана (прямоугольный оверлей, тот же язык, что у кружка) */
.media-rec-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(8,10,14,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.media-rec-box { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; }
.media-rec-preview {
  width: min(560px, 92vw); max-height: 62vh; aspect-ratio: 16 / 9;
  border-radius: 14px; object-fit: contain; background: #000; border: 2px solid var(--primary);
}
.media-rec-preview.mirror { transform: scaleX(-1); }  /* селфи-камеру зеркалим, экран — нет */

/* тумблер «со звуком / без звука» записи (виден только в превью, до старта) */
.media-rec-sound {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; line-height: 1;
  border: 1.5px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #fff;
}
.media-rec-sound .ic { width: 18px; height: 18px; }
.media-rec-sound[aria-pressed="false"] {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
}
.media-rec-sound.hidden { display: none; }

/* Во время записи оверлей сворачивается в компактную плавающую «пилюлю»:
   большое превью убирается, тёмная подложка снимается, клики проходят СКВОЗЬ
   к приложению под пилюлей. Иначе фуллскрин-оверлей снимал бы сам себя, а не
   записываемое веб-приложение (и свернуть его было нельзя). Пилюлю можно таскать. */
.media-rec-overlay.mini {
  inset: auto 0 0 0;                                   /* прижать к низу экрана */
  z-index: 9400;                                       /* HUD выше модалок (9250), ниже звонка (>10000) */
  align-items: flex-end;
  padding: 0 12px max(16px, env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;                                /* сквозь оверлей — к записываемому приложению */
}
.media-rec-overlay.mini .media-rec-preview,
.media-rec-overlay.mini .media-rec-sound { display: none; }
.media-rec-overlay.mini .media-rec-box {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 9px 10px 9px 16px;
  max-width: calc(100vw - 24px);
  border-radius: 999px;
  background: var(--panel-3, #232732);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
  color: var(--text);
  pointer-events: auto;                                /* сама пилюля кликабельна/таскается */
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  animation: recPillIn .18s cubic-bezier(.22,.61,.36,1);
}
.media-rec-overlay.mini .media-rec-box.dragging { cursor: grabbing; }
@keyframes recPillIn { from { opacity: 0; } to { opacity: 1; } }
.media-rec-overlay.mini .circle-rec-info { font-size: 15px; }
.media-rec-overlay.mini .circle-rec-controls { gap: 8px; }
.media-rec-overlay.mini .circle-rec-controls .primary,
.media-rec-overlay.mini .circle-rec-controls .ghost {
  width: auto; margin: 0; padding: 8px 15px; font-size: 14px; border-radius: 999px;
}

/* ---- группы ---- */
.modal-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--line); }
.modal-foot .primary { width: 100%; margin: 0; }
.group-users { padding: 4px 0; }
.group-user label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.group-user label:hover { background: var(--panel-2); }
.group-user input { width: auto; }
.sender-name { font-size: 11px; color: var(--primary-2); font-weight: 600; margin: 0 4px 2px; }

/* ═══════════ ГРУППОВОЙ ВИДЕО-СОЗВОН — десктоп-редизайн ═══════════
   Сетка масштабируется JS (relayoutGroupGrid): под N участников выбирается
   оптимальная раскладка cols×rows (макс. площадь тайла при 16:9), а размер тайла
   задаётся --gt-w/--gt-h; flex-центрирование раскладывает и центрирует ряды в
   .gc-stage. Плитки НЕ пересоздаются при ресайзе (живут <video>). */
.groupcall-overlay {
  position: fixed; inset: 0; z-index: 56; display: flex; flex-direction: column; color: #fff;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(102,126,234,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 108%, rgba(118,75,162,.12), transparent 60%),
    #0b0d12;
  --gc-hair: rgba(255,255,255,.08); --gc-hair-2: rgba(255,255,255,.14);
  --gc-tile: #171a22; --gc-tile-off: #14161f;
  --gc-dock: rgba(22,25,33,.72); --gc-btn: rgba(255,255,255,.06); --gc-btn-h: rgba(255,255,255,.13);
}
/* ── шапка: тонкий двухколоночный бар ── */
.groupcall-head { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top) + 14px) 22px 8px; color: #fff; min-width: 0; }
.gc-head-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.groupcall-title { font-weight: 650; font-size: 15.5px; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* оверлей всегда тёмный → фиксированный светлый slate (не var(--muted), он темнеет в светлой теме) */
.gc-head-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9aa3b4; }
.gc-elapsed { font-variant-numeric: tabular-nums; color: #c7ccd8; letter-spacing: .3px; }
.gc-elapsed:empty { display: none; }
.gc-head-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: 0 0 auto; }
.gc-elapsed:empty + .gc-head-dot { display: none; }
.gc-head-count { white-space: nowrap; }
.gc-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* «идёт запись» — пилюля (заменяет старый инлайн «● REC») */
.gc-rec-dot { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 600; color: #ffd6d6; background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.30); }
.gc-rec-blob { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: gcRecPulse 2s infinite; }
.gc-rec-time { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
@keyframes gcRecPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)} 70%{box-shadow:0 0 0 6px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }

/* ── сцена: центрирует масштабируемую сетку ── */
.gc-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 22px 6px; }
/* Флекс-обёртка: JS задаёт размер тайла (--gt-w/--gt-h) под оптимальную раскладку,
   justify/align-center сами центрируют КАЖДЫЙ ряд, включая неполный последний
   (никаких «сирот» слева, без спейсеров). */
.group-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;
  gap: 10px; margin: 0; width: 100%; height: 100%;
}
.group-grid > .gtile { width: var(--gt-w, 240px); height: var(--gt-h, 135px); flex: 0 0 auto; }

/* ── плитка ── */
.gtile { position: relative; background: var(--gc-tile); border-radius: 14px; overflow: hidden; border: 1px solid var(--gc-hair); min-height: 0; min-width: 0; cursor: pointer; transition: border-color .2s; }
.gtile video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.gtile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.42) 100%); }
.gtile-local video { transform: scaleX(-1); }
/* тыловая камера (facingMode environment) — БЕЗ зеркала; класс no-mirror ставит switchCamera/switchGroupCamera/sfuSwitchCamera */
.videos .local.no-mirror,
.gtile-local video.no-mirror { transform: none; }
/* камера выключена → скрыть видео, показать аватар-инициалы */
.gtile.cam-off { background: var(--gc-tile-off); }
.gtile.cam-off video { display: none; }
.gt-avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: clamp(52px, 11vh, 104px); aspect-ratio: 1; border-radius: 50%; display: none; align-items: center; justify-content: center; color: #fff; font-weight: 600; letter-spacing: .5px; font-size: clamp(18px, 4.4vh, 38px); box-shadow: 0 10px 26px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.gtile.cam-off .gt-avatar { display: flex; }
/* активный спикер — кольцо + свечение (box-shadow, без reflow) */
.gtile.speaking { border-color: transparent; box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px rgba(102,126,234,.18), 0 0 22px 1px rgba(102,126,234,.30); animation: gcSpeak 2.4s ease-in-out infinite; }
@keyframes gcSpeak {
  0%,100% { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px rgba(102,126,234,.16), 0 0 16px 1px rgba(102,126,234,.22); }
  50%     { box-shadow: 0 0 0 2px var(--primary-2), 0 0 0 6px rgba(139,156,245,.26), 0 0 30px 3px rgba(139,156,245,.42); }
}
/* эквалайзер-бейдж у говорящего */
.gt-eq { position: absolute; top: 9px; right: 9px; z-index: 3; display: none; align-items: flex-end; gap: 2.5px; height: 14px; padding: 6px 7px; border-radius: 7px; background: rgba(9,11,16,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gtile.speaking .gt-eq { display: flex; }
.gt-eq i { width: 2.5px; background: var(--primary-2); border-radius: 2px; animation: gcEq .9s ease-in-out infinite; }
.gt-eq i:nth-child(1){ height: 5px; animation-delay: 0s; }
.gt-eq i:nth-child(2){ height: 13px; animation-delay: .15s; }
.gt-eq i:nth-child(3){ height: 8px; animation-delay: .3s; }
@keyframes gcEq { 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1); } }
/* кнопка «свернуть» на главном тайле спотлайта (вернуть в сетку / снять закреп) */
.gt-collapse {
  position: absolute; top: 8px; right: 8px; z-index: 4; display: none;
  width: 30px; height: 30px; padding: 0; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(9,11,16,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; border: 1px solid var(--gc-hair); cursor: pointer;
}
.gt-collapse svg.ic { width: 16px; height: 16px; }
.group-grid.spotlight .gtile.main .gt-collapse { display: flex; }
.group-grid.spotlight .gtile.main.speaking .gt-eq { right: 46px; }
/* имя-пилюля (стекло) + значок «микрофон выключен» */
.gname {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; max-width: calc(100% - 20px);
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px;
  background: rgba(9,11,16,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.07); font-size: 12.5px; font-weight: 500; line-height: 1; color: #fff;
}
.gt-name-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-mic { display: none; flex: 0 0 auto; color: #ff8f8f; }
.gt-mic svg.ic { width: 14px; height: 14px; display: block; }
.gtile.mic-off .gt-mic { display: inline-flex; }
/* Демонстрация экрана — показываем ВЕСЬ кадр (object-fit:contain), чтобы ничего не обрезалось.
   Демонстрация приоритетнее «камера выключена»: всегда показываем экран, аватар прячем. */
.gtile.screen-share video { object-fit: contain; background: #000; display: block; }
.gtile.screen-share .gt-avatar { display: none; }

/* ── СПОТЛАЙТ: большой главный тайл + лента миниатюр ── */
.group-grid.spotlight { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; align-items: stretch; width: 100%; height: 100%; overflow: auto; }
.group-grid.spotlight .gtile { flex: 0 0 clamp(120px, 15vw, 190px); height: clamp(76px, 11vh, 104px); min-height: 0; aspect-ratio: auto; order: 0; }
/* Главный тайл — на всю высоту минус лента миниатюр (её высота + зазор). */
.group-grid.spotlight .gtile.main { flex: 1 1 100%; height: calc(100% - clamp(76px, 11vh, 104px) - 12px); min-height: 180px; aspect-ratio: auto; order: -1; }
/* аватар в миниатюре ленты — компактнее (иначе диск вылезает за низкий тайл) */
.group-grid.spotlight .gtile:not(.main) .gt-avatar { width: clamp(32px, 7vh, 52px); font-size: clamp(13px, 2.6vh, 20px); box-shadow: none; }

/* ── ДОК управления: плавающая стеклянная пилюля (в потоке — сцена авто-освобождает место) ── */
.groupcall-controls {
  flex: 0 0 auto; align-self: center; width: max-content; max-width: calc(100vw - 28px);
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 8px 10px; margin: 6px auto calc(env(safe-area-inset-bottom) + 18px);
  background: var(--gc-dock); border: 1px solid var(--gc-hair-2); border-radius: 18px;
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.gc-grp { display: flex; align-items: center; gap: 6px; }
.gc-sep { width: 1px; height: 26px; background: var(--gc-hair-2); margin: 0 2px; flex: 0 0 auto; }
.groupcall-controls button {
  position: relative; width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 12px;
  border: 1px solid transparent; background: var(--gc-btn); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .16s, color .16s, transform .1s;
}
.groupcall-controls button:hover { background: var(--gc-btn-h); border-color: transparent; }
.groupcall-controls button:active { transform: scale(.94); }
.groupcall-controls button svg.ic { width: 20px; height: 20px; }
/* выключено (мик/камера) — приглушённо-красный, БЕЗ перечёркивания */
.groupcall-controls .off { opacity: 1; text-decoration: none; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.34); color: #ffb0b0; }
.groupcall-controls .off:hover { background: rgba(239,68,68,.24); }
/* демонстрация экрана активна */
.groupcall-controls .sharing { background: var(--grad); box-shadow: 0 0 0 2px rgba(255,255,255,.28) inset; color: #fff; }
/* «Выйти» — отдельная форма/цвет, всегда отличима от красной записи */
.groupcall-controls .gc-leave { width: auto; padding: 0 18px; gap: 8px; border-radius: 12px; background: var(--danger); color: #fff; font-weight: 600; font-size: 13.5px; }
.groupcall-controls .gc-leave:hover { background: #dc2f2f; }
.groupcall-controls .gc-leave svg.ic { width: 18px; height: 18px; }
.groupcall-controls .gc-leave span { white-space: nowrap; }
/* тултипы дока */
.groupcall-controls button[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 11px); left: 50%;
  transform: translateX(-50%) translateY(4px); background: #0e1017; color: #fff; font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 7px; white-space: nowrap; border: 1px solid var(--gc-hair-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 20;
}
.groupcall-controls button[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- управление группой ---- */
.gs-wide { width: 100%; margin: 0; }
.gs-member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.gs-member:hover { background: var(--panel-2); }
.gs-mem-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.gs-member .conv-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-badge { font-size: 10px; background: var(--mine); color: var(--primary-2); padding: 2px 7px; border-radius: 8px; flex: none; }
.gs-mem-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.gs-mem-actions .ghost.small { padding: 4px 8px; font-size: 12px; }
.gs-role { color: var(--primary-2); }
.gs-remove { color: var(--danger); flex: none; }
#gsAddBtn { margin-top: 6px; }
#gsAddBtn:disabled { opacity: .5; cursor: default; }
.gs-add-search { margin: 4px 0 6px; }
/* список участников/кандидатов — прокручиваемый, чтобы модал не растягивался */
#gsMembers, #gsAddList { max-height: 240px; overflow-y: auto; }

/* кружок-аватар участника (фото/постер видео или инициалы) + точка онлайна */
.gs-mem-av-wrap { position: relative; flex: none; width: 34px; height: 34px; }
.gs-mem-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.gs-mem-av.has-img { background-size: cover; background-position: center; color: transparent; }
.gs-mem-dot {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--panel);
}
.group-user label .conv-name { flex: 1; min-width: 0; }

/* ---- папки чатов (рельс) ---- */
.folder-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; }
.folder-row.active { background: var(--panel-2); }
.folder-row .folder-open { flex: 1; min-width: 0; font-weight: 500; cursor: pointer; text-align: left; background: transparent; border: none; color: var(--text); padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-row .folder-open:hover { color: var(--primary-2); }
.folder-row .folder-count { font-size: 11px; color: var(--muted); flex: none; min-width: 18px; text-align: right; }
.folder-act { flex: none; }
.folder-act.del { color: var(--danger); }
#folderNewBtn { margin-top: 6px; }
/* пилюля-хинт «краткое имя» в строке папки */
.folder-row .folder-short-tag {
  flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 6px; padding: 1px 8px;
}
/* поле «краткое имя» в панели наполнения папки */
.folder-short-row { display: block; margin: 4px 0 8px; }
.folder-short-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.folder-short-row #folderShortName { margin: 0; }

/* ── всплывашка рельса (мгновенная, на body → не срезается overflow рельса) ── */
.cc-railtip {
  position: fixed; z-index: 10000; pointer-events: none;
  max-width: 240px; padding: 6px 10px; border-radius: 8px;
  background: var(--text); color: var(--bg);
  font-size: 12px; line-height: 1.3; font-weight: 600;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55);
}
.cc-railtip.hidden { display: none; }
#folderEditWrap { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }

/* Пикер наполнения папки: поиск + сегменты категорий + список кандидатов */
.folder-pick-search {
  width: 100%; box-sizing: border-box; margin: 2px 0 8px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 13px; outline: none;
}
.folder-pick-search:focus { border-color: var(--primary, #6c5ce7); }
.folder-pick-search::placeholder { color: var(--muted); }
.folder-pick-segs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.folder-pick-seg {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-1, .12s), color var(--dur-1, .12s), border-color var(--dur-1, .12s);
}
.folder-pick-seg:hover { color: var(--text); }
.folder-pick-seg.active { background: var(--primary, #6c5ce7); border-color: var(--primary, #6c5ce7); color: #fff; }
.folder-pick-list { max-height: 44vh; overflow-y: auto; }
.folder-pick-item label { display: flex; align-items: center; gap: 10px; }
.folder-pick-item .fp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-pick-item .fp-sub {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted);
}
.folder-pick-item .fp-sub.fp-user { background: rgba(46,204,113,.16); color: #2ecc71; }
.folder-pick-item .fp-sub.fp-project { background: rgba(108,92,231,.16); color: var(--primary-2, #a29bfe); }

/* ---- ответить / переслать / удалить ---- */
.msg { position: relative; touch-action: pan-y; -webkit-touch-callout: none; transition: transform .18s ease; }
/* Task 5: иконка ответа ↩ — плавнее проявляется и «подскакивает» при достижении порога */
.swipe-reply {
  position: absolute; left: -34px; top: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mine, rgba(124,109,255,.15)); color: var(--primary-2);
  font-size: 15px; opacity: 0;
  transform: translateY(-50%) scale(.5);
  transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.msg.swipe-armed .swipe-reply { opacity: 1; transform: translateY(-50%) scale(1); }
/* подсветка пузыря при достижении порога свайпа */
.msg.swipe-armed .bubble {
  box-shadow: 0 0 0 2px var(--primary-2);
  transition: box-shadow .14s ease;
}
/* подсветка при переходе к сообщению (тап по ответу/цитате): чёткая рамка + свечение
   появляются сразу, ДЕРЖАТСЯ, затем плавно гаснут — как подсветка совпадения в поиске,
   а не мгновенный пульс. */
/* Подсветка перехода-по-ответу — ИДЕНТИЧНА .search-current: статичная индиго-рамка
   (--primary) + градиентное свечение (--glow). Раньше была CSS-анимация (flashbubble),
   которая у части пользователей не проигрывалась → «ответ не подсвечивается, а поиск да».
   Держим класс 1.6с из JS (state.flashSeq), плавное гашение — transition. */
.msg.flash .bubble,
.msg.flash.mine .bubble,
.msg.flash.theirs .bubble,
.msg.flash .bubble.has-media {
  /* !important + варианты mine/theirs/has-media — иначе тень своих пузырей и особенно
     `.bubble.has-media{box-shadow:none!important}` (ответы на фото/видео/кружок) перебивали
     подсветку → «на ответах подсветки нет». Поиск работал, т.к. имел такие же варианты. */
  box-shadow: 0 0 0 2px var(--primary), 0 0 18px 4px var(--glow) !important;
  transition: box-shadow .45s ease;
}

/* цитата отвечаемого сообщения внутри пузыря */
.reply-quote {
  display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  border-left: 3px solid var(--primary-2); border-radius: 6px;
  background: rgba(255,255,255,.06); padding: 3px 8px; margin-bottom: 5px; max-width: 100%;
}
.rq-name { color: var(--primary-2); font-size: 12px; font-weight: 600; }
.rq-text { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

/* 🔆 На СВОЁМ пузыре фон — яркий градиент (--grad), а не тёмный список. Цитаты/превью/пилюли
   по умолчанию красятся под тёмный фон (--muted #8b93a3 / --primary(-2)) и на градиенте почти
   сливаются («плохо текст видно на который отвечают»). Перекрываем на бело-контрастные. */
.msg.mine .reply-quote,
.msg.mine .link-preview       { background: rgba(255,255,255,.14); border-left-color: rgba(255,255,255,.72); }
.msg.mine .rq-name,
.msg.mine .lp-site            { color: #fff; }
.msg.mine .rq-text,
.msg.mine .lp-desc            { color: rgba(255,255,255,.9); }
.msg.mine .bubble .msg-link   { color: #fff; }
.msg.mine .msg-task-ref       { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.msg.mine .msg-task-ref:hover { background: rgba(255,255,255,.28); }
.msg.mine .bubble .msg-event-ref { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.msg.mine .bubble .mer-title  { color: #fff; }
.msg.mine .bubble .mer-when   { color: rgba(255,255,255,.85); }

/* панель «ответ на …» над композером */
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--line); background: var(--panel); }
.reply-bar-icon { color: var(--primary-2); font-size: 18px; flex: none; }
.reply-bar-text { flex: 1; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-bar-text b { color: var(--primary-2); }
/* Правка ПОДПИСИ к вложению: в плашке показываем саму миниатюру, чтобы было
   видно, к чему подпись, — редактор подписи не должен быть голым полем.
   Хэйрлайн вместо жирной рамки; цвет берётся из токена → светлая и тёмная темы
   одинаково аккуратны. Размер совпадает с высотой строки плашки (8+32+8 = 48). */
.reply-bar-icon .edit-thumb {
  width: 32px; height: 32px; display: block; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2);
}

/* контекст-меню сообщения */
.msg-menu {
  position: fixed; z-index: 70; min-width: 162px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.msg-menu button { background: transparent; border: none; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 14px; }
.msg-menu button:hover { background: var(--panel); }
.msg-menu .msg-menu-del { color: var(--danger); }

/* ---- SVG-иконки на кнопках ---- */
button svg.ic { width: 22px; height: 22px; display: block; }
.ic-rot135 svg.ic { transform: rotate(135deg); }
#createMenuBtn, #logoutBtn { display: inline-flex; align-items: center; gap: 6px; }
#createMenuBtn svg.ic, #logoutBtn svg.ic { width: 18px; height: 18px; }
.msg-menu button { display: flex; align-items: center; gap: 10px; }
.msg-menu button svg.ic { width: 18px; height: 18px; flex: none; }
.reply-bar-icon { display: inline-flex; }
.reply-bar-icon svg.ic { width: 18px; height: 18px; }
.circle-play svg.ic { width: 46px; height: 46px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.call-controls button svg.ic { width: 24px; height: 24px; }
.mini-bar button svg.ic { width: 18px; height: 18px; }

/* ---- поиск по чатам ---- */
.conv-search {
  width: calc(100% - 16px);
  margin: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.conv-search:focus { border-color: var(--primary); }

/* ── Таб-фильтры списка: Все / Чаты / Группы / Тикеты ── */
/* Лента табов: ОДНА строка. Прокрутка остаётся страховкой на случай, если колонку сузили
   до минимума (210px) — при 280px ряд влезает целиком и скроллить нечего (см. .conv-tab). */
.conv-tabs { display: flex; gap: 2px; padding: 0 8px 8px; overflow-x: auto; overflow-y: hidden;
  flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.conv-tabs::-webkit-scrollbar { height: 0; display: none; }
/* 🔴 ЛЕНТА, КОТОРАЯ НЕ ПРЯЧЕТ СЕБЯ. Колонка чатов узкая (--w-chats, по умолчанию 280px),
   чипов 7 — часть ВСЕГДА за краем. Полоса прокрутки здесь скрыта намеренно (она уродлива и
   ест 11px, см. rail-scrollbar-gutter), но без неё не остаётся НИ ОДНОГО признака, что за
   краем есть ещё вкладки: владелец так и не нашёл «Эфиры» — раздел был на экране, но за
   границей видимости. Лечим тем же приёмом, что Safari/App Store: край подтаивает маской,
   когда есть куда скроллить. Маска — на самой ленте (обёртки нет, DOM не трогаем), классы
   ставит convTabsEdges() по факту измерения, а не «на глазок». */
.conv-tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); }
.conv-tabs.more-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
  mask-image: linear-gradient(to right, transparent 0, #000 34px); }
.conv-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
/* Идёт эфир — чип «Эфиры» не имеет права прятаться за краем: подсвечиваем его,
   а convTabsEdges() доскроллит ленту так, чтобы он был виден (см. app.js). */
.conv-tab.is-live { color: var(--text); }
/* 🔴🔴 ВСЕ СЕМЬ ЧИПОВ — В ОДНУ СТРОКУ, БЕЗ ПРОКРУТКИ (владелец: «Нет, одна строка должна
   быть»). Перенос на две строки ОТКЛОНЁН явно, поэтому семь подписей в 280px уместить
   нечем — 732px контента в 264px не влезают физически. Решение: подпись держит ТОЛЬКО
   активный чип, остальные схлопываются до иконки. Активных всегда ровно один → ширина
   ряда = 6 иконок + одна подпись ≈ 240px < 264px, и ряд помещается целиком.
   Почему так, а не «сократить подписи»: «Гр.»/«Тик.» — те же обрезки на середине слова,
   от которых мы уходим; иконка + подпись у выбранного читается однозначно (паттерн
   таб-баров iOS/macOS), а что выбрано — видно всегда.
   🔴 Схлопывание — через max-width подписи, а НЕ display:none: иначе смена активного
   чипа была бы рывком и соседи прыгали бы. Переход 150ms — см. .conv-tab-l ниже. */
/* 🔴 НИ ОДИН чип не сжимается (flex: 0 0 auto) — ни иконка, ни подпись активного. Пробовал
   отдать подпись под flex-shrink «чтобы точно влезло»: измерение стенда показало, что она
   схлопывается в 0–2px, то есть у выбранного раздела ПРОПАДАЕТ имя, а ряд рапортует «влез».
   Это ровно тот обман, из-за которого «Эфиры» и потерялись. Правило: подпись либо видна
   целиком, либо ряд честно прокручивается (третья ступень, .more-l/.more-r). */
.conv-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 4px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; scroll-snap-align: start;
  /* 🔴 padding в transition НЕ входит осознанно. Ступень .tight меняет отступы, а решение
     о ней convTabsEdges() принимает ПО ИЗМЕРЕНИЮ сразу после смены класса — анимированный
     padding отдавал бы в этот момент ещё старое значение, ряд «не влезал» и ступень не
     срабатывала (поймано на стенде). Разворот чипа и так плавный: его несут max-width и
     margin подписи, а 2px отступа рядом с 40px подписи глазом не читаются. */
  transition: background .14s cubic-bezier(.4,0,.2,1), color .14s cubic-bezier(.4,0,.2,1),
    border-color .14s cubic-bezier(.4,0,.2,1); }
.conv-tab svg.ic { width: 15px; height: 15px; flex: none; }
.conv-tab.active { padding: 0 6px; }
.conv-tab .conv-tab-l { display: block; max-width: 0; opacity: 0; margin-left: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: max-width .15s cubic-bezier(.4,0,.2,1), margin-left .15s cubic-bezier(.4,0,.2,1), opacity .12s linear; }
.conv-tab.active .conv-tab-l { max-width: 110px; opacity: 1; margin-left: 5px; }
.conv-tab:hover { background: var(--panel-2); color: var(--text); }
.conv-tab.active { background: var(--panel-2); color: var(--text); border-color: var(--primary); }
/* 🔴 БЕЙДЖ. У СВЁРНУТОГО чипа — в углу иконки (как в таб-баре iOS): инлайн-пилюля стоила бы
   ~24px ширины на КАЖДЫЙ чип, семь таких не влезли бы никогда, плюс ряд ездил бы туда-сюда
   на каждое входящее сообщение. В углу счётчик занимает 0px ширины ряда, а читаемость держат
   контрастная заливка и кольцо цветом панели — цифры не сливаются со штрихами иконки. */
.conv-tab-n { position: absolute; top: 0; right: 0; z-index: 1;
  min-width: 13px; height: 13px; padding: 0 3px; line-height: 13px; border-radius: 7px;
  font-size: 8.5px; font-weight: 700; background: var(--primary); color: #fff;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1.5px var(--panel); }
/* 🔴 А у АКТИВНОГО чипа бейдж возвращается В СТРОКУ, после подписи. Угловой бейдж ложился
   поверх хвоста подписи и срезал её на середине буквы («Группь⁷», «Тикеть⁴») — тот самый
   дефект, от которого уходим. Замер ширины это не ловит: перекрытие видно только глазами,
   поймано скриншотом. Активный чип ровно один, +20px на него ряд выдерживает. */
.conv-tab.active .conv-tab-n { position: static; margin-left: 5px; box-shadow: none;
  height: 14px; line-height: 14px; min-width: 14px; border-radius: 7px; font-size: 9px; }
/* Идёт эфир — бейдж красный. Правило стоит ПОСЛЕ .conv-tab-n: специфичность равная,
   выигрывает последнее, иначе «в эфире» потеряло бы свой цвет. */
.conv-tab.is-live .conv-tab-n { background: #e0245e; color: #fff; }
/* 🔴 УЗКАЯ КОЛОНКА. Ширина колонки чатов тянется пользователем от 210px до 560px
   (resizeCols: --w-chats). При 280px ряд влезает с запасом, но на минимуме 210px даже семь
   голых иконок шире полосы — поэтому вторая ступень: класс .tight ставит convTabsEdges()
   ПО ФАКТУ ИЗМЕРЕНИЯ переполнения, а не по «media-query наугад» (медиазапрос смотрит на окно,
   а сужают здесь колонку — окно при этом не меняется вовсе). Ужимаем только воздух: иконка
   остаётся 16px, чтобы чип не перестал читаться. Если и .tight не хватило — остаётся третья
   ступень, прокрутка с подтаивающим краем (.more-l/.more-r выше). */
.conv-tabs.tight .conv-tab { padding: 0 3px; }
.conv-tabs.tight .conv-tab.active { padding: 0 6px; }
.conv-tabs.tight .conv-tab.active .conv-tab-l { margin-left: 4px; }
/* Третья ступень — колонка ужата к самому минимуму (210px), где даже .tight не спасает:
   подпись убирается и у АКТИВНОГО чипа, ряд становится чисто иконочным. Что выбрано —
   по-прежнему видно: активный чип держит заливку и обводку. Это лучше прокрутки: все семь
   разделов остаются НА ЭКРАНЕ, а именно их исчезновение за краем и было исходным багом. */
.conv-tabs.micro .conv-tab, .conv-tabs.micro .conv-tab.active { padding: 0 3px; }
.conv-tabs.micro .conv-tab.active .conv-tab-l { max-width: 0; opacity: 0; margin-left: 0; }
/* Подписи в .micro нет ни у кого — значит и бейджу активного нечего подпирать: возвращаем
   его в угол, иначе активный чип оставался бы вдвое шире прочих и ряд снова не влезал. */
.conv-tabs.micro .conv-tab.active .conv-tab-n { position: absolute; top: 0; right: 0; margin-left: 0;
  height: 13px; line-height: 13px; min-width: 13px; font-size: 8.5px; box-shadow: 0 0 0 1.5px var(--panel); }
/* 🔴 ИЗМЕРЕНИЕ БЕЗ АНИМАЦИИ. Ступени выше выбираются перемериванием ряда сразу после смены
   класса, а max-width подписи анимирован — во время перехода браузер отдаёт ПРОМЕЖУТОЧНУЮ
   ширину, и ступень оценивалась бы по ещё не наступившей раскладке (ровно так .micro и не
   срабатывал: подпись «схлопнута», а меряется 69px). На время замера гасим переходы. */
.conv-tabs.measuring .conv-tab, .conv-tabs.measuring .conv-tab .conv-tab-l { transition: none; }
/* строка-тикет в списке (вкладка «Тикеты») */
.tk-av { background: color-mix(in srgb, var(--primary) 18%, var(--panel-2)); display: flex; align-items: center; justify-content: center; color: var(--primary-2); }
.tk-av svg.ic { width: 20px; height: 20px; }
/* строка приватного чата задачи в списке «Все» — иконка красится в цвет статуса задачи
   (--conv-accent, задаётся инлайн на .conv-item), тон капсулы и иконки совпадают (0141). */
.tkc-av { background: color-mix(in srgb, var(--conv-accent, var(--urg-done)) 18%, var(--panel-2)); display: flex; align-items: center; justify-content: center; color: var(--conv-accent, var(--urg-done)); }
.tkc-av svg.ic { width: 19px; height: 19px; }
.tkc-proj { display: inline-flex; align-items: center; gap: 3px; }
.tkc-proj svg.ic { width: 11px; height: 11px; }
.conv-item.tkc-item.unread .conv-name { font-weight: 700; }
.conv-item.tk-item .conv-marks { display: flex; align-items: center; gap: 5px; }
/* поиск внутри модалки «Пользователи» — на всю ширину тела модалки */
.users-search { width: 100%; margin: 0 0 8px; }

/* ---- глобальный поиск: секции «Чаты / Сообщения / Контакты» ---- */
.search-section {
  list-style: none;
  padding: 10px 12px 4px; margin: 4px 0 0;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.search-section:first-child { margin-top: 0; }
.search-empty { padding: 14px; line-height: 1.4; }
/* сниппет сообщения: одна строка с многоточием, имя отправителя выделено */
.search-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sender { color: var(--text); font-weight: 600; }
.search-inapp { color: var(--ok); }
/* подсветка совпадения запроса в имени/сниппете результата поиска */
.search-hl { color: var(--accent); font-weight: 700; }

/* ---- настройки: уведомления ---- */
.settings-section { display: flex; flex-direction: column; gap: 10px; }
.settings-title { font-size: 16px; font-weight: 700; }
.settings-hint { margin: 0; line-height: 1.4; }
.notify-status {
  font-size: 16px; font-weight: 700; text-align: center;
  padding: 14px 12px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.notify-status.on { color: var(--ok); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.notify-status.off { color: var(--muted); }
.notify-status.blocked { color: var(--danger); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.notify-help {
  margin: 0; padding: 12px 14px; border-radius: 10px; line-height: 1.45;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3);
  color: var(--text); font-size: 13px;
}
.notify-big-btn { width: 100%; margin: 0; padding: 14px; font-size: 15px; }

/* Первый вход: одно-кнопочная карточка включения уведомлений. */
.notify-prompt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; max-width: 340px; padding: 32px 26px;
  animation: notifyPromptIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes notifyPromptIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* Иконка-колокол в градиентном круге (вместо эмодзи) + лёгкий «звон» при появлении. */
.notify-prompt-icon {
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #667EEA, #764BA2);
  box-shadow: 0 10px 26px rgba(102,126,234,.42);
  margin-bottom: 4px;
}
.notify-prompt-icon svg {
  width: 38px; height: 38px; stroke: #fff;
  transform-origin: 50% 18%;
  animation: bellRing 1.1s ease .35s 1;
}
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(14deg); }
  24% { transform: rotate(-11deg); }
  36% { transform: rotate(8deg); }
  48% { transform: rotate(-5deg); }
  60% { transform: rotate(2deg); }
}
.notify-prompt-title { font-size: 18px; font-weight: 700; }
.notify-prompt-sub { font-size: 13px; margin-bottom: 8px; }
.notify-prompt .notify-big-btn { max-width: 260px; }
/* Уважаем «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  .notify-prompt, .notify-prompt-icon svg { animation: none; }
}

/* ---- настройки: профиль ---- */
.profile-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.profile-avatar-row { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--panel-2); border: 1px solid var(--line);
  background-size: cover; background-position: center; overflow: hidden;
}
.profile-avatar.has-img { border-color: var(--primary); cursor: pointer; }
.profile-avatar-actions { display: flex; flex-direction: column; gap: 4px; }

/* ---- настройки группы: аватар (фото/видео) ---- */
.gs-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gs-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: var(--panel-2); border: 1px solid var(--line);
  background-size: cover; background-position: center; overflow: hidden;
}
.gs-avatar.has-img { border-color: var(--primary); }
.gs-avatar video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.profile-status {
  font-size: 13px; text-align: center; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.profile-status.ok { color: var(--ok); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.profile-status.error { color: var(--danger); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }

/* ---- аудиозвонок: та же плашка, чуть приглушённый акцент ---- */
.call-btn-audio { margin-right: 0; }

/* ======================================================================= *
 *  ГАЛЕРЕЯ ПРОФИЛЯ (фото/видео «о себе») + просмотр профиля + лайтбокс
 * ======================================================================= */
.profile-gallery-block { margin-top: 14px; }
.profile-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px; margin: 8px 0;
}
.profile-gallery .gi {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.profile-gallery .gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-gallery .gi .gi-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none;
}
.profile-gallery .gi .gi-del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
  color: #fff; background: rgba(8,10,14,.66); cursor: pointer;
}
.profile-gallery .gi .gi-del:hover { background: var(--danger, #ef4444); }
.profile-gallery .gi-empty { grid-column: 1 / -1; padding: 10px 2px; }

/* шапка профиля пользователя */
.profile-avatar.lg { width: 92px; height: 92px; font-size: 42px; }
.user-profile-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; }
.user-profile-name { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; }
.user-profile-bio { color: var(--text); font-size: 14px; line-height: 1.4; margin: 10px 0; white-space: pre-wrap; }

/* лайтбокс: полноэкранный просмотр фото/видео */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lightbox-content { max-width: 96vw; max-height: 92vh; display: flex; }
.lightbox-content img, .lightbox-content video { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 18px; color: #fff; background: rgba(255,255,255,.14);
}
.lightbox-close:hover { background: rgba(255,255,255,.26); }
/* листалка: стрелки ‹ › по краям + счётчик «i / N» снизу */
.lightbox-overlay .lb-prev, .lightbox-overlay .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border-radius: 50%; border: none; cursor: pointer; color: #fff; background: rgba(255,255,255,.14);
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
  z-index: 2; -webkit-user-select: none; user-select: none;
}
.lightbox-overlay .lb-prev { left: 16px; }
.lightbox-overlay .lb-next { right: 16px; }
.lightbox-overlay .lb-prev:hover, .lightbox-overlay .lb-next:hover { background: rgba(255,255,255,.26); }
.lightbox-overlay .lb-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 999px; z-index: 2;
}
@media (max-width: 540px) {
  .lightbox-overlay .lb-prev { left: 6px; }
  .lightbox-overlay .lb-next { right: 6px; }
}

/* имя автора в группе — кликабельно (открывает профиль) */
.sender-name[data-uid] { cursor: pointer; }
.sender-name[data-uid]:hover { text-decoration: underline; }

/* ───────────── Запись коллабов: кнопка, индикатор, список, отчёт ───────────── */
/* активная кнопка записи в панели созвона — красная */
/* Кнопка записи активна — фирменный индиго + красная точка-бейдж (НЕ красная, как «Выйти»). */
#gcRecBtn.recording { color: #fff; background: var(--grad); border-color: transparent; }
#gcRecBtn.recording::before { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #1b1e27; }
/* индикатор «● REC 0:00» в шапке созвона */
.gc-rec-dot {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
  color: var(--danger); font-size: 12px; font-weight: 600;
  animation: gcRecBlink 1.4s ease-in-out infinite;
}
@keyframes gcRecBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* секция записей в «Управление группой» */
.gs-recordings { margin-top: 6px; }
.rec-list { max-height: 240px; overflow-y: auto; }
.rec-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
}
.rec-item:hover { background: var(--panel-2); }
.rec-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rec-icon { font-size: 18px; flex: none; }
.rec-meta { min-width: 0; line-height: 1.25; }
.rec-actions { display: flex; align-items: center; gap: 6px; flex: none; }

/* модалка отчёта */
.rec-report-box { max-width: 640px; width: 92vw; }
.rec-report-body { max-height: 64vh; overflow-y: auto; }
.rec-report-body h4 { margin: 16px 0 6px; font-size: 13px; color: var(--primary-2); }
.rec-report-body ul { margin: 0; padding-left: 20px; }
.rec-report-body li { margin: 4px 0; }
.rec-summary { margin: 0 0 4px; line-height: 1.45; }
.rec-tasks { list-style: none; padding-left: 0 !important; }
.rec-task {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.rec-task-ttl { flex: 1 1 200px; display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.rec-task-as { flex: 0 0 auto; max-width: 200px; }
.rec-transcript-wrap { margin-top: 16px; }
.rec-transcript-wrap summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.rec-transcript {
  margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--panel-2);
  white-space: pre-wrap; line-height: 1.5; font-size: 13px; color: var(--text);
}
.rec-report-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-report-foot a { text-decoration: none; }

/* ============================================================== *
 *  ЗАДАЧНИК — рабочее пространство (Список / Плитки / Доска-канбан)
 *  Оверлей поверх области справа от рельса (96px). Открывается из
 *  рельса «Задачи», из шапки группы и из заголовка столбика задач.
 * ============================================================== */
.chat { position: relative; }                 /* контекст для абсолютного оверлея */
.tasks-workspace {
  position: absolute; inset: 0 0 0 96px; z-index: 40;
  background: var(--bg); display: flex; flex-direction: column; min-height: 0;
}
.tasks-workspace.hidden { display: none; }

.tw-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px; border-bottom: 1px solid var(--line); }
.tw-title { font-size: 18px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.tw-count { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.tw-spacer { flex: 1; }
/* «＋ Задача» — резиновая: тянется по остатку строки, но сжимается ПЕРВОЙ
   (высокий flex-shrink), уступая место заголовку и сегментам. Без этого
   .primary{width:100%} распирал шапку и левый контент не влезал. */
#twNew { width: auto; margin-top: 0; flex: 1 100 auto; min-width: 116px; white-space: nowrap; }
#twClose { flex: 0 0 auto; }
.tw-seg { flex: 0 0 auto; display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 2px; gap: 2px; }
.tw-seg button { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background .12s, color .12s; }
.tw-seg button .ic { width: 16px; height: 16px; }
.tw-seg button:hover { color: var(--text); }
.tw-seg button.active { background: var(--grad); color: #fff; box-shadow: 0 4px 12px -4px var(--glow); }
.tw-seg button.active .ic { color: #fff; }
.tw-seg .tw-seg-label { } /* на узких — скрываем подпись (см. медиа) */

.tw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tw-filter-group { display: flex; align-items: center; gap: 6px; }
/* кастом-селект (не голый <select>): chevron + focus-ring (правило «дизайн=UX») */
select.tw-select {
  appearance: none; -webkit-appearance: none;
  background: var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 9px center;
  border: 1px solid var(--line); color: var(--text); border-radius: 9px;
  padding: 7px 28px 7px 11px; font-size: 13px; cursor: pointer; max-width: 220px;
  transition: border-color .12s, box-shadow .12s;
}
select.tw-select:hover { border-color: var(--primary); }
select.tw-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tw-chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  padding: 6px 11px; border-radius: 9px; font-size: 12.5px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tw-chip:hover { color: var(--text); }
.tw-chip.active { background: var(--grad); color: #fff; border-color: transparent; }
/* Поиск + действия (Архив/Выбрать) — своя строка на всю ширину тулбара: поиск слева
   умеренной ширины, кнопки прижаты вправо (margin-left:auto). Раньше .tw-search был
   flex:1 и распирался на весь ряд, не оставляя места кнопкам. */
.tw-search-row { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.tw-search {
  flex: 0 1 360px; min-width: 150px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 7px 12px; font-size: 13px;
}
.tw-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-toolbar-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* Кнопки-действия тулбара (иконка+подпись). НЕ .tw-select — то правило для голых <select>
   рисует фоновый шеврон и +34px правого паддинга → на кнопке был фантомный «вниз» и перекос. */
.tw-tool-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, color .12s;
}
.tw-tool-btn:hover { border-color: var(--primary); }
.tw-tool-btn:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-tool-btn svg.ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.tw-tool-btn.active { color: var(--primary); border-color: var(--primary); }
.tw-tool-btn.active svg.ic { color: var(--primary); }
/* «Идёт» — тумблер задач с моим запущенным таймером. Активное состояние в семье var(--info)
   (а не --primary), чтобы кнопка читалась как один объект с бейджем таймера, который она
   фильтрует. Тонкая рамка + мягкая подложка, без сплошной заливки. */
.tw-run-btn:hover { border-color: var(--info); }
.tw-run-btn:focus { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.tw-run-btn.active { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.tw-run-btn.active svg.ic { color: var(--info); animation: wipPulse 1.8s ease-in-out infinite; }
.tw-run-btn.active span { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Область задач — кнопка-триггер поискового пикера (замена голого <select>). */
.tw-scope-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 7px 10px 7px 11px; font-size: 13px; cursor: pointer;
  max-width: 260px; min-width: 150px; transition: border-color .12s, box-shadow .12s;
}
.tw-scope-btn:hover { border-color: var(--primary); }
.tw-scope-btn:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-scope-btn .tw-scope-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-scope-btn svg.ic { width: 15px; height: 15px; flex: none; }
.tw-scope-btn svg.ic:first-child { color: var(--muted); }
.tw-scope-btn svg.ic:last-child { color: var(--muted); opacity: .8; }
.tw-scope-pop {
  position: fixed; z-index: 96; background: var(--panel-3, var(--panel-2)); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 6px;
  box-sizing: border-box; max-height: calc(100dvh - 24px);
}
.tw-scope-search { position: relative; display: flex; align-items: center; }
.tw-scope-search svg.ic { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.tw-scope-search input {
  width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: 13px; padding: 9px 12px 9px 32px; outline: none;
}
.tw-scope-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-scope-list { flex: 1 1 auto; min-height: 0; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tw-scope-sec { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 8px 3px; }
.tw-scope-sec svg.ic { width: 13px; height: 13px; flex: none; }
.tw-scope-row { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; color: var(--text); text-align: left; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tw-scope-row:hover, .tw-scope-row.kb { background: var(--panel); }
.tw-scope-row.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.tw-scope-row.on:hover, .tw-scope-row.on.kb { background: var(--panel); } /* видимый курсор наведения/клавиатуры даже на уже выбранной строке */
.tw-scope-row > svg.ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.tw-scope-row.on > svg.ic { color: var(--primary); }
.tw-scope-row .tc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tw-scope-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-scope-n { font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; flex: none; } /* рамка — чтобы пилюля не сливалась с фоном строки при hover/клавиатуре */
.tw-scope-empty { padding: 14px 8px; text-align: center; }
/* Мультивыбор проектов в фильтре области (0065-ext) — Apple-grade: чёткий чекбокс у КАЖДОГО
   проекта (пустой/залитый), субтильная подсветка выбранного (не заливка всей строки), плавно. */
.tw-scope-row.multi { padding-right: 10px; }
.tw-scope-row.multi .tw-scope-n { margin-left: auto; }         /* счётчик прижат вправо, перед чекбоксом */
.tw-scope-chk {
  position: relative;
  width: 20px; height: 20px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
/* Комфортная зона клика по галке (шире визуального квадрата) — чтобы легко попадать в мультивыбор. */
.tw-scope-chk::before { content: ""; position: absolute; inset: -9px -8px -9px -8px; }
.tw-scope-row.multi:active .tw-scope-chk { transform: scale(.9); }
.tw-scope-row.multi:hover .tw-scope-chk { border-color: var(--muted); }
.tw-scope-chk.on {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 45%, transparent);
}
.tw-scope-chk > svg.ic { width: 13px; height: 13px; color: #fff; stroke-width: 3; transform: scale(.9); }
.tw-scope-chk.on > svg.ic { animation: twChkPop .18s ease; }
@keyframes twChkPop { from { transform: scale(.4); opacity: .4; } to { transform: scale(.9); opacity: 1; } }
/* Выбранный проект: НЕ заливаем строку целиком — лёгкий tint + акцентная граница слева. */
.tw-scope-row.multi.on { background: color-mix(in srgb, var(--primary) 9%, transparent); box-shadow: inset 2px 0 0 var(--primary); }
.tw-scope-row.multi.on:hover, .tw-scope-row.multi.on.kb { background: color-mix(in srgb, var(--primary) 15%, transparent); }
.tw-scope-row.multi .tc-dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
/* Футер «Выбрано N · Сбросить». */
.tw-scope-foot { flex: none; }
.tw-scope-foot:not(:empty) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px 3px; margin-top: 2px; border-top: 1px solid var(--line); }
.tw-scope-foot-lbl { font-size: 12.5px; color: var(--muted); }
.tw-scope-foot-lbl b { color: var(--text); font-weight: 600; }
.tw-scope-reset {
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 8px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.tw-scope-reset:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
.tw-scope-btn.multi { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.tw-scope-btn.multi svg.ic:first-child { color: var(--primary); }

.tw-body { flex: 1; min-height: 0; overflow: auto; }
.tw-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 48px 24px; }

/* ── общая карточка задачи (плитки + канбан) ──
   Приоритет — плавающая скруглённая капсула-акцент слева (с мягким свечением), а не жёсткая
   квадратная линия border-left: тот же приём и те же координаты (left:6px, шир.3px, паритет
   .conv-item.tkc-conv::before), чтобы акценты по всему приложению выглядели одним стилем. */
.tw-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 12px 11px 18px; cursor: pointer;
  transition: border-color .12s, transform .08s, box-shadow .12s;
}
.tw-card::before {
  content: ""; position: absolute; left: 6px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--line); transition: box-shadow .15s ease;
}
.tw-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.tw-card.prio-urgent::before { background: var(--urg-overdue); box-shadow: 0 0 7px -1px color-mix(in srgb, var(--urg-overdue) 65%, transparent); }
.tw-card.prio-high::before   { background: var(--urg-today); box-shadow: 0 0 7px -1px color-mix(in srgb, var(--urg-today) 65%, transparent); }
.tw-card.prio-normal::before { background: var(--ok); box-shadow: 0 0 7px -1px color-mix(in srgb, var(--ok) 65%, transparent); }
.tw-card.prio-low::before    { background: #6B7280; }
.tw-card.done .tw-card-title { color: var(--muted); text-decoration: line-through; }
/* Отменённая карточка (доска/плитки/v2): зачёркнута + приглушена (паритет со столбиком). */
.tw-card.cancelled { opacity: .6; }
.tw-card.cancelled .tw-card-title { color: var(--muted); text-decoration: line-through; }
.tw-card.cancelled .tr-ppl { opacity: .5; }
.tw-card-title { font-size: 14px; color: var(--text); line-height: 1.35; margin-bottom: 6px; word-break: break-word; }
.tw-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Прогресс-бар чек-листа на карточке: полоса во всю ширину + счётчик N/M. Зелёный при 100%. */
.tw-card-ck { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tw-card-foot + .tw-card-ck { margin-top: 6px; }
.tw-ck-bar { flex: 1 1 auto; min-width: 40px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tw-ck-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #667eea, #8b9cf5); transition: width .3s ease; }
.tw-card-ck.done .tw-ck-bar i { background: var(--ok); }
.tw-ck-n { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-card-ck.done .tw-ck-n { color: var(--ok); }
.tw-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.tw-pill.sub, .tw-pill.link { color: var(--primary-2); }
.tw-pill.parent { color: var(--muted); }
.tw-pill.rel { cursor: pointer; }
.tw-pill.rel:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-2); }
.tw-pill.status-open        { background: rgba(139,147,163,.16); color: #aeb6c6; }
.tw-pill.status-in_progress { background: var(--info-soft); color: var(--info); }
.tw-pill.status-done        { background: rgba(34,197,94,.16); color: var(--urg-done); }
.tw-pill.status-cancelled   { background: rgba(107,114,128,.16); color: #8b93a3; }
.tw-pill.lbl { background: color-mix(in srgb, var(--lc, var(--muted)) 16%, transparent); color: color-mix(in srgb, var(--lc, var(--muted)) 74%, #fff); font-weight: 600; }
.tw-pill.lbl .tw-lbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lc, var(--muted)); flex: none; }
/* Пилюля-кнопка смены статуса в карточке задачи (клик открывает меню статусов). */
.tip-status-btn { border: none; cursor: pointer; font: inherit; line-height: 1; }
.tip-status-btn:hover { filter: brightness(1.15); }
.tip-status-btn svg { width: 13px; height: 13px; opacity: .7; }
.tw-pill.due-overdue { background: var(--urg-overdue-soft); color: var(--urg-overdue); }
.tw-pill.due-today   { background: var(--urg-today-soft); color: var(--urg-today); }
.tw-pill .ic { width: 13px; height: 13px; }
.tw-avs { display: inline-flex; align-items: center; }
.tw-av { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -7px; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.tw-av:first-child { margin-left: 0; }

/* ── вид «Плитки» ── */
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px; }

/* ── вид «Список» (секции по срочности, как в столбике) ── */
.tw-list { padding: 10px 16px 24px; }
.tw-sec-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 16px 2px 8px; }
.tw-sec-title:first-child { padding-top: 4px; }
.tw-sec-title.tst-overdue { color: var(--urg-overdue); } .tw-sec-title.tst-today { color: var(--urg-today); }
.tw-sec-title.tst-soon { color: var(--primary-2); } .tw-sec-title.tst-none { color: #6B7280; }
.tw-sec-title.tst-done { color: var(--urg-done); }
.tw-sec-title.tst-cancelled { color: #8b93a3; }
/* Список пространства: «Идёт таймер» / «В работе» — та же семья var(--info), что бейдж таймера. */
.tw-sec-title.tst-running, .tw-sec-title.tst-wip { color: var(--info); }
.tw-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 17px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; }
.tw-row::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--row-accent, transparent);
  box-shadow: 0 0 7px -1px color-mix(in srgb, var(--row-accent, transparent) 65%, transparent);
}
.tw-row:hover { background: var(--panel); }
.tw-row.prio-urgent { --row-accent: var(--urg-overdue); } .tw-row.prio-high { --row-accent: var(--urg-today); }
.tw-row.done .tw-row-title { color: var(--muted); text-decoration: line-through; }
.tw-row.cancelled { opacity: .6; }
.tw-row.cancelled .tw-row-title { color: var(--muted); text-decoration: line-through; }
.tw-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; }
.tw-check:hover { border-color: var(--primary); }
.tw-row.done .tw-check { background: var(--ok); border-color: var(--ok); }
.tw-check svg { width: 12px; height: 12px; }
.tw-row-main { flex: 1; min-width: 0; }
.tw-row-title { font-size: 14px; color: var(--text); }
.tw-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ── вид «Доска» (канбан) ── */
/* Гуттеры: слева даёт padding-left, справа — трейлинг ::after (обычный padding-right при
   горизонтальном скролле «схлопывается» → последняя колонка липла к краю). Симметрично 16px. */
.tw-board { display: flex; gap: 12px; padding: 16px 0 16px 16px; height: 100%; align-items: flex-start; box-sizing: border-box; }
.tw-board::after { content: ""; flex: 0 0 16px; align-self: stretch; }
.tw-col { flex: 1 1 0; min-width: 230px; max-width: 360px; --col-bg: var(--panel-2); background: var(--col-bg); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: 100%; }
.tw-col.drop-hover { border-color: var(--primary); box-shadow: 0 0 0 2px var(--glow) inset; }
.tw-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-size: 13px; font-weight: 650; color: var(--text); position: relative; }
.tw-col-dot { width: 9px; height: 9px; border-radius: 50%; }
.tw-col-dot.status-open { background: #aeb6c6; } .tw-col-dot.status-in_progress { background: #3B82F6; }
.tw-col-dot.status-done { background: var(--ok); } .tw-col-dot.status-cancelled { background: #6B7280; }
.tw-col-count { color: var(--muted); font-weight: 500; }
.tw-col-body { padding: 4px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 36px; }
.tw-card.dragging { opacity: .4; }
.tw-card[draggable="true"] { cursor: grab; }
/* «+» в шапке столбца + инлайн-композер новой задачи */
.tw-col-add { margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tw-col-add:hover { background: var(--panel-2); color: var(--primary-2); }
.tw-col-add svg.ic { width: 16px; height: 16px; }
.tw-add-box { display: flex; flex-direction: column; gap: 7px; background: var(--panel-2); border: 1px solid var(--primary); border-radius: 12px; padding: 9px 10px; }
.tw-add-input { background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.tw-add-input::placeholder { color: var(--muted); }
.tw-add-row { display: flex; align-items: center; gap: 10px; }
.tw-add-detail { display: inline-flex; align-items: center; gap: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.tw-add-detail:hover { border-color: var(--primary); }
.tw-add-detail svg.ic { width: 13px; height: 13px; }
.tw-add-hint { color: var(--muted); font-size: 11px; margin-left: auto; }

/* Строка «куда уедет задача» в быстром композере (2026-07-19). Владелец: показанное
   ОБЯЗАНО совпадать с созданным. Тон — служебная подпись, а не второй заголовок:
   хэйрлайн сверху, мелкий текст, ярлыки приглушены. Тёмная/светлая — на переменных. */
.tw-target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  margin: 6px 0 0; padding: 6px 2px 0; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.35; color: var(--text); }
.tw-target-i { color: var(--muted); font-size: 10.5px; letter-spacing: .01em; }
.tw-target-sep { color: var(--muted); opacity: .55; margin: 0 2px; }
.tw-target-warn { color: var(--warn, #b26a00); }
.tw-target-warn .tw-target-i { color: inherit; opacity: .75; }

/* ── Trello-стиль: управление столбцами прямо на доске ── */
.tw-col.col-dragging { opacity: .45; }
.tw-col.col-drop-before { box-shadow: -3px 0 0 0 var(--primary); }
.tw-col.col-drop-after  { box-shadow: 3px 0 0 0 var(--primary); }
.tw-col-head.editable { cursor: grab; }
.tw-col-head .tw-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; border-radius: 5px; padding: 1px 4px; margin: -1px -2px; }
.tw-col-head .tw-col-name[contenteditable="true"] { white-space: normal; overflow: visible; background: var(--panel); box-shadow: 0 0 0 2px var(--glow); cursor: text; }
.tw-col-dot.clickable { cursor: pointer; }
.tw-col-dot.clickable:hover { box-shadow: 0 0 0 3px var(--glow); }
/* Навигация столбца (выделить всё/следить/добавить/меню) — оверлей поверх ХВОСТА
   заголовка, вне потока и скрыт по умолчанию: раньше эти иконки навсегда резервировали
   ширину (менюшки opacity:0, но место держали; колокольчик — opacity:.55 всегда виден),
   из-за чего название столбца обрезалось многоточием почти сразу («К вы…», «В раб…» —
   жалоба владельца, скрин задачи). Теперь в потоке только точка+имя+счётчик (имя получает
   всю свободную ширину), а .tw-col-tools всплывает по hover столбца поверх хвоста имени;
   градиент фона столбца под иконками — чтобы обрезанный текст под ними не резался жёстко.
   Грипа нет: весь столбец draggable, тащить можно прямо за название (cursor:grab на шапке). */
.tw-col-tools {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 1px;
  padding-left: 22px; border-radius: 8px;
  background: linear-gradient(to right, transparent, var(--col-bg) 20px, var(--col-bg));
  opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.tw-col:hover .tw-col-tools,
.tw-col-tools:has(.tw-col-menu-btn.open),
.tw-col-tools:has(.tw-col-selall) { opacity: 1; pointer-events: auto; }
.tw-col-tools .tw-col-menu-btn, .tw-col-tools .tw-col-selall { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; padding: 0; }
.tw-col-tools .tw-col-menu-btn:hover, .tw-col-tools .tw-col-menu-btn.open, .tw-col-tools .tw-col-selall:hover { background: var(--panel); color: var(--text); }
.tw-col-tools .tw-col-menu-btn svg.ic, .tw-col-tools .tw-col-selall svg.ic { width: 16px; height: 16px; }
/* 0066/0097: тумблер «отслеживать столбец» (колокольчик, доска проекта). Строго по hover,
   как остальная навигация — без исключения для включённой подписки (было раньше, владелец
   попросил убрать: «видно осталось, пусть только при наведении появляется»). */
.tw-col-tools .tw-col-watch { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; padding: 0; }
.tw-col-tools .tw-col-watch:hover { background: var(--panel); color: var(--text); }
.tw-col-tools .tw-col-watch.on { color: var(--primary); }
.tw-col-tools .tw-col-watch svg.ic { width: 16px; height: 16px; }
/* плитка «добавить столбец» */
.tw-addcol { flex: 0 0 auto; width: 240px; min-width: 240px; }
.tw-addcol-btn { width: 100%; display: flex; align-items: center; gap: 7px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: 14px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.tw-addcol-btn:hover { border-color: var(--primary); color: var(--text); background: var(--panel-2); }
.tw-addcol-btn svg.ic { width: 16px; height: 16px; }
.tw-addcol-form { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tw-addcol-form input, .tw-addcol-form select { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-sizing: border-box; width: 100%; }
.tw-addcol-form input:focus, .tw-addcol-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tw-addcol-actions { display: flex; gap: 6px; }
.tw-addcol-actions button { flex: 1; }
/* поповер: меню/цвет/категория столбца */
.tw-pop { position: fixed; z-index: 9600; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.5); padding: 7px; min-width: 192px; }
.tw-pop-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.tw-pop-item:hover { background: var(--panel-2); }
/* danger-пункт меню: красный ТЕКСТ на прозрачном (глобальный .danger + light-override красят фон
   в красный с спецификой 0,2,1 → перебиваем равной/большей спецификой в обеих темах). */
.tw-pop-item.danger, html[data-theme="light"] .tw-pop-item.danger { color: var(--danger); background: transparent; }
.tw-pop-item.danger:hover, html[data-theme="light"] .tw-pop-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.tw-pop-item svg.ic { width: 15px; height: 15px; flex: none; }
.tw-pop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.tw-pop-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 4px; }
.tw-pop-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 4px 8px 8px; }
.tw-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; }
.tw-swatch:hover { transform: scale(1.14); }
.tw-swatch.sel { border-color: var(--text); }
.tw-pop-cats { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 2px; }
.tw-pop-cat { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); }
.tw-pop-cat:hover { background: var(--panel-2); }
.tw-pop-cat.sel { background: var(--panel-2); font-weight: 600; }
.tw-pop-cat .tw-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── модалка детали/редактора задачи ── */
.task-detail-box { max-width: 720px; }
.td-body { display: flex; flex-direction: column; gap: 14px; }
.td-title-input { font-size: 17px; font-weight: 600; width: 100%; background: transparent; border: none; border-bottom: 1px solid transparent; color: var(--text); padding: 4px 2px; }
.td-title-input:hover { border-bottom-color: var(--line); }
.td-title-input:focus { outline: none; border-bottom-color: var(--primary); }
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.td-field { display: flex; flex-direction: column; gap: 5px; }
.td-field > span { font-size: 12px; color: var(--muted); }
.td-field select, .td-field input[type="date"], .td-desc {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 10px; font-size: 13px; width: 100%;
}
.td-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 28px; cursor: pointer; }
.td-field select:focus, .td-desc:focus, .td-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
/* ⏰ 0076 «Весь день» под полем срока: аккуратная строка-чип (не голый чекбокс), 4/8-grid,
   мягкий hover и выраженное checked-состояние. Смысл: срок = календарный день, одинаковый
   во всех часовых поясах (протокол — время 23:59). */
.td-allday {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: 2px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--muted); font-size: 12px; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.td-allday:hover { border-color: var(--primary); color: var(--text); }
.td-allday input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.td-allday:has(input:checked) { border-color: var(--primary); color: var(--text); background: var(--glow); }
.td-allday input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.td-desc { resize: vertical; min-height: 56px; line-height: 1.4; }
.td-section-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
/* карточка задачи: режим ПРОСМОТРА (редактирование — по кнопке «Изменить») */
.td-view-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.td-view-title { flex: 1; font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }
.td-view-head .td-title-input { flex: 1; }
.td-view-head .td-edit-toggle { flex: none; width: auto; display: inline-flex; align-items: center; gap: 5px; }
.td-edit-toggle svg.ic { width: 15px; height: 15px; }
/* 2 колонки: слева контент, справа боковая карточка с мета */
.td-layout { display: flex; gap: 18px; align-items: flex-start; margin-top: 6px; }
.td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.td-side { width: 232px; flex: none; display: flex; flex-direction: column; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.td-side-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.td-side-row .tw-pill { align-self: flex-start; }
.td-side .td-field { gap: 5px; }
.td-side-sec { display: flex; flex-direction: column; gap: 6px; }
.td-view-k { font-size: 11.5px; color: var(--muted); }
.td-view-v { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.td-view-v svg.ic { width: 14px; height: 14px; color: var(--muted); }
.td-view-v .td-prio-dot, .td-prio-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.td-view-desc { font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.td-asg.view { padding-right: 10px; }
/* футер карточки: иконки в кнопках инлайн (а не блоком-сверху) */
.td-foot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.td-foot-row .tw-spacer { flex: 1; }
.td-foot-row button { display: inline-flex; align-items: center; gap: 6px; }
.td-foot-row svg.ic { width: 15px; height: 15px; display: inline-block; }
@media (max-width: 720px) { .td-layout { flex-direction: column; } .td-side { width: auto; } }
/* табы карточки: Задача / Чат задачи */
.td-tabs { display: flex; gap: 6px; margin: 4px 0 12px; border-bottom: 1px solid var(--line); }
.td-tabs button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0;
  border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 8px 4px; margin-bottom: -1px; }
.td-tabs button svg.ic { width: 15px; height: 15px; }
.td-tabs button:hover { color: var(--text); }
.td-tabs button.active { color: var(--text); border-bottom-color: var(--primary); }
/* чат задачи */
.td-chat-attached { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; }
.td-chat-attached svg.ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.td-chat-attached button { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.td-chat-attached button svg.ic { width: 13px; height: 13px; }
.td-parts { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 2px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.td-part-grp { display: flex; flex-direction: column; gap: 5px; }
.td-part-grp .td-view-k { display: inline-flex; align-items: center; gap: 5px; }
.td-part-grp .td-view-k svg.ic { width: 13px; height: 13px; }
.td-part-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.td-chat-msgs { max-height: 42vh; overflow-y: auto; padding: 4px 2px; margin-bottom: 8px; }
/* чат задачи в ОСНОВНОЙ панели треда (как беседа) */
.taskchat-head { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.taskchat-msgs { padding: 14px; }
.thread-av.tkc-av { display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--urg-done) 20%, var(--panel-2)); color: var(--urg-done); }
.thread-av.tkc-av svg.ic { width: 22px; height: 22px; }
/* ── Правый информ-столбик чата задачи ── */
.task-info-panel { width: var(--w-taskinfo, 330px); flex: none; border-left: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; min-height: 0; position: relative; /* якорь для .col-resizer на левой кромке */ }
/* Ресайзер на ЛЕВОЙ кромке панели (в отличие от колонок — тянем за левый шов). */
.col-resizer.col-resizer-left { right: auto; left: -4px; }
/* В режиме ШТОРКИ-модалки (`.as-overlay`) хваталка тянет САМУ модалку задачи (её ширину) —
   поэтому её ПОКАЗЫВАЕМ (раньше пряталась: там она двигала невидимую грид-колонку).
   Ставим ВНУТРИ панели (у оверлея overflow:hidden клипнул бы left:-4px). На мобиле скрыта
   общим правилом `@media(max-width:720){.col-resizer{display:none}}`; ниже возвращаем её на
   узком десктопе (561–720), где модалка всё ещё уже вьюпорта. */
.task-info-panel.as-overlay .col-resizer.col-resizer-left { left: 0; width: 12px; }
/* Светящуюся линию держим НА самом шве (левой кромке панели), как у всех прочих ресайзеров —
   иначе она «висит» отступя внутрь и смотрится неровно. Внешнюю половину свечения слегка
   срежет overflow:hidden оверлея — это допустимо (линия важнее ровности свечения). */
.task-info-panel.as-overlay .col-resizer.col-resizer-left::after { left: 0; transform: none; }
@media (min-width: 561px) { .task-info-panel.as-overlay .col-resizer.col-resizer-left { display: block; } }
.tip-head { padding: 13px 16px; border-bottom: 1px solid var(--line); flex: none; display: flex; align-items: center; gap: 8px; }
.tip-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; border-radius: 6px; }
.tip-title[role=button] { cursor: text; padding: 2px 6px; margin: -2px -6px; transition: background .12s; }
.tip-title[role=button]:hover { background: var(--panel-2); }
.tip-title.editing { background: var(--panel-2); outline: 1.5px solid var(--accent); cursor: text; }
.tip-title-edit { flex: none; opacity: .55; }
.tip-title-edit:hover { opacity: 1; }
/* Вкладки шторки задачи: Карточка | Чат */
.tip-tabs { display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); flex: none; }
.tip-tab { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 8px 10px; cursor: pointer; margin-bottom: -1px; }
.tip-tab:hover { color: var(--text); }
.tip-tab.active { color: var(--primary-2); border-bottom-color: var(--primary); }
.tip-tab svg.ic { width: 15px; height: 15px; }
/* Докнутая карточка (сплит-вид: чат СЛЕВА + карточка справа): вкладка «Чат» не нужна —
   чат уже открыт слева, дублировать его в карточке незачем → её прячем. Но «Карточка» и
   «История» полезны и тут, поэтому сами вкладки ОСТАВЛЯЕМ видимыми (раньше прятали всю
   панель). Оверлей-режим (`.as-overlay`, из списка/доски) показывает все три вкладки. */
.task-info-panel:not(.as-overlay) .tip-tab[data-tiptab="chat"] { display: none; }
.tip-collapse { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: 8px; display: none; flex: none; }
.tip-collapse svg.ic { width: 17px; height: 17px; }
.tip-collapse:hover { background: var(--panel-2); color: var(--text); }
.task-info-panel:not(.as-overlay) .tip-collapse { display: inline-flex; }
/* «Раскрыть в модалку» — та же панель шторкой поверх чата (докнутый столбец 330px слишком
   узок для работы). Иконка maximize оптически крупнее «свернуть» из-за угловых штрихов —
   гасим на полпикселя и приглушаем, чтобы группа кнопок в шапке читалась как один ряд. */
.tip-expand svg.ic { width: 16px; height: 16px; }
.tip-expand { opacity: .72; }
.tip-expand:hover { opacity: 1; }
.tip-scroll { flex: 1; overflow-y: auto; padding: 13px 14px; display: flex; flex-direction: column; gap: 15px; }
.tip-status-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.tip-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tip-actions button { width: auto; display: inline-flex; align-items: center; gap: 5px; }
.tip-actions svg.ic { width: 14px; height: 14px; }
.tip-time { display: flex; align-items: center; gap: 8px; }
.tip-time .td-view-k { display: inline-flex; align-items: center; gap: 5px; }
.tip-time .td-view-k svg.ic { width: 13px; height: 13px; }
.tip-time-v { margin-left: auto; font-size: 13px; color: var(--text); }
.tip-running { color: var(--urg-done); font-weight: 600; }
.tip-meta { display: flex; flex-direction: column; gap: 9px; }
.tip-sec { display: flex; flex-direction: column; gap: 7px; }
.tip-sec .td-section-h { display: inline-flex; align-items: center; gap: 5px; }
.tip-sec .td-section-h svg.ic { width: 13px; height: 13px; }
.tip-check { display: flex; align-items: flex-start; gap: 11px; padding: 9px 2px; }
.tip-check + .tip-check { border-top: 1px solid var(--line); }
.tip-check > span { flex: 1; font-size: 14.5px; line-height: 1.45; color: var(--text); padding-top: 1px; }
.tip-check.done > span { text-decoration: line-through; color: var(--text); opacity: .72; }
.tip-check .td-check-box, .tip-check .tip-x { margin-top: 1px; }
/* Ручка-грип для перетаскивания порядка пунктов чек-листа (drag&drop мышкой) */
.tip-ck-grip { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); cursor: grab; padding: 2px 0; margin-top: 1px; display: inline-flex; opacity: .45; touch-action: none; transition: opacity .12s; }
.tip-ck-grip:hover { opacity: 1; }
.tip-ck-grip svg.ic { width: 15px; height: 15px; }
/* Приподнятая («лифт») строка при перетаскивании — Apple-grade: непрозрачная карточка, мягкая
   тень, лёгкий scale (в transform из JS). z-index держит её над соседями. */
.tip-check.ck-dragging { position: relative; z-index: 6; background: var(--panel-2); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.10); }
.tip-check.ck-dragging .tip-ck-grip { cursor: grabbing; opacity: 1; }
/* Во время реордера: без выделения текста, без хэйрлайнов-разделителей (чтобы линия не «резала»
   приподнятую карточку), плавность через will-change. */
.tip-checks.ck-reordering { user-select: none; -webkit-user-select: none; }
.tip-checks.ck-reordering .tip-check { will-change: transform; }
.tip-checks.ck-reordering .tip-check + .tip-check { border-top-color: transparent; }
/* Видимый карандаш-«изменить» на строке (паритет с Flutter Icons.edit_outlined): всегда виден
   субтильно, ярче на hover строки. Раньше правка была только по клику на текст (title-тултип) —
   пользователь её не находил → «редактирование пропало». */
.tip-ck-editbtn { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 2px; margin-top: 1px; display: inline-flex; border-radius: 5px; opacity: .5;
  transition: opacity .12s, color .12s, background .12s; }
.tip-ck-editbtn svg.ic { width: 14px; height: 14px; }
.tip-check:hover .tip-ck-editbtn { opacity: 1; }
.tip-ck-editbtn:hover { color: var(--primary); background: var(--panel-2); opacity: 1; }
/* Клик по тексту пункта тоже открывает правку; курсор-«текст» + мягкая подсветка подсказывают */
.tip-check > span.tip-ck-t[data-ckedit] { cursor: text; border-radius: 5px; padding: 0 3px; margin: 0 -3px; transition: background .12s; }
.tip-check > span.tip-ck-t[data-ckedit]:hover { background: var(--panel-2); }
/* В режиме правки строки — прячем грип и карандаш, поле правки занимает строку целиком */
.tip-check.ck-editing .tip-ck-grip, .tip-check.ck-editing .tip-ck-editbtn { display: none; }
.tip-check input.tip-ck-edit { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text); border: 1px solid var(--primary); border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 14.5px; line-height: 1.4; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.tip-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; border-radius: 5px; }
.tip-x:hover { color: var(--urg-overdue); background: var(--panel-2); }
.tip-x svg.ic { width: 13px; height: 13px; }
/* Видимая кнопка «Прокомментировать в чате» на строке чек-листа (паритет с заметками
   data-notecomment): субтильна, ярче на hover строки. Раньше это действие было ТОЛЬКО в
   ПКМ/долгом-тапе — пользователь его не находил → «прокомментировать не работает». */
.tip-ck-cmtbtn { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 2px; margin-top: 1px; display: inline-flex; border-radius: 5px; opacity: .5;
  transition: opacity .12s, color .12s, background .12s; }
.tip-ck-cmtbtn svg.ic { width: 14px; height: 14px; }
.tip-check:hover .tip-ck-cmtbtn { opacity: 1; }
.tip-ck-cmtbtn:hover { color: var(--primary); background: var(--panel-2); opacity: 1; }
.tip-check.ck-editing .tip-ck-cmtbtn { display: none; }

/* ═══ НЕСКОЛЬКО ИМЕНОВАННЫХ ЧЕК-ЛИСТОВ В ЗАДАЧЕ (0081) ═══
   Список = блок: тонкая шапка (имя + карандаш + свой счётчик + «…») → своя полоса прогресса →
   свои пункты → свой композер. Разделяем ВОЗДУХОМ и хэйрлайном, БЕЗ вторых плашек-заливок:
   карточка задачи уже стоит на --panel-2, ещё один фон превратил бы её в «лестницу коробок».
   Всё на токенах → светлая и тёмная темы одинаково выверены. */
.tip-ck-groups { display: flex; flex-direction: column; gap: 14px; }
.tip-ckg { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tip-ckg + .tip-ckg { border-top: 1px solid var(--line); padding-top: 14px; }
.tip-ckg-h { display: flex; align-items: center; gap: 6px; min-height: 22px; min-width: 0; }
/* Имя списка — на ступень тише заголовка карточки (тот индиго/uppercase): это подуровень */
.tip-ckg-t { min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--text);
  letter-spacing: -.005em; border-radius: 6px; padding: 1px 4px; margin: 0 -4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .14s; }
.tip-ckg-t[data-ckgedit] { cursor: text; }
.tip-ckg-t[data-ckgedit]:hover { background: var(--panel); }
/* Карандаш «переименовать» и «…» — та же субтильная манера, что у карандаша пункта:
   всегда видны едва-едва, проявляются на hover блока, акцент — на самом hover кнопки. */
.tip-ckg-pen, .tip-ckg-menu { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 3px; display: inline-flex; border-radius: 6px; opacity: .45;
  transition: opacity .14s, color .14s, background .14s; }
.tip-ckg-pen svg.ic, .tip-ckg-menu svg.ic { width: 14px; height: 14px; }
.tip-ckg:hover .tip-ckg-pen, .tip-ckg:hover .tip-ckg-menu { opacity: 1; }
.tip-ckg-pen:hover, .tip-ckg-menu:hover { color: var(--primary); background: var(--panel); opacity: 1; }
.tip-ckg-pen:focus-visible, .tip-ckg-menu:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 3px var(--glow); }
.tip-ckg-cnt { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.tip-ckg-menu { margin-left: 2px; }
/* «…» единственного (свёрнутого) списка живёт в шапке КАРТОЧКИ — hover-родитель там другой */
.tip-ck-hdmenu { opacity: .45; margin-left: 0; }
.tip-card:hover .tip-ck-hdmenu { opacity: 1; }
/* Инлайн-переименование списка — то же поле-с-кольцом, что у правки пункта (.tip-ck-edit) */
.tip-ckg.ckg-editing .tip-ckg-pen { display: none; }
.tip-ckg-edit { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--primary); border-radius: 7px; padding: 3px 7px; font: inherit;
  font-size: 13.5px; font-weight: 650; line-height: 1.4; outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* Полоса прогресса СПИСКА — тоньше общей (4 против 5): визуальная иерархия «карточка → список» */
.tip-ckg-bar { height: 4px; }
/* «＋ Чек-лист» — тихое действие, а не CTA: пунктирная рамка как у .tip-chipbtn.dash */
.tip-ck-newlist { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--line-strong); color: var(--muted);
  font: inherit; font-size: 13px; line-height: 1.2; padding: 6px 11px; border-radius: 10px;
  cursor: pointer; transition: color .14s, border-color .14s, background .14s, box-shadow .14s; }
.tip-ck-newlist svg.ic { width: 14px; height: 14px; }
.tip-ck-newlist:hover { color: var(--primary-2); border-color: var(--primary); background: var(--panel); }
.tip-ck-newlist:focus-visible { outline: none; border-color: var(--primary); color: var(--primary-2);
  box-shadow: 0 0 0 3px var(--glow); }

/* Быстрое контекст-меню сущности карточки (ПКМ / долгий тап по заметке или пункту чек-листа).
   Плавающий поповер уровня системного меню macOS: хэйрлайн, мягкая тень, лёгкое появление.
   🔴 Раньше у .cc-entmenu НЕ было ни одного правила — без position:fixed left/top игнорировались,
   меню падало неоформленным блоком в конец <body>. */
.cc-entmenu { position: fixed; z-index: 9700; min-width: 214px; max-width: 320px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 16px 46px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.28);
  animation: ccEntIn .13s cubic-bezier(.2,.8,.2,1); transform-origin: top left; }
@keyframes ccEntIn { from { opacity: 0; transform: scale(.96) translateY(-2px); } to { opacity: 1; transform: none; } }
.cc-entmenu-b { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; padding: 9px 11px; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.2; transition: background .1s; }
.cc-entmenu-b:hover { background: var(--panel); }
.cc-entmenu-b svg.ic { width: 17px; height: 17px; flex: none; color: var(--muted); }
.cc-entmenu-b.pri { color: var(--primary); font-weight: 600; }
.cc-entmenu-b.pri svg.ic { color: var(--primary); }
.cc-entmenu-b.dng { color: var(--danger); }
.cc-entmenu-b.dng svg.ic { color: var(--danger); }
.tip-check-add { display: flex; gap: 6px; align-items: center; }
.tip-check-add input { flex: 1; background: var(--input-bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; outline: none; }
.tip-check-add input:focus { border-color: var(--primary); }
.tip-rels { display: flex; flex-direction: column; gap: 8px; }
.tip-rel-grp { display: flex; flex-direction: column; gap: 4px; }
.tip-rel { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font-size: 13px; }
.tip-rel:hover { border-color: var(--primary); }
.tip-rel-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-full { display: inline-flex; align-items: center; gap: 5px; }
.tip-desc { width: 100%; min-height: 54px; background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font: inherit; resize: vertical; outline: none; }
.tip-desc:focus { border-color: var(--primary); }
.tip-add-sub { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; }
.tip-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tip-foot button { display: inline-flex; align-items: center; gap: 5px; }

/* ── Карточка задачи: секции-карточки + ролевые права (редизайн 2026-07) ── */
.tip-scroll { gap: 10px; }
.tip-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.tip-card .td-section-h { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tip-card .td-section-h svg.ic { width: 13px; height: 13px; color: var(--primary-2); }
.tip-hd-cnt { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--muted); }
.tip-statusbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tip-statusbar .tip-actions { margin-left: auto; }
.tip-prop { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.tip-prop + .tip-prop { border-top: 1px solid var(--line); padding-top: 8px; }
.tip-prop-k { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex: none; }
.tip-prop-k svg.ic { width: 15px; height: 15px; color: var(--muted); }
.tip-prop-v { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; justify-content: flex-end; flex-wrap: wrap; }
.tip-prop-ro { color: var(--text); font-size: 13px; }
.tip-chipbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.tip-chipbtn:hover { border-color: var(--primary); }
.tip-chipbtn.dash { border-style: dashed; color: var(--muted); background: transparent; }
.tip-chipbtn svg.ic { width: 14px; height: 14px; }
.tip-chipbtn .cev { color: var(--muted); display: inline-flex; }
.tip-chipbtn.due-set { background: rgba(102,126,234,.14); border-color: rgba(102,126,234,.34); color: var(--primary-2); }
.tip-chipbtn.due-over { background: rgba(242,96,122,.14); border-color: rgba(242,96,122,.34); color: var(--urg-overdue); }
/* Пространство Личное/Работа (0036): сегментированный переключатель на карточке задачи */
.tip-scope-seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tip-scope-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.tip-scope-btn + .tip-scope-btn { border-left: 1px solid var(--line); }
.tip-scope-btn svg.ic { width: 14px; height: 14px; }
.tip-scope-btn:hover { color: var(--text); }
.tip-scope-btn.active { background: rgba(102,126,234,.16); color: var(--primary-2); }
.tip-prop-ro svg.ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.tip-due-input { background: var(--input-bg); color: var(--text); border: 1px solid var(--primary); border-radius: 9px; padding: 6px 8px; font: inherit; outline: none; }
.tip-lock { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; cursor: pointer; }
.tip-lock .lk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(229,162,60,.12); color: var(--urg-today); flex: none; }
.tip-lock .lk svg.ic { width: 13px; height: 13px; }
.tip-tm-top { display: flex; align-items: center; gap: 9px; }
.tip-tm-run { width: 8px; height: 8px; border-radius: 50%; background: var(--urg-done); box-shadow: 0 0 0 4px rgba(93,202,165,.18); flex: none; }
.tip-tm-total { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tip-tm-actions { margin-left: auto; }
/* Пуск/пауза таймера — единый контрол в блоке «Время» (под строкой «Факт»). */
.tip-tm-ctl { margin-top: 10px; }
.tip-tm-btn { width: 100%; justify-content: center; gap: 7px; }
.tip-tm-btn.running { color: var(--urg-done); border-color: rgba(93,202,165,.4); background: rgba(93,202,165,.10); }
.tip-tm-btn.running:hover { background: rgba(93,202,165,.18); }
.tip-tm-users { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.tip-tm-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.tip-tm-row .tip-tm-min { color: var(--text); font-variant-numeric: tabular-nums; }
.tip-grp { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.tip-ck-bar { height: 5px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.tip-ck-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #667eea, #8b9cf5); transition: width .3s; }
.tip-desc.view { min-height: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.45; background: transparent; border: 0; padding: 0; }

/* ═══ Rich-описание (Markdown-редактор + рендер) — задачи/тикеты/проекты ═══ */
.tip-desc-card .rd { margin-top: -2px; }
.rd { display: block; }
.rd-view { font-size: 14.5px; line-height: 1.6; color: var(--text); word-break: break-word; cursor: text; padding: 2px; border-radius: 8px; min-height: 24px; }
.rd.editable .rd-view:hover { background: rgba(255,255,255,.03); }
.rd-empty { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.rd-empty svg.ic { width: 14px; height: 14px; opacity: .8; }

/* Рендер Markdown (общий для просмотра и предпросмотра) */
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }
.md-body p { margin: 0 0 10px; }
.md-body h1 { font-size: 19px; font-weight: 800; margin: 14px 0 8px; line-height: 1.3; }
.md-body h2 { font-size: 16.5px; font-weight: 800; margin: 14px 0 6px; line-height: 1.3; }
.md-body h3 { font-size: 14.5px; font-weight: 700; margin: 12px 0 5px; color: var(--primary-2); }
.md-body ul, .md-body ol { margin: 0 0 10px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body ul.md-tasklist { list-style: none; padding-left: 2px; }
.md-body .md-task { display: flex; align-items: flex-start; gap: 9px; margin: 5px 0; }
/* Чекбокс. В ОПИСАНИИ задачи — мёртвый <span> (своя механика правки), в ТЕЛЕ СООБЩЕНИЯ —
   настоящая <button> (§7 спеки, жмёт любой участник). Геометрия общая, интерактив — ниже
   по тегу button, чтобы описание визуально не поехало. */
.md-body .md-cb {
  flex: none; width: 17px; height: 17px; margin-top: 1px; padding: 0;
  border: 1.7px solid var(--muted); border-radius: 5px; position: relative;
  background: transparent; -webkit-appearance: none; appearance: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.md-body .md-cb.on { background: var(--primary); border-color: var(--primary); }
/* Галочка существует ВСЕГДА (снятая — прозрачна и поджата): иначе появление нечем
   анимировать, а переключение выглядит рубленым. */
.md-body .md-cb::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  opacity: 0; transform: rotate(45deg) scale(.5); transform-origin: center;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.md-body .md-cb.on::after { opacity: 1; transform: rotate(45deg) scale(1); }
/* Зона нажатия 24×24 (контракт §7) — псевдоэлементом ПОВЕРХ: раскладку (17px в потоке)
   не трогает. 🔴 БЕЗ border-radius: скругление съедает углы, и в углу 24×24 уже не 24×24
   (проверено elementFromPoint). Псевдоэлемент невидим, скруглять в нём нечего. */
button.md-cb { cursor: pointer; }
button.md-cb::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}
button.md-cb:hover { border-color: var(--primary); background: var(--hover); }
button.md-cb.on:hover { background: var(--primary-2); border-color: var(--primary-2); }
button.md-cb:active { transform: scale(.88); }
button.md-cb:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px var(--glow); }
@media (prefers-reduced-motion: reduce) {
  .md-body .md-cb, .md-body .md-cb::after { transition: none; }
}
.md-body .md-task-t.done { color: var(--muted); text-decoration: line-through; }
.md-body blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--primary); opacity: .92; }
.md-body code { background: rgba(139,156,245,.14); color: var(--primary-2); padding: 1.5px 5px; border-radius: 5px; font-size: 12.8px; font-family: var(--mono); word-break: break-word; }
.md-body pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; overflow: auto; margin: 0 0 10px; }
.md-body pre code { background: none; padding: 0; color: var(--text); font-size: 12.6px; line-height: 1.5; }
.md-body a { color: var(--primary-2); text-decoration: none; border-bottom: 1px solid rgba(139,156,245,.4); }
.md-body a:hover { border-bottom-color: var(--primary-2); }
.md-body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md-body strong { font-weight: 750; color: inherit; }
.md-body del { color: var(--muted); }

/* Редактор */
.rd-edit { border: 1.5px solid var(--primary); border-radius: 12px; background: var(--input-bg); overflow: hidden; }
.rd-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 7px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.rd-tb button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); border-radius: 7px; cursor: pointer; padding: 0; }
.rd-tb button:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: transparent; }
.rd-tb button.on { background: rgba(102,126,234,.22); color: var(--primary-2); }
.rd-tb button:disabled { opacity: .32; cursor: default; pointer-events: none; }
.rd-tb .rd-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rd-tb svg.ic { width: 16px; height: 16px; }
.rd-ta { width: 100%; min-height: 96px; resize: vertical; border: 0; background: none; color: var(--text); padding: 12px 13px; font-family: inherit; font-size: 14.5px; line-height: 1.6; outline: none; display: block; }
.rd-ta::placeholder { color: var(--muted); }
.rd-prev { padding: 12px 13px; min-height: 96px; }
.rd-foot { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-top: 1px solid var(--line); background: rgba(255,255,255,.02); }
.rd-hint { font-size: 11.5px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-foot button { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rd-foot button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.rd-foot button:hover { filter: brightness(1.08); }
.rd-foot button svg.ic { width: 14px; height: 14px; }
.rd-foot .rd-toggle { color: var(--muted); background: none; border: 0; padding: 0 6px; }
.rd-foot .rd-toggle.on { color: var(--primary-2); }

/* ── «Живой» markdown-редактор (contenteditable): форматирование видно СРАЗУ ── */
.rd-ce { width: 100%; min-height: 96px; max-height: 52vh; overflow: auto; border: 0; background: none; color: var(--text); padding: 12px 13px; font-family: inherit; font-size: 14.5px; line-height: 1.6; outline: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; caret-color: var(--primary); }
.rd-ce:focus { outline: none; }
.rd-ce.is-empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.rd-ce .rd-mk { color: var(--muted); opacity: .55; }
.rd-ce .rd-code { font-family: var(--mono); font-size: 13px; color: var(--primary-2); background: rgba(139,156,245,.14); border-radius: 4px; padding: 0 2px; }
.rd-ce .rd-link { color: var(--primary-2); text-decoration: underline; text-underline-offset: 2px; }
.rd-ce .rd-h { font-weight: 800; }
.rd-ce .rd-h1 { font-size: 20px; } .rd-ce .rd-h2 { font-size: 17px; } .rd-ce .rd-h3 { font-size: 15px; color: var(--primary-2); }
.rd-ce .rd-hr { color: var(--muted); letter-spacing: 2px; }
.rd-ce .rd-q-mk { color: var(--primary); font-weight: 700; }
.rd-ce .rd-q { color: var(--muted); font-style: italic; }
.rd-ce .rd-li-mk { color: var(--primary); font-weight: 700; }
/* Настоящая коробочка вместо буквального «[ ]»/«[x]» — геометрия 1-в-1 с .md-cb готового
   вида задачи, чтобы чек-лист не «прыгал» между редактированием и просмотром. Буквы
   «[ ]»/«[x]» физически остаются в DOM (font-size:0 только прячет их) — textContent не
   меняется, курсор не разъезжается. */
.rd-ce .rd-task-mk { font-size: 0; line-height: 0; }
.rd-ce .rd-task-box {
  display: inline-block; position: relative; vertical-align: -3px;
  width: 15px; height: 15px; margin: 0 1px; border-radius: 5px;
  border: 1.7px solid var(--muted); background: transparent;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
  transition: background .12s ease, border-color .12s ease;
}
.rd-ce .rd-task-box.on { background: var(--primary); border-color: var(--primary); }
.rd-ce .rd-task-box::after {
  content: ""; position: absolute; left: 4.3px; top: 1px; width: 3.4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0;
  opacity: 0; transform: rotate(45deg) scale(.5); transform-origin: center;
  transition: opacity .12s ease, transform .12s ease;
}
.rd-ce .rd-task-box.on::after { opacity: 1; transform: rotate(45deg) scale(1); }
.rd-ce .rd-task-done { color: var(--muted); text-decoration: line-through; }
.rd-ce .rd-hl { background: rgba(231,163,62,.28); border-radius: 3px; }
.rd-ce .rd-spoiler-e { color: var(--muted); }
.rd-ce .rd-fence { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.rd-ce strong { font-weight: 750; }
.rd-ce em { font-style: italic; }
.rd-ce del { text-decoration: line-through; color: var(--muted); }

/* ── Подзадачи (иерархия) ── */
.tip-subs { display: flex; flex-direction: column; }
.tip-sub { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.tip-sub-box { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--line); background: transparent; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.tip-sub-box.done { background: var(--urg-done); border-color: var(--urg-done); color: #08160f; }
.tip-sub-box svg.ic { width: 13px; height: 13px; }
.tip-sub-box[disabled] { cursor: default; opacity: .55; }
.tip-sub-open { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 0; }
.tip-sub-open .tip-rel-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-sub-open:hover .tip-rel-t { color: var(--primary-2); }
.tip-rel-t.done { text-decoration: line-through; color: var(--muted); }
.tip-parent { display: flex; align-items: center; gap: 9px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.tip-parent:hover { border-color: var(--primary); }
.tip-parent svg.ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.tip-parent .tip-rel-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-parent .tip-rel-t.done { text-decoration: line-through; color: var(--muted); }
.tip-parent-card .td-section-h { color: var(--primary-2); }

/* ── Связанные задачи (entity_links) ── */
.tip-links { display: flex; flex-direction: column; gap: 7px; }
.tip-link { display: flex; align-items: center; gap: 8px; }
.tip-link-rel { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 6px; background: rgba(139,147,163,.16); color: #aeb6c6; }
.tip-link-rel.lt-blocks { background: var(--urg-overdue-soft); color: var(--urg-overdue); }
.tip-link-rel.lt-blocked { background: var(--urg-today-soft); color: var(--urg-today); }
.tip-link-rel.lt-duplicate { background: rgba(139,156,245,.16); color: var(--primary-2); }

/* ── Пикер связи ── */
/* .td-userpick.tip-linkpick — специфичнее голого .td-userpick (перебивает его max-height:280px
   и overflow:auto): раньше весь попап упирался в 280px, а типы связи занимали 4 строки во всю
   ширину → списку задач оставалось ~2 строки. Теперь: типы = компактная сетка 2×2, а список —
   единственная прокручиваемая зона с нормальной высотой. */
.td-userpick.tip-linkpick { width: 300px; max-width: 92vw; max-height: min(72vh, 470px); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.tip-linkrels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }
.tip-linkrels .tip-link-hint { grid-column: 1 / -1; }
/* Компактные пилюли типа связи. Перебиваем .td-userpick button (width:100%; display:flex) —
   без этого каждая пилюля растягивалась на всю строку (те самые «4 строки»). */
.tip-linkpick .tip-relchip { width: 100%; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; line-height: 1.25; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: background .13s ease, border-color .13s ease, color .13s ease; }
.tip-linkpick .tip-relchip:hover { border-color: var(--muted); color: var(--text); }
.tip-linkpick .tip-relchip.on { border-color: var(--primary); color: var(--text); background: rgba(102,126,234,.16); }
.tip-linksearch { flex-shrink: 0; background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font: inherit; outline: none; }
.tip-linksearch:focus { border-color: var(--primary); }
.tip-linklist { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; max-height: 340px; overflow-y: auto; }
.tip-linklist button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.tip-linklist button:hover { background: var(--panel-2); }
.tip-linklist button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Богатая строка попапа связей/подзадач: мини-карточка с ключевыми данными задачи. */
.tip-linklist button.rel-item { flex-direction: column; align-items: stretch; gap: 5px; padding: 8px 9px; }
.rel-item-top { display: flex; align-items: center; gap: 8px; }
.rel-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-item.done .rel-item-title { text-decoration: line-through; color: var(--muted); }
.rel-linktype { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rel-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-left: 17px; }
.rel-item-meta span:last-child { overflow: visible; }
.rel-status { flex: none; font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(139,147,163,.16); color: #aeb6c6; display: inline-flex; align-items: center; gap: 3px; }
.rel-status.s-done { background: var(--urg-done-soft); color: var(--urg-done); }
.rel-status.s-in_progress { background: var(--info-soft); color: var(--info); }
.rel-status.s-cancelled { background: rgba(107,114,128,.16); color: #8b93a3; }
.rel-status svg.ic { width: 11px; height: 11px; }
.rel-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.rel-chip svg.ic { width: 12px; height: 12px; }
.rel-chip.due-overdue { color: var(--urg-overdue); }
.rel-chip.due-today { color: var(--urg-today); }
.rel-avs { margin-left: auto; display: inline-flex; }
@media (max-width: 1080px) { .task-info-panel { display: none !important; } }
/* Та же рич-панель задачи, но как МОДАЛКА поверх чата — на узких экранах (где докнутая
   скрыта правилом выше). Тап по шапке чата задачи открывает её здесь. Класс `.as-overlay`
   двухклассовой специфичностью + !important перебивает `display:none` медиа-правила. */
.task-info-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; }
.task-info-backdrop.hidden { display: none; }
.task-info-panel.as-overlay {
  display: flex !important; position: fixed; z-index: 61;
  top: 0; right: 0; left: auto; bottom: 0; transform: none;
  /* Ширина модалки задачи. По умолчанию 480px, но пользователь может ТЯНУТЬ левую кромку —
     сохранённое значение приходит в --w-taskinfo-ov (см. bindResizer/applyTaskOverlayWidth).
     min(…, 96vw) всегда прижимает к вьюпорту (напр. если окно сузили после сохранения). */
  width: min(var(--w-taskinfo-ov, 480px), 96vw); height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  box-shadow: -18px 0 50px rgba(0,0,0,.5); overflow: hidden;
  animation: taskDrawerIn .22s ease;
}
@keyframes taskDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.tip-close { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: 8px; display: none; flex: none; }
.tip-close svg.ic { width: 16px; height: 16px; }
.tip-close:hover { background: var(--panel-2); color: var(--text); }
.task-info-panel.as-overlay .tip-close { display: inline-flex; }
.task-info-panel.as-overlay .tip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 560px) {
  .task-info-panel.as-overlay { width: 100vw; height: 100dvh; max-height: 100dvh;
    top: 0; left: 0; transform: none; border: 0; border-radius: 0; }
}
/* ── Вкладка «Чат» шторки задачи: сюда ФИЗИЧЕСКИ переносится единый узел <main.thread> ──
   Одна реализация чата (голосовые/кружочки/переводы/документы/«в ИИ»/ответы/стикеры) —
   тред просто «переезжает» в шторку и обратно; шторка шире, чтобы чат был удобен. */
.tip-chat-host { display: none; }
/* Вкладка «Чат» специально ШИРЕ (760 vs 480) и имеет СВОЮ сохраняемую ширину
   (--w-taskinfo-ov-chat), чтобы ресайз чата не затирал ширину карточки и наоборот. */
.task-info-panel.as-overlay.tab-chat { width: min(var(--w-taskinfo-ov-chat, 760px), 96vw); flex-direction: column; }
.task-info-panel.tab-chat .tip-scroll { display: none; }
.task-info-panel.tab-chat .tip-chat-host { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; }
.task-info-panel.tab-chat #tipChatHost > main.thread { display: flex; flex: 1 1 auto; min-height: 0; width: auto; }
.task-info-panel.tab-chat #tipChatHost .thread-head { padding-left: 14px; }
/* внутри шторки не нужна мобильная кнопка «назад к списку» */
.task-info-panel.tab-chat #tipChatHost #backToList { display: none !important; }
@media (max-width: 560px) { .task-info-panel.as-overlay.tab-chat { width: 100vw; } }
/* Вкладка «История» задачи — свой хост-пейн #tipHistoryHost (по аналогии с #tipChatHost).
   Активна по классу .tab-history: карточку и чат прячем, показываем историю. Хост — ЕДИНСТВЕННЫЙ
   скролл на всю высоту вкладки; история = чистый список во всю ширину (не карточка-коробка).
   🔴 Глобальное `.td-activity{max-height:150px;overflow:auto}` (от старой модалки) душило список в
   мелкий внутренний скролл с пустотой снизу — гасим его тут селектором выше по специфичности. */
.tip-history-host { display: none; }
.task-info-panel.tab-history .tip-scroll { display: none; }
.task-info-panel.tab-history .tip-chat-host { display: none; }
.task-info-panel.tab-history .tip-history-host { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; padding: 14px 16px 24px; }
.task-info-panel.tab-history .tip-history { background: transparent; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task-info-panel.tab-history .tip-history .td-section-h { color: var(--primary-2); margin: 0 0 2px; }
.task-info-panel.tab-history .td-source { margin: 0 0 4px; }
.task-info-panel.tab-history .td-activity { max-height: none; overflow: visible; gap: 0; margin-top: 0; }
.task-info-panel.tab-history .td-act-row { padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.task-info-panel.tab-history .td-act-row:last-child { border-bottom: 0; }
/* Вкладка «Медиа и файлы» — свой хост-пейн #tipMediaHost (по аналогии с #tipHistoryHost).
   Активна по классу .tab-media: карточку/чат/историю прячем, показываем медиа во всю высоту. */
.tip-media-host { display: none; }
.task-info-panel.tab-media .tip-scroll { display: none; }
.task-info-panel.tab-media .tip-chat-host { display: none; }
.task-info-panel.tab-media .tip-history-host { display: none; }
.task-info-panel.tab-media .tip-media-host { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; padding: 14px 16px 24px; }
/* Панель = 5-я колонка grid .chat (только на широких экранах, где она показывается).
   Тикет-панель (.with-ticket-info) — тот же приём: беседа-источник в центре, инфа тикета справа. */
@media (min-width: 1081px) {
  /* --rw-projects/--rw-tasks — см. базовый .chat: сворачивание/скрытие столбцов
     проектов/задач переопределяет их, а инфо-панель (330px) остаётся хвостом. */
  .chat.with-task-info { grid-template-columns: 96px var(--rw-projects) var(--rw-tasks) var(--w-chats, 280px) 1fr var(--w-taskinfo, 330px); }
  .chat.with-ticket-info { grid-template-columns: 96px var(--rw-projects) var(--rw-tasks) var(--w-chats, 280px) 1fr 330px; }
  /* Панель задачи свёрнута → 6-я колонка схлопывается в 0, чат (5-я, 1fr) занимает всё место. */
  .chat.with-task-info.taskinfo-collapsed { grid-template-columns: 96px var(--rw-projects) var(--rw-tasks) var(--w-chats, 280px) 1fr 0; }
}
/* Свёрнуто прячем только ДОКНУТУЮ карточку задачи (по id, не по .task-info-panel — чтобы не
   задеть панель тикета) и только в докнутом виде (оверлей — фиксированная шторка, её не трогаем). */
.chat.taskinfo-collapsed #taskInfoPanel:not(.as-overlay) { display: none; }
/* Тикет-панель: селекты статуса/приоритета/ответственного — во всю ширину секции. */
.ticket-info-panel .tw-select { width: 100%; }
.ticket-info-panel .tip-title { display: inline-flex; align-items: center; gap: 6px; }
.ticket-info-panel .tip-title svg.ic { width: 15px; height: 15px; color: var(--primary); flex: none; }
.ticket-info-panel #tipTkCsat { display: inline-flex; gap: 2px; }
.td-assignees { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.td-asg { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px 4px 4px; font-size: 12.5px; }
.td-asg .tw-av { width: 22px; height: 22px; margin: 0; }
.td-asg button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; }
.td-asg button:hover { color: var(--urg-overdue); }
.td-asg-add { border-style: dashed; cursor: pointer; color: var(--muted); }
.td-asg-add:hover { color: var(--text); border-color: var(--primary); }
.td-check-list { display: flex; flex-direction: column; gap: 6px; }
.td-check-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 8px; border-radius: 8px; }
.td-check-item:hover { background: var(--panel-2); }
.td-check-item.done span { color: var(--text); opacity: .72; text-decoration: line-through; }
.td-check-box { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; }
.td-check-item.done .td-check-box { background: var(--ok); border-color: var(--ok); }
.td-check-box svg { width: 11px; height: 11px; }
.td-check-item span { flex: 1; font-size: 14.5px; line-height: 1.45; }
.td-check-item .td-check-del { opacity: 0; background: none; border: none; color: var(--muted); cursor: pointer; }
.td-check-item:hover .td-check-del { opacity: .7; }
.td-check-add { display: flex; gap: 8px; margin-top: 4px; }
.td-check-add input { flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 10px; font-size: 13px; }
.td-check-add input:focus { outline: none; border-color: var(--primary); }
.td-activity { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; }
.td-act-row { font-size: 12px; color: var(--muted); }
.td-act-row b { color: var(--text); font-weight: 600; }
.td-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--primary-2); }

/* мини-пикер исполнителей (popover у кнопки «добавить») */
.td-userpick { position: fixed; z-index: 80; min-width: 220px; max-height: 280px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.td-userpick button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; color: var(--text); text-align: left; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.td-userpick button:hover { background: var(--panel); }
/* заголовок секции в пикере проекта/чата («Проекты», «Чаты и группы») */
.td-userpick .td-pick-sec { padding: 8px 9px 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.td-userpick .td-pick-sec:first-child { padding-top: 3px; }
/* Мультипроект (0065): строка проекта в пикере — имя тянется, ★ задаёт основной. */
.td-userpick .tip-projrow .tip-projname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-userpick .tip-projrow.on { background: var(--panel); }
.td-userpick .tip-primary { flex: 0 0 auto; font-size: 13px; line-height: 1; color: var(--muted); opacity: .5; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.td-userpick .tip-primary:hover { opacity: .9; background: var(--panel-2); }
.td-userpick .tip-primary.is { color: #f5a623; opacity: 1; }

/* на узких экранах подписи видов в сегменте прячем, оставляем иконки */
@media (max-width: 860px) {
  .tw-seg .tw-seg-label { display: none; }
  .tw-board { flex-direction: column; height: auto; padding: 12px 16px; }
  .tw-board::after { display: none; }
  .tw-col { max-width: none; width: 100%; }
}

/* ───────────────────────── Стикеры (анимированные Lottie) ─────────────────────────
   Кнопка в композере, докированная панель НАД полем, рендер стикера в треде. */
.sticker-btn.on { color: var(--primary-2); }

/* Стикер в треде: бордерлесс (.bubble.has-media уже снимает фон/тень). */
.sticker-msg { width: 170px; height: 170px; max-width: 46vw; max-height: 46vw; }
.sticker-msg svg { width: 100% !important; height: 100% !important; display: block; }

/* Докированная панель (живёт между layout-suggest и composer, флекс-колонка чата
   ужимает messages под неё). */
.sticker-panel {
  display: flex; flex-direction: column; height: 340px; min-height: 340px;
  background: var(--panel); border-top: 1px solid var(--line); overflow: hidden;
  animation: spIn .2s cubic-bezier(.34,1.56,.64,1);
}
.sticker-panel.hidden { display: none; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sp-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 8px 10px 6px;
  background: var(--panel-2); border-radius: 11px; padding: 0 11px; flex: 0 0 auto; }
.sp-search-ic { color: var(--muted); display: inline-flex; }
.sp-search-ic svg.ic { width: 16px; height: 16px; }
.sp-search-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text);
  font-size: 13px; height: 100%; }
.sp-search-input::placeholder { color: var(--muted); }

.sp-body { flex: 1; overflow-y: auto; position: relative; padding: 0 10px 8px; }
.sp-sect { } 
.sp-head { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 9px 2px 6px; }
.sp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-cell { aspect-ratio: 1; padding: 6px; border: 0; background: transparent; border-radius: 13px;
  cursor: pointer; transition: background .12s, transform .1s; display: flex; }
.sp-cell:hover { background: rgba(255,255,255,.05); }
.sp-cell:active { transform: scale(.9); }
.sp-lot { width: 100%; height: 100%; pointer-events: none; }
.sp-lot svg, .sp-cover svg { width: 100% !important; height: 100% !important; display: block; }
.sp-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 36px 10px; }

.sp-tabs { position: relative; display: flex; align-items: center; gap: 2px; height: 48px;
  padding: 0 8px; background: #13161d; border-top: 1px solid var(--line); overflow-x: auto;
  flex: 0 0 auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs.dim .sp-tab { opacity: .45; }
.sp-tab { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--muted);
  border-radius: 10px; cursor: pointer; transition: color .15s, background .12s; padding: 6px; }
.sp-tab:hover { background: rgba(255,255,255,.05); }
.sp-tab.on { color: var(--primary-2); }
.sp-tab svg.ic { width: 21px; height: 21px; }
.sp-cover { width: 26px; height: 26px; display: block; pointer-events: none; }
.sp-bar { position: absolute; bottom: 0; height: 2.5px; border-radius: 3px; background: var(--grad);
  left: 8px; width: 40px; transition: left .22s cubic-bezier(.34,1.56,.64,1), width .22s ease; }

/* Увеличенный превью (long-press) */
.sp-preview { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; background: rgba(8,10,14,.74); backdrop-filter: blur(3px);
  animation: spIn .18s ease; }
.sp-preview.hidden { display: none; }
.sp-pv-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sp-pv-lot { width: 220px; height: 220px; max-width: 70vw; max-height: 70vw; }
.sp-pv-lot svg { width: 100% !important; height: 100% !important; }
.sp-pv-fav { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font-size: 13px; padding: 9px 16px;
  border-radius: 8px; cursor: pointer; }
.sp-pv-fav svg.ic { width: 17px; height: 17px; }
.sp-pv-fav.on { color: #ffd54a; border-color: #ffd54a55; }

@media (max-width: 480px) {
  .sp-grid { grid-template-columns: repeat(4, 1fr); }
  .sticker-panel { height: 300px; min-height: 300px; }
}

/* ════════════════ Работа v2: Проекты / Тикеты / Моя работа ════════════════ */
/* НЕ переопределять position: #workspaceV2 наследует .tasks-workspace
   (position:absolute; inset:0 0 0 96px) — это и есть оверлей поверх .chat.
   position:relative роняло панель в нормальный поток (стили «летели» вниз). */
.tw-muted { color: var(--muted); font-size: 12px; }
.tw-muted.small { font-size: 11px; }
.tw-empty.small { padding: 10px; font-size: 12px; }
.tw-row-side { display: flex; align-items: center; gap: 8px; flex: none; }
.tw-col-body.drop { outline: 2px dashed var(--primary); outline-offset: -3px; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.tw-card.dragging { opacity: .4; }

/* отступы страниц */
.v2-wrap { padding: 16px 22px 28px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg.ic { width: 18px; height: 18px; }

/* верхние табы с иконками */
.v2-seg button { display: inline-flex; align-items: center; gap: 6px; }
.v2-seg button svg.ic { width: 16px; height: 16px; }

/* тулбары/секции */
/* flex-wrap: у доски «Проекты» тулбар несёт 7 кнопок (Проект/Аналитика/Роли/Группа/
   Архив/Выбрать/Задача) + название + аватары — без переноса на узкой ширине они кримятся/
   вылезают. Переносим (как .tw-toolbar), название сжимается с многоточием. */
.v2-toolbar { display: flex; align-items: center; gap: 10px; row-gap: 8px; flex-wrap: wrap; padding: 2px 0 16px; }
.v2-toolbar-title { font-size: 16px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-toolbar button { display: inline-flex; align-items: center; gap: 6px; flex: none; width: auto; }
/* Toggle-состояние (Выбрать/Архив) у ghost-кнопок тулбара — индиго-подсветка (иначе «Выбрать»
   нажатая выглядела так же, как ненажатая). */
.v2-toolbar .ghost.small.active { color: var(--primary); border-color: var(--primary); }
.v2-toolbar button svg.ic, .v2-tabs button svg.ic, .v2-sec svg.ic { width: 15px; height: 15px; }
.v2-pill { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.v2-sec { font-size: 12px; color: var(--muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .04em; }

/* карточки-кнопки списка (проекты/очереди) */
.v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.v2-card { display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; }
.v2-card:hover { border-color: var(--primary); }
.v2-card-key { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff; border-radius: 9px; }
.v2-card-key svg.ic { width: 20px; height: 20px; }
.v2-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-card-name { font-size: 15px; font-weight: 500; color: var(--text); }
.v2-card-meta { font-size: 12px; color: var(--muted); }
.v2-card-go { color: var(--muted); display: inline-flex; }
.v2-card-go svg.ic { width: 18px; height: 18px; }
.v2-num { font-size: 11px; color: var(--muted); }

/* ── Каталог проектов (главная страница «Проекты») ── */
.pcat-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0 16px; }
.pcat-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pcat-search svg.ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pcat-search input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; min-width: 0; }
.pcat-sort { flex: none; }
.pcat-viewtog { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.pcat-vbtn { display: inline-flex; align-items: center; padding: 8px 10px; background: var(--panel); border: 0; color: var(--muted); cursor: pointer; }
.pcat-vbtn svg.ic { width: 16px; height: 16px; }
.pcat-vbtn.on { background: var(--accent); color: #fff; }
.pcat-empty { padding: 24px; color: var(--muted); text-align: center; }
.pcat-empty-big { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 46px 20px; }
.pcat-empty-big > svg.ic { width: 42px; height: 42px; color: var(--muted); opacity: .45; }
.pcat-empty-txt { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.pcat-empty-txt b { font-size: 16px; color: var(--text); }
.pcat-empty-txt span { font-size: 13px; color: var(--muted); }
.pcat-arch { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 10px; }
.pcat-arch > summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 500; padding: 4px 0; user-select: none; }
.pcat-arch > summary:hover { color: var(--text); }
.pcat-arch .v2-pc-grid, .pcat-arch .v2-pc-list { margin-top: 12px; }
/* карточка-сетка */
.v2-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.v2-pc-card { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; padding: 14px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel); cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.v2-pc-card:hover { border-color: var(--primary); transform: translateY(-1px); }
/* Кнопка-планировщик: иконка в правом верхнем углу, появляется ПРИ НАВЕДЕНИИ (на тач — всегда). */
.v2-pc-planbtn { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
  opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease; }
.v2-pc-card:hover .v2-pc-planbtn, .v2-pc-planbtn.open, .v2-pc-planbtn:focus-visible { opacity: 1; transform: none; }
.v2-pc-planbtn:hover, .v2-pc-planbtn.open { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.v2-pc-planbtn svg.ic { width: 15px; height: 15px; }
@media (hover: none) { .v2-pc-planbtn { opacity: 1; transform: none; } }
/* Список: планировщик — hover-иконка перед шевроном (в потоке, не в углу) */
.v2-pc-row .v2-pc-planbtn { position: static; flex: none; width: 26px; height: 26px; }
.v2-pc-row:hover .v2-pc-planbtn { opacity: 1; transform: none; }
.v2-pc-card.archived { opacity: .6; }
/* Мультивыбор каталога проектов (bulk edit, паритет с задачами/boardSel) */
.v2-pc-card.tsel, .v2-pc-row.tsel, .v2-pb-card.tsel { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Справа, на месте hover-планировщика (тот скрыт в режиме выбора) — как чекбокс задач,
   слева перекрывал бы иконку+код проекта (.v2-pc-top). */
.v2-pc-selwrap { position: absolute; top: 8px; right: 8px; z-index: 3; }
body.cc-tsel-mode .v2-pc-card, body.cc-tsel-mode .v2-pc-row, body.cc-tsel-mode .v2-pb-card { cursor: pointer; }
.v2-pc-top { display: flex; align-items: center; gap: 8px; }
.v2-pc-coin { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; flex: none; }
.v2-pc-keychip { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.v2-pc-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.25; }
.v2-pc-comp { display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; font-size: 11px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; padding: 2px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pc-meta { font-size: 12px; color: var(--muted); }
.v2-pc-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.v2-pc-bar { flex: 1; height: 6px; border-radius: 100px; background: var(--panel-2); overflow: hidden; }
.v2-pc-bar > i { display: block; height: 100%; border-radius: 100px; background: var(--accent); }
.v2-pc-prog.done .v2-pc-bar > i { background: #22c55e; }
.v2-pc-prog.empty .v2-pc-bar { opacity: .5; }
.v2-pc-pct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* строка-список */
.v2-pc-list { display: flex; flex-direction: column; gap: 6px; }
.v2-pc-row { display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); cursor: pointer; }
.v2-pc-row:hover { border-color: var(--primary); }
.v2-pc-row.archived { opacity: .6; }
.v2-pc-row .v2-pc-coin { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.v2-pc-rname { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pc-rkey { font-family: var(--mono, monospace); font-size: 11px; color: var(--muted); flex: none; }
.v2-pc-rcomp { font-size: 11.5px; font-weight: 600; color: var(--accent); flex: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pc-rprog { width: 130px; flex: none; }
.v2-pc-go { color: var(--muted); display: inline-flex; flex: none; }
.v2-pc-go svg.ic { width: 16px; height: 16px; }
@media (max-width: 560px){ .v2-pc-rkey, .v2-pc-rprog, .v2-pc-rcomp { display: none; } }

/* ── Приоритизация проектов (0075): чипы важности/корзины/даты, доска, таймлайн ── */
/* Переключатель вида на 4 сегмента (Карточки · Список · Доска · Таймлайн) */
.pcat-viewtog.seg4 .pcat-vbtn { gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 500; transition: background .12s ease, color .12s ease; }
.pcat-viewtog.seg4 .pcat-vbtn + .pcat-vbtn { border-left: 1px solid var(--line); }
.pcat-viewtog.seg4 .pcat-vbtn:not(.on):hover { background: var(--panel-2); color: var(--text); }
.pcat-vlbl { white-space: nowrap; }
@media (max-width: 900px){ .pcat-vlbl { display: none; } .pcat-viewtog.seg4 .pcat-vbtn { padding: 8px 10px; } }
/* Важность P1..P4 (P3 «обычный» не показываем — не шумим) */
.v2-pc-prio { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 6px; line-height: 1.35; flex: none; font-variant-numeric: tabular-nums; }
.v2-pc-prio.p1 { color: #E24B4A; background: color-mix(in srgb, #E24B4A 16%, transparent); }
.v2-pc-prio.p2 { color: #EF9F27; background: color-mix(in srgb, #EF9F27 17%, transparent); }
.v2-pc-prio.p4 { color: var(--muted); background: var(--panel-2); }
html[data-theme="light"] .v2-pc-prio.p1 { color: #B42318; background: color-mix(in srgb, #E24B4A 12%, transparent); }
html[data-theme="light"] .v2-pc-prio.p2 { color: #B54708; background: color-mix(in srgb, #EF9F27 16%, transparent); }
/* Корзина «когда» + плановая дата */
.v2-pc-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-pc-spacer { flex: 1; }
.v2-pc-bucket { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.v2-pc-bucket > i { width: 7px; height: 7px; border-radius: 50%; background: var(--bk, var(--muted)); flex: none; }
.v2-pc-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.v2-pc-due svg.ic { width: 13px; height: 13px; opacity: .8; }
.v2-pc-rchips { display: flex; align-items: center; gap: 9px; flex: none; }
@media (max-width: 760px){ .v2-pc-rchips { display: none; } }
/* ── Доска проектов: колонки-корзины ── */
.pcat-scroll.is-board { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
/* align-items:stretch → колонки РАВНОЙ высоты (как Trello/Linear): ровная сетка + пустая
   колонка остаётся крупной мишенью для drop, а не схлопывается в полоску. */
.v2-pb-board { display: flex; gap: 12px; align-items: stretch; min-height: 320px; }
.v2-pb-col { flex: 0 0 268px; width: 268px; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; }
.v2-pb-colhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-size: 13px; font-weight: 600; color: var(--text); flex: none; }
.v2-pb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.v2-pb-coltitle { flex: 1; }
.v2-pb-colcount { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; }
.v2-pb-cards { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px; min-height: 72px; flex: 1;
  max-height: calc(100vh - 250px); overflow-y: auto; border-radius: 12px; transition: background .12s ease, box-shadow .12s ease; }
.v2-pb-cards.drop-on { background: color-mix(in srgb, var(--primary) 9%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 38%, transparent); }
.v2-pb-card { cursor: grab; padding: 12px; border-radius: 11px; gap: 7px; }
.v2-pb-card:active { cursor: grabbing; }
.v2-pb-card.dragging { opacity: .45; }
.v2-pb-card .v2-pc-coin { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.v2-pb-card .v2-pc-name { font-size: 14px; }
.v2-pb-drop { min-height: 2px; flex: none; }
/* ── Таймлайн проектов (роадмап) ── */
.pcat-scroll.is-tl { overflow-x: auto; }
.v2-tl { min-width: 660px; position: relative; }
.v2-tl-axis { display: flex; align-items: flex-start; }
.v2-tl-axis-label { flex: 0 0 176px; }
.v2-tl-axis-ticks { position: relative; flex: 1; height: 24px; border-bottom: 1px solid var(--line); overflow: visible; }
.v2-tl-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Линия «сегодня» живёт ВНУТРИ .v2-tl-rows и тянется ровно на высоту строк (top/bottom),
   а не «9999px вниз» — иначе она протекала сквозь «Без дат» и низ страницы.
   Смещение = ширина колонки-подписи + доля от трека (calc, долю пишет JS). */
.v2-tl-now { position: absolute; top: -10px; bottom: 0; width: 2px; z-index: 0; border-radius: 2px;
  background: color-mix(in srgb, var(--primary) 55%, transparent); pointer-events: none; }
.v2-tl-rows { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; position: relative; }
.v2-tl-row { display: flex; align-items: center; gap: 0; cursor: pointer; border-radius: 10px; padding: 3px 0; transition: background .12s ease; }
.v2-tl-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.v2-tl-label { flex: 0 0 176px; display: flex; align-items: center; gap: 8px; padding-right: 12px; min-width: 0; }
.v2-tl-label .v2-pc-coin { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
.v2-tl-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-tl-track { position: relative; flex: 1; height: 26px; }
.v2-tl-bar { position: absolute; top: 0; height: 26px; border-radius: 8px; overflow: hidden; display: flex; align-items: center;
  background: color-mix(in srgb, var(--bc, #5b8def) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc, #5b8def) 55%, transparent); }
.v2-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--bc, #5b8def) 62%, transparent); }
.v2-tl-barlbl { position: relative; z-index: 1; font-size: 10.5px; color: var(--text); font-weight: 600; padding: 0 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* Полоса тянется мышью: тело = сдвиг обеих дат, края = старт/цель */
.v2-tl-bar { cursor: grab; user-select: none; }
.v2-tl-bar:active { cursor: grabbing; }
.v2-tl-bar.dragging { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc, #5b8def) 75%, transparent), 0 6px 18px rgba(0,0,0,.32); z-index: 3; }
.v2-tl-h { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 4; cursor: ew-resize; }
.v2-tl-h-l { left: 0; } .v2-tl-h-r { right: 0; }
.v2-tl-h::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; height: 46%; border-radius: 3px; background: #fff; opacity: 0; transition: opacity .12s ease; }
.v2-tl-h-l::after { left: 3px; } .v2-tl-h-r::after { right: 3px; }
.v2-tl-bar:hover .v2-tl-h::after { opacity: .8; }
.v2-tl-undated { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.v2-tl-chip { font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.v2-tl-chip:hover { color: var(--text); border-color: var(--primary); }
/* Плановые даты в шторке проекта */
.v2-dr-dates { display: inline-flex; align-items: center; gap: 6px; }
.v2-dr-date { padding: 5px 8px; font-size: 12.5px; min-width: 0; width: 132px; }
.v2-dr-dsep { color: var(--muted); font-size: 12px; }

/* ── Пилюля-планировщик на карточке проекта (кликабельна: «когда»+срок → попап) ── */
.v2-pc-sched { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background .12s ease; }
.v2-pc-sched:hover { color: var(--text); border-color: var(--primary); }
.v2-pc-sched.open { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.v2-pc-sched svg.ic { width: 12px; height: 12px; opacity: .8; flex: none; }
.v2-pc-bk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bk, var(--muted)); flex: none; }
.v2-pc-schsep { opacity: .5; }
.v2-pc-schmuted { color: var(--muted); }
.v2-pc-schlbl { overflow: hidden; text-overflow: ellipsis; }
.v2-pc-rchips .v2-pc-sched { font-size: 11px; }
.v2-pb-card .v2-pc-sched { align-self: flex-start; }
/* «+» в шапке колонки доски — создать проект сразу в этой корзине */
.v2-pb-coladd { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; flex: none; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.v2-pb-coladd:hover { background: var(--panel); color: var(--text); border-color: var(--line); }
.v2-pb-coladd svg.ic { width: 15px; height: 15px; }
/* Меню столбца (⋯) + добавить столбец + drag-перестановка колонок (0080) */
.v2-pb-colmenu { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; flex: none; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.v2-pb-colmenu:hover, .v2-pb-colmenu.open { background: var(--panel); color: var(--text); border-color: var(--line); }
.v2-pb-colmenu svg.ic { width: 15px; height: 15px; }
.v2-pb-colhead { cursor: grab; }
.v2-pb-colhead:active { cursor: grabbing; }
.v2-pb-col.col-dragging { opacity: .55; }
.v2-pb-addcol { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; align-self: flex-start; height: 42px; padding: 0 16px;
  border: 1px dashed var(--line); border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600;
  transition: color .12s ease, border-color .12s ease, background .12s ease; }
.v2-pb-addcol:hover { color: var(--text); border-color: var(--primary); background: var(--panel-2); }
.v2-pb-addcol svg.ic { width: 16px; height: 16px; }
.v2-bkt-pop { min-width: 236px; padding: 9px; }
.v2-bkt-pop .tw-select { width: 100%; margin: 2px 0 2px; }

/* ── Попап планировщика проекта: «Когда · Важность · Сроки» ── */
.v2-sch-pop { min-width: 248px; max-width: 292px; padding: 9px; }
.v2-sch-h { font-size: 13px; font-weight: 700; color: var(--text); padding: 3px 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-sch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 6px 4px; }
.v2-sch-row { display: flex; gap: 6px; padding: 2px 6px 4px; }
.v2-sch-seg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease; }
.v2-sch-row .v2-sch-seg { flex: 1; font-variant-numeric: tabular-nums; }
.v2-sch-seg:hover { color: var(--text); border-color: var(--primary); }
.v2-sch-seg.on { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.v2-sch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v2-sch-seg.pr-p1.on { border-color: #E24B4A; background: color-mix(in srgb, #E24B4A 15%, transparent); color: #E24B4A; }
.v2-sch-seg.pr-p2.on { border-color: #EF9F27; background: color-mix(in srgb, #EF9F27 16%, transparent); color: #C77A10; }
.v2-sch-dates { display: flex; align-items: center; gap: 8px; padding: 2px 6px 6px; }
.v2-sch-dates .tw-select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; }
.v2-sch-arrow { color: var(--muted); flex: none; }
.v2-sch-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 4px; }
.v2-sch-preset { font-size: 11.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.v2-sch-preset:hover { color: var(--text); border-color: var(--primary); }
.v2-sch-preset.v2-sch-clear { color: var(--danger); }
.v2-sch-preset.v2-sch-clear:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
/* Таймлайн: пустое состояние + кликабельные чипы «без дат» */
.v2-tl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.v2-tl-undated-lbl { color: var(--muted); margin-right: 2px; }
.v2-tl-chip { display: inline-flex; align-items: center; gap: 6px; }
.v2-tl-chip .v2-pc-coin { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
/* Список: ручка перетаскивания (приоритет мышкой) + подсветка перетаскиваемой строки */
.v2-pc-grip { display: inline-flex; align-items: center; color: var(--muted); cursor: grab; opacity: 0; flex: none; margin: -2px -4px -2px -2px; transition: opacity .12s ease; }
.v2-pc-row:hover .v2-pc-grip { opacity: .55; }
.v2-pc-grip:hover { opacity: 1; }
.v2-pc-grip:active { cursor: grabbing; }
.v2-pc-grip svg.ic { width: 16px; height: 16px; }
.v2-pc-row.dragging { opacity: .5; border-color: var(--primary); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
@media (max-width: 560px){ .v2-pc-grip { opacity: .55; } }
/* Доска: «Бэклог» — колонка-инбокс слева (нераспределённый пул), чуть приглушена */
.v2-pb-col.is-inbox { background: color-mix(in srgb, var(--panel-2) 60%, transparent); border-style: dashed; }
.v2-pb-colhint { font-size: 10.5px; color: var(--muted); font-weight: 500; opacity: .8; margin-left: -2px; }

/* ── Внутренняя страница проекта: единый шелл (общая шапка + табы) ── */
/* Внутри проекта убираем документные отступы обёртки .v2-wrap (шелл/доска идут edge-to-edge). */
.tw-body.v2-wrap.flush { padding: 0; overflow: hidden; }
.v2pt { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Общая шапка проекта — идентичность (назад · коин · имя · роль · участники · действия) ОДИН раз для всех вкладок */
.v2pt-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: none; }
.v2pt-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; flex: none; }
.v2pt-back:hover { color: var(--text); border-color: var(--primary); }
.v2pt-back svg.ic { width: 17px; height: 17px; }
.v2pt-head .v2-pc-coin { width: 36px; height: 36px; font-size: 15px; }
.v2pt-idtext { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.v2pt-name { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
/* Имя проекта редактируется прямо в шапке (владелец/админ) — не в отдельной модалке (0148). */
input.v2pt-name-input { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; width: 100%; max-width: 320px; cursor: text; }
input.v2pt-name-input:hover { border-color: var(--line); }
input.v2pt-name-input:focus { border-color: var(--primary); background: var(--input-bg, var(--panel)); }
.v2pt-sub { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.v2pt-avs { flex: none; }
.v2pt-acts { display: flex; gap: 8px; align-items: center; flex: none; }
/* .primary глобально width:100%+margin-top:6px — в шапке проекта/участников кнопки в ряд, сбрасываем */
.v2pt-acts .primary, .v2mem-head .primary { width: auto; margin-top: 0; }
@media (max-width: 760px) { .v2pt-head { flex-wrap: wrap; } .v2pt-acts { width: 100%; justify-content: flex-end; } .v2pt-avs { display: none; } }
.v2pt-bar { flex: none; display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; }
.v2pt-tab { padding: 11px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.v2pt-tab:hover { color: var(--text); }
.v2pt-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.v2pt-body { flex: 1; min-height: 0; overflow: auto; }
/* Вкладка «Задачи»: СКРОЛЛ-КОЛЛАПС шапки. .v2pt(.tab-tasks) — вертикальный скроллер: шапка проекта +
   табы + бар видов уезжают вверх, тулбар фильтров ПРИЛИПАЕТ к верху (sticky), доска (#twBody) фикс-
   высоты (JS: экран − тулбар) → столбцы визуально «растут»; внутри столбцы скроллятся сами (.tw-col-body).
   Внутренний скролл столбцов включаем ТОЛЬКО когда шапка полностью свёрнута (.collapsed) — тогда скролл
   вниз сперва сворачивает шапку, и лишь затем листает карточки; скролл вверх (chaining) — наоборот. */
.v2pt.tab-tasks.board-scroll { display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.v2pt.tab-tasks.board-scroll .v2pt-head, .v2pt.tab-tasks.board-scroll .v2pt-bar { flex: none; }
.v2pt.tab-tasks.board-scroll .v2pt-body { display: block; height: auto; overflow: visible; }
.v2pt.tab-tasks.board-scroll .v2tasks { display: block; height: auto; overflow: visible; }
.v2pt.tab-tasks.board-scroll .tw-toolbar { position: sticky; top: 0; z-index: 6; background: var(--bg); }
.v2pt.tab-tasks.board-scroll .tw-body { overflow-x: auto; overflow-y: hidden; }
.v2pt.tab-tasks.board-scroll:not(.collapsed) .tw-col-body { overflow-y: hidden; }
.v2pt-media { padding: 16px 18px; }
/* Вкладка «Задачи» = встроенное пространство задач (переключатель видов) */
.v2tasks { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.v2tasks-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; }
.v2tasks .tw-toolbar { flex: none; padding: 8px 16px; }
.v2tasks .tw-body { flex: 1; min-height: 0; overflow: auto; }
.v2tasks .tw-search-row { flex: 1 1 260px; }
/* Участники проекта */
.v2mem { padding: 16px 18px 26px; max-width: 820px; }
.v2mem-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v2mem-title { font-size: 17px; font-weight: 700; color: var(--text); flex: 1; }
.v2mem-pcount { font-size: 12px; font-weight: 500; color: var(--muted); }
.v2mem-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.v2mem-searchrow { display: flex; align-items: center; gap: 8px; }
.v2mem-search { width: 100%; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13.5px; outline: none; }
.v2mem-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.v2mem-searchrow .v2mem-search { flex: 1; min-width: 0; }
.v2mem-gflt { flex: none; }
.v2mem-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 0; }
.v2mem-fchip { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13px; cursor: pointer; }
.v2mem-fchip.on { background: var(--accent); color: #fff; border-color: transparent; }
.v2mem-fchip span { opacity: .8; font-variant-numeric: tabular-nums; }
.v2mem-list { display: flex; flex-direction: column; }
.v2mem-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 16px 0 6px; }
.v2mem-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); transition: background .15s; }
.v2mem-row:last-child { border-bottom: 0; }
.v2mem-row:hover { background: var(--panel-2); }
.v2mem-row .prof-hit { border-radius: 8px; }
.v2mem-row.pending { opacity: .92; }
.v2mem-l { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.v2mem-name { font-size: 14.5px; font-weight: 500; color: var(--text); }
.v2mem-uname { font-size: 12px; color: var(--muted); }
.v2mem-pend { font-size: 11.5px; color: var(--warning); margin-top: 1px; }
.v2mem-r { display: flex; align-items: center; gap: 8px; flex: none; }
.v2mem-role-chip { font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 8px; background: var(--panel-2); white-space: nowrap; }
.v2mem-role, .v2mem-typesel { min-width: 96px; }
.v2mem-type { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.v2mem-type.t-employee { background: var(--panel-2); color: var(--muted); }
.v2mem-type.t-client { background: rgba(91, 141, 239, .16); color: #5b8def; }
.v2mem-type.t-contractor { background: rgba(245, 166, 35, .16); color: #d99a2b; }
.v2mem-type.t-external { background: rgba(163, 107, 255, .16); color: #a36bff; }
.v2mem-rm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.v2mem-rm:hover { background: rgba(239, 68, 68, .12); color: var(--danger); }
.v2mem-rm svg.ic { width: 15px; height: 15px; }
.v2inv-hint { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
/* Приватность групп (0102): пикер «в какие группы включить» — в модалках приглашения/добавления
   и в массовом действии над участниками. */
.v2-gp-tools { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.v2-gp-search { flex: 1; min-width: 0; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; outline: none; }
.v2-gp-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.v2-gp-all { flex: none; white-space: nowrap; }
.v2-inv-groups { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin-top: 6px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; }
.v2-chk { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.v2-chk:hover { background: var(--panel-2); }
.v2-chk input { width: 15px; height: 15px; accent-color: var(--primary); flex: none; }
.v2-gp-empty { padding: 12px 4px 2px; text-align: center; }
.v2mem-chk { width: 16px; height: 16px; accent-color: var(--primary); flex: none; cursor: pointer; }
.v2mem-bulkbar { border-radius: 10px; margin-bottom: 12px; }
.v2mem-bulkbar .sb-act[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.sb-act.sb-danger { color: #e5484d; }
.sb-act.sb-danger:hover:not([disabled]) { background: rgba(229,72,77,.12); }
/* ── Единая шторка «Доступ» (0106, владелец: «отделить группы/задачи, фильтры, массовые везде»):
   раздельные вкладки [Группы | Задачи] сегмент-контролом, поиск + фильтр-чипы + «Выбрать все» на
   каждой, сводка выбора. Apple-grade: тонкие хэйрлайны, мягкие тени, плавные состояния 140ms. ── */
.v2acc { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.v2acc-pane { display: flex; flex-direction: column; gap: 9px; }
.v2acc-cap { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 2px; letter-spacing: .01em; }
/* сегмент-контрол iOS: трек-подложка, активная «таблетка» с мягкой тенью */
.v2acc-segs { display: flex; gap: 3px; padding: 3px; background: var(--panel-2); border-radius: 10px; }
.v2acc-seg { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.v2acc-seg svg.ic { width: 15px; height: 15px; opacity: .9; }
.v2acc-seg:hover { color: var(--text); }
.v2acc-seg.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px var(--line); }
.v2acc-badge { min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v2acc-badge:empty { display: none; }
/* короткая контекстная подпись — одна строка */
.v2acc-hint { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 0 2px; }
.v2acc-hint b { color: var(--text); font-weight: 600; }
/* тулбар: поиск с иконкой + «Выбрать все» кнопкой */
.v2acc-tools { display: flex; align-items: center; gap: 8px; }
.v2acc-searchwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.v2acc-searchwrap > svg.ic { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.v2acc-search { flex: 1; min-width: 0; padding: 8px 11px 8px 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.v2acc-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.v2acc-all { flex: none; white-space: nowrap; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.v2acc-all:hover { color: var(--text); background: var(--panel-2); }
.v2acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v2acc-chip { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.v2acc-chip:hover { color: var(--text); }
.v2acc-chip.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); font-weight: 600; }
/* сгруппированный инсет-список с хэйрлайн-разделителями (iOS grouped table) */
.v2acc-list { display: flex; flex-direction: column; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.v2acc-row { display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 13px; border-radius: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .13s ease; }
.v2acc-row:last-child { border-bottom: none; }
.v2acc-row:hover { background: var(--panel-2); }
.v2acc-row.on-sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.v2acc-row.on-sel:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
/* кастомный чекбокс — скруглённый, заливка акцентом + белая галочка */
.v2acc-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; position: relative; transition: background .13s ease, border-color .13s ease; }
.v2acc-row:hover input[type="checkbox"] { border-color: var(--muted); }
.v2acc-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.v2acc-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 4px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v2acc-row input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow); }
.v2acc-rowmain { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.v2acc-rowtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.v2acc-trow .v2acc-rowtitle { flex: 1; }
/* мягкие тинт-бейджи статуса — без кричащих заливок */
.v2acc-tstatus { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; color: var(--muted); background: var(--panel-2); }
.v2acc-tstatus.cat-started { color: #c77700; background: rgba(245,166,35,.14); }
.v2acc-tstatus.cat-done { color: #1f9d55; background: rgba(31,157,85,.13); }
.v2acc-tstatus.cat-cancelled { color: var(--muted); text-decoration: line-through; }
html[data-theme="light"] .v2acc-tstatus.cat-started { color: #b5710f; }
.v2acc-empty { padding: 16px 4px; text-align: center; }
.v2acc-none { padding: 20px 10px; text-align: center; line-height: 1.5; border: 1px dashed var(--line); border-radius: 12px; }
/* сводка выбора — числа акцентом */
.v2acc-summary { font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; padding: 3px 2px 0; }
.v2acc-summary b { color: var(--text); font-weight: 700; }
/* Пикер «Сотрудники компании» на создании проекта (0105) — поиск + фильтр «Все/Администраторы»
   + «Выбрать все», строка с аватаром и должностью. Тот же язык, что v2-gp (группы). */
.v2-pp-tools { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.v2-pp-search { flex: 1; min-width: 0; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; outline: none; }
.v2-pp-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.v2-pp-all { flex: none; white-space: nowrap; }
.v2-pp-filters { display: flex; gap: 7px; margin: 8px 0 2px; }
.v2-pp-fchip { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; cursor: pointer; }
.v2-pp-fchip.on { background: var(--accent); color: #fff; border-color: transparent; }
.v2-pp-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; margin-top: 6px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; }
.v2-pp-name { display: flex; flex-direction: column; min-width: 0; }
.v2-pp-dn { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pp-title { font-size: 11.5px; color: var(--muted); }
.v2-pp-empty { padding: 12px 4px 2px; text-align: center; }
/* Массовый пикер участников (Добавить участников… в каталоге проектов) — поиск + секции
   «Сотрудники компании / Другие», паритет с пикерами задач. Apple-grade. */
.bmp { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bmp-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color .13s, box-shadow .13s; }
.bmp-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.bmp-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bmp-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 14px; padding: 9px 0; }
.bmp-list { display: flex; flex-direction: column; gap: 14px; max-height: min(52vh, 440px); overflow: auto; margin: 0 -4px; padding: 2px 4px; }
.bmp-sec { display: flex; flex-direction: column; gap: 3px; }
.bmp-sec-h { display: flex; align-items: center; gap: 8px; padding: 2px 6px 6px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.bmp-sec-t { font-size: 12px; font-weight: 640; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.bmp-sec-n { font-size: 11.5px; color: var(--muted); background: var(--panel-2); border-radius: 20px; padding: 1px 8px; min-width: 20px; text-align: center; }
.bmp-all { margin-left: auto; border: 0; background: transparent; color: var(--primary); font-size: 12.5px; font-weight: 560; cursor: pointer; padding: 3px 6px; border-radius: 7px; transition: background .12s; }
.bmp-all:hover { background: var(--glow); }
.bmp-rows { display: flex; flex-direction: column; gap: 2px; }
.bmp-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.bmp-row:hover { background: var(--panel-2); }
.bmp-row.on { background: var(--glow); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.bmp-row .tw-avs { flex: none; }
.bmp-name { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.bmp-dn { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmp-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmp-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background .12s, border-color .12s, color .12s; }
.bmp-check svg { width: 14px; height: 14px; }
.bmp-row.on .bmp-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.bmp-empty { padding: 22px 4px; text-align: center; }
/* Обзор */
.v2ov { padding: 18px 20px 26px; }
.v2ov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; row-gap: 10px; }
.v2ov-coin { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 700; flex: none; }
.v2ov-htext { min-width: 0; }
.v2ov-name { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.v2ov-hsub { display: flex; gap: 7px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.v2ov-acts { display: flex; gap: 8px; align-items: center; }
.v2ov-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px){ .v2ov-grid { grid-template-columns: 1fr; } }
.v2ov-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v2ov-card { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px; }
.v2ov-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 11px; }
.v2ov-meta .v2-dr-meta { margin-top: -4px; }
.v2ov-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
/* Палитра цвета проекта — общий вид для рельса (openEditProjectPopover) и «О проекте» на Обзоре.
   Кольцо через box-shadow (не border), чтобы выделение было видно и на светлой, и на тёмной теме. */
.np-sw { width: 22px; height: 22px; border-radius: 7px; border: 0; cursor: pointer; padding: 0; flex: 0 0 auto; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.np-sw:hover { box-shadow: 0 0 0 2px var(--line, rgba(0,0,0,.12)); }
.np-sw.on { box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--text, #111); }
.v2ov-danger { border-color: var(--danger, #e5484d); }
.v2ov-prog { display: flex; align-items: center; gap: 12px; }
.v2ov-bar { flex: 1; height: 9px; border-radius: 100px; background: var(--panel-2); overflow: hidden; }
.v2ov-bar > i { display: block; height: 100%; border-radius: 100px; background: var(--accent); transition: width .3s ease; }
.v2ov-bar.done > i { background: #22c55e; }
.v2ov-pct { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.v2ov-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.v2ov-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.v2ov-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.v2ov-chip.ok b { color: #22c55e; }
.v2ov-chip.bad { background: rgba(239,68,68,.12); border-color: transparent; }
.v2ov-chip.bad b { color: var(--danger); }
.v2ov-list { display: flex; flex-direction: column; }
.v2ov-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13.5px; border-bottom: 1px solid var(--line); background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; color: var(--text); }
.v2ov-row:last-child { border-bottom: 0; }
.v2ov-row:hover { background: var(--panel-2); border-radius: 8px; }
.v2ov-due { font-size: 11.5px; color: var(--muted); min-width: 56px; flex: none; font-variant-numeric: tabular-nums; }
.v2ov-due.bad { color: var(--danger); font-weight: 600; }
.v2ov-rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2ov-member { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 13.5px; }
.v2ov-mn { color: var(--text); }
.v2ov-mrole { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* чипы */
.v2-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.v2-chip svg.ic { width: 13px; height: 13px; }
.v2-chip.mini { padding: 2px 7px; }
.v2-chip.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.v2-chip.warn { background: color-mix(in srgb, #EF9F27 22%, transparent); color: #d08a14; }
.v2-chip.bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.v2-flag { display: inline-flex; }
.v2-flag svg.ic { width: 14px; height: 14px; }

/* доска: больше воздуха */
.v2-card-foot-l { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw-col-ph { padding: 14px 0; text-align: center; color: var(--muted); font-size: 12px; }

/* строки списков */
.v2-list .tw-row { padding: 11px 12px; }
.tw-row-title { display: flex; align-items: center; gap: 8px; }

/* аватары имён */
.v2-uname { font-size: 12px; color: var(--text); }

/* ── Календарь сроков: настоящая месячная сетка ── */
.v2cal-bar { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; }
.v2cal-nav { display: flex; align-items: center; gap: 6px; }
.v2cal-month { font-size: 16px; font-weight: 600; color: var(--text); min-width: 158px; text-align: center; text-transform: capitalize; }
.v2cal-vtoggle { flex: none; }
.v2cal-vtoggle button { display: inline-flex; align-items: center; gap: 6px; }
.v2cal-vtoggle button svg.ic { width: 15px; height: 15px; }

.v2cal-grid-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.v2cal-wdrow, .v2cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.v2cal-wd { padding: 9px 10px; font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.v2cal-wd.we { color: #b78f8f; }
.v2cal-cell { min-height: 96px; padding: 6px 6px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.v2cal-cell:nth-child(7n) { border-right: none; }
.v2cal-grid > .v2cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.v2cal-cell.we { background: rgba(255,255,255,.018); }
.v2cal-cell.oom { background: rgba(0,0,0,.14); }
/* hover после .we/.oom + равная им специфичность по классам, иначе static-фон перебивал ховер */
.v2cal-cell:hover, .v2cal-cell.we:hover, .v2cal-cell.oom:hover { background: var(--panel-2); }
.v2cal-cell.oom .v2cal-dn { color: #545b69; }
.v2cal-cell.sel { box-shadow: inset 0 0 0 2px var(--primary); }
.v2cal-dn { font-size: 12px; color: var(--text); width: 24px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }
.v2cal-cell.today .v2cal-dn { background: var(--grad); color: #fff; font-weight: 600; }
.v2cal-evs { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.v2cal-ev { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.35; color: var(--text);
  background: color-mix(in srgb, var(--evc) 17%, transparent); border-left: 3px solid var(--evc);
  border-radius: 4px; padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.v2cal-ev:hover { background: color-mix(in srgb, var(--evc) 32%, transparent); }
.v2cal-ev.od { opacity: .6; }
.v2cal-ev-t { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.v2cal-ev-x { overflow: hidden; text-overflow: ellipsis; }
.v2cal-more { font-size: 10px; color: var(--muted); padding: 0 4px; }
.v2-sec.v2cal-sec-bad { color: var(--danger); }

/* ── Правая ШТОРКА (деталь) ── */
.v2-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; }
.v2-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 94vw); z-index: 61;
  background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease; box-shadow: -12px 0 40px -12px rgba(0,0,0,.5); }
.v2-drawer.open { transform: translateX(0); }
.v2-dr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); }
.v2-dr-type { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.v2-dr-scroll { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }
.v2-dr-title { width: 100%; background: transparent; border: none; color: var(--text); font-size: 18px; font-weight: 500;
  padding: 4px 0 10px; outline: none; }
.v2-dr-title:focus { border-bottom: 1px solid var(--primary); }
.v2-dr-meta { display: flex; flex-direction: column; }
.v2-d-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); min-height: 40px; }
.v2-d-label { width: 130px; flex: none; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.v2-d-label svg.ic { width: 15px; height: 15px; }
.v2-d-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.v2-d-val .tw-select, .v2-d-val input[type="date"] { background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.v2-dr-section-h { font-size: 12px; color: var(--muted); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
/* Группы проекта (0104): поиск + список строк + свёрнутый архив «Чат с ИИ · задача».
   Раньше все группы (в т.ч. сотни приватных ИИ-бесед по задачам) шли одной стеной
   одинаковых серых кнопок — нечитаемо на масштабе (жалоба владельца на дизайн). */
.v2-grp-search { position: relative; margin-bottom: 6px; }
.v2-grp-search input { width: 100%; background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px 7px 32px; font: inherit; font-size: 13px; outline: none; transition: border-color .12s; }
.v2-grp-search input:focus { border-color: var(--primary); }
.v2-grp-search svg.ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.v2-grp-list { display: flex; flex-direction: column; gap: 2px; }
.v2-grp-list.scroll { max-height: 244px; overflow-y: auto; padding-right: 2px; }
.v2-grp-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 9px; padding: 7px 6px; color: var(--text); font: inherit; font-size: 13.5px; transition: background .12s; }
.v2-grp-row:hover { background: var(--panel-2); }
.v2-grp-row svg.ic:last-child { width: 14px; height: 14px; color: var(--muted); flex: none; opacity: 0; transition: opacity .12s; }
.v2-grp-row:hover svg.ic:last-child { opacity: 1; }
.v2-grp-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--muted); }
.v2-grp-ic svg.ic { width: 14px; height: 14px; }
.v2-grp-ic.ai { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-2); }
.v2-grp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-grp-empty, .v2-grp-no-results { display: block; padding: 6px; }
.v2-grp-ai-h { cursor: pointer; user-select: none; }
.v2-grp-ai-h .v2-grp-chev { order: 2; display: inline-flex; width: 14px; height: 14px; transition: transform .16s; }
.v2-grp-ai-h .v2-grp-chev svg.ic { width: 14px; height: 14px; }
.v2-grp-ai-h.open .v2-grp-chev { transform: rotate(90deg); }
.v2-grp-ai-body { display: none; }
.v2-grp-ai-body.open { display: block; animation: v2GrpAiIn .14s ease; }
@keyframes v2GrpAiIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* участники проекта + статусы доски (шторка проекта) */
.v2-members, .v2-statuses { display: flex; flex-direction: column; gap: 4px; }
.v2-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.v2-member:hover { background: var(--panel-2); }
.v2-member-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v2-member-r { display: flex; align-items: center; gap: 6px; flex: none; }
.v2-member-r .tw-select { padding: 3px 24px 3px 8px; font-size: 12px; }
.v2-status-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.v2-status-row .v2-uname { flex: 1; }
.v2-asg-rm { background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 6px; display: inline-flex; }
.v2-asg-rm:hover { color: var(--urg-overdue); background: var(--panel); }
.v2-asg-rm svg.ic { width: 14px; height: 14px; }
.v2-add-btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.v2-proj-avs { display: inline-flex; align-items: center; margin-left: 6px; }
.v2-d-desc { width: 100%; min-height: 64px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; font: inherit; resize: vertical; }
.v2-asg { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border-radius: 8px; padding: 2px 4px 2px 2px; }
.v2-asg-rm { background: transparent; border: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 2px; }
.v2-asg-rm svg.ic { width: 12px; height: 12px; }

/* вкладки детали */
.v2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 12px; }
.v2-tabs button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;
  border-bottom: 2px solid transparent; color: var(--muted); padding: 9px 8px; cursor: pointer; font: inherit; font-size: 13px; }
.v2-tabs button.active { color: var(--text); border-bottom-color: var(--primary); }

/* обсуждение */
.v2-cms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* обсуждение как чат: чужие слева с аватаром, свои справа без аватара */
.v2-cm { display: flex; align-items: flex-end; gap: 7px; max-width: 88%; }
.v2-cm.own { margin-left: auto; flex-direction: row-reverse; }
.v2-cm-bubble { background: var(--theirs); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 5px; padding: 7px 11px; min-width: 0; }
.v2-cm.own .v2-cm-bubble { background: var(--mine); border-color: transparent; border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.v2-cm.internal .v2-cm-bubble { background: color-mix(in srgb, #EF9F27 12%, var(--theirs)); border-color: color-mix(in srgb, #EF9F27 32%, var(--line)); }
.v2-cm-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.v2-cm-h b { color: var(--primary-2); font-weight: 600; }
.v2-cm.own .v2-cm-h { justify-content: flex-end; }
.v2-cm-h .tw-muted { margin-left: auto; }
.v2-cm-b { font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.v2-cm-add { display: flex; align-items: center; gap: 6px; position: sticky; bottom: 0; background: var(--bg); padding-top: 6px; }
.v2-cm-add input[type="text"] { flex: 1; background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px; font: inherit; }
.v2-cm-add .icon-btn.on { color: #d08a14; }
/* кнопки в строке ввода (отправить/замок) не должны растягиваться (primary = full-width) */
.v2-cm-add button { flex: none; width: auto; }
.v2-act { font-size: 13px; color: var(--text); padding: 6px 0; border-bottom: 1px solid var(--line); }
.v2-time-total { font-size: 14px; margin-bottom: 8px; }
.v2-star { cursor: pointer; color: var(--line); display: inline-flex; }
.v2-star svg.ic { width: 20px; height: 20px; }
.v2-star.on { color: #ffd54a; }

/* модалка создания / пикер */
/* z-index ВЫШЕ полосы «страничных» оверлеев (.cli-overlay/#compOverlay=9000, .cli-scrim=9100,
   .pr-ov=9200), иначе модалка v2 (аналитика проекта/компании, новое обращение), открытая ИЗ
   «Компаний»/«Клиентов», уходит ЗА оверлей и выглядит как «ничего не открылось». Держим под
   PiP(9300)/tw-pop(9600)/cc-spot(9999) — они по дизайну поверх всего. */
.v2-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9250; display: flex; align-items: center; justify-content: center; padding: 20px; }
.v2-modal { width: min(440px, 96vw); max-height: 86vh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.v2-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 500; }
.v2-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.v2-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
/* promptModal — async in-app замена браузерного prompt() (работает в Electron/везде).
   🔴 z-index ВЫШЕ любого другого оверлея (композер сториз 13200, карусель/просмотрщик
   13000, «Закреплённые»-модалка макс. 13600) — иначе, будучи вызванным ИЗНУТРИ них
   (напр. «+ Новая группа» в композере сториз), рендерится ПОД ними: невидим и некликабелен.
   Ровно это скрывало выбор группы на «следующем шаге» и читалось как «пропавшая кнопка» —
   жалоба владельца 2026-07-24. Нативный prompt() браузера ВСЕГДА поверх всего — этот дроп-ин
   должен вести себя так же. */
.pm-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 13800; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pm-card { width: min(420px, 96vw); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.5); overflow: hidden; }
.pm-head { padding: 15px 18px; font-weight: 600; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--line); }
.pm-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pm-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.pm-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; outline: none; font-family: inherit; }
.pm-input:focus { border-color: var(--accent); }
.pm-hint { font-size: 12px; color: var(--muted); white-space: pre-line; }
.pm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.pm-foot .primary, .pm-foot .ghost { width: auto; margin: 0; }
.v2-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.v2-f input, .v2-f textarea, .v2-f select { background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font: inherit; }
.v2-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v2-pick { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.v2-pick-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); cursor: pointer; color: var(--text); }
.v2-pick-row.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.v2-pick-row svg.ic { width: 16px; height: 16px; margin-left: auto; color: var(--primary); }

/* плашка «по задаче» на сообщении-зеркале обсуждения в общем чате */
.msg-task-ref { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px; padding: 3px 9px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); font-size: 11px; cursor: pointer; }
.msg-task-ref svg.ic { width: 13px; height: 13px; }
.msg-task-ref:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }

/* svg-иконки в пилюлях v1-воркспейса и бейдже источника задачи */
.tw-pill { display: inline-flex; align-items: center; gap: 4px; }
.tw-pill svg.ic { width: 12px; height: 12px; }
.td-source { display: inline-flex; align-items: center; gap: 5px; }
.td-source svg.ic { width: 13px; height: 13px; }

/* дашборд аналитики */
.v2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 6px; }
.v2-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.v2-stat-v { font-size: 22px; font-weight: 500; color: var(--text); }
.v2-stat-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* 🔴 БАГ (был на проде): карточка ловила ГЛОБАЛЬНЫЙ стиль КНОПКИ `.danger`
   (background:var(--danger); color:#fff — ниже по файлу, поэтому выигрывал) → вся плашка
   заливалась красным, а число красилось var(--danger) = красное на красном → цифру
   просрочек было НЕ ВИДНО. Возвращаем карточный вид: мягкая подложка + читаемое число.
   🔴 Специфичность: голое `.v2-stat.danger` (0,2,0) ПРОИГРЫВАЕТ светлому
   `html[data-theme="light"] .danger` (0,2,1) — поэтому дублируем селектор под светлую (0,3,1). */
.v2-stat.danger,
html[data-theme="light"] .v2-stat.danger { background: var(--danger-soft); color: var(--text); border-color: rgba(239,68,68,.32); box-shadow: none; }
.v2-stat.danger .v2-stat-v,
html[data-theme="light"] .v2-stat.danger .v2-stat-v { color: var(--danger); }
.v2-stat.danger .v2-stat-l,
html[data-theme="light"] .v2-stat.danger .v2-stat-l { color: var(--muted); }

/* ═══════ Дашборд аналитики эффективности (Компания/Сотрудники/Проекты) ═══════ */
.dash-bar { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.dash-scope { display: inline-flex; margin: 0 0 16px; }
.dash-period button, .dash-scope button { font-size: 12.5px; }
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.dash-idx { border-color: var(--accent); background: linear-gradient(180deg, rgba(102,126,234,.14), rgba(102,126,234,.02)); }
.dash-idx.s-hi { border-color: var(--ok); background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.02)); }
.dash-idx.s-mid { border-color: var(--urg-today); background: linear-gradient(180deg, rgba(229,162,60,.14), rgba(229,162,60,.02)); }
.dash-idx.s-lo { border-color: var(--danger); background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.02)); }
.dash-idx .v2-stat-v { font-weight: 700; }
.dash-idx-u { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }

/* Карточки сами добавляют колонки по мере ширины (2 на ~1000, 3 на ~1400, 4 на ~1850) —
   растущие данные просто втекают в сетку, а не удлиняют скролл. */
.dash-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px; margin: 14px 0; align-items: start; }
.dash-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.dash-card-h { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.dash-hint { font-size: 10.5px; font-weight: 400; color: var(--muted); }
/* ── Графики: фикс-высота, свободная ширина, БЕЗ растяжения геометрии ──────────
   Плот-зона = content-box (.dchart минус паддинги под значения сверху и подписи снизу).
   Сетка/линия/точки позиционируются в тот же inset — совпадают пиксель-в-пиксель. */
.dchart { position: relative; height: 200px; padding: 20px 0 24px; }
.dchart-grid { position: absolute; inset: 20px 0 24px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.dchart-grid i { display: block; height: 1px; background: var(--line); opacity: .75; position: relative; }
.dchart-grid.pct i::after { content: attr(data-v) "%"; position: absolute; right: 0; top: -7px; font-size: 9.5px; line-height: 14px; color: var(--muted); background: var(--panel); padding: 0 4px; border-radius: var(--r-xs); }
.dchart-bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 8px; }
.dbar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.dbar-fill { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 40px; height: var(--h, 0%);
  background: rgba(139,147,163,.34); border-radius: var(--r-xs) var(--r-xs) 2px 2px; transition: height var(--dur-2) var(--ease), background var(--dur-1) var(--ease); }
.dbar.hot .dbar-fill { background: var(--primary); }
.dbar:hover .dbar-fill { background: var(--primary-2); }
.dbar-v { position: absolute; left: 0; right: 0; bottom: var(--h, 0%); margin-bottom: 5px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text); }
.dbar-v.zero { color: var(--text-dim); font-weight: 400; }
.dbar-x { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar.hot .dbar-x { color: var(--text); font-weight: 600; }

/* Линия «в срок»: stroke не масштабируется (non-scaling-stroke), точки — CSS по % */
/* 🔴 Размер SVG задаём ЯВНО (width/height), а не через inset: <svg> — replaced element,
   для него `width/height:auto` = интринсик-размер, inset его НЕ растягивает (с `height:auto`
   график раздувался и вылезал за карточку). calc(100% - 44px) = высота плот-зоны (padding 20+24). */
.dline { position: absolute; top: 20px; left: 0; width: 100%; height: calc(100% - 44px); display: block; overflow: visible; }
.dline-p { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dline-area { fill: var(--primary); opacity: .1; stroke: none; }
.dline-dots { position: absolute; inset: 20px 0 24px; pointer-events: none; }
.dline-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--panel); border: 2px solid var(--primary); pointer-events: auto; transition: transform var(--dur-1) var(--ease); }
.dline-dot:hover { transform: scale(1.35); }
.dline-dot.hot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--primary); box-shadow: 0 0 0 3px rgba(102,126,234,.18); }
/* 🔴 height задаём явно: базовое `.dchart-bars{height:100%}` (=200px padding-box) перебивало
   пару top/bottom из inset → блок уезжал на 20px ниже, а подписи дат — под карточку. */
.dchart-bars.ghost { position: absolute; top: 20px; left: 0; right: 0; height: calc(100% - 44px); pointer-events: none; }

.dchart-empty { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 12.5px; }
.dchart-empty .ic { width: 22px; height: 22px; opacity: .4; }

/* План-факт живёт ВНУТРИ .dash-card → своя рамка/фон не нужны (была карточка в карточке). */
.dash-pf { padding: 2px 0 0; }
.dash-pf-row { margin: 0 0 14px; }
.dash-pf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dash-pf-lab { font-size: 12.5px; color: var(--muted); }
/* Тонкие треки-линии (999 на 10px = линия, не «пилюля» — см. правило «квадратного» UI). */
.dash-pf-bar { flex: 1; background: rgba(139,147,163,.14); border-radius: var(--r-full); height: 10px; overflow: hidden; }
.dash-pf-bar i { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--dur-2) var(--ease); }
.dash-pf-bar i.plan { background: var(--text-dim); opacity: .55; }
.dash-pf-bar i.fact { background: var(--primary); }
/* Перерасход — янтарный fill-токен (НЕ var(--warning): в светлой теме он #9a6a00 под
   AA-контраст текста и давал грязно-оливковую полосу во всю строку). */
.dash-pf-bar i.fact.over { background: var(--fill-warn); }
.dash-pf-num { text-align: right; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dash-pf-num.over { color: var(--warning); }
.dash-pf-num em { font-style: normal; font-size: 11px; opacity: .85; }
.dash-pf-legend { font-size: 11.5px; color: var(--muted); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.dash-pf-legend b { color: var(--text); }

.dash-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.dash-tbl th { text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 0 10px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash-tbl th:first-child, .dash-tbl td:first-child { text-align: left; }
/* Широкий экран: ширину таблицы заполняем ДАННЫМИ (доп. колонки), а не растяжкой пустоты.
   Колонка имени ограничена, иначе забирала ~1200px и до цифр глазу было далеко. */
.dash-tbl th:first-child, .dash-tbl td:first-child { max-width: 420px; }
.dash-tbl td:first-child { overflow: hidden; text-overflow: ellipsis; }
.dash-tbl td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--text); text-align: center; white-space: nowrap; }
.dash-tbl tbody tr { cursor: pointer; transition: background .1s; }
.dash-tbl tbody tr:hover { background: rgba(102,126,234,.07); }
.dash-tbl tbody tr:last-child td { border-bottom: none; }
.dash-name { display: flex; align-items: center; gap: 8px; }
.dash-ava { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--grad); flex-shrink: 0; }
.dash-pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dash-ok { color: var(--ok); } .dash-mid { color: var(--urg-today); } .dash-bad { color: var(--danger); }
.v2-chip.dash-ok { color: var(--ok); border-color: rgba(34,197,94,.4); }
.v2-chip.dash-mid { color: var(--urg-today); border-color: rgba(229,162,60,.4); }
.v2-chip.dash-bad { color: var(--danger); border-color: rgba(239,68,68,.4); }
.dash-score { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 7px; font-weight: 700; font-size: 12.5px; background: rgba(139,147,163,.16); color: var(--muted); }
.dash-score.s-hi { background: rgba(34,197,94,.16); color: var(--ok); }
.dash-score.s-mid { background: var(--urg-today-soft); color: var(--urg-today); }
.dash-score.s-lo { background: rgba(239,68,68,.16); color: var(--danger); }

.dash-back { margin-bottom: 8px; }
.dash-detail-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-detail-name { font-size: 17px; font-weight: 600; color: var(--text); }
.dash-funnel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 15px; }
.dash-funnel-row { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.dash-funnel-lab { width: 130px; font-size: 12.5px; color: var(--text); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-funnel-bar { flex: 1; background: rgba(139,147,163,.14); border-radius: 6px; height: 13px; }
.dash-funnel-bar i { display: block; height: 100%; border-radius: 6px; background: rgba(139,147,163,.5); }
.dash-funnel-bar i.cat-started { background: var(--accent); }
.dash-funnel-bar i.cat-done { background: var(--ok); }
.dash-funnel-bar i.cat-cancelled { background: var(--danger); }
.dash-funnel-num { width: 40px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tw-row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Чипы «план/факт по времени» и «факт-дата» на карточке/строке задачи. */
.tw-pill-pf, .task-chip.pf { color: var(--muted); }
.tw-pill-pf .pf-sep { opacity: .5; margin: 0 1px; }
.tw-pill-pf.over, .task-chip.pf.over { color: var(--urg-today); }
.tw-pill-sched.ok, .task-chip.sched.ok { color: var(--ok); }
.tw-pill-sched.over, .task-chip.sched.over { color: var(--danger); }

/* Дашборд аналитики в модалке (кнопки «Аналитика» проекта/компании, клик по человеку). */
/* КРУПНАЯ модалка (90vw × 90vh), НЕ фуллскрин: у нас нет 100%-оверлеев, вокруг ДОЛЖЕН
   быть виден затемнённый фон — иначе не читается как модалка (владелец, 2026-07-21).
   Раньше капали 1560px/94vh → на широком мониторе «плавало мелко». Теперь 90% (кап
   2200px на ультравайде для читаемости), скругление+бордер+тень = чистая модалка;
   внутри — липкий тулбар (blur, хэйрлайн) и скролл. Scoped на .dash-modal — вкладка
   «Аналитика» (.dash-page) не затрагивается (renderDash общий). */
.dash-scrim { background: rgba(0,0,0,.55); animation: dashScrimIn .16s ease; }
.dash-modal {
  width: min(90vw, 2200px); height: 90vh; max-height: 90vh;
  display: flex; flex-direction: column; position: relative; padding: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 80px -24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.18);
  animation: dashModalIn .18s cubic-bezier(.22, .61, .36, 1);
}
.dash-modal-x { position: absolute; top: 12px; right: 14px; z-index: 6; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: color .12s, border-color .12s, background .12s; }
.dash-modal-x:hover { color: var(--text); border-color: var(--lineStrong); background: var(--panel-2); }
.dash-modal-body { --dash-pad: clamp(16px, 2.6vw, 40px); overflow-y: auto; overflow-x: hidden; padding: 0 var(--dash-pad); }
/* Липкий тулбар во всю ширину окна (full-bleed через отриц. поля = −внутр. отступ
   скроллера), но его СОДЕРЖИМОЕ выровнено с контентом. Полупрозрачный фон + blur. */
.dash-modal-body .dash-controls { margin: 0 calc(-1 * var(--dash-pad)); padding: 14px var(--dash-pad) 12px; z-index: 3; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.dash-modal-body .dash-content { padding: 18px 0 40px; margin-top: 0; }
.dash-modal-body .v2-toolbar-title { font-size: 17px; font-weight: 600; }
.dash-modal-body .dash-bar { padding-right: 44px; flex-wrap: wrap; }
@keyframes dashModalIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dashScrimIn { from { opacity: 0; } to { opacity: 1; } }
.dash-content { margin-top: 2px; }
.dash-clickrow { cursor: pointer; }
.dash-clickrow:hover { background: rgba(102,126,234,.07); }
.dash-clickrow .tw-row-side svg.ic { width: 14px; height: 14px; opacity: .5; }
.dash-tip { margin: 2px 0 12px; padding: 8px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.dash-tbl tbody tr[data-emp], .dash-tbl tbody tr[data-proj] { cursor: pointer; }
.v2-member-click { cursor: pointer; border-radius: 8px; padding: 2px 5px; margin: -2px -5px; transition: background .1s; }
.v2-member-click:hover { background: rgba(102,126,234,.12); }

/* ── Полностраничная аналитика: вкладка «Аналитика» пространства задач (в #twBody). ──
   Хост фикс-высоты (флекс-родитель), скролл ТОЛЬКО контента, липкие контролы сверху —
   поэтому страница не «прыгает высотой» как прежняя модалка. */
/* 🔴 Ширина: раньше max-width 1180 на любом мониторе → на 1920 простаивало 644px (35%),
   на 2560 — половина экрана. Дашборд — плотный экран данных (их будет больше), поэтому
   отдаём ему всю ширину; 2200 — санитарный кап для ультравайда, чтобы строки не «разъезжались». */
.dash-page { padding: 18px clamp(16px, 1.6vw, 28px) 40px; max-width: 2200px; margin: 0 auto; }
.dash-controls { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 6px 0 10px; }
.dash-controls .dash-bar { flex-wrap: wrap; }
.dash-controls .dash-scope { margin-bottom: 0; }
.dash-me-badge { font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(102,126,234,.14); border: 1px solid rgba(102,126,234,.35); border-radius: 6px; padding: 2px 10px; margin-left: 2px; }

/* «Свой период» (кнопка + поповер дат) и мультивыбор проектов для сводной аналитики. */
.dash-custom.active { background: rgba(102,126,234,.14); border-color: rgba(102,126,234,.4) !important; color: var(--accent); }
.dash-custom.active .ic { color: var(--accent); }
.dash-pop .tc-pop-presets { margin-bottom: 8px; }
.dash-pop input[type="date"] { color-scheme: dark; }
html[data-theme="light"] .dash-pop input[type="date"] { color-scheme: light; }

.dash-cbcell { width: 36px; text-align: center; cursor: pointer; }
.dash-cb { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--lineStrong); border-radius: 6px; color: transparent; transition: background .12s, border-color .12s, color .12s; vertical-align: middle; }
.dash-cbcell:hover .dash-cb { border-color: var(--accent); }
.dash-cb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-cb .ic { width: 12px; height: 12px; }
.dash-tbl-sel tbody tr.dash-rowsel { background: rgba(102,126,234,.08); }
.dash-tbl-sel tbody tr.dash-rowsel:hover { background: rgba(102,126,234,.13); }

/* Полоса выбора — компактная плашка по содержимому (не растянутая на всю ширину:
   на 1800px текст слева и кнопка у правого края читались как две разные вещи). */
.dash-selbar { display: inline-flex; align-items: center; gap: 12px; margin: 2px 0 14px; padding: 7px 8px 7px 13px; background: var(--sel); border: 1px solid rgba(102,126,234,.32); border-radius: var(--r-md); }
.dash-selbar-t { font-size: 13px; color: var(--text); }
.dash-selbar-t b { color: var(--accent); }
/* svgIcon+подпись в кнопке должны идти в строку (без inline-flex «✕» вставал над текстом). */
.dash-selbar .ghost { display: inline-flex; align-items: center; gap: 6px; }
.dash-selbar .ghost .ic { width: 14px; height: 14px; }
.dash-combined { margin-bottom: 16px; }

/* «Я vs команда» — бенчмарк-карточки в личном срезе. */
.dash-bench { margin: 14px 0 4px; }
.dash-bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dash-bench-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.dash-bench-lab { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.dash-bench-mine { font-size: 20px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.dash-bench-mine.dash-ok { color: var(--ok); }
.dash-bench-mine.dash-bad { color: var(--danger); }
.dash-bench-arrow { font-size: 12px; }
.dash-bench-team { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

@media (max-width: 720px) { .dash-grid2 { grid-template-columns: 1fr; } }

/* Уведомления: «колокол» в шапке с красной точкой, когда granted, но подписка не прошла. */
#notifyTopBtn.has-error::after {
  content: "●";
  color: #e5484d;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ЕДИНАЯ ДИЗАЙН-СИСТЕМА (эталон — редизайн профиля): применяем к оверлеям
 *  поиска специалистов / компаний / клиентов (.cli-* / .dir-*) и к Работе v2
 *  (задачи/тикеты, .tw-* / .v2-*). Блок В КОНЦЕ + повышенная специфичность
 *  (⚠️ не писать звёздочку-слэш слитно в комментах — закрывает коммент раньше
 *  времени и «съедает» первое правило блока; было с ?v=125)
 *  (.cli-overlay …, #workspaceV2 …, .v2-drawer …) → перебивает и инжектируемые
 *  оверлей-стили, и базовые v2, БЕЗ правки их HTML/JS. Токены: см. :root + --accent.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* — Поля ввода: единый радиус 11, ровные отступы, фокус-кольцо (как в профиле) — */
.cli-overlay .cli-input, .cli-overlay .cli-select, .cli-overlay .cli-search,
#workspaceV2 .v2-f input, #workspaceV2 .v2-f select, #workspaceV2 .v2-f textarea,
.v2-drawer .v2-cm-add input[type="text"], .v2-drawer .v2-d-val .tw-select,
.v2-drawer .v2-d-val input[type="date"] {
  border-radius: 11px; padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.cli-overlay .cli-input:focus, .cli-overlay .cli-select:focus, .cli-overlay .cli-search:focus,
#workspaceV2 .v2-f input:focus, #workspaceV2 .v2-f select:focus, #workspaceV2 .v2-f textarea:focus,
.v2-drawer .v2-cm-add input[type="text"]:focus, .v2-drawer .v2-d-val .tw-select:focus,
.v2-drawer .v2-d-val input[type="date"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow);
}

/* — Заголовки секций: индиго-акцент всем; линию-разделитель (как .rsm-head) вешаем
   ТОЛЬКО на одиночные заголовки деталей (dir-d-sec, v2-dr-section-h). .cli-sec/.v2-sec
   имеют двухчастную вёрстку (заголовок + кнопка) → им только цвет/жирность, БЕЗ ::after. */
.cli-overlay .cli-sec, .cli-overlay .dir-d-sec,
#workspaceV2 .v2-sec, .v2-drawer .v2-dr-section-h {
  font-weight: 700; letter-spacing: .05em; color: var(--primary-2);
}
.cli-overlay .dir-d-sec, .v2-drawer .v2-dr-section-h {
  display: flex; align-items: center; gap: 10px;
}
.cli-overlay .dir-d-sec::after, .v2-drawer .v2-dr-section-h::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Док-панель задачи/тикета (.task-info-panel, рядом с чатом) — её заголовки секций
   (.tip-sec .td-section-h: ПОСТАНОВЩИК/СОИСПОЛНИТЕЛИ/СТАТУС/…) НЕ попадали под #workspaceV2.
   Одиночные (иконка+текст, кнопки в соседнем .td-part-list) → индиго + линия. */
.task-info-panel .td-section-h {
  color: var(--primary-2); display: flex; align-items: center; gap: 10px;
}
.task-info-panel .td-section-h::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* — Чипы: крупнее пилюли, градиент на активном (как .pr-emp.on) — */
.cli-overlay .dir-emp { border-radius: 8px; padding: 7px 14px; font-size: 13px; transition: all .15s; }
.cli-overlay .dir-emp:hover { border-color: var(--primary); color: var(--text); }
.cli-overlay .dir-emp.on { background: var(--grad); border-color: transparent; color: #fff; }
.cli-overlay .dir-chip { border-radius: 8px; padding: 5px 11px; font-size: 12.5px; }
/* v2: активные статус-чипы — лёгкая рамка-свечение вместо плоского фона */
#workspaceV2 .v2-chip, .v2-drawer .v2-chip { border-radius: 6px; }

/* — Сегменты/табы: активный = фирменный градиент — */
.cli-overlay .cli-seg button { border-radius: 9px; padding: 7px 14px; transition: all .15s; }
.cli-overlay .cli-seg button.active { background: var(--grad); border-color: transparent; color: #fff; }

/* — Кнопки: primary/add = градиент (были плоский --accent) — */
.cli-overlay .cli-add, .cli-overlay .cli-btn.primary { background: var(--grad); border: 0; }
.cli-overlay .cli-add:hover, .cli-overlay .cli-btn.primary:hover { box-shadow: 0 6px 18px -6px var(--glow); }

/* — Ссылки/зарплата в каталоге: светлый акцент для читаемости — */
.cli-overlay .dir-link, .cli-overlay .dir-pay { color: var(--primary-2); }

/* — Карточки/строки: приятный ховер с подъёмом — */
.cli-overlay .cli-row { border-radius: 12px; transition: background .12s; }
.cli-overlay .cli-row:hover { background: var(--panel-2); }
#workspaceV2 .tw-card:hover, #workspaceV2 .v2-card:hover {
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.65);
}

/* — Модалки оверлеев (создать компанию/клиента): поля тоже с фокус-кольцом — */
.cli-scrim .cli-input, .cli-scrim .cli-select { border-radius: 11px; padding: 10px 13px; }
.cli-scrim .cli-input:focus, .cli-scrim .cli-select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow);
}
.cli-scrim .cli-btn.primary { background: var(--grad); border: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  ДИЗАЙН-СИСТЕМА — РАСШИРЕНИЕ (аудит 70 находок → корни). Легаси-namespace-классы
 *  запекли свой радиус/фокус/заливку выше базы → точечные оверрайды. НОВЫЕ страницы
 *  сюда добавлять НЕ НАДО — они наследуют базу (голые input/select/button + .field/.primary).
 * ─── Конвенция новых страниц: только токены (--panel/--line/--primary/--grad/--glow),
 *     поля = голые/.field (радиус-11+фокус-кольцо+шеврон даром), кнопки = .primary/.ghost/.danger,
 *     чипы radius 999px (активный=var(--grad)), заголовки секций = --primary-2 700 (+линия у одиночных),
 *     скрим модалок rgba(8,10,14,.72), радиус панели var(--radius). Фокус ВСЕГДА кольцо var(--glow).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* §2A. Namespace-поля: радиус 11 + фокус-кольцо + шеврон (база их не достаёт по спецификe) */
.co-input, .co-sel, .cli-input, .cli-select, .cli-search,
.ev-row input, .ev-row textarea, .ev-row select, .pr-select,
.conv-search, .users-search, .gs-add-search, .chat-search-input,
.td-check-add input, .tip-check-add input, .tip-desc,
.tw-addcol-form input, .tw-addcol-form select,
.v2-modal .v2-f input, .v2-modal .v2-f select, .v2-modal .v2-f textarea, .tw-select {
  border-radius: 11px; transition: border-color .15s, box-shadow .15s;
}
.co-input:focus, .co-sel:focus, .cli-input:focus, .cli-select:focus, .cli-search:focus,
.ev-row input:focus, .ev-row textarea:focus, .ev-row select:focus, .pr-select:focus,
.conv-search:focus, .users-search:focus, .gs-add-search:focus, .chat-search-input:focus,
.td-check-add input:focus, .tip-check-add input:focus, .tip-desc:focus,
.v2-modal .v2-f input:focus, .v2-modal .v2-f select:focus, .v2-modal .v2-f textarea:focus, .tw-select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow);
}
.co-sel, .cli-select, .ev-row select, .pr-select, .tw-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.chat-search-input { background: var(--panel-2); }
.sp-search { border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.sp-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }

/* §2B. Заголовки секций (одиночные) → индиго + линия */
.task-detail-box .td-section-h, .co-permgroup, .pr-permgrp,
.search-section, .td-section-h {
  color: var(--primary-2); font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.task-detail-box .td-section-h::after, .co-permgroup::after, .pr-permgrp::after,
.search-section::after, .td-section-h::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.tw-pop-label { color: var(--primary-2); font-weight: 700; }

/* §2C. Активные сегменты/чипы/primary-CTA → фирменный градиент; семантика → токены */
.mode-seg.active, .co-seg button.active, .pr-seg button.active,
.cli-seg button.active, .cli-add, .cli-btn.primary,
.dir-emp.on, .ev-chip.on, .ev-btn.primary,
.tasks-list .task-lens-btn.active, .call-msg-join {
  background: var(--grad); border-color: transparent; color: #fff;
}
.mode-seg.active .mode-badge { color: var(--primary); }
.ev-chip, .tasks-list .task-chip { border-radius: 6px; }
.ev-btn.danger, #coDelRole { color: var(--danger); }
.mode-badge, .mode-seg .mode-badge { background: var(--danger); }
.mer-join { background: var(--ok); }
.dir-pay, .dir-link { color: var(--primary-2); }
.ev-parse .pchip { color: var(--primary-2); }
.notify-prompt-icon { background: var(--grad); }

/* §2D. Скримы модалок → единый; радиус cli-modal → как панель */
.co-overlay, .cli-scrim, .cli-modal-scrim, .ev-overlay, .pr-ov { background: rgba(8,10,14,.72); }
.cli-modal { border-radius: var(--radius); }

/* SFU companion: бейдж «телефон подключён как микрофон+колонки» */
.gc-companion-badge{position:absolute;left:12px;bottom:64px;z-index:5;background:rgba(20,20,22,.82);color:#fff;font-size:12px;line-height:1;padding:7px 10px;border-radius:14px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* ═══════════ Каталог компаний — hero-поиск + большие карточки (редизайн) ═══════════ */
.comp-body { display: flex; flex-direction: column; }
.comp-hero { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.comp-search { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
  transition: border-color .12s, box-shadow .12s; }
.comp-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.comp-search svg { flex: 0 0 auto; color: var(--muted); }
.comp-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 15px; }
.comp-search input::placeholder { color: var(--muted); }
.comp-seg { flex: 0 0 auto; }
.comp-filters { margin-bottom: 10px; }
.comp-count { color: var(--muted); font-size: 12.5px; margin: 2px 2px 10px; }

.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; padding-bottom: 12px; }
/* Заголовки секций «Мои компании» / «Где я сотрудник» (scope=mine) */
.comp-sec-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 2px 8px; }
.comp-sec-title:first-child { margin-top: 4px; }
.comp-sec-n { font-weight: 600; color: var(--text-dim, #9aa4b2); background: var(--panel-2); border-radius: 8px; padding: 1px 8px; font-size: 12px; }
.comp-card { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: transform .12s ease, border-color .12s, box-shadow .12s; }
.comp-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 10px 26px rgba(0,0,0,.38); }
.cc-cover { height: 78px; background: var(--grad); }
.cc-logo { position: absolute; top: 52px; left: 16px; width: 50px; height: 50px; border-radius: 13px;
  overflow: hidden; border: 2px solid var(--panel); background: var(--panel-2); }
.cc-logo > * { width: 100% !important; height: 100% !important; border-radius: 0 !important; font-size: 18px !important; }
.cc-body { padding: 30px 16px 16px; }
.cc-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; font-size: 16px; color: var(--text); line-height: 1.25; }
.cc-verified { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }
.cc-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.cc-chip.hiring { background: rgba(34,197,94,.16); color: var(--ok); }
.cc-chip.draft { background: var(--panel-2); color: var(--muted); }
.cc-tag { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-meta { margin-top: 8px; color: var(--text); opacity: .82; font-size: 12.5px; }
.cc-foot { margin-top: 11px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.cc-star { color: var(--urg-today); font-weight: 700; }
.cc-dim { color: var(--muted); }
.cc-sep { color: var(--line); }
@media (max-width: 560px) { .comp-grid { grid-template-columns: 1fr; } .comp-search { flex-basis: 100%; } }

/* ═══════════ Страница «Мои компании» (полноэкранная, каркас .tasks-workspace) ═══════════
   Владелец: «Давай полноценную» + «общий поиск и фильтр убрать, там же мои компании а не
   все». Поэтому здесь НЕТ hero-поиска и фильтров каталога — только две секции с карточками.
   Токены только из общей палитры → светлая и тёмная темы работают без отдельных правил. */
/* .primary — width:100%+margin-top (для форм). В шапке страницы это распирает кнопку,
   а иконка уезжает на строку выше → приводим к компактной инлайн-кнопке. */
.myc-add { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; margin-top: 0; flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
.myc-add .ic { width: 16px; height: 16px; flex: 0 0 auto; }
#myCompaniesPage .tw-title { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
#myCompaniesPage .tw-title > span { overflow: hidden; text-overflow: ellipsis; }
#myCompaniesPage .tw-title .ic { width: 19px; height: 19px; flex: 0 0 auto; color: var(--muted); }
.myc-wrap { background: var(--bg); }
.myc-inner { max-width: 1160px; margin: 0 auto; padding: 22px 24px 48px; }

.myc-sec + .myc-sec { margin-top: 30px; }
.myc-sec-title { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px;
  font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.myc-sec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  padding: 0 7px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600; }

/* min(304px,100%) + min-width:0 — иначе на узком экране минимальный размер трека
   (min-content карточки) распирает сетку шире контейнера и карточки уезжают за экран. */
.myc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(304px, 100%), 1fr)); gap: 16px; }
.myc-grid > .comp-card { min-width: 0; }

/* Карточка на странице: мягче, чем в каталоге (там жёсткая тень под тёмную тему). */
.myc-grid .comp-card { transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.myc-grid .comp-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.myc-grid .comp-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Роль: владелец — акцентная плашка, сотрудник — нейтральная. */
.cc-role { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; letter-spacing: .01em; }
.cc-role.own { background: var(--accent-tint, var(--glow)); color: var(--primary-hi, var(--primary)); border: 1px solid var(--line); }
.cc-role.emp { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }

/* Быстрые действия прямо на карточке — «Настройки» / «Сотрудники». */
.cc-acts { display: flex; align-items: center; gap: 8px; margin: 13px -16px -16px; padding: 10px 14px;
  border-top: 1px solid var(--line); background: var(--panel-2); }
.cc-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 12.5px; font-weight: 550;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.cc-act svg, .cc-act .ic { width: 15px; height: 15px; }
.cc-act:hover { background: var(--panel); border-color: var(--line); color: var(--text); }
.cc-act:active { background: var(--active); }
.cc-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Пустое состояние — с понятным действием. */
.myc-blank { max-width: 420px; margin: 0 auto; padding: 84px 24px; text-align: center; }
.myc-blank-ic { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.myc-blank-ic svg, .myc-blank-ic .ic { width: 27px; height: 27px; }
.myc-blank-t { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.myc-blank-s { margin-top: 7px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.myc-blank-btn { width: auto; margin: 22px auto 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 9px 16px; font-size: 13px; }
.myc-blank-btn .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.myc-retry { margin-top: 14px; }
.myc-retry button { width: auto; margin: 0 auto; display: inline-flex; }

@media (max-width: 860px) { .myc-inner { padding: 18px 16px 40px; } .myc-grid { gap: 13px; } }
@media (max-width: 560px) {
  .myc-grid { grid-template-columns: minmax(0, 1fr); }  /* НЕ 1fr: min-content распирает сетку */
  .myc-add { padding: 8px 10px; }        /* на узком — только «＋», подпись прячем */
  .myc-add span { display: none; }
  #myCompaniesPage .tw-count { display: none; }
  #myCompaniesPage .tw-head { gap: 8px; padding: 11px 12px; }
}

/* Рельс на узких сжимается до 62px (см. медиа выше), а полноэкранные страницы остаются
   отодвинутыми на 96px → между рельсом и страницей зияла полоса фона. Общая правка для
   всех страниц (Задачи/Проекты/События/Мои компании). */
@media (max-width: 720px) { .tasks-workspace { inset: 0 0 0 62px; } }

/* ═══════════ Селектор активной компании в хедере (0028, справа от «Работа») ═══════════ */
.company-selector { display: inline-flex; align-items: center; }
.company-selector.hidden { display: none; }
.company-selector-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.company-selector-btn:hover { border-color: var(--primary); }
.company-selector-btn.active { border-color: var(--primary); background: rgba(102,126,234,.14); }
.company-selector-btn svg { width: 15px; height: 15px; opacity: .8; }
.company-selector-btn .csb-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-selector-btn .csb-caret { color: var(--muted); font-size: 11px; }

.company-pop {
  position: fixed; z-index: 1000; min-width: 232px; max-width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.company-pop-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; cursor: pointer;
}
.company-pop-item:hover { background: var(--panel-2); }
.company-pop-item.sel { background: rgba(102,126,234,.16); }
.company-pop-item svg { width: 16px; height: 16px; opacity: .8; flex: 0 0 auto; }
.company-pop-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.company-pop-loading { padding: 8px 10px; }

/* ── 🔗 превью ссылок в текстовых сообщениях (metadata.link_preview) ──
   карточка в стиле .reply-quote; кликабельные ссылки в тексте = .msg-link */
.link-preview {
  display: block; margin-top: 6px; padding: 6px 10px;
  border-left: 3px solid var(--primary-2); border-radius: 8px;
  background: rgba(255,255,255,.06); max-width: 320px;
  text-decoration: none; color: inherit; overflow: hidden;
}
.lp-site { display: block; font-size: 12px; font-weight: 600; color: var(--primary-2); }
.lp-title {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-desc {
  display: block; font-size: 12px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-img { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 6px; margin-top: 6px; }
.msg-link { color: var(--primary-2); text-decoration: underline; word-break: break-all; }


/* ═══════════ Индикатор «идёт групповой созвон» ═══════════ */
@keyframes ccLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(93,202,165,.55); } 70% { box-shadow: 0 0 0 6px rgba(93,202,165,0); } }
.conv-call-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 2px 8px 2px 6px; border-radius: 6px;
  background: var(--urg-done-soft); color: var(--ok, var(--urg-done));
  font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.conv-call-pill .ccp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, var(--urg-done)); animation: ccLivePulse 1.8s infinite; }
.thread-call-banner {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0;
  background: rgba(93,202,165,.12); border-bottom: 1px solid rgba(93,202,165,.28);
  color: var(--text); font-size: 13px;
}
.thread-call-banner.hidden { display: none; }
.tip-scroll > .thread-call-banner { border-radius: 10px; border: 1px solid rgba(93,202,165,.28); margin-bottom: 10px; }
.thread-call-banner .tcb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok, var(--urg-done)); flex: 0 0 auto; animation: ccLivePulse 1.8s infinite; }
.thread-call-banner .tcb-text { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-call-banner .tcb-join { flex: 0 0 auto; border: 0; cursor: pointer; color: #fff; background: var(--grad); border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; }
.thread-call-banner .tcb-join:hover { filter: brightness(1.06); }

/* ======================================================================= *
 *  ЦЕНТР УВЕДОМЛЕНИЙ («колокольчик»)
 * ======================================================================= */
.notif-bell { position: relative; color: var(--muted); }
.notif-bell:hover, .notif-bell.active { color: var(--text); background: var(--panel-2); }
.notif-bell-ico { display: inline-flex; }
.notif-bell-ico .ic { width: 18px; height: 18px; }
.notif-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--panel);
}
.notif-badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; border-radius: 50%; top: -1px; right: -1px; background: var(--primary); }

.notif-panel {
  position: fixed; z-index: 95; max-height: min(74vh, 660px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.28); overflow: hidden;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px; }
.notif-tabs { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.notif-tabs::-webkit-scrollbar { display: none; }
.notif-tab {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .12s, color .12s;
}
.notif-tab:hover { color: var(--text); }
.notif-tab.active { background: color-mix(in srgb, var(--primary) 20%, var(--panel-2)); color: var(--text); }
.notif-head-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.notif-hbtn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 32px; height: 32px; border-radius: 9px; }
.notif-hbtn:hover { background: var(--panel-2); color: var(--text); }
.notif-hbtn .ic { width: 18px; height: 18px; }

.notif-list { overflow-y: auto; flex: 1 1 auto; padding: 4px 8px 8px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 46px 16px; color: var(--muted); font-size: 13px; }
.notif-empty-ic { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: var(--panel-2); color: var(--muted); }
.notif-empty-ic .ic { width: 20px; height: 20px; }

/* Переход «непрочитано → прочитано» — не рывком: фон тает, левый акцент схлопывается,
   плашка иконки и заголовок приглушаются одной волной (160ms, длительность продублирована
   в app.js как NOTIF_READ_ANIM_MS — по ней ждём перед уходом на сущность). Работает только
   потому, что клиент красит строку НА МЕСТЕ (patchNotifReadRow), а не пересобирает ленту. */
.notif-item {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px 11px 14px; border-radius: 12px; cursor: pointer;
  transition: background 160ms var(--ease);
}
.notif-item:hover { background: var(--panel-2); }
.notif-item.unread { background: color-mix(in srgb, var(--nc) 8%, transparent); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--nc) 13%, transparent); }
.notif-accent {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 0;
  border-radius: 3px; background: var(--nc); opacity: 0;
  transition: height 160ms var(--ease), opacity 160ms var(--ease);
}
.notif-item.unread .notif-accent { height: 24px; opacity: 1; }

.notif-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--nc) 16%, transparent); color: var(--nc);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
/* прочитанное живёт тише: та же палитра категории, но приглушённая — строка не исчезает,
   а «отходит на второй план» (одинаково читается в светлой и тёмной теме) */
.notif-item:not(.unread) .notif-ico {
  background: color-mix(in srgb, var(--nc) 9%, transparent);
  color: color-mix(in srgb, var(--nc) 60%, var(--muted));
}
.notif-item:not(.unread) .notif-reason { color: color-mix(in srgb, var(--nc) 62%, var(--muted)); }
.notif-ico .ic { width: 19px; height: 19px; }

.notif-main { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.notif-row1 { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 2px; }
.notif-reason { font-weight: 600; color: var(--nc); letter-spacing: .1px; }
.notif-time { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.notif-count { flex: 0 0 auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--nc) 24%, transparent); color: var(--nc); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.notif-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 160ms var(--ease); }
.notif-item.unread .notif-title { font-weight: 700; }
/* вес шрифта анимировать нечем — гасим ЦВЕТОМ, он и несёт переход глазу */
.notif-item:not(.unread) .notif-title { color: color-mix(in srgb, var(--text) 74%, var(--muted)); }
.notif-reason { transition: color 160ms var(--ease); }
.notif-body { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* тень из токена — иначе в светлой теме поповер лежал под чёрной кляксой .45 */
.notif-acts { position: absolute; right: 8px; top: 8px; display: none; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-2); }
.notif-item:hover .notif-acts { display: flex; }
.notif-act { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 28px; height: 28px; border-radius: 8px; }
.notif-act:hover { background: var(--panel-2); color: var(--text); }
.notif-act .ic { width: 16px; height: 16px; }
.notif-act.on, .notif-act.on:hover { color: var(--primary); }

.notif-foot { border-top: 1px solid var(--line); padding: 8px; text-align: center; }
.notif-clear { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 500; padding: 7px 14px; border-radius: 9px; }
.notif-clear:hover { background: var(--panel-2); color: var(--text); }

.notif-snooze-menu { position: fixed; z-index: 97; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: 0 16px 36px rgba(0,0,0,.55); display: flex; flex-direction: column; min-width: 190px; }
.notif-snooze-menu button { border: 0; background: transparent; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.notif-snooze-menu button:hover { background: var(--panel-2); }

.notif-settings { border-top: 1px solid var(--line); padding: 12px 14px; max-height: 46vh; overflow-y: auto; }
.notif-set-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 8px 0 6px; }
.notif-set-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--text); }
.notif-set-row span:first-child { flex: 1 1 auto; }
.notif-set-row input[type="time"] { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 4px 7px; }
.notif-set-foot { margin-top: 14px; }
/* Открытые настройки скрывают ленту/футер и занимают панель целиком (скроллятся) —
   иначе панель настроек наезжала на список уведомлений и была непригодна. */
.notif-panel.settings-open .notif-list,
.notif-panel.settings-open .notif-foot { display: none; }
.notif-panel.settings-open .notif-settings { flex: 1 1 auto; max-height: none; }
.notif-set-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); padding: 2px 0 10px; }
.notif-set-note.warn { color: var(--danger); }
.notif-enable-row { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.notif-enable-row .notif-enable-status { flex: 1 1 auto; font-size: 12.5px; line-height: 1.4; color: var(--text); }
#notifEnableBtn { display: flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 560px) {
  .notif-panel { left: 8px !important; right: 8px; width: auto !important; max-height: 80vh; }
}

/* ───────────────── Чек-лист-сообщения (Apple-grade: Reminders/Things) ─────────────────
   Карточка рисуется в .bubble.has-media (media:true) — без фона пузыря, поэтому одинакова
   у отправителя и получателя. Круглые чекбоксы, кольцо прогресса, аватар «кто отметил». */
.ck-card {
  min-width: 250px; max-width: 366px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 6px 8px; color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 10px 28px -16px rgba(0,0,0,.40);
  -webkit-user-select: none; user-select: none;
}
html[data-theme="light"] .ck-card { box-shadow: 0 1px 2px rgba(20,30,60,.05), 0 10px 26px -16px rgba(30,45,90,.18); }

/* header: заголовок + подзаголовок + кольцо прогресса */
.ck-head { display: flex; align-items: center; gap: 12px; padding: 2px 12px 12px 14px; }
.ck-head-txt { flex: 1 1 auto; min-width: 0; }
.ck-title { display: block; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-sub { margin-top: 3px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ck-sub .ck-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.ck-sub .ck-done-word { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.ck-sub .ck-done-word svg { width: 13px; height: 13px; }
.ck-titlebtn { flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.ck-titlebtn svg { width: 15px; height: 15px; }
.ck-card:hover .ck-titlebtn { opacity: .72; }
.ck-titlebtn:hover { opacity: 1; background: var(--panel-2); color: var(--text); }
/* кольцо прогресса (rotate только у самого кольца — не у чек-иконки внутри) */
.ck-ring { flex: 0 0 auto; width: 40px; height: 40px; position: relative; }
.ck-ring > svg { transform: rotate(-90deg); display: block; }
.ck-ring .ck-ring-track { fill: none; stroke: var(--line); stroke-width: 4.2; }
.ck-ring .ck-ring-prog { fill: none; stroke: url(#ckgrad); stroke-width: 4.2; stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.5,.05,.2,1); }
.ck-ring.complete .ck-ring-prog { stroke: var(--ok); }
.ck-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ck-ring.complete .ck-ring-num { color: var(--ok); }
.ck-ring.complete .ck-ring-num svg { width: 16px; height: 16px; }

/* список пунктов */
.ck-items { display: flex; flex-direction: column; }
.ck-empty { padding: 4px 14px 8px; font-size: 13px; color: var(--muted); }
.ck-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px; border-radius: 12px; transition: background .13s; }
.ck-item + .ck-item::before { content: ""; position: absolute; left: 48px; right: 12px; top: 0; height: 1px; background: var(--line); opacity: .7; }
.ck-item:hover { background: var(--panel-2); }
.ck-item:hover::before, .ck-item:hover + .ck-item::before { opacity: 0; }
/* круглый чекбокс */
.ck-box { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; position: relative; -webkit-tap-highlight-color: transparent; }
.ck-box .ck-box-ring { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line); background: transparent; transition: border-color .18s, background .18s; }
.ck-box:hover .ck-box-ring { border-color: var(--accent); }
.ck-box .ck-box-tick { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .16s, transform .2s cubic-bezier(.34,1.56,.64,1); }
.ck-box .ck-box-tick svg { width: 13px; height: 13px; }
.ck-item.done .ck-box .ck-box-ring { background: var(--ok); border-color: var(--ok); }
.ck-item.done .ck-box .ck-box-tick { opacity: 1; transform: scale(1); }
.ck-box.just-checked .ck-box-ring { animation: ckpop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes ckpop { 0% { transform: scale(.6); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* текст пункта */
.ck-text { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.35; letter-spacing: -.006em; color: var(--text); word-break: break-word; transition: color .18s; }
.ck-item.done .ck-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.4px; }
/* аватар «кто отметил» */
.ck-who { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: #fff; box-shadow: 0 0 0 2px var(--panel); cursor: default; }
.ck-who.has-img { background-size: cover; background-position: center; font-size: 0; }
.ck-item:hover .ck-who { box-shadow: 0 0 0 2px var(--panel-2); }
/* контролы автора (правка/удаление пункта) — оверлеем справа на hover: НЕ занимают
   место в потоке (иначе скрытые кнопки съедают ширину текста и он переносится). */
.ck-actions { position: absolute; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; padding-left: 18px; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .14s, transform .14s; background: linear-gradient(90deg, transparent, var(--panel-2) 34%); }
.ck-item:hover .ck-actions { opacity: 1; transform: none; pointer-events: auto; }
.ck-ic { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; color: var(--muted); display: grid; place-items: center; transition: background .13s, color .13s; }
.ck-ic svg { width: 15px; height: 15px; }
.ck-ic:hover { background: var(--panel); color: var(--text); }
.ck-ic.ck-del:hover { color: #ef4444; }
html[data-theme="light"] .ck-ic:hover { background: #fff; }
/* инлайн-правка (span → input) */
.ck-inline-edit { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; color: var(--text); font-size: 15px; padding: 4px 8px; outline: none; }
/* строка добавления пункта (автор) */
.ck-add { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 6px 14px; margin-top: 3px; }
.ck-add::before { content: ""; position: absolute; left: 14px; right: 12px; top: 0; height: 1px; background: var(--line); opacity: .7; }
.ck-add-ring { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.6px dashed var(--muted); display: grid; place-items: center; color: var(--muted); }
.ck-add-ring svg { width: 13px; height: 13px; }
.ck-add-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; line-height: 1.35; color: var(--text); padding: 5px 0; }
.ck-add-input::placeholder { color: var(--muted); opacity: .9; }
.ck-add-btn { flex: 0 0 auto; height: 30px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--grad); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px -3px var(--glow); opacity: .55; transition: opacity .15s, transform .1s; }
.ck-add-btn svg { width: 14px; height: 14px; }
.ck-add:focus-within .ck-add-btn { opacity: 1; }
.ck-add-btn:active { transform: scale(.96); }

/* Диалог создания чек-листа (Apple-sheet) */
.ck-composer-ov { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(120% 90% at 50% -10%, rgba(102,126,234,.16), transparent 60%), rgba(6,8,12,.55); backdrop-filter: blur(2px); }
html[data-theme="light"] .ck-composer-ov { background: radial-gradient(120% 90% at 50% -10%, rgba(102,126,234,.14), transparent 60%), rgba(24,32,56,.38); }
.ck-composer { width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; color: var(--text); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.25); }
html[data-theme="light"] .ck-composer { box-shadow: 0 26px 60px -22px rgba(30,45,90,.4), 0 3px 12px rgba(30,45,90,.14); }
.ck-cmp-head { padding: 20px 22px 14px; }
.ck-cmp-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.ck-cmp-kicker svg { width: 14px; height: 14px; }
.ck-cmp-title-in { width: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text); padding: 0; }
.ck-cmp-title-in::placeholder { color: var(--muted); opacity: .7; }
.ck-cmp-body { padding: 4px 14px 6px; }
.ck-cmp-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; transition: background .12s; }
.ck-cmp-row:hover { background: var(--panel-2); }
.ck-cmp-pre { flex: 0 0 auto; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line); }
.ck-cmp-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15.5px; line-height: 1.35; color: var(--text); padding: 6px 0; }
.ck-cmp-input::placeholder { color: var(--muted); opacity: .75; }
.ck-cmp-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; border-radius: 7px; color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .13s, background .13s, color .13s; }
.ck-cmp-x svg { width: 15px; height: 15px; }
.ck-cmp-row:hover .ck-cmp-x { opacity: .7; }
.ck-cmp-x:hover { opacity: 1; color: #ef4444; background: var(--panel); }
html[data-theme="light"] .ck-cmp-x:hover { background: #fff; }
.ck-cmp-ghost { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; margin: 2px 0 4px; border: 0; border-radius: 12px; background: transparent; color: var(--accent); cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-align: left; transition: background .12s; }
.ck-cmp-ghost:hover { background: var(--panel-2); }
.ck-cmp-ghost .ck-g-ring { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.6px dashed var(--accent); display: grid; place-items: center; }
.ck-cmp-ghost .ck-g-ring svg { width: 13px; height: 13px; }
.ck-cmp-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.ck-cmp-count { margin-right: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ck-btn { height: 38px; padding: 0 18px; border: 0; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: -.005em; transition: transform .1s, background .13s, filter .13s; }
.ck-btn:active { transform: scale(.97); }
.ck-btn.ghost { background: var(--panel-2); color: var(--text); }
.ck-btn.ghost:hover { background: var(--line); }
.ck-btn.primary { display: inline-flex; align-items: center; gap: 6px; background: var(--grad); color: #fff; box-shadow: 0 4px 14px -4px var(--glow); }
.ck-btn.primary:hover { filter: brightness(1.05); }
.ck-btn.primary svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .ck-ring .ck-ring-prog, .ck-box .ck-box-tick, .ck-box .ck-box-ring { transition: none; }
  .ck-box.just-checked .ck-box-ring { animation: none; }
}

/* ══════ Новая задача (Apple-grade создание): строка + чипы + Подробнее ══════ */
.tc-box { max-width: 560px; }
.tc-head-actions { display: flex; align-items: center; gap: 6px; }
.tc-head-actions .ghost.small { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tc-head-actions .ic { width: 17px; height: 17px; }
.tc-body { padding: 14px 16px 4px; overflow-y: auto; }
.tc-title { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 16px; padding: 13px 14px; outline: none; }
.tc-title:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.tc-title::placeholder { color: var(--muted); }
.tc-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tc-tok { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 8px; border-radius: 8px; background: rgba(102,126,234,.16); color: var(--primary-2); border: 1px solid rgba(102,126,234,.34); cursor: pointer; }
.tc-tok .ic { width: 13px; height: 13px; }
.tc-tok-x { display: inline-flex; opacity: .65; }
.tc-tok-x .ic { width: 11px; height: 11px; }
.tc-hint { font-size: 12px; color: var(--muted); margin: 7px 2px 0; min-height: 15px; }
.tc-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 2px; }
.tc-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 7px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); cursor: pointer; transition: border-color .12s, color .12s; }
.tc-chip:hover { border-color: var(--primary); color: var(--text); }
.tc-chip.on { background: rgba(102,126,234,.16); border-color: rgba(102,126,234,.45); color: var(--text); }
.tc-chip .ic { width: 15px; height: 15px; }
.tc-chip-x { display: inline-flex; opacity: .6; margin-left: 1px; }
.tc-chip-x .ic { width: 12px; height: 12px; }
.tc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.tc-more-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 0; }
.tc-more-toggle .ic { width: 15px; height: 15px; transition: transform .15s; }
.tc-more-toggle.open .ic { transform: rotate(180deg); }
.tc-more { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.tc-more.open { max-height: 900px; overflow: visible; }
.tc-lbl { display: block; font-size: 12px; color: var(--muted); margin: 11px 2px 5px; }
.tc-ta, .tc-mini { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 14px; padding: 10px 12px; outline: none; font-family: inherit; }
.tc-ta:focus, .tc-mini:focus { border-color: var(--primary); }
.tc-pickbtn { text-align: left; cursor: pointer; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-two { display: flex; gap: 10px; }
.tc-two > div { flex: 1; min-width: 0; }
.tc-checklist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.tc-ci { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.tc-ci > span:first-child { display: inline-flex; }
.tc-ci > span:first-child .ic { width: 14px; height: 14px; color: var(--ok); }
.tc-ci-t { flex: 1; min-width: 0; }
.tc-ci-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }
.tc-ci-x .ic { width: 13px; height: 13px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-another { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tc-foot-btns { display: flex; gap: 8px; }
/* Плавающие пикеры чипов (стиль td-userpick) */
/* 🔴 z-index ВЫШЕ плавающего бара мультивыбора (.board-bulk-bar = 9400) и mention/ref-меню
   (9400): popover «Ещё» массовых действий якорится к кнопке ВНУТРИ этого бара, поэтому при
   90 нижние строки меню («Переместить в столбец…») уходили ПОД бар и не кликались. */
.tc-pop { position: fixed; z-index: 9600; min-width: 200px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.tc-pop .tc-lbl { margin-top: 2px; }
.tc-pop-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tc-pop-row { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; color: var(--text); text-align: left; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tc-pop-row:hover { background: var(--panel); }
.tc-pop-row .ic { width: 15px; height: 15px; flex: none; }
.tc-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pop-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tc-pop-presets button { font-size: 12px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.tc-pop-presets button:hover { border-color: var(--primary); }
.tc-pop-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tc-pop-foot .tc-mini { flex: 1; }
.tc-pop .primary.small, .tc-pop .ghost.small { font-size: 12px; padding: 6px 10px; border-radius: 8px; }
.tc-seg { display: flex; gap: 6px; }
.tc-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.tc-seg button .ic { width: 14px; height: 14px; }
.tc-seg button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text); }
.tc-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 11px 2px 2px; cursor: pointer; }
.tc-chk input { width: 15px; height: 15px; accent-color: var(--primary); flex: none; }
.tc-chk .ic { width: 14px; height: 14px; color: var(--muted); }
.tc-pop-row.on { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.tip-rem-flag { display: inline-flex; margin-left: 6px; color: var(--muted); }
.tip-rem-flag .ic { width: 13px; height: 13px; }
.tc-resp { margin-left: auto; opacity: .35; display: inline-flex; padding: 2px; }
.tc-resp.on { opacity: 1; color: var(--urg-today); }
.tc-resp .ic { width: 14px; height: 14px; }

/* Карточка задачи: метки / повтор / напоминания (Tier 3) */
.tip-labels-v { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.tip-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--lc, var(--muted)) 17%, transparent); border: 1px solid color-mix(in srgb, var(--lc, var(--muted)) 40%, transparent); color: color-mix(in srgb, var(--lc, var(--muted)) 72%, #fff); }
.tip-label .td-prio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--muted)); flex: none; }
.tip-label .tip-x { display: inline-flex; padding: 0; opacity: .75; }
.tip-label .tip-x:hover { opacity: 1; }
.tip-label .tip-x .ic { width: 11px; height: 11px; }
.tip-lbl-add .ic { width: 14px; height: 14px; }

/* ── Метки: цветные чипы на карточках + пикер с палитрой/заготовками (Trello/YouGile) ── */
.tasks-list .task-chip.lbl { background: color-mix(in srgb, var(--lc, var(--muted)) 16%, transparent); color: color-mix(in srgb, var(--lc, var(--muted)) 74%, #fff); font-weight: 600; }
.tasks-list .task-chip.lbl .tk-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: var(--lc, var(--muted)); }
/* Имя метки в строке пикера — окрашено в цвет метки */
.tc-pop-row.lbl-row .tc-pop-name { color: color-mix(in srgb, var(--lc, var(--text)) 80%, #fff); font-weight: 600; }
/* Заготовленные метки — чипы одним тапом создают/выбирают метку */
.lbl-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 2px 4px; }
.lbl-preset { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; background: color-mix(in srgb, var(--lc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 38%, transparent); color: color-mix(in srgb, var(--lc) 74%, #fff); }
.lbl-preset:hover { background: color-mix(in srgb, var(--lc) 26%, transparent); border-color: color-mix(in srgb, var(--lc) 55%, transparent); }
.lbl-preset-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* Палитра цветов для своей метки */
.lbl-sw-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 2px 6px; }
.lbl-sw { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); transition: transform .1s; }
.lbl-sw:hover { transform: scale(1.14); border-color: transparent; }
.lbl-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.lbl-make { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
/* Создание своей метки: поле на всю ширину, кнопка «Добавить» отдельной строкой снизу */
.lbl-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lbl-foot .lbl-new { width: 100%; box-sizing: border-box; }
.lbl-foot .lbl-add { width: 100%; }
.tc-pop { max-height: 82vh; overflow-y: auto; }
.tip-rems { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tip-rem-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); }
.tip-rem-row > span { display: inline-flex; align-items: center; min-width: 0; }
.tip-rem-row .ic { width: 14px; height: 14px; margin-right: 6px; flex: none; }

/* Список задач: инлайн-добавление + hover-действия (Apple Reminders-стиль) */
.task-quickadd { display: flex; align-items: center; gap: 8px; padding: 8px 11px; margin: 2px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.task-quickadd .tqa-plus { display: inline-flex; color: var(--muted); flex: none; }
.task-quickadd .tqa-plus .ic { width: 15px; height: 15px; }
.tqa-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 13.5px; padding: 0; }
.tqa-input::placeholder { color: var(--muted); }
.tqa-tpl { flex: none; background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.tqa-tpl:hover { color: var(--primary-2); background: var(--panel); }
.tqa-tpl .ic { width: 16px; height: 16px; }
.task-quickadd:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
/* Быстрые действия — плавают в правом-верхнем углу карточки (out of flow), чтобы НЕ отъедать
   ширину у заголовка. Появляются по наведению как мини-панель поверх хвоста заголовка. */
.task-hover-acts {
  position: absolute; top: 5px; right: 6px; z-index: 6;
  display: inline-flex; align-items: center; gap: 1px;
  padding: 2px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.task-row:hover .task-hover-acts { opacity: 1; pointer-events: auto; }
.tqact { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.tqact:hover { background: var(--panel); color: var(--text); }
.tqact.tqact-del:hover { color: var(--danger); }
/* Кнопка «пауза» когда МОЙ таймер идёт — синим (в тон бейджу «в работе»), чтобы было видно активное состояние. */
.tqact.tqact-running { color: var(--info); }
.tqact.tqact-running:hover { background: var(--info-soft); color: var(--info); }
html[data-theme="light"] .tqact.tqact-running { color: #1d4ed8; }
.tqact .ic { width: 15px; height: 15px; }
.task-chip.due.tqclick { cursor: pointer; }
.task-chip.due.tqclick:hover { border-color: var(--primary); color: var(--text); }
.task-chip.lbl .tk-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.task-chip.rec .ic { width: 13px; height: 13px; }
@media (hover: none) { .task-hover-acts { opacity: 1; pointer-events: auto; } }

/* Доска: вид «По проектам» (колонка = контейнер) */
.tw-board-grp .tw-col-grp .tw-col-head { display: flex; align-items: center; gap: 7px; }
.tw-board-grp .tw-grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-board-grp .tw-col-head > .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.tw-board-grp .tw-col-body { min-height: 20px; }
/* Группировка типов в выпадающем фильтре проектов/чатов/групп */
.tw-select optgroup { color: var(--muted); font-size: 11px; font-weight: 600; }
.tw-select option { color: var(--text); font-weight: 400; }

/* Доска: кастомные колонки (0034) — правка/добавление */
.tw-board-custom .tw-col-custom .tw-col-head { display: flex; align-items: center; gap: 6px; }
.tw-col-custom .tw-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-col-acts { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .12s; margin-left: auto; }
.tw-col-custom:hover .tw-col-acts { opacity: 1; }
.tw-col-edit { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }
.tw-col-edit:hover { color: var(--text); }
.tw-col-edit .ic, .tw-col-custom .tw-col-add .ic { width: 14px; height: 14px; }
.tw-col-new { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; flex: none; background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 12px; padding: 10px 16px; cursor: pointer; font-size: 13px; white-space: nowrap; height: fit-content; }
.tw-col-new:hover { border-color: var(--primary); color: var(--text); }
.tw-col-new .ic { width: 15px; height: 15px; }
.twc-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.twc-sw { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.twc-sw.on { border-color: var(--text); }
/* Свой цвет — радужная плитка поверх нативного input[type=color] (v1 колонки + v2). */
.twc-custom, .tw-swatch-custom { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(from 0deg, var(--urg-overdue), var(--urg-today), var(--urg-done), var(--info), #a78bfa, var(--urg-overdue)); }
.twc-custom input[type=color], .tw-swatch-custom input[type=color] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; }


/* ══════════════════════════════════════════════════════════════════════════════
   ТЕМА ОФОРМЛЕНИЯ — светлая версия (тумблер; тёмная остаётся по умолчанию).
   Механика: атрибут html[data-theme="light"] ставит бутстрап в index.html <head>
   (ДО отрисовки, без вспышки) и app.js (setTheme, localStorage cc_theme). Здесь —
   переопределение токенов + точечные фиксы хардкод-цветов, которые ломаются на светлом.
   Мультиагентный аудит CSS+JS: медиа/звонки/лайтбокс и «мой» пузырь (var(--grad))
   остаются ТЁМНЫМИ в обеих темах — их не трогаем.
   ────────────────────────────────────────────────────────────────────────────── */

/* Контролы тумблера (видны в ОБЕИХ темах — используют токены). */
.theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; }
.theme-toggle-btn svg.ic { width: 18px; height: 18px; }
.theme-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.theme-preset {
  flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; text-align: center; padding: 12px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.theme-preset:hover { border-color: var(--primary-2); }
.theme-preset.active { border-color: var(--primary); background: rgba(102,126,234,.16); color: var(--primary-2); }
.theme-swatch { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--line); }
.theme-swatch-dark { background: linear-gradient(135deg, #171a21 50%, #2b3553 50%); border-color: #2a2f3a; }
.theme-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #d9e0f6 50%); border-color: #c5cddd; }
.theme-swatch-system { background: linear-gradient(135deg, #171a21 50%, #ffffff 50%); border-color: #6b7280; }

/* ── СВЕТЛАЯ ТЕМА: переопределение токенов ────────────────────────────────────
   html[data-theme="light"] (0,1,1) перебивает :root (0,1,0). --border/--input-bg
   в :root = var(--line)/var(--panel-2) → сами подхватывают светлые значения. */
html[data-theme="light"] {
  /* ── ПОВЕРХНОСТИ: канва → белая карточка → поднятый белый слой. Возвышение в светлой =
     белизна + тень; разделение — КОНТРАСТОМ канвы и хэйрлайнами (ребаланс 2026-07-14:
     владелец — «мало контрастов, сложно разглядывать» → канва углублена, линии/текст/
     состояния усилены; белый остаётся только у карточек — слои читаются). ── */
  /* РЕДИЗАЙН «A · Ясный минимал» (владелец выбрал из 2 отрисованных направлений, 2026-07-15):
     светлая, чистая, воздушная тема; индиго-акцент #4b57d6; поверхности — белые панели на светлой
     канве, тонкие хэйрлайны, тёмный текст держит контраст. Прежний ребаланс 2026-07-14 заменён.
     (2026-07-15 вечер: откат «D · Командный» по просьбе владельца — «стало хуже».) */
  --bg: #eef1f7;          /* канва: светлая, белые панели/карточки на ней читаются */
  --panel: #ffffff;       /* ур.1: карточки/панели/топбар/модалки/пузырь собеседника */
  --panel-2: #f4f6fb;     /* инсеты ВНУТРИ белого: табы, чипы, поиск, подложки */
  --panel-3: #ffffff;     /* ур.2 ПОДНЯТОЕ (меню/тултипы/поповеры) = белый + --shadow-2 */
  --line: #e7ebf3;        /* тонкий хэйрлайн */
  --line-strong: #d3dbe8; /* границы контролов / hover-границы */
  --text: #141926;        /* почти чёрно-синий (16.6:1 на белом) */
  --muted: #5a6577;       /* вторичный (6.0:1) */
  --text-dim: #8a93a3;    /* третичный: плейсхолдеры/мета/счётчики */
  --primary: #4b57d6;     /* индиго-акцент A (5.9:1 на белом) */
  --primary-2: #4338ca;   /* глубокий индиго: имена/цитаты/текстовые акценты */
  --primary-hi: #3f4ac0;  /* hover primary: в светлой — темнее, не светлее */
  --accent: var(--primary);
  --input-bg: #f4f6fb;    /* поле УТОПЛЕНО в белую карточку; :focus «всплывает» до #fff (§3) */
  --glow: rgba(75,87,214,.22);
  /* состояния: hover нейтральный, индиго-тинт ТОЛЬКО у выбранного (экономия бренда) */
  --hover: rgba(20,25,40,.05);
  --active: rgba(20,25,40,.09);
  --sel: rgba(75,87,214,.10);
  /* тени: двухслойные ambient+key, мягкие холодные (A — «воздух», не давит) */
  --shadow-1: 0 1px 2px rgba(20,25,40,.05), 0 2px 6px rgba(20,25,40,.05);
  --shadow-2: 0 4px 12px rgba(20,25,40,.08), 0 16px 34px -8px rgba(20,25,40,.16);
  --shadow-3: 0 10px 24px rgba(20,25,40,.12), 0 36px 72px -12px rgba(20,25,40,.24);
  --edge: inset 0 0 0 0 transparent;
  --scrim: rgba(13,18,30,.50);
  /* семантика: текст ≥AA на белом и на своей -soft подложке */
  --danger: #c53a56;      --danger-soft: rgba(197,58,86,.12);
  --ok: #1a7a4a;          --ok-soft: rgba(26,122,74,.12);
  --warning: #9a6a00;     --warning-soft: rgba(154,106,0,.13);
  --info: #2f5bd0;        --info-soft: rgba(47,91,208,.12);
  --urg-overdue: #c53a56; --urg-overdue-soft: rgba(197,58,86,.12);
  --urg-today: #9a6a00;   --urg-today-soft: rgba(154,106,0,.13);
  --urg-done: #1a7a4a;    --urg-done-soft: rgba(26,122,74,.12);
  --mine: #e2e6fb;        /* тинт свайп-ответа/цитаты «моего» (сам пузырь = --grad) */
  --theirs: #ffffff;      /* пузырь собеседника — белый (на глубокой канве читается сам) */
  --system: #fbf0d2;      /* системное сообщение — светло-янтарное */
  /* --grad НЕ переопределяем: «мой» пузырь тёмно-индиго в обеих темах. */
  color-scheme: light;
}

/* ── СВЕТЛАЯ ТЕМА: точечные фиксы хардкод-цветов (аудит) ─────────────────────── */
html[data-theme="light"] .msg.system .bubble { color: #6d4e0e; }
html[data-theme="light"] .msg.theirs .bubble { border-color: var(--line); }
html[data-theme="light"] .msg.theirs .reply-quote { background: rgba(0,0,0,.07); }
html[data-theme="light"] .msg.theirs .att-file .att-file-dl:hover { background: rgba(0,0,0,.10); }
html[data-theme="light"] .link-preview { background: rgba(0,0,0,.06); }
html[data-theme="light"] .drop-overlay { background: rgba(232,236,244,.88); }
/* .chat-rail светлый — ЕДИНСТВЕННОЕ правило в §3.11 (дубль тут удалён, чтобы правки не маскировались). */
/* автоскрытие: прозрачный по умолчанию, красится на :hover блока (см. §3.10) */
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: transparent; }
html[data-theme="light"] *:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.30); }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.48); }
@supports (-moz-appearance: none) {
  html[data-theme="light"] * { scrollbar-color: transparent transparent; }
  html[data-theme="light"] *:hover { scrollbar-color: rgba(0,0,0,.34) transparent; }
}
html[data-theme="light"] .ai-msg.bot.err .ai-bubble { background: #fdecec; color: #b3261e; }
html[data-theme="light"] .ai-msg.bot .ai-msg-file { background: rgba(0,0,0,.06); }
html[data-theme="light"] .ai-chat-item:hover { background: rgba(0,0,0,.06); }
html[data-theme="light"] .ai-chat-del:hover { background: rgba(0,0,0,.10); }
html[data-theme="light"] .ai-chat-arch:hover { background: rgba(0,0,0,.10); }
html[data-theme="light"] .attach-menu button:hover { background: rgba(0,0,0,.07); }
html[data-theme="light"] .sp-tabs { background: var(--panel-2); }
html[data-theme="light"] .sp-cell:hover { background: rgba(0,0,0,.06); }
html[data-theme="light"] .sp-tab:hover { background: rgba(0,0,0,.06); }
html[data-theme="light"] .sp-pv-fav.on { color: #b26f0d; border-color: #b26f0d66; }
html[data-theme="light"] .tw-pill.status-open { color: #4d5a70; }
html[data-theme="light"] .tw-pill.status-in_progress { color: #1d4ed8; }
html[data-theme="light"] .tw-pill.status-done { color: #166534; }
html[data-theme="light"] .tw-pill.status-cancelled { color: #4d5a70; }
html[data-theme="light"] .tw-pill.due-today { color: #854d0e; }
html[data-theme="light"] .tip-link-rel, html[data-theme="light"] .rel-status { color: #4d5a70; }
html[data-theme="light"] .rel-status.s-in_progress { color: #1d4ed8; }
html[data-theme="light"] .rel-status.s-done { color: #166534; }
html[data-theme="light"] .rel-status.s-cancelled { color: #4d5a70; }
html[data-theme="light"] .tip-files-card .tf-thumb { background: var(--panel-2); border: 1px solid var(--line); }
html[data-theme="light"] .tip-files-card .tf-row { background: var(--panel-2); }
html[data-theme="light"] .tip-files-card .tf-row:hover { background: #e1e7f0; }

/* ─── Единый клик по пользователю → профиль (data-profile-uid делегат в app.js) ───
   Любой аватар/имя/чип с этим атрибутом кликабелен и ведёт в ПОЛНЫЙ профиль. */
[data-profile-uid] { cursor: pointer; }
[data-profile-uid]:hover { opacity: .86; }
.prof-hit { cursor: pointer; }
/* Внутренняя обёртка аватар+имя внутри чипа: сохраняем flex-gap, который давал контейнер
   чипа (.td-asg/.v2-asg), т.к. кнопка «убрать» теперь сиблинг обёртки, а не в одном ряду. */
.prof-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ─── @УПОМИНАНИЯ ─────────────────────────────────────────────────────────────
   Чип упоминания в тексте сообщения, пикер участников над полем и знак «@» у
   беседы в списке чатов («вас упомянули — посмотрите»). */
.msg-mention {
  color: var(--accent, #667eea);
  font-weight: 700;
  cursor: pointer;
  background: color-mix(in srgb, var(--accent, #667eea) 18%, transparent);
  border-radius: 5px;
  padding: 0 3px;
  white-space: nowrap;
}
/* Упомянули МЕНЯ — ярче (акцентный фон, контрастный текст). */
.msg-mention-me {
  background: var(--accent, #667eea);
  color: #fff;
}
/* 🔴 НА СВОЁМ (акцентном) пузыре акцентный текст сливается с фоном → белый чип на
   полупрозрачном белом (высокий контраст на любом градиенте пузыря). */
.msg.mine .bubble .msg-mention { color: #fff; background: rgba(255, 255, 255, .26); }
.msg.mine .bubble .msg-mention-me { color: #fff; background: rgba(255, 255, 255, .42); }
html[data-theme="light"] .msg-mention { background: color-mix(in srgb, var(--accent, #667eea) 16%, #fff); }
html[data-theme="light"] .msg-mention-me { color: #fff; }

/* Пикер участников (фикс-позиция, ставится над полем ввода из app.js). */
.mention-menu {
  position: fixed;
  z-index: 9400;
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  padding: 6px;
  overflow-y: auto;
  max-height: 264px;
}
.mention-menu.hidden { display: none; }
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  cursor: pointer;
}
.mention-item.active, .mention-item:hover { background: var(--panel-2, #1e222b); }
.mention-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  flex: 0 0 auto;
}
.mention-av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}
.mention-name {
  font-size: 14px; font-weight: 500; color: var(--text, #e6e8ec);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════ «/»-ссылки: чип-ссылка в сообщении + меню вставки над полем ═══════════
   Чип (задача/тикет/чат/пользователь/событие/клиент/проект) — иконка + заголовок,
   кликабелен (openRef). Меню над полем: список типов → живой поиск сущностей. */
.msg-ref {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: bottom; max-width: 100%;
  padding: 1px 7px 1px 5px; border-radius: 7px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--accent, #667eea);
  background: color-mix(in srgb, var(--accent, #667eea) 15%, transparent);
  line-height: 1.35;
}
.msg-ref:hover { background: color-mix(in srgb, var(--accent, #667eea) 26%, transparent); }
.msg-ref .msg-ref-ic { display: inline-flex; flex: 0 0 auto; }
.msg-ref .msg-ref-ic .ic { width: 14px; height: 14px; }
.msg-ref .msg-ref-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
/* На своём (акцентном) пузыре — белый чип на полупрозрачном белом (контраст на градиенте). */
.msg.mine .bubble .msg-ref { color: #fff; background: rgba(255, 255, 255, .22); }
.msg.mine .bubble .msg-ref:hover { color: #fff; background: rgba(255, 255, 255, .34); }
html[data-theme="light"] .msg-ref { background: color-mix(in srgb, var(--accent, #667eea) 14%, #fff); }

/* Меню вставки «/» (фикс-позиция, ставится над полем ввода из app.js). */
.ref-menu {
  position: fixed; z-index: 9400;
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  padding: 6px;
  /* Меню = закреплённая шапка + список. Скроллит ТОЛЬКО .ref-list (один скроллбар),
     сама коробка не скроллит. Список типов (7 шт.) влезает целиком без скролла —
     скролл появляется лишь в режиме поиска сущностей, когда результатов много. */
  display: flex; flex-direction: column;
  max-height: min(72vh, 480px); overflow: hidden;
}
.ref-menu.hidden { display: none; }
.ref-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line, #2a2f3a);
}
.ref-head-ic { display: inline-flex; flex: 0 0 auto; color: var(--text-dim, #9aa4b2); }
.ref-head-ic .ic { width: 18px; height: 18px; }
/* Поле поиска команд-палитры — «голое», сливается с шапкой меню; фокус живёт в нём. */
.ref-search-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--text, #e6e8ec); font: inherit; font-size: 15px;
  padding: 4px 2px;
}
.ref-search-input::placeholder { color: var(--text-dim, #9aa4b2); }
.ref-back {
  background: none; border: none; cursor: pointer; padding: 3px;
  display: inline-flex; border-radius: 6px; color: var(--text-dim, #9aa4b2); flex: 0 0 auto;
}
.ref-back:hover { background: var(--panel-2, #1e222b); color: var(--text, #e6e8ec); }
.ref-back .ic { width: 18px; height: 18px; }
.ref-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.ref-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
}
.ref-row.active, .ref-row:hover { background: var(--panel-2, #1e222b); }
.ref-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto; color: var(--accent, #667eea);
}
.ref-ic .ic { width: 18px; height: 18px; }
.ref-av {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background-size: cover; background-position: center; background-color: var(--panel-2, #1e222b);
}
.ref-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ref-label {
  font-weight: 600; color: var(--text, #e6e8ec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-sub {
  font-size: 12px; color: var(--text-dim, #9aa4b2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-chevron { display: inline-flex; color: var(--text-dim, #9aa4b2); flex: 0 0 auto; }
.ref-chevron .ic { width: 16px; height: 16px; }
.ref-empty { padding: 14px 10px; text-align: center; color: var(--text-dim, #9aa4b2); }

/* Знак «@» у беседы: вас упомянули (жёлто-акцентная пилюля рядом с бейджем). */
.conv-mention {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; box-sizing: border-box;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent, #667eea);
  color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1;
  flex: 0 0 auto;
}
.conv-item.has-mention .conv-name { color: var(--accent, #667eea); }

/* Единый профиль: строка действий Написать / Позвонить / Видео (паритет с Flutter). */
.user-profile-actions { display: flex; gap: 8px; margin: 4px 0 12px; }
.user-profile-actions button { flex: 1; min-width: 0; white-space: nowrap; }
/* Вкладки профиля пользователя: Профиль / Медиа */
.up-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.up-tab { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 8px; cursor: pointer; margin-bottom: -1px; }
.up-tab:hover { color: var(--text); }
.up-tab.on { color: var(--primary-2); border-bottom-color: var(--primary); }

/* ═══════════════════════ Вид «Таймлайн» (Гант) ═══════════════════════ */
.tl-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tl-tools { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tl-spacer { flex: 1; }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tl-legend .lg { display: flex; align-items: center; gap: 6px; }
.tl-legend .sw { width: 20px; height: 10px; border-radius: 3px; display: inline-block; }
.tl-legend .sw.plan { background: #4a5170; }
.tl-legend .sw.fact { height: 4px; background: rgba(255,255,255,.85); }
.tl-legend .sw.over { background: var(--urg-overdue); }
.tl-legend .sw.dep { width: 20px; height: 0; border: 0; border-top: 2px solid var(--primary); }
.tl-zoom { display: flex; gap: 2px; background: var(--panel-2); border-radius: 9px; padding: 3px; }
.tl-zoom button { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.tl-zoom button:hover { color: var(--text); }
.tl-zoom button.on { background: var(--panel-3, #232732); color: var(--text); }
.tl-today { border: 1px solid var(--line); background: transparent; color: var(--primary-2); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.tl-today:hover { background: var(--panel-2); border-color: var(--primary); }

.tl-board { position: relative; overflow: auto; flex: 1; min-height: 260px; }
.tl-grid { position: relative; }
.tl-head { display: flex; position: sticky; top: 0; z-index: 8; background: var(--bg); }
.tl-railhead { width: 250px; min-width: 250px; position: sticky; left: 0; z-index: 9; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; padding: 0 14px 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tl-axis { position: relative; border-bottom: 1px solid var(--line); }
.tl-mgroup { position: absolute; top: 7px; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; padding-left: 7px; border-left: 1px solid var(--line); }
.tl-daycol { position: absolute; top: 28px; bottom: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; z-index: 0; }
.tl-daycol.wend { background: rgba(255,255,255,.014); }
.tl-dow { font-size: 10px; color: var(--muted); margin-top: 5px; text-transform: uppercase; font-weight: 600; }
.tl-dnum { font-size: 13px; color: var(--text); margin-top: 1px; opacity: .82; }
.tl-daycol.today .tl-dow, .tl-daycol.today .tl-dnum { color: var(--urg-today); opacity: 1; font-weight: 700; }

/* Режим «Часы»: часовые колонки одного дня + навигатор дня. */
.tl-daycol.work { background: rgba(124,140,248,.05); }               /* рабочие часы (9–19) */
.tl-daycol.nowh { background: rgba(229,162,60,.08); }                /* текущий час */
.tl-htime { font-size: 11px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.tl-daycol.nowh .tl-htime { color: var(--urg-today); font-weight: 700; }
.tl-daycol.dayedge { border-left: 1px solid rgba(255,255,255,.16); }   /* граница суток (полночь) в непрерывной шкале «Часы» */
.tl-mgroup.today { color: var(--urg-today); }                                   /* подпись сегодняшнего дня */
.tl-daynav { display: flex; align-items: center; gap: 6px; }
.tl-daynav .tl-daybtn { border: 1px solid var(--line); background: transparent; color: var(--text); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.tl-daynav .tl-daybtn:hover { background: var(--panel-2); border-color: var(--primary); }
.tl-daynav .tl-daybtn svg { width: 15px; height: 15px; }
.tl-daylbl { font-size: 12.5px; font-weight: 600; color: var(--text); min-width: 132px; text-align: center; }
.tl-empty-day { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.tl-rows { position: relative; }
.tl-row { display: flex; position: relative; }
.tl-row:hover .tl-railcell { background: var(--panel); }
.tl-row:hover .tl-track { background: rgba(124,140,248,.05); }
.tl-railcell { width: 250px; min-width: 250px; position: sticky; left: 0; z-index: 6; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding-right: 12px; cursor: pointer; transition: background .14s ease; }
.tl-railcell:hover .tl-name { color: var(--primary-2); }
.tl-name { transition: color .12s ease; }
.tl-ind { flex: none; }
.tl-twist { flex: none; width: 18px; height: 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 5px; }
.tl-twist:hover { background: var(--panel-2); color: var(--text); }
.tl-twist svg { width: 13px; height: 13px; transition: transform .18s; }
.tl-twist.off svg { transform: rotate(-90deg); }
.tl-milemark { flex: none; color: var(--urg-today); font-size: 11px; }
.tl-stat { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tl-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tl-name.done { color: var(--muted); text-decoration: line-through; }
.tl-railcell .tw-av { flex: none; }

.tl-track { flex: 1; position: relative; border-bottom: 1px solid var(--line); }
.tl-bar { position: absolute; height: 25px; top: 50%; transform: translateY(-50%); border-radius: 8px; z-index: 2; cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.3); user-select: none; touch-action: none; transition: box-shadow .16s ease, filter .16s ease; }
.tl-bar:active { cursor: grabbing; }
.tl-bar:hover { box-shadow: 0 0 0 2px rgba(124,140,248,.55), 0 4px 12px rgba(0,0,0,.4); filter: brightness(1.08); z-index: 4; }
.tl-bar .tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.16); }
.tl-bar .tl-lbl { position: absolute; left: 9px; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.tl-bar.done { background: var(--urg-done); } .tl-bar.done .tl-lbl { color: #04342c; text-shadow: none; }
.tl-bar.wip { background: #7c8cf8; }
.tl-bar.open { background: #4a5170; }
/* подпись на тёмном #3a3f4d ФИКСИРОВАННАЯ (не var(--muted): в светлой muted тёмный → 1.5:1 нечитаемо) */
.tl-bar.cancelled { background: #3a3f4d; } .tl-bar.cancelled .tl-lbl { color: rgba(255,255,255,.72); }
.tl-bar.over { box-shadow: inset 0 0 0 1.5px var(--urg-overdue), 0 1px 2px rgba(0,0,0,.35); }
.tl-bar .tl-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; }
.tl-bar .tl-handle:hover { background: rgba(255,255,255,.22); }
.tl-overslice { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(242,96,122,.55); z-index: 0; }
.tl-actual { position: absolute; height: 4px; bottom: 8px; background: rgba(255,255,255,.85); border-radius: 3px; z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.tl-actual.over { background: var(--urg-overdue); }
.tl-parentbar { position: absolute; height: 9px; top: 50%; transform: translateY(-50%); z-index: 2; }
.tl-parentbar .pb { position: absolute; left: 0; right: 0; top: 1px; height: 7px; background: var(--primary); border-radius: 3px; opacity: .85; }
.tl-parentbar .cap { position: absolute; top: -2px; width: 2px; height: 13px; background: var(--primary); }
.tl-parentbar .cap.l { left: 0; } .tl-parentbar .cap.r { right: 0; }
.tl-mile { position: absolute; top: 50%; width: 15px; height: 15px; margin-left: -7px; transform: translateY(-50%) rotate(45deg); background: var(--urg-today); border-radius: 3px; z-index: 3; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.4); touch-action: none; }
.tl-mile:hover { box-shadow: 0 0 0 2px rgba(229,162,60,.5); }

.tl-deps { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; overflow: visible; }
.tl-dep { fill: none; stroke: var(--primary-2); stroke-width: 1.6; opacity: .6; transition: stroke .15s ease, opacity .15s ease, stroke-width .15s ease; }
.tl-dep.hot { stroke: var(--primary); stroke-width: 2.4; opacity: 1; }
.tl-arrowhead { fill: context-stroke; }

.tl-nowline { position: absolute; top: 0; width: 0; border-left: 2px solid var(--urg-today); z-index: 4; pointer-events: none; box-shadow: 0 0 8px rgba(229,162,60,.4); }
.tl-nowline span { position: absolute; top: -1px; left: 6px; font-size: 10px; font-weight: 700; color: var(--urg-today); background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.tl-nowline::before { content: ""; position: absolute; left: -4px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-today); }

.tl-tip { position: fixed; z-index: 200; background: var(--panel-3, #232732); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12px; min-width: 190px; box-shadow: 0 12px 30px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.tl-tip.on { opacity: 1; transform: translateY(0); }
.tl-tip .th { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.tl-tip .tr { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; color: var(--muted); }
.tl-tip .tr b { color: var(--text); font-weight: 500; }
.tl-tip .tr.f b { color: #7c8cf8; } .tl-tip .tr.o b { color: var(--urg-overdue); }

.tl-undated { border-top: 1px solid var(--line); padding: 8px 14px; }
.tl-undated-h { width: 100%; background: transparent; border: 0; font: inherit; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 4px 0; text-align: left; }
.tl-undated-h:hover { color: var(--text); }
.tl-undated-h .tl-undated-t { font-weight: 500; }
.tl-undated-h svg { width: 13px; height: 13px; transition: transform .18s; transform: rotate(-90deg); }
.tl-undated.open .tl-undated-h svg { transform: none; }
.tl-undated-list { display: none; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.tl-undated.open .tl-undated-list { display: flex; }
.tl-urow { border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tl-urow:hover { border-color: var(--primary); }

.tl-undo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); z-index: 300; background: var(--panel-3, #232732); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px 11px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tl-undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tl-undo-toast button { border: 1px solid var(--line); background: transparent; color: var(--primary-2); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.tl-undo-toast button:hover { background: var(--panel-2); }

/* Карточка задачи: план/факт по времени (заложено vs затрачено) */
.tip-tm-planrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.tip-tm-lbl { font-size: 12px; color: var(--muted); }
.tip-tm-plan-v { display: flex; align-items: center; gap: 6px; }
.tip-tm-deltarow { margin-top: 6px; }
.tip-tm-delta { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 7px; display: inline-block; }
.tip-tm-delta.ok { background: var(--urg-done-soft); color: var(--urg-done); }
.tip-tm-delta.over { background: var(--urg-overdue-soft); color: var(--urg-overdue); }

/* Карточка: редакторы оценки (ч/мин) и старта («После задачи»), подсказка в пикере связи */
.tip-est-edit, .tip-start-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tip-est-sep { font-size: 12px; color: var(--muted); }
.tip-start-after { white-space: nowrap; }
.tip-start-after svg { width: 13px; height: 13px; }
.tip-link-hint { font-size: 12px; color: var(--muted); font-weight: 500; padding: 2px 0; }

/* Попап редактора «Начало»: понятный выбор — дата/время ИЛИ «после задачи» */
.td-userpick.tip-startpop { width: 300px; max-width: 92vw; max-height: none; padding: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; overflow: visible; box-sizing: border-box; }
.tip-startpop-h { font-size: 13px; font-weight: 600; color: var(--text); }
.tip-startpop-lbl { font-size: 11.5px; color: var(--muted); }
.tip-startpop-date { display: flex; gap: 8px; align-items: center; width: 100%; }
.tip-startpop-date input { flex: 1 1 0; min-width: 0; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.tip-startpop-date input:focus { border-color: var(--primary); }
.tip-startpop-date > button { flex: 0 0 auto; width: auto; }
.tip-startpop-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin: 1px 0; }
.tip-startpop-or span { flex: none; }
.tip-startpop-or::before, .tip-startpop-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tip-startpop-after { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .14s, background .14s; }
.tip-startpop-after:hover { border-color: var(--primary); background: var(--panel); }
.tip-startpop-after svg { width: 16px; height: 16px; color: var(--primary-2); flex: none; }
.tip-startpop-clear { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 12.5px; padding: 7px; border-radius: 8px; cursor: pointer; }
.tip-startpop-clear:hover { color: var(--urg-overdue); background: var(--panel-2); }
.tip-startpop-clear svg { width: 14px; height: 14px; }

/* Никнейм (@username): вторичный идентификатор рядом с именем (Telegram-стиль).
   Тон акцента, чуть приглушён — виден как «@имя» под/рядом с display_name. */
.user-handle { color: var(--accent); opacity: .9; font-weight: 500; }
.mention-uname { margin-left: 6px; color: var(--accent); opacity: .9; }
#userProfileHandle { color: var(--accent); opacity: .95; margin-top: 2px; }

/* ── Баннер статуса уведомлений (fixed внизу) — чтобы «просто не приходят» не оставалось
      незамеченным. Понятный текст + кнопка «Включить» / «Как включить». ─────────────── */
.notify-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; font-size: 14px; line-height: 1.4;
  box-shadow: 0 -3px 18px rgba(0,0,0,.28); }
.notify-banner.hidden { display: none; }
.notify-banner .nb-msg { flex: 1 1 260px; }
.notify-banner.warn  { background: #4a3410; color: #ffd9a0; border-top: 3px solid #ff9800; }
.notify-banner.error { background: #4a1a16; color: #ffbcb4; border-top: 3px solid #ef4444; }
.notify-banner.info  { background: #12314f; color: #b9d8ff; border-top: 3px solid #3b82f6; }
.notify-banner .nb-btn { flex: 0 0 auto; border: none; border-radius: 8px;
  padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; color: #fff; }
.notify-banner.warn  .nb-btn { background: #f57c00; }
.notify-banner.error .nb-btn { background: #ef4444; }
.notify-banner.info  .nb-btn { background: var(--primary); }
.notify-banner .nb-btn:hover { filter: brightness(1.08); }
.notify-banner .nb-link { flex: 0 0 auto; background: none; border: none; cursor: pointer;
  text-decoration: underline; font-size: 13px; color: inherit; opacity: .85; }
.notify-banner .nb-link:hover { opacity: 1; }
.notify-banner .nb-x { flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: inherit; opacity: .6; padding: 4px 8px; }
.notify-banner .nb-x:hover { opacity: 1; }

/* Светлая тема — мягкий фон, тёмный текст */
html[data-theme="light"] .notify-banner.warn  { background: #fff4e0; color: #6d4300; }
html[data-theme="light"] .notify-banner.error { background: #fdeceb; color: #8b1a12; }
html[data-theme="light"] .notify-banner.info  { background: #e8f2ff; color: #123a66; }

/* Лист «Почему не приходят уведомления» (пошаговые инструкции под ОС/браузер) */
.notify-help-sheet { max-width: 540px; width: 92%; padding: 22px 24px; }
.notify-help-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.notify-help-body .nbh-lead { margin: 0 0 12px; opacity: .82; }
.notify-help-body .nbh-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.notify-help-body .nbh-steps li { line-height: 1.5; }
.notify-help-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Модалка «Скачать приложение» (клик «⬇ Установить» в браузере) ──────────── */
.dl-modal { max-width: 520px; width: 92%; padding: 24px 26px; text-align: center; }
.dl-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.dl-sub { opacity: .8; margin: 0 0 18px; line-height: 1.45; }
.dl-cards { display: flex; gap: 14px; }
.dl-card { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: 12px; border: 1px solid var(--border, #2c2d31);
  text-decoration: none; color: inherit; background: rgba(255,255,255,.03);
  transition: border-color .15s, transform .1s; }
.dl-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.dl-card.dl-reco { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.dl-os { font-size: 17px; font-weight: 700; }
.dl-hint { font-size: 12px; opacity: .6; }
.dl-cta { margin-top: 6px; background: var(--primary); color: #fff; border-radius: 8px; padding: 7px 18px; font-weight: 600; font-size: 14px; }
.dl-pwa { display: block; margin: 16px auto 0; background: none; border: none; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; font-size: 13px; }
.dl-pwa:hover { opacity: 1; }
.dl-close { margin-top: 16px; background: transparent; border: 1px solid var(--border, #2c2d31); border-radius: 8px; padding: 8px 20px; color: inherit; cursor: pointer; }
html[data-theme="light"] .dl-card { background: rgba(20,30,60,.05); }

/* ══════════════════════════════════════════════════════════════════════════════
   §3 РЕДИЗАЙН 2026-07 — премиальная система (светлая тема — первый класс).
   Принципы: (1) светлая = белые слои на холодной канве, разделение тенями/хэйрлайнами,
   а не рамками; поля УТОПЛЕНЫ и «всплывают» в фокус; (2) кнопки «тихие» — плоский
   индиго вместо градиентных плашек (градиент = только бренд-моменты: «мой» пузырь,
   логин-CTA, активный рельс, аватары); (3) hover нейтральный, индиго-тинт только у
   ВЫБРАННОГО; (4) единая моушн-шкала --dur/--ease, пружина только на появлении;
   (5) все цвета/тени — токенами (§1 :root / html[data-theme=light]).
   Блок идёт ПОСЛЕДНИМ в файле → при равной специфичности перебивает легаси выше.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── 3.1 Типографика/рендеринг ── */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.thread-title, .modal-head, .tw-head-title, .sidebar-head, .tasks-head, .projects-head {
  letter-spacing: -0.01em;
}
.conv-time, .msg-time, .task-lens-n, .proj-count, .conv-badge, .rail-badge {
  font-variant-numeric: tabular-nums;
}
code, kbd, .md-body code { font-family: var(--mono); }

/* ── 3.2 Фокус-кольцо (доступность): видно ТОЛЬКО с клавиатуры ── */
:where(button, a, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px var(--glow);
}

/* ── 3.3 Кнопки: «тихие», нейтральный hover; акцент — только .primary ── */
button {
  border-radius: var(--r-md);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              opacity var(--dur-1) var(--ease);
}
button:hover { border-color: var(--line-strong); background: var(--active); }
html[data-theme="light"] button:hover { border-color: #aeb9cd; }
/* кнопки ПОВЕРХ видео (звонок/PiP/групповой созвон): нейтральный тёмный hover не годится —
   возвращаем белёсый, иначе кнопка «гаснет» на видеокартинке */
.call-controls button:hover, .mini-bar button:hover,
.groupcall-overlay button:hover, .minimized button:hover {
  background: rgba(255,255,255,.26); border-color: transparent;
}
/* ghost остаётся прозрачным, hover — мягкий тинт без рамки */
.ghost, html[data-theme="light"] .ghost { background: transparent; box-shadow: none; border-color: transparent; }
.ghost:hover, html[data-theme="light"] .ghost:hover { background: var(--hover); border-color: transparent; }
/* primary: ПЛОСКИЙ индиго (не градиентная плашка). Ширина 100% — как раньше (легаси-лейауты). */
.primary, html[data-theme="light"] .primary {
  background: var(--primary);
  border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(23,28,45,.18);
}
.primary:hover, html[data-theme="light"] .primary:hover {
  background: var(--primary-hi); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(23,28,45,.2);
}
.primary:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
/* бренд-моменты: герой-CTA логина остаётся фирменным градиентом */
.login .primary { background: var(--grad); box-shadow: 0 6px 16px -4px var(--glow); }
.login .primary:hover { background: var(--grad); box-shadow: 0 8px 22px -4px var(--glow); }

/* ── Вход через Telegram (иностранные номера, где SMS не доходит) ──────────────
   Вторичный путь: разделитель «или» + брендовая Telegram-blue кнопка + шаг ожидания. */
.tg-wrap { margin-top: 2px; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 2px 14px; color: var(--text-dim); font-size: 12.5px; }
.or-sep::before, .or-sep::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.tg-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #229ED9; color: #fff; border-color: transparent; border-radius: 11px;
  padding: 11px 16px; font-weight: 600; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(23,28,45,.18);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.tg-btn:hover { background: #1c8fc6; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(34,158,217,.32); }
.tg-btn:active { transform: translateY(.5px); box-shadow: inset 0 1px 2px rgba(0,0,0,.14); }
.tg-btn:disabled { opacity: .6; }
.tg-btn svg { flex: none; }
.tg-hint { margin: 10px 4px 0; font-size: 12.5px; line-height: 1.45; text-align: center; }
/* шаг ожидания: спиннер Telegram-blue + подсказка */
.tg-wait { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 6px 0 22px; text-align: center; }
.tg-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: #229ED9; animation: tg-spin .8s linear infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
/* код сверки: пользователь убеждается, что тот же код показал бот (анти-фишинг) */
.tg-code { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
/* 🔐 Код сверки — заметный контрол (анти-фишинг), не декоративная цифра: рамка + подпись,
   чтобы человек реально сверил его с ботом, прежде чем делиться номером. */
.tg-code-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tg-code-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.tg-code-num { font-size: 32px; font-weight: 700; letter-spacing: 8px; padding-left: 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.tg-code-hint { font-size: 12px; color: var(--text-dim); text-align: center; max-width: 300px; line-height: 1.4; }
/* кнопки звонка в шапке треда — тоже плоский индиго */
.call-btn, html[data-theme="light"] .call-btn { background: var(--primary); border-color: transparent; color: #fff; box-shadow: none; }
.call-btn:hover, html[data-theme="light"] .call-btn:hover { background: var(--primary-hi); border-color: transparent; }
.danger, html[data-theme="light"] .danger { background: var(--danger); color: #fff; border-color: transparent; box-shadow: none; }
.danger:hover, html[data-theme="light"] .danger:hover { filter: brightness(1.06); border-color: transparent; }

/* ── 3.4 Поля ввода: утоплены → «всплывают» на фокусе ── */
input, select, textarea { background: var(--input-bg); }
input:focus, select:focus, textarea:focus { background: var(--panel); }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { background: #fff; }
.composer textarea { background: var(--input-bg); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.composer textarea:focus { background: var(--panel); border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
html[data-theme="light"] .composer textarea:focus { background: #fff; }
/* контейнеры-«поля» (поиск в столбике задач) — та же логика */
.tasks-list .task-searchbar { background: var(--input-bg); }
.chat-search-input { background: var(--input-bg); }

/* ── 3.5 Карточки: light — тень покоя + подъём на hover; тёмная — цвет+граница ── */
.tw-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
html[data-theme="light"] .tw-card { box-shadow: var(--shadow-1); border-color: rgba(23,30,52,.10); }
html[data-theme="light"] .tw-card:hover {
  border-color: rgba(23,30,52,.18);
  box-shadow: 0 2px 6px rgba(15,22,40,.08), 0 10px 24px -6px rgba(15,22,40,.16);
}
html[data-theme="light"] .tw-card.prio-urgent { border-left-color: var(--urg-overdue); }
html[data-theme="light"] .tw-card.prio-high { border-left-color: var(--urg-today); }
html[data-theme="light"] .tw-card.prio-normal { border-left-color: var(--ok); }
/* перетаскивание карточки — «подъём» */
.tw-card.dragging, .tw-card[draggable="true"]:active { box-shadow: var(--shadow-3); }
/* колонки доски в светлой: мягкий инсет чуть темнее канвы, без жёсткой рамки */
html[data-theme="light"] .tw-col { --col-bg: #d4dce9; background: var(--col-bg); border-color: transparent; }

/* ── 3.6 Списки (беседы/проекты): hover нейтральный, активное — индиго-тинт ── */
.conv-item { border-radius: var(--r-md); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--sel); border-color: transparent; box-shadow: none; }
.proj-item:hover { background: var(--hover); }
.proj-item.active { background: var(--sel); border-color: transparent; box-shadow: none; }
.tasks-list .task-row:hover { background: var(--hover); }
.contacts-list .contact-row:hover { background: var(--hover); }
.mention-item.active, .mention-item:hover,
.ref-row.active, .ref-row:hover { background: var(--hover); }

/* ── 3.7 Пузыри сообщений: крупнее радиус, мягче хвост, light-тень ── */
.bubble { border-radius: 16px; line-height: 1.42; }
.msg.mine .bubble { border-bottom-right-radius: 6px; }
.msg.theirs .bubble { border-bottom-left-radius: 6px; border: 1px solid var(--line); }
html[data-theme="light"] .msg.theirs .bubble { box-shadow: var(--shadow-1); border-color: rgba(23,30,52,.09); }
html[data-theme="light"] .msg.mine .bubble { box-shadow: 0 1px 3px rgba(70,64,146,.28); }

/* ── 3.8 Меню/поповеры/тултипы: поднятый слой --panel-3 + тень-2 + пружина появления ── */
@keyframes ccPopIn {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.mention-menu, .ref-menu, .attach-menu, .msg-menu, .tc-pop, .td-userpick, .notif-panel {
  background: var(--panel-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2), var(--edge);
}
.mention-menu, .ref-menu, .attach-menu, .msg-menu, .tc-pop {
  animation: ccPopIn var(--dur-2) var(--ease-spring);
}
.attach-menu button:hover, .msg-menu button:hover { background: var(--hover); }
.msg-menu .msg-menu-del:hover { background: var(--danger-soft); }
.tc-pop-row.danger:hover { background: var(--danger-soft); }
/* плавающие пилюли быстрых действий (карточки/строки) — тень токеном */
.tw-card-acts.tw-qacts, .proj-qacts { box-shadow: var(--shadow-2); background: var(--panel-3); }
.tl-tip, .tl-undo-toast { background: var(--panel-3); box-shadow: var(--shadow-2), var(--edge); }
.cc-toast { background: var(--panel-3); border: 1px solid var(--line); box-shadow: var(--shadow-2), var(--edge); color: var(--text); }
/* На белом фоне тоста осветление не нужно и вредно — чистый акцент даёт контраст 5.78.
   🔴 Префикс html[data-theme="light"] ОБЯЗАТЕЛЕН: в этом файле светлая тема задаётся
   префиксом, а не вложенностью, и правило без него перебило бы базовое в ОБЕИХ темах
   (ровно на это я и наступил — тёмная осталась с контрастом 3.87). */
html[data-theme="light"] .cc-toast-act { color: var(--accent); }
.jump-down { box-shadow: var(--shadow-2); }

/* ── 3.9 Модалки: единый скрим + блюр + появление ── */
@keyframes ccModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal-overlay { background: var(--scrim); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
.modal-box { box-shadow: var(--shadow-3), var(--edge); animation: ccModalIn var(--dur-3) var(--ease-spring); }
html[data-theme="light"] .modal-box { border-color: rgba(23,30,52,.10); }

/* ── 3.10 Скроллбары: СКРЫТЫ по умолчанию, ПОЯВЛЯЮТСЯ при наведении на блок (владелец 2026-07-15).
   🔴 Это КАНОНИЧНОЕ правило (последнее в каскаде) — оно перебивает верхние *::-webkit-scrollbar,
   поэтому автоскрытие делаем ИМЕННО здесь. Бегунок прозрачный → красится на :hover блока
   (:hover поднимается по предкам → бегунок у блока под курсором). Ширину на hover НЕ меняем. ── */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: transparent;
  transition: background-color .15s;
}
*:hover::-webkit-scrollbar-thumb { background-color: rgba(230,233,239,.30); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(230,233,239,.5); background-clip: padding-box; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; background-clip: padding-box; }
html[data-theme="light"] *:hover::-webkit-scrollbar-thumb { background: rgba(23,28,45,.34); border: 3px solid transparent; background-clip: padding-box; }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(23,28,45,.5); border: 3px solid transparent; background-clip: padding-box; }

/* ── 3.11 Каркас в светлой: топбар/рельс/тред ── */
html[data-theme="light"] .topbar { box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(15,22,40,.05); }
html[data-theme="light"] .chat-rail { background: var(--panel); border-right: 1px solid var(--line); } /* A: белый рельс */
html[data-theme="light"] .thread { background: var(--panel-2); } /* A: переписка на мягкой канве, белые пузыри всплывают */
/* активный пункт рельса — фирменный градиент остаётся (бренд-момент) */

/* ── 3.12 Точечные light-фиксы инжект-стилей (белые-альфы app.js в светлой) ── */
html[data-theme="light"] .tm-tile, html[data-theme="light"] .tm-row,
html[data-theme="light"] .tm-fthumb, html[data-theme="light"] .tm-voice { background: var(--panel-2); }
html[data-theme="light"] .tm-row:hover { background: #e0e6f0; }
html[data-theme="light"] .contact-invite-link { color: var(--primary-2); }
html[data-theme="light"] .contact-invite-link:hover { color: var(--primary); }
html[data-theme="light"] .attach-menu button:hover { background: var(--hover); }
html[data-theme="light"] .rd-tb button:hover { background: var(--hover); }
html[data-theme="light"] .qc-fab-x:hover { background: var(--hover); }

/* ── 3.12b Светлая: элементы на белых альфах тёмной темы — невидимы на светлом (аудит 2026-07-14).
   Выходные календаря/таймлайна, граница суток, линия «факта», ховеры, градиент чек-ринга. ── */
html[data-theme="light"] .v2cal-cell.we { background: rgba(15,20,31,.035); }
html[data-theme="light"] .v2cal-cell.we:hover { background: var(--panel-2); } /* пара обязательна: иначе light-.we перебьёт базовый hover (грабля со стр. ~3389) */
html[data-theme="light"] .tl-daycol.wend { background: rgba(15,20,31,.04); }
html[data-theme="light"] .tl-daycol.dayedge { border-left-color: var(--line-strong); }
html[data-theme="light"] .tl-bar.done .tl-lbl { color: #fff; text-shadow: none; }
/* линия «факта»: тёмная с белым кольцом — читается и на светлом треке, и поверх тёмных баров; легенда = тот же вид */
html[data-theme="light"] .tl-actual { background: #3b4560; box-shadow: 0 0 0 1px rgba(255,255,255,.75); }
html[data-theme="light"] .tl-legend .sw.fact { background: #3b4560; box-shadow: 0 0 0 1px rgba(255,255,255,.75); }
html[data-theme="light"] .rail-item:hover { background: var(--hover); } /* базовый var(--panel-2) на светлом рельсе не виден */
html[data-theme="light"] .rd.editable .rd-view:hover { background: var(--hover); }
html[data-theme="light"] .tip-files-card .tf-dl:hover { background: var(--hover); }
html[data-theme="light"] #ckgrad stop:first-child { stop-color: var(--primary-2); }
html[data-theme="light"] #ckgrad stop:last-child { stop-color: #6d28d9; }

/* ── 3.13 Движение: уважение reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ── 3.14 Пространство задач: компактный CTA вместо растянутой плашки ── */
#twNew { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
#twNew svg.ic { width: 15px; height: 15px; }
/* активный вид в сегменте — плоский индиго (градиент = только бренд-моменты) */
.tw-seg button.active { background: var(--primary); box-shadow: none; }

/* ── 3.15 Пилюля/полоса «ИИ» — классами по темам (были инлайн-лаванды, нечитаемые в светлой) ── */
.tw-pill.tw-pill-ai { background: rgba(124,111,255,.14); color: #a99bff; border: 1px solid rgba(124,111,255,.3); }
.tw-pill.tw-pill-ai.ai-working { background: rgba(124,111,255,.22); color: #c4b8ff; border-color: rgba(124,111,255,.42); }
.tw-pill.tw-pill-ai.ai-failed { background: var(--danger-soft); color: #f7a2a2; border-color: rgba(239,68,68,.34); }
.tw-pill.tw-pill-ai.ai-pending { background: rgba(245,158,11,.16); color: #f0b34e; border-color: rgba(245,158,11,.4); }
html[data-theme="light"] .tw-pill.tw-pill-ai { background: rgba(109,95,224,.12); color: #6d28d9; border-color: rgba(109,95,224,.34); }
html[data-theme="light"] .tw-pill.tw-pill-ai.ai-working { background: rgba(109,95,224,.16); color: #5b21b6; border-color: rgba(109,95,224,.42); }
html[data-theme="light"] .tw-pill.tw-pill-ai.ai-failed { background: var(--danger-soft); color: var(--danger); border-color: rgba(220,38,38,.3); }
html[data-theme="light"] .tw-pill.tw-pill-ai.ai-pending { background: rgba(217,119,6,.14); color: #b45309; border-color: rgba(217,119,6,.4); }
.ai-strip-hl { color: #c4b8ff; }
html[data-theme="light"] .ai-strip-hl { color: #5b21b6; }

/* 🟡 ИИ ЖДЁТ ВАШЕГО ОТВЕТА (ai_status="awaiting") — янтарный «нужно действие», заметнее
   рядового статуса, но не тревожно-красный. Пилюля карточки/списка + полоска в шапке чата +
   баннер на карточке. Свет и тьма выверены; мягкая пульсация точки (внимание без мельтешения). */
.tw-pill.tw-pill-ai.ai-waiting { background: rgba(245,158,11,.18); color: #f4bd63; border-color: rgba(245,158,11,.46); }
html[data-theme="light"] .tw-pill.tw-pill-ai.ai-waiting { background: rgba(217,119,6,.14); color: #b45309; border-color: rgba(217,119,6,.42); }

.ai-await-dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 0 rgba(245,158,11,.55); animation: aiAwaitPulse 1.8s ease-in-out infinite; }
@keyframes aiAwaitPulse { 0% { box-shadow:0 0 0 0 rgba(245,158,11,.5); } 70% { box-shadow:0 0 0 6px rgba(245,158,11,0); } 100% { box-shadow:0 0 0 0 rgba(245,158,11,0); } }
@media (prefers-reduced-motion: reduce) { .ai-await-dot { animation: none; } }

/* Полоска в шапке «Чата с ИИ» — янтарный фон, акцентный текст. */
#tipAiStrip.ai-strip-await { background: rgba(245,158,11,.10); border-bottom-color: rgba(245,158,11,.3); color: var(--muted,#8b93a3); }
#tipAiStrip.ai-strip-await .ai-strip-hl { color: #f4bd63; font-weight: 600; }
html[data-theme="light"] #tipAiStrip.ai-strip-await { background: rgba(217,119,6,.08); border-bottom-color: rgba(217,119,6,.28); }
html[data-theme="light"] #tipAiStrip.ai-strip-await .ai-strip-hl { color: #b45309; }

/* Баннер на карточке задачи «ИИ ждёт вашего ответа». */
.tip-card.tip-ai-await { border:1px solid rgba(245,158,11,.42); background: rgba(245,158,11,.07); }
.tip-ai-await-row { display:flex; align-items:flex-start; gap:9px; line-height:1.45; }
.tip-ai-await-row b { color:#f4bd63; }
.tip-ai-await-row .ai-await-dot { margin-top:6px; }
.tip-ai-await-cta { margin-top:10px; }
html[data-theme="light"] .tip-card.tip-ai-await { border-color: rgba(217,119,6,.42); background: rgba(217,119,6,.06); }
html[data-theme="light"] .tip-ai-await-row b { color:#b45309; }

/* ── 3.16 Логин: карточка с тенью + лёгкое брендовое свечение канвы ── */
.login { background: radial-gradient(90% 65% at 50% -12%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 62%); }
html[data-theme="light"] .card { box-shadow: var(--shadow-2); border-color: rgba(23,30,52,.09); }
.login .logo { display: flex; align-items: center; justify-content: center; }
/* брендовый знак (SVG-плитка с градиентом) на логине */
.brand-mark {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--grad);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px var(--glow);
}
.brand-mark svg.ic { width: 30px; height: 30px; color: #fff; }
/* …но красная кнопка «положить трубку» на hover остаётся красной */
.call-controls .danger:hover, .mini-bar .danger:hover, .groupcall-overlay .danger:hover {
  background: var(--danger); filter: brightness(1.12);
}

/* ── 3.17 Кнопки «иконка + подпись» (index.html теперь на SVG вместо эмодзи):
   глобальное button svg.ic { 22px; display:block } ставит иконку НАД текстом —
   для комбинированных кнопок делаем inline-flex и соразмерную иконку 16px.
   (msgMenu*/newGroupBtn/logoutBtn уже были flex — включаем для единообразия;
   dl-карточки скачивания НЕ трогаем — там колоночный лейаут.) ── */
#installBtn, #notifyTopBtn, #backBtn, #groupTasksBtn, #gsAddBtn, #ciInviteBtn,
#recReportTasksBtn, #recReportDownload, #recReportVideo, #profileAddMediaBtn,
#userProfileRenameBtn, #folderNewBtn, #aiVoiceEndBtn,
#circleStart, #circleStop, #mediaRecStart, #mediaRecStop, #recStop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
}
#installBtn svg.ic, #notifyTopBtn svg.ic, #backBtn svg.ic, #groupTasksBtn svg.ic,
#gsAddBtn svg.ic, #ciInviteBtn svg.ic, #recReportTasksBtn svg.ic,
#recReportDownload svg.ic, #recReportVideo svg.ic, #profileAddMediaBtn svg.ic,
#userProfileRenameBtn svg.ic, #folderNewBtn svg.ic, #aiVoiceEndBtn svg.ic,
#circleStart svg.ic, #circleStop svg.ic, #mediaRecStart svg.ic, #mediaRecStop svg.ic,
#recStop svg.ic {
  width: 16px; height: 16px; display: inline-block; flex: none;
}
/* стрелки лайтбокса и док-стрелки мини-звонка теперь SVG — центрируем и размерим */
.lightbox-overlay .lb-prev svg.ic, .lightbox-overlay .lb-next svg.ic { width: 26px; height: 26px; display: block; }
.mini-restore svg.ic { width: 16px; height: 16px; display: block; }

/* ── 3.18 РЕДИЗАЙН «A · Ясный минимал» — компоненты светлой темы (владелец выбрал направление A из
   2 отрисованных на реальной разметке, 2026-07-15). Заменяет прежние итерации столбика задач.
   Язык A: белые панели/карточки на светлой канве, тонкие хэйрлайны, мягкие пилюли, индиго-акцент.
   ТОЛЬКО светлая тема; тёмную не трогаем. ── */

/* Сегмент «Личное/Работа»: трек + активная белая пилюля с тенью */
html[data-theme="light"] .mode-toggle { background: var(--panel-2); border-color: var(--line); border-radius: 11px; }
html[data-theme="light"] .mode-seg { color: var(--muted); border-radius: 8px; }
html[data-theme="light"] .mode-seg.active { background: var(--panel); color: var(--primary); box-shadow: 0 1px 3px rgba(20,25,40,.14); }
html[data-theme="light"] .mode-seg.active .mode-badge { background: var(--primary); color: #fff; }

/* Рельс: активный пункт — сплошной бренд */
html[data-theme="light"] .rail-item.active { background: var(--primary); color: #fff; }
html[data-theme="light"] .rail-item.active .rail-badge { background: #fff; color: var(--primary); }

/* Табы (Мне/Я поставил и фильтры чатов): мягкая пилюля, активная — сплошной бренд */
html[data-theme="light"] .task-lens-btn { background: var(--panel-2); border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-weight: 600; }
html[data-theme="light"] .task-lens-btn.active { background: var(--primary); border-color: transparent; color: #fff; }
html[data-theme="light"] .task-lens-btn .task-lens-n { background: rgba(20,25,40,.06); color: var(--muted); }
html[data-theme="light"] .task-lens-btn.active .task-lens-n { background: rgba(255,255,255,.26); color: #fff; }
/* Светлая тема, двойной счётчик: хэйрлайн темнее (на почти-белой подложке неактивного чипа
   var(--line) не читался) + контраст числа «К выполнению» на АКТИВНОМ индиго-чипе (0.72 бел.
   давал ~2.5:1 — поднимаем до 0.9, ≥3:1). Тёмная тема уже норм — только light-override. */
html[data-theme="light"] .task-lens-btn .task-lens-n .tln-sep { background: rgba(20,25,40,.16); }
html[data-theme="light"] .task-lens-btn.active .task-lens-n .tln-todo { color: rgba(255,255,255,.9); }

/* Карточка задачи: фон чуть темнее белого (владелец 2026-07-15) — мягкий off-white #edf1f8,
   заметно светлее прежнего тёмного #e5eaf3; тонкий бордер + скругление + планка приоритета, тень.
   Чипы внутри → белые (ниже), чтобы читались на off-white. */
html[data-theme="light"] .tasks-list .tw-card {
  background: #edf1f8; border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(20,25,40,.04);
}
/* Нейтральные чипы ВНУТРИ карточки задачи — белые инсет (читаются на off-white фоне карточки) */
html[data-theme="light"] .tasks-list .tw-card .tw-pill.tw-pill-area,
html[data-theme="light"] .tasks-list .tw-card .tw-pill.sub,
html[data-theme="light"] .tasks-list .tw-card .tw-pill.link,
html[data-theme="light"] .tasks-list .tw-card .tw-pill.parent,
html[data-theme="light"] .tasks-list .tw-card .tw-pill.chat:not(.unread) { background: #ffffff; box-shadow: inset 0 0 0 1px #e2e8f2; }
html[data-theme="light"] .tasks-list .tw-card .tw-ck-bar { background: #dde4ef; }
html[data-theme="light"] .tasks-list .tw-card.prio-high { border-left-color: var(--warning); }
html[data-theme="light"] .tasks-list .tw-card.prio-urgent { border-left-color: var(--danger); }
html[data-theme="light"] .tasks-list .tw-card.prio-low { border-left-color: #8a93a3; }
html[data-theme="light"] .tasks-list .tw-card:hover { border-color: var(--line-strong); border-left-color: var(--primary); box-shadow: 0 4px 14px -5px rgba(20,25,40,.18); }
/* Нейтральные чипы: мягкая подложка + тонкое кольцо, спокойный текст */
html[data-theme="light"] .tw-pill.tw-pill-area,
html[data-theme="light"] .tw-pill.sub,
html[data-theme="light"] .tw-pill.link,
html[data-theme="light"] .tw-pill.parent,
html[data-theme="light"] .tw-pill.chat:not(.unread) { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
html[data-theme="light"] .tw-pill.tw-pill-area,
html[data-theme="light"] .tw-pill.parent,
html[data-theme="light"] .tw-pill.chat:not(.unread) { color: var(--muted); }
html[data-theme="light"] .tw-ck-bar { background: #e7ebf4; }
html[data-theme="light"] .tasks-list .tst-none { color: var(--text-dim); }
html[data-theme="light"] .tasks-list .tst-cancelled { color: #8a93a3; }
html[data-theme="light"] .tasks-list .task-section-title .tsec-n { opacity: 1; color: var(--text-dim); }
/* «Идёт таймер»: светлый var(--info) (#2f5bd0) на белом даёт бледный заголовок и слабую
   кнопку — берём тот же #1d4ed8 / rgba(37,99,235,…), что уже у бейджа .tw-pill-timer,
   чтобы секция, фильтр и бейдж читались как ОДНА семья и в светлой теме. */
html[data-theme="light"] .tasks-list .tst-running,
html[data-theme="light"] .tasks-list .tst-wip,
html[data-theme="light"] .tw-sec-title.tst-running,
html[data-theme="light"] .tw-sec-title.tst-wip { color: #1d4ed8; }
html[data-theme="light"] .tw-run-btn:hover { border-color: #1d4ed8; }
html[data-theme="light"] .tw-run-btn:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
html[data-theme="light"] .tw-run-btn.active { color: #1d4ed8; border-color: rgba(37,99,235,.42); background: rgba(37,99,235,.12); }
html[data-theme="light"] .tw-run-btn.active svg.ic { color: #1d4ed8; }

/* Список чатов: скруглённые строки, активная — бренд-софт */
html[data-theme="light"] .conv-item { border-radius: 13px; border: 1px solid transparent; }
html[data-theme="light"] .conv-item.active { background: var(--sel); border-color: transparent; }
html[data-theme="light"] .conv-item:hover:not(.active) { background: var(--panel-2); }

/* Переписка: белый пузырь собеседника с бордером всплывает на канве; свой — индиго */
html[data-theme="light"] .msg.theirs .bubble { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,25,40,.05); }

/* Композер: приподнятая скруглённая карточка */
html[data-theme="light"] .composer { background: var(--panel); border-top: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   §3.14 БОГАТОЕ СООБЩЕНИЕ (format="md") — docs/rich-message-editor.md §3.
   .md-msg — тот же .md-body, но компактнее: внутри пузыря чата, а не карточки
   задачи. Плюс общие для обеих сред конструкции: таблица, callout, подсветка,
   спойлер. Только токены, обе темы вылизаны отдельно.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── типографика внутри пузыря: плотнее описания задачи ── */
.md-msg { font-size: inherit; line-height: 1.45; }
.md-msg > *:first-child { margin-top: 0; }
.md-msg > *:last-child { margin-bottom: 0; }
.md-msg p { margin: 0 0 6px; }
.md-msg h1 { font-size: 1.16em; font-weight: 700; margin: 10px 0 5px; line-height: 1.28; letter-spacing: -.01em; }
.md-msg h2 { font-size: 1.08em; font-weight: 700; margin: 9px 0 4px; line-height: 1.3; letter-spacing: -.005em; }
.md-msg h3 { font-size: 1em; font-weight: 650; margin: 8px 0 3px; color: inherit; opacity: .92; }
.md-msg ul, .md-msg ol { margin: 0 0 6px; padding-left: 18px; }
.md-msg li { margin: 2px 0; }
.md-msg ul.md-tasklist { padding-left: 0; }
.md-msg .md-task { gap: 8px; margin: 3px 0; }
.md-msg .md-cb { width: 15px; height: 15px; border-radius: 4px; }
.md-msg .md-cb::after { left: 4.3px; top: 1px; width: 3.4px; height: 7px; }
.md-msg blockquote { margin: 0 0 6px; padding: 1px 0 1px 10px; border-left: 2.5px solid currentColor; opacity: .78; }
.md-msg pre { margin: 0 0 6px; padding: 8px 10px; border-radius: var(--r-md); background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.07); }
.md-msg pre code { font-size: .86em; line-height: 1.5; }
.md-msg code { font-size: .87em; padding: 1px 4px; border-radius: var(--r-xs); }
.md-msg hr { margin: 9px 0; border: 0; border-top: 1px solid var(--line); opacity: .7; }
.md-msg a { color: inherit; border-bottom-color: currentColor; opacity: .95; }

/* ── .md-note: тот же .md-body, но компактнее — внутри узкой карточки заметки задачи,
   не описания. Копия .md-msg (тот же приём), другое место применения. ── */
.md-note { font-size: inherit; line-height: 1.42; }
.md-note > *:first-child { margin-top: 0; }
.md-note > *:last-child { margin-bottom: 0; }
.md-note p { margin: 0 0 6px; }
.md-note h1 { font-size: 1.16em; font-weight: 700; margin: 8px 0 4px; line-height: 1.28; letter-spacing: -.01em; }
.md-note h2 { font-size: 1.08em; font-weight: 700; margin: 7px 0 4px; line-height: 1.3; letter-spacing: -.005em; }
.md-note h3 { font-size: 1em; font-weight: 650; margin: 6px 0 3px; color: inherit; opacity: .92; }
.md-note ul, .md-note ol { margin: 0 0 6px; padding-left: 18px; }
.md-note li { margin: 2px 0; }
.md-note ul.md-tasklist { padding-left: 0; }
.md-note .md-task { gap: 8px; margin: 3px 0; }
.md-note .md-cb { width: 15px; height: 15px; border-radius: 4px; }
.md-note .md-cb::after { left: 4.3px; top: 1px; width: 3.4px; height: 7px; }
.md-note blockquote { margin: 0 0 6px; padding: 1px 0 1px 10px; border-left: 2.5px solid currentColor; opacity: .78; }
.md-note pre { margin: 0 0 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--panel-3); border-color: var(--line); }
.md-note pre code { font-size: .86em; line-height: 1.5; }
.md-note code { font-size: .87em; padding: 1px 4px; border-radius: var(--r-xs); }
.md-note hr { margin: 8px 0; border: 0; border-top: 1px solid var(--line); opacity: .7; }

/* ── таблица (§3.1 п.2): тонкие хэйрлайны, без зебры, скролл по горизонтали ── */
.md-tablewrap { margin: 0 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); }
.md-tablewrap::-webkit-scrollbar { height: 6px; }
.md-tablewrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
.md-table { border-collapse: collapse; width: 100%; font-size: .95em; font-variant-numeric: tabular-nums; }
.md-table th, .md-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.md-table th:last-child, .md-table td:last-child { border-right: 0; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table thead th { font-weight: 650; color: var(--muted); background: rgba(255,255,255,.03); white-space: nowrap; }

/* ── callout (§3.1 п.3): левая полоса 3px + мягкая подложка семантическим цветом ── */
.md-callout { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--muted); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--hover); }
.md-callout .md-cal-h { font-weight: 650; font-size: .95em; letter-spacing: -.005em; margin-bottom: 2px; }
.md-callout .md-cal-b { opacity: .9; }
.md-callout .md-cal-b:first-child { margin-top: 0; }
.md-cal-note { border-left-color: var(--info); background: var(--info-soft); }
.md-cal-note .md-cal-h { color: var(--info); }
.md-cal-tip { border-left-color: var(--ok); background: var(--ok-soft); }
.md-cal-tip .md-cal-h { color: var(--ok); }
.md-cal-warn { border-left-color: var(--warning); background: var(--warning-soft); }
.md-cal-warn .md-cal-h { color: var(--warning); }
.md-cal-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.md-cal-danger .md-cal-h { color: var(--danger); }
.md-cal-quote { border-left-color: var(--primary); background: var(--sel); }
.md-cal-quote .md-cal-h { color: var(--primary-2); }
.md-cal-quote .md-cal-b { font-style: italic; }

/* ── ==подсветка== ── */
.md-hl { background: var(--warning-soft); color: inherit; padding: 0 3px; border-radius: var(--r-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── ||спойлер||: скрыт до тапа, раскрывается плавно ── */
.md-spoiler {
  background: var(--panel-3); color: transparent; cursor: pointer;
  border-radius: var(--r-xs); padding: 0 3px; user-select: none;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.md-spoiler:hover { background: var(--line-strong); }
.md-spoiler:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.md-spoiler > * { visibility: hidden; }
.md-spoiler.on { background: transparent; color: inherit; cursor: auto; user-select: text; }
.md-spoiler.on:hover { background: transparent; }
.md-spoiler.on > * { visibility: visible; }

/* ── светлая тема: подложки/хэйрлайны считаются заново (в тёмной они на прозрачном белом) ── */
html[data-theme="light"] .md-msg pre { background: var(--panel-2); border-color: var(--line); }
html[data-theme="light"] .md-table thead th { background: var(--panel-2); }
html[data-theme="light"] .md-callout { background: var(--panel-2); }
html[data-theme="light"] .md-cal-note { background: var(--info-soft); }
html[data-theme="light"] .md-cal-tip { background: var(--ok-soft); }
html[data-theme="light"] .md-cal-warn { background: var(--warning-soft); }
html[data-theme="light"] .md-cal-danger { background: var(--danger-soft); }
html[data-theme="light"] .md-cal-quote { background: var(--sel); }
html[data-theme="light"] .md-cal-quote .md-cal-h { color: var(--primary); }
html[data-theme="light"] .md-spoiler { background: #d7dced; }
html[data-theme="light"] .md-spoiler:hover { background: #c7cee3; }
html[data-theme="light"] .md-spoiler.on,
html[data-theme="light"] .md-spoiler.on:hover { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════════
   §3.15  «ПОЛОТНО» — полноэкранный блочный редактор сообщения
   Контракт: docs/rich-message-editor.md §6. Только токены дизайн-системы.
   Инлайн — «живой markdown»: блок В ФОКУСЕ показывает textarea с исходным текстом,
   блок ВНЕ ФОКУСА — отрендеренный .msged-r. Переключение — классом .focus, чтобы
   типографика (размер/интерлиньяж/паддинги) у обоих совпадала и не было скачка.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── кнопка «раскрыть» в композере ── */
.expand-btn {
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  opacity: 1; transform: none;
}
.expand-btn.hidden {
  /* появление/уход без дёрганья раскладки: место под кнопку не схлопывается */
  display: inline-flex !important; opacity: 0; transform: scale(.82);
  pointer-events: none; width: 0; min-width: 0; padding-left: 0; padding-right: 0;
  margin: 0; overflow: hidden;
}

/* ── оверлей ── */
.msged-scrim {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim);
  backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1);
  animation: ccFadeIn var(--dur-2) var(--ease);
}
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
.msged-box {
  display: flex; flex-direction: column; overflow: hidden;
  width: min(880px, 94vw); height: min(88dvh, 900px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-3), var(--edge);
  animation: ccModalIn var(--dur-3) var(--ease-spring);
}

/* ── шапка: ✕ | контекст | undo/redo ── */
.msged-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: var(--head-h, 60px); padding: 0 10px 0 8px;
  border-bottom: 1px solid var(--line);
}
.msged-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.msged-hist { display: flex; gap: 2px; }
.msged-icb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: var(--r-md, 10px); background: transparent;
  color: var(--muted); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.msged-icb:hover { background: var(--hover); color: var(--text); }
.msged-icb:disabled { opacity: .32; cursor: default; background: transparent; }
.msged-icb svg.ic { width: 18px; height: 18px; }

/* ── полотно блоков ── */
.msged-doc {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px clamp(16px, 5vw, 44px) 28px;
  font-size: 15px; line-height: 1.55;
}
.msged-b {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0; padding: 1px 0; border-radius: var(--r-md, 10px);
  transition: background var(--dur-1) var(--ease);
}
.msged-b .msged-body { flex: 1; min-width: 0; }
/* два представления одного блока — видно ровно одно */
.msged-b .msged-ta { display: none; }
.msged-b.focus .msged-ta { display: block; }
.msged-b.focus .msged-r { display: none; }
/* 🔴 Глобальные `textarea` / `textarea:focus` (§3.4) дают полю рамку, подложку и кольцо
   `--glow`. Внутри полотна это недопустимо: блок обязан выглядеть как ТЕКСТ документа, а
   не как поле ввода (и заливка --glow прямо запрещена правилом дизайна). Гасим оба
   состояния явно — селектор с :focus нужен, иначе `textarea:focus` перебьёт по специфичности. */
.msged-ta, .msged-ta:focus {
  width: 100%; resize: none; overflow: hidden;
  border: none; outline: none; box-shadow: none; background: transparent; color: inherit;
  font: inherit; line-height: inherit; letter-spacing: inherit;
  padding: 0; margin: 0; min-height: 0; border-radius: 0;
}
.msged-r { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.55em; cursor: text; }
/* плейсхолдер пустого блока: у textarea — родной, у отрендеренного вида — из data-ph */
.msged-ta::placeholder { color: var(--muted); opacity: .62; }
.msged-r:empty::before { content: attr(data-ph); color: var(--muted); opacity: .62; }

/* типы блоков — реальная типографика, а не «текст с решётками» */
.msged-b-h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 16px 0 4px; }
.msged-b-h2 { font-size: 21px; font-weight: 660; letter-spacing: -.015em; line-height: 1.3; margin: 14px 0 3px; }
.msged-b-h3 { font-size: 17px; font-weight: 640; letter-spacing: -.01em; line-height: 1.35; margin: 12px 0 2px; }
.msged-b:first-child { margin-top: 0; }
.msged-b-quote { padding-left: 14px; border-left: 3px solid var(--line-strong); color: var(--muted-2, var(--muted)); font-style: italic; }
.msged-b-code {
  padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md, 10px); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13.5px; line-height: 1.5; margin: 8px 0;
}
.msged-b-callout {
  padding: 10px 12px 10px 13px; margin: 8px 0;
  border-left: 3px solid var(--info); border-radius: 0 var(--r-md, 10px) var(--r-md, 10px) 0;
  background: var(--info-soft);
}
.msged-cal-kind {
  position: absolute; top: 6px; right: 8px;
  padding: 2px 8px; border: 1px solid transparent; border-radius: var(--r-full, 999px);
  background: transparent; color: currentColor; opacity: .72;
  font-size: 11px; font-weight: 640; letter-spacing: .01em; line-height: 1.5; cursor: pointer;
  transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.msged-cal-kind:hover { opacity: 1; border-color: currentColor; }
.msged-b-callout .msged-body { padding-right: 84px; }
.msged-b-callout.md-cal-note { border-left-color: var(--info); background: var(--info-soft); color: var(--text); }
.msged-b-callout.md-cal-tip { border-left-color: var(--ok); background: var(--ok-soft); }
.msged-b-callout.md-cal-warn { border-left-color: var(--warning); background: var(--warning-soft); }
.msged-b-callout.md-cal-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.msged-b-callout.md-cal-quote { border-left-color: var(--primary); background: var(--sel); }

/* гуттеры списков — выключены из потока текста, чтобы строки блоков были ровные */
.msged-gut { flex: none; width: 22px; text-align: center; color: var(--muted); user-select: none; line-height: 1.55; }
.msged-bullet::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: var(--r-full, 999px); background: var(--muted); vertical-align: middle; margin-bottom: 3px; }
.msged-num { font-variant-numeric: tabular-nums; font-size: .95em; }
.msged-cb {
  width: 18px; height: 18px; margin: 3px 2px 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-xs, 6px);
  background: transparent; color: #fff; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.msged-cb:hover { border-color: var(--primary); }
.msged-cb:active { transform: scale(.9); }
.msged-cb.on { background: var(--primary); border-color: var(--primary); }
.msged-cb svg.ic { width: 12px; height: 12px; stroke-width: 3; }
.msged-b-todo.done .msged-r { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* разделитель */
.msged-b-hr { align-items: center; padding: 10px 0; margin: 6px 0; }
.msged-hr { flex: 1; height: 1px; background: var(--line-strong); border-radius: var(--r-full, 999px); }
.msged-del {
  flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-md, 10px); background: transparent; color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.msged-b:hover .msged-del { opacity: 1; }
.msged-del:hover { background: var(--danger-soft); color: var(--danger); }
.msged-del svg.ic { width: 15px; height: 15px; }

/* таблица — настоящая сетка с ячейками-полями */
.msged-b-table { display: block; margin: 10px 0; }
.msged-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md, 10px); }
.msged-table { border-collapse: collapse; width: 100%; }
.msged-table th, .msged-table td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.msged-table th:last-child, .msged-table td:last-child { border-right: 0; }
.msged-table tr:last-child th, .msged-table tr:last-child td { border-bottom: 0; }
/* ячейка — тоже «текст в сетке», а не поле: гасим глобальные input / input:focus */
.msged-cell, .msged-cell:focus {
  display: block; width: 100%; min-width: 96px; padding: 7px 10px;
  border: none; outline: none; box-shadow: none; border-radius: 0; background: transparent;
  color: inherit; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
}
.msged-table th .msged-cell { font-weight: 640; color: var(--text); }
.msged-cell:focus { background: var(--sel); }
.msged-tacts { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.msged-b-table:hover .msged-tacts, .msged-b-table:focus-within .msged-tacts { opacity: 1; }
.msged-tacts button {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.msged-tacts button:hover { background: var(--hover); color: var(--text); }
.msged-tacts button:last-child:hover { background: var(--danger-soft); color: var(--danger); }
.msged-tacts svg.ic { width: 15px; height: 15px; }

/* ── тулбар низа ── */
.msged-tb {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.msged-tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: none; }
.msged-tb-grow { flex: 1; }
.msged-tbb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border: none; border-radius: var(--r-md, 10px); background: transparent;
  color: var(--muted); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.msged-tbb:hover { background: var(--hover); color: var(--text); }
.msged-tbb:disabled { opacity: .4; cursor: default; }
.msged-tbb.loading { animation: wipPulse 1s var(--ease) infinite; }
.msged-tbb svg.ic { width: 19px; height: 19px; }
.msged-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; flex: none; border: none; border-radius: var(--r-md, 10px);
  cursor: pointer; transition: transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
}
.msged-send:hover { filter: brightness(1.06); }
.msged-send:active { transform: scale(.94); }
.msged-send svg.ic { width: 18px; height: 18px; }

/* ── поповеры тулбара (паттерн существующих меню: --panel-3 + --shadow-2 + ccPopIn) ── */
.msged-pop {
  position: fixed; z-index: 9500; min-width: 216px; padding: 6px;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-2), var(--edge);
  animation: ccPopIn var(--dur-2) var(--ease-spring);
}
.msged-pop button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--r-md, 10px);
  background: transparent; color: var(--text); font-size: 14px; text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.msged-pop button:hover { background: var(--hover); }
.msged-pop .mp-ic { display: inline-flex; width: 18px; color: var(--muted); flex: none; }
.msged-pop .mp-ic svg.ic { width: 17px; height: 17px; }
.msged-pop .mp-l { flex: 1; min-width: 0; }
.msged-pop .mp-ck { display: inline-flex; width: 16px; color: var(--primary); flex: none; }
.msged-pop .mp-ck svg.ic { width: 16px; height: 16px; stroke-width: 2.5; }
.msged-pop button.on .mp-ic { color: var(--primary); }

/* ── узкий экран: редактор занимает весь экран ── */
@media (max-width: 720px) {
  .msged-scrim { padding: 0; }
  .msged-box { width: 100vw; height: 100dvh; max-height: 100dvh; border: none; border-radius: 0; }
  .msged-doc { padding: 16px 16px 24px; }
}

/* ── светлая тема: подложки пересчитываются (в тёмной они на прозрачном белом) ── */
html[data-theme="light"] .msged-box { border-color: rgba(23,30,52,.10); }
html[data-theme="light"] .msged-b-code { background: var(--panel-2); border-color: var(--line); }

/* ══════════ 🔗👤 ССЫЛКА ДЛЯ ГОСТЕЙ (модалка #guestLinkModal) ══════════
   Гость без аккаунта заходит по ссылке в видеокомнату (как у Zoom). Одна модалка на
   всё приложение: открывается из шапки чата и из панели идущего созвона. Токены —
   общие (--panel/--line/--primary), поэтому светлая и тёмная темы получаются сами. */

/* 🔴 ПОВЕРХ ЭФИРА/СОЗВОНА. Эту модалку открывают КНОПКОЙ ВНУТРИ идущего созвона
   (#gcGuestBtn, панель эфира) — а оверлей эфира/звонка стоит на z-index:10000
   (.groupcall-overlay/.call-overlay, app.js). База .modal-overlay = z-index:60, поэтому
   без этого правила модалка «Ссылка для гостей» уходила ПОД эфир и владелец её не видел.
   Держим НИЖЕ pm-scrim/будильника (12000), чтобы подтверждения и входящий будильник
   оставались сверху. Правило: любая модалка, вызываемая ИЗ активного эфира/созвона,
   ОБЯЗАНА иметь z-index > 10000 (память modal-over-call-overlay-zindex). */
#guestLinkModal:not(.hidden) { z-index: 11000; }

.gl-box { width: min(480px, 94vw); }
.gl-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 18px 20px; }

.gl-sec { display: flex; flex-direction: column; gap: 8px; }
.gl-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.gl-hint { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }

/* поле со ссылкой + кнопка «скопировать» */
.gl-url-row { display: flex; gap: 8px; align-items: center; }
.gl-url {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 13.5px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  text-overflow: ellipsis; transition: border-color 140ms ease, background 140ms ease;
}
.gl-url:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.gl-icon { flex: 0 0 auto; }

/* сегмент «Свободная | С кодом» */
/* Тумблер «Комната ожидания» в модалке гостевой ссылки: строка-переключатель с
   пояснением, а не голый чекбокс (голые чекбоксы запрещены правилом дизайна). */
.gl-toggle {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  margin: 4px 0 2px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  transition: border-color .14s cubic-bezier(.2,.8,.2,1), background .14s cubic-bezier(.2,.8,.2,1);
}
.gl-toggle:hover { border-color: var(--line-strong); }
.gl-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); }
.gl-toggle input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer;
  accent-color: var(--primary);
}
.gl-toggle input:disabled { cursor: not-allowed; }
.gl-toggle-t { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 600; }
.gl-toggle-s { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.4; }

.gl-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px;
}
.gl-seg-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  background: transparent; color: var(--muted);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.gl-seg-btn:hover:not(.on):not(:disabled) { color: var(--text); background: var(--hover); }
.gl-seg-btn.on { background: var(--panel-2); color: var(--text); box-shadow: var(--shadow-1); }
.gl-seg-btn:disabled { opacity: .55; cursor: default; }
.gl-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* код доступа — крупно и с трекингом, его диктуют голосом */
.gl-pin-row { display: flex; gap: 10px; align-items: center; }
.gl-pin {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--line);
  font-size: 20px; font-weight: 600; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; color: var(--text);
}

.gl-wide { width: 100%; margin: 0; }
.gl-body .gl-wide + .gl-wide { margin-top: 8px; }

/* пустое состояние: спокойная «продуктовая» карточка, а не голая форма */
.gl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 4px 4px; }
.gl-empty-ico {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 2px;
  border-radius: 16px; background: var(--sel); color: var(--primary-2);
}
.gl-empty-ico .ic { width: 26px; height: 26px; }
.gl-empty-t { font-size: 15.5px; font-weight: 600; color: var(--text); }
.gl-empty-s { font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 340px; margin-bottom: 6px; }

.gl-meta { display: flex; }
.gl-link-btn {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--muted); transition: color 140ms ease;
}
.gl-link-btn:hover { color: var(--text); }
.gl-link-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.gl-guests { list-style: none; margin: -8px 0 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; max-height: 180px; overflow-y: auto; }
.gl-guests li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.gl-g-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-g-time { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; }

.gl-danger { display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; }
.gl-danger > * { flex: 1; }
.gl-del { color: var(--danger); }
.gl-del:hover:not(:disabled) { background: var(--danger-soft); }

.gl-note { font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* 0088 · полоска состояния окна встречи у гостевой ссылки. Тонкий хэйрлайн + мягкая
   подложка на цветовом токене — без заливок «во всю строку» (правило дизайна). */
.gl-win {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
  background: var(--panel-2);
  transition: background .14s ease, border-color .14s ease;
}
.gl-win::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .85;
}
.gl-win-ok   { color: #2e9e6f; border-color: color-mix(in srgb, #2e9e6f 26%, var(--line)); background: color-mix(in srgb, #2e9e6f 7%, var(--panel-2)); }
.gl-win-wait { border-color: color-mix(in srgb, #EF9F27 26%, var(--line)); background: color-mix(in srgb, #EF9F27 7%, var(--panel-2)); }
.gl-win-off  { color: var(--text-dim); }
/* Тема переключается атрибутом html[data-theme], а не системной схемой: в тёмной янтарный
   надо высветлить, иначе на тёмной подложке он уходит в грязь. */
.gl-win-wait { color: #EF9F27; }
html[data-theme="light"] .gl-win-wait { color: #b7791f; }

/* скелет загрузки — та же геометрия, что и содержимое, чтобы не «прыгало» */
.gl-skeleton { display: flex; flex-direction: column; gap: 14px; }
.gl-skeleton i { display: block; height: 40px; border-radius: 10px; background: var(--panel-2); animation: glShimmer 1.2s ease-in-out infinite; }
.gl-skeleton i:nth-child(2) { height: 56px; animation-delay: .12s; }
.gl-skeleton i:nth-child(3) { height: 40px; animation-delay: .24s; }
@keyframes glShimmer { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .gl-skeleton i { animation: none; } }

/* ══════════ 📡 ЭФИРЫ (СТРИМЫ) ══════════
   Стрим = группа + ссылка kind='stream'. UI не дублирует созвон: студия ведущего и вид
   зрителя живут в ТОМ ЖЕ #groupCallOverlay (классы .stream-mode / .st-viewer), а ссылку
   настраивает ТА ЖЕ модалка #guestLinkModal. Здесь только добавочные слои.
   Токены общие (--panel/--line/--primary) → светлая и тёмная темы получаются сами;
   внутри оверлея (он всегда тёмный) — фиксированные светлые значения, как у .gc-*. */

/* ── Тумблер «чат зрителей / реакции»: строка-переключатель в стиле системных ── */
.st-tog {
  appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--input-bg); color: var(--text); cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-tog + .st-tog { margin-top: 8px; }
.st-tog:hover:not(:disabled) { border-color: var(--line-strong); }
.st-tog:disabled { opacity: .55; cursor: default; }
.st-tog:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.st-tog-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-tog-t { font-size: 13.5px; font-weight: 500; }
.st-tog-s { font-size: 12px; color: var(--text-dim); }
.st-tog-sw {
  flex: 0 0 auto; width: 40px; height: 24px; border-radius: 999px; padding: 2px;
  background: var(--line-strong); display: flex; align-items: center;
  transition: background 160ms var(--ease);
}
.st-tog-sw i {
  width: 20px; height: 20px; border-radius: 50%; background: #fff; display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,.28); transition: transform 160ms var(--ease);
}
.st-tog.on .st-tog-sw { background: var(--primary); }
.st-tog.on .st-tog-sw i { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .st-tog-sw, .st-tog-sw i { transition: none; } }

/* ── Модалка «Новый эфир» ── */
.stm-box { width: min(480px, 94vw); }
.stm-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 18px 20px; }
.stm-name { width: 100%; }
.stm-pin {
  flex: 0 0 auto; width: 148px; padding: 8px 14px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--line); color: var(--text);
  font-size: 20px; font-weight: 600; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; transition: border-color 140ms var(--ease);
}
.stm-pin:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.stm-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 4px 4px 0; }
.stm-done-ico {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 2px;
  border-radius: 16px; background: var(--sel); color: var(--primary-2);
}
.stm-done-ico .ic { width: 26px; height: 26px; }
.stm-done-t { font-size: 15.5px; font-weight: 600; }
.stm-done-s { font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 350px; }

/* ── Полоса «Эфир идёт / не начат» в модалке ссылки ── */
.st-livebar {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-livebar.on { border-color: rgba(239,68,68,.32); background: var(--danger-soft); }
.st-livebar-l { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.st-livebar-t { font-size: 13.5px; font-weight: 600; width: 100%; }
.st-livebar.on .st-livebar-t { width: auto; }
.st-livebar-s { font-size: 12px; color: var(--text-dim); width: 100%; }

/* ── Пилюля «В эфире» (шапка созвона + строка списка): сдержанная, хэйрлайн + точка ── */
.st-live {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 9px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: #ffd9d9; background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.30);
}
.st-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto;
  animation: stLivePulse 2.4s ease-in-out infinite;
}
@keyframes stLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); } 60% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } }
@media (prefers-reduced-motion: reduce) { .st-live-dot { animation: none; } }

/* ── Раскладка студии: тот же оверлей, справа — панель эфира ── */
.groupcall-overlay.stream-mode:not(.minimized) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.groupcall-overlay.stream-mode:not(.minimized) .groupcall-head { grid-area: 1 / 1 / 2 / 3; }
.groupcall-overlay.stream-mode:not(.minimized) .gc-stage { grid-area: 2 / 1 / 3 / 2; }
.groupcall-overlay.stream-mode:not(.minimized) .st-panel { grid-area: 2 / 2 / 3 / 3; }
.groupcall-overlay.stream-mode:not(.minimized) .groupcall-controls { grid-area: 3 / 1 / 4 / 3; }
.groupcall-overlay.stream-mode.st-panel-off:not(.minimized) { grid-template-columns: minmax(0, 1fr) 0; }
.groupcall-overlay.stream-mode.st-panel-off .st-panel { display: none; }
.groupcall-overlay.minimized .st-panel, .groupcall-overlay.minimized .st-react-layer { display: none; }
/* зритель не публикует — собственная пустая плитка «Вы» ему не нужна */
.groupcall-overlay.st-viewer .gtile[data-uid="me"] { display: none; }

.st-panel {
  display: flex; flex-direction: column; min-height: 0;
  margin: 10px 16px 6px 0; border-radius: 16px;
  background: rgba(22,25,33,.70); border: 1px solid var(--gc-hair-2);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.st-panel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--gc-hair);
}
.st-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.st-tab {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 500;
  background: transparent; color: #9aa3b4;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.st-tab:hover:not(.on) { background: rgba(255,255,255,.06); color: #e8ebf2; }
.st-tab.on { background: rgba(255,255,255,.10); color: #fff; }
.st-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.st-tab-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 600;
}
.st-panel .st-copy { flex: 0 0 auto; color: #c7ccd8; background: transparent; border-color: transparent; }
.st-panel .st-copy:hover { background: rgba(255,255,255,.10); color: #fff; }
.st-panel.has-new .st-tab[data-sttab="chat"]::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}

.st-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.st-body::-webkit-scrollbar { width: 8px; }
.st-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.st-empty { margin: auto 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: #8b93a3; padding: 12px 6px; }
.st-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: #8b93a3; margin: 6px 0 -2px; }

.st-msg { font-size: 13px; line-height: 1.45; color: #e6e9ef; word-break: break-word; }
.st-msg-n { color: var(--primary-2); font-weight: 600; margin-right: 6px; }
.st-msg.mine .st-msg-n { color: #7fd3a8; }
.st-sys { font-size: 12px; color: #8b93a3; text-align: center; padding: 2px 0; }

.st-hand {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gc-hair);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-hand:hover { border-color: var(--gc-hair-2); background: rgba(255,255,255,.08); }
.st-hand.on { background: rgba(102,126,234,.14); border-color: rgba(102,126,234,.32); }
.st-hand-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #e6e9ef; }
.st-hand-ic .ic { width: 15px; height: 15px; }
.st-hand-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: #e6e9ef; }
.st-hand-n, .st-hand-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hand-s { font-size: 11.5px; color: #8b93a3; }
.st-hand-acts { flex: 0 0 auto; display: flex; gap: 6px; margin-left: auto; }
.st-mini {
  appearance: none; border: 1px solid var(--gc-hair-2); cursor: pointer;
  padding: 5px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 500;
  background: rgba(255,255,255,.06); color: #e6e9ef;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.st-mini:hover { background: rgba(255,255,255,.13); }
.st-mini.primary { background: var(--primary); border-color: transparent; color: #fff; }
.st-mini.primary:hover { background: var(--primary-hi); }
.st-mini.danger { color: #ffb0b0; border-color: rgba(239,68,68,.32); background: rgba(239,68,68,.14); }
.st-mini.danger:hover { background: rgba(239,68,68,.24); }
.st-mini:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── «В эфире»: кто сейчас вещает ───────────────────────────────────────────────
   Строка того же ритма, что .st-hand (одна сетка на всю панель эфира), но с
   монограммой вместо иконки и живым состоянием микрофона. Говорящего подсвечиваем
   тонким кольцом, а не заливкой: заливка на всю строку — ровно тот «жирный» приём,
   который в этом проекте запрещён. */
.st-air {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gc-hair);
  transition: border-color 140ms var(--ease), background 140ms var(--ease), box-shadow 140ms var(--ease);
}
.st-air + .st-air { margin-top: 6px; }
.st-air:hover { border-color: var(--gc-hair-2); background: rgba(255,255,255,.08); }
.st-air.talking { border-color: rgba(127,211,168,.44); box-shadow: 0 0 0 1px rgba(127,211,168,.22); }
.st-air-av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #e6e9ef; font-size: 12px; font-weight: 600;
}
.st-air-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: #e6e9ef; }
.st-air-n, .st-air-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-air-s { font-size: 11.5px; color: #8b93a3; }
.st-air-mic { flex: 0 0 auto; display: grid; place-items: center; color: #7fd3a8; }
.st-air-mic .ic { width: 15px; height: 15px; }
.st-air-mic.off { color: #8b93a3; }
.st-air .st-mini { margin-left: 2px; }

.st-compose { flex: 0 0 auto; border-top: 1px solid var(--gc-hair); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.st-reacts { display: flex; gap: 4px; }
.st-react {
  appearance: none; border: 0; cursor: pointer; flex: 1; padding: 6px 0; border-radius: 9px;
  font-size: 17px; line-height: 1; background: rgba(255,255,255,.05);
  transition: background 140ms var(--ease), transform 140ms var(--ease-spring);
}
.st-react:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.st-react:active { transform: scale(.92); }
.st-react:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.st-input-row { display: flex; gap: 6px; align-items: center; }
.st-input {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; color: #e6e9ef;
  background: rgba(255,255,255,.06); border: 1px solid var(--gc-hair); border-radius: 10px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-input::placeholder { color: #7d8595; }
.st-input:focus { outline: none; border-color: var(--primary); background: rgba(255,255,255,.10); }
.st-send {
  appearance: none; border: 0; cursor: pointer; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--primary); color: #fff; transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.st-send:hover { background: var(--primary-hi); }
.st-send:active { transform: scale(.94); }
.st-send .ic { width: 16px; height: 16px; }

/* ── Всплывающие реакции: лёгкий слой поверх сцены, кликов не ловит ── */
.st-react-layer { position: absolute; left: 0; right: 0; bottom: 96px; top: 20%; pointer-events: none; overflow: hidden; z-index: 3; }
.st-fly { position: absolute; bottom: 0; font-size: 26px; line-height: 1; animation: stFly 2.4s var(--ease) forwards; }
@keyframes stFly {
  0%   { opacity: 0; transform: translate(0, 10px) scale(.7); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--st-dx, 0), -100%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .st-fly { animation-duration: .01ms; } }

/* ── «Завершить эфир» — та же геометрия, что у «Выйти», но приглушённее ── */
.groupcall-controls #stEndBtn { background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.38); color: #ffc9c9; }
.groupcall-controls #stEndBtn:hover { background: rgba(239,68,68,.30); color: #fff; }
.groupcall-controls #stHandBtn.on { background: var(--grad); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.24) inset; }

/* ── Строка эфира в списке чатов (вкладка «Эфиры») ── */
.conv-av.st-av { background: var(--sel); color: var(--primary-2); display: grid; place-items: center; }
.conv-av.st-av .ic { width: 18px; height: 18px; }
.st-item.live .conv-name { font-weight: 600; }
.st-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--danger);
  background: var(--danger-soft); border: 1px solid rgba(239,68,68,.24);
}
.st-pill .st-live-dot { width: 6px; height: 6px; }
.st-rowcopy {
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 3px;
  border-radius: 6px; color: var(--muted); display: inline-grid; place-items: center;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.st-rowcopy:hover { background: var(--hover); color: var(--text); }
.st-rowcopy .ic { width: 14px; height: 14px; }

/* ── Узкий экран: панель эфира уходит под сцену (телефон держит одну колонку) ── */
@media (max-width: 900px) {
  .groupcall-overlay.stream-mode:not(.minimized) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 44vh) auto;
  }
  .groupcall-overlay.stream-mode:not(.minimized) .groupcall-head { grid-area: 1 / 1 / 2 / 2; }
  .groupcall-overlay.stream-mode:not(.minimized) .gc-stage { grid-area: 2 / 1 / 3 / 2; }
  .groupcall-overlay.stream-mode:not(.minimized) .st-panel { grid-area: 3 / 1 / 4 / 2; margin: 6px 12px; }
  .groupcall-overlay.stream-mode:not(.minimized) .groupcall-controls { grid-area: 4 / 1 / 5 / 2; }
  .groupcall-overlay.stream-mode.st-panel-off:not(.minimized) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 0 auto;
  }
}

/* ── Светлая тема: модалки берут токены, поэтому правим только «утопленные» подложки ── */
html[data-theme="light"] .st-tog { border-color: rgba(23,30,52,.10); }
html[data-theme="light"] .st-tog-sw { background: rgba(23,30,52,.18); }
html[data-theme="light"] .st-livebar { border-color: rgba(23,30,52,.10); }
html[data-theme="light"] .st-pill { border-color: rgba(239,68,68,.30); }

/* 🔴 Кнопка «иконка + подпись» на всю ширину была display:block → иконка падала на свою
   строку («Начать эфир» с иконкой сверху). Одна строка, центр, 8px зазор — и в модалке
   эфира, и в существующей модалке ссылки для гостей (класс общий). */
.gl-wide { display: flex; align-items: center; justify-content: center; gap: 8px; }
.gl-pin-row button, .st-livebar button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* кнопка в полосе эфира не должна растягиваться (в модалке .primary — на всю ширину) */
.st-livebar > button { flex: 0 0 auto; width: auto; }
.st-livebar-l { flex: 1 1 auto; min-width: 0; }


/* В виде зрителя группа «мик/камера/переворот» пустеет целиком — прячем и её, и
   висящий за ней разделитель (иначе док открывается «сиротской» палочкой). */
.groupcall-overlay.stream-mode .gc-grp:not(:has(button:not(.hidden))) { display: none; }
.groupcall-overlay.stream-mode .gc-grp:not(:has(button:not(.hidden))) + .gc-sep { display: none; }

/* Кнопки шапки списка чатов («Группа» и «Эфир») — одна строка «иконка + подпись».
   Без этого вторая кнопка ломала подпись под иконку, когда места стало меньше. */
.sidebar-head-actions button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 10px;
}
.sidebar-head-actions { flex: 0 1 auto; min-width: 0; }

/* ══════════ 🪟 ВИТРИНА ЭФИРОВ (вкладка «Эфиры»: «Идут сейчас» / «Скоро») ══════════
   Живёт в том же узком столбце списка чатов — поэтому карточка одноколоночная, как в
   мобильных витринах: обложка 16:9, поверх неё статус, под ней текст и действия. */
.st-sc-head {
  display: flex; align-items: center; gap: 8px; list-style: none;
  padding: 14px 10px 6px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.st-sc-head:first-child { padding-top: 8px; }
.st-sc-n {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
}

.stc {
  list-style: none; margin: 0 6px 10px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: border-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.stc:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.stc:active { transform: translateY(0); }
.stc:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* обложка 16:9: аватар беседы, иначе градиент от названия (алгоритм общий с guest.js) */
.stc-cover {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-start; gap: 6px; padding: 8px;
}
.stc-cover.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%);
}
.stc-cover > * { position: relative; z-index: 1; }
.stc-ph {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 650; letter-spacing: .04em; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
/* «В эфире» — сдержанно: тёмная подложка + мягкая красная точка, без кислотной заливки */
.stc-badge, .stc-viewers, .stc-soon {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #fff;
  background: rgba(12,14,20,.62); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.stc-viewers .ic, .stc-soon .ic { width: 13px; height: 13px; }
.stc-lock {
  margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 8px; color: #fff; background: rgba(12,14,20,.62);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stc-lock .ic { width: 13px; height: 13px; }

.stc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.stc-title {
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.stc-host { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); min-width: 0; }
.stc-host > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stc-host-av {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center;
}
.stc-host-av.has-img { color: transparent; }
/* описание — ровно 2 строки, как договорились */
.stc-desc {
  font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.stc-acts { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.stc-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 500;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.stc-btn:hover { background: var(--hover); border-color: var(--line-strong); }
.stc-btn.primary { background: var(--primary); border-color: transparent; color: #fff; }
.stc-btn.primary:hover { background: var(--primary-hi); }
.stc-btn .ic { width: 14px; height: 14px; }
.stc-when {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  font-size: 12.5px; color: var(--text-dim);
}
.stc-when .ic { width: 14px; height: 14px; }
.stc-acts .stc-btn:last-child:not(.primary) { margin-left: auto; }

/* пустая витрина — человеческий экран, а не пустота */
.st-sc-empty {
  list-style: none; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 42px 22px;
}
.st-sc-empty-ico {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 2px;
  border-radius: 16px; background: var(--sel); color: var(--primary-2);
}
.st-sc-empty-ico .ic { width: 26px; height: 26px; }
.st-sc-empty-t { font-size: 15px; font-weight: 600; color: var(--text); }
.st-sc-empty-s { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); max-width: 300px; }

/* скелет загрузки витрины — та же геометрия карточек, чтобы не «прыгало» */
.st-sc-skel { list-style: none; padding: 8px 6px; display: flex; flex-direction: column; gap: 10px; }
.st-sc-skel i {
  display: block; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--panel-2);
  animation: glShimmer 1.2s ease-in-out infinite;
}
.st-sc-skel i:nth-child(2) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .st-sc-skel i { animation: none; } .stc { transition: none; } }

/* поля витрины в модалках (описание + время начала) */
.st-area {
  width: 100%; resize: vertical; min-height: 56px; padding: 10px 12px; font: inherit; font-size: 13px;
  line-height: 1.45; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-area:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.st-area::placeholder { color: var(--text-dim); }
.st-when-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-when-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.st-when-lbl .ic { width: 14px; height: 14px; }
.st-when-input {
  flex: 1 1 auto; min-width: 168px; padding: 9px 12px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.st-when-input:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.gl-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }

/* светлая тема: пересчитываем только «утопленные» подложки и хэйрлайны */
html[data-theme="light"] .stc { border-color: rgba(23,30,52,.10); background: var(--panel); }
html[data-theme="light"] .stc:hover { box-shadow: 0 1px 2px rgba(23,30,52,.06), 0 6px 16px -6px rgba(23,30,52,.14); }
html[data-theme="light"] .st-area, html[data-theme="light"] .st-when-input { border-color: rgba(23,30,52,.10); }
html[data-theme="light"] .st-sc-n { background: var(--panel-2); }

/* у «скоро» время стоит на обложке, поэтому кнопка ссылки остаётся слева, а не улетает вправо */
.stc.soon .stc-acts .stc-btn:last-child:not(.primary) { margin-left: 0; }

/* ═══════════════ Живая расшифровка + перевод (Otter/Zoom-стиль) ═══════════════ */
/* Панель на все типы звонка. Токены (--panel/--line/--text/--primary) сами адаптируют
   светлую и тёмную тему. z-index выше оверлея звонка (10000). */
.lt-panel {
  position: fixed; right: 20px; bottom: 100px; z-index: 10050;
  width: 384px; max-width: calc(100vw - 24px); max-height: min(62vh, 640px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-3);
  overflow: hidden; color: var(--text);
  animation: ltIn .18s cubic-bezier(.2,.7,.3,1);
}
.lt-panel.hidden { display: none; }
.lt-panel.dragging { transition: none; user-select: none; }
@keyframes ltIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.lt-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 12px 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  cursor: grab;
}
.lt-panel.dragging .lt-head { cursor: grabbing; }
.lt-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; flex: 1; }
.lt-head-actions { display: flex; align-items: center; gap: 4px; }
.lt-head-actions .lt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }

.lt-panel button { font: inherit; cursor: pointer; }
.lt-lang, .lt-min, .lt-pause {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.lt-lang svg, .lt-min svg, .lt-pause svg { width: 18px; height: 18px; }
.lt-lang:hover, .lt-min:hover, .lt-pause:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.lt-lang { border-color: var(--line); }
.lt-lang-code { font-size: 12px; font-weight: 650; letter-spacing: .02em; min-width: 20px; text-align: center; }

.lt-body {
  flex: 1; overflow-y: auto; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
}
.lt-body::-webkit-scrollbar { width: 8px; }
.lt-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

.lt-line { padding: 6px 0; }
.lt-line.cont { padding-top: 1px; margin-top: -3px; }
.lt-line-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lt-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 650; color: #fff;
  background: hsl(var(--h,220) 52% 48%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.lt-name { font-size: 13px; font-weight: 600; color: var(--text); }
.lt-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lt-text { font-size: 14.5px; line-height: 1.46; color: var(--text); padding-left: 34px; word-wrap: break-word; }
.lt-line.cont .lt-text { padding-top: 0; }
.lt-trans {
  font-size: 13.5px; line-height: 1.42; padding-left: 34px; margin-top: 3px;
  color: color-mix(in srgb, var(--primary) 82%, var(--text));
}
.lt-trans:empty { display: none; }
.lt-trans.loading::after { content: "…"; color: var(--muted); }

.lt-foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.lt-timer { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 550; }
.lt-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0483d; box-shadow: 0 0 0 0 rgba(224,72,61,.55); animation: ltPulse 1.6s infinite; }
.lt-panel.paused .lt-live-dot { background: var(--muted); animation: none; box-shadow: none; }
@keyframes ltPulse { 0% { box-shadow: 0 0 0 0 rgba(224,72,61,.5); } 70% { box-shadow: 0 0 0 7px rgba(224,72,61,0); } 100% { box-shadow: 0 0 0 0 rgba(224,72,61,0); } }
.lt-foot-sp { flex: 1; }
.lt-done {
  height: 32px; padding: 0 16px; border: none; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: filter .13s ease, transform .08s ease;
}
.lt-done:hover { filter: brightness(1.06); }
.lt-done:active { transform: scale(.97); }
.lt-pause.resumed { color: var(--primary); }

/* Меню выбора языка перевода */
.lt-menu {
  position: fixed; z-index: 10060; min-width: 210px; max-height: 320px; overflow-y: auto;
  padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-3); animation: ltIn .14s ease;
}
.lt-menu-item {
  display: flex; align-items: center; width: 100%; padding: 8px 10px; gap: 8px;
  background: transparent; border: none; border-radius: 9px; color: var(--text);
  font-size: 13.5px; text-align: left; transition: background .1s ease;
}
.lt-menu-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.lt-menu-item.sel { color: var(--primary); font-weight: 600; }
.lt-menu-item.sel::after { content: "✓"; margin-left: auto; font-weight: 700; }

/* Активная кнопка «Расшифровка» в панели управления звонком */
#gcCcBtn.active, #caCcBtn.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }

@media (max-width: 560px) {
  .lt-panel { right: 8px; left: 8px; bottom: 84px; width: auto; max-height: 56vh; }
}