/* ==========================================================================
   SWRAJYA (SENA) AI Business Discovery Experience
   Animations & Transitions
   ========================================================================== */

/* Message Bubble Slide Up */
/* Message Bubble Slide Up */
@-webkit-keyframes bubbleSlideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(12px) scale(0.98);
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes bubbleSlideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(12px) scale(0.98);
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

.msg-row {
  opacity: 0;
  -webkit-animation: bubbleSlideUp var(--transition-normal) forwards;
  animation: bubbleSlideUp var(--transition-normal) forwards;
}

/* WhatsApp Typing Indicator 3-Dot Bounce */
@-webkit-keyframes typingBounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 1;
    background-color: var(--color-trust-green);
  }
}

@keyframes typingBounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 1;
    background-color: var(--color-trust-green);
  }
}

.typing-dot {
  width: 7px;
  height: 7px;
  background-color: #8696A0;
  border-radius: 50%;
  -webkit-animation: typingBounce 1.4s infinite ease-in-out both;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.typing-dot:nth-child(2) { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
.typing-dot:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s; }

/* Header Online Indicator Pulse */
@-webkit-keyframes pulseOnline {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulseOnline {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.online-badge {
  -webkit-animation: pulseOnline 2s infinite;
  animation: pulseOnline 2s infinite;
}

/* Modal Pop & Scale Entry */
@-webkit-keyframes modalPop {
  from {
    opacity: 0;
    -webkit-transform: scale(0.92) translateY(10px);
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}

@keyframes modalPop {
  from {
    opacity: 0;
    -webkit-transform: scale(0.92) translateY(10px);
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}

.modal-content-pop {
  -webkit-animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Progress Fill Transition */
.progress-fill {
  -webkit-transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Micro-Interactions */
.touch-card {
  -webkit-transition: -webkit-transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .touch-card:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: var(--color-trust-green);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
  }
}

.touch-card:active {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}