/* ─────────────────────────────────────────────
   文档页：接口条；模型管理页：模型表格 + 映射弹窗；网关 Key 页：Key 表格

   三个页面的样式同住一个文件，是因为它们共用同一套表格与面板骨架
   （.models-table 是模型管理与网关 Key 共用，见下方注释）。
   **接口条（.ep-*）R8 起住在「文档」页**：它原来在「网关 Key」页，
   整块搬走后这些规则一字未改 —— 它们没有按 [data-page] 收窄（CSS 本来就是
   全局加载的），所以换页面不需要动样式。这里只更正文件头的描述。
   ───────────────────────────────────────────── */

/* ─── 接口条：纵向列表，一行一条端点 ───
   （Base URL / 三种对话协议 / 模型列表；替代原「一行三段」布局 ——
   端点从 3 条涨到 5 条后，横排会把每条压到放不下完整 URL）
   每行两排：上排「名字 + 用途」，下排「方法+URL + 复制」。
   URL 独占一行才放得下完整地址，也不与说明抢宽度。 */
.ep-panel .panel-head { padding-bottom: 12px; }

/* 内部横线用 --hairline（比 --border 淡一档）：面板头用的也是它，
   整块看起来才是「一个面板里的分行」而不是几条独立边框叠在一起 */
.ep-list { border-top: 1px solid var(--hairline); }

.ep-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.ep-row:last-child { border-bottom: 0; }
/* 悬停整行淡底：复制按钮在行尾，行够宽时眼球容易跟丢是哪一条 */
.ep-row:hover { background: var(--surface-inset); }

.ep-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

.ep-name { color: var(--text); font-size: 12.5px; font-weight: 600; }

.ep-note { color: var(--text-3); font-size: 11.5px; }

.ep-line { display: flex; align-items: center; gap: 9px; margin-top: 5px; }

.ep-value {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 值可选中：想手动挑一段比复制整条更常见（比如只拿路径） */
  user-select: text;
}

/* 分组小标题：把「地址 / 对话协议 / 模型清单」三块视觉上分开，
   否则五条同构的行读起来是一整片 */
.ep-group {
  padding: 7px 16px 6px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-inset);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ─── 模型管理 ─── */
.models-count { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* 工具栏：提供商分段 + 状态分段 + 搜索，排成一行。
   它挂在 .panel-body 上（那条规则是 flex 纵向），这里必须显式改回横向，
   否则三个控件会各占一行并居中 */
.models-tools { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.models-tools .spacer { flex: 1 1 auto; }
.models-tools .seg-item .n { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.models-tools .seg-item.active .n { color: inherit; }

/* 刷新说明与逐家结果：常驻在表格下方，不随 toast 消失；有失败才标红 */
.models-refresh-note { color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
.models-refresh-note:empty { display: none; }
.models-refresh-note.err { color: var(--danger); }

/* 表格（模型管理 / 网关 Key 共用）：贴面板左右边缘，表头粘顶。
   overflow-anchor 同 .page.active：tbody 重建时不做锚定补偿，行内点开关视口不动 */
.models-table-wrap { overflow: auto; overflow-anchor: none; max-height: min(62vh, 720px); border-top: 1px solid var(--border); }

.models-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
}

.models-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--table-head-bg);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  white-space: nowrap;
}

.models-table td { padding: 8px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.models-table tbody tr:last-child td { border-bottom: 0; }
.models-table tbody tr:hover td { background: var(--row-hover); }
.models-table th.r, .models-table td.r { text-align: right; }
.models-table td.empty { padding: 26px 14px; text-align: center; color: var(--text-3); }

/* 列宽（合计 100%，table-layout: fixed 下按 colgroup 分配） */
.models-table .c-model { width: 25%; }
.models-table .c-rate { width: 7%; }
.models-table .c-source { width: 8%; }
.models-table .c-alias { width: 48%; }
.models-table .c-act { width: 12%; }
.keys-table .k-name { width: 22%; }
.keys-table .k-key { width: 44%; }
.keys-table .k-time { width: 16%; }
.keys-table .k-state { width: 8%; }
.keys-table .k-act { width: 10%; }

/* 禁用 / 已删除的行整体压淡，开关与操作列保持可点 */
.models-table tr.off td { opacity: .5; }
.models-table tr.off td.state, .models-table tr.off td.r { opacity: 1; }

/* 提供商分组行：表内的一条分组带。取 --surface-2，只比表体差一档 ——
   它仍是「表里的一行」，不该用卡内凹槽那档深色（那会把表切成几块）。 */
.models-table .tr-group td {
  padding: 5px 14px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}
.models-table .tr-group td:hover { background: var(--surface-2); }
.models-table .prov-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: 700;
}
/* 「未挂载的映射」分组表头：标签走警示色，与各家分组区分开 */
.models-table .tr-orphan .prov-tag { border-color: var(--warn-bd); background: var(--warn-soft); color: var(--warn); }
.models-table .tr-more td { padding: 4px 14px; text-align: center; }

/* 模型 id：等宽加粗，悬浮出复制按钮 */
.mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mid .t { font-family: var(--font-mono); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keys-table .mid .t { font-family: var(--font-sans); }
.mid .cp {
  flex: 0 0 auto;
  opacity: 0;
  height: 20px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-3);
  font-size: 12px;
}
.models-table tr:hover .mid .cp { opacity: 1; }
.mid .cp:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.mname { color: var(--text-3); font-size: 11.5px; }
.rate { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 映射名药丸：品牌色浅底；行禁用时随行压淡并加删除线。
   纵向排列（每条绑定独占一行，参照账号页模型管理弹窗）——映射一多条，
   横向 wrap 会挤成变宽的迷宫，竖着读每行一条才对得上「绑定列表」的心智。 */
.aliases { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.alias {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 3px 0 8px;
  border: 1px solid var(--primary-bd);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.alias.off { border-color: var(--border); background: var(--surface-inset); color: var(--text-3); text-decoration: line-through; }
/* 关闭的映射（chip 上自己的开关关着）：整体灰化弱化并加删除线，但仍可点
   （开关就在 chip 里）。与行级压淡的 .off 互相独立 —— 「行开着、某条映射
   关着」的状态要一眼可辨，所以另起一个类名。 */
.alias.map-off { border-color: var(--border); background: var(--surface-inset); color: var(--text-3); }
.alias.map-off .t { text-decoration: line-through; }
.alias .t { min-width: 0; overflow-wrap: anywhere; }
.alias { height: auto; min-height: 26px; max-width: 100%; padding-top: 3px; padding-bottom: 3px; gap: 5px; }
.binding-default { flex: 0 0 auto; padding: 0 4px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface); color: var(--text-3); font-family: var(--font-sans); font-size: 10px; font-weight: 500; }
.alias .switch { flex: 0 0 auto; }
.alias .alias-level, .alias .x { flex: 0 0 auto; }
#custom-models-modal .binding-reasoning { width: 110px; flex: 0 0 110px; }
#custom-models-modal .binding-add { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
#custom-models-modal .binding-add input { width: 150px; }
/* chip 内的小号开关：复用 .switch 的结构与交互（components.css），只在这里
   收尺寸 —— 药丸高 22px，滑块压到 24×14 才放得下；滑块位移同步缩放 */
.alias .switch { gap: 0; margin-right: 2px; }
.alias .switch .track { width: 24px; height: 14px; }
.alias .switch .track::after { top: 2px; left: 2px; width: 10px; height: 10px; }
.alias .switch input:checked + .track::after { transform: translateX(10px); }
/* 未挂载的映射（目标不在该家清单里）：警示色浅底，与正常映射的「品牌色 + 可点」
   一眼分开 —— 它不是错误，但确实需要用户处理（换个目标，或删掉） */
.alias.orphan { border-color: var(--warn-bd); background: var(--warn-soft); color: var(--warn); }
.alias .x {
  height: 16px;
  width: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: inherit;
  opacity: .6;
  font-size: 12px;
  line-height: 1;
}
.alias .x:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, var(--text) 10%, transparent); color: inherit; border-color: transparent; }

/* 思考等级标：贴在映射名药丸里的第二枚小按钮（`alias · high`）。
   为什么是「药丸里的一枚按钮」而不是再加一枚独立的药丸：等级是**这条映射的属性**，
   和对外名是同一件事的两个字段，放进同一枚药丸才读得出从属关系；
   独立药丸会让一屏里出现两倍数量的 chip，哪个是名字哪个是等级要靠猜。
   未绑定时（孤儿映射那组用）走虚线，与「已绑定」一眼分开。 */
.alias .alias-level {
  height: 16px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--primary-fg) 12%, transparent);
  box-shadow: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.alias .alias-level:hover:not(:disabled) {
  border-color: var(--primary-bd);
  background: var(--surface);
  color: var(--primary-fg);
}
.alias .alias-level.unset {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-3);
  font-weight: 600;
}
.alias .alias-level.unset:hover:not(:disabled) { border-style: solid; color: var(--primary-fg); }

/* 弹窗里的思考等级控件行：下拉 + 问号并排（问号的说明很长，放在下拉右边
   与设置页各面板标题的问号是同一个组件，见 css/tooltip.css）。 */
.reasoning-pick { display: flex; align-items: center; gap: 7px; }
.reasoning-pick select { flex: 1 1 auto; min-width: 0; }

.alias-add {
  height: 22px;
  padding: 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--text-3);
  font-size: 11px;
}
.alias-add:hover:not(:disabled) { border-color: var(--primary); background: transparent; color: var(--primary-fg); }

/* 行内操作：默认略淡，悬浮行时恢复 */
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-actions button { opacity: .75; }
.models-table tr:hover .row-actions button { opacity: 1; }
button.danger-text { color: var(--danger); }
button.danger-text:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }

/* 映射弹窗：左右两栏 + 箭头 + 预览 */
.mapping-row { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; align-items: end; }
/* 单列行（提供商）：只占左栏，与下面两栏行的左半对齐；右栏留空不塌 */
.mapping-row-single { grid-template-columns: 1fr 24px 1fr; }
.mapping-row-single .mapping-col { grid-column: 1; }
.mapping-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mapping-col label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.mapping-col input, .mapping-col select { width: 100%; }
/* 下拉被增强后原生 select 留壳里当尺寸锚，外壳就是可见控件 —— 宽度规则要落在壳上，
   否则「上游模型」列里 select（外壳撑满）会与同行的 input 一宽一窄 */
.mapping-col .select-shell { width: 100%; }
.mapping-arrow { text-align: center; color: var(--text-3); padding-bottom: 8px; }
.mapping-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.mapping-preview b { color: var(--primary-fg); }

/* 网关 Key 页：key 单元格 */
.keycell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.keycell .kv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }

/* 新建 / 编辑 Key 弹窗里的两个多选（可用提供商 / 可用模型）。
   原生 select 留在壳里当宽高锚，给它一个「够放下两个中文名」的下限、上界收在
   260px —— 勾多了由触发器里的文案自己省略号收住，这一行保持等高。`.field-row`
   是 flex 行，不设 flex:1 就会按内容宽度塌成很窄的一条。 */
#key-allowed-providers, #key-allowed-models {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 260px;
}
/* 弹窗里这两行之间的间距已经由行内 style 给了，这里只补「标签与控件不同基线」
   带来的视觉偏移（.field-row 是 align-items:center，多选外壳比 input 略高） */
#key-modal .field-row > label { align-self: center; }
/* 摘要行：与上面的说明同款小字，首行前留一点空隙（它是「当前选择」而不是
   「使用说明」，视觉上要分得开） */
#key-restrict-summary { margin-top: 2px; }