/* ============================================================
   mobile-ux.css — 全站手機版 UX 優化
   ============================================================ */

:root {
  --thumb-min: 48px;
  --mob-sticky-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 字體可讀性 ── */
@media (max-width: 768px) {
  html { font-size: 16px; -webkit-text-size-adjust: 100%; }
  body { line-height: 1.65; }
  p, .section-desc, .pdp-tagline, .hero-sub {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .section-title { font-size: clamp(24px, 6vw, 32px) !important; }
  .section-desc { max-width: 100% !important; }
}

/* ── Thumb Zone：最小觸控區域 ── */
@media (max-width: 768px) {
  .hamburger {
    min-width: var(--thumb-min);
    min-height: var(--thumb-min);
    align-items: center;
    justify-content: center;
  }
  .mobile-menu a {
    min-height: var(--thumb-min);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px !important;
    font-size: 18px !important;
  }
  .mob-btns a {
    min-height: var(--thumb-min) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .btn-gold, .btn-dark, .btn-out-d, .btn-out-w,
  .btn-hero-primary, .btn-hero-secondary,
  .btn-pdp-primary, .btn-pdp-secondary,
  .btn-cyber {
    min-height: var(--thumb-min) !important;
    font-size: 15px !important;
  }
  .pdp-faq-q { min-height: var(--thumb-min); padding: 16px 0 !important; }
  .pdp-thumb { min-height: 56px; }
}

/* ── Sticky CTA：安全區域 + 拇指區 ── */
@media (max-width: 768px) {
  .pdp-sticky-cta {
    padding: 10px 16px calc(10px + var(--safe-bottom));
    min-height: calc(var(--mob-sticky-h) + var(--safe-bottom));
  }
  .pdp-sticky-actions .btn-pdp-primary {
    min-height: var(--thumb-min) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  #backTop {
    bottom: calc(80px + var(--safe-bottom)) !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
  body.has-mob-sticky #backTop {
    bottom: calc(var(--mob-sticky-h) + 16px + var(--safe-bottom)) !important;
  }
  body.has-pdp-sticky #backTop {
    bottom: calc(var(--mob-sticky-h) + 16px + var(--safe-bottom)) !important;
  }
}

/* ── 首頁手機版 Sticky Bottom CTA ── */
.mob-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .mob-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 899;
    gap: 10px;
    padding: 10px 16px calc(10px + var(--safe-bottom));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 137, 123, .15);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
    transform: translateY(100%);
    transition: transform .35s ease;
  }
  .mob-sticky-cta.visible {
    transform: translateY(0);
  }
  .mob-sticky-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--thumb-min);
    padding: 12px 16px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: all .2s ease;
  }
  .mob-sticky-btn.primary {
    background: linear-gradient(135deg, #FFCA28, #FFB300);
    color: #071C12;
    box-shadow: 0 4px 16px rgba(255, 202, 40, .35);
  }
  .mob-sticky-btn.secondary {
    background: #fff;
    border: 1.5px solid #00897B;
    color: #00695C;
  }
  body.has-mob-sticky {
    padding-bottom: calc(var(--mob-sticky-h) + var(--safe-bottom));
  }
}

/* ── Hero 手機：CTA 優先、縮短首屏 ── */
@media (max-width: 768px) {
  #hero .hero-left { order: 1; }
  #hero .hero-right { order: 0; }
  #hero .hero-split {
    display: flex;
    flex-direction: column;
  }
  #hero .hero-product-showcase {
    margin: 0 auto;
  }
  .hero-trust-inline .hero-trust-pill {
    font-size: 10px;
    padding: 6px 10px;
  }
  .hero-product-chip { margin-bottom: 14px; }
}

/* ── 段落與區塊間距縮短 ── */
@media (max-width: 768px) {
  .pdp-section { padding: 48px 0 !important; }
  .pdp-section-head { margin-bottom: 32px !important; }
  .pdp-review-text { font-size: 14px !important; line-height: 1.7 !important; }
  .pdp-benefit-card p { font-size: 14px !important; }
  #about, #products, #antrodia, #stats, #research, #news, #contact {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .prod-body { padding: 20px !important; }
  .prod-desc { font-size: 14px !important; line-height: 1.65 !important; }
}

/* ── 減少動畫對閱讀的干擾 ── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .reveal { transition-duration: .5s !important; }
}

/* ── AI Avatar 與 sticky CTA 位置協調 ── */
@media (max-width: 768px) {
  /* 手機版 AI 購買按鈕：位於回頂部按鈕上方 */
  #ai-avatar-wrap {
    bottom: calc(72px + 64px + 12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  /* 當 sticky CTA 出現時，進一步上移 */
  body.has-mob-sticky #ai-avatar-wrap {
    bottom: calc(var(--mob-sticky-h, 64px) + 88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* chat panel 也跟著上移 */
  #chat-panel {
    bottom: calc(72px + 76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
  }
  body.has-mob-sticky #chat-panel {
    bottom: calc(var(--mob-sticky-h, 64px) + 84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}