diff --git a/apps/desktop/src/components/chat/expandable-block.tsx b/apps/desktop/src/components/chat/expandable-block.tsx
index f4a8e1965298..7cd6459db30e 100644
--- a/apps/desktop/src/components/chat/expandable-block.tsx
+++ b/apps/desktop/src/components/chat/expandable-block.tsx
@@ -44,7 +44,7 @@ export function ExpandableBlock({ children, className }: ExpandableBlockProps) {
         // both sideways scrolling and text selection. Keep the fade
         // `pointer-events-none` and pin the only clickable target — a compact
         // toggle — to the right edge, clear of the draggable scrollbar track.
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-7 justify-end bg-linear-to-t from-(--ui-chat-surface-background) to-transparent">
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-7 justify-end bg-linear-to-t from-[var(--expandable-fade-from,var(--ui-chat-surface-background))] to-transparent">
           <button
             aria-expanded={expanded}
             aria-label={expanded ? 'Collapse' : 'Expand'}