/* ==========================================================================
   ЭтоЯTV — плеер, чат и бейджи эфира темы «Эфир»

   Отдельный файл, потому что плеер с чатом живёт на двух не связанных
   каркасах: на странице телеканала и в панели управления, у которой своя
   вёрстка страницы и свой набор стилей. Разметка там разная, а классы и
   идентификаторы общие (#container_swf, .player-ui, .player-menu-bg,
   #chat_body, .inputs), поэтому одни правила обслуживают оба места.

   Здесь же живут бейджи состояния эфира: ими подписаны и карточки
   телеканалов на сайте, и сам плеер, а держать их описание в двух файлах —
   верный способ получить разные бейджи в разных местах.

   Подключается после theme_tokens.css: все цвета берутся из токенов.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Бейджи эфира — словарь старой темы, форма новая
   -------------------------------------------------------------------------- */

/*
 * Форма бейджа не должна зависеть от display: старая разметка и плеер
 * выставляют его инлайном (display: block у эфирного бейджа в кадре,
 * inline-block у метки 18+ в подписях записей), и такой инлайн сильнее
 * любого файла темы. Поэтому подпись центрируем по вертикали через
 * line-height, а не через align-items, а точку эфира разводим отступом,
 * а не gap: в блочном бейдже флексовые свойства просто не работают.
 */
.theme_modern .live_label,
.theme_modern .online_label,
.theme_modern .premium_label,
.theme_modern .label_18 {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  height: 20px !important;
  padding: 0 8px;
  border-radius: 6px;
  background-image: none !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-indent: 0;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.theme_modern .live_label {
  background-color: var(--live) !important;
}

/* Пульсирующая точка «в эфире» */
.theme_modern .live_label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #fff;
  animation: modernLivePulse 1.6s ease-in-out infinite;
}

@keyframes modernLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

.theme_modern .online_label { background-color: var(--autopilot) !important; }

.theme_modern .premium_label {
  background: linear-gradient(135deg, #f7cd5a, var(--premium)) !important;
  color: #3a2a05;
}

.theme_modern .label_18 {
  background-color: var(--danger) !important;
  padding: 0 7px;
}

/* Русский — базовые подписи; остальные языки задаются в шапке */
.theme_modern .live_label::after { content: "В эфире"; }
.theme_modern .online_label::after { content: "Автопилот"; }
.theme_modern .premium_label::after { content: "Премиум"; }
.theme_modern .label_18::after { content: "18+"; }

@media (prefers-reduced-motion: reduce) {
  .theme_modern .live_label::before { animation: none; }
  .theme_modern #container_swf *,
  .theme_modern #record *,
  .theme_modern #container_swf *::before,
  .theme_modern #record *::before,
  .theme_modern #container_swf *::after,
  .theme_modern #record *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Галочка подтверждения: круг на CSS, галка — SVG-маска */
.theme_modern .verified_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--autopilot) !important;
  vertical-align: middle;
  flex: 0 0 auto;
  text-indent: 0;
}

.theme_modern .verified_icon::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.theme_modern {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.5 17 4 11.5'/%3E%3C/svg%3E");
}

.theme_modern .verified_icon.blue { background: var(--accent-deep) !important; }

.theme_modern #playerchat .block-content { padding: 0; }

/*
 * Классическая страница канала держит внутри #playerchat распорку 349px и
 * обёртку float:left; width:100%. В «Эфире» css_0 нет, но инлайн остаётся:
 * 1px+100% флоты переносятся на второй ряд, высоты складываются, а
 * overflow:hidden у .blackbox обрезает кадр вместе с .pl-bar. Снимаем
 * только у карточки плеера — остальные blackbox_ci не трогаем.
 */
.theme_modern #playerchat .blackbox_ci > div[style*="height:349px"] {
  display: none !important;
}

.theme_modern #playerchat .blackbox_ci > div[style*="float"] {
  float: none !important;
  width: auto !important;
  height: auto !important;
}

/*
 * Высоту блока задаёт кадр 16:9, а чат вынут из потока и растянут по его
 * высоте. Иначе чат участвует в расчёте высоты строки как обычный элемент,
 * его высоту определяет содержимое, и внутренняя прокрутка ленты сообщений
 * включиться не может — вместо неё растягивается вся страница.
 *
 * Ширину кадра считаем явно (calc), а не через width:auto + margin-right:
 * внутри бывшего флота auto+aspect-ratio даёт циклический размер, и высота
 * падает к инлайновым 331px / intrinsic video.
 */
.theme_modern .playerchat {
  position: relative;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  background: #000 !important;
  font-family: var(--font) !important;
  border-radius: 0 !important;
  --pc-chat-w: 380px;
  --pc-users-w: 118px;
}

/* Карточка Эфира без скругления, в отличие от остальных .blackbox. */
.theme_modern #playerchat.blackbox,
.theme_modern #playerchat {
  border-radius: 0 !important;
}

/* Анимации wide только с .pc-wide-anim — иначе при загрузке «плывёт» */
.theme_modern #playerchat.pc-wide-anim {
  transition:
    width .38s cubic-bezier(.22, .61, .36, 1),
    max-width .38s cubic-bezier(.22, .61, .36, 1),
    margin .38s cubic-bezier(.22, .61, .36, 1);
}
.theme_modern #playerchat.pc-wide-anim #container_swf {
  transition:
    width .38s cubic-bezier(.22, .61, .36, 1),
    aspect-ratio .38s cubic-bezier(.22, .61, .36, 1),
    max-height .38s cubic-bezier(.22, .61, .36, 1);
}
.theme_modern #playerchat.pc-wide-anim #chat_body,
.theme_modern #playerchat.pc-wide-anim #chat_users {
  transition: width .38s cubic-bezier(.22, .61, .36, 1), flex-basis .38s cubic-bezier(.22, .61, .36, 1);
}

.theme_modern #container_swf {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - var(--pc-chat-w, 380px)) !important;
  height: auto !important;
  margin-right: 0;
  aspect-ratio: 16 / 9;
  min-width: 0;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

/* Кнопка wide — в строке заголовка рядом с закладками / TG */
.theme_modern #playerchat .block-buttons .pc-wide-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none !important;
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.theme_modern #playerchat .block-buttons .pc-wide-btn:hover {
  background: var(--surface-2) !important;
  color: var(--accent);
  transform: none;
  border-color: transparent;
}

.theme_modern #playerchat .block-buttons .pc-wide-btn svg {
  width: 17px;
  height: 17px;
}

.theme_modern #playerchat .block-buttons .pc-wide-btn .pc-wide-btn__collapse { display: none; }
.theme_modern #playerchat.is-wide .block-buttons .pc-wide-btn .pc-wide-btn__expand { display: none; }
.theme_modern #playerchat.is-wide .block-buttons .pc-wide-btn .pc-wide-btn__collapse { display: block; }

/*
 * Wide: боковые % отступы — фон страницы виден, кнопка ошибки слева не
 * накрывается, кадр строго 16:9.
 */
.theme_modern #playerchat.is-wide {
  --pc-wide-gutter: 4vw;
  position: relative;
  z-index: 40;
  box-sizing: border-box;
  width: calc(100vw - 2 * var(--pc-wide-gutter)) !important;
  max-width: calc(100vw - 2 * var(--pc-wide-gutter)) !important;
  margin-left: calc(50% - 50vw + var(--pc-wide-gutter)) !important;
  margin-right: calc(50% - 50vw + var(--pc-wide-gutter)) !important;
}

.theme_modern #playerchat.is-wide .playerchat {
  --pc-chat-w: min(520px, 34vw);
  --pc-users-w: 148px;
}

.theme_modern #playerchat.is-wide #container_swf {
  aspect-ratio: 16 / 9 !important;
  max-height: none;
}

.theme_modern #playerchat.is-wide #chat_body {
  width: var(--pc-chat-w) !important;
}

.theme_modern #playerchat.is-wide #chat_users {
  flex: 0 0 var(--pc-users-w, 148px) !important;
  width: var(--pc-users-w, 148px) !important;
}

/* FLIP: дети без layout-transition; height анимируется в потоке (соседи снизу едут вместе) */
.theme_modern #playerchat.pc-wide-flip {
  will-change: transform, height;
  overflow: hidden;
}
.theme_modern #playerchat.pc-wide-flip #container_swf,
.theme_modern #playerchat.pc-wide-flip #chat_body,
.theme_modern #playerchat.pc-wide-flip #chat_users,
.theme_modern #playerchat.pc-wide-flip .playerchat {
  transition: none !important;
}

/* Масштаб текста/элементов чата */
.theme_modern #chat_body {
  --chat-scale: 1;
}

.theme_modern #chat_body[data-chat-scale="sm"] { --chat-scale: 0.78; }
.theme_modern #chat_body[data-chat-scale="md"] { --chat-scale: 1; }
.theme_modern #chat_body[data-chat-scale="lg"] { --chat-scale: 1.4; }

.theme_modern #chat_body #chat_text_field,
.theme_modern #chat_body #chat_users,
.theme_modern #chat_body .ct-head,
.theme_modern #chat_body .ct-composer,
.theme_modern #chat_body .login,
.theme_modern #chat_body #chat_pinned_box {
  font-size: calc(13px * var(--chat-scale)) !important;
}

.theme_modern #chat_body .chat-message-row,
.theme_modern #chat_body #chat-users-list li,
.theme_modern #chat_body #chat-users-list .user {
  font-size: calc(12.5px * var(--chat-scale)) !important;
  line-height: calc(1.35 * var(--chat-scale));
}

.theme_modern #chat_body #chat-input {
  font-size: calc(13px * var(--chat-scale)) !important;
  min-height: calc(28px * var(--chat-scale));
}

.theme_modern #chat_body .ct-head {
  height: calc(44px * var(--chat-scale)) !important;
}

.theme_modern #chat_body .ct-head__title {
  font-size: calc(14px * var(--chat-scale)) !important;
}

/* Тумблер: плашки + разделители (без засечек) */
.theme_modern #chat-menu .chat-scale-menu {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.theme_modern #chat-menu .chat-scale-menu__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--muted);
  letter-spacing: .02em;
}

.theme_modern #chat-menu .chat-scale-tumbler {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}

.theme_modern #chat-menu .chat-scale-tumbler__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  cursor: pointer;
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.theme_modern #chat-menu .chat-scale-tumbler__btn + .chat-scale-tumbler__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border-strong);
  opacity: .9;
  pointer-events: none;
}

.theme_modern #chat-menu .chat-scale-tumbler__btn.is-active {
  color: var(--on-accent);
}

.theme_modern #chat-menu .chat-scale-tumbler__btn.is-active + .chat-scale-tumbler__btn::before,
.theme_modern #chat-menu .chat-scale-tumbler__btn.is-active::before {
  opacity: 0;
}

.theme_modern #chat-menu .chat-scale-tumbler__glyph {
  display: block;
  flex: 0 0 auto;
  border-radius: 2px;
  background: currentColor;
  pointer-events: none;
}

.theme_modern #chat-menu .chat-scale-tumbler__btn[data-scale="sm"] .chat-scale-tumbler__glyph {
  width: 7px;
  height: 7px;
}
.theme_modern #chat-menu .chat-scale-tumbler__btn[data-scale="md"] .chat-scale-tumbler__glyph {
  width: 11px;
  height: 11px;
}
.theme_modern #chat-menu .chat-scale-tumbler__btn[data-scale="lg"] .chat-scale-tumbler__glyph {
  width: 15px;
  height: 15px;
}

/* Thumb: inset 2px, ровно 1/3 внутренней ширины — иначе translateX(n*100%) съезжает */
.theme_modern #chat-menu .chat-scale-tumbler__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  height: calc(100% - 4px);
  border-radius: calc(var(--radius-sm) - 1px);
  background: var(--accent);
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  z-index: 0;
}

.theme_modern #chat-menu .chat-scale-tumbler[data-value="sm"] .chat-scale-tumbler__thumb {
  transform: translateX(0);
}
.theme_modern #chat-menu .chat-scale-tumbler[data-value="md"] .chat-scale-tumbler__thumb {
  transform: translateX(100%);
}
.theme_modern #chat-menu .chat-scale-tumbler[data-value="lg"] .chat-scale-tumbler__thumb {
  transform: translateX(200%);
}

/*
 * Кадр — как у записи: video вынут из потока. Иначе height:100% у ролика
 * внутри overflow:hidden + aspect-ratio заставляет движок считать высоту
 * по содержимому, а не по 16:9 — чёрный блин без нижней полосы .pl-bar.
 */
.theme_modern #etoyatv-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.theme_modern .pl-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.theme_modern .pl-spinner__ring {
  display: block;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: plSpin .7s linear infinite;
}

@keyframes plSpin {
  to { transform: rotate(360deg); }
}

/* --- Новая раскладка оверлеев плеера ------------------------------------- */

/* Затемнения сверху и снизу: под ними читаются подписи и кнопки */
.theme_modern #container_swf .pl-bar::before,
.theme_modern #record .pl-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120%;
  pointer-events: none;
  z-index: -1;
}

/* Кадр бывает почти белым, поэтому затемнение плотное у самой кромки.
   Верх и низ — одна логика: мягкая вуаль, без сплошной плашки. */
.theme_modern #container_swf .pl-bar--top::before,
.theme_modern #record .pl-bar--top::before {
  top: 0;
  height: 210%;
  background: linear-gradient(to bottom, rgba(4, 8, 13, .88) 0%, rgba(4, 8, 13, .42) 48%, transparent 100%);
}

.theme_modern #container_swf .pl-bar--bottom::before,
.theme_modern #record .pl-bar--bottom::before {
  bottom: 0;
  height: 210%;
  background: linear-gradient(to top, rgba(4, 8, 13, .88) 0%, rgba(4, 8, 13, .42) 48%, transparent 100%);
}

.theme_modern #container_swf .pl-bar,
.theme_modern #record .pl-bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  transition: opacity .25s ease;
  color: #fff;
  pointer-events: none;
}

.theme_modern #container_swf .pl-bar .pl-btn,
.theme_modern #container_swf .pl-bar a,
.theme_modern #container_swf .pl-bar .pl-channel,
.theme_modern #container_swf .pl-bar .pl-volume,
.theme_modern #container_swf .pl-bar .pl-viewers,
.theme_modern #container_swf .pl-bar .pl-fs,
.theme_modern #container_swf .pl-bar #stream-selector-container,
.theme_modern #container_swf .pl-bar #quality-selector-container,
.theme_modern #container_swf .pl-bar #btn-quality,
.theme_modern #container_swf .pl-bar #quality-menu,
.theme_modern #container_swf .pl-bar input,
.theme_modern #record .pl-bar .pl-btn,
.theme_modern #record .pl-bar a,
.theme_modern #record .pl-bar .pl-channel,
.theme_modern #record .pl-bar .pl-volume,
.theme_modern #record .pl-bar .pl-viewers,
.theme_modern #record .pl-bar .pl-fs,
.theme_modern #record .pl-bar .pl-progress,
.theme_modern #record .pl-bar #progress-container,
.theme_modern #record .pl-bar .pl-quality,
.theme_modern #record .pl-bar #btn-quality,
.theme_modern #record .pl-bar #quality-menu,
.theme_modern #record .pl-bar input {
  pointer-events: auto;
}

.theme_modern #container_swf .pl-bar--top,
.theme_modern #record .pl-bar--top { top: 0; }
.theme_modern #container_swf .pl-bar--bottom,
.theme_modern #record .pl-bar--bottom { bottom: 0; }

/* Офлайн-баннер: PNG с альфой не затираем непрозрачной подложкой темы.
   Цвет/картинка канала задаются scoped-стилем страницы. */
.theme_modern #etoyatv-offline-overlay {
  z-index: 15 !important;
  pointer-events: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

.theme_modern #etoyatv-nosignal-overlay {
  z-index: 18 !important;
  pointer-events: auto;
}

/* Слабый аплинк стримера — жёлтая плашка поверх кадра, эфир не рвём */
.etoyatv-signal-banner {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 22;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(245, 180, 40, 0.55);
  background: rgba(48, 36, 8, 0.92);
  color: #ffe8a3;
  font: 600 12px/1.4 Tahoma, Arial, sans-serif;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.etoyatv-signal-banner.is-visible {
  display: flex !important;
}

.etoyatv-signal-banner__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
  background: #f5b428;
  box-shadow: 0 0 0 0 rgba(245, 180, 40, 0.7);
  animation: etoyatvSignalPulse 1.4s ease-out infinite;
}

.etoyatv-signal-banner__text {
  min-width: 0;
  flex: 1 1 auto;
}

@keyframes etoyatvSignalPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 180, 40, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(245, 180, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 180, 40, 0); }
}

.theme_modern .etoyatv-signal-banner {
  border-radius: var(--radius, 8px);
  font-family: var(--font, Tahoma, Arial, sans-serif);
  font-weight: 650;
}

.theme_modern #etoyatv-offline-overlay span,

/* Шапка кадра: логотип, название, действия */
.theme_modern .pl-channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.theme_modern .pl-channel:hover {
  color: #fff;
  text-decoration: none;
}

.theme_modern .pl-channel__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: #000;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.theme_modern .pl-channel__name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.theme_modern .pl-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/*
 * Кнопки плеера.
 *
 * Размер задан с приоритетом, потому что «Записи» в шапке кадра — ссылка, а
 * не кнопка. Общее правило темы для элементов плеера сбрасывает высоту в auto
 * (#container_swf .player-actions a), и по специфичности оно сильнее селектора
 * по классу: у него к идентификатору добавлены два класса и тег, у нас — два
 * класса. Кнопкам тот же сброс ничего не ломал, там он идёт по тегу button и
 * классу проигрывает. Ширина в сбросе не участвует, поэтому ссылка садилась на
 * высоту своей иконки и получала бокс 36×18 вместо 36×36. Приоритет убирает
 * зависимость от тега: размер держится на классе .pl-btn, чем бы он ни был.
 */
.theme_modern #container_swf .pl-btn,
.theme_modern #record .pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  /* Подъём на 1px — «кнопка живая», без squish: иконка 36×36 не должна
     уезжать из-под пальца. */
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme_modern #container_swf .pl-btn svg,
.theme_modern #record .pl-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.theme_modern #container_swf .pl-btn:hover,
.theme_modern #record .pl-btn:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-1px);
}

/* Тот же ряд, что у соседей: 36×36. Приоритет оставляем — иначе
   ссылка a.pl-btn снова сядет на 36×18 из-за сброса высоты у a. */
.theme_modern #container_swf .pl-btn--play,
.theme_modern #record .pl-btn--play {
  width: 36px !important;
  height: 36px !important;
  overflow: visible;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
}

/* 18px как у остальных .pl-btn; overflow visible — у треугольника play
   обводка вылезает за viewBox и иначе режется по краю svg. */
.theme_modern #container_swf .pl-btn--play svg,
.theme_modern #record .pl-btn--play svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  flex-shrink: 0;
}

.theme_modern #container_swf .pl-btn--play:hover,
.theme_modern #record .pl-btn--play:hover { background: var(--accent-hover); }

.theme_modern #container_swf .pl-btn--hidden,
.theme_modern #record .pl-btn--hidden { display: none; }

/* Громкость: ползунок раскрывается при наведении, а не по отдельному меню */
.theme_modern .pl-volume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme_modern .pl-volume__range {
  width: 0;
  min-height: 0;
  max-width: none;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .28);
  opacity: 0;
  cursor: pointer;
  accent-color: var(--accent);
  transition: width .2s ease, opacity .2s ease;
}

.theme_modern .pl-volume:hover .pl-volume__range,
.theme_modern .pl-volume__range:focus-visible {
  width: 88px;
  opacity: 1;
}

.theme_modern .pl-viewers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  height: 23px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.theme_modern .pl-viewers svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
}

.theme_modern .pl-viewers #viewers-count-player,
.theme_modern .pl-viewers > span {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 16px;
  height: 23px;
  /* Цифра визуально выше stroke-иконки — чуть опускаем */
  transform: translateY(1.5px);
}

.theme_modern .pl-spacer { flex: 1 1 auto; }

.theme_modern .pl-streams {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 24px;
}

.theme_modern .pl-streams.is-hidden {
  display: none !important;
}

.theme_modern .pl-streams svg { width: 16px; height: 16px; flex-shrink: 0; }

.theme_modern .pl-streams__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

/*
 * Кнопки камер 1/2/3: theme_modern сбрасывает height у button[style*="height"].
 * Перебиваем явными размерами, иначе овалы сплющиваются до одной строки текста.
 */
.theme_modern #container_swf #stream-buttons button,
.theme_modern #record #stream-buttons button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.theme_modern .pl-brand {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.theme_modern .pl-brand:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Состояние эфира, когда панели скрыты.
 *
 * Бейдж стоит ровно на месте строки с логотипом и названием канала из
 * верхней полосы: тот же отступ от кромки кадра (падинг полосы) и та же
 * середина строки (падинг сверху плюс половина логотипа). Панели и бейдж
 * сменяют друг друга по наведению, и без общей привязки бейдж читался как
 * отдельный блок, приклеенный к углу кадра мимо всей остальной шапки.
 */
.theme_modern .pl-idle {
  position: absolute;
  top: calc(12px + (40px - 20px) / 2);
  left: 14px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/*
 * Что идёт сейчас: название передачи в эфире или записи из автопилота.
 * Занимает остаток верхней полосы и обрезается, потому что названия бывают
 * длинными, а кнопки справа съезжать не должны.
 */
.theme_modern .pl-now {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/*
 * В панели управления шапка плеера — не полоса во всю ширину, а компактный
 * блок в углу кадра, поэтому название передачи там не растягиваем.
 */
.theme_modern .pl-now--panel {
  flex: 0 1 auto;
  max-width: 240px;
}

/* Стрелка между названием канала и текущей передачей */
.theme_modern .pl-now::before {
  content: "→";
  flex: 0 0 auto;
  margin-right: 6px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.08em);
}

/* Нижняя полоса кадра идёт во всю ширину, поэтому скругление ей не нужно.
   Сплошной .player-menu-bg давал «кирпич» внизу — оставляем только
   градиентную вуаль ::before, как у верхней полосы. */
:where(.theme_modern) #container_swf .player-menu-bg,
:where(.theme_modern) #record .player-menu-bg {
  background: rgba(8, 12, 18, .72) !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--edge);
}

:where(.theme_modern) #container_swf .pl-bar--bottom.player-menu-bg,
:where(.theme_modern) #record .pl-bar--bottom.player-menu-bg,
.theme_modern #container_swf .pl-bar--bottom.player-menu-bg,
.theme_modern #record .pl-bar--bottom.player-menu-bg {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 12px 14px !important;
}

:where(.theme_modern) #container_swf .player-actions button,
:where(.theme_modern) #container_swf .player-actions a {
  background: rgba(8, 12, 18, .68) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .15s ease, transform .15s ease;
}

:where(.theme_modern) #container_swf .player-actions button:hover,
:where(.theme_modern) #container_swf .player-actions a:hover {
  background: rgba(24, 34, 48, .9) !important;
  transform: translateY(-1px);
}

:where(.theme_modern) #container_swf .volume-slider-wrapper {
  background: rgba(8, 12, 18, .86) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Плашка с названием канала поверх кадра */
:where(.theme_modern) #container_swf .player-ui > div > a {
  border-radius: var(--radius-sm) !important;
  padding: 4px 10px !important;
  background: rgba(8, 12, 18, .72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme_modern #container_swf .player-ui img[alt="Logo"] {
  border-radius: var(--radius-sm) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

/* Оверлеи «нет трансляции» и «нет сигнала» в типографике темы */
.theme_modern #etoyatv-offline-overlay,
.theme_modern #etoyatv-nosignal-overlay,
.theme_modern #etoyatv-pip-overlay {
  font-family: var(--font) !important;
}

.theme_modern #etoyatv-offline-overlay span,
.theme_modern #etoyatv-nosignal-overlay span {
  font-family: var(--font) !important;
  letter-spacing: .2px;
}

/*
 * Возрастной оверлей — слой НА кадре, не лист на странице.
 * Кадр плеера тёмный, поэтому стекло тоже тёмное в обеих схемах.
 * Токены объявлены на контейнере: кнопка и текст не берут
 * html[data-scheme=light] --text страницы (графит на тёмном стекле /
 * белый на бумаге). display:none остаётся инлайном — его ставит JS.
 */
.theme_modern .pl-age,
.theme_modern #etoyatv-18plus-overlay.pl-age {
  --text: #e9f1f8;
  --text-strong: #ffffff;
  --muted: #c5d2de;
  --muted-dim: #a8b8c8;
  --accent: #6fdeee;
  --accent-hover: #a7ecf7;
  --accent-dim: rgba(111, 222, 238, 0.16);
  --accent-line: rgba(111, 222, 238, 0.45);
  --accent-glow: rgba(111, 222, 238, 0.32);
  --on-accent: #05222a;
  --surface: rgba(17, 24, 35, .88);
  --surface-2: #16202d;
  --border: rgba(255, 255, 255, .14);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 46%), var(--surface);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .08);
  --danger: #ff6b6b;

  position: absolute;
  inset: 0;
  z-index: 20;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  font-family: var(--font);
  color: var(--text);
  background: rgba(8, 12, 18, .58);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.theme_modern .pl-age__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(420px, 100%);
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--glass);
  box-shadow: var(--edge), var(--shadow-2);
  text-align: center;
}

.theme_modern .pl-age .label_18 {
  height: 22px !important;
  padding: 0 9px;
  font-size: 11px;
  line-height: 22px;
}

.theme_modern .pl-age__title {
  margin: 4px 0 0;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .2px;
}

.theme_modern .pl-age__text {
  margin: 0 0 8px;
  max-width: 28em;
  color: var(--muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.55;
}

.theme_modern .pl-age__text a {
  color: var(--accent);
  text-decoration: none;
}

.theme_modern .pl-age__text a:hover { color: var(--accent-hover); }

.theme_modern .pl-age__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: 650 14px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 0 16px var(--accent-glow);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.theme_modern .pl-age__btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-1px);
}

/* Чат — колонка справа от кадра (только внутри .playerchat).
 * В standalone-виджете (/widget/chat, студия) абсолют + 380px даёт
 * чёрную «дыру» слева — там чат должен быть на всю ширину. */
.theme_modern .playerchat #chat_body {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--pc-chat-w, 380px) !important;
  height: auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface) !important;
}

/* Standalone: iframe студии / embed — на весь документ */
.theme_modern > #chat_body,
.theme_modern body > #chat_body {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface) !important;
}

/* Область сообщений и зрителей забирает остаток высоты, но не больше;
   min-height: 0 обязателен, иначе флекс-элемент не даёт себя сжать и
   прокрутка внутри не работает */
.theme_modern #chat_body > div[style*="290px"],
.theme_modern #chat_body > div[style*="flex: 1"],
.theme_modern #chat_body > div[style*="flex:1"] {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

.theme_modern #chat_text_field {
  min-height: 0;
  overflow-y: auto !important;
}

.theme_modern #chat_users { overflow-y: auto !important; overflow-x: hidden !important; }

/* Колонка сообщений в разметке зафиксирована на 270px — растягиваем */
.theme_modern #chat_body > div[style*="290px"] > div[style*="270px"],
.theme_modern #chat_body > div[style*="flex: 1"] > div[style*="flex: 1"],
.theme_modern #chat_body > div[style*="flex:1"] > div[style*="flex:1"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}

/* Шапка чата */
.theme_modern .ct-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 12px;
  height: 44px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.theme_modern .ct-head__title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-strong);
}

.theme_modern .ct-head__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  vertical-align: middle;
}

.theme_modern .ct-head__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin-left: auto;
  padding: 0 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
}

.theme_modern .ct-head__toggle svg { width: 17px; height: 17px; }

.theme_modern .ct-head__toggle:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.theme_modern .ct-head__toggle.is-off { color: var(--muted-dim); }

/* Свёрнутый список зрителей */
.theme_modern #chat_body.ct-users-hidden #chat_users { display: none !important; }

/*
 * Строка ввода чата.
 * В разметке кнопки лежат внутри поля, поэтому важно дать им один размер и
 * ритм, а акцент оставить только у отправки — иначе рядом оказываются
 * бирюзовый круг, яркий цвет ника и текстовая подпись «Меню».
 */
.theme_modern .inputs > div:last-child {
  display: flex;
  align-items: center;
  gap: 6px !important;
  padding-right: 5px !important;
}

/* Текст не должен подъезжать под кнопки */
.theme_modern #chat-input { padding-right: 10px !important; }

/* Скругление как у кнопок плеера и шапки чата: идеальные круги выбивались
   из остальной темы и смотрелись игрушечно */
.theme_modern #btn-chat-submit,
.theme_modern #chat-emoji-btn,
.theme_modern #chat-color-btn,
.theme_modern #btn-chat-menu {
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-sm) !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}

/* Отправка — единственное акцентное действие */
.theme_modern #btn-chat-submit {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

.theme_modern #btn-chat-submit svg {
  width: 15px;
  height: 15px;
  color: var(--on-accent) !important;
}

.theme_modern #btn-chat-submit:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px);
}

/* Эмодзи и меню — спокойные, проявляются при наведении */
.theme_modern #chat-emoji-btn,
.theme_modern #btn-chat-menu {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--muted) !important;
}

.theme_modern #chat-emoji-btn:hover,
.theme_modern #btn-chat-menu:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: var(--text) !important;
}

.theme_modern #chat-emoji-btn svg { width: 15px; height: 15px; }

/* Цвет ника: сам цвет осмыслен, поэтому оставляем его, но гасим кольцом,
   чтобы яркий оттенок не спорил с кнопкой отправки */
.theme_modern #chat-color-btn {
  border: 2px solid rgba(255, 255, 255, .35) !important;
  box-shadow: none !important;
}

.theme_modern #chat-color-btn:hover {
  border-color: rgba(255, 255, 255, .7) !important;
}

/* Подпись «Меню» заменяем иконкой: рядом с иконками текст выбивается */
.theme_modern #btn-chat-menu {
  position: relative;
  font-size: 0 !important;
  text-shadow: none !important;
}

.theme_modern #btn-chat-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--icon-dots) center / 15px 15px no-repeat;
  mask: var(--icon-dots) center / 15px 15px no-repeat;
}

.theme_modern {
  --icon-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E");
}

/* Закреплённое сообщение */
.theme_modern #chat_pinned_box {
  background: var(--accent-dim) !important;
}

/*
 * Полосы прокрутки чата. В самой странице они заданы через id с чёрной
 * дорожкой и серым бегунком — на тёмно-синем фоне это выглядело чужеродной
 * лентой. Перекрываем с большим весом и переводим на палитру темы.
 */
.theme_modern #chat_text_field,
.theme_modern #chat-users-list,
.theme_modern #chat_users,
.theme_modern #chat_pinned_box,
.theme_modern #emoji-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.theme_modern #chat_text_field::-webkit-scrollbar,
.theme_modern #chat_users::-webkit-scrollbar,
.theme_modern #chat_pinned_box::-webkit-scrollbar,
.theme_modern #emoji-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme_modern #chat_text_field::-webkit-scrollbar-track,
.theme_modern #chat_users::-webkit-scrollbar-track,
.theme_modern #chat_pinned_box::-webkit-scrollbar-track,
.theme_modern #emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

.theme_modern #chat_text_field::-webkit-scrollbar-thumb,
.theme_modern #chat_users::-webkit-scrollbar-thumb,
.theme_modern #chat_pinned_box::-webkit-scrollbar-thumb,
.theme_modern #emoji-grid::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}

.theme_modern #chat_text_field::-webkit-scrollbar-thumb:hover,
.theme_modern #chat_users::-webkit-scrollbar-thumb:hover,
.theme_modern #chat_pinned_box::-webkit-scrollbar-thumb:hover,
.theme_modern #emoji-grid::-webkit-scrollbar-thumb:hover {
  background: var(--muted-dim);
  background-clip: content-box;
}

/* Лента сообщений: строки-пилюли вместо плотного лога 11px Verdana */
.theme_modern #chat_text_field {
  padding: 10px !important;
  gap: 4px !important;
  background: var(--surface);
}

.theme_modern .chat-message-row {
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface-2);
  font: 13px/1.5 var(--font) !important;
  color: var(--text) !important;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: background .12s ease;
}

.theme_modern .chat-message-row:hover { background: var(--surface-3); }

/* Кнопки модератора должны появляться при наведении, но в разметке у них
   инлайновый display, который перебивает правило скрытия из таблицы стилей —
   поэтому здесь нужен приоритет. */
.theme_modern .chat-message-row .btn-pin-message,
.theme_modern .chat-message-row .btn-delete-message {
  display: none !important;
}

.theme_modern .chat-message-row:hover .btn-pin-message,
.theme_modern .chat-message-row:hover .btn-delete-message {
  display: inline-flex !important;
  color: var(--muted);
}

.theme_modern .chat-message-row .btn-pin-message:hover { color: var(--accent); }
.theme_modern .chat-message-row .btn-delete-message:hover { color: var(--danger); }

/* Время в начале строки */
.theme_modern .chat-message-row > span:first-child {
  margin-right: 5px;
  color: var(--muted-dim) !important;
  font-variant-numeric: tabular-nums;
}

.theme_modern .chat-username { border-radius: 4px; }

/* Список зрителей: колонка узкая, основное место — сообщениям */
.theme_modern #chat_users {
  flex: 0 0 var(--pc-users-w, 118px);
  width: var(--pc-users-w, 118px) !important;
  padding: 10px 8px !important;
  font: 13px/1.5 var(--font) !important;
  background: var(--bg-elevated);
}

.theme_modern #chat_users > div:first-child {
  margin-bottom: 6px;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border);
  color: var(--muted-dim) !important;
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.theme_modern #chat-users-list .chat-username {
  margin: 0 0 2px !important;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  gap: 6px !important;
  font-weight: 600;
  display: flex !important;
  align-items: flex-start !important;
  min-width: 0;
  max-width: 100%;
}

/* Длинные ники переносятся под аватар, без горизонтального скролла */
.theme_modern #chat-users-list .chat-username > span:not(.ct-ava):not(.ct-ava__role) {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.theme_modern #chat-users-list .chat-username:hover { background: var(--surface-2); }

/* Аватар зрителя со значком роли в углу */
.theme_modern .ct-ava {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.theme_modern .ct-ava img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  display: block;
}

.theme_modern .ct-ava__role {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme_modern .ct-ava__role img {
  width: 9px !important;
  height: 9px !important;
  border-radius: 0;
  background: none;
  vertical-align: baseline !important;
}

/* Светлая тема: белые SVG-иконки теряются на светлой подложке — даём
   контрастный круг под значок роли (как в тёмной теме, но явнее). */
html[data-scheme="light"] .theme_modern .ct-ava__role {
  background: var(--text-strong);
  box-shadow: 0 0 0 1.5px var(--surface), 0 1px 2px rgba(26, 35, 48, 0.18);
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="owner"]) {
  background: var(--brand);
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="admin"]) {
  background: var(--accent-deep);
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="moderator"]) {
  background: var(--accent);
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="staff"]) {
  background: #5a6b7d;
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="user"]),
html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="guest"]) {
  background: #6d7f92;
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="banned"]) {
  background: var(--danger);
}

html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="user"]) img,
html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="guest"]) img,
html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="banned"]) img,
html[data-scheme="light"] .theme_modern .ct-ava__role:has(img[src*="staff"]) img {
  filter: brightness(0) invert(1);
}

/*
 * Строка ввода: одна видимая поверхность вместо трёх.
 * В разметке полоса несёт свой фон, пилюля — свой цвет канала, да ещё рамку
 * в 4 пикселя того же оттенка, а поле внутри — собственную подложку. Все
 * тона почти совпадали, и вложенность читалась как грязь. Полоса теперь той
 * же поверхности, что лента сообщений, поле — единственная выделенная плашка.
 */
.theme_modern #chat_body > .ct-composer,
.theme_modern #chat_body > div:last-child {
  height: auto !important;
  padding: 10px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
}

.theme_modern #chat_body > .ct-composer--off {
  color: var(--danger);
  font: 650 13px var(--font);
  justify-content: center;
}

/*
 * Рамка поля ввода — место, где в чате видно оформление канала: цвет приходит
 * инлайном из его настроек, поэтому переопределяем только толщину и стиль.
 * Заливку внутрь не пускаем: цвет канала на подложке строки давал третью
 * поверхность подряд и выглядел как задвоение.
 */
.theme_modern .inputs {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  height: 38px !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
}

.theme_modern .inputs:focus-within {
  border-color: var(--accent-line) !important;
  box-shadow: var(--ring);
}

.theme_modern #chat-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding: 0 6px 0 12px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font: 14px var(--font) !important;
}

.theme_modern #chat_body .login {
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font: 13px var(--font);
}

.theme_modern #chat_body .login a {
  margin-left: 4px;
  color: var(--accent);
}

.theme_modern #chat-input::placeholder { color: var(--muted-dim); }

.theme_modern #chat_disabled_msg {
  font: 600 14px var(--font) !important;
  color: var(--muted) !important;
}

/* Закреплённое сообщение: одна строка, поэтому плашка компактная */
.theme_modern #chat_pinned_box {
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  font: 13px/1.45 var(--font) !important;
}

.theme_modern #chat_pinned_content {
  font-size: 13px !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Иконка булавки не должна тянуть строку вверх */
.theme_modern #chat_pinned_box > span:first-child {
  margin-top: 0 !important;
  color: var(--accent) !important;
}

.theme_modern #btn-chat-unpin {
  width: 22px !important;
  height: 22px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--muted) !important;
  flex: 0 0 auto;
}

.theme_modern #btn-chat-unpin:hover {
  background: rgba(255, 255, 255, .12) !important;
  color: var(--text) !important;
}

.theme_modern #chat-tabs-container {
  background: var(--bg-elevated) !important;
  border-bottom-color: var(--border) !important;
  padding: 3px 4px !important;
  gap: 3px !important;
}

.theme_modern #chat-tabs-container button {
  padding: 2px 7px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  border-radius: 3px !important;
  min-height: 0 !important;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

/* Всплывающие панели чата: меню, эмодзи, палитра, меню зрителя */
.theme_modern #chat-menu,
.theme_modern #chat-emoji-panel,
.theme_modern #chat-color-palette,
.theme_modern #user-context-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 6px !important;
  font: 13px var(--font) !important;
  transform-origin: bottom center;
}

.theme_modern #chat-menu.modern-panel-open,
.theme_modern #chat-emoji-panel.modern-panel-open,
.theme_modern #chat-color-palette.modern-panel-open,
.theme_modern #user-context-menu.modern-panel-open {
  animation: modernPanelIn var(--dur) var(--ease) both;
}

.theme_modern #chat-menu.modern-panel-closing,
.theme_modern #chat-emoji-panel.modern-panel-closing,
.theme_modern #chat-color-palette.modern-panel-closing,
.theme_modern #user-context-menu.modern-panel-closing {
  animation: modernPanelOut var(--dur-fast) var(--ease) both;
  pointer-events: none;
}

.theme_modern #chat-emoji-panel {
  width: 195px;
  flex-direction: column;
  gap: 6px;
}

.theme_modern #chat-color-palette {
  width: 195px;
  flex-direction: row;
  gap: 8px;
}

.theme_modern #emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
  box-sizing: border-box;
  width: 100%;
}

.theme_modern .emoji-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  opacity: .6;
  border-radius: 3px;
}

.theme_modern .emoji-tab:hover,
.theme_modern .emoji-tab.active {
  opacity: 1;
  background: var(--surface-3);
}

.theme_modern .emoji-item {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  height: 26px;
  width: 100%;
  border-radius: 4px;
}

.theme_modern .emoji-item:hover { background: var(--surface-3); }

/*
 * Меню зрителя собирается скриптом с инлайновыми цветами (#fff, #ff0000,
 * #00ff00) и без минимальной ширины — подписи ломались на две строки,
 * а чистые красный и зелёный выбивались из палитры. Отсюда приоритеты.
 */
.theme_modern #user-context-menu { min-width: 196px; }

.theme_modern #user-context-menu .menu-item,
.theme_modern #chat-menu .menu-item {
  padding: 8px 11px !important;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  white-space: nowrap;
  transition: background .12s ease;
}

.theme_modern #user-context-menu .menu-item:hover,
.theme_modern #chat-menu .menu-item:hover {
  background: var(--surface-2);
}

.theme_modern #user-context-menu .ctx-ban { color: var(--danger) !important; }
.theme_modern #user-context-menu .ctx-ban:hover { background: rgba(255, 107, 107, .14); }

.theme_modern #user-context-menu .ctx-unban { color: var(--success) !important; }
.theme_modern #user-context-menu .ctx-unban:hover { background: rgba(74, 222, 128, .14); }

/* Отбивка между переходом в профиль и опасными действиями */
.theme_modern #user-context-menu .ctx-profile + .ctx-ban,
.theme_modern #user-context-menu .ctx-profile + .ctx-unban {
  margin-top: 5px;
  padding-top: 12px !important;
  border-top: 1px solid var(--border);
}

/* На узком экране чат уезжает под кадр и снова участвует в потоке,
   поэтому высоту задаём явно — прокрутке нужен предел */
@media (max-width: 1080px) {
  .theme_modern #container_swf {
    width: calc(100% - var(--pc-chat-w, 320px)) !important;
  }
  .theme_modern .playerchat { --pc-chat-w: 320px; }
}

@media (max-width: 900px) {
  .theme_modern .pc-wide-btn { display: none !important; }
  .theme_modern #playerchat.is-wide {
    --pc-wide-gutter: 0;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .theme_modern #container_swf {
    width: 100% !important;
    margin-right: 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .theme_modern .playerchat #chat_body {
    position: static !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 320px;
    max-height: min(420px, 55vh);
  }

  .theme_modern #chat_body > div[style*="290px"],
  .theme_modern #chat_body > div[style*="flex: 1"],
  .theme_modern #chat_body > div[style*="flex:1"] {
    display: flex !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .theme_modern #chat_body > div[style*="290px"] > div[style*="270px"],
  .theme_modern #chat_body > div[style*="flex: 1"] > div[style*="flex: 1"],
  .theme_modern #chat_body > div[style*="flex:1"] > div[style*="flex:1"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .theme_modern #chat_text_field {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    flex: 1 1 auto;
  }

  .theme_modern #chat_text_field > * {
    flex-shrink: 0;
  }

  .theme_modern #chat-menu,
  .theme_modern #chat-emoji-panel,
  .theme_modern #chat-color-palette {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  .theme_modern #chat_body {
    height: 360px !important;
  }

  .theme_modern #chat_users {
    width: 72px !important;
    min-width: 72px !important;
  }
}

/* --------------------------------------------------------------------------
   Плеер записи (VOD)

   Эфирный кадр живёт в #container_swf и делит ширину с чатом, поэтому у него
   отступ справа и скругление только слева. Запись чата не имеет: сцена на всю
   ширину карточки, скругление не нужно — его даёт сама карточка. Контролы
   (.pl-btn, полосы, громкость) те же, что у эфира; ниже только то, чего у
   эфира нет: таймлайн, время, качество, letterbox для вертикальных роликов.
   -------------------------------------------------------------------------- */

.theme_modern #record {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 0 !important;
  font-family: var(--font) !important;
}

/* Карточка записи тоже без скругления — иначе overflow:hidden у blackbox
   снова обрезает кадр по радиусу, даже если у #record radius:0. */
.theme_modern #record_block.blackbox,
.theme_modern #record_block {
  border-radius: 0 !important;
}

/*
 * Кадр всегда 16:9, ролик внутри не обрезаем: contain оставляет поля, если
 * исходник вертикальный или нестандартного соотношения. cover здесь резал бы
 * края и выглядел как ошибка макета, а не как «кинотеатр».
 */
.theme_modern #record-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* Нижняя полоса записи чуть выше эфирной: нужен зазор под таймлайн */
.theme_modern #record .pl-bar--bottom {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Таймлайн занимает оставшуюся ширину между громкостью и временем */
.theme_modern #record .pl-progress {
  flex: 1 1 auto;
  min-width: 48px;
  display: flex;
  align-items: center;
  height: 24px;
}

.theme_modern #record #progress-container {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
}

/* Невидимая зона выше и ниже полоски: иначе 4px трудно попасть пальцем */
.theme_modern #record #progress-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.theme_modern #record #progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  pointer-events: none;
}

.theme_modern #record #progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--accent-glow);
  pointer-events: none;
  display: none;
}

.theme_modern #record #progress-container:hover #progress-thumb {
  display: block;
}

.theme_modern #record .pl-time {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.theme_modern #record .pl-now {
  display: inline-flex;
}

.theme_modern #record .pl-channel:hover { color: #fff; }

/*
 * Качество — текстовая плашка, не квадрат .pl-btn: «HD» в боксе 36×36
 * выглядит дыркой в ряду иконок.
 */
.theme_modern #container_swf .pl-quality,
.theme_modern #record .pl-quality,
.theme_modern #quality-selector-container .pl-quality {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 40px !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 10px !important;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: 700 11px/1 var(--font) !important;
  letter-spacing: .35px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease);
}

.theme_modern #container_swf .pl-quality:hover,
.theme_modern #record .pl-quality:hover,
.theme_modern #quality-selector-container .pl-quality:hover {
  background: rgba(255, 255, 255, .2);
  transform: none;
  color: #fff;
}

/* Выбор качества (АВТО/HQ/LQ) в эфирном плеере канала скрыт. */
.theme_modern #container_swf #quality-selector-container,
.theme_modern #container_swf .pl-quality-wrap {
  display: none !important;
}

.theme_modern .pl-quality-menu,
.theme_modern #quality-menu.pl-quality-menu,
.theme_modern #quality-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  background: rgba(8, 12, 18, .88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  font-family: var(--font);
}

.theme_modern .pl-quality-menu[hidden],
.theme_modern #quality-menu[hidden] {
  display: none !important;
}

.theme_modern .pl-quality-menu__item,
.theme_modern #quality-menu .pl-quality-menu__item,
.theme_modern #quality-menu button[data-quality],
.theme_modern #container_swf #quality-menu button[data-quality] {
  display: grid !important;
  grid-template-columns: 14px 1fr;
  align-items: center;
  column-gap: 8px;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 8px 10px !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: 550 12px/1.1 var(--font) !important;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.theme_modern .pl-quality-menu__item:hover,
.theme_modern #quality-menu .pl-quality-menu__item:hover,
.theme_modern #quality-menu button[data-quality]:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.theme_modern .pl-quality-menu__item.is-active,
.theme_modern #quality-menu .pl-quality-menu__item.is-active,
.theme_modern #quality-menu button[data-quality].is-active {
  background: rgba(111, 222, 238, .14);
  color: #fff;
  font-weight: 650;
}

.theme_modern .pl-quality-menu__mark,
.theme_modern #quality-menu .q-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent, #6fdeee);
  font-size: 11px;
  line-height: 1;
}

.theme_modern .pl-quality-menu__label,
.theme_modern #quality-menu .q-label {
  min-width: 0;
  letter-spacing: .2px;
}

.theme_modern #record .pl-btn.is-fav {
  color: var(--premium);
}

/* Заглушка «обрабатывается» и 18+ — по центру 16:9, тем же шрифтом темы */
.theme_modern #record .pl-vod-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: #000;
  color: var(--text-strong);
  text-align: center;
  font-family: var(--font);
  z-index: 4;
}

.theme_modern #record .pl-vod-status__title {
  font-size: 16px;
  font-weight: 650;
}

.theme_modern #record .pl-vod-status__text {
  max-width: 28em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* В полноэкране кадр должен занять весь монитор, а не остаться 16:9-коробкой
   по центру чёрного поля — иначе контролы «плавают» внизу маленького прямоугольника */
.theme_modern #record:fullscreen,
.theme_modern #record:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  border-radius: 0;
}