/*
 * Flex layouts for content that flows in one direction or wraps naturally.
 * Keep true two-dimensional stages, charts, and explicitly column-configured
 * result grids in their existing layout systems.
 */

/* Detail generator: three responsive panels that wrap, then stack on narrow screens. */
.detail-workbench {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
.detail-workbench > .detail-assets {
  display: flex;
  flex: 0 1 24%;
  flex-flow: row wrap;
  align-content: flex-start;
  gap: 8px 10px;
}
.detail-workbench > .detail-assets > h2 { flex: 0 0 100%; }
.detail-workbench > .detail-assets > .detail-asset-group { flex: 1 1 45%; min-width: 0; }
.detail-workbench > .detail-settings { flex: 1 1 48%; min-width: min(100%, 360px); }
.detail-workbench > .detail-output { flex: 0 1 24%; min-width: min(100%, 220px); }

/* Agent workspace and linear workflow panels. */
.agents-workspace { display: flex; flex-flow: row wrap; align-items: stretch; }
.agents-workspace > :first-child { flex: 0 1 25%; min-width: min(100%, 240px); }
.agents-workspace > :not(:first-child) { flex: 1 1 70%; min-width: min(100%, 300px); }
.workflow-project-list,
.workflow-side-panel,
.workflow-node-settings-body,
.workflow-run-list,
.workflow-run-steps,
.detail-plan-fields { display: flex; flex-direction: column; }

/* Wrapping card collections. */
.detail-results:has(.image-result-card),
.image-results[data-layout]:has(.image-result-card),
.task-list,
.material-library-grid,
.asset-library-grid,
.work-asset-grid,
.asset-content-grid,
.asset-audio-grid,
.workflow-preview-assets,
.workflow-node-catalog,
.skills-card-grid,
.style-guide-grid,
.agent-list,
.admin-feature-grid,
.admin-allocation-list {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: stretch;
}
.detail-results:has(.image-result-card) > *,
.image-results[data-layout]:has(.image-result-card) > * { flex: 0 1 23%; min-width: min(100%, 180px); max-width: none; }
.image-results[data-layout]:has(.image-result-card) > * { max-width: none; }
.task-list > * { flex: 1 1 31%; min-width: min(100%, 220px); max-width: none; }
.material-library-grid > *,
.asset-library-grid > *,
.work-asset-grid > *,
.asset-content-grid > *,
.workflow-node-catalog > *,
.skills-card-grid > *,
.style-guide-grid > *,
.agent-list > *,
.admin-feature-grid > *,
.admin-allocation-list > * { flex: 1 1 23%; min-width: min(100%, 180px); }
.asset-audio-grid > * { flex: 1 1 47%; min-width: min(100%, 240px); }
.workflow-preview-assets > * { flex: 1 1 30%; min-width: min(100%, 130px); }
.style-guide-grid > *:not(.style-guide-wide) { flex-basis: 47%; }
.style-guide-grid > .style-guide-wide { flex-basis: 100%; }
.skills-card-grid > * { flex-basis: 47%; }
.admin-feature-grid > * { flex-basis: 30%; }
.admin-allocation-list > * { flex-basis: 47%; }
.material-library-grid > * { height: auto; aspect-ratio: 1 / 1; }

/* Reference upload tiles scale with the panel while retaining a square preview. */
.reference-media-grid > .asset-tile { flex: 0 1 calc((100% - 18px) / 3); width: auto; height: auto; min-width: 0; min-height: 0; max-width: 106px; aspect-ratio: 1 / 1; }
.detail-results:has(.image-result-card),
.image-results[data-layout]:has(.image-result-card) { gap: 22px 16px; }

/* Honor explicit result-count choices while allowing cards to reflow at smaller widths. */
.image-results[data-layout="3"] > .image-result-card { flex-basis: calc((100% - 32px) / 3); }
.image-results[data-layout="4"] > .image-result-card { flex-basis: calc((100% - 48px) / 4); }
.image-results[data-layout="5"] > .image-result-card { flex-basis: calc((100% - 64px) / 5); }
.image-results[data-layout="6"] > .image-result-card { flex-basis: calc((100% - 80px) / 6); }
.image-results[data-layout="9"] > .image-result-card { flex-basis: calc((100% - 128px) / 9); }

/* Form rows use two flexible columns and wrap cleanly on narrow screens. */
.video-fields,
.style-guide-fields,
.finance-form-grid {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  gap: 9px 10px;
}
.video-fields > *,
.style-guide-fields > *,
.finance-form-grid > * { flex: 1 1 calc(50% - 10px); min-width: 180px; }

/* Center the small icon-only surfaces and marks consistently. */
.brand,
.nav-icon,
.avatar-mini,
.profile,
.notice,
.function-symbol,
.link-icon,
.checkbox-custom,
.case-arrow,
.nav-tools-icon,
.agent-option-icon,
.agent-active-icon,
.agent-welcome-art,
.agent-message-avatar,
.image-tool-icon,
.image-empty-icon,
.reference-source-panel > .reference-source-empty,
.material-library-mark,
.reference-upload-item > button,
.reference-upload-add,
.prompt-style-token button,
.prompt-image-token button,
.detail-job-image,
.detail-long-image-status > div > span,
.asset-audio-card-icon,
.work-asset-placeholder > b,
.work-card-actions button,
.work-select,
.workflow-project-icon,
.workflow-editor-empty > span,
.workflow-node-index,
.workflow-node-icon,
.workflow-catalog-item > span,
.workflow-project-count,
.workflow-node-thumbnail,
.workflow-node-placeholder,
.workflow-context-menu button span,
.workflow-toolbar-button,
.workflow-project-toggle,
.workflow-node-picker-toggle,
.skill-card-icon,
.roadmap-icon,
.style-guide-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 850px) {
  .detail-workbench { flex-direction: column; }
  .detail-workbench > .detail-assets,
  .detail-workbench > .detail-settings,
  .detail-workbench > .detail-output { flex: 1 1 auto; width: 100%; min-width: 0; }
  .agents-workspace { flex-direction: column; }
  .agents-workspace > * { flex: 1 1 auto; width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
  .task-list > * { flex-basis: 47%; min-width: min(100%, 180px); }
  .admin-feature-grid > * { flex-basis: 47%; }
}

@media (max-width: 600px) {
  .task-list > * { flex-basis: 100%; min-width: 0; }
  .detail-results:has(.image-result-card) > .image-result-card,
  .image-results[data-layout]:has(.image-result-card) > .image-result-card {
    flex: 0 1 calc((100% - 12px) / 2);
    max-width: none;
  }
  .detail-results:has(.image-result-card),
  .image-results[data-layout]:has(.image-result-card) { gap: 12px; }
}

/* Apply the portable parts of the video-workbench layout patch. */
.topbar-brand { gap: 10px; }
.topbar-brand > img { width: 33px; height: 33px; }
.top-pill.skills-download > span { color: #000; }
body.dark-theme .top-pill.skills-download > span { color: #dce6f3; }

/* Shift the homepage portal down while keeping it in normal document flow. */
#homePage > .home-portal { top: 60px; }

/* Apply the latest layout-workbench adjustments for image generation and detail images. */
@media (min-width: 851px) {
  .generate-page > .image-composer-wrap {
    left: 379px;
    justify-content: center;
  }
  .detail-workbench > .detail-settings > .detail-controls {
    width: min(504.1px, 100%);
    height: 81.2px;
  }
}

.generate-page #composerUploads {
  width: 68px;
  height: 78px;
  justify-content: center;
  align-items: center;
  gap: 0;
  border-radius: 0;
}
.generate-page #composerUploads > .reference-upload-add.site-image-upload {
  width: 68px;
  min-width: 68px;
  flex-basis: 68px;
  height: 78px;
  line-height: 14.4px;
}

#detailAssetHint {
  position: relative;
  left: 43.3px;
}
#detailPrompt {
  height: 50px;
}

/* Detail-image uploads mirror the fixed-slot reference stack used by image generation. */
.detail-workbench .detail-asset-group { overflow: visible; }
.detail-workbench .detail-asset-heading { min-height: 16px; }
.detail-workbench .detail-upload-control {
  position: relative;
  display: flex;
  width: 68px;
  height: 88px;
  flex: 0 0 68px;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload {
  position: absolute !important;
  z-index: 1;
  top: 0;
  left: 0;
  box-sizing: border-box !important;
  display: flex !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  flex: 0 0 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px dashed #c7d3e2 !important;
  border-radius: 10px !important;
  background: #f3f5f8 !important;
  cursor: pointer;
}
.detail-workbench .detail-upload-control > .detail-upload-add .upload-badge {
  top: 5px !important;
  left: 5px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
}
.detail-workbench .detail-upload-control > .detail-upload-add .upload-plus {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  font-size: 23px !important;
}
.detail-workbench .detail-upload-stack {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 68px;
  height: 68px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.detail-workbench .detail-upload-item {
  position: absolute;
  top: 0;
  left: var(--detail-stack-offset, 0px);
  z-index: calc(20 - var(--stack-index, 0));
  display: block;
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  margin: 0;
  overflow: visible;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #f3f5f8;
  box-shadow: 0 2px 8px #17243a20;
  transition: left .2s ease;
  pointer-events: auto;
}
.detail-workbench .detail-upload-item:first-child { z-index: 30; }
.detail-workbench .detail-upload-item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}
.detail-workbench .detail-upload-index {
  display: none;
  top: 4px;
  bottom: auto;
  left: 4px;
  right: auto;
  background: #17243acc;
  font-size: 9px;
}
.detail-workbench .detail-upload-index:not(:empty) { display: block; }
.detail-workbench .detail-upload-item button {
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffffd9;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.detail-workbench .detail-upload-caption {
  position: absolute;
  top: 72px;
  left: 0;
  display: block;
  width: 68px;
  height: 14px;
  color: #71829a;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}
.detail-workbench .detail-upload-control:hover,
.detail-workbench .detail-upload-control:focus-within { z-index: 40; }
.detail-workbench .detail-upload-control:hover .detail-upload-item,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item {
  left: calc(68px + var(--stack-index, 0) * 72px);
}
.detail-workbench .detail-upload-control:hover .detail-upload-item button,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item button {
  opacity: 1;
  pointer-events: auto;
}
/* Keep the empty add slot clickable; only actual thumbnail/remove controls receive pointer events. */
.detail-workbench .detail-upload-stack { pointer-events: none !important; }
.detail-workbench .detail-upload-item,
.detail-workbench .detail-upload-item button { pointer-events: auto; }
.detail-workbench .detail-upload-control > .detail-upload-add:hover {
  border-color: #8abaf2 !important;
  background: #eff5ff !important;
}
@media (max-width: 850px) {
  .detail-workbench .detail-upload-control { width: 68px; height: 88px; flex-basis: 68px; }
}
.detail-workbench > .detail-assets {
  position: relative;
  left: .01px;
  top: 10.4px;
  row-gap: 8px;
  column-gap: 10px;
  padding-top: 12px;
}
.detail-workbench > .detail-output {
  position: relative;
  top: 10.4px;
  height: 250px;
}

#detailCountMainGroup > span,
#detailCountPageGroup > span {
  width: 104px;
  min-height: 27px;
  box-sizing: border-box;
  justify-content: space-between;
}

.detail-settings > #detailPrompt {
  width: 100%;
  height: 150px;
  min-height: 120px;
  margin-bottom: 0;
  position: static;
}

@media (min-width: 851px) {
  .detail-workbench {
    height: min(250px, 38vh);
    max-height: min(250px, 38vh);
  }
  .detail-workbench > .detail-assets,
  .detail-workbench > .detail-settings {
    height: 100%;
    min-height: 0;
  }
  #detailCounts { justify-content: center; }
}

/* Image-generation workspace: preserve the user's left-aligned composer while
   keeping its width fluid and its controls inside the viewport. */
@media (min-width: 851px) {
  .topbar-brand { margin-left: clamp(0px, 7vw, 100px); }
  .generate-page > #imageResults { inset: 60px 0 0; width: auto; }
  .generate-page > .image-composer-wrap {
    left: 105px;
    right: 24px;
    width: auto;
    max-width: 1210px;
    transform: none;
  }
  .generate-page .image-composer {
    flex: 1 1 1000px;
    width: min(1000px, 100%);
    max-width: 1000px;
    min-height: 170px;
  }
}

@media (max-width: 850px) {
  .topbar-brand { margin-left: 0; }
  .generate-page > .image-composer-wrap {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
  }
  .generate-page .image-composer {
    width: 100%;
    max-width: none;
    min-height: 0;
  }
}

/* Keep workbench values authoritative over the existing desktop detail-layout rules. */
.detail-workbench > .detail-assets {
  position: relative;
  left: .01px;
  top: 10.4px;
  row-gap: 8px;
  column-gap: 10px;
  padding-top: 12px;
}
.detail-settings > #detailPrompt { height: 50px; min-height: 50px; }
.detail-workbench > .detail-output { position: relative; top: 10.4px; height: 250px; }

/* Layout workbench adjustments exported on 2026-10-22. */
@media (min-width: 851px) {
  .detail-workbench {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: min(1200px, calc(100vw - 110px));
  }
  .detail-workbench > .detail-assets { height: 200px; }
  .detail-workbench > .detail-settings { width: 645.7px; height: 250px; }
  .detail-workbench > .detail-output { width: 300px; height: 230px; }
  .detail-workbench .detail-output-summary { justify-content: center; height: 35px; }
  #detailGenerate { position: relative; top: -2.5px; }
  .generate-page > .image-composer-wrap { left: 379px; }
}

/* Dialog references: compact overlapping thumbnails with an add button below. */
#composerUploads.reference-upload-list{position:relative;z-index:2;display:flex;width:84px;min-width:84px;max-width:84px;max-height:none;flex:0 0 84px;flex-direction:column;align-items:center;gap:4px;overflow:visible}
#composerUploads.reference-upload-list:has(.reference-upload-item){width:84px;min-width:84px;max-width:84px;flex:0 0 84px;display:flex;grid-template-columns:none;overflow:visible}
#composerUploads .reference-stack{position:relative;z-index:1;width:var(--stack-width,68px);height:68px;min-height:68px;flex:0 0 68px;overflow:visible;transition:width .18s ease}
#composerUploads .reference-upload-item{position:absolute;top:0;left:var(--stack-offset,0);display:flex;width:68px;min-width:68px;flex:0 0 68px;flex-direction:column;align-items:center;gap:3px;z-index:calc(20 - var(--stack-index,0));transition:left .2s ease,transform .2s ease}
#composerUploads .reference-upload-item img{display:block;width:68px;height:68px;border:2px solid #fff;border-radius:10px;object-fit:cover;box-shadow:0 3px 10px #17243a30}
#composerUploads .reference-upload-item>span{display:none;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#composerUploads .reference-stack:hover,#composerUploads .reference-stack:focus-within{z-index:30;display:flex;width:max-content;max-width:min(72vw,720px);height:84px;gap:8px;overflow-x:auto;overflow-y:visible;padding:2px 5px 5px 2px;box-sizing:border-box;border-radius:12px;background:#fff;box-shadow:0 8px 24px #15243c24;scrollbar-width:thin}
#composerUploads .reference-stack:hover .reference-upload-item,#composerUploads .reference-stack:focus-within .reference-upload-item{position:relative;top:auto;left:auto;display:flex;flex:0 0 68px;z-index:auto}
#composerUploads .reference-stack:hover .reference-upload-item>span,#composerUploads .reference-stack:focus-within .reference-upload-item>span{display:block}
#composerUploads .reference-upload-item>button{top:2px;right:2px;width:19px;height:19px;opacity:0}
#composerUploads .reference-upload-item>button[data-retry-reference]{right:23px}
#composerUploads .reference-upload-item:hover>button,#composerUploads .reference-upload-item:focus-within>button{opacity:1}
#composerUploads .reference-stack.is-empty{display:grid;place-items:center}
#composerUploads .reference-empty-slot{display:flex;width:68px;height:68px;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #c7d3e2;border-radius:10px;background:#f8fafc;color:#7c8ca2;font-size:11px}
#composerUploads .reference-empty-icon{font-size:20px;line-height:1;color:#98a8bb}
#composerUploads .reference-upload-add.site-image-upload{display:grid;width:68px!important;min-width:68px!important;max-width:68px!important;height:27px!important;min-height:27px!important;flex:0 0 27px!important;margin:0!important;padding:0;border:1px dashed #cfd9e4!important;border-radius:9px!important;background:#f8fafc;color:#728196;place-items:center;transform:none;overflow:hidden}
#composerUploads .reference-upload-add .upload-plus{font-size:21px!important;line-height:1;color:#8192a8}
#composerUploads .reference-upload-add:hover{border-color:#1289b8!important;background:#effaff;color:#1289b8}
@media(max-width:620px){#composerUploads .reference-stack:hover,#composerUploads .reference-stack:focus-within{max-width:min(66vw,520px)}}
@media(prefers-reduced-motion:reduce){#composerUploads .reference-stack,#composerUploads .reference-upload-item{transition:none}}

/* Dialog reference picker: use the familiar upload tile, then expose remove/add on hover. */
.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),34vw);min-width:min(68px,34vw);max-width:min(292px,34vw);height:96px;min-height:96px;max-height:96px;flex:0 0 auto;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{position:relative;display:flex;width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0!important;padding:8px 6px!important;box-sizing:border-box;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8;color:#71829a;overflow:hidden;transform:none}
.generate-page #composerUploads .reference-empty-badge{position:absolute;top:7px;left:7px;padding:2px 6px;border-radius:10px;background:#fff;color:#73839a;font-size:10px;line-height:1.2}
.generate-page #composerUploads .reference-empty-icon{margin-top:8px;color:#91a2b8;font-size:23px;line-height:1}
.generate-page #composerUploads .reference-empty-label{color:#71829a;font-size:11px;line-height:1.2}
.generate-page #composerUploads .reference-upload-item{position:relative;top:auto;left:auto;display:flex;width:68px;min-width:68px;height:94px;flex:0 0 68px;flex-direction:column;align-items:center;gap:2px;overflow:visible}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20}
.generate-page #composerUploads .reference-upload-item>span{display:none}
.generate-page #composerUploads .reference-card-actions{position:absolute;inset:0 0 auto;width:68px;height:94px;pointer-events:none}
.generate-page #composerUploads .reference-card-actions button{position:absolute;display:grid;width:20px;height:20px;min-width:20px;padding:0;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#17243acc;color:#fff;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.generate-page #composerUploads .reference-upload-item:hover .reference-card-actions button,.generate-page #composerUploads .reference-upload-item:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-card-actions [data-remove-reference]{top:3px;right:3px;font-size:16px}
.generate-page #composerUploads .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-card-actions [data-add-reference]{top:72px;left:24px;width:22px;height:22px;border:1px solid #d6e2ef;background:#fff;color:#3476cf;font-size:19px}
@media(max-width:620px){.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),30vw);max-width:min(220px,30vw)}}

/* Restore the original portrait reference tile proportions and overlap multiple references. */
.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),34vw);min-width:68px;max-width:min(220px,34vw);height:110px;min-height:110px;max-height:110px;overflow:visible}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;padding:8px 6px!important}
.generate-page #composerUploads .reference-empty-icon{margin-top:9px}
.generate-page #composerUploads .reference-stack{position:relative;z-index:1;display:flex;width:var(--stack-width,68px);max-width:min(70vw,680px);height:78px;min-height:78px;flex:0 0 auto;overflow:visible;transition:width .18s ease}
.generate-page #composerUploads .reference-upload-item{position:absolute;top:0;left:var(--stack-offset,0);display:flex;width:68px;min-width:68px;height:106px;flex:0 0 68px;flex-direction:column;align-items:center;gap:2px;z-index:calc(20 - var(--stack-index,0));transition:left .2s ease}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:78px;min-height:78px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20}
.generate-page #composerUploads .reference-upload-item>span{display:none}
.generate-page #composerUploads .reference-card-actions{position:absolute;inset:0;width:68px;height:106px;pointer-events:none}
.generate-page #composerUploads .reference-card-actions button{position:absolute;display:grid;width:20px;height:20px;min-width:20px;padding:0;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#17243acc;color:#fff;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease}
.generate-page #composerUploads .reference-upload-item:hover .reference-card-actions button,.generate-page #composerUploads .reference-upload-item:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-card-actions [data-remove-reference]{top:3px;right:3px;font-size:16px}
.generate-page #composerUploads .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-card-actions [data-add-reference]{top:82px;left:24px;width:22px;height:22px;border:1px solid #d6e2ef;background:#fff;color:#3476cf;font-size:19px}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{z-index:30;display:flex;width:max-content;max-width:min(70vw,680px);height:110px;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 5px 4px 0;box-sizing:border-box;border-radius:10px;background:#fff;box-shadow:0 8px 24px #15243c24;scrollbar-width:thin}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:relative;top:auto;left:auto;display:flex;flex:0 0 68px;z-index:auto}
.generate-page #composerUploads .reference-stack-add{display:none;position:relative;top:auto;left:auto;width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;padding:8px 6px!important;box-sizing:border-box}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex}
@media(max-width:620px){.generate-page #composerUploads.reference-upload-list{max-width:34vw}.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{max-width:min(66vw,520px)}}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item>span,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item>span{display:none!important}
.generate-page #composerUploads .reference-stack{align-items:center}
.generate-page #composerUploads .reference-upload-item{width:68px;height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:0;object-fit:cover}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:160px;min-height:160px;align-items:center;gap:8px;padding:10px;overflow-x:auto;overflow-y:hidden}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{width:var(--expanded-width,68px);height:var(--expanded-height,68px);flex:0 0 var(--expanded-width,68px);align-self:center}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:var(--expanded-width,68px);height:var(--expanded-height,68px);min-height:0;object-fit:contain}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:var(--expanded-width,68px);height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions [data-remove-reference],.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions [data-remove-reference]{top:3px;right:3px}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions [data-retry-reference],.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-stack-add{align-self:center}
.generate-page #composerUploads>.reference-upload-add.site-image-upload,.generate-page #composerUploads .reference-stack-add{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:98px!important;min-height:98px!important;flex-basis:68px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible}
.generate-page #composerUploads .reference-upload-frame{position:relative;display:flex;width:68px;height:78px;min-height:78px;flex:0 0 78px;align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed #c7d3e2;border-radius:10px;background:#f3f5f8;color:#91a2b8}
.generate-page #composerUploads .reference-upload-frame .reference-empty-badge{top:7px;left:7px}
.generate-page #composerUploads .reference-upload-frame .reference-empty-icon{margin:0;color:#91a2b8;font-size:23px;line-height:1}
.generate-page #composerUploads .reference-empty-label{display:block;max-width:68px;color:#71829a;font-size:11px;line-height:14px;text-align:center}
.generate-page #composerUploads .reference-upload-add:hover .reference-upload-frame{border-color:#1289b8;background:#effaff}
.generate-page #composerUploads .reference-stack-add{display:none!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}
.generate-page #composerUploads .reference-stack-add{left:0;z-index:50}
/* The reference placeholder is square; expanded photos keep their ratio within that square. */
.generate-page #composerUploads>.reference-upload-add.site-image-upload,.generate-page #composerUploads .reference-stack-add{height:88px!important;min-height:88px!important;max-height:88px!important}
.generate-page #composerUploads .reference-upload-frame{width:68px;height:68px;min-height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item{height:68px;min-height:68px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-card-actions{height:68px}
.generate-page #composerUploads .reference-upload-caption{top:72px}
.generate-page #composerUploads .reference-stack-add{height:88px!important;min-height:88px!important;max-height:88px!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:78px;min-height:78px}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{height:98px!important;min-height:98px!important;max-height:98px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
.generate-page #composerUploads .reference-upload-caption{position:absolute;top:82px;left:0;display:block;width:68px;height:14px;color:#71829a;font-size:11px;line-height:14px;text-align:center;pointer-events:none}
.generate-page #composerUploads .reference-stack-add{height:78px!important;min-height:78px!important;max-height:78px!important;flex-basis:68px!important;padding:0!important;align-self:center}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{padding:0 10px 0 0}
.generate-page #composerUploads .reference-stack .reference-stack-add{align-self:flex-start}
/* The first uploaded thumbnail occupies the exact original reference-image frame. */
.generate-page #composerUploads .reference-upload-item{height:78px;min-height:78px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:78px;min-height:78px;object-fit:cover}
/* Keep the empty upload slot anchored; fan uploaded photos out beside it without a popup panel. */
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{position:relative;display:block;width:var(--expanded-stack-width,68px);max-width:none;height:140px;min-height:140px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:absolute;top:0;left:var(--expanded-left,0px);display:flex;width:var(--expanded-width,68px);height:var(--expanded-height,78px);min-width:0;flex:0 0 var(--expanded-width,68px);align-items:center;z-index:calc(40 - var(--stack-index,0))}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:var(--expanded-width,68px);height:var(--expanded-height,78px);min-height:0;object-fit:contain}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:var(--expanded-width,68px);height:var(--expanded-height,78px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions button,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-stack-add{position:absolute;top:0;left:var(--expanded-add-left,76px);align-self:auto}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}

/* Final reference picker sizing: square stack, square expanded thumbs, 4px fan spacing. */
.generate-page #composerUploads .reference-upload-frame{width:68px;height:68px;min-height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item{width:68px;height:68px;min-height:68px;flex-basis:68px;align-items:center}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-card-actions{width:68px;height:68px}
.generate-page #composerUploads .reference-upload-caption{top:72px}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{position:relative;display:block;width:var(--expanded-stack-width,68px);max-width:none;height:68px;min-height:68px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:absolute;top:0;left:var(--expanded-left,72px);display:flex;width:68px;height:68px;min-width:68px;min-height:68px;flex:0 0 68px;align-items:center;z-index:calc(40 - var(--stack-index,0))}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:68px;height:68px}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions button,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-stack-add{position:absolute;top:0;left:0!important;width:68px!important;height:88px!important;min-width:68px!important;min-height:88px!important;max-height:88px!important;flex-basis:68px!important;align-self:flex-start;z-index:50}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}

/* Keep the upload slot's flex footprint fixed so added photos cannot move it. */
.generate-page #composerUploads.reference-upload-list{position:relative!important;width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;margin:0!important;overflow:visible!important}
.generate-page #composerUploads .reference-stack{position:relative!important;top:0!important;left:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important;overflow:visible!important}
.generate-page #composerUploads .reference-stack-add{position:absolute!important;top:0!important;left:0!important;margin:0!important}
.generate-page #composerUploads .reference-upload-item{top:0!important;height:68px!important;min-height:68px!important;align-items:center!important}
.generate-page #composerUploads .reference-upload-item img{width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:68px!important;min-height:68px!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{top:0!important;left:var(--expanded-left,72px)!important;width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex:0 0 68px!important}

/* Keep the reference tile and its caption anchored while thumbnails fan out. */
.generate-page #composerUploads.reference-upload-list{height:88px!important;min-height:88px!important;max-height:88px!important;align-items:flex-start!important;overflow:visible!important}
.generate-page #composerUploads .reference-upload-caption{position:absolute!important;top:70px!important;left:0!important;z-index:60!important;display:block!important;width:68px!important;height:14px!important;margin:0!important;overflow:visible!important;color:#71829a!important;font-size:11px!important;line-height:14px!important;text-align:center!important;white-space:nowrap!important;visibility:visible!important;pointer-events:none!important}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:68px!important;min-height:68px!important;overflow:visible!important}
/* Keep the upload placeholder in its original slot beneath the first thumbnail. */
.generate-page #composerUploads .reference-stack-add{display:flex!important;z-index:1!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important;z-index:1!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{top:50%!important;transform:translateY(-50%)!important}
/* Keep the production dialog uploader identical to its tuned debug preview. */
.generate-page #composerUploads.reference-upload-list{margin:0!important;padding:0!important;gap:0!important;align-items:flex-start!important;flex-direction:column!important;width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads>.reference-upload-add.site-image-upload{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important}
.generate-page #composerUploads .reference-upload-frame{margin:0!important}
.generate-page #composerUploads .reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;display:block!important;width:68px!important;height:14px!important;margin:4px 0 0!important;padding:0!important;flex:0 0 14px!important}
.generate-page #composerUploads .reference-stack-add{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important}
.generate-page #composerUploads .reference-stack-add .reference-upload-frame{margin:0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:has(.reference-stack){width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads:has(>.reference-upload-add){width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads:has(>.reference-upload-add)>.reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;flex:0 0 14px!important;width:68px!important;height:14px!important;margin:4px 0 0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-add.site-image-upload{height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-add.site-image-upload>.reference-upload-frame{width:68px!important;height:68px!important;min-height:68px!important;flex:0 0 68px!important;margin:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;width:68px!important;height:14px!important;flex:0 0 14px!important;margin:4px 0 0!important;padding:0!important}

/* Match the dialog reference stack interaction in the model three-view slots. */
.generate-page #composerUploads.multi-reference-feature{display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:12px!important;align-items:flex-start!important;width:max-content!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap{position:relative!important;display:block!important;flex:0 0 68px!important;width:68px!important;height:88px!important;overflow:visible!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload-frame{position:relative!important;width:68px!important;height:68px!important;overflow:visible!important;z-index:2}
.generate-page #composerUploads.multi-reference-feature .composer-upload{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important;overflow:visible!important;transform:none!important;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-tag{top:7px!important;left:7px!important;z-index:3!important;padding:2px 6px!important;border-radius:10px!important;font-size:10px!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-plus{display:block!important;margin-top:4px!important;font-size:23px!important;line-height:1!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label{position:absolute!important;top:72px!important;left:0!important;z-index:3!important;display:block!important;width:68px!important;max-width:68px!important;margin:0!important;overflow:visible!important;color:#71829a!important;font-size:11px!important;line-height:14px!important;text-align:center!important;white-space:nowrap!important;opacity:1!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview{position:absolute!important;inset:0!important;width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important;transform:none!important;border:1px solid #d8e0ea!important;border-radius:10px!important;z-index:2!important}
.generate-page #composerUploads.multi-reference-feature .slot-remove-button{top:3px!important;right:3px!important;z-index:5!important;opacity:0!important;pointer-events:none!important;transition:opacity .14s ease!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-remove-button,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-remove-button{opacity:1!important;pointer-events:auto!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails{position:absolute!important;top:0!important;left:0!important;width:68px!important;height:68px!important;overflow:visible!important;pointer-events:none!important;z-index:4!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails[hidden]{display:none!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb{position:absolute!important;top:0!important;left:var(--slot-thumb-offset,0px)!important;width:68px!important;height:68px!important;border-radius:10px!important;box-shadow:0 2px 8px #17243a30!important;z-index:calc(20 - var(--slot-thumb-index,0))!important;transition:left .2s ease!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb.is-primary{z-index:30!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img{display:block!important;width:68px!important;height:68px!important;object-fit:cover!important;border:1px solid #d8e0ea!important;border-radius:10px!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb button{position:absolute!important;top:3px!important;right:3px!important;display:grid!important;width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;place-items:center!important;border:1px solid #ffffffd9!important;border-radius:50%!important;background:#17243acc!important;color:#fff!important;font-size:16px!important;line-height:1!important;opacity:0!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within{z-index:30!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumbnails,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumbnails{z-index:4!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(68px + var(--slot-thumb-index,0)*72px)!important;pointer-events:auto!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb button,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb button{opacity:1!important;pointer-events:auto!important}
@media(max-width:620px){.generate-page #composerUploads.multi-reference-feature{gap:8px!important;width:max-content!important}.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap{flex-basis:58px!important;width:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-upload-frame,.generate-page #composerUploads.multi-reference-feature .composer-upload,.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img{width:58px!important;height:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label{top:62px!important;width:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(58px + var(--slot-thumb-index,0)*62px)!important}}

/* Preserve the upload target underneath the first image; fan only later images to the right. */
.generate-page #composerUploads .reference-stack-add{z-index:1!important;pointer-events:auto!important}

/* Preserve the model three-view 90px slot sizing; shared 90px rules apply below to every upload module. */
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap{flex:0 0 90px!important;width:90px!important;height:110px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload-frame,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload img.preview,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumbnails,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb img{width:90px!important;height:90px!important;min-width:90px!important;min-height:90px!important;max-width:90px!important;max-height:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload{flex-basis:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload .upload-label{top:94px!important;width:90px!important;max-width:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload .upload-tag{top:7px!important;left:7px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb img{object-fit:cover!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap:hover .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(90px + var(--slot-thumb-index,0)*96px)!important}
.generate-page #composerUploads .reference-upload-item{z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within) .reference-upload-item:first-of-type{left:0!important;z-index:4!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{left:calc(68px + var(--stack-index,0)*72px)!important;z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{z-index:5!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-upload-caption{margin-top:4px!important}
.generate-page #composerUploads .reference-stack.is-expanded{position:relative!important;display:block!important;width:var(--expanded-stack-width,68px)!important;max-width:none!important;height:68px!important;min-height:68px!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-stack-add{display:flex!important;z-index:5!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item{position:absolute!important;top:0!important;left:calc(68px + var(--stack-index,0)*72px)!important;display:flex!important;width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex:0 0 68px!important;align-items:center!important;transform:none!important;z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item img{width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-card-actions{width:68px!important;height:68px!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-card-actions button{opacity:1!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item{transition:left .2s ease!important}
/* Earliest upload stays on top; later photos sit underneath, with alternating offsets. */
.generate-page #composerUploads .reference-stack .reference-upload-item{z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within):not(.is-expanded) .reference-upload-item:first-of-type{z-index:10!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within):not(.is-expanded) .reference-upload-item{left:var(--stack-offset,0px)!important}
/* Keep debug-only layout overrides while removing all colored box-model guides. */
#referenceDebugOverlay{display:none!important}

/* Share the reference-image tile size and hover fan-out across video, model, and scene uploads. */
.video-page .video-form .asset-grid .asset-tile{position:relative;box-sizing:border-box;flex:0 0 68px!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8;overflow:visible!important}
.video-page .video-form .asset-grid .asset-tile:hover,.video-page .video-form .asset-grid .asset-tile:focus-visible{outline:2px solid #dbe6ff;outline-offset:2px}
.video-page .video-form .asset-grid .asset-tile .upload-badge{top:5px;left:5px;padding:2px 6px}
.video-page .video-form .asset-grid .asset-tile .upload-plus{font-size:23px}
.video-page .video-form .asset-grid .asset-tile .upload-label{font-size:10px}
.video-page .video-form .asset-grid .asset-thumb-stack{position:absolute;inset:0;display:none;overflow:visible;border-radius:10px;pointer-events:none}
.video-page .video-form .asset-tile.has-upload:hover .asset-thumb-stack,.video-page .video-form .asset-tile.has-upload:focus-within .asset-thumb-stack{pointer-events:auto}
.video-page .video-form .asset-tile.has-image-preview .asset-remove-button{display:none!important}
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-stack,.video-page .video-form .asset-tile.has-video-preview .asset-thumb-stack,.video-page .video-form .asset-tile.has-audio-preview .asset-thumb-stack,.video-page .video-form .asset-tile.is-resolving .asset-thumb-stack{display:block}
.video-page .video-form .asset-thumb-card{position:absolute;top:0;left:var(--thumb-offset,0px);width:68px;height:68px;z-index:calc(20 - var(--thumb-index,0));transition:left .2s ease;pointer-events:auto}
.video-page .video-form .asset-thumb-image{display:block;width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20;transform:none}
.video-page .video-form .asset-thumb-remove{position:absolute;top:2px;right:2px;z-index:2;display:grid;width:20px;height:20px;padding:0;place-items:center;border:1px solid #ffffffd9;border-radius:50%;background:#152238e8;color:#fff;font-size:16px;line-height:1;opacity:0;pointer-events:none;cursor:pointer}
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card{left:calc(68px + var(--thumb-index,0)*72px);z-index:calc(20 - var(--thumb-index,0))}
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-remove,.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-remove{opacity:1;pointer-events:auto}
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-remove:disabled{opacity:.5;pointer-events:none}
.video-page .video-form .asset-tile.has-image-preview:hover .upload-label,.video-page .video-form .asset-tile.has-image-preview:hover .upload-plus,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-label,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-plus{display:block;position:absolute;z-index:3;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-page .video-form .asset-tile.has-image-preview:hover .upload-badge,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-badge{display:block;z-index:4}
.video-page .video-form .asset-thumb-video{top:0;left:0;right:auto;width:68px;height:68px;transition:left .2s ease;pointer-events:auto}
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video{left:72px;width:68px;height:68px}
.video-page .video-form .asset-tile.has-audio-preview .asset-thumb-stack{background:transparent}
.video-page .video-form .asset-tile.has-audio-preview .asset-audio-icon{top:0;left:0;right:auto;width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;background:linear-gradient(145deg,#24354d,#111b2b);transition:left .2s ease;pointer-events:none}
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon{left:72px}
.video-page .video-form .asset-tile.has-upload:hover .upload-label,.video-page .video-form .asset-tile.has-upload:hover .upload-plus{display:block;z-index:3;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-page .video-form .asset-tile.has-video-preview:hover .upload-badge,.video-page .video-form .asset-tile.has-audio-preview:hover .upload-badge{display:block;z-index:4}
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button{top:2px;right:auto;left:113px;opacity:1;pointer-events:auto}

/* Unify every video-tool upload slot with the fixed square, expandable reference tiles. */
.video-page .video-form .asset-grid { overflow: visible; }
.video-page .video-form .video-upload-slot { position: relative; z-index: 0; display: block; width: 68px; height: 88px; flex: 0 0 68px; overflow: visible; }
.video-page .video-form .video-upload-slot:hover,
.video-page .video-form .video-upload-slot:focus-within { z-index: 30; }
.video-page .video-form .video-upload-caption { position: absolute; top: 72px; left: 0; display: block; width: 68px; height: 14px; overflow: hidden; color: #71829a; font-size: 11px; line-height: 14px; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.video-page .video-form .asset-grid .asset-tile { position: absolute !important; top: 0; left: 0; z-index: 1; box-sizing: border-box; display: flex !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; flex: 0 0 68px !important; margin: 0 !important; overflow: visible !important; border: 1px dashed #c7d3e2 !important; border-radius: 10px !important; background: #f3f5f8 !important; color: #71829a; }
.video-page .video-form .asset-grid .asset-tile:hover,
.video-page .video-form .asset-grid .asset-tile:focus-visible { outline: 2px solid #dbe6ff; outline-offset: 2px; }
.video-page .video-form .asset-grid .asset-tile .upload-badge { top: 5px; left: 5px; z-index: 6; display: block !important; max-width: calc(100% - 10px); padding: 2px 6px; font-size: 9px; }
.video-page .video-form .asset-grid .asset-tile .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 5; display: block !important; margin: 0; transform: translate(-50%, -50%); font-size: 23px; line-height: 1; pointer-events: none; }
.video-page .video-form .asset-grid .asset-tile .upload-label { display: none !important; }
.video-page .video-form .asset-grid .asset-thumb-stack { position: absolute; z-index: 3; inset: 0; display: none; overflow: visible !important; border-radius: 10px; background: transparent; pointer-events: none !important; }
.video-page .video-form .asset-grid .asset-tile.has-image-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.has-video-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.has-audio-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.is-resolving .asset-thumb-stack { display: block; }
.video-page .video-form .asset-grid .asset-thumb-card { position: absolute; top: 0; left: var(--thumb-offset, 0px); z-index: calc(20 - var(--thumb-index, 0)); display: block; width: 68px; height: 68px; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-grid .asset-thumb-card:first-child { z-index: 30; }
.video-page .video-form .asset-grid .asset-thumb-image { display: block; width: 68px; height: 68px; box-sizing: border-box; border: 1px solid #d8e0ea; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 8px #17243a20; transform: none !important; }
.video-page .video-form .asset-grid .asset-thumb-remove { position: absolute; top: 2px; right: 2px; z-index: 2; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid #ffffffd9; border-radius: 50%; background: #152238e8; color: #fff; font-size: 16px; line-height: 1; opacity: 0; pointer-events: none; cursor: pointer; }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: var(--thumb-offset, 0px); }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 72px); }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-remove,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-remove { opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-grid .asset-thumb-video { position: absolute; top: 0; left: 0; right: auto; z-index: 20; width: 68px; height: 68px; border: 1px solid #d8e0ea; border-radius: 10px; object-fit: cover; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video { left: 0; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video { left: 0; z-index: 40; }
.video-page .video-form .asset-grid .asset-audio-icon { position: absolute; inset: 0 auto auto 0; z-index: 20; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid #d8e0ea; border-radius: 10px; background: linear-gradient(145deg,#24354d,#111b2b); color: #f3f7ff; font-size: 30px; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0; z-index: 40; }
.video-page .video-form .asset-tile.has-video-preview .upload-badge,
.video-page .video-form .asset-tile.has-audio-preview .upload-badge,
.video-page .video-form .asset-tile.is-resolving .upload-badge { display: block !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-remove-button { top: 2px; right: auto; left: 118px; z-index: 22; opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-tile.is-resolving .video-reference-loading { position: absolute; top: 0; left: 0; z-index: 40; width: 68px; height: 68px; pointer-events: none; }
.video-page .video-form .reference-media-grid { display: flex; align-items: flex-start; gap: 10px 18px; overflow: visible; }
.video-page .video-form .reference-media-grid > .video-upload-slot { flex: 0 0 68px; width: 68px; transition: flex-basis .2s ease, width .2s ease; }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:focus-within),
.video-page .video-form .video-upload-slot:has(.asset-tile.is-resolving:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.is-resolving:focus-within) {
  flex-basis: var(--expanded-width, 140px);
  width: var(--expanded-width, 140px);
}
body.dark-theme .video-page .video-form .video-upload-caption { color: #9baac0; }

/* Keep the first uploaded cover anchored above its placeholder; fan out only later photos. */
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 72px); }
.video-page .video-form .asset-grid .asset-thumb-card:first-child { z-index: 50; }
.video-page .video-form .asset-grid .asset-thumb-image { position: absolute; top: 0 !important; right: auto !important; bottom: auto !important; left: 0 !important; transform: none !important; }
.video-page .video-form .asset-grid .asset-thumb-video,
.video-page .video-form .asset-grid .asset-audio-icon { left: 0; z-index: 50; }
.video-page .video-form .asset-tile.has-image-preview .upload-badge,
.video-page .video-form .asset-tile.has-image-preview .upload-plus,
.video-page .video-form .asset-tile.has-video-preview .upload-badge,
.video-page .video-form .asset-tile.has-video-preview .upload-plus,
.video-page .video-form .asset-tile.has-audio-preview .upload-badge,
.video-page .video-form .asset-tile.has-audio-preview .upload-plus { display: none !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-remove-button { top: 2px; right: 2px; left: auto; z-index: 60; }
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-remove { z-index: 60; }

/* Extra vertical room for the 90px three-view slots and their captions. */
.generate-page .image-composer:has(#composerUploads.three-view-upload-feature) .composer-content { min-height: 150px; }

/* Standardize every reusable upload target to a 90px square, including its preview and caption. */
.generate-page .image-composer:has(#composerUploads.multi-reference-feature) .composer-content { min-height: 150px; }
.generate-page #composerUploads.multi-reference-feature { gap: 14px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap { flex: 0 0 90px !important; width: 90px !important; height: 112px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload-frame,
.generate-page #composerUploads.multi-reference-feature .composer-upload,
.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload { flex: 0 0 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label { top: 94px !important; width: 90px !important; max-width: 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb { left: calc(90px + var(--slot-thumb-index, 0) * 96px) !important; }

/* Dialog reference uploads use the same square, with extra room for the fixed caption. */
.generate-page #composerUploads.reference-upload-list { box-sizing: content-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; flex: 0 0 90px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; }
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack)),
.generate-page #composerUploads.reference-upload-list:has(.reference-stack) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; flex: 0 0 90px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; }
.generate-page #composerUploads.reference-upload-list > .reference-upload-add.site-image-upload,
.generate-page #composerUploads.reference-stack-add,
.generate-page #composerUploads .reference-upload-frame { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack { width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; }
.generate-page #composerUploads .reference-upload-item,
.generate-page #composerUploads .reference-upload-item img { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.generate-page #composerUploads .reference-upload-item { flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-card-actions { width: 90px !important; height: 90px !important; }
.generate-page #composerUploads .reference-upload-caption { position: relative !important; top: auto !important; left: auto !important; width: 90px !important; height: 14px !important; flex: 0 0 14px !important; margin: 4px 0 0 !important; }
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,
.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item { left: var(--expanded-left, 90px) !important; width: 90px !important; height: 90px !important; min-width: 90px !important; min-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item { left: calc(90px + var(--stack-index, 0) * 96px) !important; width: 90px !important; height: 90px !important; min-width: 90px !important; min-height: 90px !important; flex: 0 0 90px !important; }

/* Detail-image products and references. */
.detail-workbench .detail-upload-control { width: 90px !important; height: 112px !important; flex: 0 0 90px !important; }
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload,
.detail-workbench .detail-upload-stack,
.detail-workbench .detail-upload-item { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload { flex: 0 0 90px !important; }
.detail-workbench .detail-upload-item { flex: 0 0 90px !important; }
.detail-workbench .detail-upload-caption { top: 94px !important; width: 90px !important; }
.detail-workbench .detail-upload-control:hover .detail-upload-item,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item { left: calc(90px + var(--stack-index, 0) * 96px) !important; }

/* Video, reference-video and reference-audio upload slots share 90px previews. */
.video-page .video-form .video-upload-slot,
.video-page .video-form .reference-media-grid > .video-upload-slot { box-sizing: border-box; width: 90px !important; min-width: 90px !important; flex: 0 0 90px !important; height: 112px !important; }
.video-page .video-form .video-upload-caption { top: 94px !important; width: 90px !important; }
.video-page .video-form .asset-grid .asset-tile,
.video-page .video-form .asset-grid .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-thumb-card,
.video-page .video-form .asset-grid .asset-thumb-image,
.video-page .video-form .asset-grid .asset-thumb-video,
.video-page .video-form .asset-grid .asset-audio-icon,
.video-page .video-form .asset-tile.is-resolving .video-reference-loading { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.video-page .video-form .asset-grid .asset-thumb-image { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 96px) !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0 !important; }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:focus-within) { flex-basis: var(--expanded-width, 90px) !important; width: var(--expanded-width, 90px) !important; }
.legacy-home-workbench .reference-tile { box-sizing: border-box; width: 90px; min-width: 90px; max-width: 90px; height: 90px; flex: 0 0 90px; border-radius: 10px; }
.legacy-home-workbench .reference-tile .upload-label { max-width: 82px; }

/* Keep the dialog's first uploaded preview anchored over its original square. */
.generate-page #composerUploads .reference-stack { position: relative !important; width: 90px !important; min-width: 90px !important; height: 90px !important; min-height: 90px !important; overflow: visible !important; }
.generate-page #composerUploads .reference-stack-add { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack-add .reference-upload-frame { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack .reference-upload-item:first-of-type { left: 0 !important; z-index: 50 !important; }
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,
.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item,
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item { left: var(--expanded-left, 0px) !important; top: 0 !important; transform: none !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack .reference-upload-item:first-of-type { z-index: 50 !important; }

/* Dialog references now use the same fixed upload slot and thumbnail layer as three-view. */
.generate-page #composerUploads .dialog-reference-slot { position: relative !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded { z-index: 30 !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded .slot-reference-thumb { left: calc(90px + var(--slot-thumb-index, 0) * 96px) !important; pointer-events: auto !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded .slot-reference-thumb button { opacity: 1 !important; pointer-events: auto !important; }
.generate-page #composerUploads .dialog-reference-slot .slot-reference-thumb [data-retry-reference] { right: auto !important; left: 3px !important; }

/* Audio references are separate playable, named pale-blue cards. */
.video-page .video-form .asset-grid .asset-audio-card { position: absolute; top: 0; left: var(--thumb-offset, 0px); z-index: calc(20 - var(--thumb-index, 0)); box-sizing: border-box; display: flex; width: 90px; height: 90px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 8px 5px 5px; overflow: hidden; border: 1px solid #c7ddf7; border-radius: 10px; background: #edf6ff; color: #365b82; cursor: pointer; pointer-events: auto !important; transition: left .2s ease; }
.video-page .video-form .asset-grid .asset-audio-card:hover,
.video-page .video-form .asset-grid .asset-audio-card.is-playing { background: #e4f0ff; }
.video-page .video-form .asset-grid .asset-audio-card .asset-audio-icon { position: static !important; inset: auto !important; display: grid; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; place-items: center; border: 0; border-radius: 50%; background: var(--audio-accent, #3478c8); color: #fff; font-size: 25px; line-height: 1; text-shadow: none; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-name { display: block; width: 100%; overflow: hidden; color: #365b82; font-size: 9px; line-height: 13px; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-card .asset-thumb-remove { top: 3px; right: 3px; z-index: 3; opacity: 0; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-card:hover .asset-thumb-remove,
.video-page .video-form .asset-grid .asset-audio-card:focus-within .asset-thumb-remove { opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-card,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-card { left: calc(90px + var(--thumb-index, 0) * 96px); }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-audio-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-audio-preview:focus-within) { flex-basis: var(--expanded-width, 90px) !important; width: var(--expanded-width, 90px) !important; }
.video-page .video-form .asset-tile.has-audio-preview:hover .upload-plus,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 52; display: grid !important; transform: translate(-50%, -50%); pointer-events: auto; }
.video-page .video-form .reference-media-grid { flex-wrap: wrap; min-width: 0; }
.video-page .video-form .video-upload-slot.is-audio-expanded { box-sizing: border-box; flex: 0 0 100% !important; width: 100% !important; max-width: 100%; height: var(--audio-slot-height, 112px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .video-upload-caption { top: var(--audio-caption-top, 94px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .asset-audio-card { top: var(--audio-top, 0px) !important; left: var(--audio-left, 90px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 52; display: grid !important; transform: translate(-50%, -50%); pointer-events: auto; }
.video-page .video-reference-statuses .video-inline-status { min-height: 0; margin: 0; }

/* Reference videos stay clean thumbnails: click anywhere to toggle playback without native chrome. */
.video-page .video-form .asset-thumb-video { cursor: pointer; }
.video-page .video-form .asset-video-play-hint { position: absolute; top: 50%; left: 50%; z-index: 55; display: grid; width: 32px; height: 32px; place-items: center; padding-left: 2px; transform: translate(-50%, -50%); border: 1px solid rgb(255 255 255 / 82%); border-radius: 50%; background: rgb(20 42 72 / 62%); color: #fff; font-size: 13px; line-height: 1; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.video-page .video-form .asset-tile.is-video-playing .asset-video-play-hint { opacity: 0; transform: translate(-50%, -50%) scale(.88); }