/* MAANUKA — AI-forward component layer. Chat/agent/evidence patterns for the Atlas
   product surfaces, built on tokens/ai.css. Same rules as the base layer: hairline
   borders, pill controls, rounded surfaces, fades only. */

/* — glass shell: anything floating over live content — */
.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}

/* — mono system label. The system's own voice is always mono, uppercase, tracked. — */
.label{font-family:var(--font-mono);font-size:var(--font-size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
.label-signal{color:var(--accent-ink)}

/* — agent badge: who is speaking — */
.agent{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-machine)}
.agent-dot{width:20px;height:20px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;font-size:9px;font-weight:500;background:var(--accent-chip-bg);color:var(--accent-chip-ink)}
.agent-dot-live{box-shadow:var(--glow-signal)}
.agent-dot-user{background:var(--surface-chip);color:var(--text-soft)}

/* — messages. Person = surface bubble, right-hugging. Agent = no bubble, full width,
     because the model's output is the page, not a chat aside. — */
.msg{display:flex;flex-direction:column;gap:var(--space-2);max-width:680px}
.msg-user{align-self:flex-end;align-items:flex-end}
.msg-user .msg-body{padding:12px 16px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);background:var(--surface-raised);border:1px solid var(--border-hairline)}
.msg-body{font-size:14px;line-height:var(--line-height-stream);color:var(--text-body)}
.msg-agent .msg-body{color:var(--text-soft)}
.msg-agent .msg-body p{margin:0 0 var(--space-3)}

/* — streaming caret: a 2px violet bar that blinks at the end of generated text — */
.caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--accent-fill);animation:maa-blink 1s steps(1,end) infinite}
@keyframes maa-blink{50%{opacity:0}}

/* — thinking: three dots easing in sequence. Never a spinner. — */
.thinking{display:inline-flex;align-items:center;gap:6px}
.thinking i{width:5px;height:5px;border-radius:50%;background:var(--accent-fill);opacity:.35;animation:maa-pulse 1.2s var(--ease) infinite}
.thinking i:nth-child(2){animation-delay:.15s}
.thinking i:nth-child(3){animation-delay:.3s}
@keyframes maa-pulse{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* — composer: the prompt input. Pill, glassy, rings violet on focus. — */
.composer{display:flex;align-items:flex-end;gap:var(--space-3);padding:10px 10px 10px 16px;border-radius:var(--radius-lg);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--border-hairline);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.composer:focus-within{border-color:transparent;box-shadow:var(--glow-signal)}
/* overflow-y:auto, not hidden. The min/max-height pair here assumes the JS auto-grow in
   PromptComposer.jsx; a hand-written <textarea> in a static specimen gets this CSS and none
   of that behaviour, and `hidden` made the unmeasured overflow both invisible AND unreachable.
   Scrollable is the safe default — the component sets overflow-y explicitly once it measures. */
.composer textarea{flex:1;min-width:0;border:0;outline:0;resize:none;overflow-x:hidden;overflow-y:auto;background:transparent;color:var(--text-body);font:inherit;font-size:14px;line-height:1.6;min-height:26px;max-height:160px;padding:6px 0}
.composer textarea::placeholder{color:var(--text-faint)}
.composer-tools{display:flex;align-items:center;gap:var(--space-2)}

/* — suggestion chips under the composer — */
/* Wraps rather than clips. A suggestion chip carries the words the user is about to click,
   so ellipsis or overflow would hide the thing being chosen; in a narrow rail a long
   suggestion is allowed two lines. nowrap here overflowed the rail by 11px. */
.chip{white-space:normal;text-align:left;max-width:100%;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-quiet);background:transparent;border:1px solid var(--border-hairline);border-radius:var(--radius-control);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip:hover{background:var(--color-signal-tint);border-color:var(--accent-ink);color:var(--accent-ink)}

/* — citations: superscript chip that ties a claim to a source —

     display MUST stay `inline`, never inline-flex/inline-block. An atomic inline-level box is a
     line-break opportunity on BOTH sides, so an atomic chip can be pushed onto its own line and
     stranded from the sentence it cites. A plain inline element is not a break opportunity, so
     the word, its punctuation and the chip wrap together as one unit. That is why the centering
     here is vertical-align + line-height rather than flex, and why there is no min-width or
     height (neither applies to a non-replaced inline).

     Interactivity is scoped to .cite[role="button"], which is what CitationChip emits. A bare
     .cite span — the right thing in a static template, where the number is click-to-edit text —
     gets no cursor:pointer and no hover state, because an element that looks clickable, responds
     to hover, and then does nothing is worse than a plain marker. Give it an onClick through
     CitationChip and the affordance appears with the role, focus and accessible name that make
     it real.

     Two authoring rules follow from this:
     1. The chip goes AFTER punctuation — "emissions,[4]" not "emissions[4],". Editorial standard
        in cited prose, and it keeps the marker reading as a footnote rather than as markup.
     2. margin-left only. A right margin renders as a space before whatever follows, which reads
        as "emissions 4 , concentrated" at every viewport width. — */
.cite{display:inline;padding:1px 5px;margin:0 0 0 2px;font-family:var(--font-mono);font-size:9px;line-height:1;vertical-align:.35em;color:var(--accent-chip-ink);background:var(--accent-chip-bg);border-radius:var(--radius-sm);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cite[role="button"]{cursor:pointer}
.cite[role="button"]:hover{background:var(--accent-fill);color:var(--text-on-accent)}
.cite[role="button"]:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.source{display:flex;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);transition:background var(--dur) var(--ease)}
.source:hover{background:var(--surface-hover)}
.source-index{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);padding-top:2px}
.source-title{font-size:13px;line-height:1.4;color:var(--text-body)}
.source-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-faint)}

/* — confidence meter: four ticks, filled by level. Verification is always visible. — */
.confidence{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.confidence-ticks{display:flex;gap:3px}
.confidence-ticks span{width:14px;height:3px;border-radius:2px;background:var(--surface-track)}
.confidence-grounded{color:var(--color-positive)}
.confidence-grounded .on{background:var(--color-positive)}
.confidence-inferred{color:var(--color-caution)}
.confidence-inferred .on{background:var(--color-caution)}
.confidence-unverified{color:var(--color-critical)}
.confidence-unverified .on{background:var(--color-critical)}

/* — tool call trace: what the agent did, collapsible, mono, quiet — */
.trace{border:1px solid var(--border-hairline);border-radius:var(--radius-sm);overflow:hidden}
.trace-head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:9px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-dim);background:transparent;border:0;cursor:pointer;text-align:left;transition:background var(--dur) var(--ease)}
.trace-head:hover{background:var(--surface-hover)}
.trace-status{width:6px;height:6px;flex:none;border-radius:50%;background:var(--color-positive)}
.trace-status-running{background:var(--accent-fill);animation:maa-pulse 1.2s var(--ease) infinite}
.trace-status-failed{background:var(--color-critical)}
.trace-body{padding:0 12px 12px 30px;font-family:var(--font-mono);font-size:11px;line-height:1.7;color:var(--text-dim);white-space:pre-wrap}
.trace-arrow{margin-left:auto;transition:transform var(--dur) var(--ease)}
.trace-open .trace-arrow{transform:rotate(90deg)}

/* — signal card: a monitored input from the world (the Atlas dashboard unit) — */
.signal{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-6) var(--space-6);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-hairline);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.signal:hover{border-color:var(--accent-ink);background:var(--surface-subtle)}
.signal-value{font-family:var(--font-heading);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.signal-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px}
.signal-delta-up{color:var(--color-positive)}
.signal-delta-down{color:var(--color-critical)}
.signal-delta-flat{color:var(--text-faint)}
.signal-spark{height:34px;width:100%;margin-top:var(--space-2)}

/* — app chrome for the Atlas kit — */
.rail{display:flex;flex-direction:column;gap:4px;width:236px;flex:none;padding:20px 14px;border-right:1px solid var(--border-hairline);background:var(--color-bg)}
.rail-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-dim);background:transparent;border:0;width:100%;text-align:left;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.rail-item:hover{background:var(--surface-hover);color:var(--text-body)}
.rail-item-active{background:var(--color-signal-tint);color:var(--accent-ink)}
.rail-group{margin:var(--space-6) 0 var(--space-2);padding:0 12px}

/* — the koru logomark ships as black artwork on transparent: correct as-is on the light
     ground. tokens/theme.css inverts it under [data-theme="dark"]. Keep the class on the
     <img> in both themes; it is the hook, not the effect. — */