/* ========================================================================
   可复用组件
   在多个区块都会用到的元素：按钮、玻璃球、「真人认证」徽章、
   头像、聊天气泡、悬浮帮助按钮，以及它们共用的动画。
   ======================================================================== */

/* ---- 按钮：btn-dusk 深色实心 / btn-glass 玻璃 / btn-light 浅色实心 / btn-line 描边 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 22px;border-radius:15px;border:1px solid transparent;font:500 15px/1 var(--f-sans);text-decoration:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.btn-dusk{background:var(--dusk-ink);color:#fff8fb}
.btn-glass{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.75);color:var(--dusk-ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-light{background:var(--ink);color:var(--night)}
.btn-line{border-color:var(--line-2);color:var(--ink)}

/* ---- 玻璃球装饰（关于、主要特点、下载区） ---- */
.orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.28) 13%,rgba(242,164,182,.16) 44%,rgba(195,174,242,.34) 80%,rgba(255,255,255,.55) 100%);
  box-shadow:inset -10px -14px 30px rgba(195,174,242,.35),inset 6px 8px 20px rgba(255,255,255,.28),0 24px 60px -12px rgba(242,164,182,.35)}

/* ---- 「真人认证」徽章（首屏卡片、博主卡片） ---- */
.vbadge{position:absolute;z-index:2;top:calc(var(--f) * .05);left:calc(var(--f) * .05);display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 7px;border-radius:999px;background:rgba(20,10,30,.42);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:12px;line-height:1;white-space:nowrap}
.vbadge svg{width:14px;height:14px;flex:none;color:#bfe3cc;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 圆形渐变头像（手机示意图、帮助按钮） ---- */
.avatar{width:36px;height:36px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#ffe3ea,#f2a4b6 45%,#9a7fd6)}

/* ---- 聊天气泡：.me 我方（右、粉色）/ .them 对方（左、灰色）/ .typing 输入中 ---- */
.b{max-width:82%;margin:0;padding:9px 12px;border-radius:16px}
.b.me{align-self:flex-end;background:linear-gradient(135deg,#f5b3c2,#e58aa1);color:#2a1030;border-bottom-right-radius:6px}
.b.them{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid var(--line);border-bottom-left-radius:6px}
.typing{display:inline-flex;gap:4px;align-self:flex-start;padding:12px 14px;border-radius:16px;border-bottom-left-radius:6px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

/* ---- 右下角悬浮「需要帮助？」按钮（显示时机见 js/modules/scroll-story.js） ---- */
.help{position:fixed;z-index:30;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(20,13,34,.85);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s,transform .4s}
.help.show{opacity:1;transform:none;pointer-events:auto}
.help .avatar{width:28px;height:28px}

/* ---- 共用动画：玻璃球上下漂浮 / 输入中圆点闪烁 ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}