/* ==========================================================================
   ai2-motion-patch.css
   无限画布 · 简易动效补丁（纯新增，不覆盖任何布局属性）
   
   安全原则：
   1. 只动 transform / opacity / box-shadow，不碰 width/height/position，避免布局跳动
   2. 绝不动 .react-flow__node 的 transform —— 那是画布用来定位节点的，动了节点会乱飞
   3. 尊重系统的"减少动效"设置
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 节点基础过渡（按需求已移除悬停抬起动效）
   -------------------------------------------------------------------------- */
.node-shell {
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
/* 拖动时不抬起，避免手感发飘 */
.react-flow__node.dragging .node-shell:hover,
.react-flow__node.dragging .node-shell {
  transform: none;
}

/* --------------------------------------------------------------------------
   2. 节点出现动画：新节点淡入 + 轻微放大
      （只作用于内层 .node-shell，不影响画布定位）
   -------------------------------------------------------------------------- */
@keyframes ai2-node-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* 注意：这里必须用 backwards 而不是 both。
   both 会让动画结束后继续锁住 transform，导致下面 .node-shell:hover 的抬起效果失效
   （CSS 动画的优先级高于普通声明，包括 :hover）。 */
.node-shell {
  animation: ai2-node-in 0.22s ease-out backwards;
}

/* --------------------------------------------------------------------------
   3. 参数弹层（模型/比例/质量/数量）：淡入并轻微下滑
   -------------------------------------------------------------------------- */
@keyframes ai2-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 用 backwards：基础 CSS 中 .option-popover 有 translate(-50%) 居中，
   用 both 会锁死 transform 导致弹层位置偏移。 */
.option-popover {
  animation: ai2-pop-in 0.16s ease-out backwards;
}
.option-popover button {
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.option-popover button:active {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   4. 按钮/徽章：按下有反馈，悬停有过渡
   -------------------------------------------------------------------------- */
.top-toolbar button,
.node-actions button,
.settings-actions button,
.run-log-actions button,
.image-node-actions button,
.icon-badge,
.ai2-btn {
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
    transform 0.12s ease, border-color 0.15s ease;
}
.top-toolbar button:active,
.node-actions button:active,
.settings-actions button:active,
.run-log-actions button:active,
.image-node-actions button:active,
.icon-badge:active,
.ai2-btn:active {
  transform: scale(0.96);
}
/* 主按钮悬停轻微上浮 */
.top-toolbar button.primary:hover,
.node-actions button.primary:hover,
.run-log-actions button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24,32,38, .16);
}

/* --------------------------------------------------------------------------
   5. 设置面板：遮罩淡入 + 面板上浮
   -------------------------------------------------------------------------- */
@keyframes ai2-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ai2-panel-up {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.settings-overlay {
  animation: ai2-fade-in 0.18s ease-out both;
}
.settings-panel {
  animation: ai2-panel-up 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   6. 图片大图预览：淡入 + 缩放
   -------------------------------------------------------------------------- */
.image-preview-overlay {
  animation: ai2-fade-in 0.18s ease-out both;
}
.image-preview-card {
  animation: ai2-panel-up 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   7. 右键菜单：从小放大
   -------------------------------------------------------------------------- */
@keyframes ai2-menu-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.context-menu {
  animation: ai2-menu-in 0.14s ease-out both;
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   8. 运行日志：新日志从左侧滑入
   -------------------------------------------------------------------------- */
@keyframes ai2-log-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.log-item {
  animation: ai2-log-in 0.2s ease-out both;
}

/* --------------------------------------------------------------------------
   9. 生成结果图淡入（节点预览缩略图）
   -------------------------------------------------------------------------- */
@keyframes ai2-img-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.preview-thumb img,
.image-frame img {
  animation: ai2-img-in 0.26s ease-out both;
}

/* --------------------------------------------------------------------------
   10. 顶部工具栏悬浮感：轻微阴影过渡
   -------------------------------------------------------------------------- */
.top-toolbar {
  transition: box-shadow 0.2s ease;
}
.top-toolbar:hover {
  box-shadow: 0 18px 46px rgba(82, 109, 245, .12);
}

/* --------------------------------------------------------------------------
   11. 连线选中时的流动效果（已有 animated 类，这里补平滑过渡）
   -------------------------------------------------------------------------- */
.react-flow__edge-path {
  transition: stroke 0.16s ease, stroke-width 0.16s ease;
}

/* --------------------------------------------------------------------------
   12. 无障碍：系统开启"减少动效"时，全部关闭
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   13. 节点运行态：品牌蓝光晕（WebGL 层）

   开关：ai2-node-run-anim.js 在节点壳上加 / 去 .ai2-node-animating，
        并在 .compact-stage 里挂 .ai2-node-anim > canvas（Aurora 移植）。
   层级：canvas 层 z-index 2，在内容之上、控件之下；pointer-events: none，
        不动 .compact-stage 的尺寸与布局。
   运行期间右下角的转圈角标连同占位文案一起隐藏。
   -------------------------------------------------------------------------- */

/* Aurora 动画层铺满节点内容区 */
.node-shell .compact-stage > .ai2-node-anim {
  --ai2-node-anim-opacity: 0.6; /* 整体浓淡：数字越小越淡 */
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.node-shell .compact-stage > .ai2-node-anim canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--ai2-node-anim-opacity);
}

/* 运行期间不显示占位文案、上传入口和右下角的转圈角标，只留动效。
   两套选择器等价：运行态类可能被 React 重渲染冲掉，光晕层在不在则是事实本身。
   注意：.compact-running 仍然留在 DOM 里 —— 它是运行状态的唯一依据，
   这里只是隐藏，不能删除（删掉就判不出运行态了）。 */
.node-shell.ai2-node-animating .compact-placeholder,
.node-shell.ai2-node-animating .compact-upload-overlay,
.node-shell.ai2-node-animating .compact-stage > .compact-running,
.node-shell:has(> .compact-stage > .ai2-node-anim) .compact-stage .compact-placeholder,
.node-shell:has(> .compact-stage > .ai2-node-anim) .compact-stage .compact-upload-overlay,
.node-shell:has(> .compact-stage > .ai2-node-anim) .compact-stage > .compact-running {
  visibility: hidden;
}