/* ============================================================
   Innerloop Audio Player – DaisyUI design tokens, theme-adaptive.
   Two appearances driven by an `il-ap--immersive` class on .il-ap-wrapper:
     - compact (default): tight inline player for table/grid cells
     - immersive: visual/hero player with artwork, vinyl disc, full controls
   Global CSS + JS (no inline style/script) so it survives kses filtering.
   ============================================================ */

/* ---------- Wrapper / layout ---------- */
.il-ap-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;border:1px solid oklch(var(--b3));border-radius:var(--radius-box,.5rem);background:var(--fallback-b1,oklch(var(--b1)/1))}
.il-ap-player{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;position:relative}
.il-ap-controls{flex:1;min-width:0}
.il-ap-audio.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Toolbar ---------- */
.il-ap-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 1rem;border-bottom:1px solid oklch(var(--b3));background:var(--fallback-b1,oklch(var(--b1)/1))}
.il-ap-toolbar-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}
.il-ap-toolbar-right{display:flex;align-items:center;gap:.25rem}
.il-ap-filename{display:block;max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;color:var(--fallback-bc,oklch(var(--bc)/.7))}
.il-ap-btn-download{flex-shrink:0}

/* ---------- Compact player ---------- */
.il-ap-play-btn,.il-ap-mute-btn,.il-ap-skip-btn,.il-ap-speed-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.il-ap-play-btn .il-ap-icon-pause,.il-ap-mute-btn .il-ap-icon-volume-off{display:none}
.il-ap-play-btn.il-ap-playing .il-ap-icon-play,.il-ap-mute-btn.il-ap-muted .il-ap-icon-volume-on{display:none}
.il-ap-play-btn.il-ap-playing .il-ap-icon-pause,.il-ap-mute-btn.il-ap-muted .il-ap-icon-volume-off{display:inline-flex}
.il-ap-mute-btn.il-ap-muted{color:oklch(var(--p))}
.il-ap-icon{font-style:normal;line-height:1}

/* Progress bar */
.il-ap-track{position:relative;height:6px;border-radius:var(--rounded-badge,1.9rem);background:oklch(var(--b3));cursor:pointer;touch-action:none}
.il-ap-buffer{position:absolute;inset:0;width:0;border-radius:inherit;background:oklch(var(--p)/.25)}
.il-ap-progress{position:absolute;inset:0;width:0;border-radius:inherit;background:oklch(var(--p))}
.il-ap-thumb{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--fallback-bc,oklch(var(--bc)));transform:translate(-50%,-50%);opacity:0;transition:opacity .12s}
.il-ap-track:hover .il-ap-thumb,.il-ap-track:focus .il-ap-thumb{opacity:1}
.il-ap-time{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem;font-size:.75rem;color:var(--fallback-bc,oklch(var(--bc)/.6));font-variant-numeric:tabular-nums}

/* ---------- Volume popover ---------- */
.il-ap-vol-wrap{position:relative;flex-shrink:0}
.il-ap-vol-pop{position:absolute;bottom:calc(100% + .5rem);right:0;display:none;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:var(--rounded-btn,.5rem);background:var(--fallback-b1,oklch(var(--b1)/1));box-shadow:0 8px 24px oklch(var(--bc)/.15);border:1px solid oklch(var(--b3))}
.il-ap-vol-pop.open{display:flex}
.il-ap-vol-slider{-webkit-appearance:none;appearance:none;width:6rem;height:4px;border-radius:999px;background:oklch(var(--b3));outline:none;cursor:pointer}
.il-ap-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:oklch(var(--p));border:none;cursor:pointer;transition:transform .12s}
.il-ap-vol-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.il-ap-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:oklch(var(--p));border:none;cursor:pointer}
.il-ap-vol-slider::-moz-range-track{height:4px;border-radius:999px;background:oklch(var(--b3))}

/* ============================================================
   IMMERSIVE / VISUAL MODE
   ============================================================ */
.il-ap-wrapper.il-ap--immersive{border:0;border-radius:var(--radius-box,1rem);overflow:hidden;position:relative;color:var(--fallback-bc,oklch(var(--bc)/1))}
.il-ap--immersive .il-ap-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(20px) saturate(1.2);transform:scale(1.15);z-index:0;opacity:.5}
.il-ap--immersive .il-ap-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.75))}
.il-ap--immersive .il-ap-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.il-ap--immersive .il-ap-toprow{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.il-ap--immersive .il-ap-now{display:flex;flex-direction:column;min-width:0}
.il-ap--immersive .il-ap-title{font-size:1.25rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.il-ap--immersive .il-ap-subtitle{font-size:.8rem;color:currentColor;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.il-ap--immersive .il-ap-actions{display:flex;align-items:center;gap:.5rem}
.il-ap--immersive .il-ap-btn-download{border-radius:999px}

/* Big play center */
.il-ap--immersive .il-ap-stage{display:flex;align-items:center;justify-content:center;min-height:200px;position:relative}
.il-ap--immersive .il-ap-biglink{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;transition:transform .15s,background .15s;backdrop-filter:blur(4px)}
.il-ap--immersive .il-ap-biglink:hover{transform:scale(1.06);background:rgba(255,255,255,.25)}
.il-ap--immersive .il-ap-bigicon{font-size:2rem;line-height:1;display:inline-flex}
.il-ap--immersive.il-ap-playing .il-ap-big-icon-play{display:none}
.il-ap--immersive.il-ap-playing .il-ap-big-icon-pause{display:block}
.il-ap--immersive .il-ap-big-icon-pause{display:none}

/* Immersive seek track – high contrast on the glass/artwork backdrop */
.il-ap--immersive .il-ap-track{height:8px;margin:.35rem 0 0;background:rgba(255,255,255,.18)}
.il-ap--immersive .il-ap-track:hover{background:rgba(255,255,255,.26)}
.il-ap--immersive .il-ap-buffer{background:rgba(255,255,255,.12)}
.il-ap--immersive .il-ap-thumb{opacity:1;width:14px;height:14px;background:#fff;border:2px solid oklch(var(--p));box-shadow:0 0 8px rgba(0,0,0,.35)}
.il-ap--immersive .il-ap-timerow{display:flex;align-items:center;justify-content:space-between;margin-top:.35rem;font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.85}
.il-ap--immersive .il-ap-seek{display:flex;align-items:center;gap:.6rem}
.il-ap--immersive .il-ap-controlrow{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.il-ap--immersive .il-ap-chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:.35rem .7rem;font-size:.75rem;cursor:pointer;transition:background .12s}
.il-ap--immersive .il-ap-chip:hover{background:rgba(255,255,255,.18)}
.il-ap--immersive .il-ap-chip.active{background:oklch(var(--p));border-color:oklch(var(--p));color:#fff}
.il-ap--immersive .il-ap-mute-btn,.il-ap--immersive .il-ap-skip-btn{color:#fff}
.il-ap--immersive .il-ap-time{color:inherit;opacity:.85}

/* ============================================================
   INTERACTION / A11Y / MOTION IMPROVEMENTS
   ============================================================ */

/* Volume popover – reveal on hover or when a control inside gets focus */
.il-ap-vol-wrap:hover .il-ap-vol-pop,
.il-ap-vol-pop:focus-within{display:flex}

/* Focus-visible rings for keyboard users */
.il-ap-play-btn:focus-visible,
.il-ap-mute-btn:focus-visible,
.il-ap-chip:focus-visible,
.il-ap-track:focus-visible,
.il-ap-btn-download:focus-visible{outline:2px solid oklch(var(--p));outline-offset:2px}
.il-ap--immersive .il-ap-biglink:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Dragging the seek bar */
.il-ap-seeking{user-select:none;-webkit-user-select:none}
.il-ap-seeking,.il-ap-seeking *{cursor:grabbing}

/* Smooth bar movement */
.il-ap-thumb{transition:left .08s linear,opacity .12s}
.il-ap-progress{transition:width .08s linear}
.il-ap-buffer{transition:width .2s linear}

/* Press feedback */
.il-ap-chip:active{transform:scale(.96)}
.il-ap--immersive .il-ap-biglink:active{transform:scale(.96)}

/* Error state */
.il-ap-wrapper.il-ap-error .il-ap-time{color:oklch(var(--er))}
.il-ap--immersive.il-ap-error .il-ap-timerow{color:oklch(var(--er))}
.il-ap-wrapper.il-ap-error .il-ap-progress{background:oklch(var(--er))}

/* ============================================================
   IMMERSIVE VINYL DISC
   ============================================================ */
.il-ap--immersive .il-ap-disc{position:absolute;top:50%;left:50%;width:180px;height:180px;transform:translate(-50%,-50%);border-radius:50%;background-image:radial-gradient(circle at 32% 30%,oklch(var(--p)/.45),oklch(var(--b3)/.55) 72%);background-size:cover;background-position:center;box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.14);animation:il-ap-spin-disc 12s linear infinite;animation-play-state:paused}
.il-ap--immersive .il-ap-disc::before{content:"";position:absolute;inset:16%;border-radius:50%;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.il-ap--immersive .il-ap-disc::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 6px rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.45)}
.il-ap--immersive.il-ap-playing .il-ap-disc{animation-play-state:running}
@keyframes il-ap-spin-disc{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ============================================================
   SCRUB HOVER TOOLTIP
   ============================================================ */
.il-ap-scrub{position:absolute;top:100%;margin-top:.4rem;left:0;transform:translateX(-50%);padding:.22rem .5rem;border-radius:.45rem;background:var(--fallback-b1,oklch(var(--b1)/1));color:var(--fallback-bc,oklch(var(--bc)/1));font-size:.7rem;font-variant-numeric:tabular-nums;box-shadow:0 4px 14px oklch(var(--bc)/.22);border:1px solid oklch(var(--b3));opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;white-space:nowrap}
.il-ap--immersive .il-ap-scrub{top:-1.8rem;margin-top:0}
.il-ap-scrub.visible{opacity:1}

/* ============================================================
   BUFFERING INDICATOR
   ============================================================ */
@keyframes il-ap-spin{to{transform:rotate(360deg)}}
.il-ap-wrapper.il-ap-buffering:not(.il-ap--immersive) .il-ap-play-btn .il-ap-icon{display:none}
.il-ap-wrapper.il-ap-buffering:not(.il-ap--immersive) .il-ap-play-btn::after{content:"";width:1rem;height:1rem;border:2px solid oklch(var(--pc));border-top-color:transparent;border-radius:50%;animation:il-ap-spin .7s linear infinite}
.il-ap--immersive.il-ap-buffering .il-ap-big-icon-play,.il-ap--immersive.il-ap-buffering .il-ap-big-icon-pause{display:none}
.il-ap--immersive.il-ap-buffering .il-ap-biglink::after{content:"";width:2rem;height:2rem;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:il-ap-spin .7s linear infinite}

/* ============================================================
   GLOBAL PLAYER DOCK  (adopted compact players rise into this bar)
   ============================================================ */
.il-dock{position:fixed;inset-inline:0;bottom:0;z-index:999;background:var(--color-base-100,oklch(var(--b1)/1));border-top:1px solid var(--color-base-300,oklch(var(--b3)));padding:.5rem .9rem;animation:il-dock-up .18s ease-out}
/* The dock sits at 999; platform modals must paint above it (element+class
   specificity beats daisyUI's .modal rule regardless of load order). */
dialog.modal{z-index:1000}
/* Dock lives on the page side of the dashboard shell, matching the #topbar /
   #app-footer offsets (16rem sidebar, 5rem collapsed, none for top-nav).
   Sidebar is hidden below lg, so the full-width base is correct there. */
@media (min-width:64rem){
body:has(#app-shell:not(.il-nav-top)) .il-dock{inset-inline-start:16rem;transition:inset-inline-start .3s}
body:has(#app-shell:not(.il-nav-top).il-sb-collapsed) .il-dock{inset-inline-start:5rem}
}
.il-dock.hidden{display:none}
@keyframes il-dock-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.il-dock-inner{display:flex;align-items:center;gap:1rem;max-width:90rem;margin:0 auto}
.il-dock-meta{display:flex;align-items:center;gap:.7rem;min-width:0;flex:0 1 18rem}
.il-dock-art{width:2.75rem;height:2.75rem;border-radius:.5rem;background:var(--color-base-300,oklch(var(--b3)));background-size:cover;background-position:center;flex-shrink:0}
.il-dock-text{display:flex;flex-direction:column;min-width:0}
.il-dock-title{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-dock-artist{font-size:.72rem;color:color-mix(in oklab,var(--color-base-content,#000) 55%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-dock-center{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;position:relative;flex-wrap:wrap}
.il-dock-btn{background:none;border:0;cursor:pointer;color:var(--color-base-content,oklch(var(--bc)/1));font-size:.95rem;line-height:1;padding:.25rem}
.il-dock-btn.is-on{color:oklch(var(--p)/1)}
.il-lyrics-line{transition:color .15s ease,opacity .15s ease;opacity:.62}
.il-lyrics-line.is-active{color:oklch(var(--p)/1);font-weight:600;opacity:1}
.il-lyrics-gap{min-height:.75rem;opacity:1}
.il-dock-play.btn{display:inline-flex;align-items:center;justify-content:center}
.il-dock-time{font-size:.72rem;font-variant-numeric:tabular-nums;color:color-mix(in oklab,var(--color-base-content,#000) 65%,transparent);white-space:nowrap;order:9}
.il-dock-track{position:relative;flex:1;min-width:6rem;height:.45rem;border-radius:9999px;background:var(--color-base-300,oklch(var(--b3)));cursor:pointer;overflow:visible}
.il-dock-track:focus-visible{outline:2px solid var(--color-primary,oklch(var(--pc)));outline-offset:2px}
.il-dock-bar{position:absolute;top:0;left:0;height:100%;border-radius:9999px;pointer-events:none}
.il-dock-buffer{background:color-mix(in oklab,var(--color-base-content,#000) 15%,transparent);width:0}
.il-dock-progress{background:var(--color-primary,oklch(var(--pc)));width:0}
.il-dock-thumb{position:absolute;top:50%;left:0;width:.8rem;height:.8rem;border-radius:50%;background:var(--color-base-content,oklch(var(--bc)/1));transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .12s}
.il-dock-track:hover .il-dock-thumb,.il-dock-track:focus-visible .il-dock-thumb{opacity:1}
.il-dock-side{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.il-dock-vol{width:5rem;accent-color:var(--color-primary,oklch(var(--pc)))}
.il-dock-close{font-size:.8rem;opacity:.65}
.il-dock-close:hover{opacity:1}
/* Card currently adopted by the dock: subtle highlight, keep its own UI live. */
.il-ap-wrapper.il-ap-in-dock{border-color:color-mix(in oklab,var(--color-primary,#000) 55%,transparent)}
@media (max-width:640px){
	.il-dock-meta{flex-basis:10rem}
	.il-dock-vol{display:none}
}
@media (prefers-reduced-motion: reduce){
	.il-dock{animation:none}
}

@media (prefers-reduced-motion: reduce){
	.il-ap--immersive.il-ap-playing .il-ap-disc{animation:none}
	.il-ap-thumb,.il-ap-progress,.il-ap-buffer{transition:none}
}