/* ==========================================================================
   JoySpeech iOS / Mobile UI 适配增强（新增文件，不改动 styles.css）
   加载顺序：styles.css -> theme-families.css -> mobile.css（本文件）
   作用：
   1. 处理 iPhone 刘海/灵动岛/底部 home 指示条的安全区（需 viewport-fit=cover）。
   2. 把悬浮风格按钮从右上角移开，避免挡住汉堡菜单。
   3. 补齐标签栏水平滚动、社区搜索/发帖按钮被压扁、触控目标不足等问题。
   4. 提供 PWA/「添加到主屏幕」所需的基础 meta 已在对应 HTML 中补充。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 基础变量（桌面端 env() 返回 0，无影响）
   -------------------------------------------------------------------------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* 取消 iOS 点击高亮，避免按钮闪灰 */
* { -webkit-tap-highlight-color: transparent; }

/* 移除双击缩放延迟，按钮更跟手 */
button, a, input, select, textarea, [role="button"], label {
  touch-action: manipulation;
}

/* 图片/视频/表格强制不溢出 */
img, video, iframe, svg { max-width: 100%; height: auto; }
table { display: block; width: 100%; overflow-x: auto; }

/* --------------------------------------------------------------------------
   1. 顶部安全区：固定导航头 + 主内容避让
   -------------------------------------------------------------------------- */
.site-header {
  height: calc(64px + var(--sat));
  padding-top: var(--sat);
}

/* 保持导航内部高度不变 */
.nav { height: 64px; }

/* 首页 hero 在固定头下方的初始间距，同步加上刘海高度 */
.hero {
  padding-top: calc(64px + var(--sat) + var(--joy-s-8));
  min-height: calc(100vh - 64px - var(--sat));
}

@media (max-width: 640px) {
  .hero { padding-top: calc(64px + var(--sat) + var(--joy-s-4)); }
}

/* --------------------------------------------------------------------------
   2. 底部安全区：页脚、固定悬浮按钮
   -------------------------------------------------------------------------- */
.footer { padding-bottom: calc(24px + var(--sab)); }

/* 客服等应用页本身占满视口，不额外加 body 底距；由页面部件自己处理 */
body:has(.sp-page) { padding-bottom: 0; }
body:has(.sp-page) .site-header { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   3. 触控目标 ≥ 44pt（约 44px）
   -------------------------------------------------------------------------- */
.nav-toggle {
  width: 44px;
  height: 44px;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  margin: 5px auto;
}

.footer-column a,
.nav-links a,
.comm-sort-btn,
.comm-tab,
.comm-nav-btn,
.difficulty-tab,
.section-nav-tab,
.btn, button, [role="button"] {
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   4. 移动导航菜单内部的安全区
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav.open {
    padding-top: calc(18px + var(--sat));
    padding-bottom: calc(18px + var(--sab));
  }
}

/* --------------------------------------------------------------------------
   5. 悬浮风格按钮：小屏下移到底部右侧，不再遮挡汉堡菜单
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .theme-palette {
    top: auto !important;
    left: auto !important;
    right: 16px !important;
    /* 底部有 TabBar 时，悬浮球要站在 TabBar 之上，不能压住页签 */
    bottom: calc(16px + var(--m-tabbar-h, 56px)) !important;
  }
  .theme-palette-btn {
    width: 44px;
    height: 44px;
    cursor: pointer;
    touch-action: manipulation;
  }
  /* 下拉菜单从按钮上方展开，避免超出屏幕底部 */
  .theme-palette-dropdown {
    top: auto !important;
    bottom: calc(44px + 8px) !important;
    right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   6. 标签栏统一改成可水平滚动（学习页、社区页）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section-nav,
  .difficulty-tabs,
  .comm-main-nav,
  .comm-nav-inner,
  .comm-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .section-nav::-webkit-scrollbar,
  .difficulty-tabs::-webkit-scrollbar,
  .comm-main-nav::-webkit-scrollbar,
  .comm-nav-inner::-webkit-scrollbar,
  .comm-tabs::-webkit-scrollbar { display: none; }

  .section-nav-tab,
  .difficulty-tab,
  .comm-tab,
  .comm-nav-btn {
    flex-shrink: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   7. 社区页搜索 + 发帖按钮，避免被压成竖排
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .comm-toolbar,
  .comm-toolbar-right {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }
  .comm-search {
    flex: 1;
    min-width: 0;
  }
  .comm-search input {
    width: 100%;
    min-height: 44px;
  }
  .comm-new-btn {
    white-space: nowrap;
    min-width: fit-content;
    min-height: 44px;
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   8. 表单元素在 iOS 上保持合适字号，避免聚焦时自动缩放
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: max(16px, inherit);
  }
}

/* --------------------------------------------------------------------------
   9. 底部 TabBar（移动端主导航，替换汉堡菜单）
   --------------------------------------------------------------------------
   由 mobile-nav.js 动态注入 .mobile-tabbar，同时给 body 加 .has-mobile-tabbar。
   桌面端整体不显示（display:none），只有小屏才铺出来。
   z-index 9000：低于风格悬浮球(9999)，高于普通内容与页脚。
   -------------------------------------------------------------------------- */
:root {
  /* TabBar 总高 = 内容 56px + iOS 底部安全区 */
  --m-tabbar-h: calc(56px + var(--sab));
}

.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    align-items: flex-start;   /* 56px 内容在上，安全区留作下方空白 */
    height: var(--m-tabbar-h);
    background: var(--joy-card);
    border-top: 1px solid var(--joy-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  }

  .mobile-tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;              /* ≥44px 触控目标 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--joy-muted-foreground);
    font-size: 11px;
    font-weight: 500;
  }

  .mobile-tabbar-item.is-active { color: var(--joy-primary); }

  .mobile-tabbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
  }
  .mobile-tabbar-icon svg { display: block; }

  .mobile-tabbar-label {
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 页面底部让出 TabBar 的高度，避免内容/页脚被压住 */
  body.has-mobile-tabbar { padding-bottom: var(--m-tabbar-h); }
  /* 页脚原本自己垫了安全区，现在底部被 TabBar 占了，不必再垫一遍 */
  body.has-mobile-tabbar .footer { padding-bottom: 24px; }

  /* 应用页（客服）自身就是视口高度，不靠 body padding，改为扣减自身高度 */
  body.has-mobile-tabbar:has(.sp-page) { padding-bottom: 0; }
  body.has-mobile-tabbar .sp-page {
    height: calc(100dvh - var(--sp-doc-top, 0px) - var(--m-tabbar-h));
  }

  /* TabBar 已接管主导航，汉堡菜单退休。
     ⚠️ 只在 TabBar 真的注入成功时才隐藏 —— 万一脚本加载失败，
        汉堡仍在，用户不会彻底失去导航（安全兜底）。 */
  body.has-mobile-tabbar .nav-toggle { display: none !important; }
}

/* --------------------------------------------------------------------------
   站点页脚：手机端精简为「合规行」
   --------------------------------------------------------------------------
   手机端页脚原本把「品牌 + 4 列导航」堆成 1 列，实测高 1130~1416px，
   而 iPhone 12 Pro 一屏仅 844px ⇒ 要连滚 1.3~1.7 屏才到底，
   是手机端最大的无效滚动来源。
   底部 TabBar 已承载主导航，故只保留合规必需的内容：
     隐私政策 / 服务条款 / 数据处理 / 支付说明 / 使用指南 + ICP 备案号。
   被收起的导航入口在「我的」页的「更多入口」卡片里可以找到。
   ⚠️ 规则只在 body.has-mobile-tabbar 下生效：万一 TabBar 脚本加载失败，
      汉堡菜单与整条页脚都还在，导航不会丢。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.has-mobile-tabbar .footer {
    padding: 18px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-tabbar .footer::before { display: none; }
  body.has-mobile-tabbar .footer-container { padding: 0; }
  body.has-mobile-tabbar .footer-grid { display: none; }
  body.has-mobile-tabbar .footer-bottom {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
    gap: 8px;
  }
  body.has-mobile-tabbar .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
  }
  body.has-mobile-tabbar .footer-bottom p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
  }
}