/* Custom Styles & Glassmorphism */
        body {
            transition: background-color 0.3s, color 0.3s;
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .dark .glass-nav {
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .article-content p {
            margin-bottom: 1.8em;
            line-height: 1.85;
            color: inherit;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Smooth Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #475569;
        }

        #loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .dark #loading-overlay {
            background: rgba(15, 23, 42, 0.9);
        }

        .spinner {
            border: 4px solid rgba(5, 150, 105, 0.1);
            border-left-color: #059669;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* AI Chat Custom Styles */
        .chat-area-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

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

        .chat-area-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .dark .chat-area-scrollbar::-webkit-scrollbar-thumb {
            background: #475569;
        }

        @keyframes fadeInUpChat {
            0% {
                opacity: 0;
                transform: translateY(15px);
            }

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

        .animate-fade-in-up-chat {
            animation: fadeInUpChat 0.25s ease-out forwards;
        }

        @keyframes typingDots {

            0%,
            20% {
                content: ".";
            }

            40% {
                content: "..";
            }

            60%,
            100% {
                content: "...";
            }
        }

        .typing-dots::after {
            content: "";
            animation: typingDots 1.5s infinite;
        }

        /* Pre formatted text wrapper in AI Bubble */
        .ai-answer-content p {
            margin-bottom: 1rem;
        }

        .ai-answer-content p:last-child {
            margin-bottom: 0;
        }

        /* Heading Formatter for AI Bubble */
        .ai-answer-content h1,
        .ai-answer-content h2,
        .ai-answer-content h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #059669;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .dark .ai-answer-content h1,
        .dark .ai-answer-content h2,
        .dark .ai-answer-content h3 {
            color: #34D399;
        }

        /* =========================
       AI Chat Input
       ========================= */

        #aiChatInput {
            line-height: 24px;
            overflow-x: hidden;
        }

        #aiChatInput::placeholder {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width:640px) {
            #aiChatInput {
                font-size: 14px;
                line-height: 22px;
            }
        }