/* ============================================================================
 * anim-tools-canvas-promptbar.css · 画布 2.0 第 2 批（S2/S3/S4）
 * ----------------------------------------------------------------------------
 * 覆盖三件套：模型下拉（canvas-model-dropdown）/ 参数面板（canvas-settings-panel）/
 *            （底部提示词条 2026-08-14 已删，只余两个仍被节点编辑器复用的定位类）
 * 版式结构照 franklin-canvas（frosted card + 分段按钮 + 圆形发送钮 + 320px 面板宽），
 * 颜色 / 字号 / 圆角 / 阴影一律走本项目既有 --canvas-* token，不搬 franklin 的暗色皮。
 * ==========================================================================*/

/* === 模型下拉（S2）=================================================== */
.canvas-model-dropdown {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.canvas-model-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--canvas-space-1);
  max-width: 190px;
  padding: 5px 10px;
  border: 1px solid var(--canvas-border-default);
  border-radius: var(--canvas-radius-pill);
  background: var(--canvas-bg-card);
  color: var(--canvas-color-text);
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-text-xs);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.canvas-model-dropdown-btn:hover {
  border-color: var(--canvas-border-strong);
  background: var(--canvas-bg-glass-hover);
}

.canvas-model-dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-model-dropdown-chevron {
  color: var(--canvas-fg-muted);
  font-size: 10px;
}

.canvas-model-dropdown-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: var(--canvas-space-1);
  list-style: none;
  border: 1px solid var(--canvas-border-default);
  border-radius: var(--canvas-radius-lg);
  background: var(--canvas-bg-card);
  box-shadow: var(--canvas-shadow-lg);
}

/* placement='down'：节点内 inline editor 用，浮层挂按钮下方 */
.canvas-model-dropdown-menu.is-down {
  top: calc(100% + 6px);
  bottom: auto;
}

.canvas-model-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--canvas-space-2);
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--canvas-radius-md);
  background: transparent;
  color: var(--canvas-color-text);
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-text-xs);
  text-align: left;
  cursor: pointer;
}

.canvas-model-dropdown-item:hover {
  background: var(--canvas-primary-soft);
}

.canvas-model-dropdown-item.is-active {
  color: var(--canvas-fg-brand);
  font-weight: 500;
}

.canvas-model-dropdown-item-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-model-dropdown-item-price {
  flex: 0 0 auto;
  color: var(--canvas-fg-muted);
  font-size: 11px;
}

.canvas-model-dropdown-check {
  flex: 0 0 auto;
  color: var(--canvas-fg-brand);
  font-size: 11px;
}

/* === 参数面板（S3）=================================================== */
.canvas-settings-panel {
  width: 320px;
  padding: var(--canvas-space-4);
  border: 1px solid var(--canvas-border-default);
  border-radius: var(--canvas-radius-lg);
  background: var(--canvas-bg-card);
  box-shadow: var(--canvas-shadow-lg);
  font-family: var(--canvas-font-family);
}

.canvas-panel-row + .canvas-panel-row {
  margin-top: var(--canvas-space-4);
}

.canvas-panel-row-title {
  margin-bottom: var(--canvas-space-2);
  color: var(--canvas-fg-subtle);
  font-size: var(--canvas-text-xs);
}

.canvas-panel-row-title-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.canvas-panel-row-value {
  color: var(--canvas-color-text);
  font-variant-numeric: tabular-nums;
}

.canvas-panel-empty {
  color: var(--canvas-fg-muted);
  font-size: var(--canvas-text-xs);
  text-align: center;
}

/* 必填项还没选时的提示（如 suno 的版本档）：不吓人，但要看得见 */
.canvas-panel-hint {
  margin-top: var(--canvas-space-1);
  color: var(--canvas-fg-muted);
  font-size: var(--canvas-text-xs);
}

/* 分段按钮（照 franklin seg / seg-btn）*/
.canvas-seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--canvas-space-1);
  padding: 3px;
  border-radius: var(--canvas-radius-md);
  background: var(--canvas-bg-canvas);
}

.canvas-seg-btn {
  flex: 1 1 auto;
  min-width: 42px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--canvas-radius-sm);
  background: transparent;
  color: var(--canvas-fg-subtle);
  font-family: inherit;
  font-size: var(--canvas-text-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.canvas-seg-btn:hover {
  background: var(--canvas-bg-glass-hover);
}

.canvas-seg-btn.is-active {
  border-color: var(--canvas-border-default);
  background: var(--canvas-bg-card);
  color: var(--canvas-fg-brand);
  box-shadow: var(--canvas-shadow-sm);
}

/* 比例小方块（照 franklin ratio / ratio-box）*/
.canvas-ratio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.canvas-ratio-box {
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.75;
}

.canvas-ratio-label {
  font-size: 10px;
  line-height: 1;
}

/* 开关（boolean 字段 · 2026-08-14 通用字段渲染器新增）
   原生 checkbox 藏起来、用一条 track 画开关：注册表将来给「保留原声 / 水印」这类布尔字段
   时前端不用改一行 */
.canvas-panel-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--canvas-space-2);
  cursor: pointer;
  font-size: var(--canvas-text-xs);
  color: var(--canvas-fg-subtle);
}

.canvas-panel-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.canvas-panel-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--canvas-border-strong);
  transition: background var(--canvas-transition-fast);
  flex: 0 0 auto;
}

.canvas-panel-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--canvas-bg-card);
  box-shadow: var(--canvas-shadow-sm);
  transition: transform var(--canvas-transition-fast);
}

.canvas-panel-switch input:checked + .canvas-panel-switch-track {
  background: var(--canvas-primary-filled);
}

.canvas-panel-switch input:checked + .canvas-panel-switch-track::after {
  transform: translateX(14px);
}

.canvas-panel-switch input:focus-visible + .canvas-panel-switch-track {
  box-shadow: 0 0 0 2px var(--canvas-primary-ring);
}

/* 文本输入（text 字段 · 同上，注册表补字符串字段时自动用得上）*/
.canvas-panel-input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--canvas-border-default);
  border-radius: var(--canvas-radius-md);
  background: var(--canvas-bg-card);
  color: var(--canvas-color-text);
  font-family: inherit;
  font-size: var(--canvas-text-xs);
}

.canvas-panel-input:focus {
  outline: none;
  border-color: var(--canvas-border-focus);
  box-shadow: 0 0 0 2px var(--canvas-primary-ring);
}

/* 时长滑杆（照 franklin panel-slider）*/
.canvas-panel-slider {
  width: 100%;
  accent-color: var(--canvas-primary-filled);
  cursor: pointer;
}

.canvas-panel-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--canvas-fg-muted);
  font-size: 10px;
}

/* === 底部提示词条（S4）已于 2026-08-14 整条删除（Cam 拍板）=================
 * 原 #canvas-prompt-bar-root / .canvas-prompt-bar* / .canvas-pb-mode / -divider /
 * -flex / -cost / -send / -icon-btn 全部随组件删除，不留旧皮。
 * **仍被节点编辑器用着的两个类留下**（音乐节点编辑器的参数弹层定位靠它们）：
 *   .canvas-pb-settings-wrap（相对定位壳）/ .canvas-pb-settings-pop（弹层位置）
 * 新的参数汇总 chip 与底部悬浮工具条样式在 anim-tools-canvas-libtv.css。
 * ==========================================================================*/

.canvas-pb-settings-wrap {
  position: relative;
  display: inline-flex;
}

.canvas-pb-settings-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  transform: translateX(-50%);
}

/* === 模型下拉项（工单 4 · 图标 + 名称 + 选中项描述 + 右侧价签）============= */
.canvas-model-dropdown-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--canvas-radius-sm);
  background: var(--canvas-bg-canvas);
  color: var(--canvas-fg-subtle);
}

.canvas-model-dropdown-item.is-active .canvas-model-dropdown-item-icon {
  background: var(--canvas-primary-soft);
  color: var(--canvas-fg-brand);
}

.canvas-model-dropdown-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 选中项才出的那行灰字（该款可调哪些参数，读注册表契约） */
.canvas-model-dropdown-item-desc {
  color: var(--canvas-fg-muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 720px) {
  .canvas-model-dropdown-btn {
    max-width: 120px;
  }
}