/* One message in a chat with an Agent (chat-message.js): who wrote it, with their face, over a bubble, and when it was
   written under the bubble (the Founder, 4 October 2026, 23:30, showing an iMessage chat). The message is a column with no
   ground of its own; the bubble carries the colour, rounder than before, the person's on the right and the Agent's on the left. */
.team-message[data-chat-message],[data-theme=dark] .team-message[data-chat-message]{display:flex;flex-direction:column;align-items:flex-start;padding:0;background:none;border:0;border-radius:0;box-sizing:border-box;min-width:0}
.team-message.mine[data-chat-message]{align-items:flex-end}
/* The name beside the face, at the start of a run (the Founder, 9 October 2026: "your name doesn't appear… my name
   doesn't appear as well"): small, the agent's in its chat colour. In dark mode a colour of the person's own (10 October
   2026) is lightened until it reads on the page (`--staff-ink-dark`, terminal-chat-colors.js); the seventeen keep their fill. */
.team-message .chat-who,.chat-call-turn .chat-who{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px;line-height:1.3;margin:0 6px 3px;min-width:0;max-width:100%}
.chat-who-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}


.team-message .chat-who .human-photo.chat-human-photo{margin-inline-end:0}
.team-message .chat-who-face{width:24px;height:24px;min-width:24px;border-radius:50%;background:#ebe6f3}
/* The words at a phone chat's size (the Founder, 9 October 2026: "the size of the font in our chat is too big"), the
   same in every chat. The page is never enlarged by the phone's text autosizing. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* The words in the phone's own chat font, at a phone chat's size, with room inside the bubble, as WhatsApp has them (the
   Founder, 10 October 2026, 02:16, beside WhatsApp's and Grok's chats: the brand font reads too wide in a chat). */
.chat-bubble{position:relative;max-width:100%;box-sizing:border-box;padding:8px 12px;border-radius:18px;font-family:-apple-system,"SF Pro Text",system-ui,Roboto,"Segoe UI",sans-serif;font-weight:400;font-size:15px;line-height:1.3;background:#f0f1f5;overflow-wrap:anywhere;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:filter .12s ease}
.team-message .chat-bubble > p{margin:0;line-height:inherit}
.team-message .chat-bubble > p + p{margin-top:6px}
.team-message.mine > .chat-bubble{background:var(--soft)}
[data-theme=dark] .chat-bubble{background:#312b3a}
[data-theme=dark] .team-message.mine > .chat-bubble{background:#3b2f4d}
/* An agent with a chat colour speaks in a bubble of that colour, filled, in light and dark alike (the Founder,
   7 October 2026, with Harmony's chat as the example): its words, its time, a link, the writing dots, all in the words'
   colour on it; code and a found word on a wash of the words' colour. The writing bubble is the same bubble. */
.team-message.agent-says[class*="chat-color-"] > .chat-bubble,[data-theme=dark] .team-message.agent-says[class*="chat-color-"] > .chat-bubble{background:var(--staff-accent);color:var(--staff-on)}
.team-message.agent-says[class*="chat-color-"] > .chat-bubble :is(a,.meta,small,strong,.chat-dots){color:inherit}
.team-message.agent-says[class*="chat-color-"] > .chat-bubble :is(code,pre,kbd){background:color-mix(in srgb,currentColor 18%,transparent);color:inherit}
.team-message.agent-says[class*="chat-color-"] > .chat-bubble mark{background:color-mix(in srgb,currentColor 30%,transparent);color:inherit}
.team-message.agent-says[class*="chat-color-"] > .chat-bubble ::selection{background:color-mix(in srgb,currentColor 35%,transparent)}
.team-message.agent-says[class*="chat-color-"] > .chat-bubble .chat-dots i{opacity:.6}
@media (prefers-reduced-motion:no-preference){.team-message.agent-says[class*="chat-color-"] > .chat-bubble .chat-dots i{animation-name:chat-dot-on}}
@keyframes chat-dot-on{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-3px);opacity:1}}
/* Pressed: the bubble darkens a little while its menu is open; Select text makes its words selectable, and says so with a ring. */
.team-message.menu-open > .chat-bubble{filter:brightness(.93)}
[data-theme=dark] .team-message.menu-open > .chat-bubble{filter:brightness(1.18)}
.team-message.selecting > .chat-bubble{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;cursor:text;box-shadow:0 0 0 2px var(--purple)}
/* The keyboard's way to the menu: unseen until it is focused, when the bubble takes the ring. */
.team-message .chat-more{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.team-message:has(> .chat-more:focus-visible) > .chat-bubble{outline:2px solid var(--purple);outline-offset:2px}
/* When it was written: just under the bubble, outside it, small and grey, on the bubble's own side (the Founder,
   4 October 2026, 23:30; again 10 October 2026, 02:09). Beside it a Stop while the message is read aloud, and "Read"
   under the person's message the agent saw. */
.team-message .chat-meta{display:flex;align-items:center;gap:6px;margin:3px 8px 0;min-height:14px}
.team-message .chat-meta:empty{display:none}
.team-message .chat-when{flex:none;white-space:nowrap;font-size:11px;line-height:14px;color:var(--muted);font-variant-numeric:tabular-nums}
/* "Edited" beside the time of an agent's turn it edited (0290): as small and grey as the time, a button; pressed, the
   earlier versions open under the bubble, oldest first, each with its time. */
.team-message .chat-edited{flex:none;padding:0;border:0;background:none;font:inherit;font-size:11px;line-height:14px;color:var(--muted);font-style:italic;text-decoration:underline dotted;text-underline-offset:2px;cursor:pointer;position:relative}
.team-message .chat-edited::after{content:'';position:absolute;inset:-6px -4px}
.team-message .chat-edited:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.team-message .chat-edits{margin:4px 8px 0;max-width:min(100%,520px);max-height:240px;overflow-y:auto;overscroll-behavior:contain;font-size:13px;line-height:18px;color:var(--muted)}
.team-message .chat-edits-list{margin:0;padding:0 0 0 10px;list-style:none;border-left:2px solid color-mix(in srgb,var(--muted) 35%,transparent);display:flex;flex-direction:column;gap:6px}
.team-message .chat-edits-list li{display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere;white-space:pre-wrap}
.team-message .chat-edits-note{margin:0;font-size:12px}
/* Grouped: a run from one side close together, a change of turn a little apart (the Founder, 5 October 2026). */
.chat-panel-log.team-chat,.chat-thread-log.team-chat{gap:0}
/* The conversation is the box that scrolls, and the only one (the Founder, 14 October 2026, on his iPhone in "Dev":
   dragging down to older messages "always gets stuck" until he first pushes up a little). Each message's hidden
   "Message options" button is placed absolutely; with no positioned box inside the log, every one of them was placed
   against the full-screen chat around it, so that chat, overflow hidden and not scrollable by a finger, held thousands
   of pixels of overflow over the log, and on iOS the first drag went to it. The log is now where they are placed, and
   a drag that reaches its end stops there instead of passing to the page. */
/* The log is the one vertical scroller of a chat (the Founder, 16 October 2026, iPhone): a swipe on it never chains to the page, and the browser knows at once it is a vertical pan (chat-newest.js keeps it one pixel inside its range). */
.chat-thread-log,.chat-panel-log{position:relative;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.team-chat > .team-message[data-chat-message],.team-chat > .team-message.chat-typing{margin-top:12px}
.team-chat > .team-message.grouped{margin-top:2px}
.team-chat > .team-message:first-child{margin-top:0}

/* ---- The agent writing (the Founder, 5 October 2026): three dots in the agent's bubble from the moment the person
   sends until the reply arrives. Still dots where the person asks for less motion. ---- */
.team-message.chat-typing,[data-theme=dark] .team-message.chat-typing{display:flex;flex-direction:column;align-items:flex-start;padding:0;background:none;border:0;border-radius:0;max-width:85%;align-self:flex-start}
.team-message.chat-typing > .chat-bubble{cursor:default;padding:11px 14px}
@media (max-width:699px){.chat-bubble{font-size:16px}}
/* A message on its way keeps its own colours and stays live (the Founder, 18 October 2026): only a small clock after the text. */
.team-message.chat-sending > .chat-bubble::after{content:"\25F7";margin-inline-start:6px;font-size:.7em;opacity:.55}
.chat-dots{display:inline-flex;align-items:center;gap:4px;height:9px;color:var(--muted)}
.chat-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:chat-dot 1.2s ease-in-out infinite}
.chat-dots i:nth-child(2){animation-delay:.15s}
.chat-dots i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:.9}}
@media (prefers-reduced-motion:reduce){.chat-dots i{animation:none;opacity:.6}}
.chat-typing-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* In the Primary's small window: the dots in a bubble of their own, over the line that says what happened. */
.pf-bubble .pf-bubble-typing{display:inline-flex;margin:8px 6px 0;padding:11px 14px;cursor:default}
.team-message .chat-stop{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;margin:-15px 0;padding:0 10px;border-radius:999px;color:var(--purple);font-size:.8125rem;font-weight:600}
.team-message .chat-stop .icon{width:14px;height:14px;fill:currentColor}
.team-message .chat-stop:hover{background:#2a1d3c12}

/* ---- The menu a bubble opens (the Founder, 4 October 2026, 23:30: "like WhatsApp"): beside the bubble, each row a
   thumb's height, on screen at 320px. ---- */
.chat-menu{position:fixed;z-index:150;display:flex;flex-direction:column;min-width:200px;max-width:calc(100vw - 16px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:6px;background:#fff;color:#24212d;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px #1d162a2e,0 2px 6px #1d162a14}
.chat-menu [role^=menuitem]{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 14px 0 12px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;font-size:.9375rem;line-height:1.2;text-align:start;white-space:nowrap;cursor:pointer}
.chat-menu [role^=menuitem]:hover{background:#2a1d3c0f}
.chat-menu [role^=menuitem]:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;background:#2a1d3c0f}
.chat-menu .icon{flex:none;width:18px;height:18px;color:var(--muted)}
.chat-menu [aria-checked=true]{color:inherit}
.chat-menu [aria-checked=true] .icon{color:inherit;fill:none}
.chat-menu-rule{height:1px;margin:4px 8px;background:var(--line)}
[data-theme=dark] .chat-menu{background:#241f2c;color:#eee;border-color:#3a3346}
[data-theme=dark] .chat-menu [role^=menuitem]:hover,[data-theme=dark] .chat-menu [role^=menuitem]:focus-visible{background:#ffffff14}
[data-theme=dark] .chat-menu-rule{background:#3a3346}
/* ---- A chat's header keeps its options behind three vertical dots (the Founder, 8 October 2026, ~18:30 Israel time:
   "put three vertical dots, and let that open up any options you want from this chat"): the message menu's look,
   under the dots; Notifications says On or Off at the row's end. */
.chat-dots .chat-dots-glyph{fill:currentColor;stroke:none}
.chat-dots[aria-expanded=true]{background:none}
[data-theme=dark] .chat-dots[aria-expanded=true]{background:#ffffff14}
.chat-head-menu{min-width:220px}
.chat-head-menu-note{margin-inline-start:auto;padding-inline-start:16px;color:var(--muted);font-size:.8125rem}
.chat-head-menu [aria-checked=true] .chat-head-menu-note{color:var(--purple)}
/* Forward: the person's other chats, one row each. */
.chat-forward-quote{margin:0 0 12px;padding:8px 12px;border-inline-start:3px solid var(--line);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:7.5em;overflow:hidden}
.chat-forward-title{margin:12px 0 4px;font-size:.8125rem;font-weight:600;color:var(--muted)}
.chat-forward-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.chat-forward-to{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 8px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.chat-forward-to:hover,.chat-forward-to:focus-visible{background:#2a1d3c0f}
.chat-forward-to:disabled{opacity:.55;cursor:default}
.chat-forward-face{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--purple-dark);font-weight:600}
.chat-forward-name{display:grid;min-width:0}
.chat-forward-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-forward-name small{color:var(--muted)}
[data-theme=dark] .chat-forward-face{background:#3b2f4d;color:#eee}

/* ---- Recording in the composer (the Founder, 3 October 2026, 23:30): a sound wave while recording; then the words in
   the text box to edit, with the recording attached above it as a chip. ---- */
.composer .voice-note-compose{order:-1}
.composer:not(.voice-live) .voice-note-compose{border-top:0;padding-top:0}
.composer.voice-attached .voice-note-compose{display:block!important;padding-bottom:6px}
.voice-bar .voice-wave{flex:1 1 auto;min-width:40px;height:32px;color:var(--purple)}
.voice-bar .voice-clock{flex:0 0 auto;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--muted);min-width:2.6em;text-align:end}
.voice-bar .voice-said{flex:1;min-width:0}
.voice-attached-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.voice-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:44px;padding:0 0 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--purple-dark);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.voice-chip .icon{width:16px;height:16px}
.voice-chip-remove{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:999px;color:var(--muted)}
.voice-chip-remove .icon{width:16px;height:16px}
.voice-chip-remove:hover{color:inherit;background:#2a1d3c12}
.voice-attached-row [role=status]{flex:1 1 160px;min-width:0}
[data-theme=dark] .voice-chip{background:#2a2236;color:var(--ink,#eee);border-color:var(--line,#3a3346)}
/* The call in a composer that writes to the Primary sits beside the microphone (the Founder, 3 October 2026, 23:55). */
.composer > .call-open{width:44px;min-width:44px;height:44px;color:var(--purple);align-self:flex-end;flex-shrink:0}
.composer > .call-open .icon{width:21px;height:21px}
.composer.voice-live > .call-open{display:none}

/* ---- A call in the chat is one card (the Founder, 9 October 2026: "frame it as one call… Separate me and Primy into
   two different sides, as in the chat, and use the different colors as in the chat… add the avatar and name of each
   one"): a frame the conversation's width, "Call · 9:58 · 21:04" at its top, and inside it each thing said a bubble on
   its speaker's side, in the chat's colours, the face and name at the start of a run. The words are selectable. ---- */
.team-message.chat-call[data-chat-message]{align-self:stretch;align-items:stretch;max-width:100%}
.chat-call-card{box-sizing:border-box;min-width:0;padding:10px 10px 12px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--soft) 45%,transparent)}
.chat-call-head{display:flex;align-items:center;gap:6px;margin:0 2px 8px;font-weight:600;font-size:12px;line-height:1.3;color:var(--muted)}
.chat-call-head .icon{width:16px;height:16px;color:var(--purple)}
.chat-call-head .chat-when{font-size:12px;font-weight:600;color:inherit}
.chat-call-turns{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Each thing said is a message of its own, drawn by the rules above: its bubble, its time inside, its menu on a press. */
.team-message.chat-call-turn[data-chat-message]{max-width:85%}
.team-message.chat-call-turn.mine[data-chat-message]{align-self:flex-end}
.chat-call-turn+.chat-call-turn:not(.grouped){margin-top:8px}
[data-theme=dark] .chat-call-head{color:var(--muted)}
/* With the call and the microphone beside it, the prompt stays on one line rather than being cut in two. */
.composer > textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Read aloud while the register gets the voice: the Stop pulses until the audio plays. */
.team-message .chat-stop[data-playing=loading] .icon{animation:chat-listen-wait .9s ease-in-out infinite alternate}
@keyframes chat-listen-wait{from{opacity:1}to{opacity:.35}}
@media (prefers-reduced-motion:reduce){.team-message .chat-stop[data-playing=loading] .icon{animation:none;opacity:.6}}
/* The question a letter's Answer opened the chat at (R&D 1446): marked until the person moves on. */
.team-message.chat-landed{box-shadow:0 0 0 2px rgba(121,41,195,.38);border-radius:16px}
/* No reply after 90s, or a send that failed: said in words where the dots were (Vinci, R&D 1682). */
.chat-not-sent{margin:12px 0 0;font-size:13px;line-height:1.35;color:var(--muted);align-self:flex-start}
/* Under the person's message an agent on a routine has not read yet: when it reads, quiet, on the person's side. */
.chat-reads{margin:4px 8px 0;font-size:12px;line-height:1.35;color:var(--muted);align-self:flex-end;text-align:end;max-width:100%;text-wrap:balance}
.chat-not-sent{color:var(--danger,#b42318);align-self:flex-end;text-align:end}

/* "Plan & billing" in an agent's credits notice, a link to that page (R&D 1785): the bubble's own colour, underlined. */
.chat-bubble a.chat-notice-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* ---- The composer is the width of its conversation (the Founder, 5 October 2026: "like ChatGPT or Claude"). The box
   has a row of its own, the whole width, and grows with the words up to a limit, then scrolls inside; the paperclip on
   the left and the call, the microphone and Send on the right sit on a row under it. A recording or a chosen file sits
   above the box. Primary-assist's line at a form's top keeps its own (primary-assist.css). */
form.composer:not(.pa-composer){flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 4px;padding:6px 8px}
form.composer:not(.pa-composer) > .voice-note-compose,form.composer:not(.pa-composer) > .attach-compose{order:-2;flex:1 0 100%;min-width:0}
/* The box grows with the words to about eight lines, never more than two fifths of what is visible, then scrolls
   inside; the conversation above it keeps its room and scrolls (the Founder, 9 October 2026: "when I have a lot of text
   in my text box… I can't see previous messages"). terminal-live.js sets the height from the visible viewport. */
form.composer:not(.pa-composer) > textarea{order:-1;flex:1 0 100%;width:100%;min-width:0;max-height:min(176px,40dvh);overflow-y:auto;overscroll-behavior:contain;padding:8px 6px}
form.composer:not(.pa-composer) > .attach{margin-inline-end:auto}
/* The recorder in the composer's own height (voice-notes.js holds it while the bar shows): the bar sits in its middle. */
form.composer.voice-live{align-content:center}
form.composer:not(.pa-composer) > :is(.attach,.call-open,.mic,button[type=submit]){align-self:center}
/* A recording just sent leaves nothing on the screen; its "Recording sent." is for a screen reader only. */
form.composer:not(.voice-live):not(.voice-attached) > .voice-note-compose:not(:has(p:not(:empty))){display:block!important;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* With Enter a new line, Send is the only way to send on a phone: it stays on the screen while the keyboard is up
   (Vinci, R&D 1822). The chat fits a short screen: the messages give way first, the box stops growing at under a
   third of it. Nothing here depends on where the focus is, so a tap on Send never moves Send. */
.chat-thread > form.composer{flex-shrink:0}
.chat-thread > .chat-thread-log.team-chat{min-height:0}
@media (max-width:699px){
  .chat-app{min-height:0}
}
/* The keyboard up on a phone (terminal-live.js chatKeyboard; the Founder, 16 October 2026): every chat (Messages, the
   Feed, the chat sheet, a room) is the visible area and nothing else. The page is still; the chat, its own header first,
   is fixed to the top of the layout and moved down to where the visible area starts; its height is the visible height,
   so its composer's foot is the keyboard's top. The numbers come from the visual viewport only, and nothing animates. */
@media (max-width:699px){
  html.chat-kb,html.chat-kb body{overflow:hidden!important;overscroll-behavior:none}
  html.chat-kb .chat-kb-host{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;max-width:none!important;height:var(--vvh,100dvh)!important;min-height:0!important;max-height:none!important;transform:translate3d(0,var(--vvtop,0px),0)!important;margin:0!important;border:0!important;border-radius:0!important;padding-bottom:0!important;z-index:80!important;transition:none!important;animation:none!important;grid-template-rows:minmax(0,1fr)}
  html.chat-kb .chat-kb-host :is(.chat-thread,.chat-panel-log,.chat-thread-log,form.composer){transition:none!important}
  html.chat-kb .chat-kb-host .chat-thread{height:100%;min-height:0}
  html.chat-kb .chat-kb-host :is(.chat-thread-log,.chat-panel-log){flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html.chat-kb .chat-kb-host form.composer{margin-bottom:0!important}
  /* Held on its own layer, so a new offset is a move of that layer and not a new layout; and the bar of screens, which
     floats at the foot of the page, never shows over or beside a chat held on the keyboard (muse-shell.css draws it). */
  html.chat-kb .chat-kb-host{will-change:transform}
  html.chat-kb :is(.bottom-nav,.chat-launcher){visibility:hidden!important}
}
/* The conversation keeps room to read and scroll, whatever the box holds. */
.chat-thread > .chat-thread-log.team-chat,.chat-panel-log.team-chat{min-height:min(120px,30dvh)}

/* ---- Newest, when the conversation is scrolled up (the Founder, 9 October 2026): a round arrow down over the
   conversation, just above the composer; gone at the bottom. A dot on it when something new came in. ---- */
.chat-newest{position:relative;z-index:3;align-self:flex-end;display:grid;place-items:center;width:40px;height:40px;min-height:40px;margin:-52px 14px 12px auto;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface,#fff);color:var(--ink,#24212d);box-shadow:0 4px 14px #1d162a26;flex-shrink:0;cursor:pointer}
.chat-newest[hidden]{display:none}
.chat-newest .icon{width:20px;height:20px}
.chat-newest[data-new]::after{content:"";position:absolute;top:1px;inset-inline-end:1px;width:10px;height:10px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 2px var(--surface,#fff)}
.chat-newest:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
[data-theme=dark] .chat-newest{background:#241f2c;color:#eee;border-color:#3a3346}
/* An agent's ask under its words (0150): pills to press, or a locked field for a sign-in. The bubble is not selectable
   and opens a menu on a press; the ask inside it is a form, so it takes the cursor, the selection and the keyboard. */
.chat-ask{display:grid;gap:8px;margin-top:8px;cursor:auto;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.chat-ask :is(input,button){-webkit-user-select:auto;user-select:auto}
.chat-ask-choices{display:flex;flex-wrap:wrap;gap:8px}
.chat-ask-choices .btn{min-width:84px;justify-content:center;border-radius:999px}
.chat-ask-choices .btn:disabled{opacity:.55}
.chat-ask-choices .btn.chat-ask-chosen:disabled{opacity:1}
.chat-ask-said{margin:0;font-size:.8125rem;line-height:1.4;opacity:.85}
.chat-ask-error{margin:0;font-size:.8125rem;line-height:1.4;color:var(--red,#bd3551)}
.chat-ask-lock{display:flex;align-items:center;gap:6px;margin:0;font-size:.8125rem;line-height:1.4}
.chat-ask-lock .icon{width:16px;height:16px}
.chat-ask-field{display:grid;gap:4px;font-size:.8125rem}
.chat-ask-field .input{width:100%;min-width:0;box-sizing:border-box;border-radius:12px;font-size:16px;color:#24212d;background:#fff}
[data-theme=dark] .chat-ask-field .input{color:#f3f0f8;background:#221d29}
.chat-ask-secret .btn{justify-self:start;border-radius:999px}
/* Read (the Founder, 8 October 2026): under the person's last message the agent saw, small and muted, at the right. */
.team-message .chat-read{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:11px;line-height:1.2;font-weight:600;color:var(--muted,#686577)}
.team-message .chat-read-ticks{color:#2f8fdd;letter-spacing:-2px;font-size:11px}
[data-theme=dark] .team-message .chat-read-ticks{color:#6cb8f5}

/* Send wears the chat's colour (the Founder, 10 October 2026, 02:09: a blue chat, a blue Send): the colour as the fill,
   the arrow in the colour words are read on over it (white, or near-black on the light ones), as on the agent's bubbles.
   A chat with no colour keeps the Terminal's purple. */
form.composer[class*="chat-color-"] > button[type=submit],[data-theme=dark] form.composer[class*="chat-color-"] > button[type=submit]{background:var(--staff-accent);border-color:var(--staff-accent);color:var(--staff-on)}
form.composer[class*="chat-color-"] > button[type=submit]:hover{filter:brightness(.92)}
form.composer[class*="chat-color-"] > button[type=submit]:disabled{opacity:.55}
form.composer[class*="chat-color-"] > button[type=submit]:focus-visible{outline:2px solid var(--staff-accent);outline-offset:2px}
/* Recording a voice note in a coloured chat: the wave and Send in the chat's colour, as the composer's Send (the Founder,
   10 October 2026, 06:39: purple while Vinci's chat is yellow). */
form.composer[class*="chat-color-"] .voice-bar .voice-wave{color:var(--staff-accent)}
/* The composer's Call wears the chat's colour too (the Founder, 10 October 2026, 22:30: everything in a chat takes the
   agent's colour): the colour as a glyph on the page, its ink, so Yellow or a pale colour of the person's own still shows. */
form.composer[class*="chat-color-"] > .call-open{color:var(--staff-glyph,var(--staff-ink))}
[data-theme=dark] form.composer[class*="chat-color-"] > .call-open{color:var(--staff-glyph,var(--staff-accent))}
form.composer[class*="chat-color-"] .voice-bar .voice-send,[data-theme=dark] form.composer[class*="chat-color-"] .voice-bar .voice-send{background:var(--staff-accent);border-color:var(--staff-accent);color:var(--staff-on)}
form.composer[class*="chat-color-"] .voice-bar .voice-send:hover{filter:brightness(.92)}
/* What is being written reads as it will once sent (the Founder, 10 October 2026, 06:40): the composer takes the
   bubbles' font, weight, size and line. */
form.composer textarea{font-family:-apple-system,"SF Pro Text",system-ui,Roboto,"Segoe UI",sans-serif;font-weight:400;font-size:15px;line-height:1.3}
@media (max-width:699px){form.composer textarea{font-size:16px}}

/* An agent's **bold**, *italic*, `code` and "- " list inside its bubble (chat-message.js markdownBody). */
.team-message .chat-bubble > ul.bubble-list{margin:4px 0 0;padding-left:20px}
.team-message .chat-bubble > ul.bubble-list li{margin:0;padding:0}
.team-message .chat-bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:0 3px;border-radius:4px;background:rgba(0,0,0,.08)}
/* Symbionia's own notice line in the chat (0213, the connection test): neither side's, centred and small, never a bubble. */
.team-message.chat-system{display:flex;flex-direction:column;align-items:center;gap:2px;margin:8px auto;padding:6px 12px;max-width:min(100%,420px);box-sizing:border-box;border:1px dashed var(--line);border-radius:12px;background:none;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.team-message.chat-system .chat-system-mark{font-weight:600;font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.team-message.chat-system .chat-system-words{overflow-wrap:anywhere}
/* A chat open on a phone is the screen: the page under it does not scroll, so the log is the one thing a vertical swipe
   can move and nothing chains from it to the page (the Founder, 16 October 2026, iPhone; a room does the same, group-chat.css). */
@media (max-width:699px){html:has(.chat-app .chat-thread-log),body:has(.chat-app .chat-thread-log),html:has([data-feed-thread] .chat-thread-log),body:has([data-feed-thread] .chat-thread-log){overflow:hidden;overscroll-behavior:none}}
/* A chat whose read is out and that holds nothing yet: a quiet skeleton of turns, never the empty state's words
   (the Founder, 17 October 2026; chat-message.js chatLoadingMarkup). It sits at the foot, where the newest will be. */
.chat-loading{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;margin-top:auto;padding:12px 0}
/* Only for a chat never read here, and only once its read has taken longer than 300ms (the Founder, 24 October 2026: a
   chat opens at once; terminal-live.js draws one read before, or read ahead, from what it kept). */
.chat-loading{animation:chat-loading-late 0s linear .3s both}
@keyframes chat-loading-late{from{visibility:hidden}to{visibility:visible}}
.chat-loading-turn{display:flex;align-items:flex-end;gap:8px}
.chat-loading-turn.mine{justify-content:flex-end}
.chat-loading-turn.mine .chat-loading-face{display:none}
.chat-loading-face{width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--soft,#ebe6f3)}
.chat-loading-bubble{display:block;height:38px;border-radius:18px;background:var(--soft,#ebe6f3);animation:chat-loading-breathe 1.6s ease-in-out infinite}
.chat-loading-bubble.w1{width:62%}.chat-loading-bubble.w2{width:44%}.chat-loading-bubble.w3{width:50%}.chat-loading-bubble.w4{width:70%}
@keyframes chat-loading-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.chat-loading-bubble{animation:none;opacity:.7}}
.team-message .chat-who[data-profile-press],.chat-call-turn .chat-who[data-profile-press]{cursor:pointer;-webkit-tap-highlight-color:transparent;width:fit-content}
.chat-who[data-profile-press]:focus-visible{outline:2px solid var(--focus,#6b4fd8);outline-offset:2px;border-radius:12px}
/* The shared system line: small, centred, grey, never a bubble (a busy agent's note at the top of its chat). */
.chat-system-line{margin:4px auto 10px;padding:0 12px;max-width:min(100%,420px);text-align:center;font-size:12px;line-height:16px;color:var(--muted);overflow-wrap:anywhere}
/* The person opts one send into an assigned task; the next ordinary send is chat. */
.composer .chat-request-option {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 72px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.composer .chat-request-option input { width: 16px; height: 16px; flex: 0 0 16px; }
.composer .chat-request-option:has(select) { flex-direction: column; align-items: stretch; }
.composer .chat-request-option select { width: 72px; min-width: 0; font: inherit; }

/* A link in a message as a card (link-card.js): the site, the page's title and its first words; pressing opens the link. */
.link-card{display:flex;flex-direction:column;gap:2px;max-width:min(320px,100%);box-sizing:border-box;margin:4px 0 2px;padding:8px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.1);background:#fff;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.team-message.mine .link-card{margin-left:auto}
.link-card:hover{background:#f7f8fb}
.link-card:focus-visible{outline:2px solid #1d6cf2;outline-offset:2px}
.link-card-site{font-size:12px;color:#6b7080}
.link-card-title{font-size:14px;font-weight:600;line-height:1.3}
.link-card-title:empty,.link-card-words:empty{display:none}
.link-card-words{font-size:13px;color:#4a4f5c;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-theme=dark] .link-card{background:#1d1f24;border-color:rgba(255,255,255,.12)}
[data-theme=dark] .link-card:hover{background:#25282e}
[data-theme=dark] .link-card-site{color:#9aa0ad}
[data-theme=dark] .link-card-words{color:#c3c7d0}
/* The sign-in as one action (chat-sign-in.js; the Founder, 8 November 2026): one card, one primary button. */
.team-message.chat-sign-in-card{align-items:stretch;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);color:inherit;text-align:start;font-size:15px;line-height:1.4;max-width:min(100%,380px)}
.chat-sign-in-card .chat-system-mark{color:var(--muted);text-align:start}
.chat-sign-in-lead{margin:0;font-size:15px;font-weight:600}
.chat-sign-in-go{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;width:100%;box-sizing:border-box;border-radius:12px;font-size:16px;font-weight:600;text-decoration:none}
.chat-sign-in-away{font-weight:400;opacity:.8}
.chat-sign-in-note{margin:0;font-size:13px;color:var(--muted)}
.chat-sign-in-label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.chat-sign-in-code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--soft)}
.chat-sign-in-code-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.06em;font-weight:700;user-select:all;overflow-wrap:anywhere}
.chat-sign-in-copy{flex:none;min-height:36px}
.chat-sign-in-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.chat-sign-in-step{display:flex;gap:10px;align-items:flex-start}
.chat-sign-in-step-body{flex:1;min-width:0;margin:0}
.chat-sign-in-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:11px;border-radius:50%;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.chat-sign-in-step.is-next .chat-sign-in-n{background:var(--purple);border-color:var(--purple);color:#fff}
.chat-sign-in-step.is-done .chat-sign-in-n{background:var(--soft);color:var(--muted)}
.chat-sign-in-step.is-done .chat-sign-in-go{opacity:.75}
.chat-sign-in-paste .chat-sign-in-label{margin-top:4px;font-weight:600;color:inherit;font-size:14px}
.chat-sign-in-paste-row{display:flex;gap:8px}
.chat-sign-in-field{flex:1;min-width:0;min-height:44px;font-size:16px}
.chat-sign-in-paste-row .btn{min-height:44px}
.chat-sign-in-error{margin:6px 0 0;font-size:13px;color:#c0262d}
.team-message.chat-sign-in-done{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;border-style:solid;padding:4px 12px;font-size:13px}
.chat-sign-in-done-words{display:inline-flex;align-items:center;gap:4px}
.chat-sign-in-done[data-sign-in-state="signed_in"] .icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* A key asking to be added to the agent, answered in its chat (chat-key-ask.js): above the composer, one passkey button. */
.chat-key-ask{display:flex;flex-direction:column;gap:10px;margin:8px 12px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);font-size:15px;line-height:1.4}
.chat-key-ask-title{margin:0;font-size:16px;font-weight:700}
.chat-key-ask-lead{margin:0;color:var(--muted);font-size:14px}
.chat-key-ask-label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.chat-key-ask-field{min-height:44px;font-size:18px;letter-spacing:.08em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.chat-key-ask-go{min-height:48px;width:100%;border-radius:12px;font-size:16px;font-weight:600}
.chat-key-ask-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-key-ask-note{font-size:12px;color:var(--muted)}
.chat-key-ask-error{margin:0;font-size:13px;color:#c0262d}
.chat-key-ask-said{margin:6px 12px;text-align:center;font-size:13px;color:var(--muted)}