feat: update Sidebar with glassmorphism backdrop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/layout/Sidebar.tsx

@@ -63,7 +63,13 @@ export function Sidebar() {
 
   return (
     <nav
-      className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]"
+      className="sidebar flex flex-col border-r"
+      style={{
+        background: 'rgba(16, 17, 20, 0.5)',
+        backdropFilter: 'var(--glass-blur-light)',
+        WebkitBackdropFilter: 'var(--glass-blur-light)',
+        borderColor: 'var(--glass-border)',
+      }}
       onWheel={handleSidebarWheel}
     >
       {sidebarCollapsed ? (
@@ -86,7 +92,7 @@ export function Sidebar() {
           {/* Pinned Flows */}
           <PinnedFlowsSection flows={pinnedItems} onUnpin={unpinFlow} />
 
-          <div className="border-b border-[hsl(var(--border-subtle))]" />
+          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />
 
           {/* Primary Navigation */}
           <div className="px-3 py-2 space-y-0.5">
@@ -117,10 +123,13 @@ export function Sidebar() {
       <div className="flex-1" />
 
       {/* Footer */}
-      <div className={cn(
+      <div
-        "border-t border-[hsl(var(--border-subtle))]",
+        className={cn(
-        sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
+          "border-t",
-      )}>
+          sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
+        )}
+        style={{ borderColor: 'var(--glass-border)' }}
+      >
         {!sidebarCollapsed && (
           <>
             <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" />