/* 独立页外壳样式（与门户共用 style.css 的变量与组件类） */

.phead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.phead .l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.phead .back { color: var(--accent); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.phead .back:hover { text-decoration: underline; }
.phead .sep { width: 1px; height: 15px; background: var(--line); flex: 0 0 auto; }
.phead .no {
  font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 4px; padding: 2px 6px; flex: 0 0 auto;
}
.phead h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.phead .sub {
  font-size: 13.5px; color: var(--ink-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.phead .r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.phead .env { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

.pwrap { max-width: 980px; margin: 0 auto; padding: 20px 22px 40px; }

.pfoot {
  max-width: 980px; margin: 0 auto; padding: 14px 22px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.pfoot a { color: var(--accent); text-decoration: none; }
.pfoot a:hover { text-decoration: underline; }
.pfoot span { color: var(--ink-4); }

/* 独立页里对话线程的高度（门户里由 flex 撑开，这里给固定高度） */
.pwrap .thread { max-height: 460px; overflow-y: auto; }

@media (max-width: 760px) {
  .phead { flex-wrap: wrap; }
  .phead .sub { display: none; }
  .pwrap { padding: 14px; }
  .pfoot { padding: 14px; }
}

/* 手机（<=640px）：与门户一致的触屏可用性处理。
 * 实测问题：窄屏下标题可能被逐字换行；按钮高度 20-25px 偏小不好点。
 * 这里给标题加 nowrap 兜底、控件提到 36px，并把控件区纵向堆叠。 */
@media (max-width: 640px) {
  .phead { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
  .phead .l { flex-wrap: wrap; }
  .phead h1 {
    font-size: 15px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .phead .r { flex-wrap: wrap; gap: 6px; }
  button, select { min-height: 36px; }
  button.sm, .ghost.sm { min-height: 32px; }
  input[type="text"], input:not([type]), select { min-width: 0; width: 100%; }
  .ctrls { flex-direction: column; align-items: stretch; gap: 8px; }
  .srcdoc, .block .bd p, .hint { font-size: 13.8px; }

  /* 触屏专用：小的文字链接要给出足够大的**可点区域**。
   * 实测：页脚那两个链接（`门户首页`、`02 多步处置链路 →`）在手机上
   * 只有 20px 高，手指容易点不中；而它们**没有 class**，
   * 所以按 `.back` 写规则不会命中（第一次改就踩到了这一点）。
   * 做法：直接按 .pfoot / .phead 里的 a 选，用 padding 把点击区撑到 40px，
   * 再用负 margin 抵消视觉位移，排版看起来不变。 */
  .pfoot a, .phead a { padding: 11px 8px; margin: -11px -8px; display: inline-block; }
  .phead .no, .phead .env { padding: 10px 6px; margin: -10px -6px; }
}

/* 模型页用的少量样式（沿用既有变量，不引入新色） */
.cp-h3 { font-size: 14px; margin: 20px 0 8px; color: var(--ink-2); }
.cp-dim { color: var(--ink-3); font-size: 12px; }
.cp-on { color: #1f6b43; font-weight: 700; font-size: 12px; }
.cp-list { display: flex; flex-direction: column; gap: 2px; }
.cp-item { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none;
  border: 1px solid transparent; }
.cp-item:hover { background: var(--bg-2, #f7f8fa); }
.cp-item.on { background: var(--bg-2, #f7f8fa); border-color: var(--line); }
.cp-item b { display: block; font-size: 13px; color: var(--ink-1); font-weight: 600; }
.cp-item span { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.cp-body { font-size: 13px; line-height: 1.7; }
.cp-doc h1 { font-size: 17px; margin: 0 0 12px; }
.cp-doc h2 { font-size: 14px; margin: 16px 0 6px; }
.cp-doc h3 { font-size: 13px; margin: 12px 0 4px; }
.cp-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.cp-doc th, .cp-doc td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }

/* ── 模型切换对比（模型与硬件页第四节）───────────────────────
 * 两列并排，同一问题同时给两个模型，方便当场对比。
 */
.ms-box{border:1px solid var(--line,#dde3ec);border-radius:12px;padding:16px;background:#fcfdff;margin-top:4px;}
.ms-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.ms-q{font-size:14px;color:var(--sub,#5b6472);}
.ms-ctl input{flex:1;min-width:240px;padding:10px 12px;border:1px solid var(--line,#dde3ec);
              border-radius:8px;font:inherit;font-size:15px;}
.ms-ctl button{padding:10px 18px;border:0;border-radius:8px;background:#2f6fd0;color:#fff;
               font:inherit;font-size:15px;cursor:pointer;}
.ms-ctl button:disabled{opacity:.55;cursor:default;}
.ms-hint{font-size:13.5px;color:var(--sub,#5b6472);margin:10px 0 14px;}
.ms-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:860px){.ms-pair{grid-template-columns:1fr;}}
.ms-col{border:1px solid var(--line,#dde3ec);border-radius:10px;background:#fff;overflow:hidden;}
.ms-col .ms-hd{padding:10px 13px;border-bottom:1px solid var(--line,#dde3ec);background:#f0f3f8;
               display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.ms-col .ms-hd b{font-size:15.5px;}
.ms-tag{font-size:12.5px;color:var(--sub,#5b6472);font-family:Consolas,monospace;}
.ms-ans{padding:13px;font-size:15px;line-height:1.72;min-height:118px;white-space:pre-wrap;
        word-break:break-word;}
.ms-ans.ms-run{color:var(--sub,#5b6472);}
.ms-ans.ms-err{color:#c0392b;}
.ms-idle{color:#98a1ae;}
.ms-ft{padding:8px 13px;border-top:1px solid var(--line,#dde3ec);background:#fafbfd;
       font-size:12.5px;color:var(--sub,#5b6472);font-family:Consolas,monospace;min-height:19px;}
.ms-h4{font-size:15.5px;margin:22px 0 8px;}

/* 知识库文档页：分组标题（正式语料 / 上传资料） */
.cp-sect{
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .4px; padding: 10px 2px 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 6px;
}
.cp-sect:first-child{ padding-top: 0; }
.cp-sect i{ font-style: normal; font-weight: 400; color: var(--ink-4); }

/* 知识库文档页：上传件的删除按钮 */
.cp-row{ position: relative; display: flex; align-items: stretch; gap: 6px; }
.cp-row .cp-item{ flex: 1 1 auto; min-width: 0; }
.cp-del{
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  font-size: 12px; line-height: 1; padding: 6px 9px;
  color: #a4322c; background: #fff; border: 1px solid #e6c9c6;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.cp-del:hover{ background: #fdf3f2; border-color: #d9a9a5; }
.cp-del:disabled{ color: var(--ink-4); border-color: var(--line); cursor: default; }