/* ===== MOBILE LAYOUT OVERRIDES ===== */
/* Hide desktop UI on mobile */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }

  body.bg-background,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Map full-screen tidak boleh menangkap tap di area UI */
  .fixed.inset-0.z-0 {
    pointer-events: none !important;
  }
  #map {
    pointer-events: auto !important;
    touch-action: pan-x pan-y;
  }

  /* Semua kontrol mobile harus bisa disentuh */
  .mobile-only,
  #mobile-draggable-sheet,
  #quick-report-sheet.is-open,
  nav.mobile-only,
  #report-form-overlay.is-open,
  #report-form-overlay.is-open * {
    pointer-events: auto;
  }
  #quick-report-sheet:not(.is-open) {
    pointer-events: none !important;
  }
  #report-form-overlay:not(.is-open) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  #mobile-draggable-sheet .glass-panel,
  #mobile-draggable-sheet #draggable-sheet-handle {
    pointer-events: auto;
    touch-action: manipulation;
  }
  nav.mobile-only {
    z-index: 100 !important;
  }
  #quick-report-sheet {
    z-index: 110 !important;
  }
  #report-form-overlay.is-open {
    z-index: 9700 !important;
    visibility: visible !important;
  }
  .mobile-only button,
  .mobile-only [role="button"],
  nav.mobile-only [onclick],
  #tab-map, #tab-safe, #tab-community, #tab-analytics,
  #btn-quick-report {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  #nira-fab-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
    z-index: 90 !important;
  }
}

@media (max-width: 767px) {
  .weather-info-card {
    bottom: 180px;
    max-width: calc(100% - 40px);
    padding: 16px 18px;
  }

  .search-wrapper.expanded {
    width: 100% !important;
  }
}

/* Mobile styles for AI Risk Panel */
@media (max-width: 767px) {
  #ai-risk-panel-container.collapsed {
    display: none !important;
  }

  #ai-risk-panel-container {
    left: 50% !important;
    right: auto !important;
    bottom: 120px !important;
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
  }
}