/* R14: center each workspace on its canvas and keep editor controls contained. */
.vz-app .home-workspace {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(24px, 3vw, 48px);
}
.vz-app .home-tools { gap: 16px; }
.vz-app .home-tool { min-width: 0; }
.vz-app .home-cover {
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: 182px;
}
.vz-app .home-cover img { display: block; object-fit: contain; }
.vz-app .home-tool-copy { min-height: 84px; }
.vz-app .home-brief { min-width: 0; }
.vz-app .home-brief > span { min-width: 0; }
.vz-app .home-brief > svg { flex-shrink: 0; }

/* A viewport-sized backdrop has no visible seam at the edge of a scroll page. */
.vz-content:has(.home-workspace, .iw-upload, .vl-library)::before {
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 22%, #21b99526, transparent 56%),
    radial-gradient(ellipse at 78% 72%, #9973d928, transparent 56%);
  animation: vz-r14-ambient 20s ease-in-out infinite alternate;
  will-change: transform;
}
.vz-content:has(.home-workspace, .iw-upload, .vl-library) > * {
  position: relative;
  z-index: 1;
}
.vz-app .vl-library { background: transparent; }
@keyframes vz-r14-ambient {
  0% { transform: translate3d(-4%, -3%, 0) scale(1.02); }
  50% { transform: translate3d(2%, 3%, 0) scale(1.05); }
  100% { transform: translate3d(5%, -1%, 0) scale(1.02); }
}

.vz-app .vz-nav button > span { font-size: 13px; font-weight: 600; line-height: 1.3; }
.vz-app .vz-nav button.active > span { font-weight: 700; }

/* The prompt and title share the center line of the image stage, not the page. */
.vz-app .iw-generate .iw-main-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.vz-app .iw-generate .iw-main-header > div {
  display: block;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.vz-app .iw-generate .iw-main-header > .iw-field,
.vz-app .iw-generate .iw-main-header > .iw-service-note {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  max-width: 240px;
  min-width: 0;
  margin: 0;
  text-align: start;
}
.vz-app .iw-generate .iw-main-header .iw-field > span { white-space: nowrap; }
.vz-app .iw-generate .iw-main-header select { text-overflow: ellipsis; }
.vz-app .iw-workspace.iw-generate .vz-generate-main { scrollbar-gutter: auto; }
.vz-app .iw-generate .iw-prompt {
  justify-self: center;
  width: min(100%, 940px);
  max-width: 940px;
  margin-inline: auto;
  box-sizing: border-box;
  min-width: 0;
}
.vz-app .iw-generate .iw-prompt > textarea.vz-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: start;
}
.vz-app .iw-generate .iw-prompt-heading { min-width: 0; }
.vz-app .iw-generate .iw-prompt-heading > span { flex-shrink: 0; }
.vz-app .iw-generate .iw-prompt-heading [data-prompt-sync] { min-width: 0; text-align: end; }

/* Reset the inherited top offset: setting both top and bottom made this huge. */
.vz-app .vz-edit-hint {
  top: auto;
  bottom: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}
.vz-app .vz-tool-dock {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(760px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: auto;
  min-height: 76px;
  max-height: none;
  bottom: 38px;
  gap: 2px;
  padding: 7px;
  overflow: visible;
  border-radius: 14px;
}
.vz-app .vz-tool-dock button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 5px 2px;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 550;
  line-height: 1.2;
  box-sizing: border-box;
}
.vz-app .vz-tool-dock button > span {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
}
.vz-app .vz-tool-dock button > svg { flex-shrink: 0; width: 22px; height: 22px; }
.vz-app .vz-tool-dock button.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vz-blue) 20%, transparent); }
.vz-app .vz-edit-hotkeys { bottom: 124px; }
.vz-app .vz-native-tool-settings { max-width: min(420px, calc(100% - 32px)); }

.vz-app .vz-selection-popup {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 350px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 140px);
  min-width: 0;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--vz-line) transparent;
  touch-action: auto;
}
.vz-app .vz-selection-popup > * { min-width: 0; flex-shrink: 0; }
.vz-app .vz-selection-popup header { gap: 8px; margin-bottom: 8px; }
.vz-app .vz-selection-popup header > div { min-width: 0; }
.vz-app .vz-selection-popup h3 { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.vz-app .vz-selection-popup header .vz-btn { flex-shrink: 0; }
.vz-app .vz-selection-popup .vz-selection-label { font-size: 12px; margin-bottom: 6px; }
.vz-app .vz-selection-popup textarea {
  display: block;
  width: 100%;
  height: 80px;
  min-height: 64px;
  max-height: 120px;
  padding: 9px 10px;
  resize: none;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}
.vz-app .vz-selection-popup .vz-reference-heading { flex-wrap: wrap; gap: 6px; }
.vz-app .vz-selection-references { flex-wrap: wrap; }
.vz-app .vz-selection-references > small { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.vz-app .vz-selection-popup .vz-mask-advanced { margin-top: 10px; }
.vz-app .vz-selection-popup .vz-mask-advanced[open] { max-height: 138px; overflow: auto; }
.vz-app .vz-selection-popup .vz-edit-options { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
.vz-app .vz-selection-popup .vz-edit-options select { width: 100%; max-width: 100%; box-sizing: border-box; }
.vz-app .vz-selection-popup footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.vz-app .vz-selection-popup footer > .vz-btn {
  min-width: 0;
  flex: 1 1 120px;
  white-space: normal;
  justify-content: center;
  min-height: 36px;
  font-size: 11px;
  line-height: 1.35;
}
.vz-app .vz-edit-variant-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; }
.vz-app .vz-edit-variant-picker > span { margin-right: auto; }
.vz-app .vz-edit-variant-picker button { min-width: 34px; min-height: 32px; justify-content: center; }
.vz-app .vz-edit-variant-picker [aria-pressed=true] { color: var(--vz-blue); background: var(--vz-soft); border-color: var(--vz-blue); }
.vz-app .vz-selection-error { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

/* Photoshop export is an editor action; the task launcher stays above it. */
.vz-app .vz-editor-export-dock {
  position: fixed;
  z-index: 180;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 177px;
  max-width: calc(100vw - 32px);
}
.vz-app .vz-editor-export-dock > .vz-btn {
  width: 100%;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 11px;
  box-shadow: 0 5px 22px #1827441c;
  background: var(--vz-paper);
  color: var(--vz-text);
}
body:has(.vz-editor-export-dock) .vz-task-tracker { bottom: max(66px, calc(env(safe-area-inset-bottom) + 48px)); }
body:has(.vz-editor-export-dock) .vz-task-panel { max-height: calc(100dvh - 166px); }
.vz-app .vz-layers-panel:has(~ .vz-editor-export-dock),
.vz-app .vz-edit-layout:has(.vz-editor-export-dock) .vz-layers-panel { padding-bottom: 128px; }

@media (max-width: 1100px) {
  .vz-app .home-workspace { padding-inline: 24px; }
  .vz-app .vz-tool-dock { gap: 1px; padding-inline: 5px; }
  .vz-app .vz-tool-dock button { font-size: 10px; }
  .vz-app .iw-generate .iw-main-header { gap: 8px; }
}
@media (max-width: 760px) {
  .vz-app .home-workspace { padding-inline: 16px; }
  .vz-app .home-tools { gap: 12px; }
  .vz-app .home-tool-copy { padding: 10px; }
  .vz-app .home-tool-copy strong { font-size: 14px; }
  .vz-app .vz-selection-popup { width: 330px; }
  .vz-app .vz-tool-dock { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(400px, calc(100% - 24px)); bottom: 48px; }
  .vz-app .vz-tool-dock button { min-height: 49px; }
  .vz-app .vz-edit-hotkeys { display: none; }
  .vz-app .vz-selection-popup { max-height: calc(100% - 178px); }
}
@media (max-width: 600px) {
  .vz-app .iw-generate .iw-main-header h1 { font-size: 20px; }
  .vz-app .vz-editor-export-dock { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 156px; }
  body:has(.vz-editor-export-dock) .vz-task-tracker { bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px)); }
}
@media (prefers-reduced-motion: reduce) {
  .vz-content:has(.home-workspace, .iw-upload, .vl-library)::before { animation: none; will-change: auto; }
}
[data-vz-motion=reduced] .vz-content:has(.home-workspace, .iw-upload, .vl-library)::before { animation: none; will-change: auto; }
/* PSD stays available as an explicit native download after worker encoding. */
.vz-app .vz-editor-export-dock.has-status { width:220px; display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid var(--vz-border); border-radius:12px; background:var(--vz-card); box-shadow:0 8px 28px #152c3b1a; }
.vz-app .vz-editor-export-dock.has-status .vz-btn { width:100%; min-height:34px; font-size:12px; justify-content:center; text-decoration:none; }
.vz-app .vz-editor-export-dock.has-status small { text-align:center; color:var(--vz-muted); font-size:11px; }
.vz-app .vz-editor-export-dock.has-status p { margin:0; max-height:55px; overflow-y:auto; overflow-wrap:anywhere; font-size:11px; line-height:1.4; color:var(--vz-danger,#c44958); }
.vz-app .vz-editor-export-dock progress { width:100%; height:5px; accent-color:var(--vz-blue,#21a98b); }
body:has(.vz-editor-export-dock.has-status) .vz-task-tracker { bottom:max(190px,calc(env(safe-area-inset-bottom) + 178px)); }
body:has(.vz-editor-export-dock.has-status) .vz-task-panel { max-height:calc(100dvh - 290px); }

/* R15: visible movement, native image details and a clear PSD action. */
.vz-content:has(.home-workspace,.iw-upload,.vl-library) { position:relative; isolation:isolate; }
.vz-content:has(.home-workspace,.iw-upload,.vl-library)::before {
  content:""; display:block; position:absolute; pointer-events:none; inset:-22%; z-index:0;
  background:radial-gradient(ellipse at 18% 24%,#16b89942,transparent 52%),radial-gradient(ellipse at 78% 64%,#9170d940,transparent 56%);
  animation:vz-r15-gradient 10s ease-in-out infinite alternate;
}
@keyframes vz-r15-gradient { from {transform:translate3d(-5%,-4%,0) scale(1)} to {transform:translate3d(6%,5%,0) scale(1.1)} }
.vz-app .vz-editor-export-dock { width:260px; }
.vz-app .vz-editor-export-dock > .vz-btn,
.vz-app .vz-editor-export-dock.has-status > .vz-btn {
  min-height:50px; border:1px solid #078461; background:#098562; color:#fff;
  font-size:14px; font-weight:650; box-shadow:0 6px 22px #07846135;
}
.vz-app .vz-editor-export-dock > .vz-btn:hover { background:#087455; }
.vz-app .vz-editor-export-dock.has-status {width:260px;}
body:has(.vz-editor-export-dock) .vz-task-tracker {bottom:max(84px,calc(env(safe-area-inset-bottom) + 68px));}
body:has(.vz-editor-export-dock.has-status) .vz-task-tracker {bottom:max(238px,calc(env(safe-area-inset-bottom) + 220px));}
.vz-object-ids {border:1px solid var(--vz-line);border-radius:10px;padding:10px;margin:0 0 12px;}
.vz-object-ids summary {cursor:pointer;font-size:12px;font-weight:650;}
.vz-object-ids p,.vz-object-ids small,.vz-mask-help {font-size:11px;line-height:1.5;color:var(--vz-muted);}
.vz-object-ids small {display:block;overflow-wrap:anywhere;margin:7px 0;}
.vz-id-background {display:flex;align-items:center;gap:6px;font-size:11px;margin:8px 0;}
.vz-id-colors {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-height:178px;overflow:auto;}
.vz-id-colors button {display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 2px;color:var(--vz-text);background:var(--vz-paper);border:1px solid var(--vz-line);border-radius:7px;font-size:9px;cursor:pointer;}
.vz-id-colors button[aria-pressed=true] {outline:2px solid var(--vz-blue);outline-offset:-2px;}
.vz-id-colors i {width:22px;height:22px;border-radius:5px;border:1px solid #8886;}
.vz-edit-resolution {display:grid;grid-template-columns:1fr 100px;gap:5px;align-items:center;font-size:12px;margin-top:12px;}
.vz-edit-resolution small {grid-column:1/-1;color:var(--vz-muted);font-size:11px;}
.vz-app .vz-edit-options {min-height:65px;}
.vz-app .vz-native-badge {font-variant-numeric:tabular-nums;}
@media(max-width:600px){.vz-app .vz-editor-export-dock,.vz-app .vz-editor-export-dock.has-status{width:200px;}}
@media(prefers-reduced-motion:reduce){.vz-content:has(.home-workspace,.iw-upload,.vl-library)::before{animation:none;}}
[data-vz-motion=reduced] .vz-content:has(.home-workspace,.iw-upload,.vl-library)::before{animation:none;}