.personal-app.safe-area-sides {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Fixed overlays are positioned against the viewport, outside body padding.
   Transparent borders preserve each overlay's existing responsive padding. */
.personal-app .safe-area-sides {
  border-left: env(safe-area-inset-left, 0px) solid transparent;
  border-right: env(safe-area-inset-right, 0px) solid transparent;
}

/* The header and footer own vertical insets; adding them to body would double them. */
.personal-app .safe-area-top {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
}

.personal-app .safe-area-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.personal-app .safe-area-nav {
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* Keep bottom sheets below the status bar and their final controls above the home indicator. */
.personal-app :is(#food-log-modal, #badge-progress-sheet, #all-trophies-modal, #trainer-profile-modal) > article {
  max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
  overflow-y: auto;
}

.personal-app :is(#badge-progress-sheet, #all-trophies-modal, #trainer-profile-modal) > article {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

.pwa-install-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid #3f3f46; border-radius: 12px; background: #1b1b1d; color: #e7e0ed; }
.pwa-install-panel[hidden] { display: none; }
.pwa-install-panel p { margin: 4px 0 0; color: #cbc3d7; font-size: 13px; }
.pwa-install-panel button, .pwa-dialog button { min-height: 44px; border: 0; border-radius: 8px; padding: 10px 16px; background: #D4FF00; color: #131315; font: inherit; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.pwa-dialog { width: min(420px, calc(100% - 32px)); margin: auto; padding: 24px; border: 1px solid #3f3f46; border-radius: 16px; background: #131315; color: #e7e0ed; font: 16px/1.5 system-ui, sans-serif; }
.pwa-dialog::backdrop { background: rgb(0 0 0 / 80%); }
.pwa-dialog h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; }
.pwa-dialog p { margin: 0 0 20px; }
.pwa-dialog button:focus-visible, .pwa-install-panel button:focus-visible { outline: 3px solid #e7e0ed; outline-offset: 3px; }
@media (max-width: 420px) { .pwa-install-panel { align-items: stretch; flex-direction: column; } }