/* ============================================================================
 * ClickSplice — 移动端修复层（CALIBRE · Mobile Fix）
 * ----------------------------------------------------------------------------
 * 针对《移动端诊断》列出的 P0 / P1 / P2 缺陷的纯样式修复。
 *
 * 两条硬约束：
 *  1. **全部包在 @media (max-width: 768px) 内** —— 桌面端零影响，不做任何结构性改动。
 *  2. **整体包进 @layer mobile** —— 线上的 apple-theme / cs-ux 覆盖层对控件尺寸、
 *     字号等用了 !important；层叠规则规定对 !important 声明「分层内 > 未分层」，
 *     所以进层才能稳定压过它们，而不必逐条抬高特异性。
 *
 * 作用域：后台工作区（.app-frame）。宣传站（.mkt-page）另有一套。
 *
 * 覆盖的问题：
 *   P0-1 表格只露出第一列      → 首列冻结 + 右侧滚动提示
 *   P0-2 按钮文字被裁到 1px    → 强制显示文字 + 工具条换行
 *   P1-1 触摸目标不达标        → 导航/菜单/弹窗控件 min-height 44px
 *   P1-3 弹窗不锁背景滚动      → body:has([role=dialog]) { overflow: hidden }
 *   P1-4 导航溢出被裁          → 导航容器可横向滚动
 *   P1-5 表格无滚动提示        → 渐变遮罩
 *   P2-1 9px 小字              → 提到 11px
 *   P2-2 长标识符被截断        → 允许换行
 *   P2-3 表格下方 350px 空白   → 容器按内容高度收缩
 *   P2-4 弹窗内小控件          → min-height 44px
 * ========================================================================== */

@layer mobile {
  @media (max-width: 768px) {
    /* ==========================================================
     * P1-1 / P1-4　顶部导航：加大触摸目标 + 允许横向滚动
     * 原来高度只有 34px、项 32×22，且内容 474px 溢出容器 390px 被裁。
     * ======================================================== */

    /* 🔴 导航：**只撑触摸目标，绝不碰容器布局**。
       踩过的坑：给 .maxconv-topnav 设 height:auto / min-height / overflow /
       flex-wrap 中的任何一项，都会让宽屏版导航条（原设计靠固定 34px 高度 +
       overflow 把它藏起来）露出来，和窄屏版叠在一起 —— "ClickSplice" 直接
       压在 "Dashboard" 上。所以容器保持原样，只把项本身撑大；项略高于容器
       也比两套导航重叠好。 */
    /* ⚠️ 顶部导航：**本层不动它，一条规则都不加**。
       踩坑记录（浪费了三轮才发现）：`.maxconv-nav-measure` 看着像"量算用的
       隐藏层"，其实是窄屏真正在用的导航本体（它同时带 `maxconv-module-nav`）。
       谁碰谁出问题：
         · 把它 visibility 隐藏 → 窄屏图标导航消失，露出宽屏文字版，两套叠在
           一起（"ClickSplice" 压在 "Dashboard" 上）；
         · 给 .maxconv-topnav 改 height / overflow / flex-wrap → 同样让宽屏版露面；
         · 只给 .maxconv-nav-item 加 min-height/min-width → 也一样。
       结论：导航的双版本切换靠的是组件结构 + 脆弱的尺寸耦合，要修必须动源码
       （见诊断报告 P1-1），样式层无法安全解决。此处刻意留空。 */
    .maxconv-topnav::-webkit-scrollbar,
    .global-nav::-webkit-scrollbar {
      display: none !important;
    }

    .maxconv-nav-item,
    .maxconv-nav-control,
    .global-nav button,
    .global-nav a {
      min-height: 44px !important;
      min-width: 44px !important;
      padding: 0 13px !important;
      font-size: 13.5px !important;
      border-radius: 10px !important;
      flex: 0 0 auto !important;
      white-space: nowrap !important;
    }
    .maxconv-topnav button,
    .maxconv-topnav a,
    .maxconv-brand,
    .maxconv-brand-mark {
      min-height: 44px !important;
      min-width: 44px !important;
    }
    .maxconv-brand-mark {
      height: 30px !important;
      width: 30px !important;
    }
    /* 顶部创建按钮 + 列表工具条按钮（Edit / Report / Archive / Delete…）
       实测只有 24–32px 高，是 P0-2 里被裁掉文字的那批 */
    .app-frame .maxconv-create-btn,
    .app-frame .maxconv-tool-btn,
    .app-frame [class*="-btn"] {
      min-height: 44px !important;
      min-width: 44px !important;
      padding: 0 12px !important;
    }
    /* 表头排序按钮实测只有 13×13，根本点不中 */
    .app-frame .maxconv-th-sort,
    .app-frame [class*="th-sort"] {
      min-height: 32px !important;
      min-width: 32px !important;
    }
    /* 日期/时间范围选择器的分段控件 */
    .app-frame .maxconv-datetime-seg,
    .app-frame [class*="datetime"] button,
    .app-frame [class*="datetime"] a {
      min-height: 40px !important;
      padding: 0 12px !important;
    }

    /* ==========================================================
     * P0-2　被裁到 1px 的按钮文字：强制重新可见
     * 移动端没有 hover，看不到 tooltip，"Delete selected" 这种
     * 破坏性操作退化成一个小图标尤其危险。
     * ======================================================== */

    /* 🔴 只针对**明确的工具按钮类**，绝不做 `button` 全局覆盖。
       踩坑记录：最初写成 `.app-frame button { … }` + `button > span
       { display:inline-block }`，结果把顶部导航里按断点隐藏的宽屏文字也放了
       出来，两套导航叠在一起（"ClickSplice" 压在 "Dashboard" 上）。
       用 `display: revert` 也没能挡住 —— 只能靠缩小作用域解决。 */
    .app-frame .maxconv-create-btn,
    .app-frame .maxconv-tool-btn {
      overflow: visible !important;
    }
    .app-frame .maxconv-create-btn > span,
    .app-frame .maxconv-tool-btn > span {
      display: inline-block !important;
      overflow: visible !important;
      max-width: none !important;
      width: auto !important;
      min-width: 0 !important;
      flex: 0 0 auto !important;
      text-overflow: clip !important;
    }
    /* 工具条改为换行，容纳展开后的文字。刻意不含 .maxconv-module-nav
       —— 那是导航的一部分，动它同样会让两套导航重叠。 */
    .app-frame [class*="toolbar"],
    .app-frame [class*="report-tool"],
    .app-frame [class*="toolbar"] > div,
    .app-frame [class*="toolbar"] > div > div {
      flex-wrap: wrap !important;
      gap: 6px !important;
      row-gap: 6px !important;
    }

    /* ==========================================================
     * P0-1 / P1-5　数据表格：首列冻结 + 右侧滚动提示
     * 表格内容宽 1508–2862px，视口只有 390px。滑动本身是好的
     * （实测 scrollLeft 0→225 且不串动纵向滚动），缺的是"右边还有列"
     * 这件事没有任何提示。冻结首列让用户始终知道在看哪一行。
     * ======================================================== */

    .app-frame .maxconv-datatable {
      position: relative !important;
    }
    .app-frame .maxconv-table th:first-child,
    .app-frame .maxconv-table td:first-child {
      position: sticky !important;
      left: 0 !important;
      z-index: 6 !important;
      background: var(--panel-bg, #ffffff) !important;
      box-shadow: 2px 0 6px -2px rgba(16, 24, 40, 0.16) !important;
    }
    .app-frame .maxconv-table thead th:first-child {
      z-index: 8 !important;
      background: var(--table-header, #fafbfc) !important;
    }
    /* 右侧渐隐遮罩：暗示还有内容 */
    .app-frame .maxconv-datatable::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 32px;
      background: linear-gradient(90deg, transparent, rgba(16, 24, 40, 0.11));
      pointer-events: none;
      z-index: 7;
    }
    .dark .app-frame .maxconv-datatable::after {
      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5));
    }

    /* ==========================================================
     * P2-3　表格下方约 350px 空白：容器按内容高度收缩
     * ======================================================== */

    .app-frame .maxconv-datatable,
    .app-frame .maxconv-datatable-scroll,
    .app-frame .maxconv-body-scroll {
      flex: 0 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
    }

    /* ==========================================================
     * P1-3　弹窗打开时锁住背景滚动
     * 原来 body 的 overflow 没有变，滑动手势会先滚背景，iOS 上会
     * 出现橡皮筋错位，关闭弹窗后还丢失阅读位置。
     * ======================================================== */

    body:has([role="dialog"]),
    body:has([role="alertdialog"]) {
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }

    /* ==========================================================
     * P2-4　弹窗内的控件撑到可触摸尺寸
     * ======================================================== */

    [role="dialog"] button,
    [role="dialog"] [role="button"],
    [role="dialog"] input,
    [role="dialog"] select,
    [role="dialog"] textarea,
    [role="dialog"] a[class*="btn"] {
      min-height: 44px !important;
    }
    [role="dialog"] button[data-slot="dialog-close"],
    [role="dialog"] button[aria-label*="lose"] {
      min-width: 44px !important;
      min-height: 44px !important;
    }
    /* 面板在小屏要能滚动，而不是被裁 */
    [role="dialog"] {
      max-height: 88vh !important;
      overflow-y: auto !important;
    }

    /* ==========================================================
     * 下拉菜单（More / 账户菜单）项也要到 44px
     * ======================================================== */

    [role="menu"] [role="menuitem"],
    [role="menu"] button,
    [role="menu"] a,
    [role="listbox"] [role="option"] {
      min-height: 44px !important;
      padding: 0 12px !important;
    }

    /* ==========================================================
     * P2-1　9px 小字提到 11px（iOS 最小可读）
     * ======================================================== */

    .app-frame .dash-chart-legend button,
    .app-frame .dash-chart-legend button b,
    .app-frame .report-tool-label,
    .app-frame .performer-list > header,
    .app-frame .performer-list > header * {
      font-size: 11px !important;
    }

    /* ==========================================================
     * P2-2　长标识符（API Key scope 等）允许换行，不再被截断
     * ======================================================== */

    .app-frame code,
    .app-frame kbd,
    .app-frame [class*="mono"] {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      max-width: 100% !important;
    }

    /* ==========================================================
     * 表单与列表控件统一到 44px
     * ======================================================== */

    .app-frame input,
    .app-frame select,
    .app-frame textarea,
    .app-frame [role="combobox"],
    .app-frame [role="checkbox"],
    .app-frame [role="switch"] {
      min-height: 44px !important;
    }
    .app-frame [role="tab"] {
      min-height: 40px !important;
      padding: 0 14px !important;
    }
  }
}