@keyframes slide-in {
            0% { transform: translateX(-100%); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        @keyframes fade-in {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
            100% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.6); }
        }
        @keyframes circuit {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100vw); }
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .glassmorphism-dark {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .circuit-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
        }
        .tech-grid {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        .gradient-text {
            background: linear-gradient(135deg, #22d3ee, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ============================================
           DARK MODE STYLES
           ============================================ */
        
        /* Dark mode body background - Override Tailwind inline classes */
        body.dark-mode,
        body.dark-mode.bg-gradient-to-br {
            background: linear-gradient(to bottom right, #0f172a, #1e1b4b, #0f172a) !important;
            background-image: linear-gradient(to bottom right, #0f172a, #1e1b4b, #0f172a) !important;
        }

        /* Dark mode glassmorphism */
        .dark-mode .glassmorphism {
            background: rgba(15, 23, 42, 0.6) !important;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Dark mode text colors */
        .dark-mode .text-slate-800,
        .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
            color: #f1f5f9 !important;
        }

        .dark-mode .text-slate-600,
        .dark-mode p {
            color: #cbd5e1 !important;
        }

        .dark-mode .text-slate-500 {
            color: #94a3b8 !important;
        }

        .dark-mode .text-slate-700 {
            color: #e2e8f0 !important;
        }

        /* Dark mode input fields */
        .dark-mode input[type="text"],
        .dark-mode input[type="email"],
        .dark-mode input[type="password"],
        .dark-mode textarea,
        .dark-mode select {
            background: rgba(30, 41, 59, 0.8) !important;
            color: #f1f5f9 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .dark-mode input[readonly] {
            background: rgba(15, 23, 42, 0.6) !important;
            color: #94a3b8 !important;
            cursor: not-allowed;
        }

        .dark-mode input::placeholder,
        .dark-mode textarea::placeholder {
            color: #64748b !important;
        }

        /* Dark mode cards and containers */
        .dark-mode .bg-slate-50,
        .dark-mode .bg-slate-100 {
            background: rgba(30, 41, 59, 0.5) !important;
        }

        .dark-mode .bg-white {
            background: rgba(30, 41, 59, 0.8) !important;
        }

        /* Dark mode specific colored backgrounds */
        .dark-mode .bg-gradient-to-r.from-purple-50 {
            background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2)) !important;
        }

        .dark-mode .bg-gradient-to-r.from-green-50 {
            background: linear-gradient(to right, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2)) !important;
        }

        .dark-mode .bg-gradient-to-r.from-blue-50 {
            background: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(14, 165, 233, 0.2)) !important;
        }

        .dark-mode .bg-gradient-to-r.from-red-50 {
            background: linear-gradient(to right, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)) !important;
        }

        .dark-mode .bg-red-50 {
            background: rgba(239, 68, 68, 0.15) !important;
        }

        /* Dark mode borders */
        .dark-mode .border-slate-200 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .dark-mode .border-red-200 {
            border-color: rgba(239, 68, 68, 0.3) !important;
        }

        .dark-mode .border-green-200 {
            border-color: rgba(34, 197, 94, 0.3) !important;
        }

        /* Dark mode hover states */
        .dark-mode .hover\:bg-white\/50:hover {
            background: rgba(51, 65, 85, 0.5) !important;
        }

        .dark-mode .hover\:text-slate-900:hover {
            color: #f1f5f9 !important;
        }

        /* Dark mode buttons retain their colors (no change needed for gradient buttons) */
        
        /* Dark mode gradient text - keep vibrant */
        .dark-mode .gradient-text {
            background: linear-gradient(135deg, #22d3ee, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Dark mode circuit pattern */
        .dark-mode .circuit-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
        }

        /* Dark mode tech grid */
        .dark-mode .tech-grid {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 50px 50px;
        }

        /* Dark mode shadows - soften them */
        .dark-mode .shadow-xl {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
        }

        .dark-mode .shadow-lg {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
        }

        /* Dark mode specific text on colored backgrounds */
        .dark-mode .text-slate-700 {
            color: #e2e8f0 !important;
        }

        /* Smooth transition for dark mode toggle */
        body {
            transition: background 0.3s ease;
        }

        .glassmorphism {
            transition: background 0.3s ease, border 0.3s ease;
        }

        h1, h2, h3, h4, h5, h6, p, input, textarea, select {
            transition: color 0.3s ease, background 0.3s ease;
        }

       
       
        /* Bot Icon Glow Animation */
#openBot {
  animation: pulse-glow 2.5s ease-in-out infinite;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}