Improve mobile layout and styles\n\n- Move in-app buttons to a fixed bottom bar on mobile\n- Shrink masthead and volume badge on landing\n- Import mobile stylesheet in app entry\n- Place velocity/energy stats above bottom buttons\n- Adjust dialogue/input spacing to avoid overlap

1 files changed, 9 insertions, 4 deletions

diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index a736009..c7d6fb6 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -4159,8 +4159,13 @@ button:focus-visible {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 16px;
-    height: 48px;
+    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
+    height: 56px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 120;
   }
   
   /* Hide desktop time in mobile */
@@ -4235,12 +4240,12 @@ button:focus-visible {
   
   /* Adjust dialogue and input positioning */
   .dialogue {
-    bottom: 140px;
+    bottom: 160px; /* give extra space for fixed footer */
     margin: 0 8px;
   }
   
   .text-input-area {
-    bottom: 80px;
+    bottom: 100px; /* clear the bottom bar comfortably */
     left: 8px;
     right: 8px;
   }