/*
 * ============================================================
 * mobile-dsh.css — dsh web 移动端布局适配（nginx 注入）
 * ============================================================
 *
 * 背景: dsh web 是桌面三栏布局 (sidebar | conversation | details,
 *       AppFrame)。打包产物没有宽度断点媒体查询, 手机(≤375px)直渲染
 *       桌面布局 -> 侧边 rail 占位 + 对话区过窄 + 内容溢出 = 布局乱。
 *
 * 本文件通过 nginx sub_filter 注入到 index.html, 仅 @media 内生效,
 * 桌面端完全不受影响。
 *
 * ── 跨版本容错设计 (dsh 升级后类名 hash 会变) ──
 *   1) dsh 前端用 CSS Modules, 类名格式为 "<hash>_<localName>"
 *      (如 pI_x6G_frame)。hash 前缀每次构建都会变, 但 <localName>
 *      在源码中固定。因此本文件一律用 [class$="_localName"] 结尾匹配,
 *      前缀变了也能命中。
 *   2) 折叠/展开状态用 AppFrame 根节点的 data 属性判断
 *      (data-sidebar-collapsed), 不依赖内部类名。
 *   3) 消息内容溢出修复用通用元素选择器 (img/pre/table 等), 零类名依赖。
 *
 *   验证/维护: dsh 大版本升级后, 检查 dist CSS 里是否仍存在
 *      *_frame / *_sidebarCol / *_centerCol / *_detailsCol
 *      (grep 打包 CSS 或浏览器 devtools 查 body 类名), 即可确认本文件
 *      是否仍生效。若失效, 只改选择器, 不动 nginx 配置。
 *
 * 生效断点: 视口 < 768px (手机/小平板)。平板横屏 (768-1024) 保持
 * dsh 自带行为 (sidebar 自动折叠成 rail)。
 * ============================================================
 */

@media (max-width: 767px) {
  /*
   * 1) AppFrame 三栏 → 单栏 (对话区全宽)
   *    frame 的 grid-template-columns 由 JS 内联设置, 必须 !important
   *    覆盖; sidebar/details 轨道归零, center 独占。
   *    注意: sidebarCol 被设成 fixed 后脱离 grid 文档流, 若不给三列显式
   *    grid-column, centerCol 会被自动排进第 1 列 (0px) 导致对话区宽度为 0。
   */
  [class$="_frame"] {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  }
  [class$="_sidebarCol"] {
    grid-column: 1;
  }
  [class$="_centerCol"] {
    grid-column: 2;
  }
  [class$="_detailsCol"] {
    grid-column: 3;
  }

  /*
   * 2) 侧边栏: 手机上完全移出屏幕 (不占位不遮挡), 通过左上角浮动 ☰ 按钮滑出
   *    - 默认: translateX(-110%) 移出屏幕, 对话区 100% 干净
   *    - 点击 ☰ (#dsh-nav-toggle:checked) → 抽屉滑入覆盖对话区, 宽 min(82vw, 320px)
   *    - 再点 ☰ 或选完会话后收起
   *    注: checkbox + label 由 nginx sub_filter 注入 (install-mobile-css.sh);
   *       抽屉展开时由注入的 JS 联动 dsh 的"打开/收起侧边栏"按钮, 见 dsh-nav-sync
   */
  [class$="_sidebarCol"] {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(82vw, 320px) !important;
    border-right: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s ease;
    transform: translateX(-110%);
  }
  #dsh-nav-toggle:checked ~ #root [class$="_sidebarCol"] {
    transform: translateX(0);
  }
  /* 抽屉打开时 ☰ 按钮隐藏 (联动 JS 后, 收起按钮在抽屉内; 避免 ☰ 挡住抽屉内容) */
  #dsh-nav-toggle:checked ~ .dsh-nav-btn {
    display: none;
  }

  /* 左上角浮动 ☰ 按钮 (由 sub_filter 注入的 label) */
  .dsh-nav-btn {
    position: fixed;
    top: 10px;
    left: 8px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(30, 34, 42, 0.85);
    color: #e6e6e6;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  .dsh-nav-btn:active {
    background: rgba(50, 56, 68, 0.9);
  }
  /* ☰ 按钮出现动画 (页面加载后), 避免闪烁 */
  .dsh-nav-btn {
    animation: dsh-nav-in 0.15s ease 0.6s backwards;
  }
  @keyframes dsh-nav-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /*
   * 3) details 列 (右侧面板): 手机上始终隐藏
   */
  [class$="_detailsCol"] {
    display: none !important;
  }

  /*
   * 4) 拖拽分隔条: 手机上无意义, 隐藏
   */
  [class$="_handle"] {
    display: none !important;
  }

  /*
   * 5) 对话区内容通用溢出修复 (零类名依赖, 跨版本稳定)
   */
  [class$="_centerCol"] img,
  [class$="_centerCol"] video,
  [class$="_centerCol"] canvas,
  [class$="_centerCol"] svg {
    max-width: 100% !important;
  }
  [class$="_centerCol"] pre,
  [class$="_centerCol"] code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
  [class$="_centerCol"] table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  /* 消息/工具卡片等宽内容容器: flex/grid 子项允许收缩, 内容横向滚动而非撑破布局 */
  [class$="_centerCol"] * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  [class$="_centerCol"] [class$="_markdown"],
  [class$="_centerCol"] [class$="_content"] {
    overflow-wrap: break-word;
  }

  /*
   * 6) 输入区 (composer) 安全间距
   *    editor 区域 min-height 保证手机上可点
   */
  [class$="_centerCol"] textarea,
  [class$="_centerCol"] [contenteditable="true"] {
    font-size: 16px !important; /* 防 iOS 聚焦缩放 */
    max-width: 100%;
  }

  /*
   * 7) 触控目标放大: 消息操作按钮/图标按钮
   */
  [class$="_centerCol"] button {
    min-height: 32px;
    touch-action: manipulation;
  }

  /*
   * 8) 安全区: 适配刘海屏/底部手势条
   */
  [class$="_frame"] {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  [class$="_sidebarCol"] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/*
 * 平板窄窗口 (<1024px 但 ≥768px): dsh 自带 sidebar 折叠成 rail,
 * 只需把 details 面板默认收起, 其余交给 dsh 自身逻辑。
 */
@media (min-width: 768px) and (max-width: 1023px) {
  [class$="_frame"] {
    /* details 轨道归零, 但保留 sidebar rail (56px) */
    grid-template-columns: 56px minmax(0, 1fr) 0 !important;
  }
  [class$="_sidebarCol"] {
    grid-column: 1;
  }
  [class$="_centerCol"] {
    grid-column: 2;
  }
  [class$="_detailsCol"] {
    grid-column: 3;
  }
  [class$="_detailsCol"] {
    display: none !important;
  }
  [class$="_handle"] {
    display: none !important;
  }
}