/* =========================================================
   HF28.81 - MAGIC STUDIO MEDIA VIEWER V2
   One CSS owner for image/video preview, inline media actions,
   history video placeholders, and image-edit accordion.
   ========================================================= */

:root{
  --msv2-orange:#ff861f;
  --msv2-orange-2:#ff9d43;
  --msv2-line:rgba(255,255,255,.09);
  --msv2-bg:rgba(10,12,16,.96);
  --msv2-panel:rgba(17,19,24,.96);
  --msv2-text:#f5f7fb;
  --msv2-muted:#9aa3b4;
}
html[data-theme="light"]{
  --msv2-line:rgba(31,42,58,.10);
  --msv2-bg:rgba(247,249,252,.985);
  --msv2-panel:#fff;
  --msv2-text:#1c2533;
  --msv2-muted:#7c8797;
}

/* ---------- Main generated-image preview ---------- */
.studio-image-output{
  width:fit-content!important;
  max-width:100%!important;
  min-height:0!important;
  margin-inline:auto!important;
  background:transparent!important;
}
.studio-output-preview-v2872{
  position:relative!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:transparent!important;
  cursor:zoom-in!important;
  box-shadow:0 16px 44px rgba(0,0,0,.14)!important;
}
.studio-output-preview-v2872:focus-visible{
  outline:3px solid rgba(255,134,31,.30)!important;
  outline-offset:3px!important;
}
.studio-output-preview-v2872 #outputImage,
.studio-image-output #outputImage{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:760px!important;
  object-fit:contain!important;
  margin:0!important;
  background:transparent!important;
}
.studio-output-preview-overlay-v2872{
  position:absolute!important;
  inset:auto 12px 12px auto!important;
  z-index:3!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:7px 11px!important;
  border-radius:13px!important;
  color:#fff!important;
  background:rgba(6,8,12,.54)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  opacity:.94!important;
  pointer-events:none!important;
}
.studio-output-preview-overlay-v2872 i{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.10)!important;
}
.studio-output-preview-overlay-v2872 span{
  font-size:11.5px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
@media(hover:hover) and (pointer:fine){
  .studio-output-preview-v2872 .studio-output-preview-overlay-v2872{
    transform:translateY(4px)!important;
    opacity:0!important;
    transition:opacity .18s ease,transform .18s ease!important;
  }
  .studio-output-preview-v2872:hover .studio-output-preview-overlay-v2872{
    opacity:1!important;
    transform:none!important;
  }
}

/* ---------- Viewer overlay ---------- */
body.magic-viewer-v2-open{
  overflow:hidden!important;
}
#studioLightbox.studio-output-lightbox-v2872{
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;
  display:grid!important;
  place-items:center!important;
  padding:16px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#studioLightbox.studio-output-lightbox-v2872[hidden]{
  display:none!important;
}
#studioLightbox .studio-output-lightbox-backdrop-v2872{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:rgba(4,6,10,.72)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-backdrop-v2872{
  background:rgba(32,38,48,.26)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#studioLightbox .studio-output-lightbox-card-v2872{
  position:relative!important;
  z-index:1!important;
  inset:auto!important;
  transform:none!important;

  width:var(--msv2-card-w,720px)!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,auto)!important;
  align-content:start!important;
  gap:0!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;

  border:1px solid rgba(255,137,35,.26)!important;
  border-radius:24px!important;
  background:var(--msv2-panel)!important;
  color:var(--msv2-text)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.42)!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-card-v2872{
  box-shadow:0 30px 90px rgba(60,67,78,.20)!important;
}
#studioLightbox .studio-output-lightbox-toolbar-v2872{
  order:1!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;

  width:100%!important;
  min-width:0!important;
  height:66px!important;
  min-height:66px!important;
  max-height:66px!important;
  flex:none!important;

  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;

  direction:rtl!important;
  text-align:right!important;
  padding:9px 12px!important;
  margin:0!important;
  box-sizing:border-box!important;
  border-bottom:1px solid var(--msv2-line)!important;
  background:rgba(13,15,19,.93)!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-toolbar-v2872{
  background:rgba(255,255,255,.96)!important;
}
#studioLightbox .studio-output-lightbox-title-v2872{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  direction:rtl!important;
  text-align:right!important;
  overflow:hidden!important;
}
#studioLightbox .studio-output-lightbox-title-v2872>span{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex:0 0 34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:11px!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--msv2-orange-2),var(--msv2-orange))!important;
  box-shadow:0 8px 24px rgba(255,134,31,.22)!important;
}
#studioLightbox .studio-output-lightbox-title-v2872>div{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#studioLightbox .studio-output-lightbox-title-v2872 small{
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  color:var(--msv2-orange-2)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#studioLightbox .studio-output-lightbox-title-v2872 b{
  display:block!important;
  max-width:100%!important;
  margin:3px 0 0!important;
  color:var(--msv2-text)!important;
  font-size:13px!important;
  font-weight:950!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#studioLightbox .studio-output-lightbox-actions-v2872{
  flex:0 0 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  direction:rtl!important;
}
#studioLightbox .studio-output-lightbox-actions-v2872>a{
  min-height:40px!important;
  height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 11px!important;
  margin:0!important;
  border-radius:12px!important;
  border:1px solid rgba(255,145,44,.28)!important;
  background:rgba(255,134,31,.08)!important;
  color:var(--msv2-orange-2)!important;
  font-size:11px!important;
  font-weight:900!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-actions-v2872>a{
  color:#a95408!important;
  background:#fff6ed!important;
}
#studioLightbox .studio-output-lightbox-close-v2872{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  flex:0 0 40px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  border:1px solid var(--msv2-line)!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--msv2-text)!important;
  font-size:20px!important;
  cursor:pointer!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-close-v2872{
  background:#f7f9fc!important;
}

/* ---------- Context action bar inside viewer ---------- */
#studioLightbox .magic-viewer-actions-v2{
  order:2!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 8px!important;
  margin:0!important;
  box-sizing:border-box!important;
  border-bottom:1px solid var(--msv2-line)!important;
  background:rgba(12,14,18,.90)!important;
}
html[data-theme="light"] #studioLightbox .magic-viewer-actions-v2{
  background:#fffaf6!important;
}
#studioLightbox .magic-viewer-actions-v2[hidden]{
  display:none!important;
}
#studioLightbox .magic-viewer-actions-v2 button{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0 9px!important;
  border-radius:11px!important;
  border:1px solid rgba(255,145,44,.24)!important;
  background:rgba(255,134,31,.07)!important;
  color:var(--msv2-orange-2)!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  cursor:pointer!important;
}
#studioLightbox .magic-viewer-actions-v2 button.primary{
  color:#fff!important;
  background:linear-gradient(135deg,#ff9b38,#ff741a)!important;
  border-color:rgba(255,166,77,.48)!important;
  box-shadow:0 8px 24px rgba(255,116,26,.16)!important;
}
html[data-theme="light"] #studioLightbox .magic-viewer-actions-v2 button:not(.primary){
  color:#a95408!important;
  background:#fff4e8!important;
}

/* ---------- Media stage ---------- */
#studioLightbox .studio-output-lightbox-stage-v2872{
  order:3!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;

  width:100%!important;
  min-width:0!important;
  height:var(--msv2-stage-h,560px)!important;
  min-height:0!important;
  max-height:calc(100dvh - 90px)!important;
  flex:none!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  margin:0!important;
  padding:8px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#06080b!important;
}
html[data-theme="light"] #studioLightbox .studio-output-lightbox-stage-v2872{
  background:#f0f3f7!important;
}
#studioLightbox .studio-output-lightbox-stage-v2872 #studioLightboxImage,
#studioLightbox .studio-output-lightbox-stage-v2872 #studioLightboxVideo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  border-radius:14px!important;
  background:#05070a!important;
}
#studioLightbox[data-media-type="image"] #studioLightboxVideo,
#studioLightbox[data-media-type="video"] #studioLightboxImage,
#studioLightbox #studioLightboxImage[hidden],
#studioLightbox #studioLightboxVideo[hidden]{
  display:none!important;
}

/* ---------- Inline output actions ---------- */
.magic-inline-image-actions-v2,
.magic-inline-video-actions-v2,
.magic-inline-video-retry-v2{
  width:min(100%,var(--magic-inline-media-w,100%));
  margin-inline:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  direction:rtl!important;
}
.magic-inline-image-actions-v2[hidden],
.magic-inline-video-actions-v2[hidden],
.magic-inline-video-retry-v2[hidden]{
  display:none!important;
}
.magic-inline-image-actions-v2{
  margin-top:10px!important;
}
.magic-inline-video-actions-v2{
  margin-top:10px!important;
  margin-bottom:10px!important;
  justify-content:flex-end!important;
}
.magic-inline-video-retry-v2{
  margin-top:10px!important;
  justify-content:flex-end!important;
}
.magic-inline-image-actions-v2 button,
.magic-inline-video-actions-v2 button,
.magic-inline-video-actions-v2 a,
.magic-inline-video-retry-v2 button{
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 13px!important;
  margin:0!important;
  border-radius:12px!important;
  border:1px solid rgba(255,145,44,.24)!important;
  background:rgba(255,134,31,.07)!important;
  color:var(--msv2-orange-2)!important;
  font:inherit!important;
  font-size:11.5px!important;
  font-weight:900!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.magic-inline-image-actions-v2 .primary,
.magic-inline-video-actions-v2 .primary{
  color:#fff!important;
  background:linear-gradient(135deg,#ff9b38,#ff741a)!important;
  border-color:rgba(255,166,77,.48)!important;
}
html[data-theme="light"] .magic-inline-image-actions-v2 button:not(.primary),
html[data-theme="light"] .magic-inline-video-actions-v2 button:not(.primary),
html[data-theme="light"] .magic-inline-video-actions-v2 a,
html[data-theme="light"] .magic-inline-video-retry-v2 button{
  color:#a95408!important;
  background:#fff6ee!important;
}

/* The original inline video header download is replaced by the V2 action row. */
#studioVideoDownload{
  display:none!important;
}

/* ---------- Video history placeholder = same footprint as image thumbnail ---------- */
.studio-history-row.is-video{
  grid-template-columns:70px minmax(0,1fr) auto!important;
}
.studio-history-video-lazy-v2874{
  width:70px!important;
  min-width:70px!important;
  height:70px!important;
  min-height:70px!important;
  align-self:center!important;
  display:block!important;
}
.studio-history-video-preview-v2874{
  position:relative!important;
  width:70px!important;
  min-width:70px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  border:1px solid rgba(255,145,44,.20)!important;
  background:
    radial-gradient(circle at 76% 18%,rgba(255,148,43,.24),transparent 30%),
    radial-gradient(circle at 18% 82%,rgba(93,75,242,.15),transparent 36%),
    linear-gradient(145deg,#171a20,#090c11 68%)!important;
  cursor:pointer!important;
}
.studio-history-video-preview-copy-v2874{
  display:none!important;
}
.studio-history-video-preview-icon-v2874{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  padding:7px!important;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(5,7,10,.58)!important;
  color:#fff!important;
  box-sizing:border-box!important;
}
.studio-history-video-preview-icon-v2874 svg{
  width:100%!important;
  height:100%!important;
  stroke:currentColor!important;
  fill:none!important;
}

/* Absolutely no hidden video thumbnail extraction. */
.studio-video-thumb-v2876,
#studioVideoThumbGeneratorV2876{
  display:none!important;
}

/* ---------- Image edit accordion ---------- */
.studio-image-edit-v2 .studio-image-edit-section{
  border:1px solid var(--msv2-line)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  margin-top:8px!important;
  background:rgba(255,255,255,.025)!important;
}
html[data-theme="light"] .studio-image-edit-v2 .studio-image-edit-section{
  background:rgba(30,40,55,.025)!important;
}
.studio-image-edit-v2 .studio-image-edit-section-title{
  min-height:48px!important;
  margin:0!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  cursor:pointer!important;
  user-select:none!important;
  box-sizing:border-box!important;
}
.studio-image-edit-v2 .studio-image-edit-section-title::after{
  content:"⌄";
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 28px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,145,44,.22)!important;
  color:var(--msv2-orange-2)!important;
  font-size:17px!important;
  transition:transform .18s ease!important;
}
.studio-image-edit-v2 .studio-image-edit-section:not(.is-collapsed-v2) .studio-image-edit-section-title::after{
  transform:rotate(180deg)!important;
}
.studio-image-edit-v2 .studio-image-edit-section.is-collapsed-v2 .studio-image-edit-choice-grid{
  display:none!important;
}
.studio-image-edit-v2 .studio-image-edit-section:not(.is-collapsed-v2) .studio-image-edit-choice-grid{
  display:grid!important;
  margin:0!important;
  padding:8px!important;
}
.studio-image-edit-v2 #studioImageEditSubmit{
  position:sticky!important;
  bottom:8px!important;
  z-index:8!important;
  margin-top:10px!important;
  box-shadow:0 12px 34px rgba(255,116,26,.20)!important;
}
.magic-image-edit-status-v2{
  margin-top:8px!important;
  padding:9px 11px!important;
  border-radius:11px!important;
  font-size:11.5px!important;
  font-weight:850!important;
  line-height:1.8!important;
}
.magic-image-edit-status-v2[data-type="error"]{
  color:#ffaaa5!important;
  border:1px solid rgba(255,84,84,.24)!important;
  background:rgba(255,84,84,.07)!important;
}
.magic-image-edit-status-v2[data-type="success"]{
  color:#72e4ad!important;
  border:1px solid rgba(61,213,144,.22)!important;
  background:rgba(61,213,144,.07)!important;
}

/* ---------- Toast ---------- */
.magic-viewer-toast-v2{
  position:fixed!important;
  z-index:12500!important;
  left:50%!important;
  bottom:max(22px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%) translateY(10px)!important;
  max-width:min(92vw,480px)!important;
  padding:10px 14px!important;
  border-radius:13px!important;
  background:rgba(10,12,17,.90)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  font-size:12px!important;
  font-weight:800!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
.magic-viewer-toast-v2.show{
  opacity:1!important;
  transform:translateX(-50%) translateY(0)!important;
}

/* ---------- Mobile: module is full-width; media ratio stays inside stage ---------- */
@media(max-width:820px){
  #studioLightbox.studio-output-lightbox-v2872{
    padding:
      max(4px,env(safe-area-inset-top))
      4px
      max(4px,env(safe-area-inset-bottom))
      4px!important;
  }
  #studioLightbox .studio-output-lightbox-card-v2872{
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px)!important;
    border-radius:18px!important;
  }
  #studioLightbox .studio-output-lightbox-toolbar-v2872{
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    padding:7px 8px!important;
    gap:7px!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872{
    gap:6px!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872>span{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex-basis:28px!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872 small{
    font-size:8px!important;
    letter-spacing:.04em!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872 b{
    font-size:12px!important;
    margin-top:2px!important;
  }
  #studioLightbox .studio-output-lightbox-actions-v2872{
    gap:5px!important;
  }
  #studioLightbox .studio-output-lightbox-actions-v2872>a{
    height:38px!important;
    min-height:38px!important;
    padding:0 8px!important;
    font-size:10.5px!important;
  }
  #studioLightbox .studio-output-lightbox-close-v2872{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex-basis:38px!important;
  }
  #studioLightbox .magic-viewer-actions-v2{
    min-height:48px!important;
    gap:6px!important;
    padding:5px 7px!important;
  }
  #studioLightbox .magic-viewer-actions-v2 button{
    height:38px!important;
    min-height:38px!important;
    padding-inline:6px!important;
    font-size:10.5px!important;
  }
  #studioLightbox .studio-output-lightbox-stage-v2872{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:var(--msv2-stage-h,calc(100dvh - 120px))!important;
    max-height:calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    padding:5px!important;
  }
  .magic-inline-image-actions-v2,
  .magic-inline-video-actions-v2,
  .magic-inline-video-retry-v2{
    width:100%!important;
    gap:7px!important;
  }
  .magic-inline-image-actions-v2 button,
  .magic-inline-video-actions-v2 button,
  .magic-inline-video-actions-v2 a,
  .magic-inline-video-retry-v2 button{
    min-height:40px!important;
    flex:1 1 0!important;
    min-width:0!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
  .studio-history-row.is-video{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .studio-history-video-lazy-v2874,
  .studio-history-video-preview-v2874{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
  }
  .studio-history-video-preview-icon-v2874{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    padding:6px!important;
  }
}

@media(max-width:390px){
  #studioLightbox .studio-output-lightbox-title-v2872>span{
    display:none!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872 small{
    font-size:7.5px!important;
  }
  #studioLightbox .studio-output-lightbox-title-v2872 b{
    font-size:11.5px!important;
  }
  #studioLightbox .studio-output-lightbox-actions-v2872>a{
    padding-inline:7px!important;
    font-size:10px!important;
  }
  #studioLightbox .studio-output-lightbox-close-v2872{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex-basis:36px!important;
  }
}

/* =========================================================
   HF28.82 - HISTORY VIDEO ALIGNMENT + ACTIONS
   ========================================================= */

#history .studio-history-row.is-video{
  position:relative!important;
  grid-template-columns:70px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:12px!important;
}
#history .studio-history-row.is-video .studio-history-video-lazy-v2874{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  grid-column:auto!important;
  grid-row:auto!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:70px!important;
  min-width:70px!important;
  height:70px!important;
  min-height:70px!important;
  margin:0!important;
}
#history .studio-history-row.is-video .studio-history-cost{
  position:absolute!important;
  left:12px!important;
  right:auto!important;
  top:10px!important;
  z-index:4!important;
  margin:0!important;
}
#history .studio-history-row.is-video .studio-history-row-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  direction:rtl!important;
  padding-left:42px!important;
}
#history .magic-history-video-regenerate-v2882{
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 11px!important;
  margin:0!important;
  border-radius:10px!important;
  border:1px solid rgba(255,134,31,.28)!important;
  background:rgba(255,134,31,.08)!important;
  color:#ff8b2c!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:900!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
#history .magic-history-video-regenerate-v2882:hover{
  border-color:rgba(255,134,31,.46)!important;
  background:rgba(255,134,31,.13)!important;
}
html[data-theme="light"] #history .magic-history-video-regenerate-v2882{
  color:#a8560b!important;
  background:#fff4e9!important;
  border-color:rgba(214,108,17,.22)!important;
}
#history .studio-history-row-actions button.danger,
#history .studio-history-row-actions [data-history-delete]{
  min-height:36px!important;
  border-color:rgba(232,72,72,.34)!important;
  background:rgba(232,72,72,.08)!important;
  color:#ff6f6f!important;
  font-weight:900!important;
}
#history .studio-history-row-actions button.danger:hover,
#history .studio-history-row-actions [data-history-delete]:hover{
  border-color:rgba(232,72,72,.52)!important;
  background:rgba(232,72,72,.14)!important;
}
html[data-theme="light"] #history .studio-history-row-actions button.danger,
html[data-theme="light"] #history .studio-history-row-actions [data-history-delete]{
  color:#c93d3d!important;
  background:#fff0f0!important;
  border-color:rgba(201,61,61,.24)!important;
}
#history .magic-history-video-regenerate-v2882.is-ready{
  color:#fff!important;
  background:linear-gradient(135deg,#ff9b38,#ff741a)!important;
  border-color:rgba(255,145,44,.52)!important;
}

@media(max-width:820px){
  #history .studio-history-row.is-video{
    grid-template-columns:58px minmax(0,1fr)!important;
    column-gap:9px!important;
  }
  #history .studio-history-row.is-video .studio-history-video-lazy-v2874{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
  }
  #history .studio-history-row.is-video .studio-history-cost{
    left:10px!important;
    top:9px!important;
  }
  #history .studio-history-row.is-video .studio-history-row-actions{
    grid-column:1 / -1!important;
    width:100%!important;
    padding-left:0!important;
    justify-content:flex-start!important;
    margin-top:4px!important;
  }
  #history .magic-history-video-regenerate-v2882,
  #history .studio-history-row-actions button.danger,
  #history .studio-history-row-actions [data-history-delete],
  #history .studio-history-row.is-video .studio-history-row-actions a{
    min-height:34px!important;
    padding-inline:9px!important;
    font-size:10.5px!important;
  }
}

/* =========================================================
   HF28.83 - OUTPUT HISTORY V2 + REAL VIDEO POSTER
   ========================================================= */

#history #studioHistoryGrid.magic-output-history-v2{
  display:grid!important;
  gap:10px!important;
}

#history #studioHistoryGrid.magic-output-history-v2 .studio-history-row{
  position:relative!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
  overflow:hidden!important;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
#history #studioHistoryGrid.magic-output-history-v2 .studio-history-row:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,143,44,.18)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.11)!important;
}
html[data-theme="light"] #history #studioHistoryGrid.magic-output-history-v2 .studio-history-row{
  border-color:rgba(26,40,58,.09)!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(34,45,62,.07)!important;
}

/* Ready state chip - current history consists of finalized successful outputs. */
.magic-history-state-v2883{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:24px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(46,194,126,.22)!important;
  background:rgba(46,194,126,.08)!important;
  color:#55d998!important;
  font-size:9.5px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html[data-theme="light"] .magic-history-state-v2883{
  color:#168657!important;
  background:#ecfbf4!important;
  border-color:rgba(22,134,87,.18)!important;
}

/* Real server-side video poster. */
.studio-history-video-preview-v2874{
  position:relative!important;
  isolation:isolate!important;
  background:#090b10!important;
}
.studio-history-video-poster-v2883{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#0b0d12!important;
}
.studio-history-video-preview-icon-v2874{
  position:relative!important;
  z-index:2!important;
  box-shadow:0 7px 18px rgba(0,0,0,.28)!important;
}
.studio-history-video-preview-v2874::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.24))!important;
}

/* One consistent action language across image/video history. */
#history .studio-history-row-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
#history .studio-history-row-actions>a,
#history .studio-history-row-actions>button{
  min-height:36px!important;
  border-radius:10px!important;
  font-size:10.8px!important;
  font-weight:850!important;
}
#history .studio-history-row-actions .magic-history-preview-v2883{
  border-color:rgba(103,122,255,.22)!important;
  background:rgba(103,122,255,.07)!important;
  color:#aeb9ff!important;
}
html[data-theme="light"] #history .studio-history-row-actions .magic-history-preview-v2883{
  color:#4657b9!important;
  background:#f1f3ff!important;
}

/* Stability lock: no video element may exist inside a History card. */
#history .studio-history-row video,
#history #studioVideoThumbGeneratorV2876{
  display:none!important;
}

/* Visual normalization for image and video thumbnails. */
#history .studio-history-thumb,
#history .studio-history-video-lazy-v2874{
  width:70px!important;
  min-width:70px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
#history .studio-history-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}

@media(max-width:820px){
  #history #studioHistoryGrid.magic-output-history-v2{
    gap:9px!important;
  }
  #history #studioHistoryGrid.magic-output-history-v2 .studio-history-row{
    border-radius:15px!important;
  }
  #history .studio-history-thumb,
  #history .studio-history-video-lazy-v2874{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
  }
  #history .studio-history-row-actions>a,
  #history .studio-history-row-actions>button{
    min-height:34px!important;
    font-size:10.3px!important;
    padding-inline:9px!important;
  }
  .magic-history-state-v2883{
    min-height:22px!important;
    font-size:9px!important;
    padding-inline:7px!important;
  }
}