diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -20,62 +20,152 @@
             font-family: 'Segoe UI', system-ui, sans-serif;
             overflow: hidden;
             height: 100vh;
+            width: 100vw;
         }
         
-        #canvasContainer {
-            width: 100%;
-            height: 100%;
-            position: relative;
+        /* Mobile Navigation */
+        .mobile-nav {
+            display: none;
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 1000;
         }
         
-        canvas {
-            display: block;
-            outline: none;
-            width: 100%;
-            height: 100%;
+        .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);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .mobile-menu-btn span {
+            width: 24px;
+            height: 2px;
+            background: #a0b0ff;
+            border-radius: 2px;
+            transition: all 0.3s ease;
+        }
+        
+        .mobile-menu-btn.active span:nth-child(1) {
+            transform: rotate(45deg) translate(6px, 6px);
+        }
+        
+        .mobile-menu-btn.active span:nth-child(2) {
+            opacity: 0;
+        }
+        
+        .mobile-menu-btn.active span:nth-child(3) {
+            transform: rotate(-45deg) translate(6px, -6px);
         }
         
-        .ui-overlay {
-            position: absolute;
+        .mobile-panel-overlay {
+            display: none;
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            pointer-events: none;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            z-index: 999;
+        }
+        
+        /* Main Layout */
+        .main-container {
+            display: flex;
+            height: 100vh;
+            width: 100vw;
+            position: relative;
+        }
+        
+        /* Left Side Panel */
+        .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;
         }
         
-        /* === CHAT INTERFACE === */
-        .chat-interface {
-            position: absolute;
-            top: 30px;
-            right: 30px;
-            width: 420px;
-            height: calc(100vh - 100px);
+        .side-panel.left {
             display: flex;
             flex-direction: column;
-            pointer-events: all;
-            z-index: 101;
-            opacity: 0;
-            transform: translateY(20px);
-            animation: slideIn 0.5s ease 1s forwards;
+            gap: 25px;
         }
         
-        @keyframes slideIn {
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        /* Right Side Panel */
+        .side-panel.right {
+            border-right: none;
+            border-left: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
         }
         
-        .chat-header {
+        /* Main Content Area */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            padding: 20px;
+            overflow: hidden;
+        }
+        
+        /* 3D Canvas */
+        #canvasContainer {
+            width: 100%;
+            height: 70vh;
+            position: relative;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        canvas {
+            display: block;
+            outline: none;
+            width: 100%;
+            height: 100%;
+        }
+        
+        /* Chat Interface (Centered) */
+        .chat-interface {
+            width: 100%;
+            max-width: 800px;
+            margin-top: 30px;
+            position: relative;
+            z-index: 10;
+        }
+        
+        .chat-container {
             background: rgba(20, 20, 30, 0.9);
             backdrop-filter: blur(10px);
-            border-radius: 20px 20px 0 0;
-            padding: 20px;
+            border-radius: 20px;
             border: 1px solid rgba(255, 255, 255, 0.1);
-            border-bottom: none;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+        }
+        
+        .chat-header {
+            padding: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -106,25 +196,13 @@
             animation: pulse 2s infinite;
         }
         
-        .chat-container {
-            flex: 1;
-            background: rgba(20, 20, 30, 0.85);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-top: none;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-        }
-        
         .chat-messages {
-            flex: 1;
+            height: 300px;
             overflow-y: auto;
             padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            gap: 15px;
             scrollbar-width: thin;
             scrollbar-color: #5a6cff rgba(255, 255, 255, 0.1);
         }
@@ -145,8 +223,8 @@
         
         .message {
             max-width: 85%;
-            padding: 15px;
-            border-radius: 18px;
+            padding: 12px 15px;
+            border-radius: 15px;
             line-height: 1.5;
             position: relative;
             animation: messageAppear 0.3s ease;
@@ -185,34 +263,6 @@
             text-align: right;
         }
         
-        .message-typing {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 18px;
-            border-bottom-left-radius: 5px;
-            align-self: flex-start;
-            width: 120px;
-        }
-        
-        .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);
@@ -302,261 +352,142 @@
             transform: translateY(-2px);
         }
         
-        .voice-visualizer {
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 3px;
-            margin-top: 10px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
+        /* Cards Styling */
+        .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);
         }
         
-        .voice-visualizer.active {
-            opacity: 1;
+        .card-title {
+            font-size: 1.1em;
+            margin-bottom: 20px;
+            font-weight: 300;
+            color: #a0b0ff;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
         
-        .voice-bar {
-            width: 4px;
-            height: 10px;
-            background: #5a6cff;
-            border-radius: 2px;
-            transition: height 0.1s ease;
+        .card-title i {
+            font-size: 1em;
         }
         
-        .voice-bar.listening {
-            background: #ff5a5a;
+        /* Dropdown/Accordion */
+        .accordion {
+            margin-bottom: 15px;
         }
         
-        /* === RAG TRAINING PANEL === */
-        .rag-training-panel {
-            position: absolute;
-            top: 30px;
-            left: 350px;
-            width: 350px;
-            height: calc(100vh - 100px);
-            background: rgba(20, 20, 30, 0.9);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 25px;
-            pointer-events: all;
+        .accordion-header {
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-            z-index: 102;
-            opacity: 0;
-            transform: translateY(20px);
-            animation: slideIn 0.5s ease 1.4s forwards;
             display: flex;
-            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            transition: all 0.3s ease;
         }
         
-        .rag-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 20px;
-            color: #a0b0ff;
-            font-size: 1.1em;
-            font-weight: 300;
+        .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;
         }
         
-        .rag-section {
-            margin-bottom: 25px;
+        /* Control Groups */
+        .control-group {
+            margin-bottom: 20px;
         }
         
-        .rag-label {
+        label {
             display: block;
-            margin-bottom: 10px;
+            margin-bottom: 8px;
             font-size: 0.9em;
             color: #8892b0;
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
         
-        .rag-textarea {
-            width: 100%;
-            height: 120px;
-            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;
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
         }
         
-        .rag-textarea:focus {
-            outline: none;
-            border-color: #5a6cff;
+        input[type="range"] {
+            flex: 1;
+            height: 6px;
             background: rgba(255, 255, 255, 0.1);
-            box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
+            border-radius: 3px;
+            outline: none;
+            -webkit-appearance: none;
         }
         
-        .rag-file-upload {
-            width: 100%;
-            padding: 20px;
-            border: 2px dashed rgba(90, 108, 255, 0.3);
-            border-radius: 10px;
-            text-align: center;
+        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;
-            margin-bottom: 15px;
-        }
-        
-        .rag-file-upload:hover {
-            border-color: #5a6cff;
-            background: rgba(90, 108, 255, 0.05);
+            transition: all 0.2s;
         }
         
-        .rag-file-upload input {
-            display: none;
+        input[type="range"]::-webkit-slider-thumb:hover {
+            background: #7a8aff;
+            transform: scale(1.1);
         }
         
-        .rag-file-info {
-            font-size: 0.8em;
-            color: #8892b0;
-            margin-bottom: 15px;
+        .value-display {
+            min-width: 40px;
             text-align: center;
+            font-family: 'Courier New', monospace;
+            color: #5a6cff;
+            font-weight: 500;
         }
         
-        .rag-controls {
+        /* Button Groups */
+        .button-grid {
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: repeat(3, 1fr);
             gap: 10px;
-            margin-top: 20px;
+            margin-top: 15px;
         }
         
-        .rag-btn {
-            padding: 12px;
+        .preset-btn {
+            padding: 10px;
             background: rgba(90, 108, 255, 0.1);
             border: 1px solid rgba(90, 108, 255, 0.3);
             color: #a0b0ff;
             border-radius: 10px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
+            transition: all 0.2s;
             font-size: 0.9em;
+            text-align: center;
         }
         
-        .rag-btn:hover {
+        .preset-btn:hover {
             background: rgba(90, 108, 255, 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 {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-top: 15px;
-            padding: 10px;
-            background: rgba(0, 255, 157, 0.1);
-            border-radius: 10px;
-            font-size: 0.85em;
-            color: #00ff9d;
-            border: 1px solid rgba(0, 255, 157, 0.2);
-        }
-        
-        .rag-knowledge-list {
-            max-height: 200px;
-            overflow-y: auto;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            padding: 10px;
-            margin-top: 10px;
-        }
-        
-        .knowledge-item {
-            padding: 8px 12px;
-            background: rgba(255, 255, 255, 0.07);
-            border-radius: 8px;
-            margin-bottom: 8px;
-            font-size: 0.85em;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .knowledge-item .delete-btn {
-            color: #ff5a5a;
-            cursor: pointer;
-            padding: 4px;
-        }
-        
-        /* === VOICE CONTROLS PANEL === */
-        .voice-controls {
-            position: absolute;
-            bottom: 30px;
-            right: 470px;
-            background: rgba(20, 20, 30, 0.9);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 25px;
-            width: 300px;
-            pointer-events: all;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-            z-index: 102;
-            opacity: 0;
-            transform: translateY(20px);
-            animation: slideIn 0.5s ease 1.2s forwards;
-        }
-        
-        .voice-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 20px;
-            color: #a0b0ff;
-            font-size: 1.1em;
-            font-weight: 300;
-        }
-        
-        .voice-control-group {
-            margin-bottom: 20px;
-        }
-        
-        .voice-label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.9em;
-            color: #8892b0;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
         .voice-select {
             width: 100%;
             padding: 12px 15px;
@@ -577,56 +508,11 @@
             box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
         }
         
-        .voice-select option {
-            background: #1a1a2a;
-            color: white;
-            padding: 10px;
-        }
-        
-        .voice-slider-container {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        
-        .voice-slider {
-            flex: 1;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        
-        .voice-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            background: #5a6cff;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .voice-slider::-webkit-slider-thumb:hover {
-            background: #7a8aff;
-            transform: scale(1.1);
-        }
-        
-        .voice-value {
-            min-width: 40px;
-            text-align: center;
-            font-family: 'Courier New', monospace;
-            color: #5a6cff;
-            font-weight: 500;
-            font-size: 0.9em;
-        }
-        
         .voice-control-buttons {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 10px;
-            margin-top: 25px;
+            margin-top: 20px;
         }
         
         .voice-btn {
@@ -664,177 +550,97 @@
             background: rgba(255, 90, 90, 0.2);
         }
         
-        .voice-btn.stop.active {
-            background: rgba(255, 90, 90, 0.3);
-        }
-        
-        .voice-preview-btn {
+        /* RAG Training Section */
+        .rag-textarea {
             width: 100%;
-            padding: 12px;
+            height: 100px;
             background: rgba(255, 255, 255, 0.07);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 10px;
-            color: #a0b0ff;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            margin-top: 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;
         }
         
-        .voice-preview-btn:hover {
+        .rag-textarea:focus {
+            outline: none;
+            border-color: #5a6cff;
             background: rgba(255, 255, 255, 0.1);
-            transform: translateY(-2px);
-        }
-        
-        .voice-status {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-top: 15px;
-            padding: 10px;
-            background: rgba(0, 255, 157, 0.1);
-            border-radius: 10px;
-            font-size: 0.85em;
-            color: #00ff9d;
-            border: 1px solid rgba(0, 255, 157, 0.2);
-        }
-        
-        .voice-status i {
-            animation: pulse 2s infinite;
+            box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
         }
         
-        /* === EXISTING STYLES (PRESERVED) === */
-        .control-panel {
-            position: absolute;
-            bottom: 30px;
-            left: 30px;
-            background: rgba(20, 20, 30, 0.8);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 25px;
-            width: 300px;
-            pointer-events: all;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        .rag-controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            margin-top: 10px;
         }
         
-        .control-title {
-            font-size: 1.2em;
-            margin-bottom: 20px;
-            font-weight: 300;
+        .rag-btn {
+            padding: 12px;
+            background: rgba(90, 108, 255, 0.1);
+            border: 1px solid rgba(90, 108, 255, 0.3);
             color: #a0b0ff;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
-            gap: 10px;
+            justify-content: center;
+            gap: 8px;
+            font-size: 0.9em;
         }
         
-        .control-group {
-            margin-bottom: 20px;
+        .rag-btn:hover {
+            background: rgba(90, 108, 255, 0.2);
+            transform: translateY(-2px);
         }
         
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.9em;
-            color: #8892b0;
+        .rag-btn.primary {
+            background: linear-gradient(135deg, #5a6cff, #7a8aff);
+            color: white;
         }
         
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 15px;
+        .rag-btn.primary:hover {
+            background: linear-gradient(135deg, #7a8aff, #9aafff);
         }
         
-        input[type="range"] {
-            flex: 1;
+        .rag-progress {
+            width: 100%;
             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;
-        }
-        
-        input[type="range"]::-webkit-slider-thumb:hover {
-            background: #7a8aff;
-            transform: scale(1.1);
-        }
-        
-        .value-display {
-            min-width: 40px;
-            text-align: center;
-            font-family: 'Courier New', monospace;
-            color: #5a6cff;
-            font-weight: 500;
+            overflow: hidden;
+            margin-top: 15px;
         }
         
-        .preset-buttons {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            margin-top: 20px;
+        .rag-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #5a6cff, #00ff9d);
+            width: 0%;
+            transition: width 0.3s ease;
         }
         
-        .preset-btn {
+        .rag-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 15px;
             padding: 10px;
-            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-radius: 10px;
-            cursor: pointer;
-            transition: all 0.2s;
-            font-size: 0.9em;
-            text-align: center;
-        }
-        
-        .preset-btn:hover {
-            background: rgba(90, 108, 255, 0.2);
-            transform: translateY(-2px);
-        }
-        
-        .status-bar {
-            position: absolute;
-            top: 30px;
-            left: 30px;
-            background: rgba(20, 20, 30, 0.8);
-            backdrop-filter: blur(10px);
-            padding: 15px 25px;
-            border-radius: 15px;
-            font-size: 0.9em;
-            color: #8892b0;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .pulse-indicator {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            background: #00ff9d;
-            border-radius: 50%;
-            margin-right: 10px;
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
+            font-size: 0.85em;
+            color: #00ff9d;
+            border: 1px solid rgba(0, 255, 157, 0.2);
         }
         
+        /* Loading and Error Screens */
         .loading-screen {
-            position: absolute;
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
@@ -844,7 +650,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            z-index: 1000;
+            z-index: 2000;
         }
         
         .spinner {
@@ -862,7 +668,7 @@
         }
         
         .error-screen {
-            position: absolute;
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
@@ -872,7 +678,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            z-index: 1001;
+            z-index: 2001;
             text-align: center;
             padding: 20px;
         }
@@ -904,320 +710,512 @@
             transform: translateY(-2px);
         }
         
-        /* Responsive adjustments */
-        @media (max-width: 1600px) {
-            .rag-training-panel {
-                left: 30px;
-                top: 150px;
-                height: calc(100vh - 180px);
-            }
-            
-            .voice-controls {
-                right: 30px;
-                bottom: 400px;
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .side-panel {
+                width: 280px;
+                padding: 20px;
             }
             
             .chat-interface {
-                width: 400px;
+                max-width: 700px;
             }
         }
         
-        @media (max-height: 800px) {
-            .chat-interface {
-                height: calc(100vh - 80px);
+        @media (max-width: 1024px) {
+            .main-container {
+                flex-direction: column;
             }
             
-            .voice-controls {
-                padding: 20px;
-                width: 260px;
+            .side-panel {
+                position: fixed;
+                top: 0;
+                height: 100vh;
+                transform: translateX(-100%);
+                z-index: 1000;
             }
             
-            .rag-training-panel {
-                padding: 20px;
-                width: 320px;
+            .side-panel.left {
+                left: 0;
             }
-        }
-    </style>
-</head>
-<body>
-    <div id="canvasContainer">
-        <canvas id="mainCanvas"></canvas>
-        
-        <!-- Existing UI Overlay -->
-        <div class="ui-overlay">
-            <div class="status-bar">
-                <span class="pulse-indicator"></span>
-                <span id="statusText">AI Tutor System Ready</span>
-            </div>
-        </div>
-        
-        <!-- RAG Training Panel -->
-        <div class="rag-training-panel">
-            <div class="rag-header">
-                <i class="fas fa-graduation-cap"></i>
-                <span>AI Tutor Training</span>
-            </div>
             
-            <div class="rag-section">
-                <label class="rag-label">
-                    <i class="fas fa-book"></i>
-                    Add Knowledge
-                </label>
-                <textarea class="rag-textarea" id="knowledgeText" placeholder="Enter text, notes, or educational content to teach the AI..."></textarea>
-            </div>
+            .side-panel.right {
+                right: 0;
+                transform: translateX(100%);
+            }
             
-            <div class="rag-section">
-                <label class="rag-label">
-                    <i class="fas fa-file-upload"></i>
-                    Upload Documents
-                </label>
-                <div class="rag-file-upload" id="fileUploadArea">
-                    <i class="fas fa-cloud-upload-alt" style="font-size: 2em; margin-bottom: 10px; color: #5a6cff;"></i>
-                    <div>Drag & drop files or click to browse</div>
-                    <div style="font-size: 0.8em; margin-top: 5px;">Supports: PDF, TXT, DOCX, MD</div>
-                    <input type="file" id="fileInput" accept=".pdf,.txt,.docx,.md" multiple>
-                </div>
-                <div class="rag-file-info">
-                    Files will be processed for RAG training
-                </div>
-            </div>
+            .side-panel.active {
+                transform: translateX(0);
+            }
             
-            <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>
+            .mobile-nav {
+                display: block;
+            }
             
-            <div class="rag-progress">
-                <div class="rag-progress-bar" id="trainingProgress"></div>
-            </div>
+            .main-content {
+                padding: 80px 20px 20px 20px;
+            }
             
-            <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>
+            #canvasContainer {
+                height: 50vh;
+            }
             
-            <div class="rag-section">
-                <label class="rag-label">
-                    <i class="fas fa-database"></i>
-                    Knowledge Base
-                </label>
-                <div class="rag-knowledge-list" id="knowledgeList">
-                    <!-- Knowledge items will be added here -->
-                    <div class="knowledge-item">
-                        <span>Physics Basics</span>
-                        <i class="fas fa-trash delete-btn"></i>
-                    </div>
-                    <div class="knowledge-item">
-                        <span>Calculus Fundamentals</span>
-                        <i class="fas fa-trash delete-btn"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
+            .chat-interface {
+                margin-top: 20px;
+            }
+            
+            .chat-messages {
+                height: 250px;
+            }
+        }
         
-        <!-- Voice Controls Panel -->
-        <div class="voice-controls">
-            <div class="voice-header">
-                <i class="fas fa-robot"></i>
-                <span>Voice Synthesis</span>
-            </div>
+        @media (max-width: 768px) {
+            #canvasContainer {
+                height: 40vh;
+            }
             
-            <div class="voice-control-group">
-                <label class="voice-label">
-                    <i class="fas fa-user-circle"></i>
-                    Voice Selection
-                </label>
-                <select class="voice-select" id="voiceSelect">
-                    <option value="">Loading voices...</option>
-                </select>
-            </div>
+            .chat-messages {
+                height: 200px;
+            }
             
-            <div class="voice-control-group">
-                <label class="voice-label">
-                    <i class="fas fa-tachometer-alt"></i>
-                    Speech Rate
-                </label>
-                <div class="voice-slider-container">
-                    <input type="range" class="voice-slider" id="rateSlider" min="0.5" max="2" step="0.1" value="1">
-                    <span class="voice-value" id="rateValue">1.0x</span>
-                </div>
-            </div>
+            .side-panel {
+                width: 100%;
+                max-width: 350px;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            #canvasContainer {
+                height: 35vh;
+            }
             
-            <div class="voice-control-group">
-                <label class="voice-label">
-                    <i class="fas fa-wave-square"></i>
-                    Pitch Variation
-                </label>
-                <div class="voice-slider-container">
-                    <input type="range" class="voice-slider" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">
-                    <span class="voice-value" id="pitchValue">1.0</span>
-                </div>
-            </div>
+            .chat-interface {
+                margin-top: 15px;
+            }
+            
+            .chat-messages {
+                height: 180px;
+                padding: 15px;
+            }
             
-            <div class="voice-control-group">
-                <label class="voice-label">
-                    <i class="fas fa-volume-up"></i>
-                    Volume Level
-                </label>
-                <div class="voice-slider-container">
-                    <input type="range" class="voice-slider" id="volumeSlider" min="0.1" max="1" step="0.1" value="0.8">
-                    <span class="voice-value" id="volumeValue">80%</span>
+            .chat-input-container {
+                padding: 15px;
+            }
+            
+            .chat-input, .voice-input-btn, .send-btn {
+                min-height: 48px;
+                height: 48px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Mobile Navigation -->
+    <div class="mobile-nav">
+        <div class="mobile-menu-btn" id="mobileMenuBtn">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    
+    <div class="mobile-panel-overlay" id="mobileOverlay"></div>
+    
+    <!-- Loading Screen -->
+    <div class="loading-screen" id="loadingScreen">
+        <div class="spinner"></div>
+        <div id="loadingText">Initializing AI Interface...</div>
+    </div>
+    
+    <!-- Error Screen -->
+    <div class="error-screen" id="errorScreen">
+        <h2>⚠️ Initialization Failed</h2>
+        <p id="errorMessage">Three.js library failed to load. Please check your internet connection or try again.</p>
+        <button class="retry-btn" id="retryBtn">Retry</button>
+    </div>
+    
+    <!-- Main Container -->
+    <div class="main-container">
+        <!-- Left Side Panel -->
+        <aside class="side-panel left">
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-sliders-h"></i>
+                    <span>Animation Controls</span>
+                </div>
+                
+                <div class="accordion">
+                    <div class="accordion-header" data-target="animationControls">
+                        <span>Particle Settings</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="accordion-content" id="animationControls">
+                        <div class="control-group">
+                            <label>Animation Intensity</label>
+                            <div class="slider-container">
+                                <input type="range" id="intensity" min="0" max="100" value="50">
+                                <span class="value-display" id="intensityValue">50</span>
+                            </div>
+                        </div>
+                        
+                        <div class="control-group">
+                            <label>Particle Count</label>
+                            <div class="slider-container">
+                                <input type="range" id="particleCount" min="100" max="5000" value="2000" step="100">
+                                <span class="value-display" id="particleCountValue">2000</span>
+                            </div>
+                        </div>
+                        
+                        <div class="control-group">
+                            <label>Energy Level</label>
+                            <div class="slider-container">
+                                <input type="range" id="energy" min="0" max="100" value="30">
+                                <span class="value-display" id="energyValue">30</span>
+                            </div>
+                        </div>
+                        
+                        <div class="button-grid">
+                            <button class="preset-btn" data-preset="listening">🎤 Listening</button>
+                            <button class="preset-btn" data-preset="processing">⚡ Processing</button>
+                            <button class="preset-btn" data-preset="responding">💬 Responding</button>
+                            <button class="preset-btn" data-preset="exploring">🔍 Exploring</button>
+                            <button class="preset-btn" data-preset="teaching">📚 Teaching</button>
+                            <button class="preset-btn" data-preset="idle">🌀 Idle</button>
+                        </div>
+                    </div>
                 </div>
             </div>
             
-            <div class="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
-            </button>
-            
-            <div class="voice-status" id="voiceStatus" style="display: none;">
-                <i class="fas fa-comment-dots"></i>
-                <span id="statusMessage">Speaking...</span>
-            </div>
-        </div>
-        
-        <!-- Chat Interface -->
-        <div class="chat-interface">
-            <div class="chat-header">
-                <div class="chat-title">
-                    <i class="fas fa-robot"></i>
-                    AI Tutor Assistant
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-graduation-cap"></i>
+                    <span>AI Training</span>
                 </div>
-                <div class="chat-status">
-                    <span class="status-indicator"></span>
-                    <span id="chatStatusText">Online</span>
+                
+                <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>
+                        
+                        <div class="rag-status" id="ragStatus" style="display: none;">
+                            <i class="fas fa-sync-alt fa-spin"></i>
+                            <span id="ragStatusText">Training in progress...</span>
+                        </div>
+                    </div>
                 </div>
             </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="main-content">
+            <div id="canvasContainer">
+                <canvas id="mainCanvas"></canvas>
+            </div>
             
-            <div class="chat-container">
-                <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 class="chat-interface">
+                <div class="chat-container">
+                    <div class="chat-header">
+                        <div class="chat-title">
+                            <i class="fas fa-robot"></i>
+                            <span>AI Tutor Assistant</span>
+                        </div>
+                        <div class="chat-status">
+                            <span class="status-indicator"></span>
+                            <span id="chatStatusText">Online</span>
                         </div>
-                        <div class="message-time">Just now</div>
                     </div>
                     
-                    <div class="message message-ai">
-                        <div class="message-content">
-                            You can type your questions or click the microphone to speak. I'll respond with explanations, examples, and follow-up questions to enhance your understanding.
+                    <div class="chat-messages" id="chatMessages">
+                        <!-- Messages will be dynamically added here -->
+                        <div class="message message-ai">
+                            <div class="message-content">
+                                Hello! I'm your AI Tutor. I can help explain concepts, answer questions, and guide your learning. How can I assist you today?
+                            </div>
+                            <div class="message-time">Just now</div>
+                        </div>
+                        
+                        <div class="message message-ai">
+                            <div class="message-content">
+                                You can type your questions or click the microphone to speak. I'll respond with explanations, examples, and follow-up questions to enhance your understanding.
+                            </div>
+                            <div class="message-time">Just now</div>
                         </div>
-                        <div class="message-time">Just now</div>
                     </div>
                     
-                    <!-- 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>
+                    <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="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>
+                <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>
                         
-                        <button class="voice-input-btn" id="voiceBtn" title="Start voice input">
-                            <i class="fas fa-microphone"></i>
-                        </button>
+                        <div class="control-group">
+                            <label>Speech Rate</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="rateSlider" min="0.5" max="2" step="0.1" value="1">
+                                <span class="value-display" id="rateValue">1.0x</span>
+                            </div>
+                        </div>
+                        
+                        <div class="control-group">
+                            <label>Pitch Variation</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">
+                                <span class="value-display" id="pitchValue">1.0</span>
+                            </div>
+                        </div>
                         
-                        <button class="send-btn" id="sendBtn" title="Send message">
-                            <i class="fas fa-paper-plane"></i>
+                        <div class="control-group">
+                            <label>Volume Level</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="volumeSlider" min="0.1" max="1" step="0.1" value="0.8">
+                                <span class="value-display" id="volumeValue">80%</span>
+                            </div>
+                        </div>
+                        
+                        <div class="voice-control-buttons">
+                            <button class="voice-btn" id="autoSpeakBtn" data-enabled="true">
+                                <i class="fas fa-bullhorn"></i>
+                                Auto-Speak
+                            </button>
+                            <button class="voice-btn stop" id="stopBtn">
+                                <i class="fas fa-stop"></i>
+                                Stop
+                            </button>
+                        </div>
+                        
+                        <button class="voice-btn" id="previewBtn" style="width: 100%; margin-top: 10px;">
+                            <i class="fas fa-play"></i>
+                            Preview Voice
                         </button>
                     </div>
-                    
-                    <div class="voice-visualizer" id="voiceVisualizer">
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                        <div class="voice-bar"></div>
-                    </div>
                 </div>
             </div>
-        </div>
-        
-        <!-- Existing Control Panel -->
-        <div class="control-panel">
-            <div class="control-title">
-                <span>🧠 AI Tutor Interface</span>
-            </div>
             
-            <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 class="card">
+                <div class="card-title">
+                    <i class="fas fa-plug"></i>
+                    <span>LLM Integration</span>
                 </div>
-            </div>
-            
-            <div class="control-group">
-                <label>Particle Count</label>
-                <div class="slider-container">
-                    <input type="range" id="particleCount" min="100" max="5000" value="2000" step="100">
-                    <span class="value-display" id="particleCountValue">2000</span>
+                
+                <div 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>API Endpoint</label>
+                            <input type="text" class="rag-textarea" id="apiEndpoint" placeholder="https://api.example.com/chat" value="https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1">
+                        </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="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>
+                    </div>
                 </div>
             </div>
+        </aside>
+    </div>
+
+    <!-- External LLM API Integration Script -->
+    <script type="module" id="llm-integration">
+        // This script can be loaded separately for LLM API integration
+        class LLMIntegration {
+            constructor() {
+                this.apiEndpoint = '';
+                this.apiKey = '';
+                this.isConnected = false;
+            }
             
-            <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>
+            async initialize() {
+                // Load saved settings
+                this.loadSettings();
+                
+                // Test connection if settings exist
+                if (this.apiEndpoint && this.apiKey) {
+                    await this.testConnection();
+                }
+            }
             
-            <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>
-        
-        <!-- Existing Loading Screen -->
-        <div class="loading-screen" id="loadingScreen">
-            <div class="spinner"></div>
-            <div id="loadingText">Initializing AI Interface...</div>
-        </div>
+            loadSettings() {
+                const endpoint = localStorage.getItem('aiTutorApiEndpoint');
+                const key = localStorage.getItem('aiTutorApiKey');
+                
+                if (endpoint) {
+                    this.apiEndpoint = endpoint;
+                    document.getElementById('apiEndpoint').value = endpoint;
+                }
+                
+                if (key) {
+                    this.apiKey = key;
+                    document.getElementById('apiKey').value = key;
+                }
+            }
+            
+            saveSettings() {
+                const endpoint = document.getElementById('apiEndpoint').value.trim();
+                const key = document.getElementById('apiKey').value.trim();
+                
+                if (endpoint) {
+                    this.apiEndpoint = endpoint;
+                    localStorage.setItem('aiTutorApiEndpoint', endpoint);
+                }
+                
+                if (key) {
+                    this.apiKey = key;
+                    localStorage.setItem('aiTutorApiKey', key);
+                }
+                
+                return { endpoint, key };
+            }
+            
+            async testConnection() {
+                if (!this.apiEndpoint || !this.apiKey) {
+                    return false;
+                }
+                
+                try {
+                    const response = await fetch(this.apiEndpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Authorization': `Bearer ${this.apiKey}`,
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            inputs: 'Test connection',
+                            parameters: {
+                                max_new_tokens: 10
+                            }
+                        })
+                    });
+                    
+                    this.isConnected = response.ok;
+                    return response.ok;
+                } catch (error) {
+                    console.error('API Connection failed:', error);
+                    this.isConnected = false;
+                    return false;
+                }
+            }
+            
+            async generateResponse(prompt, context = '') {
+                if (!this.isConnected || !this.apiEndpoint || !this.apiKey) {
+                    return null;
+                }
+                
+                try {
+                    const fullPrompt = context ? `${context}\n\nQuestion: ${prompt}` : prompt;
+                    
+                    const response = await fetch(this.apiEndpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Authorization': `Bearer ${this.apiKey}`,
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            inputs: fullPrompt,
+                            parameters: {
+                                max_new_tokens: 500,
+                                temperature: 0.7,
+                                top_p: 0.9,
+                                repetition_penalty: 1.1
+                            }
+                        })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`API Error: ${response.status}`);
+                    }
+                    
+                    const data = await response.json();
+                    return data[0]?.generated_text || data.generated_text || '';
+                } catch (error) {
+                    console.error('LLM Generation failed:', error);
+                    return null;
+                }
+            }
+        }
         
-        <!-- Existing 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>
-    </div>
+        // Export for use in main application
+        window.LLMIntegration = LLMIntegration;
+    </script>
 
     <script>
         // Check if Three.js loaded properly
@@ -1249,10 +1247,101 @@
         }
 
         function updateStatus(text) {
-            document.getElementById('statusText').textContent = text;
             document.getElementById('loadingText').textContent = text;
         }
 
+        // 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());
+                
+                // Close menu on escape key
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.closeMenu();
+                    }
+                });
+            }
+            
+            toggleMenu() {
+                if (!this.isOpen) {
+                    this.openMenu('left');
+                } else {
+                    this.closeMenu();
+                }
+            }
+            
+            openMenu(panel) {
+                this.isOpen = true;
+                this.currentPanel = panel;
+                this.menuBtn.classList.add('active');
+                
+                if (panel === 'left') {
+                    this.leftPanel.classList.add('active');
+                } else if (panel === 'right') {
+                    this.rightPanel.classList.add('active');
+                }
+                
+                this.overlay.style.display = 'block';
+                setTimeout(() => {
+                    this.overlay.style.opacity = '1';
+                }, 10);
+            }
+            
+            closeMenu() {
+                this.isOpen = false;
+                this.menuBtn.classList.remove('active');
+                this.leftPanel.classList.remove('active');
+                this.rightPanel.classList.remove('active');
+                
+                this.overlay.style.opacity = '0';
+                setTimeout(() => {
+                    this.overlay.style.display = 'none';
+                }, 300);
+            }
+        }
+
+        // Accordion Functionality
+        class Accordion {
+            constructor() {
+                this.accordions = document.querySelectorAll('.accordion-header');
+                this.init();
+            }
+            
+            init() {
+                this.accordions.forEach(accordion => {
+                    accordion.addEventListener('click', () => {
+                        const targetId = accordion.getAttribute('data-target');
+                        const content = document.getElementById(targetId);
+                        const icon = accordion.querySelector('i');
+                        
+                        accordion.classList.toggle('active');
+                        content.classList.toggle('active');
+                        
+                        if (accordion.classList.contains('active')) {
+                            icon.classList.remove('fa-chevron-down');
+                            icon.classList.add('fa-chevron-up');
+                        } else {
+                            icon.classList.remove('fa-chevron-up');
+                            icon.classList.add('fa-chevron-down');
+                        }
+                    });
+                });
+            }
+        }
+
         // RAG AI Tutor System
         class RAGAITutor {
             constructor() {
@@ -1285,8 +1374,6 @@
                     type: "text",
                     timestamp: new Date().toISOString()
                 });
-                
-                this.updateKnowledgeList();
             }
             
             setupEventListeners() {
@@ -1299,48 +1386,6 @@
                 document.getElementById('trainBtn').addEventListener('click', () => {
                     this.trainRAGModel();
                 });
-                
-                // File upload
-                const fileInput = document.getElementById('fileInput');
-                const uploadArea = document.getElementById('fileUploadArea');
-                
-                uploadArea.addEventListener('click', () => {
-                    fileInput.click();
-                });
-                
-                uploadArea.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    uploadArea.style.borderColor = '#5a6cff';
-                    uploadArea.style.background = 'rgba(90, 108, 255, 0.1)';
-                });
-                
-                uploadArea.addEventListener('dragleave', () => {
-                    uploadArea.style.borderColor = 'rgba(90, 108, 255, 0.3)';
-                    uploadArea.style.background = 'transparent';
-                });
-                
-                uploadArea.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    uploadArea.style.borderColor = 'rgba(90, 108, 255, 0.3)';
-                    uploadArea.style.background = 'transparent';
-                    
-                    const files = e.dataTransfer.files;
-                    this.processUploadedFiles(files);
-                });
-                
-                fileInput.addEventListener('change', (e) => {
-                    const files = e.target.files;
-                    this.processUploadedFiles(files);
-                });
-                
-                // Knowledge list deletion
-                document.getElementById('knowledgeList').addEventListener('click', (e) => {
-                    if (e.target.classList.contains('delete-btn')) {
-                        const item = e.target.closest('.knowledge-item');
-                        const title = item.querySelector('span').textContent;
-                        this.removeKnowledgeItem(title);
-                    }
-                });
             }
             
             addKnowledgeFromText() {
@@ -1369,71 +1414,6 @@
             
             addKnowledgeItem(item) {
                 this.knowledgeBase.push(item);
-                this.updateKnowledgeList();
-            }
-            
-            removeKnowledgeItem(title) {
-                this.knowledgeBase = this.knowledgeBase.filter(item => item.title !== title);
-                this.updateKnowledgeList();
-                this.showRAGStatus('Knowledge removed', 'info');
-            }
-            
-            updateKnowledgeList() {
-                const list = document.getElementById('knowledgeList');
-                list.innerHTML = '';
-                
-                this.knowledgeBase.forEach(item => {
-                    const div = document.createElement('div');
-                    div.className = 'knowledge-item';
-                    div.innerHTML = `
-                        <span>${item.title}</span>
-                        <i class="fas fa-trash delete-btn"></i>
-                    `;
-                    list.appendChild(div);
-                });
-            }
-            
-            async processUploadedFiles(files) {
-                if (!files.length) return;
-                
-                this.showRAGStatus(`Processing ${files.length} file(s)...`, 'processing');
-                
-                for (let file of files) {
-                    await this.processFile(file);
-                }
-                
-                this.showRAGStatus('Files processed successfully!', 'success');
-                this.updateKnowledgeList();
-            }
-            
-            async processFile(file) {
-                return new Promise((resolve) => {
-                    const reader = new FileReader();
-                    
-                    reader.onload = async (e) => {
-                        const content = e.target.result;
-                        const fileName = file.name.replace(/\.[^/.]+$/, ""); // Remove extension
-                        
-                        const knowledgeItem = {
-                            id: Date.now(),
-                            title: `${fileName} (${file.type})`,
-                            content: content.substring(0, 5000), // Limit content
-                            type: file.type,
-                            filename: file.name,
-                            timestamp: new Date().toISOString()
-                        };
-                        
-                        this.addKnowledgeItem(knowledgeItem);
-                        resolve();
-                    };
-                    
-                    reader.onerror = () => {
-                        this.showRAGStatus(`Error reading file: ${file.name}`, 'error');
-                        resolve();
-                    };
-                    
-                    reader.readAsText(file);
-                });
             }
             
             async trainRAGModel() {
@@ -1460,17 +1440,11 @@
                     await this.sleep(1000);
                 }
                 
-                // In a real implementation, this would:
-                // 1. Chunk the knowledge base
-                // 2. Create embeddings using Hugging Face models
-                // 3. Store in a vector database
-                // 4. Set up retrieval mechanisms
-                
-                // For demonstration, we'll simulate successful training
+                // For demonstration, simulate successful training
                 this.vectorStore = {
                     size: this.knowledgeBase.length,
                     trainedAt: new Date().toISOString(),
-                    model: 'all-MiniLM-L6-v2' // Example embedding model
+                    model: 'all-MiniLM-L6-v2'
                 };
                 
                 this.isTraining = false;
@@ -1488,13 +1462,6 @@
                 }
                 
                 // Simulate RAG retrieval
-                // In a real implementation, this would:
-                // 1. Embed the query
-                // 2. Search vector store for similar chunks
-                // 3. Retrieve top-k relevant documents
-                // 4. Generate answer using LLM with retrieved context
-                
-                // For demonstration, find relevant knowledge
                 const relevantKnowledge = this.findRelevantKnowledge(query);
                 
                 if (relevantKnowledge.length === 0) {
@@ -1514,7 +1481,6 @@
                         item.title.toLowerCase().includes(queryLower)) {
                         relevant.push(item);
                         
-                        // Limit to 3 most relevant items
                         if (relevant.length >= 3) break;
                     }
                 }
@@ -1524,9 +1490,6 @@
             
             generateResponse(query, relevantKnowledge) {
                 const context = relevantKnowledge.map(item => item.content).join('\n\n');
-                
-                // Simulate LLM generation with context
-                // In real implementation, use Hugging Face Inference API or similar
                 return `Based on my knowledge base:\n\n${context}\n\nRegarding your question "${query}", here's what I can explain...`;
             }
             
@@ -1536,7 +1499,6 @@
                 
                 statusText.textContent = message;
                 
-                // Set color based on type
                 const colors = {
                     'info': '#5a6cff',
                     'success': '#00ff9d',
@@ -1551,7 +1513,6 @@
                 
                 statusEl.style.display = 'flex';
                 
-                // Auto-hide after 5 seconds unless it's a processing message
                 if (type !== 'processing') {
                     setTimeout(() => {
                         statusEl.style.display = 'none';
@@ -1564,7 +1525,7 @@
             }
         }
 
-        // Advanced Voice Synthesis System
+        // Voice Synthesis System
         class VoiceSynthesis {
             constructor() {
                 this.synth = window.speechSynthesis;
@@ -1580,7 +1541,6 @@
                     volume: 0.8
                 };
                 
-                // Hardcoded longer, simpler test script for voice testing
                 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. Imagine you're walking through a beautiful forest on a sunny day. The light filters through the leaves, creating patterns on the ground. Birds are singing in the trees, and there's a gentle breeze carrying the scent of flowers. You come across a small stream, and you sit on a rock to listen to the water flowing. It's in moments like these that we often have our best ideas and clearest thoughts. Learning is like this forest walk - it's a journey of discovery where each step reveals something new and wonderful. The key is to stay curious, keep exploring, and enjoy the process. Now, how does my voice sound to you? Is it clear, natural, and pleasant to listen to?";
                 
                 this.initVoices();
@@ -1588,12 +1548,9 @@
             }
             
             initVoices() {
-                // Wait for voices to be loaded
                 const loadVoices = () => {
                     this.voices = this.synth.getVoices();
                     this.populateVoiceList();
-                    
-                    // Select a high-quality natural-sounding English voice
                     this.selectBestVoice();
                 };
                 
@@ -1601,14 +1558,12 @@
                     this.synth.onvoiceschanged = loadVoices;
                 }
                 
-                // Load immediately if voices are already available
                 if (this.synth.getVoices().length > 0) {
                     loadVoices();
                 }
             }
             
             selectBestVoice() {
-                // Filter for English voices only
                 const englishVoices = this.voices.filter(voice => 
                     voice.lang.startsWith('en-')
                 );
@@ -1618,38 +1573,28 @@
                     return;
                 }
                 
-                // Prioritize natural-sounding voices (Google, Microsoft, Apple premium voices)
                 const preferredVoices = [
                     'Google UK English Male',
                     'Google US English',
-                    'Microsoft David - English (United States)',
-                    'Microsoft Zira - English (United States)',
+                    'Microsoft David',
+                    'Microsoft Zira',
                     'Alex',
                     'Samantha',
-                    'Daniel',
-                    'Karen',
-                    'Moira',
-                    'Tessa',
-                    'Fred',
-                    'Victoria'
+                    'Daniel'
                 ];
                 
-                // Try to find a preferred voice
                 for (const voiceName of preferredVoices) {
                     const voice = englishVoices.find(v => v.name.includes(voiceName));
                     if (voice) {
                         this.currentVoice = voice;
                         this.updateVoiceSelect(voice);
-                        this.showStatus(`Selected: ${voice.name}`, 3000);
                         break;
                     }
                 }
                 
-                // Fallback to first English voice
                 if (!this.currentVoice && englishVoices.length > 0) {
                     this.currentVoice = englishVoices[0];
                     this.updateVoiceSelect(englishVoices[0]);
-                    this.showStatus(`Selected: ${englishVoices[0].name}`, 3000);
                 }
             }
             
@@ -1657,7 +1602,6 @@
                 const voiceSelect = document.getElementById('voiceSelect');
                 voiceSelect.innerHTML = '';
                 
-                // Filter for English voices only
                 const englishVoices = this.voices.filter(voice => 
                     voice.lang.startsWith('en-')
                 );
@@ -1670,43 +1614,15 @@
                     return;
                 }
                 
-                // Sort English voices by dialect preference
-                const sortedVoices = englishVoices.sort((a, b) => {
-                    const langOrder = ['en-US', 'en-GB', 'en-AU', 'en-CA', 'en-IN'];
-                    const indexA = langOrder.indexOf(a.lang);
-                    const indexB = langOrder.indexOf(b.lang);
-                    
-                    if (indexA !== -1 && indexB !== -1) return indexA - indexB;
-                    if (indexA !== -1) return -1;
-                    if (indexB !== -1) return 1;
-                    return a.name.localeCompare(b.name);
-                });
-                
-                // Add voices to select
-                sortedVoices.forEach(voice => {
+                englishVoices.forEach(voice => {
                     const option = document.createElement('option');
                     option.value = voice.name;
-                    option.textContent = `${voice.name} (${this.getDialectName(voice.lang)})`;
+                    option.textContent = `${voice.name} (${voice.lang})`;
                     option.dataset.lang = voice.lang;
                     voiceSelect.appendChild(option);
                 });
             }
             
-            getDialectName(langCode) {
-                const dialects = {
-                    'en-US': 'US English',
-                    'en-GB': 'UK English',
-                    'en-AU': 'Australian English',
-                    'en-CA': 'Canadian English',
-                    'en-IN': 'Indian English',
-                    'en-IE': 'Irish English',
-                    'en-ZA': 'South African English',
-                    'en-NZ': 'New Zealand English'
-                };
-                
-                return dialects[langCode] || langCode;
-            }
-            
             updateVoiceSelect(voice) {
                 const voiceSelect = document.getElementById('voiceSelect');
                 const options = voiceSelect.querySelectorAll('option');
@@ -1719,37 +1635,31 @@
             }
             
             setupEventListeners() {
-                // Voice selection
                 document.getElementById('voiceSelect').addEventListener('change', (e) => {
                     const selectedVoice = this.voices.find(v => v.name === e.target.value);
                     if (selectedVoice) {
                         this.currentVoice = selectedVoice;
-                        this.showStatus(`Voice changed to: ${selectedVoice.name}`, 2000);
                     }
                 });
                 
-                // Rate slider
                 document.getElementById('rateSlider').addEventListener('input', (e) => {
                     const value = parseFloat(e.target.value);
                     this.settings.rate = value;
                     document.getElementById('rateValue').textContent = value.toFixed(1) + 'x';
                 });
                 
-                // Pitch slider
                 document.getElementById('pitchSlider').addEventListener('input', (e) => {
                     const value = parseFloat(e.target.value);
                     this.settings.pitch = value;
                     document.getElementById('pitchValue').textContent = value.toFixed(1);
                 });
                 
-                // Volume slider
                 document.getElementById('volumeSlider').addEventListener('input', (e) => {
                     const value = parseFloat(e.target.value);
                     this.settings.volume = value;
                     document.getElementById('volumeValue').textContent = Math.round(value * 100) + '%';
                 });
                 
-                // Auto-speak toggle
                 document.getElementById('autoSpeakBtn').addEventListener('click', (e) => {
                     this.isAutoSpeak = !this.isAutoSpeak;
                     const btn = e.target.closest('.voice-btn');
@@ -1759,45 +1669,15 @@
                         : '<i class="fas fa-volume-mute"></i> Auto-Speak';
                     
                     btn.classList.toggle('active', this.isAutoSpeak);
-                    
-                    // Show status message
-                    this.showStatus(this.isAutoSpeak ? 'Auto-speak enabled' : 'Auto-speak disabled', 2000);
                 });
                 
-                // Stop button
                 document.getElementById('stopBtn').addEventListener('click', () => {
                     this.stopSpeaking();
                 });
                 
-                // Preview button - uses the hardcoded test script
                 document.getElementById('previewBtn').addEventListener('click', () => {
                     this.previewCurrentVoice();
                 });
-                
-                // Update status displays when speaking
-                this.synth.onstart = () => {
-                    this.isSpeaking = true;
-                    document.getElementById('stopBtn').classList.add('active');
-                    this.showStatus('Speaking...');
-                    
-                    // Update 3D visualization
-                    if (window.visualization) {
-                        window.visualization.setPreset('teaching');
-                    }
-                };
-                
-                this.synth.onend = () => {
-                    this.isSpeaking = false;
-                    document.getElementById('stopBtn').classList.remove('active');
-                    this.hideStatus();
-                    
-                    // Update 3D visualization
-                    if (window.visualization) {
-                        setTimeout(() => {
-                            window.visualization.setPreset('idle');
-                        }, 1000);
-                    }
-                };
             }
             
             speak(text) {
@@ -1815,13 +1695,10 @@
                 utterance.pitch = this.settings.pitch;
                 utterance.volume = this.settings.volume;
                 
-                // Add natural pauses for better cadence
                 utterance.text = this.addNaturalPauses(text);
                 
-                // Event listeners for this utterance
                 utterance.onerror = (event) => {
                     console.error('Speech synthesis error:', event);
-                    this.hideStatus();
                 };
                 
                 this.currentUtterance = utterance;
@@ -1829,7 +1706,6 @@
             }
             
             addNaturalPauses(text) {
-                // Add slight pauses for commas and periods for more natural speech
                 return text
                     .replace(/,/g, ',<break time="200ms"/>')
                     .replace(/\./g, '.<break time="300ms"/>')
@@ -1842,44 +1718,15 @@
                     this.synth.cancel();
                     this.isSpeaking = false;
                     this.currentUtterance = null;
-                    document.getElementById('stopBtn').classList.remove('active');
-                    this.hideStatus();
                 }
             }
             
             previewCurrentVoice() {
-                // Always use the hardcoded test script for voice testing
                 this.speak(this.testScript);
-                this.showStatus('Testing voice with story script...', 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';
-            }
-            
-            updateSettingsFromUI() {
-                this.settings.rate = parseFloat(document.getElementById('rateSlider').value);
-                this.settings.pitch = parseFloat(document.getElementById('pitchSlider').value);
-                this.settings.volume = parseFloat(document.getElementById('volumeSlider').value);
             }
         }
 
-        // Chat Interface Functionality
+        // Chat Interface
         class ChatInterface {
             constructor(ragTutor) {
                 this.ragTutor = ragTutor;
@@ -1893,8 +1740,6 @@
                 this.chatMessages = document.getElementById('chatMessages');
                 this.voiceBtn = document.getElementById('voiceBtn');
                 this.sendBtn = document.getElementById('sendBtn');
-                this.voiceVisualizer = document.getElementById('voiceVisualizer');
-                this.typingIndicator = document.getElementById('typingIndicator');
                 this.chatStatusText = document.getElementById('chatStatusText');
                 
                 this.setupEventListeners();
@@ -1902,10 +1747,8 @@
             }
             
             setupEventListeners() {
-                // Send button click
                 this.sendBtn.addEventListener('click', () => this.sendMessage());
                 
-                // Enter key to send (Shift+Enter for new line)
                 this.chatInput.addEventListener('keydown', (e) => {
                     if (e.key === 'Enter' && !e.shiftKey) {
                         e.preventDefault();
@@ -1913,10 +1756,7 @@
                     }
                 });
                 
-                // Voice button click
                 this.voiceBtn.addEventListener('click', () => this.toggleVoiceInput());
-                
-                // Auto-resize textarea
                 this.chatInput.addEventListener('input', () => this.autoResizeTextarea());
             }
             
@@ -1931,66 +1771,31 @@
                 this.isListening = !this.isListening;
                 
                 if (this.isListening) {
-                    // Start "listening" state
                     this.voiceBtn.classList.add('listening');
                     this.voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
-                    this.voiceVisualizer.classList.add('active');
                     this.chatStatusText.textContent = 'Listening...';
-                    this.startVoiceAnimation();
                     
-                    // Update 3D visualization to listening mode
                     if (window.visualization) {
                         window.visualization.setPreset('listening');
                     }
                     
-                    // Simulate voice input (in a real app, this would capture actual audio)
                     setTimeout(() => {
                         this.simulateVoiceInput();
                     }, 1500);
                 } else {
-                    // Stop "listening" state
                     this.voiceBtn.classList.remove('listening');
                     this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                    this.voiceVisualizer.classList.remove('active');
                     this.chatStatusText.textContent = 'Online';
-                    this.stopVoiceAnimation();
                     
-                    // Update 3D visualization to processing mode
                     if (window.visualization) {
                         window.visualization.setPreset('processing');
                     }
                 }
             }
             
-            startVoiceAnimation() {
-                const bars = this.voiceVisualizer.querySelectorAll('.voice-bar');
-                bars.forEach(bar => bar.classList.add('listening'));
-                
-                this.voiceAnimationInterval = setInterval(() => {
-                    bars.forEach(bar => {
-                        const randomHeight = 10 + Math.random() * 30;
-                        bar.style.height = `${randomHeight}px`;
-                    });
-                }, 100);
-            }
-            
-            stopVoiceAnimation() {
-                if (this.voiceAnimationInterval) {
-                    clearInterval(this.voiceAnimationInterval);
-                    this.voiceAnimationInterval = null;
-                    
-                    const bars = this.voiceVisualizer.querySelectorAll('.voice-bar');
-                    bars.forEach(bar => {
-                        bar.classList.remove('listening');
-                        bar.style.height = '10px';
-                    });
-                }
-            }
-            
             simulateVoiceInput() {
                 if (!this.isListening) return;
                 
-                // Simulate capturing voice input
                 const simulatedQuestions = [
                     "Can you explain quantum computing?",
                     "How do neural networks learn?",
@@ -2001,19 +1806,13 @@
                 
                 const randomQuestion = simulatedQuestions[Math.floor(Math.random() * simulatedQuestions.length)];
                 
-                // Add user message
                 this.addMessage(randomQuestion, 'user');
-                
-                // Process and respond
                 this.processAIResponse(randomQuestion);
                 
-                // Stop listening after receiving input
                 setTimeout(() => {
                     this.isListening = false;
                     this.voiceBtn.classList.remove('listening');
                     this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                    this.voiceVisualizer.classList.remove('active');
-                    this.stopVoiceAnimation();
                     this.chatStatusText.textContent = 'Online';
                 }, 500);
             }
@@ -2022,14 +1821,9 @@
                 const message = this.chatInput.value.trim();
                 if (message === '') return;
                 
-                // Add user message
                 this.addMessage(message, 'user');
-                
-                // Clear input
                 this.chatInput.value = '';
                 this.autoResizeTextarea();
-                
-                // Process and respond
                 await this.processAIResponse(message);
             }
             
@@ -2045,15 +1839,10 @@
                 `;
                 
                 this.chatMessages.appendChild(messageDiv);
-                
-                // Scroll to bottom
                 this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
                 
-                // Update 3D visualization
-                if (window.visualization) {
-                    if (sender === 'user') {
-                        window.visualization.setPreset('processing');
-                    }
+                if (window.visualization && sender === 'user') {
+                    window.visualization.setPreset('processing');
                 }
             }
             
@@ -2064,21 +1853,9 @@
             }
             
             async processAIResponse(userMessage) {
-                // Show typing indicator
-                this.showTypingIndicator();
-                
-                // Update 3D visualization
-                if (window.visualization) {
-                    window.visualization.setPreset('processing');
-                }
-                
-                // Simulate AI processing time
                 const processingTime = 1000 + Math.random() * 2000;
                 
                 setTimeout(async () => {
-                    this.hideTypingIndicator();
-                    
-                    // Generate AI response using RAG if available
                     let response;
                     if (this.ragTutor && this.ragTutor.vectorStore) {
                         response = await this.ragTutor.queryKnowledge(userMessage);
@@ -2086,47 +1863,31 @@
                         response = this.generateAIResponse(userMessage);
                     }
                     
-                    // Add AI response
                     this.addMessage(response, 'ai');
                     
-                    // Speak the response if voice synthesis is available
                     if (window.voiceSynthesis) {
                         setTimeout(() => {
                             window.voiceSynthesis.speak(response);
                         }, 300);
                     }
                     
-                    // Update 3D visualization
                     if (window.visualization) {
                         window.visualization.setPreset('responding');
-                    }
-                    
-                    // Return to idle after a delay
-                    setTimeout(() => {
-                        if (window.visualization) {
+                        
+                        setTimeout(() => {
                             window.visualization.setPreset('idle');
-                        }
-                    }, 3000);
+                        }, 3000);
+                    }
                 }, processingTime);
             }
             
-            showTypingIndicator() {
-                this.typingIndicator.style.display = 'flex';
-                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
-            }
-            
-            hideTypingIndicator() {
-                this.typingIndicator.style.display = 'none';
-            }
-            
             generateAIResponse(userMessage) {
-                // Simple AI response generator (fallback when RAG is not trained)
                 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. Key concepts include superposition, entanglement, and quantum interference.",
-                    neural: "Neural networks learn through backpropagation and gradient descent. They adjust weights based on prediction errors, minimizing loss functions. Deep learning uses multiple layers to extract hierarchical features from data.",
-                    blockchain: "Blockchain is a decentralized, distributed ledger technology. Each block contains cryptographic hashes linking to previous blocks, ensuring immutability. Smart contracts enable self-executing agreements on blockchain networks.",
-                    calculus: "Derivatives measure instantaneous rate of change. The derivative of f(x) at point a is the slope of the tangent line. Differentiation rules include power, product, quotient, and chain rules for various functions.",
-                    default: "I understand you're asking about " + userMessage.substring(0, 30) + "... This is a complex topic that requires careful explanation. Could you specify which aspect you'd like me to focus on? I can provide examples, applications, or fundamental principles."
+                    quantum: "Quantum computing leverages quantum mechanics to process information. Unlike classical bits (0 or 1), quantum bits (qubits) can exist in superposition, enabling parallel computation.",
+                    neural: "Neural networks learn through backpropagation and gradient descent. They adjust weights based on prediction errors, minimizing loss functions.",
+                    blockchain: "Blockchain is a decentralized, distributed ledger technology. Each block contains cryptographic hashes linking to previous blocks, ensuring immutability.",
+                    calculus: "Derivatives measure instantaneous rate of change. The derivative of f(x) at point a is the slope of the tangent line.",
+                    default: "I understand you're asking about " + userMessage.substring(0, 30) + "... This is a complex topic that requires careful explanation."
                 };
                 
                 const lowerMessage = userMessage.toLowerCase();
@@ -2140,7 +1901,7 @@
             }
         }
 
-        // Main application
+        // 3D Visualization
         class AITutorVisualization {
             constructor() {
                 if (!checkThreeJS()) return;
@@ -2178,11 +1939,9 @@
             init() {
                 updateStatus('Creating 3D scene...');
                 
-                // Scene
                 this.scene = new THREE.Scene();
                 this.scene.background = new THREE.Color(0x0a0a0f);
                 
-                // Camera
                 this.camera = new THREE.PerspectiveCamera(
                     75, 
                     window.innerWidth / window.innerHeight, 
@@ -2191,7 +1950,6 @@
                 );
                 this.camera.position.z = 5;
                 
-                // Renderer
                 const canvas = document.getElementById('mainCanvas');
                 this.renderer = new THREE.WebGLRenderer({ 
                     canvas: canvas,
@@ -2201,10 +1959,8 @@
                 this.renderer.setSize(window.innerWidth, window.innerHeight);
                 this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 
-                // Add fog
                 this.scene.fog = new THREE.Fog(0x0a0a0f, 10, 25);
                 
-                // Add lights
                 const ambientLight = new THREE.AmbientLight(0x222244, 0.5);
                 this.scene.add(ambientLight);
                 
@@ -2212,24 +1968,18 @@
                 directionalLight.position.set(5, 3, 5);
                 this.scene.add(directionalLight);
                 
-                // Orbit controls
-                updateStatus('Setting up controls...');
                 this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                 this.controls.enableDamping = true;
                 this.controls.dampingFactor = 0.05;
             }
             
             createParticles() {
-                updateStatus('Creating particles...');
-                
                 const geometry = new THREE.BufferGeometry();
                 const positions = new Float32Array(this.params.particleCount * 3);
                 const colors = new Float32Array(this.params.particleCount * 3);
                 
                 for (let i = 0; i < this.params.particleCount; i++) {
                     const i3 = i * 3;
-                    
-                    // Fibonacci sphere distribution
                     const phi = Math.acos(-1 + (2 * i) / this.params.particleCount);
                     const theta = Math.sqrt(this.params.particleCount * Math.PI) * phi;
                     
@@ -2241,10 +1991,9 @@
                     positions[i3 + 1] = y;
                     positions[i3 + 2] = z;
                     
-                    // Color gradient based on position
-                    colors[i3] = 0.5 + x * 0.5;     // Red
-                    colors[i3 + 1] = 0.3 + y * 0.7; // Green
-                    colors[i3 + 2] = 0.8 + z * 0.2; // Blue
+                    colors[i3] = 0.5 + x * 0.5;
+                    colors[i3 + 1] = 0.3 + y * 0.7;
+                    colors[i3 + 2] = 0.8 + z * 0.2;
                 }
                 
                 geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
@@ -2261,7 +2010,6 @@
                 this.particles = new THREE.Points(geometry, material);
                 this.scene.add(this.particles);
                 
-                // Add a test sphere to verify rendering
                 const testGeometry = new THREE.SphereGeometry(0.5, 32, 32);
                 const testMaterial = new THREE.MeshBasicMaterial({ 
                     color: 0x5a6cff,
@@ -2274,7 +2022,6 @@
             }
             
             setupControls() {
-                // Slider controls
                 const intensitySlider = document.getElementById('intensity');
                 const particleCountSlider = document.getElementById('particleCount');
                 const energySlider = document.getElementById('energy');
@@ -2299,7 +2046,6 @@
                     energyValue.textContent = e.target.value;
                 });
                 
-                // Preset buttons
                 document.querySelectorAll('.preset-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const preset = e.target.dataset.preset;
@@ -2307,7 +2053,6 @@
                     });
                 });
                 
-                // Retry button
                 document.getElementById('retryBtn').addEventListener('click', () => {
                     location.reload();
                 });
@@ -2316,26 +2061,11 @@
             setPreset(preset) {
                 this.params.mode = preset;
                 
-                // Update UI to show active 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)';
                 });
-                
-                // Update status
-                const statusMap = {
-                    'listening': '🎤 Listening for input...',
-                    'processing': '⚡ Processing thoughts...',
-                    'responding': '💬 Formulating response...',
-                    'exploring': '🔍 Exploring concepts...',
-                    'teaching': '📚 Teaching mode active',
-                    'idle': '🌀 AI Tutor Idle'
-                };
-                
-                if (statusMap[preset]) {
-                    updateStatus(statusMap[preset]);
-                }
             }
             
             updateParticleCount() {
@@ -2346,7 +2076,6 @@
             }
             
             simulateAudioData() {
-                // Simulate audio data for visualization
                 const time = performance.now() * 0.001;
                 const frequency = 0.5 + this.params.energy * 2;
                 
@@ -2363,7 +2092,6 @@
                 const positions = this.particles.geometry.attributes.position.array;
                 const originalPositions = this.particles.geometry.attributes.originalPosition;
                 
-                // Store original positions if not already stored
                 if (!originalPositions) {
                     const origPos = new Float32Array(positions.length);
                     origPos.set(positions);
@@ -2382,7 +2110,6 @@
                     let radius = 2.0;
                     let intensity = this.params.intensity;
                     
-                    // Apply different behaviors based on mode
                     switch(this.params.mode) {
                         case 'listening':
                             radius += Math.sin(time * 3 + i * 0.01) * 0.5 * intensity;
@@ -2399,14 +2126,12 @@
                         case 'teaching':
                             radius += Math.sin(time * 4 + i * 0.008) * 0.55 * intensity;
                             break;
-                        default: // idle
+                        default:
                             radius += Math.sin(time * 0.5 + i * 0.01) * 0.2 * intensity;
                     }
                     
-                    // Add energy-based pulsation
                     radius += Math.sin(time * 8) * 0.2 * this.params.energy;
                     
-                    // Add audio data influence
                     const audioIndex = Math.floor((i / this.params.particleCount) * this.audioData.length);
                     radius += this.audioData[audioIndex] * 0.5 * intensity;
                     
@@ -2417,7 +2142,6 @@
                 
                 this.particles.geometry.attributes.position.needsUpdate = true;
                 
-                // Rotate particles slowly
                 this.particles.rotation.y = time * 0.1;
                 this.particles.rotation.x = Math.sin(time * 0.05) * 0.1;
             }
@@ -2453,56 +2177,49 @@
             }
         }
         
-        // Initialize when page loads
+        // Initialize everything
         window.addEventListener('load', () => {
             updateStatus('Loading AI Interface...');
             
-            // Wait a moment for libraries to load
             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();
                 
-                // Initialize chat interface with RAG tutor
+                // Initialize chat interface
                 window.chatInterface = new ChatInterface(window.ragTutor);
                 
                 // Initialize voice synthesis
                 if ('speechSynthesis' in window) {
                     window.voiceSynthesis = new VoiceSynthesis();
                     updateStatus('Voice synthesis initialized');
-                } else {
-                    console.warn('Speech synthesis not supported in this browser');
-                    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) {
-                    // Handle window resize
                     window.addEventListener('resize', () => window.visualization.onWindowResize());
                     
-                    // Handle key controls
                     window.addEventListener('keydown', (e) => {
                         if (e.code === 'Space') {
                             window.visualization.setPreset(
                                 window.visualization.params.mode === 'idle' ? 'listening' : 'idle'
                             );
                         }
-                        // Ctrl+Space to stop speech
                         if (e.code === 'Space' && e.ctrlKey && window.voiceSynthesis) {
                             window.voiceSynthesis.stopSpeaking();
                         }
                     });
                     
-                    // Set initial preset
                     window.visualization.setPreset('idle');
                 }
             }, 100);
         });
         
-        // Handle page unload
         window.addEventListener('beforeunload', () => {
             if (window.visualization) {
                 window.visualization.destroy();