/* ───────────────────────────────────────────────────────────
   Страница трансляции — раскладка (десктоп)

   ┌──────────────────────────────────────────────┐
   │ топбар (в app.vue, вне этой сетки)           │
   ├────────────────────────────┬─────────────────┤
   │                            │ .stream-title   │
   │  .stream-player (iframe)   ├─────────────────┤
   │                            │ .stream-chat    │
   │                            │  ├ .chat-body   │
   ├────────────────────────────┤  └ .chat-form   │
   │ .stream-under (источники)  │                 │
   └────────────────────────────┴─────────────────┘

   Нижняя полоса слева и поле ввода справа имеют одну высоту
   (--stream-bottom-h), поэтому их края совпадают.
   ─────────────────────────────────────────────────────────── */

.stream-page {
  --stream-side-w: 500px;   /* ширина правой колонки: название + чат */
  --stream-title-h: 110px;  /* высота блока с названием и ссылкой */
  --stream-bottom-h: 70px;  /* полоса под плеером и поле ввода одновременно */
  /* --topbar-h сюда не пишем: его меряет useTopbar() и кладёт на <html>.
     Локальное значение перебивало измеренное и уводило высоту плеера. */

  display: flex;
  flex-direction: column;
  /* Страница ровно в экран: прокрутки нет. Вычитаем и шапку, и бегущую
     строку под ней — иначе экран длиннее окна ровно на высоту дорожки.
     Обе величины меряет useTopbar(). */
  height: calc(100vh - var(--topbar-h, 48px) - var(--ticker-h, 0px));
  overflow: hidden;
}

.stream-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ─── Левая колонка ─────────────────────────────────────── */

.stream-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stream-player {
  position: relative;   /* для оверлея .source-loading */
  flex: 1;
  min-height: 0;
  background: #000;
}

.stream-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* Строка контролов над названием: источники слева, помощь справа. */
.stream-title__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* В общих стилях у .source-select есть центрирующий margin-left: auto —
   сбрасываем, чтобы кнопка встала слева. */
.stream-title__controls .source-select,
.stream-title__controls .source-select__btn {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  float: none;
}

.stream-title__controls .source-select {
  margin: 0 auto 0 0;
  flex: 0 0 auto;
}

.stream-title__controls .source-select__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* ─── Правая колонка ────────────────────────────────────── */

.stream-side {
  width: var(--stream-side-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #111;
  border-left: 1px solid #222;
}

.stream-title {
  /* min-height, а не height: при фиксированной высоте и центрировании
     длинное название вылезало вверх и срезалось overflow'ом родителя. */
  min-height: var(--stream-title-h);
  height: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: #000;
  border-bottom: 1px solid #222;
}

.stream-title__text {
  margin: 0;
  font-family: 'Mozilla Text', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;

  /* Длинное слово без пробелов переносится, а не вылезает за край. */
  overflow-wrap: anywhere;
}

/* ─── Ссылка на трансляцию ──────────────────────────────── */

.stream-share {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  flex-shrink: 0;
  padding: 0 4px 0 12px;
  border-radius: 8px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.10);
}

.stream-share__url {
  flex: 1;
  min-width: 0;              /* без этого ellipsis не сработает во flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgba(234,240,255,.75);
}

.stream-share__btn {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}

.stream-share__btn:hover { background: rgba(255,255,255,.18); }
.stream-share__btn:active { transform: translateY(1px); }

.stream-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Чат внутри правой колонки ─────────────────────────── */
/* Задаём геометрию здесь, а не в общих стилях чата, чтобы
   не сломать ChatBox в других местах сайта. */

/* ChatBox изначально был панелью фиксированной ширины —
   здесь снимаем это ограничение и растягиваем на всю колонку. */
.stream-chat .chat-wrap {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stream-chat .chat-body {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow-y: auto;
}

/* Ровно та же высота, что у полосы слева — края совпадают. */
.stream-chat .chat-form {
  height: var(--stream-bottom-h);
  width: 100%;
  max-width: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-top: 1px solid #222;
  background: #000;
}

/* Поле ввода занимает всё, что осталось от кнопки отправки. */
.stream-chat .chat-form__pill {
  flex: 1;
  min-width: 0;
}

/* ─── Пустая страница ───────────────────────────────────── */

.stream-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  color: #aaa;
}

.stream-notfound__back {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Мобильная версия ──────────────────────────────────── */
/* Временная заглушка, чтобы не разваливалось на телефоне.
   Нормальную раскладку сделаем отдельно. */

@media (max-width: 768px) {

  /* На телефоне плеер, чат и лента в один экран не помещаются —
     здесь страница снова обычной высоты и прокручивается. */
  .stream-page {
    height: auto;
    min-height: calc(100vh - var(--topbar-h, 48px) - var(--ticker-h, 0px));
    overflow: visible;
  }

  .stream-layout {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .stream-left {
    flex: 0 0 auto;
  }

  .stream-player {
    --player-offset: 15px;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: visible;
  }

  /* Увеличиваем отрисованное содержимое iframe целиком,
     лишнее срезает overflow у родителя.
     Менять только число в scale(): 1 — без обрезки. */
  .stream-player .stream-iframe {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center center;
  }
  .stream-side {
    width: 100%;
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid #222;
  }

  .stream-title {
    min-height: 0;
    padding: 4.5px 16px;
    gap: 8px;
  }

  .stream-title__text {
    font-size: 17px;
  }
}

/* В разметке чата есть id (#chatBody, #chatForm), а селектор по id
   весит больше любых классов. Перебиваем теми же id вместе с классом. */

.stream-page .stream-side .stream-chat,
.stream-page .stream-side .stream-chat .chat-wrap,
.stream-chat #chatBody,
.stream-chat #chatForm {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.stream-chat #chatForm {
  height: var(--stream-bottom-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.stream-chat #chatBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* =====================================================================
   ЛЕНТА ДРУГИХ ТРАНСЛЯЦИЙ
   Узкая полоса под плеером и чатом. Карточки компактные (MiniEventCard)
   и едут вбок: большой ряд .erow в такой высоте сплющивался.
   ===================================================================== */

.stream-more {
  /* Полоса внизу экрана: высоту забирает у плеера один раз и держит её.
     Карточки едут вбок внутри полосы, поэтому страница не растёт. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--fz-stroke, #3941547a);
  background: var(--fz-bg, #1b1f2a);
}

.stream-more__head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.stream-more__title {
  margin: 0;
  line-height: 1;
  font-family: 'Mozilla Text', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.stream-more__all {
  font-family: 'Mozilla Text', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffee00;
  text-decoration: none;
  white-space: nowrap;
}

.stream-more__all:hover { color: #fff; }

/* ─── Лента вбок ──────────────────────────────────────────── */

.stream-more__rail {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-more__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;

  /* Полосу прокрутки прячем: ленту двигают стрелки и свайп */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.stream-more__list::-webkit-scrollbar { display: none; }

.stream-more__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 66px;
  border: 1px solid var(--fz-stroke, #3941547a);
  border-radius: 8px;
  background: var(--fz-row-2, #1f2431);
  color: #cfd6e4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.stream-more__arrow:hover { background: #2c3444; color: #fff; }

@media (max-width: 768px) {
  .stream-more { padding: 8px 10px 10px; }
  .stream-more__title { font-size: 13px; }
  /* На телефоне ленту листают пальцем — стрелки только заняли бы место */
  .stream-more__arrow { display: none; }
}

/* =====================================================================
   ВЫРАВНИВАНИЕ ПРАВОЙ КОЛОНКИ
   Порядок блоков не менялся — подогнаны только отступы и размеры.
   Одна вертикаль на всю колонку: 12px от левого края у названия,
   ссылки, сообщений и поля ввода. Раньше у каждого блока было своё
   значение (16, 12, 22, 30), и колонка выглядела рассыпанной.
   ===================================================================== */

.stream-title {
  gap: 8px;
  padding: 12px;
}

.stream-title__text { font-size: 20px; }

.stream-share {
  height: 30px;
  padding: 0 4px 0 10px;
}

/* Сообщения тянутся во всю ширину, а текст встаёт на ту же
   вертикаль, что и название сверху. Полоса чередования при этом
   идёт от края до края и не выглядит обрубленной. */
.stream-chat .chat-body { padding: 8px 0 10px; }

.stream-chat .chat-msg {
  padding: 3px 12px;
  border-radius: 0;
}

.stream-chat .chat-msg--system {
  padding: 8px 12px;
  margin: 0 0 4px;
}

/* Затемнения над полем ввода больше нет: оно только пачкало
   нижние сообщения и полоску ответа. */
.stream-chat .chat-wrap::before { display: none; }

.stream-chat .chat-form {
  gap: 10px;
  padding: 0 12px;
}

.stream-chat .chat-form__pill {
  height: 42px;
  padding: 0 8px 0 12px;
  border-radius: 8px;
}

.stream-chat .chat-form input { font-size: 14px; }

.stream-chat .chat-form button#chatSend {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.stream-chat .chat-form button#chatSend svg { width: 20px; height: 20px; }

/* Строка ошибки на той же вертикали, что и всё остальное */
.stream-chat .chat-error { margin: 0 12px 6px; }

@media (max-width: 768px) {
  .stream-title { padding: 10px 12px; }
  .stream-title__text { font-size: 18px; }
}

/* =====================================================================
   ТЕЛЕФОН: ЧАТ НЕ ТЯНЕТ СТРАНИЦУ ВНИЗ
   Раньше у правой колонки не было заданной высоты, поэтому список
   сообщений рос вместе с содержимым, а вместе с ним росла и страница:
   каждое отправленное сообщение делало её длиннее.
   Теперь колонке задана высота от окна, а прокручивается сам список.

   Единица dvh, а не vh: она учитывает выехавшую клавиатуру и
   сворачивающуюся панель браузера, поэтому поле ввода не уезжает
   под клавиатуру при наборе.
   ===================================================================== */

@media (max-width: 768px) {

  .stream-page {
    min-height: calc(100dvh - var(--topbar-h, 48px) - var(--ticker-h, 0px));
  }

  .stream-side {
    /* Что осталось от экрана после плеера 16:9 (это 56.25vw) */
    height: calc(100dvh - 56.25vw - var(--topbar-h, 48px) - var(--ticker-h, 0px));
    min-height: 300px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .stream-chat {
    flex: 1 1 auto;
    min-height: 0;
  }

  .stream-chat .chat-wrap { min-height: 0; }

  /* Прокрутка живёт здесь, а не у страницы */
  .stream-chat #chatBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Полоса ввода ниже — под большой палец, и без запаса на вырез */
  .stream-chat #chatForm {
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =====================================================================
   ПРОКРУТКА НА СТРАНИЦЕ ТРАНСЛЯЦИИ

   overscroll-behavior на html и body сюда не доставал. На главной
   прокручивается сама страница, и правило на корне её и держит. А здесь
   страница зафиксирована (.stream-page — overflow: hidden), прокрутка
   живёт внутри: в теле чата и в ленте других трансляций. Это отдельные
   области прокрутки, и резинка у них своя — до корня она не доходит,
   поэтому корневое правило их не касается.

   contain, а не none: внутри чата прокрутка нужна, гасим только выход
   за край — чтобы, долистав до конца сообщений, не начать тянуть
   за собой всю страницу.

   Стоит в самом конце файла: правила выше по файлу с такой же
   специфичностью иначе перебили бы эти.
   ===================================================================== */

.stream-chat .chat-body,
.stream-chat #chatBody {
  overscroll-behavior-y: contain;
}

.stream-more__list {
  overscroll-behavior-x: contain;
}

/* Сама страница не прокручивается вовсе — ни колесом, ни пальцем */
.stream-page {
  overscroll-behavior: none;
}

@media (max-width: 768px) {
  .stream-chat #chatBody {
    overscroll-behavior-y: contain;
  }
}

/* =====================================================================
   ТЕЛЕФОН: ПЛЕЕР ПО ЦЕНТРУ, НИЖНЯЯ ПАНЕЛЬ
   Чат закрыт:                          Чат открыт:
   ┌──────────────────────────┐         ┌──────────────────────────┐
   │ топбар                   │         │ топбар                   │
   ├──────────────────────────┤         ├──────────────────────────┤
   │                          │         │ плеер 16:9               │
   │ плеер 16:9 (по центру)   │         ├──────────────────────────┤
   │                          │         │ чат                      │
   ├──────────────────────────┤         ├──────────────────────────┤
   │ [Source] Назв. [Chat][?] │         │ [Source] Назв. [Chat][?] │
   └──────────────────────────┘         └──────────────────────────┘
   Название, ссылки и ленты других трансляций на телефоне нет.
   На десктопе панели и шапки чата нет.
   ===================================================================== */

.stream-dock,
.stream-chat__head { display: none; }

@media (max-width: 768px) {

  .stream-page {
    --dock-h: 56px;
    height: calc(100dvh - var(--topbar-h, 48px) - var(--ticker-h, 0px));
    min-height: 0;
    overflow: hidden;
    background: #000;
  }

  .stream-more { display: none; }

  /* ─── Плеер по центру между топбаром и панелью ─── */
  .stream-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    justify-content: center;
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .stream-left { flex: 0 0 auto; }

  /* Правая колонка на телефоне — только чат.
     Пока чат закрыт, у колонки нет высоты и она не видна,
     поэтому плеер стоит ровно по центру. */
  .stream-side {
    flex: 0 0 0;
    width: 100%;
    height: 0;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0;
    background: #000;
    border: none;
    box-sizing: border-box;
  }

  /* Название, ссылка и контролы на телефоне не показываются */
  .stream-title { display: none; }

  /* Чат открыт: плеер уходит наверх, чат занимает всё под ним */
  .stream-page--chat .stream-layout { justify-content: flex-start; }

  .stream-page--chat .stream-side {
    flex: 1 1 auto;
    height: auto;
    visibility: visible;
  }

  /* Чат — обычный блок внутри колонки, без выезда.
     Остаётся в DOM: комната и сообщения не сбрасываются. */
  .stream-chat,
  .stream-chat.stream-chat--open {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    transform: none;
    opacity: 1;
    visibility: inherit;
    pointer-events: auto;
    transition: none;
    background: #0b0b0b;
    border-top: 1px solid #222;
  }

  .stream-chat__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 4px 0 12px;
    border-bottom: 1px solid #222;
    box-sizing: border-box;
  }

  .stream-chat__head-title {
    font-family: 'Mozilla Text', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
  }

  .stream-chat__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(234,240,255,.75);
    cursor: pointer;
  }

  .stream-chat__close:active { background: rgba(255,255,255,.08); }

  /* Поле ввода стоит над панелью — запас под вырез ему не нужен */
  .stream-chat #chatForm {
    height: 56px;
    padding-bottom: 0;
  }

  /* ─── Нижняя панель ─── */
  .stream-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    height: calc(var(--dock-h) + env(safe-area-inset-bottom));
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #0d0f14;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  .stream-dock__source {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    min-width: 0;
    max-width: 32vw;
  }

  /* Название — всё место между кнопками, до двух строк */
  .stream-dock__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Mozilla Text', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .stream-dock__btn {
    height: 38px;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: #171a22;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease;
  }

  .stream-dock__btn:active { transform: scale(.97); }

  .stream-dock__btn.is-active {
    background: #232838;
    border-color: rgba(255,255,255,.25);
  }

  /* Chat — такая же кнопка, как остальные */
  .stream-dock__btn--chat { flex: 0 0 auto; }

  /* Ссылка «открыть плеер отдельно» выглядит как кнопка */
  a.stream-dock__btn { text-decoration: none; }

  .stream-dock__btn--icon {
    flex: 0 0 38px;
    width: 38px;
    padding: 0;
    color: rgba(234,240,255,.8);
  }

  .stream-dock__btn--icon svg {
    width: 18px;
    height: 18px;
  }

  .stream-dock__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .stream-dock__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Меню источников открывается вверх */
  .stream-dock__menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    min-width: 100%;
    max-width: calc(100vw - 20px);
    max-height: 50dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    box-sizing: border-box;
    background: #171a22;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
  }

  .stream-dock__item {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }

  .stream-dock__item:active { background: rgba(255,255,255,.08); }

  .stream-dock__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(234,240,255,.55);
    white-space: nowrap;
  }

  /* Окно помощи — на весь экран, поверх панели */
  .stream-help {
    position: fixed;
    z-index: 60;
  }
}

/* =====================================================================
   ТЕЛЕФОН: ПРОСТОЙ ВИД
   Нарочно без лоска: плоские серые цвета, маленькие скругления,
   без теней, анимаций и эффектов нажатия. Меняется только внешний вид —
   размеры, отступы и положение блоков остаются как выше.
   Убрать этот блок — вернётся прежний «аккуратный» вид.
   ===================================================================== */

@media (max-width: 768px) {

  /* Панель — просто серая полоса */
  .stream-dock {
    background: #1a1a1a;
    border-top: 1px solid #333;
    box-shadow: none;
  }

  /* Кнопки — обычные серые прямоугольники */
  .stream-dock__btn,
  .stream-dock__btn--chat,
  .stream-dock__btn--icon {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    transition: none;
    -webkit-tap-highlight-color: rgba(255,255,255,.2);
  }

  .stream-dock__btn:active { transform: none; background: #333; }

  .stream-dock__btn.is-active,
  .stream-dock__btn--chat.is-active {
    background: #3a3a3a;
    border-color: #555;
    color: #fff;
  }

  /* Название — обычный жирный текст */
  .stream-dock__title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #eee;
  }

  /* Меню источников — плоский список */
  .stream-dock__menu {
    border: 1px solid #444;
    border-radius: 0;
    background: #222;
    box-shadow: none;
    padding: 0;
    gap: 0;
  }

  .stream-dock__item {
    border-radius: 0;
    border-bottom: 1px solid #333;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
  }

  .stream-dock__item:last-child { border-bottom: 0; }
  .stream-dock__item:active { background: #333; }

  .stream-dock__empty {
    color: #888;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* Ссылка — как обычная ссылка в браузере */
  .stream-share__url {
    font-family: Arial, Helvetica, sans-serif;
    color: #6d9eeb;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: auto;
    transition: none;
    -webkit-tap-highlight-color: rgba(255,255,255,.2);
  }

  .stream-share__url.is-copied {
    color: #9c9c9c;
    text-decoration: none;
  }

  /* Шторка чата — появляется сразу, без выезда */
  .stream-chat,
  .stream-chat.stream-chat--open {
    transition: none;
    background: #111;
    border-top: 1px solid #333;
  }

  .stream-chat__head {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
  }

  .stream-chat__head-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #ddd;
  }

  .stream-chat__close {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #ddd;
  }

  .stream-chat__close:active { background: #333; }
}

/* Телефон: кнопку «Открыть плеер в новой вкладке» не показываем */
@media (max-width: 768px) {
  .stream-dock__btn.stream-dock__btn--newtab { display: none; }
}

/* Телефон: сообщения чата плотнее и мельче */
@media (max-width: 768px) {
  .stream-chat .chat-body { padding: 4px 0 6px; }

  .stream-chat .chat-msg {
    padding: 1px 10px 1px 14px;
    line-height: 1.3;
  }

  .stream-chat .chat-msg--system {
    padding: 4px 10px 4px 14px;
    margin: 0 0 2px;
  }

  .stream-chat .chat-msg__name {
    font-size: 12.5px;
    gap: 4px;
  }

  .stream-chat .chat-msg__text {
    font-size: 13.3px;
    line-height: 1.32;
  }

}

/* ─── Кнопка Refresh ─── */

/* ПК: справа от Source. Source больше не толкает всё вправо —
   это делает Refresh, и «?» остаётся у правого края. */
.stream-title__controls .source-select { margin: 0; }
.stream-title__controls .stream-refresh { margin-right: auto; cursor: pointer; }

/* ПК: Refresh в стиле «Самопал» — плоский серый прямоугольник */
.stream-title__controls .source-select__btn.stream-refresh {
  border: 1px solid #444;
  border-radius: 3px;
  background: #2a2a2a;
  color: #ddd;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  box-shadow: none;
  transition: none;
}

.stream-title__controls .source-select__btn.stream-refresh:hover { background: #333; color: #fff; }
.stream-title__controls .source-select__btn.stream-refresh:active { background: #3a3a3a; transform: none; }

/* Зелёный кружок «в эфире» перед словом Chat: плавно гаснет и загорается */
.stream-chat__head-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stream-chat__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: stream-live-dot 1.6s ease-in-out infinite;
}

@keyframes stream-live-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Телефон: в шапке чата, справа от слова Chat */
.stream-chat__refresh { display: none; }

@media (max-width: 768px) {
  /* Тот же «Самопал», что и на ПК. .stream-page впереди — чтобы
     никакие общие стили кнопок его не перебили. */
  .stream-page .stream-chat__refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    margin: 0 auto 0 10px;
    padding: 0 9px;
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
    transition: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255,255,255,.2);
  }

  .stream-page .stream-chat__refresh:active { background: #3a3a3a; color: #fff; transform: none; }
}

/* =====================================================================
   ТЕЛЕФОН: ЧАТ В СТИЛЕ «САМОПАЛ»
   Плоские серые цвета (#1a1a1a / #2a2a2a, рамка #444), Arial,
   скругление 3px, без теней, размытия и плавных переходов.
   Размеры и положение блоков не меняются — только внешний вид.
   ===================================================================== */

@media (max-width: 768px) {

  /* Сообщения — Arial, полоса чередования просто серая */
  .stream-page .stream-chat .chat-msg,
  .stream-page .stream-chat .chat-msg__name,
  .stream-page .stream-chat .chat-msg__text {
    font-family: Arial, Helvetica, sans-serif;
  }

  .stream-page .stream-chat .chat-msg { transition: none; }

  /* Полос нет: ни чередования строк, ни подсветки от касания.
     Жёлтая подсветка «это мне» и переход по цитате остаются. */
  .stream-page .stream-chat .chat-msg:not(.chat-msg--tome):not(.chat-msg--found),
  .stream-page .stream-chat .chat-msg:not(.chat-msg--tome):not(.chat-msg--found):nth-child(even),
  .stream-page .stream-chat .chat-msg:not(.chat-msg--tome):not(.chat-msg--found):hover {
    background: transparent;
  }

  /* Полоса ввода */
  .stream-page .stream-chat .chat-form {
    background: #1a1a1a;
    border-top: 1px solid #333;
  }

  .stream-page .stream-chat .chat-form__pill {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    box-shadow: none;
    transition: none;
  }

  .stream-page .stream-chat .chat-form__pill:focus-within { border-color: #666; }

  .stream-page .stream-chat .chat-form input,
  .stream-page .stream-chat .chat-form input::placeholder {
    font-family: Arial, Helvetica, sans-serif;
  }

  .stream-page .stream-chat .chat-form input::placeholder { color: #888; }

  /* Кнопка стикеров — без круга, просто иконка */
  .stream-page .stream-chat .chat-emoji-btn {
    border-radius: 3px;
    color: #bbb;
    transition: none;
  }

  .stream-page .stream-chat .chat-emoji-btn.is-open { background: #3a3a3a; color: #fff; }

  /* Отправка — серый квадрат, без свечения */
  .stream-page .stream-chat .chat-form button#chatSend {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #ddd;
    box-shadow: none;
    transition: none;
  }

  .stream-page .stream-chat .chat-form button#chatSend:active {
    background: #333;
    transform: none;
  }

  /* Delete у модератора */
  .stream-page .stream-chat .chat-admin-delete {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #e66;
    font-family: Arial, Helvetica, sans-serif;
    transition: none;
  }

  /* Полоска «Reply to» и цитаты */
  .stream-page .stream-chat .chat-reply {
    border-radius: 0;
    background: #222;
    font-family: Arial, Helvetica, sans-serif;
  }

  .stream-page .stream-chat .chat-reply__cancel {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #ddd;
  }

  .stream-page .stream-chat .chat-quote {
    border-radius: 0;
    background: #1c1c1c;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* Панель стикеров */
  .stream-page .stream-chat .chat-stickers {
    border: 1px solid #444;
    border-radius: 3px;
    background: #1a1a1a;
  }

  .stream-page .stream-chat .chat-stickers__title {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    color: #999;
  }

  .stream-page .stream-chat .chat-stickers__item {
    border-radius: 3px;
    background: #2a2a2a;
    transition: none;
  }

  .stream-page .stream-chat .chat-stickers__item:hover { background: #333; transform: none; }

  /* Предупреждение о лексике — без размытия, кнопка серая */
  .stream-page .stream-chat .chat-warn {
    background: rgba(0, 0, 0, .9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .stream-page .stream-chat .chat-warn__text { font-family: Arial, Helvetica, sans-serif; }

  .stream-page .stream-chat .chat-warn__btn {
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    transition: none;
  }
}

/* =====================================================================
   ТЕЛЕФОН: ЦВЕТА ЧАТА КАК У ОСНОВНОГО САЙТА
   Форма та же («Самопал»), меняются только цвета: вместо серых
   #111/#1a1a1a/#2a2a2a — графитово-синие из палитры styles.css
   (--fz-bg, --fz-bg-top, --fz-row, --stroke).
   ===================================================================== */

@media (max-width: 768px) {

  /* Фон колонки, чата и списка сообщений */
  .stream-page .stream-side,
  .stream-page .stream-chat,
  .stream-page .stream-chat.stream-chat--open,
  .stream-page .stream-chat .chat-wrap,
  .stream-page .stream-chat .chat-body,
  .stream-page .stream-chat #chatBody {
    background: var(--fz-bg, #1b1f2a);
  }

  .stream-page .stream-chat,
  .stream-page .stream-chat.stream-chat--open {
    border-top-color: var(--stroke, #394154);
  }

  /* Шапка чата — как шапка сайта */
  .stream-page .stream-chat__head {
    background: var(--fz-bg-top, #232838);
    border-bottom-color: var(--stroke, #394154);
  }

  .stream-page .stream-chat__head-title { color: var(--fz-ink, #eef1f7); }

  /* Кнопки: Refresh, крестик, отправка, Delete, отмена ответа */
  .stream-page .stream-chat__refresh,
  .stream-page .stream-chat__close,
  .stream-page .stream-chat .chat-form button#chatSend,
  .stream-page .stream-chat .chat-admin-delete,
  .stream-page .stream-chat .chat-reply__cancel,
  .stream-page .stream-chat .chat-warn__btn {
    background: var(--fz-row, #262c3a);
    border-color: var(--stroke, #394154);
  }

  .stream-page .stream-chat__refresh,
  .stream-page .stream-chat__close,
  .stream-page .stream-chat .chat-form button#chatSend,
  .stream-page .stream-chat .chat-reply__cancel {
    color: var(--fz-ink, #eef1f7);
  }

  .stream-page .stream-chat__refresh:active,
  .stream-page .stream-chat__close:active,
  .stream-page .stream-chat .chat-form button#chatSend:active {
    background: #2f3647;
  }

  /* Полоса ввода */
  .stream-page .stream-chat .chat-form,
  .stream-page .stream-chat #chatForm {
    background: var(--fz-bg-top, #232838);
    border-top: 1px solid var(--stroke, #394154);
  }

  .stream-page .stream-chat .chat-form__pill {
    background: var(--fz-row, #262c3a);
    border-color: var(--stroke, #394154);
  }

  .stream-page .stream-chat .chat-form__pill:focus-within { border-color: #4a5370; }

  .stream-page .stream-chat .chat-form input::placeholder { color: var(--muted, #9aa3b5); }

  .stream-page .stream-chat .chat-emoji-btn { color: var(--muted, #9aa3b5); }
  .stream-page .stream-chat .chat-emoji-btn.is-open { background: #2f3647; color: #fff; }

  /* Ответ и цитаты */
  .stream-page .stream-chat .chat-reply { background: var(--fz-row-2, #1f2431); }
  .stream-page .stream-chat .chat-quote { background: var(--fz-row-2, #1f2431); }

  /* Панель стикеров */
  .stream-page .stream-chat .chat-stickers {
    background: var(--fz-bg-top, #232838);
    border-color: var(--stroke, #394154);
  }

  .stream-page .stream-chat .chat-stickers__title { color: var(--muted, #9aa3b5); }
  .stream-page .stream-chat .chat-stickers__item { background: var(--fz-row, #262c3a); }
  .stream-page .stream-chat .chat-stickers__item:hover { background: #2f3647; }

  /* Предупреждение о лексике */
  .stream-page .stream-chat .chat-warn { background: rgba(27, 31, 42, .95); }
}