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

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

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-nexus-bg text-nexus-text font-sans antialiased;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-nexus-surface;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-nexus-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-nexus-muted;
  }
}

@layer components {
  .nexus-card {
    @apply bg-nexus-card border border-nexus-border rounded-xl;
  }

  .nexus-button {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200
           hover:opacity-90 active:scale-95 disabled:opacity-50
           disabled:cursor-not-allowed;
  }

  .nexus-button-primary {
    @apply nexus-button bg-nexus-accent text-white hover:bg-nexus-accent-light;
  }

  .nexus-button-ghost {
    @apply nexus-button bg-transparent text-nexus-muted
           hover:bg-nexus-card hover:text-nexus-text;
  }

  .nexus-input {
    @apply bg-nexus-surface border border-nexus-border rounded-lg
           px-4 py-2 text-nexus-text placeholder-nexus-muted
           focus:outline-none focus:ring-2 focus:ring-nexus-accent
           focus:border-transparent transition-all duration-200;
  }

  .prose-nexus {
    @apply text-nexus-text;
  }

  .prose-nexus h1,
  .prose-nexus h2,
  .prose-nexus h3 {
    @apply font-semibold text-white mt-4 mb-2;
  }

  .prose-nexus h1 {
    @apply text-xl;
  }
  .prose-nexus h2 {
    @apply text-lg;
  }
  .prose-nexus h3 {
    @apply text-base;
  }

  .prose-nexus p {
    @apply mb-3 leading-relaxed;
  }

  .prose-nexus code {
    @apply bg-nexus-surface border border-nexus-border rounded
           px-1.5 py-0.5 font-mono text-sm text-purple-300;
  }

  .prose-nexus pre {
    @apply bg-nexus-bg border border-nexus-border rounded-lg
           p-4 overflow-x-auto my-3;
  }

  .prose-nexus pre code {
    @apply bg-transparent border-none p-0 text-green-300;
  }

  .prose-nexus ul,
  .prose-nexus ol {
    @apply pl-5 mb-3 space-y-1;
  }

  .prose-nexus li {
    @apply leading-relaxed;
  }

  .prose-nexus ul li {
    list-style-type: disc;
  }
  .prose-nexus ol li {
    list-style-type: decimal;
  }

  .prose-nexus blockquote {
    @apply border-l-4 border-nexus-accent pl-4 italic text-nexus-muted my-3;
  }

  .prose-nexus a {
    @apply text-nexus-accent-light underline hover:text-nexus-accent;
  }

  .prose-nexus strong {
    @apply font-semibold text-white;
  }

  .prose-nexus table {
    @apply w-full border-collapse my-3;
  }

  .prose-nexus th,
  .prose-nexus td {
    @apply border border-nexus-border px-3 py-2 text-sm;
  }

  .prose-nexus th {
    @apply bg-nexus-surface font-semibold;
  }

  .prose-nexus hr {
    @apply border-nexus-border my-4;
  }
}

/* Typing animation */
.typing-dot {
  animation: typingBounce 1.4s infinite ease-in-out;
}

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

@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nexus-glow {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}