/* 社媒分享栏（规格 docs/specs/2026-11-04-CMS前台社媒分享按钮.md §0.2 V1.2）：随公共脚本标签 {system:common_js /} / {widget:public_script /}
   输出，或由兜底中间件 ShareInject 注入。
   结构：nav.vy-share > ul.vy-share__list（li.vy-share__item > .vy-share__link）+ button.vy-share__toggle
   位置与首屏展开状态都按设备分别由类名决定（纯 CSS，无闪烁）：
     电脑（≥768px）：vy-share--pc-{float-left|float-right}、vy-share--pc-{expanded|collapsed}
     手机（<768px）：vy-share--m-{float-left|float-right}、vy-share--m-{expanded|collapsed}
   访客点分享钮后由 vy-share.js 加 is-open / is-closed 覆盖展开状态。
   后台实时预览复用本文件：vy-share--preview 改为相对预览框定位，vy-share--as-pc / vy-share--as-m 强制按电脑 / 手机规则（与后台视口宽窄无关）。
   类名与 CSS 变量稳定，主题可覆盖。 */
.vy-share{
  --vy-share-size:40px;--vy-share-gap:6px;--vy-share-bg:#fff;--vy-share-radius:14px;--vy-share-accent:#2563eb;
  position:fixed;z-index:9990;display:flex;flex-direction:column;align-items:center;gap:var(--vy-share-gap);
  padding:8px;background:var(--vy-share-bg);box-shadow:0 8px 28px rgba(15,23,42,.16),0 1px 3px rgba(15,23,42,.1);
  font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  box-sizing:border-box
}
.vy-share *,.vy-share *::before,.vy-share *::after{box-sizing:border-box}
.vy-share--preview{position:absolute;z-index:2} /* 后台预览：只在预览框内叠放，不能压到后台对话框之上 */

/* 位置：电脑贴边垂直居中，手机贴边靠下；左 / 右按设备各自设置 */
@media (min-width:768px) and (hover:hover){
  .vy-share--pc-float-left:not(.vy-share--as-m):not(.vy-share--as-pc) .vy-share__link::after{right:auto;left:calc(100% + 10px)}
  .vy-share--pc-float-left:not(.vy-share--as-m):not(.vy-share--as-pc) .vy-share__link:hover{transform:translateX(3px)}
}
@media (max-width:767.98px) and (hover:hover){
  .vy-share--m-float-left:not(.vy-share--as-pc):not(.vy-share--as-m) .vy-share__link::after{right:auto;left:calc(100% + 10px)}
  .vy-share--m-float-left:not(.vy-share--as-pc):not(.vy-share--as-m) .vy-share__link:hover{transform:translateX(3px)}
}
@media (min-width:768px){
  .vy-share:not(.vy-share--as-m){top:50%;bottom:auto;transform:translateY(-50%)}
  .vy-share--pc-float-right:not(.vy-share--as-m){right:0;left:auto;border-radius:var(--vy-share-radius) 0 0 var(--vy-share-radius)}
  .vy-share--pc-float-left:not(.vy-share--as-m){left:0;right:auto;border-radius:0 var(--vy-share-radius) var(--vy-share-radius) 0}
}
.vy-share--as-pc{top:50%;bottom:auto;transform:translateY(-50%)}
.vy-share--as-pc.vy-share--pc-float-right{right:0;left:auto;border-radius:var(--vy-share-radius) 0 0 var(--vy-share-radius)}
.vy-share--as-pc.vy-share--pc-float-left{left:0;right:auto;border-radius:0 var(--vy-share-radius) var(--vy-share-radius) 0}
@media (max-width:767.98px){
  .vy-share--m-float-right:not(.vy-share--as-pc){right:0;left:auto;border-radius:var(--vy-share-radius) 0 0 var(--vy-share-radius)}
  .vy-share--m-float-left:not(.vy-share--as-pc){left:0;right:auto;border-radius:0 var(--vy-share-radius) var(--vy-share-radius) 0}
}
.vy-share--as-m.vy-share--m-float-right{right:0;left:auto;border-radius:var(--vy-share-radius) 0 0 var(--vy-share-radius)}
.vy-share--as-m.vy-share--m-float-left{left:0;right:auto;border-radius:0 var(--vy-share-radius) var(--vy-share-radius) 0}

.vy-share__list{display:flex;flex-direction:column;gap:var(--vy-share-gap);margin:0;padding:0;list-style:none}
.vy-share__item{position:relative;margin:0;padding:0}
.vy-share__item[hidden]{display:none!important}
.vy-share__link,.vy-share__toggle{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--vy-share-size);height:var(--vy-share-size);
  margin:0;padding:0;border:0;border-radius:10px;background:#64748b;color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,filter .15s ease,background-color .15s ease
}
.vy-share__link:hover,.vy-share__link:focus-visible{filter:brightness(1.08);color:#fff}
.vy-share__link:focus-visible,.vy-share__toggle:focus-visible{outline:2px solid var(--vy-share-accent);outline-offset:2px}
.vy-share__icon{width:20px;height:20px;fill:currentColor;flex:none}

/* 平台名提示：桌面悬停时在内容一侧弹出（取 aria-label，随语言站） */
@media (hover:hover){
  .vy-share__link::after{
    content:attr(aria-label);position:absolute;top:50%;padding:4px 8px;border-radius:4px;background:#111827;color:#fff;
    font-size:12px;line-height:1.4;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .15s ease
  }
  /* 提示与悬停位移都朝页面内侧：贴右时向左、贴左时向右；按设备取对应位置 */
  .vy-share__link::after{right:calc(100% + 10px)}
  .vy-share__link:hover{transform:translateX(-3px)}
  .vy-share--as-pc.vy-share--pc-float-left .vy-share__link::after,
  .vy-share--as-m.vy-share--m-float-left .vy-share__link::after{right:auto;left:calc(100% + 10px)}
  .vy-share--as-pc.vy-share--pc-float-left .vy-share__link:hover,
  .vy-share--as-m.vy-share--m-float-left .vy-share__link:hover{transform:translateX(3px)}
  .vy-share__link:hover::after,.vy-share__link:focus-visible::after{opacity:1}
}

.vy-share__item--facebook .vy-share__link{background:#1877f2}
.vy-share__item--x .vy-share__link{background:#0f0f0f}
.vy-share__item--linkedin .vy-share__link{background:#0a66c2}
.vy-share__item--whatsapp .vy-share__link{background:#25d366}
.vy-share__item--telegram .vy-share__link{background:#26a5e4}
.vy-share__item--pinterest .vy-share__link{background:#e60023}
.vy-share__item--reddit .vy-share__link{background:#ff4500}
.vy-share__item--email .vy-share__link{background:#64748b}
.vy-share__item--wechat .vy-share__link{background:#07c160}
.vy-share__item--weibo .vy-share__link{background:#e6162d}
.vy-share__item--qzone .vy-share__link{background:#f5b800}
.vy-share__item--copy .vy-share__link{background:#475569}
.vy-share__item--native .vy-share__link{background:#334155}

/* 分享开关钮：列表可见时是浅色「收起」钮（× 图标），列表隐藏时是主色「分享」钮。
   外观与列表显隐用同一组状态选择器驱动（纯 CSS，不依赖脚本）；aria-expanded 只承担无障碍语义，由 vy-share.js 同步。 */
.vy-share__toggle{background:#f1f5f9;color:#334155}
.vy-share__toggle:hover{background:#e2e8f0}
.vy-share__list+.vy-share__toggle{margin-top:2px}
.vy-share__toggle .vy-share__icon--open{display:none}
.vy-share__toggle .vy-share__icon--close{width:18px;height:18px}

/* 状态矩阵：
   - 电脑规则：真实 ≥768px（后台「手机预览」as-m 除外），或后台「电脑预览」as-pc（不论后台视口宽窄）；
   - 手机规则：真实 <768px（后台「电脑预览」as-pc 除外），或后台「手机预览」as-m。 */
@media (min-width:768px){
  .vy-share--pc-collapsed:not(.vy-share--as-m):not(.is-open) .vy-share__list,
  .vy-share--pc-expanded:not(.vy-share--as-m).is-closed .vy-share__list{display:none}
  .vy-share--pc-collapsed:not(.vy-share--as-m):not(.is-open) .vy-share__toggle,
  .vy-share--pc-expanded:not(.vy-share--as-m).is-closed .vy-share__toggle{background:var(--vy-share-accent);color:#fff}
  .vy-share--pc-collapsed:not(.vy-share--as-m):not(.is-open) .vy-share__icon--open,
  .vy-share--pc-expanded:not(.vy-share--as-m).is-closed .vy-share__icon--open{display:block}
  .vy-share--pc-collapsed:not(.vy-share--as-m):not(.is-open) .vy-share__icon--close,
  .vy-share--pc-expanded:not(.vy-share--as-m).is-closed .vy-share__icon--close{display:none}
}
.vy-share--as-pc.vy-share--pc-collapsed:not(.is-open) .vy-share__list,
.vy-share--as-pc.vy-share--pc-expanded.is-closed .vy-share__list{display:none}
.vy-share--as-pc.vy-share--pc-collapsed:not(.is-open) .vy-share__toggle,
.vy-share--as-pc.vy-share--pc-expanded.is-closed .vy-share__toggle{background:var(--vy-share-accent);color:#fff}
.vy-share--as-pc.vy-share--pc-collapsed:not(.is-open) .vy-share__icon--open,
.vy-share--as-pc.vy-share--pc-expanded.is-closed .vy-share__icon--open{display:block}
.vy-share--as-pc.vy-share--pc-collapsed:not(.is-open) .vy-share__icon--close,
.vy-share--as-pc.vy-share--pc-expanded.is-closed .vy-share__icon--close{display:none}

/* 手机：贴边靠下，不挡正文中部 */
@media (max-width:767.98px){
  .vy-share:not(.vy-share--as-pc){top:auto;bottom:16px;transform:none;--vy-share-size:38px;padding:6px}
  .vy-share:not(.vy-share--as-pc) .vy-share__list{max-height:62vh;overflow-y:auto}
  .vy-share--m-collapsed:not(.vy-share--as-pc):not(.is-open) .vy-share__list,
  .vy-share--m-expanded:not(.vy-share--as-pc).is-closed .vy-share__list{display:none}
  .vy-share--m-collapsed:not(.vy-share--as-pc):not(.is-open) .vy-share__toggle,
  .vy-share--m-expanded:not(.vy-share--as-pc).is-closed .vy-share__toggle{background:var(--vy-share-accent);color:#fff}
  .vy-share--m-collapsed:not(.vy-share--as-pc):not(.is-open) .vy-share__icon--open,
  .vy-share--m-expanded:not(.vy-share--as-pc).is-closed .vy-share__icon--open{display:block}
  .vy-share--m-collapsed:not(.vy-share--as-pc):not(.is-open) .vy-share__icon--close,
  .vy-share--m-expanded:not(.vy-share--as-pc).is-closed .vy-share__icon--close{display:none}
}
.vy-share--as-m{top:auto;bottom:16px;transform:none;--vy-share-size:38px;padding:6px}
.vy-share--as-m .vy-share__list{max-height:62vh;overflow-y:auto}
.vy-share--preview.vy-share--as-m .vy-share__list{max-height:340px} /* 后台手机预览框内高约 458px（卡片另含分享钮与底边距）；vh 会按后台浏览器视口算，不能用 */
.vy-share--as-m.vy-share--m-collapsed:not(.is-open) .vy-share__list,
.vy-share--as-m.vy-share--m-expanded.is-closed .vy-share__list{display:none}
.vy-share--as-m.vy-share--m-collapsed:not(.is-open) .vy-share__toggle,
.vy-share--as-m.vy-share--m-expanded.is-closed .vy-share__toggle{background:var(--vy-share-accent);color:#fff}
.vy-share--as-m.vy-share--m-collapsed:not(.is-open) .vy-share__icon--open,
.vy-share--as-m.vy-share--m-expanded.is-closed .vy-share__icon--open{display:block}
.vy-share--as-m.vy-share--m-collapsed:not(.is-open) .vy-share__icon--close,
.vy-share--as-m.vy-share--m-expanded.is-closed .vy-share__icon--close{display:none}

/* 提示条 */
.vy-share-toast{position:fixed;left:50%;bottom:72px;z-index:9999;max-width:90vw;padding:10px 16px;border-radius:8px;background:rgba(17,24,39,.92);color:#fff;font-size:14px;line-height:1.5;transform:translateX(-50%);pointer-events:none}

/* 电脑端微信二维码弹层 */
.vy-share-modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.55)}
.vy-share-modal__box{position:relative;width:268px;max-width:100%;padding:28px 22px 20px;border-radius:14px;background:#fff;color:#1f2937;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.vy-share-modal__qr{display:flex;justify-content:center;margin:0 auto 14px}
.vy-share-modal__qr img,.vy-share-modal__qr canvas{display:block;width:200px;height:200px}
.vy-share-modal__tip{margin:0;font-size:13px;line-height:1.6;color:#4b5563}
.vy-share-modal__close{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#6b7280;cursor:pointer}
.vy-share-modal__close:hover{background:#f3f4f6}
.vy-share-modal__close svg{width:18px;height:18px;fill:currentColor}

/* 微信内置浏览器：右上角引导层，点任意处关闭 */
.vy-share-guide{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.78);color:#fff;cursor:pointer}
.vy-share-guide__arrow{position:absolute;top:6px;right:22px;width:64px;height:80px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vy-share-guide__text{position:absolute;top:96px;right:20px;left:20px;margin:0;font-size:17px;line-height:1.6;text-align:right}