/* ============================================================
   XWP App Shell — 移动端 App 风格外壳
   ============================================================
   设计原则：**单一槽位源**
   所有钉在屏幕上的元素（底部导航、阅读工具条、分享、回顶、提建议）
   不再各自硬编码 bottom 值，而是统一从 --dock-base 推导。
   --dock-base 表示「底部已经被永久占用的高度」，
   新增任何底部条只需要改这一个变量，所有浮动按钮自动避让。

   槽位（从底往上）：
     [0]                                   底部 Tab Bar
     [+tabbar]                             教程页阅读工具条（可选）
     [+dock-gap]                           提建议 FAB / 分享
     [+fab-h +fab-gap]                     回到顶部
   ============================================================ */

:root{
  --tabbar-h: 56px;    /* 底部标签栏高度 */
  --reader-h: 46px;    /* 教程页阅读工具条高度 */
  --fab-h:    48px;    /* 主浮动按钮占位高度，取实测最大值，保证间距充足 */
  --fab-gap:  12px;    /* 同列相邻浮动按钮的垂直间距 */
  --dock-gap: 14px;    /* 浮动按钮离底部条的间距 */

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 底部已被占用的高度。桌面为 0，移动端由下面的媒体查询覆写 */
  --dock-base: 0px;

  /* ============================================================
     应用页「暗黑紫金」品牌令牌（与 style.css 同源）
     供 articles / community / me 等应用页复用，使全站视觉统一。
     ============================================================ */
  --xwp-bg:#121026;          /* 站点深底（purple-050） */
  --xwp-bg2:#1a1520;         /* 深底渐变另一端（gold-050） */
  --xwp-surface:#15112F;     /* 抬升卡片 */
  --xwp-surface-2:#1B1838;   /* 输入框 / 次级面 */
  --xwp-line:rgba(124,140,255,.22);     /* 紫调分隔线 */
  --xwp-line-strong:rgba(124,140,255,.35);
  --xwp-ink:#E8E6F5;         /* 主文字 浅薰衣草白 */
  --xwp-ink2:#9A96C4;        /* 次文字 灰紫 */
  --xwp-gold:#E7C889;        /* 品牌金 主强调（gold-300） */
  --xwp-gold-400:#C98E2E;
  --xwp-gold-500:#BA7517;
  --xwp-gold-600:#A4630F;
  --xwp-gold-700:#854F0B;
  --xwp-gold-800:#6E4A0C;
  --xwp-purple:#7C8CFF;      /* 品牌紫 次级强调 */
  --xwp-red:#ff6b6b;         /* 点赞语义红（保留） */
}

/* ---------- 底部标签栏：默认不显示（桌面是网站风格） ---------- */
.xwp-tabbar{ display:none; }
.xwp-reader{ display:none; }

/* App 风格动作图标（分享 / 提建议）默认隐藏：
   PC 端走网站原生导航（.nav-cta 的文字按钮），不显示移动端图标。 */
.xwp-abar-acts{ display:none; }

/* ============================================================
   移动端：切换为 App 风格
   ============================================================ */
@media (max-width: 900px){

  :root{
    --dock-base: calc(var(--tabbar-h) + var(--safe-b));
  }

  /* 教程页底部多一层阅读工具条 */
  body.has-reader{
    --dock-base: calc(var(--tabbar-h) + var(--reader-h) + var(--safe-b));
  }

  /* 内容区为底部条让位，否则页脚会被压住 */
  body{ padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  body.has-reader{ padding-bottom: calc(var(--tabbar-h) + var(--reader-h) + var(--safe-b)); }

  /* 顶部让开刘海（viewport-fit=cover 后必须做） */
  .nav-inner{ padding-top: calc(15px + var(--safe-t)); }

  /* ---------- 底部标签栏 ---------- */
  .xwp-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    padding-bottom: var(--safe-b);
    background:rgba(11,10,28,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    /* 分隔线必须用 inset 阴影画：用 border-top 会让实际高度变成 56+1=57px，
       而槽位系统按 --tabbar-h(56px) 计算，结果和阅读工具条交叠 1px。
       inset 阴影不占布局高度，槽位计算才能对得上。 */
    box-shadow:inset 0 1px 0 rgba(124,140,255,.16), 0 -8px 28px -14px rgba(0,0,0,.7);
  }
  .xwp-tabbar .tab{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px;
    height:var(--tabbar-h); min-height:var(--tabbar-h);
    color:#8E8AC4;
    font-size:12px; line-height:1.2;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s;
  }
  .xwp-tabbar .tab svg{
    width:22px; height:22px;
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .xwp-tabbar .tab.on{ color:#E7C889; }
  .xwp-tabbar .tab.on svg{ stroke-width:2.1; }
  .xwp-tabbar .tab:active{ opacity:.55; }

  /* ---------- 顶部动作区 ----------
     原来悬浮在内容上的分享 / 提建议，改挂在导航栏里，
     内容区从此零遮挡，阅读体验不受干扰。 */
  .xwp-abar-acts{ display:flex; align-items:center; gap:6px; }
  .xwp-act{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.3); border-radius:11px;
    background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .15s, background .2s, border-color .2s;
  }
  .nav.scrolled .xwp-act{
    border-color:var(--line); background:#121026; color:var(--ink);
  }
  .xwp-act svg{
    width:18px; height:18px; fill:none; stroke:currentColor;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .xwp-act:active{ transform:scale(.9); }

  /* 教程页顶栏在移动端收起横向导航（主导航已由底部标签栏承载），
     仅保留品牌 + 动作按钮，避免与分享 / 建议图标挤在同一行。 */
  .site-head .nav-links{ display:none !important; }
  .site-head.scrolled .xwp-act{
    border-color:var(--line); background:#121026; color:var(--ink);
  }

  /* 教程页移动端：阅读工具条已自带「目录」按钮（xwp-reader .rd-toc），
     悬浮的 .toc-toggle 与之重复，还会压在底部标签栏（感悟）之上造成按钮互相遮盖。
     故在移动端隐藏该悬浮按钮，目录入口改由阅读工具条承载。 */
  .toc-toggle{ display:none !important; }

  /* 顶栏位置有限：收起次要文字按钮（开始学习 / 加入社群），
     但【保留主登录按钮 .btn-primary】（#navLoginBtn），
     保证移动端首页顶部始终有可见的「登录 / 注册」入口。 */
  .nav-cta .btn-outline,
  .nav-cta .btn-ghost{ display:none; }

  /* ---------- 教程页阅读工具条 ---------- */
  body.has-reader .xwp-reader{
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; z-index:390;
    bottom: calc(var(--tabbar-h) + var(--safe-b));
    height:var(--reader-h); padding:0 12px;
    background:rgba(16,14,36,.97);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(124,140,255,.14);
    box-sizing:border-box;   /* 让 border 计入 height，实际高度才等于 --reader-h */
  }
  .xwp-reader .rd-btn{
    flex:1; height:36px;
    display:flex; align-items:center; justify-content:center; gap:5px;
    border:1px solid rgba(124,140,255,.2); border-radius:10px;
    background:rgba(124,140,255,.07);
    color:#C9D2FF; font-size:13px;
    -webkit-tap-highlight-color:transparent;
  }
  .xwp-reader .rd-btn:active{ background:rgba(124,140,255,.18); }
  .xwp-reader .rd-btn[disabled]{ opacity:.32; }
  .xwp-reader .rd-toc{ color:#E7C889; border-color:rgba(231,200,137,.28); }

  /* ---------- 教程目录抽屉 ----------
     它底边贴在屏幕最底部，会被底部标签栏压住 56px，最后几章点不到。

     不能用 padding-bottom 顶开：那样 clientHeight 会连同 padding 一起变大，
     可滚动距离（scrollHeight - clientHeight）反而变小，照样滚不到最后一章。
     正确做法是抬底边，并把收起位移同步加大，否则关闭时会露出一条边。 */
  .tut-toc{
    bottom: var(--dock-base) !important;
    max-height: calc(100vh - var(--dock-base) - 96px) !important;
    transform: translateY(calc(110% + var(--dock-base) + 20px)) !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .tut-toc.open{
    transform: translateY(0) !important;
  }

  /* .toc-inner 没有任何高度约束，会撑破外层、逼得外层自己也滚动，
     结果顶部被裁且滚不到最后一章。改成 flex 子项并允许独立滚动即可。 */
  .toc-inner{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* ---------- 撤掉所有悬浮按钮 ----------
     分享 → 顶部动作区；提建议 → 顶部动作区（底部弹出面板）；
     回到顶部 → 再次点击当前底部标签。内容区不再有任何悬浮物。 */
  #xwp-share-btn,
  .xwp-totop,
  #xwp-fb-btn{ display:none !important; }

  /* ---------- 反馈面板改为底部弹出（Bottom Sheet） ---------- */
  #xwp-fb-mask{
    place-items:end stretch !important;
    padding:0 !important;
  }
  .xwp-fb-box{
    width:100% !important; max-width:none !important;
    border-radius:20px 20px 0 0 !important;
    border-left:none !important; border-right:none !important; border-bottom:none !important;
    padding:22px 20px calc(20px + var(--safe-b)) !important;
    animation:xwpSheetUp .3s cubic-bezier(.16,1,.3,1);
  }
}

@keyframes xwpSheetUp{ from{ transform:translateY(100%) } to{ transform:none } }

/* ============================================================
   浮动按钮槽位 —— 统一裁决，!important 用于压制 JS 内联样式
   ============================================================ */
#xwp-share-btn{
  bottom: calc(var(--dock-base) + var(--dock-gap)) !important;
  z-index:500 !important;
}
#xwp-fb-btn{
  bottom: calc(var(--dock-base) + var(--dock-gap)) !important;
  z-index:500 !important;
}
.xwp-totop{
  bottom: calc(var(--dock-base) + var(--dock-gap) + var(--fab-h) + var(--fab-gap)) !important;
  z-index:500 !important;
}

/* 弹窗遮罩必须盖在所有浮层之上 */
#xwp-fb-mask{ z-index:9990 !important; }

/* 降低动态效果偏好：去掉毛玻璃、过渡与弹出动画 */
@media (prefers-reduced-motion: reduce){
  .xwp-tabbar,.xwp-reader{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .xwp-tabbar .tab,.xwp-act{ transition:none; }
  .xwp-fb-box{ animation:none !important; }
}

/* ============================================================
   桌面端（≥901px）：全站统一走「底部标签栏」导航（微信桌面风）
   移动端 ≤900px 已是底部标签栏；桌面端原本只有应用页有、首页没有，
   造成「首页顶部导航 + 应用页底部导航」两套风格、跳转很乱。
   现在桌面端也让 .xwp-tabbar 对所有页面生效，顶部只留品牌 + 登录，
   首页桌面端收起冗余文字链接与汉堡，避免双导航。视觉与交互全站一致。
   ============================================================ */
@media (min-width: 901px){
  body{ padding-bottom: calc(var(--tabbar-h) + 14px); }
  .xwp-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    padding-bottom:0;
    background:rgba(11,10,28,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    box-shadow:inset 0 1px 0 rgba(124,140,255,.16), 0 -8px 28px -14px rgba(0,0,0,.7);
  }
  .xwp-tabbar .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; height:var(--tabbar-h); min-height:var(--tabbar-h);
    color:#8E8AC4; font-size:12px; line-height:1.2;
    -webkit-tap-highlight-color:transparent; transition:color .2s;
  }
  .xwp-tabbar .tab svg{
    width:22px; height:22px; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .xwp-tabbar .tab.on{ color:#E7C889; }
  .xwp-tabbar .tab.on svg{ stroke-width:2.1; }
  .xwp-tabbar .tab:active{ opacity:.55; }

  /* 首页桌面端：改用底部标签栏导航，收起顶部冗余文字链接与汉堡，避免双导航 */
  .nav .nav-links{ display:none !important; }
  .nav .burger{ display:none !important; }
}

/* ============================================================
   页面跳转 · 滚动 · 流畅稳定极致优化（2026-08-31）
   ============================================================ */

/* 跨文档视图过渡：Chrome/Edge 126+ / Safari 18 原生 MPA 跳转丝滑，
   两端页面都加载本 CSS 即生效；Firefox / 旧 Safari 自动降级为普通跳转，零副作用。 */
@view-transition { navigation: auto; }

/* 给跳转设定方向感：旧页轻淡出上移、新页淡入上滑 */
::view-transition-old(root){ animation: xwpVTOut .20s ease both; }
::view-transition-new(root){ animation: xwpVTIn .30s cubic-bezier(.16,1,.3,1) both; }
@keyframes xwpVTOut{ from{ opacity:1 } to{ opacity:0; transform:translateY(-6px) } }
@keyframes xwpVTIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* 同页内锚点 / 阅读工具条 / 回顶：平滑滚动 */
html{ scroll-behavior:smooth; }

/* 去除触摸点击的 300ms 延迟，让反馈即时 */
a, button, .tab, .art-card, .thread-card, .xwp-act, .xwp-btn,
.cat-pills button, .me-tabs button, .rd-btn{ touch-action:manipulation; }

/* 页面内容入场：兜底 view-transition，所有浏览器都有淡入上滑，削弱白屏感 */
@keyframes xwpPageEnter{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.xwp-page, #artDetail, #cmDetail, .me-head{ animation: xwpPageEnter .38s cubic-bezier(.16,1,.3,1) both; }

/* 底部固定栏提为独立合成层：滚动时不再重绘背景，缓解毛玻璃掉帧 */
.xwp-tabbar{ will-change:transform; transform:translateZ(0); }
.xwp-reader{ will-change:transform; }

/* 降低动态效果偏好：关闭过渡 / 入场 / 视图过渡动画 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
  .xwp-page, #artDetail, #cmDetail, .me-head{ animation:none !important; }
  a, button, .tab, .art-card, .thread-card, .xwp-act, .xwp-btn,
  .cat-pills button, .me-tabs button, .rd-btn{ touch-action:auto; }
}