frontend/src/components/flowpilot/FlowPilotMessageBar.tsx

@@ -40,13 +40,20 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
   }, [])
 
   return (
-    <div className="px-3 sm:px-4 lg:px-5 pb-3">
-      <div className={cn(
-        'flex items-end gap-2 rounded-xl border bg-card p-2 transition-colors',
+    <div
+      className="fixed bottom-[60px] right-0 z-40 px-3 sm:px-4 lg:px-5 pb-2"
+      style={{ left: 'var(--sidebar-w, 0px)' }}
+    >
+      <div className="mx-auto max-w-2xl lg:pr-72">
+        <div
+          className={cn(
+            'flex items-end gap-2 rounded-xl border p-2 transition-colors',
             isDisabled
               ? 'border-border/50 opacity-50'
               : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
-      )}>
+          )}
+          style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)' }}
+        >
           <textarea
             ref={textareaRef}
             value={message}
@@ -60,6 +67,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
           <button
             onClick={handleSubmit}
             disabled={isDisabled || !message.trim()}
+            aria-label="Send message"
             className={cn(
               'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all',
               message.trim() && !isDisabled
@@ -71,5 +79,6 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
           </button>
         </div>
       </div>
+    </div>
   )
 }

frontend/src/components/flowpilot/FlowPilotSession.tsx

@@ -194,8 +194,8 @@ export function FlowPilotSession({
 
       {/* Main content area: conversation + sidebar */}
       <div className="flex flex-1 min-h-0">
-        {/* Conversation column — pb-20 provides clearance for the fixed action bar */}
-        <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-20 sm:p-4 sm:pb-20 lg:p-6 lg:pb-20">
+        {/* Conversation column — pb-32 provides clearance for the fixed message bar + action bar */}
+        <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-32 sm:p-4 sm:pb-32 lg:p-6 lg:pb-32">
           <div className="mx-auto max-w-2xl space-y-3">
             {allSteps.map((step) => (
               <FlowPilotStepCard