/* ---- fluid screen ---- */
.screen.live{--w:100%;--h:100%;width:100%;height:100%;min-height:0;overflow:hidden;--rem:clamp(14px,.55cqw + 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) + .15cqw),12px);--t-xs:clamp(12px,calc(.7 * var(--rem) + .15cqw),13px);--t-sm:clamp(13px,calc(.78 * var(--rem) + .15cqw),14px);--t-base:clamp(15px,calc(.9 * var(--rem) + .15cqw),16px);--t-md:clamp(16px,calc(.95 * var(--rem) + .25cqw),18px);--t-lg:clamp(19px,calc(1.05 * var(--rem) + .5cqw),23px);--t-xl:clamp(24px,calc(1.2 * var(--rem) + .9cqw),30px);--t-2xl:clamp(26px,calc(1.25 * var(--rem) + 1.3cqw),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 .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,5cqw,96px)}
.screen.live[data-device="desktop"] .topbar-logo{height:clamp(24px,2.2cqw,44px);max-width:clamp(180px,17cqw,330px)}
.screen.live[data-device="desktop"]{--pill-h:clamp(30px,2.1cqw,40px);--pill-fs:clamp(11px,.8cqw,15px)}
.screen.live[data-device="desktop"] .version,.screen.live[data-device="desktop"] .trail{padding:0 clamp(11px,.8cqw,16px)}
/* The answer marker keeps pace with the thinking indicator */
.screen.live[data-device="desktop"] .marker .orb{width:clamp(30px,2.1cqw,44px);height:clamp(30px,2.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,3cqw,56px);height:clamp(44px,3cqw,56px)}
.screen.live[data-device="tablet"] .topbar{min-height:clamp(52px,7cqw,64px)}
.screen.live[data-device="tablet"] .topbar-logo{height:clamp(26px,3.6cqw,32px)}
.screen.live[data-device="mobile"] .topbar{min-height:clamp(48px,13cqw,56px)}
.screen.live[data-device="mobile"] .topbar-logo{height:clamp(24px,7cqw,30px);max-width:clamp(150px,44cqw,190px)}
/* Thinking indicator scales with the canvas on desktop */
.screen.live[data-device="desktop"] .thinking > .orb{width:clamp(30px,2.1cqw,44px);height:clamp(30px,2.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)}