@jossuealcala/madre 1.0.0 → 1.0.2

package/public/styles.css

@@ -1,3 +1,5 @@
+/* SPDX-License-Identifier: AGPL-3.0-only
+   MADRE · © 2026 Jossue Alcalá · GNU AGPL v3 with additional terms (Section 7): ADDITIONAL-TERMS.md */
 /* MADRE — a conversation, not a log.
    iMessage for the dialogue, a terminal for the metadata, MOTHER for the mood. */
 
@@ -41,6 +43,9 @@
   --text-3: #626a5f;
 
   --phosphor: #9bff66;           /* MOTHER */
+  /* MADRE's own green, which an accent never repaints: the copilot wears it (2026-10-14). */
+  --madre-green: #9bff66;
+  --madre-green-ink: #0a1405;
   --brew: #28fe14;               /* Terminal.app 'Homebrew' green */
   --brew-ink: #041004;
   --phosphor-ink: #0a1405;
@@ -121,6 +126,8 @@
     --text-2: #5a615a;
     --text-3: #767d75;
     --phosphor: #2f8a1c;
+    --madre-green: #2f8a1c;
+    --madre-green-ink: #ffffff;
     --brew: #178f0c;
     --brew-ink: #ffffff;
     --phosphor-ink: #ffffff;
@@ -157,6 +164,8 @@
     --text-2: #5a615a;
     --text-3: #767d75;
     --phosphor: #2f8a1c;
+    --madre-green: #2f8a1c;
+    --madre-green-ink: #ffffff;
     --brew: #178f0c;
     --brew-ink: #ffffff;
     --phosphor-ink: #ffffff;
@@ -829,6 +838,9 @@ textarea::placeholder { color: var(--text-3); }
 .composer.m2 { --mode: var(--mode-2); --mode-ink: var(--mode-2-ink); }
 .composer.m3 { --mode: var(--mode-3); --mode-ink: var(--mode-3-ink); }
 .composer.m4 { --mode: var(--mode-4); --mode-ink: var(--mode-4-ink); }
+/* Under the copilot #3 is MADRE's green, not EDIT's red: the chip, the send and the ring follow. */
+.composer.m3.copilot { --mode: var(--madre-green); --mode-ink: var(--madre-green-ink); }
+.composer.copilot .picker .mode-chip.m3 { --mode: var(--madre-green); }
 .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: var(--lift-1); transition: background calc(250ms * var(--motion-scale)), box-shadow calc(250ms * var(--motion-scale)); }
 .field button[type="submit"] svg { width: 18px; height: 18px; }
 .field button[type="submit"]:hover { filter: brightness(1.06); }
@@ -1184,7 +1196,11 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 
 .model-menu.effort-menu { --tone: var(--agent, var(--phosphor)); width: min(400px, calc(100vw - 24px)); padding: 12px 14px 10px; }
 .effort-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
-.effort-head .model-menu-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* The title on the left and AUTO in the right corner, on the same line (2026-10-14): the title
+   keeps its room and is cut before it is covered; a long AUTO reading is cut instead of the title. */
+.effort-head .model-menu-title { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
+.effort-head .effort-auto { margin-left: auto; max-width: 52%; }
+.effort-head .effort-auto .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Letting the CLI decide: a small switch beside the title, lit while it is the choice. */
 .effort-auto { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 26px; padding: 0 10px 0 9px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; transition: color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out); }
 .effort-auto .auto-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color var(--motion) var(--ease-out); }
@@ -1521,6 +1537,8 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .viewer-nav { display: inline-flex; gap: 4px; }
 .viewer-nav .nav { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; }
 .viewer-nav .nav:hover { color: var(--text); border-color: var(--text-3); }
+/* The browser's reload is the bar's reload mark (2026-10-14), the same drawing, still. */
+.viewer-nav .nav.reload svg { width: 14px; height: 14px; }
 .viewer-nav .nav:disabled { opacity: .35; cursor: default; }
 .viewer-errors { display: grid; gap: 6px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); font-family: var(--mono); font-size: 11px; }
 .viewer-errors:not([hidden]) + .viewer-body { height: auto; max-height: calc(100% - 46px); }
@@ -1910,6 +1928,13 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .mode-what { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
 .mode-what .who { display: inline; margin: 0; padding: 0; font: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--agent, var(--text)); }
 .mode-why { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
+.mode-what .mode-time { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-2); }
+/* How long the permission holds: the time the agent asked for, preselected; the human may change it. */
+.mode-windows { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); justify-self: start; }
+.mode-window { border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 5px 10px; cursor: pointer; transition: background .18s ease, color .18s ease; }
+.mode-window:hover { color: var(--text); }
+.mode-window[aria-checked="true"] { background: var(--panel, #fff); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
+.mode-window:focus-visible { outline: 2px solid color-mix(in srgb, var(--warn, #e2a022) 60%, transparent); outline-offset: 1px; }
 .mode-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
 .mode-alt { border: 1px solid var(--line-2); border-radius: 7px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 6px 11px; cursor: pointer; }
 .mode-alt:hover { color: var(--text); border-color: var(--text-3); }
@@ -1964,8 +1989,23 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .run-request .run-line.running { cursor: progress; border-color: var(--agent, var(--phosphor)); }
 .run-request .run-line.running .choice-tag { animation: klaxon 1.2s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) { .run-request .run-line.running .choice-tag { animation: none; } }
-.run-request .run-line.ran .choice-tag { background: var(--agent, var(--phosphor)); color: var(--bg); }
+.run-request .run-line.ran .choice-tag { border-color: var(--ok, var(--phosphor)); color: var(--ok, var(--phosphor)); }
 .run-request .run-line.failed .choice-tag { border-color: var(--crit); color: var(--crit); }
+.run-request .run-summary { margin: 10px 2px 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); }
+/* RUN ALL and the hand-back: quiet buttons in the agent's colour, under the summary. */
+.run-request .run-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; }
+.run-request .run-actions:empty { display: none; }
+.run-request :is(.run-all, .run-back) { border: 1px solid color-mix(in srgb, var(--agent, var(--phosphor)) 55%, transparent); border-radius: 999px; background: transparent; color: var(--agent, var(--text)); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 6px 12px; cursor: pointer; transition: background .18s ease; }
+.run-request :is(.run-all, .run-back):hover:not(:disabled) { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+.run-request :is(.run-all, .run-back):disabled { opacity: .5; cursor: progress; }
+.run-request.returned .run-summary { color: var(--ok, var(--phosphor)); }
+.run-request.returned .run-all { display: none; }
+/* A message MADRE wrote for the human: the results of commands going back. Same bubble, quieter. */
+#messages .row.user.auto .bubble { opacity: .82; }
+.run-request .run-progress-track { position: relative; flex: 1 1 100%; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 18%, transparent); }
+.run-request .run-progress-track::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 32%; border-radius: inherit; background: var(--agent, var(--phosphor)); animation: run-travel 1.6s ease-in-out infinite alternate; }
+@keyframes run-travel { from { transform: translateX(0); } to { transform: translateX(220%); } }
+@media (prefers-reduced-motion: reduce) { .run-request .run-progress-track::after { animation: none; width: 100%; } }
 .run-request .run-line.refused { cursor: not-allowed; opacity: .6; }
 .run-request .run-line.refused .choice-tag { border-color: var(--text-3); color: var(--text-3); }
 /* A command still alive: where it serves, and the two things to do with it. The tag holds still
@@ -2223,6 +2263,31 @@ dialog.intents-window { width: 760px; height: 640px; }
 .command-card .undo { margin: 0 12px 10px; 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; }
 .command-card .undo:hover { background: color-mix(in srgb, var(--terror) 22%, transparent); }
 .command-card .undo:disabled { opacity: .5; cursor: default; }
+/* What a terminal said, folded (2026-10-14): one line — the command, how it ended, how long, who
+   asked — and its last line beneath; the output opens on a click, without a jump. */
+.command-card.terminal .term-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
+.command-card.terminal .term-head:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 55%, transparent); outline-offset: -2px; border-radius: 12px; }
+.command-card.terminal .term-tag { flex: none; font-size: 9.5px; letter-spacing: .14em; font-weight: 600; color: var(--text-3); }
+.command-card.terminal code.term-line { padding: 0; border: 0; background: none; }
+.command-card.terminal .term-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--text); }
+.command-card.terminal .term-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 10px; letter-spacing: .03em; white-space: nowrap; color: var(--text-2); background: color-mix(in srgb, var(--text) 6%, transparent); }
+.command-card.terminal .term-status.ok { color: var(--ok, #2f9e44); background: color-mix(in srgb, var(--ok, #2f9e44) 12%, transparent); }
+.command-card.terminal .term-status.failed { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
+.command-card.terminal .term-who { flex: none; font-size: 10.5px; color: var(--agent, var(--text-3)); }
+.command-card.terminal .term-count { flex: none; font-size: 10px; color: var(--text-3); white-space: nowrap; }
+.command-card.terminal .term-head .chev-icon { flex: none; display: inline-flex; color: var(--text-3); transition: transform .22s ease; }
+.command-card.terminal.open .term-head .chev-icon { transform: rotate(180deg); }
+.command-card.terminal .term-peek { margin-top: -4px; padding: 0 12px 9px; font-family: var(--mono); font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.command-card.terminal.open .term-peek { display: none; }
+.command-card.terminal .term-out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
+.command-card.terminal.open .term-out { grid-template-rows: 1fr; }
+.command-card.terminal .term-clip { min-height: 0; overflow: hidden; }
+.command-card.terminal pre { max-height: 420px; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--text) 3%, transparent); }
+.command-card.terminal pre .l-bad { color: var(--crit); }
+.command-card.terminal pre .l-good { color: var(--ok, #2f9e44); }
+.command-card.terminal .undo { margin-top: 10px; }
+@media (max-width: 560px) { .command-card.terminal .term-count, .command-card.terminal .term-tag { display: none; } }
+@media (prefers-reduced-motion: reduce) { .command-card.terminal .term-out, .command-card.terminal .term-head .chev-icon { transition: none; } }
 .command-card .outcome { display: inline-block; margin: 0 12px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--phosphor); }
 
 .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; }
@@ -2463,6 +2528,23 @@ dialog.intents-window { width: 760px; height: 640px; }
 .conn-card .key-link:hover { color: var(--ph); }
 .conn-card .key-said.bad { color: var(--terror); }
 
+/* The second half of a browser sign-in. The CLI opens a page and then waits to be told the code
+   that page gives back; this is where the address stays put and where the code is typed. It used
+   to be nowhere, so the only thing on screen was a heartbeat and the sign-in died of its clock. */
+.login-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.login-ask[hidden] { display: none; }
+.login-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 260px; }
+.login-code input { flex: 1 1 180px; min-width: 150px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
+.login-code input:focus { outline: none; border-color: var(--phosphor); }
+.login-code button { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--phosphor); color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
+.login-code button:disabled { opacity: .5; cursor: default; }
+.login-code .key-said { flex: 1 0 100%; }
+/* Inside a connection card the ground is black and everything is phosphor, as the key form is. */
+.conn-card .login-code input { color: var(--ph); background: #000; border: 1px solid var(--ph-dim); border-radius: 0; font-size: 12px; padding: 6px 8px; }
+.conn-card .login-code input::placeholder { color: var(--ph-dim); opacity: .7; }
+.conn-card .login-code input:focus { outline: 1px solid var(--ph); border-color: var(--ph); }
+.conn-card .login-code button { border: 1px solid var(--ph); color: #041004; background: var(--ph); border-radius: 0; }
+
 /* A module card, floor by floor: what it is, what it does, what it touches, how it is doing, and
    then the switch. Everything inside a card wears the panel's phosphor, never the page's palette,
    and every number is given room so it can never land on its own label. */
@@ -2572,6 +2654,12 @@ dialog.intents-window { width: 760px; height: 640px; }
 
 /* A file an agent wrote in this room, in that agent's own colour. */
 .tree .node .touched { width: 6px; height: 6px; border-radius: 50%; background: var(--agent, var(--ph)); box-shadow: none; flex: 0 0 auto; margin-left: 2px; }
+/* The way down to what changed: a folder carries the dot of the last touch beneath it, hollow, so
+   the filled one is always the file itself. */
+.tree .node .touched.trail { background: transparent; box-shadow: inset 0 0 0 1.5px var(--agent, var(--ph)); }
+.tree-head .tree-refresh.spin svg { animation: tree-spin .6s ease; }
+@keyframes tree-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .tree-head .tree-refresh.spin svg { animation: none; } }
 
 /* Read by what the file is. Six roles, the room's own phosphor: enough to find a string or a
    comment at a glance, and never so many colours that the code stops being the thing you see. */
@@ -2833,11 +2921,6 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
   border-radius: 16px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2);
   box-shadow: 0 18px 50px rgba(0, 0, 0, .4); animation: wn-in calc(300ms * var(--motion-scale)) cubic-bezier(.2, .8, .2, 1);
 }
-.hint-card.beside::before { content: none; }
-.hint-card::before {
-  content: ''; position: absolute; top: -7px; left: calc(var(--arrow, 24px) - 6px); width: 12px; height: 12px;
-  background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg);
-}
 @media (prefers-reduced-motion: reduce) { .hint-card { animation: none; } }
 .hint-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
 .hint-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
@@ -3219,6 +3302,14 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
    The list says whose servers these are, each one with a lamp that is lit while it answers. When
    the one on screen stops, the page stays, dimmed, and says so; it comes back on its own. */
 .ports-head { padding: 8px 10px 6px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--text-3); }
+.ports-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
+.ports-refresh { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--text-2); background: var(--surface, var(--panel)); box-shadow: var(--key-rest); cursor: pointer; }
+.ports-refresh:hover { color: var(--text); box-shadow: var(--key-over, var(--key-rest)); }
+.ports-refresh:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
+.ports-refresh svg { width: 17px; height: 17px; }
+.ports-refresh.checking svg { animation: ports-turn .8s linear infinite; }
+@keyframes ports-turn { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ports-refresh.checking svg { animation: none; } }
 .ports-empty { padding: 6px 10px 10px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
 .ports-lamp { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phosphor) 16%, transparent); }
 .ports-row.wider .ports-lamp, .ports-lamp.off { background: var(--text-3); box-shadow: none; }
@@ -5179,6 +5270,37 @@ dialog.custom-window::backdrop { display: none; }
   height: 26px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
 }
 :root[data-scheme] .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip):is(:hover, :focus-visible, [aria-expanded="true"]) { background: color-mix(in srgb, currentColor 12%, transparent); }
+/* THE COPILOT (2026-10-14): a robot beside mode · model · effort, in the same glass; MADRE's green
+   when it is on, with the time it has left. Its menu says what it does, its switch and how long. */
+.picker .pick-label > .copilot-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; letter-spacing: .06em; cursor: pointer; transition: background .18s ease, color .18s ease; }
+.picker .pick-label > .copilot-chip:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 12%, transparent); outline: none; }
+.copilot-icon { display: inline-flex; width: 16px; height: 16px; }
+.copilot-icon svg { width: 100%; height: 100%; }
+.picker .pick-label > .copilot-chip.on { color: var(--madre-green); background: color-mix(in srgb, var(--madre-green) 14%, transparent); }
+.picker .pick-label > .copilot-chip .left { font-size: 10px; }
+.copilot-menu { display: grid; gap: 8px; }
+.copilot-menu .copilot-title { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; color: var(--text); }
+.copilot-menu .copilot-title b { flex: 1; color: var(--text); font-size: 11px; }
+.copilot-menu .copilot-title .copilot-icon { color: var(--madre-green); }
+.copilot-menu .copilot-body { display: grid; gap: 8px; padding: 0 2px 2px; font-family: var(--read, inherit); letter-spacing: 0; }
+/* Three weights (2026-10-14): what it does reads first; what it never does is the small print. */
+.copilot-menu .copilot-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
+.copilot-menu .copilot-body .copilot-lead { font-size: 14px; line-height: 1.45; color: var(--text); font-weight: 400; }
+.copilot-menu .copilot-body .copilot-never { padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 46%, transparent); }
+.copilot-menu .copilot-body .copilot-state { color: var(--madre-green); font-weight: 600; }
+.copilot-menu .copilot-body .copilot-foot { font-size: 11px; color: var(--text-3); }
+.copilot-menu .copilot-how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
+/* A message under the copilot: the box wears green, not EDIT's red. */
+.composer.copilot .field { border-color: var(--madre-green); --ring: 0 0 0 3px color-mix(in srgb, var(--madre-green) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--madre-green) 16%, transparent); }
+.composer.copilot .crew-label { color: var(--madre-green); }
+/* The reply written as the copilot: a green round robot on the agent's own circle, shown on every
+   reply of a run of them, so a glance down the thread says which ones the copilot wrote. */
+#messages .row.copilot > .avatar { position: relative; overflow: visible; }
+#messages .row.copilot.compact > .avatar { visibility: visible; }
+#messages .row.copilot.compact > .avatar > :not(.copilot-badge) { visibility: hidden; }
+#messages .row.copilot > .avatar .copilot-badge { position: absolute; right: -6px; bottom: -6px; z-index: 1; visibility: visible; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--madre-green); color: var(--madre-green-ink); box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgb(0 0 0 / .18); }
+#messages .row.copilot > .avatar .copilot-badge svg { width: 100%; height: 100%; }
+#messages .who .badge.copilot { color: var(--madre-green); background: color-mix(in srgb, var(--madre-green) 14%, transparent); }
 /* The lines of the room that carry a chip: the box's radius follows the chip it holds. */
 :is(:root[data-wallpaper] #messages, .look-preview[data-wallpaper]:not([data-wallpaper="default"])) .system:not(.mother-alert) { border-radius: 18px; padding: 8px 16px 9px; }
 
@@ -5570,7 +5692,9 @@ dialog.mother { --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospa
 /* Dark theme: the box is its own black, a neutral graphite rather than the room's green-black,
    and the row of mode, model and effort under it steps back so it never competes with it. */
 :root:not([data-scheme="light"]) .shell .composer .field { background-color: color-mix(in srgb, #1a1b1d 96%, transparent); }
-:root:not([data-scheme="light"]) .composer > .pick-options .pick-label { background: color-mix(in srgb, var(--bg) 45%, transparent); box-shadow: none; }
+/* Dark glass reads on a dark ground (2026-10-14): the ground at 45% over the ground was invisible,
+   so it takes a breath of the text colour, a half-pixel rim and the same blur as in light. */
+:root:not([data-scheme="light"]) .composer > .pick-options .pick-label { background: color-mix(in srgb, var(--text) 13%, color-mix(in srgb, var(--bg) 52%, transparent)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 20%, transparent), inset 0 1px 0 rgb(255 255 255 / .09), 0 6px 18px rgb(0 0 0 / .28); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); }
 :root:not([data-scheme="light"]) .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip) { opacity: .78; }
 :root:not([data-scheme="light"]) .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip):is(:hover, :focus-visible, [aria-expanded="true"]) { opacity: 1; }
 
@@ -5908,6 +6032,28 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .sx-field { display: flex; gap: 8px; }
 .sx-field .sx-input { flex: 1; }
+/* Settings › Connect MCP (2026-10-14): a row per server — what it is and where, how it stands,
+   the one thing to do, and from which mode its tools that act travel. */
+.mcp-row { gap: 10px; }
+.mcp-row .mcp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
+.mcp-row .mcp-top .sx-words { min-width: 0; display: grid; gap: 4px; }
+.mcp-row .mcp-where { display: block; font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
+.mcp-row.off .mcp-top .sx-words > b { color: var(--text-2); }
+.mcp-problem { margin: 0; font-size: 12px; line-height: 1.45; color: var(--danger); overflow-wrap: anywhere; }
+.mcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.mcp-block > .mcp-actions { padding: 4px 16px 14px; }
+.mcp-from { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.mcp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.mcp-tools li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 11.5px; }
+.mcp-tools li code { font-family: var(--mono); font-size: 11.5px; }
+.mcp-tools .mcp-tool-kind { font-size: 10px; letter-spacing: .04em; color: var(--text-3); }
+.mcp-tools li.acts .mcp-tool-kind { color: #d9a90f; }
+.mcp-vars { display: grid; gap: 6px; width: 100%; }
+.mcp-vars .sx-field { align-items: center; }
+.mcp-secret { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
+.mcp-pick { display: inline-flex; align-items: center; }
+.mcp-block .sx-row .sx-hint { overflow-wrap: anywhere; }
+.mcp-pick input, .mcp-secret input { width: 16px; height: 16px; accent-color: var(--phosphor); }
 .sx-command { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); }
 .sx-command code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--text); scrollbar-width: none; }
 .sx-more { border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
@@ -5918,7 +6064,15 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .sx-more > :not(summary) { margin: 0 16px 14px; }
 .sx-steps { display: grid; gap: 12px; margin: 10px 16px 16px; padding-left: 18px; }
 .sx-steps li { display: grid; gap: 6px; font-size: 12.5px; }
-.sx-steps li b { font-weight: 500; }
+.sx-steps li b { font-weight: 600; color: var(--text); }
+/* The training recipe, numbered and explained (2026-10-14). */
+.sx-steps { counter-reset: step; list-style: none; padding-left: 0; gap: 14px; }
+.sx-steps li { position: relative; padding-left: 34px; counter-increment: step; }
+.sx-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 11.5px/1 var(--read); }
+.sx-steps li .sx-hint { font-size: 12px; line-height: 1.45; color: var(--text-2); }
+.sx-train-what { margin: 0 16px 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
+.sx-train-platform { margin: 10px 16px 6px; }
+.sx-more > .sx-hint { margin: 0 16px; }
 
 /* An agent's card: its colour on the avatar and the name, where it lives in small print. */
 .sx-agent .sx-head { align-items: center; }
@@ -6010,6 +6164,8 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .settings-detail .sx-analysis :is(.mem-strip-head b, .mem-strip-head span, .mem-axis span, summary b, summary .caret, th, td, .mem-signal .top b, .mem-bar .name, .exams > .note, .exam-head b, .exam-head .verdict, .exam-bullet span, .exam > .note:not(.about), .exam .actions button, .exam .actions .note)::first-letter { text-transform: uppercase; }
 .settings-detail .sx-analysis .mem-strip-head b, .settings-detail .sx-analysis .mem-bar .name { color: var(--text); }
 .settings-detail .sx-analysis .mem-signal .top b, .settings-detail .sx-analysis .exam-head b { font-size: 12.5px; font-weight: 500; }
+/* The review's questions are written in sentence case; lowering them would turn «IA» into «ia». */
+.settings-detail .sx-analysis .exam-head b { text-transform: none; }
 .settings-detail .sx-analysis .exams .said { font-family: var(--read); font-size: 12.5px; line-height: 1.5; }
 .settings-detail .sx-analysis .mem-cols i:not(.zero) { background: color-mix(in srgb, #3fb6d9 70%, transparent); }
 .settings-detail .sx-analysis .mem-cols i.now { background: #3fb6d9; }
@@ -6307,9 +6463,13 @@ dialog.surface.window:is(.settings-window, .module-window).lifted { background-c
 .bar-left .connection { position: relative; align-self: flex-start; margin: 9px 0 0 -2px; padding: 4px; text-transform: none; cursor: default; }
 .bar-left .connection :is(.connection-icon .bar-glyph, .connection-label) { display: none; }
 .bar-left .connection .connection-dot { width: 7px; height: 7px; background: var(--text-3); box-shadow: none; }
-.bar-left .connection[data-state="live"] .connection-dot { background: #34d058; animation: live-glow 3.2s ease-in-out infinite; }
-.bar-left .connection[data-state="reconnecting"] .connection-dot { background: var(--warn); animation: live-glow 1.2s ease-in-out infinite; }
-@keyframes live-glow { 0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(52, 208, 88, 0); } 50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(52, 208, 88, .55); } }
+.bar-left .connection[data-state="live"] .connection-dot { background: #34d058; animation: state-pulse 2.6s ease-in-out infinite; }
+.bar-left .connection[data-state="reconnecting"] .connection-dot { background: var(--warn); animation: state-pulse 1.1s ease-in-out infinite; }
+.bar-left .connection:is([data-state="offline"], [data-state="closed"], [data-state="disconnected"]) .connection-dot { background: var(--danger, #e5484d); animation: none; }
+/* The project's state is a dot that breathes, nothing more (2026-10-14): from its size to a little
+   larger and back, in the colour of the state. No glow around it. */
+@keyframes state-pulse { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
+:root.just-arrived .bar-left .connection[data-state="live"] .connection-dot { animation: state-pulse 2.6s ease-in-out infinite; }
 .bar-left .connection::after { content: attr(data-said); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 4px 9px; border-radius: 8px; font-family: var(--read); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text); background: var(--surface, var(--panel)); box-shadow: var(--key-rest); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out); z-index: 60; }
 .bar-left .connection:hover::after { opacity: 1; }
 .bar-left .connection::first-letter { text-transform: none; }
@@ -6653,7 +6813,9 @@ dialog.mods-window { width: 1040px; height: 720px; container: modswin / inline-s
   display: inline-flex; align-items: center; gap: 9px;
   padding: 9px 16px 9px 13px; border: 0; border-radius: 20px;
   background: var(--surface, var(--panel)); color: var(--text);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px -8px rgba(0, 0, 0, .4);
+  /* It floats over the canvas (2026-10-14): a rim, a near shadow and a far one, so it reads lifted
+     off any wallpaper or thread under it. */
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 4px rgba(0, 0, 0, .24), 0 12px 28px -6px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .45);
   font-family: var(--read); font-size: 13px; font-weight: 450; line-height: 1.4; text-align: left;
   max-width: min(560px, calc(100% - 32px)); width: max-content;
 }
@@ -6678,7 +6840,7 @@ dialog.mods-window { width: 1040px; height: 720px; container: modswin / inline-s
 #messages .row > .avatar.gradient { box-shadow: none !important; }
 #messages .row > .avatar svg { width: 64%; height: 64%; opacity: 1; }
 
-:root[data-scheme="light"] .toast:not([hidden]) { box-shadow: 0 1px 2px rgba(20, 30, 20, .1), 0 6px 16px -8px rgba(20, 30, 20, .28); }
+:root[data-scheme="light"] .toast:not([hidden]) { box-shadow: 0 0 0 .5px rgba(20, 30, 20, .08), 0 2px 4px rgba(20, 30, 20, .1), 0 12px 28px -6px rgba(20, 30, 20, .22), 0 28px 60px -18px rgba(20, 30, 20, .2); }
 
 /* ==========================================================================================
    MU/TH/UR · the remedies, as a window of the room
@@ -6848,6 +7010,9 @@ dialog.room-ask:not(.console) .room-ask-choice.danger:hover { background: var(--
 /* The key, quieter: one sentence of what it allows, a smaller one of what keeps it safe, the
    ceiling note when there is one, and a field whose label says what to type. */
 dialog.key-ask .room-ask-body { color: var(--text); font-size: 14px; }
+/* «Don't ask again…» under the memory gate: a quiet link to Settings › Permissions › Memory access. */
+.key-skip { display: block; margin: 4px auto 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: 500 12px/1.3 var(--sans); color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent); text-underline-offset: 3px; }
+.key-skip:hover, .key-skip:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); outline: 0; }
 .key-safe { margin: -4px 0 0; font-family: var(--read); font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--text) 58%, transparent); }
 .key-raise { margin: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mode-3) 14%, transparent); color: color-mix(in srgb, var(--mode-3) 70%, var(--text)); font-family: var(--read); font-size: 12px; font-weight: 550; }
 dialog.key-ask.m4 .key-raise { background: color-mix(in srgb, var(--mode-4) 14%, transparent); color: color-mix(in srgb, var(--mode-4) 70%, var(--text)); }
@@ -7566,7 +7731,7 @@ html.via-phone[data-wallpaper]:not([data-wallpaper="default"]) { --phone-ground:
 :root:not(.via-phone) .shell > .bar.with-home {
   width: auto; justify-self: stretch;
   margin-left: max(20px, calc((100% - 1440px) / 2));
-  margin-right: calc(max(20px, calc((100% - 1440px) / 2)) + var(--home-w, 150px) + 10px);
+  margin-right: calc(max(20px, calc((100% - 1440px) / 2)) + var(--home-w, 150px) + 16px);
 }
 /* With the second bar beside it the room's bar is ~120px narrower, so the pulse alone takes the
    wordmark's place a little earlier: before the brand is cut instead of folded. */
@@ -7701,6 +7866,32 @@ dialog.viewer .viewer-seg .viewer-seg-btn:not([hidden]) + .viewer-open { margin-
 .agent-pop .pop-group dd { font-family: var(--read, var(--sans)); font-size: 12.5px; line-height: 1.35; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .agent-pop .caps { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line); }
 .agent-pop .foot { margin-top: 10px; font-size: 9px; line-height: 1.5; }
+/* The agent's card, ordered (2026-10-14): name and session, one figure, four numbers, the plan, a
+   line for the connection, what it can do and the way to its settings. */
+.agent-pop .head { gap: 10px; }
+.agent-pop .pop-who { display: grid; gap: 1px; min-width: 0; }
+.agent-pop .pop-who .vendor { margin: 0; font-family: var(--read, var(--sans)); font-size: 11.5px; letter-spacing: 0; color: var(--text-3); }
+.agent-pop .pop-session { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); font-family: var(--read, var(--sans)); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
+.agent-pop .pop-session::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
+.agent-pop .pop-session.ok::before { background: #34c759; }
+.agent-pop .pop-session.wait::before { background: var(--warn); }
+.agent-pop .pop-session.bad::before { background: var(--danger); }
+.agent-pop .pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
+.agent-pop .pop-stat { display: grid; gap: 3px; padding: 9px 11px; border-radius: 11px; background: color-mix(in srgb, var(--text) 4.5%, transparent); min-width: 0; }
+.agent-pop .pop-stat span { font-family: var(--read, var(--sans)); font-size: 11px; color: var(--text-3); }
+.agent-pop .pop-stat b { font-family: var(--read, var(--sans)); font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-pop .pop-provider { display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid var(--line); }
+.agent-pop .pop-provider h4 { margin: 0 0 2px; font-family: var(--read, var(--sans)); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
+.agent-pop .pop-limit { display: flex; justify-content: space-between; gap: 12px; font-family: var(--read, var(--sans)); font-size: 12px; color: var(--text-2); }
+.agent-pop .pop-limit b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
+.agent-pop .pop-limit.hot b { color: var(--crit); }
+.agent-pop .pop-note { margin: 0; font-family: var(--read, var(--sans)); font-size: 12px; line-height: 1.45; color: var(--text-2); }
+.agent-pop .pop-meta { margin: 10px 0 0; font-family: var(--read, var(--sans)); font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
+.agent-pop .caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px !important; padding-top: 0; border-top: 0; }
+.agent-pop .caps .cap { padding: 3px 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); font-family: var(--read, var(--sans)); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+.agent-pop .caps .cap.on { background: color-mix(in srgb, var(--agent, var(--phosphor)) 13%, transparent); color: color-mix(in srgb, var(--agent, var(--phosphor)) 75%, var(--text)); }
+.agent-pop .pop-go { width: 100%; margin-top: 12px; height: 32px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font-family: var(--read, var(--sans)); font-size: 12.5px; font-weight: 500; cursor: pointer; }
+.agent-pop .pop-go:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 12%, transparent); outline: 0; }
 
 /* The agent picker: the chosen agent at full colour; the others dimmed, until the pointer finds one. */
 .picker .avatar.pick:not([aria-checked="true"]) { filter: saturate(.55) brightness(.94); opacity: .55; transition: opacity calc(160ms * var(--motion-scale, 1)) var(--ease-out), filter calc(160ms * var(--motion-scale, 1)) var(--ease-out); }
@@ -7792,6 +7983,37 @@ dialog#core .mother-close { height: 30px; padding: 0 13px; border: 0; border-rad
 dialog#core .mother-close:hover { box-shadow: var(--key-over, var(--key-rest)); color: var(--phosphor); }
 dialog#core .mother-close:active { box-shadow: var(--key-down, var(--key-rest)); }
 dialog#core .mother-boot { display: none; }
+/* «Lo que se envía» in the room's hand (2026-10-14): the title over its line on the left, the
+   buttons every window has on the right, centred tabs, and the console's capitals gone from what
+   used to be MU/TH/UR's (the verdict, «next», the memory review, the roles and fields). */
+dialog#core .mother-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "sub actions"; align-items: center; gap: 2px 16px; padding: 16px 16px 14px 24px; }
+dialog#core .mother-title { grid-area: title; line-height: 1.25; }
+dialog#core .mother-sub { grid-area: sub; flex: none; line-height: 1.35; }
+dialog#core .mother-actions { grid-area: actions; align-items: center; gap: 10px; }
+dialog#core .core-copy-all { height: 30px; font-family: var(--read); font-size: 12.5px; font-weight: 550; letter-spacing: 0; text-transform: none; }
+dialog#core .core-tab { display: grid; justify-items: center; text-align: center; }
+dialog#core .core-tab .meta { max-width: 100%; }
+dialog#core .mem-verdict .says, dialog#core .mem-verdict > p:not(.maturity-next) { margin: 0; font-family: var(--read); font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-2); text-shadow: none; }
+dialog#core .mem-verdict .says b { margin-right: 6px; font-size: 13px; letter-spacing: 0; color: var(--text); }
+dialog#core .mem-verdict .maturity-next { padding: 11px 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: none; font-family: var(--read); font-size: 12.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text); }
+dialog#core .mem-verdict .maturity-next b { margin-right: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--phosphor); }
+dialog#core .mem-verdict .maturity-next .where { font-size: 12px; letter-spacing: 0; color: var(--text-3); }
+dialog#core :is(.exams, .exam .verdict, .exam-head b, .exams .note, .exam .note, .exam-bullet span, .exam .said, .exam .actions button) { font-family: var(--read); letter-spacing: 0; text-transform: none; text-shadow: none; }
+dialog#core .exam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+dialog#core .exam-head b { font-size: 13px; font-weight: 600; color: var(--text); }
+dialog#core .exam .verdict { flex: none; padding: 2px 8px; border: 0; border-radius: 7px; font-size: 11.5px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
+dialog#core .exam.passed .verdict { background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); }
+dialog#core .exam.failed .verdict { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
+dialog#core .exam :is(.note, .said) { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
+dialog#core .exam-bullet span { font-size: 11.5px; color: var(--text-3); }
+dialog#core .exam .actions button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 12px; box-shadow: none; cursor: pointer; }
+dialog#core .exam .actions button.primary { background: var(--phosphor); color: var(--phosphor-ink); }
+dialog#core .core-role { color: var(--text); }
+dialog#core .core-role input { width: 15px; height: 15px; accent-color: var(--phosphor); }
+dialog#core .core-role-words b { font-family: var(--read); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
+dialog#core .core-role-words .detail { font-family: var(--read); font-size: 12px; letter-spacing: 0; color: var(--text-3); }
+dialog#core .core-field { font-family: var(--read); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+dialog#core .core-pick select, dialog#core .core-field select { font-family: var(--read) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; }
 dialog#core .mother-foot { padding: 9px 22px 11px; border-top: 1px solid var(--line); font-family: var(--read); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); text-align: center; }
 /* The body: tabs, the strip that says for whom, the pane, and the question line. */
 dialog#core .core-body { min-height: 0; gap: 12px; padding: 14px 22px 14px; }
@@ -7961,6 +8183,74 @@ dialog#core .mother-cmd .copy { position: absolute; top: 8px; right: 8px; displa
   width: fit-content; max-width: min(92%, 560px); margin-inline: auto; padding: 8px 16px 9px; border: 0; border-radius: 18px;
 }
 #messages#messages .row > .col > .who { width: fit-content; max-width: 100%; padding: 3px 10px; border-radius: 999px; }
+/* A failure wears the room's own card (2026-10-14): rounded, as wide as its words, in its red
+   tint — it was a square box of another app. Its RETRY and UNDO stay under it. */
+#messages#messages .thread-inner > .system.fail {
+  width: fit-content; max-width: min(92%, 560px); margin-inline: auto; padding: 10px 18px 11px; border: 0; border-radius: 18px;
+  background: color-mix(in srgb, var(--danger) 9%, var(--plane-solid, var(--panel))) !important;
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--danger) 30%, transparent) !important;
+}
+#messages#messages .thread-inner > .system.fail .label { font-family: var(--mono); letter-spacing: .14em; }
+
+/* ==========================================================================================
+   NOTICES THAT FOLD INTO DOTS (2026-10-14)
+   ------------------------------------------------------------------------------------------
+   A notice says its piece and, ten seconds later, folds into a row of the notices around it.
+   Folded, the row is one small dot in the colour of its first notice and «+N» for the rest, on
+   the same glass as mode · model · effort so it reads on any wallpaper. A click opens the row as
+   one card with every notice in order, each with its dot; another click, or Escape, folds it.
+   Red is a diagnostic, amber a permission or a warning, green something that went well, grey the
+   rest. Sizes carry !important: the wallpaper's rules for the room's lines would otherwise give a
+   folded notice their width and padding (it was a dot 0 px wide, only its ring showing).
+   ========================================================================================== */
+#messages#messages .thread-inner > .system.folding { animation: notice-fold .22s ease forwards; }
+@keyframes notice-fold { to { opacity: 0; transform: scale(.94); } }
+#messages .sys-dots {
+  display: flex; align-items: center; gap: 6px; width: fit-content; max-width: min(92%, 560px); margin: 6px auto; padding: 4px 9px 4px 7px;
+  border-radius: 999px; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text-2);
+  background: color-mix(in srgb, var(--bg) 62%, transparent); border: .5px solid color-mix(in srgb, var(--text) 10%, transparent);
+  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
+  transition: background .18s ease;
+}
+#messages .sys-dots:hover, #messages .sys-dots:focus-visible { background: color-mix(in srgb, var(--bg) 78%, transparent); outline: none; }
+#messages .sys-dots > .sys-more { font: inherit; color: inherit; }
+#messages .sys-dots.single { padding: 6px; gap: 0; justify-content: center; }
+#messages#messages .sys-dots > .system.folded { --dot: var(--text-3); margin: 0; cursor: inherit; }
+#messages#messages .sys-dots > .system.folded[data-tone="crit"] { --dot: var(--terror, #d33); }
+#messages#messages .sys-dots > .system.folded[data-tone="warn"] { --dot: var(--warn, #e2a022); }
+#messages#messages .sys-dots > .system.folded[data-tone="ok"] { --dot: var(--ok, var(--phosphor, #2f9e44)); }
+/* Folded: the first notice is the dot; the rest are counted in «+N». */
+#messages#messages .sys-dots:not(.open) > .system.folded {
+  flex: none; width: 8px !important; height: 8px !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
+  overflow: hidden; font-size: 0; line-height: 0; color: transparent; text-shadow: none !important;
+  background: var(--dot) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 22%, transparent) !important;
+  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
+  animation: dot-in .28s cubic-bezier(.2, .9, .3, 1.25);
+}
+#messages#messages .sys-dots:not(.open) > .system.folded:not(:first-child) { display: none !important; }
+#messages#messages .sys-dots:not(.open) > .system.folded > * { display: none !important; }
+#messages#messages .sys-dots > .system.folded.quiet { animation: none; }
+@keyframes dot-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+/* Open: one card, every notice in order, each with its dot. No bar on the side. */
+#messages .sys-dots.open {
+  display: grid; gap: 2px; width: min(92%, 560px); padding: 6px; border-radius: 16px; cursor: default;
+  background: color-mix(in srgb, var(--bg) 88%, transparent); border-color: color-mix(in srgb, var(--text) 12%, transparent);
+  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); animation: notice-peek .2s ease;
+}
+#messages#messages .sys-dots.open > .system.folded { color: var(--text-2) !important; }
+#messages#messages .sys-dots.open > .system.folded {
+  position: relative; width: auto !important; max-width: none !important; margin: 0 !important; padding: 7px 12px 8px 26px !important; border: 0 !important; border-radius: 10px !important;
+  text-align: left; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
+}
+#messages#messages .sys-dots.open > .system.folded:hover { background: color-mix(in srgb, var(--text) 4%, transparent) !important; }
+#messages#messages .sys-dots.open > .system.folded::before { content: ''; position: absolute; left: 11px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
+#messages#messages .sys-dots.open > .system.folded > b:first-child { display: inline; margin-right: 6px; }
+#messages .sys-dots.open > .sys-more { justify-self: center; margin-top: 2px; padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--text-3); }
+#messages .sys-dots.open > .sys-more:hover { color: var(--text); }
+@keyframes notice-peek { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  #messages#messages .sys-dots > .system.folded, #messages .sys-dots.open, #messages#messages .thread-inner > .system.folding { animation: none !important; transition: none !important; }
+}
 
 /* ==========================================================================================
    SIGUE ABIERTO AQUÍ, THE SAME GLASS AS MODE · MODEL · EFFORT (2026-10-09)
@@ -7972,9 +8262,9 @@ dialog#core .mother-cmd .copy { position: absolute; top: 8px; right: 8px; displa
    (`#composer#composer` only outranks CHIPS IN FLAT TONE, which had flattened them into tags.)
    ========================================================================================== */
 :root {
-  --lq-fill: color-mix(in srgb, var(--bg) 45%, transparent);
-  --lq-fill-over: color-mix(in srgb, var(--bg) 62%, transparent);
-  --lq-rim: none;
+  --lq-fill: color-mix(in srgb, var(--text) 7%, color-mix(in srgb, var(--bg) 45%, transparent));
+  --lq-fill-over: color-mix(in srgb, var(--text) 11%, color-mix(in srgb, var(--bg) 62%, transparent));
+  --lq-rim: 0 0 0 .5px color-mix(in srgb, var(--text) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / .05);
 }
 :root[data-scheme="light"] {
   --lq-fill: color-mix(in srgb, var(--bg) 62%, transparent);
@@ -8216,7 +8506,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-points li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--tour-acc); }
 .tour-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 6px 14px; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); }
 .tour-keys dt { font-size: 12.5px; color: var(--text-2); }
-.tour-keys dd { margin: 0; max-width: 22ch; justify-self: end; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; text-align: right; color: var(--text); }
+.tour-keys dd { margin: 0; max-width: 34ch; text-wrap: balance; justify-self: end; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; text-align: right; color: var(--text); }
 .tour-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
 .tour-gap { flex: 1; }
 .tour-where { font-size: 12.5px; color: var(--text-3); }
@@ -8228,7 +8518,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 
 /* The scenes: a few shapes, drawn small, moving slowly. */
 .tour-scene { position: relative; height: 168px; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tour-acc) 14%, transparent), transparent 70%), color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
-.tour-scene.s-moved { height: auto; padding: 12px 14px; }
+.tour-scene.s-moved, .tour-scene.s-table { height: auto; padding: 12px 14px; }
 .ts-moved { display: grid; gap: 6px; }
 .ts-moved-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.4fr); align-items: center; gap: 8px; font-size: 12.5px; animation: tour-rise calc(420ms * var(--motion-scale, 1)) ease both; }
 .ts-moved-row:nth-child(2) { animation-delay: 60ms; } .ts-moved-row:nth-child(3) { animation-delay: 120ms; } .ts-moved-row:nth-child(4) { animation-delay: 180ms; } .ts-moved-row:nth-child(5) { animation-delay: 240ms; } .ts-moved-row:nth-child(6) { animation-delay: 300ms; } .ts-moved-row:nth-child(7) { animation-delay: 360ms; } .ts-moved-row:nth-child(8) { animation-delay: 420ms; }
@@ -8309,6 +8599,32 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-pill-go { height: 28px; padding: 0 6px 0 12px; border: 0; background: transparent; font: inherit; font-family: var(--read); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--tour-acc) 70%, var(--text)); cursor: pointer; }
 .tour-pill-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: var(--text-2); background: transparent; cursor: pointer; }
 .tour-pill-x svg { width: 11px; height: 11px; }
+/* A phone's room bar (2026-10-14): only what keeps it whole — the pulse, the live light, DETENER
+   TODO and «more» on the left; Inicio, the projects and Ajustes on the right. Reload is the page's
+   own pull, and the tour goes on from Ajustes › Versión. */
+@media (max-width: 560px) {
+  .shell > .bar { gap: 8px; }
+  .shell > .bar .brand { width: 40px; overflow: hidden; flex: none; }
+  .shell > .bar .tour-pill-slot, .shell > .bar-home #reload-button { display: none !important; }
+}
+/* The room's bar knows its own width (2026-10-14): split beside a second conversation and the
+   browser it is narrow on a wide screen, where the screen's media queries never fire. */
+/* Both names: «bar» is the one every older fold of the bar asks for; with only «roombar» here
+   (2026-10-14) none of them fired and a narrow bar kept its wide keys. */
+.shell > .bar:not(.bar-home) { container: bar roombar / inline-size; }
+@container roombar (max-width: 760px) {
+  .tour-pill-go[data-short] { font-size: 0; }
+  .tour-pill-go[data-short]::after { content: attr(data-short); font-size: 12px; }
+}
+@container roombar (max-width: 470px) {
+  .bar-left .brand { width: 40px; overflow: hidden; flex: none; }
+  .tour-pill-slot { display: none !important; }
+}
+/* A narrow bar (2026-10-14): the pill says «Recorrido · 3/13»; the full sentence stays its name. */
+@media (max-width: 1180px) {
+  .tour-pill-go[data-short] { font-size: 0; }
+  .tour-pill-go[data-short]::after { content: attr(data-short); font-size: 12px; }
+}
 .tour-pill-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
 
 /* A hint: one line, once, beside the place it speaks of, in the top layer — a bubble, no beak. And
@@ -8338,3 +8654,790 @@ dialog.tour-bonjour::backdrop { background: transparent; }
   .ts-search em { width: 54%; }
 }
 .tour-pill-slot:not([hidden]) { display: inline-flex; align-items: center; }
+
+/* ==========================================================================================
+   KEYS WITH A CLEAN EDGE · 13 OCT
+   ------------------------------------------------------------------------------------------
+   The two soft shadows of the shared light (above) read as a smudge on a white card: the light
+   one vanishes and the dark one spreads. A key now stands on three thin layers instead — a
+   hairline that draws its edge, a tight contact shadow and a short soft one below — with a
+   faint lit top in the dark. Over it, it lifts a little; pressed, the shade goes inside. The
+   same four tokens dress every key, in Home and in every project.
+   ========================================================================================== */
+:root {
+  --key-rest: inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 0 .5px rgba(0, 0, 0, .6), 0 1px 1.5px rgba(0, 0, 0, .42), 0 3px 8px -3px rgba(0, 0, 0, .5);
+  --key-over: inset 0 1px 0 rgba(255, 255, 255, .075), 0 0 0 .5px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .38), 0 8px 18px -7px rgba(0, 0, 0, .58);
+  --key-down: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(0, 0, 0, .5);
+  --key-track: inset 0 0 0 .5px rgba(255, 255, 255, .07), inset 0 1px 2px rgba(0, 0, 0, .38);
+}
+:root[data-scheme="light"] {
+  --key-rest: 0 0 0 .5px rgba(22, 30, 22, .11), 0 1px 1.5px rgba(22, 30, 22, .08), 0 2px 6px -2px rgba(22, 30, 22, .12);
+  --key-over: 0 0 0 .5px rgba(22, 30, 22, .13), 0 2px 3px rgba(22, 30, 22, .08), 0 8px 18px -8px rgba(22, 30, 22, .2);
+  --key-down: inset 0 1px 2px rgba(22, 30, 22, .14), inset 0 0 0 .5px rgba(22, 30, 22, .14);
+  --key-track: inset 0 0 0 .5px rgba(22, 30, 22, .12), inset 0 1px 2px rgba(22, 30, 22, .06);
+}
+
+/* ==========================================================================================
+   OPENCODE BY PROVIDER · 13 OCT
+   The composer's chooser groups OpenCode's models under the provider they come from, and
+   AJUSTES › Project › OpenCode lists the providers with their key and their switch.
+   ========================================================================================== */
+.model-list { max-height: 320px; }
+.model-group { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 10px 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
+.model-group:first-of-type { margin-top: 6px; }
+.model-group b { font-weight: 650; color: var(--text-2); }
+.model-group span { letter-spacing: .04em; text-transform: none; font-size: 10.5px; }
+.model-group + .model-option { margin-top: 1px; }
+.model-manage { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--agent, var(--phosphor)); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
+.model-manage:hover { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+
+.oc-block { display: grid; gap: 12px; margin: 0 16px 16px; padding: 16px 16px 12px; border-radius: 12px; box-shadow: var(--key-track); }
+.oc-title { display: grid; gap: 3px; }
+.oc-title b, .oc-add-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-providers { display: grid; gap: 0; }
+.oc-provider { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-provider:first-child { border-top: 0; padding-top: 2px; }
+.oc-provider .sx-words { display: grid; gap: 1px; min-width: 0; }
+.oc-provider .sx-words b { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-controls { display: inline-flex; align-items: center; gap: 12px; flex: none; }
+.oc-shown { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
+.oc-add { display: grid; grid-template-columns: auto minmax(110px, 160px) minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-add .sx-input { height: 32px; min-width: 0; }
+.oc-where { font-size: 12px; font-weight: 550; color: var(--phosphor); text-decoration: none; white-space: nowrap; }
+.oc-where:hover { text-decoration: underline; }
+.oc-default-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-default-row .sx-words { display: grid; gap: 2px; }
+.oc-default-row .sx-words b { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-picks { display: grid; gap: 8px; min-width: 0; }
+.oc-picks .sx-input { height: 32px; min-width: 0; width: 100%; }
+.oc-block > .sx-foot { margin: 0; font-size: 11.5px; }
+@container (max-width: 560px) {
+  .oc-add { grid-template-columns: minmax(0, 1fr) auto; }
+  .oc-add-label { grid-column: 1 / -1; }
+  .oc-add .sx-input { grid-column: 1 / -1; }
+  .oc-default-row { grid-template-columns: 1fr; }
+}
+
+/* ==========================================================================================
+   AGENTS, FOLDED · 13 OCT
+   Each agent is one line until it is opened: who it is, whether it has a session and a chevron.
+   Open, its settings come in pairs and its sign-in shows the last lines, the heartbeat once.
+   ========================================================================================== */
+#settings .sx-agent { container-type: inline-size; }
+.sx-agent > .sx-head { padding: 0; }
+.sx-agent-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 14px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
+.sx-agent-toggle .sx-words { flex: 1; min-width: 0; }
+.sx-agent-toggle .sx-words p { margin: 0; }
+.sx-agent-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 55%, transparent); outline-offset: -2px; }
+.sx-chevron { flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform calc(180ms * var(--motion-scale, 1)) var(--ease-out, ease-out); }
+.sx-agent.open .sx-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
+.sx-agent:not(.open) > .sx-meta, .sx-agent:not(.open) > .sx-agent-body { display: none; }
+.sx-agent:not(.open) { padding-bottom: 0; }
+.sx-agent > .sx-meta { padding-top: 0; margin-top: -4px; }
+.sx-agent-body { display: grid; }
+.sx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sx-duo > .sx-row { min-width: 0; gap: 10px; padding-right: 14px; }
+.sx-duo > .sx-row .sx-control { max-width: none; }
+.sx-duo > .sx-row + .sx-row { border-left: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+@container (max-width: 380px) {
+  .sx-duo { grid-template-columns: 1fr; }
+  .sx-duo > .sx-row + .sx-row { border-left: 0; }
+}
+.sx-agent .login-log { max-height: 132px; overflow-y: auto; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); font-family: var(--mono); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
+.sx-agent .login-log .beat { color: var(--text-3); }
+.sx-agent .login-log a { color: var(--phosphor); }
+
+/* ==========================================================================================
+   QUIET GEARS · 13 OCT
+   The settings key of Files and Servers and the new-file key wore the white raised face the
+   window keys wear only when they are ON (split view chosen), so they read as already pressed.
+   At rest they now dress like the controls beside them — a hairline track, the bar's own
+   ground, a grey icon — and take the accent only under the pointer, the way the window keys do.
+   ========================================================================================== */
+:root .surface-gear, :root[data-scheme] .surface-gear {
+  border: 1px solid var(--line-2) !important;
+  background-color: color-mix(in srgb, var(--text) 3%, transparent) !important;
+  box-shadow: none !important;
+  color: var(--text-3);
+  border-radius: 9px;
+}
+:root .surface-gear:hover:not(:disabled), :root .surface-gear:focus-visible {
+  color: var(--phosphor);
+  background-color: color-mix(in srgb, var(--phosphor) 10%, transparent) !important;
+  box-shadow: none !important;
+}
+:root .surface-gear:active:not(:disabled), :root .surface-gear[aria-pressed="true"], :root .surface-gear[aria-expanded="true"] {
+  color: var(--phosphor);
+  background-color: var(--surface, var(--panel)) !important;
+  box-shadow: var(--key-down) !important;
+}
+
+/* The tour's widgets scene (1.1): four cards on a board, each with two meters that fill once. */
+.ts-grid.ts-widgets { top: 22px; bottom: 22px; grid-template-columns: repeat(2, 1fr); }
+.ts-widgets .ts-card { display: grid; align-content: center; gap: 9px; padding: 0 14px; }
+.ts-widgets .ts-card i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--phosphor) calc(var(--w) * 100%), color-mix(in srgb, var(--text) 10%, transparent) 0); }
+@media (prefers-reduced-motion: no-preference) {
+  .ts-widgets .ts-card i { animation: ts-fill 1.6s cubic-bezier(.2, .7, .2, 1) both; }
+  .ts-widgets .ts-card:nth-child(2) i { animation-delay: .15s; } .ts-widgets .ts-card:nth-child(3) i { animation-delay: .3s; } .ts-widgets .ts-card:nth-child(4) i { animation-delay: .45s; }
+}
+@keyframes ts-fill { from { background-size: 0 100%; background-repeat: no-repeat; } to { background-size: 100% 100%; background-repeat: no-repeat; } }
+
+/* The tables of what was renamed or moved: a long new name wraps under itself, never past the box. */
+.ts-moved-row .now { overflow-wrap: anywhere; line-height: 1.35; }
+
+/* The welcome and its chapters are dialogs too: their own ring is not drawn around them. */
+dialog.tour-bonjour:focus, dialog.tour-bonjour:focus-visible, dialog.whats-new:focus, dialog.whats-new:focus-visible { outline: none; }
+
+/* ==========================================================================================
+   RESPUESTAS SIN BURBUJA (2026-10-15). La forma de siempre es C · piezas con carril difuso (app.js
+   pone data-reply="pieces" y data-reply-legible="lane"); las demás quedan para comparar, por atributos en
+   <html> que pone el selector de prueba (app.js, ?reply=): data-reply = doc (A · regla bajo la
+   cabecera), doc-inline (A · el avatar entra a la cabecera), pieces (C · plan en tarjeta),
+   pieces-edge (C · tarjeta con el filo de cada agente). data-reply-legible = lane (vidrio difuso
+   detrás de cada respuesta), column (una columna de lectura detrás de toda la conversación), halo
+   (sin plano: un halo en las letras), stripe (franja que se desvanece a la derecha). El carril solo
+   existe sobre un fondo de pantalla.
+   ========================================================================================== */
+:root[data-reply] #messages#messages .row.assistant { max-width: min(760px, 88%); }
+:root[data-reply] #messages#messages .row.assistant .bubble { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 0 !important; }
+:root[data-reply] #messages#messages .row.assistant .who { margin-left: 0; }
+:root[data-reply] #messages#messages .row.assistant .bubble-foot { margin-top: 6px; }
+:root[data-reply] #messages#messages .row.assistant .stamp > span { font-family: var(--mono); }
+/* A · regla bajo la cabecera */
+:root[data-reply="doc"] #messages#messages .row.assistant .who { padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
+/* A · avatar en la cabecera: la fila es una sola columna y el agente se dice con un punto de su color. */
+:root[data-reply="doc-inline"] #messages#messages .row.assistant { grid-template-columns: minmax(0, 1fr); }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant > .avatar { display: none; }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who { align-items: center; margin-bottom: 4px; }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 18%, transparent); }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who > span:first-child { font-size: 11.5px; font-weight: 600; }
+/* C · lo accionable en tarjeta */
+:root[data-reply^="pieces"] #messages#messages .row.assistant .plan-card { border: 0; border-radius: 14px; padding: 10px 14px; background: var(--panel); box-shadow: var(--lift-1); }
+:root[data-reply="pieces-edge"] #messages#messages .row.assistant .plan-card li { list-style: none; margin: 6px 0 6px -18px; padding: 5px 0 5px 10px; border-left: 3px solid var(--agent); border-radius: 2px; }
+:root[data-reply="pieces-edge"] #messages#messages .row.assistant .plan-card { border-left: 3px solid var(--agent); }
+/* Los carriles, solo sobre un fondo de pantalla */
+:root[data-reply][data-reply-legible][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col { position: relative; isolation: isolate; }
+:root[data-reply][data-reply-legible="lane"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before,
+:root[data-reply][data-reply-legible="stripe"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before {
+  content: ''; position: absolute; inset: -10px -18px -8px -14px; z-index: -1; border-radius: 22px;
+  background: color-mix(in srgb, var(--bg) 62%, transparent);
+  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
+  -webkit-mask-image: radial-gradient(120% 140% at 40% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 140% at 40% 50%, #000 62%, transparent 100%);
+}
+:root[data-reply][data-reply-legible="stripe"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before {
+  inset: -10px -60px -8px -14px; border-radius: 18px 0 0 18px; background: color-mix(in srgb, var(--bg) 70%, transparent);
+  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 100%);
+}
+:root[data-reply][data-reply-legible="column"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .thread-inner {
+  border-radius: 26px; background: color-mix(in srgb, var(--bg) 52%, transparent);
+  -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 8%, transparent);
+  padding-left: 18px; padding-right: 18px;
+}
+:root[data-reply][data-reply-legible="halo"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant :is(.bubble, .who) {
+  text-shadow: 0 0 1px var(--bg), 0 0 6px var(--bg), 0 0 14px color-mix(in srgb, var(--bg) 85%, transparent), 0 0 24px color-mix(in srgb, var(--bg) 60%, transparent);
+}
+:root[data-reply][data-reply-legible="halo"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .bubble { font-weight: 400; }
+/* El selector de la prueba: solo existe con ?reply= (app.js, PRUEBA · respuestas sin burbuja). */
+.reply-lab { position: fixed; left: 50%; top: 66px; z-index: 90; transform: translateX(-50%); display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px var(--line-2), 0 10px 28px -8px rgba(0, 0, 0, .45); font-family: var(--read); }
+.reply-lab .lab-row { display: flex; align-items: center; gap: 3px; }
+.reply-lab b { width: 58px; padding: 0 6px; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
+.reply-lab button { white-space: nowrap; height: 27px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 500 12px var(--read); cursor: pointer; }
+.reply-lab button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+.reply-lab button.on { background: var(--phosphor); color: var(--phosphor-ink); }
+.reply-lab button:disabled { opacity: .4; cursor: default; }
+.reply-lab .lab-sample { margin-left: auto; box-shadow: inset 0 0 0 1px var(--line-2); }
+
+/* ==========================================================================================
+   PIEZAS QUE SE USAN (2026-10-15): la petición de comandos y la tarjeta de @madre local, con la
+   letra de lectura y botones que se sienten botones. Solo forma: lo que hacen no cambia.
+   ========================================================================================== */
+/* «@agente te pide correr» */
+#messages#messages .choice.run-request .choice-q { margin: 2px 2px 14px; font-family: var(--read); font-size: 16px; font-weight: 600; line-height: 1.4; }
+#messages#messages .choice.run-request .run-line { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 0 !important; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
+#messages#messages .choice.run-request .run-line + .run-line, #messages#messages .choice.run-request .run-why + .run-line { margin-top: 6px; }
+#messages#messages .choice.run-request .run-line:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
+#messages#messages .choice.run-request .run-line .choice-key { width: 22px; height: 22px; margin: 0; border: 0 !important; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: none !important; color: var(--text-3); font-size: 11.5px; }
+#messages#messages .choice.run-request .run-line .choice-text { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; font-family: var(--mono); font-size: 13px; line-height: 1.45; }
+#messages#messages .choice.run-request .run-line .choice-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 0 !important; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent) !important; box-shadow: none !important; color: var(--text) !important; font-family: var(--read); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: lowercase; white-space: nowrap; }
+#messages#messages .choice.run-request .run-line .choice-tag::first-letter { text-transform: uppercase; }
+#messages#messages .choice.run-request .run-line:not(.ran):not(.failed):not(.refused):not(.running):not(.serving) .choice-tag { background: var(--agent, var(--phosphor)) !important; color: var(--agent-on, var(--phosphor-ink)) !important; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag { background: color-mix(in srgb, var(--ok, var(--phosphor)) 15%, transparent) !important; color: var(--ok, var(--phosphor)) !important; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag { position: relative; padding-left: 26px; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag::before { content: '✓'; position: absolute; left: 11px; text-transform: none; }
+#messages#messages .choice.run-request .run-line.failed .choice-tag { background: color-mix(in srgb, var(--crit) 15%, transparent) !important; color: var(--crit) !important; }
+#messages#messages .choice.run-request .run-line.refused { opacity: 1; }
+#messages#messages .choice.run-request .run-line.refused .choice-text { color: var(--text-3) !important; }
+#messages#messages .choice.run-request .run-line.refused .choice-tag { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; color: var(--text-3) !important; }
+#messages#messages .choice.run-request .run-why { margin: 6px 0 0 46px; font-family: var(--read); font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+#messages#messages .choice.run-request .run-summary { display: inline-flex; align-items: center; margin: 12px 2px 0; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); font-family: var(--read); font-size: 12.5px; letter-spacing: 0; color: var(--text-2); }
+#messages#messages .choice.run-request.returned .run-summary { background: color-mix(in srgb, var(--ok, var(--phosphor)) 13%, transparent); color: var(--ok, var(--phosphor)); }
+#messages#messages .choice.run-request :is(.run-all, .run-back) { height: 30px; padding: 0 13px; border: 0 !important; border-radius: 9px; background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
+#messages#messages .choice.run-request .choice-foot { margin: 14px 2px 0; font-family: var(--read); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+/* @madre local: una tarjeta que se lee, a la izquierda, y su botón como el de las demás. */
+#messages#messages .system.local-model { justify-items: start; gap: 6px; padding: 14px 16px; text-align: left; }
+#messages#messages .system.local-model .head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
+#messages#messages .system.local-model .head .who { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 14%, transparent); color: var(--agent, var(--phosphor)); }
+#messages#messages .system.local-model .says { max-width: 62ch; font-family: var(--read); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text); text-align: left; }
+#messages#messages .system.local-model .says.small { font-size: 12.5px; color: var(--text-3); }
+#messages#messages .system.local-model .acts { justify-content: flex-start; margin-top: 4px; }
+#messages#messages .system.local-model .acts button { height: 30px; padding: 0 14px; border: 0 !important; border-radius: 9px; background: var(--phosphor) !important; box-shadow: none !important; color: var(--phosphor-ink) !important; font-family: var(--read); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: lowercase; }
+#messages#messages .system.local-model .acts button::first-letter { text-transform: uppercase; }
+#messages#messages .system.local-model .acts button + button { background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; }
+.reply-lab .lab-code { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 12px var(--mono); letter-spacing: .08em; }
+
+/* «#3 EDITAR concedido»: un estado pequeño en el color de su modo, no una franja punteada. */
+#messages#messages .mode-ask.settled { display: inline-flex !important; grid-template-columns: none; justify-self: start; align-self: flex-start; width: fit-content !important; max-width: 100%; margin-left: 0 !important; margin-right: auto !important; padding: 5px 12px 5px 10px; border: 0 !important; border-radius: 999px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 13%, transparent) !important; box-shadow: none !important; }
+#messages#messages .mode-ask.settled .mode-what { display: inline-flex; align-items: center; gap: 7px; font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--mode-c, var(--ok, var(--phosphor))); }
+#messages#messages .mode-ask.settled .mode-what::before { content: '✓'; font-weight: 700; }
+#messages#messages .mode-ask.settled[data-mode="1"] { --mode-c: var(--mode-1); }
+#messages#messages .mode-ask.settled[data-mode="2"] { --mode-c: var(--mode-2); }
+#messages#messages .mode-ask.settled[data-mode="3"] { --mode-c: var(--mode-3); }
+#messages#messages .mode-ask.settled[data-mode="4"] { --mode-c: var(--mode-4); }
+
+/* ==========================================================================================
+   PRUEBA · las tarjetas de /run en cuatro formas (2026-10-15), por data-term en <html>:
+   line (a), window (b), pill (c), step (d). Sin el atributo, la de siempre.
+   ========================================================================================== */
+/* a · línea: el comando primero, el estado y quién a la derecha, la última línea debajo. */
+:root[data-term="line"] #messages#messages .command-card.terminal { border-radius: 14px; }
+:root[data-term="line"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="line"] #messages .command-card.terminal .term-head { gap: 10px; padding: 10px 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-head .chev-icon { order: -1; }
+:root[data-term="line"] #messages .command-card.terminal .term-line { font-size: 13px; }
+:root[data-term="line"] #messages .command-card.terminal .term-status { font-family: var(--read); font-size: 12px; padding: 3px 10px; }
+:root[data-term="line"] #messages .command-card.terminal .term-who { font-family: var(--read); font-size: 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-peek { padding: 0 12px 10px 38px; font-size: 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-peek::before { content: '→ '; color: var(--text-3); }
+/* b · ventana: una terminal pequeña, oscura en los dos temas, con su salida a la vista. */
+:root[data-term="window"] #messages#messages .command-card.terminal { overflow: hidden; border-radius: 14px; border: 0 !important; background: #0d100d !important; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), var(--lift-1) !important; color: #e9ede6; }
+:root[data-term="window"] #messages .command-card.terminal .term-head { padding: 9px 12px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); }
+:root[data-term="window"] #messages .command-card.terminal .term-head::before { content: ''; flex: none; width: 34px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 17px 5px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 29px 5px, #28c840 4px, transparent 4.5px); opacity: .85; }
+:root[data-term="window"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="window"] #messages .command-card.terminal .term-line { color: #e9ede6; font-size: 12.5px; }
+:root[data-term="window"] #messages .command-card.terminal .term-who { color: #9aa197; }
+:root[data-term="window"] #messages .command-card.terminal .term-peek { margin: 0; padding: 10px 14px 12px; font-size: 12px; color: #b8c2b4; white-space: pre-wrap; }
+:root[data-term="window"] #messages .command-card.terminal .term-peek::before { content: '› '; color: #28c840; }
+:root[data-term="window"] #messages .command-card.terminal pre { background: transparent; border-top-color: rgba(255, 255, 255, .07); color: #e9ede6; }
+/* c · píldora: como las llamadas a herramientas de los chats, una línea del ancho de lo que dice. */
+:root[data-term="pill"] #messages#messages .command-card.terminal:not(.open) { justify-self: start; width: fit-content; max-width: 100%; border-radius: 999px; }
+:root[data-term="pill"] #messages .command-card.terminal:not(.open) .term-peek, :root[data-term="pill"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="pill"] #messages .command-card.terminal:not(.open) .term-head { padding: 6px 12px 6px 8px; gap: 8px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-status { order: -1; font-family: var(--read); font-size: 12px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-line { font-size: 12.5px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-who { font-family: var(--read); font-size: 12px; }
+:root[data-term="pill"] #messages#messages .command-card.terminal.open { border-radius: 14px; }
+/* d · paso: sin tarjeta; un punto de estado en un hilo, el comando y debajo quién, cuánto y qué dijo. */
+:root[data-term="step"] #messages#messages .command-card.terminal { position: relative; padding-left: 26px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
+:root[data-term="step"] #messages#messages .command-card.terminal::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); }
+:root[data-term="step"] #messages#messages .command-card.terminal::after { content: '✓'; position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok, var(--phosphor)); color: var(--bg); font: 700 10px var(--read); }
+:root[data-term="step"] #messages#messages .command-card.terminal.failed::after { content: '✕'; background: var(--crit); }
+:root[data-term="step"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="step"] #messages .command-card.terminal .term-head { flex-wrap: wrap; padding: 6px 0; row-gap: 2px; }
+:root[data-term="step"] #messages .command-card.terminal .term-line { flex: 1 1 calc(100% - 40px); font-size: 13px; }
+:root[data-term="step"] #messages .command-card.terminal .term-head .chev-icon { order: 0; }
+:root[data-term="step"] #messages .command-card.terminal .term-status { order: 2; padding: 0; background: none !important; font-family: var(--read); font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal .term-who { order: 3; font-family: var(--read); font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal .term-who::before { content: '· '; color: var(--text-3); }
+:root[data-term="step"] #messages .command-card.terminal .term-peek { padding: 0 0 6px; font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal pre { border: 0; border-radius: 10px; margin-bottom: 6px; }
+:root[data-term="step"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .command-card.terminal { padding-right: 12px; border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--bg) 62%, transparent) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
+#messages#messages .mode-ask.settled { background: color-mix(in srgb, var(--mode-c, var(--phosphor)) 16%, color-mix(in srgb, var(--bg) 78%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-c, var(--phosphor)) 45%, transparent) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
+#messages#messages .mode-ask.settled .mode-what { color: color-mix(in srgb, var(--mode-c, var(--phosphor)) 70%, var(--text)); }
+
+/* ==========================================================================================
+   LABORATORIO DEL CHAT (2026-10-15): el panel de ?lab (app.js) y las cinco formas de cada
+   elemento, por data-labNN en <html>. A es siempre como se ve hoy.
+   ========================================================================================== */
+.lab-panel { position: fixed; top: 64px; right: 12px; bottom: 12px; z-index: 95; width: 300px; display: flex; flex-direction: column; border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 .5px var(--line-2), 0 18px 40px -12px rgba(0, 0, 0, .5); font-family: var(--read); }
+.lab-panel.folded { bottom: auto; width: auto; }
+.lab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
+.lab-head b { font: 600 13px var(--read); }
+.lab-fold { width: 26px; height: 26px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); cursor: pointer; }
+.lab-code { margin-left: auto; padding: 4px 9px; border-radius: 8px; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 12px var(--mono); letter-spacing: .06em; }
+.lab-copy, .lab-again { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--phosphor); color: var(--phosphor-ink); font: 600 12px var(--read); cursor: pointer; }
+.lab-copy { flex: 1 1 100%; }
+.lab-list { flex: 1; overflow: auto; padding: 6px 8px; display: grid; gap: 2px; align-content: start; }
+.lab-row { display: grid; gap: 3px; padding: 7px 6px; border-radius: 10px; }
+.lab-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
+.lab-top { display: flex; align-items: center; gap: 8px; }
+.lab-n { font: 600 10.5px var(--mono); color: var(--text-3); }
+.lab-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
+.lab-keys { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); }
+.lab-keys button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 600 11px var(--mono); cursor: pointer; }
+.lab-keys button.on { background: var(--phosphor); color: var(--phosphor-ink); }
+.lab-desc { padding-left: 26px; font-size: 11.5px; color: var(--text-3); }
+.lab-again { margin: 8px 12px 12px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
+:root[data-lab="on"] .shell { padding-right: 312px; }
+@media (max-width: 900px) { :root[data-lab="on"] .shell { padding-right: 0; } .lab-panel { width: 260px; } }
+/* 01 · Mensaje del humano */
+:root[data-lab01="B"] #messages#messages .row.user .bubble { background: var(--panel-2) !important; color: var(--text) !important; border-radius: 20px !important; box-shadow: none !important; }
+:root[data-lab01="C"] #messages#messages .row.user .bubble { background: transparent !important; color: var(--text) !important; box-shadow: none !important; padding: 0 !important; text-align: right; }
+:root[data-lab01="D"] #messages#messages .row.user { justify-self: stretch; max-width: 100%; }
+:root[data-lab01="D"] #messages#messages .row.user .col { justify-items: stretch; }
+:root[data-lab01="D"] #messages#messages .row.user .bubble { background: var(--panel) !important; color: var(--text) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px var(--line-2) !important; text-align: left; }
+:root[data-lab01="D"] #messages#messages .row.user .who { justify-content: flex-start; }
+:root[data-lab01="E"] #messages#messages .row.user .bubble { background: var(--panel-2) !important; color: var(--text) !important; border-radius: 20px !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
+:root[data-lab01="E"] #messages#messages .row.user .stamp .to { order: -1; font-size: 12px; color: var(--text); }
+/* 02 · Adjuntos */
+:root[data-lab02="B"] #messages .row.user .files { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab02="B"] #messages .row.user .file-tile { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); }
+:root[data-lab02="C"] #messages .row.user .file-tile { display: inline-grid; grid-template-columns: 30px auto; align-items: center; gap: 10px; width: auto; height: auto; padding: 8px 12px 8px 8px; border: 0; border-radius: 12px; background: var(--panel); box-shadow: var(--lift-1); color: var(--text); }
+:root[data-lab02="C"] #messages .row.user .file-tile .kind { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
+:root[data-lab02="D"] #messages .row.user .files { display: flex; flex-wrap: wrap; gap: 4px 10px; }
+:root[data-lab02="D"] #messages .row.user .file-tile { width: auto; height: auto; padding: 0; border: 0; background: none; color: inherit; opacity: .75; font-size: 12px; }
+:root[data-lab02="D"] #messages .row.user .file-tile .kind { display: none; }
+:root[data-lab02="D"] #messages .row.user .file-tile .name::before { content: '📎 '; }
+:root[data-lab02="E"] #messages .row.user .bubble { display: flex; flex-direction: column; }
+:root[data-lab02="E"] #messages .row.user .files { order: -1; margin: 0 0 8px; }
+/* 03 · Pensando */
+:root[data-lab03="B"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="B"] #messages .row.thinking .bubble { background: transparent !important; box-shadow: none !important; }
+:root[data-lab03="B"] #messages .row.thinking .bubble::before { content: 'Pensando…'; background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lab-shimmer 2.2s linear infinite; font-weight: 500; }
+@keyframes lab-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+:root[data-lab03="C"] #messages .row.thinking .bubble { background: transparent !important; box-shadow: none !important; }
+:root[data-lab03="C"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="C"] #messages .row.thinking > .avatar { animation: lab-pulse 1.4s ease-in-out infinite; }
+@keyframes lab-pulse { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
+:root[data-lab03="D"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="D"] #messages .row.thinking .bubble { width: 140px; height: 4px; padding: 0 !important; border-radius: 4px !important; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent) !important; box-shadow: none !important; }
+:root[data-lab03="D"] #messages .row.thinking .bubble::before { content: ''; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--agent, var(--phosphor)); animation: lab-bar 1.4s ease-in-out infinite; }
+@keyframes lab-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
+:root[data-lab03="E"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="E"] #messages .row.thinking .bubble { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 12px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--agent, var(--text)) 12%, transparent) !important; box-shadow: none !important; font-size: 12.5px; }
+:root[data-lab03="E"] #messages .row.thinking .bubble::before { content: 'pensando'; color: var(--agent, var(--text)); font-weight: 500; }
+/* 04 · Cabecera del agente */
+:root[data-lab04="B"] #messages#messages .row.assistant .who > span:first-child { font-family: var(--read); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
+:root[data-lab04="B"] #messages#messages .row.assistant .who .badge:not(.mode) { background: none !important; padding: 0; font-family: var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+:root[data-lab04="C"] #messages#messages .row.assistant .who > span:first-child { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--agent) 15%, transparent); font-weight: 600; }
+:root[data-lab04="D"] #messages#messages .row.assistant .who > :not(:first-child) { opacity: 0; transition: opacity .2s; }
+:root[data-lab04="D"] #messages#messages .row.assistant:hover .who > :not(:first-child) { opacity: 1; }
+:root[data-lab04="E"] #messages#messages .row.assistant { grid-template-columns: minmax(0, 1fr); }
+:root[data-lab04="E"] #messages#messages .row.assistant > .avatar { display: none; }
+:root[data-lab04="E"] #messages#messages .row.assistant .who { align-items: center; }
+:root[data-lab04="E"] #messages#messages .row.assistant .who::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--agent); }
+/* 05 · Cuerpo de la respuesta (hoy: prosa libre con carril) */
+:root[data-lab05="B"] #messages#messages .row.assistant .bubble { background: var(--panel) !important; box-shadow: var(--lift-1) !important; border-radius: 20px 20px 20px 6px !important; padding: 12px 16px !important; }
+:root[data-lab05="C"] #messages#messages .row.assistant .bubble { background: var(--panel) !important; box-shadow: 0 0 0 1px var(--line-2) !important; border-radius: 14px !important; padding: 12px 16px !important; }
+:root[data-lab05="D"] #messages#messages .row.assistant .bubble { padding: 4px 0 4px 14px !important; border-left: 3px solid var(--agent) !important; }
+:root[data-lab05="E"] #messages#messages .row.assistant .who { padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
+:root[data-lab05]:not([data-lab05="A"]) #messages#messages .row.assistant .col::before { display: none; }
+:root[data-lab05="D"] #messages#messages .row.assistant .col::before, :root[data-lab05="E"] #messages#messages .row.assistant .col::before { display: block; }
+/* 06 · Memoria citada */
+:root[data-lab06="B"] #messages .cite { font-family: var(--mono); font-size: 10px; vertical-align: super; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--madre-green) 16%, transparent); color: var(--madre-green); }
+:root[data-lab06="C"] #messages .cite { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--madre-green) 14%, transparent); color: var(--madre-green); font: 500 11.5px var(--mono); }
+:root[data-lab06="D"] #messages .cite { text-decoration: underline dotted var(--madre-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
+:root[data-lab06="E"] #messages .cite { font-size: .8em; color: var(--text-3); }
+/* 07 · Plan */
+:root[data-lab07="B"] #messages .plan-card ol { list-style: none; padding-left: 0; }
+:root[data-lab07="B"] #messages .plan-card li { position: relative; padding: 6px 0 6px 26px; }
+:root[data-lab07="B"] #messages .plan-card li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
+:root[data-lab07="C"] #messages .plan-card ol { padding-left: 22px; }
+:root[data-lab07="C"] #messages .plan-card li { padding: 8px 0; border-top: 1px dashed var(--line-2); }
+:root[data-lab07="C"] #messages .plan-card li:first-child { border-top: 0; }
+:root[data-lab07="D"] #messages .plan-card ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
+:root[data-lab07="D"] #messages .plan-card li { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--agent) 10%, transparent); }
+:root[data-lab07="E"] #messages .plan-card ol { list-style: none; padding-left: 0; }
+:root[data-lab07="E"] #messages .plan-card li { position: relative; margin: 0; padding: 6px 0 10px 24px; }
+:root[data-lab07="E"] #messages .plan-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--agent); }
+:root[data-lab07="E"] #messages .plan-card li:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 23px; bottom: -2px; width: 2px; background: var(--line-2); }
+/* 08 · Bloque de código */
+:root[data-lab08="B"] #messages .codeblock { overflow: hidden; border: 0 !important; border-radius: 12px; background: var(--panel) !important; box-shadow: var(--lift-1); }
+:root[data-lab08="B"] #messages .codeblock .lang, :root[data-lab08="B"] #messages .codeblock .copy { font-family: var(--read); letter-spacing: 0; text-transform: none; }
+:root[data-lab08="C"] #messages .codeblock .lang { display: none; }
+:root[data-lab08="C"] #messages .codeblock .copy { opacity: 0; transition: opacity .2s; }
+:root[data-lab08="C"] #messages .codeblock:hover .copy { opacity: 1; }
+:root[data-lab08="C"] #messages .codeblock { border: 0 !important; background: color-mix(in srgb, var(--text) 5%, transparent) !important; }
+:root[data-lab08="D"] #messages .codeblock { border: 0 !important; background: #0d100d !important; color: #e9ede6; }
+:root[data-lab08="D"] #messages .codeblock :is(pre, code, .lang, .copy) { color: #e9ede6 !important; background: transparent !important; }
+:root[data-lab08="E"] #messages .codeblock pre { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
+/* 09 · Pie de la respuesta */
+:root[data-lab09="B"] #messages .row.assistant .bubble-foot .stamp { display: none; }
+:root[data-lab09="B"] #messages .row.assistant .bubble-foot { opacity: 0; transition: opacity .2s; }
+:root[data-lab09="B"] #messages .row.assistant:hover .bubble-foot { opacity: 1; }
+:root[data-lab09="C"] #messages .row.assistant .bubble-foot .stamp { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+:root[data-lab09="D"] #messages .row.assistant .bubble-actions .act { border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+:root[data-lab09="E"] #messages .row.assistant .bubble-foot .stamp { opacity: .45; transition: opacity .2s; }
+:root[data-lab09="E"] #messages .row.assistant:hover .bubble-foot .stamp { opacity: 1; }
+/* 10 · Elección */
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-list { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-option { width: auto; display: inline-flex; padding: 7px 14px; border-radius: 999px; }
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-key { display: none; }
+:root[data-lab10="C"] #messages .choice:not(.run-request) .choice-option { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
+:root[data-lab10="D"] #messages .choice:not(.run-request) .choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+:root[data-lab10="D"] #messages .choice:not(.run-request) .choice-option { grid-template-columns: 1fr; align-content: start; min-height: 74px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-list { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-option { width: auto; padding: 7px 14px; border-radius: 9px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-option.recommended { background: var(--agent, var(--phosphor)); color: var(--agent-on, var(--phosphor-ink)); }
+:root[data-lab10="E"] #messages .choice:not(.run-request) :is(.choice-key, .choice-kicker, .choice-foot) { display: none; }
+/* 11 · Petición de permiso */
+:root[data-lab11="B"] #messages .mode-ask:not(.settled) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+:root[data-lab11="B"] #messages .mode-ask:not(.settled) .mode-why { display: none; }
+:root[data-lab11="C"] #messages .mode-ask:not(.settled) { border: 0 !important; border-left: 4px solid var(--mode-2) !important; border-radius: 6px 14px 14px 6px !important; background: var(--panel) !important; }
+:root[data-lab11="D"] #messages .mode-ask:not(.settled) { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45) !important; }
+:root[data-lab11="E"] #messages .mode-ask:not(.settled) { background: transparent !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
+/* 12 · Permiso concedido */
+:root[data-lab12="B"] #messages#messages .mode-ask.settled { align-self: stretch; width: auto !important; background: none !important; box-shadow: none !important; gap: 10px; }
+:root[data-lab12="B"] #messages#messages .mode-ask.settled::before, :root[data-lab12="B"] #messages#messages .mode-ask.settled::after { content: ''; flex: 1; align-self: center; height: 1px; background: var(--line-2); }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled { align-self: center; background: none !important; box-shadow: none !important; }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled .mode-what { color: var(--text-3); font-weight: 400; }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled .mode-what::before { content: none; }
+:root[data-lab12="D"] #messages#messages .mode-ask.settled .mode-what::before { content: '🔓'; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled { background: none !important; box-shadow: none !important; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled .mode-what { color: var(--text-2); font-weight: 400; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled .mode-what::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mode-c, var(--phosphor)); }
+/* 13 · Petición de comandos */
+:root[data-lab13="B"] #messages#messages .choice.run-request .run-line { background: transparent !important; box-shadow: none !important; border-radius: 0; border-top: 1px solid var(--line) !important; }
+:root[data-lab13="C"] #messages#messages .choice.run-request .run-line { background: #0d100d !important; }
+:root[data-lab13="C"] #messages#messages .choice.run-request .run-line .choice-text { color: #e9ede6 !important; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .choice-list { counter-reset: lab-run; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line { counter-increment: lab-run; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line .choice-key { font-size: 0 !important; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line .choice-key::after { content: counter(lab-run); font: 600 11.5px var(--mono); color: var(--text-2); }
+:root[data-lab13="E"] #messages#messages .choice.run-request .run-line:not(.refused):not(:hover) .choice-tag { opacity: 0; }
+/* 15 · Avisos del sistema (abiertos en B–E) */
+:root[data-lab15]:not([data-lab15="A"]) #messages#messages .sys-dots.open { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
+:root[data-lab15]:not([data-lab15="A"]) #messages#messages .sys-dots.open > .sys-more { display: none; }
+:root[data-lab15="B"] #messages#messages .sys-dots.open > .system.folded { text-align: center; padding-left: 12px !important; background: none !important; }
+:root[data-lab15="B"] #messages#messages .sys-dots.open > .system.folded::before { display: none; }
+:root[data-lab15="C"] #messages#messages .sys-dots.open > .system.folded { text-align: center; padding: 8px 12px !important; border-top: 1px solid var(--line-2); border-radius: 0 !important; background: none !important; }
+:root[data-lab15="C"] #messages#messages .sys-dots.open > .system.folded::before { display: none; }
+:root[data-lab15="D"] #messages#messages .sys-dots.open { justify-items: start; }
+:root[data-lab15="D"] #messages#messages .sys-dots.open > .system.folded { justify-self: start; border-radius: 999px !important; background: color-mix(in srgb, var(--panel) 88%, transparent) !important; box-shadow: var(--lift-1); }
+:root[data-lab15="E"] #messages#messages .sys-dots.open { gap: 8px; }
+:root[data-lab15="E"] #messages#messages .sys-dots.open > .system.folded { border-radius: 14px !important; background: var(--panel) !important; box-shadow: var(--lift-1); }
+/* 16 · Error y diagnóstico */
+:root[data-lab16="B"] #messages#messages .thread-inner > .system.fail { justify-self: start; margin-left: 40px; text-align: left; }
+:root[data-lab16="B"] #messages#messages .thread-inner > .system.fail::before { content: '⚠ '; }
+:root[data-lab16="C"] #messages#messages .thread-inner > .system.fail { width: 100%; max-width: 100%; border-radius: 10px; text-align: left; }
+:root[data-lab16="D"] #messages#messages .thread-inner > .system.fail { background: none !important; box-shadow: none !important; padding: 0; font-size: 12.5px; }
+:root[data-lab16="E"] #messages#messages .thread-inner > .system.fail { background: var(--panel) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), var(--lift-1) !important; color: var(--text); }
+/* 17 · Espacio entre turnos */
+:root[data-lab17="B"] #messages .thread-inner > * + * { margin-top: 4px !important; }
+:root[data-lab17="C"] #messages .thread-inner > * + * { margin-top: 28px !important; }
+:root[data-lab17="D"] #messages .thread-inner > .row + .row { padding-top: 14px; border-top: 1px solid var(--line); }
+:root[data-lab17="E"] #messages .thread-inner > .row.assistant + .row.assistant { margin-top: 2px !important; }
+:root[data-lab17="E"] #messages .thread-inner > :is(.row.assistant[data-agent="claude"] + .row.assistant[data-agent="claude"], .row.assistant[data-agent="codex"] + .row.assistant[data-agent="codex"], .row.assistant[data-agent="gemini"] + .row.assistant[data-agent="gemini"], .row.assistant[data-agent="opencode"] + .row.assistant[data-agent="opencode"], .row.assistant[data-agent="madre"] + .row.assistant[data-agent="madre"]) .who { display: none; }
+:root[data-lab17="E"] #messages .thread-inner > :is(.row.assistant[data-agent="claude"] + .row.assistant[data-agent="claude"], .row.assistant[data-agent="codex"] + .row.assistant[data-agent="codex"], .row.assistant[data-agent="gemini"] + .row.assistant[data-agent="gemini"], .row.assistant[data-agent="opencode"] + .row.assistant[data-agent="opencode"], .row.assistant[data-agent="madre"] + .row.assistant[data-agent="madre"]) > .avatar { visibility: hidden; }
+:root[data-lab15="B"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .sys-dots.open > .system.folded,
+:root[data-lab15="C"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .sys-dots.open > .system.folded { background: color-mix(in srgb, var(--bg) 62%, transparent) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 12px !important; }
+
+/* ==========================================================================================
+   CHAT · ACCC-BABA-ECBB-DCAA-C (2026-10-15). Lo que se eligió en el laboratorio (?lab), hecho
+   forma de la sala: adjuntos en tarjeta, avatar que late al pensar, el agente en una píldora, la
+   respuesta en burbuja, el plan como lista de tareas, la hora sola al pie, elecciones en lista con
+   número, el permiso en una línea, el concedido como divisoria, comandos en pasos, cada /run en
+   píldora (data-term="pill", app.js) y aire entre turnos. Cada regla se aparta cuando el
+   laboratorio compara otra forma de su elemento (data-labNN en <html>). Sin backdrop-filter en el
+   hilo, como dicen los planos: sobre un fondo de pantalla, cada pieza lleva su propio material.
+   ========================================================================================== */
+
+/* 02 · Adjuntos: una tarjeta por archivo, con su tipo, su nombre y su tamaño. */
+:root:not([data-lab02]) #messages#messages .bubble .files { gap: 8px; margin-top: 10px; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:not(.image) {
+  display: inline-grid; grid-template-columns: 34px minmax(0, auto); align-items: center; column-gap: 10px;
+  max-width: min(100%, 280px); padding: 7px 14px 7px 7px; border: 0; border-radius: 12px;
+  background: var(--plane-solid); color: var(--text); text-align: left;
+  box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .14), 0 1px 2px rgb(var(--plane-ink) / .1);
+  transition: transform calc(160ms * var(--motion-scale)) ease, box-shadow calc(160ms * var(--motion-scale)) ease;
+}
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:not(.image):hover { transform: translateY(-1px); box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .18), 0 4px 10px -4px rgb(var(--plane-ink) / .28); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 70%, transparent); outline-offset: 2px; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .kind { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--phosphor) 12%, transparent); color: var(--phosphor); font: 600 9.5px var(--mono); letter-spacing: .06em; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .file-text { display: grid; gap: 1px; min-width: 0; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--read); letter-spacing: 0; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .meta { font: 400 11.5px/1.3 var(--read); font-variant-numeric: tabular-nums; color: var(--text-3); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile.image { overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .14); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile.image img { border-radius: 0; }
+
+/* 03 · Pensando: sin globo. El avatar respira y deja un anillo en su color; al lado, lo que hace y
+   cuánto lleva. Sobre un fondo de pantalla, la línea va en el material de las etiquetas. */
+:root:not([data-lab03]) #messages#messages .row.thinking .bubble { gap: 0; padding: 4px 6px 4px 2px; border-radius: 999px; background: transparent !important; box-shadow: none !important; }
+:root:not([data-lab03]) #messages#messages .row.thinking .bubble > i { display: none; }
+:root:not([data-lab03]) #messages#messages .row.thinking .status { margin-left: 0; font-size: 14px; font-style: normal; color: var(--text-2); }
+:root:not([data-lab03]) #messages#messages .row.thinking .status::after { display: none; }
+:root:not([data-lab03]) #messages#messages .row.thinking :is(.elapsed, .tokens) { margin-left: 10px; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+:root:not([data-lab03]) #messages#messages .row.thinking .stop-turn { margin-left: 6px; }
+:root:not([data-lab03]) #messages#messages .row.thinking > .avatar { position: relative; animation: think-breathe calc(2.4s * var(--motion-scale) / .7) ease-in-out infinite; }
+:root:not([data-lab03]) #messages#messages .row.thinking > .avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: think-ring calc(2.4s * var(--motion-scale) / .7) ease-out infinite; }
+:root:not([data-lab03])[data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.thinking .bubble { padding: 4px 8px 4px 14px; background: var(--plane-meta) !important; }
+@keyframes think-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
+@keyframes think-ring {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent, var(--phosphor)) 50%, transparent); }
+  70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--agent, var(--phosphor)) 0%, transparent); }
+}
+
+/* 04 · Cabecera: el nombre del agente en su píldora, en letra de lectura; modelo y esfuerzo detrás,
+   en píldoras neutras (AJUSTES EN LA SALA REAL, al final); el modo conserva su color. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { align-items: center; gap: 8px; padding: 3px 10px 3px 3px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--agent) 15%, transparent); color: color-mix(in srgb, var(--agent) 82%, var(--text)); font: 600 12.5px/1.4 var(--read); letter-spacing: 0; text-transform: none; }
+
+/* 05 · Cuerpo: la burbuja, con la esquina corta hacia el avatar, que va abajo. */
+:root:not([data-reply]) #messages#messages .row.assistant:not(.delegated) .bubble { border-radius: 20px 20px 20px 6px; padding: 13px 17px 10px; }
+
+/* 07 · Plan: una lista de tareas; cada casilla en el color de quien la hará. */
+:root:not([data-lab07]) #messages#messages .plan-card { margin: 10px 0 8px; padding: 10px 14px 8px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); }
+:root:not([data-lab07]) #messages#messages .plan-card .plan-label { display: block; margin-bottom: 4px; }
+:root:not([data-lab07]) #messages#messages .plan-card ol { margin: 0; padding: 0; list-style: none; }
+:root:not([data-lab07]) #messages#messages .plan-card li { position: relative; margin: 0; padding: 6px 0 6px 28px; font-size: 14px; line-height: 1.45; }
+:root:not([data-lab07]) #messages#messages .plan-card li::before { content: ''; position: absolute; left: 0; top: calc(6px + (1.45em - 17px) / 2); width: 17px; height: 17px; box-sizing: border-box; border-radius: 5px; background: color-mix(in srgb, var(--agent) 8%, var(--plane-solid)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--agent) 55%, var(--line-2)); }
+:root:not([data-lab07]) #messages#messages .plan-card li + li { border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
+
+/* 09 · Pie: la hora sola; lo que costó aparece al pasar o al enfocar la respuesta. */
+:root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span:not(:first-child) { opacity: 0; transition: opacity calc(180ms * var(--motion-scale)) ease; }
+:root:not([data-lab09]) #messages#messages .row.assistant:is(:hover, :focus-within) .bubble-foot .stamp > span { opacity: 1; }
+:root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span:first-child { font-variant-numeric: tabular-nums; }
+@media (hover: none) { :root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span { opacity: 1; } }
+
+/* 10 · Elección: una lista con número, como las de los chats; cada fila es una frase que se presiona. */
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 0; background: transparent; font-size: 14.5px; line-height: 1.45; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option + .choice-option { box-shadow: inset 0 1px 0 var(--line); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option:hover { background: color-mix(in srgb, var(--agent, var(--text)) 6%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option:focus-visible { outline-offset: -2px; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-key { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font: 600 11.5px var(--mono); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.recommended { background: color-mix(in srgb, var(--agent, var(--phosphor)) 5%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.recommended .choice-key,
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.picked .choice-key { background: var(--agent, var(--phosphor)); color: var(--agent-on, var(--bg)); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.picked { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-tag { padding: 3px 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 13%, transparent); color: color-mix(in srgb, var(--agent, var(--phosphor)) 85%, var(--text)); font: 500 11.5px var(--read); letter-spacing: 0; text-transform: lowercase; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-tag::first-letter { text-transform: uppercase; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-foot { margin-top: 12px; font: 400 12px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+
+/* 11 · Permiso: en una línea, como Claude Code: qué pide y por cuánto, los botones a la derecha, y
+   debajo, en letra secundaria, cómo se confirma. */
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 2px; padding: 10px 12px 10px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--warn, #e2a022) 7%, var(--plane-solid)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn, #e2a022) 38%, transparent), 0 1px 2px rgb(var(--plane-ink) / .08) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-what { flex: 1 1 260px; font: 400 14px/1.45 var(--read); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-what .who { padding: 0; border-radius: 0; background: none !important; font-weight: 600; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-time { font: 400 13px var(--read); letter-spacing: 0; color: var(--text-2); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-why { order: 9; flex: 1 1 100%; font: 400 12.5px/1.45 var(--read); color: var(--text-3); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-windows { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-window { flex: none; font: 500 12px var(--read); letter-spacing: 0; padding: 4px 9px; white-space: nowrap; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-actions { margin: 0; gap: 6px; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) :is(.mode-go, .mode-alt) { height: 30px; padding: 0 13px; border-radius: 9px; font: 500 12.5px var(--read); letter-spacing: 0; text-transform: lowercase; white-space: nowrap; transition: background calc(150ms * var(--motion-scale)), color calc(150ms * var(--motion-scale)); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) :is(.mode-go, .mode-alt)::first-letter { text-transform: uppercase; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-go { font-weight: 600; box-shadow: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-alt { border: 0; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-alt:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
+
+/* 12 · Concedido: una divisoria a lo ancho de la respuesta, con el permiso al centro en su color. */
+:root:not([data-lab12]) #messages#messages .mode-ask.settled { display: flex !important; align-items: center; gap: 12px; justify-self: stretch; align-self: stretch; width: auto !important; margin: 12px 0 2px !important; padding: 0; background: none !important; box-shadow: none !important; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::before,
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 40%, var(--line-2)); animation: settle-line calc(420ms * var(--motion-scale) / .7) cubic-bezier(.2, .7, .2, 1) both; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::before { transform-origin: right; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::after { transform-origin: left; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled .mode-what { flex: none; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 14%, var(--plane-solid)); color: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 80%, var(--text)); }
+@keyframes settle-line { from { transform: scaleX(0); opacity: 0; } }
+
+/* 13 · Petición de comandos: pasos numerados; el paso que corrió dice ✓ y el que falló ✕. */
+:root:not([data-lab13]) #messages#messages .choice.run-request .choice-list { counter-reset: run-step; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line { counter-increment: run-step; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line .choice-key { font-size: 0 !important; border-radius: 50%; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line .choice-key::after { content: counter(run-step); font: 600 11.5px var(--mono); color: var(--text-2); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.ran .choice-key { background: color-mix(in srgb, var(--ok, var(--phosphor)) 16%, transparent) !important; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.ran .choice-key::after { content: '✓'; color: var(--ok, var(--phosphor)); font-family: var(--read); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.failed .choice-key { background: color-mix(in srgb, var(--crit) 15%, transparent) !important; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.failed .choice-key::after { content: '✕'; color: var(--crit); font-family: var(--read); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.refused .choice-key::after { color: var(--text-3); }
+:root:not([data-lab13]) #messages#messages .choice.run-request :is(.run-all, .run-back) { text-transform: lowercase; }
+:root:not([data-lab13]) #messages#messages .choice.run-request :is(.run-all, .run-back)::first-letter { text-transform: uppercase; }
+
+/* 17 · Aire entre turnos, como en los chats de hoy; lo que es del mismo turno queda junto. */
+:root:not([data-lab17]) #messages#messages .thread-inner > * + * { margin-top: 28px; }
+:root:not([data-lab17]) #messages#messages .thread-inner > :is(.command-card, .sys-dots) + :is(.command-card, .sys-dots),
+:root:not([data-lab17]) #messages#messages .thread-inner > .row.assistant + :is(.choice, .command-card) { margin-top: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  #messages#messages .row.thinking > .avatar, #messages#messages .row.thinking > .avatar::after, #messages#messages .mode-ask.settled::before, #messages#messages .mode-ask.settled::after { animation: none !important; }
+  #messages#messages .row.thinking > .avatar::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent, var(--phosphor)) 30%, transparent); }
+  #messages#messages .bubble .file-tile:hover { transform: none; }
+}
+
+/* ==========================================================================================
+   AJUSTES EN LA SALA REAL (2026-10-15, tras ACCC-BABA-ECBB-DCAA-C)
+   ========================================================================================== */
+
+/* El conjunto de un agente en un solo carril: la cabecera, la burbuja, lo que pide (elección,
+   comandos) y sus /run empiezan donde empieza la burbuja, a la derecha del avatar. */
+:root:not([data-reply]) #messages#messages .row.assistant { column-gap: 14px; }
+:root:not([data-reply]) #messages#messages .row.assistant .col > .who { margin-left: 0; }
+:root:not([data-reply]) #messages#messages .thread-inner > :is(.choice, .command-card) { --agent-lane: 42px; margin-left: var(--agent-lane) !important; margin-right: 0; max-width: min(760px, calc(100% - var(--agent-lane))); }
+:root:not([data-reply])[data-term="pill"] #messages#messages .thread-inner > .command-card.terminal.open { width: auto; }
+
+/* La cabecera: un plano con píldoras dentro, que se leen como una pieza. El plano deja 3 px
+   alrededor de todo (radio 14 = 11 de la píldora + 3), las píldoras van a 4 px entre sí, todas de
+   22 px, letra de lectura de 12 px y el mismo material: sólido, con un filo de medio píxel; el
+   color solo tiñe. El texto suelto (la pregunta citada, lo cobrado) lleva el mismo aire que una
+   píldora. En angosto se acomoda en renglones en vez de desbordarse. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { flex-wrap: wrap; align-items: center; gap: 4px; row-gap: 4px; max-width: 100%; padding: 3px; box-sizing: border-box; border-radius: 14px; box-shadow: inset 0 0 0 .5px rgb(var(--plane-ink) / .1) !important; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) {
+  --chip: var(--text); --chip-mix: 5%;
+  display: inline-block; flex: none; height: 22px; max-width: 100%; padding: 0 10px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  border: 0; border-radius: 11px; background: color-mix(in srgb, var(--chip) var(--chip-mix), var(--plane-solid)) !important;
+  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--chip) 18%, transparent);
+  color: color-mix(in srgb, var(--chip) 80%, var(--text)); font: 500 12px/22px var(--read); letter-spacing: 0; text-transform: none;
+}
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) { --chip: var(--text-2); }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child { --chip: var(--agent); --chip-mix: 15%; font-weight: 600; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .to-agent { --chip: var(--agent); --chip-mix: 13%; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.ash { --chip: var(--phosphor); --chip-mix: 13%; text-transform: lowercase; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge:not(.model, .mode)::first-letter,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.model.effort::first-letter { text-transform: uppercase; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.mode { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.reply, .spent) { padding: 0 7px; line-height: 22px; letter-spacing: 0; text-transform: none; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .spent { flex: none; padding-left: 4px; font: 400 11px/22px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-3); }
+
+/* Modo · modelo · esfuerzo en claro: el mismo vidrio blanco que ya tiene en oscuro. */
+:root[data-scheme="light"] .composer > .pick-options .pick-label {
+  background: rgb(255 255 255 / .6);
+  box-shadow: 0 0 0 .5px rgb(20 30 20 / .1), inset 0 1px 0 #ffffff, 0 6px 18px rgb(20 30 20 / .1);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
+}
+
+/* Cambiar de proyecto: al pasar, el cuadro de atrás se despega un poco; al presionar, o con la
+   ventana abierta, se ilumina el de enfrente. */
+.switch-button svg > path { transition: transform calc(220ms * var(--motion-scale) / .7) cubic-bezier(.2, .8, .2, 1); }
+.switch-button:is(:hover, :focus-visible) svg > path { transform: translate(1.3px, -1.3px); }
+.switch-button svg > .ic-f { transition: fill calc(160ms * var(--motion-scale)) ease, filter calc(160ms * var(--motion-scale)) ease; }
+.switch-button:active svg > .ic-f, body:has(dialog.room-switch[open]) .switch-button svg > .ic-f { fill: currentColor; fill-opacity: .9; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent)); }
+@media (prefers-reduced-motion: reduce) { .switch-button svg > path { transition: none; } .switch-button:is(:hover, :focus-visible) svg > path { transform: none; } }
+
+/* El foco de un aviso de primera vez (spotlight, tour.js): lo que el aviso nombra se ve claro, con
+   un aro suave del acento, y el resto de la página baja un poco. Sin pico en la tarjeta. */
+.hint-spot {
+  position: fixed; z-index: 2147482999; pointer-events: none; box-sizing: border-box;
+  box-shadow: 0 0 0 200vmax rgb(14 20 16 / .16), 0 0 0 2px color-mix(in srgb, var(--accent, var(--phosphor)) 55%, transparent), 0 0 24px 2px color-mix(in srgb, var(--accent, var(--phosphor)) 32%, transparent);
+  background: rgb(255 255 255 / .06);
+  animation: hint-spot-in calc(360ms * var(--motion-scale, .7) / .7) cubic-bezier(.2, .8, .2, 1) both;
+  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
+}
+.hint-spot[hidden] { display: none; }
+:root:not([data-scheme="light"]) .hint-spot { box-shadow: 0 0 0 200vmax rgb(0 0 0 / .3), 0 0 0 2px color-mix(in srgb, var(--accent, var(--phosphor)) 60%, transparent), 0 0 26px 3px color-mix(in srgb, var(--accent, var(--phosphor)) 30%, transparent); }
+@keyframes hint-spot-in { from { opacity: 0; transform: scale(1.06); } }
+@media (prefers-reduced-motion: reduce) { .hint-spot { animation: none; transition: none; } }
+
+/* La fila de avisos dice con una flecha que se despliega: hacia abajo junto a «+N» cerrada, hacia
+   arriba en «Plegar» abierta. La flecha es la misma, girada, y va centrada con el texto. */
+#messages .sys-dots { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10 8 6l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
+#messages .sys-dots > .sys-more::after {
+  content: ''; display: inline-block; flex: none; width: 10px; height: 10px; background: currentColor;
+  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
+  transition: transform calc(180ms * var(--motion-scale)) ease;
+}
+#messages#messages .sys-dots:not(.open) > .sys-more:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
+#messages#messages .sys-dots:not(.open) > .sys-more::after { transform: rotate(180deg); opacity: .8; }
+#messages#messages .sys-dots:not(.open):hover > .sys-more::after { transform: rotate(180deg) translateY(-1px); opacity: 1; }
+/* «Plegar»: una tecla de 26 px, la palabra y su flecha en la misma línea media. */
+#messages#messages .sys-dots.open > .sys-more {
+  display: inline-block; height: 26px; margin-top: 4px; padding: 0 11px 0 13px; box-sizing: border-box; border-radius: 999px;
+  font: 500 12.5px/26px var(--read); letter-spacing: 0; text-transform: lowercase; white-space: nowrap; color: var(--text-2);
+  transition: background calc(150ms * var(--motion-scale)) ease, color calc(150ms * var(--motion-scale)) ease;
+}
+#messages#messages .sys-dots.open > .sys-more::first-letter { text-transform: uppercase; }
+#messages#messages .sys-dots.open > .sys-more::after { width: 11px; height: 11px; margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
+#messages#messages .sys-dots.open > .sys-more:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+#messages#messages .sys-dots.open > .sys-more:hover::after { transform: translateY(-1px); }
+@media (prefers-reduced-motion: reduce) { #messages .sys-dots > .sys-more::after { transition: none; } }
+
+/* Los avisos abiertos como una lista que se lee (2026-10-15): cada uno con su punto, la etiqueta
+   pequeña arriba y lo que dice debajo en letra de lectura; una línea fina entre uno y otro; la
+   memoria, las barras de límite y los comandos alineados a la izquierda como lo demás; lo repetido
+   seguido, una sola vez con «×N» (groupRepeats, app.js). */
+#messages#messages .sys-dots.open { gap: 0; width: min(92%, 600px); padding: 6px 6px 8px; border-radius: 18px; }
+#messages#messages .sys-dots.open > .system.folded {
+  display: block; padding: 11px 14px 12px 34px !important; border-radius: 12px !important;
+  font: 400 13.5px/1.5 var(--read) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important;
+  color: var(--text-2) !important;
+}
+#messages#messages .sys-dots.open > .system.folded + .system.folded:not(.repeat)::after { content: ''; position: absolute; left: 34px; right: 14px; top: 0; height: 1px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+#messages#messages .sys-dots.open > .system.folded:hover::after, #messages#messages .sys-dots.open > .system.folded:hover + .system.folded::after { opacity: 0; }
+#messages#messages .sys-dots.open > .system.folded::before { left: 14px; top: 16px; width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent); }
+#messages#messages .sys-dots.open > .system.folded.repeat { display: none !important; }
+/* La etiqueta: su propia línea, pequeña, en el tono del aviso. */
+#messages#messages .sys-dots.open > .system.folded > b:first-child {
+  display: block; width: fit-content; margin: 0 0 3px; font: 600 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--dot) 70%, var(--text-2));
+}
+#messages#messages .sys-dots.open > .system.folded:is([data-tone="info"], :not([data-tone])) > b:first-child { color: var(--text-3); }
+#messages#messages .sys-dots.open > .system.folded[data-times] > b:first-child::after { content: var(--times); margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); font-weight: 600; letter-spacing: .04em; }
+#messages#messages .sys-dots.open > .system.folded > b:not(:first-child) { font-weight: 600; color: var(--text); }
+/* La barra de un límite: bajo el texto, a la izquierda, fina. */
+#messages#messages .sys-dots.open > .system.folded .gauge { display: block; width: min(100%, 280px); height: 4px; margin: 9px 0 1px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
+#messages#messages .sys-dots.open > .system.folded .gauge .now { display: block; height: 100%; border-radius: inherit; background: var(--dot); }
+/* El comando de un módulo: un trozo de código, no una caja con borde. */
+#messages#messages .sys-dots.open > .system.folded .cmd { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 7px 0 0; padding: 3px 9px; border: 0 !important; box-shadow: none !important; outline: 0; border-radius: 7px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font: 400 12px/1.5 var(--mono); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
+/* La memoria: como los demás, a la izquierda; quién, en su píldora; la cuenta en voz baja. */
+#messages#messages .sys-dots.open > .system.folded.claim { display: block; width: auto; }
+#messages#messages .sys-dots.open > .system.folded.claim > .claim-head { font-size: 10px; }
+#messages#messages .sys-dots.open > .system.folded.claim > .claim-head .who { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--text)) 14%, transparent); color: color-mix(in srgb, var(--agent, var(--text)) 80%, var(--text)); letter-spacing: .06em; }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-body { display: block; font-size: 13.5px; color: var(--text-2); }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-note { display: block; margin-top: 2px; font: 400 12px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-acts { justify-content: flex-start; }
+#messages#messages .sys-dots.open > .sys-more { justify-self: center; margin-top: 8px; }
+#messages#messages .sys-dots.open > .system.folded.claim > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left !important; justify-self: start !important; }
+/* La cabecera en una sola línea (2026-10-15): lo primero que cede es la pregunta citada (se corta
+   con «…»), luego modelo, esfuerzo y las demás insignias; el nombre y lo cobrado no se cortan. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { flex-wrap: nowrap; border-radius: 14px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .spent { flex: none; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) { flex: none; }
+/* Solo lo que es una frase (de dónde viene una orden, «orden 1 de 1 · …») puede cortarse. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge:not(.model, .mode, .ash) { flex: 0 1 auto; min-width: 60px; }
+/* Con el chat angosto se callan primero los que se pueden leer en otro lado: el esfuerzo (lo dice
+   el sello de tu mensaje) y, más angosto, el ahorro de tokens (lo dice la caja de escribir). */
+#messages .thread-inner { container: thread / inline-size; }
+@container thread (max-width: 540px) { :root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.effort { display: none; } }
+@container thread (max-width: 430px) { :root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.ash { display: none; } }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply { flex: 1 1 0; min-width: 0; max-width: max-content; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply:empty { display: none; }
+/* El punto de un aviso solo (2026-10-15): más chico y casi transparente, para no ensuciar el
+   lienzo; vuelve a verse entero al pasar o al enfocarlo. La fila con «+N» se atenúa menos. */
+#messages#messages .sys-dots.single { padding: 3px; margin-block: 2px; border-color: transparent; background: color-mix(in srgb, var(--bg) 30%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .5; transition: opacity calc(180ms * var(--motion-scale)) ease, background calc(180ms * var(--motion-scale)) ease; }
+#messages#messages .sys-dots.single > .system.folded { width: 6px !important; height: 6px !important; box-shadow: none !important; }
+#messages#messages .sys-dots:not(.open):not(.single) { opacity: .8; transition: opacity calc(180ms * var(--motion-scale)) ease; }
+#messages#messages .sys-dots:not(.open):is(:hover, :focus-visible) { opacity: 1; background: color-mix(in srgb, var(--bg) 78%, transparent); }
+/* El contexto compartido no lleva etiqueta: empieza con palabras y sus @agentes van en la frase. */
+#messages#messages .sys-dots.open > .system.folded.handoff > b:first-child { display: inline; margin: 0; font: 600 13.5px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text); }
+
+/* Lo que queda detrás de la caja de escribir (2026-10-15): la conversación se desvanece en los últimos
+   ~10 px antes del borde de la caja de escribir (--type-gap; más largo se veía como un resplandor) (--dock-h la mide app.js, measureDock) en vez de asomarse bajo modo · modelo y detrás
+   de la versión. El final de la conversación sigue subiendo por encima: el hilo ya deja ese aire. */
+:root:not(.via-phone) #messages.thread {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-gap, var(--dock-h, 0px)) - 10px), transparent calc(100% - var(--type-gap, var(--dock-h, 0px)) + 2px));
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-gap, var(--dock-h, 0px)) - 10px), transparent calc(100% - var(--type-gap, var(--dock-h, 0px)) + 2px));
+}
+/* La barra del proyecto junto a dos paneles (2026-10-15): angosta en una pantalla ancha. Por
+   debajo de 760 px «Primeros pasos» queda en su anillo y su cuenta (la frase sigue en su nombre y
+   su título) y las teclas se juntan, para que todo quepa sin pisar Inicio · Proyectos · Ajustes y
+   el nombre del proyecto no sea lo primero en irse. */
+@container roombar (max-width: 760px) {
+  .shell > .bar:not(.bar-home) { gap: 10px; }
+  #steps-pill .steps-label { display: none; }
+  #steps-pill { gap: 6px; padding-inline: 9px 11px; }
+  /* El nombre del proyecto se queda; el título de la conversación es el que se corta con «…». */
+  .shell > .bar:not(.bar-home) .project:not(.chat-here) { font-size: 11px; }
+  .shell > .bar:not(.bar-home) .project:not(.chat-here)::after { content: none; }
+}
+/* Cerrada, la salida de un /run no da su ancho a la píldora (2026-10-15): sus líneas largas (un
+   `cloc`, una tabla) la estiraban de lado a lado aunque no se vieran. Ocupa el ancho de la píldora
+   sin pedirlo; abierta, vuelve a medir lo suyo. */
+:root[data-term="pill"] #messages#messages .command-card.terminal:not(.open) .term-out { width: 0; min-width: 100%; }
+/* La esquina de quién hizo MADRE (public/attribution.js): un enlace a su autor, con aire bajo
+   modo · modelo · esfuerzo para no pegarse a su vidrio cuando el centro es angosto. */
+.shell > .colophon { margin-top: 8px; }
+.colophon-link { color: inherit; text-decoration: none; border-radius: inherit; }
+.colophon-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+.colophon-link:focus-visible { outline: 2px solid var(--accent, var(--phosphor)); outline-offset: 3px; }
+/* Lo que está fuera de la pantalla no se dibuja (2026-10-15): cada pieza de la conversación lleva
+   content-visibility:auto, así que el navegador no la mide ni la pinta hasta que se acerca, y
+   recuerda su alto una vez vista (contain-intrinsic-size: auto). Buscar con ⌘F, seleccionar y
+   saltar a una cita siguen funcionando. El margen de recorte deja ver las sombras y los anillos
+   que salen un poco de su caja. */
+#messages .thread-inner > :is(.row, .choice, .command-card, .system, .sys-dots) {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 140px;
+  overflow-clip-margin: 28px;
+}