/* Structure d'ABC Chat IA : le squelette des écrans.
   Les couleurs viennent de themes.css, les composants de composants.css.
   Les règles propres au téléphone sont regroupées en bas de fichier. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* Trois hauteurs, de la plus universelle à la plus juste — chaque navigateur retient
     la dernière qu'il sait lire :
       100%              : filet pour les très vieux navigateurs ;
       100dvh            : suit la barre d'adresse qui se rétracte, et le clavier sur
                           Chrome Android (voir interactive-widget dans index.html) ;
       --hauteur-ecran   : mesurée par js/hauteur-ecran.js, seule à suivre le clavier
                           de Safari iOS, qui ignore le réglage ci-dessus. */
  height: 100%;
  height: 100dvh;
  height: var(--hauteur-ecran, 100dvh);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;   /* même finesse de texte sur Firefox macOS */
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;   /* pas de grossissement surprise en paysage (iOS) */
}

/* Toute la mise en page tient dans l'écran : seules les zones prévues défilent. */
body { display: flex; overflow: hidden; }

/* ---------- Rail latéral ---------- */

#panneau {
  width: 268px;
  min-width: 268px;
  background: var(--fond-panneau-2);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#listeConversations {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* le défilement ne « fuit » pas vers la page */
  padding: 4px 8px 8px;
}

.pied-panneau {
  border-top: 1px solid var(--bordure);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;   /* 3 boutons : deux sur la ligne, le suivant passe en dessous */
  gap: 8px;
}
.pied-panneau button { flex: 1 1 40%; }

/* ---------- Zone principale ---------- */

#principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  position: relative;   /* contexte pour le composeur flottant */
}

#entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--bordure);
  background: color-mix(in srgb, var(--fond-panneau) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#btnMenu { display: none; }

/* Les trois sélecteurs forment un groupe (voir index.html) : sur grand écran ils se
   comportent comme avant, sur téléphone ils tiennent sur une ligne qui défile. */
.selecteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#zoneMessages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 24px 150px;   /* marge basse : dégager le composeur flottant */
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Composeur flottant : couche transparente en fondu, la carte est .boite-saisie. */
#composeur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 24px 18px;
  background: linear-gradient(180deg, transparent, var(--fond) 34%);
  pointer-events: none;
}

/* ---------- Voile et écrans étroits (téléphone) ---------- */

#voile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 15;
  border: none;
  padding: 0;
  background: var(--voile);
}

/* Condition « téléphone » de tout le projet, reprise à l'identique dans les quatre
   autres fichiers CSS : écran étroit, OU téléphone couché (écran bas ET pas trop
   large ET tactile — sinon le panneau resterait planté au milieu des 390 px de
   hauteur disponibles).
   Les deux bornes de la seconde branche ne sont pas décoratives : « tactile » évite
   de surprendre une fenêtre de bureau aplatie, et « pas trop large » évite de faire
   basculer une tablette dont le clavier vient de raccourcir l'écran. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 950px) and (pointer: coarse) {
  #panneau {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(280px, 85vw);
    min-width: 0;
    padding-left: env(safe-area-inset-left);   /* encoche en paysage */
    transform: translateX(-100%);
    /* Fermé, le panneau n'est pas seulement hors de l'écran : il est retiré du
       parcours (plus de tabulation ni de lecture d'écran dans le vide).
       Le « 0s 0.22s » masque seulement une fois le glissement terminé ; à l'ouverture
       (règle du dessous) l'affichage est immédiat, sans quoi le navigateur refuse d'y
       mettre le focus pendant les premières millisecondes. */
    visibility: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.22s;
  }
  body.panneau-ouvert #panneau {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
    box-shadow: var(--ombre-dialogue);
  }
  body.panneau-ouvert #voile { display: block; }
  #btnMenu { display: inline-flex; }

  /* L'en-tête tient sur une seule ligne : les sélecteurs défilent latéralement
     plutôt que de s'empiler sur trois rangs (un tiers de l'écran mangé). */
  #entete {
    gap: 6px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .selecteurs {
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;              /* la barre de défilement ne s'affiche pas */
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;      /* le glissement s'arrête sur un sélecteur */
    padding: 2px 0;                     /* laisse respirer le contour de focus */
    /* Le dernier sélecteur s'efface en fondu sur le bord : signal muet qu'il y a
       une suite à faire glisser, sans barre de défilement ni flèche. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  /* Dès qu'un sélecteur est atteint au clavier, le fondu s'efface : il estomperait
     sinon le contour de focus du dernier de la rangée. */
  .selecteurs:focus-within {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .selecteurs::-webkit-scrollbar { display: none; }

  /* Le coût passe en pleine largeur SOUS la ligne des sélecteurs — et disparaît
     complètement tant qu'il n'y a rien à afficher (pas de rang vide). */
  #coutConversation {
    order: 10;
    flex-basis: 100%;
    margin-left: 0;
    padding-top: 2px;
  }
  #coutConversation:empty { display: none; }

  /* Composeur ancré dans le flux : il ne peut plus recouvrir le dernier message,
     ni passer sous le clavier. La carte flottante reste l'allure du grand écran. */
  #zoneMessages {
    padding: 18px 14px 24px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  #composeur {
    position: static;
    background: var(--fond);
    border-top: 1px solid var(--bordure);
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    pointer-events: auto;
  }
}

/* Téléphone couché : la hauteur est la ressource rare, on comprime le vertical et on
   rend à la largeur ce qu'on prend au vertical (le coût et les boutons d'envoi
   remontent sur la ligne d'à côté, il y a la place).
   « min-width: 500px » est indispensable : sans lui, l'ouverture du clavier en mode
   portrait raccourcit l'écran sous 500 px et disloque l'en-tête d'un petit téléphone. */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 500px) {
  #entete { padding-top: 4px; padding-bottom: 4px; }
  #coutConversation {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
    padding-top: 0;
  }
  #zoneMessages { padding: 10px 14px 12px; gap: 16px; }
  #composeur { padding-top: 6px; }
  .note-saisie { display: none; }
  .dialogue-entete { padding-top: 8px; padding-bottom: 8px; }
}

/* Petit téléphone, clavier ouvert : il peut ne rester que ~230 px de haut. Priorité
   absolue à ce qu'on est en train de faire — écrire et envoyer. Le reste s'efface.
   La borne de largeur réserve ce régime au portrait : un téléphone couché a la place. */
@media (pointer: coarse) and (max-height: 400px) and (max-width: 500px) {
  #entete { padding-top: 4px; padding-bottom: 4px; }
  #coutConversation { display: none; }
  #zoneMessages { padding-top: 10px; padding-bottom: 12px; gap: 14px; }
  #composeur { padding-top: 6px; }
  .note-saisie { display: none; }
}