/* ═══════════════════════════════════════════════════════════════
   知微 SPA 前端移动端增强 mobile-enhance.css v1.0
   ★开发负责人: 知微工作区 | 2026-08-20 | 手机+Pad UI/UE 适配
   
   SPA 前端断点统一（1439/1199/991/1100/900/700/600 → 1024/640）
   + 44px 触控 + z-adocs-sidebar 抽屉 + safe-area
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
  --touch-target: 44px;
}

/* ═══ 手机端 <640px ═══ */
@media (max-width: 640px) {

  /* 触控目标 */
  a, button, .z-adocs-sb-item, .nav-item, .menu-item, .sidebar-link,
  .chat-input-btn, .tool-btn {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }

  /* SPA 侧边栏 → 抽屉（由 mobile-enhance.js 控制 .open） */
  .z-adocs-sidebar, aside.z-adocs-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .z-adocs-sidebar.open { transform: translateX(0); }

  /* 主布局全宽（SPA 顶部栏/内容区） */
  .app-header, .topbar, .main-content, .content, .chat-layout,
  #app, .app-main, main {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ── 首页 index-entry.html 修复（2026-08-21 #手机竖屏） ──
     .sidebar fixed 220px + .main-area margin-left:220px 在竖屏挤压内容
     抽屉化 sidebar + main-area 全宽 + sidebar-layout 转 block */
  .sidebar, aside.sidebar, .side-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open, aside.sidebar.open, .side-nav.open { transform: translateX(0); }
  /* 首页内容区全宽（清 220px 补偿） */
  .main-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 首页 flex 布局转 block（防侧栏挤压） */
  body.sidebar-layout { display: block !important; }
  body.sidebar-layout .sidebar-body,
  body.sidebar-layout .sidebar-content { margin-left: 0 !important; }

  /* 聊天布局单列（覆盖 1050px 断点） */
  .chat-layout { grid-template-columns: 1fr !important; }
  .side-stack { display: none !important; }

  /* 弹性字号 */
  h1, .page-title { font-size: clamp(22px, 6vw, 32px) !important; }
  h2, .section-title { font-size: clamp(18px, 5vw, 26px) !important; }
  body { font-size: 15px; line-height: 1.7; }

  /* 卡片/图表单列 */
  .card, .chart-card, .stat-card, .module-card, .grid-item,
  .dashboard-grid > *, .card-grid > * {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
  }
  .dashboard-grid, .card-grid, .chart-grid, .grid-container {
    grid-template-columns: 1fr !important;
    display: block !important;
    gap: 0 !important;
  }

  /* 表格横向滚动 */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 图表容器 */
  .chart-container, .chart-box, [id^="chart"] {
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* 安全区 */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-bar, .tabbar, .input-bar {
    padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }

  /* 输入框放大（防 iOS 聚焦缩放） */
  input, textarea, select { font-size: 16px !important; min-height: 44px; }
}

/* ═══ 平板端 641-1024px ═══ */
@media (min-width: 641px) and (max-width: 1024px) {

  /* 双列栅格（统计卡墙），聊天内容保持单列 */
  .dashboard-grid, .card-grid, .chart-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* SPA 侧边栏可折叠（默认收起） */
  .z-adocs-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(70vw, 300px) !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .z-adocs-sidebar.open { transform: translateX(0); }

  /* ── 首页 index-entry.html 平板适配（2026-08-21） ── */
  .sidebar, aside.sidebar, .side-nav {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(70vw, 300px) !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .sidebar.open, aside.sidebar.open, .side-nav.open { transform: translateX(0); }
  .main-area { margin-left: 0 !important; }
  body.sidebar-layout { display: block !important; }

  .app-header, .main-content, #app {
    margin-left: 0 !important;
    padding: 0 20px !important;
  }
  body { font-size: 15.5px; }
}

/* ═══ 触屏 hover 降级 ═══ */
@media (hover: none) {
  .card:hover, .btn:hover, .z-adocs-sb-item:hover, .tool-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ═══ 桌面 >1024px 恢复 ═══ */
@media (min-width: 1025px) {
  .z-adocs-sidebar {
    transform: none !important;
    position: sticky !important;
  }
  .hamburger-btn, .back-top-btn, .sidebar-mask { display: none !important; }

  /* ── 首页桌面恢复（防移动端规则回归） ── */
  .sidebar, aside.sidebar, .side-nav {
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    height: 100% !important;
    box-shadow: none !important;
  }
  .main-area {
    margin-left: var(--sidebar-width, 220px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.sidebar-layout { display: flex !important; }
}

/* ═══ 减少动画 ═══ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}