/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  the top bar — themed per skin (some wear ... search: "the top bar — themed"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — The visual layout and styling of `.convo` (the one-box conversation container),
   **`.convo-screen` (the scrollable message area), and `.convo-head` (the top bar). These class
   **names are the contract; any HTML using them depends on the flex structure, overflow
   **behavior, and spacing defined here. Also owns styling for message variants (`.msg-act`,
   **`.msg-note`, `.msg-seeded`), the code fence collapse UI (`.code-bar`, `.code-head`,
   **`.code-body`), the injection glass box (`.msg-inj`, `.inj-head`, `.inj-body`), and the
   **type-in-stream input (`.msg-stream`).
   
   **TOUCH HERE** —
   - Adjust conversation container height or flex direction → `.convo` L8–13
   - Change message area spacing, padding, or scrollbar appearance → `.convo-screen` L15–26
   - Alter message line-height or word-wrap behavior → `.msg` L28
   - Adjust top bar height, padding, or icon sizing → `.convo-head` L66–78
   - Change code block max-height or font → `.code-body` L45
   - Adjust injection box transparency, padding, or max-height → `.inj-body` L52
   - Modify type-in-stream placeholder color or min-height → `.msg-stream` L62–63
   - Change dim/accent/danger colors used across message types → `var(--text-dim)`,
   - `var(--accent)`, `var(--danger)` (lines 31–38)
   
   **TRAPS** —
   - `.convo` uses `flex-direction: column` and `overflow: hidden` (L10, L12); changing these
   - breaks the layout contract with `.convo-screen` and `.convo-head`.
   - `.convo-screen` uses `flex: 1; min-height: 0` (L16–17); the `min-height: 0` is load-bearing
   - for flex shrinking to work; removing it breaks scrolling.
   - `.msg-stream` is the live type-in input; its `outline: none` (L62) and `data-ph` attribute
   - (L63) are set by JavaScript in workspace.js — style changes here must not break that
   - contract.
   - `.code-head` and `.code-copy` both use `float: right` and `cursor: pointer` (L42–43);
   - reordering or removing either breaks the collapse UI.
   - Color variables (`--text-dim`, `--accent`, `--danger`, `--surface`, `--surface-2`, `--line`)
   - are defined elsewhere (not in this file); they must exist or all themed elements fail
   - silently.
   
   **DO NOT** —
   - Do not rename `.convo`, `.convo-screen`, `.convo-head`, `.msg-stream`, or `.msg-inj` — these
   - are hard-coded in HTML and JavaScript.
   - Do not add or remove the webkit scrollbar rules (L25–26) without checking browser support
   - elsewhere.
   - Do not move the type-in-stream styling (L61–63) — it is tightly coupled to workspace.js
   - behavior.
   - Do not change the injection box philosophy (L47–48 comment) without understanding it is a
   - design constraint, not a bug.
   - Do not add input validation, event handlers, or state management here — that belongs in
   - workspace.js or the chat controller.
   
   
   
   ---

END IC SHIP PASS
*/

/* convo.css — THE ONE BOX. a conversation + a type-in-stream. nothing else.
   no input box, no toggles, no jewels. the universal element every skin dresses.
   stripped from toto's chat skins (oz4.2 + toto). build phase: folio header at ship.

   the type-in-stream: the input IS the next message. you type inline, where the
   message will live — the bot scrolls above, your line grows in place below. */

.convo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.convo-screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.convo-screen::-webkit-scrollbar { width: 4px; }
.convo-screen::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.4); border-radius: 2px; }

.msg { display: block; max-width: 100%; word-wrap: break-word; line-height: 1.5; }

/* the conductor's glass box — the bot working, in plain words (set by chatUI in workspace.js). */
.msg-act  { color: var(--text-dim); font-style: italic; }            /* a one-line "what I'm doing" */
.msg-act::before { content: "▸ "; font-style: normal; }
.msg-note { color: var(--text-dim); }                                 /* a glass-box status line */
.msg-note-plan   { color: var(--accent); }                            /* 🪵 the milled queue */
.msg-note-strike,
.msg-note-out    { color: var(--danger, #c0594a); }                   /* a strike / strikeout */
.msg-note-walk,
.msg-note-capped { color: var(--accent); }                            /* asked the human / capped at 9 */

/* the code detector — a ```fence``` collapses to one line + copy; expand to read (set in workspace.js). */
.code-bar  { display: block; margin: 5px 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.code-head { font: inherit; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 5px 10px; letter-spacing: .04em; }
.code-copy { float: right; font: inherit; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 5px 10px; }
.code-copy:hover, .code-head:hover { color: var(--text); }
.code-body { margin: 0; padding: 9px 11px; max-height: 320px; overflow: auto; font-family: ui-monospace, 'SF Mono', monospace; font-size: var(--fs-ui); line-height: 1.45; color: var(--text); white-space: pre; border-top: 1px solid var(--line); }

/* ⌁ the injection — THE GLASS BOX. transparency IS the aesthetic; it whispers, it does not announce. no box,
   no border at rest: a faint line you can open to read exactly what we send. (philo, not ui — Sum.) */
.msg-inj  { display: block; margin-bottom: 2px; }
.inj-head { width: 100%; text-align: left; font: inherit; font-size: var(--fs-ui); color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 3px 2px; letter-spacing: .08em; opacity: .55; transition: opacity .15s, color .15s; }
.inj-head:hover { color: var(--accent); opacity: 1; }
.inj-body { margin: 4px 0 2px; padding: 10px 12px; max-height: 320px; overflow: auto; font-family: ui-monospace, 'SF Mono', monospace; font-size: var(--fs-ui); line-height: 1.55; color: var(--text-dim); white-space: pre-wrap; background: var(--surface); border-radius: 6px; }

/* seeded (replayed, NOT live) turns — dimmer still: memory, not a turn you just typed. */
.msg-seeded { opacity: .5; }

/* the SEAM — a faint thread in the glass where what's-sent folds. barely there until you look for it. */
.msg-seam { color: var(--text-dim); font-size: var(--fs-ui); font-style: italic; text-align: center; opacity: .4; padding: 1px 0; letter-spacing: .06em; }
.msg-seam::before { content: "·  "; opacity: .6; }

/* the type-in-stream — editable, no separate box. the cursor lives in the convo. */
.msg-stream { outline: none; cursor: text; min-height: 1.4em; }
.msg-stream:empty::before { content: attr(data-ph); color: #8a8a8a; }

/* ── the top bar — themed per skin (some wear stolen panorama art). ── */
.convo-head {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  font-weight: 700;
  letter-spacing: 1px;
  overflow: hidden;
}
.convo-head .head-icon  { height: 30px; width: auto; object-fit: contain; flex-shrink: 0; }
.convo-head .head-emoji { font-size: 24px; line-height: 1; }
.convo-head .head-title { font-size: 18px; }