/* ContractBotX Mobile & Safe-Area Patch
 *
 * 用途：
 *   - iOS safe-area (刘海/灵动岛/底部 Home Indicator 不遮挡)
 *   - 移动端响应式 (iPhone 14: 393px, iPad: 768px)
 *   - 触屏按钮 iOS HIG ≥ 44px
 *   - 防 iOS 自动缩放 (字体 ≥ 16px)
 *
 * 用法：在每个 HTML 的 </head> 前加：
 *   <link rel="stylesheet" href="/mobile.css">
 *
 * 加载顺序：
 *   Tailwind CDN → mobile.css → 页面自身 <style>
 *   自身样式可以覆盖 mobile.css（更高优先级）
 */

:root {
  --sat: env(safe-area-inset-top, 0);
  --sar: env(safe-area-inset-right, 0);
  --sab: env(safe-area-inset-bottom, 0);
  --sal: env(safe-area-inset-left, 0);
}

html {
  /* iOS: 防止页面在 input 聚焦时被缩放（需要 16px+ 字体） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* iOS safe-area padding */
  padding-top:    max(0.5rem, var(--sat));
  padding-right:  max(0.5rem, var(--sar));
  padding-bottom: max(0.5rem, var(--sab));
  padding-left:   max(0.5rem, var(--sal));
  /* iOS: 禁用 tap 高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 字体 ≥ 16px 防 iOS 缩放 */
  font-size: 16px;
}

/* ============================================================
 * 移动端响应式 (max-width: 640px)
 * ============================================================ */
@media (max-width: 640px) {
  /* Tailwind max-w-* 容器收紧 */
  .max-w-6xl,
  .max-w-7xl,
  .max-w-5xl,
  .max-w-4xl {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 多列网格塌陷 */
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid-cols-6 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 字号微调 */
  .text-3xl { font-size: 1.5rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl  { font-size: 1.125rem !important; }

  /* 卡片收紧 */
  .data-card,
  .glass {
    padding: 14px !important;
  }

  /* 按钮最小高度 (iOS HIG: 44px) */
  .btn-primary,
  .btn-secondary,
  button {
    min-height: 44px;
  }

  /* 表格转卡片：隐藏表头，单元格堆叠显示 */
  table.responsive-table thead {
    display: none;
  }
  table.responsive-table tr {
    display: block;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
  }
  table.responsive-table td {
    display: block;
    padding: 4px 0 !important;
    border: none !important;
  }
  table.responsive-table td::before {
    content: attr(data-label) ": ";
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
  }

  /* 顶栏 sticky 增高（避免被刘海盖住 logo） */
  .glass.sticky,
  nav.glass,
  .sticky.top-0 {
    padding-top:    calc(var(--sat) + 8px) !important;
    padding-left:   max(12px, var(--sal)) !important;
    padding-right:  max(12px, var(--sar)) !important;
  }

  /* 浮动按钮（联系客服）→ 避开 Home Indicator */
  .fixed.bottom-6.right-6,
  #supportFab {
    bottom: max(24px, calc(var(--sab) + 16px)) !important;
    right: max(24px, var(--sar)) !important;
  }

  /* 弹窗 padding-bottom 避开指示器 */
  .fixed.inset-0 .glass.rounded-2xl {
    margin-bottom: var(--sab);
  }

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

  /* 隐藏非关键列（在带 data-mobile-hide 属性的元素上） */
  [data-mobile-hide="true"] {
    display: none !important;
  }
}

/* ============================================================
 * iPad 横屏 (768-1024px)
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .max-w-6xl { max-width: 90% !important; }
  .max-w-7xl { max-width: 92% !important; }
}

/* ============================================================
 * 暗色 / 浅色模式（跟随系统）
 * ============================================================ */
@media (prefers-color-scheme: light) {
  /* 你的设计就是 dark theme，这里留个 placeholder 给未来扩展 */
}