/* 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; }