.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: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-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;
}