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;
+ }
+}