/* ============================================================
   反省墙 · 首页右侧悬浮气泡（挂在「数字西湖」气泡下方）
   ------------------------------------------------------------
   注入点：zb_users/theme/yd0819/template/footer.php（仅首页 index）
   目标页：/fanxing/  （反省墙 · 太上感应篇逐句自省录）

   为什么样式单独成文件：
   Z-Blog 模板引擎会把模板里的 { } 当作模板标签解析，
   内联 <style> 会让 `#id{...}` 被误判。独立静态文件可规避。

   关于 !important：
   两个气泡现在统一由 #side-bubbles 容器定位（flex 竖排），
   需要抵消 szxh-bubble.css 里 #szxh-bubble 自身的 fixed 定位。
   本文件在 szxh-bubble.css 之后加载，同 specificity 后进者胜；
   这里加 !important 是为了防止用户浏览器缓存了旧版 szxh-bubble.css
   导致错位。
   ============================================================ */

/* 两枚气泡的公共容器：整体垂直居中于右侧 */
#side-bubbles{
    position:fixed;
    right:0;
    top:50%;
    z-index:9990;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:14px;
    transform:translateY(-50%);
}

/* ---- 抵消「数字西湖」气泡自身的 fixed 定位，交给容器排版 ---- */
#szxh-bubble{
    position:static !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
}
#szxh-bubble:hover,
#szxh-bubble:focus{ transform:translateX(-5px) !important; }
#szxh-bubble:active{ transform:translateX(-2px) !important; }

/* ================= 反省墙 ================= */
#fxq-bubble{
    position:relative;
    display:block;
    width:56px;
    background:none;
    border:0;
    color:#fdf6ef;
    text-align:center;
    text-decoration:none;
    transition:transform .34s cubic-bezier(.2,.8,.24,1), filter .34s;
    -webkit-tap-highlight-color:transparent;
    outline:none;
}

/* 外晕：比西湖那枚更慢，像一点沉香 */
#fxq-bubble::before{
    content:"";
    position:absolute;
    right:-16px;
    top:-16px;
    bottom:-16px;
    left:-16px;
    border-radius:44px;
    background:radial-gradient(58% 46% at 76% 50%, rgba(156,58,46,.42), rgba(156,58,46,0) 72%);
    z-index:-1;
    animation:fxq-breath 5.2s ease-in-out infinite;
}

/* 气泡本体：朱砂，取自自省录页的批点色 */
#fxq-bubble .fxq-core{
    position:relative;
    z-index:1;
    display:block;
    padding:17px 0 15px;
    border-radius:28px 0 0 28px;
    background:linear-gradient(158deg,#c4694f 0%,#9c3a2e 46%,#6d2419 100%);
    box-shadow:
        0 8px 26px rgba(109,36,25,.30),
        inset 0 0 0 1px rgba(255,255,255,.20);
}

/* 顶部一枚铜镜（内联 SVG，见模板） */
#fxq-bubble .fxq-ico{
    display:block;
    width:15px;
    height:15px;
    margin:0 auto 10px;
    filter:drop-shadow(0 0 5px rgba(255,236,226,.55));
}

/* 竖排站名 */
#fxq-bubble .fxq-txt{
    display:inline-block;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:15px;
    font-weight:600;
    letter-spacing:5px;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.20);
}

#fxq-bubble:hover,
#fxq-bubble:focus{
    transform:translateX(-5px);
    filter:brightness(1.08);
    color:#ffffff;
}
#fxq-bubble:hover .fxq-core,
#fxq-bubble:focus .fxq-core{
    box-shadow:
        0 10px 32px rgba(109,36,25,.42),
        inset 0 0 0 1px rgba(255,255,255,.34);
}
#fxq-bubble:active{ transform:translateX(-2px); }

@keyframes fxq-breath{
    0%,100%{ opacity:.40; transform:scale(.94); }
    50%    { opacity:.90; transform:scale(1.08); }
}

/* 窄屏收敛，别挡正文 */
@media (max-width:768px){
    #side-bubbles{ gap:10px; }
    #fxq-bubble{ width:44px; }
    #fxq-bubble .fxq-core{ padding:13px 0 12px; border-radius:22px 0 0 22px; }
    #fxq-bubble .fxq-ico{ width:11px; height:11px; margin-bottom:8px; }
    #fxq-bubble .fxq-txt{ font-size:13px; letter-spacing:3px; }
    #fxq-bubble::before{ right:-10px; top:-10px; bottom:-10px; left:-10px; border-radius:34px; }
}

@media (prefers-reduced-motion:reduce){
    #fxq-bubble::before{ animation:none; opacity:.65; }
    #fxq-bubble{ transition:none; }
}