diff --git a/apps/fabro-web/app/app.css b/apps/fabro-web/app/app.css
index 451408606..eee37eb3e 100644
--- a/apps/fabro-web/app/app.css
+++ b/apps/fabro-web/app/app.css
@@ -227,6 +227,13 @@
     min-width: 0;
     overflow-x: hidden;
   }
+  /* Give user message bubbles a lighter, solid surface so they read as raised
+   * cards. The default muted bubble color (panel-alt) is nearly identical to
+   * the translucent `bg-panel/40` sidebar once composited over the page, so
+   * bubbles visually disappeared into the column. */
+  .ask-fabro-sidebar .aui-user-message-content {
+    background-color: var(--color-panel);
+  }
   /* Inset the assistant message content from the column's right edge so the
    * code block (dark pre box) has visible right margin and doesn't appear to
    * bleed against the sidebar edge when its content overflows. */
diff --git a/apps/fabro-web/app/components/chats/sidebar-composer.tsx b/apps/fabro-web/app/components/chats/sidebar-composer.tsx
index ff345ad72..fbb2338ab 100644
--- a/apps/fabro-web/app/components/chats/sidebar-composer.tsx
+++ b/apps/fabro-web/app/components/chats/sidebar-composer.tsx
@@ -9,7 +9,7 @@ import { StopIcon } from "@heroicons/react/24/outline";
  */
 export default function SidebarComposer() {
   return (
-    <ComposerPrimitive.Root className="m-3 flex w-auto items-end gap-2 rounded-2xl bg-panel-alt/80 px-3 py-2 shadow-md shadow-black/30 ring-1 ring-line-strong backdrop-blur-sm focus-within:ring-teal-500/40">
+    <ComposerPrimitive.Root className="my-3 flex w-auto items-end gap-2 rounded-2xl bg-panel-alt/80 px-3 py-2 shadow-md shadow-black/30 ring-1 ring-line-strong backdrop-blur-sm focus-within:ring-teal-500/40">
       <ComposerPrimitive.Input
         rows={1}
         autoFocus