/* Album-tinted glass, with the same SF / PingFang typography as the chat. */
.music-card, .music-mini {
  --music-base: 65 61 65;
  --music-glow: 154 144 150;
  color: #fff;
  background: radial-gradient(ellipse at 78% 5%, rgb(var(--music-glow) / .4), transparent 72%), linear-gradient(130deg, rgb(var(--music-base) / .76), rgb(var(--music-base) / .58));
  -webkit-backdrop-filter: saturate(155%) blur(28px);
  backdrop-filter: saturate(155%) blur(28px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .14), 0 12px 28px -15px rgb(0 0 0 / .32);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;
}
.chat-phone .message-row .bubble.music-bubble {
  padding: 0;
  max-width: 100%;
  border-radius: 23px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
/* 宽度按聊天列算：气泡是 fit-content，百分比 max-width 会被它反向压缩成 ~160px，歌名歌手全折成省略号 */
.music-card { display: block; width: min(264px, 72vw); max-width: 100%; border-radius: 22px; overflow: hidden; cursor: pointer; transition: transform .15s ease; }
.music-card:active { transform: scale(.97); }
.music-card-main { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; min-height: 82px; }
.music-copy { flex: 1; min-width: 0; width: 0; display: flex; flex-direction: column; gap: 4px; }
.music-dedication { width: 100%; color: rgb(255 255 255 / .68); font-size: 11px; letter-spacing: .4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 2px; }
.music-title { width: 100%; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.music-artist { width: 100%; color: rgb(255 255 255 / .7); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.music-artwork { width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .15); }
.music-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-artwork > span { font-size: 20px; opacity: .7; }
.music-disc { width: 52px; height: 52px; border-radius: 50%; position: relative; box-shadow: 0 4px 14px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(255 255 255 / .12); }
.music-disc::after { content: none; }
.music-play, .music-close, .music-search-close { width: 28px; height: 28px; flex: 0 0 auto; border: 0; border-radius: 9px; padding: 6px; color: inherit; background: rgb(255 255 255 / .2); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.music-card .music-play { width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.music-card .music-play svg { width: 18px; height: 18px; }
.music-mini .music-play, .music-mini .music-close, .music-search-close { border-radius: 50%; }
.music-play svg, .music-close svg, .music-search-close svg { width: 16px; height: 16px; fill: currentColor; }
.music-play:disabled { opacity: .3; cursor: default; }
.music-play:active, .music-share:active { transform: scale(.94); }
.music-play.is-loading { animation: music-pulse 1s ease-in-out infinite alternate; }
.music-retry { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 6px 9px; background: rgb(255 255 255 / .16); color: #fff; font: inherit; font-size: 10px; cursor: pointer; }
.music-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 0 16px 12px; color: rgb(255 255 255 / .65); font-size: 10.5px; line-height: 1.3; }
.music-card-footer a { flex-shrink: 0; color: inherit; text-decoration: none; padding: 3px 0; }
.music-card-footer a:hover { color: #fff; }
.music-mini { position: absolute; z-index: 7; top: calc(57px + var(--safe-top)); left: 12px; right: 12px; min-height: 66px; border-radius: 21px; display: flex; align-items: center; gap: 11px; padding: 11px 12px; }
.music-mini[hidden] { display: none; }
.music-mini .music-artwork { width: 40px; height: 40px; border-radius: 50%; }
.music-mini-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.music-mini-copy strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-mini-copy small { font-size: 11px; color: rgb(255 255 255 / .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-mini .music-play, .music-mini .music-close { background: transparent; }
.music-mini .music-close { width: 30px; padding: 4px; opacity: .65; }
.music-mini .music-progress { position: absolute; left: 16px; top: -6px; width: calc(100% - 32px); height: 14px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.music-progress::-webkit-slider-runnable-track { height: 3px; border-radius: 4px; background: linear-gradient(to right, rgb(var(--music-glow)) var(--music-progress, 0%), rgb(255 255 255 / .15) var(--music-progress, 0%)); }
.music-progress::-moz-range-track { height: 3px; border-radius: 4px; background: rgb(255 255 255 / .15); }
.music-progress::-moz-range-progress { height: 3px; background: rgb(var(--music-glow)); }
.music-progress::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: transparent; }
.music-progress::-moz-range-thumb { width: 10px; height: 10px; border: 0; background: transparent; }
.music-progress:focus-visible::-webkit-slider-thumb { background: #fff; }
.music-player-status:empty { display: none; }
.music-player-status { position: absolute; top: calc(100% + 5px); right: 0; max-width: 100%; border-radius: 12px; padding: 6px 10px; background: rgb(var(--music-base) / .95); font-size: 11px; }
.chat-phone .has-music-player .message-area { padding-top: calc(142px + var(--safe-top)); scroll-padding-top: calc(142px + var(--safe-top)); }
.music-search-sheet { box-sizing: border-box; width: min(440px, calc(100% - 24px)); max-height: min(76dvh, 720px); margin: auto auto max(16px, env(safe-area-inset-bottom)); padding: 24px 20px 16px; border: 1px solid rgb(255 255 255 / .55); border-radius: 30px; color: #242428; background: rgb(244 244 248 / .8); backdrop-filter: saturate(160%) blur(32px); -webkit-backdrop-filter: saturate(160%) blur(32px); box-shadow: 0 22px 80px rgb(0 0 0 / .18); }
.music-search-sheet::backdrop { background: rgb(15 15 20 / .16); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.music-search-sheet header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.music-search-sheet header small { font-size: 11px; color: #77777c; letter-spacing: 1px; }
.music-search-sheet h2 { font-size: 23px; margin: 6px 0 0; font-weight: 600; letter-spacing: -.6px; }
.music-search-close { background: rgb(128 128 140 / .1); }
.music-search-form { display: flex; gap: 8px; }
.music-search-form input { min-width: 0; width: 100%; border: 1px solid rgb(255 255 255 / .5); border-radius: 16px; background: rgb(255 255 255 / .5); padding: 12px 14px; font: inherit; font-size: 16px; color: inherit; }
.music-search-form button { border: 0; border-radius: 15px; background: #28282c; color: #fff; padding: 0 16px; flex: 0 0 auto; font: inherit; font-size: 13px; }
.music-search-status { font-size: 12px; color: #737379; margin: 16px 0; line-height: 1.6; }
.music-search-results { display: flex; flex-direction: column; gap: 5px; }
.music-search-result { display: flex; gap: 10px; align-items: center; min-height: 70px; border-bottom: 1px solid rgb(100 100 110 / .08); }
.music-result-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.music-result-copy strong { font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.music-result-copy small { font-size: 11px; color: #7c7c82; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.music-search-result .music-play { background: rgb(255 255 255 / .5); width: 34px; height: 34px; padding: 6px; }
.music-share { border: 1px solid rgb(255 255 255 / .55); border-radius: 15px; padding: 8px 10px; background: rgb(255 255 255 / .4); color: inherit; font: inherit; font-size: 11px; flex-shrink: 0; }
.music-search-sheet footer { font-size: 10px; color: #88888e; text-align: center; margin-top: 18px; }
.music-card button:focus-visible, .music-card a:focus-visible, .music-mini button:focus-visible, .music-search-sheet button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@keyframes music-pulse { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .music-play.is-loading { animation: none; } }
.theme-night .music-search-sheet { background: rgb(33 33 38 / .84); color: #f4f4f7; border-color: rgb(255 255 255 / .17); }
.theme-night .music-search-form input, .theme-night .music-share, .theme-night .music-search-result .music-play { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .1); }