/* Class boundary (owner ruling 23 Sep 2026): portrait screens 520px and wider (Surface Duo, foldables open) use the tablet chrome.
   Shell chrome: top bar and dock (composer + attribution) sized per screen class with one unit, --st, so the chrome keeps its
   proportion to the screen from 320px phones to 4K monitors. Phones keep the composer text at 16px or more (iOS zooms into
   smaller inputs) and 44px touch targets.

   Sizes follow the screen; arrangement follows the space AiOS is given (docs/sizing/REPORT.md). The screen's class and its scale
   number come from sizing.js, which measures the browser window at 100 percent zoom (data-aios-screen, data-aios-tight and
   --aios-k on the root): the visitor's zoom magnifies these sizes instead of being cancelled, and the widget gets the full page's
   sizes for the same screen. What depends on the room AiOS has (the content column's width, a short panel's layout) stays a
   container query on #stage. */
#aiosShell{
  --st:calc(var(--aios-k,1) * 1px);
  --tb-h:72;--tb-logo:32;--tb-logo-w:240;--pill-hh:30;--pill-f:11;--menu:44;--menu-i:26;
  /* The answer bar and attribution line (Ryan, 16 Oct 2026: "I want the input bar to be this proportionally sized on every screen"):
     one slim row with 15px type and 34px buttons, times the screen's scale, on every screen. */
  --dk-pt:8;--dk-pb:9;--cmp-h:48;--cmp-f:15;--cmp-px:16;--btn:34;--btn-i:16;--mic-f:12;--attr-f:10.5;--attr-mt:5;
  /* The content column (welcome, composer, conversation) scales with the screen instead of stopping at 1520px, so 2K/4K monitors
     keep desktop proportions rather than a narrow strip in the middle. */
  --composer-font:max(14px,calc(var(--cmp-f) * var(--st)));
  --col-w:min(calc(100cqw - 2 * var(--edge)),calc(1040 * var(--st)));
}
/* Sizes, by the screen's class (sizing.js, from the browser window at 100 percent zoom). */
:root[data-aios-screen=tablet] #aiosShell{--tb-h:64;--tb-logo:34;--tb-logo-w:220}
:root[data-aios-screen=phone] #aiosShell{--tb-h:54;--tb-logo:28;--tb-logo-w:176;--menu:44;--menu-i:24;--dk-pt:8;--dk-pb:8;--cmp-h:40;--cmp-px:14;--btn:36;--btn-i:16;--attr-f:9.5;--attr-mt:5}
:root[data-aios-screen=short] #aiosShell{--tb-h:46;--tb-logo:24;--tb-logo-w:170;--pill-hh:26;--pill-f:10.5;--menu:40;--menu-i:22;--dk-pt:6;--dk-pb:8}
/* Arrangement, by the space AiOS is given. */
@container (orientation:portrait){
  #aiosShell{--col-w:calc(100cqw - 2 * var(--edge))}
}
@container (orientation:landscape) and (max-height:559px){
  #aiosShell{--col-w:min(calc(100cqw - 2 * var(--edge)),calc(800 * var(--st)))}
  #aiosShell .mic-copy{display:none}
}
/* Top bar */
#aiosShell .topbar{min-height:calc(var(--tb-h) * var(--st));padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
#aiosShell .topbar-logo{height:calc(var(--tb-logo) * var(--st));max-width:calc(var(--tb-logo-w) * var(--st))}
#aiosShell .version,#aiosShell .trail{height:calc(var(--pill-hh) * var(--st));padding:0 calc(11 * var(--st));font-size:calc(var(--pill-f) * var(--st))}
#aiosShell .trail svg{width:calc(13 * var(--st));height:calc(13 * var(--st))}
#aiosShell .menu{width:max(40px,calc(var(--menu) * var(--st)));height:max(40px,calc(var(--menu) * var(--st)))}
#aiosShell .menu svg{width:calc(var(--menu-i) * var(--st))!important;height:calc(var(--menu-i) * var(--st))!important}
/* Dock: the answer bar and attribution line take the room's measure (--dk-st, scale.js measureStage; Ryan, 16 Oct 2026): their
   1440 size up to a room of 1,440, in proportion above, so on the full page and in the widget's panel alike they stay in
   proportion with the opening above them. Phones and rooms on their side keep the screen's own unit. */
#aiosShell .dock{--st:var(--dk-st,calc(var(--aios-k,1) * 1px));--composer-font:max(14px,calc(var(--cmp-f) * var(--st)))}
:root[data-aios-screen=phone] #aiosShell .dock{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}
@media (hover:none) and (pointer:coarse){#aiosShell .dock{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}}
/* Dock */
#aiosShell .dock{padding-top:calc(var(--dk-pt) * var(--st));padding-bottom:calc(var(--dk-pb) * var(--st) + env(safe-area-inset-bottom,0px))}
#aiosShell .composer-wrap,#aiosShell .voice-stage{padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
#inputBar .composer-row{padding:calc(4 * var(--st)) calc(var(--cmp-px) * var(--st)) 0}
/* One row on every screen (Ryan, 16 Oct 2026: "I don't want two lines anymore"): a long question wraps inside the field and the bar
   grows taller, the buttons staying on the right, at the bottom. --one-line is the field's height for one line of text; the
   buttons sit centred on that line, so a one-line question and the placeholder line up with them. */
#inputBar{--one-line:max(calc(var(--cmp-h) * var(--st)),max(32px,calc(var(--btn) * var(--st))) + 14px);--row-pad:max(1px,calc(1 * var(--st)))}
#inputBar.single .composer-row{padding:var(--row-pad) 0 var(--row-pad) calc(var(--cmp-px) * var(--st))}
#inputBar.single{padding-right:calc(8 * var(--st))}
#inputBar .composer-field,#inputBar textarea.composer-field{min-height:calc(var(--cmp-h) * var(--st));padding:calc(12 * var(--st)) 0 calc(8 * var(--st));font-size:var(--composer-font)}
#inputBar.single .composer-field,#inputBar.single textarea.composer-field{padding:calc((var(--one-line) - 1.5em) / 2) 0}
#inputBar textarea.composer-field::placeholder{font-size:inherit;letter-spacing:0}
/* A placeholder that does not fit steps down in size to a 12px floor (owner, 28 Sep 2026); app.js sets the size. */
#inputBar textarea.composer-field.placeholder-fit::placeholder{font-size:var(--placeholder-fit-size);line-height:var(--placeholder-fit-line,normal)}
#inputBar.single textarea.composer-field{white-space:pre-wrap;overflow-x:hidden}
#inputBar .composer-rail{padding:0 calc(6 * var(--st)) calc(6 * var(--st)) calc(var(--cmp-px) * var(--st));gap:calc(6 * var(--st))}
#inputBar.single .composer-rail{padding:0}
#inputBar .mic,#inputBar .send,#inputBar .ctl{width:max(32px,calc(var(--btn) * var(--st)));height:max(32px,calc(var(--btn) * var(--st)))}
#inputBar .mic svg,#inputBar .send svg{width:calc(var(--btn-i) * var(--st));height:calc(var(--btn-i) * var(--st))}
#inputBar .mic-copy{font-size:calc(var(--mic-f) * var(--st))}
#dockAttribution{margin-top:calc(var(--attr-mt) * var(--st));font-size:calc(var(--attr-f) * var(--st))}
:root[data-aios-screen=phone] #aiosShell{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}
/* Any touch screen, not only an upright phone: iOS zooms the whole page into a field typed in at under 16px and leaves it zoomed
   (go-live sweep, 15 Oct 2026: 12 to 14.9px on phones on their side, iPads and iPad minis). */
@media (hover:none) and (pointer:coarse){#aiosShell{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}}
:root[data-aios-screen=phone] #inputBar .mic,:root[data-aios-screen=phone] #inputBar .send,:root[data-aios-screen=phone] #inputBar .ctl{width:max(36px,calc(var(--btn) * var(--st)));height:max(36px,calc(var(--btn) * var(--st)))}
/* Touch screens keep 36px buttons, whatever the screen's scale. */
@media (hover:none) and (pointer:coarse){#inputBar .mic,#inputBar .send,#inputBar .ctl{min-width:36px;min-height:36px}#inputBar{--one-line:max(calc(var(--cmp-h) * var(--st)),max(36px,calc(var(--btn) * var(--st))) + 14px)}}

/* Short screens give chrome height back to the welcome first: short phones portrait (≤700px tall) and very short landscape (≤360px tall). */
:root[data-aios-tight~=phone-short] #aiosShell{--tb-h:46;--tb-logo:24;--dk-pt:6;--dk-pb:6;--cmp-h:44;--attr-mt:4}
:root[data-aios-tight~=very-short] #aiosShell{--tb-h:40;--tb-logo:22;--pill-hh:24;--menu:36;--dk-pt:4;--dk-pb:5;--cmp-h:38;--btn:34;--btn-i:16;--attr-mt:3}

/* Composer controls always sit inside the border with at least 8px clear on every side (owner ruling 23 Sep 2026).
   The single-line field is never shorter than the control plus that inset. */
#inputBar.single{padding:0 max(8px,calc(8 * var(--st))) 0 0}
#inputBar.single .composer-rail{align-self:flex-end;align-items:center;padding:0;min-height:calc(var(--one-line) + 2 * var(--row-pad))}
#inputBar.single .composer-field,#inputBar.single textarea.composer-field{min-height:var(--one-line)}
#inputBar.expanded .composer-rail,#inputBar:not(.single) .composer-rail{padding:0 max(8px,calc(8 * var(--st))) max(8px,calc(8 * var(--st))) calc(var(--cmp-px) * var(--st))}

/* Short landscape (phones on their side): the expanded composer keeps its controls on the field's row, so its two-line stretch costs
   one line of height instead of a whole extra rail and the prompts above stay visible. */
@container (orientation:landscape) and (max-height:559px){
  #inputBar.expanded{flex-direction:row;align-items:flex-end;padding-right:max(8px,calc(8 * var(--st)))}
  #inputBar.expanded .composer-row{flex:1 1 auto;min-width:0;padding:calc(4 * var(--st)) 0 calc(4 * var(--st)) calc(var(--cmp-px) * var(--st))}
  #inputBar.expanded textarea.composer-field{min-height:calc(3em + 12px);padding:6px 0}
  #inputBar.expanded .composer-rail{flex:0 0 auto;padding:0 0 max(6px,calc(6 * var(--st))) 0}
}

/* iPhone SE 1st gen: a slimmer top bar gives the welcome the height its descriptions need. */
:root[data-aios-tight~=se] #aiosShell{--tb-h:42;--tb-logo:22;--dk-pt:5;--dk-pb:5;--attr-mt:3}

/* A long current record title stays fully available in a bounded horizontal trail. */
#aiosShell .trail{max-width:100%;min-width:0;overflow-x:auto;flex-shrink:1}
#aiosShell .aios-trail-step,#aiosShell .trail > span:not(.trail-sep){max-width:none;flex-shrink:0;overflow:visible;text-overflow:clip}