/* ==========================================================================
   Nova chat interface
   Token-driven stylesheet following the Renovast design brief:
   Helvetica Neue stack, 16px base, 4px radius, green accent with a 2px
   hard shadow, black header and footer bands, WCAG 2.2 AA contrast.
   Mobile first. Breakpoints: 480px, 768px, 1024px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* typography */
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 24px;
  --line-height-tight: 1.2;

  /* spacing scale: 5px steps, as the brief's space.1 = 5px, space.2 = 20px */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;

  /* shape, elevation, motion */
  --radius-xs: 4px;
  --radius-pill: 999px;
  --shadow-1: rgb(111 154 55) 0px 2px 0px 0px;
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 16px rgb(0 0 0 / 0.08);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* layout */
  --container-max: 1200px;
  --gutter: 16px;
  --header-height: 60px;
  --touch-target: 44px;

  /* semantic colours, light theme (all text pairs are 4.5:1 or better) */
  --color-surface-base: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-raised: #ffffff;
  --color-surface-inverse: #000000;
  --color-text-primary: #545454;
  --color-text-heading: #1a1a1a;
  --color-text-muted: #6a6a6a;
  --color-text-inverse: #ffffff;
  --color-text-on-inverse-muted: #c9c9c9;
  --color-text-link: #0000ee;
  --color-accent: #82b440;
  --color-accent-strong: #6f9a37;
  --color-accent-text: #4f7a1f;
  --color-accent-contrast: #111111;
  --color-accent-soft: #eef5e3;
  --color-border: #dcdcdc;
  --color-border-strong: #bdbdbd;
  --color-focus: #4f7a1f;
  --color-focus-on-inverse: #ffffff;
  --color-error: #b71c1c;
  --color-error-soft: #fdecea;
  --color-bubble-user: #000000;
  --color-bubble-user-text: #ffffff;
  --color-bubble-bot: #f5f5f5;
  --color-scrim: rgb(0 0 0 / 0.5);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface-base: #121412;
    --color-surface-muted: #1c1f1c;
    --color-surface-raised: #1c1f1c;
    --color-surface-inverse: #000000;
    --color-text-primary: #c9c9c9;
    --color-text-heading: #f0f0f0;
    --color-text-muted: #9a9a9a;
    --color-text-inverse: #ffffff;
    --color-text-on-inverse-muted: #c9c9c9;
    --color-text-link: #8ab4f8;
    --color-accent: #82b440;
    --color-accent-strong: #9fd05a;
    --color-accent-text: #9fd05a;
    --color-accent-contrast: #111111;
    --color-accent-soft: #1f2a17;
    --color-border: #2a2e2a;
    --color-border-strong: #3a3f3a;
    --color-focus: #9fd05a;
    --color-error: #ff8a80;
    --color-error-soft: #3a1f1d;
    --color-bubble-user: #2f3430;
    --color-bubble-user-text: #ffffff;
    --color-bubble-bot: #1c1f1c;
    --color-scrim: rgb(0 0 0 / 0.65);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-surface-base: #121412;
  --color-surface-muted: #1c1f1c;
  --color-surface-raised: #1c1f1c;
  --color-surface-inverse: #000000;
  --color-text-primary: #c9c9c9;
  --color-text-heading: #f0f0f0;
  --color-text-muted: #9a9a9a;
  --color-text-inverse: #ffffff;
  --color-text-on-inverse-muted: #c9c9c9;
  --color-text-link: #8ab4f8;
  --color-accent: #82b440;
  --color-accent-strong: #9fd05a;
  --color-accent-text: #9fd05a;
  --color-accent-contrast: #111111;
  --color-accent-soft: #1f2a17;
  --color-border: #2a2e2a;
  --color-border-strong: #3a3f3a;
  --color-focus: #9fd05a;
  --color-error: #ff8a80;
  --color-error-soft: #3a1f1d;
  --color-bubble-user: #2f3430;
  --color-bubble-user-text: #ffffff;
  --color-bubble-bot: #1c1f1c;
  --color-scrim: rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over any display rule below. */
[hidden] { display: none !important; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
h1 { font-size: var(--font-size-lg); }
h2 { font-size: var(--font-size-md); }
h3 { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }

p { margin: 0; }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

button, input, textarea {
  font: inherit;
  color: inherit;
}

/* Focus: one rule for everything interactive. Never removed, only recoloured. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-focus-on-inverse);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* --------------------------------------------------------------------------
   3. Buttons
   States: default, hover, focus-visible, active, disabled, loading
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: var(--color-accent-strong); }
.btn-primary:active { transform: translateY(2px); box-shadow: none; }

.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text-heading);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-muted); }
.btn-secondary:active { background: var(--color-border); }

.btn-header {
  color: var(--color-text-inverse);
  border-color: transparent;
}
.btn-header:hover { background: rgb(255 255 255 / 0.12); }
.btn-header:active { background: rgb(255 255 255 / 0.2); }

.btn-icon { padding-inline: var(--space-2); min-width: var(--touch-target); }

/* Theme toggle shows the theme you would switch to. */
#theme-toggle[data-current="light"] .icon-sun,
#theme-toggle[data-current="dark"] .icon-moon { display: none; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-accent-contrast);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-bottom: 2px solid var(--color-accent);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-height);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  min-height: var(--touch-target);
  flex: none;
}
.brand-mark { display: inline-flex; width: 32px; height: 32px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.brand-tagline { font-size: var(--font-size-xs); color: var(--color-text-on-inverse-muted); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-on-inverse-muted);
  white-space: nowrap;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(130 180 64 / 0.25);
}
.status.is-offline .status-dot { background: var(--color-error); box-shadow: none; }

/* On phones the header buttons show icons only; labels come back at 600px. */
.btn-header .btn-label { display: none; white-space: nowrap; }
.btn-header { padding-inline: var(--space-2); min-width: var(--touch-target); }

/* Phones under 480px: the status shows as a dot only (text stays for screen readers). */
@media (max-width: 479px) {
  .status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .status { padding-inline: var(--space-1); }
  .brand-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand, .brand-text { min-width: 0; }
}

/* Smallest phones (320 to 359px): no tagline, tighter buttons. */
@media (max-width: 359px) {
  .brand-tagline { display: none; }
  .btn-header { min-width: 40px; padding-inline: var(--space-1); }
  .header-inner { gap: var(--space-1); }
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
}

/* --------------------------------------------------------------------------
   6. Chat panel
   -------------------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  min-width: 0;
}
.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.chat-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.chat-head .btn { flex: none; white-space: nowrap; }

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-behavior: smooth;
}

/* A spacer that soaks up spare height, so the conversation sits at the
   bottom of the log even when the welcome message is hidden. */
.messages::before { content: ""; margin-top: auto; }

.msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 88%;
  animation: rise var(--motion-base) var(--ease-out);
}
.msg-bot { align-self: flex-start; }
.msg-user { align-self: flex-end; align-items: flex-end; }

.msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-inline: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.msg-sender { font-weight: var(--font-weight-bold); color: var(--color-text-heading); }
.msg-time { color: var(--color-text-muted); }

.msg-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--color-bubble-bot);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg-user .msg-bubble {
  background: var(--color-bubble-user);
  color: var(--color-bubble-user-text);
}
.msg-system .msg-bubble {
  background: var(--color-accent-soft);
  color: var(--color-text-heading);
  border-left: 3px solid var(--color-accent);
}
.msg-error .msg-bubble {
  background: var(--color-error-soft);
  color: var(--color-error);
  border-left: 3px solid var(--color-error);
}

.intent-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
}
.intent-tag-fallback, .intent-tag-system {
  background: var(--color-surface-muted);
  color: var(--color-text-heading);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.intent-tag-error { background: var(--color-error-soft); color: var(--color-error); }

.typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 24px;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: blink 1s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

/* Suggestion chips: one scrolling row on phones, wrapping from 768px. */
.suggestions {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0 0;
}
.suggestions-label {
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.chips {
  display: flex;
  gap: var(--space-4) var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-4);
  overflow-x: auto;
  scroll-padding-inline: var(--space-4);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.chip {
  flex: none;
  scroll-snap-align: start;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-heading);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.chip:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.chip:active { background: var(--color-accent); color: var(--color-accent-contrast); }
.chip[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Composer: input, send button, hint, counter, error */
.composer {
  padding: var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}
.composer-field {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target);
  max-height: 144px;
  padding: 9px var(--space-3); /* 9 + 24 + 9 + 2px border = 44px, one line fits without a scrollbar */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-base);
  color: var(--color-text-heading);
  font-size: var(--font-size-md); /* 16px stops iOS zooming on focus */
  line-height: var(--line-height-base);
  resize: none;
  overflow-y: hidden; /* script switches to auto once the text exceeds max-height */
}
.composer textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.composer textarea:hover { border-color: var(--color-text-muted); }
.composer textarea:focus-visible {
  border-color: var(--color-accent-strong);
  outline-offset: 0;
}
.composer textarea[aria-invalid="true"] { border-color: var(--color-error); }
.composer textarea[disabled] { background: var(--color-surface-muted); cursor: not-allowed; }

.btn-send { flex: none; min-width: var(--touch-target); padding-inline: var(--space-2); }
.btn-send .btn-label { display: none; }

.composer-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.composer-hint { display: none; }
.char-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.char-count.is-near-limit { color: var(--color-error); font-weight: var(--font-weight-medium); }

.field-error {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   7. Trace panel
   On phones it is a bottom sheet opened from the header. From 768px it is a
   fixed column beside the chat.
   -------------------------------------------------------------------------- */
.trace {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  max-height: 85dvh;
  overflow-y: auto;
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--color-surface-raised);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  box-shadow: var(--shadow-2);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
}
.trace.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--motion-base) var(--ease-out);
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--color-scrim);
}
.scrim[hidden] { display: none; }

.trace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.trace-empty { font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* Until the first reply the pipeline and session details stay out of the way. */
.trace.is-idle .pipeline,
.trace.is-idle .session-list,
.trace.is-idle .trace-subheading:not(.trace-subheading-intents) { display: none; }
.trace-subheading { margin: var(--space-4) 0 var(--space-2); }

.trace-list { margin: 0; }
.trace-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.trace-row:last-child { border-bottom: 0; }
.trace-row dt { color: var(--color-text-muted); }
.trace-row dd {
  margin: 0;
  color: var(--color-text-heading);
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
}
.trace-row dd .intent-tag { font-size: var(--font-size-sm); }

.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-block: 6px 4px;
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width var(--motion-base) var(--ease-out);
}
.meter-label { font-family: var(--font-family); }

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.pipeline li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  counter-increment: step;
}
/* The thread: one segment per step, trimmed at the ends of the list. */
.pipeline li::after {
  content: "";
  position: absolute;
  left: calc(var(--space-2) + 11px);
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--color-border);
}
.pipeline li:first-child::after { top: 50%; }
.pipeline li:last-child::after { bottom: 50%; }
.pipeline li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
}
.pipeline-name { color: var(--color-text-primary); }
.pipeline-note { font-size: var(--font-size-xs); }
.pipeline li.is-tried::before { border-color: var(--color-text-muted); background: var(--color-surface-muted); }
.pipeline li.is-tried .pipeline-name { color: var(--color-text-heading); }
.pipeline li.is-hit { background: var(--color-accent-soft); }
.pipeline li.is-hit::before { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); font-weight: var(--font-weight-bold); }
.pipeline li.is-hit .pipeline-name { color: var(--color-accent-text); font-weight: var(--font-weight-medium); }
.pipeline li.is-hit .pipeline-name::after { content: " matched"; font-weight: var(--font-weight-regular); }

.intents-dialog {
  width: min(100% - 2 * var(--gutter), 520px);
  max-height: min(85dvh, 640px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-2);
}
.intents-dialog[open] { display: flex; flex-direction: column; }
.intents-dialog::backdrop { background: var(--color-scrim, rgb(0 0 0 / 0.5)); }
.intents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.intents-tools { padding: var(--space-3) var(--space-4) 0; }
.intent-filter {
  width: 100%;
  min-height: var(--touch-target);
  padding: 9px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-base);
  color: var(--color-text-heading);
  font-size: var(--font-size-md);
}
.intent-filter:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.intents-hint { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.intent-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.intent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.intent-row:last-child { border-bottom: 0; }
.intent-info { min-width: 0; }
.intent-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-medium);
}
.intent-desc { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.intent-example {
  flex: none;
  max-width: 45%;
  padding: 0 var(--space-3);
  min-height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-heading);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.intent-example:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.intents-empty { padding: var(--space-3) var(--space-4) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse-muted);
  border-top: 2px solid var(--color-accent);
  font-size: var(--font-size-sm);
  padding-block: var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.footer-nav a {
  color: var(--color-text-inverse);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
}
.footer-nav a:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .messages { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   10. Breakpoints
   Mobile first. 320px is the floor and needs no query: everything above
   already fits it. Tested at 320, 390, 412, 430, 448, 480, 767, 768, 1024.
   -------------------------------------------------------------------------- */

/* Large phones and up: bring back button labels and the keyboard hint. */
@media (min-width: 480px) {
  .btn-send .btn-label { display: inline; }
  .btn-send { padding-inline: var(--space-3); }
  .composer-hint { display: inline; }
  .msg { max-width: 80%; }
  h1 { font-size: var(--font-size-xl); }
}

/* Wide phones and small tablets: header buttons get their text labels back. */
@media (min-width: 600px) {
  .btn-header .btn-label { display: inline; }
  .btn-header { padding-inline: var(--space-3); }
}

/* Tablets and up: two columns. At every width the page fills the viewport
   and only the chat log and the trace column scroll, so the composer and
   the footer stay in view. */
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .header-inner, .footer-inner { padding-inline: calc(var(--gutter) + var(--space-4)); }
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    padding-block: var(--space-4);
    align-items: stretch;
  }
  .messages { padding: var(--space-4); }
  .msg { max-width: 75%; }
  .chips { flex-wrap: wrap; overflow: visible; }
  .chip { flex: none; }

  .trace {
    position: static;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    transform: none;
    visibility: visible;
    transition: none;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    box-shadow: none;
  }
  .trace-close { display: none; }
  /* While idle the card wraps its two lines instead of stretching to the column. */
  .trace.is-idle { height: auto; align-self: start; }
  .layout.is-trace-hidden { grid-template-columns: minmax(0, 1fr); }
  .layout.is-trace-hidden .trace { display: none; }
  .scrim { display: none !important; }
  .footer-nav { flex: none; flex-wrap: nowrap; }
  .footer-nav a { min-height: 36px; }
}

/* Desktop: wider trace column, roomier text. */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); }
  .msg { max-width: 70%; }
  .trace { padding: var(--space-3) var(--space-4) var(--space-4); }
}

/* Very short viewports (landscape phones): keep the composer reachable. */
@media (max-height: 480px) {
  .suggestions { display: none; }
}
@media (max-height: 620px) {
  .suggestions { display: none; }
  .chat-subtitle { display: none; }
}

/* Print: black on white, no chrome. */
@media print {
  .site-header, .site-footer, .suggestions, .composer, .trace, .scrim { display: none !important; }
  .chat { border: 0; }
  .msg-bubble { border: 1px solid #000; background: #fff !important; color: #000 !important; }
}