/* Fixed light theme. This block is the whole palette — every colour in the
   interface is declared here and used only through var(). tests/server.test.js
   enforces that over the HTTP seam, along with WCAG AA on each pair, so retuning a
   value is safe but writing a colour anywhere else fails the build.

   --panel is deliberately *lighter* than --bg: the history pane and composer read
   as raised above the page. Inverting that turns them into inset wells and forces
   the bubbles white, so the guard checks absolute lightness too, not just ratios.

   Measured ratios live in docs/adr/0001-fixed-light-theme.md rather than here —
   three hand-maintained copies of the same numbers had already drifted once. */
:root {
  color-scheme: light;
  --bg: #f5f6f8;               /* page, tinted */
  --panel: #ffffff;            /* history pane + composer, raised */
  --border: #e2e4ea;
  --text: #1a1d23;
  --muted: #5b6472;
  --accent: #3b5bdb;           /* fill of the primary action */
  --on-accent: #ffffff;        /* label drawn on --accent */
  --user-bubble: #e6ecff;
  --assistant-bubble: #f1f3f7;
  --ok: #2e7d32;
  --error: #c0392b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app {
  max-width: 760px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.app-header h1 {
  font-size: 1.25rem;
  margin: 0;
}

.status {
  font-size: 0.8rem;
  color: var(--muted);
}

.status.ok::before {
  content: "● ";
  color: var(--ok);
}

.status.error::before {
  content: "● ";
  color: var(--error);
}

.history {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.4;
}

.msg.user {
  align-self: flex-end;
  background: var(--user-bubble);
}

.msg.assistant {
  align-self: flex-start;
  background: var(--assistant-bubble);
}

.msg.system {
  align-self: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.composer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer textarea {
  resize: vertical;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

/* Firefox's UA sheet draws placeholders at 54% opacity, which took --text on
   --panel down to 3.70:1 — real rendered text, below AA, and invisible to a guard
   that only reads tokens. Chrome substitutes its own grey instead, so the failure
   showed in one browser and not the other. Set the colour and the opacity
   explicitly so neither UA default applies. */
.composer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

button {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
}

button.secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}