/* ===== Workflow polish: upload, video/edit ergonomics, mobile and final rhythm ===== */

/* Product typography floor: avoid tiny “debug tool” text in the creator surface. */
.workspace-inspector .lab,
.workspace-inspector .mp-label { font-size: 12px !important; line-height: 1.35; }
.workspace-inspector .hint,
.workspace-inspector .mp-field-help { font-size: 11px !important; line-height: 1.5; }
.workspace-preview-title > span { font-size: 15px !important; }
.workspace-preview-title > strong { font-size: 11px !important; }
.workspace-rail-label { font-size: 10px !important; }
.workspace-composer-input { font-size: 13px !important; }

/* ===== Upload cards ===== */
.workspace-inspector-panel > .grid2 { grid-template-columns: 1fr !important; gap: 10px !important; }
.studio-upload-field { margin: 0 2px 12px !important; }
.studio-upload-legacy-label,
.studio-upload-native { display: none !important; }
.studio-upload-card {
  position: relative;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--border-light) 78%, var(--accent) 18%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--studio-soft) 92%, var(--accent) 2%);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.studio-upload-card:hover,
.studio-upload-card.is-dragover {
  border-color: rgba(99,102,241,.46);
  background: color-mix(in srgb, var(--studio-soft) 88%, var(--accent) 7%);
}
.studio-upload-card.is-dragover { transform: translateY(-1px); }
.studio-upload-zone {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.studio-upload-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(99,102,241,.10);
  color: var(--accent);
}
.studio-upload-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-upload-copy { min-width: 0; display: grid; gap: 3px; }
.studio-upload-copy strong { font-size: 12px; line-height: 1.25; }
.studio-upload-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.studio-upload-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.studio-upload-preview {
  display: none;
  margin: 0 10px 10px !important;
  max-height: 210px !important;
  overflow: hidden;
  border-radius: 11px;
  background: color-mix(in srgb, var(--studio-soft) 86%, #000 4%);
}
.studio-upload-preview img {
  display: block;
  width: 100%;
  max-height: 210px !important;
  object-fit: contain;
}
.studio-upload-card.has-file .studio-upload-preview { display: grid; place-items: center; }
.studio-upload-card.has-file .studio-upload-zone { min-height: 58px; padding-bottom: 9px; }
.studio-upload-clear {
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 2;
  display: none;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.studio-upload-card.has-file .studio-upload-clear { display: inline-flex; align-items: center; }
.studio-upload-clear:hover { color: var(--text); }
.studio-upload-stack {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
}
.studio-upload-stack .studio-upload-field { margin: 0 !important; }

/* ===== Secondary prompt fields ===== */
.studio-secondary-field {
  margin: 10px 2px 12px;
  padding: 9px 0 0;
  border-top: 1px solid var(--border-light);
}
.studio-secondary-field > summary {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
}
.studio-secondary-field-body { padding-top: 9px; }
.studio-secondary-field-body .lab { margin-bottom: 6px !important; }
.studio-secondary-field-body .textarea { min-height: 72px !important; font-size: 12px !important; }

/* ===== Duration stepper ===== */
.studio-duration-wrap {
  display: grid;
  grid-template-columns: 36px minmax(68px,1fr) 36px;
  width: min(176px,100%);
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--input-bg);
}
.studio-duration-wrap .mp-control {
  min-height: 38px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  appearance: textfield;
}
.studio-duration-wrap .mp-control::-webkit-outer-spin-button,
.studio-duration-wrap .mp-control::-webkit-inner-spin-button { margin: 0; appearance: none; }
.studio-duration-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.studio-duration-button:hover { background: var(--btn-bg); color: var(--text); }
.studio-human-duration {
  display: grid;
  grid-template-columns: 38px minmax(72px,1fr) 38px;
  width: min(190px,100%);
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--input-bg);
}
.studio-human-duration button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.studio-human-duration button:hover { background: var(--btn-bg); color: var(--text); }
.studio-human-duration strong {
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 13px;
}
.studio-duration-help {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.studio-technical-primary-hidden { display: none !important; }

/* Wan presents creator-friendly ratio + quality instead of raw dimensions/preset strings. */
.studio-wan-format-field {
  display: grid;
  gap: 12px;
}
.studio-friendly-control { display: grid; gap: 6px; }
.studio-friendly-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
.studio-friendly-option {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--studio-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}
.studio-friendly-option:hover { border-color: rgba(99,102,241,.30); color: var(--text); }
.studio-friendly-option.is-active {
  border-color: rgba(99,102,241,.44);
  background: rgba(99,102,241,.10);
  color: var(--accent);
}

/* Cleaner checkbox chips for edit task types. */
.workspace-inspector .mp-checks { gap: 6px !important; }
.workspace-inspector .mp-check {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: var(--studio-soft);
  font-size: 10px !important;
}
.workspace-inspector .mp-check:has(input:checked) {
  border-color: rgba(99,102,241,.34);
  background: rgba(99,102,241,.09);
  color: var(--accent);
}

/* ===== Canvas ownership and hierarchy ===== */
.studio-model-summary { display: none !important; }
.studio-model-developer-tools {
  margin: 12px 2px 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.workspace-output-card .output > .item[hidden] { display: none !important; }
.studio-media-card > h3,
.studio-media-card > .meta { display: none !important; }
.studio-media-native-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  margin: 0 !important;
  opacity: 0;
  transition: opacity .15s ease;
}
.studio-media-card:hover .studio-media-native-actions,
.studio-media-card:focus-within .studio-media-native-actions,
.studio-media-native-actions[open] { opacity: 1; }
.studio-media-native-actions > summary {
  display: grid;
  width: 30px !important;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(18,18,22,.58);
  color: transparent;
  font-size: 0 !important;
  backdrop-filter: blur(10px);
}
.studio-media-native-actions > summary::after {
  content: "•••";
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
}
.studio-media-native-actions > .studio-media-native-body {
  position: absolute;
  top: 36px;
  right: 0;
  width: max-content;
  max-width: min(320px,70vw);
  padding: 7px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* Persistent progress belongs to the generate button + Task drawer, not a global toast. */
.studio-topbar .status,
.workspace-ready .global-loading { display: none !important; }
.workspace-generate-button.is-generating,
.workspace-generate-button:disabled {
  cursor: progress;
  opacity: .82;
}

/* Desktop: Inspector is a full-height independent rail; Composer belongs only to Canvas. */
@media (min-width: 901px) {
  .workspace-inspector {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
  }
  .workspace-inspector-host {
    height: calc(100% - 56px) !important;
    max-height: none !important;
  }
  .workspace-composer {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* ===== Final interaction rhythm ===== */
.workspace-rail-button,
.workspace-preview-action,
.workspace-generate-button,
.studio-model-trigger,
.studio-choice-button,
.studio-settings-link,
.studio-theme-choice { transition-duration: .15s !important; }
.workspace-generate-button:active,
.studio-choice-button:active,
.studio-model-trigger:active { transform: translateY(1px); }

/* ===== Mobile-specific creator ergonomics ===== */
@media (max-width: 900px) {
  .container.workspace-ready { padding: 7px 7px 118px !important; }
  .workspace-shell { grid-template-rows: auto minmax(440px,auto) auto !important; }
  .workspace-rail { top: 58px !important; border-radius: 12px !important; }
  .workspace-rail-button { min-height: 44px !important; }
  .workspace-main { min-height: 440px; }
  .workspace-output-card { min-height: 440px !important; border-radius: 14px !important; }
  .workspace-preview-empty { min-height: 330px !important; }

  .workspace-inspector {
    max-height: 78dvh !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .workspace-inspector-head { min-height: 52px !important; }
  .workspace-inspector-host { max-height: calc(78dvh - 52px) !important; padding: 10px 11px 16px !important; }

  .workspace-composer-top {
    display: flex !important;
    min-height: 28px;
    margin: 0 1px 4px !important;
    justify-content: flex-end !important;
  }
  .workspace-composer-caption { display: none !important; }
  .studio-inspector-toggle {
    display: inline-flex !important;
    min-height: 28px !important;
    padding: 3px 9px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }
  .workspace-composer { left: 7px !important; right: 7px !important; bottom: max(7px, env(safe-area-inset-bottom)) !important; }
  .workspace-composer-input { min-height: 48px !important; max-height: 90px !important; }
  .workspace-generate-button { height: 44px !important; }
  .studio-upload-zone { min-height: 70px; grid-template-columns: 34px minmax(0,1fr); }
  .studio-upload-badge { display: none; }
  .studio-upload-icon { width: 34px; height: 34px; }
  .studio-upload-preview { max-height: 180px !important; }
  .studio-upload-preview img { max-height: 180px !important; }
  .studio-media-native-actions { opacity: 1; }
}

@media (max-width: 560px) {
  .studio-topbar .topbar-main { min-height: 52px !important; }
  .studio-topbar .h1 { max-width: 52vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .workspace-rail { top: 54px !important; }
  .workspace-rail-label { font-size: 9px !important; }
  .workspace-preview-title > span { font-size: 14px !important; }
  .workspace-preview-title > strong { font-size: 10px !important; }
  .workspace-composer-slot { grid-template-columns: minmax(0,1fr) 82px !important; }
  .workspace-generate-button { width: 82px !important; min-width: 82px !important; padding: 0 8px !important; }
  .studio-choice-grid,
  .studio-friendly-options { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .studio-upload-copy span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-rail-button,
  .workspace-preview-action,
  .workspace-generate-button,
  .studio-model-trigger,
  .studio-choice-button,
  .studio-settings-link,
  .studio-theme-choice,
  .studio-upload-card,
  .studio-friendly-option { transition: none !important; }
}