/* ==========================================================================
   In Pulse - pages/echanges.css
   Q&A multi-canal centralisé. Feuille PARTAGÉE par la vue dirigeant
   (app/echanges.html) et la vue Expert (cercle/questions.html).
   Dépend de tokens.css, base.css, components.css, pages/app.css.
   Aucune couleur en dur : tout passe par les tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Badges de canal (variante de .badge, adossée aux tokens d'état)
      Application = info · Email = or · WhatsApp = succès · Téléphone = attention
      · SMS = neutre. Cinq familles distinctes, toutes en tokens (AA clair/sombre).
   -------------------------------------------------------------------------- */
.canal {
  letter-spacing: 0.01em;
}

.canal--application {
  background-color: var(--couleur-info-fond);
  color: var(--couleur-info);
  border-color: transparent;
}

.canal--email {
  background-color: var(--couleur-accent-fond);
  color: var(--couleur-accent-texte);
  border-color: transparent;
}

.canal--whatsapp {
  background-color: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  border-color: transparent;
}

.canal--telephone {
  background-color: var(--couleur-attention-fond);
  color: var(--couleur-attention);
  border-color: transparent;
}

.canal--sms {
  background-color: var(--couleur-fond-2);
  color: var(--couleur-texte-secondaire);
  border-color: var(--couleur-filet);
}

/* --------------------------------------------------------------------------
   2. En-tête et haut de page (composer + encart pédagogique)
   -------------------------------------------------------------------------- */
.echanges-entete__intro {
  margin-top: var(--espace-xs);
}

.echanges-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--rythme-bloc);
  align-items: start;
}

.echanges-composer__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
  margin-top: var(--espace-xs);
}

.echanges-composer__pied .texte-discret {
  font-size: var(--taille-xs);
}

/* Aperçu des experts convoqués (routage domaine → panel) */
.echanges-routage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  padding: var(--espace-sm) var(--espace-md);
  background-color: var(--couleur-accent-fond);
  border-radius: var(--rayon-sm);
}

.echanges-routage:empty {
  display: none;
}

.echanges-routage__texte {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.echanges-aide .liste-tags {
  margin-top: var(--espace-md);
}

/* Confirmation après envoi (décalquée d'alertes-confirmation) */
.echanges-confirmation {
  display: grid;
  gap: var(--espace-md);
  justify-items: start;
}

.echanges-confirmation[hidden] {
  display: none;
}

.echanges-confirmation__icone {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--couleur-succes);
  background-color: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}

.echanges-confirmation__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.echanges-confirmation__titre {
  font-size: var(--taille-xl);
}

/* --------------------------------------------------------------------------
   3. Liste des fils
   -------------------------------------------------------------------------- */
.echanges-fils {
  display: grid;
  gap: var(--espace-md);
}

/* Un fil = une carte dépliable (<details>) */
.fil {
  padding: 0;
}

.fil__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-md);
  padding: var(--espace-lg);
  cursor: pointer;
  list-style: none;
}

.fil__entete::-webkit-details-marker {
  display: none;
}

.fil__titre-zone {
  display: grid;
  gap: var(--espace-xs);
  min-width: 0;
}

.fil__sujet {
  font-size: var(--taille-lg);
}

.fil__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs) var(--espace-sm);
}

.fil__client {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin: 0;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.fil__client .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--taille-xs);
}

.fil__chevron {
  flex-shrink: 0;
  color: var(--couleur-texte-secondaire);
  transition: transform var(--duree-rapide) var(--courbe-standard);
}

.fil[open] .fil__chevron {
  transform: rotate(180deg);
}

.fil__corps {
  padding: 0 var(--espace-lg) var(--espace-lg);
  border-top: 1px solid var(--couleur-filet);
}

/* --------------------------------------------------------------------------
   4. Messages du fil (bulles)
   -------------------------------------------------------------------------- */
.fil-messages {
  list-style: none;
  padding: 0;
  margin-top: var(--espace-lg);
  display: grid;
  gap: var(--espace-md);
}

.message {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
}

.message__bulle {
  flex: 1;
  min-width: 0;
  padding: var(--espace-sm) var(--espace-md);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-fond-2);
}

/* Le dirigeant se distingue par un voile or ; les experts restent neutres. */
.message--dirigeant .message__bulle {
  background-color: var(--couleur-accent-fond);
  border-color: transparent;
}

.message__entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.message__auteur {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.message__date {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

.message__texte {
  margin-top: var(--espace-xs);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
  line-height: var(--interligne-normal);
}

/* --------------------------------------------------------------------------
   5. Formulaire de réponse (côté Expert)
   -------------------------------------------------------------------------- */
.fil-reponse {
  margin-top: var(--espace-md);
  padding-top: var(--espace-md);
  border-top: 1px dashed var(--couleur-filet);
  display: grid;
  gap: var(--espace-xs);
}

.fil-reponse textarea {
  min-height: 4.5rem;
}

.fil-reponse__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm);
}

.fil-reponse__canal {
  min-width: 12rem;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .echanges-haut {
    grid-template-columns: 1fr;
  }
}