/* =============================================================================================
   Dominion command-deck layer: Knowledge Vault terminals, readout popovers, voice-state glows,
   and stacking-order repairs (mobile sidebar + panel sheets). Additive; touches no existing rule.
   ============================================================================================= */

/* ---- Stacking repairs -------------------------------------------------------------------- */
/* The slide-in archive was fixed-position with no z-index or solid fill, so on the phone it
   opened as an empty pane under the scene layers. Give it a deck of its own. */
@media (max-width: 900px) {
  #sidebar { z-index: 1200; background:
    linear-gradient(180deg, rgba(235, 249, 255, .09), transparent 7%),
    linear-gradient(90deg, #0b1a22, #010709 78%, #071418); overflow-y: auto; }
  #overlay { z-index: 1150; }
  /* THE "blurry pane" ROOT CAUSE (Fred, since the early builds; pinned 2026-07-30): index.html's
     inline `#sidebar.open{z-index:35}` (specificity 1,1,0, and the inline sheet loads after the
     links) beat the plain #sidebar rule above, so the OPEN drawer sat at 35 while the blur scrim
     sat at 1150 — the scrim painted over the whole drawer and all the user ever saw was frosted
     glass. Every drawer child was present and laid out underneath it the entire time. The open
     state must outrank the scrim with room to spare. */
  html body #sidebar.open { z-index: 1200; }
  /* Android repaint trap (Fred's phone, 2026-07-30: hamburger = "just a blurry pane" on a CLEAN
     cache — the scrim shows, the drawer never arrives; desktop at phone width renders fine).
     The drawer carried backdrop-filter + clip-path + a compositor transform slide, and that trio
     is exactly the layer-promotion family Android Chrome mishandles. On phones the drawer now
     slides by plain `left` with no blur and no clip: boring on purpose, and it cannot not-paint.
     transform:none !important because cinematic-05's #sidebar rule sets translateX(-105%) and
     the *-open panel rules (ide/forge/images .css, loaded after this file) set body-scoped
     transforms at higher specificity — the drawer must never ride ANY transform on a phone. */
  #sidebar {
    backdrop-filter: none;
    clip-path: none;
    will-change: auto;
    transform: none !important;
    left: -110%;
    transition: left .22s ease;
  }
  #sidebar.open { left: 0; }

  /* ---- THE CONVERSATION ARCHIVE IS THE DRAWER'S REASON TO EXIST ---------------------------
     Fred, 2026-08-01: "on mobile there is no history of chats available", and starting a new
     chat "seems to delete the chat you were on before and replaces it with the new one".

     Nothing was ever deleted. newChat() unshifts and every previous conversation stays in
     storage and in the list — verified on the rig. What the phone showed was a 42%-of-drawer
     peephole roughly two and a half rows tall, sitting inside a drawer that ALSO scrolls. Two
     nested scrollers on a touch screen means the outer one usually eats the gesture, so the
     list looked like a fixed stub containing one brand-new "New chat" and nothing else. That
     reads exactly like a replaced conversation, which is why the report says "delete".

     On a phone the list therefore takes its natural height and the DRAWER is the single
     scroller. flex:0 0 auto is load-bearing: #sidebar is a flex column, so without it the list
     is shrunk back to the peephole no matter what max-height says. */
  #chatlist {
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
  }
  /* The rail's title is hidden on desktop, where the layout makes the column obvious. On the
     phone the drawer is a modal sheet with no such context, so it says what it is — and now
     carries the count, which is the fastest possible proof that nothing was thrown away. */
  .sb-head { flex-wrap: wrap; }
  .sb-head .h { display: block; width: 100%; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8ba0ae; }
}
/* Panel sheets always sit above the cinematic chrome (telemetry rail z7, footer z8, header z100). */
#smodal, #mmodal, #pmodal, #tmodal, #amodal, #imodal { z-index: 1300; }

/* ---- Header readouts are now interactive ---------------------------------------------------- */
.system-readout .readout { cursor: pointer; }
.readout-pop {
  position: fixed; z-index: 1400; max-width: 340px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(3, 14, 9, .97), rgba(1, 7, 5, .97));
  border: 1px solid rgba(112, 255, 130, .45);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7), 0 0 18px rgba(112, 255, 130, .12), inset 0 1px 0 rgba(190, 255, 205, .12);
  font: 500 11px/1.55 "Cascadia Mono", Consolas, ui-monospace, monospace; color: #a9f7b4;
}
.readout-pop b { display: block; margin-bottom: 6px; color: #70ff82; font-size: 10px; letter-spacing: .16em; text-shadow: 0 0 9px rgba(112, 255, 130, .5); }
.readout-pop span { display: block; color: #8fd39c; }

/* ---- Knowledge Vault terminals -------------------------------------------------------------- */
#vault-panel { position: fixed; inset: 0; z-index: 1350; display: grid; place-items: center; padding: 18px; background: rgba(0, 3, 2, .62); backdrop-filter: blur(3px); }
#vault-panel[hidden] { display: none; }
.vp-frame {
  width: min(760px, 100%); max-height: min(76dvh, 640px); display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(0deg, rgba(112, 255, 130, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(4, 16, 10, .99), rgba(1, 8, 5, .99));
  border: 1px solid rgba(112, 255, 130, .55);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 34px rgba(112, 255, 130, .14), inset 0 1px 0 rgba(200, 255, 210, .14);
}
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid rgba(112, 255, 130, .3); }
.vp-title { color: #70ff82; font: 700 13px/1 "Cascadia Mono", Consolas, ui-monospace, monospace; letter-spacing: .22em; text-shadow: 0 0 12px rgba(112, 255, 130, .55); }
.vp-close { width: 34px; height: 34px; border: 1px solid rgba(112, 255, 130, .4); background: rgba(2, 12, 7, .8); color: #9dffab; font-size: 18px; cursor: pointer; }
.vp-close:hover { box-shadow: 0 0 12px rgba(112, 255, 130, .4); }
.vp-body { flex: 1; min-height: 120px; overflow-y: auto; padding: 13px 15px 16px; font: 500 11.5px/1.6 "Cascadia Mono", Consolas, ui-monospace, monospace; color: #8fe3a0; }
.vp-line { padding: 3px 0; }
.vp-line.cap { color: #70ff82; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 8px rgba(112, 255, 130, .4); }
.vp-line.group { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(112, 255, 130, .25); color: #baffc4; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.vp-line.dim { color: #619e70; }
.vp-line.err { color: #ff9a86; }
.vp-line.hint { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(112, 255, 130, .18); color: #5f9a6e; font-size: 10px; letter-spacing: .06em; }
.vp-row { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; margin: 4px 0; border: 1px solid rgba(112, 255, 130, .16); background: rgba(3, 15, 9, .55); }
.vp-row:hover { border-color: rgba(112, 255, 130, .45); box-shadow: 0 0 10px rgba(112, 255, 130, .12); }
.vp-row b { color: #c9ffd1; font-weight: 600; letter-spacing: .03em; }
.vp-row span { color: #6fae7e; font-size: 10px; letter-spacing: .05em; }
.vp-badge { margin-left: 7px; padding: 1px 5px; border: 1px solid rgba(112, 255, 130, .5); color: #70ff82; font-style: normal; font-size: 8px; letter-spacing: .14em; }
.vp-foot { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-top: 1px solid rgba(112, 255, 130, .3); color: #559565; font: 600 8px/1 "Cascadia Mono", Consolas, ui-monospace, monospace; letter-spacing: .18em; }
.vp-foot i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(112, 255, 130, .8)); box-shadow: 0 0 6px rgba(112, 255, 130, .5); }
.vp-foot i:last-child { background: linear-gradient(90deg, rgba(112, 255, 130, .8), transparent); }

/* ---- Voice controls now show their state ---------------------------------------------------- */
#speak.speakon { border-color: rgba(112, 255, 130, .65) !important; color: #70ff82; box-shadow: 0 0 14px rgba(112, 255, 130, .38), inset 0 1px 0 rgba(210, 255, 220, .18); }
#speak.speakon .glyph { color: #70ff82; filter: drop-shadow(0 0 6px rgba(112, 255, 130, .6)); }
#mic.rec { border-color: rgba(255, 120, 100, .7) !important; color: #ff9a86; animation: vault-rec 1.1s ease-in-out infinite; }
#mic.rec .glyph { color: #ff9a86; filter: drop-shadow(0 0 7px rgba(255, 120, 100, .65)); }
#mic.busy { border-color: rgba(255, 190, 110, .65) !important; color: #ffd29a; box-shadow: 0 0 12px rgba(255, 190, 110, .35); }
@keyframes vault-rec {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 120, 100, .3); }
  50% { box-shadow: 0 0 20px rgba(255, 120, 100, .65); }
}

@media (max-width: 620px) {
  #vault-panel { padding: 10px; }
  .vp-frame { max-height: 84dvh; }
  .readout-pop { max-width: calc(100vw - 24px); }
}

/* ---- The desktop rail must scroll (Fred, 2026-07-31: "guest can't see the whole left sidebar in
   desktop mode. no scroller or ability to scroll").

   dominion-cinematic-02.css sets `overflow:hidden` on #sidebar while the body grid in
   dominion-cinematic-01.css pins that row to 100vh minus 190px, so the rail is a rigid clipped
   box. Only #chatlist scrolls inside it, and it is capped at 42%, which leaves the vault, Prime,
   the guides, work orders and the Setup door in a column with nowhere to go. body{overflow:hidden}
   means the page cannot scroll to reveal them either, so anything past the fold is genuinely
   unreachable rather than merely awkward.

   The <=900px block above already fixed exactly this for the phone drawer. This is its desktop
   twin, which never existed, and that is the whole "fine on my phone, broken on the desktop" story.

   NOT a guest-only fault, despite how it presents: the one role-gated row here (#sb-ide) is
   OWNER-only, so a guest renders one row FEWER than Fred does. What decides who loses the Setup
   button is viewport height and display scaling, which is why a laptop at 125% hits it and a large
   monitor does not. Fixing it at the container repairs it for everyone.

   Two scrollers on purpose: #chatlist keeps its own so a long conversation history stays a
   contained list instead of pushing the Setup door off the bottom of a very tall rail. ---- */
@media (min-width: 901px) {
  #sidebar {
    overflow-y: auto;
    overflow-x: hidden;              /* keeps the clip-path corner clean */
    overscroll-behavior: contain;    /* the rail's own scroll never becomes the page's */
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 255, 91, .25) transparent;
  }
  /* The scroller above only helps if the rail's modules KEEP their height. They are flex children
     of a too-short column, so at 720p-and-under they were each squeezed instead: #chatlist
     collapsed to an 8px sliver (a guest read that as "my session history is gone" — it was
     present, 8 pixels tall) and .sb-head crushed the New button's three-line label into
     overlapping clipped rows that read as gibberish ("START A NEW CONVERSA|OR..."). Modules now
     refuse to shrink and the rail scrolls, which is what the scroller was for all along. */
  #sidebar > * { flex-shrink: 0; }
  /* The archive stays the one compressible region so a short rail is mostly history + doors, but
     it can never again be squeezed below roughly three visible conversations. */
  #chatlist { flex-shrink: 1; min-height: 140px; }
}