/* ClientsChat — ИНТЕРАКТИВ КОМНАТЫ СОЗВОНА: ОДНА одежда на ДВА бандла.
 *
 * 🔴🔴 ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ (канон `guest-call-parity`)
 *
 * Разметку опроса, Q&A, повестки, указки, доски и субтитров строит ОДНА реализация —
 * `/app/ccroom.js` (`window.CcRoom`). Её зовут ДВА бандла: основной клиент (`app.js`,
 * страница `index.html`) и гостевая страница `/j/<slug>` (`guest.js`, `guest.html`).
 *
 * 🔴 `guest.html` НЕ ГРУЗИТ `style.css` вовсе — и это намеренно: там своя раскладка и
 * свой набор токенов, а тащить к гостю 1.9 МБ стилей всего продукта нельзя. Значит
 * стили общей разметки ФИЗИЧЕСКИ не могут жить в `style.css`: у гостя они бы просто не
 * приехали, и «дать гостю опрос» превратилось бы во ВТОРУЮ копию тех же правил, которая
 * через месяц разъедется с первой (ровно то, за что уже били — CLIE-606·2).
 *
 * Поэтому здесь — ОДНА декларация на продукт. В `style.css` этих правил больше НЕТ
 * (проверяется гейтом: селектор обязан встречаться ровно один раз на два файла).
 *
 * Тот же приём уже применён к `callui.css` (плитка участника), `participants.css`
 * (список участников), `cctip.js` (подсказки), `ccfxlk.js` (мост эффектов).
 *
 * 🔴 ЧТО ЗДЕСЬ ЕСТЬ И ЧЕГО НЕТ. Здесь — «одежда» ОБЩЕЙ разметки: карточка опроса, строка
 * вопроса, плашка «сейчас обсуждаем», слой указки, холст аннотаций/доски и строка живых
 * субтитров. Рама боковой шторки (`.gcx-panel`, `.gcx-head`, `.gcx-seg`), композер опроса
 * (`.gcx-comp*`), очередь рук (`.gcx-hands*`) и все правила, завязанные на состояния
 * оверлея основного клиента (`.groupcall-overlay.minimized`, `.call-overlay…`), остаются
 * в `style.css`: этой разметки у гостя нет и не будет.
 *
 * 🔴🔴 ТОКЕНЫ: ФАЙЛ САМОДОСТАТОЧЕН НА ЛЮБОЙ СТРАНИЦЕ. Оверлей созвона ВСЕГДА тёмный,
 * поэтому правила ниже берут тёмную шкалу звонка и движение продукта. Восемь из этих
 * токенов у гостя не объявлены ВООБЩЕ, а `--gc-*` — ещё и СКОУПНЫЕ: в `style.css` они
 * живут не в `:root`, а на `.groupcall-overlay`, то есть и в основном клиенте резолвятся
 * только внутри этой рамы. Поэтому у КАЖДОГО их использования стоит честный фолбэк
 * `var(--токен, значение)`, и значения взяты ИЗ `style.css`, а не на глаз:
 *   --gc-hair     rgba(255,255,255,.08)  ← .groupcall-overlay (тема не меняет: рама тёмная)
 *   --gc-hair-2   rgba(255,255,255,.14)  ← .groupcall-overlay
 *   --gc-btn-h    rgba(255,255,255,.13)  ← .groupcall-overlay
 *   --grad        linear-gradient(135deg, #667eea, #764ba2) ← :root (светлая НЕ меняет)
 *   --primary-2   #8b9cf5                ← :root, ТЁМНОЕ значение (светлое #4338ca) —
 *                 все три использования это кольца фокуса ВНУТРИ тёмного стекла панели
 *                 инструментов, поэтому фолбэк тут обязан быть тёмной ветки
 *   --dur-1       120ms   ·  --dur-2  200ms  ← :root, от темы не зависят
 *   --ease-spring cubic-bezier(.34,1.4,.64,1) ← :root
 * Без фолбэка намеренно оставлены `--ease`, `--primary`, `--primary-hi`, `--text`: их
 * объявляют ОБЕ страницы, и подменять их «своим» значением значило бы увести цвет и
 * тайминг гостя от его же темы.
 */

/* ══════════════ КАНОН СЕГМЕНТА `.cc-seg` (CLIE-505) ══════════════
   Вкладки «Опрос · Вопросы · Повестка» — это `class="cc-seg cc-seg-md gcx-seg"` И у
   сотрудника, И у гостя, поэтому канон переехал сюда из `style.css` целиком.
   🔴 ЭТО РАЗДЕЛЕНИЕ, А НЕ КОПИЯ: правила канона в `style.css` были ОБЩИМИ списками
   (`.cc-seg, .tw-seg, .co-seg, .cli-seg, …` — два десятка со-селекторов). Из тех списков
   `.cc-seg`-селекторы ВЫРЕЗАНЫ и живут только здесь; со-селекторы соседних компонентов
   (`.tw-seg`, `.co-seg`, `.feed-seg`, `.v2acc-seg`, …) остались в `style.css`. Ни один
   селектор не объявлен дважды.
   🔴 ПОЧЕМУ ПЕРЕЕЗД БЕЗОПАСЕН ПО КАСКАДУ. `ccroom.css` грузится ПОСЛЕ `style.css`, но в
   каждой спорной паре решает СПЕЦИФИЧНОСТЬ, а не порядок: живое правило элемента — это
   `.cc-seg button` (0,1,1), и оно било `.cc-seg > *` (0,1,0) и до переезда, и после.
   Замерено браузером ДО и ПОСЛЕ на 18 видах сегмента × 2 темы — значения совпали.
   🔴 ТОКЕНЫ `--seg-*` НЕ ПЕРЕОПРЕДЕЛЯЮТСЯ ЗДЕСЬ: боевой дефолт `/app` — Концепт 6, он
   задаёт свои `--seg-track/-thumb/-thumb-bd/-thumb-sh/-div`. Фолбэк в `var()` срабатывает
   ТОЛЬКО когда токен не объявлен вовсе, поэтому концепт продолжает выигрывать, а гость,
   у которого этих токенов нет, получает базовые значения продукта. */
.cc-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px; gap: 2px; }
.cc-seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  min-width: max-content;
}
.cc-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
html[data-theme="light"] .cc-seg button.on { box-shadow: 0 1px 2px var(--cm-141e3c-1, rgba(20,30,60,.10)); }

/* дорожка (контейнер) */
.cc-seg {
  display: inline-flex; align-items: center; gap: 0;
  padding: 3px; border-radius: 12px;
  background: var(--seg-track, #1e222b); border: 1px solid var(--line); box-shadow: none;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
/* сегменты (элементы) */
.cc-seg > * {
  position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* 🔴🔴 СРЕД-33 · min-width: AUTO, А НЕ 0. `flex: 1 1 0` делит дорожку поровну, и с
     `min-width: 0` кнопка спокойно становилась УЖЕ собственной подписи; обрезки нет
     (`overflow: visible`) + `white-space: nowrap` → подпись рисовалась ПОВЕРХ соседа. */
  margin: 0; padding: 7px 14px; min-width: auto;
  border: 1px solid transparent; border-radius: 9px; outline: none;
  background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 530; line-height: 18px;
  white-space: nowrap; cursor: pointer; -webkit-appearance: none; box-shadow: none;
  transition: color var(--dur-1, 120ms) ease, background var(--dur-1, 120ms) ease, box-shadow var(--dur-1, 120ms) ease;
}
.cc-seg > *:hover:not(.on):not(.active) { color: var(--text-dim, #9aa4b2); }
/* iOS-разделитель между двумя НЕактивными сегментами */
.cc-seg > *:not(.on):not(.active) + *:not(.on):not(.active)::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--seg-div, rgba(255,255,255,.08));
}
/* активный сегмент = приподнятый thumb */
.cc-seg > *.on, .cc-seg > *.active {
  background: var(--seg-thumb, var(--cm-323847, #323847)); color: var(--text); font-weight: 640;
  border-color: var(--seg-thumb-bd, rgba(255,255,255,.09));
  box-shadow: var(--seg-thumb-sh, 0 1px 1px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06));
}
.cc-seg svg.ic, .cc-seg .ic { width: 15px; height: 15px; flex: none; }

/* ── РАЗМЕР и МЕСТО: два ОРТОГОНАЛЬНЫХ модификатора канона (CLIE-505) ──
     .cc-seg           — крупный, страничный пикер
     .cc-seg-md        — В СТРОКУ: ровно высота соседних полей/кнопок (--ctl-h)
     .cc-seg-sm        — КОМПАКТНЫЙ: строка списка, шапка панели, над композером
     .cc-seg-inset     — лежит ВНУТРИ поля ввода/инсета */
.cc-seg-md, .cc-seg-sm { flex: 0 0 auto; box-sizing: border-box; }
.cc-seg-md > *, .cc-seg-sm > * { flex: 0 0 auto; }
.cc-seg-md { align-self: stretch; }   /* стоит РЯДОМ с полем → высота ряда */
.cc-seg-sm { align-self: center; }    /* компактный → своя высота, по центру строки */

.cc-seg-md { min-height: var(--ctl-h, 34px); padding: 2px; border-radius: var(--ctl-r, 10px); }
.cc-seg-md > * {
  padding: 0 12px; border-radius: calc(var(--ctl-r, 10px) - 3px);
  font-size: var(--ctl-fs, 13px); line-height: calc(var(--ctl-h, 34px) - 8px);
}
.cc-seg-sm { min-height: 24px; padding: 2px; border-radius: var(--r-sm, 8px); }
/* Лежит на инсете (поле ввода = --panel-2 = --seg-track) → дорожку углубляем, иначе
   сегмент сливается с полем и перестаёт читаться как переключатель (грабля CLIE-469). */
.cc-seg-inset { background: color-mix(in srgb, var(--text) 5%, var(--seg-track, #1e222b)); }
.cc-seg-sm > * {
  padding: 0 9px; border-radius: calc(var(--r-sm, 8px) - 2px);
  font-size: 12px; line-height: 18px;
}

/* ── 🔴 СРЕД-33 · СЕГМЕНТ, КОТОРОМУ НЕ ХВАТИЛО ШИРИНЫ ──
   Ступень 1 `.tight` — ужать ВОЗДУХ, подписи целы; ступень 2 — честно прокрутить и
   СКАЗАТЬ об этом подтаявшим краем (бегунок в продукте прозрачен, пока не навели мышь,
   CLIE-620). Классы вешает ОДНА функция `ccSegFit()` в app.js по реестру `SEG_FIT_SEL`.
   🔴 У гостя своей `ccSegFit` нет — тогда эти классы просто не появляются, и сегмент
   честно прокручивается (`overflow-x:auto` у дорожки выше). Деградация мягкая. */
.cc-segfit.tight > * { padding-left: 6px; padding-right: 6px; gap: 4px; }
.cc-segfit.more-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.cc-segfit.more-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
  mask-image: linear-gradient(to right, transparent 0, #000 22px);
}
.cc-segfit.more-l.more-r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

/* ══════════════ РАМА ПАНЕЛИ ИНТЕРАКТИВА ══════════════
   Гостевая страница рисует панель ТОЙ ЖЕ разметкой и с теми же id — это РАЗНЫЕ документы,
   поэтому одинаковые id законны, и селектор остаётся ОДИН на оба бандла.
   🔴 ЧЕГО ЭТИ ПРАВИЛА ЖДУТ ОТ ХОЗЯИНА СТРАНИЦЫ (селекторы не переписаны — сказано вслух):
   • `.gcx-panel` — `position: absolute`, значит ей нужен ПОЗИЦИОНИРОВАННЫЙ предок. У
     сотрудника это `.groupcall-overlay`/`.call-box`; у гостя — его собственная рама
     комнаты, и она обязана быть `position: relative|absolute|fixed`.
   • `.gcx-seg`/`.gcx-seg-b` дают ТОЛЬКО раскладку. Сам вид сегмента — канон `.cc-seg`
     (+`.cc-seg-md`), и он живёт в `style.css`: у гостя его НЕТ. Панель ниже задаёт `--seg-*`
     под тёмное стекло, но без самого канона переключатель разделов будет голыми кнопками.
   • `.gcx-panel .gc-people-x` только ПЕРЕПОЗИЦИОНИРУЕТ крестик; его базовый вид (`style.css`)
     у гостя тоже отсутствует. */
.gcx-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 12;
  width: min(360px, 94vw); display: flex; flex-direction: column;
  background: var(--cm-12151c-94, 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 var(--ease), opacity .16s var(--ease);
  /* Оверлей всегда тёмный → фиксируем тёмную шкалу токенов ЛОКАЛЬНО. Так живые
     карточки задач (.tw-row из renderWsList) читаются и в светлой теме приложения,
     и нам не нужен второй, «звонковый» рендер списка задач.
     🔴 Для гостя это ещё важнее: он объявляет СВОИ токены (у него `:root` светлый), и
     без этой локальной шкалы панель взяла бы светлые чернила на тёмное стекло. */
  --bg: #0f1115; --panel: var(--cm-171a21, #171a21); --panel-2: #1e222b; --panel-3: #262b36;
  --line: #2a2f3a; --line-strong: #353b48; --border: #2a2f3a;
  --text: #e6e9ef; --muted: #8b93a3; --text-dim: #9aa4b2;
  --primary: var(--cm-667eea, #667eea); --primary-2: var(--cm-8b9cf5, #8b9cf5); --primary-hi: var(--cm-7b8bf1, #7b8bf1); --accent: var(--cm-667eea, #667eea);
  --acc-fill: var(--primary); --acc-fill-hi: var(--primary-hi); /* своя шкала: заливка под белым — своя */
  --input-bg: #141821; --surface: var(--cm-171a21, #171a21); --surface2: #1e222b;
  --hover: rgba(230,233,239,.05); --active: rgba(230,233,239,.09); --sel: var(--cm-667eea-16, rgba(102,126,234,.16));
  --info: #7ea6f5; --info-soft: var(--cm-667eea-16, rgba(102,126,234,.16));
  --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);
  --urg-overdue: #F2607A; --urg-overdue-soft: rgba(242,96,122,.14); --urg-overdue-ink: var(--urg-overdue);
  --urg-today: #E5A23C; --urg-today-soft: rgba(229,162,60,.14);
  --urg-done: #5DCAA5; --urg-done-soft: rgba(93,202,165,.13);
  --mine: var(--cm-2b3553, #2b3553); --seg-track: #1e222b; --seg-thumb: var(--cm-323847, #323847);
  /* CLIE-505: тёмную шкалу сегмента дотягиваем ЦЕЛИКОМ — иначе канон .cc-seg возьмёт
     рамку/тень thumb из СВЕТЛОЙ палитры приложения (ровно та грабля, что была у К6). */
  --seg-thumb-bd: rgba(255,255,255,.09); --seg-div: rgba(255,255,255,.08);
  --seg-thumb-sh: 0 1px 1px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.gcx-panel.hidden { display: flex !important; transform: translateX(102%); opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .gcx-panel { width: 100%; border-left: 0; } }

.gcx-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
}
/* CLIE-505: разделы интерактива = канон .cc-seg + .cc-seg-md. Панель звонка задаёт
   свои --seg-* (тёмное стекло) выше, поэтому канон садится в её палитру сам.
   Здесь — только раскладка: сегмент занимает всю ширину шапки шторки. */
.gcx-seg { display: flex; flex: 1; min-width: 0; }
/* СРЕД-33: без `min-width: 0` — разделы интерактива в шторке звонка («Опросы»,
   «Реакции», «Вопросы») тоже не имеют права стать уже своей подписи. */
.gcx-seg > .gcx-seg-b { flex: 1 1 0; }
.gcx-seg-n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 650;
}
.gcx-panel .gc-people-x { position: static; flex: 0 0 auto; }

.gcx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.gcx-body::-webkit-scrollbar { width: 8px; }
.gcx-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.gcx-body.hidden { display: none; }
.gcx-sub { font-size: 11.5px; font-weight: 650; letter-spacing: .03em; color: #8b93a3; text-transform: uppercase; }

/* ── Поле ввода панели: ОДИН контрол и на вопрос Q&A, и на композер опроса ── */
.gcx-input {
  width: 100%; min-width: 0; padding: 9px 11px; font-size: 13px; color: #e6e9ef; font-family: inherit;
  background: rgba(255,255,255,.05); border: 1px solid var(--gc-hair, rgba(255,255,255,.08)); border-radius: 10px; outline: none;
  transition: border-color var(--dur-1, 120ms) var(--ease), background var(--dur-1, 120ms) var(--ease);
}
.gcx-input::placeholder { color: #6f7789; }
.gcx-input:focus { border-color: var(--primary); background: rgba(255,255,255,.09); }

/* ── Композер Q&A: спросить может и гость ── */
.gcx-compose { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.08); padding: 9px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.gcx-compose.hidden { display: none; }
.gcx-input-row { display: flex; align-items: center; gap: 7px; }
.gcx-send {
  appearance: none; border: 0; cursor: pointer; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--primary); color: #fff;
  transition: background var(--dur-1, 120ms) var(--ease), transform var(--dur-1, 120ms) var(--ease);
}
.gcx-send:hover { background: var(--primary-hi); }
.gcx-send:active { transform: scale(.94); }
.gcx-send svg.ic { width: 16px; height: 16px; }
.gcx-send:focus-visible { outline: 2px solid var(--primary-2, var(--cm-8b9cf5, #8b9cf5)); outline-offset: 2px; }
.gcx-anon { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9aa3b4; cursor: pointer; user-select: none; }
.gcx-anon.hidden { display: none; }
.gcx-anon input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* ══════════════ МЕЛКАЯ КНОПКА ДЕЙСТВИЯ ══════════════
   `.st-mini` — «Завершить» у опроса, «Отвечено»/«Скрыть» у вопроса, «Пауза»/«Засечь» у
   повестки: её рисует САМ `ccroom.js`, поэтому она общая и живёт здесь. В разметке
   `app.js` она встречается тоже — это не дубль, объявление одно на продукт.
   Контекстная надстройка `.st-air .st-mini` осталась в `style.css`: `.st-air` — ряд эфира
   основного клиента, у гостя такой разметки нет. */
.st-mini {
  appearance: none; border: 1px solid var(--gc-hair-2, rgba(255,255,255,.14)); 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; }

/* ══════════════ ОБЩИЕ МЕЛОЧИ ПАНЕЛИ ══════════════ */
.gcx-empty { margin: auto 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: #8b93a3; padding: 22px 8px; }
.gcx-empty-top { margin: 0 0 4px; padding: 12px 8px; }
.gcx-meta { font-size: 11.5px; color: #8b93a3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Опрос / квиз ──
   🔴🔴 ЧЕРНИЛА КАРТОЧКИ — ТОКЕНЫ, А НЕ ПРИБИТЫЕ ЦВЕТА (найдено РЕНДЕРОМ 30.09.2026).
   Замер: в переписке СВЕТЛОЙ темы вопрос и варианты были почти невидимы — карточка несла
   цвета ТЁМНОГО СТЕКЛА созвона (#eef1f7 / #e6e9ef / #9aa3b4) на светлом пузыре. По коду всё
   выглядело верным, и зелёный линт этого не ловит: цвет прибит, а не взят у поверхности
   (канон `theme-contrast-runtime`, «видно ли» решает РЕНДЕР).
   Значения ПО УМОЛЧАНИЮ — прежние стеклянные, поэтому созвон не изменился ни на байт; место
   переопределяет ТОЛЬКО ПАЛИТРУ (`.poll-card` в style.css берёт роли темы --text/--muted/
   --panel-2/--line) — ровно как требует правило одного опроса: «место — только ПАЛИТРА». */
.gcx-poll { display: flex; flex-direction: column; gap: 10px; }
.gcx-poll-q { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gcp-ink, #eef1f7); word-break: break-word; }
.gcx-opts { display: flex; flex-direction: column; gap: 6px; }
.gcx-opt {
  position: relative; appearance: none; cursor: pointer; overflow: hidden; text-align: left; font-family: inherit;
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px;
  border: 1px solid var(--gcp-opt-bd, var(--gc-hair, rgba(255,255,255,.08)));
  background: var(--gcp-opt-bg, rgba(255,255,255,.04)); color: var(--gcp-opt-ink, #e6e9ef);
  transition: border-color var(--dur-1, 120ms) var(--ease), background var(--dur-1, 120ms) var(--ease), transform var(--dur-1, 120ms) var(--ease);
}
.gcx-opt:hover:not(:disabled) { border-color: var(--gcp-opt-bd-h, var(--gc-hair-2, rgba(255,255,255,.14))); background: var(--gcp-opt-bg-h, rgba(255,255,255,.07)); }
.gcx-opt:active:not(:disabled) { transform: scale(.99); }
.gcx-opt:disabled { cursor: default; }
.gcx-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gcx-opt-bar {
  position: absolute; inset: 0 auto 0 0; z-index: 0; border-radius: 11px;
  background: linear-gradient(90deg, var(--cm-667eea-26, rgba(102,126,234,.26)), var(--cm-8b9cf5-14, rgba(139,156,245,.14)));
  transition: width var(--dur-2, 200ms) var(--ease);
}
.gcx-opt-t { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; word-break: break-word; }
.gcx-opt-n { position: relative; z-index: 1; flex: 0 0 auto; font-size: 11.5px; color: var(--gcp-num, #9aa3b4); font-variant-numeric: tabular-nums; }
.gcx-opt.mine { border-color: var(--cm-667eea-55, rgba(102,126,234,.55)); }
.gcx-opt.mine .gcx-opt-t { font-weight: 600; }
.gcx-opt.win { border-color: var(--cm-8b9cf5-45, rgba(139,156,245,.45)); }
.gcx-opt.win .gcx-opt-n { color: var(--cm-cfd6ff, #cfd6ff); font-weight: 650; }
.gcx-opt.right { border-color: rgba(93,202,165,.55); }
.gcx-right { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #5DCAA5; margin-left: 6px; }
.gcx-poll-foot { display: flex; align-items: center; gap: 8px; }
.gcx-poll-foot .st-mini { margin-left: auto; flex: 0 0 auto; }

/* ── Q&A ── */
.gcx-qa {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--gc-hair, rgba(255,255,255,.08));
  transition: border-color var(--dur-1, 120ms) var(--ease), background var(--dur-1, 120ms) var(--ease), opacity var(--dur-1, 120ms) var(--ease);
}
.gcx-qa:hover { border-color: var(--gc-hair-2, rgba(255,255,255,.14)); background: rgba(255,255,255,.07); }
.gcx-qa.answered { opacity: .72; border-color: rgba(93,202,165,.30); }
.gcx-qa.dismissed { opacity: .45; }
.gcx-qa.pending { opacity: .6; }
.gcx-qa-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gcx-qa-t { font-size: 13px; line-height: 1.42; color: #e6e9ef; word-break: break-word; }
.gcx-qa-m { font-size: 11px; color: #8b93a3; }
.gcx-up {
  appearance: none; cursor: pointer; flex: 0 0 auto; width: 34px; min-height: 40px; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 9px; border: 1px solid var(--gc-hair, rgba(255,255,255,.08)); background: rgba(255,255,255,.04);
  color: #9aa3b4; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; font-family: inherit;
  transition: background var(--dur-1, 120ms) var(--ease), color var(--dur-1, 120ms) var(--ease), border-color var(--dur-1, 120ms) var(--ease), transform var(--dur-1, 120ms) var(--ease);
}
.gcx-up svg.ic { width: 14px; height: 14px; }
.gcx-up:hover { background: rgba(255,255,255,.10); color: #e6e9ef; }
.gcx-up:active { transform: scale(.94); }
.gcx-up.on { background: var(--cm-667eea-2, rgba(102,126,234,.20)); border-color: var(--cm-667eea-52, rgba(102,126,234,.52)); color: var(--cm-cfd6ff, #cfd6ff); }
.gcx-up:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gcx-qa-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }

/* ── Плашка «Сейчас обсуждаем» (повестка) ──
   Сам список повестки — живые карточки задач (.tw-row) и живёт он в шторке основного
   клиента, поэтому `.gcx-agenda*` остались в style.css. Общая здесь только ПЛАШКА. */
.gcx-focus {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 12px; margin-bottom: 2px;
  background: var(--cm-667eea-12, rgba(102,126,234,.12)); border: 1px solid var(--cm-667eea-3, rgba(102,126,234,.30));
}
.gcx-focus-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cm-8b9cf5, #8b9cf5); flex: 0 0 100%; }
.gcx-focus-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #eef1f7; word-break: break-word; }
.gcx-focus-timer { flex: 0 0 auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--cm-cfd6ff, #cfd6ff); letter-spacing: .3px; }

/* ── Лазерная указка: лёгкий слой поверх сцены, кликов не ловит ── */
.gcx-pointer-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
/* Указок в кадре теперь может быть НЕСКОЛЬКО (её видят все и вести может любой), поэтому
   у каждой свой цвет по имени автора (--ptr-h ставит gcxPtrHue = CcRoom.nameHue, та же
   формула, что у цвета спикера в живом транскрипте). Дефолт 350 — «лазерный» красный. */
/* 🔴 ТОЧКА СТОИТ РОВНО НА ТОМ МЕСТЕ, КУДА ПОКАЗЫВАЮТ. Раньше здесь было
   `translate(-50%,-50%)` — центрировался ВЕСЬ РЯД «точка + подпись с именем», поэтому сама
   точка уезжала влево на пол-ширины подписи (замер стенда: цель 0.30 кадра, точка 0.255 —
   и тем сильнее, чем длиннее имя). По X смещаем на ПОЛОВИНУ ТОЧКИ (14px/2), по Y —
   на половину ряда: точка выровнена по его центру (align-items:center). */
.gcx-ptr { --ptr-h: 350; position: absolute; transform: translate(-7px, -50%); display: flex; align-items: center; gap: 7px; will-change: left, top; }
/* У правого края подпись уехала бы за кадр (у слоя overflow:hidden) — разворачиваем ряд,
   подпись уходит ВЛЕВО от точки, а точка остаётся на месте. */
.gcx-ptr.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
/* 🔴 Сцены без размера не бывает (ЗВОН-604·4): её спрятали (`.videos.sv-hidden`) или
   плитку схлопнуло — тогда точку НЕ РИСУЕМ ВОВСЕ, а не кладём её в угол окна. Узел жив
   (кадры идут, TTL свой) и вернётся сам, как только сцена снова на экране. */
.gcx-ptr.gcx-ptr-off { display: none; }
/* 🔴🔴 CLIE-1773 · ПАЛЕЦ ВЕДЁТ, А НЕ ЛИСТАЕТ. Владелец: «везде где рисую не сразу идет
   рисование пальцем… карта к конце на дозвоне, да вообще все остальные места». У указки на
   ТАЧСКРИНЕ беда та же, что у холста без `touch-action`: браузер читает протяжку как
   прокрутку и на первом же шаге присылает `pointercancel` — точка не едет вовсе либо
   обрывается. Класс `gcx-pointing` висит ровно на время режима.
   🔴 Селекторы называют именно СЦЕНУ, а не весь оверлей: действующее `touch-action`
   пересекается со ВСЕМИ предками, и `none` на оверлее убил бы прокрутку чата звонка.
   Гость кладёт класс на саму плитку показа, основной клиент — на оверлей. */
.gtile.gcx-pointing,
.groupcall-overlay.gcx-pointing .gtile.screen-share,
.call-overlay.gcx-pointing #remoteVideo,
.call-overlay.gcx-pointing #localVideo.screen { touch-action: none; }
.gcx-ptr-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #fff 0%,
    hsl(var(--ptr-h) 100% 66%) 45%, hsl(var(--ptr-h) 100% 60% / .16) 72%, transparent 78%);
  box-shadow: 0 0 14px 4px hsl(var(--ptr-h) 100% 62% / .45);
}
.gcx-ptr-n {
  font-size: 11px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 7px; white-space: nowrap;
  background: var(--cm-090b10-62, rgba(9,11,16,.62)); border: 1px solid hsl(var(--ptr-h) 90% 72% / .34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ══════════════ ХОЛСТ: АННОТАЦИИ ПОВЕРХ ПОКАЗА ЭКРАНА + ДОСКА ══════════════
   Один движок, один класс (штрихи рисует CcRoom.paintStroke — общая математика). */
/* ЗВОН-604·8 · пока человек РИСУЕТ поверх показа, кнопка ⛶ «свернуть» плитки лежит НАД холстом
   (холст 7, кнопка обычно 4). Нажатие на сам показ во время рисования — штрих, а не «свернуть»
   (CcRoom.tileClickIsMark), поэтому выход из закрепа обязан остаться кнопкой. */
.cc-ink-edit > .gt-collapse { z-index: 8; }

.cc-ink {
  position: absolute; inset: 0; z-index: 7;
  /* 🔴🔴 ЗВОН-701·3 · ХОЛСТ — ЗАМЕЩАЕМЫЙ ЭЛЕМЕНТ, И `inset:0` ЕГО НЕ РАСТЯГИВАЕТ.
     У абсолютно позиционированного replaced-элемента `width:auto` берётся из СОБСТВЕННОГО
     размера растра (CSS 2.1 §10.3.7), а `right`/`bottom` при этом игнорируются. Замер в
     живом Chromium: лист доски 1233×575, а холст внутри него — 288×144, то есть человек
     рисовал в углу «марки», а не на доске. Явные 100% — единственное, что чинит это для
     ОБОИХ бандлов сразу (доска гостя и аннотации поверх экрана). */
  width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; display: block;
}
.cc-ink.cc-ink-erase { cursor: cell; }
.cc-ink-board { border-radius: 16px; }
/* Инлайн-текст прямо на поверхности: набрал — ушёл фокусом — сохранилось. */
.cc-ink-text {
  position: absolute; z-index: 8; min-width: 120px; max-width: 60%;
  margin: 0; padding: 2px 6px; border: 0; border-radius: 8px; resize: none; overflow: hidden;
  font: 600 16px/1.28 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  background: rgba(8,10,14,.55); color: #fff; outline: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.35), 0 8px 24px -8px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  caret-color: currentColor;
}

/* ── Панель инструментов: появляется ТОЛЬКО когда режим рисования включён ───────── */
.cc-inkbar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 24;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: var(--cm-161921-86, rgba(22,25,33,.86)); border: 1px solid var(--gc-hair-2, rgba(255,255,255,.14)); border-radius: 16px;
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  animation: ccInkBarIn var(--dur-2, 200ms) var(--ease-spring, cubic-bezier(.34,1.4,.64,1)) both;
  max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center;
}
@keyframes ccInkBarIn { from { opacity: 0; transform: translate(-50%, 8px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.cc-inkbar.on-board { bottom: 96px; }
.cc-inkbar-g { display: flex; align-items: center; gap: 2px; }
.cc-inkbar-sep { width: 1px; align-self: stretch; margin: 4px 5px; background: var(--gc-hair-2, rgba(255,255,255,.14)); }
.cc-ink-b {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: #cfd5e2; cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease), color var(--dur-1, 120ms) var(--ease);
}
.cc-ink-b:hover { background: var(--gc-btn-h, rgba(255,255,255,.13)); color: #fff; }
.cc-ink-b.on { background: var(--acc-grad, linear-gradient(135deg, var(--cm-667eea, #667eea), var(--cm-764ba2, #764ba2))); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset; }
.cc-ink-b:focus-visible { outline: 2px solid var(--primary-2, var(--cm-8b9cf5, #8b9cf5)); outline-offset: 2px; }
.cc-ink-b svg.ic { width: 17px; height: 17px; }
.cc-ink-b[disabled], .cc-ink-b.busy { opacity: .55; pointer-events: none; }
.cc-ink-b.cc-ink-kb { width: auto; padding: 0 11px 0 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cc-ink-b.cc-ink-x:hover { background: rgba(239,68,68,.24); color: #ffd7d7; }
.cc-ink-c {
  width: 22px; height: 22px; margin: 0 1px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sw); cursor: pointer; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 0 0 1.5px rgba(255,255,255,.14);
  transition: transform var(--dur-1, 120ms) var(--ease), box-shadow var(--dur-1, 120ms) var(--ease);
}
.cc-ink-c:hover { transform: scale(1.1); }
.cc-ink-c.on { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.22); }
.cc-ink-c:focus-visible { outline: 2px solid var(--primary-2, var(--cm-8b9cf5, #8b9cf5)); outline-offset: 3px; }
/* Толщина пера: точка ровно того диаметра, каким ляжет линия — выбор глазами, а не «S/M/L». */
.cc-ink-w {
  width: 24px; height: 24px; margin: 0 1px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1, 120ms) var(--ease);
}
.cc-ink-w i { width: var(--d); height: var(--d); border-radius: 50%; background: #cfd5e2; display: block; }
.cc-ink-w:hover { background: var(--gc-btn-h, rgba(255,255,255,.13)); }
.cc-ink-w.on { background: var(--grad, linear-gradient(135deg, var(--cm-667eea, #667eea), var(--cm-764ba2, #764ba2))); }
.cc-ink-w.on i { background: #fff; }
.cc-ink-w:focus-visible { outline: 2px solid var(--primary-2, var(--cm-8b9cf5, #8b9cf5)); outline-offset: 2px; }
/* 🔴 Кнопка, которой сейчас нечего делать, ГАСНЕТ, но остаётся на месте: пропавшая
   кнопка читается как «сломалось» (правило шапки CLIE-642, то же в приложении). */
.cc-ink-b.off { opacity: .38; pointer-events: none; }
/* «Очистить»: моё / всё — разные действия, второе за осознанным вторым шагом. */
.cc-ink-clr { position: relative; display: inline-flex; }
.cc-ink-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; min-width: 168px; padding: 5px; gap: 2px; z-index: 12;
  background: rgba(20,24,33,.98); border: 1px solid var(--gc-hair-2, rgba(255,255,255,.14));
  border-radius: 12px; box-shadow: 0 18px 42px -16px rgba(0,0,0,.75);
}
.cc-ink-menu.hidden { display: none; }
.cc-ink-menu button {
  appearance: none; border: 0; background: transparent; color: #e7ebf3; cursor: pointer;
  font-size: 13px; text-align: left; padding: 8px 10px; border-radius: 8px; white-space: nowrap;
}
.cc-ink-menu button:hover { background: var(--gc-btn-h, rgba(255,255,255,.13)); }
.cc-ink-menu button:last-child { color: #ffb4b4; }

/* ── ДОСКА: холст на всю сцену (подложку рисует сам canvas) ────────────────────── */
.cc-board {
  position: absolute; left: 14px; right: 14px; top: 62px; bottom: 92px; z-index: 9;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--gc-hair-2, rgba(255,255,255,.14));
  box-shadow: 0 32px 80px -28px rgba(0,0,0,.8);
  animation: ccPanelIn var(--dur-2, 200ms) var(--ease) both;
}
/* 🔴 `ccPanelIn` объявлен ЗДЕСЬ намеренным дублем: в `style.css` он остаётся (там на нём
   живут ещё ЧЕТЫРЕ поверхности основного клиента — со-просмотр, подгруппы, пристыкованный
   документ), а гостевая страница `style.css` не грузит вовсе. Тело кадров одинаковое
   байт-в-байт; правится в обоих местах вместе. Селекторов это не задваивает. */
@keyframes ccPanelIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ══════════════ ЖИВЫЕ СУБТИТРЫ (строка транскрипта) ══════════════
   Строку строит `CcRoom.ccLineHtml`: `<div class="ccr-cc-l[ partial]" style="--sp-h:N">`
   → `<span class="ccr-cc-w">Имя</span><span class="ccr-cc-t">текст</span>`.
   `--sp-h` — оттенок спикера по ЕГО ИМЕНИ (CcRoom.nameHue): ОДНА формула на продукт,
   та же, что у указки (`--ptr-h`), у аватара реплики в записи встречи (`--h`) и во
   Flutter (`TxLine.hue`). Один человек = один цвет везде. */
.ccr-cc-l {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; min-width: 0;
  font-size: 14px; line-height: 1.46;
  transition: opacity var(--dur-1, 120ms) var(--ease);
}
/* 🔴 Имя — ЦВЕТНОЕ, но не «прибитое»: чистый `hsl(H 70% 45%)` читается на светлой
   поверхности и тонет на тёмной (жёлтые оттенки — наоборот). Поэтому оттенок
   ПОДМЕШИВАЕТСЯ к текущим чернилам темы (`--text`): в светлой теме он темнеет, в тёмной
   светлеет — и остаётся узнаваемо цветным в обеих. Обе страницы объявляют `--text` сами,
   поэтому вторая, «гостевая» формула не нужна (канон контраста CLIE-888: чернила меряются
   к СВОЕЙ поверхности, а не к холсту). Первая строка — фолбэк для движков без color-mix. */
.ccr-cc-w {
  flex: 0 0 auto; font-weight: 600; font-size: 13px; letter-spacing: .01em;
  color: hsl(var(--sp-h, 214) 70% 45%);
  color: color-mix(in oklab, hsl(var(--sp-h, 214) 70% 45%) 55%, var(--text));
}
.ccr-cc-t { flex: 1 1 auto; min-width: 0; color: var(--text); word-break: break-word; }
/* Реплика ещё не финализирована распознаванием: она ЖИВАЯ и вот-вот поменяется, поэтому
   приглушена — но НЕ спрятана и НЕ курсивом: строка не имеет права прыгать по ширине,
   когда движок дошлёт финальный вариант.
   🔴 Замер БРАУЗЕРОМ (композит по пикселю, обе темы, 9 оттенков имени): при 0.7 худший
   оттенок имени даёт 2.88:1 в светлой и 3.15:1 в тёмной, текст — 6.50:1 и 7.55:1.
   То есть строка ЧИТАЕМА (пол «видно вообще» = 1.35, канон CLIE-888), но заметно тише
   финальной — а это и есть её единственный смысл. Под AA 4.5 имя тут уходит СОЗНАТЕЛЬНО:
   состояние живёт доли секунды и через мгновение перерисовывается финальной строкой на
   полной непрозрачности. Опускать ниже 0.7 нельзя — там имя проваливается за 2.6:1. */
.ccr-cc-l.partial { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .gcx-opt-bar, .gcx-opt, .gcx-qa, .gcx-up, .gcx-panel, .gcx-seg-b, .gcx-input, .gcx-send,
  .st-mini, .cc-ink-b, .cc-ink-c, .cc-ink-w, .ccr-cc-l { transition: none; }
  .cc-inkbar, .cc-board { animation: none; }
}