.rcn-modal{opacity:0;transform:translateY(10px);transition:all .3s ease}.rcn-modal.show{opacity:1;transform:translateY(0)}

/* Floating WhatsApp Button - Circular with Animation */
.rcn-floating-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4) !important;
  transition: all 0.3s ease;
}

.rcn-floating-btn.bounce {
  animation: rcn-bounce 2s infinite;
}

.rcn-floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(25, 135, 84, 0.6) !important;
  animation-play-state: paused;
}

.rcn-floating-btn:hover i {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.rcn-floating-btn i {
  font-size: 24px !important;
}

/* Bounce Animation */
@keyframes rcn-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Pulse Animation */
@keyframes rcn-pulse {
  0% {
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
  }
  50% {
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.8), 0 0 0 10px rgba(25, 135, 84, 0.1);
  }
  100% {
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
  }
}

/* Rotate Animation */
@keyframes rcn-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Rotate with Bounce Animation */
@keyframes rcn-rotate-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-5px) rotate(36deg);
  }
  20% {
    transform: translateY(0) rotate(72deg);
  }
  30% {
    transform: translateY(-8px) rotate(108deg);
  }
  40% {
    transform: translateY(-10px) rotate(144deg);
  }
  50% {
    transform: translateY(-5px) rotate(180deg);
  }
  60% {
    transform: translateY(-8px) rotate(216deg);
  }
  70% {
    transform: translateY(0) rotate(252deg);
  }
  80% {
    transform: translateY(-5px) rotate(288deg);
  }
  90% {
    transform: translateY(0) rotate(324deg);
  }
}

/* Rotate with Pulse Animation */
@keyframes rcn-rotate-pulse {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
  }
  25% {
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.6), 0 0 0 5px rgba(25, 135, 84, 0.1);
  }
  50% {
    transform: rotate(180deg);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.8), 0 0 0 10px rgba(25, 135, 84, 0.1);
  }
  75% {
    transform: rotate(270deg);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.6), 0 0 0 5px rgba(25, 135, 84, 0.1);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
  }
}

/* Animation Classes */
.rcn-floating-btn.bounce {
  animation: rcn-bounce 2s infinite;
}

.rcn-floating-btn.pulse {
  animation: rcn-pulse 2s infinite;
}

.rcn-floating-btn.rotate {
  animation: rcn-rotate 3s linear infinite;
}

.rcn-floating-btn.rotate-bounce {
  animation: rcn-rotate-bounce 4s ease-in-out infinite;
}

.rcn-floating-btn.rotate-pulse {
  animation: rcn-rotate-pulse 3s ease-in-out infinite;
}

/* Loading animation when sending data */
.rcn-floating-btn.loading {
  animation: rcn-rotate 1s linear infinite;
  opacity: 0.8;
}

.rcn-floating-btn.loading i {
  animation: rcn-rotate 0.5s linear infinite reverse;
}

/* Chat button validation styling */
#rcn-chat:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

#rcn-chat.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
}

#rcn-chat.btn-secondary:hover:not(:disabled) {
  background-color: #5a6268;
  border-color: #545b62;
}

/* Form field validation styling */
.form-control:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control:valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control:focus:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control:focus:valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Status message styling */
#rcn-status {
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
}

#rcn-status.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

#rcn-status.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}