/* Desktop stages share the space left by the navbar and video tabs.
   Import keeps its original composition; small/touch screens keep natural flow. */
@media (min-width: 1000px) {
  .main-column:has(#clip-workflow[data-compact="true"]) {
    display: flex;
    flex-direction: column;
    height: max(100dvh, 820px);
    min-height: 0;
  }
  .main-column:has(#clip-workflow[data-compact="true"]) > :is(.workspace-header, .project-bar) { flex: none; }
  #project-workspace:has(#clip-workflow[data-compact="true"]) { display: flex; flex: 1; min-height: 0; }
  #clip-workflow[data-compact="true"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: var(--workspace-workflow-max);
    padding-top: 18px;
    padding-bottom: 10px;
  }
  #clip-workflow[data-compact="true"] > .flow-panel:not([hidden]):not([data-motion-held="true"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  #clip-workflow[data-compact="true"] > .flow-steps {
    top: var(--step-rail-top, var(--workflow-step-space));
    max-height: calc(100% - var(--step-rail-top, var(--workflow-step-space)) - 12px);
  }
  #clip-workflow[data-compact="true"] .step-connector { flex: 0 1 var(--step-rail-segment, 48px); min-height: 8px; }
  #clip-workflow[data-compact="true"] .flow-steps button { flex-shrink: 0; }
  #clip-workflow[data-compact="true"] > #workspace-footer { flex: none; padding: 8px 0 0; line-height: 14px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading.compact { flex: none; margin-bottom: 16px; gap: 16px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading.compact h1 { font-size: clamp(24px, 2vw, 30px); }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading p:last-child { margin-top: 8px; line-height: 1.5; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-actionbar { position: static; flex: none; margin-top: 12px; padding: 10px 16px; min-height: 60px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-actionbar .flow-button { min-height: 38px; padding-block: 8px; }

  /* Twelve moments remain visible in three rows, with pagination below. */
  #clips .source-summary { flex: none; padding: 8px 12px; margin-bottom: 12px; }
  #clips .library-heading { flex: none; margin-bottom: 8px; }
  #clips .library-tools { flex: none; margin-bottom: 10px; }
  #clips .clip-filter { min-height: 32px; padding-block: 6px; }
  #clips .generated-grid { flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(96px, 118px)); align-content: start; gap: 10px; }
  #clips .generated-card { min-height: 0; container-type: size; }
  #clips .generated-card-trigger { height: 100%; min-height: 0; gap: 9px; }
  #clips .generated-poster { flex: none; height: min(100cqh, 104px); width: auto; }
  #clips .generated-copy { gap: 4px; padding: 12px 24px 0 0; }
  #clips .generated-copy strong { font-size: 12px; line-height: 1.35; }
  #clips .library-pagination { flex: none; margin-top: 10px; }
  #clips .library-pagination button { min-height: 30px; min-width: 32px; }
  #clips .library-empty { flex: 1; padding: 32px 20px; }

  /* The player uses the available height, preserving its real 9:16 ratio. */
  #modelos .model-studio { flex: 1; min-height: 0; container-type: size; grid-template-columns: minmax(190px, 28%) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  #modelos .model-preview { min-height: 0; width: 100%; }
  #modelos .studio-preview-heading { width: min(100%, calc((100cqh - 100px) * .5625)); margin: 0 0 8px; }
  #modelos .model-preview .edit-preview { flex: none; height: calc(100cqh - 100px); max-height: calc((100cqw * .28) / .5625); width: auto; max-width: 100%; margin-bottom: 10px; }
  #modelos #studio-add { width: min(100%, calc((100cqh - 100px) * .5625)); min-height: 34px; padding: 7px 10px; }
  #modelos .model-preview .studio-hint { margin-top: 6px; font-size: 10px; }
  #modelos .studio-workbench { height: 100%; min-height: 0; padding: 16px; }
  #modelos .studio-library { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  #modelos .studio-section-heading { flex: none; gap: 4px; margin-bottom: 10px; }
  #modelos .studio-section-heading h2 { font-size: 16px; }
  #modelos .studio-categories { flex: none; margin-bottom: 10px; }
  #modelos .studio-categories button { min-height: 46px; padding: 7px 8px; font-size: 12px; }
  #modelos .studio-category-count { margin-top: 3px; font-size: 10px; }
  #modelos .studio-library-toolbar { flex: none; flex-direction: row; align-items: center; padding-top: 10px; margin-bottom: 8px; gap: 8px; }
  #modelos .studio-library-toolbar .studio-tabs { min-width: 0; }
  #modelos .studio-library-toolbar > span { font-size: 10px; text-align: right; }
  #modelos .studio-tabs button { padding: 6px 4px; white-space: nowrap; }
  /* Keep the seven-row library rhythm when filters show fewer models. */
  #modelos .model-grid { flex: 1; min-height: 0; align-content: start; grid-auto-rows: 52px; gap: 6px 8px; overflow-y: auto; }
  #modelos .model-preview-trigger { min-height: 50px; padding: 6px 2px 6px 10px; gap: 8px; }
  #modelos .model-choice-copy { gap: 3px; }
  #modelos .model-sample { width: 28px; height: 28px; font-size: 18px; }
  #modelos .model-choice .model-toggle { margin-right: 10px; }
  #modelos .studio-customize { height: 100%; overflow-y: auto; scrollbar-width: thin; }
  #modelos .studio-editor-nav { padding-bottom: 10px; margin-bottom: 12px; }
  #modelos .studio-inspector { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  #modelos .studio-inspector .model-description { margin: 6px 0 12px; }
  #modelos .studio-controls { padding-top: 12px; }
  #modelos .studio-check { margin: 10px 0 12px; }
  #modelos .studio-range { margin-top: 12px; gap: 8px; }
  #modelos .studio-image-settings { margin-top: 0; padding-top: 12px; }
  #modelos .studio-save { margin-top: 12px; padding-top: 12px; }
  #modelos .studio-save p { margin-bottom: 8px; }

  /* Group-first review: natural height for a few clips, bounded rows for large batches. */
  #aplicar-modelos .assignment-layout { flex: none; min-height: 0; margin-top: 0; grid-template-columns: clamp(230px, 13vw, 280px) minmax(0, 1fr); grid-template-rows: auto; gap: 20px; align-items: start; }
  #aplicar-modelos .assignment-library { display: flex; flex-direction: column; max-height: clamp(400px, calc(100dvh - 340px), 740px); min-height: 0; padding: 16px; }
  #aplicar-modelos .assignment-library h2 { font-size: 14px; }
  #aplicar-modelos .assignment-library > p { margin: 6px 0 14px; }
  #aplicar-modelos .assignment-models { min-height: 0; gap: 6px; overflow-y: auto; }
  #aplicar-modelos .assignment-model { padding: 8px; }
  #aplicar-modelos .assignment-models.is-dense .assignment-model { min-height: 36px; padding: 6px; }
  #aplicar-modelos .assignment-tip { padding-top: 12px; margin-bottom: 0; }
  #aplicar-modelos .assignment-content { display: flex; flex-direction: column; max-height: none; min-height: 0; }
  #aplicar-modelos .assignment-selection { flex: none; padding: 12px 16px; margin: 0; gap: 8px; }
  #aplicar-modelos .assignment-selection-summary, #aplicar-modelos .assignment-selection-actions { gap: 10px; }
  #aplicar-modelos .assignment-selection-actions select { width: 160px; height: 36px; }
  #aplicar-modelos .assignment-selection-actions .flow-button { min-height: 36px; padding: 6px 14px; }
  #aplicar-modelos .assignment-feedback { flex: none; padding: 8px 16px; margin: 0; font-size: 11px; }
  #aplicar-modelos .model-groups { display: flex; flex: none; min-height: 0; }
  #aplicar-modelos .model-group { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #aplicar-modelos .group-heading { flex: none; padding: 14px 16px; grid-template-columns: minmax(0,1fr) auto; }
  #aplicar-modelos .group-preview { width: 164px; padding: 6px 8px; gap: 8px; }
  #aplicar-modelos .group-preview-poster { width: 27px; }
  #aplicar-modelos .group-preview-play { left: 9px; }
  #aplicar-modelos .group-clips { flex: none; min-height: 0; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(var(--group-rows),minmax(90px,104px)); gap: 8px; padding: 16px; }
  #aplicar-modelos .group-clip { min-height: 0; min-width: 0; padding: 9px; gap: 9px; container-type: size; }
  #aplicar-modelos .group-check img { height: min(100cqh, 78px); width: auto; aspect-ratio: 9 / 16; }
  #aplicar-modelos .group-check input { top: 8px; right: 8px; width: 17px; height: 17px; }
  #aplicar-modelos .group-clip-copy { gap: 5px; }
  #aplicar-modelos .group-clip-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
  #aplicar-modelos .group-assigned-model { padding: 1px 4px; font-size: 10px; }
  #aplicar-modelos .group-pagination { flex: none; padding: 10px 16px; }
  #aplicar-modelos .group-empty { padding: 24px; }

  /* Assignment batches and expanded results use document flow instead of squeezing rows. */
  .main-column:has(#clip-workflow[data-compact="true"] > :is(#downloads, #aplicar-modelos):not([hidden]):not([data-motion-held="true"])) {
    height: auto;
    min-height: 100dvh;
  }
  #project-workspace:has(:is(#downloads, #aplicar-modelos):not([hidden]):not([data-motion-held="true"])) { display: block; flex: none; }
  #clip-workflow[data-compact="true"]:has(> :is(#downloads, #aplicar-modelos):not([hidden]):not([data-motion-held="true"])) {
    min-height: calc(var(--step-rail-top, var(--workflow-step-space)) + var(--step-rail-height, 420px) + 32px);
  }
  #clip-workflow[data-compact="true"] > :is(#downloads, #aplicar-modelos):not([hidden]):not([data-motion-held="true"]) { flex: none; }
  #downloads .results-toolbar { flex: none; margin-bottom: 12px; }
  #downloads .result-grid { flex: none; overflow: visible; }
  #downloads .result-grid { gap: 6px; }
  #downloads .result-row { padding-block: 6px; }
  #downloads .result-thumb { height: 36px; width: 21px; }
  #downloads .result-detail { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); }
  #downloads .library-pagination { flex: none; margin-top: 10px; }
  #downloads .library-pagination button { min-height: 30px; padding-inline: 10px; }
}

@media (min-width: 1000px) and (max-height: 820px) {
  #downloads .result-row { padding-block: 4px; }
  #downloads .result-thumb { height: 32px; width: 18px; }
  #downloads .result-row > .flow-button { min-height: 32px; padding-block: 5px; }
  #clip-workflow[data-compact="true"] { padding-top: 14px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading.compact { margin-bottom: 12px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading.compact h1 { font-size: 26px; }
  :is(#clip-workflow[data-compact="true"], .flow-panel[data-motion-held="true"]:not(.import-panel)) .flow-heading p:last-child { font-size: 12px; }
  #modelos .studio-workbench { padding: 12px; }
  #modelos .studio-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  #modelos .studio-section-heading > span { font-size: 10px; }
  #modelos .studio-categories { margin-bottom: 6px; }
  #modelos .studio-categories button { min-height: 38px; padding: 5px 8px; }
  #modelos .studio-category-count { margin-top: 2px; }
  #modelos .studio-library-toolbar { padding-top: 6px; margin-bottom: 6px; }
  #modelos .studio-tabs { padding: 3px; }
  #modelos .studio-tabs button { padding: 4px; }
  #modelos .model-grid { grid-auto-rows: 52px; gap: 6px 8px; }
  #modelos .model-preview-trigger { min-height: 50px; padding-block: 6px; }
  #modelos .model-choice-copy { gap: 2px; }
  #modelos .model-choice-copy strong { font-size: 11px; }
  #modelos .model-suggestion { font-size: 9px; }
  #aplicar-modelos .assignment-layout { grid-template-columns: 230px minmax(0,1fr); gap: 16px; }
  #aplicar-modelos .assignment-library { padding: 12px; }
  #aplicar-modelos .assignment-library > p { margin-bottom: 10px; font-size: 10px; }
  #aplicar-modelos .assignment-models.is-dense { gap: 4px; }
  #aplicar-modelos .assignment-models.is-dense .assignment-model { min-height: 26px; padding: 2px 5px; }
  #aplicar-modelos .assignment-models.is-dense .assignment-model strong { font-size: 10px; }
  #aplicar-modelos .group-clips { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(var(--group-rows),minmax(90px,104px)); padding: 10px; gap: 6px; }
  #aplicar-modelos .group-heading { padding: 10px 14px; }
  #aplicar-modelos .group-preview-poster { width: 22px; }
  #aplicar-modelos .group-check img { max-width: 30px; }
  #aplicar-modelos .group-clip { padding: 6px; gap: 6px; }
  #aplicar-modelos .group-check input { top: 5px; right: 5px; width: 16px; height: 16px; }
  #aplicar-modelos .group-clip-copy { gap: 3px; }
  #aplicar-modelos .group-clip-copy strong { font-size: 12px; line-height: 1.35; }
  #aplicar-modelos .group-clip-copy small { font-size: 8px; line-height: 1.2; }
  #aplicar-modelos .group-assigned-model { font-size: 9px; line-height: 1.2; }
  #aplicar-modelos .assignment-selection { padding: 8px 12px; }
  #aplicar-modelos .assignment-feedback { font-size: 10px; padding-block: 5px; }
}

/* Fluid desktop canvas. Keep readable controls at short laptop heights;
   the document scrolls instead of compressing cards or clipping their text. */
@media (min-width: 1000px) {
  :root {
    --workspace-shell-max: clamp(1440px, 75vw, 1920px);
    --workspace-workflow-max: clamp(1280px, 77.1vw, 1960px);
    --workspace-content-max: clamp(1184px, 61.7vw, 1600px);
  }
  .workspace-navbar, .project-bar-inner { width: min(100%, var(--workspace-shell-max)); }
  #clip-workflow:not([data-compact="true"]) { width: min(100%, var(--workspace-workflow-max)); }
  #clip-workflow:not([data-compact="true"]) > .flow-steps { width: min(100%, clamp(860px, 50vw, 1200px)); }
  .import-panel { width: clamp(560px, 35.5vw, 960px); max-width: 100%; }
  .import-panel .flow-heading h1 { font-size: clamp(30px, 1.77vw, 44px); }
  #clip-workflow[data-compact="true"] { --desktop-rail-width: clamp(180px, 12.5vw, 240px); width: min(100%, var(--workspace-workflow-max)); padding-left: var(--desktop-rail-width); }
  #clip-workflow[data-compact="true"] > .flow-steps { left: calc(var(--desktop-rail-width) / 2 - clamp(0px, (100vw - 1480px) / 4, 110px)); }
  #aplicar-modelos .group-clip-copy { min-width: 0; padding-right: 20px; }
  #aplicar-modelos .group-heading > div { min-width: 0; }
  #aplicar-modelos .assignment-selection { flex-wrap: wrap; }
  #aplicar-modelos .assignment-selection-actions { margin-left: auto; }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  #clip-workflow[data-compact="true"] { --desktop-rail-width: 72px; }
  #clip-workflow[data-compact="true"] > .flow-steps { left: 36px; }
  #modelos .model-studio { grid-template-columns: minmax(190px, 25%) minmax(0, 1fr); gap: 20px; }
}