@charset "utf-8";
/* ==========================================================================
   mobile-hf.css — CloudCC 官网 移动端「顶部导航 + 底部导航」公共适配
   --------------------------------------------------------------------------
   适用: 所有引用 js/header_sub.js + js/footer_sub.js 的页面 (全站 2000+ 页)
   作用: ≤768px 视口下, 把 PC 端 header/footer 重排为手机可用形态

   接入方式 (在 </head> 前加一行, 子目录页用 ../ 前缀):
     <link rel="stylesheet" href="css/mobile-hf.css">
     <script src="js/mobile-nav.js"></script>   <!-- 汉堡菜单, 可选 -->

   设计原则:
     1) 全部规则包在 @media (max-width: 768px) 内, 桌面端零影响
     2) 大量 !important 压制共享 CSS (style.css / footer.css / header_sub.js 注入样式)
     3) 不修改 header_sub.js / footer_sub.js 本身 (它们是全站共享脚本)
   2026-09-07 从 index.html + CloudCC-AI/cloudccai.html 的改造中提炼
   ========================================================================== */

/* ==========================================================================
   零、桌面端兜底 (不限视口)
   --------------------------------------------------------------------------
   js/mobile-nav.js 会在任意视口下都插入 .mobile-hamburger 与 .mobile-nav-overlay
   两个节点, 样式只在 ≤768px 的媒体查询里定义。不写这条基础规则的话,
   桌面端会出现: ① 一个裸露的汉堡按钮; ② 页面底部多出一整块导航列表。
   ⚠️ 必须放在媒体查询之前, 让后面的 !important 规则覆盖它。
   ========================================================================== */
.mobile-hamburger,
.mobile-nav-overlay {
  display: none !important;
}

/* ==========================================================================
   一、顶部导航 Header (≤768px)
   --------------------------------------------------------------------------
   改造前: PC header 高 100px, 右侧 .topr 是 8 大菜单 + 热线 + 按钮, 窄屏全挤爆
   改造后: 64px 紧凑条 = [汉堡] logo ......... [登录▾] [免费试用]
   ========================================================================== */
@media (max-width: 768px) {
  /* ---------- 1.1 头部容器 ---------- */
  #header {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  /* 去掉 PC 端给 fixed header 预留的占位空 div (移动端 header 已改为 relative, 无需再占位)。
     两种来源都要覆盖:
       1) header_sub.js 注入的 100px spacer —— 是 #pagewrap 的「子元素」(不是相邻兄弟),
          必须用全局选择器命中;
       2) 页面自写的 30~90px spacer —— 是 #pagewrap 的「相邻兄弟」。
     ⚠️ 若只用 #pagewrap + div 会漏掉 #pagewrap 内部的 100px spacer (2026-09-08 踩坑)。 */
  div[style*="height:100px"],
  div[style*="height: 100px"],
  #pagewrap + div[style*="height:30px"],
  #pagewrap + div[style*="height: 30px"],
  #pagewrap + div[style*="height:40px"],
  #pagewrap + div[style*="height: 40px"],
  #pagewrap + div[style*="height:50px"],
  #pagewrap + div[style*="height: 50px"],
  #pagewrap + div[style*="height:60px"],
  #pagewrap + div[style*="height: 60px"],
  #pagewrap + div[style*="height:70px"],
  #pagewrap + div[style*="height: 70px"],
  #pagewrap + div[style*="height:80px"],
  #pagewrap + div[style*="height: 80px"],
  #pagewrap + div[style*="height:90px"],
  #pagewrap + div[style*="height: 90px"] {
    display: none !important;
  }
  .top.clr {
    height: 64px !important;
    min-height: 64px !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    /* ⚠️ 必须是 visible: 否则登录下拉菜单 (absolute) 会被裁掉 */
    overflow: visible !important;
  }

  /* ---------- 1.2 Logo ---------- */
  /* 原 style="width:200px;margin-left:-32px" 在窄屏会挤爆 + 左缘被裁 */
  .logo {
    flex: 0 0 auto !important;
    padding-top: 0 !important;
    margin: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo img {
    width: auto !important;
    height: 40px !important;
    max-width: 140px !important;
    margin-left: 0 !important;
  }
  /* 有些页面 logo 区里塞了"免费试用"小按钮, 窄屏隐藏 (汉堡菜单里已有) */
  .logo .mobile-only-trail {
    display: none !important;
  }

  /* ---------- 1.3 右侧操作区 .topr ---------- */
  /* 不再整体 display:none, 只隐藏 8 大菜单 + 热线, 保留两个按钮 */
  .topr {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    float: none !important;
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 8 大主导航 (PC hover 弹层), 移动端走汉堡菜单 */
  .topr .dh,
  .dh {
    display: none !important;
  }
  /* 客户服务热线 (汉堡菜单里已有) */
  .xx #header-contact-li {
    display: none !important;
  }
  .topr > .xx {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .topr > .xx > #hul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .xx li {
    float: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ---------- 1.4 两个按钮 ---------- */
  /* "免费试用": 实色蓝胶囊 */
  .xx .bntcp1 {
    width: 84px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: #0564F5 !important;
    color: #ffffff !important;
  }
  /* 视觉顺序: 登录在前, 免费试用在后 */
  .xx > #hul > li:nth-child(2) {
    order: 1 !important;
  }
  .xx > #hul > li:nth-child(1) {
    order: 2 !important;
  }
  /* "登录": 白底蓝边胶囊 */
  .login-dropdown .bntcp2 {
    width: 76px !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0564F5 !important;
    background: #ffffff !important;
    border: 1px solid #0564F5 !important;
    border-radius: 999px !important;
  }

  /* ---------- 1.5 登录下拉菜单 ---------- */
  /* ⚠️ 坑1: 千万别用 display:none 禁用它, 用户会以为"登录按钮坏了"
     ⚠️ 坑2: .login-dropdown 改 static, 让菜单 absolute 相对 #header,
             否则 280px 固定宽度 + right:0 会在 375 视口左溢出 */
  .login-dropdown {
    position: static !important;
  }
  .login-dropdown .login-dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 58px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    transform: translateY(-8px) !important;
  }
  .login-dropdown.active .login-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  /* ⚠️ 坑3: .xx li 的 inline-flex 会"传染"给菜单项, 必须显式改回 block */
  .login-dropdown .login-dropdown-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  /* 箭头指向登录按钮中心 (按钮中心 x≈232, 菜单右缘 363 → right≈124px) */
  .login-dropdown .login-dropdown-menu::before,
  .login-dropdown .login-dropdown-menu::after {
    right: 124px !important;
  }

  /* ---------- 1.6 汉堡按钮 ---------- */
  .mobile-hamburger {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    order: -1 !important; /* 排到 logo 左侧 */
  }
  .mobile-hamburger svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
  }
  .mobile-hamburger line {
    stroke: #19355e !important;
    stroke-width: 2.2 !important;
  }

  /* ---------- 1.7 全屏抽屉导航 ---------- */
  .mobile-nav-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  .mobile-nav-overlay.open {
    display: flex !important;
  }
  .mobile-nav-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #eeeeee !important;
    margin-bottom: 16px !important;
  }
  .mobile-nav-brand {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0564F5 !important;
  }
  .mobile-nav-close {
    font-size: 28px !important;
    line-height: 1 !important;
    color: #666666 !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
  }
  /* ---------- 1.8 两级面板容器 (滑入式) ---------- */
  .mobile-nav-body {
    position: relative !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .mobile-nav-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    transform: translateX(100%) !important;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1) !important;
    visibility: hidden !important;
  }
  .mobile-nav-panel.is-active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* 一级面板 */
  .mobile-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-row {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .mobile-nav-row:active {
    background: rgba(5, 100, 245, 0.06) !important;
  }
  .mobile-nav-l1 {
    flex: 1 1 auto !important;
    display: block !important;
    padding: 15px 4px 15px 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #19355e !important;
    text-decoration: none !important;
  }
  .mobile-nav-more {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 14px 12px 14px 10px !important;
    background: none !important;
    border: none !important;
    color: #9aa5b1 !important;
    cursor: pointer !important;
  }
  .mobile-nav-more-hint {
    font-size: 12px !important;
    color: #9aa5b1 !important;
  }

  /* 二级面板 */
  .mobile-nav-subhead {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 0 12px !important;
    border-bottom: 1px solid #eeeeee !important;
  }
  .mobile-nav-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: none !important;
    border: none !important;
    color: #0564F5 !important;
    font-size: 15px !important;
    padding: 6px 10px 6px 0 !important;
    cursor: pointer !important;
  }
  .mobile-nav-subtitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #19355e !important;
  }
  .mobile-nav-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px !important;
  }
  .mobile-nav-overview {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 12px !important;
    margin: 10px 0 4px !important;
    background: #f3f7ff !important;
    border-radius: 10px !important;
    color: #0564F5 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  .mobile-nav-arrow {
    color: #9aa5b1 !important;
    font-size: 18px !important;
  }
  .mobile-nav-sublist a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 12px !important;
    font-size: 15px !important;
    color: #19355e !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f4f4 !important;
  }

  /* 行业分组折叠 (方案: 70 个行业×场景链接) */
  .mobile-nav-group {
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .mobile-nav-group-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 12px !important;
    background: none !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #19355e !important;
    cursor: pointer !important;
    text-align: left !important;
  }
  .mobile-nav-caret {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #9aa5b1 !important;
    border-bottom: 2px solid #9aa5b1 !important;
    transform: rotate(45deg) !important;
    transition: transform .2s !important;
    margin-right: 6px !important;
  }
  .mobile-nav-group.open .mobile-nav-caret {
    transform: rotate(-135deg) !important;
  }
  .mobile-nav-group-links {
    display: none !important;
    padding: 2px 0 10px 12px !important;
    background: #fafbfc !important;
  }
  .mobile-nav-group.open .mobile-nav-group-links {
    display: block !important;
  }
  .mobile-nav-group-links a {
    display: block !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: #4a5568 !important;
    text-decoration: none !important;
  }
  .mobile-nav-actions {
    display: flex !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #eeeeee !important;
  }
  .mobile-nav-trail {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 12px !important;
    background: #0564F5 !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
  .mobile-nav-login {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 12px !important;
    background: #ffffff !important;
    color: #0564F5 !important;
    border: 1px solid #0564F5 !important;
    border-radius: 24px !important;
    text-decoration: none !important;
  }
  .mobile-nav-hotline {
    text-align: center !important;
    color: #666666 !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
  }

  /* ---------- 1.9 第三方客服/广告气泡: 移动端一律隐藏 ---------- */
  /*   a) AIFollowup (app.aifollowup.ai/embed/widget.js) — js/header_sub.js & js/footer_sub.js 加载
       b) 百度爱番番 / embed.baidu.com — sogotj.js 的百度统计 SDK 注入
       c) HubSpot livechat — 部分页面 footer_sub.js 注入
     这三类气泡在窄屏会遮挡正文 / 制造横滚风险, 移动端直接 display:none。
     ⚠️ 桌面端不受影响 (@media 限制) */
  .embed-icon,
  [class*="aifanfan"],
  [id*="aifanfan"],
  [class*="hubspot"],
  [id^="hubspot-"],
  script[data-app-id="dbsvfeoas6"] + iframe,
  iframe[src*="aifollowup.ai"],
  iframe[src*="aifanfan.baidu.com"],
  iframe[src*="hubspot"] {
    display: none !important;
  }
}

/* ==========================================================================
   二、底部导航 Footer (≤768px)
   --------------------------------------------------------------------------
   改造前: 5 列横排 (总宽 520px), 每列被压到 64~88px, 文字挤成一团
           深色底 + 白色 logo → logo 区背景透明时完全看不见
   改造后: 浅灰底 #f5f6f8 + 白色卡片 + 深蓝加粗标题 + 链接 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 改为单列 */
  .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;
  }
  /* 标题: 加粗加大 + 底部分隔线 */
  .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;
  }
}