diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,12 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Tutor 3D Interface</title>
+    <title>Neural AI Tutor | Interactive Learning Platform</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <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 */
         * {
             margin: 0;
             padding: 0;
@@ -16,189 +15,277 @@
         }
         
         body {
-            background: #0a0a0f;
+            background: #000000;
             color: #fff;
             font-family: 'Segoe UI', system-ui, sans-serif;
             overflow: hidden;
             height: 100vh;
-            width: 100vw;
+            display: flex;
         }
         
-        .mobile-nav {
-            display: none;
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            z-index: 1000;
+        /* Main Canvas - Full Screen with Stars */
+        #canvasContainer {
+            flex: 1;
+            position: relative;
+            background: #000000;
+            overflow: hidden;
         }
         
-        .mobile-menu-btn {
-            width: 50px;
-            height: 50px;
-            background: rgba(20, 20, 30, 0.9);
-            border-radius: 15px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
+        #mainCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+        
+        /* Starfield Background */
+        #starfieldCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        /* Left Sidebar - Hidden Panels */
+        .sidebar {
+            width: 80px;
+            background: rgba(15, 15, 25, 0.9);
+            backdrop-filter: blur(10px);
+            border-right: 1px solid rgba(255, 255, 255, 0.05);
             display: flex;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
-            gap: 5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
+            padding: 20px 10px;
+            z-index: 1000;
+            transition: width 0.3s ease;
         }
         
-        .mobile-menu-btn span {
-            width: 24px;
-            height: 2px;
-            background: #a0b0ff;
-            border-radius: 2px;
-            transition: all 0.3s ease;
+        .sidebar:hover,
+        .sidebar.expanded {
+            width: 380px;
         }
         
-        .mobile-menu-btn.active span:nth-child(1) {
-            transform: rotate(45deg) translate(6px, 6px);
+        .sidebar:hover .panel-content,
+        .sidebar.expanded .panel-content {
+            opacity: 1;
+            visibility: visible;
         }
         
-        .mobile-menu-btn.active span:nth-child(2) {
-            opacity: 0;
+        .panel-toggle {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 30px;
+            padding: 15px 0;
+            cursor: pointer;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            background: rgba(90, 108, 255, 0.1);
+            border: 1px solid rgba(90, 108, 255, 0.2);
         }
         
-        .mobile-menu-btn.active span:nth-child(3) {
-            transform: rotate(-45deg) translate(6px, -6px);
+        .panel-toggle:hover {
+            background: rgba(90, 108, 255, 0.2);
+            transform: translateY(-2px);
         }
         
-        .mobile-panel-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(5px);
-            z-index: 999;
+        .toggle-icon {
+            font-size: 1.5em;
+            color: #a0b0ff;
         }
         
-        .main-container {
-            display: flex;
-            height: 100vh;
-            width: 100vw;
-            position: relative;
+        .panel-content {
+            width: 100%;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            overflow-y: auto;
+            max-height: calc(100vh - 120px);
         }
         
-        .side-panel {
-            width: 320px;
-            height: 100vh;
-            background: rgba(15, 15, 25, 0.9);
-            backdrop-filter: blur(10px);
-            border-right: 1px solid rgba(255, 255, 255, 0.1);
-            overflow-y: auto;
-            padding: 25px;
-            transition: transform 0.3s ease;
-            z-index: 100;
-            position: relative;
+        .panel-section {
+            margin-bottom: 25px;
+            background: rgba(20, 20, 30, 0.7);
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            overflow: hidden;
         }
         
-        .side-panel.left {
+        .panel-header {
+            padding: 15px;
+            background: rgba(30, 30, 45, 0.8);
+            cursor: pointer;
             display: flex;
-            flex-direction: column;
-            gap: 25px;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
         
-        .side-panel.right {
-            border-right: none;
-            border-left: 1px solid rgba(255, 255, 255, 0.1);
-            display: flex;
-            flex-direction: column;
-            gap: 25px;
+        .panel-header:hover {
+            background: rgba(40, 40, 60, 0.8);
         }
         
-        .main-content {
-            flex: 1;
+        .panel-header h3 {
+            color: #a0b0ff;
+            font-size: 1em;
+            font-weight: 500;
             display: flex;
-            flex-direction: column;
             align-items: center;
-            justify-content: center;
-            position: relative;
-            padding: 20px;
-            overflow: hidden;
+            gap: 10px;
         }
         
-        #canvasContainer {
-            width: 100%;
-            height: 70vh;
-            position: relative;
-            border-radius: 20px;
-            overflow: hidden;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        .panel-header i {
+            font-size: 1.2em;
+        }
+        
+        .panel-body {
+            padding: 20px;
+            display: none;
         }
         
-        canvas {
+        .panel-body.active {
             display: block;
-            outline: none;
-            width: 100%;
-            height: 100%;
         }
         
-        .chat-interface {
-            width: 100%;
-            max-width: 800px;
-            margin-top: 30px;
-            position: relative;
-            z-index: 10;
+        .chevron {
+            transition: transform 0.3s ease;
         }
         
-        .chat-container {
+        .chevron.rotated {
+            transform: rotate(90deg);
+        }
+        
+        /* Chat Interface - Clean Design */
+        .chat-overlay {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 800px;
+            max-width: 85vw;
             background: rgba(20, 20, 30, 0.9);
-            backdrop-filter: blur(10px);
+            backdrop-filter: blur(20px);
             border-radius: 20px;
             border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
             overflow: hidden;
+            opacity: 0;
+            animation: fadeIn 0.5s ease 1s forwards;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .chat-overlay.collapsed {
+            width: 400px;
+            height: 70px;
+            bottom: 20px;
+        }
+        
+        .chat-overlay.collapsed .chat-header {
+            border-radius: 15px;
+            padding: 15px;
+        }
+        
+        .chat-overlay.collapsed .chat-messages,
+        .chat-overlay.collapsed .chat-input-container {
+            display: none;
+        }
+        
+        .chat-overlay.collapsed .chat-header {
+            cursor: pointer;
+        }
+        
+        .chat-overlay.collapsed .chat-header:hover {
+            background: rgba(35, 35, 50, 0.9);
+        }
+        
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+            }
         }
         
         .chat-header {
             padding: 20px;
+            background: rgba(25, 25, 40, 0.95);
             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            transition: all 0.3s ease;
         }
         
         .chat-title {
-            font-size: 1.2em;
-            font-weight: 300;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .chat-title h2 {
             color: #a0b0ff;
+            font-weight: 400;
+            font-size: 1.3em;
+        }
+        
+        .ai-avatar {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #5a6cff, #00ff9d);
+            border-radius: 50%;
             display: flex;
             align-items: center;
+            justify-content: center;
+            font-size: 1.3em;
+        }
+        
+        .chat-subtitle {
+            color: #8892b0;
+            font-size: 0.85em;
+            line-height: 1.5;
+        }
+        
+        .chat-controls {
+            display: flex;
             gap: 10px;
+            align-items: center;
         }
         
-        .chat-status {
+        .collapse-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.07);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #a0b0ff;
+            cursor: pointer;
             display: flex;
             align-items: center;
-            gap: 8px;
-            font-size: 0.85em;
-            color: #8892b0;
+            justify-content: center;
+            transition: all 0.3s ease;
         }
         
-        .status-indicator {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #00ff9d;
-            animation: pulse 2s infinite;
+        .collapse-btn:hover {
+            background: rgba(90, 108, 255, 0.2);
+            transform: translateY(-2px);
         }
         
         .chat-messages {
-            height: 300px;
-            overflow-y: auto;
-            padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 12px;
+            padding: 20px;
+            overflow-y: auto;
+            max-height: 400px;
             scrollbar-width: thin;
-            scrollbar-color: #5a6cff rgba(255, 255, 255, 0.1);
+            scrollbar-color: #5a6cff rgba(255, 255, 255, 0.05);
         }
         
         .chat-messages::-webkit-scrollbar {
@@ -217,11 +304,13 @@
         
         .message {
             max-width: 85%;
-            padding: 12px 15px;
-            border-radius: 15px;
+            padding: 16px 20px;
+            border-radius: 18px;
             line-height: 1.5;
             position: relative;
             animation: messageAppear 0.3s ease;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
         
         @keyframes messageAppear {
@@ -239,33 +328,66 @@
             align-self: flex-end;
             background: linear-gradient(135deg, #5a6cff, #7a8aff);
             color: white;
-            border-bottom-right-radius: 5px;
+            margin-left: auto;
         }
         
         .message-ai {
             align-self: flex-start;
-            background: rgba(255, 255, 255, 0.1);
+            background: linear-gradient(135deg, rgba(90, 108, 255, 0.15), rgba(0, 255, 157, 0.1));
             color: #e0e0ff;
-            border-bottom-left-radius: 5px;
             border: 1px solid rgba(255, 255, 255, 0.05);
         }
         
+        .message-content {
+            font-size: 0.95em;
+            margin-bottom: 8px;
+            white-space: pre-wrap;
+        }
+        
         .message-time {
-            font-size: 0.7em;
+            font-size: 0.75em;
             opacity: 0.7;
-            margin-top: 5px;
             text-align: right;
+            margin-top: 5px;
+        }
+        
+        .message-typing {
+            padding: 16px 20px;
+            background: linear-gradient(135deg, rgba(90, 108, 255, 0.1), rgba(0, 255, 157, 0.05));
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            align-self: flex-start;
+            width: 120px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: #a0b0ff;
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes typing {
+            0%, 80%, 100% { transform: translateY(0); }
+            40% { transform: translateY(-10px); }
         }
         
         .chat-input-container {
             padding: 20px;
-            background: rgba(15, 15, 25, 0.9);
+            background: rgba(15, 15, 25, 0.95);
             border-top: 1px solid rgba(255, 255, 255, 0.05);
         }
         
         .input-wrapper {
             display: flex;
-            gap: 10px;
+            gap: 12px;
             align-items: flex-end;
         }
         
@@ -274,13 +396,13 @@
             background: rgba(255, 255, 255, 0.07);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 15px;
-            padding: 15px 20px;
+            padding: 16px 20px;
             color: white;
             font-family: 'Segoe UI', system-ui, sans-serif;
-            font-size: 1em;
+            font-size: 0.95em;
             resize: none;
-            min-height: 56px;
-            max-height: 120px;
+            min-height: 52px;
+            max-height: 150px;
             transition: all 0.3s ease;
         }
         
@@ -295,9 +417,15 @@
             color: rgba(255, 255, 255, 0.4);
         }
         
-        .voice-input-btn {
-            width: 56px;
-            height: 56px;
+        .input-buttons {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .voice-input-btn,
+        .send-btn {
+            width: 52px;
+            height: 52px;
             border-radius: 15px;
             background: linear-gradient(135deg, #5a6cff, #7a8aff);
             border: none;
@@ -307,10 +435,11 @@
             align-items: center;
             justify-content: center;
             transition: all 0.3s ease;
-            flex-shrink: 0;
+            font-size: 1.1em;
         }
         
-        .voice-input-btn:hover {
+        .voice-input-btn:hover,
+        .send-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(90, 108, 255, 0.4);
         }
@@ -326,119 +455,53 @@
         }
         
         .send-btn {
-            width: 56px;
-            height: 56px;
-            border-radius: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            color: #a0b0ff;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-            flex-shrink: 0;
+            background: linear-gradient(135deg, rgba(0, 255, 157, 0.3), rgba(0, 200, 127, 0.2));
+            border: 1px solid rgba(0, 255, 157, 0.3);
+            color: #00ff9d;
         }
         
         .send-btn:hover {
-            background: rgba(90, 108, 255, 0.2);
-            color: white;
-            transform: translateY(-2px);
+            background: linear-gradient(135deg, rgba(0, 255, 157, 0.4), rgba(0, 200, 127, 0.3));
         }
         
-        .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);
+        /* Control Elements in Sidebar */
+        .control-group {
+            margin-bottom: 20px;
         }
         
-        .card-title {
-            font-size: 1.1em;
-            margin-bottom: 20px;
-            font-weight: 300;
-            color: #a0b0ff;
+        .control-label {
             display: flex;
             align-items: center;
             gap: 10px;
+            margin-bottom: 10px;
+            color: #a0b0ff;
+            font-size: 0.9em;
+            font-weight: 500;
         }
         
-        .card-title i {
-            font-size: 1em;
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
         }
         
-        .accordion {
-            margin-bottom: 15px;
+        input[type="range"] {
+            flex: 1;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            outline: none;
+            -webkit-appearance: none;
         }
         
-        .accordion-header {
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #5a6cff;
+            border-radius: 50%;
             cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        
-        .accordion-header:hover {
-            background: rgba(255, 255, 255, 0.08);
-        }
-        
-        .accordion-header.active {
-            background: rgba(90, 108, 255, 0.1);
-            border-color: rgba(90, 108, 255, 0.3);
-        }
-        
-        .accordion-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease;
-            padding: 0 15px;
-        }
-        
-        .accordion-content.active {
-            max-height: 500px;
-            padding: 15px;
-        }
-        
-        .control-group {
-            margin-bottom: 20px;
-        }
-        
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.9em;
-            color: #8892b0;
-        }
-        
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        
-        input[type="range"] {
-            flex: 1;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            background: #5a6cff;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.2s;
         }
         
         input[type="range"]::-webkit-slider-thumb:hover {
@@ -452,12 +515,13 @@
             font-family: 'Courier New', monospace;
             color: #5a6cff;
             font-weight: 500;
+            font-size: 0.9em;
         }
         
-        .button-grid {
+        .preset-buttons {
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
             margin-top: 15px;
         }
         
@@ -469,7 +533,7 @@
             border-radius: 10px;
             cursor: pointer;
             transition: all 0.2s;
-            font-size: 0.9em;
+            font-size: 0.85em;
             text-align: center;
         }
         
@@ -478,6 +542,15 @@
             transform: translateY(-2px);
         }
         
+        .preset-btn.active {
+            background: rgba(90, 108, 255, 0.4);
+            color: white;
+        }
+        
+        .voice-control-group {
+            margin-bottom: 20px;
+        }
+        
         .voice-select {
             width: 100%;
             padding: 12px 15px;
@@ -498,11 +571,17 @@
             box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
         }
         
+        .voice-select option {
+            background: #1a1a2a;
+            color: white;
+            padding: 10px;
+        }
+        
         .voice-control-buttons {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 10px;
-            margin-top: 20px;
+            margin-top: 15px;
         }
         
         .voice-btn {
@@ -540,81 +619,33 @@
             background: rgba(255, 90, 90, 0.2);
         }
         
-        .rag-textarea {
-            width: 100%;
-            height: 100px;
-            background: rgba(255, 255, 255, 0.07);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            padding: 12px 15px;
-            color: white;
-            font-family: 'Segoe UI', system-ui, sans-serif;
-            font-size: 0.9em;
-            resize: vertical;
-            transition: all 0.3s ease;
-            margin-bottom: 15px;
-        }
-        
-        .rag-textarea:focus {
-            outline: none;
-            border-color: #5a6cff;
-            background: rgba(255, 255, 255, 0.1);
-            box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
-        }
-        
-        .rag-controls {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 10px;
+        .voice-btn.stop.active {
+            background: rgba(255, 90, 90, 0.3);
         }
         
-        .rag-btn {
+        .voice-preview-btn {
+            width: 100%;
             padding: 12px;
-            background: rgba(90, 108, 255, 0.1);
-            border: 1px solid rgba(90, 108, 255, 0.3);
-            color: #a0b0ff;
+            background: rgba(0, 255, 157, 0.1);
+            border: 1px solid rgba(0, 255, 157, 0.3);
             border-radius: 10px;
+            color: #00ff9d;
             cursor: pointer;
             transition: all 0.3s ease;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
+            margin-top: 10px;
             font-size: 0.9em;
         }
         
-        .rag-btn:hover {
-            background: rgba(90, 108, 255, 0.2);
+        .voice-preview-btn:hover {
+            background: rgba(0, 255, 157, 0.2);
             transform: translateY(-2px);
         }
         
-        .rag-btn.primary {
-            background: linear-gradient(135deg, #5a6cff, #7a8aff);
-            color: white;
-        }
-        
-        .rag-btn.primary:hover {
-            background: linear-gradient(135deg, #7a8aff, #9aafff);
-        }
-        
-        .rag-progress {
-            width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-            overflow: hidden;
-            margin-top: 15px;
-        }
-        
-        .rag-progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #5a6cff, #00ff9d);
-            width: 0%;
-            transition: width 0.3s ease;
-        }
-        
-        .rag-status {
+        .voice-status {
             display: flex;
             align-items: center;
             gap: 8px;
@@ -627,13 +658,45 @@
             border: 1px solid rgba(0, 255, 157, 0.2);
         }
         
+        /* System Status Bar */
+        .status-bar {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(20, 20, 30, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 12px 20px;
+            border-radius: 12px;
+            font-size: 0.85em;
+            color: #8892b0;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            z-index: 1000;
+        }
+        
+        .pulse-indicator {
+            width: 12px;
+            height: 12px;
+            background: #00ff9d;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        
+        /* Loading and Error Screens */
         .loading-screen {
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: #0a0a0f;
+            background: #000000;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -656,12 +719,12 @@
         }
         
         .error-screen {
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: #0a0a0f;
+            background: #000000;
             display: none;
             flex-direction: column;
             justify-content: center;
@@ -698,1329 +761,507 @@
             transform: translateY(-2px);
         }
         
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
-        }
-        
+        /* Responsive Design */
         @media (max-width: 1200px) {
-            .side-panel {
-                width: 280px;
-                padding: 20px;
+            .chat-overlay {
+                width: 700px;
             }
             
-            .chat-interface {
-                max-width: 700px;
+            .chat-overlay.collapsed {
+                width: 350px;
             }
         }
         
-        @media (max-width: 1024px) {
-            .main-container {
+        @media (max-width: 768px) {
+            body {
                 flex-direction: column;
             }
             
-            .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;
+            .sidebar {
+                width: 100%;
+                height: 60px;
+                flex-direction: row;
+                padding: 10px;
             }
             
-            .main-content {
-                padding: 80px 20px 20px 20px;
+            .sidebar:hover,
+            .sidebar.expanded {
+                height: auto;
+                min-height: 300px;
             }
             
-            #canvasContainer {
-                height: 50vh;
+            .panel-content {
+                position: absolute;
+                top: 60px;
+                left: 0;
+                width: 100%;
+                background: rgba(15, 15, 25, 0.95);
+                padding: 20px;
             }
             
-            .chat-interface {
-                margin-top: 20px;
+            .chat-overlay {
+                width: 95%;
+                max-width: 95vw;
             }
             
-            .chat-messages {
-                height: 250px;
+            .chat-overlay.collapsed {
+                width: 300px;
             }
         }
         
-        @media (max-width: 768px) {
-            #canvasContainer {
-                height: 40vh;
-            }
-            
-            .chat-messages {
-                height: 200px;
-            }
-            
-            .side-panel {
-                width: 100%;
-                max-width: 350px;
-            }
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 8px;
         }
         
-        @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;
-            }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #5a6cff;
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #7a8aff;
         }
     </style>
 </head>
 <body>
-    <!-- Mobile Navigation -->
-    <div class="mobile-nav">
-        <div class="mobile-menu-btn" id="mobileMenuBtn">
-            <span></span>
-            <span></span>
-            <span></span>
+    <!-- Left Sidebar with Collapsible Panels -->
+    <div class="sidebar" id="sidebar">
+        <div class="panel-toggle" onclick="toggleSidebar()">
+            <i class="fas fa-bars toggle-icon"></i>
         </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 class="panel-content">
+            <!-- Visualization Controls -->
+            <div class="panel-section">
+                <div class="panel-header" onclick="togglePanel('visualizationPanel')">
+                    <h3><i class="fas fa-brain"></i> Visualization Controls</h3>
+                    <i class="fas fa-chevron-right chevron" id="visualizationChevron"></i>
                 </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 class="panel-body" id="visualizationPanel">
+                    <div class="control-group">
+                        <div class="control-label">
+                            <i class="fas fa-wave-square"></i>
+                            <span>Animation Intensity</span>
                         </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 class="slider-container">
+                            <input type="range" id="intensity" min="0" max="100" value="50">
+                            <span class="value-display" id="intensityValue">50</span>
                         </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="control-group">
+                        <div class="control-label">
+                            <i class="fas fa-atom"></i>
+                            <span>Particle Count</span>
                         </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 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>
-            </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>
-                        
-                        <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 class="control-group">
+                        <div class="control-label">
+                            <i class="fas fa-bolt"></i>
+                            <span>Energy Level</span>
                         </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 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="preset-buttons">
+                        <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>
-        </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>
+            <!-- Voice Controls -->
+            <div class="panel-section">
+                <div class="panel-header" onclick="togglePanel('voicePanel')">
+                    <h3><i class="fas fa-robot"></i> Voice Synthesis</h3>
+                    <i class="fas fa-chevron-right chevron" id="voiceChevron"></i>
+                </div>
+                <div class="panel-body" id="voicePanel">
+                    <div class="voice-control-group">
+                        <div class="control-label">
+                            <i class="fas fa-user-circle"></i>
+                            <span>Voice Selection</span>
                         </div>
+                        <select class="voice-select" id="voiceSelect">
+                            <option value="">Loading voices...</option>
+                        </select>
                     </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 class="voice-control-group">
+                        <div class="control-label">
+                            <i class="fas fa-tachometer-alt"></i>
+                            <span>Speech Rate</span>
                         </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 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="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 class="voice-control-group">
+                        <div class="control-label">
+                            <i class="fas fa-wave-square"></i>
+                            <span>Pitch Variation</span>
                         </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 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 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="voice-control-group">
+                        <div class="control-label">
+                            <i class="fas fa-volume-up"></i>
+                            <span>Volume Level</span>
                         </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 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 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
+                    </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-preview-btn" id="previewBtn">
+                        <i class="fas fa-play"></i>
+                        Preview Voice (Little Red Riding Hood)
+                    </button>
+                    
+                    <div class="voice-status" id="voiceStatus" style="display: none;">
+                        <i class="fas fa-comment-dots"></i>
+                        <span id="statusMessage">Speaking...</span>
+                    </div>
                 </div>
             </div>
             
-            <div class="card">
-                <div class="card-title">
-                    <i class="fas fa-plug"></i>
-                    <span>LLM Integration</span>
+            <!-- System Info -->
+            <div class="panel-section">
+                <div class="panel-header" onclick="togglePanel('systemPanel')">
+                    <h3><i class="fas fa-info-circle"></i> System Info</h3>
+                    <i class="fas fa-chevron-right chevron" id="systemChevron"></i>
                 </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 class="panel-body" id="systemPanel">
+                    <div class="control-group">
+                        <div class="control-label">
+                            <i class="fas fa-cube"></i>
+                            <span>3D Renderer</span>
                         </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>
-                        
-                        <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="saveApiBtn">
-                                <i class="fas fa-save"></i>
-                                Save 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 style="color: #8892b0; font-size: 0.9em; padding: 10px 0;">
+                            Three.js v128<br>
+                            WebGL 2.0 Enabled
                         </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;
-        }
-
-        // ==================== FULLY FUNCTIONAL LLM INTEGRATION ====================
-        class LLMIntegration {
-            constructor() {
-                this.provider = 'huggingface';
-                this.apiEndpoint = '';
-                this.apiKey = '';
-                this.modelName = '';
-                this.isConnected = false;
-                this.connectionTested = 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();
-                });
-                
-                // Save settings button
-                document.getElementById('saveApiBtn').addEventListener('click', () => {
-                    this.saveSettings();
-                    this.showApiStatus('Settings saved successfully!', 'success');
-                });
-            }
-            
-            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 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');
-                }
+                    <div class="control-group">
+                        <div class="control-label">
+                            <i class="fas fa-microchip"></i>
+                            <span>Performance</span>
+                        </div>
+                        <div style="color: #8892b0; font-size: 0.9em; padding: 10px 0;">
+                            <div id="fpsCounter">FPS: 60</div>
+                            <div id="particleCounter">Particles: 2000</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Main Visualization Canvas -->
+    <div id="canvasContainer">
+        <canvas id="starfieldCanvas"></canvas>
+        <canvas id="mainCanvas"></canvas>
+        
+        <!-- Status Bar -->
+        <div class="status-bar">
+            <span class="pulse-indicator"></span>
+            <span id="statusText">Neural AI Tutor Ready</span>
+        </div>
+        
+        <!-- Clean Chat Interface -->
+        <div class="chat-overlay" id="chatOverlay">
+            <div class="chat-header">
+                <div class="chat-title">
+                    <div class="ai-avatar">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <div>
+                        <h2>Neural AI Tutor</h2>
+                        <div class="chat-subtitle">
+                            Interactive learning assistant
+                        </div>
+                    </div>
+                </div>
                 
-                this.overlay.style.display = 'block';
-                setTimeout(() => {
-                    this.overlay.style.opacity = '1';
-                }, 10);
-            }
+                <div class="chat-controls">
+                    <button class="collapse-btn" id="collapseBtn" title="Collapse chat">
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                </div>
+            </div>
             
-            closeMenu() {
-                this.isOpen = false;
-                this.menuBtn.classList.remove('active');
-                this.leftPanel.classList.remove('active');
-                this.rightPanel.classList.remove('active');
+            <div class="chat-messages" id="chatMessages">
+                <div class="message message-ai">
+                    <div class="message-content">
+                        Hello! I'm your Neural AI Tutor. I can help you learn complex concepts through interactive visualization and conversation. What would you like to explore today?
+                    </div>
+                    <div class="message-time">Just now</div>
+                </div>
                 
-                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();
-            }
+                <!-- Typing indicator (hidden by default) -->
+                <div class="message-typing" id="typingIndicator" style="display: none;">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <span style="color: #a0b0ff; font-size: 0.9em; margin-left: 10px;">Thinking...</span>
+                </div>
+            </div>
             
-            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');
+            <div class="chat-input-container">
+                <div class="input-wrapper">
+                    <textarea 
+                        class="chat-input" 
+                        id="chatInput" 
+                        placeholder="Ask me anything about science, technology, mathematics, or any subject..."
+                        rows="1"
+                    ></textarea>
+                    
+                    <div class="input-buttons">
+                        <button class="voice-input-btn" id="voiceBtn" title="Start voice input">
+                            <i class="fas fa-microphone"></i>
+                        </button>
                         
-                        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');
-                        }
-                    });
-                });
-            }
-        }
+                        <button class="send-btn" id="sendBtn" title="Send message">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Loading Screen -->
+        <div class="loading-screen" id="loadingScreen">
+            <div class="spinner"></div>
+            <div id="loadingText">Initializing Neural AI Tutor...</div>
+        </div>
+        
+        <!-- Error Screen -->
+        <div class="error-screen" id="errorScreen">
+            <h2>⚠️ System Initialization Failed</h2>
+            <p id="errorMessage">Unable to load 3D visualization engine. Please check your browser compatibility or try again.</p>
+            <button class="retry-btn" id="retryBtn">Retry Initialization</button>
+        </div>
+    </div>
 
-        // RAG AI Tutor System
-        class RAGAITutor {
+    <script>
+        // Performance-optimized Starfield
+        class OptimizedStarfield {
             constructor() {
-                this.knowledgeBase = [];
-                this.vectorStore = null;
-                this.isTraining = false;
-                this.currentSession = null;
+                this.canvas = document.getElementById('starfieldCanvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.stars = [];
+                this.numStars = 800; // Reduced for performance
+                this.time = 0;
+                this.lastFrameTime = 0;
+                this.animationFrameId = null;
+                this.initialized = false;
+                
                 this.init();
             }
             
             init() {
-                this.setupEventListeners();
-                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.resize();
+                window.addEventListener('resize', () => {
+                    this.resize();
+                    if (this.initialized) this.createStars();
                 });
                 
-                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()
-                });
+                this.createStars();
+                this.initialized = true;
+                this.animate();
+            }
+            
+            createStars() {
+                this.stars = [];
+                const width = this.canvas.width / (window.devicePixelRatio || 1);
+                const height = this.canvas.height / (window.devicePixelRatio || 1);
+                
+                for (let i = 0; i < this.numStars; i++) {
+                    this.stars.push({
+                        x: Math.random() * width,
+                        y: Math.random() * height,
+                        size: Math.random() * 1.2 + 0.3,
+                        brightness: Math.random() * 0.6 + 0.4,
+                        speed: Math.random() * 0.1 + 0.05,
+                        blinkSpeed: Math.random() * 0.015 + 0.01,
+                        blinkPhase: Math.random() * Math.PI * 2,
+                        color: Math.random() > 0.7 ? 
+                               `rgba(180, 200, 255, ${Math.random() * 0.5 + 0.5})` :
+                               `rgba(255, 255, 255, ${Math.random() * 0.3 + 0.3})`
+                    });
+                }
             }
             
-            setupEventListeners() {
-                document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
-                    this.addKnowledgeFromText();
-                });
+            resize() {
+                const dpr = Math.min(window.devicePixelRatio, 1.5); // Reduced for performance
+                const width = this.canvas.clientWidth;
+                const height = this.canvas.clientHeight;
                 
-                document.getElementById('trainBtn').addEventListener('click', () => {
-                    this.trainRAGModel();
-                });
+                this.canvas.width = width * dpr;
+                this.canvas.height = height * dpr;
+                this.ctx.scale(dpr, dpr);
             }
             
-            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()
-                };
+            animate(currentTime = 0) {
+                this.animationFrameId = requestAnimationFrame((time) => this.animate(time));
                 
-                this.addKnowledgeItem(knowledgeItem);
-                textArea.value = '';
-                this.showRAGStatus('Knowledge added successfully!', 'success');
-            }
-            
-            addKnowledgeItem(item) {
-                this.knowledgeBase.push(item);
-            }
-            
-            async trainRAGModel() {
-                if (this.knowledgeBase.length === 0) {
-                    this.showRAGStatus('No knowledge to train on. Please add some content first.', 'warning');
-                    return;
-                }
+                // Throttle updates to ~60fps
+                const deltaTime = currentTime - this.lastFrameTime;
+                if (deltaTime < 16) return; // ~60fps
+                this.lastFrameTime = currentTime;
                 
-                this.isTraining = true;
-                this.showRAGStatus('Starting RAG training...', 'processing');
+                this.time += deltaTime * 0.001;
+                const width = this.canvas.clientWidth;
+                const height = this.canvas.clientHeight;
                 
-                const progressBar = document.getElementById('trainingProgress');
-                progressBar.style.width = '0%';
+                // Clear with gradient
+                const gradient = this.ctx.createRadialGradient(
+                    width/2, height/2, 0,
+                    width/2, height/2, Math.max(width, height)/2
+                );
+                gradient.addColorStop(0, 'rgba(5, 5, 10, 0.1)');
+                gradient.addColorStop(0.7, 'rgba(0, 0, 5, 0.8)');
+                gradient.addColorStop(1, 'rgba(0, 0, 2, 1)');
                 
-                const steps = ['Preprocessing text', 'Creating embeddings', 'Building vector store', 'Optimizing retrieval'];
+                this.ctx.fillStyle = gradient;
+                this.ctx.fillRect(0, 0, width, height);
                 
-                for (let i = 0; i < steps.length; i++) {
-                    this.showRAGStatus(steps[i], 'processing');
-                    progressBar.style.width = `${((i + 1) / steps.length) * 100}%`;
+                // Draw stars with optimized rendering
+                this.stars.forEach(star => {
+                    const blink = (Math.sin(this.time * star.blinkSpeed + star.blinkPhase) + 1) * 0.3;
+                    const currentBrightness = star.brightness * (0.8 + blink * 0.2);
                     
-                    await this.sleep(1000);
-                }
-                
-                this.vectorStore = {
-                    size: this.knowledgeBase.length,
-                    trainedAt: new Date().toISOString(),
-                    model: 'all-MiniLM-L6-v2'
-                };
-                
-                this.isTraining = false;
-                this.showRAGStatus(`RAG training complete! ${this.knowledgeBase.length} documents indexed.`, 'success');
-                
-                setTimeout(() => {
-                    progressBar.style.width = '0%';
-                }, 2000);
+                    // Draw star with glow
+                    this.ctx.beginPath();
+                    this.ctx.arc(star.x, star.y, star.size * (1 + currentBrightness * 0.5), 0, Math.PI * 2);
+                    
+                    const gradient = this.ctx.createRadialGradient(
+                        star.x, star.y, 0,
+                        star.x, star.y, star.size * 2
+                    );
+                    
+                    gradient.addColorStop(0, star.color.replace(/[\d.]+\)$/, `${currentBrightness})`));
+                    gradient.addColorStop(0.5, star.color.replace(/[\d.]+\)$/, `${currentBrightness * 0.3})`));
+                    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+                    
+                    this.ctx.fillStyle = gradient;
+                    this.ctx.fill();
+                });
             }
             
-            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?";
+            destroy() {
+                if (this.animationFrameId) {
+                    cancelAnimationFrame(this.animationFrameId);
                 }
-                
-                return this.generateResponse(query, relevantKnowledge);
             }
+        }
+
+        // Sidebar and Panel Management
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('expanded');
+        }
+
+        function togglePanel(panelId) {
+            const panel = document.getElementById(panelId);
+            const chevron = document.getElementById(panelId.replace('Panel', 'Chevron'));
             
-            findRelevantKnowledge(query) {
-                const queryLower = query.toLowerCase();
-                const relevant = [];
-                
-                for (const item of this.knowledgeBase) {
-                    if (item.content.toLowerCase().includes(queryLower) || 
-                        item.title.toLowerCase().includes(queryLower)) {
-                        relevant.push(item);
-                        
-                        if (relevant.length >= 3) break;
-                    }
-                }
-                
-                return relevant;
-            }
+            panel.classList.toggle('active');
+            chevron.classList.toggle('rotated');
+        }
+
+        // Chat Collapse Functionality
+        let isChatCollapsed = false;
+        const chatOverlay = document.getElementById('chatOverlay');
+        const collapseBtn = document.getElementById('collapseBtn');
+        
+        collapseBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            toggleChat();
+        });
+        
+        function toggleChat() {
+            isChatCollapsed = !isChatCollapsed;
+            chatOverlay.classList.toggle('collapsed');
             
-            generateResponse(query, relevantKnowledge) {
-                const context = relevantKnowledge.map(item => item.content).join('\n\n');
-                return `Based on my knowledge base:\n\n${context}\n\nRegarding your question "${query}", here's what I can explain...`;
+            const icon = collapseBtn.querySelector('i');
+            if (isChatCollapsed) {
+                icon.className = 'fas fa-chevron-up';
+                collapseBtn.title = 'Expand chat';
+            } else {
+                icon.className = 'fas fa-chevron-down';
+                collapseBtn.title = 'Collapse chat';
             }
-            
-            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);
-                }
+        }
+
+        // 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');
             
-            sleep(ms) {
-                return new Promise(resolve => setTimeout(resolve, ms));
-            }
+            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('statusText').textContent = text;
+            document.getElementById('loadingText').textContent = text;
         }
 
         // Voice Synthesis System
@@ -2039,7 +1280,8 @@
                     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.testScript = "Once upon a time, there was a little girl who lived in a village near the forest. " +
+                    "Whenever she went out, the little girl wore a red riding cloak, so everyone in the village called her Little Red Riding Hood.";
                 
                 this.initVoices();
                 this.setupEventListeners();
@@ -2077,8 +1319,7 @@
                     'Microsoft David',
                     'Microsoft Zira',
                     'Alex',
-                    'Samantha',
-                    'Daniel'
+                    'Samantha'
                 ];
                 
                 for (const voiceName of preferredVoices) {
@@ -2086,6 +1327,7 @@
                     if (voice) {
                         this.currentVoice = voice;
                         this.updateVoiceSelect(voice);
+                        this.showStatus(`Selected: ${voice.name}`, 3000);
                         break;
                     }
                 }
@@ -2116,7 +1358,6 @@
                     const option = document.createElement('option');
                     option.value = voice.name;
                     option.textContent = `${voice.name} (${voice.lang})`;
-                    option.dataset.lang = voice.lang;
                     voiceSelect.appendChild(option);
                 });
             }
@@ -2137,6 +1378,7 @@
                     const selectedVoice = this.voices.find(v => v.name === e.target.value);
                     if (selectedVoice) {
                         this.currentVoice = selectedVoice;
+                        this.showStatus(`Voice changed to: ${selectedVoice.name}`, 2000);
                     }
                 });
                 
@@ -2167,21 +1409,45 @@
                         : '<i class="fas fa-volume-mute"></i> Auto-Speak';
                     
                     btn.classList.toggle('active', this.isAutoSpeak);
+                    
+                    this.showStatus(this.isAutoSpeak ? 'Auto-speak enabled' : 'Auto-speak disabled', 2000);
                 });
                 
                 document.getElementById('stopBtn').addEventListener('click', () => {
-                    this.stopSpeaking();
+                    this.stopAllSpeech();
                 });
                 
                 document.getElementById('previewBtn').addEventListener('click', () => {
                     this.previewCurrentVoice();
                 });
+                
+                this.synth.onstart = () => {
+                    this.isSpeaking = true;
+                    document.getElementById('stopBtn').classList.add('active');
+                    this.showStatus('Speaking...');
+                    
+                    if (window.visualization) {
+                        window.visualization.setPreset('teaching');
+                    }
+                };
+                
+                this.synth.onend = () => {
+                    this.isSpeaking = false;
+                    document.getElementById('stopBtn').classList.remove('active');
+                    this.hideStatus();
+                    
+                    if (window.visualization) {
+                        setTimeout(() => {
+                            window.visualization.setPreset('idle');
+                        }, 1000);
+                    }
+                };
             }
             
             speak(text) {
                 if (!this.isAutoSpeak || !text || this.isSpeaking) return;
                 
-                this.stopSpeaking();
+                this.stopAllSpeech();
                 
                 const utterance = new SpeechSynthesisUtterance(text);
                 
@@ -2193,42 +1459,54 @@
                 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.hideStatus();
                 };
                 
                 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) {
+            stopAllSpeech() {
+                if (this.synth.speaking) {
                     this.synth.cancel();
                     this.isSpeaking = false;
                     this.currentUtterance = null;
+                    document.getElementById('stopBtn').classList.remove('active');
+                    this.hideStatus();
                 }
             }
             
             previewCurrentVoice() {
+                this.stopAllSpeech();
                 this.speak(this.testScript);
+                this.showStatus('Reading: Little Red Riding Hood', 3000);
+            }
+            
+            showStatus(message, duration = null) {
+                const statusEl = document.getElementById('voiceStatus');
+                const messageEl = document.getElementById('statusMessage');
+                
+                messageEl.textContent = message;
+                statusEl.style.display = 'flex';
+                
+                if (duration) {
+                    setTimeout(() => {
+                        this.hideStatus();
+                    }, duration);
+                }
+            }
+            
+            hideStatus() {
+                const statusEl = document.getElementById('voiceStatus');
+                statusEl.style.display = 'none';
             }
         }
 
-        // Chat Interface - FULLY INTEGRATED WITH LLM
-        class ChatInterface {
-            constructor(ragTutor, llmIntegration) {
-                this.ragTutor = ragTutor;
-                this.llmIntegration = llmIntegration;
+        // Clean Chat Interface
+        class CleanChatInterface {
+            constructor() {
                 this.isListening = false;
                 this.initChat();
             }
@@ -2238,7 +1516,7 @@
                 this.chatMessages = document.getElementById('chatMessages');
                 this.voiceBtn = document.getElementById('voiceBtn');
                 this.sendBtn = document.getElementById('sendBtn');
-                this.chatStatusText = document.getElementById('chatStatusText');
+                this.typingIndicator = document.getElementById('typingIndicator');
                 
                 this.setupEventListeners();
                 this.autoResizeTextarea();
@@ -2255,13 +1533,14 @@
                 });
                 
                 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);
+                const newHeight = Math.min(textarea.scrollHeight, 150);
                 textarea.style.height = newHeight + 'px';
             }
             
@@ -2271,7 +1550,6 @@
                 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');
@@ -2283,7 +1561,6 @@
                 } 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');
@@ -2311,18 +1588,17 @@
                     this.isListening = false;
                     this.voiceBtn.classList.remove('listening');
                     this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                    this.chatStatusText.textContent = 'Online';
                 }, 500);
             }
             
-            async sendMessage() {
+            sendMessage() {
                 const message = this.chatInput.value.trim();
                 if (message === '') return;
                 
                 this.addMessage(message, 'user');
                 this.chatInput.value = '';
                 this.autoResizeTextarea();
-                await this.processAIResponse(message);
+                this.processAIResponse(message);
             }
             
             addMessage(content, sender) {
@@ -2350,97 +1626,61 @@
                 return div.innerHTML;
             }
             
-            async processAIResponse(userMessage) {
-                // Update 3D visualization
+            processAIResponse(userMessage) {
+                this.showTypingIndicator();
+                
                 if (window.visualization) {
                     window.visualization.setPreset('processing');
                 }
                 
-                // Show typing indicator (simulated delay)
-                const processingTime = 1000 + Math.random() * 2000;
+                const processingTime = 800 + Math.random() * 1200;
                 
-                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);
-                    }
+                setTimeout(() => {
+                    this.hideTypingIndicator();
                     
-                    // Add AI response to chat
+                    const response = this.generateAIResponse(userMessage);
                     this.addMessage(response, 'ai');
                     
-                    // Speak the response
-                    if (window.voiceSynthesis) {
+                    if (window.voiceSynthesis && window.voiceSynthesis.isAutoSpeak) {
                         setTimeout(() => {
                             window.voiceSynthesis.speak(response);
                         }, 300);
                     }
                     
-                    // Update 3D visualization
                     if (window.visualization) {
                         window.visualization.setPreset('responding');
                         
                         setTimeout(() => {
                             window.visualization.setPreset('idle');
-                        }, 3000);
+                        }, 2000);
                     }
                 }, 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);
+            showTypingIndicator() {
+                this.typingIndicator.style.display = 'flex';
+                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+            }
+            
+            hideTypingIndicator() {
+                this.typingIndicator.style.display = 'none';
             }
             
             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."
+                    quantum: "Quantum computing uses quantum bits or 'qubits' that exist in superposition states, allowing parallel computation of vast possibilities simultaneously. This enables solving complex problems exponentially faster than classical computers for specific applications like cryptography and molecular simulation.",
+                    neural: "Neural networks learn through iterative adjustment of connection weights using backpropagation and gradient descent. Each training example slightly modifies the network's parameters to reduce prediction error, gradually forming complex hierarchical representations of patterns in data.",
+                    ai: "Artificial Intelligence (AI) is the broad discipline of creating intelligent machines. Machine Learning (ML) is a subset where systems learn from data without explicit programming. Deep Learning (DL) is a further subset using multi-layered neural networks to extract progressively abstract features from raw input.",
+                    blockchain: "Blockchain is a decentralized, immutable ledger technology where transactions are grouped into blocks, cryptographically chained together. This creates a transparent, tamper-resistant record system enabling trustless transactions without central authorities.",
+                    calculus: "Derivatives measure instantaneous rate of change - the mathematical equivalent of a speedometer showing exact speed at each moment. They're fundamental for understanding change, optimization, and modeling dynamic systems across science and engineering.",
+                    default: "I'd be happy to explain that! Could you tell me more about what specifically you'd like to understand? For example, are you interested in the fundamental concepts, practical applications, current research developments, or learning resources?"
                 };
                 
                 const lowerMessage = userMessage.toLowerCase();
                 
                 if (lowerMessage.includes('quantum')) return responses.quantum;
                 if (lowerMessage.includes('neural') || lowerMessage.includes('network')) return responses.neural;
+                if (lowerMessage.includes('artificial intelligence') || lowerMessage.includes(' ai ') || lowerMessage.includes('machine learning')) return responses.ai;
                 if (lowerMessage.includes('blockchain')) return responses.blockchain;
                 if (lowerMessage.includes('calculus') || lowerMessage.includes('derivative')) return responses.calculus;
                 
@@ -2448,8 +1688,8 @@
             }
         }
 
-        // 3D Visualization
-        class AITutorVisualization {
+        // High-Performance Fluid Neural Visualization
+        class FluidNeuralVisualization {
             constructor() {
                 if (!checkThreeJS()) return;
                 
@@ -2457,115 +1697,202 @@
                 this.camera = null;
                 this.renderer = null;
                 this.particles = null;
+                this.connections = null;
                 this.controls = null;
                 
                 this.params = {
                     intensity: 0.5,
-                    particleCount: 2000,
+                    particleCount: 1800, // Optimized for performance
                     energy: 0.3,
-                    mode: 'idle'
+                    mode: 'idle',
+                    colorPhase: 0
                 };
                 
-                this.audioData = new Array(32).fill(0);
+                this.audioData = new Array(16).fill(0); // Reduced for performance
                 this.time = 0;
+                this.lastFrameTime = 0;
                 this.animationFrameId = null;
+                this.isActive = false;
+                
+                this.colorSchemes = [
+                    { primary: 0x5a6cff, secondary: 0x00ff9d }, // Blue-Teal
+                    { primary: 0xff5a5a, secondary: 0xff9d00 }, // Red-Orange
+                    { primary: 0x9d5aff, secondary: 0x00ff9d }, // Purple-Teal
+                    { primary: 0x00ff9d, secondary: 0x5a6cff }  // Teal-Blue
+                ];
                 
                 try {
                     this.init();
-                    this.createParticles();
+                    this.createFluidParticles();
                     this.setupControls();
+                    this.isActive = true;
                     this.animate();
-                    updateStatus('AI Interface Ready');
+                    updateStatus('Neural AI System Ready');
                     setTimeout(hideLoading, 500);
                 } catch (error) {
                     console.error('Initialization error:', error);
-                    showError('Failed to initialize 3D scene: ' + error.message);
+                    showError('Failed to initialize 3D visualization: ' + error.message);
                 }
             }
             
             init() {
-                updateStatus('Creating 3D scene...');
+                updateStatus('Initializing neural visualization...');
                 
+                // Scene with transparent background
                 this.scene = new THREE.Scene();
-                this.scene.background = new THREE.Color(0x0a0a0f);
+                this.scene.background = null;
                 
+                // Camera setup for full-screen viewing
                 this.camera = new THREE.PerspectiveCamera(
-                    75, 
-                    window.innerWidth / window.innerHeight, 
-                    0.1, 
+                    65,
+                    window.innerWidth / window.innerHeight,
+                    0.1,
                     1000
                 );
-                this.camera.position.z = 5;
+                this.camera.position.set(0, 0, 10);
                 
+                // High-performance renderer
                 const canvas = document.getElementById('mainCanvas');
                 this.renderer = new THREE.WebGLRenderer({ 
                     canvas: canvas,
                     antialias: true,
-                    alpha: true
+                    alpha: true,
+                    powerPreference: "high-performance",
+                    precision: "mediump" // Optimized for performance
                 });
-                this.renderer.setSize(window.innerWidth, window.innerHeight);
-                this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 
-                this.scene.fog = new THREE.Fog(0x0a0a0f, 10, 25);
+                const dpr = Math.min(window.devicePixelRatio, 2);
+                this.renderer.setPixelRatio(dpr);
+                this.renderer.setSize(window.innerWidth, window.innerHeight);
+                this.renderer.setClearColor(0x000000, 0);
                 
-                const ambientLight = new THREE.AmbientLight(0x222244, 0.5);
+                // Optimized lighting
+                const ambientLight = new THREE.AmbientLight(0x444488, 0.6);
                 this.scene.add(ambientLight);
                 
-                const directionalLight = new THREE.DirectionalLight(0x5a6cff, 1);
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                 directionalLight.position.set(5, 3, 5);
                 this.scene.add(directionalLight);
                 
+                const pointLight = new THREE.PointLight(0x5a6cff, 0.4, 20);
+                pointLight.position.set(-3, -2, 3);
+                this.scene.add(pointLight);
+                
+                // Smooth controls
                 this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                 this.controls.enableDamping = true;
                 this.controls.dampingFactor = 0.05;
+                this.controls.rotateSpeed = 0.4;
+                this.controls.zoomSpeed = 0.6;
+                this.controls.minDistance = 3;
+                this.controls.maxDistance = 15;
             }
             
-            createParticles() {
+            createFluidParticles() {
+                if (this.particles) this.scene.remove(this.particles);
+                if (this.connections) this.scene.remove(this.connections);
+                
                 const geometry = new THREE.BufferGeometry();
                 const positions = new Float32Array(this.params.particleCount * 3);
                 const colors = new Float32Array(this.params.particleCount * 3);
+                const velocities = new Float32Array(this.params.particleCount * 3);
                 
+                // Create fluid distribution with multiple clusters
                 for (let i = 0; i < this.params.particleCount; i++) {
                     const i3 = i * 3;
-                    const phi = Math.acos(-1 + (2 * i) / this.params.particleCount);
-                    const theta = Math.sqrt(this.params.particleCount * Math.PI) * phi;
                     
-                    const x = Math.cos(theta) * Math.sin(phi);
-                    const y = Math.sin(theta) * Math.sin(phi);
-                    const z = Math.cos(phi);
+                    // Create clusters for organic feel
+                    const cluster = Math.floor(i / (this.params.particleCount / 4));
+                    const angle = (i % (this.params.particleCount / 4)) * 0.05;
+                    const radius = 2 + Math.sin(angle) * 0.5;
+                    
+                    const x = Math.cos(angle + cluster * 1.5) * radius;
+                    const y = Math.sin(angle + cluster * 1.5) * radius;
+                    const z = (Math.random() - 0.5) * 3;
                     
                     positions[i3] = x;
                     positions[i3 + 1] = y;
                     positions[i3 + 2] = z;
                     
-                    colors[i3] = 0.5 + x * 0.5;
-                    colors[i3 + 1] = 0.3 + y * 0.7;
-                    colors[i3 + 2] = 0.8 + z * 0.2;
+                    // Store velocities for fluid motion
+                    velocities[i3] = (Math.random() - 0.5) * 0.02;
+                    velocities[i3 + 1] = (Math.random() - 0.5) * 0.02;
+                    velocities[i3 + 2] = (Math.random() - 0.5) * 0.02;
+                    
+                    // Initial color gradient
+                    const hue = (i / this.params.particleCount) * 0.3 + this.params.colorPhase;
+                    colors[i3] = 0.6 + Math.sin(hue) * 0.2;
+                    colors[i3 + 1] = 0.8;
+                    colors[i3 + 2] = 0.9 - Math.cos(hue) * 0.2;
                 }
                 
                 geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
                 geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+                geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));
                 
                 const material = new THREE.PointsMaterial({
-                    size: 0.03,
+                    size: 0.035,
                     vertexColors: true,
                     transparent: true,
-                    opacity: 0.8,
-                    blending: THREE.AdditiveBlending
+                    opacity: 0.85,
+                    blending: THREE.AdditiveBlending,
+                    sizeAttenuation: true,
+                    depthWrite: false
                 });
                 
                 this.particles = new THREE.Points(geometry, material);
                 this.scene.add(this.particles);
                 
-                const testGeometry = new THREE.SphereGeometry(0.5, 32, 32);
-                const testMaterial = new THREE.MeshBasicMaterial({ 
-                    color: 0x5a6cff,
-                    wireframe: true,
-                    transparent: true,
-                    opacity: 0.1
-                });
-                const testSphere = new THREE.Mesh(testGeometry, testMaterial);
-                this.scene.add(testSphere);
+                // Create optimized neural connections
+                this.createOptimizedConnections();
+            }
+            
+            createOptimizedConnections() {
+                const positions = this.particles.geometry.attributes.position.array;
+                const linePositions = [];
+                
+                // Only connect nearby particles for performance
+                const connectionDistance = 2.2;
+                const maxConnections = 2;
+                
+                for (let i = 0; i < this.params.particleCount; i += 4) {
+                    const i3 = i * 3;
+                    let connections = 0;
+                    
+                    for (let j = i + 4; j < this.params.particleCount && connections < maxConnections; j += 4) {
+                        const j3 = j * 3;
+                        
+                        const dx = positions[i3] - positions[j3];
+                        const dy = positions[i3 + 1] - positions[j3 + 1];
+                        const dz = positions[i3 + 2] - positions[j3 + 2];
+                        const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                        
+                        if (distance < connectionDistance) {
+                            linePositions.push(
+                                positions[i3], positions[i3 + 1], positions[i3 + 2],
+                                positions[j3], positions[j3 + 1], positions[j3 + 2]
+                            );
+                            connections++;
+                        }
+                    }
+                }
+                
+                if (linePositions.length > 0) {
+                    const lineGeometry = new THREE.BufferGeometry();
+                    lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
+                    
+                    const lineMaterial = new THREE.LineBasicMaterial({
+                        vertexColors: false,
+                        color: 0x5a6cff,
+                        transparent: true,
+                        opacity: 0.2,
+                        blending: THREE.AdditiveBlending,
+                        linewidth: 1
+                    });
+                    
+                    this.connections = new THREE.LineSegments(lineGeometry, lineMaterial);
+                    this.scene.add(this.connections);
+                }
             }
             
             setupControls() {
@@ -2583,9 +1910,12 @@
                 });
                 
                 particleCountSlider.addEventListener('input', (e) => {
-                    this.params.particleCount = parseInt(e.target.value);
-                    particleCountValue.textContent = e.target.value;
-                    this.updateParticleCount();
+                    const newCount = parseInt(e.target.value);
+                    if (newCount !== this.params.particleCount) {
+                        this.params.particleCount = newCount;
+                        particleCountValue.textContent = e.target.value;
+                        this.createFluidParticles();
+                    }
                 });
                 
                 energySlider.addEventListener('input', (e) => {
@@ -2609,97 +1939,152 @@
                 this.params.mode = preset;
                 
                 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.classList.toggle('active', btn.dataset.preset === preset);
                 });
-            }
-            
-            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;
+                const statusMap = {
+                    'listening': '🎤 Listening for input...',
+                    'processing': '⚡ Processing thoughts...',
+                    'responding': '💬 Formulating response...',
+                    'exploring': '🔍 Exploring concepts...',
+                    'teaching': '📚 Teaching mode active',
+                    'idle': '🌀 Neural system idle'
+                };
+                
+                if (statusMap[preset]) {
+                    updateStatus(statusMap[preset]);
                 }
             }
             
-            updateParticles() {
+            updateFluidParticles(deltaTime) {
                 if (!this.particles) return;
                 
                 const positions = this.particles.geometry.attributes.position.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 colors = this.particles.geometry.attributes.color.array;
+                const velocities = this.particles.geometry.attributes.velocity.array;
                 const time = this.time;
                 
+                // Smooth color phase transition
+                this.params.colorPhase += deltaTime * 0.05;
+                
                 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;
+                    // Fluid movement
+                    let waveX = 0, waveY = 0, waveZ = 0;
+                    let speed = 1;
                     
                     switch(this.params.mode) {
                         case 'listening':
-                            radius += Math.sin(time * 3 + i * 0.01) * 0.5 * intensity;
+                            waveX = Math.sin(time * 3 + i * 0.01) * 0.2;
+                            waveY = Math.cos(time * 2.5 + i * 0.015) * 0.15;
+                            speed = 1.2;
                             break;
                         case 'processing':
-                            radius += Math.sin(time * 5 + i * 0.02) * 0.6 * intensity;
+                            waveX = Math.sin(time * 4 + i * 0.02) * 0.3;
+                            waveY = Math.cos(time * 3.5 + i * 0.025) * 0.25;
+                            waveZ = Math.sin(time * 2 + i * 0.01) * 0.2;
+                            speed = 1.5;
                             break;
                         case 'responding':
-                            radius += (Math.sin(time * 2 + i * 0.005) + 1) * 0.4 * intensity;
+                            waveX = (Math.sin(time * 2 + i * 0.008) + 1) * 0.15;
+                            waveY = (Math.cos(time * 1.8 + i * 0.012) + 1) * 0.12;
+                            speed = 1.3;
                             break;
                         case 'exploring':
-                            radius += Math.sin(time * 1.5 + i * 0.015) * 0.7 * intensity;
+                            waveX = Math.sin(time * 1.5 + i * 0.015) * 0.25;
+                            waveY = Math.cos(time * 1.3 + i * 0.02) * 0.22;
+                            waveZ = Math.sin(time * 0.8 + i * 0.005) * 0.18;
+                            speed = 1.1;
                             break;
                         case 'teaching':
-                            radius += Math.sin(time * 4 + i * 0.008) * 0.55 * intensity;
+                            waveX = Math.sin(time * 3.5 + i * 0.01) * 0.22;
+                            waveY = Math.cos(time * 3 + i * 0.015) * 0.2;
+                            speed = 1.4;
                             break;
-                        default:
-                            radius += Math.sin(time * 0.5 + i * 0.01) * 0.2 * intensity;
+                        default: // idle
+                            waveX = Math.sin(time * 0.8 + i * 0.005) * 0.1;
+                            waveY = Math.cos(time * 0.6 + i * 0.008) * 0.08;
+                            speed = 0.8;
                     }
                     
-                    radius += Math.sin(time * 8) * 0.2 * this.params.energy;
+                    // Apply smooth movement
+                    const intensity = this.params.intensity * this.params.energy;
+                    positions[i3] += (waveX * intensity + velocities[i3]) * speed * deltaTime * 60;
+                    positions[i3 + 1] += (waveY * intensity + velocities[i3 + 1]) * speed * deltaTime * 60;
+                    positions[i3 + 2] += (waveZ * intensity + velocities[i3 + 2]) * speed * deltaTime * 60;
                     
-                    const audioIndex = Math.floor((i / this.params.particleCount) * this.audioData.length);
-                    radius += this.audioData[audioIndex] * 0.5 * intensity;
+                    // Soft boundary constraints
+                    const radius = Math.sqrt(
+                        positions[i3] * positions[i3] + 
+                        positions[i3 + 1] * positions[i3 + 1] + 
+                        positions[i3 + 2] * positions[i3 + 2]
+                    );
                     
-                    positions[i3] = x * radius;
-                    positions[i3 + 1] = y * radius;
-                    positions[i3 + 2] = z * radius;
+                    if (radius > 5) {
+                        positions[i3] *= 0.99;
+                        positions[i3 + 1] *= 0.99;
+                        positions[i3 + 2] *= 0.99;
+                    }
+                    
+                    // Dynamic color gradients
+                    const hueOffset = (i / this.params.particleCount) * 0.4;
+                    const pulse = Math.sin(time * 2 + i * 0.002) * 0.1;
+                    
+                    // Alternating color schemes based on mode and time
+                    const colorScheme = this.colorSchemes[Math.floor((this.params.colorPhase + hueOffset) * 2) % this.colorSchemes.length];
+                    const primary = new THREE.Color(colorScheme.primary);
+                    const secondary = new THREE.Color(colorScheme.secondary);
+                    
+                    // Blend between colors based on particle position
+                    const blend = (Math.sin(positions[i3] * 0.5 + positions[i3 + 1] * 0.3 + time) + 1) * 0.5;
+                    
+                    colors[i3] = primary.r * (1 - blend) + secondary.r * blend + pulse;
+                    colors[i3 + 1] = primary.g * (1 - blend) + secondary.g * blend + pulse * 0.5;
+                    colors[i3 + 2] = primary.b * (1 - blend) + secondary.b * blend + pulse * 0.3;
                 }
                 
                 this.particles.geometry.attributes.position.needsUpdate = true;
+                this.particles.geometry.attributes.color.needsUpdate = true;
                 
-                this.particles.rotation.y = time * 0.1;
-                this.particles.rotation.x = Math.sin(time * 0.05) * 0.1;
+                // Gentle rotation
+                this.particles.rotation.y += deltaTime * 0.1;
+                this.particles.rotation.x = Math.sin(time * 0.05) * 0.05;
             }
             
-            animate() {
-                this.animationFrameId = requestAnimationFrame(() => this.animate());
+            animate(currentTime = 0) {
+                if (!this.isActive) return;
+                
+                this.animationFrameId = requestAnimationFrame((time) => this.animate(time));
+                
+                // Calculate delta time for smooth animation
+                const deltaTime = (currentTime - this.lastFrameTime) / 1000;
+                this.lastFrameTime = currentTime;
+                
+                // Skip frame if delta time is too small
+                if (deltaTime < 0.001) return;
                 
-                this.time += 0.016;
+                // Cap delta time to prevent large jumps
+                const cappedDeltaTime = Math.min(deltaTime, 0.033); // Cap at ~30fps min
                 
-                this.simulateAudioData();
-                this.updateParticles();
+                this.time += cappedDeltaTime;
+                
+                // Update audio simulation
+                for (let i = 0; i < this.audioData.length; i++) {
+                    this.audioData[i] = Math.sin(this.time * (1 + i * 0.2)) * 0.5 + 0.5;
+                }
+                
+                // Update particles with smooth delta time
+                this.updateFluidParticles(cappedDeltaTime);
+                
+                // Update connections if they exist
+                if (this.connections) {
+                    this.connections.rotation.y = this.time * 0.05;
+                    
+                    // Pulsing opacity
+                    const opacity = 0.2 + Math.sin(this.time * 3) * 0.1;
+                    this.connections.material.opacity = opacity * this.params.intensity;
+                }
                 
                 this.controls.update();
                 this.renderer.render(this.scene, this.camera);
@@ -2712,6 +2097,7 @@
             }
             
             destroy() {
+                this.isActive = false;
                 if (this.animationFrameId) {
                     cancelAnimationFrame(this.animationFrameId);
                 }
@@ -2724,72 +2110,88 @@
             }
         }
         
-        // Initialize everything
+        // Initialize when page loads
         window.addEventListener('load', () => {
-            updateStatus('Loading AI Interface...');
+            updateStatus('Loading Neural AI Tutor...');
+            
+            // Initialize starfield
+            window.starfield = new OptimizedStarfield();
             
+            // Auto-expand sidebar on hover
+            const sidebar = document.getElementById('sidebar');
+            sidebar.addEventListener('mouseenter', () => {
+                sidebar.classList.add('expanded');
+            });
+            
+            sidebar.addEventListener('mouseleave', () => {
+                sidebar.classList.remove('expanded');
+            });
+            
+            // Wait for resources
             setTimeout(() => {
-                // Initialize UI components first
-                window.mobileMenu = new MobileMenu();
-                window.accordion = new Accordion();
-                
                 // Initialize 3D visualization
-                window.visualization = new AITutorVisualization();
-                
-                // Initialize RAG AI Tutor
-                window.ragTutor = new RAGAITutor();
+                window.visualization = new FluidNeuralVisualization();
                 
-                // Initialize FULLY FUNCTIONAL LLM Integration
-                window.llmIntegration = new LLMIntegration();
-                
-                // Initialize chat interface with BOTH RAG and LLM
-                window.chatInterface = new ChatInterface(window.ragTutor, window.llmIntegration);
+                // Initialize chat interface
+                window.chatInterface = new CleanChatInterface();
                 
                 // Initialize voice synthesis
                 if ('speechSynthesis' in window) {
                     window.voiceSynthesis = new VoiceSynthesis();
                     updateStatus('Voice synthesis initialized');
+                } else {
+                    console.warn('Speech synthesis not supported');
+                    document.getElementById('voiceStatus').style.display = 'flex';
+                    document.getElementById('statusMessage').textContent = 'Voice synthesis not supported';
+                    document.getElementById('statusMessage').style.color = '#ff5a5a';
                 }
                 
-                if (window.visualization && window.visualization.scene) {
-                    window.addEventListener('resize', () => window.visualization.onWindowResize());
+                if (window.visualization) {
+                    // Handle window resize
+                    const handleResize = () => {
+                        window.visualization.onWindowResize();
+                        if (window.starfield) {
+                            window.starfield.resize();
+                        }
+                    };
+                    window.addEventListener('resize', handleResize);
                     
+                    // Keyboard shortcuts
                     window.addEventListener('keydown', (e) => {
-                        if (e.code === 'Space') {
+                        if (e.code === 'Space' && !e.ctrlKey) {
                             window.visualization.setPreset(
                                 window.visualization.params.mode === 'idle' ? 'listening' : 'idle'
                             );
                         }
                         if (e.code === 'Space' && e.ctrlKey && window.voiceSynthesis) {
-                            window.voiceSynthesis.stopSpeaking();
+                            window.voiceSynthesis.stopAllSpeech();
+                        }
+                        if (e.code === 'Escape') {
+                            sidebar.classList.remove('expanded');
                         }
                     });
                     
+                    // Set initial preset
                     window.visualization.setPreset('idle');
-                }
-                
-                // Test LLM connection on startup if credentials exist
-                if (window.llmIntegration.apiKey && window.llmIntegration.apiEndpoint) {
+                    
+                    // Auto-open visualization panel
                     setTimeout(() => {
-                        window.llmIntegration.testConnection().then(connected => {
-                            if (connected) {
-                                console.log('LLM API auto-connected on startup');
-                            }
-                        });
-                    }, 2000);
+                        togglePanel('visualizationPanel');
+                    }, 1000);
                 }
-                
-                hideLoading();
-                
             }, 100);
         });
         
+        // Cleanup on page unload
         window.addEventListener('beforeunload', () => {
             if (window.visualization) {
                 window.visualization.destroy();
             }
+            if (window.starfield) {
+                window.starfield.destroy();
+            }
             if (window.voiceSynthesis) {
-                window.voiceSynthesis.stopSpeaking();
+                window.voiceSynthesis.stopAllSpeech();
             }
         });
     </script>
