/* Scale type via rem; keep existing pixel-based layout and icon dimensions. */
:root{--display-text-scale:1;font-size:calc(100% * var(--display-text-scale))}
:root[data-text-size="large"]{--display-text-scale:1.25}
:root[data-text-size="very-large"]{--display-text-scale:1.5}
body{font-size:1rem}
.brand strong{font-size:1.125rem}
.brand div>span,.eyebrow,small,.privacy-note p,.model-bar label,.assistant-name,.message-meta,.file-chip{font-size:.75rem}
h1{font-size:1.75rem}
h2{font-size:1.25rem}
h3,.voice-status{font-size:1.0625rem}
p,label,.primary-button,.secondary-button,.creation-option,.creation-result,.library-row>span:nth-child(2),.empty-state,.conversation-open{font-size:.875rem}
.text-button,.notice,.message-body pre,.job-status,.availability{font-size:.8125rem}
.user-message,.assistant-message,.message-body p{font-size:.9375rem}
.composer-note,.nav-button{font-size:.6875rem}
.dialog-header h2{font-size:1.125rem}
.file-preview{font-size:.875rem}
/* Selects must stay at least 16px even in the existing narrow-screen rule. */
input,select,textarea,.model-bar select{font-size:max(16px,1rem)}

.app-header{flex-wrap:wrap}
.brand{min-width:0;flex:1 1 150px}
.brand>div{min-width:0;overflow-wrap:anywhere}
.header-actions{display:flex;gap:2px;flex-shrink:0;margin-inline-start:auto}
.settings-glyph{font-size:20px;line-height:1;letter-spacing:-2px}
.dialog-header h2{min-width:0;overflow-wrap:anywhere}
.dialog-header>.icon-button{flex-shrink:0}
.settings-help,.settings-preview{overflow-wrap:anywhere}
.settings-fieldset{margin:20px 0;padding:0;border:0;min-width:0}
.settings-fieldset legend{font-size:.875rem;margin-bottom:12px}
.text-size-options{display:grid;gap:10px}
.text-size-choice{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;min-height:48px;cursor:pointer;overflow-wrap:anywhere}
.text-size-choice:has(input:checked){border-color:var(--accent);background:var(--tint)}
.text-size-choice input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--accent)}
.text-size-choice span{min-width:0}
.settings-preview{padding:14px;background:var(--soft);border-radius:10px;margin:16px 0;font-size:1rem;line-height:1.65}
#display-settings-status{min-height:3.3em}

/* Large type must reflow in the existing compact layout instead of clipping. */
.model-bar{flex-wrap:wrap}
.model-bar label{white-space:normal}
.model-bar select{max-width:100%;flex:1 1 210px}
.job-status{flex-wrap:wrap}
.job-status>span:not(.status-dot){min-width:0;overflow-wrap:anywhere}
.person-row{flex-wrap:wrap}
.bottom-navigation{gap:2px}
.nav-button{flex:1;min-width:0;padding:6px 2px;overflow-wrap:anywhere}
.creation-option{overflow-wrap:anywhere}
.file-chip{min-width:0;flex-wrap:wrap}
.primary-button,.secondary-button{overflow-wrap:anywhere;flex-wrap:wrap}
@media(max-width:360px){h1{font-size:1.625rem}.model-bar select{max-width:100%;font-size:max(16px,1rem)}}
