@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.0

package/dist/styles.css

@@ -36,29 +36,43 @@
   cursor: pointer;
 }
 
-.mint-generated-result__plotly-error[data-v-a604514a] {
+.mint-plotly-chart__plot[data-v-ee2f733a] {
+  width: 100%;
+  min-height: 24rem;
+}
+.mint-plotly-chart__error[data-v-ee2f733a] {
   margin: 0;
   padding: 1rem;
   border: 1px solid var(--mint-error-border);
   border-radius: 0.75rem;
   background: var(--mint-error-bg);
-  color: var(--mint-error);
+  color: var(--mint-error-hover);
+}
+.mint-plotly-chart__error[data-v-ee2f733a] p {
+  margin: 0;
+}
+
+.mint-generated-result__image[data-v-4a6d15d5] {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
 }
 
-.mint-generated-result[data-v-78edbbbd] {
+.mint-generated-result[data-v-7500041f] {
   width: 100%;
 }
-.mint-generated-result__text[data-v-78edbbbd],
-.mint-generated-result__json[data-v-78edbbbd] {
+.mint-generated-result__text[data-v-7500041f],
+.mint-generated-result__json[data-v-7500041f] {
   margin: 0;
   color: var(--text-primary);
 }
-.mint-generated-result__text[data-v-78edbbbd] {
+.mint-generated-result__text[data-v-7500041f] {
   max-width: 72ch;
   white-space: pre-wrap;
   line-height: 1.65;
 }
-.mint-generated-result__json[data-v-78edbbbd] {
+.mint-generated-result__json[data-v-7500041f] {
   overflow: auto;
   padding: 1rem;
   border: 1px solid var(--border-color);
@@ -68,17 +82,13 @@
   line-height: 1.55;
   white-space: pre-wrap;
 }
-.mint-generated-result__image[data-v-78edbbbd] {
+.mint-generated-result__image[data-v-7500041f] {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0 auto;
 }
-.mint-generated-result__plotly[data-v-78edbbbd] {
-  width: 100%;
-  min-height: 24rem;
-}
-.mint-generated-result__artifact[data-v-78edbbbd] {
+.mint-generated-result__artifact[data-v-7500041f] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4148,6 +4158,14 @@ code, pre {
   width: 1.5rem;
   height: 1.5rem;
 }
+/* A bare <svg> in the slot has no intrinsic size and collapses to 0 width as a
+   flex item; fill the sized icon box so callers need not size their icon. */
+.mint-icon-button__icon--sm > svg,
+.mint-icon-button__icon--md > svg,
+.mint-icon-button__icon--lg > svg {
+  width: 100%;
+  height: 100%;
+}
 /* Spinner */
 .mint-icon-button__spinner {
   animation: mint-spin 1s linear infinite;
@@ -16025,1064 +16043,1265 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   opacity: var(--mint-disabled-opacity, 0.6);
   cursor: not-allowed;
 }
-.mint-artifact-save-dialog {
+.mint-file-browser-dialog,
+.mint-file-browser-dialog * {
+  box-sizing: border-box;
+}
+/* File browser workspace. Actions use BaseButton/IconButton; these rules own layout. */
+.mint-file-browser-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgb(15 23 42 / 45%);
 }
-.mint-artifact-save-dialog__immutable {
-  margin: 0;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
+.mint-file-browser-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 880px;
+  max-width: 100%;
+  max-height: calc(100dvh - 48px);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-lg);
 }
-.mint-artifact-save-dialog__immutable code {
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
-  color: var(--text-secondary);
+.mint-file-browser-dialog--sm {
+  width: 520px;
 }
-/* ExperimentPopover — aligned with refresh design (AppPluginSwitcher / AppTopBar page selector) */
-/* Container */
-.mint-experiment-popover {
-  position: relative;
+.mint-file-browser-dialog--md {
+  width: 640px;
 }
-/* Split trigger container */
-.mint-experiment-popover__split {
-  display: inline-flex;
-  align-items: stretch;
+.mint-file-browser-dialog--lg {
+  width: 760px;
 }
-/* When split has save, trigger loses its right border and radii so it meets
-   the save button flush. */
-.mint-experiment-popover__split--with-save .mint-experiment-popover__trigger {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.mint-file-browser-dialog--xl {
+  width: 840px;
 }
-/* ─── Trigger (left / main chip) ───
-   Shows the experiment name, truncated to preserve topbar density. */
-.mint-experiment-popover__trigger {
-  display: inline-flex;
+.mint-file-browser-dialog__header {
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
-  height: 2.375rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--border-color);
-  background: var(--bg-card);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  max-width: 220px;
-  box-sizing: border-box;
-  transform: translateY(0);
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
 }
-/* Hover (single-trigger mode) — lift + soft shadow. Gated :not(--active) so
-   the chip doesn't bounce while its panel is open. */
-.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
-  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
-  background: var(--bg-hover);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
+.mint-file-browser__heading {
+  flex: 1;
+  min-width: 0;
 }
-.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
-  .mint-experiment-popover__trigger:active:not(.mint-experiment-popover__trigger--active) {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
+.mint-file-browser__title {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
 }
-/* Active (panel open) — ring treatment, same language as PluginSwitcher/page selector */
-.mint-experiment-popover__trigger--active {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-soft);
+.mint-file-browser__context {
+  margin: 3px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
 }
-.mint-experiment-popover__trigger--empty {
-  color: var(--text-muted);
+.mint-file-browser {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  font-size: 13px;
 }
-.mint-experiment-popover__trigger-icon {
-  width: 1rem;
-  height: 1rem;
+.mint-file-browser__mounts {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px 0;
   flex-shrink: 0;
-  color: var(--color-primary);
+  min-width: 0;
 }
-.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-icon {
+.mint-file-browser__mounts-label {
+  font-size: 12px;
   color: var(--text-muted);
 }
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-icon {
-  color: var(--color-primary);
-}
-.mint-experiment-popover__trigger-text {
-  flex: 1;
+.mint-file-browser__mount-options {
+  display: flex;
+  gap: 6px;
   min-width: 0;
+  overflow-x: auto;
+  padding: 2px;
+}
+.mint-file-browser__mount {
+  flex-shrink: 0;
+  max-width: 260px;
+}
+.mint-file-browser__mount-label {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-}
-/* Experiment code fallback in the trigger — monospace, tabular */
-.mint-experiment-popover__trigger-code {
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
 }
-.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-code {
+.mint-file-browser__mount-count {
+  font-size: 11px;
   color: var(--text-muted);
 }
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-code {
-  color: var(--color-primary);
+.mint-file-browser__toolbar {
+  padding: 8px 20px 12px;
+  flex-shrink: 0;
 }
-/* ─── Unresolved states ───
-   An experiment is bound but has no name yet. The chip must not read "No
-   experiment", and it must never fall back to the numeric id — a name only
-   ever comes from the platform. */
-.mint-experiment-popover__trigger--loading {
-  cursor: progress;
+.mint-file-browser__pathbar,
+.mint-file-browser__tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
-.mint-experiment-popover__trigger--loading .mint-experiment-popover__trigger-icon {
-  color: var(--text-muted);
+.mint-file-browser__pathbar {
+  margin-bottom: 8px;
 }
-.mint-experiment-popover__trigger--error {
-  border-color: var(--mint-error-border);
-  background: var(--mint-error-bg);
-  color: var(--mint-error);
+.mint-file-browser__crumbs {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
 }
-.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-icon,
-.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-chevron {
-  color: var(--mint-error);
+.mint-file-browser__crumb {
+  flex-shrink: 0;
 }
-/* Placeholder bar standing in for the name while it resolves. */
-.mint-experiment-popover__trigger-skeleton {
+.mint-file-browser__crumb--current {
+  font-weight: 600;
+}
+.mint-file-browser__crumb-sep {
+  color: var(--text-muted);
+}
+.mint-file-browser__search {
   flex: 1;
-  min-width: 4.5rem;
-  height: 0.625rem;
-  border-radius: var(--radius-sm);
-  background-color: var(--bg-tertiary);
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-tertiary) 0%,
-    var(--bg-hover) 40%,
-    var(--bg-tertiary) 60%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
+  min-width: 100px;
 }
-.mint-experiment-popover__trigger-chevron {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  flex-shrink: 0;
+.mint-file-browser__rules {
   color: var(--text-muted);
-  transition: transform 0.2s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  font-family: var(--font-mono);
+  font-size: 11px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-chevron {
-  transform: rotate(180deg);
-  color: var(--color-primary);
+.mint-file-browser__select-folder {
+  flex-shrink: 0;
 }
-/* ─── Save trigger (right half of split) — filled-button treatment ─── */
-.mint-experiment-popover__save-trigger {
+.mint-file-browser__listing {
   display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.mint-file-browser__head,
+.mint-file-browser__row {
+  display: grid;
+  grid-template-columns: 16px 24px minmax(0, 1fr) 80px 72px 32px;
   align-items: center;
-  justify-content: center;
-  width: 2.375rem;
-  height: 2.375rem;
-  border: 1px solid var(--color-primary);
-  border-left: 1px solid rgba(255, 255, 255, 0.25);
-  background-color: var(--color-primary);
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.12),
-    rgba(255, 255, 255, 0)
-  );
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  color: white;
-  cursor: pointer;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  transform: translateY(0);
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  gap: 10px;
+  padding: 4px 20px;
 }
-/* Save trigger: press-to-flat (gradient cleared) */
-.mint-experiment-popover__save-trigger:active:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(0);
-  box-shadow: none;
-  background-image: none;
-  transition-duration: 0.05s;
+.mint-file-browser__head {
+  min-height: 32px;
+  border-block: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 500;
 }
-.mint-experiment-popover__save-trigger--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.mint-file-browser__col-size,
+.mint-file-browser__col-type,
+.mint-file-browser__size,
+.mint-file-browser__type {
+  text-align: right;
 }
-.mint-experiment-popover__save-trigger--loading {
-  opacity: 0.7;
-  pointer-events: none;
-}
-/* Success state: green surface + keep the catch-of-light */
-.mint-experiment-popover__save-trigger--success {
-  background-color: var(--mint-success, #10b981);
-  border-color: var(--mint-success, #10b981);
-  border-left-color: rgba(255, 255, 255, 0.3);
-}
-.mint-experiment-popover__save-trigger-icon {
-  width: 0.9375rem;
-  height: 0.9375rem;
-}
-.mint-experiment-popover__spinner--inline {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: mint-experiment-popover-spin 0.6s linear infinite;
+.mint-file-browser__rows {
+  overflow-y: auto;
+  max-height: min(46dvh, 440px);
+  min-height: 0;
 }
-/* ─── Split unit cohesion ─── */
-/* When split has both halves, hovering either half lifts BOTH together so the
-   visually attached unit moves as one object. Color changes stay per-half so
-   "which action is hot" is still readable. */
-.mint-experiment-popover__split--with-save:hover
-  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
-.mint-experiment-popover__split--with-save:hover
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
+.mint-file-browser__row {
+  min-height: 42px;
+  border-bottom: 1px solid var(--border-light);
 }
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
+.mint-file-browser__row--dir {
+  cursor: pointer;
 }
-/* Per-half color-on-hover (only when the SPECIFIC half is being pointed at) */
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
+.mint-file-browser__row:hover {
   background: var(--bg-hover);
-  border-color: var(--color-primary);
-}
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__save-trigger:hover:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
 }
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__save-trigger--success:hover:not(:disabled) {
-  background-color: var(--mint-success-hover, #059669);
-  border-color: var(--mint-success-hover, #059669);
+.mint-file-browser__row--selected,
+.mint-file-browser__row--selected:hover {
+  background: var(--color-primary-soft);
 }
-/* Flatten the gradient on active save press */
-.mint-experiment-popover__split--with-save:active
-  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  background-image: none;
+.mint-file-browser__name-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
-/* ─── Popover panel ─── */
-.mint-experiment-popover__panel {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  right: 0;
-  width: 17.5rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  z-index: 50;
+.mint-file-browser__name {
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-/* Header */
-.mint-experiment-popover__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 1rem 0.5rem;
-  border-bottom: 1px solid var(--border-light);
+.mint-file-browser__row--dir .mint-file-browser__name {
+  font-weight: 500;
 }
-.mint-experiment-popover__title {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--text-primary);
+.mint-file-browser__note-pill {
+  flex-shrink: 0;
+  color: var(--color-primary);
+  font-size: 11px;
 }
-.mint-experiment-popover__subtitle {
-  font-size: 0.6875rem;
-  font-weight: 400;
+.mint-file-browser__size,
+.mint-file-browser__type {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.mint-file-browser__row--dimmed .mint-file-browser__name,
+.mint-file-browser__row--dimmed .mint-file-browser__size,
+.mint-file-browser__row--dimmed .mint-file-browser__type {
   color: var(--text-muted);
 }
-.mint-experiment-popover__body {
-  padding: 0.75rem 1rem;
+.mint-file-browser__row--dimmed .mint-file-browser__row-icon {
+  filter: grayscale(1);
+  opacity: 0.6;
 }
-/* Select experiment button (no experiment state) */
-.mint-experiment-popover__select-btn {
-  display: inline-flex;
+.mint-file-browser__checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+.mint-file-browser__checkbox:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.mint-file-browser__row-icon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
-  width: 100%;
-  height: 2.125rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--color-primary);
-  background-color: var(--color-primary-soft);
-  border-radius: var(--radius-md);
-  color: var(--color-primary);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transform: translateY(0);
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  color: var(--text-secondary);
 }
-.mint-experiment-popover__select-btn:hover {
-  background-color: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
+.mint-file-browser__row-icon--directory {
+  color: var(--mint-info);
 }
-.mint-experiment-popover__select-btn:active {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
+.mint-file-browser__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
-/* Experiment card (selected state) */
-.mint-experiment-popover__card {
+.mint-file-browser__skeleton {
+  padding: 16px 20px;
+  overflow: auto;
+}
+.mint-file-browser__skeleton-row {
   display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.625rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
 }
-.mint-experiment-popover__card-icon {
-  width: 2rem;
-  height: 2rem;
+.mint-file-browser__error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 20px;
+  color: var(--mint-error);
+  overflow: auto;
+}
+.mint-file-browser__listing > .mint-empty-state {
+  padding: 32px 20px;
+  overflow: auto;
+}
+.mint-file-browser__status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-wrap: wrap;
   flex-shrink: 0;
-  border-radius: var(--radius-sm);
-  background: var(--color-primary-soft);
-  display: grid;
-  place-items: center;
 }
-.mint-experiment-popover__card-icon svg {
-  width: 1rem;
-  height: 1rem;
-  color: var(--color-primary);
+.mint-file-browser__status-spacer {
+  flex: 1;
 }
-.mint-experiment-popover__card-info {
+.mint-file-browser-dialog__footer {
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+.mint-file-browser__tray {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+}
+.mint-file-browser__tray-main {
   flex: 1;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
 }
-/* Experiment code in the card — small mono badge at the top of info */
-.mint-experiment-popover__card-code {
-  align-self: flex-start;
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--color-primary);
-  background: var(--color-primary-soft);
-  padding: 0.0625rem 0.375rem;
-  border-radius: 9999px;
-  line-height: 1.3;
-  font-variant-numeric: tabular-nums;
+.mint-file-browser__tray-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-height: 32px;
 }
-.mint-experiment-popover__card-name {
-  font-size: 0.8125rem;
+.mint-file-browser__tray-count {
+  font-size: 13px;
   font-weight: 600;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
 }
-.mint-experiment-popover__card-status {
-  font-size: 0.6875rem;
+.mint-file-browser__tray-summary,
+.mint-file-browser__selection-hint {
+  font-size: 12px;
   color: var(--text-muted);
-  line-height: 1.3;
 }
-/* ─── Card: unresolved variants ─── */
-.mint-experiment-popover__card--error {
-  background: var(--mint-error-bg);
+.mint-file-browser__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 84px;
+  overflow-y: auto;
+  margin-top: 4px;
 }
-.mint-experiment-popover__card-icon--error {
-  background: transparent;
+.mint-file-browser__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding-left: 8px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 12px;
 }
-.mint-experiment-popover__card-icon--error svg {
-  color: var(--mint-error);
+.mint-file-browser__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mint-experiment-popover__card-message {
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-  line-height: 1.4;
-  overflow-wrap: anywhere;
+.mint-file-browser__chip-remove {
+  flex-shrink: 0;
 }
-/* Placeholder lines mirroring the code / name / status stack of a real card. */
-.mint-experiment-popover__skeleton-line {
-  display: block;
-  height: 0.625rem;
-  border-radius: var(--radius-sm);
-  background-color: var(--bg-hover);
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-hover) 0%,
-    var(--bg-secondary) 40%,
-    var(--bg-hover) 60%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
+.mint-file-browser__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
-.mint-experiment-popover__skeleton-line--code {
-  width: 3.5rem;
-  height: 0.75rem;
-  border-radius: 9999px;
+@media (max-width: 600px) {
+  .mint-file-browser-overlay {
+    padding: 8px;
+  }
+  .mint-file-browser-dialog {
+    max-height: calc(100dvh - 16px);
+  }
+  .mint-file-browser-dialog__header {
+    padding: 12px;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .mint-file-browser__title {
+    font-size: 15px;
+  }
+  .mint-file-browser__local {
+    order: 3;
+  }
+  .mint-file-browser__mounts {
+    padding: 8px 12px 0;
+  }
+  .mint-file-browser__mounts-label {
+    display: none;
+  }
+  .mint-file-browser__toolbar {
+    padding: 6px 12px 10px;
+  }
+  .mint-file-browser__tools {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .mint-file-browser__search {
+    flex-basis: calc(100% - 42px);
+  }
+  .mint-file-browser__rules {
+    order: 2;
+    flex: 1;
+    max-width: none;
+  }
+  .mint-file-browser__select-folder {
+    order: 3;
+    margin-left: auto;
+  }
+  .mint-file-browser__head,
+  .mint-file-browser__row {
+    grid-template-columns: 16px 20px minmax(0, 1fr) 64px 32px;
+    gap: 6px;
+    padding-inline: 12px;
+  }
+  .mint-file-browser__col-type,
+  .mint-file-browser__type {
+    display: none;
+  }
+  .mint-file-browser__name-cell {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+  .mint-file-browser__name {
+    max-width: 100%;
+  }
+  .mint-file-browser__status {
+    padding-inline: 12px;
+  }
+  .mint-file-browser__legend {
+    display: none;
+  }
+  .mint-file-browser-dialog__footer {
+    padding: 10px 12px;
+  }
+  .mint-file-browser__tray {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .mint-file-browser__actions {
+    justify-content: flex-end;
+  }
+  .mint-file-browser__chips {
+    max-height: 80px;
+  }
 }
-.mint-experiment-popover__skeleton-line--name {
-  width: 100%;
-  margin-top: 0.25rem;
+/* Short windows scroll the workspace while keeping confirmation reachable. */
+@media (max-height: 600px) {
+  .mint-file-browser {
+    overflow-y: auto;
+  }
+  .mint-file-browser__listing {
+    flex-shrink: 0;
+  }
+  .mint-file-browser__rows {
+    max-height: none;
+  }
+  .mint-file-browser__chips {
+    max-height: 40px;
+  }
 }
-.mint-experiment-popover__skeleton-line--status {
-  width: 45%;
-  margin-top: 0.25rem;
+@media (max-height: 600px) and (min-width: 601px) {
+  .mint-file-browser-overlay {
+    padding: 8px;
+  }
+  .mint-file-browser-dialog {
+    max-height: calc(100dvh - 16px);
+  }
+  .mint-file-browser-dialog__header {
+    padding-block: 8px;
+  }
+  .mint-file-browser__context {
+    display: none;
+  }
+  .mint-file-browser__toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 8px;
+    padding-block: 6px;
+  }
+  .mint-file-browser__pathbar {
+    margin: 0;
+  }
+  .mint-file-browser__rules {
+    display: none;
+  }
 }
-/* Action row sits BELOW the card (was inside) so the buttons have
-   room to breathe and don't compete with the info stack. */
-.mint-experiment-popover__card-actions {
+.mint-artifact-save-dialog {
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
+  flex-direction: column;
+  gap: 1rem;
 }
-.mint-experiment-popover__change-btn,
-.mint-experiment-popover__detach-btn {
-  padding: 0.3125rem 0.625rem;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
+.mint-artifact-save-dialog__immutable {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+.mint-artifact-save-dialog__immutable code {
+  font-family: var(--font-mono, 'Fira Code', monospace);
   font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+/* ExperimentPopover — aligned with refresh design (AppPluginSwitcher / AppTopBar page selector) */
+/* Container */
+.mint-experiment-popover {
+  position: relative;
+}
+/* Split trigger container */
+.mint-experiment-popover__split {
+  display: inline-flex;
+  align-items: stretch;
+}
+/* When split has save, trigger loses its right border and radii so it meets
+   the save button flush. */
+.mint-experiment-popover__split--with-save .mint-experiment-popover__trigger {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+/* ─── Trigger (left / main chip) ───
+   Shows the experiment name, truncated to preserve topbar density. */
+.mint-experiment-popover__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.375rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.8125rem;
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
+  white-space: nowrap;
+  max-width: 220px;
+  box-sizing: border-box;
+  transform: translateY(0);
   transition:
     background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
     color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
-.mint-experiment-popover__change-btn {
-  color: var(--color-primary);
+/* Hover (single-trigger mode) — lift + soft shadow. Gated :not(--active) so
+   the chip doesn't bounce while its panel is open. */
+.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
+  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
+  background: var(--bg-hover);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }
-.mint-experiment-popover__change-btn:hover {
-  background: var(--color-primary-soft);
+.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
+  .mint-experiment-popover__trigger:active:not(.mint-experiment-popover__trigger--active) {
+  transform: translateY(0);
+  box-shadow: none;
+  transition-duration: 0.05s;
 }
-.mint-experiment-popover__detach-btn {
+/* Active (panel open) — ring treatment, same language as PluginSwitcher/page selector */
+.mint-experiment-popover__trigger--active {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+.mint-experiment-popover__trigger--empty {
   color: var(--text-muted);
-  font-weight: 400;
 }
-.mint-experiment-popover__detach-btn:hover {
-  color: var(--mint-error);
-  background: rgba(239, 68, 68, 0.08);
+.mint-experiment-popover__trigger-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--color-primary);
 }
-@keyframes mint-experiment-popover-spin {
-  to { transform: rotate(360deg); }
+.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-icon {
+  color: var(--text-muted);
 }
-@keyframes mint-experiment-popover-shimmer {
-  0%   { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
+.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-icon {
+  color: var(--color-primary);
 }
-/* Respect motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  .mint-experiment-popover__trigger,
-  .mint-experiment-popover__save-trigger,
-  .mint-experiment-popover__select-btn {
-    transition-property: background-color, border-color, box-shadow, color, opacity;
-    transition-duration: 0.15s;
-    transition-timing-function: ease;
-  }
-  .mint-experiment-popover__split--with-save:hover > *,
-  .mint-experiment-popover__split--with-save:active > *,
-  .mint-experiment-popover__trigger:hover,
-  .mint-experiment-popover__trigger:active,
-  .mint-experiment-popover__save-trigger:hover,
-  .mint-experiment-popover__save-trigger:active,
-  .mint-experiment-popover__select-btn:hover,
-  .mint-experiment-popover__select-btn:active {
-    transform: none;
-  }
-  .mint-experiment-popover__trigger-chevron {
-    transition: none;
-  }
-  /* Placeholders stay as flat blocks — still legible as "not loaded yet". */
-  .mint-experiment-popover__trigger-skeleton,
-  .mint-experiment-popover__skeleton-line {
-    animation: none;
-    background-image: none;
-  }
+.mint-experiment-popover__trigger-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
 }
-/* FitPanel Component Styles */
-.mint-fit-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+/* Experiment code fallback in the trigger — monospace, tabular */
+.mint-experiment-popover__trigger-code {
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
 }
-/* Action bar */
-.mint-fit-panel__actions {
-  display: flex;
-  gap: 0.5rem;
+.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-code {
+  color: var(--text-muted);
 }
-/* Progress */
-.mint-fit-panel__progress {
-  padding: 0.25rem 0;
+.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-code {
+  color: var(--color-primary);
 }
-/* Result list */
-.mint-fit-panel__results {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
+/* ─── Unresolved states ───
+   An experiment is bound but has no name yet. The chip must not read "No
+   experiment", and it must never fall back to the numeric id — a name only
+   ever comes from the platform. */
+.mint-experiment-popover__trigger--loading {
+  cursor: progress;
 }
-.mint-fit-panel__result-list {
-  display: flex;
-  flex-direction: column;
+.mint-experiment-popover__trigger--loading .mint-experiment-popover__trigger-icon {
+  color: var(--text-muted);
 }
-.mint-fit-panel__result-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--border-color);
+.mint-experiment-popover__trigger--error {
+  border-color: var(--mint-error-border);
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
 }
-.mint-fit-panel__result-row:last-child {
-  border-bottom: none;
+.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-icon,
+.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-chevron {
+  color: var(--mint-error);
 }
-.mint-fit-panel__result-label {
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
-}
-.mint-fit-panel__result-value {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
-}
-/* Result value variants */
-.mint-fit-panel__result-value--success {
-  color: var(--mint-success);
-}
-.mint-fit-panel__result-value--warning {
-  color: var(--mint-warning);
-}
-.mint-fit-panel__result-value--error {
-  color: var(--mint-error);
+/* Placeholder bar standing in for the name while it resolves. */
+.mint-experiment-popover__trigger-skeleton {
+  flex: 1;
+  min-width: 4.5rem;
+  height: 0.625rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  background-image: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 0%,
+    var(--bg-hover) 40%,
+    var(--bg-tertiary) 60%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
 }
-/* AppAvatarMenu — avatar button + dropdown */
-.mint-avatar-menu {
-  position: relative;
+.mint-experiment-popover__trigger-chevron {
+  width: 0.8125rem;
+  height: 0.8125rem;
   flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.2s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
-/* Pill trigger — avatar circle + username text on the right. Matches the
-   shared TopBar account-trigger convention (GitHub/Linear-style). */
-.mint-avatar-menu__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius);
-  font-family: inherit;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-.mint-avatar-menu__trigger:hover,
-.mint-avatar-menu__trigger--open {
-  background: var(--bg-hover);
-}
-.mint-avatar-menu__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-chevron {
+  transform: rotate(180deg);
+  color: var(--color-primary);
 }
-/* Gradient avatar chip inside the trigger */
-.mint-avatar-menu__avatar {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 9999px;
+/* ─── Save trigger (right half of split) — filled-button treatment ─── */
+.mint-experiment-popover__save-trigger {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
-  line-height: 1;
-  font-weight: 500;
+  width: 2.375rem;
+  height: 2.375rem;
+  border: 1px solid var(--color-primary);
+  border-left: 1px solid rgba(255, 255, 255, 0.25);
+  background-color: var(--color-primary);
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.12),
+    rgba(255, 255, 255, 0)
+  );
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
   color: white;
-  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+  cursor: pointer;
   flex-shrink: 0;
+  box-sizing: border-box;
+  transform: translateY(0);
+  transition:
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
-/* Username next to the avatar — hidden below 640px to preserve space */
-.mint-avatar-menu__name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  white-space: nowrap;
+/* Save trigger: press-to-flat (gradient cleared) */
+.mint-experiment-popover__save-trigger:active:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
+  transform: translateY(0);
+  box-shadow: none;
+  background-image: none;
+  transition-duration: 0.05s;
 }
-@media (max-width: 640px) {
-  .mint-avatar-menu__name {
-    display: none;
-  }
-
-  .mint-avatar-menu__trigger {
-    padding: 0.25rem;
-  }
+.mint-experiment-popover__save-trigger--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-.mint-avatar-menu__panel {
+.mint-experiment-popover__save-trigger--loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+/* Success state: green surface + keep the catch-of-light */
+.mint-experiment-popover__save-trigger--success {
+  background-color: var(--mint-success, #10b981);
+  border-color: var(--mint-success, #10b981);
+  border-left-color: rgba(255, 255, 255, 0.3);
+}
+.mint-experiment-popover__save-trigger-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+.mint-experiment-popover__spinner--inline {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: mint-experiment-popover-spin 0.6s linear infinite;
+}
+/* ─── Split unit cohesion ─── */
+/* When split has both halves, hovering either half lifts BOTH together so the
+   visually attached unit moves as one object. Color changes stay per-half so
+   "which action is hot" is still readable. */
+.mint-experiment-popover__split--with-save:hover
+  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
+.mint-experiment-popover__split--with-save:hover
+  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+.mint-experiment-popover__split--with-save:active
+  > .mint-experiment-popover__trigger:not(.mint-experiment-popover__trigger--active),
+.mint-experiment-popover__split--with-save:active
+  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
+  transform: translateY(0);
+  box-shadow: none;
+  transition-duration: 0.05s;
+}
+/* Per-half color-on-hover (only when the SPECIFIC half is being pointed at) */
+.mint-experiment-popover__split--with-save
+  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
+  background: var(--bg-hover);
+  border-color: var(--color-primary);
+}
+.mint-experiment-popover__split--with-save
+  .mint-experiment-popover__save-trigger:hover:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+.mint-experiment-popover__split--with-save
+  .mint-experiment-popover__save-trigger--success:hover:not(:disabled) {
+  background-color: var(--mint-success-hover, #059669);
+  border-color: var(--mint-success-hover, #059669);
+}
+/* Flatten the gradient on active save press */
+.mint-experiment-popover__split--with-save:active
+  > .mint-experiment-popover__save-trigger:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
+  background-image: none;
+}
+/* ─── Popover panel ─── */
+.mint-experiment-popover__panel {
   position: absolute;
   top: calc(100% + 0.5rem);
   right: 0;
-  width: 13.75rem;
+  width: 17.5rem;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
-  padding: 0.375rem;
-  z-index: 60;
+  z-index: 50;
+  overflow: hidden;
 }
-.mint-avatar-menu__header {
-  padding: 0.5rem 0.625rem 0.625rem;
+/* Header */
+.mint-experiment-popover__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 1rem 0.5rem;
   border-bottom: 1px solid var(--border-light);
-  margin-bottom: 0.25rem;
 }
-.mint-avatar-menu__user-name {
-  font-size: 0.78125rem;
+.mint-experiment-popover__title {
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-primary);
-  line-height: 1.25;
 }
-.mint-avatar-menu__user-email {
+.mint-experiment-popover__subtitle {
   font-size: 0.6875rem;
-  color: var(--text-secondary);
-  margin-top: 0.0625rem;
-  line-height: 1.25;
-  word-break: break-all;
+  font-weight: 400;
+  color: var(--text-muted);
 }
-.mint-avatar-menu__item {
-  display: flex;
+.mint-experiment-popover__body {
+  padding: 0.75rem 1rem;
+}
+/* Select experiment button (no experiment state) */
+.mint-experiment-popover__select-btn {
+  display: inline-flex;
   align-items: center;
-  gap: 0.625rem;
+  justify-content: center;
+  gap: 0.375rem;
   width: 100%;
-  padding: 0.4375rem 0.625rem;
-  border: 0;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 0.78125rem;
+  height: 2.125rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--color-primary);
+  background-color: var(--color-primary-soft);
+  border-radius: var(--radius-md);
+  color: var(--color-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
   font-family: inherit;
-  text-align: left;
-  text-decoration: none;
   cursor: pointer;
-  transition: background-color var(--mint-transition);
+  transform: translateY(0);
+  transition:
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
-.mint-avatar-menu__item:hover {
-  background: var(--bg-hover);
+.mint-experiment-popover__select-btn:hover {
+  background-color: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }
-.mint-avatar-menu__item--danger {
-  color: var(--mint-error);
-}
-.mint-avatar-menu__item-icon {
-  display: grid;
-  place-items: center;
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-.mint-avatar-menu__item-icon svg {
-  width: 0.8125rem;
-  height: 0.8125rem;
-}
-.mint-avatar-menu__item--danger .mint-avatar-menu__item-icon {
-  color: var(--mint-error);
-}
-.mint-avatar-menu__item-label {
-  flex: 1;
-}
-.mint-avatar-menu__item-right {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-.mint-avatar-menu__divider {
-  height: 1px;
-  background: var(--border-light);
-  margin: 0.25rem 0;
-}
-/* AppTopBar page selector — left-side route/page dropdown */
-.mint-page-selector {
-  position: relative;
-  flex-shrink: 0;
-}
-.mint-page-selector__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  height: 2.375rem;
-  padding: 0 0.375rem 0 0.625rem;
-  border: 1px solid var(--border-color);
-  background: var(--bg-card);
-  color: var(--text-primary);
-  border-radius: var(--radius-md);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-  transform: translateY(0);
-}
-.mint-page-selector__trigger:hover:not(.mint-page-selector__trigger--open) {
-  background: var(--bg-hover);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-.mint-page-selector__trigger:active:not(.mint-page-selector__trigger--open) {
+.mint-experiment-popover__select-btn:active {
   transform: translateY(0);
   box-shadow: none;
   transition-duration: 0.05s;
 }
-@media (prefers-reduced-motion: reduce) {
-  .mint-page-selector__trigger,
-  .mint-page-selector__trigger:hover,
-  .mint-page-selector__trigger:active {
-    transform: none;
-  }
-}
-.mint-page-selector__trigger--open {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-soft);
+/* Experiment card (selected state) */
+.mint-experiment-popover__card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.625rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
 }
-.mint-page-selector__icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.375rem;
+.mint-experiment-popover__card-icon {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
   background: var(--color-primary-soft);
-  color: var(--color-primary);
   display: grid;
   place-items: center;
-  flex-shrink: 0;
-}
-.mint-page-selector__icon svg {
-  width: 0.875rem;
-  height: 0.875rem;
 }
-.mint-page-selector__icon--metadata {
-  background: transparent;
-  color: inherit;
+.mint-experiment-popover__card-icon svg {
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-primary);
 }
-.mint-page-selector__trigger-metadata-icon.mint-plugin-icon--sm {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.375rem;
+.mint-experiment-popover__card-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
-.mint-page-selector__icon-fallback {
-  font-size: 0.6875rem;
+/* Experiment code in the card — small mono badge at the top of info */
+.mint-experiment-popover__card-code {
+  align-self: flex-start;
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.625rem;
   font-weight: 600;
-  font-family: var(--font-mono, ui-monospace, monospace);
+  letter-spacing: 0.02em;
+  color: var(--color-primary);
+  background: var(--color-primary-soft);
+  padding: 0.0625rem 0.375rem;
+  border-radius: 9999px;
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
 }
-.mint-page-selector__label {
-  flex: 1;
-  text-align: left;
-  white-space: nowrap;
+.mint-experiment-popover__card-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
 }
-.mint-page-selector__chevron-wrap {
-  width: 1.625rem;
-  height: 1.625rem;
-  border-radius: 0.375rem;
-  background: var(--bg-tertiary);
+.mint-experiment-popover__card-status {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  line-height: 1.3;
+}
+/* ─── Card: unresolved variants ─── */
+.mint-experiment-popover__card--error {
+  background: var(--mint-error-bg);
+}
+.mint-experiment-popover__card-icon--error {
+  background: transparent;
+}
+.mint-experiment-popover__card-icon--error svg {
+  color: var(--mint-error);
+}
+.mint-experiment-popover__card-message {
+  font-size: 0.6875rem;
   color: var(--text-secondary);
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
 }
-.mint-page-selector__chevron {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  transition: transform var(--mint-transition);
+/* Placeholder lines mirroring the code / name / status stack of a real card. */
+.mint-experiment-popover__skeleton-line {
+  display: block;
+  height: 0.625rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-hover);
+  background-image: linear-gradient(
+    90deg,
+    var(--bg-hover) 0%,
+    var(--bg-secondary) 40%,
+    var(--bg-hover) 60%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: mint-experiment-popover-shimmer 1.6s ease-in-out infinite;
 }
-.mint-page-selector__chevron--open {
-  transform: rotate(180deg);
+.mint-experiment-popover__skeleton-line--code {
+  width: 3.5rem;
+  height: 0.75rem;
+  border-radius: 9999px;
 }
-.mint-page-selector__menu {
-  position: absolute;
-  top: calc(100% + 0.375rem);
-  left: 0;
-  width: 16.25rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  padding: 0.375rem;
-  z-index: 50;
+.mint-experiment-popover__skeleton-line--name {
+  width: 100%;
+  margin-top: 0.25rem;
 }
-.mint-page-selector__menu-title {
-  padding: 0.375rem 0.625rem 0.5rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-muted);
+.mint-experiment-popover__skeleton-line--status {
+  width: 45%;
+  margin-top: 0.25rem;
 }
-.mint-page-selector__item {
+/* Action row sits BELOW the card (was inside) so the buttons have
+   room to breathe and don't compete with the info stack. */
+.mint-experiment-popover__card-actions {
   display: flex;
+  justify-content: flex-end;
   align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.5rem 0.625rem;
-  border: 0;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+.mint-experiment-popover__change-btn,
+.mint-experiment-popover__detach-btn {
+  padding: 0.3125rem 0.625rem;
+  border: none;
   background: transparent;
-  border-radius: 0.4375rem;
-  color: var(--text-primary);
-  font-size: 0.8125rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
   font-weight: 500;
   font-family: inherit;
-  text-align: left;
-  text-decoration: none;
   cursor: pointer;
-  transition: background-color var(--mint-transition);
+  transition:
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
 }
-.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
-  background: var(--bg-hover);
+.mint-experiment-popover__change-btn {
+  color: var(--color-primary);
 }
-.mint-page-selector__item--active {
-  background: var(--bg-tertiary);
-  font-weight: 600;
+.mint-experiment-popover__change-btn:hover {
+  background: var(--color-primary-soft);
 }
-.mint-page-selector__item--disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
+.mint-experiment-popover__detach-btn {
+  color: var(--text-muted);
+  font-weight: 400;
 }
-.mint-page-selector__item-icon {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 0.3125rem;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-.mint-page-selector__item--active .mint-page-selector__item-icon {
-  background: var(--color-primary-soft);
-  color: var(--color-primary);
-}
-.mint-page-selector__item-icon--metadata,
-.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
-  background: transparent;
-  color: inherit;
-}
-.mint-page-selector__item-icon svg {
-  width: 0.8125rem;
-  height: 0.8125rem;
-}
-.mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 0.3125rem;
-}
-.mint-page-selector__item-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* AppTopBar pillNav — centered top-level navigation pills */
-.mint-pill-nav {
-  display: inline-flex;
-  padding: 0.1875rem;
-  border-radius: 9999px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-light);
-  flex-shrink: 0;
+.mint-experiment-popover__detach-btn:hover {
+  color: var(--mint-error);
+  background: rgba(239, 68, 68, 0.08);
 }
-.mint-pill-nav__item-wrap {
-  position: relative;
-  display: inline-flex;
+@keyframes mint-experiment-popover-spin {
+  to { transform: rotate(360deg); }
 }
-.mint-pill-nav__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  border: 0;
-  padding: 0.375rem 0.875rem;
-  border-radius: 9999px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  color: var(--text-secondary);
-  background: transparent;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    color 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    background-color 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+@keyframes mint-experiment-popover-shimmer {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
 }
+/* Respect motion preferences */
 @media (prefers-reduced-motion: reduce) {
-  .mint-pill-nav__item {
+  .mint-experiment-popover__trigger,
+  .mint-experiment-popover__save-trigger,
+  .mint-experiment-popover__select-btn {
+    transition-property: background-color, border-color, box-shadow, color, opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+  .mint-experiment-popover__split--with-save:hover > *,
+  .mint-experiment-popover__split--with-save:active > *,
+  .mint-experiment-popover__trigger:hover,
+  .mint-experiment-popover__trigger:active,
+  .mint-experiment-popover__save-trigger:hover,
+  .mint-experiment-popover__save-trigger:active,
+  .mint-experiment-popover__select-btn:hover,
+  .mint-experiment-popover__select-btn:active {
+    transform: none;
+  }
+  .mint-experiment-popover__trigger-chevron {
     transition: none;
   }
+  /* Placeholders stay as flat blocks — still legible as "not loaded yet". */
+  .mint-experiment-popover__trigger-skeleton,
+  .mint-experiment-popover__skeleton-line {
+    animation: none;
+    background-image: none;
+  }
 }
-.mint-pill-nav__item:hover:not(.mint-pill-nav__item--active):not(.mint-pill-nav__item--disabled) {
-  color: var(--text-primary);
-}
-.mint-pill-nav__item--active {
-  color: var(--text-primary);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-  font-weight: 600;
+/* FitPanel Component Styles */
+.mint-fit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
-.mint-pill-nav__item--disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
+/* Action bar */
+.mint-fit-panel__actions {
+  display: flex;
+  gap: 0.5rem;
 }
-.mint-pill-nav__item:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+/* Progress */
+.mint-fit-panel__progress {
+  padding: 0.25rem 0;
 }
-.mint-pill-nav__icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
+/* Result list */
+.mint-fit-panel__results {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
 }
-.mint-pill-nav__chevron {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  flex-shrink: 0;
-  transition: transform 160ms ease;
+.mint-fit-panel__result-list {
+  display: flex;
+  flex-direction: column;
 }
-.mint-pill-nav__chevron--open {
-  transform: rotate(180deg);
+.mint-fit-panel__result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-pill-nav__dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 50%;
-  z-index: 45;
-  min-width: 18rem;
-  padding: 0.375rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--border-light);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-lg);
-  transform: translateX(-50%);
+.mint-fit-panel__result-row:last-child {
+  border-bottom: none;
 }
-.mint-pill-nav__dropdown-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.5rem 0.625rem;
-  border-radius: 0.5rem;
-  color: var(--text-secondary);
+.mint-fit-panel__result-label {
   font-size: 0.8125rem;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.mint-pill-nav__dropdown-item:hover:not(.mint-pill-nav__dropdown-item--disabled) {
-  color: var(--text-primary);
-  background: var(--bg-secondary);
+  color: var(--text-secondary);
 }
-.mint-pill-nav__dropdown-item--active {
+.mint-fit-panel__result-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
   color: var(--text-primary);
-  background: var(--bg-secondary);
-  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
-.mint-pill-nav__dropdown-item--disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
+/* Result value variants */
+.mint-fit-panel__result-value--success {
+  color: var(--mint-success);
 }
-.mint-pill-nav__dropdown-label {
-  flex-shrink: 0;
+.mint-fit-panel__result-value--warning {
+  color: var(--mint-warning);
 }
-.mint-pill-nav__dropdown-description {
-  margin-left: auto;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  font-weight: 400;
+.mint-fit-panel__result-value--error {
+  color: var(--mint-error);
 }
-/* AppPluginSwitcher — plugin chip + switcher dropdown */
-.mint-plugin-switcher {
+/* AppAvatarMenu — avatar button + dropdown */
+.mint-avatar-menu {
   position: relative;
   flex-shrink: 0;
 }
-.mint-plugin-switcher__trigger {
+/* Pill trigger — avatar circle + username text on the right. Matches the
+   shared TopBar account-trigger convention (GitHub/Linear-style). */
+.mint-avatar-menu__trigger {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  height: 2.375rem;
-  padding: 0 0.375rem 0 0.375rem;
-  border: 1px solid var(--border-color);
-  background: var(--bg-card);
-  color: var(--text-primary);
-  border-radius: var(--radius-md);
-  font-size: 0.8125rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
   font-family: inherit;
   cursor: pointer;
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-  transform: translateY(0);
+  transition: background-color 0.15s ease;
 }
-.mint-plugin-switcher__trigger:hover:not(.mint-plugin-switcher__trigger--open) {
+.mint-avatar-menu__trigger:hover,
+.mint-avatar-menu__trigger--open {
   background: var(--bg-hover);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-.mint-plugin-switcher__trigger:active:not(.mint-plugin-switcher__trigger--open) {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .mint-plugin-switcher__trigger,
-  .mint-plugin-switcher__trigger:hover,
-  .mint-plugin-switcher__trigger:active {
-    transform: none;
-  }
-}
-.mint-plugin-switcher__trigger--open {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-soft);
 }
-.mint-plugin-switcher__label {
-  font-weight: 600;
-  color: var(--text-primary);
+.mint-avatar-menu__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
-.mint-plugin-switcher__version {
-  color: var(--text-muted);
-  font-family: var(--font-mono, ui-monospace, monospace);
+/* Gradient avatar chip inside the trigger */
+.mint-avatar-menu__avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 500;
+  color: white;
+  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+  flex-shrink: 0;
+}
+/* Username next to the avatar — hidden below 640px to preserve space */
+.mint-avatar-menu__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+@media (max-width: 640px) {
+  .mint-avatar-menu__name {
+    display: none;
+  }
+
+  .mint-avatar-menu__trigger {
+    padding: 0.25rem;
+  }
+}
+.mint-avatar-menu__panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  width: 13.75rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
+  z-index: 60;
+}
+.mint-avatar-menu__header {
+  padding: 0.5rem 0.625rem 0.625rem;
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 0.25rem;
+}
+.mint-avatar-menu__user-name {
+  font-size: 0.78125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.25;
+}
+.mint-avatar-menu__user-email {
   font-size: 0.6875rem;
+  color: var(--text-secondary);
+  margin-top: 0.0625rem;
+  line-height: 1.25;
+  word-break: break-all;
 }
-.mint-plugin-switcher__chevron-wrap {
+.mint-avatar-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+.mint-avatar-menu__item:hover {
+  background: var(--bg-hover);
+}
+.mint-avatar-menu__item--danger {
+  color: var(--mint-error);
+}
+.mint-avatar-menu__item-icon {
+  display: grid;
+  place-items: center;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.mint-avatar-menu__item-icon svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.mint-avatar-menu__item--danger .mint-avatar-menu__item-icon {
+  color: var(--mint-error);
+}
+.mint-avatar-menu__item-label {
+  flex: 1;
+}
+.mint-avatar-menu__item-right {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-avatar-menu__divider {
+  height: 1px;
+  background: var(--border-light);
+  margin: 0.25rem 0;
+}
+/* AppTopBar page selector — left-side route/page dropdown */
+.mint-page-selector {
+  position: relative;
+  flex-shrink: 0;
+}
+.mint-page-selector__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  height: 2.375rem;
+  padding: 0 0.375rem 0 0.625rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  transform: translateY(0);
+}
+.mint-page-selector__trigger:hover:not(.mint-page-selector__trigger--open) {
+  background: var(--bg-hover);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.mint-page-selector__trigger:active:not(.mint-page-selector__trigger--open) {
+  transform: translateY(0);
+  box-shadow: none;
+  transition-duration: 0.05s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .mint-page-selector__trigger,
+  .mint-page-selector__trigger:hover,
+  .mint-page-selector__trigger:active {
+    transform: none;
+  }
+}
+.mint-page-selector__trigger--open {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+.mint-page-selector__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.mint-page-selector__icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.mint-page-selector__icon--metadata {
+  background: transparent;
+  color: inherit;
+}
+.mint-page-selector__trigger-metadata-icon.mint-plugin-icon--sm {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+}
+.mint-page-selector__icon-fallback {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+.mint-page-selector__label {
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mint-page-selector__chevron-wrap {
   width: 1.625rem;
   height: 1.625rem;
   border-radius: 0.375rem;
@@ -17090,17 +17309,17 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   color: var(--text-secondary);
   display: grid;
   place-items: center;
-  margin-left: 0.125rem;
+  flex-shrink: 0;
 }
-.mint-plugin-switcher__chevron {
+.mint-page-selector__chevron {
   width: 0.8125rem;
   height: 0.8125rem;
   transition: transform var(--mint-transition);
 }
-.mint-plugin-switcher__chevron--open {
+.mint-page-selector__chevron--open {
   transform: rotate(180deg);
 }
-.mint-plugin-switcher__menu {
+.mint-page-selector__menu {
   position: absolute;
   top: calc(100% + 0.375rem);
   left: 0;
@@ -17112,662 +17331,1435 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   padding: 0.375rem;
   z-index: 50;
 }
-.mint-plugin-switcher__menu-title {
+.mint-page-selector__menu-title {
   padding: 0.375rem 0.625rem 0.5rem;
   font-size: 0.625rem;
   font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.mint-page-selector__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.4375rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+  background: var(--bg-hover);
+}
+.mint-page-selector__item--active {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+.mint-page-selector__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+.mint-page-selector__item-icon {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.mint-page-selector__item--active .mint-page-selector__item-icon {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
+  background: transparent;
+  color: inherit;
+}
+.mint-page-selector__item-icon svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.mint-page-selector__metadata-icon.mint-plugin-icon--sm {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
+}
+.mint-page-selector__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* AppTopBar pillNav — centered top-level navigation pills */
+.mint-pill-nav {
+  display: inline-flex;
+  padding: 0.1875rem;
+  border-radius: 9999px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  flex-shrink: 0;
+}
+.mint-pill-nav__item-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.mint-pill-nav__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 0;
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--text-secondary);
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    color 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    background-color 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 220ms var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .mint-pill-nav__item {
+    transition: none;
+  }
+}
+.mint-pill-nav__item:hover:not(.mint-pill-nav__item--active):not(.mint-pill-nav__item--disabled) {
+  color: var(--text-primary);
+}
+.mint-pill-nav__item--active {
+  color: var(--text-primary);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-sm);
+  font-weight: 600;
+}
+.mint-pill-nav__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+.mint-pill-nav__item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.mint-pill-nav__icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+.mint-pill-nav__chevron {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  transition: transform 160ms ease;
+}
+.mint-pill-nav__chevron--open {
+  transform: rotate(180deg);
+}
+.mint-pill-nav__dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 50%;
+  z-index: 45;
+  min-width: 18rem;
+  padding: 0.375rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-light);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-lg);
+  transform: translateX(-50%);
+}
+.mint-pill-nav__dropdown-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.mint-pill-nav__dropdown-item:hover:not(.mint-pill-nav__dropdown-item--disabled) {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+.mint-pill-nav__dropdown-item--active {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+  font-weight: 600;
+}
+.mint-pill-nav__dropdown-item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+.mint-pill-nav__dropdown-label {
+  flex-shrink: 0;
+}
+.mint-pill-nav__dropdown-description {
+  margin-left: auto;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+/* AppPluginSwitcher — plugin chip + switcher dropdown */
+.mint-plugin-switcher {
+  position: relative;
+  flex-shrink: 0;
+}
+.mint-plugin-switcher__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.375rem;
+  padding: 0 0.375rem 0 0.375rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  transform: translateY(0);
+}
+.mint-plugin-switcher__trigger:hover:not(.mint-plugin-switcher__trigger--open) {
+  background: var(--bg-hover);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.mint-plugin-switcher__trigger:active:not(.mint-plugin-switcher__trigger--open) {
+  transform: translateY(0);
+  box-shadow: none;
+  transition-duration: 0.05s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .mint-plugin-switcher__trigger,
+  .mint-plugin-switcher__trigger:hover,
+  .mint-plugin-switcher__trigger:active {
+    transform: none;
+  }
+}
+.mint-plugin-switcher__trigger--open {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+.mint-plugin-switcher__label {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.mint-plugin-switcher__version {
+  color: var(--text-muted);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.6875rem;
+}
+.mint-plugin-switcher__chevron-wrap {
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 0.375rem;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  display: grid;
+  place-items: center;
+  margin-left: 0.125rem;
+}
+.mint-plugin-switcher__chevron {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  transition: transform var(--mint-transition);
+}
+.mint-plugin-switcher__chevron--open {
+  transform: rotate(180deg);
+}
+.mint-plugin-switcher__menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  width: 16.25rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
+  z-index: 50;
+}
+.mint-plugin-switcher__menu-title {
+  padding: 0.375rem 0.625rem 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.mint-plugin-switcher__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.5rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+.mint-plugin-switcher__item:hover {
+  background: var(--bg-hover);
+}
+.mint-plugin-switcher__item--active {
+  background: var(--bg-tertiary);
+}
+.mint-plugin-switcher__item-swatch {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
+  color: white;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-weight: 700;
+  font-size: 0.625rem;
+  flex-shrink: 0;
+}
+.mint-plugin-switcher__item-label {
+  flex: 1;
+}
+.mint-plugin-switcher__item-version {
+  color: var(--text-muted);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.6875rem;
+}
+.mint-plugin-switcher__item-check {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--color-primary);
+}
+.mint-plugin-switcher__divider {
+  height: 1px;
+  background: var(--border-light);
+  margin: 0.375rem 0;
+}
+.mint-plugin-switcher__install {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.5rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
+}
+.mint-plugin-switcher__install:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.mint-plugin-switcher__install svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.mint-mobile-support-gate {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  overflow-x: hidden;
+  background: var(--bg-primary, #f8fafc);
+  color: var(--text-primary, #0f172a);
+}
+.mint-mobile-support-gate *,
+.mint-mobile-support-gate *::before,
+.mint-mobile-support-gate *::after {
+  box-sizing: border-box;
+}
+.mint-mobile-support-gate__panel {
+  width: 28rem;
+  max-width: calc(100vw - 3rem);
+  display: grid;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.5rem;
+  background: var(--bg-secondary, #ffffff);
+  box-shadow: var(--shadow-md, 0 10px 30px rgb(15 23 42 / 0.08));
+}
+.mint-mobile-support-gate__mark {
+  width: 3rem;
+  height: 3rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--color-primary, #4f46e5) 22%, transparent);
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
+  color: var(--color-primary, #4f46e5);
+}
+.mint-mobile-support-gate__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-mobile-support-gate__copy {
+  min-width: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+.mint-mobile-support-gate__eyebrow {
+  margin: 0;
+  color: var(--text-muted, #64748b);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+.mint-mobile-support-gate__title {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.mint-mobile-support-gate__message {
+  margin: 0;
+  color: var(--text-secondary, #475569);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+.mint-mobile-support-gate__hint {
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: 0.5rem;
+  background: var(--bg-tertiary, #f1f5f9);
+  color: var(--text-secondary, #475569);
+  font-size: 0.875rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.mint-mobile-support-gate__hint-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  margin-top: 0.125rem;
+  color: var(--color-primary, #4f46e5);
+}
+@media (max-width: 480px) {
+  .mint-mobile-support-gate {
+    padding: 1rem;
+  }
+
+  .mint-mobile-support-gate__panel {
+    max-width: calc(100vw - 2rem);
+    padding: 1.25rem;
+  }
+
+  .mint-mobile-support-gate__title {
+    font-size: 1.25rem;
+  }
+}
+/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip with two
+   visual variants. Tintable via `--mint-plugin-icon-tone` custom property. */
+.mint-plugin-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-md, 0.5rem);
+  overflow: hidden;
+}
+/* Sizes */
+.mint-plugin-icon--sm { width: 1.5rem; height: 1.5rem; }
+.mint-plugin-icon--md { width: 2rem;   height: 2rem;   }
+.mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
+.mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }
+/* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
+.mint-plugin-icon--solid {
+  background-color: var(--mint-plugin-icon-tone, var(--color-primary));
+  color: white;
+}
+.mint-plugin-icon--tinted {
+  background-color: color-mix(in srgb, var(--mint-plugin-icon-tone, var(--color-primary)) 12%, transparent);
+  color: var(--mint-plugin-icon-tone, var(--color-primary));
+}
+/* Inner svg/img — sized to ~62% of chip */
+.mint-plugin-icon--sm .mint-plugin-icon__svg,
+.mint-plugin-icon--sm .mint-plugin-icon__img { width: 0.9375rem; height: 0.9375rem; }
+.mint-plugin-icon--md .mint-plugin-icon__svg,
+.mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem;  height: 1.125rem;  }
+.mint-plugin-icon--topbar .mint-plugin-icon__svg,
+.mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem; }
+.mint-plugin-icon--lg .mint-plugin-icon__svg,
+.mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem;    height: 1.5rem;    }
+.mint-plugin-icon__img {
+  object-fit: contain;
+}
+.mint-plugin-icon .mint-plugin-icon__svg--structured {
+  width: 100%;
+  height: 100%;
+}
+/* ReagentEditor Component Styles */
+.mint-reagent-editor {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+  border-top: 3px solid var(--reagent-color, var(--color-primary));
+  overflow: hidden;
+}
+/* Sections */
+.mint-reagent-editor__section {
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+.mint-reagent-editor__section-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: var(--reagent-color, var(--color-primary));
+  opacity: 0.7;
+}
+/* Identity */
+.mint-reagent-editor__identity {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.mint-reagent-editor__color-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-swatch {
+  display: block;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
+  transition: box-shadow 0.15s ease;
+}
+.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
+}
+.mint-reagent-editor__name-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  padding: 0.25rem 0;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease;
+}
+.mint-reagent-editor__name-input::placeholder {
   color: var(--text-muted);
+  font-weight: 400;
 }
-.mint-plugin-switcher__item {
+.mint-reagent-editor__name-input:focus {
+  border-bottom-color: var(--reagent-color, var(--color-primary));
+}
+/* Fields & layout */
+.mint-reagent-editor__field {
+  margin-bottom: 0.625rem;
+}
+.mint-reagent-editor__field:last-child {
+  margin-bottom: 0;
+}
+.mint-reagent-editor__field--flex {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+}
+.mint-reagent-editor__position-row {
   display: flex;
-  align-items: center;
   gap: 0.625rem;
   width: 100%;
-  padding: 0.4375rem 0.5rem;
-  border: 0;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 0.78125rem;
+}
+.mint-reagent-editor .mint-select {
+  width: 100%;
+  min-width: 0;
+}
+.mint-reagent-editor__label {
+  font-size: 0.75rem;
   font-weight: 500;
-  font-family: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color var(--mint-transition);
+  color: var(--text-secondary);
 }
-.mint-plugin-switcher__item:hover {
-  background: var(--bg-hover);
+.mint-reagent-editor__inline-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--form-height-sm);
+  padding: 0 0.625rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  outline: none;
+  text-transform: uppercase;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.mint-plugin-switcher__item--active {
-  background: var(--bg-tertiary);
+.mint-reagent-editor__inline-input::placeholder {
+  text-transform: none;
 }
-.mint-plugin-switcher__item-swatch {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 0.3125rem;
-  color: white;
-  display: grid;
-  place-items: center;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-weight: 700;
-  font-size: 0.625rem;
-  flex-shrink: 0;
+.mint-reagent-editor__inline-input:focus {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
 }
-.mint-plugin-switcher__item-label {
-  flex: 1;
+.mint-reagent-editor__inline-input--error {
+  border-color: var(--mint-error);
 }
-.mint-plugin-switcher__item-version {
-  color: var(--text-muted);
-  font-family: var(--font-mono, ui-monospace, monospace);
+.mint-reagent-editor__inline-input--error:focus {
+  border-color: var(--mint-error);
+  box-shadow: var(--focus-ring-error);
+}
+/* Inline field validation error */
+.mint-reagent-editor__field-error {
+  grid-column: 2;
   font-size: 0.6875rem;
+  color: var(--mint-error);
+  line-height: 1.2;
 }
-.mint-plugin-switcher__item-check {
-  width: 0.875rem;
-  height: 0.875rem;
-  color: var(--color-primary);
+/* Unit select in section header — uses reagent color */
+.mint-reagent-editor__unit-select {
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease;
 }
-.mint-plugin-switcher__divider {
-  height: 1px;
-  background: var(--border-light);
-  margin: 0.375rem 0;
+.mint-reagent-editor__unit-select:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
 }
-.mint-plugin-switcher__install {
+/* Dilution generator */
+.mint-reagent-editor__generator {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin-bottom: 0.625rem;
+  overflow: hidden;
+}
+.mint-reagent-editor__generator-inputs {
   display: flex;
-  align-items: center;
   gap: 0.625rem;
-  width: 100%;
-  padding: 0.4375rem 0.5rem;
-  border: 0;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  font-family: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color var(--mint-transition), color var(--mint-transition);
-}
-.mint-plugin-switcher__install:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  margin-bottom: 0.5rem;
 }
-.mint-plugin-switcher__install svg {
-  width: 0.8125rem;
-  height: 0.8125rem;
+.mint-reagent-editor__generator-inputs > * {
+  flex: 1;
+  min-width: 0;
 }
-.mint-mobile-support-gate {
-  box-sizing: border-box;
+/* Ensure all child controls fill their parent and can shrink */
+.mint-reagent-editor .mint-number-input {
   width: 100%;
-  max-width: 100vw;
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 1.5rem;
-  overflow-x: hidden;
-  background: var(--bg-primary, #f8fafc);
-  color: var(--text-primary, #0f172a);
+  min-width: 0;
 }
-.mint-mobile-support-gate *,
-.mint-mobile-support-gate *::before,
-.mint-mobile-support-gate *::after {
-  box-sizing: border-box;
+.mint-reagent-editor .mint-number-input__input {
+  min-width: 0;
+  width: 0;
+  flex: 1;
 }
-.mint-mobile-support-gate__panel {
-  width: 28rem;
-  max-width: calc(100vw - 3rem);
-  display: grid;
-  gap: 1rem;
-  padding: 1.5rem;
-  border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: 0.5rem;
-  background: var(--bg-secondary, #ffffff);
-  box-shadow: var(--shadow-md, 0 10px 30px rgb(15 23 42 / 0.08));
+.mint-reagent-editor .mint-number-input:focus-within {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
 }
-.mint-mobile-support-gate__mark {
-  width: 3rem;
-  height: 3rem;
-  display: inline-flex;
+.mint-reagent-editor__presets {
+  display: flex;
+  gap: 0.375rem;
+}
+.mint-reagent-editor__preset-btn {
+  flex: 1;
+  display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid color-mix(in srgb, var(--color-primary, #4f46e5) 22%, transparent);
-  border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
-  color: var(--color-primary, #4f46e5);
-}
-.mint-mobile-support-gate__icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mint-mobile-support-gate__copy {
-  min-width: 0;
-  display: grid;
-  gap: 0.5rem;
-}
-.mint-mobile-support-gate__eyebrow {
-  margin: 0;
-  color: var(--text-muted, #64748b);
+  height: 1.75rem;
+  font-family: 'Fira Code', monospace;
   font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1.3;
-  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.12s ease;
 }
-.mint-mobile-support-gate__title {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-size: 1.35rem;
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1.2;
-  overflow-wrap: anywhere;
+.mint-reagent-editor__preset-btn:hover {
+  color: var(--reagent-color, var(--color-primary));
+  border-color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
 }
-.mint-mobile-support-gate__message {
-  margin: 0;
-  color: var(--text-secondary, #475569);
-  font-size: 0.95rem;
-  line-height: 1.55;
-  overflow-wrap: anywhere;
+.mint-reagent-editor__preset-btn:active {
+  transform: scale(0.96);
 }
-.mint-mobile-support-gate__hint {
-  min-width: 0;
+/* Manual entry */
+.mint-reagent-editor__manual {
   display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.75rem;
-  border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: 0.5rem;
-  background: var(--bg-tertiary, #f1f5f9);
-  color: var(--text-secondary, #475569);
-  font-size: 0.875rem;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-.mint-mobile-support-gate__hint-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-  margin-top: 0.125rem;
-  color: var(--color-primary, #4f46e5);
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.625rem;
 }
-@media (max-width: 480px) {
-  .mint-mobile-support-gate {
-    padding: 1rem;
-  }
-
-  .mint-mobile-support-gate__panel {
-    max-width: calc(100vw - 2rem);
-    padding: 1.25rem;
-  }
-
-  .mint-mobile-support-gate__title {
-    font-size: 1.25rem;
-  }
+.mint-reagent-editor__manual .mint-number-input {
+  flex: 1;
+  width: 0; /* flex-basis override so flex: 1 controls sizing */
 }
-/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip with two
-   visual variants. Tintable via `--mint-plugin-icon-tone` custom property. */
-.mint-plugin-icon {
-  display: inline-flex;
+.mint-reagent-editor__add-btn {
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: var(--form-height-sm);
+  height: var(--form-height-sm);
   flex-shrink: 0;
-  border-radius: var(--radius-md, 0.5rem);
-  overflow: hidden;
-}
-/* Sizes */
-.mint-plugin-icon--sm { width: 1.5rem; height: 1.5rem; }
-.mint-plugin-icon--md { width: 2rem;   height: 2rem;   }
-.mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
-.mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }
-/* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
-.mint-plugin-icon--solid {
-  background-color: var(--mint-plugin-icon-tone, var(--color-primary));
+  border-radius: var(--radius);
+  background-color: var(--reagent-color, var(--color-primary));
   color: white;
+  border: none;
+  cursor: pointer;
+  transition: filter 0.15s ease, transform 0.1s ease;
 }
-.mint-plugin-icon--tinted {
-  background-color: color-mix(in srgb, var(--mint-plugin-icon-tone, var(--color-primary)) 12%, transparent);
-  color: var(--mint-plugin-icon-tone, var(--color-primary));
+.mint-reagent-editor__add-btn:hover:not(:disabled) {
+  filter: brightness(0.88);
 }
-/* Inner svg/img — sized to ~62% of chip */
-.mint-plugin-icon--sm .mint-plugin-icon__svg,
-.mint-plugin-icon--sm .mint-plugin-icon__img { width: 0.9375rem; height: 0.9375rem; }
-.mint-plugin-icon--md .mint-plugin-icon__svg,
-.mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem;  height: 1.125rem;  }
-.mint-plugin-icon--topbar .mint-plugin-icon__svg,
-.mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem; }
-.mint-plugin-icon--lg .mint-plugin-icon__svg,
-.mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem;    height: 1.5rem;    }
-.mint-plugin-icon__img {
-  object-fit: contain;
+.mint-reagent-editor__add-btn:active:not(:disabled) {
+  transform: scale(0.92);
 }
-.mint-plugin-icon .mint-plugin-icon__svg--structured {
-  width: 100%;
-  height: 100%;
+.mint-reagent-editor__add-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
 }
-/* ReagentEditor Component Styles */
-.mint-reagent-editor {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-lg);
+/* Level table */
+.mint-reagent-editor__table {
   border: 1px solid var(--border-color);
-  border-top: 3px solid var(--reagent-color, var(--color-primary));
+  border-radius: var(--radius);
   overflow: hidden;
+  max-height: 14rem;
+  display: flex;
+  flex-direction: column;
 }
-/* Sections */
-.mint-reagent-editor__section {
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+.mint-reagent-editor__table-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
 }
-.mint-reagent-editor__section-header {
+.mint-reagent-editor__table-header {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
   font-size: 0.6875rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.03em;
   color: var(--text-muted);
-  margin-bottom: 0.75rem;
 }
-.mint-reagent-editor__section-icon {
-  width: 0.875rem;
-  height: 0.875rem;
+.mint-reagent-editor__table-row {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  border-left: 2px solid transparent;
+  transition: background-color 0.1s ease, border-left-color 0.1s ease;
+}
+.mint-reagent-editor__table-row:last-child {
+  border-bottom: none;
+}
+.mint-reagent-editor__table-row:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
+  border-left-color: var(--reagent-color, var(--color-primary));
+}
+.mint-reagent-editor__table-col--level {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.mint-reagent-editor__table-col--reps {
+  width: 5.5rem;
   flex-shrink: 0;
-  color: var(--reagent-color, var(--color-primary));
-  opacity: 0.7;
 }
-/* Identity */
-.mint-reagent-editor__identity {
+.mint-reagent-editor__table-col--action {
+  width: 1.75rem;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+.mint-reagent-editor__level-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-reagent-editor__level-unit {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__remove-level-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
+}
+.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
+  opacity: 1;
+}
+.mint-reagent-editor__remove-level-btn:hover {
+  color: var(--mint-error);
+  background-color: var(--mint-error-bg);
+}
+/* Empty state */
+.mint-reagent-editor__empty {
+  text-align: center;
+  padding: 1.25rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+/* Position summary — reagent-tinted background */
+.mint-reagent-editor__summary {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-reagent-editor__color-wrapper {
-  position: relative;
+.mint-reagent-editor__summary-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.mint-reagent-editor__summary-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--reagent-color, var(--text-primary));
+}
+.mint-reagent-editor__summary-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__summary-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: var(--reagent-color, var(--text-muted));
+  opacity: 0.5;
   flex-shrink: 0;
-  cursor: pointer;
 }
-.mint-reagent-editor__color-input {
-  position: absolute;
-  inset: 0;
+/* Overflow warning */
+.mint-reagent-editor__summary--overflow {
+  background-color: var(--mint-warning-bg);
+}
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
+  color: var(--mint-warning-hover);
+}
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
+  background-color: var(--mint-warning);
+}
+.mint-reagent-editor__summary-warning {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--mint-warning-hover);
+  margin-left: 0.25rem;
+}
+/* Footer */
+.mint-reagent-editor__footer {
+  padding: 0.75rem 1rem;
+}
+.mint-reagent-editor__footer .mint-button {
   width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
 }
-.mint-reagent-editor__color-swatch {
-  display: block;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--radius);
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
-  transition: box-shadow 0.15s ease;
+/* Unified picker: search-first header, Finder tree, metadata preview and receipt. */
+.mint-picker-dialog {
+  width: 800px;
 }
-.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
+.mint-picker-dialog .mint-file-browser-dialog__header {
+  padding: 15px 18px;
+  gap: 12px;
 }
-.mint-reagent-editor__name-input {
+.mint-picker-dialog .mint-file-browser-dialog__footer {
+  padding: 12px 18px;
+  background: var(--bg-primary);
+}
+.mint-picker__search {
+  display: flex;
+  align-items: center;
+  position: relative;
   flex: 1;
   min-width: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: inherit;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  padding: 0.25rem 0;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.15s ease;
 }
-.mint-reagent-editor__name-input::placeholder {
+.mint-picker__search > svg {
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
   color: var(--text-muted);
-  font-weight: 400;
+  pointer-events: none;
 }
-.mint-reagent-editor__name-input:focus {
-  border-bottom-color: var(--reagent-color, var(--color-primary));
+.mint-picker__search .mint-input {
+  width: 100%;
+  padding-left: 36px;
+  padding-right: 36px;
+  background: var(--bg-primary);
+  font-size: 13px;
 }
-/* Fields & layout */
-.mint-reagent-editor__field {
-  margin-bottom: 0.625rem;
+.mint-picker__search > kbd {
+  position: absolute;
+  right: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 1px 5px;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
 }
-.mint-reagent-editor__field:last-child {
-  margin-bottom: 0;
+.mint-picker__sources {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg-primary);
+  padding: 2px;
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
 }
-.mint-reagent-editor__field--flex {
+.mint-picker {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  flex: 1 1 0;
-  width: 0;
-  min-width: 0;
+  min-height: 0;
 }
-.mint-reagent-editor__position-row {
+.mint-picker__pathbar {
   display: flex;
-  gap: 0.625rem;
-  width: 100%;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 18px;
+  border-block: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  flex-shrink: 0;
 }
-.mint-reagent-editor .mint-select {
-  width: 100%;
+.mint-picker__breadcrumbs {
+  display: flex;
+  align-items: center;
   min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  color: var(--text-muted);
 }
-.mint-reagent-editor__label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-secondary);
+.mint-picker__breadcrumbs .mint-button {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding-inline: 5px;
+  flex-shrink: 0;
 }
-.mint-reagent-editor__inline-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--form-height-sm);
-  padding: 0 0.625rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
-  text-transform: uppercase;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+.mint-picker__scope {
+  font-size: 11px;
+  flex-shrink: 0;
 }
-.mint-reagent-editor__inline-input::placeholder {
-  text-transform: none;
+.mint-picker__scope[aria-pressed='true'] {
+  color: var(--color-primary);
+  background: var(--color-primary-soft);
 }
-.mint-reagent-editor__inline-input:focus {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+.mint-picker__workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 208px;
+  height: 344px;
+  min-height: 0;
 }
-.mint-reagent-editor__inline-input--error {
-  border-color: var(--mint-error);
+.mint-picker__tree {
+  padding: 7px;
+  background: var(--bg-primary);
+  overflow-y: auto;
+  min-height: 0;
+  min-width: 0;
 }
-.mint-reagent-editor__inline-input--error:focus {
-  border-color: var(--mint-error);
-  box-shadow: var(--focus-ring-error);
+.mint-picker__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 5px 10px 5px calc(2px + var(--picker-depth, 0) * 14px);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
 }
-/* Inline field validation error */
-.mint-reagent-editor__field-error {
-  grid-column: 2;
-  font-size: 0.6875rem;
-  color: var(--mint-error);
-  line-height: 1.2;
+.mint-picker__row:hover {
+  background: var(--bg-hover);
 }
-/* Unit select in section header — uses reagent color */
-.mint-reagent-editor__unit-select {
-  margin-left: auto;
-  padding: 0.125rem 0.375rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
+.mint-picker__row--selected,
+.mint-picker__row--selected:hover {
+  background: var(--color-primary-soft);
+  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  color: var(--text-primary);
+}
+.mint-picker__row:focus-visible {
   outline: none;
-  transition: background-color 0.15s ease;
+  box-shadow: inset 0 0 0 2px var(--color-primary);
 }
-.mint-reagent-editor__unit-select:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
+.mint-picker__row--child {
+  min-height: 30px;
+  padding-block: 1px;
 }
-/* Dilution generator */
-.mint-reagent-editor__generator {
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  padding: 0.75rem;
-  margin-bottom: 0.625rem;
-  overflow: hidden;
+.mint-picker__disclosure {
+  flex-shrink: 0;
 }
-.mint-reagent-editor__generator-inputs {
-  display: flex;
-  gap: 0.625rem;
-  margin-bottom: 0.5rem;
+.mint-picker__disclosure-spacer {
+  width: var(--form-height-sm);
+  flex-shrink: 0;
 }
-.mint-reagent-editor__generator-inputs > * {
+.mint-picker__disclosure svg {
+  width: 10px;
+  height: 10px;
+  transition: transform 120ms;
+}
+.mint-picker__chevron--open {
+  transform: rotate(90deg);
+}
+.mint-picker__node-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+.mint-picker__row--selected .mint-picker__node-icon {
+  color: var(--color-primary);
+}
+.mint-picker__row-name {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
-/* Ensure all child controls fill their parent and can shrink */
-.mint-reagent-editor .mint-number-input {
-  width: 100%;
-  min-width: 0;
+.mint-picker__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
 }
-.mint-reagent-editor .mint-number-input__input {
-  min-width: 0;
-  width: 0;
-  flex: 1;
+.mint-picker__row--selected .mint-picker__name {
+  font-weight: 600;
 }
-.mint-reagent-editor .mint-number-input:focus-within {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+.mint-picker__name mark {
+  background: color-mix(in srgb, var(--mint-warning) 32%, transparent);
+  color: inherit;
+  border-radius: 2px;
 }
-.mint-reagent-editor__presets {
+.mint-picker__formats {
   display: flex;
-  gap: 0.375rem;
+  flex-wrap: wrap;
+  gap: 4px;
 }
-.mint-reagent-editor__preset-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.75rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.75rem;
-  font-weight: 500;
+.mint-picker__formats > span {
   color: var(--text-secondary);
-  background-color: var(--bg-secondary);
+  background: var(--bg-secondary);
+  padding: 1px 4px;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.12s ease;
-}
-.mint-reagent-editor__preset-btn:hover {
-  color: var(--reagent-color, var(--color-primary));
-  border-color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
-}
-.mint-reagent-editor__preset-btn:active {
-  transform: scale(0.96);
+  font: 10px var(--font-mono);
 }
-/* Manual entry */
-.mint-reagent-editor__manual {
+.mint-picker__row-meta {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.625rem;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: 3px;
+  flex-shrink: 0;
+  font: 10px var(--font-mono);
+  color: var(--text-muted);
 }
-.mint-reagent-editor__manual .mint-number-input {
-  flex: 1;
-  width: 0; /* flex-basis override so flex: 1 controls sizing */
+.mint-picker__partial {
+  background: var(--mint-warning-bg);
+  color: var(--mint-warning-text);
+  padding: 2px 5px;
+  border-radius: var(--radius-sm);
 }
-.mint-reagent-editor__add-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--form-height-sm);
-  height: var(--form-height-sm);
-  flex-shrink: 0;
-  border-radius: var(--radius);
-  background-color: var(--reagent-color, var(--color-primary));
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: filter 0.15s ease, transform 0.1s ease;
+.mint-picker__parent-name {
+  font: 10px var(--font-mono);
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mint-reagent-editor__add-btn:hover:not(:disabled) {
-  filter: brightness(0.88);
+.mint-picker__row--unreadable,
+.mint-picker__row--unreadable:hover {
+  cursor: not-allowed;
+  color: var(--text-muted);
+  background: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 5px,
+    color-mix(in srgb, var(--text-muted) 6%, transparent) 5px,
+    color-mix(in srgb, var(--text-muted) 6%, transparent) 10px
+  );
 }
-.mint-reagent-editor__add-btn:active:not(:disabled) {
-  transform: scale(0.92);
+.mint-picker__row--unreadable .mint-picker__name {
+  text-decoration: line-through;
 }
-.mint-reagent-editor__add-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
+.mint-picker__branch-error {
+  padding: 6px 12px;
+  color: var(--mint-error);
+  font-size: 12px;
 }
-/* Level table */
-.mint-reagent-editor__table {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-  max-height: 14rem;
+.mint-picker__skeleton {
   display: flex;
   flex-direction: column;
+  gap: 8px;
+  padding: 8px;
 }
-.mint-reagent-editor__table-body {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
-}
-.mint-reagent-editor__table-header {
+.mint-picker__empty {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
+  gap: 12px;
+  min-height: 180px;
+  padding: 24px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: center;
 }
-.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
-  font-size: 0.6875rem;
+.mint-picker__preview {
+  border-left: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-secondary);
+}
+.mint-picker__preview-heading {
+  padding: 10px 13px;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.1em;
   color: var(--text-muted);
 }
-.mint-reagent-editor__table-row {
+.mint-picker__preview-content {
   display: flex;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-  border-left: 2px solid transparent;
-  transition: background-color 0.1s ease, border-left-color 0.1s ease;
-}
-.mint-reagent-editor__table-row:last-child {
-  border-bottom: none;
-}
-.mint-reagent-editor__table-row:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
-  border-left-color: var(--reagent-color, var(--color-primary));
-}
-.mint-reagent-editor__table-col--level {
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 13px;
+  overflow-y: auto;
+  min-height: 0;
   flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
 }
-.mint-reagent-editor__table-col--reps {
-  width: 5.5rem;
+.mint-picker__preview-icon {
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
   flex-shrink: 0;
+  border-radius: 13px;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
+  color: white;
+  margin: 0 auto;
 }
-.mint-reagent-editor__table-col--action {
-  width: 1.75rem;
-  flex-shrink: 0;
+.mint-picker__preview-icon svg {
+  width: 26px;
+  height: 26px;
+}
+.mint-picker__preview-name {
+  font-size: 12px;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+.mint-picker__metadata {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 7px;
+  margin: 0;
+  font-size: 11px;
 }
-.mint-reagent-editor__level-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.mint-picker__metadata > div {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 5px;
 }
-.mint-reagent-editor__level-unit {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
+.mint-picker__metadata dt {
   color: var(--text-muted);
 }
-.mint-reagent-editor__remove-level-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: var(--radius-sm);
-  background: transparent;
+.mint-picker__metadata dd {
+  margin: 0;
+  font: 10px/1.5 var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.mint-picker__ready {
+  margin-top: auto;
+  border: 1px solid var(--mint-success);
+  border-radius: 999px;
+  background: var(--mint-success-bg);
+  color: var(--mint-success-hover);
+  text-align: center;
+  padding: 4px;
+  font-size: 10px;
+}
+.mint-picker__preview-empty {
   color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
+  font-size: 12px;
+  text-align: center;
+  padding: 32px 16px;
 }
-.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
-  opacity: 1;
+.mint-picker__skipped {
+  background: var(--mint-warning-bg);
+  color: var(--mint-warning-text);
+  white-space: normal;
 }
-.mint-reagent-editor__remove-level-btn:hover {
-  color: var(--mint-error);
-  background-color: var(--mint-error-bg);
+.mint-picker__exclusion {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
 }
-/* Empty state */
-.mint-reagent-editor__empty {
-  text-align: center;
-  padding: 1.25rem 0.75rem;
-  font-size: 0.8125rem;
+.mint-picker__exclusion span {
   color: var(--text-muted);
-  font-style: italic;
 }
-/* Position summary — reagent-tinted background */
-.mint-reagent-editor__summary {
+.mint-picker__preview-error {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--mint-error);
+}
+.mint-picker__footer {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
-  border-bottom: 1px solid var(--border-color);
+  gap: 12px;
+  width: 100%;
 }
-.mint-reagent-editor__summary-item {
+.mint-picker__receipt {
   display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: var(--text-secondary);
 }
-.mint-reagent-editor__summary-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--reagent-color, var(--text-primary));
+.mint-picker__receipt > span {
+  overflow-wrap: anywhere;
 }
-.mint-reagent-editor__summary-label {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
+.mint-picker__badge {
+  padding: 3px 7px;
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
+  background: var(--color-primary-soft);
+  font: 10px var(--font-mono);
 }
-.mint-reagent-editor__summary-dot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: var(--reagent-color, var(--text-muted));
-  opacity: 0.5;
+.mint-picker__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   flex-shrink: 0;
 }
-/* Overflow warning */
-.mint-reagent-editor__summary--overflow {
-  background-color: var(--mint-warning-bg);
+.mint-picker__local-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 18px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-size: 11px;
 }
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
-  color: var(--mint-warning-hover);
+.mint-picker__local-title {
+  flex: 1;
 }
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
-  background-color: var(--mint-warning);
+@media (max-width: 600px) {
+  .mint-picker-dialog .mint-file-browser-dialog__header {
+    padding: 10px;
+    gap: 6px;
+    flex-wrap: nowrap;
+  }
+  .mint-picker__search .mint-input {
+    font-size: 12px;
+    padding-right: 8px;
+  }
+  .mint-picker__search > kbd {
+    display: none;
+  }
+  .mint-picker__pathbar {
+    padding-inline: 8px;
+    gap: 2px;
+  }
+  .mint-picker__workspace {
+    grid-template-columns: minmax(0, 1fr);
+    height: 390px;
+  }
+  .mint-picker__preview {
+    display: none;
+  }
+  .mint-picker__workspace:has(.mint-picker__exclusion) {
+    grid-template-columns: minmax(0, 1fr) 160px;
+  }
+  .mint-picker__workspace:has(.mint-picker__exclusion) .mint-picker__preview {
+    display: flex;
+  }
+  .mint-picker__row {
+    gap: 4px;
+    padding-right: 5px;
+  }
+  .mint-picker__name {
+    font-size: 12px;
+  }
+  .mint-picker__footer {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .mint-picker__actions {
+    justify-content: flex-end;
+  }
+  .mint-picker__receipt {
+    min-height: 24px;
+  }
 }
-.mint-reagent-editor__summary-warning {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--mint-warning-hover);
-  margin-left: 0.25rem;
+@media (max-height: 600px) {
+  .mint-picker {
+    overflow-y: auto;
+  }
+  .mint-picker__workspace {
+    min-height: 220px;
+  }
 }
-/* Footer */
-.mint-reagent-editor__footer {
-  padding: 0.75rem 1rem;
+/* The source highlight slides between fixed-size SDK icon buttons. */
+.mint-picker__source-indicator {
+  box-sizing: border-box;
+  position: absolute;
+  inset: 2px auto 2px 2px;
+  width: 32px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+  pointer-events: none;
+  transform: translateX(calc(var(--picker-source-index, 0) * 34px));
+  transition: transform 180ms ease-out;
 }
-.mint-reagent-editor__footer .mint-button {
-  width: 100%;
+.mint-picker__sources .mint-icon-button {
+  position: relative;
+  width: 32px;
+  height: 32px;
+}
+.mint-picker__sources .mint-icon-button[aria-pressed='true'] {
+  color: var(--text-primary);
+  background: transparent;
+}
+.mint-picker__source-panel {
+  animation: mint-picker-source-in 180ms ease-out;
+}
+@keyframes mint-picker-source-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mint-picker__source-indicator {
+    transition: none;
+  }
+  .mint-picker__source-panel {
+    animation: none;
+  }
 }
 /*$vite$:1*/