Restyle app to match OHA branding

app.py

@@ -636,12 +636,17 @@ custom_css = """
 /* --- Global --- */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-    max-width: 1100px !important;
+    max-width: 900px !important;
+    width: 100% !important;
     margin: 0 auto !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
     background: #FFFFFF !important;
     color: #212529 !important;
     font-size: 16px !important;
     line-height: 1.6 !important;
+    min-width: 320px !important;
+    box-sizing: border-box !important;
 }
 
 /* --- CT.GOV Top Bar --- */
@@ -651,7 +656,15 @@ custom_css = """
     font-size: 0.8rem;
     padding: 6px 24px;
     letter-spacing: 0.03em;
-    margin: -16px -16px 0 -16px;
+    margin: -16px -1rem 0 -1rem;
+}
+.ct-gov-bar a {
+    color: #FFFFFF !important;
+    text-decoration: none;
+}
+.ct-gov-bar a:hover {
+    text-decoration: underline;
+    color: #FFFFFF !important;
 }
 .ct-gov-bar span {
     opacity: 0.85;
@@ -662,7 +675,14 @@ custom_css = """
     background: #003DA5;
     color: #FFFFFF;
     padding: 1.25rem 24px;
-    margin: 0 -16px 1.5rem -16px;
+    margin: 0 -1rem 1rem -1rem;
+}
+.oha-header a {
+    color: #FFFFFF !important;
+    text-decoration: none;
+}
+.oha-header a:hover {
+    opacity: 0.9;
 }
 .oha-header h1 {
     color: #FFFFFF !important;
@@ -692,13 +712,12 @@ custom_css = """
     vertical-align: middle;
 }
 
-/* --- Language Toggle --- */
-.lang-toggle {
-    text-align: right;
-    padding-top: 2px;
-}
-.lang-toggle .gr-radio-group, .lang-toggle label {
-    color: #FFFFFF !important;
+/* --- Language Toggle Row --- */
+.lang-row {
+    justify-content: flex-end !important;
+    margin-bottom: 0.5rem !important;
+    min-height: 0 !important;
+    gap: 0 !important;
 }
 
 /* --- Section Cards / Groups --- */
@@ -709,6 +728,46 @@ custom_css = """
     border: 1px solid #E0E0E0 !important;
     box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
     margin-bottom: 1rem !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* --- Prevent streaming reflow --- */
+.results-area {
+    width: 100% !important;
+    min-height: 400px;
+    box-sizing: border-box !important;
+}
+.results-area .prose {
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* --- Collapse empty Gradio wrappers --- */
+.gr-group:empty,
+.gr-block:empty,
+.gr-box:empty,
+.gr-padded:empty {
+    padding: 0 !important;
+    margin: 0 !important;
+    min-height: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+/* Hide Markdown components that have no visible text */
+.empty-md, .empty-md * {
+    padding: 0 !important;
+    margin: 0 !important;
+    min-height: 0 !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    border: none !important;
+}
+/* Chat separator uses HR inside markdown — collapse its wrapper padding */
+.chat-divider {
+    margin: 0.5rem 0 !important;
+    padding: 0 !important;
+    min-height: 0 !important;
 }
 
 /* --- Headings --- */
@@ -872,6 +931,34 @@ hr {
     border: 1px solid #E0E0E0 !important;
     border-radius: 4px !important;
 }
+
+/* --- Mobile Responsive --- */
+@media (max-width: 640px) {
+    .gradio-container {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+    .ct-gov-bar {
+        padding: 6px 12px;
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .oha-header {
+        padding: 1rem 12px;
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .oha-header h1 {
+        font-size: 1.35rem !important;
+    }
+    .gr-group {
+        padding: 1rem !important;
+    }
+    .prompt-pill button {
+        font-size: 0.78rem !important;
+        padding: 0.35rem 0.75rem !important;
+    }
+}
 """
 
 # === GRADIO UI ===
@@ -903,35 +990,32 @@ def create_interface():
         chat_history_state = gr.State([])  # List of {"role":..., "content":...} dicts
         chat_count_state = gr.State(0)     # Message counter for rate limiting
 
-        # CT.GOV top bar (decorative)
+        # CT.GOV top bar (decorative, links to ct.gov)
         gr.HTML(
             '<div class="ct-gov-bar">'
+            '<a href="https://portal.ct.gov" target="_blank" rel="noopener">'
             '<span><strong>CT.GOV</strong> &nbsp;|&nbsp; State of Connecticut</span>'
+            '</a>'
             '</div>'
         )
 
-        # OHA blue header band with language toggle
+        # OHA blue header band (links to OHA homepage)
         gr.HTML(
             '<div class="oha-header">'
-            '<div style="display:flex; justify-content:space-between; align-items:center;">'
-            '<div>'
+            '<a href="https://portal.ct.gov/oha" target="_blank" rel="noopener">'
             '<h1>Office of the Healthcare Advocate<span class="oha-beta">BETA</span></h1>'
             '<div class="oha-subtitle">Hospital Financial Assistance Eligibility Screener</div>'
-            '</div>'
-            '</div>'
+            '</a>'
             '</div>'
         )
 
-        with gr.Row():
-            with gr.Column():
-                pass
-            with gr.Column(scale=0, min_width=160):
-                lang_toggle = gr.Radio(
-                    choices=["English", "Espa\u00f1ol"],
-                    value="English",
-                    label="Language",
-                    container=False
-                )
+        with gr.Row(elem_classes="lang-row"):
+            lang_toggle = gr.Radio(
+                choices=["English", "Espa\u00f1ol"],
+                value="English",
+                label="Language",
+                container=False
+            )
 
         # Step 1: Choose path
         step1 = gr.Group(visible=True)
@@ -988,14 +1072,14 @@ def create_interface():
         # Step 4: Results (with streaming) + follow-up chat
         step4 = gr.Group(visible=False)
         with step4:
-            results_output = gr.Markdown()
+            results_output = gr.Markdown(elem_classes="results-area")
             with gr.Row():
                 restart_btn = gr.Button("Check Another Hospital", variant="secondary")
                 download_btn = gr.Button("Download Results", variant="secondary")
             download_file = gr.File(visible=False, label="Download")
 
             # --- Follow-up chat section ---
-            gr.Markdown("---")
+            gr.HTML('<hr style="border:none; border-top:1px solid #E0E0E0; margin:1.5rem 0 1rem 0;">')
             gr.Markdown("### Follow-Up Questions")
             gr.Markdown("Have additional questions? Ask about eligibility, the application process, required documents, or appeal rights.")