/* The shell: Finite.Computer's look (Skyler's handoff, 2026-10-02; tokens
   from finitecomputer-v2's dashboard). Dark by default. Skyler's light and
   dark landscapes stay anchored to the viewport (CREDITS.md). */

/* the shell's action icons' size; app artwork, agent avatars and filled
   status marks keep their own scale */
:root { --icon-size: 16px; }
/* an action's tooltip (tooltips.js) */
.action-tooltip {
  position: fixed; z-index: 10000; width: max-content; max-width: calc(100vw - 12px);
  padding: 4px 7px; border-radius: 5px; background: var(--tooltip-bg); color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border), 0 2px 8px var(--tooltip-shadow); pointer-events: none;
  font: 500 11px/1.4 var(--font-sans, system-ui); white-space: nowrap;
}
.action-tooltip[hidden] { display: none; }
.action-tooltip.is-description { max-width: min(260px, calc(100vw - 12px)); padding: 8px 10px; border-radius: 8px; font-size: 12px; white-space: normal; }
/* thin scrollbars */
:root { --scrollbar-thumb: rgba(180, 180, 180, .28); --scrollbar-hover: rgba(180, 180, 180, .45); }
@media (prefers-color-scheme: light) {
  :root { --scrollbar-thumb: rgba(70, 70, 70, .25); --scrollbar-hover: rgba(70, 70, 70, .42); }
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (forced-colors: active) { * { scrollbar-color: auto; } }

:root {
  --bg-window:#212121; --bg-sidebar:#181818; --bg-hover:rgba(255,255,255,.055); --bg-active:#2f2f2f;
  --bg-card:#171615; --surface-subtle:#262625; --surface-muted:#2b2b2a;
  --chat-composer:#323231; --chat-code:#2b2b2b;
  --tooltip-bg:#363636; --tooltip-shadow:rgba(0,0,0,.2);
  --text-primary:#ececec; --text-secondary:#a6a19d; --text-tertiary:#706d69; --text-icon:#bfbfbf;
  --accent-blue:#8ab4ff; --success:#39d98a;
  --border:rgba(255,255,255,.085); --border-strong:rgba(255,255,255,.16);
  --danger-text:#f3b3b3;
  --primary:var(--text-primary); --primary-foreground:var(--bg-window);
  --font-sans:"Funnel Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* the type library: finite-mono's dashboard's (finitecomputer-v2/apps/dashboard/
     src/styles/typography.css), its styles as font shorthands, tracking 0,
     and a control's words and a field's as its Button and Input set theirs
     (body's size at medium; 16px where a phone zooms into smaller, body's
     size from 48rem). Settings and its dialogs take only these. */
  --type-display: 600 2rem/1.1 var(--font-sans);
  --type-title-1: 600 1.75rem/1.15 var(--font-sans);
  --type-title-2: 600 1.375rem/1.2 var(--font-sans);
  --type-title-3: 600 1.125rem/1.25 var(--font-sans);
  --type-body-lg: 400 .9375rem/1.45 var(--font-sans);
  --type-body: 400 .875rem/1.45 var(--font-sans);
  --type-body-strong: 600 .875rem/1.45 var(--font-sans);
  --type-body-sm: 400 .8125rem/1.4 var(--font-sans);
  --type-caption: 500 .75rem/1.35 var(--font-sans);
  --type-label: 600 .6875rem/1.2 var(--font-sans);
  --type-mono: 400 .8125rem/1.45 var(--font-mono);
  --type-mono-sm: 400 .75rem/1.4 var(--font-mono);
  --type-control: 500 .875rem/1.45 var(--font-sans);
  --type-field: 400 1rem/1.45 var(--font-sans);
  --wallpaper-dark-opacity: 1;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg-window:#f7f6f3; --bg-sidebar:#ebe9e5; --bg-hover:rgba(20,20,20,.055); --bg-active:#e3e0db;
    --bg-card:#fffdfa; --surface-subtle:#f0eee9; --surface-muted:#e9e6df;
    --chat-composer:#fffdf9; --chat-code:#ece8df;
    --tooltip-bg:var(--bg-card); --tooltip-shadow:rgba(0,0,0,.1);
    --text-primary:#171717; --text-secondary:#66615b; --text-tertiary:#918a82; --text-icon:#5d5954;
    --accent-blue:#315fbd; --success:#167a52;
    --border:rgba(20,20,20,.105); --border-strong:rgba(20,20,20,.18);
    --danger-text:#81112f;
    --wallpaper-dark-opacity: 0;
    color-scheme: light;
  }
}

@media (min-width: 48rem) { :root { --type-field: 400 .875rem/1.45 var(--font-sans); } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A native app's page (Paul, 2026-10-13: "staying strictly in the
   viewport"): the page itself never scrolls, bounces or zooms. html and
   body are pinned; only the real scroll areas scroll (the chat list, the
   settings, the launcher, sheets, a window's frame), each keeping its own
   overscroll. The body is as tall as what is visible, from where it is
   (--viewport-*: shell.js `fitViewport`, from the visual viewport, which is
   what a phone's keyboard shrinks: Safari leaves the layout viewport be),
   and is the containing block of everything fixed in it (the sheet, the
   list, the + button), so the composer and the windows sit above the
   keyboard and nothing slides under it. */
html, body { position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--bg-window); color: var(--text-primary); }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { top: var(--viewport-top, 0px); bottom: auto; height: var(--viewport-height, 100%); transform: translateZ(0); font: 15px/1.5 var(--font-sans); font-feature-settings: "ss01", "cv11", "kern"; -webkit-font-smoothing: antialiased; }
:root { --vh: var(--viewport-height, 100dvh); }
/* the screen's bottom edge's inset (the home indicator's), for what sits on
   that edge; with a keyboard up the page ends at the keyboard, the edge under
   it (shell.js `fitViewport`), and nothing keeps clear of it */
:root { --inset-bottom: env(safe-area-inset-bottom, 0px); }
:root[data-keyboard] { --inset-bottom: 0px; }
/* "Still loading… Reload" (index.html): hidden, then shown 9 s after the
   page, past a slow phone's whole load of the shell (its page, its nine
   scripts and their first answers), if shell.js has not drawn the shell,
   and so taken it away, by then */
.still-loading { position: fixed; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin: 0; padding: 24px; color: var(--text-secondary); visibility: hidden; animation: still-loading 0s 9s forwards; }
.still-loading a { color: var(--accent-blue); }
@keyframes still-loading { to { visibility: visible; } }
/* the chrome is the app's, not text to select or hold; what people write and read stays selectable */
button, .row, .menu, .topbar, .sidebar-top, .settings-nav, .pane-head, .desktop-dock, .chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, a, .row, summary, label { touch-action: manipulation; }
.rows, .page, .pane-body, .search-dialog, .search-results, .menu, .first-run { overscroll-behavior: contain; }
button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* ---- frame: sidebar | gutter | chat | gutter | viewer (layout.js writes the columns) ---- */
.layout { display: grid; grid-template-columns: 264px 1px 1fr 0px 0px; grid-template-rows: 100%; height: 100%; overflow: hidden; background: var(--bg-sidebar); }
.layout > * { min-width: 0; min-height: 0; overflow: hidden; }
.sidebar-shell { grid-column: 1; padding: 8px 0 8px 8px; background: var(--bg-sidebar); }
#gutter-left { grid-column: 2; background: var(--bg-sidebar); }
.chat { grid-column: 3; }
#gutter-right { grid-column: 4; background: transparent; }
.viewer { grid-column: 5; }
.layout:not(.left-open) .sidebar-shell, .layout:not(.left-open) #gutter-left,
.layout:not(.right-open) .viewer, .layout:not(.right-open) #gutter-right { display: none; }
.layout.moving-left .sidebar-shell, .layout.moving-left #gutter-left { display: block; }
.layout.moving-right .viewer { display: flex; }
.layout.moving-right #gutter-right { display: block; }
.layout.left-open .when-left-closed { display: none; }

/* Gutters are 1 px lines with a wider invisible grab area; the accent shows on hover and while dragging. */
.gutter { position: relative; z-index: 2; overflow: visible !important; background: var(--border); transition: background .12s .08s; }
.gutter::before { content: ""; position: absolute; }
.gutter-col { cursor: col-resize; z-index: 3; } /* above row gutters where they cross */
.gutter-col::before { inset: 0 -4px; }
.gutter-row { cursor: row-resize; }
.gutter-row::before { inset: -4px 0; }
.gutter:hover, .gutter:active { background: var(--accent-blue); }
body.resizing iframe { pointer-events: none; }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; }
body.resizing-row, body.resizing-row * { cursor: row-resize !important; }

/* ---- sidebar ---- */
.sidebar { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; background: var(--bg-sidebar); overflow: hidden; }
.sidebar > * { position: relative; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 8px; }
.brand { font-weight: 600; font-size: 15px; padding: 0 8px; }
.rows { display: flex; flex-direction: column; gap: 1px; max-height: 38vh; overflow-y: auto; scrollbar-width: thin; }
.row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; color: var(--text-primary); transition: background .12s; }
.row:hover { background: var(--bg-hover); }
.row.active { background: var(--bg-active); }
.row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { font-size: 12px; color: var(--text-tertiary); }
.row.open::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); flex: none; }
.row .shared, .pane-head .shared { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-tertiary); flex: none; }
.row .shared svg, .pane-head .shared svg { width: var(--icon-size); height: var(--icon-size); }
.menu { position: fixed; z-index: 20; min-width: 150px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--bg-hover); outline: none; }
.menu svg { width: var(--icon-size); height: var(--icon-size); color: var(--text-secondary); }
.row.settings { color: var(--text-secondary); text-decoration: none; }
.row.settings svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the share sheet's dialog: the sheet's own surface (platform-pages.css
   --surface, which the sheet is drawn on), the frame its whole width and
   as tall as it says (shell.js `share`) */
.sheet { padding: 0; border: 0; border-radius: 14px; width: min(32rem, calc(100vw - 32px)); background: var(--surface); box-shadow: 0 12px 48px rgba(0,0,0,.45); overflow: hidden; }
.sheet::backdrop { background: rgba(0,0,0,.55); }
.sheet { max-height: calc(var(--vh) - 32px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.sheet iframe { display: block; width: 100%; height: 26rem; max-height: none; border: 0; }
.empty-row { font-size: 13px; color: var(--text-tertiary); padding: 6px 8px; }
/* the Session Archive (session-archive.js): a quiet heading that folds its rows */
.spacer { flex: 1; }

/* ---- chat column ---- */
.chat { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--bg-sidebar); }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 10px 14px; font-size: 14px; }
.topbar .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .grow, .pane-head .grow { flex: 1; }
.toggle-right { position: relative; }
.badge { position: absolute; top: 2px; right: 1px; min-width: var(--icon-size); height: var(--icon-size); padding: 0 4px; border-radius: 999px; background: var(--accent-blue); color: var(--bg-window); font: 700 10px/15px var(--font-sans); text-align: center; }
.layout.right-open .badge { display: none; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px; padding: 0; flex: none; background: none; color: var(--text-icon); transition: background .12s; }
.icon-button:hover { background: var(--bg-hover); }
.icon-button.small { width: 32px; height: 32px; }
.icon-button.small svg { width: var(--icon-size); height: var(--icon-size); }
/* the open chat is a chat fragment's own page; each chat keeps its frame */
.frames { flex: 1; min-height: 0; position: relative; border-top: 1px solid var(--border); }
/* a middle-column page's own scheme is its own (a chat's and the archive's
   paint their background): a frame of the shell's dark scheme would paint
   the empty page it holds before one comes white */
.frames > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }
/* a chat's stand-in while its page comes (frame-standin.js): the room's
   colour, its composer's outline where the page's will be, and past 1.5 s
   a quiet spinner */
.frame-standin { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var(--bg-sidebar); pointer-events: none; }
.standin-composer { width: min(760px, calc(100% - 16px)); height: 99px; margin-bottom: 8px; border-radius: 12px; background: var(--chat-composer); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
/* a phone's chat (the shell's `mobileChat`, chat.css's own): one line, rounded */
@media (max-width: 760px) { .standin-composer { width: calc(100% - 24px); height: 46px; border-radius: 23px; } }
.standin-wait { position: absolute; top: calc(50% - 60px); left: calc(50% - 9px); width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--text-tertiary); border-radius: 50%; opacity: 0; animation: standin-spin .9s linear infinite, standin-show .3s ease 1.5s forwards; }
@keyframes standin-spin { to { transform: rotate(360deg); } }
@keyframes standin-show { to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .standin-wait { animation: standin-show .3s ease 1.5s forwards; } }
.notice { margin: 12vh auto 0; max-width: 28rem; padding: 24px; text-align: center; color: var(--text-secondary); }
.notice > strong { display: block; color: var(--text-primary); font-size: 17px; margin-bottom: 6px; }
.notice a, .notice button { color: var(--accent-blue); background: none; border: 0; padding: 0; text-decoration: underline; }
.notice-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 8px; }
.notice-row form { margin: 0; }
/* what the person should know of their computer (shell.js renderComputer):
   a band over the chat or settings, one row a notice */
.computer-notices { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 10px; }
.computer-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-card); font-size: 13.5px; line-height: 1.45; }
.computer-notice.warn { border-color: color-mix(in srgb, var(--danger-text) 45%, transparent); }
.computer-notice .notice-copy { flex: 1; min-width: 0; color: var(--text-secondary); }
.computer-notice .notice-copy strong { display: block; color: var(--text-primary); font-size: 14px; margin-bottom: 2px; }
.computer-notice .notice-copy p { margin: 0; }
.computer-notice .notice-detail { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.computer-notice .notice-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.computer-notice .notice-actions button, .computer-notice .notice-actions a { height: 28px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-primary); font: 600 13px/26px var(--font-sans); text-decoration: none; }
.computer-notice .notice-actions .primary { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.computer-notice .notice-actions button:disabled { opacity: .6; cursor: default; }
/* a restart's step, where its buttons were (computer.js `restartStep`) */
.restart-status { color: var(--text-secondary); font: 600 13px/28px var(--font-sans); white-space: nowrap; }
@media (max-width: 640px) { .computer-notice { flex-direction: column; } }
/* the way on from a frame that could not sign in (shell.js `BLOCKED`) */
.notice .allow { display: inline-block; margin-top: 12px; background: none; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-primary); text-decoration: none; font-weight: 600; }
/* ---- viewer: panes stacked vertically (viewer.js writes the rows) ---- */
/* Fixed attachment shares the viewport's crop with search, regardless of panel size. */
.viewer { display: flex; flex-direction: column; border-radius: 16px 16px 0 16px; overflow: hidden; clip-path: inset(0 round 16px 16px 0 16px); }
/* Keep both images mounted. The light layer stays opaque while the dark
   layer fades over it, so no empty background shows through mid-transition.
   shell.js waits for the target image to decode before changing opacity. */
.wallpaper { position: fixed; inset: 0; z-index: -2; transform: scaleX(-1); pointer-events: none; }
.wallpaper::before, .wallpaper::after { content: ""; position: absolute; inset: 0; }
.wallpaper::before { background: #80b2df url("/__shell/wallpaper.jpg") center / cover no-repeat; }
.wallpaper::after { background: #071f3d url("/__shell/wallpaper-dark.jpg") center / cover no-repeat; opacity: var(--wallpaper-dark-opacity); transition: opacity 450ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .wallpaper::after { transition: none; } }
.stack { flex: 1; display: grid; grid-template-columns: 100%; min-height: 0; padding: 8px; }
.stack > * { min-height: 0; overflow: hidden; }
.viewer.is-empty .stack { display: none; }
.pane { position: relative; --window-light: 0; display: flex; flex-direction: column; min-width: 0; margin: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--bg-window); }
.pane { transform-origin: center; }
.pane::before, .pane::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: radial-gradient(var(--window-radius, 180px) circle at var(--window-x, 50%) var(--window-y, 50%), rgba(255,255,255,.65), rgba(255,255,255,.16) 45%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--window-light); transition: opacity 160ms ease-out;
}
.pane::after { filter: blur(2px); opacity: calc(var(--window-light) * .35); }
@media (prefers-reduced-motion: reduce) { .pane::before, .pane::after { transition: none; } }
.stack > .gutter-row { background: transparent; }
.pane.flash .pane-head { animation: flash .9s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent-blue), transparent 72%); } }
.pane-head { cursor: grab; display: flex; align-items: center; gap: 8px; height: 36px; flex: none; padding: 0 4px 0 calc((36px - 1px - var(--icon-size)) / 2); border-bottom: 1px solid var(--border); background: var(--bg-sidebar); font-size: 13px; user-select: none; }
.stack { position: relative; }
.pane.dragging { opacity: .55; }
.pane.dragging .pane-head { background: var(--bg-active); }
.drop-line { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--accent-blue); z-index: 4; pointer-events: none; }
body.reordering, body.reordering * { cursor: grabbing !important; }
body.reordering iframe { pointer-events: none; }
.pane-icon { display: grid; place-items: center; color: var(--text-secondary); }
.pane-icon svg { width: var(--icon-size); height: var(--icon-size); }
.pane-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane-sub { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 9; }
/* an app pane's sharing, after its title (shell.js `openApp`); a narrow pane drops it, keeping its title */
.pane { container: pane / inline-size; }
.pane-sharing { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 4; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
@container pane (max-width: 340px) { .pane-sharing { display: none; } }
.pane-action { width: 32px; height: 32px; border-radius: 7px; }
.pane-action svg { width: var(--icon-size); height: var(--icon-size); }
.pane-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; }
.pane-body > iframe { flex: 1; width: 100%; border: 0; background: var(--bg-window); }
/* asking for an app, a window on the desktop (shell.js showPrompts): each
   a way to ask, pressed into the chat's composer */
.app-prompts { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.app-prompts-lede { margin: 0 2px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.app-prompt-list { display: flex; flex-direction: column; gap: 8px; }
.app-prompt { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; transition: background-color .15s, border-color .15s; }
.app-prompt:hover, .app-prompt:focus-visible { border-color: var(--border-strong); background: var(--bg-hover); outline: none; }
/* the die under a hand of them, which deals three more (shell.js rollPrompts),
   and the hand it dealt coming in */
.prompt-dice { display: grid; place-items: center; align-self: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); font-size: 20px; line-height: 1; transition: background-color .15s, border-color .15s, transform .2s ease-out; }
.prompt-dice:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.prompt-dice:active { transform: rotate(-40deg) scale(.92); }
[data-prompts].dealt > * { animation: prompt-dealt .2s ease-out both; }
[data-prompts].dealt > :nth-child(2) { animation-delay: 40ms; }
[data-prompts].dealt > :nth-child(3) { animation-delay: 80ms; }
@keyframes prompt-dealt { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .prompt-dice { transition: none; } .prompt-dice:active { transform: none; } [data-prompts].dealt > * { animation: none; } }

/* ---- narrow: the sides become overlays over the chat ---- */
.scrim { display: none; }
@media (max-width: 760px) {
  html, body { touch-action: pan-x pan-y; }
  /* no zoom as a field takes focus: Safari zooms in on text under 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select { font-size: 16px !important; }
  /* a phone's own edges: the status bar, the home indicator, a notch turned sideways */
  .layout.narrow { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .layout.narrow .chat { padding-bottom: var(--inset-bottom); }
  .layout.narrow .sidebar-shell, .layout.narrow .viewer { position: fixed; z-index: 10; top: 0; bottom: 0; }
  .layout.narrow .sidebar-shell { left: 0; width: 100%; padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  /* the viewer is a sheet from the bottom, the chat's top still showing above it */
  .layout.narrow .viewer { top: auto; left: 0; right: 0; height: min(calc(var(--vh) * .88), calc(var(--vh) - 48px - env(safe-area-inset-top, 0px))); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; clip-path: inset(0 round 16px 16px 0 0); box-shadow: 0 -12px 32px rgba(0,0,0,.28); }
  .layout.narrow .viewer .stack { padding: 6px 6px max(6px, var(--inset-bottom)); }
  /* the sheet is its wallpaper's box throughout (a fixed child's, as a
     transform makes it): not only while it slides in, which left the
     wallpaper re-placed against the whole screen once it stopped
     (Paul, 2026-11-02: the background shifted as a fragment opened) */
  .layout.narrow .viewer { will-change: transform; }
  /* the sheet is the whole viewer: no pane needs maximizing in it, and its title keeps the room */
  .layout.narrow .pane-max { display: none; }
  .layout.narrow .gutter-col { display: none; }
  .layout.narrow.left-open .when-left-closed { display: inline-grid; }
  .scrim.on { display: block; position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.42); }
}

/* Each conversation is presented as its own agent. */
.sidebar { height: 100%; min-height: 0; padding: 12px 12px 14px; border-radius: 12px; background: var(--bg-window); }
.sidebar-top { margin: 0 0 2px; }
.brand { font-size: 15px; letter-spacing: -.25px; }
#chats { max-height: none; min-height: 60px; flex: 1; gap: 3px; }
.sidebar > .spacer { flex: none; }
.agent-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.agent-preview { font-size: 13px; line-height: 1.3; color: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#chats .row.active { background: var(--bg-active); }
/* a chat's unread (shell.js `unreadMark`): a count */
/* the chat an agent reaches its person in, its home (shell.js `homeMark`) */
.row .home-mark { flex: none; display: inline-grid; place-items: center; color: var(--text-tertiary); }
.row .home-mark svg { width: 14px; height: 14px; stroke-width: 1.8; }
.row .unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-blue); color: var(--bg-window); font: 700 11px/20px var(--font-sans); text-align: center; }
.topbar { min-height: 76px; gap: 10px; }
.frames { border-top: 0; }
.rename-agent { font: var(--type-body); padding: 28px; width: min(400px, calc(100vw - 32px)); border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-card); color: var(--text-primary); }
.rename-agent::backdrop { background: rgba(0,0,0,.5); }
.rename-agent h2 { font: var(--type-title-2); margin: 0 0 8px; }
.rename-agent p { font: var(--type-body); color: var(--text-secondary); }
.rename-agent label { font: var(--type-body-sm); display: block; margin: 24px 0 8px; }
.rename-agent input { font: var(--type-field); width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px; color: inherit; background: var(--bg-window); }
.rename-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
/* a connector's setup (connector-setup.js): its title, its agent's name
   hugging it, then the connector's own page, framed on the dialog's
   surface (the page transparent, in the shell's light or dark) at one
   height, and Done; a frame that can't sign in has its note in its place */
.connector-setup { width: min(440px, calc(100vw - 32px)); }
.connector-setup h2 { margin: 0; }
.connector-setup .connector-setup-agent { margin: 4px 0 0; }
/* its page's 3 px of room for a focus ring sit outside the dialog's
   column, so its words line up with the title's */
.connector-setup-frame { display: block; width: calc(100% + 6px); height: 120px; margin: 17px -3px 0; border: 0; background: transparent; }
.connector-setup .rename-actions { margin-top: 12px; }
.connector-setup .frame-note { margin-top: 20px; background: none; }
.connector-setup .frame-note .notice { margin: 0; padding: 0; max-width: none; text-align: left; }
.connector-setup-frame.tall { height: 316px; }
@media (max-width: 520px) { .connector-setup-frame, .connector-setup-frame.tall { height: 140px; } }
/* a dialog's buttons: pills that keep their size and colours in every state
   (disabled while it saves or arms: fragment-title.js holds its width) */
.rename-actions button { font: var(--type-control); min-height: 40px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-muted); }
.rename-actions button[type=submit] { border-color: var(--text-primary); background: var(--text-primary); color: var(--bg-window); }
button:focus-visible, .rename-agent input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
@media (max-width: 760px) { .topbar { min-height: 64px; padding: 8px; gap: 5px; } .topbar .grow { display: none; } }

/* Small, flat favicon-style app marks. */
.app-icon { --app-color: #8f88bc; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--app-color); color: #fff; flex: none; overflow: hidden; }
.app-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* an app's card: its page at 1280×800 (16:10) as the platform shot it
   after its last deploy, over its dock icon while a pointer is on it */
.card-peek { position: fixed; z-index: 30; width: 320px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--bg-card); box-shadow: 0 0 0 1px var(--border-strong), 0 10px 28px rgba(0,0,0,.35); pointer-events: none; }
.card-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Center the conversation title when space allows; reserve room for its actions. */
.topbar { display: grid; grid-template-columns: minmax(32px, 1fr) minmax(0, auto) minmax(70px, 1fr); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-right { justify-content: flex-end; }
.chat-heading { display: flex; align-items: center; justify-self: center; gap: 9px; min-width: 0; max-width: 100%; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
@media (min-width: 761px) { #new-chat { display: none; } }
@media (max-width: 760px) { .topbar { grid-template-columns: minmax(32px, 1fr) minmax(0, auto) minmax(108px, 1fr); } }

.sidebar-top .brand { min-width: 0; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-dialog { --search-top: max(calc(24px + env(safe-area-inset-top, 0px)), calc(var(--vh) / 2 - 33px)); --search-file-room: 0px; --search-status-room: 0px; position: fixed; inset: 0; top: var(--viewport-top, 0px); bottom: auto; width: 100%; max-width: none; height: var(--vh); max-height: none; margin: 0; padding: var(--search-top) 20px 24px; border: 0; border-radius: 0; background: transparent; isolation: isolate; color: var(--text-primary); overflow-y: auto; }
.search-dialog.has-files { --search-file-room: 58px; }
.search-dialog[open] { display: block; animation: search-landscape-in 280ms cubic-bezier(.22, 1, .36, 1) both; }
/* Transparent underneath: the landscape fades over the current workspace. */
.search-dialog::backdrop { background: transparent; }
/* Keep the input centered; what grows below it shrinks and scrolls. */
.search-panel { position: relative; display: flex; flex-direction: column; width: min(620px, 100%); max-height: calc(var(--vh) - var(--search-top) - 24px); margin: 0 auto; overflow: hidden; border: 0; border-radius: 33px; background: var(--bg-sidebar); }
.search-dialog[open] .search-panel { animation: search-panel-in 240ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes search-landscape-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes search-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .search-dialog[open], .search-dialog[open] .search-panel { animation: none; } }
.search-input-wrap { display: flex; flex: none; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 22px; background: transparent; }
/* one line at rest, growing to INPUT_MAX_PX (launcher.js) or the visual viewport's room, then scrolling; files and a status keep their room too */
#workspace-search { display: block; flex: 1; min-width: 0; width: 100%; height: 44px; max-height: min(200px, calc(var(--vh) - var(--search-top) - 44px - var(--search-file-room) - var(--search-status-room))); padding: 10px 0; overflow-y: auto; resize: none; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 17px; line-height: 24px; box-shadow: none; }
/* on one line too, cut short on a phone (a textarea's would wrap to a second) */
#workspace-search::placeholder { color: var(--text-secondary); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#workspace-search:focus-visible { outline: none; }
/* centred on the input's last line (its 24px line, 10px padding) */
.search-send { flex: none; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); }
.search-send:hover { background: var(--text-secondary); }
.search-send:disabled { background: var(--bg-hover); color: var(--text-tertiary); cursor: default; }
.search-results { min-height: 0; max-height: 400px; overflow-y: auto; margin: 0; padding: 8px; border-top: 1px solid var(--border); background: transparent; }
.search-results:empty, .search-status:empty { display: none; }
.search-dialog .row { color: var(--text-primary); }
.search-dialog .row:hover, .search-dialog .row:focus-visible { background: var(--bg-hover); }
.search-dialog .agent-preview, .search-dialog .meta { color: var(--text-secondary); }
.search-action-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; }
.search-action-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 520px) { .search-dialog { padding: var(--search-top) 16px 24px; } #workspace-search { font-size: 16px; } .search-input-wrap { padding-left: 16px; } }
.search-results h3 { margin: 16px 10px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.search-results h3:first-child { margin-top: 0; }
.search-result { width: 100%; padding: 10px; gap: 12px; }
.search-result .agent-avatar { width: 32px; height: 32px; flex: none; }
.search-result .agent-copy { overflow: hidden; }
.search-result .label { font-weight: 500; }
.search-status { flex: none; margin: 0; padding: 10px 18px 14px; font-size: 12px; color: var(--text-secondary); background: transparent; }
.search-result .meta { flex: none; }
.search-enter { display: flex; align-items: center; }
/* the start row's agent, with more than one (launcher.js `withPick`) */
.search-start-row { display: flex; align-items: center; gap: 8px; }
.search-start-row .search-start { flex: 1; min-width: 0; }
.search-agent { flex: none; max-width: 40%; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-window); color: var(--text-primary); font: 600 13px var(--font-sans); }
.search-message .agent-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the launcher's Knowledge (launcher.js): a page of the person's brains or
   Session Archive, its snippet two lines, its fragment at its end */
.search-known h3:first-child { margin-top: 16px; }
.search-results > .search-known:first-child h3 { margin-top: 0; }
.search-known .agent-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-known .meta { max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-known-failed { margin: 4px 10px 8px; font-size: 13px; color: var(--text-secondary); }
.search-known-more { font-size: 12px; color: var(--text-tertiary); }
/* the launcher's files (launcher.js, launchFiles): rows of chips under its words, scrolling when the viewport leaves less room */
.search-files { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-height: 0; overflow-y: auto; gap: 8px; padding: 0 18px 14px 18px; }
.search-files[hidden] { display: none; }
.search-file { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; min-width: 0; height: 44px; padding: 4px; border-radius: 14px; background: var(--bg-hover); color: var(--text-primary); font-size: 13px; animation: search-file-in 220ms cubic-bezier(.22, 1, .36, 1) both; }
.search-file img, .search-file-icon { width: 36px; height: 36px; flex: none; border-radius: 10px; object-fit: cover; }
.search-file-icon { display: grid; place-items: center; background: var(--surface-muted); color: var(--text-secondary); }
.search-file-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.search-file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-file-remove { display: grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.search-file-remove:hover { background: var(--bg-hover); color: var(--text-primary); }
.search-file-remove svg { width: 14px; height: 14px; }
@keyframes search-file-in { from { opacity: 0; transform: scale(.94); } }
/* files dragged over the launcher: its panel says where they go */
.search-drop { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit; background: color-mix(in srgb, var(--bg-sidebar) 86%, transparent); color: var(--text-primary); font-size: 15px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.search-dialog.dropping .search-drop { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .search-file { animation: none; } .search-drop { transition: none; } }

/* a group chat's mark: its agents' avatars in one avatar's room, the lead
   on top (shell.js `mark`); sized by the room it stands in */
.avatar-stack { --stack: 40px; --dot: calc(var(--stack) * .66); position: relative; display: inline-block; width: var(--stack); height: var(--stack); flex: none; }
.avatar-stack.small { --stack: 26px; }
#chats .avatar-stack { --stack: 26px; }
.search-result .avatar-stack { --stack: 32px; }
.avatar-stack[data-count="3"] { --dot: calc(var(--stack) * .56); }
.avatar-stack > .agent-avatar, #chats .avatar-stack > .agent-avatar, .search-result .avatar-stack > .agent-avatar {
  position: absolute; width: var(--dot); height: var(--dot); margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar);
}
.avatar-stack > .agent-avatar:nth-child(1) { left: 0; top: 0; z-index: 3; }
.avatar-stack > .agent-avatar:nth-child(2) { right: 0; bottom: 0; z-index: 2; }
.avatar-stack[data-count="3"] > .agent-avatar:nth-child(1) { left: calc((var(--stack) - var(--dot)) / 2); }
.avatar-stack[data-count="3"] > .agent-avatar:nth-child(2) { left: 0; right: auto; }
.avatar-stack[data-count="3"] > .agent-avatar:nth-child(3) { right: 0; bottom: 0; z-index: 1; }
.rename-actions button:disabled { cursor: default; }

/* ---- what the handoff did not draw, in its look ---- */
.muted { color: var(--text-tertiary); }
.form-error { margin: 6px 0 0; color: var(--danger-text); font-size: 13px; }
.primary { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-weight: 600; text-decoration: none; }
.primary:disabled { opacity: .6; cursor: default; }
.quiet { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
/* a frame that could not sign in, saying why (shell.js BLOCKED) */
iframe[data-blocked] { display: none; }
.frame-note { flex: 1; overflow: auto; background: var(--bg-window); color: var(--text-primary); }
.frames > .frame-note { position: absolute; inset: 0; }
.frame-note .notice span { display: block; }
.page-title { font-weight: 700; margin: 0 auto; }
/* first run (sign in, the welcome, a seat's step): the platform pages'
   grid and card (platform-pages.css: Skyler's onboarding design,
   2026-10-22) on the shell's landscape, inside a phone's edges, scrolling
   when the card is taller than the screen. What follows is what its steps
   need besides: their buttons, their rhythm, nested in steps. */
.first-run { position: relative; isolation: isolate; height: 100%; overflow-y: auto; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: transparent; }
.first-run-content { box-sizing: border-box; min-height: 100%; color: var(--fg); }
.first-run-card { color: var(--fg); }
.first-run-card p { margin: 16px 0 0; color: var(--muted); line-height: 1.5; }
.first-run-card h1 + p { line-height: 1.4; text-wrap: balance; }
.first-run-card h1 { text-wrap: balance; }
.first-run-card h1[tabindex="-1"]:focus { outline: none; }
.first-run-card h2 { margin: 24px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; }
.first-run-card strong { font-weight: 600; color: var(--fg); }
.first-run-card form { margin: 0; }
.first-run-card :is(.primary, .secondary) {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 44px; margin: 24px 0 0; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: 999px; font: 500 14px/1.5 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; transition: opacity .15s, border-color .15s;
}
.first-run-card :is(.primary, .secondary) + :is(.primary, .secondary) { margin-top: 10px; }
.first-run-card .primary { background: var(--fg); color: var(--bg); }
.first-run-card .secondary { background: transparent; color: var(--fg); }
.first-run-card .primary:hover:not(:disabled) { opacity: .88; }
.first-run-card .secondary:hover:not(:disabled) { border-color: var(--muted); }
.first-run-card .text { display: block; margin: 17px auto 0; padding: 2px; border: 0; border-radius: 999px; background: none; color: var(--fg); font: 400 14px/1.5 var(--font-sans); text-decoration: none; cursor: pointer; }
.first-run-card .text:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.first-run-card button:disabled { opacity: .5; cursor: default; }
.first-run-card label { display: block; margin: 24px 0 0; text-align: left; }
.first-run-card input { display: block; width: 100%; margin-top: 7px; color: var(--fg); }
.first-run-card input::placeholder { color: var(--muted); }
.first-run-card p.fine { margin-top: 18px; font-size: 14px; }
.first-run-card .ticket p { margin: 0; color: inherit; }
.first-run-card .ticket p + p { margin-top: 8px; }
/* its card's size, animated from one step to another (shell.js cardStep) */
.first-run-card.moving { overflow: hidden; }
.first-run-card p:is(.form-error, .settings-warning) { margin: 14px 0 0; color: var(--danger-text); font-size: 14px; line-height: 1.5; }
.first-run-card .form-error:not([hidden]) + .primary { margin-top: 14px; }
/* the welcome's offers from an org, each a ticket (billing.js seatOffer):
   its two answers, Accept first */
.first-run-card .billing-offer { padding: 20px; border-bottom: 0; text-align: left; }
.first-run-card .billing-offer .settings-actions { justify-content: flex-start; margin-top: 14px; }
.first-run-card .billing-offer .quiet { height: auto; padding: 8px 15px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: 500 14px/1.5 var(--font-sans); }
.first-run-card .billing-offer .quiet:first-child { border-color: transparent; background: var(--fg); color: var(--bg); }
/* a seat's step before the first agent (shell.js seatFirst): its steps on a ticket */
.creating-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.creating-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.creating-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; flex: none; }
.creating-steps li.doing { color: var(--fg); }
.creating-steps li.doing::before { border-color: var(--fg); border-right-color: transparent; animation: creating-spin .8s linear infinite; }
.creating-steps li.done::before { border-color: var(--accent); background: var(--accent); }
.creating-steps li.failed { color: var(--danger-text); }
.creating-steps li.failed::before { border-color: var(--danger-text); }
@keyframes creating-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .creating-steps li.doing::before { animation: none; } }
/* who is signed in, under the welcome's steps, and its ways out */
.welcome-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-top: 24px; border-top: 1px solid var(--line); }
.welcome-foot .text { margin: 12px 0 0; }
/* who is signed in, to someone with no seat (shell.js noSeatSaid): the
   welcome's, Billing's, and a guest's home's */
.no-seat { overflow-wrap: anywhere; }
.welcome-foot > .no-seat { flex-basis: 100%; margin: 16px 0 4px; font-size: 14px; line-height: 1.5; }
.notice > .no-seat { margin: 12px 0 0; }
/* Settings use the full work area, with quiet section navigation and readable rows. */
.layout.settings-view .chat { grid-column: 3 / 6; }
.layout.settings-view .viewer, .layout.settings-view #gutter-right, .layout.settings-view .toggle-right { display: none; }
.layout.settings-view .page-title { visibility: hidden; }
.layout.settings-view.left-open:not(.narrow) .topbar { display: none; }
.layout.settings-view.left-open:not(.narrow) .page { border-top: 0; }
.layout.settings-view:not(.left-open) .topbar { min-height: 52px; }
/* its width, not the window's, lays settings out: a window opened beside them narrows it;
   its scrollbar's room is kept while it loads, short, so nothing moves once it scrolls */
.page { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; border-top: 1px solid var(--border); padding: 0; scroll-padding-top: 20px; container: settings / inline-size; }
/* Settings' words are the type library's, body unless a rule says which */
#settings-page { font: var(--type-body); }
/* emphasis (who is signed in) at the library's heaviest weight, not the browser's bold */
#settings-page strong { font-weight: 600; }
.settings-layout { display: grid; grid-template-columns: 176px minmax(0, 720px); justify-content: center; gap: clamp(28px, 4vw, 64px); max-width: 1160px; min-height: 100%; margin: 0 auto; padding: 34px clamp(24px, 4vw, 56px) 88px; }
.settings-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-title { font: var(--type-label); padding: 10px 12px 14px; color: var(--text-tertiary); text-transform: uppercase; }
.settings-nav-link { font: var(--type-body); min-height: 36px; padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); text-align: left; transition: background .15s, color .15s; }
.settings-nav-link:hover, .settings-nav-link:focus-visible { background: var(--bg-hover); color: var(--text-primary); }
.settings-nav-link[aria-current="location"] { background: var(--bg-active); color: var(--text-primary); }
.settings-content { min-width: 0; }
/* room for the last section's heading to reach the scroll handler's line */
.settings-content:has(.settings-section) { padding-bottom: calc(100vh - 250px); }
.settings-intro { padding: 2px 0 8px; }
.settings-intro h1 { font: var(--type-title-1); margin: 0 0 6px; text-wrap: balance; }
@media (min-width: 48rem) { .settings-intro h1 { font-size: 2rem; } }
.settings-intro p { font: var(--type-body); margin: 0; color: var(--text-secondary); }
/* settings loading: in the loaded page's layout, where its first section's heading comes */
.settings-loading { font: var(--type-body); margin: 22px 0 0; }
.settings-section { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; margin-top: 64px; padding: 8px 22px 16px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-muted); scroll-margin-top: 64px; }
.settings-section h2 { font: var(--type-title-3); position: absolute; top: -42px; left: 0; margin: 0; }
.settings-section h2:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 4px; border-radius: 2px; }
.settings-section > p { margin: 0; padding: 12px 2px; }
/* a section's intro: the design's line-height (1.55, roomier than a row's
   text), its lines kept even where it wraps */
.settings-section > p.muted { font: var(--type-body); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.settings-section > .connector-tags { display: flex; gap: 6px; padding: 12px 2px 0; }
/* a connector's tags hug its one line (spacing by proximity, Paul,
   2026-11-04), which sits nearer its agents' rows than they sit apart */
.settings-section > .connector-tags + p { padding: 6px 2px 4px; }
.settings-section .settings-line { font: var(--type-body); display: flex; align-items: center; gap: 18px; width: 100%; padding: 15px 2px; margin: 0; border-bottom: 1px solid var(--border-strong); }
.settings-line:last-child { border-bottom: 0; }
/* a row: its label above its content, its actions (when it has any) anchored on the right */
.settings-key { font: var(--type-body-sm); flex: none; color: var(--text-secondary); }
.settings-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.settings-section .settings-line:has(> .settings-key + .settings-value) { flex-direction: column; align-items: flex-start; gap: 3px; }
.settings-info { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; gap: 3px; }
.settings-action-line .settings-key { flex: 1; }
.settings-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; margin-left: auto; }
.settings-control .settings-actions { margin: 0; }
.settings-warning { font: var(--type-body); color: var(--danger-text); }
/* a row's short line under its label, where its value would be: what it does */
.settings-value.settings-sub { font: var(--type-body-sm); color: var(--text-secondary); }
/* a settings button with its icon before its words (computer.js) */
.settings-section .quiet.with-icon { display: inline-flex; align-items: center; gap: 7px; padding-left: 13px; }
.settings-section .quiet.with-icon svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Credit this month: the included credit used, a bar under what is left (billing.js) */
.credit-bar { position: relative; display: block; width: 100%; max-width: 420px; height: 8px; margin-top: 8px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.credit-bar-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--accent-blue); transition: width .3s ease; }
.credit-bar.owed .credit-bar-fill { background: var(--danger-text); }
.credit-said { font: var(--type-caption); display: block; margin-top: 2px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .credit-bar-fill { transition: none; } }
@media (forced-colors: active) { .credit-bar { border: 1px solid CanvasText; } .credit-bar-fill { background: CanvasText; } }
.settings-section .row { font: var(--type-control); align-self: flex-end; width: auto; max-width: 100%; min-height: 36px; padding: 5px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-active); }
.settings-section .row:hover { background: var(--bg-hover); }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }
.settings-section > .settings-actions { width: 100%; margin: 0; padding: 12px 2px; }
.settings-actions form { margin: 0; }
.settings-section .quiet { font: var(--type-control); min-height: 34px; height: auto; padding: 6px 15px; border-radius: 999px; background: var(--bg-active); transition: background .15s; }
.settings-section .quiet:hover { background: var(--bg-hover); }
.settings-section .quiet:disabled { opacity: .55; cursor: default; }
.settings-section > .quiet { align-self: flex-end; margin: 12px 2px; }
/* the shell's form: fields (inputs, selects, text areas) are rounded rectangles, 10px, on the card's white; buttons are pills */
.settings-section input:not([type="file"]):not([type="checkbox"]), .settings-section select, .agent-dialog input:not([type="file"]):not([type="checkbox"]), .agent-dialog select { font: var(--type-field); min-height: 36px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); }
.settings-section input[type="checkbox"] { accent-color: var(--accent-blue); }
/* a setting's on and off: a checkbox drawn as a switch (billing.js, Sleep), its row the label */
label.settings-line { cursor: pointer; }
.settings-section input.settings-switch { position: relative; flex: none; width: 40px; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background .15s; }
.settings-section input.settings-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.settings-section input.settings-switch:checked { background: var(--accent-blue); }
.settings-section input.settings-switch:checked::before { transform: translateX(16px); }
.settings-section input.settings-switch:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.settings-section input.settings-switch:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .settings-section input.settings-switch, .settings-section input.settings-switch::before { transition: none; } }
@media (forced-colors: active) { .settings-section input.settings-switch { border: 1px solid CanvasText; } .settings-section input.settings-switch::before { background: CanvasText; } }
/* Your data's rows, drawn again as its export changes, are the section's own */
.settings-export { display: contents; }
.settings-export > p { margin: 0; padding: 12px 2px; }
.settings-value.mono, .settings-section code { font: var(--type-mono); }
.settings-section p code { padding: 2px 5px; border-radius: 5px; background: var(--chat-code); }
.settings-section p a { color: var(--text-primary); text-underline-offset: 3px; }
.settings-section pre.command { font: var(--type-mono); width: 100%; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--chat-code); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
/* settings' Build with Claude Code or Codex: the prompt to copy, one line, its Copy an icon at its end, the install folded */
.build-prompt-field { position: relative; align-self: stretch; margin: 4px 2px 6px; }
/* the prompt as the commands are: code on code's ground; 16px on a phone, which then does not zoom */
.settings-section .build-prompt-field input.build-prompt { width: 100%; min-height: 44px; padding: 10px 48px 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--chat-code); color: var(--text-primary); font: var(--type-mono); text-overflow: ellipsis; }
@media (max-width: 47.99rem) { .settings-section .build-prompt-field input.build-prompt { font-size: 1rem; } }
.build-copy { right: 7px; }
.settings-section input.build-prompt:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.build-copy { position: absolute; top: 50%; right: 3px; width: 30px; height: 30px; transform: translateY(-50%); }
.build-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.build-copy-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.settings-install { width: 100%; padding: 4px 2px 8px; }
.settings-install summary { font: var(--type-body-sm); display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 6px 0; color: var(--text-secondary); cursor: pointer; list-style: none; }
.settings-install summary::-webkit-details-marker { display: none; }
.settings-install summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); transition: transform .15s; }
.settings-install[open] summary svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .settings-install summary svg { transition: none; } }
/* a command, its copy icon in its corner */
.command-block { position: relative; width: 100%; }
.settings-section .command-block pre.command { padding-right: 52px; }
.command-copy { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; }
.command-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-install p { font: var(--type-body); margin: 8px 0; }
/* Account's first row: the person's picture (their initial where there is
   none), a pencil over it on hover or focus, then who is signed in */
.profile .settings-info.profile-info { flex-direction: row; align-items: center; gap: 14px; }
.profile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-picture { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.profile-picture:has(input:disabled) { cursor: default; }
.profile-picture:has(input:focus-visible) { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.profile-avatar { font: var(--type-title-2); position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--bg-active); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); }
.profile-picture .profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.profile-picture-over { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .15s; }
.profile-picture:hover .profile-picture-over, .profile-picture:has(input:focus-visible) .profile-picture-over { opacity: 1; }
.profile-picture-over svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-picture input, .profile-picture-words { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.profile-said { font: var(--type-body-sm); margin: 2px 0 0; color: var(--text-secondary); }
.profile-said.form-error { color: var(--danger-text); }
@media (hover: none) { .profile-picture-over { opacity: 1; background: rgba(0,0,0,.28); } }
@media (prefers-reduced-motion: reduce) { .profile-picture-over { transition: none; } }
@container settings (max-width: 880px) {
  .settings-layout { display: block; max-width: 760px; padding: 22px 24px 72px; }
  /* as tall before its links come (settings loading) as with them: a link's 36px, padded */
  .settings-nav { position: sticky; z-index: 4; top: 0; flex-direction: row; gap: 4px; min-height: 61px; margin: -22px -24px 24px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); overflow-x: auto; scrollbar-width: thin; }
  .settings-nav::-webkit-scrollbar { display: block; height: 6px; }
  .settings-nav-title { display: none; }
  .settings-nav-link { flex: none; white-space: nowrap; }
  .settings-section { scroll-margin-top: 109px; }
}
@container settings (max-width: 620px) {
  .settings-layout { padding: 16px 20px 60px; }
  .settings-nav { min-height: 57px; margin: -16px -20px 22px; padding: 10px 20px; }
  /* on a phone, a row's buttons (and a field beside them) go under what it
     says, each the row's width, one under another; a switch stays beside
     its row, as it is not a button */
  .settings-section :is(.settings-line-with-action:not(:has(.settings-switch)), .settings-action-line) { flex-direction: column; align-items: stretch; gap: 12px; }
  .settings-section :is(.settings-line-with-action:not(:has(.settings-switch)), .settings-action-line) .settings-control { flex: none; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: none; margin-left: 0; }
  .settings-control :is(.settings-actions, .agent-face-actions, form) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin: 0; }
  .settings-control .agent-face-actions:empty { display: none; }
  .settings-section :is(.settings-line-with-action:not(:has(.settings-switch)), .settings-action-line) .settings-control :is(button, input, label.quiet) { width: 100%; max-width: none; justify-content: center; }
  .settings-section :is(.settings-line-with-action:not(:has(.settings-switch)), .settings-action-line) .settings-control .row { align-self: stretch; }
  .settings-section > :is(.quiet, .agent-add-open) { align-self: stretch; justify-content: center; }
  .settings-section > .settings-actions { flex-direction: column; align-items: stretch; }
  .settings-section > .settings-actions > button { width: 100%; justify-content: center; }
  /* an agent's summary two to a line on a phone */
  .agent-details .agent-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-intro { padding-bottom: 4px; }
  .settings-section { margin-top: 60px; padding: 6px 16px 12px; border-radius: 16px; }
}
@media (pointer: coarse) {
  .settings-nav { scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
}
/* settings' connections (Skyler's design, 2026-11-04): a card per provider,
   in two groups, each opening its sheet (connections.js connectionsSection) */
/* spaced by what belongs together (Paul, 2026-11-04): a group's heading and
   its line hug (about 4 px), its header sits 12 px over its cards, its cards
   12 px apart (the grid's gap), and a group 30 px under the one before, as the
   first is under the intro (its 12 px padding, and this 14 px) */
.provider-group-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 14px 0 12px; padding: 0 2px; }
.provider-grid + .provider-group-head { margin-top: 28px; }
.provider-group-head h3 { margin: 0; font: var(--type-body-strong); }
.provider-group-head p { margin: 0; font: var(--type-body-sm); color: var(--text-tertiary); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; width: 100%; }
.provider { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: start; gap: 4px 12px; min-height: 96px; padding: 14px 14px 13px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-muted); transition: background .15s; }
.provider:hover { background: var(--bg-active); }
.provider-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.provider-open:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
/* its tile: its name's first letter (no provider's logo is ours to show) */
.provider-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-primary); font: var(--type-body-strong); }
.provider-tile.big { width: 48px; height: 48px; border-radius: 12px; font: 600 1.25rem/1 var(--font-sans); }
.provider-body { min-width: 0; }
.provider-name { display: block; font: var(--type-body-strong); }
.provider-sub { display: block; margin-top: 2px; font: var(--type-body-sm); color: var(--text-secondary); }
/* its note whole, wrapped (one line of the deployment's, at most 280
   characters: a clamp cut its words in half); a key's price its own line */
.provider-price { display: block; }
.provider-foot { grid-column: 2 / 4; margin-top: 6px; font: var(--type-caption); color: var(--text-tertiary); }
/* its light: on, green; waiting on the person, amber; off, an empty ring */
.provider-state { display: grid; place-items: center; width: 22px; height: 22px; }
.provider-light { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
.provider-light.on { background: var(--success); box-shadow: none; }
.provider-light.warn { background: #b7791f; box-shadow: none; }
.provider-sheet { width: min(520px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 48px)); padding: 0; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-window); color: var(--text-primary); box-shadow: 0 24px 80px rgba(0,0,0,.35); font: var(--type-body); }
.provider-sheet:focus { outline: none; }
.provider-sheet::backdrop { background: rgba(0,0,0,.4); }
.provider-sheet-head { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 22px 56px 16px 22px; }
.provider-sheet-head h3 { margin: 0; font: 600 1.1875rem/1.3 var(--font-sans); letter-spacing: -.015em; }
.provider-kind { margin: 2px 0 0; font: var(--type-body-sm); color: var(--text-secondary); }
.provider-close { position: absolute; top: 12px; right: 12px; }
.provider-sheet-body { padding: 0 22px 22px; }
.provider-about { margin: 0 0 14px; color: var(--text-secondary); }
.provider-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 14px; }
.provider-chips span { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font: var(--type-body-sm); }
.provider-status { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 8px 8px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--surface-muted); font: var(--type-body); }
.provider-status .provider-state { width: 12px; height: 12px; flex: none; }
.provider-status-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.provider-account { font: var(--type-body-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.provider-status .settings-actions { flex: none; margin: 0; }
.provider-status .quiet { font: var(--type-control); min-height: 32px; height: auto; padding: 5px 14px; border-radius: 999px; background: var(--bg-active); color: var(--text-primary); }
.provider-status [data-action=disconnect], .provider-status [data-action=remove-key] { color: var(--danger-text); }
.provider-details { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 0 2px; }
.provider-detail { font: var(--type-body-sm); }
.provider-said:empty { display: none; }
.provider-manage { font: var(--type-body-sm); color: var(--text-secondary); }
.provider-key { display: flex; gap: 8px; flex-wrap: wrap; }
.provider-key input { font: var(--type-field); height: 32px; min-width: 0; width: 220px; max-width: 100%; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); }
.provider-accounts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--border-strong); }
.provider-account-row { display: flex; flex-direction: column; gap: 4px; }
.provider-account-row .provider-head { display: flex; align-items: flex-start; gap: 12px; }
.provider-account-row .provider-identity { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.provider-account-row .provider-state { display: inline; width: auto; height: auto; font: var(--type-body-sm); color: var(--text-secondary); }
.provider-account-row .provider-state.connected { color: var(--success); }
.provider-account-row .provider-state.needs_reauthorization, .provider-account-row .provider-state.disconnecting { color: var(--danger-text); }
.provider-account-pick { font: var(--type-field); height: 30px; max-width: 220px; margin: 0 0 6px auto; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); }
.provider-block { padding: 14px 0 0; margin-top: 8px; border-top: 1px solid var(--border-strong); }
.provider-block.dim { opacity: .5; }
.provider-block h4 { margin: 0 0 10px; font: var(--type-label); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.provider-agents { display: flex; flex-direction: column; }
.provider-agent { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.provider-agent .settings-agent-name { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font: var(--type-control); }
.provider-agent .use { font: var(--type-body-sm); color: var(--text-tertiary); }
.provider-switch { position: relative; flex: none; width: 36px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background .15s; }
.provider-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: translate .18s; }
.provider-switch[aria-pressed="true"] { background: var(--success); }
.provider-switch[aria-pressed="true"]::after { translate: 14px 0; }
.provider-switch:disabled { opacity: .6; }
.provider-facts { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; font: var(--type-body-sm); }
.provider-facts dt { color: var(--text-tertiary); }
.provider-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.provider-facts code { font: var(--type-mono-sm); padding: 1px 5px; border-radius: 5px; background: var(--chat-code); }
.provider-model { padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 999px; }
@media (max-width: 520px) {
  .provider-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .provider-facts dd { margin-bottom: 6px; }
}
/* settings' agents: a platform route, or independent BYO Fast/Deep picks */
.agent-setting { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border-strong); }
.agent-setting:last-child { border-bottom: 0; }
.agent-setting .settings-line { padding: 0 0 4px; border: 0; }
.settings-agent-name { font: var(--type-body-strong); display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.settings-agent-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
/* an agent's picture's buttons, small, by its picture and name */
.agent-picture-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 10px; }
.settings-section .agent-picture-actions .quiet { font: var(--type-control); min-height: 28px; padding: 3px 11px; }
/* an agent's picture in Settings, larger, and over it the pencil that changes
   it: shown on hover or as its file input takes focus; always, faintly,
   where nothing hovers */
.agent-face-edit { position: relative; display: inline-flex; align-items: center; }
.settings-agent-name { gap: 10px; }
.settings-agent-name .agent-avatar.small { width: 36px; height: 36px; }
.agent-picture-edit { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; opacity: 0; cursor: pointer; transition: opacity .15s; }
.agent-picture-edit:hover, .agent-picture-edit:has(input:focus-visible) { opacity: 1; }
/* round over a picture, as it is; square, its corners softened, over the cube, which fills its square */
.agent-face-edit:has(.agent-avatar.picture) .agent-picture-edit { border-radius: 50%; }
.agent-picture-edit:has(input:focus-visible) { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.agent-picture-edit:has(input:disabled) { cursor: default; }
.agent-picture-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agent-picture-edit input, .agent-picture-said { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
@media (hover: none) { .agent-picture-edit { opacity: 1; background: rgba(0,0,0,.28); } }
@media (prefers-reduced-motion: reduce) { .agent-picture-edit { transition: none; } }
/* an agent's fields (its role, where it reaches you, its model), and a new agent's: one compact grid, each its label above it */
.agent-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; width: 100%; }
.agent-fields input { width: 100%; height: 36px; }
.agent-model-label:has(> input)::after { content: none; }
.agent-model-label { font: var(--type-body-sm); position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
/* the chevron sits in the pick under the label: its middle, 18px above the bottom */
.agent-model-label::after { content: ""; position: absolute; top: calc(100% - 18px); right: 15px; width: 7px; height: 7px; border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
:is(.settings-section, .agent-dialog) select.agent-model { font: var(--type-field); width: 100%; height: 36px; min-width: 0; padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); text-overflow: ellipsis; cursor: pointer; }
:is(.settings-section, .agent-dialog) select.agent-model:disabled { opacity: .55; cursor: default; }
/* Settings' Agents: an agent's role, and another agent to add (agent-settings.js) */
.agent-role-label::after { content: none; }
:is(.settings-section, .agent-dialog) input.agent-role { width: 100%; height: 36px; }
/* New agent: one button, which opens its dialog */
.settings-section > .agent-add-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 14px 2px 4px; }
.agent-add-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
/* an agent's settings as text, each its label above it (agent-settings.js
   `summaryOf`), edited in a dialog; a new agent asked in one, which says it
   is on its way before its chat opens */
/* an agent's Remove agent as tall as its Open beside it */
.agent-setting .settings-control .quiet { min-height: 36px; }
/* the line of what an agent is, its Edit (a pencil) at its end */
.agent-details { display: flex; align-items: center; gap: 12px; width: 100%; }
.agent-details .agent-summary { flex: 1; min-width: 0; }
.agent-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agent-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; width: 100%; margin: 0; }
.agent-summary-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agent-summary dd { font: var(--type-body); margin: 0; overflow-wrap: anywhere; }
/* a box of one size whatever its reads answer (FIN-424: a card that grew
   as its agent.json was read moved New agent from under a hand): each
   label a line, Role and Reaches you in a line each, what agent.json fills
   (its model, Fast and Deep, Claude's) three, each clipped there; and three
   or four of them always (agent-settings.js `summaryOf`), so one row at a
   desktop's width and two on a phone */
.agent-summary dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-summary dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; height: 1lh; }
.agent-summary-item[data-from-settings] dd { -webkit-line-clamp: 3; line-clamp: 3; height: 3lh; }
.agent-summary dd.muted { color: var(--text-tertiary); }
.agent-dialog { width: min(440px, calc(100vw - 32px)); }
/* a dialog's fields: one column, each its label above it */
.agent-dialog .agent-fields { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.agent-dialog .quiet { font: var(--type-control); min-height: 36px; padding: 0 15px; background: var(--bg-active); }
.agent-dialog .quiet:hover { background: var(--bg-hover); }
/* a picture's chooser is a label (its file input inside): a button like the
   dialog's others, not `.rename-agent label`'s field label, beside its avatar */
.agent-dialog label.quiet { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.agent-picture-field::after { content: none; }
.agent-picture-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-picture-shown { display: inline-flex; margin-right: 4px; }
.agent-picture-shown .agent-avatar { width: 36px; height: 36px; }
.agent-dialog .agent-model-label { display: flex; margin: 0; }
.agent-dialog .agent-model-said { font: var(--type-caption); display: block; margin-top: 12px; }
.agent-dialog .agent-model-said:empty { display: none; }
.agent-dialog-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 10px; text-align: center; }
.agent-dialog-done h2 { margin: 10px 0 0; }
.agent-dialog-done p { margin: 0; }
.agent-dialog-check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--success); color: #fff; }
.agent-dialog-check svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .agent-dialog-done:not([hidden]) .agent-dialog-check { animation: agent-confirmed .32s cubic-bezier(.2, .9, .3, 1.3) both; } }
@keyframes agent-confirmed { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.agent-mode-picks { display: flex; gap: 8px; width: 100%; min-width: 0; }
.agent-mode-picks select.agent-model { width: 100%; flex: 1; }
.agent-mode-picks select.agent-effort { flex: 0 0 86px; }
.agent-model-label.has-modes::after { display: none; }
.agent-model-label.has-modes .settings-key { min-width: 32px; }
.agent-model-label.has-modes select.agent-model { appearance: auto; padding: 0 10px; }
.agent-model-said { font: var(--type-caption); }
.chip { height: 26px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-tertiary); font-size: 12.5px; }
.chip[aria-pressed="true"] { background: var(--bg-active); color: var(--text-primary); }
.chip:disabled { opacity: .6; }
.settings-section .chip { font: var(--type-control); min-height: 32px; height: auto; padding: 5px 14px; border-radius: 999px; transition: background .15s; }
.settings-section .chip:hover { background: var(--bg-hover); }
/* the Apps page (apps-page.js): in the work area as settings are, one row
   an app: its icon, title, what it is and who has access, its card, and
   its controls under them; a phone's stacks */
.apps-layout { max-width: 820px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 56px) 88px; }
.apps-intro h1 { margin: 0 0 18px; font-size: clamp(26px, 2.5vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.apps-list { display: flex; flex-direction: column; }
.apps-empty { margin: 8px 2px; font-size: 14px; }
.app-row { display: flex; flex-direction: column; gap: 12px; padding: 24px 2px; border-bottom: 1px solid var(--border); }
.apps-list > .app-row:last-child { border-bottom: 0; }
.app-row-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-row-art { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.app-row-art .app-icon, .app-row-art .app-picture, .app-row-art .app-picture .app-icon { width: 40px; height: 40px; border-radius: 11px; }
.app-row-art .app-icon { background: linear-gradient(155deg, color-mix(in srgb, var(--app-color), white 26%), var(--app-color)); }
.app-row-art .app-icon svg { width: 25px; height: 25px; stroke-width: 1.6; }
.app-row-text { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.app-title-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.app-row-title { border: 0; padding: 0; border-radius: 0; background: none; color: var(--text-primary); overflow: hidden; font-size: 16px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.app-title-edit { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 0; padding: 5px; background: none; color: var(--text-tertiary); opacity: .5; }
.app-title-edit:hover, .app-title-edit:focus-visible { opacity: 1; color: var(--text-primary); }
.app-title-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.app-name-form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.app-name-input { min-width: 80px; flex: 1; width: 80px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-window); color: inherit; font: inherit; }
.app-name-form button { border: 0; padding: 5px 12px; border-radius: 999px; background: var(--bg-active); font-size: 12px; }
.app-row-url { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12px; min-width: 0; text-decoration: none; }
.app-row-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row-url svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.app-row-url:hover { text-decoration: underline; }
.app-row-art { border: 0; padding: 0; background: none; }
.app-preview-open { border: 0; padding: 0; background: none; flex: none; }
.app-row-tools { display: flex; gap: 20px; padding-left: 54px; }
.app-row-tools .quiet { border: 0; border-radius: 0; padding: 0 0 3px; background: none; color: var(--text-secondary); font-size: 12px; }
.app-row-tools .quiet:hover, .app-row-tools .quiet[aria-expanded=true] { color: var(--text-primary); }
.app-row-tools .quiet[aria-expanded=true] { box-shadow: 0 1px var(--text-secondary); }
.app-row-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 2px 0 0 54px; padding: 20px; background: var(--bg-window); border: 1px solid var(--border); border-radius: 10px; }
.app-row-panel[data-share-editor], .app-row-panel[data-address-editor] { display: block; }
.app-row-panel h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.icon-editor { min-width: 0; }
.icon-editor .icon-current { height: 64px; width: 64px; margin-bottom: 12px; background: none; }
.icon-editor .icon-current .app-picture, .icon-editor .icon-current .app-icon { width: 56px; height: 56px; }
.icon-editor .icon-make { flex-wrap: wrap; }
.icon-editor .icon-make input { width: 100%; }
.icon-editor .icon-make button, .icon-editor .icon-actions button { padding: 7px 14px; font-size: 12px; border-radius: 999px; }
.icon-editor .icon-actions { justify-content: flex-start; margin-top: 12px; }
.icon-editor .icon-actions button:first-child { margin-right: 0; }
.app-preview-image { display: block; width: 100%; aspect-ratio: 1.6; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px; object-fit: cover; object-position: top; }
.app-preview-editor .quiet { padding: 7px 14px; border-radius: 999px; background: var(--bg-active); font-size: 12px; }
.app-sharing-frame { display: block; border: 0; width: 100%; min-height: 240px; background: transparent; }
.app-address-form { display: flex; gap: 10px; flex-wrap: wrap; }
.app-address-field { display: flex; align-items: center; min-width: 0; flex: 1; gap: 0; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--bg-card); overflow: hidden; }
.app-address-field input { flex: 1; width: 100px; min-width: 50px; padding: 9px 10px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; }
.app-address-field span { padding-right: 10px; color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.app-address-form .quiet { padding: 8px 14px; border-radius: 999px; font-size: 12px; background: var(--bg-active); }
.app-address-note, .app-address-said { margin: 10px 0 0; font-size: 12px; }
.app-address-kept { color: var(--text-primary); font-size: 14px; }
.app-row-progress { padding-left: 54px; }
.activity { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
.activity-spinner { width: 13px; height: 13px; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--text-primary); border-radius: 50%; animation: activity-spin .85s linear infinite; }
.activity-elapsed { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }
.app-row-meta, .app-row-access { color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.app-row-access { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.app-row-access svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-row-card { width: 112px; height: 70px; flex: none; border: 1px solid var(--border); border-radius: 8px; object-fit: cover; object-position: top; }
.app-row-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 54px; }
.app-row-controls .quiet { min-height: 32px; height: auto; padding: 5px 14px; background: var(--bg-active); }
.app-row-controls .quiet:hover { background: var(--bg-hover); }
.app-row-controls .quiet:disabled { opacity: .6; cursor: default; }
.app-row-said { margin: 0; padding-left: 54px; color: var(--text-secondary); font-size: 13px; }
/* the dock switch: its track says whether the dock shows it, as the list does */
.app-dock { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 4px; border: 0; background: none; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.app-dock-track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.app-dock-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.app-dock[aria-checked="true"] .app-dock-track { background: var(--accent-blue); }
.app-dock[aria-checked="true"] .app-dock-track::after { transform: translateX(12px); }
.app-dock:disabled { opacity: .6; cursor: default; }
/* what an app can reach (apps-page.js, FIN-291's prototype): its keys by
   name, each with the hosts it may go to, and its door, each with its
   revoke, a quiet note under them */
.app-reach { display: flex; flex-direction: column; gap: 8px; }
.app-reach h2 { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.app-reach-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.app-reach-what { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.app-reach-what code { font: 500 12.5px/1.4 "JetBrains Mono", monospace; }
.app-reach-note { margin: 6px 0 0; font-size: 12.5px; }
.app-reach-line { color: var(--text-secondary); }
.app-reach-agents { margin: 4px 0 0; font-size: 13.5px; }
/* an app that reaches their accounts: why its Sharing is theirs alone */
.apps-archived { margin-top: 24px; }
.apps-archived summary { padding: 6px 2px; color: var(--text-secondary); font-size: 14px; cursor: pointer; }
/* the History page (history-page.js): in the work area as the Apps page
   is; a search box, All · Archived · Imported, then a row a chat: its face,
   its title, whom it was with and its first words (or what the search
   found), when it was last said, and Archived on the archived ones */
.history-layout { display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 56px) 88px; }
.history-intro h1 { margin: 0 0 18px; font-size: clamp(26px, 2.5vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.history-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-tertiary); cursor: text; }
.history-search:focus-within { border-color: var(--text-tertiary); }
.history-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 15px; box-shadow: none; }
.history-search input:focus-visible { outline: none; }
.history-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.history-filters { display: flex; gap: 6px; margin: 12px 0 8px; }
.history-filter { height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.history-filter:hover { background: var(--bg-hover); }
.history-filter[aria-pressed="true"] { border-color: transparent; background: var(--bg-active); color: var(--text-primary); }
.history-status { margin: 4px 2px 8px; color: var(--text-tertiary); font-size: 13px; }
.history-list { display: flex; flex-direction: column; }
.history-empty { margin: 16px 2px; font-size: 14px; }
.history-row { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: 12px; }
.history-row:hover { background: var(--bg-hover); }
.history-open { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 9px 10px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.history-face { display: grid; flex: none; place-items: center; width: 30px; height: 30px; color: var(--text-tertiary); }
.history-face .agent-avatar.small { width: 28px; height: 28px; }
.history-face > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.history-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.history-line, .history-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.history-line .label { min-width: 0; overflow: hidden; color: var(--text-primary); font-size: 14.5px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.history-chip { flex: none; padding: 0 7px; border-radius: 999px; background: var(--bg-active); color: var(--text-secondary); font-size: 11px; line-height: 18px; }
.history-line time { flex: none; margin-left: auto; color: var(--text-tertiary); font-size: 12px; line-height: 20px; }
.history-sub { color: var(--text-tertiary); font-size: 13px; line-height: 18px; }
.history-with { flex: none; color: var(--text-secondary); }
.history-with + .history-preview::before { content: "·"; margin-right: 8px; color: var(--text-tertiary); }
.history-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-preview.found { color: var(--text-secondary); }
.history-more { align-self: center; margin-top: 14px; height: 32px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.history-more:hover { background: var(--bg-hover); }
@container settings (max-width: 620px) {
  .apps-layout { padding: 18px 16px 60px; }
  .history-layout { padding: 18px 16px 60px; }
  /* a row's Continue under its words, so its title and what a search found
     have the width (two agents' "Continue with [agent]" left them "M…") */
  .history-row { flex-wrap: wrap; }
  .history-open { flex-basis: 100%; }
  .history-row > .continue-control { margin: -4px 0 10px 52px; }
  .history-sub { align-items: flex-start; }
  .history-preview.found { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .app-row-card { width: 72px; height: 45px; }
  .app-row-controls, .app-row-said, .app-row-progress { padding-left: 0; }
  .app-row-panel { margin-left: 0; padding: 16px; gap: 20px; }
  .app-row-tools { padding-left: 54px; }
}
@container settings (max-width: 420px) {
  .app-row-panel { grid-template-columns: 1fr; }
  .app-row-card { width: 60px; height: 38px; }
  .app-row-head { gap: 10px; }
  .app-name-form { display: grid; grid-template-columns: 1fr 1fr; }
  .app-name-input { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
}
.picture { gap: 10px; cursor: pointer; }
.picture img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
/* An agent's image (Paul, 2026-10-03): a CRT monitor, whole (no circle),
   tinted to the agent's colour: its silhouette filled with the colour and
   the photograph's light over it (luminosity), so any colour takes. */
.agent-avatar { --agent-color: #a88bea; position: relative; isolation: isolate; display: inline-block; width: 40px; height: 40px; flex: none; background: var(--agent-color); -webkit-mask: url("agent.png") center / contain no-repeat; mask: url("agent.png") center / contain no-repeat; }
.agent-avatar::after { content: ""; position: absolute; inset: 0; background: url("agent.png") center / contain no-repeat; mix-blend-mode: luminosity; }
.agent-avatar.small { width: 26px; height: 26px; }
/* an agent's own picture (its avatar.png), round, in its mark's room */
.agent-avatar.picture { background: none; -webkit-mask: none; mask: none; border-radius: 50%; overflow: hidden; }
.agent-avatar.picture::after { content: none; }
.agent-avatar.picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Settings' Agents: each agent's name and picture */
.agent-face-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.agent-face-said { font: var(--type-caption); width: 100%; margin: 0; padding: 0 2px 12px; }
/* Settings' Billing: an org's seats (billing.js) */
.billing-seats { font: var(--type-body); border-collapse: collapse; width: 100%; }
.billing-seats td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border-strong); vertical-align: middle; }
.billing-seats td:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* an org's offer to the person, to accept or decline (billing.js `offers`) */
.billing-offer { padding: 8px 0 10px; border-bottom: 1px solid var(--border-strong); }
.billing-offer p { margin: 0 0 6px; }

/* The person's agents in their chats' rows, a flat list of them, and an
   app dock on the desktop. */
/* a new chat, with the agent its chip names (chat-list.js `renderStart`) */
/* a menu's agent (shell.js `openMenu`): its face, its name, its role */
.menu .agent-avatar { width: 22px; height: 22px; }
.menu .name { font-weight: 600; font-size: 13.5px; }
.menu .role-tag { margin-left: auto; }
.menu button[aria-current="true"] { background: var(--bg-hover); }
/* a chat's row, two lines (chat-list.js `chatRow`): whose chat it is and
   when, then the chat's own name */
/* a section per agent (chat-list.js): its hero, the original pill (face,
   name, what it is doing), then its chats; More unfolds the rest; Shared last */
/* the sections take the sidebar's room and scroll in it; Apps and Settings stay at its foot.
   A list of ellipsized rows never scrolls sideways (its pills' rim kept inside it) */
#chats { flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; padding-inline: 2px; }
/* its rows keep their height: past the room, the list scrolls, never squeezes them */
#chats > * { flex-shrink: 0; }
#chats .agent-hero { --edge-light: 0; flex: none; gap: 10px; height: 48px; margin: 10px 0 2px; padding: 8px 13px; border: 1px solid transparent; border-radius: 999px; background: var(--bg-sidebar); }
#chats .agent-hero:first-child { margin-top: 2px; }
#chats .agent-hero:hover { background: var(--bg-active); }
.agent-hero-face { display: flex; flex: none; }
.agent-hero-face .agent-avatar { width: 26px; height: 26px; }
.agent-hero-named { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; }
.agent-hero-named .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 14px; }
#chats .more-row { min-height: 28px; padding-top: 4px; padding-bottom: 4px; color: var(--text-tertiary); font-size: 13px; }
#chats .more-row:hover { color: var(--text-secondary); }
.section-head { margin: 14px 8px 4px; color: var(--text-tertiary); font-size: 12px; font-weight: 600; }
/* the open chat's delegation threads, a line each over it (threads.js) */
.threads { display: flex; flex: none; flex-direction: column; gap: 4px; padding: 0 16px 8px; }
.thread { display: flex; align-items: center; gap: 6px; min-width: 0; }
.thread-open { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 12px 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-sidebar); color: var(--text-primary); font-size: 13px; text-align: left; }
.thread-open:hover { background: var(--bg-hover); }
.thread-open .agent-avatar { width: 20px; height: 20px; }
.thread-who { flex: none; font-weight: 600; }
.thread-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.thread-state, .thread-took { flex: none; font-size: 11.5px; color: var(--text-tertiary); }
.thread-state { font-weight: 600; }
.thread-state.working { color: var(--success); }
.thread-state.you { color: var(--accent-blue); }
.thread-state.lost { color: var(--danger-text); }
.thread-stop { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-primary); font-size: 13px; }
.thread-stop:disabled { opacity: .55; }
/* one agent's role (its `meta.role`), a tag beside its name */
.role-tag { flex: 0 4 auto; min-width: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--text-secondary); font-size: 11px; font-weight: 500; line-height: 16px; }
/* the launcher, its search and its key (chat-list.js `LAUNCHER_KEY`); on a
   touch screen with no finer pointer, the search alone */
.sidebar-new-chat { --edge-light: 0; display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; }
.sidebar-new-chat:hover { background: transparent; }
.sidebar-new-chat:disabled { opacity: .45; cursor: default; }
.launcher-key { color: var(--text-tertiary); font: 500 12px/1 var(--font-sans); white-space: nowrap; }
@media (pointer: coarse) and (not (any-pointer: fine)) { .launcher-key { display: none; } .sidebar-new-chat { padding: 0; } }
.sidebar-new-chat, #chats .agent-hero { position: relative; border-color: transparent; }
#chats .agent-hero:focus-visible, .sidebar-new-chat:focus-visible, #new-chat:focus-visible, .search-dialog button:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }
/* The composer's pointer-following reflection, with no resting outline. */
.sidebar-new-chat::before, .sidebar-new-chat::after, .agent-hero::before, .agent-hero::after, .agent-menu-edge::before, .agent-menu-edge::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(180px circle at var(--edge-x, 50%) var(--edge-y, 50%), rgba(255,255,255,.65), rgba(255,255,255,.16) 45%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--edge-light); transition: opacity 160ms ease-out;
}
.sidebar-new-chat::after, .agent-hero::after, .agent-menu-edge::after { filter: blur(2px); opacity: calc(var(--edge-light) * .35); }
/* an agent's hero, open: its menu hangs from it, one surface with it, and
   the menu's edge (shell.js `menuEdge`) is lit in the hero's place */
#chats .agent-hero[aria-expanded="true"] { border-radius: 24px 24px 0 0; background: var(--bg-sidebar); }
.agent-hero[aria-expanded="true"]::before, .agent-hero[aria-expanded="true"]::after { opacity: 0; }
.menu.agent-menu { --edge-light: 0; min-width: 0; padding: 4px 8px 10px; border: 0; border-radius: 0 0 24px 24px; background: var(--bg-sidebar); box-shadow: none; overflow-y: auto; }
.menu.agent-menu button { min-height: 34px; border-radius: 8px; font-size: 13px; }
.agent-menu-edge { --edge-light: 0; position: fixed; z-index: 21; border-radius: 24px; pointer-events: none; }
.agent-menu-edge::before, .agent-menu-edge::after { inset: 0; box-sizing: border-box; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-new-chat::before, .sidebar-new-chat::after, .agent-hero::before, .agent-hero::after, .agent-menu-edge::before, .agent-menu-edge::after { transition: none; }
}
/* an invite waiting on the person's email, above their chats: what it
   shares, who invited them and as what, Accept and Decline (shell.js renderInvites) */
.invites { display: flex; flex: none; flex-direction: column; gap: 6px; max-height: 30vh; margin: 0 0 8px; overflow-y: auto; scrollbar-width: thin; }
.invites[hidden] { display: none; }
.invite { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 14px; }
.invite-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.invite-from { overflow-wrap: anywhere; font-size: 12px; color: var(--text-secondary); }
.invite-actions { display: flex; gap: 6px; margin-top: 6px; }
.invite-actions button { height: 28px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-primary); font-size: 12px; font-weight: 600; }
.invite-actions .invite-accept { border-color: transparent; background: var(--text-primary); color: var(--bg-window); }
.invite-actions button:disabled { opacity: .55; cursor: default; }
#chats { gap: 2px; padding-bottom: 6px; }
/* a chat's row (chat-list.js `chatRow`): its name and how long ago, then what
   its agent is doing or its newest message's first line; its ⋯ in the time's
   place on hover and focus, always on touch */
#chats .chat-row { position: relative; width: 100%; min-height: 0; padding: 0; color: var(--text-secondary); }
#chats .chat-row.active { color: var(--text-primary); }
.chat-open { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.chat-line, .chat-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-line .label { color: var(--text-primary); font-size: 14px; line-height: 19px; }
.chat-line .pin-mark { display: inline-grid; flex: none; place-items: center; color: var(--text-tertiary); }
.chat-line .pin-mark svg { width: 12px; height: 12px; stroke-width: 2; }
.chat-line time { flex: none; margin-left: auto; color: var(--text-tertiary); font-size: 11.5px; line-height: 19px; }
.chat-sub { min-height: 17px; color: var(--text-tertiary); font-size: 12.5px; line-height: 17px; }
.chat-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub .agent-doing { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.chat-sub .agent-doing.working { color: var(--success); }
.chat-sub .agent-doing.you { color: var(--accent-blue); }
.chat-sub .unread { height: 17px; min-width: 17px; font-size: 10.5px; line-height: 17px; }
.row-more { position: absolute; top: 4px; right: 6px; display: none; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 15px; line-height: 1; cursor: pointer; }
.row-more:hover, .row-more[aria-expanded="true"] { background: var(--bg-active); color: var(--text-primary); }
#chats .chat-row:hover .row-more, #chats .chat-row:focus-within .row-more, .row-more[aria-expanded="true"] { display: grid; }
#chats .chat-row:hover .chat-line time, #chats .chat-row:focus-within .chat-line time, #chats .chat-row:has(.row-more[aria-expanded="true"]) .chat-line time { visibility: hidden; }
@media (hover: none) { .row-more { display: grid; } .chat-line time { visibility: hidden; } }
@media (max-width: 760px) {
  .sidebar-top { min-height: 32px; }
  .sidebar-new-chat { position: fixed; z-index: 12; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; background: #fff; color: #202020; box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
  .launcher-key { display: none; }
  .sidebar-new-chat:hover { background: #f3f3f3; }
  .sidebar-new-chat svg { width: 24px; height: 24px; }
  .sidebar .settings { min-height: 56px; margin-right: 72px; }
  #chats { gap: 0; margin-right: -10px; padding-right: 10px; scrollbar-gutter: stable; }
  #chats .chat-row .chat-open { padding-top: 9px; padding-bottom: 9px; }
}
.viewer { position: relative; isolation: isolate; }
.viewer::before { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 140px; background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,.14) 45%, transparent); pointer-events: none; }
.viewer.is-empty .desktop-dock { margin-top: auto; }
/* Desktop shortcuts sit directly on the wallpaper; open apps alone reserve a dot. */
.desktop-dock { display: flex; align-items: flex-start; align-self: center; flex: none; width: max-content; max-width: calc(100% - 24px); margin: 6px 12px 8px; padding: 0; }
#apps { display: flex; flex-direction: row; align-items: flex-start; gap: 4px; flex: 0 1 auto; min-width: 0; margin: 0; padding: 4px 6px 6px; overflow-x: auto; }
.dock-app { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; gap: 5px; width: 50px; padding: 0 2px; border: 0; border-radius: 10px; background: none; color: #fff; }
.dock-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
.dock-art .app-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(155deg, color-mix(in srgb, var(--app-color), white 26%), var(--app-color)); }
.dock-art .app-icon svg { width: 25px; height: 25px; stroke-width: 1.6; }
.dock-app .label { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 9px; line-height: 1.25; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.35); }
.dock-add .dock-art { border: 1px dashed rgba(255,255,255,.6); background: rgba(20,20,20,.28); filter: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dock-add .dock-art svg { width: 20px; height: 20px; color: #fff; }
.dock-app.open { padding-bottom: 7px; }
.dock-app.open::after { content: ""; position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
/* an empty desktop: what lands on it, and requests of their agent (shell.js renderDesktopEmpty) */
.viewer.is-empty .desktop-empty:not([hidden]) { display: flex; }
.desktop-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 24px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); }
.desktop-empty p { margin: 0; }
.desktop-empty-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.desktop-empty-text { font-size: 13px; opacity: .9; }
.desktop-suggestions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.desktop-suggestion { max-width: 100%; min-height: 36px; padding: 7px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(20,20,20,.38); color: #fff; font-size: 13px; text-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s; }
.desktop-suggestion:hover, .desktop-suggestion:focus-visible { background: rgba(20,20,20,.56); }
.desktop-empty .prompt-dice { border-color: rgba(255,255,255,.28); background: rgba(20,20,20,.38); text-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.desktop-empty .prompt-dice:hover { background: rgba(20,20,20,.56); }
@media (max-width: 760px) { .desktop-dock { margin-bottom: max(8px, env(safe-area-inset-bottom)); } }
/* Finite's privacy policy and terms, at the end of Settings' Account (the
   first run's footer is platform-pages.css's .page-footer) */
.legal-links, .settings-section > p.legal-links { font: var(--type-caption); }
.legal-links a { color: inherit; }
/* the release and the computer's version, under Settings' last section (shell.js releaseLine) */
.settings-release { font: var(--type-caption); margin: 28px 2px 0; }
.settings-release a { color: inherit; }

/* an app's own icon (app-icon.js): an object on nothing, never on a tile */
.app-picture { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.app-picture img { width: 100%; height: 100%; object-fit: contain; }
.dock-art .app-picture { width: 40px; height: 40px; }
.dock-art .app-picture .app-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(155deg, color-mix(in srgb, var(--app-color), white 26%), var(--app-color)); }
/* the icon sheet: make, pick, upload, remove */
.icon-sheet { box-sizing: border-box; padding: 24px; width: min(420px, calc(100vw - 32px)); border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-card); color: var(--text-primary); }
.icon-sheet::backdrop { background: rgba(0,0,0,.5); }
.icon-sheet h2 { margin: 0 0 14px; font-size: 19px; }
.icon-current { display: grid; place-items: center; height: 88px; margin-bottom: 14px; border-radius: 12px; background: var(--bg-window); }
.icon-current .app-picture, .icon-current .app-icon { width: 64px; height: 64px; border-radius: 14px; }
.icon-make { display: flex; gap: 8px; }
.icon-make input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; color: inherit; background: var(--bg-window); }
.icon-make button, .icon-actions button { padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-window); color: inherit; font: inherit; }
.icon-make button[type=submit] { background: var(--text-primary); color: var(--bg-window); border-color: transparent; }
.icon-make button:disabled, .icon-pick:disabled, .icon-actions button:disabled { opacity: .55; }
.icon-said { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; }
.icon-progress { margin-top: 16px; }
.icon-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.icon-picks:empty { display: none; }
.icon-pick { min-width: 0; aspect-ratio: 1; padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-window); }
.icon-pick img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.icon-pick.picked { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
/* what is being kept or removed, until the platform answers (the rest wait, disabled) */
.icon-sheet button[aria-busy=true] { opacity: 1; }
.icon-pick[aria-busy=true] { outline: 2px dashed var(--border-strong); outline-offset: 2px; }
.icon-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.icon-actions button:first-child { margin-right: auto; }

/* ---- Continue (continue.js): "Continue with [agent ▾]", one line, compact
   enough for the end of a 40px History row; and the dialog the archive's
   page asks for it in. */
.continue-control { display: inline-flex; align-items: center; gap: 0; height: 28px; max-width: 100%; flex: none; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); overflow: hidden; font: 13px/1 var(--font-sans); }
.continue-control button.continue-go { height: 100%; padding: 0 12px; border: 0; background: none; color: var(--text-primary); white-space: nowrap; cursor: pointer; }
.continue-control button.continue-go:hover:not(:disabled) { background: var(--bg-hover); }
.continue-control select.continue-agent { height: 100%; min-width: 0; max-width: 160px; padding: 0 26px 0 10px; border: 0; border-left: 1px solid var(--border); background: none; color: var(--text-secondary); font: inherit; text-overflow: ellipsis; cursor: pointer; }
.continue-control.busy { opacity: .6; }
.continue-control button.continue-go:disabled { cursor: default; }
.continue-ask { padding: 20px 22px; width: min(380px, calc(100vw - 32px)); border: 1px solid var(--border-strong); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); }
.continue-ask::backdrop { background: rgba(0,0,0,.5); }
.continue-ask .continue-title { margin: 0 0 14px; font-size: 15px; overflow-wrap: anywhere; }
.continue-ask .continue-close { display: block; margin: 16px 0 0 auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); color: var(--text-secondary); font-size: 13px; }