/* ============================================================
   guide.css —— 操作指引的唯一样式处
   颜色 / 间距 / 圆角 / 阴影 / 动效全部取 styles/tokens.css 的变量，
   本文件不写魔法色值（唯一的例外是遮罩的 rgba，它是遮罩不是品牌色）。
   层级：3000 档，必须高于 el-dialog / el-drawer 的 2000 档。
   ============================================================ */

.guide-root{position:fixed;inset:0;pointer-events:none;z-index:3000}

/* ---------------- 右下角入口 ---------------- */
.guide-fab{
  position:absolute;right:var(--sp-5);bottom:var(--sp-5);pointer-events:auto;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:44px;padding:0 var(--sp-4) 0 var(--sp-3);border:0;border-radius:var(--r-pill);
  background:var(--c-primary);color:var(--c-white);
  font-family:var(--font-sans);font-size:var(--fs-13);font-weight:var(--fw-bold);letter-spacing:.01em;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 14px 30px -12px rgba(0,113,227,.55);
  cursor:pointer;transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease);
}
.guide-fab:hover{transform:translateY(-1px);background:var(--c-primary-hover)}
.guide-fab.open{transform:translateY(-1px);background:var(--c-primary-active)}
.guide-fab .gf-ico{font-size:15px;line-height:1;opacity:.9}

/* ---------------- 角色面板 ---------------- */
.guide-panel{
  position:absolute;right:var(--sp-5);bottom:calc(var(--sp-5) + 44px + var(--sp-2));
  width:360px;pointer-events:auto;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.gp-head{display:flex;align-items:flex-start;gap:var(--sp-2);padding:14px 14px 10px 16px;border-bottom:1px solid var(--c-line-2)}
.gp-head-text{flex:1;min-width:0}
.gp-title{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--c-ink);line-height:1.4}
.gp-sub{font-size:var(--fs-11);color:var(--c-muted-2);margin-top:3px}
.gp-close{
  flex:0 0 auto;width:24px;height:24px;border:0;border-radius:50%;background:var(--c-fill);
  color:var(--c-muted);font-size:12px;line-height:1;cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.gp-close:hover{background:var(--c-track);color:var(--c-ink)}

.gp-list{padding:var(--sp-2);display:flex;flex-direction:column;gap:6px;max-height:390px;overflow-y:auto}
.gp-card{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border:1px solid transparent;border-radius:var(--r-xs);
  background:var(--c-white);cursor:pointer;transition:all var(--dur-fast) var(--ease);
  font-family:var(--font-sans);
}
.gp-card:hover{background:var(--c-fill-2);border-color:rgba(0,113,227,.32);transform:translateY(-1px)}
.gp-card.current{border-color:var(--c-primary);background:var(--c-primary-50)}
.gp-avatar{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--c-white);font-size:var(--fs-12);font-weight:var(--fw-bold);
}
.gp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gp-name{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--c-ink);display:flex;align-items:center;gap:6px}
.gp-tag{
  font-style:normal;font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.04em;
  color:var(--c-primary);background:var(--c-primary-100);border-radius:var(--r-pill);padding:1px 6px;
}
.gp-dept{font-size:var(--fs-11);color:var(--c-muted)}
.gp-desc{font-size:var(--fs-11);color:var(--c-muted-2);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-go{flex:0 0 auto;font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--c-primary);white-space:nowrap}
.gp-foot{padding:8px 14px 11px;border-top:1px solid var(--c-line-2);font-size:var(--fs-11);color:var(--c-muted-2)}
.gp-foot b{color:var(--c-ink-2);font-weight:var(--fw-bold)}

/* ---------------- 遮罩：blocker 吃误触 + hole 挖孔 ----------------
   历史坑（2026-11 产品 P0）：blocker 曾是一块 inset:0 的全屏 div，挖孔只用
   9999px 的 box-shadow「画」出来 —— 阴影不是容器，洞里的按钮照样被 blocker 吃掉，
   用户看见高亮框却点不动。现在 blocker 拆成洞四周的四块（guide.js 的 blocks 算），
   洞的位置完全空出来，手指能落到真正的按钮上。 */
.guide-stage{position:absolute;inset:0;pointer-events:none}
.guide-mask{position:absolute;inset:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease)}
/* 弹窗 / 抽屉打开时遮罩整体淡出（不留拦截、不再压暗），只留气泡和一圈高亮框 —
   否则遮罩挡住弹窗，用户在弹窗里还是点不动（见 guide.js 的 probeOverlay）。
   注意：只写 opacity:0 是不够的 —— 透明元素照样吃点击，必须把 blocker 的
   pointer-events 一起关掉（child 的 auto 会覆盖父级的 none，所以要打到 child 上）。 */
.guide-mask.is-off,
.guide-mask.is-off .guide-blocker{opacity:0;pointer-events:none}
.guide-blocker{position:absolute;pointer-events:auto;background:transparent}
.guide-blocker.full{inset:0}
.guide-veil{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.guide-hole{
  position:absolute;pointer-events:none;
  border:2px solid var(--c-primary);border-radius:8px;
  /* 遮罩本体就是这圈 9999px 阴影：完全落在洞外，洞里不受影响 */
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  transition:top var(--dur-fast) var(--ease),left var(--dur-fast) var(--ease),
             width var(--dur-fast) var(--ease),height var(--dur-fast) var(--ease);
  animation:guide-hole-in var(--dur-base) var(--ease-out) both;
}
/* 遮罩淡出时只留高亮框：仍然指位置，但不再压暗屏幕 */
.guide-hole.is-bare{box-shadow:none}
@keyframes guide-hole-in{from{opacity:0}to{opacity:1}}

/* ---------------- 气泡卡片 ---------------- */
.guide-bubble{
  position:absolute;width:340px;pointer-events:auto;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:14px 16px 12px;
  animation:guide-bubble-in var(--dur-base) var(--ease-out) both;
}
@keyframes guide-bubble-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.guide-bubble.is-pending{visibility:hidden}
/* 遮罩层在等目标出现时也不画，避免「先整屏变暗再挖孔」的闪一下 */
.guide-stage.is-pending .guide-mask{opacity:0;pointer-events:none}

.gb-top{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:7px}
.gb-step{
  font-family:var(--font-mono);font-size:var(--fs-11);font-weight:var(--fw-bold);
  color:var(--c-primary);background:var(--c-primary-50);border-radius:var(--r-pill);padding:2px 8px;
}
.gb-role{font-size:var(--fs-11);color:var(--c-muted-2)}
.gb-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--c-primary);opacity:.55}
.gb-note{margin-left:auto;font-size:10.5px;color:var(--c-warn-text)}
.gb-title{font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-ink);letter-spacing:-.01em;line-height:var(--lh-tight)}
.gb-body{margin-top:6px;font-size:var(--fs-12);line-height:1.65;color:var(--c-ink-2)}
/* action：点哪、填什么、点完看到什么。浅底 + 左侧竖线，和 body（讲为什么）分开，
   一眼能看出「这段是叫我动手的」。 */
.gb-action{
  margin-top:9px;padding:7px 10px 7px 9px;
  border-left:2px solid var(--c-primary);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
  background:var(--c-primary-50);
  font-size:var(--fs-12);line-height:1.6;color:var(--c-ink-2);
}
.gb-foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:13px;padding-top:11px;border-top:1px solid var(--c-line-2)}
.gb-spacer{flex:1}
.gb-btn{
  height:30px;padding:0 13px;border:1px solid var(--c-line);border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-ink-2);font-family:var(--font-sans);
  font-size:var(--fs-12);font-weight:var(--fw-medium);cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
}
.gb-btn:hover:not(:disabled){background:var(--c-fill);color:var(--c-ink)}
.gb-btn:disabled{opacity:.4;cursor:not-allowed}
.gb-btn.ghost{border-color:transparent;background:transparent;color:var(--c-muted);padding:0 8px}
.gb-btn.ghost:hover{background:var(--c-fill);color:var(--c-ink-2)}
.gb-btn.primary{border-color:var(--c-primary);background:var(--c-primary);color:var(--c-white);font-weight:var(--fw-bold)}
.gb-btn.primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover)}

/* 锚点没找到 / 空间不够：显形提示块。红色留给"真的错了"，
   空间不够（crowded）用中性的 amber，不至于让人以为引导坏了。 */
.gb-miss{
  margin-top:9px;padding:8px 10px;border-radius:var(--r-xs);
  background:rgba(255,59,48,.08);border-left:2px solid var(--c-danger);
  font-size:var(--fs-12);line-height:1.6;color:var(--c-ink-2);
}
.gb-miss b{color:var(--c-danger-text)}
.gb-miss .mono{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--c-muted)}
.gb-crowd{background:rgba(255,159,10,.10);border-left-color:var(--c-warn)}
.gb-crowd b{color:var(--c-warn-text)}
/* 角色不对导致的 miss：这不算"出错"，是"顺序没走到"。用主色，不用红。 */
.gb-miss.is-role{
  background:rgba(0,113,227,.08);border-left-color:var(--c-primary);
}
.gb-miss.is-role b{color:var(--c-primary)}

/* ---------------- 键盘焦点可见 ---------------- */
.guide-fab:focus-visible,.gp-close:focus-visible,.gp-card:focus-visible,.gb-btn:focus-visible{
  outline:2px solid var(--c-primary);outline-offset:2px;
}
.guide-fab:focus-visible{outline-color:var(--c-white);outline-offset:2px;box-shadow:0 0 0 3px rgba(0,113,227,.45)}

@media(max-width:520px){
  .guide-panel{right:var(--sp-3);left:var(--sp-3);width:auto;bottom:calc(var(--sp-5) + 44px + var(--sp-2))}
  .guide-bubble{width:min(340px,calc(100vw - 24px))}
}

/* ---------------- 底部操作条避让 ----------------
   抽屉底部常有主操作条（「确认入库」「提交付款申请」这类），
   与右下角胶囊同处一个角；抽屉正文里靠右下角的按钮（如计划详情「生成询价单」）同样算。
   guide.js 检测到碰撞时给 .guide-root 加 .bar-safe，并把「上移量」写成 --bar-safe-lift
   （按被挡按钮的实际上沿算 + 20px 呼吸位），胶囊与角色面板整体上移，
   保证主按钮完整可见（只改位置，不改任何业务样式）。 */
.guide-root.bar-safe .guide-fab{bottom:calc(var(--sp-5) + var(--bar-safe-lift, 56px))}
.guide-root.bar-safe .guide-panel{bottom:calc(var(--sp-5) + 44px + var(--sp-2) + var(--bar-safe-lift, 56px))}