.wa-buddy{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-tip{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;
  padding:9px 14px;border-radius:12px;white-space:nowrap;opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease}
.wa-buddy:not(.open):hover .wa-tip,.wa-buddy.peek .wa-tip{opacity:1;transform:translateY(0)}
.wa-buddy.open .wa-tip{opacity:0!important}

.wa-panel{position:absolute;right:0;bottom:70px;width:270px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;
  transform-origin:bottom right;transition:opacity .25s ease,transform .25s ease}
.wa-buddy.open .wa-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.wa-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.wa-mini{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;gap:3px;
  background:linear-gradient(135deg,var(--violet-bright),var(--violet))}
.wa-mini i{width:4px;height:4px;border-radius:50%;background:#fff;display:block}
.wa-panel-head b{font-size:13px;font-weight:700;color:var(--ink);flex:1}
.wa-close{background:none;border:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:2px 4px;transition:color .2s}
.wa-close:hover{color:var(--ink)}
.wa-greet{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.wa-quick{display:flex;flex-direction:column;gap:8px}
.wa-qbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  transition:border-color .2s,background .2s}
.wa-qbtn:hover{border-color:var(--violet-bright);background:rgba(139,108,255,.08)}
.wa-qbtn::after{content:'↗';color:var(--violet-bright);font-size:13px;flex:none}

.wa-bubble{position:relative;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:linear-gradient(135deg,var(--violet-bright),var(--violet));
  box-shadow:0 10px 30px rgba(91,61,245,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  display:flex;align-items:center;justify-content:center;
  animation:waFloat 3.6s ease-in-out infinite;transition:transform .25s}
.wa-bubble:hover{transform:scale(1.06)}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wa-face{display:flex;flex-direction:column;align-items:center;gap:4px}
.wa-eyes{display:flex;gap:9px}
.wa-eye{width:12px;height:12px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wa-eye i{width:5.5px;height:5.5px;border-radius:50%;background:#141224;display:block;transform:translate(var(--ex,0),var(--ey,0))}
.wa-mouth{width:12px;height:5px;border-radius:0 0 12px 12px;border-bottom:2.2px solid #fff;border-left:none;border-right:none;
  transform-origin:center top}
.wa-buddy.peek .wa-mouth,.wa-buddy:not(.open):hover .wa-mouth{animation:waTalk 1.4s ease-in-out infinite}
@keyframes waTalk{0%,100%{height:5px}28%{height:2px}52%{height:8px}76%{height:3px}}
.wa-badge{position:absolute;top:1px;right:1px;width:12px;height:12px;border-radius:50%;background:var(--ok);
  border:2px solid var(--bg);animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 8px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

@media(max-width:540px){
  .wa-buddy{right:14px;bottom:14px}
  .wa-panel{width:calc(100vw - 28px);max-width:300px}
}

/* prueba temporal: el punto verde animado se sospecha causante del overflow en móvil (Opera) */
@media(max-width:860px){
  .wa-badge{display:none}
}