{% extends "base.html" %}
{% from "_palette_options.html" import continuous_palette_options %}
{% block title %}{{ page_title }}{% endblock %}
{% from "_macros.html" import nav_page_title_span %}
{% block nav_page_title %}{{ nav_page_title_span(nav_bar_title) }}{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cryo_cc_legend_palette_menu.css') }}"/>
<style>
  /* Full-plot loading veil while the WebGL scatter redraws. No backdrop-filter — it composites over
     the Plotly WebGL canvas and resets the scatter3d camera when the overlay appears. */
  .cryo-dash-page--latent3d #latent3d-plot-stack {
    position: relative;
    min-height: 280px;
    isolation: isolate;
  }
  .cryo-dash-page--latent3d #latent3d.cryo-plotly-graph-host {
    isolation: isolate;
  }
  .cryo-dash-page--latent3d .cryo-dash-main .cryo-dash-viewport--plotly {
    position: relative;
  }
  /* Full-area veil on first draw only — sibling of the plot stack, not stacked over the WebGL canvas. */
  .cryo-dash-page--latent3d #latent3d-rendering-overlay.cryo-plot-rendering-overlay--show:not(
    .cryo-plot-rendering-overlay--nonblocking
  ) {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(250, 248, 244, 0.9);
    pointer-events: none;
    transform: none;
    backface-visibility: visible;
  }
  .cryo-dash-page--latent3d #latent3d-rendering-overlay.cryo-plot-rendering-overlay--show
    .cryo-plot-rendering-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
    max-width: min(92%, 28rem);
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d #latent3d-rendering-overlay.cryo-plot-rendering-overlay--show
    .cryo-plot-rendering-overlay__label {
    font-size: clamp(1.45rem, 3.2vw, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1a202c;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 2px 18px rgba(255, 255, 255, 0.75);
  }
  .cryo-dash-page--latent3d #latent3d-rendering-overlay.cryo-plot-rendering-overlay--show
    .cryo-plot-rendering-overlay__track {
    width: min(100%, 22rem);
    height: 10px;
    border-radius: 999px;
    background: rgba(36, 59, 83, 0.12);
    box-shadow: inset 0 0 0 1px rgba(36, 59, 83, 0.18);
    overflow: hidden;
  }
  .cryo-dash-page--latent3d #latent3d-rendering-overlay.cryo-plot-rendering-overlay--show
    .cryo-plot-rendering-overlay__indeterminate {
    height: 100%;
  }
</style>
{% if show_landscape_vol_animations %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/landscape_volpca.css') }}"/>
<style>
  /* Plot sized to full row height first (JS); left + right columns split the horizontal remainder. */
  .cryo-dash-page--latent3d:has(.cryo-dash-row--latent3d-volanim) {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .cryo-dash-page--latent3d .cryo-dash-row.cryo-dash-row--plot-triple.cryo-dash-row--latent3d-volanim {
    --latent3d-volanim-plot-side: calc(100svh - var(--cryo-dash-below-nav-tall));
    --latent3d-band-w: calc(var(--latent3d-volanim-plot-side) + 9.25rem);
    --latent3d-right-w: max(0px, calc(100% - 12.825rem - var(--latent3d-band-w)));
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none;
    grid-template-columns:
      max-content
      minmax(0, 1fr)
      minmax(0, var(--latent3d-right-w));
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: none;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .cryo-dash-side,
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .cryo-dash-main,
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .latent3d-volanim-aside {
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .cryo-dash-side {
    width: auto;
    min-width: 0;
    max-width: 12.825rem;
    height: 100%;
    min-height: 0;
    margin-right: 2rem;
    justify-self: start;
    align-self: stretch;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 59, 83, 0.42) rgba(36, 59, 83, 0.09);
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .cryo-dash-main {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    overflow: hidden;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim > .latent3d-volanim-aside {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    justify-self: stretch;
    align-self: stretch;
    align-items: stretch;
    margin-left: 0;
    padding-right: 0;
    position: relative;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-plot-legend-band {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 9.25rem);
    column-gap: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-plot-legend-band .cryo-dash-viewport--plotly {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    flex: 0 0 auto;
    width: var(--latent3d-volanim-plot-side);
    height: var(--latent3d-volanim-plot-side) !important;
    min-width: 0;
    min-height: 0 !important;
    max-width: var(--latent3d-volanim-plot-side);
    max-height: var(--latent3d-volanim-plot-side);
    aspect-ratio: 1 / 1;
    align-self: center;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-plot-legend-band .cryo-dash-viewport--plotly .cryo-plotly-stack,
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-plot-legend-band .cryo-dash-viewport--plotly #latent3d {
    min-height: 0 !important;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-plot-stack {
    min-height: 0;
    height: 100%;
    width: 100%;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-plot-legend-band > .latent3d-color-legend-aside {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: stretch;
    width: auto;
    max-width: min(9.25rem, 100%);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    z-index: 2;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-color-legend-panel {
    --pair-legend-middle-w: min(4.05rem, 11vw);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-color-continuous-wrap,
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .pair-legend-continuous-stack {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .pair-legend-middle-track--continuous {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim
    .pair-legend-middle-track--continuous #latent3d-color-hist,
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim
    #latent3d-color-hist.cryo-cc-hist--pair-vertical {
    width: 92%;
    max-width: 100%;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
    flex: 1 1 auto;
    min-height: 58px;
    height: auto;
    box-sizing: border-box;
  }
  /* Discrete toggles stay in the narrow legend rail — do not size from plot stack width. */
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-color-discrete-wrap.cryo-cc-discrete-wrap--show {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-color-legend-panel:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    position: relative;
    overflow: hidden;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .latent3d-color-legend-aside {
    min-height: 0;
    overflow: hidden;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim #latent3d-color-continuous-wrap:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .pair-legend-continuous-stack {
    flex: 1 1 auto;
    min-height: 0;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .cryo-cc-legend__footer--continuous {
    margin-top: auto;
    flex-shrink: 0;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim .cryo-cc-discrete-switches--pair-2col {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    justify-items: center;
  }
  .cryo-dash-page--latent3d .cryo-dash-row--latent3d-volanim
    .cryo-cc-discrete-switches--pair-2col .cryo-cc-discrete-cell {
    width: max-content;
    max-width: min(var(--cryo-discrete-cell-max-w, 100%), 100%);
    min-width: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    position: relative;
    top: auto;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 59, 83, 0.42) rgba(36, 59, 83, 0.09);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* ~10% smaller than default card copy + tighter leading (right-hand volume column only). */
    font-size: 0.9em;
    line-height: 1.22;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card > .l3dva-display-col {
    flex: 0 0 auto;
    margin-top: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card fieldset legend {
    line-height: 1.18;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .cryo-dash-legend-note {
    line-height: 1.24;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .status {
    line-height: 1.22;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .cryo-select-line {
    line-height: 1.2;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-end-label {
    line-height: 1.15;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-view-matrix-field {
    margin: 0.28rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-view-matrix-field label {
    font-size: 0.72rem;
    color: var(--muted, #5c6b7a);
    margin: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-view-matrix-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.28rem 0.35rem;
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--text, #1a2332);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    resize: vertical;
    min-height: 3.2rem;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-view-matrix-apply {
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 0.22rem 0.5rem;
    white-space: nowrap;
  }
  /* Preview sizing: landscape_volpca.css; margins only when previews are visible. */
  .cryo-dash-page--latent3d #l3dva-preview-wrap:not([hidden]) {
    margin-top: 0.35rem !important;
    margin-bottom: 0.4rem;
  }
  /* Grid layout in landscape_volpca.css; no flex grow — height follows GIF cells only. */
  .cryo-dash-page--latent3d #l3dva-preview-grid figure {
    margin: 0;
    border: 1px solid rgba(36, 59, 83, 0.15);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    min-width: 0;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid figcaption {
    font-size: 0.65rem;
    line-height: 1.15;
    padding: 0.15rem 0.28rem;
    color: var(--muted, #5c6b7a);
    font-variant-numeric: tabular-nums;
  }
  /* landscape_volpca.css scopes these under .cryo-dash-page--volsketch — duplicate for the latent 3D right column. */
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-wrap {
    margin: 0 0 0.42rem;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-details {
    margin: 0;
    border: 1px solid rgba(36, 59, 83, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.88);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    box-shadow: 0 1px 4px rgba(36, 59, 83, 0.07);
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-details:hover {
    border-color: rgba(36, 59, 83, 0.32);
    box-shadow: 0 2px 8px rgba(36, 59, 83, 0.1);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-details[hidden] {
    display: none !important;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary {
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.3rem 0.38rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1.16;
    padding: 0.36rem 0.48rem 0.36rem 0.4rem;
    list-style: none;
    user-select: none;
    color: var(--nav-bg, #243b53);
    border-radius: 5px;
    transition: background 0.15s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary:hover {
    background: rgba(196, 112, 58, 0.09);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary:focus-visible {
    outline: 2px solid var(--accent, #c4703a);
    outline-offset: 2px;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-chevron {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 0.52rem;
    height: 0.52rem;
    margin-top: 0.18em;
    border-right: 2px solid rgba(36, 59, 83, 0.55);
    border-bottom: 2px solid rgba(36, 59, 83, 0.55);
    transform: rotate(-45deg) translateY(-0.05rem);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-details[open] > .volsketch-sel-indices-summary
    .volsketch-sel-indices-chevron {
    transform: rotate(45deg) translateY(0.06rem);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary-label {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary-hint {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(36, 59, 83, 0.48);
    white-space: normal;
    text-align: right;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary::-webkit-details-marker {
    display: none;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-summary::marker {
    content: "";
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-details[open]
    > .volsketch-sel-indices-summary {
    border-bottom: 1px solid rgba(36, 59, 83, 0.12);
    border-radius: 5px 5px 0 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-sel-indices-list {
    margin: 0;
    padding: 0.35rem 0.5rem 0.45rem 1.2rem;
    max-height: 9rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    line-height: 1.28;
    color: var(--nav-bg, #243b53);
  }
  .cryo-dash-page--latent3d #l3dva-preview-wrap {
    position: relative;
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(36, 59, 83, 0.08);
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay.l3dva-preview-anim-overlay--show {
    display: flex;
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    max-width: min(96%, 14rem);
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay--show .cryo-plot-rendering-overlay__label {
    font-size: clamp(0.95rem, 2.6vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1a202c;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 2px 12px rgba(255, 255, 255, 0.65);
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay--show .cryo-plot-rendering-overlay__track {
    width: min(100%, 12rem);
    height: 8px;
    border-radius: 999px;
    background: rgba(36, 59, 83, 0.12);
    box-shadow: inset 0 0 0 1px rgba(36, 59, 83, 0.18);
    overflow: hidden;
  }
  .cryo-dash-page--latent3d .l3dva-preview-anim-overlay--show .cryo-plot-rendering-overlay__indeterminate {
    height: 100%;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-anim-wrap {
    container-type: inline-size;
    --l3dva-cell-label-size: max(0.45rem, 13cqw);
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid:not(.volsketch-preview-grid--cycle) .volsketch-anim-wrap {
    --l3dva-cell-label-size: max(0.45rem, calc(13cqw * 1.55));
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-overlay:not(.volsketch-gif-overlay--cov) {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    font-size: var(--l3dva-cell-label-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    pointer-events: none;
    box-shadow: none;
    text-shadow:
      0 1px 1px rgba(255, 255, 255, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.07);
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-overlay--circle-chip:not(.volsketch-gif-overlay--cov) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    box-shadow: none;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-overlay--on-tint {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.32),
      0 1px 3px rgba(0, 0, 0, 0.08),
      0 1px 5px rgba(0, 0, 0, 0.04);
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.85),
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 2px 3px rgba(0, 0, 0, 0.12);
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid
    .volsketch-gif-overlay--circle-chip.volsketch-gif-overlay--on-tint:not(.volsketch-gif-overlay--cov) {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.85),
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 2px 3px rgba(0, 0, 0, 0.12);
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid
    .volsketch-gif-overlay--letter-cov-glyph:not(.volsketch-gif-overlay--cov) {
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.75),
      0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-overlay[hidden] {
    display: none !important;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-overlay--cov {
    position: absolute;
    top: 2px;
    right: 2px;
    left: auto;
    pointer-events: none;
    width: max-content;
    max-width: calc(100% - var(--l3dva-cell-label-size) - 6px);
    height: auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.04em;
    line-height: 1;
    text-align: right;
    font-size: calc(var(--l3dva-cell-label-size) * 0.408);
    padding: 0.1em 0.16em;
    border-radius: 2px;
    z-index: 1;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid
    .volsketch-gif-overlay--cov.volsketch-gif-overlay--on-tint .volsketch-gif-cov-var {
    text-shadow:
      0 0 2px rgba(255, 255, 248, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.1);
    color: #141418;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid
    .volsketch-gif-overlay--cov.volsketch-gif-overlay--on-tint .volsketch-gif-cov-val {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.55),
      0 2px 3px rgba(0, 0, 0, 0.12);
    color: #121217;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-cov-var {
    display: block;
    width: auto;
    max-width: 100%;
    font-family: inherit;
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: rgba(26, 26, 26, 0.92);
    white-space: nowrap;
    text-align: right;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-cov-var[hidden] {
    display: none !important;
  }
  .cryo-dash-page--latent3d #l3dva-preview-grid .volsketch-gif-cov-val {
    display: block;
    width: auto;
    max-width: 100%;
    font-family:
      ui-serif,
      Charter,
      "Iowan Old Style",
      "Apple Garamond",
      Georgia,
      "Times New Roman",
      serif;
    font-size: 0.88em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-fieldset.volsketch-gif-modes {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-fieldset > legend {
    padding: 0;
    margin-bottom: 0.28rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.16;
    color: var(--nav-bg, #243b53);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg.volsketch-seg {
    display: flex;
    width: 100%;
    margin: 0.12rem 0 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(36, 59, 83, 0.28);
    background: #e8ecf1;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg label {
    flex: 1 1 0;
    text-align: center;
    padding: 0.34rem 0.18rem;
    font-size: 0.61rem;
    line-height: 1.04;
    white-space: normal;
    cursor: pointer;
    margin: 0;
    color: var(--muted, #5c6b7a);
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg label:not(:last-of-type) {
    border-right: 1px solid rgba(36, 59, 83, 0.18);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg input:focus-visible + label {
    outline: 2px solid var(--nav-bg, #243b53);
    outline-offset: -2px;
    z-index: 1;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-gif-mode-seg input:checked + label {
    background: var(--nav-bg, #243b53);
    color: #fff;
    font-weight: 600;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch-track {
    display: block;
    width: 2.45rem;
    height: 1.28rem;
    border-radius: 999px;
    background: #b8c4d0;
    border: 1px solid rgba(36, 59, 83, 0.25);
    box-sizing: border-box;
    transition: background 0.18s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0.11rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch input:checked
    + .l3dva-light-switch-track {
    background: var(--nav-bg, #243b53);
    border-color: rgba(36, 59, 83, 0.35);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch input:checked
    + .l3dva-light-switch-track .l3dva-light-switch-thumb {
    transform: translateX(1.12rem);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-light-switch input:focus-visible
    + .l3dva-light-switch-track {
    outline: 2px solid var(--nav-bg, #243b53);
    outline-offset: 2px;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-row.volsketch-view-rotate-row {
    display: flex;
    align-items: stretch;
    gap: 0.38rem;
    margin: 0.38rem 0 0;
    min-width: 0;
    transition: opacity 0.15s ease, filter 0.15s ease;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-row.volsketch-view-rotate-row.is-disabled {
    opacity: 0.52;
    filter: grayscale(0.25);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-row.volsketch-view-rotate-row label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    min-width: 4.5rem;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.08;
    color: var(--nav-bg, #243b53);
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-row.volsketch-view-rotate-row input {
    width: 4.5rem;
    padding-top: 0.24rem;
    padding-bottom: 0.24rem;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-row.volsketch-view-rotate-row
    button.l3dva-view-rotate-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 81%;
    align-self: center;
    padding-left: 0.22rem;
    padding-right: 0.22rem;
    padding-top: 0.26rem;
    padding-bottom: 0.26rem;
    line-height: 1;
    white-space: nowrap;
    font-size: 0.8em;
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-btn__axis-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: block;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .l3dva-view-rotate-btn__label {
    flex: 0 1 auto;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .l3dva-display-col {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card > #l3dva-gif-preview-note {
    margin: 0 0 0.45rem;
    line-height: 1.24;
  }
  .cryo-dash-page--latent3d .l3dva-display-col #l3dva-sel-summary {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin: 0 0 0.35rem;
    padding: 0;
    align-self: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .l3dva-display-col #l3dva-preview-wrap:not([hidden]) {
    margin-top: 0 !important;
  }
  .cryo-dash-page--latent3d .l3dva-display-col .volsketch-sel-indices-wrap {
    margin: 0 0 0.35rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-animate-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    min-height: 1.1em;
    margin: 0 0 0.35rem;
    font-size: 0.9em;
    line-height: 1.2;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-animate-status-text {
    font-weight: 600;
    color: var(--nav-bg, #243b53);
    margin: 0;
    flex: 1 1 auto;
    min-width: min(100%, 9rem);
    line-height: 1.2;
  }
  .cryo-dash-page--latent3d .latent3d-volanim-card .volsketch-animate-status-row .cryo-plot-rendering-overlay__track {
    width: min(10rem, 100%);
    flex: 0 0 auto;
  }
</style>
{% endif %}
<style>
  /* Plot | legend share a column boundary (no gap); keep space after controls only. */
  .cryo-dash-page--latent3d .cryo-dash-row.cryo-dash-row--plot-triple {
    column-gap: 0;
    row-gap: 1rem;
  }
  .cryo-dash-page--latent3d .cryo-dash-row.cryo-dash-row--plot-triple > .cryo-dash-side {
    margin-right: 1rem;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    justify-content: flex-start;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    position: static;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .cryo-cc-legend__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    line-height: 1.28;
    font-weight: 700;
    color: var(--nav-bg, #243b53);
    margin: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .cryo-cc-legend__heading-text {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    font-weight: 700;
    color: var(--nav-bg, #243b53);
    font-size: calc(0.82rem * 1.35 * 0.9 * 0.72);
  }
  /* Keep “filtering” plain copy — same weight/colour as the rest of the 3D legend title. */
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .cryo-cc-legend__filter-em {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
  }
  .cryo-dash-page--latent3d #latent3d-color-legend-panel {
    box-sizing: border-box;
    /* Default continuous strip; overridden inline when discrete grid was measured (unused when stack is full-width). */
    --pair-legend-middle-w: min(5.25rem, 14vw);
  }
  .cryo-dash-page--latent3d #latent3d-color-legend-panel:not([hidden]) {
    width: 90%;
    max-width: 90%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cryo-dash-page--latent3d #latent3d-color-legend-panel[hidden] {
    /* ``[hidden]`` loses to ``.cryo-cc-legend { display: flex }`` on this page without an explicit rule. */
    display: none !important;
  }
  .cryo-dash-page--latent3d #latent3d-color-continuous-wrap:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .pair-legend-continuous-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .pair-legend-middle-track--continuous {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.175rem 0.2rem;
    padding-right: 0.08rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .pair-legend-middle-track--continuous #latent3d-color-hist {
    grid-column: 1 / -1;
    width: 92%;
    max-width: 92%;
    min-width: 0;
    justify-self: end;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend__footer--continuous {
    display: flex;
    flex-direction: column;
    gap: 0.175rem;
    flex-shrink: 0;
    margin-top: 0.175rem;
    width: 100%;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend__footer--continuous #latent3d-palette-select {
    margin-top: 0;
  }
  .cryo-dash-page--latent3d #latent3d-color-hist.cryo-cc-hist--pair-vertical {
    flex: 0 0 auto;
    width: 92%;
    max-width: 92%;
    min-width: 0;
    min-height: 72px;
    box-sizing: border-box;
    align-self: stretch;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend {
    box-sizing: border-box;
    padding: 0.2rem 0.23rem 0.18rem;
    border: 1px solid rgba(36, 59, 83, 0.13);
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.85);
    width: max-content;
    max-width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
  }
  .cryo-dash-page--latent3d #latent3d-color-discrete-wrap.cryo-cc-discrete-wrap--show {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend--vertical {
    gap: 0.175rem;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend-hist-ctrl {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.65rem;
    color: var(--muted, #5c6b7a);
    flex-shrink: 0;
  }
  .cryo-dash-page--latent3d .cryo-cc-legend-hist-ctrl label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
    color: var(--nav-bg, #243b53);
    font-weight: 500;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside #latent3d-palette-select {
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(36, 59, 83, 0.1);
    font-size: 0.68rem;
    color: var(--nav-bg, #243b53);
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside
    #latent3d-palette-select.latent3d-palette-select--hidden-during-plot-render {
    opacity: 0.45;
    pointer-events: none;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .pairplot-palette-select__title {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    line-height: 1.05;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(36, 59, 83, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--nav-bg, #243b53);
    padding: 0.18rem 0.34rem;
    font: inherit;
    font-weight: 600;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .pairplot-palette-select__title:hover {
    background: rgba(36, 59, 83, 0.06);
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside .pairplot-palette-select__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    transition: transform 0.12s ease;
  }
  .cryo-dash-page--latent3d .latent3d-color-legend-aside
    .pairplot-palette-select__title[aria-expanded="true"] .pairplot-palette-select__chevron {
    transform: rotate(90deg);
  }
  #latent3d-color-continuous-wrap[hidden] {
    display: none !important;
  }
  #latent3d-color-discrete-wrap {
    display: none;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switches--pair-2col {
    /* --cryo-discrete-legend-w set from JS as 90% of 3D plot stack width */
    width: var(--cryo-discrete-legend-w, 100%);
    max-width: 100%;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-cell {
    padding: 0;
    border-radius: 2px;
    box-sizing: border-box;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-cell--plastic:not(.cryo-cc-discrete-cell--invert) {
    border-radius: 7px;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switch {
    font-size: 0.62rem;
    box-sizing: border-box;
    min-width: 0;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switch-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switch-label {
    font-weight: 600;
    font-size: 0.6rem;
    line-height: 1.15;
    color: var(--nav-bg, #243b53);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switch-count {
    font-size: 0.52rem;
    line-height: 1.12;
    color: var(--muted, #5c6b7a);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-switch input[type="checkbox"] {
    margin: 0 0.35rem 0 0;
    flex-shrink: 0;
  }
  /* Invert beside “toggle selection” heading — legacy button stays in markup for scripting */
  .cryo-dash-page--latent3d .cryo-cc-discrete-actions {
    display: none !important;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-toggle-heading-row {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin: 0 0 0.32rem;
    min-width: 0;
    line-height: 1.15;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nav-bg, #243b53);
    flex-shrink: 0;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-toggle-heading-row:not([hidden]) {
    display: flex;
  }
  .cryo-dash-page--latent3d .cryo-cc-discrete-toggle-heading-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cryo-dash-page--latent3d #latent3d-color-discrete-invert-slot
    .cryo-cc-discrete-cell--invert .cryo-cc-discrete-invert-fitbox
    .cryo-cc-discrete-switch-label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    max-height: 100%;
    box-sizing: border-box;
    font-weight: 700;
  }
</style>
{% if show_vol_landscape_quick_actions %}
<style>
  .cryo-dash-page--latent3d .l3dva-quick-actions .l3dva-quick-actions-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-dash-page--latent3d .l3dva-quick-actions .l3dva-quick-actions-inner {
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .cryo-dash-page--latent3d .l3dva-quick-actions .l3dva-quick-actions-inner > .btn,
  .cryo-dash-page--latent3d .l3dva-quick-actions .l3dva-quick-actions-inner > a.btn {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .cryo-dash-page--latent3d .l3d-gif-discrete-btn {
    white-space: pre-line;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 4.1rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
  .cryo-dash-page--latent3d .l3d-gif-discrete-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    filter: grayscale(0.22);
    box-shadow: none;
  }
  .l3d-discrete-gif-progress {
    width: 100%;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
    box-sizing: border-box;
  }
  .l3d-discrete-gif-progress[hidden] {
    display: none !important;
  }
  .l3d-discrete-gif-progress__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nav-bg, #243b53);
    text-align: center;
    line-height: 1.25;
  }
  .l3d-discrete-gif-progress .cryo-plot-rendering-overlay__track {
    width: 100%;
  }
  .l3d-plot-gif-modal {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
  }
  .l3d-plot-gif-modal[hidden] {
    display: none !important;
  }
  .l3d-plot-gif-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 32, 44, 0.45);
    cursor: pointer;
  }
  .l3d-plot-gif-modal__dialog {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 42rem);
    width: 100%;
    max-height: min(92vh, 40rem);
    overflow: auto;
    background: #fffdf8;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(36, 59, 83, 0.22);
    padding: 1rem 1.1rem 1.15rem;
    box-sizing: border-box;
    border: 1px solid rgba(36, 59, 83, 0.14);
  }
  .l3d-plot-gif-modal__title {
    margin: 0 0 0.65rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--nav-bg, #243b53);
  }
  .l3d-plot-gif-modal__preview {
    display: block;
    width: 100%;
    max-height: min(58vh, 22rem);
    object-fit: contain;
    margin: 0 auto 0.85rem;
    border-radius: 6px;
    background: rgba(250, 248, 244, 0.95);
    border: 1px solid rgba(36, 59, 83, 0.1);
    box-sizing: border-box;
  }
  .l3d-plot-gif-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }
</style>
{% endif %}
{% endblock %}
{% block content %}
<div class="cryo-dash-page cryo-dash-page--latent3d cryo-dash-page--menu-scroll-fade">
<div class="cryo-dash-row cryo-dash-row--plot-triple{% if show_landscape_vol_animations %}
            cryo-dash-row--latent3d-volanim{% endif %}">
  <div class="cryo-dash-side">
    {{ lead_html | safe }}
    <div class="card cryo-dash-controls" id="latent3d-controls-card">
      <fieldset>
        <legend>Choose axes<br/>and point color scale</legend>
        <label class="cryo-select-line" for="sx">X axis</label>
        <select id="sx"></select>
        <label class="cryo-select-line" for="sy">Y axis</label>
        <select id="sy"></select>
        <label class="cryo-select-line" for="sz">Z axis</label>
        <select id="sz"></select>
        <label class="cryo-select-line" for="sc">Color by</label>
        <select id="sc"><option value="none">None</option></select>
      </fieldset>
{% if show_vol_landscape_quick_actions | default(false) %}
      <fieldset class="l3dva-quick-actions">
        <legend>Quick actions</legend>
        <div class="l3dva-quick-actions-btns">
          <div class="l3dva-quick-actions-inner">
{% if show_landscape_vol_animations %}
            <button type="button" class="btn btn-secondary" id="l3dva-clear-sel">Clear selection</button>
            <button type="button" class="btn btn-secondary" id="l3dva-random-sel" disabled>
              Choose volumes at random
            </button>
{% endif %}
            <button type="button" class="btn btn-secondary" id="l3d-gif-orbit-360"
          title="Full turn around the vertical view-plane axis (perpendicular to your line of sight); saves as a GIF">
              Create orbit<br/>animation
            </button>
            <button type="button" class="btn btn-secondary l3d-gif-discrete-btn"
                    id="l3d-gif-discrete-levels" disabled
                    title="Choose a discrete colour covariate to enable this animation.">
              Create<br/>colour covariate<br/>animation
            </button>
          </div>
          <div id="l3d-discrete-gif-progress" class="l3d-discrete-gif-progress" hidden aria-live="polite">
            <span class="l3d-discrete-gif-progress__label">Building discrete GIF on the server…</span>
            <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Building animated GIF">
              <div class="cryo-plot-rendering-overlay__indeterminate"></div>
            </div>
          </div>
        </div>
      </fieldset>
{% endif %}
      <p id="z3-axis-status" class="status"></p>
    </div>
  </div>
  <div class="cryo-dash-main{% if show_landscape_vol_animations %} cryo-dash-main--latent3d-volanim{% endif %}">
{% if show_landscape_vol_animations %}
    <div class="latent3d-plot-legend-band">
{% endif %}
    <div class="cryo-dash-viewport--plotly">
        <div class="cryo-plotly-stack" id="latent3d-plot-stack">
          <div id="latent3d" class="cryo-plotly-graph-host"></div>
        </div>
          <div id="latent3d-rendering-overlay"
            class="cryo-plot-rendering-overlay cryo-plot-rendering-overlay--show"
            aria-hidden="false">
            <div class="cryo-plot-rendering-overlay__inner">
              <span class="cryo-plot-rendering-overlay__label">Rendering…</span>
              <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Loading plot">
                <div class="cryo-plot-rendering-overlay__indeterminate"></div>
              </div>
            </div>
          </div>
      </div>
{% if not show_landscape_vol_animations %}
    </div>
{% endif %}
      <aside class="latent3d-color-legend-aside" aria-label="Colour covariate filter">
        <div id="latent3d-color-legend-panel" class="cryo-cc-legend" hidden aria-hidden="true"
          title="Covariate colours in the legend; filtering applies to the 3D view.">
          <div class="cryo-cc-legend__heading">
            <span id="latent3d-cc-legend-heading-title" class="cryo-cc-legend__heading-text">Colour legend and <span
              class="cryo-cc-legend__filter-em">filtering</span></span>
          </div>
          <div id="latent3d-color-continuous-wrap">
            <div class="pair-legend-continuous-stack">
              <div class="pair-legend-middle-track pair-legend-middle-track--continuous">
                <div id="latent3d-color-hist" class="cryo-cc-hist--pair-vertical"></div>
              </div>
              <div class="cryo-cc-legend__footer cryo-cc-legend__footer--continuous">
                <div class="cryo-cc-legend-hist-ctrl">
                  <label for="latent3d-color-threshold-use-max">
                    <input type="checkbox" id="latent3d-color-threshold-use-max"/>
                    <span id="latent3d-color-threshold-mode-caption">Use as maximum (≤)</span>
                  </label>
                  <span id="latent3d-color-threshold-status" class="status"></span>
                </div>
                <div id="latent3d-palette-select"
                  class="cryo-cc-legend-palette-shell pairplot-palette-select cryo-palette-select
                         latent3d-palette-select"
                  aria-label="Continuous color palette">
                  <button type="button" id="latent3d-palette-toggle"
                    class="pairplot-palette-select__title cryo-palette-select__title"
                    aria-expanded="false" aria-controls="latent3d-palette-options">
                    <span class="pairplot-palette-select__chevron cryo-palette-select__chevron"
                      aria-hidden="true">▶</span>
                    <span>Choose<br/>palette</span>
                  </button>
                  <div id="latent3d-palette-options"
                    class="cryo-cc-legend-palette-menu pairplot-palette-select__options
                           cryo-palette-select__options pairplot-palette-select__options--collapsed">
                    {{ continuous_palette_options("latent3d_palette") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="latent3d-color-discrete-wrap" class="cryo-cc-discrete-wrap">
            <div id="latent3d-color-discrete-heading-row" class="cryo-cc-discrete-toggle-heading-row" hidden>
              <button type="button" class="cryo-cc-discrete-toggle-title" data-cryo-discrete-collapse-toggle
                aria-expanded="true" aria-controls="latent3d-color-discrete-switches" title="Hide toggle selection">
                <span class="cryo-cc-discrete-collapse-chevron" aria-hidden="true">▼</span>
                <span class="cryo-cc-discrete-toggle-heading-text">Toggle selection</span>
              </button>
              <div id="latent3d-color-discrete-invert-slot" class="cryo-cc-region-invert-slot"
                hidden aria-hidden="true"></div>
            </div>
            <div id="latent3d-color-discrete-switches"
              class="cryo-cc-discrete-switches cryo-cc-discrete-switches--pair-2col"
              role="group" aria-label="Discrete colour filter"></div>
            <div class="cryo-cc-discrete-actions">
              <button type="button" id="latent3d-btn-discrete-invert" class="btn btn-secondary" disabled>
                no selection
              </button>
            </div>
          </div>
        </div>
      </aside>
{% if show_landscape_vol_animations %}
    </div>
  </div>
    <aside class="latent3d-volanim-aside" aria-label="Volume GIF animations">
      <div class="card volsketch-animate-card latent3d-volanim-card" id="l3dva-animate-panel">
        <p id="l3dva-gif-preview-note" class="cryo-dash-legend-note">GIF previews update
          automatically a moment after you change the selection (ChimeraX offscreen).</p>
        <div class="l3dva-display-col">
          <p id="l3dva-sel-summary" class="status" role="status" aria-live="polite">No k-means volumes selected</p>
          <div class="volsketch-sel-indices-wrap">
            <details class="volsketch-sel-indices-details" id="l3dva-sel-indices-details" hidden>
              <summary class="volsketch-sel-indices-summary">
                <span class="volsketch-sel-indices-chevron" aria-hidden="true"></span>
                <span id="l3dva-sel-indices-summary-label" class="volsketch-sel-indices-summary-label"></span>
                <span class="volsketch-sel-indices-summary-hint" aria-hidden="true">Tap to toggle</span>
              </summary>
              <ul id="l3dva-sel-indices-list" class="volsketch-sel-indices-list"
                aria-label="Selected sketch volume indices"></ul>
            </details>
          </div>
          <div id="l3dva-preview-wrap" class="volsketch-preview-wrap" hidden style="margin-top:0;">
            <div id="l3dva-preview-grid" class="volsketch-preview-grid"></div>
            <div id="l3dva-preview-anim-overlay" class="l3dva-preview-anim-overlay" aria-hidden="true">
              <div class="l3dva-preview-anim-overlay__inner">
                <span class="cryo-plot-rendering-overlay__label">Rendering…</span>
                <div class="cryo-plot-rendering-overlay__track" role="progressbar"
                  aria-valuetext="Loading volume animations">
                  <div class="cryo-plot-rendering-overlay__indeterminate"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="volsketch-animate-status-row" aria-live="polite">
            <span id="l3dva-animate-status" class="volsketch-animate-status-text"></span>
            <div
              id="l3dva-animate-progress"
              class="cryo-plot-rendering-overlay__track"
              role="progressbar"
              aria-valuetext="Rendering GIFs"
              hidden
            >
              <div class="cryo-plot-rendering-overlay__indeterminate"></div>
            </div>
          </div>
        </div>
        <fieldset class="volsketch-gif-modes l3dva-gif-mode-fieldset" style="margin:0 0 0.65rem;">
          <legend>Animation output</legend>
          <div class="volsketch-seg l3dva-gif-mode-seg" role="radiogroup" aria-label="Animation output style">
            <input type="radio" name="l3dva-gif-mode" id="l3dva-mode-cycle" value="cycle" />
            <label for="l3dva-mode-cycle">Cycle<br />through volumes</label>
            <input type="radio" name="l3dva-gif-mode" id="l3dva-mode-rotate" value="rotate_each" />
            <label for="l3dva-mode-rotate">Rotating<br />tiled grid</label>
            <input type="radio" name="l3dva-gif-mode" id="l3dva-mode-disabled" value="disabled" checked />
            <label for="l3dva-mode-disabled">Disable<br />animation</label>
          </div>
        </fieldset>
        <div id="l3dva-gif-frames-wrap" style="display:none;">
          <label class="cryo-select-line" for="l3dva-gif-frames">GIF frames (rotation)</label>
          <input id="l3dva-gif-frames" type="number" min="4" max="120" value="20" style="width:5rem"/>
        </div>
        <div class="volsketch-view-rotate-row l3dva-view-rotate-row is-disabled"
          aria-label="Rotate animation viewing angle"
          title="Load an animation preview before rotating the view.">
          <label for="l3dva-view-rotate-angle">
            Degrees
            <input id="l3dva-view-rotate-angle" type="number" step="1" value="15" />
          </label>
          <button type="button" class="btn l3dva-view-rotate-btn" data-l3dva-view-axis="x"
            title="Rotate view around the X axis">
            <svg class="l3dva-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
              aria-hidden="true" focusable="false">
              <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" opacity="0.42"/>
              <path d="M15.2 6.2a6.2 6.2 0 0 0 0 11.6" fill="none" stroke="currentColor"
                stroke-width="1.85" stroke-linecap="round"/>
              <path d="M14.1 16.8l2.1 1.1-1.1-2.1" fill="currentColor" stroke="none"/>
            </svg>
            <span class="l3dva-view-rotate-btn__label">Rotate X</span>
          </button>
          <button type="button" class="btn l3dva-view-rotate-btn" data-l3dva-view-axis="y"
            title="Rotate view around the Y axis">
            <svg class="l3dva-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
              aria-hidden="true" focusable="false">
              <line x1="12" y1="3" x2="12" y2="21" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" opacity="0.42"/>
              <path d="M6.2 8.8a6.2 6.2 0 0 0 11.6 0" fill="none" stroke="currentColor"
                stroke-width="1.85" stroke-linecap="round"/>
              <path d="M16.8 9.9l1.1-2.1 2.1 1.1" fill="currentColor" stroke="none"/>
            </svg>
            <span class="l3dva-view-rotate-btn__label">Rotate Y</span>
          </button>
          <button type="button" class="btn l3dva-view-rotate-btn" data-l3dva-view-axis="z"
            title="Rotate view around the Z axis">
            <svg class="l3dva-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
              aria-hidden="true" focusable="false">
              <circle cx="12" cy="12" r="1.65" fill="currentColor" opacity="0.42"/>
              <path d="M12 5.4a6.6 6.6 0 0 1 0 13.2a6.6 6.6 0 0 1-.1-13.2" fill="none"
                stroke="currentColor" stroke-width="1.85" stroke-linecap="round"/>
              <path d="M6.1 11.4l-1.8 1.8 2.5.4" fill="currentColor" stroke="none"/>
            </svg>
            <span class="l3dva-view-rotate-btn__label">Rotate Z</span>
          </button>
        </div>
        <div class="volsketch-view-matrix-field">
          <label for="l3dva-view-matrix-input">ChimeraX view matrix</label>
          <textarea id="l3dva-view-matrix-input" class="volsketch-view-matrix-input" rows="3"
            placeholder="camera n1,n2,... (12 numbers; available after animation loads)"></textarea>
          <button type="button" class="btn btn-secondary volsketch-view-matrix-apply" id="l3dva-view-matrix-apply"
            disabled>Apply view matrix</button>
        </div>
        <div class="cryo-explorer-save-btns" style="margin-top:0.55rem;">
          <button type="button" class="btn btn--primary" id="l3dva-save-gif" disabled>Save GIFs<br/>to k-means folder…</button>
        </div>
      </div>
    </aside>
{% endif %}
</div>
</div>

{% if show_vol_landscape_quick_actions %}
<div id="l3d-plot-gif-modal" class="l3d-plot-gif-modal" hidden aria-hidden="true"
  role="dialog" aria-labelledby="l3d-plot-gif-modal-title">
  <div class="l3d-plot-gif-modal__backdrop" data-l3d-plot-gif-close="1" aria-label="Close preview"></div>
  <div class="l3d-plot-gif-modal__dialog">
    <h2 id="l3d-plot-gif-modal-title" class="l3d-plot-gif-modal__title">GIF preview</h2>
    <img id="l3d-plot-gif-modal-preview" class="l3d-plot-gif-modal__preview" alt="Animated GIF preview"/>
    <div class="l3d-plot-gif-modal__actions">
      <button type="button" class="btn btn-secondary" data-l3d-plot-gif-close="1">Close</button>
      <button type="button" class="btn btn--primary" id="l3d-plot-gif-modal-save">Save to file…</button>
    </div>
  </div>
</div>
{% endif %}

<script src="{{ url_for('static', filename='js/cryo_cc_legend_primitives.js') }}"></script>
<script src="{{ url_for('static', filename='js/color_covariate_legend.js') }}"></script>
<script src="{{ url_for('static', filename='js/plotly_scatter3d_scene.js') }}"></script>
{% if show_vol_landscape_quick_actions %}
<script src="{{ url_for('static', filename='js/latent3d_plot_gif.js') }}"></script>
{% endif %}
{% if show_landscape_vol_animations %}
<script src="{{ url_for('static', filename='js/latent3d_landscape_vol_animations.js') }}"></script>
{% endif %}
<script>
(function() {
  var axisCols = {{ axis_cols | tojson }};
  var cols = {{ numeric_cols | tojson }};
  var covariateDisplayMap = {{ covariate_display_map | tojson }};
  var dx = {{ default_x | tojson }};
  var dy = {{ default_y | tojson }};
  var dz = {{ default_z | tojson }};

  function fillAxisSelect(sel, val) {
    sel.innerHTML = "";
    axisCols.forEach(function(c) {
      var o = document.createElement("option");
      o.value = c;
      o.textContent = covariateDisplayMap[c] || c;
      sel.appendChild(o);
    });
    if (axisCols.indexOf(val) >= 0) {
      sel.value = val;
    } else {
      sel.value = axisCols[0];
    }
  }

  function fillColorSelect(sel) {
    sel.innerHTML = "";
    var none = document.createElement("option");
    none.value = "none";
    none.textContent = "None";
    sel.appendChild(none);
    cols.forEach(function(c) {
      var o = document.createElement("option");
      o.value = c;
      o.textContent = covariateDisplayMap[c] || c;
      sel.appendChild(o);
    });
  }

  var sx = document.getElementById("sx");
  var sy = document.getElementById("sy");
  var sz = document.getElementById("sz");
  var sc = document.getElementById("sc");
  fillAxisSelect(sx, dx);
  fillAxisSelect(sy, dy);
  fillAxisSelect(sz, dz);
  fillColorSelect(sc);

  var gd = document.getElementById("latent3d");
  var scatter3dUrl = {{ scatter3d_url | tojson }};
  var latent3dVolAnimApi = null;
  var latent3dNeedVolAnimColorRefresh = false;
  var legendContextUrl = "{{ url_for('api_covariate_legend_context') }}";
  var legendContextBodyExtra = {{ legend_context_body_extra | tojson }};
  var overlay = document.getElementById("latent3d-rendering-overlay");
  var latent3dPreviewAnimOverlay = document.getElementById("l3dva-preview-anim-overlay");
  function setLatent3dPreviewAnimLoading(on) {
    if (!latent3dPreviewAnimOverlay) return;
    latent3dPreviewAnimOverlay.classList.toggle("l3dva-preview-anim-overlay--show", !!on);
    latent3dPreviewAnimOverlay.setAttribute("aria-hidden", on ? "false" : "true");
  }
  var latent3dPaletteSelect = document.getElementById("latent3d-palette-select");
  var latent3dPaletteToggle = document.getElementById("latent3d-palette-toggle");
  var latent3dPaletteOptions = document.getElementById("latent3d-palette-options");
  var latent3dColorHist = document.getElementById("latent3d-color-hist");
{% if show_landscape_vol_animations %}
  var latent3dLegendHistHeightScale = 0.8;
  var latent3dLegendHistMinHeightPx = 58;
{% else %}
  var latent3dLegendHistHeightScale = 1;
  var latent3dLegendHistMinHeightPx = 72;
{% endif %}
  var controlsCard = document.getElementById("latent3d-controls-card");
  var controlsSide = controlsCard ? controlsCard.closest(".cryo-dash-side") : null;
  var plotStack = document.getElementById("latent3d-plot-stack");
  var P3S = window.CryoPlotlyScatter3dScene;
  var latent3dScatterLoadGen = 0;
  var lastLatent3dAxesKey = null;
  /** User orbit pin — only updated after pointer interaction, never from post-redraw snapshots. */
  var lastLatent3dPersistedSceneSnap = null;
  /** Frozen pin for the current ``loadPlot``; re-applied until ``latent3dSceneHoldUntil``. */
  var latent3dLoadScenePin = null;
  var latent3dSceneHoldUntil = 0;

  function latent3dSceneSnapHasCamera(snap) {
    if (P3S && typeof P3S.snapHasCamera === "function") return P3S.snapHasCamera(snap);
    if (!snap || !snap.camera || typeof snap.camera !== "object") return false;
    var eye = snap.camera.eye;
    return !!(eye && typeof eye === "object");
  }

  function latent3dCloneScenePin(snap) {
    if (P3S && typeof P3S.cloneSnap === "function") return P3S.cloneSnap(snap);
    if (!latent3dSceneSnapHasCamera(snap)) return null;
    return {
      camera: JSON.parse(JSON.stringify(snap.camera)),
      xrange: snap.xrange ? snap.xrange.slice() : snap.xrange,
      yrange: snap.yrange ? snap.yrange.slice() : snap.yrange,
      zrange: snap.zrange ? snap.zrange.slice() : snap.zrange,
    };
  }

  function latent3dCommitScenePin(snap) {
    var cloned = latent3dCloneScenePin(snap);
    if (!cloned) return;
    lastLatent3dPersistedSceneSnap = cloned;
    if (P3S && typeof P3S.setPinnedSnap === "function") P3S.setPinnedSnap(gd, cloned);
  }

  function latent3dBeginSceneHold(pin, durationMs) {
    var cloned = latent3dCloneScenePin(pin);
    if (!cloned) return;
    latent3dLoadScenePin = cloned;
    latent3dSceneHoldUntil = Date.now() + (durationMs || 6000);
    gd._cryoLatent3dLoadScenePin = cloned;
    gd._cryoLatent3dSceneHoldUntil = latent3dSceneHoldUntil;
  }

  function latent3dExtendSceneHold(durationMs) {
    if (!gd._cryoLatent3dLoadScenePin) return;
    latent3dLoadScenePin = gd._cryoLatent3dLoadScenePin;
    latent3dSceneHoldUntil = Date.now() + (durationMs || 5000);
    gd._cryoLatent3dSceneHoldUntil = latent3dSceneHoldUntil;
  }

  function latent3dSceneHoldActive() {
    var until = gd._cryoLatent3dSceneHoldUntil || latent3dSceneHoldUntil;
    var pin = gd._cryoLatent3dLoadScenePin || latent3dLoadScenePin;
    return !!(pin && Date.now() < until);
  }

  function latent3dRestoreLoadScenePin() {
    var pin = gd._cryoLatent3dLoadScenePin || latent3dLoadScenePin;
    if (!pin || !P3S) {
      return Promise.resolve();
    }
    if (typeof P3S.restorePinnedView === "function") {
      return P3S.restorePinnedView(gd, pin).catch(function() {});
    }
    if (typeof P3S.restoreCameraOnly !== "function") {
      return Promise.resolve();
    }
    return P3S.restoreCameraOnly(gd, pin).catch(function() {});
  }

  function latent3dGetScenePin() {
    if (P3S && typeof P3S.getPinnedSnap === "function") {
      var pinned = P3S.getPinnedSnap(gd);
      if (latent3dSceneSnapHasCamera(pinned)) return pinned;
    }
    return latent3dSceneSnapHasCamera(lastLatent3dPersistedSceneSnap)
      ? lastLatent3dPersistedSceneSnap
      : null;
  }

  /** Live orbit on the graph div beats stored pin (first-load enforce can leave a stale default). */
  function latent3dCaptureScenePinPreferLive() {
    var live = null;
    if (
      P3S
      && typeof P3S.snapshot === "function"
      && gd
      && gd._fullLayout
      && gd._fullLayout.scene
    ) {
      try {
        live = P3S.snapshot(gd);
      } catch (eLive) { /* ignore */ }
    }
    if (latent3dSceneSnapHasCamera(live)) {
      return live;
    }
    return latent3dGetScenePin();
  }

  var latent3dCameraWatchdogTimer = null;

  function latent3dActiveScenePin() {
    if (latent3dSceneHoldActive()) {
      var loadPin = gd._cryoLatent3dLoadScenePin || latent3dLoadScenePin;
      var pinned = null;
      if (P3S && typeof P3S.getPinnedSnap === "function") {
        pinned = P3S.getPinnedSnap(gd);
      }
      if (pinned && latent3dSceneSnapHasCamera(pinned)) {
        if (
          !loadPin
          || !latent3dSceneSnapHasCamera(loadPin)
          || !P3S
          || typeof P3S.cameraEyeDiffers !== "function"
          || P3S.cameraEyeDiffers(loadPin, pinned)
        ) {
          return pinned;
        }
      }
      if (loadPin && latent3dSceneSnapHasCamera(loadPin)) return loadPin;
    }
    if (gd._cryoLatent3dLoadScenePin) return gd._cryoLatent3dLoadScenePin;
    return latent3dGetScenePin();
  }

  function latent3dRelayoutIsUserCameraOrbit(ed) {
    if (!ed || typeof ed !== "object") return false;
    return Object.keys(ed).some(function(k) {
      if (k === "scene.camera") return true;
      return /^scene\.camera(\.|$)/i.test(k);
    });
  }

  function latent3dCameraWatchdog() {
    if (P3S && typeof P3S.isRestoring === "function" && P3S.isRestoring(gd)) return;
    var pin = latent3dActiveScenePin();
    if (!pin || !P3S || typeof P3S.snapshot !== "function" || typeof P3S.cameraEyeDiffers !== "function") {
      return;
    }
    if (!gd._fullLayout || !gd._fullLayout.scene) return;
    var live = P3S.snapshot(gd);
    if (!live || !P3S.cameraEyeDiffers(pin, live)) return;
    if (
      latent3dSceneHoldActive()
      && overlay
      && overlay.classList.contains("cryo-plot-rendering-overlay--show")
    ) {
      return;
    }
    if (latent3dSceneHoldActive()) {
      if (typeof P3S.restorePinnedView === "function") {
        P3S.restorePinnedView(gd, pin);
      } else {
        P3S.restoreCameraOnly(gd, pin);
      }
      return;
    }
    if (latent3dCameraWatchdogTimer) clearTimeout(latent3dCameraWatchdogTimer);
    latent3dCameraWatchdogTimer = setTimeout(function() {
      latent3dCameraWatchdogTimer = null;
      if (P3S.isRestoring(gd)) return;
      var pin2 = latent3dActiveScenePin();
      if (!pin2) return;
      var live2 = P3S.snapshot(gd);
      if (!live2 || !P3S.cameraEyeDiffers(pin2, live2)) return;
      if (typeof P3S.restorePinnedView === "function") {
        P3S.restorePinnedView(gd, pin2);
      } else {
        P3S.restoreCameraOnly(gd, pin2);
      }
    }, 0);
  }

  function latent3dOnPlotlyRelayout(ed) {
    if (latent3dRelayoutIsUserCameraOrbit(ed)) {
      if (
        !(P3S && typeof P3S.isRestoring === "function" && P3S.isRestoring(gd))
        && !latent3dSceneHoldActive()
      ) {
        setTimeout(latent3dPersistSceneAfterUserOrbit, 40);
      }
      return;
    }
    latent3dCameraWatchdog();
  }

  function latent3dPlotlyConfig() {
    var cfg = {
      responsive: false,
      modeBarButtonsToRemove: [
        "lasso2d",
        "select2d",
        "lasso3d",
        "select3d",
        "selectCartesian",
        "lassoCartesian",
        "select",
        "lasso",
      ],
    };
    {% if show_landscape_vol_animations %}
    cfg.doubleClick = false;
    {% endif %}
    return cfg;
  }

  function latent3dDisableSceneLasso() {
    if (typeof Plotly === "undefined" || !Plotly.relayout) {
      return Promise.resolve();
    }
    var patch = P3S && typeof P3S.disableSceneSelectionRelayoutPatch === "function"
      ? P3S.disableSceneSelectionRelayoutPatch()
      : { "scene.dragmode": "orbit", selections: [] };
    return Plotly.relayout(gd, patch).catch(function() {});
  }

  function latent3dApplyFigurePreservingScene(fig, sceneSnap, sameAxes) {
    var pin = latent3dCloneScenePin(sceneSnap) || sceneSnap;
    var hasLivePlot = gd && gd.data && gd.data[0] && gd._fullLayout && gd._fullLayout.scene;
    var viewPin = pin;
    if (
      sameAxes
      && hasLivePlot
      && P3S
      && typeof P3S.prepareFigureSceneForPinnedViewRedraw === "function"
    ) {
      viewPin = P3S.prepareFigureSceneForPinnedViewRedraw(fig, gd, pin) || pin;
    }

    function finishRedraw() {
      if (viewPin) return latent3dEnforceScenePin(viewPin);
      return latent3dDisableSceneLasso();
    }

    if (sameAxes && hasLivePlot && P3S) {
      var markerRestyle = viewPin
        && typeof P3S.traceMarkerRestylePreservingCamera === "function"
        ? function() {
            return P3S.traceMarkerRestylePreservingCamera(fig, gd, viewPin);
          }
        : typeof P3S.traceRestyleFromFigure === "function"
          ? function() {
              return P3S.traceRestyleFromFigure(fig, gd);
            }
          : null;
      if (markerRestyle) {
        return markerRestyle().then(function(didMarkerOnly) {
        if (didMarkerOnly) {
          return latent3dDisableSceneLasso();
        }
        if (typeof Plotly === "undefined" || !Plotly.restyle || !P3S.traceCoordsRestyleFromFigure) {
          return finishRedraw();
        }
        var coordUpd = P3S.traceCoordsRestyleFromFigure(fig);
        var pCoords = Plotly.restyle(gd, coordUpd, [0]);
        var cCoords = pCoords && typeof pCoords.then === "function"
          ? pCoords.catch(function() {})
          : Promise.resolve();
        if (!viewPin || typeof Plotly.relayout !== "function") {
          return cCoords.then(finishRedraw);
        }
        var axisPatch = typeof P3S.relayoutPreserveViewPatch === "function"
          ? P3S.relayoutPreserveViewPatch(viewPin)
          : typeof P3S.sceneRelayoutPatchFromSnap === "function"
            ? P3S.sceneRelayoutPatchFromSnap(viewPin)
            : P3S.sceneRelayoutPatchCameraOnly(viewPin);
        return cCoords
          .then(function() {
            if (!axisPatch || !Object.keys(axisPatch).length) return;
            return Plotly.relayout(gd, axisPatch).catch(function() {});
          })
          .then(finishRedraw);
      });
      }
    }

    if (viewPin && P3S && !sameAxes) {
      if (typeof P3S.applySnapshotCameraOnlyToFigureLayout === "function") {
        P3S.applySnapshotCameraOnlyToFigureLayout(fig, viewPin);
      } else if (typeof P3S.applySnapshotToFigureLayout === "function") {
        P3S.applySnapshotToFigureLayout(fig, viewPin);
      }
    }
    var pReact = Plotly.react(gd, fig.data, fig.layout, latent3dPlotlyConfig());
    var chainR = pReact && typeof pReact.then === "function" ? pReact.catch(function() {}) : Promise.resolve();
    return chainR.then(function() {
      return latent3dDisableSceneLasso().then(finishRedraw);
    });
  }

  /**
   * After the loading overlay is removed, legend chrome and plot size change — resize then
   * re-pin the camera (this is when users see the snap if we restore too early).
   */
  function latent3dStabilizeSceneAfterOverlay(pin, onDone, opts) {
    opts = opts || {};
    syncControlsAlignment();
    syncLatent3dAsideLayout();
    if (opts.light) {
      requestAnimationFrame(function() {
        try {
          Plotly.Plots.resize(gd);
        } catch (eRszLight) { /* ignore */ }
        if (typeof onDone === "function") {
          try { onDone(); } catch (eDoneLight) { /* ignore */ }
        }
      });
      return;
    }
    if (pin) latent3dExtendSceneHold(6000);
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        try {
          Plotly.Plots.resize(gd);
        } catch (eRsz0) { /* ignore */ }
        if (!pin || !P3S) {
          if (typeof onDone === "function") {
            try { onDone(); } catch (eDone) { /* ignore */ }
          }
          return;
        }
        latent3dEnforceScenePin(pin, function() {
          requestAnimationFrame(function() {
            try {
              Plotly.Plots.resize(gd);
            } catch (eRsz1) { /* ignore */ }
            latent3dEnforceScenePin(pin, function() {
              setTimeout(function() {
                try {
                  Plotly.Plots.resize(gd);
                } catch (eRsz2) { /* ignore */ }
                latent3dEnforceScenePin(pin, onDone);
              }, 120);
            });
          });
        });
      });
    });
  }

  function latent3dEnforceScenePin(pin, onDone) {
    if (!pin || !P3S) {
      if (typeof onDone === "function") {
        try { onDone(); } catch (eDone) { /* ignore */ }
      }
      return Promise.resolve();
    }
    if (typeof P3S.scheduleEnforceCamera === "function") {
      return new Promise(function(res) {
        P3S.scheduleEnforceCamera(gd, pin, function() {
          if (typeof onDone === "function") {
            try { onDone(); } catch (eDone) { /* ignore */ }
          }
          res();
        });
      });
    }
    if (typeof P3S.scheduleRestoreCameraOnly === "function") {
      return new Promise(function(res) {
        P3S.scheduleRestoreCameraOnly(gd, pin, function() {
          latent3dCommitScenePin(pin);
          if (typeof onDone === "function") {
            try { onDone(); } catch (eDone) { /* ignore */ }
          }
          res();
        });
      });
    }
    return Promise.resolve();
  }

  function latent3dPersistSceneAfterUserOrbit() {
    if (P3S && typeof P3S.isRestoring === "function" && P3S.isRestoring(gd)) return;
    if (!P3S || typeof P3S.snapshot !== "function" || !gd._fullLayout || !gd._fullLayout.scene) return;
    try {
      var s = P3S.snapshot(gd);
      if (!latent3dSceneSnapHasCamera(s)) return;
      latent3dCommitScenePin(s);
      if (latent3dSceneHoldActive()) {
        var holdPin = latent3dCloneScenePin(s);
        if (holdPin) {
          latent3dLoadScenePin = holdPin;
          gd._cryoLatent3dLoadScenePin = holdPin;
        }
      }
    } catch (eSnap) { /* ignore */ }
  }

  function latent3dOnPlotlyAfterplot() {
    var rendering = !!(overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show"));
    if (latent3dSceneHoldActive() && !rendering) {
      var loadPin = gd._cryoLatent3dLoadScenePin || latent3dLoadScenePin;
      var liveAfter = null;
      try {
        if (P3S && typeof P3S.snapshot === "function") liveAfter = P3S.snapshot(gd);
      } catch (eAp) { /* ignore */ }
      if (
        liveAfter
        && latent3dSceneSnapHasCamera(liveAfter)
        && loadPin
        && latent3dSceneSnapHasCamera(loadPin)
        && P3S
        && typeof P3S.cameraEyeDiffers === "function"
        && P3S.cameraEyeDiffers(loadPin, liveAfter)
      ) {
        /* User orbited during scene hold (e.g. while ChimeraX GIFs render) — keep live view. */
      } else {
        latent3dRestoreLoadScenePin();
      }
    }
    latent3dCameraWatchdog();
  }

  if (gd) {
    gd.addEventListener("pointerup", function() {
      if (overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show")) return;
      setTimeout(latent3dPersistSceneAfterUserOrbit, 40);
    }, true);
    gd.addEventListener("mouseup", function() {
      if (overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show")) return;
      setTimeout(latent3dPersistSceneAfterUserOrbit, 40);
    }, true);
    if (typeof gd.on === "function") {
      gd.on("plotly_relayout", latent3dOnPlotlyRelayout);
      gd.on("plotly_afterplot", latent3dOnPlotlyAfterplot);
    }
  }

  var latent3dResizeRestoreTimer = null;

  function syncControlsAlignment() {
    if (!controlsCard || !controlsSide || !plotStack) return;
    var minGapPx = 8;
    var stackRect = plotStack.getBoundingClientRect();
    var sideRect = controlsSide.getBoundingClientRect();
    if (!stackRect || stackRect.height <= 0 || !sideRect) {
      controlsCard.style.marginTop = "0px";
      return;
    }
    var previousMargin = controlsCard.style.marginTop;
    controlsCard.style.marginTop = "0px";
    var baseTop = controlsCard.offsetTop;
    var cardHalf = controlsCard.offsetHeight * 0.5;
    controlsCard.style.marginTop = previousMargin;
    var plotCenterLocal = (stackRect.top + stackRect.height * 0.5) - sideRect.top;
    var desiredTop = plotCenterLocal - cardHalf;
    var px = Math.max(minGapPx, desiredTop - baseTop);
    controlsCard.style.marginTop = Math.round(px) + "px";
  }

  function fitLatent3dLegendHeadingTitle() {
    var panel = document.getElementById("latent3d-color-legend-panel");
    var title = document.getElementById("latent3d-cc-legend-heading-title");
    if (!panel || !title) {
      return;
    }
    if (panel.hidden || panel.getAttribute("aria-hidden") === "true") {
      title.style.fontSize = "";
      return;
    }
    var heading = title.closest(".cryo-cc-legend__heading");
    if (!heading || heading.clientWidth < 4) {
      return;
    }
    var maxW = heading.clientWidth;
    var lo = 4;
    var hi = 56;
    var i;
    for (i = 0; i < 24; i++) {
      var mid = (lo + hi) * 0.5;
      title.style.fontSize = mid + "px";
      if (title.scrollWidth <= maxW) {
        lo = mid;
      } else {
        hi = mid;
      }
    }
    title.style.fontSize = Math.max(4, lo) + "px";
  }

  function scheduleLatent3dLegendHeadingTitleFit() {
    requestAnimationFrame(function() {
      requestAnimationFrame(fitLatent3dLegendHeadingTitle);
    });
  }

  var latent3dPaletteMenu = CryoColorCovariateLegend.wirePaletteSelect({
    toggle: latent3dPaletteToggle,
    options: latent3dPaletteOptions,
    select: latent3dPaletteSelect,
    hiddenClass: "latent3d-palette-select--hidden-during-plot-render"
  });

  function syncLatent3dPaletteFieldset() {
    if (!latent3dPaletteSelect) return;
    var hasColor = sc.value && sc.value !== "none";
    var disc = document.getElementById("latent3d-color-discrete-wrap");
    var discreteVisible = !!(disc && !disc.hidden && disc.classList.contains("cryo-cc-discrete-wrap--show"));
    var rendering = !!(overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show"));
    // Keep palette hidden while rendering — revealing it when the overlay appears resizes chrome
    // and resets the scatter3d camera (notably on first continuous covariate selection).
    var suppress = !hasColor || discreteVisible || rendering;
    latent3dPaletteSelect.classList.toggle("latent3d-palette-select--hidden-during-plot-render", suppress);
    if (suppress) latent3dPaletteMenu.close();
    else latent3dPaletteMenu.sync();
  }

  var latent3dLegendMiddleWidthPx = null;

  function syncLatent3dDiscreteLegendTargetWidth() {
    var panelLegend = document.getElementById("latent3d-color-legend-panel");
    var disc = document.getElementById("latent3d-color-discrete-wrap");
    if (!panelLegend || !plotStack) {
      return;
    }
    var showDiscrete =
      disc && !disc.hidden && disc.classList.contains("cryo-cc-discrete-wrap--show");
    if (showDiscrete) {
      if (latent3dIsVolanimLayout()) {
        panelLegend.style.removeProperty("--cryo-discrete-legend-w");
      } else {
        var pw = plotStack.getBoundingClientRect().width;
        if (pw > 1) {
          panelLegend.style.setProperty(
            "--cryo-discrete-legend-w",
            Math.max(1, Math.floor(pw * 0.9)) + "px"
          );
        }
      }
    } else {
      panelLegend.style.removeProperty("--cryo-discrete-legend-w");
    }
  }

  function syncLatent3dLegendMiddleWidth() {
    syncLatent3dDiscreteLegendTargetWidth();
    var panel = document.getElementById("latent3d-color-legend-panel");
    var sw = document.getElementById("latent3d-color-discrete-switches");
    var disc = document.getElementById("latent3d-color-discrete-wrap");
    if (!panel || !sw) {
      return;
    }
    if (disc && !disc.hidden && disc.classList.contains("cryo-cc-discrete-wrap--show")) {
      var w = sw.offsetWidth;
      if (w > 0) {
        latent3dLegendMiddleWidthPx = w;
      }
    }
    if (latent3dLegendMiddleWidthPx != null && latent3dLegendMiddleWidthPx > 0) {
      var halfW = Math.max(1, Math.round(latent3dLegendMiddleWidthPx * 0.5));
      panel.style.setProperty("--pair-legend-middle-w", halfW + "px");
    } else {
      panel.style.removeProperty("--pair-legend-middle-w");
    }
    scheduleLatent3dLegendHeadingTitleFit();
    if (typeof latent3dColorLegend !== "undefined" && latent3dColorLegend) {
      if (typeof latent3dColorLegend.fitDiscreteSwitchColumnWidths === "function") {
        latent3dColorLegend.fitDiscreteSwitchColumnWidths();
      }
      if (typeof latent3dColorLegend.fitDiscreteLegendScrollRegion === "function") {
        latent3dColorLegend.fitDiscreteLegendScrollRegion();
      }
      if (typeof latent3dColorLegend.scheduleInvertTypographyFit === "function") {
        latent3dColorLegend.scheduleInvertTypographyFit();
      }
    }
  }

  function latent3dIsVolanimLayout() {
    return !!document.querySelector(".cryo-dash-row--latent3d-volanim");
  }

  function syncLatent3dVolanimViewportHeight() {
    if (!latent3dIsVolanimLayout()) {
      return;
    }
    var header = document.querySelector("header.nav");
    var main = document.querySelector("main");
    if (!header || !main) {
      return;
    }
    var navH = Math.ceil(header.getBoundingClientRect().height);
    if (navH > 0) {
      main.style.setProperty("--cryo-dash-volanim-nav-h", navH + "px");
    }
  }

  function syncLatent3dVolanimGridColumns() {
    if (!latent3dIsVolanimLayout()) {
      return;
    }
    var row = document.querySelector(".cryo-dash-row--latent3d-volanim");
    if (!row) {
      return;
    }
    var side = row.querySelector(".cryo-dash-side");
    var band = row.querySelector(".latent3d-plot-legend-band");
    var legendAside = band && band.querySelector(".latent3d-color-legend-aside");
    if (!side || !band) {
      return;
    }
    var rowW = row.clientWidth;
    var rowH = row.clientHeight;
    if (rowW < 1 || rowH < 1) {
      return;
    }
    var leftW = side.offsetWidth;
    if (leftW < 1) {
      leftW = side.scrollWidth;
    }
    var sideMarginR = parseFloat(getComputedStyle(side).marginRight) || 0;
    var rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
    var legendW = 9.25 * rootPx;
    if (legendAside && legendAside.offsetWidth > 0) {
      legendW = legendAside.offsetWidth;
    }
    var minPlotSide = 11.25 * rootPx;

    function applyPlotAndColumns(plotSide) {
      plotSide = Math.max(minPlotSide, plotSide);
      row.style.setProperty("--latent3d-volanim-plot-side", Math.round(plotSide) + "px");
      if (legendAside && legendAside.offsetWidth > 0) {
        legendW = legendAside.offsetWidth;
      }
      var bandW = plotSide + legendW;
      var rightW = Math.max(0, rowW - leftW - sideMarginR - bandW);
      row.style.setProperty("--latent3d-band-w", Math.round(bandW) + "px");
      row.style.setProperty("--latent3d-right-w", Math.round(rightW) + "px");
    }

    // Size the square plot to the full row height first, then clamp only if panels won't fit.
    var plotSide = rowH;
    var maxPlotSide = rowW - leftW - sideMarginR - legendW;
    if (maxPlotSide < plotSide) {
      plotSide = maxPlotSide;
    }
    applyPlotAndColumns(plotSide);
    requestAnimationFrame(function() {
      if (!latent3dIsVolanimLayout()) {
        return;
      }
      if (legendAside && legendAside.offsetWidth > 0) {
        legendW = legendAside.offsetWidth;
      }
      leftW = side.offsetWidth;
      if (leftW < 1) {
        leftW = side.scrollWidth;
      }
      sideMarginR = parseFloat(getComputedStyle(side).marginRight) || 0;
      rowW = row.clientWidth;
      rowH = row.clientHeight;
      if (rowW < 1 || rowH < 1) {
        return;
      }
      plotSide = rowH;
      maxPlotSide = rowW - leftW - sideMarginR - legendW;
      if (maxPlotSide < plotSide) {
        plotSide = maxPlotSide;
      }
      applyPlotAndColumns(plotSide);
    });
  }

  function syncLatent3dVolanimPlotGeometry() {
    syncLatent3dVolanimViewportHeight();
    syncLatent3dVolanimGridColumns();
    if (!latent3dIsVolanimLayout() || !gd) {
      return;
    }
    try {
      if (window.Plotly) {
        window.Plotly.Plots.resize(gd);
      }
    } catch (e0) { /* ignore */ }
  }

  function syncLatent3dHistVerticalMetrics() {
    var histEl = latent3dColorHist;
    if (!histEl || !histEl.classList.contains("cryo-cc-hist--pair-vertical")) {
      return;
    }
    var panel = document.getElementById("latent3d-color-legend-panel");
    if (panel && (panel.hidden || panel.getAttribute("aria-hidden") === "true")) {
      return;
    }
    var wrap = document.getElementById("latent3d-color-continuous-wrap");
    if (!wrap || wrap.hidden) {
      return;
    }
    var minH = latent3dLegendHistMinHeightPx;
    if (latent3dIsVolanimLayout()) {
      histEl.style.maxWidth = "";
      var vh = window.innerHeight || document.documentElement.clientHeight || 0;
      var mainEl = document.querySelector("main");
      var fadeH = 21.6;
      if (mainEl) {
        var fadeVar = parseFloat(
          getComputedStyle(mainEl).getPropertyValue("--cryo-dash-menu-scroll-fade-h")
        );
        if (!(fadeVar > 0)) {
          fadeVar = parseFloat(
            getComputedStyle(mainEl).getPropertyValue("--latent3d-volanim-panel-fade-h")
          );
        }
        if (fadeVar > 0) {
          fadeH = fadeVar;
        }
      }
      var targetBottom = vh - fadeH;
      if (mainEl) {
        var mainBottom = mainEl.getBoundingClientRect().bottom;
        if (mainBottom > 0 && mainBottom <= vh) {
          targetBottom = mainBottom - fadeH;
        }
      }
      var stack = histEl.closest(".pair-legend-continuous-stack");
      var footer = stack && stack.querySelector(".cryo-cc-legend__footer--continuous");
      var footerReserve = footer ? footer.offsetHeight + 8 : 0;
      var padding = 6;
      var rect = histEl.getBoundingClientRect();
      var h = Math.floor(
        (targetBottom - rect.top - padding - footerReserve) * latent3dLegendHistHeightScale
      );
      if (h < minH) {
        h = minH;
      }
      histEl.style.height = h + "px";
      histEl.style.minHeight = minH + "px";
      try {
        if (window.Plotly && histEl.data && histEl.data.length) {
          window.Plotly.Plots.resize(histEl);
        }
      } catch (e0) { /* ignore */ }
      return;
    }
    var vw = window.innerWidth || document.documentElement.clientWidth || 0;
    var vh = window.innerHeight || document.documentElement.clientHeight || 0;
    if (vw < 1 || vh < 1) {
      return;
    }
    histEl.style.maxWidth = "";
    var rect = histEl.getBoundingClientRect();
    var targetBottom = vh * 0.9;
    var padding = 6;
    var h = Math.floor((targetBottom - rect.top - padding) * latent3dLegendHistHeightScale);
    if (h < minH) {
      h = minH;
    }
    var maxH = Math.floor(vh * 0.92 * latent3dLegendHistHeightScale);
    if (h > maxH) {
      h = maxH;
    }
    histEl.style.height = h + "px";
    histEl.style.minHeight = minH + "px";
    try {
      if (window.Plotly && histEl.data && histEl.data.length) {
        window.Plotly.Plots.resize(histEl);
      }
    } catch (e0) { /* ignore */ }
  }

  function syncLatent3dContinuousHistogramLayout() {
    syncLatent3dLegendMiddleWidth();
    syncLatent3dHistVerticalMetrics();
    scheduleLatent3dLegendHeadingTitleFit();
  }

  function syncLatent3dAsideLayout() {
    syncLatent3dLegendMiddleWidth();
    syncLatent3dHistVerticalMetrics();
    syncLatent3dVolanimPlotGeometry();
    scheduleLatent3dLegendHeadingTitleFit();
  }

  function setRendering(on, opts) {
    opts = opts || {};
    if (!overlay) {
      syncLatent3dPaletteFieldset();
      return Promise.resolve();
    }
    if (!on) {
      overlay.classList.remove("cryo-plot-rendering-overlay--show");
      overlay.classList.remove("cryo-plot-rendering-overlay--nonblocking");
      overlay.setAttribute("aria-hidden", "true");
      syncLatent3dPaletteFieldset();
      return Promise.resolve();
    }
    // Do not relayout the camera before showing the badge — a stale pin snaps the view back to
    // the initial load orbit while the WebGL scene still shows the user's drag orientation.
    overlay.classList.toggle("cryo-plot-rendering-overlay--nonblocking", !!opts.nonblocking);
    overlay.classList.add("cryo-plot-rendering-overlay--show");
    overlay.setAttribute("aria-hidden", "false");
    syncLatent3dPaletteFieldset();
    return Promise.resolve();
  }

  function selectedLatentPalette() {
    var r = document.querySelector("input[name=\"latent3d_palette\"]:checked");
    var v = r && r.value ? String(r.value) : "Viridis";
    return CryoColorCovariateLegend.hasPalette(v) ? v : "Viridis";
  }

  // Store discrete color overrides for 3D plot
  var latent3dDiscreteColorOverrides = {};

  var latent3dColorLegend = new CryoColorCovariateLegend({
    legendContextUrl: legendContextUrl,
    legendContextBodyExtra: legendContextBodyExtra,
    getDiscreteColorOverrides: function() { return latent3dDiscreteColorOverrides; },
    discreteChipMatplotlibBlend: false,
    notifyOnRefresh: false,
    // Hide the legend panel until a colour covariate is chosen
    // (see ``#latent3d-color-legend-panel[hidden]`` CSS).
    hideLegendPanelWhenNoCovariate: true,
    covariateDisplayMap: covariateDisplayMap,
    getColorColumn: function() { return sc.value; },
    getPaletteName: selectedLatentPalette,
    panel: document.getElementById("latent3d-color-legend-panel"),
    continuousWrap: document.getElementById("latent3d-color-continuous-wrap"),
    discreteWrap: document.getElementById("latent3d-color-discrete-wrap"),
    histDiv: document.getElementById("latent3d-color-hist"),
    thresholdUseMax: document.getElementById("latent3d-color-threshold-use-max"),
    thresholdModeCaption: document.getElementById("latent3d-color-threshold-mode-caption"),
    thresholdStatus: document.getElementById("latent3d-color-threshold-status"),
    discreteSwitches: document.getElementById("latent3d-color-discrete-switches"),
    invertHeadingSlotEl: document.getElementById("latent3d-color-discrete-invert-slot"),
    invertHeadingRowEl: document.getElementById("latent3d-color-discrete-heading-row"),
    invertBtn: document.getElementById("latent3d-btn-discrete-invert"),
    vertical: true,
    histPlotVertical: true,
    histVerticalMargins: { l: 16, r: 36 },
{% if show_landscape_vol_animations %}
    histTickFontSize: 12.6,
{% endif %}
    onContinuousHistogramLayout: syncLatent3dContinuousHistogramLayout,
    onDiscreteLayout: syncLatent3dLegendMiddleWidth,
    onModeChange: function() {
      syncLatent3dPaletteFieldset();
    },
    onDiscreteColorChange: function(evt) {
      if (evt && evt.catKey && evt.hex) {
        latent3dDiscreteColorOverrides[String(evt.catKey)] = String(evt.hex);
        loadPlot();
      }
    },
    onFilterChange: function() {
      loadPlot();
    }
  });

  function buildLatent3dPostPayload(extra) {
    extra = extra || {};
    var x = sx.value;
    var y = sy.value;
    var z = sz.value;
    var c = sc.value;
    var cf = null;
    if (c !== "none") {
      cf = Object.prototype.hasOwnProperty.call(extra, "color_filter")
        ? extra.color_filter
        : latent3dColorLegend.getFilterForApi();
    }
    var payload = {
      x: x,
      y: y,
      z: z,
      color: c,
      palette: selectedLatentPalette(),
      color_filter: cf || null
    };
    var hasOverrides = false;
    for (var ko in latent3dDiscreteColorOverrides) {
      if (Object.prototype.hasOwnProperty.call(latent3dDiscreteColorOverrides, ko)) {
        hasOverrides = true;
        break;
      }
    }
    if (hasOverrides) {
      payload.discrete_label_colors = latent3dDiscreteColorOverrides;
    }
    if (Array.isArray(extra.discrete_keys)) {
      payload.discrete_keys = extra.discrete_keys;
    }
    if (extra.frame_duration_ms != null && extra.frame_duration_ms !== undefined) {
      payload.frame_duration_ms = Number(extra.frame_duration_ms);
    }
    if (extra.discrete_level_gif_frame) {
      payload.discrete_level_gif_frame = true;
    }
    return payload;
  }

  var plotGifApi = null;

  function loadPlot() {
    var x = sx.value;
    var y = sy.value;
    var z = sz.value;
    var c = sc.value;
    var axesKey = x + "\u0001" + y + "\u0001" + z;
    var latent3dSameAxesAsLast = (
      typeof lastLatent3dAxesKey === "string" && lastLatent3dAxesKey === axesKey
    );
    if (typeof lastLatent3dAxesKey === "string" && lastLatent3dAxesKey !== axesKey) {
      lastLatent3dPersistedSceneSnap = null;
      latent3dLoadScenePin = null;
      latent3dSceneHoldUntil = 0;
      gd._cryoLatent3dLoadScenePin = null;
      gd._cryoLatent3dSceneHoldUntil = 0;
      gd._cryoLatent3dScenePin = null;
    }
    var sceneSnap;
    var hasLivePlot = gd && gd.data && gd.data[0] && gd._fullLayout && gd._fullLayout.scene;
    if (latent3dSameAxesAsLast && hasLivePlot) {
      sceneSnap = latent3dCaptureScenePinPreferLive();
      if (!latent3dSceneSnapHasCamera(sceneSnap)) {
        sceneSnap = latent3dLoadScenePin || lastLatent3dPersistedSceneSnap;
      }
      latent3dSceneHoldUntil = 0;
      gd._cryoLatent3dSceneHoldUntil = 0;
    } else if (latent3dSceneHoldActive() && latent3dLoadScenePin) {
      sceneSnap = latent3dLoadScenePin;
    } else {
      sceneSnap = latent3dCaptureScenePinPreferLive();
      if (latent3dSceneSnapHasCamera(sceneSnap)) {
        latent3dCommitScenePin(sceneSnap);
        latent3dBeginSceneHold(sceneSnap, 12000);
        sceneSnap = latent3dLoadScenePin;
      } else {
        latent3dLoadScenePin = null;
        latent3dSceneHoldUntil = 0;
      }
    }
    var st = document.getElementById("z3-axis-status");
    if (x === y || x === z || y === z) {
      if (st) st.textContent = "Choose three different latent axes.";
      setRendering(false);
      return Promise.resolve();
    }
    var myGen = ++latent3dScatterLoadGen;
    if (st) st.textContent = "";
    var payload = buildLatent3dPostPayload({});
    var useNonblockingOverlay = !!(
      latent3dSameAxesAsLast
      && sceneSnap
      && latent3dSceneSnapHasCamera(sceneSnap)
    );
    return setRendering(true, { nonblocking: useNonblockingOverlay }).then(function() {
    return new Promise(function(resolve, reject) {
      requestAnimationFrame(function() {
        requestAnimationFrame(function() {
          fetch(scatter3dUrl, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          })
            .then(function(r) {
              return r.text().then(function(text) {
                var j;
                try { j = JSON.parse(text); }
                catch (e) { throw new Error("API did not return JSON"); }
                if (!r.ok) throw new Error(j.error || r.statusText);
                return j;
              });
            })
            .then(function(fig) {
              if (myGen !== latent3dScatterLoadGen) {
                return Promise.resolve();
              }
              return latent3dApplyFigurePreservingScene(
                fig,
                sceneSnap,
                latent3dSameAxesAsLast
              ).then(function() {
                if (myGen !== latent3dScatterLoadGen) {
                  return;
                }
              });
            })
            .then(function() {
              if (myGen !== latent3dScatterLoadGen) {
                return;
              }
              lastLatent3dAxesKey = axesKey;
              syncControlsAlignment();
              requestAnimationFrame(function() {
                function runLatent3dPostResizeTail() {
                  syncLatent3dAsideLayout();
                  // ``refresh`` returns a Promise (histogram fetch / Plotly draw). If we run the
                  // vol-anim ``afterPlotRedraw`` chain before it settles, the aside can resize
                  // afterward and Plotly's responsive autosize knocks the scatter3d camera back
                  // to defaults — especially when the colour covariate changes.
                  var pRefresh = latent3dColorLegend.refresh({ suppressNotify: true });
                  var cRefresh = pRefresh && typeof pRefresh.then === "function"
                    ? pRefresh.catch(function() {})
                    : Promise.resolve();
                  cRefresh.then(function() {
                    requestAnimationFrame(function() {
                      if (myGen !== latent3dScatterLoadGen) {
                        resolve();
                        return;
                      }
                      syncLatent3dAsideLayout();
                      if (plotGifApi && typeof plotGifApi.syncUi === "function") {
                        plotGifApi.syncUi();
                      }
                      if (latent3dNeedVolAnimColorRefresh && latent3dVolAnimApi
                          && typeof latent3dVolAnimApi.onColorOrPaletteChanged === "function") {
                        latent3dNeedVolAnimColorRefresh = false;
                        latent3dVolAnimApi.onColorOrPaletteChanged();
                      }
                      if (myGen !== latent3dScatterLoadGen) {
                        resolve();
                        return;
                      }
                      var finishPin = latent3dLoadScenePin
                        || sceneSnap
                        || latent3dCaptureScenePinPreferLive();
                      setRendering(false);
                      latent3dStabilizeSceneAfterOverlay(
                        finishPin,
                        function() {
                        if (myGen !== latent3dScatterLoadGen) {
                          resolve();
                          return;
                        }
                        var pAfter = Promise.resolve();
                        if (latent3dVolAnimApi
                            && typeof latent3dVolAnimApi.afterPlotRedraw === "function") {
                          pAfter = latent3dVolAnimApi.afterPlotRedraw();
                        }
                        var cAfter = pAfter && typeof pAfter.then === "function"
                          ? pAfter.catch(function() {})
                          : Promise.resolve();
                        cAfter.then(function() {
                          if (myGen === latent3dScatterLoadGen) {
                            resolve();
                          }
                        });
                      },
                        { light: useNonblockingOverlay }
                      );
                    });
                  });
                }
                requestAnimationFrame(runLatent3dPostResizeTail);
              });
            })
            .catch(function(e) {
              console.error(e);
              if (myGen === latent3dScatterLoadGen) {
                setRendering(false);
              }
              var st2 = document.getElementById("z3-axis-status");
              if (st2) st2.textContent = e.message || "Could not draw plot.";
              reject(e);
            });
        });
      });
    });
    });
  }

{% if show_vol_landscape_quick_actions %}
  if (window.CryoLatent3dPlotGif && typeof window.CryoLatent3dPlotGif.boot === "function") {
    plotGifApi = window.CryoLatent3dPlotGif.boot({
      gd: gd,
      assembleUrl: {{ url_for('api_latent3d_plot_gif_from_png_frames') | tojson }},
      discreteGifServerUrl: {{ latent3d_discrete_gif_url | tojson }},
      sx: sx,
      sy: sy,
      sz: sz,
      sc: sc,
      covariateDisplayMap: covariateDisplayMap,
      buildPayload: buildLatent3dPostPayload,
      statusEl: document.getElementById("z3-axis-status")
    });
    if (plotGifApi && typeof plotGifApi.syncUi === "function") {
      plotGifApi.syncUi();
    }
  }
{% endif %}

  [sx, sy, sz].forEach(function(s) {
    s.addEventListener("change", loadPlot);
  });
  sc.addEventListener("change", function() {
    latent3dNeedVolAnimColorRefresh = true;
    latent3dDiscreteColorOverrides = {};
    latent3dPersistSceneAfterUserOrbit();
    var preLegendPin = latent3dCaptureScenePinPreferLive();
    if (latent3dSceneSnapHasCamera(preLegendPin)) {
      latent3dCommitScenePin(preLegendPin);
      latent3dBeginSceneHold(preLegendPin, 12000);
    }
    // Legend layout runs once in ``loadPlot``'s post-resize tail — refreshing here resizes the
    // aside before the pin is applied and resets the scatter3d camera to the initial load view.
    loadPlot();
  });
  document.querySelectorAll("input[name=\"latent3d_palette\"]").forEach(function(inp) {
    inp.addEventListener("change", function() {
      latent3dNeedVolAnimColorRefresh = true;
      latent3dColorLegend.refreshHistogramColors();
      loadPlot();
    });
  });
  window.addEventListener("resize", function() {
    syncControlsAlignment();
    syncLatent3dAsideLayout();
    try {
      Plotly.Plots.resize(gd);
    } catch (e) {}
    var pin = latent3dGetScenePin();
    if (pin) latent3dEnforceScenePin(pin);
  });
  if (window.CryoResizeObserverUtils) {
    var panelEl = document.getElementById("latent3d-color-legend-panel");
    if (panelEl) {
      window.CryoResizeObserverUtils.observeResize([panelEl], function() {
        scheduleLatent3dLegendHeadingTitleFit();
      });
    }
  }
  if (window.CryoResizeObserverUtils && plotStack) {
    window.CryoResizeObserverUtils.observeResize([plotStack], function() {
      syncControlsAlignment();
      syncLatent3dAsideLayout();
      syncLatent3dVolanimPlotGeometry();
      if (overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show")) return;
      var pin = latent3dLoadScenePin || latent3dGetScenePin();
      if (!pin) return;
      if (latent3dResizeRestoreTimer) clearTimeout(latent3dResizeRestoreTimer);
      latent3dResizeRestoreTimer = setTimeout(function() {
        latent3dResizeRestoreTimer = null;
        latent3dEnforceScenePin(pin);
      }, 80);
    });
  }
  syncLatent3dPaletteFieldset();
  syncControlsAlignment();
  syncLatent3dAsideLayout();
{% if show_landscape_vol_animations %}
  if (window.CryoLatent3dVolLandscapeAnim && typeof window.CryoLatent3dVolLandscapeAnim.boot === "function") {
    latent3dVolAnimApi = window.CryoLatent3dVolLandscapeAnim.boot({
      gd: gd,
      getColorMode: function() { return sc.value; },
      getPalette: selectedLatentPalette,
      setPreviewAnimLoading: setLatent3dPreviewAnimLoading
    });
  }
{% endif %}
  loadPlot();
})();
</script>
{% endblock %}