@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

/* =========================
   GLOBAL THEME + SIZES
   ========================= */
:root{
  --accent:#ef4444;
  --accent-contrast:#ffffff;
  --accent-ring:rgba(239,68,68,.35);
  --live-alpha:.45;

  --btn-size:56px;
  --btn-ring-size:78px;
  --btn-nudge:5px;
  --progress-height:6px;

  --pad-x:16px;
  --grid-gap:16px;
  --art:60px;
  --reserve-right:30px;
  --player-max:720px;

  --title-size:1rem;
  --artist-size:.9rem;

  --compact-width:420px;

  --drag-margin:12px;
}

/* =========================
   SHARED BASE
   ========================= */
#site-player{
  user-select:none;
  pointer-events:auto;
  width:min(var(--player-max),96vw);
  max-width:min(var(--player-max),96vw);
  will-change:transform;
}
#site-player.bh-floating{ position:fixed; z-index:1040; }
#site-player .title{ color:#f3f4f6 }
#site-player .artist{ color:#a6adbb }

.glass-player{
  --glass-bg:rgba(20,20,24,.72);
  --glass-border:rgba(255,255,255,.08);

  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  backdrop-filter:blur(8px);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;
  color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  padding-right:var(--reserve-right);
}

/* window controls */
#site-player .bh-win-controls{
  position:absolute; top:8px; right:130px; z-index:20; display:flex; gap:8px;
}
#site-player .bh-icon-btn{
  width:30px; height:30px; border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); color:#f3f4f6;
  display:inline-flex; align-items:center; justify-content:center;
}
#site-player .bh-icon-btn:hover{ background:rgba(255,255,255,.18) }

/* drag handle (works in normal + compact) */
#site-player .bh-drag-handle{
  width:72px; height:10px; margin:6px auto 7px;
  border-radius:9999px; background:rgba(230,75,75,.84);
  box-shadow:inset 0 0 0 1px rgba(255,5,5,.87);
  cursor:grab; touch-action:none;
}
#site-player.dragging .bh-drag-handle{ cursor:grabbing }

/* floating presets */
#site-player.bh-floating.top-center{
  left:50%; transform:translateX(-50%);
  top:calc(var(--nav-bottom,56px) + 8px);
}
#site-player.bh-floating.bottom-center{
  left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* inert progress + LIVE visuals */
#site-player .progress{ cursor:default; }
#site-player .progress, #site-player .progress *{ pointer-events:none; }
#site-player.is-live .progress{ opacity:.9; }
#site-player .bh-live-inline{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:9999px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(90deg, rgba(239,68,68,var(--live-alpha)), rgba(220,38,38,var(--live-alpha)));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
#site-player .bh-live-inline::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; opacity:.95;
}

/* unknown duration stripes */
#site-player:not(.has-duration) .progress .progress-bar{
  width:100%; position:relative; overflow:hidden;
}
#site-player:not(.has-duration) .progress .progress-bar::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent);
  background-size:22px 22px; animation:bhLiveStripe 1.1s linear infinite; mix-blend-mode:screen;
}
@keyframes bhLiveStripe{ from{ background-position:0 0; } to{ background-position:22px 0; } }

/* play/pause swap */
#site-player .btn-round #icon-pause{ display:none; }
#site-player.is-playing .btn-round #icon-play{ display:none; }
#site-player.is-playing .btn-round #icon-pause{ display:inline; }

/* marquee (no extra DOM) */
#site-player .title.marquee,
#site-player .artist.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  visibility:hidden;
}
#site-player .title.marquee::after,
#site-player .artist.marquee::after{
  visibility:visible; content:attr(data-scroll);
  position:absolute; inset:0 auto 0 0; white-space:nowrap;
  animation:bhMarquee 16s linear infinite;
}
@keyframes bhMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================
   NORMAL PLAYER
   ========================= */
#site-player .bh-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:var(--grid-gap);
  min-height:72px;
  padding-inline:var(--pad-x);
}
#site-player .bh-meta{ min-width:0; }

#site-player img#site-radio-art{
  width:var(--art); height:var(--art);
  object-fit:cover; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}

#site-player .title{
  font-weight:600; margin:0; line-height:1.15;
  font-size:var(--title-size);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#site-player .artist{
  font-size:var(--artist-size);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#site-player .btn-round{
  --btn-bg:var(--accent);
  width:var(--btn-size); height:var(--btn-size);
  border:none; outline:none; cursor:pointer; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--btn-bg); color:#000;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  position:relative; transition:transform .08s ease;
  transform:translateY(var(--btn-nudge));
}
#site-player .btn-round::before{
  content:""; position:absolute; inset:calc((var(--btn-size) - var(--btn-ring-size))/2);
  border-radius:9999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 0 12px var(--accent-ring);
  pointer-events:none; z-index:1;
}
#site-player .btn-round svg{ width:100%; height:100%; position:relative; z-index:2; display:block; }

#site-player .bh-times{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  column-gap:.5rem; row-gap:.25rem;
  align-items:center; margin-top:.35rem;
}
#site-player #site-radio-elapsed{ grid-column:1; grid-row:1; }
#site-player #site-radio-duration{ grid-column:3; grid-row:1; justify-self:end; }
#site-player #bh-live-badge{ grid-column:3; grid-row:1; justify-self:end; margin-inline-start:.5rem; z-index:2; margin-right:1.1rem; }

#site-player .bh-times .progress{ grid-column:1 / -1; grid-row:2; }
#site-player .progress{
  height:var(--progress-height);
  width:96%;
  background:rgba(255,255,255,.18);
  border-radius:9999px; overflow:hidden;
}
#site-player .progress .progress-bar{ background:var(--accent); }

/* NORMAL knobs */
#site-player{
  --vol-x:10px; --vol-y:-5px; --vol-gap:.5rem;
  --vol-track-h:4px; --vol-thumb:12px; --vol-width:95px; --vol-icon-scale:1.5;
  --meta-y:0px;
}
#site-player .vol-row{
  display:flex; align-items:center; gap:var(--vol-gap);
  transform:translate(var(--vol-x), var(--vol-y));
  margin-top:1rem;
  padding-left:calc(var(--pad-x) + var(--art) + var(--grid-gap));
  padding-right:var(--reserve-right);
}
#site-player .form-range{
  appearance:none; height:var(--vol-track-h); padding:0;
  background:rgba(255,255,255,.18);
  border-radius:9999px; outline:none;
  width:var(--vol-width); max-width:calc(100% - 180px);
}
#site-player .form-range::-webkit-slider-thumb{
  appearance:none; width:var(--vol-thumb); height:var(--vol-thumb);
  border-radius:50%; background:var(--accent); border:2px solid var(--accent-contrast);
}
#site-player .form-range::-moz-range-track{
  width:100%; height:var(--vol-track-h); background-color:#cc4d4d; border-radius:1rem;
}
#site-player .form-range::-moz-range-thumb{
  width:var(--vol-thumb); height:var(--vol-thumb);
  border-radius:50%; background:#fff; border:2px solid var(--accent-contrast);
}
#site-player .form-range.with-fill{
  background:linear-gradient(to right,var(--accent) 50%,rgba(255,255,255,.18) 50%);
}
#site-player .vol-icon{
  width:28px; height:28px; border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
}
#site-player .vol-icon svg{
  transform:scale(var(--vol-icon-scale));
  transform-origin:center;
}
#site-player .vol-icon.is-muted{ color:#fff; opacity:.9; }
#site-player .bh-meta{ transform:translateY(var(--meta-y)); margin-left: 11px;}

/* POP-OUT & MOBILE */
body.popout #site-player .bh-win-controls{ display:none; }
body.popout #site-player{ position:static; transform:none; width:min(var(--player-max),96vw); max-width:min(var(--player-max),96vw); }
body.popout #site-player.min{ all:unset; display:block; width:min(620px,96vw); max-width:min(620px,120vw); margin:0 auto; }

@media (max-width:768px), (pointer:coarse){
  :root{
    --pad-x:12px; --grid-gap:12px; --art:44px;
    --btn-size:56px; --btn-ring-size:72px;
    --progress-height:8px; --reserve-right:56px;
    --title-size:1rem; --artist-size:.9rem;
  }
  #site-player .bh-row{ min-height:64px; }
  #site-player .bh-win-controls{ display:none; }
}

/* =========================
   COMPACT PLAYER
   ========================= */
#site-player.min{
  --compact-width:420px;
  --compact-title-size:.95rem;
  --compact-artist-size:.8rem;

  /* compact volume knobs */
  --vol-x:18px; --vol-y:-7px; --vol-gap:.45rem;
  --vol-track-h:4px; --vol-thumb:10px; --vol-width:64px; --vol-icon-scale:1.3;
}

#site-player.min{ display:inline-block; width:auto; max-width:none; }
#site-player.min .glass-player{
  height:67px;
  width:min(var(--compact-width), calc(100vw - 2 * var(--drag-margin)));
  box-sizing:border-box; overflow:hidden;
  display:flex; align-items:center; gap:8px; position:relative;
  padding:4px 10px;
  cursor:grab;               /* drag affordance */
  touch-action:none;         /* critical for mobile drag */
}
#site-player.min.dragging .glass-player,
#site-player.min.drag-intent .glass-player{ cursor:grabbing; }

#site-player.min .bh-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:.5rem; min-height:auto; padding-inline:8px;
  flex:1 1 auto; min-width:0;
}
#site-player.min #site-radio-art{ display:none; }
#site-player.min .bh-times{ display:none; }

#site-player.min .title{
  font-size:var(--compact-title-size);
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#site-player.min .artist{
  font-size:var(--compact-artist-size);
  display:block; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#site-player.min .btn-round{
  --btn-size:32px; --btn-ring-size:44px;
  order:-1; margin-right:.5rem; transform:none;
  width:var(--btn-size); height:var(--btn-size);
}
#site-player.min .btn-round svg{ width:100%; height:100%; }
#site-player.min .vol-row{
  margin-left:auto; display:flex; align-items:center; gap:var(--vol-gap);
  transform:translate(var(--vol-x), var(--vol-y)); padding:0 6px 0 0;
  width: 76px; --vol-x: 47px; --vol-y: 4px;
}
#site-player.min .form-range{ width:var(--vol-width); height:var(--vol-track-h); max-width:100%; }
#site-player.min .form-range::-webkit-slider-thumb{ width:var(--vol-thumb); height:var(--vol-thumb); }
#site-player.min .form-range::-moz-range-thumb{ width:var(--vol-thumb); height:var(--vol-thumb); }
#site-player.min .vol-icon svg{ transform:scale(var(--vol-icon-scale)); transform-origin:center; }

/* compact handle */
#site-player.min .bh-drag-handle{
  display:block; position:absolute; left:50%; transform:translateX(-50%);
  top:-6px; width:56px; height:8px; border-radius:9999px;
  background:rgba(239,68,68,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  z-index:25;
}

/* compact controls inline on right */
#site-player.min .bh-win-controls{
  position:static; transform:none; top:auto; right:auto;
  order:3; display:flex; gap:8px; margin-left:27px; flex:0 0 auto;
  margin-top: -33px; margin-right: -120px; /* align with drag handle */
}
#site-player.min .bh-icon-btn{ width:26px; height:26px; border-radius:8px; }

/* compact floating presets (tight) */
#site-player.min.top-center{ left:50%; transform:translateX(-50%); top:calc(var(--nav-bottom,56px) - 8px); }
#site-player.min.bottom-center{ left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 8px); }

/* drag state helpers */
body.user-dragging{ user-select:none; -webkit-user-select:none; cursor:grabbing; }

/* ================================================================
   MOBILE LAYER (compact is default; normal is opt-in with .m-normal)
   Artwork appears BEFORE Volume (after meta) in compact.
================================================================ */
@media (max-width: 768px), (pointer: coarse) {
  /* Tokens for mobile */
  #site-player{
    --m-pad:12px;
    --m-gap:12px;
    --m-art:44px;
    --m-progress:8px;
    --m-title:1rem;
    --m-artist:.9rem;

    --m-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
    --m-side-l:max(12px, env(safe-area-inset-left));
    --m-side-r:max(12px, env(safe-area-inset-right));

    /* compact pill nudges */
    --m-play-x:0px; --m-play-y:0px; --m-play-scale:1;
    --m-meta-x:0px; --m-meta-y:0px;

    /* right-side layout: [ ... META ][ ART ][ VOLUME ] */
    --m-tail-gap:8px;      /* gap between ART and VOLUME */
    --m-vol-reserve:104px; /* space needed by mute+slider block */
  }

  /* Bottom-center placement (CSS-driven) */
  #site-player.bh-floating.bottom-center{
    inset-inline: var(--m-side-l) var(--m-side-r);
    bottom: var(--m-bottom);
    left:auto !important; right:auto !important; transform:none !important;
  }

  /* hide desktop-only bits on phones */
  #site-player .bh-win-controls,
  #site-player .bh-drag-handle{ display:none !important; }

  /* ---------- MOBILE COMPACT (default) ---------- */
  #site-player.m-compact,
  #site-player:not(.m-normal){
    --compact-title-size:.95rem;
    --compact-artist-size:.8rem;
  }

  /* reserve right space for [ ART + gap + VOLUME ] */
  #site-player.m-compact .glass-player,
  #site-player:not(.m-normal) .glass-player{
    width:100%; max-width:none; height:64px;
    padding:6px 10px;
    padding-right: calc(var(--m-art) + var(--m-tail-gap) + var(--m-vol-reserve));
    display:flex; align-items:center; position:relative;
  }

  /* Play + Meta grid (art/volume are absolutely positioned) */
  #site-player.m-compact .bh-row,
  #site-player:not(.m-normal) .bh-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"play meta";
    column-gap:.5rem; padding-inline:8px; min-height:auto;
  }

  #site-player.m-compact #site-radio-btn,
  #site-player:not(.m-normal) #site-radio-btn{
    --btn-size:32px; --btn-ring-size:44px;
    width:var(--btn-size); height:var(--btn-size);
    transform: translate(var(--m-play-x), var(--m-play-y)) scale(var(--m-play-scale));
  }

  #site-player.m-compact .bh-meta,
  #site-player:not(.m-normal) .bh-meta{
    min-width:0;
    transform: translate(var(--m-meta-x), var(--m-meta-y));
  }
  #site-player.m-compact .title,
  #site-player:not(.m-normal) .title{ font-size:var(--compact-title-size); }
  #site-player.m-compact .artist,
  #site-player:not(.m-normal) .artist{ font-size:var(--compact-artist-size); }

  /* time row hidden in compact */
  #site-player.m-compact .bh-times,
  #site-player:not(.m-normal) .bh-times{ display:none; }

  /* --- ARTWORK before VOLUME (to the right of meta) --- */
  #site-player.m-compact #site-radio-art,
  #site-player:not(.m-normal) #site-radio-art{
    display:block !important;
    position:absolute;
    right: calc(var(--m-vol-reserve) + var(--m-tail-gap));
    top: 50%;
    transform: translateY(-50%);
    width: var(--m-art);
    height: var(--m-art);
    object-fit: cover;
    border-radius:8px;
  }

  /* VOLUME at the far right */
  #site-player.m-compact .vol-row,
  #site-player:not(.m-normal) .vol-row{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    display:flex !important;
    gap:.45rem;
    margin:0 !important; padding:0 !important;
  }
  #site-player.m-compact .form-range,
  #site-player:not(.m-normal) .form-range{
    height:4px; width:64px; max-width:100%;
  }

  /* ---------- MOBILE NORMAL (opt-in with .m-normal) ---------- */
  #site-player.m-normal{
    --title-size:var(--m-title);
    --artist-size:var(--m-artist);
  }
  #site-player.m-normal .glass-player{
    width:100%; max-width:none; padding:8px var(--m-pad) 10px;
  }
  #site-player.m-normal .bh-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"art meta play";
    column-gap:var(--m-gap); min-height:64px;
  }
  #site-player.m-normal #site-radio-art{
    display:block; position:static;
    width:var(--m-art); height:var(--m-art);
  }
  #site-player.m-normal .bh-times{ margin-top:.25rem; }
  #site-player.m-normal .progress{ height:var(--m-progress); }

  /* if you want separate nudges for mobile-normal, reuse these: */
  #site-player{
    --mn-play-x: var(--m-play-x);
    --mn-play-y: var(--m-play-y);
    --mn-play-scale: var(--m-play-scale);
    --mn-meta-x: var(--m-meta-x);
    --mn-meta-y: var(--m-meta-y);
  }
  #site-player.m-normal #site-radio-btn{
    transform: translate(var(--mn-play-x), var(--mn-play-y)) scale(var(--mn-play-scale));
  }
  #site-player.m-normal .bh-meta{
    transform: translate(var(--mn-meta-x), var(--mn-meta-y));
  }
}

/* =========================
   DESKTOP-ONLY: compact mode
   Show artwork before volume (after meta)
   ========================= */
@media (min-width: 769px) and (pointer: fine) {
  /* spacing knobs for the right side */
  :root{
    --c-tail-gap: 8px;      /* gap between ART and VOLUME */
    --c-vol-reserve: 120px; /* space for mute+slider block */
  }

  /* reserve space on the right for [ ART + gap + VOLUME ] */
  #site-player.min .glass-player{
    padding-right: calc(var(--art) + var(--c-tail-gap) + var(--c-vol-reserve));
  }

  /* show & place artwork just left of the volume block */
  #site-player.min #site-radio-art{
    display: block !important;                 /* overrides the earlier display:none */
    position: absolute;
    right: calc(var(--c-vol-reserve) + var(--c-tail-gap));
    left: 357px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--art);
    height: var(--art);
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
    z-index: 2;
  }

  /* pin volume to the far right in compact */
  #site-player.min .vol-row{
    position: absolute;
    right: 103px;
    top: 75%;
    transform: translateY(-50%);  /* kill the old translate(var(--vol-x),var(--vol-y)) */
    margin: 0 !important;
    padding: 0 !important;
    gap: .45rem;
  }
}

/* =========================
   MOBILE: hide volume/mute completely
   (place AFTER your current mobile blocks)
   ========================= */
@media (max-width: 768px), (pointer: coarse) {
  /* 1) Hide the whole volume row everywhere on mobile */
  #site-player .vol-row,
  #site-player.m-compact .vol-row,
  #site-player:not(.m-normal) .vol-row,
  #site-player.m-normal .vol-row {
    display: none !important;
  }

  /* 2) Remove right-side space that was reserved for volume */
  #site-player {
    --m-vol-reserve: 0px;   /* no volume width to reserve */
    --m-tail-gap: 12px;     /* keep a small edge padding next to artwork */
  }

  /* 3) Since vol is gone, let the artwork sit near the right edge */
  #site-player.m-compact #site-radio-art,
  #site-player:not(.m-normal) #site-radio-art {
    right: var(--m-tail-gap);
  }

  /* 4) And shrink the pill’s right padding (art only, no volume) */
  #site-player.m-compact .glass-player,
  #site-player:not(.m-normal) .glass-player {
    padding-right: calc(var(--m-art) + var(--m-tail-gap));
  }
}

/* =========================
   POP-OUT: force NORMAL layout
   ========================= */
body.popout #site-player{
  max-width: 720px;
  margin: 0 auto;
}

body.popout #site-player .bh-win-controls,
body.popout #site-player .bh-drag-handle{
  display: none !important;           /* no window buttons/handle in popout */
}

/* Normal card spacing in popout (no “reserve-right”) */
body.popout #site-player .glass-player{
  padding: 8px var(--pad-x) 10px;     /* same feel as normal */
  padding-right: var(--pad-x);        /* remove right reserve */
}

/* Normal grid: ART | META | PLAY */
body.popout #site-player .bh-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "art meta play";
  align-items: center;
  column-gap: var(--grid-gap);
  min-height: 72px;
  padding-inline: var(--pad-x);
}

body.popout #site-player #site-radio-art{
  grid-area: art;
  display: block !important;
  position: static;                   /* undo any absolute from compact */
  width: var(--art);
  height: var(--art);
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}

body.popout #site-player .bh-meta{
  grid-area: meta;
  min-width: 0;
}

body.popout #site-player #site-radio-btn{
  grid-area: play;
  --btn-size: 56px;
  --btn-ring-size: 78px;
  transform: translateY(var(--btn-nudge)); /* standard nudge */
}

/* Time + progress just like normal */
body.popout #site-player .bh-times{ margin-top: .35rem; }
body.popout #site-player .progress{ height: var(--progress-height); }

/* Volume row below meta, not overlaid; wider slider for comfort */
body.popout #site-player .vol-row{
  position: static;                   /* not absolute like compact */
  display: flex !important;
  align-items: center;
  gap: var(--vol-gap);
  transform: none;
  margin-top: .75rem;
  padding-left: calc(var(--pad-x) + var(--art) + var(--grid-gap));
  padding-right: var(--pad-x);
}

body.popout #site-player .form-range{
  width: 160px;                       /* a little wider in popout */
  max-width: 45vw;
}

/* =========================
   POP-OUT: hard-normalize (even if .min sneaks in)
   ========================= */
body.popout #site-player{
  max-width: var(--player-max);
  margin: 0 auto;
}
body.popout #site-player .bh-win-controls,
body.popout #site-player .bh-drag-handle{ display:none !important; }

body.popout #site-player .glass-player{
  padding: 8px var(--pad-x) 10px;      /* same spacing as normal */
  padding-right: var(--pad-x);
  height: auto;
  cursor: default;
}

/* Force normal grid & bits even if .min is present */
body.popout #site-player.min .bh-row,
body.popout #site-player .bh-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:var(--grid-gap);
  min-height:72px;
  padding-inline:var(--pad-x);
}
body.popout #site-player.min #site-radio-art,
body.popout #site-player #site-radio-art{
  display:block !important;
  position:static;
  width:var(--art);
  height:var(--art);
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
body.popout #site-player .bh-meta{ min-width:0; } /* enables marquee overflow */
body.popout #site-player.min .bh-times,
body.popout #site-player .bh-times{ display:grid; margin-top:.35rem; }
body.popout #site-player .progress{ height:var(--progress-height); }

/* Volume row: inline under meta, comfortable width */
body.popout #site-player.min .vol-row,
body.popout #site-player .vol-row{
  position:static;
  display:flex !important;
  align-items:center;
  gap:var(--vol-gap);
  transform:none;
  margin-top:.75rem;
  padding-left: calc(var(--pad-x) + var(--art) + var(--grid-gap));
  padding-right: var(--pad-x);
}
body.popout #site-player .form-range{
  width:160px;
  max-width:45vw;
}