/* DSH Mobile PWA Optimizations — v4 (standalone safe-area fix) */

/* === 1. Safe area insets (iPhone notch / dynamic island / status bar) === */
@supports (padding: env(safe-area-inset-top)) {
  html {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  body {
    padding-top: 0 !important;  /* html already handles it */
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* === 2. PWA standalone mode — status bar overlaps content === */
@media (display-mode: standalone) {
  html {
    padding-top: env(safe-area-inset-top, 44px) !important;
  }

  /* Header: extra top padding so breadcrumbs aren't behind status bar */
  .wSkVaW_header {
    padding-top: env(safe-area-inset-top, 44px) !important;
  }

  /* Composer: bottom safe area for home indicator */
  .wSkVaW_composerSeat {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
}

/* === 3. Prevent iOS auto-zoom on input focus (must be >= 16px) === */
input, textarea, select {
  font-size: max(16px, 1em) !important;
}

/* === 4. Safe area background fill (no transparent gap behind notch) === */
@supports (padding: env(safe-area-inset-top)) {
  body[data-ds-dark-theme] {
    background-color: #0a0a0a !important;
  }
  body:not([data-ds-dark-theme]) {
    background-color: #ffffff !important;
  }
}

/* === 5. Toast: push below status bar === */
[class*="toast"] {
  top: max(120px, calc(env(safe-area-inset-top, 0px) + 20px)) !important;
}

/* === 6. Dialog/modal: respect safe areas === */
[class*="dialog"], [class*="modal"] {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}

/* === 7. Mobile-specific fixes (<=768px) === */
@media (max-width: 768px) {
  /* Hide decorative mascot — it covers the input area on mobile */
  .o--vAW_mascot {
    display: none !important;
  }

  /* Hide ornament layer — full-screen fixed overlay wastes GPU on mobile */
  .o--vAW_ornamentLayer {
    display: none !important;
  }

  /* Sidebar column: don't eat fixed width on mobile */
  .pI_x6G_sidebarCol {
    width: auto !important;
  }
}