/* ==========================================================================
   JoySpeech 应用页移动端增强（meeting.html / personal-center.html 专用）
   --------------------------------------------------------------------------
   ⚠️ 设计原则（改动前务必先读）：
     本文件把**所有规则都关在 @media (max-width:768px) 内**，
     唯一的例外是 `.mobile-tabbar{display:none}`（只作用于 JS 注入的新元素）。
     因此对桌面端（>768px）**零影响** —— 满足「不影响网页版功能/UI」的硬要求。

   为什么不像其他页面那样直接引 mobile.css：
     那 4 个页面（首页/学习/社区/客服）用的 mobile.css 里有若干**全局规则**
     （如 `img,video,iframe,svg{max-width:100%;height:auto}`、`table{display:block}`）。
     会议页是重调过的应用页（styles.css 内大量 .meeting-* 规则），
     贸然引入这类全局规则可能动到桌面端 UI，所以这里另起一个「只在手机生效」的文件。
   ========================================================================== */

/* 桌面端不显示 TabBar（只作用于此文件配套的注入元素，不影响既有 UI） */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  :root {
    --m-sab: env(safe-area-inset-bottom, 0px);
    --m-tabbar-h: calc(56px + var(--m-sab));
  }

  /* ---------- 顶部安全区（刘海），与其它页面保持一致 ---------- */
  .site-header {
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .nav { height: 64px; }

  /* ---------- 底部 TabBar ---------- */
  .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 .nav-toggle { display: none !important; }

  /* ---------- 会议页：底部功能栏整体上移，给 TabBar 让位 ---------- */
  /* styles.css 里 .meeting-bottom-bar 是 position:fixed;bottom:0 */
  body.has-mobile-tabbar .meeting-bottom-bar {
    bottom: var(--m-tabbar-h);
  }
  /* 会议页主体原本用 margin-bottom:56px 避让底部栏，现在要连 TabBar 一起让出 */
  body.has-mobile-tabbar .meeting-page {
    margin-bottom: calc(56px + var(--m-tabbar-h));
  }
  /* 会议页由 .meeting-page 自己让位，body 不必再垫一遍，避免留白过多 */
  body.has-mobile-tabbar:has(#meetingPage) {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   站点页脚：手机端精简为「合规行」
   --------------------------------------------------------------------------
   手机端页脚原本把「品牌 + 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;
  }
}

/* --------------------------------------------------------------------------
   个人中心「更多入口」卡片（手机端专用）
   --------------------------------------------------------------------------
   桌面端不显示：桌面端底部有整条站点页脚，链接已经在那里，避免重复。
   手机端页脚被精简后，这 4 组入口集中收在这里，从 TabBar「我的」可达。
   用原生 <details> 实现开合，不需要 JS（对无障碍与 HIG 更友好）。
   ⚠️ 颜色只用 --joy-foreground（字）/ --joy-muted-foreground（次要字），
      这两个在 3 套风格 + 夜览下都有定义；不要用未定义的 --joy-text-primary。
   -------------------------------------------------------------------------- */
.pc-card.pc-site-info { display: none; }

@media (max-width: 768px) {
  /* 加固为 .pc-card.pc-site-info：同为单类选择器时，
     只靠加载顺序不够稳，所以显式提升权重 */
  .pc-card.pc-site-info {
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .pc-site-info > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--joy-foreground);
    cursor: pointer;
    list-style: none;
  }
  .pc-site-info > summary::-webkit-details-marker { display: none; }
  .pc-site-info-chevron {
    flex: 0 0 auto;
    color: var(--joy-muted-foreground);
    transition: transform .2s ease;
  }
  .pc-site-info[open] > summary { border-bottom: 1px solid var(--joy-border); }
  .pc-site-info[open] .pc-site-info-chevron { transform: rotate(180deg); }

  .pc-site-info-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 14px 18px 20px;
  }
  .pc-site-info-group h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--joy-muted-foreground);
  }
  .pc-site-info-group ul { margin: 0; padding: 0; list-style: none; }
  .pc-site-info-group li { margin: 0; }
  .pc-site-info-group a {
    display: block;
    min-height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: var(--joy-foreground);
    text-decoration: none;
  }
  .pc-site-info-group a:active { color: var(--joy-primary); }
}