/* 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; } /* ── ⭐ THE MESSAGE BODY HAS A SHAPE NOW (1 Sep 2026) ────────────────────────────────────────── Sum: "is all coming through as one line of code, on big wrapping scrolling block, even when bot uses white space." ⚠ mdLite had been emitting

since 18 Aug and NOTHING IN THE TREE STYLED IT — `msg-p` existed only on the line that created it. The paragraphs were real and flush against each other. This file is that missing ground, plus the blocks mdLite learned to emit the same day (headings · lists · fenced code). ⚠ Do NOT give .msg-p a top margin as well — :first-child would need clearing and the bubbles would drift apart. Bottom-only, and the last one is zeroed. */ .msg-p { margin: 0 0 .70em; } .msg-p:last-child { margin-bottom: 0; } .msg-h { margin: 1.05em 0 .4em; font-weight: 700; line-height: 1.35; } .msg-h:first-child { margin-top: 0; } .msg-h1 { font-size: 1.18em; } .msg-h2 { font-size: 1.10em; } .msg-h3, .msg-h4 { font-size: 1.02em; letter-spacing: .2px; } .msg-ul, .msg-ol { margin: .35em 0 .75em; padding-inline-start: 1.35em; } .msg-ul li, .msg-ol li { margin: 0 0 .28em; } .msg-ul { list-style: disc; } .msg-ol { list-style: decimal; } /* ⭐ THE COPY BLOCK. The highest-value region in any bot message for this human — he groks the concept and loses the mark on transcription, so the exact string has to be easy to drag across. ⚠ user-select is EXPLICIT: a convo ground that sets user-select:none to protect drag-to-move would make the one thing he actually needs impossible. */ pre.msg-code { margin: .5em 0 .8em; padding: 10px 12px; overflow-x: auto; background: rgba(0,0,0,.26); border: 1px solid var(--line); border-radius: 8px; } pre.msg-code code { font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; color: inherit; } pre.msg-code, pre.msg-code code, code.msg-tt { user-select: text; -webkit-user-select: text; cursor: text; } code.msg-tt { padding: .08em .34em; border-radius: 4px; background: rgba(0,0,0,.24); font: .92em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }