/* Perslis public demo: page chrome + responsive layout.
   ---------------------------------------------------------------------
   The dashboard shell (style.css) is a fixed four-column, 100vh grid built
   for a lab workstation: chats | PEEL | center | chat. The public demo adds
   two more top-level children (the demo bar and the site footer) and has to
   survive a phone. This file owns both jobs and is loaded AFTER style.css,
   so its body rules win on equal specificity.

   Source of truth: scripts/build_demo.py links this file when it bakes a
   fresh shell, and peel/demo.html + peel/demo.zh.html link it today. Edit
   here, never in a per-page <style> block. */

/* ── demo bar ─────────────────────────────────────────────────────── */
#demobar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 9px 16px; background: #101b24; border-bottom: 1px solid #263040;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #b0bbca; }
#demobar b { color: #82decf; font-weight: 650; }
#demobar a { color: #75b7ff; text-decoration: none; }
#demobar a:hover { text-decoration: underline; }
#demobar .spacer { flex: 1; }
#demobar .langsel { display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid #33465c; border-radius: 8px; padding: 2px 5px 2px 7px; }
#demobar .langsel .lg { font-size: 12px; margin-right: 3px; }
#demobar .langsel .on { padding: 2px 8px; border-radius: 5px; font-size: 12px;
  background: #12322f; color: #82decf; font-weight: 600; }
#demobar .langsel a { padding: 2px 8px; border-radius: 5px; color: #b0bbca; font-size: 12px; }
#demobar .langsel a:hover { text-decoration: none; color: #e6edf5; background: #16212e; }

/* ── site footer ──────────────────────────────────────────────────── */
footer.site-footer { padding: 14px 16px; border-top: 1px solid #263040;
  background: #06090f; color: #6e6e76; font: 11px -apple-system, sans-serif; }
footer.site-footer a { color: #9a9aa2; }

/* ── the grid, with the demo's extra rows ─────────────────────────── */
/* Without these the bar and footer auto-place into stray 200px cells and
   the whole dashboard shears out of the viewport. */
body { grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "bar bar bar bar"
                       "top top top top"
                       "chats peel center chat"
                       "foot foot foot foot"; }
#demobar { grid-area: bar; }
#traceview { grid-area: center; }
footer.site-footer { grid-area: foot; }

/* ── narrow desktop / landscape tablet ────────────────────────────── */
@media (max-width: 1280px) {
  body { grid-template-columns: 170px 265px 1fr 320px; }
  #nodesearch { width: 140px; }
  #modelsel { max-width: 130px; }
  header { gap: 8px; }
}

/* ── tablet: the chat list folds away, the working columns stay ───── */
@media (max-width: 1080px) {
  body { grid-template-columns: 0 240px 1fr 300px; }
  #chatscol { display: none; }
  header { flex-wrap: wrap; }
  .tabs { flex-wrap: wrap; }
}

/* ── phone and portrait tablet: one column, the page scrolls ──────── */
@media (max-width: 860px) {
  /* Stop pinning the shell to the viewport: let the document scroll and
     give each panel its own height. `body.focus` is folded in so focus
     mode cannot reinstate the four-column track here. */
  body, body.focus {
    height: auto; min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: "bar" "top" "center" "chat" "peel" "chats" "foot";
  }
  #chatscol { display: block; }

  #demobar { gap: 8px; padding: 8px 12px; font-size: 12px; }
  header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  header h1 { width: 100%; }
  .tabs { flex-wrap: wrap; width: 100%; }
  .tab { padding: 7px 12px; }          /* a tappable target, not a 4px strip */
  .tabs.small .tab { padding: 5px 10px; }
  #nodesearch, #dbsel { width: 100%; }

  /* The graph canvas is height:100% of <main>, which collapses to zero in
     an auto-height row — so the row gets an explicit height here. */
  main { height: 62vh; min-height: 320px; }
  #legend { font-size: 11px; max-width: calc(100% - 24px); }
  #graphctl { flex-wrap: wrap; max-width: calc(100% - 24px); }
  #visionstage { min-height: 52vh; }

  /* Side panels become stacked sections with their own scroll, and their
     vertical rules become horizontal ones. */
  #chatscol, #peelcol { max-height: 60vh; border-right: 0;
    border-top: 1px solid var(--line); }
  #chatcol { min-height: 70vh; border-left: 0; border-top: 1px solid var(--line); }
  .userbubble, .floorbubble { max-width: 100%; }
  .card { margin: 10px; }
  table.ledger { font-size: 12px; }
}

/* ── small phone ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  main { height: 54vh; }
  #chatcol { min-height: 60vh; }
  .pad { padding: 0 10px 8px; }
  #modalbody { padding: 14px; width: 94vw; }
}