/* Terry.ism v32 — video metadata and always-visible mobile Reels typography preview */

body.video-mode .editor-tab[data-tab="text"].active{
  background:#20262d!important;
  color:#fff!important;
}
body.video-mode .editor-tab[data-tab="text"].active span{color:#e69460!important}
body.video-mode #metadataTemplateGrid button:first-child.active{
  border-color:#20262d!important;
  background:#20262d!important;
  color:#fff!important;
}
body.video-mode #metadataFieldsList .metadata-choice-card:not(.unavailable){
  background:linear-gradient(145deg,#fff,#fafbfb)!important;
}
.mobile-video-controls{display:none}
body.video-mode .mobile-video-controls:not(.hidden){
  display:grid;
  grid-template-columns:26px minmax(48px,1fr) 58px 26px;
  min-height:36px;
  align-items:center;
  gap:4px;
  padding:4px;
  border-top:1px solid #e6e9eb;
  background:#fff;
}
.mobile-video-icon-button{
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  padding:0;
  border:1px solid #dfe3e6;
  border-radius:8px;
  background:#f8f9f9;
  color:#20262d;
}
.mobile-video-icon-button svg{display:block;width:14px;height:14px}
.mobile-video-pause-icon{display:none!important}
.mobile-video-icon-button.is-playing .mobile-video-play-icon{display:none!important}
.mobile-video-icon-button.is-playing .mobile-video-pause-icon{display:block!important}
.mobile-video-mute-slash{display:none}
.mobile-video-icon-button.is-muted .mobile-video-mute-slash{display:block}
.mobile-video-timeline{
  position:relative;
  display:block;
  width:100%;
  height:24px;
  cursor:pointer;
}
.mobile-video-progress{
  position:absolute;
  top:50%;
  right:2px;
  left:2px;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e5e8;
  transform:translateY(-50%);
}
.mobile-video-progress i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#c86c3c;
}
.mobile-video-timeline input[type="range"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:.001;
  cursor:pointer;
}
.mobile-video-timeline:focus-within{outline:2px solid #c86c3c;outline-offset:2px;border-radius:6px}
.mobile-video-time{
  color:#626b75;
  font-size:7.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:center;
  white-space:nowrap;
}

@media(max-width:360px){
  body.video-mode .mobile-video-controls:not(.hidden){grid-template-columns:26px minmax(50px,1fr) 48px}
  .mobile-video-controls #mobileVideoMuteBtn{display:none}
  .mobile-video-time{font-size:7px}
}

@media(max-width:900px){
  body.video-mode[data-editor-tab="text"] .mobile-frame-studio{
    position:sticky!important;
    top:60px!important;
    z-index:24!important;
    display:block!important;
    height:clamp(174px,31dvh,236px)!important;
    margin:7px!important;
    padding:7px!important;
    border-color:#d9dee3!important;
    background:rgba(249,250,250,.96)!important;
    box-shadow:0 12px 30px rgba(20,26,33,.13)!important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  body.video-mode[data-editor-tab="text"] .mobile-preview-pane{
    width:100%!important;
    height:100%!important;
  }
  body.video-mode[data-editor-tab="text"] .mobile-frame-browser{display:none!important}
  body.video-mode[data-editor-tab="text"] .editor-live-preview{padding:6px!important}
  body.video-mode[data-editor-tab="text"] .editor-live-preview canvas{
    position:absolute!important;
    top:6px!important;
    left:50%!important;
    width:auto!important;
    height:calc(100% - 12px)!important;
    max-width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    transform:translateX(-50%)!important;
    box-shadow:0 7px 20px rgba(19,24,31,.18)!important;
  }
  body.video-mode[data-editor-tab="text"] .editor-tabs{
    position:relative!important;
    z-index:25!important;
    background:#fff!important;
  }
  body.video-mode[data-editor-tab="text"] .text-template-grid{
    display:flex!important;
    gap:7px!important;
    padding-bottom:5px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.video-mode[data-editor-tab="text"] .text-template-grid::-webkit-scrollbar{display:none}
  body.video-mode[data-editor-tab="text"] .text-template-button{
    flex:0 0 116px!important;
    min-height:64px!important;
    scroll-snap-align:start;
  }
}

@media(max-width:720px){
  body.video-mode[data-editor-tab="text"] .mobile-frame-studio{
    top:60px!important;
    height:clamp(168px,29dvh,218px)!important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.video-mode[data-editor-tab="text"] .mobile-frame-studio{
    top:50px!important;
    height:170px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.video-mode[data-editor-tab="text"] .mobile-frame-studio{scroll-behavior:auto!important}
}