/* ------------------------------------------------------------------
 * 右下角客服悬浮组件（与官网 Xspark-webui-homepage 同一套设计稿）
 *
 * 设计稿：Figma「Xspark」2201:16460 / 2205:16555 / 2220:15961
 * 定尺全部来自设计稿，改之前先对一下这三个 node：
 *   竖排标签   58 × 122，圆角 12，内边距 12，图标 28 + 间隙 2 + 文字 68
 *   白卡       58 × 207，圆角 12，内边距 14/12/16，格间距 12
 *   灰色分隔线 40 × 1
 *   气泡       圆角 12、1px #F7F7F7 描边、0 0 10px 8% 阴影、右侧 12px 处带尾巴
 * 固定在视口右下角，右边距与底边距各 60px（窄屏降到 24 / 16，见文末）。
 *
 * 只新增、不改动站内既有样式；唯一一处对既有元素的调整在文件末尾，
 * 是「返回顶部」按钮的位置避让，原因写在那里。
 * ------------------------------------------------------------------ */

.xs-support-dock {
  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 90;
  display: flex;
  width: 58px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--xs-font-family);
  line-height: normal;
}

/* 图标：底层灰度图 + 上层设计稿渐变态，悬停 / 激活（气泡展开中）时交叉淡入 */
.xs-support-dock__icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
}

.xs-support-dock__icon[data-size="20"] {
  width: 20px;
  height: 20px;
}

.xs-support-dock__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.xs-support-dock__icon-active {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.16s ease;
}

/* data-active 由 support-dock.js 按「该格气泡是否展开」给出：欢迎气泡进场默认
   展示（data-open 由 PHP 渲染）时，在线客服这一格同样算展开，图标保持彩色、
   文字压深，不要只有指针停在上面才亮。aria-expanded 只表达客服窗口的展开态。 */
.xs-support-dock__item:hover .xs-support-dock__icon-active,
.xs-support-dock__item[data-active] .xs-support-dock__icon-active {
  opacity: 1;
}

/* ---------------------------- 顶部竖排标签 ---------------------------- */

/* 悬浮态刻意不给任何位移/阴影反馈：这是常驻页面右下角的入口，
   上下浮动会让整块悬浮组件看起来在抖。
   新版视觉含右下角弧形光晕，纯 CSS 复现成本过高 —— 直接整图切
   Figma 渲染稿（2220:15967 默认态 / 2331:24803 悬浮态，3x），图标文字已烘焙在内。 */
.xs-support-dock__trial {
  position: relative;
  overflow: hidden;
  width: 58px;
  height: 122px;
  border-radius: 12px;
  background: url("dock/trial-default.png") center / 100% 100% no-repeat;
  box-shadow: 0 0 4px rgb(0 0 0 / 3%);
  text-decoration: none;
}

/* 悬浮态：切 2331:24803 渲染稿，::before 叠图交叉淡入 */
.xs-support-dock__trial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("dock/trial-hover.png") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.xs-support-dock__trial:hover::before,
.xs-support-dock__trial:focus-visible::before {
  opacity: 1;
}

.xs-support-dock__trial:focus-visible {
  outline: 2px solid #3f59ff;
  outline-offset: 2px;
}

/* 窄屏关闭按钮（设计稿 2220:15961，与官网同规格）：20×20 半透明灰圆板
   （rgb(125,129,135) / 60%，全圆角）+ 白色 1px 圆头 ×，圆心正好压在
   免费测试按钮的右上角（按钮 58 宽 + 10 = 图标盒右缘，顶部外扩 10px）。
   全站所有页面、视口 ≤1200px 时出现（PHP 恒渲染，CSS 断点控制显隐）。 */
.xs-support-dock__hide {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  display: none;
  width: 20px;
  height: 20px;
  padding: 0;
  align-content: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgb(125 129 135 / 60%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xs-support-dock__hide:hover {
  background: rgb(125 129 135 / 80%);
}

.xs-support-dock__hide:focus-visible {
  outline: 2px solid #3f59ff;
  outline-offset: 1px;
}

.xs-support-dock__hide svg {
  display: block;
}

@media (max-width: 1200px) {
  .xs-support-dock__hide {
    display: grid;
  }
}

/* ------------------------------ 白色卡片 ------------------------------ */

.xs-support-dock__panel {
  display: flex;
  width: 58px;
  padding: 14px 0 16px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #f7f7f7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 4px rgb(0 0 0 / 3%);
}

.xs-support-dock__divider {
  display: block;
  width: 40px;
  height: 1px;
  background: #f7f7f7;
}

/* 单格：气泡的定位上下文。宽度与卡片对齐，点击热区才够大 */
.xs-support-dock__slot {
  position: relative;
  width: 58px;
}

.xs-support-dock__item {
  display: flex;
  width: 100%;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: #3b3f45;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.xs-support-dock__item:focus-visible {
  outline: 2px solid #3f59ff;
  outline-offset: 2px;
  border-radius: 6px;
}

.xs-support-dock__label {
  font-size: 11px;
  font-weight: 400;
  line-height: 11px;
  transition: color 0.16s ease;
}

/* 展开态文字压深（设计稿里当前格文字 #0A0A0A、其余 #3B3F45） */
.xs-support-dock__item:hover .xs-support-dock__label,
.xs-support-dock__item[data-active] .xs-support-dock__label {
  color: #0a0a0a;
}

/* -------------------------------- 气泡 -------------------------------- */

.xs-support-dock__bubble {
  position: absolute;
  top: 50%;
  /* 100% = 58（与卡片同宽），再留 12px 给尾巴 —— 对齐设计稿的 12px 间距 */
  right: calc(100% + 12px);
  /* 必须给宽度：绝对定位 + 只有 right 时可用宽度是负的，
     图片会被 img{max-width:100%} 压成 0 宽（二维码气泡就是这么塌的） */
  width: max-content;
  max-width: calc(100vw - 94px);
  border: 1px solid #f7f7f7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 8%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.xs-support-dock__bubble[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
}

/* 透明桥：气泡与卡片之间还差 12px 空隙（留给尾巴），鼠标从格子移向气泡时
   会先落进这段空隙、触发 mouseleave 把气泡收掉 —— 电话气泡要点进复制按钮，
   这个死区直接导致复制不了。这里用一条不可见的竖条把空隙铺满，
   高度跟气泡一致（电话气泡比格子高，所以不能只铺格子那段）。 */
.xs-support-dock__bubble::before {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 12px;
  height: 100%;
}

/* 尾巴：旋转 45° 的白方块，只留朝外的两条边。压住卡片描边形成连贯的尖角 */
.xs-support-dock__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 13px;
  height: 13px;
  border-top: 1px solid #f7f7f7;
  border-right: 1px solid #f7f7f7;
  border-radius: 0 2px 0 0;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 在线客服：欢迎语 */
.xs-support-dock__bubble--chat {
  width: 300px;
  padding: 20px 20px 14px;
}

.xs-support-dock__greeting-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

.xs-support-dock__greeting-text {
  margin: 8px 0 0;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.xs-support-dock__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.16s ease;
}

.xs-support-dock__close:hover {
  opacity: 0.65;
}

.xs-support-dock__close img {
  display: block;
}

/* 微信客服：二维码 */
.xs-support-dock__bubble--wechat {
  padding: 15px;
}

.xs-support-dock__qr {
  display: block;
  width: 130px;
  height: 130px;
}

/* 联系电话：大客户经理 */
.xs-support-dock__bubble--phone {
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
}

.xs-support-dock__phone-icon {
  display: block;
  flex: none;
}

.xs-support-dock__phone-label {
  color: #0a0a0a;
}

/* 号码本身就是按钮 —— 与右侧复制图标是同一个动作，外观要保持设计稿的纯文字，
   所以按按钮重置（默认边框 / 底色 / 内边距 / 字体约定全部抹掉） */
.xs-support-dock__phone-number {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: #1a1a1a;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
}

/* 号码悬浮下划线（2331:24828）：从左往右展开的 1px 线。
   号码本身和右侧的复制按钮是同一个「复制号码」的动作，指针落在任一处都展开，
   光标停在复制按钮上时号码同样带下划线（键盘聚焦按钮也一样）。 */
.xs-support-dock__phone-number::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.xs-support-dock__phone-number:hover::after,
.xs-support-dock__phone-number:focus-visible::after,
.xs-support-dock__bubble--phone:has(.xs-support-dock__copy:hover) .xs-support-dock__phone-number::after,
.xs-support-dock__bubble--phone:has(.xs-support-dock__copy:focus-visible) .xs-support-dock__phone-number::after {
  transform: scaleX(1);
}

.xs-support-dock__copy {
  position: relative;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.xs-support-dock__copy img {
  display: block;
}

/* 复制按钮悬浮态图标（2331:24828）：灰底深描边版本，与常态图标交叉淡入 */
.xs-support-dock__copy-hover {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.xs-support-dock__copy:hover .xs-support-dock__copy-hover,
.xs-support-dock__copy:focus-visible .xs-support-dock__copy-hover {
  opacity: 1;
}

/* 复制成功的反馈：设计稿没有这个状态，只用文字提示，不另造图标。
   27px = 气泡下内边距 20 + 按钮上沿到气泡顶 21 + 6px 间距，
   即整颗气泡的上方，避免贴住气泡边框。 */
.xs-support-dock__copied {
  position: absolute;
  bottom: calc(100% + 27px);
  left: 50%;
  padding: 3px 6px;
  border: 1px solid #f7f7f7;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  color: #0a0a0a;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.xs-support-dock__copy[data-copied] .xs-support-dock__copied {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 只给读屏用的状态播报 */
.xs-support-dock__sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------- 响应式 ------------------------------- */

/* 文章页右侧栏在窄屏下会贴近视口右缘（容器左右各 48px），60px 的右边距
   会把「为你的业务找到合适的代理」那张卡片压住一条；这里改成贴边，
   让组件始终落在栏外的留白里。
   1400 是实测的切换点：更宽时卡片右缘离视口右缘还有 20px 以上余量，
   60px 的边距不会碰到它；再窄就会压住卡片。 */
@media (max-width: 1400px) {
  .xs-support-dock {
    right: 16px;
  }
}

/* 单栏布局（与站点断点一致）：组件贴边 */
@media (max-width: 900px) {
  .xs-support-dock {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xs-support-dock__trial::before,
  .xs-support-dock__bubble,
  .xs-support-dock__label,
  .xs-support-dock__close,
  .xs-support-dock__hide,
  .xs-support-dock__copy,
  .xs-support-dock__copy-hover,
  .xs-support-dock__phone-number::after {
    transition: none;
  }
}

/* ------------------------------ 客服窗口 ------------------------------ */
/*
 * 智齿 V7 页面内嵌在这里，不是官方 SDK 生成的窗体 ——
 * 位置、尺寸、层级、圆角全部由站点决定。
 * 窗口与入口组件同角对齐：right/bottom 与 .xs-support-dock 一致，视觉上是从入口长出来的。
 */

.xs-support-dock__chat {
  /* 智齿 V7 页面在聊天卡片四周固定留了 40px 白边（给卡片阴影用的），
     卡片本身是 400×640、圆角 16（实测 .zc-pc-container）。
     不处理的话，站点窗口 = 外层白卡 + 内层白卡，看着像套了两层壳。
     做法：外层按「卡片尺寸」定义，iframe 放大一圈再用 clip-path 裁掉白边 ——
     卡片自带的阴影也一并被裁掉，所以外层的阴影由这里补。 */
  --xs-sobot-gutter: 40px;

  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 100;
  width: 400px;
  height: min(640px, calc(100vh - 120px));
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 18px 48px rgb(0 0 0 / 18%),
    0 2px 8px rgb(0 0 0 / 6%);
  animation: xs-support-dock-chat-in 0.2s ease-out;
}

@keyframes xs-support-dock-chat-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.xs-support-dock__chat-frame {
  display: block;
  width: calc(100% + var(--xs-sobot-gutter) * 2);
  height: calc(100% + var(--xs-sobot-gutter) * 2);
  margin: calc(var(--xs-sobot-gutter) * -1) 0 0 calc(var(--xs-sobot-gutter) * -1);
  border: 0;
  background: #fff;
  /* 只裁 iframe 自身的白边；圆角必须与卡片一致（16），否则会啃掉四个角 */
  clip-path: inset(var(--xs-sobot-gutter) round 16px);
}

/* H5 访客端顶栏没有关闭控件，移动端自己补一个（只在移动端渲染）。
   位置避开顶栏左侧的头像与企业名，落在右侧空白处。 */
.xs-support-dock__chat-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.xs-support-dock__chat-close img {
  display: block;
}

/* 桌面端关闭入口：访客端顶栏自带的 × 不作数（它的 blur-frame 在聊天区失焦时
   也会发，接了就变成「弹窗内部点第二下就关」），窗口显隐统一由宿主决定。
   这里在 × 的位置压一个透明热区，点击直接由宿主移除窗口；图标仍由访客端渲染，
   外观、深浅色都不变。位置按访客端实测值对齐：顶栏 .icon-wrap 为 36×36，
   距卡片顶 14、右 12（与访客端 × 的盒子逐像素重合）。 */
.xs-support-dock__chat-close-desktop {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xs-support-dock__chat-close-desktop:focus-visible {
  outline: 2px solid #3f59ff;
  outline-offset: 1px;
}

/* 窗口展开时必须盖住站内固定导航栏（.home-nav 是 z-index: 100，
   组件容器默认 90，不抬的话窗口顶部和关闭按钮都会被导航压住、点不到）。
   只在展开时抬高，日常悬浮入口不参与站内层级竞争。 */
.xs-support-dock[data-xs-chat-open] {
  z-index: 300;
}

/* 窗口展开时把入口收起：两者占同一块角，留着会在窗口边缘露出来 */
.xs-support-dock[data-xs-chat-open] .xs-support-dock__trial,
.xs-support-dock[data-xs-chat-open] .xs-support-dock__panel,
.xs-support-dock[data-xs-chat-open] .xs-support-dock__hide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s;
}

@media (max-width: 1400px) {
  .xs-support-dock__chat {
    right: 16px;
  }
}

@media (max-width: 900px) {
  .xs-support-dock__chat {
    bottom: 16px;
  }
}

/* 触摸设备：改用 H5 访客端。它是满屏布局 —— 没有那圈 40px 白边、没有圆角，
   窗口直接铺满视口即可。断点用「指针能力」而不是宽度：窄的桌面窗口仍该走 PC 页。 */
@media (hover: none) and (pointer: coarse) {
  .xs-support-dock__chat {
    /* 用 left/right 撑满而不是 100vw：页面一旦有横向滚动，100vw 会带上滚动条宽度而溢出。
       高度用 dvh 跟随地址栏收放；但 dvh 不跟软键盘 —— 键盘弹起时这里的高度不会变，
       智齿的输入栏会整条落到键盘下面。移动端实际高度由脚本里的
       visualViewport 同步用 inline style 覆盖，这一段只是无 JS 时的兜底。 */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .xs-support-dock__chat-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xs-support-dock__chat {
    animation: none;
  }
}

/* --------------------------- 与既有元素的避让 --------------------------- */
/*
 * 站内「返回顶部」按钮原本贴在 right:32 / bottom:32（移动端 20/20），
 * 与新增组件同一块角：桌面会压住组件卡片下沿，移动端几乎完全重叠。
 * 这里只挪位置、不改外观 —— 抬到组件正上方，读作一整列悬浮工具；
 * 单栏布局下组件占满右下角，按钮落到左下角。
 * 339px 是组件总高（竖排标签 122 + 间距 8 + 白卡 209）。右偏移 +5 是让
 * 48px 的圆在 58px 宽的卡片上居中。
 * 如果之后把返回顶部挪走，删掉这一段即可。
 */
.xs-backtop {
  right: 65px;
  bottom: calc(60px + 339px + 12px);
}

@media (max-width: 1400px) {
  .xs-backtop {
    right: 21px;
  }
}

@media (max-width: 900px) {
  .xs-backtop {
    right: auto;
    left: 16px;
    bottom: 16px;
  }
}