/* 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(226, 232, 240, 0.8); /* border color */
}
.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: 12px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

#loading-overlay {
    position: fixed; inset: 0; background: rgba(248, 250, 252, 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(37, 99, 235, 0.1); border-left-color: #2563EB;
    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: 12px; }
.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: #2563EB;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.dark .ai-answer-content h1, .dark .ai-answer-content h2, .dark .ai-answer-content h3 {
    color: #3B82F6;
}

/* =========================
   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;
    }
}