html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;min-height:100dvh}
img,video,canvas{max-width:100%}

/* notch / gesture-bar safe areas */
body{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.bottom-nav{bottom:calc(14px + env(safe-area-inset-bottom));width:min(430px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
.bottom-nav button{min-width:0;overflow:hidden}
.bottom-nav button>*{max-width:100%}
.bottom-nav button{white-space:nowrap;text-overflow:ellipsis}
main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}

/* readable content width on large phones, foldables and tablets */
main,header,.section-switch,.app-status{max-width:640px;margin-left:auto;margin-right:auto}
.bottom-nav{max-width:640px}

/* dialogs and sheets never taller than the visible screen */
dialog:not(.fx-zoom){max-height:calc(100dvh - 24px);max-width:calc(100vw - 16px);overflow-y:auto;box-sizing:border-box}
.fx-sheet{max-height:92dvh;max-width:100vw}
.fx-stage{height:clamp(150px,min(62vw,44dvh),300px)}

/* very narrow screens (small phones, split-screen, folded devices) */
@media(max-width:340px){
 .bottom-nav{padding:8px 4px;border-radius:22px}
 .bottom-nav button{font-size:10px;padding:4px 2px;gap:2px}
 .bottom-nav .nav-icon{width:24px;height:24px}.bottom-nav .nav-icon svg{width:24px;height:24px}
 header{gap:6px}
 .bal-chip{padding:4px 5px 4px 8px;font-size:13px}
 .bal-buy{padding:3px 8px;font-size:11px}
 .brand{font-size:20px}
 .section-switch button{font-size:16px;padding:8px 6px}
 .qa-card{flex-basis:88%}
 .fx-title{font-size:18px}
}
@media(max-width:260px){.brand-note,.bal-buy{display:none}.bottom-nav button{font-size:9px}}

/* short screens: landscape phones, keyboards */
@media(max-height:480px){
 main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 .bottom-nav{padding:4px 6px}
 .bottom-nav button{flex-direction:row;gap:6px;padding:3px 8px;font-size:11px}
 .bottom-nav .nav-icon{width:20px;height:20px}.bottom-nav .nav-icon svg{width:20px;height:20px}
 .fx-stage{height:clamp(120px,40dvh,200px)}
 .fx-sheet{max-height:100dvh;border-radius:18px 18px 0 0}
}

/* wide: phones in landscape, tablets */
@media(min-width:600px){
 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .qa-card{flex-basis:300px}
 .fx-sheet{width:min(100%,560px);border-radius:26px}
}

/* user increased system font size */
@media(max-width:480px){
 .primary,.secondary{word-break:normal;overflow-wrap:anywhere}
}
.qa-head{flex-wrap:wrap;row-gap:6px}
.qa-head h2{min-width:0}
#videoEditor,#editor,.scenario-dialog,.bal-dialog{width:min(calc(100vw - 16px),var(--dlg-w,560px))}
#videoEditor .service-form,#editor .editor-body{min-width:0}
#videoEditor label.upload{max-width:100%;box-sizing:border-box;overflow:hidden}