/* Mobile browser and installed PWA use the device's real safe areas. */
.mobile-device-chrome { display: none !important; }
@media (max-width: 680px) {
  body {
    --device-top: env(safe-area-inset-top, 0px);
    --device-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.immersive-navigation:not(.scene-home) .app-shell .main,
  body.immersive-navigation .app-shell.mode-messages .sidebar {
    inset: var(--device-top) 0 var(--device-bottom) !important;
    height: auto !important;
  }
  body.scene-home .immersive-nav { top: calc(var(--device-top) + 12px); }
  body.scene-home .immersive-dock {
    max-height: calc(100% - var(--device-top) - 80px);
    padding-bottom: calc(var(--device-bottom) + 12px);
  }

  /* Secondary pages sit inside the actual device safe areas. */
  body.immersive-navigation .profile-page-header,
  body.immersive-navigation .app-shell.mode-messages .sidebar-header,
  .chat-header, .route-subpage-bar { padding-top: 10px; }
  .profile-page-content { padding-bottom: 28px; }
  .app-shell.mode-messages .conversation-list,
  .app-shell.mode-messages .discover-section { padding-bottom: 12px; }
  body.immersive-navigation .assistant-screen.is-chatting > .immersive-dock { padding-bottom: 12px; }
  body.immersive-navigation .assistant-screen.is-chatting { padding-top: 0; }
  .guide-map > .guide-return { top: 16px; }
  .guide-bottom { min-height: 112px; padding-bottom: 13px; }
  .guide-subpage-header { padding-top: 12px; }
  .guide-subpage-actions { padding-bottom: 12px; }
  .persona-overlay:not(.persona-inline) { inset: var(--device-top) 0 var(--device-bottom); }
  .persona-overlay .persona-page { height: 100%; max-height: 100%; }
  .persona-overlay .persona-top { height: 64px; min-height: 64px; padding-top: 0; }
  .persona-overlay .persona-footer { padding-bottom: 14px; }
  body .modal-backdrop {
    padding-top: calc(var(--device-top) + 12px);
    padding-bottom: calc(var(--device-bottom) + 12px);
  }
  body .modal { max-height: calc(100dvh - var(--device-top) - var(--device-bottom) - 24px); }
  body.mobile-editing .modal { max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--device-top) - var(--device-bottom) - 24px); }
  body.has-page-return .toast { bottom: calc(var(--device-bottom) + 12px); }

  /* A reduced keyboard viewport no longer needs bottom safe-area spacing. */
  body.mobile-keyboard-open { --device-bottom: 0px; }
  body.mobile-keyboard-open .modal { max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--device-top) - 24px); }
}