/* ============================================================
   eco-week-b.css — волна B (W012/W013/W014, 2026-09-09)
   ЕДИНЫЙ слой дизайн-системы волны B: токены + консистентность
   + тёмная тема + мобильная оболочка + motion-фундамент (W018).
   Подключается ПОСЛЕСЛЕДНИМ <link> в messenger.html (после
   eco-max-std5). Откат волны = снять link (продукт возвращается
   к состоянию 20260909-std5).
   Правила слоя:
   • НОВЫЕ имена токенов — переопределений чужих нет (§0).
   • Специфичность — паритетно vb/skin-v2/dk: одинаковые селекторы
     здесь позже по каскаду → !important не нужен (ни одного в слое).
   • Пузыри НЕ трогаем (семья --vb-bubble-* консистентна — план §2.1).
   • Сетку --sp-* применяем ТОЛЬКО в новых правилах этого слоя.
   Канон значений: eco-skin-v2.css §1/§1b (второй палитры нет).
   ============================================================ */

/* ---------- §0. Токены волны B (W012) ---------- */

:root {
  /* сетка отступов брифа 4/8/12/16/24/32 — только для НОВЫХ правил */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;

  /* минимальное касание (бриф §1) */
  --tap: 44px;

  /* гармоника радиусов: доминанта каскада 12/14/16/18/20 → 12/16/20;
     pill (999px) и круг (50%) остаются литералами */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-bubble: 18px; /* фактический стандарт пузырей (перенос смысла app) */

  /* чернила на акценте: легализация канона dk — в dark белый на
     #6b96ff даёт <3:1, канон = тёмный текст */
  --accent-ink: #ffffff;

  /* партнёр градиентов акцента (вторая остановка linear-gradient) */
  --accent-grad-2: #3b82f6;

  /* сигнальный зелёный (точки/галки «в сети/отправлено») — одно
     значение вместо дублей #2fbf83/#2fbe8e; для НОВЫХ правил */
  --ok: #2fbf83;

  /* скрим под модалками — короткое имя --eco-scrim (старое имя живёт) */
  --scrim: rgba(15, 23, 42, 0.45);

  /* типографика для НОВЫХ правил (запрет полу-пикселей в новом коде) */
  --font-size-xs: 11px;
  --font-size-s: 12px;
  --font-size-m: 13px;
  --font-size-l: 15px;
  --font-size-xl: 17px;
  --lh-m: 1.45;

  /* motion-токены (бриф §8; фундамент под событийные анимации W018).
     Старые --motion-* (tokens.css) остаются для существующих правил. */
  --dur-fast: 120ms; /* короткий отклик кнопки/строки 100–160 мс */
  --dur-menu: 180ms; /* меню/небольшая панель 160–220 мс */
  --dur-view: 240ms; /* переход между представлениями 200–280 мс */
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* The secondary history reader belongs to the same chat navigation. */
#vy-history-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line, #dce2ed);
  border-radius: 12px;
  background: var(--surface-2, #edf1f9);
  color: var(--text, #182237);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
#vy-history-launch:hover { border-color: var(--accent, #2547db); }
#vy-history-launch:focus-visible { outline: 3px solid var(--accent, #2547db); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #vy-history-launch { transition: none; } }

html[data-theme="dark"] {
  --accent-ink: #0b1220;
  --accent-grad-2: #2563eb;
  --scrim: rgba(4, 8, 16, 0.6);
}

/* ---------- §1. Консистентность: акцент и чернила (W012) ----------
   Точечные переопределения по карте конфликтов w011 §4: селекторы
   повторяют eco-max-dk / skin-v2 / vg / va 1:1 (паритет специфичности,
   слой позже → источник значения один: токен --accent-ink).
   #fff на var(--accent) в dark без этого блока = 2.83:1 (скан dk). */

.btn-primary { color: var(--accent-ink); }
html[data-theme="dark"] .btn-primary { color: var(--accent-ink); }

.vg-btn--primary { color: var(--accent-ink); }
html[data-theme="dark"] .vg-btn--primary { color: var(--accent-ink); }

/* :not(#btn-send) — ID-паритет с dk/vb: композерский #btn-send сидит
   на #2563eb (vb), там белый валид (5.3:1) и его не трогаем */
.btn-send:not(#btn-send) { color: var(--accent-ink); }
html[data-theme="dark"] .btn-send:not(#btn-send) { color: var(--accent-ink); }

/* «Новый чат» (skin-v2: акцент + #fff без dark-варианта) */
#btn-new-chat.btn-icon { color: var(--accent-ink); }
html[data-theme="dark"] #btn-new-chat.btn-icon { color: var(--accent-ink); }

/* пустое состояние «Звонков» (ve): сидело на светлом акценте с
   приглушённым текстом; канон = акцент + чернила */
.eco-ve-empty-cta { background: var(--accent); color: var(--accent-ink); }
.eco-ve-empty-cta span,
.eco-ve-empty-cta svg { color: var(--accent-ink); }
.eco-ve-empty-cta:hover { background: var(--accent-strong); color: var(--accent-ink); }
html[data-theme="dark"] .eco-ve-empty-cta span,
html[data-theme="dark"] .eco-ve-empty-cta svg { color: var(--accent-ink); }

/* чекбокс выбранного участника (VG «Новый чат») */
.vg-pick.is-sel .vg-pick__check { color: var(--accent-ink); }
html[data-theme="dark"] .vg-pick.is-sel .vg-pick__check { color: var(--accent-ink); }

/* активная навигация (skin-v2 уже давал #fff/#0b1220 — легализуем) */
.sidenav__btn.is-active,
.bottomnav__btn.is-active { color: var(--accent-ink); }
html[data-theme="dark"] .sidenav__btn.is-active,
html[data-theme="dark"] .bottomnav__btn.is-active { color: var(--accent-ink); }

/* папки-чипы списка чатов (va): тот же паттерн акцент+чернила */
.va-chip.is-active { color: var(--accent-ink); }
.va-chip.is-active .va-chip__count { color: var(--accent-ink); }
html[data-theme="dark"] .va-chip.is-active,
html[data-theme="dark"] .va-chip.is-active .va-chip__count { color: var(--accent-ink); }

/* ---------- §2. Тёмная тема — фиксация решений (W013) ----------
   1) Токенный фундамент dark полный (skin-v2 §1b, 28 свойств,
      3 уровня поверхностей) — не дублируем, не ломаем.
   2) Оффлайн-баннер: тёмный --vi-banner-bg уже есть в eco-max-vi.css
      (щель T2 закрыта соседним слоем) — здесь только фиксация.
   3) «Ночной канон» by design (НЕ переводить на тему): #view-clips
      (vd+cl), список звонков ve, оверлей звонка calls, дайлер dial,
      карточка контакта cc1, фотовьюер — всегда тёмные.
   4) Семантика «Системная»: материализуется inline-скриптом entry при
      следующей загрузке; live-резолв без reload НЕ включаем в r2 —
      тумблер настроек (settings.js) не трогаем.
   5) meta theme-color динамически — js/theme.js (applyTheme). */

/* ---------- §3. Мобильная оболочка (W014) ----------
   --tap на тач-цели, НЕ покрытые eco-max-mb.css (он ≤860, геометрия).
   Не пере-стилизуем: только минимальная геометрия. */

/* «Новый чат» 40/42px → 44 на мобиле (паритет ID-специфичности skin-v2) */
@media (max-width: 860px) {
  #btn-new-chat.btn-icon {
    width: var(--tap);
    height: var(--tap);
  }

  /* текстовые кнопки шапок («Создать» и т.п.) — высота касания */
  .btn-text {
    min-height: var(--tap);
  }
}

/* кнопки тоста (mute/закрыть) 28px визуально → хит-зона 44px без
   изменения размера: абсолютный ::after, из потока, клипы тостом */
.vh-toast__btn { position: relative; }
.vh-toast__btn::after {
  content: "";
  position: absolute;
  inset: calc((var(--tap) - 28px) / -2);
}

/* ---------- §M. Motion-фундамент (задел W018, бриф §8) ----------
   Только каркас: токены (§0) + базовые transition там, где их не было
   (.chat-row / .vg-btn / .btn-primary уже покрыты --motion-* 140ms —
   не дублируем и не затираем их списки свойств). Событийные анимации
   (сообщение/реакция/меню) — W018. */

.btn-icon,
.btn-text {
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* press-расширение W018 (бриф §8 «Кнопка и строка», :active scale 0.97).
   .btn-icon / .btn-send уже 0.94 (app.css), .vg-btn 0.97 (vg),
   .chat-row 0.986 (skin-v2), композер 0.94 (vb) — их НЕ дублируем. */
.btn-text:active,
.btn-primary:not(:disabled):active {
  transform: scale(0.97);
}

/* у .btn-primary не было transition вовсе — hover раньше менялся мгновенно */
.btn-primary {
  transition:
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

/* ---------- §M.2. Событийные анимации W018 (бриф §8) ----------
   ИНВЕНТАРИЗАЦИЯ (чтение js+css, verified computed): бо́льшая часть
   событийных анимаций УЖЕ реализована парой max-ui.js (?v=2, загружен
   в entry) + max-ui.css (?v=3) через КЛАСС НОВИЗНЫ .maxi-new, который
   MutationObserver вешает на вставленные узлы (вариант (b) задания):
   • новое сообщение — .msg.maxi-new.msg--out .bubble → maxi-msg-out
     0.3s / .msg--in → maxi-msg-in 0.26s (transform+opacity, both);
   • реакция — .bubble-react.maxi-new → maxi-react-bounce 0.32s;
   • меню сообщения — .msg-act__picker.react-picker, .msg-act__menu →
     maxi-pop-in 0.22s (opacity+scale+translate);
   • переход видов — .view:not(.hidden) → maxi-view-in 0.26s
     (fade + translateX(14px), единое направление).
   Эти места НЕ дублируем (двойная анимация = лишнее движение) и НЕ
   переопределяем (без !important-войны со слоем, который живой).
   Reduced-motion: skin-v2 §16 гасит .view/.toast/.msg.maxi-new/
   .bubble-react.maxi-new через animation:none !important; прочие
   maxi-* сжимает универсальный блок ниже. Состояния остаются видимыми
   (анимации не прячут контент: конечный кадр = естественное состояние).
   Закрытия (removal узла / наложение .hidden=display:none) мгновенны —
   CSS удаления не видит; бриф §8: невидимого перехватчика кликов нет.
   Ниже — только РЕАЛЬНЫЕ пробелы: диалог askConfirm/askText и тост. */

/* Диалог askConfirm/askText (.vy-ask): корень один, показ = снятие
   [hidden] (display:none → grid) → анимация перезапускается при каждом
   открытии. Карточка — нижняя панель: подъём 8px; скрим — проявление. */
@keyframes wkb-menu-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.vy-ask:not([hidden]) .vy-ask__card {
  animation: wkb-menu-in var(--dur-menu) var(--ease);
}

@keyframes wkb-fade-in {
  from {
    opacity: 0;
  }
}

.vy-ask:not([hidden]) .vy-ask__scrim {
  animation: wkb-fade-in var(--dur-menu) ease-out;
}

/* Тост приложения #toast (format.js): показ = снятие .hidden →
   анимация при каждом появлении. Повторный toast() при видимом тосте
   класс не меняет — без пере-анимации (текст просто обновляется).
   Базовый transform translateX(-50%) сохранён в кадрах.
   (vh-toast уведомлений уже анимирован в eco-max-vh.css — не трогаем.) */
#toast.toast:not(.hidden) {
  animation: wkb-toast-in var(--dur-menu) var(--ease);
}

@keyframes wkb-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

/* Также уже анимированы (не дублируем):
   • .va-ctx (папки/контекст чата) — eco-max-va.css (va-pop 0.16s);
   • листы .vm-sheet/.f08-card/.cmdk/.vycmdk + scrim — messenger-shellrail1-sheets.css;
   • .gr-toast-fallback — eco-max-gr.css (transition по .is-open);
   • #btn-send (vbSendPop), react-picker__btn:hover — eco-max-vb.css.
   НЕ анимируем (бриф §8): сортировку списка, декоративный фон,
   бесконечные пульсации. */

/* универсальный reduced-motion: движение гасим, смысл/статусы остаются */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; /* гасит бесконечные shimmer */
    transition-duration: 0.01ms !important;
  }
}

/* ---------- §5. W015/W016/W017 — список, композер, меню (CSS-часть) ----------
   Только точечные дополнения к существующей структуре (DOM не менялся).

   W015 (список): активная строка = brand-soft + inset-полоса акцента,
   hover-отклик и :active scale уже в skin-v2; ellipsis имени — app.css.
   Здесь — страховка «метки не вытесняют»: mute-значок и счётчик
   непрочитанного не сжимаются (флекс-элементы по умолчанию могут). */
.chat-row__muted,
.chat-row__badge {
  flex-shrink: 0;
}

/* W017 (меню/диалоги): не обрезаются на низких экранах (320 и меньше)
   — ограничение высоты + внутренний скролл. Радиусы/тени уже из
   токенов (vb-семья / --shadow-pop); скрим .vy-ask уже на --eco-scrim
   (skin-v2:957) — дубль не нужен. */
.msg-act__menu,
.msg-act__picker,
.va-ctx,
.vy-ask__card {
  max-height: calc(100dvh - 2 * var(--sp-12, 12px));
  overflow-y: auto;
}

/* W016 (композер): проверено без правок — в покое поле 50px + паддинги
   ≈72px (vb), textarea растёт JS-автосайзом до 120px (max-height 148px,
   скролл встроен), кнопки дифференцированы (attach — приглушённая,
   mic/send — акцентный шар), отправка скрывается без текста. */

/* ---------- §6. W019 — клавиатура и увеличенный текст (фиксация) ----------
   Tab-фокус: ГЛОБАЛЬНЫЙ :focus-visible из eco-skin-v2.css:120
   (outline: 2px solid var(--accent); offset 2px) покрывает все кнопки/
   инпуты/цитаты/чипы реакций — дубль в этом слое не нужен (проверено
   computed+CSSOM; messenger-swarm-a11y.css в entry НЕ подключён — его
   3px-кобальт не действует, см. отчёт). Единственный outline:none
   !important — #composer-input (vb): там фокус виден как рамка поля
   :focus-within (акцентное кольцо) — семантика сохранена.
   font-size 200% на html: приложение px-based (0 rem в app/skin-v2/
   tokens) — строки не растут и НЕ ломаются: замер 390px (см. лог)
   HSCROLL=no, шапка треда 64px / композер 70px не перекрываются,
   composer в покое 70–72px. Перевод на rem — вопрос волны E. */


/* ---------- §7. Messenger finish: narrow screens and route dialogs ----------
   Dynamic feature styles are injected after links. Route/dialog selectors give
   these bounded corrections precedence without changing their event handlers. */
#view-notes .vyn-chip,
#view-notes .vyn-done,
#view-notes .vyn-srclink,
#view-notes .vyn-retry,
.vyn-sheet .vyn-achip,
.vyn-sheet .vyn-seg button,
.vyn-sheet .vy-ask__btn {
  min-height: var(--tap, 44px);
}
#view-notes .vyn-iconbtn {
  width: var(--tap, 44px);
  height: var(--tap, 44px);
  flex-shrink: 0;
}
#view-notes .vyn-card__body--static,
#view-notes .vyn-meta,
#view-notes .vyn-srclink,
.vyn-sheet .vyn-srcinfo {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#view-notes .vyn-meta svg,
#view-notes .vyn-srclink svg,
.vyn-sheet .vyn-srcinfo svg {
  flex-shrink: 0;
}
.vyn-sheet .vyn-sheet__card {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vyn-sheet .vy-ask__title {
  padding-right: 40px;
  overflow-wrap: anywhere;
}
.vyn-sheet .vy-ask__row {
  flex-wrap: wrap;
}
.vyn-sheet .vyn-sheet__close {
  width: var(--tap, 44px);
  height: var(--tap, 44px);
}
.vyn-sheet .vyn-field input[type="datetime-local"],
#view-notes .vyn-field input[type="datetime-local"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap, 44px);
  font-size: 16px;
}
#view-notes :is(button, input, textarea):focus-visible,
.vyn-sheet :is(button, input, textarea):focus-visible,
#vy-assist-root :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Ink follows the theme of its real accent surface, including injected UI. */
#view-communities .vy-comm__tab.is-active,
#view-communities .vy-comm-card__unread,
#view-communities .vy-comm-card__btn--primary,
#view-communities .vy-comm-card__btn--primary:hover,
#vy-comm-dialog .vy-comm-card__btn--primary,
#vy-comm-dialog .vy-comm-card__btn--primary:hover,
#vy-assist-root .vy-assist__run,
#vy-assist-root .vy-assist__retry,
#vy-assist-root .vy-assist__ask-send {
  color: var(--accent-ink);
}
#view-communities .vy-comm__tab {
  flex-shrink: 0;
}
#view-communities .vy-comm-card__sub,
#vy-comm-dialog .vy-comm-member strong,
#vy-comm-dialog .vy-comm-member p {
  overflow-wrap: anywhere;
}
#vy-comm-dialog .vy-comm-dialog__header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
#vy-comm-dialog .vy-comm-dialog__header button {
  flex-shrink: 0;
}

#vy-assist-root {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#vy-assist-root > :not(.vy-assist__result) {
  flex-shrink: 0;
}
#vy-assist-root .vy-assist__result {
  min-height: 96px;
}
#vy-assist-root button,
#vy-assist-root select {
  min-height: var(--tap, 44px);
}
#vy-assist-root .vy-assist__close {
  min-width: var(--tap, 44px);
}
#vy-assist-root .vy-assist__ctx {
  overflow-wrap: anywhere;
}
#vy-assist-root .vy-assist__ctx select {
  max-width: 100%;
}
#vy-assist-root .vy-assist__ask textarea {
  min-width: 0;
  width: 100%;
  min-height: var(--tap, 44px);
  font-size: 16px;
}
#vy-assist-root .vy-assist__ask-send {
  flex-shrink: 0;
}
#view-settings .settings-profile__body span,
#view-settings .settings-toggle__text,
#view-settings .settings-card__hint {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #view-notes .vyn-card { margin-inline: 10px; padding-inline: 10px; }
  #view-notes .vyn-card__top { gap: 4px; }
  #view-notes .vyn-chips { padding-inline: 10px; }
  .vyn-sheet .vy-ask__btn { flex: 1 1 110px; }
  #vy-assist-root .vy-assist__ask { flex-wrap: wrap; }
  #vy-assist-root .vy-assist__ask textarea { flex-basis: 100%; }
  #vy-assist-root .vy-assist__ask-send { margin-left: auto; padding: 10px 16px; }
  #view-settings .settings-card__head { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-notes .vyn-chip:active,
  #view-notes .vyn-done:active,
  #view-notes .vyn-srclink:active { transform: none; }
  #view-notes .vyn-card.is-flash,
  .vyn-sheet .vyn-sheet__card { animation: none; }
}

/* конец eco-week-b.css */

/* ---------- §8. Owner decision 2026-09-09: every surface follows the theme ----------
   Supersedes §2.3's former always-dark exceptions for calls/clips/dial.
   Image/video pixels retain their original colours; surrounding chrome and readable
   caption panels use the same app palette in both themes. No behaviour changes. */
html[data-theme] {
  --ve-calls-bg: var(--bg);
  --ve-calls-surface: var(--surface);
  --ve-calls-surface-2: var(--surface-2);
  --ve-calls-line: var(--border);
  --ve-calls-text: var(--text);
  --ve-calls-muted: var(--text-muted);
  --ve-calls-accent: var(--accent);
  --ve-calls-accent-2: var(--accent);
  --ve-calls-danger: var(--danger);
  --ve-calls-danger-text: var(--danger);
  --ve-calls-ok: var(--success);
  --dial-bg: var(--bg);
  --dial-surface: var(--surface);
  --dial-surface-2: var(--surface-2);
  --dial-line: var(--border);
  --dial-line-strong: var(--border);
  --dial-text: var(--text);
  --dial-muted: var(--text-muted);
  --dial-accent: var(--accent);
  --dial-accent-2: var(--accent);
  --dial-accent-soft: var(--accent-soft);
  --dial-danger: var(--danger);
  --dial-ok: var(--success);
  --wkb-media-panel: color-mix(in srgb, var(--surface) 96%, transparent);
  --wkb-status-ink: #ffffff;
}
html[data-theme="dark"] { --wkb-status-ink: #0b1220; }

html[data-theme] #view-calls,
html[data-theme] #call-overlay {
  background: var(--bg);
  color: var(--text);
}
html[data-theme] #view-calls .view-header,
html[data-theme] .eco-dial,
html[data-theme] .eco-dial__head {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme] #view-calls .eco-ve-chips,
html[data-theme] #view-calls .eco-ve-dir,
html[data-theme] #view-calls .eco-ve-empty-ic {
  background: var(--accent-soft);
  color: var(--accent);
}
html[data-theme] #view-calls .eco-ve-header-call,
html[data-theme] #view-calls .eco-ve-chip.is-on,
html[data-theme] #view-calls .eco-ve-empty-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}
html[data-theme] #view-calls .eco-ve-header-call:hover,
html[data-theme] #view-calls .eco-ve-empty-cta:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
}
html[data-theme] #view-calls .eco-ve-empty-cta :is(span, svg) { color: inherit; }
html[data-theme] #view-calls .eco-ve-chip__count { opacity: 1; }
html[data-theme] #view-calls .eco-ve-dir--in,
html[data-theme] #view-calls .eco-ve-callbtn {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}
html[data-theme] #view-calls .eco-ve-callbtn:hover {
  background: var(--success);
  color: var(--wkb-status-ink);
}
html[data-theme] #view-calls .eco-ve-dir--missed {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}
html[data-theme] #view-calls .call-row .chat-row__avatar,
html[data-theme] #view-calls .eco-ve-empty-ic { box-shadow: var(--shadow); }

html[data-theme] #call-overlay :is(.call-overlay__video, .call-overlay__remote, .call-overlay__pip) {
  background: var(--surface-2);
}
html[data-theme] #call-overlay .call-overlay__panel { background: transparent; }
html[data-theme] #call-overlay.call-overlay--video .call-overlay__panel {
  background: linear-gradient(180deg, var(--wkb-media-panel), transparent 26%, transparent 64%, var(--wkb-media-panel));
}
html[data-theme] #call-overlay :is(.call-overlay__name, .call-ctrl, .call-ctrl span) {
  color: var(--text);
  text-shadow: none;
}
html[data-theme] #call-overlay .call-overlay__status {
  color: var(--text-muted);
  text-shadow: none;
}
html[data-theme] #call-overlay[data-state="active"] .call-overlay__status { color: var(--success); }
html[data-theme] #call-overlay[data-state="inbound"] .call-overlay__status { color: var(--accent); }
html[data-theme] #call-overlay.call-overlay--video :is(.call-overlay__name, .call-overlay__status, .call-overlay__actions) {
  background: var(--wkb-media-panel);
  border-radius: var(--r-md);
  padding: 8px 12px;
}
html[data-theme] #call-overlay .call-ctrl svg {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
html[data-theme] #call-overlay .call-ctrl:hover svg { background: var(--accent-soft); }
html[data-theme] #call-overlay .call-ctrl.is-off svg {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}
html[data-theme] #call-overlay .call-ctrl--accept svg,
html[data-theme] #call-overlay .call-ctrl--accept:hover svg {
  background: var(--success);
  color: var(--wkb-status-ink);
}
html[data-theme] #call-overlay :is(.call-ctrl--reject, .call-ctrl--end) svg,
html[data-theme] #call-overlay :is(.call-ctrl--reject, .call-ctrl--end):hover svg {
  background: var(--danger);
  color: var(--wkb-status-ink);
}
html[data-theme] #call-overlay :is(.eco-ve-avatar, .call-overlay__pip) { box-shadow: var(--shadow-lift); }

html[data-theme] .eco-dial { box-shadow: var(--shadow-pop); }
html[data-theme] .eco-dial-scrim { background: var(--scrim); }
html[data-theme] .eco-dial__input::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme] .eco-dial__status.is-error { color: var(--danger); }
html[data-theme] :is(.eco-dial-trigger:hover, .eco-dial-btn--msg:hover, .eco-dial-btn--invite:hover) {
  background: var(--accent-soft);
  color: var(--accent);
}
html[data-theme] .eco-dial-btn--call,
html[data-theme] .eco-dial-btn--call:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

html[data-theme] #view-clips {
  --vd-bg: var(--bg);
  --vd-card: var(--surface);
  --vd-card-2: var(--surface-2);
  --vd-ink: var(--text);
  --vd-ink-dim: var(--text-muted);
  --vd-ink-faint: var(--text-muted);
  --vd-accent: var(--accent);
  --vd-line: var(--border);
  --vd-shadow: var(--shadow-lift);
  background: var(--bg);
  color: var(--text);
}
html[data-theme] #view-clips .view-header {
  background: var(--surface);
  color: var(--text);
}
html[data-theme] #view-clips :is(.clips-scroller, .clip-slide, .clips-empty, .clips-skeleton) {
  background: var(--bg);
  color: var(--text-muted);
}
html[data-theme] #view-clips :is(.vd-clip-card__media, .clip-slide__stage, .clip-slide__video) { background: var(--surface-2); }
html[data-theme] #view-clips :is(.vd-clip-card, .clips-empty__icon) { box-shadow: var(--shadow); }
html[data-theme] #view-clips .vd-clip-card:is(:hover, :focus-visible) { box-shadow: var(--shadow-lift); border-color: var(--accent); }
html[data-theme] #view-clips .vd-clip-card__shade { background: linear-gradient(to top, var(--surface), transparent 55%); }
html[data-theme] #view-clips :is(.vd-clip-card__bottom, .vd-chip, .vd-player-back, .vd-player-count, .vd-player-nav, .vd-player-hint, .clip-slide__meta, .clip-slide__playpause, .clip-rail__btn, .clip-slide__err) {
  background: var(--wkb-media-panel);
  color: var(--text);
  border-color: var(--border);
  text-shadow: none;
}
html[data-theme] #view-clips .vd-player-bar { background: linear-gradient(to bottom, var(--surface), transparent); }
html[data-theme] #view-clips .clip-slide__shade-top { background: linear-gradient(to bottom, var(--wkb-media-panel), transparent); }
html[data-theme] #view-clips .clip-slide__shade-bottom { background: linear-gradient(to top, var(--surface), transparent 88%); }
html[data-theme] #view-clips :is(.clip-slide__meta strong, .clip-slide__text p, .clip-rail__n, .vd-clip-card__name) { color: var(--text); text-shadow: none; }
html[data-theme] #view-clips :is(.clip-slide__views, .vd-clip-card__cap, .vd-player-hint) { color: var(--text-muted); text-shadow: none; opacity: 1; }
html[data-theme] #view-clips :is(.clip-slide__hint, .clips-empty__icon) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border);
}
html[data-theme] #view-clips :is(.vd-player-back, .vd-player-nav, .clip-rail__btn):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme] #view-clips .clip-rail__btn.is-active {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}
html[data-theme] #view-clips :is(.vd-btn--primary, .vd-clip-card__play) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
html[data-theme] #view-clips .vd-btn--primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
html[data-theme] #view-clips .vd-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme] #view-clips .clip-slide__progress { background: var(--border); }
html[data-theme] #view-clips .clip-slide__progress-bar { background: var(--accent); box-shadow: none; }
html[data-theme] #view-clips .clip-slide__buffer-spin { border-color: var(--border); border-top-color: var(--accent); box-shadow: none; }
html[data-theme] #comments-sheet.comments-sheet--clips,
html[data-theme] #comments-sheet.comments-sheet--clips .comments-compose {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme] #comments-sheet.comments-sheet--clips .comments-compose__input {
  background: var(--surface-2);
  color: var(--text);
}
html[data-theme] :is(#view-calls, #view-clips, #call-overlay, .eco-dial, #comments-sheet) :is(button, input, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme] :is(.eco-dial-card:hover, .eco-dial-idle__ic, .eco-dial-nouser__ic) { background: var(--surface-2); }
html[data-theme] .eco-dial-card__ava { color: var(--accent-ink); }
html[data-theme] .eco-dial__head::before { background: var(--border); }
html[data-theme] #view-clips .clip-rail__ico {
  color: inherit;
  background: transparent;
  box-shadow: none;
}
html[data-theme] #view-clips .clip-rail__btn.is-active .clip-rail__ico { color: var(--danger); background: transparent; }
html[data-theme] #view-clips .clips-skeleton span { background: var(--surface-2); border-color: var(--border); }
#vy-history-launch[hidden] { display: none !important; }
#vy-history-launch[hidden]::after { content: none; }

/* Guest invitation uses the active theme, including dynamically injected button styles. */
html[data-theme] #view-calls #vygr-callsbtn {
  min-height: 44px;
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme] #view-calls #vygr-callsbtn:hover { background: var(--surface-2); }