@charset "utf-8";
/* ============================================================
   chatter/chatter.html (CCChat同事圈 · 概述) 移动端适配
   2026-09-15 —— 参考 sale-cloud/spot.html (现场服务云) 适配细节
   ------------------------------------------------------------
   同模板 change.css + pro-god.css。通用段落沿用 spot-mobile.css 写法。
   本页独有:
     · 顶部 banner: .pro-one 内 <img> + .pro-ding(绝对定位 bottom:0,
       990×175, 覆盖在图上)。手机端 .pro-ding 改回正常流, 蓝图 .back-bg
       隐藏, 文字块 .back-con 落在蓝底 (.back_chatter) 上 → 整块读作 hero
     · .service_ban (引言块) → 整宽 + 蓝底 + 白字居中
     · 蓝色 CTA 块 .back_chatter (#00a1e0) + font-color 白字
     · .pro-right 原先带内联 border-left:3px !important (那条浅蓝竖线)。
       内联 !important 样式表压不动 → 2026-09-15 改为类 .chatter-line
       (HTML 已删内联), 并在文件末尾用 @media(min-width:769px) 补回,
       做到 PC 视觉零变化、移动端无竖线。

   作用域: 主体规则在 @media (max-width: 768px) 内, 桌面端零影响
          (文件末尾那条是 PC 端补偿, 用于还原原内联边框)。
   ============================================================ */

@media (max-width: 768px) {

  /* 容器整宽 */
  .pro-mes {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  .pro-mes .pro-left { display: none !important; }

  /* 右侧内容区 → 整宽 (内联 border-left:3px !important 保留)
     注: 必须 border-box —— 若为默认 content-box, width:100% 之外还会
     额外撑出那 3px 内联左边框, 实测 hOverflow=3, 手机上可左右晃动。 */
  .pro-mes .pro-right {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    height: auto !important;
    margin-top: 10px !important;
  }

  .pro-right .pro-two,
  .pro-mes .cell-sale,
  .clear-both {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------
     banner: <img> 整宽 + .pro-ding 回正常流
     ------------------------------------------------------------ */
  /* 2026-09-15(2): 用户要求 banner「像 PC 一样, 把色块+文字压在图片上, 整体高度缩小」。
     PC 做法 = 图 990×455, .pro-ding 绝对定位贴底(高 175px), 内含
       .back-bg  半透明色块 (#00a1e0 @ opacity .5)
       .back-con 白色文字
     移动端照此: 图固定 175px (object-fit:cover 裁切), .pro-ding 绝对定位贴底,
     色块高度随文字内容撑开 → banner 总高 ≈ 175px
     (原先 = 图 140 + 图下蓝块 95 = 235px)。 */
  .pro-mes .pro-right .pro-one {
    position: relative !important;
    width: 100% !important;
  }
  .pro-mes .pro-one > div:first-child {
    height: 175px !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
  .pro-mes .pro-one > div:first-child img {
    width: 100% !important;
    max-width: 100% !important;
    height: 175px !important;
    object-fit: cover !important;
    object-position: center 42% !important;
    display: block !important;
  }
  /* 色块 + 文字压回图片底部 (绝对定位贴底, 高度由文字内容撑开) */
  .pro-mes .pro-right .pro-ding {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
    padding: 0 !important;
    z-index: 11 !important;
  }
  /* 半透明色块 —— 与 PC 同源 (.back-bg 的 #00a1e0 + opacity .5, 不覆盖色值) */
  .pro-mes .pro-right .pro-ding .back-bg {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .pro-mes .pro-right .pro-ding .back-con {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right .pro-ding .back-con h3 {
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  .pro-mes .pro-right .pro-ding .banyou2 { display: none !important; }
  .pro-mes .pro-right .pro-ding .back-con p { color: #ffffff !important; }
  /* 2026-09-15: 用户要求隐藏 banner 里的「免费试用」「视频演示」按钮
     (两者都带 a.free-shi → 整段 <p> 隐藏, 蓝底块高度随之收窄) */
  .pro-mes .pro-right .pro-ding .back-con > p:has(> a.free-shi) { display: none !important; }

  /* 引言块 .service_ban → 整宽蓝底白字居中 */
  .pro-mes .pro-two .service_ban {
    width: 100% !important;
    height: auto !important;
    padding: 22px 18px !important;
    background: #00a1e0 !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    text-align: center !important;
  }
  .pro-mes .pro-two .service_ban h3 {
    color: #ffffff !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* 各内容块 .cell-sale */
  .pro-mes .cell-sale {
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .cell-sale .clear-both { margin-top: 0 !important; }
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .pro-mes .cell-sale .padding-px { padding: 14px 0 10px !important; }

  /* 产品行单列堆叠 */
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-potion,
  .no-float {
    float: none !important;
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  .cell-sale .sale-left img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .cell-sale .sale-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pro-mes img { max-width: 100% !important; height: auto !important; }

  /* 字号 / 间距收敛 */
  .cell-sale h3,
  .cell-sale .top-shou h3,
  .cell-sale .sale_title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 10px 0 8px !important;
    padding-top: 0 !important;
    color: #1c3d7a !important;
  }
  .cell-sale .sale-right p,
  .cell-sale p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 0 8px !important;
  }
  .cell-sale h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }

  /* 2026-09-15(4): 用户反馈「标题和左侧 icon 没上下居中 + 彼此加些间距」(chatter.html)。
     根因同 prmcloud: 桌面 .sale_title{height:50px;line-height:50px} (pro-god.css:649)
     是「盒高 + 行高」双写死, 移动端只把 line-height 收到 1.4 后文字(21px)贴盒顶,
     中心 y≈10.5; 而左侧图标位置由 background-position-y 固定的 sprite 切片决定,
     不随文字动 (chatter_bg.png = 52×280, 5 个图标区间各 49px 高, 起点 0/55/111/166/225,
     各类偏移 5/-51/-106/-160/-215) ⇒ 图标中心恒在盒内 y≈28.5~34.5, 文字偏上 18~24px。
     修: height 放自适 + min-height = 该图标中心 × 2 + flex 垂直居中 (逐类精确对齐)。
     注意: 绝不可改 background-position-y —— 那是 sprite 切片坐标, 一动就切错图标。 */
  .pro-mes .cell-sale .top-shou h3.sale_title {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding-left: 64px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .cell-sale .top-shou h3.chatter_bg { min-height: 59px !important; }
  .pro-mes .cell-sale .top-shou h3.chatter_bg1 { min-height: 57px !important; }
  .pro-mes .cell-sale .top-shou h3.chatter_bg2 { min-height: 59px !important; }
  .pro-mes .cell-sale .top-shou h3.chatter_bg3 { min-height: 61px !important; }
  .pro-mes .cell-sale .top-shou h3.chatter_bg4 { min-height: 69px !important; }

  /* 相邻功能块之间加呼吸间距 (原来首尾相接, 仅剩 <p> 的 8px) */
  .pro-mes .cell-sale .sale-right > .top-shou + .top-shou {
    margin-top: 30px !important;
  }

  /* 蓝色 CTA 块 (.cell-sale.back_chatter = #00a1e0) */
  .pro-mes .cell-sale.back_chatter { background: #00a1e0 !important; }
  .pro-mes .cell-sale.back_chatter .font-color,
  .pro-mes .cell-sale.back_chatter .sale-con h4,
  .pro-mes .cell-sale.back_chatter .top-shou p { color: #ffffff !important; }
  .pro-mes .cell-sale.back_chatter .sale-left img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 442 / 319;
    object-fit: cover;
    object-position: center 62%;
  }

  /* 按钮渐变胶囊 */
  .pro-mes .free-shi {
    display: inline-block !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(5, 100, 245, 0.28) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  /* 蓝底上的按钮反白 */
  .pro-mes .cell-sale.back_chatter .free-shi {
    background: #ffffff !important;
    color: #00a1e0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  /* 2026-09-15: 用户要求把正文各小标题下的「相关功能」文字链接做成按钮。
     定为次级按钮 (浅蓝底 + 蓝字 + 描边), 与主 CTA 的渐变胶囊区分开。 */
  .pro-mes .cell-sale a.video-color {
    display: inline-block !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #0564F5 !important;
    background: #eef3ff !important;
    border: 1px solid #c9ddff !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    margin: 2px 0 0 !important;
    white-space: nowrap !important;
  }

  /* 隐藏固定悬浮 / SEO 轮播 */
  .div-dian { display: none !important; }
  #footer { display: none !important; }
  #back-to-top { display: none !important; }
  .qr_code_l { display: none !important; }
}

/* end @media (max-width: 768px) */

/* ============================================================
   PC 端补偿 —— 还原原先写在该页 .pro-right 内联 style 里的 3px 浅蓝竖线
   2026-09-15: 用户要求移动端去掉这条竖线; 内联 !important 样式表压不动,
   故 HTML 改为 .chatter-line 类, PC 端用这条补回 (视觉零变化)。
   ============================================================ */
@media (min-width: 769px) {
  .pro-mes .pro-right.chatter-line { border-left: 3px solid #5eb4ff !important; }
}