/* ============================================
   Hermes UI — Responsive Overrides
   Injecté via Nginx, survit aux rebuilds
   ============================================ */

/* ---- Mobile: < 768px ---- */
@media (max-width: 767px) {
  /* Réduire la sidebar gauche — icônes seulement */
  aside[class*="sidebar"],
  div[class*="sidebar"] {
    width: 48px !important;
    min-width: 48px !important;
  }

  /* Masquer les textes dans la sidebar mobile */
  aside span[class*="label"],
  aside p,
  aside h2,
  aside h3 {
    display: none !important;
  }

  /* La zone de chat prend tout l'espace restant */
  main {
    padding: 8px !important;
  }

  /* Agrandir les boutons pour les doigts */
  button {
    min-height: 40px;
    min-width: 40px;
  }

  /* Zone de saisie plus compacte */
  form textarea,
  form input[type="text"] {
    font-size: 16px !important; /* Évite le zoom iOS */
    padding: 10px 12px !important;
  }

  /* Barre d'outils en bas plus compacte */
  footer,
  section[class*="footer"] {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Masquer la sidebar droite sur mobile */
  aside[class*="right-sidebar"],
  div[class*="right-sidebar"] {
    display: none !important;
  }

  /* Réduire les marges des cartes/modales */
  div[class*="dialog"],
  div[class*="modal"] {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 12px !important;
  }
}

/* ---- Tablette: 768px - 1024px ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  aside[class*="sidebar"] {
    width: 200px !important;
  }
}

/* ---- Petits laptops: 1025px - 1366px ---- */
@media (min-width: 1025px) and (max-width: 1366px) {
  aside[class*="sidebar"] {
    width: 240px !important;
  }
}

/* ---- Utilitaires globaux ---- */

/* Meilleur touch target pour les selects/dropdowns */
@media (pointer: coarse) {
  select, 
  [role="combobox"],
  [role="listbox"] option {
    min-height: 44px;
  }
}

/* Scroll plus doux sur mobile */
* {
  -webkit-overflow-scrolling: touch;
}

/* Éviter le débordement horizontal */
html, body, #root {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ajuster la taille de police de base pour mobile */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}