/* ============================================================
   星海音乐 Web · player-bar.css（v6.26 · 从 style.css 结构化拆分）
   内容：桌面播放条 / Toast
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ================= 播放条 ================= */
.player-bar {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(200px, 30%) minmax(0, 1fr) minmax(160px, 240px);
  align-items: center;
  gap: 18px;
  height: var(--pb-h);
  padding: 0 22px;
  background: rgba(12, 17, 30, 0.92);
  border-top: 1px solid rgba(var(--accent-rgb), 0.16);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  /* 全局液态玻璃光效：顶部内侧镜面高光 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  z-index: 30;
}
.pb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-cover-box {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  flex: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.pb-cover-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.pb-cover-box.has img { display: block; }
.pb-cover-box.has .pb-cover-fallback { display: none; }
.pb-cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #3d4a68; }
.pb-cover-fallback .icon { width: 24px; height: 24px; }
.pb-meta { min-width: 0; flex: 1; }
.pb-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-singer {
  margin-top: 4px;
  font-size: 12px;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-center { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.pb-buttons { display: flex; align-items: center; gap: 10px; }
.play-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.12s, box-shadow 0.2s;
}
/* 【v6.26 uiverse 风格】播放中：外圈光环呼吸 ping（波纹扩散 + 主体增亮）
   paused 时光环透明收口，无残留 */
.play-btn::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.6);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.play-btn.playing { box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.play-btn.playing::after { animation: play-ping 1.9s cubic-bezier(0, 0.4, 0.2, 1) infinite; }
@keyframes play-ping {
  0% { transform: scale(0.92); opacity: 0.78; }
  70% { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .play-btn.playing::after { animation: none; opacity: 0.35; transform: scale(1.06); }
}
.play-btn:hover { box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.play-btn:active { transform: scale(0.94); }
.play-btn .icon { width: 21px; height: 21px; position: relative; }

.pb-progress { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 620px; }
.time { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; flex: none; }

.pb-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.vol-icon { color: var(--sub); flex: none; }

/* 【v6.23】滑杆液态玻璃升级（进度条 / 音量条共用，np/fs 视图在各自
   css 里放大尺寸）：轨道 = 暗玻璃槽 + 主题色发光填充（--fill 由 JS
   paintRange 写入）+ 填充端头椭圆光晕（跟在滑块脚下）；滑块 = 玻璃珠
   （白核 + 主题光晕 + 顶部镜面高光），悬停放大 / 按压拖拽继续胀大，
   松手弹性回缩——滑杆有了"液态珠子"的跟手手感。
   拖拽中 JS 加 .scrub：轨道整体提亮（玻璃通电感）。 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 99px;
  background:
    radial-gradient(15px 7px at var(--fill, 0%) 50%,
      rgba(255, 255, 255, 0.55) 0px,
      rgba(var(--accent-rgb), 0.38) 3px,
      rgba(var(--accent-rgb), 0.14) 7px,
      transparent 11px),
    linear-gradient(to right,
      #c6cfff 0px,
      var(--accent) var(--fill, 0%),
      #2a3550 var(--fill, 0%),
      #1c2439 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  outline: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}
#progressBar { flex: 1; }
#volumeBar { width: 90px; }
input[type="range"].scrub { filter: brightness(1.18) saturate(1.12); }

/* 滑块：玻璃珠（webkit） */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #ffffff 0%, #eef1ff 38%, #c3ccf5 68%, #97a5e8 100%);
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.22),
    0 0 12px rgba(var(--accent-rgb), 0.40),
    0 2px 6px rgba(0, 0, 0, 0.42),
    inset 0 -2px 3px rgba(80, 92, 150, 0.38),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.22); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.32); }
input[type="range"].scrub::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.30),
    0 0 16px rgba(var(--accent-rgb), 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45),
    inset 0 -2px 3px rgba(80, 92, 150, 0.38),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* 滑块：玻璃珠（Firefox）+ 原生进度填充 */
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #ffffff 0%, #eef1ff 38%, #c3ccf5 68%, #97a5e8 100%);
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.22),
    0 0 12px rgba(var(--accent-rgb), 0.40),
    0 2px 6px rgba(0, 0, 0, 0.42),
    inset 0 -2px 3px rgba(80, 92, 150, 0.38),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.22); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.32); }
input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 99px;
  background: #1c2439;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
input[type="range"]::-moz-range-progress {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(to right, #c6cfff, var(--accent));
}
@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb { transition: none !important; }
  input[type="range"] { transition: none !important; }
}

/* ================= Toast ================= */
/* 【v6.26 uiverse 风格】图标 + 类型色光带 + 2.6s 计时进度条（与 JS toastTimer 同步）
   结构：#toast > .t-ic（类型色圆点图标）+ .t-msg（文本）+ .t-bar（底部进度线） */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pb-h) + 22px);
  transform: translateX(-50%) translateY(16px);
  /* 【v6.33 修复】toast 原先 z-index:60，低于迷你条(90)/底部导航(95)/
     全屏播放器(110)/弹窗(120)，手机端提示被迷你播放条盖住"不是最顶层"。
     提到 10000：高于 pwa 提示条(9999)与所有业务层级，任何场景都置顶。 */
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 13px;
  border-radius: 12px;
  background: rgba(18, 24, 40, 0.82);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  max-width: 70vw;
  overflow: hidden;
  --t-accent: var(--accent);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 【v6.33 修复】手机端：原 bottom 是桌面播放条高度(--pb-h)，手机上迷你条
   悬浮在 bottom:62px+安全区、高 58px（占位至 120px+安全区），toast 正好
   与其重叠又被压在下层。抬到迷你条上方 12px，与 pwa.js 提示条同思路。 */
@media (max-width: 768px) {
  .toast { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}
/* 【v6.33】全屏播放器打开时迷你条隐藏、底部是进度条/控制按钮密集区，
   toast 移到顶部展示，避免盖住播放控件（与 resume-bar 顶部位置错开时段出现） */
body.np-open .toast {
  bottom: auto;
  top: calc(14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%) translateY(-16px);
}
body.np-open .toast.show { transform: translateX(-50%) translateY(0); }
/* 【v6.33】切歌取链加载态：三个播放按钮图标呼吸，旧歌继续播、
   标题封面不提前切（app.js loading/songchange 驱动 body.song-switching） */
body.song-switching #btnPlay .icon,
body.song-switching #miniPlay .icon,
body.song-switching #fsPlay .icon,
body.song-switching #npPlay .icon {
  animation: switchingPulse 0.9s ease-in-out infinite;
}
@keyframes switchingPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.song-switching #btnPlay .icon,
  body.song-switching #miniPlay .icon,
  body.song-switching #fsPlay .icon,
  body.song-switching #npPlay .icon { animation: none; opacity: 0.55; }
}
.toast.success { --t-accent: #2fd6a6; border-color: rgba(47, 214, 166, 0.3); }
.toast.error { --t-accent: #ff5d7a; border-color: rgba(255, 93, 122, 0.32); }
.t-ic {
  flex: none;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--t-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  box-shadow: 0 0 10px var(--t-accent);
}
.t-msg { min-width: 0; }
.t-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--t-accent) 30%, var(--t-accent) 70%, transparent);
  transform-origin: left;
  transform: scaleX(1);
}
.toast.show .t-bar { animation: t-bar 2.6s linear forwards; }
@keyframes t-bar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .toast.show .t-bar { animation: none; transform: none; opacity: 0.45; }
}