/* AutoTube Factory — User1 video panel balance V4.19.
   Restore comfortable controls while the settings column stays fixed.
   Exactly equal 10px top/bottom CTA spacing at desktop heights.
   Video generation, state handling and mobile remain unchanged. */

@media (min-width: 901px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-control-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .visual-control-heading {
    flex: 0 0 auto !important;
    gap: 3px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .visual-control-heading h2 {
    font-size: clamp(25px, 2.1vw, 31px) !important;
    line-height: 1.07 !important;
  }

  /* These cards absorb the space previously left empty above the button. */
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed #videoManagedStatusCard {
    flex: 2 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    gap: 9px !important;
    justify-content: space-between !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-parameter-block {
    flex: 3 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    gap: 10px !important;
    justify-content: space-between !important;
  }

  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-trigger {
    flex: 0 0 auto !important;
    height: clamp(68px, 7.8vh, 80px) !important;
    min-height: clamp(68px, 7.8vh, 80px) !important;
    padding: 7px 12px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-thumb {
    width: clamp(100px, 8.2vw, 116px) !important;
    height: clamp(56px, 6.25vh, 65px) !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-fixed-parameters > span {
    min-height: clamp(43px, 5vh, 49px) !important;
    padding: 8px 12px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-toggle-stack {
    gap: 9px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed label.video-compact-toggle {
    min-height: clamp(57px, 6.35vh, 64px) !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  /* No auto margin: the same 10px column gap is above the CTA and
     the same 10px column padding is below it. */
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .at48-video-runtime {
    flex: 0 0 48px !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .at48-video-start {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
  /* Error states need their message visible, not clipped. */
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .at48-video-runtime:has(.at48-video-error:not([hidden])) {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 48px !important;
  }
}

/* Reduced viewport height: proportionally trim each control, rather than
   restoring a scrollbar or hiding any settings. */
@media (min-width: 901px) and (max-height: 860px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-control-column {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed #videoManagedStatusCard,
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-parameter-block {
    padding: 9px 10px !important;
    gap: 7px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-trigger {
    min-height: 62px !important;
    height: 62px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-thumb {
    width: 96px !important;
    height: 53px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-fixed-parameters > span {
    min-height: 42px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed label.video-compact-toggle {
    min-height: 55px !important;
    padding: 6px 10px !important;
  }
}
/* More compact only for very short desktop windows. */
@media (min-width: 901px) and (max-height: 740px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-control-column {
    padding: 7px 9px !important;
    gap: 6px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .visual-control-heading h2 {
    font-size: 24px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed #videoManagedStatusCard,
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-parameter-block {
    padding: 7px !important;
    gap: 5px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-trigger {
    min-height: 54px !important;
    height: 54px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .local-style-picker-thumb {
    width: 80px !important;
    height: 44px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .video-fixed-parameters > span {
    min-height: 35px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed label.video-compact-toggle {
    min-height: 46px !important;
    padding: 4px 8px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .at48-video-runtime {
    min-height: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane.at48-installed .at48-video-start {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}