/* Scoped workbench layout; image, canvas, account and billing views are unchanged. */
html[data-screen="studio"] body.video-workspace {
  --video-surface: #101212;
  --video-muted: #abb3af;
  --video-line: #292e2d;
  --video-accent: #d8ff69;
  overflow: hidden !important;
}
html body.video-workspace .app-shell,
html body.video-workspace .app-shell .main {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
html body.video-workspace .app-shell .main {
  display: flex !important;
  flex-direction: column !important;
}
html body.video-workspace .app-shell .topbar {
  flex: 0 0 auto !important;
  min-height: 60px !important;
  padding: 10px 24px !important;
}
html body.video-workspace .app-shell #koko-platform-announcement {
  width: calc(100% - 40px) !important;
  min-height: 0 !important;
  margin: 12px 20px 0 !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
html body.video-workspace .app-shell #createView {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 16px 20px 20px !important;
}
html body.video-workspace .app-shell #createView .hero-copy,
html body.video-workspace .app-shell #createView #modelList { display: none !important; }
html body.video-workspace .app-shell #createView .workspace-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 16px !important;
}
html body.video-workspace .app-shell #createView .composer {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--video-line) !important;
  border-radius: 14px !important;
  background: var(--video-surface) !important;
}
html body.video-workspace .app-shell #createView .composer > .panel-head {
  margin: 0 !important;
  padding: 16px 20px 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
html body.video-workspace .app-shell #createView .panel-head h3 {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
html body.video-workspace .app-shell #createView .composer > .panel-head .muted { display: none !important; }
html body.video-workspace .app-shell #createView .video-composer-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #666e6a transparent;
  padding: 8px 16px 16px 20px;
}
html body.video-workspace .app-shell #createView .field-label,
html body.video-workspace .app-shell #createView .control label {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
  color: #dfe5e0 !important;
}
html body.video-workspace .app-shell #createView .field-label small,
html body.video-workspace .app-shell #createView #assetCount {
  font-size: 12px !important;
  color: var(--video-muted) !important;
}
html body.video-workspace .app-shell #createView #videoModelPicker { margin-bottom: 12px; }
html body.video-workspace .app-shell #createView #videoModelSelect,
html body.video-workspace .app-shell #createView .control select {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  color: #f4f6f3 !important;
  border: 1px solid #3a433e !important;
  border-radius: 8px !important;
  background: #151818 !important;
}
html body.video-workspace .app-shell #createView #videoModelMeta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--video-muted);
  margin: 6px 0 0;
}
html body.video-workspace .app-shell #createView #prompt {
  width: 100% !important;
  height: clamp(88px, 12dvh, 180px) !important;
  min-height: 88px !important;
  max-height: 320px !important;
  padding: 12px !important;
  margin: 0 !important;
  resize: vertical !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #f4f6f3 !important;
  caret-color: var(--video-accent);
  border: 1px solid #3a433e !important;
  border-radius: 8px !important;
  background: #0b0d0d !important;
}
html body.video-workspace .app-shell #createView #prompt::placeholder { color: #9ca6a0 !important; }
html body.video-workspace .app-shell #createView .asset-section { margin-top: 12px !important; }
html body.video-workspace .app-shell #createView .asset-help-note {
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html body.video-workspace .app-shell #createView .asset-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  overflow: visible !important;
  max-height: none !important;
}
html body.video-workspace .app-shell #createView :is(.upload-tile, .asset-item) {
  width: 76px !important;
  height: 72px !important;
  min-height: 72px !important;
  flex: 0 0 76px !important;
}
html body.video-workspace .app-shell #createView .upload-tile small { font-size: 11px !important; }
html body.video-workspace .app-shell #createView #videoTools { margin-top: 12px; }
html body.video-workspace .app-shell #createView #videoAdvancedControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 0;
}
html body.video-workspace .app-shell #createView #videoTools summary {
  cursor: pointer;
  color: #c2cbc5;
  font-size: 13px;
  padding: 8px 0;
}
html body.video-workspace .app-shell #createView #videoTools .quick-prompts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}
html body.video-workspace .app-shell #createView #videoTools .quick-prompts button {
  width: auto !important;
  min-height: 36px !important;
  font-size: 12px !important;
}
html body.video-workspace .app-shell #createView #autoMatchPanel { padding: 12px !important; }
html body.video-workspace .app-shell #createView #autoMatchPanel :is(strong, span, button) { font-size: 12px !important; }
html body.video-workspace .app-shell #createView .video-composer-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--video-line);
  background: #101212;
}
html body.video-workspace .app-shell #createView #controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}
html body.video-workspace .app-shell #createView .generate-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}
html body.video-workspace .app-shell #createView :is(.retry-last-btn, .face-guide-btn) {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  background: transparent !important;
  border: 1px solid #3a433e !important;
  color: #dfe5e0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
html body.video-workspace .app-shell #createView .generate-row {
  flex: 1 0 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
html body.video-workspace .app-shell #createView .generate-row .credit-chip {
  order: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #dfe5e0 !important;
  font-size: 13px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
html body.video-workspace .app-shell #createView .generate-row #generateBtn {
  order: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 120px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  font-size: 15px !important;
  background: #f7f7fa !important;
  color: #101212 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body.video-workspace .app-shell #createView #generateBtn:hover:not(:disabled) { background: #ffffff !important; }
html body.video-workspace .app-shell #createView #generateBtn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
html body.video-workspace .app-shell #createView #formNote { display: none !important; }
html body.video-workspace .app-shell #createView #videoGenerationNotice:not([hidden]) {
  display: block !important;
  margin: 8px 0 0 !important;
  max-height: 64px;
  overflow: auto;
  font-size: 13px !important;
}
html body.video-workspace .app-shell #createView :is(button, summary, select, textarea):focus-visible {
  outline: 2px solid var(--video-accent) !important;
  outline-offset: 2px !important;
}
html body.video-workspace .app-shell #createView ::selection { color: #101212; background: #d8ff69; }
html body.video-workspace .app-shell #createView .preview {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 16px !important;
  overflow: auto !important;
}
html body.video-workspace .app-shell #createView .preview .panel-head {
  flex: 0 0 auto !important;
  height: auto !important;
  margin-bottom: 12px !important;
}
html body.video-workspace .app-shell #createView .preview .panel-head .muted {
  display: block !important;
  font-size: 12px !important;
  color: var(--video-muted) !important;
}
html body.video-workspace .app-shell #createView #previewStage {
  flex: 1 1 0 !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}
html body.video-workspace .app-shell #createView #previewStage video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#videoWorkspaceSwitch { display: none; }
@media (min-width: 1101px) {
  html body.video-workspace .app-shell #createView .generate-action-row {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
  }
  html body.video-workspace .app-shell #createView .generate-row { min-width: 0 !important; }
  html body.video-workspace .app-shell #createView .generate-row .credit-chip {
    flex-wrap: wrap !important;
    max-width: 140px !important;
    line-height: 1.5 !important;
  }
  html body.video-workspace .app-shell #createView #generateBtn kbd { display: none !important; }
}
@media (max-width: 1100px) {
  html body.video-workspace .app-shell #createView .workspace-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.video-workspace .app-shell #createView .preview { display: none !important; }
  html body.video-workspace.video-preview-open .app-shell #createView .composer { display: none !important; }
  html body.video-workspace.video-preview-open .app-shell #createView .preview { display: flex !important; }
  html body.video-workspace #videoWorkspaceSwitch {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }
  html body.video-workspace #videoWorkspaceSwitch button {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #3a433e;
    border-radius: 8px;
    background: #101212;
    color: #dfe5e0;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  html body.video-workspace #videoWorkspaceSwitch button[aria-pressed="true"] {
    background: #202420;
    border-color: #d8ff69;
    color: #d8ff69;
  }
}
@media (max-width: 760px) {
  html body.video-workspace .app-shell .main {
    padding: 0 0 calc(64px + env(safe-area-inset-bottom)) !important;
  }
  html body.video-workspace .app-shell .topbar { min-height: 56px !important; padding: 8px 12px !important; }
  html body.video-workspace .app-shell #koko-platform-announcement {
    width: calc(100% - 20px) !important;
    margin: 8px 10px 0 !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  html body.video-workspace .app-shell #koko-platform-announcement .koko-platform-announcement__icon { display: none !important; }
  html body.video-workspace .app-shell #koko-platform-announcement .koko-platform-announcement__content :is(strong, p) {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  html body.video-workspace .app-shell #createView { padding: 8px 10px !important; gap: 8px !important; }
  html body.video-workspace .app-shell #createView .composer > .panel-head { display: none !important; }
  html body.video-workspace .app-shell #createView .composer { grid-template-rows: minmax(0, 1fr) auto !important; }
  html body.video-workspace .app-shell #createView .video-composer-body { padding: 12px; }
  html body.video-workspace .app-shell #createView #videoModelSelect { font-size: 14px !important; }
  html body.video-workspace .app-shell #createView #prompt { font-size: 16px !important; height: 100px !important; }
  html body.video-workspace .app-shell #createView .video-composer-footer { padding: 10px 12px 12px; }
  html body.video-workspace .app-shell #createView #controls { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  html body.video-workspace .app-shell #createView .control { grid-column: auto !important; }
  html body.video-workspace .app-shell #createView .control select { font-size: 13px !important; height: 36px !important; min-height: 36px !important; }
  html body.video-workspace .app-shell #createView .control label { font-size: 12px !important; margin-bottom: 2px !important; }
  html body.video-workspace .app-shell #createView .generate-action-row { margin-top: 8px !important; gap: 6px !important; }
  html body.video-workspace .app-shell #createView .generate-row .credit-chip { font-size: 12px !important; }
}

/* Keep the editor compact and reserve an independent task rail. */
html body.video-workspace .app-shell #createView {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: 12px 16px 16px !important;
}
html body.video-workspace .app-shell #createView .workspace-grid {
  grid-template-columns: minmax(340px, 420px) minmax(200px, 1fr) minmax(240px, 280px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
}
html body.video-workspace .app-shell #createView .composer {
  grid-column: 1 !important;
  grid-row: 1 !important;
  background: var(--console-surface) !important;
  border-color: var(--console-line) !important;
}
html body.video-workspace .app-shell #createView .composer > .panel-head { padding: 12px 14px 0 !important; }
html body.video-workspace .app-shell #createView .video-composer-body { padding: 8px 10px 12px 14px; }
html body.video-workspace .app-shell #createView .video-composer-footer {
  padding: 12px 14px 14px;
  background: var(--console-surface);
  border-color: var(--console-line);
}
html body.video-workspace .app-shell #createView .generate-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
}
html body.video-workspace .app-shell #createView .generate-row {
  flex: 1 0 100% !important;
  gap: 10px !important;
}
html body.video-workspace .app-shell #createView .generate-row .credit-chip {
  max-width: none !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  color: var(--console-ink) !important;
}
html body.video-workspace .app-shell #createView #videoModelSelect,
html body.video-workspace .app-shell #createView .control select {
  background: var(--console-raised) !important;
  color: var(--console-ink) !important;
}
html body.video-workspace .app-shell #createView #videoTools summary { color: #c2cbc5; }
html body.video-workspace .app-shell #createView .preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 14px !important;
}
html body.video-workspace .app-shell #createView .task-sidebar {
  display: flex !important;
  flex-direction: column !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 14px !important;
}
html body.video-workspace .app-shell #createView .task-sidebar .panel-head {
  flex: 0 0 auto !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  min-height: 40px !important;
  height: auto !important;
}
html body.video-workspace .app-shell #createView .task-sidebar .panel-head .muted {
  display: block !important;
  font-size: 12px !important;
}
html body.video-workspace .app-shell #createView .task-sidebar .panel-head-actions { gap: 4px !important; }
html body.video-workspace .app-shell #createView .task-sidebar .text-btn {
  min-width: 30px !important;
  min-height: 32px !important;
  padding: 4px !important;
}
html body.video-workspace .app-shell #createView .side-task-list {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #666e6a transparent;
  gap: 8px !important;
}
html body.video-workspace .app-shell #createView .side-task-row {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 94px !important;
  height: auto !important;
  padding: 10px !important;
}
html body.video-workspace .app-shell #createView .side-task-thumb {
  min-width: 0 !important;
  width: 30px !important;
  height: 38px !important;
}
html body.video-workspace .app-shell #createView .side-task-copy { min-width: 0 !important; }
html body.video-workspace .app-shell #createView .side-task-row strong {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html body.video-workspace .app-shell #createView .side-task-row :is(small, em) {
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html body.video-workspace .app-shell #createView .side-task-all {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  min-height: 38px !important;
}
@media (min-width: 1101px) and (max-width: 1240px) {
  html body.video-workspace .app-shell #createView .workspace-grid {
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(160px, 1fr) minmax(210px, 1fr) !important;
  }
  html body.video-workspace .app-shell #createView .composer { grid-row: 1 / 3 !important; }
  html body.video-workspace .app-shell #createView .task-sidebar {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}
@media (max-width: 1100px) {
  html body.video-workspace .app-shell #createView { max-width: 660px !important; }
  html body.video-workspace .app-shell #createView .workspace-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.video-workspace .app-shell #createView :is(.composer, .preview, .task-sidebar) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body.video-workspace .app-shell #createView .task-sidebar { display: none !important; }
  html body.video-workspace.video-tasks-open .app-shell #createView :is(.composer, .preview) { display: none !important; }
  html body.video-workspace.video-tasks-open .app-shell #createView .task-sidebar { display: flex !important; }
  html body.video-workspace #videoWorkspaceSwitch button {
    min-width: 0;
    padding-inline: 6px;
    background: var(--console-surface);
    color: var(--console-ink);
    border-color: var(--console-line);
  }
  html body.video-workspace #videoWorkspaceSwitch button[aria-pressed="true"] {
    background: var(--console-raised);
    color: var(--console-accent);
    border-color: var(--console-accent);
  }
}
@media (max-width: 760px) {
  html body.video-workspace .app-shell #createView { padding: 8px 10px !important; }
  html body.video-workspace .app-shell #createView .video-composer-body { padding: 12px; }
  html body.video-workspace .app-shell #createView .video-composer-footer { padding: 10px 12px 12px; }
}
@media (min-width: 1241px) {
  html body.video-workspace .app-shell #createView .workspace-grid {
    grid-template-columns: minmax(340px, 420px) minmax(200px, 1fr) clamp(280px, 24vw, 380px) !important;
    justify-content: stretch !important;
  }
}
/* Full-width task rails must leave room for the existing fixed contact button. */
@media (min-width: 1101px) and (min-height: 901px) {
  html body.video-workspace .app-shell #createView .task-sidebar {
    padding-bottom: 68px !important;
  }
}