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

@layer base {
  * {
    box-sizing: border-box;
  }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    @apply bg-slate-50 text-slate-900 antialiased;
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-2xl shadow-sm border border-slate-100 p-5;
  }
  .card-hover {
    @apply card transition-all duration-200 hover:shadow-md hover:border-brand-200;
  }
  .badge-pass {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-success-50 text-success-600 border border-success-500/20;
  }
  .badge-fail {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-danger-50 text-danger-600 border border-danger-500/20;
  }
  .badge-warning {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-warning-50 text-warning-600 border border-warning-500/20;
  }
  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-brand-600 text-white font-semibold text-sm transition-all duration-200 hover:bg-brand-700 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-white text-slate-700 font-semibold text-sm border border-slate-200 transition-all duration-200 hover:bg-slate-50 active:scale-95;
  }
  .score-bar {
    @apply h-2 rounded-full transition-all duration-700 ease-out;
  }
  .metric-label {
    @apply text-xs font-medium text-slate-500 uppercase tracking-wide;
  }
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: bounceDot 1.4s infinite ease-in-out both;
  @apply bg-brand-400;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1.0); opacity: 1; }
}

.message-enter {
  animation: fadeIn 0.3s ease-out;
}

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

.score-ring {
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1s ease-in-out;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

.gradient-text {
  background: linear-gradient(135deg, #4f55e5, #8196f8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shimmer {
  background: linear-gradient(90deg, #f0f4ff 25%, #e0eaff 50%, #f0f4ff 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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