/* ============================================================
   可信交付流水线（Interop）—— 三平台编排控制台样式
   复用 v2 设计令牌（--c-*），与 ip-card / gov-pill 语言一致。
   ============================================================ */
.io-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.io-pipe { display: grid; gap: 12px; }
.io-stage {
  border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface);
  overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.io-stage.idle { opacity: .72; }
.io-stage.run { border-color: var(--c-primary-l); box-shadow: 0 0 0 3px var(--c-primary-soft); opacity: 1; }
.io-stage.ok { border-color: #BFE0CC; opacity: 1; }
.io-stage.no, .io-stage.block { border-color: #E7C2BE; opacity: 1; }

.io-stage-h {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--c-line-2); background: var(--c-surface-2);
}
.io-stage-h > div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.io-stage-h b { font-size: 13.5px; color: var(--c-ink); }
.io-sub { font-size: 11.5px; color: var(--c-ink-3); }
.io-no {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
  background: var(--c-primary); color: #fff; font-feature-settings: "tnum";
}
.io-stage.idle .io-no { background: var(--c-ink-4); }
.io-stage.ok .io-no { background: var(--c-success); }
.io-stage.no .io-no, .io-stage.block .io-no { background: var(--c-danger); }

.io-state { font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); white-space: nowrap; }
.io-state.ok { color: var(--c-success); }
.io-state.warn { color: var(--c-warn); }
.io-state.no { color: var(--c-danger); }

.io-stage-b:empty { display: none; }
.io-stage-b { padding: 12px 16px; }

.io-kv { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: 12px; color: var(--c-ink-2); }
.io-kv span { white-space: nowrap; }
.io-kv b { font-feature-settings: "tnum"; color: var(--c-ink); }
.io-kv b.ok { color: var(--c-success); }
.io-kv b.warn { color: var(--c-warn); }
.io-kv b.no { color: var(--c-danger); }
.io-kv code { background: var(--c-surface-2); border: 1px solid var(--c-line-2); border-radius: 5px; padding: 0 5px; font-size: 11px; }

.io-ev-list { display: grid; gap: 6px; margin-top: 10px; }
.io-ev { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.5; }
.io-ev-ref {
  flex: none; font-size: 10px; font-weight: 600; color: var(--c-primary);
  background: var(--c-primary-soft); border-radius: 5px; padding: 1px 6px;
}
.io-ev b { color: var(--c-ink); font-weight: 600; }
.io-ev .muted { color: var(--c-ink-3); }

.io-answer {
  margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--c-ink-2);
  background: var(--c-surface-2); border-radius: 9px; padding: 11px 13px;
  border: 1px solid var(--c-line-2);
}

.io-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; margin-top: 10px; }
.io-metric {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 11px; color: var(--c-ink-3); background: var(--c-surface-2);
  border: 1px solid var(--c-line-2); border-radius: 7px; padding: 5px 9px;
}
.io-metric b { font-feature-settings: "tnum"; font-size: 12.5px; }
.io-metric b.ok { color: var(--c-success); }
.io-metric b.warn { color: var(--c-warn); }
.io-metric b.no { color: var(--c-danger); }

.io-log { margin-top: 8px; font-size: 11.5px; color: var(--c-ink-3); display: grid; gap: 2px; }
.io-log div { line-height: 1.5; }

/* 连通性条复用 .sso-conn（v2.css）；此处补 b.ok/b.no 着色 */
.sso-conn b.ok { color: var(--c-success); }
.sso-conn b.no { color: var(--c-danger); }

/* 真实后端开关（M1/M3/M4 内联切换 mock↔真实）*/
.io-switch {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--c-ink-2); white-space: nowrap;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 8px; padding: 6px 10px; user-select: none;
}
.io-switch input { accent-color: var(--c-primary); width: 14px; height: 14px; cursor: pointer; }
.io-switch:hover { border-color: var(--c-primary-l); }

/* 编排节点链（interop C2 阶段 DAG 摘要）*/
.io-dag { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.io-node {
  display: inline-flex; flex-direction: column; line-height: 1.3;
  font-size: 11.5px; font-weight: 600; color: var(--c-ink);
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-success); border-radius: 7px; padding: 4px 9px;
}
.io-node.degraded { border-left-color: var(--c-warn); }
.io-node.failed { border-left-color: var(--c-danger); }
.io-node i { font-style: normal; font-weight: 400; font-size: 10px; color: var(--c-ink-3); }
.io-node-arrow { color: var(--c-ink-4); font-weight: 700; }

/* s5 编排画板：放大端口可抓取区（画布缩放后端口仍易点中），连线手型 */
#s5-stage .flow-port { width: 13px; height: 13px; }
#s5-stage .flow-port::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
#s5-stage .flow-port.out { cursor: crosshair; border-color: var(--c-primary); background: var(--c-primary); }
#s5-stage .flow-port.out::before { cursor: crosshair; }
#s5-stage .flow-node { cursor: grab; user-select: none; -webkit-user-drag: none; }
.node-palette-item { user-select: none; }
.node-palette-item.dragging { opacity: .5; }
#s5-canvas { cursor: default; }

/* s5 真实编排器嵌入 + 视图切换段控 */
.s5-seg.seg { display: inline-flex; }
.s5-embed { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: #fff; height: 660px; box-shadow: var(--sh-sm); }
.s5-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* s5 · v3 智能体规格草稿卡片 */
.v3-draft { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; cursor: pointer; transition: border-color .12s, box-shadow .12s; background: var(--c-surface); }
.v3-draft:hover { border-color: var(--c-primary-l); box-shadow: var(--sh-sm); }
.v3-draft-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v3-draft-h b { font-size: 13px; color: var(--c-ink); }
.v3-draft-m { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 11px; }
.v3-bar { height: 6px; border-radius: 4px; background: var(--c-line-2); overflow: hidden; margin: 5px 0; }
.v3-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-l)); }

/* 引导式智能体构建 · 模板推荐卡 */
.aw-tpl { border: 1px solid var(--c-line); border-radius: 11px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; background: var(--c-surface); }
.aw-tpl:hover { border-color: var(--c-primary-l); box-shadow: var(--sh-sm); }
.aw-tpl.sel { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.aw-tpl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-tpl-h b { font-size: 13.5px; color: var(--c-ink); }

/* ===== 编排体检 · 提示与建议（s5 画板） ===== */
.s5-lint-list { display: flex; flex-direction: column; gap: 7px; }
.s5-lint-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--c-surface-2); font-size: 12px; line-height: 1.4; }
.s5-lint-item .s5-lint-msg { flex: 1; color: var(--c-ink-2); }
.s5-lint-item .s5-lint-ico { display: inline-flex; flex: none; }
.s5-lint-item.lv-error { border-color: #f1c2c0; background: #fdf3f2; }
.s5-lint-item.lv-error .s5-lint-ico { color: var(--c-danger); }
.s5-lint-item.lv-error .s5-lint-msg { color: #9a3b36; }
.s5-lint-item.lv-warn { border-color: #f0dcb8; background: #fdf8ee; }
.s5-lint-item.lv-warn .s5-lint-ico { color: var(--c-warn); }
.s5-lint-item.lv-info { border-color: var(--c-line-2); background: var(--c-surface-2); }
.s5-lint-item.lv-info .s5-lint-ico { color: var(--c-primary); }
.btn.xs { padding: 2px 9px; font-size: 11px; border-radius: 6px; flex: none; height: auto; line-height: 1.7; }
@keyframes s5pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(27,60,130,0); } 50% { box-shadow: 0 0 0 4px rgba(27,60,130,.28); } }

/* ===== v4 向导 / v3 草稿 提示能力 ===== */
.aw-hint { margin-top: 8px; }
.aw-hint-head { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--c-ink-2); }
.aw-hint-head.ok { color: var(--c-success); }
.aw-hint-head.warn { color: var(--c-warn); }
.aw-hint-list { margin: 6px 0 0 18px; padding: 0; font-size: 12px; color: var(--c-ink-3); line-height: 1.6; }
.aw-hint-list li { margin-bottom: 3px; }

/* ===== 推荐依据 / 为什么用这个工具 ===== */
.why-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--c-line-2); font-size: 12.5px; line-height: 1.55; }
.why-row:last-child { border-bottom: 0; }
.why-row .why-k { flex: none; width: 92px; color: var(--c-ink-3); font-weight: 600; }
.why-row span:last-child { color: var(--c-ink-2); }
.why-tool { border: 1px solid var(--c-line-2); border-radius: 9px; padding: 9px 11px; background: var(--c-surface-2); }
.why-tool-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.why-tool-h b { font-size: 12.5px; color: var(--c-ink); }
.why-tool-d { font-size: 11.5px; color: var(--c-ink-3); margin-top: 3px; line-height: 1.5; }
.why-tool-r { font-size: 11.5px; color: var(--c-primary); margin-top: 3px; line-height: 1.5; }

.mb12 { margin-bottom: 12px; }