/* Installed PWA viewport fixes for iOS/Android display cutouts. */
@supports (padding: env(safe-area-inset-top)) {
  .app-container {
    padding-top: calc(var(--space-lg, 24px) + env(safe-area-inset-top));
    padding-right: calc(var(--space-lg, 24px) + env(safe-area-inset-right));
    padding-bottom: calc(var(--space-lg, 24px) + env(safe-area-inset-bottom));
    padding-left: calc(var(--space-lg, 24px) + env(safe-area-inset-left));
    min-height: 100dvh;
  }

  .app-header {
    top: calc(14px + env(safe-area-inset-top));
  }

  .direct-shell {
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    min-height: 100dvh;
  }

  .direct-header {
    top: calc(14px + env(safe-area-inset-top));
  }

  .modal-backdrop {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
  }

  .toast {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }

  @media (max-width: 640px) {
    .app-container {
      padding-top: calc(12px + env(safe-area-inset-top));
      padding-right: calc(12px + env(safe-area-inset-right));
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
      padding-left: calc(12px + env(safe-area-inset-left));
    }

    .app-header {
      top: calc(8px + env(safe-area-inset-top));
    }
  }

  @media (max-width: 650px) {
    .direct-shell {
      padding-top: calc(10px + env(safe-area-inset-top));
    }

    .direct-header {
      top: calc(8px + env(safe-area-inset-top));
    }
  }
}