Update app.py

app.py

@@ -73,13 +73,10 @@ class HumanTouchApp:
 def create_interface():
     app = HumanTouchApp()
 
-    # CSS with aggressive legibility fixes
+    # CSS with DEFINITIVE legibility fixes
     custom_css = """
     /* --- Main Background and Font --- */
-    body, #main_container {
-        background: linear-gradient(135deg, #6DD5FA, #FF758C);
-        font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif;
-    }
+    body, #main_container { background: linear-gradient(135deg, #6DD5FA, #FF758C); font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif; }
     /* --- Header Styling --- */
     #header { text-align: center; margin: 2rem auto; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
     #header h1 { font-size: 3rem; font-weight: 700; }
@@ -92,53 +89,43 @@ def create_interface():
         border-radius: 20px !important; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
         padding: 1rem;
     }
-    .tab-buttons button {
-        background-color: transparent !important; color: #37474F !important;
-        border: none !important; border-bottom: 3px solid transparent !important;
-        border-radius: 0 !important; font-size: 1.1rem; font-weight: 500;
-    }
+    .tab-buttons button { background-color: transparent !important; color: #37474F !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; font-size: 1.1rem; font-weight: 500; }
     .tab-buttons button.selected { color: #d81b60 !important; border-bottom-color: #d81b60 !important; }
     
     /* --- Humanizer Tab Styles --- */
-    #humanizer_input, #humanizer_output {
-        border: 2px solid #E0E0E0; border-radius: 12px;
-        background: #fff; min-height: 45vh; color: #263238; font-size: 16px;
-    }
-    #humanize_btn {
-        background: linear-gradient(45deg, #F06292, #4FC3F7); color: white;
-        padding: 15px 24px; border-radius: 9999px; font-size: 1.2rem;
-        transition: all 0.3s ease; border: none;
-    }
+    #humanizer_input, #humanizer_output { border: 2px solid #E0E0E0; border-radius: 12px; background: #fff; min-height: 45vh; color: #263238; font-size: 16px; }
+    #humanize_btn { background: linear-gradient(45deg, #F06292, #4FC3F7); color: white; padding: 15px 24px; border-radius: 9999px; font-size: 1.2rem; transition: all 0.3s ease; border: none; }
     #humanize_btn:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); transform: translateY(-3px); }
 
     /* --- Co-Creative Canvas Tab Styles --- */
     #symbiotic_canvas { background: #fff; border-radius: 12px; height: 60vh !important; border: 2px solid #E0E0E0; }
+    #chat_input textarea { border-radius: 9999px !important; border: 2px solid #E0E0E0; }
+    #compose_btn { background: linear-gradient(45deg, #4FC3F7, #F06292); border: none; }
+    #compose_btn:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: translateY(-2px); }
+
+    /* === FIX 3.0 FOR TEXT LEGIBILITY (DEFINITIVE) === */
+    /* --- Styling for the Chat Bubbles --- */
+    #symbiotic_canvas .user, #symbiotic_canvas .bot { border-radius: 18px !important; padding: 12px 16px !important; }
     
-    /* === FIX 2.0 FOR TEXT LEGIBILITY (AGGRESSIVE) === */
-    #symbiotic_canvas .message-wrap { padding: 4px !important; }
-    #symbiotic_canvas .user, #symbiotic_canvas .bot {
-        padding: 12px 16px !important;
-        border-radius: 18px !important;
-        font-size: 16px !important;
-        line-height: 1.5 !important;
-    }
-    #symbiotic_canvas .user {
-        background-color: #F3F4F6 !important; /* Neutral light grey for user */
-        color: #111827 !important; /* Dark charcoal text for user */
-    }
+    /* --- User's Bubble --- */
+    #symbiotic_canvas .user { background-color: #F3F4F6 !important; }
+    #symbiotic_canvas .user p { color: #111827 !important; font-size: 16px !important; line-height: 1.5 !important; }
+
+    /* --- AI's Bubble (The Fix) --- */
     #symbiotic_canvas .bot {
-        background-color: #EFF6FF !important; /* Very light, clean blue background */
-        color: #1E3A8A !important; /* VERY DARK blue text for maximum contrast */
-        font-weight: 500 !important;
+        background-color: #EFF6FF !important; /* A very light, clean blue */
         border: 1px solid #DBEAFE !important;
         animation: bloom 0.5s ease-out;
     }
+    /* THIS IS THE CRITICAL FIX: Targeting the <p> tag inside the bot bubble */
+    #symbiotic_canvas .bot p {
+        color: #1E3A8A !important; /* A very dark, legible navy blue */
+        font-weight: 500 !important;
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+    }
     @keyframes bloom { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
     
-    #chat_input textarea { border-radius: 9999px !important; border: 2px solid #E0E0E0; }
-    #compose_btn { background: linear-gradient(45deg, #4FC3F7, #F06292); border: none; }
-    #compose_btn:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: translateY(-2px); }
-
     /* --- Responsive Fix for Mobile --- */
     @media (max-width: 768px) {
         #header h1 { font-size: 2rem; }
@@ -155,7 +142,6 @@ def create_interface():
 
             with gr.Tabs() as tabs:
                 with gr.Tab("Humanizer", id="humanizer_tab"):
-                    # ... Humanizer tab layout ...
                     with gr.Column(variant="panel"):
                         gr.Markdown("### Transform Existing AI Text")
                         with gr.Row():
@@ -168,7 +154,6 @@ def create_interface():
                         gr.Examples([["The system's analysis concluded optimal parameters were achieved."]], inputs=[input_text_humanizer], label="Try an Example")
 
                 with gr.Tab("Co-Creative Canvas", id="canvas_tab"):
-                    # ... Canvas tab layout ...
                     with gr.Row(equal_height=False):
                         with gr.Column(scale=3):
                             chatbot = gr.Chatbot([], label="Symbiotic Canvas", elem_id="symbiotic_canvas", bubble_full_width=True, avatar_images=(None, "https://i.imgur.com/Q6Zz3Jz.png"))