/* omnius-console — one stylesheet, no framework.
 *
 * The screen is the canvas the owner approved on 2026-09-05 (design\gen.py):
 * a rail, the fleet as channels, the conversation, and a collapsible panel that
 * shows what the desk is doing right now. Dark is the default; light is the
 * same tokens re-valued. Phone first still applies: below 900px the columns
 * become views and the rail becomes a bottom bar.
 */

:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-soft: #11151f;
  --rail: #07090e;
  --card: #151a26;
  --card-hi: #1b2231;
  --sel: #1f2a40;
  --line: #232b3d;
  --hairline: #1a2030;
  --code: #0e121b;
  --own: #182238;
  --text: #e6ebf5;
  --muted: #8d98b0;
  --faint: #626d85;
  --accent: #6ea8ff;
  --accent-soft: #6ea8ff22;
  --on-accent: #0b0e14;
  --working: #ffb547;
  --working-soft: #ffb54722;
  --live: #4ade80;
  --idle: #566179;
  --mail-in: #a78bfa;
  --mail-out: #38bdf8;
  --commit: #4ade80;
  --danger: #ff6b6b;
  --skel-a: #1b2231;
  --skel-b: #28324a;
  --shadow: 0 10px 30px #00000066;
  --radius: 14px;
  --safe: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-soft: #eef1f7;
  --rail: #e9edf5;
  --card: #ffffff;
  --card-hi: #f2f4f9;
  --sel: #e3eaf8;
  --line: #e2e7f0;
  --hairline: #eceff5;
  --code: #f0f3f9;
  --own: #eaf0fb;
  --text: #131926;
  --muted: #5b667f;
  --faint: #8a94aa;
  --accent: #2f6fd6;
  --accent-soft: #2f6fd61a;
  --on-accent: #ffffff;
  --working: #c97a06;
  --working-soft: #c97a061a;
  --live: #16a34a;
  --idle: #9aa4b8;
  --mail-in: #7c5cd6;
  --mail-out: #0a8bbf;
  --commit: #16a34a;
  --danger: #d64545;
  --skel-a: #e6eaf2;
  --skel-b: #f4f6fa;
  --shadow: 0 10px 30px #1a233a14;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f7fb; --bg-soft: #eef1f7; --rail: #e9edf5; --card: #ffffff; --card-hi: #f2f4f9;
    --sel: #e3eaf8; --line: #e2e7f0; --hairline: #eceff5; --code: #f0f3f9; --own: #eaf0fb;
    --text: #131926; --muted: #5b667f; --faint: #8a94aa; --accent: #2f6fd6; --accent-soft: #2f6fd61a;
    --on-accent: #ffffff; --working: #c97a06; --working-soft: #c97a061a; --live: #16a34a; --idle: #9aa4b8;
    --mail-in: #7c5cd6; --mail-out: #0a8bbf; --commit: #16a34a; --danger: #d64545;
    --skel-a: #e6eaf2; --skel-b: #f4f6fa; --shadow: 0 10px 30px #1a233a14;
  }
}
/* the theme button shows the icon for the theme you would switch TO */
.only-light { display: none; }
.only-wide { display: inline-flex; }
:root[data-theme="light"] .only-dark { display: none; }
:root[data-theme="light"] .only-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .only-dark { display: none; }
  :root:not([data-theme="dark"]) .only-light { display: block; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 14.5px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body { overflow: hidden; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 15px; }
h2 { font-size: 15px; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sub { color: var(--muted); font-size: 12px; line-height: 1.3; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.min0 { min-width: 0; }
.grow { flex: 1; }
/* `.icon-btn` also sets `display`, and it is declared later — so a bare
   `.only-narrow` lost the tie and showed on desktop. Match the class it is
   used with, not just the marker. */
.only-narrow, .icon-btn.only-narrow { display: none; }

/* ---- the frame ------------------------------------------------------- */

:root { --panel-w: 340px; --channels-w: 248px; }
.app {
  height: 100dvh; display: grid;
  grid-template-columns: 66px var(--channels-w) minmax(0, 1fr) var(--panel-w);
  grid-template-areas: "rail channels chat panel";
}
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .chat, body.resizing .activity-panel, body.resizing .channels { pointer-events: none; }
/* A closed column is a zero-width track: the variable is overridden on body,
   which sits closer to .app than the root, so it wins without a second rule. */
body.panel-closed { --panel-w: 0px; }
body.panel-closed .activity-panel { display: none; }
body.channels-closed { --channels-w: 0px; }
body.channels-closed .channels { display: none; }
.page { display: none; }
body[data-view="fleet"] .app, body[data-view="activity"] .app, body[data-view="notes"] .app,
body[data-view="workflows"] .app { grid-template-areas: "rail page page page"; grid-template-columns: 66px 1fr 0 0; }
body[data-view="fleet"] .channels, body[data-view="fleet"] .chat, body[data-view="fleet"] .activity-panel,
body[data-view="activity"] .channels, body[data-view="activity"] .chat, body[data-view="activity"] .activity-panel,
body[data-view="notes"] .channels, body[data-view="notes"] .chat, body[data-view="notes"] .activity-panel,
body[data-view="workflows"] .channels, body[data-view="workflows"] .chat, body[data-view="workflows"] .activity-panel { display: none; }
body[data-view="fleet"] #view-fleet, body[data-view="activity"] #view-activity, body[data-view="notes"] #view-notes,
body[data-view="workflows"] #view-workflows { display: block; grid-area: page; }

.col-head {
  height: 58px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 16px; border-bottom: 1px solid var(--line);
}
/* The desk list's header carries the name and the search together, so the
   column has one bar rather than two stacked ones. */
.channels .col-head { gap: 12px; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; color: var(--faint);
}
.search:focus-within { border-color: var(--accent); }
.search svg { width: 15px; height: 15px; flex: none; }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; outline: none; padding: 0;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { width: 22px; height: 22px; border-radius: 6px; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.search .clear:hover { color: var(--text); background: var(--card-hi); }
.search .clear svg { width: 13px; height: 13px; }
.search .clear[hidden] { display: none; }
.no-match { padding: 18px 10px; color: var(--faint); font-size: 13px; text-align: center; }
.col-head h1, .col-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-head .min0 { flex: 1; }
.col-head .icon-btn { margin-left: auto; flex: none; }
.col-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-foot {
  flex: none; padding: 11px 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint); display: flex; justify-content: space-between; gap: 10px;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.icon-btn:hover { background: var(--card-hi); color: var(--text); }
/* "on" is said by the icon's colour alone — a filled square behind each panel
   toggle read as two permanent buttons in the header (owner, 2026-09-07). */
.icon-btn.on { color: var(--text); }

/* ---- rail ------------------------------------------------------------ */

.rail {
  grid-area: rail; background: var(--rail); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 16px;
}
/* The agent's face, or the house gradient until it has one. */
.mark {
  width: 34px; height: 34px; border-radius: 11px; margin-bottom: 14px; flex: none;
  background: conic-gradient(from 210deg, #6ea8ff, #a78bfa, #38bdf8, #6ea8ff);
  box-shadow: 0 0 0 1px #ffffff14, 0 6px 18px #6ea8ff30;
}
.mark.has-pic { background-size: cover; background-position: center; box-shadow: 0 0 0 1px #ffffff14; }
.rail-btn {
  position: relative; width: 42px; height: 42px; border-radius: 12px; color: var(--faint);
  display: flex; align-items: center; justify-content: center;
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover { color: var(--text); background: var(--card-hi); }
.rail-btn.on { color: var(--text); background: var(--sel); }
.rail-btn.on::before { content: ""; position: absolute; left: -12px; top: 10px; width: 3px; height: 22px; border-radius: 2px; background: var(--accent); }
.rail-btn .count {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--mail-in); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.rail-gap { flex: 1; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-hi); border: 1px solid var(--line); font-weight: 600; font-size: 13px;
}

/* ---- channels -------------------------------------------------------- */

.channels {
  grid-area: channels; background: var(--bg-soft); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.channels .col-head { padding-right: 8px; }
.channels .col-head .pill { min-width: 0; }
.channels .col-head .icon-btn { flex: none; width: 30px; height: 30px; }
.resizer.right { left: auto; right: -5px; }
.channel-list { flex: 1; overflow-y: auto; padding: 12px 12px 8px; }
/* Sentence-case categories, compact rows, no `#`: the assistant first with
 * its face, then the projects (owner, 2026-09-08). */
/* A category is not a bigger channel: it reads as a heading through weight,
 * a hairline above and the room its channels are given underneath - never
 * through size or capitals (owner, 2026-09-08: "una estética de lujo"). */
.cat { margin-top: 14px; }
.cat:first-child { margin-top: 0; }
.cat.top { padding-bottom: 2px; }
.cat.top .chan { height: 36px; }
.cat-head {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 4px 6px 5px; border-radius: 7px;
  color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-align: left;
}
.cat-head:hover { background: var(--card-hi); }
.cat-head svg { width: 11px; height: 11px; color: var(--faint); }
.cat-head .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-head .sum { font-size: 11px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.cat.folded .chan { display: none; }
.chan {
  width: 100%; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 6px; border-radius: 8px;
  color: var(--muted); text-align: left; font-size: 13.5px; font-weight: 400;
}
/* channels sit under their category: indented, nothing else - no lines
 * (owner, 2026-09-08: "too many lines, that is not clean and minimalistic") */
.cat:not(.top) .chan { margin-left: 12px; width: calc(100% - 12px); }
.chan:hover { background: var(--card-hi); color: var(--text); }
.chan.on { background: var(--sel); color: var(--text); font-weight: 500; }
.chan.unread { color: var(--text); font-weight: 600; }
.chan .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan .live-dot.none { background: transparent; }
.chan .avatar.face { width: 24px; height: 24px; font-size: 11px; margin-left: -2px; }
.chan .mark { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.chan .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mail-in); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); flex: none; }
.live-dot.working { background: var(--working); animation: breathe 1.6s ease-in-out infinite; }
.live-dot.live { background: var(--live); box-shadow: 0 0 8px var(--live); }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--working) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; flex: none;
  background: var(--card); border: 1px solid var(--line); font-size: 11px; color: var(--muted); white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.pill.ok .dot { background: var(--live); box-shadow: 0 0 8px var(--live); }
.pill.ok .label { color: var(--text); }
.pill.bad .dot { background: var(--danger); }

/* ---- chat ------------------------------------------------------------ */

.chat { grid-area: chat; position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.chat-head {
  height: 58px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 22px;
  border-bottom: 1px solid var(--line);
}
.chat-head .hash { width: 20px; height: 20px; color: var(--faint); }
.chat-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head h2 .where { color: var(--muted); font-weight: 500; }
.chat-head h2 .sep { color: var(--faint); font-weight: 400; margin: 0 6px; }
.fleet-warning {
  margin: 10px 12px -2px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, var(--danger) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
}
.fleet-warning[hidden] { display: none; }
.state-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; margin-left: 8px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; color: var(--idle);
}
.state-pill:empty { display: none; }
.state-pill.working { color: var(--working); background: var(--working-soft); }
.state-pill.live { color: var(--live); }
.state-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-pill.working::before { animation: breathe 1.6s ease-in-out infinite; }

.messages {
  list-style: none; margin: 0; padding: 12px 22px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 6px;
}
.messages .empty { color: var(--faint); padding: 20px 0; text-align: center; }
.load-older { display: flex; justify-content: center; padding: 6px 0 12px; }
.load-older button {
  font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
}
.load-older button:hover { color: var(--text); background: var(--card-hi); }
.load-older.done { color: var(--faint); font-size: 12px; padding-bottom: 14px; }
.to-bottom {
  position: absolute; right: 26px; bottom: 112px; z-index: 8; width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
}
.to-bottom[hidden] { display: none; }
.to-bottom:hover { background: var(--card-hi); }
.to-bottom .dot {
  position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--mail-in); border: 2px solid var(--bg);
}
.divider { display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.divider span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.msg { display: flex; gap: 14px; padding: 10px 0; }
.msg.fresh { animation: fadeup .25s ease-out both; }
.msg .av { width: 36px; height: 36px; border-radius: 12px; flex: none; }
.msg .av.omnius { background: conic-gradient(from 210deg, #6ea8ff, #a78bfa, #38bdf8, #6ea8ff); box-shadow: 0 0 0 1px #ffffff14; }
.msg .av.person { background: var(--card-hi); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 600; }
/* a chosen picture wins over the gradient, in both directions */
.msg .av.has-pic { background-size: cover; background-position: center; color: transparent; }
.msg .body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.msg .who { display: flex; align-items: baseline; gap: 8px; }
.msg .who .name { font-weight: 600; }
.msg .who .tag { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; color: var(--accent); background: var(--accent-soft); }
.msg .who .tag.via { color: var(--faint); background: transparent; border: 1px solid var(--line); }
.msg .who time { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.msg .text { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; }
.msg .text p { margin: 0 0 10px; }
.msg .text > :last-child { margin-bottom: 0; }
.msg .text code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; background: var(--code); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.msg .text .small { font-size: 12px; color: var(--faint); }
.msg .text .codeblock { margin: 6px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--code); overflow: hidden; }
.msg .text .codebar { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 5px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 60%, var(--code)); }
.msg .text .codebar .lang { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.msg .text .codebar .copy { font-size: 11.5px; color: var(--muted); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); }
.msg .text .codebar .copy:hover { color: var(--text); background: var(--card-hi); }
.msg .text .codebar .copy.done { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }
.msg .text pre { margin: 0; padding: 12px 14px; font: 12.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-x: auto; white-space: pre; color: var(--text); }
.msg .text pre code { background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.tok-comment { color: var(--faint); font-style: italic; }
.tok-string { color: #7ec699; }
.tok-number { color: #f0a36b; }
.tok-keyword { color: #c792ea; }
.tok-builtin { color: #6ea8ff; }
.tok-function { color: #82aaff; }
.tok-property { color: #89ddff; }
.tok-variable { color: #ffcb6b; }
.tok-flag { color: #ffcb6b; }
.tok-punct { color: var(--muted); }
:root[data-theme="light"] .tok-string { color: #2f8f4e; }
:root[data-theme="light"] .tok-number { color: #b45309; }
:root[data-theme="light"] .tok-keyword { color: #7c3aed; }
:root[data-theme="light"] .tok-builtin { color: #2f6fd6; }
:root[data-theme="light"] .tok-function { color: #1d4ed8; }
:root[data-theme="light"] .tok-property { color: #0e7490; }
:root[data-theme="light"] .tok-variable, :root[data-theme="light"] .tok-flag { color: #a16207; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tok-string { color: #2f8f4e; }
  :root:not([data-theme="dark"]) .tok-number { color: #b45309; }
  :root:not([data-theme="dark"]) .tok-keyword { color: #7c3aed; }
  :root:not([data-theme="dark"]) .tok-builtin { color: #2f6fd6; }
  :root:not([data-theme="dark"]) .tok-function { color: #1d4ed8; }
  :root:not([data-theme="dark"]) .tok-property { color: #0e7490; }
  :root:not([data-theme="dark"]) .tok-variable, :root:not([data-theme="dark"]) .tok-flag { color: #a16207; }
}
.msg .text .md-h { margin: 14px 0 6px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.msg .text > .md-h:first-child { margin-top: 2px; }
.msg .text .md-h1 { font-size: 18px; }
.msg .text .md-h2 { font-size: 16.5px; }
.msg .text .md-h3 { font-size: 15px; }
.msg .text .md-h4, .msg .text .md-h5, .msg .text .md-h6 { font-size: 14.5px; color: var(--muted); }
.msg .text ul, .msg .text ol { margin: 4px 0 10px; padding-left: 24px; }
.msg .text li { margin: 3px 0; }
.msg .text li ul, .msg .text li ol { margin: 3px 0 4px; }
.msg .text li > p { margin: 0; }
.msg .text li.task { list-style: none; margin-left: -20px; display: flex; gap: 8px; align-items: baseline; }
.msg .text li.task input { margin: 0; accent-color: var(--accent); flex: none; position: relative; top: 2px; }
.msg .text li.task.done > p { color: var(--muted); text-decoration: line-through; }
.msg .text blockquote { margin: 6px 0 10px; padding: 4px 14px; border-left: 3px solid var(--line); color: var(--muted); }
.msg .text blockquote p:last-child { margin-bottom: 0; }
.msg .text hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.msg .text a { color: var(--accent); text-decoration: none; }
.msg .text a:hover { text-decoration: underline; }
.msg .text .img-link { font-size: 13px; }
.msg .text s { color: var(--faint); }
.msg .text .table-wrap { overflow-x: auto; margin: 6px 0 12px; }
.msg .text table { border-collapse: collapse; font-size: 13px; min-width: 240px; }
.msg .text th, .msg .text td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; }
.msg .text th { background: var(--card); font-weight: 600; }
.msg .files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.msg .files .shot { display: block; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.msg .files .shot img { max-width: min(420px, 100%); max-height: 300px; object-fit: cover; display: block; }
.msg .files .shot:hover { border-color: var(--accent); }
.msg .files audio { height: 34px; max-width: 300px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 260px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px;
  font-size: 12.5px; color: var(--text);
}
.file-chip:hover { background: var(--card-hi); text-decoration: none; }
.file-chip svg { width: 15px; height: 15px; color: var(--muted); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip.missing { color: var(--faint); border-style: dashed; }
.msg.pending .text { color: var(--muted); }
.caret { display: inline-block; width: 2px; height: 15px; margin-left: 3px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(2) infinite; }

/* ---- the working line: one thin, quiet line above the box while a desk works */
.working-line {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 24px 0; font-size: 11.5px; color: var(--muted); min-width: 0;
}
.working-line[hidden] { display: none; }
.working-line .beam {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 50%, transparent 100%);
  background-size: 36% 100%; background-repeat: no-repeat; animation: beam 2.2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes beam { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.working-line .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--working); flex: none; animation: breathe 1.6s ease-in-out infinite; }
.working-line .who { font-weight: 600; color: var(--text); flex: none; }
.working-line .what {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--text) 50%, var(--muted) 65%, var(--muted) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
.working-line .for { margin-left: auto; flex: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .working-line .beam, .working-line .what, .working-line .pulse { animation: none; } .working-line .what { color: var(--muted); } }

/* One rounded row: + · what you are writing · mic · send. Nothing else. */
.composer { position: relative; flex: none; padding: 8px 22px 14px; }
.input-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
  display: flex; align-items: flex-end; gap: 4px; padding: 5px 5px 5px 6px; min-width: 0;
}
.input-wrap:focus-within { border-color: var(--accent); }
.composer textarea {
  flex: 1; min-width: 0; font: inherit; color: inherit; resize: none;
  min-height: 34px; max-height: 40dvh; background: none; border: 0; padding: 7px 4px;
}
.composer textarea:focus { outline: none; }
.composer textarea:disabled { opacity: .5; }
.round {
  width: 34px; height: 34px; flex: none; border-radius: 50%; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.round svg { width: 18px; height: 18px; }
.round:hover { background: var(--card-hi); color: var(--text); }
.round.recording { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.round.recording svg { animation: breathe 1.2s ease-in-out infinite; border-radius: 50%; }
.rec-time { align-self: center; font: 11.5px ui-monospace, Consolas, monospace; color: var(--danger); font-variant-numeric: tabular-nums; }

.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 260px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 6px 10px;
}
.chip svg { width: 16px; height: 16px; color: var(--muted); }
.chip img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.chip .n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .s { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip .x { width: 22px; height: 22px; border-radius: 6px; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; }
.chip .x:hover { color: var(--danger); background: var(--card-hi); }
.chip .x svg { width: 13px; height: 13px; }
.chip.busy { opacity: .6; }
.chip.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.chip audio { height: 30px; max-width: 190px; }

.drop-veil {
  position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 2px dashed var(--accent); border-radius: 14px;
  color: var(--accent); font-weight: 600; pointer-events: none;
}
.drop-veil[hidden] { display: none; }
.drop-veil div { display: flex; align-items: center; gap: 10px; }
.drop-veil svg { width: 22px; height: 22px; }

/* settings, from the avatar */
.settings-wrap { position: relative; }
.settings-menu {
  position: absolute; bottom: 0; left: 46px; z-index: 26; width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.settings-menu[hidden] { display: none; }
.settings-menu h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 8px 10px 4px;
}
.settings-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; color: var(--text); text-align: left;
}
.settings-menu button:hover { background: var(--card-hi); }
.settings-menu button svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.settings-menu button .tick { margin-left: auto; color: var(--accent); }
.settings-menu button .value { margin-left: auto; color: var(--muted); font-size: 12px; }
.settings-menu button .chev { width: 13px; height: 13px; color: var(--faint); margin-left: 2px; }
.settings-menu .head { display: flex; align-items: center; gap: 4px; padding: 2px 4px 6px; }
.settings-menu .head h3 { padding: 0; }
.settings-menu .back {
  width: 26px; height: 26px; padding: 0; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.settings-menu .back:hover { background: var(--card-hi); }
.settings-menu .back svg { width: 15px; height: 15px; }
.settings-menu button.danger { color: var(--danger); }
.settings-menu button.danger svg { color: var(--danger); }
.settings-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }

/* who the menu belongs to, at the top of it */
.settings-menu .who { display: flex; align-items: center; gap: 9px; padding: 8px 10px 6px; }
.settings-menu .who .n { display: flex; flex-direction: column; min-width: 0; }
.settings-menu .who .n strong { font-size: 13px; }
.settings-menu .who .n span { font-size: 11px; color: var(--faint); }

.steps-more { align-self: flex-start; margin-top: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--accent); background: var(--accent-soft); }

/* ---- which brain: model · effort under the composer -------------------- */

/* Model · effort: slim text above the box, top right, out of the way. The
 * "Enter para enviar" hint is gone with it - bottom space and a cleaner row
 * (owner, 2026-09-08). */
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 3px; min-height: 18px; }
/* left of the pickers: sending · sent + undo · an error · mail waiting */
.composer-top #chat-status { flex: 1; min-width: 0; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-top #chat-status.err { color: var(--danger); }
.composer-top #chat-status.ok { color: var(--live); }
.composer-top .undo { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: 11.5px; }
.composer-top .undo:hover { color: var(--text); }
.brain { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.brain .dot { color: var(--faint); font-size: 11px; }
.brain-pick { position: relative; }
.brain-btn {
  padding: 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--faint);
  background: none; border: 0;
}
.brain-btn:hover { color: var(--text); background: var(--card-hi); }
.brain-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: fadeup .12s ease-out;
}
.brain-menu h3 { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 10px 4px; margin: 0; }
.brain-menu .item { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--text); }
.brain-menu .item:hover { background: var(--card-hi); }
.brain-menu .item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.brain-menu .note { margin: 4px 10px 6px; font-size: 11px; color: var(--faint); line-height: 1.4; }
.brain .live-note { font-size: 11px; color: var(--working); margin-left: 4px; }

/* ---- waiting on you: a permission ask, top of the panel ---------------- */

.block.waiting h4 { color: var(--working); }
.ask {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 13px;
  border-radius: 12px; background: var(--working-soft); border: 1px solid color-mix(in srgb, var(--working) 45%, var(--line));
  animation: fadeup .2s ease-out;
}
.ask.stalled { background: var(--card); border-color: var(--line); }
.ask-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ask-top svg { width: 15px; height: 15px; color: var(--working); flex: none; }
.ask.stalled .ask-top svg { color: var(--faint); }
.ask-top .code { margin-left: auto; font: 11px ui-monospace, Consolas, monospace; color: var(--faint); }
.ask-detail {
  margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--code); border: 1px solid var(--line);
  font: 11.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 120px; overflow: auto;
}
.ask-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ask-row .m { margin-left: auto; font-size: 11px; color: var(--faint); }
.ask-row .pill-btn.allow { color: var(--live); }
.ask-row .pill-btn.allow:hover { border-color: var(--live); }
.ask.allow { border-color: var(--live); background: color-mix(in srgb, var(--live) 10%, var(--card)); }
.ask.deny { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--card)); }
.ask.gone { opacity: .5; }
.ask-note { margin: 0; font-size: 12px; color: var(--muted); }
.code-input { width: 110px; padding: 7px 10px; border-radius: 9px; font: 16px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .2em; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.code-input:focus { outline: none; border-color: var(--accent); }

/* ---- what it produced: the results strip in the panel ------------------ */

.produced { display: flex; flex-wrap: wrap; gap: 8px; }
.produced .made {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 92px;
  padding: 6px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--muted); text-align: left; transition: border-color .15s, transform .12s;
}
.produced .made:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.produced .made img { display: block; width: 100%; height: 56px; object-fit: cover; object-position: top; border-radius: 6px; background: #fff; }
.produced .made > svg { width: 22px; height: 56px; margin: 0 auto; color: var(--faint); }
.produced .made .n { font-size: 10.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no picture to show: one compact row, icon then name */
.produced .made.text, .produced .made.file, .produced .made.pdf, .produced .made.mail {
  flex-direction: row; align-items: center; width: auto; max-width: 100%; padding: 6px 10px 6px 8px;
}
.produced .made.text > svg, .produced .made.file > svg, .produced .made.pdf > svg, .produced .made.mail > svg {
  width: 14px; height: 14px; margin: 0; flex: none;
}
.produced .made.mail { flex-wrap: wrap; row-gap: 1px; }
.produced .made.mail > svg { color: var(--mail-out); }
.produced .made .sub { flex-basis: 100%; padding-left: 19px; font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produced .made:disabled { opacity: .7; cursor: default; }
/* one card per reply: caption, then a row per document with its formats */
.produced-head { display: flex; align-items: center; gap: 8px; }
.produced-head .all { margin-left: auto; font-size: 11.5px; color: var(--accent); }
.produced-head .all:hover { text-decoration: underline; }
.turn-card { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); }
.turn-card .cap { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 11px; color: var(--faint); }
.turn-card .cap .when { flex: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.turn-card .cap .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.turn-card .doc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.turn-card .doc .made { min-width: 0; flex: 0 1 auto; background: var(--card); }
.turn-card .doc .made .n { font-size: 12px; }
.turn-card .fmt { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.turn-card .fmt:hover { border-color: var(--accent); color: var(--text); }
details.shots > summary { cursor: pointer; font-size: 11.5px; color: var(--faint); list-style: none; }
details.shots > summary::before { content: "▸ "; }
details.shots[open] > summary::before { content: "▾ "; }
details.shots > .produced { margin-top: 8px; }
.reader-box.list .reader-head .search { flex: 1; max-width: 260px; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); }
.reader-box.list .reader-body { display: flex; flex-direction: column; gap: 8px; }
.reader-box.list h4.day { margin: 10px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* the reader */
.reader-box {
  display: flex; flex-direction: column; width: min(900px, 100%); height: min(760px, 92dvh);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  overflow: hidden; animation: pop .16s ease-out;
}
.reader-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.reader-head .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-head .pill-btn { text-decoration: none; font-size: 12px; padding: 6px 11px; }
.reader-head .close { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.reader-head .close:hover { background: var(--card-hi); color: var(--text); }
.reader-head .close svg { width: 16px; height: 16px; }
.reader-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; font-size: 14px; line-height: 1.6; }
.reader-body pre { margin: 0; font: 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }
/* a PDF fills the box; the browser's own viewer draws it */
.reader-box.pdf { width: min(1100px, 100%); }
.reader-box.pdf .reader-body { padding: 0; overflow: hidden; background: #525659; }
.reader-box.pdf iframe { display: block; width: 100%; height: 100%; border: 0; }
.reader-box.pdf.page .reader-body { background: #fff; }

/* ---- the settings dialog --------------------------------------------- */

.modal-back {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000 62%, transparent); padding: 4dvh 3vw;
  animation: fadein .14s ease-out;
}
.modal-back[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal {
  display: grid; grid-template-columns: 236px 1fr; width: min(1000px, 100%); height: min(720px, 92dvh);
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  overflow: hidden; animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }

.modal-nav {
  background: var(--bg-soft); border-right: 1px solid var(--line);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.modal-nav .finder {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.modal-nav .finder svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.modal-nav .finder input { flex: 1; min-width: 0; font-size: 13px; color: var(--text); background: none; border: 0; }
.modal-nav .finder input:focus { outline: none; }
.modal-nav h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 4px 10px 6px;
}
.modal-nav .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--muted); text-align: left;
}
.modal-nav .nav-item svg { width: 16px; height: 16px; flex: none; }
.modal-nav .nav-item:hover { background: var(--card-hi); color: var(--text); }
.modal-nav .nav-item.on { background: var(--card-hi); color: var(--text); font-weight: 600; }

.modal-body { position: relative; padding: 26px 30px 34px; overflow-y: auto; }
.modal-body > h2 { font-size: 19px; font-weight: 600; margin: 0 0 18px; }
.modal-body .close {
  position: absolute; top: 16px; right: 18px; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.modal-body .close:hover { background: var(--card-hi); color: var(--text); }
.modal-body .close svg { width: 17px; height: 17px; }
.modal-body .empty { color: var(--faint); font-size: 13.5px; padding: 18px 2px; }

.settings-list { display: flex; flex-direction: column; }
.setting {
  display: flex; align-items: flex-start; gap: 28px; padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.setting:last-child { border-bottom: 0; }
.setting[hidden] { display: none; }
.setting .s-text { flex: 1; min-width: 0; }
.setting .s-text h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.setting .s-text p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 62ch; }
.setting .s-ctl { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.setting .later { font-size: 12px; color: var(--faint); font-style: italic; }

/* Buttons carry an outline, never a filled box (owner, 2026-09-09: "clean,
   minimal and slim"); the fill appears only under the pointer. */
.pill-btn {
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: transparent; border: 1px solid var(--line); white-space: nowrap;
}
.pill-btn:hover { border-color: var(--accent); background: var(--card-hi); }
.pill-btn.danger { color: var(--danger); }
.pill-btn.danger:hover { border-color: var(--danger); }

.select {
  padding: 8px 12px; border-radius: 9px; font-size: 13px; color: var(--text);
  background: var(--card-hi); border: 1px solid var(--line); min-width: 160px;
}
.select:focus { outline: none; border-color: var(--accent); }

/* A choice is text with a line under the chosen one - no box, no fill
   (owner, 2026-09-08/09: "remove the bg surrounding the buttons"). */
.segment { display: inline-flex; gap: 4px; background: transparent; border: 0; border-radius: 0; padding: 0; }
.segment .seg {
  display: inline-block; padding: 4px 8px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); background: transparent; box-shadow: none;
}
.segment .seg:hover { color: var(--text); }
.segment .seg.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.segment .seg:disabled { color: var(--faint); cursor: default; }

.name-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.name-ctl .line { display: flex; gap: 7px; }
.name-ctl input {
  width: 190px; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line);
}
.name-ctl input:focus { outline: none; border-color: var(--accent); }
.name-ctl .save {
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
}
.name-ctl .save:disabled { color: var(--faint); background: var(--card-hi); cursor: default; }
.note { font-size: 11.5px; color: var(--muted); }
.note.err { color: var(--danger); }

/* ---- Estado: the light, the agents, the one button ---------------------- */
.avatar.me { position: relative; }
.avatar.me.alert::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--bg);
}
.setting.light h4 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.setting.light .lamp { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent); }
.setting.light.bad .lamp { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
.setting.light .problem { color: var(--text); margin-top: 6px; }
.agent-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.agent-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-width: 0; }
.agent-list li b { font-weight: 600; }
.agent-list li .st { color: var(--muted); font-size: 12px; }
.agent-list li .when { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.agent-list .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.agent-list .dot.working { background: var(--working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--working) 25%, transparent); }
.agent-list .dot.live { background: var(--live); }
.agent-list .dot.bad { background: var(--danger); }
.restart-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.restart-ctl .sure { font-size: 13px; color: var(--muted); }
.restart-ctl .note { font-size: 12px; color: var(--muted); }
.restart-ctl .note.err { color: var(--danger); }
.version-ctl .ver { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
/* This machine's own commits on top of the release: a fact, not the version. */
.version-ctl .ver .local { color: var(--muted); }
/* News, not a footnote: "there is a newer version" is the one thing on this
   row worth reading, so it is not grey like the rest (2026-09-09). */
.note.fresh { color: var(--accent); font-weight: 600; }

/* the doctor's report (2026-09-09). Monospace because it is aligned output,
   and its own line because it is the only thing in Ajustes that is meant to be
   READ rather than glanced at. It scrolls inside itself: a long path must not
   push the settings column off a phone. */
.doctor-ctl { flex-direction: column; align-items: flex-end; max-width: 460px; }
.doctor-report {
  width: 100%; margin: 6px 0 0; padding: 10px 12px; max-height: 320px;
  overflow: auto; text-align: left; border-radius: 8px;
  background: var(--sunken, rgba(127, 127, 127, .08));
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* WhatsApp card (2026-09-10): the one line that says the connection is not
   running has to read as a problem, and the button under it is the fix. */
.s-text .cap.err { color: var(--danger); margin: 8px 0 6px; font-size: 12.5px; }

/* plan usage (2026-09-09): thin bars, no box */
/* min-width but also a max and a wrap: an error printed raw here once pushed
   the row off the modal and squeezed the description to one word per line
   (2026-09-09). Nothing in this column may be unbreakable. */
.plan-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 240px; max-width: 340px; overflow-wrap: anywhere; }
.plan-ctl .note { text-align: right; white-space: normal; }
.plan-body { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.plan-line { display: flex; flex-direction: column; gap: 4px; }
.plan-head { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); }
.plan-head .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.plan-track { height: 4px; border-radius: 3px; background: var(--card-hi); overflow: hidden; }
.plan-track i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
.plan-track i.warm { background: var(--working); }
.plan-track i.hot { background: var(--danger); }
.plan-when { font-size: 11.5px; color: var(--faint); }
.link-btn { align-self: flex-end; padding: 2px 0; font-size: 12px; color: var(--accent); background: none; border: 0; }
.link-btn:hover { text-decoration: underline; }

/* ---- Notas: the daybook inside the console ------------------------------ */
/* Notas lives in one centred reading column (owner, 2026-09-08: "add at least
 * a container and tabs top left"): a card with its title and the same segmented
 * tabs Estado uses, the notes inside it. */
.page.notes { padding-top: 22px; }
.notes-frame { max-width: 820px; margin: 0 auto; padding: 18px 22px 26px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.notes-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.notes-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
/* the notes tabs are the same slim segment, nudged off the title */
#notes-tabs { margin-left: 6px; }
.notes-wrap { max-width: none; }
.quick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.quick textarea {
  width: 100%; min-height: 64px; font: inherit; color: inherit; resize: vertical;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.quick textarea:focus { outline: none; border-color: var(--accent); }
.quick .row { display: flex; align-items: center; gap: 10px; }
.quick .row .cap { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.quick .switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.quick .switch input { accent-color: var(--accent); }
.notes-section h3 { margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* A date is a quiet label, not a bar (owner, 2026-09-08: "remove the BG of
 * the dates separator ... nice clean UI"). Same voice as the section titles. */
.day-head { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#notes-body .note { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
#notes-body .note .tick { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--live); flex: none; }
#notes-body .note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); margin: 9px 5px 0; flex: none; }
#notes-body .note .n-body { flex: 1; min-width: 0; }
#notes-body .note .n-time { font: 11px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); }
#notes-body .note .n-text { font-size: 13.5px; line-height: 1.5; }
#notes-body .note .n-text p { margin: 0 0 4px; }
#notes-body .note .n-text img { max-width: 100%; border-radius: 8px; margin-top: 4px; }
#notes-body .note .n-text code { font-size: 12px; }
#notes-body .note.done .n-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
#notes-body .note .n-done { font-size: 11px; color: var(--live); }
#notes-body .note .n-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex: none; }
#notes-body .note:hover .n-acts, #notes-body .note:focus-within .n-acts { opacity: 1; }
#notes-body .note .n-acts button { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
#notes-body .note .n-acts button:hover { background: var(--card-hi); color: var(--text); }
#notes-body .note .n-acts button svg { width: 14px; height: 14px; }
#notes-body .note .n-acts .sure { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
#notes-body .note textarea.n-edit { width: 100%; min-height: 56px; font: inherit; color: inherit; background: var(--bg-soft); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 8px; resize: vertical; }
.archive-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.archive-bar .search { max-width: 320px; }
.archive-bar .search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; }
.archive-bar .search input:focus { outline: none; }
.write-box textarea { min-height: 220px; }
.write-box .tools { display: flex; gap: 6px; flex-wrap: wrap; }
.write-box .tools button { padding: 4px 9px; border-radius: 7px; font-size: 12px; color: var(--muted); background: var(--card-hi); border: 1px solid var(--line); }
.write-box .tools button:hover { color: var(--text); border-color: var(--accent); }
.msg .save-note { margin-left: auto; opacity: 0; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.msg:hover .save-note, .msg .save-note:focus { opacity: 1; }
.msg .save-note svg { width: 13px; height: 13px; }
.msg .save-note.saved { color: var(--live); opacity: 1; }

/* ---- Cuentas: the owner's list of people, and your own password --------- */
body.member #brain { display: none; }
.user-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.user-list li { border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); display: flex; flex-direction: column; }
.user-list li.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.u-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-align: left; color: var(--text); }
.u-head:hover { background: var(--card-hi); }
.u-head .chev { width: 14px; height: 14px; margin-left: auto; color: var(--faint); flex: none; transition: transform .15s; }
li.open .u-head .chev { transform: rotate(180deg); }
.u-panel { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; border-top: 1px solid var(--line); margin-top: 2px; }
.u-panel .cap { margin: 8px 0 0; font-size: 11.5px; color: var(--faint); }
.u-panel .name-ctl { align-items: flex-start; }
/* Ajustes → Proyectos: arrangeable cards, quiet inline names (2026-09-08) */
.pj-list li.dragging { opacity: .4; }
.pj-head { padding: 0 12px 0 10px; gap: 8px; }
.pj-head:hover { background: transparent; }
.pj-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 8px; text-align: left; color: var(--text); }
.pj-open:hover { background: var(--card-hi); }
.pj-open .chev { width: 14px; height: 14px; margin-left: auto; color: var(--faint); flex: none; transition: transform .15s; }
li.open .pj-open .chev { transform: rotate(180deg); }
.pj-head .grip, .pj-chan .grip { font: 12px/1 ui-monospace, monospace; letter-spacing: -2px; color: var(--faint); cursor: grab; flex: none; user-select: none; }
.pj-arrows { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.pj-arrows .arr { width: 24px; height: 22px; border-radius: 6px; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid transparent; }
.pj-arrows .arr:hover { background: var(--card-hi); color: var(--text); border-color: var(--line); }
.pj-head .chev { margin-left: 4px; }
.pj-panel { gap: 8px; }
.pj-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pj-cap { font-size: 12px; color: var(--muted); min-width: 120px; }
.qn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.qn input { width: 220px; max-width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.qn input:focus { outline: none; border-color: var(--accent); }
.qn input::placeholder { color: var(--faint); }
.qn-mark { font-size: 11.5px; color: var(--faint); min-width: 56px; }
.qn-mark.ok { color: var(--ok, #3fb950); }
.qn-mark.err { color: var(--danger); }
.pj-chans { display: flex; flex-direction: column; gap: 4px; }
.pj-chan { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; }
.pj-chan:hover { background: var(--card); border-color: var(--line); }
.pj-chan.dragging { opacity: .4; }
.pj-chan .p-id { min-width: 110px; font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--muted); }
.pj-form { max-width: 520px; gap: 12px; }
.pj-field { display: flex; flex-direction: column; gap: 4px; }
.pj-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pj-about { font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.pj-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pj-add input { width: 220px; max-width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.pj-add input:focus { outline: none; border-color: var(--accent); }
.pj-add .note { font-size: 12px; color: var(--muted); }
.pj-add .note.err { color: var(--danger); }
.user-list .u-head .note { margin-left: auto; font-size: 12px; color: var(--muted); }
.user-list .u-head .note.err { color: var(--danger); }
.u-who { display: flex; flex-direction: column; min-width: 0; }
.u-who b { font-size: 13.5px; }
.u-sub { font-size: 12px; color: var(--faint); }
.u-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.u-acts .sure { font-size: 12.5px; color: var(--muted); }
.u-grants { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the grant picker: a card per project, "all" or its channels as chips */
.grant-picker { display: flex; flex-direction: column; gap: 6px; }
.grant { padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.g-head { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.g-head input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.g-head .g-all { margin-left: auto; font-size: 11px; color: var(--faint); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip { display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.g-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.g-chip span { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); transition: all .12s; }
.g-chip:hover span { border-color: var(--accent); color: var(--text); }
.g-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.g-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.grant.whole .g-chips { opacity: .45; pointer-events: none; }
.grant.whole .g-chip span { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.u-note { font-size: 12px; color: var(--muted); }
.u-note .note.err, .add-user .note.err { color: var(--danger); }
.add-user { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 420px; }
.add-user input { padding: 8px 11px; border-radius: 9px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.add-user input:focus { outline: none; border-color: var(--accent); }
.add-user .cap { margin: 4px 0 0; font-size: 11.5px; color: var(--faint); }
.secret-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); border: 1px solid var(--accent); }
.secret-box .lead { margin: 0; font-size: 12.5px; color: var(--text); }
.secret-box .line { display: flex; align-items: center; gap: 10px; }
.secret-box code { font: 15px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; user-select: all; }
.invite { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); display: flex; flex-direction: column; gap: 6px; }
.invite-text { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 inherit; color: var(--text); user-select: all; }
.pw-ctl .line input { width: 150px; }
.pw-ctl .note.err { color: var(--danger); }

.avatar-ctl { display: flex; align-items: center; gap: 12px; }
.avatar.big { width: 48px; height: 48px; padding: 0; border-radius: 50%; overflow: hidden; font-size: 18px; }
.avatar.big:hover { border-color: var(--accent); }
.avatar.big.busy { opacity: .5; }
.avatar.has-pic { background-size: cover; background-position: center; color: transparent; }

@media (max-width: 899px) {
  .modal-back { padding: 0; }
  .modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .modal-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; align-items: center; }
  .modal-nav .finder, .modal-nav h3 { display: none; }
  .modal-nav .nav-item { white-space: nowrap; }
  .modal-body { padding: 20px 16px 40px; }
  .setting { flex-direction: column; gap: 12px; align-items: stretch; }
  .setting .s-ctl { justify-content: flex-start; }
  .name-ctl { align-items: flex-start; }
}

/* the bell */
.bell-wrap { position: relative; }
.bell-wrap .count {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--mail-in); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.alert-menu {
  position: absolute; top: 42px; right: 0; z-index: 25; width: min(340px, 86vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 60dvh; overflow-y: auto;
}
.alert-menu[hidden] { display: none; }
.alert-menu .empty { padding: 14px; text-align: center; color: var(--faint); font-size: 13px; }
.alert-menu .head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.alert-menu .head h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.alert-menu .head button { font-size: 11.5px; color: var(--accent); }
.alert-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; text-align: left; width: 100%; }
.alert-item:hover { background: var(--card-hi); }
/* The `background:` shorthand here reset the picture's size to auto, so a
 * real avatar showed its top-left corner - black (owner, 2026-09-08). Only
 * the letter fallback gets the gradient; a picture keeps `.avatar.has-pic`. */
.alert-item .av { width: 26px; height: 26px; border-radius: 9px; flex: none; font-size: 11px; }
.alert-item .av:not(.has-pic) { background: conic-gradient(from 210deg, #6ea8ff, #a78bfa, #38bdf8, #6ea8ff); border: 0; }
.alert-item .b { min-width: 0; flex: 1; }
.alert-item .t { display: flex; align-items: baseline; gap: 8px; }
.alert-item .t b { font-size: 13px; font-weight: 600; }
.alert-item .t time { font-size: 11px; color: var(--faint); margin-left: auto; }
.alert-item .p { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the system's own notices: a mark instead of a face, lit while unread */
.alert-menu .head.sys { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.alert-item.sys { opacity: .72; }
.alert-item.sys.fresh { opacity: 1; }
.alert-item.sys svg.av { padding: 5px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); }
.alert-item.sys.fresh svg.av { color: var(--accent); border-color: var(--accent); }
.alert-item.sys .p { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
div.alert-item.sys:hover { background: transparent; }
.composer .send {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.composer .send svg { stroke-width: 2; }
.composer .send:disabled { opacity: 0.45; cursor: default; }
.composer .send.stop { background: var(--danger); }
.composer .send.stop svg { stroke-width: 1.6; }
.composer .send.stop[hidden] { display: none; }

/* ---- activity panel -------------------------------------------------- */

.activity-panel {
  grid-area: panel; background: var(--bg-soft); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.resizer {
  position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3;
  touch-action: none;
}
.resizer::after {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s;
}
.resizer:hover::after, body.resizing .resizer::after { background: var(--accent); }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; }
/* a container, so a vignette can size itself from the panel's width: a page
   picture is as tall as a page at that width, a terminal is not (owner,
   2026-09-07 - "make the height bigger when previewing a browser") */
.block { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.block-head { display: flex; align-items: center; gap: 8px; }
.block-head svg { width: 16px; height: 16px; }
.block-head .t { font-weight: 600; font-size: 13.5px; }
.block-head .m { margin-left: auto; font: 11px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); font-variant-numeric: tabular-nums; }
.block .cap { font-size: 12px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.block h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.thought {
  padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-style: italic; overflow-wrap: anywhere;
}
.dots { display: flex; gap: 5px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mail-in); animation: bounce 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
.dots .l { margin-left: 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.step .b { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); }
.step .b svg { width: 12px; height: 12px; stroke-width: 2.2; color: var(--live); }
.step.failed .b svg { color: var(--danger); }
.step.now .b { background: var(--working-soft); border-color: var(--working); }
.step.now .b i { width: 8px; height: 8px; border-radius: 50%; background: var(--working); animation: breathe 1.6s ease-in-out infinite; }
.step .k { width: 15px; height: 15px; color: var(--muted); }
.step .t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .m { font: 11px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); font-variant-numeric: tabular-nums; }
.step.now .m { color: var(--working); }
.step.failed .m { color: var(--danger); }
.panel-empty { color: var(--faint); font-size: 13px; }

/* the sky (2026-09-08): a living map of what the desk touches this turn */
.sky { display: block; width: 100%; height: 230px; border-radius: 12px; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--card) 70%, var(--accent) 6%) 0%, var(--bg-soft) 75%); border: 1px solid var(--line); }
@media (max-width: 899px) { .sky { height: 170px; } }

/* the story (2026-09-08): one sentence, a few phases, the current one breathing */
.story { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.story-block .story::first-letter { text-transform: uppercase; }
.phases { display: flex; flex-direction: column; }
.phase { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.phase .b { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); }
.phase .b svg { width: 12px; height: 12px; stroke-width: 2.2; color: var(--live); }
.phase.failed .b svg { color: var(--danger); }
.phase.now .b { background: var(--working-soft); border-color: var(--working); box-shadow: 0 0 0 0 var(--working-soft); animation: ring 1.8s ease-out infinite; }
.phase.now .b i { width: 8px; height: 8px; border-radius: 50%; background: var(--working); animation: breathe 1.6s ease-in-out infinite; }
.phase .k { width: 15px; height: 15px; color: var(--muted); flex: none; }
.phase .t { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase.now .t { font-weight: 600; }
.phase .m { font: 11px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); font-variant-numeric: tabular-nums; }
.phase.now .m { color: var(--working); }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--working) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
/* the current scene is the hero while the desk works: bigger title, a quiet time bar */
.block.hero .block-head .t { font-size: 16px; }
.block.hero .block-head svg { width: 18px; height: 18px; color: var(--working); }
.tbar { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 30%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--working), transparent); animation: tbar 2.4s ease-in-out infinite; }
@keyframes tbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .phase.now .b, .tbar i { animation: none; } }

/* vignettes — what "doing X" looks like, looping so alive reads as alive */
.vig {
  position: relative; width: 100%; height: 140px; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.activity-panel .vig { background: var(--card); }
.skel { background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 40%, var(--skel-a) 80%); background-size: 240% 100%; animation: shimmer 1.8s linear infinite; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes progress { 0% { width: 8%; } 60% { width: 82%; } 100% { width: 96%; opacity: 0; } }
@keyframes scrollpage { 0%, 15% { transform: translateY(0); } 55%, 70% { transform: translateY(-58px); } 100% { transform: translateY(0); } }
@keyframes cursor { 0% { transform: translate(0,0); } 30% { transform: translate(60px,-22px); } 55% { transform: translate(90px,18px); } 80% { transform: translate(20px,30px); } 100% { transform: translate(0,0); } }
@keyframes typein { 0% { transform: scaleX(0); } 25%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes slidein { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { transform: scale(1.35); opacity: .55; } }
@keyframes bounce { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }
@keyframes typeout { from { width: 0; } to { width: 100%; } }

/* the real thing, when there is one: the picture, the PDF, the actual lines.
   Taller than the drawn vignettes because a photo at 140px is a thumbnail of
   a thumbnail (owner, 2026-09-07). */
.vig.v-image, .vig.v-pdf { height: calc(100cqw * .6 + 34px); max-height: 52dvh; display: flex; flex-direction: column; }
.v-image .shot, .v-pdf .sheet {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--skel-a) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.v-image .shot img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fadein .25s ease-out; }
.v-image .shot.gone::after { content: "…"; color: var(--faint); }
.v-pdf .sheet embed { width: 100%; height: 100%; border: 0; background: #fff; }
.vig .cap {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px; flex: none;
  border-top: 1px solid var(--line); background: var(--card);
  font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.vig .cap svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.vig .cap span { overflow: hidden; text-overflow: ellipsis; }
.vig .cap .sz { margin-left: auto; color: var(--faint); flex: none; }
/* real file content, wherever it is shown */
.vig code { font: 10px/1.55 ui-monospace, Consolas, monospace; color: var(--muted); white-space: pre; overflow: hidden; text-overflow: ellipsis; display: block; }
.v-read .doc.real { gap: 1px; animation: fadein .3s ease-out; }
.v-write .ln.real i { display: none; }
.v-write .ln.real code { flex: 1; min-width: 0; }
.v-browse .site { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); margin-bottom: 2px; }
.v-browse .site svg { width: 13px; height: 13px; color: var(--accent); }
/* a screenshot of the page, top-aligned so the header is what you see */
.vig.live-page { height: auto; display: flex; flex-direction: column; }
.v-browse .live { flex: none; position: relative; overflow: hidden; background: #fff; height: calc(100cqw * .62); max-height: 52dvh; }
.v-browse .live img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; animation: fadein .25s ease-out; }
.v-browse > .site {
  flex: none; margin: 0; padding: 7px 10px; border-top: 1px solid var(--line);
  background: var(--card); font-size: 10.5px; color: var(--muted);
}

.v-browse .bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.v-browse .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.v-browse .url { margin-left: 8px; flex: 1; height: 14px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); font: 9.5px/14px ui-monospace, Consolas, monospace; color: var(--muted); padding: 0 8px; overflow: hidden; white-space: nowrap; }
.v-browse .prog { position: absolute; top: 29px; left: 0; height: 2px; width: 40%; background: var(--accent); animation: progress 2.6s ease-in-out infinite; }
.v-browse .page { position: absolute; left: 12px; right: 12px; top: 42px; display: flex; flex-direction: column; gap: 8px; animation: scrollpage 5s ease-in-out infinite; }
.v-browse .row { display: flex; gap: 8px; margin-top: 4px; }
.v-browse .row .skel { flex: 1; height: 38px; border-radius: 6px; }
.v-browse .ptr { position: absolute; left: 120px; top: 70px; width: 14px; height: 14px; fill: var(--text); stroke: var(--bg); stroke-width: 1.5; animation: cursor 5s ease-in-out infinite; }

.v-mail { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.v-mail .to { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.v-mail .to svg { width: 16px; height: 16px; color: var(--mail-out); }
.v-mail .chip { font-size: 11px; color: var(--mail-out); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 16px; }
.v-mail .draft { margin-left: auto; font: 10.5px ui-monospace, Consolas, monospace; color: var(--faint); }
/* a real draft is as tall as the draft; the drawn one keeps the fixed 140px */
.vig.v-mail.real { height: auto; min-height: 140px; }
.v-mail .subject { flex: none; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-mail .lines.real { flex: none; gap: 1px; overflow: hidden; animation: fadein .3s ease-out; }
.v-mail .lines.real code { font-size: 11px; color: var(--muted); }
.v-mail .lines { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.v-mail .lines i { display: block; height: 7px; border-radius: 4px; background: var(--muted); opacity: .55; transform-origin: left; animation: typein 3.6s ease-out infinite both; }
.v-mail .lines i:first-child { background: var(--accent); opacity: .9; }
.v-mail .cur { position: absolute; right: 14px; bottom: 12px; width: 2px; height: 14px; background: var(--accent); animation: blink 1s steps(2) infinite; }

.v-slides { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 16px; }
.v-slides .deck { display: flex; gap: 10px; }
.v-slides .slide { width: 80px; height: 56px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 5px; animation: slidein 3.2s cubic-bezier(.2,.8,.2,1) infinite both; }
.v-slides .slide:nth-child(2) { animation-delay: .6s; }
.v-slides .slide:nth-child(3) { animation-delay: 1.2s; }
.v-slides .slide i { display: block; height: 4px; border-radius: 2px; background: var(--skel-b); }
.v-slides .slide i:first-child { height: 6px; background: var(--accent); width: 60%; }
.v-slides .slide i:last-child { margin-top: auto; height: 12px; border-radius: 3px; background: var(--skel-a); }
.v-slides .meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.v-slides .meta svg { width: 14px; height: 14px; }
.v-slides .track { margin-left: auto; height: 4px; width: 90px; border-radius: 2px; background: var(--skel-a); overflow: hidden; }
.v-slides .track i { display: block; height: 100%; width: 40%; background: var(--accent); animation: progress 2.6s ease-in-out infinite; }

.v-think { display: flex; align-items: center; gap: 16px; padding: 0 18px; }
.v-think .orb { position: relative; width: 56px; height: 56px; flex: none; }
.v-think .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, #6ea8ff, #a78bfa, #38bdf8, #6ea8ff); animation: spin 3s linear infinite; }
.v-think .hole { position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.v-think .glow { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle, #a78bfa88, transparent 70%); animation: glow 2.2s ease-in-out infinite; }
.v-think .lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.v-think .lines .skel { height: 8px; }
.v-think .lines .skel:nth-child(3) { animation-delay: .3s; width: 78%; }
.v-think .lines .skel:nth-child(4) { animation-delay: .6s; width: 60%; }

.v-write { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.v-write .tab { display: flex; align-items: center; gap: 8px; font: 10.5px ui-monospace, Consolas, monospace; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.v-write .tab svg { width: 14px; height: 14px; }
.v-write .ln { display: flex; gap: 10px; align-items: center; font: 10px ui-monospace, Consolas, monospace; color: var(--faint); }
.v-write .ln i { display: block; height: 7px; border-radius: 4px; background: var(--skel-b); transform-origin: left; animation: typein 4s ease-out infinite both; }
.v-write .ln:nth-child(2) i { width: 55%; background: var(--accent); opacity: .8; }
.v-write .ln:nth-child(3) i { width: 80%; animation-delay: .5s; }
.v-write .ln:nth-child(4) i { width: 65%; animation-delay: 1s; }
.v-write .ln:nth-child(5) i { width: 40%; animation-delay: 1.5s; }
.v-write .ln:nth-child(6) i { width: 72%; animation-delay: 2s; background: var(--live); opacity: .7; }

.v-run { padding: 12px 14px; font: 11px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--muted); display: flex; flex-direction: column; }
.v-run .cmd { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-run .cmd b { color: var(--accent); font-weight: 600; }
.v-run .out { white-space: nowrap; overflow: hidden; width: 0; animation: typeout 2.4s steps(30) infinite both; }
.v-run .out:nth-child(3) { animation-delay: .6s; }
.v-run .out:nth-child(4) { animation-delay: 1.2s; }
.v-run .cur { display: inline-block; width: 7px; height: 12px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2) infinite; }

/* A column, so a real file's name can sit under its first lines rather than
   beside them; the drawn version has only one child and is unaffected. */
.v-read { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.v-read .doc { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; }
/* the sweeping magnifier is a stand-in for content we could not read; with the
   real lines on screen it only gets in their way */
.v-read .doc.real ~ .lens { display: none; }
.v-read .cap { margin: 0 -14px -12px; }
.v-read .doc .skel { height: 7px; }
.v-read .doc .skel:nth-child(odd) { width: 92%; }
.v-read .doc .skel:nth-child(even) { width: 76%; }
.v-read .doc .skel:nth-child(3n) { width: 58%; }
.v-read .lens { position: absolute; left: 30px; top: 22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); animation: cursor 6s ease-in-out infinite; }

.v-idle { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12.5px; }
.v-idle .orb { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 210deg, #6ea8ff, #a78bfa, #38bdf8, #6ea8ff); opacity: .35; margin-right: 12px; }

/* ---- fleet / activity pages (the admin grid) ---------------------------- */

.page { overflow-y: auto; padding: 0 24px 28px; }
.page-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; height: 58px; margin: 0 -24px 12px; padding: 0 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.page-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .seg, .page-head .segs { margin-left: auto; }
.page-head .icon-btn[hidden] { display: none; }
.segs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.seg button { color: var(--muted); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.seg button.on { background: var(--card-hi); color: var(--text); }

.page.fleet { padding-top: 18px; }
.stats { display: grid; gap: 10px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* each counter is a filter: press to narrow, press again for everything */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; text-align: left; transition: border-color .15s, background .15s; }
.stat:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.stat.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.stat.on span { color: var(--text); }
.stat b { display: block; font-size: 22px; font-weight: 650; line-height: 1.15; }
.stat span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat.working b { color: var(--working); }
.stat.live b { color: var(--live); }
.stat.mail b { color: var(--mail-in); }
.banner { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 18%, var(--card)); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); font-size: 13px; }

.project { margin-bottom: 18px; }
.project-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.project-head h3 { font-size: 14px; }
.tag { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px; text-align: left; width: 100%; display: block; transition: border-color .15s, background .15s;
}
.card:hover { background: var(--card-hi); }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--idle); }
.card.working::before { background: var(--working); }
.card.live::before { background: var(--live); }
.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.card-top .name { font-weight: 600; font-size: 14.5px; }
.card-top .state { margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--idle); }
.card.working .state { color: var(--working); }
.card.live .state { color: var(--live); }
.card .doing { margin-top: 7px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .doing.quiet { color: var(--faint); }
.card .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: var(--faint); }
.card .badge { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--mail-in) 20%, transparent); color: var(--mail-in); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.empty { color: var(--faint); font-size: 13px; padding: 14px 2px; }

.feed { list-style: none; margin: 0; padding: 0; max-width: 1100px; }
.feed li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--hairline); }
.feed li[data-session] { cursor: pointer; }
.feed li[data-session]:hover { background: var(--card); }
.feed time { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.feed .what { min-width: 0; }
.feed .who { font-size: 11.5px; color: var(--muted); display: flex; gap: 7px; align-items: center; margin-bottom: 2px; flex-wrap: wrap; }
.feed .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; border-radius: 5px; padding: 1px 5px; border: 1px solid var(--line); color: var(--faint); }
.feed .kind.mail-in { color: var(--mail-in); }
.feed .kind.mail-out { color: var(--mail-out); }
.feed .kind.commit { color: var(--commit); }
.feed .text { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed .text.dim { color: var(--muted); }
.feed-scope { font-size: 12px; color: var(--muted); margin: -4px 2px 8px; }
.feed-scope button { color: var(--accent); padding: 0 0 0 6px; }

/* ---- workflows & cron ------------------------------------------------- */

/* the board (2026-09-09). Columns that scroll sideways rather than shrink:
   on a phone a seven-column grid squeezed to fit is seven unreadable slivers,
   and swiping is a gesture that already means "there is more this way". No
   boxes around the columns - the cards are the only thing with an edge. */
.board-top { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.board-top > h3 {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0; flex: 1;
}
.board-top select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 13px; }
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.bcol { min-width: 210px; max-width: 260px; flex: 0 0 auto; }
.bhead { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 8px; }
.bhead b { font-size: 12px; font-weight: 600; color: var(--text); }
.bhead .n { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bcards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.bcard:hover, .bcard:focus-visible { background: var(--card-hi); outline: none; }
.bcard.open { background: var(--card-hi); border-color: var(--accent); cursor: default; }
.bcard .bt { font-size: 13px; line-height: 1.35; color: var(--text); }
.bcard .bmeta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); }
.bcard .bwait { color: var(--faint); }
.bcard .bwarn { color: var(--working); }
.bcard .bsum, .bcard .bnote { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.bcard .bnote { color: var(--working); }
.bcard .bfiles { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--faint); overflow-wrap: anywhere; }
/* The card being worked on is the one fact on this board worth spotting from
   across the room, so it is the only one that is coloured. */
.bcard.s-running { border-left: 2px solid var(--working); }
.bcard.s-blocked { border-left: 2px solid var(--danger); }
.bcard.s-done .bt { color: var(--muted); }
.bmenu { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bmoves { display: flex; flex-wrap: wrap; gap: 6px; }
.bmenu .brow { display: flex; align-items: center; gap: 8px; }
.bmenu .brow .k { font-size: 11px; color: var(--muted); }
.bmenu select { flex: 1; min-width: 0; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 6px; font-size: 12px; }
.bform { display: flex; flex-direction: column; gap: 8px; margin: 0 2px 12px; max-width: 460px; }
.bform textarea { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }

.wf-section { margin-bottom: 26px; }
.wf-section > h3 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 2px 10px; }
.wf-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.wf-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 14px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.wf-card .top { display: flex; align-items: flex-start; gap: 10px; }
.wf-card .title { font-weight: 650; font-size: 14.5px; line-height: 1.35; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wf-card .id { font: 11px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; white-space: nowrap; color: var(--muted); flex: none; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.open { color: var(--working); background: var(--working-soft); }
.status.open::before { animation: breathe 1.6s ease-in-out infinite; }
.status.stalled { color: var(--danger); }
.status.done { color: var(--live); }
.status.closed, .status.exhausted { color: var(--faint); }
.status.paused { color: var(--faint); }

/* the node row: pills joined by arrows, in the order the work travelled */
.nodes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.node {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 11px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.3; min-width: 0;
}
.node .n { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 700; }
.node .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node.holder { border-color: var(--working); box-shadow: 0 0 0 3px var(--working-soft); }
.node.origin { border-color: var(--accent); }
.node.step { white-space: normal; }
.node.step .t { white-space: normal; }
.nodes .arrow { width: 16px; height: 16px; color: var(--faint); flex: none; }

.wf-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.wf-meta b { color: var(--text); font-weight: 500; }
.budget { height: 5px; border-radius: 3px; background: var(--skel-a); overflow: hidden; }
.budget i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.budget.hot i { background: var(--working); }
.hops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hops li { display: grid; grid-template-columns: 44px 16px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.hops time { font-variant-numeric: tabular-nums; color: var(--faint); font-size: 11.5px; }
.hops svg { width: 14px; height: 14px; color: var(--faint); }
.hops .reply svg { color: var(--mail-out); }
.hops .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hops .who b { color: var(--text); font-weight: 500; }
.wf-more { font-size: 11.5px; color: var(--faint); }
.hops li.wf-more { display: block; padding-left: 68px; }
.wf-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 720px; }
.wf-empty code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--code); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* a workflow card: what it does, as a row of steps */
.wf-card.clickable { cursor: pointer; transition: border-color .15s, transform .12s; }
.wf-card.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.wf-card.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.chip-step {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 5px 10px; border-radius: 9px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 12px; line-height: 1.3;
}
.chip-step svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.chip-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the diagram */
.wf-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.flow { display: flex; flex-direction: column; align-items: stretch; max-width: 640px; }
.flow .link {
  height: 22px; width: 2px; margin-left: 30px; flex: none;
  background: linear-gradient(var(--line), var(--accent));
}
.node {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-width: 0;
}
.node .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.node > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.node .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.node .b .k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.node .b .v { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.node.trigger { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.node.trigger .n, .node.end .n { background: none; }
.node.trigger > svg { color: var(--accent); }
.node.end { border-style: dashed; }
.node.end > svg { color: var(--live); }
.node.end .b .v { color: var(--muted); }

.wf-side { display: flex; flex-direction: column; gap: 12px; }
.wf-side h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.wf-side .spec { font: 600 14px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; margin-bottom: 10px; }
.wf-side .text { font-size: 13px; line-height: 1.55; color: var(--muted); }
.wf-side .text p { margin: 0 0 6px; }

@media (max-width: 899px) {
  .wf-detail { grid-template-columns: 1fr; }
}

.fires { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fire { font: 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 5px 9px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); font-variant-numeric: tabular-nums; }
.fire.first { border-color: var(--accent); color: var(--accent); }
.flag { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--faint); }
.flag.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* ---- lightbox: a picture, full size, without leaving the page ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: color-mix(in srgb, #000 82%, transparent); backdrop-filter: blur(4px);
  padding: 48px 64px calc(64px + var(--safe));
  animation: fadein .12s ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px;
  box-shadow: 0 24px 80px #000c; background: var(--card);
}
.lb-close, .lb-nav {
  position: absolute; width: 42px; height: 42px; border-radius: 12px; color: #fff;
  background: #ffffff1a; display: inline-flex; align-items: center; justify-content: center;
}
.lb-close:hover, .lb-nav:hover { background: #ffffff33; }
.lb-close { top: 14px; right: 16px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav.prev { left: 12px; }
.lb-nav.next { right: 12px; }
.lb-nav[hidden] { display: none; }
.lb-bar {
  position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe));
  display: flex; align-items: center; justify-content: center; gap: 16px;
  color: #ffffffcc; font-size: 12.5px;
}
.lb-bar a { color: #fff; text-decoration: none; border: 1px solid #ffffff40; border-radius: 999px; padding: 4px 12px; }
.lb-bar a:hover { background: #ffffff1a; }

@media (max-width: 899px) {
  .lightbox { padding: 44px 12px calc(56px + var(--safe)); }
  .lb-nav { width: 38px; height: 38px; }
}

/* ---- phones ---------------------------------------------------------- */

@media (max-width: 899px) {
  .only-narrow, .icon-btn.only-narrow { display: inline-flex; }
  /* `body.panel-closed .app` outranks a bare `.app`, so every desktop column
     rule is restated at the same specificity here. */
  .app, body.panel-closed .app, body.panel-open .app,
  body[data-view="fleet"] .app, body[data-view="activity"] .app, body[data-view="notes"] .app,
  body[data-view="workflows"] .app {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "main" "rail";
  }
  .rail {
    grid-area: rail; flex-direction: row; justify-content: space-around; padding: 6px 8px calc(6px + var(--safe));
    border-right: 0; border-top: 1px solid var(--line);
  }
  .mark, .rail-gap { display: none; }
  .settings-menu { bottom: 48px; left: auto; right: 8px; }
  .rail-btn.on::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .channels, .chat, .activity-panel, .page { grid-area: main; }
  .channels, .activity-panel { border: 0; }
  .resizer, .only-wide { display: none; }
  /* On a phone the desk list is a screen, not a column: never "closed". */
  body.channels-closed[data-view="channels"] .channels { display: flex; }
  body[data-view="chat"] .channels, body[data-view="chat"] .activity-panel { display: none; }
  body[data-view="channels"] .chat, body[data-view="channels"] .activity-panel { display: none; }
  body[data-view="channels"] .channels { display: flex; }
  /* `grid-area: page` names a column that does not exist in the phone
     template, so the browser invented one and pushed the whole page off the
     right edge. Every full-page view sits in `main` here. */
  body[data-view="fleet"] #view-fleet, body[data-view="activity"] #view-activity, body[data-view="notes"] #view-notes,
  body[data-view="workflows"] #view-workflows {
    display: block; grid-area: main;
  }
  .wf-grid { grid-template-columns: 1fr; }
  body.panel-open .activity-panel { display: flex; position: fixed; inset: 0 0 auto 0; height: calc(100dvh - 58px); z-index: 20; box-shadow: var(--shadow); }
  body.panel-closed .activity-panel { display: none; }
  .chat-head { padding-left: 10px; }
  .back-to-chat { position: absolute; top: 11px; right: 10px; z-index: 3; }
  .channels .col-head { padding-right: 52px; }
  /* Anchored to the button, this menu hangs off the left edge of a phone. */
  .alert-menu { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; }
  .messages, .composer { padding-left: 14px; padding-right: 14px; }
  .page { padding: 0 14px 20px; }
  .page-head { margin: 0 -14px 12px; padding: 0 14px; }
}

/* ---- Conectores y Capacidades (2026-09-09) -------------------------------
   Each card is a full-width row rather than the label/control pair the other
   sections use: what is being configured here is a list, not a switch. Slim
   and unboxed, like everything else — the only marks are a name, a dot and a
   word (owner: "clean, minimal and slim"). */
.setting .s-text h4 { display: flex; align-items: center; gap: 8px; }
.s-text h4 .c-mark { width: 15px; height: 15px; color: var(--muted); flex: none; }
.s-text h4 .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.s-text h4 .dot.live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.s-text h4 .dot.bad { background: var(--danger); }
.s-text h4 .st, .s-text h4 .soon { font-size: 11.5px; font-weight: 500; color: var(--faint); }
.s-text > .select { margin-top: 10px; max-width: 420px; width: 100%; }
.s-text > .note { display: block; margin-top: 6px; }

/* A credential: typed once, and a sentence from then on. Left-aligned,
   because it sits under the paragraph that explains it rather than in the
   control column. */
.key-ctl { align-items: flex-start; margin-top: 10px; max-width: 420px; }
.key-ctl .line { width: 100%; }
.key-ctl input { flex: 1; min-width: 0; width: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.key-ctl input:disabled { color: var(--faint); background: transparent; }
.key-ctl .link-btn { align-self: flex-start; }
.cap-key { margin-top: 4px; }
.cap-key .cap { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.s-text .add-user .segment { align-self: flex-start; }
.s-text .add-user .select { min-width: 0; width: 100%; }

/* "+ Add…" is an action line, not a fold: no chevron, no box, accent text,
   and the form replaces it when pressed (2026-09-09). */
.add-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 4px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: transparent; border: 0; border-radius: 8px; }
.add-line:hover { background: var(--card-hi); }
.add-line .plus { width: 15px; height: 15px; flex: none; }
.form-acts { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.form-acts .link-btn { align-self: center; padding: 6px 0; color: var(--muted); }
.form-acts .link-btn:hover { color: var(--text); }
/* And the rule that was missing: a hidden form is hidden, whatever its display. */
.add-user[hidden] { display: none; }

/* A secret you type is a secret you can mistype: every password, token and key
   field carries an eye (2026-09-09). The button sits INSIDE the field's border
   rather than beside it, so the row is still one control. */
.secret-field { position: relative; display: flex; align-items: center; width: 100%; }
.secret-field input { flex: 1; min-width: 0; padding-right: 38px; }
.secret-field .reveal {
  position: absolute; right: 4px; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint); background: transparent;
}
.secret-field .reveal:hover { color: var(--text); background: var(--card-hi); }
.secret-field .reveal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.secret-field .reveal[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}