/* Popup Bubble Styles */
.popup-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 280px;
  background: linear-gradient(135deg, #ffc857, #47c7a8, #50a0ff);
  background-size: 200% 200%;
  color: #141923;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Show with bounce + float + gradient animation */
.popup-bubble.show {
  opacity: 1;
  pointer-events: auto;
  animation: popupBounceIn 0.8s ease forwards,
             popupFloat 3s ease-in-out infinite,
             gradientShift 6s ease infinite;
}

/* Hide animation */
.popup-bubble.hide {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

/* Bounce-in keyframes */
@keyframes popupBounceIn {
  0% { transform: translateY(30px) scale(0.8); opacity: 0; }
  60% { transform: translateY(-10px) scale(1.05); opacity: 1; }
  80% { transform: translateY(5px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* Gentle floating while visible */
@keyframes popupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Subtle gradient shift */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pointer / tail animation */
.popup-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 25px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ffc857 transparent transparent transparent;
  animation: tailBounce 0.8s ease;
}

/* Bounce tail */
@keyframes tailBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Hover interactivity */
.popup-bubble:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  cursor: pointer;
}

/* Emoji pulse animation */
.popup-bubble span.emoji {
  display: inline-block;
  animation: emojiPop 1.2s ease-in-out infinite;
}

@keyframes emojiPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(-10deg); }
}