/* ============================================================
   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, waveform, 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{width:6rem;height:4px;accent-color:oklch(var(--p))}

/* ============================================================
   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:120px}
.il-ap--immersive .il-ap-biglink{display:inline-flex;align-items:center;justify-content:center;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}

/* Waveform / visualizer */
.il-ap--immersive .il-ap-wave{display:flex;align-items:center;gap:3px;height:56px;justify-content:space-between;cursor:pointer;touch-action:none}
.il-ap--immersive .il-ap-wavebar{flex:1;border-radius:3px;background:rgba(255,255,255,.18);cursor:pointer;position:relative;overflow:hidden}
.il-ap--immersive .il-ap-wavebar .il-ap-wavefill{position:absolute;left:0;bottom:0;width:100%;height:0;background:oklch(var(--p));transition:height .1s linear}
.il-ap--immersive .il-ap-wavebar.progressed .il-ap-wavefill{background:#fff}
.il-ap--immersive .il-ap-timerow{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem;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}