You are tasked with generating a super modern, animated, highly detailed, and comprehensive AI chat website using TailwindCSS via CDN. The design must feel futuristic, cinematic, and immersive, optimized for both desktop and mobile.

Core requirements:
- **Color scheme:** Dark mode only. Use `bg-zinc-950` and `bg-zinc-900` for layered backgrounds. Foreground elements (text, buttons, highlights) must use `text-white`, `bg-white`, or subtle gradients for contrast. Black background with white foreground is mandatory.
- **Typography:** Clean sans-serif fonts. Headings large and animated (fade-in, slide-up). Chat text highly readable with smooth spacing.
- **Layout:**
- Full-screen responsive container with flex/grid.
- Left sidebar for navigation (Home, Chat, Settings, About).
- Main chat window centered, with rounded corners, subtle shadows, glowing borders.
- Right sidebar for AI persona info, tips, or system status.
- **Animations:**
- Smooth transitions on hover (scale, glow, shadow).
- Chat bubbles animate in (slide + fade).
- Background gradient animations (slow pulse between `bg-zinc-950` and `bg-zinc-900`).
- Loading indicators with spinning dots or wave effects.
- **Chat UI:**
- User messages aligned right, AI messages aligned left.
- Rounded chat bubbles with subtle glow (`shadow-lg`, `hover:scale-105`).
- Timestamp and message status indicators.
- Input bar fixed at bottom with glowing border, animated send button.
- **Extra details:**
- Sticky header with site logo (minimalist white icon).
- Footer with links (Privacy, Terms, Contact).
- Support for markdown in chat (bold, italic, code blocks).
- Optional toggle for compact vs spacious chat mode.
- Smooth scroll with inertia effect.
- **Overall vibe:** A futuristic AI hub with cinematic feel. Black-and-white contrast, glowing accents, and fluid animations should make the site feel alive and premium.

Deliverable: A TailwindCSS-based HTML/CSS/JS structure that embodies this design philosophy. It must be visually stunning, highly interactive, and ready to expand into a full AI chat platform.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neural Nexus Ai
-emoji: 😻
-colorFrom: blue
-colorTo: indigo
+title: Neural Nexus AI 🚀
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,117 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+                * { font-family: 'Inter', sans-serif; }
+                
+                footer {
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    background: rgba(9, 9, 11, 0.9);
+                    backdrop-filter: blur(20px);
+                    -webkit-backdrop-filter: blur(20px);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    padding: 0.75rem 2rem;
+                    z-index: 30;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                
+                .footer-links {
+                    display: flex;
+                    align-items: center;
+                    gap: 2rem;
+                }
+                
+                .footer-link {
+                    color: #71717a;
+                    text-decoration: none;
+                    font-size: 0.875rem;
+                    transition: color 0.2s ease;
+                }
+                
+                .footer-link:hover {
+                    color: #ffffff;
+                }
+                
+                .footer-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 2rem;
+                    color: #71717a;
+                    font-size: 0.75rem;
+                }
+                
+                .status-indicator {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .status-dot {
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background: #10b981;
+                    animation: pulse 2s infinite;
+                }
+                
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+                
+                @media (max-width: 768px) {
+                    footer {
+                        padding: 0.75rem 1rem;
+                        flex-direction: column;
+                        gap: 0.5rem;
+                    }
+                    
+                    .footer-links {
+                        gap: 1rem;
+                        flex-wrap: wrap;
+                        justify-content: center;
+                    }
+                    
+                    .footer-info {
+                        gap: 1rem;
+                        font-size: 0.625rem;
+                    }
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-links">
+                    <a href="/privacy" class="footer-link">Privacy Policy</a>
+                    <a href="/terms" class="footer-link">Terms of Service</a>
+                    <a href="/contact" class="footer-link">Contact Us</a>
+                    <a href="/docs" class="footer-link">API Docs</a>
+                    <a href="/blog" class="footer-link">Blog</a>
+                </div>
+                
+                <div class="footer-info">
+                    <div class="status-indicator">
+                        <div class="status-dot"></div>
+                        <span>All systems operational</span>
+                    </div>
+                    <span>© 2024 Neural Nexus AI</span>
+                    <span>Version 2.0.1</span>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);
+
+// Footer link handlers
+function handleFooterLink(link) {
+    // Smooth scroll or navigation logic
+    console.log('Navigating to:', link);
+}

components/header.js

@@ -0,0 +1,150 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+                * { font-family: 'Inter', sans-serif; }
+                
+                .header-container {
+                    height: 64px;
+                    background: rgba(9, 9, 11, 0.8);
+                    backdrop-filter: blur(20px);
+                    -webkit-backdrop-filter: blur(20px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 2rem;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 50;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    space-x: 3;
+                    cursor: pointer;
+                    transition: transform 0.2s ease;
+                }
+                
+                .logo:hover {
+                    transform: scale(1.05);
+                }
+                
+                .logo-text {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .logo-icon {
+                    width: 36px;
+                    height: 36px;
+                    border-radius: 12px;
+                    background: linear-gradient(135deg, #ffffff 0%, #6b7280 100%);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+                }
+                
+                .nav-actions {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                
+                .icon-btn {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 12px;
+                    background: rgba(255, 255, 255, 0.05);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    color: #9ca3af;
+                }
+                
+                .icon-btn:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                    color: #ffffff;
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+                }
+                
+                .menu-toggle {
+                    display: none;
+                }
+                
+                @media (max-width: 768px) {
+                    .header-container {
+                        padding: 0 1rem;
+                    }
+                    
+                    .logo-text span {
+                        display: none;
+                    }
+                    
+                    .menu-toggle {
+                        display: flex;
+                    }
+                }
+            </style>
+            
+            <header class="header-container">
+                <div onclick="location.href='/'" class="logo">
+                    <div class="logo-icon">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2">
+                            <path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                            <path d="M12 2v6a2 2 0 002 2h6"/>
+                        </svg>
+                    </div>
+                    <div class="logo-text text-white">
+                        Neural <span>Nexus</span> AI
+                    </div>
+                </div>
+                
+                <div class="nav-actions">
+                    <button onclick="toggleTheme()" class="icon-btn" data-tooltip="Toggle theme">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="5"/>
+                            <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                        </svg>
+                    </button>
+                    
+                    <button onclick="showNotifications()" class="icon-btn" data-tooltip="Notifications">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+                            <path d="M13.73 21a2 2 0 01-3.46 0"/>
+                        </svg>
+                    </button>
+                    
+                    <button onclick="showUserMenu()" class="icon-btn" data-tooltip="User menu">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
+                            <circle cx="12" cy="7" r="4"/>
+                        </svg>
+                    </button>
+                    
+                    <button onclick="toggleMobileSidebar()" class="icon-btn menu-toggle" data-tooltip="Menu">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 12h18M3 6h18M3 18h18"/>
+                        </svg>
+                    </button>
+                </div>
+            </header>
+        `;
+    }
+}
+
+customElements.define('custom-header', CustomHeader);

components/sidebar.js

@@ -0,0 +1,271 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+                * { font-family: 'Inter', sans-serif; }
+                
+                .sidebar {
+                    width: 256px;
+                    background: rgba(17, 24, 39, 0.5);
+                    backdrop-filter: blur(20px);
+                    -webkit-backdrop-filter: blur(20px);
+                    border-right: 1px solid rgba(255, 255, 255, 0.1);
+                    padding: 1.5rem 0;
+                    overflow-y: auto;
+                    height: calc(100vh - 64px);
+                    position: fixed;
+                    left: 0;
+                    top: 64px;
+                    z-index: 40;
+                    transition: transform 0.3s ease;
+                }
+                
+                .nav-section {
+                    margin-bottom: 2rem;
+                }
+                
+                .nav-title {
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    color: #71717a;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    padding: 0 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem 1.5rem;
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: all 0.2s ease;
+                    position: relative;
+                    cursor: pointer;
+                }
+                
+                .nav-item:hover {
+                    background: rgba(255, 255, 255, 0.05);
+                    color: #ffffff;
+                    padding-left: 2rem;
+                }
+                
+                .nav-item.active {
+                    background: rgba(255, 255, 255, 0.1);
+                    color: #ffffff;
+                }
+                
+                .nav-item.active::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 3px;
+                    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
+                }
+                
+                .nav-icon {
+                    width: 20px;
+                    height: 20px;
+                    transition: transform 0.2s ease;
+                }
+                
+                .nav-item:hover .nav-icon {
+                    transform: scale(1.1);
+                }
+                
+                .new-chat-btn {
+                    margin: 0 1.5rem 1.5rem;
+                    padding: 0.75rem 1.5rem;
+                    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
+                    color: #111827;
+                    border-radius: 12px;
+                    font-weight: 600;
+                    text-align: center;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    border: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 0.5rem;
+                }
+                
+                .new-chat-btn:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
+                }
+                
+                .chat-history {
+                    max-height: 300px;
+                    overflow-y: auto;
+                    margin-bottom: 1rem;
+                }
+                
+                .history-item {
+                    padding: 0.5rem 1.5rem;
+                    color: #71717a;
+                    font-size: 0.875rem;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                
+                .history-item:hover {
+                    color: #d1d5db;
+                    background: rgba(255, 255, 255, 0.03);
+                }
+                
+                .divider {
+                    height: 1px;
+                    background: rgba(255, 255, 255, 0.1);
+                    margin: 1rem 0;
+                }
+                
+                @media (max-width: 768px) {
+                    .sidebar {
+                        transform: translateX(-100%);
+                    }
+                    
+                    .sidebar.active {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+            
+            <nav class="sidebar">
+                <button onclick="startNewChat()" class="new-chat-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2">
+                        <path d="M12 5v14m-7-7h14"/>
+                    </svg>
+                    New Chat
+                </button>
+                
+                <div class="nav-section">
+                    <div class="nav-title">Recent Chats</div>
+                    <div class="chat-history" id="recentChats">
+                        <div class="history-item">How to create a responsive design?</div>
+                        <div class="history-item">JavaScript async patterns</div>
+                        <div class="history-item">CSS Grid vs Flexbox</div>
+                        <div class="history-item">React performance tips</div>
+                    </div>
+                </div>
+                
+                <div class="divider"></div>
+                
+                <div class="nav-section">
+                    <div class="nav-title">Main</div>
+                    <a href="/" class="nav-item active">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+                            <path d="M9 22V12h6v10"/>
+                        </svg>
+                        Home
+                    </a>
+                    <a href="/chat" class="nav-item">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                        </svg>
+                        Chat
+                    </a>
+                    <a href="/files" class="nav-item">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/>
+                            <path d="M13 2v7h7"/>
+                        </svg>
+                        Files
+                    </a>
+                </div>
+                
+                <div class="divider"></div>
+                
+                <div class="nav-section">
+                    <div class="nav-title">Settings</div>
+                    <a href="/settings" class="nav-item">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.96l4.24 4.24m12.44 0l4.24 4.24M1.54 14.04l4.24-4.24"/>
+                        </svg>
+                        Settings
+                    </a>
+                    <a href="/about" class="nav-item">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M12 6v6l4 2"/>
+                        </svg>
+                            About
+                        </svg>
+                    </a>
+                </div>
+                
+                <div class="divider"></div>
+                
+                <div class="nav-section">
+                    <a href="/upgrade" class="nav-item">
+                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                        Upgrade to Pro
+                    </a>
+                </div>
+            </nav>
+        `;
+    }
+    
+    // Add methods dynamically since shadow DOM doesn't allow direct access from parent
+    connectedCallback() {
+        setTimeout(() => {
+            const navItems = this.shadowRoot.querySelectorAll('.nav-item');
+            navItems.forEach(item => {
+                item.addEventListener('click', function(e) {
+                    if (this.getAttribute('href').startsWith('/')) {
+                        e.preventDefault();
+                        // Navigate to new page (SPA style)
+                        window.history.pushState({}, '', this.getAttribute('href'));
+                        updateActiveNavItem(this);
+                    }
+                });
+            });
+            
+            const historyItems = this.shadowRoot.querySelectorAll('.history-item');
+            historyItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    loadChatHistory(this.textContent);
+                });
+            });
+        }, 0);
+    }
+}
+
+function updateActiveNavItem(activeItem) {
+    document.querySelectorAll('custom-sidebar').forEach(sidebar => {
+        const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
+        navItems.forEach(item => item.classList.remove('active'));
+    });
+    activeItem.classList.add('active');
+}
+
+function startNewChat() {
+    clearChat();
+}
+
+function loadChatHistory(topic) {
+    // Load specific chat history
+    console.log('Loading chat history for:', topic);
+}
+
+function toggleMobileSidebar() {
+    const sidebar = document.querySelector('custom-sidebar');
+    if (sidebar) {
+        sidebar.shadowRoot.querySelector('.sidebar').classList.toggle('active');
+    }
+}
+
+customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -1,19 +1,251 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Nexus AI - Futuristic Chat Platform</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        * { font-family: 'Inter', sans-serif; }
+        .gradient-shift { animation: gradientShift 8s ease-in-out infinite; }
+        @keyframes gradientShift {
+            0%, 100% { background: rgb(17, 24, 39); }
+            50% { background: rgb(9, 9, 11); }
+        }
+        .typing-indicator span { animation: typing 1.4s infinite; }
+        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }
+            30% { transform: translateY(-10px); opacity: 1; }
+        }
+        .scroll-smooth { scroll-behavior: smooth; }
+        .noise {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.02;
+            z-index: 1;
+            pointer-events: none;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+        }
+        .glow {
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1),
+                        0 0 40px rgba(255, 255, 255, 0.05),
+                        0 0 60px rgba(255, 255, 255, 0.03);
+        }
+        .message-slide-in {
+            animation: slideInFade 0.3s ease-out;
+        }
+        @keyframes slideInFade {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+<body class="bg-zinc-950 text-white min-h-screen gradient-shift relative overflow-hidden">
+    <div class="noise"></div>
+    
+    <!-- Header -->
+    <custom-header></custom-header>
+    
+    <!-- Main Container -->
+    <div class="flex h-[calc(100vh-64px)] relative z-10">
+        
+        <!-- Left Sidebar -->
+        <custom-sidebar class="w-64 bg-zinc-900/50 backdrop-blur-xl border-r border-zinc-800"></custom-sidebar>
+        
+        <!-- Main Chat Area -->
+        <main class="flex-1 flex flex-col bg-zinc-950 relative">
+            <!-- Chat Header -->
+            <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center glow">
+                        <i data-feather="cpu" class="w-5 h-5 text-zinc-900"></i>
+                    </div>
+                    <div>
+                        <h2 class="font-semibold text-white">Neural Assistant</h2>
+                        <p class="text-xs text-zinc-400">Online • Powered by AI</p>
+                    </div>
+                </div>
+                <button onclick="toggleChatMode()" class="p-2 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
+                    <i data-feather="maximize-2" class="w-5 h-5 text-zinc-400"></i>
+                </button>
+            </div>
+            
+            <!-- Messages Container -->
+            <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;">
+                <!-- AI Welcome Message -->
+                <div class="flex items-start space-x-3 message-slide-in">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
+                        <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+                    </div>
+                    <div class="max-w-xl">
+                        <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
+                            <p class="text-white leading-relaxed">Welcome to Neural Nexus AI 🚀</p>
+                            <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p>
+                        </div>
+                        <p class="text-xs text-zinc-500 mt-1">Just now</p>
+                    </div>
+                </div>
+                
+                <div id="typingIndicator" class="hidden flex items-center space-x-3">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
+                        <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+                    </div>
+                    <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4">
+                        <div class="typing-indicator flex space-x-1">
+                            <span class="w-2 h-2 bg-white rounded-full"></span>
+                            <span class="w-2 h-2 bg-white rounded-full"></span>
+                            <span class="w-2 h-2 bg-white rounded-full"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Input Area -->
+            <div class="bg-zinc-900/30 backdrop-blur-lg border-t border-zinc-800 p-4">
+                <div class="flex items-end space-x-3">
+                    <button class="p-3 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
+                        <i data-feather="paperclip" class="w-5 h-5 text-zinc-400"></i>
+                    </button>
+                    <div class="flex-1 relative">
+                        <textarea 
+                            id="messageInput"
+                            rows="1"
+                            placeholder="Type your message..."
+                            class="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 pr-12 text-white placeholder-zinc-500 resize-none focus:outline-none focus:border-white focus:glow transition-all duration-200"
+                            onkeypress="handleKeyPress(event)"
+                            oninput="autoResize(this)"
+                        ></textarea>
+                        <button class="absolute right-2 bottom-2 p-2 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
+                            <i data-feather="smile" class="w-4 h-4 text-zinc-400"></i>
+                        </button>
+                    </div>
+                    <button 
+                        onclick="sendMessage()"
+                        class="p-3 bg-gradient-to-r from-white to-zinc-200 text-zinc-900 rounded-xl hover:scale-105 transition-all duration-200 hover:shadow-lg hover:shadow-white/20"
+                    >
+                        <i data-feather="send" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="flex items-center justify-between mt-2">
+                    <p class="text-xs text-zinc-500">Press Enter to send, Shift+Enter for new line</p>
+                    <div class="flex items-center space-x-2">
+                        <button onclick="clearChat()" class="text-xs text-zinc-500 hover:text-white transition-colors">Clear chat</button>
+                        <span class="text-zinc-700">•</span>
+                        <button onclick="exportChat()" class="text-xs text-zinc-500 hover:text-white transition-colors">Export</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <!-- Right Sidebar -->
+        <aside class="w-80 bg-zinc-900/50 backdrop-blur-xl border-l border-zinc-800 p-6 space-y-6">
+            <!-- AI Status -->
+            <div class="bg-zinc-800/50 rounded-xl p-4 glow">
+                <h3 class="font-semibold text-white mb-3 flex items-center">
+                    <i data-feather="activity" class="w-4 h-4 mr-2"></i>
+                    System Status
+                </h3>
+                <div class="space-y-2">
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-zinc-400">Model</span>
+                        <span class="text-sm text-white font-medium">GPT-4 Turbo</span>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-zinc-400">Response Time</span>
+                        <span class="text-sm text-green-400 font-medium">~0.8s</span>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-zinc-400">Tokens Used</span>
+                        <span class="text-sm text-white font-medium">1,247</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- AI Capabilities -->
+            <div>
+                <h3 class="font-semibold text-white mb-3 flex items-center">
+                    <i data-feather="zap" class="w-4 h-4 mr-2"></i>
+                    Capabilities
+                </h3>
+                <div class="space-y-2">
+                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
+                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                        <span>Code Generation</span>
+                    </div>
+                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
+                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                        <span>Data Analysis</span>
+                    </div>
+                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
+                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                        <span>Creative Writing</span>
+                    </div>
+                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
+                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                        <span>Problem Solving</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Tips -->
+            <div>
+                <h3 class="font-semibold text-white mb-3 flex items-center">
+                    <i data-feather="info" class="w-4 h-4 mr-2"></i>
+                    Pro Tips
+                </h3>
+                <ul class="space-y-2 text-sm text-zinc-400">
+                    <li>• Use /help for quick commands</li>
+                    <li>• Try markdown formatting</li>
+                    <li>• Upload files for analysis</li>
+                    <li>• Use @ to mention contexts</li>
+                </ul>
+            </div>
+            
+            <!-- Memory Usage -->
+            <div>
+                <h3 class="font-semibold text-white mb-3 flex items-center">
+                    <i data-feather="hard-drive" class="w-4 h-4 mr-2"></i>
+                    Memory Context
+                </h3>
+                <div class="bg-zinc-800/50 rounded-xl p-3">
+                    <div class="flex justify-between text-xs mb-2">
+                        <span class="text-zinc-400">Used</span>
+                        <span class="text-white">68%</span>
+                    </div>
+                    <div class="w-full bg-zinc-800 rounded-full h-2">
+                        <div class="bg-gradient-to-r from-white to-zinc-400 h-2 rounded-full" style="width: 68%"></div>
+                    </div>
+                    <p class="text-xs text-zinc-500 mt-2">6,800 / 10,000 tokens</p>
+                </div>
+            </div>
+        </aside>
+    </div>
+    
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+    
+    <script src="components/header.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,322 @@
+// Global Variables
+let chatHistory = [];
+ let isCompactMode = false;
+ let isConnected = true;
+
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    initializeApp();
+    setupEventListeners();
+});
+
+function initializeApp() {
+    // Load chat history from localStorage
+    const savedHistory = localStorage.getItem('chatHistory');
+    if (savedHistory) {
+        chatHistory = JSON.parse(savedHistory);
+        renderChatHistory();
+    }
+    
+    // Check connection status
+    checkConnectionStatus();
+    
+    // Initialize tooltips and other UI elements
+    initializeTooltips();
+}
+
+function setupEventListeners() {
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl/Cmd + K for clear chat
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            clearChat();
+        }
+        
+        // Escape to close modals
+        if (e.key === 'Escape') {
+            closeAllModals();
+        }
+        
+        // Ctrl/Cmd + / for help
+        if ((e.ctrlKey || e.metaKey) && e.key === '/') {
+            e.preventDefault();
+            showHelp();
+        }
+    });
+    
+    // Auto-resize textarea
+    const messageInput = document.getElementById('messageInput');
+    messageInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+}
+
+functionsendMessage() {
+    const input = document.getElementById('messageInput');
+    const message = input.value.trim();
+    
+    if (!message || !isConnected) return;
+    
+    // Add user message
+    addMessage(message, 'user');
+    
+    // Clear input
+    input.value = '';
+    input.style.height = 'auto';
+    
+    // Show typing indicator
+    showTypingIndicator();
+    
+    // Simulate AI response
+    setTimeout(() => {
+        hideTypingIndicator();
+        const response = generateAIResponse(message);
+        addMessage(response, 'ai');
+    }, 1000 + Math.random() * 1500);
+}
+
+function addMessage(content, sender) {
+    const chatContainer = document.getElementById('chatContainer');
+    const timestamp = new Date().toLocaleTimeString('en-US', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+    });
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `flex items-start space-x-3 message-slide-in ${sender === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`;
+    
+    if (sender === 'user') {
+        messageDiv.innerHTML = `
+            <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
+                <i data-feather="user" class="w-4 h-4 text-zinc-400"></i>
+            </div>
+            <div class="max-w-xl">
+                <div class="bg-gradient-to-r from-white to-zinc-100 text-zinc-900 rounded-2xl rounded-tr-sm p-4 hover:scale-[1.02] transition-all duration-200 shadow-lg">
+                    <p class="leading-relaxed">${content}</p>
+                </div>
+                <p class="text-xs text-zinc-500 mt-1 text-right">${timestamp}</p>
+            </div>
+        `;
+    } else {
+        const processedContent = marked.parse(content);
+        messageDiv.innerHTML = `
+            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
+                <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+            </div>
+            <div class="max-w-xl">
+                <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
+                    <div class="markdown text-white">${processedContent}</div>
+                </div>
+                <p class="text-xs text-zinc-500 mt-1">${timestamp}</p>
+            </div>
+        `;
+    }
+    
+    chatContainer.appendChild(messageDiv);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    
+    // Re-initialize feather icons for new elements
+    feather.replace();
+    
+    // Save to history
+    chatHistory.push({ content, sender, timestamp });
+    saveChatHistory();
+    
+    // Update token count
+    updateTokenCount();
+}
+
+function generateAIResponse(userMessage) {
+    const responses = [
+        "I understand you're asking about: \"" + userMessage + "\". Let me help you with that. Based on my analysis, this involves several key components that we should consider carefully.",
+        "That's an interesting question! Here's my take on it: " + userMessage + " deserves attention because it touches on important aspects of modern technology and its applications.",
+        "Great question! " + userMessage + " is a topic I can elaborate on. From my perspective, there are multiple approaches we can take to understand this better.",
+        "I appreciate you bringing this up. Regarding " + userMessage + ", I think we should explore the underlying principles and practical implications.",
+        "This is a fascinating topic! " + userMessage + " connects to broader concepts in technology and innovation. Let me share some insights that might help."
+    ];
+    
+    return responses[Math.floor(Math.random() * responses.length)];
+}
+
+function handleKeyPress(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        sendMessage();
+    }
+}
+
+function autoResize(textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+}
+
+function showTypingIndicator() {
+    document.getElementById('typingIndicator').classList.remove('hidden');
+    const chatContainer = document.getElementById('chatContainer');
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+function hideTypingIndicator() {
+    document.getElementById('typingIndicator').classList.add('hidden');
+}
+
+function toggleChatMode() {
+    isCompactMode = !isCompactMode;
+    const chatContainer = document.getElementById('chatContainer');
+    const messages = chatContainer.querySelectorAll('.flex');
+    
+    if (isCompactMode) {
+        chatContainer.classList.add('compact');
+        messages.forEach(msg => {
+            msg.style.marginBottom = '0.5rem';
+        });
+    } else {
+        chatContainer.classList.remove('compact');
+        messages.forEach(msg => {
+            msg.style.marginBottom = '1rem';
+        });
+    }
+    
+    localStorage.setItem('chatMode', isCompactMode ? 'compact' : 'spacious');
+}
+
+function clearChat() {
+    if (confirm('Are you sure you want to clear the entire chat history?')) {
+        const chatContainer = document.getElementById('chatContainer');
+        chatContainer.innerHTML = `
+            <div class="flex items-start space-x-3 message-slide-in">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
+                    <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+                </div>
+                <div class="max-w-xl">
+                    <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
+                        <p class="text-white leading-relaxed">Welcome to Neural Nexus AI 🚀</p>
+                        <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p>
+                    </div>
+                    <p class="text-xs text-zinc-500 mt-1">Just now</p>
+                </div>
+            </div>
+        `;
+        chatHistory = [];
+        saveChatHistory();
+        feather.replace();
+    }
+}
+
+function exportChat() {
+    const chatText = chatHistory.map(msg => 
+        `[${msg.timestamp}] ${msg.sender === 'user' ? 'You' : 'AI'}: ${msg.content}`
+    ).join('\n\n');
+    
+    const blob = new Blob([chatText], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `neural-nexus-chat-${new Date().toISOString().split('T')[0]}.txt`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+}
+
+function saveChatHistory() {
+    localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+}
+
+function renderChatHistory() {
+    chatHistory.forEach(msg => {
+        addMessage(msg.content, msg.sender);
+    });
+}
+
+function updateTokenCount() {
+    const tokens = chatHistory.reduce((total, msg) => 
+        total + msg.content.split(' ').length, 0
+    );
+    
+    const percentage = Math.min((tokens / 10000) * 100, 100);
+    const progressBar = document.querySelector('.bg-gradient-to-r');
+    if (progressBar) {
+        progressBar.style.width = percentage + '%';
+    }
+    
+    const tokenText = document.querySelector('.text-xs.text-zinc-500');
+    if (tokenText) {
+        tokenText.textContent = `${tokens.toLocaleString()} / 10,000 tokens`;
+    }
+}
+
+function checkConnectionStatus() {
+    // Simulate connection check
+    fetch('https://api.openai.com/v1/models')
+        .then(() => {
+            isConnected = true;
+            updateConnectionStatus(true);
+        })
+        .catch(() => {
+            isConnected = false;
+            updateConnectionStatus(false);
+        });
+}
+
+function updateConnectionStatus(connected) {
+    const statusElements = document.querySelectorAll('[data-connection-status]');
+    statusElements.forEach(el => {
+        el.textContent = connected ? 'Online' : 'Offline';
+        el.className = connected ? 'text-green-400' : 'text-red-400';
+    });
+}
+
+function initializeTooltips() {
+    // Add hover tooltips for icons
+    const tooltipElements = document.querySelectorAll('[data-tooltip]');
+    tooltipElements.forEach(el => {
+        el.addEventListener('mouseenter', function(e) {
+            const tooltip = document.createElement('div');
+            tooltip.className = 'absolute bg-zinc-800 text-white text-xs rounded px-2 py-1 z-50';
+            tooltip.textContent = this.dataset.tooltip;
+            tooltip.style.top = (e.clientY - 30) + 'px';
+            tooltip.style.left = e.clientX + 'px';
+            document.body.appendChild(tooltip);
+            
+            this.addEventListener('mouseleave', function() {
+                tooltip.remove();
+            }, { once: true });
+        });
+    });
+}
+
+function closeAllModals() {
+    // Close any open modals or dropdowns
+    const modals = document.querySelectorAll('.modal');
+    modals.forEach(modal => modal.classList.add('hidden'));
+}
+
+function showHelp() {
+    const helpContent = `
+Available Commands:
+/help - Show this help message
+/clear - Clear chat history
+/export - Export chat as text file
+/compact - Toggle compact mode
+
+Keyboard Shortcuts:
+Ctrl+K - Clear chat
+Ctrl+/ - Show help
+Tab - Auto-complete
+    `;
+    
+    addMessage(helpContent, 'ai');
+}
+
+// Simulate real-time updates
+setInterval(() => {
+    // Update random metrics
+    const responseTime = (0.5 + Math.random() * 0.8).toFixed(1);
+    const responseElements = document.querySelectorAll('.text-green-400');
+    responseElements.forEach(el => {
+        if (el.textContent.includes('~')) {
+            el.textContent = `~${responseTime}s`;
+        }
+    });
+}, 5000);

style.css

@@ -1,28 +1,140 @@
+/* Global Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #18181b;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #525252;
+    border-radius: 4px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #71717a;
 }
+
+/* Glassmorphism Effects */
+.glass {
+    background: rgba(17, 24, 39, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* Hover Effects */
+.hover-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
+}
+
+/* Animations */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.pulse-animation {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.float-animation {
+    animation: float 3s ease-in-out infinite;
+}
+
+/* Markdown Styling */
+.markdown h1 { @apply text-2xl font-bold text-white mb-4 mt-6; }
+.markdown h2 { @apply text-xl font-semibold text-white mb-3 mt-5; }
+.markdown h3 { @apply text-lg font-medium text-white mb-2 mt-4; }
+.markdown p { @apply text-zinc-300 mb-4 leading-relaxed; }
+.markdown code { @apply bg-zinc-800 px-1 py-0.5 rounded text-sm text-green-400; }
+.markdown pre {
+    @apply bg-zinc-900 rounded-lg p-4 overflow-x-auto mb-4 border border-zinc-800;
+    font-family: 'Courier New', monospace;
+}
+.markdown pre code { @apply bg-transparent text-zinc-300; }
+.markdown ul { @apply list-disc list-inside text-zinc-300 mb-4 space-y-1; }
+.markdown ol { @apply list-decimal list-inside text-zinc-300 mb-4 space-y-1; }
+.markdown blockquote {
+    @apply border-l-4 border-zinc-600 pl-4 italic text-zinc-400 mb-4;
+}
+.markdown a { @apply text-white underline underline-offset-2 hover:text-zinc-300; }
+.markdown table {
+    @apply w-full border-collapse mb-4;
+}
+.markdown th {
+    @apply border border-zinc-700 px-4 py-2 bg-zinc-900 text-left font-semibold;
+}
+.markdown td {
+    @apply border border-zinc-700 px-4 py-2 text-zinc-300;
+}
+
+/* Transition Classes */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Utility Classes */
+.text-shadow {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.border-glow {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
+                0 0 20px rgba(255, 255, 255, 0.05);
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .sidebar-mobile {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .sidebar-mobile.active {
+        transform: translateX(0);
+    }
+}
+
+/* Loading Skeleton */
+.skeleton {
+    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}