/* SrbillHub bot 站（/bot）专属样式。
 *
 * 单一真源边界
 * ------------
 * hero（椰树、光环、渐变标题、CTA）、胶囊顶栏、玻璃卡片的**材质**全部由
 * `site.css` + `_visual-runtime.css` + `_site-navbar-capsule.css` 拥有；
 * 这里只写「bot 页多出来的结构」——区块栅格、指令表、步骤条、打赏区。
 * 不复制第二份玻璃配方：卡片一律消费 `--glass-*` / `--radius-*` / `--pill-*`。
 *
 * 唯一例外：`.home-section-point` 在首页被视觉实验室内联了 alpha（见
 * `style.css:6159` 起的 `body[data-page-kind="home"] ... !important` 块）。
 * 那些规则需要 `--visual-*` 变量，bot 页由服务端直出，缺变量时回落到
 * 与首页一致的默认值，所以外观与线上首页完全同款，无需在 CSS 里对抗。
 */

/* ---------- 页面骨架 ---------- */

.bot-main {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bot-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vw, 120px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 104px) 24px calc(72px + var(--safe-bottom));
}

.bot-section {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 96px;
  /* `.bot-section` 同时带着 `home-showcase-section` 这个类，而 site.css
     给它加了 `padding: clamp(40px, 8vw, 100px) 0`。再叠加 `.bot-sections`
     的 flex gap，两个区块之间实际空出 100+120+100 ≈ 320px —— 页面看上去就是
     一条条空带。垂直节奏统一归 `.bot-sections` 的 gap 管，这里把继承来的
     block padding 收回（水平留白本来就由容器 padding 负责）。 */
  padding-block: 0;
}

.bot-section .home-section-title {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
}

.bot-section .home-section-desc {
  max-width: 640px;
}

/* ---------- 顶栏品牌 ---------- */

.bot-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.bot-brand-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* ---------- 能力卡：两列栅格 ---------- */

.bot-points {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ---------- 指令表 ---------- */

.bot-cmd-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

.bot-cmd-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.bot-cmd-group-title svg,
.bot-cmd-group-title i {
  color: var(--accent);
  stroke: var(--accent);
}

.bot-cmd-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.bot-cmd-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.bot-cmd-row:last-child {
  border-bottom: 0;
}

.bot-cmd-row dt {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  word-break: break-word;
}

.bot-cmd-row dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.bot-cmd-row code,
.bot-step-body code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .92em;
  padding: 2px 6px;
  border-radius: var(--radius-control);
  background: var(--accent-light);
  color: var(--accent);
}

@media (max-width: 640px) {
  .bot-cmd-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- 三步绑定 ---------- */

.bot-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bot-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.bot-step-index {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 900;
  font-size: 15px;
}

/* ---------- 打赏 ---------- */

.bot-donate-section {
  align-items: center;
  text-align: center;
}

.bot-donate-section .home-section-desc {
  margin-left: auto;
  margin-right: auto;
}

.bot-donate-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

/* 两张码都加载失败（还没上传）时整块收起来，由 JS 展开提示语。 */
.bot-donate-grid[hidden] {
  display: none;
}

.bot-donate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.bot-donate-item figcaption {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
}

.bot-donate-qr {
  width: min(200px, 56vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.bot-donate-pending {
  margin: 4px auto 0;
  max-width: 30em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- 页脚 ---------- */

/* ---------- 顶栏账号位（已登录态） ---------- */
/* 未登录是 `btn-outline` 的「登录」；已登录后与主站顶栏同构：24px 圆头像 +
   用户名。尺寸对齐 `site-bundle.js` 里主站写死的那组内联值（24px / gap 8px），
   这里用类落地，避免往 bot.js 里再塞一段内联样式。 */

.bot-auth-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bot-auth-face {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 无头像时的首字母圆片：底色走强调色令牌，前景由 theme-fg 决定，
   保证在任何主题下都读得清（纯色主题下强调色会变，这里跟着变）。 */
.bot-auth-face-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-solid, var(--accent-light));
  color: var(--theme-fg, #fff);
  font-size: 12px;
  font-weight: 700;
}

.bot-auth-in .auth-name-span {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-footer {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .bot-sections {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 窄屏标题：site.css 的 `@media (max-width:1024px)` 里有
   `.home-section-title { font-size: clamp(22px, 5vw, 36px) !important }`，
   会把「一屏一个主题」的 bot 页标题压到 19.5px 实测值上。这条只为 bot 页
   自己的结构覆盖回去，不触碰全局规则。 */
@media (max-width: 1024px) {
  body[data-bot-page] .bot-section .home-section-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    letter-spacing: -0.03em;
  }
}