/* ================= Шрифты ================= */
@font-face {
  font-family: 'Nova Square';
  src: url('fonts/nova-square.woff2') format('woff2'), url('fonts/nova-square.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Material Icons';
  src: url('fonts/material-icons.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* ================= Переменные ================= */
:root {
  --color-primary: #f44336;
  --color-primary-hover: #f443ff;
  --color-primary-transparent: #f444368c;
  --color-bg-dark: #000;
  --bar-color: #171311;
  --color-bg-medium: #222;
  --color-bg-light: #2f2f2f;
  --color-bg-overlay: #343434aa;
  --color-bg-console: #555555a1;
  --color-text-light: #f44336;
  --color-text-medium: #999;
  --color-text-dark: #434343;
  --color-white-transparent: #ffffff50;
  --color-thumb: #959696;
  --gradient-overlay: linear-gradient(#000000aa, #000000cc);
  --gap-small: 4px;
  --gap-medium: 15px;
  --padding-small: 3px;
  --padding-medium: 5px;
  --padding-large: 3px 5px;
  --radius-small: 3px;
  --radius-medium: 4px;
  --radius-large: 7px;
  --logo-size: 65px;
  --track-height: 0.5rem;
  --thumb-size: 10px;
  --window-width: 90%;
  --window-max-width: 628px;
  --window-min-item-width: 90px;
  --window-gap: 8px;
  --btn-height: auto;
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-slow: 0.5s;
  --font-primary: 'Nova Square', Arial, Helvetica, sans-serif;
  --font-fallback: Arial;
  --font-size-tiny: 0.52em;
  --font-size-small: 7pt;
  --font-size-medium: 70%;
  --font-size-large: 75%;
  --font-size-icon: 24px;
  --opacity-medium: 0.5;
  --filter-pwa: hue-rotate(128deg) brightness(1.4);
  /* Safe-area: в iOS PWA env() может быть 0 — тогда script.js
     подставляет 54px/34px прямо в эти переменные. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --gap-mobile: 6px;
  --gap-desktop: 16px;
  --min-item-width-mobile: 65px;
  --min-item-width-desktop: 90px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ================= Оболочка приложения ================= */
/* Фон — на canvas (html), на весь экран; нижний градиент гасит фото
   в цвет background_color манифеста, чтобы переход в системную зону
   home-indicator был незаметен. */
/* v5.60/v5.62: фон целиком на body (см. ниже), у html фона нет специально.
   Исторически bg лежал на html{height:100%}, а нижние 72px градиентом
   перекрашивались в сплошной --bar-color — это и была «пустая плашка снизу».
   Позже выяснилось второе: пока у html задан фон, propagation фона body в
   canvas окна подавляется, и область вне layout viewport iOS красит своей
   подложкой → та же полоса. Поэтому html теперь намеренно без фона. */
html {
  /* v5.62: у html фона НЕТ намеренно (ни цветом, ни картинкой) — иначе по
     стандарту блокируется propagation фона body в canvas окна, и iOS красит
     область вне layout viewport системной подложкой вместо нашей картинки.
     Размеры/отступы оставлены. */
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* body — единственный fixed-контейнер. Все оверлеи (чат, тост, кнопка
   обновления) — position: absolute внутри body.

   v5.59: убран height: var(--app-h,100%). JS ставил --app-h = window.innerHeight
   ОДИН раз при загрузке, а на iOS в PWA innerHeight приходит раньше, чем iOS
   разворачивает web-область на весь экран (замер стенда: screen 874px, а
   innerHeight в момент установки = 812px) → body оказывался короче экрана ровно
   на safe-area-inset-top, и снизу была чёрная полоса. inset:0 у fixed-элемента —
   это всегда актуальная web-область, пересчитывается самим iOS без JS.
   Хак в script.js удалён полностью; переменная больше нигде не читается.
   v5.60: сюда же переехал фон с html (см. правило body ниже). */
body {
  font-family: var(--font-primary);
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* v5.60: фон = web-область целиком, до самого низа (body — fixed inset:0).
     Убран нижний linear-gradient(… calc(100%-72px) … bar-color): он рисовал
     «плашку» под нижней панелью. Оставлен затемняющий оверлей + bg.svg по центру. */
  background-color: var(--bar-color);
  background-image:
    var(--gradient-overlay),
    url("img/bg.svg");
  background-position: 0 0, 50% 50%;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}

.active { display: flex !important; }
.hidden { display: none !important; }

p#console {
  font-size: var(--font-size-small);
  color: var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-bg-console);
  display: none;
  padding: var(--padding-large);
  animation: blink 2.5s linear infinite;
}
@keyframes blink {
  0% { opacity: var(--opacity-medium); }
  50% { opacity: 1; }
  100% { opacity: var(--opacity-medium); }
}

/* ================= Каркас ================= */
/* v5.63: вложенность свёрнута к ОДНОМУ контейнеру — ровно как в /viewtest/,
   где экран заполнялся от верха до низа без единой полосы. div'ы .wrapper и
   .window УДАЛЕНЫ (и их правила вместе с ними): было body → .wrapper →
   .window → .controls, стало body → .controls → #top-bar / .middle / .bb.
   Каждый лишний уровень — это ещё один height:100%, который обязан отработать;
   на iOS PWA достаточно одного сорванного уровня, чтобы снизу образовалась
   пустая зона. Теперь высоту тянет только .controls (дочерний элемент
   фиксированного body с inset:0 = web-область целиком).
   max-width + margin:0 auto — центрирование широкой колонки на десктопе
   (бывший .window); на телефоне screen < 628px, поэтому ширина полная. */
.controls {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: var(--window-max-width);
  margin: 0 auto;
  color: var(--color-text-light);
  justify-content: center;
  padding: 15px;
}

#top-bar, .bottom-bar { flex-shrink: 0; }

/* v5.59: safe-area. Включён viewport-fit=cover, поэтому верхний бар обязан
   отступать под вырез/статус-бар (на скриншоте заголовок залезал под Dynamic
   Island). Раньше паддинг был закомментирован. Базовый вертикальный отступ у
   #top-bar исторически 0 (.span нигде не определён) — добавляется ровно env(),
   на десктопе это 0, вид не меняется.
   Нижняя панель: safe-area добавлен прямо в её правило padding ниже (строкой
   позже), иначе shorthand padding перебивает отдельный padding-bottom. */
#top-bar { padding-top: var(--safe-top); }

.controls .middle {
  /* flex: 1 1 auto; */   /* v5.59: середина растягивается на всё свободное место */
  /* min-height: 0; */
  /* min-width: 0; */
  /* display: flex; */
  /* v5.61: было align-items/justify-content:center — сетка станций центрировалась
     по вертикали внутри своей области, и когда она ниже области, сверху и снизу
     образовывались симметричные пустые зоны (видны на скриншоте). Теперь середина
     растягивается на всю высоту: сетка стартует сразу под шапкой, а нижняя панель
     прижимается к низу web-области. */
  /* align-items: stretch; */
  /* justify-content: flex-start; */
}

/* ================= Сетка станций ================= */
.stlist {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stlist canvas {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to top, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
}

.stlist ul {
  position: relative;
  z-index: 1;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  min-width: 0;
  gap: var(--window-gap);
}

.stlist ul li {
  position: relative;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  padding-bottom: calc(100% - 2px);
  border-radius: var(--radius-large);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  height: 0;
  min-width: 0;
}

.controls .stlist ul .act-button {
  background: var(--color-primary);
  text-shadow: 0 1px var(--padding-small) #000000aa;
}

.controls .stlist ul li.not-available {
  opacity: 0.6;
  cursor: pointer;
  filter: grayscale(0.15);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.controls .stlist ul li.not-available::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 4px;
  width: 6px; height: 6px;
  background: #f44336;
  border-radius: 50%;
}

.stlist ul li .logo {
  position: absolute;
  top: var(--padding-small);
  left: var(--padding-small);
  right: var(--padding-small);
  bottom: var(--padding-small);
  width: auto;
  height: auto;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: #fff;
  word-wrap: break-word;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--logo-size);
  height: var(--logo-size);
  opacity: var(--opacity-medium);
}

/* ================= Топ-бар и нижняя панель ================= */
.flex-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform var(--transition-slow) ease-in-out,
              opacity var(--transition-medium) ease-in-out;
  transform: translate(0px, -500px);
  opacity: 0;
}

#style, #track { font-size: var(--font-size-medium); color: var(--color-text-medium); }

.controls .bb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-medium);
  /* v5.61: панель прижата к низу web-области. Раньше снизу было
     calc(16px + safe-area) = ~50px мёртвой зоны («пустая плашка» под кнопками).
     Оставлен только отступ под home-indicator + 4px воздуха: панель теперь
     последняя, фоном до самого края экрана. */
  padding: var(--gap-desktop) 0 calc(4px + var(--safe-bottom));
}

.volume-wrap { display: flex; align-items: center; gap: var(--gap-medium); }
/* v5.58: кнопка «Настройки» переехала в .volume-wrap рядом с ползунком громкости.
   Не даём ей сжиматься и подчёркиваем: на iOS скрывается ТОЛЬКО сам <input id=volume>
   (script.js: $volume.style.display='none'), кнопка настроек остаётся видимой всегда. */
.volume-wrap #settings-btn { flex-shrink: 0; }

.controls .bb div i {
  cursor: pointer;
  margin: auto;
  transition: color var(--transition-fast);
  color: var(--color-primary);
  font-size: var(--font-size-icon);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.controls .bb div i:hover { color: var(--color-white-transparent); }

input[type=range] {
  -webkit-appearance: none; appearance: none; background: transparent;
  background: var(--color-bg-light); cursor: pointer;
  border-radius: var(--radius-small); overflow: hidden;
}
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track { background: var(--color-bg-light); height: var(--track-height); }
::-webkit-slider-thumb { -webkit-appearance: none; height: var(--thumb-size); width: var(--thumb-size); background: var(--color-thumb); }

#js-wave-visualizer {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  -webkit-touch-callout: none;
}

/* ================= Адаптив ================= */
@media (display-mode: standalone) { .help { display: none !important; } }

@media screen and (min-width: 1920px) { .controls { font-size: 150%; } }

@media screen and (min-width: 601px) {
  .stlist ul { grid-template-columns: repeat(8, 1fr); }
}

@media screen and (max-width: 600px) {
  /* На телефоне каркас = вся web-область, горизонтальные отступы даёт только
     safe-area (актуально в landscape). */
  .controls { max-width: none; }
  #top-bar { padding-left: var(--safe-left); padding-right: var(--safe-right); }
  .controls .bb { padding-left: var(--safe-left); padding-right: var(--safe-right); }
  :root { --window-gap: var(--gap-mobile); }
}

/* ================= Копирование трека ================= */
.track-row { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.track-row #track { margin: 0; min-width: 0; }
/* Подтверждение копирования — отдельный элемент, а не текст #track:
   #track читают шапка чата («Сейчас играет: …») и Media Session (лок-скрин),
   поэтому «Скопировано» не должно при них появляться. На время подтверждения
   #track скрыт (hidden), его текст остаётся настоящим треком. */
#track-copied {
  font-size: var(--font-size-medium);
  color: var(--color-text-medium);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.track-copy-icon {
  font-size: 14px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-medium);
  opacity: .6;
  user-select: none;
  -webkit-user-select: none;
}
.track-copy-icon:hover { opacity: 1; }
/* строка целиком кликабельна (копировать трек) — подсветка при наведении.
   Без var(--color-text): такой переменной в radiostyle.css нет, брали б неопределённую */
.track-row #track:hover { color: #ddd; }

/* ================= Share / like / chat: кнопки топ-бара ================= */
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.top-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: var(--color-text-medium);
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.top-action:active { transform: scale(0.93); }
.top-action svg { fill: currentColor; display: block; flex-shrink: 0; }
.top-action:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }

.top-action .icon-heart { fill: none; stroke: currentColor; stroke-width: 2; }
.top-action.liked {
  color: var(--color-primary);
  border-color: rgba(244, 67, 54, 0.55);
  background: rgba(244, 67, 54, 0.12);
}
.top-action.liked .icon-heart { fill: var(--color-primary); stroke: var(--color-primary); }

.like-count { font-size: 11px; }
.online-count { font-size: 11px; }

.top-action.active {
  color: #fff;
  border-color: var(--color-primary);
  background: rgba(244, 67, 54, 0.14);
}

.chat-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 9px;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ================= Панель чата ================= */
/* absolute — привязка к body-оболочке: на iOS PWA панель идёт от
   физического верха до физического низа экрана. */
.chat-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 94vw);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: rgba(18, 14, 12, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  transform: translateX(105%);
  transition: transform 0.25s ease;
  color: #ddd;
  font-family: var(--font-primary);
  /* v5.23: свайп-закрытие. pan-y оставляет браузеру вертикальный скролл
     списка сообщений, горизонтальный drag перехватывает JS (pointer events) */
  touch-action: pan-y;
}
.chat-panel.open { transform: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  /* шапка и крестик — ниже статус-бара; в обычном Safari inset = 0 */
  padding-top: calc(12px + var(--safe-top));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.chat-head-info { min-width: 0; }

.chat-station {
  display: block;
  color: var(--color-primary);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-track {
  display: block;
  color: var(--color-text-medium);
  font-size: 10px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка закрытия: зона тапа 44x44 по HIG Apple */
.chat-close {
  background: none;
  border: none;
  color: var(--color-text-medium);
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.chat-close svg { fill: currentColor; }
.chat-close:hover { color: #fff; }

.chat-reacts {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

.react-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  color: #ddd;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.react-btn .react-emoji { font-size: 14px; }
.react-btn .react-cnt {
  font-size: 10px;
  color: var(--color-text-medium);
  font-weight: 400;
}
.react-btn:active { transform: scale(0.94); }
.react-btn.mine {
  border-color: var(--color-primary);
  background: rgba(244, 67, 54, 0.15);
}
.react-btn.mine .react-cnt { color: var(--color-primary); }

.chat-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.chat-msg { max-width: 100%; }
.chat-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.chat-msg-name {
  color: var(--color-primary);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.chat-msg.own .chat-msg-name { color: #ff8a80; }
.chat-msg-station {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  flex-shrink: 0;
}
.chat-msg-station.here {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(0, 0, 0, 0.12);
}
.chat-msg-ts {
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  flex-shrink: 0;
}
.chat-msg-text {
  color: #d6d6d6;
  font-size: 12px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.chat-form {
  display: flex;
  gap: 6px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.chat-form input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
  min-width: 0;
}
/* iPhone/тач: font-size >= 16px, иначе iOS Safari зумит страницу при фокусе
   (когда ставят курсор в поле) — это и есть «запрет на автозум». */
@media (pointer: coarse) {
  .chat-form input { font-size: 16px; }
}
.chat-form input::placeholder { color: rgba(255, 255, 255, 0.35); }
.chat-form input:focus { border-color: var(--color-primary); }
.chat-name { width: 74px; flex-shrink: 0; }
.chat-text { flex: 1 1 auto; }
.chat-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-send svg { fill: #fff; }
.chat-send:disabled { opacity: 0.5; }

/* ================= Тосты ================= */
/* absolute — внутри body-оболочки, не зависят от вьюпорта iOS */
.rp-toast {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3;
  padding: 8px 14px;
  border-radius: 10px;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
  animation: rp-toast-in 0.2s ease;
}
@keyframes rp-toast-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ================= Тесный топ-бар на узких экранах ================= */
@media screen and (max-width: 460px) {
  .top-action { min-width: 26px; height: 26px; padding: 0 5px; gap: 3px; }
  .top-action svg { width: 13px; height: 13px; }
  .like-count { font-size: 10px; }
  .top-actions { gap: 4px; }
}

/* ================= Онлайн-бейдж на иконке станции ================= */
/* Маленький бейдж в левом нижнем углу плитки: сколько слушает эту станцию
   прямо сейчас. 0 — скрывается (атрибут hidden). v5.24: иконка «люди»
   (та же, что у кнопки общего онлайна) + цифра. Без рамки: белый
   + тень, чтобы читалось поверх логотипа. */
.stlist ul li .st-online {
  position: absolute;
  left: 5px;
  bottom: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.stlist ul li .st-online svg {
  width: 10px;
  height: 10px;
  fill: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
  flex-shrink: 0;
}
.stlist ul li .st-online .st-online-n { font-weight: 700; }
.stlist ul li .st-online[hidden] { display: none; }
/* Не пересекаться с красной точкой «недоступна» (left:4px bottom:4px) */
.stlist ul li.not-available .st-online { left: 16px; }

/* ================= Heart feed (v5.22) ================= */
/* Слой «летающих сердец»: поверх сетки, под чат-панелью (1200) */
#heart-fx {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1100;
  pointer-events: none;
  overflow: hidden;
}
.fx-heart {
  position: absolute;
  width: 18px;
  height: 18px;
  color: #ff4d5e;
  filter: drop-shadow(0 0 6px rgba(255, 77, 94, 0.65));
  animation: fx-heart-rise var(--dur, 2.2s) ease-out forwards;
  will-change: transform, opacity;
}
.fx-heart svg { fill: currentColor; display: block; width: 100%; height: 100%; }
@keyframes fx-heart-rise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--rise, 140px)))
               scale(var(--s, 1)) rotate(var(--rot, 0deg));
  }
}

/* «Пулс» плитки, от которой летит сердце */
.stlist ul li.hearthit { animation: fx-tile-pop 0.4s ease; }
@keyframes fx-tile-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* «Горячая» станция: пульсирующее сердце в углу плитки (~8 сек) */
.st-hot-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 12px;
  height: 12px;
  color: #ff4d5e;
  filter: drop-shadow(0 0 5px rgba(255, 77, 94, 0.8));
  pointer-events: none;
  animation: fx-hot-pulse 1s ease-in-out infinite;
}
.st-hot-badge svg { fill: currentColor; display: block; width: 100%; height: 100%; }
@keyframes fx-hot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* Glow «тусовка»: на станции >= 3 слушателей */
.stlist ul li { transition: box-shadow 0.8s ease; }
.stlist ul li.glow-party {
  box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.55),
              0 0 18px rgba(244, 67, 54, 0.35),
              0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ================= v5.23 ================= */
/* Иконка паузы в #radioname — inline-SVG (script.js, radio.pause).
   Символ "⏸" (U+23F8) на iPhone Safari рендерится серым системным эмодзи,
   на остальных устройствах — текстовым глифом; SVG одинаков везде. */
#radioname .pause-ico {
  width: 12px;
  height: 12px;
  fill: currentColor;
  vertical-align: -1.5px;
  margin-right: 4px;
  flex-shrink: 0;
}
/* ================= Шашки: одна партия на всё PWA (v5.34) ================= */
/* Русские шашки вместо крестиков-ноликов. Слой — absolute внутри body
   (как чат и тосты), поэтому приглашение видно на ЛЮБОЙ станции.
   .spec — зритель: pointer-events:none, плитки станций кликабельны сквозь
   слой; сама карточка перехватывает тапы. Бэкенд api/checkers.php.
   Размер доски — из CSS-математики по vw/vh (см. --sqb), поэтому квадрат
   одинаково корректен на телефоне, в landscape и на десктопе. */
#rp-chk-layer{position:absolute;inset:0;z-index:1150;display:none;font-family:var(--font-primary);color:#f2ede9;-webkit-tap-highlight-color:transparent}
#rp-chk-layer.on{display:flex}

/* игрок / созыв / экран приглашения — затемнение на весь экран.
   align-items:flex-start + overflow прокруткой — надёжно на низких экранах;
   вертикальное центрирование только там, где высоты заведомо хватает */
#rp-chk-layer.full{background:rgba(18,14,12,.93);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;align-items:flex-start;justify-content:center;overflow:hidden auto;-webkit-overflow-scrolling:touch;padding:max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(12px,var(--safe-bottom)) max(10px,var(--safe-left))}
@media screen and (min-height:800px){#rp-chk-layer.full{align-items:center}}

/* зритель: карточка сверху (под топ-баром), клики сквозь слой */
#rp-chk-layer.spec{background:transparent;pointer-events:none;align-items:flex-start;justify-content:center;padding:calc(var(--safe-top, 0px) + 78px) 10px 10px}
@media screen and (orientation:landscape){#rp-chk-layer.spec{padding:calc(var(--safe-top, 0px) + 10px) 10px 10px}}

/* ---- лист партии ---- */
.rp-c-sheet{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:min(94vw,520px);margin:auto}
.rp-c-side{display:flex;flex-direction:column;gap:6px;width:100%;max-width:min(94vw,470px)}
.rp-c-side.bot{align-items:stretch}

/* ---- доска: квадрат = минимум из ширины и высоты экрана ---- */
.rp-c-board{--sqb:min(94vw,52vh,430px);width:var(--sqb);height:var(--sqb);flex:none;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:10px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.rp-c-board.mini{--sqb:min(62vw,180px);border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* низкие/альбомные экраны: доска по высоте, отступы и шрифты плотнее */
@media screen and (max-height:640px){.rp-c-board{--sqb:min(70vh,42vw,420px)}.rp-c-sheet{gap:5px}.rp-c-side{gap:4px}}
@media screen and (orientation:landscape) and (max-height:520px){.rp-c-board.mini{--sqb:min(34vh,150px)}}

/* ---- поля ---- */
.rp-c-sq{position:relative;display:flex;align-items:center;justify-content:center;background:#4a3b33}
.rp-c-sq.d{background:#1c1512}
.rp-c-sq.last::before{content:"";position:absolute;inset:0;background:rgba(244,67,54,.17);pointer-events:none}
.rp-c-sq[data-act]{cursor:pointer}
/* можно выбрать свою шашку */
.rp-c-sq.ok::after{content:"";position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
/* а эта шашка ОБЯЗАНА бить (взятие по правилам) — красный пульсирующий кружок */
.rp-c-sq.ok.must::after{box-shadow:inset 0 0 0 2px rgba(244,67,54,.95),0 0 12px rgba(244,67,54,.5);animation:rp-blink 1.3s infinite}
/* выбранная */
.rp-c-sq.sel::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 2px #f44336,0 0 12px rgba(244,67,54,.5)}
/* поле хода / поле взятия */
.rp-c-sq.go::before{content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;margin:-14% 0 0 -14%;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 0 8px rgba(255,255,255,.25)}
.rp-c-sq.hit::before{content:"";position:absolute;inset:12%;border-radius:50%;border:2px dashed rgba(244,67,54,.9);box-sizing:border-box}
.rp-c-lbl{position:absolute;right:3%;top:2%;font-size:calc(var(--sqb)/58);line-height:1;color:rgba(255,255,255,.34);font-weight:400;pointer-events:none;z-index:3}
.rp-c-board.mini .rp-c-lbl{display:none}
@media screen and (max-width:600px){.rp-c-lbl{display:none}}

/* ---- шашки ---- */
.rp-c-p{position:relative;z-index:2;width:80%;height:80%;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -2px 3px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.55)}
.rp-c-p.w{background:radial-gradient(circle at 32% 26%,#fffaf6,#ded4cb 58%,#a2948b)}
.rp-c-p.b{background:radial-gradient(circle at 32% 26%,#615650,#251e1a 60%,#0c0908)}
.rp-c-p.dead{opacity:.32}
.rp-c-sq.dead .rp-c-p,.rp-c-sq.dead::before{opacity:.32}
.rp-c-crown{width:58%;height:58%;fill:#f6c94a;filter:drop-shadow(0 1px 1px rgba(0,0,0,.65))}

/* ---- шапка, чипсы, статус ---- */
.rp-c-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#f44336;font-weight:700;width:100%;min-width:0}
.rp-c-title{flex:none}
.rp-c-counts{font-size:10px;color:#a89e97;font-weight:400;display:flex;align-items:center;gap:3px;flex:none}
.rp-c-half,.rp-c-vis,.rp-c-wait{font-size:9px;background:rgba(244,67,54,.16);color:#ffb3ad;border:1px solid rgba(244,67,54,.4);border-radius:20px;padding:2px 8px;font-weight:400;flex:none}
.rp-c-chips{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:#a89e97;width:100%;min-width:0}
.rp-c-chip{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:20px;border:1px solid rgba(255,255,255,.1);min-width:0;overflow:hidden;white-space:nowrap}
.rp-c-chip b{color:#f2ede9;font-weight:400;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.rp-c-chip em{font-style:normal;color:#fff;background:rgba(255,255,255,.1);border-radius:10px;padding:0 5px;font-size:9.5px}
.rp-c-chip.turn{border-color:#f44336;color:#fff;background:rgba(244,67,54,.18)}
.rp-c-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.rp-c-dot.w{background:#efe6de;box-shadow:inset 0 -1px 1px rgba(0,0,0,.35)}
.rp-c-dot.b{background:#241d1a;box-shadow:inset 0 -1px 1px rgba(255,255,255,.25)}
.rp-c-status{text-align:center;font-size:12px;color:#e8dfd8;min-height:16px}
.rp-c-status.mine{color:#fff;background:rgba(244,67,54,.16);border-radius:9px;padding:5px 8px}
.rp-c-status.sm{font-size:10.5px;min-height:0}

/* ---- кнопки ---- */
.rp-c-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.rp-c-btn{background:#f44336;color:#fff;border:none;border-radius:10px;padding:9px 14px;font-size:12px;font-family:var(--font-primary);cursor:pointer;box-shadow:0 2px 12px rgba(244,67,54,.4);pointer-events:auto}
.rp-c-btn.ghost{background:transparent;color:#a89e97;border:1px solid rgba(255,255,255,.12);box-shadow:none}
@media screen and (max-height:640px){.rp-c-btn{padding:6px 11px;font-size:11px}.rp-c-status{font-size:11px}.rp-c-chip{font-size:9.5px;padding:3px 7px}}
.rp-c-x{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#a89e97;width:24px;height:24px;cursor:pointer;font-size:12px;line-height:1;flex-shrink:0;pointer-events:auto}
.rp-c-x.abs{position:absolute;top:0;right:0;margin:0}

/* ---- карточка зрителя / приглашение ---- */
.rp-c-card{pointer-events:auto;background:rgba(23,19,17,.9);border:1px solid rgba(244,67,54,.3);border-radius:14px;padding:9px 10px;display:flex;flex-direction:column;gap:7px;width:min(84vw,244px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.rp-c-card .rp-c-head{font-size:11px}
.rp-c-card b{color:#e8dfd8;font-weight:400;font-size:9.5px;margin-left:auto}
.rp-c-inv{font-size:11.5px;color:#f2ede9;line-height:1.35;text-align:center}

/* ---- экран созыва / приглашения на игру ---- */
.rp-c-mid{margin:auto;text-align:center;max-width:300px;width:100%}
.rp-c-mid h3{font-size:14px;color:#f2ede9;margin-bottom:6px}
.rp-c-mid p{font-size:11px;color:#a89e97;line-height:1.5;margin-bottom:14px}
.rp-c-radar{width:64px;height:64px;margin:10px auto;border-radius:50%;border:2px solid rgba(244,67,54,.5);position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 34% 30%,#efe6de,#a2948b)}
.rp-c-radar::before{content:"";width:34%;height:34%;border-radius:50%;background:#1c1512}
.rp-c-radar::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(244,67,54,.35);animation:rp-pulse 1.8s ease-out infinite}
@keyframes rp-pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ---- бейдж на иконке игры в нижнем баре ---- */
#game-btn{position:relative}
.rp-game-badge{display:none;position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#f44336;box-shadow:0 0 8px rgba(244,67,54,.8)}
.rp-game-badge.blink{display:block;animation:rp-blink 1.2s infinite}
.rp-game-badge.solid{display:block}
@keyframes rp-blink{50%{opacity:.3}}


/* ================= Реакции на сообщения и ответы (v5.41) ================= */
.chat-msg-more {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 2px;
  margin: -4px 0;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.chat-msg-more:hover { color: #fff; }

/* цитата «в ответ на …» */
.chat-msg-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 5px;
  padding: 5px 8px;
  border-left: 2px solid var(--color-primary);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.chat-msg-quote-name { color: var(--color-primary); font-size: 9px; }
.chat-msg-quote-text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* чипы реакций на сообщении */
.chat-msg-reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.msg-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  cursor: pointer;
  color: #ddd;
  font-size: 12px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.msg-react-chip .msg-react-cnt { font-size: 9px; color: var(--color-text-medium); font-weight: 400; }
.msg-react-chip.mine {
  border-color: var(--color-primary);
  background: rgba(244, 67, 54, 0.15);
}
.msg-react-chip.mine .msg-react-cnt { color: var(--color-primary); }

/* панель действий (ответ + эмодзи) по кнопке ⋮ */
/* ВАЖНО: не класс .active — на сайте глобальное .active{display:flex!important}
   (строка .active), оно бы сломало вертикальный ряд сообщения.
   Поэтому используем свой класс .open-tools. */
.chat-msg.open-tools .chat-msg-tools { display: flex; }
.chat-msg-tools {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-tool-reply,
.msg-tool-emoji {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-primary);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 11px;
}
.msg-tool-reply { background: rgba(255, 255, 255, 0.08); color: #ddd; padding: 0 9px; }
.msg-tool-emoji { background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 14px; padding: 0 7px; }
.msg-tool-reply:active,
.msg-tool-emoji:active { transform: scale(0.95); }

/* превью «ответ» над формой */
.chat-reply {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(244, 67, 54, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chat-reply-ico { color: var(--color-primary); font-size: 12px; flex-shrink: 0; }
.chat-reply-text {
  flex: 1 1 auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-x {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 6px;
  min-width: 26px;
  min-height: 26px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.chat-reply-x:active { color: #fff; }


/* ---- версия-чип внизу + автообновление (v5.43) ---- */
.app-version {
  position: absolute;
  bottom: calc(12px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  /* v5.46: ниже всех оверлеев — чат (1200), шашки (1150), настройки (1400),
     тосты (1300). Раньше 1300 — чип лез поверх открытого чата и перекрывал
     поле ввода. Над обычным контентом (z<=3) чип остаётся видимым. */
  z-index: 1090;
  border: none;
  border-radius: 10px;
  padding: 4px 10px;
  background: rgba(20, 16, 14, 0.82);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.app-version.update {
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 2px 10px rgba(244, 67, 54, 0.4);
}

/* ================= Кнопка «Настройки» в топ-баре (v5.45) ================= */
.current { flex: 1 1 auto; min-width: 0; } /* название станции ужимается, а шестерёнка с лого встаёт справа */
.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.top-right #settings-btn { flex-shrink: 0; }

/* ================= Модальное окно «Настройки» (v5.45) ================= */
.rp-settings {
  position: absolute;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: var(--font-primary);
  color: #eee;
  -webkit-tap-highlight-color: transparent;
}
.rp-settings.open { display: flex; }
.rp-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.rp-settings.open .rp-settings-backdrop { opacity: 1; }
.rp-settings-card {
  position: relative;
  width: min(420px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(22, 17, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(22px) scale(0.98);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(.2,.7,.3,1), opacity 0.22s ease;
}
.rp-settings.open .rp-settings-card { transform: none; opacity: 1; }

.rp-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.rp-settings-logo {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(244, 67, 54, 0.16);
  color: var(--color-primary);
}
.rp-settings-logo svg { fill: currentColor; }
.rp-settings-title { font-size: 15px; letter-spacing: 0.4px; flex: 1 1 auto; }
.rp-settings-close {
  background: none; border: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.rp-settings-close:active { background: rgba(255,255,255,0.1); color: #fff; }
.rp-settings-close svg { fill: currentColor; }

.rp-settings-body { overflow: hidden; flex: 1 1 auto; min-height: 0; }
.rp-settings-pages {
  display: flex;
  height: 100%;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1);
}
.rp-settings-page {
  flex: 0 0 100%;
  min-width: 0;
  padding: 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rp-page-title { margin: 0 0 4px; font-size: 14px; color: #fff; letter-spacing: 0.3px; }
.rp-page-sub { margin: 0 0 14px; font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* тумблеры */
.rp-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.rp-option-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-option-info b { font-size: 12px; color: #fff; font-weight: 500; }
.rp-option-info span { font-size: 10px; color: rgba(255,255,255,0.45); line-height: 1.3; }
.rp-option .rp-switch { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rp-switch-ui {
  position: relative;
  width: 44px; height: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.rp-switch-ui::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}
.rp-switch:checked + .rp-switch-ui { background: var(--color-primary); }
.rp-switch:checked + .rp-switch-ui::after { transform: translateX(20px); }

/* имя */
.rp-name-field { display: flex; gap: 8px; margin-bottom: 12px; }
.rp-name-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 16px; /* >=16px: iPhone не зумит */
  padding: 9px 12px;
  outline: none;
}
.rp-name-input::placeholder { color: rgba(255,255,255,0.4); }
.rp-name-input:focus { border-color: var(--color-primary); }
.rp-name-save {
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12px;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.rp-name-save:active { transform: scale(0.96); }
.rp-hint {
  font-size: 10px;
  color: #ffd166;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.18);
  display: none;
  line-height: 1.4;
}
.rp-hint.show { display: block; }

/* «О приложении» — список иконок */
.rp-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-about-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.rp-about-list b { font-size: 12px; color: #fff; flex-shrink: 0; }
.rp-about-list p { margin: 0; font-size: 10px; color: rgba(255,255,255,0.55); line-height: 1.3; }
.rp-ico {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--color-text-medium);
  flex-shrink: 0;
}
.rp-ico svg { fill: currentColor; }

/* низ: навигация по страницам */
.rp-settings-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.rp-nav {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  border-radius: 9px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.rp-nav:active { background: rgba(255,255,255,0.12); color: #fff; }
.rp-nav svg { fill: currentColor; }
.rp-nav[disabled] { opacity: 0.35; pointer-events: none; }
.rp-settings-dots { display: flex; gap: 6px; align-items: center; }
.rp-settings-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s, transform 0.2s;
}
.rp-settings-dots i.on { background: var(--color-primary); transform: scale(1.2); }

/* иконка «Ответить» — в стиле остальных иконок (SVG) */
.chat-reply-ico svg { fill: currentColor; display: block; }
.msg-tool-reply svg { fill: currentColor; margin-right: 1px; }
.msg-tool-reply svg + span { display: inline-block; }

/* ===== v5.46: выключенный визуализатор (waveform) ===== */
/* Класс вешает блок «Настройки» на #js-wave-visualizer; отрисовка при этом
   тоже останавливается (visualizerActive=false в script.js). */
#js-wave-visualizer.rp-wave-off { display: none !important; }