/* Shared contact and back-to-top controls; one viewport anchor on every page. */
:root {
  --st-floating-action-size: 36px;
  --st-floating-action-gap: 8px;
  --st-floating-actions-y: calc(100dvh - var(--inq-bar-bottom, 79px) - 44px - var(--st-floating-action-gap) - var(--st-floating-action-size));
  /* 「联系 ST」可拖拽入口（2026-09-29）——位置由 st-contact-dock-v1.js 写这三个变量，
     CSS 只负责把它们翻译成 left/right + translate。默认值 = 左下角、完全露出。 */
  --st-contact-side: left;
  --st-contact-y: auto;
  --st-contact-hide: 0px;
}

@media (min-width: 721px) {
  :root { --st-floating-actions-y: calc(100dvh - 24px - 52px - var(--st-floating-action-gap) - var(--st-floating-action-size)); }
}

.st-contact-dock {
  position: fixed !important;
  z-index: 60 !important;
  /* 垂直位置完全由 --st-contact-y 决定（拖拽写进去的像素值）。
     没写过时回落到原来的底部锚点，保证首屏与旧行为一致。 */
  /* 🔴 垂直位置**唯一来源** = --st-contact-y（st-contact-dock-v1.js 写进来的像素值）。
     绝不要再叠加 `--st-floating-actions-y` 之类的兜底表达式 —— 那种表达式依赖
     `--inq-bar-actual-h`（每页实测值不同：首页 156px、询价页另一值），
     会让按钮在翻页时跳位（2026-09-29 用户报「切到询价单位置总是变」）。 */
  top: var(--st-contact-y, calc(100dvh - 96px)) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: max-content !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
  pointer-events: none !important;
  /* 吸附偏移：靠左时负向移出（藏一半），靠右时正向移出。
     用 transform 而不是改 left —— 左右切换时不会出现过渡卡顿。 */
  transform: translateX(calc(var(--st-contact-hide, 0px) * -1));
  transition: transform .28s cubic-bezier(.22,.8,.25,1);
}
/* 靠右：按钮贴右边，隐藏方向相反。 */
.st-contact-dock[data-side="right"] {
  left: auto !important;
  right: 0 !important;
  transform: translateX(var(--st-contact-hide, 0px));
}
/* 拖拽中不做动画（要跟手），也不隐藏。 */
.st-contact-dock.is-dragging { transition: none; }
.st-contact-dock.is-dragging .st-contact-toggle { animation: none; cursor: grabbing; }

.st-contact-dock::after { content: none !important; display: none !important; }

.st-contact-toggle {
  display: grid !important;
  width: var(--st-floating-action-size) !important;
  height: var(--st-floating-action-size) !important;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2449b2, #0a267f 74%);
  box-shadow: 0 8px 22px rgba(8,31,128,.22), inset 0 1px 0 rgba(255,255,255,.32);
  pointer-events: auto;
  /* 【关键】拖拽必须屏蔽浏览器的滚动/缩放手势，否则安卓 WebView 会截走 pointermove。 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  animation: st-contact-breathe 3.4s cubic-bezier(.22,.8,.25,1) infinite;
  transition: transform .26s cubic-bezier(.22,.8,.25,1), box-shadow .26s cubic-bezier(.22,.8,.25,1);
}

/* 靠左时给按钮留出与边缘的间距（隐藏态下 left:0 就自然贴边了）。 */
.st-contact-dock[data-side="left"] { padding-left: 14px; }
.st-contact-dock[data-side="right"] { padding-right: 14px; }

.st-contact-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8,31,128,.26), inset 0 1px 0 rgba(255,255,255,.36);
}

.st-contact-toggle svg { width: 16px; height: 16px; }

#st-contact-popover {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  box-sizing: border-box;
  width: min(304px, calc(100vw - 84px)) !important;
  max-height: min(430px, calc(100dvh - 100px));
  overflow: auto;
  pointer-events: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 20px;
  background: rgba(250,252,255,.9);
  box-shadow: 0 18px 48px rgba(12,31,78,.2), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  transform: translateY(-50%);
  animation: st-contact-panel-in .18s cubic-bezier(.22,.8,.25,1) both;
}
/* 【5-修订】气泡方向 = 由 JS 算出的 --pop-side 决定，CSS 只负责落位。
   三种取值：side（水平朝屏幕内）/ up（向上）/ down（向下）。

   ❌ 第一版写死了「靠左挂右侧、靠右挂左侧」，且下面还有一条 `.is-detail-open`
      无条件 `bottom: calc(100% + 12px)` —— 结果**按钮在屏幕上部时气泡整个跑到视口外**
      （用户 2026-09-29 报「点击后始终往上弹，在屏幕上部就看不到信息」）。
   ✅ 现在：JS 量出四个方向的可用空间，把结论写进 dock 的 `data-pop`；
      这里把三种落位各写一条规则；纵向弹时用 `--pop-x` 把气泡钳在视口内。
      并且**水平弹（side）也做了纵向钳制**（用 --pop-y）—— 因为「挂在中线上下」
      在按钮靠近屏幕顶部/底部时同样会出屏。 */

/* 默认（变量还没写时）= 水平朝内，与第一版行为一致，保证首屏不闪。 */
.st-contact-dock[data-side="left"] #st-contact-popover {
  left: calc(100% + 12px) !important;
  right: auto !important;
  transform-origin: left center;
}
.st-contact-dock[data-side="right"] #st-contact-popover {
  left: auto !important;
  right: calc(100% + 12px) !important;
  transform-origin: right center;
}

/* 水平朝内：纵向由 --pop-y 决定（JS 会钳在视口内），默认仍是中线居中 */
.st-contact-dock[data-pop="side"] #st-contact-popover {
  top: var(--pop-y, 50%) !important;
  transform: translateY(-50%);
}

/* 向上弹：气泡底边对齐按钮顶边 */
.st-contact-dock[data-pop="up"] #st-contact-popover {
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  left: var(--pop-x, calc(100% + 12px)) !important;
  right: auto !important;
  transform: none !important;
  transform-origin: left bottom;
}
/* 向下弹：气泡顶边对齐按钮底边 */
.st-contact-dock[data-pop="down"] #st-contact-popover {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  left: var(--pop-x, calc(100% + 12px)) !important;
  right: auto !important;
  transform: none !important;
  transform-origin: left top;
}

#st-contact-popover[hidden] { display: none !important; }
.st-contact-popover-head { padding-bottom: 11px; }
.st-contact-popover-head strong { font-size: 14px; letter-spacing: .01em; }
.st-contact-popover-head small { font-size: 11px; line-height: 1.55; }
/* 🔴 原本此处是 `.is-detail-open` 无条件「往上弹」的规则 —— 已删除。
   它不看按钮在屏幕什么位置，只要展开详情就 bottom:100%，按钮靠上时气泡出屏。
   方向决策已交给 JS 的 data-pop（见上）。 */

.st-contact-channels {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 8px !important;
}
.st-contact-channels[hidden] { display: none !important; }

.st-contact-channels .contact-channel {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 8px 4px;
  border: 1px solid rgba(14,42,110,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
}

.st-contact-channels .contact-channel svg { width: 21px; height: 21px; }
.st-contact-channels .contact-channel span { display: block; max-width: 100%; overflow-wrap: anywhere; }

.st-back-to-top {
  position: fixed !important;
  z-index: 60 !important;
  top: var(--st-floating-actions-y) !important;
  right: 22px !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--st-floating-action-size) !important;
  height: var(--st-floating-action-size) !important;
  border-radius: 50% !important;
}

.st-back-to-top svg { width: 16px; height: 16px; }

/* 🔴 这里原本有一条 `page-inquiry` 的 top 覆盖（!important），它是
   「切到询价单页面按钮就跳位」的元凶：JS 明明写了 --st-contact-y，
   却被这条 !important 规则压掉，改用 --inq-bar-actual-h 重算 ——
   而这个变量每页不同（首页 156px / 询价页另一值），于是每次翻页都跳 Δ44px。
   按钮位置已统一由 --st-contact-y 表达，不需要按页面分叉，整段删除。
   仅保留「回到顶部」按钮在询价页的避让（它没有拖拽逻辑，仍需避开金额栏）。 */
.st-back-to-top[data-context="inquiry"] {
  top: calc(100dvh - var(--inq-bar-bottom, 79px) - var(--inq-bar-actual-h, 44px) - var(--st-floating-action-gap) - var(--st-floating-action-size)) !important;
}

@media (min-width: 721px) {
  .st-back-to-top[data-context="inquiry"] {
    top: calc(100dvh - 24px - var(--inq-bar-actual-h, 52px) - var(--st-floating-action-gap) - var(--st-floating-action-size)) !important;
  }
}

@keyframes st-contact-breathe {
  0%, 100% { box-shadow: 0 8px 22px rgba(8,31,128,.22), 0 0 0 0 rgba(74,113,218,0), inset 0 1px 0 rgba(255,255,255,.32); }
  50% { box-shadow: 0 9px 25px rgba(8,31,128,.24), 0 0 0 5px rgba(74,113,218,.08), inset 0 1px 0 rgba(255,255,255,.36); }
}

@keyframes st-contact-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 720px) {
  /* 🔴 这里**不要再写** left/right —— 拖拽模块会按 data-side 定位，
     写死一边会让「拖到右边」在小屏上失效（原来就是写死 left:14px）。
     只在窄屏把内边距收小一点。 */
  .st-contact-dock[data-side="left"] { padding-left: 10px; }
  .st-contact-dock[data-side="right"] { padding-right: 10px; }
  #st-contact-popover { width: min(286px, calc(100vw - 84px)) !important; }
  .st-back-to-top { right: 14px !important; left: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .st-contact-toggle { animation: none; transition: none; }
  #st-contact-popover { animation: none; }
  .st-back-to-top { transition: none; }
}