/* ============================================================
 * 排版整改 切片 G3（画布高阶时序 141-160 + 收口 161）
 * 只覆盖 style.css；颜色全部复用既有 hex / CSS 变量
 * ============================================================ */

/* ---------- 143 底部播放控制条 ---------- */
.g3-playbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1002;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 122px;
  background: var(--card, #fff); border-top: 1px solid var(--border, #dcdfe6);
  box-shadow: 0 -2px 8px rgba(90,107,128,.08); font-size: 12px; color: var(--text, #2A3A52);
}
/* 最小修复：左下 v5 缩放角标 fixed 悬浮在播放钮上，整体右移避让 */
.g3-playbar .g3pb-btn {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--border, #dcdfe6);
  border-radius: 8px; background: var(--bg-soft, #ffffff); color: var(--text, #2A3A52);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.g3-playbar .g3pb-btn:hover { border-color: var(--primary, #38BDF8); color: var(--primary, #38BDF8); }
.g3-playbar .g3pb-btn.primary { background: var(--primary, #38BDF8); color: #fff; border-color: var(--primary, #38BDF8); }
.g3-playbar .g3pb-track {
  flex: 1; position: relative; height: 22px; cursor: pointer;
  background: var(--bg-soft, #ffffff); border: 1px solid var(--border, #dcdfe6); border-radius: 8px;
}
.g3-playbar .g3pb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--primary-soft, #e6f4ff); border-radius: 8px 0 0 6px; }
.g3-playbar .g3pb-needle { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--primary, #38BDF8); left: 0; }
.g3-playbar .g3pb-time { font-variant-numeric: tabular-nums; color: var(--text-muted, #606266); min-width: 86px; text-align: center; }
.g3-playbar .g3pb-speed { border: 1px solid var(--border, #dcdfe6); border-radius: 8px; background: var(--bg-soft, #ffffff); color: var(--text, #2A3A52); height: 28px; padding: 0 6px; font-size: 12px; }
.g3-playbar .g3pb-loop { display: flex; align-items: center; gap: 4px; color: var(--text-muted, #606266); cursor: pointer; user-select: none; }

/* ---------- 143/148 顶部时间标尺 ---------- */
.g3-ruler {
  position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 1001;
  background: var(--card, #fff); border-bottom: 1px solid var(--border, #dcdfe6);
  overflow: hidden; cursor: pointer; font-size: 12px; color: var(--text-muted, #606266);
}
.g3-ruler .g3r-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border, #dcdfe6); }
.g3-ruler .g3r-lab { position: absolute; top: 4px; transform: translateX(4px); white-space: nowrap; }
.g3-ruler .g3r-shot { position: absolute; top: 14px; bottom: 0; background: var(--primary-soft, #e6f4ff); border-left: 1px solid var(--primary, #38BDF8); }
.g3-ruler .g3r-sel { position: absolute; top: 0; bottom: 0; background: rgba(56,189,248,.18); border-left: 1px solid var(--primary, #38BDF8); border-right: 1px solid var(--primary, #38BDF8); }
.g3-ruler .g3r-needle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn, #ff7d00); }

/* ---------- 142 条件菱形节点 ---------- */
.g3-cond-node {
  position: absolute; width: 90px; height: 90px; z-index: 4; cursor: pointer;
  transform: rotate(45deg); border: 2px solid var(--warn, #ff7d00);
  background: var(--warn-soft, #fff7e8); border-radius: 8px;
}
.g3-cond-node.g3c-selected { border-color: var(--primary, #38BDF8); box-shadow: 0 0 0 3px var(--primary-soft, #e6f4ff); }
.g3-cond-node .g3c-lab {
  position: absolute; inset: 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 12px; font-weight: 600; color: var(--text, #2A3A52); padding: 6px; line-height: 1.2;
}
.g3-cond-node .g3c-del {
  position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger, #f53f3f); color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer;
}
/* 连线条件标注 */
.g3-edge-lab { font-size: 12px; fill: var(--text-muted, #606266); }
.g3-edge-lab.main { fill: var(--success, #00b42a); font-weight: 700; }

/* ---------- 145 帧预览缩略条 ---------- */
.g3-frames { display: flex; gap: 3px; padding: 4px 6px; border-top: 1px dashed var(--border, #dcdfe6); background: var(--bg-soft, #ffffff); }
.g3-frames .g3f-cell {
  position: relative; width: 34px; height: 22px; border-radius: 4px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border, #dcdfe6); background: var(--card, #fff); flex: none;
}
.g3-frames .g3f-cell img { width: 100%; height: 100%; object-fit: cover; }
.g3-frames .g3f-cell.ph { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted, #606266); }
.g3-frames .g3f-cell.cover { border-color: var(--primary, #38BDF8); box-shadow: 0 0 0 1px var(--primary, #38BDF8); }
.g3-frames .g3f-cell:hover::after { content: attr(data-t); position: absolute; left: 50%; bottom: 110%; transform: translateX(-50%); background: var(--text, #2A3A52); color: #fff; font-size: 12px; padding: 2px 5px; border-radius: 4px; white-space: nowrap; }

/* ---------- 147 批注气泡 ---------- */
.g3-annot {
  position: absolute; z-index: 6; max-width: 200px; padding: 6px 9px; border-radius: 8px; cursor: pointer;
  background: var(--card, #fff); border: 1px solid var(--border, #dcdfe6); font-size: 12px; color: var(--text, #2A3A52);
  box-shadow: 0 2px 8px rgba(90,107,128,.12);
}
.g3-annot.g3a-resolved { opacity: .55; border-style: dashed; }
.g3-annot .g3a-head { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.g3-annot .g3a-body { margin-top: 2px; color: var(--text-muted, #606266); word-break: break-word; }
.g3-annot .g3a-resolve { margin-left: auto; cursor: pointer; color: var(--success, #00b42a); }

/* ---------- 149 节点状态胶囊 + 进度条 ---------- */
.gn-status { position: absolute; top: 4px; right: 4px; z-index: 3; font-size: 12px; padding: 1px 6px; border-radius: 8px; }
.gn-status.queued { background: var(--bg-soft, #ffffff); color: var(--text-muted, #606266); border: 1px solid var(--border, #dcdfe6); }
.gn-status.running { background: var(--warn-soft, #fff7e8); color: var(--warn, #ff7d00); }
.gn-status.completed { background: var(--success-soft, #e8ffea); color: var(--success, #00b42a); }
.gn-status.failed { background: var(--danger-soft, #ffece8); color: var(--danger, #f53f3f); }
.gn-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border, #dcdfe6); z-index: 3; }
.gn-prog > i { display: block; height: 100%; background: var(--warn, #ff7d00); width: 0; }
.graph-node.g3n-failed { box-shadow: 0 0 0 2px var(--danger, #f53f3f); }

/* ---------- 150 性能统计浮层 ---------- */
.g3-perf {
  position: absolute; right: 10px; top: 34px; z-index: 1003; padding: 8px 10px; border-radius: 8px;
  background: var(--card, #fff); border: 1px solid var(--border, #dcdfe6); font-size: 12px; color: var(--text-muted, #606266);
  min-width: 150px; line-height: 1.7; box-shadow: 0 2px 8px rgba(90,107,128,.1);
}
.g3-perf b { color: var(--text, #2A3A52); }

/* ---------- 157 节点颜色标签 ---------- */
.graph-node.g3c-red { outline: 2px solid var(--danger, #f53f3f); outline-offset: 1px; }
.graph-node.g3c-orange { outline: 2px solid var(--warn, #ff7d00); outline-offset: 1px; }
.graph-node.g3c-green { outline: 2px solid var(--success, #00b42a); outline-offset: 1px; }
.graph-node.g3c-blue { outline: 2px solid var(--primary, #38BDF8); outline-offset: 1px; }
.graph-node.g3c-purple { outline: 2px solid #8aa2bc; outline-offset: 1px; }

/* ---------- 159 图例浮层 ---------- */
.g3-legend-btn {
  position: absolute; left: 10px; bottom: 60px; z-index: 1003; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border, #dcdfe6); background: var(--card, #fff); cursor: pointer; font-size: 13px; color: var(--text-muted, #606266);
}
/* 最小修复：原右下角与鸟瞰小地图重叠，移到左下空白 */
.g3-legend-btn:hover { color: var(--primary, #38BDF8); border-color: var(--primary, #38BDF8); }
.g3-legend {
  position: absolute; left: 10px; bottom: 100px; z-index: 1003; width: 200px; padding: 10px 12px; border-radius: 8px;
  background: var(--card, #fff); border: 1px solid var(--border, #dcdfe6); font-size: 12px; color: var(--text, #2A3A52);
  box-shadow: 0 2px 10px rgba(90,107,128,.14);
}
.g3-legend.hidden { display: none; }
.g3-legend h5 { margin: 0 0 6px; font-size: 12px; color: var(--text, #2A3A52); }
.g3-legend .g3lg-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--text-muted, #606266); }
.g3-legend .g3lg-sw { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.g3-legend .g3lg-box { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* ---------- 160 移动端只读提示条 ---------- */
.g3-mob-banner {
  display: none; position: sticky; top: 0; z-index: 1100; padding: 6px 12px; text-align: center;
  background: var(--warn-soft, #fff7e8); color: var(--warn, #ff7d00); font-size: 12px;
}
@media (max-width: 767px) {
  .g3-mob-banner { display: block; }
  .g3-readonly-mobile .gv-tools .gvt:not(#gvViewSw):not(#gvClose),
  .g3-readonly-mobile .gvt.more, .g3-readonly-mobile .gnm, .g3-readonly-mobile .gn-anchor,
  .g3-readonly-mobile #gvAdd, .g3-readonly-mobile #gvMorePanel { display: none !important; }
}

/* ---------- 通用弹窗（复用全站弹窗视觉） ---------- */
.g3-modal-mask {
  position: fixed; inset: 0; z-index: 1200; background: rgba(20,30,45,.4); display: flex; align-items: center; justify-content: center;
}
.g3-modal {
  width: 380px; max-width: 92vw; background: var(--card, #fff); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(20,30,45,.2); font-size: 13px; color: var(--text, #2A3A52);
}
.g3-modal h4 { margin: 0 0 10px; font-size: 16px; }
.g3-modal .g3m-tip { font-size: 12px; color: var(--text-muted, #606266); margin: 8px 0; }
.g3-modal label { display: block; font-size: 12px; color: var(--text-muted, #606266); margin: 8px 0 3px; }
.g3-modal input, .g3-modal select, .g3-modal textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border, #dcdfe6); border-radius: 8px;
  background: var(--bg-soft, #ffffff); color: var(--text, #2A3A52); box-sizing: border-box; font-size: 13px;
}
.g3-modal .g3m-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.g3-modal .btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border, #dcdfe6); background: var(--bg-soft, #ffffff); cursor: pointer; }
.g3-modal .btn.primary { background: var(--primary, #38BDF8); color: #fff; border-color: var(--primary, #38BDF8); }
.g3-modal .btn.danger { background: var(--danger-soft, #ffece8); color: var(--danger, #f53f3f); border-color: var(--danger, #f53f3f); }

/* 右键菜单快捷键小字（注入既有 gvcm-k 样式即复用） */
.gvcm-item .gvcm-k { margin-left: auto; font-size: 12px; color: var(--text-muted, #606266); }

/* ---------- 143 预演当前镜头高亮 ---------- */
.graph-node.g3p-active {
  outline: 2px solid var(--primary, #38BDF8); outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--primary-soft, #e6f4ff), 0 4px 14px rgba(56,189,248,.28);
}

/* 151 连线模式提示 */
.g3-link-hint {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 1004;
  padding: 6px 14px; border-radius: 16px; background: var(--text, #2A3A52); color: #fff; font-size: 12px;
}
.graph-view.g3-linkmode .graph-node { cursor: crosshair; }