/* update 4: timed comments + reactions on the waveform */
.tl-head{position:relative;height:44px;margin-bottom:2px}
.tl-head.tl-empty{height:20px}
.tl-bub{position:absolute;inset:0 44px 0 0}
.tl-toggle{position:absolute;right:0;bottom:2px;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;color:var(--color-muted,#aaa);background:var(--color-elevated,#1f1f1f)}
.tl-toggle[aria-pressed=false]{opacity:.55;text-decoration:line-through}
.tl-toggle:focus-visible,.tl-mark:focus-visible,.tl-at:focus-visible{outline:2px solid var(--color-primary,#f50);outline-offset:2px}
.tl-marks{position:relative;height:30px}
.tl-mark{position:absolute;top:2px;transform:translateX(-50%);display:flex;align-items:center;height:26px;max-width:34px;padding:0;border-radius:999px;transition:transform .15s}
.tl-mark:hover,.tl-mark.tl-cur{transform:translateX(-50%) scale(1.15);z-index:3}
.tl-stack{display:flex}
.tl-av{width:18px;height:18px;border-radius:999px;flex:none;box-shadow:0 0 0 1.5px var(--color-bg,#121212)}
.tl-stack .tl-av+.tl-av{margin-left:-11px}
.tl-mark.tl-cur .tl-av:first-child{box-shadow:0 0 0 2px var(--color-fg,#fff)}
.tl-av-lg{width:30px;height:30px;font-size:11px}
.tl-more{position:absolute;right:-6px;top:-5px;min-width:16px;padding:0 3px;border-radius:999px;background:var(--color-primary,#f50);color:var(--color-primary-fg,#fff);font-size:9px;font-weight:800;line-height:14px;text-align:center;pointer-events:none}
.tl-bubble{position:absolute;bottom:2px;display:flex;align-items:center;gap:6px;max-width:78%;padding:5px 9px 5px 5px;border-radius:12px;background:var(--color-elevated,#222);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:tlIn .25s ease-out}
@keyframes tlIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.tl-bubble[style*="translateX"]{animation:none}
.tl-pop{position:fixed;z-index:120;display:flex;flex-direction:column;border-radius:14px;background:var(--color-elevated,#1f1f1f);border:1px solid var(--color-border,#333);box-shadow:0 18px 50px rgba(0,0,0,.5);color:var(--color-fg,#fff);overflow:hidden}
.tl-pop.tl-sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:70vh!important;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0)}
.tl-pop-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-border,#333);font-size:14px}
.tl-pop-h [data-cnt]{flex:1}
.tl-x{width:28px;height:28px;border-radius:999px;font-size:20px;line-height:1;background:var(--color-pill,#2a2a2a)}
.tl-pop-l{overflow:auto;overscroll-behavior:contain}
.tl-row{display:flex;gap:10px;padding:10px 12px}
.tl-row+.tl-row{border-top:1px solid color-mix(in oklab,var(--color-border,#333) 60%,transparent)}
.tl-at{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:var(--color-pill,#2a2a2a);font-weight:700;color:var(--color-fg,#fff)}
.tl-load{display:block;width:100%;padding:10px;font-size:13px;font-weight:700;color:var(--color-primary,#f50)}
/* timed reactions */
.tl-rx{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none}
.tl-rx-dot{position:absolute;bottom:-4px;transform:translateX(-50%);font-size:11px;line-height:1;opacity:.9}
.tl-fly{position:fixed;z-index:130;pointer-events:none;font-size:26px;animation:tlFly 1.6s ease-out forwards}
@keyframes tlFly{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-120px) scale(1)}}
@media (prefers-reduced-motion:reduce){.tl-fly{animation-duration:.01s}.tl-bubble{animation:none}}
/* update 12: waveform drag/scrub */
.sw-scrub{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sw-scrub.is-drag{cursor:grabbing}
.sw-scrub-tip{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:var(--color-fg,#fff);color:var(--color-bg,#111);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* update 12: collapsed lyrics */
.sw-lyr{position:relative}
.sw-lyr.is-collapsed{max-height:calc(1.625em * 7 + .5rem);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.sw-lyr-more{display:inline-flex;align-items:center;gap:4px}

/* ===== update 12: comments sheet (SoundCloud-style) ===== */
html.swc-lock{overflow:hidden}
.swc-ov{position:fixed;inset:0;z-index:78;display:flex;align-items:flex-end;justify-content:center}
.swc-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.swc-ov .swc-panel{position:relative;width:100%;max-width:640px;height:min(88dvh,820px);border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .22s ease}
.swc-ov.is-open .swc-scrim{opacity:1}.swc-ov.is-open .swc-panel{transform:none}
@media (min-width:900px){.swc-ov{justify-content:flex-end;align-items:stretch}.swc-ov .swc-panel{max-width:440px;height:100%;border-radius:0;transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.swc-ov .swc-panel,.swc-scrim{transition:none}}
.swc-panel{display:flex;flex-direction:column;background:var(--color-elevated);color:var(--color-fg);overflow:hidden;min-width:0}
.swc-view{display:flex;flex-direction:column;min-height:0;flex:1}
.swc-view[hidden]{display:none}
.swc-head{position:relative;display:flex;align-items:center;gap:8px;padding:14px 12px 10px 16px;border-bottom:1px solid var(--color-border)}
.swc-grab{position:absolute;top:5px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:var(--color-subtle);opacity:.6}
.swc-title{flex:1;min-width:0;margin:0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swc-ib{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;background:var(--color-pill);color:var(--color-fg);font-size:13px;font-weight:600}
.swc-ib .sw-ico{flex-shrink:0}
.swc-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.swc-track{display:flex;align-items:center;gap:10px;padding:12px 16px}
.swc-track img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}
.swc-track div{display:flex;flex-direction:column;min-width:0}.swc-track b,.swc-track span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swc-track b{font-size:14px}.swc-track span{font-size:12px;color:var(--color-muted)}
.swc-rx{display:flex;align-items:center;gap:8px;width:calc(100% - 32px);margin:0 16px 8px;padding:10px 12px;border-radius:12px;background:var(--color-pill);font-size:13px;font-weight:600;text-align:left}
.swc-rx[hidden]{display:none}
.swc-emo{display:inline-flex}.swc-emo i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;margin-left:-6px;border-radius:50%;background:var(--color-elevated);box-shadow:0 0 0 2px var(--color-pill);font-size:14px}.swc-emo i:first-child{margin-left:0}
.swc-chev{margin-left:auto;color:var(--color-muted)}
.swc-list{padding:0 4px 8px}
.swc-row,.swc-rxrow{display:flex;gap:10px;padding:10px 12px;align-items:flex-start;min-width:0}
.swc-row.is-reply{padding-left:0;padding-right:0}
.swc-row.is-pending{opacity:.65}
.swc-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--color-pill);color:#111;font-size:12px;font-weight:700}
.swc-row.is-reply .swc-av{width:28px;height:28px;font-size:10px}
.swc-avl{flex-shrink:0;display:block}
.swc-main{flex:1;min-width:0}
.swc-meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:2px;font-size:12px;color:var(--color-muted)}
.swc-name{font-weight:700;color:var(--color-fg);font-size:13px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swc-at{display:inline-flex;align-items:center;gap:4px}
.swc-chip{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;background:rgba(56,132,255,.16);color:#4c9bff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.swc-chip:hover{background:rgba(56,132,255,.28)}
.swc-ago{color:var(--color-subtle)}
.swc-tag{padding:0 6px;border-radius:999px;background:var(--color-pill);font-size:11px}
.swc-body{margin:2px 0 0;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.swc-ed{font-size:11px;color:var(--color-subtle)}
.swc-acts{display:flex;align-items:center;gap:6px;margin-top:2px}
.swc-reply{font-size:12px;font-weight:700;color:var(--color-muted);padding:4px 0}
.swc-more{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--color-muted)}
.swc-thread{margin-top:2px;font-size:12px;font-weight:700;color:var(--color-fg);padding:4px 0}
.swc-thread::before{content:"";display:inline-block;width:20px;height:1px;margin-right:8px;vertical-align:middle;background:var(--color-subtle)}
.swc-kids[hidden]{display:none}
.swc-like{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:32px;padding-top:4px;color:var(--color-muted);font-size:11px}
.swc-like.is-on{color:var(--color-primary)}.swc-like.is-on .sw-ico{fill:currentColor}
.swc-empty{padding:24px 16px;text-align:center;color:var(--color-muted);font-size:14px}
.swc-sentinel{display:grid;place-items:center;height:44px}.swc-sentinel[hidden]{display:none}
.swc-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--color-subtle);border-top-color:transparent;animation:swc-spin .8s linear infinite}
@keyframes swc-spin{to{transform:rotate(360deg)}}
.swc-input{display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background:var(--color-elevated)}
.swc-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.swc-field input{width:100%;min-width:0;padding:9px 14px;border-radius:999px;background:var(--color-pill);color:var(--color-fg);font-size:14px;outline:none;border:1px solid transparent}
.swc-field input:focus{border-color:var(--color-primary)}
.swc-replying{display:flex;align-items:center;gap:6px;padding:0 6px;font-size:12px;color:var(--color-muted)}.swc-replying[hidden]{display:none}
.swc-replying button{display:grid;place-items:center;width:20px;height:20px}
.swc-send{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:var(--color-primary-fg,#fff);flex-shrink:0}
.swc-input.is-busy .swc-send{opacity:.5}
.swc-tabs{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;border-bottom:1px solid var(--color-border)}
.swc-tab{flex-shrink:0;padding:6px 12px;border-radius:999px;background:var(--color-pill);font-size:13px;font-weight:600;white-space:nowrap}
.swc-tab[aria-selected=true]{background:var(--color-fg);color:var(--color-bg)}
.swc-rxrow{align-items:center}.swc-rxrow .swc-main{display:flex;flex-direction:column}.swc-rxe{font-size:20px;width:28px;text-align:center}
.swc-menu{display:flex;flex-direction:column}
.swc-mi{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;text-align:left;font-size:15px;color:var(--color-fg)}
.swc-mi.is-danger{color:#f05252}.swc-mi.is-on{color:var(--color-primary)}
/* track page: same component inline */
.swc-inline .swc-panel{border-radius:14px;margin:0 12px;border:1px solid var(--color-border)}
.swc-inline .swc-scroll{max-height:70vh}
.swc-inline .swc-head{padding-top:12px}.swc-inline .swc-grab{display:none}

/* ===== update 13: waveform comment markers like jk-mp3.grok.me — one round avatar per marker, active one enlarged + tooltip ===== */
.tl-marks{height:36px}
.tl-mark{top:0;width:36px;height:36px;max-width:none;justify-content:center;transform:translateX(-50%);background:none}
.tl-mark:hover,.tl-mark.tl-cur{transform:translateX(-50%);z-index:4}
.tl-mark .tl-av{--s:24px!important;box-shadow:0 0 0 1px rgba(0,0,0,.4);transition:width .15s,height .15s,font-size .15s}
.tl-mark .tl-av.sw-av-i{font-size:9px}
.tl-mark:hover .tl-av,.tl-mark.tl-cur .tl-av{--s:28px!important;box-shadow:0 0 0 2px var(--color-fg,#fff)}
.tl-mark:hover .tl-av.sw-av-i,.tl-mark.tl-cur .tl-av.sw-av-i{font-size:10px}
.tl-more{right:-1px;top:1px;min-width:14px;padding:0 3px;font-size:9px;line-height:13px;box-shadow:0 0 0 1.5px var(--color-bg,#121212)}
.tl-bubble{flex-direction:column;align-items:flex-start;gap:1px;max-width:min(78%,260px);padding:7px 11px;border-radius:10px;border:1px solid var(--color-border,#333)}
.tl-bub-n{display:block;max-width:100%;font-size:12px;font-weight:600;color:var(--color-fg,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-bub-c{color:var(--color-subtle,#888);font-weight:500}
.tl-bub-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.35;color:var(--color-muted,#bbb)}
.swc-row.is-reply .swc-av{--s:28px}
.sw-vip-ico{color:#f5b301}

/* ===== update 14: icon buttons — centred icons, consistent padding ===== */
.tl-x{display:inline-grid!important;place-items:center!important;justify-content:center!important;flex:none;width:32px;height:32px;padding:0;margin:-4px -4px -4px auto;font-size:0;color:var(--color-muted,#aaa)}
.tl-x:hover{color:var(--color-fg,#fff)}
.tl-x .sw-ico{width:16px;height:16px;display:block}
.tl-pop-h{min-height:48px}
.tl-toggle{height:26px;gap:4px;padding:0 9px 0 8px;line-height:1}
.tl-toggle .sw-ico{width:14px;height:14px;flex:none;display:block}
.swc-more,.swc-send{display:inline-grid!important;place-items:center!important;justify-content:center!important;padding:0!important}
.swc-more .sw-ico,.swc-send .sw-ico{display:block;margin:0}