/* 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 device class with one fluid unit, --st, so the chrome keeps its
   proportion to the screen from 320px phones to 4K monitors. Same classes and references as gate.css and welcome.css.
   Phones keep the composer text at 16px or more (iOS zooms into smaller inputs) and 44px touch targets. */
#aiosShell{
  --st:clamp(.7px,max(min(.06944cqw,.11111cqh),min(1px,.078125cqw,.125cqh)),2.4px);
  --tb-h:72;--tb-logo:32;--tb-logo-w:240;--pill-hh:30;--pill-f:11;--menu:44;--menu-i:26;
  --dk-pt:10;--dk-pb:14;--cmp-h:48;--cmp-f:16;--cmp-px:18;--btn:44;--btn-i:20;--mic-f:12.5;--attr-f:12;--attr-mt:8;
  /* 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:calc(var(--cmp-f) * var(--st));
  --col-w:min(calc(100cqw - 2 * var(--edge)),calc(1040 * var(--st)));
}
@container (orientation:portrait) and (min-width:520px){
  #aiosShell{--col-w:calc(100cqw - 2 * var(--edge));--st:clamp(.92px,min(.1199cqw,.08375cqh),1.6px);--tb-h:64;--tb-logo:34;--tb-logo-w:220;--dk-pt:10;--dk-pb:12}
}
@container (orientation:portrait) and (max-width:519px){
  #aiosShell{--col-w:calc(100cqw - 2 * var(--edge));--st:clamp(.85px,.2564cqw,1.13px);--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}
}
@container (orientation:landscape) and (max-height:559px){
  #aiosShell{--col-w:min(calc(100cqw - 2 * var(--edge)),calc(800 * var(--st)));--st:clamp(.8px,min(.1174cqw,.2545cqh),1.3px);--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;--cmp-h:42;--cmp-f:15;--cmp-px:16;--btn:38;--btn-i:18;--attr-f:11;--attr-mt:5}
  #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 */
#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}
#inputBar.single .composer-row{padding:calc(3 * var(--st)) 0 calc(3 * var(--st)) 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(--cmp-h) * var(--st) - 1.5em) / 2) 0}
#inputBar textarea.composer-field::placeholder{font-size:inherit;letter-spacing:0}
#inputBar.single textarea.composer-field{white-space:nowrap;overflow: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:calc(var(--btn) * var(--st));height: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))}
@container (orientation:portrait) and (max-width:519px){
  #aiosShell{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}
  #inputBar .mic,#inputBar .send,#inputBar .ctl{width:max(36px,calc(var(--btn) * var(--st)));height:max(36px,calc(var(--btn) * var(--st)))}
  #inputBar.single .composer-row{padding-top:0;padding-bottom:0}
}

/* Short screens give chrome height back to the welcome first: short phones portrait (≤700px tall) and very short landscape (≤360px tall). */
@container (orientation:portrait) and (max-width:519px) and (max-height:700px){
  #aiosShell{--tb-h:46;--tb-logo:24;--dk-pt:6;--dk-pb:6;--cmp-h:44;--attr-mt:4}
}
@container (orientation:landscape) and (max-height:360px){
  #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:center;padding:max(6px,calc(6 * var(--st))) 0}
#inputBar.single .composer-field,#inputBar.single textarea.composer-field{min-height:max(calc(var(--cmp-h) * var(--st)),calc(var(--btn) * var(--st) + 14px))}
#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. */
@container (orientation:portrait) and (max-width:340px) and (max-height:600px){ #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}