/* ============================================================================
   ui.css —— 全站统一 UI 设计系统（在页面自身样式之后引入，做"统一化 + 打磨"）
   目标：
     1) 统一设计令牌（圆角/阴影/过渡/焦点环），缺省变量自动回退，兼容所有页面；
     2) 统一滚动条、焦点态、选中色等"系统级"观感（深色主题下默认白滚动条极其刺眼）；
     3) 统一按钮/输入框/弹窗/卡片/表格的交互反馈与入场动效；
   原则：只做"视觉打磨"，不改动任何布局结构属性（display / position / 尺寸），
        以免破坏各页面既有排版。
   ========================================================================== */

/* ───────────────────────── 1. 设计令牌（含回退，页面缺啥补啥） ───────────────────────── */
:root {
  /* 页面已有 --bg/--panel/--border/--text/--muted/--accent，这里补齐缺失的层级色 */
  --ui-panel-2: var(--panel-2, var(--bg-elev, color-mix(in srgb, var(--panel, #141a26) 78%, var(--text, #e6edf3) 6%)));
  --ui-input-bg: var(--bg-input, var(--panel, #0e1320));

  --ui-radius-sm: 8px;
  --ui-radius: var(--radius, 12px);
  --ui-radius-lg: 16px;

  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --ui-shadow-2: var(--shadow, 0 10px 30px rgba(0, 0, 0, .4));
  --ui-shadow-3: 0 24px 70px rgba(0, 0, 0, .55);

  --ui-ring: 0 0 0 3px rgba(79, 140, 255, .28);
  --ui-accent: var(--accent, #4f8cff);
  --ui-border: var(--border, #232b3a);

  --ui-trans: .16s cubic-bezier(.4, 0, .2, 1);
  --ui-trans-slow: .24s cubic-bezier(.2, .8, .3, 1);
}

/* 选中文字：跟随主题色，避免系统默认蓝与主题冲突 */
::selection { background: color-mix(in srgb, var(--ui-accent) 34%, transparent); }

/* ───────────────────────── 2. 滚动条（全站统一：细、半透明、悬浮加深） ───────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ui-border);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted, #8b97a7) 70%, transparent); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ───────────────────────── 3. 焦点态（键盘可达性 + 观感统一） ───────────────────────── */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

input, select, textarea { transition: border-color var(--ui-trans), box-shadow var(--ui-trans), background var(--ui-trans); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--ui-accent) !important;
  box-shadow: var(--ui-ring);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted, #8b97a7) 85%, transparent); }

/* ───────────────────────── 4. 按钮（统一过渡 / 悬浮 / 按下 / 禁用） ───────────────────────── */
button, .btn, a.btn {
  transition: background var(--ui-trans), border-color var(--ui-trans), color var(--ui-trans),
              transform var(--ui-trans), box-shadow var(--ui-trans), filter var(--ui-trans);
}
button:not(:disabled):not([disabled]):hover, .btn:not(:disabled):hover { filter: brightness(1.09); }
button:not(:disabled):not([disabled]):active, .btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.97); }
button:disabled, .btn:disabled, button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.btn.primary, button.primary { box-shadow: var(--ui-shadow-1); }
.btn.primary:not(:disabled):hover, button.primary:not(:disabled):hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent) 34%, transparent);
}

/* ───────────────────────── 5. 弹窗 / 抽屉：统一背景虚化、圆角阴影、入场动效 ───────────────────────── */
.modal, .modal-overlay {
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  backdrop-filter: blur(6px) saturate(1.15);
}
/* index.html：<div class="modal" hidden>；显示时去掉 hidden */
.modal:not([hidden]) .modal-box { animation: ui-pop var(--ui-trans-slow); }
/* mobile.html：.modal.open > .sheet（底部抽屉，从下往上） */
.modal.open .sheet { animation: ui-sheet-up var(--ui-trans-slow); }
/* workflow_editor.html / workflow_chat.html：.modal-overlay.visible > .modal-box */
.modal-overlay.visible .modal-box { animation: ui-pop var(--ui-trans-slow); }

@keyframes ui-pop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ui-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal:not([hidden]) .modal-box, .modal.open .sheet, .modal-overlay.visible .modal-box { animation: none; }
}

/* 弹窗内标题：统一间距与字重 */
.modal-box > h3:first-child, .sheet > h3:first-child { letter-spacing: .01em; }

/* 标准弹窗三段式（供需要"头/体/脚固定、仅中间滚动"的弹窗使用） */
.ui-dialog { display: flex; flex-direction: column; overflow: hidden; }
.ui-dialog-head { flex: 0 0 auto; }
.ui-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.ui-dialog-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--ui-border);
}

/* ───────────────────────── 6. 卡片 / 列表行：统一圆角与悬浮反馈 ───────────────────────── */
.card, .item, .expert-card, .tool-card, .test-msg .bubble {
  transition: background var(--ui-trans), border-color var(--ui-trans), box-shadow var(--ui-trans);
}
.item:hover, .expert-card:hover, .tool-card:hover { border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border)); }

/* ───────────────────────── 7. 表格 ───────────────────────── */
table { font-variant-numeric: tabular-nums; }
th { letter-spacing: .02em; }
tbody tr { transition: background var(--ui-trans); }
tbody tr:hover { background: color-mix(in srgb, var(--panel, #141a26) 65%, transparent); }

/* ───────────────────────── 8. 代码块 / 等宽文本 ───────────────────────── */
pre, code, kbd, samp { font-variant-ligatures: none; }
pre {
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-border);
  background: var(--ui-input-bg);
}

/* ───────────────────────── 9. 徽标 / 标签：统一圆角与内距 ───────────────────────── */
.chip, .pill, .badge, .tag, .expert-tag, .cap {
  border-radius: 999px;
  transition: background var(--ui-trans), color var(--ui-trans), border-color var(--ui-trans);
}

/* ───────────────────────── 10. 主题切换时的整体过渡（避免生硬闪变） ───────────────────────── */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { transition: background var(--ui-trans-slow), color var(--ui-trans-slow); }

/* ───────────────────────── 11. 页面级打磨（仅加过渡/悬浮反馈，不改布局） ───────────────────────── */

/* 增强功能中心 / 侧边导航 */
.nav a { transition: background var(--ui-trans), color var(--ui-trans); }

/* 工作流编排器 & 工作流对话：节点模板、标签页、画布节点 */
.node-template {
  transition: background var(--ui-trans), border-color var(--ui-trans), transform var(--ui-trans);
}
.node-template:hover {
  transform: translateX(2px);
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-panel-2));
}
.right-tabs button { transition: color var(--ui-trans), border-color var(--ui-trans), background var(--ui-trans); }
.right-tabs button:hover { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }
.wf-node { transition: border-color var(--ui-trans), box-shadow var(--ui-trans); }
.wf-node:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }
.modal-item { transition: background var(--ui-trans); }

/* 移动端：底部抽屉与菜单行 */
.sheet { box-shadow: 0 -18px 50px rgba(0, 0, 0, .5); }
.sheet-row { transition: background var(--ui-trans); }
.sheet-row:active { background: color-mix(in srgb, var(--ui-accent) 12%, transparent); }
.sheet-btn { transition: filter var(--ui-trans), transform var(--ui-trans); }
.sheet-btn:active { transform: translateY(1px); }

/* 分享页：阅读体验 */
.wrap { line-height: 1.8; }

/* 12. 弹窗内容归一化 */
.modal-box { box-shadow: var(--ui-shadow-3); }
.modal-box label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; }
.modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { box-sizing: border-box; padding: 8px 10px; min-height: 36px; }
.modal-box textarea { box-sizing: border-box; padding: 8px 10px; min-height: 72px; }
.modal-box .btn, .modal-box button { min-height: 32px; }
.modal-actions { flex-wrap: wrap; align-items: center; }
.modal-actions .btn, .modal-actions button { min-width: 76px; }

/* 开关：禁止文字被挤成竖排；表格 / 代码块统一观感 */
.switch { flex: 0 0 auto; }
.switch-label { white-space: nowrap; }
.modal-box table { width: 100%; }
.modal-box pre { max-height: 42vh; overflow: auto; }
.modal-box .list { max-height: 46vh; overflow-y: auto; }