/* Expand the Unit panel only when it contains a Baodan storyboard. */
.storyboard-main > .storyboard-results:has(.baodan-unit) {
  width: 100%;
  max-width: none;
}

.storyboard-results .tasks-header h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.storyboard-results .tasks-header h2 small {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* Controls stay in their original DOM scopes for selection and model updates. */
.storyboard-results:has(.baodan-unit):not(.hidden) {
  display: flex;
  --unit-toolbar-height: 40px;
  container: baodan-results / inline-size;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.storyboard-results:has(.baodan-unit) > :is(.tasks-header, .storyboard-toolbar),
#storyboard-units:has(.baodan-unit) {
  display: contents;
}

.storyboard-results:has(.baodan-unit) > .tasks-header > :first-child {
  flex-basis: 100%;
}

.storyboard-results:has(.baodan-unit) .storyboard-toolbar > label {
  order: 1;
  align-self: flex-end;
  min-height: var(--unit-toolbar-height);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

#storyboard-units:has(.baodan-unit) > .storyboard-global-model {
  order: 2;
  justify-content: flex-start;
  margin: 0 auto 0 0;
  max-width: 100%;
  gap: 8px;
}

.storyboard-results:has(.baodan-unit) .unit-transfer-header-actions {
  order: 3;
  align-self: flex-end;
}

.storyboard-results:has(.baodan-unit) .storyboard-toolbar-actions {
  order: 4;
  align-self: flex-end;
  margin: 0;
  justify-content: flex-start;
}

.storyboard-results:has(.baodan-unit) > .storyboard-plan-live,
#storyboard-units:has(.baodan-unit) > :not(.storyboard-global-model) {
  flex: 0 0 100%;
  min-width: 0;
  order: 5;
}

.storyboard-results:has(.baodan-unit) .storyboard-action-button,
.storyboard-results:has(.baodan-unit) .storyboard-global-model select {
  height: var(--unit-toolbar-height);
}

/* The native select measures its selected label, including space for the arrow. */
#storyboard-units .storyboard-global-model > label:has(#storyboard-default-duration) {
  flex: 0 0 auto;
  width: max-content;
}

#storyboard-units .storyboard-global-model #storyboard-default-duration {
  field-sizing: content;
  width: auto;
  min-width: 76px;
}

@container baodan-results (max-width: 1650px) {
  .storyboard-toolbar,
  .unit-transfer-header-actions,
  .storyboard-global-model {
    --unit-toolbar-height: 36px;
  }

  .storyboard-toolbar-actions .storyboard-action-button,
  .unit-transfer-header-actions .storyboard-action-button {
    padding-inline: 8px;
    gap: 4px;
    font-size: 12px;
  }

  #storyboard-units > .storyboard-global-model {
    width: auto;
    display: grid;
    grid-template-columns: minmax(160px, 184px) 72px max-content 72px;
  }

  #storyboard-units .storyboard-global-model > label,
  #storyboard-units .storyboard-global-model select {
    min-width: 0;
    width: 100%;
  }
}

@container baodan-results (max-width: 520px) {
  #storyboard-units > .storyboard-global-model {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #storyboard-units .storyboard-global-model > label:first-child,
  #storyboard-units .storyboard-global-model > label:has(#storyboard-default-duration) {
    grid-column: 1 / -1;
    width: 100%;
  }

  #storyboard-units .storyboard-global-model > label:has(#storyboard-default-duration) {
    grid-row: 3;
  }
}

.baodan-unit .baodan-mode-label {
  border-radius: 5px;
  padding: 2px 7px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 12px;
}

.baodan-unit .unit-video-state {
  line-height: 1.4;
}

.baodan-unit {
  container: baodan-card / inline-size;
}

#storyboard-units .storyboard-unit.baodan-unit > .unit-body {
  --copy-column: minmax(220px, 1fr);
  display: grid;
  grid-template-areas: "refs refs refs" "copy editor video";
  grid-template-columns: var(--copy-column) minmax(0, 2fr) clamp(230px, 15%, 300px) !important;
  gap: clamp(14px, 1vw, 24px);
}

.baodan-unit > .unit-body:has(.baodan-copy:not([open])) {
  --copy-column: 140px !important;
}

.baodan-unit .unit-editor {
  grid-template-columns: minmax(0, 1fr);
}

.baodan-unit .unit-reference-strip {
  grid-area: refs;
  padding: 10px 0;
  border-block: 1px solid var(--line);
}

.baodan-unit .unit-reference-label {
  width: auto;
  white-space: nowrap;
}

.baodan-unit [data-unit-add-ref] {
  flex: 0 0 auto;
}

.baodan-unit [data-unit-add-ref]:has(+ .unit-reference-picker:popover-open) {
  anchor-name: --baodan-reference-add;
}

.unit-reference-picker:popover-open {
  position: fixed;
  position-anchor: --baodan-reference-add;
  position-area: right span-bottom;
  position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block, --baodan-picker-below;
  position-visibility: anchors-visible;
  place-self: start;
  inset: auto;
  width: min(306px, calc(100vw - 16px));
  margin: 0 6px;
  padding: 0;
}

@position-try --baodan-picker-below {
  position-area: bottom span-all;
  justify-self: anchor-center;
  margin: 6px 0;
}

.baodan-unit .unit-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.baodan-unit .unit-reference-chip {
  max-width: 100%;
  flex-wrap: nowrap;
}

.baodan-unit .unit-reference-chip select {
  field-sizing: content;
}

.baodan-unit .baodan-copy {
  padding: 0;
  border: 0;
}

.baodan-unit .baodan-copy summary,
.baodan-unit .unit-editor-heading,
.baodan-unit .unit-video-heading {
  margin: 0;
  min-height: 28px;
  line-height: 28px;
  font-size: 15px;
  font-weight: 650;
}

.baodan-unit .baodan-copy summary {
  margin-bottom: 7px;
}

.baodan-unit .unit-prompt-editor,
.baodan-unit .baodan-copy textarea {
  height: clamp(420px, 52vh, 690px);
  max-height: none;
  padding: 14px;
  font-size: 14px;
  line-height: 1.75;
}

.baodan-unit .unit-video-frame,
.baodan-unit .unit-video-card:not(.unit-video-inline-notice) {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  border: 0;
}

.baodan-unit .unit-video-card:not(.pending, .failed) {
  background: linear-gradient(155deg, var(--dz-surface), var(--dz-subtle));
  border: 1px solid var(--dz-border);
  color: var(--dz-secondary);
  gap: 6px;
}

.baodan-unit .unit-video-card:not(.pending, .failed) > svg {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 4px;
  border-radius: 12px;
  color: var(--dz-accent);
  background: var(--dz-accent-soft);
  stroke-width: 1.6;
}

.baodan-unit .unit-video-card:not(.pending, .failed) > small {
  font-size: 12px;
  line-height: 1.5;
}

.baodan-unit .unit-video-suboptions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.baodan-unit .unit-model:has([data-unit-duration]) {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* On a shared row, give the editors the space left by the video settings. */
@container baodan-card (width > 810px) {
  .baodan-unit .unit-editor,
  .baodan-unit .baodan-copy[open],
  .baodan-unit .unit-video-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .baodan-unit .baodan-copy[open]::details-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .baodan-unit .baodan-copy textarea,
  .baodan-unit .unit-prompt-editor {
    flex-grow: 1;
  }

  .baodan-unit .unit-video-panel {
    gap: 7px;
  }

  .baodan-unit .unit-generate-button {
    margin-top: auto;
  }
}

@container baodan-card (max-width: 810px) {
  #storyboard-units .storyboard-unit.baodan-unit > .unit-body {
    grid-template-areas: "refs" "copy" "editor" "video";
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .baodan-unit .unit-video-panel {
    width: min(100%, 360px);
    justify-self: start;
  }

  .baodan-unit .baodan-copy textarea,
  .baodan-unit .unit-prompt-editor {
    height: 320px;
    min-height: 240px;
  }
}

.baodan-copy{min-width:0;border:1px solid var(--border-color,#dfe1e4);border-radius:8px;padding:12px}
.baodan-copy summary{cursor:pointer;font-weight:600;margin-bottom:12px}
.baodan-copy textarea{width:100%;min-height:420px;resize:vertical;font:inherit;font-size:13px;line-height:1.7;color:inherit;background:transparent;border:1px solid #8885;border-radius:6px;padding:10px;box-sizing:border-box}
.baodan-notice{font-size:12px;line-height:1.6;color:#b7791f;white-space:pre-wrap;overflow-wrap:anywhere}
.baodan-actions{display:flex;flex-wrap:wrap;gap:8px}
.baodan-unit [data-unit-prompt]:empty::before{content:attr(data-placeholder);color:var(--muted-color,#796f64);pointer-events:none}

#storyboard-units .baodan-unit .baodan-copy{grid-area:copy}