/* ==========================================================================
   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;
}

/* 图片/视频/表格防溢出
   ⚠️ 2026-09-23：这两条原先**无条件生效**，会改掉桌面端的 table 布局与固定高度图。
   当时只影响 4 个页面（首页/学习/社区/客服），影响面小；
   现在要把本文件推广到全站另外 21 个内容页（含 api-doc、plan-comparison、
   terms-of-service 等重表格页），无条件生效会直接改坏它们的桌面端表格，
   故收窄到窄屏。桌面端行为回归 styles.css 原始定义，
   已用 1440px 截图对 4 个老页面做前后对比验证。 */
@media (max-width: 768px) {
  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;
}

/* ⚠️ 例外（2026-09-23 修复）：上面那条兜底规则会把「只设了宽度、没设高度」的
   圆形图标按钮强行拉到 44px 高 ⇒ 正圆被拉成竖椭圆。
   实测受害：生词本/词海卡片的 ×/＋/💬（.wb-icon-btn，32×44）、
   右上角风格球（.theme-palette-btn，40×44）。
   这些按钮要的是「正圆」，尺寸由各自规则决定，所以这里把 min-height 还原。
   注意：给它们加 width/height 是没用的 —— min-height 优先级高于 height。 */
.wb-icon-btn,
.theme-palette-btn {
  min-height: 0;
}

/* --------------------------------------------------------------------------
   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;
  }
}

/* ==========================================================================
   10. 全站竖屏适配补充（2026-09-23）
   --------------------------------------------------------------------------
   背景：此前本文件只被 4 个页面引用、mobile-nav.js 只被 6 个引用，
   其余 21 个页面在手机上等于「裸奔」：没有底部导航、触控目标过小、
   横向标签条看不出能滚。本次把两个文件推广到全站，并补上实测量出的问题。

   ⚠️ 本节所有规则一律关在 (max-width:768px) 内，对桌面端零影响。
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 10.1 右侧浮动条不再遮挡正文 ----------
     实测（390×844）：#feedbackTab 是 39×94 的竖排标签，贴在 right:0，
     正好压住「学习页/社区页横向标签条的右端」和「客服页头部的按钮区」，
     是窄屏上最显眼的遮挡物。
     手机上它的价值有限（会议页导航里另有「反馈」入口），故整条隐藏；
     桌面端保持原样（可拖动贴边，不压任何东西）。
     ⚠️ 用 id 选择器 + !important 才能压过 styles.css 的 .feedback-tab。 */
  #feedbackTab,
  #feedbackPanel { display: none !important; }

  /* ---------- 10.2 横向可滚条：补上「还能往右滑」的视觉暗示 ----------
     实测：学习页/社区页的标签条**确实能横向滚动**（overflow-x:auto 已生效，
     测试抓到一个 overflow 容器），但滚动条被隐藏 + 右端被浮标压住
     ⇒ 用户以为就只有看得见的 3 个 tab。
     修法：由 mobile-nav.js 给可滚容器按需打 .is-more-right，
     这里只在「右边确实还有内容」时挂一层渐隐遮罩。 */
  .is-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

  /* ---------- 10.3 客服页头部：修「逐字竖排」 ----------
     实测（390px）：.sp-chat-head 高 176px，.sp-name 被挤成 42px 宽 × 72px 高
     ⇒「智能客服 小悦」折成竖排，头像也被挤到名字下面。
     根因：头部是 nowrap 的 flex —— 头像 40 + 三个按钮约 270 + 两处 12px gap
     已吃掉 368px 里的 334px，留给名字的只剩 34px。
     修法：允许换行 ⇒ 名字占第一排、按钮整排落到第二排。 */
  .sp-chat-head {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 14px;
  }
  .sp-id { flex: 1 1 96px; min-width: 0; }
  .sp-name,
  .sp-status { white-space: nowrap; }
  .sp-status { overflow: hidden; text-overflow: ellipsis; }
  .sp-head-actions {
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-head-actions::-webkit-scrollbar { display: none; }
  .sp-head-actions .sp-btn { flex: 0 0 auto; min-height: 36px; }

  /* ---------- 10.4 客服页输入区不被压扁 ---------- */
  .sp-composer { padding: 10px 12px 12px; }
  .sp-input-row { gap: 8px; align-items: flex-end; }
  .sp-input { min-width: 0; }
  .sp-send { flex: 0 0 auto; min-height: 44px; }
  /* 手机上没有物理键盘，「Enter 发送 / Shift+Enter 换行」的提示没有意义，
     收起来给对话区让位（同一信息此前还重复写在输入框 placeholder 里，已去掉）。 */
  .sp-hint span:last-child { display: none; }
  .sp-hint { justify-content: flex-start; }

  /* ---------- 10.5 长文档页：目录的左缩进与触控目标 ----------
     实测（user-guide）：目录条目前有巨大左缩进（吃掉近半屏宽），
     且行高偏小、点不准。改为整行可点、44px 高。 */
  .info-toc,
  .info-toc ul,
  .info-toc ol { padding-left: 0; margin-left: 0; list-style: none; }
  .info-toc li { margin: 0; }
  .info-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    text-decoration: none;
  }

  /* ---------- 10.6 内容页通用触控目标 ----------
     实测：api-doc 25 个、terms-of-service 21 个、user-guide 20 个可点元素
     小于 32×32，手指点不准。这里给整站的内容型链接补最小高度。 */
  .footer-bottom-links a,
  .footer-column a,
  .info-table a,
  .doc-body a { display: inline-flex; align-items: center; min-height: 40px; }

  /* ---------- 10.8 测试阶段横幅的关闭按钮 ----------
     实测各内容页顶部「网站正处于测试阶段…」横幅右侧的 × 只有 28px 宽，
     比 32px 最小触控宽窄一点，手指容易点空。
     会议页 / 个人中心由 mobile-app.css §M.7 负责，这里覆盖其余全部页面。 */
  .site-testing-banner-close { min-width: 32px; min-height: 32px; }

  /* ---------- 10.9 独立的「返回 / 退出」小链接 ----------
     实测这几个是独立成块的控件（不是正文里夹着的链接），高度只有 21~24px：
       byok              ← 返回个人中心   (94×21)
       community-admin   ← 返回社区       (68×~22, .admin-back)
       admin-2fa-*       退出登录         (48×~22)
     WCAG 2.5.8 对独立控件要求至少 24×24，这里统一抬到 32px。
     ⚠️ 用 :not(.text-button) 排除导航栏右上角那个「个人中心」按钮 ——
        它本来就够高，且被改成 inline-flex 会破坏导航栏对齐。
     ⚠️ 需要 !important：byok 那处的高度是被**内联 style** 压着的，
        外部普通规则赢不了内联样式，只有 !important 能覆盖。
     正文段落里夹着的行内文字链（disp=inline）不在此列 —— 按 WCAG 豁免，
     且强行加高会与上下行文字的热区重叠、反而更容易误点。 */
  a.admin-back,
  a[href="/personal-center/"]:not(.text-button),
  a[href^="/js-mgmt-9x7k/logout/"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 32px;
  }

  /* ---------- 10.7 长文档正文可读性 ----------
     手机上正文两侧不留过多空白，读起来更顺。 */
  .doc-body,
  .info-body { padding-left: 4px; padding-right: 4px; }
}

/* ==========================================================================
   11. 第二轮实测修复（2026-09-23）
   --------------------------------------------------------------------------
   第一轮把 mobile.css / mobile-nav.js 推广到全站后，按 390×844 实测数据
   又补的 4 处问题。同样全部关在 (max-width:768px) 内。
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 11.1 横向标签条改为换行：一次看全，不再藏内容 ----------
     实测溢出量（clientW vs scrollW）：
       learning  #sectionNav       366 → 395（溢 29px）
       community .comm-nav-inner   348 → 556（溢 208px）
       community .comm-tabs        366 → 550（溢 184px）
     它们确实能横滑（第一轮的 overflow-x:auto 有效），但手机上
     「看不出右边还有东西」＝用户当成根本没有 ⇒ 第 4 个以后的分类全被忽略。
     标签数量固定且不多（4~8 个），改成换行后一次看全，也更接近原生应用。
     同时撤掉第一轮给它们挂的右端渐隐（换行后不再需要，留着反而吃掉末字）。 */
  .section-nav,
  .difficulty-tabs,
  .comm-main-nav,
  .comm-nav-inner,
  .comm-tabs,
  .admin-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 6px;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  /* 社区管理页的标签是内联样式（community-admin.html 的 <style>），
     桌面端靠 .admin-tab 的 padding 撑开；换行后把左右内边距收一点，
     让「学习中心管理」这类长标签不至于自己占满一整行。 */
  .admin-tabs .admin-tab { padding: 10px 14px; }

  /* ---------- 11.2 社区页小字提到可读下限 ----------
     实测最小 10px（.comm-nav-label「内容/用户成长」），另有 4 类 11px。
     这些是分类名与时间戳，是用户要读的信息，不是装饰，统一提到 12px。 */
  .comm-nav-label,
  .comm-topic-time,
  .comm-section-badge,
  .comm-pin-badge,
  .comm-tag { font-size: 12px; }

  /* ---------- 11.3 客服页底部提示行避开右下悬浮球 ----------
     实测：风格悬浮球固定在「TabBar 上方 16px、右侧 16px」，
     正好压住 .sp-hint「AI 回答仅供参考…」的右端。给提示行留出空档。 */
  .sp-hint { padding-right: 56px; }
}

/* ==========================================================================
   12. 第三轮修正（2026-09-23）
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 12.1 长文档页的「目录」标题 ----------
     styles.css 的 .info-page .info-toc h3::before 会在标题左侧放一个 20px 图标，
     靠 h3 的 padding-left:28px 让位；窄屏下两者贴得太紧，视觉上像压字。
     手机上直接去掉图标、清掉缩进，标题更干净。
     ⚠️ 这里必须写全 `.info-page .info-toc`（两个类）并用 !important ——
        styles.css 用的就是双类选择器，单类规则压不过它（前两轮踩过）。 */
  .info-page .info-toc h3::before { display: none !important; }
  .info-page .info-toc h3 { padding-left: 0 !important; }

  /* ---------- 12.2 表格类页面的横向滑动提示 ----------
     实测 plan-comparison / data-processing 的 table.info-table 宽 514~613px，
     而屏宽只有 360px ⇒ 每次都被切掉「团队版」整列。
     表格确实能横滑（table{overflow-x:auto} 有效），但没有任何视觉暗示，
     用户会以为那一列不存在。由 mobile-nav.js 给表格打 .is-more-right 后，
     这里在右端挂一层渐隐，明确暗示「右边还有」。 */
  table.is-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }

  /* ---------- 12.3 风格悬浮球缩小并贴边 ----------
     实测它固定在「TabBar 上方 16px、右侧 16px」，会压住正文右端
     （客服页提示行、学习页说明文字、社区页徽章都被压过）。
     缩到 40px 并贴到 12px，遮挡面积减少约三成；
     正文侧的避让由各页面自己处理（见 11.3 的 .sp-hint）。 */
  .theme-palette {
    right: 12px !important;
    bottom: calc(12px + var(--m-tabbar-h, 56px)) !important;
  }
  .theme-palette-btn { width: 40px !important; height: 40px !important; }
}