* {
            scroll-behavior: smooth;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: scaleY(0);
            }

            100% {
                opacity: 1;
                transform: scaleY(1);
            }
        }

        @keyframes buttonPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        @keyframes cardFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        @keyframes toggleSlide {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(24px);
            }
        }

        @keyframes sunRotate {
            from {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }

            to {
                transform: rotate(45deg) scale(0.8);
                opacity: 0;
            }
        }

        @keyframes moonFadeIn {
            from {
                transform: rotate(-45deg) scale(0.8);
                opacity: 0;
            }

            to {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-15px) rotate(5deg);
            }
        }

        @keyframes pulse-glow {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        @keyframes slideInFromBottom {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        /* Fix gradient text clipping */
        .bg-clip-text {
            padding-bottom: 0.1em;
            -webkit-background-clip: text !important;
            background-clip: text !important;
        }

        h1 .bg-gradient-to-r {
            display: inline-block;
            padding-bottom: 0.15em;
            line-height: 1.2;
        }

        .stat-card {
            animation: slideInFromBottom 0.6s ease-out forwards;
            transform-origin: center;
        }

        .stat-card:nth-child(1) {
            animation-delay: 0.1s;
        }

        .stat-card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .stat-card:nth-child(3) {
            animation-delay: 0.3s;
        }

        .stat-card:nth-child(4) {
            animation-delay: 0.4s;
        }

        .service-card {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .service-card:hover {
            transform: translateY(-12px) scale(1.03);
            box-shadow: 0 20px 50px rgba(34, 211, 238, 0.25);
        }

        .contact-info-card {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .contact-info-card:hover {
            transform: translateX(15px) translateY(-6px);
            box-shadow: 0 16px 40px rgba(34, 211, 238, 0.2);
        }

        .btn-primary {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(34, 211, 238, 0.4);
            letter-spacing: 0.5px;
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
            pointer-events: none;
        }

        .btn-primary:active::after {
            width: 300px;
            height: 300px;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .service-card:hover::before {
            left: 100%;
        }

        /* Premium dark mode toggle switch */
        .theme-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
            border: 2px solid #475569;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            padding: 0 3px;
        }

        .theme-toggle:hover {
            border-color: #64748b;
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
        }

        .theme-toggle.active {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-color: #0ea5e9;
        }

        .toggle-circle {
            position: relative;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
        }

        .theme-toggle.active .toggle-circle {
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            /* Dynamic transform based on text direction - will be set by JavaScript */
            transform: translateX(var(--toggle-direction, 30px));
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
        }

        .toggle-circle svg {
            width: 14px;
            height: 14px;
            animation: sunRotate 0.3s ease-out forwards;
        }

        .theme-toggle.active .toggle-circle svg {
            animation: none;
        }

        .toggle-circle .moon-icon {
            width: 14px;
            height: 14px;
            animation: moonFadeIn 0.3s ease-out forwards;
        }

        .theme-toggle:not(.active) .moon-icon {
            display: none;
        }

        .theme-toggle.active .sun-icon {
            display: none;
        }

        /* Language button enhancement */
        .lang-toggle {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .lang-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(34, 211, 238, 0.2);
            transition: left 0.3s ease;
            z-index: -1;
        }

        .lang-toggle:hover::before {
            left: 0;
        }

        .lang-toggle:active {
            transform: scale(0.95);
        }

        html.dark {
            color-scheme: dark;
        }

        /* Light mode color scheme */
        body.light-mode {
            background-color: #f5f7fa;
            color: #1a202c;
        }

        body.light-mode .nav {
            background: rgba(255, 255, 255, 0.98) !important;
            border-color: #e0e7ff !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        }

        /* Hero section now properly changes to light colors in light mode */
        body.light-mode #home {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        }

        body.light-mode #home::before {
            background: none !important;
        }

        /* Updated all section backgrounds for light mode */
        body.light-mode #about,
        body.light-mode #services,
        body.light-mode #contact {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f5f7fa 100%) !important;
        }

        body.light-mode h1 {
            color: #0f172a !important;
        }

        body.light-mode h2 {
            color: #1e293b !important;
        }

        body.light-mode h3 {
            color: #334155 !important;
        }

        body.light-mode p,
        body.light-mode .text-lg {
            color: #475569 !important;
        }

        body.light-mode .text-slate-300,
        body.light-mode .text-slate-400,
        body.light-mode .text-slate-500 {
            color: #64748b !important;
        }

        body.light-mode .text-white {
            color: #1e293b !important;
        }

        body.light-mode .bg-gradient-to-r.from-cyan-400 {
            background: linear-gradient(90deg, #0ea5e9, #06b6d4) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        body.light-mode .bg-slate-800,
        body.light-mode .bg-slate-800\/50 {
            background-color: #f0f4f8 !important;
        }

        body.light-mode .bg-slate-900 {
            background-color: #f8fafc !important;
        }

        body.light-mode .border-slate-700,
        body.light-mode .border-slate-800 {
            border-color: #cbd5e1 !important;
        }

        body.light-mode input,
        body.light-mode textarea {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }

        body.light-mode input::placeholder,
        body.light-mode textarea::placeholder {
            color: #94a3b8 !important;
        }

        body.light-mode input:focus,
        body.light-mode textarea:focus {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode footer {
            background-color: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        /* Enhanced service and contact cards for light mode */
        body.light-mode .service-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .service-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
            box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15) !important;
        }

        /* Contact info cards styling for light mode */
        body.light-mode .contact-info-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .contact-info-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
            box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15) !important;
        }

        /* Contact form specific styling for light mode */
        /* body.light-mode #contactForm {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
        } */

        body.light-mode #contactForm input,
        body.light-mode #contactForm textarea {
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }

        body.light-mode #contactForm input:focus,
        body.light-mode #contactForm textarea:focus {
            background: #ffffff !important;
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode #contactForm label {
            color: #334155 !important;
        }

        body.light-mode .stat-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .stat-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%) !important;
            box-shadow: 0 12px 32px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode .cyan-500\/10 {
            background-color: rgba(6, 182, 212, 0.08) !important;
        }

        body.light-mode .cyan-500\/20 {
            background-color: rgba(6, 182, 212, 0.12) !important;
        }

        body.light-mode .inline-flex.items-center.gap-2 {
            background-color: rgba(6, 182, 212, 0.1) !important;
            border-color: rgba(6, 182, 212, 0.3) !important;
        }

        /* Theme toggle styling for light mode */
        body.light-mode .theme-toggle {
            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
            border-color: #bfdbfe !important;
        }

        body.light-mode .theme-toggle:hover {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 15px rgba(14, 165, 233, 0.2) !important;
        }

        body.light-mode .lang-toggle {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
            border-color: #cbd5e1 !important;
            color: #0ea5e9 !important;
        }

        body.light-mode .lang-toggle:hover {
            background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%) !important;
            border-color: #0ea5e9 !important;
        }

        .floating-element {
            animation: float 3s ease-in-out infinite;
        }

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

        @keyframes pulseGlow {

            0%,
            100% {
                transform: translateY(0) scale(1);
                opacity: .4;
            }

            50% {
                transform: translateY(-6px) scale(1.6);
                opacity: 1;
            }
        }

        .floating-dots .dot {
            animation: pulseGlow 1.5s infinite ease-in-out;
        }

        html {
            scroll-behavior: smooth;
        }

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

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgb(34 211 238 / var(--tw-text-opacity, 1));
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
            transition: background 0.3s, box-shadow 0.3s;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgb(14 178 208 / var(--tw-text-opacity, 1));
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.8);
        }

        /* Mobile Menu Styles */
        #mobileMenu {
            transition: all 0.3s ease-in-out;
            transform-origin: top;
        }

        #mobileMenu:not(.hidden) {
            animation: slideDown 0.3s ease-out forwards;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #mobileMenuBtn svg {
            transition: transform 0.3s ease;
        }

        #mobileMenuBtn:hover svg {
            transform: scale(1.1);
        }

        /* Light mode mobile menu */
        body.light-mode #mobileMenu {
            background: rgba(255, 255, 255, 0.98) !important;
            border-color: #e0e7ff !important;
        }

        body.light-mode #mobileMenu a {
            color: #334155;
        }

        body.light-mode #mobileMenu a:hover {
            background-color: #f0f9ff !important;
            color: #0ea5e9 !important;
        }

        body.light-mode #mobileMenuBtn svg {
            color: #0ea5e9;
        }

        /* Toast Notification Styles */
        #successMsg>div,
        #errorMsg>div,
        #subscribeSuccessMsg>div,
        #subscribeErrorMsg>div {
            animation: toastPop 0.3s ease-out forwards;
        }

        @keyframes toastPop {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Light mode toast styles */
        body.light-mode #successMsg>div,
        body.light-mode #errorMsg>div,
        body.light-mode #subscribeSuccessMsg>div,
        body.light-mode #subscribeErrorMsg>div {
            background: rgba(255, 255, 255, 0.98) !important;
            border-color: inherit;
        }

        body.light-mode #successMsg h3,
        body.light-mode #errorMsg h3,
        body.light-mode #subscribeSuccessMsg h3,
        body.light-mode #subscribeErrorMsg h3 {
            color: inherit;
        }

        body.light-mode #successMsg p,
        body.light-mode #errorMsg p,
        body.light-mode #subscribeSuccessMsg p,
        body.light-mode #subscribeErrorMsg p {
            color: #475569 !important;
        }

        /* Scroll animation ready state */
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .scroll-animate.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* WhatsApp Floating Button */
        .whatsapp-float {
            animation: whatsappPulse 2s ease-in-out infinite;
        }

        @keyframes whatsappPulse {

            0%,
            100% {
                box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
            }

            50% {
                box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6), 0 0 0 10px rgba(37, 211, 102, 0.1);
            }
        }

        .whatsapp-float:hover {
            animation: none;
        }

        /* RTL Support for WhatsApp button */
        html[dir="rtl"] .whatsapp-float {
            right: auto !important;
            left: 24px;
        }

        /* WhatsApp button tooltip (optional) */
        .whatsapp-float::before {
            content: 'Chat with us!';
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: #1e293b;
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .whatsapp-float::after {
            content: '';
            position: absolute;
            right: 62px;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-left-color: #1e293b;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .whatsapp-float:hover::before,
        .whatsapp-float:hover::after {
            opacity: 1;
            visibility: visible;
        }

        html[dir="rtl"] .whatsapp-float::before {
            right: auto;
            left: 70px;
            content: 'تواصل معنا!';
        }

        html[dir="rtl"] .whatsapp-float::after {
            right: auto;
            left: 62px;
            border-left-color: transparent;
            border-right-color: #1e293b;
        }

        /* Light mode WhatsApp tooltip */
        body.light-mode .whatsapp-float::before {
            background: #f1f5f9;
            color: #1e293b;
        }

        body.light-mode .whatsapp-float::after {
            border-left-color: #f1f5f9;
        }

        body.light-mode html[dir="rtl"] .whatsapp-float::after {
            border-left-color: transparent;
            border-right-color: #f1f5f9;
        }

        /* Back to Top Button */
        #backToTop {
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
        }

        #backToTop:hover {
            transform: scale(1.1) translateY(-2px);
        }

        /* RTL Support for Back to Top button */
        html[dir="rtl"] #backToTop {
            right: auto !important;
            left: 28px;
        }

        /* RTL Support for WhatsApp button position adjustment */
        html[dir="rtl"] #backToTop {
            left: 28px;
        }

        /* ===== AI Chat Section Styles ===== */

        /* Bot float animation */
        @keyframes aiBotFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-16px);
            }
        }

        .ai-bot-float {
            animation: aiBotFloat 4s ease-in-out infinite;
        }

        /* Floating particles */
        @keyframes aiParticleFloat {

            0%,
            100% {
                transform: translateY(0) scale(1);
                opacity: 0.7;
            }

            50% {
                transform: translateY(-20px) scale(1.3);
                opacity: 1;
            }
        }

        .ai-particle {
            animation: aiParticleFloat 3s ease-in-out infinite;
        }

        /* Chat container */
        .ai-chat-container {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ai-chat-container:hover {
            box-shadow: 0 25px 60px rgba(34, 211, 238, 0.12);
            border-color: rgba(34, 211, 238, 0.3);
        }

        /* Chat messages scrollbar */
        .ai-chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .ai-chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .ai-chat-messages::-webkit-scrollbar-thumb {
            background: rgba(34, 211, 238, 0.3);
            border-radius: 10px;
        }

        .ai-chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(34, 211, 238, 0.5);
        }

        /* AI message bubble */
        .ai-message {
            animation: messageSlideIn 0.4s ease-out forwards;
        }

        /* User message bubble */
        .user-message {
            animation: messageSlideIn 0.3s ease-out forwards;
        }

        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Typing indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 0;
        }

        .typing-indicator .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #22d3ee;
            animation: typingBounce 1.4s infinite ease-in-out both;
        }

        .typing-indicator .dot:nth-child(1) {
            animation-delay: 0s;
        }

        .typing-indicator .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typingBounce {

            0%,
            80%,
            100% {
                transform: scale(0.6);
                opacity: 0.4;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* RTL support for chat */
        html[dir="rtl"] .ai-message {
            border-radius: 1rem;
            border-top-right-radius: 0.125rem;
        }

        html[dir="rtl"] .user-message {
            border-radius: 1rem;
            border-top-left-radius: 0.125rem;
        }

        html[dir="rtl"] .ai-chat-input button svg {
            transform: rotate(180deg);
        }

        /* ===== Light Mode for AI Chat ===== */

        body.light-mode #ai-chat {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f5f7fa 100%) !important;
        }

        body.light-mode .ai-chat-container {
            background: rgba(255, 255, 255, 0.9) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
        }

        body.light-mode .ai-chat-container:hover {
            border-color: #0ea5e9 !important;
            box-shadow: 0 16px 48px rgba(14, 165, 233, 0.12) !important;
        }

        body.light-mode .ai-chat-header {
            background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(59, 130, 246, 0.08)) !important;
            border-color: #e2e8f0 !important;
        }

        body.light-mode .ai-chat-messages {
            background: #fafbfc;
        }

        body.light-mode .ai-message {
            background: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
        }

        body.light-mode .ai-message p {
            color: #334155 !important;
        }

        body.light-mode .user-message {
            background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
            border: none !important;
        }

        body.light-mode .user-message p {
            color: #ffffff !important;
        }

        body.light-mode .ai-chat-input {
            background: rgba(248, 250, 252, 0.9) !important;
            border-color: #e2e8f0 !important;
        }

        body.light-mode #aiChatInput {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }

        body.light-mode #aiChatInput:focus {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode .typing-indicator .dot {
            background-color: #0ea5e9;
        }

        /* Quick Suggestion Chips */
        .quick-suggestion-btn {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .quick-suggestion-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.2);
        }

        .quick-suggestion-btn:active {
            transform: translateY(0) scale(0.95);
        }


        /* Light mode quick suggestions */
        body.light-mode .quick-suggestion-btn {
            background: rgba(14, 165, 233, 0.08) !important;
            border-color: rgba(14, 165, 233, 0.3) !important;
            color: #0ea5e9 !important;
        }

        body.light-mode .quick-suggestion-btn:hover {
            background: rgba(14, 165, 233, 0.15) !important;
            border-color: rgba(14, 165, 233, 0.5) !important;
        }

        /* ===== Enhanced Light Mode Visibility ===== */

        /* Light mode AI Robot particles - darker and more visible */
        body.light-mode .ai-particle {
            background-color: #0284c7 !important;
            box-shadow: 0 0 8px rgba(2, 132, 199, 0.4) !important;
        }

        /* Light mode AI Robot glow rings - more visible */
        body.light-mode .ai-glow-ring {
            border-color: rgba(14, 165, 233, 0.35) !important;
            opacity: 1 !important;
        }

        /* Light mode welcome badge - better contrast */
        body.light-mode .inline-flex.items-center.gap-2 {
            background-color: rgba(14, 165, 233, 0.12) !important;
            border-color: rgba(14, 165, 233, 0.4) !important;
        }

        body.light-mode .inline-flex.items-center.gap-2 span {
            color: #0369a1 !important;
        }

        /* Light mode floating dots - more visible */
        body.light-mode .floating-dots .dot {
            background-color: #0284c7 !important;
            box-shadow: 0 0 10px rgba(2, 132, 199, 0.3) !important;
        }

        /* Light mode gradient text enhancement - darker gradient */
        body.light-mode .bg-gradient-to-r.from-cyan-400.to-blue-400 {
            background: linear-gradient(90deg, #0369a1, #0284c7) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        /* Light mode AI Robot SVG elements - darker colors for better visibility */
        body.light-mode #ai-chat circle[fill="#22d3ee"] {
            fill: #0284c7 !important;
        }

        body.light-mode #ai-chat path[stroke="#22d3ee"] {
            stroke: #0369a1 !important;
        }

        body.light-mode #ai-chat text[fill="#22d3ee"] {
            fill: #0369a1 !important;
            font-weight: bold !important;
        }

        body.light-mode #ai-chat line[stroke*="#22d3ee"],
        body.light-mode #ai-chat line[stroke*="url(#bodyGrad)"],
        body.light-mode #ai-chat line[stroke*="url(#miniBodyGrad)"] {
            stroke: #0284c7 !important;
        }


        /* Light mode section glow effects - more visible */
        body.light-mode .absolute.bg-blue-500\/5,
        body.light-mode .absolute.bg-cyan-500\/5 {
            background-color: rgba(14, 165, 233, 0.08) !important;
        }

        body.light-mode .absolute.bg-blue-500\/10,
        body.light-mode .absolute.bg-cyan-500\/10 {
            background-color: rgba(14, 165, 233, 0.12) !important;
        }

        /* Light mode AI bot avatar borders */
        body.light-mode .ai-avatar-mini {
            border-color: rgba(14, 165, 233, 0.4) !important;
        }

        /* Light mode typing indicator dots */
        body.light-mode .typing-indicator .dot {
            background-color: #0284c7 !important;
        }

        /* Light mode AI chat header online status */
        body.light-mode .ai-chat-header .bg-green-400 {
            background-color: #10b981 !important;
        }

        /* Light mode scrollbar for chat */
        body.light-mode .ai-chat-messages::-webkit-scrollbar-thumb {
            background: rgba(14, 165, 233, 0.4) !important;
        }

        body.light-mode .ai-chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(14, 165, 233, 0.6) !important;
        }