/*
 * AI Build Lab -- Field Manual aesthetic.
 * Source of truth: ~/GitHub/aibl-team-hq/playbook/design-aesthetic/STYLE.md
 *
 * Personality: field manual / personnel file / scratched-up notebook.
 * Brutalist edges, paper texture, lime accents, mono labels.
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");

:root {
  /* Surfaces */
  --paper:        #F5F2EB;
  --paper-2:      #EBE7DE;
  --paper-3:      #DDD7CA;
  --surface:      #FFFFFF;
  --terminal-bg:  #080808;

  /* Ink */
  --ink:    #0F0F0F;
  --ink-2:  #4A4A52;
  --ink-3:  #7A7A85;
  --border: #0F0F0F;

  /* Accents */
  --lime:       #C8FF00;
  --lime-dim:   #A8D600;
  --caution:    #FF3300;
  --blueprint:  #0055FF;
  --success:    #00D084;
  --on-lime:    #0F0F0F;
  --tape:       rgba(255, 247, 185, 0.82);

  /* Shadows -- offset, never blurred */
  --shadow-sm:  3px 3px 0 var(--border);
  --shadow:     5px 5px 0 var(--border);
  --shadow-lg:  9px 9px 0 var(--border);

  --grid: rgba(15, 15, 15, 0.055);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.55 "Inter", system-ui, sans-serif;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  min-height: 100vh;
}
/* Natural page-level scroll. Header + sidebar use position:sticky so they
   stay visible while the user scrolls main content. No nested-scroll traps. */

a {
  color: var(--blueprint);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); background: var(--lime); }

button { font-family: inherit; }

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ───── LOGIN VIEW ───── */

.login-card {
  background: var(--surface);
  border: 3px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 480px;
  margin: 80px auto 24px;
  transform: rotate(-0.4deg);
  position: relative;
}
.login-card::before {
  /* tape strip top-left */
  content: "";
  position: absolute;
  top: -12px;
  left: 32px;
  width: 76px;
  height: 22px;
  background: var(--tape);
  border: 1px solid rgba(0, 0, 0, 0.18);
  transform: rotate(-2deg);
}
.login-card::after {
  /* tape strip top-right */
  content: "";
  position: absolute;
  top: -12px;
  right: 32px;
  width: 76px;
  height: 22px;
  background: var(--tape);
  border: 1px solid rgba(0, 0, 0, 0.18);
  transform: rotate(1.5deg);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.06em;
  border: 2px solid var(--border);
}
.brand-eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caution);
  margin-bottom: 2px;
}
.login-card h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.login-lede {
  color: var(--ink-2);
  font-size: 14px;
  margin: 8px 0 22px;
}
.login-card label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.login-card input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
}
.login-card input[type="email"]:focus {
  background: var(--surface);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}
.login-card button[type="submit"] {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 2px solid var(--border);
  background: var(--lime);
  color: var(--on-lime);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.login-card button[type="submit"]:hover:not(:disabled) {
  background: var(--lime-dim);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--border);
}
.login-card button[type="submit"]:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border);
}
.login-card button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }

.status {
  margin-top: 16px;
  padding: 11px 14px;
  border: 2px solid var(--border);
  background: var(--paper-2);
  font-size: 13px;
  display: none;
  box-shadow: var(--shadow-sm);
}
.status.show { display: block; }
.status.ok  { background: #DEFFD8; border-color: var(--success); }
.status.err { background: #FFE0DA; border-color: var(--caution); }

.footnote {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 20px;
  text-align: center;
  line-height: 1.6;
}
.login-footer {
  padding: 18px 28px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* ───── APP SHELL ───── */

#auth-view {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

header.app {
  background: var(--paper-2);
  border-bottom: 3px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 30;
}
header.app .brand-mark { width: 36px; height: 36px; font-size: 16px; }
header.app .brand h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  line-height: 1;
}
header.app .brand-eyebrow { margin-bottom: 1px; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.user-email {
  color: var(--ink-2);
  text-transform: lowercase;
  background: var(--paper);
  padding: 6px 10px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.signout {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border);
  padding: 7px 14px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
}
.signout:hover {
  background: var(--caution);
  color: var(--surface);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}

/* ───── BODY: SIDEBAR + MAIN ───── */

.app-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start; /* allow sticky sidebar to work */
}

aside.sidebar {
  background: var(--paper-2);
  border-right: 3px solid var(--border);
  padding: 18px 0;
  position: sticky;
  top: 68px; /* sit under the sticky header */
  height: calc(100vh - 68px); /* fill viewport beneath header */
  overflow-y: auto;
  min-width: 0;
  z-index: 10;
}
.sidebar-section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caution);
  padding: 0 22px 8px;
  margin-top: 14px;
}
.sidebar-section-label:first-child { margin-top: 0; }

.sidebar nav { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
.nav-item {
  background: transparent;
  border: 2px solid transparent;
  text-align: left;
  padding: 10px 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.08s, border-color 0.08s, transform 0.08s, box-shadow 0.08s;
}
.nav-item:hover {
  background: var(--paper);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transform: translate(-1px, -1px);
}
.nav-item.active {
  background: var(--lime);
  color: var(--on-lime);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-item.has-children::after {
  content: "▾";
  font-size: 10px;
  color: var(--ink-2);
  transition: transform 0.12s;
}
.nav-item.expanded::after { transform: rotate(180deg); }
.nav-item.active.has-children::after { color: var(--on-lime); }

.sub-nav {
  display: none;
  flex-direction: column;
  margin: 2px 0 4px 14px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}
.sub-nav.expanded { display: flex; }
.sub-nav button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.sub-nav button:hover { color: var(--ink); background: var(--paper); }
.sub-nav button.active { color: var(--caution); }

main.main-content {
  padding: 24px 32px 40px;
  min-width: 0;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ───── ENGAGEMENT BANNER (FILE-TAB CARD) ───── */

.engagement-banner {
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  transform: rotate(-0.3deg);
}
.engagement-banner::before {
  content: "ENGAGEMENT / 001";
  position: absolute;
  top: -14px;
  left: 18px;
  background: var(--lime);
  border: 2px solid var(--border);
  padding: 3px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--on-lime);
}
.engagement-banner .label { display: none; }
.engagement-banner .name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.engagement-banner .phase {
  background: var(--success);
  color: var(--ink);
  border: 2px solid var(--border);
  padding: 3px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.engagement-banner .stats {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ───── PANELS / CARDS ───── */

.panel {
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 22px;
  position: relative;
}
.panel.tape::before,
.panel.tape::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 60px;
  height: 18px;
  background: var(--tape);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.panel.tape::before { left: 24px; transform: rotate(-1.5deg); }
.panel.tape::after  { right: 24px; transform: rotate(2deg); }

.panel h2 {
  margin: 0 0 4px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
.panel .sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 22px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

/* ───── ACCORDION SECTIONS INSIDE PANES ───── */

.accordion {
  border: 2px solid var(--border);
  background: var(--paper);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.accordion-header {
  width: 100%;
  background: var(--paper-2);
  border: none;
  border-bottom: 2px solid var(--border);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.accordion-header:hover { background: var(--lime); }
.accordion-header .count {
  color: var(--ink-3);
  font-size: 10px;
}
.accordion-header::after {
  content: "▾";
  font-size: 10px;
  margin-left: 10px;
  transition: transform 0.15s;
}
.accordion.collapsed .accordion-header::after { transform: rotate(-90deg); }
.accordion.collapsed .accordion-header { border-bottom: none; }
.accordion-body { padding: 12px 18px; }
.accordion.collapsed .accordion-body { display: none; }

/* ───── FILE LIST ───── */

.file-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-3);
  gap: 14px;
  cursor: pointer;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--paper-2); }
.file-row.active { background: var(--lime); }
.file-icon {
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: var(--lime);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.file-meta { flex: 1; min-width: 0; }
.file-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-stats {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.file-action {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--ink);
  padding: 6px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.file-action:hover {
  background: var(--lime);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}

/* ───── INLINE PREVIEW ───── */

.preview-panel { min-height: 540px; display: flex; flex-direction: column; }
.preview-panel #file-preview {
  flex: 1;
  overflow: auto;
  border-top: 2px solid var(--border);
  margin: 16px -22px -20px;
  padding: 22px 28px;
  background: var(--surface);
}
.preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 300px;
}
.preview-md h1, .preview-md h2, .preview-md h3 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.preview-md h1 { font-size: 26px; border-bottom: 3px solid var(--border); padding-bottom: 8px; }
.preview-md h2 { font-size: 19px; margin-top: 28px; }
.preview-md h3 { font-size: 15px; margin-top: 20px; }
.preview-md p, .preview-md li { font-size: 14px; line-height: 1.65; }
.preview-md code {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.preview-md pre {
  background: var(--terminal-bg);
  color: var(--lime);
  padding: 16px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}
.preview-md pre code { background: transparent; border: none; color: inherit; padding: 0; }
.preview-md table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 12px;
}
.preview-md th {
  background: var(--paper-2);
  border-bottom: 3px solid var(--border);
  text-align: left;
  padding: 8px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.preview-md td { padding: 8px 10px; border-bottom: 1px solid var(--paper-3); }
.preview-md blockquote {
  border-left: 4px solid var(--caution);
  padding: 4px 14px;
  color: var(--ink-2);
  font-style: italic;
  margin: 14px 0;
  background: var(--paper-2);
}
.preview-pdf { width: 100%; height: 620px; border: 2px solid var(--border); background: var(--paper-2); }

/* ───── ACTIVITY FEED ───── */

.activity-row {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-3);
  align-items: flex-start;
}
.activity-row:last-child { border-bottom: none; }
.activity-row.new {
  background: var(--lime);
  margin: 0 -22px;
  padding: 12px 22px;
  border-bottom-color: var(--border);
}
.activity-icon {
  width: 30px;
  height: 30px;
  background: var(--ink);
  color: var(--lime);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.activity-text { flex: 1; font-size: 14px; }
.activity-text strong {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
}
.activity-when {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 3px;
}
.new-badge {
  background: var(--caution);
  color: var(--surface);
  padding: 2px 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 8px;
  border: 1px solid var(--border);
}

/* ───── CHAT ───── */

/* Chat panel fills the main content area below the engagement banner.
   Main content scrolls independently, so this just needs to be tall enough
   to be useful without overflowing the visible region. */
/* Chat fits in a comfortable window inside the natural page flow. The
   chat-msgs region scrolls internally when the conversation gets long;
   the rest of the page scrolls normally if other content is below. */
.chat-panel {
  display: flex;
  flex-direction: column;
  height: min(72vh, 760px);
  min-height: 480px;
}
.chat-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.new-conv-btn {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--ink);
  padding: 8px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.new-conv-btn:hover {
  background: var(--caution);
  color: var(--surface);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}

.chat-msgs {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  background: var(--paper);
  border: 2px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* CRITICAL: allows flex item to shrink and overflow */
}
.chat-msg {
  max-width: 88%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--lime);
  color: var(--on-lime);
  white-space: pre-wrap;
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink);
}
.chat-msg.bot.thinking {
  font-style: italic;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: pre-wrap;
}

/* Markdown rendering inside bot messages */
.chat-msg-body p { margin: 0 0 10px; }
.chat-msg-body p:last-child { margin-bottom: 0; }
.chat-msg-body ul, .chat-msg-body ol { margin: 6px 0 10px; padding-left: 22px; }
.chat-msg-body li { margin-bottom: 4px; }
.chat-msg-body li:last-child { margin-bottom: 0; }
.chat-msg-body strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.chat-msg-body em { font-style: italic; color: var(--ink-2); }
.chat-msg-body code {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.chat-msg-body pre {
  background: var(--terminal-bg);
  color: var(--lime);
  padding: 12px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  border: 2px solid var(--border);
  overflow: auto;
  margin: 6px 0;
}
.chat-msg-body pre code { background: transparent; border: none; color: inherit; padding: 0; }
.chat-msg-body blockquote {
  border-left: 3px solid var(--caution);
  padding: 2px 12px;
  margin: 6px 0;
  color: var(--ink-2);
  font-style: italic;
}
.chat-msg-body h1, .chat-msg-body h2, .chat-msg-body h3, .chat-msg-body h4 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}
.chat-msg-body h1 { font-size: 17px; }
.chat-msg-body h2 { font-size: 15px; }
.chat-msg-body h3 { font-size: 14px; }
.chat-msg-body h4 { font-size: 13px; }
.chat-msg-body hr { border: 0; border-top: 2px solid var(--border); margin: 10px 0; }
.chat-msg-body a { color: var(--blueprint); text-decoration: underline; }
.chat-msg .msg-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.chat-msg .msg-meta .pill {
  background: var(--paper-2);
  padding: 2px 6px;
  border: 1px solid var(--border);
  font-weight: 700;
}
.chat-msg .tool-pill {
  background: var(--blueprint);
  color: var(--surface);
  padding: 3px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.chat-msg .citation {
  background: var(--lime);
  color: var(--on-lime);
  padding: 1px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid var(--border);
}
.chat-msg .citation:hover { background: var(--caution); color: var(--surface); }

.chat-suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; flex-shrink: 0; }
.chat-suggest .chip {
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 7px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.chat-suggest .chip:hover {
  background: var(--lime);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}

.chat-form { display: flex; gap: 10px; flex-shrink: 0; }
.chat-form input {
  flex: 1;
  padding: 12px 14px;
  border: 2px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
}
.chat-form input:focus {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--border);
}
.chat-form button {
  background: var(--lime);
  color: var(--on-lime);
  border: 2px solid var(--border);
  padding: 0 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.chat-form button:hover:not(:disabled) {
  background: var(--lime-dim);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--border);
}
.chat-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───── DASHBOARD IFRAME ───── */

.dashboard-frame-wrap {
  height: min(72vh, 720px);
  min-height: 460px;
  background: var(--paper-2);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
#dashboard-frame { width: 100%; height: 100%; border: 0; display: block; }
#pane-dashboard .panel { display: flex; flex-direction: column; }

/* ───── EMPTY / LOADING / FOOTER ───── */

.empty {
  padding: 36px;
  text-align: center;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loading {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

footer.app-footer {
  padding: 14px 28px;
  height: 44px;
  color: var(--ink-3);
  background: var(--paper-2);
  border-top: 3px solid var(--border);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ───── RESPONSIVE ─────
   Below 960px the sidebar collapses to a horizontal scroll strip at the top
   of the body. Sub-nav accordions stack inline. At <600px the engagement
   banner stacks vertically and the chat min-height relaxes.
*/
@media (max-width: 960px) {
  .app-body {
    grid-template-columns: 1fr;
  }
  aside.sidebar {
    position: static;       /* drop sticky on stacked layout */
    border-right: none;
    border-bottom: 3px solid var(--border);
    padding: 10px 14px;
    height: auto;
    max-height: none;
  }
  .sidebar-section-label { padding: 0 4px 6px; margin-top: 8px; }
  .sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
  }
  .nav-item {
    padding: 8px 12px;
    font-size: 13px;
  }
  .nav-item.has-children::after { display: none; }
  .sub-nav {
    flex-basis: 100%;
    margin: 4px 0 6px;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    padding-left: 0;
    gap: 4px;
  }
  .sub-nav button {
    padding: 5px 9px;
    background: var(--paper);
    border: 1px solid var(--border);
  }
  main.main-content { padding: 18px 18px 24px; }
  .chat-panel { height: auto; min-height: 420px; }
  .dashboard-frame-wrap { min-height: 360px; max-height: 600px; }
}
@media (max-width: 600px) {
  header.app { padding: 0 14px; gap: 10px; height: 60px; }
  header.app .brand h1 { font-size: 15px; }
  header.app .brand-eyebrow { font-size: 9px; }
  #auth-view { grid-template-rows: 60px minmax(0, 1fr) 40px; }
  .header-right { gap: 8px; }
  .user-email { padding: 4px 7px; font-size: 10px; }
  .signout { padding: 5px 10px; font-size: 10px; }
  .engagement-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .engagement-banner .stats { margin-left: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .preview-panel { min-height: 360px; }
  .chat-msg { max-width: 95%; }
  footer.app-footer { padding: 10px 14px; height: 40px; font-size: 9px; }
}