/**
 * 书笙OS · 分享组件（comp/share）
 * 设计系统：暖棕古风 — 主色 #B07D56 / 辅 #C49A6C / 深墨 #2C2420 / 纸白 #FCF9F3
 * 规则：组件自带独立样式，不依赖宿主页 CSS 变量；小控件不加底色（保持清爽），
 *       仅面板/层用纸白实底保证任意背景可读；断点 768 / 480
 * 结构：.ss-root(浮窗) .ss-layer(海报选择/预览/二维码) .ss-guide(微信引导蒙层) .ss-toast
 */
.ss-root{position:fixed;inset:0;z-index:12000;display:none}
.ss-root.show{display:block}
.ss-mask{position:absolute;inset:0;background:rgba(20,16,12,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:ssFade .18s ease}
@keyframes ssFade{from{opacity:0}to{opacity:1}}
.ss-panel{position:absolute;left:0;right:0;bottom:0;background:#FCF9F3;border-radius:18px 18px 0 0;
  padding:16px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 30px rgba(44,36,32,.18);
  animation:ssUp .22s cubic-bezier(.22,.9,.3,1)}
@keyframes ssUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ss-hd{text-align:center;font-size:13px;color:#8A7A66;letter-spacing:.08em;margin-bottom:14px}
.ss-items{display:flex;gap:4px;justify-content:flex-start;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.ss-item{flex:0 0 auto;width:70px;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ss-item:active .ss-ico{transform:scale(.9)}
.ss-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(176,125,86,.10);border:1px solid rgba(176,125,86,.18);color:#96693E;transition:transform .15s}
.ss-ico svg{width:22px;height:22px;display:block}
.ss-ico-txt{font-size:15px;line-height:1}
.ss-item-tt{font-size:12px;color:#2C2420;letter-spacing:.02em}
.ss-cancel{margin-top:6px;text-align:center;font-size:15px;color:#8A7A66;padding:10px 0 2px;cursor:pointer}
.ss-cancel:active{color:#96693E}

/* === 通用层（海报选择 / 预览 / 二维码） === */
.ss-layer{position:fixed;inset:0;z-index:12100;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(20,16,12,.62);padding:24px;box-sizing:border-box}
.ss-layer.show{display:flex}
.ss-layer-hd{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;
  color:#FCF9F3;font-size:15px;margin-bottom:12px}
.ss-layer-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;
  color:#FCF9F3;cursor:pointer;opacity:.85}
.ss-layer-close:active{opacity:1}
.ss-layer-tip{color:rgba(252,249,243,.72);font-size:12px;margin-top:14px;text-align:center;line-height:1.6}

/* 海报选择：3列网格 */
.ss-poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px;
  max-height:56vh;overflow-y:auto;padding:2px}
.ss-poster-cell{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:2px solid transparent;
  background:rgba(252,249,243,.08);cursor:pointer}
.ss-poster-cell img{width:100%;height:100%;object-fit:cover;display:block}
.ss-poster-cell.on{border-color:#C49A6C}

/* 海报预览 */
.ss-viewer .ss-view-box{max-width:82vw;max-height:70vh;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.ss-view-box img{display:block;max-width:82vw;max-height:70vh;object-fit:contain}
.ss-view-tip{color:#FCF9F3;font-size:13px;margin-top:16px;text-align:center}
.ss-view-dl{display:inline-block;margin-top:12px;padding:8px 22px;border:1px solid rgba(252,249,243,.5);
  border-radius:20px;color:#FCF9F3;font-size:13px;text-decoration:none}
.ss-view-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px}

/* 二维码 */
.ss-qr-box{background:#FCF9F3;padding:14px;border-radius:12px;line-height:0}
.ss-qr-box img{width:190px;height:190px;display:block}

/* === 微信引导蒙层（点右上角胶囊） === */
.ss-guide{position:fixed;inset:0;z-index:12200;background:rgba(0,0,0,.78);display:none;flex-direction:column;align-items:flex-end}
.ss-guide.show{display:flex}
.ss-guide-arrow{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;
  border-bottom:22px solid rgba(252,249,243,.92);margin-right:50px;margin-top:calc(env(safe-area-inset-top) + 8px);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));animation:ssBounce .8s ease-in-out infinite}
@keyframes ssBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ss-guide-txt{width:100%;text-align:center;padding:0 32px;margin-top:24px}
.ss-guide-tt{color:#FCF9F3;font-size:17px;font-weight:600;margin-bottom:8px}
.ss-guide-sub{color:rgba(252,249,243,.8);font-size:14px;line-height:1.6}
.ss-guide-ok{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  padding:10px 36px;border:1px solid rgba(252,249,243,.3);border-radius:24px;color:#FCF9F3;font-size:14px;cursor:pointer}

/* === 触发按钮 === */
/* 宿主页可把按钮移入评论组件悬浮钮组(.pl-dock)共用 .pl-fab 定位；
   emoji📣 彩色已醒目，再补一层暖棕淡底圈 + 描边，使其在「无底色」的点赞/评论钮中更突出；
   评论组件未渲染(is-alone)时兜底：自带尺寸与定位，对齐按钮组左下角 */
/* 沿用 .pl-fab 的「纯图标无底色」风格与点赞/评论保持一致；为在其中突出分享入口，
   给图标加缓慢呼吸的暖金光晕（2.8s 一呼一吸，与暖棕主题同色系，柔和不刺眼） */
/* 呼吸暖金光晕 + 向外扩散的「雷达光环」，让分享入口持续微动、吸引注意
   （只做光晕/光环，不加深色底色，保持清爽；光环用 ::after，不与 .pl-fab 的 hover/active 位移冲突） */
/* 让分享入口明显"动起来"：①图标心跳缩放(ssBeat) ②向外扩散光环(ssPing) ③呼吸光晕(ssBreath)
   缩放只作用在 svg 上，不与 .pl-fab 的 hover/active 位移冲突；光环用 ::after，不加深色底色，保持清爽 */
@keyframes ssBeat{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.18)}
}
@keyframes ssPing{
  0%  {box-shadow:0 0 0 0 rgba(255,190,80,.7);opacity:1}
  70% {box-shadow:0 0 0 18px rgba(255,190,80,0);opacity:0}
  100%{box-shadow:0 0 0 0 rgba(255,190,80,0);opacity:0}
}
@keyframes ssBreath{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,200,120,.4)) drop-shadow(0 1px 2px rgba(44,36,32,.2))}
  50%    {filter:drop-shadow(0 0 12px rgba(255,185,70,1)) drop-shadow(0 1px 3px rgba(44,36,32,.26))}
}
.ss-fab{color:#96693E;animation:ssBreath 2.4s ease-in-out infinite}
.ss-fab svg{transform-origin:center;animation:ssBeat 2.4s ease-in-out infinite}
.ss-fab::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:ssPing 2.4s ease-out infinite}
/* 用户明确要求分享按钮"动起来"，故即便系统开启「减弱动态效果」也保留柔和动效：
   去掉扩散光环（最易引发不适），保留光晕呼吸 + 图标轻微缩放，并放慢节奏降低干扰 */
@media (prefers-reduced-motion:reduce){
  .ss-fab{animation:ssBreath 3.4s ease-in-out infinite}
  .ss-fab svg{animation:ssBeat 3.4s ease-in-out infinite}
  .ss-fab::after{display:none}
}
.ss-fab.is-alone{position:fixed;left:372px;bottom:200px;z-index:200;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ss-fab.is-alone svg{width:24px;height:24px}
@media (max-width:768px){.ss-fab.is-alone{left:auto;right:12px;bottom:200px}}
@media (max-width:480px){.ss-fab.is-alone{width:40px;height:40px}.ss-fab.is-alone svg{width:18px;height:18px}}
@media print{.ss-fab{display:none!important}}

/* === 分享数角标（2026-09-03 新增，与评论组件 .pl-badge 同款；组件自带不依赖宿主页） ===
   宿主触发钮多为 .pl-fab（已 position:relative）；非定位元素由 JS 兜底补 position:relative */
.ss-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:linear-gradient(135deg,#B07D56,#96693E);color:#fff;font-size:10px;line-height:16px;text-align:center;
  font-weight:600;box-shadow:0 2px 6px rgba(150,105,62,.45);pointer-events:none;z-index:1}
.ss-badge.is-zero{display:none}

/* === toast === */
.ss-toast{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);
  z-index:12300;max-width:80vw;padding:10px 18px;border-radius:8px;background:rgba(28,22,18,.88);color:#FCF9F3;
  font-size:13px;line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:.22s}
.ss-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:768px){
  .ss-item{width:64px}
  .ss-ico{width:44px;height:44px}
}
@media (max-width:480px){
  .ss-items{justify-content:space-between}
  .ss-item{width:auto;flex:1 1 0}
  .ss-poster-grid{gap:8px}
}