/* Layout v3: bounded viewport; independent scroll roots; accessible splitters. */
[hidden]{display:none!important}
body.studio-open{height:100vh;height:100dvh;overflow:hidden}
body.studio-open #app{height:100%;min-height:0;min-width:0}
.shell{height:var(--studio-height,100dvh);min-height:0;grid-template-columns:var(--sidebar-width,232px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);position:relative;overflow:hidden}
.sidebar{position:relative;inset:auto;width:auto;height:100%;min-width:0;min-height:0;grid-column:1;grid-row:1;padding:20px 14px 14px;overflow:hidden;container-type:inline-size}
.sidebar>*{min-width:0;max-width:100%;flex-shrink:0}
.sidebar .brand{gap:8px;padding-inline:4px;white-space:nowrap}
.brand-mark,.avatar,.release-icon{flex-shrink:0}
.sidebar .brand strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-nav{grid-template-columns:minmax(0,1fr)}
.project-list{display:flex;flex-direction:column;flex:1 1 0;min-height:40px;max-height:none;overflow:auto;overscroll-behavior:contain;align-content:start;scrollbar-gutter:stable}
.project-item{flex:0 0 40px;min-width:0}
.project-name{flex:1;min-width:0}
.side-bottom{grid-template-columns:minmax(0,1fr);flex:none;margin-top:14px;width:100%}
.connection-status{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px;font-size:11px;overflow-wrap:anywhere}
.connection-status strong{font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg)}
.profile{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:8px;padding-inline:0;min-width:0}
.profile .icon-button{min-width:30px;width:30px;padding:0}
.profile-copy strong{font-size:11px}
.profile-copy span{font-size:10px}
@container(max-width:220px){.private{display:none}.side-new span{display:none}}
.main{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;grid-column:2;grid-row:1;container-type:inline-size}
.topbar{height:62px;min-height:62px;flex:0 0 62px;position:relative;padding-inline:20px;z-index:30}
.top-actions{flex-shrink:0;gap:8px}
.crumb{flex:1;overflow:hidden}
.crumb .text-button,.crumb .sep,.crumb .mobile-menu{flex-shrink:0}
.home{width:100%;max-width:1280px;min-width:0;min-height:0;flex:1;overflow:auto;margin:0 auto;padding:40px 36px;overscroll-behavior:contain;scrollbar-gutter:stable}
.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:36px}
.home-actions{flex-wrap:wrap}
.home-copy,.card-body,.card-title{min-width:0}
.card-title strong{overflow-wrap:anywhere}
.card-foot{gap:8px;flex-wrap:wrap}
.project-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.section-head{flex-wrap:wrap}
@container(max-width:880px){.home-hero{grid-template-columns:1fr}.hero-visual{height:220px}.home-copy h1{font-size:40px}}
.workspace{position:relative;flex:1 1 0;height:auto;min-height:0;min-width:0;display:grid;grid-template-columns:var(--chat-width,440px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.chat,.workarea{min-height:0;min-width:0;height:100%;overflow:hidden}
.chat{grid-column:1;grid-row:1;display:flex}
.chat-head{flex:0 0 50px;height:50px;min-width:0;padding-inline:18px}
.chat-head strong{font-size:12px}
.chat-log{flex:1 1 0;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px 20px;gap:24px;overflow-anchor:none}
.chat-log>*{flex:0 0 auto;min-width:0;max-width:100%}
.chat-message{font-size:13px;line-height:1.75}
.chat-message.user{margin-left:20px}
.chat-message .author{font-size:10px;line-height:1.5}
.plan-card p,.event>div{overflow-wrap:anywhere}
.plan-actions{flex-wrap:wrap}
.composer-wrap{flex:none;min-width:0;padding:10px 16px 12px;background:var(--bg);border-top:1px solid var(--line)}
.composer textarea{display:block;min-height:54px;height:66px;max-height:160px;overflow:auto;line-height:1.55;overscroll-behavior:contain}
.composer-foot{gap:8px}
.composer-left{min-width:0;flex-wrap:wrap}
.composer-note{font-size:10px;line-height:1.5;padding-top:7px}
.send{flex-shrink:0}
.latest-row{display:flex;justify-content:center;position:relative}
.jump-latest{font-size:11px;border:1px solid var(--line2);border-radius:20px;padding:6px 14px;background:var(--panel3);color:var(--fg);margin:-3px auto 9px;min-height:30px}
.workarea{grid-column:2;grid-row:1;display:flex;container-type:inline-size}
.tabs{height:50px;flex:0 0 50px;min-height:50px;gap:22px;padding-inline:20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.tab{flex:none;min-height:50px;font-size:11px}
.pane{flex:1 1 0;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.overview,.panel,.publication,.history{min-width:0;padding:24px}
.overview-title,.panel-head>div,.overview-head>div{min-width:0}
.overview-title h2,.overview-title p,.release-hero h2,.release-row small{overflow-wrap:anywhere}
.preview{grid-template-columns:minmax(0,1fr) minmax(0,200px);padding:28px;gap:20px;min-width:0}
.preview-phone{max-width:100%}
.preview-notes{min-width:0}
.release-row{flex-wrap:wrap}
.release-row>div:first-child{min-width:0;flex:1 1 170px}
.release-row>div:first-child>div{min-width:0}
.release-icon{flex:0 0 34px}
.chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.pane[data-pane-tab="code"]>.panel{display:flex;flex-direction:column;height:100%;min-height:0}
.pane[data-pane-tab="code"]>.panel>.panel-head{flex:none;flex-wrap:wrap}
.code-layout{flex:1 1 0;min-height:0;grid-template-columns:minmax(135px,26%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%}
.file-tree{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.file-row{white-space:nowrap;min-width:0;font-size:11px}
.code-view{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.code-toolbar{flex:0 0 44px;min-width:0;gap:12px;font-size:11px}
.code-toolbar>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code-toolbar>button{flex-shrink:0}
pre.code{flex:1 1 0;min-height:0;min-width:0;max-width:100%;overflow:auto;font-size:12px;overscroll-behavior:contain}
.panel-resizer{position:absolute;top:0;bottom:0;width:10px;z-index:60;cursor:col-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.resizer-sidebar{left:calc(var(--sidebar-width,232px) - 5px)}
.resizer-chat{left:calc(var(--chat-width,440px) - 5px)}
.panel-resizer::before{content:"";position:absolute;inset:0 4px;background:transparent;transition:background .12s}
.panel-resizer::after{content:"";position:absolute;width:3px;height:34px;border-radius:3px;top:calc(50% - 17px);left:3.5px;background:#586056;opacity:.8;transition:background .12s}
.panel-resizer:hover::before,.panel-resizer:focus-visible::before,.resizing-panels .panel-resizer:active::before{background:var(--accent)}
.panel-resizer:focus-visible::after,.panel-resizer:hover::after{background:var(--accent)}
html.resizing-panels,html.resizing-panels *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
.layout-reset{font-size:11px;min-height:36px;padding:0 9px;white-space:nowrap}
@container(max-width:640px){.overview-head{flex-direction:column}.preview{grid-template-columns:minmax(0,1fr);padding:22px 16px}.preview-notes{display:none}.overview,.panel,.publication,.history{padding:18px}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.code-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.file-tree{display:flex;max-height:110px;border-right:0;border-bottom:1px solid var(--line);gap:4px}.file-row{flex:0 0 auto;width:auto;max-width:240px}.release-row{gap:10px}.tabs{padding-inline:14px;gap:18px}}
@container(max-width:380px){.stats{grid-template-columns:minmax(0,1fr)}.overview-title h2,.release-hero h2{font-size:24px}}
.modal{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.modal-head>div{min-width:0}
.modal-actions{flex-wrap:wrap}
@media(max-width:820px){
 .shell{display:block;height:var(--studio-height,100dvh);position:fixed;left:0;right:0;top:var(--studio-top,0px)}
 .sidebar{position:absolute;left:0;top:0;bottom:0;width:min(280px,calc(100vw - 40px));height:100%;z-index:80;transform:translateX(-100%)}
 .shell.menu-open .sidebar{transform:translateX(0)}
 .shell.menu-open .overlay{position:absolute;z-index:70}
 .panel-resizer,.layout-reset{display:none}
 .main{width:100%;height:100%;min-height:0}
 .topbar{height:56px;min-height:56px;flex-basis:56px;padding-inline:12px}
 .mobile-menu{display:grid}
 .top-actions{gap:3px}
 .home{padding:28px 20px calc(28px + env(safe-area-inset-bottom))}
 .home-copy h1{font-size:clamp(32px,8vw,42px)}
 .home-hero{grid-template-columns:minmax(0,1fr);gap:24px}
 .workspace{flex:1 1 0;height:auto;min-height:0;display:block;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
 .chat,.workarea{height:100%;min-height:0;display:none}
 .workspace[data-mobile="chat"] .chat,.workspace[data-mobile="project"] .workarea{display:flex}
 .chat-log{padding:18px 16px}
 .chat-message{font-size:14px}
 .composer-wrap{padding:8px 12px 10px}
 .composer textarea,.modal input,.modal textarea,.auth-card input{font-size:16px}
 .composer-note{font-size:9px}
 .mobile-nav{position:absolute;bottom:0;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:35}
 .mobile-nav button{font-size:10px;min-width:0}
 .mobile-nav svg{width:19px;height:19px}
 .tabs{height:48px;min-height:48px;flex-basis:48px}
 .tab{min-height:48px}
 .preview{min-height:0}
 .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
 .studio-keyboard .workspace{padding-bottom:0}
 .studio-keyboard .mobile-nav,.studio-keyboard .chat-head,.studio-keyboard .composer-note{display:none}
 .studio-keyboard .toast{bottom:8px}
 .auth-page{min-width:0;overflow-x:hidden}
 .auth-brand{min-height:240px}
 .event{grid-template-columns:minmax(0,1fr)}
}
@media(max-height:560px){.sidebar{padding-top:10px}.side-new{margin:10px 0}.side-bottom{gap:5px;margin-top:7px}.connection-status{padding:6px 8px}.profile{padding-top:7px}.composer textarea{max-height:80px}.chat-head{height:42px;flex-basis:42px}}