UI: pin sidebar styles against prose overrides

app.py

@@ -443,6 +443,18 @@ footer, .built-with, .show-api, .api-docs { display: none !important; }
 #cl-chat .user-row { max-width: 80% !important; }
 #cl-chat .user-row .flex-wrap, #cl-chat .user-row .flex-wrap > .message, #cl-chat .user-row .message .message { max-width: none !important; width: auto !important; }
 @media (max-width: 900px) { #cl-chat .user-row { max-width: 90% !important; } }
+
+/* Gradio's .prose styles win inside gr.HTML on the hosted Space; pin the sidebar/topbar details */
+#cl-side ul.cl-recents { list-style: none !important; padding: 0 !important; margin: 0 !important; }
+#cl-side ul.cl-recents li { margin: 0 !important; padding: 7px 10px !important; list-style: none !important; }
+#cl-side ul.cl-recents li::before, #cl-side ul.cl-recents li::marker { content: none !important; }
+#cl-side .cl-avatar { color: #f5f4ee !important; background: #3d3b36 !important; }
+#cl-side .cl-user { border-top: 1px solid var(--cl-line) !important; }
+#cl-side .cl-nav-item, #cl-side .cl-recents li, #cl-side .cl-user-name, #cl-side .cl-recents-h { color: var(--cl-ink-2) !important; }
+#cl-side .cl-recents-h, #cl-side .cl-user-plan { color: var(--cl-muted) !important; }
+#cl-topbar .cl-plan b { color: var(--cl-accent-2) !important; }
+#cl-topbar .cl-plan, #cl-topbar .cl-plan-note { color: var(--cl-muted) !important; }
+.cl-picker summary { gap: 7px !important; }
 """
 
 THEME = gr.themes.Base(primary_hue="orange", neutral_hue="stone", font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"]).set(