@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

/* Animations personnalisées */
.wallet-card {
  transition: all 0.3s ease-in-out;
}

.wallet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#solde {
  transition: transform 0.2s ease-in-out;
}

#message {
  transition: all 0.3s ease-in-out;
}

/* Effets de glassmorphisme améliorés */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animation de pulsation pour le chargement */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Styles pour les inputs */
input:focus {
  transform: scale(1.02);
}

/* Animation pour les boutons */
button {
  transition: all 0.2s ease-in-out;
}

button:active {
  transform: scale(0.98);
}

/* Styles pour l'assistant IA */
#chatContainer {
  font-family: 'Inter', sans-serif;
}

.pulse-animation {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
  }
}

/* Messages de chat */
.ai-message, .user-message {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar personnalisée pour le chat */
#chatMessages::-webkit-scrollbar {
  width: 4px;
}

#chatMessages::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

#chatMessages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation pour l'indicateur de frappe */
@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.typing-dot {
  animation: typing 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Styles pour le système d'intelligence */
.intelligence-notification {
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.insight-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.analytics-badge {
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.smart-recommendation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.alert-high {
  animation: alertPulse 2s ease-in-out infinite;
}

@keyframes alertPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Animation pour les insights */
.insight-appear {
  animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design pour mobile */
@media (max-width: 640px) {
  #chatWindow {
    width: calc(100vw - 2rem);
    right: 1rem;
    left: 1rem;
  }
  
  #insightsModal .max-w-md {
    max-width: calc(100vw - 2rem);
  }
}