/* ============================================================
   BitMall 右下角悬浮层 UI 重做（商城风格）
   作用域：.rollbar 悬浮菜单 / .back-top 回到顶部 / #ripro-cs-* 客服组件
   仅视觉层修改，不触碰任何 DOM 结构、链接、表单或 JS 钩子。
   依赖：在 main / ecommerce-theme / ripro-contrast-fix 之后加载。
   覆盖优先级：对 main.min.css（外部）与客服组件内联 <style> 均使用 !important。
   ============================================================ */

:root {
    --bm-fab-red: #FF4747;
    --bm-fab-red-dark: #FF6B6B;
    --bm-fab-red-deep: #E23B3B;
}

/* ---------- 1. 右下角悬浮菜单 .rollbar ---------- */
.rollbar .actions {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(20, 20, 40, .16) !important;
    border: 1px solid rgba(255, 71, 71, .08) !important;
}
.rollbar .actions li {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f1f5 !important;
}
.rollbar .actions li:last-child {
    border-bottom: none !important;
}
.rollbar .actions li > a {
    color: #5b6270 !important;
    width: 50px !important;
    padding: 11px 0 !important;
    display: block !important;
    text-align: center !important;
    transition: all .2s ease !important;
}
.rollbar .actions li > a i {
    font-size: 1.05rem !important;
    transition: transform .2s ease, color .2s ease !important;
}
.rollbar .actions li > a span {
    font-size: 11px !important;
    margin-top: 3px !important;
    display: block !important;
    line-height: 1.2 !important;
}
.rollbar .actions li > a:hover {
    color: var(--bm-fab-red) !important;
    background: rgba(255, 71, 71, .07) !important;
}
.rollbar .actions li > a:hover i {
    transform: scale(1.15) !important;
}

/* ---------- 2. 回到顶部 .back-top ---------- */
.back-top {
    width: 46px !important;
    height: 46px !important;
    background: var(--bm-fab-red) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(255, 71, 71, .35) !important;
    transition: all .25s ease !important;
}
.back-top i {
    font-size: 1.4rem !important;
    color: #fff !important;
}
.back-top:hover {
    background: var(--bm-fab-red-deep) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(255, 71, 71, .45) !important;
}

/* ---------- 3. 客服泡泡 + 对话框（紫蓝 → 商城红，统一视觉） ---------- */
#ripro-cs-bubble {
    background: linear-gradient(135deg, var(--bm-fab-red-dark) 0%, var(--bm-fab-red) 100%) !important;
    box-shadow: 0 6px 22px rgba(255, 71, 71, .45) !important;
}
#ripro-cs-bubble:hover {
    box-shadow: 0 8px 28px rgba(255, 71, 71, .6) !important;
}
.ripro-cs-bubble-badge {
    background: #fff !important;
    color: var(--bm-fab-red) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
}
.ripro-cs-header {
    background: linear-gradient(135deg, var(--bm-fab-red-dark) 0%, var(--bm-fab-red) 100%) !important;
}
.ripro-cs-message-user {
    background: var(--bm-fab-red) !important;
}
.ripro-cs-template-question:hover {
    background: var(--bm-fab-red) !important;
    border-color: var(--bm-fab-red) !important;
}
.ripro-cs-send-btn {
    background: var(--bm-fab-red) !important;
}
.ripro-cs-send-btn:not(:disabled):hover {
    background: var(--bm-fab-red-deep) !important;
}
.ripro-cs-message-input:focus {
    border-color: var(--bm-fab-red) !important;
    box-shadow: 0 0 0 2px rgba(255, 71, 71, .2) !important;
}

/* ---------- 4. 暗色模式适配（默认主题） ---------- */
html[data-bs-theme="dark"]:not(.apple-style-enabled) .rollbar .actions {
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .rollbar .actions li {
    background: #1b1f2a !important;
    border-bottom-color: rgba(255, 255, 255, .07) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .rollbar .actions li > a {
    color: #aeb6c2 !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .rollbar .actions li > a:hover {
    color: var(--bm-fab-red-dark) !important;
    background: rgba(255, 71, 71, .14) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .back-top {
    box-shadow: 0 8px 22px rgba(255, 71, 71, .3) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-dialog {
    background: #1b1f2a !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-templates {
    background: #161a23 !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-templates-header h4,
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-template-category h5 {
    color: #cdd3df !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-template-question {
    background: #222735 !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #c7cdd9 !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-message-system {
    background: #2a2f3d !important;
    color: #aeb6c2 !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-message-admin {
    background: #1f2a3a !important;
    color: #d6deea !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-input-area {
    background: #1b1f2a !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-message-input {
    background: #11141c !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #e6e9f0 !important;
}
html[data-bs-theme="dark"]:not(.apple-style-enabled) .ripro-cs-load-more-btn {
    background: #2a2f3d !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #c7cdd9 !important;
}