Update CrossTalk AI to vertical clean layout

app.py

@@ -259,6 +259,7 @@ def safe_search(query):
 
 
 
+
 custom_css = """
 .gradio-container {
     background: #0B0F19 !important;
@@ -332,6 +333,7 @@ custom_css = """
     border-radius: 18px !important;
     padding: 22px !important;
     box-shadow: 0 16px 38px rgba(0,0,0,0.22);
+    margin-bottom: 18px !important;
 }
 
 .search-card {
@@ -344,16 +346,16 @@ custom_css = """
 
 .section-title {
     color: #F8FAFC;
-    font-size: 19px;
+    font-size: 22px;
     font-weight: 800;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
 }
 
 .section-subtitle {
     color: #94A3B8;
-    font-size: 13px;
-    line-height: 1.5;
-    margin-bottom: 16px;
+    font-size: 14px;
+    line-height: 1.55;
+    margin-bottom: 18px;
 }
 
 textarea, input {
@@ -375,7 +377,7 @@ button.search-button {
     border-radius: 12px !important;
     color: #FFFFFF !important;
     font-weight: 800 !important;
-    min-height: 46px !important;
+    min-height: 48px !important;
 }
 
 button.search-button:hover {
@@ -388,7 +390,7 @@ button.clear-button {
     border-radius: 12px !important;
     color: #E5E7EB !important;
     font-weight: 750 !important;
-    min-height: 46px !important;
+    min-height: 48px !important;
 }
 
 .status-panel textarea {
@@ -423,7 +425,12 @@ button.clear-button {
 }
 
 #examples-block {
-    margin-top: 12px;
+    margin-top: 14px;
+}
+
+.input-wide {
+    margin-top: 8px;
+    margin-bottom: 14px;
 }
 
 @media (max-width: 900px) {
@@ -480,73 +487,75 @@ with gr.Blocks(
             """
         )
 
-        with gr.Row(equal_height=False):
-            with gr.Column(scale=5, elem_classes=["main-card", "search-card"]):
-                gr.HTML(
-                    """
-                    <div class="section-title">Search input</div>
-                    <div class="section-subtitle">
-                        Enter an ethnic source word. Exact and base-form matches are treated as verified dictionary outputs.
-                    </div>
-                    """
-                )
-
-                query = gr.Textbox(
-                    label="Source word",
-                    placeholder="Example: kəkhyáŋ, Hula, Aina, aam, bajaoo",
-                    lines=1
-                )
-
-                with gr.Row():
-                    clear_btn = gr.Button("Clear", elem_classes=["clear-button"])
-                    submit_btn = gr.Button("Search", elem_classes=["search-button"])
-
-                gr.Examples(
-                    examples=[
-                        ["kəkhyáŋ"],
-                        ["Hula"],
-                        ["Aina"],
-                        ["aam"],
-                        ["bajaoo"],
-                        ["unknown tribal word"]
-                    ],
-                    inputs=query,
-                    label="Examples",
-                    elem_id="examples-block"
-                )
-
-            with gr.Column(scale=7, elem_classes=["main-card", "output-card"]):
-                gr.HTML(
-                    """
-                    <div class="section-title">Retrieval output</div>
-                    <div class="section-subtitle">
-                        The system returns verified dictionary matches first. Semantic fallback appears only when no verified match is found.
-                    </div>
-                    """
-                )
-
-                status = gr.Textbox(
-                    label="System status",
-                    lines=1,
-                    elem_classes=["status-panel"],
-                    value="Ready."
-                )
-
-                summary = gr.Markdown(
-                    value="""
-                    <div class="result-note">
-                    Enter a source word and click Search. Results will appear below.
-                    </div>
-                    """
-                )
-
-                results = gr.Dataframe(
-                    label="Results table",
-                    value=EMPTY_RESULTS,
-                    interactive=False,
-                    wrap=True,
-                    max_height=420
-                )
+        # SEARCH SECTION - FULL WIDTH
+        with gr.Column(elem_classes=["main-card", "search-card"]):
+            gr.HTML(
+                """
+                <div class="section-title">Search input</div>
+                <div class="section-subtitle">
+                    Enter an ethnic source word. Exact and base-form matches are treated as verified dictionary outputs.
+                </div>
+                """
+            )
+
+            query = gr.Textbox(
+                label="Source word",
+                placeholder="Example: kəkhyáŋ, Hula, Aina, aam, bajaoo",
+                lines=1,
+                elem_classes=["input-wide"]
+            )
+
+            with gr.Row():
+                clear_btn = gr.Button("Clear", elem_classes=["clear-button"])
+                submit_btn = gr.Button("Search", elem_classes=["search-button"])
+
+            gr.Examples(
+                examples=[
+                    ["kəkhyáŋ"],
+                    ["Hula"],
+                    ["Aina"],
+                    ["aam"],
+                    ["bajaoo"],
+                    ["unknown tribal word"]
+                ],
+                inputs=query,
+                label="Examples",
+                elem_id="examples-block"
+            )
+
+        # OUTPUT SECTION - BELOW SEARCH
+        with gr.Column(elem_classes=["main-card", "output-card"]):
+            gr.HTML(
+                """
+                <div class="section-title">Retrieval output</div>
+                <div class="section-subtitle">
+                    The system returns verified dictionary matches first. Semantic fallback appears only when no verified match is found.
+                </div>
+                """
+            )
+
+            status = gr.Textbox(
+                label="System status",
+                lines=1,
+                elem_classes=["status-panel"],
+                value="Ready."
+            )
+
+            summary = gr.Markdown(
+                value="""
+                <div class="result-note">
+                Enter a source word and click Search. Results will appear below.
+                </div>
+                """
+            )
+
+            results = gr.Dataframe(
+                label="Results table",
+                value=EMPTY_RESULTS,
+                interactive=False,
+                wrap=True,
+                max_height=460
+            )
 
         gr.HTML(
             """