Refine demo layout and collapse controls

app.py

@@ -332,7 +332,7 @@ with gr.Blocks(title="Ember · North ML") as demo:
 		with gr.Column(scale=3, elem_id="chat-column"):
 			gr.Markdown("# What can I help you explore?\nAsk Aurora a question or choose a prompt below.", elem_id="hero")
 			chatbot = gr.Chatbot(
-				height=560,
+					height=470,
 				show_label=False,
 				placeholder=CHAT_PLACEHOLDER,
 				elem_id="chatbot",
@@ -348,11 +348,11 @@ with gr.Blocks(title="Ember · North ML") as demo:
 				label="Try a prompt",
 				elem_id="prompt-starters",
 			)
-		with gr.Column(scale=1, min_width=220, elem_id="settings-panel"):
-			gr.Markdown("### Generation", elem_id="settings-title")
-			max_new_tokens = gr.Slider(minimum=32, maximum=192, value=DEFAULT_MAX_NEW, step=16, label="Response length")
-			temperature = gr.Slider(minimum=0, maximum=0.8, value=0, step=0.05, label="Temperature", info="0 keeps replies consistent.")
-			gr.Markdown("### Runtime\n`Aurora Proelia · 207M`\n\nCPU inference is intentionally slower on the first request while the model loads.", elem_classes=["settings-help"])
+			with gr.Accordion("Generation settings", open=False, elem_id="generation-panel"):
+				with gr.Row(elem_id="generation-row"):
+					max_new_tokens = gr.Slider(minimum=32, maximum=192, value=DEFAULT_MAX_NEW, step=16, label="Response length")
+					temperature = gr.Slider(minimum=0, maximum=0.8, value=0, step=0.05, label="Temperature", info="0 keeps replies consistent.")
+				gr.Markdown("Aurora Proelia · 207M runs on CPU. The first response may take longer while the model loads.", elem_classes=["settings-help"])
 
 		submit.click(chat, inputs=[message, chatbot, max_new_tokens, temperature], outputs=chatbot, api_name="chat", concurrency_limit=1)
 		message.submit(chat, inputs=[message, chatbot, max_new_tokens, temperature], outputs=chatbot, api_name="chat_submit", concurrency_limit=1)
@@ -375,34 +375,34 @@ if __name__ == "__main__":
 		.cpu-pill { display: flex; gap: 7px; align-items: center; }
 		.status-dot { width: 7px; height: 7px; border-radius: 99px; background: #22c55e; box-shadow: 0 0 10px #86efac; }
 		#app-shell { gap: 0 !important; min-height: calc(100vh - 76px); }
-		#sidebar, #settings-panel { background: var(--panel); border: 0; padding: 30px 25px; min-height: calc(100vh - 76px); }
+		#sidebar { background: var(--panel); border: 0; padding: 30px 25px; min-height: calc(100vh - 76px); }
 		#sidebar { border-right: 1px solid var(--line); }
-		#settings-panel { border-left: 1px solid var(--line); }
 		#new-chat { border: 1px solid #dce3ee !important; border-radius: 11px !important; color: #1d293d !important; background: #fff !important; box-shadow: 0 2px 8px rgba(20,35,60,.05); }
 		#model-card { margin-top: 32px; padding: 18px; border-radius: 15px; background: linear-gradient(145deg, #eef5ff, #f8fbff); border: 1px solid #dbe8fb; }
 		#model-card h3 { margin-top: 0; color: #1e4da1; }
 		.sidebar-copy, .settings-help { color: var(--muted); font-size: 12px; line-height: 1.7; }
 		.sidebar-footer { position: absolute; bottom: 22px; font-size: 12px; }
 		.sidebar-footer a { color: #718096; text-decoration: none; }
-		#chat-column { padding: 52px clamp(22px, 5vw, 82px) 32px; max-width: 980px; margin: 0 auto; }
+		#chat-column { padding: 38px clamp(22px, 5vw, 82px) 32px; max-width: 980px; margin: 0 auto; }
 		#hero { text-align: center; margin: 0 auto 24px; max-width: 640px; }
 		#hero h1 { color: #18243a; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.055em; line-height: 1.1; }
 		#hero p { color: var(--muted); }
 		#chatbot { background: transparent !important; box-shadow: none !important; border: 0 !important; }
 		#chatbot .message { border-radius: 17px !important; border: 1px solid var(--line) !important; }
-		#composer { margin-top: 12px; }
+		#composer { margin-top: 8px; }
 		#composer textarea { background: #fff !important; border: 1px solid #dbe2ed !important; border-radius: 14px !important; padding: 15px 16px !important; min-height: 56px !important; box-shadow: 0 5px 20px rgba(33,52,84,.06); }
 		#composer-actions { margin-top: 8px; justify-content: flex-end; }
 		#send-button { background: var(--ember) !important; border: 0 !important; border-radius: 10px !important; }
 		#clear-button { background: #fff !important; border: 1px solid #dbe2ed !important; border-radius: 10px !important; color: #34445c !important; }
-		#prompt-starters { margin-top: 22px; }
+		#generation-panel { margin-top: 18px; border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; }
+		#generation-row { gap: 18px; }
+		#prompt-starters { margin-top: 18px; }
 		#prompt-starters .examples-holder { gap: 8px; }
 		#prompt-starters button { border: 1px solid #dbe3ef !important; background: #fff !important; color: #44546b !important; border-radius: 999px !important; }
-		.empty-chat { text-align: center; color: #7a879b; padding-top: 160px; }
+		.empty-chat { text-align: center; color: #7a879b; padding-top: 95px; }
 		.empty-chat img { display: block; width: 54px; height: 54px; object-fit: contain; margin: 0 auto 13px; }
 		.empty-chat small { display: block; margin-top: 8px; color: #9aa6b8; }
-		#settings-panel .block { border-color: var(--line) !important; }
 		footer { display: none !important; }
-		@media (max-width: 900px) { #sidebar, #settings-panel { min-height: auto; border: 0; } #settings-panel { display: none; } #chat-column { padding: 28px 16px; } .topbar { padding: 0 16px; } .topbar-actions a { display: none; } }
+		@media (max-width: 900px) { #sidebar { min-height: auto; border: 0; } #chat-column { padding: 28px 16px; } .topbar { padding: 0 16px; } .topbar-actions a { display: none; } }
         """,
     )