/* ============================================================================
 * anim-tools-canvas-libtv.css · 2026-08-14 LibTV 版式对标批新增的三个部件
 * ----------------------------------------------------------------------------
 * 覆盖：① 底部居中悬浮工具条（工单 2 · canvas-bottom-toolbar.js）
 *       ② 参数汇总 chip + 分区弹层（工单 3 · canvas-settings-chip.js）
 *       ③ 节点 ⊕「引用该节点生成」菜单（工单 5 · canvas-node-plus-menu.js）
 *
 * **结构照 LibTV，配色全用我们自己的**（Cam 拍板）：颜色 / 圆角 / 阴影 / 字号一律走既有
 * --canvas-* 与 --app-* token，零写死色值。LibTV 那枚深色主按钮映射成我们的主色深档
 * （--canvas-primary-filled 玫瑰豆沙），不抄它的黑白皮。
 * ==========================================================================*/

/* === ① 底部居中悬浮工具条 ============================================== */
.canvas-btb {
  position: absolute;
  left: 50%;
  bottom: var(--canvas-space-5, 20px);
  transform: translateX(-50%);
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--canvas-border-default);
  border-radius: var(--canvas-radius-pill);
  background: var(--canvas-bg-card);
  box-shadow: var(--canvas-shadow-lg);
  font-family: var(--canvas-font-family);
  /* 让位过渡（节点编辑卡展开 → 本条淡出下沉），与原底部条同款曲线：
     visibility 一起过渡 —— 去 hidden 时动画结束才生效（先淡出再消失），
     回来时立刻生效（先出现再淡入），两个方向都不闪跳，隐藏期间不吃点击 */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.canvas-btb.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  visibility: hidden;
  pointer-events: none;
}

.canvas-btb-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--canvas-fg-default);
  width: 36px;
  height: 36px;
  border-radius: var(--canvas-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--canvas-transition-fast),
              color var(--canvas-transition-fast);
}

.canvas-btb-btn:hover {
  background: var(--canvas-primary-soft);
  color: var(--canvas-fg-brand);
}

.canvas-btb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas-primary-ring);
}

/* LibTV 最左那枚深色主按钮 → 我们的主色实心 */
.canvas-btb-primary {
  background: var(--canvas-primary-filled);
  color: var(--canvas-fg-on-brand);
}

.canvas-btb-primary:hover {
  background: var(--canvas-primary-hover);
  color: var(--canvas-fg-on-brand);
}

.canvas-btb-primary.is-active {
  background: var(--canvas-primary-active);
  color: var(--canvas-fg-on-brand);
}

.canvas-btb-sep {
  width: 1px;
  height: 20px;
  margin: 0 var(--canvas-space-1);
  background: var(--canvas-border-default);
  flex: 0 0 auto;
}

.canvas-btb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.canvas-btb-icon svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  .canvas-btb { gap: 0; padding: 4px; }
  .canvas-btb-btn { width: 32px; height: 32px; }
}

/* === ② 参数汇总 chip + 分区弹层 ======================================== */
.canvas-sumchip-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* 基座复用 .canvas-inline-chip（组件已带那个类），这里只补汇总态特有的 */
.canvas-sumchip {
  gap: var(--canvas-space-1);
  max-width: 260px;
}

.canvas-sumchip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.canvas-sumchip-caret {
  color: var(--canvas-fg-muted);
  font-size: 10px;
  flex: 0 0 auto;
}

.canvas-sumchip.is-open {
  border-color: var(--canvas-border-focus);
  color: var(--canvas-fg-brand);
  background: var(--canvas-primary-soft);
}

/* 官方必填档还没选（suno 的版本 / 运动控制版的朝向）：chip 自己就要看得出来，
   不然用户点了生成才被拦下，还得回头找是哪一项没选 */
.canvas-sumchip.is-need-pick {
  border-color: var(--canvas-primary-ring);
  color: var(--canvas-fg-brand);
}

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

.canvas-sumchip-pop.is-down {
  top: calc(100% + 8px);
  bottom: auto;
}

/* === ③ 节点 ⊕「引用该节点生成」 ======================================== */
/* ⊕ 钮贴在节点右缘输出手柄外侧（手柄本身 10px、居中在 right:-5px 附近），
   默认半透明，hover 节点或 hover 自身才实体化 —— 不抢节点内容的视觉 */
.canvas-node-plus-btn {
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--canvas-border-default);
  border-radius: 999px;
  background: var(--canvas-bg-card);
  color: var(--canvas-fg-subtle);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--canvas-transition-fast),
              background var(--canvas-transition-fast),
              color var(--canvas-transition-fast);
}

.canvas-node:hover .canvas-node-plus-btn,
.canvas-node--selected .canvas-node-plus-btn,
.canvas-node-plus-btn:focus-visible {
  opacity: 1;
}

.canvas-node-plus-btn:hover {
  background: var(--canvas-primary-filled);
  border-color: var(--canvas-primary-filled);
  color: var(--canvas-fg-on-brand);
}

.canvas-node-plus-menu {
  min-width: 176px;
  padding: var(--canvas-space-1);
  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-node-plus-title {
  padding: 6px 9px 4px;
  color: var(--canvas-fg-subtle);
  font-size: var(--canvas-text-xs);
}

.canvas-node-plus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  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: inherit;
  font-size: var(--canvas-text-xs);
  text-align: left;
  cursor: pointer;
}

.canvas-node-plus-item:hover:not(.is-disabled) {
  background: var(--canvas-primary-soft);
  color: var(--canvas-fg-brand);
}

/* 非法目标：**预先灰显**而不是点了才拒绝。仍可 hover 出 title 说明为什么 */
.canvas-node-plus-item.is-disabled {
  color: var(--canvas-fg-muted);
  cursor: not-allowed;
}

.canvas-node-plus-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-plus-item-why {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--canvas-fg-muted);
}

/* === 节点编辑器底行的两处收口 ========================================== */
/* 模型名长起来能到二十几个字（「即梦 Seedream 5.0 Lite」这类），底行还要放汇总 chip +
   报价 + Run，给下拉一个上限免得把 Run 挤出卡片 */
.canvas-inline-model-dropdown .canvas-model-dropdown-btn {
  max-width: 168px;
}

.canvas-panel-switch-text {
  color: var(--canvas-fg-subtle);
  font-variant-numeric: tabular-nums;
}