/* ---- Safe-area insets (notch / home indicator) ----------------------
   Needed when this mobile layout is rendered as a full-screen mobile web
   page (installed PWA, browser tab), where the page itself can extend
   under the notch/home-indicator area. `env(safe-area-inset-*)` resolves
   to 0 on devices/browsers without a cutout, so this is a no-op there.

   Each rule reads `var(--de-safe-*, env(safe-area-inset-*))` rather than
   `env()` directly so a host that already reserves the inset itself —
   `@shashimadushan/docx-editor-react-native`'s WebView is positioned by
   the RN host's own chrome (top bar, tab bar), never edge-to-edge under
   the status bar/home indicator — can zero it out by setting
   `--de-safe-top`/`--de-safe-left`/`--de-safe-right`/`--de-safe-bottom`
   on `documentElement` (see `packages/react-native/webui/src/main.tsx`)
   instead of double-applying it on top of the host's own inset padding.
   Scoped under `.docx-editor-react[data-de-layout="mobile"]` like every
   other mobile-only rule. */

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-header {
  padding-top: calc(8px + var(--de-safe-top, env(safe-area-inset-top)));
  padding-left: calc(10px + var(--de-safe-left, env(safe-area-inset-left)));
  padding-right: calc(10px + var(--de-safe-right, env(safe-area-inset-right)));
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-row {
  padding-left: var(--de-safe-left, env(safe-area-inset-left));
  padding-right: var(--de-safe-right, env(safe-area-inset-right));
  padding-bottom: var(--de-safe-bottom, env(safe-area-inset-bottom));
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-sheet {
  padding-bottom: var(--de-safe-bottom, env(safe-area-inset-bottom));
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-sheet__header {
  padding-left: calc(16px + var(--de-safe-left, env(safe-area-inset-left)));
  padding-right: calc(16px + var(--de-safe-right, env(safe-area-inset-right)));
}