/* Shared viewport and intrinsic-sizing rules. Content may scroll vertically; the screen never pans horizontally. */
:root{--viewport-h:100dvh;--viewport-top:0px;--keyboard-gap:0px;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
html,body{inline-size:100%;max-inline-size:100%;overscroll-behavior-x:none}
#app{inline-size:100%;min-inline-size:0;max-inline-size:100%}
.app,#main,.page,.welcome,.welcome-hero,.welcome-card,.welcome-card>*,form,.field,.input-wrap,.sheet-body,.sheet-panel,.card-form,.settings-row>span,.switch-row>span,.radio>span{min-inline-size:0}
input,textarea,select{min-inline-size:0;max-inline-size:100%}
input[type=file]{width:100%}
.field,.card-form,.welcome-card,.settings-row,.group-card,.study-card,.group-message,.notice,.fine,.sheet-body,.creator-controls{overflow-wrap:anywhere}
.field input,.input-wrap input{min-width:0}
.input-wrap input{width:0;flex:1 1 0%}
.welcome{grid-template-columns:minmax(0,1fr);inline-size:100%;padding-inline:max(0px,var(--safe-l)) max(0px,var(--safe-r))}
.welcome-card{inline-size:100%;max-inline-size:100%}
.welcome.single{padding: max(16px,var(--safe-t)) max(12px,var(--safe-r)) max(16px,var(--safe-b)) max(12px,var(--safe-l));align-content:safe center}
.welcome.single .welcome-card{width:min(100%,440px)}
.welcome .btn,.sheet-body .btn,.group-tools .btn,.creator-controls .btn{height:auto;min-height:44px;white-space:normal;text-align:center;padding-block:10px;overflow-wrap:anywhere}
.welcome .btn.lg{min-height:50px}
.welcome-hero{padding:calc(var(--safe-t) + 14px) 18px 16px}
.welcome-hero h1{font-size:32px;margin-top:0}
.welcome-hero>p{font-size:14px}
.welcome-card .seg{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
.welcome-card .seg>*{min-width:0}
.gsi-slot{min-width:0;max-width:100%;overflow-x:hidden}
.page{padding-left:max(16px,var(--safe-l));padding-right:max(16px,var(--safe-r));overflow-wrap:anywhere}
.sub-head{grid-template-columns:40px minmax(0,1fr) 40px}
.sub-head h1,.sheet-head h2,.room-heading>div,.chat-who strong{min-width:0;overflow-wrap:anywhere}
.sheet-head{grid-template-columns:40px minmax(0,1fr) 40px}
.sheet-panel{max-width:100%;scroll-padding-block:64px 24px}
.sheet-body>*,.creator-controls>*,.group-tools>*,.row>*{max-width:100%;min-width:0}
.group-tools,.row{gap:8px}
.producer-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.producer-options label,.producer-options select,.beat-controls .field{min-width:0}
.producer-output audio{width:100%;max-width:100%}
.chat-scroll,.sheet-body,.creator-controls{min-height:0}
.chat-head,.composer-bar{flex:none}
.chat-who strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-bar{padding-left:max(12px,var(--safe-l));padding-right:max(12px,var(--safe-r))}
.chips,.p-tabs,.hscroll,.cam-looks,.fx-strip,.creator-tabs,.creator-slides,.template-categories{overscroll-behavior-x:contain}
@media(max-width:767px){
 .welcome-hero h1,.welcome-hero>p{display:none}
 .welcome-card{padding-inline:16px;border-radius:18px 18px 0 0}
 .welcome.single .welcome-card{border-radius:18px}
 .page.chat{top:var(--viewport-top);height:calc(var(--viewport-h) - var(--tabbar-h) - var(--safe-b));bottom:auto}
 .sheet-panel{max-height:calc(var(--viewport-h) - var(--safe-t) - 8px);bottom:var(--keyboard-gap)}
 .sheet-full .sheet-panel{top:var(--viewport-top);bottom:auto;height:var(--viewport-h);max-height:var(--viewport-h)}
 .sheet-drawer .sheet-panel{height:min(78dvh,calc(var(--viewport-h) - var(--safe-t) - 8px))}
 html.keyboard-open .tabbar{display:none}
 html.keyboard-open .page.chat{height:var(--viewport-h)}
 html.keyboard-open .composer-bar{padding-bottom:max(8px,var(--safe-b))}
 html.keyboard-open .welcome-hero{padding-block:8px}
 html.keyboard-open .welcome-hero .brand img{width:30px;height:30px}
 html.keyboard-open .welcome-hero .brand span{font-size:16px}
 html.keyboard-open .group-compose{bottom:0}
 html.keyboard-open .sheet-head{padding-block:4px}
 html.keyboard-open .sheet-creator{top:var(--viewport-top)!important;bottom:auto!important;height:var(--viewport-h)!important;max-height:var(--viewport-h)!important}
 html.keyboard-open .creator-stage{min-height:50px}
 html.keyboard-open .creator-controls{height:min(180px,48dvh);max-height:48dvh}
 html.keyboard-open .sheet-publish .sheet-panel{top:var(--viewport-top);height:var(--viewport-h);max-height:var(--viewport-h);bottom:auto}
 html.keyboard-open .quick-view{min-height:60px;flex-basis:80px}
}
@media(min-width:768px){
 .welcome{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(16px,3vw,48px);padding: max(24px,var(--safe-t)) clamp(20px,4vw,64px) max(24px,var(--safe-b))}
 .welcome-hero{padding:0}.welcome-hero h1{font-size:clamp(32px,5vw,64px)}
 .welcome.single{grid-template-columns:minmax(0,1fr)}
 html.keyboard-open .sheet-panel{max-height:calc(var(--viewport-h) - 16px);top:calc(var(--viewport-top) + var(--viewport-h)/2);bottom:auto;transform:translate(-50%,-50%)}
 html.keyboard-open .sheet-drawer .sheet-panel{top:var(--viewport-top);height:var(--viewport-h);transform:none}
}
@media(max-width:359px){.page,.sheet-body{padding-inline:12px}.welcome-card{padding-inline:12px}.producer-options{grid-template-columns:minmax(0,1fr)}.group-tools>.btn{flex:1 1 120px}.p-buttons>.btn{flex:1 1 110px}}
@media(max-height:480px){.sheet-head{min-height:44px}.sheet-body{padding-block:10px}.sheet-panel{scroll-padding-top:48px}}

/* A fixed chat must be allowed to shrink below the ordinary page's minimum height. */
#main.chat{min-height:0}
.profile .p-tabs{width:100%;margin-inline:0}
.p-tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:359px){.p-tabs a span{font-size:9px}.chips{margin-inline:-12px;padding-inline:12px}}