diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -8,7 +8,7 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* ALL EXISTING CSS REMAINS EXACTLY THE SAME - Only adding fixes */
+        /* ALL EXISTING CSS REMAINS EXACTLY THE SAME */
         * {
             margin: 0;
             padding: 0;
@@ -346,21 +346,12 @@
             transform: translateY(-2px);
         }
         
-        /* CARD FIX - prevent edge cutting */
         .card {
             background: rgba(20, 20, 30, 0.8);
             border-radius: 15px;
             padding: 20px;
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-            overflow: visible !important; /* Important fix */
-            margin-bottom: 25px;
-            position: relative;
-        }
-        
-        /* Ensure card contents don't overflow */
-        .card > *:not(:last-child) {
-            margin-bottom: 15px;
         }
         
         .card-title {
@@ -571,53 +562,6 @@
             box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
         }
         
-        /* NEW: Document upload styles */
-        .document-upload-area {
-            margin-top: 15px;
-            padding: 15px;
-            background: rgba(20, 20, 30, 0.5);
-            border-radius: 10px;
-            border: 2px dashed rgba(90, 108, 255, 0.3);
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        
-        .document-upload-area:hover {
-            background: rgba(20, 20, 30, 0.7);
-            border-color: #5a6cff;
-        }
-        
-        .document-upload-area.dragover {
-            background: rgba(90, 108, 255, 0.1);
-            border-color: #5a6cff;
-        }
-        
-        .upload-icon {
-            font-size: 2em;
-            color: #5a6cff;
-            margin-bottom: 10px;
-        }
-        
-        .upload-text {
-            color: #a0b0ff;
-            margin-bottom: 10px;
-        }
-        
-        .file-input {
-            display: none;
-        }
-        
-        .file-info {
-            margin-top: 10px;
-            padding: 8px;
-            background: rgba(90, 108, 255, 0.1);
-            border-radius: 8px;
-            font-size: 0.85em;
-            color: #a0b0ff;
-            display: none;
-        }
-        
         .rag-controls {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -776,2488 +720,4 @@
             }
             
             .side-panel {
-                position: fixed;
-                top: 0;
-                height: 100vh;
-                transform: translateX(-100%);
-                z-index: 1000;
-            }
-            
-            .side-panel.left {
-                left: 0;
-            }
-            
-            .side-panel.right {
-                right: 0;
-                transform: translateX(100%);
-            }
-            
-            .side-panel.active {
-                transform: translateX(0);
-            }
-            
-            .mobile-nav {
-                display: block;
-            }
-            
-            .main-content {
-                padding: 80px 20px 20px 20px;
-            }
-            
-            #canvasContainer {
-                height: 50vh;
-            }
-            
-            .chat-interface {
-                margin-top: 20px;
-            }
-            
-            .chat-messages {
-                height: 250px;
-            }
-            
-            /* Mobile card adjustments */
-            .card {
-                padding: 15px;
-                margin-bottom: 20px;
-            }
-            
-            .rag-controls {
-                grid-template-columns: 1fr;
-                gap: 8px;
-            }
-        }
-        
-        @media (max-width: 768px) {
-            #canvasContainer {
-                height: 40vh;
-            }
-            
-            .chat-messages {
-                height: 200px;
-            }
-            
-            .side-panel {
-                width: 100%;
-                max-width: 350px;
-            }
-            
-            .document-upload-area {
-                padding: 12px;
-            }
-            
-            .upload-icon {
-                font-size: 1.5em;
-            }
-        }
-        
-        @media (max-width: 480px) {
-            #canvasContainer {
-                height: 35vh;
-            }
-            
-            .chat-interface {
-                margin-top: 15px;
-            }
-            
-            .chat-messages {
-                height: 180px;
-                padding: 15px;
-            }
-            
-            .chat-input-container {
-                padding: 15px;
-            }
-            
-            .chat-input, .voice-input-btn, .send-btn {
-                min-height: 48px;
-                height: 48px;
-            }
-            
-            .button-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Mobile Navigation -->
-    <div class="mobile-nav">
-        <div class="mobile-menu-btn" id="mobileMenuBtn">
-            <span></span>
-            <span></span>
-            <span></span>
-        </div>
-    </div>
-    
-    <div class="mobile-panel-overlay" id="mobileOverlay"></div>
-    
-    <!-- Loading Screen -->
-    <div class="loading-screen" id="loadingScreen">
-        <div class="spinner"></div>
-        <div id="loadingText">Initializing AI Interface...</div>
-    </div>
-    
-    <!-- Error Screen -->
-    <div class="error-screen" id="errorScreen">
-        <h2>⚠️ Initialization Failed</h2>
-        <p id="errorMessage">Three.js library failed to load. Please check your internet connection or try again.</p>
-        <button class="retry-btn" id="retryBtn">Retry</button>
-    </div>
-    
-    <!-- Main Container -->
-    <div class="main-container">
-        <!-- Left Side Panel -->
-        <aside class="side-panel left">
-            <div class="card">
-                <div class="card-title">
-                    <i class="fas fa-sliders-h"></i>
-                    <span>Animation Controls</span>
-                </div>
-                
-                <div class="accordion">
-                    <div class="accordion-header" data-target="animationControls">
-                        <span>Particle Settings</span>
-                        <i class="fas fa-chevron-down"></i>
-                    </div>
-                    <div class="accordion-content" id="animationControls">
-                        <div class="control-group">
-                            <label>Animation Intensity</label>
-                            <div class="slider-container">
-                                <input type="range" id="intensity" min="0" max="100" value="50">
-                                <span class="value-display" id="intensityValue">50</span>
-                            </div>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Particle Count</label>
-                            <div class="slider-container">
-                                <input type="range" id="particleCount" min="100" max="5000" value="2000" step="100">
-                                <span class="value-display" id="particleCountValue">2000</span>
-                            </div>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Energy Level</label>
-                            <div class="slider-container">
-                                <input type="range" id="energy" min="0" max="100" value="30">
-                                <span class="value-display" id="energyValue">30</span>
-                            </div>
-                        </div>
-                        
-                        <div class="button-grid">
-                            <button class="preset-btn" data-preset="listening">🎤 Listening</button>
-                            <button class="preset-btn" data-preset="processing">⚡ Processing</button>
-                            <button class="preset-btn" data-preset="responding">💬 Responding</button>
-                            <button class="preset-btn" data-preset="exploring">🔍 Exploring</button>
-                            <button class="preset-btn" data-preset="teaching">📚 Teaching</button>
-                            <button class="preset-btn" data-preset="idle">🌀 Idle</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="card">
-                <div class="card-title">
-                    <i class="fas fa-graduation-cap"></i>
-                    <span>AI Training</span>
-                </div>
-                
-                <div class="accordion">
-                    <div class="accordion-header" data-target="trainingControls">
-                        <span>RAG Training</span>
-                        <i class="fas fa-chevron-down"></i>
-                    </div>
-                    <div class="accordion-content" id="trainingControls">
-                        <textarea class="rag-textarea" id="knowledgeText" placeholder="Add knowledge for AI training..."></textarea>
-                        
-                        <!-- NEW: Document Upload Area -->
-                        <div class="document-upload-area" id="documentUploadArea">
-                            <div class="upload-icon">
-                                <i class="fas fa-cloud-upload-alt"></i>
-                            </div>
-                            <div class="upload-text">
-                                Drag & drop documents or click to upload
-                            </div>
-                            <div class="upload-hint">
-                                Supports: PDF, TXT, DOC, DOCX
-                            </div>
-                            <input type="file" id="documentFile" class="file-input" accept=".pdf,.txt,.doc,.docx" multiple>
-                        </div>
-                        <div class="file-info" id="fileInfo"></div>
-                        
-                        <div class="rag-controls">
-                            <button class="rag-btn" id="addKnowledgeBtn">
-                                <i class="fas fa-plus"></i>
-                                Add Text
-                            </button>
-                            <button class="rag-btn primary" id="trainBtn">
-                                <i class="fas fa-brain"></i>
-                                Train AI
-                            </button>
-                        </div>
-                        
-                        <div class="rag-progress">
-                            <div class="rag-progress-bar" id="trainingProgress"></div>
-                        </div>
-                        
-                        <div class="rag-status" id="ragStatus" style="display: none;">
-                            <i class="fas fa-sync-alt fa-spin"></i>
-                            <span id="ragStatusText">Training in progress...</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </aside>
-        
-        <!-- Main Content -->
-        <main class="main-content">
-            <div id="canvasContainer">
-                <canvas id="mainCanvas"></canvas>
-            </div>
-            
-            <div class="chat-interface">
-                <div class="chat-container">
-                    <div class="chat-header">
-                        <div class="chat-title">
-                            <i class="fas fa-robot"></i>
-                            <span>AI Tutor Assistant</span>
-                        </div>
-                        <div class="chat-status">
-                            <span class="status-indicator"></span>
-                            <span id="chatStatusText">Online</span>
-                        </div>
-                    </div>
-                    
-                    <div class="chat-messages" id="chatMessages">
-                        <!-- Messages will be dynamically added here -->
-                        <div class="message message-ai">
-                            <div class="message-content">
-                                Hello! I'm your AI Tutor. I can help explain concepts, answer questions, and guide your learning. How can I assist you today?
-                            </div>
-                            <div class="message-time">Just now</div>
-                        </div>
-                        
-                        <div class="message message-ai">
-                            <div class="message-content">
-                                You can type your questions or click the microphone to speak. I'll respond with explanations, examples, and follow-up questions to enhance your understanding.
-                            </div>
-                            <div class="message-time">Just now</div>
-                        </div>
-                    </div>
-                    
-                    <div class="chat-input-container">
-                        <div class="input-wrapper">
-                            <textarea 
-                                class="chat-input" 
-                                id="chatInput" 
-                                placeholder="Type your question or click the microphone to speak..."
-                                rows="1"
-                            ></textarea>
-                            
-                            <button class="voice-input-btn" id="voiceBtn" title="Start voice input">
-                                <i class="fas fa-microphone"></i>
-                            </button>
-                            
-                            <button class="send-btn" id="sendBtn" title="Send message">
-                                <i class="fas fa-paper-plane"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-        
-        <!-- Right Side Panel -->
-        <aside class="side-panel right">
-            <div class="card">
-                <div class="card-title">
-                    <i class="fas fa-robot"></i>
-                    <span>Voice Synthesis</span>
-                </div>
-                
-                <div class="accordion">
-                    <div class="accordion-header" data-target="voiceControls">
-                        <span>Voice Settings</span>
-                        <i class="fas fa-chevron-down"></i>
-                    </div>
-                    <div class="accordion-content" id="voiceControls">
-                        <div class="control-group">
-                            <label>Voice Selection</label>
-                            <select class="voice-select" id="voiceSelect">
-                                <option value="">Loading voices...</option>
-                            </select>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Speech Rate</label>
-                            <div class="slider-container">
-                                <input type="range" class="voice-slider" id="rateSlider" min="0.5" max="2" step="0.1" value="1">
-                                <span class="value-display" id="rateValue">1.0x</span>
-                            </div>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Pitch Variation</label>
-                            <div class="slider-container">
-                                <input type="range" class="voice-slider" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">
-                                <span class="value-display" id="pitchValue">1.0</span>
-                            </div>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Volume Level</label>
-                            <div class="slider-container">
-                                <input type="range" class="voice-slider" id="volumeSlider" min="0.1" max="1" step="0.1" value="0.8">
-                                <span class="value-display" id="volumeValue">80%</span>
-                            </div>
-                        </div>
-                        
-                        <div class="voice-control-buttons">
-                            <button class="voice-btn" id="autoSpeakBtn" data-enabled="true">
-                                <i class="fas fa-bullhorn"></i>
-                                Auto-Speak
-                            </button>
-                            <button class="voice-btn stop" id="stopBtn">
-                                <i class="fas fa-stop"></i>
-                                Stop
-                            </button>
-                        </div>
-                        
-                        <button class="voice-btn" id="previewBtn" style="width: 100%; margin-top: 10px;">
-                            <i class="fas fa-play"></i>
-                            Preview Voice
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="card">
-                <div class="card-title">
-                    <i class="fas fa-plug"></i>
-                    <span>LLM Integration</span>
-                </div>
-                
-                <div class="accordion">
-                    <div class="accordion-header" data-target="llmControls">
-                        <span>API Settings</span>
-                        <i class="fas fa-chevron-down"></i>
-                    </div>
-                    <div class="accordion-content" id="llmControls">
-                        <div class="control-group">
-                            <label>Primary LLM API</label>
-                            <select class="voice-select" id="llmProvider">
-                                <option value="huggingface">Hugging Face</option>
-                                <option value="openai">OpenAI</option>
-                                <option value="anthropic">Anthropic Claude</option>
-                                <option value="google">Google Gemini</option>
-                                <option value="azure">Azure OpenAI</option>
-                                <option value="local">Local API</option>
-                            </select>
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>API Endpoint</label>
-                            <input type="text" class="rag-textarea" id="apiEndpoint" placeholder="https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium">
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>API Key</label>
-                            <input type="password" class="rag-textarea" id="apiKey" placeholder="Enter your API key">
-                        </div>
-                        
-                        <div class="control-group">
-                            <label>Model Name</label>
-                            <input type="text" class="rag-textarea" id="modelName" placeholder="microsoft/DialoGPT-medium">
-                        </div>
-                        
-                        <!-- NEW: Apply/Submit Button -->
-                        <div class="rag-controls">
-                            <button class="rag-btn" id="testApiBtn">
-                                <i class="fas fa-wifi"></i>
-                                Test Connection
-                            </button>
-                            <button class="rag-btn primary" id="applyApiBtn">
-                                <i class="fas fa-check"></i>
-                                Apply Settings
-                            </button>
-                        </div>
-                        
-                        <div class="rag-status" id="apiStatus" style="display: none;">
-                            <i class="fas fa-sync-alt fa-spin"></i>
-                            <span id="apiStatusText">Testing connection...</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </aside>
-    </div>
-
-    <script>
-        // Check if Three.js loaded properly
-        function checkThreeJS() {
-            if (typeof THREE === 'undefined') {
-                console.error('Three.js failed to load');
-                showError('Three.js library failed to load. Please check your internet connection.');
-                return false;
-            }
-            return true;
-        }
-
-        function showError(message) {
-            const errorScreen = document.getElementById('errorScreen');
-            const errorMessage = document.getElementById('errorMessage');
-            const loadingScreen = document.getElementById('loadingScreen');
-            
-            loadingScreen.style.display = 'none';
-            errorMessage.textContent = message;
-            errorScreen.style.display = 'flex';
-        }
-
-        function hideLoading() {
-            const loadingScreen = document.getElementById('loadingScreen');
-            loadingScreen.style.opacity = '0';
-            setTimeout(() => {
-                loadingScreen.style.display = 'none';
-            }, 500);
-        }
-
-        function updateStatus(text) {
-            document.getElementById('loadingText').textContent = text;
-        }
-
-        // ==================== ENHANCED LLM INTEGRATION ====================
-        class LLMIntegration {
-            constructor() {
-                this.provider = 'huggingface';
-                this.apiEndpoint = '';
-                this.apiKey = '';
-                this.modelName = '';
-                this.isConnected = false;
-                this.connectionTested = false;
-                this.isApplying = false;
-                
-                // Default endpoints for each provider
-                this.defaultEndpoints = {
-                    'huggingface': 'https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium',
-                    'openai': 'https://api.openai.com/v1/chat/completions',
-                    'anthropic': 'https://api.anthropic.com/v1/messages',
-                    'google': 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent',
-                    'azure': 'https://YOUR_RESOURCE.openai.azure.com/openai/deployments/YOUR_DEPLOYMENT/chat/completions',
-                    'local': 'http://localhost:11434/api/generate'
-                };
-                
-                this.init();
-            }
-            
-            init() {
-                this.loadSettings();
-                this.setupEventListeners();
-                this.updateProviderUI();
-            }
-            
-            loadSettings() {
-                try {
-                    const settings = JSON.parse(localStorage.getItem('aiTutorLLMSettings')) || {};
-                    
-                    this.provider = settings.provider || 'huggingface';
-                    this.apiEndpoint = settings.apiEndpoint || this.defaultEndpoints[this.provider];
-                    this.apiKey = settings.apiKey || '';
-                    this.modelName = settings.modelName || '';
-                    
-                    // Update UI
-                    document.getElementById('llmProvider').value = this.provider;
-                    document.getElementById('apiEndpoint').value = this.apiEndpoint;
-                    document.getElementById('apiKey').value = this.apiKey;
-                    document.getElementById('modelName').value = this.modelName;
-                    
-                    console.log('Loaded LLM settings:', { 
-                        provider: this.provider,
-                        endpoint: this.apiEndpoint.substring(0, 50) + '...',
-                        hasKey: !!this.apiKey,
-                        model: this.modelName
-                    });
-                    
-                } catch (error) {
-                    console.error('Error loading LLM settings:', error);
-                }
-            }
-            
-            saveSettings() {
-                try {
-                    const settings = {
-                        provider: this.provider,
-                        apiEndpoint: this.apiEndpoint,
-                        apiKey: this.apiKey,
-                        modelName: this.modelName,
-                        savedAt: new Date().toISOString()
-                    };
-                    
-                    localStorage.setItem('aiTutorLLMSettings', JSON.stringify(settings));
-                    console.log('Saved LLM settings');
-                    return true;
-                } catch (error) {
-                    console.error('Error saving LLM settings:', error);
-                    return false;
-                }
-            }
-            
-            setupEventListeners() {
-                // Provider change
-                document.getElementById('llmProvider').addEventListener('change', (e) => {
-                    this.provider = e.target.value;
-                    this.apiEndpoint = this.defaultEndpoints[this.provider];
-                    document.getElementById('apiEndpoint').value = this.apiEndpoint;
-                    this.updateProviderUI();
-                });
-                
-                // Endpoint change
-                document.getElementById('apiEndpoint').addEventListener('input', (e) => {
-                    this.apiEndpoint = e.target.value.trim();
-                });
-                
-                // API Key change
-                document.getElementById('apiKey').addEventListener('input', (e) => {
-                    this.apiKey = e.target.value.trim();
-                });
-                
-                // Model name change
-                document.getElementById('modelName').addEventListener('input', (e) => {
-                    this.modelName = e.target.value.trim();
-                });
-                
-                // Test connection button
-                document.getElementById('testApiBtn').addEventListener('click', () => {
-                    this.testConnection();
-                });
-                
-                // Apply settings button - NEW
-                document.getElementById('applyApiBtn').addEventListener('click', () => {
-                    this.applySettings();
-                });
-                
-                // Also apply on Enter key in API fields
-                const apiFields = ['apiEndpoint', 'apiKey', 'modelName'];
-                apiFields.forEach(fieldId => {
-                    document.getElementById(fieldId).addEventListener('keydown', (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            this.applySettings();
-                        }
-                    });
-                });
-            }
-            
-            updateProviderUI() {
-                // Update placeholder based on provider
-                const endpointInput = document.getElementById('apiEndpoint');
-                const keyInput = document.getElementById('apiKey');
-                const modelInput = document.getElementById('modelName');
-                
-                switch(this.provider) {
-                    case 'huggingface':
-                        endpointInput.placeholder = 'https://api-inference.huggingface.co/models/{model}';
-                        keyInput.placeholder = 'Your Hugging Face API token';
-                        modelInput.placeholder = 'microsoft/DialoGPT-medium';
-                        break;
-                    case 'openai':
-                        endpointInput.placeholder = 'https://api.openai.com/v1/chat/completions';
-                        keyInput.placeholder = 'Your OpenAI API key';
-                        modelInput.placeholder = 'gpt-3.5-turbo';
-                        break;
-                    case 'anthropic':
-                        endpointInput.placeholder = 'https://api.anthropic.com/v1/messages';
-                        keyInput.placeholder = 'Your Anthropic API key';
-                        modelInput.placeholder = 'claude-3-sonnet-20240229';
-                        break;
-                    case 'google':
-                        endpointInput.placeholder = 'https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent';
-                        keyInput.placeholder = 'Your Google API key';
-                        modelInput.placeholder = 'gemini-pro';
-                        break;
-                    case 'azure':
-                        endpointInput.placeholder = 'https://{resource}.openai.azure.com/openai/deployments/{deployment}/chat/completions';
-                        keyInput.placeholder = 'Your Azure OpenAI API key';
-                        modelInput.placeholder = 'gpt-35-turbo';
-                        break;
-                    case 'local':
-                        endpointInput.placeholder = 'http://localhost:11434/api/generate';
-                        keyInput.placeholder = 'Leave empty for local setup';
-                        modelInput.placeholder = 'llama2';
-                        break;
-                }
-            }
-            
-            async applySettings() {
-                if (this.isApplying) return;
-                
-                this.isApplying = true;
-                const applyBtn = document.getElementById('applyApiBtn');
-                const originalText = applyBtn.innerHTML;
-                
-                try {
-                    // Update apply button to show loading
-                    applyBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Applying...';
-                    applyBtn.disabled = true;
-                    
-                    // Save settings first
-                    this.saveSettings();
-                    
-                    // Test connection with new settings
-                    const connected = await this.testConnection();
-                    
-                    if (connected) {
-                        this.showApiStatus('Settings applied and connected successfully!', 'success');
-                        
-                        // Update chat status
-                        if (window.chatInterface && window.chatInterface.chatStatusText) {
-                            window.chatInterface.chatStatusText.textContent = 'Connected to ' + this.provider;
-                        }
-                        
-                        // Update visualization
-                        if (window.visualization) {
-                            window.visualization.setPreset('processing');
-                            setTimeout(() => {
-                                window.visualization.setPreset('idle');
-                            }, 1500);
-                        }
-                    } else {
-                        this.showApiStatus('Settings saved but connection failed', 'warning');
-                    }
-                    
-                } catch (error) {
-                    console.error('Error applying settings:', error);
-                    this.showApiStatus('Error applying settings: ' + error.message, 'error');
-                } finally {
-                    // Reset apply button
-                    setTimeout(() => {
-                        applyBtn.innerHTML = originalText;
-                        applyBtn.disabled = false;
-                        this.isApplying = false;
-                    }, 1000);
-                }
-            }
-            
-            async testConnection() {
-                if (!this.apiEndpoint) {
-                    this.showApiStatus('Please enter an API endpoint', 'error');
-                    return false;
-                }
-                
-                if (this.provider !== 'local' && !this.apiKey) {
-                    this.showApiStatus('Please enter an API key', 'error');
-                    return false;
-                }
-                
-                this.showApiStatus('Testing connection...', 'processing');
-                
-                try {
-                    let testResult;
-                    
-                    switch(this.provider) {
-                        case 'huggingface':
-                            testResult = await this.testHuggingFaceConnection();
-                            break;
-                        case 'openai':
-                            testResult = await this.testOpenAIConnection();
-                            break;
-                        case 'anthropic':
-                            testResult = await this.testAnthropicConnection();
-                            break;
-                        case 'google':
-                            testResult = await this.testGoogleConnection();
-                            break;
-                        case 'azure':
-                            testResult = await this.testAzureConnection();
-                            break;
-                        case 'local':
-                            testResult = await this.testLocalConnection();
-                            break;
-                        default:
-                            testResult = await this.testGenericConnection();
-                    }
-                    
-                    if (testResult.success) {
-                        this.isConnected = true;
-                        this.connectionTested = true;
-                        this.showApiStatus(`Connected successfully to ${this.provider}`, 'success');
-                        return true;
-                    } else {
-                        this.isConnected = false;
-                        this.showApiStatus(`Connection failed: ${testResult.error}`, 'error');
-                        return false;
-                    }
-                } catch (error) {
-                    this.isConnected = false;
-                    this.showApiStatus(`Connection error: ${error.message}`, 'error');
-                    return false;
-                }
-            }
-            
-            async testHuggingFaceConnection() {
-                const model = this.modelName || 'microsoft/DialoGPT-medium';
-                const endpoint = this.apiEndpoint.replace('{model}', model);
-                
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${this.apiKey}`,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        inputs: 'Hello',
-                        parameters: {
-                            max_new_tokens: 10
-                        }
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    return { 
-                        success: false, 
-                        error: `HTTP ${response.status}: ${response.statusText}` 
-                    };
-                }
-            }
-            
-            async testOpenAIConnection() {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${this.apiKey}`,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'gpt-3.5-turbo',
-                        messages: [{ role: 'user', content: 'Hello' }],
-                        max_tokens: 10
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    return { 
-                        success: false, 
-                        error: errorData.error?.message || `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async testAnthropicConnection() {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'x-api-key': this.apiKey,
-                        'anthropic-version': '2023-06-01',
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'claude-3-sonnet-20240229',
-                        messages: [{ role: 'user', content: 'Hello' }],
-                        max_tokens: 10
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    return { 
-                        success: false, 
-                        error: errorData.error?.message || `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async testGoogleConnection() {
-                const endpoint = this.apiEndpoint.includes('{model}') 
-                    ? this.apiEndpoint.replace('{model}', this.modelName || 'gemini-pro')
-                    : this.apiEndpoint;
-                
-                const url = new URL(endpoint);
-                url.searchParams.append('key', this.apiKey);
-                
-                const response = await fetch(url.toString(), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        contents: [{
-                            parts: [{ text: 'Hello' }]
-                        }]
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    return { 
-                        success: false, 
-                        error: errorData.error?.message || `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async testAzureConnection() {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'api-key': this.apiKey,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        messages: [{ role: 'user', content: 'Hello' }],
-                        max_tokens: 10
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    return { 
-                        success: false, 
-                        error: errorData.error?.message || `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async testLocalConnection() {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'llama2',
-                        prompt: 'Hello',
-                        stream: false
-                    })
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    return { 
-                        success: false, 
-                        error: `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async testGenericConnection() {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'GET',
-                    headers: {
-                        'Authorization': this.apiKey ? `Bearer ${this.apiKey}` : undefined,
-                        'Content-Type': 'application/json'
-                    }
-                });
-                
-                if (response.ok) {
-                    return { success: true };
-                } else {
-                    return { 
-                        success: false, 
-                        error: `HTTP ${response.status}` 
-                    };
-                }
-            }
-            
-            async generateResponse(prompt, context = '') {
-                if (!this.isConnected) {
-                    console.log('LLM not connected, using fallback');
-                    return null;
-                }
-                
-                try {
-                    const fullPrompt = context ? `${context}\n\nQuestion: ${prompt}` : prompt;
-                    
-                    switch(this.provider) {
-                        case 'huggingface':
-                            return await this.generateHuggingFaceResponse(fullPrompt);
-                        case 'openai':
-                            return await this.generateOpenAIResponse(fullPrompt);
-                        case 'anthropic':
-                            return await this.generateAnthropicResponse(fullPrompt);
-                        case 'google':
-                            return await this.generateGoogleResponse(fullPrompt);
-                        case 'azure':
-                            return await this.generateAzureResponse(fullPrompt);
-                        case 'local':
-                            return await this.generateLocalResponse(fullPrompt);
-                        default:
-                            return await this.generateGenericResponse(fullPrompt);
-                    }
-                } catch (error) {
-                    console.error('LLM generation error:', error);
-                    return null;
-                }
-            }
-            
-            async generateHuggingFaceResponse(prompt) {
-                const model = this.modelName || 'microsoft/DialoGPT-medium';
-                const endpoint = this.apiEndpoint.replace('{model}', model);
-                
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${this.apiKey}`,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        inputs: prompt,
-                        parameters: {
-                            max_new_tokens: 500,
-                            temperature: 0.7,
-                            top_p: 0.9,
-                            repetition_penalty: 1.1,
-                            return_full_text: false
-                        }
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data[0]?.generated_text || data.generated_text || '';
-            }
-            
-            async generateOpenAIResponse(prompt) {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${this.apiKey}`,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'gpt-3.5-turbo',
-                        messages: [
-                            { role: 'system', content: 'You are a helpful AI tutor.' },
-                            { role: 'user', content: prompt }
-                        ],
-                        max_tokens: 500,
-                        temperature: 0.7
-                    })
-                });
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.choices[0]?.message?.content || '';
-            }
-            
-            async generateAnthropicResponse(prompt) {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'x-api-key': this.apiKey,
-                        'anthropic-version': '2023-06-01',
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'claude-3-sonnet-20240229',
-                        messages: [{ role: 'user', content: prompt }],
-                        max_tokens: 500
-                    })
-                });
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.content[0]?.text || '';
-            }
-            
-            async generateGoogleResponse(prompt) {
-                const endpoint = this.apiEndpoint.includes('{model}') 
-                    ? this.apiEndpoint.replace('{model}', this.modelName || 'gemini-pro')
-                    : this.apiEndpoint;
-                
-                const url = new URL(endpoint);
-                url.searchParams.append('key', this.apiKey);
-                
-                const response = await fetch(url.toString(), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        contents: [{
-                            parts: [{ text: prompt }]
-                        }],
-                        generationConfig: {
-                            maxOutputTokens: 500,
-                            temperature: 0.7
-                        }
-                    })
-                });
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.candidates?.[0]?.content?.parts?.[0]?.text || '';
-            }
-            
-            async generateAzureResponse(prompt) {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'api-key': this.apiKey,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        messages: [
-                            { role: 'system', content: 'You are a helpful AI tutor.' },
-                            { role: 'user', content: prompt }
-                        ],
-                        max_tokens: 500,
-                        temperature: 0.7
-                    })
-                });
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.choices[0]?.message?.content || '';
-            }
-            
-            async generateLocalResponse(prompt) {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: this.modelName || 'llama2',
-                        prompt: prompt,
-                        stream: false,
-                        options: {
-                            temperature: 0.7,
-                            num_predict: 500
-                        }
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.response || '';
-            }
-            
-            async generateGenericResponse(prompt) {
-                const response = await fetch(this.apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': this.apiKey ? `Bearer ${this.apiKey}` : undefined,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        prompt: prompt,
-                        max_tokens: 500,
-                        temperature: 0.7
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}`);
-                }
-                
-                const data = await response.json();
-                return data.text || data.response || data.choices?.[0]?.text || '';
-            }
-            
-            showApiStatus(message, type = 'info') {
-                const statusEl = document.getElementById('apiStatus');
-                const statusText = document.getElementById('apiStatusText');
-                
-                statusText.textContent = message;
-                
-                const colors = {
-                    'info': '#5a6cff',
-                    'success': '#00ff9d',
-                    'error': '#ff5a5a',
-                    'processing': '#a0b0ff'
-                };
-                
-                statusEl.style.borderColor = colors[type] + '30';
-                statusEl.style.background = colors[type] + '10';
-                statusEl.style.color = colors[type];
-                
-                statusEl.style.display = 'flex';
-                
-                if (type !== 'processing') {
-                    setTimeout(() => {
-                        statusEl.style.display = 'none';
-                    }, 5000);
-                }
-            }
-        }
-
-        // Mobile Menu Functionality
-        class MobileMenu {
-            constructor() {
-                this.menuBtn = document.getElementById('mobileMenuBtn');
-                this.overlay = document.getElementById('mobileOverlay');
-                this.leftPanel = document.querySelector('.side-panel.left');
-                this.rightPanel = document.querySelector('.side-panel.right');
-                this.isOpen = false;
-                this.currentPanel = null;
-                
-                this.init();
-            }
-            
-            init() {
-                this.menuBtn.addEventListener('click', () => this.toggleMenu());
-                this.overlay.addEventListener('click', () => this.closeMenu());
-                
-                document.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape') {
-                        this.closeMenu();
-                    }
-                });
-            }
-            
-            toggleMenu() {
-                if (!this.isOpen) {
-                    this.openMenu('left');
-                } else {
-                    this.closeMenu();
-                }
-            }
-            
-            openMenu(panel) {
-                this.isOpen = true;
-                this.currentPanel = panel;
-                this.menuBtn.classList.add('active');
-                
-                if (panel === 'left') {
-                    this.leftPanel.classList.add('active');
-                } else if (panel === 'right') {
-                    this.rightPanel.classList.add('active');
-                }
-                
-                this.overlay.style.display = 'block';
-                setTimeout(() => {
-                    this.overlay.style.opacity = '1';
-                }, 10);
-            }
-            
-            closeMenu() {
-                this.isOpen = false;
-                this.menuBtn.classList.remove('active');
-                this.leftPanel.classList.remove('active');
-                this.rightPanel.classList.remove('active');
-                
-                this.overlay.style.opacity = '0';
-                setTimeout(() => {
-                    this.overlay.style.display = 'none';
-                }, 300);
-            }
-        }
-
-        // Accordion Functionality
-        class Accordion {
-            constructor() {
-                this.accordions = document.querySelectorAll('.accordion-header');
-                this.init();
-            }
-            
-            init() {
-                this.accordions.forEach(accordion => {
-                    accordion.addEventListener('click', () => {
-                        const targetId = accordion.getAttribute('data-target');
-                        const content = document.getElementById(targetId);
-                        const icon = accordion.querySelector('i');
-                        
-                        accordion.classList.toggle('active');
-                        content.classList.toggle('active');
-                        
-                        if (accordion.classList.contains('active')) {
-                            icon.classList.remove('fa-chevron-down');
-                            icon.classList.add('fa-chevron-up');
-                        } else {
-                            icon.classList.remove('fa-chevron-up');
-                            icon.classList.add('fa-chevron-down');
-                        }
-                    });
-                });
-            }
-        }
-
-        // ENHANCED RAG AI Tutor System with Document Upload
-        class RAGAITutor {
-            constructor() {
-                this.knowledgeBase = [];
-                this.vectorStore = null;
-                this.isTraining = false;
-                this.currentSession = null;
-                this.uploadedDocuments = [];
-                this.init();
-            }
-            
-            init() {
-                this.setupEventListeners();
-                this.setupDocumentUpload();
-                this.loadSampleKnowledge();
-            }
-            
-            loadSampleKnowledge() {
-                this.addKnowledgeItem({
-                    id: Date.now(),
-                    title: "Physics Basics",
-                    content: "Newton's laws of motion: 1) An object at rest stays at rest unless acted upon by a force. 2) Force equals mass times acceleration. 3) For every action, there is an equal and opposite reaction.",
-                    type: "text",
-                    timestamp: new Date().toISOString()
-                });
-                
-                this.addKnowledgeItem({
-                    id: Date.now() + 1,
-                    title: "Calculus Fundamentals",
-                    content: "The derivative measures the rate of change of a function. The integral measures the accumulation of a quantity. The Fundamental Theorem of Calculus connects derivatives and integrals.",
-                    type: "text",
-                    timestamp: new Date().toISOString()
-                });
-            }
-            
-            setupEventListeners() {
-                document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
-                    this.addKnowledgeFromText();
-                });
-                
-                document.getElementById('trainBtn').addEventListener('click', () => {
-                    this.trainRAGModel();
-                });
-                
-                // Enter key in textarea
-                document.getElementById('knowledgeText').addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter' && e.ctrlKey) {
-                        e.preventDefault();
-                        this.addKnowledgeFromText();
-                    }
-                });
-            }
-            
-            setupDocumentUpload() {
-                const uploadArea = document.getElementById('documentUploadArea');
-                const fileInput = document.getElementById('documentFile');
-                const fileInfo = document.getElementById('fileInfo');
-                
-                // Click to upload
-                uploadArea.addEventListener('click', () => {
-                    fileInput.click();
-                });
-                
-                // Drag and drop
-                uploadArea.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    uploadArea.classList.add('dragover');
-                });
-                
-                uploadArea.addEventListener('dragleave', () => {
-                    uploadArea.classList.remove('dragover');
-                });
-                
-                uploadArea.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    uploadArea.classList.remove('dragover');
-                    
-                    if (e.dataTransfer.files.length) {
-                        this.handleFiles(e.dataTransfer.files);
-                    }
-                });
-                
-                // File input change
-                fileInput.addEventListener('change', (e) => {
-                    if (e.target.files.length) {
-                        this.handleFiles(e.target.files);
-                    }
-                });
-            }
-            
-            async handleFiles(files) {
-                const fileInfo = document.getElementById('fileInfo');
-                let fileNames = [];
-                
-                for (let i = 0; i < files.length; i++) {
-                    const file = files[i];
-                    fileNames.push(file.name);
-                    
-                    try {
-                        const content = await this.readFileContent(file);
-                        
-                        const knowledgeItem = {
-                            id: Date.now() + i,
-                            title: file.name,
-                            content: content,
-                            type: "document",
-                            fileType: file.type,
-                            size: file.size,
-                            timestamp: new Date().toISOString()
-                        };
-                        
-                        this.addKnowledgeItem(knowledgeItem);
-                        this.uploadedDocuments.push({
-                            name: file.name,
-                            size: this.formatFileSize(file.size),
-                            type: file.type
-                        });
-                        
-                    } catch (error) {
-                        console.error('Error reading file:', error);
-                        this.showRAGStatus(`Error reading ${file.name}: ${error.message}`, 'error');
-                    }
-                }
-                
-                // Show file info
-                fileInfo.innerHTML = `
-                    <i class="fas fa-file"></i>
-                    Uploaded: ${fileNames.join(', ')}
-                    <br>
-                    <small>${this.uploadedDocuments.length} documents ready for training</small>
-                `;
-                fileInfo.style.display = 'block';
-                
-                this.showRAGStatus(`${fileNames.length} document(s) uploaded successfully!`, 'success');
-                
-                // Update visualization
-                if (window.visualization) {
-                    window.visualization.setPreset('processing');
-                    setTimeout(() => {
-                        window.visualization.setPreset('idle');
-                    }, 1000);
-                }
-            }
-            
-            readFileContent(file) {
-                return new Promise((resolve, reject) => {
-                    const reader = new FileReader();
-                    
-                    reader.onload = (e) => {
-                        resolve(e.target.result);
-                    };
-                    
-                    reader.onerror = (e) => {
-                        reject(new Error('Failed to read file'));
-                    };
-                    
-                    // Handle different file types
-                    if (file.type === 'application/pdf') {
-                        // For PDF files, we'll extract text (simplified)
-                        reader.readAsArrayBuffer(file);
-                    } else if (file.type.includes('text') || 
-                              file.name.endsWith('.txt') || 
-                              file.name.endsWith('.md')) {
-                        reader.readAsText(file);
-                    } else if (file.type.includes('document') || 
-                              file.name.endsWith('.doc') || 
-                              file.name.endsWith('.docx')) {
-                        // For Word documents, we'll extract text
-                        reader.readAsText(file);
-                    } else {
-                        reject(new Error('Unsupported file type'));
-                    }
-                });
-            }
-            
-            formatFileSize(bytes) {
-                if (bytes === 0) return '0 Bytes';
-                const k = 1024;
-                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-                const i = Math.floor(Math.log(bytes) / Math.log(k));
-                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-            }
-            
-            addKnowledgeFromText() {
-                const textArea = document.getElementById('knowledgeText');
-                const content = textArea.value.trim();
-                
-                if (!content) {
-                    this.showRAGStatus('Please enter some knowledge content', 'warning');
-                    return;
-                }
-                
-                const title = content.substring(0, 50) + (content.length > 50 ? '...' : '');
-                
-                const knowledgeItem = {
-                    id: Date.now(),
-                    title: title,
-                    content: content,
-                    type: "text",
-                    timestamp: new Date().toISOString()
-                };
-                
-                this.addKnowledgeItem(knowledgeItem);
-                textArea.value = '';
-                this.showRAGStatus('Knowledge added successfully!', 'success');
-                
-                // Update visualization
-                if (window.visualization) {
-                    window.visualization.setPreset('processing');
-                    setTimeout(() => {
-                        window.visualization.setPreset('idle');
-                    }, 500);
-                }
-            }
-            
-            addKnowledgeItem(item) {
-                this.knowledgeBase.push(item);
-                console.log('Knowledge base updated:', this.knowledgeBase.length, 'items');
-            }
-            
-            async trainRAGModel() {
-                if (this.knowledgeBase.length === 0) {
-                    this.showRAGStatus('No knowledge to train on. Please add some content first.', 'warning');
-                    return;
-                }
-                
-                this.isTraining = true;
-                this.showRAGStatus('Starting RAG training...', 'processing');
-                
-                const progressBar = document.getElementById('trainingProgress');
-                progressBar.style.width = '0%';
-                
-                const steps = [
-                    'Preprocessing text...',
-                    'Creating embeddings...', 
-                    'Building vector store...',
-                    'Optimizing retrieval...',
-                    'Finalizing training...'
-                ];
-                
-                // Update visualization for training
-                if (window.visualization) {
-                    window.visualization.setPreset('processing');
-                    window.visualization.params.intensity = 0.8;
-                }
-                
-                for (let i = 0; i < steps.length; i++) {
-                    this.showRAGStatus(steps[i], 'processing');
-                    progressBar.style.width = `${((i + 1) / steps.length) * 100}%`;
-                    
-                    await this.sleep(800 + Math.random() * 400);
-                }
-                
-                this.vectorStore = {
-                    size: this.knowledgeBase.length,
-                    trainedAt: new Date().toISOString(),
-                    model: 'all-MiniLM-L6-v2',
-                    documents: this.uploadedDocuments.length,
-                    textEntries: this.knowledgeBase.filter(k => k.type === 'text').length
-                };
-                
-                this.isTraining = false;
-                this.showRAGStatus(
-                    `RAG training complete! ${this.knowledgeBase.length} items indexed.`, 
-                    'success'
-                );
-                
-                // Update visualization
-                if (window.visualization) {
-                    window.visualization.setPreset('teaching');
-                    setTimeout(() => {
-                        window.visualization.setPreset('idle');
-                        window.visualization.params.intensity = 0.5;
-                    }, 3000);
-                }
-                
-                setTimeout(() => {
-                    progressBar.style.width = '0%';
-                }, 2000);
-            }
-            
-            async queryKnowledge(query) {
-                if (!this.vectorStore) {
-                    return "I haven't been trained on any specific knowledge yet. Please add some content and train me first!";
-                }
-                
-                const relevantKnowledge = this.findRelevantKnowledge(query);
-                
-                if (relevantKnowledge.length === 0) {
-                    return "I couldn't find specific information about that in my knowledge base. Could you rephrase or ask something else?";
-                }
-                
-                return this.generateResponse(query, relevantKnowledge);
-            }
-            
-            findRelevantKnowledge(query) {
-                const queryLower = query.toLowerCase();
-                const relevant = [];
-                const scoredItems = [];
-                
-                // Simple keyword matching with scoring
-                for (const item of this.knowledgeBase) {
-                    let score = 0;
-                    
-                    // Check title
-                    if (item.title.toLowerCase().includes(queryLower)) {
-                        score += 3;
-                    }
-                    
-                    // Check content
-                    const contentLower = item.content.toLowerCase();
-                    if (contentLower.includes(queryLower)) {
-                        score += 2;
-                    }
-                    
-                    // Check for partial matches
-                    const queryWords = queryLower.split(' ');
-                    for (const word of queryWords) {
-                        if (word.length > 3 && contentLower.includes(word)) {
-                            score += 1;
-                        }
-                    }
-                    
-                    if (score > 0) {
-                        scoredItems.push({ item, score });
-                    }
-                }
-                
-                // Sort by score
-                scoredItems.sort((a, b) => b.score - a.score);
-                
-                // Return top 3
-                return scoredItems.slice(0, 3).map(s => s.item);
-            }
-            
-            generateResponse(query, relevantKnowledge) {
-                const context = relevantKnowledge.map(item => 
-                    `[From: ${item.title}]\n${item.content.substring(0, 300)}${item.content.length > 300 ? '...' : ''}`
-                ).join('\n\n');
-                
-                return `Based on my training knowledge:\n\n${context}\n\nRegarding your question "${query}", I can provide detailed explanations from these sources.`;
-            }
-            
-            showRAGStatus(message, type = 'info') {
-                const statusEl = document.getElementById('ragStatus');
-                const statusText = document.getElementById('ragStatusText');
-                
-                statusText.textContent = message;
-                
-                const colors = {
-                    'info': '#5a6cff',
-                    'success': '#00ff9d',
-                    'warning': '#ffa500',
-                    'error': '#ff5a5a',
-                    'processing': '#a0b0ff'
-                };
-                
-                statusEl.style.borderColor = colors[type] + '30';
-                statusEl.style.background = colors[type] + '10';
-                statusEl.style.color = colors[type];
-                
-                statusEl.style.display = 'flex';
-                
-                if (type !== 'processing') {
-                    setTimeout(() => {
-                        statusEl.style.display = 'none';
-                    }, 5000);
-                }
-            }
-            
-            sleep(ms) {
-                return new Promise(resolve => setTimeout(resolve, ms));
-            }
-        }
-
-        // Voice Synthesis System
-        class VoiceSynthesis {
-            constructor() {
-                this.synth = window.speechSynthesis;
-                this.voices = [];
-                this.currentVoice = null;
-                this.isAutoSpeak = true;
-                this.isSpeaking = false;
-                this.currentUtterance = null;
-                
-                this.settings = {
-                    rate: 1.0,
-                    pitch: 1.0,
-                    volume: 0.8
-                };
-                
-                this.testScript = "Hello there! This is a test to see how natural and fluid my voice sounds. I'm going to tell you a little story about learning and discovery.";
-                
-                this.initVoices();
-                this.setupEventListeners();
-            }
-            
-            initVoices() {
-                const loadVoices = () => {
-                    this.voices = this.synth.getVoices();
-                    this.populateVoiceList();
-                    this.selectBestVoice();
-                };
-                
-                if (this.synth.onvoiceschanged !== undefined) {
-                    this.synth.onvoiceschanged = loadVoices;
-                }
-                
-                if (this.synth.getVoices().length > 0) {
-                    loadVoices();
-                }
-            }
-            
-            selectBestVoice() {
-                const englishVoices = this.voices.filter(voice => 
-                    voice.lang.startsWith('en-')
-                );
-                
-                if (englishVoices.length === 0) {
-                    console.warn('No English voices found');
-                    return;
-                }
-                
-                const preferredVoices = [
-                    'Google UK English Male',
-                    'Google US English',
-                    'Microsoft David',
-                    'Microsoft Zira',
-                    'Alex',
-                    'Samantha',
-                    'Daniel'
-                ];
-                
-                for (const voiceName of preferredVoices) {
-                    const voice = englishVoices.find(v => v.name.includes(voiceName));
-                    if (voice) {
-                        this.currentVoice = voice;
-                        this.updateVoiceSelect(voice);
-                        break;
-                    }
-                }
-                
-                if (!this.currentVoice && englishVoices.length > 0) {
-                    this.currentVoice = englishVoices[0];
-                    this.updateVoiceSelect(englishVoices[0]);
-                }
-            }
-            
-            populateVoiceList() {
-                const voiceSelect = document.getElementById('voiceSelect');
-                voiceSelect.innerHTML = '';
-                
-                const englishVoices = this.voices.filter(voice => 
-                    voice.lang.startsWith('en-')
-                );
-                
-                if (englishVoices.length === 0) {
-                    const option = document.createElement('option');
-                    option.textContent = 'No English voices found';
-                    option.disabled = true;
-                    voiceSelect.appendChild(option);
-                    return;
-                }
-                
-                englishVoices.forEach(voice => {
-                    const option = document.createElement('option');
-                    option.value = voice.name;
-                    option.textContent = `${voice.name} (${voice.lang})`;
-                    option.dataset.lang = voice.lang;
-                    voiceSelect.appendChild(option);
-                });
-            }
-            
-            updateVoiceSelect(voice) {
-                const voiceSelect = document.getElementById('voiceSelect');
-                const options = voiceSelect.querySelectorAll('option');
-                
-                options.forEach(option => {
-                    if (option.value === voice.name) {
-                        option.selected = true;
-                    }
-                });
-            }
-            
-            setupEventListeners() {
-                document.getElementById('voiceSelect').addEventListener('change', (e) => {
-                    const selectedVoice = this.voices.find(v => v.name === e.target.value);
-                    if (selectedVoice) {
-                        this.currentVoice = selectedVoice;
-                    }
-                });
-                
-                document.getElementById('rateSlider').addEventListener('input', (e) => {
-                    const value = parseFloat(e.target.value);
-                    this.settings.rate = value;
-                    document.getElementById('rateValue').textContent = value.toFixed(1) + 'x';
-                });
-                
-                document.getElementById('pitchSlider').addEventListener('input', (e) => {
-                    const value = parseFloat(e.target.value);
-                    this.settings.pitch = value;
-                    document.getElementById('pitchValue').textContent = value.toFixed(1);
-                });
-                
-                document.getElementById('volumeSlider').addEventListener('input', (e) => {
-                    const value = parseFloat(e.target.value);
-                    this.settings.volume = value;
-                    document.getElementById('volumeValue').textContent = Math.round(value * 100) + '%';
-                });
-                
-                document.getElementById('autoSpeakBtn').addEventListener('click', (e) => {
-                    this.isAutoSpeak = !this.isAutoSpeak;
-                    const btn = e.target.closest('.voice-btn');
-                    btn.dataset.enabled = this.isAutoSpeak;
-                    btn.innerHTML = this.isAutoSpeak 
-                        ? '<i class="fas fa-bullhorn"></i> Auto-Speak'
-                        : '<i class="fas fa-volume-mute"></i> Auto-Speak';
-                    
-                    btn.classList.toggle('active', this.isAutoSpeak);
-                });
-                
-                document.getElementById('stopBtn').addEventListener('click', () => {
-                    this.stopSpeaking();
-                });
-                
-                document.getElementById('previewBtn').addEventListener('click', () => {
-                    this.previewCurrentVoice();
-                });
-            }
-            
-            speak(text) {
-                if (!this.isAutoSpeak || !text || this.isSpeaking) return;
-                
-                this.stopSpeaking();
-                
-                const utterance = new SpeechSynthesisUtterance(text);
-                
-                if (this.currentVoice) {
-                    utterance.voice = this.currentVoice;
-                }
-                
-                utterance.rate = this.settings.rate;
-                utterance.pitch = this.settings.pitch;
-                utterance.volume = this.settings.volume;
-                
-                utterance.text = this.addNaturalPauses(text);
-                
-                utterance.onerror = (event) => {
-                    console.error('Speech synthesis error:', event);
-                };
-                
-                this.currentUtterance = utterance;
-                this.synth.speak(utterance);
-            }
-            
-            addNaturalPauses(text) {
-                return text
-                    .replace(/,/g, ',<break time="200ms"/>')
-                    .replace(/\./g, '.<break time="300ms"/>')
-                    .replace(/\?/g, '?<break time="400ms"/>')
-                    .replace(/\!/g, '!<break time="400ms"/>');
-            }
-            
-            stopSpeaking() {
-                if (this.isSpeaking) {
-                    this.synth.cancel();
-                    this.isSpeaking = false;
-                    this.currentUtterance = null;
-                }
-            }
-            
-            previewCurrentVoice() {
-                this.speak(this.testScript);
-            }
-        }
-
-        // Chat Interface - FULLY INTEGRATED WITH LLM
-        class ChatInterface {
-            constructor(ragTutor, llmIntegration) {
-                this.ragTutor = ragTutor;
-                this.llmIntegration = llmIntegration;
-                this.isListening = false;
-                this.initChat();
-            }
-            
-            initChat() {
-                this.chatInput = document.getElementById('chatInput');
-                this.chatMessages = document.getElementById('chatMessages');
-                this.voiceBtn = document.getElementById('voiceBtn');
-                this.sendBtn = document.getElementById('sendBtn');
-                this.chatStatusText = document.getElementById('chatStatusText');
-                
-                this.setupEventListeners();
-                this.autoResizeTextarea();
-            }
-            
-            setupEventListeners() {
-                this.sendBtn.addEventListener('click', () => this.sendMessage());
-                
-                this.chatInput.addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        this.sendMessage();
-                    }
-                });
-                
-                this.voiceBtn.addEventListener('click', () => this.toggleVoiceInput());
-                this.chatInput.addEventListener('input', () => this.autoResizeTextarea());
-            }
-            
-            autoResizeTextarea() {
-                const textarea = this.chatInput;
-                textarea.style.height = 'auto';
-                const newHeight = Math.min(textarea.scrollHeight, 120);
-                textarea.style.height = newHeight + 'px';
-            }
-            
-            toggleVoiceInput() {
-                this.isListening = !this.isListening;
-                
-                if (this.isListening) {
-                    this.voiceBtn.classList.add('listening');
-                    this.voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
-                    this.chatStatusText.textContent = 'Listening...';
-                    
-                    if (window.visualization) {
-                        window.visualization.setPreset('listening');
-                    }
-                    
-                    setTimeout(() => {
-                        this.simulateVoiceInput();
-                    }, 1500);
-                } else {
-                    this.voiceBtn.classList.remove('listening');
-                    this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                    this.chatStatusText.textContent = 'Online';
-                    
-                    if (window.visualization) {
-                        window.visualization.setPreset('processing');
-                    }
-                }
-            }
-            
-            simulateVoiceInput() {
-                if (!this.isListening) return;
-                
-                const simulatedQuestions = [
-                    "Can you explain quantum computing?",
-                    "How do neural networks learn?",
-                    "What's the difference between AI and machine learning?",
-                    "Help me understand blockchain technology",
-                    "Explain the concept of derivatives in calculus"
-                ];
-                
-                const randomQuestion = simulatedQuestions[Math.floor(Math.random() * simulatedQuestions.length)];
-                
-                this.addMessage(randomQuestion, 'user');
-                this.processAIResponse(randomQuestion);
-                
-                setTimeout(() => {
-                    this.isListening = false;
-                    this.voiceBtn.classList.remove('listening');
-                    this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                    this.chatStatusText.textContent = 'Online';
-                }, 500);
-            }
-            
-            async sendMessage() {
-                const message = this.chatInput.value.trim();
-                if (message === '') return;
-                
-                this.addMessage(message, 'user');
-                this.chatInput.value = '';
-                this.autoResizeTextarea();
-                await this.processAIResponse(message);
-            }
-            
-            addMessage(content, sender) {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = `message message-${sender}`;
-                
-                const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-                
-                messageDiv.innerHTML = `
-                    <div class="message-content">${this.escapeHtml(content)}</div>
-                    <div class="message-time">${time}</div>
-                `;
-                
-                this.chatMessages.appendChild(messageDiv);
-                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
-                
-                if (window.visualization && sender === 'user') {
-                    window.visualization.setPreset('processing');
-                }
-            }
-            
-            escapeHtml(text) {
-                const div = document.createElement('div');
-                div.textContent = text;
-                return div.innerHTML;
-            }
-            
-            async processAIResponse(userMessage) {
-                // Update 3D visualization
-                if (window.visualization) {
-                    window.visualization.setPreset('processing');
-                }
-                
-                // Show typing indicator (simulated delay)
-                const processingTime = 1000 + Math.random() * 2000;
-                
-                setTimeout(async () => {
-                    let response;
-                    
-                    // Try LLM API first if available and connected
-                    if (this.llmIntegration && this.llmIntegration.isConnected) {
-                        try {
-                            // Get context from RAG if available
-                            let context = '';
-                            if (this.ragTutor && this.ragTutor.vectorStore) {
-                                const relevantKnowledge = await this.ragTutor.queryKnowledge(userMessage);
-                                if (relevantKnowledge && !relevantKnowledge.includes("I haven't been trained") && 
-                                    !relevantKnowledge.includes("I couldn't find")) {
-                                    context = relevantKnowledge;
-                                }
-                            }
-                            
-                            // Call LLM API
-                            response = await this.llmIntegration.generateResponse(userMessage, context);
-                            
-                            if (!response) {
-                                throw new Error('No response from LLM API');
-                            }
-                            
-                            console.log('LLM API response received');
-                            
-                        } catch (error) {
-                            console.log('LLM API failed, using fallback:', error);
-                            response = await this.getFallbackResponse(userMessage);
-                        }
-                    } else {
-                        // LLM not connected, use fallback
-                        response = await this.getFallbackResponse(userMessage);
-                    }
-                    
-                    // Add AI response to chat
-                    this.addMessage(response, 'ai');
-                    
-                    // Speak the response
-                    if (window.voiceSynthesis) {
-                        setTimeout(() => {
-                            window.voiceSynthesis.speak(response);
-                        }, 300);
-                    }
-                    
-                    // Update 3D visualization
-                    if (window.visualization) {
-                        window.visualization.setPreset('responding');
-                        
-                        setTimeout(() => {
-                            window.visualization.setPreset('idle');
-                        }, 3000);
-                    }
-                }, processingTime);
-            }
-            
-            async getFallbackResponse(userMessage) {
-                // Try RAG first
-                if (this.ragTutor && this.ragTutor.vectorStore) {
-                    const ragResponse = await this.ragTutor.queryKnowledge(userMessage);
-                    if (ragResponse && !ragResponse.includes("I haven't been trained") && 
-                        !ragResponse.includes("I couldn't find")) {
-                        return ragResponse;
-                    }
-                }
-                
-                // Fallback to local responses
-                return this.generateAIResponse(userMessage);
-            }
-            
-            generateAIResponse(userMessage) {
-                const responses = {
-                    quantum: "Quantum computing leverages quantum mechanics to process information. Unlike classical bits (0 or 1), quantum bits (qubits) can exist in superposition, enabling parallel computation.",
-                    neural: "Neural networks learn through backpropagation and gradient descent. They adjust weights based on prediction errors, minimizing loss functions.",
-                    blockchain: "Blockchain is a decentralized, distributed ledger technology. Each block contains cryptographic hashes linking to previous blocks, ensuring immutability.",
-                    calculus: "Derivatives measure instantaneous rate of change. The derivative of f(x) at point a is the slope of the tangent line.",
-                    default: "I understand you're asking about " + userMessage.substring(0, 30) + "... This is a complex topic that requires careful explanation."
-                };
-                
-                const lowerMessage = userMessage.toLowerCase();
-                
-                if (lowerMessage.includes('quantum')) return responses.quantum;
-                if (lowerMessage.includes('neural') || lowerMessage.includes('network')) return responses.neural;
-                if (lowerMessage.includes('blockchain')) return responses.blockchain;
-                if (lowerMessage.includes('calculus') || lowerMessage.includes('derivative')) return responses.calculus;
-                
-                return responses.default;
-            }
-        }
-
-        // 3D Visualization - IMPROVED
-        class AITutorVisualization {
-            constructor() {
-                if (!checkThreeJS()) return;
-                
-                this.scene = null;
-                this.camera = null;
-                this.renderer = null;
-                this.particles = null;
-                this.controls = null;
-                
-                this.params = {
-                    intensity: 0.5,
-                    particleCount: 2000,
-                    energy: 0.3,
-                    mode: 'idle'
-                };
-                
-                this.audioData = new Array(32).fill(0);
-                this.time = 0;
-                this.animationFrameId = null;
-                
-                try {
-                    this.init();
-                    this.createParticles();
-                    this.setupControls();
-                    this.animate();
-                    updateStatus('AI Interface Ready');
-                    setTimeout(hideLoading, 500);
-                } catch (error) {
-                    console.error('Initialization error:', error);
-                    showError('Failed to initialize 3D scene: ' + error.message);
-                }
-            }
-            
-            init() {
-                updateStatus('Creating 3D scene...');
-                
-                this.scene = new THREE.Scene();
-                this.scene.background = new THREE.Color(0x0a0a0f);
-                
-                this.camera = new THREE.PerspectiveCamera(
-                    75, 
-                    window.innerWidth / window.innerHeight, 
-                    0.1, 
-                    1000
-                );
-                this.camera.position.z = 5;
-                
-                const canvas = document.getElementById('mainCanvas');
-                this.renderer = new THREE.WebGLRenderer({ 
-                    canvas: canvas,
-                    antialias: true,
-                    alpha: true
-                });
-                this.renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);
-                this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-                
-                this.scene.fog = new THREE.Fog(0x0a0a0f, 10, 25);
-                
-                const ambientLight = new THREE.AmbientLight(0x222244, 0.5);
-                this.scene.add(ambientLight);
-                
-                const directionalLight = new THREE.DirectionalLight(0x5a6cff, 1);
-                directionalLight.position.set(5, 3, 5);
-                this.scene.add(directionalLight);
-                
-                // Add subtle point lights
-                const pointLight1 = new THREE.PointLight(0x5a6cff, 0.5, 10);
-                pointLight1.position.set(2, 2, 2);
-                this.scene.add(pointLight1);
-                
-                const pointLight2 = new THREE.PointLight(0x00ff9d, 0.3, 10);
-                pointLight2.position.set(-2, -1, 3);
-                this.scene.add(pointLight2);
-                
-                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
-                this.controls.enableDamping = true;
-                this.controls.dampingFactor = 0.05;
-                this.controls.maxDistance = 10;
-                this.controls.minDistance = 2;
-            }
-            
-            createParticles() {
-                const geometry = new THREE.BufferGeometry();
-                const positions = new Float32Array(this.params.particleCount * 3);
-                const colors = new Float32Array(this.params.particleCount * 3);
-                
-                // Create a more interesting particle distribution
-                for (let i = 0; i < this.params.particleCount; i++) {
-                    const i3 = i * 3;
-                    
-                    // Create particles in a spherical distribution with some noise
-                    const radius = 2 + Math.random() * 0.5;
-                    const phi = Math.acos(-1 + (2 * i) / this.params.particleCount);
-                    const theta = Math.sqrt(this.params.particleCount * Math.PI) * phi;
-                    
-                    // Add some randomness for more organic look
-                    const randomOffset = 0.3;
-                    const x = (Math.cos(theta) * Math.sin(phi)) * radius + (Math.random() - 0.5) * randomOffset;
-                    const y = (Math.sin(theta) * Math.sin(phi)) * radius + (Math.random() - 0.5) * randomOffset;
-                    const z = (Math.cos(phi)) * radius + (Math.random() - 0.5) * randomOffset;
-                    
-                    positions[i3] = x;
-                    positions[i3 + 1] = y;
-                    positions[i3 + 2] = z;
-                    
-                    // Color based on position for gradient effect
-                    const hue = 0.6 + (z / 3) * 0.2; // Blue to purple gradient
-                    const saturation = 0.7 + (x / 3) * 0.3;
-                    const lightness = 0.5 + (y / 3) * 0.2;
-                    
-                    colors[i3] = hue;
-                    colors[i3 + 1] = saturation;
-                    colors[i3 + 2] = lightness;
-                }
-                
-                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-                geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-                
-                const material = new THREE.PointsMaterial({
-                    size: 0.03,
-                    vertexColors: true,
-                    transparent: true,
-                    opacity: 0.8,
-                    blending: THREE.AdditiveBlending,
-                    sizeAttenuation: true
-                });
-                
-                this.particles = new THREE.Points(geometry, material);
-                this.scene.add(this.particles);
-                
-                // Add a central core sphere
-                const coreGeometry = new THREE.SphereGeometry(0.3, 16, 16);
-                const coreMaterial = new THREE.MeshBasicMaterial({ 
-                    color: 0x5a6cff,
-                    wireframe: true,
-                    transparent: true,
-                    opacity: 0.2
-                });
-                const coreSphere = new THREE.Mesh(coreGeometry, coreMaterial);
-                this.scene.add(coreSphere);
-            }
-            
-            setupControls() {
-                const intensitySlider = document.getElementById('intensity');
-                const particleCountSlider = document.getElementById('particleCount');
-                const energySlider = document.getElementById('energy');
-                
-                const intensityValue = document.getElementById('intensityValue');
-                const particleCountValue = document.getElementById('particleCountValue');
-                const energyValue = document.getElementById('energyValue');
-                
-                // Set initial values
-                intensityValue.textContent = intensitySlider.value;
-                particleCountValue.textContent = particleCountSlider.value;
-                energyValue.textContent = energySlider.value;
-                
-                intensitySlider.addEventListener('input', (e) => {
-                    this.params.intensity = e.target.value / 100;
-                    intensityValue.textContent = e.target.value;
-                });
-                
-                particleCountSlider.addEventListener('input', (e) => {
-                    this.params.particleCount = parseInt(e.target.value);
-                    particleCountValue.textContent = e.target.value;
-                    this.updateParticleCount();
-                });
-                
-                energySlider.addEventListener('input', (e) => {
-                    this.params.energy = e.target.value / 100;
-                    energyValue.textContent = e.target.value;
-                });
-                
-                // Preset buttons
-                document.querySelectorAll('.preset-btn').forEach(btn => {
-                    btn.addEventListener('click', (e) => {
-                        const preset = e.target.dataset.preset;
-                        this.setPreset(preset);
-                    });
-                });
-                
-                document.getElementById('retryBtn').addEventListener('click', () => {
-                    location.reload();
-                });
-                
-                // Auto-update sliders when preset changes
-                this.setPreset('idle');
-            }
-            
-            setPreset(preset) {
-                this.params.mode = preset;
-                
-                // Update button styles
-                document.querySelectorAll('.preset-btn').forEach(btn => {
-                    btn.style.background = btn.dataset.preset === preset 
-                        ? 'rgba(90, 108, 255, 0.4)' 
-                        : 'rgba(90, 108, 255, 0.1)';
-                    btn.style.transform = btn.dataset.preset === preset 
-                        ? 'translateY(-2px)' 
-                        : 'translateY(0)';
-                });
-                
-                // Update sliders based on preset
-                const sliders = {
-                    'listening': { intensity: 70, energy: 60, particleCount: 2500 },
-                    'processing': { intensity: 85, energy: 80, particleCount: 3000 },
-                    'responding': { intensity: 75, energy: 70, particleCount: 2800 },
-                    'exploring': { intensity: 60, energy: 50, particleCount: 2200 },
-                    'teaching': { intensity: 65, energy: 55, particleCount: 2400 },
-                    'idle': { intensity: 50, energy: 30, particleCount: 2000 }
-                };
-                
-                if (sliders[preset]) {
-                    const presetValues = sliders[preset];
-                    
-                    document.getElementById('intensity').value = presetValues.intensity;
-                    document.getElementById('energy').value = presetValues.energy;
-                    document.getElementById('particleCount').value = presetValues.particleCount;
-                    
-                    document.getElementById('intensityValue').textContent = presetValues.intensity;
-                    document.getElementById('energyValue').textContent = presetValues.energy;
-                    document.getElementById('particleCountValue').textContent = presetValues.particleCount;
-                    
-                    this.params.intensity = presetValues.intensity / 100;
-                    this.params.energy = presetValues.energy / 100;
-                    
-                    if (this.params.particleCount !== presetValues.particleCount) {
-                        this.params.particleCount = presetValues.particleCount;
-                        this.updateParticleCount();
-                    }
-                }
-            }
-            
-            updateParticleCount() {
-                if (this.particles) {
-                    this.scene.remove(this.particles);
-                }
-                this.createParticles();
-            }
-            
-            simulateAudioData() {
-                const time = performance.now() * 0.001;
-                const frequency = 0.5 + this.params.energy * 2;
-                
-                for (let i = 0; i < this.audioData.length; i++) {
-                    const base = Math.sin(time * frequency + i * 0.3) * 0.5 + 0.5;
-                    const variation = Math.sin(time * 2 + i * 0.5) * 0.2;
-                    this.audioData[i] = base + variation * this.params.intensity;
-                }
-            }
-            
-            updateParticles() {
-                if (!this.particles) return;
-                
-                const positions = this.particles.geometry.attributes.position.array;
-                const colors = this.particles.geometry.attributes.color.array;
-                const originalPositions = this.particles.geometry.attributes.originalPosition;
-                
-                if (!originalPositions) {
-                    const origPos = new Float32Array(positions.length);
-                    origPos.set(positions);
-                    this.particles.geometry.setAttribute('originalPosition', new THREE.BufferAttribute(origPos, 3));
-                }
-                
-                const origPositions = this.particles.geometry.attributes.originalPosition.array;
-                const time = this.time;
-                
-                for (let i = 0; i < this.params.particleCount; i++) {
-                    const i3 = i * 3;
-                    const x = origPositions[i3];
-                    const y = origPositions[i3 + 1];
-                    const z = origPositions[i3 + 2];
-                    
-                    let radius = 2.0;
-                    let intensity = this.params.intensity;
-                    let energy = this.params.energy;
-                    
-                    // Different movement patterns based on mode
-                    switch(this.params.mode) {
-                        case 'listening':
-                            radius += Math.sin(time * 3 + i * 0.01) * 0.5 * intensity;
-                            radius += Math.cos(time * 2 + i * 0.02) * 0.3 * energy;
-                            break;
-                        case 'processing':
-                            radius += Math.sin(time * 5 + i * 0.02) * 0.6 * intensity;
-                            radius += Math.sin(time * 8 + i * 0.01) * 0.4 * energy;
-                            break;
-                        case 'responding':
-                            radius += (Math.sin(time * 2 + i * 0.005) + 1) * 0.4 * intensity;
-                            radius += Math.cos(time * 4 + i * 0.01) * 0.3 * energy;
-                            break;
-                        case 'exploring':
-                            radius += Math.sin(time * 1.5 + i * 0.015) * 0.7 * intensity;
-                            radius += Math.cos(time * 3 + i * 0.008) * 0.5 * energy;
-                            break;
-                        case 'teaching':
-                            radius += Math.sin(time * 4 + i * 0.008) * 0.55 * intensity;
-                            radius += Math.cos(time * 6 + i * 0.012) * 0.4 * energy;
-                            break;
-                        default: // idle
-                            radius += Math.sin(time * 0.5 + i * 0.01) * 0.2 * intensity;
-                            radius += Math.cos(time * 0.3 + i * 0.005) * 0.1 * energy;
-                    }
-                    
-                    // Add audio-reactive movement
-                    const audioIndex = Math.floor((i / this.params.particleCount) * this.audioData.length);
-                    radius += this.audioData[audioIndex] * 0.5 * intensity;
-                    
-                    // Apply movement
-                    positions[i3] = x * radius;
-                    positions[i3 + 1] = y * radius;
-                    positions[i3 + 2] = z * radius;
-                    
-                    // Color animation
-                    const colorShift = Math.sin(time * 0.5 + i * 0.001) * 0.1;
-                    colors[i3] = 0.6 + colorShift * intensity;
-                }
-                
-                this.particles.geometry.attributes.position.needsUpdate = true;
-                this.particles.geometry.attributes.color.needsUpdate = true;
-                
-                // Gentle rotation
-                this.particles.rotation.y = time * 0.05;
-                this.particles.rotation.x = Math.sin(time * 0.02) * 0.05;
-            }
-            
-            animate() {
-                this.animationFrameId = requestAnimationFrame(() => this.animate());
-                
-                this.time += 0.016;
-                
-                this.simulateAudioData();
-                this.updateParticles();
-                
-                this.controls.update();
-                this.renderer.render(this.scene, this.camera);
-            }
-            
-            onWindowResize() {
-                const canvasContainer = document.getElementById('canvasContainer');
-                const width = canvasContainer.clientWidth;
-                const height = canvasContainer.clientHeight;
-                
-                this.camera.aspect = width / height;
-                this.camera.updateProjectionMatrix();
-                this.renderer.setSize(width, height);
-            }
-            
-            destroy() {
-                if (this.animationFrameId) {
-                    cancelAnimationFrame(this.animationFrameId);
-                }
-                if (this.controls) {
-                    this.controls.dispose();
-                }
-                if (this.renderer) {
-                    this.renderer.dispose();
-                }
-            }
-        }
-        
-        // Initialize everything
-        window.addEventListener('load', () => {
-            updateStatus('Loading AI Interface...');
-            
-            setTimeout(() => {
-                // Initialize UI components first
-                window.mobileMenu = new MobileMenu();
-                window.accordion = new Accordion();
-                
-                // Initialize 3D visualization
-                window.visualization = new AITutorVisualization();
-                
-                // Initialize Enhanced RAG AI Tutor with document upload
-                window.ragTutor = new RAGAITutor();
-                
-                // Initialize ENHANCED LLM Integration with Apply button
-                window.llmIntegration = new LLMIntegration();
-                
-                // Initialize chat interface with BOTH RAG and LLM
-                window.chatInterface = new ChatInterface(window.ragTutor, window.llmIntegration);
-                
-                // Initialize voice synthesis
-                if ('speechSynthesis' in window) {
-                    window.voiceSynthesis = new VoiceSynthesis();
-                    updateStatus('Voice synthesis initialized');
-                }
-                
-                if (window.visualization && window.visualization.scene) {
-                    window.addEventListener('resize', () => window.visualization.onWindowResize());
-                    
-                    // Add keyboard shortcuts
-                    window.addEventListener('keydown', (e) => {
-                        if (e.code === 'Space') {
-                            window.visualization.setPreset(
-                                window.visualization.params.mode === 'idle' ? 'listening' : 'idle'
-                            );
-                        }
-                        if (e.code === 'Space' && e.ctrlKey && window.voiceSynthesis) {
-                            window.voiceSynthesis.stopSpeaking();
-                        }
-                        if (e.code === 'KeyT' && e.ctrlKey) {
-                            const trainingBtn = document.getElementById('trainBtn');
-                            if (trainingBtn) trainingBtn.click();
-                        }
-                        if (e.code === 'KeyL' && e.ctrlKey) {
-                            const applyBtn = document.getElementById('applyApiBtn');
-                            if (applyBtn) applyBtn.click();
-                        }
-                    });
-                    
-                    window.visualization.setPreset('idle');
-                }
-                
-                // Test LLM connection on startup if credentials exist
-                if (window.llmIntegration.apiKey && window.llmIntegration.apiEndpoint) {
-                    setTimeout(() => {
-                        window.llmIntegration.testConnection().then(connected => {
-                            if (connected) {
-                                console.log('LLM API auto-connected on startup');
-                                if (window.chatInterface && window.chatInterface.chatStatusText) {
-                                    window.chatInterface.chatStatusText.textContent = 'Connected to ' + window.llmIntegration.provider;
-                                }
-                            }
-                        });
-                    }, 2000);
-                }
-                
-                hideLoading();
-                
-                // Show welcome message
-                setTimeout(() => {
-                    if (window.visualization) {
-                        window.visualization.setPreset('exploring');
-                        setTimeout(() => {
-                            window.visualization.setPreset('idle');
-                        }, 2000);
-                    }
-                }, 1000);
-                
-            }, 100);
-        });
-        
-        window.addEventListener('beforeunload', () => {
-            if (window.visualization) {
-                window.visualization.destroy();
-            }
-            if (window.voiceSynthesis) {
-                window.voiceSynthesis.stopSpeaking();
-            }
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
+                posi
\ No newline at end of file