/* ==========================================================================
   ai2-restyle.css
   画布 UI 视觉改造 · 设计层（放在所有补丁样式最后加载）
   只做视觉：色板 / 圆角分层 / 阴影 / 间距 / 状态表达 / 动效 / 焦点
   对应《画布 UI 视觉改造设计文档 V1.0》§2–§10，不改动任何功能、字段与操作流程。
   ========================================================================== */

/* --------------------------------------------------------------- §2 色板 */
:root {
  --ai2-app-bg: #eef2f3; /* 应用背景 */
  --ai2-canvas-bg: #f5f7f8; /* 画布背景 */
  --ai2-surface: #fff; /* 面板 / 节点 */
  --ai2-surface-2: #f7f8fa; /* 次级区域 */
  --ai2-hover: #f1f3f5; /* 悬停背景 */
  --ai2-line: #edeff2; /* 分隔线 */
  --ai2-border: #e3e7ea; /* 普通边框 */
  --ai2-border-strong: #ccd3d9; /* 强调边框 */
  --ai2-text: #171a1d; /* 主文字 */
  --ai2-text-2: #667078; /* 次级文字 */
  --ai2-text-3: #9aa2a9; /* 弱提示 */
  --ai2-accent: #526df5; /* 关键蓝：仅主操作 / 选中 / 焦点 / 活动连接 */
  --ai2-accent-hover: #4258de;
  --ai2-accent-text: #3f55c4; /* 蓝浅底上的文字，对比度 ≥4.5:1 */
  --ai2-accent-soft: #eef1ff; /* 蓝色浅底 */
  --ai2-accent-line: #c3ccfb;
  --ai2-edge: #aab2b9;
  --ai2-success: #24a874;
  --ai2-success-soft: #edf7f3;
  --ai2-warning: #d58a24;
  --ai2-warning-soft: #fbf4e9;
  --ai2-error: #d94b55;
  --ai2-error-text: #c23a44;
  --ai2-error-soft: #fcf0f1;

  /* 圆角统一：所有圆角矩形都用同一个 r 角（= 运行日志面板的 14px）。
     圆形图标按钮 / 端口仍是 50%，进度条一类的胶囊仍是 999px。
     五个层级令牌名保留，值全部指向 --ai2-r，要恢复分层只改这一行。 */
  --ai2-r: 14px;
  --ai2-r-container: var(--ai2-r);
  --ai2-r-panel: var(--ai2-r);
  --ai2-r-node: var(--ai2-r);
  --ai2-r-field: var(--ai2-r);
  --ai2-r-tag: var(--ai2-r);
  --ai2-radius: var(--ai2-r); /* 旧的「一刀切」总令牌 */

  /* §3 阴影：只用极淡的环境投影，不做镜像与光晕 */
  --ai2-shadow-node: 0 2px 8px rgba(24, 32, 38, 0.06), 0 12px 30px rgba(24, 32, 38, 0.04);
  --ai2-shadow-node-hover: 0 4px 12px rgba(24, 32, 38, 0.08), 0 16px 36px rgba(24, 32, 38, 0.06);
  --ai2-shadow-float: 0 16px 40px rgba(24, 32, 38, 0.1);
  --ai2-shadow-bar: 0 6px 20px rgba(24, 32, 38, 0.07);
  --ai2-focus-ring: 0 0 0 2px rgba(82, 109, 245, 0.35);

  /* §9 动效时长 */
  --ai2-dur: 140ms;
  --ai2-dur-slow: 200ms;
  --ai2-ease: cubic-bezier(0.25, 0.7, 0.4, 1);

  /* §2 字体优先沿用现有字体栈 */
  --ai2-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* §3 表单控件与按钮统一收到控件层（补丁里那条 :where 总闸把一切都给了节点层 12px） */
#root :where(button, input, select, textarea) {
  border-radius: var(--ai2-r-field) !important;
}

/* 圆形图标按钮与端口仍然按 §3 保持圆形，不能被上一条压成方角 */
#root :where(.compact-icon-btn, .compact-run, .compact-upload-overlay, .compact-running, .react-flow__handle, .ai2-fab, #ai2-agent-fab, #ai2-agent-send, .result-icon-btn, .multi-sel-plus, .preview-thumb-remove, .dot) {
  border-radius: 50% !important;
}

html,
body {
  background: var(--ai2-app-bg) !important;
}

#root {
  font-family: var(--ai2-font);
  color: var(--ai2-text);
  letter-spacing: 0;
}

/* §2 字号：正文 13–14px，面板标题 15–16px，节点标题 13px/600 */
#root .settings-header b {
  font-size: 16px !important;
  font-weight: 600 !important;
}

#root .gen-expand-title,
#root .run-log-head {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ai2-text) !important;
}

#root .node-title,
#root .node-title span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ai2-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#root .node-header-right,
#root .node-status,
#root .side-title,
#root .compact-placeholder small {
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- §4 画布 */
#root .react-flow,
#root .react-flow.light {
  --xy-background-color-default: var(--ai2-canvas-bg);
  --xy-background-pattern-dots-color-default: var(--ai2-edge);
  --xy-background-pattern-lines-color-default: var(--ai2-border);
  --xy-background-pattern-cross-color-default: var(--ai2-border);
  background: var(--ai2-canvas-bg) !important;
}

/* 点阵透明度压到 4%–7%，画布不放蓝色渐变与装饰光斑 */
#root .react-flow__background {
  opacity: 0.06 !important;
}

#root .react-flow__pane,
#root .react-flow__viewport {
  background: transparent !important;
}

/* --------------------------------------------------------- §6 端口与连线 */
#root .react-flow {
  --xy-edge-stroke-default: var(--ai2-edge);
  --xy-edge-stroke-width-default: 1.5;
  --xy-edge-stroke-selected-default: var(--ai2-accent);
  --xy-edge-label-background-color-default: var(--ai2-surface);
  --xy-edge-label-color-default: var(--ai2-text-2);
  --xy-handle-background-color-default: var(--ai2-surface);
  --xy-handle-border-color-default: var(--ai2-text-2);
  --xy-handle-border-width-default: 1.5;
  --xy-node-border-default: 1px solid var(--ai2-border);
  --xy-node-background-color-default: var(--ai2-surface);
  --xy-node-color-default: var(--ai2-text);
  --xy-selection-background-color-default: rgba(82, 109, 245, 0.06);
  --xy-selection-border-default: 1px dotted rgba(82, 109, 245, 0.7);
  --xy-minimap-background-color-default: var(--ai2-surface);
  --xy-minimap-node-background-color-default: var(--ai2-surface-2);
  --xy-minimap-node-stroke-color-default: var(--ai2-border-strong);
  --xy-minimap-mask-background-color-default: rgba(24, 32, 38, 0.04);
  --xy-controls-button-background-color-default: var(--ai2-surface);
  --xy-controls-button-background-color-hover-default: var(--ai2-hover);
  --xy-controls-button-color-default: var(--ai2-text-2);
  --xy-controls-button-color-hover-default: var(--ai2-text);
  --xy-controls-button-border-color-default: var(--ai2-border);
}

#root .react-flow__edge-path {
  stroke: var(--ai2-edge);
  stroke-width: 1.5px;
  transition: stroke var(--ai2-dur) var(--ai2-ease), stroke-width var(--ai2-dur) var(--ai2-ease);
}

/* 选中或正在创建的连线才用关键蓝；错误连线红色虚线 */
#root .react-flow__edge.selected .react-flow__edge-path,
#root .react-flow__edge.selected__edge .react-flow__edge-path,
#root .react-flow__edge.selected .react-flow__edge-textbg,
#root .react-flow__connectionline path,
#root .react-flow__connection-path {
  stroke: var(--ai2-accent) !important;
  stroke-width: 2px !important;
}

/* 拖线时落在不可连的端口上：红色描边，端口本身给出错误反馈 */
#root .react-flow__handle.invalid {
  background: var(--ai2-error-soft) !important;
  border-color: var(--ai2-error) !important;
}

#root .react-flow__edge.interactive:hover .react-flow__edge-path {
  stroke: var(--ai2-text-2);
}

#root .react-flow__edge-textbg {
  fill: var(--ai2-surface) !important;
}

#root .react-flow__edge-text {
  fill: var(--ai2-text-2) !important;
  font-size: 11px;
}

/* 端口默认 11px：白色中心 + 深灰描边，可连接 / 拖拽时才变蓝 */
#root .react-flow__handle {
  width: 11px !important;
  height: 11px !important;
  background: var(--ai2-surface) !important;
  border: 1.5px solid var(--ai2-text-3) !important;
  box-shadow: 0 1px 3px rgba(24, 32, 38, 0.08);
  transition: opacity var(--ai2-dur) var(--ai2-ease), background var(--ai2-dur) var(--ai2-ease), border-color var(--ai2-dur) var(--ai2-ease), zoom var(--ai2-dur) var(--ai2-ease);
}

/* 输入端圆、输出端方，不只靠颜色区分 */
#root .react-flow__handle-left {
  border-radius: 50% !important;
}

#root .react-flow__handle-right {
  border-radius: var(--ai2-r-tag) !important;
}

/* 端口：圆点必须跨在卡片边框线的正中，所以盒子本身就当圆点，
   定位用 left / right: 0 + 水平 translate(±50%) —— 盒子中心正好压在边框线上。
   代价：React Flow 取的连线端点是盒子的「外侧边」，所以鼠标不在节点上、
   圆点被隐掉时，线会停在边框外半颗的距离（实测 30px 加号差 14px、22px 输入点差 11px）。
   试过把盒子挪进卡片内侧让线接上边框：圆点就不再跨边；
   也试过用 ::before / box-shadow 把圆点画到边框上：前者让 React Flow 干脆不渲染连线，
   后者压在卡片上的那半边会被裁掉，圆点变成月牙。三条路都不通，只能保住圆点。 */
#root .react-flow__node .react-flow__handle.handle.target {
  left: 0 !important;
  transform: translate(-50%, -50%) !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--ai2-surface) !important;
  border: 1.5px solid var(--ai2-text-3) !important;
  box-shadow: 0 1px 3px rgba(24, 32, 38, 0.08) !important;
}

#root .react-flow__node .react-flow__handle.handle.plus-handle {
  right: 0 !important;
  transform: translate(50%, -50%) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border-strong) !important;
  color: var(--ai2-text-2) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
}

#root .react-flow__handle.plus-handle svg {
  width: 15px;
  height: 15px;
  stroke: var(--ai2-text-2);
  transition: stroke var(--ai2-dur) var(--ai2-ease);
}

/* 悬停 / 连线中：整颗变蓝并轻微放大。放大只能用 zoom ——
   把手的定位带水平 translate(±50%)，写 transform 会把它整条覆盖掉，圆心跳离边框中线。 */
#root .react-flow__handle.connectable:hover,
#root .react-flow__handle.connectionindicator:hover,
#root .react-flow__handle.connectingto,
#root .react-flow__handle.connectable:focus-visible {
  background: var(--ai2-accent) !important;
  border-color: var(--ai2-accent) !important;
  zoom: 1.12;
}

#root .react-flow__handle.plus-handle:hover {
  color: var(--ai2-accent) !important;
}

#root .react-flow__handle.plus-handle:hover svg {
  stroke: var(--ai2-accent);
}

/* 端口平时不显示，只在用得上时出现：选中节点、鼠标在节点上、正在连线、键盘聚焦。
   用 opacity 不用 visibility / display：命中区、布局和磁吸的取点位置都不变，
   不会出现圆心跳动，也不会有「看不见但点得着」的死角 —— 把手是节点的子孙，
   鼠标移到挂在边框外侧的那半颗上，同样算 hover 到节点，会立刻显形。 */
#root .react-flow__handle {
  opacity: 0;
}

#root .react-flow__node:hover .react-flow__handle,
#root .react-flow__node.selected .react-flow__handle,
#root .react-flow__handle:focus-visible,
#root .react-flow__handle.connectingto,
/* 连线拖拽进行中：所有端口都要在，否则看不到该往哪颗上落 */
#root .react-flow:has(.react-flow__connectionline) .react-flow__handle {
  opacity: 1;
}

/* ------------------------------------------------------------------ §5 节点 */
#root .node-shell {
  border-radius: var(--ai2-r-node) !important;
  background: var(--ai2-surface);
}

#root .generate-node.compact-node,
#root .video-node.compact-node,
#root .image-node.compact-node,
#root .text-node.compact-node,
#root .runninghub-node.compact-node {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-node) !important;
  box-shadow: var(--ai2-shadow-node) !important;
  transition: border-color var(--ai2-dur) var(--ai2-ease), box-shadow var(--ai2-dur) var(--ai2-ease), transform var(--ai2-dur) var(--ai2-ease);
}

/* 悬停：边框加深，节点最多上移 1px */
#root .node-shell:hover {
  border-color: var(--ai2-border-strong) !important;
  box-shadow: var(--ai2-shadow-node-hover) !important;
}

#root .generate-node.compact-node:hover,
#root .image-node.compact-node:hover,
#root .video-node.compact-node:hover {
  transform: translateY(-1px);
}

/* 选中：2px 关键蓝描边，不铺整块蓝底 */
#root .node-shell.selected {
  border: 2px solid var(--ai2-accent) !important;
  box-shadow: var(--ai2-shadow-node) !important;
}

#root .node-shell.selected .node-title,
#root .node-shell.selected .node-title span {
  color: var(--ai2-text) !important;
}

/* 多选：蓝色描边的虚拟框 + 右上角小型选择标记（.multi-sel-plus 就是那个标记） */
#root .multi-sel-box {
  border: 1px dashed rgba(82, 109, 245, 0.55) !important;
  background: rgba(82, 109, 245, 0.04) !important;
  border-radius: var(--ai2-r-node) !important;
  box-shadow: none !important;
}

#root .multi-sel-plus {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-accent) !important;
  color: var(--ai2-accent) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
}

/* 标题区移到卡片外上方，与图片节点（.bare-image-node）同一套做法：
   文本 / 视频 / RunningHub / 以及非紧凑的老节点类型。图片节点已由补丁处理，这里不重复。 */
#root .node-shell:not(.bare-image-node):not(.group-node) {
  position: relative;
  --ai2-header-gap: 8px;
  --ai2-header-height: 28px;
  --ai2-toolbar-gap: 10px;
}

#root .node-shell:not(.bare-image-node):not(.group-node) > .node-header {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + var(--ai2-header-gap)) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 240 !important;
}

/* 卡片顶部的横向工具条要让位给浮出的标题，避免叠在一起 */
#root .node-shell:not(.bare-image-node):not(.group-node) > .compact-top {
  bottom: calc(100% + var(--ai2-header-gap) + var(--ai2-header-height) + var(--ai2-toolbar-gap)) !important;
}

/* 选中态只留外壳那一条 2px 蓝描边。补丁还会在卡片内缩的内容区再画一圈，
   视频/文本/RunningHub 节点因此看起来像双层描边；有图的图片节点外壳没有边框，
   但上面那条 #root .node-shell.selected 已经补上了 2px 蓝框，所以这圈一律去掉。 */
#root .node-shell.selected .compact-stage {
  box-shadow: none !important;
}

/* 面板里的工具行只是卡片内的一行，不能再套一层浮层框——
   否则二级菜单旁边会多出一个长方形线框。 */
#root .compact-panel .compact-toolbar,
#root .node-shell .compact-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 视频节点补丁把 .compact-stage 钉成 320px，而外壳是 border-box + 2px 边框，
   内容区只有 316 —— stage 溢出会把左右两条选中描边盖掉，所以让它老实填满内容区。 */
#root .video-node.compact-node .compact-stage {
  width: 100% !important;
}

/* .wf-pop 只是 API 胶囊外面那层行内包装，不是卡片：给它边框会在胶囊外套出直角线框 */
#root .wf-pop {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 节点内部一律纯白：标题浮出后卡片里不再出现第二种底色 */
#root .compact-stage,
#root .image-frame,
#root .video-frame,
#root .empty-preview,
#root .compact-placeholder,
#root .text-node .compact-stage,
#root .ai2-imported-video-preview,
#root .node-textarea,
#root .rh-node-body {
  border-radius: var(--ai2-r-field) !important;
  background: var(--ai2-surface) !important;
}

/* 标题区自身保持透明、无分隔线无阴影，图片节点以外的节点也不会再出现白底横条 */
#root .node-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#root .compact-placeholder,
#root .compact-placeholder small,
#root .node-status {
  color: var(--ai2-text-3) !important;
}

/* 状态区：运行中用底部细进度条，蓝色只用在进度本身 */
#root .compact-running {
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 0 var(--ai2-r-field) var(--ai2-r-field) !important;
  background: linear-gradient(90deg, var(--ai2-accent) 0%, var(--ai2-accent-line) 100%) !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
  animation: ai2-run-sweep 1.6s var(--ai2-ease) infinite;
}

#root .compact-running svg,
#root .compact-running circle,
#root .compact-running::before,
#root .compact-running::after {
  display: none !important;
}

@keyframes ai2-run-sweep {
  0% {
    background-position: -40% 0;
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 140% 0;
    opacity: 0.7;
  }
}

#root .compact-running {
  background-size: 200% 100%;
}

/* 状态类由 ai2-node-state-patch.js 依现有状态文案派生，仅为视觉。
   节点左缘那条 3px 状态色条按要求去掉了（成功绿 / 警告黄 / 失败红都会压在卡片边上），
   状态仍然可读：失败时卡片描边转红，状态文字各自带色。
   .node-shell 的 position: relative 要留着 —— 展开面板按它定位。 */
#root .node-shell {
  position: relative;
}

#root .node-shell.ai2-state-fail {
  border-color: var(--ai2-error) !important;
}

#root .node-shell.ai2-state-fail .node-status {
  color: var(--ai2-error-text) !important;
}

#root .node-shell.ai2-state-ok .node-status {
  color: var(--ai2-success) !important;
}

#root .node-shell.ai2-state-warn .node-status {
  color: var(--ai2-warning) !important;
}

/* 禁用：压对比度，但端口仍可识别 */
#root .node-shell.ai2-state-disabled .node-title,
#root .node-shell.ai2-state-disabled .node-header-right {
  color: var(--ai2-text-3) !important;
}

#root .node-shell.ai2-state-disabled .compact-stage {
  opacity: 0.7;
}

#root .node-shell.ai2-state-disabled .react-flow__handle {
  border-color: var(--ai2-text-3) !important;
}

/* --------------------------------------------------------- §4/§6 顶部工具栏 */
/* §4 顶部工具栏：白色轻悬浮条，靠右上角的窄条（宽度随内容），48px 高，离边 12px。
   补丁原本是 left:50% + translateX(-50%) 的居中条，这里改成右对齐。 */
#root .top-toolbar {
  left: auto !important;
  right: 12px !important;
  top: 12px !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  transform: none !important;
  justify-content: flex-end;
  height: 48px !important;
  min-height: 48px;
  padding: 6px 8px !important;
  gap: 4px;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
  backdrop-filter: blur(6px);
}

#root .top-toolbar button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border: 1px solid transparent !important;
  border-radius: var(--ai2-r-field) !important;
  background: transparent !important;
  color: var(--ai2-text-2) !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background var(--ai2-dur) var(--ai2-ease), color var(--ai2-dur) var(--ai2-ease), border-color var(--ai2-dur) var(--ai2-ease);
}

#root .top-toolbar button svg {
  width: 17px;
  height: 17px;
}

#root .top-toolbar button:hover {
  background: var(--ai2-hover) !important;
  color: var(--ai2-text) !important;
  border-color: var(--ai2-border) !important;
  transform: none !important;
}

#root .top-toolbar button.active,
#root .top-toolbar button[aria-pressed="true"] {
  background: var(--ai2-accent-soft) !important;
  color: var(--ai2-accent) !important;
  border-color: var(--ai2-accent-line) !important;
}

/* 带文字的入口（上传图片 / 运行队列 / API 设置 / 全部运行）按内容定宽，不截断文字 */
#root .top-toolbar button:not(:only-child):has(span),
#root .top-toolbar .settings-button,
#root .top-toolbar .toolbar-label {
  width: auto !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}

/* 模式切换的分段控件：中性轨道 + 浅蓝当前项 */
#root .top-toolbar .segmented,
#root .ai2-mode-switch {
  height: 32px !important;
  padding: 2px !important;
  gap: 2px;
  background: var(--ai2-surface-2) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-field) !important;
}

#root .top-toolbar .segmented button,
#root .ai2-mode-switch button {
  height: 26px !important;
  width: auto !important;
  padding: 0 8px !important;
  border-radius: var(--ai2-r) !important;
}

/* 小地图 / 缩放器 / 快捷浮层：独立浮层，不再套额外卡片 */
#root .react-flow__minimap {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
}

#root .react-flow__controls {
  flex-direction: row;
  gap: 2px;
  padding: 3px !important;
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
}

#root .react-flow__controls button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border: 0 !important;
  border-radius: var(--ai2-r-field) !important;
  background: transparent !important;
  color: var(--ai2-text-2) !important;
  fill: var(--ai2-text-2);
  box-shadow: none !important;
}

/* React Flow 默认给的是深色底上的浅色图标，白底时必须显式压成中性灰，否则图标看不见 */
#root .react-flow__controls button svg,
#root .react-flow__controls button path {
  fill: var(--ai2-text-2) !important;
}

#root .react-flow__controls button:hover {
  background: var(--ai2-hover) !important;
  color: var(--ai2-text) !important;
  fill: var(--ai2-text);
}

#root .react-flow__controls .react-flow__controls-zoomin svg,
#root .react-flow__controls .react-flow__controls-zoomout svg,
#root .react-flow__controls .react-flow__controls-fitview svg,
#root .react-flow__controls .react-flow__controls-interactive svg {
  width: 15px;
  height: 15px;
}

#root .react-flow__attribution {
  color: var(--ai2-text-3) !important;
  background: transparent !important;
  font-size: 10px;
}

/* §5 节点上的胶囊工具条：收成控件层圆角，尺寸固定不随状态跳动 */
#root .compact-top,
#root .compact-toolbar,
#root .gen-expand-toolbar,
#root .ai2-sel-toolbar,
#root .image-preview-bar,
#root .ai2-crop-bar,
#root .ai2-paint-tools {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-float) !important;
  gap: 6px;
  padding: 5px;
}

/* 节点工具条里的胶囊：只统一色与圆角，高度沿用补丁自己的 44/46px（那是可读性优先的既有决定） */
#root .compact-pill,
#root .gen-tool-pill,
#root .compact-toolbar .node-api-select-row,
#root .ai2-count-stepper {
  border-radius: var(--ai2-r-field) !important;
  border: 1px solid var(--ai2-border) !important;
  background: var(--ai2-surface) !important;
  color: var(--ai2-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background var(--ai2-dur) var(--ai2-ease), border-color var(--ai2-dur) var(--ai2-ease), color var(--ai2-dur) var(--ai2-ease);
}

#root .compact-pill:hover,
#root .gen-tool-pill:hover,
#root .compact-toolbar .node-api-select-row:hover {
  background: var(--ai2-hover) !important;
  border-color: var(--ai2-border-strong) !important;
  color: var(--ai2-text) !important;
}

/* 当前模式 / 已选参数：浅蓝底 + 蓝字，不给整块蓝底 */
#root .compact-pill.active,
#root .gen-tool-pill.active,
#root .compact-toolbar .node-api-select-row.active,
#root .ai2-count-stepper button.active {
  background: var(--ai2-accent-soft) !important;
  border-color: var(--ai2-accent-line) !important;
  color: var(--ai2-accent-text) !important;
}

#root .compact-icon-btn,
#root .result-icon-btn,
#root .compact-upload-overlay,
#root .compact-top .compact-multi-toggle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  color: var(--ai2-text-2) !important;
  box-shadow: none !important;
  transition: background var(--ai2-dur) var(--ai2-ease), color var(--ai2-dur) var(--ai2-ease), border-color var(--ai2-dur) var(--ai2-ease);
}

/* 中间那个「上传 / 生成图片」入口：去掉底座圆圈（白底 + 细边 + 圆角），只留图标本身，
   图标放大一倍。盒子仍留在原位，命中区域跟着盒子走，不会变成点不动的幽灵图标。 */
#root .compact-upload-overlay.centered {
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ai2-text-3) !important;
}

#root .compact-upload-overlay.centered svg {
  width: 40px !important;
  height: 40px !important;
}

#root .compact-upload-overlay.centered:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--ai2-text-2) !important;
}

#root .compact-icon-btn:hover:not(:disabled),
#root .result-icon-btn:hover,
#root .compact-top .compact-multi-toggle:hover {
  background: var(--ai2-hover) !important;
  border-color: var(--ai2-border-strong) !important;
  color: var(--ai2-text) !important;
  transform: none !important;
}

/* 画布上的圆形浮层入口（画布历史 / AI 助手）：中性白底细边，不铺近黑底也不加蓝色光晕。
   注意：画布历史插件挂在 #ai2-canvas-history-root、AI 助手挂在 body 上，都不在 #root 里，
   所以这一段必须用不带 #root 的选择器，否则根本命不中。 */
.ai2-fab,
#ai2-agent-fab {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  color: var(--ai2-text-2) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
  font-weight: 600 !important;
}

.ai2-fab svg,
#ai2-agent-fab svg,
.ai2-fab path,
#ai2-agent-fab path {
  fill: currentColor;
}

.ai2-fab:hover,
#ai2-agent-fab:hover {
  border-color: var(--ai2-border-strong) !important;
  background: var(--ai2-hover) !important;
  color: var(--ai2-text) !important;
  box-shadow: var(--ai2-shadow-float) !important;
  transform: none !important;
}

/* 画布历史浮层：去掉蓝色光晕，统一浮层阴影与描边 */
.ai2-canvas-panel,
.ai2-agent-panel,
#ai2-agent-panel {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-float) !important;
  color: var(--ai2-text) !important;
}

#ai2-canvas-history-root .ai2-btn,
.ai2-agent-pill,
.ai2-dd-item {
  border-radius: var(--ai2-r-field) !important;
  font-weight: 600 !important;
}

/* 历史浮层里的按钮统一控件层圆角；只有 AI 助手那个纯图标 FAB 保持圆形 */
#ai2-canvas-history-root .ai2-btn,
#ai2-canvas-history-root .ai2-fab,
#ai2-canvas-history-root .ai2-status,
#ai2-canvas-history-root .ai2-history-item {
  border-radius: var(--ai2-r-field) !important;
}

#ai2-agent-fab {
  border-radius: 50% !important;
}

/* 面板里的主操作用实心蓝，其余保持中性 */
#ai2-canvas-history-root .ai2-btn.primary,
.ai2-agent-send,
#ai2-agent-send {
  background: var(--ai2-accent) !important;
  border-color: var(--ai2-accent) !important;
  color: #fff !important;
}

#ai2-canvas-history-root .ai2-btn.primary:hover,
.ai2-agent-send:hover,
#ai2-agent-send:hover {
  background: var(--ai2-accent-hover) !important;
  border-color: var(--ai2-accent-hover) !important;
}

#ai2-canvas-history-root .ai2-btn:not(.primary):not(.danger) {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border-strong) !important;
  color: var(--ai2-text-2) !important;
}

#ai2-canvas-history-root .ai2-btn:not(.primary):not(.danger):hover {
  background: var(--ai2-hover) !important;
  color: var(--ai2-text) !important;
}

#ai2-canvas-history-root .ai2-empty,
#ai2-canvas-history-root .ai2-status {
  background: var(--ai2-surface-2) !important;
  border: 1px solid var(--ai2-border) !important;
  color: var(--ai2-text-2) !important;
  border-radius: var(--ai2-r-field) !important;
}

/* 唯一允许实心蓝的地方：节点运行 / 面板保存这类会立即产生结果的关键动作 */
#root .compact-run,
#root .save-settings-button,
#root .settings-actions .primary.save-settings-button {
  height: 36px !important;
  border: 1px solid var(--ai2-accent) !important;
  padding: 0 14px !important;
  background: var(--ai2-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* 节点上的运行按钮仍是圆形图标按钮，只有面板里的保存按钮收成方角 */
#root .compact-run {
  height: 46px !important;
  padding: 0 !important;
}

#root .save-settings-button,
#root .settings-actions .primary.save-settings-button {
  border-radius: var(--ai2-r-field) !important;
}

#root .compact-run:hover:not(:disabled),
#root .save-settings-button:hover {
  background: var(--ai2-accent-hover) !important;
  border-color: var(--ai2-accent-hover) !important;
}

#root .compact-run:disabled,
#root button:disabled {
  opacity: 0.55;
  filter: none !important;
}

/* 工具条里的「当前选中」不能是近黑实心块：换成浅蓝底 + 蓝字（§4 模式切换的同一表达） */
#root .ai2-paint-tool.active,
#root .ai2-crop-ratio.active,
#root .ai2-paint-color[aria-expanded="true"],
#root .ai2-crop-ratio-trigger[aria-expanded="true"] {
  background: var(--ai2-accent-soft) !important;
  border-color: var(--ai2-accent-line) !important;
  color: var(--ai2-accent-text) !important;
}

/* 确定 / 下载这类会立即产生结果的动作才用实心蓝 */
#root .ai2-paint-confirm,
#root .ai2-crop-confirm,
#root .image-preview-btn.primary {
  background: var(--ai2-accent) !important;
  border-color: var(--ai2-accent) !important;
  color: #fff !important;
}

#root .ai2-paint-confirm:hover,
#root .ai2-crop-confirm:hover,
#root .image-preview-btn.primary:hover {
  background: var(--ai2-accent-hover) !important;
  border-color: var(--ai2-accent-hover) !important;
}

/* 添加平台 / 添加工作流 是入口不是主操作，收成次级描边按钮 */
#root .add-platform,
#root .rh-add-param {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border-strong) !important;
  color: var(--ai2-text-2) !important;
  box-shadow: none !important;
}

#root .add-platform:hover,
#root .rh-add-param:hover {
  background: var(--ai2-hover) !important;
  border-color: var(--ai2-text-3) !important;
  color: var(--ai2-text) !important;
}

/* ---------------------------------------------------- §6/§7 浮层与菜单容器 */
#root .option-popover,
#root .compact-size-popover,
#root .compact-popover,
#root .context-menu,
#root .mention-panel,
#root .advanced-popover,
#root .ai2-paint-popover,
#root .ai2-crop-ratio-panel,
#root .ai2-agent-dd,
#root .rh-settings-box {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-float) !important;
  padding: 6px;
}

#root .option-popover-head,
#root .compact-popover-title,
#root .side-title {
  color: var(--ai2-text-3) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ai2-line) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  padding: 8px 10px 6px !important;
}

#root .context-menu button,
#root .option-popover button,
#root .compact-popover button,
#root .mention-item,
#root .ai2-dd-item,
#root .platform-list button,
#root .log-item {
  border-radius: var(--ai2-r-field) !important;
  color: var(--ai2-text-2) !important;
  font-size: 13px !important;
  transition: background var(--ai2-dur) var(--ai2-ease), color var(--ai2-dur) var(--ai2-ease);
}

#root .context-menu button:hover,
#root .option-popover button:hover,
#root .mention-item:hover,
#root .ai2-dd-item:hover,
#root .platform-list button:hover {
  background: var(--ai2-hover) !important;
  color: var(--ai2-text) !important;
}

#root .option-popover button.active,
#root .platform-list button.active,
#root .ai2-dd-item.on,
#root .mention-item.active {
  background: var(--ai2-accent-soft) !important;
  color: var(--ai2-accent-text) !important;
  border-color: var(--ai2-accent-line) !important;
  font-weight: 600 !important;
}

/* 分段控件（清晰度 / 张数）：中性轨道 + 抬起的当前格 */
#root .option-popover-quality,
#root .option-popover-count,
#root .ai2-count-stepper {
  background: var(--ai2-surface-2) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-field) !important;
  padding: 2px !important;
  gap: 2px !important;
}

/* 步进胶囊右端留出空位，让运行圆点咬进来（-30px 在 ai2-compact-node-patch.css）：
   张数和运行看起来在同一个胶囊里。这条必须排在上面那条之后才压得住。 */
#root .ai2-count-stepper {
  padding: 2px 24px 2px 4px !important;
}

#root .option-popover-quality button,
#root .option-popover-count button {
  border-radius: var(--ai2-r-tag) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#root .option-popover-quality button.active,
#root .option-popover-count button.active {
  background: var(--ai2-surface) !important;
  color: var(--ai2-accent-text) !important;
  box-shadow: 0 1px 3px rgba(24, 32, 38, 0.08) !important;
}

/* 比例格：只换色与圆角，格子高度沿用补丁自己的 64px */
#root .option-popover-ratio button {
  border-radius: var(--ai2-r-field) !important;
}

/* ------------------------------------------------ 尺寸弹层：只有选中项有底
   浮层本身已经是卡片，里面的「清晰度 / 比例」两行只是排版容器，不该再各套一层底；
   未选中的格子也一律透明，整块只剩当前选择带底色。 */
#root .compact-size-popover > .option-popover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#root .compact-size-popover .option-popover button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#root .compact-size-popover .option-popover button:hover:not(.active) {
  background: var(--ai2-hover) !important;
}

#root .compact-size-popover .option-popover button.active {
  background: var(--ai2-accent-soft) !important;
  border-color: var(--ai2-accent-line) !important;
  color: var(--ai2-accent-text) !important;
  box-shadow: none !important;
}

#root .option-popover-ratio button:hover {
  border-color: var(--ai2-border-strong) !important;
}

#root .option-popover-ratio .ratio-visual,
#root .option-popover-ratio .ratio-16-9,
#root .option-popover-ratio .ratio-9-16 {
  border-color: var(--ai2-text-3) !important;
}

/* ----------------------------------------------------- §7 侧栏与属性面板 */
#root .left-panel {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-bar) !important;
  padding: 6px !important;
}

/* 当前入口只给一条蓝色指示线 / 浅蓝底，不给高饱和整块蓝 */
#root .left-panel button.active,
#root .left-panel .active,
#root .ai2-history-tab.active,
#root .ai2-canvas-tab.active {
  background: var(--ai2-accent-soft) !important;
  color: var(--ai2-accent-text) !important;
  box-shadow: inset 2px 0 0 var(--ai2-accent) !important;
  border-color: var(--ai2-border) !important;
}

#root .gen-expand-panel,
#root .compact-panel,
#root .settings-panel,
#root .run-log-panel,
#root .ai2-agent-panel,
#root #ai2-agent-panel,
#root .ai2-canvas-panel,
#root .progress-card {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-panel) !important;
  box-shadow: var(--ai2-shadow-float) !important;
  color: var(--ai2-text) !important;
}

/* 运行日志与右上角的工具条顶边对齐（同为 12px） */
#root .run-log-panel {
  top: 12px !important;
}

/* API 设置靠右是靠工具条本身右对齐实现的，不再需要 margin-left:auto */

/* 属性分组用间距和分隔线组织，不把每个分组做成卡片
   （节点里的工具行不在此列：它上面有输入框自己的分隔，再加一条就成了框线） */
#root .gen-expand-panel .gen-expand-entry,
#root .settings-form > .two-cols,
#root .model-fetch-box,
#root .notice-box,
#root .test-status {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ai2-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 0 !important;
  margin: 12px 0 0 !important;
}

/* 面板里的提示块用次级底；节点内的 .compact-placeholder 属于节点内部，保持纯白不在此列 */
#root .notice-box,
#root .test-status {
  background: var(--ai2-surface-2) !important;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-field) !important;
  box-shadow: none !important;
  color: var(--ai2-text-2) !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.7;
}

/* 标题与主操作固定在顶部，内容区独立滚动 */
#root .gen-expand-head,
#root .settings-header,
#root .run-log-head,
#root .ai2-agent-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ai2-surface) !important;
  border-bottom: 1px solid var(--ai2-line) !important;
  padding: 12px 14px !important;
}

#root .gen-expand-body,
#root .settings-grid,
#root .run-log-list,
#root .ai2-agent-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#root .gen-expand-body::-webkit-scrollbar,
#root .settings-grid::-webkit-scrollbar,
#root .option-popover-scroll::-webkit-scrollbar,
#root .run-log-list::-webkit-scrollbar {
  width: 6px;
}

#root .gen-expand-body::-webkit-scrollbar-thumb,
#root .settings-grid::-webkit-scrollbar-thumb,
#root .option-popover-scroll::-webkit-scrollbar-thumb,
#root .run-log-list::-webkit-scrollbar-thumb {
  background: var(--ai2-border-strong) !important;
  border-radius: 999px;
}

#root .gen-expand-body::-webkit-scrollbar-track,
#root .settings-grid::-webkit-scrollbar-track,
#root .option-popover-scroll::-webkit-scrollbar-track,
#root .run-log-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 面板底部固定的操作区 */
#root .gen-expand-actions,
#root .settings-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--ai2-surface);
  border-top: 1px solid var(--ai2-line) !important;
}

/* ------------------------------------------------------------ §8 API 设置 */
#root .settings-panel {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0 0 12px !important;
}

#root .settings-overlay,
#root .gen-expand-overlay {
  background: rgba(24, 32, 38, 0.28) !important;
  backdrop-filter: blur(2px);
}

#root label {
  color: var(--ai2-text-2) !important;
  font-size: 12px !important;
  font-weight: 500;
}

#root input,
#root select,
#root textarea,
#root .settings-model-input,
#root .rh-node-input,
#root .rh-settings-box input,
#root .compact-textarea,
#root .node-textarea,
#root .gen-expand-textarea {
  height: 40px;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-field) !important;
  background: var(--ai2-surface) !important;
  color: var(--ai2-text) !important;
  font-size: 13px !important;
  letter-spacing: 0;
  transition: border-color var(--ai2-dur) var(--ai2-ease), box-shadow var(--ai2-dur) var(--ai2-ease), background var(--ai2-dur) var(--ai2-ease);
}

#root textarea,
#root .settings-model-input,
#root .compact-textarea,
#root .node-textarea,
#root .gen-expand-textarea {
  height: auto;
  min-height: 64px;
  padding: 8px 10px !important;
  line-height: 1.6;
}

/* 文本 / 图片 / 视频节点里的输入框加高到两倍（面板里的提示词框与文本节点正文框） */
#root .compact-panel .compact-textarea,
#root .node-shell .compact-textarea,
#root .node-shell .node-textarea {
  min-height: 128px;
}

/* 嵌在胶囊 / 弹层里的原生 select 不能再套一层输入框边框，
   否则 API 选择框里会多出一个长方形框（补丁本来就要求它无边框透明）。
   节点卡片内部的 select 一律按「嵌在胶囊里」处理，跑不掉二级菜单里的平台/模型选择框。 */
#root .node-shell select,
#root .node-api-select-row select,
#root .compact-pill select,
#root .compact-toolbar select,
#root .option-popover select,
#root .compact-popover select,
#root .compact-size-popover select,
#root .advanced-popover select,
#root .wf-pop select,
#root .gen-expand-platform select,
#root .gen-expand-entry select,
#root .text-model-select,
#root .mention-panel select {
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 4px !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#root .node-shell select:focus,
#root .node-shell select:focus-visible,
#root .node-api-select-row select:focus,
#root .compact-pill select:focus,
#root .compact-toolbar select:focus,
#root .option-popover select:focus,
#root .advanced-popover select:focus,
#root .text-model-select:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 节点内的提示词输入仍要保持无框的紧凑感（原设计如此），只统一文字色 */
#root .compact-panel .compact-textarea,
#root .node-shell .node-textarea {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--ai2-text-3) !important;
}

#root input:hover,
#root select:hover,
#root textarea:hover {
  border-color: var(--ai2-border-strong) !important;
}

/* 校验不过的字段就地标红，不弹阻断式提示 */
#root input:focus,
#root select:focus,
#root textarea:focus {
  border-color: var(--ai2-accent) !important;
  box-shadow: var(--ai2-focus-ring) !important;
  outline: none !important;
}

#root input:invalid:not(:placeholder-shown),
#root .ai2-field-error,
#root input[aria-invalid="true"] {
  border-color: var(--ai2-error) !important;
}

#root .settings-form input[type="password"] {
  letter-spacing: 1px;
}

#root .api-key-eye,
#root .settings-form button[title*="显示"],
#root .settings-form button[title*="隐藏"],
#root .settings-form button[title*="掩码"] {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ai2-border) !important;
  border-radius: var(--ai2-r-field) !important;
  background: var(--ai2-surface) !important;
  color: var(--ai2-text-2) !important;
  display: grid;
  place-items: center;
}

/* 次级描边按钮：测试连接 / 查询额度 */
#root button.primary:not(.save-settings-button),
#root .settings-actions button:not(.primary):not(.danger),
#root .model-fetch-actions button,
#root .settings-header button {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border-strong) !important;
  border-radius: var(--ai2-r-field) !important;
  color: var(--ai2-text-2) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  height: 34px !important;
  white-space: nowrap;
}

#root button.primary:not(.save-settings-button):hover,
#root .settings-actions button:not(.primary):hover,
#root .model-fetch-actions button:hover,
#root .settings-header button:hover {
  background: var(--ai2-hover) !important;
  border-color: var(--ai2-text-3) !important;
  color: var(--ai2-text) !important;
}

/* 测试中：按钮内联加载态，不弹提示 */
#root button[aria-busy="true"],
#root button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

#root button[aria-busy="true"]::after,
#root button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ai2-border-strong);
  border-top-color: var(--ai2-accent);
  border-radius: 50%;
  animation: ai2-spin 720ms linear infinite;
}

@keyframes ai2-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 危险操作：红色文字按钮，靠行尾与保存分开（§8 不相邻） */
#root .danger,
#root button.danger,
#root .platform-list button.danger {
  margin-left: auto;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ai2-error-text) !important;
  font-weight: 600 !important;
}

#root .danger:hover,
#root button.danger:hover {
  background: var(--ai2-error-soft) !important;
  border-color: var(--ai2-error) !important;
  color: var(--ai2-error-text) !important;
}

/* 状态反馈文字 */
#root .log-item.error,
#root .ai2-status.error,
#root .ai2-paint-error,
#root .ai2-crop-error {
  background: var(--ai2-error-soft) !important;
  color: var(--ai2-error-text) !important;
  border-color: var(--ai2-error) !important;
  border-radius: var(--ai2-r-field) !important;
}

#root .log-item.success,
#root .ai2-status.ok {
  background: var(--ai2-success-soft) !important;
  color: #1a7a55 !important;
}

/* --------------------------------------------------------- §3 卡片与列表 */
#root .ai2-history-item,
#root .result-thumb,
#root .image-preview-card,
#root .rh-wf-path {
  background: var(--ai2-surface) !important;
  border: 1px solid var(--ai2-border) !important;
  box-shadow: none !important;
}

#root .ai2-history-item:hover,
#root .result-thumb:hover {
  border-color: var(--ai2-border-strong) !important;
  background: var(--ai2-hover) !important;
}

/* --------------------------------------------------------------- §9 动效 */
#root .option-popover,
#root .compact-size-popover,
#root .compact-popover,
#root .context-menu,
#root .mention-panel,
#root .settings-panel,
#root .gen-expand-panel,
#root .ai2-agent-panel {
  transition: opacity var(--ai2-dur-slow) var(--ai2-ease), transform var(--ai2-dur-slow) var(--ai2-ease), visibility var(--ai2-dur-slow) var(--ai2-ease);
}

/* 统一键盘焦点环：2px 半透明蓝外环 */
#root :where(button, [role="button"], a, input, select, textarea, .node-shell, .react-flow__handle, .compact-stage, .mention-item, .ai2-history-item):focus-visible {
  outline: none !important;
  box-shadow: var(--ai2-focus-ring) !important;
  border-color: var(--ai2-accent) !important;
}

/* §9 静止的卡片不许持续呼吸发光；运行态只留光晕本身，不加滤镜、不再叠点阵 */
#root .ai2-node-anim,
#root .ai2-node-anim-canvas {
  opacity: 0.45 !important;
  mix-blend-mode: normal !important;
}

#root .compact-stage:active {
  transform: none !important;
}

/* -------------------------------------------------------- §10 响应式 */
@media (max-width: 1180px) {
  #root .top-toolbar {
    max-width: calc(100% - 24px);
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

@media (max-width: 900px) {
  #root .settings-panel {
    width: calc(100% - 24px) !important;
  }

  #root .compact-stage {
    border-radius: var(--ai2-r-field) !important;
  }
}

/* --------------------------------------------- §7 面板「放大输入框」按钮 */
/* 按钮由 ai2-panel-zoom.js 注入到 .compact-panel 的右上角 */
#root .ai2-panel-zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  color: var(--ai2-text-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--ai2-dur) var(--ai2-ease), color var(--ai2-dur) var(--ai2-ease);
}

#root .ai2-panel-zoom-btn:hover,
#root .ai2-panel-zoom-btn.active {
  background: var(--ai2-hover);
  color: var(--ai2-accent-text);
}

/* ⤢ 占住面板右上角。只有当输入框就是面板第一行时（没有上游缩略图）才留这条顶部空间，
   否则缩略图行顶对齐、⤢ 站在它右边，不多空一段。
   RunningHub 节点没有按钮，也不该多空一段。 */
#root .compact-panel:has(> .ai2-panel-zoom-btn):not(:has(> .preview-row)) {
  padding-top: 46px !important;
}

/* 缩略图行换行时也别钻到 ⤢ 底下 */
#root .compact-panel:has(> .ai2-panel-zoom-btn) > .preview-row {
  padding-right: 40px;
}

/* 几何（居中、宽高、输入框高度）由 ai2-panel-zoom.js 按画布缩放反算后写内联，
   这里只补字号：`#root textarea` 那条 13px 是 !important，覆盖必须同样带 !important。 */
html.ai2-panel-zoom #root .compact-panel .compact-textarea {
  font-size: 15px !important;
  line-height: 1.75;
}

/* 放大编辑时按模态处理：.react-flow__node 带 transform 自成层叠上下文，面板的 z-index
   抬不到别的节点之上，宿主自己的标题也会压在面板上。抬层级无解，就整层隐掉 ——
   visibility 能被子元素翻回来，所以只留面板可见（opacity 不行，会被一起压成 0）。
   !important 是必需的：React Flow 会给已测量的节点写行内 visibility: visible。 */
html.ai2-panel-zoom #root .react-flow__node {
  visibility: hidden !important;
}

/* 同样必须 !important：父层带 !important 的继承值会压过子层的普通声明，
   少了它整个放大面板会跟着节点一起看不见（矩形尺寸仍然算得出来，最容易骗过纯量矩形的验证）。 */
html.ai2-panel-zoom #root .compact-panel {
  visibility: visible !important;
}

/* ------------------------------------------- §7 参考图悬停预览浮层（在 body 上，不在 #root 内） */
.ai2-thumb-preview {
  position: fixed;
  z-index: 200;
  display: none;
  padding: 6px;
  border: 1px solid var(--ai2-border);
  border-radius: var(--ai2-r-panel);
  background: var(--ai2-surface);
  box-shadow: var(--ai2-shadow-float);
  pointer-events: none;
}

.ai2-thumb-preview img {
  display: block;
  max-width: 168px;
  max-height: 168px;
  border-radius: var(--ai2-r-field);
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  #root *,
  #ai2-canvas-history-root * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  #root .generate-node.compact-node:hover,
  #root .image-node.compact-node:hover,
  #root .video-node.compact-node:hover {
    transform: none !important;
  }

  #root .compact-running {
    animation: none !important;
    background: var(--ai2-accent-line) !important;
  }
}