fix: AI Copilot panel as in-flow flex sibling in session navigation pages

Changed CopilotPanel from fixed overlay to flex layout sibling so it
pushes main content instead of covering it during active sessions.

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

frontend/src/components/copilot/CopilotPanel.tsx

@@ -88,9 +88,9 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
 
   return (
     <div
-      className="fixed right-0 top-0 bottom-0 z-50 flex flex-col border-l"
+      className="flex flex-col border-l shrink-0"
       style={{
-        width: '400px',
+        width: '380px',
         background: 'rgba(16, 17, 20, 0.95)',
         backdropFilter: 'var(--glass-blur)',
         WebkitBackdropFilter: 'var(--glass-blur)',

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -599,7 +599,7 @@ export function ProceduralNavigationPage() {
           )}
         </div>
 
-        {/* Right panel - step detail */}
+        {/* Right panel - step detail + copilot */}
         <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain p-4 sm:p-6">
           {currentStep && (
             <StepDetail
@@ -636,6 +636,17 @@ export function ProceduralNavigationPage() {
             </div>
           )}
         </div>
+
+        {/* AI Copilot - in-flow panel */}
+        {treeId && copilotOpen && (
+          <CopilotPanel
+            isOpen={copilotOpen}
+            onClose={() => setCopilotOpen(false)}
+            treeId={treeId}
+            sessionId={session?.id}
+            currentNodeId={runtimeSteps[currentStepIndex]?.id}
+          />
+        )}
       </div>
 
       {/* CSAT Modal */}
@@ -708,18 +719,9 @@ export function ProceduralNavigationPage() {
         />
       )}
 
-      {/* AI Copilot */}
+      {/* AI Copilot toggle button */}
       {treeId && (
-        <>
-          <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
-          <CopilotPanel
-            isOpen={copilotOpen}
-            onClose={() => setCopilotOpen(false)}
-            treeId={treeId}
-            sessionId={session?.id}
-            currentNodeId={runtimeSteps[currentStepIndex]?.id}
-          />
-        </>
+        <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
       )}
     </div>
   )

frontend/src/pages/TreeNavigationPage.tsx

@@ -626,9 +626,9 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="h-full">
+    <div className="h-full flex overflow-hidden">
       {/* Main Content */}
-      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
+      <div className={cn('h-full flex-1 min-w-0 overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
@@ -1264,6 +1264,17 @@ export function TreeNavigationPage() {
       </div>
       </div>
 
+      {/* AI Copilot - in-flow panel */}
+      {treeId && copilotOpen && (
+        <CopilotPanel
+          isOpen={copilotOpen}
+          onClose={() => setCopilotOpen(false)}
+          treeId={treeId}
+          sessionId={session?.id}
+          currentNodeId={currentNodeId}
+        />
+      )}
+
       {/* Scratchpad Sidebar */}
       {session && (
         <ScratchpadSidebar
@@ -1274,18 +1285,9 @@ export function TreeNavigationPage() {
         />
       )}
 
-      {/* AI Copilot */}
+      {/* AI Copilot toggle button */}
       {treeId && (
-        <>
-          <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
-          <CopilotPanel
-            isOpen={copilotOpen}
-            onClose={() => setCopilotOpen(false)}
-            treeId={treeId}
-            sessionId={session?.id}
-            currentNodeId={currentNodeId}
-          />
-        </>
+        <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
       )}
     </div>
   )