Add interactive visual content system for kids

✨ New Features:
- Visual animations for science concepts (sky, birds, water, etc.)
- Interactive educational illustrations with emoji and animations
- Topic-based visual content mapping system
- Kid-friendly CSS animations and effects
- Enhanced learning experience for ages 8-12

🎨 Visual Content Includes:
- Sky/atmosphere light scattering animation
- Bird flight mechanics visualization
- Water molecule structure and behavior
- Earth orbit and seasons explanation
- Computer data flow representation
- Brain and dream visualization
- Rainbow light spectrum breakdown
- General thinking process animations

📱 Features:
- Responsive design for all devices
- Smooth animations and transitions
- Auto-detection of topics from questions
- Multi-language visual descriptions
- Engaging educational content

script-new.js

@@ -236,6 +236,9 @@ class KidsAIExplorer {
         conversationContainer.className = 'conversation-container';
         this.thinkingSteps.appendChild(conversationContainer);
 
+        // Get the original question for visual content
+        const currentQuestion = this.questionInput ? this.questionInput.value.trim() : '';
+        
         // Show initial encouragement
         const welcomeStep = document.createElement('div');
         welcomeStep.className = 'conversation-step visible';
@@ -263,6 +266,31 @@ class KidsAIExplorer {
         `;
         conversationContainer.appendChild(welcomeStep);
 
+        // Add visual content if available
+        if (typeof VisualContent !== 'undefined' && currentQuestion) {
+            const visualContent = VisualContent.getVisualForTopic(currentQuestion);
+            if (visualContent) {
+                const visualStep = document.createElement('div');
+                visualStep.className = 'conversation-step visual-step visible';
+                
+                const visualDescription = visualContent.description[this.currentLanguage] || visualContent.description['en'];
+                
+                visualStep.innerHTML = `
+                    <div class="ai-message">
+                        <div class="message-header">
+                            <span class="ai-avatar">${visualContent.emoji}</span>
+                            <span class="ai-label">${aiTeacherLabel}</span>
+                        </div>
+                        <div class="message-content">
+                            <p>${visualDescription}</p>
+                            ${visualContent.illustration}
+                        </div>
+                    </div>
+                `;
+                conversationContainer.appendChild(visualStep);
+            }
+        }
+
         // Add thinking questions as interactive steps
         const fallbackQuestions = [
             t['fallback-question-1'] || "What do you already know about this topic?",