/* EasyChat IA — widget front (v2 : avatar, suggestions, multi-bulles, responsive) */
#easychatia-widget { position: fixed; bottom: 20px; z-index: 99999; font-family: inherit; }
/* On masque la bulle quand le panier latéral est ouvert (sinon elle couvre "Commander") */
body.classicCartOpen #easychatia-widget { display: none !important; }
#easychatia-widget.easychatia-right { right: 20px; }
#easychatia-widget.easychatia-left  { left: 20px; }

/* ---- Launcher ---- */
#easychatia-launcher { position: relative; display: flex; align-items: center; gap: 12px; }
#easychatia-widget.easychatia-right #easychatia-launcher { flex-direction: row; }        /* étiquette à gauche de la bulle */
#easychatia-widget.easychatia-left  #easychatia-launcher { flex-direction: row-reverse; }

/* Étiquette permanente type "Une question ?" */
#easychatia-launcher-label {
  background: #fff; color: #1a1a1a; font-size: 14px; font-weight: 600; line-height: 1.2;
  padding: 11px 16px; border-radius: 24px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  white-space: nowrap; cursor: pointer; user-select: none; transition: transform .15s;
}
#easychatia-launcher-label:hover { transform: translateY(-1px); }
#easychatia-widget.easychatia-open #easychatia-launcher-label { display: none; }

#easychatia-toggle {
  width: 70px; height: 70px; border-radius: 50%; border: none; color: #fff;
  cursor: pointer; padding: 0; overflow: hidden; flex: 0 0 auto;
  position: relative; transition: transform .15s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  animation: easychatia-pulse 2.4s infinite;
}
#easychatia-toggle:hover { transform: scale(1.06); }
#easychatia-widget.easychatia-open #easychatia-toggle { animation: none; }
@keyframes easychatia-pulse {
  0%   { box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(0,0,0,.25); }
  70%  { box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 16px rgba(0,0,0,0); }
  100% { box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(0,0,0,0); }
}
.easychatia-launcher-avatar { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 50%; }
#easychatia-toggle .easychatia-icon-close { display: none; font-size: 26px; line-height: 1; }
#easychatia-widget.easychatia-open .easychatia-launcher-avatar { display: none; }
#easychatia-widget.easychatia-open #easychatia-toggle .easychatia-icon-close { display: block; }

#easychatia-badge {
  display: none; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
  background: #2ecc71; border: 2px solid #fff; border-radius: 50%;
}
#easychatia-badge.on { display: block; }

/* ---- Teaser proactif ---- */
#easychatia-teaser {
  display: none; position: absolute; bottom: 10px; width: 220px; padding: 10px 14px;
  border: none; text-align: left; font-family: inherit;
  background: #fff; color: #222; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: 13px; line-height: 1.4; cursor: pointer; animation: easychatia-pop .25s ease;
}
#easychatia-widget.easychatia-right #easychatia-teaser { right: 78px; }
#easychatia-widget.easychatia-left  #easychatia-teaser { left: 78px; }
#easychatia-teaser.on { display: block; }
@keyframes easychatia-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Panneau ---- */
#easychatia-panel {
  display: none; flex-direction: column; position: absolute; bottom: 80px;
  width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
#easychatia-widget.easychatia-right #easychatia-panel { right: 0; }
#easychatia-widget.easychatia-left  #easychatia-panel { left: 0; }
#easychatia-widget.easychatia-open #easychatia-panel { display: flex; animation: easychatia-pop .2s ease; }

/* ---- Header ---- */
#easychatia-header { color: #fff; padding: 10px 14px; display: flex !important; align-items: center; gap: 10px; }
#easychatia-header .easychatia-avatar { width: 38px !important; height: 38px !important; min-width: 38px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid rgba(255,255,255,.5); background: #fff; padding: 0; margin: 0; }
.easychatia-header-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.easychatia-name { font-weight: 700; font-size: 15px; }
.easychatia-status { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.easychatia-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; display: inline-block; }
#easychatia-close { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .85; padding: 4px; }
#easychatia-close:hover { opacity: 1; }

/* ---- Messages ---- */
#easychatia-messages {
  flex: 1; overflow-y: auto; padding: 14px; background: #f5f6f8;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45;
}
.easychatia-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.easychatia-row.user { justify-content: flex-end; }
.easychatia-row-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.easychatia-row-avatar.easychatia-avatar-spacer { visibility: hidden; }
.easychatia-msg { padding: 9px 13px; border-radius: 16px; word-wrap: break-word; overflow-wrap: anywhere; max-width: 78%; }
.easychatia-row.user .easychatia-msg { background: #e2001a; color: #fff; border-bottom-right-radius: 5px; }
.easychatia-row.bot .easychatia-msg { background: #fff; color: #222; border: 1px solid #e7e7e7; border-bottom-left-radius: 5px; }
.easychatia-row.bot .easychatia-msg a { color: #e2001a; text-decoration: underline; }

/* ---- Indicateur de frappe ---- */
.easychatia-typing-bubble { padding: 11px 14px; }
.easychatia-typing-bubble span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; background: #bbb; border-radius: 50%; animation: easychatia-blink 1.2s infinite both; }
.easychatia-typing-bubble span:nth-child(2) { animation-delay: .2s; }
.easychatia-typing-bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes easychatia-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---- Suggestions rapides ---- */
#easychatia-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 8px; background: #f5f6f8; }
#easychatia-suggestions:empty { display: none; }
.easychatia-chip {
  background: #fff; border: 1px solid #d9d9d9; color: #333; border-radius: 18px;
  padding: 7px 13px; font-size: 13px; cursor: pointer; transition: all .12s; line-height: 1.2;
}
.easychatia-chip:hover { border-color: #e2001a; color: #e2001a; }

/* ---- Bas ---- */
#easychatia-rgpd { font-size: 10px; color: #999; padding: 4px 14px; background: #f5f6f8; }
#easychatia-form { display: flex; border-top: 1px solid #ececec; background: #fff; }
#easychatia-input { flex: 1; border: none; padding: 13px; font-size: 14px; outline: none; background: transparent; }
#easychatia-send { border: none; color: #fff; width: 50px; font-size: 16px; cursor: pointer; }

/* ---- Mobile : plein écran pour une vraie UX ---- */
@media (max-width: 767px) {
  #easychatia-widget.easychatia-right { right: 16px; left: auto; }
  #easychatia-widget.easychatia-left  { left: 16px; right: auto; }
  #easychatia-widget { bottom: 16px; }

  /* Panneau plein écran à l'ouverture (offsets explicites = compatible vieux Safari iOS) */
  #easychatia-widget.easychatia-open #easychatia-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; max-width: 100vw;
    height: 100vh;            /* fallback */
    height: 100dvh;           /* gère la barre d'URL + clavier mobile */
    max-height: none;
    border-radius: 0;
    z-index: 100000;
  }
  /* La croix de l'en-tête ferme le panneau sans recouvrir le bouton Envoyer. */
  #easychatia-widget.easychatia-open #easychatia-launcher { display: none; }
  #easychatia-form { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #easychatia-widget.easychatia-open #easychatia-teaser { display: none !important; }

  /* Croix de l'en-tête : grosse cible tactile, bien visible */
  #easychatia-close { font-size: 26px; padding: 6px 10px; line-height: 1; }

  #easychatia-header { padding: 14px; padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  #easychatia-messages { -webkit-overflow-scrolling: touch; }
  /* 16px = empêche le zoom automatique d'iOS au focus du champ */
  #easychatia-input { font-size: 16px; padding: 14px; }
  #easychatia-teaser { width: 60vw; max-width: 240px; }
}

/* Etat accessible, indépendant des classes génériques du thème. */
#easychatia-widget [hidden] { display: none !important; }
body.easychatia-modal-open { overflow: hidden; }
#easychatia-widget button:focus-visible, #easychatia-widget a:focus-visible,
#easychatia-input:focus-visible { outline: 2px solid #003845; outline-offset: 2px; }
#easychatia-send:disabled { opacity: .55; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  #easychatia-widget *, #easychatia-widget *::before, #easychatia-widget *::after {
    animation: none !important; transition: none !important;
  }
}