/* =============================================================================
 *  SG rail — the persistent conversation column for the 43" screen.
 *
 *  SG on the left, the tab on the right, both scrolling independently: talk to
 *  SG and work the list without switching windows. Deliberately dark on every
 *  tab, light or not — it reads as a console beside the document rather than a
 *  panel inside it, and it matches the full-screen SG tab.
 *
 *  Layout is done with a fixed column plus body padding rather than by
 *  restructuring each page's DOM: six tabs with six different internal layouts
 *  all keep working, and a new tab inherits this for free.
 * ========================================================================== */

.s3-rail{
  --r-plane:#05080f; --r-line:rgba(120,180,220,.14); --r-line-2:rgba(120,180,220,.26);
  --r-ink:#e8eef6; --r-ink-2:#9fb2c8; --r-muted:#677c93;
  --r-hud:#0f86ac; --r-hud-2:#0aa0c8; --r-accent:#b8921a; --r-warn:#c89b5a;
  --r-mono:"Cascadia Code","Cascadia Mono",ui-monospace,Consolas,monospace;

  /* starts BELOW the tab strip — the strip keeps the full width of the screen
     so no tab is ever hidden behind SG. --s3-tabs-h is measured in sg-rail.js,
     because the strip wraps to two rows at some widths. */
  position:fixed; left:0; top:var(--s3-tabs-h,52px); bottom:0;
  width:var(--s3-rail-w,400px); z-index:60;
  display:none; flex-direction:column; color:var(--r-ink);
  background:var(--r-plane); border-right:1px solid var(--r-line-2);
  background-image:
    radial-gradient(600px 380px at 40% -10%, rgba(15,134,172,.16), transparent 62%),
    radial-gradient(420px 300px at 100% 105%, rgba(26,48,88,.45), transparent 60%);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body.s3-split .s3-rail{display:flex}
body.s3-split{padding-left:var(--s3-rail-w,400px)}

/* The tab strip is a child of body, so body's padding would push it off the
   right end of the screen and hide its left tabs under the rail. Pull it back
   by exactly the rail width: full width, above the rail, nothing cut off.
   Sticky as well — on a 43" you scroll a long way, and the tabs should still
   be there when you arrive. */
body.s3-split .s3-tabs{
  margin-left:calc(-1 * var(--s3-rail-w,400px));
  position:sticky; top:0; z-index:70;
}
/* pages with their own sticky bar (home, HPD) dock below the strip, not under it */
body.s3-split .bar{top:var(--s3-tabs-h,52px)}

/* the tab's own content scales for viewing distance; the rail stays put */
body.s3-split .wrap{max-width:var(--s3-content-max,1600px); zoom:var(--s3-zoom,1)}

/* the home page already carries an SG panel — one SG per screen is enough */
body.s3-split #comms{display:none}

/* ---------- header ---------- */
.s3r-top{
  display:flex; align-items:center; gap:9px; padding:13px 15px;
  border-bottom:1px solid var(--r-line); flex:none;
}
.s3r-mark{font-family:var(--r-mono); font-size:12px; letter-spacing:.18em; font-weight:700; white-space:nowrap}
.s3r-mark b{color:var(--r-accent); font-weight:700}
/* Connection only — the detailed status lives under the orb, so a narrow rail
   isn't saying "listening for wake word" twice. */
.s3r-status{
  font-family:var(--r-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--r-hud-2); display:flex; align-items:center; gap:6px; margin-left:auto;
  white-space:nowrap;
}
.s3r-status i{width:6px; height:6px; border-radius:50%; background:var(--r-hud-2); flex:none}
.s3r-status.off{color:var(--r-warn)} .s3r-status.off i{background:var(--r-warn)}
.s3r-x{
  font-family:var(--r-mono); font-size:12px; line-height:1; cursor:pointer; padding:4px 7px;
  color:var(--r-muted); background:none; border:1px solid var(--r-line); border-radius:6px;
}
.s3r-x:hover{color:var(--r-ink); border-color:var(--r-line-2)}

/* ---------- orb ---------- */
.s3r-orbwrap{display:flex; align-items:center; gap:14px; padding:14px 15px; border-bottom:1px solid var(--r-line); flex:none}
.s3r-orb{--lv:0; position:relative; width:64px; height:64px; border-radius:50%; flex:none;
  display:grid; place-items:center; transform:scale(calc(1 + var(--lv) * .10)); transition:transform .18s}
.s3r-orb .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--r-line-2)}
.s3r-orb .ring.r2{inset:14%; border-color:rgba(15,134,172,.3)}
.s3r-orb .core{width:52%; height:52%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.3), transparent 48%),
             radial-gradient(circle at 50% 50%, var(--r-hud-2), #1a3058 72%);
  box-shadow:0 0 24px rgba(15,134,172,.35), inset 0 0 14px rgba(0,0,0,.45); transition:filter .3s}
.s3r-orb .sweep{position:absolute; inset:6%; border-radius:50%; border:2px solid transparent;
  border-top-color:var(--r-hud-2); opacity:0; animation:s3r-spin 1.5s linear infinite}
.s3r-orb .pulse{position:absolute; inset:0; border-radius:50%; border:1px solid var(--r-hud-2); opacity:0}
@keyframes s3r-spin{to{transform:rotate(360deg)}}
@keyframes s3r-ripple{0%{transform:scale(.72);opacity:.5}100%{transform:scale(1.25);opacity:0}}
@keyframes s3r-breathe{0%,100%{opacity:.32}50%{opacity:.6}}
.s3r-orb[data-s="idle"] .core{filter:saturate(.55) brightness(.7)}
.s3r-orb[data-s="idle"] .ring.r2{animation:s3r-breathe 4.5s ease-in-out infinite}
.s3r-orb[data-s="listening"] .pulse{animation:s3r-ripple 1.5s ease-out infinite}
.s3r-orb[data-s="thinking"] .sweep{opacity:1}
.s3r-orb[data-s="speaking"] .core{filter:saturate(1.35) brightness(1.2)}
.s3r-orb[data-s="speaking"] .pulse{animation:s3r-ripple 1s ease-out infinite}
.s3r-orb[data-s="offline"] .core{filter:grayscale(.85) brightness(.4)}
.s3r-state{min-width:0}
.s3r-state .s{font-family:var(--r-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--r-hud-2)}
.s3r-state .s.off{color:var(--r-warn)}
.s3r-state .d{font-size:11.5px; color:var(--r-muted); margin-top:4px; line-height:1.4}
.s3r-bars{display:flex; gap:2px; align-items:flex-end; height:14px; margin-top:7px}
.s3r-bars i{display:block; width:2px; border-radius:1px; background:var(--r-hud); height:2px; opacity:.5;
  transition:height .1s linear, opacity .1s linear}

/* ---------- transcript ---------- */
.s3r-log{flex:1; overflow-y:auto; padding:14px 15px; display:flex; flex-direction:column; gap:13px; min-height:0}
.s3r-log::-webkit-scrollbar{width:7px}
.s3r-log::-webkit-scrollbar-thumb{background:rgba(120,180,220,.16); border-radius:4px}
.s3r-msg .who{font-family:var(--r-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--r-muted); margin-bottom:4px}
.s3r-msg .body{font-size:13px; line-height:1.5; color:var(--r-ink-2);
  border-left:2px solid var(--r-line-2); padding-left:10px; white-space:pre-wrap}
.s3r-msg.you .who{color:var(--r-accent)}
.s3r-msg.you .body{border-left-color:rgba(184,146,26,.5); color:var(--r-ink)}
.s3r-msg.sg .who{color:var(--r-hud-2)}
.s3r-msg.sg .body{border-left-color:rgba(10,160,200,.5)}
.s3r-msg.sys .body{color:var(--r-muted); font-style:italic; border-left-color:var(--r-line)}
.s3r-empty{color:var(--r-muted); font-size:12.5px; line-height:1.7; text-align:center; margin-top:24px}
.s3r-empty code{font-family:var(--r-mono); color:var(--r-hud-2); background:rgba(15,134,172,.1);
  padding:2px 6px; border-radius:5px}

/* ---------- input ---------- */
.s3r-bar{display:flex; gap:7px; padding:11px 15px; border-top:1px solid var(--r-line);
  background:rgba(0,0,0,.28); flex:none}
.s3r-bar input{flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid var(--r-line-2);
  border-radius:8px; color:var(--r-ink); font:13px inherit; padding:9px 11px}
.s3r-bar input::placeholder{color:var(--r-muted)}
.s3r-bar input:focus-visible{outline:none; border-color:var(--r-hud-2)}
.s3r-bar button{font-family:var(--r-mono); font-size:11px; font-weight:700; cursor:pointer;
  color:#04222c; background:var(--r-hud-2); border:none; border-radius:8px; padding:0 13px}
.s3r-bar button.ghost{background:rgba(255,255,255,.05); border:1px solid var(--r-line-2); color:var(--r-ink-2); font-size:14px}
.s3r-bar button:disabled{opacity:.45; cursor:default}

/* ---------- the toggle + size control that live in the tab strip ---------- */
.s3-tab.s3-splitbtn.on{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12)}
.s3-sizebtn{display:none}
body.s3-split .s3-sizebtn{display:inline-flex}

/* The rail narrows before it disappears. David's 43" reports ~1152 CSS px
   (2880 physical at ~250% Windows scaling), so "big monitor" and "many CSS
   pixels" are not the same thing — sizing has to follow the viewport it
   actually gets, not the diagonal of the panel. */
@media (max-width:1500px){ .s3-rail{--s3-rail-w:340px} body.s3-split{--s3-rail-w:340px} }
@media (max-width:1100px){ .s3-rail{--s3-rail-w:300px} body.s3-split{--s3-rail-w:300px} }

/* Only genuinely small screens (tablet, phone) refuse to split. */
@media (max-width:900px){
  body.s3-split{padding-left:0}
  body.s3-split .s3-rail{display:none}
  body.s3-split #comms{display:block}
  body.s3-split .wrap{zoom:1}
  /* if the class outlives a resize, the strip must not keep its negative pull */
  body.s3-split .s3-tabs{margin-left:0; position:static}
  body.s3-split .bar{top:0}
  .s3-splitbtn, .s3-sizebtn{display:none !important}
}
@media print{ .s3-rail{display:none !important} body.s3-split{padding-left:0} }