:root{
  --waGreen: #25D366;
  --waBg: rgba(10,12,16,.96);
  --waCard: rgba(16,18,24,.92);
  --waText: rgba(255,255,255,.94);
  --waMuted: rgba(255,255,255,.70);
}

.wa-widget{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  font-family: "Inter", sans-serif;
  pointer-events: auto; /* Important */
}

.wa-widget *{ box-sizing: border-box; }

.wa-launcher{
  display:flex;
  align-items:center;
  gap: 12px;
  justify-content: flex-end; /* Aligne tout à droite */
}

/* --- BULLE (PROMPT) MODIFIÉE --- */
.wa-prompt{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(37,211,102,.18);
  border: 1px solid rgba(37,211,102,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  
  /* État initial : Invisible et décalé */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet rebond */
  pointer-events: none; /* Ne pas bloquer les clics quand invisible */
}

/* État affiché via JS */
.wa-prompt.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-prompt-btn{
  border:0;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor:pointer;
  white-space: nowrap;
}

.wa-prompt-close{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.3);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  margin-left: 4px;
}
.wa-prompt-close:hover{ background: rgba(0,0,0,.6); }


/* --- BOUTON ROND (FAB) --- */
.wa-fab{
  width: 60px;
  height: 60px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 10px 40px rgba(37,211,102,.4);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .2s ease;
  position: relative;
  z-index: 2;
}
.wa-fab:hover{ transform: scale(1.05); }
.wa-fab i{ font-size: 30px; color: #fff; }

/* Point vert notification */
.wa-fab::after{
  content:"";
  position:absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: red;
  border: 2px solid #fff;
}

/* --- POPUP --- */
.wa-popup{
  position: absolute;
  right: 0;
  bottom: 80px;
  width: 350px;
  border-radius: 20px;
  background: var(--waCard);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 80px rgba(0,0,0,.8);
  overflow:hidden;
  
  /* Animation Popup */
  transform-origin: bottom right;
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.wa-widget.open .wa-popup{
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Header Popup */
.wa-head{
  padding: 16px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display:flex; justify-content:space-between; align-items:start;
}
.wa-head-left{ display:flex; gap:10px; color:#fff; }
.wa-dot{ width:10px; height:10px; background:#fff; border-radius:50%; margin-top:6px; }
.wa-head-title{ font-weight:800; font-size:1.1rem; }
.wa-head-sub{ font-size:0.85rem; opacity:0.9; }
.wa-close{ background:rgba(255,255,255,0.2); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:18px; }

/* Body Popup */
.wa-body{ padding: 20px; background: var(--waBg); }
.wa-profile{ display:flex; gap:12px; align-items:center; background:rgba(255,255,255,0.05); padding:10px; border-radius:12px; }
.wa-avatar{ width:50px; height:50px; position:relative; border-radius:50%; }
.wa-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.wa-badge{ position:absolute; bottom:-5px; right:-5px; background:#000; color:#25D366; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:10px; border:2px solid #25D366; }
.wa-name{ color:#fff; font-weight:700; }
.wa-role{ color:var(--waMuted); font-size:0.8rem; }

.wa-msg{ background:rgba(37,211,102,0.1); color:#fff; padding:12px; border-radius:12px; margin-top:14px; border:1px solid rgba(37,211,102,0.3); }

.wa-actions{ margin-top:16px; display:flex; gap:10px; }
.wa-cta{ flex:1; background:#25D366; color:#000; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:10px; font-weight:800; transition:0.2s; }
.wa-cta:hover{ filter:brightness(1.1); }
.wa-copy{ flex:1; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:10px; cursor:pointer; font-weight:600; }
.wa-copy:hover{ background:rgba(255,255,255,0.2); }

.wa-small{ text-align:center; color:rgba(255,255,255,0.4); font-size:0.75rem; margin-top:12px; }

@media (max-width: 500px){
  .wa-widget{ right:10px; bottom:10px; }
  .wa-popup{ width: calc(100vw - 20px); }
  .wa-prompt{ display:none; } /* Masquer bulle sur mobile */
}