/* ============================================================================
 * anim-tools-canvas-base.css · 画布容器结构 + ReactFlow 覆盖（拆分自 anim-tools-canvas.css）
 * ----------------------------------------------------------------------------
 * 进场必读：reports/research/canvas-ui-docs/slice-0.md
 * 设计：复用 ai-agent-design-tokens 的 --app-* token（如未定义则 inline fallback）
 *       玻璃态 toggle + 冷米画布底 + 点阵网格 + 极简 vertical toolbar
 * Token fallback：本文件用到的 --app-* 在现有 anim-tools.css :root 可能没定义，
 *                inline fallback 兜底，跟 ai-agent-design-tokens 权威值对齐
 *
 * 拆分映射（Slice 9 后行数过 1500 拆 3）：
 *   - base.css     · 容器结构 + ReactFlow override（本文件）
 *   - nodes.css    · 5 类节点视觉 + reference + script (Slice 1/4/5/6/7/8/9)
 *   - panels.css   · palette + Slice 3 PropertyPanel + reference panel (Slice 8)
 * ============================================================================ */

/* === Mode toggle（顶部 wizard ↔ canvas） === */
.atb-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--app-surface-glass-panel, rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--app-border, rgba(139, 157, 175, 0.14));
  margin-left: 12px;
  flex-shrink: 0;
}

.cmt-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-text, #242424);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1.2;
  white-space: nowrap;
}

.cmt-btn:hover:not(.cmt-is-on) {
  background: var(--app-surface-glass-hover, rgba(255, 255, 255, 0.86));
  color: var(--app-text-strong, #111827);
}

.cmt-btn.cmt-is-on {
  background: var(--app-primary, #b87d75);
  color: #fff;
  box-shadow: 0 2px 8px rgba(184, 125, 117, 0.24);
}

.cmt-btn.cmt-is-on:hover {
  background: var(--app-primary-hover, #a06a63);
}

/* === Canvas mount 容器 === */
#canvas-mount {
  display: none;  /* 默认隐藏，canvas-shared.js setMode('canvas') 显示 */
  position: fixed;
  top: 56px;  /* topbar 高度，跟现有 .topbar height 对齐 */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--canvas-bg-canvas, #F5F5F5);
  z-index: 5;
  overflow: hidden;
}

/* === Canvas stage（vtb + flow 双列布局） === */
.canvas-stage {
  display: flex;
  position: relative;  /* palette 浮窗 absolute 锚此（避免 fallback 到 fixed #canvas-mount，Slice 1 reviewer LOW） */
  width: 100%;
  height: 100%;
}

/* === 左侧 vertical toolbar · Polish #7: icon hierarchy + active 状态 === */
.canvas-vtb {
  width: 56px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* G-4: 垂直居中（原 padding:16px 0 顶部对齐） */
  gap: 8px;
  background: var(--app-surface, #ffffff);
  border-right: 1px solid var(--app-border, rgba(139, 157, 175, 0.14));
}

/* Polish #7: 24px icon (LibTV spec) · 黑色实心 stroke 1.5 + hover 玫瑰豆沙 soft + active filled */
.canvas-vtb-btn {
  appearance: none;
  border: 0;
  background: transparent;
  /* icon 颜色用深咖（hierarchy 主色）·跟现有 fg-default 一致 */
  color: var(--canvas-fg-default, #1F1F1F);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
              color 150ms cubic-bezier(0, 0, 0, 1);
}

.canvas-vtb-btn:hover {
  background: var(--app-primary-soft, #f5edeb);
  color: var(--app-primary, #b87d75);
}

/* Polish #7: active 玫瑰豆沙 filled (vs LibTV 白填充 — UTEN 暖色映射) */
.canvas-vtb-btn.canvas-vtb-active {
  background: var(--app-primary, #b87d75);
  color: #fff;
  box-shadow: 0 1px 2px rgba(184, 125, 117, 0.20);
}

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

.canvas-vtb-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* === 主画布 wrap === */
.canvas-flow-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

/* Phase K-10: ReactFlow 包内置 .react-flow__pane{cursor:grab} 覆盖
 * 默认 cursor 应是 default（auto）— 跟 LibTV §K.2 一致：Space 按住才变 grab
 * onPanStart/End 通过 inline style 切 grab/grabbing，inline 优先级 > 此 CSS */
.canvas-flow-wrap .react-flow__pane {
  cursor: default;
}
.canvas-flow-wrap .react-flow__pane.draggable {
  cursor: grab;
}

/* === 空状态中央提示 === */
.canvas-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--app-surface-glass-panel, rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--app-border, rgba(139, 157, 175, 0.14));
  color: var(--app-text-muted, #6b7280);
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: canvas-empty-fade-in 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-empty-icon {
  color: var(--app-text-subtle, #9aa4af);
  display: inline-flex;
}

.canvas-empty-text {
  white-space: nowrap;
}

@keyframes canvas-empty-fade-in {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* === CDN 加载失败兜底 === */
.canvas-cdn-error {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--app-danger-soft, rgba(196, 52, 45, 0.08));
  border: 1px solid var(--app-danger, #c4342d);
  color: var(--app-danger, #c4342d);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================================
 * ReactFlow 内部样式覆盖（让默认控件走 UTEN token）
 * ============================================================================ */

/* Minimap */
.react-flow__minimap {
  background: var(--app-surface-glass, rgba(255, 255, 255, 0.72)) !important;
  border-radius: 10px !important;
  border: 1px solid var(--app-border, rgba(139, 157, 175, 0.14)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  margin: 16px !important;
}

/* Controls (zoom +/- / fit / lock) */
.react-flow__controls {
  background: var(--app-surface-glass, rgba(255, 255, 255, 0.72)) !important;
  border-radius: 10px !important;
  border: 1px solid var(--app-border, rgba(139, 157, 175, 0.14)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  margin: 16px !important;
  overflow: hidden;
}

.react-flow__controls-button {
  background: transparent !important;
  border-bottom: 1px solid var(--app-border-soft, rgba(139, 157, 175, 0.1)) !important;
  color: var(--app-text-muted, #6b7280) !important;
  width: 32px !important;
  height: 32px !important;
}

.react-flow__controls-button:hover {
  background: var(--app-primary-soft, #f5edeb) !important;
  color: var(--app-primary, #b87d75) !important;
}

.react-flow__controls-button svg {
  fill: currentColor;
  max-width: 14px;
  max-height: 14px;
}

/* Background dots */
.react-flow__background-pattern {
  /* 已在 React 组件里用 color 控制 */
}

/* 选中态边框（节点 / 边 hover 用 UTEN primary） */
.react-flow__node.selected,
.react-flow__node:focus {
  outline-color: var(--app-primary, #b87d75) !important;
}

.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path {
  stroke: var(--app-primary, #b87d75) !important;
}

/* ReactFlow node container reset · 让节点 frame 走我们自己的 CSS（去掉 RF 默认 border + padding） */
.react-flow__node {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: auto !important;
  font-size: inherit !important;
  color: inherit !important;
}

.react-flow__node.selected {
  outline: none !important;
}

/* ============================================================================
 * Context Menu (B-1 1e · canvas-context-menu.js)
 *   - 双 menu 共用样式：节点 right-click 11 项 + 画布空白 right-click 5 项
 *   - 全部 token 走 --canvas-* (anim-tools-canvas-tokens.css)
 *   - fixed position + viewport flip 由 JS 计算
 * ============================================================================ */

.canvas-ctx-menu {
  position: fixed;
  z-index: var(--canvas-z-modal, 100);
  min-width: 220px;
  background: var(--canvas-bg-card, #FFFFFF);
  border: 1px solid var(--canvas-border-default, #EAEAEA);
  border-radius: var(--canvas-radius-md, 8px);
  box-shadow: var(--canvas-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.06));
  padding: var(--canvas-space-1, 4px) 0;
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-text-sm, 0.875rem);
  color: var(--canvas-fg-default, #1F1F1F);
  user-select: none;
  animation: canvas-ctx-menu-fade-in 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Phase F-2: addNode submenu */
.canvas-ctx-submenu {
  z-index: 1100; /* 高于 parent menu */
}
.canvas-ctx-menu[data-ctx-type="addNode-submenu"] {
  min-width: 180px;
}

@keyframes canvas-ctx-menu-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.canvas-ctx-section {
  display: flex;
  flex-direction: column;
}

.canvas-ctx-item {
  padding: var(--canvas-space-2, 8px) var(--canvas-space-3, 12px);
  display: flex;
  align-items: center;
  gap: var(--canvas-space-2, 8px);
  cursor: pointer;
  transition: background var(--canvas-transition-fast, 150ms ease);
  line-height: 1.4;
}

.canvas-ctx-item:hover {
  background: var(--canvas-bg-canvas, #F5F5F5);
}

.canvas-ctx-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-ctx-item.disabled:hover {
  background: transparent;
}

.canvas-ctx-icon {
  width: 20px;
  text-align: center;
  font-size: var(--canvas-text-base, 1rem);
  flex-shrink: 0;
}

.canvas-ctx-label {
  flex: 1;
  color: var(--canvas-fg-default, #1F1F1F);
  white-space: nowrap;
}

.canvas-ctx-hint {
  font-size: var(--canvas-text-xs, 0.75rem);
  color: var(--canvas-fg-muted, #999999);
  margin-left: var(--canvas-space-3, 12px);
  flex-shrink: 0;
}

.canvas-ctx-hint-disabled {
  font-style: italic;
}

.canvas-ctx-divider {
  height: 1px;
  background: var(--canvas-border-default, #EAEAEA);
  margin: var(--canvas-space-1, 4px) 0;
}

/* K-10: addNode-standalone menu 双分组 group label + Beta badge（对齐 LibTV 图 1） */
.canvas-ctx-group-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  color: var(--canvas-fg-muted, #999);
  font-weight: 500;
}
.canvas-ctx-group-label:not(:first-child) {
  border-top: 1px solid var(--canvas-border-default, #EAEAEA);
  margin-top: 4px;
  padding-top: 8px;
}
.canvas-ctx-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--canvas-chip-bg, #F5F5F5);
  color: var(--canvas-fg-muted, #999);
  margin-left: 8px;
  flex-shrink: 0;
}