@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-family-sans bg-slate-50 text-slate-900 transition-colors duration-300;
  }

  .dark body {
    @apply bg-slate-950 text-slate-50;
  }

  .font-family-sans {
    font-family: 'Inter', system-ui, sans-serif;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-blue-600 to-sky-500 bg-clip-text text-transparent;
  }

  .gradient-text-green {
    @apply bg-gradient-to-r from-green-500 to-emerald-400 bg-clip-text text-transparent;
  }

  .glass-card {
    @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border border-white/50 dark:border-slate-800/50 rounded-2xl shadow-card;
  }

  .section-tag {
    @apply inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-sm font-semibold tracking-wide;
  }

  .btn-primary {
    @apply px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-blue-200 dark:shadow-none hover:shadow-xl hover:shadow-blue-300 hover:scale-105 transition-all duration-200 ease-out active:scale-95;
  }

  .btn-secondary {
    @apply px-6 py-3 bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 font-semibold rounded-xl border-2 border-blue-100 dark:border-slate-700 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-slate-700 transition-all duration-200 ease-out;
  }

  .btn-danger {
    @apply px-6 py-3 bg-gradient-to-r from-red-500 to-rose-500 text-white font-semibold rounded-xl shadow-lg shadow-red-200 dark:shadow-none hover:shadow-xl hover:shadow-red-300 hover:scale-105 transition-all duration-200 ease-out active:scale-95;
  }

  .chat-bubble-user {
    @apply bg-gradient-to-br from-blue-600 to-blue-500 text-white rounded-2xl rounded-br-sm px-4 py-3;
  }

  .chat-bubble-ai {
    @apply bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 text-slate-700 dark:text-slate-200 rounded-2xl rounded-bl-sm px-4 py-3 shadow-card;
  }

  .risk-badge-low {
    @apply inline-flex items-center gap-1.5 px-3 py-1 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800 rounded-full text-xs font-semibold;
  }

  .risk-badge-medium {
    @apply inline-flex items-center gap-1.5 px-3 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-800 rounded-full text-xs font-semibold;
  }

  .risk-badge-high {
    @apply inline-flex items-center gap-1.5 px-3 py-1 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800 rounded-full text-xs font-semibold;
  }
}

/* Leaflet custom styling */
.leaflet-container {
  border-radius: 1rem;
  font-family: 'Inter', sans-serif;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 4px;
}

.leaflet-popup-content {
  margin: 12px 16px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

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

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

/* Loading shimmer effect */
.shimmer {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Microphone pulse animation */
.mic-pulse {
  animation: micPulse 1s ease-in-out infinite;
}

@keyframes micPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
}

/* Dot loading animation */
.dot-flashing {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #94a3b8;
  color: #94a3b8;
  animation: dotFlashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}

.dot-flashing::before,
.dot-flashing::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #94a3b8;
  color: #94a3b8;
}

.dot-flashing::before {
  left: -14px;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 0s;
}

.dot-flashing::after {
  left: 14px;
  animation: dotFlashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dotFlashing {
  0% {
    background-color: #94a3b8;
  }

  50%,
  100% {
    background-color: #e2e8f0;
  }
}