/*
 * Стили модуля player: панель футер-плеера (полупрозрачное стекло, как
 * на старом сайте), обложка текущего трека, выезжающая справа панель
 * истории эфира, попап «Поделиться» и сетка 50 жанров плитками.
 *
 * Панель закреплена у нижнего края (position: fixed), поэтому body получает
 * компенсирующий отступ — контент не прячется за панелью. Высота панели —
 * переменная --radio-player-panel-height (tokens.css, доработка 6, этап 5):
 * одно место правки и для этого отступа, и для нижнего отступа попапа
 * истории; safe-area (телефоны с вырезом) учтена в переменной. Без JS панель
 * показывает нативный <audio>
 * (обычные controls), с JS — кнопку и строки текста (класс radio-player--js).
 * Слайдер громкости виден только на устройствах с точным указателем
 * (pointer: fine): на телефонах громкость из JS не управляется.
 *
 * Только классы .radio-*, переменные темы, без !important (AGENTS.md §7).
 */

body {
	padding-bottom: var(--radio-player-panel-height);
}

/* Полная блокировка нужна только под полноэкранным попапом телефона.
   На десктопе список удерживает колесо через overscroll-behavior. */
@media (max-width: 600px) {
	body.radio-history-open { overflow: hidden; }
	.radio-player .radio-player__history { width: 100%; }
}

/* --- Панель футер-плеера ------------------------------------------------- */

.radio-player {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
	background: var(--radio-panel);
	border-top: 1px solid var(--radio-border);
}

/* Без JS: нативный плеер — единственное управление (ширина панели). */
.radio-player__audio {
	display: block;
	width: 100%;
}

.radio-player__bar {
	display: none;
}

.radio-player--js .radio-player__audio {
	display: none;
}

/* С JS поля и рамку панели забирает полоса управления: она выше попапа
   истории и перекрывает его до собственного края. Фон корня прозрачный:
   визуальный слой один — стеклянная полоса, непрозрачный фон под ней
   убивал бы её полупрозрачность и blur. */
.radio-player--js {
	padding: 0;
	border-top: 0;
	background: transparent;
}

/* Полоса выше попапа истории (z-index 2 против 1): попап уезжает под
   плеер, кнопки и строки остаются видимыми; фон полосы перекрывает его
   до верхней рамки. Оформление — как на старом сайте: полупрозрачный
   тёмный фон с блюром и тень вверх. backdrop-filter живёт именно на
   полосе, а не на корне: на корне он создал бы containing block для
   попапа истории (position: fixed) и сломал бы его выезд. Полоса — во
   всю ширину экрана (breakout): затемнение попапа не обрезает её края;
   раскладку содержимого держит внутренний блок ниже. */
.radio-player--js .radio-player__bar {
	position: relative;
	z-index: 2;
	display: block;
	height: var(--radio-player-panel-height);
	background: rgba(20, 24, 33, 0.75);
	border-top: 1px solid var(--radio-border);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
}

/* Полоса макета: трек слева, play по центру, инструменты справа.
   Класс radio-container оставлен для совместимости, размеры задаёт модуль. */
.radio-player .radio-player__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: none;
	height: 100%;
	padding: 0 28px env(safe-area-inset-bottom, 0px);
}
.radio-player__track { display: flex; align-items: center; gap: 16px; min-width: 0; }
.radio-player__center { display: flex; justify-content: center; }
.radio-player-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.radio-playback-icon { width: 22px; height: 22px; color: var(--radio-white); pointer-events: none; }
.radio-playback-icon__pause { display: none; }
[aria-pressed="true"] > .radio-playback-icon .radio-playback-icon__play { display: none; }
[aria-pressed="true"] > .radio-playback-icon .radio-playback-icon__pause { display: block; }
.radio-player__toggle { display: grid; place-items: center; }
.radio-player--loading .radio-player__toggle .radio-playback-icon { visibility: hidden; }
.radio-player__tools { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.radio-player__vote:has(button[hidden]) { display: none; }

/* Центральная кнопка; значки общие для всех блоков сайта. */
.radio-player__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	padding: 0;
	background: var(--radio-bg-gradient);
	box-shadow: var(--radio-play-shadow);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.radio-player__toggle:hover {
	filter: brightness(1.15);
}

.radio-player__toggle:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Загрузка трека: на кнопке крутится кольцо — от клика до события playing
   (класс radio-player--loading ставит player.js). Правила стоят ниже
   правил «паузы»: при равной специфичности кольцо перекрывает её знак.
   left: 50% обязателен: иначе кольцо наследует left: 14px «паузы»
   и смещается влево, когда поток меняют во время игры. */
.radio-player--loading .radio-player__toggle::before {
	left: 50%;
	width: 20px;
	height: 20px;
	background: none;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--radio-text);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: radio-player-spin 0.8s linear infinite;
}

.radio-player--loading .radio-player__toggle::after {
	content: none;
}

@keyframes radio-player-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Обложка текущего трека: картинку из ответа REST ставит player.js (в
   разметке src нет вовсе). Нет обложки в ответе или сбой загрузки —
   файл-заглушка no-cover.webp; не загрузился и он (src убран) — последний
   слой: тёмный квадрат со «схемой пластинки» из псевдоэлемента. */
.radio-player__cover {
	position: relative;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	overflow: hidden;
	background: var(--radio-border);
	border-radius: 6px;
}

.radio-player__cover::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border: 2px solid var(--radio-panel);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.radio-player__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Без src (ещё не пришёл или сорвался) картинки не видно — видна заглушка. */
.radio-player__cover-img:not([src]) {
	display: none;
}

/* Кнопка «История»: открывает попап с последними треками станции. */
.radio-player__history-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.radio-player__history-toggle:hover {
	border-color: var(--radio-accent);
}

.radio-player__history-toggle:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Кнопка открыта (aria-expanded=true): акцент — как у активной плитки. */
.radio-player__history-toggle[aria-expanded="true"] {
	background: var(--radio-accent);
	border-color: var(--radio-accent);
}

/* Значок «часы» из псевдоэлементов, без картинок: циферблат и стрелки. */
.radio-player__history-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.radio-player__history-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: translate(-1px, -100%);
}

/* Кнопка «Поделиться» и попап со ссылками (VK, ОК, MAX): обёртка держит
   абсолютное позиционирование попапа над кнопкой. */
.radio-player__share {
	position: relative;
	flex: 0 0 auto;
}

.radio-player__share-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.radio-player__share-toggle:hover {
	border-color: var(--radio-accent);
}

.radio-player__share-toggle:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Кнопка открыта (aria-expanded=true): акцент — как у «Истории». */
.radio-player__share-toggle[aria-expanded="true"] {
	background: var(--radio-accent);
	border-color: var(--radio-accent);
}

/* Значок: три узла и две связи (служебный SVG, мотив share-иконок). */
.radio-player__share-icon {
	display: block;
	color: inherit;
}

.radio-player__share-node {
	fill: currentColor;
}

.radio-player__share-edge {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* Попап над кнопкой (бар у нижнего края): открытие — класс
   radio-share--open на компоненте; закрытие — Esc и клик мимо
   (player.js, паттерн истории). */
.radio-player__share-popup {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
	padding: 12px;
	background: rgba(17, 25, 54, 0.92); /* --radio-panel с прозрачностью */
	background: color-mix(in srgb, var(--radio-panel) 92%, transparent);
	border: 1px solid var(--radio-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	visibility: hidden;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.radio-share--open > .radio-player__share-popup {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* tabindex="0" — попап принимает фокус при открытии (как панель истории). */
.radio-player__share-popup:focus-visible {
	outline: 2px solid var(--radio-accent);
	outline-offset: -2px;
}

.radio-player__share-title {
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 600;
}

/* Ссылки соцсетей и кнопка копирования — одинаковые «кнопки-строки». */
.radio-player__share-link,
.radio-player__share-copy {
	display: block;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 8px;
	color: var(--radio-text);
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-player__share-link:hover,
.radio-player__share-link:focus-visible,
.radio-player__share-copy:hover,
.radio-player__share-copy:focus-visible {
	border-color: var(--radio-accent);
	background: var(--radio-accent);
}

.radio-player__share-link:focus-visible,
.radio-player__share-copy:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Служебное поле запасного копирования (execCommand): вне экрана. */
.radio-player__copy-helper {
	position: fixed;
	top: 0;
	left: -9999px;
	opacity: 0;
}

/* --- Кнопка «В избранное» (⭐) ----------------------------------------------- */

/* Обёртка группирует кнопку в ряду управления. */
.radio-player__fav {
	position: relative;
	flex: 0 0 auto;
}

/* Круглая кнопка 44px — как у «Поделиться» и «Истории». */
.radio-player__fav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.radio-player__fav-toggle:hover {
	border-color: var(--radio-accent);
}

.radio-player__fav-toggle:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Кнопка ждёт (нет трека или списка кабинета) — полупрозрачная.
   Гость и вошедший без данных видят одно и то же ожидание. */
.radio-player__fav-toggle:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Трек уже в избранном (aria-pressed=true) — рамка в акцент. */
.radio-player__fav-toggle.is-active {
	border-color: var(--radio-accent);
}

/* Звезда внутри — общий SVG-компонент .radio-star (style.css темы,
   правки 2026-10-11): контур всегда, в избранном — заливка акцентом;
   модульных правил заливки здесь больше нет (AGENTS.md §7: один класс —
   одна роль, без копий в каждом модуле). */

/* Сбой сети при переключении: короткая красная подсветка на 2 с (JS). */
.radio-player__fav-toggle.is-error {
	border-color: var(--radio-error);
}

/* --- Кнопка «Голосовать в чарте» (👍) ---------------------------------------- */

/* Обёртка группирует кнопку в ряду управления (как ⭐). */
.radio-player__vote {
	position: relative;
	flex: 0 0 auto;
}

/* Круглая кнопка 44px — как ⭐, «Поделиться» и «История». В разметке скрыта
   (hidden): player.js показывает её, только когда текущий трек в Топ-20
   (флаг in_chart ответа «сейчас играет»). */
.radio-player__vote-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	color: var(--radio-text);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

/* display:flex в классе перекрывает UA-правило [hidden] — прячем явно. */
.radio-player__vote-toggle[hidden] {
	display: none;
}

.radio-player__vote-toggle:hover {
	border-color: var(--radio-accent);
}

.radio-player__vote-toggle:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Кнопка ждёт (голос уходит или список «уже голосовал» ещё не загружен) —
   полупрозрачная, как ⭐. Гость кнопки не ждёт: ему попап входа. */
.radio-player__vote-toggle:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Палец «вверх»: контур всегда, заливка — когда голос уже учтён
   (aria-pressed=true, ставит player.js). */
.radio-action-icon {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	stroke-linecap: round;
}

[aria-pressed="true"] > .radio-action-icon {
	color: var(--radio-accent);
	fill: var(--radio-accent);
}

/* --- Единый тост-приглашение гостю (п. 5 решения владельца, 2026-10-10) ------

   Одна карточка справа сверху на все приглашения страницы (⭐ и 👍
   плеера, ⭐/👍 блока чарта через player.js): вид — прежний попап ⭐
   (тёмная карточка: заголовок, текст, кнопка «Войти»). Открытие — класс
   is-open (player.js), живёт 8 с, пока курсор не над ней (правки
   2026-10-11); клик мимо и переход на другую страницу закрывают сразу;
   фокус не забирает — текст внутри role="status" скринридер объявит сам. */
.radio-toast {
	position: fixed;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: 12px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(320px, calc(100vw - 24px));
	padding: 12px;
	background: rgba(17, 25, 54, 0.92); /* --radio-panel с прозрачностью */
	background: color-mix(in srgb, var(--radio-panel) 92%, transparent);
	border: 1px solid var(--radio-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	pointer-events: none;
}

.radio-toast.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
}

.radio-toast__title {
	font-size: 14px;
	font-weight: 600;
}

.radio-toast__text {
	margin: 0;
	font-size: 13px;
	color: var(--radio-muted);
}

/* Ссылка «Войти» — главное действие приглашения: акцентная кнопка-строка
   (как у прежнего попапа). Скрыта (hidden), когда тост показывает
   уведомление без входа (например, «Топ-20 заполнен»). */
.radio-toast__login {
	display: block;
	padding: 8px 10px;
	background: var(--radio-accent);
	border: 1px solid var(--radio-accent);
	border-radius: 8px;
	color: var(--radio-text);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

/* display:block в классе перекрывает UA-правило [hidden] — прячем явно. */
.radio-toast__login[hidden] {
	display: none;
}

.radio-toast__login:hover,
.radio-toast__login:focus-visible {
	filter: brightness(1.15);
}

.radio-toast__login:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Слайдер громкости: скрыт везде, включается только на десктопе —
   ширина экрана плюс точный указатель (pointer: fine), без UA-строки. */
.radio-player__volume {
	display: none;
	flex: 0 0 auto;
	width: 110px;
	margin: 0;
	accent-color: var(--radio-accent);
	cursor: pointer;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	height: 18px;
	background: transparent;
}
.radio-player__volume-control { position: relative; display: none; flex: 0 0 110px; width: 110px; height: 18px; }
.radio-player__volume-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 110px; height: 7px; appearance: none; border: 0; border-radius: 4px; background: var(--radio-volume-track); overflow: hidden; pointer-events: none; }
.radio-player__volume-fill::-webkit-progress-bar { background: var(--radio-volume-track); }
.radio-player__volume-fill::-webkit-progress-value { background: var(--radio-accent); }
.radio-player__volume-fill::-moz-progress-bar { background: var(--radio-accent); }
.radio-player__volume::-webkit-slider-runnable-track { height: 7px; background: transparent; }
.radio-player__volume::-moz-range-track { height: 7px; background: transparent; }
.radio-player__volume::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: -4px; border-radius: 50%; background: var(--radio-accent-light); box-shadow: var(--radio-volume-thumb-shadow); }
.radio-player__volume::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--radio-accent-light); box-shadow: var(--radio-volume-thumb-shadow); }

.radio-player__volume:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Кнопка mute/unmute рядом со слайдером: значок — служебный SVG
   (динамик и три дуги звука, мотив старого сайта); при выключенном
   звуке дуги убираются, а динамик перечёркивает тонкая диагональ.
   Скрыта там же, где слайдер. */
.radio-player__mute {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.radio-player__mute:hover {
	border-color: var(--radio-accent);
}

.radio-player__mute:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Значок: динамик залит, дуги и зачёркивание — штрих в цвет текста. */
.radio-player__mute-icon {
	display: block;
	color: inherit;
}

.radio-player__mute-speaker {
	fill: currentColor;
}

.radio-player__mute-wave,
.radio-player__mute-slash {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Зачёркивание скрыто, пока звук есть. */
.radio-player__mute-slash {
	display: none;
}

/* Звук выключен: дуги прячутся, динамик перечёркивает тонкая диагональ
   (градиентная полоса перекрывала значок — ошибка доработки 3). */
.radio-player__mute[aria-pressed="true"] .radio-player__mute-waves {
	display: none;
}

.radio-player__mute[aria-pressed="true"] .radio-player__mute-slash {
	display: block;
}

@media (min-width: 768px) and (pointer: fine) {
	.radio-player__volume-control { display: block; }
	.radio-player__volume {
		display: block;
	}

	.radio-player__mute {
		display: flex;
	}
}

/* Строки панели (п. 1 решения владельца, 2026-10-10): первая — название
   трека (до ответа now-playing — имя жанра из разметки), вторая —
   исполнитель. */
.radio-player__meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.radio-player__title,
.radio-player__artist {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.radio-player__title {
	font-size: 14px;
	font-weight: 500;
}

.radio-player__artist {
	color: var(--radio-muted);
	font-size: 12px;
}

/* Пустой второй строки нет: жанр без исполнителя занимает одну строку. */
.radio-player__artist:empty {
	display: none;
}

/* Во время превью строки показывают играющий клип (класс
   radio-player--preview ставит player.js): подсвечиваем исполнителя
   цветом текста — видно, что играет клип, а не трек эфира. */
.radio-player--preview .radio-player__artist {
	color: var(--radio-text);
}

/* --- Шкала превью (п. 3 решения владельца, 2026-10-10) ------------------- */

/* Тонкая дорожка по верхнему краю полосы плеера: заполнение — играющая
   часть 30-секундного клипа. Ширину красит player.js инлайн — величина
   динамическая, в CSS-файле ей быть не может (AGENTS.md §7). Видна только
   во время превью: атрибут hidden снимает и ставит player.js. Позиция —
   абсолютная внутри .radio-player__bar (position: relative выше в файле).
   touch-action: none — перемотка перетаскиванием не прокручивает страницу. */
.radio-player__progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	padding: 0;
	background: rgba(255, 255, 255, 0.16);
	border: 0;
	cursor: pointer;
	touch-action: none;
}

.radio-player__progress[hidden] {
	display: none;
}

.radio-player__progress:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: -2px;
}

/* Зона попадания пальца шире видимой дорожки: на 8px вверх (над панелью)
   и до конца собственной высоты — внизу кнопки начинаются только через
   8px от верха полосы (.radio-player__inner padding), их не перекрываем. */
.radio-player__progress::after {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	bottom: 0;
}

.radio-player__progress-fill {
	position: relative;
	display: block;
	width: 0;
	height: 100%;
	background: var(--radio-accent);
}
.radio-player__progress-fill::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--radio-accent-light);
	transform: translate(50%, -50%);
}

/* --- Панель истории эфира (выезжает справа, как у DFM) -------------------- */

/* Затемнение страницы под панелью: клик по нему закрывает попап
   (обработчик «клика мимо» в player.js). */
.radio-player__history-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.radio-player--history-open .radio-player__history-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Панель фиксирована справа и скрыта сдвигом за край; открытие — класс
   radio-player--history-open на корне (player.js). visibility в transition
   с задержкой: пока панель закрыта, она недоступна фокусу и скринридеру.
   Нижний отступ — высота полосы плеера (--radio-player-panel-height):
   попап уходит под неё (z-index
   полосы выше), а последняя строка списка остаётся видимой. */
.radio-player__history {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(375px, 100%);
	padding: 16px 16px var(--radio-player-panel-height);
	background: rgba(17, 25, 54, 0.86); /* --radio-panel с прозрачностью */
	background: color-mix(in srgb, var(--radio-panel) 86%, transparent);
	border-left: 1px solid var(--radio-border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.radio-player--history-open .radio-player__history {
	visibility: visible;
	transform: none;
	transition: transform 0.3s ease;
}
.admin-bar .radio-player__history { top: var(--wp-admin--admin-bar--height, 32px); }

/* tabindex="0" — панель принимает фокус при открытии: рамка уместна. */
.radio-player__history:focus-visible {
	outline: 2px solid var(--radio-accent);
	outline-offset: -2px;
}

.radio-player__history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.radio-player__history-title {
	font-size: 15px;
	font-weight: 600;
}

/* Кнопка «закрыть»: крестик двумя псевдоэлементами (как значок паузы). */
.radio-player__history-close {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--radio-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.radio-player__history-close:hover {
	border-color: var(--radio-accent);
}

.radio-player__history-close:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

.radio-player__history-close::before,
.radio-player__history-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: var(--radio-text);
}

.radio-player__history-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.radio-player__history-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Список истории эфира -------------------------------------------------- */

/* Строки строит JS из данных REST; список прокручивается внутри панели —
   шапка и статус остаются на месте. Запас справа и тонкая полоса
   прокрутки в цветах темы: время трека не прячется под полосой. */
.radio-history-list {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 8px;
	margin: 0;
	padding: 0 10px 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--radio-border) transparent;
	list-style: none;
}

.radio-history-list::-webkit-scrollbar {
	width: 8px;
}

.radio-history-list::-webkit-scrollbar-track {
	background: transparent;
}

.radio-history-list::-webkit-scrollbar-thumb {
	background: var(--radio-border);
	border-radius: 4px;
}

.radio-history-list::-webkit-scrollbar-thumb:hover {
	background: var(--radio-accent);
}

.radio-history-item {
	display: grid;
	grid-template-columns: 34px 48px minmax(0, 1fr) max-content;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.radio-history-item__cover-wrap { grid-column: 2; grid-row: 1; }
.radio-history-item__meta { grid-column: 3; grid-row: 1; }
.radio-history-item__actions { grid-column: 4; grid-row: 1; display: grid; grid-template-columns: repeat(2, 32px); gap: 4px; }
.radio-history-item__actions--manage { grid-template-columns: repeat(3, 32px); }
.radio-history-item__fav { grid-column: 2; grid-row: 1; }
.radio-history-item__vote { grid-column: 1; grid-row: 1; }
.radio-history-item__trophy { grid-column: 3; grid-row: 1; }

/* Обложка и кнопка превью — один блок: ▶ лежит оверлеем поверх картинки. */
.radio-history-item__cover-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.radio-history-item__cover {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	object-fit: cover;
}

/* Последний слой заглушки (файл no-cover.webp не загрузился): тот же
   размер, фон темы — строка не «скачет». */
.radio-history-item__cover--empty {
	background: var(--radio-border);
}

.radio-history-item__meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.radio-history-item__title,
.radio-history-item__artist {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.radio-history-item__title {
	font-size: 14px;
}

.radio-history-item__artist {
	color: var(--radio-muted);
	font-size: 12px;
}

/* Время начала эфира — слева; длительность лежит поверх обложки. */
.radio-history-item__duration { position: absolute; right: 2px; bottom: 2px; z-index: 1; padding: 1px 3px; border-radius: 3px; background: var(--radio-cover-button-shade); color: var(--radio-white); font-size: 9px; line-height: 1.2; font-variant-numeric: tabular-nums; pointer-events: none; }
.radio-history-item__time {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	color: var(--radio-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Кнопка превью «▶» — оверлей на обложке: полупрозрачная по умолчанию,
   ярче при наведении и фокусе с клавиатуры; зона касания — вся обложка. */
.radio-history-item__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background: rgba(11, 17, 43, 0.55); /* --radio-bg с прозрачностью */
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.radio-history-item__preview:hover,
.radio-history-item__preview:focus-visible {
	opacity: 1;
}

.radio-history-item__preview:focus-visible {
	outline: 2px solid var(--radio-accent);
	outline-offset: 2px;
}

/* Значок «играть» — треугольник, как у главной кнопки панели. */
.radio-history-item__preview::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--radio-text);
}

/* Клип играет (aria-pressed=true): кнопка показывает «стоп» — квадрат. */
.radio-history-item__preview[aria-pressed="true"]::before {
	width: 10px;
	height: 10px;
	background: var(--radio-text);
	border: 0;
	transform: translate(-50%, -50%);
}

/* Кнопки «В избранное» (⭐), «Голосовать в чарте» (👍) и «Добавить в
   Топ-20» (🏆) в строке истории: фиксированные места 32px перед временем.
   ⭐ строится всем трекам с идентификатором (п. 4 решения владельца),
   👍 — только вошедшим и только трекам из Топ-20, 🏆 — только админам
   (player.js по флагам in_chart/chart_manage); гостю ⭐ показывает
   общий тост (п. 5). */
.radio-history-item__fav,
.radio-history-item__vote,
.radio-history-item__trophy {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--radio-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: border-color 0.15s ease;
}

.radio-history-item__fav:hover,
.radio-history-item__vote:hover,
.radio-history-item__trophy:hover {
	color: var(--radio-text);
}
.radio-history-item .radio-action-icon { width: 16px; height: 16px; }

.radio-history-item__fav:focus-visible,
.radio-history-item__vote:focus-visible,
.radio-history-item__trophy:focus-visible {
	outline: 2px solid var(--radio-text);
	outline-offset: 2px;
}

/* Запрос ушёл (⭐/👍) или трек добавляется (🏆): полупрозрачность до ответа. */
.radio-history-item__fav:disabled,
.radio-history-item__vote:disabled,
.radio-history-item__trophy:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Трек в избранном (⭐) или голос учтён (👍) — aria-pressed=true, акцент. */
.radio-history-item__fav[aria-pressed="true"],
.radio-history-item__vote[aria-pressed="true"] {
	color: var(--radio-accent);
}

/* Сбой сети при переключении ⭐: короткая красная подсветка (JS). */
.radio-history-item__fav.is-error {
	border-color: #e5484d;
}

/* Статус списка: «Загружаем…», «Пока пусто», «История недоступна». */
.radio-player__history-status {
	margin: 8px 0 0;
	color: var(--radio-muted);
	font-size: 13px;
}

.radio-player__history-status:empty {
	display: none;
}

/* Потоки: геометрия карточек из утверждённого макета. */
.radio-streams { margin-top: 24px; }
.radio-streams__heading { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.radio-stream-list {
 display: grid;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 gap: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.radio-stream-list__item { position: relative; min-width: 0; }
.radio-stream-item {
 position: relative;
 padding: 8px 8px 12px;
 background: var(--radio-panel);
 border: 1px solid var(--radio-border);
 border-radius: var(--radio-radius-sm);
 color: var(--radio-text);
 transition: transform .2s ease, border-color .2s ease;
}
.radio-stream-item__cover {
 position: relative;
 aspect-ratio: 13 / 10;
 overflow: hidden;
 border-radius: 6px;
 background: var(--radio-panel-2);
}
.radio-stream-item__art { display: block; width: 100%; height: 100%; object-fit: cover; }
.radio-stream-item__name {
 margin: 10px 4px 2px;
 overflow: hidden;
 font-size: 13px;
 font-weight: 500;
 white-space: nowrap;
 text-overflow: ellipsis;
}
.radio-stream-item:hover { transform: translateY(-3px); border-color: var(--radio-line-strong); }
.radio-stream-item.is-active { border-color: var(--radio-accent); }
.radio-stream-list__empty { color: var(--radio-muted); }
@media (max-width: 1400px) {
 .radio-stream-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 .radio-stream-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 480px) {
	.radio-history-list {
		gap: 6px;
	}
}

/* Те же функции в новой полосе: на телефоне кнопки остаются доступными. */
.radio-player__tools .radio-player__fav-toggle,
.radio-player__tools .radio-player__vote-toggle,
.radio-player__tools .radio-player__history-toggle,
.radio-player__tools .radio-player__share-toggle,
.radio-player__tools .radio-player__mute {
	width: 34px;
	height: 34px;
	border: 0;
	color: var(--radio-muted);
	background: transparent;
}
.radio-player__tools button:hover { color: var(--radio-text); background: var(--radio-hover); }
.radio-player__tools .radio-player__vote-toggle:hover { background: transparent; }
.radio-player__tools button[aria-expanded="true"] { color: var(--radio-accent-light); }
.radio-player__tools .radio-player__fav-toggle.is-error { color: var(--radio-error); box-shadow: inset 0 0 0 1px var(--radio-error); }
@media (max-width: 900px) {
	.radio-player .radio-player__inner { padding-left: 16px; padding-right: 16px; gap: 14px; }
}
@media (max-width: 640px) {
	.radio-player__toggle { width: 38px; height: 38px; }
	.radio-player .radio-player__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 40px 34px;
		gap: 4px 14px;
		padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
	}
	.radio-player__track { gap: 10px; }
	.radio-player__cover { width: 40px; height: 40px; }
	.radio-player__tools { grid-column: 1 / -1; justify-content: center; }
	.radio-player__share { position: static; }
	.radio-player__share-popup { width: min(220px, 100%); bottom: calc(var(--radio-player-panel-height) + 10px); }
}

/* Уменьшенная анимация: кольцо загрузки замедляется, но не замирает —
   без вращения оно читалось бы как статичный круг. */
@media (prefers-reduced-motion: reduce) {
	.radio-player--loading .radio-player__toggle::before {
		animation-duration: 1.6s;
	}
}

/* Очередь кабинета в общей панели. */
.radio-player__center { align-items:center; gap:8px; }
.radio-player__previous,.radio-player__next { display:grid; place-items:center; width:30px; height:32px; padding:4px; border:0; background:transparent; color:var(--radio-text); cursor:pointer; }
.radio-player__previous svg,.radio-player__next svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.radio-player__previous:disabled,.radio-player__next:disabled { opacity:.35; cursor:default; }
.radio-player__return-radio { padding:4px 6px; border:1px solid var(--radio-line-strong); border-radius:6px; background:transparent; color:var(--radio-accent-light); font:inherit; font-size:11px; cursor:pointer; }
.radio-player__previous[hidden],.radio-player__next[hidden],.radio-player__return-radio[hidden] { display:none; }
@media(max-width:640px) { .radio-player--queue .radio-player__tools { gap:8px; } .radio-player--queue .radio-player__center { gap:2px; } }