/* ==========================================
   musicbox.css（v214.8）顶栏音乐盒
   —— 芯片嵌在顶栏最左；面板为 body 级玻璃浮层（弹层铁律：挂 body、压过顶栏）。
      v214.3 起免版税音乐源（公共领域 / Jamendo / 本地文件），无扫码无 VIP。
      背景透明（毛玻璃），浅暗两主题跟随全站变量；动效全部带 prefers-reduced-motion 兜底。
   ========================================== */

/* ---------- 顶栏芯片（v214.2：顶栏最左。
   未播放 = 纯图标基础 UI；有歌暂停 = 封面 + 歌名 + 播放键；
   播放中 = 封面变主色 + 迷你均衡器 + 当前歌词行（换行淡入 / 过长滚动字幕）+ 暂停键） ---------- */
.mb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 36px; height: 36px; padding: 0 6px; margin-right: 6px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--text-sub, #6f6d66);
  cursor: pointer; flex: none; max-width: 330px; overflow: hidden;
  transition: background .25s ease, color .25s ease;
  /* v214.6：顶栏穿透机制（style.css 给 .topbar 整体设了 pointer-events none + 白名单放行）——
     新控件必须显式放行，否则芯片整块点不了（known-issues §110） */
  pointer-events: auto;
}
.mb-chip:hover { background: var(--bg-hover-tint, rgba(0,0,0,.03)); color: var(--text-main, #1f1e1b); }
[data-theme="dark"] .mb-chip:hover { background: rgba(255,255,255,.06); }
/* 面板开着 = 明确的激活态（玻璃白浮起 / 暗色白 8%），不再让 hover 底色当「常驻白」背锅 */
.mb-chip.open {
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px var(--border, rgba(0,0,0,.08)), 0 2px 10px rgba(20,20,20,.07);
  color: var(--text-main, #1f1e1b);
}
[data-theme="dark"] .mb-chip.open { background: rgba(255,255,255,.1); box-shadow: none; }
.mb-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring, rgba(37,99,235,.4)); }
.mb-chip:focus:not(:focus-visible) { box-shadow: none; }
.mb-cov {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft, rgba(37,99,235,.08));
  color: var(--accent, #2563eb); overflow: hidden;
  transition: background .25s ease, color .25s ease;
}
.mb-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-chip.playing .mb-cov { background: var(--accent, #2563eb); color: #fff; }
.mb-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.mb-chip.playing .mb-eq { display: inline-flex; }
.mb-eq i {
  width: 2.5px; background: var(--accent, #2563eb); border-radius: 2px;
  animation: mbEq .9s ease-in-out infinite;
}
.mb-eq i:nth-child(1) { height: 5px; }
.mb-eq i:nth-child(2) { height: 11px; animation-delay: .22s; }
.mb-eq i:nth-child(3) { height: 8px; animation-delay: .44s; }
@keyframes mbEq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
/* 歌名 / 当前歌词行：滚动字幕 + 换行淡入 */
.mb-live {
  display: none; min-width: 0; max-width: 168px; height: 36px; line-height: 36px; overflow: hidden;
  font-size: 12.5px; color: var(--text-main, #1f1e1b);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.mb-chip.has-song .mb-live { display: block; animation: mbSwap .4s ease; }
.mb-live.on { color: var(--text-main, #1f1e1b); }
.mb-roll { display: inline-block; white-space: nowrap; vertical-align: top; }
.mb-roll.roll { animation: mbRoll 9s linear infinite alternate; }
@keyframes mbRoll { from { transform: translateX(0); } to { transform: translateX(var(--mb-x, -40px)); } }
.mb-live.swap { animation: mbSwap .4s ease; }
@keyframes mbSwap { from { opacity: .15; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* 播放 / 暂停小圆键 */
.mb-pbtn {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--bg-hover-strong, rgba(0,0,0,.08)); color: var(--text-main, #1f1e1b);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.mb-chip.has-song .mb-pbtn { display: inline-flex; }
.mb-chip.playing .mb-pbtn, .mb-pbtn:hover { background: var(--accent, #2563eb); color: #fff; }
.mb-pbtn:active { transform: scale(.88); }

/* ---------- 玻璃面板（body 级浮层） ---------- */
.mb-panel {
  position: fixed; z-index: 8600;
  max-height: min(620px, calc(100dvh - 80px));
  display: flex; flex-direction: column;
  /* v214.3 修「音符点了没效果」：display:flex 会压掉 [hidden]（known-issues §103 同族），
     收起后一块透明面板一直挡在芯片上——收起态强制 visibility+pointer-events 双保险 */
  visibility: hidden; pointer-events: none;
  border-radius: 18px; border: 1px solid var(--glass-border, rgba(255,255,255,.6));
  background: var(--glass-menu, rgba(255,255,255,.74));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--shadow-island, 0 12px 40px rgba(20,20,20,.08)), 0 24px 60px rgba(20,20,20,.14);
  color: var(--text-main, #1f1e1b);
  opacity: 0; transform: translateY(-8px) scale(.98);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.mb-panel.on { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; }
[data-theme="dark"] .mb-panel {
  /* v214.8：0.72 太透，暗色页面下白色大标题会被 backdrop blur 糊成白雾，提到 0.88 */
  background: rgba(24, 26, 34, .88);
  border-color: rgba(255, 255, 255, .1);
}

/* 头部 */
.mb-head {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 12px 10px 14px; font-size: 13.5px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
}
.mb-logo {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  background: var(--accent-soft, rgba(37,99,235,.08)); color: var(--accent, #2563eb);
  display: flex; align-items: center; justify-content: center;
}
.mb-head b { margin-right: auto; letter-spacing: .02em; }
.mb-act { font-style: normal; }
.mb-acts { display: inline-flex; gap: 6px; flex: none; }
.mb-act {
  border: 1px solid var(--border, rgba(0,0,0,.07)); background: transparent;
  color: var(--text-sub, #6f6d66); font-size: 11.5px; line-height: 1;
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.mb-act:hover { background: var(--bg-hover-tint, rgba(0,0,0,.045)); color: var(--text-main, #1f1e1b); }
[data-theme="dark"] .mb-act:hover { background: rgba(255,255,255,.08); }
.mb-x {
  width: 26px; height: 26px; border: none; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-sub, #6f6d66);
}
.mb-x:hover { background: var(--bg-hover-tint, rgba(0,0,0,.045)); color: var(--text-main, #1f1e1b); }

/* 状态条 / 源切换 / 本地行 */
.mb-status {
  flex: none; margin: 8px 12px 0; padding: 7px 11px; border-radius: 10px;
  font-size: 12px; color: var(--text-main, #1f1e1b);
  background: var(--accent-soft, rgba(37,99,235,.08));
}
/* 源切换：iOS 分段控件（选中态对齐全站 .ttl-pill.on 黑白系统，按钮禁彩色） */
.mb-src {
  flex: none; display: flex; gap: 2px; margin: 10px 12px 0;
  background: var(--bg-hover-strong, rgba(0,0,0,.055));
  border-radius: 12px; padding: 3px;
}
[data-theme="dark"] .mb-src { background: rgba(255,255,255,.07); }
.mb-src button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  height: 30px; border-radius: 9px; font-size: 12px; color: var(--text-sub, #6f6d66);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mb-src button:hover { color: var(--text-main, #1f1e1b); }
.mb-src button.on {
  background: #0d0d0d; color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
[data-theme="dark"] .mb-src button.on { background: #ffffff; color: #111111; }
.mb-loc {
  flex: none; display: flex; align-items: center; gap: 10px;
  margin: 10px 12px 0; flex-wrap: wrap;
}
.mb-loc small { font-size: 11px; color: var(--text-faint, #a6a49c); }

/* 搜索 */
.mb-search {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 0; padding: 0 5px 0 14px;
  border: 1px solid var(--border, rgba(0,0,0,.07)); border-radius: 999px;
  background: var(--glass-input, rgba(255,255,255,.66));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mb-search:focus-within {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,.08));
}
.mb-search input {
  flex: 1; min-width: 0; height: 38px; border: none; background: transparent;
  font-size: 13px; color: var(--text-main, #1f1e1b); outline: none;
}
.mb-search input::placeholder { color: var(--text-faint, #a6a49c); }
.mb-search button {
  width: 30px; height: 30px; flex: none; border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-sub, #6f6d66);
  transition: background .2s ease, color .2s ease;
}
.mb-search button:hover { background: var(--accent-soft, rgba(37,99,235,.08)); color: var(--accent, #2563eb); }

/* 列表通用行（搜索结果 / 播放列表） */
.mb-res, .mb-pl { overflow-y: auto; flex: 1 1 auto; min-height: 40px; padding: 6px 8px 8px; }
.mb-res { max-height: 220px; flex: none; border-bottom: 1px solid var(--border, rgba(0,0,0,.07)); }
.mb-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 12px; cursor: pointer;
  transition: background .18s ease;
}
.mb-row:hover { background: var(--bg-hover-tint, rgba(0,0,0,.04)); }
[data-theme="dark"] .mb-row:hover { background: rgba(255,255,255,.07); }
.mb-row.on { background: var(--accent-soft, rgba(37,99,235,.08)); }
.mb-row.on .mb-r-main b { color: var(--accent, #2563eb); }
.mb-row.on .mb-r-idx { color: var(--accent, #2563eb); font-weight: 700; }
.mb-r-idx {
  width: 20px; flex: none; text-align: center;
  font-size: 11px; color: var(--text-faint, #a6a49c); font-variant-numeric: tabular-nums;
}
.mb-r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-r-main b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-r-main small { font-size: 11px; color: var(--text-faint, #a6a49c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-r-dt { flex: none; font-size: 11px; color: var(--text-faint, #a6a49c); font-variant-numeric: tabular-nums; }
.mb-r-del {
  width: 24px; height: 24px; flex: none; border: none; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-faint, #a6a49c); opacity: 0;
  transition: opacity .18s ease, color .18s ease, background .18s ease;
}
.mb-row:hover .mb-r-del { opacity: 1; }
.mb-r-del:hover { color: #c62828; background: rgba(198, 40, 40, .08); }
.mb-empty { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--text-faint, #a6a49c); line-height: 1.7; }
.mb-empty svg { display: block; margin: 0 auto 6px; width: 22px; height: 22px; opacity: .55; }

/* 正在播放 */
.mb-now { flex: none; padding: 11px 12px 4px; }
.mb-np { display: flex; align-items: center; gap: 11px; }
.mb-np-cov {
  width: 48px; height: 48px; flex: none; border-radius: 13px; overflow: hidden;
  background: var(--accent-soft, rgba(37,99,235,.08)); color: var(--accent, #2563eb);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border, rgba(0,0,0,.05));
}
.mb-np-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-np-cov.spin img { animation: mbSpinCover 12s linear infinite; }
@keyframes mbSpinCover { to { transform: rotate(360deg); } }
.mb-np-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-np-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-np-t small { font-size: 11.5px; color: var(--text-sub, #6f6d66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 出处与许可（CC 署名合规）：一行小字，点开看许可页 */
.mb-lic { color: var(--text-faint, #a6a49c); }
.mb-lic a { color: var(--text-faint, #a6a49c); text-decoration: none; border-bottom: 1px dashed var(--border, rgba(0,0,0,.15)); }
.mb-lic a:hover { color: var(--accent, #2563eb); border-bottom-color: var(--accent, #2563eb); }

/* 进度条 / 控制键 */
.mb-prog { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.mb-tt { flex: none; font-size: 10.5px; color: var(--text-faint, #a6a49c); font-variant-numeric: tabular-nums; min-width: 30px; }
.mb-bar, .mb-vol {
  position: relative; height: 5px; border-radius: 999px;
  background: var(--bg-hover-strong, rgba(0,0,0,.08));
  cursor: pointer; touch-action: none;
}
.mb-bar { flex: 1; }
.mb-bar::before, .mb-vol::before { content: ""; position: absolute; inset: -8px 0; } /* 扩热区 */
.mb-bar i, .mb-vol i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--accent, #2563eb);
}
.mb-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0 8px; }
.mb-cbtn {
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-sub, #6f6d66);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.mb-cbtn:hover { background: var(--bg-hover-tint, rgba(0,0,0,.045)); color: var(--text-main, #1f1e1b); }
.mb-cbtn:active { transform: scale(.92); }
.mb-cbtn.mb-big {
  width: 42px; height: 42px;
  background: #111111; color: #ffffff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}
.mb-cbtn.mb-big:hover { background: #111111; color: #ffffff; transform: scale(1.04); }
[data-theme="dark"] .mb-cbtn.mb-big {
  background: #ffffff; color: #111111;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}
.mb-volwrap { display: inline-flex; align-items: center; gap: 7px; color: var(--text-sub, #6f6d66); margin-left: 4px; }
.mb-vol { width: 64px; display: inline-block; }

/* 列表头 */
.mb-pl-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 4px; font-size: 12px; color: var(--text-sub, #6f6d66);
  border-top: 1px solid var(--border, rgba(0,0,0,.07));
}
.mb-pl-head em { font-style: normal; color: var(--text-faint, #a6a49c); }

/* 动效兜底 */
@media (prefers-reduced-motion: reduce) {
  .mb-panel, .mb-lrc-in, .mb-lrc-line, .mb-cbtn { transition: none !important; }
  .mb-eq i, .mb-np-cov.spin img, .mb-roll.roll, .mb-live { animation: none !important; }
}

/* 窄屏：顶栏空间有限，芯片收成纯图标 + 播放键，歌词与歌名不占位 */
@media (max-width: 760px) {
  .mb-chip { gap: 5px; padding: 0 4px; min-width: 34px; max-width: 68px; }
  .mb-chip .mb-live { display: none !important; }
}