/* Charte Wooly : turquoise #6FD1D0, magenta #E4177E, cartes blanches arrondies. */
/* Haut a gauche, SOUS l'en-tete collant (demande de Marcelo, 14/09/2026 : « plus visible »).
   `--wa-top` est pose par le script d'apres le bas reel de l'en-tete : pose a top:0, la bulle
   couvrirait le menu hamburger sur telephone et le numero de la boutique sur ordinateur.
   9rem = repli tant que le script n'a pas tourne. */
#wa-bulle { position: fixed; left: 1rem; top: var(--wa-top, 9rem); z-index: 9999; font-family: "Quicksand", system-ui, sans-serif; }
#wa-bulle .wa-ouvrir { background: #E4177E; color: #fff; border: 0; border-radius: 2rem; padding: .75rem 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
#wa-bulle .wa-panneau { width: min(22rem, calc(100vw - 2rem)); background: #fff; border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,.22); overflow: hidden; display: flex; flex-direction: column; max-height: min(30rem, calc(100vh - var(--wa-top, 9rem) - 1rem)); }
#wa-bulle .wa-entete { background: #6FD1D0; color: #123; font-weight: 700; padding: .6rem .9rem; display: flex; justify-content: space-between; align-items: center; }
#wa-bulle .wa-fermer { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #123; }
#wa-bulle .wa-fil { flex: 1 1 auto; overflow-y: auto; padding: .75rem; margin: 0; }
#wa-bulle .wa-msg { margin: 0 0 .5rem; padding: .5rem .7rem; border-radius: .75rem; max-width: 85%; white-space: pre-wrap; }
#wa-bulle .wa-assistant { background: #F1FAFA; }
#wa-bulle .wa-client { background: #FDE6F1; margin-left: auto; }
#wa-bulle .wa-forme { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid #eee; }
#wa-bulle .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#wa-bulle .wa-champ { flex: 1 1 auto; min-width: 0; border: 1px solid #ccc; border-radius: .6rem; padding: .45rem .6rem; }
#wa-bulle .wa-envoyer { background: #E4177E; color: #fff; border: 0; border-radius: .6rem; padding: .45rem .8rem; cursor: pointer; }
#wa-bulle .wa-envoyer[disabled] { opacity: .5; cursor: default; }

/* Panneau ouvert : le lanceur s'efface, sinon il se pose sur la page. */
#wa-bulle.wa-ouvert .wa-ouvrir { display: none; }
/* Sous 480 px, le panneau prend la largeur utile, sous l'en-tete. */
@media (max-width: 480px) {
  /* Fermee, la bulle ne fait que la largeur du bouton : etiree sur tout l'ecran,
     son cadre invisible avalerait les clics sur le haut de page. */
  #wa-bulle { left: .5rem; }
  #wa-bulle.wa-ouvert { right: .5rem; }
  #wa-bulle .wa-panneau { width: 100%; max-height: calc(100vh - var(--wa-top, 9rem) - .5rem); }
}