/* ============================================================
   V-FORGE v9.1.3 — MOBILE WORKSPACE, PREVIEW ZOOM & DESKTOP LAYOUT
   Additive override loaded after v91-editor.css.
   ============================================================ */

#page-video-workspace {
  --v913-panel: #101015;
  --v913-card: #19191f;
  --v913-line: rgba(255,255,255,.09);
  --v913-muted: #94949f;
  --v913-accent: #c6ff63;
}

/* Preview controls are moved outside the narrow video canvas. */
#page-video-workspace .v913-preview-layout {
  position: relative;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  align-items: stretch;
  gap: 8px !important;
}

#page-video-workspace .v913-preview-layout .v91-preview-topbar {
  position: static !important;
  inset: auto !important;
  z-index: 14;
  display: flex !important;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between !important;
  gap: 8px;
  pointer-events: auto !important;
}

#page-video-workspace .v913-preview-layout .v91-preview-badge[hidden] {
  display: none !important;
}

#page-video-workspace .v913-preview-layout .workspace-video-frame {
  grid-row: 2;
  align-self: center !important;
  justify-self: center !important;
  min-height: 0;
  border-radius: 15px !important;
}

#page-video-workspace .v913-preview-layout .workspace-video-frame video {
  will-change: transform;
  transition: transform .16s cubic-bezier(.2,.8,.2,1);
  touch-action: none !important;
}

#page-video-workspace .v913-preview-layout .workspace-video-frame[data-preview-zoom="zoomed"] {
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(198,255,99,.2), 0 16px 44px rgba(0,0,0,.42) !important;
}

#page-video-workspace .v913-preview-layout .workspace-video-frame[data-preview-zoom="zoomed"]:active {
  cursor: grabbing;
}

#page-video-workspace .v913-preview-layout .v91-preview-controls {
  position: static !important;
  inset: auto !important;
  z-index: 14;
  grid-row: 3;
  width: 100% !important;
  min-height: 46px;
  margin: 0;
  opacity: 0;
  transform: none !important;
  pointer-events: none;
}

body.v91-editor-ready #page-video-workspace .v913-preview-layout .v91-preview-controls {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#page-video-workspace .v913-preview-layout .v82-preview-meta {
  grid-row: 4;
}

.v913-preview-zoom {
  display: grid;
  grid-template-columns: 31px 52px 31px;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(10,10,14,.78);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.v913-preview-zoom button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 9px;
  color: #f7f7fb;
  background: rgba(255,255,255,.06);
}

.v913-preview-zoom button:disabled {
  opacity: .3;
}

.v913-preview-zoom button .material-icons-round {
  font-size: 17px;
}

.v913-preview-zoom strong {
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

/* Editor tools must keep the editor's dark surface even when the app theme is light. */
#page-video-workspace .v82-tool-sheet {
  color: #f7f7fb !important;
  background: var(--v913-panel) !important;
}

#page-video-workspace .v82-tool-panel,
#page-video-workspace .v82-tool-panel.active {
  width: 100%;
  min-width: 0;
}

#page-video-workspace .v82-setting-card,
#page-video-workspace .workspace-setting-group,
#page-video-workspace .v91-quick-tools {
  width: 100% !important;
  color: #f7f7fb !important;
  border-color: var(--v913-line) !important;
  background: var(--v913-card) !important;
  box-shadow: none !important;
}

#page-video-workspace .workspace-choice-grid {
  width: 100%;
  background: transparent !important;
}

#page-video-workspace .workspace-choice {
  min-width: 0;
  color: #b7b7c0 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  background: #111116 !important;
  box-shadow: none !important;
}

#page-video-workspace .workspace-choice strong {
  color: inherit !important;
}

#page-video-workspace .workspace-choice.active {
  color: #fff !important;
  border-color: rgba(169,116,255,.72) !important;
  background: linear-gradient(145deg, rgba(169,116,255,.3), rgba(104,67,255,.14)) !important;
  box-shadow: inset 0 0 0 1px rgba(198,255,99,.1), 0 10px 24px rgba(83,48,153,.22) !important;
}

#page-video-workspace .v91-quick-tools {
  margin-inline: 0 !important;
  padding: 13px !important;
  border-radius: 18px !important;
}

#page-video-workspace .v91-quick-grid button {
  min-height: 58px;
  background: #121217 !important;
}

#page-video-workspace .v91-zoom-controls button:not(:disabled) {
  color: #fff;
}

#page-video-workspace .v91-zoom-controls button:disabled {
  opacity: .28;
}

/* Mobile workspace: the preview gets enough height for portrait media.
   The shell scrolls, while the editor dock remains fixed. */
@media (max-width: 899px) {
  #page-video-workspace .v82-editor-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(500px, 66dvh, 680px) 176px minmax(300px, auto) !important;
    align-content: start;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 92px;
    padding-bottom: 88px;
  }

  #page-video-workspace .v82-preview-stage {
    min-height: clamp(500px, 66dvh, 680px) !important;
    padding: 10px 12px 7px !important;
  }

  #page-video-workspace .v82-timeline {
    min-height: 176px !important;
  }

  #page-video-workspace .v82-tool-sheet {
    min-height: 300px !important;
    overflow: visible !important;
    padding: 9px 14px 108px !important;
    border-radius: 23px 23px 0 0 !important;
    box-shadow: 0 -16px 42px rgba(0,0,0,.34) !important;
  }

  #page-video-workspace .v82-tool-sheet > .v82-sheet-handle {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  #page-video-workspace .v913-preview-layout .v91-fit-switch button {
    min-width: 46px;
  }

  #page-video-workspace .v913-preview-layout .v91-preview-controls {
    grid-template-columns: 38px auto minmax(70px,1fr) auto 36px !important;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 15px;
  }

  #page-video-workspace .v913-preview-layout .v91-time-label {
    display: inline !important;
    font-size: 8px !important;
  }

  #page-video-workspace .v913-preview-layout .v91-play-button,
  #page-video-workspace .v913-preview-layout .v91-icon-button {
    width: 34px;
    height: 34px;
  }

  #page-video-workspace .v82-preview-meta > button strong {
    max-width: 55vw;
  }

  #page-video-workspace .ratio-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #page-video-workspace .ratio-choices .workspace-choice {
    min-height: 88px !important;
    padding: 10px 5px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 370px) {
  #page-video-workspace .v82-editor-shell {
    grid-template-rows: 470px 168px minmax(300px, auto) !important;
  }

  #page-video-workspace .v82-preview-stage {
    min-height: 470px !important;
  }

  .v913-preview-zoom {
    grid-template-columns: 28px 45px 28px;
  }

  #page-video-workspace .v913-preview-layout .v91-preview-controls {
    grid-template-columns: 34px minmax(52px,1fr) 34px !important;
  }

  #page-video-workspace .v913-preview-layout .v91-time-label {
    display: none !important;
  }

  #page-video-workspace .ratio-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop pages: use the available canvas instead of leaving a small mobile
   column and a large empty area. */
@media (min-width: 900px) {
  body:not(.hide-nav):not(.vf-editor-open):not(.v911-editor-open) #bottom-navigation.v82-bottom-nav-wrapper {
    top: 24px !important;
    transform: none !important;
  }

  body:not(.hide-nav):not(.vf-editor-open):not(.v911-editor-open) #page-home.active,
  body:not(.hide-nav):not(.vf-editor-open):not(.v911-editor-open) #page-enhancer.active,
  body:not(.hide-nav):not(.vf-editor-open):not(.v911-editor-open) #page-search.active,
  body:not(.hide-nav):not(.vf-editor-open):not(.v911-editor-open) #page-profile.active {
    padding-left: 116px !important;
  }

  .v82-root-header,
  .v82-home-main,
  .v82-templates-main,
  .v82-projects-main,
  #page-profile .profile-content {
    width: min(1180px, calc(100vw - 164px)) !important;
    max-width: 1180px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #page-profile .profile-content {
    display: grid !important;
    grid-template-columns: minmax(340px, .9fr) minmax(410px, 1.1fr) !important;
    align-items: start;
    gap: 24px;
    padding: 34px 34px 90px !important;
  }

  #page-profile .profile-card,
  #page-profile .profile-menu-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #page-profile .profile-menu-list {
    align-self: start;
  }

  #page-profile .profile-bg-wrapper {
    left: 116px !important;
  }
}

@media (min-width: 900px) and (min-height: 560px) {
  #page-video-workspace .v82-editor-shell,
  #page-video-workspace:fullscreen .v82-editor-shell,
  #page-video-workspace:-webkit-full-screen .v82-editor-shell,
  #page-video-workspace.v911-immersive .v82-editor-shell {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 450px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(180px, 25vh, 230px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  #page-video-workspace .v82-preview-stage {
    min-height: 0 !important;
    padding: 14px 20px 10px !important;
  }

  #page-video-workspace .v82-tool-sheet {
    overflow-y: auto !important;
    padding-bottom: 98px !important;
    border-radius: 0 !important;
  }

  #page-video-workspace .v913-preview-layout .v91-preview-controls {
    max-width: 760px;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-video-workspace .v913-preview-layout .workspace-video-frame video {
    transition: none !important;
  }
}