/* Mobile optimizations */
@media (max-width: 768px) {
  body { 
    grid-template-columns: 1fr; 
    height: 100dvh; 
    overflow: hidden; /* Prevent scroll issues */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  #map { 
    height: 100dvh; 
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(88vw, 420px);
    height: 100dvh;
    z-index: 1000;
    box-shadow: 8px 0 24px rgba(0,0,0,0.4);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .sidebar-toggle-btn {
    right: -22px;
  }
  #sidebar.show {
    transform: translateX(0);
  }
  #timelineControls { 
    bottom: 12px; 
    min-width: 240px; 
    padding: 8px 12px; 
    gap: 8px; 
    z-index: 10005;
    /* Ensure timeline controls are always accessible on mobile */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* Add subtle background for better visibility */
    background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }
  #reopenSidebar {
    z-index: 10006;
  }
}