/* =============================================================================
   AZALPLUS — Marceau sur le site public
   =============================================================================
   Variables du thème uniquement, aucune valeur en dur (AZA-CSS-001). Les
   secours après la virgule servent aux pages publiques, qui ne chargent pas
   toujours la feuille de variables complète.
   ========================================================================== */

.azal-mp {
  position: fixed;
  right: var(--space-4, 1rem);
  bottom: var(--space-4, 1rem);
  z-index: 9998;
  font-family: inherit;
}

/* --- Le bouton fermé -------------------------------------------------- */
.azal-mp-bouton {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--azalplus-primary, #3454d1);
  color: #fff;
  border: 0;
  border-radius: var(--radius-full, 2rem);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
  cursor: pointer;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
}

.azal-mp-bouton:hover { filter: brightness(1.08); }
.azal-mp-bouton:focus-visible {
  outline: 2px solid var(--azalplus-primary, #3454d1);
  outline-offset: 2px;
}

/* --- Le panneau ouvert ------------------------------------------------- */

/* Le `display: flex` ci-dessous écrase l'attribut HTML `hidden`, dont la règle
   par défaut (`display: none`) a une spécificité plus faible. Sans ces deux
   lignes, le panneau s'affiche OUVERT dès le chargement de la page, vide, et
   le bouton d'appel reste visible derrière. Constaté au premier essai dans un
   vrai navigateur — l'API, elle, répondait parfaitement. */
.azal-mp-panneau[hidden],
.azal-mp-bouton[hidden] { display: none !important; }

.azal-mp-panneau {
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2rem));
  height: min(28rem, calc(100vh - 6rem));
  background: var(--azalplus-surface, #fff);
  color: var(--azalplus-text, #1a1a1a);
  border: 1px solid var(--azalplus-border, #e2e5ea);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.18));
  overflow: hidden;
}

.azal-mp-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--azalplus-primary, #3454d1);
  color: #fff;
}

.azal-mp-fermer {
  background: none;
  border: 0;
  color: inherit;
  font-size: var(--font-size-lg, 1.25rem);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1, 0.25rem);
}

.azal-mp-corps {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* --- Les messages ------------------------------------------------------ */
.azal-mp-message {
  max-width: 85%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-sm, 0.9rem);
  line-height: 1.5;
  white-space: pre-wrap;      /* le modèle renvoie des paragraphes */
  word-break: break-word;
}

.azal-mp-marceau {
  align-self: flex-start;
  background: var(--azalplus-surface-alt, #f4f6fa);
  color: var(--azalplus-text, #1a1a1a);
}

.azal-mp-visiteur {
  align-self: flex-end;
  background: var(--azalplus-primary, #3454d1);
  color: #fff;
}

/* --- La saisie --------------------------------------------------------- */
.azal-mp-pied {
  display: flex;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  border-top: 1px solid var(--azalplus-border, #e2e5ea);
}

.azal-mp-saisie {
  flex: 1;
  min-width: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--azalplus-border, #e2e5ea);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--azalplus-surface, #fff);
  color: var(--azalplus-text, #1a1a1a);
  font: inherit;
  font-size: var(--font-size-sm, 0.9rem);
}

.azal-mp-saisie:focus-visible {
  outline: 2px solid var(--azalplus-primary, #3454d1);
  outline-offset: -1px;
}

.azal-mp-envoi {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--azalplus-primary, #3454d1);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
}

.azal-mp-envoi:disabled { opacity: 0.6; cursor: default; }

/* Sur un téléphone, le panneau prend la largeur : une bulle de 22 rem sur un
   écran de 20 rem déborde et pousse la page. */
@media (max-width: 30rem) {
  .azal-mp { right: var(--space-2, 0.5rem); bottom: var(--space-2, 0.5rem); left: var(--space-2, 0.5rem); }
  .azal-mp-panneau { width: 100%; height: min(24rem, calc(100vh - 5rem)); }
  .azal-mp-bouton { margin-left: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .azal-mp-panneau { animation: azal-mp-apparition 0.18s ease-out; }
  @keyframes azal-mp-apparition {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* --- Ecouter la reponse ------------------------------------------------ */
/* Discret : on propose, on n'impose pas. Rien ne se lit tout seul. */
.azal-mp-ecouter {
  display: block;
  margin-top: var(--space-2, 0.5rem);
  padding: 0;
  background: none;
  border: 0;
  color: var(--azalplus-primary, #3454d1);
  font: inherit;
  font-size: var(--font-size-xs, 0.8rem);
  cursor: pointer;
  opacity: 0.85;
}

.azal-mp-ecouter:hover { opacity: 1; text-decoration: underline; }
.azal-mp-ecouter:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.azal-mp-ecouter:focus-visible {
  outline: 2px solid var(--azalplus-primary, #3454d1);
  outline-offset: 2px;
}

/* --- Le micro ----------------------------------------------------------- */
/* Ne s'active qu'au clic : un site qui ecoute en permanence est intrusif. */
.azal-mp-micro {
  flex: 0 0 auto;
  width: 2.4rem;
  padding: var(--space-2, 0.5rem);
  background: var(--azalplus-surface-alt, #f4f6fa);
  color: var(--azalplus-text, #1a1a1a);
  border: 1px solid var(--azalplus-border, #e2e5ea);
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.9rem);
  line-height: 1;
}

.azal-mp-micro:hover { border-color: var(--azalplus-primary, #3454d1); }
.azal-mp-micro:focus-visible {
  outline: 2px solid var(--azalplus-primary, #3454d1);
  outline-offset: 2px;
}

/* Pendant l'enregistrement : rouge et pulsant, pour qu'on sache qu'on est
   ecoute. Un micro ouvert sans signal visible est inacceptable. */
.azal-mp-micro-actif {
  background: var(--azalplus-danger, #d64545);
  border-color: var(--azalplus-danger, #d64545);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .azal-mp-micro-actif { animation: azal-mp-pulse 1.2s ease-in-out infinite; }
  @keyframes azal-mp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
}