From 121caad8dbf60144a6067a8ddd7beccf3c07b314 Mon Sep 17 00:00:00 2001
From: root <root>
Date: Wed, 2 Jul 2025 15:03:45 +0200
Subject: [PATCH] style: Improve loading overlay and visual feedback

- Add smooth loading overlay with animated spinner
- Improve loading messages and visual indicators
- Add better CSS for conversation bubbles and animations
- Ensure loading overlay is properly visible during AI processing
- Add kid-friendly loading messages and styling
---
 html/kidsai/style.css | 873 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 748 insertions(+), 125 deletions(-)

diff --git a/html/kidsai/style.css b/html/kidsai/style.css
index 225fd86..a217cc6 100755
--- a/html/kidsai/style.css
+++ b/html/kidsai/style.css
@@ -92,6 +92,23 @@ body {
     justify-content: center;
     gap: 15px;
     margin-bottom: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 15px;
+    padding: 10px 20px;
+    /* Make it focusable for keyboard navigation */
+    outline: none;
+}
+
+.logo:hover,
+.logo:focus {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.logo:active {
+    transform: translateY(0);
 }
 
 .logo i,
@@ -281,6 +298,16 @@ body {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     animation: fadeInUp 0.8s ease-out;
     margin-bottom: 20px;
+    
+    /* Stable layout to prevent jumping */
+    min-height: 200px;
+    position: relative;
+    will-change: auto; /* Optimize for stability over animation performance */
+}
+
+.thinking-section.stable-layout {
+    /* When content is being dynamically added, maintain stable dimensions */
+    transition: min-height 0.3s ease;
 }
 
 .thinking-header h3 {
@@ -298,6 +325,23 @@ body {
 
 .thinking-steps {
     margin-bottom: 25px;
+    
+    /* Ensure smooth content transitions without jumping */
+    position: relative;
+    overflow: hidden; /* Prevent content overflow during transitions */
+}
+
+/* Prevent thinking section from causing page scroll jumps */
+.thinking-section .thinking-steps {
+    scroll-margin-top: 20px; /* Better scroll positioning */
+}
+
+/* Container stability improvements */
+.container {
+    /* ...existing code... */
+    
+    /* Prevent container shifts when content changes */
+    scroll-padding-top: 20px;
 }
 
 .thinking-step {
@@ -563,56 +607,94 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(102, 126, 234, 0.9);
+    background: rgba(102, 126, 234, 0.95);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
+    backdrop-filter: blur(10px);
 }
 
 .loading-spinner {
     position: relative;
-    width: 100px;
-    height: 100px;
-    margin-bottom: 20px;
+    width: 120px;
+    height: 120px;
+    margin-bottom: 30px;
 }
 
 .gear {
     position: absolute;
     border: 4px solid #fff;
     border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.2rem;
 }
 
 .gear1 {
-    width: 60px;
-    height: 60px;
-    top: 20px;
-    left: 20px;
+    width: 70px;
+    height: 70px;
+    top: 25px;
+    left: 25px;
     animation: rotate 2s linear infinite;
 }
 
+.gear1::before {
+    content: "🧠";
+    font-size: 1.5rem;
+    animation: counter-rotate 2s linear infinite;
+}
+
 .gear2 {
-    width: 40px;
-    height: 40px;
-    top: 0;
-    right: 0;
-    animation: rotate 2s linear infinite reverse;
+    width: 45px;
+    height: 45px;
+    top: 5px;
+    right: 5px;
+    animation: rotate 2.5s linear infinite reverse;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.gear2::before {
+    content: "💡";
+    font-size: 1rem;
+    animation: counter-rotate 2.5s linear infinite reverse;
 }
 
 .gear3 {
-    width: 30px;
-    height: 30px;
-    bottom: 0;
-    left: 0;
-    animation: rotate 1.5s linear infinite;
+    width: 35px;
+    height: 35px;
+    bottom: 5px;
+    left: 5px;
+    animation: rotate 1.8s linear infinite;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.gear3::before {
+    content: "⚙️";
+    font-size: 0.8rem;
+    animation: counter-rotate 1.8s linear infinite;
 }
 
 .loading-overlay p {
     color: white;
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     font-weight: 600;
     text-align: center;
+    max-width: 300px;
+    line-height: 1.4;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.loading-message {
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.loading-message.fade-out {
+    opacity: 0;
 }
 
 /* Utility Classes */
@@ -841,6 +923,15 @@ body {
     }
 }
 
+@keyframes counter-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
+}
+
 @keyframes bounceIn {
     0% {
         opacity: 0;
@@ -899,7 +990,6 @@ body {
 .reveal-answer-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-    background: linear-gradient(135deg, #5a67d8, #6b46c1);
 }
 
 .reveal-answer-btn:disabled {
@@ -997,6 +1087,7 @@ body {
     .container {
         padding: 10px;
         margin: 0;
+        min-height: 100vh;
     }
     
     /* Header Optimizations */
@@ -1024,7 +1115,7 @@ body {
         line-height: 1.2;
     }
     
-    .subtitle {
+    .tagline {
         font-size: 1rem;
         padding: 0 10px;
     }
@@ -1040,33 +1131,43 @@ body {
         font-size: 0.8rem;
     }
     
-    /* Main Question Section */
-    .main-section {
+    /* Welcome and Question Sections */
+    .welcome-section,
+    .question-section,
+    .suggestions-section {
         padding: 20px 15px;
         margin-bottom: 20px;
+        border-radius: 15px;
     }
     
-    .main-section h2 {
+    .welcome-section h2 {
         font-size: 1.5rem;
         margin-bottom: 15px;
     }
     
-    .question-input-container {
-        flex-direction: column;
+    .welcome-section p {
+        font-size: 1rem;
+        line-height: 1.5;
+    }
+    
+    /* Input and Button Improvements */
+    .input-wrapper {
         gap: 15px;
     }
     
-    .question-input {
+    #question-input {
         padding: 15px;
         font-size: 16px; /* Prevents zoom on iOS */
         min-height: 50px;
+        border-radius: 12px;
     }
     
-    .ask-button {
+    .ask-btn {
         padding: 15px 25px;
         font-size: 1.1rem;
         width: 100%;
         min-height: 50px;
+        border-radius: 20px;
     }
     
     /* Suggestions Grid */
@@ -1101,35 +1202,86 @@ body {
         line-height: 1.3;
     }
     
-    /* Conversation Container */
-    .conversation-container {
-        padding: 15px;
+    /* Thinking Section Mobile Optimization */
+    .thinking-section {
+        padding: 20px 15px;
+        margin-bottom: 20px;
         border-radius: 15px;
-        max-height: 70vh;
-        margin: 0 -5px;
+        min-height: auto !important;
     }
     
-    /* Chat Messages */
+    .thinking-header h3 {
+        font-size: 1.5rem;
+        margin-bottom: 15px;
+    }
+    
+    .thinking-step {
+        padding: 15px;
+        margin-bottom: 15px;
+        border-radius: 12px;
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .step-number {
+        width: 30px;
+        height: 30px;
+        font-size: 1rem;
+    }
+    
+    .step-text {
+        font-size: 1rem;
+        margin-bottom: 10px;
+    }
+    
+    .step-thinking-space textarea {
+        font-size: 16px; /* Prevents zoom on iOS */
+        min-height: 50px;
+        padding: 12px;
+    }
+    
+    /* Mobile Conversation Container - CRITICAL FIX */
+    .conversation-container {
+        padding: 15px !important;
+        border-radius: 15px !important;
+        height: 60vh !important; /* Use viewport height for better mobile experience */
+        max-height: 60vh !important;
+        min-height: 300px !important; /* Minimum usable height */
+        margin: 0 !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        /* Remove conflicting styles */
+        width: 100% !important;
+        max-width: none !important;
+        box-sizing: border-box !important;
+    }
+    
+    /* Chat Messages Mobile */
     .chat-message {
-        max-width: 92%;
+        max-width: 90%;
         margin-bottom: 12px;
+        font-size: 0.95rem;
+    }
+    
+    .chat-message.ai-message,
+    .chat-message.user-message {
+        padding: 12px 15px;
+        border-radius: 15px;
+        line-height: 1.4;
     }
     
     .chat-message.ai-message {
-        padding: 12px 15px;
         border-radius: 15px 15px 15px 4px;
-        font-size: 0.95rem;
     }
     
     .chat-message.user-message {
-        padding: 12px 15px;
         border-radius: 15px 15px 4px 15px;
-        font-size: 0.95rem;
     }
     
     .message-header {
         gap: 6px;
         margin-bottom: 6px;
+        font-size: 0.8rem;
     }
     
     .ai-avatar {
@@ -1140,19 +1292,15 @@ body {
         font-size: 0.8rem;
     }
     
-    .message-content {
-        line-height: 1.4;
-    }
-    
-    /* Chat Input */
+    /* Chat Input Mobile */
     .chat-input-container {
         margin: 15px 0;
     }
     
     .chat-input-container .input-area {
-        padding: 8px 12px;
+        padding: 10px 15px;
         border-radius: 20px;
-        gap: 8px;
+        gap: 10px;
         min-height: 50px;
     }
     
@@ -1165,82 +1313,64 @@ body {
     
     .chat-input-container .reply-btn {
         padding: 10px 12px;
-        font-size: 12px;
+        font-size: 0.9rem;
         border-radius: 18px;
-        min-height: 36px;
-        min-width: 50px;
+        min-height: 44px; /* iOS touch target */
+        min-width: 60px;
     }
     
-    /* Reveal Section */
-    .reveal-section {
-        margin-top: 20px;
-        padding: 20px 15px;
-        border-radius: 15px;
-    }
-    
-    .reveal-prompt p {
-        font-size: 1rem;
-        margin-bottom: 12px;
-    }
-    
-    .reveal-btn {
-        padding: 12px 20px;
-        font-size: 1rem;
-        border-radius: 20px;
-        width: 100%;
-        justify-content: center;
-    }
-    
-    /* Final Answer */
+    /* Answer and Action Sections Mobile */
+    .answer-reveal-section,
+    .answer-content,
     .final-answer {
         padding: 20px 15px;
-        border-radius: 12px;
+        border-radius: 15px;
         margin: 15px 0;
     }
     
-    .final-answer .answer-header {
+    .answer-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
         margin-bottom: 15px;
-        padding-bottom: 12px;
     }
     
-    .final-answer .answer-icon {
+    .answer-icon {
         font-size: 1.5rem;
-        padding: 6px;
     }
     
-    .final-answer h4 {
+    .answer-header h4 {
         font-size: 1.2rem;
     }
     
-    .final-answer .answer-source {
+    .answer-source {
         align-self: stretch;
         text-align: center;
         padding: 8px 12px;
-        font-size: 0.75rem;
+        font-size: 0.8rem;
     }
     
-    .final-answer .answer-text {
+    .answer-text {
         font-size: 1rem;
         line-height: 1.6;
         padding: 15px;
         margin-bottom: 15px;
     }
     
-    .final-answer .answer-footer {
-        padding: 12px 15px;
-    }
-    
-    .final-answer .answer-footer p {
+    .reveal-answer-btn,
+    .reveal-btn {
+        padding: 12px 20px;
         font-size: 1rem;
+        border-radius: 20px;
+        width: 100%;
+        justify-content: center;
+        min-height: 50px;
     }
     
-    /* Action Buttons */
+    /* Action Buttons and Encouragement Mobile */
     .action-buttons {
         flex-direction: column;
-        gap: 10px;
+        gap: 12px;
         margin-top: 15px;
     }
     
@@ -1249,20 +1379,21 @@ body {
         justify-content: center;
         padding: 12px 20px;
         font-size: 1rem;
+        min-height: 50px;
     }
     
-    /* Encouragement Section */
-    .encouragement-section {
+    .encouragement-message {
         padding: 15px;
         margin-bottom: 20px;
+        border-radius: 15px;
     }
     
     .encouragement-text {
         font-size: 1.1rem;
-        line-height: 1.3;
+        line-height: 1.4;
     }
     
-    /* Footer */
+    /* Footer Mobile */
     .footer {
         padding: 15px 10px;
         margin-top: 20px;
@@ -1301,7 +1432,7 @@ body {
         height: 25px;
     }
     
-    /* Touch Improvements */
+    /* Touch and Interaction Improvements */
     .suggestion-card:hover {
         transform: none; /* Disable hover effects on mobile */
     }
@@ -1311,33 +1442,51 @@ body {
         background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
     }
     
-    .ask-button:active,
+    .ask-btn:active,
     .action-btn:active,
     .reply-btn:active,
-    .reveal-btn:active {
+    .reveal-btn:active,
+    .reveal-answer-btn:active {
         transform: scale(0.98);
     }
     
+    /* Better focus states on mobile */
+    #question-input:focus,
+    .chat-textarea:focus {
+        outline: none;
+        border-color: #4299e1;
+        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+    }
+    
+    .step-thinking-space textarea:focus {
+        outline: none;
+        border-color: #4299e1;
+        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
+    }
+    
+    /* Improve button touch targets - iOS guidelines */
+    .reply-btn,
+    .reveal-btn,
+    .reveal-answer-btn,
+    .ask-btn,
+    .action-btn,
+    .choice-btn,
+    .lang-btn {
+        min-height: 44px; /* iOS recommended minimum touch target */
+        min-width: 44px;
+    }
+    
     /* Prevent viewport jumping when keyboard appears */
     .conversation-container {
-        /* Use viewport units that don't change with keyboard */
-        max-height: 70vh;
-        /* Ensure container stays in place */
+        /* Use fixed viewport units that don't change with keyboard */
+        max-height: 60vh !important;
         position: relative;
     }
     
-    /* Better handling of focus states on mobile */
-    .chat-textarea:focus {
-        outline: none;
-        border-color: #4299e1;
-    }
-    
-    /* Improve button touch targets */
-    .reply-btn,
-    .reveal-btn,
-    .ask-button {
-        min-height: 44px; /* iOS recommended minimum touch target */
-        min-width: 44px;
+    /* Better scroll behavior */
+    .conversation-container {
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+        scroll-behavior: smooth;
     }
 }
 
@@ -1351,61 +1500,147 @@ body {
         font-size: 1.5rem;
     }
     
-    .main-section {
+    .tagline {
+        font-size: 0.9rem;
+    }
+    
+    .welcome-section,
+    .question-section,
+    .thinking-section,
+    .suggestions-section {
         padding: 15px 10px;
+        margin-bottom: 15px;
     }
     
     .conversation-container {
-        padding: 10px;
-        margin: 0 -2px;
+        padding: 10px !important;
+        height: 50vh !important;
+        max-height: 50vh !important;
+        min-height: 250px !important;
     }
     
     .chat-message {
         max-width: 95%;
+        font-size: 0.9rem;
     }
     
     .chat-message.ai-message,
     .chat-message.user-message {
         padding: 10px 12px;
-        font-size: 0.9rem;
     }
     
+    .answer-content,
     .final-answer {
         padding: 15px 10px;
     }
     
-    .final-answer .answer-text {
+    .answer-text {
         font-size: 0.95rem;
         padding: 12px;
     }
+    
+    .action-btn,
+    .reveal-btn,
+    .reveal-answer-btn {
+        font-size: 0.95rem;
+        padding: 12px 16px;
+    }
 }
 
-/* Landscape orientation adjustments */
+/* Landscape orientation adjustments for mobile */
 @media (max-width: 768px) and (orientation: landscape) {
     .conversation-container {
-        max-height: 60vh;
+        height: 40vh !important;
+        max-height: 40vh !important;
+        min-height: 200px !important;
     }
     
     .logo h1 {
         font-size: 1.6rem;
     }
     
-    .main-section h2 {
+    .welcome-section h2,
+    .thinking-header h3 {
         font-size: 1.3rem;
     }
+    
+    .container {
+        padding: 8px;
+    }
+    
+    .welcome-section,
+    .question-section,
+    .thinking-section {
+        padding: 15px 12px;
+        margin-bottom: 15px;
+    }
 }
 
-/* Interactive Chat Interface Styles */
-.conversation-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    background: white;
-    border-radius: 20px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-    min-height: 400px;
+/* Interactive Chat Interface Styles - Desktop and Large Tablets */
+@media (min-width: 769px) {
+    .conversation-container {
+        /* Layout and sizing - FIXED HEIGHT FOR DESKTOP */
+        width: 100%;
+        max-width: 800px;
+        height: 450px;
+        max-height: 450px;
+        min-height: 450px;
+        
+        /* Container properties */
+        margin: 0 auto;
+        padding: 20px;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+        
+        /* Critical overflow and scroll settings */
+        overflow-y: scroll;
+        overflow-x: hidden;
+        scroll-behavior: smooth;
+        
+        /* Force container behavior */
+        display: block;
+        box-sizing: border-box;
+        position: relative;
+        
+        /* Container containment - prevents layout issues */
+        contain: layout size style;
+        
+        /* Force scrollbar visibility */
+        scrollbar-width: thin;
+        scrollbar-color: #64748b #f1f5f9;
+        
+        /* Add padding to account for scrollbar space */
+        padding-right: 25px;
+    }
+    
+    /* Force scrollbar visibility on webkit browsers - Desktop only */
+    .conversation-container::-webkit-scrollbar {
+        width: 14px;
+        background: #f1f5f9;
+        border-radius: 7px;
+    }
+    
+    .conversation-container::-webkit-scrollbar-track {
+        background: #f1f5f9;
+        border-radius: 7px;
+        border: 1px solid #e2e8f0;
+    }
+    
+    .conversation-container::-webkit-scrollbar-thumb {
+        background: #64748b;
+        border-radius: 7px;
+        border: 2px solid #f1f5f9;
+        min-height: 40px;
+    }
+    
+    .conversation-container::-webkit-scrollbar-thumb:hover {
+        background: #475569;
+    }
 }
 
+
+
 .conversation-step {
     opacity: 0;
     transform: translateY(30px);
@@ -1417,6 +1652,10 @@ body {
 .conversation-step.visible {
     opacity: 1;
     transform: translateY(0);
+    
+    /* Ensure smooth appearance without affecting container size */
+    backface-visibility: hidden; /* Better animation performance */
+    transform: translateZ(0); /* Hardware acceleration for smoother animations */
 }
 
 .ai-message {
@@ -1729,3 +1968,387 @@ body {
         font-size: 1rem;
     }
 }
+
+/* Thinking Section - Chat Mode Behavior */
+.thinking-section.chat-mode {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    height: auto;
+    overflow: visible;
+}
+
+.thinking-section.chat-mode .thinking-header {
+    flex-shrink: 0;
+    margin-bottom: 15px;
+}
+
+.thinking-section.chat-mode .thinking-steps {
+    display: block;
+    height: auto;
+    overflow: visible;
+}
+
+/* Mobile-specific thinking section chat mode */
+@media (max-width: 768px) {
+    .thinking-section.chat-mode {
+        padding: 15px;
+        display: block;
+    }
+    
+    .thinking-section.chat-mode .conversation-container {
+        /* Override desktop rules for mobile */
+        height: 60vh !important;
+        max-height: 60vh !important;
+        min-height: 300px !important;
+        padding: 15px !important;
+        margin: 0 !important;
+        max-width: none !important;
+        padding-right: 15px !important; /* No extra padding for scrollbar on mobile */
+    }
+    
+    .thinking-section.chat-mode .thinking-header h3 {
+        font-size: 1.5rem;
+        margin-bottom: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .thinking-section.chat-mode .conversation-container {
+        height: 50vh !important;
+        max-height: 50vh !important;
+        min-height: 250px !important;
+        padding: 10px !important;
+    }
+}
+
+/* Mobile Keyboard Overlay Fixes */
+@media (max-width: 768px) {
+    /* Fix for mobile keyboard overlay - ensure input stays visible */
+    .chat-input-container {
+        position: sticky;
+        bottom: 0;
+        z-index: 100;
+        background: white;
+        padding: 10px;
+        margin: 0 -15px -15px -15px; /* Negative margins to extend to container edges */
+        border-radius: 0 0 15px 15px;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .thinking-section.chat-mode .conversation-container .chat-input-container {
+        margin: 0 -15px -15px -15px;
+        border-radius: 0 0 15px 15px;
+    }
+    
+    /* Ensure conversation container has proper padding bottom for sticky input */
+    .conversation-container {
+        padding-bottom: 80px !important; /* Extra space for sticky input */
+    }
+    
+    /* Alternative approach - adjust viewport when keyboard is open */
+    .chat-input-container .input-area:focus-within {
+        /* When input is focused, ensure it's visible */
+        transform: translateY(0);
+        transition: transform 0.3s ease;
+    }
+    
+    /* Fix for iOS Safari viewport units issue with keyboard */
+    .thinking-section.chat-mode .conversation-container {
+        /* Use different height calculation to account for keyboard */
+        height: calc(100vh - 400px) !important;
+        max-height: calc(100vh - 400px) !important;
+    }
+    
+    /* Better scroll behavior when keyboard is open */
+    .conversation-container.keyboard-open {
+        height: calc(50vh - 100px) !important;
+        max-height: calc(50vh - 100px) !important;
+    }
+    
+    /* Ensure chat messages are accessible above sticky input */
+    .conversation-container .chat-message:last-of-type {
+        margin-bottom: 20px;
+    }
+}
+
+/* iOS-specific keyboard fixes */
+@supports (-webkit-touch-callout: none) {
+    @media (max-width: 768px) {
+        /* iOS Safari specific fixes */
+        .chat-input-container {
+            position: -webkit-sticky;
+            position: sticky;
+            bottom: 0;
+            /* Add safe area padding for newer iPhones */
+            padding-bottom: env(safe-area-inset-bottom, 10px);
+        }
+        
+        /* Prevent iOS zoom on input focus */
+        .chat-textarea,
+        #question-input,
+        .step-thinking-space textarea {
+            font-size: 16px !important;
+            transform: translateZ(0); /* Force hardware acceleration */
+        }
+        
+        /* Fix for iOS Safari height calculation */
+        .thinking-section.chat-mode .conversation-container {
+            height: 50vh !important;
+            max-height: 50vh !important;
+            /* Use -webkit-fill-available for better iOS support */
+            height: -webkit-fill-available;
+            max-height: -webkit-fill-available;
+        }
+        
+        /* Ensure proper scrolling on iOS */
+        .conversation-container {
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+}
+
+/* Android-specific keyboard fixes */
+@media (max-width: 768px) {
+    /* Android Chrome/WebView fixes */
+    .conversation-container {
+        /* Use viewport height units that work better with Android keyboard */
+        height: 60vh !important;
+        max-height: 60vh !important;
+    }
+    
+    /* Ensure input container is always accessible */
+    .chat-input-container {
+        /* Make sure it's above the keyboard on Android */
+        position: sticky;
+        bottom: 0;
+        background: white;
+        z-index: 1000;
+    }
+    
+    /* Fix for Android keyboard pushing content up */
+    @media (max-height: 600px) {
+        /* When keyboard is likely open (reduced viewport height) */
+        .thinking-section.chat-mode .conversation-container {
+            height: 40vh !important;
+            max-height: 40vh !important;
+            min-height: 200px !important;
+        }
+        
+        .welcome-section,
+        .question-section {
+            padding: 15px 10px;
+            margin-bottom: 10px;
+        }
+        
+        .header {
+            margin-bottom: 10px;
+        }
+        
+        .logo h1 {
+            font-size: 1.5rem;
+        }
+        
+        .tagline {
+            font-size: 0.9rem;
+        }
+    }
+}
+
+/* Landscape mode with keyboard open */
+@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
+    /* Very limited vertical space - keyboard is likely open */
+    .thinking-section.chat-mode .conversation-container {
+        height: 30vh !important;
+        max-height: 30vh !important;
+        min-height: 150px !important;
+    }
+    
+    .chat-input-container {
+        padding: 8px;
+    }
+    
+    .chat-input-container .input-area {
+        padding: 8px 12px;
+        min-height: 40px;
+    }
+    
+    .chat-textarea {
+        min-height: 18px;
+        max-height: 40px;
+    }
+    
+    .chat-input-container .reply-btn {
+        padding: 8px 10px;
+        min-height: 36px;
+        font-size: 0.8rem;
+    }
+}
+
+/* Enhanced Mobile Keyboard Support with JavaScript */
+@media (max-width: 768px) {
+    /* When JavaScript detects keyboard is open */
+    body.keyboard-open {
+        height: 100vh;
+        overflow: hidden;
+    }
+    
+    body.keyboard-open .conversation-container {
+        /* Let JavaScript handle the height dynamically */
+        transition: height 0.3s ease, max-height 0.3s ease;
+    }
+    
+    /* Enhanced focus states for better keyboard experience */
+    .chat-textarea.focused,
+    #question-input.focused,
+    .step-thinking-space textarea.focused {
+        border-color: #4299e1;
+        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
+        background: white;
+        /* Ensure focused input is visible above other content */
+        position: relative;
+        z-index: 100;
+    }
+    
+    /* Fixed input container when keyboard is detected */
+    .chat-input-container.keyboard-fixed {
+        position: fixed !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        z-index: 1000 !important;
+        background: white !important;
+        border-top: 1px solid #e2e8f0 !important;
+        padding: 15px !important;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
+        margin: 0 !important;
+        border-radius: 0 !important;
+    }
+    
+    /* Smooth transitions for keyboard events */
+    .conversation-container,
+    .chat-input-container {
+        transition: all 0.3s ease;
+        will-change: transform, height;
+    }
+    
+    /* Ensure text doesn't get cut off during transitions */
+    .chat-message,
+    .thinking-step {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        hyphens: auto;
+    }
+    
+    /* Better visual feedback for touch interactions */
+    .chat-textarea:active,
+    #question-input:active {
+        transform: none; /* Prevent transform during text input */
+    }
+    
+    /* Improve scroll behavior during keyboard events */
+    .conversation-container.keyboard-open {
+        scroll-behavior: smooth;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+/* Enhanced Multiple Input Container Support */
+@media (max-width: 768px) {
+    /* When keyboard is open, hide non-active input containers */
+    body.keyboard-open .chat-input-container:not(.input-focused):not(.keyboard-fixed) {
+        display: none !important;
+    }
+    
+    /* Ensure only the focused input container is visible and positioned correctly */
+    body.input-focused-active .chat-input-container:not(.input-focused) {
+        display: none !important;
+    }
+    
+    /* Make sure the active input container is always visible */
+    .chat-input-container.input-focused,
+    .chat-input-container.keyboard-fixed {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+    }
+    
+    /* Smooth transitions for showing/hiding input containers */
+    .chat-input-container {
+        transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+    
+    /* Enhanced positioning for multiple scenarios */
+    body.keyboard-open .chat-input-container.input-focused {
+        /* Highest priority positioning when both keyboard is detected and input is focused */
+        position: fixed !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        z-index: 1002 !important; /* Higher than keyboard-fixed */
+        background: white !important;
+        border-top: 2px solid #4299e1 !important; /* Blue border to show it's active */
+        padding: 15px !important;
+        padding-bottom: 25px !important;
+        box-shadow: 0 -4px 15px rgba(66, 153, 225, 0.2) !important;
+        margin: 0 !important;
+        border-radius: 0 !important;
+    }
+    
+    /* Conversation container adjustments for multiple input scenarios */
+    body.input-focused-active .conversation-container,
+    body.keyboard-open .conversation-container {
+        /* Ensure there's enough space at the bottom for the fixed input */
+        padding-bottom: 100px !important;
+        margin-bottom: 0 !important;
+        /* Improve scrolling behavior */
+        scroll-behavior: smooth !important;
+        -webkit-overflow-scrolling: touch !important;
+    }
+    
+    /* Special handling for dynamically added input containers */
+    .chat-input-container[style*="display: none"] {
+        /* Completely hide containers that are explicitly hidden */
+        visibility: hidden !important;
+        pointer-events: none !important;
+        height: 0 !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        border: none !important;
+    }
+}
+
+/* Debug enhancement for multiple inputs */
+@media (max-width: 768px) {
+    /* Show count of visible input containers */
+    body.keyboard-open::after {
+        content: "INPUTS: " attr(data-visible-inputs);
+        position: fixed;
+        top: 20px;
+        right: 10px;
+        background: #38a169;
+        color: white;
+        padding: 2px 8px;
+        font-size: 10px;
+        border-radius: 4px;
+        z-index: 10001;
+        opacity: 0.8;
+    }
+    
+    /* Enhanced visual feedback for active input */
+    .chat-input-container.input-focused::before {
+        content: "ACTIVE INPUT";
+        background: #38a169 !important;
+        color: white !important;
+    }
+    
+    /* Visual feedback for keyboard-fixed inputs */
+    .chat-input-container.keyboard-fixed::before {
+        content: "KEYBOARD FIXED";
+        background: #f6ad55 !important;
+        color: black !important;
+    }
+}