/**
 * Telegram 客服浮动入口（SupportContact::floatingButton()，2026-10-14）
 *
 * 主站（style.css）、订阅页（subscription.css）和帮助中心（help.php 自带的 <style>）都加载本表，
 * 只用这三处都定义了明暗两套值的 --sp-* 变量，明暗主题跟着页面走；Telegram 图标本身是固定品牌色。
 *
 * 形态与站内客服按钮（ChatWidget 的 #cw-btn）一致：贴右边缘的半胶囊，平时只露出
 * 46px 的图标，悬停 / 键盘聚焦时展开文字。收起靠 max-width + overflow 裁切，按钮本身
 * 始终在视口内，不会在手机上撑出横向滚动。位置避让：
 *   - 离底 88px 起：高于商品页手机吸底购买条 .sp-buybar（68px + 安全区）；
 *   - 登录用户有站内客服按钮（离底 88px、高 48px），Telegram 叠在它上方 146px；
 *   - z-index 990：盖过吸底购买条（900），低于订阅页批量操作条（999）和弹窗（1000），
 *     真重叠时让业务操作在上；站内客服面板打开时隐藏。
 */
.sp-tg-fab{
    position:fixed;
    right:env(safe-area-inset-right,0px);
    bottom:calc(88px + env(safe-area-inset-bottom,0px));
    z-index:990;
    display:flex;
    align-items:center;
    gap:9px;
    box-sizing:border-box;
    max-width:46px;
    height:48px;
    overflow:hidden;
    margin:0;
    padding:0 16px 0 9px;
    border:1px solid var(--sp-border-strong);
    border-right:0;
    border-radius:999px 0 0 999px;
    background:var(--sp-surface);
    color:var(--sp-text);
    box-shadow:var(--sp-shadow-sm);
    font-size:14px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    text-decoration:none;
    transition:max-width .22s ease,box-shadow .18s ease;
}
.sp-tg-fab:hover,
.sp-tg-fab:focus-visible{
    max-width:280px;
    color:var(--sp-text);
    text-decoration:none;
    box-shadow:var(--sp-shadow);
}
.sp-tg-fab:focus-visible{
    outline:2px solid var(--sp-primary);
    outline-offset:2px;
}
.sp-tg-fab[hidden]{display:none;}
.sp-tg-fab .sp-tg-icon{
    display:block;
    flex:0 0 auto;
    width:28px;
    height:28px;
}
.sp-tg-fab-text{color:inherit;}

/* 窄屏页脚让出按钮那一列：375px 下英文页脚换行，「Privacy Policy」一行的右端正好压在按钮下，
 * 滚到底也挪不开。右侧留出按钮宽度 46px + 8px 间隙（再加右侧安全区），页脚在按钮之外的区域里居中；
 * 登录用户的站内客服按钮露出部分同样 46px 宽、在同一列，叠几个按钮都一并让开，也不用在页尾垫高。
 * 只让右侧：两侧对称会把页脚的 Telegram 胶囊挤成两行。按钮被 iframe 守卫隐藏时不留白。 */
@media (max-width:768px){
    body:has(.sp-tg-fab:not([hidden])) > footer{
        padding-right:calc(54px + env(safe-area-inset-right,0px));
    }
}

/* 登录用户：站内客服按钮在 88px，Telegram 让到它上方（#cw-btn 先于本按钮输出） */
#cw-btn ~ .sp-tg-fab{bottom:calc(146px + env(safe-area-inset-bottom,0px));}
/* 站内客服面板打开时（桌面面板就在这一列上方，手机是全屏）不再露出 */
html.cw-panel-open .sp-tg-fab{display:none;}

@media (prefers-reduced-motion:reduce){
    .sp-tg-fab{transition:none;}
}
@media print{
    .sp-tg-fab{display:none !important;}
}