/* AUTOTUBE PRIVATE VISUAL V3.3 / COMPACT WORKSPACE */
/* User1 only. Overrides presentation/spacing, not behavior. */

@media (min-width: 1101px) {
  /* Use a tight but breathable rhythm throughout the desktop application. */
  html:not([data-autotube-theme="dark"]) body .app-shell {
    padding-top: 3px !important;
    gap: 6px !important;
  }
  html:not([data-autotube-theme="dark"]) body header.topbar:not(#atv-head-a):not(#atv-head-b) {
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:not([data-autotube-theme="dark"]) body .factory-brand-heading h1 {
    gap: 8px !important;
  }
  html:not([data-autotube-theme="dark"]) body nav.tabs:not(#atv-nav-a):not(#atv-nav-b):not(#atv-nav-c) {
    min-height: 52px !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 17px !important;
  }
  html:not([data-autotube-theme="dark"]) body nav.tabs .tab-button:not(#atv-tab-a):not(#atv-tab-b):not(#atv-tab-c) {
    min-height: 42px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  /* The outer scenario container was unnecessarily roomy. */
  html:not([data-autotube-theme="dark"]) body #rewriteTab.active {
    margin-top: 4px !important;
    padding: 8px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }

  /* Mode switch: proportional to its importance, no oversized tabs. */
  html:not([data-autotube-theme="dark"]) body #rewriteTab > .scenario-mode-tabs.visual-mode-toggle {
    width: max-content !important;
    max-width: 100% !important;
    padding: 3px !important;
    gap: 3px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  html:not([data-autotube-theme="dark"]) body #rewriteTab > .scenario-mode-tabs .scenario-mode-button {
    min-width: 120px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 9px !important;
  }

  /* Two equal working columns; reduce only decorative spacing. */
  html:not([data-autotube-theme="dark"]) body #rewriteTab > #scenarioGeneratePane:not(.hidden),
  html:not([data-autotube-theme="dark"]) body #rewriteTab > #scenarioRewritePane:not(.hidden) {
    gap: 10px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results {
    gap: 9px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generator-panel,
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results > .text-section {
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generator-panel {
    gap: 6px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results > .text-section {
    gap: 6px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generator-panel > .section-heading,
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results .section-heading {
    margin: 0 !important;
    min-height: 0 !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generator-stage,
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results textarea {
    border-radius: 11px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-topic-view {
    padding: 8px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generation-results textarea {
    padding: 10px 12px !important;
  }
  html:not([data-autotube-theme="dark"]) body #scenarioGeneratePane .scenario-generator-controls {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  /* Related workspaces: tidy top-level spacing, preserve their internal layouts. */
  html:not([data-autotube-theme="dark"]) body :is(#voiceTab.active,#photosTab.active,#videoTab.active,#montageTab.active,#packagingTab.active) {
    margin-top: 4px !important;
  }
}

/* Preserve readable controls on mobile/tablet. */
@media (max-width: 1100px) {
  html:not([data-autotube-theme="dark"]) body #rewriteTab > .scenario-mode-tabs.visual-mode-toggle {
    max-width: 100% !important;
  }
}


/* 02 / Old V64 optics blended icon with the black tab. Remove that effect. */
html:not([data-autotube-theme="dark"]) body nav.tabs .tab-button:not(#atv-tab-a):not(#atv-tab-b):not(#atv-tab-c)::before {
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}
html:not([data-autotube-theme="dark"]) body nav.tabs .tab-button.active:not(#atv-tab-a):not(#atv-tab-b):not(#atv-tab-c)::before,
html:not([data-autotube-theme="dark"]) body nav.tabs .tab-button:not(.active):hover:not(#atv-tab-a):not(#atv-tab-b):not(#atv-tab-c)::before {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #FFFFFF !important;
  mix-blend-mode: normal !important;
}

/* 03 / Only when the scenario is genuinely empty, stop forcing huge boxes.
       When topics or text appear, original full-height working layout is restored. */
@media (min-width: 1101px) {
  html:not([data-autotube-theme="dark"]) body #rewriteTab.active:has(#scenarioTopicsList:empty):has(#scenarioGeneratedEnglish:placeholder-shown):has(#scenarioGeneratedLocalized:placeholder-shown) {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  html:not([data-autotube-theme="dark"]) body #rewriteTab.active:has(#scenarioTopicsList:empty):has(#scenarioGeneratedEnglish:placeholder-shown):has(#scenarioGeneratedLocalized:placeholder-shown) > #scenarioGeneratePane:not(.hidden) {
    flex: 0 0 auto !important;
    height: clamp(440px, 61dvh, 520px) !important;
    min-height: 0 !important;
    max-height: 520px !important;
  }
  html:not([data-autotube-theme="dark"]) body #rewriteTab > .scenario-mode-tabs.visual-mode-toggle:not(#atv-mode-a):not(#atv-mode-b) {
    padding: 3px !important;
  }
  html:not([data-autotube-theme="dark"]) body #rewriteTab > .scenario-mode-tabs.visual-mode-toggle .scenario-mode-button.visual-mode-button:not(#atv-mode-a):not(#atv-mode-b) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 12px !important;
  }
}

/* AUTOTUBE_PRIVATE_VISUAL_V3_3_END */