/* 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.
 */

/* Palette "Grafito + señal" (owner, 2026-09-13; root assets\BRAND.md is the
   source). Black and white do the work: `--accent` IS the graphite/paper
   primary. `--signal` is the one orange, a spark only - never a surface and
   never a status. Status colours (working / live / danger) stay their own. */
:root {
  color-scheme: dark;
  --bg: #0f1114;
  --bg-soft: #131619;
  --rail: #0b0d10;
  --card: #181b20;
  --card-hi: #1f2329;
  --sel: #262b33;
  --line: #262a31;
  --hairline: #1c1f25;
  --code: #121418;
  --own: #1e2228;
  --text: #edeff2;
  --muted: #8a9099;
  --faint: #5f656e;
  --accent: #f4f5f7;
  --accent-soft: #f4f5f71f;
  --on-accent: #0f1114;
  --signal: #f2622e;
  --working: #e0a43a;
  --working-soft: #e0a43a22;
  --live: #3ccb7f;
  --idle: #4e545d;
  --mail-in: #a78bfa;
  --mail-out: #38bdf8;
  --commit: #3ccb7f;
  --danger: #f06a6a;
  --skel-a: #1f2329;
  --skel-b: #2a2f37;
  --shadow: 0 10px 30px #00000066;
  --radius: 14px;
  --safe: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf9;
  --bg-soft: #f3f3f1;
  --rail: #efefec;
  --card: #ffffff;
  --card-hi: #f4f4f2;
  --sel: #e9eaec;
  --line: #e7e8ea;
  --hairline: #efeff0;
  --code: #f3f3f1;
  --own: #f0f1f2;
  --text: #15181d;
  --muted: #666c75;
  --faint: #9197a0;
  --accent: #15181d;
  --accent-soft: #15181d14;
  --on-accent: #ffffff;
  --signal: #f2622e;
  --working: #c98a12;
  --working-soft: #c98a121a;
  --live: #1f9d55;
  --idle: #a3a8b0;
  --mail-in: #7c5cd6;
  --mail-out: #0a8bbf;
  --commit: #1f9d55;
  --danger: #d14343;
  --skel-a: #ededeb;
  --skel-b: #f7f7f6;
  --shadow: 0 10px 30px #15181d14;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fafaf9; --bg-soft: #f3f3f1; --rail: #efefec; --card: #ffffff; --card-hi: #f4f4f2;
    --sel: #e9eaec; --line: #e7e8ea; --hairline: #efeff0; --code: #f3f3f1; --own: #f0f1f2;
    --text: #15181d; --muted: #666c75; --faint: #9197a0; --accent: #15181d; --accent-soft: #15181d14;
    --on-accent: #ffffff; --signal: #f2622e; --working: #c98a12; --working-soft: #c98a121a; --live: #1f9d55;
    --idle: #a3a8b0; --mail-in: #7c5cd6; --mail-out: #0a8bbf; --commit: #1f9d55; --danger: #d14343;
    --skel-a: #ededeb; --skel-b: #f7f7f6; --shadow: 0 10px 30px #15181d14;
  }
}
/* 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;
  /* --col0..2: the conversations side by side (split, app.js paintWidths);
     the two beside the main one are 0 until opened. */
  grid-template-columns: 66px var(--channels-w) var(--col0, minmax(0, 1fr)) var(--col1, 0px) var(--col2, 0px) var(--panel-w);
  grid-template-areas: "rail channels chat beside1 beside2 panel";
}
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .chat, body.resizing .activity-panel, body.resizing .channels, body.resizing .beside iframe { 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; }
/* The canvas (2026-10-15) takes the right column over and widens it: a width
   of its own, so closing it gives the panel back as it was. */
:root { --canvas-w: min(46vw, 1100px); }
body.canvas-open, body.canvas-open.panel-closed { --panel-w: var(--canvas-w); }
body.canvas-open .activity-panel { display: flex; }
/* ...but keeps the windows' bar on top: every other window is one tap away. */
body.canvas-open .activity-panel > :not(.canvas):not(.resizer):not(.win-bar) { display: none !important; }
body.canvas-open .win-bar { padding-top: 10px; border-bottom: 1px solid var(--line); }
.page { display: none; }
body[data-view="fleet"] .app, body[data-view="activity"] .app, body[data-view="notes"] .app,
body[data-view="workflows"] .app, body[data-view="search"] .app,
body[data-view="help"] .app { grid-template-areas: "rail page page page page page"; grid-template-columns: 66px 1fr 0 0 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,
body[data-view="search"] .channels, body[data-view="search"] .chat, body[data-view="search"] .activity-panel,
body[data-view="help"] .channels, body[data-view="help"] .chat, body[data-view="help"] .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, body[data-view="search"] #view-search,
body[data-view="help"] #view-help { display: block; grid-area: page; }
/* Another Evernous: the desk list stays, the conversation and its panel give way. */
body[data-view="link"] .app { grid-template-areas: "rail channels page page page page"; grid-template-columns: 66px var(--channels-w) minmax(0, 1fr) 0 0 0; }
body[data-view="link"] .chat, body[data-view="link"] .activity-panel { display: none; }
/* The columns beside the conversation are the chat view's only. */
body:not([data-view="chat"]) .beside { display: none; }
body[data-view="link"] #view-link { display: flex; grid-area: page; }
.link-page { flex-direction: column; min-width: 0; height: 100dvh; }
.link-threads { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.link-thread { display: flex; flex-direction: column; gap: 9px; max-width: 760px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.link-thread:last-child { border-bottom: 0; }
.lt-head { display: flex; align-items: baseline; gap: 12px; }
.lt-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.lt-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lt-status.asked, .lt-status.draft { color: var(--working); }
.lt-status.done { color: var(--live); }
.lt-status.declined { color: var(--danger); }
.lt-line { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.lt-line .text { white-space: pre-wrap; }
.lt-line .who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.lt-line .who .name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.lt-line .who time { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ours and theirs, the chat's own way (owner, 2026-10-22; .msg.human): what
   this install sent sits a little in on a slightly lighter ground, what came
   back keeps its side. A line with nothing but who and when holds nothing. */
.lt-line.mine { margin-left: 28px; padding: 8px 12px 9px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
.lt-line.theirs { margin-right: 28px; }
.lt-line.mine.bare, .lt-line.theirs.bare { margin: 0; padding: 0; background: none; }
.lt-line.bare .who { margin: 0; }
.lt-hint { font-size: 12px; color: var(--muted); }
.lt-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-acts .pill-btn.allow { color: var(--live); }
.lt-acts .pill-btn.allow:hover { border-color: var(--live); }
.link-thread textarea, .link-thread input, .link-thread select, .link-composer textarea {
  padding: 8px 11px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--card-hi); border: 1px solid var(--line); }
.link-thread textarea { width: 100%; resize: vertical; }
.link-thread input { flex: 1; min-width: 160px; }
.link-thread textarea:focus, .link-thread input:focus, .link-thread select:focus, .link-composer textarea:focus { outline: none; border-color: var(--accent); }
.link-empty { color: var(--faint); font-size: 13.5px; }
.link-composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 24px 6px; border-top: 1px solid var(--line); }
.link-composer textarea { flex: 1; min-width: 0; resize: none; }
/* Files going with a request: their own row above the box (2026-10-17). */
.link-composer .attachments { flex: 1 1 100%; margin: 0; }
.link-composer .attachments[hidden] { display: none; }
.lt-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; white-space: normal; }
.lt-file small { color: var(--faint); font-size: 11px; white-space: nowrap; }
.lt-own { display: flex; flex-direction: column; gap: 9px; }
.lt-own[hidden] { display: none; }
.lt-take { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.link-thread .lt-take input { flex: none; min-width: 0; }
.link-sends { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.link-keyform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); }
.link-keyform[hidden] { display: none; }
.link-keyform input { padding: 8px 11px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); min-width: 0; }
.link-keyform input:focus { outline: none; border-color: var(--accent); }
.link-keyform .kf-name { flex: 1 1 220px; }
.link-keyform .secret-field { flex: 2 1 260px; }
.link-keyform .kf-note { flex: 1 1 100%; }
.link-keyform .lead { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.lt-key h3 { font-variant-numeric: tabular-nums; }
.link-note { min-height: 16px; margin: 0; padding: 0 24px 10px; font-size: 12px; color: var(--danger); }
.cat-head.static { cursor: default; }
.cat-head.static:hover { background: none; }
.invite-code { font-size: 20px; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.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;
  /* the official evernous "e" (2026-09-13): the app icon itself, so the rail
     and the home screen show the same mark */
  background: url("/icon.svg") center / cover no-repeat;
  box-shadow: none;
}
.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;
}
/* `hidden` means hidden, whatever `display` a rule gives the element. Without
   this, `.rail-btn { display: flex }` kept Equipo, Flujos and Notas on screen
   for a member the page had hidden them from (review, 2026-10-16). */
[hidden] { display: none !important; }
.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; }
/* The owner's pencil on a category: there when the pointer is, silent otherwise. */
.cat { position: relative; }
.cat-edit { position: absolute; top: 2px; right: 4px; width: 22px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 6px; background: none;
  color: var(--faint); opacity: 0; transition: opacity .12s ease; }
.cat-edit svg { width: 12px; height: 12px; }
.cat:hover .cat-edit, .cat-edit:focus-visible { opacity: 1; }
.cat-edit:hover { color: var(--text); background: var(--card); }
.cat:hover .cat-head .sum { visibility: hidden; }
@media (hover: none) { .cat-edit { opacity: .6; } .cat .cat-head .sum { margin-right: 24px; } }
.side-add { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 14px; padding: 5px 6px;
  border: 0; border-radius: 7px; background: none; color: var(--faint); font: inherit; font-size: 12.5px; text-align: left; }
.side-add svg { width: 11px; height: 11px; }
.side-add:hover { color: var(--text); background: var(--card-hi); }

/* Projects | Chats, on top like the Claude app's own switch (owner,
   2026-10-21). The side not shown gets a dot when something there answered. */
.side-switch { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line); }
.side-btn { position: relative; width: 28px; height: 26px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--faint); }
.side-btn svg { width: 15px; height: 15px; }
.side-btn:hover { color: var(--text); }
.side-btn.on { color: var(--text); background: var(--sel); }
.side-btn.news::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); }
/* The column at its usual width has room for the switch and the search, not
   for the name too: the name is the list's first row and the tab's title. */
.channels { container-type: inline-size; }
@container (max-width: 320px) { .channels .col-head h1:has(+ .side-switch:not([hidden])) { display: none; } }

/* Quick chats: one flat list, newest first, like any chat app's recents. */
.chat-new { color: var(--text); margin-bottom: 8px; }
.chat-new svg { width: 13px; height: 13px; margin: 0 -1px 0 1px; }
.cat.chats .chan { margin-left: 0; width: 100%; }
.cat.chats.folded .chat-row { display: none; }
.chat-row { position: relative; }
.chat-row .chan { padding-right: 30px; }
.chat-more { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 6px; color: var(--faint);
  opacity: 0; transition: opacity .12s ease; }
.chat-more svg { width: 16px; height: 16px; stroke-width: 3; }
.chat-row:hover .chat-more, .chat-row.open .chat-more, .chat-more:focus-visible { opacity: 1; }
.chat-more:hover { color: var(--text); background: var(--card); }
@media (hover: none) { .chat-more { opacity: .6; } }
.chat-menu { display: flex; flex-direction: column; margin: 2px 0 6px; padding: 4px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chat-menu .item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px;
  color: var(--muted); font-size: 13px; text-align: left; }
.chat-menu .item svg { width: 14px; height: 14px; }
.chat-menu .item:hover { background: var(--card-hi); color: var(--text); }
.chat-menu .item.danger:hover, .chat-menu .item.sure { color: var(--danger); }
.chat-rename { width: 100%; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.chat-rename:focus { outline: none; }
.chats-none { margin: 0; padding: 12px 8px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.messages .empty.chat-hello { display: flex; flex-direction: column; gap: 6px; padding-top: 16vh; }
.messages .chat-hello strong { color: var(--text); font-size: 20px; font-weight: 600; }
.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; }
/* Open in another column (split): on screen, but not where he is typing. */
.chan.beside { color: var(--text); box-shadow: inset 2px 0 0 var(--sel); }
.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); }
/* Waiting on its own timer (2026-09-30): the working colour as a ring - there,
   but not moving. */
/* Waiting shows a slow spinner (owner, 2026-10-04: "just perfect if we add a spinning icon"):
   a ring in the working colour with one brighter quarter that turns. Slower
   than anything that means "working", so the two never read the same. */
.live-dot.waiting, .chan .live-dot.waiting { background: transparent; box-shadow: none;
  border: 1.5px solid color-mix(in srgb, var(--working) 35%, transparent); border-top-color: var(--working);
  animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live-dot.waiting, .chan .live-dot.waiting,
  .state-pill.waiting::before, .working-line.waiting .pulse { animation: none; } }
@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);
}
/* The channel's name comes first: a narrow header (the panels beside it come
   and go - `tight` is set from its own width) keeps Invite's plus only. Not a
   container query: containment would trap the phone's fixed menus inside it. */
.chat-head.tight .invite-btn { width: 30px; padding: 0; justify-content: center; }

/* ---- split: conversations side by side (2026-10-26) -------------------- */
.beside { position: relative; display: flex; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
#beside-1 { grid-area: beside1; }
#beside-2 { grid-area: beside2; }
.beside[hidden] { display: none; }
.beside-frame { flex: 1; display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* Where the next desk clicked in the list goes: the column he works in keeps
   its name bright, the others' fade (a line on top was too loud - owner,
   2026-10-26). The columns beside get it by message (`col-idle`). */
body.split .chat:not(.active-col) .chat-head h2, body.pane.col-idle .chat-head h2 { color: var(--muted); font-weight: 500; }
/* A chat as narrow as a phone (`slim`, from its own width): the phone's
   header and margins - the channel's name first, the icons keep their size. */
.chat.slim .chat-head { gap: 2px; padding: 0 8px 0 10px; }
.chat.slim .chat-head .state-pill { margin-left: 4px; }
.chat.slim .chat-head .icon-btn, .chat.slim .chat-head .bell-wrap, .chat.slim .chat-head .people-wrap { flex: none; }
.chat.slim .chat-head h2 { flex: 0 1 auto; min-width: 64px; }
.chat.slim .chat-head h2 .where, .chat.slim .chat-head h2 .sep { display: none; }
.chat.slim .chat-head .state-pill { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.slim .people-faces .avatar, .chat.slim .people-faces .more, .chat.slim .invite-btn { display: none; }
.chat.slim .people-faces .pf-icon { display: block; }
.chat.slim .messages, .chat.slim .composer { padding-left: 14px; padding-right: 14px; }
.chat.slim .msg.human { margin-left: 16px; }
.chat.slim .msg.agent { margin-right: 8px; }
.icon-btn.col-close { display: none; }
body.split .chat .icon-btn.col-close, body.pane .icon-btn.col-close { display: inline-flex; }
/* An answer arrived in a column he is not working in. */
.chat-head.fresh h2::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); vertical-align: 2px;
}
/* Open beside: the menu a right click (or a long press) on a row opens. */
.ctx-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 170px; padding: 4px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ctx-menu .item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 7px;
  color: var(--muted); font-size: 13.5px; text-align: left; }
.ctx-menu .item svg { width: 15px; height: 15px; }
.ctx-menu .item:hover, .ctx-menu .item:focus-visible { background: var(--card-hi); color: var(--text); outline: none; }
/* A phone's open conversations, one tab each. */
.col-tabs { flex: none; display: flex; gap: 4px; padding: 6px 10px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.col-tabs::-webkit-scrollbar { display: none; }
.col-tabs[hidden] { display: none; }
.col-tab { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 46%; height: 34px;
  padding: 0 2px 0 12px; border-radius: 9px 9px 0 0; color: var(--muted); font-size: 13.5px; }
.col-tab .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-tab.on { background: var(--sel); color: var(--text); font-weight: 500; }
.col-tab.unread { color: var(--text); font-weight: 600; }
.col-tab .x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.col-tab .x svg { width: 13px; height: 13px; }
.chat-head.tight .invite-btn span { display: none; }
.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; }
.state-pill.waiting { color: var(--working); }
.state-pill.waiting::before { background: transparent; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  animation: spin 1.8s linear 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); }
/* find in this conversation (2026-09-10): a thin bar under the header, matches
   marked, everything else dimmed but present - context is why it is a chat. */
.find-bar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--hairline); background: var(--bg-soft); }
.find-bar[hidden] { display: none; }   /* `display: flex` above would otherwise beat the hidden attribute */
.find-bar input { flex: 1; min-width: 0; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
.find-bar .find-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 2.5em; text-align: center; }
.find-bar #find-prev svg { transform: rotate(180deg); }
.find-bar .link-btn { font-size: 12px; white-space: nowrap; }
mark.find-hit { background: color-mix(in srgb, var(--working) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.msg.find-now mark.find-hit { background: var(--working); color: var(--on-accent); }
.msg.find-dim { opacity: .35; }
.msg.find-now { opacity: 1; }
.msg { display: flex; gap: 14px; padding: 10px 0; }
/* Who is talking, at a glance (owner, 2026-09-22): a person's message sits a
   little in from the left on a slightly lighter ground (a touch of the text
   colour into the page, so it reads lighter in dark and softer in light); the
   agent's reply keeps its side and stops a little short of the right edge. */
.msg.human { margin: 6px 0 6px 28px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
.msg.agent { margin-right: 28px; }
.msg-foot { display: flex; gap: 4px; margin-top: -2px; }
/* Copy / Edit under his own message (2026-10-17): there when the pointer is,
   quiet otherwise; a touch screen has no hover, so it always shows there. */
.msg-foot.own { margin: 2px 0 -6px; }
@media (hover: hover) {
  .msg.human .msg-foot.own { opacity: 0; transition: opacity .15s; }
  .msg.human:hover .msg-foot.own, .msg.human:focus-within .msg-foot.own { opacity: 1; }
}
/* receipts (2026-10-13): what a reply claims, checked. A ✓ is quiet - it only
   confirms; a ⚠ is the one that should catch the eye. */
.receipts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--faint); }
.receipts .rc { display: inline-flex; align-items: baseline; gap: 4px; }
.receipts .rc b { font-weight: 600; }
.receipts .rc.ok b { color: var(--live); }
.receipts .rc.bad { color: var(--danger); }
/* rewind (2026-10-13): the confirm under a reply, in words, before anything is sent */
.rewind-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rewind-ask .q { flex: 1 1 260px; min-width: 0; line-height: 1.45; }
.copy-reply { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--faint); background: none; border: 0; }
.copy-reply svg { width: 14px; height: 14px; }
.copy-reply:hover { color: var(--text); background: var(--card-hi); }
.copy-reply.done { color: var(--live); }

/* The reply the next message answers: one line above the box (2026-09-23). */
.reply-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 4px 4px 4px 12px;
  border-left: 2px solid var(--accent); font-size: 12px; color: var(--muted); min-width: 0; }
.reply-bar[hidden] { display: none; }
.reply-bar > svg.k { width: 13px; height: 13px; color: var(--faint); flex: none; }
.reply-bar .who { white-space: nowrap; color: var(--text); font-weight: 500; }
.reply-bar .peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar .icon-btn { width: 24px; height: 24px; flex: none; }
.reply-bar .icon-btn svg { width: 12px; height: 12px; }
.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 .tag.routine { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); background: transparent; border: 1px solid var(--line); }
.msg .who .tag.routine svg { width: 10px; height: 10px; }
.msg .who .spoken { display: inline-flex; align-self: center; color: var(--faint); }
.msg .who .spoken svg { width: 14px; height: 14px; }
.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; }
/* a figure and its sign stay on one line: "9.680 €", "12 %" (markdown.js figures) */
.nobreak { white-space: nowrap; }
.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; }

/* A chart in a reply (static\chart.js, owner 2026-10-14). The colours are the
   dataviz palette's eight slots in its fixed order, validated against --card
   in both themes: dark passes every check; in light three slots sit under 3:1
   against white, so the tooltips and the table view always carry the values. */
.chart {
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
  --chart-other: #5f656e; --chart-axis-line: #3a3f47; --chart-wash: #ffffff0b;
  position: relative; margin: 6px 0 12px; padding: 14px 16px 12px; max-width: 760px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
:root[data-theme="light"] .chart {
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #6250d6; --chart-8: #e34948;
  --chart-other: #9197a0; --chart-axis-line: #c9ccd1; --chart-wash: #15181d0a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chart {
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
    --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #6250d6; --chart-8: #e34948;
    --chart-other: #9197a0; --chart-axis-line: #c9ccd1; --chart-wash: #15181d0a;
  }
}
.chart-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.chart-names { flex: 1; min-width: 0; }
.chart-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.chart-sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.chart-views { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--card-hi); }
.chart-views[hidden] { display: none; }
.chart-view { width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; }
.chart-view svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
.chart-view:hover { color: var(--text); }
.chart-view.on { color: var(--text); background: var(--card); box-shadow: 0 1px 2px #0000002e; }
.chart-plot { position: relative; outline: none; border-radius: 8px; }
.chart-plot[hidden] { display: none; }
.chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
/* Not an icon: the page's `svg` rule (18 px, stroked) must not reach a chart.
   Its size is set by chart.js; each mark names its own fill or stroke. */
.chart-svg { display: block; overflow: visible; fill: none; stroke: none; stroke-width: 1; }
.chart-svg text { font-size: 11.5px; font-family: inherit; }
.chart-axis { fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-svg .chart-total { fill: var(--text); font-size: 19px; font-weight: 650; }
line.chart-line { stroke: var(--line); stroke-width: 1; }   /* a grid line; a line chart's figure is .chart-line too */
.chart-base, .chart-hair { stroke: var(--chart-axis-line); stroke-width: 1; }
.chart-wash { fill: var(--chart-wash); }
.chart-hit { fill: transparent; }
.chart-stroke { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* the fill under a line - only the path: an area chart's FIGURE is
   `chart chart-area` too, and the 12 % used to fade its every label (2026-10-17) */
path.chart-area { fill-opacity: .12; }
.chart-dot { stroke: var(--card); stroke-width: 2; }
.chart-slice { stroke: var(--card); stroke-width: 2; stroke-linejoin: round; transition: transform .15s ease; }
.chart-slice.chart-hot { filter: brightness(1.1); }
.fill-0 { fill: var(--chart-1); } .fill-1 { fill: var(--chart-2); } .fill-2 { fill: var(--chart-3); } .fill-3 { fill: var(--chart-4); }
.fill-4 { fill: var(--chart-5); } .fill-5 { fill: var(--chart-6); } .fill-6 { fill: var(--chart-7); } .fill-7 { fill: var(--chart-8); }
.fill-other { fill: var(--chart-other); }
.stroke-0 { stroke: var(--chart-1); } .stroke-1 { stroke: var(--chart-2); } .stroke-2 { stroke: var(--chart-3); } .stroke-3 { stroke: var(--chart-4); }
.stroke-4 { stroke: var(--chart-5); } .stroke-5 { stroke: var(--chart-6); } .stroke-6 { stroke: var(--chart-7); } .stroke-7 { stroke: var(--chart-8); }
.chart-key { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--chart-other); }
.chart-key.line { width: 12px; height: 2px; border-radius: 1px; }
.key-0 { background: var(--chart-1); } .key-1 { background: var(--chart-2); } .key-2 { background: var(--chart-3); } .key-3 { background: var(--chart-4); }
.key-4 { background: var(--chart-5); } .key-5 { background: var(--chart-6); } .key-6 { background: var(--chart-7); } .key-7 { background: var(--chart-8); }
.chart-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 120px; max-width: 280px; padding: 8px 11px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--card-hi); box-shadow: var(--shadow); font-size: 12px; }
.chart-tip[hidden] { display: none; }
.chart-tip-head { margin-bottom: 3px; color: var(--muted); overflow-wrap: anywhere; }
.chart-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.65; }
.chart-tip-row b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip-row span { color: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12.5px; }
.chart-legend[hidden] { display: none; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none;
  font: inherit; color: var(--muted); }
button.chart-legend-item { cursor: pointer; }
button.chart-legend-item:hover span { color: var(--text); }
.chart-legend-item.off { opacity: .45; }
.chart-legend-item.off span { text-decoration: line-through; }
.chart-legend-item b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.chart .chart-table.table-wrap { margin: 0; }
.chart-table[hidden] { display: none; }
.chart th.num, .chart td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* A diagram in a reply (static\diagram.js, 2026-10-14): boxes and arrows in
   the page's own greys; pointing at a box lights it and what it connects to
   in the one orange (--signal) and fades the rest. */
.diagram { position: relative; margin: 6px 0 12px; padding: 14px 16px 12px; max-width: 760px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.diagram-plot { overflow-x: auto; overscroll-behavior-x: contain; }
.diagram-plot[hidden] { display: none; }
.diagram-svg { display: block; margin: 0 auto; overflow: visible; fill: none; stroke: none; stroke-width: 1; }
.diagram-svg text { font-family: inherit; }
.dg-shape { fill: var(--card-hi); stroke: var(--idle); stroke-width: 1.25; }
.dg-rim { fill: none; }
.dg-label { fill: var(--text); font-size: 12.5px; }
.dg-line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.dg-edge.dotted .dg-line { stroke-dasharray: 4 4; }
.dg-edge.thick .dg-line { stroke-width: 2.6; }
.dg-head { fill: var(--muted); }
.dg-cross { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.dg-edge-label rect { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.dg-edge-text { fill: var(--muted); font-size: 11.5px; }
.dg-group rect { fill: color-mix(in srgb, var(--text) 3%, transparent); stroke: var(--line); stroke-width: 1; }
.dg-group text { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.dg-node, .dg-edge, .dg-edge-label { transition: opacity .15s ease; }
.diagram-svg.dg-focus .dg-node:not(.dg-on), .diagram-svg.dg-focus .dg-edge:not(.dg-on),
.diagram-svg.dg-focus .dg-edge-label:not(.dg-on) { opacity: .28; }
.dg-node.dg-on .dg-shape { stroke: var(--signal); }
.dg-edge.dg-on .dg-line, .dg-edge.dg-on .dg-cross { stroke: var(--signal); }
.dg-edge.dg-on .dg-head { fill: var(--signal); }
.dg-node { cursor: default; }
.diagram-text { margin: 0; padding: 2px 0 2px 18px; font-size: 13px; line-height: 1.7; }
.diagram-text[hidden] { display: none; }
.diagram-text span { color: var(--muted); }
.diagram-full { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); }
.diagram-full-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--card); }
.diagram-full-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; }
.diagram-full-close:hover { color: var(--text); background: var(--card-hi); }
.diagram-full-stage { flex: 1; overflow: auto; display: grid; place-items: center; padding: 24px; }

/* The answers he is likely to give next, written by the desk itself with its
   reply (owner, 2026-10-14). One tap sends one - with the usual undo. */
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.choice { max-width: 100%; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; font-size: 13px; line-height: 1.35;
  text-align: left; cursor: pointer; }
.choice:hover { border-color: var(--accent); background: var(--card-hi); }
.choice:disabled { opacity: .5; cursor: default; }
.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); } }
/* Waiting on a timer: no sweep, no shimmer - one slow spinner. */
.working-line.waiting .beam { display: none; }
.working-line.waiting .pulse { background: transparent; box-sizing: border-box; width: 11px; height: 11px;
  border: 1.5px solid color-mix(in srgb, var(--working) 35%, transparent); border-top-color: var(--working);
  animation: spin 1.8s linear infinite; }
.working-line.waiting .what { animation: none; background: none; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .working-line.waiting .pulse { animation: none; } }
.working-line .work-toggle { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 6px;
  border: 0; border-radius: 6px; background: none; color: var(--faint); font: inherit; font-size: 11px; }
.working-line .work-toggle[hidden] { display: none; }
.working-line .work-toggle:hover, .working-line.open .work-toggle { color: var(--text); background: var(--card-hi); }
.working-line .work-toggle svg { width: 13px; height: 13px; }
.working-line .work-toggle .chev { width: 11px; height: 11px; transform: rotate(180deg); transition: transform .15s ease; }
.working-line.open .work-toggle .chev { transform: none; }

/* ---- the world view (2026-10-04): a WebGL canvas with HTML labels on top.
   The labels follow their objects (the engine moves them every frame); a
   bubble shows only while a desk works or waits, and only one short line. */
.world { position: relative; overflow: hidden; }
.world-canvas { display: block; touch-action: none; }
.world-labels { position: absolute; inset: 0; pointer-events: none; }
.w-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  gap: 2px; white-space: nowrap; will-change: transform; }
.w-name { font: 600 10.5px/1.2 ui-sans-serif, system-ui, sans-serif; color: rgba(225, 232, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.w-group .w-name { font-size: 12.5px; color: #fff; letter-spacing: .01em; }
.w-center .w-name { font-size: 13px; color: #ffe2b0; }
.w-line { font: 500 10.5px/1.3 ui-sans-serif, system-ui, sans-serif; color: #eaf0ff; padding: 2px 7px;
  border-radius: 7px; background: rgba(14, 20, 38, 0.82); border: 1px solid rgba(140, 160, 220, 0.28);
  order: -1; margin-bottom: 1px; }
.w-line:empty { display: none; }
.w-label[data-state="waiting"] .w-line { border-color: rgba(240, 168, 58, 0.55); color: #ffd9a0; }
.w-label[data-state="working"] .w-name { color: #fff; }
.w-label[data-state="idle"] .w-name { opacity: 0.55; }
.w-label.hover .w-name, .w-label.focus .w-name { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* the pixel places (office, orc camp): name plates, bubbles, room signs */
.w2d > div { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font: 600 10px/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.w2-plate { padding: 1px 5px; border-radius: 3px; color: #f4f6fb; background: rgba(18, 20, 28, 0.78); }
.w2-plate::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 1px;
  vertical-align: 1px; background: #7d8592; }
.w2-plate[data-state="working"]::before { background: #4ccf6e; }
.w2-plate[data-state="waiting"]::before { background: #f0a83a; }
.w2-plate[data-state="present"]::before { background: #5aa2f0; }
.w2-plate[data-state="idle"] { opacity: 0.72; }
.w2-plate.center { color: #ffe2a8; }
.w2-plate.hover, .w2-plate.focus { opacity: 1; outline: 1px solid rgba(255, 255, 255, 0.75); }
.w2-bubble { padding: 2px 6px; border-radius: 4px; color: #1d1a24; background: #fbfbf6; border: 1px solid #221c24;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.w2-bubble::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: -4px; width: 6px; height: 6px;
  background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); }
.w2-bubble[data-state="waiting"] { background: #fff2d8; }
/* a sign is a door: click it to fly into that room (or to that planet) */
.w2-room, .w-group { pointer-events: auto; cursor: pointer; }
.w2-room:hover { filter: brightness(1.12); }
.w-group:hover .w-name { text-decoration: underline; text-underline-offset: 3px; }
.w2-room { padding: 1px 6px; border-radius: 2px; color: #3b3029; background: #f3ead6; border: 1px solid #3b3029;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.skin-orcs .w2-plate { color: #f2d48a; background: rgba(40, 22, 12, 0.85); border: 1px solid #6a4426; }
.skin-orcs .w2-plate.center { color: #ffcf5a; }
.skin-orcs .w2-bubble { background: #f1e2b8; border-color: #4a2e16; color: #2b1a0c; }
.skin-orcs .w2-bubble[data-state="waiting"] { background: #f6d9a6; }
.skin-orcs .w2-room { color: #f2d48a; background: #5a3a1e; border-color: #2b1a0c; }
.skin-grimdark .w2-plate { color: #e8d9b0; background: rgba(22, 12, 14, 0.86); border: 1px solid #6a1416; }
.skin-grimdark .w2-plate.center { color: #f0d27a; }
.skin-grimdark .w2-bubble { background: #e8dcc0; border-color: #3a1a12; color: #1d120c; }
.skin-grimdark .w2-bubble[data-state="waiting"] { background: #f0d6a6; }
.skin-grimdark .w2-room { color: #f0d27a; background: #4a0c0e; border-color: #1d0a0a; }
.skin-library .w2-plate { color: #f4ecd8; background: rgba(30, 22, 16, 0.84); border: 1px solid #6b4a2e; }
.skin-library .w2-plate.center { color: #f0d27a; }
.skin-library .w2-bubble { background: #f4ecd8; border-color: #4a3020; color: #2a1e14; }
.skin-library .w2-bubble[data-state="waiting"] { background: #e8f0e0; }
.skin-library .w2-room { color: #f4ecd8; background: #2f5a3a; border-color: #1a1410; }
.panel-world .w2-bubble { max-width: 200px; }
.panel-world[hidden] { display: none; }
/* big and nearly square (owner, 2026-10-04: "bigger (more height) and more like a square") */
.world-box { height: min(80vh, 900px); width: min(100%, calc(min(80vh, 900px) * 1.3)); border-radius: 14px;
  border: 1px solid var(--line); background: #05070e; }
.world-expand { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(12, 14, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); }
.world-expand:hover { background: rgba(12, 14, 22, 0.85); }
.world-expand svg { width: 15px; height: 15px; }
.world-modal-box { display: flex; flex-direction: column; width: min(1500px, 100%); height: min(960px, 92dvh);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  overflow: hidden; animation: pop .16s ease-out; }
.world-modal-box .world-box { flex: 1; min-height: 0; width: auto; height: auto; border: 0; border-radius: 0; }
.panel-world { flex: none; height: 280px; margin: 0 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: #05070e; }
.panel-world .w-line { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.panel-world .w-label:not(.focus):not(.w-center) .w-line { display: none; }
@media (max-width: 899px) { .world-box { width: 100%; height: min(70vh, 100vw); border-radius: 10px; } }
/* A window the desk shows live (tools\live.py): the picture, its name, a dot. */
.panel-live { flex: none; margin: 0 14px 10px; }
.panel-live[hidden] { display: none; }
.live-shot { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #05070e; cursor: zoom-in; aspect-ratio: 16 / 10; }
.live-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.live-shot img:not([src]) { visibility: hidden; }
.live-cap { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.live-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); }
.live-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.live-tag.on::before { background: #e5484d; animation: live-blink 1.6s ease-in-out infinite; }
.live-tag.paused::before { background: #f5a524; }
.live-tag.off { color: var(--muted); }
@keyframes live-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-tag.on::before { animation: none; } }

/* ---- live work (owner, 2026-09-29): the desk's steps drawn as its terminal.
   One monospace column that scrolls by itself; nothing folds inside it. */
.term { font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text);
  background: var(--code); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  overflow: auto; overscroll-behavior: contain; min-width: 0; }
.term[hidden] { display: none; }
.live-term { flex: none; max-height: 38vh; margin: 8px 16px 0; }
.msg .term { max-height: 420px; margin-top: 2px; }
/* every class inside is t-prefixed: `.step`, `.note`… already mean other things here */
.term .t-ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .t-step { display: block; }
.term .t-step + .t-step { margin-top: 6px; }
.term .t-dot { color: var(--live); }
.term .k-failed .t-dot, .term .t-err { color: var(--danger); }
.term .k-say .t-dot { color: var(--text); }
.term .t-name { font-weight: 700; }
.term .t-arg { color: var(--muted); }
.term .t-out { color: var(--muted); }
.term .t-hook { color: var(--faint); }
.term .t-more, .term .t-think, .term .t-prompt, .term .t-note { color: var(--faint); }
.term .t-think { font-style: italic; }
.term .t-add { color: var(--live); }
.term .t-del { color: var(--danger); }
.term .k-sub { padding-left: 2ch; opacity: .85; }
.work-btn.on { color: var(--text); background: var(--card-hi); }
@media (max-width: 899px) { .live-term { max-height: 30vh; margin: 6px 10px 0; } .term { font-size: 11.5px; } }

/* 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; position: relative;
}
.input-wrap:focus-within { border-color: var(--accent); }
/* The / commands, as you type one (2026-11-03): above the box, like Claude Code's. */
.slash-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto;
  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;
}
.slash-menu[hidden] { display: none; }
.slash-menu .item { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 7px 10px;
  border-radius: 8px; font-size: 13px; color: var(--text); min-width: 0; }
.slash-menu .item.on, .slash-menu .item:hover { background: var(--card-hi); }
.slash-menu .name { font-weight: 600; white-space: nowrap; }
.slash-menu .about { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* A voice message, as text: the whole box says listening, sending, transcribing. */
.input-wrap:is([data-mic="listening"], [data-mic="sending"], [data-mic="hearing"]) { position: relative; border-color: var(--accent); }
.input-wrap:is([data-mic="listening"], [data-mic="sending"], [data-mic="hearing"]) textarea::placeholder { color: var(--text); opacity: 1; font-weight: 500; }
.input-wrap[data-mic="listening"] { animation: mic-glow 1.6s ease-in-out infinite; }
.input-wrap[data-mic="hearing"] { animation: mic-glow .7s ease-in-out infinite; }
.input-wrap:is([data-bar="early"], [data-bar="late"])::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 2px; height: 3px; border-radius: 2px;
  background: var(--accent); transform-origin: left; transform: scaleX(var(--mic-left, 1)); transition: transform .1s linear;
}
.input-wrap[data-bar="late"]::after { background: var(--working); background: color-mix(in srgb, var(--working) min(100%, calc(var(--mic-left, .5) * 200%)), var(--danger)); }
@keyframes mic-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
}
.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%; }
.round.recording.as-text, .round.hearing { color: var(--accent); background: var(--accent-soft); }
.round.hearing svg { animation: breathe .7s ease-in-out infinite; border-radius: 50%; }
/* Dictating (2026-10-27): the words go into the box, so it wears the accent, not the red of a recording. */
.round.dictating { color: var(--accent); background: var(--accent-soft); position: relative; }
.round.dictating svg { animation: breathe 1.2s ease-in-out infinite; border-radius: 50%; }
/* ...and the language it listens in, on its corner (2026-10-28). */
.round.dictating[data-lang]::after {
  content: attr(data-lang); position: absolute; top: -5px; right: -7px; padding: 0 3px; border-radius: 4px;
  font: 700 9px/13px system-ui, sans-serif; letter-spacing: .02em; color: var(--bg); background: var(--accent);
  pointer-events: none;
}
/* An answer being read aloud by this PC's voice (2026-10-27). */
.copy-reply.speak.on { color: var(--accent); }
.copy-reply.speak.on svg { animation: breathe 1.2s ease-in-out infinite; }
/* Settings -> Voice: ten voices, each with its two samples. */
.voice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin: 10px 0 4px; }
.voice-line { display: flex; align-items: center; gap: 6px; }
.voice-line .seg { min-width: 86px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12.5px; }
.voice-line .seg.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.voice-line .sample { font-size: 12px; padding: 3px 8px; }
.voice-line .sample.busy { color: var(--accent); }
/* The words dictation puts right (2026-10-28): each one a line of text with
   its remove, and two boxes to add one - no cards. */
.setting.fixes-row { flex-direction: column; gap: 6px; align-items: stretch; }
.setting.fixes-row .s-ctl { max-width: none; justify-content: flex-start; }
.setting.fixes-row .fixes { flex: 1 1 auto; min-width: 0; }
.fix-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0; font-size: 13px; }
.fix-list .fix { display: inline-flex; align-items: center; gap: 4px; }
.fix-list .heard { color: var(--muted); }
.fix-list .fix-x { width: 20px; height: 20px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; }
.fix-list .fix-x:hover { color: var(--danger); }
.fix-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fix-add input { flex: 1 1 140px; min-width: 0; padding: 7px 10px; border-radius: 9px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.fix-add input:focus { outline: none; border-color: var(--accent); }
.rec-time { align-self: center; font: 11.5px ui-monospace, Consolas, monospace; color: var(--danger); font-variant-numeric: tabular-nums; }
.rec-cancel { align-self: center; }

/* A delegation between desks: a line, never a message bubble (2026-09-18).
   The brief is one tap away; by default you see only that work left, to whom. */
.msg.hop { display: block; padding: 2px 0; }
.msg.hop .hop-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
  text-align: left; font-size: 12.5px; color: var(--muted); border-radius: 9px;
}
.msg.hop .hop-head:hover { background: var(--card-hi); color: var(--text); }
.msg.hop .hop-head svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.msg.hop.sent .hop-head svg { transform: rotate(-45deg); }
.msg.hop .who { font-weight: 600; color: var(--text); white-space: nowrap; }
.msg.hop time { color: var(--faint); font-variant-numeric: tabular-nums; }
.msg.hop .peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.hop.open .peek { display: none; }
.msg.hop .hop-body { margin: 2px 0 10px 16px; padding: 4px 0 0 14px; border-left: 2px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.msg.hop .hop-body[hidden] { display: none; }

/* the fleet's own voice: a line about the desk, not a message from it */
.msg.notice { display: block; padding: 4px 0; }
.msg.notice .notice-body {
  display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 0 auto;
  padding: 8px 12px; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.msg.notice .notice-body > svg { width: 15px; height: 15px; color: var(--faint); flex: none; margin-top: 1px; }
.msg.notice .notice-body p { margin: 0; }
.msg.notice .notice-body p + p { margin-top: 4px; }
.msg.notice time { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
/* The main agent handed his message to a quick chat (2026-10-27): the line is the way there. */
.msg.notice.handoff .handoff-open {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.msg.notice.handoff .handoff-open:disabled { cursor: default; }
.msg.notice.handoff .handoff-open:not(:disabled):hover > span:first-of-type { text-decoration: underline; }
.msg.notice.handoff .handoff-open svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.msg.notice.handoff .handoff-open .state { color: var(--accent); font-weight: 600; white-space: nowrap; }
.msg .who .tag.chat-link {
  display: inline-flex; align-items: center; gap: 4px; max-width: 220px; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.msg .who .tag.chat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .who .tag.chat-link svg { width: 10px; height: 10px; flex: none; }
.msg .who .tag.chat-link:disabled { cursor: default; color: var(--faint); background: transparent; }

.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; }
/* An upload in flight: a thin bar along the bottom of its chip (2026-09-15). */
.chip { position: relative; overflow: hidden; }
/* The name shrinks, the remove button never does: with `overflow: hidden` a
   long file name pushed the X out of the chip and clipped it (2026-09-15). */
.chip > div { flex: 1 1 auto; min-width: 0; }
.chip > .x, .chip > img, .chip > svg { flex: none; }
.chip .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.chip .bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s linear; }
.chip.busy img, .chip.busy > svg { 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; }
/* Status's light in the menu (2026-10-26): green, or red when something needs him. */
.settings-menu button .status-light { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.settings-menu button .status-light.ok { background: var(--live); }
.settings-menu button .status-light.bad { background: var(--danger); }
.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); }
/* Chosen, still saving: the new value is already on the button, with a small
   ring turning after it. The other picker waits too (disabled) so a second
   click cannot race the first. */
.brain-btn:disabled { cursor: default; }
.brain-btn:disabled:hover { background: none; }
.brain-btn.pending { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.brain-btn.pending::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--faint); border-top-color: var(--accent);
  animation: brain-spin .7s linear infinite;
}
@keyframes brain-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .brain-btn.pending::after { animation: none; border-color: var(--accent); opacity: .6; }
}
.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-menu .item.fresh { margin-top: 4px; }
.brain-menu .item.fresh.sure { color: var(--danger); }
.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); }
/* Waiting on you, above the message box (2026-09-15): seen with the panel
   closed and on a phone. A long ask scrolls inside its card, never the page. */
.asks-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; max-height: 45vh; overflow-y: auto; }
.asks-bar[hidden] { display: none; }
.asks-bar .ask-detail { max-height: 6em; overflow: auto; }
.asks-bar .ask-row { flex-wrap: wrap; }
.ask.refused { background: var(--card); border-color: var(--line); }
.ask.refused .ask-top { align-items: flex-start; }
.ask.refused .ask-top > svg { color: var(--muted); margin-top: 2px; }
.ask.refused .msg { flex: 1; min-width: 0; line-height: 1.45; color: var(--text); }
.ask .x { flex: none; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.ask .x:hover { color: var(--text); background: var(--card-hi); }
.ask .x svg { width: 13px; height: 13px; color: inherit; }
.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 --------------------------------------------- */

/* No valid update key: everything but Settings is covered (owner, 2026-10-11).
   Under the Settings dialog (z 60), over everything else. */
.lock-screen { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.lock-screen[hidden] { display: none; }   /* `display: grid` would otherwise beat it: a good key left the lock up */
.lock-card { max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lock-card h2 { margin: 0; font-size: 20px; }
.lock-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.lock-card .lock-why { font-size: 12.5px; }
.lock-icon { font-size: 34px; }
.ukey-state { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.ukey-state.ok { color: var(--live); }
.ukey-state.bad { color: var(--danger); }
.ukey-from { margin: -2px 0 8px; font-size: 12px; color: var(--faint); }

.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;
}
.modal.settled { animation: none; }
@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; }
/* A group's tabs (2026-10-26): a quiet row under its title, the one in view underlined. */
.settings-tabs {
  display: flex; gap: 4px; margin: -6px 0 8px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  position: relative; flex: none; padding: 8px 12px 10px; font-size: 13.5px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.settings-tab .warn-dot { position: absolute; top: 7px; right: 3px; }
.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; }
/* The control never takes more than its share of the row: a long note beside
   it (Notifications on a device that does not trust the console yet) squeezed
   the text into one word per line (owner, 2026-10-26). It wraps instead. */
.setting .s-ctl { flex: 0 1 auto; min-width: 0; max-width: 60%; display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: 10px; padding-top: 2px; }
.setting .s-ctl .note { min-width: 0; overflow-wrap: anywhere; }
.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"). */
/* ...and wraps when it is wider than its place: five world styles in Spanish
   ran past a phone's edge (2026-10-26). */
.segment { display: inline-flex; flex-wrap: wrap; gap: 2px 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; }
/* An engine setting that takes a path or a list of names (2026-09-22): the row
   stacks and the box takes the dialog's width, so a long value stays readable
   while it is typed. The on/off ones keep their place beside the text. */
.setting.engine-row:has(.name-ctl) { flex-direction: column; gap: 10px; align-items: stretch; }
/* A row that stacks gives its control the whole width. */
.setting.engine-row:has(.name-ctl) .s-ctl, .setting.listen-row .s-ctl, .setting.version-row .s-ctl,
.setting.move-row .s-ctl { max-width: none; justify-content: flex-start; }
.setting.engine-row .s-ctl > .name-ctl { flex: 1 1 auto; min-width: 0; align-items: stretch; }
.setting.engine-row .name-ctl .line { width: 100%; }
.setting.engine-row .name-ctl .line input { flex: 1; width: auto; min-width: 0; }
.setting.engine-row .engine-ctl .note { overflow-wrap: anywhere; }
.engine-ctl > input { padding: 8px 11px; border-radius: 9px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); min-width: 0; }
.engine-ctl > input:focus { outline: none; border-color: var(--accent); }
.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, .avatar.me.mail-warn::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--bg);
}
/* The system mailbox cannot send the codes for a forgotten password (2026-09-14). */
.warn-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--danger); flex: none; }
.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); }
/* System notices (Status, 2026-10-22): a sentence may wrap; its time stays on its first line. */
.setting.notices .agent-list li { align-items: baseline; }
.setting.notices .said { min-width: 0; overflow-wrap: anywhere; }
/* This machine (Status): facts, three small graphs, what the desks hold. */
.machine-head { display: flex; align-items: center; gap: 12px; }
.machine-head h4 { margin: 0 !important; }
.machine-span { margin-left: auto; display: flex; gap: 2px; }
.machine-span .seg { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 7px; border: 0; cursor: pointer;
  color: var(--muted); background: transparent; }
.machine-span .seg.on { color: var(--text); background: var(--card-hi); }
.setting.machine .s-text p.machine-facts { margin-top: 4px; max-width: none; }
.machine-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 14px 0 4px; }
.mchart { min-width: 0; }
.mtop { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mtop .mnow { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spark { display: block; width: 100%; height: 44px; margin-top: 6px; overflow: visible; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .fill { fill: var(--accent-soft); stroke: none; }
.machine-desks h5 { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 14px 0 0; }
.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); }
/* An update in progress: a thin bar that moves, one line under it. */
.version-ctl.updating { flex-direction: column; align-items: stretch; min-width: min(320px, 100%); }
.upd { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.upd-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.upd-bar > i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .upd-bar > i { transition: none; } }
/* 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; }
/* With NEWS on it - an update waiting, a failed check, a stalled update - the
   version row carries a sentence and up to two buttons. As a side control
   (`flex: none`) it never wrapped: it took the whole line, crushed the
   description to one word per line and pushed "Update now" off the dialog
   (owner, 2026-09-11: "only when update button is visible, that section does
   not render correctly"). Then it stacks under the text instead: version,
   the news on its own line, the buttons below. The QUIET state stacks too
   (2026-09-22): "commit · 5h ago + 19 commits of its own · up to date ·
   checked 2m ago · Check for updates" is one long line, and beside the text
   it squeezed the description into six lines of two words. */
/* Getting started (2026-09-22): a map of the first-time choices - a mark for
   what is made, the value, one button to the screen that makes it. */
.start-lead { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 2px 0 6px; max-width: 62ch; }
.start-ctl { flex-wrap: nowrap; }
.start-ctl .done-mark { width: 16px; height: 16px; color: var(--live); flex: none; }
.start-ctl .note { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-ctl .note.todo { color: var(--working); }
/* Who can open the console: the choice, then one line that can carry a URL
   or a reason - stacked for the same reason as the version row below. */
.setting.listen-row { flex-direction: column; gap: 10px; align-items: stretch; }
.setting.listen-row .s-ctl { flex: 1 1 auto; min-width: 0; }
.setting.listen-row .restart-ctl { justify-content: flex-start; }
.setting.listen-row .note { flex-basis: 100%; line-height: 1.5; overflow-wrap: anywhere; }
.setting.version-row { flex-direction: column; gap: 10px; align-items: stretch; }
.setting.version-row .s-ctl { flex: 1 1 auto; min-width: 0; }
.setting.version-row .restart-ctl { justify-content: flex-start; }
.setting.version-row:has(.note.fresh, .note.err, .pill-btn) .note { flex-basis: 100%; line-height: 1.5; }
/* Move to another machine (2026-10-22): stacked under its text like the
   version row - a report, tick boxes and a bar do not fit beside it. Lines,
   one thin bar and the same pills; no box anywhere. */
.setting.move-row { flex-direction: column; gap: 10px; align-items: stretch; }
.setting.move-row .s-ctl { flex: 1 1 auto; min-width: 0; }
.move-ctl { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 7px; min-width: 0; }
.move-ctl > * { max-width: min(560px, 100%); }
.move-ctl .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.move-ctl .link-btn { align-self: center; }
.move-ctl .say { font-size: 13px; color: var(--text); line-height: 1.5; }
.move-ctl .say.err { color: var(--danger); font-weight: 600; }
.move-ctl .note { line-height: 1.5; overflow-wrap: anywhere; }
.move-ctl .note:empty { display: none; }
.move-ctl .note.warn { color: var(--working); }
.move-ctl .note.now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-ctl h5 { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 8px 0 0; }
.move-ctl .upd-bar { width: min(560px, 100%); margin-top: 4px; }
.move-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.move-line code { font: 13.5px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); user-select: all; overflow-wrap: anywhere; }
.move-paste { display: flex; gap: 7px; width: min(560px, 100%); }
.move-paste input {
  flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px; font: 13px ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line);
}
.move-paste input:focus { outline: none; border-color: var(--accent); }
.move-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; width: min(560px, 100%); }
.move-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; min-width: 0; }
.move-list li.off { color: var(--faint); }
.move-list label { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.move-list input[type="checkbox"] { accent-color: var(--accent); align-self: center; flex: none; }
.move-list .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-list .w { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.move-list .sz { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.move-list li.off .sz { color: var(--faint); }
.move-steps { margin: 2px 0 0; gap: 5px; }
.move-steps li { font-size: 12.5px; }

/* 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); }
.plan-key { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.plan-key:empty { display: none; }
.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; }

/* ---- Settings -> Claude (2026-09-22): a state line, then link + code ----- */
.claude-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.effort-default { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 320px; }
.effort-default p.note { margin: 2px 0 0; }
.claude-state .ok { font-size: 13px; font-weight: 600; color: var(--text); }
.claude-state .off { font-size: 13px; font-weight: 600; color: var(--danger); }
.claude-state .via, .claude-state .who { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.claude-connect { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 360px; }
.claude-connect > .pill-btn { min-width: 220px; text-align: center; }
a.pill-btn { text-decoration: none; }        /* a link that looks like its buttons */
.claude-connect .line { display: flex; gap: 7px; }
.claude-connect .note { text-align: right; line-height: 1.45; }
.claude-code {
  width: 230px; padding: 8px 11px; border-radius: 9px; font: 13px ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line);
}
.claude-code:focus { outline: none; border-color: var(--accent); }

/* ---- Settings -> AI -> Provider (2026-10-23) ------------------------------
   The choice and where it stands sit right, like Claude's own line; the next
   step is in the working colour - it is a step, not a fault. A provider's key,
   address, models and prices sit under their words, like a capability's key:
   labelled fields, no box around them. */
.claude-state .next { font-size: 13px; font-weight: 600; color: var(--working); max-width: 320px; }
.claude-state .note, .claude-state .via { max-width: 320px; overflow-wrap: anywhere; }
.claude-state > .select { max-width: 280px; }
.ai-check { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ai-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-width: 520px; }
.ai-line { display: flex; align-items: center; gap: 10px; }
.ai-line > span:first-child { flex: none; width: 72px; font-size: 12.5px; color: var(--muted); }
.ai-line > input, .ai-line > .ai-model { flex: 1; min-width: 0; }
.ai-line input, .ai-line .select {
  width: 100%; min-width: 0; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line);
}
.ai-line input:focus, .ai-line .select:focus { outline: none; border-color: var(--accent); }
.ai-line input:disabled, .ai-line .select:disabled { color: var(--faint); background: transparent; }
.ai-form > .note, .ai-form > .ai-own { padding-left: 82px; }
.ai-own { align-self: flex-start; font-size: 11.5px; color: var(--muted); }
a.ai-own { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ai-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-form > .ai-acts { padding-left: 82px; }
.ai-acts .save {
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
}
.ai-acts .save:disabled { color: var(--faint); background: var(--card-hi); cursor: default; }
.ai-acts .link-btn { align-self: center; }
.ai-acts .sure { font-size: 13px; color: var(--muted); }
.ai-month { font-size: 12.5px; text-align: right; max-width: 320px; }
.ai-differs { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
@media (max-width: 899px) {
  .ai-check { justify-content: flex-start; }
  .ai-line > span:first-child { width: 56px; }
  .ai-form > .note, .ai-form > .ai-own, .ai-form > .ai-acts { padding-left: 66px; }
  .ai-month { text-align: left; }
}

/* ---- several AIs at once (2026-10-26): More providers, the picker, Usage ---- */
.ai-add > .select { align-self: flex-start; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.ai-add-form { display: flex; flex-direction: column; gap: 8px; }
.ai-add-form:empty { display: none; }
.ai-add-form > .link-btn { align-self: flex-start; padding-left: 82px; }
.ai-add-form > .ai-acts { padding-left: 82px; }
.ai-other { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 520px; }
.ai-other-status { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.ai-other-status .ok { color: var(--live); font-weight: 600; }
.ai-other-status .next { color: var(--working); }
.ai-other-status .via, .ai-other .note { color: var(--muted); }
.ai-other .line { display: flex; gap: 8px; align-items: center; }
.ai-other .line > :first-child { flex: 1; min-width: 0; }
.ai-other .line input, .ai-add-form .ai-line input {
  width: 100%; min-width: 0; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line);
}
.ai-other .line .save { padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); }
.ai-menu { max-height: min(60vh, 460px); overflow-y: auto; min-width: 240px; }
.ai-menu .ai-group { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 2px; font-size: 11.5px;
  font-weight: 600; color: var(--muted); }
.ai-menu .ai-group .why { font-weight: 400; color: var(--working); overflow-wrap: anywhere; }
.ai-menu .note.ai-can, .brain .ai-can { color: var(--faint); }
.brain .ai-can { margin-left: 8px; }
.usage-pick { flex-wrap: wrap; justify-content: flex-end; }
.usage-sum { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; }
.usage-sum .big { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.usage-sum .via { color: var(--muted); font-size: 12.5px; }
.usage-table-wrap { margin-top: 10px; overflow-x: auto; max-width: 100%; }
.usage-table { border-collapse: collapse; font-size: 12.5px; min-width: 520px; }
.usage-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.usage-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage-prices .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usage-prices .model { flex: none; width: 190px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.usage-prices input { flex: 1; min-width: 140px; padding: 7px 10px; border-radius: 9px; font-size: 13px;
  color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.usage-prices .save { padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); }
.usage-prices .save:disabled { color: var(--faint); background: var(--card-hi); cursor: default; }
@media (max-width: 899px) {
  .ai-add-form > .link-btn, .ai-add-form > .ai-acts { padding-left: 66px; }
  .usage-prices .model { width: 100%; }
}

/* ---- 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. */
/* Buscar (2026-09-11): one box, chips, a list. No frame around the frame. */
/* `.finder`, not `.search`: the desk list's search box already owns `.search`
   (line ~150, a flex row), and a page wearing that class collapsed to the
   height of its box (2026-09-11). */
.page.finder { padding-top: 22px; }
.search-frame { max-width: 860px; margin: 0 auto; padding: 0 22px 26px; }
.search-box { position: relative; display: flex; align-items: center; gap: 10px; }
.search-box .mag { width: 18px; height: 18px; color: var(--faint); position: absolute; left: 14px; pointer-events: none; }
.search-box input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px 12px 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-hint { position: absolute; right: 14px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.search-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 2px 6px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group + .chip-group { padding-left: 14px; border-left: 1px solid var(--hairline); }
.search-chips .chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.search-chips .chip.on { background: var(--sel); color: var(--text); border-color: transparent; }
.search-results { list-style: none; margin: 10px 0 0; padding: 0; }
.search-results .empty { padding: 18px 2px; color: var(--muted); font-size: 13px; }
.search-results .group, .search-results .divider { padding: 14px 2px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.search-results .hit { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 6px; border-radius: 10px; cursor: pointer; border-bottom: 1px solid var(--hairline); }
.search-results .hit:hover, .search-results .hit:focus-visible { background: var(--card); outline: none; }
.search-results .hit .when { font-size: 11px; color: var(--faint); padding-top: 3px; font-variant-numeric: tabular-nums; }
.search-results .hit .who { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 2px; flex-wrap: wrap; }
.search-results .hit .who b { color: var(--text); font-weight: 600; }
.search-results .hit .who .by.agent { color: var(--accent); }
.search-results .hit .who .via { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.search-results .hit .text { font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.search-results .hit .text mark { background: color-mix(in srgb, var(--working) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-results .hit .files { font-size: 11px; color: var(--faint); }
.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); }

/* ---- 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; }
/* Left out of the backup (Settings -> Backup): a folder per line, its size and its button. */
.skip-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.skip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.skip-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.skip-list .skip-name { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  overflow-wrap: anywhere; text-align: right; }
.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); }
/* Hide from the menu: the eye beside the arrows; a hidden row stays in this
   list (that is how it comes back), just quieter. */
.pj-eye { width: 26px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--faint); background: transparent; border: 1px solid transparent; }
.pj-eye:hover { background: var(--card-hi); color: var(--text); border-color: var(--line); }
.pj-eye svg { width: 15px; height: 15px; }
.pj-head .pj-eye { margin-left: auto; }
.pj-head .pj-eye + .pj-arrows { margin-left: 0; }
.pj-hidden > .pj-head .u-who, .pj-chan.pj-hidden .p-id, .pj-chan.pj-hidden .qn input { opacity: .45; }
.pj-hidden > .pj-head .pj-eye, .pj-chan.pj-hidden .pj-eye { color: var(--text); }
.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-remove:hover { color: var(--danger); }
.pj-sure { flex-wrap: wrap; }
.pj-sure .sure { flex: 1; min-width: 180px; font-size: 13px; }
.pj-gone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 8px 6px; font-size: 12px; color: var(--muted); }
.pj-gone .p-id { font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.pj-gone .note.err, .pj-sure .note.err { color: var(--danger); }
.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); }
/* Delete for good: what goes, then the typed word (2026-10-15). */
.pj-delete { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 560px; }
.setting .s-text .pj-delete p.pj-warn { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger); }
.setting .s-text .pj-delete p.pj-what { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.user-list > li > .pj-delete { margin-top: 0; padding: 0 12px 12px; }     /* an archived row's own */
.pj-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); }
.pj-type input { width: 140px; max-width: 100%; padding: 6px 10px; border-radius: 8px; font: 13px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.pj-type input:focus { outline: none; border-color: var(--danger); }
.pj-delete .note.err, .pj-list + .u-note .note.err { color: var(--danger); }
.pj-delete .pill-btn:disabled { opacity: .45; cursor: not-allowed; }
.pj-delete .pill-btn:disabled:hover { border-color: var(--line); background: transparent; }
.user-list .u-head .note { margin-left: auto; font-size: 12px; color: var(--muted); }
/* "Forget this key" belongs at the row's end, not wherever the name stopped. */
.user-list .u-head > .link-btn { margin-left: auto; align-self: center; flex: none; }
.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); }
/* an owner's mark beside the name (a second owner, 2026-10-22) */
.u-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.u-name .tag { flex: none; font-size: 9.5px; padding: 0 5px; }
.grant-picker[hidden], .u-panel .cap[hidden], .add-user .cap[hidden] { display: none; }
.u-panel > .segment, .add-user > .segment { align-self: flex-start; }
.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); }
.u-note .note.ok { color: var(--live); }
/* Settings → Email (2026-10-22): which kind of mailbox, and a Microsoft 365
   sign-in as it goes - the code big enough to read off the screen. */
.mail-part { display: flex; flex-direction: column; gap: 8px; }
.mail-part[hidden] { display: none; }
.mail-adv summary { font-size: 12px; color: var(--muted); cursor: pointer; width: fit-content; }
.mail-adv[open] summary { margin-bottom: 8px; }
.mail-signin { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 0 4px; font-size: 13px; }
.mail-signin .line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; min-width: 0; }
.mail-signin p.line { font-size: 13px; color: var(--text); }
.mail-signin p.line.ok { color: var(--live); font-weight: 600; }
.mail-signin p.line.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.mail-signin .line.ok svg { width: 15px; height: 15px; }
.mail-signin p.wait { margin: 0; font-size: 12.5px; color: var(--muted); }
.mail-signin p.err { margin: 0; font-size: 12.5px; color: var(--danger); overflow-wrap: anywhere; }
.mail-signin .code { font: 600 24px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; user-select: all; }
.mail-signin a { color: var(--accent); font-weight: 600; }
.mail-signin a.consent { font-weight: 400; font-size: 12px; overflow-wrap: anywhere; max-width: 100%; }
.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; }
/* An assistant's address is long: it wraps rather than pushing the dialog wide. */
.secret-box.address code { font-size: 12.5px; letter-spacing: 0; word-break: break-all; }
.secret-box.address .line { align-items: flex-start; }
.secret-box.address > button { align-self: flex-start; }
.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; overflow-wrap: anywhere; font: 12.5px/1.5 inherit; color: var(--text); user-select: all; }
/* Settings → Security: two-factor by an authenticator app (2026-09-14). */
.tfa-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.tfa-status { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tfa-status.on { color: var(--live); font-weight: 600; }
.tfa-status svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.tfa-body > .note { margin: 0; }
.tfa-steps { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.tfa-pair-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tfa-qr { flex: none; width: 168px; height: 168px; overflow: hidden; border-radius: 10px; background: #fff; }
.tfa-qr svg { display: block; width: 100%; height: 100%; stroke: none; }   /* not the icons' stroke */
.tfa-side { flex: 1; min-width: 0; }
.tfa-key { display: block; font: 13px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; word-break: break-all; user-select: all; color: var(--text); }
.add-user .tfa-code-in { max-width: 200px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.tfa-codes code { font: 14px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; user-select: all; }
.pw-ctl .line input { width: 150px; }
/* The password row: current, new, new again - stacked, Change under them
   (2026-10-10). Three side by side do not fit beside the text. */
.pw-ctl.stack .line { flex-direction: column; align-items: stretch; width: 230px; }
.pw-ctl.stack .line input { width: auto; }
.pw-ctl.stack .save { align-self: flex-end; }
.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; max-width: none; }
  .name-ctl { align-items: flex-start; }
  .claude-state, .claude-connect { align-items: flex-start; text-align: left; }
  .claude-connect .note { text-align: left; }
  .claude-code { width: 100%; min-width: 0; }
  .claude-connect .line { width: 100%; }
}

/* 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; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item .t time { flex: none; }
.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; }

/* who can see this channel, and Invite (owner, 2026-10-16) */
.people-wrap { position: relative; display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.people-wrap[hidden] { display: none; }
.people-faces { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; }
.people-faces:hover, .people-faces[aria-expanded="true"] { background: var(--card-hi); }
.people-faces .avatar { width: 26px; height: 26px; font-size: 11px; margin-left: -7px; box-shadow: 0 0 0 2px var(--bg); background-size: cover; background-position: center; }
.people-faces .avatar:first-child { margin-left: 0; }
.people-faces .more { margin-left: 5px; font-size: 11.5px; color: var(--muted); }
.people-faces .pf-icon { display: none; width: 20px; height: 20px; color: var(--muted); }
.invite-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 600;
}
.invite-btn svg { width: 14px; height: 14px; }
.invite-btn:hover { opacity: .88; }
.people-menu {
  position: absolute; top: 42px; right: 0; z-index: 25; width: min(320px, 86vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px; max-height: 60dvh; overflow-y: auto;
}
.people-menu[hidden] { display: none; }
.people-menu h3 { padding: 4px 6px 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.people-list .avatar { width: 30px; height: 30px; font-size: 12px; background-size: cover; background-position: center; }
.people-list .p-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.people-list .p-who b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list .p-sub { font-size: 11.5px; color: var(--muted); }
.people-list .p-sure { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 40px; font-size: 12.5px; color: var(--muted); }
.people-add { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 9px 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); text-align: left; }
.people-add svg { width: 15px; height: 15px; }
.people-add:hover { color: var(--accent); }
.invite-box .line { flex-wrap: wrap; gap: 8px; }
.invite-box .cap { margin-top: 8px; }
.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); }
/* The windows (owner, 2026-10-16): each view of the desk has a title bar and
   an x; the bar of pills above opens one again. The stack scrolls, a window
   keeps its own height. */
.win-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.win-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; color: var(--muted); border: 1px solid var(--line); }
.win-pill svg { width: 14px; height: 14px; }
.win-pill:hover { color: var(--text); background: var(--card-hi); }
.win-pill.on { color: var(--text); background: var(--sel); border-color: transparent; }
.wins { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.win { flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.win-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); }
.win-head svg { width: 14px; height: 14px; flex: none; }
.win-head .t { font-weight: 600; color: var(--text); }
.win-head .m { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--faint); }
.win-x { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.win-x:hover { color: var(--text); background: var(--card-hi); }
.win-x svg { width: 13px; height: 13px; }
.wins-none { margin: 24px 4px; text-align: center; }
.panel-body { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.panel-files { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-files .all { align-self: flex-start; font-size: 12px; color: var(--accent); }
.win .panel-live, .win .panel-world { margin: 0; border: 0; border-radius: 0; }
.win .panel-live { padding: 10px; }
.live-cap .live-stop { margin-left: auto; align-self: center; }
.live-empty { padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.live-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.live-empty .note { font-size: 12px; color: var(--muted); }

/* ---- the canvas: the document a desk is working on, drawn live (2026-10-15) ---- */
.canvas { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.canvas[hidden] { display: none; }
.cv-head { display: flex; align-items: center; gap: 4px; padding: 8px 10px; min-height: 52px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.cv-pick { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 48%; padding: 6px 8px; border-radius: 8px; text-align: left; }
.cv-pick:hover, .cv-pick[aria-expanded="true"] { background: var(--card-hi); }
.cv-pick .n { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pick .chev { width: 14px; height: 14px; color: var(--faint); }
.cv-pick .cv-dot { position: static; }
.cv-vers { display: flex; align-items: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cv-vers .lbl { padding: 0 2px; white-space: nowrap; }
.cv-vers .icon-btn svg { width: 15px; height: 15px; }
.cv-head .icon-btn:disabled { opacity: .3; cursor: default; }
.cv-head .icon-btn.on { color: var(--accent); }
.cv-menu { position: absolute; z-index: 30; top: 50px; left: 8px; width: min(380px, calc(100% - 16px)); max-height: 60%; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; }
.cv-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 9px; border-radius: 7px; text-align: left; }
.cv-menu button:hover, .cv-menu button.on { background: var(--card-hi); }
.cv-menu .n { font-size: 13px; font-weight: 600; }
.cv-menu .w { font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; }
.cv-old { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--line); background: var(--working-soft); }
.cv-old .grow { flex: 1; }
.cv-stage { position: relative; flex: 1; min-height: 0; overflow: auto; }
.cv-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; transition: opacity .2s; }
.cv-stage iframe.loading { opacity: 0; pointer-events: none; }
.cv-stage.phone { background: var(--card); }
.cv-stage.phone iframe { left: 50%; width: 390px; max-width: calc(100% - 24px); transform: translateX(-50%); top: 14px; height: calc(100% - 28px);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.cv-notes { padding: 22px 28px 48px; max-width: 860px; margin: 0 auto; box-sizing: border-box; line-height: 1.6; }
/* A document reads like one: the chat keeps its headings small, the canvas does not. */
.cv-notes .md-h1 { font-size: 26px; margin: 4px 0 14px; line-height: 1.25; }
.cv-notes .md-h2 { font-size: 20px; margin: 22px 0 10px; line-height: 1.3; }
.cv-notes .md-h3 { font-size: 16.5px; margin: 18px 0 8px; }
.cv-notes .md-h4, .cv-notes .md-h5, .cv-notes .md-h6 { font-size: 14.5px; margin: 14px 0 6px; }
.cv-stage.phone .cv-notes { max-width: 390px; margin: 14px auto; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; }
.cv-img { display: block; max-width: calc(100% - 32px); margin: 16px auto; border-radius: 6px; }
.cv-empty { margin: 48px 24px; color: var(--muted); font-size: 13px; text-align: center; }
.cv-flash { outline: 2px solid rgba(222, 150, 40, .95); outline-offset: 3px; border-radius: 3px; background: rgba(255, 196, 80, .16);
  transition: outline-color 1.6s ease, background-color 1.6s ease; }
.cv-flash.cv-fade { outline-color: transparent; background-color: transparent; }
.cv-bubble { position: absolute; z-index: 25; width: min(380px, calc(100% - 24px)); box-sizing: border-box; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.cv-bubble .q { font-size: 12px; line-height: 1.4; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 8px; max-height: 2.9em; overflow: hidden; }
.cv-bubble form { display: flex; gap: 6px; }
.cv-bubble input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--text); background: var(--card-hi); border: 1px solid var(--line); }
.cv-bubble input:focus { outline: none; border-color: var(--accent); }
.cv-bubble .note { font-size: 12px; color: var(--muted); }
.cv-bubble .note.err { color: var(--danger); }
.cv-stage:fullscreen { background: #000; overflow: auto; }
.cv-stage:fullscreen .cv-notes { background: var(--bg); min-height: 100%; }
.cv-toggle { position: relative; }
.icon-btn.cv-toggle[hidden] { display: none; }    /* .icon-btn sets display, which beats [hidden] */
.cv-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cv-dot[hidden] { display: none; }
/* 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 story (2026-09-08): one sentence, a few phases, the current one breathing */
/* the turn's receipt (2026-09-10): what the last turn amounted to, while the
   desk is idle. Chips, no box around the box. */
.receipt { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.receipt .r-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.receipt .r-head svg { width: 13px; height: 13px; color: var(--live); }
.receipt .r-head .t { font-weight: 600; color: var(--text); }
.receipt .r-head .m { margin-left: auto; color: var(--faint); font-size: 11px; }
.receipt .r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.receipt .chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--sel); color: var(--text); }
.receipt .chip.c-ok { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.receipt .chip.c-bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.receipt .chip.c-git { color: #f472b6; }
.receipt .chip.c-write { color: var(--live); }
.receipt .chip.c-time { color: var(--muted); }
.receipt .r-next { margin-top: 8px; font-size: 12px; color: var(--muted); }
.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 .cur { display: inline-block; width: 7px; height: 12px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
/* The command card's facts (2026-09-10): the trail of what ran before, each
   with how it went; a badge for what kind of command; a real clock; and
   "usually ~40s" as a bar that fills towards this desk's own memory. */
.v-run .trail { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; color: var(--faint); }
.v-run .tr { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; opacity: .55; }
.v-run .tr:last-child { opacity: .8; }
.v-run .tr .mk { flex: none; width: 12px; }
.v-run .tr.ok .mk { color: var(--live); }
.v-run .tr.bad .mk, .v-run .tr.bad .dur { color: var(--danger); }
.v-run .tr .lb { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v-run .tr .dur { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.v-run .badge { margin-left: 8px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; background: var(--sel); color: var(--muted); vertical-align: 1px; }
.v-run .badge.b-tests { color: #c084fc; }
.v-run .badge.b-git { color: #f472b6; }
.v-run .clockline { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.v-run .clock { color: var(--text); font-variant-numeric: tabular-nums; }
.v-run .us { color: var(--faint); }
.v-run .usual { height: 3px; border-radius: 2px; background: var(--hairline); margin-top: 6px; overflow: hidden; }
.v-run .usual i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s linear; border-radius: 2px; }
.v-run .usual.over i { background: var(--working); }

/* 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 / workflows 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 { margin-left: auto; }
.page-head .icon-btn[hidden] { display: none; }
.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, .stat.background 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; }

/* Workflows -> What ran on its own: one line per routine; its runs and answers
   one tap away (2026-09-23). Lines, no cards: they are a log, not objects. */
.runs { list-style: none; margin: 0; padding: 0; max-width: 1100px; }
.runs > li { border-bottom: 1px solid var(--hairline); }
.run-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 2px;
  text-align: left; font-size: 12.5px; color: var(--muted);
}
.run-head:hover { background: var(--card); color: var(--text); }
.run-head svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.run-head time { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-head .who { font-weight: 600; color: var(--text); white-space: nowrap; }
.run-head .peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run.open .run-head .peek { visibility: hidden; }
.run-head .count { color: var(--faint); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-body { margin: 0 0 12px 8px; padding: 4px 0 0 14px; border-left: 2px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.run-body[hidden] { display: none; }
.run-list { list-style: none; margin: 10px 0 8px; padding: 0; }
.run-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.run-list time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-list .quiet { color: var(--faint); }
.runs > li.run-more { border-bottom: 0; padding: 8px 2px 0; }
@media (max-width: 640px) {
  .run-head .who { max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
  .run-head .count { display: none; }
}

/* ---- 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); }
.bcard.s-ready { border-left: 2px solid var(--working); }
/* Moving a card (2026-09-14, "cannot move"): pick it up with the mouse, or
   press and hold on a phone so a swipe still scrolls the columns. While a card
   is up, the columns it may land in open a place for it; the in-progress one,
   which only the dispatcher fills, steps back. */
.board-top { flex-wrap: wrap; }
.board-top .link-btn { align-self: center; }
.board-top select[hidden] { display: none; }
/* Every column is always there, so nothing shifts under a card being carried
   (the first version opened Stuck and To check on pick-up, and the column
   you were aiming at slid away). */
.bcol { flex: 1 1 0; min-width: 190px; max-width: 300px; border-radius: 12px; }
/* The columns scroll inside the board; they must not widen the page. */
.page.workflows, .workflows .wf-section { min-width: 0; max-width: 100%; }
.board-top select { min-width: 0; max-width: 100%; }
.bcard { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.board.is-dragging .bcol[data-drop="1"] .bcards { min-height: 72px; border-radius: 10px; outline: 1px dashed var(--line); outline-offset: 2px; }
.board.is-dragging .bcol[data-drop="0"] { opacity: .4; }
.bcol.drop-on .bcards { outline-color: var(--accent) !important; background: var(--accent-soft); }
.bcard.dragging { opacity: .3; }
.bghost { position: fixed; left: 0; top: 0; z-index: 90; margin: 0; list-style: none; pointer-events: none; box-shadow: var(--shadow); border-color: var(--accent); }
.bempty { list-style: none; font-size: 12px; line-height: 1.45; color: var(--faint); padding: 2px 2px 6px; }
.bmore { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) {
  .board { gap: 10px; scroll-snap-type: x proximity; }
  .bcol { min-width: 76vw; max-width: 76vw; scroll-snap-align: start; }
}

/* One task, in a dialog: read it whole, change it, delete it. */
.reader-box.task { width: min(560px, 100%); height: auto; max-height: 92dvh; }
.task-body { display: flex; flex-direction: column; gap: 12px; }
.task-body input, .task-body textarea, .task-body select {
  width: 100%; min-width: 0; font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
.task-body input:focus, .task-body textarea:focus, .task-body select:focus { outline: none; border-color: var(--accent); }
.task-body .task-title { font-size: 15px; font-weight: 600; }
.task-body textarea { resize: vertical; line-height: 1.5; }
.task-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.task-row.top { align-items: start; }
.task-row .k { font-size: 12px; color: var(--muted); }
.task-row.top .k { padding-top: 9px; }
.task-row .v { font-size: 13px; }
.task-body .note { margin: -4px 0 0; }
.task-note { margin: 0; font-size: 12.5px; color: var(--working); }
.task-result { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.task-result .k { font-size: 12px; color: var(--muted); }
.task-result p { margin: 0; font-size: 13px; line-height: 1.5; }
.task-result .bfiles { font: 11.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--faint); overflow-wrap: anywhere; }
.task-when { margin: 0; font-size: 11.5px; color: var(--faint); }
.task-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.task-foot .grow { flex: 1; min-width: 0; font-size: 12.5px; }
.task-foot .save { padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); }
.task-foot .save:disabled { color: var(--faint); background: var(--card-hi); cursor: default; }
.task-foot .danger { color: var(--danger); }
.task-foot .link-btn { align-self: center; padding: 6px 0; }
@media (max-width: 520px) {
  .task-row { grid-template-columns: 1fr; gap: 4px; }
  .task-row.top .k { padding-top: 0; }
}
.workflows.detail .board-section, .workflows.detail #routines-head, .workflows.detail .tripwires-section,
.workflows.detail #chains-section, .workflows.detail #runs-section { display: none; }

/* tripwires: what a channel promised to do once something happens (2026-10-13) */
.tw-about { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: -4px 2px 12px; max-width: 720px; }
.tw-check { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.tw-check code { font: 11.5px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); background: var(--code);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tw-then { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.tw-then b { font-weight: 600; margin-right: 5px; }
.tw-last { font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; }
.tw-card.ended { opacity: .72; }
.status.waiting { color: var(--working); background: var(--working-soft); }
.status.waiting::before { animation: breathe 1.6s ease-in-out infinite; }
.status.fired { color: var(--live); }
.status.expired, .status.broken { color: var(--danger); }
.status.cancelled { color: var(--faint); }
.tw-panel .tw-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 2px; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left; min-width: 0; }
button.tw-row { cursor: pointer; border-radius: 6px; }
button.tw-row:hover { background: var(--bg-soft); }
.tw-row svg { width: 14px; height: 14px; color: var(--working); flex: none; }
.tw-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-row .m { color: var(--faint); font-size: 11.5px; flex: none; }
.wf-acts { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.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(min(360px, 100%), 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; white-space: normal; overflow-wrap: anywhere; }

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

/* A TALL picture scrolls (owner, 2026-09-22: "i only ever see the top part of
   the image, i need to download it"). The picture fits the WIDTH - never wider
   than itself - and the STAGE scrolls down it; margin:auto centres a small one
   and lets a tall one start at its top. The stage is a layer of its own, not
   the box: the box's backdrop-filter makes it the containing block of every
   `fixed` child, so controls inside a scrolling box scrolled away with it. */
.lightbox {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, #000 82%, transparent); backdrop-filter: blur(4px);
  animation: fadein .12s ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.lb-stage {
  position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain;
  padding: 48px 64px calc(64px + var(--safe));
}
.lightbox img {
  display: block; flex: none; margin: auto; max-width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 24px 80px #000c; background: var(--card);
}
.lb-close, .lb-nav {
  position: absolute; z-index: 1; 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; }
/* A pill of its own: a scrolled picture passes under it, and the name must
   stay readable over whatever is there. */
.lb-bar {
  position: absolute; z-index: 1; left: 50%; bottom: calc(14px + var(--safe)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: calc(100vw - 32px); padding: 5px 6px 5px 14px; border-radius: 999px;
  background: color-mix(in srgb, #000 72%, transparent);
  color: #ffffffcc; font-size: 12.5px;
}
.lb-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.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) {
  .lb-stage { 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, body[data-view="search"] .app, body[data-view="help"] .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; }
  .beside { display: none; }               /* a phone has tabs instead (.col-tabs) */
  /* 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, body[data-view="search"] #view-search,
  body[data-view="help"] #view-help {
    display: block; grid-area: main;
  }
  body[data-view="link"] .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "main" "rail"; }
  body[data-view="link"] .channels { display: none; }
  body[data-view="link"] #view-link { display: flex; grid-area: main; height: auto; min-height: 0; }
  /* Another Evernous on a phone (2026-10-22): the 16px gutter (the page
     keeps 14px, 2 more), the sides a little closer, and the box the whole
     width with its buttons under it - beside them it was half a phone wide
     and cut its own placeholder. */
  .link-threads { padding: 16px 2px; }
  .lt-line.mine { margin-left: 18px; }
  .lt-line.theirs { margin-right: 18px; }
  .link-composer { padding: 10px 2px 6px; }
  .link-composer textarea { flex: 1 1 100%; }
  .link-sends { flex: 1 1 100%; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .link-keyform { padding: 12px 2px; }
  .link-note { padding: 0 2px 10px; }
  .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; }
  .people-menu { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; }
  /* A phone's header has no room to spare (the title already shared it with
     the working pill): one icon opens who's here, and Invite is in that list. */
  .chat-head { gap: 6px; }
  /* Tap targets keep their size; the working pill gives way with an
     ellipsis before the channel's name does (it used to be the other way:
     icons crushed to 18 px and the name at 0 while a desk worked). */
  .chat-head .icon-btn, .chat-head .bell-wrap, .chat-head .people-wrap { flex: none; }
  .chat-head h2 { flex: 0 1 auto; min-width: 64px; }
  /* The channel, not its project: "Ever…" told nobody where they were. */
  .chat-head h2 .where, .chat-head h2 .sep { display: none; }
  .chat-head .state-pill { display: inline-block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; margin-left: 2px; }
  .chat-head .state-pill::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
  .people-wrap { margin-right: 0; }
  .people-faces { width: 36px; height: 36px; justify-content: center; border-radius: 10px; }
  .people-faces .avatar, .people-faces .more, .invite-btn { display: none; }
  .people-faces .pf-icon { display: block; }
  .messages, .composer { padding-left: 14px; padding-right: 14px; }
  .msg.human { margin-left: 16px; }
  .msg.agent { margin-right: 8px; }
  .page { padding: 0 14px 20px; }
  .page-head { margin: 0 -14px 12px; padding: 0 14px; }
  /* The canvas on a phone: the whole screen above the bar, the chat behind it. */
  body.canvas-open[data-view="chat"] .activity-panel { display: flex; position: fixed; inset: 0 0 auto 0; height: calc(100dvh - 58px); z-index: 22; box-shadow: var(--shadow); }
  .cv-head { padding: 6px; gap: 0; }
  .cv-pick { max-width: 44%; }
  .cv-old .grow { flex-basis: 100%; }             /* the words on a row, the two buttons under */
  .cv-notes { padding: 16px 16px 40px; }
}

/* ---- 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 .dot.warn { background: var(--accent); animation: breathe 1.2s ease-in-out infinite; }
.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; }

/* ---- Help (owner, 2026-10-13): what Evernous can do, in plain words -------
   One idea per entry, unboxed like the rest of the console. Colour only where
   it says something: each section keeps one accent from the palette above, so
   its card, its page and its buttons read as one place. The front page's
   scene is drawn by app.js (helpScene) and moves only while it is on screen. */
.page.help { padding-top: 0; }
.help-frame { max-width: 1040px; margin: 0 auto; padding: 0 22px 64px; }
[data-sec] { --hc: var(--accent); }
[data-sec="start"] { --hc: var(--signal); }
[data-sec="can"] { --hc: var(--mail-out); }
[data-sec="delegation"] { --hc: var(--mail-in); }
[data-sec="advanced"] { --hc: var(--working); }
[data-sec="hidden"] { --hc: var(--live); }
[data-sec="trouble"] { --hc: var(--danger); }
.help-loading { padding: 80px 0; text-align: center; color: var(--faint); }

/* the front page */
.help-hero { text-align: center; padding: 46px 0 0; }
.help-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; font-weight: 760; letter-spacing: -0.035em; }
.help-hero h1 .name {
  background: linear-gradient(100deg, var(--mail-out), var(--mail-in) 50%, var(--signal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.help-hero .lead { max-width: 600px; margin: 14px auto 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); text-wrap: balance; }

.hs { max-width: 780px; margin: 22px auto 0; }
.hs svg.hs-art { width: 100%; height: auto; display: block; overflow: visible; fill: none; stroke: none; }
.hs-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; transition: stroke .35s; }
.hs-line.lit { stroke: color-mix(in srgb, var(--text) 35%, var(--line)); }
.hs-phone { fill: var(--card); stroke: color-mix(in srgb, var(--text) 30%, var(--line)); stroke-width: 1.6; }
.hs-screen { fill: var(--bg-soft); stroke: none; transition: fill .3s; }
.hs-screen.lit { fill: color-mix(in srgb, var(--signal) 30%, var(--bg-soft)); }
.hs-bubble { fill: var(--mail-out); stroke: none; opacity: .85; }
.hs-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.hs-halo { fill: var(--accent-soft); stroke: none; }
.hs-face { stroke: none; }
.hs-desk { fill: var(--card); stroke: color-mix(in srgb, var(--text) 22%, var(--line)); stroke-width: 1.6; transition: stroke .3s, fill .3s; }
.hs-desk.working { stroke: var(--working); fill: color-mix(in srgb, var(--working) 10%, var(--card)); }
.hs-desk.done { stroke: var(--live); }
.hs-key { fill: var(--faint); stroke: none; transition: fill .2s; }
.hs-desk.working ~ .hs-key { fill: var(--working); }
.hs-tick { fill: none; stroke: var(--live); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hs-label { fill: var(--muted); stroke: none; font: 600 13px ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.hs-label.big { fill: var(--text); font-size: 14px; }
.hs-token { stroke: none; }
.hs-token.ask { fill: var(--mail-out); }
.hs-token.hand { fill: var(--mail-in); }
.hs-token.done { fill: var(--live); }
.hs-token.answer { fill: var(--signal); }
.hs-pill rect { fill: var(--card); stroke: var(--live); stroke-width: 1.5; }
.hs-pill text { fill: var(--text); stroke: none; font: 650 12.5px ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.hs-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 780px; margin: 10px auto 0; padding: 0; }
.hs-steps li { position: relative; padding: 2px 4px 0 30px; font-size: 13.5px; line-height: 1.4; color: var(--faint); text-align: left; transition: color .4s; }
.hs-steps li b { display: block; color: inherit; font-weight: 650; }
.hs-steps li i {
  position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif; font-style: normal; background: var(--card-hi); color: var(--muted);
  transition: background .4s, color .4s, box-shadow .4s;
}
.hs-steps li.on { color: var(--text); }
.hs-steps li.on i { background: var(--st); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 25%, transparent); }

.help-search { position: relative; max-width: 620px; margin: 34px auto 0; display: flex; align-items: center; }
.help-search svg { position: absolute; left: 17px; width: 19px; height: 19px; color: var(--faint); pointer-events: none; }
.help-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 16.5px; padding: 15px 18px 15px 47px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); box-shadow: var(--shadow);
}
.help-search input:focus { outline: none; border-color: var(--accent); }
.help-search input::-webkit-search-cancel-button { display: none; }
.help-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 14px auto 0; }
.help-chips button { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.help-chips button:hover { color: var(--text); border-color: var(--hc, var(--faint)); }
.help-chips[hidden] { display: none; }

.help-start {
  width: 100%; margin-top: 42px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: 22px 26px; border-radius: 20px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--signal) 12%, var(--card)), var(--card) 62%);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.help-start:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: var(--shadow); }
.help-start .ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--signal); }
.help-start .ic svg { width: 26px; height: 26px; }
.help-start .kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); font-weight: 750; }
.help-start h2 { font-size: 22px; margin-top: 2px; letter-spacing: -0.02em; }
.help-start p { color: var(--muted); margin-top: 3px; font-size: 14px; }

.help-ring { position: relative; width: 66px; height: 66px; flex: none; }
.help-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
.help-ring .bg { fill: none; stroke: var(--line); stroke-width: 6; }
.help-ring .fg { fill: none; stroke: var(--live); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.help-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; }
.help-ring.big, .help-ring.big svg { width: 84px; height: 84px; }
.help-ring.big span { font-size: 18px; }

.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }
.help-card {
  text-align: left; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; gap: 4px; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.help-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hc) 60%, var(--line)); box-shadow: var(--shadow); }
.help-card .ic, .help-res .ic, .help-head .ic, .help-tip .ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  color: var(--hc); background: color-mix(in srgb, var(--hc) 15%, transparent);
}
.help-card .ic svg { width: 21px; height: 21px; }
.help-card h3 { font-size: 16.5px; margin-top: 10px; }
.help-card p { color: var(--muted); font-size: 13.5px; }
.help-card .count { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--faint); }

.help-tip { margin-top: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); }
.help-tip .kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hc); font-weight: 750; }
.help-tip h3 { font-size: 16.5px; margin-top: 3px; }
.help-tip .help-text { margin-top: 4px; }
.help-tip .more { margin-left: auto; }

/* search answers */
.help-results { list-style: none; padding: 0; margin: 20px auto 0; max-width: 720px; }
.help-res { width: 100%; text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 12px 12px; border-radius: 14px; }
.help-res:hover, .help-res:focus-visible { background: var(--card); outline: none; }
.help-res .where { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hc); font-weight: 650; }
.help-res b { display: block; font-size: 15.5px; margin-top: 1px; }
.help-res .snip { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.help-res mark, .help-tip mark { background: color-mix(in srgb, var(--working) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.help-none { text-align: center; color: var(--muted); padding: 30px 0 0; }
.help-none .help-ask { margin-top: 14px; }

/* a section */
.help-page { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; padding-top: 28px; }
.help-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.help-nav button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); text-align: left; font-size: 13.5px; }
.help-nav button svg { width: 17px; height: 17px; color: var(--hc, var(--muted)); }
.help-nav button:hover { background: var(--card-hi); color: var(--text); }
.help-nav button.on { background: var(--sel); color: var(--text); font-weight: 600; }
.help-nav .home { margin-bottom: 10px; color: var(--text); font-weight: 600; }
.help-main { min-width: 0; max-width: 720px; }
.help-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); padding: 4px 0; }
.help-back svg { width: 16px; height: 16px; }
.help-back:hover { color: var(--text); }
.help-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 8px 0 22px; border-bottom: 1px solid var(--line); }
.help-head .ic { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 12px; }
.help-head .ic svg { width: 25px; height: 25px; }
.help-head .tagline { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hc); font-weight: 700; }
.help-head h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.12; margin-top: 2px; }
.help-head .lead { color: var(--muted); font-size: 16px; line-height: 1.55; margin-top: 8px; }
.help-sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 34px 0 0; }

.help-entry { padding: 20px 0 22px; border-bottom: 1px solid var(--hairline); scroll-margin-top: 24px; border-radius: 4px; }
.help-entry h3 { font-size: 17px; letter-spacing: -0.01em; }
.help-text { color: var(--text); font-size: 15px; line-height: 1.6; margin-top: 6px; text-wrap: pretty; }
.help-text p { margin: 0 0 8px; }
.help-text > :last-child { margin-bottom: 0; }
.help-acts { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; align-items: center; }
.help-acts > .help-show:first-child { margin-left: -12px; }
.help-ask {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 9px 12px 9px 14px; text-align: left;
  border-radius: 16px 16px 16px 5px; background: var(--own); border: 1px solid var(--line); font-size: 14px; color: var(--text);
  transition: border-color .2s, transform .2s;
}
.help-ask:hover { border-color: var(--hc, var(--accent)); transform: translateY(-1px); }
.help-ask .q { min-width: 0; overflow-wrap: anywhere; }
.help-ask .go { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--hc, var(--accent)); white-space: nowrap; }
.help-ask .go svg { width: 14px; height: 14px; }
.help-show { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 650; color: var(--hc, var(--accent)); }
.help-show svg { width: 16px; height: 16px; }
.help-show:hover { background: color-mix(in srgb, var(--hc, var(--accent)) 12%, transparent); }
.help-entry.flash, .hq-step.flash { animation: help-flash 2.6s ease; border-radius: 4px; }
@keyframes help-flash {
  0%, 35% { background: color-mix(in srgb, var(--hc) 12%, transparent); box-shadow: 0 0 0 12px color-mix(in srgb, var(--hc) 12%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 12px transparent; }
}
.help-next { display: flex; gap: 12px; margin-top: 34px; }
.help-next button { flex: 1; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); transition: border-color .2s; }
.help-next button:hover { border-color: var(--hc); }
.help-next button.next { text-align: right; }
.help-next .dir { font-size: 11.5px; color: var(--faint); }
.help-next b { display: block; font-size: 15px; margin-top: 2px; }

/* the Quick start: steps that tick themselves */
.hq-steps { list-style: none; margin: 6px 0 0; padding: 0; }
.hq-step { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hairline); scroll-margin-top: 24px; }
.hq-step::before { content: ""; position: absolute; left: 18px; top: 62px; bottom: -22px; width: 2px; background: var(--line); }
.hq-step:last-child::before { display: none; }
.hq-step.done::before { background: color-mix(in srgb, var(--live) 55%, var(--line)); }
.hq-mark {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--bg); color: var(--muted); font-weight: 750; font-size: 15px;
  transition: background .5s, border-color .5s, color .5s;
}
.hq-mark svg { width: 19px; height: 19px; stroke-width: 2.8; stroke-dasharray: 26; stroke-dashoffset: 26; }
.hq-step.done .hq-mark { background: var(--live); border-color: var(--live); color: #fff; }
.hq-step.done .hq-mark svg { animation: hq-draw .55s .25s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes hq-draw { to { stroke-dashoffset: 0; } }
.hq-step h3 { font-size: 17.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hq-step .state { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--live); }
.hq-done { margin-top: 18px; padding: 14px 18px; border-radius: 14px; color: var(--live); font-weight: 650; background: color-mix(in srgb, var(--live) 10%, transparent); }
.hq-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.hq-qr { width: 156px; height: 156px; flex: none; padding: 6px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.hq-qr svg { width: 100%; height: 100%; }
.hq-phone .side { min-width: 0; flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.hq-phone .addr { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.hq-phone .why { font-size: 13.5px; color: var(--muted); }
/* The same code in Settings → Devices (2026-10-22): the picture, which
   address, the address - the row's own words already say what to do. */
.hq-phone.compact { flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 0; }
.hq-phone.compact .side { flex: none; align-items: flex-end; gap: 6px; }
.hq-phone .phone-where { flex-wrap: wrap; }
@media (max-width: 899px) { .hq-phone.compact { align-items: flex-start; } }

/* What notifies this device (2026-10-22): three ticks, two times, the mutes */
.notify-ctl .tick-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.notify-ctl .tick-label input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.quiet-times { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.quiet-times[hidden] { display: none; }
.quiet-times input {
  padding: 6px 9px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--card-hi); border: 1px solid var(--line);
}
.quiet-times input:focus { outline: none; border-color: var(--accent); }
.mute-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
.mute-chip .x { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.mute-chip .x:hover { color: var(--text); background: var(--card-hi); }
.mute-chip .x svg { width: 12px; height: 12px; }

/* Shared from another app (2026-10-22): what came, ready to check and send */
.share-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.share-files li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.share-files svg { width: 15px; height: 15px; flex: none; }
.share-files .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* "Show me": the thing he was told about lights up where it lives */
.help-spot { animation: help-spot 2.6s ease; }
@keyframes help-spot {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  14%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 80%, transparent), 0 0 26px 6px color-mix(in srgb, var(--signal) 45%, transparent); }
}
.rail-btn .new-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px var(--rail); }
.rail-btn .new-dot[hidden] { display: none; }

@media (max-width: 899px) {
  .help-frame { padding: 0 0 44px; }
  .help-hero { padding-top: 28px; }
  .help-hero .lead { font-size: 15px; }
  .hs { margin-top: 14px; }
  /* The scene is drawn at half size on a phone: its words are not. */
  .hs-label { font-size: 21px; }
  .hs-label.big { font-size: 22px; }
  .hs-pill text { font-size: 19px; }
  .hs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .help-search { margin-top: 26px; }
  .help-start { grid-template-columns: minmax(0, 1fr) auto; padding: 18px; gap: 14px; margin-top: 30px; }
  .help-start .ic { display: none; }
  .help-grid { grid-template-columns: 1fr; }
  .help-page { grid-template-columns: 1fr; gap: 0; padding-top: 14px; }
  .help-nav { display: none; }
  .help-head { grid-template-columns: 1fr; }
  .help-next { flex-direction: column; }
  .hq-qr { width: 132px; height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hq-mark svg { stroke-dashoffset: 0; }
}

/* ---- a column beside the main one (split, ?pane=1) ----------------------
   The conversation and nothing else: no rail, no desk list, no bell (the
   window around it has them). Last in the file, so it outranks the phone
   rules a narrow column also gets. */
body.pane .rail, body.pane .channels, body.pane #to-channels, body.pane .bell-wrap,
body.pane .back-to-chat, body.pane .beside, body.pane .col-tabs { display: none !important; }
body.pane .app, body.pane.panel-closed .app, body.pane.panel-open .app {
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0 var(--panel-w);
}
body.pane .chat-head { padding-left: 16px; }
@media (max-width: 899px) {
  body.pane .app, body.pane.panel-closed .app, body.pane.panel-open .app {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "main";
  }
  body.pane.panel-open .activity-panel, body.pane.canvas-open[data-view="chat"] .activity-panel { height: 100dvh; }
}

/* Open beside, on the row under the pointer (split). A phone long-presses. */
.chan-split { display: none; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px;
  margin-right: -4px; border-radius: 6px; color: var(--muted); }
.chan-split svg { width: 14px; height: 14px; }
.chan:hover .chan-split { display: inline-flex; }
.chan-split:hover { background: var(--card); color: var(--text); }
@media (hover: none) { .chan:hover .chan-split { display: none; } }

/* ---- the right panel follows the column he works in (split) -------------
   A column beside the main one: the window's panel steps aside for a frame
   showing that column's panel (`panel-beside`); its canvas widens the column
   (`beside-canvas`), the window's own canvas does not. */
.panel-frame { display: none; flex: 1; width: 100%; min-height: 0; border: 0; background: var(--bg-soft); }
body.panel-beside .activity-panel > :not(.resizer):not(.panel-frame) { display: none !important; }
body.panel-beside .panel-frame { display: block; }
body.panel-beside.canvas-open { --panel-w: inherit; }
body.panel-beside.beside-canvas { --panel-w: var(--canvas-w); }
body.resizing .panel-frame { pointer-events: none; }
/* ...and that frame: the panel, nothing else. */
body.panel-only .chat { display: none !important; }
body.panel-only .app, body.panel-only.panel-closed .app, body.panel-only.panel-open .app {
  grid-template-columns: 0 0 0 0 0 minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "rail channels chat beside1 beside2 panel";
}
body.panel-only .activity-panel {
  grid-area: panel; display: flex !important; position: static !important; height: 100dvh !important; box-shadow: none !important; border-left: 0;
}
body.panel-only .activity-panel > .resizer, body.panel-only #panel-close { display: none !important; }

/* Inside a paired portal's frame (embed.js, 2026-11-06). A portal's GUEST - a
   person the owner does not trust (`embed-guest`): their desks and their own
   conversation, nothing of the console around them. No rail, no Projects/Chats
   switch, no invite, bell, canvas or activity panel, and no files or voice. */
html.embed-guest .rail, html.embed-guest #side-switch, html.embed-guest #people-wrap, html.embed-guest .bell-wrap,
html.embed-guest #toggle-canvas, html.embed-guest #toggle-panel, html.embed-guest #col-close, html.embed-guest #attach,
html.embed-guest #dictate, html.embed-guest #record, html.embed-guest .activity-panel { display: none !important; }
@media (min-width: 900px) {
  html.embed-guest .app {
    grid-template-columns: 0 var(--channels-w) minmax(0, 1fr) 0 0 0 !important;
    grid-template-areas: "rail channels chat beside1 beside2 panel" !important;
  }
}
/* A TRUSTED portal person (`embed-full`, v2) gets the window a member gets here.
   What no frame has: a column beside (a second page without the frame's
   session) and the owner's quick chats. */
html.embed .chan-split, html.embed #col-close, html.embed #side-switch { display: none !important; }
/* No Help inside a portal: the portal has its own (owner, 2026-11-07). */
html.embed #help-btn { display: none !important; }
/* The words their portal's auditor asked to be on the first screen, once. */
.embed-words {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius, 12px);
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.embed-words p { margin: 0; }
@media (max-width: 700px) { .embed-words { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
/* Settings → In a portal: what the desks did for one person, names only. */
.embed-audit { list-style: none; margin: 2px 0 8px 12px; padding: 0; }
.embed-audit li { font-size: 12.5px; padding: 2px 0; }
.embed-words button { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
.embed-line {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 10px 16px;
  background: var(--card); border-bottom: 1px solid var(--line); color: var(--text);
  font-size: 14px; text-align: center;
}
.embed-line[hidden] { display: none; }
/* Before a session exists (the server marks /embed's page `embed-frame`) and
   after it ended (embed.js `embed-over`), the frame shows its one line and
   nothing of the app behind it (joint test run 1, 2026-11-06). */
html.embed-frame:not(.embed-live) body > :not(#embed-line) { display: none !important; }
html.embed-over body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
html.embed-over .embed-line { position: static; border: 0; background: none; padding: 24px 16px; }
/* Settings → In a portal: what a portal sees, in one line, and its picker -
   «all projects», or only the ones picked: a project per line, its desks
   folded under it, smaller and indented (owner, 2026-11-07: "categories and
   desks look the same"). */
.embed-ctl { flex-wrap: wrap; }
.note.embed-code { font-weight: 650; font-variant-numeric: tabular-nums; }
.embed-portal > .u-head > .u-who, .embed-share > .u-head > .u-sub, .embed-person > .u-who { flex: 1; }
@media (max-width: 700px) {
  /* A phone: the name on its line, what can be done with it on the next. */
  .embed-portal > .u-head, .embed-person { flex-wrap: wrap; }
  .embed-portal > .u-head > .u-who, .embed-person > .u-who { flex: 1 1 100%; }
}
.embed-share > .u-head { gap: 10px; padding-top: 0; }
.embed-share-edit .save {
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
}
.embed-share-edit { display: grid; gap: 8px; margin: 4px 12px 12px; }
.embed-share-edit .tick-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; min-width: 0; }
.embed-share-edit .tick-label input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
.embed-share-list { list-style: none; margin: 2px 0 4px 24px; padding: 0; display: flex; flex-direction: column; }
.embed-share-list[hidden] { display: none; }
/* Inside a portal's card (.user-list li): a line, not another card. */
.user-list .embed-share-list li { border: 0; border-radius: 0; background: transparent; }
.embed-share-head { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 4px 0 8px; border-radius: 8px; }
.embed-share-head:hover { background: var(--card-hi); }
.embed-share-head .tick-label { flex: 1; font-weight: 550; }
.embed-share-sum { font-size: 12px; color: var(--muted); white-space: nowrap; }
.embed-share-fold { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--faint); background: transparent; flex: none; }
.embed-share-fold:hover { color: var(--text); }
.embed-share-fold .chev { width: 14px; height: 14px; transition: transform .15s; }
.embed-share-list li.open .embed-share-fold .chev { transform: rotate(180deg); }
.embed-share-desks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 8px 15px; padding: 4px 0 4px 18px;
  border-left: 1px solid var(--line); }
.embed-share-desks[hidden] { display: none; }
.embed-share-desks .tick-label { font-size: 12.5px; color: var(--muted); }
.embed-share-desks .tick-label input { width: 14px; height: 14px; }