/* ============================================================================
 * 移动端适配层
 *
 * 断点只有一个：768px 以下算手机。768~1100 之间 theme.css 里已经有过渡处理
 * （dash-2col 收窄、att-cols 单列等），不用在这里重复。
 *
 * 策略和 theme.css 一样是"叠加层"：不改桌面端一行代码，只在窄屏下覆盖。
 * 侧栏在桌面是常驻导航，在手机上变成汉堡菜单唤出的抽屉；同一份 DOM，
 * 不重新建一套导航——权限过滤（applyPermissions 里对 .nav-item 的增删）
 * 天然对两边都生效，不用维护两份菜单列表。
 * ========================================================================== */

@media (max-width: 768px) {

  html{ -webkit-text-size-adjust: 100%; }
  body{ overscroll-behavior-y: none; }

  /* ---------------------------------------------------------------- 整体骨架 */
  .app{
    flex-direction: column; height: 100dvh;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));  /* 给底部 Tab 栏让位 */
  }

  /* 侧栏：从常驻改成离屏抽屉。固定定位、默认推出屏幕外，加 .open 才滑入。
     用 left 而不是 transform 做位移——效果一样，但 left 是布局属性，改动即时反映在
     getBoundingClientRect 里，不会因为某些环境把变换合成层的重绘推迟到下一帧才生效
     而看起来"没反应"；抽屉一次打开关闭用不了几次，也谈不上牺牲什么性能。 */
  .sidebar{
    position: fixed; top: 0; bottom: 0; left: -320px; z-index: 1200; width: 84vw; max-width: 300px;
    transition: left .28s cubic-bezier(.16,1,.3,1);
    padding-top: calc(18px + env(safe-area-inset-top));
    box-shadow: 12px 0 40px rgba(0,0,0,.25);
  }
  .sidebar.mob-open{ left: 0; }
  .mob-backdrop{
    position: fixed; inset: 0; z-index: 1150; background: rgba(15,23,40,.5);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .mob-backdrop.show{ opacity: 1; pointer-events: auto; }

  .main{ flex: 1; min-height: 0; width: 100%; }

  /* 顶栏：搜索框是原型留下的装饰件，从没接过任何逻辑，手机上直接藏掉不影响功能。
     汉堡按钮放最左边，工作空间切换器和一堆图标按钮挤不下，只留必要的。 */
  .topbar{
    height: auto; min-height: 52px; padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    gap: 8px; flex-wrap: nowrap;
  }
  .topbar-search{ display: none; }
  .ws-switch{ display: none; }
  .mode-pill{ display: none; }
  #globalExportBtn{ display: none; }
  /* 模型连通性状态点：desktop 上是给排障用的，手机上让位给更重要的头像菜单 */
  #aiStatusPill{ display: none; }
  .topbar-right{ gap: 6px; margin-left: auto; }
  .mob-menu-btn{
    display: flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; font-size: 16px; flex-shrink: 0; color: var(--text);
  }

  /* 顶栏用户信息条：折成一个圆形头像按钮，点开才展开完整信息和操作项 */
  #hzUserPill.mob-user-wrap{ position: relative; margin-left: auto; }
  .mob-user-btn{
    width: 30px; height: 30px; border-radius: 9px; border: none; flex-shrink: 0;
    background: linear-gradient(140deg, var(--brand), var(--brand-700)); color: #fff;
    font-size: 12px; font-weight: 650; cursor: pointer;
  }
  .mob-user-panel{
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 12px; width: 220px;
    display: none; flex-direction: column; gap: 8px; font-size: 12px;
  }
  #hzUserPill.mob-open .mob-user-panel{ display: flex; }
  .mob-user-panel > span:first-child{ color: var(--text) !important; line-height: 1.6; }
  .mob-user-panel a, .mob-user-panel > span{
    display: block !important; text-align: center; width: 100% !important;
  }

  .view{ padding: 14px !important; }
  #view-dashboard, #view-kb{ padding: 14px !important; }

  /* 知识库工具条在窄屏放不下（实测「上传」按钮溢出 25px）。
   * 允许换行并让搜索框独占一行，按钮再排到下一行。 */
  .kb-toolbar{ flex-wrap: wrap; }
  .kb-toolbar > input,
  .kb-toolbar > .kb-search{ flex: 1 1 100%; min-width: 0; }

  /* ---------------------------------------------------------------- 底部 Tab 栏 */
  .mob-tabbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex; background: #fff; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(16,24,40,.06);
  }
  .mob-tab{
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 7px; font-size: 9.5px; color: var(--muted-2); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-tab .ic{
    width: 21px; height: 21px; border-radius: 7px; display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 650; color: #fff;
    background: var(--muted-2); transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .mob-tab.on{ color: var(--brand-700); font-weight: 600; }
  .mob-tab.on .ic{ background: var(--brand); transform: translateY(-1px); }

  /* ---------------------------------------------------------------- 通用网格→单列 */
  .metric-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .dash-grid{ grid-template-columns: 1fr !important; }
  .dash-2col{ grid-template-columns: 1fr !important; }
  .att-cols{ grid-template-columns: 1fr !important; }
  .sched-chips{ grid-template-columns: repeat(3, 1fr) !important; }
  .sum-kpis{ grid-template-columns: repeat(2, 1fr) !important; }
  .gov-stats{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px 6px; }

  .metric-card .m-value{ font-size: 22px; }
  .dash-head, .view-head{ flex-direction: column; align-items: flex-start !important; gap: 6px; }
  .dash-head h2{ font-size: 19px; }
  .dash-date{ text-align: left; }

  /* ---------------------------------------------------------------- 客户 360 */
  .crm-shell{ position: relative; flex-direction: column; overflow: visible; height: auto; min-height: 100%; }
  .crm-main{ order: 1; width: 100%; overflow: visible; padding: 12px !important; }
  /* 客户列表 / 时间线在手机上默认收起，变成从左右滑入的覆盖层，
     不占正文空间——三栏硬挤成一列的话，光是滚过客户列表就要划好几屏 */
  .crm-side, .crm-timeline-col{
    position: fixed; top: 0; bottom: 0; z-index: 1180; width: 86vw; max-width: 320px;
    box-shadow: 0 0 30px rgba(0,0,0,.2);
  }
  .crm-side{ left: -340px; transition: left .26s cubic-bezier(.16,1,.3,1); }
  .crm-side.mob-open{ left: 0; }
  .crm-timeline-col{ right: -340px; border-left: 1px solid var(--line); transition: right .26s cubic-bezier(.16,1,.3,1); }
  .crm-timeline-col.mob-open{ right: 0; }
  .mob-crm-tools{
    display: flex; gap: 8px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5;
    background: var(--paper); padding: 2px 0 8px;
  }
  .mob-crm-tools button{ flex: 1; }

  /* ---------------------------------------------------------------- 表格 → 卡片列表
   * mobile.js 会给每个 <td> 补上 data-label（取自表头文字），这里靠它渲染出字段名。
   * 表格结构完全不变，纯 CSS 换个展示方式，desktop 的表格模板一行都不用改。 */
  .crm-table, .crm-table thead, .crm-table tbody, .crm-table tr, .crm-table th, .crm-table td{
    display: block; width: 100% !important;
  }
  .crm-table{ min-width: 0 !important; }
  .crm-table thead{ display: none; }
  .crm-table tbody tr{
    border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; margin-bottom: 9px;
    background: #fff;
  }
  .crm-table tbody tr:hover td{ background: transparent; }
  .crm-table td{
    border-bottom: none !important; padding: 5px 0 !important; display: flex !important;
    align-items: flex-start; gap: 10px;
  }
  .crm-table td[data-label]::before{
    content: attr(data-label); flex-shrink: 0; width: 68px; font-size: 10px;
    color: var(--muted-2); font-weight: 650; padding-top: 1px;
  }
  .crm-table td:empty{ display: none !important; }

  /* 折叠：默认只留主字段和时间/状态，其余收起来（哪几列由 mobile.js 按表头推断）。
     一张文件卡从「文件名/版本/更新时间/上传人/大小/操作」六行收成两行， */
  .crm-table tbody tr:not(.mob-open) td.mob-hide{ display: none !important; }
  .crm-table td.mob-empty{ display: none !important; }
  .crm-table td.mob-more{
    padding: 6px 0 0 !important; margin-top: 4px; border-top: 1px dashed var(--line);
  }
  .crm-table td.mob-more::before{ content: none !important; }
  .crm-table td.mob-more button{
    width: 100%; border: none; background: transparent; color: var(--brand);
    font-size: 11px; font-weight: 600; padding: 4px 0; cursor: pointer;
  }

  /* ---------------------------------------------------------------- 弹窗/抽屉 → 全屏 */
  .hz-modal-mask, #crmDialog{ align-items: flex-end !important; }
  .hz-modal, #crmDialog > div{
    width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important;
    max-height: 88dvh !important;
  }
  .wire-drawer-body{ width: 100% !important; max-width: 100% !important; }
  .crm-form, .hz-field2{ grid-template-columns: 1fr !important; }
  .crm-form .full, .hz-field2 .full{ grid-column: auto !important; }

  /* ---------------------------------------------------------------- 智能问答
   * #view-qa 桌面上是左右两栏：对话区 + 320px 固定宽的引用面板。
   * .cite-panel 的 flex-shrink:0 在 375 屏上会先吃掉 320px，只剩 55px 给对话区，
   * 于是"问一个财税或业务问题"被挤成一列竖排字。
   * 手机上对话区必须独占整屏——打字提问才是主任务；引用是看完答案之后才需要的，
   * 做成从右侧滑入的面板，点回答里的角标会自动拉开（见 mobile.js）。 */
  #view-qa{ flex-direction: column !important; }
  .chat-col{
    width: 100%; border-right: none !important; flex: 1; min-height: 0;
  }
  .chat-scroll{ padding: 18px 14px !important; }
  .composer{ padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; }
  .empty-state h2{ font-size: 18px; }
  .chip-row .chip{ font-size: 11px; }

  /* 输入区工具条：桌面是一整行（三个模式 chip + 联网开关 + 新对话 + / 提示）。
     375 屏放不下，每一项都被压成一列竖排字，还占掉键盘正上方最宝贵的一整行。
     手机上三个模式方块换成一个下拉（见 mobile.js），整条压成一行小控件。
     「输入 / 引用客户」提示直接藏掉——手机没有实体键盘，打 / 唤起选择器这个用法
     本来就不成立，留着只是占地方。 */
  .composer-modes{ flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; align-items: center; }
  .composer-modes .mode-chip{ display: none; }   /* 真 chip 留在 DOM 里当状态源，只是不显示 */
  .mob-mode-select{
    flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 8px; font-size: 12px; background: #fff; color: var(--text);
    max-width: 42vw;
  }
  .mob-mode-select:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
  #hzComposerBar{
    margin-left: auto !important; gap: 8px; flex-wrap: nowrap; min-width: 0;
  }
  .hz-hint{ display: none; }
  .hz-newchat{ padding: 5px 10px; font-size: 11px; white-space: nowrap; }
  .hz-toggle .hz-label{ font-size: 11px; }
  #hzLockChip{ max-width: 24vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .composer-box{ padding: 6px 6px 6px 10px; }
  /* iOS 聚焦时 <16px 会强制放大整页，输入框必须 16px */
  .composer-box textarea{ font-size: 16px !important; }
  .attach-btn{ width: 30px; height: 30px; }

  .cite-panel{
    position: fixed; top: 0; bottom: 0; right: -100%; width: 88vw; max-width: 340px;
    z-index: 1180; box-shadow: 0 0 30px rgba(0,0,0,.2); flex-shrink: 0 !important;
    transition: right .26s cubic-bezier(.16,1,.3,1);
  }
  .cite-panel.mob-open{ right: 0; }
  /* 引用面板的开关：固定在右下角，避开底部 Tab 栏；有引用时才由 mobile.js 显示 */
  .mob-cite-fab{
    position: fixed; right: 14px; bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 1120; display: none; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 22px; border: none;
    background: var(--brand); color: #fff; font-size: 12px; font-weight: 600;
    box-shadow: 0 6px 18px -4px rgba(70,95,255,.55);
  }
  .mob-cite-fab.show{ display: flex; }

  /* ---------------------------------------------------------------- 客户 360 头部
   * .crm-actions 是 margin-left:auto + flex-shrink:0，四个按钮死不收缩，
   * 把客户名挤成一列竖排字。手机上标题和按钮改成上下两行，按钮自己换行。 */
  .crm-head{ flex-direction: column; gap: 10px; }
  .crm-head h2{ font-size: 17px; line-height: 1.45; }
  .crm-actions{
    margin-left: 0 !important; width: 100%; flex-wrap: wrap; flex-shrink: 1 !important;
  }
  .crm-actions .rec-btn{ flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 8px 10px; }
  .crm-sub{ gap: 6px 12px; }
  .crm-kv{ grid-template-columns: 1fr 1fr !important; }

  /* ---------------------------------------------------------------- 实施交付
   * 三处把首屏吃光了，第一条任务要滑到 y=439 才露头（屏幕才 812 高）：
   *   1) 外层 div 内联写死 padding:22px 30px 60px —— 375 屏左右各 30px 是 16% 的宽度
   *   2) .module-toolbar 里「客户下拉 + 三个按钮」换行堆成 105px 高
   *   3) .crm-stats 内联 repeat(4,1fr) —— 四列挤在 375 里每列只剩 53px
   * 内联样式必须用 !important 才盖得住。 */
  #delivBody > div{ padding: 14px 12px 20px !important; }
  #view-delivery .view-head{ flex-direction: column; align-items: stretch !important; gap: 10px; }
  #view-delivery .view-head h2{ font-size: 17px; }
  #view-delivery .view-head p{ display: none; }   /* 功能说明，手机上让位给内容 */
  .module-toolbar{ gap: 6px; }
  #delivCust{ width: 100%; font-size: 12px !important; padding: 8px 10px !important; }
  .module-toolbar .export-btn{ flex: 1 1 auto; font-size: 11.5px; padding: 8px 6px; white-space: nowrap; }
  /* 统计卡：改两列反而更高（两行 168px，比原来四列一行的 132px 还差）。
     真正的问题不是列数是卡太胖。保持四列一行，把内边距和字号压到最小，
     并隐藏第三行的补充说明——「2 项已逾期」「有阻塞」这些信息在下面的任务列表里
     本来就以红色日期和状态标签的形式又出现一次，首屏不必重复占位。 */
  #view-delivery .crm-stats{ grid-template-columns: repeat(4, 1fr) !important; gap: 6px; margin-bottom: 10px; }
  #view-delivery .crm-stat{ padding: 8px 6px; text-align: center; }
  #view-delivery .crm-stat .k{ font-size: 9.5px; margin-bottom: 2px; }
  #view-delivery .crm-stat .v{ font-size: 17px; }
  #view-delivery .crm-stat .d{ display: none; }

  /* 任务卡片：手机上表格转卡片后一条 193px，一屏放不下两条。收紧行距与字段名列宽 */
  #view-delivery .crm-table tbody tr{ padding: 8px 10px; margin-bottom: 8px; }
  #view-delivery .crm-table td{ padding: 3px 0 !important; }
  #view-delivery .crm-table td[data-label]::before{ width: 56px; font-size: 9.5px; }

  /* 「项目状态判断」：里面每一条（阶段/健康度/风险/回款）在上面的统计卡和任务列表里
     都已经出现过一次，手机上属于纯重复，直接不显示 */
  #delivStatusCard{ display: none; }

  /* 文件名：可能很长（合同类文件名动辄二三十字），换行会把一张卡撑成三四行。
     强制单行 + 省略号，完整名字保留在 title 里，长按/悬停仍能看到。
     归属目录（02.合同与法务）在手机上不显示——文件柜的目录结构是桌面整理时才用的，
     手机上找文件靠的是文件名本身。 */
  .file-cell{ min-width: 0; }
  .file-name{
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%; font-size: 12.5px;
  }
  .file-folder{ display: none; }
  /* 卡片里字段名占 56px，值区要能收缩才能触发省略号，否则会把卡片撑宽 */
  .crm-table td{ min-width: 0; }
  .crm-table td > *{ min-width: 0; max-width: 100%; }

  /* 一级折叠区块：标题永远可见，内容默认收起，标题右侧一个箭头指示状态。
     只在"收起"时挂隐藏规则、并且要 !important——卡片里的行大量带内联 display:flex，
     不加 !important 盖不住。展开时索性不出规则，让内联样式原样生效，
     不用 display:block 去覆盖（那会把 flex 布局压成块，行内元素全部错位）。 */
  .mob-section:not(.mob-open) > *:not(.crm-card-head){ display: none !important; }
  .mob-section > .crm-card-head{
    margin-bottom: 0; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .mob-section.mob-open > .crm-card-head{ margin-bottom: 12px; }
  .mob-section > .crm-card-head::after{
    content: '▾'; margin-left: auto; color: var(--muted-2); font-size: 11px;
    transition: transform .2s var(--ease);
  }
  .mob-section.mob-open > .crm-card-head::after{ transform: rotate(180deg); }
  .mob-section h4 .sec-n{
    font-style: normal; font-size: 10px; font-weight: 650; margin-left: 5px;
    background: var(--brand-50); color: var(--brand-700); padding: 1px 7px; border-radius: 10px;
  }
  #view-delivery .crm-card-head{ flex-wrap: wrap; gap: 8px; }
  #view-delivery .crm-tabs{ margin: 0 !important; width: 100%; }
  #view-delivery .crm-tabs .crm-tab{ flex: 1; text-align: center; font-size: 11px; }

  /* ---------------------------------------------------------------- 谈单驾驶舱
   * .cockpit-body 桌面上是横排：左边转写栏（min-width:280px）+ 右边 2x2 象限。
   * 只改象限内部的 1 列没用——转写栏那个 280px 的 min-width 在 375 屏上会把象限区
   * 压缩到只剩几十像素宽，跟没显示一样。整个 body 也要改成纵向堆叠。 */
  .cockpit-body{ flex-direction: column; overflow-y: auto; }
  .transcript-col{
    width: 100% !important; min-width: 0 !important; max-height: 220px;
    border-right: none !important; border-bottom: 1px solid var(--line); flex-shrink: 0;
  }
  .quad-grid{ grid-template-columns: 1fr !important; grid-template-rows: none !important; width: 100%; }
  .quad{ min-height: 200px; }
  .crm-steps{ overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 6px; }

  /* ---------------------------------------------------------------- 外出与出勤 */
  .out-toolbar{ flex-direction: column; align-items: stretch; }
  .out-filters{ display: grid; grid-template-columns: repeat(3, 1fr); }
  .out-filters select{ font-size: 11px; padding: 7px 4px; }
  .cal-grid, .cal-week{ grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .cal-cell{ min-height: 58px; padding: 4px; }
  .cal-item{ font-size: 8px; padding: 2px 4px; }
  .cal-item b{ display: none; }             /* 手机上格子太小，姓名和事由只留一个 */
  .cal-d{ font-size: 10px; }
  /* 时间线条目：保持桌面那种「时间 | 姓名+事由 | 操作」的紧凑横排，不改成纵向堆叠——
     纵向虽然不挤，但一条要占 160px 高，一屏看不到三条，失去了时间线"一眼扫完一天"的意义。
     做法是把各段尺寸压下来给中间的事由腾宽度：
       卡片内边距 20→12、日期栏 78→40、时间只留起始点、取消按钮收成图标大小。
     算下来事由能拿到 ~155px，"上门复核 8 月盘点表"这类事由能在一行内放下，
     客户/状态标签自然折到第二行——和桌面窄窗口时的表现一致。 */
  #view-outing .crm-card{ padding: 12px 10px; }
  .tl-day{ gap: 8px; padding: 10px 0; }
  .tl-date{ width: 40px; }
  .tl-date b{ font-size: 12.5px; }
  .tl-date span{ font-size: 9.5px; }
  .tl-date em{ font-size: 8px; padding: 1px 4px; }
  .tl-count{ font-size: 9px; }
  .tl-items{ padding-left: 10px; gap: 10px; }
  .tl-item{ padding: 8px 9px; gap: 8px; }
  .tl-item::before{ left: -15px; top: 13px; width: 7px; height: 7px; }
  /* 手机上只显示开始时间：结束时间在同一格里再占 40px，而"几点出发"才是要扫的信息 */
  .tl-time{ font-size: 9.5px; white-space: nowrap; flex-shrink: 0; }
  .tl-time .tl-end{ display: none; }
  .tl-body{ gap: 4px 6px; }
  .tl-body b{ font-size: 12px; }
  .tl-title{ font-size: 12px; }
  .tl-kind{ font-size: 9px; }
  .tl-body .crm-pill{ font-size: 9.5px; padding: 1px 6px; }
  .tl-note{ font-size: 10px; }
  .tl-act{ gap: 4px; }
  .tl-act .crm-rowbtn{ padding: 3px 7px; font-size: 10px; }

  /* 顶部月份切换 + 预约按钮：不压的话「本月」会被折成竖排两个字、「预约外出」也换行。
     整行强制不换行，按钮收小，月份显示去掉 88px 的 min-width。 */
  #view-outing .view-head{ flex-direction: row !important; align-items: center !important; gap: 8px; }
  #view-outing .view-head > div:last-child{ flex-wrap: nowrap; gap: 5px; margin-left: auto; }
  #view-outing .view-head .rec-btn{
    padding: 6px 9px; font-size: 11.5px; white-space: nowrap; flex-shrink: 0;
  }
  #view-outing .view-head b{ min-width: 0 !important; font-size: 12.5px; white-space: nowrap; }
  /* 副标题在手机上要占两行，而它只是一句功能说明，看过一次就不需要了 */
  #view-outing .view-head p{ display: none; }
  #view-outing .view-head h2{ font-size: 17px; white-space: nowrap; }

  /* ---------------------------------------------------------------- 甘特图 */
  .gantt-head, .gantt-row{ grid-template-columns: 108px 1fr !important; }
  .gantt-label .t{ font-size: 11px; }
  .gantt-label .c{ font-size: 9px; }

  /* ---------------------------------------------------------------- 报价 */
  .quote-line.v3{ font-size: 10px; }

  /* ---------------------------------------------------------------- 设置中心字典行 */
  .dict-row{ flex-wrap: wrap; }
  .dict-row span{ width: 100%; text-align: left !important; margin-top: 4px; }
}

/* 更小的屏幕（iPhone SE 一类，<380px）再收一档，指标卡改回单列 */
@media (max-width: 380px) {
  .metric-grid{ grid-template-columns: 1fr !important; }
  .sched-chips{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* 桌面端强制隐藏手机专属控件，避免宽屏下露出汉堡按钮/底部栏残影 */
@media (min-width: 769px) {
  .mob-menu-btn, .mob-tabbar, .mob-backdrop, .mob-crm-tools, .mob-cite-fab{ display: none !important; }
  /* 展开按钮是 mobile.js 往 <tr> 里插的一个 <td>：窗口从手机宽度拉回桌面时它还留在 DOM 里，
     不藏掉的话表格会多出一列空格子。被折叠的列当然也要恢复显示。 */
  .crm-table td.mob-more{ display: none !important; }
  .crm-table td.mob-hide, .crm-table td.mob-empty{ display: table-cell !important; }
  .mob-mode-select{ display: none !important; }
  /* 折叠状态是 mobile.js 加的 class。隐藏规则本身写在 max-width:768px 里，
     桌面上根本不生效，所以这里不用（也不能用 display:revert 去）强行恢复——
     那会把卡片里带内联 display:flex 的行一起重置掉。只需去掉手机上的装饰。 */
  .mob-section > .crm-card-head{ cursor: default; }
  .mob-section > .crm-card-head::after{ content: none !important; }
  .sec-n{ display: none !important; }
}