/* ===== 强制字号锁定：防止手机浏览器/系统字号设置放大页面 ===== */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-size: 17px;
}
@media (min-width: 320px) {
  html { font-size: calc(16px + (20 - 16) * (100vw - 320px) / (430 - 320)); }
}
@media (min-width: 430px) {
  html { font-size: 20px; }
}
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 1rem;
}
input, button, textarea, select {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ========================================
   GoldJudge - 全站响应式基础样式
   Mobile First 设计原则
   断点：<480px 手机 | 480-768px 大屏手机 | 768-1024px 平板 | >1024px PC
   ======================================== */

/* ========== 1. 根字号 rem 自适应 ========== */
/* 移动端优先：375px 基准 = 16px */
html {
  font-size: 17px;
}

/* 小屏手机 320px → 14px */
@media (max-width: 340px) {
  html { font-size: 15px; }
}

/* 标准手机 375px → 16px（基准，已在上方默认设置） */

/* 大屏手机 414px → 17px */
@media (min-width: 400px) and (max-width: 767px) {
  html { font-size: 17px; }
}

/* 平板 768px → 18px */
@media (min-width: 768px) and (max-width: 1023px) {
  html { font-size: 17px; }
}

/* PC 1024px+ → 20px */
@media (min-width: 1024px) {
  html { font-size: 20px; }
}

/* ========== 2. 全局容器响应式 ========== */
/* 覆盖 style.css 中 500px 就限制 480px 的旧规则 */
@media (min-width: 500px) {
  body { background: #020617 !important; }
  .app-container {
    max-width: 100% !important;
    box-shadow: none !important;
  }
}

/* 手机端：满宽 */
.app-container {
  max-width: 100%;
  margin: 0 auto;
}

/* 平板：有 page-content 的页面内容区最大宽度限制 */
@media (min-width: 768px) {
  .app-container {
    max-width: 100% !important;
  }
  .app-container .page-content {
    max-width: 680px;
    margin: 0 auto;
  }
}

/* PC：内容区居中，最大宽度限制 */
@media (min-width: 1024px) {
  .app-container .page-content {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ========== 3. 底部导航响应式 ========== */
/* 手机端：满宽（默认样式已处理） */

/* 平板/PC：底部导航居中，最大宽度限制 */
/* style.css 中的 .bottom-nav 是 position: fixed */
@media (min-width: 480px) {
  .bottom-nav {
    max-width: 480px !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    border-radius: 0 !important;
  }

  /* monitor 页面底部导航是 position: sticky，处理方式不同 */
  .monitor-bottom-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 0;
  }
}

/* PC端：底部导航更精致 */
@media (min-width: 1024px) {
  .bottom-nav {
    max-width: 420px !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
  }

  .monitor-bottom-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 0;
  }
}

/* ========== 4. 卡片通用响应式 ========== */
/* PC端卡片不超宽 */
@media (min-width: 768px) {
  .card,
  .card-gold {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== 5. 图片/上传区响应式 ========== */
img {
  max-width: 100%;
  height: auto;
}

.upload-zone img,
.feature-card img,
.card img {
  max-width: 100%;
  height: auto;
}

/* ========== 6. 首页(index.html)响应式 ========== */
/* 首页没有 .page-content 容器，内容直接在 app-container 下 */
/* 平板/PC端：顶部栏、Hero区、上传卡、功能区等居中，最大宽度限制 */

@media (min-width: 768px) {
  .app-container > .top-bar,
  .app-container > .hero-section,
  .app-container > .upload-card,
  .app-container > .section-title-wrap,
  .app-container > .dim-groups,
  .app-container > .dual-device-section,
  .app-container > .trust-row,
  .app-container > .coop-entry-bar,
  .app-container > .footer-copy {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .app-container > .top-bar,
  .app-container > .hero-section,
  .app-container > .upload-card,
  .app-container > .section-title-wrap,
  .app-container > .dim-groups,
  .app-container > .dual-device-section,
  .app-container > .trust-row,
  .app-container > .coop-entry-bar,
  .app-container > .footer-copy {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== 7. 个人中心(profile)响应式 ========== */
@media (min-width: 768px) {
  .profile-page .page-content {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ========== 8. 示例页(examples)响应式 ========== */
/* 手机端：1列（默认） */

/* 示例卡片在平板端2列，PC端3列 */
/* 通过 page-content 内的卡片网格控制 */
@media (min-width: 768px) {
  .examples-list,
  .example-cards,
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .examples-list,
  .example-cards,
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ========== 9. 报告页响应式 ========== */
/* PC端报告内容最大800px居中 */
@media (min-width: 768px) {
  .report-page .page-content,
  .review-page .page-content,
  .position-page .page-content {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ========== 10. monitor.html 对话页响应式 ========== */
/* --- 手机端（默认样式） --- */
.monitor-page .chat-container {
  padding: 16px 12px;
}

.monitor-page .quick-questions-wrap {
  padding: 3px 12px;
}

.monitor-page .input-bar-wrap {
  padding: 8px 12px 10px;
}

/* 手机端快捷功能栏横向滚动，不换行 */
.monitor-page .quick-functions-bar {
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* --- 平板端 768px+ --- */
@media (min-width: 768px) {
  .monitor-page .chat-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 20px;
  }

  .monitor-page .quick-questions-wrap {
    padding: 12px 20px;
  }

  .monitor-page .quick-questions-scroll {
    max-width: 700px;
    margin: 0 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .monitor-page .input-bar-wrap {
    padding: 10px 20px 14px;
  }

  .monitor-page .quick-functions-bar {
    max-width: 700px;
    margin: 0 auto 10px;
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .monitor-page .input-bar {
    max-width: 700px;
    margin: 0 auto;
  }

  /* 欢迎文案在平板端稍大 */
  .welcome-title {
    font-size: 1.0625rem;
  }
  .welcome-desc {
    font-size: 0.8125rem;
  }
}

/* --- PC端 1024px+ --- */
@media (min-width: 1024px) {
  .monitor-page {
    /* PC端整体背景 */
    background:
      radial-gradient(ellipse 60% 30% at 20% 0%, rgba(255, 215, 0, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 20% at 90% 85%, rgba(0, 240, 255, 0.05) 0%, transparent 50%),
      #0a0f1e !important;
  }

  .monitor-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
  }

  /* 对话区居中，最大800px */
  .monitor-page .chat-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
  }

  /* 快捷提问栏单行横向滑动 */
  .monitor-page .quick-questions-scroll {
    max-width: 800px;
    margin: 0 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }

  /* 底部输入区不拉伸到全屏，跟随对话区宽度 */
  .monitor-page .input-bar-wrap {
    padding: 12px 24px 16px;
  }

  .monitor-page .quick-functions-bar {
    max-width: 800px;
    margin: 0 auto 12px;
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 12px;
  }

  .monitor-page .input-bar {
    max-width: 800px;
    margin: 0 auto;
  }

  /* PC端消息气泡适当加宽 */
  .msg-ai-bubble {
    max-width: 82%;
  }
  .msg-user-bubble {
    max-width: 78%;
  }
}

/* --- 超大屏 1440px+ --- */
@media (min-width: 1440px) {
  .monitor-page .chat-container {
    max-width: 800px;
  }
  .monitor-page .quick-questions-scroll,
  .monitor-page .quick-functions-bar,
  .monitor-page .input-bar {
    max-width: 800px;
  }
}

/* ========== 11. 字体 rem 化（关键字号用 rem 覆盖） ========== */
/* 说明：优先改核心页面字体、间距、容器宽度
   边框、阴影、圆角保留 px 以保持精细度 */

/* --- monitor 页面核心字体 rem 化（覆盖内联样式中的 px） --- */
/* 基准 16px → 1rem，按比例换算 */

/* 顶部标题 */
body .monitor-page .topbar-title { font-size: 0.9375rem; } /* 15px */
body .monitor-page .topbar-history-btn { font-size: 0.875rem; }

/* 快捷提问 chip */
body .monitor-page .quick-chip { font-size: 0.6875rem; } /* 11px */
body .monitor-page .quick-chip .chip-icon { font-size: 0.625rem; } /* 10px */

/* 消息时间戳 */
body .monitor-page .msg-timestamp { font-size: 0.75rem; }

/* AI消息气泡 */
body .monitor-page .msg-ai-text { font-size: 0.75rem; }

/* 用户消息气泡 */
body .monitor-page .msg-user-bubble { font-size: 0.75rem; }

/* 欢迎消息 */
body .monitor-page .welcome-title { font-size: 0.9375rem; }
body .monitor-page .welcome-desc { font-size: 0.8125rem; }

/* 行情卡片 */
body .monitor-page .quote-symbol { font-size: 1.125rem; }
body .monitor-page .quote-price { font-size: 1.375rem; }
body .monitor-page .quote-change { font-size: 1rem; }
body .monitor-page .tf-tag { font-size: 0.875rem; }
body .monitor-page .levels-title { font-size: 0.75rem; }
body .monitor-page .levels-values { font-size: 1rem; }
body .monitor-page .quote-suggestion-title { font-size: 1rem; }
body .monitor-page .quote-suggestion-text { font-size: 0.8125rem; }
body .monitor-page .quote-footer-link { font-size: 0.875rem; }

/* 功能卡片 */
body .monitor-page .feature-cards-title { font-size: 1rem; }
body .monitor-page .feature-name { font-size: 1rem; }
body .monitor-page .feature-desc { font-size: 0.75rem; }
body .monitor-page .feature-arrow { font-size: 1.5rem; }

/* 快捷功能栏 */
body .monitor-page .quick-func-icon { font-size: 0.6875rem; }
body .monitor-page .quick-func-label { font-size: 0.6875rem; }

/* 输入框 */
body .monitor-page .chat-input { font-size: 1rem; }

/* 底部导航 */
body .monitor-page .bn-item { font-size: 0.65625rem; }
body .monitor-page .bn-center-btn .center-icon { font-size: 1.375rem; }
body .monitor-page .bn-center-btn .center-text { font-size: 0.75rem; }

/* +号面板 */
body .monitor-page .plus-panel-icon { font-size: 1.25rem; }
body .monitor-page .plus-panel-label { font-size: 1rem; }

/* 积分弹窗 */
body .monitor-page .points-modal-title { font-size: 1.125rem; }
body .monitor-page .points-modal-desc { font-size: 0.875rem; }
body .monitor-page .points-cost-badge { font-size: 1.125rem; }
body .monitor-page .points-balance-info { font-size: 1rem; }
body .monitor-page .points-modal-actions .pm-btn { font-size: 1rem; }
body .monitor-page .recharge-item .price { font-size: 1.125rem; }
body .monitor-page .recharge-item .desc { font-size: 0.6875rem; }

/* 平板端字号微调 */
@media (min-width: 768px) {
  body .monitor-page .welcome-title { font-size: 1.0625rem; }
  body .monitor-page .feature-name { font-size: 1rem; }
  body .monitor-page .feature-cards-title { font-size: 0.9rem; }
}

/* ========== 12. 功能卡片 flex-wrap ========== */
.feature-cards-wrap {
  width: 100%;
}

/* ========== 13. 防止横向滚动条 ========== */
html, body {
  overflow-x: hidden;
}

/* ========== 14. 按钮/输入框在PC端的合理尺寸 ========== */
@media (min-width: 1024px) {
  .btn-lg {
    height: 52px;
    font-size: 1rem;
  }
  .btn-block {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== 15. 头像/图标等小尺寸元素保持 px ========== */
/* 小图标（<40px）保留 px 单位，避免 rem 导致模糊 */

/* ========== 16. 表单元素响应式 ========== */
@media (min-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  textarea,
  select {
    font-size: 1rem;
  }
}

/* ========== 17. 弹窗/模态框响应式 ========== */
@media (min-width: 768px) {
  .points-modal-box {
    max-width: 400px;
  }
}

/* ========== 18. 安全区域适配（iPhone底部小黑条） ========== */
/* bottom-nav safe-area handled in page CSS */

/* ========== 19. 积分页 points.css 适配 ========== */
@media (min-width: 768px) {
  .points-page .page-content,
  .points-container {
    max-width: 600px !important;
    margin: 0 auto !important;
  }
}

/* ========== 20. 合作页适配 ========== */
@media (min-width: 768px) {
  .cooperation-page .page-content {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ========== 21. 浮动按钮/面板响应式 ========== */
/* 覆盖 style.css 中固定定位的浮动按钮，适配PC端居中 */
@media (min-width: 500px) {
  .ai-float-btn {
    right: calc(50% - 240px + 16px) !important;
  }
}

@media (min-width: 768px) {
  .ai-float-btn {
    right: calc(50% - 340px + 16px) !important;
  }
  .ai-panel {
    max-width: 680px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100%);
  }
  .ai-panel.open {
    transform: translateX(-50%) translateY(0) !important;
  }
}

@media (min-width: 1024px) {
  .ai-float-btn {
    right: calc(50% - 400px + 16px) !important;
  }
  .ai-panel {
    max-width: 800px !important;
  }
}

/* ===== 移动端浏览器字号兼容：防止默认字号过大 ===== */
body {
  font-size: 17px;
  font-size: clamp(14px, 4.2vw, 18px);
}


/* ===== 手机浏览器字号兼容修正 ===== */
/* 华为/UC等浏览器默认字号偏大，用rem基准统一控制 */

/* 分段Tab强制不换行 */
.seg-tab-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 标签tag强制不换行 */
.tag {
  white-space: nowrap;
}


/* --- PC端聊天回复字号统一控制 --- */
@media (min-width: 768px) {
  .monitor-page .msg-ai-text { font-size: 12px; line-height: 1.65; }
  .monitor-page .msg-user-bubble { font-size: 12px; line-height: 1.6; }
}