/**
 * 社交浮窗样式（2026-10-10，v4：修气泡被裁 + 触屏点击）
 *
 * 历史：
 *   v1 照搬参考站配色（珊瑚粉 #F08080 + 品牌彩色圆钮），Melo 反馈不搭。
 *   v2 改为对齐本站设计语言（金色令牌 + 发丝线 + 衬线体大写）。Melo 反馈「打开动画不流畅」。
 *   v3 修动画卡顿（实测展开 333ms 冻结 → 16.8ms）。
 *   v4 修 v3 自己引入的气泡裁剪，并加触屏点击优化。
 *
 * ★ v4 修了什么：
 *   v3 给两个按钮加了 overflow:hidden（当时是为了把 hover 的实心金裁进圆角）。
 *   代价是按钮里 .call-to-action-tip 定位在 right:68px —— 按钮左侧外面 —— 被整个裁掉。
 *   实测 1440px：tip 盒子 [1241,547,112,32]，按钮 [1370,537,52,52]，clipped:true，
 *   即桌面端的「CHAT NOW」气泡完全看不见了。
 *   改法：去掉 overflow:hidden，改在 ::before 上写 border-radius:inherit 完成圆角裁切。
 *   顺带消掉另一个隐患：overflow:hidden 会把按钮变成滚动容器，iOS 上内部滚动偏移
 *   一旦变动，两个绝对定位的图标会整体位移，视觉状态就乱了。
 *   另加 touch-action:manipulation 去掉触屏 300ms 点按延迟与双击缩放。
 *
 * ★ v3 修的是什么（先量后改，不是猜的）：
 *   给 see.js 加了 --cpu N（CDP Emulation.setCPUThrottlingRate，模拟手机），
 *   再用 requestAnimationFrame 采真实帧间隔。v2 在 CPU x6 / 440px 下实测：
 *       展开  maxGap 333.2ms   over33ms 1   ← 卡了三分之一秒
 *       收起  maxGap  16.8ms   over33ms 0   ← 收起反而是流畅的
 *   原因：渠道按钮 + 气泡共 6 个元素带 backdrop-filter。它们从 visibility:hidden
 *   变可见时，浏览器必须当场建立模糊图层并采样背景 —— 这一帧就是那 333ms。
 *   收起时图层已存在，所以不卡。
 *   对策：
 *     1. backdrop-filter 只留给常驻的主按钮（1 个、且从不隐藏）→ 渠道与气泡改用
 *        「分层渐变」假装玻璃（深底 rgba(18,18,18,.92) + 顶部 rgba(244,241,234,.07) 微光）。
 *        远处看跟真模糊一样，但零采样成本。
 *     2. 不再过渡 background 渐变 —— 渐变不可插值，浏览器只能在过渡结束时「啪」地换掉。
 *        改成 ::before 叠层 + opacity 过渡（opacity 可插值，且走合成器）。
 *     3. 入场不再用 scale()：缩放一个带阴影的元素要整层重新栅格化。改成
 *        独立属性 translate + opacity，并给每个渠道加 40ms 递延（错开入场更顺、也更耐看）。
 *        用 translate 而不是 transform 是为了把 transform 让给 hover 的 scale，两者不打架。
 *     4. 加 will-change，让这几个元素提前上合成层，动画期间不必在主线程重绘。
 *
 * ★ 视觉依据（实测值，主题 style.css 的 .sa-root 令牌）：
 *     --sa-gold #c5a059 / --sa-gold-hi #dcbb7c / --sa-gold-lo #a8853f
 *     --sa-gold-line rgba(197,160,89,.26) / --sa-gold-wash rgba(197,160,89,.10)
 *     --sa-glass-2 rgba(18,18,18,.55) / --sa-r-pill 99px / --sa-blur blur(12px)
 *     --sa-font-serif "Cormorant Garamond" / --sa-ease cubic-bezier(.22,.61,.36,1)
 *   本站标准按钮 .sa-nav-btn 的配方：1px 金发丝线 + 金渐变底(.16→.06) + 金字 + hover 实心金。
 *   浮窗主按钮的这四项与它逐项数值相同（见 README 里的实测记录）。
 *
 * ★ 三条必须保留的加固：
 *   1. box-sizing 自带兜底 —— 主题复位只作用于 `.sa-root *`，浮窗挂在 body 下拿不到。
 *   2. 收起态 visibility:hidden —— 只降透明度的话不可见链接仍留在 Tab 序列里。
 *   3. z-index 99980 < 手机抽屉 99990 —— 抽屉是模态，打开时浮窗应被遮罩压住。
 */

#sa-social-widget {
  --sa-accent: var(--sa-gold, #c5a059);
  --sa-accent-hi: var(--sa-gold-hi, #dcbb7c);
  --sa-accent-lo: var(--sa-gold-lo, #a8853f);
  --sa-accent-rgb: 197, 160, 89;
  --sa-accent-line: var(--sa-gold-line, rgba(197, 160, 89, 0.26));
  --sa-accent-wash: var(--sa-gold-wash, rgba(197, 160, 89, 0.10));
  --sa-frost: var(--sa-glass-2, rgba(18, 18, 18, 0.55));
  --sa-frost-blur: var(--sa-blur, blur(12px));
  --sa-ink: var(--sa-bg, #121212);
  --sa-pill: var(--sa-r-pill, 99px);
  --sa-tip-font: var(--sa-font-serif, "Cormorant Garamond", "Songti SC", Georgia, "Times New Roman", serif);
  /* 注意不能写 --sa-ease: var(--sa-ease, …)：自引用会让整条自定义属性失效 */
  --sa-social-ease: var(--sa-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  /* 不用 backdrop-filter 时假装玻璃用的两层：深底 + 顶部微光（抄本站 .sa-card 的思路） */
  --sa-frost-solid: linear-gradient(180deg, rgba(244, 241, 234, 0.07), rgba(244, 241, 234, 0.02)), rgba(18, 18, 18, 0.92);

  position: fixed;
  right: 18px;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99980;
}

#sa-social-widget,
#sa-social-widget *,
#sa-social-widget *::before,
#sa-social-widget *::after {
  box-sizing: border-box;
}

/* ---------- 展开的渠道列表 ----------
   容器只负责显隐与命中，不再做 opacity/transform 动画：
   把动画下放到每个按钮上，才能做出错开入场，也避免给整层（含阴影）重复栅格化。 */
#sa-social-widget .social-channels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;   /* 收起时等淡出结束再隐藏 */
}

#sa-social-widget.active .social-channels {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

/* ---------- 渠道按钮：分层渐变假装玻璃 + 金发丝线 + 金图标 ---------- */
#sa-social-widget .social-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--sa-pill);
  border: 1px solid var(--sa-accent-line);
  background: var(--sa-frost-solid);
  color: var(--sa-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
  position: relative;
  /* ★ 这里不能写 overflow:hidden。v3 加过，两个后果：
     ① 按钮里 .call-to-action-tip 定位在 right:68px（按钮左侧外面），被整个裁掉
        —— 实测 tip 盒子 [1241,547,112,32] vs 按钮 [1370,537,52,52]，完全不可见。
     ② overflow:hidden 让按钮变成滚动容器，iOS 上按钮内部的滚动偏移一旦被改动，
        两个绝对定位的图标会跟着位移，视觉状态就乱了。
     圆角裁切改由 ::before 上的 border-radius:inherit 完成，不需要 overflow。 */
  /* 触屏：去掉 300ms 点按延迟与双击缩放，点一下就是一下 */
  touch-action: manipulation;
  /* 用独立属性 translate 做入场，把 transform 留给 hover 的 scale，两者互不干扰 */
  translate: 0 10px;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.24s var(--sa-social-ease),
              translate 0.24s var(--sa-social-ease),
              color 0.3s var(--sa-social-ease),
              border-color 0.3s var(--sa-social-ease),
              box-shadow 0.35s var(--sa-social-ease),
              transform 0.3s var(--sa-social-ease);
}

#sa-social-widget.active .social-btn {
  translate: 0 0;
  opacity: 1;
}

/* 错开入场：收起时没有 delay（一起快速淡出），展开时依次落下 */
#sa-social-widget.active .social-btn:nth-child(1) { transition-delay: 0s; }
#sa-social-widget.active .social-btn:nth-child(2) { transition-delay: 0.04s; }
#sa-social-widget.active .social-btn:nth-child(3) { transition-delay: 0.08s; }
#sa-social-widget.active .social-btn:nth-child(4) { transition-delay: 0.12s; }
#sa-social-widget.active .social-btn:nth-child(5) { transition-delay: 0.16s; }
#sa-social-widget.active .social-btn:nth-child(6) { transition-delay: 0.2s; }

/* hover 的实心金：用叠层 + opacity，而不是过渡 background（渐变不可插值） */
#sa-social-widget .social-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;      /* 没有 overflow:hidden，靠这里把实心金裁进胶囊里 */
  background: linear-gradient(180deg, var(--sa-accent-hi), var(--sa-accent-lo));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--sa-social-ease);
}
#sa-social-widget .social-btn:hover::before {
  opacity: 1;
}
#sa-social-widget .social-btn:hover {
  color: var(--sa-ink);
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 5px var(--sa-accent-wash), 0 8px 26px rgba(0, 0, 0, 0.38);
  transform: scale(1.08);
}
/* 图标必须压在 hover 叠层之上（叠层是 absolute，图标不定位就会被盖住） */
#sa-social-widget .social-btn svg {
  position: relative;
  z-index: 1;
}
#sa-social-widget .social-btn:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 3px;
}

/* ---------- 主开关按钮：照抄 .sa-nav-btn 配方，做成圆的 ---------- */
#sa-social-widget .main-toggle-btn {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--sa-accent-line);
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--sa-pill);
  /* 深底 + 金色渐变：跟导航条「深玻璃 + 金按钮」的组合完全一致。
     这是全浮窗唯一保留真模糊的元素 —— 它常驻可见、从不隐藏，所以不会触发
     渠道按钮那种「临时建图层」的卡顿，同时保证浮在商品图上时依然有质感。 */
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.16), rgba(197, 160, 89, 0.06)),
              var(--sa-frost);
  -webkit-backdrop-filter: var(--sa-frost-blur);
  backdrop-filter: var(--sa-frost-blur);
  color: var(--sa-accent);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;  /* 触屏：去掉 300ms 点按延迟与双击缩放 */
  /* 同样不写 overflow:hidden —— 见 .social-btn 处的说明，气泡就挂在按钮左侧外面 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.42);
  transition: color 0.3s var(--sa-social-ease),
              border-color 0.3s var(--sa-social-ease),
              box-shadow 0.4s var(--sa-social-ease),
              transform 0.3s var(--sa-social-ease);
}
#sa-social-widget .main-toggle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;      /* 没有 overflow:hidden，靠这里把实心金裁进胶囊里 */
  background: linear-gradient(180deg, var(--sa-accent-hi), var(--sa-accent-lo));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--sa-social-ease);
}
#sa-social-widget .main-toggle-btn:hover::before {
  opacity: 1;
}
#sa-social-widget .main-toggle-btn:hover {
  color: var(--sa-ink);
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 6px var(--sa-accent-wash), 0 10px 40px rgba(0, 0, 0, 0.42);
  transform: scale(1.06);
}
#sa-social-widget .main-toggle-btn:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 3px;
}

/* 展开态：只改可插值的 border-color / box-shadow，不再换 background 渐变 ——
   v2 那句 background 过渡是「啪」地跳变，也是「不流畅」的一部分。 */
#sa-social-widget.active .main-toggle-btn {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-accent-wash), 0 10px 40px rgba(0, 0, 0, 0.42);
}

/* ---------- 两个图标的交叉淡入旋转 ---------- */
#sa-social-widget .main-toggle-btn svg {
  position: absolute;
  z-index: 1;
  will-change: transform, opacity;
  transition: transform 0.26s var(--sa-social-ease), opacity 0.26s var(--sa-social-ease);
}
#sa-social-widget .main-toggle-btn .icon-chat {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
#sa-social-widget .main-toggle-btn .icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
#sa-social-widget.active .main-toggle-btn .icon-chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}
#sa-social-widget.active .main-toggle-btn .icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------- 提示气泡：本站衬线体 + 大写 + 大字距 + 金发丝线胶囊 ---------- */
#sa-social-widget .call-to-action-tip {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--sa-pill);
  border: 1px solid var(--sa-accent-line);
  background: var(--sa-frost-solid);      /* 也去掉真模糊：它会随展开淡出，属于「会动的模糊」 */
  color: var(--sa-accent-hi);
  font-family: var(--sa-tip-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  will-change: opacity, transform;
  transition: opacity 0.28s var(--sa-social-ease), transform 0.28s var(--sa-social-ease);
}

#sa-social-widget.active .call-to-action-tip {
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
}

/* =========================================================================
 * 品牌彩色模式（设置页可切）—— 只有选中 data-style="brand" 时才生效
 * ====================================================================== */
#sa-social-widget[data-style="brand"] .social-btn {
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#sa-social-widget[data-style="brand"] .whatsapp-btn { background-color: #25D366; }
#sa-social-widget[data-style="brand"] .instagram-btn {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
#sa-social-widget[data-style="brand"] .facebook-btn { background-color: #1877F2; }
#sa-social-widget[data-style="brand"] .tiktok-btn   { background-color: #010101; }
#sa-social-widget[data-style="brand"] .youtube-btn  { background-color: #FF0000; }
#sa-social-widget[data-style="brand"] .email-btn    { background-color: #8a6d3b; }
/* 品牌模式不用金色叠层，改成整体提亮（避免两个叠层打架，也省一次重绘） */
#sa-social-widget[data-style="brand"] .social-btn::before {
  display: none;
}
#sa-social-widget[data-style="brand"] .social-btn:hover {
  color: #ffffff;
  filter: brightness(1.12);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: scale(1.08);
}

/* ---------- 手机 ---------- */
@media screen and (max-width: 600px) {
  #sa-social-widget {
    right: 10px;
  }
  #sa-social-widget .main-toggle-btn {
    width: 48px;
    height: 48px;
  }
  /* 触屏点按区按本站标准给到 44px（主题 .sa-card-add 在触屏下也是 44px） */
  #sa-social-widget .social-btn {
    width: 44px;
    height: 44px;
  }
  #sa-social-widget .social-channels {
    gap: 10px;
  }
  #sa-social-widget .call-to-action-tip {
    display: none;
  }
}

/* ---------- 尊重「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  #sa-social-widget .social-btn,
  #sa-social-widget .main-toggle-btn,
  #sa-social-widget .main-toggle-btn svg,
  #sa-social-widget .main-toggle-btn::before,
  #sa-social-widget .social-btn::before,
  #sa-social-widget .call-to-action-tip {
    transition-duration: 0.01ms;
    transition-delay: 0s !important;
  }
  #sa-social-widget .social-btn:hover,
  #sa-social-widget .main-toggle-btn:hover {
    transform: none;
  }
}

/* ---------- 打印时不出现 ---------- */
@media print {
  #sa-social-widget {
    display: none !important;
  }
}