Move stage actions into a top chrome bar with Copy and Load menus.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/css/display.css

@@ -356,40 +356,31 @@
   object-position: center;
 }
 
+/* Top chrome is a sibling of the media pane — never absolute over pixels */
 .stage-chrome {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  left: 10px;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-  pointer-events: none;
-}
-
-.stage-chrome-top {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+  background: #0b0b0d;
 }
 
-.stage-chrome-top > *,
-.stage-actions {
-  pointer-events: auto;
+.stage-chrome > .eye-viewer {
+  margin-left: auto;
 }
 
 .stage-library {
   display: inline-flex;
-  min-height: 44px;
+  min-height: 36px;
   align-items: center;
   gap: 6px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #000a;
-  padding: 0 14px;
+  background: #141416;
+  padding: 0 12px;
   color: var(--text);
   font: inherit;
   font-weight: 600;
@@ -408,15 +399,16 @@
 .stage-actions {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
-  max-width: calc(100% - 108px);
 }
 
-.stage-actions button {
+.stage-actions > button,
+.stage-split-trigger {
   min-height: 36px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #000a;
+  background: #141416;
   color: var(--text);
   padding: 0 10px;
   font: inherit;
@@ -424,7 +416,8 @@
   cursor: pointer;
 }
 
-.stage-actions button:hover {
+.stage-actions > button:hover,
+.stage-split-trigger:hover {
   border-color: var(--amber);
 }
 
@@ -432,15 +425,64 @@
   color: #fca5a5;
 }
 
+.stage-split {
+  position: relative;
+}
+
+.stage-split-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stage-split-trigger::after {
+  content: '▾';
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.stage-split-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 8;
+  display: flex;
+  min-width: 160px;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #141416;
+  padding: 4px;
+  box-shadow: 0 8px 24px #0008;
+}
+
+.stage-split-menu button {
+  min-height: 36px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  padding: 0 10px;
+  text-align: left;
+  font: inherit;
+  font-size: var(--type-sm);
+  cursor: pointer;
+}
+
+.stage-split-menu button:hover {
+  background: #ffffff10;
+}
+
 .eye-viewer {
   display: grid;
-  width: 44px;
-  height: 44px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
   place-items: center;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #000a;
+  background: #141416;
   cursor: pointer;
 }
 
@@ -448,35 +490,41 @@
   border-color: var(--amber);
 }
 
+.stage-media-row {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  align-items: stretch;
+  gap: 0;
+}
+
 .stage-nav {
-  position: absolute;
-  top: 50%;
-  z-index: 4;
   display: grid;
   width: 44px;
-  height: 44px;
+  flex-shrink: 0;
   place-items: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #000a;
+  align-self: stretch;
+  border: 0;
+  border-radius: 0;
+  background: #0b0b0d;
   color: var(--text);
   font-size: 28px;
   line-height: 1;
   cursor: pointer;
-  transform: translateY(-50%);
 }
 
 .stage-nav:hover {
-  border-color: var(--amber);
   color: var(--amber);
+  background: #121214;
 }
 
 .stage-nav-prev {
-  left: 10px;
+  border-right: 1px solid var(--line);
 }
 
 .stage-nav-next {
-  right: 10px;
+  border-left: 1px solid var(--line);
 }
 
 .photos-head {