/* Music card: a frosted horizontal card with title on the left, the cover as a record
   and a round play button. It replaces the chat bubble rather than sitting inside one. */
html[data-ui-skin] body[data-page] #messages.messages .message .bubble.music-bubble,.messages .message .bubble.music-bubble,.message .bubble.music-bubble{
 width:300px!important;inline-size:300px!important;max-width:min(300px,calc(100vw - 84px))!important;min-width:0!important;
 padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important;overflow:visible!important;border-radius:26px!important}
html[data-ui-skin] body[data-page] #messages.messages .message .bubble.music-bubble::before,html[data-ui-skin] body[data-page] #messages.messages .message .bubble.music-bubble::after,.message .bubble.music-bubble::before,.message .bubble.music-bubble::after{content:none!important;display:none!important}
.music-share-card{box-sizing:border-box;padding:16px 16px 12px 20px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(96,108,124,.86),rgba(70,80,96,.86));-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 26px rgba(30,34,42,.18);color:#fff;text-align:left;text-shadow:none;overflow:hidden}
.music-card-main{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px}
.music-card-copy{order:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.music-card-source{order:-1;margin-bottom:4px;font-size:11px;line-height:1.3;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-card-title{font-family:Georgia,'Times New Roman','Songti SC','STSong',serif;font-size:24px;line-height:1.15;font-weight:700;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.music-card-artist{font-family:Georgia,'Times New Roman','Songti SC','STSong',serif;font-size:15px;line-height:1.35;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The cover as a record: round, with a centre hole; it turns while playing. */
.music-card-art{order:1;position:relative;flex:none;width:78px;height:78px;border-radius:50%;overflow:hidden;background:#20242c;display:grid;place-items:center;font-size:28px;color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(18,20,26,.85),0 6px 14px rgba(0,0,0,.25)}
.music-card-art img{width:100%;height:100%;object-fit:cover}
.music-card-art::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#15181e;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.music-share-card[data-playing=true] .music-card-art{animation:music-spin 9s linear infinite}
.music-card-play{order:2;flex:none;width:46px;height:46px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.2);color:#fff;font-size:15px;cursor:pointer;touch-action:manipulation;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.music-card-play:focus-visible,.music-card-open:focus-visible{outline:2px solid #fff;outline-offset:3px}
.music-card-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.86);white-space:pre-wrap;overflow-wrap:anywhere}
.music-card-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:8px}
.music-card-wave{display:none}
.music-card-open{font-size:11px;color:rgba(255,255,255,.6)!important;text-decoration:none!important;padding:3px 0}
.music-card-status{margin:8px 0 0;font-size:11px;line-height:1.6;color:rgba(255,255,255,.7)}.music-card-status[hidden]{display:none}
@keyframes music-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.music-share-card[data-playing=true] .music-card-art{animation:none}}
/* Leave the title more room on narrow phones. */
.music-card-main{gap:10px}.music-card-title{font-size:22px}.music-card-art{width:70px;height:70px}.music-card-play{width:42px;height:42px}
/* Smaller overall: about three quarters of the first version. */
html[data-ui-skin] body[data-page] #messages.messages .message .bubble.music-bubble,.messages .message .bubble.music-bubble,.message .bubble.music-bubble{width:228px!important;inline-size:228px!important;max-width:min(228px,calc(100vw - 96px))!important;border-radius:20px!important}
.music-share-card{padding:11px 11px 9px 14px;border-radius:20px}
.music-card-main{gap:8px}
.music-card-source{font-size:10px;margin-bottom:2px}
.music-card-title{font-size:17px}
.music-card-artist{font-size:12px}
.music-card-art{width:50px;height:50px;box-shadow:0 0 0 2px rgba(18,20,26,.85),0 4px 10px rgba(0,0,0,.22)}
.music-card-art::after{width:10px;height:10px;margin:-5px 0 0 -5px}
.music-card-play{width:32px;height:32px;font-size:11px}
.music-card-note{margin-top:8px;font-size:12px;line-height:1.55}
.music-card-footer{margin-top:4px}.music-card-open{font-size:10px}