/* App-owned installation UI. Native system controls remain owned by iOS. */
#pwa-ui { color:#243347; font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.pwa-banner { position:fixed; z-index:100; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(430px,calc(100% - 24px)); padding:14px 16px; border-radius:18px; border:1px solid #d4dfeb; background:#f7faff; box-shadow:0 8px 28px #162a442b; display:flex; align-items:center; gap:12px; }
.pwa-banner>div:first-child { flex:1; min-width:0; }
.pwa-banner strong { font-size:14px; font-weight:650; }
.pwa-banner p { font-size:12px; line-height:1.6; color:#53657a; margin:4px 0 0; }
.pwa-actions { display:flex; flex-direction:column; gap:2px; }
#pwa-ui button { min-height:44px; min-width:44px; padding:8px 12px; border-radius:10px; color:#345b89; }
#pwa-ui button:focus-visible { outline:3px solid #779cc6; outline-offset:2px; }
#pwa-ui [data-pwa-update],.pwa-dialog footer button:first-child { background:#e5edf7; }
#pwa-ui button:disabled { opacity:.5; }
.pwa-dialog { width:min(430px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:22px; border:1px solid #d4dfeb; border-radius:24px; background:#f7faff; color:#243347; box-shadow:0 20px 70px #13213940; overflow:auto; }
.pwa-dialog::backdrop { background:#101b2c70; }
.pwa-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pwa-dialog h2 { margin:0; font-size:20px; font-weight:650; }
.pwa-dialog header button { font-size:26px; padding:0; }
.pwa-dialog dl { margin:20px 0 24px; }
.pwa-dialog dl>div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #dce5ef; }
.pwa-dialog dt { color:#62748a; }
.pwa-dialog dd { margin:0; text-align:right; }
.pwa-dialog h3 { font-size:14px; margin:20px 0 8px; }
.pwa-dialog p { font-size:13px; line-height:1.8; color:#52657b; }
.pwa-dialog .pwa-note { font-size:11px; color:#718299; }
.pwa-dialog .pwa-limits { padding-top:12px; border-top:1px solid #dce5ef; }
.pwa-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.pwa-offline { position:fixed; z-index:90; right:12px; top:calc(8px + env(safe-area-inset-top,0px)); padding:3px 9px; border-radius:20px; background:#eef3f9; border:1px solid #cbd8e8; color:#4b607a; font-size:11px; pointer-events:none; }
/* Resize only the app canvas, not the simulated desktop device. Do not pad by the keyboard twice. */
html[data-device-preview="mobile"] #phone { height:var(--tomo-app-height,100dvh); }
html[data-device-preview="mobile"][data-keyboard="open"] #phone .screen-navigation { display:none; }
html[data-device-preview="mobile"][data-keyboard="open"] #phone .phone-content.inside-app { bottom:0; }
html[data-system-chrome="native"] #phone input,
html[data-system-chrome="native"] #phone textarea,
html[data-system-chrome="native"] #phone select { font-size:max(16px,1em); }
@media(prefers-reduced-motion:reduce) { #pwa-ui button:active { transform:none; } }

/* Keep the mobile canvas in the visual viewport; only app scroll areas scroll. */
html[data-device-preview="mobile"] #phone { position:relative; top:var(--tomo-viewport-top,0px); left:0; width:100%; max-width:100%; margin:0; }
html[data-device-preview="mobile"] #phone :is(input,textarea,select,[contenteditable="true"]) { font-size:max(16px,1em)!important; }
html[data-device-preview="mobile"][data-keyboard="open"] #phone .phone-content.inside-app { bottom:0; }
html[data-device-preview="mobile"][data-keyboard="open"] #phone .wa-composer { margin-bottom:0; }

/* Focus provides an immediate fallback while iOS keyboard resize events settle. */
html[data-device-preview="mobile"] #phone:has(input:focus,textarea:focus,select:focus,[contenteditable="true"]:focus) .screen-navigation { display:none; }
html[data-device-preview="mobile"] #phone:has(input:focus,textarea:focus,select:focus,[contenteditable="true"]:focus) .phone-content.inside-app { bottom:0; }
html[data-device-preview="mobile"] #phone:has(.wa-compose-field textarea:focus) .wa-composer { margin-bottom:0; }

/* One canvas in every state; editing must not change body positioning. */
html[data-device-preview="mobile"] body { min-width:0; max-width:100%; overflow:hidden; }
html[data-device-preview="mobile"] #phone .phone-content { min-width:0; max-width:100%; }
html[data-device-preview="mobile"] #phone :is(.app-scroll,.ios-content,.message-scroll,.wa-thread,.home-page) { min-width:0; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }
html[data-device-preview="mobile"] #phone :is(form,fieldset,label,.role-form-section,.role-optional,.account-card) { min-width:0; max-width:100%; }
html[data-device-preview="mobile"] #phone :is(input,textarea,select) { min-width:0; max-width:100%; box-sizing:border-box; }
html[data-device-preview="mobile"] #phone :is(.field-hint,.role-optional>summary) { overflow-wrap:anywhere; }