/* =========================================================================
   SLai · 客服入口 v5
   -------------------------------------------------------------------------
   问题反馈（2026-11-10）：
     "点不开这个，然后也不够醒目"
   根因：
     1) 按钮在右下角，被浏览器滚动条 / 系统浮层压住一部分
     2) 视觉太"素"：半透明紫底，在深色极光背景上不够跳
     3) 点击区域只有文字大小，边缘难命中
   修法：
     · 尺寸放大到 56px 高，圆角胶囊，整块可点
     · 高饱和渐变 + 呼吸光环，滚动时也抢眼
     · 用 fixed + 单独层，避开滚动条（right 留出 24px）
     · 点击区扩展到整个胶囊，加 :active 反馈
     · 面板用更大的卡片，一次显示完所有联系方式
   ========================================================================= */

.support-dock{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:2147483000;      /* 高于任何页面元素 */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  font-size:13px;
  pointer-events:none;      /* 容器不拦点击 */
}
.support-dock > *{pointer-events:auto}

/* ---------- 触发按钮 ---------- */
.support-dock .dock-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:11px;
  height:56px;
  padding:0 26px 0 22px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#C084FC 0%,#8B5CF6 42%,#6366F1 100%);
  color:#fff;
  font:600 15px/1 var(--font);
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(233,213,255,.5) inset,
    0 14px 34px -10px rgba(124,58,237,.95),
    0 0 54px -12px rgba(168,85,247,.9);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}

/* 呼吸光环：让人一眼注意到"这里能点" */
.support-dock .dock-toggle::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(192,132,252,.55);
  animation:sd-pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes sd-pulse{
  0%   {transform:scale(.96); opacity:.85}
  70%  {transform:scale(1.14); opacity:0}
  100% {transform:scale(1.14); opacity:0}
}

.support-dock .dock-toggle:hover{
  transform:translateY(-3px) scale(1.03);
  filter:brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(245,235,255,.7) inset,
    0 20px 46px -12px rgba(124,58,237,1),
    0 0 80px -14px rgba(168,85,247,1);
}
.support-dock .dock-toggle:active{
  transform:translateY(-1px) scale(.99);
  filter:brightness(.96);
}

/* 左上角小绿点 */
.support-dock .dock-toggle i{
  width:9px;height:9px;
  border-radius:50%;
  background:#4DE39A;
  box-shadow:0 0 0 4px rgba(77,227,154,.28), 0 0 14px rgba(77,227,154,.9);
  flex:0 0 auto;
  animation:sd-dot 2s ease-in-out infinite;
}
@keyframes sd-dot{
  0%,100%{opacity:1}
  50%    {opacity:.45}
}

/* 展开态：图标转动 */
.support-dock.open .dock-toggle::before{animation:none;opacity:0}

/* ---------- 面板 ---------- */
.support-dock .dock-panel{
  width:min(340px,calc(100vw - 48px));
  border:1px solid rgba(192,132,252,.42);
  border-radius:16px;
  background:rgba(18,12,30,.98);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 30px 80px -24px rgba(0,0,0,.95),
    0 0 70px -20px rgba(124,58,237,.7);
  padding:20px;
  display:none;
  transform-origin:bottom right;
  animation:sd-in .22s cubic-bezier(.34,1.4,.64,1);
}
.support-dock.open .dock-panel{display:block}
@keyframes sd-in{
  from{opacity:0; transform:translateY(10px) scale(.96)}
  to  {opacity:1; transform:translateY(0) scale(1)}
}

.support-dock .dock-panel h4{
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#C084FC;
  font-weight:700;
  margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.support-dock .dock-panel h4::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(192,132,252,.5),transparent);
}

.support-dock .dock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(168,85,247,.14);
}
.support-dock .dock-row:last-of-type{border-bottom:0}
.support-dock .dock-row span{
  color:#B5ADD0;
  font-size:13px;
}
.support-dock .dock-row a,
.support-dock .dock-row b{
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:600;
  color:#F6F3FC;
  padding:5px 11px;
  border-radius:7px;
  background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.26);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  text-decoration:none;
  white-space:nowrap;
}
.support-dock .dock-row a:hover{
  background:rgba(192,132,252,.3);
  border-color:rgba(216,180,254,.6);
  color:#fff;
  transform:translateY(-1px);
}
.support-dock .dock-row b{cursor:default}

.support-dock .dock-note{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(168,85,247,.14);
  font-size:12px;
  line-height:1.75;
  color:#8E86A8;
}
.support-dock .dock-note b{color:#C084FC;font-weight:600}

/* ---------- 移动端：全宽底栏 ---------- */
@media(max-width:640px){
  .support-dock{
    right:12px;
    left:12px;
    bottom:12px;
    align-items:stretch;
  }
  .support-dock .dock-toggle{
    justify-content:center;
    width:100%;
    height:52px;
    font-size:14.5px;
  }
  .support-dock .dock-panel{
    width:100%;
  }
}

/* ---------- 减少动效偏好 ---------- */
@media(prefers-reduced-motion:reduce){
  .support-dock .dock-toggle::before,
  .support-dock .dock-toggle i{animation:none}
}