diff --git a/desktop/src/features/sidebar/ui/SidebarDnd.tsx b/desktop/src/features/sidebar/ui/SidebarDnd.tsx
index 3ed92e65d6..41cc6fe669 100644
--- a/desktop/src/features/sidebar/ui/SidebarDnd.tsx
+++ b/desktop/src/features/sidebar/ui/SidebarDnd.tsx
@@ -147,7 +147,10 @@ export function SortableSectionShell({
 
 export function DragOverlayChannel({ name }: { name: string }) {
   return (
-    <div className="flex cursor-grabbing items-center gap-2 rounded-md bg-sidebar px-2 py-1.5 text-sm text-sidebar-foreground opacity-90 shadow-lg ring-1 ring-sidebar-border">
+    <div
+      data-buzz-flat
+      className="flex cursor-grabbing items-center gap-2 rounded-md bg-sidebar px-2 py-1.5 text-sm text-sidebar-foreground opacity-90 shadow-lg ring-1 ring-sidebar-border"
+    >
       <Hash className="h-4 w-4 shrink-0 text-sidebar-foreground/60" />
       <span className="truncate">{name}</span>
     </div>
@@ -156,7 +159,10 @@ export function DragOverlayChannel({ name }: { name: string }) {
 
 export function DragOverlaySection({ name }: { name: string }) {
   return (
-    <div className="flex cursor-grabbing items-center gap-1 rounded-md bg-sidebar px-2 py-1 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60 opacity-90 shadow-lg ring-1 ring-sidebar-border">
+    <div
+      data-buzz-flat
+      className="flex cursor-grabbing items-center gap-1 rounded-md bg-sidebar px-2 py-1 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60 opacity-90 shadow-lg ring-1 ring-sidebar-border"
+    >
       <span>{name}</span>
     </div>
   );
diff --git a/desktop/src/shared/styles/globals/theme.css b/desktop/src/shared/styles/globals/theme.css
index 976fbee901..7411e84bd7 100644
--- a/desktop/src/shared/styles/globals/theme.css
+++ b/desktop/src/shared/styles/globals/theme.css
@@ -176,13 +176,21 @@
  * lives in Tailwind's `utilities` layer, and unlayered declarations win over
  * any layered ones, so this reliably overrides it without an `!important`.
  *
- * The gradient is applied to every `bg-sidebar` canvas surface (the top
- * chrome bar, the sidebar column, and the inset margin behind the white
- * content card). `background-attachment: fixed` anchors the gradient to the
- * viewport so these separate surfaces read as one continuous gradient rather
- * than each restarting the ramp. `background-color` is cleared so the grey
+ * The gradient is applied to every `bg-sidebar` canvas surface INSIDE the app
+ * shell (`.group\/sidebar-wrapper` — the top chrome bar, the sidebar column,
+ * and the inset margin behind the white content card). Scoping to the shell
+ * wrapper keeps the branding on the app chrome and off unrelated `bg-sidebar`
+ * consumers rendered in portals outside the shell (e.g. the persona catalog
+ * dialog). `background-attachment: fixed` anchors the gradient to the viewport
+ * so these separate surfaces read as one continuous gradient rather than each
+ * restarting the ramp. `background-color` is cleared so the grey
  * `--sidebar-background` never shows through.
  *
+ * Small transient `bg-sidebar` chips inside the shell that are NOT canvas
+ * surfaces (the drag-overlay pills) opt out via `[data-buzz-flat]` — a
+ * viewport-fixed gradient behind a small floating chip would show an arbitrary
+ * slice of the ramp.
+ *
  * Item hover/active states use `bg-sidebar-accent` / `bg-sidebar-active`
  * (distinct tokens) and are intentionally left untouched.
  */
@@ -202,7 +210,9 @@
   --buzz-gradient-bottom: #1b2530;
 }
 
-:root[data-buzz-sidebar] .bg-sidebar {
+:root[data-buzz-sidebar]
+  .group\/sidebar-wrapper
+  .bg-sidebar:not([data-buzz-flat]) {
   background-color: transparent;
   background-image: linear-gradient(
     to bottom,