/* styles/seedance-api.css — "Generate via API" (src/SeedanceApiPanel.jsx), 11 Oct 2026.
   Shown only once the project has a BytePlus ModelArk key. Every row has a fixed height and the job list
   a fixed height that scrolls, so no click inside the panel moves anything below it (invariant #20).
   Colours: tokens only. */
.sdapi-panel {
  margin-top: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--leaf) 6%, transparent);
}
.sdapi-row { display: flex; align-items: center; gap: 8px; height: 30px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.sdapi-title { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.sdapi-row .gen-swap-toggle { align-self: center; flex: 0 0 auto; }
.sdapi-seg-off { opacity: .35; cursor: default; }
.sdapi-secs { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-11); color: var(--ink-muted); flex: 0 0 auto; }
.sdapi-secs input {
  width: 46px; height: 26px; font: inherit; font-size: var(--fs-12); text-align: center; color: var(--ink);
  background: transparent; border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); border-radius: var(--r-sm);
}
.sdapi-switch, .sdapi-btn {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02); white-space: nowrap;
  height: 28px; padding: 0 12px; border-radius: var(--r-round); cursor: pointer; color: var(--ink); flex: 0 0 auto;
  background: transparent; border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
}
.sdapi-switch { width: 84px; }
.sdapi-switch.is-on, .sdapi-btn--primary { background: color-mix(in srgb, var(--leaf) 32%, transparent); border-color: color-mix(in srgb, var(--leaf) 65%, transparent); }
.sdapi-btn:hover:not(:disabled), .sdapi-switch:hover { background: color-mix(in srgb, var(--leaf) 18%, transparent); }
.sdapi-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--leaf) 42%, transparent); }
.sdapi-btn:disabled { opacity: .45; cursor: default; }
.sdapi-btn--danger { border-color: color-mix(in srgb, var(--danger-2) 60%, transparent); color: var(--danger-2); }
.sdapi-btn--small { height: 24px; padding: 0 10px; font-size: var(--fs-10-5); }
.sdapi-select {
  height: 28px; max-width: 170px; min-width: 0; font: inherit; font-size: var(--fs-11); color: var(--ink); flex: 0 1 auto;
  background: transparent; border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); border-radius: var(--r-round); padding: 0 8px;
}
.sdapi-line { flex: 1 1 auto; min-width: 0; font-size: var(--fs-11); line-height: 28px; height: 28px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdapi-line--ok { color: var(--ok); }
.sdapi-line--bad { color: var(--danger-2); }
.sdapi-jobs {
  height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent); padding-top: 6px;
}
.sdapi-empty { font-size: var(--fs-11); color: var(--ink-muted); line-height: 36px; }
.sdapi-job { display: flex; align-items: center; gap: 8px; height: 36px; flex: 0 0 36px; min-width: 0; }
.sdapi-thumb {
  width: 48px; height: 27px; flex: 0 0 48px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-11); color: var(--ink);
  background: color-mix(in srgb, var(--ink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
}
.sdapi-thumb.is-empty, .sdapi-thumb:disabled { cursor: default; background: transparent; }
.sdapi-chip {
  flex: 0 0 auto; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-02); padding: 2px 8px; border-radius: var(--r-round); white-space: nowrap;
  border: 1px solid currentColor;
}
.sdapi-chip--ok { color: var(--ok); }
.sdapi-chip--run { color: var(--ink); }
.sdapi-chip--bad { color: var(--danger-2); }
.sdapi-chip--off { color: var(--ink-muted); }
.sdapi-meta { flex: 1 1 auto; min-width: 0; font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdapi-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.sdapi-ask { font-size: var(--fs-11); color: var(--ink); white-space: nowrap; }
.sdapi-player-back { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.sdapi-player { width: min(860px, 92vw); border-radius: var(--r-sm); overflow: hidden; background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); }
.sdapi-player video { display: block; width: 100%; height: auto; background: var(--ink); }
.sdapi-player-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: var(--fs-11); color: var(--ink); }