/* eslint-disable */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 240 29% 8%;
  --foreground: 0 0% 100%;
  --primary: 330 100% 70%;
  --primary-foreground: 0 0% 100%;
  --secondary: 250 100% 70%;
  --secondary-foreground: 0 0% 100%;
  --accent: 185 100% 60%;
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 100% 0.1;
  --ring: 330 100% 70% 0.5;
  --radius: 0.5rem;

  /* Additional variables for your dark theme */
  --card: 240 29% 8%;
  --card-foreground: 0 0% 100%;
  --popover: 240 29% 8%;
  --popover-foreground: 0 0% 100%;
  --muted: 240 4% 46%;
  --muted-foreground: 240 5% 84%;
  --input: 240 4% 16%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
}

@layer base {
  body {
    @apply antialiased bg-gradient-to-b from-dark-navy via-deep-space to-cosmic-purple text-white min-h-screen;
  }

  p {
    @apply leading-[1.8] mb-1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply leading-[1.6] mb-2;
  }

  input,
  textarea {
    @apply bg-white/5 border border-white/10 rounded-lg px-4 py-3 
           focus:outline-none focus:ring-2 focus:ring-neon-pink/50 focus:border-neon-pink/50
           placeholder:text-gray-400 text-white transition-all duration-200
           leading-[1.8];
  }

  section {
    scroll-margin-top: 5rem;
  }

  .text-container {
    @apply py-1;
  }

  /* Global Styles */
  ::selection {
    @apply bg-neon-pink/30 text-white;
  }

  :focus {
    @apply outline-none ring-2 ring-neon-pink/50;
  }

  html {
    @apply scroll-smooth;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-lg 
           transition-all duration-300 hover:bg-white/10 hover:border-white/20
           shadow-lg shadow-black/5
           py-6;
  }

  .gradient-text {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-neon-pink to-electric-purple
           leading-[1.6] py-1;
  }

  .gradient-link {
    background: linear-gradient(to right, #ff1cf7, #b249f8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: opacity 0.3s ease;
  }

  .gradient-link:hover {
    opacity: 0.8;
  }

  .button-gradient {
    @apply bg-gradient-to-r from-neon-pink to-electric-purple 
           hover:from-aqua-blue hover:to-neon-green 
           transition-all duration-300 rounded-lg
           shadow-lg shadow-neon-pink/20 hover:shadow-aqua-blue/30
           transform hover:scale-[1.02] active:scale-[0.98]
           text-white font-semibold;
  }

  .nav-link {
    @apply text-gray-300 hover:text-white transition-all duration-200
           relative after:absolute after:bottom-0 after:left-0 after:h-[2px]
           after:w-0 hover:after:w-full after:bg-gradient-to-r after:from-neon-pink 
           after:to-electric-purple after:transition-all after:duration-300
           hover:scale-105 transform;
  }

  .section-divider {
    @apply w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent my-8;
  }

  .chat-container {
    @apply relative z-10 rounded-xl bg-black/20 backdrop-blur-xl border border-white/10
           shadow-xl shadow-black/20;
  }

  .chat-message {
    @apply relative transition-all duration-200 ease-in-out
           hover:bg-white/5 rounded-lg;
  }

  .chat-message-user {
    @apply bg-gradient-to-r from-violet-600/20 to-violet-600/10
           hover:from-violet-600/30 hover:to-violet-600/20
           border border-violet-600/20;
  }

  .chat-message-assistant {
    @apply bg-gradient-to-r from-pink-600/20 to-pink-600/10
           hover:from-pink-600/30 hover:to-pink-600/20
           border border-pink-600/20;
  }

  .chat-input {
    @apply bg-black/30 backdrop-blur-xl border border-white/10 rounded-xl
           focus:border-electric-purple/50 focus:ring-2 focus:ring-electric-purple/20
           transition-all duration-200 resize-none
           placeholder:text-white/30;
  }

  .chat-button {
    @apply bg-gradient-to-r from-electric-purple to-neon-pink
           hover:from-neon-pink hover:to-electric-purple
           transition-all duration-300 transform hover:scale-[1.02]
           text-white font-medium rounded-lg px-6 py-2
           disabled:opacity-50 disabled:cursor-not-allowed
           shadow-lg shadow-electric-purple/20 hover:shadow-neon-pink/30;
  }

  @keyframes gradient-x {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-x {
    animation: gradient-x 3s ease infinite;
  }
}

@layer utilities {
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: linear-gradient(
      to bottom,
      var(--neon-pink),
      var(--electric-purple)
    );
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--aqua-blue), var(--neon-green));
  }

  /* Animations */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

  .animate-fade-in-delay {
    animation: fade-in 0.6s ease-out 0.2s forwards;
    opacity: 0;
  }

  .animate-fade-in-delay-2 {
    animation: fade-in 0.6s ease-out 0.4s forwards;
    opacity: 0;
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes pulse-glow {
    0%,
    100% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.8;
    }
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-float-delayed {
    animation: float 6s ease-in-out 2s infinite;
  }

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

  /* Background Patterns */
  .bg-grid-pattern {
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
  }

  /* Gradient Animations */
  @keyframes border-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes gradient-x {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .animate-gradient-x {
    background-size: 200% 100%;
    animation: gradient-x 15s ease infinite;
  }

  /* Glow Effects */
  .glow-purple-md {
    text-shadow: 0 0 15px rgba(149, 76, 233, 0.5);
  }

  .glow-purple-sm {
    text-shadow: 0 0 10px rgba(149, 76, 233, 0.3);
  }

  .glow-pink-sm {
    text-shadow: 0 0 10px rgba(255, 28, 247, 0.3);
  }

  .glow-green-sm {
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
  }

  .glow-blue-sm {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  }

  /* Shadow Effects */
  .shadow-neon {
    box-shadow: 0 0 20px rgba(149, 76, 233, 0.5);
  }

  .shadow-neon-sm {
    box-shadow: 0 0 15px rgba(255, 28, 247, 0.1);
  }

  .drop-shadow-glow {
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.3));
  }

  /* Gradient Border */
  .gradient-border {
    @apply relative;
    &::before {
      content: "";
      @apply absolute inset-0 rounded-lg -z-10;
      background: linear-gradient(
        45deg,
        var(--neon-pink),
        var(--electric-purple)
      );
      animation: border-rotate 4s linear infinite;
    }
  }

  /* Mobile Optimizations */
  @media (max-width: 768px) {
    .glass-card {
      @apply py-4 px-4;
    }

    html {
      font-size: 15px;
    }

    input,
    textarea {
      @apply px-3 py-2;
    }

    @keyframes float {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    .bg-grid-pattern {
      background-size: 20px 20px;
    }
  }

  .responsive-text {
    font-size: clamp(0.875rem, 3vw, 1rem);
    line-height: 1.5;
  }

  /* Animations */
  @keyframes text-shimmer {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-text-shimmer {
    background-size: 200% auto;
    animation: text-shimmer 3s linear infinite;
  }

  .message-glow {
    @apply relative;
    &::before {
      content: "";
      @apply absolute inset-0 rounded-lg opacity-50 blur-sm -z-10;
      background: inherit;
    }
  }

  .chat-shimmer {
    @apply relative overflow-hidden;
    &::after {
      content: "";
      @apply absolute inset-0 -translate-x-full;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
      );
      animation: shimmer 2s infinite;
    }
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  /* Add to existing utilities */
  @keyframes scroll-text {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-scroll {
    animation: scroll-text 20s linear infinite;
    white-space: nowrap;
    display: inline-block;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.9;
  }

  .animate-scroll:hover {
    animation-play-state: paused;
    opacity: 1;
  }
}

/* Deck-specific styles */
html.deck-view,
html.deck-view body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
