/* ============================================================
   灵猫AI获客 · 移动端专用样式 （mobile.css）
   ============================================================
   说明：本文件所有样式仅当屏幕宽度 <= 768px（手机/微信内置浏览器）
   时生效，不影响桌面端显示。桌面端看到的界面与此文件无关。
   纯增量追加，不修改、不覆盖原 style.css 的任何样式。
   引入位置：base.html 中 style.css 之后。
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 基础触控优化 ---------- */
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 15px;
  }

  /* 防止 iOS 点击输入框自动放大（字号需>=16px） */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 触控目标最小 44px，更好点按 */
  button, .btn, [role="button"], a.btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 36px;
  }

  /* 主内容区内边距收窄，内容更舒展 */
  .main-content-inner {
    padding: 12px 12px 40px !important;
  }

  /* 页面大标题在小屏适当缩小 */
  .page-header h1 {
    font-size: 20px;
  }
  .page-header .subtitle {
    font-size: 13px;
  }

  /* ---------- 数据卡片行：小屏单列铺满 ---------- */
  .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .stat-card {
    padding: 14px 14px !important;
  }
  .stat-value {
    font-size: 22px;
  }

  /* ---------- 工作台快捷操作：2列 ---------- */
  .quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ---------- 生成文章页 ---------- */
  /* 一键生成区：上下排布 */
  .quick-gen-left,
  .quick-gen-right {
    width: 100% !important;
    flex-direction: column !important;
  }
  .quick-gen-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  /* 平台选择：窄屏2列，更紧凑的触控 */
  .platform-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .platform-item {
    padding: 10px 8px !important;
  }
  /* 两档生成模式：纵向堆叠更易点 */
  .mode-options {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mode-option {
    width: 100% !important;
  }

  /* ---------- 诊断页 ---------- */
  /* 诊断表单：整段单列 */
  .form-grid,
  .form-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* ---------- 会员页 ---------- */
  /* 会员权益：3列降为单列 */
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* 功能入口：2列 */
  .feature-entry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .benefit-item {
    min-height: 48px !important;
  }
  .entry-icon-wrap {
    width: 40px !important;
    height: 40px !important;
  }

  /* ---------- 充值页 ---------- */
  /* 充值套餐：小屏纵向堆叠 */
  .recharge-packages {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ---------- 通用卡片文本溢出保护 ---------- */
  .card {
    padding-left: 12px;
    padding-right: 12px;
  }
  .card-header h3 {
    font-size: 16px;
  }

  /* ---------- 表格/长文本横向滚动保护 ---------- */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 侧栏抽屉：确保手机端宽度友好 ---------- */
  .sidebar {
    width: 260px !important;
  }

  /* ---------- toast 提示窄屏 ---------- */
  .toast {
    width: 90%;
    max-width: 90% !important;
  }
}