diff --git a/frontend/src/components/editor-ai/EditorAIPanel.tsx b/frontend/src/components/editor-ai/EditorAIPanel.tsx
index 465b682a..5378ccdd 100644
--- a/frontend/src/components/editor-ai/EditorAIPanel.tsx
+++ b/frontend/src/components/editor-ai/EditorAIPanel.tsx
@@ -44,8 +44,17 @@ export function EditorAIPanel({
   const pendingCount = suggestions.filter((s) => s.status === 'pending').length
 
   return (
-    <div className="flex h-full w-[320px] shrink-0 flex-col border-l border-border bg-[rgba(24,26,31,0.55)] backdrop-blur-[var(--glass-blur)]">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2.5 shrink-0">
+    <div
+      className="fixed right-0 top-0 bottom-0 z-50 flex flex-col border-l"
+      style={{
+        width: '380px',
+        background: 'rgba(16, 17, 20, 0.95)',
+        backdropFilter: 'var(--glass-blur)',
+        WebkitBackdropFilter: 'var(--glass-blur)',
+        borderColor: 'var(--glass-border)',
+      }}
+    >
+      <div className="flex items-center justify-between border-b px-3 py-2.5 shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <div className="flex items-center gap-2">
           <Sparkles className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium text-foreground">AI Assist</span>
@@ -58,7 +67,7 @@ export function EditorAIPanel({
         </button>
       </div>
       <NodeSummary node={focalNode} flowName={flowName} flowType={flowType} nodeCount={nodeCount} />
-      <div className="flex border-b border-border shrink-0">
+      <div className="flex border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={() => setActiveTab('chat')}
           className={cn(
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 3f5ac544..e4fbb327 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -180,9 +180,7 @@ export function ProceduralEditorPage() {
   }
 
   return (
-    <div className="flex h-full overflow-hidden">
-      {/* Main content column */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+    <div className={cn('flex h-full flex-col overflow-hidden transition-[padding] duration-200', editorAI.isOpen && 'pr-[380px]')}>
       {/* Toolbar — sticky */}
       <div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-3">
@@ -321,7 +319,6 @@ export function ProceduralEditorPage() {
       <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
         <StepList onStepContextMenu={editorAI.openContextMenu} />
       </div>
-      </div>{/* end main content column */}
 
       <EditorAIPanel
         isOpen={editorAI.isOpen}
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index f9c7450e..edfaebfc 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -522,9 +522,7 @@ export function TreeEditorPage() {
   }
 
   return (
-    <div className="flex h-full overflow-hidden">
-      {/* Main content column */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+    <div className={cn('flex h-full flex-col overflow-hidden transition-[padding] duration-200', editorAI.isOpen && 'pr-[380px]')}>
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
@@ -877,7 +875,6 @@ export function TreeEditorPage() {
           onClose={() => setShowExportModal(false)}
         />
       )}
-      </div>{/* end main content column */}
 
       <EditorAIPanel
         isOpen={editorAI.isOpen}