.wa-bubble {
  position: fixed;
  bottom: var(--wa-bottom, 20px);
  left: var(--wa-left, 20px);
  right: var(--wa-right, auto);
  width: var(--wa-size, 56px);
  height: var(--wa-size, 56px);
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
  pointer-events: none;
}

.wa-side-left { left: var(--wa-left, 20px); right: auto; }
.wa-side-right { right: var(--wa-right, 20px); left: auto; }

.wa-bubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.wa-bubble:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

.wa-bubble svg {
  width: calc(var(--wa-size, 56px) * 0.95);
  height: calc(var(--wa-size, 56px) * 0.95);
}

.wa-bubble img {
  width: calc(var(--wa-size, 56px) * 0.95);
  height: calc(var(--wa-size, 56px) * 0.95);
  display: block;
}

@media (max-width: 600px) {
  .wa-bubble {
    bottom: var(--wa-bottom, 16px);
  }
}