fix double-box user bubble: Gradio nests .message.user > [data-testid=user]; my selector styled BOTH -> two stacked boxes. Now the OUTER is the single bubble, the INNER is flattened (transparent/no box). Verified via live CSS injection.

app.py

@@ -779,15 +779,21 @@ footer { display: none !important; }                          /* drop the defaul
   border: none !important; line-height: 1.6 !important; padding: 11px 15px !important;
   animation: fadeRise 0.16s ease-out both;                    /* every bubble "arrives" */
 }
-/* USER turn: right-aligned, raised taupe surface with a faint amber top-edge highlight. Identical every time.
-   width:fit-content so the bubble HUGS its text (was stretching to the full 86% with big empty space). */
-#chat .message.user, #chat [data-testid="user"] {
+/* USER turn: ONE bubble. Gradio NESTS .message.user (outer) > [data-testid="user"] (inner); styling BOTH gave
+   a DOUBLE box. So the OUTER .message.user is the single taupe bubble (right-aligned, hugs its text via
+   fit-content + the faint amber top-edge), and the INNER [data-testid="user"] is FLATTENED (transparent, no
+   box/padding) so it just holds the text. */
+#chat .message.user {
   margin-left: auto !important; width: fit-content !important; max-width: 86% !important;
   background: #3A2F27 !important; color: #E8DDD0 !important;
   padding: 9px 14px !important;
   border-radius: 11px !important; border-top: 1px solid rgba(232,147,43,0.40) !important;
   box-shadow: 0 1px 2px rgba(0,0,0,0.30) !important;
 }
+#chat .message.user [data-testid="user"], #chat [data-testid="user"] {
+  background: transparent !important; border: none !important; border-radius: 0 !important;
+  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
+}
 /* tighten the markdown <p> inside the user bubble so a short message isn't a tall box */
 #chat .message.user p, #chat [data-testid="user"] p { margin: 0 !important; }
 #chat .message.user *, #chat [data-testid="user"] * { color: #E8DDD0 !important; }