/* ==========================================================================
   分享组件（site-wide share dock）
   --------------------------------------------------------------------------
   形态：PC（≥901px）→ 视口右侧固定竖条，四个动作常驻可见；
        移动端（≤900px）→ 右下角圆形悬浮按钮，点击弹出底部抽屉。
   为什么两端不同：移动端页面底部已有固定导航栏，再压一条常驻分享条会遮挡内容；
        改成悬浮按钮后零布局侵入。
   颜色全部走 --brand（科技蓝），与 theme.css 同一套变量。
   ========================================================================== */

.share-dock{
  position:fixed;
  z-index:9600;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif);
  -webkit-tap-highlight-color:transparent;
}

.share-dock button{
  font-family:inherit;
  cursor:pointer;
  border:0;
  background:none;
  padding:0;
  margin:0;
}

.sd-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#475569;
  transition:color .18s ease,background-color .18s ease,transform .18s ease;
}

.sd-btn:hover{color:#1A6CFF}
.sd-btn:active{transform:scale(.95)}
.sd-tx{font-size:11px;line-height:1.1;white-space:nowrap}

/* ---------- PC：右侧竖条 ---------- */
.sd-fab{display:none}

@media (min-width:901px){
  .share-dock{right:16px;top:50%;transform:translateY(-50%)}
  .sd-bar{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid var(--line,#E6EBF2);
    border-radius:16px;
    padding:8px 6px;
    box-shadow:0 8px 30px rgba(15,23,42,.10);
  }
  .sd-bar .sd-btn{
    width:58px;
    height:58px;
    flex-direction:column;
    gap:4px;
    border-radius:12px;
  }
  .sd-bar .sd-btn:hover{background:var(--brand-soft,#F0F6FF)}
}

/* ---------- 移动端：FAB + 抽屉 ---------- */
@media (max-width:900px){
  /* bottom 支持用 --share-dock-lift 上移避让。
     页面右下角若另有浮动按钮（如移动端选号大厅的 .back-top，占位约 bottom 56~131px），
     分享 FAB 默认 88px 会与它叠在一起。用法：页面里声明 body{--share-dock-lift:96px}
     —— 没声明的页面按 0 处理，行为与以前完全一致。 */
  .share-dock{right:14px;bottom:calc(88px + var(--share-dock-lift,0px))}
  .sd-fab{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
    color:#fff;
    box-shadow:0 6px 20px rgba(26,108,255,.36);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .sd-fab:active{transform:scale(.92);box-shadow:0 3px 12px rgba(26,108,255,.3)}
  /* 抽屉里由 JS 生成动作按钮，桌面端的竖条在此尺寸下隐藏 */
  .sd-bar{display:none}
}

/* ---------- 遮罩与抽屉 ---------- */
.sd-mask{
  position:fixed;
  inset:0;
  z-index:9700;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
}
.sd-mask[hidden]{display:none}
.sd-mask.open{opacity:1}

@media (min-width:901px){
  .sd-mask{align-items:center}
}

.sd-sheet{
  position:relative;
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:18px 18px 0 0;
  padding:20px 20px 26px;
  box-shadow:0 -8px 40px rgba(15,23,42,.18);
  transform:translateY(14px);
  transition:transform .22s ease;
  max-height:88vh;
  overflow:auto;
}
.sd-mask.open .sd-sheet{transform:translateY(0)}

@media (min-width:901px){
  .sd-sheet{border-radius:18px;transform:scale(.96)}
  .sd-mask.open .sd-sheet{transform:scale(1)}
}

.sd-x{
  position:absolute;
  right:12px;
  top:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#94A3B8;
  font-size:22px;
  line-height:1;
}
.sd-x:hover{background:#F1F5F9;color:#475569}

.sd-sheet-hd{
  font-size:15px;
  font-weight:500;
  color:#0F172A;
  text-align:center;
  margin-bottom:18px;
}

.sd-sheet-bd{font-size:13px;color:#475569;line-height:1.7}

/* 抽屉里的动作宫格 */
.sd-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  text-align:center;
}
.sd-grid button{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px 4px;
  border-radius:14px;
  color:#475569;
}
.sd-grid button:hover{background:var(--brand-soft,#F0F6FF);color:#1A6CFF}
.sd-grid .sd-ic{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-soft,#F0F6FF);
  color:#1A6CFF;
}
.sd-grid .sd-nm{font-size:12px;line-height:1.2}

/* 微信引导 */
.sd-guide{text-align:center}
.sd-guide .sd-arrow{
  display:block;
  margin:0 auto 12px;
  color:#1A6CFF;
}
.sd-guide p{margin:0 0 8px}
.sd-guide .sd-em{color:#0F172A;font-weight:500}

/* 海报 */
.sd-poster-wrap{text-align:center}
.sd-poster-wrap img{
  display:block;
  width:100%;
  max-width:340px;
  margin:0 auto 12px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(15,23,42,.14);
}
.sd-poster-tip{font-size:13px;color:#475569;margin:0}

/* 复制链接 */
.sd-linkrow{display:flex;gap:8px;margin-top:14px}
.sd-linkrow input{
  flex:1;
  min-width:0;
  height:40px;
  padding:0 12px;
  border:1px solid var(--line,#E6EBF2);
  border-radius:10px;
  font-size:13px;
  color:#475569;
  background:#F6F8FC;
}
.sd-linkrow button{
  flex:0 0 auto;
  height:40px;
  padding:0 16px;
  border-radius:10px;
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  color:#fff;
  font-size:13px;
}

/* 气泡提示 */
.sd-toast{
  position:fixed;
  left:50%;
  bottom:120px;
  transform:translateX(-50%) translateY(8px);
  z-index:9800;
  background:rgba(15,23,42,.88);
  color:#fff;
  font-size:13px;
  padding:10px 18px;
  border-radius:999px;
  opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.sd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 打印时隐藏 */
@media print{
  .share-dock,.sd-mask,.sd-toast{display:none !important}
}