/* Composer — owner ruling 23 Sep 2026: a soft-corner rectangle in every state (single line, expanded, voice) on every device.
   Uses the card radius token so the composer matches the cards and tenant radius settings. The round send/mic controls are unchanged.
   Keyed on #inputBar so no device, height or state rule in the older sheets can put the pill back.
   master.css squares the composer's top corners whenever it follows the voice stage, even while that stage is hidden; that only
   applies now when the voice bar is actually showing, and the voice bar's own top corners use the same radius. */
#inputBar.composer{border-radius:var(--r-card,12px)}
.screen .voice-bar{border-radius:var(--r-card,12px) var(--r-card,12px) 0 0}

/* The fitted particle ink fills the control, independent of the ordinary icon size. */
#inputBar .send.conversation-orb .orb,
#inputBar .send.conversation-orb .orb svg{width:100%;height:100%}
/* A speech failure is readable content in the field row, never an overlay on a draft or controls. */
#inputBar.has-voice-status .composer-row{flex-direction:column}
#voiceStatus{font:inherit;font-size:var(--composer-font);line-height:1.5;color:var(--muted);white-space:normal;overflow-wrap:anywhere;padding:0 0 8px}

/* Voice notices float as a 3-second pill above the composer (owner ruling 24 Sep 2026): tenant primary colour, white text, centred.
   Absolutely positioned, so the composer and the welcome above it never change size. */
#composer.composer-wrap{position:relative}
#composer .voice-toast{position:absolute;left:0;right:0;margin-inline:auto;width:fit-content;bottom:calc(100% + 10px);z-index:20;max-width:min(760px,calc(100% - 2 * var(--edge,16px)));padding:9px 18px;border-radius:999px;background:var(--accent);color:#fff;font-size:max(13px,calc(14 * var(--st,1px)));font-weight:600;line-height:1.4;text-align:center;text-wrap:balance;box-shadow:0 8px 24px -8px color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
#composer .voice-toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#composer .voice-toast{transition:none}}
/* The voice pill (owner, 17 Oct 2026, board F of the voice controls lab): in a conversation the answer bar becomes a centred pill
   holding the orb, one status line and the X, in that order. The orb interrupts and never ends; the X ends (16 Oct 2026, replacing
   the 29 Sep mute button). The page and the answers stay as they are.
   - The pill keeps the bar's own height (Ryan, 17 Oct 2026: the outline never comes closer to the line above the dock), so the
     dock, that line and everything above it stay exactly where they are. It keeps the bar's own corners too (Ryan, 17 Oct
     2026, round 3 of the voice controls lab: no change from soft square to round), so only the width changes, and its outline
     turns the state colour.
   - The orb fills the pill (Ryan, 17 Oct 2026: the orb and its white casing keep one size relationship everywhere, the widget's
     bar and collapsed orb included): it spans .80 of the inside height, centred in the round end, and the status line starts
     the same distance from it as the casing is (Ryan, 17 Oct 2026: the same margin all around the orb). The X keeps the 8px
     clear the 23 Sep ruling asks for.
   - It is at least 420 wide (300 on a phone) and wide enough for its longest line in any state (--voice-line-w, app.js), at most
     the bar's own width; a line that still does not fit wraps, never cut. app.js runs the change of shape and fades the
     contents in.
   - The outline is the state colour, the app's own voice colours: green while the visitor speaks, blue while the persona thinks
     or speaks, with a faint ring of the same colour (Ryan, 17 Oct 2026: "I do like how the outline turns the colour of the
     listening state"). The orb is the live orb, unchanged. */
#aiosShell #inputBar{width:100%}
#aiosShell #inputBar.voice-pill{
  --pill-h:calc(var(--one-line) + 2 * var(--row-pad) + 2px);
  --pill-orb:calc((var(--pill-h) - 2px) * .80);
  --pill-x:max(34px,calc(var(--btn) * var(--st)));
  --pill-gap:calc(12 * var(--st));
  --pill-in:calc((var(--pill-h) - 2px - var(--pill-orb)) / 2);
  --pill-pl:var(--pill-in);
  --pill-pr:calc((var(--pill-h) - var(--pill-x)) / 2 - 1px);
  --pill-min:calc(420 * var(--st));
  flex-direction:row;align-items:center;gap:var(--pill-gap);box-sizing:border-box;
  width:min(100%,max(var(--pill-min),calc(2px + 2 * var(--pill-in) + var(--pill-orb) + var(--pill-gap) + var(--pill-x) + var(--pill-pr) + var(--voice-line-w,0px))));
  height:var(--pill-h);margin:0 auto;padding:0 var(--pill-pr) 0 var(--pill-pl);
  --vp:var(--voice-listen,#16a34a);border-color:color-mix(in srgb,var(--vp) 65%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vp) 12%,transparent),0 2px 10px rgba(15,23,42,.06);transition:border-color .45s ease,box-shadow .45s ease}
#aiosShell #inputBar.voice-pill:is([data-voice-state=thinking],[data-voice-state=finishing],[data-voice-state=speaking]){--vp:var(--voice-speak,#2e90fa)}
@media (prefers-reduced-motion:reduce){#aiosShell #inputBar.voice-pill{transition:none}}
#aiosShell[data-os-layout=phone] #inputBar.voice-pill{--pill-min:calc(300 * var(--st))}
@media (hover:none) and (pointer:coarse){#aiosShell #inputBar.voice-pill{--pill-x:max(36px,calc(var(--btn) * var(--st)))}}
#aiosShell #inputBar.voice-pill :is(.composer-row,.composer-rail){display:contents}
#aiosShell #inputBar.voice-pill :is(.composer-field,.counter,.mic-affordance,#voiceStatus,#voicePartial){display:none}
#aiosShell #inputBar.voice-pill .composer-version{display:none!important}
#aiosShell #inputBar.voice-pill .send.conversation-orb{order:1;flex:none;width:var(--pill-orb);height:var(--pill-orb);min-width:0;min-height:0;margin-right:calc(var(--pill-in) - var(--pill-gap))}
#aiosShell #inputBar .voice-line:not([hidden]){order:2;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;text-align:left}
#aiosShell #inputBar .voice-line-main{font-size:max(13px,calc(14.5 * var(--st)));font-weight:600;line-height:1.25;color:var(--ink)}
#aiosShell #inputBar .voice-line-hint{font-size:max(12px,calc(12.5 * var(--st)));line-height:1.3;color:var(--muted)}
#aiosShell #inputBar .voice-line>span{text-wrap:balance;overflow-wrap:anywhere}
#aiosShell #inputBar #conversationEnd{order:3;flex:none;width:var(--pill-x);height:var(--pill-x);background:transparent;border:0;box-shadow:none;color:var(--muted)}
#aiosShell #inputBar #conversationEnd:hover{background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--ink)}
#conversationEnd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The change of shape (app.js setVoicePill): an outline behind the bar, in the bar's own border and fill, made of a middle that
   stretches and two ends that slide (transforms only, so it stays smooth while the page is busy); the ends keep the bar's
   corners. The bar itself is see-through until it ends. */
#composer .voice-morph{position:absolute;pointer-events:none;box-sizing:border-box}
#composer .voice-morph>i{position:absolute;top:0;bottom:0;display:block;box-sizing:border-box}
#composer .voice-morph .vm-mid{left:var(--vm-cap);right:var(--vm-cap);border-top:var(--vm-edge);border-bottom:var(--vm-edge);background:var(--vm-fill)}
#composer .voice-morph .vm-cap{width:calc(var(--vm-cap) + 1px)}
#composer .voice-morph .vm-l{left:0}
#composer .voice-morph .vm-r{right:0}
#composer .voice-morph .vm-cap>b{position:absolute;inset:0;box-sizing:border-box;border:var(--vm-edge);background:var(--vm-fill)}
#composer .voice-morph .vm-l>b{border-right:0}
#composer .voice-morph .vm-r>b{border-left:0}
#aiosShell #inputBar.voice-morphing{position:relative;border-color:transparent;background:transparent;box-shadow:none}