fix: mobile responsiveness improvements for graph and sleep pages

frontend/src/App.css

@@ -610,8 +610,9 @@
   
   .cognitive-container[style] {
     flex: none !important;
-    height: 320px !important;
+    height: auto !important;
     min-height: auto !important;
+    padding: 20px 0 !important;
   }
   
   .activity-feed-wrapper[style] {

frontend/src/components/CognitiveBrainScene.css

@@ -205,6 +205,14 @@
   to { opacity: 0.3; transform: scale(1.05); }
 }
 
+@media (max-width: 768px) {
+  .brain-core {
+    max-width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+}
+
 /* ── Mobile Responsive Overrides for iPhone 14 ── */
 @media (max-width: 480px) {
   .brain-core {

frontend/src/components/DreamSequence.css

@@ -25,7 +25,7 @@
   font-family: var(--font-display), 'Inter', sans-serif;
   font-size: 1.2rem; /* Exact page header font-size as Console */
   font-weight: 700;
-  color: #1a1a1a;
+  color: var(--text-main, #1a1a1a);
   margin: 0;
   letter-spacing: -0.01em;
 }
@@ -79,7 +79,7 @@
   font-family: var(--font-display), 'Inter', sans-serif;
   font-size: 1.15rem; /* Exact block header font-size as Console */
   font-weight: 700;
-  color: #1a1a1a;
+  color: var(--text-main, #1a1a1a);
   margin: 0 0 8px 0;
   letter-spacing: -0.01em;
 }
@@ -517,10 +517,12 @@
 /* ── Mobile Responsive Overrides ── */
 @media (max-width: 1024px) {
   .sleep-page-container {
-    padding: 20px 16px !important;
+    padding: 20px 16px 16px 16px !important;
     min-height: auto !important;
     height: auto !important;
     border-radius: 20px !important;
+    justify-content: flex-start !important;
+    overflow-y: auto !important;
   }
   
   .sleep-page-header, 
@@ -529,7 +531,7 @@
     top: auto !important;
     left: auto !important;
     margin-bottom: 24px !important;
-    text-align: center !important;
+    text-align: left !important;
     width: 100% !important;
   }
   
@@ -575,6 +577,7 @@
     gap: 16px !important;
     margin-top: 32px !important;
     width: 100% !important;
+    margin-bottom: 16px !important;
   }
   
   .sleep-telemetry-card {
@@ -591,4 +594,11 @@
     max-width: 100% !important;
     width: 100% !important;
   }
+  
+  .sleep-trigger-btn {
+    margin: 0 auto !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+  }
 }

frontend/src/components/DreamSequence.jsx

@@ -12,7 +12,7 @@ export function SleepProgress({ phaseIndex, isConsolidating, onStart, summary, v
   return (
     <div className="sleep-page-container fade-in">
       <div className="sleep-page-header">
-        <h2>7. Sleep (Consolidation)</h2>
+        <h2>Sleep (Consolidation)</h2>
       </div>
 
       <div className="sleep-split-layout">

frontend/src/components/KnowledgeGraph.css

@@ -393,6 +393,8 @@
 @media (max-width: 1024px) {
   .graph-stage {
     padding: 0 0 16px 0 !important;
+    height: auto !important;
+    overflow: visible !important;
   }
   
   .graph-toolbar {
@@ -402,16 +404,27 @@
   }
   
   .graph-actions {
-    width: 100% !important;
-    justify-content: flex-start !important;
-    flex-wrap: wrap !important;
+    position: absolute !important;
+    bottom: 20px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    z-index: 100 !important;
+    display: flex !important;
+    justify-content: center !important;
+    background: rgba(18, 18, 18, 0.75) !important;
+    backdrop-filter: blur(20px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 100px !important;
+    padding: 6px 12px !important;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
+    width: auto !important;
   }
   
   .graph-network-container {
     padding-left: 0 !important; /* Remove shifted padding */
     border-radius: 16px !important;
-    height: 460px !important;
-    min-height: 460px !important;
+    height: 600px !important;
+    min-height: 600px !important;
     width: 100% !important;
     flex: none !important;
   }
@@ -420,15 +433,17 @@
     position: relative !important;
     top: auto !important;
     left: auto !important;
-    padding: 16px !important;
+    right: auto !important;
+    padding: 8px !important;
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
-    gap: 16px !important;
+    gap: 8px !important;
   }
   
   .hud-panel {
     width: 100% !important;
     box-sizing: border-box !important;
+    padding: 12px !important;
   }
   
   /* On very small screens stack the HUD panels */

frontend/src/components/KnowledgeGraph.jsx

@@ -43,6 +43,7 @@ function KnowledgeGraph({ refreshTick }) {
   const [dimensions, setDimensions] = useState({ width: 800, height: 500 });
   const [stats, setStats] = useState({ node_count: 0, edge_count: 0, top_entities: [] });
   const [physicsActive, setPhysicsActive] = useState(true);
+  const [hudCollapsed, setHudCollapsed] = useState(false);
   
   const containerRef = useRef(null);
   const fgRef = useRef();
@@ -53,7 +54,9 @@ function KnowledgeGraph({ refreshTick }) {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
         const { width, height } = entry.contentRect;
-        setDimensions({ width: width || 800, height: height || 500 });
+        const isMobile = window.innerWidth < 768;
+        const adjustedHeight = isMobile ? Math.max(height - 100, 300) : height;
+        setDimensions({ width: width || 800, height: adjustedHeight || 500 });
       }
     });
     resizeObserver.observe(containerRef.current);
@@ -129,13 +132,35 @@ function KnowledgeGraph({ refreshTick }) {
     if (fgRef.current) {
       const d3Force = fgRef.current.d3Force;
       if (d3Force) {
-        d3Force('charge').strength(-50);   // Gentle repulsion for an ultra-compact molecular look
-        d3Force('link').distance(30);      // Extremely tight connection paths to pull nodes together
+        d3Force('charge').strength(-20).distanceMax(100);
+        d3Force('link').distance(30);
+        
+        // Custom gravity force to pull unconnected clusters to the upper center
+        d3Force('gravity', (alpha) => {
+          graphData.nodes.forEach(node => {
+            node.vx = (node.vx || 0) + (0 - node.x) * 0.05 * alpha;
+            node.vy = (node.vy || 0) + (150 - node.y) * 0.05 * alpha; // Pull up to Y=150
+            node.vz = (node.vz || 0) + (0 - node.z) * 0.05 * alpha;
+          });
+        });
       }
       
-      // Auto-fit camera with very tight padding to zoom in close and eliminate empty workspace
+      // Auto-fit camera with appropriate padding to ensure complete visibility
       setTimeout(() => {
-        fgRef.current.zoomToFit(800, 20);
+        const padding = window.innerWidth < 768 ? 120 : 20;
+        fgRef.current.zoomToFit(800, padding);
+        
+        // Shift camera down on mobile to pull the graph content up
+        if (window.innerWidth < 768) {
+          setTimeout(() => {
+            const currentPos = fgRef.current.cameraPosition();
+            fgRef.current.cameraPosition(
+              { x: currentPos.x, y: currentPos.y - 100, z: currentPos.z },
+              null,
+              300
+            );
+          }, 900); // Wait for zoomToFit to complete
+        }
       }, 600);
     }
   }, [graphData]);
@@ -265,25 +290,34 @@ function KnowledgeGraph({ refreshTick }) {
         {/* Live Telemetry HUD Overlay */}
         <div className="graph-hud-overlay">
           <div className="hud-panel">
-            <div className="hud-header">
-              <span className="material-icons">analytics</span>
-              <span>Semantic Telemetry</span>
-            </div>
-            <div className="hud-row">
-              <span className="hud-label">Nodes:</span>
-              <span className="hud-value">{dbStatus === 'online' ? stats.node_count : graphData.nodes.length}</span>
-            </div>
-            <div className="hud-row">
-              <span className="hud-label">Synapses:</span>
-              <span className="hud-value">{dbStatus === 'online' ? stats.edge_count : graphData.links.length}</span>
-            </div>
-            <div className="hud-row">
-              <span className="hud-label">Storage:</span>
-              <span className="hud-value status-glow">{dbStatus === 'online' ? 'LTM (Neo4j)' : 'STM (Cache)'}</span>
+            <div className="hud-header" style={{display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center'}}>
+              <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+                <span className="material-icons">analytics</span>
+                <span>Semantic Telemetry</span>
+              </div>
+              <span className="material-icons" style={{cursor: 'pointer', fontSize: '20px', color: '#ff6b35'}} onClick={() => setHudCollapsed(!hudCollapsed)}>
+                {hudCollapsed ? 'expand_more' : 'expand_less'}
+              </span>
             </div>
+            {!hudCollapsed && (
+              <>
+                <div className="hud-row">
+                  <span className="hud-label">Nodes:</span>
+                  <span className="hud-value">{dbStatus === 'online' ? stats.node_count : graphData.nodes.length}</span>
+                </div>
+                <div className="hud-row">
+                  <span className="hud-label">Synapses:</span>
+                  <span className="hud-value">{dbStatus === 'online' ? stats.edge_count : graphData.links.length}</span>
+                </div>
+                <div className="hud-row">
+                  <span className="hud-label">Storage:</span>
+                  <span className="hud-value status-glow">{dbStatus === 'online' ? 'LTM (Neo4j)' : 'STM (Cache)'}</span>
+                </div>
+              </>
+            )}
           </div>
           
-          {dbStatus === 'online' && stats.top_entities && stats.top_entities.length > 0 && (
+          {!hudCollapsed && dbStatus === 'online' && stats.top_entities && stats.top_entities.length > 0 && (
             <div className="hud-panel top-entities">
               <div className="hud-header">
                 <span className="material-icons">star</span>

frontend/src/components/KnowledgeInput.css

@@ -392,6 +392,8 @@
   
   .inscription-main {
     padding-right: 0 !important;
+    overflow-y: visible !important;
+    height: auto !important;
   }
   
   .inscription-sidebar {