Apply cleaner palette and move try examples to left panel

app.py

@@ -66,7 +66,8 @@ CUSTOM_CSS = """
 .gradio-container {
   max-width: 1200px !important;
   font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-  background: #ffffff !important;
+  background: #fcfdff !important;
+  color: #0f172a;
 }
 
 .gradio-container * {
@@ -95,12 +96,12 @@ CUSTOM_CSS = """
 
 .banner-logo-image img {
   width: 100%;
-  max-width: 280px;
+  max-width: 360px;
   height: auto;
   object-fit: contain;
-  border-radius: 10px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
+  border-radius: 0;
+  background: transparent;
+  border: none;
 }
 
 .banner-title {
@@ -134,7 +135,7 @@ CUSTOM_CSS = """
 }
 
 .layout-gap {
-  gap: 12px;
+  gap: 18px;
 }
 
 .right-stack > * {
@@ -153,18 +154,35 @@ CUSTOM_CSS = """
   justify-content: center;
   gap: 6px;
   padding: 7px 8px;
-  border: 1px solid #f1f5f9;
-  border-radius: 10px;
+  border: none;
+  border-radius: 8px;
   text-decoration: none !important;
-  color: #334155 !important;
-  background: #ffffff;
+  color: #1e3a8a !important;
+  background: transparent;
   font-weight: 600;
   font-size: 12px;
 }
 
 .icon-link:hover {
-  background: #f8fafc;
-  border-color: #e2e8f0;
+  background: #eef4ff;
+}
+
+.gradio-container .gr-button-primary {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
+  color: white !important;
+  border: none !important;
+}
+
+.gradio-container .gr-button-secondary {
+  background: #eef4ff !important;
+  color: #1e3a8a !important;
+  border: none !important;
+}
+
+.gradio-container .gr-button-stop {
+  background: #fee2e2 !important;
+  color: #991b1b !important;
+  border: none !important;
 }
 
 .gradio-container .gr-group,
@@ -193,6 +211,18 @@ CUSTOM_CSS = """
 .gradio-container textarea,
 .gradio-container input {
   background: #ffffff !important;
+  border-color: #dbe7ff !important;
+}
+
+.gradio-container .gr-markdown a {
+  color: #1e40af !important;
+}
+
+.inline-example-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #475569;
+  margin: 8px 0 2px 0;
 }
 """
 
@@ -504,6 +534,18 @@ with gr.Blocks(
                     stop_btn = gr.Button("Stop", variant="stop", size="lg")
                     clear_btn = gr.Button("Clear", variant="secondary", size="lg")
 
+            with gr.Group(elem_classes="section-card"):
+                gr.HTML('<div class="inline-example-title">Try Examples</div>')
+                gr.Examples(
+                    examples=[
+                        ["Plan a 2-day food + museum itinerary in Tokyo under $250, with trade-offs."],
+                        ["Find 3 open-source coding agents and compare real strengths/limitations."],
+                        ["Explain whether RAG or fine-tuning is better for a legal QA assistant, and why."],
+                    ],
+                    inputs=question,
+                    label="",
+                )
+
             with gr.Group(elem_classes="section-card"):
                 with gr.Tabs():
                     with gr.TabItem("Result"):
@@ -552,18 +594,6 @@ with gr.Blocks(
                     label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
                 )
 
-            with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-title">Recommended Dialogues</div>')
-                gr.Examples(
-                    examples=[
-                        ["Compare RAG and fine-tuning: trade-offs, cost, and when to use each."],
-                        ["Summarize the differences between Qwen2.5, Llama 3.1, and Mistral 7B for agent tasks."],
-                        ["What are the key design patterns for long-context research agents?"],
-                    ],
-                    inputs=question,
-                    label="",
-                )
-
     run_event = run_btn.click(
         fn=run_ui,
         inputs=[question, model, max_turns, max_search_results, temperature],