@import "tailwindcss";

@theme {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope", sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  section {
    scroll-margin-top: 80px;
  }

  @media (min-width: 768px) {
    section {
      scroll-margin-top: 144px;
    }
  }

  body {
    @apply bg-neutral-50 text-neutral-900 selection:bg-blue-100 selection:text-blue-900;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

@layer components {
  .glass-card {
    @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-sm;
  }
  
  .magnetic-button {
    @apply relative overflow-hidden transition-all duration-300 active:scale-95;
  }

  .hotspot-pulse {
    @apply absolute w-4 h-4 bg-blue-500 rounded-full cursor-pointer;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    animation: pulse 2s infinite;
  }

  .thinking-bar {
    @apply absolute bottom-0 left-8 right-8 h-[2.5px] opacity-100;
    background: linear-gradient(90deg, #00FFFF, #A855F7, #EC4899, #00FFFF);
    background-size: 300% 100%;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9));
    z-index: 51;
    animation: thinking-flow 2s linear infinite, thinking-pulse 3s ease-in-out infinite;
  }

  .pill-gradient-border {
    @apply absolute inset-0 rounded-full p-[2px];
    background: linear-gradient(90deg, #00FFFF, #A855F7, #EC4899, #00FFFF);
    background-size: 300% 100%;
    animation: flow 15s linear infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .ai-search-border-active {
    @apply opacity-100;
    animation: ai-border-flow 2s linear infinite;
  }

  .ai-search-glow {
    @apply absolute inset-0 rounded-full opacity-0 blur-xl transition-all duration-500;
    background: linear-gradient(90deg, #00FFFF, #A855F7, #EC4899);
    z-index: 0;
  }

  .ai-search-glow-active {
    @apply opacity-20;
  }

  /* Autofill Fix */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: transparent !important;
  }

  .progress-gradient {
    background: linear-gradient(90deg, #22D3EE, #A855F7);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
  }

  .uvc-line {
    background: linear-gradient(90deg, #00FFFF, #3B82F6, #A855F7, #00FFFF);
    background-size: 300% 100%;
    animation: flow 3s linear infinite;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6), 0 0 12px rgba(0, 255, 255, 0.4);
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@keyframes flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes ai-border-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.005); }
}

@keyframes ai-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes thinking-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes thinking-pulse {
  0%, 100% { filter: brightness(1) blur(0px); }
  50% { filter: brightness(1.5) blur(2px); }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-neutral-200 rounded-full hover:bg-neutral-300 transition-colors;
}