/* Listen-session window and dock surfaces that used to ship as an injected <style>.
   scripts/build.mjs ensure: views-listen-sessions hashes this file and links it
   AFTER views-admin — the cascade position that <style> had — so
   equal-specificity rules still win. Dev, with no hashed link yet,
   appends <link href="styles/views-listen-sessions.css">.
   Breakpoints stay the px values the sheet already used. */

.m-listenpanel { position:fixed; top:64px; right:16px; z-index:120; width:360px; max-width:calc(100vw - 32px);
  background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg, 0 12px 40px rgba(0,0,0,.45)); display:flex; flex-direction:column; }
.m-listenpanel[hidden] { display:none; }
.m-lp-head { display:flex; align-items:center; gap:6px; padding:10px 12px; cursor:move;
  border-bottom:1px solid var(--border-subtle); }
.m-lp-head .t { display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; color:var(--text-1);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-lp-head .spacer { flex:1; }
.m-lp-x { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px;
  display:flex; align-items:center; border-radius:var(--r-sm); }
.m-lp-x:hover { color:var(--text-1); background:var(--bg-hover, rgba(255,255,255,.06)); }
.m-lp-body { padding:12px; max-height:min(72vh, 620px); overflow-y:auto; }
.m-lp-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--border-subtle); }
.m-lp-closehint { font-size:11px; color:var(--text-muted); padding:0 12px 10px; margin:0; }

.lp-dock { position:fixed; right:16px; bottom:16px; z-index:119; display:flex; flex-direction:column;
  align-items:flex-end; gap:6px; max-width:calc(100vw - 32px); }
.lp-dock[hidden] { display:none; }
.lp-dock-chip { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 12px;
  background:var(--bg-card); color:var(--text-1); border:1px solid var(--border-strong);
  border-radius:var(--r-pill); box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35));
  font-family:var(--font-mono); font-size:12px; cursor:pointer; }
.lp-dock-chip:focus-visible { outline:none; box-shadow:var(--ring); }
.lp-dock-rec { display:inline-flex; align-items:center; gap:5px; color:var(--danger); font-weight:700; letter-spacing:.06em; }
.lp-dock-list { display:flex; flex-direction:column; gap:2px; width:360px; max-width:100%; max-height:50vh;
  overflow-y:auto; padding:6px; background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg, 0 12px 40px rgba(0,0,0,.45)); box-sizing:border-box; }
.lp-dock-list[hidden] { display:none; }
.lp-dock-row { display:flex; align-items:center; gap:8px; padding:6px; border-radius:var(--r-sm); flex-wrap:wrap; }
.lp-dock-row:hover { background:var(--bg-hover, rgba(255,255,255,.04)); }
.lp-dock-main { flex:1 1 140px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lp-dock-name { font-size:12px; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-dock-st { font-family:var(--font-mono); font-size:11px; color:var(--text-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lp-dock-acts { display:flex; gap:4px; flex-wrap:wrap; }
.lp-dock-acts .btn { min-height:30px; padding:4px 8px; font-size:12px; }
@media (max-width:760px) {
  body:has(.tabbar) .lp-dock { bottom:calc(12px + var(--tabbar-h, 51px) + var(--safe-bottom, 0px)); }
  /* Phones: the dock chip floats over the page's bottom edge, so while it shows
     (body.lp-dock-on, setDockReserve) the page keeps that strip free: the scrolling
     view on ordinary pages, the Monitor's own scroll body (.m-body, already 20px)
     on the immersive Live page — its chart flexes, the header never moves. The
     expanded list is a transient overlay and reserves nothing. */
  body.lp-dock-on:not(.app-immersive) #app > .view { padding-bottom:var(--lp-dock-reserve); }
  body.lp-dock-on .m-body { padding-bottom:calc(20px + var(--lp-dock-reserve)); }
}
:root { --lp-dock-reserve:calc(var(--tap-min, 44px) + 16px); }
@media (pointer:coarse), (max-width:760px) {
  .lp-dock-chip, .lp-dock-acts .btn { min-height:var(--tap-min, 44px); }
  .m-lp-x { min-width:var(--tap-min, 44px); min-height:var(--tap-min, 44px); justify-content:center; }
}