/* 一起听 —— 换皮 2026-09-25：只用 keke.css 的 token。
   聊天里的小胶囊 #now-playing 已归 keke.css 管，这里只管全屏听歌页。 */
#music-screen {
  position: fixed; inset: 0; z-index: 84; display: none; flex-direction: column; overflow: hidden; color: var(--ink);
  background: repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--stripe) 18px 36px);
}
#music-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.25) 40%, var(--haze) 100%); }
#music-screen > * { position: relative; }
#music-screen.on { display: flex; }
@media (min-width: 640px) { #music-screen { left: 50%; right: auto; width: 560px; margin-left: -280px; } }

/* 顶栏：跟家里同款，贴边白底 + 花边 */
.music-screen-head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; text-align: center;
  background: var(--card); min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp2)) var(--sp3) var(--sp2); margin-bottom: 10px;
}
.music-screen-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: radial-gradient(circle at 9px 0, var(--card) 9px, transparent 9.5px) 0 0 / 18px 10px repeat-x; }
.music-screen-head button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); font: 400 26px/1 system-ui; }
.music-screen-head b, .music-screen-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-screen-head b { font-family: var(--f-cute); font-weight: 400; font-size: 19px; color: var(--accent-ink); }
.music-screen-head small { margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-xs); }

#music-search-form { display: flex; gap: var(--sp2); width: calc(100% - 32px); max-width: 520px; margin: var(--sp3) auto var(--sp2);
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--sp1) var(--sp1) var(--sp1) var(--sp4); }
#music-search-form:focus-within { border-color: var(--pink); }
#music-search-form input { min-width: 0; flex: 1; height: 36px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; }
#music-search-form button { min-width: 64px; border: 0; border-radius: var(--r-pill); background: var(--pink); color: #fff; font: inherit; font-size: var(--fs-m); font-weight: 700; }
#music-search-status { min-height: 22px; color: var(--ink-soft); font-size: var(--fs-s); line-height: 22px; text-align: center; }

#music-query::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* 整页能滚：搜到的歌是一小张单子，下面是唱机 */
#music-screen { overflow-y: auto; overscroll-behavior: contain; }
#music-screen > * { flex-shrink: 0; }
.music-screen-head { position: sticky; top: 0; z-index: 3; }

#music-results { width: calc(100% - 32px); max-width: 520px; max-height: 34vh; margin: var(--sp2) auto 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-card); padding: var(--sp1) var(--sp3); }
#music-results:empty { display: none; }
.music-result { display: flex; align-items: center; gap: var(--sp3); width: 100%; min-height: 52px; padding: var(--sp2) var(--sp1);
  border: 0; border-bottom: var(--bw) dashed var(--line); background: transparent; text-align: left; }
.music-result:last-child { border-bottom: none; }
.music-result:active, .music-result.on { background: var(--pink-soft); border-radius: var(--r-s); }
.music-result-note { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: var(--card); font-size: var(--fs-xs);
  background: radial-gradient(circle, var(--pink) 0 5px, transparent 6px), repeating-radial-gradient(circle, var(--accent-ink) 0 1.5px, color-mix(in srgb, var(--accent-ink) 85%, var(--card)) 1.5px 3px); }
.music-result-main { min-width: 0; flex: 1; }
.music-result-main b, .music-result-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-result-main b { font-size: var(--fs-m); }
.music-result-main small { margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-xs); }

/* 唱机：大黑胶 + 唱针，放歌时转、唱针落下；暂停就停 */
#music-player-panel { position: relative; width: calc(100% - 32px); max-width: 520px; margin: var(--sp3) auto var(--sp5); padding: var(--sp5) var(--sp4) var(--sp4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp3); text-align: center;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-card); }
#music-player-panel[hidden] { display: none; }
#music-player-panel::before { content: ""; position: absolute; top: var(--sp3); left: calc(50% + 84px); width: 14px; height: 128px; z-index: 1;
  background: radial-gradient(circle at 7px 7px, var(--accent-ink) 6px, transparent 6.5px) top / 14px 14px no-repeat,
              linear-gradient(var(--accent-ink), var(--accent-ink)) bottom / 14px 22px no-repeat,
              linear-gradient(var(--line), var(--line)) center / 4px 100% no-repeat;
  transform-origin: 7px 7px; transform: rotate(-6deg); transition: transform .6s ease; }
#music-player-panel:has(#music-screen-toggle[aria-pressed="true"])::before { transform: rotate(20deg); }
.music-player-song { display: flex; flex-direction: column; align-items: center; gap: var(--sp3); min-width: 0; max-width: 100%; }
.music-player-cover { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; font-size: 0;
  background: radial-gradient(circle, var(--card) 0 4px, var(--pink) 5px 32px, transparent 33px),
              repeating-radial-gradient(circle, var(--accent-ink) 0 2px, color-mix(in srgb, var(--accent-ink) 85%, var(--card)) 2px 4px);
  box-shadow: 0 0 0 8px var(--card), 0 0 0 9.5px var(--line), var(--shadow-float);
  animation: km-spin 10s linear infinite; animation-play-state: paused; }
#music-player-panel:has(#music-screen-toggle[aria-pressed="true"]) .music-player-cover { animation-play-state: running; }
@keyframes km-spin { to { transform: rotate(360deg); } }
.music-player-song > span:last-child { min-width: 0; max-width: 100%; margin-top: var(--sp2); }
.music-player-song b, .music-player-song small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-song b { font-family: var(--f-cute); font-weight: 400; font-size: 20px; color: var(--accent-ink); }
.music-player-song small { margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-s); }
.music-player-controls { display: flex; flex-direction: column; align-items: center; gap: var(--sp2); }
.music-player-controls button { width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; font: inherit; font-size: var(--fs-m); font-weight: 700;
  box-shadow: 0 0 0 5px var(--pink-soft); }
#music-player-status { min-width: 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.4; }
#music-lyrics { width: 100%; max-height: 22vh; padding: var(--sp3); overflow-y: auto; border-radius: var(--r-s); border: var(--bw) dashed var(--line);
  color: var(--pink-deep); font-size: var(--fs-m); line-height: 1.9; text-align: center; white-space: pre-wrap; }
#music-lyrics.empty { color: var(--ink-soft); }
.music-empty { padding: var(--sp5) var(--sp2); color: var(--ink-soft); font-size: 13px; text-align: center; }

/* 唱机排在搜索框下面，搜到的歌单在它后面（不像填表） */
#music-search-form { order: 1; } #music-search-status { order: 2; } #music-player-panel { order: 3; } #music-results { order: 4; } .mu-idle { order: 5; }
#music-screen:has(#music-player-panel:not([hidden])) #music-results { margin-bottom: var(--sp6); }
#music-screen:has(#music-player-panel:not([hidden])) #music-results::before { content: "这次搜到的 · 点一首换歌"; display: block; padding: var(--sp2) var(--sp1) var(--sp1); font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 1px; }

/* 我们俩一起在听 */
.mu-together { display: flex; align-items: center; gap: var(--sp2); font-size: var(--fs-s); color: var(--ink-soft); }
.mu-together .kk-av { width: 26px; height: 26px; font-size: var(--fs-xs); }
.mu-together .kk-av + .kk-av { margin-left: -12px; box-shadow: 0 0 0 2px var(--card); }
.mu-together.on small { color: var(--pink-deep); }
.mu-together.on small::before { content: "♪ "; }

/* 进度条：点哪跳哪 */
.mu-track { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: var(--sp2); align-items: center; font-family: var(--f-num); font-size: var(--fs-xs); color: var(--ink-soft); }
.mu-track span:last-child { text-align: right; }
.mu-bar { height: 16px; display: flex; align-items: center; cursor: pointer; background: linear-gradient(var(--pink-soft), var(--pink-soft)) center / 100% 5px no-repeat; border-radius: 3px; }
.mu-bar i { display: block; height: 5px; width: 0; border-radius: 3px; background: var(--pink); position: relative; }
.mu-bar i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 var(--bw) var(--pink); }

/* 上一首 · 播放 · 下一首 */
.mu-btns { display: flex; align-items: center; gap: var(--sp5); }
.mu-btns #mu-prev, .mu-btns #mu-next { width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--card); color: var(--accent-ink);
  display: grid; place-items: center; box-shadow: none; font-size: 0; padding: 0; }
.mu-btns #mu-prev svg, .mu-btns #mu-next svg { width: 18px; height: 18px; }

/* 歌词：唱到哪句亮哪句，自动滚到中间；翻译挂在原句下面 */
#music-lyrics { position: relative; max-height: 30vh; color: var(--ink-soft); }
.lrc-line { margin: 0; padding: 3px 0; transition: color .25s, transform .25s; }
.lrc-line small { display: block; font-size: var(--fs-xs); opacity: .8; }
.lrc-line.on { color: var(--pink-deep); font-weight: 700; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .music-player-cover { animation: none; } }