@import url("/components/reference-rail/reference-rail.css?v=20261022-v5b");
@import url("/components/loading/workspace-readiness.css?copy=20261023-acceptance&repair=20261028-guest-agent");
.video-workspace {
  display: grid;
  gap: var(--sc-space-8);
  padding: clamp(var(--sc-space-5), 4vw, var(--sc-space-10));
}

.video-workspace__heading {
  display: grid;
  gap: var(--sc-space-3);
}

.video-workspace__title,
.video-workspace__subtitle,
.video-workspace__tasks h3,
.video-workspace__task p {
  margin: 0;
}

.video-workspace__title {
  color: var(--sc-color-ink);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: var(--sc-leading-tight);
}

.video-workspace__subtitle {
  max-width: 64ch;
  color: var(--sc-color-muted);
  line-height: var(--sc-leading-copy);
}

.video-workspace__form,
.video-workspace__tasks {
  display: grid;
  gap: var(--sc-space-6);
}

.video-workspace__uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-space-5);
}

.video-workspace__upload {
  min-width: 0;
}

/* The catalog owns requiredness, capacity and upload shape as one snapshot. */
[data-video-reference-config] { border-radius: var(--sc-radius-sm); }
/* Compact mobile rails have no surface border; their configuration overlay
   still needs its own rounded paint while the model is unknown. */
.video-workspace [data-video-reference-config][data-loading-state="loading"]::after { border-radius: var(--sc-radius-sm); }
.video-workspace__upload[data-video-reference-config]:not([data-loading-state="ready"]) {
  overflow: hidden;
}
.video-workspace__upload[data-video-reference-config]:not([data-loading-state="ready"]) > .video-workspace__upload-button {
  height: 128px;
  min-height: 128px;
}
[data-video-reference-label] { min-height: 1.5em; }
[data-video-reference-config][data-loading-state="error"],
[data-video-reference-label][data-loading-state="error"] {
  position: relative;
  pointer-events: none;
  color: transparent;
}
[data-video-reference-config][data-loading-state="error"] > * { visibility: hidden; }
[data-video-reference-config][data-loading-state="error"]::after,
[data-video-reference-label][data-loading-state="error"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sc-color-control);
  animation: none;
}

.video-reference-rail {
  --video-reference-size: 96px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sc-space-2);
  min-width: 0;
  padding: var(--sc-space-2);
  border-radius: var(--sc-radius-md);
  background: var(--sc-color-control);
}
.video-reference-rail.is-dragging { outline: 2px solid var(--sc-color-brand-500); }
.video-reference-rail__items { display: contents; }
.video-reference-rail__item { position: relative; width: 100%; min-width: 0; }
.video-reference-rail__preview {
  display: block; width: 100%; height: 176px; padding: 0; overflow: hidden;
  border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md);
  background: var(--sc-color-surface-muted); cursor: pointer;
}
.video-reference-rail__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-reference-rail__remove {
  position: absolute; top: 0; right: 0; display: grid; place-items: center;
  width: var(--sc-control-height); height: var(--sc-control-height); padding: 0;
  border: 0; border-radius: var(--sc-radius-md); color: var(--sc-color-ink);
  background: color-mix(in srgb, var(--sc-color-canvas) 70%, transparent);
  font-size: 1.25rem; cursor: pointer;
}
.video-reference-rail button:focus-visible { outline: 2px solid var(--sc-color-brand-500); outline-offset: 2px; }
.video-reference-rail__count { flex-basis: 100%; color: var(--sc-color-muted); text-align: right; font-size: .75rem; }
.video-reference-rail--multiple .video-reference-rail__item { width: var(--video-reference-size); }
.video-reference-rail--multiple .video-reference-rail__preview { height: var(--video-reference-size); }
.video-workspace .video-reference-rail--multiple [data-video-file-trigger],
.creator-page .creator-split .video-reference-rail--multiple [data-video-file-trigger] {
  flex: 0 0 var(--video-reference-size); width: var(--video-reference-size); height: var(--video-reference-size); min-height: var(--video-reference-size); margin: 0;
  border: 1px dashed var(--sc-color-border-strong); border-radius: var(--sc-radius-md);
}
.video-reference-rail--multiple [data-video-upload-placeholder] { padding: var(--sc-space-2); }
.video-reference-rail--multiple [data-video-upload-placeholder] > :not(.video-workspace__upload-icon):not(svg) { display: none; }
.video-reference-rail__add-label { display: none; }
.video-reference-rail__add-icon { display: none; color: var(--sc-color-brand-500); font-size: 1.75rem; }
.video-reference-rail--multiple .video-reference-rail__add-icon { display: block; }
.video-reference-rail--multiple [data-video-upload-placeholder] { display: none; }
.video-reference-rail [hidden] { display: none !important; }
.studio-handoff--composer.video-workspace--composer .home-chat.home-chat--responsive .home-chat__attachments {
  flex-direction: column;
  align-items: stretch;
}
.studio-handoff--composer.video-workspace--composer .video-reference-rail { width: 100%; box-sizing: border-box; }
.studio-handoff--composer.video-workspace--composer .home-chat.home-chat--responsive .video-reference-rail--multiple:not([data-reference-rail]) .video-composer__reference {
  flex: 0 0 var(--video-reference-size); width: var(--video-reference-size); min-width: var(--video-reference-size); max-width: var(--video-reference-size); height: var(--video-reference-size); min-height: var(--video-reference-size);
}

@media (max-width: 767px) { .video-reference-rail { --video-reference-size: 80px; } }

.video-workspace__upload-button {
  display: grid;
  width: 100%;
  min-height: 17rem;
  overflow: hidden;
  place-items: center;
  padding: 0;
  border: 1px dashed var(--sc-color-border-strong);
  border-radius: var(--sc-radius-xl);
  color: var(--sc-color-text);
  background: var(--sc-color-surface-muted);
  cursor: pointer;
  transition: border-color var(--sc-motion-fast) var(--sc-ease), background var(--sc-motion-fast) var(--sc-ease), box-shadow var(--sc-motion-fast) var(--sc-ease);
}

.video-workspace__upload-button:hover {
  border-color: var(--sc-color-brand-500);
  background: var(--sc-color-brand-50);
}

.video-workspace__upload-button:focus-visible {
  outline: none;
  border-color: var(--sc-color-brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-color-brand-500) 16%, transparent);
}

.video-workspace__upload-placeholder {
  display: grid;
  place-items: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-6);
  text-align: center;
}

.video-workspace__upload-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--sc-radius-pill);
  color: var(--sc-color-brand-700);
  background: var(--sc-color-brand-100);
  font-size: 1.5rem;
}

.video-workspace__upload-label {
  font-size: 1rem;
  font-weight: 750;
}

.video-workspace__upload-hint,
.video-workspace__file-name {
  color: var(--sc-color-muted);
  font-size: 0.8125rem;
}

.video-workspace__upload-preview {
  width: 100%;
  height: 100%;
  min-height: 17rem;
  object-fit: cover;
}

.video-workspace__upload-preview[hidden],
.video-workspace__upload-placeholder[hidden],
.video-workspace__file-name[hidden] {
  display: none;
}

.video-workspace__file-name {
  margin: var(--sc-space-2) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-workspace__settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--sc-space-4);
}

.video-workspace__field {
  min-width: 0;
}

.video-workspace__readiness {
  margin: 0;
}

.video-workspace__file-help,
.video-workspace__readiness:empty {
  display: none;
}

.video-workspace__action {
  display: flex;
  justify-content: flex-end;
}

.video-workspace__action .sc-button {
  min-width: 14rem;
}

.video-workspace__submit-separator {
  opacity: 0.7;
}

.video-workspace__tasks {
  padding-top: var(--sc-space-6);
  border-top: 1px solid var(--sc-color-border);
}

.video-workspace__empty {
  margin: 0;
  color: var(--sc-color-muted);
}

[data-video-task-list] {
  display: grid;
  gap: var(--sc-space-4);
}

.video-workspace__task {
  display: grid;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
}

.video-workspace__task[data-state="error"] {
  border-color: color-mix(in srgb, var(--sc-color-danger) 36%, var(--sc-color-border));
}

.video-workspace__task-status {
  color: var(--sc-color-text);
  font-weight: 750;
}

.video-workspace__task-meta {
  color: var(--sc-color-muted);
  font-size: 0.8125rem;
}

.video-workspace__task-skeleton,
.video-workspace__result-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--sc-radius-md);
  background: var(--sc-color-surface-muted);
}

.video-workspace__task-skeleton {
  background: linear-gradient(90deg, var(--sc-color-surface-muted), var(--sc-color-surface), var(--sc-color-surface-muted));
  background-size: 200% 100%;
  animation: video-workspace-shimmer 1.4s linear infinite;
}

.video-workspace__result-video {
  display: block;
  object-fit: contain;
}

/* The task owns its frame; media metadata and state copy cannot resize it. */
.video-workspace__task .video-workspace__preview {
  box-sizing: border-box; position: relative; width: 100%; min-width: 0;
  min-height: 9rem; aspect-ratio: var(--video-task-aspect-ratio, 16 / 9);
  border-radius: var(--sc-radius-md); background: var(--sc-color-surface-muted);
}
.video-workspace__task .video-workspace__preview > :is(.video-workspace__result-video, .video-workspace__task-skeleton) {
  box-sizing: border-box; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  aspect-ratio: auto; margin: 0; padding: 12px;
}
.video-workspace__task .video-workspace__preview > .video-workspace__result-video { padding: 0; }
.video-workspace__task .video-workspace__preview--failed {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 12px; text-align: center;
}
.video-workspace__task .video-workspace__failure-label {
  margin: 0; max-width: 100%; color: var(--sc-color-muted);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.video-workspace__task .video-workspace__preview--failed .sc-button {
  box-sizing: border-box; flex: 0 0 auto; width: auto; max-width: 100%; min-height: 44px;
  padding: 8px 12px; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
}

.video-workspace__task-actions,
.video-workspace__history-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-3);
  align-items: center;
}

.video-workspace__history-pagination {
  justify-content: center;
}

@keyframes video-workspace-shimmer {
  to { background-position: -200% 0; }
}

@media (max-width: 700px) {
  .video-workspace {
    gap: var(--sc-space-6);
    padding: var(--sc-space-4);
  }

  .video-workspace__uploads,
  .video-workspace__settings {
    grid-template-columns: 1fr;
  }

  .video-workspace__upload-button,
  .video-workspace__upload-preview {
    min-height: 13rem;
  }

  .video-workspace__action,
  .video-workspace__action .sc-button,
  .video-workspace__task-actions .sc-button,
  .video-workspace__task-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-workspace__upload-button {
    transition: none;
  }

  .video-workspace__task-skeleton {
    animation: none;
  }
}

.video-workspace { position:relative; padding:var(--sc-space-5); gap:var(--sc-space-5); }
.video-workspace__heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.video-workspace__form { gap:var(--sc-space-3); }
.video-workspace__uploads { gap:var(--sc-space-3); }
.video-workspace__upload-button { min-height:0; height:clamp(8rem,22vh,12rem); }
.video-workspace__upload-preview { min-height:0; height:100%; object-fit:contain; }
.video-workspace__upload-placeholder { padding:var(--sc-space-3); gap:var(--sc-space-1); }
.video-workspace__upload-icon { width:2rem; height:2rem; }
.video-workspace__upload > .sc-help { margin-block:var(--sc-space-2) 0; font-size:.75rem; }
.video-workspace__settings { gap:var(--sc-space-3); }
.video-workspace__field { gap:var(--sc-space-1); }
@media(max-width:720px) {
  .video-workspace { padding:var(--sc-space-3); }
  .video-workspace__uploads,.video-workspace__settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-workspace__upload-button { height:8rem; }
  .video-workspace__upload-placeholder { padding:var(--sc-space-2); }
  .video-workspace__upload-hint { font-size:.6875rem; }
  .video-workspace__action .sc-button { width:100%; min-width:0; }
}

/* Shared controls must retain native hidden semantics despite button display rules. */
.video-workspace [hidden] { display: none !important; }