:root {
  --pwa-safe-area-top: env(safe-area-inset-top, 0px);
  --pwa-safe-area-right: env(safe-area-inset-right, 0px);
  --pwa-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-area-left: env(safe-area-inset-left, 0px);
}

/*
 * A safe area da aplicação autenticada pertence exclusivamente ao .app-shell.
 * globals.css já aplica top/right/bottom/left ao shell com viewport-fit=cover.
 *
 * Não aplique safe-area novamente ao primeiro filho do <main>: isso duplicava
 * o inset superior em páginas cujo header legado é um <div> (Inbox, Leads,
 * Agenda etc.), enquanto o Dashboard usa <header> e não recebia o segundo
 * padding. O resultado era o grande espaço morto visto no iPhone/PWA.
 */
@media (max-width: 767px) {
  .safe-area-bottom {
    padding-bottom: var(--pwa-safe-area-bottom);
  }
}
