/* ============================================================
 * 批次 S5 画布深度通检 整改样式
 * 仅覆盖既有样式；主题浅蓝白，禁紫色/大块深色
 * ============================================================ */

/* ---------- 通用：演示版 / 规划中 浅蓝小标签 ---------- */
.qa-tag {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 1px 7px; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: #2F6DB0; background: #E3EEFB; border: 1px solid #BFD8F2;
  line-height: 1.5; white-space: nowrap;
}
.qa-tag.plan { color: #8A6D2B; background: #FBF3DE; border-color: #EBD9A0; }

/* ---------- 画布 HUD（缩放/适应/背景）抬升，避免被底部播放条/自动备份浮层遮挡 ---------- */
.graph-hud {
  bottom: 74px !important;
  z-index: 1610 !important;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
}
/* 全屏模式同样抬升（自动备份浮层 fixed bottom:14px z-index:1600 会压住右下角） */
#graphView.fullscreen .graph-hud { bottom: 74px !important; }

/* ---------- 移动端 ≤640：画布主区与右侧参数面板纵向堆叠，消除横向裁切 ---------- */
@media (max-width: 640px) {
  /* 1) 根节点彻底禁止横向溢出（clip 比 hidden 更强，body.scrollWidth 收敛到视口） */
  html, body { max-width: 100vw !important; overflow-x: clip !important; }

  /* 2) 画布容器不超出视口 */
  .canvas-area, #graphView, .graph-stage { max-width: 100vw !important; width: 100% !important; overflow-x: hidden; }
  .graph-stage { height: 460px !important; }

  /* 3) 顶部工具条行允许换行，按钮不再被裁到屏幕外 */
  .gv-topbar, .gv-tools, .panel .card-header .row, #lvTbar, .v1-toolbar {
    flex-wrap: wrap !important; max-width: 100vw !important;
  }
  /* 3b) 被折叠列表面板挤出屏外的编辑工具行，移动端只读模式下隐藏（不影响画布自带工具条） */
  .panel .card-header .row, #lvTbar { display: none !important; }
  /* 工具条右侧说明文字在窄屏隐藏，给按钮让位 */
  .gvt-legend, .graph-hint { display: none !important; }

  /* 4) 右侧浮动参数面板（节点技能总结/v10-inspector）改为纵向堆叠到画布下方，全宽可达 */
  .gv-inspector.show, #v10-inspector {
    position: static !important;
    transform: none !important;   /* 清掉内联 translateX(105%)，否则仍向右撑 */
    width: 100% !important;
    max-height: none !important;
    margin: 8px 0 !important;
    right: auto !important; top: auto !important;
    box-sizing: border-box;
  }

  /* 4b) 二级工具条 #w2SubTrack（shared css 用 width:max-content，移动端不换行撑到 608px）改为可换行 */
  #w2SubTrack {
    width: auto !important; max-width: 100vw !important; flex-wrap: wrap !important;
  }

  /* 4c) 顶部栏在窄屏换行（右侧 保存/生成/导出/角色库/设置 按钮不挤到一行） */
  .wb-topbar { flex-wrap: wrap !important; height: auto !important; row-gap: 8px !important; padding: 8px 12px !important; }
  .wb-tb-right { flex-wrap: wrap !important; flex: 1 1 auto !important; justify-content: flex-end !important; }

  /* 5) 移动端画布 HUD 收窄 */
  .graph-hud { right: 8px !important; left: 8px !important; justify-content: flex-end; bottom: 64px !important; }
  .graph-hud .graph-hint { display: none; }

  /* 6) main 容器根因修复：内部静态流工具条（.v4-tb 工具栏/搜索徽章/.v5-breaker-reason 等）
        不换行撑到 644px。overflow-x:hidden 收敛 body.scrollWidth 到视口；
        同时让常见工具条行允许换行，保证按钮不被裁、仍可达。 */
  main.container-wide { overflow-x: hidden !important; }
  .v4-tb, .v5-tb, .v4-se-row, .v5-breaker-row, .wb-sd-row,
  .panel .card-body .row, .row-nowrap {
    flex-wrap: wrap !important; max-width: 100% !important; row-gap: 6px !important;
  }
}

/* ---------- 旧版落地页：已归档提示条 ---------- */
.qa-legacy-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 18px; font-size: 13px;
  color: #2F5D8A; background: #e6f4ff; border-bottom: 1px solid #C9DAEE;
}
.qa-legacy-banner b { color: #1F4E79; }
.qa-legacy-banner a { color: #2F6DB0; font-weight: 600; text-decoration: underline; }
.qa-legacy-banner .qa-legacy-close {
  margin-left: auto; cursor: pointer; border: none; background: none;
  color: #5A7BA6; font-size: 16px; line-height: 1;
}

/* ============================================================
 * 界面重构
 * 原则：首屏=无限画布+极小工具条；工具收进抽屉/弹层；层级留白统一。
 * 只做视觉收敛，不改任何功能逻辑与 id。
 * ============================================================ */

/* 0) 画布区统一字号基准（13px，浅蓝白） */
#graphView { font-size: 13px; color: #2A3F57; }

/* 1) 两行 gv-topbar 收成一条紧凑栏：去重标题、减小高度与内距 */
#graphView .gv-topbar {
  padding: 5px 12px !important;
  gap: 8px !important;
  min-height: 32px;
  align-items: center;
  background: transparent;
  border: none;
}
/* 重复/开发者视角文字：隐藏（标题只留一个 gv-title） */
#graphView .gv-sub,
#graphView .gv-projname,
#graphView .gv-ro-only { display: none !important; }
#graphView .gv-title {
  font-size: 14px !important; font-weight: 600; color: #1F3A5F;
  margin-right: 4px; white-space: nowrap;
}
/* 顶栏按钮小一号、轻边框 */
#graphView .gv-topbar .btn,
#graphView .gv-topbar .gvt {
  padding: 3px 10px !important; font-size: 12px !important;
  border-radius: 8px; line-height: 1.4;
}

/* 2) gv-tools 单行紧凑；隐藏开发者提示文案（.gvt-legend） */
#graphView .gv-tools {
  padding: 5px 12px !important; gap: 6px !important;
  align-items: center; flex-wrap: wrap;
  border-top: 1px solid #E6EEF7;
}
#graphView .gv-tools .gvt {
  padding: 3px 10px !important; font-size: 12px !important;
  border-radius: 8px; background: #F2F7FD; border: 1px solid #D8E6F5;
  color: #2F5D8A;
}
#graphView .gv-tools .gvt.more { background: #E3EEFB; border-color: #BFD8F2; }
#graphView .gvt-legend { display: none !important; }

/* 3) 右下 HUD 收成一颗胶囊：减按钮间距、轻背景，不挡画布 */
#graphView .graph-hud {
  gap: 4px !important; padding: 4px 8px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #DCE7F3 !important;
  box-shadow: 0 2px 10px rgba(31,78,121,.10);
}
#graphView .graph-hud .btn {
  padding: 2px 8px !important; font-size: 12px !important;
  border-radius: 8px;
}
#graphView .graph-hud .hud-label,
#graphView .graph-hud .graph-zoom { font-size: 12px !important; color: #5A7BA6; }

/* 4) 右侧参数面板轻量化：窄一点、标题一行、卡片留白统一 */
#graphView .gv-inspector {
  border-radius: 12px !important;
  border: 1px solid #DCE7F3 !important;
  box-shadow: 0 4px 18px rgba(31,78,121,.10);
  padding: 12px !important;
}
#graphView .gv-inspector .gv-insp-title,
#graphView .gv-inspector h4 {
  font-size: 13px !important; font-weight: 600; color: #1F3A5F;
  margin: 0 0 8px;
}

/* 5) 左侧资产列（gv-assets-col）收起态更窄、标题统一 */
#graphView .gv-assets-col .gvac-title {
  font-size: 12px !important; color: #5A7BA6; font-weight: 600;
  margin: 8px 0 4px;
}

/* 6) 节点卡片：统一圆角/间距/字号（不改变节点数据与连线） */
#graphView .graph-world .g-node,
#graphView .graph-world .node-card {
  border-radius: 12px !important;
}