/* ============================================================
   COMPONENT · CHAT
   The live web chat console — the calm second brain talking back.
   One identity per side: the ASSISTANT is the machine speaking
   calmly (a quiet readout face with a steady green-lit `c-led`
   identity cue), the USER is a quiet bubble (the one restrained
   cyan-accent signal marking "your" input). A `c-thinking`
   placeholder closes the dead-air gap the instant you send.

   Psychology (do NOT regress): the agent's PROSE is never shouted
   — the bubble is never force-capitalised. Only the chrome
   (the identity plaque/LED label) is ALL-CAPS. The working state
   reads as the machine calmly on it; the failed state is warm and
   blameless — never a red alarm.

   The composer reuses the design-system form + button (GTDFormBuilder);
   this file styles the log container, the bubbles, the thinking +
   error states, and the keyboard-aware sticky composer. Semantic
   tokens only, both themes, no hardcoded rgba (strict CSP — no
   inline style anywhere; chat_controller drives the indicator).
   ============================================================ */

/* The console: a flex column that FILLS the viewport so the log takes the
   available height and the composer truly holds the bottom — never a short
   panel floating at the top with a dead lower half. `dvh` tracks the mobile
   URL bar + on-screen keyboard; the subtraction clears the chrome above (the
   sticky appbar + the panel head + gutters), and `min-height` keeps it usable
   on a short screen (the column overflows and the page scrolls instead). */
.c-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100dvh - 12rem);
  min-height: 22rem;
}

/* Phone: the appbar wraps to two rows and a fixed bottom tab bar (~3.5rem +
   safe-area) sits at the very bottom — clear both so the composer lands
   clearly ABOVE the tabs (no overlap) and the footer drops below the fold. */
@media (max-width: 45rem) { /* --bp-md */
  .c-chat { height: calc(100dvh - 15rem); }
}

/* The transcript: a vertical stack that grows to fill the column and scrolls
   internally so the composer below stays visible even with the on-screen
   keyboard open. Newest at the bottom; chat_controller keeps it pinned to the
   bottom on append. The well IS the agent's voice (G9), so light mode reads it
   as warm RECESSED PAPER (`--color-voice-paper`) — never a dark CRT screen
   muddying the cream field — while dark mode keeps the dark instrument screen.
   The bubbles are raised surfaces that read clearly against it on both themes. */
.c-chat__log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-voice-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--seam-engraved);
}

/* One message row. The modifier aligns the bubble to the side that
   matches the speaker (user = right/outgoing, assistant = left), and
   stacks the assistant's identity cue above its bubble. */
.c-chat__msg {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  gap: var(--space-1);
}

.c-chat__msg--user {
  align-items: flex-end;
}

.c-chat__msg--assistant {
  align-items: flex-start;
}

/* The assistant identity cue: a steady green-lit `c-led` beside an engraved
   DONEBOT plaque — "the machine is here and steady" without shouting. The
   ALL-CAPS chrome is the `c-plaque` component's own treatment (C1 chrome),
   so this file force-capitalises nothing (the agent's prose is never
   shouted — the one psychology win). Token-driven; flips for free. */
.c-chat__id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The bubble: a tinted raised surface with comfortable padding. Text
   wraps and preserves author newlines (transcript text is plain).
   NEVER force-uppercase here — the agent's words stay natural case. */
.c-chat__bubble {
  max-width: 80%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The user: a quiet bubble, marked only by the single restrained
   cyan accent border — the one saturated signal meaning "your" input. */
.c-chat__msg--user .c-chat__bubble {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-accent);
  color: var(--color-text-strong);
}

/* The assistant: the calm machine speaking. A raised surface lifted
   clearly off the dark well, with a steady green-lit edge (the quiet
   "control room working" cue). Both themes flip for free via tokens. */
.c-chat__msg--assistant .c-chat__bubble {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-ok);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   c-thinking — the calm working-indicator placeholder (chunk 09 leads it;
   chunk 13 documents it). Inserted optimistically by chat_controller the
   instant the user sends, removed when the real reply appends. A green-lit
   panel quietly working = "someone's got this" — never an alarm, never a
   frozen spinner (a bounded client timeout settles it into "still with
   you…"). It reuses the assistant alignment + identity cue.
   --------------------------------------------------------------------------- */
.c-thinking__bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-ok);
}

/* The phosphor "thinking…" readout — calm, low-key, natural case (a status,
   never shouting). --color-text-muted keeps it quiet and light-mode safe. */
.c-thinking__label {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Error state — a calm, blameless failed-turn affordance. NEVER red (red is
   reserved for destructive ops, Rule 2/4): a quiet muted line so "handled
   silently" never looks identical to "failed". The trigger is D5; the state
   exists regardless.
   --------------------------------------------------------------------------- */
.c-chat__msg--error .c-chat__bubble,
.c-thinking--error .c-thinking__bubble {
  border-left-color: var(--color-text-muted);
  color: var(--color-text-muted);
}

.c-chat__msg--error .c-thinking__label {
  color: var(--color-text-muted);
}

/* A skipped proactive turn ([NO_MESSAGE]) — a quiet debug breadcrumb in the WEB log only
   (never sent on any channel). Muted, data-font, low-key: "a routine looked and chose
   silence", never an alarm. A thin line, not a bubble. */
.c-chat__skip {
  margin: 0;
  align-self: flex-start;            /* left, like the assistant; the log is a flex column */
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Attachments — a forwarded-email file surfaced under its message bubble
   (chunk 10 / PLAN §8). A quiet raised card (matching the bubble surface)
   carrying the 📎 filename affordance, the extracted text or a blameless
   failure/skip note, an inline image preview, and the signed download link.
   Aligned to the user side (attachments only ever ride an inbound message).
   Token-driven; never red, never shouted.
   --------------------------------------------------------------------------- */
.c-chat__attachment {
  max-width: 80%;
  align-self: flex-end;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The 📎 filename · type label — the data font, quiet, natural case. */
.c-chat__attachment-name {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}

/* The extracted text / failure note — readable prose, author newlines kept. */
.c-chat__attachment-text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

/* The inline image preview — bounded so a large picture never blows out the
   log column; the original is one click away via the download link. */
.c-chat__attachment-image {
  max-width: 100%;
  max-height: 18rem;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.c-chat__attachment-actions {
  margin: 0;
}

.c-chat__attachment-download {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   The composer — keyboard-aware, sticky to the bottom, safe-area padded so
   the on-screen keyboard never hides it (mobile is the product, C4). The log
   scrolls above; the composer stays.
   --------------------------------------------------------------------------- */
.c-chat__composer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-base, 1);
  padding-top: var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-surface);
}

/* The engraved "Message" plaque label is dropped (placeholder + aria-label
   carry it) — hide the now-empty/required-only label group. */
.c-chat__composer .c-field__label {
  display: none;
}

/* The field itself: a comfortable touch target (≥44px) that auto-grows with
   its content (height is driven by chat_controller via the CSSOM — CSP-safe).
   Cap the growth so a long draft scrolls instead of eating the whole screen. */
.c-chat__composer textarea {
  min-height: 2.75rem;
  max-height: 40vh;
  max-height: 40dvh;
  resize: none;
}