/* ============================================================
   首次访问（冷启动）加载提示组件
   配套脚本：/js/first-visit-hint.js
   ------------------------------------------------------------
   设计约定（与全站一致）：
   - 色值全部取自主题 CSS 变量，明暗双主题自动适配，此处禁止写死颜色
   - 图标一律外链 SVG（/img/svg/{板块}/{dark|light}/...），
     由 js/theme.js 的 syncThemeIcons 统一切换明暗版本
   - 不使用 Emoji / Unicode 符号图标
   - 非阻塞：容器 pointer-events 仅作用于自身，不覆盖页面其他区域，
     不锁滚动、不拦截键盘，页面核心功能始终可用
   - 动画只用 transform / opacity，不触发重排
   ============================================================ */

/* ===== 容器：底部居中的瞬时提示条 =====
   固定定位在视口底部（避开顶部品牌区与右上主题按钮），
   移动端留出安全区内边距，避免被手势条 / 圆角遮挡。 */
.first-visit-hint {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 9996;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 14px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
  /* 入场：轻微上浮 + 淡入，N 型弹性曲线 */
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.36s var(--smooth),
              transform 0.44s var(--elastic-soft);
  pointer-events: auto;
}
.first-visit-hint[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 离场：向下淡出，与入场方向呼应 */
.first-visit-hint[data-leaving="true"] {
  opacity: 0;
  transform: translate(-50%, 12px);
}
.first-visit-hint[hidden] { display: none; }

/* 图标：外链 SVG，配色交给 filter: var(--icon-filter) 体系 */
.first-visit-hint__icon {
  width: 18px;
  height: 18px;
  flex: none;
  filter: var(--icon-filter);
}

/* 文案：允许换行，窄屏下不裁切内容 */
.first-visit-hint__text {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
}

/* 关闭按钮：触控热区 ≥32px，键盘可达 */
.first-visit-hint__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--smooth), color 0.25s var(--smooth);
}
.first-visit-hint__close:hover {
  background: var(--chip-bg);
  color: var(--text);
}
.first-visit-hint__close:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.first-visit-hint__close img {
  width: 12px;
  height: 12px;
  filter: var(--icon-filter);
}

/* ===== 响应式 =====
   居中由 left:50% + translateX(-50%) 承担，与宽度无关，故断点只收敛间距与字号。 */
@media (max-width: 640px) {
  .first-visit-hint {
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform: translateY(12px);        /* 不再需要水平居中位移 */
    gap: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .first-visit-hint[data-open="true"] { transform: translateY(0); }
  .first-visit-hint[data-leaving="true"] { transform: translateY(12px); }
  .first-visit-hint__close { width: 30px; height: 30px; }
}

/* 极窄屏：进一步压缩内边距，保证文案完整可见（不裁切） */
@media (max-width: 380px) {
  .first-visit-hint { left: 12px; right: 12px; padding: 9px 10px; }
  .first-visit-hint__icon { width: 16px; height: 16px; }
}

/* 极矮视口：避免遮挡底部内容 */
@media (max-height: 520px) {
  .first-visit-hint { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px 10px; }
}

/* ===== 减弱动效偏好：直接落位，仅保留极短淡入 ===== */
@media (prefers-reduced-motion: reduce) {
  .first-visit-hint {
    transition: opacity 0.15s ease;
    transform: translate(-50%, 0);
  }
  .first-visit-hint[data-open="true"],
  .first-visit-hint[data-leaving="true"] { transform: translate(-50%, 0); }
}

/* 动画加速开关（.anim-slow）下同步收敛，与全站策略一致 */
.anim-slow .first-visit-hint { transition-duration: 0.16s; }