<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WordPress AI Manager - UI V2</title>
    
    <!-- Authentication Check - MUST run before anything else -->
    <script>
        (async function() {
            try {
                const response = await fetch('/api/auth/verify', {
                    credentials: 'include'
                });
                
                if (!response.ok) {
                    window.location.href = '/admin-login.html';
                    return;
                }
                
                const data = await response.json();
                if (!data.valid) {
                    window.location.href = '/admin-login.html';
                    return;
                }
                
                // Auth verified - show page
                function showPage() {
                    document.body.classList.add('auth-verified');
                    const loader = document.getElementById('auth-loading');
                    if (loader) loader.classList.add('hidden');
                }
                
                // Show page immediately if DOM already loaded, otherwise wait
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', showPage);
                } else {
                    showPage();
                }
                
            } catch (error) {
                console.error('Auth check failed:', error);
                window.location.href = '/admin-login.html';
            }
        })();
    </script>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Auth Loading Screen */
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        body.auth-verified {
            opacity: 1;
        }
        
        #auth-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
        }
        
        #auth-loading.hidden {
            display: none;
        }
        
        /* Dark Glassmorphism Theme */
        
        .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-hover:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        
        .glass-active {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .glass-error {
            background: rgba(239, 68, 68, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        /* P0-5: Thinking Shimmer (global) */
        #thinking-shimmer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(59, 130, 246, 0.8) 50%, 
                transparent 100%);
            background-size: 200% 100%;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 9999;
        }
        
        #thinking-shimmer.is-loading {
            opacity: 1;
            animation: shimmer 1.5s linear infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        /* P0-1: Plan Outline Card (sticky) */
        #plan-outline-card {
            position: sticky;
            top: 1rem;
            z-index: 100;
            transition: all 0.3s ease;
        }
        
        #plan-outline-card.collapsed {
            transform: scale(0.95);
            opacity: 0.8;
        }
        
        /* P0-2: Sources Panel (right drawer) */
        #sources-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 400px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        #sources-panel.open {
            transform: translateX(0);
        }
        
        #sources-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 999;
        }
        
        #sources-overlay.open {
            opacity: 1;
            pointer-events: all;
        }
        
        .source-item {
            cursor: move;
        }
        
        .source-item.dragging {
            opacity: 0.5;
        }
        
        /* P0-3: Research Mode Toggle (pill) */
        .toggle-pill {
            position: relative;
            width: 52px;
            height: 28px;
            background: rgba(107, 114, 128, 0.3);
            border-radius: 14px;
            transition: background 0.3s;
            cursor: pointer;
        }
        
        .toggle-pill.on {
            background: rgba(59, 130, 246, 0.4);
        }
        
        .toggle-pill .toggle-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 12px;
            transition: transform 0.3s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .toggle-pill.on .toggle-knob {
            transform: translateX(24px);
        }
        
        /* P0-4: Publish Checklist Badge */
        .checklist-badge {
            position: relative;
            display: inline-block;
        }
        
        .checklist-badge .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 1000;
        }
        
        .checklist-badge:hover .tooltip {
            opacity: 1;
        }
        
        .checklist-badge .tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.9);
        }
        
        /* Scrollbar Styling */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
        
        /* Smooth Animations */
        .animate-slide-up {
            animation: slideUp 0.3s ease-out;
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-pulse-slow {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        /* Loading Dots */
        .loading-dots span {
            animation: blink 1.4s infinite;
        }
        
        .loading-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .loading-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes blink {
            0%, 80%, 100% { opacity: 0.3; }
            40% { opacity: 1; }
        }
    </style>
</head>
<body class="text-white">
    <!-- Auth Loading Screen -->
    <div id="auth-loading">
        <div class="text-center">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
            <div class="text-gray-400">Verifying authentication...</div>
        </div>
    </div>
    
    <!-- P0-5: Thinking Shimmer -->
    <div id="thinking-shimmer"></div>
    
    <!-- P0-2: Sources Panel Overlay -->
    <div id="sources-overlay" data-action="sources_close"></div>
    
    <!-- P0-2: Sources Panel (Right Drawer) -->
    <div id="sources-panel" class="glass">
        <div class="p-6 h-full flex flex-col">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">Citations: <span id="sources-count">0</span> sources</h3>
                <button data-action="sources_close" class="text-gray-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <div id="sources-list" class="flex-1 overflow-y-auto space-y-2 mb-4">
                <!-- Sources will be rendered here -->
            </div>
            
            <div class="flex space-x-2">
                <button data-action="sources_apply" class="flex-1 bg-blue-500 hover:bg-blue-600 rounded-lg px-4 py-2 text-sm font-medium transition-all">
                    Apply
                </button>
                <button data-action="sources_close" class="flex-1 glass glass-hover rounded-lg px-4 py-2 text-sm font-medium transition-all">
                    Cancel
                </button>
            </div>
        </div>
    </div>
    
    <div class="container mx-auto max-w-4xl h-screen flex flex-col p-4">
        <!-- Header -->
        <div class="glass rounded-2xl p-4 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <h1 class="text-xl font-bold">
                        <span class="text-blue-400">WordPress</span> AI Manager
                    </h1>
                    <p class="text-xs text-gray-400 mt-1">AI-Powered Content Management</p>
                    <!-- Multi-Site Selector -->
                    <div id="site-selector-container" class="mt-2"></div>
                </div>
                
                <!-- P0-3: Research Mode Toggle (pill) + Analytics Button + New Admin Buttons -->
                <div class="flex items-center flex-wrap gap-2 md:gap-3">
                    <button id="btn-analytics" data-action="toggle_analytics" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        📊 Costs
                    </button>
                    <button id="btn-image-library" data-action="open_image_library" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        🖼️ Images
                    </button>
                    <button id="btn-site-manager" data-action="toggle_site_manager" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        🌐 Sites
                    </button>
                    <button id="btn-pixie-settings" data-action="toggle_wordpress_ai_settings" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        ⚙️ Settings
                    </button>
                    <button id="btn-pixie-admin" data-action="toggle_pixie_admin" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        💬 Pixie
                    </button>
                    <button id="btn-logout" data-action="logout" class="text-xs px-2 py-1.5 md:px-3 glass glass-hover rounded-lg transition-all whitespace-nowrap">
                        🚪 Logout
                    </button>
                    <div class="flex items-center gap-2 whitespace-nowrap" title="Find sources & add citations when facts are needed. Turn off for opinion/evergreen pieces.">
                        <span class="text-xs text-gray-400 hidden md:inline">Research Mode (Auto)</span>
                        <span class="text-xs text-gray-400 md:hidden">Research</span>
                        <div id="toggle-research" data-action="toggle_research" class="toggle-pill on">
                            <div class="toggle-knob"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Analytics Panel -->
        <div id="analytics-panel" class="glass rounded-2xl p-5 mb-4 hidden">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-blue-300">📊 AI Costs Analytics</h2>
                <button data-action="toggle_analytics" class="text-xs text-gray-400 hover:text-white">Close</button>
            </div>
            <div id="analytics-content" class="space-y-4">
                <div class="text-center text-gray-400 py-8">Loading...</div>
            </div>
        </div>

        <!-- WordPress AI Settings Panel -->
        <div id="wordpress-ai-settings-panel" class="glass rounded-2xl p-5 mb-4 hidden">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-blue-300">🤖 WordPress AI Manager Settings</h2>
                <button data-action="toggle_wordpress_ai_settings" class="text-xs text-gray-400 hover:text-white">Close</button>
            </div>
            <div id="wordpress-ai-settings-content" class="space-y-4">
                <!-- Model Selection -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-300">AI Model</label>
                    <select id="wp-ai-model" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="openai/gpt-5.1">GPT-5.1 (OpenAI)</option>
                        <option value="x-ai/grok-4.1-fast">Grok 4.1 Fast (X.AI)</option>
                        <option value="x-ai/grok-4-fast">Grok 4 Fast (X.AI)</option>
                    </select>
                    <p class="text-xs text-gray-400">Select the AI model for all WordPress AI Manager tasks</p>
                </div>

                <!-- Reasoning Control (GPT) -->
                <div id="gpt-reasoning-control" class="space-y-2">
                    <label class="block text-sm font-medium text-gray-300">Reasoning Level (GPT-5.1)</label>
                    <div class="space-y-2">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="reasoning-effort" value="none" class="text-blue-500 focus:ring-blue-500">
                            <span class="text-sm text-gray-300">Disabled</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="reasoning-effort" value="low" class="text-blue-500 focus:ring-blue-500" checked>
                            <span class="text-sm text-gray-300">Low</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="reasoning-effort" value="medium" class="text-blue-500 focus:ring-blue-500">
                            <span class="text-sm text-gray-300">Medium</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="reasoning-effort" value="high" class="text-blue-500 focus:ring-blue-500">
                            <span class="text-sm text-gray-300">High</span>
                        </label>
                    </div>
                    <p class="text-xs text-gray-400">Higher reasoning levels improve accuracy but increase latency and cost</p>
                </div>

                <!-- Reasoning Control (Grok) -->
                <div id="grok-reasoning-control" class="space-y-2 hidden">
                    <label class="block text-sm font-medium text-gray-300">Reasoning Mode (Grok)</label>
                    <div class="flex items-center space-x-3">
                        <div id="toggle-grok-reasoning" class="toggle-pill cursor-pointer">
                            <div class="toggle-knob"></div>
                        </div>
                        <span class="text-sm text-gray-300">Enable Reasoning</span>
                    </div>
                    <p class="text-xs text-gray-400">Enable reasoning for improved accuracy (may increase latency)</p>
                </div>

                <!-- Save Button -->
                <div class="flex justify-end space-x-2">
                    <button id="btn-reset-wp-ai-settings" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm font-medium transition-all">
                        Reset to Defaults
                    </button>
                    <button id="btn-save-wp-ai-settings" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-sm font-medium transition-all">
                        Save Settings
                    </button>
                </div>

                <!-- Status Message -->
                <div id="wp-ai-settings-status" class="hidden text-sm text-center py-2 rounded-lg"></div>
            </div>
        </div>

        <!-- Pixie Settings Panel -->
        <div id="pixie-settings-panel" class="glass rounded-2xl p-5 mb-4 hidden">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-blue-300">⚙️ Pixie Settings</h2>
                <button data-action="toggle_pixie_settings" class="text-xs text-gray-400 hover:text-white">Close</button>
            </div>
            <div id="pixie-settings-content" class="space-y-4">
                <div class="text-center text-gray-400 py-8">Loading...</div>
            </div>
        </div>

        <!-- Site Manager Panel -->
        <div id="site-manager-panel" class="glass rounded-2xl p-5 mb-4 hidden">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-blue-300">🌐 Manage WordPress Sites</h2>
                <button data-action="toggle_site_manager" class="text-xs text-gray-400 hover:text-white">Close</button>
            </div>
            
            <!-- Current Site Display -->
            <div class="mb-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-xs text-gray-400 mb-1">Currently Active</div>
                        <div class="flex items-center gap-2">
                            <span id="current-site-name" class="text-lg font-semibold text-white">Loading...</span>
                            <span id="current-site-status" class="site-status"></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sites List -->
            <div class="mb-6">
                <h3 class="text-sm font-semibold text-gray-300 mb-3">Your Sites</h3>
                <div id="sites-list" class="space-y-2">
                    <div class="text-center text-gray-400 py-4">Loading sites...</div>
                </div>
            </div>
            
            <!-- Add New Site Form -->
            <div class="border-t border-white/10 pt-6">
                <h3 class="text-sm font-semibold text-gray-300 mb-3">Add New Site</h3>
                <form id="add-site-form" class="space-y-3">
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">Site Name</label>
                        <input id="new-site-name" type="text" placeholder="My Blog" required
                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">WordPress URL</label>
                        <input id="new-site-url" type="url" placeholder="https://example.com" required
                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">WordPress Username</label>
                        <input id="new-site-user" type="text" placeholder="admin" required
                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">Application Password</label>
                        <input id="new-site-pass" type="password" placeholder="xxxx xxxx xxxx xxxx" required
                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Create at: yoursite.com/wp-admin/profile.php</p>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">Admin Token</label>
                        <input id="new-site-admin-token" type="password" placeholder="Your admin token" required
                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Get from Cloudflare dashboard or .dev.vars</p>
                    </div>
                    <button type="submit" class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-sm font-medium transition-all">
                        Add Site & Test Connection
                    </button>
                </form>
            </div>
        </div>

        <!-- Pixie Admin Panel -->
        <div id="pixie-admin-panel" class="glass rounded-2xl p-5 mb-4 hidden">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-blue-300">💬 Pixie Chat Admin</h2>
                <button data-action="toggle_pixie_admin" class="text-xs text-gray-400 hover:text-white">Close</button>
            </div>
            <div id="pixie-admin-content" class="space-y-4">
                <div class="text-center text-gray-400 py-8">Loading...</div>
            </div>
        </div>

        <!-- P0-1: Plan Outline Card (sticky) -->
        <div id="plan-outline-card" class="glass rounded-2xl p-4 mb-4 hidden">
            <div id="plan-outline-content">
                <h3 class="text-sm font-semibold text-blue-300 mb-2">Plan outline</h3>
                <ul id="plan-bullets" class="text-sm text-gray-300 space-y-1 mb-3">
                    <!-- Bullets will be rendered here -->
                </ul>
                <div class="flex space-x-2">
                    <button data-action="plan_run" class="flex-1 bg-blue-500 hover:bg-blue-600 rounded-lg px-4 py-2 text-sm font-medium transition-all">
                        Run this plan
                    </button>
                    <button data-action="plan_edit" class="glass glass-hover rounded-lg px-4 py-2 text-sm font-medium transition-all">
                        Edit
                    </button>
                    <button data-action="plan_cancel" class="glass glass-hover rounded-lg px-4 py-2 text-sm font-medium transition-all">
                        Cancel
                    </button>
                </div>
            </div>
            
            <!-- Mini bar (after run) -->
            <div id="plan-mini-bar" class="hidden">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-300">Plan completed</span>
                    <button data-action="plan_dismiss" class="text-gray-400 hover:text-white text-xs">
                        Dismiss
                    </button>
                </div>
            </div>
        </div>

        <!-- Chat Messages Area -->
        <div id="chat-container" class="flex-1 overflow-y-auto space-y-3 mb-4 pr-2">
            <!-- Welcome Message -->
            <div class="glass rounded-xl p-4 animate-slide-up">
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm text-gray-300">Welcome! I can help you manage your WordPress content.</p>
                        <p class="text-xs text-gray-400 mt-2">Try: "Research latest AI trends 2025 and create article"</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Global Quick Action Chips (Above Input) - NEW: Categories, Posts, Products, Stats, Health -->
        <div id="global-quick-actions" class="mb-3 flex flex-wrap gap-2">
            <button data-action="quick_categories"
                    class="glass glass-hover rounded-full px-3 py-1.5 text-xs transition-all">
                📁 Categories
            </button>
            <button data-action="quick_posts"
                    class="glass glass-hover rounded-full px-3 py-1.5 text-xs transition-all">
                📝 Posts
            </button>
            <button data-action="quick_products" id="quick-products-btn"
                    class="glass glass-hover rounded-full px-3 py-1.5 text-xs transition-all" style="display:none;">
                🛍️ Products
            </button>
            <button data-action="quick_stats"
                    class="glass glass-hover rounded-full px-3 py-1.5 text-xs transition-all">
                📊 Stats
            </button>
            <button data-action="quick_health"
                    class="glass glass-hover rounded-full px-3 py-1.5 text-xs transition-all">
                ⚠️ Health
            </button>
        </div>

        <!-- Image Preview (shown when image is uploaded) -->
        <div id="image-preview-container" class="glass rounded-2xl p-4 mb-3 hidden">
            <div class="flex items-start space-x-3">
                <img id="image-preview" src="" alt="Preview" class="w-24 h-24 object-cover rounded-lg">
                <div class="flex-1">
                    <p class="text-sm text-gray-300 mb-2">Image ready to upload</p>
                    <div class="flex space-x-2">
                        <button data-action="set_featured_image" class="bg-blue-500 hover:bg-blue-600 rounded-lg px-3 py-1.5 text-xs transition-all">
                            📷 Use as featured image
                        </button>
                        <button data-action="remove_image" class="glass glass-hover rounded-lg px-3 py-1.5 text-xs transition-all">
                            Remove
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sticky Composer -->
        <div class="glass rounded-2xl p-4">
            <!-- Inline Images Toggle -->
            <div class="mb-3 flex items-center space-x-2">
                <label class="text-xs text-gray-400">Inline Images:</label>
                <select 
                    id="inline-images-toggle" 
                    class="bg-white/10 text-white text-xs rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 border border-white/20">
                    <option value="auto" selected>Auto (smart count)</option>
                    <option value="0">Off</option>
                    <option value="1">1 image</option>
                    <option value="2">2 images</option>
                    <option value="3">3 images</option>
                </select>
                <span class="text-xs text-gray-500" title="Auto: <800w=1, 800-1199w=2, ≥1200w=3">ℹ️</span>
            </div>
            
            <form id="chat-form" class="flex space-x-3">
                <input 
                    type="file" 
                    id="image-input" 
                    accept="image/*"
                    class="hidden"
                />
                <button 
                    type="button"
                    id="attach-btn"
                    data-action="attach_image"
                    class="bg-gray-600 hover:bg-gray-500 rounded-full w-12 h-12 flex items-center justify-center transition-all flex-shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                    </svg>
                </button>
                <input 
                    type="text" 
                    id="message-input" 
                    placeholder="Type your message..."
                    class="flex-1 bg-white/10 rounded-full px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                    autocomplete="off"
                />
                <button 
                    type="submit" 
                    id="send-btn"
                    class="bg-blue-500 hover:bg-blue-600 rounded-full w-12 h-12 flex items-center justify-center transition-all flex-shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                    </svg>
                </button>
            </form>
        </div>
    </div>

    <script src="/static/progress-tracker.js?v=2.3.0"></script>
    <script src="/static/category-intelligence.js?v=2.2.0"></script>
    <script src="/static/app-v2.js?v=2.5.2"></script>
    
    <!-- Multi-Site Selector Component -->
    <style>
        /* Site Selector Styles */
        .site-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .site-selector label {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-weight: 500;
        }
        
        .site-dropdown {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 0.5rem;
            padding: 0.375rem 0.75rem;
            color: white;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .site-dropdown:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .site-dropdown:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        
        .site-selector-single {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.75rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 0.5rem;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .site-status {
            margin-left: 0.25rem;
            font-size: 1rem;
        }
        
        .site-status.healthy { color: #10b981; }
        .site-status.degraded { color: #f59e0b; }
        .site-status.down { color: #ef4444; }
        .site-status.unknown { color: #6b7280; }
        
        .site-card {
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            transition: all 0.2s;
        }
        
        .site-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
        .site-card.active {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
        }
    </style>
    <script src="/static/site-manager.js"></script>
    
    <!-- Authentication Protection -->
    <script>
        // Check authentication on page load
        (async function checkAuth() {
            try {
                const response = await fetch('/api/auth/verify', {
                    credentials: 'include'
                });
                
                if (!response.ok) {
                    // Not authenticated, redirect to login
                    window.location.href = '/admin-login.html';
                    return;
                }
                
                const data = await response.json();
                if (!data.valid) {
                    window.location.href = '/admin-login.html';
                }
            } catch (error) {
                console.error('Auth check failed:', error);
                window.location.href = '/admin-login.html';
            }
        })();
    </script>
    
    <!-- Pixie Customer Chat Widget -->
    <link rel="stylesheet" href="/static/pixie/pixie-widget.css">
    <script src="/static/pixie/pixie-widget.js"></script>
</body>
</html>
