Update index.html

index.html

@@ -146,25 +146,50 @@
             transform: rotate(90deg);
         }
         
-        /* Chat Interface - Centered on Page */
+        /* Chat Interface - Horizontal and Centered */
         .chat-overlay {
             position: absolute;
-            top: 50%;
+            bottom: 30px;
             left: 50%;
-            transform: translate(-50%, -50%);
-            width: 500px;
-            max-width: 90vw;
+            transform: translateX(-50%);
+            width: 800px;
+            max-width: 85vw;
             background: rgba(20, 20, 30, 0.85);
             backdrop-filter: blur(20px);
             border-radius: 20px;
             border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
             z-index: 100;
             display: flex;
             flex-direction: column;
             overflow: hidden;
             opacity: 0;
             animation: fadeIn 0.5s ease 1s forwards;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .chat-overlay.collapsed {
+            width: 400px;
+            height: 70px;
+            bottom: 20px;
+        }
+        
+        .chat-overlay.collapsed .chat-header {
+            border-radius: 15px;
+            padding: 15px;
+        }
+        
+        .chat-overlay.collapsed .chat-messages,
+        .chat-overlay.collapsed .chat-input-container {
+            display: none;
+        }
+        
+        .chat-overlay.collapsed .chat-header {
+            cursor: pointer;
+        }
+        
+        .chat-overlay.collapsed .chat-header:hover {
+            background: rgba(35, 35, 50, 0.9);
         }
         
         @keyframes fadeIn {
@@ -174,103 +199,152 @@
         }
         
         .chat-header {
-            padding: 25px;
+            padding: 20px;
             background: rgba(25, 25, 40, 0.9);
             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: all 0.3s ease;
         }
         
         .chat-title {
             display: flex;
             align-items: center;
             gap: 15px;
-            margin-bottom: 10px;
         }
         
         .chat-title h2 {
             color: #a0b0ff;
             font-weight: 400;
-            font-size: 1.5em;
+            font-size: 1.3em;
         }
         
         .ai-avatar {
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
             background: linear-gradient(135deg, #5a6cff, #00ff9d);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.5em;
+            font-size: 1.3em;
         }
         
         .chat-subtitle {
             color: #8892b0;
-            font-size: 0.9em;
+            font-size: 0.85em;
             line-height: 1.5;
         }
         
+        .chat-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        
+        .collapse-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.07);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #a0b0ff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        
+        .collapse-btn:hover {
+            background: rgba(90, 108, 255, 0.2);
+            transform: translateY(-2px);
+        }
+        
         .chat-messages {
-            flex: 1;
-            padding: 25px;
-            overflow-y: auto;
-            max-height: 400px;
             display: flex;
-            flex-direction: column;
-            gap: 20px;
+            flex-direction: row;
+            gap: 15px;
+            padding: 20px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            height: 160px;
+            scrollbar-width: thin;
+            scrollbar-color: #5a6cff rgba(255, 255, 255, 0.05);
+            white-space: nowrap;
+        }
+        
+        .chat-messages::-webkit-scrollbar {
+            height: 6px;
+        }
+        
+        .chat-messages::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+        
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: #5a6cff;
+            border-radius: 3px;
         }
         
         .message {
-            max-width: 85%;
-            padding: 18px;
-            border-radius: 18px;
-            line-height: 1.5;
+            min-width: 280px;
+            max-width: 350px;
+            padding: 15px;
+            border-radius: 15px;
+            line-height: 1.4;
             position: relative;
             animation: messageAppear 0.3s ease;
+            white-space: normal;
+            word-wrap: break-word;
+            display: inline-block;
+            vertical-align: top;
+            margin-right: 15px;
         }
         
         @keyframes messageAppear {
             from {
                 opacity: 0;
-                transform: translateY(10px);
+                transform: translateX(-20px);
             }
             to {
                 opacity: 1;
-                transform: translateY(0);
+                transform: translateX(0);
             }
         }
         
         .message-user {
-            align-self: flex-end;
             background: linear-gradient(135deg, #5a6cff, #7a8aff);
             color: white;
-            border-bottom-right-radius: 5px;
         }
         
         .message-ai {
-            align-self: flex-start;
             background: rgba(255, 255, 255, 0.08);
             color: #e0e0ff;
-            border-bottom-left-radius: 5px;
             border: 1px solid rgba(255, 255, 255, 0.05);
         }
         
+        .message-content {
+            font-size: 0.95em;
+            margin-bottom: 8px;
+        }
+        
         .message-time {
-            font-size: 0.75em;
+            font-size: 0.7em;
             opacity: 0.7;
-            margin-top: 8px;
             text-align: right;
         }
         
         .message-typing {
-            display: flex;
-            align-items: center;
-            gap: 5px;
+            min-width: 280px;
             padding: 15px;
             background: rgba(255, 255, 255, 0.05);
-            border-radius: 18px;
-            border-bottom-left-radius: 5px;
-            align-self: flex-start;
-            width: 120px;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         
         .typing-dot {
@@ -290,7 +364,7 @@
         }
         
         .chat-input-container {
-            padding: 25px;
+            padding: 20px;
             background: rgba(15, 15, 25, 0.9);
             border-top: 1px solid rgba(255, 255, 255, 0.05);
         }
@@ -305,14 +379,14 @@
             flex: 1;
             background: rgba(255, 255, 255, 0.07);
             border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
-            padding: 18px 20px;
+            border-radius: 12px;
+            padding: 15px 18px;
             color: white;
             font-family: 'Segoe UI', system-ui, sans-serif;
-            font-size: 1em;
+            font-size: 0.95em;
             resize: none;
-            min-height: 56px;
-            max-height: 120px;
+            min-height: 50px;
+            max-height: 100px;
             transition: all 0.3s ease;
         }
         
@@ -329,15 +403,14 @@
         
         .input-buttons {
             display: flex;
-            flex-direction: column;
             gap: 8px;
         }
         
         .voice-input-btn,
         .send-btn {
-            width: 56px;
-            height: 56px;
-            border-radius: 15px;
+            width: 50px;
+            height: 50px;
+            border-radius: 12px;
             background: linear-gradient(135deg, #5a6cff, #7a8aff);
             border: none;
             color: white;
@@ -346,7 +419,7 @@
             align-items: center;
             justify-content: center;
             transition: all 0.3s ease;
-            font-size: 1.2em;
+            font-size: 1.1em;
         }
         
         .voice-input-btn:hover,
@@ -674,7 +747,11 @@
         /* Responsive Design */
         @media (max-width: 1200px) {
             .chat-overlay {
-                width: 450px;
+                width: 700px;
+            }
+            
+            .chat-overlay.collapsed {
+                width: 350px;
             }
         }
         
@@ -707,13 +784,27 @@
             
             .chat-overlay {
                 width: 95%;
-                top: 40%;
+                max-width: 95vw;
+            }
+            
+            .chat-overlay.collapsed {
+                width: 300px;
+            }
+            
+            .chat-messages {
+                height: 140px;
+            }
+            
+            .message {
+                min-width: 250px;
+                max-width: 300px;
             }
         }
         
         /* Scrollbar Styling */
         ::-webkit-scrollbar {
             width: 8px;
+            height: 8px;
         }
         
         ::-webkit-scrollbar-track {
@@ -906,8 +997,8 @@
             <span id="statusText">Neural AI Tutor Ready</span>
         </div>
         
-        <!-- Centered Chat Interface -->
-        <div class="chat-overlay">
+        <!-- Centered Horizontal Chat Interface -->
+        <div class="chat-overlay" id="chatOverlay">
             <div class="chat-header">
                 <div class="chat-title">
                     <div class="ai-avatar">
@@ -920,6 +1011,12 @@
                         </div>
                     </div>
                 </div>
+                
+                <div class="chat-controls">
+                    <button class="collapse-btn" id="collapseBtn" title="Collapse chat">
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                </div>
             </div>
             
             <div class="chat-messages" id="chatMessages">
@@ -927,7 +1024,6 @@
                     <div class="message-content">
                         Welcome to the Neural AI Tutor! I'm your interactive learning assistant. 
                         I can help explain complex concepts, answer questions, and guide your learning journey.
-                        What would you like to learn about today?
                     </div>
                     <div class="message-time">Just now</div>
                 </div>
@@ -940,11 +1036,20 @@
                     <div class="message-time">Just now</div>
                 </div>
                 
+                <div class="message message-ai">
+                    <div class="message-content">
+                        Try asking me about quantum computing, neural networks, blockchain, 
+                        calculus, or any other subject you're curious about!
+                    </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>
+                    <span style="color: #a0b0ff; font-size: 0.9em; margin-left: 10px;">Thinking...</span>
                 </div>
             </div>
             
@@ -999,6 +1104,37 @@
             chevron.classList.toggle('rotated');
         }
 
+        // Chat Collapse Functionality
+        let isChatCollapsed = false;
+        const chatOverlay = document.getElementById('chatOverlay');
+        const collapseBtn = document.getElementById('collapseBtn');
+        
+        collapseBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            toggleChat();
+        });
+        
+        // Click on collapsed chat header to expand
+        chatOverlay.addEventListener('click', function(e) {
+            if (isChatCollapsed && e.target.closest('.chat-header')) {
+                toggleChat();
+            }
+        });
+        
+        function toggleChat() {
+            isChatCollapsed = !isChatCollapsed;
+            chatOverlay.classList.toggle('collapsed');
+            
+            const icon = collapseBtn.querySelector('i');
+            if (isChatCollapsed) {
+                icon.className = 'fas fa-chevron-up';
+                collapseBtn.title = 'Expand chat';
+            } else {
+                icon.className = 'fas fa-chevron-down';
+                collapseBtn.title = 'Collapse chat';
+            }
+        }
+
         // Check if Three.js loaded properly
         function checkThreeJS() {
             if (typeof THREE === 'undefined') {
@@ -1032,7 +1168,7 @@
             document.getElementById('loadingText').textContent = text;
         }
 
-        // Voice Synthesis System
+        // Voice Synthesis System (unchanged from previous version)
         class VoiceSynthesis {
             constructor() {
                 this.synth = window.speechSynthesis;
@@ -1356,7 +1492,7 @@
             }
         }
 
-        // Chat Interface Functionality
+        // Chat Interface Functionality (updated for horizontal layout)
         class ChatInterface {
             constructor() {
                 this.isListening = false;
@@ -1396,7 +1532,7 @@
             autoResizeTextarea() {
                 const textarea = this.chatInput;
                 textarea.style.height = 'auto';
-                const newHeight = Math.min(textarea.scrollHeight, 120);
+                const newHeight = Math.min(textarea.scrollHeight, 100);
                 textarea.style.height = newHeight + 'px';
             }
             
@@ -1485,8 +1621,8 @@
                 
                 this.chatMessages.appendChild(messageDiv);
                 
-                // Scroll to bottom
-                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+                // Scroll to right to show latest message
+                this.chatMessages.scrollLeft = this.chatMessages.scrollWidth;
                 
                 // Update 3D visualization
                 if (window.visualization) {
@@ -1546,7 +1682,7 @@
             
             showTypingIndicator() {
                 this.typingIndicator.style.display = 'flex';
-                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+                this.chatMessages.scrollLeft = this.chatMessages.scrollWidth;
             }
             
             hideTypingIndicator() {
@@ -1556,12 +1692,12 @@
             generateAIResponse(userMessage) {
                 // Enhanced AI response generator with educational content
                 const responses = {
-                    quantum: "Quantum computing uses quantum bits or 'qubits' that can exist in multiple states simultaneously (superposition). This allows quantum computers to process vast amounts of data in parallel. Unlike classical bits (0 or 1), qubits can be 0, 1, or both at the same time. Key principles include superposition, entanglement (where qubits affect each other instantly regardless of distance), and quantum interference. Current applications include cryptography, drug discovery, and complex system simulations.",
-                    neural: "Neural networks learn through a process called backpropagation with gradient descent. They consist of layers of interconnected 'neurons' that process information. During training, the network makes predictions, calculates errors, and adjusts connection weights to minimize those errors. Deep learning uses multiple hidden layers to extract hierarchical features - early layers detect simple patterns (edges, colors), while deeper layers recognize complex structures (faces, objects).",
-                    ai: "Artificial Intelligence (AI) is the broader concept of machines being able to carry out tasks in a way we would consider 'smart'. Machine Learning (ML) is a subset of AI where machines learn from data without explicit programming. Deep Learning (DL) is a subset of ML using neural networks with multiple layers. Think of it as: AI > ML > DL. AI encompasses everything, ML is the method, and DL is the specific technique.",
-                    blockchain: "Blockchain is a distributed, decentralized digital ledger that records transactions across many computers. Each 'block' contains a cryptographic hash of the previous block, a timestamp, and transaction data, creating an immutable chain. Key features include transparency (all participants can see transactions), security (extremely difficult to alter past records), and decentralization (no single point of control). Beyond cryptocurrency, it's used for smart contracts, supply chain tracking, and secure voting systems.",
-                    calculus: "Derivatives measure instantaneous rate of change - essentially the slope of a curve at a specific point. If f(x) is your function, the derivative f'(x) tells you how fast f(x) is changing at any x. Think of driving: your speedometer shows your instantaneous speed (derivative of position). Important rules include: Power rule (d/dx[xⁿ] = nxⁿ⁻¹), Product rule (d/dx[uv] = u'v + uv'), Quotient rule, and Chain rule for composite functions.",
-                    default: "I understand you're asking about " + userMessage.substring(0, 50) + "... This is an interesting topic in modern education. Let me provide a structured explanation with key concepts, real-world applications, and learning pathways. Would you like me to start with fundamentals, practical examples, or career applications?"
+                    quantum: "Quantum computing uses quantum bits or 'qubits' that can exist in multiple states simultaneously (superposition). This allows quantum computers to process vast amounts of data in parallel. Unlike classical bits (0 or 1), qubits can be 0, 1, or both at the same time.",
+                    neural: "Neural networks learn through backpropagation with gradient descent. They consist of layers of interconnected 'neurons' that process information. During training, the network adjusts connection weights to minimize prediction errors.",
+                    ai: "Artificial Intelligence (AI) is the broader concept of machines being able to carry out tasks in a way we would consider 'smart'. Machine Learning (ML) is a subset of AI where machines learn from data without explicit programming.",
+                    blockchain: "Blockchain is a distributed, decentralized digital ledger that records transactions across many computers. Each 'block' contains a cryptographic hash of the previous block, creating an immutable chain.",
+                    calculus: "Derivatives measure instantaneous rate of change - essentially the slope of a curve at a specific point. If f(x) is your function, the derivative f'(x) tells you how fast f(x) is changing at any x.",
+                    default: "I understand you're asking about " + userMessage.substring(0, 40) + "... This is an interesting topic! Let me provide a clear explanation with key concepts and real-world applications."
                 };
                 
                 const lowerMessage = userMessage.toLowerCase();
@@ -1576,7 +1712,7 @@
             }
         }
 
-        // Main Visualization Class (Unchanged from previous version)
+        // Main Visualization Class (unchanged from previous version)
         class AITutorVisualization {
             constructor() {
                 if (!checkThreeJS()) return;