/* ----------  BOTÓN  ---------- */
.wa-btn{
  --wa-green: #25D366;
  --wa-dark : #128C7E;
  position:fixed;
  width:56px;
  height:56px;
  right:20px;
  bottom:20px;
  background:var(--wa-green);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999; /* Increased z-index to ensure visibility */
  transition:transform .25s, background .25s;
}
.wa-btn:hover{ transform:scale(1.08); background:var(--wa-dark); }

.wa-btn__icon{
  width:30px;
  height:30px;
  fill:#fff;
}

/* ----------  CONTENEDOR BURBUJAS  ---------- */
.wa-bubbles{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  width:220px;
  pointer-events:none;
  z-index:9998; /* Ensure bubbles appear above other elements */
}

/* ----------  BURBUJA  ---------- */
.wa-bubble{
  background:#fff;
  color:#262626;
  font-size:14px;
  line-height:1.3;
  padding:8px 12px;
  margin-bottom:6px;
  border-radius:8px 0 8px 8px; /* esquina izq. cuadrada → parece WhatsApp */
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  opacity:0;
  transform:scale(.85) translateY(10px);
  transform-origin:bottom right;
  transition:opacity .28s ease, transform .28s ease;
}
.wa-bubble.in{
  opacity:1;
  transform:scale(1) translateY(0);
}
.wa-bubble.out{
  opacity:0;
  transform:scale(.85) translateY(-5px);
}

/* flecha */
.wa-bubble::after{
  content:'';
  position:absolute;
  bottom:-6px;
  right:0;
  width:0; height:0;
  border:6px solid transparent;
  border-top-color:#fff;
}

/* ----------  MÓVIL  ---------- */
@media(max-width:480px){
  .wa-btn{ right:12px; bottom:12px; width:60px; height:60px; }
  .wa-btn__icon{ width:32px; height:32px; }
  .wa-bubbles{ width:180px; }
  .wa-bubble{ font-size:13px; padding:6px 10px; }
}