/* Canvas-only layout. The chat interface keeps its shared controls unchanged. */
.demo-main {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px clamp(20px, 5vw, 64px) 28px;
}

.canvas-workspace {
  --start-canvas-height: min(210px, 24dvh);
  --canvas-tools-space: 56px;
  --composer-height: 72px;
  --workspace-gap: 20px;
  block-size: min(100cqh, calc(min(calc(100cqw - var(--canvas-tools-space) - var(--canvas-tools-space)), 1024px) / var(--image-ratio) + var(--composer-height) + var(--workspace-gap)));
  max-inline-size: 1240px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--workspace-gap);
}

.canvas-intro {
  display: none;
  text-align: center;
  padding-inline: 12px;
}

.canvas-intro h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.canvas-intro p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.canvas-column {
  inline-size: 100%;
  padding-inline: var(--canvas-tools-space);
  position: relative;
}

.artboard-shell { --image-ratio: inherit; }
.artboard {
  container-type: inline-size;
  container-name: dropzone;
  border-radius: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.artboard-shell.is-ratio-animating { will-change: inline-size, block-size; }
.artboard-shell.is-ratio-animating .artboard { will-change: block-size; }

.artboard-shell.is-entry-animating { will-change: inline-size, block-size, transform; }
.artboard-shell.is-entry-animating .artboard { will-change: block-size; }
.generation-input-fade { pointer-events: none; }
.generation-intro-fade {
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 4;
}

.demo-shell.is-generating .artboard {
  border-color: rgba(95, 150, 110, .24);
  box-shadow: 0 0 8px rgba(95, 150, 110, .08), 0 0 24px 1px rgba(95, 150, 110, .04);
  animation: canvas-generation-glow 2.8s ease-in-out infinite;
}

.demo-shell.is-generating .artboard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 22px rgba(95, 150, 110, .18);
  pointer-events: none;
  z-index: 8;
  animation: canvas-generation-inset-glow 2.8s ease-in-out infinite;
}

.view-tabs[hidden] { display: none; }
.settings-panel .download-row:empty { display: none; }
.download-controls a[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: none;
}
.background-toggle.is-disabled { opacity: .4; cursor: not-allowed; }
.artboard.is-background-removed:not(.is-input-view) {
  background-image: conic-gradient(
    color-mix(in srgb, var(--ink) 8%, var(--paper)) 25%, var(--paper) 0 50%,
    color-mix(in srgb, var(--ink) 8%, var(--paper)) 0 75%, var(--paper) 0
  );
  background-size: 20px 20px;
}
.artboard.is-background-removed #regionLayer [data-is-background="true"] { display: none; }

/* Only the header status expands once a generation has started. */
.demo-header .progress-card {
  inline-size: auto;
  max-inline-size: min(340px, 42vw);
}

.demo-header .progress-copy {
  align-items: center;
  gap: 0;
  transition: gap 320ms ease;
}

.demo-header #stageDetail {
  display: block;
  max-inline-size: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transform: translateX(10px);
  transition: max-inline-size 360ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), visibility 360ms;
}

.demo-header .progress-track {
  max-block-size: 0;
  margin-block-start: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-block-size 320ms ease, margin-block-start 320ms ease,
    opacity 220ms ease, visibility 320ms;
}

.demo-header .progress-card.has-generation .progress-copy { gap: 14px; }
.demo-header .progress-card.has-generation #stageDetail {
  max-inline-size: 240px;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.demo-header .progress-card.has-generation .progress-track {
  max-block-size: 2px;
  margin-block-start: 7px;
  opacity: 1;
  visibility: visible;
}

.demo-header .progress-card.is-ready #stageLabel::before {
  background: #52d900;
  animation: header-ready-glow 3s ease-in-out infinite;
}

.demo-shell.is-start .canvas-workspace {
  block-size: auto;
  max-inline-size: 860px;
  grid-template-rows: auto auto auto;
  gap: 28px;
  margin-block-end: min(6dvh, 48px);
}

.demo-shell.is-start .canvas-intro {
  display: block;
  animation: canvas-welcome-in 400ms ease both;
}

.demo-shell.is-start .canvas-column {
  container-type: normal;
  block-size: auto;
  padding: 0;
}

.demo-shell.is-start .artboard-shell {
  inline-size: min(300px, calc(var(--start-canvas-height) * var(--image-ratio)), 100%);
  animation: canvas-welcome-in 440ms ease both;
}

.demo-shell.is-start .artboard {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 3%, transparent);
  cursor: pointer;
}

.demo-shell.is-start .artboard:hover {
  border-color: color-mix(in srgb, var(--ink) 36%, transparent);
}

.artboard.is-drop-target,
.artboard.is-drag-over {
  border-color: #52d900;
  box-shadow: 0 0 0 4px color-mix(in srgb, #52ff00 14%, transparent);
}

.upload-loading {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  backdrop-filter: blur(3px);
  cursor: progress;
}

.upload-loading[hidden] { display: none; }
.upload-spinner {
  inline-size: 24px;
  block-size: 24px;
  border: 2px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-block-start-color: #52d900;
  border-radius: 50%;
  animation: upload-spinner-turn 800ms linear infinite;
}

.artboard.is-uploading { cursor: progress; }
.artboard.is-uploading .canvas-reference-remove { visibility: hidden; }
.artboard.is-upload-complete { animation: canvas-upload-pop 430ms cubic-bezier(.22, 1, .36, 1) both; }

.empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  max-inline-size: 100%;
  padding: 14px;
}

.dropzone-icon {
  inline-size: 30px;
  block-size: 30px;
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 42%, transparent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: 12px;
  line-height: 1.4;
}

.empty-state span {
  max-inline-size: 160px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.composer-region {
  inline-size: min(100%, 780px);
  transition: inline-size 380ms cubic-bezier(.22, 1, .36, 1);
}
.demo-shell.is-start .composer-region { animation: canvas-welcome-in 480ms ease both; }
.prompt-form {
  min-block-size: 72px;
  transition: min-block-size 360ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.prompt-field {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: 40px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms ease, max-inline-size 360ms linear,
    margin-inline 360ms ease, transform 300ms ease;
}
.prompt-form .upload-button:disabled,
.prompt-form .ratio-button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.generate-action-slot {
  display: grid;
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  min-inline-size: 40px;
  position: relative;
}

.generate-action-slot > * { grid-area: 1 / 1; }
.prompt-form.is-busy .generate-action-slot .send-button { display: none; }
.generate-action-slot .engine-status {
  inline-size: 40px;
  block-size: 40px;
  min-inline-size: 40px;
  border-radius: 11px;
}

.canvas-tools {
  inset-inline-start: auto;
  inset-inline-end: -54px;
  border-radius: 12px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 4%, transparent);
}

.comparison-image {
  object-fit: contain;
  image-rendering: auto;
}

.canvas-reference-remove {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #151815;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  z-index: 7;
}

.canvas-reference-remove svg { inline-size: 14px; block-size: 14px; }
.canvas-reference-remove:hover { background: #fff; }
.demo-shell.has-result .artboard:not(.is-input-view) .canvas-reference-remove { visibility: hidden; }

@container dropzone (max-width: 140px) {
  .empty-state span { display: none; }
}

@container dropzone (max-width: 110px) {
  .empty-state p { display: none; }
}

@keyframes canvas-welcome-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes canvas-generation-glow {
  0%, 100% {
    border-color: rgba(95, 150, 110, .24);
    box-shadow: 0 0 8px rgba(95, 150, 110, .08), 0 0 24px 1px rgba(95, 150, 110, .04);
  }
  50% {
    border-color: rgba(95, 150, 110, .48);
    box-shadow: 0 0 18px 3px rgba(95, 150, 110, .32), 0 0 42px 8px rgba(95, 150, 110, .16);
  }
}

@keyframes canvas-generation-inset-glow {
  0%, 100% { opacity: .15; }
  50% { opacity: .65; }
}

@keyframes header-ready-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 217, 0, .04), 0 0 4px rgba(82, 217, 0, .18); }
  50% { box-shadow: 0 0 0 3px rgba(82, 217, 0, .06), 0 0 8px rgba(82, 217, 0, .42); }
}

@keyframes upload-spinner-turn { to { transform: rotate(360deg); } }

@keyframes canvas-upload-pop {
  0% { opacity: .55; transform: scale(.94); }
  64% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .demo-main { padding: 16px 14px 20px; }
  .canvas-workspace {
    --canvas-tools-space: 42px;
    --composer-height: 112px;
    --workspace-gap: 16px;
  }
  .canvas-tools { inset-inline-end: -40px; padding: 3px; }
  .canvas-tools .canvas-icon-button { inline-size: 30px; block-size: 30px; }
  .demo-header .progress-card { max-inline-size: 100%; order: 0; }
  .demo-header .progress-card.has-generation .progress-copy { gap: 12px; }
  .demo-header .progress-card.has-generation .progress-track { margin-block-start: 5px; }
  .demo-shell.is-start .canvas-workspace { gap: 24px; margin-block-end: 24px; }
  .canvas-intro h1 { font-size: clamp(22px, 5.6vw, 28px); }
  .canvas-intro p { margin-block-start: 9px; font-size: 12px; }
  .prompt-form {
    display: grid;
    grid-template-columns: 40px auto minmax(0, 1fr) 40px;
    gap: 7px;
    min-block-size: 112px;
    padding: 10px;
  }
  .prompt-form .prompt-field { grid-column: 1 / -1; grid-row: 2; }
  .prompt-form .generate-action-slot { grid-column: 4; grid-row: 1; }
  .prompt-form #promptInput { font-size: 16px; padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .composer-region, .prompt-form, .prompt-field,
  .demo-header .progress-copy, .demo-header #stageDetail, .demo-header .progress-track {
    transition: none;
  }
  .demo-shell.is-start .canvas-intro,
  .demo-shell.is-start .artboard-shell,
  .demo-shell.is-start .composer-region,
  .demo-header .progress-card.is-ready #stageLabel::before,
  .upload-spinner, .artboard.is-upload-complete { animation: none; }
  .demo-header .progress-card.is-ready #stageLabel::before {
    box-shadow: 0 0 5px rgba(82, 217, 0, .24);
  }
  .demo-shell.is-generating .artboard {
    animation: none;
    border-color: rgba(95, 150, 110, .36);
    box-shadow: 0 0 12px 1px rgba(95, 150, 110, .2), 0 0 30px 4px rgba(95, 150, 110, .1);
  }
  .demo-shell.is-generating .artboard::after { animation: none; opacity: .4; }
}

@media (max-height: 540px) {
  .demo-main { padding-block: 10px 14px; }
  .canvas-workspace {
    --start-canvas-height: min(120px, 26dvh);
    --composer-height: 60px;
    --workspace-gap: 12px;
  }
  .demo-shell.is-start .canvas-workspace { gap: 16px; margin-block-end: 0; }
  .canvas-intro h1 { font-size: 24px; }
  .canvas-intro p { margin-block-start: 6px; font-size: 12px; }
  .prompt-form { min-block-size: 60px; padding: 9px; }
  .empty-state { gap: 6px; padding: 10px; }
  .dropzone-icon { inline-size: 24px; block-size: 24px; }
  .empty-state span { display: none; }
}

.canvas-download { font: 500 11px var(--font-mono, monospace); text-decoration: none; }
.canvas-download[hidden] { display: none; }
.canvas-download[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.background-toggle { position: relative; cursor: pointer; }
.background-toggle:has(input:checked) { background: var(--teal-soft); }
.background-toggle:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.background-toggle .checker-fill { fill: currentColor; stroke: none; opacity: .3; }