/* ════════════════════════════════════════════════════════════════
 *  ЭЛЬКА · REDESIGN v1
 *
 *  Telegram-style визуальный пересборщик. Подключается ПОСЛЕ styles.css
 *  и переопределяет только chat / sidebar / composer / header. Остальное
 *  (модалки, сторис-вьюер, звонки) остаётся как было — будем редизайнить
 *  отдельно по плану 70-page redesign.
 *
 *  Принцип:
 *    1. Новые design-tokens добавляем как override в :root + body.theme-light
 *    2. Перебиваем существующие селекторы (.bubble, .chat-item, etc.)
 *       чтобы JS-структура не менялась — только CSS
 *    3. Если нужно радикально поменять разметку — добавим body.redesign-v1
 *       класс и стилизуем под него
 *
 *  Источник: mobile/design/redesign/01-chat.html + 02-sidebar.html
 * ════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS (override) ─── */

:root {
  /* Палитра текстовых уровней (3 ступени вместо 2) */
  --t-tertiary:           rgba(255,255,255,.50);

  /* Фоны нового дизайна — глубокий navy для тёмного, ультра-чистый для светлого */
  --redesign-chat-bg:     #0E1217;
  --redesign-panel-bg:    #161C24;
  --redesign-sidebar-bg:  #11161D;
  --redesign-input-bg:    #1B232E;
  --redesign-hover-bg:    #1B232E;
  --redesign-border:      rgba(255,255,255,.06);

  /* Bubble */
  --redesign-bubble-in:   #1B232E;
  --redesign-bubble-out:  #004AAD;
  --redesign-bubble-in-tx:  rgba(255,255,255,.95);
  --redesign-bubble-out-tx: #FFFFFF;
  --redesign-bubble-shadow: none;
  --redesign-bubble-time:    rgba(255,255,255,.65);
  --redesign-bubble-time-in: rgba(255,255,255,.45);
  --redesign-tick-read:   #7CB4FF;

  /* Reactions */
  --redesign-reaction-bg:    rgba(77,142,252,.15);
  --redesign-reaction-mine:  rgba(77,142,252,.28);

  /* Date divider */
  --redesign-divider-pill: rgba(255,255,255,.06);
  --redesign-divider-tx:   rgba(255,255,255,.55);

  /* Online dot + статусы */
  --redesign-online:    #4ADE80;
  --redesign-missed:    #F43F5E;

  /* Тёмный accent чуть ярче чтобы читался на тёмном фоне */
  --redesign-accent:    #4D8EFC;
  --redesign-accent-bubble: #004AAD;
  --redesign-accent-soft: rgba(77,142,252,.15);
}

body.theme-light {
  --t-tertiary:           #94A3B8;
  --redesign-chat-bg:     #F1F4F9;
  --redesign-panel-bg:    #FFFFFF;
  --redesign-sidebar-bg:  #FFFFFF;
  --redesign-input-bg:    #F1F4F9;
  --redesign-hover-bg:    #F1F4F9;
  --redesign-border:      rgba(15,30,60,.08);

  --redesign-bubble-in:   #FFFFFF;
  --redesign-bubble-out:  #004AAD;
  --redesign-bubble-in-tx:  #0F172A;
  --redesign-bubble-out-tx: #FFFFFF;
  --redesign-bubble-shadow: 0 1px 2px rgba(15,30,60,.05);
  --redesign-bubble-time:    rgba(255,255,255,.7);
  --redesign-bubble-time-in: #94A3B8;
  --redesign-tick-read:   #5BA3FF;

  --redesign-reaction-bg:    rgba(0,74,173,.08);
  --redesign-reaction-mine:  rgba(0,74,173,.18);

  --redesign-divider-pill: rgba(15,30,60,.07);
  --redesign-divider-tx:   #64748B;

  --redesign-accent:    #004AAD;
  --redesign-accent-bubble: #004AAD;
  --redesign-accent-soft: rgba(0,74,173,.10);
}

/* ════════════════════════════════════════════════════════════════
 *  СПИСОК ЧАТОВ — sidebar
 * ════════════════════════════════════════════════════════════════ */

.sidebar {
  background: var(--redesign-sidebar-bg) !important;
  border-right: 1px solid var(--redesign-border);
  box-shadow: none !important;
}

.sidebar-header {
  border-bottom: 1px solid var(--redesign-border);
  background: var(--redesign-sidebar-bg);
}

/* Имя в шапке "Ринат Рашидович" — в одну строку без переноса.
   Раньше: 19px font-weight 700 без overflow → длинное имя ехало на 2 строки. */
.sidebar-title,
.sidebar-header .sidebar-title {
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
}

.hdr-btn {
  border-radius: 10px !important;
  width: 36px; height: 36px;
}

/* Search */
.sidebar-search-wrap {
  background: var(--redesign-sidebar-bg);
  padding-top: 6px !important;
}
.sidebar-search {
  background: var(--redesign-input-bg) !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 9px 12px !important;
  margin: 0 12px !important;
}

/* Tabs — одна строка с горизонтальным скроллом вместо переноса.
   Раньше: flex-wrap: wrap → «Каналы / Звонки / Сайты» ехали на 2-ю строку,
   занимая лишнюю высоту. Теперь горизонтальный скролл (как у Telegram).
   Добавлен margin-top чтобы поле поиска и табы не слипались. */
.sidebar-tabs {
  padding: 0 12px 8px !important;
  margin-top: 10px !important;
  border-bottom: 1px solid var(--redesign-border) !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  row-gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE10+ */
}
.sidebar-tabs::-webkit-scrollbar { display: none; } /* WebKit */

.stab {
  background: transparent !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-sec) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.stab:hover { background: var(--redesign-hover-bg) !important; }
.stab.active {
  background: var(--redesign-accent-bubble) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important; /* убираем тяжёлый accent-glow shadow */
}
.stab-count {
  background: rgba(255,255,255,.22) !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.stab:not(.active) .stab-count {
  background: var(--redesign-hover-bg) !important;
  color: var(--text-sec) !important;
}

/* Chat list item — Telegram-style: компактнее, rounded, без border-bottom */
.chat-item {
  margin: 1px 6px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  gap: 12px !important;
  border-bottom: none !important;       /* убираем серую линию-разделитель */
  align-items: center !important;
}
.chat-item:hover { background: var(--redesign-hover-bg) !important; }
.chat-item.active {
  background: var(--redesign-accent-bubble) !important;
}
.chat-item.active .chat-name,
.chat-item.active .chat-time,
.chat-item.active .chat-preview,
.chat-item.active .ticks { color: rgba(255,255,255,.95) !important; }
.chat-item.active .chat-preview { color: rgba(255,255,255,.78) !important; }
.chat-item.active .unread-badge {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* Pinned chat — мягкая синяя подсветка */
.chat-item.pinned:not(.active) {
  background: var(--redesign-accent-soft) !important;
}
.chat-item.pinned::before { display: none !important; } /* старая декоративная полоска */

/* Avatar — 48px кругло, type-badge не вылезает */
.chat-avatar-wrap { width: 48px !important; height: 48px !important; }
.chat-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
.chat-type-badge {
  width: 18px !important;
  height: 18px !important;
  border-width: 2.5px !important;
}

/* Chat top/bottom layout — Telegram-spacing */
.chat-info { flex: 1; min-width: 0; }
.chat-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  baseline: auto !important;
}
.chat-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.chat-time {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--t-tertiary) !important;
  flex-shrink: 0;
}
.chat-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 0 !important;
}
.chat-preview {
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--text-sec) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1;
  min-width: 0;
}

/* Unread badge — компактный pill */
.unread-badge {
  min-width: 22px; height: 22px;
  border-radius: 11px;
  background: var(--redesign-accent-bubble);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.unread-badge.muted { background: var(--t-tertiary); }

/* ════════════════════════════════════════════════════════════════
 *  СТОРИС-БАР
 * ════════════════════════════════════════════════════════════════ */
.stories-bar { padding: 8px 12px 8px !important; }
.story-add-circle {
  background: var(--redesign-input-bg) !important;
  border: 2px dashed var(--redesign-accent) !important;
}
/* Лейблы под аватарами — широкий ellipsis, без обрезки на 3 символа */
.story-add-btn span,
.story-item span {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text-sec) !important;
  max-width: 68px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
 *  SWIPE-ACTIONS — красные полоски справа были видны из-за свайп-обёртки
 * ════════════════════════════════════════════════════════════════ */
/* Обёртка SwipeActions: actions должны быть видны ТОЛЬКО когда юзер свайпает,
   а сейчас они вылезали на 4-5px от любого item (баг overflow на родителе).
   Гарантируем что overflow обрезается. */
.swipe-row {
  overflow: hidden !important;
  border-radius: 12px !important;
  margin: 1px 6px !important;
}
.swipe-row .chat-item {
  margin: 0 !important;        /* margin уже на .swipe-row */
  border-radius: 12px !important;
}
.swipe-row__actions {
  border-radius: 0 12px 12px 0 !important;
  z-index: 0 !important;       /* всегда позади content */
}
/* Если SwipeActions не использует tag swipe-row (старый JS) — скроем сами actions */
.chat-item .swipe-row__actions,
.chat-item ~ .swipe-row__actions { display: none !important; }

/* ════════════════════════════════════════════════════════════════
 *  ЧАТ — header / messages / composer
 * ════════════════════════════════════════════════════════════════ */

#app-screen { background: var(--redesign-chat-bg); }
.app-layout { background: var(--redesign-chat-bg); }

.chat-header {
  padding: 12px 20px !important;
  background: var(--redesign-panel-bg) !important;
  border-bottom: 1px solid var(--redesign-border) !important;
  backdrop-filter: blur(20px);
}
.chat-header-name { font-size: 16px !important; font-weight: 600 !important; }
.chat-header-status,
.chat-header-online { font-size: 13px !important; color: var(--text-sec) !important; }

/* Messages background */
.messages-container,
.messages-list {
  background: var(--redesign-chat-bg) !important;
}

/* ─── BUBBLE — Telegram-style ─── */

.bubble {
  border-radius: 16px !important;
  padding: 7px 11px !important;
  font-size: 15px !important;
  line-height: 1.36 !important;
  box-shadow: var(--redesign-bubble-shadow) !important;
  background: var(--redesign-bubble-in) !important;
  color: var(--redesign-bubble-in-tx) !important;
  /* Отключаем системный long-press → text-selection menu в WebView/iOS.
     Long-press теперь триггерит ТОЛЬКО наш ctx-menu (реакции/ответить/копировать).
     ВНУТРИ ctx-menu есть пункт «Скопировать» — функционал тот же. */
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
  -webkit-touch-callout: none;  /* iOS Safari long-press callout */
  -webkit-tap-highlight-color: transparent;
}
/* Внутри bubble разрешаем выбор только в специальных случаях:
   код-сниппеты, ссылки. Простой текст НЕ выделяется чтобы long-press
   ушёл нашему JS. */
.bubble pre,
.bubble code,
.bubble a {
  -webkit-user-select: text;
  user-select: text;
}
.msg-wrap.out .bubble {
  background: var(--redesign-bubble-out) !important;
  color: var(--redesign-bubble-out-tx) !important;
}

/* Small corner на «своей» стороне — конвенция WhatsApp/Telegram */
.msg-wrap.out .bubble {
  border-bottom-right-radius: 4px !important;
  border-top-right-radius: 16px !important;
}
.msg-wrap.in .bubble {
  border-bottom-left-radius: 4px !important;
  border-top-left-radius: 16px !important;
}
.msg-wrap.grouped.out .bubble { border-top-right-radius: 4px !important; }
.msg-wrap.grouped.in  .bubble { border-top-left-radius: 4px !important; }

/* Хвостик отключаем — Telegram использует только скруглённые corner'ы.
   Прежний SVG-tail оставим но скроем — выглядит чище. */
.msg-wrap.in .bubble::before,
.msg-wrap.out .bubble::before { display: none !important; }

/* Время + галочки — внутри bubble в правом-нижнем углу */
.msg-meta {
  font-size: 11px;
  color: var(--redesign-bubble-time-in) !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  float: right;
  margin: 4px 0 -2px 8px;
  white-space: nowrap;
}
.msg-wrap.out .msg-meta { color: var(--redesign-bubble-time) !important; }
.msg-wrap.out .msg-ticks.read .tks { color: var(--redesign-tick-read) !important; }

/* Group sender name */
.msg-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 2px;
}

/* Reply quote inside bubble */
.reply-quote {
  border-left: 3px solid var(--redesign-accent) !important;
  background: rgba(0,74,173,.06) !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  margin: 0 0 5px !important;
  font-size: 13px;
}
.msg-wrap.out .reply-quote {
  border-left-color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.13) !important;
}
.reply-quote-name { font-weight: 600; color: var(--redesign-accent) !important; font-size: 12.5px !important; }
.msg-wrap.out .reply-quote-name { color: rgba(255,255,255,.95) !important; }
.reply-quote-text { color: var(--text-sec) !important; font-size: 13px !important; }
.msg-wrap.out .reply-quote-text { color: rgba(255,255,255,.78) !important; }

/* Date divider */
.date-divider {
  align-self: center;
  margin: 12px 0 8px !important;
  background: transparent !important;
}
.date-divider span {
  background: var(--redesign-divider-pill) !important;
  color: var(--redesign-divider-tx) !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
  font-size: 12.5px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

/* Reactions */
.reactions-row { gap: 4px !important; margin-top: 4px !important; }
.reaction-chip {
  background: var(--redesign-reaction-bg) !important;
  color: var(--text) !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
}
.reaction-chip.mine {
  background: var(--redesign-reaction-mine) !important;
  color: var(--redesign-accent) !important;
}

/* ─── COMPOSER ─── */
.composer,
.chat-composer {
  background: var(--redesign-panel-bg) !important;
  border-top: 1px solid var(--redesign-border) !important;
  padding: 8px 16px !important;
}

.text-input-wrap,
.composer .composer-input-wrap {
  background: var(--redesign-input-bg) !important;
  border-radius: 20px !important;
  border: none !important;
  padding: 8px 14px !important;
}

#msg-input {
  background: transparent !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.send-btn,
.composer .send-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--redesign-accent-bubble) !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .15s;
}
.send-btn:hover { transform: scale(1.05); }
.send-btn:disabled { opacity: .55; background: var(--surface-alt) !important; color: var(--text-sec) !important; }

/* Empty state в чате (когда чат не выбран) */
.no-chat-selected,
.empty-chat-state {
  background: var(--redesign-chat-bg) !important;
}

/* ════════════════════════════════════════════════════════════════
 *  FAB + меню — как в прототипе
 *  Раньше: pill-карточки колонкой (по отдельной кнопке за items'ом).
 *  Сейчас: единый dropdown с 4 строками, как полноценный context menu.
 * ════════════════════════════════════════════════════════════════ */
.fab-wrap {
  position: absolute !important;
  bottom: 18px !important;
  right: 18px !important;
  z-index: 20;
}
.fab {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--redesign-accent-bubble) !important;
  border: none;
  box-shadow: 0 8px 24px rgba(0,74,173,.35) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover {
  transform: scale(1.04) !important;  /* убираем rotate(90deg) — спокойнее */
  box-shadow: 0 10px 28px rgba(0,74,173,.45) !important;
}
.fab.open {
  transform: rotate(45deg) !important; /* плюс становится крестиком */
}
.fab:active { transform: scale(.96) !important; }

/* Меню — единая dropdown-карточка, не пилюли.
   ВАЖНО: НЕ ставим display: flex !important — иначе inline `display:none`
   от JS не работает и меню всегда видно. Применяем layout только когда
   меню реально открыто (JS убирает inline display). */
.fab-menu {
  position: absolute !important;
  bottom: 76px !important;     /* над FAB-кнопкой */
  right: 0 !important;
  background: var(--redesign-panel-bg) !important;
  border: 1px solid var(--redesign-border) !important;
  border-radius: 12px !important;
  padding: 6px 0 !important;
  min-width: 220px !important;
  box-shadow:
    0 1px 2px rgba(15,30,60,.05),
    0 16px 48px rgba(15,30,60,.18) !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  animation: fabMenuPopIn .15s ease;
  z-index: 21;
}
@keyframes fabMenuPopIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); transform-origin: bottom right; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fab-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  color: var(--text) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-align: left;
  white-space: nowrap;
  animation: none !important; /* убираем старый popIn */
  box-shadow: none !important;
  transition: background .12s;
  width: 100%;
}
.fab-item:hover {
  background: var(--redesign-hover-bg) !important;
  border-color: transparent !important;
  transform: none !important;
}
.fab-item svg {
  color: var(--redesign-accent) !important;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.fab-item span { font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
 *  Contact-profile: danger-section (заблокировать / пожаловаться)
 *  Жалоба: «кнопки пожаловаться нету» — добавили в карточку.
 *  Стиль: full-width красные text-buttons, разделитель между ними,
 *  как у iOS Settings → Account → Sign Out + Delete Account.
 * ════════════════════════════════════════════════════════════════ */
.cp-danger-section {
  margin-top: 12px !important;
  padding: 0 !important;
  background: var(--bg-input, #F1F4F9);
  border-radius: 12px;
  overflow: hidden;
}
body:not(.theme-light) .cp-danger-section { background: #1B232E; }
.cp-danger-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #DC2626; /* красный для danger */
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .12s;
}
.cp-danger-row:hover {
  background: rgba(220,38,38,.06);
}
.cp-danger-row + .cp-danger-row {
  border-top: 1px solid rgba(220,38,38,.12);
}
.cp-danger-row svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
 *  Voice-bubble: bubble с голосовым шире обычной,
 *  чтобы все элементы (play+волна+время+скорость) помещались
 * ════════════════════════════════════════════════════════════════ */
.bubble:has(.voice-player) {
  max-width: 88% !important;
  min-width: 260px;
}
.bubble .voice-player {
  min-width: 240px;
  width: 100%;
}
.bubble .voice-duration {
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════
 *  Reply-voice preview — мини-waveform для голосовых в reply-bar
 *  (composer) и в reply-quote (внутри bubble).
 * ════════════════════════════════════════════════════════════════ */
.reply-voice-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}
/* Reply-quote внутри bubble — даём ширину, чтобы цитата не сжималась
   и волна с длительностью помещалась полностью */
.bubble .reply-quote { display: block; }
.bubble .reply-quote-text { overflow: hidden; text-overflow: ellipsis; }
.reply-voice-bars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  height: 16px;
  flex-shrink: 0;
}
.reply-voice-bars > span {
  display: inline-block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: .65;
}
.reply-voice-dur {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: .85;
}
/* В composer reply-bar — акцентный цвет волны (бренд) */
.reply-bar .reply-voice-preview { color: var(--accent, #004AAD); }
/* В bubble — цвет наследуется от bubble (белый для out, текст для in) */

/* ════════════════════════════════════════════════════════════════
 *  Create-group stepper — 3-шаговое создание группы/канала
 *  Telegram-style: прогресс-точки, navigation back/forward, шаги.
 * ════════════════════════════════════════════════════════════════ */
.create-step-head {
  align-items: center !important;
  gap: 8px;
}
.cg-back {
  flex-shrink: 0;
}
.cg-head-info { flex: 1; min-width: 0; }
.cg-head-info h3 { margin: 0 !important; line-height: 1.25; }
.cg-step-label {
  font-size: 12px;
  color: var(--text-sec, #888);
  margin-top: 2px;
}
.cg-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 12px;
}
.cg-dot {
  width: 26px; height: 4px;
  border-radius: 2px;
  background: var(--border, rgba(0,0,0,.10));
  transition: background .25s;
}
.cg-dot.active   { background: var(--accent, #004AAD); }
.cg-dot.done     { background: var(--accent, #004AAD); opacity: .55; }
.cg-step { animation: cg-step-in .22s ease-out; }
@keyframes cg-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cg-footer {
  display: flex !important;
  gap: 8px;
  padding: 14px 16px !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.08));
}
/* Внутри cg-footer перебиваем дефолтный width:100% у btn-secondary,
   чтобы skip-кнопка делила ряд с «Создать» */
.cg-footer .btn-secondary {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 12px 18px !important;
  background: var(--bg-input, #F1F4F9) !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.cg-footer .btn-primary {
  flex: 1 !important;
}
body:not(.theme-light) .cg-footer .btn-secondary {
  background: rgba(255,255,255,.08) !important;
}
.cg-footer .btn-secondary:hover { background: rgba(0,74,173,.08) !important; }

/* Type-cards: радио-карточки выбора типа группы/канала */
.cg-type-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  border-radius: 12px;
  background: var(--bg-input, #F1F4F9);
  border: 1.5px solid transparent;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
body:not(.theme-light) .cg-type-card {
  background: rgba(255,255,255,.05);
}
.cg-type-card:has(input:checked) {
  border-color: var(--accent, #004AAD);
  background: rgba(0,74,173,.05);
}
.cg-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cg-type-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: white;
  flex-shrink: 0;
}
.cg-type-info { flex: 1; min-width: 0; }
.cg-type-name { font-weight: 600; font-size: 15px; color: var(--text); }
.cg-type-sub  { color: var(--text-sec, #888); font-size: 13px; margin-top: 2px; line-height: 1.35; }

/* Public link input — prefix + input в одном блоке */
.cg-link-input {
  display: flex; align-items: center;
  background: var(--bg-input, #F1F4F9);
  border-radius: 10px;
  padding: 4px 6px 4px 12px;
  font-size: 14px;
}
body:not(.theme-light) .cg-link-input {
  background: rgba(255,255,255,.05);
}
.cg-link-prefix {
  color: var(--text-sec, #888);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  flex-shrink: 0;
}
.cg-link-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 8px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════
 *  Story editor v3 — VK-style toolbar + Telegram-style bottom tabs
 *  Layout: header (back + caption-input) / stage (preview + right toolbar) /
 *  panel (slides up when tool selected) / bottom tabs / publish bar.
 * ════════════════════════════════════════════════════════════════ */
.modal.story-editor-v3 {
  background: #000 !important;
  color: white;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
/* Header — назад + caption-input. Overlay поверх preview. */
.se-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: env(safe-area-inset-top, 12px) 12px 8px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.se-back {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.13);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.se-title-input {
  flex: 1;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 9px 16px;
  color: white;
  font-size: 14px;
  outline: none;
}
.se-title-input::placeholder { color: rgba(255,255,255,.55); }

/* Stage — preview-box на весь экран (камера-mode), toolbar поверх */
.se-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 0;
}
.story-editor-v3 #story-preview-box {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative;
  margin: 0 !important;
}

/* VK-style right toolbar — z-index ВЫШЕ всех панелей, чтобы их можно было закрыть */
.se-toolbar {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 20;
}
.se-tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.se-tool-icon {
  width: 44px; height: 44px;
  background: rgba(0,0,0,.55);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: transform .12s, background .15s;
}
.se-tool:hover .se-tool-icon { background: rgba(0,0,0,.75); transform: scale(1.05); }
.se-tool:active .se-tool-icon { transform: scale(.92); }
.se-tool-label {
  font-size: 11px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.se-tool.active .se-tool-icon { background: var(--accent, #004AAD); }

/* Slide-up panel для текущего инструмента */
.se-panel {
  background: #1a1a1a;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 6px 16px 16px;
  max-height: 50vh;
  overflow-y: auto;
  animation: se-panel-up .22s ease-out;
}
@keyframes se-panel-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.se-panel-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,.20);
  border-radius: 2px;
  margin: 6px auto 14px;
}
.se-panel-body { color: white; }
.se-panel-body input,
.se-panel-body textarea {
  width: 100%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 12px;
  color: white;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.se-panel-body input::placeholder,
.se-panel-body textarea::placeholder { color: rgba(255,255,255,.50); }
.se-panel-body label { display: block; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.75); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

.se-bg-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.se-bg-swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: transform .12s;
}
.se-bg-swatch:hover { transform: scale(1.1); }
.se-bg-swatch.active { border-color: white; }

.se-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.se-emoji-grid button {
  background: transparent;
  border: none;
  font-size: 26px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
}
.se-emoji-grid button:hover { background: rgba(255,255,255,.10); }

.se-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.se-chips button {
  background: rgba(255,255,255,.10);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}
.se-chips button.active {
  background: var(--accent, #004AAD);
  border-color: var(--accent, #004AAD);
}

/* Универсальная центральная панель — без фона, по центру preview */
.se-center-panel {
  position: absolute;
  top: 50%;
  /* сдвигаем центр влево на половину ширины toolbar (~80px) чтобы не задевать его */
  left: calc(50% - 40px);
  transform: translate(-50%, -50%);
  z-index: 12;
  pointer-events: auto;
  padding: 16px;
  max-width: 240px; /* фиксируем чтобы вписаться в окно без toolbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.se-center-panel .se-cp-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.se-center-panel .se-cp-music,
.se-center-panel .se-cp-more {
  width: 240px !important;
}
.se-cp-title {
  font-size: 13px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .9;
}
.se-cp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.se-cp-color {
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transition: transform .12s, border-color .12s;
}
.se-cp-color:hover { transform: scale(1.15); }
.se-cp-color.active { border-color: white; transform: scale(1.1); }

.se-cp-music, .se-cp-more {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 280px;
}
.se-cp-input {
  background: rgba(0,0,0,.45);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 12px 18px;
  color: white;
  font-size: 14px;
  outline: none;
  backdrop-filter: blur(8px);
}
.se-cp-input::placeholder { color: rgba(255,255,255,.65); }
.se-cp-pill {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 12px 18px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(8px);
}
.se-cp-pill:hover { background: rgba(0,0,0,.75); }
.se-cp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 13px;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.se-cp-toggle input { width: 18px; height: 18px; cursor: pointer; }

/* Слой эмодзи-стикеров поверх preview */
.se-stickers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.se-sticker {
  position: absolute;
  font-size: 64px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  line-height: 1;
}
.se-sticker.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); z-index: 999; }

/* Центральный emoji picker — поверх preview, без фона */
.se-center-emojis {
  position: absolute;
  top: 50%;
  left: calc(50% - 40px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  z-index: 12;
  pointer-events: auto;
  padding: 16px;
  max-width: 240px;
}
.se-center-emojis button {
  background: transparent;
  border: none;
  font-size: 44px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform .12s;
}
.se-center-emojis button:hover { transform: scale(1.2); }
.se-center-emojis button:active { transform: scale(.92); }

/* Trash zone — снизу, появляется во время drag */
.se-trash-zone {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) scale(.9);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 15;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.se-trash-zone.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.se-trash-zone.hot {
  transform: translateX(-50%) scale(1.15);
}
.se-trash-icon {
  width: 56px; height: 56px;
  background: rgba(220, 38, 38, .85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.se-trash-zone.hot .se-trash-icon { background: rgba(220, 38, 38, 1); }
.se-trash-label {
  font-size: 11px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Telegram-style bottom tabs — overlay поверх preview.
   До загрузки медиа — внизу (выбор источника).
   После загрузки — скрываются, появляется publish-bar. */
.se-bottom-tabs {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  display: flex;
  gap: 4px;
  padding: 8px 12px 4px;
  justify-content: center;
  z-index: 10;
}
/* Publish-bar и tabs зависят от has-media режима */
.story-editor-v3:not(.has-media):not(.has-text) .se-publish-bar { display: none !important; }
.story-editor-v3.has-media .se-bottom-tabs { display: none !important; }
.se-tab {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.se-tab.active { color: white; background: rgba(255,255,255,.15); }

/* Publish bar — overlay поверх preview снизу */
.se-publish-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
  align-items: center;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.se-vis-btn, .se-share-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 14px;
  color: white;
  font-size: 13px;
  cursor: pointer;
}
.se-publish-btn {
  flex: 1;
  background: var(--accent, #004AAD);
  border: none;
  border-radius: 999px;
  padding: 11px 16px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.se-publish-btn:hover { background: #003580; }

/* ════════════════════════════════════════════════════════════════
 *  Stories v2 — Telegram/WhatsApp/Instagram-style редизайн.
 *  Наш базовый viewer уже существует (#story-viewer), но мы
 *  переопределяем его визуал чтобы соответствовать трендам:
 *    • Telegram: тонкие прогресс-бары, чистый header
 *    • WhatsApp: bottom = «Ответить…» + heart-shortcut справа
 *    • Instagram: floating reaction bar, музыка-pill
 * ════════════════════════════════════════════════════════════════ */
#story-viewer.story-viewer-overlay {
  background: #000 !important;
  z-index: 9999 !important;
}
#story-viewer .story-viewer-box {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #000 !important;
  border-radius: 0 !important;
  position: relative !important;
}
/* Прогресс-бары — тонкие (3px), белые, по верху, с safe-area */
#story-viewer .story-viewer-bars,
#story-viewer .sv-bars {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 8px) + 6px) !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  gap: 3px !important;
  z-index: 10 !important;
}
#story-viewer .story-viewer-bar,
#story-viewer .sv-bar {
  flex: 1 !important;
  height: 2.5px !important;
  background: rgba(255,255,255,.30) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
#story-viewer .story-viewer-bar-fill,
#story-viewer .sv-bar-fill {
  height: 100% !important;
  background: white !important;
  border-radius: 2px !important;
}

/* Header — компактнее: avatar 32px, name 14px, time 11px */
#story-viewer .story-viewer-header {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 8px) + 16px) !important;
  left: 12px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10 !important;
  padding: 0 !important;
  background: transparent !important;
}
#story-viewer .story-viewer-avatar {
  width: 32px !important; height: 32px !important;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
}
#story-viewer .story-viewer-name {
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
}
#story-viewer .story-viewer-time {
  color: rgba(255,255,255,.7) !important;
  font-size: 11.5px !important;
  margin-top: 1px;
}
/* Меню (⋯) и закрыть (✕) — справа */
#story-viewer .sv-menu-btn,
#story-viewer .sv-close-btn {
  width: 38px !important; height: 38px !important;
  background: transparent !important;
  border: none !important;
  color: white !important;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#story-viewer .sv-menu-btn:hover,
#story-viewer .sv-close-btn:hover { background: rgba(255,255,255,.10) !important; }

/* Тёмный градиент только сверху (под header'ом) — мягкий, для читаемости.
   Снизу НЕ затемняем — на белом инпуте «Ответить» и так контраст хороший. */
#story-viewer .story-viewer-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, rgba(0,0,0,.40), transparent);
  z-index: 5;
  pointer-events: none;
}

/* Bottom row — WhatsApp-style: «Ответить...» + ❤️ справа */
#story-viewer .sv-bottom {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0)) !important;
  background: transparent !important;
  z-index: 10 !important;
  display: flex !important;
}
#story-viewer .sv-reply-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
}
/* Reply bar (согласованный прототип: glass-dark на любом фоне). */
#story-viewer .sv-reply-row input {
  flex: 1 !important;
  height: 44px !important;
  background: rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px) !important;
  border: 0.5px solid rgba(255,255,255,.25) !important;
  border-radius: 22px !important;
  padding: 0 18px !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 14px !important;
  outline: none !important;
}
#story-viewer .sv-reply-row input::placeholder { color: rgba(255,255,255,.7); }
#story-viewer .sv-reply-emoji {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px) !important;
  border: 0.5px solid rgba(255,255,255,.25) !important;
  font-size: 22px !important;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}
#story-viewer .sv-reply-send {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px) !important;
  border: 0.5px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .12s, background .12s;
}
#story-viewer .sv-reply-send:active { transform: scale(.94); background: rgba(0,0,0,.55) !important; }

/* Музыка-pill (Instagram-style) — снизу над reply-row */
.sv-music-bar {
  position: absolute !important;
  bottom: 84px !important;
  left: 12px !important;
  background: rgba(0,0,0,.45) !important;
  border-radius: 999px !important;
  padding: 6px 12px 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: white !important;
  font-size: 12px !important;
  backdrop-filter: blur(8px);
  z-index: 9;
}
.sv-music-bar .music-ico { font-size: 14px; }
.sv-music-bar .music-title {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Тап-зоны (Instagram-style): левая 1/3 = prev, правая 2/3 = next */
.sv-tap-zones {
  position: absolute;
  inset: 60px 0 100px 0;  /* не перекрывает header и footer */
  display: flex;
  z-index: 6;
}
.sv-tap-zones .sv-tap-prev { width: 35%; }
.sv-tap-zones .sv-tap-next { flex: 1; }

/* Reactions popup — поверх центра экрана при tap на сердечко */
#story-viewer .sv-reactions-popup {
  position: absolute !important;
  bottom: 86px !important;
  right: 14px !important;
  display: flex !important;
  gap: 6px !important;
  background: rgba(0,0,0,.65) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  backdrop-filter: blur(12px);
  z-index: 11;
  animation: sv-pop-in .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sv-pop-in {
  from { opacity: 0; transform: scale(.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#story-viewer .sv-reactions-popup .sv-reaction-btn {
  background: none !important;
  border: none !important;
  font-size: 26px !important;
  cursor: pointer;
  padding: 2px !important;
  transform-origin: center;
  transition: transform .12s;
}
#story-viewer .sv-reactions-popup .sv-reaction-btn:hover {
  transform: scale(1.3);
}

/* ════════════════════════════════════════════════════════════════
 *  PhotoViewer — полноэкранный просмотрщик фото с свайпами,
 *  pinch-zoom, swipe-to-close, double-tap zoom, share/download.
 *  Telegram-style: чёрный фон, минималистичный top-bar.
 * ════════════════════════════════════════════════════════════════ */
#photo-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .98);
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: pv-fade-in .18s ease-out;
  isolation: isolate;
}
/* Прячем FAB/composer пока открыт photo-viewer */
body:has(#photo-viewer[style*="flex"]) .fab-wrap,
body:has(#photo-viewer[style*="flex"]) .composer,
body:has(#photo-viewer[style*="flex"]) .stories-bar {
  visibility: hidden;
}
@keyframes pv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pv-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: env(safe-area-inset-top, 8px) 8px 8px;
  height: 56px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  position: relative;
  z-index: 2;
}
.pv-btn {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.pv-btn:hover, .pv-btn:active {
  background: rgba(255,255,255,.10);
}
.pv-info {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  color: white;
}
.pv-sender {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-meta {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  display: flex;
  gap: 10px;
}
.pv-counter:not(:empty)::before { content: '·'; margin-right: 6px; }
.pv-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.pv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  will-change: transform;
  transition: transform .25s ease;
  /* Когда юзер активно жестит — transition выкл через .pv-img.dragging */
}
.pv-img.dragging { transition: none !important; }
.pv-hint {
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
  text-align: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  opacity: .8;
  pointer-events: none;
  transition: opacity .3s;
}
#photo-viewer.no-hint .pv-hint { opacity: 0; }

/* ════════════════════════════════════════════════════════════════
 *  Member action-sheet — Telegram-style карточка действий
 *  над участником группы (роль/исключить/передать владение).
 * ════════════════════════════════════════════════════════════════ */
.member-action-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 8px;
  gap: 6px;
}
.member-action-head img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #003580, #5BA3FF);
}
.member-action-head .ma-name {
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.member-action-head .ma-role {
  font-size: 13px;
  color: var(--text-sec, #888);
}
.member-action-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.member-action-body .gsettings-row {
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.member-action-body .gsettings-row + .gsettings-row {
  border-top: none !important;
}
.ma-cancel {
  width: calc(100% - 16px);
  margin: 4px 8px 12px;
  padding: 12px;
  border: none;
  background: var(--bg-input, #F1F4F9);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
body:not(.theme-light) .ma-cancel {
  background: rgba(255,255,255,.08);
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════
 *  Group-settings: фикс слипания полей название/описание
 * ════════════════════════════════════════════════════════════════ */
#gsettings-edit-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#gsettings-edit-section .modal-text-input {
  margin: 0 !important;
}
#gsettings-edit-section #group-edit-save {
  margin-top: 6px !important;
}

/* Старая шестерёнка-настроек в шапке чата (chat-settings-btn) — больше не используется,
   доступ к настройкам идёт через ⋮ → «Информация о чате».
   Гарантированно прячем, чтобы не показывалось 2 раза по 3 точки. */
#chat-settings-btn {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
 *  Group-settings hero — большой аватар группы сверху + имя + кол-во
 *  участников. Telegram-style карточка-шапка.
 * ════════════════════════════════════════════════════════════════ */
.gsettings-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 8px 0 16px !important;
  gap: 8px;
}
.gsettings-avatar-wrap {
  position: relative;
  width: 96px; height: 96px;
}
.gsettings-avatar-wrap img,
.gsettings-avatar-fallback {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #003580, #5BA3FF);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,74,173,.18);
}
.gsettings-avatar-edit {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent, #004AAD);
  border: 3px solid var(--surface, #fff);
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
}
.gsettings-avatar-edit:hover { transform: scale(1.05); }
body:not(.theme-light) .gsettings-avatar-edit {
  border-color: #1B232E;
}
.gsettings-name-big {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -.2px;
}
.gsettings-members-count {
  font-size: 14px;
  color: var(--text-sec, #888);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
 *  Group-settings: Действия (invite/mute) + Danger (clear/leave)
 *  iOS-style сгруппированные пиллы.
 * ════════════════════════════════════════════════════════════════ */
.gsettings-actions, .gsettings-danger {
  margin-top: 14px !important;
  padding: 0 !important;
  background: var(--bg-input, #F1F4F9);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  flex-basis: auto !important;
  height: auto !important;
}
body:not(.theme-light) .gsettings-actions,
body:not(.theme-light) .gsettings-danger { background: #1B232E; }
.gsettings-actions .gsettings-label {
  padding: 12px 16px 6px !important;
  background: transparent !important;
}
.gsettings-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .12s;
}
.gsettings-row:hover { background: rgba(0,74,173,.06); }
.gsettings-row + .gsettings-row {
  border-top: 0.5px solid var(--border);
}
.gsettings-row svg { flex-shrink: 0; color: var(--accent); }
.gs-row-value {
  margin-left: auto;
  color: var(--text-sec);
  font-size: 14px;
  font-weight: 400;
}
.gsettings-danger-row {
  color: #DC2626 !important;
}
.gsettings-danger-row svg { color: #DC2626 !important; }
.gsettings-danger-row:hover {
  background: rgba(220,38,38,.06);
}
.gsettings-danger-row + .gsettings-danger-row {
  border-top: 1px solid rgba(220,38,38,.12);
}

/* ════════════════════════════════════════════════════════════════
 *  Channel post — Telegram-style card (не bubble с уголком)
 *  ────────────────────────────────────────────────────────────
 *  Жалоба: «не нравится дизайн поста в канале»
 *  Делаем чистую карточку без хвостика, во всю ширину, с компактным
 *  header'ом (название канала + время + просмотры) и аккуратным
 *  footer'ом (реакции pill-ами, кнопки действий).
 *  Inline-комментарий скрыт по умолчанию — показывается только при
 *  клике на «Комментарии».
 * ════════════════════════════════════════════════════════════════ */
.msg-wrap.in .bubble.bubble--channel-post,
.msg-wrap.out .bubble.bubble--channel-post {
  /* Карточка во всю ширину чата */
  max-width: 96% !important;
  width: 96% !important;
  margin: 0 auto !important;
  background: var(--surface, #ffffff) !important;
  border: 0.5px solid var(--border, rgba(0,0,0,.08)) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,30,60,.04) !important;
  padding: 14px 16px 0 !important;
  color: var(--text) !important;
}
body:not(.theme-light) .msg-wrap.in .bubble.bubble--channel-post,
body:not(.theme-light) .msg-wrap.out .bubble.bubble--channel-post {
  background: #1B232E !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Убираем хвостик (уголок) у карточки канала — он только у обычных bubble */
.msg-wrap.in .bubble.bubble--channel-post::before,
.msg-wrap.out .bubble.bubble--channel-post::before {
  display: none !important;
}
/* Время сообщения внутри bubble — отодвигаем от footer'а */
.bubble.bubble--channel-post .msg-time {
  color: var(--text-sec, #888) !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
/* Post-actions: чистый footer с границей сверху + подписи под иконками */
.bubble.bubble--channel-post .post-actions {
  margin: 12px -16px 0 !important;
  padding: 4px 6px !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.08)) !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 2px !important;
  display: flex !important;
  align-items: center !important;
}
body:not(.theme-light) .bubble.bubble--channel-post .post-actions {
  border-top-color: rgba(255,255,255,.08) !important;
}
.bubble.bubble--channel-post .post-action {
  flex: 0 0 auto !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: var(--text-sec, #6b7280) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
}
.bubble.bubble--channel-post .post-action:hover {
  background: rgba(0,74,173,.06) !important;
  color: var(--accent, #004AAD) !important;
}
.bubble.bubble--channel-post .post-action svg {
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  flex-shrink: 0;
}
.bubble.bubble--channel-post .post-action.active {
  color: var(--accent, #004AAD) !important;
  background: rgba(0,74,173,.10) !important;
}
.bubble.bubble--channel-post .post-action.active svg path { fill: var(--accent, #004AAD) !important; }
.post-action__label { white-space: nowrap; }
.bubble.bubble--channel-post .post-action .post-action__count {
  display: inline !important;
  font-size: 13px;
  font-weight: 500;
}
/* Просмотры — справа, всегда видны */
.bubble.bubble--channel-post .post-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  color: var(--text-sec, #888) !important;
  font-size: 12.5px !important;
  padding-right: 4px !important;
}

/* Время поста (msg-time / msg-meta) для канал-поста — внутри карточки,
   мелким серым в правом нижнем углу bubble, рядом с просмотрами. */
.msg-wrap:has(.bubble.bubble--channel-post) .msg-meta {
  display: none !important; /* отдельная внешняя meta скрыта */
}
.bubble.bubble--channel-post .channel-post-time {
  font-size: 11.5px;
  color: var(--text-sec, #888);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
/* Views — справа, иконка-глаз через SVG не emoji */
.bubble.bubble--channel-post .post-views {
  margin-left: auto !important;
  color: var(--text-sec, #888) !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-right: 2px !important;
}
/* Inline-комментарии под постом канала — переопределяем темные дефолты,
   которые ломали внешний вид (тёмный grey-блок поверх белой карточки). */
.bubble.bubble--channel-post .post-comments-inline {
  margin: 0 -16px !important;
  padding: 0 !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.08)) !important;
  background: transparent !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
}
body:not(.theme-light) .bubble.bubble--channel-post .post-comments-inline {
  border-top-color: rgba(255,255,255,.08) !important;
}
.bubble.bubble--channel-post .pci-list {
  padding: 4px 16px 0 !important;
  background: transparent !important;
}
.bubble.bubble--channel-post .pci-list .comment-row,
.bubble.bubble--channel-post .pci-list > div {
  padding: 10px 0 !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.06)) !important;
}
.bubble.bubble--channel-post .pci-list > div:first-child {
  border-top: none !important;
}
/* Input — плоский, без серого блока */
.bubble.bubble--channel-post .pci-input {
  padding: 10px 16px !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.06)) !important;
  background: transparent !important;
  gap: 8px !important;
  align-items: center !important;
}
.bubble.bubble--channel-post .pci-field {
  flex: 1 !important;
  background: var(--bg-input, #F1F4F9) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
}
body:not(.theme-light) .bubble.bubble--channel-post .pci-field {
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}
.bubble.bubble--channel-post .pci-field:focus {
  background: var(--bg-input-focus, #E8ECF2) !important;
}
.bubble.bubble--channel-post .pci-send {
  width: 36px !important; height: 36px !important;
  background: var(--accent, #004AAD) !important;
  border-radius: 50% !important;
  border: none !important;
  flex-shrink: 0 !important;
}
.bubble.bubble--channel-post .pci-send svg { fill: white !important; }

/* Inline-комментарий: скрыт по умолчанию, показывается через .open */
.bubble.bubble--channel-post .post-quick-comment {
  display: none !important;
  margin: 0 -16px !important;
  padding: 10px 14px !important;
  border-top: 0.5px solid var(--border, rgba(0,0,0,.08)) !important;
  background: var(--bg-input, #F1F4F9) !important;
  border-radius: 0 0 14px 14px !important;
  gap: 8px !important;
  align-items: center !important;
}
.bubble.bubble--channel-post .post-quick-comment.open {
  display: flex !important;
}
.bubble.bubble--channel-post .pqc-field {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.bubble.bubble--channel-post .pqc-send {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--accent, #004AAD) !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.bubble.bubble--channel-post .pqc-send svg {
  fill: white !important;
}

/* Реакции внутри bubble канала — pill-стиль (как у Telegram) */
.bubble.bubble--channel-post .msg-reactions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}
.bubble.bubble--channel-post .reaction-pill {
  background: rgba(0,74,173,.08) !important;
  border: 0.5px solid transparent !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--accent, #004AAD) !important;
  cursor: pointer !important;
  transition: background .12s !important;
}
.bubble.bubble--channel-post .reaction-pill:hover {
  background: rgba(0,74,173,.14) !important;
}
.bubble.bubble--channel-post .reaction-pill.mine {
  background: var(--accent, #004AAD) !important;
  color: white !important;
}

/* Wrapper для канал-постов — центрируем в чате */
.msg-wrap.in.has-channel-post,
.msg-wrap.out.has-channel-post,
.msg-wrap:has(.bubble.bubble--channel-post) {
  align-self: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
 *  Create-group modal — отступы между разделами
 *  Жалоба: «слово участники прилипла» — section-header «УЧАСТНИКИ»
 *  стоял вплотную к textarea «Описание». Делаем зазор ровно как у iOS
 *  Settings — раздел отделён 18px от предыдущего контента.
 * ════════════════════════════════════════════════════════════════ */
.members-section { margin-top: 18px !important; }
.members-section-title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .8px !important;
  color: var(--text-sec) !important;
}

/* ════════════════════════════════════════════════════════════════
 *  MOBILE TWEAKS (≤768px)
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .messages-list { padding: 12px 12px 8px !important; }
  .composer { padding: 8px 10px !important; }

  /* На мобиле в styles.css был override .chat-name 16px / .chat-preview 14px —
     с !important перебиваем на наш Telegram-размер 15/14. */
  .chat-item { padding: 10px 12px !important; gap: 12px !important; }
  .chat-name    { font-size: 15px !important; }
  .chat-preview { font-size: 13.5px !important; }
  .chat-time    { font-size: 11.5px !important; }
  .stab         { font-size: 13px !important; padding: 6px 12px !important; }

  /* Sidebar-title на мобиле — поменьше чтоб «Ринат Рашидович» точно влез */
  .sidebar-title { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════
 *  COMMENTS-THREAD SCREEN — Telegram-style discussion view
 *  Открывается тапом по «💬» под постом канала/группы.
 *  Slide-in справа поверх .chat-view.
 * ════════════════════════════════════════════════════════════════ */
#comments-thread-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 7000 !important;
  background: var(--bg, #F2F4F8) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: ctSlideIn .22s cubic-bezier(.32,.72,0,1) !important;
}
@keyframes ctSlideIn {
  from { transform: translateX(100%); opacity: .9; }
  to   { transform: translateX(0);    opacity: 1; }
}
#comments-thread-screen[hidden],
#comments-thread-screen[style*="display:none"],
#comments-thread-screen[style*="display: none"] {
  display: none !important;
}

/* Закреплённый сверху превью оригинального поста */
.ct-pinned-post {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  cursor: pointer;
  transition: background .15s;
}
.ct-pinned-post:active { background: rgba(0,0,0,.04); }
.ct-pinned-post:empty { display: none !important; }
.ct-pinned-post .ctpp-bar {
  width: 3px;
  align-self: stretch;
  background: var(--accent, #004AAD);
  border-radius: 2px;
  flex-shrink: 0;
}
.ct-pinned-post .ctpp-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ct-pinned-post .ctpp-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #004AAD);
  margin-bottom: 2px;
}
.ct-pinned-post .ctpp-text {
  font-size: 13.5px;
  color: var(--text, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ct-pinned-post .ctpp-thumb {
  width: 38px; height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* readonly-bar внутри треда (когда комменты выключены) */
#ct-readonly-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  color: rgba(0,0,0,.55);
  font-size: 14px;
}

/* iOS-style toggle switch для Group Settings */
.gsettings-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px; height: 28px;
  background: #c7cdd6;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  border: 0;
  outline: none;
}
.gsettings-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.gsettings-switch:checked { background: var(--accent, #004AAD); }
.gsettings-switch:checked::after { transform: translateX(18px); }

#gsettings-toggles-section { display: flex; flex-direction: column; gap: 4px; }

/* Comments-thread input: запрет ручного ресайза angle, чтобы юзер не растягивал textarea и не "терял" самолётик */
#ct-input {
  resize: none !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  background: transparent !important;
  font-family: inherit !important;
  color: var(--text, #1A1A1A) !important;
}

/* ════════════════════════════════════════════════════════════════
 *  CALLS — Полный согласованный редизайн (incoming + active + group)
 *  Брендовый синий gradient вместо purple-pink из исходного прототипа.
 *  Glass-pill стиль (rgba black + blur), pulsing rings, quick replies,
 *  PiP в правом верхнем углу, лейблы под кнопками.
 * ════════════════════════════════════════════════════════════════ */

/* ═══ INCOMING CALL — fullscreen с pulsing rings + quick replies ═══
   ВАЖНО: НЕ ставим display:flex !important — иначе hideIncomingModal()
   с инлайн display:none не сработает и звонок зависнет. */
.incoming-call-modal--v2 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: linear-gradient(165deg, #0A1A3A 0%, #1659C8 45%, #004AAD 100%) !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.incoming-call-modal--v2 .inc-bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(91,163,255,0.25) 0%, transparent 45%),
              radial-gradient(circle at 50% 90%, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none;
}
.incoming-call-modal--v2 .inc-type-pill {
  margin-top: calc(env(safe-area-inset-top, 0px) + 24px);
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  letter-spacing: 0.3px;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-avatar-wrap {
  position: relative;
  margin-top: 60px;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  animation: incPulse 2.4s ease-out infinite;
}
.incoming-call-modal--v2 .inc-ring--1 { inset: -28px; animation-delay: 0s; }
.incoming-call-modal--v2 .inc-ring--2 { inset: -56px; animation-delay: .8s; border-color: rgba(255,255,255,0.10); }
@keyframes incPulse {
  0%   { transform: scale(0.95); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.incoming-call-modal--v2 .inc-avatar {
  width: 156px !important; height: 156px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5BA3FF, #004AAD) !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  color: #fff !important;
  font-size: 56px !important; font-weight: 700 !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.12), 0 20px 60px rgba(0,0,0,0.4) !important;
  position: relative;
}
.incoming-call-modal--v2 .inc-name {
  margin-top: 24px;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-align: center;
  padding: 0 24px;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-username {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-username:empty { display: none; }

/* Quick reply pills */
.incoming-call-modal--v2 .inc-quick-replies {
  margin-top: auto;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-quick-reply {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .12s, background .12s;
  white-space: nowrap;
  max-width: 90vw;
  text-overflow: ellipsis;
  overflow: hidden;
}
.incoming-call-modal--v2 .inc-quick-reply:active { transform: scale(.96); background: rgba(0,0,0,0.45); }

/* Кнопки accept/reject + labels снизу */
.incoming-call-modal--v2 .inc-actions {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  width: 100%;
  padding: 0 32px calc(env(safe-area-inset-bottom, 0px) + 30px);
  gap: 24px;
  z-index: 2;
}
.incoming-call-modal--v2 .inc-action-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.incoming-call-modal--v2 .inc-btn {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s;
}
.incoming-call-modal--v2 .inc-btn:active { transform: scale(.92); }
.incoming-call-modal--v2 .inc-btn.reject {
  background: #EF4444 !important;
  box-shadow: 0 14px 36px rgba(239,68,68,0.5) !important;
}
.incoming-call-modal--v2 .inc-btn.reject svg { transform: rotate(135deg); }
.incoming-call-modal--v2 .inc-btn.accept {
  background: #22C55E !important;
  box-shadow: 0 14px 36px rgba(34,197,94,0.5) !important;
  animation: incAcceptShake 2s ease-in-out infinite;
}
@keyframes incAcceptShake {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-6deg); }
  20%, 40% { transform: rotate(6deg); }
  50%      { transform: rotate(0); }
}
.incoming-call-modal--v2 .inc-action-label {
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

/* ═══ ACTIVE CALL — fullscreen с glass-pill верхним баром, лейблами и PiP ═══
   ВАЖНО: НЕ ставим display:flex !important — иначе hideOverlay() с inline
   display:none не сработает и оверлей зависнет на экране. */
.call-overlay.call-overlay--v2 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8500 !important;
  background: linear-gradient(160deg, #0A1A3A 0%, #1659C8 50%, #004AAD 100%) !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.call-overlay--v2 .call-bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(91,163,255,0.20) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* Top bar: glass pills */
.call-overlay--v2 .call-top-bar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0;
  z-index: 5;
}
.call-overlay--v2 .call-top-bar > .call-glass-pill:first-child { margin-right: auto; }
.call-glass-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.call-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.30);
}

/* Big avatar в центре (для аудио / camera-off) */
.call-overlay--v2 .call-info {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  z-index: 2;
}
.call-overlay--v2 .call-avatar {
  width: 156px !important;
  height: 156px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5BA3FF, #004AAD) !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  color: #fff !important;
  font-size: 56px !important; font-weight: 700 !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.12), 0 20px 60px rgba(0,0,0,0.4) !important;
}
.call-overlay--v2 .call-name {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* В режиме видео — скрываем большой аватар, видео сам fullscreen */
.call-overlay--v2 .call-video-wrap:not([style*="display:none"]) ~ .call-info {
  display: none !important;
}

/* Video full-screen + PiP в правом верхнем углу */
.call-overlay--v2 .call-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #000 !important;
}
.call-overlay--v2 .call-video-wrap video:not(.call-pip) {
  width: 100%; height: 100%;
  object-fit: cover;
}
.call-overlay--v2 .call-pip {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
  right: 14px !important;
  bottom: auto !important; left: auto !important;
  width: 100px !important; height: 140px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.4) !important;
  z-index: 3 !important;
  object-fit: cover;
  cursor: pointer;
}
.call-overlay--v2 .call-pip-label {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 70px + 140px - 28px);
  right: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  z-index: 4;
}
.call-overlay--v2 .call-video-wrap[style*="display:none"] ~ .call-pip-label { display: none; }

/* Action buttons grid (5 кнопок: динамик, мик, видео, камера, завершить) */
.call-overlay--v2 .call-actions {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  align-items: end;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  gap: 6px;
  z-index: 5;
}
.call-overlay--v2 .call-action-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.call-overlay--v2 .call-btn {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.call-overlay--v2 .call-btn:active { transform: scale(.94); }
/* Active state — белая кнопка, текст синий */
.call-overlay--v2 .call-btn.on {
  background: #fff !important;
  color: var(--accent, #004AAD) !important;
  border-color: #fff !important;
}
.call-overlay--v2 .call-btn.off {
  background: rgba(239,68,68,0.55) !important;
  border-color: rgba(239,68,68,0.45) !important;
}
.call-overlay--v2 .call-btn.end {
  background: #EF4444 !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(239,68,68,0.5) !important;
  transform: none !important;
}
.call-overlay--v2 .call-btn.end:active { transform: scale(.94) !important; }
.call-overlay--v2 .call-btn-label {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Старая большая call-timer убрана — теперь таймер в верхнем баре */
.call-overlay--v2 .call-timer { display: none !important; }
.call-overlay--v2 #call-state { font-weight: 600; }


/* Убрать "овал" фон под кнопками звонка — кнопки должны просто плавать */
.call-overlay .call-actions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
}

/* ════════════════════════════════════════════════════════════════
 *  ACTIVE CALL — iOS-style (согласованный мокап 2×3 + End)
 * ════════════════════════════════════════════════════════════════ */
.call-overlay.call-overlay--ios {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8500 !important;
  background: linear-gradient(160deg, #0F1F4D 0%, #1A3C7F 40%, #2A5BB8 100%) !important;
  color: #fff !important;
  font-family: inherit !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Decorative soft glow для глубины */
.call-overlay--ios::before {
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 30%, rgba(91,163,255,.30) 0%, transparent 50%),
              radial-gradient(circle at 30% 75%, rgba(0,74,173,.20) 0%, transparent 40%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Имя + статус + таймер сверху */
.call-overlay--ios .call-info {
  margin-top: calc(env(safe-area-inset-top, 0px) + 50px) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  z-index: 2;
  padding: 0 24px;
}
.call-overlay--ios .call-name {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px;
  color: #fff !important;
  margin: 0 !important;
}
.call-overlay--ios .call-state {
  font-size: 17px !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 !important;
}
.call-overlay--ios .call-timer {
  display: none !important; /* iOS показывает таймер в .call-state */
}
.call-overlay--ios[data-state="active"] .call-timer { display: block !important; font-size: 17px; color: rgba(255,255,255,0.7); }

/* Большой аватар в центре */
.call-overlay--ios > .call-avatar {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5BA3FF, #004AAD) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 50px !important;
  font-weight: 600 !important;
  margin: 42px auto 0 !important;
  z-index: 2 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
}

/* 2×3 grid кнопок */
.call-overlay--ios .call-actions--grid {
  margin-top: auto !important;
  margin-bottom: 28px !important;
  padding: 0 36px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px 28px !important;
  width: 100% !important;
  z-index: 2 !important;
  /* override старого .call-actions (round pill background) */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  animation: none !important;
}
.call-overlay--ios .cab-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.call-overlay--ios .call-btn {
  width: 68px !important; height: 68px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px) !important;
  border: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .12s, background .12s !important;
}
.call-overlay--ios .call-btn:active { transform: scale(.92); }
.call-overlay--ios .call-btn.on {
  background: #fff !important;
  color: #004AAD !important;
}
.call-overlay--ios .call-btn.off {
  background: rgba(255,59,48,0.55) !important;
}
.call-overlay--ios .cab-label {
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

/* Большая красная End-call внизу (отдельно) */
.call-overlay--ios .call-end-wrap {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.call-overlay--ios .call-end-btn-big {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  background: #FF3B30 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 12px 32px rgba(255,59,48,0.5) !important;
  transition: transform .12s !important;
}
.call-overlay--ios .call-end-btn-big:active { transform: scale(.94); }


/* ════════════════════════════════════════════════════════════════
 *  VIDEO CALL — iOS-style (согласованный мокап)
 *  Полноэкранное remote-video как фон, PiP top-right, glass-overlay
 *  сверху, кнопки с glass-gradient бэкдропом внизу.
 * ════════════════════════════════════════════════════════════════ */
.call-overlay--ios.video {
  background: #0A0F1F !important;
}
.call-overlay--ios.video::before { display: none !important; }

/* Video fullscreen background */
.call-overlay--ios.video .call-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #000 !important;
}
.call-overlay--ios.video .call-video-wrap video:not(.call-pip) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* PiP с моим потоком зеркалим (так уже знакомо по WhatsApp/Telegram) */
.call-overlay--ios .call-pip[data-streaming="1"] {
  transform: scaleX(-1);
}

/* PiP — правый верхний угол */
.call-overlay--ios.video .call-pip {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
  right: 14px !important;
  bottom: auto !important; left: auto !important;
  width: 100px !important; height: 140px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.4) !important;
  z-index: 5 !important;
  object-fit: cover;
  cursor: pointer;
}

/* Top info как glass-overlay */
.call-overlay--ios.video .call-info {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 24px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent) !important;
  z-index: 4 !important;
  text-align: center !important;
}
.call-overlay--ios.video .call-name {
  font-size: 18px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}
.call-overlay--ios.video .call-state {
  font-size: 13px !important;
  margin-top: 2px !important;
}

/* Большой аватар собеседника — показываем в video-режиме ПОКА peer не отвечает.
   Когда придёт удалённый стрим (ontrack), JS добавит data-has-remote=1 → аватар прячется.
   Видеть аватар собеседника на чёрном фоне (как FaceTime) гораздо приятнее
   чем просто чёрный прямоугольник. */
.call-overlay--ios.video > .call-avatar {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 140px !important; height: 140px !important;
  border-radius: 70% !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 2 !important; /* над .call-video-wrap (z-index:1) но под .call-info и кнопками */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0.06) !important;
  background-color: linear-gradient(135deg, #003580, #5BA3FF) !important;
}
/* Скрываем большой аватар когда peer уже стримит */
.call-overlay--ios.video[data-has-remote="1"] > .call-avatar {
  display: none !important;
}

/* Bottom backdrop под кнопками — gradient для читаемости на видео */
.call-overlay--ios.video .call-actions--grid,
.call-overlay--ios.video .call-end-wrap {
  position: relative;
  z-index: 5;
}
.call-overlay--ios.video .call-actions--grid {
  margin-top: auto !important;
  padding-top: 28px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 60%, transparent 100%) !important;
}
.call-overlay--ios.video .call-end-wrap {
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.55)) !important;
}
/* Чуть меньше кнопки в видео-режиме чтобы PiP не наезжал */
.call-overlay--ios.video .call-btn {
  width: 60px !important; height: 60px !important;
}
.call-overlay--ios.video .call-end-btn-big {
  width: 68px !important; height: 68px !important;
}
.call-overlay--ios.video .cab-label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ui-faded — скрытие UI по тапу/кнопке. Возврат — кнопка call-ui-toggle
   (она ВСЕГДА видима, не fade-ится). End-wrap ТОЖЕ остаётся видна на всякий случай. */
.call-overlay--ios.video.ui-faded .call-info,
.call-overlay--ios.video.ui-faded .call-actions--grid {
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
/* End-button ОСТАЁТСЯ видна — нельзя терять возможность завершить звонок */
.call-overlay--ios.video.ui-faded .call-end-wrap {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.call-overlay--ios.video .call-info,
.call-overlay--ios.video .call-actions--grid,
.call-overlay--ios.video .call-end-wrap {
  transition: opacity .25s ease;
}

/* Кнопка показать/скрыть UI — всегда видна (даже в ui-faded) */
.call-ui-toggle {
  display: none;  /* по умолчанию (не video режим) */
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 10;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, background .15s ease;
}
.call-ui-toggle:active { transform: scale(0.9); }
/* В video-режиме — показываем */
.call-overlay--ios.video .call-ui-toggle {
  display: flex;
}
/* В ui-faded меняем иконку (показываем «глаз с palochkoi», предлагающий показать) */
.call-overlay--ios.video.ui-faded .call-ui-toggle .cui-icon-show { display: none; }
.call-overlay--ios.video.ui-faded .call-ui-toggle .cui-icon-hide { display: block !important; }
.call-overlay--ios.video:not(.ui-faded) .call-ui-toggle .cui-icon-show { display: block; }
.call-overlay--ios.video:not(.ui-faded) .call-ui-toggle .cui-icon-hide { display: none !important; }
.call-overlay--ios.video .call-info,
.call-overlay--ios.video .call-actions--grid,
.call-overlay--ios.video .call-end-wrap {
  transition: opacity .25s ease;
}

/* Перебиваем старые pill-стили на имя/state/timer в video-mode (они от .call-overlay.video из styles.css) */
.call-overlay--ios.video .call-name {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
  box-shadow: none !important;
}
.call-overlay--ios.video .call-state,
.call-overlay--ios.video .call-timer {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Таймер прячем — он в .call-state теперь */
.call-overlay--ios.video .call-timer { display: none !important; }

/* End-wrap — без черного фона/border-box */
.call-overlay--ios .call-end-wrap {
  background: transparent !important;
  border: none !important;
}
.call-overlay--ios.video .call-end-wrap {
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.55) 30%, transparent) !important;
  padding-top: 0 !important;
}

/* Старая .call-overlay.video::before (gradient) не нужна в новом дизайне */
.call-overlay--ios.video::before { display: none !important; }

/* ════════════════════════════════════════════════════════════════
 *  VIDEO CALL — фиксы по фидбеку с телефона
 *    • убираем "play" overlay на video (Android WebView default)
 *    • убираем чёрные прямоугольники под кнопками и End
 *    • тап по экрану скрывает UI
 * ════════════════════════════════════════════════════════════════ */

/* Снимаем все системные controls с video в звонке */
.call-overlay--ios .call-video-wrap video::-webkit-media-controls,
.call-overlay--ios .call-video-wrap video::-webkit-media-controls-panel,
.call-overlay--ios .call-video-wrap video::-webkit-media-controls-play-button,
.call-overlay--ios .call-video-wrap video::-webkit-media-controls-overlay-play-button,
.call-overlay--ios .call-video-wrap video::-webkit-media-controls-start-playback-button,
.call-overlay--ios .call-video-wrap video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.call-overlay--ios .call-video-wrap video {
  background: #000 !important; /* тёмный фон когда нет стрима — лучше чем default WebView grey */
  pointer-events: none;
}
/* PiP кликабельный для swap */
.call-overlay--ios .call-video-wrap .call-pip { pointer-events: auto !important; }
/* Скрываем PiP пока стрим не подключён (предотвращает белый прямоугольник с play) */
.call-overlay--ios .call-video-wrap .call-pip:not([data-streaming="1"]) {
  display: none !important;
}

/* Bottom gradient — один непрерывный fade без обрезок */
.call-overlay--ios.video .call-actions--grid {
  background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.30) 50%, transparent 100%) !important;
  padding-bottom: 18px !important;
}
.call-overlay--ios.video .call-end-wrap {
  background: rgba(0,0,0,0.50) !important; /* solid продолжение gradient — никаких видимых границ */
  padding-top: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  margin-top: 0 !important;
}

/* Active call (audio) — End-wrap чище */
.call-overlay--ios:not(.video) .call-end-wrap {
  background: transparent !important;
  padding-top: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
 *  VIDEO CALL — ПОЛНОСТЬЮ убираем чёрные полосы
 *  Читаемость кнопок на видео обеспечена text-shadow на labels + glass-blur кнопок
 * ════════════════════════════════════════════════════════════════ */
.call-overlay--ios.video .call-actions--grid {
  background: transparent !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.call-overlay--ios.video .call-end-wrap {
  background: transparent !important;
  padding-top: 0 !important;
}
.call-overlay--ios.video .cab-label {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4) !important;
}
.call-overlay--ios.video .call-info {
  background: transparent !important;
}
.call-overlay--ios.video .call-name {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.5) !important;
}
.call-overlay--ios.video .call-state {
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
/* Кнопки в видео — чуть плотнее backdrop-blur, чтобы виделось на любом фоне */
.call-overlay--ios.video .call-btn {
  background: rgba(0,0,0,0.35) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
.call-overlay--ios.video .call-btn.on {
  background: #fff !important;
  color: #004AAD !important;
}