/* cloudccai-mobile.css — CloudCC AI 页 移动端/平板 适配
 * 创建: 2026-09-07
 * 作用域: 仅 CloudCC-AI/cloudccai.html 引入
 * 原则: 不修改共享 CSS (style.css / index.css / moni2015-11-17.css),
 *       仅在媒体查询下覆盖, 所有固定宽度 (1200px/586px/1040px/600px/440px 等) 改为自适应
 */

/* 通用: 防止任何固定宽度元素造成横向滚动 */
html,
body {
  overflow-x: hidden;
}

/* ======================================================
   手机 + 平板 (≤1024px): 顶部精简 header + 全宽堆叠布局
   ====================================================== */
@media (max-width: 1024px) {
  /* 隐藏第三方 AI 弹窗/悬浮球, 避免遮挡移动端内容
     (参考 index.html 处理方式, 但仅在 ≤1024px 生效, 不影响桌面) */
  iframe[src*="aifollowup"],
  iframe[id*="aifollowup"],
  iframe[src*="app.aifollowup.ai"],
  iframe[src*="usemessages.com"],
  iframe[src*="conversations-embed"],
  iframe[src*="hubspot"],
  iframe[id*="hubspot"],
  iframe[id*="hs-chat"],
  div[id*="aifollowup"],
  div[class*="aifollowup-widget"],
  div[class*="embed-messageboard"],
  div[id*="hubspot-messages"],
  div[class*="hubspot-messages"],
  div[id*="hs-chat"],
  div[class*="hs-chat"],
  div[class*="messages-embed"],
  #aicrm-widget-host,
  .aicrm-widget-host,
  .aff-im-root,
  .embed-icon,
  .embed-hot-issue {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }
  /* ---------- 顶部 header (共用 header_sub.js 注入) ---------- */
  #header {
    height: 56px !important;
  }
  /* header 下方的 100px 占位 div 改为 56px, 让正文从固定头部正下方开始 */
  #header + div[style*="height:100px"] {
    height: 56px !important;
  }
  .top.clr {
    width: 100% !important;
    height: 56px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo img {
    width: 118px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .topr {
    float: none !important;
    width: auto !important;
    margin-left: auto !important;
  }
  .xx {
    width: auto !important;
    padding: 0 !important;
  }
  .xx li {
    margin: 0 0 0 8px !important;
    min-height: 0 !important;
  }
  /* 隐藏客服电话, 保留 免费试用 + 登录 */
  .xx #header-contact-li {
    display: none !important;
  }
  .xx .bntcp1 {
    width: 88px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }
  .login-dropdown .bntcp2 {
    width: 64px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }
  /* 隐藏桌面端 mega 导航菜单 */
  .dh {
    display: none !important;
  }

  /* ---------- 汉堡菜单 + 全屏导航 ---------- */
  .ccai-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-right: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    order: -1 !important;
  }
  .ccai-hamburger svg {
    width: 24px !important;
    height: 24px !important;
  }
  .ccai-hamburger line {
    stroke: #19355e !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
  }
  .ccai-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 100000 !important;
    display: none !important;
    flex-direction: column !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  .ccai-nav-overlay.open {
    display: flex !important;
  }
  .ccai-nav-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 12px !important;
  }
  .ccai-nav-brand {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0564F5 !important;
  }
  .ccai-nav-close {
    font-size: 30px !important;
    line-height: 1 !important;
    color: #666 !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
  }
  .ccai-nav-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
  .ccai-nav-list a {
    display: block !important;
    padding: 15px 12px !important;
    font-size: 16px !important;
    color: #19355e !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .ccai-nav-trial {
    display: block !important;
    text-align: center !important;
    padding: 13px !important;
    margin: 16px 0 !important;
    background: #0564F5 !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* ---------- 固定宽度容器全部改为 100% ---------- */
  .Pain > div[style*="1200px"],
  .background > div[style*="1200px"] {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ---------- Hero banner ---------- */
  .background {
    height: auto !important;
    min-height: 0 !important;
  }
  .background > div[style*="1200px"] {
    height: auto !important;
    margin: 0 !important;
    padding: 48px 20px 40px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .left-p {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
  }
  .left-p .text-h2 {
    font-size: 28px !important;
    line-height: 1.35 !important;
    margin: 0 0 16px !important;
  }
  .left-p p.pp {
    width: 100% !important;
    margin: 0 0 14px !important;
    text-align: left !important;
  }
  .left-p p.pp[style*="25px"] {
    font-size: 17px !important;
  }
  .left-p .list_moni {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .left-p .list_moni a {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
  /* Hero 区三段文案包裹 div 默认 margin-bottom:40px 在 mobile 显得太大, 收紧到 16px */
  .left-p > div[style*="margin-bottom: 40px"] {
    margin-bottom: 16px !important;
  }

  /* ---------- 内容区块 .Pain ---------- */
  .Pain {
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
  }
  .Pain > div[style*="1200px"] {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .Pain .text-h2 {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    padding: 0 16px !important;
  }
  .IT-pic {
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- 智能体卡片 (图片+文字) 竖排堆叠 ---------- */
  .Pain div[style*="justify-content: space-between"] {
    flex-direction: column !important;
  }
  .pic {
    width: 100% !important;
    text-align: center !important;
  }
  .pic img {
    width: 100% !important;
    height: auto !important;
  }
  .text-table {
    width: 100% !important;
    flex: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 0 !important;
  }
  .text-title {
    padding-left: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  .text-small {
    padding-left: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    width: 100% !important;
  }
  .Button {
    margin-left: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 28px !important;
  }
  /* 文字块内按钮下方到图片的间距 (避免按钮贴到下方卡片) */
  .text-table .Button {
    margin-bottom: 24px !important;
  }
}

/* ======================================================
   手机 (≤768px): 进一步收紧字号与间距
   ====================================================== */
@media (max-width: 768px) {
  .left-p .text-h2 {
    font-size: 24px !important;
  }
  .Pain .text-h2 {
    font-size: 20px !important;
  }
  .text-title {
    font-size: 18px !important;
  }
}

/* ======================================================
   Footer 适配 (2026-09-07) — 与 index.html 首页保持一致
   问题: footer_sub.js 注入的 footer 在窄屏是 5 列横排,
   每列被压到 64~88px 宽, 文字挤成一团。
   方案: 浅灰底 + 白色卡片 + 标题加粗 + 链接 2 列网格
   ====================================================== */
@media (max-width: 768px) {
  .cloud_footer_box {
    padding: 24px 0 16px !important;
    background: #f5f6f8 !important;
  }
  .cloud_footer {
    flex-direction: column !important;
    align-items: stretch !important;  /* PC 的 center 会让 nav 不撑开 */
    gap: 16px !important;
    padding: 0 16px !important;
  }
  /* logo/公众号区: 深色卡片垫底, 让白色 logo 和文字可见 */
  .cloud_footer_box .cloud_footer_logo {
    background: #19355e !important;
    padding: 12px 16px 16px !important;
    border-radius: 12px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cloud_footer_box .cloud_footer_logo img[src*="foterlogo"] {
    max-width: 180px !important;
    width: 70% !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    display: block !important;
  }
  .cloud_footer_box .cloud_footer_logo p {
    color: #ffffff !important;
    font-size: 13px !important;
  }
  /* 5 列 nav 改为单列, 标题加粗, 链接 2 列网格 */
  .cloud_footer_nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }
  /* 白色卡片 + 阴影 */
  .cloud_nav_list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  /* 标题: 加粗加大, 占满宽度, 底部 1px 分隔线 */
  .cloud_nav_title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #19355e !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid #e8eaed !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  /* 链接: 2 列网格 */
  .cloud_nav_item {
    width: 50% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    list-style: none !important;
  }
  .cloud_nav_item a {
    display: inline-block !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    text-decoration: none !important;
    word-break: break-all !important;
  }
  .cloud_nav_item a:active {
    color: #0564F5 !important;
  }
  /* APP 下载区 */
  .cloud_footer_App {
    width: 100% !important;
    text-align: center !important;
    padding: 16px !important;
    margin-top: 16px !important;
    color: #555 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
  }
  .cloud_footer_App .cloud_App_title {
    color: #19355e !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  .cloud_footer_App .cloud_App_QRCood_title {
    color: #555 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  .cloud_footer_App > div[style*="display: flex"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .cloud_footer_App img {
    max-width: 100px !important;
    height: auto !important;
  }
  /* 二维码 */
  .cloud_footer img[src*="erweima"] {
    margin: 0 auto !important;
    display: block !important;
  }
  /* 版权区 */
  .footerCopyright {
    padding: 16px 12px !important;
    font-size: 12px !important;
    text-align: center !important;
    color: #888 !important;
    background: transparent !important;
  }
  .footerCopyright p {
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin: 4px 0 !important;
  }
  .copyrightBottom {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}