/* ============================================
   顶呱呱手机回收 · 全局移动端增强优化 v3.2
   统一修复官网/H5/博客/文章页的移动端适配问题
   ============================================ */

/* 防止横向滚动全局修复 */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* 图片响应式 */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* 表格响应式滚动 */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 预格式化文本 */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ============================================
   移动端通用优化 (≤768px)
   ============================================ */
@media (max-width: 768px) {
  /* 基础字体优化 - 防止iOS自动缩放 */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* 按钮统一触摸区域 */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 链接可点击区域增大 */
  a {
    padding: 4px 0;
  }

  /* body底部留白 - 防止悬浮按钮遮挡 */
  body {
    padding-bottom: 100px !important;
  }

  /* ========== 右侧悬浮按钮修复 ========== */
  /* 统一调整悬浮按钮位置，避免遮挡内容 */
  [style*="position: fixed"][style*="right:"],
  .fixed-btn,
  .float-btn,
  #wecomKfBtn,
  #chatBtn,
  #decisionBtn,
  .kefu-btn,
  .consult-btn,
  [class*="floating"],
  [class*="float-btn"],
  [class*="fixed-btn"] {
    right: 12px !important;
    z-index: 9999 !important;
  }

  /* 客服/决策/电话按钮重新排列 */
  #wecomKfBtn {
    bottom: 12px !important;
    transform: scale(0.85);
    transform-origin: bottom right;
  }

  /* 如果有多个右侧悬浮按钮，让它们纵向排列 */
  [style*="position: fixed"][style*="right:"] + [style*="position: fixed"][style*="right:"],
  #decisionBtn,
  .phone-btn {
    bottom: 80px !important;
  }

  /* 回到顶部按钮 */
  .back-to-top,
  [class*="back-top"],
  [class*="toTop"] {
    bottom: 140px !important;
    right: 12px !important;
    transform: scale(0.8);
    transform-origin: bottom right;
  }

  /* 悬浮按钮提示气泡调整 */
  .wecom-kf-bubble,
  [class*="bubble"],
  [class*="tooltip"] {
    right: 12px !important;
    bottom: 70px !important;
    max-width: calc(100vw - 100px) !important;
    white-space: normal !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* ========== 官网首页特定修复 ========== */
  /* 顶部导航 */
  .header,
  header,
  .navbar,
  nav {
    padding: 8px 12px !important;
  }

  /* 首屏Hero区域 */
  .hero,
  .banner,
  .hero-section {
    padding: 16px 12px !important;
  }

  .hero h1,
  .banner h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  .hero p,
  .banner p {
    font-size: 14px !important;
    line-height: 1.6;
  }

  /* 核心优势/功能卡片区域 - 单列 */
  .features-grid,
  .advantage-grid,
  .service-grid,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .feature-card,
  .advantage-card,
  .service-card {
    padding: 14px !important;
  }

  /* 价格/流程步骤区域 */
  .steps,
  .process,
  .price-table {
    padding: 16px 12px !important;
  }

  .step-item {
    flex-direction: column !important;
    text-align: center !important;
    padding: 12px !important;
  }

  /* 页脚 */
  footer,
  .footer {
    padding: 20px 12px !important;
    text-align: center !important;
  }

  .footer-links,
  .contact-info {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .contact-info span,
  .footer-links a {
    font-size: 13px !important;
  }

  /* ========== H5估价端特定修复 ========== */
  /* 搜索框去重（如果有两个） */
  .search-box + .search-box,
  .brand-search + .brand-search {
    display: none !important;
  }

  /* 品牌列表区域 - 防止横向溢出 */
  .brand-list,
  .hot-brands,
  .brand-grid {
    overflow-x: hidden !important;
    padding: 0 8px !important;
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .brand-card {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }

  /* 手机型号列表 */
  .model-list,
  .phone-list {
    padding: 8px !important;
  }

  .model-item,
  .phone-item {
    padding: 12px 10px !important;
    font-size: 14px !important;
  }

  /* 估价按钮 */
  .estimate-btn,
  .evaluate-btn,
  #estimateBtn {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
  }

  /* ========== 博客首页特定修复 ========== */
  /* 博客顶部区域 */
  .blog-header,
  .blog-hero {
    padding: 16px 12px !important;
  }

  .blog-header h1 {
    font-size: 22px !important;
  }

  /* 文章卡片 */
  .article-list,
  .post-list {
    padding: 0 12px !important;
  }

  .article-card,
  .post-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }

  .article-card h2,
  .post-card h2,
  .article-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .article-card p,
  .post-card p,
  .article-excerpt {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* 博客侧边栏（PC端）移动端隐藏或调整 */
  .sidebar,
  .blog-sidebar {
    display: none !important;
  }

  .main-content,
  .blog-content {
    width: 100% !important;
    padding: 0 !important;
  }

  /* ========== 博客文章页特定修复 ========== */
  /* 文章正文 */
  .article-content,
  .post-content,
  .entry-content {
    padding: 16px 12px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .article-content h1 { font-size: 22px !important; margin: 20px 0 12px; }
  .article-content h2 { font-size: 19px !important; margin: 18px 0 10px; }
  .article-content h3 { font-size: 17px !important; margin: 16px 0 8px; }
  .article-content p,
  .article-content li {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 12px !important;
  }

  /* FAQ区块 */
  .faq-section,
  .faq-block {
    padding: 16px 12px !important;
  }

  .faq-item {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  .faq-question {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .faq-answer {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* 底部CTA按钮区域 */
  .cta-buttons,
  .bottom-cta,
  .action-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px 12px !important;
  }

  .cta-buttons a,
  .bottom-cta a,
  .action-buttons a,
  .cta-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }

  /* ========== 模态框/弹窗修复 ========== */
  .modal,
  .modal-overlay,
  .popup,
  .dialog {
    padding: 12px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content,
  .modal-body,
  .popup-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
  }

  .modal-close,
  .popup-close {
    top: 10px !important;
    right: 10px !important;
    width: 36px;
    height: 36px;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== 顶部优惠条（AI获客系统）修复 ========== */
  .promo-bar {
    font-size: 11px !important;
    padding: 8px 30px 8px 10px !important;
    text-align: center !important;
    line-height: 1.4;
  }

  .promo-bar-close {
    top: 4px !important;
    right: 4px !important;
    font-size: 18px !important;
    width: 28px;
    height: 28px;
  }

  body.has-promo-bar {
    padding-top: 40px !important;
  }

  /* ========== AI聊天窗口移动端优化 ========== */
  .chat-widget {
    width: calc(100vw - 24px) !important;
    height: 70vh !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    border-radius: 12px !important;
  }

  .chat-messages {
    height: calc(70vh - 120px) !important;
    font-size: 14px !important;
  }

  .chat-input-area {
    padding: 8px !important;
  }

  .chat-input {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  .chat-send-btn {
    min-height: 44px !important;
    padding: 0 16px !important;
  }

  /* ========== 社会证明通知优化 ========== */
  .social-proof-notification {
    left: 12px !important;
    right: 12px !important;
    bottom: 90px !important;
    max-width: none !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }

  /* ========== 退出弹窗优化 ========== */
  .exit-modal .modal-content {
    padding: 20px 16px !important;
  }

  .exit-modal h2 {
    font-size: 18px !important;
  }

  .exit-modal p {
    font-size: 14px !important;
  }

  .exit-modal .wechat-qr {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ============================================
   超小屏幕 (≤380px, iPhone SE等)
   ============================================ */
@media (max-width: 380px) {
  .hero h1, .banner h1 {
    font-size: 20px !important;
  }

  .brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .article-content {
    font-size: 14px !important;
  }

  .chat-widget {
    height: 75vh !important;
  }
}

/* ============================================
   横屏优化
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
  body {
    padding-bottom: 70px !important;
  }

  .chat-widget {
    height: 80vh !important;
    width: 400px !important;
    right: 12px !important;
    left: auto !important;
  }

  .hero {
    padding: 20px !important;
  }
}

/* ============================================
   平板适配 (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .features-grid,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   触摸设备通用优化
   ============================================ */
@media (pointer: coarse) {
  /* 增大所有可点击元素的最小尺寸 */
  button,
  a,
  .btn,
  input[type="submit"],
  input[type="button"],
  select,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* 移除hover效果在触摸设备上的残留 */
  button:active,
  a:active,
  .btn:active {
    transform: scale(0.97);
  }
}


/* v3.3 触摸目标优化 - 所有按钮/链接最小44x44px */
@media (max-width: 768px) {
  a, button, [role="button"], .btn, .btn-cyber, .btn-ghost,
  input[type="submit"], input[type="button"], select,
  .scenario-card, .decision-card, .template-card,
  .dive-quick-btn, .quick-reply-btn, .faq-question {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 纯文本链接不强制44px宽度，但保持垂直间距 */
  p a, li a, span a {
    min-width: auto !important;
    display: inline !important;
    padding: 4px 0;
  }
  /* 导航链接特殊处理 */
  nav a, .navbar a, .footer-links a {
    min-height: 36px !important;
    display: inline-flex;
    align-items: center;
  }
}