/* ==========================================================================
   Mini player - the player bar re-laid out for the floating window
   (Chrome/Edge Picture-in-Picture, body.mini.pip) and the pop-up window
   (popout.html, body.mini.popup). Loaded after main.css.
   It takes on the on-air DJ's colours: --c1/--c2/--c3 are set on #player
   by js/playerui.js (brand colours otherwise).
   main.css's small-screen rules apply in this little window, so the
   overrides below are deliberately specific.
   ========================================================================== */
body.mini{margin:0;min-height:100vh;overflow:hidden;background:#070a16}
body.mini::before{display:none}

body.mini #player{
  --c1:var(--cyan);--c2:var(--indigo);--c3:var(--violet);
  position:relative;inset:auto;height:100vh;min-height:0;padding:14px 16px;gap:12px 14px;
  display:grid;align-items:center;align-content:center;   /* rows hug their content - no stretched gap */
  grid-template-columns:76px minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  grid-template-areas:"art status pop" "eq eq eq" "play vol vol";
  background:
    radial-gradient(260px 200px at 100% 0%,color-mix(in srgb,var(--c2) 42%,transparent),transparent 70%),
    radial-gradient(260px 220px at 0% 100%,color-mix(in srgb,var(--c3) 30%,transparent),transparent 70%),
    linear-gradient(160deg,#0d1128,#080a18);
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.mini #player::after{display:none}

body.mini #menuBtn,body.mini .brand,body.mini .np-hint{display:none!important}

/* artwork: the on-air DJ's photo, or the station logo */
body.mini .art{grid-area:art;display:block;width:76px;height:76px;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c2) 80%,transparent),0 10px 26px -6px color-mix(in srgb,var(--c2) 70%,transparent)}
body.mini .art img{width:100%;height:100%;object-fit:cover;border-radius:0;transform:scale(1.14);transform-origin:50% 35%}   /* slight zoom towards the face */

/* now playing: title up to two lines, Tracklist chip on its own line below */
body.mini .status{grid-area:status;max-width:none;align-self:center}
body.mini .eyebrow{color:color-mix(in srgb,var(--c1) 75%,#fff)}
body.mini #player.on .eyebrow{color:#ff8ea2}
body.mini .np,body.mini .np-title{font-size:15px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.mini .np:has(a){display:block;overflow:visible}   /* linked title: the clamp moves onto .np-title */
body.mini .np a{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
body.mini .np-chip{display:inline-flex!important;margin:0;padding:2px 9px 2px 7px}
body.mini .np-chip span{display:inline!important}

/* pop-out / return button */
body.mini #popout{grid-area:pop;align-self:start;width:32px;height:32px}
body.popup #popout{display:none}

/* equaliser: full width */
body.mini .wave{grid-area:eq;display:block!important;height:auto;padding:0;overflow:visible;align-self:end}
body.mini .eq{height:42px;gap:3px}
body.mini .eq b{flex:1;width:auto}

/* play + volume */
body.mini #play{grid-area:play;width:56px;height:56px}
body.mini #play svg{width:24px;height:24px}
body.mini .vol{grid-area:vol;display:flex!important;margin:0;min-width:0}
body.mini #vol{flex:1;width:auto!important;min-width:60px}
body.mini #volOut{display:inline!important}

/* ---- Shrinking the window: the play button always stays visible ----
   Things are dropped in order: 1) the equaliser, 2) the DJ photo,
   3) everything folds into a single row (play + now playing). */
@media (max-height:231px){
  body.mini .wave{display:none!important}
  body.mini #player{grid-template-areas:"art status pop" "play vol vol"}
}
@media (max-height:177px),(max-width:280px){
  body.mini .art{display:none}
  body.mini #player{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status pop" "play vol"}
  body.mini .np,body.mini .np-title{-webkit-line-clamp:1}
}
@media (max-width:280px) and (min-height:232px){
  /* narrow but tall: keep the equaliser under the title */
  body.mini #player{grid-template-areas:"status pop" "eq eq" "play vol"}
}
@media (max-height:157px){
  body.mini #player{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play status pop";padding:8px 12px}
  body.mini .vol{display:none!important}
  body.mini #play{width:48px;height:48px}
  body.mini .np-chip{display:none!important}   /* no room for a second line; the title is still a link */
}
@media (max-width:230px){
  body.mini .vol{display:none!important}
  body.mini #player{grid-template-areas:"status pop" "play play"}
}