/* ══════════════════════════════════════════════════════════════════════════
   常驻迷你播放器（/radio 用）
   ┌── 为什么要有这条 ────────────────────────────────────────────────────────┐
   │ 点播的整期节目每期约 90 分钟。控件如果跟着列表走，用户往下翻两屏就再也  │
   │ 找不到暂停键；而 90 分钟的东西，人一定会翻页、会走开、会回来。         │
   │ 所以播放控制必须脱离列表，固定在视口底部。                              │
   └──────────────────────────────────────────────────────────────────────────┘
   颜色一律取 radio.css 已经定义好的变量，这里**不重新定义任何变量** ——
   两份定义迟早会分叉，而分叉后深色模式会在某一个页面上悄悄失灵。
   ══════════════════════════════════════════════════════════════════════════ */

.rp-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none;                      /* 没在播时整条不占位，见 .is-on */
  align-items:center; gap:14px;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--card2); backdrop-filter:var(--blur);
  border-top:1px solid var(--stroke);
  box-shadow:var(--shadow);
  font-family:var(--font); color:var(--txt);
}
.rp-bar.is-on{display:flex}

/* ── 播放键：同时兼当加载指示 ───────────────────────────────────────────── */
.rp-play{
  width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  transition:transform .16s;
}
.rp-play:hover{transform:scale(1.05)}
.rp-play:disabled{cursor:progress}
.rp-play svg{width:16px; height:16px; fill:currentColor}
.rp-play .rp-spin{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:rp-rot .8s linear infinite;
}
@keyframes rp-rot{to{transform:rotate(360deg)}}
/* 系统里关了动效就别转 —— 转圈对前庭敏感的人是真的不舒服 */
@media (prefers-reduced-motion: reduce){
  .rp-play .rp-spin{animation:none; border-top-color:rgba(255,255,255,.7)}
  .rp-play:hover{transform:none}
}

/* ── 标题区 ─────────────────────────────────────────────────────────────── */
.rp-meta{min-width:0; flex:0 1 220px}
.rp-title{
  font-size:14.5px; font-weight:700; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-sub{
  font-size:12.5px; color:var(--muted); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-sub.rp-err{color:var(--live)}

/* ── 跳转键 ─────────────────────────────────────────────────────────────── */
.rp-skip{
  width:34px; height:34px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--sub); background:transparent;
  font-size:10px; font-weight:700;
}
.rp-skip:hover{color:var(--txt); background:rgba(148,163,184,.16)}
.rp-skip:disabled{opacity:.3; cursor:not-allowed; background:transparent}
.rp-skip svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* ── 进度 ───────────────────────────────────────────────────────────────── */
.rp-seek{flex:1 1 auto; display:flex; align-items:center; gap:10px; min-width:0}
.rp-range{
  flex:1 1 auto; min-width:60px; height:20px; padding:0; margin:0;
  background:transparent; accent-color:var(--blue); cursor:pointer;
}
.rp-range:disabled{cursor:default; opacity:.55}
.rp-time{
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* 直播态：没有可回溯的缓冲区，所以不给进度条，改成一句状态 */
.rp-livetag{
  display:none; align-items:center; gap:7px; font-size:13px; font-weight:650; color:var(--live);
  white-space:nowrap;
}
.rp-livetag .rp-dot{width:8px; height:8px; border-radius:50%; background:currentColor;
  animation:rp-pulse 1.6s ease-in-out infinite}
@keyframes rp-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){ .rp-livetag .rp-dot{animation:none} }
.rp-bar.is-live .rp-seek{display:none}
.rp-bar.is-live .rp-livetag{display:inline-flex}

/* ── 倍速 / 音量 / 关闭 ─────────────────────────────────────────────────── */
.rp-rate{
  flex:none; padding:6px 11px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--sub);
  background:transparent; border:1px solid var(--stroke2);
}
.rp-rate:hover{color:var(--txt); border-color:#94a3b8}
.rp-bar.is-live .rp-rate{display:none}   /* 直播没有倍速可言 */

.rp-vol{display:flex; align-items:center; gap:7px; flex:none; color:var(--muted)}
.rp-vol svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.rp-vol input{width:78px; accent-color:var(--blue); cursor:pointer}

.rp-close{
  width:32px; height:32px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--muted); background:transparent;
}
.rp-close:hover{color:var(--txt); background:rgba(148,163,184,.16)}
.rp-close svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round}

/* ── 窄屏：两行排，绝不横向溢出 ─────────────────────────────────────────── */
@media (max-width:760px){
  .rp-vol{display:none}          /* 手机有硬件音量键，这条最先让位 */
}
@media (max-width:520px){
  .rp-bar{
    flex-wrap:wrap; gap:8px 10px; padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  }
  .rp-meta{flex:1 1 auto; order:1}
  .rp-play{order:0; width:40px; height:40px}
  .rp-close{order:2}
  .rp-seek{order:4; flex:1 1 100%}
  .rp-livetag{order:4; flex:1 1 100%}
  .rp-skip{order:3; width:30px; height:30px}
  .rp-rate{order:3; padding:5px 9px; font-size:12px}
  .rp-title{font-size:13.5px}
}