1 files changed, 119 insertions, 10 deletions

diff --git a/public/bluebey-studio/src/style.css b/public/bluebey-studio/src/style.css
index 2ca7148..e5287a2 100644
--- a/public/bluebey-studio/src/style.css
+++ b/public/bluebey-studio/src/style.css
@@ -15,6 +15,10 @@
 html, body {
   margin: 0;
   height: 100%;
+  height: 100vh;
+  /* `dvh` tracks the space mobile browser chrome leaves; the lines above are
+     the fallbacks for browsers that do not know it yet. */
+  height: 100dvh;
   overflow: hidden;
 }
 
@@ -91,7 +95,8 @@ body:not(.panel-hidden) #stage {
 #topbar button:active { transform: translateY(0); }
 #topbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
 
-#viewport-hint {
+/* Shared by the mouse hint and the touch hint (see #viewport-hint-touch). */
+.viewport-hint {
   position: fixed;
   left: 18px;
   bottom: 14px;
@@ -102,6 +107,10 @@ body:not(.panel-hidden) #stage {
   pointer-events: none;
 }
 
+/* Phones get a touch-specific hint instead of this mouse one; swapped in the
+   small-screen media query at the end of the viewport/panel section below. */
+#viewport-hint-touch { display: none; }
+
 /* -------------------------------------------------------------------- panel */
 
 #panel {
@@ -132,6 +141,92 @@ body.panel-hidden #topbar { max-width: calc(100vw - 48px); }
   #topbar { max-width: calc(100vw - 60px); }
 }
 
+/*
+ * Phones and other short touch screens. The panel becomes a bottom sheet over
+ * the 3D view instead of a side column: the canvas keeps the full screen behind
+ * it, so opening the sheet does not resize the render (and the ≡ button, which
+ * already calls resizeViewport, is all the control needed).
+ */
+@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
+  /* Full-screen canvas: the sheet floats over it, so its height never feeds
+     back into the renderer. */
+  #stage,
+  body:not(.panel-hidden) #stage {
+    inset: 0;
+    right: 0;
+  }
+
+  #topbar {
+    top: calc(8px + env(safe-area-inset-top));
+    left: calc(10px + env(safe-area-inset-left));
+    right: calc(10px + env(safe-area-inset-right));
+    max-width: none;
+    gap: 8px;
+  }
+
+  /* Let the title give way first (it can ellipsize); the buttons keep their
+     labels and stay on one line. */
+  #topbar h1 {
+    font-size: 13px;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .topbar-actions {
+    flex: 1;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+
+  /* Comfortable tap targets (>= 40px) in a row that still fits 360px. */
+  #topbar button {
+    font-size: 11px;
+    padding: 9px 10px;
+    min-height: 40px;
+  }
+
+  #btn-panel { min-width: 44px; }
+
+  #viewport-hint { display: none; }
+  #viewport-hint-touch {
+    display: block;
+    bottom: calc(14px + env(safe-area-inset-bottom));
+  }
+
+  #panel {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 65dvh;
+    padding: 20px 14px calc(20px + env(safe-area-inset-bottom));
+    border-left: 0;
+    border-top: 1px solid var(--border);
+    border-radius: 18px 18px 0 0;
+    box-shadow: 0 -6px 24px rgba(40, 20, 80, 0.18);
+  }
+
+  /* A grab handle so the sheet reads as an edge that opens and closes; it
+     sticks to the top of the scroll area as the sheet is scrolled. */
+  #panel::before {
+    content: "";
+    position: sticky;
+    top: 0;
+    display: block;
+    width: 44px;
+    height: 5px;
+    margin: 0 auto 12px;
+    border-radius: 999px;
+    background: #cfc6e4;
+  }
+
+  body.panel-hidden #topbar { max-width: none; }
+}
+
 /* ----------------------------------------------------------------- sections */
 
 .tabs {
@@ -139,27 +234,41 @@ body.panel-hidden #topbar { max-width: calc(100vw - 48px); }
   top: 0;
   z-index: 3;
   display: flex;
-  gap: 4px;
-  padding: 2px 0 10px;
-  margin: -2px 0 4px;
+  align-items: flex-end;
+  gap: 3px;
+  padding: 2px 0 0;
+  margin: -2px 0 8px;
+  border-bottom: 2px solid var(--border);
   background: linear-gradient(var(--card) 72%, rgba(255, 255, 255, 0));
 }
 
+/* Each tab is a rounded-top tab sitting on the strip's baseline; only the icon
+   shows, and the active one fills with the accent and covers the baseline. */
 .tab {
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font: inherit;
-  font-size: 12px;
-  padding: 8px 2px;
+  padding: 9px 2px 7px;
   border: 1px solid var(--border);
-  border-radius: 9px;
-  background: #fff;
+  border-bottom: none;
+  border-radius: 9px 9px 0 0;
+  background: var(--accent-soft);
   color: var(--muted);
   cursor: pointer;
   white-space: nowrap;
 }
 
-.tab:hover { border-color: var(--accent-2); }
-.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+.tab svg { display: block; width: 20px; height: 20px; }
+.tab:hover { color: var(--accent-2); border-color: var(--accent-2); }
+.tab.active {
+  margin-bottom: -2px;
+  padding-bottom: 9px;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
 .tab-panel[hidden] { display: none; }
 
 .details {