diff mrjunejune/src/jrpg/jrpg.css @ 272:41a49c29a28f

polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 16:05:29 -0700
parents 04fee26ecce0
children e02e2036ef84
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/jrpg.css	Fri Aug 07 13:24:05 2026 -0700
+++ b/mrjunejune/src/jrpg/jrpg.css	Fri Aug 07 16:05:29 2026 -0700
@@ -41,6 +41,7 @@
   --zenbu-sys-font-family-ui: "Pixel Mplus";
   --zenbu-sys-font-family-content: "Pixel Mplus";
   --zenbu-sys-font-family-code: "Pixel Mplus";
+  --zenbu-sys-type-label-family: "Pixel Mplus";
   min-width: 20rem;
   min-height: 100dvh;
   overflow: hidden;
@@ -254,7 +255,7 @@
 .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is(
   .jrpg-scene,
   .jrpg-utility,
-  mjj-jrpg-composer,
+  mjj-composer,
   mjj-jrpg-menu
 ) {
   visibility: hidden;
@@ -262,7 +263,7 @@
 
 .jrpg-workspace > .jrpg-scene,
 .jrpg-workspace > .jrpg-utility,
-.jrpg-workspace > mjj-jrpg-composer,
+.jrpg-workspace > mjj-composer,
 .jrpg-workspace > mjj-jrpg-menu {
   position: absolute;
   margin: 0;
@@ -291,7 +292,7 @@
   height: var(--mjj-frame-utility-height);
 }
 
-.jrpg-workspace > mjj-jrpg-composer {
+.jrpg-workspace > mjj-composer {
   inset:
     var(--mjj-frame-composer-block)
     auto
@@ -313,7 +314,7 @@
 
 .jrpg-scene,
 .jrpg-utility,
-mjj-jrpg-composer,
+mjj-composer,
 mjj-jrpg-menu,
 .jrpg-preview-panel {
   box-sizing: border-box;
@@ -393,10 +394,11 @@
 }
 
 mjj-jrpg-chat {
+  box-sizing: border-box;
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr) auto;
   align-self: stretch;
   min-height: 0;
   padding: var(--zenbu-sys-padding-md);
@@ -407,15 +409,6 @@
     var(--mjj-jrpg-info);
 }
 
-.jrpg-panel-heading {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--zenbu-sys-space-group);
-  padding-bottom: var(--zenbu-sys-padding-sm);
-  border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
-}
-
 .jrpg-menu-label,
 .jrpg-brand > p,
 .jrpg-dialog-heading p {
@@ -424,12 +417,6 @@
   letter-spacing: 0.08em;
 }
 
-.jrpg-panel-heading h1 {
-  margin: 0;
-  color: var(--mjj-jrpg-text);
-  font-size: var(--zenbu-sys-font-size-lg);
-}
-
 zen-message-scroller {
   display: block;
   overflow: hidden;
@@ -458,12 +445,27 @@
 
 .jrpg-message {
   display: grid;
-  grid-template-columns: minmax(4rem, auto) 1fr;
+  grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
   gap: var(--zenbu-sys-space-control);
   padding-left: var(--zenbu-sys-padding-sm);
   border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
 }
 
+.jrpg-message-speaker {
+  display: flex;
+  align-items: center;
+  gap: var(--zenbu-sys-space-icon-label);
+  align-self: start;
+}
+
+.jrpg-message-avatar {
+  width: var(--zenbu-sys-control-height-sm);
+  height: var(--zenbu-sys-control-height-sm);
+  flex: none;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
 .jrpg-message[hidden] {
   display: none;
 }
@@ -511,13 +513,23 @@
 
 .jrpg-turn-navigation {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: var(--zenbu-sys-space-icon-label);
   padding-top: var(--zenbu-sys-padding-sm);
   border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
 }
 
+.jrpg-turn-navigation zen-button:first-child button {
+  justify-content: flex-start;
+  padding-inline-start: var(--zenbu-sys-padding-md);
+}
+
+.jrpg-turn-navigation zen-button:last-child button {
+  justify-content: flex-end;
+  padding-inline-end: var(--zenbu-sys-padding-md);
+}
+
 .jrpg-turn-navigation zen-button,
 .jrpg-turn-navigation button {
   width: 100%;
@@ -561,11 +573,8 @@
   overflow: hidden;
 }
 
-.jrpg-utility > mjj-jrpg-preview,
-.jrpg-utility > mjj-conversation-archive {
+.jrpg-utility > mjj-jrpg-preview {
   box-sizing: border-box;
-  grid-column: 1;
-  grid-row: 1;
   width: 100%;
   height: 100%;
   min-height: 0;
@@ -623,9 +632,7 @@
 }
 
 .jrpg-preview-panel {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
-  gap: var(--zenbu-sys-space-group);
+  display: block;
   height: 100%;
   padding: var(--zenbu-sys-padding-lg);
   background:
@@ -639,6 +646,24 @@
     var(--mjj-jrpg-accent);
 }
 
+.jrpg-preview-panel > :is(.jrpg-preview-content, mjj-conversation-archive) {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.jrpg-preview-content {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: var(--zenbu-sys-space-group);
+}
+
+.jrpg-preview-content[hidden] {
+  display: none;
+}
+
 .jrpg-preview-panel h2,
 .jrpg-preview-panel p {
   margin: 0;
@@ -648,7 +673,7 @@
   color: var(--mjj-jrpg-primary);
 }
 
-.jrpg-preview-panel > p {
+.jrpg-preview-content > p {
   color: var(--mjj-jrpg-text);
 }
 
@@ -1338,7 +1363,7 @@
   text-decoration-color: var(--mjj-jrpg-accent);
 }
 
-mjj-jrpg-composer {
+mjj-composer {
   grid-area: composer;
   display: block;
   min-height: 0;
@@ -1346,55 +1371,6 @@
   background: var(--mjj-jrpg-surface);
 }
 
-.jrpg-composer {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-rows: minmax(0, 1fr) auto;
-  gap: var(--zenbu-sys-space-control);
-  height: 100%;
-  min-height: 0;
-}
-
-.jrpg-composer zen-field[appearance="plain"] {
-  display: grid;
-  grid-column: 1;
-  grid-row: 1;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: var(--zenbu-sys-space-icon-label);
-  min-height: 0;
-}
-
-.jrpg-composer label,
-.jrpg-composer-hint {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  color: var(--mjj-jrpg-text-muted);
-  font-size: var(--zenbu-sys-font-size-xs);
-}
-
-.jrpg-composer zen-field label {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.jrpg-composer textarea {
-  box-sizing: border-box;
-  grid-column: 1;
-  grid-row: 2;
-  width: 100%;
-  height: 100%;
-  min-height: calc(var(--zenbu-control-height) * 2);
-  resize: none;
-  padding:
-    var(--zenbu-control-padding-block)
-    var(--zenbu-control-padding-inline);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  border-radius: 0;
-  background: var(--mjj-jrpg-surface-sunken);
-  color: var(--mjj-jrpg-text);
-  font: inherit;
-}
-
 .jrpg-composer textarea::placeholder {
   color: var(--mjj-jrpg-text-muted);
 }
@@ -1404,51 +1380,6 @@
   outline-offset: var(--zenbu-sys-focus-offset);
 }
 
-.jrpg-composer-actions {
-  display: flex;
-  grid-column: 2;
-  grid-row: 1;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: var(--zenbu-sys-space-control);
-}
-
-.jrpg-composer zen-button {
-  width: 100%;
-}
-
-.jrpg-composer zen-button[hidden] {
-  display: none;
-}
-
-.jrpg-composer zen-button > button {
-  width: 100%;
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  border-radius: 0;
-  background: var(--mjj-jrpg-primary);
-  color: var(--mjj-jrpg-primary-foreground);
-  cursor: pointer;
-}
-
-.jrpg-composer zen-button > button:hover {
-  border-color: var(--mjj-jrpg-primary-hover);
-  background: var(--mjj-jrpg-primary-hover);
-}
-
-.jrpg-composer [data-cancel-control] > button {
-  border-color: var(--mjj-jrpg-accent);
-  background: var(--mjj-jrpg-accent);
-}
-
-.jrpg-composer button:disabled {
-  opacity: var(--zenbu-sys-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.jrpg-composer-hint {
-  margin: 0;
-}
-
 mjj-jrpg-menu {
   grid-area: menu;
   display: block;
@@ -1514,12 +1445,11 @@
 .jrpg-workspace > :is(
   .jrpg-scene,
   .jrpg-utility,
-  mjj-jrpg-composer,
+  mjj-composer,
   mjj-jrpg-menu
 ),
 .jrpg-scene > mjj-jrpg-chat,
-.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel,
-.jrpg-utility > mjj-conversation-archive {
+.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel {
   border: 0;
   background-color: transparent;
   box-shadow: none;
@@ -1529,23 +1459,20 @@
   background-image: none;
 }
 
-.jrpg-workspace > mjj-jrpg-composer,
+.jrpg-workspace > mjj-composer,
 .jrpg-workspace > mjj-jrpg-menu {
   padding: var(--zenbu-sys-padding-sm);
 }
 
-.jrpg-workspace > mjj-jrpg-composer textarea {
+.jrpg-workspace > mjj-composer textarea {
   min-height: 0;
 }
 
-.jrpg-scene .jrpg-panel-heading,
 .jrpg-scene .jrpg-message,
 .jrpg-scene .jrpg-turn-navigation,
 .jrpg-brand,
 .jrpg-work-showcase a,
-.jrpg-preview-panel > .jrpg-preview-dialog > zen-button > button,
-mjj-jrpg-composer > .jrpg-composer textarea,
-mjj-jrpg-composer > .jrpg-composer zen-button > button,
+.jrpg-preview-content > .jrpg-preview-dialog > zen-button > button,
 mjj-jrpg-menu nav button {
   border: 0;
 }
@@ -1590,7 +1517,7 @@
 
   .jrpg-workspace > .jrpg-scene,
   .jrpg-workspace > .jrpg-utility,
-  .jrpg-workspace > mjj-jrpg-composer,
+  .jrpg-workspace > mjj-composer,
   .jrpg-workspace > mjj-jrpg-menu,
   .jrpg-workspace > .jrpg-brand,
   .jrpg-workspace > .jrpg-frame-controls,
@@ -1853,27 +1780,20 @@
 }
 
 mjj-conversation-archive {
-  position: relative;
-  z-index: 1;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto auto;
   align-self: stretch;
   min-height: 0;
-  padding: var(--zenbu-sys-padding-md);
+  padding: 0;
   overflow: hidden;
-  background: var(--mjj-jrpg-panel-strong);
-  box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info);
+  background: transparent;
+  box-shadow: none;
 }
 
 mjj-conversation-archive[hidden] {
   display: none;
 }
 
-.jrpg-utility > mjj-conversation-archive {
-  border: 0;
-  box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info);
-}
-
 .jrpg-archive-heading {
   display: flex;
   align-items: baseline;
@@ -2214,6 +2134,14 @@
   display: none;
 }
 
+.jrpg-mobile-destination-owner {
+  display: contents;
+}
+
+.jrpg-page zen-button[hidden] {
+  display: none;
+}
+
 /* ================================================================
    Mobile portrait frame layout (≤52rem + portrait)
    Overrides the generic stacked grid from the 52rem breakpoint.
@@ -2225,50 +2153,22 @@
     /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */
 
     /* Main conversation */
-    --mjj-mobile-scene-inline:  4.5%;
-    --mjj-mobile-scene-block:   7.5%;
-    --mjj-mobile-scene-width:  91%;
-    --mjj-mobile-scene-height: 45.5%;
-
-    /* Preview / utility */
-    --mjj-mobile-utility-inline:  4.5%;
-    --mjj-mobile-utility-block:  54.7%;
-    --mjj-mobile-utility-width:  91%;
-    --mjj-mobile-utility-height: 17.1%;
+    --mjj-mobile-scene-inline:  4.8%;
+    --mjj-mobile-scene-block:   7.3%;
+    --mjj-mobile-scene-width:  90.4%;
+    --mjj-mobile-scene-height: 71.2%;
 
     /* Composer */
-    --mjj-mobile-composer-inline:  4.5%;
-    --mjj-mobile-composer-block:  72.8%;
-    --mjj-mobile-composer-width:  60.3%;
-    --mjj-mobile-composer-height: 19.2%;
-
-    /* Menu */
-    --mjj-mobile-menu-inline:  66.5%;
-    --mjj-mobile-menu-block:   72.8%;
-    --mjj-mobile-menu-width:   29%;
-    --mjj-mobile-menu-height:  19.2%;
-
-    /* Brand / SYS-01 cover */
-    --mjj-mobile-brand-inline:  11%;
-    --mjj-mobile-brand-block:    2.4%;
-    --mjj-mobile-brand-width:   10%;
-    --mjj-mobile-brand-height:   3.5%;
+    --mjj-mobile-composer-inline:  4.8%;
+    --mjj-mobile-composer-block:  79.6%;
+    --mjj-mobile-composer-width:  90.4%;
+    --mjj-mobile-composer-height: 17.7%;
 
     /* Baked hamburger overlay */
-    --mjj-mobile-hamburger-inline: 89.5%;
-    --mjj-mobile-hamburger-block:   2%;
-    --mjj-mobile-hamburger-width:   7%;
-    --mjj-mobile-hamburger-height:  4%;
-
-    /* Telemetry value absolute positions (x = left-center, y = top-center) */
-    --mjj-mobile-telemetry-temp-x:   22%;
-    --mjj-mobile-telemetry-temp-y:   94.7%;
-    --mjj-mobile-telemetry-user-x:   45%;
-    --mjj-mobile-telemetry-user-y:   94.7%;
-    --mjj-mobile-telemetry-status-x: 73%;
-    --mjj-mobile-telemetry-status-y: 94.7%;
-    --mjj-mobile-telemetry-uptime-x: 22%;
-    --mjj-mobile-telemetry-uptime-y: 97.5%;
+    --mjj-mobile-hamburger-inline: 87.2%;
+    --mjj-mobile-hamburger-block:   1.3%;
+    --mjj-mobile-hamburger-width:   9.4%;
+    --mjj-mobile-hamburger-height:  5.3%;
 
     height: 100dvh;
     min-height: 0;
@@ -2303,12 +2203,9 @@
     display: none;
   }
 
-  /* Restore absolute positioning for all aperture elements */
+  /* Restore absolute positioning for the two frame apertures */
   .jrpg-workspace > .jrpg-scene,
-  .jrpg-workspace > .jrpg-utility,
-  .jrpg-workspace > mjj-jrpg-composer,
-  .jrpg-workspace > mjj-jrpg-menu,
-  .jrpg-workspace > .jrpg-brand {
+  .jrpg-workspace > mjj-composer {
     position: absolute;
     width: auto;
     height: auto;
@@ -2331,26 +2228,8 @@
     );
   }
 
-  /* Utility / preview aperture */
-  .jrpg-workspace > .jrpg-utility {
-    inset:
-      var(--mjj-mobile-utility-block)
-      auto
-      auto
-      var(--mjj-mobile-utility-inline);
-    width: var(--mjj-mobile-utility-width);
-    height: var(--mjj-mobile-utility-height);
-    min-height: 0;
-    overflow: hidden;
-    font-size: clamp(
-      var(--zenbu-sys-font-size-xs),
-      2.8vw,
-      var(--zenbu-sys-font-size-sm)
-    );
-  }
-
   /* Composer aperture */
-  .jrpg-workspace > mjj-jrpg-composer {
+  .jrpg-workspace > mjj-composer {
     inset:
       var(--mjj-mobile-composer-block)
       auto
@@ -2365,39 +2244,39 @@
     );
   }
 
-  /* Menu aperture */
-  .jrpg-workspace > mjj-jrpg-menu {
-    inset:
-      var(--mjj-mobile-menu-block)
-      auto
-      auto
-      var(--mjj-mobile-menu-inline);
-    width: var(--mjj-mobile-menu-width);
-    height: var(--mjj-mobile-menu-height);
-    overflow: hidden;
-    font-size: clamp(
-      var(--zenbu-sys-font-size-xs),
-      2.5vw,
-      var(--zenbu-sys-font-size-sm)
-    );
+  .jrpg-workspace > :is(.jrpg-utility, mjj-jrpg-menu) {
+    display: none;
   }
 
-  /* Brand cover (covers baked SYS-01 label) */
   .jrpg-workspace > .jrpg-brand {
-    inset:
-      var(--mjj-mobile-brand-block)
-      auto
-      auto
-      var(--mjj-mobile-brand-inline);
-    width: var(--mjj-mobile-brand-width);
-    height: var(--mjj-mobile-brand-height);
-    background: var(--mjj-jrpg-canvas);
+    position: absolute;
+    z-index: 4;
+    inset: 1.3% auto auto 50%;
+    display: grid;
+    place-items: center;
+    width: max-content;
+    max-width: 68%;
+    height: 5.3%;
     padding: 0;
+    border: 0;
+    background: transparent;
     box-shadow: none;
+    text-align: center;
+    transform: translateX(-50%);
+  }
+
+  body.jrpg-page .jrpg-brand header {
+    width: 100%;
+    text-align: center;
+  }
+
+  body.jrpg-page .jrpg-brand header h1 {
+    font-size: var(--zenbu-sys-font-size-sm);
+    text-shadow: none;
   }
 
   /* Hamburger button: transparent overlay over baked art */
-  .jrpg-workspace > .jrpg-mobile-menu-btn {
+  .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn {
     display: grid;
     place-items: center;
     position: absolute;
@@ -2438,73 +2317,107 @@
     opacity: 0.5;
   }
 
-  /* Telemetry: full-workspace container so children use workspace % coords */
   .jrpg-workspace > .jrpg-frame-telemetry {
-    position: absolute;
-    inset: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    pointer-events: none;
-    font-size: clamp(
-      var(--zenbu-sys-font-size-xs),
-      2.5vw,
-      var(--zenbu-sys-font-size-sm)
-    );
+    display: none;
+  }
+
+  .jrpg-mobile-destination-dialog {
+    box-sizing: border-box;
+    width: calc(100% - var(--zenbu-sys-space-content));
+    max-width: 42rem;
+    height: min(88dvh, 48rem);
+    max-height: calc(100dvh - var(--zenbu-sys-space-content));
+    margin: auto;
+    padding: var(--zenbu-sys-padding-md);
+    border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
+    border-radius: 0;
+    background: var(--mjj-jrpg-surface);
+    color: var(--mjj-jrpg-text);
+    box-shadow:
+      inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
+      var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0
+        var(--mjj-jrpg-accent);
   }
 
-  .jrpg-frame-telemetry > :nth-child(1) {
-    position: absolute;
-    left: var(--mjj-mobile-telemetry-temp-x);
-    top: var(--mjj-mobile-telemetry-temp-y);
-    transform: translate(-50%, -50%);
-    background: transparent;
-    padding-inline: 0;
-    pointer-events: auto;
-    white-space: nowrap;
+  .jrpg-mobile-destination-dialog[open] {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: var(--zenbu-sys-space-group);
+  }
+
+  .jrpg-mobile-destination-dialog::backdrop {
+    background: color-mix(in srgb, var(--mjj-jrpg-canvas) 82%, transparent);
+  }
+
+  .jrpg-mobile-destination-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: var(--zenbu-sys-space-control);
+    padding-bottom: var(--zenbu-sys-padding-sm);
+    border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  }
+
+  .jrpg-mobile-destination-header h2 {
+    margin: 0;
+    color: var(--mjj-jrpg-primary);
+    font-size: var(--zenbu-sys-font-size-lg);
+    text-align: center;
   }
 
-  .jrpg-frame-telemetry > :nth-child(2) {
-    position: absolute;
-    left: var(--mjj-mobile-telemetry-user-x);
-    top: var(--mjj-mobile-telemetry-user-y);
-    transform: translate(-50%, -50%);
+  .jrpg-mobile-destination-header zen-button:first-child {
+    justify-self: start;
+  }
+
+  .jrpg-mobile-destination-header zen-button:last-child {
+    justify-self: end;
+  }
+
+  .jrpg-mobile-destination-header button {
+    border: 0;
+    border-radius: 0;
     background: transparent;
-    padding-inline: 0;
-    pointer-events: auto;
-    white-space: nowrap;
+    color: var(--mjj-jrpg-text);
+    cursor: pointer;
+  }
+
+  .jrpg-mobile-destination-content {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
   }
 
-  .jrpg-frame-telemetry > :nth-child(3) {
-    position: absolute;
-    left: var(--mjj-mobile-telemetry-status-x);
-    top: var(--mjj-mobile-telemetry-status-y);
-    transform: translate(-50%, -50%);
-    background: transparent;
-    padding-inline: 0;
-    pointer-events: auto;
-    white-space: nowrap;
+  .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) {
+    box-sizing: border-box;
+    position: static;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .jrpg-mobile-destination-content > [hidden],
+  [data-mobile-destination-back-owner][hidden] {
+    display: none;
   }
 
-  .jrpg-frame-telemetry > :nth-child(4) {
-    position: absolute;
-    left: var(--mjj-mobile-telemetry-uptime-x);
-    top: var(--mjj-mobile-telemetry-uptime-y);
-    transform: translate(-50%, -50%);
-    background: transparent;
-    padding-inline: 0;
-    pointer-events: auto;
-    white-space: nowrap;
+  .jrpg-mobile-destination-content > mjj-jrpg-menu {
+    display: block;
+    padding: var(--zenbu-sys-padding-md);
+    overflow-y: auto;
   }
 
-  /* Compact the brand header text for the narrow cover area */
-  .jrpg-workspace > .jrpg-brand header h1 {
-    font-size: clamp(
-      var(--zenbu-sys-font-size-xs),
-      2vw,
-      var(--zenbu-sys-font-size-xs)
-    );
+  .jrpg-mobile-destination-content > .jrpg-utility {
+    display: grid;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .jrpg-mobile-destination-content .jrpg-archive-heading {
+    display: none;
   }
 
   /* Compact scene internals for mobile aperture */
@@ -2520,6 +2433,10 @@
     display: none;
   }
 
+  .jrpg-scene::before {
+    display: none;
+  }
+
   mjj-jrpg-chat {
     grid-column: 1;
     grid-row: 1;
@@ -2530,35 +2447,22 @@
     padding: var(--zenbu-sys-padding-sm);
   }
 
-  .jrpg-utility > mjj-conversation-archive {
+  .jrpg-preview-panel > mjj-conversation-archive {
     width: 100%;
     height: 100%;
     max-height: 100%;
     overflow: auto;
   }
 
-  /* Utility compact padding */
-  .jrpg-utility {
-    padding: var(--zenbu-sys-padding-sm);
-  }
-
   /* Composer: compact single-row within aperture */
-  .jrpg-composer {
-    gap: var(--zenbu-sys-space-icon-label);
-    padding: var(--zenbu-sys-padding-sm);
+  .jrpg-workspace > mjj-composer {
+    padding: var(--zenbu-sys-space-icon-label);
   }
 
   .jrpg-composer-hint {
     display: none;
   }
 
-  /* Menu compact: single column stacking */
-  .jrpg-workspace > mjj-jrpg-menu {
-    padding: var(--zenbu-sys-padding-xs, var(--zenbu-sys-padding-sm));
-    overflow-y: auto;
-    scrollbar-width: thin;
-  }
-
   mjj-jrpg-menu nav {
     height: 100%;
     grid-template-columns: 1fr;
@@ -2580,36 +2484,21 @@
     font-size: var(--zenbu-sys-font-size-xs);
   }
 
-  mjj-jrpg-menu[data-mobile-menu-collapsed] {
-    overflow: hidden;
-  }
-
-  mjj-jrpg-menu[data-mobile-menu-collapsed] nav {
-    display: grid;
-    place-items: center;
+  /* Preview panel compact for narrow utility aperture */
+  .jrpg-preview-panel {
+    padding: var(--zenbu-sys-padding-sm);
+    overflow-y: auto;
   }
 
-  mjj-jrpg-menu[data-mobile-menu-collapsed] .jrpg-menu-label {
-    display: block;
-    writing-mode: initial;
-  }
-
-  mjj-jrpg-menu[data-mobile-menu-collapsed] ul {
-    display: none;
-  }
-
-  /* Preview panel compact for narrow utility aperture */
-  .jrpg-preview-panel {
+  .jrpg-preview-content {
     gap: var(--zenbu-sys-space-icon-label);
-    padding: var(--zenbu-sys-padding-sm);
-    overflow-y: auto;
   }
 
   .jrpg-preview-panel h2 {
     font-size: var(--zenbu-sys-font-size-sm);
   }
 
-  .jrpg-preview-panel > p {
+  .jrpg-preview-content > p {
     font-size: var(--zenbu-sys-font-size-xs);
     display: -webkit-box;
     -webkit-line-clamp: 2;