/* AI video only: conversation / director plan / video preview / queue. */
.video-generation-page { --chat-line: #e2e6ec; --chat-muted: #616b79; }
.video-generation-page .preview-mode-label { color: var(--chat-muted); font-size: 13px; }
.video-generation-page .studio-main { padding: 14px 20px 20px; }
.video-generation-page .video-titlebar { margin-bottom: 0; }
.video-generation-page .video-titlebar > div:first-child > p:last-child { font-size: 13px; }
.video-generation-page .video-workspace-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; align-items: stretch; margin-top: 14px; }
.video-generation-page .video-config-column { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 1px solid var(--chat-line); border-radius: 16px; overflow: hidden; background: #fafbfc; }
.video-generation-page .scene-picker-card { position: relative; flex: none; padding: 16px; border: 0; border-radius: 0; background: #fff; border-bottom: 1px solid var(--chat-line); }
.video-generation-page .scene-toggle { min-height: 32px; }
.video-generation-page .scene-toggle > div { display: block; min-width: 0; }
.video-generation-page .scene-toggle p { display: block; margin: 3px 0 0; font-size: 11px; line-height: 1.4; color: #6b7480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-generation-page .scene-toggle h2 { font-size: 16px; }
.video-generation-page .scene-options { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.video-generation-page .method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.video-generation-page .scene-tabs { gap: 6px; }
.video-generation-page .scene-tabs button { font-size: 13px; padding: 7px 10px; }
.video-generation-page .chat-heading { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.video-generation-page .chat-heading h2 { font-size: 14px; margin: 0; font-weight: 600; }
.video-generation-page .chat-heading > span { color: var(--chat-muted); font-size: 12px; }
.video-generation-page .chat-heading > button { margin-left: auto; display: flex; align-items: center; gap: 3px; padding: 6px; color: var(--chat-muted); background: transparent; font-size: 13px; min-height: 32px; }
.video-generation-page .chat-heading .ui-icon { width: 16px; height: 16px; }
.video-generation-page .chat-scroll { flex: 1; min-height: 180px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px; }
.video-generation-page .chat-welcome { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; text-align: center; }
.video-generation-page .chat-welcome-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; color: #7a879c; background: linear-gradient(135deg,#fff,#e9edf3); }
.video-generation-page .chat-welcome h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.video-generation-page .chat-welcome p { color: var(--chat-muted); font-size: 13px; line-height: 1.65; margin: 8px 0 14px; }
.video-generation-page .prompt-suggestions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr)); gap: 8px; width: 100%; max-width: 340px; min-width: 0; box-sizing: border-box; }
.video-generation-page .prompt-suggestions button { border: 1px solid var(--chat-line); border-radius: 9px; background: #fff; color: #505966; font-size: 13px; line-height: 1.5; padding: 9px 7px; min-height: 38px; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.video-generation-page .prompt-suggestions button:hover { background: #f1f4f8; border-color: #b9c5d7; }
.video-generation-page .material-composer { flex: none; border: 1px solid var(--chat-line); border-radius: 13px; background: #fff; margin: 0 12px 12px; padding: 12px; }
.video-generation-page .attachment-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.video-generation-page .attachment-toolbar button { display: inline-flex; align-items: center; gap: 5px; background: #f6f7f9; border: 1px solid #e8ebef; border-radius: 9px; min-height: 36px; padding: 6px 8px; font-size: 13px; color: #424c5b; }
.video-generation-page .attachment-toolbar .optional { font-size: 12px; color: var(--chat-muted); }
.video-generation-page .attachment-toolbar .attachment-help { margin-left: auto; border: 0; background: transparent; padding: 4px; }
.video-generation-page .attachment-toolbar .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.video-generation-page .product-name-details { margin-top: 8px; }
.video-generation-page .product-name-details summary { font-size: 12px; color: var(--chat-muted); cursor: pointer; line-height: 24px; }
.video-generation-page .truth-field { margin-top: 5px; }
.video-generation-page .truth-field input { height: 36px; font-size: 14px; }
.video-generation-page .chat-prompt textarea { min-height: 72px; height: 72px; max-height: 150px; background: #fff; border: 0; border-radius: 6px; padding: 8px 2px; font-size: 14px; line-height: 1.65; resize: vertical; }
.video-generation-page .truth-field.chat-prompt textarea,
.video-generation-page .truth-field.chat-prompt textarea:focus { background: transparent; border: 0; outline: 0; box-shadow: none; border-radius: 0; resize: none; }
.video-generation-page .material-composer:has(textarea:focus-visible) { outline: 0; box-shadow: none; }
.video-generation-page .composer-options { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 8px; }
.video-generation-page .duration-switch { width: auto; padding: 2px; border-radius: 8px; background: #f3f4f6; gap: 2px; }
.video-generation-page .duration-switch button { min-height: 30px; padding: 4px 9px; font-size: 13px; border-radius: 6px; }
.video-generation-page .language-label { font-size: 12px; color: var(--chat-muted); }
.video-generation-page .director-submit { margin: 0 0 0 auto; min-height: 36px; width: auto; padding: 7px 12px; gap: 4px; font-size: 13px; }
.video-generation-page .director-submit [data-ui-icon] { transform: rotate(-90deg); }
.video-generation-page .director-submit .ui-icon { width: 18px; height: 18px; }
.video-generation-page .director-submit:disabled { cursor: not-allowed; color: #fff; background: #8a8f98; border-color: #8a8f98; box-shadow: none; }
.video-generation-page .cost-hint { font-size: 11px; color: #687181; margin-top: 8px; text-align: left; line-height: 1.55; }
.video-generation-page .draft-status { font-size: 12px; color: #626d7e; margin: 3px 0 0; line-height: 1.5; }
.video-generation-page .director-center-panel { border-radius: 16px; align-self: stretch; display: flex; flex-direction: column; min-width: 0; min-height: 400px; overflow: hidden; }
.video-generation-page .director-panel-top { flex: none; padding: 13px 16px; min-height: 65px; }
.video-generation-page .director-panel-top > span { font-size: 12px; color: var(--chat-muted); }
.video-generation-page .director-center-panel > [role="region"] { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.video-generation-page #result-plan { display: flex; flex-direction: column; }
.video-generation-page [hidden] { display: none !important; }
.video-generation-page .director-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px 20px; min-height: 300px; background: radial-gradient(ellipse at 50% 45%, #f0f2f6 0, #fff 65%); }
.video-generation-page .director-empty h2 { font-size: 18px; line-height: 1.6; margin: 20px 0 10px; }
.video-generation-page .director-empty p { font-size: 13px; max-width: 310px; line-height: 1.8; margin: 0; }
.video-generation-page .director-mark { width: 52px; height: 52px; background: linear-gradient(145deg,#fff,#e9edf3); border-color: #dce2ec; color: #6b7c94; }
.video-generation-page .compact-flow { gap: 8px; margin-top: 25px; }
.video-generation-page .compact-flow li { font-size: 12px; }
.video-generation-page .storyboard-example { flex: none; padding: 14px 16px; border-top: 1px solid var(--chat-line); background: #fff; }
.video-generation-page .storyboard-heading { gap: 8px; }
.video-generation-page .storyboard-heading h3 { font-size: 14px; }
.video-generation-page .storyboard-heading small { font-size: 12px; }
.video-generation-page #result-preview:not([hidden]) { display: flex; align-items: stretch; }
.video-generation-page .result-preview-empty { flex: 1; padding: 30px 20px; }
.video-generation-page .video-task-panel { grid-column: auto; padding: 14px 12px; border-radius: 16px; min-width: 0; overflow-y: auto; overscroll-behavior: contain; display: block; background: #fafbfc; }
.video-generation-page .task-panel-heading { flex-wrap: nowrap; gap: 4px; }
.video-generation-page .task-panel-heading > div { gap: 6px; }
.video-generation-page .task-panel-heading h2 { font-size: 14px; white-space: nowrap; }
.video-generation-page .task-panel-heading > div > span { padding: 2px 6px; font-size: 12px; }
.video-generation-page .task-panel-heading .disclosure-hint { font-size: 12px; }
.video-generation-page .queue-list { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.video-generation-page .queue-draft-row { position: relative; min-width: 0; border-radius: 11px; }
.video-generation-page .queue-draft-open { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 8px; padding: 6px; border: 1px solid #e2e6ec; border-radius: 11px; background: #f6f7f9; text-align: left; color: #30343a; }
.video-generation-page .queue-draft-open.is-current { border-color: #b7bec8; background: #fff; }
.video-generation-page .queue-draft-details { min-width: 0; }
.video-generation-page .queue-draft-time { display: grid; margin-top: 4px; font-size: 11px; line-height: 1.35; font-weight: 400; color: #777f8a; }
.video-generation-page .queue-draft-row::after { content: ''; position: absolute; inset: auto 1px 1px; height: 32px; border-radius: 0 0 10px 10px; background: linear-gradient(transparent,#20242b99); opacity: 0; pointer-events: none; }
.video-generation-page .queue-draft-delete { position: absolute; z-index: 1; right: 3px; bottom: 3px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 5px; border: 0; border-radius: 5px; background: transparent; color: #fff; opacity: 0; pointer-events: none; }
.video-generation-page .queue-draft-delete svg { width: 16px; height: 16px; }
.video-generation-page .queue-clear-drafts { display: block; width: 100%; min-height: 32px; margin-top: 10px; padding: 5px 8px; border: 1px solid #dce1e8; border-radius: 8px; background: #fff; color: #626d7e; font-size: 13px; line-height: 1.5; }
.video-generation-page .queue-clear-drafts:hover:not(:disabled) { border-color: #b7bec8; background: #f3f4f6; color: #30343a; }
.video-generation-page .queue-clear-drafts:disabled { color: #8a919b; background: transparent; cursor: not-allowed; }
.video-generation-page .video-task-panel.is-collapsed .queue-clear-drafts { display: none; }
.video-generation-page .queue-draft-row:is(:hover,:focus-within)::after,
.video-generation-page .queue-draft-row:is(:hover,:focus-within) .queue-draft-delete { opacity: 1; pointer-events: auto; }
.video-generation-page .queue-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.video-generation-page .queue-icon { flex: none; width: clamp(44px,calc((100% + 14px)/3),64px); height: auto; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.video-generation-page .queue-icon .ui-icon { width: 27px; height: 27px; }
.video-generation-page .queue-list b { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.video-generation-page .queue-list small { display: block; font-size: 12px; color: var(--chat-muted); line-height: 1.6; margin-top: 5px; }
.video-generation-page .queue-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 6px 22px; color: #748095; }
.video-generation-page .queue-empty strong { color: #535e6f; font-size: 13px; font-weight: 500; margin-top: 12px; }
.video-generation-page .queue-empty p, .video-generation-page .supplier-note p { font-size: 12px; color: var(--chat-muted); line-height: 1.8; margin: 7px 0 0; }
.video-generation-page .supplier-note { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--chat-line); background: none; }
.video-generation-page .chat-messages { display: grid; gap: 14px; }
.video-generation-page .chat-message { padding: 13px 14px; border: 1px solid #e0e5ec; border-radius: 12px 12px 3px 12px; background: #fff; font-size: 14px; color: #343b46; overflow-wrap: anywhere; }
.video-generation-page .chat-message small { font-size: 12px; color: var(--chat-muted); }
.video-generation-page .chat-message p { white-space: pre-wrap; margin: 6px 0; line-height: 1.7; }
.video-generation-page .chat-local-message { font-size: 12px; color: var(--chat-muted); line-height: 1.7; padding: 0 5px; }
.video-generation-page .chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; max-height: 128px; overflow-y: auto; margin: 10px 0; padding: 4px; }
.video-generation-page .chat-attachment { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--chat-line); border-radius: 8px; min-width: 0; max-width: 100%; background: #f8f9fb; }
.video-generation-page .chat-attachment img { width: 40px; height: 48px; object-fit: cover; border-radius: 5px; }
.video-generation-page .chat-attachment .attachment-name { max-width: 130px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.video-generation-page .chat-attachment small { display: block; color: var(--chat-muted); font-size: 11px; }
.video-generation-page .chat-attachment button { min-width: 28px; min-height: 28px; border: 1px solid #d7dee8; border-radius: 50%; color: #596779; background: white; }
.video-generation-page .chat-attachment audio { display: block; width: min(100%,250px); height: 32px; margin-top: 7px; }
.video-generation-page .chat-attachment.is-audio { width: 100%; flex-wrap: wrap; }
.video-generation-page .chat-attachment.is-audio > div { flex: 1; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(min-width:980px) {
  .video-generation-page .studio-header { height: 64px; padding-inline: 22px; }
  .video-generation-page .studio-shell { grid-template-columns: 92px minmax(0,1fr); min-height: calc(100dvh - 64px); }
  .video-generation-page .studio-sidebar { padding: 20px 8px; top: 64px; height: calc(100dvh - 64px); }
  .video-generation-page .studio-sidebar nav a { display: flex; flex-direction: column; gap: 7px; padding: 13px 4px; font-size: 12px; text-align: center; }
  .video-generation-page .studio-sidebar nav a > span { width: 100%; white-space: normal; }
  .video-generation-page .studio-sidebar nav i { width: 22px; }
  .video-generation-page .studio-sidebar em, .video-generation-page .sidebar-help, .video-generation-page .back-site { display: none; }
  .video-generation-page .video-workspace-grid { height: max(560px, calc(100dvh - 215px)); }
  .video-generation-page .chat-scroll { min-height: 80px; }
  .video-generation-page .material-composer { max-height: 440px; overflow-y: auto; }
  .video-generation-page .video-task-panel.is-collapsed { overflow-x: hidden; }
}
@media(min-width:1600px) { .video-generation-page .video-workspace-grid { grid-template-columns: minmax(390px,.85fr) minmax(450px,1.45fr) 220px; gap: 18px; }.video-generation-page .chat-scroll { padding: 26px; } }
@media(min-width:980px) and (max-height:850px) {
  .video-generation-page .chat-welcome-icon { display: none; }
  .video-generation-page .chat-welcome p { margin: 6px 0 10px; font-size: 12px; }
  .video-generation-page .prompt-suggestions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr)); overflow: visible; padding: 3px; }
  .video-generation-page .prompt-suggestions button { min-width: 0; white-space: normal; }
}
@media(max-width:1199px) and (min-width:980px) { .video-generation-page .studio-shell { grid-template-columns: 76px minmax(0,1fr); }.video-generation-page .studio-main { padding-inline: 12px; }.video-generation-page .video-workspace-grid { grid-template-columns: minmax(280px,1fr) minmax(260px,1.05fr) 164px; gap: 10px; }.video-generation-page .video-task-panel { padding-inline: 8px; }.video-generation-page .task-panel-heading { flex-wrap: wrap; }.video-generation-page .preview-mode-label { display: none; } }
@media(max-width:979px) {
  .video-generation-page .video-workspace-grid { grid-template-columns: minmax(0,1fr); }
  .video-generation-page .chat-scroll { min-height: 230px; max-height: 420px; }
  .video-generation-page .director-center-panel { min-height: 420px; }
  .video-generation-page .video-task-panel { grid-column: auto; }
  .video-generation-page .queue-empty { padding: 24px 10px; }
  .video-generation-page .queue-list > button { max-width: 360px; }
}
@media(max-width:760px) {
  .video-generation-page .studio-main { padding: 12px; }.video-generation-page .preview-mode-label { display: none; }.video-generation-page .chat-prompt textarea, .video-generation-page .truth-field input { font-size: 16px; }.video-generation-page .video-titlebar > div:first-child > p:last-child { display: none; }.video-generation-page .video-titlebar { margin-top: 8px; }.video-generation-page .chat-scroll { min-height: 200px; padding: 20px 15px; }.video-generation-page .scene-options { max-height: 340px; }.video-generation-page .director-empty h2 { font-size: 17px; }
}
@media(max-width:760px) {
  .video-generation-page .chat-scroll { min-height: 0; padding: 14px; }
  .video-generation-page .chat-welcome-icon, .video-generation-page .chat-welcome > p { display: none; }
  .video-generation-page .chat-welcome h2 { font-size: 14px; margin-bottom: 10px; }
  .video-generation-page .prompt-suggestions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr)); overflow: visible; padding: 3px; }
  .video-generation-page .prompt-suggestions button { min-width: 0; white-space: normal; }
}
@media(prefers-reduced-motion:reduce) { .video-generation-page * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }

/* Compact workspace without extra title/banner rows. */
.video-generation-page .video-workspace-grid { margin-top: 0; }
.video-generation-page .header-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; min-height: 36px; color: #515a66; background: transparent; border: 1px solid #e2e6ec; border-radius: 9px; font-size: 13px; }
.video-generation-page .header-action .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }
.video-generation-page .director-panel-top h2 { margin: 0; font-size: 14px; font-weight: 600; }
.video-generation-page #result-preview { flex: 1; display: flex; min-height: 0; }
.video-generation-page .result-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center,#f3f4f6,#fff 70%); }
.video-generation-page .result-preview-empty h2 { font-size: 18px; font-weight: 600; }
.video-generation-page .result-preview-empty p { max-width: 100%; font-size: 12px; line-height: 1.8; white-space: nowrap; }
.video-generation-page .result-preview-empty small { color: #747c88; }
.video-generation-page .composer-options { gap: 6px; }
.video-generation-page .settings-trigger { background: transparent; border: 0; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; min-height: 40px; color: #555e6a; font-size: 12px; white-space: nowrap; }
.video-generation-page .settings-trigger svg { flex: none; transition: transform .15s ease; }
.video-generation-page .composer-options .settings-trigger { grid-column: 1; grid-row: 1; min-width: 0; max-width: 100%; justify-self: start; }
.video-generation-page .composer-options #settings-summary { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.video-generation-page .settings-trigger[aria-expanded=true] svg { transform: rotate(180deg); }
.video-generation-page .generation-cost { grid-column: 1 / -1; grid-row: 2; min-width: 0; max-width: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: #6b7280; white-space: normal; overflow-wrap: anywhere; }
.video-generation-page .composer-options .director-submit { grid-column: 2; grid-row: 1; justify-self: end; flex: 0 0 38px; width: 38px; height: 38px; min-height: 38px; padding: 0; margin: 0; border-radius: 50%; }
.video-generation-page .director-submit svg { flex: none; }
.video-generation-page .director-submit.is-stopping-output svg { display: none; }
.video-generation-page .director-submit.is-stopping-output::after { content: ''; width: 11px; height: 11px; border-radius: 2px; background: currentColor; flex: none; }
.video-generation-page .director-example { margin: 20px 0 0; font-size: 13px; }
.video-generation-page .director-example > summary { cursor: pointer; color: #657080; padding: 10px 0; }
.video-generation-page .director-example > summary > span { font-size: 11px; background: #e9edf1; padding: 2px 5px; margin-left: 7px; border-radius: 4px; }
.video-generation-page .director-reply-example { border-top: 1px solid #e2e6ec; padding-top: 14px; font-size: 14px; line-height: 1.8; }
.video-generation-page .director-reply-example h3 { font-size: 14px; margin: 14px 0 6px; }
.video-generation-page .director-reply-example p { margin: 5px 0 12px; }
.video-generation-page .director-reply-example ul { padding-left: 19px; }
.video-generation-page .director-reply-example small,.video-generation-page .example-footnote { font-size: 12px; color: #657080; }
.video-generation-page .director-example .storyboard-timeline { display: block; }
.video-generation-page .director-example .storyboard-timeline article { display: grid; grid-template-columns: 65px 1fr; gap: 3px 8px; padding: 8px 0; border: 0; border-bottom: 1px solid #e8ebef; background: none; border-radius: 0; }
.video-generation-page .director-example .storyboard-timeline article p { grid-column: 2; margin: 0; font-size: 13px; }
.video-generation-page .generation-settings { position: fixed; inset: auto; margin: 0; width: min(330px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; border: 1px solid #dfe3e9; border-radius: 14px; background: #fff; color: #25272b; padding: 16px; box-shadow: 0 12px 36px #16243b20; font-size: 13px; }
.video-generation-page .generation-settings::backdrop { background: transparent; }
.video-generation-page .generation-settings { width: min(370px,calc(100vw - 24px)); }
.video-generation-page .settings-section-label { color: #59616d; margin-bottom: 7px; }
.video-generation-page .model-picker { position: relative; border: 1px solid #e1e5ea; border-radius: 10px; }
.video-generation-page #model-picker-trigger { display: flex; align-items: center; width:100%; gap: 8px; padding:7px 8px; cursor: pointer; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; min-height:44px; }
.video-generation-page #model-menu[hidden] { display:none!important; }
.video-generation-page .model-picker summary::-webkit-details-marker { display: none; }
.video-generation-page .model-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: #f2f3f5; color: #343840; font-size: 12px; font-weight: 700; }
.video-generation-page .seedance-mark { font-size: 0; }
.video-generation-page .seedance-mark::before { content: ''; width: 3px; height: 15px; background: currentColor; border-radius: 2px; box-shadow: -6px 3px 0 -0.5px currentColor, 6px -2px 0 -0.5px currentColor; }
.video-generation-page .model-copy { display: grid; gap: 4px; flex: 1; min-width: 0; text-align: left; }
.video-generation-page .model-copy strong { font-size: 13px; font-weight: 600; }
.video-generation-page .model-copy small { font-size: 11px; color: #737c89; font-weight: 400; }
.video-generation-page .model-chevron { margin-left: auto; }
.video-generation-page #model-picker-trigger[aria-expanded=true] .model-chevron { transform: rotate(180deg); }
.video-generation-page .model-menu { position: absolute; z-index: 3; top: calc(100% + 5px); left: -1px; right: -1px; padding: 5px; border: 1px solid #e1e5ea; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #16243b18; max-height: 285px; overflow-y: auto; }
.video-generation-page .model-option { display: flex; align-items: center; gap: 9px; padding: 10px 8px; width: 100%; border: 0; border-radius: 8px; background: transparent; color: #343840; font: inherit; }
.video-generation-page .model-option.current { background: #e9ecf0; }
.video-generation-page .model-option:disabled { opacity: 1; color: #747b85; cursor: not-allowed; }
.video-generation-page .model-soon { font-size: 10px; white-space: nowrap; color: #747b85; }
.video-generation-page .generation-settings .setting-options { margin: 12px 0; padding-bottom: 12px; border-bottom: 1px solid #eceef2; }
.video-generation-page .ratio-options label > span { height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.video-generation-page .ratio-frame { display: block; flex: none; border: 1.5px solid currentColor; border-radius: 5px; box-sizing: border-box; }
.video-generation-page .ratio-frame.portrait { width: 20px; height: 34px; }
.video-generation-page .ratio-frame.landscape { width: 40px; height: 23px; margin-block: 5.5px; }
.video-generation-page .quality-options label > span { white-space: nowrap; font-size: 12px; padding: 9px 3px; }
.video-generation-page .quality-options b { font-weight: 500; }
.video-generation-page .generation-settings .language-options input:focus-visible + span,
.video-generation-page .model-picker summary:focus-visible,
.video-generation-page .model-option:focus-visible { outline: 1px solid #858c96; outline-offset: 2px; }
.video-generation-page .settings-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.video-generation-page .settings-heading h2 { margin: 0; font-size: 14px; font-weight: 600; }
.video-generation-page .settings-heading button { width: 30px; height: 30px; border-radius: 7px; background: #f4f5f7; color: #616977; font-size: 19px; }
.video-generation-page .generation-settings label { font-size: 13px; color: #59616d; }
.video-generation-page .generation-settings select { width: 100%; margin-top: 7px; border: 1px solid #e1e5ea; border-radius: 8px; background: #f7f8fa; color: #25272b; padding: 9px; font: inherit; }
.video-generation-page .model-hint { font-size: 12px; color: #737c89; margin: 6px 0 17px; line-height: 1.5; }
.video-generation-page .duration-heading { display: flex; align-items: center; justify-content: space-between; }
.video-generation-page .duration-heading output { font-weight: 600; font-size: 13px; }
.video-generation-page #video-duration { width: 100%; height: 28px; padding: 0; margin: 7px 0 0; cursor: pointer; accent-color: #343840; }
.video-generation-page .range-bounds { display: flex; justify-content: space-between; color: #737c89; font-size: 12px; }
.video-generation-page .language-options { border: 0; padding: 0; margin: 18px 0 0; display: flex; gap: 8px; }
.video-generation-page .language-options legend { font-size: 13px; color: #59616d; margin-bottom: 8px; }
.video-generation-page .language-options label { position: relative; flex: 1; cursor: pointer; }
.video-generation-page .language-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.video-generation-page .language-options span { display: block; text-align: center; padding: 9px; border-radius: 8px; background: #f5f6f8; border: 1px solid transparent; }
.video-generation-page .language-options input:checked + span { background: #e9ecf0; border-color: #b8bec8; color: #25272b; }
.video-generation-page .language-options input:focus-visible + span { outline: 2px solid #7f99bc; outline-offset: 2px; }
.video-generation-page .settings-price-note { border-top: 1px solid #eceef2; padding-top: 12px; margin: 16px 0 0; color: #6b7280; font-size: 12px; }
/* Compact setting controls, scoped away from the workbench and upload cards. */
.video-generation-page .generation-settings { width:min(330px,calc(100vw - 24px)); padding:12px; border-radius:12px; font-size:12px; }
.video-generation-page .generation-settings .settings-heading { margin-bottom:8px; }
.video-generation-page .generation-settings .settings-heading h2 { font-size:13px; }
.video-generation-page .generation-settings .settings-heading button { width:24px; height:24px; min-height:24px; padding:0; font-size:17px; }
.video-generation-page .generation-settings :is(label,legend,.settings-section-label) { font-size:11px; }
.video-generation-page .generation-settings .model-picker summary { padding:7px 8px; gap:8px; }
.video-generation-page .generation-settings .model-mark { width:26px; height:26px; border-radius:6px; font-size:10px; }
.video-generation-page .generation-settings .seedance-mark { font-size:0; }
.video-generation-page .generation-settings .model-copy { gap:3px; }
.video-generation-page .generation-settings .model-copy strong { font-size:12px; }
.video-generation-page .generation-settings .model-copy small { font-size:10px; }
.video-generation-page .generation-settings .model-option { padding:8px 6px; min-height:48px; gap:8px; }
.video-generation-page .generation-settings .model-hint { font-size:10px; margin:5px 0 9px; }
.video-generation-page .generation-settings .language-options { gap:6px; margin:10px 0 0; }
.video-generation-page .generation-settings .setting-options { margin:8px 0; padding-bottom:8px; }
.video-generation-page .generation-settings .language-options legend { margin-bottom:5px; }
.video-generation-page .generation-settings .language-options label > span { padding:6px; font-size:11px; border-radius:7px; }
.video-generation-page .generation-settings .ratio-options label > span { height:61px; gap:4px; }
.video-generation-page .generation-settings .ratio-frame.portrait { width:16px; height:28px; }
.video-generation-page .generation-settings .ratio-frame.landscape { width:32px; height:18px; margin-block:5px; }
.video-generation-page .generation-settings .duration-heading output { font-size:11px; }
.video-generation-page .generation-settings #video-duration { height:22px; margin-top:3px; }
.video-generation-page .generation-settings .range-bounds { font-size:10px; }
.video-generation-page .generation-settings .settings-price-note { margin-top:10px; padding-top:8px; font-size:10px; }
@media(min-width:980px) { .studio-page.video-generation-page .studio-header { height: 64px; }.studio-page.video-generation-page .studio-shell { padding-top: 64px; }.video-generation-page .video-workspace-grid { height: max(520px,calc(100dvh - 98px)); }.video-generation-page .material-composer { overflow: visible; }.video-generation-page .chat-attachments { max-height: 160px; overflow-y: auto; } }
@media(max-width:1199px) and (min-width:980px) { .video-generation-page .settings-trigger { font-size: 11px; }.video-generation-page .generation-cost { font-size: 11px; }.video-generation-page .composer-options .director-submit { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px; } }
@media(max-width:760px) { .video-generation-page .studio-header { min-height: 64px; padding-inline: 12px; gap: 8px; }.video-generation-page .studio-account { gap: 6px; }.video-generation-page .header-action { width: 32px; min-height: 32px; padding: 6px; justify-content: center; }.video-generation-page .header-action-label { display: none; }.video-generation-page .studio-account .avatar-button { display: none; }.video-generation-page .generation-settings select { font-size: 16px; }.video-generation-page .settings-trigger { font-size: 12px; }.video-generation-page .generation-cost { font-size: 11px; } }

/* Compact studio v3: scene browser floats over the chat; composer stays put. */
.video-generation-page .video-config-column { position: relative; }
.video-generation-page .scene-picker-card { position: static; padding: 12px; background: transparent; border-bottom: 0; }
.video-generation-page .scene-toggle { justify-content: flex-start; align-items: center; gap: 9px; width: max-content; max-width: calc(100% - 66px); min-height: 44px; padding: 0; }
.video-generation-page .scene-toggle h2 { font-size: 14px; }
.video-generation-page .scene-current-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #e4e7eb; border-radius: 10px; background: linear-gradient(140deg,#fff,#e7ebf0); color: #58616d; }
.video-generation-page .scene-current-icon .ui-icon { width: 23px; height: 23px; }
.video-generation-page .scene-current-icon { overflow: hidden; }
.video-generation-page .scene-current-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-generation-page .scene-picker-card:not([open]) .scene-toggle-label > i { transform: rotate(-90deg); }
.video-generation-page .scene-picker-card[open] .scene-toggle-label > i { transform: none; }
.video-generation-page .new-chat-action { position: absolute; right: 14px; top: 17px; display: inline-flex; align-items: center; gap: 3px; min-height: 34px; padding: 5px; background: transparent; color: #59616d; font-size: 13px; }
.video-generation-page .new-chat-action .ui-icon { width: 16px; height: 16px; }
.video-generation-page .scene-options { position: absolute; z-index: 5; top: 68px; left: 10px; right: 10px; max-height: calc(100% - 84px); padding: 14px 12px; border: 1px solid #dfe4eb; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px #2732470d; overflow-y: auto; }
.video-generation-page .scene-browser-heading { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.video-generation-page .scene-browser-heading h3 { margin: 0; font-size: 14px; font-weight: 600; }
.video-generation-page .scene-browser-heading > span { font-size: 12px; color: #687180; }
.video-generation-page .scene-tabs { margin-top: 14px; border-bottom: 1px solid #eceef2; border-radius: 0; padding: 0; gap: 12px; }
.video-generation-page .scene-tabs button { border-radius: 0; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; font-size: 12px; font-weight: 500; }
.video-generation-page .scene-tabs button.is-active { color: #426697; background: transparent; border-bottom-color: #7897c1; }
.video-generation-page .scene-browser-note { margin: 0; }
.video-generation-page .method-grid { gap: 8px; margin-top: 10px; }
.video-generation-page .method-card { position: relative; min-height: 78px; grid-template-columns: 36px minmax(0,1fr); gap: 8px; padding: 10px; border-radius: 10px; background: #fafbfc; box-shadow: none; }
.video-generation-page .method-card > span { width: 36px; height: 42px; background: linear-gradient(135deg,#fff,#e8ecf1); border: 1px solid #e5e9ee; color: #7a8594; }
.video-generation-page .method-card strong { padding-right: 12px; font-size: 12px; line-height: 1.5; font-weight: 600; }
.studio-page.video-generation-page .method-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.5; color: #6b7480; }
.video-generation-page .method-card.is-selected { border-color: #242424; background: #fff; box-shadow: none; }
.video-generation-page .method-card.is-selected::before { content: ''; position: absolute; inset: 0; border: .5px solid #242424; border-radius: inherit; pointer-events: none; }
.video-generation-page .method-card.is-selected::after { content: '✓'; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #242424; color: #fff; font-size: 10px; line-height: 1; }
.video-generation-page .method-card.is-selected > span { color: #58616d; background: linear-gradient(135deg,#fff,#e8ecf1); border: 1px solid #e5e9ee; }
.video-generation-page .material-composer { padding: 12px; background: #fff; border-radius: 14px; }
.video-generation-page .reference-video-options { min-width: 0; margin: 10px 0; padding: 10px; border: 1px solid #d9dce0; border-radius: 10px; background: #fafafa; text-align: left; }
.reference-video-heading { display: flex; align-items: flex-start; gap: 8px; }
.reference-video-heading > div { flex: 1; min-width: 0; }
.reference-video-heading h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.reference-video-heading p, .reference-video-status { margin: 5px 0 0; color: #51555c; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.reference-video-heading button { flex: 0 0 32px; min-height: 32px; border: 1px solid #d9dce0; border-radius: 8px; background: #fff; color: #34373d; font-size: 20px; }
.reference-video-preview { display: grid; gap: 6px; min-width: 0; margin: 10px 0; }
.reference-video-preview video { display: block; width: 100%; max-width: 100%; height: auto; max-height: 180px; border-radius: 6px; background: #17191c; }
.reference-video-preview > div { display: grid; gap: 3px; min-width: 0; }
.reference-video-preview strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.reference-video-preview small { color: #51555c; font-size: 13px; }
.reference-video-uses { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; padding: 0; margin: 8px 0; border: 0; }
.reference-video-uses legend { margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.reference-video-uses label, .reference-lock { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; line-height: 1.5; }
.reference-video-uses input, .reference-lock input { flex: 0 0 auto; margin: 0; accent-color: #45494e; }
.reference-lock span { min-width: 0; overflow-wrap: anywhere; }
.reference-video-glyph { color: #59616b; font-size: 21px; }
.material-stack[data-kind="video"] { flex: 0 0 56px; width: 56px; }
.material-stack[data-kind="video"] .attachment-more { display: none; }
.video-generation-page .attachment-toolbar { flex-wrap: wrap; }
@media (max-width: 600px) {
  .reference-video-heading button { min-width: 44px; min-height: 44px; }
  .reference-video-uses label, .reference-lock { min-height: 44px; }
  .reference-video-preview video { max-height: 200px; }
}
.video-generation-page .attachment-toolbar { align-items: flex-start; gap: 4px; }
.video-generation-page .attachment-toolbar > button:not(.attachment-help) { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 10px; }
.video-generation-page .attachment-label { width: 48px; text-align: center; white-space: nowrap; font-size: 10px; line-height: 16px; }
.video-generation-page .attachment-toolbar #add-audio { position: relative; flex: 0 0 80px; width: 80px; align-items: center; }
.video-generation-page .attachment-toolbar #add-audio::before { content: ''; position: absolute; left: 0; top: 8px; width: 1px; height: 32px; background: rgba(97,107,121,.14); pointer-events: none; }
.video-generation-page #add-audio .attachment-label { width: 80px; }
.video-generation-page .attachment-tile { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e2e5e9; border-radius: 10px; background: linear-gradient(140deg,#fff,#f0f1f3); color: #89909a; }
.video-generation-page .attachment-tile .ui-icon { width: 28px; height: 28px; }
.video-generation-page .attachment-symbol { width: 30px; height: 30px; color: #a1aab5; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.video-generation-page .picture-back { fill: #eef1f4; stroke: #c0c7d0; }
.video-generation-page .picture-front { fill: #fafbfd; }
.video-generation-page .microphone-capsule { fill: #eef1f4; }
.video-generation-page .attachment-toolbar > button:hover .attachment-tile { border-color: #c4cbd3; background: #f5f7f9; }
.video-generation-page .image-tile::before { content: none; }
.video-generation-page .upload-badge { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; }
/* Compact material stacks: expand without pushing the text composer. */
.video-generation-page .material-composer { position: relative; --image-slot: 64px; }
.video-generation-page .material-composer:has(.material-stack[data-kind="image"]:is(:hover,:focus-within,.is-open)) { --image-slot: min(var(--image-expanded),calc(100% - 140px)); }
.video-generation-page .attachment-toolbar #add-images { flex: 0 0 calc(var(--image-slot) - 4px); width: calc(var(--image-slot) - 4px); white-space: nowrap; }
.video-generation-page .chat-attachments { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; height: 48px; max-height: none; overflow: visible; padding: 0; margin: 0; pointer-events: none; }
.material-stack { position: absolute; left: 0; width: 58px; height: 48px; pointer-events: auto; }
.material-stack[data-kind="audio"] { left: calc(var(--image-slot) + 16px); }
.stack-row { position: static; height: 48px; }
.video-generation-page .chat-attachment { position: absolute; left: var(--stack-offset); top: 0; width: 48px; height: 48px; min-width: 48px; padding: 0; display: block; border: 1px solid #dce0e5; border-radius: 9px; background: #f1f2f4; box-shadow: 0 1px 3px #00000010; }
.video-generation-page .chat-attachment img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.video-generation-page .chat-attachment .attachment-view { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.attachment-number { position: absolute; left: 3px; top: 3px; z-index: 2; display: grid; place-items: center; width: 15px; height: 15px; color: #fff; background: #242424c9; border-radius: 50%; font-size: 10px; pointer-events: none; }
.stack-toggle { position: absolute; top: 25px; margin-left: 24px; z-index: 3; width: 22px; height: 22px; padding: 0; border: 1px solid #ddd; border-radius: 50%; background: #fff; font-size: 11px; }
.material-stack[data-kind="image"]:is(:hover,:focus-within,.is-open) { width: calc(var(--image-slot) - 14px); }
.material-stack[data-kind="audio"]:is(:hover,:focus-within,.is-open) { width: calc(100% - var(--image-slot) - 56px); }
.material-stack:is(:hover,:focus-within,.is-open) .stack-row { position: absolute; left: 0; top: -5px; z-index: 5; width: 100%; height: 58px; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 5px 2px; background: #fff; border-radius: 9px; }
.material-stack:is(:hover,:focus-within,.is-open) .chat-attachment { position: relative; left: auto; flex: 0 0 48px; }
.material-stack:is(:hover,:focus-within,.is-open) .stack-toggle { display: none; }
.attachment-more { display: none; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 1px solid #e2e5e9; border-radius: 9px; background: #f8f9fa; color: #7a818a; font-size: 26px; font-weight: 300; }
.material-stack:is(:hover,:focus-within,.is-open) .attachment-more { display: block; }
.video-generation-page .chat-attachment .attachment-remove { position: absolute; right: -2px; top: -2px; z-index: 3; width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0; border: 1px solid #fff; background: #565c64; color: #fff; font-size: 14px; line-height: 14px; opacity: 0; }
.chat-attachment:is(:hover,:focus-within) .attachment-remove { opacity: 1 !important; }
.video-generation-page .chat-attachment .attachment-play { display: grid; place-items: center; width: 100%; height: 100%; padding: 0 0 8px; border: 0; border-radius: 8px; background: #f1f2f4; color: #6d7785; font-size: 18px; }
.audio-caption { position: absolute; bottom: 3px; left: 0; width: 100%; text-align: center; font-size: 9px; color: #687383; pointer-events: none; }
.video-generation-page .attachment-toolbar .has-files .attachment-tile { visibility: hidden; }
.material-image-preview { position: fixed; z-index: 1000; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: transparent; box-shadow: 0 8px 28px #00000022; pointer-events: none; }
.material-image-preview img { display: block; width: 100%; height: 100%; border-radius: 0; }
.video-generation-page .method-card > span:has(img) { overflow: hidden; padding: 0; }
.method-card > span img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover:none) { .video-generation-page .chat-attachment .attachment-remove { opacity: 1; } }
@media(max-width:600px) { .video-generation-page .result-preview-empty p { font-size: 10px; letter-spacing: -.3px; } }
.video-generation-page .upload-badge circle { fill: #727c89; stroke: #fff; stroke-width: 1.4; }
.video-generation-page .upload-badge path { fill: none; stroke: #fff; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.video-generation-page .attachment-toolbar .attachment-help { margin-top: 4px; }
.video-generation-page .attachment-toolbar .optional { font-size: 11px; }
.video-generation-page .product-name-details { margin-top: 5px; }
.video-generation-page .product-name-details summary { font-size: 11px; line-height: 20px; }
.video-generation-page .product-info-trigger { display: flex; align-items: center; max-width: 100%; min-width: 0; min-height: 24px; margin: 5px 0 0; padding: 0; border: 0; background: transparent; color: #616b79; font-size: 11px; font-weight: 400; }
#product-info-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-info-trigger > span:last-child { flex: none; }
.product-info-dialog { width: min(460px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; border: 1px solid #e2e5e9; border-radius: 16px; background: #fff; color: #30343a; box-shadow: 0 18px 64px #00000022; overflow-y: auto; }
.product-info-dialog::backdrop { background: #1f293755; }
.product-info-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-info-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
.product-info-heading button { width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 7px; background: #f5f6f8; color: #616b79; font-size: 22px; }
#product-info-hint { margin: 10px 0 18px; font-size: 12px; line-height: 1.6; color: #616b79; white-space: nowrap; }
.product-info-transfer-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.product-info-dialog .product-info-transfer-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid #e0e3e7; border-radius: 7px; background: #f7f8fa; color: #424a55; font: inherit; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; cursor: pointer; transition: background-color 140ms ease,border-color 140ms ease,color 140ms ease; }
.product-info-dialog .product-info-transfer-actions button svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.product-info-dialog #product-info-copy { background: #fff; }
.product-info-dialog .product-info-transfer-actions button:not(:disabled):hover { color: #252b33; background: #eef0f3; border-color: #c9cfd6; }
.product-info-dialog .product-info-transfer-actions button:not(:disabled):active { background: #e6e9ed; border-color: #bac2cc; }
.product-info-dialog .product-info-transfer-actions button:disabled { opacity: .5; cursor: wait; }
.product-info-dialog #product-info-undo { padding: 2px 0; border: 0; border-radius: 2px; background: transparent; color: #515b68; font: inherit; font-size: 12px; line-height: 24px; cursor: pointer; }
.product-info-dialog #product-info-undo:hover { color: #20242a; text-decoration: underline; text-underline-offset: 3px; }
@media(prefers-reduced-motion:reduce) { .product-info-dialog .product-info-transfer-actions button { transition: none; } }
.product-info-transfer-feedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
#product-info-transfer-status { margin: 0 0 12px; color: #515b68; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.product-info-dialog #product-info-undo { line-height: 20px; margin-bottom: 12px; }
.product-info-transfer-fallback { margin-bottom: 16px; }
.product-info-transfer-fallback label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; }
.product-info-dialog .product-info-transfer-fallback textarea { display: block; box-sizing: border-box; width: 100%; min-height: 120px; max-height: 220px; padding: 9px; resize: vertical; border: 1px solid #d9dde2; border-radius: 7px; background: #fafbfc; color: #30343a; font: inherit; font-size: 13px; line-height: 1.6; }
.product-info-transfer-fallback > div { display: flex; gap: 14px; margin-top: 5px; }
.product-info-dialog .product-info-transfer-fallback button { border: 0; padding: 4px 0; background: transparent; color: #515b68; font: inherit; font-size: 12px; cursor: pointer; }
.product-info-dialog [hidden] { display: none !important; }
.full-copy-help { margin: 14px 0; color: #616b79; font-size: 12px; line-height: 1.7; }
.full-copy-label { display: grid; gap: 8px; margin-top: 16px; font-size: 12px; }
.full-copy-label textarea { width: 100%; box-sizing: border-box; min-height: 230px; max-height: 48dvh; padding: 12px; resize: vertical; border: 1px solid #d9dde2; border-radius: 7px; background: #fafbfc; font: inherit; font-size: 14px; line-height: 1.7; color: #30343a; }
.full-copy-status { margin: 8px 0 0; color: #616b79; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.copy-audio-options { display: grid; gap: 10px; padding: 0; margin: 18px 0; border: 0; }
.copy-audio-options label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #e2e5e9; border-radius: 7px; cursor: pointer; }
.copy-audio-options input { flex: none; margin: 3px 0 0; accent-color: #252525; }
.copy-audio-options span { min-width: 0; }
.copy-audio-options strong { display: block; font-size: 13px; }
.copy-audio-options small { display: block; margin-top: 5px; color: #616b79; font-size: 12px; line-height: 1.5; }
#copy-audio-dialog .product-info-footer { gap: 10px; }
#copy-audio-cancel { color: #30343a; background: #f1f3f5; }
@media(max-width:600px) { .full-copy-label textarea { font-size: 16px; } }
@media(max-width:600px) { .product-info-dialog .product-info-transfer-fallback textarea { font-size: 16px; } }
.product-info-fields { display: grid; gap: 14px; padding: 0; }
.product-info-footer { display: flex; justify-content: flex-end; margin-top: 20px; }
.product-info-footer button { padding: 8px 22px; border: 0; border-radius: 9px; background: #242424; color: #fff; font-size: 13px; }
.video-generation-page .product-info-fields .truth-field { margin: 0; gap: 4px; }
.video-generation-page .product-info-fields :is(label > span,legend) { font-size: 11px; font-weight: 500; }
.product-selling-points { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; min-width: 0; }
.product-selling-points legend { margin-bottom: 4px; padding: 0; }
.product-selling-points small { font-size: 10px; color: #6b7480; }
.video-generation-page .product-info-fields input { width: 100%; min-width: 0; padding: 7px 9px; font-size: 12px; font-weight: 400; border: 1px solid #e2e5e9; border-radius: 7px; background: #fafbfc; }
@media(max-width:600px) { .video-generation-page .product-info-fields input { font-size: 16px; } }
.video-generation-page .chat-prompt textarea { min-height: 58px; height: 58px; }
.video-generation-page .composer-options { margin-top: 4px; }
.video-generation-page .composer-options .director-submit { flex-basis: 30px; width: 30px; height: 30px; min-height: 30px; }
.video-generation-page .director-submit svg { width: 18px; height: 18px; }
.video-generation-page .queue-chevron { flex: none; color: #737d8c; }
.video-generation-page .video-task-panel.is-collapsed .queue-chevron { transform: rotate(180deg); }
.video-generation-page .task-panel-heading { border-radius: 6px; width: 100%; padding: 0; min-height: 36px; background: transparent; color: #30343a; text-align: left; }
.video-generation-page .queue-heading-label { display: flex; align-items: center; gap: 6px; background: transparent; color: #30343a; padding: 0; }
.video-generation-page .queue-heading-label strong { font-size: 14px; font-weight: 600; }
.video-generation-page .queue-heading-label > span { font-size: 12px; }
.video-generation-page .video-task-panel.is-collapsed .queue-heading-label,
.video-generation-page .video-task-panel.is-collapsed .queue-draft-details,
.video-generation-page .video-task-panel.is-collapsed .queue-empty,
.video-generation-page .video-task-panel.is-collapsed .supplier-note { display: none; }
.video-generation-page .video-task-panel.is-collapsed .task-panel-heading { justify-content: center; }
.video-generation-page .video-task-panel.is-collapsed .queue-draft-open { justify-content: center; padding: 0; width: 42px; height: 44px; min-height: 44px; border-radius: 9px; }
.video-generation-page .video-task-panel.is-collapsed .queue-draft-delete { width: 22px; height: 22px; padding: 3px; right: 1px; bottom: 1px; }
.video-generation-page .video-task-panel.is-collapsed .queue-icon { width: 40px; height: 42px; background: #eef0f3; }
.video-generation-page .sidebar-account { margin-top: auto; padding-top: 20px; display: flex; justify-content: center; }
.video-generation-page .sidebar-account .avatar-button { width: 34px; height: 34px; font-size: 14px; flex: none; }
@media(min-width:980px) {
  .video-generation-page .studio-shell { grid-template-columns: 72px minmax(0,1fr); }
  .video-generation-page .studio-sidebar { padding-inline: 5px; }
  .video-generation-page .studio-sidebar nav a { padding-inline: 2px; }
  .video-generation-page .studio-sidebar nav a > span { white-space: nowrap; }
  .video-generation-page .video-task-panel.is-collapsed { padding: 12px 10px; }
}
@media(min-width:1600px) { .video-generation-page .video-workspace-grid { --queue-width: 190px; } }
@media(min-width:980px) and (max-width:1199px) { .video-generation-page .video-workspace-grid { --queue-width: 156px; } }
@media(max-width:979px) { .video-generation-page .video-task-panel.is-collapsed { display: flex; align-items: center; gap: 12px; }.video-generation-page .video-task-panel.is-collapsed .task-panel-heading { width: 32px; }.video-generation-page .video-task-panel.is-collapsed .queue-list { margin: 0; } }
@media(max-width:370px) { .video-generation-page .method-card { grid-template-columns: 1fr; padding: 10px 8px; }.video-generation-page .method-card > span { display: none; } }
@media(hover:none) {
  .video-generation-page .queue-draft-delete { opacity: 1; pointer-events: auto; color: #69717c; background: #f2f3f5; }
}
@media(max-width:979px) { .video-generation-page .sidebar-account { margin: 0 0 0 auto; padding: 0 8px; align-self: center; }.video-generation-page .studio-sidebar { align-items: center; } }

/* Single-line brand bar: recover height for the workspace, not smaller copy. */
.studio-page.video-generation-page .studio-header { height: 48px; min-height: 48px; padding-block: 0; }
.video-generation-page .studio-header .brand { display: inline-flex; align-items: center; gap: 10px; height: 100%; }
.video-generation-page .studio-header .brand-mark { width: 30px; height: 30px; padding: 0; }
.video-generation-page .studio-header .brand-mark img { display: block; }
.video-generation-page .studio-header .brand > span:last-child { display: flex; align-items: center; }
.video-generation-page .studio-header .brand strong { line-height: 1; font-size: 14px; }
@media(min-width:980px) {
  .studio-page.video-generation-page .studio-shell { padding-top: 48px; }
  .studio-page.video-generation-page .studio-sidebar { top: 48px; height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); min-height: 0; }
  .video-generation-page .video-workspace-grid { height: max(520px,calc(100dvh - 82px)); }
}
@media(min-width:761px) and (max-width:979px) { .studio-page.video-generation-page .studio-shell { padding-top: 48px; } }
.director-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#687384; font-size:13px; line-height:1.6; }
.director-status:has(span:not(:empty)) { padding:10px 0; }
.director-status button { border:0; border-radius:8px; background:#f1f3f6; color:#30353b; padding:6px 10px; font:inherit; cursor:pointer; }
.director-status button:hover { background:#e7ebf0; }
.director-thinking::before { content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:currentColor; vertical-align:middle; animation:director-breathe 1.8s ease-in-out infinite; }
@keyframes director-breathe { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .director-thinking::before { animation:none; opacity:.7; } }

/* The plan and preview are independent, simultaneously visible work areas. */
.video-generation-page .director-panel-top { min-height: 54px; gap: 8px; padding: 10px 14px; }
.video-generation-page .director-center-panel > [role="region"]:focus-visible,
.video-generation-page .chat-plan-link:focus-visible { outline: 1px solid #818995; outline-offset: 2px; }
.video-generation-page .director-panel-top > span { flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-generation-page #result-plan { flex: 1; min-height: 0; min-width: 0; }
.video-generation-page .director-plan-empty { flex: 1; min-width: 0; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.video-generation-page .director-plan-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.video-generation-page .director-plan-intro > span { width: 40px; height: 40px; color: #7a879c; }
.video-generation-page .director-plan-intro h2 { margin: 12px 0 8px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.video-generation-page .director-plan-intro p { margin: 0; max-width: 360px; font-size: 13px; line-height: 1.7; color: var(--chat-muted); }
.video-generation-page .director-plan-empty .director-example { margin-top: 20px; min-width: 0; }
.video-generation-page .director-plan-empty .director-example > summary { padding: 10px 0; line-height: 1.6; overflow-wrap: anywhere; }
.video-generation-page .director-plan-boundary { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--chat-muted); text-align: center; }
.video-generation-page .director-text-plan { padding: 18px 20px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; color: #343b46; }
.video-generation-page #director-script-host { min-width: 0; max-width: 100%; padding: 16px; overflow-wrap: anywhere; }
.video-generation-page .chat-plan-link { padding: 6px 0; min-height: 28px; border: 0; border-radius: 4px; color: #505966; background: transparent; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.video-generation-page .result-preview-empty p { white-space: normal; overflow-wrap: anywhere; font-size: 13px; letter-spacing: normal; }
@media(max-width:600px) {
  .video-generation-page .director-panel-top { padding-inline: 12px; }
  .video-generation-page .director-plan-empty { padding: 24px 16px; }
  .video-generation-page .director-text-plan { padding: 16px; }
}

/* Give preview more room while keeping the script readable and inputs stable. */
.video-generation-page .director-panel-top h2 { flex: none; font-size: 15px; white-space: nowrap; }
.video-generation-page .director-plan-panel { background: #fff; border: 1px solid var(--chat-line); }
.video-generation-page .video-preview-panel { background: #fafbfc; border: 1px solid var(--chat-line); }
.video-generation-page .video-preview-panel .director-panel-top { background: #fff; }
.video-generation-page .director-center-panel { min-height: 0; min-width: 0; }
.video-generation-page .director-center-panel > [role="region"] { min-height: 0; min-width: 0; scroll-padding: 18px; }
.video-generation-page .director-plan-intro { align-items: flex-start; text-align: left; }
.video-generation-page .director-plan-intro h2 { font-size: 16px; }
.video-generation-page .director-plan-intro p { max-width: 32em; }
.video-generation-page .director-plan-boundary { text-align: left; }
.video-generation-page .director-plan-empty { padding: 24px; }
.video-generation-page .director-text-plan { padding: 20px; }
.video-generation-page #director-script-host { padding: 16px; }
.video-generation-page .video-preview-panel .director-panel-top > span { white-space: normal; font-size: 11px; line-height: 1.5; }
.video-generation-page .result-preview-empty { padding: 24px 16px; }
.video-generation-page .result-preview-empty h2 { font-size: 16px; line-height: 1.6; }
.video-generation-page .result-preview-empty p { max-width: 24em; }
/* Save reference materials independently of a paid director request. */
.video-generation-page #video-material-library { display: block; }
.video-generation-page #vm-unsaved-notice:not([hidden]) { display: block; }
/* Fixed, separate destinations prevent upload order from assigning roles. */
.video-generation-page .attachment-toolbar { gap: 8px; }
.video-generation-page .attachment-toolbar :is(#add-person-images,#add-images,#add-audio) { flex: 0 0 56px; width: 56px; align-items: center; }
.video-generation-page .attachment-toolbar :is(#add-person-images,#add-images,#add-audio) .attachment-label { width: 56px; font-size: 12px; }
.video-generation-page .attachment-toolbar #add-audio::before { content: none; }
.video-generation-page .chat-attachments { left: 16px; right: 16px; }
.video-generation-page .material-stack[data-role] { left: var(--role-offset); width: 56px; }
.video-generation-page .material-stack[data-role="person"] { --role-offset: 0px; }
.video-generation-page .material-stack[data-role="product"] { --role-offset: 64px; }
.video-generation-page .material-stack[data-role="audio"] { --role-offset: 128px; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) { width: 56px; z-index: 6; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) .stack-row { left: -3px; top: -5px; width: 54px; max-width: 54px; height: auto; max-height: 218px; flex-direction: column; align-items: center; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 5px 3px; box-sizing: content-box; scrollbar-width: none; box-shadow: 0 3px 12px #00000012; }
.video-generation-page .material-stack[data-role] .stack-row::-webkit-scrollbar { display: none; }
.video-generation-page .video-workspace-grid > * { min-width: 0; }
@media(min-width:1180px) {
  .video-generation-page .studio-main { padding-inline: 16px; }
  .video-generation-page .video-workspace-grid { --chat-width: clamp(280px,23vw,360px); --queue-width: 144px; grid-template-columns: var(--chat-width) minmax(320px,.9fr) minmax(280px,1.3fr) var(--queue-width); height: max(560px,calc(100dvh - 82px)); gap: 12px; }
  .video-generation-page .video-workspace-grid:has(.video-task-panel.is-collapsed) { grid-template-columns: var(--chat-width) minmax(320px,.9fr) minmax(280px,1.3fr) 64px; }
  .video-generation-page .video-workspace-grid > * { height: 100%; min-height: 0; }
  .video-generation-page .video-task-panel { padding-inline: 10px; }
  .video-generation-page .queue-list { margin-top: 12px; }
  .video-generation-page .video-config-column { overflow-y: auto; }
  .video-generation-page .chat-scroll { flex: 1 1 120px; min-height: 80px; }
  .video-generation-page .material-composer { flex: none; }
}
@media(min-width:1600px) {
  .video-generation-page .video-workspace-grid { --queue-width: 176px; gap: 14px; }
}
@media(min-width:980px) and (max-width:1179px) {
  .video-generation-page .studio-main { padding-inline: 12px; }
  .video-generation-page .video-workspace-grid { grid-template-columns: 260px minmax(310px,.9fr) minmax(240px,1.3fr); grid-template-rows: max(540px,calc(100dvh - 220px)) auto; height: auto; gap: 12px; }
  .video-generation-page .video-task-panel { grid-column: 1 / -1; min-height: 96px; max-height: 220px; }
  .video-generation-page .video-task-panel .queue-list { grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); margin-top: 10px; }
  .video-generation-page .video-task-panel .queue-empty { padding: 8px; }
  .video-generation-page .video-task-panel.is-collapsed { display: flex; align-items: center; min-height: 64px; gap: 12px; }
  .video-generation-page .video-task-panel.is-collapsed .task-panel-heading { width: 32px; }
  .video-generation-page .video-task-panel.is-collapsed .queue-list { display: flex; flex-wrap: wrap; margin: 0; }
  .video-generation-page .video-config-column { overflow-y: auto; }
}
@media(min-width:720px) and (max-width:979px) {
  .studio-page.video-generation-page .studio-shell { height: auto; grid-template-columns: minmax(0,1fr); }
  .video-generation-page .studio-sidebar { display: flex; position: relative; top: auto; height: auto; min-height: 0; padding: 8px 12px; gap: 8px; }
  .video-generation-page .studio-sidebar nav { display: flex; gap: 6px; }
  .video-generation-page .studio-sidebar nav a { display: flex; align-items: center; gap: 6px; padding: 8px; }
  .video-generation-page .studio-sidebar nav a > span { white-space: nowrap; }
  .video-generation-page .studio-main { padding: 12px; }
  .video-generation-page .video-workspace-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); grid-template-rows: 580px 420px; height: auto; }
  .video-generation-page .video-workspace-grid > * { min-height: 0; }
  .video-generation-page .video-config-column { overflow-y: auto; }
  .video-generation-page .chat-scroll { min-height: 80px; }
  .video-generation-page .video-task-panel { grid-column: auto; }
}
@media(max-width:719px) {
  .video-generation-page .video-workspace-grid { grid-template-columns: minmax(0,1fr); height: auto; }
  .video-generation-page .director-plan-panel { height: clamp(420px,75dvh,720px); }
  .video-generation-page .video-preview-panel { height: 420px; }
  .video-generation-page .director-plan-empty { padding: 20px 16px; }
  .video-generation-page .director-text-plan { padding: 16px; }
}

/* Keep the same account control reachable in short windows and on phones. */
@media(min-width:980px) {
  .studio-page.video-generation-page .studio-sidebar { overflow: hidden; }
  .studio-page.video-generation-page .studio-sidebar nav { flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: max-content; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .studio-page.video-generation-page .sidebar-account,
  .studio-page.video-generation-page #sidebar-admin-entry { flex: none; }
}
@media(max-width:979px) {
  .studio-page.video-generation-page .sidebar-account { display: flex !important; position: fixed; z-index: 60; top: 7px; right: 12px; margin: 0; padding: 0; }
  .studio-page.video-generation-page .sidebar-account .sidebar-balance { display: none; }
  .studio-page.video-generation-page .studio-header { padding-right: 76px; }
  .studio-page.video-generation-page .personal-menu { top: 56px; bottom: auto; right: 12px; left: auto; max-height: calc(100dvh - 68px); }
}

/* Personal workspace widths change presentation only; all content keeps its DOM. */
.video-generation-page .workspace-layout-tools { display: flex; align-items: center; justify-content: flex-end; min-height: 32px; margin: 0 0 8px; }
.video-generation-page .workspace-layout-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.video-generation-page .workspace-layout-actions button { min-height: 28px; padding: 4px 10px; border: 1px solid #dce1e7; border-radius: 7px; background: #fff; color: #4c5664; font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.video-generation-page .workspace-layout-actions button:is(:hover,[aria-pressed="true"]):not(:disabled) { color: #252b33; background: #eef1f5; border-color: #bac3ce; }
.video-generation-page .workspace-layout-actions button:focus-visible { outline: 1px solid #818995; outline-offset: 2px; }
.video-generation-page .workspace-layout-actions button:disabled { color: #8a919b; background: #fff; cursor: not-allowed; }
@media(max-width:1179px) { .video-generation-page .workspace-layout-actions button:not(.workspace-clear-drafts) { display: none; } }
.video-generation-page .workspace-column-separator { position: fixed; z-index: 4; width: 12px; padding: 0; cursor: col-resize; touch-action: none; }
.video-generation-page .workspace-column-separator[hidden] { display: none; }
.video-generation-page .workspace-column-separator::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 5px; width: 2px; border-radius: 2px; background: #d9dee5; }
.video-generation-page .workspace-column-separator::after { content: ''; position: absolute; top: calc(50% - 14px); left: 3px; width: 4px; height: 28px; border-inline: 1px solid #8b95a3; border-radius: 1px; background: #f6f7f9; }
.video-generation-page .workspace-column-separator:is(:hover,:focus-visible) { border-radius: 4px; background: #e9edf2; outline: 1px solid #9aa3af; outline-offset: -1px; }
.video-generation-page.is-resizing-video-workspace,
.video-generation-page.is-resizing-video-workspace * { cursor: col-resize !important; user-select: none !important; }
@media(min-width:1180px) {
  .video-generation-page .video-workspace-grid { position: relative; height: max(560px,calc(100dvh - 122px)); }
  .video-generation-page .video-workspace-grid:is([data-workspace-view="plan"],[data-workspace-view="preview"]) { grid-template-columns: minmax(0,1fr) !important; }
  .video-generation-page .video-workspace-grid[data-workspace-view="plan"] > :not(.director-plan-panel),
  .video-generation-page .video-workspace-grid[data-workspace-view="preview"] > :not(.video-preview-panel) { display: none; }
  .video-generation-page .video-workspace-grid[data-workspace-view="plan"] .director-text-plan { max-width: 80ch; margin-inline: auto; }
  .video-generation-page .video-workspace-grid[data-workspace-view="preview"] .vg-result { width: 100%; max-width: 1000px; margin-inline: auto; }
  .video-generation-page .video-workspace-grid[data-workspace-view="preview"] video { max-height: calc(100dvh - 270px); }
  .video-generation-page .studio-main:has(.video-workspace-grid[data-workspace-compact]:not([data-workspace-compact="false"])) .workspace-layout-actions button:not(.workspace-clear-drafts) { display: none; }
  .video-generation-page .video-workspace-grid:is([data-workspace-compact="three"],[data-workspace-compact="two"],[data-workspace-compact="one"]) { height: auto; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="three"] { grid-template-columns: 260px minmax(310px,.9fr) minmax(240px,1.3fr) !important; grid-template-rows: max(540px,calc(100dvh - 220px)) auto; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="three"] > * { height: auto; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="three"] .video-task-panel { grid-column: 1 / -1; min-height: 96px; max-height: 220px; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="three"] .queue-list { grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); }
  .video-generation-page .video-workspace-grid[data-workspace-compact="two"] { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) !important; grid-template-rows: 580px 420px; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="one"] { grid-template-columns: minmax(0,1fr) !important; }
  .video-generation-page .video-workspace-grid[data-workspace-compact="one"] .director-plan-panel { height: clamp(420px,75dvh,720px); }
  .video-generation-page .video-workspace-grid[data-workspace-compact="one"] .video-preview-panel { height: 420px; }
}

/* Public examples sit beside the private result host so saved result markup stays clean. */
.video-generation-page .video-preview-panel[data-reference-visible="true"] > #result-preview { flex: 0 0 0; height: 0; overflow: hidden; }
.video-generation-page .video-preview-panel[data-reference-visible="true"] > #result-preview > .result-preview-empty { display: none; }
.video-generation-page .video-reference-preview { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 24px 8px; overflow: auto; background: #fff; }
.video-generation-page .video-reference-preview[hidden] { display: none; }
.video-generation-page .video-reference-preview:focus-visible { outline: 1px solid #929ba8; outline-offset: -3px; }
.video-generation-page .reference-sample-heading { text-align: center; }
.video-generation-page .reference-sample-heading h3 { margin: 0 0 4px; color: #20242b; font-size: 17px; font-weight: 600; line-height: 1.5; }
.video-generation-page .reference-sample-heading p { margin: 0; color: #657083; font-size: 13px; line-height: 1.6; }
.video-generation-page .reference-sample-stage { position: relative; width: 100%; max-width: clamp(240px,calc(110dvh - 300px),600px); aspect-ratio: 25 / 16; flex: none; isolation: isolate; }
.video-generation-page .reference-sample-frame { position: absolute; left: 25%; top: 50%; z-index: 2; width: 50%; margin: 0; aspect-ratio: 9 / 10; border: 0; border-radius: 16px; overflow: hidden; background: #f8f9fb; box-shadow: 0 0 0 1px #ffffffd9,0 4px 7px #25313c0c,0 20px 32px -12px #25313c45; pointer-events: none; transform: translateY(-50%) perspective(1000px) translate3d(var(--sample-shift-x,0px),calc(var(--sample-shift-y,0px) + var(--sample-lift,0px)),0) rotateX(var(--sample-rotate-x,0deg)) rotateY(var(--sample-rotate-y,0deg)); transition: transform 420ms cubic-bezier(.22,1,.36,1),box-shadow 300ms ease; }
.video-generation-page .reference-sample-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sample-position,50% 50%); }
/* Reference cards use a portrait crop, with subject-specific positioning.
   User results keep their original player and full-frame contain behavior. */
.video-generation-page .reference-sample-frame > .reference-sample-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: var(--sample-position,50% 50%); background: #f8f9fb; z-index: 0; opacity: 0; pointer-events: none; backface-visibility: hidden; }
.video-generation-page .reference-sample-frame > .reference-sample-video.is-current { z-index: 2; opacity: 1; }
.video-generation-page .reference-sample-frame > .reference-sample-video.is-outgoing { z-index: 1; opacity: 1; }
.video-generation-page .reference-sample-side { position: absolute; top: 50%; z-index: 1; width: 38%; aspect-ratio: 9 / 10; overflow: hidden; border: 0; border-radius: 13px; opacity: 1; background: #f8f9fb; box-shadow: 0 0 0 1px #ffffffd9,0 9px 18px -8px #26323f40; pointer-events: none; transform: translateY(-50%) perspective(1000px) rotateY(var(--sample-side-angle,0deg)); transition: box-shadow 300ms ease; backface-visibility: hidden; }
.video-generation-page .reference-sample-side-before { left: 12%; --sample-side-angle: 12deg; }
.video-generation-page .reference-sample-side-after { right: 12%; --sample-side-angle: -12deg; }
/* The opposite slot is repeated at the loop's two outer edges. It stays in
   the same horizontal plane; these are two views of the fourth sample. */
.video-generation-page .reference-sample-side-back { width: 26%; z-index: 0; opacity: .42; border-radius: 11px; box-shadow: 0 0 0 1px #ffffffd9,0 5px 12px -8px #26323f30; }
.video-generation-page .reference-sample-side-back-left { left: 3%; --sample-side-angle: 16deg; }
.video-generation-page .reference-sample-side-back-right { right: 3%; --sample-side-angle: -16deg; }
.video-generation-page .reference-sample-side img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sample-position,50% 50%); }
.video-generation-page .reference-sample-hit { position: absolute; z-index: 4; display: block; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: manipulation; }
.video-generation-page .reference-sample-hit-center { left: 25%; top: 50%; transform: translateY(-50%); width: 50%; aspect-ratio: 9 / 10; z-index: 3; }
.video-generation-page .reference-sample-hit-before,
.video-generation-page .reference-sample-hit-after { top: 50%; transform: translateY(-50%); width: 13%; height: 64%; }
/* Higher front/side hit areas cover the middle of this single back button,
   leaving only the two outer strips interactive without duplicate tab stops. */
.video-generation-page .reference-sample-hit-before { left: 12%; }
.video-generation-page .reference-sample-hit-after { right: 12%; }
.video-generation-page .reference-sample-hit-back { left: 3%; top: 50%; transform: translateY(-50%); width: 94%; height: 42%; z-index: 1; }
.video-generation-page .reference-sample-hit:focus-visible { outline: 1px solid #818995; outline-offset: -2px; }
.video-generation-page .reference-sample-stage[data-hover-card] .reference-sample-frame { transition-duration: 180ms,300ms; }
.video-generation-page .reference-sample-stage[data-hover-card="play"] .reference-sample-frame { box-shadow: 0 0 0 1px #ffffff,0 5px 10px #25313c12,0 24px 38px -12px #25313c50; }
.video-generation-page .reference-sample-stage[data-hover-card="previous"] .reference-sample-side-before,
.video-generation-page .reference-sample-stage[data-hover-card="next"] .reference-sample-side-after,
.video-generation-page .reference-sample-stage[data-hover-card="back"] .reference-sample-side-back { box-shadow: 0 0 0 1px #c8ced8,0 9px 20px -8px #26323f40; }
.video-generation-page .reference-sample-stage[data-sample-turn] .reference-sample-frame { overflow: visible; background: transparent; box-shadow: none; }
.video-generation-page .reference-sample-stage[data-sample-turn] .reference-sample-poster { visibility: hidden; }
.video-generation-page .reference-sample-stage[data-sample-turn] .reference-sample-video { border-radius: 16px; box-shadow: 0 0 0 1px #ffffffd9,0 14px 26px -10px #25313c40; }
.video-generation-page .reference-sample-stage[data-sample-turn="next"] .reference-sample-side-before,
.video-generation-page .reference-sample-stage[data-sample-turn="previous"] .reference-sample-side-after { visibility: hidden; }
.video-generation-page .reference-sample-feedback:not(.visually-hidden) { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 8px 10px; border: 1px solid #e3e7ee; border-radius: 6px; background: #fffffff2; color: #20242b; font-size: 13px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
/* Reuse the two-line sample heading for task progress, without a second panel.
   Keep the real receipt host collapsed while the public samples are showing. */
.video-generation-page .video-preview-panel[data-reference-progress="true"] .reference-sample-heading { max-width: 38em; box-sizing: border-box; padding: 0 16px; }
.video-generation-page .video-preview-panel[data-reference-progress="true"] .reference-sample-heading h3 { margin: 0 0 7px; color: #303945; font-size: 16px; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.video-generation-page .video-preview-panel[data-reference-progress="true"] .reference-sample-heading p { margin: 0; color: #616b79; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
/* The heading survives receipt updates. Motion only communicates waiting,
   never a fabricated percentage. The carousel stays usable throughout. */
.video-generation-page .video-preview-panel[data-reference-progress="true"] .video-reference-preview { gap: 20px; }
.video-generation-page .video-preview-panel[data-reference-progress="true"] .reference-sample-heading { order: 2; position: relative; z-index: 1; }
.video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-heading h3 { display: inline-block; font-size: 21px; font-weight: 600; letter-spacing: .4px; }
.video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::before,
.video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::after { content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 50%; width: 70%; height: 65%; top: 25%; filter: blur(24px); animation: video-wait-glow 8s ease-in-out infinite alternate; }
.video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::before { left: -5%; background: radial-gradient(ellipse,#a8c4d299,transparent 72%); }
.video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::after { right: -5%; background: radial-gradient(ellipse,#d8c4ad8c,transparent 72%); animation-direction: alternate-reverse; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
 .video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-heading h3 { color: #152735; background: linear-gradient(105deg,#152735 0%,#152735 33%,#537c98 41%,#94b6cc 47%,#94b6cc 50%,#537c98 56%,#152735 64%,#152735 100%); background-size: 210% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: video-wait-text 2.9s cubic-bezier(.4,0,.35,1) infinite; }
 .video-generation-page .video-preview-panel[data-generation-motion="queued"] .reference-sample-heading h3 { animation-duration: 4.6s; }
}
.video-generation-page .video-preview-panel[data-reference-phase="waiting"] .reference-sample-heading h3,
.video-generation-page .video-preview-panel[data-reference-phase="failed"] .reference-sample-heading h3 { color: #755d45; }
@keyframes video-wait-text { 0%,5% { background-position:100% 50%; } 85%,100% { background-position:0% 50%; } }
@keyframes video-wait-glow { from { transform:translate(-8px,5px); opacity:.65; } to { transform:translate(8px,-5px); opacity:1; } }
@media(max-width:719px) {
  .video-generation-page .video-preview-panel[data-reference-visible="true"][data-reference-progress="true"] { height: auto; min-height: 420px; }
}
.video-generation-page .video-workspace-grid[data-workspace-compact="one"] .video-preview-panel[data-reference-visible="true"][data-reference-progress="true"] { height: auto; min-height: 420px; }
@media(prefers-reduced-motion:reduce) {
  .video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-heading h3 { animation: none; background: none; -webkit-text-fill-color: currentColor; color: #253544; }
  .video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::before,
  .video-generation-page .video-preview-panel[data-reference-phase="loading"] .reference-sample-stage::after { animation: none; }
}
@media(max-width:1179px) {
  .video-generation-page .video-reference-preview { gap: 8px; padding: 16px 8px; }
  .video-generation-page .reference-sample-heading h3 { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .video-generation-page .reference-sample-frame > .reference-sample-video { transition: none; }
  .video-generation-page .reference-sample-frame { transform: translateY(-50%); transition: none; }
  .video-generation-page .reference-sample-stage .reference-sample-side { transform: translateY(-50%); transition: none; }
}

.video-generation-page .attachment-mention { display: none; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) .chat-attachment { margin-bottom: 22px; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) .attachment-mention { display: block; position: absolute; top: 49px; left: -3px; width: 54px; height: 21px; min-height: 21px; padding: 0; border: 0; background: transparent; color: #526882; font-size: 10px; white-space: nowrap; }

/* Keep removal in its own row inside an expanded material slot. */
.video-generation-page .material-stack[data-role] { --material-remove-size: 24px; --material-remove-space: 28px; }
.video-generation-page .material-stack[data-role] .attachment-remove { opacity: 0; pointer-events: none; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) .chat-attachment { margin-bottom: calc(22px + var(--material-remove-space)); }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) .attachment-remove { top: 74px; right: 0; width: var(--material-remove-size); height: var(--material-remove-size); min-width: var(--material-remove-size); min-height: var(--material-remove-size); opacity: 1; pointer-events: auto; }
@media(hover:none),(pointer:coarse) {
  .video-generation-page .material-stack[data-role] { --material-remove-size: 28px; --material-remove-space: 32px; }
  .video-generation-page .generation-settings .settings-heading button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex: none; }
}

/* Manuscript spacing is compact enough for the narrow director column. */
.video-generation-page #director-script-host .vs-document { line-height: 1.65; }
.video-generation-page #director-script-host .vs-document :is(h2,h3,h4) { margin: 20px 0 8px; }
.video-generation-page #director-script-host .vs-document > :first-child { margin-top: 0; }
.video-generation-page #director-script-host .vs-document p { margin: 0 0 10px; }
.video-generation-page #director-script-host .vs-document ul { margin: 0 0 12px; }
.video-generation-page #director-script-host .vs-document li { margin-bottom: 7px; }
.video-generation-page #director-script-host .vs-document hr { margin: 18px 0; }

/* The shared sidebar is wider than the original icon rail. Use two columns
   while its expanded navigation leaves less than a desktop workspace. */
@media(min-width:980px) and (max-width:1319px) {
 body[data-shared-navigation].video-generation-page:not(.workspace-nav-collapsed) .video-workspace-grid {grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:580px 420px;height:auto;}
 body[data-shared-navigation].video-generation-page:not(.workspace-nav-collapsed) .video-workspace-grid > * {height:auto;min-height:0;}
 body[data-shared-navigation].video-generation-page:not(.workspace-nav-collapsed) .video-config-column {overflow-y:auto;}
 body[data-shared-navigation].video-generation-page:not(.workspace-nav-collapsed) .video-task-panel {grid-column:auto;max-height:none;}
}

/* Optional creative brief stays with the existing product information dialog. */
.creative-brief-fields{border-top:1px solid #dfe2e6;margin-top:16px;padding-top:14px;min-width:0}
.creative-brief-fields summary{font-weight:600;cursor:pointer;line-height:1.6}
.creative-brief-fields p{color:#626a76;font-size:13px;line-height:1.7;margin:10px 0}
.creative-brief-fields label{display:block;margin-top:12px;font-size:14px;line-height:1.7}
.creative-brief-fields textarea{display:block;box-sizing:border-box;width:100%;min-height:80px;resize:vertical;border:1px solid #dfe2e6;border-radius:10px;background:#fff;color:inherit;font:inherit;line-height:1.6;padding:10px;margin-top:6px}
.creative-brief-fields textarea:focus-visible,.creative-brief-fields summary:focus-visible{outline:2px solid #626a76;outline-offset:3px}
@media(max-width:600px){.creative-brief-fields textarea{font-size:16px}.creative-brief-fields summary{min-height:44px;display:flex;align-items:center}}

/* Result review uses the shared native select controls and stays below playback. */
.video-result-review{border-top:1px solid #dfe2e6;margin-top:18px;padding-top:12px;max-width:100%;min-width:0;text-align:left}
.video-result-review summary{font-size:14px;font-weight:600;cursor:pointer;line-height:1.7;min-height:36px}
.video-result-review p{font-size:13px;line-height:1.7;color:#626a76;margin:8px 0;overflow-wrap:anywhere}
.video-result-review fieldset{border:0;margin:0;padding:0;min-width:0}
.video-result-review .review-item{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #edf0f2}
.video-result-review .review-item strong,.video-result-review .review-item small{display:block;font-size:13px;line-height:1.6}
.video-result-review .review-item small{color:#626a76;font-weight:400}
.video-result-review select{width:100%;min-height:40px}
.video-result-review label{font-size:13px;line-height:1.7}
.video-result-review textarea{display:block;box-sizing:border-box;width:100%;margin:6px 0 10px;min-height:80px;border:1px solid #dfe2e6;border-radius:10px;padding:9px;background:#fff;color:#20242b;resize:vertical;font:inherit;line-height:1.6}
.video-result-review textarea[hidden]{display:none}
.video-result-review button{min-height:40px;border:1px solid #dfe2e6;border-radius:10px;background:#fff;padding:7px 12px;color:#20242b;font:inherit;font-size:13px;cursor:pointer}
.video-result-review :is(.review-position,.review-listen){display:block;margin:10px 0;max-width:100%;white-space:normal}
.video-result-review button:disabled{color:#808792;background:#f4f5f6;cursor:not-allowed}
.video-result-review :is(button,select,textarea,summary):focus-visible{outline:2px solid #626a76;outline-offset:3px}
.reference-analysis [data-manual] p{font-size:12px;line-height:1.7;color:#626a76}
.reference-analysis-row{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
.reference-analysis-row button{white-space:normal;min-height:36px}
.reference-analysis-row button:last-child{justify-self:start;font-size:12px}
@media(max-width:600px){.video-result-review :is(select,textarea){font-size:16px}.video-result-review :is(summary,button,select){min-height:44px}}

.product-info-dialog #product-info-hint{white-space:normal;overflow-wrap:anywhere}

/* Compact scene cards stay in the conversation column at every column width. */
.video-generation-page .scene-picker-card[open] { flex: 0 1 auto; min-height: 0; max-height: calc(100% - 184px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.video-generation-page .scene-options { position: static; inset: auto; z-index: auto; width: 100%; max-width: 100%; max-height: none; margin: 0; padding: 14px 0 2px; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.video-generation-page .scene-browser-heading { display: block; }
.video-generation-page .scene-browser-heading h3 { font-size: 16px; line-height: 24px; }
.video-generation-page .scene-browser-heading > span { display: block; margin-top: 3px; font-size: 12px; line-height: 18px; }
.video-generation-page .scene-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-top: 10px; }
.video-generation-page .scene-tabs button { min-width: 0; min-height: 36px; padding: 7px 0; font-size: 12px; white-space: nowrap; }
.video-generation-page .method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.video-generation-page .method-card { min-width: 0; min-height: 74px; grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 9px 8px; align-items: center; border-radius: 10px; }
.video-generation-page .method-card > span { display: block; width: 32px; height: 40px; border-radius: 8px; }
.video-generation-page .method-card > div { min-width: 0; }
.video-generation-page .method-card strong { display: block; padding-right: 8px; font-size: 12px; line-height: 18px; }
.studio-page.video-generation-page .method-card small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 3px; white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; font-size: 11px; line-height: 16px; }
.video-generation-page .method-card.is-selected::after { top: 4px; right: 4px; width: 12px; height: 12px; font-size: 9px; }
.video-generation-page .video-config-column:has(.scene-picker-card[open]) .chat-welcome { display: none !important; }
.video-generation-page .video-config-column:has(.scene-picker-card[open]) .chat-scroll { min-height: 0; }
.video-generation-page .composer-options .director-submit { width: auto; min-width: 88px; min-height: 40px; height: auto; padding: 9px 10px; border-radius: 9px; }
.video-generation-page .director-submit-label,
.video-generation-page .director-submit.is-stopping-output .director-submit-label { display: inline; font-size: 12px; }
.video-generation-page .composer-action-hint { margin: 7px 0 0; color: #626a76; font-size: 12px; line-height: 1.6; }
.video-generation-page #product-info-hint { white-space: normal; overflow-wrap: anywhere; }
@media(max-width:719px),(pointer:coarse) {
 .video-generation-page .scene-tabs button { min-height: 44px; }
 .video-generation-page .composer-options .director-submit,
 .video-generation-page .settings-trigger,
 .video-generation-page .product-info-trigger,
 .video-generation-page .workspace-clear-drafts,
 .video-generation-page .vs-document-tools button,
 .product-info-dialog .product-info-heading button,
 .product-info-dialog .product-info-transfer-actions button { min-height: 44px; }
 .product-info-dialog .product-info-heading button { min-width: 44px; }
}
/* A docked browser can be narrower than a phone; keep essential controls usable. */
body.video-generation-page { min-width: 0; }
@media(max-width:319px) {
 .video-generation-page .creative-stepbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; }
 .video-generation-page .creative-stepbar li::after { display: none; }
 .video-generation-page .scene-current-icon { display: none; }
 .video-generation-page .scene-toggle { max-width: calc(100% - 44px); }
 .video-generation-page .new-chat-action { right: 10px; font-size: 12px; }
 .video-generation-page .new-chat-action > span { display: none; }
 .video-generation-page .attachment-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .video-generation-page .attachment-toolbar > button { min-width: 0; }
 .video-generation-page .composer-options .settings-trigger { grid-column: 1 / -1; grid-row: 1; }
 .video-generation-page .composer-options .generation-cost { grid-row: 2; }
 .video-generation-page .composer-options .director-submit { grid-column: 1 / -1; grid-row: 3; width: 100%; }
 .video-generation-page .scene-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .video-generation-page .method-grid { grid-template-columns: minmax(0,1fr); }
 .video-generation-page .director-panel-top { flex-wrap: wrap; }
 .video-generation-page .vs-document-tools { flex-wrap: wrap; gap: 4px; }
 .video-generation-page .remake-output-settings { grid-template-columns: minmax(0,1fr); }
 .product-info-dialog { padding: 12px; }
 .product-info-dialog .product-info-transfer-actions { flex-wrap: wrap; }
}

/* Keep the shared search/theme controls and document tools reachable in a docked narrow panel. */
@media(max-width:279px) {
 html[data-wwx-appearance] body.video-generation-page .studio-header {
  flex-wrap:wrap; height:auto; min-height:48px; padding-inline:12px;
 }
 html[data-wwx-appearance] body.video-generation-page .studio-header .wwx-experience-controls {
  order:3; flex:0 1 100%; min-width:0; margin:0; padding-bottom:4px; justify-content:flex-end;
 }
 body.video-generation-page .director-plan-panel .director-panel-top { flex-wrap:wrap; }
 body.video-generation-page .vs-document-tools { flex:0 1 100%; min-width:0; margin-left:0; }
}

/* The remake rail and its report use the same dark surfaces as the workspace. */
html[data-wwx-appearance="dark"] body.video-generation-page :is(.remake-workbench,.remake-analysis-stage) {
  background: var(--ux-surface) !important;
  color: var(--ux-ink) !important;
  border-color: var(--ux-line) !important;
}
html[data-wwx-appearance="dark"] body.video-generation-page :is(.remake-workbench,.remake-analysis-stage) :is(.reference-remake,.remake-parameter-section,.remake-fold,.reference-analysis,details) {
  color: var(--ux-ink);
  border-color: var(--ux-line) !important;
}
html[data-wwx-appearance="dark"] body.video-generation-page :is(.remake-workbench,.remake-analysis-stage) :is(button,textarea,input:not([type="checkbox"]),select) {
  background: var(--ux-inset) !important;
  color: var(--ux-ink) !important;
  border-color: var(--ux-control-line) !important;
}
html[data-wwx-appearance="dark"] body.video-generation-page :is(.remake-workbench,.remake-analysis-stage) :is(.remake-borrowing,.remake-help,.remake-steps,#remake-settings-summary) {
  color: var(--ux-muted) !important;
}
html[data-wwx-appearance="dark"] body.video-generation-page :is(.remake-workbench,.remake-analysis-stage) a { color: var(--ux-accent); }
html[data-wwx-appearance="dark"] body.video-generation-page .remake-analysis-stage>[data-remake-adapt] {
  background: var(--ux-primary) !important;
  color: var(--ux-paper) !important;
}

/* Keep remake settings inside fixed desktop/tablet rows above the preview. */
@media (min-width:720px) {
  body.video-generation-page[data-creation-mode="remake"] .video-config-column { overflow: hidden; }
  body.video-generation-page[data-creation-mode="remake"] .remake-workbench { overflow: auto; }
}

/* Keep thumbnails in the same grid row as their upload controls. Channel
   guidance may grow or wrap above this row without moving either one apart. */
.video-generation-page .material-composer {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "channel-guidance" "material-slots";
}
.video-generation-page .material-composer > * { grid-column: 1; min-width: 0; }
.video-generation-page #video-channel-media-status {
  grid-area: channel-guidance;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.video-generation-page .attachment-toolbar,
.video-generation-page .chat-attachments {
  grid-area: material-slots;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,56px)) minmax(20px,1fr);
  align-items: start;
  column-gap: 8px;
}
.video-generation-page .attachment-toolbar { position: relative; row-gap: 8px; }
.video-generation-page .attachment-toolbar > button:not(.attachment-help) {
  width: 100%;
  max-width: 56px;
  min-width: 0;
  align-items: center;
}
.video-generation-page .attachment-toolbar :is(#add-person-images,#add-images,#add-audio,#add-reference-video) {
  width: 100%;
  max-width: 56px;
}
.video-generation-page .attachment-toolbar .attachment-label { width: 100%; }
.video-generation-page .attachment-toolbar .attachment-help {
  width: 24px;
  min-width: 20px;
  margin: 4px 0 0;
  padding: 2px;
  justify-self: end;
}
.video-generation-page .chat-attachments {
  position: relative;
  inset: auto;
  align-self: start;
  height: 48px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.video-generation-page .chat-attachments[hidden] { display: none; }
.video-generation-page .material-stack[data-role] {
  position: relative;
  left: auto;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: 56px;
  height: 48px;
}
.video-generation-page .material-stack[data-role="person"] { grid-column: 1; }
.video-generation-page .material-stack[data-role="product"] { grid-column: 2; }
.video-generation-page .material-stack[data-role="audio"] { grid-column: 3; }
.video-generation-page .material-stack[data-role="reference-video"] { grid-column: 4; }
.video-generation-page .material-stack[data-role] .stack-row { margin-inline: 4px; }
.video-generation-page .material-stack[data-role]:is(:hover,:focus-within,.is-open) {
  width: 100%;
}
@media(max-width:359px) {
  .video-generation-page .attachment-toolbar,
  .video-generation-page .chat-attachments { column-gap: 4px; }
  .video-generation-page .attachment-toolbar .attachment-help { width: 20px; }
}

/* Reuse reviewed scripts in a separate draft without another AI request. */
.video-generation-page .vs-document-mode.vs-manual-editing .vs-fields { display: block !important; }
.video-generation-page .vs-document-mode #vs-manual-edit:not([hidden]) { display: inline-flex !important; }

/* Current workflow: preparation, script review, then original-task/result review. */
.video-workflow{margin:0 0 12px;padding:12px 14px;border:1px solid #dce1e6;border-radius:12px;background:var(--surface,#fff);color:var(--text,#23272c)}
.video-workflow-steps{display:flex;gap:8px;flex-wrap:wrap}.video-workflow-steps button{min-height:44px;padding:8px 15px;border:1px solid #d6dce2;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}.video-workflow-steps button[aria-pressed="true"]{background:#262b31;color:#fff;border-color:#262b31}.video-workflow button:focus-visible{outline:2px solid #526b7a;outline-offset:3px}
.video-workflow p{margin:8px 0 0;font-size:13px;line-height:1.55;overflow-wrap:anywhere}#video-settings-readout{font-weight:650}.video-cost-boundary{color:var(--text-muted,#58636e)}#video-segment-plan[data-state="blocked"]{color:var(--text-muted,#58636e)}
body[data-video-step]:not([data-video-step="compare"]) .workspace-column-separator,body[data-video-step]:not([data-video-step="compare"]) .workspace-layout-actions button:not(.workspace-clear-drafts){display:none!important}
body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid>*{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
body[data-video-step="prepare"] .director-plan-panel,body[data-video-step="review"] .video-preview-panel,body[data-video-step="result"] .director-plan-panel{display:none!important}
body[data-video-has-script="true"][data-video-step] #chat-welcome{display:none}
body[data-video-has-script="true"][data-video-step] .chat-scroll:has(#chat-messages:empty):not(:has(.draft-conflict-notice)){display:none}
body[data-video-step] .video-workspace-grid>*{overflow-wrap:anywhere}
body[data-video-step] .vg-original-task{padding:20px;line-height:1.6;overflow-wrap:anywhere}body[data-video-step] .vg-original-task button{min-height:44px;padding:10px 16px}
@media(min-width:980px){
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid{grid-template-columns:minmax(250px,.85fr) minmax(0,1.6fr) 176px!important;grid-template-rows:minmax(0,1fr)!important;height:max(560px,calc(100dvh - 365px))!important}
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid>.video-config-column{display:flex!important;flex-direction:column;height:100%!important;overflow-y:auto!important}
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid>.video-task-panel{display:block!important;max-height:none!important;height:100%!important}
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid>.director-center-panel{height:100%!important;min-height:0!important}
 body[data-video-step]:not([data-video-step="compare"]) .material-composer{margin-top:auto}
}
@media(max-width:979px){
 .video-workflow{padding:10px}.video-workflow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.video-workflow-steps button{padding:8px 6px}
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid{display:flex!important;flex-direction:column;grid-template-columns:minmax(0,1fr)!important;height:auto!important}
 body[data-video-step="prepare"] .video-preview-panel,body[data-video-step="prepare"] .video-task-panel,body[data-video-step="review"] .video-config-column,body[data-video-step="review"] .video-task-panel,body[data-video-step="result"] .video-config-column{display:none!important}
 body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid>.video-config-column{height:auto!important;overflow:visible!important}
 body[data-video-step]:not([data-video-step="compare"]) .director-center-panel{height:auto!important;min-height:420px!important;max-height:none!important}
 body[data-video-step]:not([data-video-step="compare"]) .video-task-panel{height:auto!important;max-height:320px!important}
 body[data-video-step] input,body[data-video-step] textarea,body[data-video-step] select{font-size:16px}
}
[data-wwx-appearance="dark"] .video-workflow{background:#202a33;color:#edf2f6;border-color:#45515c}[data-wwx-appearance="dark"] .video-workflow p{color:#d2dbe2}[data-wwx-appearance="dark"] .video-workflow-steps button[aria-pressed="true"]{background:#e2e8ed;color:#1b232b;border-color:#e2e8ed}

body[data-video-step]:not([data-video-step="compare"]) .task-panel-heading{min-height:44px;flex-shrink:0}.video-workflow .video-workflow-steps button[aria-pressed="true"]{font-weight:700;border-color:#6e8290!important;box-shadow:inset 0 -3px #6e8290}
body[data-video-step]:not([data-video-step="compare"]) .queue-heading-label strong{white-space:nowrap}
@media(min-width:980px){body[data-video-step]:not([data-video-step="compare"]) .video-workspace-grid:has(.video-task-panel.is-collapsed){grid-template-columns:minmax(250px,.85fr) minmax(0,1.6fr) 64px!important}}
[data-wwx-appearance="dark"] .video-workflow .video-workflow-steps button[aria-pressed="true"]{background:#dae3e9!important;color:#17212a!important}

body[data-video-step] .chat-scroll:has(.draft-conflict-notice){flex:none!important;min-height:0!important;max-height:none!important;overflow:visible!important}.draft-conflict-notice{margin:8px 12px;padding:12px;line-height:1.6;border:1px solid #a0aab3;border-radius:8px}.draft-conflict-notice button{min-height:44px;margin:8px 8px 0 0;padding:8px 12px}