/* ==========================================================================
   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; }
/* 桌面端不显示会议页底栏的「更多」开关（同为注入元素，见 §M.8） */
.mb-bar-toggle { 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 避让底部栏（那是桌面端的固定栏高），
     手机端底栏会换行成多排、高度不定 ⇒ 让位高度改由 M.6 用 CSS 变量计算。 */
  /* 会议页由 .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); }
}

/* ==========================================================================
   M. 会议页 / 个人中心 竖屏深度适配（2026-09-23）
   --------------------------------------------------------------------------
   背景：mobile.css 已推广到其余 25 个页面，但这两个「应用页」引用的是本文件，
   所以它们的手机端问题此前一直没被覆盖。按 390×844（Chromium 移动模式，
   带登录态）实测，量出 5 类问题：

     1. .meeting-page 是 flex(row)，且 #chatPanel / #summaryPanel 各自
        min-width:260px ⇒ 350px 的可用宽放不下 520px，两块面板互相挤压，
        右侧整块被 overflow:hidden 裁掉（#summaryPanel 实际跑到 x=315~575）。
     2. .panel-header 是 nowrap 的 flex，h3 被挤到约 48px
        ⇒「聊天窗口」四个字逐字竖排 —— 截图上最显眼的问题。
     3. .meeting-bottom-bar 里 .bottom-center-wrapper 被压成 0 宽、
        .bottom-terminology-group 跑到 x=563（屏幕外）
        ⇒ 不横向滚动根本点不到「批量导入」。
     4. #feedbackTab（痛点·爽点）浮标压在正文与卡片上。
     5. .history-drawer / .history-divider / .split-divider 是给鼠标拖拽的，
        手机上既拖不动，又白占宽度。

   ⚠️ 全部规则一律关在 (max-width:768px) 内 ⇒ 对桌面端零影响。
   ⚠️ 必须保留「收起/展开」功能：styles.css 用的是
      `.meeting-page.chat-hidden #chatPanel` / `.summary-hidden #summaryPanel`
      （权重 1,2,0），高于本节的 `#chatPanel`（1,0,0），所以收起逻辑照旧生效。
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- M.1 右侧浮标不再遮挡正文（与 mobile.css 10.1 同口径）----------
     这两个页面不加载 mobile.css，所以同样的规则要在这里再写一遍。 */
  #feedbackTab,
  #feedbackPanel { display: none !important; }

  /* ---------- M.2 会议页：左右分栏 → 上下堆叠 ---------- */
  .meeting-page {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 12px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  /* 手机上没有鼠标：历史抽屉与两根拖拽条既拖不动又占宽度，直接收起 */
  .history-drawer,
  .history-divider,
  .split-divider { display: none !important; }

  /* 两块面板各占满一行；高度按视口比例给，避免内容把页面撑成好几屏 */
  #chatPanel,
  #summaryPanel {
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #chatPanel { height: min(58vh, 480px); min-height: 300px; }
  #summaryPanel { height: min(42vh, 380px); min-height: 220px; }

  /* ---------- M.3 面板标题不再逐字竖排 ---------- */
  .panel-header,
  .summary-header {
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: flex-start;
    padding: 8px 12px;
  }
  .panel-header h3,
  .summary-header h3 { white-space: nowrap; }
  .translation-mode-bar,
  .summary-header-actions {
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
    min-width: 0;
  }
  /* 总结语言下拉里最长的是「Bahasa Indonesia」，别让它撑破标题行 */
  .summary-header-actions select { max-width: 58vw; }

  /* ---------- M.4 面板内部的两条功能条允许换行 ---------- */
  .transcript-footer-bar,
  .summary-footer-actions,
  .transcript-footer-left,
  .transcript-footer-right,
  .summary-footer-left,
  .summary-footer-right {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .transcript-footer-bar,
  .summary-footer-actions { padding-left: 12px; padding-right: 12px; }

  /* ---------- M.5 底部功能栏：改成多行，主操作提到第一行 ----------
     实测这是整页第三处溢出源：主操作区被挤成 0 宽、术语框跑到屏幕外。
     手机上改成换行 ⇒ 全部控件一屏可见，不用横滑。
     栏高会随换行排数变化，由 mobile-nav.js 量出后写进 --m-bottom-bar-h，
     正文据此让位（见 M.6）。 */
  .meeting-bottom-bar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    padding: 8px 12px;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 34vh;
    -webkit-overflow-scrolling: touch;
  }
  /* 主操作（源/目标语言 + 开始翻译 + 关麦 + 清空）整行提到最前 */
  .meeting-bottom-bar .bottom-center-wrapper {
    order: -1;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
  }
  /* 分隔符「|」是纯装饰，换行后每行都以它开头很乱 */
  .meeting-bottom-bar > .bottom-separator,
  .meeting-bottom-bar .bottom-center-wrapper > .bottom-separator { display: none; }
  /* 语言下拉不再占 8em 固定宽（原本两枚就吃掉 200px） */
  .meeting-bottom-bar .meeting-lang-select {
    width: auto;
    min-width: 0;
    max-width: 40vw;
    flex: 0 1 auto;
  }

  /* ---------- M.6 正文为「底部功能栏 + TabBar」让位 ----------
     栏高由 mobile-nav.js 量出（换行后排数不定，写死会遮挡内容或留白过多）；
     量不到时退回 120px 的保守值。 */
  body.has-mobile-tabbar .meeting-page {
    margin-bottom: calc(var(--m-bottom-bar-h, 120px) + var(--m-tabbar-h));
  }

  /* ---------- M.7 触控目标：把 < 32px 的小控件抬到可点范围 ----------
     实测来源：底部栏按钮 28~31px、顶部提示条关闭键 28×20、
     页脚合规链接 52×21（手指点不准，容易误点相邻项）。 */
  .site-testing-banner-close { min-width: 32px; min-height: 32px; }
  .footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .translation-toggle-btn,
  .terminology-save-btn,
  .summary-btn,
  .meeting-bottom-bar .meeting-btn,
  .meeting-bottom-bar .mute-btn,
  .meeting-bottom-bar .terminology-input { min-height: 32px; }

  /* ---------- M.7b 状态徽章字号 ----------
     实测 #asrServiceStatusText / #mtServiceStatusText 只有 10px，
     是全站最小的两处文字（手机次要信息一般 11~13px）。
     抬到 12px 让它可读 —— 这两处是纯状态提示、不是交互元素，
     放大不会挤动底栏（M.5 已把底栏改成可换行的多行布局）。 */
  #asrServiceStatusText,
  #mtServiceStatusText { font-size: 12px; }

  /* ---------- M.8 顶部全宽工具栏：不再常驻，滚动即让位 ----------
     实测（390×844）：它高 262px（占屏高 31%）且是 position:sticky，
     与「固定页头 64 + 底部功能栏 ~100 + TabBar 56」叠加后，常驻 chrome 接近四成屏。
     手机上改成静态定位：信息照旧，但往下滚就把这 262px 还给正文。 */
  .meeting-full-toolbar { position: static; }

  /* ---------- M.9 底栏「更多」开关（由 mobile-nav.js 注入）----------
     实测：换行后底栏有 5 排、约 254px（占屏高 30%），聊天区被压得只剩一条缝。
     低频控件（历史对话 / Speaker / 子组织 / 纠词 / 术语）默认收起 ⇒ 底栏回到 2 排；
     点「更多」再展开。开关插在 .bottom-center-wrapper 里，与主操作同一排。
     ⚠️ 收起规则挂在 html.has-mb-toggle 上，由脚本添加：
        万一脚本没跑起来，控件全部照常显示，功能不会丢。 */
  html.has-mb-toggle .mb-bar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--joy-border);
    background: var(--joy-card);
    color: var(--joy-foreground);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  html.has-mb-toggle .meeting-bottom-bar:not(.is-bar-expanded) .bottom-history-group,
  html.has-mb-toggle .meeting-bottom-bar:not(.is-bar-expanded) .bottom-suborg-group,
  html.has-mb-toggle .meeting-bottom-bar:not(.is-bar-expanded) .bottom-correction-group,
  html.has-mb-toggle .meeting-bottom-bar:not(.is-bar-expanded) .bottom-terminology-group {
    display: none;
  }
}