/* 一起听 · listen together (2026-10-12). Look approved by Evie:
   docs/design/listen-player-2026-10-12.html in the repo. Everything follows the
   App theme (--bg, --card, --text, --textL, --accent, blobs); the cover only
   colours the cover. Panels are bubble-like transparent frosted glass. */
.lsn-root{--disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;--lui:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif;
  --lglass:color-mix(in srgb,var(--card) 52%,transparent);--lline:color-mix(in srgb,#fff 60%,transparent);--lfaint:color-mix(in srgb,var(--text) 10%,transparent)}
.lsn-glass{background:var(--lglass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--lline);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 26px color-mix(in srgb,var(--text) 7%,transparent)}
.lsn-cover{background:color-mix(in srgb,var(--accent) 30%,var(--card)) center/cover no-repeat}
@keyframes lsn-spin{to{transform:rotate(360deg)}}

/* ── the chat ball as a record ── */
.music-ball.lsn-ball{padding:3px;background:radial-gradient(circle,#2b2422 0 58%,#3a302d 59%);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 10px 24px rgba(40,32,28,.22)}
.lsn-disc{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:lsn-spin 8s linear infinite;animation-play-state:paused}
.lsn-disc::after{content:"";position:absolute;inset:40%;border-radius:50%;background:#2b2422}
.lsn-ball.spinning .lsn-disc,.lsn-pill.spinning .lsn-disc{animation-play-state:running}

/* ── the pill the ball grows into ── */
.lsn-pill{position:fixed;z-index:8999;height:56px;width:56px;border-radius:28px;display:flex;align-items:center;gap:10px;color:var(--text);overflow:hidden;
  background:color-mix(in srgb,#fff 40%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid color-mix(in srgb,#fff 60%,transparent);box-shadow:0 12px 30px rgba(60,45,40,.18),inset 0 1px 0 rgba(255,255,255,.65);
  transition:width .32s cubic-bezier(.3,.8,.3,1);touch-action:manipulation;font-family:var(--lui)}
.lsn-pill[hidden]{display:none}
.lsn-pill.side-r{padding:0 62px 0 16px}
.lsn-pill.side-l{padding:0 16px 0 62px}
.lsn-pill .tx{min-width:0;flex:1;opacity:0;transition:opacity .2s;cursor:pointer}
.lsn-pill .ctl{display:flex;align-items:center;gap:14px;flex:none;opacity:0;transition:opacity .2s}
.lsn-pill.open .tx,.lsn-pill.open .ctl{opacity:1;transition-delay:.12s}
.lsn-pill .tt{font:600 14.5px/1.2 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-pill .ly{font-size:11.5px;line-height:1.3;color:color-mix(in srgb,var(--text) 72%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:15px}
.lsn-pill button{border:0;background:none;padding:4px;display:grid;place-items:center;cursor:pointer;color:var(--text)}
.lsn-pill svg{width:19px;height:19px;fill:currentColor}
.lsn-pill .pp svg{width:22px;height:22px}
.lsn-pill .discw{position:absolute;top:3px;width:48px;height:48px;border-radius:50%;padding:3px;background:radial-gradient(circle,#2b2422 0 58%,#3a302d 59%);box-shadow:0 0 0 1px rgba(255,255,255,.3);cursor:pointer}
.lsn-pill.side-r .discw{right:3px}
.lsn-pill.side-l .discw{left:3px}
.lsn-pill .prog{position:absolute;bottom:5px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--text) 12%,transparent);opacity:0;transition:opacity .2s}
.lsn-pill.side-r .prog{left:18px;right:66px}
.lsn-pill.side-l .prog{left:66px;right:18px}
.lsn-pill.open .prog{opacity:1}
.lsn-pill .prog i{display:block;width:0;height:100%;border-radius:2px;background:color-mix(in srgb,var(--text) 55%,transparent)}

/* ── full player ── */
.lsn-player{position:fixed;inset:0;z-index:9001;color:var(--text);font-family:var(--lui);overflow:hidden;
  background:radial-gradient(circle at 12% 10%,var(--blob1),transparent 42%),radial-gradient(circle at 88% 28%,var(--blob2),transparent 42%),radial-gradient(circle at 25% 80%,var(--blob3),transparent 48%),radial-gradient(circle at 85% 92%,var(--blob4),transparent 42%),var(--bg);
  transform:translateY(0);transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.lsn-player[hidden]{display:none}
.lsn-player.leaving{transform:translateY(100%)}
.lsn-in{position:relative;height:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 34px) 26px calc(env(safe-area-inset-bottom,0px) + 18px)}
.lsn-grab{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 6px);left:calc(50% - 40px);width:80px;height:26px;border:0;background:none;cursor:pointer;touch-action:none;transform:none!important}
.lsn-grab::before{content:"";position:absolute;left:21px;right:21px;top:10px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.lsn-view{display:none;flex:1;min-height:0;flex-direction:column}
.lsn-view.on{display:flex}
.lsn-v-now{justify-content:center}
.lsn-art{width:100%;aspect-ratio:1;border-radius:14px;box-shadow:0 18px 40px color-mix(in srgb,var(--text) 22%,transparent);transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.lsn-player.paused .lsn-art{transform:scale(.9)}
.lsn-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
.lsn-meta>div{min-width:0}
.lsn-meta .tt{font:700 22px/1.2 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-meta .aa{font:400 19px/1.3 var(--disp);color:var(--textL);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-dots{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font:700 14px/1 var(--lui);letter-spacing:1px;cursor:pointer}
.lsn-with{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px 5px 6px;border-radius:999px;background:var(--lglass);border:1px solid var(--lline);font:600 11px/1 var(--lui);letter-spacing:.04em;color:var(--textL);align-self:flex-start;visibility:hidden}
.lsn-with.on{visibility:visible}
.lsn-with i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#efe6dc,#bfae9f);display:grid;place-items:center;font:700 9px/1 var(--serif);font-style:normal;color:#5b4f47}
.lsn-scrub{margin-top:18px;position:relative}
.lsn-scrub input{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;background:none;touch-action:none;cursor:pointer}
.lsn-scrub input::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,color-mix(in srgb,var(--text) 65%,transparent) var(--p,0%),var(--lfaint) var(--p,0%))}
.lsn-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:transparent;border:0}
.lsn-scrub input:active::-webkit-slider-thumb{background:var(--text)}
.lsn-scrub input::-moz-range-track{height:6px;border-radius:4px;background:var(--lfaint)}
.lsn-scrub input::-moz-range-progress{height:6px;border-radius:4px;background:color-mix(in srgb,var(--text) 65%,transparent)}
.lsn-scrub .tm{display:flex;justify-content:space-between;font:600 11px/1 var(--lui);color:var(--textL);margin-top:4px;font-variant-numeric:tabular-nums}
.lsn-big{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0}
.lsn-big button{border:0;background:none;padding:4px;color:var(--text);cursor:pointer;display:grid;place-items:center}
.lsn-big svg{fill:currentColor}
.lsn-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding:0 18px;flex:none}
.lsn-bottom button{border:0;background:none;padding:6px;border-radius:10px;color:var(--textL);cursor:pointer;display:grid;place-items:center}
.lsn-bottom button.on{color:var(--text);background:var(--lglass)}
.lsn-bottom svg{width:22px;height:22px}

.lsn-mini{display:flex;align-items:center;gap:12px;flex:none}
.lsn-mini .sq{width:56px;height:56px;border-radius:8px;flex:none;box-shadow:0 8px 18px color-mix(in srgb,var(--text) 18%,transparent)}
.lsn-mini>div{min-width:0}
.lsn-mini .tt{font:700 16px/1.25 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-mini .aa{font:400 15px/1.3 var(--disp);color:var(--textL);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* lyrics */
.lsn-lines{margin-top:22px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:28% 0 50%;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 72%,transparent)}
.lsn-lines::-webkit-scrollbar{display:none}
.lsn-lines p{font:800 28px/1.28 var(--disp);color:color-mix(in srgb,var(--text) 26%,transparent);margin-bottom:22px;cursor:pointer;transition:color .3s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lsn-lines p small{display:block;font:600 16px/1.35 var(--disp);margin-top:4px}
.lsn-lines p.past{color:color-mix(in srgb,var(--text) 16%,transparent)}
.lsn-lines p.on{color:var(--text)}
.lsn-lines p.picked{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:6px}
.lsn-lines .none{font:600 17px/1.5 var(--disp);color:var(--textL);cursor:default}
.lsn-talk{display:flex;gap:10px;align-items:center;flex:none;margin-top:10px}
.lsn-talk input{flex:1;min-width:0;padding:12px 16px;border-radius:22px;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font:14px/1.3 var(--lui);outline:0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lsn-talk input::placeholder{color:var(--textL)}
.lsn-talk button{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,var(--card));color:#fff;font-weight:700;font-size:17px;cursor:pointer}

/* queue */
.lsn-qwrap{margin-top:18px;flex:1;min-height:0;display:flex;flex-direction:column}
.lsn-qh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 8px;flex:none}
.lsn-qh b{font:700 17px/1 var(--disp)}
.lsn-qh span{font:500 13px/1 var(--lui);color:var(--textL);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
.lsn-scroll::-webkit-scrollbar{display:none}
.lsn-qlist{border-radius:20px;padding:2px 14px;position:relative}
.lsn-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,transparent);position:relative;background:transparent;cursor:pointer;touch-action:pan-y}
.lsn-row:last-child{border:0}
.lsn-row.dragging{z-index:2;background:var(--lglass);border-radius:12px;box-shadow:0 10px 24px color-mix(in srgb,var(--text) 14%,transparent);transition:none}
.lsn-row.settle{transition:transform .2s}
.lsn-row .sq{width:46px;height:46px;border-radius:7px;flex:none}
.lsn-row>div{min-width:0;flex:1}
.lsn-row .tt{font:600 15px/1.3 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-row .aa{font-size:13px;line-height:1.35;color:var(--textL);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-row .why{font-size:12px;line-height:1.4;color:var(--textL);margin-top:2px}
.lsn-row .who{flex:none;font:600 10px/1 var(--lui);letter-spacing:.08em;background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 60%,var(--text));padding:5px 8px;border-radius:999px;white-space:nowrap}
.lsn-row .plays{flex:none;font:500 11px/1 var(--lui);color:var(--textL);white-space:nowrap}
.lsn-row .grip{width:28px;height:30px;flex:none;position:relative;touch-action:none;cursor:grab}
.lsn-row .grip::before,.lsn-row .grip::after{content:"";position:absolute;left:6px;right:6px;border-top:2px solid color-mix(in srgb,var(--text) 25%,transparent)}
.lsn-row .grip::before{top:10px;height:4px;border-bottom:2px solid color-mix(in srgb,var(--text) 25%,transparent)}
.lsn-row .grip::after{top:20px}
.lsn-row .add{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font-size:18px;line-height:1;cursor:pointer}
.lsn-row.now .tt{color:color-mix(in srgb,var(--accent) 70%,var(--text))}
.lsn-empty{padding:18px 4px;text-align:center;color:var(--textL);font-size:13.5px}

/* library */
.lsn-v-lib{margin-top:4px}
.lsn-lib-h{display:flex;align-items:center;gap:10px;flex:none}
.lsn-lib-h h2{font:800 30px/1.1 var(--disp);margin:2px 2px 0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-back{flex:none;width:34px;height:34px;border-radius:50%;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font-size:18px;cursor:pointer}
.lsn-sub{font-size:13px;color:var(--textL);margin:4px 2px 12px;flex:none}
.lsn-search{display:flex;gap:8px;flex:none;margin-bottom:14px}
.lsn-search input{flex:1;min-width:0;padding:11px 16px;border-radius:16px;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font:14.5px/1.3 var(--lui);outline:0}
.lsn-search input::placeholder{color:var(--textL)}
.lsn-results{border-radius:20px;padding:2px 14px;margin-bottom:16px}
.lsn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.lsn-tile{cursor:pointer;min-width:0}
.lsn-tile .sq{aspect-ratio:1;border-radius:12px;box-shadow:0 10px 24px color-mix(in srgb,var(--text) 14%,transparent);position:relative;overflow:hidden}
.lsn-tile .sq::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.38))}
.lsn-tile .sq b{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;font:800 20px/1.1 var(--disp);text-shadow:0 1px 8px rgba(0,0,0,.25)}
.lsn-tile .sq small{position:absolute;left:12px;top:10px;font:700 9.5px/1 var(--lui);letter-spacing:.14em;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.3)}
.lsn-tile.ian .sq.lsn-cover{background-color:color-mix(in srgb,#93A9C6 55%,var(--card))}
.lsn-tile .nm{font:600 14px/1.3 var(--disp);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-tile .ct{font-size:12px;color:var(--textL)}
.lsn-tile.new .sq{display:grid;place-items:center;background:var(--lglass);border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);box-shadow:none;font-size:30px;color:var(--textL)}
.lsn-tile.new .sq::before{display:none}
.lsn-detail-h{display:flex;gap:14px;align-items:flex-end;margin:6px 0 14px;flex:none}
.lsn-detail-h .sq{width:112px;height:112px;border-radius:12px;flex:none;box-shadow:0 10px 24px color-mix(in srgb,var(--text) 14%,transparent)}
.lsn-detail-h .note{font-size:13px;line-height:1.5;color:var(--textL);margin-bottom:8px}
.lsn-btns{display:flex;gap:10px}
.lsn-btns button{flex:1;padding:10px 14px;border-radius:12px;font:600 14px/1 var(--lui);border:0;background:color-mix(in srgb,var(--accent) 70%,var(--card));color:#fff;cursor:pointer}
.lsn-btns button+button{background:var(--lglass);border:1px solid var(--lline);color:var(--text)}

/* small sheet (··· menus, add to playlist, new playlist) */
.lsn-sheet-bg{position:fixed;inset:0;z-index:9002;background:color-mix(in srgb,var(--text) 18%,transparent);display:flex;align-items:flex-end;justify-content:center}
.lsn-sheet{width:min(100%,430px);margin:0 10px calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:22px;padding:8px;color:var(--text);font-family:var(--lui);background:color-mix(in srgb,var(--card) 82%,transparent)}
.lsn-sheet .hd{font:600 12px/1.4 var(--lui);color:var(--textL);text-align:center;padding:8px 12px 6px}
.lsn-sheet button{display:block;width:100%;border:0;background:none;color:var(--text);font:500 16px/1.3 var(--lui);padding:13px 12px;border-radius:14px;text-align:center;cursor:pointer}
.lsn-sheet button:active{background:var(--lglass)}
.lsn-sheet button.quiet{color:var(--textL)}
.lsn-sheet input{display:block;width:100%;padding:12px 14px;margin:4px 0 6px;border-radius:14px;background:var(--lglass);border:1px solid var(--lline);color:var(--text);font:15px/1.3 var(--lui);outline:0}
.lsn-v-lib [hidden]{display:none!important}
.lsn-sec{font:700 17px/1 var(--disp);margin:26px 2px 12px}
.lsn-with img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:color-mix(in srgb,var(--accent) 20%,var(--card))}
/* 今日私选 */
.lsn-pick{margin-top:18px;border-radius:18px;padding:16px}
.lsn-pick .d{font:700 10px/1 var(--lui);letter-spacing:.16em;color:var(--textL)}
.lsn-pick h3{font:800 23px/1.15 var(--disp);margin:7px 0 5px}
.lsn-pick p{font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--text) 85%,transparent);margin:6px 0 0}
.lsn-pick .sig{font:italic 400 15px/1 var(--serif);text-align:right;margin-top:4px;color:var(--textL)}
.lsn-pick .rows{margin-top:10px;background:color-mix(in srgb,var(--card) 45%,transparent);border:1px solid var(--lline);border-radius:14px;padding:4px 12px}
.lsn-pick .r{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,transparent);cursor:pointer}
.lsn-pick .r:last-child{border:0}
.lsn-pick .r .sq{width:40px;height:40px;border-radius:7px;flex:none}
.lsn-pick .r>div{min-width:0}
.lsn-pick .r .tt{font:600 14px/1.25 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-pick .r .tt span{font-weight:400;color:var(--textL)}
.lsn-pick .r .why{font-size:12px;line-height:1.4;color:var(--textL)}
.lsn-pick .lsn-btns{margin-top:12px}

/* 喜欢 (2026-10-16): heart next to ··· in the full player */
.lsn-meta-btns{display:flex;align-items:center;gap:8px;flex:none}
.lsn-heart{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lglass);border:1px solid var(--lline);color:var(--text);cursor:pointer;padding:0}
.lsn-heart svg{fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s cubic-bezier(.3,1.6,.5,1),fill .2s}
.lsn-heart.on{color:#e0607a}
.lsn-heart.on svg{fill:currentColor;transform:scale(1.08)}
.lsn-heart:active svg{transform:scale(.85)}