/* AutoTube FACTORY — PRIVATE USER1 VIDEO DESIGN V4.6
   Visual only. Native video generator, style picker, checkbox state and events untouched.
   Target: user's second reference (stacked video settings cards). */
@media (min-width: 901px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .visual-frame-grid {
    align-items: stretch !important;
    min-height: 0 !important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-control-column {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(9px, 1.25vh, 14px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(12px, 1.45vh, 18px) !important;
    background: #fff !important;
    border: 1px solid #e0e2e5 !important;
    border-radius: 19px !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.018) !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }
}

/* Header: kicker and large page title on their OWN lines. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane .visual-control-heading {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:3px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0 3px!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .visual-control-heading .card-kicker {
  margin:0!important;
  color:#ef001b!important;
  font-family:Inter,Arial,sans-serif!important;
  font-weight:900!important;
  font-size:clamp(12px,1vw,16px)!important;
  line-height:1.25!important;
  letter-spacing:.045em!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .visual-control-heading h2 {
  margin:0!important;
  color:#0c0c0d!important;
  font-family:Inter,Arial,sans-serif!important;
  font-weight:900!important;
  font-size:clamp(26px,2.45vw,37px)!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  text-align:left!important;
}

/* Style chooser becomes the first proper content card. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  flex:0 0 auto!important;
  gap:clamp(7px,.95vh,12px)!important;
  margin:0!important;
  padding:clamp(12px,1.35vh,17px)!important;
  border:1px solid #dfe1e5!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  min-width:0!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard > label[for="videoStyle"] {
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(17px,1.48vw,22px)!important;
  line-height:1.19!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  color:#111!important;
  margin:0!important;
}
/* Video style selector (custom thumbnail picker is controlled by existing native JS). */
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard > .local-style-picker-trigger,
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard .local-style-picker-trigger {
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  min-height:clamp(65px,8vh,91px)!important;
  width:100%!important;
  gap:clamp(10px,1.4vw,18px)!important;
  padding:8px 12px!important;
  border-radius:15px!important;
  border:1px solid #dadde2!important;
  background:#fff!important;
  box-shadow:none!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .local-style-picker-thumb {
  width:clamp(95px,11vw,138px)!important;
  height:clamp(53px,6.45vw,78px)!important;
  aspect-ratio:16/9!important;
  border-radius:12px!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .local-style-picker-current {
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(15px,1.33vw,19px)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#0e0e0e!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .local-style-picker-chevron {
  width:26px!important;
  color:#25262b!important;
  font-size:28px!important;
}
/* Native style selector fallback if thumbnail trigger isn't mounted. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard > #videoStyle:not(.local-style-native-select-hidden) {
  min-height:63px!important;
  border:1px solid #dadddf!important;
  border-radius:14px!important;
  background-color:#fff!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .at44-style-explanation {
  display:block!important;
  color:#787f8c!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(12px,.96vw,14px)!important;
  line-height:1.4!important;
  font-weight:500!important;
  margin:0!important;
  letter-spacing:normal!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoConfigStatus[data-at44-connected="true"] {
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  padding:10px 12px!important;
  gap:10px!important;
  margin:2px 0 0!important;
  border:none!important;
  border-radius:12px!important;
  background:#f5f5f6!important;
  text-align:left!important;
  color:#111!important;
  box-shadow:none!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoConfigStatus[data-at44-connected="true"]::before {
  content:""!important;
  flex:0 0 11px!important;
  width:11px!important;
  height:11px!important;
  border-radius:50%!important;
  background:#16bc63!important;
  box-shadow:0 0 0 2px rgba(22,188,99,.07)!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoConfigStatus[data-at44-connected="true"]::after {
  content:"Veo 3.1 Lite підключено · до 5 одночасних генерацій"!important;
  font-family:Inter,Arial,sans-serif!important;
  color:#151518!important;
  font-size:clamp(11px,1vw,14px)!important;
  line-height:1.3!important;
  font-weight:700!important;
}

/* Settings card: separate large settings panel. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-parameter-block {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  gap:clamp(8px,1vh,13px)!important;
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(12px,1.35vh,17px)!important;
  background:#fff!important;
  border:1px solid #e0e2e5!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-parameter-title {
  margin:0!important;
  color:#101011!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(18px,1.55vw,24px)!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:-.03em!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters > span {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:clamp(46px,5.5vh,57px)!important;
  gap:12px!important;
  margin:0!important;
  padding:7px 12px!important;
  background:#fff!important;
  border:1px solid #dce0e4!important;
  border-radius:13px!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(14px,1.15vw,18px)!important;
  font-weight:700!important;
  line-height:1.1!important;
  color:#121315!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters > span::before {
  content:"";
  display:block;
  width:24px;
  height:22px;
  flex:0 0 24px;
  background:#131416;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters > span:first-child::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='3' stroke='black' stroke-width='2' fill='none'/%3E%3Ccircle cx='5' cy='7' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='17' r='1.2' fill='black'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='3' stroke='black' stroke-width='2' fill='none'/%3E%3Ccircle cx='5' cy='7' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='17' r='1.2' fill='black'/%3E%3C/svg%3E");
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters > span:nth-child(2)::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='20' height='18' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='10' font-family='Arial' font-weight='bold' fill='black'%3EHD%3C/text%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='20' height='18' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='10' font-family='Arial' font-weight='bold' fill='black'%3EHD%3C/text%3E%3C/svg%3E");
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-toggle-stack {
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin:0!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle {
  position:relative!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:clamp(8px,1vh,13px) 62px clamp(8px,1vh,13px) 12px!important;
  min-height:clamp(64px,7.5vh,80px)!important;
  border:1px solid #e2d9cf!important;
  border-radius:13px!important;
  background:#fff!important;
  cursor:pointer!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle::before {
  content:"";
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:11px;
  background-color:#f7f7f7;
  background-repeat:no-repeat;
  background-position:center;
  background-size:25px;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle:has(#videoUseComponents)::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4.5 22v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3C/svg%3E");
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle:has(#videoResumeLatest)::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.6 2'/%3E%3C/svg%3E");
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > span:last-child {
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-width:0!important;
  align-items:flex-start!important;
  justify-content:center!important;
  font-family:Inter,Arial,sans-serif!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > span:last-child strong {
  color:#101011!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(12px,1vw,15px)!important;
  font-weight:900!important;
  line-height:1.25!important;
  text-align:left!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .at46-toggle-help {
  display:block!important;
  margin:3px 0 0!important;
  color:#878a92!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(10px,.86vw,12px)!important;
  line-height:1.3!important;
  font-weight:500!important;
  letter-spacing:normal!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > input[type="checkbox"] {
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  opacity:0!important;
  width:45px!important;
  height:25px!important;
  z-index:1!important;
  cursor:pointer!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > .toggle-visual {
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:block!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:27px!important;
  margin:0!important;
  border-radius:999px!important;
  background:#cfd0d1!important;
  border:1px solid #cfd0d1!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.10)!important;
  pointer-events:none!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > .toggle-visual::before {
  content:""!important;
  position:absolute!important;
  left:3px!important;
  top:3px!important;
  display:block!important;
  width:19px!important;
  height:19px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.14)!important;
  transition:transform .14s!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > input[type="checkbox"]:checked + .toggle-visual {
  background:#f00016!important;
  border-color:#f00016!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle > input[type="checkbox"]:checked + .toggle-visual::before {
  transform:translateX(19px)!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle:focus-within {
  outline:2px solid rgba(240,0,22,.2)!important;
  outline-offset:2px!important;
}
/* Status is kept before CTA if non-empty; CTA anchors to lower edge. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-generation-status {
  display:grid!important;
  order:5!important;
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  gap:6px!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-generation-status > .inline-message:empty {
  display:none!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-generation-actions {
  display:flex!important;
  order:6!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  padding:0!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-generation-actions > #generateVideosButton {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:clamp(51px,6.5vh,68px)!important;
  padding:11px 18px!important;
  border:0!important;
  border-radius:14px!important;
  background:#f00016!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(240,0,22,.13)!important;
  font-family:Inter,Arial,sans-serif!important;
  font-weight:900!important;
  font-size:clamp(16px,1.4vw,21px)!important;
  letter-spacing:-.025em!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #generateVideosButton::before {
  content:"";
  display:block;
  flex:0 0 25px;
  width:25px;
  height:25px;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1.5 14.1 9.9 22.5 12l-8.4 2.1L12 22.5l-2.1-8.4L1.5 12l8.4-2.1L12 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1.5 14.1 9.9 22.5 12l-8.4 2.1L12 22.5l-2.1-8.4L1.5 12l8.4-2.1L12 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Disabled state remains functionally disabled; design remains recognisably red. */
html:not([data-autotube-theme="dark"]) body #visualVideoPane #generateVideosButton:disabled {
  opacity:1!important;
  cursor:not-allowed!important;
}
html:not([data-autotube-theme="dark"]) body #visualVideoPane #cancelVideosButton:not(.hidden) {
  min-height:48px!important;
}
@media (max-width: 900px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-control-column {
    padding:14px!important;
    gap:12px!important;
    overflow:visible!important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .visual-control-heading h2 {font-size:28px!important;}
  html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard,
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-parameter-block {padding:15px!important;}
}
@media (max-width: 470px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .local-style-picker-thumb {width:78px!important;height:45px!important;}
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-fixed-parameters > span {gap:7px!important;padding:8px!important;}
  html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle {padding-left:8px!important;padding-right:53px!important;gap:7px!important;}
  html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle::before {width:32px;height:32px;flex-basis:32px;}
}
/* AUTOTUBE_USER1_PRIVATE_VIDEO_DESIGN_V46_END */
/* Compact browser heights: keep the entire CTA visible without shifting columns. */
@media (min-width:901px) and (max-height:875px) {
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-control-column {
    gap:9px!important;
    padding:11px!important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane #videoManagedStatusCard,
  html:not([data-autotube-theme="dark"]) body #visualVideoPane .video-parameter-block {
    padding:10px!important;
    gap:7px!important;
  }
  html:not([data-autotube-theme="dark"]) body #visualVideoPane label.video-compact-toggle {
    min-height:58px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
}