/* ═══ 音乐工作室(js/music-studio.js):聊天里的音乐卡 / 迷你播放条 ⇄ 完整播放页 / 乐谱页 ═══
   颜色全走主题变量;播放器本身(nox4 的 iframe)收到的也是这套主题色换算成的 ext-apps 标准变量,底色透明,
   所以播放页的玻璃背景直接透进播放器里。迷你条和完整页是同一个框(#score-player)换形状,里面的 iframe 不动。 */

/* ── 跳动的小音柱(在放的那首:卡片封面 / 迷你条封面) ── */
.ms-eq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:13px}
.ms-eq i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor;animation:ms-eq .9s ease-in-out infinite}
.ms-eq i:nth-child(2){animation-delay:.18s}
.ms-eq i:nth-child(3){animation-delay:.36s}
@keyframes ms-eq{0%,100%{height:5px}50%{height:19px}}

/* ── 聊天里的音乐卡:▶ 直接放,点卡片展开看谱子 ── */
.ms-card{display:flex;align-items:center;gap:12px;width:min(80vw,420px);max-width:100%;padding:10px 10px 10px 10px;border-radius:20px;
  border:1px solid var(--bub-glass-edge,var(--border-1));color:var(--text);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02)),var(--glass-tint,var(--surface-2));
  box-shadow:0 8px 24px var(--bub-glass-shadow,transparent);transition:box-shadow .25s,border-color .25s,transform .12s}
.ms-card:active{transform:scale(.985)}
.ms-card.is-active{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.18),0 10px 28px rgba(var(--accent-rgb),.16)}
.ms-card-cover{position:relative;flex:none;width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.12));color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ms-card-cover svg{width:25px;height:25px;transition:opacity .2s}
.ms-card.is-playing .ms-card-cover svg{opacity:0}
.ms-card.is-playing .ms-eq{display:flex}
.ms-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ms-card-body strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-card-body em{font-style:normal;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-card-play{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;
  background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(var(--accent-rgb),.35);-webkit-tap-highlight-color:transparent}
.ms-card-play svg{width:17px;height:17px}
.ms-card-play svg path{transform:translateX(1px)}

/* ── 播放器的框:完整页 ⇄ 迷你条,形状过渡,iframe 不动 ── */
#score-player{--ms-ease:cubic-bezier(.2,.8,.2,1);--ms-mini-bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
  position:fixed;z-index:62;display:flex;flex-direction:column;overflow:hidden;color:var(--text);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  transition:top .34s var(--ms-ease),left .34s var(--ms-ease),right .34s var(--ms-ease),height .34s var(--ms-ease),border-radius .34s var(--ms-ease),box-shadow .34s}
#score-player.is-full{top:0;left:0;right:0;height:100dvh;border-radius:0}
#score-player.is-mini{top:calc(100dvh - var(--ms-mini-bottom) - 64px);left:12px;right:12px;height:64px;border-radius:20px;
  border:1px solid rgba(var(--accent-rgb),.28);box-shadow:0 16px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.06)),color-mix(in srgb,var(--surface-1) 94%,transparent)}

/* 完整页:标题栏 + 播放器铺满 */
.ms-player-hdr{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 8px}
.ms-collapse{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--text);background:var(--surface-3);border:1px solid var(--border-1)}
.ms-collapse svg{width:22px;height:22px}
.ms-player-titles{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ms-player-titles strong{max-width:100%;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-player-titles em{max-width:100%;font-style:normal;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-lyrics-btn{flex:none;min-width:52px;padding:7px 13px;border-radius:999px;font-size:12px;color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--border-1)}
.ms-lyrics-btn.is-on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.ms-lyrics-btn[hidden]{display:none}
.ms-player-body{flex:1;min-height:0;position:relative}
.ms-frame-wrap{position:absolute;inset:0}
.ms-frame{display:block;width:100%;height:100%;border:0;background:transparent}
.ms-lyrics{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:28px 28px calc(env(safe-area-inset-bottom,0px) + 40px);text-align:center;
  font-family:var(--font-chat);font-size:17px;line-height:2;color:var(--text);
  background:color-mix(in srgb,var(--bg) 92%,transparent)}
.ms-lyrics p{margin:0}
.ms-lyrics .ms-lyrics-gap{height:1.2em}
/* 播放器要全屏:收起标题栏,整块屏都给它(安全区由宿主通过 safeAreaInsets 告诉播放器) */
#score-player.is-fullscreen .ms-player-hdr{display:none}

/* 迷你条:标题栏收起;播放器照样整屏大小、被框住、看不见也不接触摸(声音不停);上面盖一条自己的控件 */
.ms-mini{display:none}
#score-player.is-mini .ms-player-hdr{display:none}
#score-player.is-mini .ms-player-body{position:absolute;left:0;top:0;width:100vw;height:100dvh;flex:none;opacity:0;pointer-events:none}
#score-player.is-mini .ms-mini{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:4px;padding:0 8px 0 10px}
.ms-mini-main{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:11px;padding:0;border:0;background:transparent;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.ms-mini-cover{position:relative;flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.45),rgba(var(--accent-rgb),.14));color:var(--accent)}
.ms-mini-cover svg{width:22px;height:22px;transition:opacity .2s}
.ms-mini-cover .ms-eq{padding-bottom:11px}
#score-player.is-playing .ms-mini-cover svg{opacity:0}
#score-player.is-playing .ms-mini-cover .ms-eq{display:flex}
.ms-mini-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.ms-mini-text strong{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-mini-text em{font-style:normal;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-mini-btn{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:0;
  background:transparent;color:var(--text-2);-webkit-tap-highlight-color:transparent}
.ms-mini-btn svg{width:20px;height:20px}
.ms-mini-toggle{width:38px;height:38px;background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(var(--accent-rgb),.35)}
.ms-mini-toggle svg{width:16px;height:16px}

@media (prefers-reduced-motion: reduce){
  #score-player{transition:none}
  .ms-eq i{animation:none;height:12px}
}

/* ── 乐谱页 ── */
#scores-board{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.ms-board-hdr{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px}
.ms-board-hdr .ms-back{font-size:30px;line-height:1;padding:0 10px 4px;color:var(--text);background:transparent;border:0}
.ms-board-title{flex:1;text-align:center;font-size:15px;font-weight:600}
.ms-board-spacer{flex:none;width:48px}
.ms-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 96px);display:flex;flex-direction:column;gap:10px}
.ms-row{display:flex;align-items:center;gap:8px}
.ms-row .ms-card{flex:1;width:auto}
.ms-row-lyric{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-chat)}
.ms-row-date{font-size:11px;color:var(--text-3)}
.ms-row-del{flex:none;padding:8px 10px;border-radius:10px;font-size:12px;color:var(--text-3);background:var(--surface-3);border:1px solid var(--border-1)}
.ms-empty{padding:48px 12px;text-align:center;color:var(--text-3);font-size:13px;line-height:1.8}