/* ============================================================
   犀牛传图 PC端 - 新手引导样式表
   版本：2026-06-22
   功能：首次登录交互式分步引导的蒙层、高亮、气泡样式
   设计：暗色遮罩 + 镂空高亮 + 毛玻璃气泡
   ============================================================ */

/* ============ 引导遮罩层 ============ */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;        /* 不阻断点击，透传到下方真实元素 */
}

/* ============ 高亮镂空区域 ============ */
.guide-cutout {
  position: absolute;
  pointer-events: none;        /* 点击透传，让真实按钮可交互 */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  z-index: 10000;
  transition: box-shadow 0.3s ease;
  /* 镂空区域本身透明，box-shadow 形成遮罩效果 */
}

/* 高亮呼吸动画 */
.guide-cutout-pulse {
  animation: guidePulse 2s ease-in-out infinite;
}

@keyframes guidePulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px rgba(14,165,233,0.4); }
  50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 6px rgba(14,165,233,0.7); }
}

/* ============ 气泡提示卡片 ============ */
.guide-tooltip {
  position: fixed;
  z-index: 10002;
  pointer-events: auto;        /* 按钮可以点击 */
  width: 320px;
  background: rgba(22, 22, 48, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 24px 18px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.40),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: opacity 0.3s ease, transform 0.3s ease;
  user-select: none;
}

/* 气泡箭头 */
.guide-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(22, 22, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  z-index: -1;
}

/* 箭头方向 - 下 */
.guide-tooltip.arrow-down::before {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-right: none;
  border-bottom: none;
}
/* 箭头方向 - 上 */
.guide-tooltip.arrow-up::before {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-left: none;
  border-top: none;
}
/* 箭头方向 - 左 */
.guide-tooltip.arrow-left::before {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-left: none;
  border-bottom: none;
}
/* 箭头方向 - 右 */
.guide-tooltip.arrow-right::before {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-right: none;
  border-top: none;
}

/* 进入动画 */
.guide-tooltip-enter {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

/* 步骤标题 */
.guide-tooltip-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 步骤说明文本 */
.guide-tooltip-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* ============ 按钮组 ============ */
.guide-tooltip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guide-tooltip-nav {
  display: flex;
  gap: 8px;
}

/* 步骤指示圆点 */
.guide-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.guide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  transition: all 0.3s ease;
}

.guide-dot.active {
  width: 20px;
  border-radius: 3px;
  background: rgba(14, 165, 233, 0.70);
}

/* 按钮 - 次要 */
.guide-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.70);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.guide-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

/* 按钮 - 主要 */
.guide-btn-primary {
  background: rgba(14, 165, 233, 0.20);
  border: 1px solid rgba(14, 165, 233, 0.30);
  color: #7DD3FC;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.guide-btn-primary:hover {
  background: rgba(14, 165, 233, 0.30);
  border-color: rgba(14, 165, 233, 0.50);
}

/* 等待业务动作完成后自动继续的禁用状态 */
.guide-btn-primary--waiting,
.guide-btn-primary--waiting:hover {
  background: rgba(14, 165, 233, 0.10);
  border-color: rgba(14, 165, 233, 0.18);
  color: rgba(125, 211, 252, 0.55);
  cursor: not-allowed;
  opacity: 0.75;
}

/* 文字按钮 - 轻量 */
.guide-btn-text {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.40);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
}

.guide-btn-text:hover {
  color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.06);
}

/* 轻提示动画 */
@keyframes guideToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============ 右上角「跳过引导」按钮（明显可点） ============ */
#guide-skip-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10003;                 /* 高于气泡 10002，始终可点 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: #FFFFFF;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.30);
  animation: guideSkipPulse 2.2s ease-in-out infinite;  /* 呼吸光环吸引注意 */
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* 前缀 ✕ 图标 */
#guide-skip-btn::before {
  content: '✕';
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

#guide-skip-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
  animation: none;                /* 悬停时停止呼吸，保持稳定 */
  transform: translateY(-1px);
}

#guide-skip-btn:active {
  transform: translateY(0);
}

/* 呼吸光环：用淡蓝描边扩散提醒「这里可点」 */
@keyframes guideSkipPulse {
  0%, 100% {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.30), 0 0 0 0 rgba(125, 211, 252, 0);
  }
  50% {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.30), 0 0 0 7px rgba(125, 211, 252, 0.15);
  }
}

/* ============ 动画过渡 ============ */
.guide-fade-enter {
  opacity: 0;
}

.guide-fade-enter-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.guide-fade-exit {
  opacity: 1;
}

.guide-fade-exit-active {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 居中降级气泡：无箭头 */
.guide-tooltip-center::before {
  display: none;
}

/* 纯蒙层（无镂空高亮） */
.guide-overlay-plain {
  /* 复用 .guide-overlay 的半透明蒙层，仅不绘制镂空 */
  background: rgba(0, 0, 0, 0.45);
}