Update app.py

app.py

@@ -996,6 +996,7 @@ def export_data() -> str:
 
 # Define custom CSS for full-screen, readable font, and black background
 custom_css = """
+
 /* Full-screen layout: remove padding and margins, use full width */
 .gradio-container {
     width: 100vw !important;
@@ -1004,39 +1005,46 @@ custom_css = """
     margin: 0 !important;
     background-color: #000000 !important;
     color: #ffffff !important;
-    overflow-x: hidden !important; /* Prevent horizontal scroll on mobile */
+    overflow-x: hidden !important;
 }
 
 /* Remove padding and ensure full-width components */
 .response-area, .input-area, .history-display, .analytics-display {
-    padding: 8px !important; /* Reduced padding for mobile */
+    padding: 8px !important;
     margin: 0 !important;
     width: 100% !important;
     box-sizing: border-box !important;
     border: 1px solid #333333 !important;
-    border-radius: 4px !important; /* Subtle rounding for modern look */
+    border-radius: 4px !important;
 }
 
 /* Textbox and output styling */
 .response-area, .history-display, .analytics-display {
     background-color: #000000 !important;
     color: #ffffff !important;
-    min-height: 150px !important; /* Smaller height for mobile */
-    overflow-y: auto !important; /* Smooth scrolling for long outputs */
+    min-height: 150px !important;
+    overflow-y: auto !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
 }
 
 /* Input area */
 .input-area {
-    background-color: #1a1a1a !important;
+    background-color: #000000 !important; /* Changed from #1a1a1a */
     color: #ffffff !important;
     border: 1px solid #333333 !important;
-    min-height: 80px !important; /* Compact for mobile journaling */
+    min-height: 80px !important;
+}
+
+/* Placeholder styling for readability */
+.response-area::placeholder, .input-area::placeholder, .history-display::placeholder, .analytics-display::placeholder {
+    color: #aaaaaa !important; /* Brighter for contrast against #000000 */
+    opacity: 1 !important;
 }
 
 /* Font styling */
 * {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-    font-size: 16px !important; /* Default for desktop */
+    font-size: 16px !important;
 }
 
 /* Button styling */
@@ -1044,8 +1052,8 @@ button {
     background-color: #333333 !important;
     color: #ffffff !important;
     border: 1px solid #555555 !important;
-    padding: 10px !important; /* Slightly larger for touch */
-    min-height: 44px !important; /* WCAG-compliant touch target */
+    padding: 10px !important;
+    min-height: 44px !important;
     border-radius: 4px !important;
 }
 button:hover {
@@ -1054,53 +1062,52 @@ button:hover {
 
 /* Dropdown styling */
 select {
-    background-color: #1a1a1a !important;
+    background-color: #000000 !important; /* Changed from #1a1a1a */
     color: #ffffff !important;
     border: 1px solid #333333 !important;
     padding: 8px !important;
-    min-height: 44px !important; /* Touch-friendly */
+    min-height: 44px !important;
 }
 
 /* Markdown text */
 .markdown {
     color: #ffffff !important;
-    line-height: 1.5 !important; /* Better readability */
+    line-height: 1.5 !important;
 }
 
 /* Mobile-specific adjustments */
 @media (max-width: 600px) {
     * {
-        font-size: 14px !important; /* Smaller fonts for mobile */
+        font-size: 14px !important;
     }
     .gradio-container {
-        padding: 8px !important; /* Minimal padding for breathing room */
+        padding: 8px !important;
     }
     .response-area, .history-display, .analytics-display {
-        min-height: 100px !important; /* Compact outputs */
+        min-height: 100px !important;
         padding: 6px !important;
     }
     .input-area {
-        min-height: 60px !important; /* Smaller input box */
+        min-height: 60px !important;
     }
     button, select {
         padding: 8px !important;
         font-size: 13px !important;
-        min-height: 40px !important; /* Slightly smaller but still touch-friendly */
+        min-height: 40px !important;
     }
-    /* Stack rows vertically on mobile */
     .gr-row {
         flex-direction: column !important;
         gap: 8px !important;
     }
     .gr-column {
-        width: 100% !important; /* Full width for inputs like topic */
+        width: 100% !important;
     }
 }
 
 /* Tablet adjustments */
 @media (min-width: 601px) and (max-width: 1024px) {
     * {
-        font-size: 15px !important; /* Middle ground for tablets */
+        font-size: 15px !important;
     }
     .response-area, .history-display, .analytics-display {
         min-height: 120px !important;
@@ -1118,7 +1125,10 @@ select {
 @keyframes spin {
     100% { transform: rotate(360deg); }
 }
+
 """
+# End of custom_css
+
 
 # Initialize storage and components (must be after get_topics_list)
 storage = ChatStorage()