/* Écran « Comparer » : deux modèles répondent côte à côte à la même question.
   Réutilise les bulles (.message) et l'attente (.points-reflexion) de conversation.css. */

#dialogComparer { width: min(960px, 94vw); }

.comparer-intro {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--texte-doux);
  text-wrap: pretty;
}

.comparer-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comparer-camp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Même liste déroulante que dans l'en-tête (chevron maison, pas celui du système) :
   les deux écrans se regardent l'un l'autre, une flèche différente de chaque côté se
   voit tout de suite. */
.comparer-camp select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 8px 28px 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bordure-forte);
  background-color: var(--fond-panneau);
  background-image: var(--fleche-select);
  background-position: calc(100% - 15px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--texte);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
}
.comparer-camp select:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bordure-forte));
  box-shadow: var(--ombre);
}

/* Rayons concentriques : les bulles gardent leurs 14 px partout dans l'application, donc
   c'est le fil qui s'adapte — 14 plus les 8 px de retrait. */
.comparer-fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--bordure);
  border-radius: calc(var(--r-md) + 8px);
  background: var(--fond);
}

/* Dans une colonne, les bulles occupent toute la largeur disponible. */
.comparer-fil .message { font-size: 0.92rem; }
.comparer-fil .message.erreur { align-self: stretch; }

.comparer-fil .fil-vide {
  margin: auto;
  color: var(--texte-doux);
  font-size: 0.85rem;
  text-align: center;
  text-wrap: balance;
}

.comparer-saisie {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: stretch;
}

.comparer-saisie textarea {
  flex: 1;
  min-height: 52px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--bordure-forte);   /* même trait que les champs des Réglages */
  background: var(--fond-saisie);
  color: var(--texte);
  font: inherit;
  font-size: 0.95rem;
}

/* Le même halo que partout ailleurs. Avant : un contour de 2 px PLUS une bordure
   orange, soit deux traits concentriques autour du champ — l'œil voyait un défaut. */
.comparer-camp select:focus-visible,
.comparer-saisie textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--halo-focus);
}

/* Au doigt, choisir un modèle est la première action de cet écran : cible pleine. */
@media (pointer: coarse) {
  .comparer-camp select { min-height: 44px; }
}

/* Téléphone : les colonnes s'empilent, le bouton passe sous la saisie, et la zone de
   question reste collée en bas de la feuille — on peut relancer sans remonter. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 950px) and (pointer: coarse) {
  #dialogComparer { width: 100%; }
  .comparer-intro { margin-bottom: 12px; font-size: 0.82rem; }
  .comparer-colonnes { grid-template-columns: 1fr; gap: 10px; }
  .comparer-fil { min-height: 120px; max-height: 34dvh; }
  .comparer-saisie {
    position: sticky;
    bottom: 0;
    flex-direction: column;
    margin-top: 12px;
    padding: 10px 0 4px;
    background: var(--fond-panneau);
  }
  .comparer-saisie textarea { min-height: 60px; }
}

/* Petit écran : les deux colonnes + la question ne tiennent pas d'un coup. La question
   cesse alors de coller en bas — collée, elle masquait la seconde colonne tant qu'on
   n'avait pas défilé. On défile de quelques dizaines de pixels, mais rien n'est caché. */
@media (pointer: coarse) and (max-height: 620px) and (max-width: 950px) {
  .comparer-saisie { position: static; padding-top: 0; }
  .comparer-intro { margin-bottom: 10px; }
  .comparer-fil { min-height: 90px; max-height: 26dvh; }
}