/* ============================================================
   ios-safe-area.css — keep the top UI clear of the iPad status bar.

   The page fills the whole screen (viewport-fit=cover +
   black-translucent), so on a Home Screen app the iPad status bar
   (time, battery) sits on top of the page. env(safe-area-inset-top)
   says how tall that bar is, but <body> is CSS-zoomed, which shrinks
   any px inside it — so divide by the app zoom to get the real gap.
   In Safari full screen the inset can be 0 while the exit controls
   still overlay the top, so a 24px minimum applies there
   (html.ios-fs, set by js/core/IPadFullscreen.js).
   ============================================================ */

html.is-ios.ios-fs,
html.is-ios.ios-standalone { --ios-top-min: 24px; }   /* in case an iPad reports no inset */

html body {
    --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--ios-top-min, 0px)) / var(--app-zoom, 1));
}

/* top buttons (left + right groups) */
html body .top-ui-layer { margin-top: var(--safe-top) !important; }

/* clock notch: its background runs up under the status bar, the content sits below it */
html body #presence-notch.presence-notch { padding-top: calc(7px + var(--safe-top)) !important; }
@media (max-width: 640px) {
    html body #presence-notch.presence-notch { padding-top: calc(6px + var(--safe-top)) !important; }
}

/* full-height side panels: start their content below the status bar */
html body :is(#slidePanelSidebar, #teacher-chat-slider) { padding-top: var(--safe-top) !important; }