/* Agent2API · 账号页「多提供商」增量样式（1.x 之后新增的那一层）

   与 page-accounts.css 的分工：那个文件是账号页原有的卡片 / 分组 / 批量栏骨架，
   本文件只装 Agent2API 改造新增的部分 —— 提供商组头与路由徽标、提供商下拉、
   桌面端账号徽标、添加账号弹窗的提供商分叉与分段选择器。
   拆分方式：原 page-accounts.css 第 717 行起整段搬出（逐字未改），
   两个文件都必须在 components.css 之后引入（见 index.html）。 */

/* ═══ Agent2API 多提供商（账号页）══════════════════════════════════════
   顶层分组由「版本」改为「提供商」（accounts-model.js 的 buildGroups）：workbuddy
   组内保留国内 / 国际二级分组（.acct-group-title.sub），其余家组内直接平铺。
   .acct-group-title 仍是网格横跨整行那个类，只是内容从「国内账号 · 3」变成
   「WorkBuddy 14 个账号 路由 10」。

   ── 表格化之后的引用情况 ──────────────────────────────────────
   列表改成「四家混排的一张表」后，**组头行整个下线了**（行首不再插分界行，
   见 accounts-view.js 的 render 注释）。于是本段里三条规则没有引用了：
     .acct-group-title .pgroup-label
     .acct-group-title .pgroup-count
     .acct-group-title .pgroup-route
   三条都**保留未删** —— 它们与 page-accounts.css 里的 .acct-group-title 是一套，
   要恢复卡片视图就一起恢复。表格里「这一行属于哪家」改由 .pbadge（表格样式文件）
   的彩色标签表达，那枚标签的悬浮说明里保留了「路由 N」这条信息。
   注意 providers.js 的摘要（label / routePriority / count）照旧在用，
   只是不再画成组头，而是画进每一行的提供商列。 */

/* 提供商组头：主色比二级组头重一档，让「换了一家」一眼可见 */
.acct-group-title .pgroup-label {
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.acct-group-title .pgroup-count {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* 路由优先级徽标：中性形制（不与「限流 / 代理异常」那类告警色抢注意力）。
   它回答「同一模型多家可提供时谁先试」，是偶尔查一次的配置值，不是要盯的状态，
   所以右推到组头末端、字号再收一号。 */
.acct-group-title .pgroup-route {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}

/* 二级（国内 / 国际）组头：字号更小、分隔线更淡，表达「这是上一级的细分」 */
.acct-group-title.sub { margin-top: -4px; font-size: 10px; color: var(--text-3); }
.acct-group-title.sub::after { background: var(--hairline); }

/* ⋯ 菜单里的置灰项（桌面端账号的「删除账号」）：保留可见但不可点，把「不可删除」
   显式呈现出来（悬浮有 title 说明原因），而不是让这一项凭空消失 —— 入口消失只会
   让人以为菜单坏了或功能丢了。 */
.more-menu button:disabled { color: var(--text-3); opacity: .55; cursor: not-allowed; }
.more-menu button:disabled:hover { background: transparent; color: var(--text-3); }

/* 批量栏的「按提供商计数」摘要（`WorkBuddy 14 · 小浣熊 3`）：紧跟在「共 N 个」
   之后，同色系；窄窗口允许省略 —— 它只是补充信息，完整分组在列表组头里。 */
.provider-summary {
  max-width: 40%;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 工具条里注入的提供商下拉：模型下拉才需要「重一档」（它决定队列口径），
   这里只给最小宽度，免得 label 被压成一两个字 */
#account-provider-filter { min-width: 132px; }

/* ─── 添加账号弹窗的提供商分叉（结构由 account-panel.js 注入）─── */
.add-provider-block[hidden] { display: none; }
.add-provider-block { display: flex; flex-direction: column; gap: 16px; }

/* ─── 添加账号弹窗：统一用分段选择器（结构与样式见 index.html / 本文件）───
   .seg / .seg-item 的既有规则在 components.css（账号页筛选栏在用，不动它），
   这里只做弹窗内的尺寸微调与层级补充。 */

/* 弹窗里的分段控件与账号页筛选栏同一套视觉，只是弹窗更宽、点选更从容，
   项高从 24 放到 28；提供商那一行家数多了要能换行。
   align-self 只对「直接挂在 .modal-section 下」的那些生效 —— .modal-section 是
   flex 列容器，不顶到起始边就会被拉成整行宽（两个选项配一条通栏边框很难看）；
   挂在 .field-row 里的（打开方式）则要保持行内联排。 */
#add-modal .add-seg { flex-wrap: wrap; max-width: 100%; }
#add-modal .modal-section > .add-seg { align-self: flex-start; }
#add-modal .add-seg .seg-item { height: 28px; padding: 0 12px; font-size: 12.5px; }

/* ─── 添加账号弹窗：两步结构（第 1 步选家 / 第 2 步选方式填凭证）───
   改造前是一屏里两层横向分段（上面 9 项选家、下面最多 5 项选方式），小窗口下换行、
   找不到入口；拆成两步后每一步只回答一个问题。两个容器由 add-provider-forms.js 注入，
   这里只管长相。 */
.add-step[hidden] { display: none; }
.add-step { display: flex; flex-direction: column; gap: 16px; }

/* 第 1 步：提供商卡片列表（家数动态：注册表加一家就多一张，自定义家建一家多一张） */
.add-provider-search { width: 100%; }
.add-provider-search .input { padding-left: 30px; }
.add-provider-grid {
  display: grid;
  /* 240 起步：弹窗（约 600px 内容宽）下稳定两列，宽窗口自动三列；
     再窄的窗口落到一列 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.add-provider-card {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 覆盖全局 `button { height: 30px }`：卡片高度由内容（logo + 两行文字）决定，
     否则会被压成 30px —— 卡片本身是 <button>，那条规则直接命中 */
  height: auto;
  padding: 14px 16px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.add-provider-card:hover { border-color: var(--primary-bd); background: var(--primary-soft); }
.add-provider-card:focus-visible { box-shadow: var(--ring); }
/* 「新建」那张卡横跨整行：它的说明比别家的账号数长，挤在单列宽度里会折成两行 */
.add-provider-card.is-new { grid-column: 1 / -1; border-style: dashed; background: var(--surface-2); }
.add-provider-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #0b1020));
}
.add-provider-logo.is-new {
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px dashed var(--border-strong);
  font-weight: 600;
}
/* 真实图标（取自各客户端安装目录内嵌的图标）：图片填满徽章。字母底的渐变
   必须去掉 —— 图形四角透明，留着会透出蓝底；圆角与外壳一致，图自带圆角
   与不带都自然 */
.add-provider-logo.has-icon { background: none; }
.add-provider-logo.has-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: contain;
}
.add-provider-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.add-provider-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.add-provider-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: var(--r-xs);
  border: 1px dashed var(--border-strong);
  color: var(--text-3);
}
.add-provider-meta {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-provider-go { flex: 0 0 auto; color: var(--text-3); font-size: 15px; }
.add-provider-empty {
  grid-column: 1 / -1;
  padding: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

/* 第 2 步的返回键：做成 .modal-head 里的一枚图标钮，与右侧关闭键对称。
   原来它是一条独立的「‹ 上一步　已选：xxx」返回条 —— 独占一整行，而那句「已选」
   和弹窗标题说的是同一件事（标题已经是「登录 / 添加 智谱 GLM 账号」），信息量为零
   却把弹窗又切掉一段。收进头部后整行省掉，标题自己就是面包屑。 */
#add-modal .add-back {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0 0 2px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-3);
  font-size: 19px;
  line-height: 1;
}
#add-modal .add-back:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: transparent;
  color: var(--text);
}
#add-modal .add-back[hidden] { display: none; }

/* 底部操作条：主按钮从字段流里拿出来放这里，失败提示也有了固定位置。
   .modal-foot 自带 display:flex，[hidden] 要显式覆盖浏览器的默认样式。
   没有块把按钮搬进来时整条收起（内置家的按钮仍在各自段落里，不受影响）。 */
#add-modal .modal-foot[hidden] { display: none; }
.add-foot-hint { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--text-3); }
.add-foot-hint.err { color: var(--danger); }
.add-foot-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.add-foot-actions > button[hidden] { display: none; }

/* ─── 添加账号弹窗：表单网格（标签列定宽右对齐）───
   .field-row 是「标签自然宽度 + 控件吃剩余」，四个标签宽窄不一，四个控件的左边缘
   就四段锯齿 —— 这是表单看着散的主因。这里改成两列网格：标签列定宽 88px、右对齐，
   控件一律落在同一条竖线上。行高 30 与全局控件同高，标签设成等高再垂直居中，
   基线就和输入框里的文字对齐了。 */
.add-form { display: flex; flex-direction: column; gap: 13px; }
.add-field {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 5px 12px;
}
.add-field > label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  height: 30px;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}
/* 必填只标一枚星号，不把「（必填）」塞进标签：后者让四行标签的字重与长度都不齐 */
.add-field > label .req { color: var(--danger); font-style: normal; font-weight: 700; }
.add-field > input,
.add-field > select,
.add-field > textarea { grid-column: 2; grid-row: 1; width: 100%; max-width: none; }
/* 帮助文字常驻在控件下方（不用 placeholder —— 一输入就没了）。
   字号 / 行高沿用 components.css 的 .hint（与设置页那些字段说明同一档），
   这里只管把它放到控件列下面，不缩到标签列里去 —— 与 page-settings.css 的
   `.retention-row > .hint` 是同一手法。 */
.add-field > .hint { grid-column: 2; grid-row: 2; }

/* 区块头：一行区块名 + 一行用途说明。区块名取「上游信息」这类**部位名**，
   不再复述弹窗标题 —— 原来卡内 h3、弹窗标题、下面段落三层说同一句话。 */
.add-panel-head { display: flex; flex-direction: column; gap: 4px; }
.add-panel-head > span { font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.add-panel-head b { color: var(--text); font-weight: 620; }

/* 分段控件前的行内标签（如「打开方式」）：与 .field-row > label 同形制 */
#add-modal .add-seg-label { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }

/* 网页登录那一段里的「打开方式」（Qoder）：缩进 + 左侧竖线，
   让「这是网页登录的子项」一眼可见，而不是与它并列的另一块。 */
#add-modal .add-sub {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 11px;
  border-left: 2px solid var(--border);
}

/* .modal-section 自带 display:flex，需显式覆盖浏览器的 hidden 默认样式。 */
#add-modal .modal-section[hidden],
#add-modal .add-sub[hidden] { display: none; }

/* 纵向表单行（token / refreshToken）：标签在上、输入框占满整宽 ——
   这些值很长，横排会把输入框压成一条缝 */
.field-row.stack { flex-direction: column; align-items: stretch; gap: 6px; }
.field-row.stack > label { color: var(--text-2); font-size: 12.5px; }
.field-row.stack textarea { width: 100%; min-height: 0; font-family: var(--font-mono); font-size: 11.5px; }

/* 行内文字链接（「小浣熊客户端登录态文件」）：点了在弹窗里显示完整路径 */
.raccoon-hint-link { color: var(--primary-fg); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

/* ─── 自定义提供商的下拉（见 add-custom-provider.js）────────────────
   文本输入框走全局 input 样式（flex: 1 1 auto 自动吃剩余宽度）；select 没有那条
   全局伸展，这里显式给上，否则协议 / 提供商下拉缩在内容宽度上，与同一行的
   标签之间留一大块空白。max-width 收口：Base URL 这类长值不该把弹窗撑宽。
   注意：添加弹窗里的那两个下拉已经走 .add-field 网格，由
   `.add-field > select { max-width: none }` 放开到整列宽 —— 320px 会让协议下拉
   比上下两行的输入框短一截，长选项还会被截成「OpenAI - Chat Completi…」。
   这条 max-width 服务的是横排 .field-row 里的下拉：账号设置弹窗那段
   「提供商」（account-panel.js 注入）就是这种排法。 */
.custom-provider-select { flex: 1 1 auto; max-width: 320px; }

/* 自定义提供商管理弹窗的列表（.cp-*）曾在这里：那颗「自定义提供商」按钮与
   弹窗已整体移除（模型清单统一到「模型管理」页，编辑与删除搬进账号设置的
   「提供商」一段），相关规则随之删除。 */