Refactor CSS styles in app.py for the Clinical Trial Matching Chatbot, simplifying the design and enhancing visual consistency with a focus on reliable styling for workflow cards and chat interface elements.

app.py

@@ -372,178 +372,40 @@ if __name__ == "__main__":
     def chat_function(message, history):
         return get_clinical_trials(message)
     
-    # Create optimized chatbot with light theme and fixed CSS
-    with gr.Blocks(theme=gr.themes.Soft(), css="""
-        /* Global font and layout fixes */
-        * {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-            font-size: 14px !important;
-        }
-        
-        /* Fix page cutoff issues by removing problematic positioning */
-        html, body {
-            margin: 0 !important;
-            padding: 0 !important;
-            overflow-x: hidden !important;
-        }
-        
-        .gradio-container {
-            margin: 0 !important;
-            padding: 20px !important;
-            max-width: none !important;
-        }
-        
-        /* Header styles */
-        h1, h2, h3, h4, h5, h6 {
-            font-size: 16px !important;
-        }
-        
-        .main-title {
-            text-align: center;
-            color: #1e40af;
-            margin-bottom: 20px;
-            font-weight: bold;
-            font-size: 28px !important;
-            background: linear-gradient(135deg, #3b82f6, #1e40af);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        
-        .section-header {
-            color: #1f2937;
-            border-bottom: 2px solid #3b82f6;
-            padding-bottom: 8px;
-            margin-top: 25px;
-            margin-bottom: 15px;
-            background: linear-gradient(135deg, #eff6ff, #e0f2fe);
-            padding: 12px;
-            border-radius: 8px;
-            font-size: 18px !important;
-            font-weight: 600;
-        }
-        
-        .info-box {
-            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
-            border: 1px solid #3b82f6;
-            border-radius: 10px;
-            padding: 18px;
-            margin: 15px 0;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        }
-        
-        /* Pastel workflow step cards */
-        .workflow-step-1 {
-            background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
-            border: 2px solid #f59e0b;
-            border-radius: 16px;
-            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
-            padding: 20px 15px;
-            text-align: center;
-            margin: 10px;
-            transition: transform 0.2s ease;
-        }
-        
-        .workflow-step-2 {
-            background: linear-gradient(135deg, #ddd6fe, #c4b5fd) !important;
-            border: 2px solid #8b5cf6;
-            border-radius: 16px;
-            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
-            padding: 20px 15px;
-            text-align: center;
-            margin: 10px;
-            transition: transform 0.2s ease;
-        }
-        
-        .workflow-step-3 {
-            background: linear-gradient(135deg, #bfdbfe, #93c5fd) !important;
+    # Create optimized chatbot with simple, reliable CSS
+    with gr.Blocks(theme=gr.themes.Soft()) as demo:
+        # Add simple CSS for styling
+        gr.HTML("""
+        <style>
+        .workflow-card {
+            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
             border: 2px solid #3b82f6;
-            border-radius: 16px;
-            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-            padding: 20px 15px;
-            text-align: center;
-            margin: 10px;
-            transition: transform 0.2s ease;
-        }
-        
-        .workflow-step-4 {
-            background: linear-gradient(135deg, #bbf7d0, #86efac) !important;
-            border: 2px solid #10b981;
-            border-radius: 16px;
-            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
-            padding: 20px 15px;
-            text-align: center;
-            margin: 10px;
-            transition: transform 0.2s ease;
-        }
-        
-        .workflow-step-5 {
-            background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
-            border: 2px solid #ef4444;
-            border-radius: 16px;
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-            padding: 20px 15px;
-            text-align: center;
-            margin: 10px;
-            transition: transform 0.2s ease;
-        }
-        
-        .workflow-step-1:hover, .workflow-step-2:hover, .workflow-step-3:hover, 
-        .workflow-step-4:hover, .workflow-step-5:hover {
-            transform: translateY(-2px);
-        }
-        
-        .workflow-icon {
-            font-size: 2.5em !important;
-            margin-bottom: 10px;
-        }
-        
-        .workflow-title {
-            font-weight: bold !important;
-            font-size: 14px !important;
-            margin: 8px 0 4px 0;
-            color: #1f2937;
-        }
-        
-        .workflow-desc {
-            color: #4b5563 !important;
-            font-size: 12px !important;
-            line-height: 1.4;
-        }
-        
-        /* Chat interface styling */
-        .chatbot {
-            min-height: 500px !important;
             border-radius: 12px;
-            border: 1px solid #e5e7eb;
-        }
-        
-        /* Message styling */
-        .message {
-            background-color: #f0f9ff !important;
-            border-left: 4px solid #3b82f6 !important;
-            padding: 12px !important;
-            margin: 8px 0 !important;
-            border-radius: 8px !important;
-        }
-        
-        .user {
-            background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
-            border-left: 4px solid #f59e0b !important;
+            padding: 15px;
+            margin: 8px;
+            text-align: center;
+            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
         }
-    """) as demo:
-        gr.Markdown("# 🏥 Clinical Trial Matching Chatbot", elem_classes=["main-title"])
-        gr.Markdown("**AI-Powered Clinical Trial Matching with GPU acceleration and parallel processing.** Describe a patient's condition to find matching trials quickly.", elem_classes=["info-box"])
-        
-        gr.Markdown("## About the Tool", elem_classes=["section-header"])
+        .workflow-card-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
+        .workflow-card-2 { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); border-color: #8b5cf6; }
+        .workflow-card-3 { background: linear-gradient(135deg, #bfdbfe, #93c5fd); border-color: #3b82f6; }
+        .workflow-card-4 { background: linear-gradient(135deg, #bbf7d0, #86efac); border-color: #10b981; }
+        .workflow-card-5 { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #ef4444; }
+        </style>
+        """)
+        
+        gr.Markdown("# 🏥 Clinical Trial Matching Chatbot")
+        gr.Markdown("**AI-Powered Clinical Trial Matching with GPU acceleration and parallel processing.** Describe a patient's condition to find matching trials quickly.")
+        
+        gr.Markdown("## About the Tool")
         gr.Markdown("""
         This AI-powered tool is designed to support **Patient Recruitment & Enrollment** by retrieving the most relevant clinical trials based on a given patient case. It is built on top of a large language model fine-tuned on clinical trial metadata, including summaries, inclusion/exclusion criteria, drugs, and target diseases. The dataset includes several actively recruiting Pfizer trials.
-        """, elem_classes=["info-box"])
+        """)
         
-        gr.Markdown("## How It Works", elem_classes=["section-header"])
+        gr.Markdown("## How It Works")
         gr.Markdown("""
         Users input a patient case describing clinical history and findings. The model then identifies and ranks the **top 5 most relevant clinical trials** based on semantic similarity, helping clinicians quickly assess suitable enrollment options.
-        """, elem_classes=["info-box"])
+        """)
         
         # Workflow Steps with Pastel Colors
         workflow_steps = [