/* chat.css — THE HOUSE · the terminal chat box, on the epoq3 dark glass-stage.
   Component-scoped + token-pure; injected by chat-widget.js. Inherits the live
   epoq3 system from the page's styles.css (@imports system.css). */

/* ── the instruments — the OHM held Θ (the launcher mark) + the HITM presence ruler.
   HITM = epoq3's "human in the middle": AI · HUMAN · AI — the two hosts (Clovis, Chloe) flank,
   the creative director is the human centre. Dim while the machine runs the room; the middle
   LIGHTS when the director is in the chat ("the middle is never automated"). */
@keyframes ohm-breath { 0%, 100% { opacity: 0.42; } 50% { opacity: 1; } } /* canon-lint:allow — D-021 OHM instrument: the Θ breathes (the lawful motion exception) */

/* the HITM presence ruler — a slim bar under the header (epoq3 hitm-* ported to the dark stage) */
.chat-hitm { padding: var(--s-1) var(--s-2) var(--s-2); border-bottom: var(--hairline) solid var(--paper-62); }
.chat-hitm .hitm-labels { display: flex; justify-content: space-between; padding-bottom: var(--s-1); }
.chat-hitm .hitm-labels span { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper-62); transition: color 0.15s ease; } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */
.chat-hitm .hitm-ruler { position: relative; }
.chat-hitm .hitm-line { border-top: var(--hairline) solid var(--paper-62); } /* canon-lint:allow E13 — dark glass: the hairline reads as paper-62 */
.chat-hitm .hitm-ticks { display: flex; justify-content: space-between; }
.chat-hitm .hitm-ticks span { border-left: var(--hairline) solid var(--paper-62); height: 5px; } /* canon-lint:allow E19 — instrument tick geometry (control-atom) */
.chat-hitm .hitm-ticks span.hitm-mid { height: 8px; } /* canon-lint:allow E19 — the tall centre tick holds the middle */
/* the creative director is in the room — the human centre goes live (the lawful --signal-live occasion, on the dark stage) */
#im-chat-root .chat-hitm.director-here .hitm-labels span.hitm-human { color: var(--signal-live); } /* canon-lint:allow E13 — dark glass: the live signal marks the human centre (specificity beats the base label rule) */
#im-chat-root .chat-hitm.director-here .hitm-mid { border-left-color: var(--signal-live); height: 11px; } /* canon-lint:allow E19 — the middle holds, lit */

/* ── the launcher — a terminal cue, bottom-right ─────────────────────────── */
.chat-launcher {
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2); border: var(--hairline) solid var(--paper-62); cursor: pointer;
  background: var(--glass-stage); color: var(--paper); border-radius: var(--radius-print);
  font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; /* canon-lint:allow E13 — dark glass: paper is the ink-equivalent */
}
.chat-launcher .ohm-theta { font-family: var(--times); font-size: 12px; line-height: 1; color: var(--paper); animation: ohm-breath 4.5s cubic-bezier(.5, 0, .5, 1) infinite; } /* canon-lint:allow E11 — the held Θ, a Θ-class glyph in Times; E13 dark glass: paper is the ink-equivalent */
.chat-launcher[hidden] { display: none; }

/* ── the terminal panel — dark glass-stage ───────────────────────────────── */
.chat-panel {
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 41;
  width: min(360px, calc(100vw - var(--s-4))); height: min(540px, calc(100vh - var(--s-4))); /* canon-lint:allow E19 — the chat panel is device chrome (a fixed dialog) */
  display: none; flex-direction: column;
  background: var(--glass-stage); color: var(--paper);
  border: var(--hairline) solid var(--paper-62); box-shadow: var(--shadow-spec);
}
.chat-panel[data-state="open"] { display: flex; }

/* header — the terminal title bar */
/* the widget's <header> must NOT inherit epoq3's global `header` background (paper) — the panel is
   the dark glass-stage; keep the head transparent so the stage shows and the paper title reads. */
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2); border-bottom: var(--hairline) solid var(--paper-62); background: transparent; position: static; }
.chat-id { display: inline-flex; align-items: center; gap: var(--s-2); }
.chat-id .who { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper); } /* canon-lint:allow E13 — dark glass: paper is the ink-equivalent */
.chat-id .state { display: inline-flex; align-items: center; gap: 6px; /* canon-lint:allow E15 — control chrome: the dot↔label inline gap */
  font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper-62); } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */
.chat-id .state .dot { width: 4px; height: 4px; background: var(--signal-go); border-radius: var(--radius-capsule); } /* canon-lint:allow E19 — the 4px online atom */
.chat-x { border: 0; background: none; cursor: pointer; padding: var(--s-1); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper-62); } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */

/* the thread — terminal lines */
.chat-log { flex: 1; overflow-y: auto; padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.msg { display: flex; gap: var(--s-1); align-items: baseline; }
.msg .lbl { flex: none; font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: lowercase; color: var(--paper-62); } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */
.msg .lbl::after { content: '>'; }
.msg .bub { flex: 1; min-width: 0; font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: 1.5; color: var(--paper); word-break: break-word; } /* canon-lint:allow E13 — dark glass: paper is the ink-equivalent (body copy, serif-14) */
.msg.you .lbl { color: var(--paper); } /* canon-lint:allow E13 — dark glass: paper is the ink-equivalent */
/* the principal walks in — director> carries the one lawful signal so it reads distinct from the grey hosts */
.msg.spk-director .lbl { color: var(--signal-go); } /* canon-lint:allow E13 — dark glass: the lawful signal marks the director */
/* the quiet "a person is here" line */
.chat-note { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper-62); padding-left: var(--s-1); } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */
.chat-note[hidden] { display: none; }

/* the composer — a terminal prompt line */
.chat-compose { display: flex; gap: var(--s-1); align-items: baseline; padding: var(--s-2); border-top: var(--hairline) solid var(--paper-62); }
.chat-compose .prompt { flex: none; font-family: var(--font-mono); font-size: var(--fz-mono-6); color: var(--signal-go); } /* the live prompt mark — the one signal */
.chat-compose input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font-family: var(--font-mono); font-size: var(--fz-mono-6); color: var(--paper); outline: none; caret-color: var(--signal-go); /* canon-lint:allow E13 — dark glass: paper is the ink-equivalent; the caret is the live signal */
}
.chat-compose input::placeholder { color: var(--paper-62); }
.chat-compose button { flex: none; border: 0; cursor: pointer; background: none; color: var(--paper-62); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; } /* canon-lint:allow E13 — dark glass: paper-62 is the grey-equivalent */
.chat-compose button:disabled { opacity: 0.4; cursor: default; }