/**
 * 制作台主题跟随 · 工具箱视觉层
 * - body.studio-embed：嵌入制作台时隐藏独立 hero
 * - html[data-igs-theme]：与 igs-ui-theme 同步
 * - 供应商条 / 面板 / 提示条统一纸感或夜色
 */

body.studio-embed,
body.tb-themed {
  --tb-serif: var(--serif, "Noto Serif SC", "Songti SC", serif);
  --tb-sans: var(--font);
  font-family: var(--tb-sans);
  transition: background 0.35s ease, color 0.25s ease;
}

body.studio-embed .hero {
  display: none !important;
}

/* —— 主题 accent 微调（昼） —— */
html[data-igs-theme="paper"] body:not(.tb-theme-dark) {
  --accent: #1f6b58;
  --accent2: #c45c28;
}
html[data-igs-theme="celadon"] body:not(.tb-theme-dark) {
  --accent: #2a7a72;
  --accent2: #b06b3a;
  --bg0: #e8f1ef;
  --bg1: #dce8e4;
  --surface-side: #e4eeeb;
}
html[data-igs-theme="snow"] body:not(.tb-theme-dark) {
  --accent: #3888a8;
  --accent2: #5088a8;
  --bg0: #f6faff;
  --bg1: #e8f2fa;
  --surface-side: #eef5fb;
}

/* —— 主题 accent 微调（夜） —— */
html[data-igs-theme="ink"] body.tb-theme-dark {
  --accent: #5cbc9a;
  --accent2: #e09a62;
}
html[data-igs-theme="cinnabar"] body.tb-theme-dark {
  --accent: #c45c48;
  --accent2: #d4a45a;
  --bg0: #241e1a;
  --bg1: #1a1410;
}
html[data-igs-theme="firefly"] body.tb-theme-dark {
  --accent: #6ea8c9;
  --accent2: #e0b35a;
  --bg0: #1a2030;
}
html[data-igs-theme="velvet"] body.tb-theme-dark {
  --accent: #c44a6a;
  --accent2: #f2ddb8;
}

/* 工具栏 / Tab */
.tb-chrome {
  backdrop-filter: blur(8px);
}
body.studio-embed .tb-chrome {
  display: none !important;
}

/* 面板 */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

input,
textarea,
select {
  background: var(--surface-inset);
  color: var(--text);
  border-color: var(--line);
}

/* 制作台上下文条 */
.igs-studio-ctx-banner {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 5%);
  color: var(--text);
  padding: 8px 12px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.igs-studio-ctx-banner__lab {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.igs-studio-ctx-banner__path {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.igs-studio-ctx-banner__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

/* 供应商芯片 */
.gen-provider-bar,
.t2v-provider-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 4%);
}
.gen-prov-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gen-prov-chip:hover:not(.is-off) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.gen-prov-chip.is-on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-inset));
}
.gen-prov-chip.is-off {
  opacity: 0.42;
  cursor: not-allowed;
}
.gen-prov-chip .cred-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--danger);
}
.gen-prov-chip .cred-dot.ok {
  background: var(--ok, var(--accent));
}

/* 引导词区 */
.gen-prompt-wrap textarea,
#genPrompt,
#genNegative,
#t2vPrompt {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
body.tb-theme-dark .gen-prompt-wrap textarea,
body.tb-theme-dark #genPrompt,
body.tb-theme-dark #genNegative,
body.tb-theme-dark #t2vPrompt {
  box-shadow: none;
}
.gen-prompt-wrap textarea:focus,
#genPrompt:focus,
#genNegative:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* 底部生成条 */
.gen-actions,
.gen-run-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.gen-actions .btn.primary,
#genSubmit.btn.primary {
  min-width: 128px;
  padding: 11px 20px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

/* 参考图卡片 */
.gen-ref-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  overflow: hidden;
}
.gen-ref-card.is-active,
.gen-ref-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* 右侧模板 */
.gen-tpl-inner {
  background: var(--surface-side);
  border-left: 1px solid var(--line);
}
.gen-tpl-item {
  border-radius: 10px;
  border: 1px solid transparent;
}
.gen-tpl-item:hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
}

/* 模式芯片 */
.gen-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gen-mode-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.gen-mode-chip.is-on,
.gen-mode-chip.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-inset));
}

/* 独立打开时的轻量页眉 */
.hero {
  margin: 0 0 14px;
  padding: 4px 2px 2px;
}
.hero .brand {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.hero h1 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.hero .sub {
  margin: 0;
  max-width: 52rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* 嵌入时压缩间距 */
body.studio-embed .page {
  padding: 6px 8px;
}
body.studio-embed .gen-studio {
  border-radius: 14px;
  height: calc(100vh - 52px);
  max-height: calc(100dvh - 52px);
}
body.studio-embed .gen-center {
  min-height: 0;
}
body.studio-embed .gen-main {
  padding: 8px 10px;
}
body.studio-embed .gen-compose {
  max-height: 48%;
}

/* 健康状态小点（可选） */
.tb-health {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}
.tb-health::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok, var(--accent)) 25%, transparent);
}
.tb-health.is-bad::before {
  background: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent);
}

@media (max-width: 980px) {
  .gen-studio {
    grid-template-columns: 1fr !important;
    overflow: auto;
  }
  .gen-side,
  .gen-tpl-inner {
    border: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* 生视频 · 与制作台同色系微调 */
#tab-jimeng-video .t2v-main.panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 12px 12px;
}
#tab-jimeng-video .t2v-prompt-wrap textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
#tab-jimeng-video .gen-ico-btn.t2v-ico:active {
  transform: translateY(0) scale(0.96);
}