/* iPhone app shell (Capacitor, contentInset "never"): the web view runs edge to
   edge, so safe areas are handled here. Everything is scoped to html.is-app
   (set by features/native-bridge.js / an inline head script), so browsers are
   unaffected. Needs viewport-fit=cover in the viewport meta. */
html.is-app { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }
html.is-app, html.is-app body { max-width: 100%; overflow-x: hidden; }

/* Full-height layouts track the visible viewport. */
html.is-app .screen { min-height: 100dvh; }
html.is-app .screen:not(#main-screen) { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); box-sizing: border-box; }
html.is-app .ai-tab-container { height: calc(100dvh - 250px); }
html.is-app .wk-scroll { max-height: calc(100dvh - 220px); }
html.is-app .modal { max-height: 90dvh; }

/* Topbar grows by the status-bar height; --chrome-h follows via offsetHeight. */
html.is-app .topbar { padding-top: var(--sa-t); height: calc(52px + var(--sa-t)); padding-inline: max(14px, var(--sa-l)) max(14px, var(--sa-r)); box-sizing: border-box; }
html.is-app .main-layout { padding-inline: var(--sa-l) var(--sa-r); padding-bottom: var(--sa-b); box-sizing: border-box; }
html.is-app .sidebar { padding-bottom: var(--sa-b); box-sizing: border-box; }

/* Modals, centred or bottom-sheet, stay clear of the notch and home indicator. */
html.is-app .modal-overlay { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); box-sizing: border-box; }
html.is-app .modal.modal-sheet { max-height: calc(92dvh - var(--sa-t)); }
@media (max-width: 640px) {
  html.is-app .modal-overlay.overlay-sheet { padding-bottom: 0; }
}
html.is-app #chat-toast-wrap { top: calc(16px + var(--sa-t)); right: calc(16px + var(--sa-r)); }
html.is-app #vf-minimised-bar, html.is-app #schedule-bulk-bar { bottom: calc(16px + var(--sa-b)); }
html.is-app body { min-height: 100dvh; }

/* Patient chart (phone): the strip is the top bar and the bottom nav already adds the home-indicator inset. */
@media (max-width: 767px) {
  html.is-app body:has(#view-patient-detail.active) .main-layout { padding-bottom: 0; }
  html.is-app #view-patient-detail .ch-strip { height: calc(56px + var(--sa-t)); padding-top: calc(6px + var(--sa-t)); }
}
/* Mobile upload page header. */
html.is-app .header { height: calc(52px + var(--sa-t)); padding-top: var(--sa-t); padding-inline: max(14px, var(--sa-l)) max(14px, var(--sa-r)); }