/* ===================================================================
   组件制式统一层 · design-system.css
   -------------------------------------------------------------------
   加载顺序：styles.css → appearance-plus.css → 本文件（优先级最高）。
   定位：全站「按钮 / 输入框 / 弹窗」的单一制式来源。全程使用 CSS 变量
   (token)，自动适配亮 / 暗主题与各换肤主题。

   背景：历史上项目里有 40+ 种各写各的按钮、8 种高度(24~40)、7 种圆角、
   5 种边框灰、6 种文字灰，且 .danger-btn / .group-mode-btn 被重复定义、
   互相打架。本层把它们收敛成一套统一制式，并修复弹窗互相遮挡的 z-index。

   维护原则：要调整全站控件观感，改这里的 token / 分组规则即可，不要再回到
   styles.css 里给单个按钮写死像素。
   =================================================================== */

/* ========== 0. 制式 token ========== */
:root {
  /* 控件高度阶 */
  --ctl-h-micro: 28px;   /* 行内微型图标钮（翻页 / 删除 / 小操作，嵌在 grid 行里） */
  --ctl-h-sm: 30px;      /* 小钮 */
  --ctl-h: 34px;         /* 标准钮 / 输入框（基准） */
  --ctl-h-tool: 32px;    /* 工具栏 / 快捷胶囊钮 */
  --ctl-h-lg: 40px;      /* 大操作钮 / 大选择器（角色面板等） */
  /* 控件字号 */
  --ctl-fz: 13px;
  --ctl-fz-sm: 12.5px;
  /* 控件横向内边距 */
  --ctl-px: 14px;
  --ctl-px-sm: 11px;
  /* 控件默认文字色（暗色下变浅） */
  --ctl-fg: #4b524c;
  /* 统一聚焦光环 */
  --focus-ring: 0 0 0 3px rgba(15,138,95,.12);
  /* z-index 层级阶 */
  --z-overlay: 600;      /* 所有模态弹窗基础层（JS 动态在此之上递增浮顶） */
  --z-popover: 9990;     /* 挂 body 的非模态浮层（右键菜单 / 世界状态弹层） */
  --z-toast: 9994;       /* 提示，最高 */
}
:root[data-mode="dark"] { --ctl-fg: var(--text); }

/* ========== 1. 弹窗层级体系（修复「弹窗互相遮挡」）==========
   统一所有模态弹窗的基础层级，删掉历史遗留的特例 z-index，改由 JS 在
   打开时按打开顺序递增设 inline z-index —— 后打开的永远盖在先打开的之上，
   从任意弹窗里再打开弹窗都不会被父弹窗遮住。 */
.overlay { z-index: var(--z-overlay); }
#roleInfoModal,
#pmInspectModal.overlay.show,
.overlay.up-overlay { z-index: var(--z-overlay); }
.toast { z-index: var(--z-toast); }
/* 右键菜单 / 世界状态弹层等挂 body 的非模态浮层，要始终能盖在弹窗之上 */
.ctx-menu, .wsb-pop { z-index: var(--z-popover); }

/* ========== 2. 可复用语义按钮（未来新按钮直接套这套类）========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--wechat-line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ctl-fg);
  font-size: var(--ctl-fz); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover { border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--wechat-green); border-color: transparent; color: #fff; }
.btn--primary:hover { background: var(--wechat-green-dark); border-color: transparent; color: #fff; }
.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.btn--danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.btn--accent { background: linear-gradient(135deg, #6d5efc, #8b6df0); border-color: transparent; color: #fff; }
.btn--accent:hover { filter: brightness(1.05); color: #fff; }
.btn--pill { border-radius: var(--r-pill); }
.btn--sm { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); font-size: var(--ctl-fz-sm); padding: 0 12px; }
.btn--lg { height: var(--ctl-h-lg); min-height: var(--ctl-h-lg); padding: 0 18px; }

/* ========== 3. 按钮收编（把历史类名归并到统一制式）========== */

/* 3.1 工具栏 / 快捷区 · 胶囊钮（统一 32px · 胶囊 · 12.5px） */
.chat-tool-btn, .top-action-btn,
.quick-btn, .scroll-bottom-btn, .vc-btn,
.protagonist-me-btn, .protagonist-chip, .protagonist-pick-btn,
.qc-chip, .mt-type-chip, .group-add-chip {
  height: var(--ctl-h-tool); min-height: var(--ctl-h-tool);
  border-radius: var(--r-pill);
  border: 1px solid var(--wechat-line);
  background: var(--surface); color: var(--ctl-fg);
  font-size: var(--ctl-fz-sm);
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.chat-tool-btn:hover, .top-action-btn:hover,
.quick-btn:hover, .scroll-bottom-btn:hover, .vc-btn:hover,
.protagonist-me-btn:hover, .protagonist-chip:hover, .protagonist-pick-btn:hover,
.qc-chip:hover, .mt-type-chip:hover, .group-add-chip:hover {
  border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink);
}

/* 3.2 迷你 / 行内操作钮（统一 32px · r-sm · 13px 线框） */
.ri-mini-btn, .ri-edit-btn, .ap-btn,
.gm-info-btn, .group-go-btn, .var-bind-btn,
.cg-add-row button, .pm-toolbar button {
  height: var(--ctl-h-tool); min-height: var(--ctl-h-tool);
  border-radius: var(--r-sm);
  border: 1px solid var(--wechat-line);
  background: var(--surface); color: var(--ctl-fg);
  font-size: var(--ctl-fz);
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.ri-mini-btn:hover, .ri-edit-btn:hover, .ap-btn:hover,
.gm-info-btn:hover, .group-go-btn:hover, .var-bind-btn:hover,
.cg-add-row button:hover, .pm-toolbar button:hover {
  border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink);
}
/* 迷你钮里仍是「绿色强调」的（默认动作钮） */
.ri-mini-btn { border-color: var(--jade-line); background: var(--jade-softer); color: var(--jade-ink); font-weight: 600; }
.ri-mini-btn:hover { background: var(--jade-soft); border-color: var(--jade-ring); }
.ri-mini-btn.ghost { border-color: var(--wechat-line); background: var(--surface); color: var(--muted); font-weight: 500; }
.ri-mini-btn.ghost:hover { border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink); }
/* 紫蓝「AI 智能动作」强调 */
.ri-mini-btn.ri-mini-btn-ai, .accent-btn {
  border-color: transparent; background: linear-gradient(135deg, #6d5efc, #8b6df0); color: #fff;
}
.ri-mini-btn.ri-mini-btn-ai:hover, .accent-btn:hover { filter: brightness(1.06); background: linear-gradient(135deg, #6d5efc, #8b6df0); color: #fff; }
.accent-btn svg { stroke: #fff; }

/* 3.3 表格行小钮（30px 方/矩形，嵌在编辑行里） */
.lt-rowbtn, .cg-mini {
  height: var(--ctl-h-sm); min-height: var(--ctl-h-sm);
  border-radius: var(--r-sm);
  border: 1px solid var(--wechat-line);
  background: var(--surface); color: var(--ctl-fg);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.lt-rowbtn:hover, .cg-mini:hover:not(:disabled) { border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink); }

/* 3.4 标准 / 弹窗操作钮（默认 34px · r-sm 线框；弹窗底部、Provider、行内动作） */
.modal-actions button,
.provider-row button,
.inline-actions button,
.onboard-btn {
  height: var(--ctl-h); min-height: var(--ctl-h);
  border-radius: var(--r-sm);
  border: 1px solid var(--wechat-line);
  background: var(--surface); color: var(--ctl-fg);
  font-size: var(--ctl-fz);
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.modal-actions button:hover,
.provider-row button:hover,
.inline-actions button:hover,
.onboard-btn:hover { border-color: var(--jade-ring); background: var(--jade-softer); color: var(--jade-ink); }

/* 3.5 大操作钮 / 大选择器（角色面板 40px 一档，彼此对齐） */
.ri-kb-primary, .ri-kb-picker-btn {
  height: var(--ctl-h-lg); min-height: var(--ctl-h-lg);
  border-radius: var(--r-md);
}

/* 3.6 主按钮（实底翡翠 · 白字） */
.primary, button.primary,
.ri-kb-primary,
.modal-actions .primary,
.param-tip-btn, .edit-save, .side-empty-btn {
  background: var(--wechat-green); border-color: transparent; color: #fff;
}
.primary:hover, button.primary:hover,
.ri-kb-primary:hover,
.modal-actions .primary:hover,
.param-tip-btn:hover, .edit-save:hover, .side-empty-btn:hover {
  background: var(--wechat-green-dark); border-color: transparent; color: #fff;
}

/* 3.7 危险钮（红色规格统一；收掉 .danger-btn 的三处重复定义） */
.danger-btn, .pme-delete, .st-remove, .graph-clear-btn, .tag-del-btn {
  height: var(--ctl-h); min-height: var(--ctl-h);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--surface); color: var(--danger);
  font-size: var(--ctl-fz);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.danger-btn:hover, .pme-delete:hover, .st-remove:hover, .graph-clear-btn:hover, .tag-del-btn:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger); color: var(--danger);
}
.chat-tool-btn.danger { color: var(--danger); }
.chat-tool-btn.danger:hover { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }

/* 3.8 图标方钮（仅图标，正方，统一圆角 + 中性 hover） */
button.icon, .pm-iconbtn, .graph-icon-btn, .bgm-btn {
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pm-iconbtn { border: 1px solid var(--wechat-line); background: var(--surface); }
button.icon:hover, .pm-iconbtn:hover, .graph-icon-btn:hover, .bgm-btn:hover {
  background: var(--jade-softer); color: var(--jade-ink);
}
.modal-head .icon { border-radius: var(--r-sm); color: var(--muted); }
.modal-head .icon:hover { background: var(--surface-3); color: var(--text); }

/* 3.9 微型嵌入钮（保留紧凑尺寸，只统一圆角 + 中性 hover；删除类红 hover） */
.msg-action-btn, .swipe-btn, .greeting-nav-btn, .role-info-btn,
.protagonist-mini-btn, .stpm-act {
  border-radius: var(--r-xs);
}
.qc-del, .an-group-del, .an-entry-del, .var-del, .an-del, .ri-var-del, .qr-del {
  border-radius: var(--r-xs);
  color: var(--danger);
  transition: background .14s ease, color .14s ease;
}
.qc-del:hover, .an-group-del:hover, .an-entry-del:hover, .var-del:hover,
.an-del:hover, .ri-var-del:hover, .qr-del:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
}

/* ========== 4. 分段控件 / 标签页（统一翡翠激活）========== */
.seg-toggle { background: var(--surface-3); border-radius: var(--r-md); padding: 3px; }
.seg { border-radius: var(--r-sm); font-size: var(--ctl-fz); font-weight: 600; color: var(--muted); }
.seg.active { background: var(--surface); color: var(--jade-ink); box-shadow: var(--shadow-xs); }
.studio-tab.active { color: var(--jade-ink); }
.qr-tab.active { color: var(--jade-ink); border-bottom-color: var(--jade); }

/* ========== 5. 表单 / 输入框制式 ========== */
/* 5.1 基础输入：统一边框、圆角、聚焦光环（覆盖各处硬编码 #e3e3e8 / 透明边） */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  border: 1px solid var(--wechat-line);
  border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus {
  border-color: var(--jade-ring); box-shadow: var(--focus-ring); outline: none;
}
/* 5.2 历史上硬编码边框 / 圆角的特化输入，统一收口 */
.cg-name-input, .qc-row input, .qc-row select,
.var-row2 input, .var-row input, .an-row input,
.an-group-name, .an-entry-title, .an-entry-desc, .an-add-entry,
.up-field input, .up-field textarea, .studio-textarea,
.ri-var-name, .ri-var-value, .ri-var-noteinput,
.ri-preset-select, .ri-kb-toolbar select, .pm-toolbar select, .pm-preset-label {
  border-color: var(--wechat-line);
  border-radius: var(--r-sm);
}
.cg-name-input:focus, .qc-row input:focus, .qc-row select:focus,
.var-row2 input:focus, .var-row input:focus, .an-row input:focus,
.an-group-name:focus, .an-entry-title:focus, .an-entry-desc:focus,
.up-field input:focus, .up-field textarea:focus, .studio-textarea:focus,
.ri-var-name:focus, .ri-var-value:focus, .ri-var-noteinput:focus,
.ri-preset-select:focus, .ri-kb-toolbar select:focus, .pm-toolbar select:focus {
  border-color: var(--jade-ring); box-shadow: var(--focus-ring); outline: none;
}
/* 5.3 大档选择器（角色面板）彼此对齐到 40px */
.ri-preset-select, .ri-kb-toolbar select { height: var(--ctl-h-lg); border-radius: var(--r-md); }
/* 5.4 复选 / 单选：统一翡翠 accent，文字走 token */
.check { color: var(--text); }
.check input[type="checkbox"], .check input[type="radio"],
input[type="checkbox"], input[type="radio"] { accent-color: var(--wechat-green); }

/* ========== 6. 弹窗 / 区块布局微调（统一留白节奏）========== */
.modal-actions { gap: var(--gap-2, 8px); }
.field { margin-bottom: 10px; }
.field label { color: var(--muted); font-size: 12px; }
.inline-actions, .switch-row { gap: 8px; }
.settings-section { border-radius: var(--r-md); }

/* ========== 7. 浮层圆角 / 阴影统一（下拉 / 菜单 / 气泡）========== */
.quick-panel, .more-menu, .mem-popover, .ctx-menu, .wsb-pop,
.ri-kb-picker-panel, .protagonist-picker-panel, .model-dropdown {
  border-radius: var(--r-md);
  border: 1px solid var(--wechat-line);
  box-shadow: var(--shadow-pop);
}