@jossuealcala/madre 0.2.0

package/public/styles.css

@@ -0,0 +1,976 @@
+/* MADRE — a conversation, not a log.
+   iMessage for the dialogue, a terminal for the metadata, MOTHER for the mood. */
+
+:root {
+  color-scheme: dark;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
+  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  --bg: #050605;
+  --bg-2: #0b0d0b;
+  --panel: #101310;
+  --panel-2: #171b17;
+  --line: rgba(255, 255, 255, .07);
+  --line-2: rgba(255, 255, 255, .13);
+  --text: #eef1ea;
+  --text-2: #9aa197;
+  --text-3: #626a5f;
+
+  --phosphor: #9bff66;           /* MOTHER */
+  --brew: #28fe14;               /* ORDER 937: Terminal.app 'Homebrew' green */
+  --brew-ink: #041004;
+  --phosphor-ink: #0a1405;
+  --accent: var(--phosphor);
+  --accent-ink: var(--phosphor-ink);
+
+  --bubble: #1c201c;             /* agent bubble */
+  --bubble-ink: #eef1ea;
+  --user: var(--phosphor);       /* user bubble */
+  --user-ink: var(--phosphor-ink);
+
+  --danger: #ff7b72;
+  --warn: #ffd166;
+  --crit: #ff8a7a;
+  --terror: #ff2a1f;             /* MOTHER, when she stops being polite */
+  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 40px rgba(0,0,0,.45);
+
+  /* Permission modes: one colour each, read by the chip, the field, the send button and the menu. */
+  --mode-0: #8d978c; --mode-0-ink: #0b0d0b;        /* GHOST · smoke */
+  --mode-1: var(--phosphor); --mode-1-ink: var(--phosphor-ink);   /* EXCHANGE · phosphor */
+  --mode-2: #ffb000; --mode-2-ink: #1a1000;        /* CREATE · amber phosphor */
+  --mode-3: var(--terror); --mode-3-ink: #fff3f1;  /* CONTROL · the red screen */
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    color-scheme: light;
+    --bg: #f4f5f2;
+    --bg-2: #ffffff;
+    --panel: #ffffff;
+    --panel-2: #eef0ea;
+    --line: rgba(0, 0, 0, .07);
+    --line-2: rgba(0, 0, 0, .13);
+    --text: #121512;
+    --text-2: #5a615a;
+    --text-3: #8b928a;
+    --phosphor: #2f8a1c;
+    --brew: #178f0c;
+    --brew-ink: #ffffff;
+    --phosphor-ink: #ffffff;
+    --bubble: #e9ebe6;
+    --bubble-ink: #121512;
+    --danger: #b3261e;
+    --warn: #8a6a00;
+    --crit: #a1301f;
+    --shadow: 0 12px 40px rgba(0,0,0,.08);
+    --mode-0: #6f786e; --mode-0-ink: #ffffff;
+    --mode-2: #a06e00; --mode-2-ink: #ffffff;
+    --mode-3: #d81b12; --mode-3-ink: #ffffff;
+  }
+}
+:root[data-theme="light"] {
+    color-scheme: light;
+    --bg: #f4f5f2;
+    --bg-2: #ffffff;
+    --panel: #ffffff;
+    --panel-2: #eef0ea;
+    --line: rgba(0, 0, 0, .07);
+    --line-2: rgba(0, 0, 0, .13);
+    --text: #121512;
+    --text-2: #5a615a;
+    --text-3: #8b928a;
+    --phosphor: #2f8a1c;
+    --brew: #178f0c;
+    --brew-ink: #ffffff;
+    --phosphor-ink: #ffffff;
+    --bubble: #e9ebe6;
+    --bubble-ink: #121512;
+    --danger: #b3261e;
+    --warn: #8a6a00;
+    --crit: #a1301f;
+    --shadow: 0 12px 40px rgba(0,0,0,.08);
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  color: var(--text);
+  background:
+    linear-gradient(rgba(155,255,102,.035) 1px, transparent 1px) 0 0 / 100% 3px,
+    radial-gradient(ellipse at 50% -20%, var(--bg-2), var(--bg) 55%);
+  -webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: light) { body { background: radial-gradient(ellipse at 50% -20%, var(--bg-2), var(--bg) 55%); } }
+
+.shell {
+  --column: min(880px, 100% - 40px);
+  --gap: 12px;
+  height: 100dvh;
+  width: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto auto auto;
+}
+.bar, .onboarding, .composer, .safety, .thread-inner { width: var(--column); margin-left: auto; margin-right: auto; }
+.shell > .bar { grid-row: 1; } .shell > .onboarding { grid-row: 2; } .shell > .thread { grid-row: 3; } .shell > .composer { grid-row: 4; } .shell > .safety { grid-row: 5; }
+.shell > .bar, .shell > .onboarding, .shell > .thread, .shell > .composer, .shell > .safety, .shell > .tree { grid-column: 1; }
+.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* ================= bar ================= */
+.bar {
+  display: flex; align-items: center; gap: 18px;
+  padding: 18px 0 14px;
+  border-bottom: 1px solid var(--line);
+  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
+  color: var(--text-2);
+}
+.bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
+.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: .22em; font-size: 11px; text-decoration: none; cursor: pointer; }
+.brand:hover .brand-mark { filter: drop-shadow(0 0 10px var(--phosphor)); } .brand:hover .brand-word { color: var(--phosphor); }
+.brand-mark { width: 64px; height: 18px; color: var(--phosphor); overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--phosphor) 55%, transparent)); }
+.brand-mark .beat { stroke-dasharray: 100; stroke-dashoffset: 100; animation: beat-draw 1.1s cubic-bezier(.2, .7, .2, 1) .15s forwards; }
+.brand-mark .beat-dot { opacity: 0; transform-origin: 60px 10px; transform-box: view-box; animation: beat-dot 1s ease-out 1.05s forwards, beat-idle 2.6s ease-in-out 2.4s infinite; }
+.brand-word { opacity: 0; transform: translateX(-6px); animation: word-in .6s ease-out 1.35s forwards; }
+@keyframes beat-draw { to { stroke-dashoffset: 0; } }
+@keyframes beat-dot { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1); } }
+@keyframes beat-idle { 0%, 100% { opacity: 1; transform: scale(1); } 14% { transform: scale(1.35); } 28% { transform: scale(1); } 42% { transform: scale(1.2); } 56% { transform: scale(1); } }
+@keyframes word-in { to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .brand-mark .beat { animation: none; stroke-dashoffset: 0; }
+  .brand-mark .beat-dot { animation: none; opacity: 1; }
+  .brand-word { animation: none; opacity: 1; transform: none; }
+}
+.project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
+.project::before { content: "/ "; }
+.agents { display: flex; gap: 8px; margin-left: auto; }
+.connection { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); text-transform: uppercase; font-size: 10px; }
+.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
+.connection[data-state="live"] .connection-dot { background: var(--phosphor); box-shadow: 0 0 10px var(--phosphor); }
+.connection[data-state="reconnecting"] .connection-dot { background: var(--warn); animation: blink 1s infinite; }
+@keyframes blink { 50% { opacity: .2; } }
+
+/* ================= avatars ================= */
+.avatar {
+  --size: 28px; --pct: 0;
+  position: relative; display: inline-grid; place-items: center;
+  width: var(--size); height: var(--size); border-radius: 50%;
+  color: var(--agent); background: color-mix(in srgb, var(--agent) 14%, transparent);
+  flex: none;
+}
+.avatar svg { width: 58%; height: 58%; display: block; }
+.avatar.ring::before {
+  content: ""; position: absolute; inset: -3px; border-radius: 50%;
+  background: conic-gradient(var(--agent) calc(var(--pct) * 1%), var(--line-2) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
+  opacity: .9;
+}
+.avatar.ring.hot::before { background: conic-gradient(var(--crit) calc(var(--pct) * 1%), var(--line-2) 0); }
+.avatar.offline { color: var(--text-3); background: transparent; border: 1px dashed var(--line-2); }
+.avatar.detected { color: var(--text-2); background: transparent; border: 1px solid var(--line-2); }
+.avatar.gradient svg { color: #fff; }
+.avatar.gradient { background: var(--agent-gradient, var(--agent)); color: #fff; }
+.agents .avatar { cursor: default; }
+
+/* ================= thread ================= */
+.thread {
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain;
+}
+.thread-inner {
+  min-height: 100%;
+  display: flex; flex-direction: column; gap: var(--gap);
+  padding: 36px 0 28px;
+}
+.empty { margin: auto; text-align: center; color: var(--text-3); display: grid; gap: 10px; max-width: 420px; justify-items: center; }
+.empty-mark { width: 144px; height: 40px; color: var(--phosphor); margin-bottom: 6px; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--phosphor) 55%, transparent)); }
+.empty-mark .beat { stroke-dasharray: 100; stroke-dashoffset: 100; animation: beat-draw 1.1s cubic-bezier(.2, .7, .2, 1) .15s forwards; }
+.empty-mark .beat-dot { opacity: 0; transform-origin: 60px 10px; transform-box: view-box; animation: beat-dot 1s ease-out 1.05s forwards, beat-idle 2.6s ease-in-out 2.4s infinite; }
+.empty strong { color: var(--text); font-size: 17px; letter-spacing: -.01em; font-weight: 600; }
+.empty span { font-size: 13px; line-height: 1.5; }
+code { font-family: var(--mono); font-size: .9em; color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); padding: 2px 5px; border-radius: 5px; }
+
+/* rows */
+.row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: end; max-width: 76%; margin-top: 14px; }
+.row.compact { margin-top: 0; }
+.row.compact .avatar { visibility: hidden; }
+.row.user { grid-template-columns: 1fr; align-self: flex-end; justify-items: end; }
+.row .col { display: grid; gap: 6px; min-width: 0; }
+.who { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--agent, var(--text-2)); margin: 0 0 2px 12px; display: flex; gap: 10px; align-items: baseline; }
+.user .who { color: var(--text-3); margin: 0 12px 2px 0; justify-content: flex-end; }
+.user .who b { color: var(--phosphor); font-weight: 600; }
+.user.expendable .who b { color: var(--crit); }
+.who .reply { color: var(--text-3); letter-spacing: 0; text-transform: none; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
+.who .badge { color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 6px; letter-spacing: .08em; }
+
+.bubble {
+  position: relative;
+  line-height: 1.5; font-size: 15px;
+  color: var(--bubble-ink); background: var(--bubble);
+  border-radius: 20px; padding: 12px 16px;
+  overflow-wrap: anywhere;
+  box-shadow: var(--shadow);
+}
+.assistant .bubble { border-bottom-left-radius: 6px; }
+.user .bubble { background: var(--user); color: var(--user-ink); border-bottom-right-radius: 6px; white-space: pre-wrap; box-shadow: 0 8px 30px color-mix(in srgb, var(--user) 25%, transparent); }
+.bubble > :first-child { margin-top: 0; }
+.bubble > :last-child { margin-bottom: 0; }
+.bubble p { margin: 0 0 9px; }
+.bubble h1, .bubble h2, .bubble h3, .bubble h4 { margin: 12px 0 6px; font-size: 1em; font-weight: 650; letter-spacing: -.01em; }
+.bubble h1 { font-size: 1.1em; }
+.bubble ul, .bubble ol { margin: 0 0 9px; padding-left: 20px; }
+.bubble li { margin: 3px 0; }
+.bubble blockquote { margin: 0 0 9px; padding: 2px 12px; border-left: 2px solid var(--line-2); color: var(--text-2); }
+.bubble a { color: var(--agent, var(--phosphor)); text-decoration-thickness: 1px; }
+.bubble hr { border: 0; border-top: 1px solid var(--line-2); margin: 10px 0; }
+.bubble code { color: var(--agent, var(--phosphor)); background: color-mix(in srgb, var(--agent, var(--phosphor)) 12%, transparent); }
+.user .bubble code { color: inherit; background: rgba(0,0,0,.12); }
+
+/* code blocks: the terminal inside the message */
+.codeblock { position: relative; margin: 6px -6px 9px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); overflow: hidden; }
+.codeblock pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--phosphor); }
+.codeblock code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
+.codeblock .lang { position: absolute; top: 7px; left: 12px; font-family: var(--mono); font-size: 9.5px; color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; }
+.codeblock .copy { position: absolute; top: 5px; right: 6px; height: 22px; padding: 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; border-radius: 6px; background: transparent; color: var(--text-3); border: 1px solid var(--line-2); cursor: pointer; }
+.codeblock .copy:hover { color: var(--text); border-color: var(--text-3); }
+.codeblock.has-lang pre { padding-top: 26px; }
+
+/* delivery line under a bubble */
+.stamp { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: .04em; display: flex; gap: 12px; margin: 2px 12px 0; }
+.user.expendable .stamp .to { color: var(--crit); }
+.user.expendable .bubble { animation: phosphor-flicker 1.1s steps(2, end) 1; }
+@keyframes phosphor-flicker { 0%, 100% { filter: none; } 20% { filter: brightness(1.6) saturate(.4); } 40% { filter: brightness(.7); } 60% { filter: brightness(1.3); } }
+.user .stamp { justify-content: flex-end; }
+.stamp .to { color: var(--agent, var(--text-3)); }
+
+/* typing indicator */
+.row.thinking .bubble { display: inline-flex; gap: 5px; padding: 10px 14px; width: max-content; max-width: 100%; align-items: center; }
+.row.thinking .status { font-size: 13.5px; color: var(--text-2); margin-left: 8px; font-style: italic; animation: status-in .35s ease; white-space: nowrap; }
+.row.thinking .status::after { content: ''; display: inline-block; width: 2px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--agent, var(--text-2)); animation: cursor-blink 1s steps(1) infinite; }
+@keyframes status-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
+@keyframes cursor-blink { 50% { opacity: 0; } }
+.row.thinking .elapsed { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-3); margin-left: 8px; }
+.row.thinking .elapsed.late { color: var(--warn); }
+.row.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--agent, var(--text-2)); animation: bounce 1.2s infinite; opacity: .5; }
+.row.thinking i:nth-child(2) { animation-delay: .18s; } .row.thinking i:nth-child(3) { animation-delay: .36s; }
+@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
+
+/* system lines: handoffs, sentinel, failures — MOTHER speaks in small caps */
+.system {
+  align-self: center; text-align: center; max-width: 92%;
+  overflow-wrap: anywhere;
+  margin: 22px 0 8px;
+  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--text-3); line-height: 1.6;
+}
+.system b { font-weight: 600; color: var(--text-2); }
+.system .from { color: var(--from, var(--text-2)); } .system .to { color: var(--to, var(--text-2)); }
+.system.warn { color: var(--warn); }
+.system.memory { color: var(--text-3); } .system.memory .who { color: var(--agent, var(--text-2)); }
+
+/* NOSTROMO: the archive as a small solar system. One colour per kind of memory. */
+:root { --mem-decision: #ffb000; --mem-fact: #9bff66; --mem-preference: #d78cff; --mem-question: #5fd6ff; --nostromo-sun: #ff2a1f; }
+.nostromo-button { color: var(--terror); border-color: color-mix(in srgb, var(--terror) 55%, transparent); }
+.nostromo-button:hover { background: color-mix(in srgb, var(--terror) 14%, transparent); }
+dialog.nostromo { color: #eef1ea; }
+dialog.nostromo::backdrop { background: #000; }
+.nostromo-frame { --ph: #ffb4ad; --ph-dim: rgba(255, 42, 31, .55); --ph-faint: rgba(255, 42, 31, .16); position: relative; height: 100%; background: #030203; font-family: var(--mono); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
+.nostromo-head { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 18px; align-items: center; padding: 18px 26px 14px; border-bottom: 1px solid var(--ph-faint); color: var(--ph); position: relative; z-index: 2; }
+.nostromo-head .mother-title { color: var(--nostromo-sun); text-shadow: 0 0 18px color-mix(in srgb, var(--nostromo-sun) 60%, transparent); }
+.nostromo-head .mother-sub { color: var(--ph-dim); }
+.nostromo-legend { display: flex; gap: 8px; }
+.nostromo-legend .k { font-size: 9px; letter-spacing: .16em; padding: 3px 8px; border: 1px solid; border-radius: 999px; }
+.nostromo-legend .k.decision { color: var(--mem-decision); } .nostromo-legend .k.fact { color: var(--mem-fact); } .nostromo-legend .k.preference { color: var(--mem-preference); } .nostromo-legend .k.question { color: var(--mem-question); }
+.nostromo-frame .mother-close { color: var(--ph); border-color: var(--ph-dim); }
+.nostromo-frame .mother-close:hover { background: var(--ph-faint); }
+.nostromo-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
+.nostromo-canvas.over { cursor: pointer; }
+.nostromo-canvas.dragging { cursor: grabbing; }
+.nostromo-help { position: absolute; left: 26px; bottom: 16px; margin: 0; font-size: 9px; letter-spacing: .2em; color: var(--ph-dim); pointer-events: none; }
+.nostromo-frame.shake { animation: override-shake .45s ease 2; }
+/* MOTHER's answer when touched: a klaxon over everything, then silence. */
+.nostromo-alert { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; cursor: pointer; }
+.nostromo-alert .klaxon { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 42, 31, .0) 30%, rgba(255, 42, 31, .55) 100%); animation: klaxon .55s steps(2) infinite; }
+.nostromo-alert .panel { position: relative; padding: 30px 46px; border: 2px solid var(--nostromo-sun); background: rgba(20, 0, 2, .92); box-shadow: 0 0 0 6px rgba(255, 42, 31, .25), 0 0 120px rgba(255, 42, 31, .6); text-align: center; display: grid; gap: 10px; animation: alert-in .25s ease-out; max-width: min(720px, 92vw); }
+.nostromo-alert .warn { font-size: clamp(22px, 4vw, 40px); font-weight: 700; letter-spacing: .32em; color: var(--nostromo-sun); text-shadow: 0 0 24px var(--nostromo-sun); animation: klaxon .55s steps(2) infinite; }
+.nostromo-alert .line { font-size: clamp(13px, 1.8vw, 18px); letter-spacing: .24em; color: #ffd9d4; }
+.nostromo-alert .line.big { font-size: clamp(16px, 2.4vw, 24px); font-weight: 700; color: #fff; text-shadow: 0 0 18px var(--nostromo-sun); margin-top: 6px; }
+.nostromo-alert .sub { margin-top: 8px; font-size: 9.5px; letter-spacing: .28em; color: var(--ph-dim); }
+@keyframes klaxon { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
+@keyframes alert-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .nostromo-alert .klaxon, .nostromo-alert .warn, .nostromo-frame.shake { animation: none; } }
+.nostromo-card { position: absolute; right: 26px; top: 96px; width: min(380px, calc(100vw - 52px)); padding: 18px 20px 16px; background: rgba(6, 3, 4, .92); border: 1px solid var(--kind, var(--ph-dim)); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--kind, var(--nostromo-sun)) 25%, transparent); backdrop-filter: blur(8px); display: grid; gap: 12px; z-index: 3; animation: mother-on .3s ease; }
+.nostromo-card header { display: flex; justify-content: space-between; align-items: center; }
+.nostromo-card .kind { font-size: 10px; letter-spacing: .22em; color: var(--kind, var(--ph)); text-shadow: 0 0 10px color-mix(in srgb, var(--kind, var(--ph)) 55%, transparent); }
+.nostromo-card .text { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; font-size: 14px; line-height: 1.5; color: #eef1ea; }
+.nostromo-card .meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 10px; letter-spacing: .1em; }
+.nostromo-card .meta dt { color: var(--ph-dim); } .nostromo-card .meta dd { margin: 0; color: #c9c2bf; }
+.nostromo-card .forget { border: 1px solid var(--nostromo-sun); background: transparent; color: var(--nostromo-sun); font: inherit; font-size: 10px; letter-spacing: .18em; padding: 9px 12px; cursor: pointer; transition: background .2s; }
+.nostromo-card .forget:hover { background: color-mix(in srgb, var(--nostromo-sun) 14%, transparent); }
+.nostromo-card .forget.confirm { background: var(--nostromo-sun); color: #fff3f1; animation: blink 1s steps(1) infinite; }
+.nostromo-card .forget:disabled { opacity: .5; cursor: default; animation: none; }
+.nostromo-card .foot { margin: 0; font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); line-height: 1.5; }
+.nostromo-empty { position: absolute; inset: 50% 0 auto 0; margin: 0; text-align: center; font-size: 11px; letter-spacing: .22em; color: var(--ph-dim); }
+@media (max-width: 720px) { .nostromo-head { grid-template-columns: auto 1fr auto; } .nostromo-legend { display: none; } .nostromo-card { right: 16px; left: 16px; width: auto; } }
+.system.memory.forgotten { color: var(--terror); }
+.system.mother-alert { display: grid; gap: 6px; justify-items: center; max-width: min(720px, 92%); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--terror) 60%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--terror) 7%, transparent); color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 45%, transparent); }
+.system.mother-alert .head b { color: var(--terror); font-weight: 700; }
+.system.mother-alert .clear { color: var(--text); text-shadow: none; text-transform: none; letter-spacing: 0; font-size: 12px; }
+.system.mother-alert .code { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: color-mix(in srgb, var(--terror) 75%, var(--text-2)); text-shadow: none; text-transform: none; word-break: break-all; line-height: 1.6; opacity: .9; }
+/* The hint under a bubble when its agent saved a memory on request. */
+.memory-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 12px 0; animation: hint-in .6s cubic-bezier(.2, .7, .2, 1) 1; }
+.memory-hint .lead { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--agent, var(--text-3)); }
+.memory-hint .pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid color-mix(in srgb, var(--kind) 55%, transparent); background: color-mix(in srgb, var(--kind) 8%, transparent); color: var(--text-2); font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer; text-align: left; box-shadow: 0 0 0 0 color-mix(in srgb, var(--kind) 45%, transparent); animation: hint-glow 2.4s ease-out 1; transition: background .2s, color .2s; }
+.memory-hint .pill b { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--kind); }
+.memory-hint .pill:hover { background: color-mix(in srgb, var(--kind) 18%, transparent); color: var(--text); }
+.memory-hint .more { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); }
+@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@keyframes hint-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kind) 55%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kind) 0%, transparent), 0 0 18px color-mix(in srgb, var(--kind) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
+@media (prefers-reduced-motion: reduce) { .memory-hint, .memory-hint .pill { animation: none; } }
+.system.crit { color: var(--crit); }
+.system.fail { color: var(--danger); text-transform: none; letter-spacing: 0; font-size: 11px; }
+.system.fail .label { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; display: block; opacity: .8; margin-bottom: 2px; }
+.system.recovered { color: var(--text-3); }
+.system.mother { color: var(--terror); text-shadow: 0 0 10px color-mix(in srgb, var(--terror) 70%, transparent), 0 0 28px color-mix(in srgb, var(--terror) 35%, transparent); letter-spacing: .16em; animation: terror-in 1.4s steps(3, end) 1; }
+.system.mother b { color: var(--terror); }
+@keyframes terror-in { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .2; } 60% { opacity: 1; } 75% { opacity: .5; } 100% { opacity: 1; } }
+.composer.expendable .crew-label { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); }
+.composer.expendable textarea::placeholder { color: color-mix(in srgb, var(--terror) 75%, transparent); }
+.user.expendable .who b, .user.expendable .stamp .to { color: var(--terror); }
+.mother-button.arming { color: var(--terror); border-color: var(--terror); box-shadow: 0 0 16px color-mix(in srgb, var(--terror) 35%, transparent); transition: color 3s linear, border-color 3s linear; }
+.system .gauge { display: block; width: 220px; max-width: 100%; height: 2px; margin: 8px auto 0; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; overflow: hidden; }
+.system .gauge .now { position: absolute; inset: 0 auto 0 0; background: currentColor; }
+.system .gauge .next { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); opacity: .55; }
+
+/* ================= onboarding ================= */
+.onboarding { border: 1px solid var(--line-2); background: var(--panel); border-radius: 16px; padding: 22px 24px; margin-bottom: 12px; }
+.onboarding-eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--phosphor); }
+.onboarding h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; font-weight: 600; }
+.onboarding p { margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
+.onboarding-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
+.onboarding-list li { display: grid; grid-template-columns: 28px 100px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
+.onboarding-list .name { font-weight: 600; color: var(--text); }
+.onboarding-list .state { color: var(--text-2); font-size: 12.5px; }
+.onboarding-list .state b { color: var(--text); font-weight: 600; }
+.onboarding .hint { margin: 0; font-size: 12px; color: var(--text-3); }
+
+/* ================= composer ================= */
+.composer { display: grid; gap: 12px; padding: 14px 0 0; }
+.composer[aria-disabled="true"] { opacity: .45; pointer-events: none; }
+.picker { display: flex; gap: 8px; align-items: center; padding: 0 4px; }
+.picker .pick { --size: 30px; cursor: pointer; border: 1px solid transparent; background: color-mix(in srgb, var(--agent) 10%, transparent); transition: transform .12s ease, box-shadow .12s ease; }
+.picker .pick:hover { transform: translateY(-1px); }
+.picker .pick[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--agent); background: color-mix(in srgb, var(--agent) 22%, transparent); }
+.picker .pick-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-left: 2px; }
+.picker .pick-label b { color: var(--agent, var(--text)); font-weight: 600; }
+.field { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: end; padding: 6px 6px 6px 18px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 24px; }
+.crew-label { align-self: center; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--text-3); white-space: nowrap; transition: color .4s ease; }
+.field:focus-within .crew-label { color: var(--phosphor); }
+.composer.expendable .crew-label { color: var(--crit); }
+.composer.expendable textarea::placeholder { color: color-mix(in srgb, var(--crit) 70%, transparent); }
+select, textarea, button { font: inherit; }
+textarea { resize: none; min-height: 34px; max-height: 180px; padding: 7px 0; border: 0; outline: 0; color: var(--text); background: transparent; line-height: 1.4; font-size: 15px; }
+textarea::placeholder { color: var(--text-3); }
+.composer { --mode: var(--mode-1); --mode-ink: var(--mode-1-ink); }
+.composer.m0 { --mode: var(--mode-0); --mode-ink: var(--mode-0-ink); }
+.composer.m2 { --mode: var(--mode-2); --mode-ink: var(--mode-2-ink); }
+.composer.m3 { --mode: var(--mode-3); --mode-ink: var(--mode-3-ink); }
+.field button[type="submit"] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--mode, var(--phosphor)); color: var(--mode-ink, var(--phosphor-ink)); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 18px color-mix(in srgb, var(--mode, var(--phosphor)) 45%, transparent); transition: background .25s, box-shadow .25s; }
+.field button[type="submit"] svg { width: 18px; height: 18px; }
+.field button[type="submit"]:hover { filter: brightness(1.06); }
+.field button[type="submit"]:disabled { opacity: .4; cursor: default; box-shadow: none; }
+.safety { margin: 14px auto 18px; color: var(--text-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
+
+/* toast */
+.toast { position: fixed; left: var(--composer-center, 50%); bottom: calc(100vh - var(--composer-top, 70vh) + 22px); transform: translateX(-50%); text-align: center; padding: 9px 14px; animation: toast-in .22s ease; z-index: 40; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--panel); color: var(--danger); font-size: 13px; box-shadow: var(--shadow); max-width: min(560px, calc(100% - 32px)); }
+
+@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
+
+@media (max-width: 680px) {
+  .bar { flex-wrap: wrap; gap: 10px; }
+  .project { display: none; }
+  .row { max-width: 92%; }
+  .who .reply { max-width: 150px; }
+  .system .gauge { width: 160px; }
+  .onboarding-list li { grid-template-columns: 28px 1fr; }
+  .onboarding-list .state { grid-column: 2; }
+}
+
+/* ================= MU/TH/UR: troubleshooting ================= */
+.mother-button {
+  display: inline-flex; align-items: center; gap: 7px;
+  height: 26px; padding: 0 10px; border-radius: 6px;
+  border: 1px solid var(--line-2); background: transparent; color: var(--text-2);
+  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; cursor: pointer;
+}
+.mother-button:hover { color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 14px color-mix(in srgb, var(--phosphor) 30%, transparent); }
+.mother-glyph { width: 8px; height: 8px; border: 1px solid currentColor; }
+.mother-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--danger); color: #fff; font-size: 9px; letter-spacing: 0; }
+
+dialog.mother { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: #9bff66; }
+dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
+.mother-frame {
+  --ph: #9bff66; --ph-dim: rgba(155, 255, 102, .45); --ph-faint: rgba(155, 255, 102, .14);
+  position: relative; height: 100%; overflow-y: auto;
+  padding: 26px clamp(16px, 5vw, 64px) 40px;
+  background:
+    linear-gradient(rgba(155, 255, 102, .05) 1px, transparent 1px) 0 0 / 100% 3px,
+    radial-gradient(ellipse at 50% 0%, #0a1506, #020402 70%);
+  font-family: var(--mono); color: var(--ph); letter-spacing: .04em;
+  text-shadow: 0 0 6px rgba(155, 255, 102, .45);
+  animation: mother-on .5s ease-out;
+}
+@keyframes mother-on { from { opacity: 0; transform: scaleY(.96); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
+.mother-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--ph-dim); }
+.mother-title { font-size: clamp(22px, 4vw, 34px); font-weight: 700; letter-spacing: .24em; }
+.mother-sub { font-size: 10px; letter-spacing: .22em; color: var(--ph-dim); }
+.mother-close { border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 10px; letter-spacing: .18em; padding: 6px 10px; cursor: pointer; }
+.mother-close:hover { background: var(--ph-faint); }
+.mother-boot { margin: 18px 0 8px; font: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; min-height: 3.4em; }
+.mother-boot::after { content: "█"; animation: blink 1s steps(1) infinite; margin-left: 2px; }
+.mother-query { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ph-faint); border-bottom: 1px solid var(--ph-faint); }
+.mother-prompt { font-size: 18px; }
+.mother-query input { border: 0; outline: 0; background: transparent; color: var(--ph); font: inherit; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; caret-color: var(--ph); }
+.mother-query input::placeholder { color: var(--ph-dim); text-transform: none; letter-spacing: .04em; }
+.mother-os { display: flex; gap: 1px; border: 1px solid var(--ph-dim); }
+.mother-os button { border: 0; background: transparent; color: var(--ph-dim); font: inherit; font-size: 10px; letter-spacing: .16em; padding: 6px 10px; cursor: pointer; }
+.mother-os button[aria-checked="true"] { background: var(--ph); color: #041004; text-shadow: none; }
+.mother-answer { margin: 14px 0 6px; font-size: 12px; letter-spacing: .14em; min-height: 1.4em; }
+.mother-section { margin-top: 22px; }
+.mother-section h3 { margin: 0 0 12px; font-size: 10px; letter-spacing: .28em; color: var(--ph-dim); font-weight: 400; }
+.mother-section h3::before { content: "▌ "; color: var(--ph); }
+.mother-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
+.mother-card { border: 1px solid var(--ph-dim); padding: 14px 16px; background: rgba(2, 6, 2, .6); display: grid; gap: 8px; align-content: start; }
+.mother-card.hit { border-color: var(--ph); box-shadow: inset 0 0 0 1px var(--ph-faint), 0 0 22px rgba(155, 255, 102, .12); }
+.mother-card .tags { display: flex; gap: 8px; flex-wrap: wrap; font-size: 9.5px; letter-spacing: .18em; color: var(--ph-dim); }
+.mother-card .tags .agent { color: var(--agent, var(--ph)); }
+.mother-card .tags .sev-blocking { color: #ff7b72; }
+.mother-card .tags .sev-transient, .mother-card .tags .sev-tunable { color: #ffd166; }
+.mother-card .tags .sev-fixed, .mother-card .tags .sev-informational { color: var(--ph-dim); }
+.mother-card h4 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.mother-card p { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(210, 255, 190, .85); text-shadow: none; }
+.mother-card p b { color: var(--ph); font-weight: 400; letter-spacing: .12em; font-size: 10px; display: block; margin-bottom: 2px; }
+.mother-card p.remedy { color: #eaffdf; font-size: 13px; line-height: 1.65; padding: 10px 12px; border: 1px solid var(--ph); border-left-width: 4px; background: var(--ph-faint); text-shadow: 0 0 6px rgba(155, 255, 102, .25); }
+.mother-card p.remedy b { color: var(--ph); font-weight: 700; letter-spacing: .2em; }
+.mother-card .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.mother-card .actions .act { border: 1px solid var(--ph); background: color-mix(in srgb, var(--ph) 12%, transparent); color: var(--ph); font: inherit; font-size: 10.5px; letter-spacing: .16em; padding: 8px 12px; cursor: pointer; text-shadow: 0 0 6px rgba(155, 255, 102, .35); }
+.mother-card .actions .act:hover { background: color-mix(in srgb, var(--ph) 24%, transparent); }
+.mother-card .actions .act:disabled { opacity: .6; cursor: default; }
+.mother-card .actions .note { font-size: 9px; letter-spacing: .14em; color: var(--ph-dim); }
+.mother-card.hit p.remedy { box-shadow: 0 0 18px rgba(155, 255, 102, .18); animation: remedy-in .6s ease; }
+@keyframes remedy-in { from { background: rgba(155, 255, 102, .35); } to { background: var(--ph-faint); } }
+.mother-cmd { position: relative; margin: 4px 0 0; border: 1px solid var(--ph-faint); background: #000; padding: 10px 12px; }
+.mother-cmd pre { margin: 0; font: inherit; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ph); }
+.mother-cmd .c { color: var(--ph-dim); }
+.mother-cmd .copy { position: absolute; top: 6px; right: 6px; border: 1px solid var(--ph-dim); background: #000; color: var(--ph-dim); font: inherit; font-size: 9.5px; letter-spacing: .16em; padding: 3px 7px; cursor: pointer; }
+.mother-cmd .copy:hover { color: var(--ph); border-color: var(--ph); }
+.mother-record { display: grid; grid-template-columns: 64px 92px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ph-faint); font-size: 12px; }
+.mother-record .t { color: var(--ph-dim); }
+.mother-record .a { color: var(--agent, var(--ph)); text-transform: uppercase; letter-spacing: .1em; }
+.mother-record .e { color: rgba(210, 255, 190, .85); text-shadow: none; overflow-wrap: anywhere; }
+.mother-record .k { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.mother-record .k button { border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 9.5px; letter-spacing: .12em; padding: 3px 7px; cursor: pointer; text-transform: uppercase; }
+.mother-record .k button:hover { background: var(--ph-faint); }
+.mother-record .k .none { color: var(--ph-dim); font-size: 9.5px; letter-spacing: .12em; }
+.mother-record .e.more { cursor: pointer; }
+.mother-record .e.more::after { content: ' ▸'; color: var(--ph-dim); }
+.mother-record .e.more.open { white-space: pre-wrap; color: #eaffdf; }
+.mother-record .e.more.open::after { content: ' ▾'; }
+.mother-record .e.more:hover, .mother-record .e.more:focus-visible { color: var(--ph); outline: none; }
+.mother-section h3.toggle { display: block; }
+.mother-section h3.toggle::before { content: none; }
+.mother-section h3.toggle button::before { content: "▌ "; color: var(--ph); }
+.mother-section h3.toggle button > :first-child { flex: 1; }
+.mother-section h3.toggle button { display: flex; width: 100%; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--ph-dim); font: inherit; letter-spacing: .28em; padding: 0; cursor: pointer; text-align: left; }
+.mother-section h3.toggle button:hover { color: var(--ph); }
+.mother-section h3.toggle .caret { color: var(--ph); letter-spacing: .18em; }
+.mother-section.collapsed h3 { margin-bottom: 0; }
+.mother-foot { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--ph-faint); font-size: 9.5px; letter-spacing: .24em; color: var(--ph-dim); text-align: center; }
+@media (max-width: 680px) {
+  .mother-head { grid-template-columns: 1fr auto; }
+  .mother-sub { grid-column: 1 / -1; order: 3; }
+  .mother-query { grid-template-columns: auto 1fr; }
+  .mother-os { grid-column: 1 / -1; }
+  .mother-record { grid-template-columns: 64px 1fr; }
+  .mother-record .e, .mother-record .k { grid-column: 1 / -1; }
+  .mother-record .k { justify-content: flex-start; }
+}
+
+/* ================= MODULES ================= */
+.modules-glyph { border-radius: 50%; }
+.modules-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--phosphor); color: var(--phosphor-ink); font-size: 9px; letter-spacing: 0; }
+.module-card { border: 1px solid var(--ph-dim); padding: 18px 20px; background: rgba(2, 6, 2, .6); display: grid; gap: 12px; max-width: 760px; min-width: 0; overflow-wrap: anywhere; }
+.mother-grid > * { min-width: 0; }
+.module-card .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
+.module-card h4 { margin: 0; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
+.module-card .vendor { font-size: 10px; letter-spacing: .18em; color: var(--ph-dim); }
+.module-card .state { font-size: 10px; letter-spacing: .18em; padding: 4px 8px; border: 1px solid var(--ph-dim); color: var(--ph-dim); white-space: nowrap; }
+.module-card .detail { font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); }
+.module-card .state.installed { color: var(--ph); border-color: var(--ph); }
+.module-card .state.running { color: #ffd166; border-color: #ffd166; animation: blink 1s infinite; }
+.module-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(210, 255, 190, .85); text-shadow: none; }
+.module-card ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: rgba(210, 255, 190, .8); text-shadow: none; }
+.module-card .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.module-card .actions button { border: 1px solid var(--ph); background: transparent; color: var(--ph); font: inherit; font-size: 10.5px; letter-spacing: .18em; padding: 8px 14px; cursor: pointer; }
+.module-card .actions button.primary { background: var(--ph); color: #041004; text-shadow: none; }
+.module-card .actions button:disabled { opacity: .4; cursor: default; }
+.module-card .actions .note { font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); }
+.module-card .confirm { border: 1px dashed var(--ph); padding: 12px 14px; display: grid; gap: 10px; }
+.module-card .confirm .warn { color: #ffd166; font-size: 11px; letter-spacing: .12em; }
+.module-log { max-height: 260px; overflow-y: auto; border: 1px solid var(--ph-faint); background: #000; padding: 10px 12px; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ph); }
+.module-log .err { color: #ff7b72; }
+.system.module { color: var(--phosphor); }
+.system.module .cmd { text-transform: none; letter-spacing: 0; color: var(--text-2); display: block; margin-top: 4px; }
+.system.module.failed { color: var(--danger); }
+
+/* ================= delegation ================= */
+.plan-card { margin: 8px 0 4px; border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 12px 10px 14px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
+.plan-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
+.plan-card ol { margin: 0; padding-left: 18px; font-size: 13.5px; }
+.plan-card li { margin: 4px 0; }
+.plan-card li b { color: var(--agent); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
+.row.delegated .bubble { background: color-mix(in srgb, var(--bubble) 75%, transparent); border: 1px dashed var(--line-2); box-shadow: none; font-size: 14px; }
+.who .to-agent { color: var(--agent); }
+.system.plan .stop { margin-left: 10px; border: 1px solid var(--crit); background: transparent; color: var(--crit); font: inherit; font-size: 9.5px; letter-spacing: .16em; padding: 2px 8px; cursor: pointer; vertical-align: middle; }
+.system.plan .stop:hover { background: color-mix(in srgb, var(--crit) 15%, transparent); }
+.system.plan .stop:disabled { opacity: .4; cursor: default; }
+
+/* ================= STOPALL ================= */
+.stop-all { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; cursor: default; opacity: .55; transition: color .3s, border-color .3s, opacity .3s; }
+.stop-all:disabled { cursor: default; }
+.stop-all.armed { opacity: 1; cursor: pointer; border-color: var(--terror); background: color-mix(in srgb, var(--terror) 12%, transparent); color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); animation: blink 1.4s infinite; }
+.stop-all.armed:hover { background: var(--terror); color: #fff; text-shadow: none; animation: none; }
+.stop-all-glyph { width: 8px; height: 8px; background: currentColor; }
+.system.alert { color: var(--terror); text-shadow: 0 0 10px color-mix(in srgb, var(--terror) 70%, transparent); letter-spacing: .14em; animation: terror-in 1.4s steps(3, end) 1; }
+.system.alert b { color: var(--terror); }
+.system.alert .cmd { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--terror); letter-spacing: .2em; }
+.system.halted { color: var(--terror); }
+.composer.stopall textarea { color: var(--terror); letter-spacing: .12em; text-transform: uppercase; }
+
+/* ================= connections & settings (inside MU/TH/UR) ================= */
+.mother-actions { display: flex; gap: 8px; }
+.mother-close[aria-pressed="true"] { background: var(--ph); color: #041004; text-shadow: none; }
+.settings .conn-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
+.settings .conn-grid { align-items: stretch; }
+.conn-card { border: 1px solid var(--ph-dim); padding: 16px 18px 18px; background: rgba(2, 6, 2, .6); display: grid; grid-template-rows: auto; gap: 14px; min-width: 0; overflow-wrap: anywhere; align-content: start; }
+.conn-card .head { display: flex; align-items: center; gap: 10px; align-self: center; }
+.conn-card .meta { align-self: start; }
+.conn-card .row { align-self: start; padding-top: 4px; }
+.conn-card .slot { min-height: 0; }
+.conn-card .mother-cmd { margin: 0; } .conn-card .slot { display: grid; gap: 8px; }
+.conn-card label { align-self: end; margin-top: 4px; }
+.conn-card .head .avatar { --size: 26px; }
+.conn-card h4 { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--agent, var(--ph)); }
+.conn-card .vendor { font-size: 9.5px; letter-spacing: .16em; color: var(--ph-dim); }
+.conn-card .session { margin-left: auto; font-size: 9.5px; letter-spacing: .16em; padding: 3px 8px; border: 1px solid var(--ph-dim); color: var(--ph-dim); white-space: nowrap; }
+.conn-card .session.on { color: var(--ph); border-color: var(--ph); }
+.conn-card .session.off { color: #ff7b72; border-color: #ff7b72; }
+.conn-card .session.busy { color: #ffd166; border-color: #ffd166; animation: blink 1s infinite; }
+.conn-card .meta { font-size: 11px; line-height: 1.6; color: rgba(210, 255, 190, .8); text-shadow: none; }
+.conn-card .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.conn-card button, .settings .room-form button { border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 9.5px; letter-spacing: .16em; padding: 6px 10px; cursor: pointer; }
+.conn-card button.primary, .settings .room-form button.primary { background: var(--ph); color: #041004; text-shadow: none; border-color: var(--ph); }
+.conn-card button:disabled, .settings .room-form button:disabled { opacity: .4; cursor: default; }
+.conn-card label, .settings .room-form label { display: grid; gap: 4px; font-size: 9.5px; letter-spacing: .16em; color: var(--ph-dim); }
+.conn-card input, .settings .room-form input, .settings .room-form select { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 12px; padding: 6px 8px; letter-spacing: .04em; min-width: 0; }
+.conn-card input:focus, .settings .room-form input:focus { outline: 1px solid var(--ph); }
+.conn-card .login-log { max-height: 140px; overflow-y: auto; border: 1px solid var(--ph-faint); background: #000; padding: 8px 10px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+.conn-card .login-log a { color: var(--ph); }
+.settings .room-form { border: 1px solid var(--ph-dim); padding: 14px 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
+.settings .room-form .full { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.settings .room-form .toggle { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .16em; color: var(--ph); cursor: pointer; }
+.settings .room-form .toggle input { width: auto; accent-color: #9bff66; }
+.settings .note { font-size: 10px; letter-spacing: .1em; color: var(--ph-dim); }
+.system.login { color: var(--phosphor); }
+.system.login.failed { color: var(--danger); }
+
+/* ================= agent popover (click on a sphere) ================= */
+.agents .avatar { cursor: pointer; }
+.agents .avatar.open { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--agent); }
+.agent-pop { position: fixed; z-index: 30; min-width: 250px; max-width: min(340px, calc(100vw - 32px)); padding: 12px 14px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
+.agent-pop .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.agent-pop .head b { color: var(--agent); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
+.agent-pop .head .vendor { color: var(--text-3); font-size: 10px; margin-left: auto; }
+.agent-pop .big { font-size: 22px; letter-spacing: -.01em; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; font-weight: 600; color: var(--text); }
+.agent-pop .big small { font-size: 10px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; font-family: var(--mono); font-weight: 400; }
+.agent-pop .gauge { height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin: 6px 0 10px; }
+.agent-pop .gauge i { display: block; height: 100%; width: 0; background: var(--agent); }
+.agent-pop .gauge.hot i { background: var(--crit); }
+.agent-pop dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
+.agent-pop dt { color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; }
+.agent-pop dd { margin: 0; color: var(--text-2); text-align: right; }
+.agent-pop dd.on { color: var(--phosphor); } .agent-pop dd.off { color: var(--danger); }
+.agent-pop .foot { margin-top: 10px; font-size: 9.5px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
+
+/* model chip & menu in the composer */
+.picker .model-chip { margin-left: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: none; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
+.picker .model-chip:hover { color: var(--agent, var(--text)); border-color: var(--agent, var(--line-2)); }
+/* Permission mode chip: TO @agent  #1 EXCHANGE ▾  model ▾ */
+.picker .mode-chip { margin-left: 8px; border: 1px solid var(--mode); background: transparent; color: var(--mode); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 2px 9px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s, border-color .2s; }
+.picker .mode-chip b { font-weight: 700; color: inherit; }
+.picker .mode-chip:hover { background: color-mix(in srgb, var(--mode) 12%, transparent); }
+.picker .mode-chip.m0 { --mode: var(--mode-0); }
+.picker .mode-chip.m1 { --mode: var(--mode-1); }
+.picker .mode-chip.m2 { --mode: var(--mode-2); }
+.picker .mode-chip.m3 { --mode: var(--mode-3); }
+.mode-menu { width: min(380px, calc(100vw - 24px)); padding: 12px; }
+.mode-menu .model-menu-title { margin: 4px 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mode-menu .mode-ladder { display: grid; gap: 2px; }
+.mode-menu .mode-option { --mode: var(--text-2); display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; font-family: var(--mono); padding: 12px 10px; border-radius: 8px; cursor: pointer; transition: background .15s, opacity .15s; }
+.mode-menu .mode-option + .mode-option { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
+.mode-menu .mode-option:hover { background: var(--line); }
+.mode-menu .mode-option.o0.current { --mode: var(--mode-0); }
+.mode-menu .mode-option.o1.current { --mode: var(--mode-1); }
+.mode-menu .mode-option.o2.current { --mode: var(--mode-2); }
+.mode-menu .mode-option.o3 { --mode: var(--mode-3); }
+.mode-menu .mode-option.locked { opacity: .45; }
+.mode-menu .mode-option.locked:hover { opacity: 1; }
+.mode-menu .mode-option:disabled { opacity: .3; cursor: default; }
+.mode-menu .mode-option:disabled:hover { background: transparent; }
+.mode-menu .mode-option .n { font-weight: 700; color: var(--mode); font-size: 12px; }
+.mode-menu .mode-option .body { display: grid; gap: 3px; min-width: 0; }
+.mode-menu .mode-option .name { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mode); }
+.mode-menu .mode-option.current .name, .mode-menu .mode-option:hover .name { color: var(--mode); }
+.mode-menu .mode-option:not(.current):not(.o3) .name { color: var(--text); }
+.mode-menu .mode-option .body { gap: 5px; }
+.mode-menu .mode-option .hint { display: block; font-size: 10.5px; line-height: 1.5; letter-spacing: 0; color: var(--text-2); text-transform: none; font-family: var(--sans, inherit); }
+.mode-menu .mode-option .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: var(--mode); white-space: nowrap; align-self: center; margin-left: 4px; }
+.mode-menu .mode-option .tag.raise { border: 1px solid var(--mode-3); border-radius: 999px; padding: 3px 9px; }
+.mode-menu .mode-option .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mode); box-shadow: 0 0 8px var(--mode); animation: mode-dot 1.4s ease-in-out infinite; }
+@keyframes mode-dot { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
+@media (prefers-reduced-motion: reduce) { .mode-menu .mode-option .tag .dot { animation: none; } }
+/* Composer wears the mode */
+.composer.ghost .field { border-style: dashed; border-color: var(--mode-0); box-shadow: none; opacity: .92; }
+.composer.ghost .crew-label { color: var(--mode-0); }
+.composer.ghost .editor textarea { color: transparent; }
+.composer.ghost .editor .highlight { color: var(--text-2); font-style: italic; }
+.composer.control { width: min(1180px, 100% - 40px); }
+.composer.control .field { border-color: var(--terror); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terror) 18%, transparent), 0 0 30px color-mix(in srgb, var(--terror) 20%, transparent); }
+.composer.control .crew-label { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); }
+.composer.intruder .crew-label { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); animation: blink 1.6s steps(1) infinite; }
+/* Mode badges on bubbles and plan steps */
+.who .badge.mode { font-weight: 700; letter-spacing: .1em; }
+.who .badge.mode.m0 { color: var(--mode-0); border-color: color-mix(in srgb, var(--mode-0) 50%, transparent); } .who .badge.mode.m1 { color: var(--mode-1); border-color: color-mix(in srgb, var(--mode-1) 45%, transparent); } .who .badge.mode.m2 { color: var(--mode-2); border-color: color-mix(in srgb, var(--mode-2) 50%, transparent); } .who .badge.mode.m3 { color: var(--mode-3); border-color: var(--mode-3); }
+.row.ghost .bubble { border: 1px dashed var(--line-2); background: transparent; opacity: .85; }
+.row.ghost.user .bubble { background: transparent; color: var(--text); border-color: var(--text-3); }
+.row.ghost .stamp::after { content: ' · not recorded'; color: var(--text-3); }
+.system.plan .step-mode { margin-left: 3px; font-weight: 700; }
+.system.plan .step-mode.m1 { color: var(--mode-1); } .system.plan .step-mode.m2 { color: var(--mode-2); }
+/* Emergency command override: a small MOTHER terminal */
+/* Only an open override is laid out; a closed <dialog> must stay display:none. */
+dialog.override[open] { display: grid; place-items: center; }
+.override-frame { width: min(680px, 92vw); height: auto; min-height: 0; padding: 26px 30px 22px; border: 1px solid var(--ph-dim); box-shadow: 0 0 0 1px var(--ph-faint), 0 0 60px rgba(155, 255, 102, .12); animation: mother-on .4s ease; }
+.override-query { grid-template-columns: auto 1fr auto; }
+.override-query .k { font-size: 11px; letter-spacing: .22em; color: var(--ph-dim); }
+.override-query input { text-transform: none; letter-spacing: .12em; }
+.override-reply { min-height: 22px; letter-spacing: .14em; }
+.override-reply.denied { color: #ff7b72; text-shadow: 0 0 10px rgba(255, 123, 114, .6); animation: terror-in .8s steps(3, end) 1; }
+.override-reply.granted { color: var(--ph); text-shadow: 0 0 10px rgba(155, 255, 102, .6); }
+.override-frame.shake { animation: override-shake .35s ease; }
+@keyframes override-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
+.model-menu { position: fixed; z-index: 40; width: min(320px, calc(100vw - 24px)); padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text); }
+.model-menu-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 2px 4px 8px; }
+.model-menu-title b { color: var(--agent); }
+.model-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
+.model-option { text-align: left; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-family: var(--mono); font-size: 12px; padding: 7px 10px; cursor: pointer; }
+.model-option:hover { background: color-mix(in srgb, var(--agent) 12%, transparent); }
+.model-option.current { background: color-mix(in srgb, var(--agent) 20%, transparent); color: var(--agent); }
+.model-custom { margin-top: 8px; }
+.model-custom input { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-family: var(--mono); font-size: 11px; padding: 6px 9px; outline: 0; }
+.model-custom input:focus { border-color: var(--agent, var(--phosphor)); }
+.model-note { margin: 8px 4px 0; font-size: 9.5px; color: var(--text-3); line-height: 1.5; }
+.who .badge.model { color: var(--agent); border-color: color-mix(in srgb, var(--agent) 50%, transparent); text-transform: none; letter-spacing: .04em; }
+
+/* ================= attachments, inline files & viewer ================= */
+.field { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; }
+.attach { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
+.attach:hover { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
+.attach svg { width: 18px; height: 18px; }
+.composer.dropping .field { border-color: var(--phosphor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phosphor) 25%, transparent); }
+.attachments { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 6px; }
+.attachment-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); font-family: var(--mono); font-size: 10.5px; color: var(--text-2); max-width: 260px; }
+.attachment-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
+.attachment-chip .kind { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--phosphor) 12%, transparent); color: var(--phosphor); font-size: 9px; letter-spacing: .08em; }
+.attachment-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attachment-chip .remove { border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 13px; padding: 0 2px; }
+.attachment-chip .remove:hover { color: var(--danger); }
+.attachment-chip.uploading { opacity: .6; }
+.bubble .files { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
+.bubble .file-tile { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.08); font-family: var(--mono); font-size: 10.5px; cursor: pointer; color: inherit; max-width: 100%; }
+.assistant .bubble .file-tile { border-color: var(--line-2); background: var(--panel); color: var(--text-2); }
+.bubble .file-tile img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; display: block; }
+.bubble .file-tile.image { padding: 0; border: 0; background: transparent; }
+.bubble img.inline { max-width: 100%; max-height: 420px; border-radius: 12px; display: block; margin: 6px 0; cursor: zoom-in; }
+.bubble a.file-link { color: var(--agent, var(--phosphor)); text-decoration: none; border-bottom: 1px dashed currentColor; font-family: var(--mono); font-size: .92em; cursor: pointer; }
+dialog.viewer { border: 0; padding: 0; width: min(1100px, 96vw); max-width: 96vw; height: min(88vh, 900px); background: var(--panel); color: var(--text); border-radius: 16px; box-shadow: var(--shadow); }
+dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
+.viewer-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
+.viewer-path { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+.viewer-open { color: var(--phosphor); text-decoration: none; letter-spacing: .12em; font-size: 10px; }
+.viewer-body { height: calc(100% - 46px); overflow: auto; display: grid; place-items: start center; padding: 16px; }
+.viewer-body img { max-width: 100%; max-height: 100%; border-radius: 8px; }
+.viewer-body pre { margin: 0; width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+.viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 8px; }
+.viewer-body .err { color: var(--danger); font-family: var(--mono); }
+.viewer-body iframe.ripley { background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
+.viewer-body .viewer-markdown { width: min(820px, 100%); justify-self: center; padding: 8px 4px 24px; font-size: 15px; line-height: 1.6; background: transparent; }
+.viewer-body .viewer-hint { width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-3); }
+.viewer-body .viewer-hint b { color: var(--phosphor); font-weight: 600; }
+.viewer-mode { border-color: var(--text-3); color: var(--text-2); background: transparent; }
+.viewer-mode:hover { color: var(--text); border-color: var(--text-2); background: var(--line); }
+.viewer-body pre.code { display: grid; grid-template-columns: max-content 1fr; padding: 4px 0 24px; white-space: pre; overflow: visible; font-size: 12.5px; line-height: 1.6; counter-reset: none; }
+.viewer-body pre.code .ln { position: sticky; left: 0; user-select: none; text-align: right; padding: 0 14px 0 10px; color: var(--text-3); cursor: pointer; border-right: 1px solid var(--line); background: var(--panel); }
+.viewer-body pre.code .ln:hover { color: var(--phosphor); }
+.viewer-body pre.code .tx { padding: 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.viewer-body pre.code .ln.sel, .viewer-body pre.code .tx.sel { background: color-mix(in srgb, var(--phosphor) 14%, transparent); }
+.viewer-body pre.code .ln.sel { color: var(--phosphor); border-right-color: var(--phosphor); }
+.viewer-body pre.code .tx.sel { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--phosphor) 55%, transparent); }
+.viewer-body pre.code .ln.hl, .viewer-body pre.code .tx.hl { background: color-mix(in srgb, var(--warn) 16%, transparent); }
+.viewer-body pre.code .tx:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
+.viewer-body:has(pre.code) { display: block; padding: 0; }
+.viewer-selection { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--phosphor); white-space: nowrap; }
+.viewer-review { border: 1px solid var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); color: var(--phosphor); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
+.viewer-review:hover { background: color-mix(in srgb, var(--phosphor) 20%, transparent); }
+.viewer-menu { position: fixed; z-index: 50; min-width: 220px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
+.viewer-menu .hint { padding: 4px 10px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
+.viewer-menu .item { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
+.viewer-menu .item:hover { background: color-mix(in srgb, var(--agent, var(--phosphor)) 14%, transparent); }
+.viewer-menu .item b { color: var(--agent, var(--phosphor)); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
+.viewer-menu .item.off { opacity: .5; }
+.bubble .file-ref { font-family: var(--mono); font-size: 12.5px; color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); border: 1px solid color-mix(in srgb, var(--phosphor) 35%, transparent); border-radius: 6px; padding: 0 6px; cursor: pointer; }
+.bubble .file-ref:hover { background: color-mix(in srgb, var(--phosphor) 18%, transparent); }
+.caps { display: flex; gap: 6px; flex-wrap: wrap; }
+.cap { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-3); }
+.cap.on { color: var(--agent, var(--phosphor)); border-color: color-mix(in srgb, var(--agent, var(--phosphor)) 50%, transparent); }
+.conn-card .caps .cap.on { color: var(--ph); border-color: var(--ph-dim); }
+.conn-card .caps .cap { color: var(--ph-dim); border-color: var(--ph-faint); }
+
+/* ================= creation lease ================= */
+.create-toggle { height: 30px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; align-self: center; transition: color .2s, border-color .2s, background .2s; }
+.create-toggle svg { width: 15px; height: 15px; }
+.create-toggle:hover { color: var(--text); border-color: var(--text-3); }
+.create-toggle[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--warn) 50%, transparent); }
+.create-toggle .lock.open { display: none; }
+.create-toggle.standing { color: var(--warn); border-style: dashed; border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
+.create-toggle.standing .lock.closed { display: none; }
+.create-toggle.standing .lock.open { display: block; }
+.system.lease.missing { color: var(--warn); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; }
+.system.lease.missing .actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
+.system.lease.missing button { border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); font: inherit; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
+.system.lease.missing button:hover { background: color-mix(in srgb, var(--warn) 20%, transparent); }
+.system.lease.missing button:disabled { opacity: .6; cursor: default; }
+.conn-card .scope.sub { margin-left: 22px; font-size: 9px; margin-top: -2px; }
+.conn-card .ceiling { display: grid; grid-template-columns: auto auto; gap: 8px 12px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ph-faint); }
+.conn-card .ceiling .k { font-size: 9.5px; letter-spacing: .16em; color: var(--ph-dim); }
+.conn-card .ceiling .why { grid-column: 1 / -1; font-size: 9px; letter-spacing: .08em; color: var(--ph-dim); text-transform: none; line-height: 1.5; }
+.conn-card .seg { display: inline-flex; border: 1px solid var(--ph-dim); }
+.conn-card .seg-option { border: 0; border-right: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; font-size: 10px; letter-spacing: .1em; padding: 4px 9px; cursor: pointer; }
+.conn-card .seg-option:last-child { border-right: 0; }
+.conn-card .seg-option:hover { background: var(--ph-faint); color: var(--ph); }
+.conn-card .seg-option.current { background: var(--ph); color: #041004; font-weight: 700; }
+.conn-card .seg-option.o3.current { background: #ff7b72; }
+.conn-card .seg-option:disabled { opacity: .35; cursor: default; }
+.create-toggle[aria-pressed="true"] .lock.closed { display: none; }
+.create-toggle[aria-pressed="true"] .lock.open { display: block; }
+/* ORDER 937: a bash prompt on a black terminal, Homebrew green. */
+/* Off: a dormant prompt, grey like the other idle controls. On: the terminal lights up. */
+.ashcode-toggle { height: 30px; padding: 0 10px 0 9px; border-radius: 7px; border: 1px dashed var(--line-2); background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: none; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 6px; opacity: .8; transition: color .2s, border-color .2s, box-shadow .2s, background .2s, opacity .2s; }
+.ashcode-toggle::before { content: '$'; color: var(--text-3); font-weight: 700; }
+.ashcode-toggle::after { content: ''; width: 7px; height: 12px; background: currentColor; opacity: .25; margin-left: 1px; }
+.ashcode-toggle:hover { opacity: 1; color: var(--text-2); border-color: var(--text-3); }
+.ashcode-toggle[aria-pressed="true"] { opacity: 1; border-style: solid; background: #070907; color: var(--brew); border-color: var(--brew); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brew) 25%, transparent), 0 0 18px color-mix(in srgb, var(--brew) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--brew) 14%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 70%, transparent); }
+.ashcode-toggle[aria-pressed="true"]::before { color: color-mix(in srgb, var(--brew) 75%, transparent); }
+.ashcode-toggle[aria-pressed="true"]::after { animation: cursor-blink 1s steps(1) infinite; opacity: 1; }
+.ashcode-toggle[aria-pressed="true"]:hover { color: var(--brew); border-color: var(--brew); }
+:root[data-theme="light"] .ashcode-toggle, .ashcode-toggle { /* stays a black terminal in every theme */ }
+
+/* With ORDER 937 lit, the field widens like CREATE and glows Homebrew green. */
+.composer.ordering { width: min(1180px, 100% - 40px); }
+.composer.ordering .field { position: relative; border-color: color-mix(in srgb, var(--brew) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brew) 14%, transparent); }
+.composer.ordering .crew-label { color: var(--brew); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 55%, transparent); }
+.composer.ordering .editor textarea::placeholder { color: color-mix(in srgb, var(--brew) 60%, transparent); }
+.composer.creating.ordering .field { border-color: var(--mode-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-2) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brew) 45%, transparent); }
+
+/* The wink to MOTHER when the order is given: a CRT sweep and scanlines that fade. */
+.composer .field::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2;
+  background:
+    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--brew) 0%, transparent) 40%, color-mix(in srgb, var(--brew) 38%, transparent) 50%, transparent 60%) no-repeat,
+    repeating-linear-gradient(0deg, color-mix(in srgb, var(--brew) 10%, transparent) 0 1px, transparent 1px 3px);
+  background-size: 60% 100%, 100% 100%; background-position: -60% 0, 0 0; }
+.composer.ash-wink .field::before { animation: ash-sweep 1.5s cubic-bezier(.2, .7, .2, 1) 1; }
+.composer.ash-wink .crew-label { animation: phosphor-flicker .8s steps(1) 2; }
+.composer.ash-wink .editor textarea { animation: ash-type .9s steps(1) 1; }
+@keyframes ash-sweep { 0% { opacity: 0; background-position: -60% 0, 0 0; } 12% { opacity: 1; } 70% { opacity: .9; background-position: 160% 0, 0 0; } 100% { opacity: 0; background-position: 160% 0, 0 0; } }
+@keyframes ash-type { 0%, 30% { caret-color: var(--brew); } 40% { caret-color: transparent; } 55% { caret-color: var(--brew); } 100% { caret-color: var(--text); } }
+.field .rain { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 3; }
+.rain.global { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; animation: rain-in .25s ease-out 1; }
+@keyframes rain-in { from { opacity: 0; } to { opacity: 1; } }
+/* GHOST: the field disintegrates into a grid of dots that shrink to nothing, then reintegrates dashed, in mode #0. */
+@property --ghost-dot { syntax: '<length>'; inherits: false; initial-value: 7px; }
+.composer.ghost-wink .field { animation: ghost-dissolve 1.3s cubic-bezier(.45, 0, .2, 1) 1;
+  -webkit-mask-image: radial-gradient(circle, #000 var(--ghost-dot), transparent calc(var(--ghost-dot) + .6px)); -webkit-mask-size: 8px 8px; -webkit-mask-position: 0 0;
+  mask-image: radial-gradient(circle, #000 var(--ghost-dot), transparent calc(var(--ghost-dot) + .6px)); mask-size: 8px 8px; mask-position: 0 0; }
+@keyframes ghost-dissolve {
+  0% { --ghost-dot: 7px; opacity: 1; border-style: solid; border-color: var(--line-2); filter: blur(0); }
+  40% { --ghost-dot: 0px; opacity: .6; border-style: solid; border-color: var(--line-2); filter: blur(1.5px); }
+  58% { --ghost-dot: 0px; opacity: .6; border-style: dashed; border-color: var(--mode-0); filter: blur(1.5px); }
+  100% { --ghost-dot: 7px; opacity: .92; border-style: dashed; border-color: var(--mode-0); filter: blur(0); } }
+.composer.control-wink .field::before { animation: control-sweep 2.2s cubic-bezier(.2, .7, .2, 1) 1;
+  background:
+    linear-gradient(90deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--terror) 45%, transparent) 50%, transparent 60%) no-repeat,
+    repeating-linear-gradient(0deg, color-mix(in srgb, var(--terror) 14%, transparent) 0 1px, transparent 1px 3px);
+  background-size: 60% 100%, 100% 100%; }
+.composer.control-wink .crew-label { animation: terror-flicker 1.1s steps(1) 2; }
+.composer.control-wink .editor textarea { animation: control-type 1.4s steps(1) 1; }
+@keyframes control-sweep { 0% { opacity: 0; background-position: -60% 0, 0 0; } 8% { opacity: 1; } 18% { opacity: .3; } 26% { opacity: 1; } 72% { opacity: .9; background-position: 160% 0, 0 0; } 100% { opacity: 0; background-position: 160% 0, 0 0; } }
+@keyframes terror-flicker { 0%, 100% { filter: none; } 15% { filter: brightness(2) saturate(1.6); } 30% { filter: brightness(.5); } 45% { filter: brightness(1.8); } 60% { filter: brightness(.8); } }
+@keyframes control-type { 0%, 30% { caret-color: var(--terror); } 40% { caret-color: transparent; } 55% { caret-color: var(--terror); } 100% { caret-color: var(--text); } }
+@media (prefers-reduced-motion: reduce) { .composer.ash-wink .field::before, .composer.ash-wink .crew-label, .composer.ash-wink .editor textarea, .composer.control-wink .field::before, .composer.control-wink .crew-label, .composer.control-wink .editor textarea, .composer.ghost-wink .field, .rain.global { animation: none; } }
+
+.who .badge.ash { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 50%, transparent); }
+.who .badge.ash.skipped { color: var(--text-3); border-color: var(--line-2); }
+.ash-original { margin-top: 10px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
+.ash-original summary { color: var(--text-3); font-family: var(--mono); font-size: 10px; cursor: pointer; }
+.ash-original pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font: inherit; color: var(--text-2); }
+.ash-beta { color: var(--warn); font-size: 12px; }
+.create-scopes { display: inline-flex; gap: 4px; margin-left: 4px; }
+.create-scopes .cap { font-size: 8.5px; padding: 1px 5px; }
+.create-scopes .cap.on { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
+.create-scopes .cap.no { text-decoration: line-through; opacity: .7; }
+.system.lease.refused { color: var(--danger); }
+/* CONTROL cards */
+.system.control { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 45%, transparent); }
+.system.control .who { color: var(--agent); }
+.system.control code { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--terror) 45%, transparent); border-radius: 6px; }
+.system.control.changed { display: grid; gap: 8px; justify-items: center; max-width: min(760px, 92%); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--terror) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--terror) 6%, transparent); text-shadow: none; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
+.system.control.changed .head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
+.system.control.changed.quiet { border-style: dashed; color: var(--text-2); background: transparent; }
+.system.control .files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: start; text-align: left; }
+.system.control .files li { display: flex; gap: 8px; align-items: center; }
+.system.control .files .st { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); min-width: 64px; }
+.system.control .files .st.A { color: var(--phosphor); } .system.control .files .st.M { color: var(--warn); } .system.control .files .st.D { color: var(--danger); }
+.system.control .files .file-ref { font-family: var(--mono); font-size: 12px; color: var(--text); background: transparent; border: 0; border-bottom: 1px dashed var(--line-2); padding: 0; cursor: pointer; }
+.system.control .files .file-ref:disabled { text-decoration: line-through; cursor: default; }
+.system.control .stat { margin: 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: pre-wrap; }
+.system.control .forbidden { font-family: var(--mono); font-size: 10.5px; color: var(--danger); letter-spacing: .04em; }
+.system.control .undo { border: 1px solid var(--terror); background: color-mix(in srgb, var(--terror) 12%, transparent); color: var(--terror); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
+.system.control .undo:hover { background: color-mix(in srgb, var(--terror) 22%, transparent); }
+.system.control .undo:disabled { opacity: .5; cursor: default; }
+.system.control .outcome { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--phosphor); }
+.system.control.reverted { color: var(--phosphor); text-shadow: none; }
+/* Escalation card: the plan waits for the human, with a clock */
+.system.escalation { color: var(--warn); display: grid; gap: 8px; justify-items: center; max-width: min(760px, 92%); padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--warn) 6%, transparent); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
+.system.escalation .head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
+.system.escalation .head .who { color: var(--agent); }
+.system.escalation .quote { font-family: inherit; font-size: 13px; color: var(--text-2); font-style: italic; text-align: center; overflow-wrap: anywhere; }
+.system.escalation .actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
+.system.escalation button { border: 1px solid color-mix(in srgb, var(--warn) 65%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
+.system.escalation button.plan { border-style: double; }
+.system.escalation button.deny { color: var(--text-2); border-color: var(--line-2); background: transparent; }
+.system.escalation button:hover { filter: brightness(1.1); background: color-mix(in srgb, var(--warn) 22%, transparent); }
+.system.escalation button:disabled { opacity: .5; cursor: default; }
+.system.escalation .clock { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-3); margin-left: 6px; }
+.system.escalation .clock.late { color: var(--crit); animation: blink 1s infinite; }
+.system.escalation .outcome { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; }
+.system.escalation.granted { border-style: solid; color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 50%, transparent); background: color-mix(in srgb, var(--phosphor) 6%, transparent); }
+.system.escalation.denied { color: var(--text-3); border-color: var(--line-2); background: transparent; }
+.composer.creating .field { border-color: var(--mode-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-2) 18%, transparent); }
+.composer.creating .crew-label { color: var(--mode-2); }
+.who .badge.lease { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
+.user .stamp .lease { color: var(--warn); }
+.system.lease { color: var(--warn); }
+.bubble .artifacts { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); }
+.bubble .artifacts .label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--warn); margin-bottom: 6px; }
+@media (max-width: 680px) { .create-toggle .create-word { display: none; } .create-toggle { padding: 0 8px; } }
+
+/* no horizontal overflow inside bubbles: wrap everything */
+.bubble, .bubble * { min-width: 0; }
+.bubble { max-width: 100%; overflow-x: hidden; }
+.codeblock pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
+.bubble table { display: block; max-width: 100%; overflow-x: auto; }
+.bubble img.inline, .bubble .file-tile img { max-width: 100%; }
+.plan-card li, .bubble li, .bubble p, .bubble a { overflow-wrap: anywhere; }
+.bubble .table-wrap { overflow-x: auto; margin: 6px 0 10px; max-width: 100%; }
+.bubble table { border-collapse: collapse; font-size: 13px; line-height: 1.45; min-width: 60%; }
+.bubble th, .bubble td { border: 1px solid color-mix(in srgb, var(--bubble-ink) 14%, transparent); padding: 6px 10px; vertical-align: top; text-align: left; }
+.bubble th { font-weight: 650; background: color-mix(in srgb, var(--bubble-ink) 6%, transparent); font-size: 12px; letter-spacing: .02em; }
+.bubble tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bubble-ink) 3%, transparent); }
+.row.user .bubble th, .row.user .bubble td { border-color: color-mix(in srgb, var(--user-ink) 25%, transparent); }
+.row .col { max-width: 100%; }
+.thread-inner { overflow-x: hidden; }
+/* scope toggles in connection cards */
+.conn-card .scopes { display: grid; gap: 10px; align-self: start; padding-top: 12px; border-top: 1px solid var(--ph-faint); }
+.conn-card .scope .assist { margin-left: 6px; border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 8.5px; letter-spacing: .14em; padding: 1px 6px; cursor: pointer; text-transform: uppercase; }
+.conn-card .scope .assist:hover { background: var(--ph-faint); }
+.conn-card .scope { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; color: var(--ph); cursor: pointer; }
+.conn-card .scope input { accent-color: #9bff66; width: auto; }
+.conn-card .scope.unavailable { color: var(--ph-dim); cursor: not-allowed; }
+.conn-card .scope .why { margin-left: auto; font-size: 9px; letter-spacing: .08em; color: var(--ph-dim); text-transform: none; }
+
+/* CREATE armed and text present: the field widens past the column; height follows line breaks only */
+/* Field box: one line, always. It grows only with explicit line breaks
+   (max two, three visible lines) and scrolls beyond. It widens, keeping
+   one line, while CREATE is armed, so the longer lease prompt fits. */
+.field { align-items: center; }
+.composer { transition: width .3s ease; }
+.composer.creating { width: min(1180px, 100% - 40px); }
+.editor textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.editor { position: relative; display: grid; min-width: 0; }
+.editor textarea, .editor .highlight { grid-area: 1 / 1; margin: 0; padding: 7px 0; line-height: 21px; font-size: 15px; font-family: inherit; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; box-sizing: content-box; min-height: 0; max-height: none; overflow-y: auto; }
+.editor textarea { position: relative; z-index: 1; color: transparent; caret-color: var(--text); }
+.editor textarea::selection { background: color-mix(in srgb, var(--phosphor) 30%, transparent); }
+.composer.stopall .editor textarea { color: var(--terror); }
+.composer.stopall .editor .highlight { visibility: hidden; }
+.editor .highlight { color: var(--text); pointer-events: none; scrollbar-width: none; }
+.editor .highlight::-webkit-scrollbar { display: none; }
+.editor .highlight .chip { --chip-bg: color-mix(in srgb, var(--agent, var(--phosphor)) 16%, var(--panel)); border-radius: 5px; padding: 0; margin: 0; background: var(--chip-bg); color: var(--agent, var(--phosphor)); box-shadow: 0 0 0 3px var(--chip-bg), 0 0 0 4px color-mix(in srgb, var(--agent, var(--phosphor)) 40%, transparent); font-weight: 600; }
+.editor .highlight .chip.cmd { --agent: var(--phosphor); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
+.editor .highlight .chip.file { --agent: var(--text-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0; font-weight: 500; }
+.editor .highlight .chip.unknown { --agent: var(--text-3); text-decoration: underline dotted; font-weight: 500; }
+.slash-menu { position: absolute; left: -12px; bottom: calc(100% + 14px); z-index: 30; min-width: 280px; max-width: min(460px, 90vw); border: 1px solid var(--line-2); background: var(--panel); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
+.slash-menu .item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
+.slash-menu .item .key { font-family: var(--mono); font-size: 12.5px; color: var(--agent, var(--phosphor)); font-weight: 600; white-space: nowrap; }
+.slash-menu .item .what { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.slash-menu .item.off .key { color: var(--text-3); text-decoration: line-through; }
+.slash-menu .item[aria-selected="true"], .slash-menu .item:hover { background: color-mix(in srgb, var(--agent, var(--phosphor)) 14%, transparent); }
+.slash-menu .hint { padding: 4px 10px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
+/* ---------- project files panel: lives in the free space right of the thread ---------- */
+.tree-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
+.tree-button svg { width: 16px; height: 16px; }
+.theme-button svg { display: none; }
+.theme-button[data-theme="auto"] .t-auto, .theme-button[data-theme="light"] .t-light, .theme-button[data-theme="dark"] .t-dark { display: block; }
+.tree-button:hover, .tree-button[aria-pressed="true"] { color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 14px color-mix(in srgb, var(--phosphor) 30%, transparent); }
+.tree { grid-row: 3; justify-self: end; align-self: stretch; z-index: 5; width: clamp(240px, calc((100% - var(--column)) / 2 - 36px), 420px); margin: 18px 20px 10px 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); overflow: hidden; animation: tree-in .22s ease; }
+@keyframes tree-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
+.tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--text-2); }
+.tree-title { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
+.tree-root { color: var(--text-3); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-close { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
+.tree-close:hover { color: var(--text); background: var(--line); }
+.tree-body { overflow: auto; padding: 8px 8px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .01em; }
+.tree-body ul { list-style: none; margin: 0; padding: 0; }
+.tree-body ul ul { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 9px; }
+.tree-body li { margin: 0; }
+.tree-body .node { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; text-align: left; padding: 4px 8px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tree-body .node:hover { background: color-mix(in srgb, var(--phosphor) 10%, transparent); color: var(--text); }
+.tree-body .node .caret { width: 10px; color: var(--text-3); flex: none; font-size: 10px; }
+.tree-body .node .name { overflow: hidden; text-overflow: ellipsis; }
+.tree-body .node.dir .name { color: var(--text); }
+.tree-body .node.file .name::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin-right: 7px; background: var(--line-2); vertical-align: 1px; }
+.tree-body .node.file.image .name::before { background: var(--phosphor); }
+.tree-body .node.file.code .name::before { background: color-mix(in srgb, var(--warn) 70%, transparent); }
+.tree-body .node .size { margin-left: auto; color: var(--text-3); font-size: 10px; padding-left: 8px; }
+.tree-body .node.shallow .name::after { content: ' · not walked'; color: var(--text-3); font-size: 10px; }
+.tree-body .empty-dir, .tree-body .error { padding: 4px 24px; color: var(--text-3); font-size: 11px; }
+@media (max-width: 1180px) { .tree, .tree-button { display: none !important; } }
+
+.command-card { margin: 10px 0 6px; max-width: min(860px, 100%); border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, transparent); overflow: hidden; }
+.command-card.failed { border-color: color-mix(in srgb, var(--crit) 60%, transparent); }
+.command-card .head { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text-2); border-bottom: 1px solid var(--line-2); }
+.command-card .head b { color: var(--phosphor); font-weight: 600; }
+.command-card .head .args { color: var(--text-3); letter-spacing: .04em; }
+.command-card pre { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
+.command-card pre .h { color: var(--phosphor); font-weight: 600; }
+
+.module-card select { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 10.5px; letter-spacing: .06em; padding: 6px 8px; }