/* Safe area insets for devices with display cutouts (iOS notch, home indicator) */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

/* Apply insets to the main app container so content stays clear of cutouts */
#root {
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  /* Bottom padding is applied conditionally to avoid double spacing when a fixed bottom nav is present */
  padding-left: var(--safe-left);
}

/* Apply bottom safe-area padding only when no bottom nav is present */
body:not(.has-bottom-nav) #root {
  padding-bottom: var(--safe-bottom);
}

/* Utility class for any additional full-bleed containers if needed */
.safe-area-padding {
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}