.agent-register { min-width: 0; overflow-wrap: anywhere; }
.agent-register-body { white-space: pre-wrap; margin-block: 1rem; }
.agent-register-source + .agent-register-source { border-top: 1px solid var(--line, #e0d5e9); margin-top: 1rem; padding-top: 1rem; }
.agent-register [data-register-retry] { margin-top: 1rem; }
/* An agent's heading across the page's width (the Founder, 5 October 2026, 07:14, on his phone). "← Agents" on its own
   line above it; the face at the page's left edge, 76px on a phone and 96px on a desktop, centred on the text beside
   it. The lines, Chat and Call and the Chief's crown are drawn like WhatsApp's header (agent-row.css, 8 October 2026).
   The heading is no taller than the face. */
.page-heading.agent-heading { display: block; margin-bottom: 16px; }
.page-heading.agent-heading .agent-title { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; }
.page-heading.agent-heading .agent-title > .portrait-box.large { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 20px; }
.page-heading.agent-heading .agent-name { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.page-heading.agent-heading .agent-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; max-width: 100%; }
.page-heading.agent-heading .agent-name h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.page-heading.agent-heading .agent-sub { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.3; min-width: 0; max-width: 100%; }
.page-heading.agent-heading .agent-role { overflow-wrap: anywhere; min-width: 0; }
/* Chat and Call, each press 44 px to the finger; on an agent's page plain icon buttons (agent-row.css). */
.agent-calls { display: inline-flex; flex: none; flex-wrap: nowrap; align-self: flex-start; gap: 0; margin: 0 0 0 auto; border: 0; border-radius: 0; background: none; overflow: visible; }
.agent-calls:empty { display: none; }
.page-heading.agent-heading .agent-head-end { display: flex; flex-direction: row; align-items: flex-start; align-self: flex-start; gap: 0; flex: none; margin-inline-start: auto; }
.page-heading.agent-heading .agent-head-end > .agent-calls { margin: 0; }
/* On a phone the name and its status keep one line where they can: a smaller face and name, tighter gaps. */
@media (max-width: 480px) {
  .page-heading.agent-heading .agent-title { gap: 10px !important; }
  .page-heading.agent-heading .agent-title > .portrait-box.large { width: 76px !important; height: 76px !important; border-radius: 16px; }
  .page-heading.agent-heading .agent-head-end { gap: 0; }
  .page-heading.agent-heading .agent-name h1 { font-size: 1.125rem !important; }
  .page-heading.agent-heading .agent-name-line { column-gap: 8px; }
}
.agent-call, .agent-call:hover, .agent-call:active { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.agent-call:hover { background: var(--soft); color: var(--purple); }
[data-theme=dark] .agent-calls { background: none; }
.agent-call .icon { position: relative; width: 22px; height: 22px; margin: 0; }
.agent-call:focus-visible { outline: 3px solid #b987ef; outline-offset: -3px; }
.agent-heading [data-call-settings] { display: none; }
.agent-calls .sr-only, .info-value .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .page-heading.agent-heading .agent-title { gap: 12px; }
  .page-heading.agent-heading .agent-title > .portrait-box.large { width: 80px; height: 80px; border-radius: 18px; }
  .page-heading.agent-heading .agent-name h1 { font-size: 1.25rem; }
  .page-heading.agent-heading .agent-sub { font-size: .8125rem; }
}
/* Overview reads like Home (the Founder, 7 October 2026, 22:40): Home's boxes, heads and rows (home-arrange.css),
   one box per section — Needs you, Tasks, Workspaces, Repositories, Messages. Settings keeps the groups of rows. */
.agent-overview.home-boxes { display: flex; flex-direction: column; gap: var(--home-gap); min-width: 0; margin: 0; }
.agent-overview .agent-section-none { margin: 0; font-size: .875rem; line-height: 1.45; }
.agent-overview .ws-collection { margin: 0; }
.agent-settings { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.agent-settings > .meta { margin: 0; }
.agent-overview ~ .card.agent-more { margin-top: 16px; border-radius: var(--radius); }
/* What waits on the person, at the top: each title in red, as "Needs you" beside the name is. */
.home-item.needs-item .home-item-title { color: var(--red, #bd3551); }
[data-theme=dark] .home-item.needs-item .home-item-title { color: #ff9aaa; }
.info-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.info-row { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto) 18px; align-items: center; column-gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; color: inherit; font: inherit; text-align:start; text-decoration: none; cursor: pointer; }
.info-row + .info-row::before { content: ""; position: absolute; top: 0; inset-inline-start: 54px; inset-inline-end: 0; border-top: 1px solid var(--line); }
.info-row:hover { background-color: #faf8fd; }
.info-row:focus-visible { outline: 3px solid #b987ef; outline-offset: -3px; }
.info-icon { display: inline-grid; place-items: center; color: #24212d; }
.info-icon .icon { width: 22px; height: 22px; }
.info-label { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.info-value { min-width: 0; max-width: 46vw; color: var(--muted); text-align:end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-chevron { display: inline-grid; place-items: center; color: var(--muted); }
.info-chevron .icon { width: 18px; height: 18px; }
.info-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--staff-accent); vertical-align: middle; }
/* What a row opens over the page: the one choice it holds. */
.info-sheet { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.info-sheet > p { margin: 0; }
/* A form under the sheet's own words stands as far from them as its fields stand from each other (QA, 7 October 2026). */
.info-sheet > form.info-sheet { margin-top: 8px; }
.info-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align:start; cursor: pointer; }
.info-choice span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-choice small { color: var(--muted); }
.info-choice[aria-pressed="true"] { border-color: var(--purple); background: var(--soft); }
.info-choice .icon { width: 20px; height: 20px; color: var(--purple); flex: 0 0 auto; }
.info-choice:focus-visible { outline: 3px solid #b987ef; outline-offset: 2px; }
/* Appearance and Voice (0129): the face the agent sent, small, beside its choice; Symbionia's voices under Choose a voice. */
.info-choice > span:not(.sheet-face) { flex: 1 1 auto; }
.info-choice .sheet-face { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--soft); font-size: 24px; line-height: 1; }
.info-choice .sheet-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-choice .sheet-face .provider-face { width: 86%; height: 86%; display: block; }
.info-choice .sheet-face[data-home-face="provider"] { background: transparent; }
/* A face the provider draws from its shape and colour (0129), in every portrait. */
[data-portrait].portrait-own-provider { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
[data-portrait].portrait-own-provider .provider-face { display: block; width: 88%; height: 88%; }
.info-sheet [data-face-missing] { color: var(--muted); }
.voice-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.voice-list .voice-said { margin: 0; font-weight: 600; }
.voice-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.voice-group h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.voice-group .voice-count { margin: 0; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.info-choice.voice-choice { min-height: 48px; }
.info-choice.voice-choice:disabled { cursor: default; opacity: .55; }
/* The identity: the document readable, folded when it is long, and the way to write it under it. */
.agent-register > h2 { margin-bottom: 12px; }
.agent-register article > h3 { margin: 12px 0 4px; }
.agent-register-body { line-height: 1.6; }
.agent-register-body.folded { max-height: 14.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.agent-register-more { min-height: 44px; padding: 0 2px; font-weight: 600; color: var(--purple); }
.agent-identity-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.agent-identity-actions .btn { min-height: 44px; }
.agent-identity-actions:empty { display: none; }

/* A heading's own button is a 44px target on every page (it was, beside the ask to the Primary, until that
   moved into the form on 5 October 2026). */
.page-heading .actions > .btn { min-height: 44px; }

/* Replace plugged-in agent: the sentence the person gives the new agent, in a compact bordered box with a small Copy
   floated into its top corner so the words run around it (the Founder, 4 October 2026, 23:48; 9 October 2026: "the copy
   button is too big and not designed properly"). Copied keeps the outline: nothing on this page is solid but its press. */
.replace-lead { margin: 0; font-weight: 600; }
.replace-late { margin: 0; flex: 1; min-width: 0; }
.replace-waiting { margin: 0; flex: 1; min-width: 0; }
.replace-bars { display: grid; gap: 10px; }
.replace-bar { padding: 0; }
.replace-bar > summary { min-height: 44px; display: flex; align-items: center; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
.replace-bar > summary::-webkit-details-marker { display: none; }
.replace-bar > summary::after { content: "+"; margin-inline-start: auto; color: var(--purple); }
.replace-bar[open] > summary::after { content: "−"; }
.replace-bar > ul { margin: 0; padding: 0 16px 14px 34px; }
/* The countdown beside Stop waiting: a ring that empties over the five minutes, its m:ss inside, and a soft pulse
   around it so the page visibly waits (the Founder, 9 October 2026). */
.replace-wait-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.replace-wait-row .btn { min-height: 44px; }
.replace-clock { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.replace-clock::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; animation: replace-pulse 2s ease-out infinite; }
.replace-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.replace-clock circle { fill: none; stroke-width: 3; }
.replace-clock-track { stroke: var(--line); }
.replace-clock-left { stroke: var(--purple); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.replace-clock span { position: relative; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, #24212d); }
@keyframes replace-pulse { 0% { transform: scale(.8); opacity: .45; } 100% { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .replace-clock::before { animation: none; } .replace-clock-left { transition: none; } }
/* Who is asking: Agent and Runs on, each its own row between hairlines (the Founder, 9 October 2026). */
.replace-rows { margin: 12px 0 0; }
.replace-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.replace-rows > div:last-child { border-bottom: 1px solid var(--line); }
.replace-rows dt { color: var(--muted); font-size: .875rem; }
.replace-rows dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
/* Dark: the agent page's groups, rows, chips, choices and round call buttons take the dark surface and ink (audit 5 Oct). */
[data-theme=dark] .info-group, [data-theme=dark] .info-choice { background: var(--surface); color: var(--ink); }
[data-theme=dark] .agent-call, [data-theme=dark] .agent-call:active { background: transparent; color: var(--muted); }
[data-theme=dark] .info-row:hover, [data-theme=dark] .agent-call:hover, [data-theme=dark] .info-choice[aria-pressed="true"] { background: var(--soft); }
[data-theme=dark] .info-icon { color: var(--ink); }
/* Sources: the link a person gives the agent, under the list (audit 5 Oct). */
.agent-source-add { display: grid; gap: 10px; max-width: 520px; }
.agent-source-add label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.agent-source-add .input { width: 100%; max-width: none; }
/* Remove from crew, and the one message again (agent-crew.js). */
.crew-connect h2 { margin-bottom: 6px; }
.crew-confirm { margin-top: 14px; padding: 14px; border: 1px solid #f3c2cb; border-radius: 12px; background: #fff7f8; }
.crew-confirm p { margin: 0 0 10px; }
/* The Chief's next Chief, picked inside the same confirm (audit, 7 October 2026): one choice per line. */
.crew-next { margin: 0 0 12px; padding: 0; border: 0; display: grid; gap: 8px; }
.crew-next legend { padding: 0; margin-bottom: 8px; }
.crew-next-choice { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.crew-next-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--purple, #7c3aed); }
.crew-connect .actions { display: flex; flex-wrap: wrap; gap: 10px; }
[data-theme=dark] .crew-confirm { background: var(--surface); border-color: #7a2a3a; }
/* The Identity tab (the Founder, 7 October 2026): who the agent is and what the agent does, where and since when; then
   the identity as Add agent's form has it, read here and written with the pencil; then Appearance and Voice. */
.agent-identity { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.identity-summary { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.identity-summary-lead { font-size: 1rem; line-height: 1.55; }
.identity-summary-where { margin-top: 6px; }
.identity-form-head { margin-bottom: 2px; }
.identity-form-head .identity-edit { color: var(--purple); }
.identity-fields { display: grid; gap: 14px; margin: 14px 0 0; }
.identity-fields > div { min-width: 0; }
.identity-fields dt { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.identity-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
/* Name and Title, then Identity, Soul and Role each under its own heading (the Founder, 8 October 2026). */
.identity-names { display: grid; gap: 14px; margin: 0; }
.identity-part { min-width: 0; }
.identity-part h3 { font-size: 1rem; font-weight: 600; margin: 4px 0 6px; }
.identity-part-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.identity-fields.folded { max-height: 22em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
/* The Connection tab: one list with hairlines between its rows; a row that only says something presses nothing. */
.info-row.info-static { cursor: default; }
.info-row.info-static:hover { background-color: transparent; }
.info-row .info-value .badge { vertical-align: middle; }
.agent-connection { display: flex; flex-direction: column; min-width: 0; }
.agent-connection > .crew-connect { margin: 0; }
/* The acts that end something, at the bottom, in red and nothing else red. */
.danger-group > * + * { border-top: 1px solid var(--line); }
.info-row.info-danger .info-label, .info-row.info-danger .info-icon { color: var(--red); }
[data-theme=dark] .info-row.info-danger .info-label, [data-theme=dark] .info-row.info-danger .info-icon { color: #ff9aaa; }
.crew-end .crew-confirm { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px; }
/* A confirm's two answers: one width each, side by side, at the right on a wide screen and halves on a phone. */
.confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: end; gap: 10px; margin-top: 12px; }
.confirm-actions > .btn { width: 100%; min-height: 44px; }
@media (max-width: 640px) { .confirm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }
.agent-repositories-slot > h2 { margin-bottom: 12px; }
/* An invitation has no Chat or Call until the agent joins (the Founder, 7 October 2026). */
.page-heading.agent-heading[data-invited] .agent-calls { display: none; }
/* Wake on message is a row of the Connection list (wake-row.js), with the list's hairlines on both sides. */
[data-connection-list] > .wake-on-message { position: relative; }
[data-connection-list] > .wake-on-message::before, [data-connection-list] > .wake-on-message + .info-row::before { content: ""; position: absolute; top: 0; inset-inline-start: 54px; inset-inline-end: 0; border-top: 1px solid var(--line); }
[data-connection-list] > .wake-on-message > .meta { margin: -4px 16px 10px 54px; }
/* QA, 7 October 2026: Working stands a little apart from the Online pill; a row's name stays on one line, its value gives way. */
.info-row .info-value .agent-activity { margin-inline-start: 8px; vertical-align: middle; }
[data-connection-list] .info-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-connection-list] .info-value { max-width: 42vw; }
[data-connection-list] .info-row { column-gap: 8px; }
[data-connection-list] .info-label { margin-inline-start: 6px; }
/* Wake on message where the provider cannot wake the agent ("Not possible with Muse"): both sides wrap rather than cut to
   "Wake on…  Not possible with …" on a 390px phone (acceptance audit, 15 October 2026). The row has no chevron. */
[data-connection-list] > .wake-on-message > .info-row.info-static[data-agent-row="wake"] { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
[data-connection-list] > .wake-on-message > .info-row.info-static[data-agent-row="wake"] :is(.info-label, .info-value) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; max-width: none; }
/* The Tasks tab's New task, and the Repositories tab's second card, keep the gap every card on the page keeps. */
.agent-work-actions[data-agent-work-actions] { margin-bottom: 16px; }
#main .card + .card.agent-register[data-agent-files] { margin-top: 16px; }
/* The Connection list's two ids, last, in smaller muted type (Primy, 7 October 2026). */
.info-row.info-quiet { min-height: 44px; padding-top: 6px; padding-bottom: 6px; font-size: .8125rem; color: var(--muted); }
.info-row.info-quiet .info-label { font-weight: 400; }
.info-row.info-quiet .info-icon .icon { width: 18px; height: 18px; }
/* Wake on message: the header the key travels in waits behind More, closed (Primy, 7 October 2026). */
.wake-more > summary { display: inline-flex; align-items: center; gap: 4px; width: max-content; cursor: pointer; list-style: none; color: var(--purple); font-size: .875rem; font-weight: 600; }
.wake-more > summary::-webkit-details-marker { display: none; }
.wake-more > summary .icon { width: 16px; height: 16px; transition: transform .15s; }
.wake-more[open] > summary .icon { transform: rotate(180deg); }
.wake-more[open] > summary { margin-bottom: 10px; }
.wake-more > label { display: grid; gap: 6px; }
/* An agent's Funds (the Founder, 8 October 2026): Home's Overview tiles, each the width of one of Home's, never one tile
   stretched across the page. */
/* The Desk (the Founder, 9 October 2026, 02:50): the glance strip, then the blocks the person moves as on Home. */
.agent-desk-boxes { display: flex; flex-direction: column; gap: var(--home-gap); min-width: 0; }
.agent-glance .home-stats { grid-auto-columns: minmax(0, 1fr); }
.agent-glance .home-stat[data-agent-glance-tile=state] strong { font-variant-numeric: tabular-nums; }
.agent-spending-line { margin: 0; font-size: .9375rem; line-height: 1.45; }
.voice-call-said { margin: 8px 4px 0; overflow-wrap: anywhere; }
.voice-call-change { display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: var(--purple); font: inherit; font-weight: 600; cursor: pointer; }
.voice-call-change:hover { text-decoration: underline; }

/* The recovery code kept for the person (0175), shown on the Connection tab after proving it is them: the code wraps
   inside a 390px screen, never scrolls sideways. In the font the chats use (Ben, 12 October 2026, open list 63f), never
   monospace. */
.recovery-shown h2 { margin: 0 0 8px; font-size: 16px; }
.recovery-shown .recovery-code { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, #e3e5ea); border-radius: 10px; background: var(--surface-2, #f6f7f9); font-family: -apple-system, "SF Pro Text", system-ui, Roboto, "Segoe UI", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.recovery-shown .actions { margin: 0 0 4px; }
.recovery-shown [data-recovery-said] { margin: 8px 0 0; }
/* The face at the top of an agent's page is a press to the agent's Appearance (the Founder, 10 October 2026). */
.page-heading.agent-heading .agent-title > button.agent-head-face { padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.page-heading.agent-heading .agent-title > button.agent-head-face:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
/* The State row has nothing to open, so it keeps no chevron column: its pill ends where the plug-in checklist's marks end
   under it (the Founder, 10 October 2026, 06:09: "aligned with the check marks"). */
.info-row.info-static[data-connection-row="status"]{grid-template-columns:24px minmax(0,1fr) minmax(0,auto)}
.info-row.info-static[data-connection-row="status"] .info-chevron{display:none}

/* Replace plugged-in agent, first step: where the new agent runs (Ben, 12 October 2026). A plain list; the chosen place is a purple
   outline, as the history and the five below it are, and nothing on the page is solid but its press. */
.replace-provider { display: grid; gap: 8px; margin-top: 12px; }
.replace-provider-list { display: grid; gap: 6px; }
.replace-provider-option { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; text-align: start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #24212d); font: inherit; cursor: pointer; }
.replace-provider-option:hover { border-color: var(--purple); }
.replace-provider-option:focus-visible { outline: 3px solid #b987ef; outline-offset: 2px; }
.replace-provider-option[aria-pressed="true"] { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.replace-provider-note, .replace-chosen { margin: 0; }
.replace-chosen { margin-bottom: 8px; }
.replace-provider-option:disabled { opacity: .6; cursor: not-allowed; }
.replace-provider-option:disabled:hover { border-color: var(--line); }

/* The credits an agent Symbionia runs used in thinking, on its Desk (agent-overview.js thinkingCard). */
.agent-thinking{margin-top:10px;padding-top:10px;border-top:1px solid var(--line,rgba(0,0,0,.08))}
.agent-thinking p{margin:0}
.agent-thinking-title{font-weight:600}
.agent-thinking-line{margin-top:2px!important}
.agent-thinking-left{margin-top:2px!important;font-size:.92em}

/* One box for every message a person hands an agent (agent-message.js; the Founder, 15 October 2026): a title, one hint, one
   Copy that turns into Copied. The text stays hidden; it shows, selected, only where the clipboard refuses. */
.agent-message { --am-line: var(--line, #e7e5ee); --am-ink: var(--ink, #24212d); --am-muted: var(--muted, #686577); --am-purple: var(--purple, #6d28b5); --am-soft: var(--soft, #f2ecfa); --am-card: var(--card, #fff); margin: 12px 0 0; padding: 12px 12px 12px 14px; border: 1px solid var(--am-line); border-radius: 14px; background: var(--am-card); color: var(--am-ink); }
.harmony-add-agent .agent-message { --am-line: var(--ha-line); --am-ink: var(--ha-ink); --am-muted: var(--ha-muted); --am-purple: var(--ha-purple); --am-soft: var(--ha-soft); --am-card: #fff; margin: 0; }
.agent-message-head { display: flex; align-items: center; gap: 12px; }
.agent-message-words { display: grid; gap: 2px; flex: 1; min-width: 0; }
.agent-message-title { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.agent-message-hint { font-size: 14px; line-height: 1.4; color: var(--am-muted); overflow-wrap: anywhere; }
.agent-message-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--am-purple); border-radius: 999px; background: var(--am-purple); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.agent-message-copy:focus-visible { outline: 3px solid #b987ef; outline-offset: 2px; }
.agent-message-copy[data-copied] { background: var(--am-soft); color: var(--am-purple); }
.agent-message-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agent-message-done, .agent-message-copy[data-copied] .agent-message-glyph { display: none; }
.agent-message-copy[data-copied] .agent-message-done, .agent-message-glyph { display: inline-flex; }
.agent-message-body { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--am-line); border-radius: 10px; background: var(--am-card); color: var(--am-ink); font: 400 14px/1.4 -apple-system, "SF Pro Text", system-ui, Roboto, "Segoe UI", sans-serif; resize: vertical; }
.agent-message-body[hidden], .agent-message[hidden] { display: none; }

/* The type first, as Add agent asks it (replace-provider.js placeTypesMarkup): two options, the chosen one open, the other one line. */
.replace-provider .ha-choice { display: grid; gap: 8px; }
.replace-provider .ha-option { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; text-align: start; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #24212d); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.replace-provider .ha-option-set { border-color: var(--purple); background: var(--soft, #f2ecfa); }
.replace-provider .ha-option:focus-visible { outline: 3px solid #b987ef; outline-offset: 2px; }
.replace-provider .ha-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--muted); border-radius: 50%; background: var(--surface, #fff); box-sizing: border-box; }
.replace-provider .ha-option-set .ha-dot { border-color: var(--purple); background: radial-gradient(circle, var(--purple) 0 4px, var(--surface, #fff) 4.5px); }
.replace-provider .ha-option-text strong { display: block; font-size: 16px; line-height: 1.35; }
.replace-provider .ha-option-text span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.replace-provider .ha-option[data-collapsed] .ha-option-text span { display: none; }
/* The places: names only, one line each, one bordered list; the chosen one opens with its line, the rest fold away. */
.place-list { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.place-list .replace-provider-option { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.place-list .replace-provider-option:first-child { border-top: 0; }
.place-list .replace-provider-option[aria-pressed="true"] { box-shadow: none; background: var(--soft, #f2ecfa); }
.place-list[data-folded] { border-color: var(--purple); }
.place-list .replace-provider-option[hidden] { display: none; }
.replace-provider .ha-option, .place-list .replace-provider-option, .agent-message { scroll-margin-top: 84px; }
.place-list .place-line { margin: 0; }
.replace-provider-option, .place-list .replace-provider-option strong { overflow-wrap: anywhere; }
/* Cancel under the message: a small text link, never a second button. */
.replace-cancel-link { flex: none; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--purple); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.replace-give .agent-message { --am-card: var(--surface, #fff); }
.replace-give .replace-wait-row { margin-top: 10px; }
.replace-details { margin-top: 12px; }
.replace-details > summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--purple); font-size: 14px; cursor: pointer; }
.replace-details .replace-bar { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }

/* Key for <runtime> (env-key.js; 15 October 2026): the key shown once, in one box, with Copy and one line. */
.env-key-dialog .env-key-value { display: block; width: 100%; box-sizing: border-box; min-height: 96px; margin: 0 0 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; word-break: break-all; resize: none; }
.env-key-dialog [data-env-key-line] { margin: 12px 0 0; }
.env-key-dialog .env-key-then { margin: 18px 0 6px; }
.replace-env-key { margin: 14px 0 8px; }
/* Take over tasks, with its ⓘ beside the name (the Founder, 17 October 2026): the row is a box whose press covers it, and
   the ⓘ sits above the press so a tap on it opens the explanation, never the choice (agent-overview.js takeOverRow). */
.info-label-line { display: inline-flex; align-items: center; min-width: 0; gap: 2px; }
.info-take-over .state-info { position: relative; z-index: 1; }
.info-row-press { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.info-row-press:focus-visible { outline: 3px solid #b987ef; outline-offset: -3px; }

/* A Workspace's heading ends in Chat and Call, as an agent's does; the Group chat is no tab (the Founder, 18 October 2026). */
.page-heading > .workspace-calls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0; }
.workspace-calls > .icon-button, .workspace-calls > .group-call-join { min-width: 44px; min-height: 44px; }
/* Wake on message to set up: one press, a small dot that asks for it (the Founder, 22 October 2026). */
[data-agent-row="wake"].wake-setup .info-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--accent, var(--purple, #6d28b5)); font-weight: 600; }
.wake-attention { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none; }
/* Replace as a form of rows (the Founder, 22 October 2026): each row a label and one picker, the phone's own wheel. */
.place-rows { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface, #fff); }
.place-rows > .meta, .place-rows > [data-connect-guide] { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
.place-row { position: relative; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; margin: 0; }
.place-row + .place-row { border-top: 1px solid var(--line); }
.place-row-label { flex: none; min-width: 78px; font-weight: 600; }
.place-select { flex: 1 1 0; width: 0; min-width: 0; text-overflow: ellipsis; height: 52px; padding: 0 22px 0 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: end; text-align-last: end; appearance: none; -webkit-appearance: none; cursor: pointer; }
.place-row::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted, #8a8a93); border-bottom: 2px solid var(--muted, #8a8a93); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.place-select:focus-visible { outline: 2px solid var(--accent, #6d28b5); outline-offset: -2px; border-radius: 8px; }
/* Connect Codex in four steps (coding-connect.js; the Founder, 23 October 2026): one type scale. Titles 16/600, text 15,
   labels 13 grey, values 14 mono; each step a number in a circle; Copy one pill on its value's line. */
.cc { display: grid; gap: 14px; font-size: 15px; line-height: 1.45; }
.cc-lead { margin: 0; font-size: 15px; color: var(--muted, #686577); }
.cc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); overflow: hidden; }
.cc-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 16px 12px; }
.cc-step + .cc-step { border-top: 1px solid var(--line); }
.cc-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft, #f2ecfa); color: var(--accent, var(--purple, #6d28b5)); font-size: 14px; font-weight: 700; }
.cc-step-body { display: grid; gap: 8px; min-width: 0; }
.cc-title { margin: 3px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cc-said { margin: 0; font-size: 15px; font-weight: 400; color: inherit; }
.cc-said b { font-weight: 600; }
.cc-action { display: flex; }
.cc-open { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent, var(--purple, #6d28b5)); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.cc-row { display: grid; gap: 4px; min-width: 0; }
.cc-label { font-size: 13px; color: var(--muted, #686577); }
.cc-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cc-value { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft-2, rgba(0,0,0,.03)); color: inherit; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.03em; resize: none; text-overflow: ellipsis; }
textarea.cc-value { white-space: pre-wrap; }
.cc-value::placeholder { color: var(--muted, #8a8a93); font-family: inherit; font-style: italic; }
.cc-copy { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); color: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cc-copy:disabled { opacity: .4; cursor: default; }
.cc-status { margin: 0; font-size: 13px; color: var(--muted, #686577); }
.cc-status:empty { display: none; }
/* Waiting for the agent after the key: a soft pulsing dot; Connected: a green one. */
.cc-status[data-cc-state] { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); color: var(--ink, #24212d); font-size: 14px; font-weight: 600; }
.cc-status[data-cc-state]::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted, #686577); }
.cc-status[data-cc-state=waiting]::before { animation: cc-wait 1.4s ease-in-out infinite; }
.cc-status[data-cc-state=connected]::before { background: #16a34a; }
@keyframes cc-wait { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cc-status[data-cc-state=waiting]::before { animation: none; } }
dialog.harmony-add-agent.cc-confirm { box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 18px; }
dialog.cc-confirm .cc-said { margin: 0 0 16px; }
.gh-wake { display: grid; gap: 10px; margin-top: 8px; }
.gh-wake [data-github-token-page] { white-space: nowrap; }
/* The important notes for a coding agent (coding-notes.js; the Founder, 24 October 2026): one short line each, ⓘ opens the
   full text under it. */
.cn { display: grid; gap: 6px; }
.cn-line { margin: 0; font-size: 15px; line-height: 1.45; }
.cn-line b { font-weight: 600; }
.cn-i { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; margin: -6px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent, var(--purple, #6d28b5)); font-size: 18px; line-height: 1; cursor: pointer; vertical-align: middle; }
.cn-i:focus-visible { outline: 2px solid var(--accent, #6d28b5); outline-offset: 1px; }
.cn-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft, #f2ecfa); font-size: 14px; line-height: 1.45; }
.auth-no-budget { margin: 6px 0 0; font-size: 14px; color: var(--muted, #686577); }
/* Codex on a Symbionia computer (codex-computer.js; the Founder, 24 October 2026): the choice, the code large, the rows. */
.codex-where { margin-top: 8px; }
.codex-flow { display: grid; gap: 14px; }
.codex-code { display: grid; gap: 8px; }
.codex-code-value { margin: 4px 0; font: 600 32px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-align: center; padding: 14px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft-2, rgba(0,0,0,.03)); overflow-wrap: anywhere; }
.codex-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.codex-rows li[data-done="true"] { color: inherit; }
.codex-rows li[data-done="false"] { color: var(--muted, #686577); }
.codex-needs { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--soft, #f2ecfa); }
.codex-needs p { margin: 0; }
.codex-move { display: grid; gap: 8px; margin-bottom: 12px; }
/* Security audit M2: a take-over the Seat's current agent did not sign, said first and plainly, with Refuse beside it. */
.replace-unsigned { margin: 12px 0; padding: 12px 14px; border: 1px solid #d92d20; border-radius: 12px; background: color-mix(in srgb, #d92d20 8%, transparent); overflow-wrap: anywhere; }
.replace-unsigned p { margin: 0 0 8px; }
.replace-unsigned strong { color: #b42318; }
[data-replace-key-field] { display: grid; gap: 6px; }
[data-replace-key-field] input { font: 600 1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; max-width: 14ch; }

/* What an agent used of its own platform's plan, on its Desk (agent-overview.js usageBody; 0287). */
.agent-usage-plan{margin:0 0 8px;font-weight:600}
.agent-usage-meters{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.agent-usage-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.agent-usage-name{font-weight:500;min-width:0}
.agent-usage-amount{color:var(--muted,#686577);font-variant-numeric:tabular-nums}
.agent-usage-bar{margin-top:6px;height:6px;border-radius:999px;background:var(--line,rgba(0,0,0,.08));overflow:hidden}
.agent-usage-bar span{display:block;height:100%;border-radius:inherit}
.agent-usage-age{margin:10px 0 0;font-size:.92em}
/* The usage bar at the top of a connected agent's page, on every tab (agent-overview.js usageTopBar; 0287; the Founder,
   26 October 2026): one bar, the main meter, in the agent's own strong colour, with the model running now; a press opens
   every meter in a sheet from the bottom. */
.agent-usage-bar span,.agent-usage-chip-bar span{background:var(--agent-ink,var(--staff-ink,var(--purple,#6b2fb3)))}
:root [data-theme=dark] :is(.agent-usage-bar,.agent-usage-chip-bar) span{background:var(--agent-ink-dark,var(--staff-ink-dark,var(--agent-ink,var(--purple,#a77ce6))))}
.agent-usage-top{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 14px;padding:10px 12px 10px 14px;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:14px;background:var(--surface,#fff);color:inherit;font:inherit;text-align:start;cursor:pointer}
.agent-usage-top:hover{border-color:var(--agent-ink,var(--purple,#6b2fb3))}
.agent-usage-top:focus-visible{outline:2px solid var(--agent-ink,var(--purple,#6b2fb3));outline-offset:2px}
.agent-usage-top-model{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--soft,#f4f4f7);font-size:.85em;font-weight:600}
.agent-usage-top-main{flex:1;min-width:0}
.agent-usage-top .agent-usage-row{font-size:.92em}
.agent-usage-top .agent-usage-bar{margin-top:5px;height:6px}
.agent-usage-top-more{flex:none;display:inline-grid;color:var(--muted,#686577)}
.agent-usage-meter[data-level=high] .agent-usage-amount,[data-level=high]>.agent-usage-top-main .agent-usage-amount,.agent-usage-chip[data-level=high] .agent-usage-chip-pct{color:#bd3551;font-weight:600}
.agent-usage-pin{margin-top:8px;padding:0}
.agent-usage-model{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--soft,#f4f4f7)}
.agent-usage-model span{color:var(--muted,#686577)}
.agent-usage-group{margin:16px 0 8px;font-size:.85rem;font-weight:500;color:var(--muted,#686577)}
.agent-usage-resets{margin:4px 0 0;font-size:.85em;color:var(--muted,#686577)}
.agent-usage-where{margin:6px 0 0;font-size:.92em}

/* In the chat with the agent: the model and the main percent, under the name; a press opens the same sheet. */
.chat-head-usage{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:8px}
.agent-usage-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:999px;background:var(--surface,#fff);color:inherit;font:500 .8125rem/1.2 inherit;cursor:pointer}
.agent-usage-chip-model{font-weight:600;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-usage-chip-bar{display:block;width:48px;height:5px;border-radius:999px;background:var(--line,rgba(0,0,0,.08));overflow:hidden}
.agent-usage-chip-bar span{display:block;height:100%;border-radius:inherit}

/* The sheet: from the bottom, scrolled inside, closed by ×, Escape or a press outside it. */
dialog.agent-usage-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(560px,100%);max-width:100%;max-height:85dvh;padding:0;border:0;border-radius:22px 22px 0 0;background:var(--page,#f7f7fa);color:inherit;box-shadow:0 -8px 30px rgba(0,0,0,.18);overflow:hidden;display:none;flex-direction:column}
dialog.agent-usage-sheet[open]{display:flex;animation:usage-sheet-up .22s ease-out}
dialog.agent-usage-sheet::backdrop{background:rgba(20,18,28,.35)}
@keyframes usage-sheet-up{from{transform:translateY(40px);opacity:.6}}
@media (prefers-reduced-motion:reduce){dialog.agent-usage-sheet[open]{animation:none}}
.agent-usage-sheet-head{position:relative;display:flex;align-items:center;justify-content:center;padding:18px 56px 10px;border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.agent-usage-sheet-grip{position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line,rgba(0,0,0,.15))}
.agent-usage-sheet-head h2{margin:0;font-size:1.05rem}
.agent-usage-sheet-close{position:absolute;left:12px;top:10px;width:40px;height:40px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:50%;background:var(--surface,#fff);color:inherit;font-size:1.4rem;line-height:1;cursor:pointer}
.agent-usage-sheet-body{overflow:auto;padding:14px 16px max(20px,env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.agent-usage-sheet-body .agent-usage-meters{padding:12px 14px;border-radius:16px;background:var(--surface,#fff)}