style: establish full fluid mobile responsiveness on iPhone 14 viewports across AuthScreen, App Shell, and 3D Brain overlays

frontend/src/App.css

@@ -475,6 +475,9 @@
 @media (max-width: 1024px) {
   .soma-shell {
     flex-direction: column !important;
+    height: auto !important;
+    min-height: 100vh !important;
+    overflow: auto !important;
   }
   
   .soma-sidebar {
@@ -557,14 +560,18 @@
   
   .soma-main-panel {
     padding: 12px !important;
-    overflow-y: auto !important;
+    overflow-y: visible !important;
+    height: auto !important;
+    flex: none !important;
   }
   
   .page-canvas {
-    padding: 20px !important;
-    border-radius: 24px !important;
-    overflow-y: auto !important;
-    min-height: 100%;
+    padding: 16px !important;
+    border-radius: 20px !important;
+    overflow-y: visible !important;
+    height: auto !important;
+    flex: none !important;
+    min-height: auto !important;
   }
   
   .page-header {
@@ -580,20 +587,20 @@
   
   .chat-container[style] {
     flex: none !important;
-    height: 60vh !important;
-    min-height: 400px !important;
+    height: 520px !important;
+    min-height: auto !important;
   }
   
   .cognitive-container[style] {
     flex: none !important;
-    height: 40vh !important;
-    min-height: 250px !important;
+    height: 320px !important;
+    min-height: auto !important;
   }
   
   .activity-feed-wrapper[style] {
     flex: none !important;
     max-width: 100% !important;
-    height: 40vh !important;
+    height: 350px !important;
     margin: 0 !important;
   }
   
@@ -604,7 +611,7 @@
   }
   
   .status-card[style] {
-    height: 50vh !important;
+    height: auto !important;
     min-height: 300px !important;
   }
 }

frontend/src/components/AuthScreen.css

@@ -353,3 +353,64 @@
   filter: blur(10px);
   transition: all 0.5s ease-in-out;
 }
+
+/* ── Mobile Responsive Overrides for iPhone 14 ── */
+@media (max-width: 480px) {
+  .landing {
+    align-items: flex-start !important;
+    padding: 30px 16px !important;
+    overflow-y: auto !important;
+  }
+  
+  .splash-content, .name-content {
+    margin: 20px auto 60px auto !important;
+    padding: 36px 20px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    border-radius: 24px !important;
+  }
+  
+  .hero-orb {
+    width: 60px !important;
+    height: 60px !important;
+    margin-bottom: 24px !important;
+  }
+  
+  .hero-title {
+    font-size: 2.6rem !important;
+  }
+  
+  .hero-tagline {
+    font-size: 0.58rem !important;
+    letter-spacing: 0.3em !important;
+    margin-bottom: 18px !important;
+  }
+  
+  .hero-desc {
+    font-size: 0.8rem !important;
+    margin-bottom: 24px !important;
+    line-height: 1.5 !important;
+  }
+  
+  .splash-features {
+    gap: 8px !important;
+    margin-bottom: 28px !important;
+  }
+  
+  .splash-feature {
+    padding: 4px 10px !important;
+    font-size: 0.62rem !important;
+  }
+  
+  .enter-btn, .name-submit {
+    padding: 10px 24px !important;
+    font-size: 0.8rem !important;
+  }
+  
+  .landing-footer {
+    position: relative !important;
+    bottom: auto !important;
+    margin: 20px auto 40px auto !important;
+    justify-content: center !important;
+  }
+}

frontend/src/components/CognitiveBrainScene.css

@@ -204,3 +204,35 @@
   from { opacity: 0.1; transform: scale(1); }
   to { opacity: 0.3; transform: scale(1.05); }
 }
+
+/* ── Mobile Responsive Overrides for iPhone 14 ── */
+@media (max-width: 480px) {
+  .brain-core {
+    width: 240px !important;
+    height: 240px !important;
+    margin: 0 auto;
+  }
+  
+  .signal-node {
+    gap: 8px !important;
+  }
+  
+  /* Bring offsets inward so they fit cleanly within the 390px iPhone 14 viewport */
+  .prefrontal { top: -10px !important; left: -20px !important; }
+  .parietal { top: -10px !important; right: -20px !important; }
+  .temporal { bottom: 10px !important; left: -20px !important; }
+  .thalamus-label { bottom: 10px !important; right: -20px !important; }
+  
+  .signal-copy strong {
+    font-size: 0.58rem !important;
+  }
+  
+  .signal-copy span {
+    font-size: 0.48rem !important;
+  }
+  
+  .glow-hub {
+    width: 260px !important;
+    height: 260px !important;
+  }
+}