/* ═══════════════════════════════════════════════════════════════════
   APP SHELL v5 — pixel-perfect shell parity with KOKPIT
   ─────────────────────────────────────────────────────────────────────
   Extracted from kokpit-v5.css (the canonical reference). Every page
   that loads this file gets the SAME shell as KOKPIT:
     - <div class="ekg-wrapper">  (in-flow, above agent-bar)
     - <section class="agent-bar"><div class="agent-input-wrapper">...</div></section>
     - <footer class="statusbar"> (5 segments, GLASS HOUSE injected by utils.js)

   Pages must use the IDENTICAL DOM structure documented in
   docs/audit/kokpit_reference_measurements.md.

   Reference container token: --kk-max  (= clamp(1680px, 95vw, 3200px)).
   This file defines --kk-max if a page hasn't set it, so app-shell-v5
   works standalone on any page that loads it.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --kk-max: clamp(1680px, 95vw, 3200px);
  /* PIXEL PARITY z kokpit-v5.css linia 68 (body literal padding).
     Body padding na kokpit to HARDCODED clamp(24px, 3vw, 64px) — NIE token.
     Wszystkie strony używają tej samej wartości żeby mens-bar był identyczny. */
  --kk-pad-x: clamp(24px, 3vw, 64px);
}

/* Match kokpit's body padding so shell rows + content rows share the
   same content width on every tab. KOKPIT itself sets this via
   kokpit-v5.css; we skip body[data-page="kokpit"] to avoid clobbering
   its grid layout.

   STICKY-FOOTER SHELL: body is a flex column with height: 100vh and
   overflow: hidden. Nav, ekg, agent-bar, statusbar are all
   flex-shrink: 0 and stay in place. <main> is flex: 1 + overflow-y:
   auto (with min-height: 0 — the classic flex-overflow fix), so
   long timelines / lists scroll inside main without ever pushing the
   footer rows out of the viewport. Drawers (.iterum-drawer etc) are
   position: fixed so they live outside the flex flow. */
html, body { margin: 0; padding: 0; }
body:not([data-page="kokpit"]) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding-left: var(--kk-pad-x);
  padding-right: var(--kk-pad-x);
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

body:not([data-page="kokpit"]) > header.nav,
body:not([data-page="kokpit"]) > .nav,
body:not([data-page="kokpit"]) > .ekg-wrapper,
body:not([data-page="kokpit"]) > section.agent-bar,
body:not([data-page="kokpit"]) > footer.statusbar,
body:not([data-page="kokpit"]) > .org-pulse-bar {
  flex-shrink: 0;
}

body:not([data-page="kokpit"]) > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Pages whose <main> already capped itself at --page-max: reset that
   cap so main width follows the new body padding. Per-page padding-x
   is dropped — body padding is canonical. */
body:not([data-page="kokpit"]) main.missions-main,
body:not([data-page="kokpit"]) main.threats-main,
body:not([data-page="kokpit"]) main.proof-main,
body:not([data-page="kokpit"]) main.org-page,
body:not([data-page="kokpit"]) main.au-wrap,
body:not([data-page="kokpit"]) main.cs-wrap,
body:not([data-page="kokpit"]) main.sb-wrap,
body:not([data-page="kokpit"]) main.sh-wrap,
body:not([data-page="kokpit"]) main.theatrum-main,
body:not([data-page="kokpit"]) main.tm-page,
body:not([data-page="kokpit"]) main.tm-page-v6,
body:not([data-page="kokpit"]) main.scd-shell,
body:not([data-page="kokpit"]) main.av-wrap,
body:not([data-page="kokpit"]) main.cp-wrap,
body:not([data-page="kokpit"]) main.ts-main,
body:not([data-page="kokpit"]) main.in-wrap,
body:not([data-page="kokpit"]) main.dw-wrap,
body:not([data-page="kokpit"]) main.nx-wrap,
body:not([data-page="kokpit"]) main.ex-page,
body:not([data-page="kokpit"]) main.bs-wrap,
body:not([data-page="kokpit"]) main.ar-wrap,
body:not([data-page="kokpit"]) main.org-icu,
body:not([data-page="kokpit"]) main.us-wrap,
body:not([data-page="kokpit"]) main.op-wrap,
body:not([data-page="kokpit"]) main.forum-admin {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Wave 3+4 legacy pages use <div class="wrapper"> + <div id="cyrber-nav-root">
   instead of <main> + <header class="nav">. The wrapper becomes the scrollable
   flex:1 main row; the nav-root becomes the flex-shrink:0 nav row. Page-
   specific .wrapper styles (max-width caps, horizontal padding, min-height:100vh)
   are reset so body padding owns the canonical width. Pages that need to opt-out
   can redeclare these on body[data-page="<their_page>"] > .wrapper with higher
   specificity. */
body:not([data-page="kokpit"]) > #cyrber-nav-root,
body:not([data-page="kokpit"]) > nav#cyrber-nav-root {
  flex-shrink: 0;
}
body:not([data-page="kokpit"]) > .wrapper,
body:not([data-page="kokpit"]) > .cy-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: none;
  width: auto;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Organism's body[data-page=organism] also overrides shell .agent-bar with
   its own min-height — clamp it back to kokpit canon so .agent-input-wrapper
   does not stretch. */
body[data-page="organism"] section.agent-bar { min-height: 0; height: auto; padding: 0; }

/* base-v5.css gives header.nav its own padding-x and max-width. With
   body padding now canonical we don't want a double pad — strip nav's
   horizontal padding and let body's padding place it. */
body:not([data-page="kokpit"]) > header.nav,
body:not([data-page="kokpit"]) > .nav {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* The three shell rows (ekg, agent-bar, statusbar) all stretch to the
   same content width as kokpit's vitals/board grids — visually centered
   inside the body, capped at --kk-max. */
.ekg-wrapper,
.agent-bar,
.statusbar {
  position: relative;
  z-index: 1;
}

/* ─── EKG (above agent bar) ───────────────────────────────────────── */
.ekg-wrapper {
  max-width: var(--kk-max);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: clamp(48px, 6vh, 84px);
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: shell-fade-in 600ms 500ms ease both;
}
.ekg-wrapper .ekg-svg { height: 100%; }

.ekg-svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.ekg-waveform {
  stroke: rgb(74, 222, 128);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.5));
  vector-effect: non-scaling-stroke;
  transition: stroke 1.2s ease, filter 1.2s ease;
}

.ekg-mask-window {
  animation: ekg-sweep 4.5s linear infinite;
  will-change: transform;
}
@keyframes ekg-sweep {
  from { transform: translateX(-600px); }
  to   { transform: translateX(1500px); }
}

.ekg-wrapper.ekg-fast .ekg-mask-window { animation-duration: 2.4s; }
.ekg-wrapper.ekg-fast .ekg-waveform {
  stroke: rgb(255, 99, 99);
  filter: drop-shadow(0 0 5px rgba(255, 99, 99, 0.6));
}

/* ─── AGENT BAR + composer (kokpit canon) ─────────────────────────── */
.agent-bar {
  max-width: var(--kk-max);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: shell-fade-in 300ms 400ms ease both;
}

.agent-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.6vh, 22px) clamp(18px, 1.5vw, 28px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow:
    rgba(255, 255, 255, 0.06) 0 1px 0 0 inset,
    rgba(255, 255, 255, 0.12) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.3) 0 4px 20px -4px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.agent-input-wrapper:focus-within {
  background: rgba(20, 20, 20, 0.85);
  box-shadow:
    rgba(255, 255, 255, 0.04) 0 1px 0 0 inset,
    rgba(86, 194, 255, 0.25) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.4) 0 4px 24px -4px;
}

.agent-prompt-glyph {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  color: var(--accent-ratio, #388BFD);
  opacity: 0.8;
  flex-shrink: 0;
  line-height: 1;
}

.agent-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.1vh, 16px);
  color: var(--fg-primary, #fafafa);
  padding: 4px 0;
  min-width: 0;
}

.agent-input::placeholder {
  color: var(--fg-tertiary, #6b6b6b);
  font-weight: 400;
}

.agent-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.agent-send, .agent-cmdk {
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: rgba(255, 255, 255, 0.08) 0 0 0 1px inset;
  color: var(--fg-secondary, #a1a1a1);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.agent-send:hover, .agent-cmdk:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-primary, #fafafa);
  box-shadow: rgba(255, 255, 255, 0.18) 0 0 0 1px inset;
}

/* ─── STATUS BAR ───────────────────────────────────────────────────── */
.statusbar {
  padding: clamp(8px, 1vh, 14px) 0;
  max-width: var(--kk-max);
  width: 100%;
  margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--border-subtle, rgba(255,255,255,0.06)) 0 1px 0 0 inset;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(10px, 0.85vh, 12px);
  color: var(--fg-tertiary, #6b6b6b);
  min-height: 0;
  animation: shell-fade-in 300ms 500ms ease both;
}

.statusbar .sep { color: var(--fg-dimmed, #444); }

.sb-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-live, #3fb950);
}
.sb-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-live, #3fb950);
  animation: shell-pulse 2s ease-in-out infinite;
}

.sb-num { color: var(--fg-secondary, #a1a1a1); }

.sb-clock {
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(13px, 1.15vh, 16px);
  letter-spacing: 0.06em;
}
.sb-clock #sbDate { color: var(--fg-tertiary, #6b6b6b); }
.sb-clock .sb-clock-sep { color: var(--fg-dimmed, #444); }
.sb-clock #sbTime { color: var(--fg-primary, #fafafa); }

/* ─── Animations ──────────────────────────────────────────────────── */
@keyframes shell-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shell-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}