/* ---- fluid screen ----
   The type scale (--rem, --t-*) and the chrome sizes below grow with the screen: one percent of the browser window at
   100 percent zoom (--aios-vw, set by sizing.js; docs/sizing/REPORT.md), so the visitor's zoom magnifies them and the widget
   matches the full page. On the full page at 100 percent that is exactly the stage's width, so nothing changes there. The
   edges, the column and the detail's width are arrangement and stay on the stage (cqw). */
.screen.live{--w:100%;--h:100%;width:100%;height:100%;min-height:0;overflow:hidden;--rem:clamp(14px,.55 * var(--aios-vw,1cqw) + 11.5px,17px);--edge:clamp(20px,2.2cqw,44px);--col-w:min(100cqw - 2 * var(--edge),max(min(78cqw,1200px),min(62cqw,1520px)));--t-2xs:clamp(11px,calc(.62 * var(--rem) + .15 * var(--aios-vw,1cqw)),12px);--t-xs:clamp(12px,calc(.7 * var(--rem) + .15 * var(--aios-vw,1cqw)),13px);--t-sm:clamp(13px,calc(.78 * var(--rem) + .15 * var(--aios-vw,1cqw)),14px);--t-base:clamp(15px,calc(.9 * var(--rem) + .15 * var(--aios-vw,1cqw)),16px);--t-md:clamp(16px,calc(.95 * var(--rem) + .25 * var(--aios-vw,1cqw)),18px);--t-lg:clamp(19px,calc(1.05 * var(--rem) + .5 * var(--aios-vw,1cqw)),23px);--t-xl:clamp(24px,calc(1.2 * var(--rem) + .9 * var(--aios-vw,1cqw)),30px);--t-2xl:clamp(26px,calc(1.25 * var(--rem) + 1.3 * var(--aios-vw,1cqw)),34px)}
.screen.live[data-device="tablet"]{--edge:24px;--col-w:calc(100cqw - 48px)}
.screen.live[data-device="mobile"]{--rem:16px;--edge:16px;--col-w:calc(100cqw - 32px)}
.screen.live .topbar{padding-top:env(safe-area-inset-top,0px);padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
.screen.live .dock{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.screen.live[data-device="mobile"] .dock{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
/* Short height: flexible whitespace gives first, minimum sizes hold, then the region scrolls. The application never shrinks. */
.screen.live .chat{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.screen.live .welcome{min-height:0;overflow-y:auto;justify-content:flex-start}
.screen.live .welcome > *{flex:0 0 auto}
.screen.live .welcome::before,.screen.live .welcome::after{content:"";flex:1 1 0;min-height:0}
.screen.live .gate{min-height:0;overflow:hidden;align-items:center;justify-content:center;display:flex}
.screen.live .gate.scrolls{overflow-y:auto;align-items:flex-start}
.screen.live .gate .fit-sizer{display:flex;justify-content:center;align-items:flex-start;flex:0 0 auto;width:100%;overflow:visible}
.screen.live .gate .toggle-screen{margin:0;flex:0 0 auto}
.screen.live .content-overlay,.screen.live .chrome-overlay,.screen.live .reader{overflow-y:auto}
/* Touch ergonomics regardless of width */
@media (pointer:coarse){.screen.live .chip,.screen.live .tb,.screen.live .page-num,.screen.live .page-nav-btn,.screen.live .page-step,.screen.live .sel,.screen.live .history-pill,.screen.live .settings-lang-pill{min-height:44px}.screen.live .menu-pop span{padding:12px}}
/* Wide and tall monitors grow the content column; short screens scroll the regional welcome/gate surface. Whole-screen scaling is prohibited. */
/* Welcome is laid out natively at each device class. Width changes reflow the grid; height pressure introduces regional scrolling without shrinking type or touch targets. */
.screen.live .welcome{justify-content:center;overflow:hidden}
.screen.live .welcome-sizer{display:flex;justify-content:center;align-items:flex-start;flex:0 0 auto;width:100%;overflow:visible}
.screen.live .welcome-fit{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--col-w)}
.screen.live .welcome-fit .welcome-actions{width:100%}
.screen.live .welcome.scrolls{overflow-y:auto;justify-content:flex-start}
.screen.live .trail > span:not(.trail-sep){max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Top bar and client mark scale with the canvas instead of holding the anchor size (production: --nav-height clamp(58px,5.2vw,72px), mark clamp(22px,2.1vw,32px); the reference lets both keep growing on wide monitors). */
.screen.live[data-device="desktop"] .topbar{min-height:clamp(58px,5 * var(--aios-vw,1cqw),96px)}
.screen.live[data-device="desktop"] .topbar-logo{height:clamp(24px,2.2 * var(--aios-vw,1cqw),44px);max-width:clamp(180px,17 * var(--aios-vw,1cqw),330px)}
.screen.live[data-device="desktop"]{--pill-h:clamp(30px,2.1 * var(--aios-vw,1cqw),40px);--pill-fs:clamp(11px,.8 * var(--aios-vw,1cqw),15px)}
.screen.live[data-device="desktop"] .version,.screen.live[data-device="desktop"] .trail{padding:0 clamp(11px,.8 * var(--aios-vw,1cqw),16px)}
/* The answer marker keeps pace with the thinking indicator */
.screen.live[data-device="desktop"] .marker .orb{width:clamp(30px,2.1 * var(--aios-vw,1cqw),44px);height:clamp(30px,2.1 * var(--aios-vw,1cqw),44px)}
.screen.live[data-device="desktop"] .pc{width:min(100%,max(calc(2 * var(--card-w) + 50px),clamp(778px,52cqw,960px)))}
.screen.live[data-device="desktop"] .menu{width:clamp(44px,3 * var(--aios-vw,1cqw),56px);height:clamp(44px,3 * var(--aios-vw,1cqw),56px)}
.screen.live[data-device="tablet"] .topbar{min-height:clamp(52px,7 * var(--aios-vw,1cqw),64px)}
.screen.live[data-device="tablet"] .topbar-logo{height:clamp(26px,3.6 * var(--aios-vw,1cqw),32px)}
.screen.live[data-device="mobile"] .topbar{min-height:clamp(48px,13 * var(--aios-vw,1cqw),56px)}
.screen.live[data-device="mobile"] .topbar-logo{height:clamp(24px,7 * var(--aios-vw,1cqw),30px);max-width:clamp(150px,44 * var(--aios-vw,1cqw),190px)}
/* Thinking indicator scales with the canvas on desktop */
.screen.live[data-device="desktop"] .thinking > .orb{width:clamp(30px,2.1 * var(--aios-vw,1cqw),44px);height:clamp(30px,2.1 * var(--aios-vw,1cqw),44px)}

/* ---- Final viewport rule: welcome content may never be hidden behind the dock ---- */
.screen.live .welcome{overflow-y:auto;overflow-x:hidden;justify-content:flex-start;overscroll-behavior:contain;scrollbar-width:none}
.screen.live .welcome::-webkit-scrollbar{display:none}
.screen.live .welcome-sizer{min-height:100%;align-items:center;padding:12px 0 18px}
.screen.live .welcome-fit{margin:auto 0;max-width:var(--col-w)}