/*
 * ---- Texting as Muse draws it (the Founder, 17 October 2026, four screenshots of Muse's chat, measured on a 440pt screen) ----
 * The composer is one floating pill: + at the left, the words, the microphone at the right, which is a round send arrow
 * once there is something to send; recording is one line in the same pill. Newest is a small round chevron centred just
 * above the pill. Linked last of the chat styles: every value here is a token on body.
 * The bubbles are not Muse's: names and faces over a run, and the time under each bubble, as they were before (the
 * Founder, 21 October 2026: "I only told you to change the top").
 */
body{--muse-bubble-font:17px;--muse-bubble-leading:1.25;--muse-bubble-pad-y:12px;--muse-bubble-pad-x:16px;--muse-bubble-radius:20px;--muse-agent-width:94%;--muse-person-width:85%;--muse-gap:12px;--muse-gap-run:3px;--muse-time-ink:#686870;--muse-agent-bubble:#ebebed;--muse-person-bubble:color-mix(in srgb,var(--purple,#6d28b5) 15%,#fff);--muse-pill-line:#00000024;--muse-pill-bg:color-mix(in srgb,var(--surface,#fff) 92%,transparent);--muse-tint:color-mix(in srgb,var(--purple,#6d28b5) 16%,var(--surface,#fff));--muse-tint-ink:var(--ink,#24212d)}
body[data-theme=dark]{--muse-time-ink:#9a9aa3;--muse-agent-bubble:#2b2c33;--muse-person-bubble:color-mix(in srgb,var(--purple,#6d28b5) 30%,#1e2028);--muse-pill-line:#ffffff26;--muse-tint:color-mix(in srgb,var(--purple,#6d28b5) 34%,#1e2028)}

/* ---- The composer: one floating pill ---- */
.chat-thread>form.composer:not(.pa-composer),form.composer[data-panel-form]:not(.pa-composer),.chief-dock-inner>form.composer:not(.pa-composer){position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 4px;box-sizing:border-box;min-height:46px;margin:8px 16px 12px;padding:0 6px;border:1px solid var(--muse-pill-line);border-radius:24px;background:var(--muse-pill-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 2px 12px rgba(28,18,48,.06)}
.chat-thread>form.composer:not(.pa-composer)>.attach,form.composer[data-panel-form]:not(.pa-composer)>.attach,.chief-dock-inner>form.composer:not(.pa-composer)>.attach{order:0;flex:none;align-self:flex-end;width:40px;height:44px;min-width:40px;margin:0;color:var(--ink,#24212d)}
.chat-thread>form.composer:not(.pa-composer)>.attach .icon,form.composer[data-panel-form]:not(.pa-composer)>.attach .icon,.chief-dock-inner>form.composer:not(.pa-composer)>.attach .icon{width:24px;height:24px}
.chat-thread>form.composer:not(.pa-composer)>textarea,form.composer[data-panel-form]:not(.pa-composer)>textarea,.chief-dock-inner>form.composer:not(.pa-composer)>textarea{order:1;flex:1 1 0;width:auto;min-width:0;padding:11px 4px;font-size:var(--muse-bubble-font);line-height:var(--muse-bubble-leading);color:var(--ink,#24212d)}
.chat-thread>form.composer:not(.pa-composer)>textarea::placeholder,form.composer[data-panel-form]:not(.pa-composer)>textarea::placeholder,.chief-dock-inner>form.composer:not(.pa-composer)>textarea::placeholder{color:var(--muse-time-ink)}
.chat-thread>form.composer:not(.pa-composer)>.mic,form.composer[data-panel-form]:not(.pa-composer)>.mic,.chief-dock-inner>form.composer:not(.pa-composer)>.mic{order:2;flex:none;align-self:flex-end;width:44px;height:44px;margin:0;color:var(--ink,#24212d)}
.chat-thread>form.composer:not(.pa-composer)>.mic .icon,form.composer[data-panel-form]:not(.pa-composer)>.mic .icon,.chief-dock-inner>form.composer:not(.pa-composer)>.mic .icon{width:24px;height:24px}
.chat-thread>form.composer:not(.pa-composer)>.call-open,form.composer[data-panel-form]:not(.pa-composer)>.call-open,.chief-dock-inner>form.composer:not(.pa-composer)>.call-open{display:none}
/* Send is the microphone's place once there is something to send: a round arrow in the accent's tint. */
.chat-thread>form.composer:not(.pa-composer)>button[type=submit],form.composer[data-panel-form]:not(.pa-composer)>button[type=submit],.chief-dock-inner>form.composer:not(.pa-composer)>button[type=submit]{order:3;display:none;flex:none;align-self:flex-end;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;margin:4px 2px;padding:0;border:0;border-radius:50%;background:var(--muse-tint);color:var(--muse-tint-ink)}
.chat-thread>form.composer:not(.pa-composer)>button[type=submit] .icon,form.composer[data-panel-form]:not(.pa-composer)>button[type=submit] .icon,.chief-dock-inner>form.composer:not(.pa-composer)>button[type=submit] .icon{width:20px;height:20px;stroke-width:2.2}
.chat-thread>form.composer:not(.pa-composer):is(:has(textarea:not(:placeholder-shown)),.voice-attached,.has-attachment)>button[type=submit],form.composer[data-panel-form]:not(.pa-composer):is(:has(textarea:not(:placeholder-shown)),.voice-attached,.has-attachment)>button[type=submit],.chief-dock-inner>form.composer:not(.pa-composer):is(:has(textarea:not(:placeholder-shown)),.voice-attached,.has-attachment)>button[type=submit]{display:grid}
/* The microphone stays beside Send while the box has words: a recording adds to them (the Founder, 9 October 2026; he dictates in several goes). */
.chat-thread>form.composer:not(.pa-composer)>button[type=submit]:focus,form.composer[data-panel-form]:not(.pa-composer)>button[type=submit]:focus,.chief-dock-inner>form.composer:not(.pa-composer)>button[type=submit]:focus{outline:none}
.chat-thread>form.composer:not(.pa-composer) :is(button,textarea):focus:not(:focus-visible){outline:none}
/* A chat in its own colour keeps it on Send, as before (chat-message.css). */
.chat-thread>form.composer[class*="chat-color-"]:not(.pa-composer)>button[type=submit],form.composer[data-panel-form][class*="chat-color-"]:not(.pa-composer)>button[type=submit],.chief-dock-inner>form.composer[class*="chat-color-"]:not(.pa-composer)>button[type=submit]{background:var(--staff-accent);color:var(--staff-on)}
/* A chosen file or a recording kept sits above the line, inside the pill. */
.chat-thread>form.composer:not(.pa-composer)>:is(.attach-compose,.voice-note-compose),form.composer[data-panel-form]:not(.pa-composer)>:is(.attach-compose,.voice-note-compose),.chief-dock-inner>form.composer:not(.pa-composer)>:is(.attach-compose,.voice-note-compose){order:-2;flex:1 0 100%}

/* ---- Recording: one line, the same pill ---- */
form.composer.voice-live:not(.pa-composer)>:is(.attach,textarea,.mic,button[type=submit],.call-open){display:none!important}
form.composer.voice-live:not(.pa-composer)>.voice-note-compose{order:0;flex:1 1 100%;min-width:0;margin:0;padding:0}
form.composer.voice-live .voice-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-height:44px;width:100%}
form.composer.voice-live .voice-bar>.voice-cancel{order:0;flex:none;width:40px;height:44px;min-width:40px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,#24212d)}
form.composer.voice-live .voice-bar>.voice-cancel .icon{width:24px;height:24px}
form.composer.voice-live .voice-bar>.voice-clock{order:1;flex:none;min-width:2.5em;margin-inline:2px 4px;text-align:start;font-size:var(--muse-bubble-font);line-height:1;color:var(--muse-time-ink)}
form.composer.voice-live .voice-bar>.voice-wave{order:2;flex:1 1 auto;min-width:40px;height:30px;color:var(--ink,#24212d)}
form.composer.voice-live .voice-bar>.voice-stop{order:3;flex:none;display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink,#24212d) 9%,var(--surface,#fff));color:var(--ink,#24212d)}
form.composer.voice-live .voice-bar>.voice-stop .icon{width:20px;height:20px}
form.composer.voice-live .voice-bar>.voice-send{order:4;flex:none;width:36px;height:36px;min-width:36px;min-height:36px;margin-inline-end:2px;border:0;border-radius:50%;background:var(--muse-tint);color:var(--muse-tint-ink)}
form.composer.voice-live .voice-bar>.voice-away{order:5;flex:0 1 auto}
form.composer.voice-live .voice-bar .icon-button:focus,form.composer.voice-live .voice-bar .voice-send:focus{outline:none}
form.composer.voice-live[class*="chat-color-"] .voice-bar>.voice-send{background:var(--staff-accent);color:var(--staff-on)}
form.composer.voice-live[class*="chat-color-"] .voice-bar>.voice-wave{color:var(--staff-accent)}

/* ---- Newest: a small round chevron, centred just above the pill ---- */
.chat-newest{align-self:center;width:34px;height:34px;min-height:34px;margin:-50px auto 16px;border:0;background:var(--muse-tint);color:var(--muse-tint-ink);box-shadow:0 2px 8px rgba(28,18,48,.14);opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s linear 0s}
.chat-newest.chat-newest-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.chat-newest .icon{width:18px;height:18px;stroke-width:2.4}
.chat-newest:focus{outline:none}
.chat-newest:focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px}
[data-theme=dark] .chat-newest{background:var(--muse-tint);color:#eee;border:0}
@media (prefers-reduced-motion:reduce){.chat-newest,.chat-newest.chat-newest-away{transition:none}}
body.reduced-motion .chat-newest,body.reduced-motion .chat-newest.chat-newest-away{transition:none}

/* ---- A room's "Task for" on its own small line at the top of the pill (22 October 2026, the night's walk: the Founder,
   "the messaging… smooth"). Beside the words it took 72px of a 358px pill, so a short note stopped from the microphone
   wrapped the moment Send appeared and the composer jumped 18px; on its own line the words keep the row, and the pill is
   one height typing, recording and stopped. The select stays 16px, so a phone does not zoom on it. ---- */
.chat-thread>form.composer:not(.pa-composer)>.chat-request-option,form.composer[data-panel-form]:not(.pa-composer)>.chat-request-option,.chief-dock-inner>form.composer:not(.pa-composer)>.chat-request-option{order:-1;flex:1 0 100%;flex-direction:row;align-items:center;gap:6px;min-width:0;padding:6px 8px 0 12px;font-size:12px;line-height:20px;color:var(--muted,#686577)}
.chat-thread>form.composer:not(.pa-composer)>.chat-request-option select,form.composer[data-panel-form]:not(.pa-composer)>.chat-request-option select,.chief-dock-inner>form.composer:not(.pa-composer)>.chat-request-option select{width:auto;max-width:100%;min-width:0;padding:0 2px;border:0;background:none;font-size:16px;line-height:20px;font-weight:600;color:var(--ink,#24212d);cursor:pointer}

/* ---- Something attached, or words past one line (composer-rows.js, `data-tall` on the box): rows, as Claude's composer (the Founder, 24 October 2026, the Claude app
   beside ours) ---- The thumbnails, each with its ×, on top inside the pill; the words under them the pill's full width;
   then + at the left and the microphone and Send at the right. With nothing attached and one line, the single pill above.
   Recording keeps the thumbnails over the bar, and the pill grows to hold both: it is never clipped (voice-notes.js holds
   only a floor under it, never a height). Home's composer is not this (its own card). */
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer):is(.has-attachment,:has(>textarea[data-tall])){align-items:flex-end;padding:6px 6px 2px;border-radius:22px}
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer):is(.has-attachment,:has(>textarea[data-tall]))>textarea{order:-1;flex:1 0 100%;width:100%;padding:8px 8px 4px}
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer):is(.has-attachment,:has(>textarea[data-tall]))>.mic{margin-inline-start:auto}
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer).has-attachment>.attach-compose{padding:0 2px}
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer).has-attachment .attach-list{padding:4px 0 2px;overflow-y:visible}
:is(.chat-thread>form.composer,form.composer[data-panel-form],.chief-dock-inner>form.composer):not(.pa-composer).has-attachment.voice-live{align-content:space-between}
