/* Stream player — hidden until a track is played */

.audio-dock[hidden]{
  display:none!important;
}

/* Pinned to the viewport while anything plays; pages get bottom room so the dock never hides content */
body.has-audio-dock{padding-bottom:calc(7.5rem + env(safe-area-inset-bottom))}
body.has-audio-dock .tv__scroll{padding-bottom:6.5rem}

.audio-dock{
  position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:95;width:min(640px,calc(100vw - 2rem));
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  padding:.75rem 1rem 1rem;
  border-radius:20px;
  background:color-mix(in srgb,var(--as-bg) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--as-text) 14%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(16px) saturate(1.15);
}

.audio-dock__toggle{
  width:2.75rem;height:2.75rem;border-radius:50%;flex-shrink:0;
  border:none;cursor:pointer;
  background:var(--as-accent);color:var(--as-bg);
  font-size:1rem;display:grid;place-items:center;
  box-shadow:0 8px 24px color-mix(in srgb,var(--as-accent) 45%,transparent);
}
.audio-dock__toggle.is-paused::after{content:'▶';margin-left:2px}
.audio-dock__toggle:not(.is-paused)::after{content:'';width:.65rem;height:.85rem;
  border-left:3px solid currentColor;border-right:3px solid currentColor}

.audio-dock__skip{
  width:2.1rem;height:2.1rem;border-radius:50%;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--as-text) 22%,transparent);background:transparent;color:inherit;
}
.audio-dock__skip[hidden]{display:none}
.audio-dock__skip:disabled{opacity:.35;cursor:default}
.audio-dock__skip:not(:disabled):hover{background:color-mix(in srgb,var(--as-text) 10%,transparent)}
.audio-dock__track{flex:1;min-width:8rem;padding-right:1.5rem}
@media (max-width:480px){
  .audio-dock{width:calc(100vw - 1rem);bottom:calc(.5rem + env(safe-area-inset-bottom));gap:.55rem;padding:.6rem .75rem .75rem}
  .audio-dock__track{min-width:0;flex-basis:0}
}
.audio-dock__label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65;margin-bottom:.15rem}
.audio-dock__track strong{display:block;font-family:var(--as-font-display,Syne,system-ui,sans-serif);
  font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.audio-dock__timeline{
  flex:1 1 100%;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;
  font-size:.72rem;opacity:.85;font-variant-numeric:tabular-nums;
}
.audio-dock__timeline input[type=range]{
  width:100%;accent-color:var(--as-accent);height:4px;
}

.audio-dock__timeline{order:2}
.audio-dock__track{padding-right:0}
.audio-dock__volume{order:1;display:flex;align-items:center;gap:.35rem;margin-right:2.1rem;flex-shrink:0}
.audio-dock__volume input[type=range]{width:5.5rem;accent-color:var(--as-accent);height:4px}
.audio-dock__mute{
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:none;background:transparent;color:inherit;opacity:.8;
}
.audio-dock__mute:hover{opacity:1;background:color-mix(in srgb,var(--as-text) 10%,transparent)}
.audio-dock__mute .audio-dock__x{display:none}
.audio-dock__mute[aria-pressed="true"] .audio-dock__x{display:inline}
.audio-dock__mute[aria-pressed="true"] .audio-dock__waves{display:none}
@media (max-width:480px){.audio-dock__volume input[type=range]{width:4rem}}
@media (max-width:380px){.audio-dock__volume input[type=range]{display:none}}
.audio-dock__track.is-missing strong{opacity:.55;text-decoration:line-through}

.audio-dock__close{
  position:absolute;top:.2rem;right:.25rem;z-index:2;width:2.25rem;height:2.25rem;padding:0;
  display:grid;place-items:center;line-height:1;
  border-radius:50%;border:none;background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:1.1rem;
}
/* Invisible margin around the ×: a ~50px target that the volume slider can't slide under */
.audio-dock__close::after{content:"";position:absolute;inset:-.4rem;border-radius:50%}
.audio-dock__close:hover{opacity:1}

.sticky-player{display:none!important}

/* Phone portrait: volume is left to the phone's own buttons. Controls, title and × share one row; the seek bar
   with its times gets a row of its own. The CRT theme keeps smaller controls and tighter padding because the
   dock sits over the busy TV. */
@media (max-width:599px) and (orientation:portrait){
  body.has-audio-dock{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .audio-dock{gap:calc(.7rem + 5px) .5rem;padding:.6rem .6rem .7rem .7rem;border-radius:16px}
  .audio-dock__toggle{width:2.5rem;height:2.5rem}
  .audio-dock__skip{width:2rem;height:2rem}
  .audio-dock__track{flex:1 1 0;min-width:0}
  .audio-dock__label{display:none}
  .audio-dock__track strong{font-size:.9rem}
  .audio-dock__volume{display:none}
  .audio-dock__close{position:relative;top:auto;right:auto;order:1;flex-shrink:0;width:2.1rem;height:2.1rem}
  .audio-dock__timeline{padding:0 .2rem}

  body.theme-crt-living-room.has-audio-dock{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
  body.has-audio-dock .tv__scroll{padding-bottom:4.5rem}
  .theme-crt-living-room .audio-dock{gap:.5rem .4rem;padding:.3rem .4rem .4rem .45rem;border-radius:14px}
  .theme-crt-living-room .audio-dock__toggle{width:2.1rem;height:2.1rem;font-size:.85rem}
  .theme-crt-living-room .audio-dock__skip{width:1.8rem;height:1.8rem}
  .theme-crt-living-room .audio-dock__skip svg{width:12px;height:12px}
  .theme-crt-living-room .audio-dock__track strong{font-size:.85rem}
  .theme-crt-living-room .audio-dock__timeline{font-size:.68rem;padding:0 .25rem}
}