/* ============================================
   常驻小播放器 —— 模块自己的样式
   （单独一份，不放 base.css）

   长相模仿参考站 sansphase.com 的「音乐卡」：
     黑胶唱片（中心是站名）+ 唱臂 + 进度条 + ⏮⏸⏭ + 1/6
   【但配色全换成我们自己的香槟金】
     参考站那张卡：描边 #ffd841 亮黄、标签 #25a3ff 蓝。
     它那个蓝其实很可能是播放器库 Plyr 的默认色漏出来的，不是设计。
     我们用 --signal（香槟金 #d9c49c），跟全站一致。

   想换位置：把 .dock 的 left 改成 right 就是右下角（现在左下角）。
   想试参考站那个亮黄描边：改 .dock 里的 --dock-edge 一行。
   ============================================ */

.dock {
  /* 卡片描边 —— 整张卡最"参考站"的那一笔。
     参考站是 rgb(255 216 65 / 67%)（亮黄）。
     我们换成自己的香槟金，跟全站一致。 */
  --dock-edge: rgb(217 196 156 / 52%);   /* ← 想试亮黄就换成 rgb(255 216 65 / 67%) */

  /* ★ 整张卡的大小，只由这一个数决定。
     唱片、唱臂、中心的字都按它算出来，改这一行，全都跟着缩放。
     调大就加大，调小就减小 —— 别的一个数都不用动。 */
  --dock-w: 264px;
  --disc: calc(var(--dock-w) * 0.58);    /* 唱片直径 */
  --arm:  calc(var(--dock-w) * 0.40);    /* 唱臂边长 */

  position: fixed;
  left: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 20;                 /* 压在 #app(z-index:1) 上面 */

  width: var(--dock-w);
  padding: 14px 18px 18px;

  display: flex; flex-direction: column; gap: 14px;

  border: 1px solid var(--dock-edge);
  border-radius: 24px;
  background: var(--smoked-fill);
  box-shadow: var(--smoked-shadow);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);

  animation: dock-in .7s var(--ease) both;
}
.dock:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }

@keyframes dock-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* —— 顶部一条：音乐 · 歌名 · 歌手 · 1/6 · 收起箭头 ——
   整条是个按钮：点一下展开/收起。 */
.dock-fold {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; min-width: 0; padding: 0;
  text-align: left;
}
.dock-fold:focus-visible, .dock-btn:focus-visible {
  outline: 1px solid var(--signal); outline-offset: 2px; border-radius: 8px;
}
.dock-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--signal);
  white-space: nowrap;
}
.dock-tag::before { content: "♪"; font-size: 12.5px; letter-spacing: 0; }
.dock-title {
  min-width: 0;
  font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-artist {
  flex: 0 1 auto; min-width: 0;
  font-size: 11px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em;
  color: var(--muted);
}
.dock-chevron {
  display: inline-flex; color: var(--dim);
  transition: transform .4s var(--ease);
}
.dock[data-state="folded"] .dock-chevron { transform: rotate(180deg); }

/* —— 黑胶 + 唱臂 —— */
.dock-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 12px 0 2px;
}
.dock[data-state="folded"] .dock-stage { display: none; }

.disc {
  position: relative;
  width: var(--disc); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #171a20 0 34%, #0b0d11 34% 100%);
  box-shadow:
    inset 0 0 0 1px rgb(238 233 224 / 9%),
    inset 0 2px 12px rgb(255 255 255 / 5%),
    0 20px 44px rgb(0 0 0 / 55%);

  animation: disc-spin 14s linear infinite;
  animation-play-state: paused;   /* 暂停时停在原地，不回零 */
}
.dock.is-playing .disc { animation-play-state: running; }

@keyframes disc-spin { to { transform: rotate(360deg); } }

/* 唱片纹路：一圈圈极细的同心圆 */
.disc-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgb(238 233 224 / 4.5%) 0 1px,
    transparent 1px 4.5px);
}

/* 中心标签：参考站那儿写的是站名「無相」，我们写「埃法」 */
.disc-label {
  position: relative;
  display: grid; place-items: center;
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a3320 0%, #241812 55%, #140d0a 100%);
  box-shadow: inset 0 0 0 1px rgb(217 196 156 / 22%);
  font-family: var(--font-wordmark);
  font-size: calc(var(--disc) * 0.088); letter-spacing: .12em; text-indent: .12em;
  color: var(--signal);
  text-shadow: 0 0 14px rgb(217 196 156 / 45%);
}
.disc-hole {
  position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: #05070b;
  box-shadow: 0 0 0 1px rgb(238 233 224 / 14%);
}

/* 中心放图片时（用户说后面要换成图片）：裁成圆的填满标签 */
.disc-img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* 既没给图也没给字时的兜底，总比空着好看 */
.disc-note {
  font-size: calc(var(--disc) * 0.11);
  color: var(--signal);
  opacity: .7;
}

/* 唱臂：从右上角伸下来。播放时压到盘上，暂停时抬起来离开。
   轴心在 SVG 的 (104,16) → transform-origin 换算成百分比。 */
.arm {
  position: absolute;
  top: -4px; right: -6px;
  width: var(--arm); height: var(--arm);
  overflow: visible;
  pointer-events: none;
  transform-origin: 86.7% 13.3%;
  transform: rotate(-24deg);           /* 抬起，离开盘面 */
  transition: transform .9s var(--ease);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 55%));
}
.dock.is-playing .arm { transform: rotate(-3deg); }   /* 压到盘上 */

.arm-base { fill: #d6cec0; }
.arm-bar  { stroke: #b0a894; stroke-width: 3.4; stroke-linecap: round; }
.arm-head { fill: #ddd6c8; }

/* —— 进度条：00:00 ——●—— 0:00 —— */
.dock-seek { display: flex; align-items: center; gap: 10px; }
.dock-now, .dock-end {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--muted);
  min-width: 34px;
}
.dock-end { text-align: right; }

/* 视觉上只有 3px 高，但整块 14px 都能点中，不然太细点不着。
   已播 / 未播用 --p 这个变量切，见 index.js 的 setProgress()。 */
.dock-range {
  --p: 0%;
  flex: 1; min-width: 0;
  display: block;
  -webkit-appearance: none; appearance: none;
  height: 14px; background: none; cursor: pointer;
}
.dock-range::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--signal) 0 var(--p), rgb(238 233 224 / 18%) var(--p) 100%);
}
.dock-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px; margin-top: -4px;
  border-radius: 50%;
  background: #efe3c4;
  box-shadow: 0 0 8px rgb(217 196 156 / 50%);
  transition: transform .15s var(--ease);
}
.dock-range:hover::-webkit-slider-thumb { transform: scale(1.2); }
.dock-range::-moz-range-track {
  height: 3px; border-radius: 3px; background: rgb(238 233 224 / 18%);
}
.dock-range::-moz-range-progress {
  height: 3px; border-radius: 3px; background: var(--signal);
}
.dock-range::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%;
  background: #efe3c4;
  box-shadow: 0 0 8px rgb(217 196 156 / 50%);
}

/* —— 三个按钮。中间那个是描边圆圈（跟参考站一样），不是实心。 —— */
.dock-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.dock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--muted);
  transition: color .2s, background .2s, transform .12s;
}
.dock-btn:hover { color: var(--text); background: rgb(238 233 224 / 8%); }
.dock-btn:active { transform: scale(.92); }
.dock-btn--play {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.dock-btn--play:hover {
  border-color: var(--signal);
  color: var(--signal);
  background: rgb(217 196 156 / 8%);
}
.dock-btn:disabled { opacity: .35; cursor: default; }
.dock-btn:disabled:hover { background: none; color: var(--muted); }
.dock-btn--play:disabled:hover { border-color: var(--line-strong); color: var(--muted); }

/* —— 收起态：只留一条。黑胶收起来，控件都还在。 —— */
.dock[data-state="folded"] { padding: 12px 16px 14px; gap: 10px; }

/* —— 自动播放被浏览器拦了才露头的一行字 —— */
.dock-hint {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .18em;
  color: var(--signal);
}
.dock.is-blocked .dock-hint { display: block; }

/* —— 一首歌都没有的时候 —— */
.dock.is-empty .dock-title { color: var(--dim); }

/* —— 窄屏：占满底部一条 —— */
@media (max-width: 560px) {
  .dock { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* —— 系统设了「减少动态效果」就别转了 —— */
@media (prefers-reduced-motion: reduce) {
  .disc { animation: none; }
  .arm { transition: none; }
}