/* The mobile studio is a guided workspace; desktop keeps its original layout. */
.video-mobile-workspaces, .video-mobile-heading, .video-mobile-summary,
.video-mobile-actions, .video-mobile-credits, .video-mobile-workspace-notice { display: none; }

@media (max-width: 760px) {
  .video-mobile-workspace-notice:not([hidden]) { display: block; margin: 0; padding: 14px; border: 1px solid #ffffff1f; border-radius: 12px; background: var(--studio-matte-base, #1c2022); color: #dce1e3; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  body[data-page="video"][data-mobile-step] { height: auto; min-height: 100dvh; overflow: auto; background: #0b0c0d; }
  body[data-page="video"][data-mobile-step] .video-main { display: flex; flex: 1; width: 100%; max-width: 600px; margin: 0 auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); gap: 20px; }
  .video-mobile-workspaces { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #ffffff0d; border-radius: 13px; background: var(--studio-matte-base); }
  .video-mobile-workspaces button { flex: 1; min-width: 0; min-height: 40px; padding: 8px 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #969a9c; font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; }
  .video-mobile-workspaces button[aria-current] { border-color: #ffffff15; background: var(--studio-matte-control); color: #fff; box-shadow: none; }
  body[data-page="video"][data-mobile-step] .video-sidebar { width: 100%; max-width: none; align-self: stretch; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  body[data-page="video"][data-mobile-step] .video-sidebar .video-controls { display: flex; gap: 14px; padding: 0; overflow: visible; }
  body[data-page="video"][data-mobile-step] .video-controls[hidden] { display: none; }
  .video-mobile-heading { display: block; order: -10; scroll-margin-top: 80px; }
  .video-mobile-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 16px; color: #a2a5a7; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; }
  #video-mobile-step-count { color: #686e70; font-size: 9px; letter-spacing: 1px; }
  #video-mobile-title { margin: 0; color: #f6f6f6; font-size: clamp(25px, 7vw, 34px); font-weight: 600; line-height: 1.18; letter-spacing: -1.2px; outline: none; }
  #video-mobile-description { margin: 10px 0 25px; color: #969b9d; font-size: 12px; line-height: 1.7; }
  #video-mobile-progress { display: flex; gap: 6px; margin-bottom: 10px; }
  #video-mobile-progress button { display: flex; flex: 1; align-items: center; gap: 7px; position: relative; min-width: 0; min-height: 45px; padding: 0 0 13px; border: 0; border-bottom: 2px solid #292c2d; background: transparent; color: #757b7e; font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
  #video-mobile-progress button > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid #353a3c; border-radius: 50%; font-size: 10px; }
  #video-mobile-progress button[aria-current] { border-bottom-color: #eee; color: #f5f5f5; }
  #video-mobile-progress button[aria-current] > span:first-child { border-color: #fff; color: #111; background: #fff; }
  #video-mobile-progress button.is-complete { border-bottom-color: #646b6e; color: #c5c9cb; }
  #video-mobile-progress button.is-complete > span:first-child { background: #303638; border-color: #505658; }

  body[data-mobile-step] .video-sidebar :is(#video-style-card, #video-model-preview, .hypnosis-style-card) { flex: 0 0 150px; height: 150px; min-height: 150px; order: -8; border: 1px solid #ffffff17; border-radius: 16px; }
  body[data-mobile-step] .video-sidebar :is(#video-style-card, #video-model-preview) .video-style-text { left: 17px; bottom: 16px; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs, .kling-mode-tabs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; height: auto; min-height: 0; gap: 10px; order: -6; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs, .kling-mode-tabs)[hidden] { display: none; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs button, .kling-mode-tab) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; gap: 12px; min-height: 132px; padding: 18px 14px; border: 1px solid #ffffff12; border-radius: 15px; background: var(--studio-matte-surface); color: #b0b5b8; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: left; white-space: normal; box-shadow: none; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs button, .kling-mode-tab) > .v-icon { width: 23px; height: 23px; color: #92999d; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs button[aria-pressed="true"], .kling-mode-tab[aria-selected="true"]) { border-color: #b6bdc1; color: #fff; background: var(--studio-matte-control); box-shadow: none; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs button[aria-pressed="true"], .kling-mode-tab[aria-selected="true"])::before { content: "✓"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #eceff0; color: #181b1c; font-size: 10px; }
  body[data-mobile-step] .video-sidebar .hypnosis-transfer-tabs button::after { content: "Bring movement to your subject"; max-width: 140px; color: #959da1; font-size: 11px; line-height: 1.6; font-weight: 400; }
  body[data-mobile-step] .video-sidebar .hypnosis-transfer-tabs button[data-hypnosis-transfer="objects"]::after { content: "Reimagine objects in your scene"; }
  /* Model-specific desktop spans must never create implicit mobile columns. */
  body[data-mobile-step] .video-sidebar .kling-mode-tabs .kling-mode-tab { grid-column: auto !important; }
  body[data-mobile-step] .video-sidebar .kling-mode-tab::after { content: attr(data-mobile-description); color: #959da1; font-size: 11px; line-height: 1.6; font-weight: 400; }

  body[data-page="video"][data-mobile-step] .video-sidebar .video-generation-controls { display: contents; }
  body[data-mobile-step] .video-sidebar #video-model-trigger { order: -5; margin: 0; min-height: 60px; padding: 10px 14px; border: 1px solid #ffffff0e; border-radius: 13px; background: var(--studio-matte-surface); }
  body[data-mobile-step] .video-sidebar :is(#video-references, #hypnosis-images, .kling-frames-panel, .video-workflow-source-panel) { order: -4; }
  body[data-mobile-step] .video-sidebar :is(#video-references, #hypnosis-images) > .video-dropzone { min-height: 175px; gap: 9px; padding: 24px 16px; border: 1px dashed #ffffff24; border-radius: 14px; background: var(--studio-matte-surface); }
  body[data-mobile-step] .video-sidebar :is(#video-references, #hypnosis-images):not(.has-references) { padding: 0; border-radius: 14px; background: transparent; box-shadow: none; }
  body[data-mobile-step] .video-sidebar .video-dropzone > strong { font-size: 15px; line-height: 1.5; }
  body[data-mobile-step] .video-sidebar .video-dropzone > span:last-child { max-width: 260px; font-size: 11px; line-height: 1.6; }
  body[data-mobile-step] .video-sidebar .video-prompt-card { order: -3; flex: none; height: auto; min-height: 170px; max-height: none; padding: 15px; border: 1px solid #ffffff14; border-radius: 14px; background: var(--studio-matte-surface); }
  body[data-mobile-step] .video-sidebar .video-prompt-card textarea { flex: auto; min-height: 120px; font-size: 16px; line-height: 1.6; }
  body[data-mobile-step] .video-sidebar .video-prompt-card > label { margin-bottom: 10px; font-size: 13px; }
  body[data-mobile-step] .video-sidebar .video-prompt-actions { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  body[data-mobile-step] .video-sidebar .video-prompt-actions button { min-height: 40px; font-size: 12px; }
  body[data-video-studio="hypnosis"][data-mobile-step] .video-sidebar .hypnosis-prompt-card { order: 1; min-height: 0; padding: 0; }
  body[data-video-studio="hypnosis"][data-mobile-step] .hypnosis-prompt-header { min-height: 60px; padding: 0 14px; }
  body[data-video-studio="hypnosis"][data-mobile-step] .hypnosis-prompt-header label::after { content: "Optional"; margin-left: 8px; color: #818c91; font-size: 10px; font-weight: 400; }
  body[data-video-studio="hypnosis"][data-mobile-step] #video-prompt { min-height: 120px; padding: 0 14px 14px; font-size: 16px; }
  body[data-mobile-step] #hypnosis-prompt-toggle { box-sizing: content-box; width: 32px; height: 18px; padding: 11px 10px; border: 0; background-clip: content-box; }
  body[data-mobile-step] #hypnosis-prompt-toggle > span { width: 14px; height: 14px; margin: 2px; }
  body[data-mobile-step] #hypnosis-prompt-toggle[aria-checked="true"] > span { transform: translateX(14px); }

  .video-mobile-summary { display: block; order: -7; padding: 17px 15px; border: 1px solid #ffffff15; border-radius: 16px; background: var(--studio-matte-surface); }
  .video-mobile-summary-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
  .video-mobile-summary-title h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
  .video-mobile-summary-title > span { color: #788286; font-size: 7px; letter-spacing: 1px; }
  .video-mobile-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid #ffffff0b; }
  .video-mobile-summary-row > div { display: grid; gap: 6px; min-width: 0; }
  .video-mobile-summary-row > div > span { color: #919a9e; font-size: 11px; }
  .video-mobile-summary-row strong { color: #e5e8ea; font-size: 12px; line-height: 1.6; font-weight: 500; overflow-wrap: anywhere; }
  .video-mobile-summary-row button { min-height: 40px; padding: 8px 0 8px 10px; border: 0; background: transparent; color: #bfc7ca; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
  .video-mobile-summary-previews { display: flex; gap: 7px; }
  .video-mobile-summary-previews:not(:empty) { padding-top: 14px; }
  .video-mobile-summary-preview { display: grid; place-items: center; width: 53px; height: 53px; overflow: hidden; border: 1px solid #ffffff15; border-radius: 10px; background: #2c3235; color: #b7c1c6; font-size: 8px; letter-spacing: .7px; }
  .video-mobile-summary-preview img { width: 100%; height: 100%; object-fit: cover; }
  #video-mobile-summary-prompt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 14px 0 0; color: #a1aaae; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  #video-mobile-summary-prompt[hidden], .video-mobile-summary[hidden] { display: none; }
  body[data-mobile-step] .video-sidebar :is(.video-setting-row, .hypnosis-quality, .kling-quality-control, .video-bitrate-button, .video-native-options) { order: 0; }
  body[data-mobile-step] .video-sidebar :is(.video-setting-trigger, .hypnosis-quality, .kling-quality-control, .video-bitrate-button) { min-height: 60px; padding: 10px 14px; border: 1px solid #ffffff10; border-radius: 13px; background: var(--studio-matte-surface); }
  body[data-mobile-step] .video-sidebar .video-setting-row { gap: 10px; }
  body[data-mobile-step] .video-sidebar .video-native-option select { min-height: 44px; font-size: 16px; }
  .video-mobile-credits { display: flex; align-items: center; justify-content: space-between; gap: 16px; order: 2; margin-top: 8px; padding: 17px 2px 0; border-top: 1px solid #ffffff15; }
  .video-mobile-credits > span { flex-shrink: 0; color: #9aa4a8; font-size: 12px; }
  .video-mobile-credits strong { max-width: 65%; color: #edf0f2; font-size: 12px; line-height: 1.6; font-weight: 500; text-align: right; }
  body[data-mobile-step] .video-sidebar #video-form-notice { order: 3; }
  body[data-mobile-step] .video-sidebar .video-generate { order: 4; min-height: 54px; border-radius: 14px; font-size: 15px; }
  .video-mobile-actions { display: flex; gap: 10px; order: 5; margin-top: 10px; padding-bottom: 8px; }
  .video-mobile-actions button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 19px; border: 1px solid #ffffff18; border-radius: 13px; background: #191d1f; color: #dce1e3; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
  .video-mobile-actions #video-mobile-next { flex: 1; justify-content: space-between; border-color: #eee; background: #f1f3f4; color: #141819; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aab0b3; }
  .video-mobile-actions button[hidden] { display: none; }

  body[data-mobile-step] .video-stage { border-radius: 16px; background: #111415; }
  body[data-mobile-step] .video-stage-tabs { display: none; }
  body[data-mobile-step] .video-history { padding: 20px 12px; }
  body[data-mobile-step] .video-generated-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-mobile-step] .video-guide { padding: 25px 16px; }
  body[data-mobile-step] .video-guide-heading h1 { font-size: 27px; }
  body[data-mobile-step] .video-guide-steps { display: grid; grid-template-columns: 1fr; gap: 24px; }
  body[data-mobile-step] .video-guide-panel { max-height: 270px; }
  body[data-mobile-workspace="create"] .video-stage,
  body[data-mobile-workspace="history"] .video-sidebar,
  body[data-mobile-workspace="guide"] .video-sidebar { display: none; }
  body[data-mobile-step] .video-sidebar.is-picking-model { min-height: 0; height: auto; }
  body[data-mobile-step] .video-model-picker { max-height: calc(100dvh - 170px); padding: 0; }
  body[data-mobile-step] .video-model-picker-heading { padding-top: 4px; }
  body[data-mobile-step] .video-model-picker-search input { min-height: 48px; font-size: 16px; }
  body[data-mobile-step] .video-dialog { width: calc(100% - 24px); max-width: 540px; }
  body[data-mobile-step] .video-option-menu { max-width: calc(100vw - 24px); }
  body[data-mobile-step] .kling-boundary-frames { gap: 10px; }
  body[data-mobile-step] .video-sidebar .kling-boundary-frames .kling-frame-media { height: 160px; min-height: 160px; }

  /* Hiding is presentation-only: original hidden states remain owned by each model. */
  body[data-mobile-step="1"] .video-sidebar :is(#video-references, #hypnosis-images, .kling-frames-panel, .video-workflow-source-panel, .video-prompt-card),
  body[data-mobile-step="1"] .video-generation-controls > :not(#video-model-trigger, #video-form-notice),
  body[data-mobile-step="2"] .video-sidebar :is(#video-style-card, #video-model-preview, .hypnosis-transfer-tabs, .kling-mode-tabs),
  body[data-mobile-step="2"] .video-generation-controls > :not(#video-form-notice),
  body[data-mobile-step="3"] .video-sidebar :is(#video-style-card, #video-model-preview, .hypnosis-transfer-tabs, .kling-mode-tabs, #video-references, #hypnosis-images, .kling-frames-panel, .video-workflow-source-panel, #video-model-trigger),
  body[data-mobile-step="3"]:not([data-video-studio="hypnosis"]) .video-prompt-card,
  body[data-video-studio="hypnosis"][data-mobile-step="2"] .video-prompt-card { display: none !important; }
  body[data-video-studio="hypnosis"][data-mobile-step="3"] .video-generation-controls .hypnosis-quality { display: flex; }
  body[data-mobile-step] .video-mobile-workspaces button:focus-visible,
  body[data-mobile-step] #video-mobile-progress button:focus-visible,
  body[data-mobile-step] .video-mobile-actions button:focus-visible { outline: 2px solid #f0f0f0; outline-offset: 3px; }
}

@media (max-width: 359px) {
  body[data-page="video"][data-mobile-step] .video-main { padding-inline: 12px; }
  body[data-mobile-step] .video-sidebar :is(.hypnosis-transfer-tabs button, .kling-mode-tab) { padding: 15px 11px; font-size: 11px; }
  #video-mobile-progress { gap: 5px; }
  .video-mobile-eyebrow { font-size: 9px; letter-spacing: 1px; }
}