/* ==========================================================================
   AI 智能体系统运行动态路由图 样式表 (Magpie 风格)
   Dynamic Architecture Router - Magpie Aesthetic Edition
   ========================================================================== */

:root {
  --mr-bg-card-l: #ffffff;
  --mr-bg-card-d: #091638;
  --mr-border-l: rgba(16, 33, 74, 0.12);
  --mr-border-d: rgba(61, 115, 221, 0.22);
  --mr-tx-main-l: #10214a;
  --mr-tx-main-d: #f0f4ff;
  --mr-tx-sub-l: #4b6284;
  --mr-tx-sub-d: #9cb3ea;
  --mr-accent-blue: #3d73dd;
  --mr-accent-cyan: #06b6d4;
  --mr-accent-amber: #f59e0b;
  --mr-accent-red: #ef4444;
  --mr-line-idle-l: rgba(16, 33, 74, 0.16);
  --mr-line-idle-d: rgba(255, 255, 255, 0.14);
  --mr-line-active: #2563eb;
  --mr-line-active-d: #38bdf8;
  --mr-serving-bg-l: #10214a;
  --mr-serving-tx-l: #ffffff;
  --mr-serving-bg-d: #38bdf8;
  --mr-serving-tx-d: #051329;
}

/* 外部容器：与主站一致的排版节流 */
.magpie-router-wrap {
  width: 100%;
  position: relative;
}

/* 顶部场景选择区 (Tabs & 路由动态释义，对齐 Magpie 顶栏) */
.magpie-header-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
  position: relative;
  z-index: 40;
}

.magpie-tabs-ctrl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 40;
}

.magpie-tabs-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.magpie-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mr-accent-blue);
  line-height: 1;
  box-shadow: 0 1px 4px rgba(16, 33, 74, 0.06);
}

body.bp-dark .magpie-demo-pill {
  background: #0d1e45;
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.magpie-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: magpiePulse 1.8s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes magpiePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.magpie-tabs-hint {
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
  font-weight: 500;
}

body.bp-dark .magpie-tabs-hint {
  color: #cbd5e1;
}

.magpie-tabs {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  background: #eef2f8;
  padding: 5px;
  border-radius: 99px;
  border: 1px solid rgba(16, 33, 74, 0.14);
  box-shadow: inset 0 1px 2px rgba(16, 33, 74, 0.04), 0 2px 8px rgba(16, 33, 74, 0.05);
  flex-wrap: wrap;
  max-width: 100%;
}

body.bp-dark .magpie-tabs {
  background: #0d1e45;
  border-color: rgba(61, 115, 221, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.magpie-tab-btn {
  border: none;
  outline: none;
  background: transparent;
  padding: 7px 15px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.bp-dark .magpie-tab-btn {
  color: #9cb3ea;
}

.magpie-tab-btn:hover {
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.75);
}

body.bp-dark .magpie-tab-btn:hover {
  color: #f0f4ff;
  background: rgba(255, 255, 255, 0.08);
}

.magpie-tab-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(16, 33, 74, 0.14);
  font-weight: 700;
}

body.bp-dark .magpie-tab-btn.is-active {
  background: #1e3a8a;
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  font-weight: 700;
}

/* Tab 按钮内演示场景标牌 */
.magpie-tab-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: #e2e8f0;
  color: #334155;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
  line-height: 1.2;
}

body.bp-dark .magpie-tab-tag {
  background: #18336d;
  color: #9cb3ea;
}

.magpie-tab-btn:hover .magpie-tab-tag {
  background: #dbeafe;
  color: #1d4ed8;
}

body.bp-dark .magpie-tab-btn:hover .magpie-tab-tag {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.magpie-tab-btn.is-active .magpie-tab-tag {
  background: #2563eb;
  color: #ffffff;
}

body.bp-dark .magpie-tab-btn.is-active .magpie-tab-tag {
  background: #38bdf8;
  color: #051329;
}

.magpie-tab-name {
  white-space: nowrap;
}

/* 移动端单列下拉菜单栏 (Mobile Dropdown Select)
   解决移动端横向左右滑动 Tab 栏不够直观、内容截断不易发现的问题 */
.magpie-mobile-select-wrap {
  display: none;
  width: 100%;
  position: relative;
  z-index: 50;
}

.magpie-mobile-select-wrap.is-open {
  z-index: 9999;
}

.magpie-select-box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(37, 99, 235, 0.32);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(16, 33, 74, 0.06), 0 1px 3px rgba(16, 33, 74, 0.04);
  transition: all 0.25s ease;
  cursor: pointer;
}

body.bp-dark .magpie-select-box {
  background: #0d1e45;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.magpie-mobile-select-wrap.is-open .magpie-select-box,
.magpie-select-box:active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

body.bp-dark .magpie-mobile-select-wrap.is-open .magpie-select-box,
body.bp-dark .magpie-select-box:active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.magpie-select-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.magpie-select-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--f-mono, monospace);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

body.bp-dark .magpie-select-tag {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.magpie-select-val {
  font-size: 13.5px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.bp-dark .magpie-select-val {
  color: #f8fafc;
}

.magpie-select-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #2563eb;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

body.bp-dark .magpie-select-arrow {
  background: rgba(255, 255, 255, 0.08);
  color: #38bdf8;
}

.magpie-mobile-select-wrap.is-open .magpie-select-arrow {
  transform: rotate(180deg);
  background: rgba(37, 99, 235, 0.15);
}

body.bp-dark .magpie-mobile-select-wrap.is-open .magpie-select-arrow {
  background: rgba(56, 189, 248, 0.22);
}

/* 自定义下拉菜单面板 (Custom Blueprint Dropdown Menu) */
.magpie-dropdown-list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(37, 99, 235, 0.35) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 16px 36px -4px rgba(16, 33, 74, 0.18), 0 4px 12px rgba(16, 33, 74, 0.08) !important;
  z-index: 99999 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
}

body.bp-dark .magpie-dropdown-list {
  background: #09193f !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 20px 48px -4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
}

.magpie-mobile-select-wrap.is-open .magpie-dropdown-list {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: magpieDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes magpieDropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.magpie-dropdown-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.magpie-dropdown-opt:hover {
  background: rgba(37, 99, 235, 0.08);
}

body.bp-dark .magpie-dropdown-opt:hover {
  background: rgba(56, 189, 248, 0.12);
}

.magpie-dropdown-opt.is-selected {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
}

body.bp-dark .magpie-dropdown-opt.is-selected {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.35);
}

.opt-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.opt-tag {
  flex-shrink: 0;
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: rgba(16, 33, 74, 0.08);
  color: #475569;
  line-height: 1.2;
  transition: all 0.18s ease;
}

body.bp-dark .opt-tag {
  background: rgba(255, 255, 255, 0.1);
  color: #9cb3ea;
}

.magpie-dropdown-opt.is-selected .opt-tag {
  background: #2563eb;
  color: #ffffff;
}

body.bp-dark .magpie-dropdown-opt.is-selected .opt-tag {
  background: #38bdf8;
  color: #051329;
}

.opt-label {
  font-size: 13px;
  font-weight: 550;
  color: #334155;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.18s ease;
}

body.bp-dark .opt-label {
  color: #cbd5e1;
}

.magpie-dropdown-opt.is-selected .opt-label {
  color: #0f172a;
  font-weight: 700;
}

body.bp-dark .magpie-dropdown-opt.is-selected .opt-label {
  color: #ffffff;
  font-weight: 700;
}

.opt-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--mr-accent-blue);
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.bp-dark .opt-check {
  color: #38bdf8;
}

.magpie-dropdown-opt.is-selected .opt-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .magpie-tabs {
    display: none !important;
  }
  .magpie-mobile-select-wrap {
    display: block !important;
  }
}

/* 场景释义卡片 */
.magpie-desc-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(16, 33, 74, 0.12);
  border-left: 4px solid var(--mr-accent-blue);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 4px 16px -4px rgba(16, 33, 74, 0.06), 0 1px 3px rgba(16, 33, 74, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

body.bp-dark .magpie-desc-card {
  background: #091838;
  border-color: rgba(61, 115, 221, 0.28);
  border-left-color: #38bdf8;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.magpie-desc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.magpie-desc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 3px 8px;
  border-radius: 5px;
}

body.bp-dark .magpie-desc-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}

.magpie-desc-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 500;
}

body.bp-dark .magpie-desc-sub {
  color: #9cb3ea;
}

.magpie-header-desc {
  font-size: 13.5px;
  color: #1e293b;
  line-height: 1.6;
  transition: opacity 0.3s ease;
  margin: 0;
  font-weight: 450;
}

body.bp-dark .magpie-header-desc {
  color: #e2e8f0;
}

/* 主路由大画布外框 (Magpie Board) */
.magpie-board {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--mr-border-l);
  border-radius: 20px;
  padding: clamp(20px, 2.5vw, 36px);
  box-shadow: 0 16px 48px -16px rgba(16, 33, 74, 0.08);
  overflow: hidden;
  transition: all 0.4s ease;
}

body.bp-dark .magpie-board {
  background: #071230;
  border-color: var(--mr-border-d);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

/* 核心 SVG 连线画布：绝对覆盖 */
.magpie-svg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.magpie-svg-canvas path.route-idle {
  fill: none;
  stroke: var(--mr-line-idle-l);
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  opacity: 0.65;
  transition: stroke 0.4s ease, opacity 0.4s ease;
}

body.bp-dark .magpie-svg-canvas path.route-idle {
  stroke: rgba(148, 163, 184, 0.45);
  opacity: 0.6;
}

.magpie-svg-canvas path.route-active {
  fill: none;
  stroke: var(--mr-line-active);
  stroke-width: 2.8;
  stroke-dasharray: 6 6;
  animation: magpieDashFlow 0.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.45));
  opacity: 1;
  transition: stroke 0.3s ease;
}

body.bp-dark .magpie-svg-canvas path.route-active {
  stroke: var(--mr-line-active-d);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.65));
}

@keyframes magpieDashFlow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

/* 动效光点 (Flying Signal Particles) */
.magpie-particle {
  fill: #3b82f6;
  filter: drop-shadow(0 0 6px #60a5fa);
  transition: opacity 0.2s ease;
}

body.bp-dark .magpie-particle {
  fill: #38bdf8;
  filter: drop-shadow(0 0 8px #38bdf8);
}

/* 核心三列横向布局：左端感知 -> 中枢调度 -> 右侧多智能体集群 (始终保持完整三列横向拓扑，提供充裕路由通道) */
.magpie-main-grid {
  display: grid;
  grid-template-columns: 230px 280px 1fr;
  gap: clamp(48px, 5.5vw, 72px);
  position: relative;
  z-index: 3;
  align-items: stretch;
}

/* 基础节点卡片通配 */
.magpie-node-card {
  background: #f8fafd;
  border: 1px solid var(--mr-border-l);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.bp-dark .magpie-node-card {
  background: rgba(13, 26, 60, 0.7);
  border-color: var(--mr-border-d);
}

/* 锚点小圆点 (Ports) */
.magpie-port {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #94a3b8;
  transform: translateY(-50%);
  z-index: 4;
  transition: all 0.3s ease;
}

body.bp-dark .magpie-port {
  background: #0f172a;
  border-color: #64748b;
}

.magpie-port.port-left {
  left: -6px;
  top: 50%;
}

.magpie-port.port-right {
  right: -6px;
  top: 50%;
}

.magpie-port.port-bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.magpie-port.port-top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.magpie-port.is-active {
  border-color: var(--mr-line-active);
  background: var(--mr-line-active);
  box-shadow: 0 0 10px var(--mr-line-active);
}

body.bp-dark .magpie-port.is-active {
  border-color: var(--mr-line-active-d);
  background: var(--mr-line-active-d);
  box-shadow: 0 0 12px var(--mr-line-active-d);
}

/* ---------------- 1. 左列：感知交互入口 (Ingress Card) ---------------- */
.magpie-col-ingress {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.magpie-ingress-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid rgba(16, 33, 74, 0.14);
}

body.bp-dark .magpie-ingress-card {
  background: rgba(14, 28, 65, 0.85);
  border-color: rgba(61, 115, 221, 0.3);
}

.ingress-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ingress-ico-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(61, 115, 221, 0.1);
  color: var(--mr-accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

body.bp-dark .ingress-ico-box {
  background: rgba(56, 189, 248, 0.15);
  color: var(--mr-accent-cyan);
}

.ingress-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-tx-sub-l);
}

body.bp-dark .ingress-meta-label {
  color: var(--mr-tx-sub-d);
}

.ingress-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mr-tx-main-l);
  margin-top: 2px;
  line-height: 1.3;
}

body.bp-dark .ingress-title {
  color: var(--mr-tx-main-d);
}

.ingress-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0;
}

.ingress-pill {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 33, 74, 0.05);
  color: var(--mr-tx-sub-l);
  border: 1px solid rgba(16, 33, 74, 0.08);
}

body.bp-dark .ingress-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mr-tx-sub-d);
  border-color: rgba(255, 255, 255, 0.1);
}

.ingress-pill.is-active {
  background: rgba(61, 115, 221, 0.14);
  color: var(--mr-accent-blue);
  border-color: rgba(61, 115, 221, 0.3);
  font-weight: 600;
}

body.bp-dark .ingress-pill.is-active {
  background: rgba(56, 189, 248, 0.2);
  color: var(--mr-accent-cyan);
  border-color: rgba(56, 189, 248, 0.4);
}

.ingress-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(16, 33, 74, 0.1);
  font-size: 12px;
  font-family: var(--f-mono, ui-monospace, monospace);
}

body.bp-dark .ingress-status-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ingress-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #10b981;
}

.ingress-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseBeacon 1.5s ease-in-out infinite;
}

@keyframes pulseBeacon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ---------------- 2. 中列：超级老师总调度中枢 (Supervisor Router) ---------------- */
.magpie-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.magpie-supervisor-card {
  background: #ffffff;
  border: 2px solid #10214a;
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 28px -10px rgba(16, 33, 74, 0.2);
}

body.bp-dark .magpie-supervisor-card {
  background: #0d1e45;
  border-color: #38bdf8;
  box-shadow: 0 12px 32px -10px rgba(56, 189, 248, 0.25);
}

/* 专家数字分身顾问标牌 */
.supervisor-experts-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.expert-chip {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  text-align: left;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.expert-chip-industry {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.25);
}

body.bp-dark .expert-chip-industry {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.expert-chip-pedagogy {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.22);
}

body.bp-dark .expert-chip-pedagogy {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.3);
}

.expert-chip.is-active {
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

.sup-hub-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background: #10214a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  box-shadow: 0 4px 14px rgba(16, 33, 74, 0.25);
}

body.bp-dark .sup-hub-icon-wrap {
  background: #38bdf8;
  color: #071230;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4);
}

.sup-hub-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed rgba(61, 115, 221, 0.4);
  animation: rotateHub 10s linear infinite;
}

@keyframes rotateHub {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sup-hub-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--mr-tx-main-l);
  line-height: 1.35;
}

body.bp-dark .sup-hub-title {
  color: var(--mr-tx-main-d);
}

.sup-hub-host {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--mr-tx-sub-l);
  margin-top: 2px;
}

body.bp-dark .sup-hub-host {
  color: var(--mr-tx-sub-d);
}

.sup-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #10214a;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  margin: 10px 0 8px;
}

body.bp-dark .sup-mode-pill {
  background: #38bdf8;
  color: #051329;
}

.sup-collab-flow {
  font-size: 11px;
  color: var(--mr-tx-sub-l);
  background: rgba(16, 33, 74, 0.04);
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1.4;
  margin-top: 6px;
}

body.bp-dark .sup-collab-flow {
  color: var(--mr-tx-sub-d);
  background: rgba(255, 255, 255, 0.05);
}

/* ---------------- 3. 右列：子智能体集群矩阵 (Sub-Agent Cards Stack) ---------------- */
.magpie-col-agents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.magpie-agents-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mr-tx-sub-l);
  padding: 2px 4px 1px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.bp-dark .magpie-agents-group-label {
  color: var(--mr-tx-sub-d);
}

/* 单个智能体卡片 (精准还原 Magpie worker 卡片) */
.magpie-agent-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--mr-border-l);
  border-radius: 9px;
  padding: 8px 12px 8px 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

body.bp-dark .magpie-agent-card {
  background: rgba(13, 26, 60, 0.8);
  border-color: var(--mr-border-d);
}

.magpie-agent-card:hover {
  border-color: var(--mr-accent-blue);
  transform: translateX(2px);
}

body.bp-dark .magpie-agent-card:hover {
  border-color: var(--mr-accent-cyan);
}

/* 激活 serving 态 (高对比度突出) */
.magpie-agent-card.is-serving {
  border-color: #10214a;
  box-shadow: 0 4px 16px rgba(16, 33, 74, 0.12);
  background: #fdfefe;
}

body.bp-dark .magpie-agent-card.is-serving {
  border-color: #38bdf8;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
  background: rgba(16, 36, 85, 0.95);
}

.agent-card-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 状态圆点：● serving 或 ○ idle */
.agent-status-bullet {
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.magpie-agent-card.is-serving .agent-status-bullet {
  color: #10214a;
}

body.bp-dark .magpie-agent-card.is-serving .agent-status-bullet {
  color: #38bdf8;
}

.agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--mr-tx-sub-l);
  line-height: 1;
}

body.bp-dark .agent-icon {
  color: var(--mr-tx-sub-d);
}

.magpie-agent-card.is-serving .agent-icon {
  color: #10214a;
}

body.bp-dark .magpie-agent-card.is-serving .agent-icon {
  color: #38bdf8;
}

.agent-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mr-tx-main-l);
  white-space: nowrap;
}

body.bp-dark .agent-name {
  color: var(--mr-tx-main-d);
}

.agent-group-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.tag-learn {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

body.bp-dark .tag-learn {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}

.tag-teach {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

body.bp-dark .tag-teach {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

.tag-core {
  background: rgba(29, 78, 216, 0.12);
  color: #1d4ed8;
}

body.bp-dark .tag-core {
  background: rgba(56, 189, 248, 0.22);
  color: #38bdf8;
}

.tag-verify {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}

body.bp-dark .tag-verify {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.tag-step {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

body.bp-dark .tag-step {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.agent-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* serving / standby 标牌 */
.agent-status-tag {
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--f-mono, ui-monospace, monospace);
  color: #94a3b8;
  padding: 2px 7px;
  border-radius: 4px;
}

.magpie-agent-card.is-serving .agent-status-tag {
  background: var(--mr-serving-bg-l);
  color: var(--mr-serving-tx-l);
  font-weight: 700;
}

body.bp-dark .magpie-agent-card.is-serving .agent-status-tag {
  background: var(--mr-serving-bg-d);
  color: var(--mr-serving-tx-d);
}

/* 进度/配额长条 */
.agent-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(16, 33, 74, 0.08);
  border-radius: 99px;
  margin: 6px 0 4px;
  overflow: hidden;
  position: relative;
}

body.bp-dark .agent-progress-track {
  background: rgba(255, 255, 255, 0.1);
}

.agent-progress-bar {
  height: 100%;
  width: 20%;
  background: #94a3b8;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.magpie-agent-card.is-serving .agent-progress-bar {
  background: #10214a;
}

body.bp-dark .magpie-agent-card.is-serving .agent-progress-bar {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

.agent-action-desc {
  font-size: 11px;
  color: var(--mr-tx-sub-l);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body.bp-dark .agent-action-desc {
  color: var(--mr-tx-sub-d);
}

/* ---------------- 4. 下游联动层：执行服务层、知识资源层与支撑保障层 ---------------- */
.magpie-downstream-deck {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--mr-border-l);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 3;
}

body.bp-dark .magpie-downstream-deck {
  border-top-color: var(--mr-border-d);
}


.downstream-group-box {
  background: #f8fafd;
  border: 1px solid var(--mr-border-l);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.3s ease;
}

body.bp-dark .downstream-group-box {
  background: rgba(13, 26, 60, 0.6);
  border-color: var(--mr-border-d);
}

.downstream-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.downstream-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--mr-tx-main-l);
  display: flex;
  align-items: center;
  gap: 6px;
}

body.bp-dark .downstream-group-title {
  color: var(--mr-tx-main-d);
}

.downstream-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.downstream-chip {
  padding: 6px 9px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(16, 33, 74, 0.08);
  font-size: 11.5px;
  color: var(--mr-tx-sub-l);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.bp-dark .downstream-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--mr-tx-sub-d);
}

.downstream-chip.is-active {
  border-color: var(--mr-line-active);
  background: rgba(61, 115, 221, 0.08);
  color: var(--mr-tx-main-l);
  font-weight: 600;
}

body.bp-dark .downstream-chip.is-active {
  border-color: var(--mr-line-active-d);
  background: rgba(56, 189, 248, 0.15);
  color: #ffffff;
}

/* ---------------- 5. 底部遥测日志与度量指标栏 (对齐 Magpie 底栏) ---------------- */
.magpie-bottom-bar {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mr-border-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 3;
}

body.bp-dark .magpie-bottom-bar {
  border-top-color: var(--mr-border-d);
}

.magpie-tele-narrative {
  font-size: 13.5px;
  color: var(--mr-tx-main-l);
  max-width: 650px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#magpieNarrative {
  display: none !important;
}

body.bp-dark .magpie-tele-narrative {
  color: var(--mr-tx-main-d);
}

.tele-step-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--mr-tx-sub-l);
}

body.bp-dark .tele-step-trail {
  color: var(--mr-tx-sub-d);
}

.tele-trail-item {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 33, 74, 0.05);
}

body.bp-dark .tele-trail-item {
  background: rgba(255, 255, 255, 0.07);
}

.tele-trail-item.is-done {
  color: #10b981;
  font-weight: 600;
}

/* 右侧 4 个度量指标计数器 (6 requests / 0 rerouted / 0 errors) */
.magpie-metrics-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
}

.magpie-metric-col {
  text-align: right;
}

.magpie-metric-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--f-mono, ui-monospace, monospace);
  color: var(--mr-tx-main-l);
  line-height: 1.1;
}

body.bp-dark .magpie-metric-val {
  color: var(--mr-tx-main-d);
}

.magpie-metric-label {
  font-size: 11px;
  color: var(--mr-tx-sub-l);
  margin-top: 3px;
  white-space: nowrap;
}

body.bp-dark .magpie-metric-label {
  color: var(--mr-tx-sub-d);
}

/* ==========================================================================
   移动端动态路由交互视窗小窗口系统 (Magpie Interactive Viewport Window)
   解决移动端小屏无法展现完整三列拓扑的问题，提供原汁原味的正常桌面效果、拖拽平移、手势缩放与全屏放大查看
   ========================================================================== */

/* ==========================================================================
   移动端专属动态路由交互小窗口系统 (Magpie Viewport Window)
   - PC 桌面端 (width > 900px)：正常大画布完整平铺展示，不限制高度，不显示小窗口边框与控制条
   - 移动端 (width <= 900px)：小窗口专属生效，内部容纳完整 PC 横向拓扑，支持平移、缩放与全屏放大
   ========================================================================== */

/* 默认在 PC 桌面端下完全作为透明容器，保持原版大看板完整平铺展示 */
@media screen and (min-width: 901px) {
  .magpie-window-frame:not(.is-maximized) {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
    overflow: visible;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-win-toolbar,
  .magpie-window-frame:not(.is-maximized) .magpie-win-statusbar,
  .magpie-window-frame:not(.is-maximized) .magpie-pan-hint {
    display: none !important;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-viewport-box {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    cursor: default;
    touch-action: auto;
    background: transparent;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-stage {
    position: static;
    transform: none !important;
    width: 100%;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-board {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff;
    border: 1px solid var(--mr-border-l);
    border-radius: 20px;
    padding: clamp(20px, 2.5vw, 36px);
    box-shadow: 0 16px 48px -16px rgba(16, 33, 74, 0.08);
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
  }

  body.bp-dark .magpie-window-frame:not(.is-maximized) .magpie-board {
    background: #071230;
    border-color: var(--mr-border-d);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
  }

  .magpie-window-frame:not(.is-maximized) .magpie-main-grid {
    display: grid !important;
    grid-template-columns: 230px 280px 1fr !important;
    gap: clamp(48px, 5.5vw, 72px) !important;
    align-items: stretch !important;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-downstream-deck {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-bottom-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-metrics-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: auto !important;
  }

  .magpie-window-frame:not(.is-maximized) .magpie-metric-col {
    text-align: right !important;
    background: transparent !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   移动端模式专属样式 (max-width: 900px)：启用交互小窗口
   ========================================================================== */
@media screen and (max-width: 900px) {
  .magpie-window-frame {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(37, 99, 235, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px -10px rgba(16, 33, 74, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.06) !important;
    overflow: hidden !important;
    margin-top: 12px !important;
  }

  body.bp-dark .magpie-window-frame {
    background: #061129 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.15) !important;
  }

  /* 1. 移动端顶栏控制工具条 HUD */
  .magpie-win-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: #f8fafd !important;
    border-bottom: 1px solid rgba(16, 33, 74, 0.08) !important;
    user-select: none !important;
    z-index: 20 !important;
  }

  body.bp-dark .magpie-win-toolbar {
    background: #091a3d !important;
    border-bottom-color: rgba(56, 189, 248, 0.18) !important;
  }

  .magpie-win-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .magpie-win-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    background: rgba(37, 99, 235, 0.09) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
    padding: 4px 9px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  body.bp-dark .magpie-win-badge {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
  }

  .magpie-win-tools {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
  }

  .magpie-tool-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(16, 33, 74, 0.12) !important;
    background: #ffffff !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
  }

  body.bp-dark .magpie-tool-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
  }

  .magpie-tool-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: #2563eb !important;
  }

  body.bp-dark .magpie-tool-btn:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
  }

  .magpie-tool-ratio {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    min-width: 44px !important;
    height: 32px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    background: rgba(16, 33, 74, 0.05) !important;
    border: 1px solid rgba(16, 33, 74, 0.08) !important;
    text-align: center !important;
    user-select: none !important;
  }

  body.bp-dark .magpie-tool-ratio {
    color: #9cb3ea !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .magpie-btn-expand {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    margin-left: 3px !important;
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
  }

  body.bp-dark .magpie-btn-expand {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.35) !important;
  }

  /* 2. 移动端视窗可视区域 (Viewport Box) - 现代渐变背景（去网格化，参考架构图设计语言） */
  .magpie-viewport-box {
    position: relative !important;
    width: 100% !important;
    height: clamp(420px, 60vh, 480px) !important;
    overflow: hidden !important;
    touch-action: none !important;
    user-select: none !important;
    cursor: grab !important;
    background: linear-gradient(135deg, #f8faff 0%, #edf3fc 40%, #e0ebf8 75%, #d4e2f5 100%) !important;
    background-image: linear-gradient(135deg, #f8faff 0%, #edf3fc 40%, #e0ebf8 75%, #d4e2f5 100%) !important;
    background-size: auto !important;
  }

  body.bp-dark .magpie-viewport-box {
    background: linear-gradient(145deg, #0d2144 0%, #0a1b38 40%, #07152b 75%, #050e20 100%) !important;
    background-image: linear-gradient(145deg, #0d2144 0%, #0a1b38 40%, #07152b 75%, #050e20 100%) !important;
    background-size: auto !important;
  }

  .magpie-viewport-box.is-dragging {
    cursor: grabbing !important;
  }

  /* 3. 移动端平移与缩放舞台 (Stage) */
  .magpie-stage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform-origin: 0 0 !important;
    will-change: transform !important;
    pointer-events: auto !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .magpie-viewport-box *,
  .magpie-stage * {
    touch-action: none !important;
    -webkit-user-drag: none !important;
  }

  .magpie-stage.with-transition {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* 移动端视窗内：保持 PC 完整原貌尺寸 (1160px) 与横向三列排布，以供平移缩放漫游 */
  .magpie-window-frame .magpie-board {
    width: 1160px !important;
    min-width: 1160px !important;
    max-width: 1160px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 20px 16px !important;
  }

  .magpie-window-frame .magpie-main-grid {
    display: grid !important;
    grid-template-columns: 230px 280px 1fr !important;
    gap: 72px !important;
    align-items: stretch !important;
  }

  .magpie-window-frame .magpie-col-ingress {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }

  .magpie-window-frame .magpie-col-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .magpie-window-frame .magpie-col-agents {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .magpie-window-frame .magpie-downstream-deck {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .magpie-window-frame .magpie-bottom-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
  }

  .magpie-window-frame .magpie-metrics-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: auto !important;
  }

  .magpie-window-frame .magpie-metric-col {
    text-align: right !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .magpie-window-frame .magpie-port.port-left {
    left: -6px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  .magpie-window-frame .magpie-port.port-right {
    right: -6px !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  /* 4. 首次触控指引悬浮标签 */
  .magpie-pan-hint {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    color: #f8fafc !important;
    padding: 5px 12px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
  }

  .magpie-pan-hint.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 5. 移动端视窗底部状态条 */
  .magpie-win-statusbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    background: #f8fafd !important;
    border-top: 1px solid rgba(16, 33, 74, 0.08) !important;
    font-size: 10.5px !important;
    user-select: none !important;
    z-index: 20 !important;
  }

  body.bp-dark .magpie-win-statusbar {
    background: #091a3d !important;
    border-top-color: rgba(56, 189, 248, 0.18) !important;
    color: #94a3b8 !important;
  }

  .statusbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748b !important;
  }

  body.bp-dark .statusbar-left {
    color: #9cb3ea !important;
  }

  .statusbar-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
  }

  .statusbar-expand-link {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #2563eb !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
  }

  body.bp-dark .statusbar-expand-link {
    color: #38bdf8 !important;
  }
}


/* ==========================================================================
   6. 放大窗口模式 (Maximized Fullscreen Modal Viewport)
   ========================================================================== */
.console-sec:has(.magpie-window-frame.is-maximized) {
  z-index: 999999 !important;
}

.magpie-window-frame.is-maximized {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 999999 !important;
  background: linear-gradient(135deg, #f8faff 0%, #edf3fc 40%, #e0ebf8 75%, #d4e2f5 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.95) !important;
  animation: magpieWinPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body.bp-dark .magpie-window-frame.is-maximized {
  background: linear-gradient(145deg, #0d2144 0%, #0a1b38 40%, #07152b 75%, #050e20 100%) !important;
}

@keyframes magpieWinPopIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.magpie-window-frame.is-maximized .magpie-win-toolbar {
  padding: max(22px, env(safe-area-inset-top, 24px)) 16px 14px 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 33, 74, 0.12) !important;
  box-shadow: 0 4px 16px rgba(16, 33, 74, 0.06) !important;
}

body.bp-dark .magpie-window-frame.is-maximized .magpie-win-toolbar {
  background: rgba(9, 26, 61, 0.98) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.magpie-window-frame.is-maximized .magpie-viewport-box {
  flex: 1 !important;
  height: 100% !important;
  max-height: none !important;
  background: transparent !important;
  background-image: none !important;
  overflow: hidden !important;
  touch-action: none !important;
  user-select: none !important;
}

.magpie-window-frame.is-maximized .magpie-stage {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform-origin: 0 0 !important;
  will-change: transform !important;
  touch-action: none !important;
}

.magpie-window-frame.is-maximized .magpie-board {
  width: 1160px !important;
  min-width: 1160px !important;
  max-width: 1160px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 20px 16px !important;
}

.magpie-window-frame.is-maximized .magpie-main-grid {
  display: grid !important;
  grid-template-columns: 230px 280px 1fr !important;
  gap: 72px !important;
  align-items: stretch !important;
}

.magpie-window-frame.is-maximized .magpie-win-statusbar {
  padding: 10px 16px max(14px, env(safe-area-inset-bottom, 16px)) 16px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(16, 33, 74, 0.12) !important;
}

body.bp-dark .magpie-window-frame.is-maximized .magpie-win-statusbar {
  background: rgba(9, 26, 61, 0.98) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.magpie-window-frame.is-maximized .ico-expand {
  display: none !important;
}

.magpie-window-frame.is-maximized .ico-collapse {
  display: inline-block !important;
}

.magpie-window-frame.is-maximized .magpie-btn-expand {
  background: #e11d48 !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}

.magpie-window-frame.is-maximized .statusbar-expand-link {
  display: none !important;
}


/* 移动端小窗口：单指纵向滑动交还给页面滚动，双指拖动 / 缩放由脚本处理；全屏放大后仍为 touch-action: none */
@media screen and (max-width: 900px) {
  .magpie-window-frame:not(.is-maximized) .magpie-viewport-box,
  .magpie-window-frame:not(.is-maximized) .magpie-viewport-box * {
    touch-action: pan-y !important;
  }
}