/* ══════════════════════════════════════════════════════
   RESPONSIVE — Media queries pour mobile et petit écrans
══════════════════════════════════════════════════════ */

@media (max-width:640px) {
  #topbar {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    transform: none;
    gap: 6px;
    top: 12px;
  }

  #searchInput {
    font-size: 14px;
  }

  #searchModeBtn {
    min-width: 52px;
    padding: 0 8px;
    font-size: 10px;
  }

  /* Panel as bottom sheet on mobile */
  #panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 44vh;
    min-height: 230px;
    max-height: 52vh;
    border-left: none;
    border-top: 1.5px solid var(--border);
    border-radius: var(--r-l) var(--r-l) 0 0;
    transform: translateY(100%);
  }

  #panel.open {
    transform: translateY(0);
  }

  /* Panel compact pendant le mode suivi */
  #panel.track-follow-panel {
    height: 36vh;
    min-height: 220px;
    max-height: 42vh;
  }

  #panel.track-follow-panel .ph {
    padding: 12px 14px;
  }

  #panel.track-follow-panel .ptitle {
    font-size: 16px;
  }

  #panel.track-follow-panel .ps {
    padding: 10px 14px;
  }

  /* Panel compact pour les perturbations (identique au mode mobile par defaut) */
  #panel.disruptions-panel {
    height: 44vh;
    min-height: 230px;
    max-height: 52vh;
  }

  #panel.disruptions-panel .ph {
    padding: 11px 14px;
  }

  #panel.disruptions-panel .ps {
    padding: 10px 12px;
  }

  /* Show drag handle on mobile */
  #panel-handle {
    display: block;
  }

  #fabs {
    bottom: 16px;
    right: 12px;
  }

  #searchDrop {
    top: 70px;
  }

  /* Larger bus icons on mobile */
  .lf-bus-wrap {
    width: 42px;
    height: 42px;
  }

  .lf-bus-wrap img {
    width: 42px;
    height: 42px;
  }

  .lf-num {
    bottom: 44px;
  }
}

/* Extra small phones */
@media (max-width:360px) {
  #topbar {
    gap: 5px;
    top: 10px;
  }

  .search-pill {
    padding: 0 10px;
  }

  #searchModeBtn {
    min-width: 48px;
    padding: 0 7px;
  }
}