/* STARNET — comms.css : the PREMIUM COMMS layer (the right-hand chat panel). Loads AFTER app.css (index.html), so every rule here overrides the base chat styling by cascade order — this is the ONE place COMMS polish lives (chat.js owns the markup; app.css/style.css/motion.css are owned by other lanes and untouched). Aesthetic is LOCKED: amber phosphor, VT323, existing theme vars only. "Premium" comes from MATERIAL, DEPTH & RHYTHM — not new colour. Rules honoured throughout: - ZERO hardcoded colours. Only --ph / --ph-bright / --ph-dim / --ph-faint / --ph-glow / --ph-glow2 / --gold / --ok / --bad / --ink / --text / --panel(2) and the sizing/motion tokens. - Any COMPOSITE var that references another var is declared on `body` (theme-swap trap) — none needed here (we only ever REFERENCE the themed tokens, never define a phosphor-derived composite). - Animate transform / opacity / colour / border / box-shadow only — never layout on hot paths. - A single prefers-reduced-motion block at the bottom collapses the added motion. Reuses motion.css tokens: --t-fast/med/slow, --ease-out/--ease-soft, and the blinking-▮ language. */ /* the panel is the positioning context for the pinned "new messages" pill (base is static) */ #chat-panel { position: relative; } /* give the transcript a touch more vertical rhythm between speaker turns */ #chat-log { gap: 5px; } /* ============================================================ 1 · TRANSMISSION CARDS — agent/user messages as airy console cards: a speaker chip (inverted phosphor, like a window title chip) + a dim right-aligned HH:MM stamp in one header row, and card depth via a hairline + faint inset (NOT a heavy box). ============================================================ */ /* the header row: speaker chip on the left, timestamp hard-right */ .cmsg .cmsg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 9px 0 4px; } /* speaker chip — inverted phosphor plate, mirroring the window title chips */ .cmsg .cmsg-head .who { display: inline-block; margin: 0; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: var(--ph-dim); padding: 1px 7px; border-radius: 3px; line-height: 1.5; box-shadow: 0 1px 0 rgba(0,0,0,.4); } .cmsg.agent .cmsg-head .who { background: var(--ph); } .cmsg.user .cmsg-head .who { background: var(--gold); } /* dim, quiet timestamp — HOVER-ONLY (the glance law): reference info, not reading info. It keeps its layout slot (no reflow on hover) and simply fades in when the card is inspected. */ .cmsg .cmsg-ts { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 1px; color: var(--ph-dim); opacity: 0; font-variant-numeric: tabular-nums; transition: opacity var(--t-fast) var(--ease-soft); } .cmsg:hover .cmsg-ts, .cmsg:focus-within .cmsg-ts { opacity: .7; } /* GROUPING — a same-speaker continuation collapses its whole header (chip + stamp), so a run of turns reads as one card, matching the base grouping law (which only hid the bare .who). A tool rail / beat between two prose rows breaks the adjacency, so the header correctly reappears after an interruption. */ .cmsg.agent + .cmsg.agent > .cmsg-head, .cmsg.user + .cmsg.user > .cmsg-head { display: none; } /* agent transmission card: the existing left phosphor rail + a faint recessed fill and hairline inset, airy not boxy. Keeps the base padding-left so grouped bodies still align under the rail. SCOPED to prose messages — the work-log beats (tool / consent / turn-in / nudge / deliverable) keep their own app.css treatment (equal specificity + later load would otherwise stomp the gold beat fills). */ .cmsg.agent:not(.tool):not(.consent):not(.turnin):not(.nudge):not(.deliverable):not(.reply) { padding: 1px 10px 5px 11px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, rgba(var(--ph-rgb),.028), transparent 62%); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.035); } /* user card: gold right rail, a whisper of gold fill so the Commander's side is visually distinct */ .cmsg.user { padding: 1px 11px 5px 10px; border-radius: 4px 0 0 4px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.05), transparent 60%); } /* copy button sits inside the padded card — nudge it clear of the header chip */ .cmsg-copy { top: 6px; right: 5px; } /* SYSTEM register — command/client output (/help, /whoami, unknown-command, …). Dim, no lit chip, never a card: the station's own words, clearly NOT the agent's speech. A quiet "SYSTEM" tag on the first of a run; consecutive system lines group under it. Theme tokens only. */ .cmsg.system { font-size: 13.5px; padding-left: 11px; border-left: 1px dashed var(--ph-faint); } .cmsg.system .who { display: inline-block; margin: 6px 0 2px; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ph-dim); opacity: .7; } .cmsg.system .body { color: var(--ph-dim); letter-spacing: .3px; } .cmsg.system + .cmsg.system .who { display: none; } /* a run of system lines reads as one block */ /* COLLAPSIBLE SYSTEM CARD — /history, /help: a dim header button that expands a body of rows (chat.js systemCard). Keeps verbose command output from flooding the transcript. */ .cmsg.system.syscard { border-left: 1px dashed var(--ph-faint); padding-left: 0; } .syscard-head { display: inline-flex; align-items: baseline; gap: 6px; width: 100%; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ph-dim); background: transparent; border: 0; padding: 4px 6px 4px 11px; } .syscard-head:hover { color: var(--ph); } .syscard-head .syscard-chev { flex: 0 0 auto; font-size: 10px; transition: transform var(--t-fast) var(--ease-soft); } .cmsg.system.syscard.open .syscard-chev { transform: rotate(90deg); color: var(--ph); } .syscard-head .syscard-title { flex: 1 1 auto; letter-spacing: .3px; } .syscard-body { padding: 2px 6px 6px 22px; } .syscard-body[hidden] { display: none; } .syscard-row { font-size: 12.5px; line-height: 1.5; color: var(--ph-dim); white-space: pre-wrap; overflow-wrap: anywhere; } /* SLASH PALETTE — a dim category tag on each row so the command surface reads by area (no reorder). */ .slash-item .slash-cat { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ph-dim); opacity: .6; align-self: center; } /* TRIM MARKER — the "…N earlier turns trimmed" scrollback boundary as a dim, centered, hairline-flanked line (mirrors the broadcast register's chrome). A boundary the reader can see, not a silently dropped record. */ .cmsg.trim-marker { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 4px; padding: 2px 4px; background: none !important; box-shadow: none !important; border: 0 !important; } .cmsg.trim-marker::before, .cmsg.trim-marker::after { content: ""; flex: 1 1 auto; height: 1px; max-width: 70px; background: linear-gradient(90deg, transparent, var(--ph-faint), transparent); } .cmsg.trim-marker .tm-line { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ph-dim); opacity: .8; white-space: nowrap; } /* TERMINAL MARKDOWN — a small, restrained subset in the agent's prose (chat.js renderMarkdown). Phosphor tokens only; a header is BRIGHT text, never oversized web type. XSS is handled upstream (escape-then-wrap). */ .cmsg .body .md-b { color: var(--ph-bright); } .cmsg .body .md-h { display: inline-block; color: var(--ph-bright); letter-spacing: .5px; } .cmsg .body .md-li { display: inline-block; } .cmsg .body .md-li .md-bul { color: var(--ph); } .cmsg .body .md-code { font-family: inherit; color: var(--ph-bright); background: rgba(var(--ph-rgb),.10); border: 1px solid var(--ph-faint); border-radius: 3px; padding: 0 4px; } .cmsg .body .md-pre { display: block; margin: 4px 0; padding: 6px 9px; white-space: pre; overflow-x: auto; font-family: inherit; font-size: 13.5px; color: var(--ph-bright); background: rgba(var(--ph-rgb),.07); border: 1px solid var(--ph-faint); border-left: 2px solid var(--ph-dim); border-radius: 4px; } .cmsg .body .md-pre::-webkit-scrollbar { height: 7px; } .cmsg .body .md-pre::-webkit-scrollbar-thumb { background: var(--ph-faint); border-radius: 4px; } /* ENTRANCE — a one-time subtle fade/slide for a newly-added message card (motion tokens). Applied to prose cards only; work-log beats (tool/consent/turn-in/nudge/deliverable) keep their own beat motion. */ @keyframes comms-msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cmsg.agent:not(.tool):not(.consent):not(.turnin):not(.nudge):not(.deliverable), .cmsg.user { animation: comms-msg-in var(--t-med) var(--ease-out) backwards; } /* BULK REPLAY — a full history render marks every row .no-anim so up to 120 cards don't all fire the entrance at once (a jarring cascade on open/switch). Live rows created afterward are unmarked and animate normally. */ .cmsg.no-anim { animation: none !important; } /* ============================================================ 2 · TOOL CHIPS — the agent's real actions as compact chips in a thin activity rail. glyph · name · short args, folded with the result (✓/✗ + duration). Click a chip toggles full detail. Cheap: a one-time fade-in, no per-chip looping animation. ============================================================ */ /* the rail groups consecutive chips tightly, indented under the agent's left rail */ .tool-rail { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 3px 11px; padding-left: 9px; border-left: 1px solid var(--ph-faint); } .tool-chip { border: 1px solid var(--ph-faint); border-radius: var(--r-sm); background: rgba(var(--ph-rgb),.03); overflow: hidden; animation: comms-msg-in var(--t-fast) var(--ease-out) backwards; transition: border-color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft); } .tool-chip:hover { border-color: var(--ph-dim); background: rgba(var(--ph-rgb),.055); } /* the one-line head — a button so it's keyboard-operable; ellipsis-clamps the args */ .tool-chip .tc-head { display: flex; align-items: baseline; gap: 6px; width: 100%; font: inherit; font-size: 12.5px; letter-spacing: .3px; text-align: left; color: var(--ph-dim); background: transparent; border: 0; cursor: pointer; padding: 3px 8px; line-height: 1.35; min-width: 0; } .tool-chip .tc-glyph { flex: 0 0 auto; color: var(--ph); } .tool-chip .tc-name { flex: 0 0 auto; color: var(--ph); letter-spacing: .4px; } .tool-chip .tc-args { flex: 1 1 auto; min-width: 0; color: var(--ph-dim); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-chip .tc-stat { flex: 0 0 auto; margin-left: auto; color: var(--ph-dim); font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; } /* pending call: a soft blink on the glyph (the harness IS acting) */ .tool-chip.pending .tc-glyph { color: var(--ph); animation: comms-blink 1s steps(1) infinite; text-shadow: 0 0 6px var(--ph-glow); } /* resolved states — fold the outcome into the chip */ .tool-chip.ok .tc-glyph { color: var(--ok); } .tool-chip.err .tc-glyph, .tool-chip.err .tc-stat { color: var(--bad); } .tool-chip.err { border-color: var(--bad); background: rgba(255,92,77,.05); } /* A1: a skill-flavored chip (consulting / writing a skill) — a subtle left rule keeps the phosphor language but marks it as skillbase activity so the Commander can spot the agent tending its own recipes. */ .tool-chip.skill { border-left: 2px solid var(--ph-dim); } .tool-chip.skill .tc-name { letter-spacing: .3px; } /* expanded detail — hidden until the chip is .open; caps + wraps the full args/result text */ .tool-chip .tc-detail { display: none; padding: 0 8px 6px 8px; border-top: 1px solid var(--ph-faint); margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; word-break: break-word; } .tool-chip.open .tc-detail { display: block; } /* EXPAND AFFORDANCE — a dim ▸ chevron on the chip head signals it opens; it rotates to ▾ when expanded, so the chip visibly reads as a disclosure control (aria-expanded lives on the .tc-head button for AT). */ .tool-chip .tc-exp { flex: 0 0 auto; color: var(--ph-dim); font-size: 10px; opacity: .8; transition: transform var(--t-fast) var(--ease-soft); } .tool-chip.open .tc-exp { transform: rotate(90deg); color: var(--ph); } .tool-chip .tc-d-args { color: var(--ph-dim); padding-top: 5px; } .tool-chip .tc-d-res { color: var(--text); padding-top: 4px; } .tool-chip .tc-d-res.err { color: var(--bad); } @keyframes comms-blink { 50% { opacity: .25; } } /* STARTER-CHIP EMPTY STATE — the first-run hint gains a couple of tappable openers (chat.js maybeEmptyState). The line keeps its dim centered treatment; the chips sit under it, reusing the .choice vocabulary. */ .cmsg-empty-line { margin-bottom: 10px; } .cmsg-empty-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .cmsg-empty .cmsg-starter { font-size: 13px; } /* the legacy plain tool line (replay / stop-reason) keeps app.css's dim treatment, just tightened here */ .cmsg.tool { margin-left: 0; } /* COMMS GLYPHS — inline currentColor SVGs (folder / file / image) that replaced the color emoji. They inherit the surrounding phosphor colour and ride the text baseline. */ .comms-glyph { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.13em; flex: 0 0 auto; } .comms-glyph svg { width: 100%; height: 100%; display: block; } .deliverable-folder .fb-label { margin-left: 4px; } /* ============================================================ 3 · LIVE WORKING-PRESENCE CARD — one card pinned at the transcript bottom while a run is in flight: blinking ▮ + status VERB + current tool + elapsed. Resolves in place into a compact one-line run summary (■ RUN COMPLETE · 2:14). Truthful liveness: the ▮ only blinks while the harness is actually running. ============================================================ */ #comms-presence.comms-presence { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; padding: 6px 11px; border-left: 2px solid var(--ph); border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--ph-faint), rgba(0,0,0,.25)); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.05), 0 0 12px var(--ph-glow2); font-size: 13px; letter-spacing: .5px; color: var(--ph-bright); animation: comms-msg-in var(--t-med) var(--ease-out); } #comms-presence .cp-dot { flex: 0 0 auto; color: var(--ph); text-shadow: 0 0 6px var(--ph-glow); animation: comms-blink 1s steps(1) infinite; } #comms-presence .cp-verb { flex: 0 0 auto; color: var(--ph-bright); letter-spacing: 1.5px; text-shadow: 0 0 5px var(--ph-glow2); } #comms-presence .cp-tool { flex: 1 1 auto; min-width: 0; color: var(--ph-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #comms-presence .cp-tool.has::before { content: '· '; opacity: .7; } #comms-presence .cp-time { flex: 0 0 auto; margin-left: auto; color: var(--ph-dim); font-size: 12px; font-variant-numeric: tabular-nums; opacity: .9; } /* PAUSED-ON-APPROVAL — the run is stopped on the sidecar waiting for the Commander. Reads as a deliberate hold, NOT a working state: the ▮ stops blinking (steady, dim) and the whole card takes the gold "attention" accent so a beginner never mistakes it for a crash. Truthful telemetry: this only renders while Channels.pendingOf() is a live consent. */ #comms-presence.comms-presence.paused { border-left-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), rgba(0,0,0,.25)); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.05), 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent); } #comms-presence.paused .cp-dot { animation: none; color: var(--gold); text-shadow: 0 0 6px color-mix(in srgb, var(--gold) 55%, transparent); opacity: .9; } #comms-presence.paused .cp-verb { color: var(--gold); text-shadow: 0 0 5px color-mix(in srgb, var(--gold) 45%, transparent); } #comms-presence .cp-tool.paused-note { color: var(--gold); flex: 1 1 auto; white-space: normal; opacity: .95; } #comms-presence .cp-tool.paused-note::before { content: ''; } /* RESOLVED — the card collapses to a single quiet summary line, no blink, no live glow */ #comms-presence.resolved { display: block; color: var(--ph-dim); font-size: 12px; letter-spacing: 1px; border-left-color: var(--ph-dim); background: none; box-shadow: none; text-shadow: none; padding: 4px 11px; animation: none; } #comms-presence.resolved.err { color: var(--bad); border-left-color: var(--bad); } #comms-presence.resolved.stopped { color: var(--gold); border-left-color: var(--gold); } /* RESOLVED + FOLD — a resolved summary that carries the run's tool rails becomes a disclosure control: "■ RUN COMPLETE · 16s · 3 tools ▸". The machinery tier RECEDES (dimmer than speech) until asked for. */ #comms-presence.resolved { opacity: .75; } #comms-presence.resolved.has-fold { cursor: pointer; display: flex; align-items: baseline; gap: 6px; } #comms-presence.resolved.has-fold:hover { opacity: 1; color: var(--ph); } #comms-presence.resolved.has-fold:focus-visible { outline: 1px solid var(--ph-dim); outline-offset: 2px; opacity: 1; } #comms-presence.resolved .cp-chev { flex: 0 0 auto; font-size: 10px; opacity: .8; transition: transform var(--t-fast) var(--ease-soft); } #comms-presence.resolved.open .cp-chev { transform: rotate(90deg); } /* the folded work log — the run's tool rails, untouched, just collapsed out of the reading line */ .run-fold { margin: 0 0 2px 11px; } .run-fold[hidden] { display: none; } .run-fold .tool-rail { margin-left: 0; } /* ============================================================ 4 · JUMP-TO-LATEST PILL — while scrolled up: a dim, persistent "↓ latest" affordance; brightens to "new messages ↓" when fresh content lands. Anchored to #chat-log's bottom edge — chat.js sets `bottom` inline from the live composer height (no magic offset). ============================================================ */ .comms-newpill { position: absolute; left: 50%; bottom: 74px; z-index: 6; /* bottom is overwritten inline by chat.js */ transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; color: var(--ph); background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 9%, var(--panel2)), var(--panel2)); border: 1px solid var(--ph-dim); border-radius: 999px; padding: 5px 15px; line-height: 1.3; box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .18), 0 4px 14px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft); } /* the drawn ▾ chevron — a glyph the pill owns (crisper than a font arrow, nudges on hover) */ .comms-newpill::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease-out); } .comms-newpill.show { opacity: .85; transform: translate(-50%, 0); pointer-events: auto; } /* fresh content while unstuck → the lit, inverted-phosphor alert variant with a beacon dot */ .comms-newpill.hasnew { color: var(--ink); background: linear-gradient(180deg, var(--ph-bright), var(--ph)); border-color: var(--ph-bright); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 16px var(--ph-glow2), 0 4px 14px rgba(0,0,0,.55); text-shadow: none; } .comms-newpill.hasnew::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .85; animation: newpill-beat 1.4s var(--ease-soft) infinite; } .comms-newpill.hasnew.show { opacity: 1; } .comms-newpill:hover { color: var(--ink); background: var(--ph-bright); border-color: var(--ph-bright); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 20px var(--ph-glow), 0 4px 14px rgba(0,0,0,.55); opacity: 1; } .comms-newpill:hover::after { transform: rotate(45deg) translate(2px, 2px); } .comms-newpill:active { transform: translate(-50%, 1px); } .comms-newpill:focus-visible { outline: 2px solid var(--ph-bright); outline-offset: 2px; } @keyframes newpill-beat { 0%, 100% { opacity: .85; } 50% { opacity: .35; } } /* ============================================================ 5 · REDUCED MOTION — collapse the added COMMS motion (extends motion.css's convention). Idle blinks drop to a static state; entrances become instant. ============================================================ */ @media (prefers-reduced-motion: reduce) { .cmsg.agent:not(.tool):not(.consent):not(.turnin):not(.nudge):not(.deliverable), .cmsg.user, .tool-chip, #comms-presence.comms-presence { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .tool-chip.pending .tc-glyph, #comms-presence .cp-dot { animation: none !important; opacity: .85; } .comms-newpill { transition-duration: 0.01ms !important; } .comms-newpill.hasnew::before { animation: none !important; opacity: .85; } } /* ============================================================ 6 · CELEBRATION — the terse station BROADCAST line (level-up / quest-complete / trophy). NOT a transmission card: it's an ambient system line — dim, letter-spaced, centered, with a hairline rule to either side of the text. The eerie register: a CRT broadcast surging in, never confetti. Theme vars only (the suit-colour tint on .bc-name is set inline in chat.js — the one established per-agent colour exception, mirroring the canvas nameplate). A one-shot surge-in on entrance; nothing lingers or blinks (a MOMENT, per the COMMS beat rules). ============================================================ */ .cmsg.broadcast { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; padding: 3px 4px; background: none !important; box-shadow: none !important; border: 0 !important; } /* COALESCED STACK — consecutive station lines share one block: a centered column of lines between the same flanking hairlines, so a burst of trophies/quests reads as ONE quiet moment. */ .cmsg.broadcast .bc-stack { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } /* per-LINE tone (a shared block can mix tones — gold trophies over plain quest lines) */ .cmsg.broadcast .bc-line.bc-gold { color: var(--gold); text-shadow: 0 0 7px var(--ph-glow); } .cmsg.broadcast .bc-line.bc-gold .bc-glyph { color: var(--gold); opacity: 1; } /* the hairline rules that flank the centered line */ .cmsg.broadcast::before, .cmsg.broadcast::after { content: ""; flex: 1 1 auto; height: 1px; max-width: 84px; background: linear-gradient(90deg, transparent, var(--ph-faint), transparent); } .cmsg.broadcast .bc-line { flex: 0 0 auto; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ph-dim); text-shadow: 0 0 5px var(--ph-glow2); white-space: nowrap; font-variant-numeric: tabular-nums; } .cmsg.broadcast .bc-glyph { color: var(--ph); opacity: .8; } /* .bc-name carries its per-agent suit colour inline (chat.js) — that tint IS its emphasis; no synthesized bold (VT323 is single-weight, so font-weight only smears). */ /* trophies are rarer → a brighter, gold-accented treatment (kept restrained) */ .cmsg.broadcast.broadcast-gold .bc-line { color: var(--gold); text-shadow: 0 0 7px var(--ph-glow); } .cmsg.broadcast.broadcast-gold .bc-glyph { color: var(--gold); opacity: 1; } .cmsg.broadcast.broadcast-gold::before, .cmsg.broadcast.broadcast-gold::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5; } /* E6: a non-clean background-process exit — amber fault register (a crashed dev server / killed watcher). */ .cmsg.broadcast.broadcast-warn .bc-line { color: var(--warn); text-shadow: 0 0 6px rgba(232,161,58,.5); } .cmsg.broadcast.broadcast-warn .bc-glyph { color: var(--warn); opacity: 1; } .cmsg.broadcast.broadcast-warn::before, .cmsg.broadcast.broadcast-warn::after { background: linear-gradient(90deg, transparent, var(--warn), transparent); opacity: .4; } /* the surge-in: a brief phosphor bloom that settles — the CRT "broadcast lands" feel, once, then still */ @keyframes bc-surge { 0% { opacity: 0; letter-spacing: 6px; text-shadow: 0 0 14px var(--ph-glow); } 55% { opacity: 1; } 100% { opacity: 1; letter-spacing: 2.5px; } } .cmsg.broadcast .bc-line { animation: bc-surge var(--t-slow, .34s) var(--ease-out, ease-out) both; } /* reduced motion: the line appears instantly at its settled state — no surge, no glow ramp */ @media (prefers-reduced-motion: reduce) { .cmsg.broadcast .bc-line { animation: none !important; letter-spacing: 2.5px; } } /* ============================================================ 6b · BEAT HIERARCHY — the gold-inset beat family stays gold (the "station is asking" voice, per the COMMS beat rules) but only a BLOCKING prompt (.cmsg.consent — the run is paused on the Commander) carries the full lit chrome. Passive turn-ins (rate-the-work, receipts, digests, study, trust, thread) drop to a whisper: thinner rail, fainter fill, no glow, one step smaller — subordinate to the agent's speech, never competing. ============================================================ */ .cmsg.turnin { font-size: 14px; margin: 5px 0; padding: 7px 11px 8px; border-left-width: 1px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.045), rgba(var(--gold-rgb),.015)); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.05); } .cmsg.turnin .body { color: var(--ph); } /* the quiet aside keeps the same subordinate register */ .cmsg.agent.nudge .body { font-size: 14px; } /* ============================================================ 7 · COMPOSER — the message input is a full-width, auto-growing textarea on its OWN line, with the control cluster (interrupt · model dock · voice · mic) on a second line beneath. This retires the old single-line , which — sharing one row with the model dock + voice/mic chips — collapsed to a few characters on a narrow COMMS panel and, being single-line, could NEVER reveal a long message. The textarea wraps and grows with the message (chat.js sets its height; max-height here caps it, then it scrolls), so the whole message stays visible while typing at ANY panel width. Theme/sizing tokens only. ============================================================ */ #chat-inputrow { flex-direction: column; align-items: stretch; gap: 7px; } /* EDIT LINE — the pulsing ">" prompt + the growing textarea. Bottom-aligned so the prompt rides the last line as the box grows (terminal register: the caret line is where the prompt sits). */ .chat-editline { display: flex; align-items: flex-end; gap: 7px; min-width: 0; } .chat-editline .prompt { flex: 0 0 auto; } /* the textarea itself spans the panel, wraps, and is height-managed by chat.js up to max-height, then scrolls. resize:none — the auto-grow owns the height, not a drag handle. Long unbroken tokens (URLs) wrap instead of forcing a horizontal scroll. */ #chat-input { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; resize: none; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 32px; max-height: 168px; line-height: 1.45; padding: 6px 7px; font-family: inherit; font-size: 16px; } /* keep the phosphor scrollbar language when the composer caps out and scrolls */ #chat-input::-webkit-scrollbar { width: 8px; } #chat-input::-webkit-scrollbar-thumb { background: var(--ph-faint); border-radius: 4px; } #chat-input::-webkit-scrollbar-thumb:hover { background: var(--ph-dim); } /* SEND — an inverted-phosphor chip riding the bottom of the edit line beside Enter. A ⏎-arrow glyph + a SEND label; it collapses to just the glyph on a narrow panel. Themed tokens only, matches the window title-chip register (inked-on-phosphor) so it reads as the primary action, not chrome. */ /* SEND — ROBCO command: [ SEND ] in dim terminal brackets; hover slams the solid invert block. The arrow glyph is retired — on a RobCo terminal the command IS text. transition:none = snap. */ .chat-send { flex: 0 0 auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--ph); background: transparent; border: none; border-radius: 0; padding: 6px 8px; cursor: pointer; user-select: none; line-height: 1.1; text-shadow: 0 0 6px var(--ph-glow2); transition: none; } .chat-send svg { display: none; } .chat-send::before { content: '['; color: var(--ph-dim); } .chat-send::after { content: ']'; color: var(--ph-dim); } .chat-send:hover { color: var(--ink); background: var(--ph); box-shadow: 0 0 18px var(--ph-glow); text-shadow: none; } .chat-send:hover::before, .chat-send:hover::after { color: var(--ink); } .chat-send:active { background: var(--ph-bright); } .chat-send:focus-visible { outline: 1px solid var(--ph-bright); outline-offset: 2px; } /* CHAR COUNTER — dim, right-aligned, appears only as the message nears the 4000-char cap so it never competes for attention on a normal message. --warn tint at the edge. [hidden] until chat.js shows it. */ .chat-charcount { font-size: 11px; letter-spacing: .5px; text-align: right; color: var(--ph-dim); opacity: .75; font-variant-numeric: tabular-nums; margin-top: -2px; user-select: none; } .chat-charcount[hidden] { display: none; } .chat-charcount.warn { color: var(--warn); opacity: 1; } /* CONTROL CLUSTER — the model dock hugs the left; voice/voice-mode/mic are pushed to the right edge. The model-dock popover stays absolutely positioned against #chat-inputrow (still position:relative), so it keeps floating above the whole composer — this wrapper is a static parent and doesn't reparent it. */ .chat-tools { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 1px 0; } .chat-tools #voice-toggle { margin-left: auto; } /* ============================================================ ATTACHMENTS — the paperclip button, the composer preview strip of attached photos/files (chips with a thumbnail + remove ×), and the drop-target glow. Phosphor tokens only; the button matches the mic/voice register (app.css .mic-btn family). ============================================================ */ /* the attach control — ROBCO INVERT register, same as the .mic-btn family (app.css): a bare phosphor glyph; hover = the instant solid selection block */ .chat-attach-btn { flex: 0 0 auto; font-size: 16px; line-height: 0; color: var(--ph); background: transparent; border: none; border-radius: 0; width: 38px; height: 34px; padding: 0; cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; transition: none; } .chat-attach-btn svg { width: 1em; height: 1em; display: block; pointer-events: none; filter: drop-shadow(0 0 3px var(--ph-glow2)); } .chat-attach-btn:hover { color: var(--ink); background: var(--ph); box-shadow: 0 0 16px var(--ph-glow); } .chat-attach-btn:hover svg { filter: none; } .chat-attach-btn:active { background: var(--ph-bright); } .chat-attach-btn:focus-visible { outline: 1px solid var(--ph-bright); outline-offset: 2px; } /* the preview strip sits above the edit line; hidden (via [hidden]) until at least one chip exists */ .chat-attach-strip { display: flex; flex-wrap: wrap; gap: 6px; } .chat-attach-strip[hidden] { display: none; } /* one attached file: a small phosphor pill. Images carry a thumbnail; others a file glyph + name. */ .chat-attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 3px 5px 3px 4px; border: 1px solid var(--ph-dim); border-radius: 5px; background: var(--panel2); color: var(--ph); font-size: 12px; line-height: 1.2; } .chat-attach-chip.uploading { opacity: .55; } .chat-attach-chip.err { border-color: var(--bad); color: var(--bad); } .chat-attach-chip .thumb { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 3px; object-fit: cover; display: block; border: 1px solid var(--ph-faint); } .chat-attach-chip .glyph { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 3px; background: var(--ph-faint); } .chat-attach-chip .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-attach-chip .rm { flex: 0 0 auto; cursor: pointer; border: none; background: none; color: var(--ph-dim); font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 3px; } .chat-attach-chip .rm:hover { color: var(--bad); } /* drop-target: dragging a file over the whole composer glows its border so the target reads as live */ #chat-inputrow.attach-dragover { outline: 2px dashed var(--ph); outline-offset: 3px; border-radius: 5px; } /* a SENT user message's attachments render under its text in the transcript (thumbnails + file chips) */ .chat-attach-view { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .chat-attach-view a.thumb { display: inline-block; line-height: 0; border: 1px solid var(--ph-dim); border-radius: 4px; overflow: hidden; cursor: pointer; } .chat-attach-view a.thumb img { display: block; max-width: 148px; max-height: 118px; } .chat-attach-view a.thumb:hover { border-color: var(--ph-bright); box-shadow: 0 0 6px var(--ph-glow); } .chat-attach-view a.filechip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--ph-dim); border-radius: 5px; color: var(--ph); font-size: 12px; text-decoration: none; cursor: pointer; } .chat-attach-view a.filechip:hover { border-color: var(--ph-bright); color: var(--ph-bright); } /* the staged composer thumbnail is also a click-to-enlarge target */ .chat-attach-chip .thumb { cursor: pointer; } .chat-attach-chip .thumb:hover { border-color: var(--ph-bright); box-shadow: 0 0 6px var(--ph-glow); } /* ============================================================ IMAGE LIGHTBOX — any COMMS image (sent attachment, staged composer attachment, agent image deliverable) enlarged over the whole app. Backdrop click / × / Esc dismisses. Sits above every window (max app chrome is ~995) but under notify(2000) and the tutorial layers. Theme tokens only. ============================================================ */ .comms-lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .82); cursor: zoom-out; animation: lb-in var(--t-med, 180ms) var(--ease-out, ease-out); } @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } } .comms-lightbox .lb-frame { margin: 0; cursor: default; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 6px; } .comms-lightbox .lb-frame img { display: block; max-width: 100%; max-height: calc(88vh - 28px); object-fit: contain; background: #000; border: 1px solid var(--ph-dim); border-radius: 4px; box-shadow: 0 0 28px var(--ph-glow), 0 12px 40px rgba(0, 0, 0, .6); } .comms-lightbox .lb-frame.loading img { min-width: 120px; min-height: 90px; } .comms-lightbox .lb-frame.loading::after { content: 'loading…'; color: var(--ph-dim); font-size: 12px; letter-spacing: .12em; } .comms-lightbox .lb-name { max-width: 92vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ph-dim); font-size: 12px; letter-spacing: .06em; } .comms-lightbox .lb-close { position: absolute; top: 14px; right: 18px; border: 1px solid var(--ph-dim); border-radius: 5px; background: var(--panel2, rgba(0,0,0,.5)); color: var(--ph); font-size: 20px; line-height: 1; padding: 4px 10px; cursor: pointer; transition: color var(--t-fast, 120ms) var(--ease-soft, ease), border-color var(--t-fast, 120ms) var(--ease-soft, ease), box-shadow var(--t-fast, 120ms) var(--ease-soft, ease); } .comms-lightbox .lb-close:hover, .comms-lightbox .lb-close:focus-visible { color: var(--ph-bright); border-color: var(--ph-bright); box-shadow: 0 0 6px var(--ph-glow); } /* ============================================================ AGENT LINE — the top-of-panel identity row: who's on the line (a native