:root {
  --primary: #FF2D6B;
  --secondary: #9C27B0;
  --dark: #1A1A1A;
  --light: #FFFFFF;
}

body {
  font-family: 'Gilroy', sans-serif;
  background-color: var(--dark);
  color: var(--light);
}

.chat-container {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
  border: 1px solid rgba(156, 39, 176, 0.3);
  box-shadow: 0 0 30px rgba(255, 45, 107, 0.2);
}

.message-ai {
  background: linear-gradient(90deg, rgba(156, 39, 176, 0.15) 0%, rgba(255, 45, 107, 0.15) 100%);
  border-left: 3px solid var(--primary);
}

.message-user {
  background: rgba(255, 255, 255, 0.1);
  border-right: 3px solid var(--secondary);
}

.input-field {
  background: rgba(26, 26, 26, 0.7);
  border: 1px solid rgba(156, 39, 176, 0.5);
}

.input-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 45, 107, 0.3);
}

.send-btn {background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);}
.send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 45, 107, 0.4);
}

.typing-indicator span {
  background-color: var(--primary);
  animation: bounce 1.5s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {animation-delay: 0.2s;}
.typing-indicator span:nth-child(3) {animation-delay: 0.4s;}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.pulse {animation: pulse 2s infinite;}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 107, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 45, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 107, 0); }
}

.glow-text {text-shadow: 0 0 10px rgba(255, 45, 107, 0.7);}
.neon-border {position: relative;}
.neon-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
  z-index: -1;
  border-radius: inherit;
  opacity: 0.7;
}