/**
 * Contact Floating Widget — Styles
 *
 * 令牌化重写（2.1.33）。三种后台样式共用一套令牌，改观感只改 §1。
 *
 * 图标上色说明（重要）：
 *   单色图标（phone / email / chat / back-to-top，标记类 .nbb2b-cw-stroke-icon）
 *   走 CSS mask 上色，颜色跟 currentColor 走。
 *   原来用的是
 *       filter: brightness(0) saturate(100%) drop-shadow(0 0 0 <主色>)
 *   ——这条压根不生效：brightness(0) 先把图标压成纯黑，drop-shadow 的
 *   偏移和模糊都是 0，投影正好落在不透明图形背后，什么也看不见。
 *   实测悬停时图标一直是黑的，"悬停变主色"从来没实现过。
 *
 *   品牌图标（WhatsApp / WeChat / Facebook）是多色的，不能 mask，
 *   保留原样；style2 / style3 需要它们变白时仍用 filter: invert。
 *
 * @package Cxb_B2B_Product_Showcase
 */

/* ==========================================================================
   1. 设计令牌
   挂在组件根节点上，不污染主题。--cw-accent 由 PHP 的
   wp_add_inline_style() 按后台「全局主色」注入。
   ========================================================================== */

.nbb2b-contact-widget {
    --cw-size: 44px;              /* 按钮边长 */
    --cw-icon: 22px;              /* 图标边长 */
    --cw-radius: 14px;
    --cw-radius-item: 10px;

    --cw-accent: var(--cxb-primary-color, #0A7AFF);
    --cw-ink: #475569;            /* 图标静止色 */
    --cw-ink-strong: #0f172a;
    --cw-surface: rgba(255, 255, 255, 0.92);
    --cw-hairline: rgba(15, 23, 42, 0.08);

    --cw-tip-bg: #0f172a;
    --cw-tip-ink: #ffffff;

    /* 分层阴影：近距投影给形状，远距投影给景深 */
    --cw-elev:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px -8px rgba(15, 23, 42, 0.22);
    --cw-elev-hover:
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 16px 36px -12px rgba(15, 23, 42, 0.34);

    --cw-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --cw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cw-dur: 0.2s;
    --cw-dur-slow: 0.3s;
}

/* ==========================================================================
   2. 容器
   ========================================================================== */

.nbb2b-contact-widget {
    position: fixed;
    top: 50%;
    z-index: 99999;
    transform: translateY(-50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: var(--cw-surface);
    /* 毛玻璃：浮窗压在页面内容上，半透明底加模糊比纯色底更容易看出层级 */
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--cw-hairline);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-elev);
    overflow: visible;
    transition: box-shadow var(--cw-dur-slow) var(--cw-ease-out);
}

.nbb2b-contact-widget:hover {
    box-shadow: var(--cw-elev-hover);
}

/* 贴边时只圆内侧两角，贴住屏幕那一侧切平 */
.nbb2b-contact-widget.nbb2b-cw-right {
    right: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-left {
    left: 0;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ==========================================================================
   3. 按钮
   ========================================================================== */

.nbb2b-cw-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cw-size);
    height: var(--cw-size);
    border-radius: var(--cw-radius-item);
    /* mask 上色读的就是这里，所以按钮的 color 就是图标的颜色 */
    color: var(--cw-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--cw-dur) var(--cw-ease),
        color var(--cw-dur) var(--cw-ease),
        transform var(--cw-dur) var(--cw-ease-out);
}

/* 原来相邻按钮之间是一条 1px #d0d0d0 实线，整列读起来像表格行。
   改成留白分隔，只在按钮之间保留一条极淡的发丝线。 */
.nbb2b-cw-item + .nbb2b-cw-item {
    margin-top: 2px;
    border-top: 0;
}

.nbb2b-cw-item + .nbb2b-cw-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: var(--cw-hairline);
}

.nbb2b-cw-item:hover {
    background-color: color-mix(in srgb, var(--cw-accent) 10%, transparent);
    color: var(--cw-accent);
}

/* 按下时轻微回落，给点击一个真实的触感 */
.nbb2b-cw-item:active {
    transform: scale(0.94);
    transition-duration: 0.08s;
}

.nbb2b-cw-item:focus-visible {
    outline: none;
    color: var(--cw-accent);
    background-color: color-mix(in srgb, var(--cw-accent) 10%, transparent);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px color-mix(in srgb, var(--cw-accent) 55%, transparent);
}

/* ==========================================================================
   4. 图标
   ========================================================================== */

.nbb2b-cw-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cw-icon);
    height: var(--cw-icon);
    transition: transform var(--cw-dur) var(--cw-ease-out);
}

.nbb2b-cw-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 其他社交媒体按钮：图标是内联 <svg>（品牌色写在标记里，不走 mask），
   按钮本身是 <a>，要挡住主题给链接加的下划线和颜色。 */
.nbb2b-cw-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nbb2b-cw-item.nbb2b-cw-social,
.nbb2b-cw-item.nbb2b-cw-social:hover,
.nbb2b-cw-item.nbb2b-cw-social:focus {
    text-decoration: none;
    box-shadow: none;
}

.nbb2b-cw-item.nbb2b-cw-social:focus-visible {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px color-mix(in srgb, var(--cw-accent) 55%, transparent);
}

/* 悬停放大：原来是 1.18，40px 按钮里 26px 图标放大后几乎顶到边缘。
   收到 1.12，配合按钮底色变化已经够明确。 */
.nbb2b-cw-item:hover .nbb2b-cw-icon,
.nbb2b-cw-item:focus-visible .nbb2b-cw-icon {
    transform: scale(1.12);
}

/* --- 单色图标：mask 上色 ---
   遮罩用内联 data-URI，stroke 写死成 %23000。这一点是关键：
   资源里的 contact-*.svg 用的是 stroke="currentColor"，而从 CSS 引用的
   外部 SVG 没有颜色上下文，currentColor 解析不出可见颜色，遮罩是空的，
   图标会整个消失（第一版就踩了这个坑，按钮全是空白）。
   
   聊天图标不走这条路：chat-icon.svg 里有打字动画和右上角的绿色在线点，
   mask 只取 alpha，会把动画和配色一起抹掉，所以它保留成活的 <img>。
   
   不支持 mask 的浏览器整段不生效，退回原来的黑色 <img>，不会开天窗。 */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .nbb2b-cw-item[data-type="phone"] .nbb2b-cw-icon,
    .nbb2b-cw-item[data-type="email"] .nbb2b-cw-icon,
    .nbb2b-cw-item.nbb2b-cw-backtop .nbb2b-cw-icon {
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .nbb2b-cw-item[data-type="phone"] .nbb2b-cw-icon > img,
    .nbb2b-cw-item[data-type="email"] .nbb2b-cw-icon > img,
    .nbb2b-cw-item.nbb2b-cw-backtop .nbb2b-cw-icon > img {
        visibility: hidden;
    }

    .nbb2b-cw-item[data-type="phone"] .nbb2b-cw-icon {
        -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
        mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
    }

    .nbb2b-cw-item[data-type="email"] .nbb2b-cw-icon {
        -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
        mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
    }

    .nbb2b-cw-item.nbb2b-cw-backtop .nbb2b-cw-icon {
        -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>");
        mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>");
    }
}

/* 聊天图标本身留白比其他图标多，放大一档才和同列图标视觉等大 */
.nbb2b-cw-item[data-type="chat"] .nbb2b-cw-icon {
    width: calc(var(--cw-icon) + 4px);
    height: calc(var(--cw-icon) + 4px);
}

/* ==========================================================================
   5. 提示气泡
   ========================================================================== */

.nbb2b-cw-tooltip {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    background: var(--cw-tip-bg);
    color: var(--cw-tip-ink);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 7px 11px;
    border-radius: 8px;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.45);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--cw-dur) var(--cw-ease),
        transform var(--cw-dur) var(--cw-ease-out),
        visibility var(--cw-dur);
    z-index: 100000;
}

/* 箭头用旋转的方块而不是 border 三角：方块能跟着气泡一起吃到 box-shadow
   和 border-radius，border 三角是实心色块，气泡有阴影时接缝会露白。 */
.nbb2b-cw-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: inherit;
    border-radius: 1.5px;
}

.nbb2b-cw-right .nbb2b-cw-tooltip {
    right: 100%;
    margin-right: 12px;
    transform: translateY(-50%) translateX(6px);
}

.nbb2b-cw-right .nbb2b-cw-tooltip::after {
    left: 100%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.nbb2b-cw-left .nbb2b-cw-tooltip {
    left: 100%;
    margin-left: 12px;
    transform: translateY(-50%) translateX(-6px);
}

.nbb2b-cw-left .nbb2b-cw-tooltip::after {
    right: 100%;
    transform: translate(50%, -50%) rotate(45deg);
}

.nbb2b-cw-item:hover .nbb2b-cw-tooltip,
.nbb2b-cw-item:focus-visible .nbb2b-cw-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 有二维码浮层的项不再另出小气泡，两者不同时出现 */
.nbb2b-cw-item.nbb2b-cw-has-popup .nbb2b-cw-tooltip {
    display: none;
}

/* ==========================================================================
   6. 返回顶部
   ========================================================================== */

.nbb2b-cw-item.nbb2b-cw-backtop {
    display: none;
}

.nbb2b-cw-item.nbb2b-cw-backtop.nbb2b-cw-visible {
    display: flex;
    /* 出现时上浮淡入，而不是直接闪现 */
    animation: nbb2b-cw-pop var(--cw-dur-slow) var(--cw-ease-out);
}

@keyframes nbb2b-cw-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. 二维码浮层
   ========================================================================== */

.nbb2b-cw-popup {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    transform-origin: center;
    background: #fff;
    border: 1px solid var(--cw-hairline);
    border-radius: 14px;
    box-shadow:
        0 4px 8px -2px rgba(15, 23, 42, 0.08),
        0 24px 48px -16px rgba(15, 23, 42, 0.3);
    padding: 14px;
    min-width: 186px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--cw-dur) var(--cw-ease),
        transform var(--cw-dur-slow) var(--cw-ease-out),
        visibility var(--cw-dur);
    z-index: 100000;
}

.nbb2b-cw-right .nbb2b-cw-popup {
    right: 100%;
    margin-right: 14px;
}

.nbb2b-cw-left .nbb2b-cw-popup {
    left: 100%;
    margin-left: 14px;
}

.nbb2b-cw-item:hover .nbb2b-cw-popup,
.nbb2b-cw-item:focus-within .nbb2b-cw-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.nbb2b-cw-popup::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid var(--cw-hairline);
    border-radius: 2px;
}

/* 只保留朝向图标那两条边框，另外两条会压在浮层上形成一道线 */
.nbb2b-cw-right .nbb2b-cw-popup::after {
    left: 100%;
    transform: translate(-60%, -50%) rotate(45deg);
    border-left: 0;
    border-bottom: 0;
}

.nbb2b-cw-left .nbb2b-cw-popup::after {
    right: 100%;
    transform: translate(60%, -50%) rotate(45deg);
    border-right: 0;
    border-top: 0;
}

.nbb2b-cw-popup-label {
    font-size: 13px;
    font-weight: 650;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #07C160;
}

.nbb2b-cw-popup--whatsapp .nbb2b-cw-popup-label {
    color: #25D366;
}

.nbb2b-cw-popup-img {
    width: 158px;
    height: 158px;
    margin: 0 auto 10px;
    display: block;
    padding: 6px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cw-hairline);
}

.nbb2b-cw-popup-account {
    font-size: 12px;
    font-weight: 500;
    color: var(--cw-ink);
    margin: 0;
    word-break: break-all;
    line-height: 1.45;
}

/* ==========================================================================
   8. 离边模式（后台设置了水平边距）
   ========================================================================== */

.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-left {
    border: 1px solid var(--cw-hairline);
    border-radius: var(--cw-radius);
}

/* ==========================================================================
   9. 移动端
   原来在手机上把按钮从 40px 缩到 36px —— 方向反了：触摸目标应该更大。
   这里放到 46px，高于 iOS HIG 的 44pt 和 Material 的 48dp 下限。
   ========================================================================== */

@media (max-width: 768px) {
    .nbb2b-contact-widget {
        --cw-size: 46px;
        --cw-icon: 23px;
        padding: 3px;
    }

    /* 手机没有 hover，气泡靠 :active 也只闪一下，直接不出，
       靠图标本身表意；点开的动作由 JS 处理。 */
    .nbb2b-cw-tooltip {
        display: none;
    }

    .nbb2b-cw-popup {
        min-width: 168px;
        padding: 12px;
    }

    .nbb2b-cw-popup-img {
        width: 140px;
        height: 140px;
    }
}

/* ==========================================================================
   10. Style 2 — 方形按钮 + 侧滑标签
   
   稳定性说明（沿用原实现）：按钮是 hover 目标，绝不做 transform。
   只有标签动，且标签 pointer-events:none。之前按钮自己滑动会不断
   滑出光标导致 :hover 反复丢失，出现抖动。
   ========================================================================== */

.nbb2b-contact-widget.nbb2b-cw-style2 {
    padding: 0;
    gap: 1px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.nbb2b-contact-widget.nbb2b-cw-style2:hover {
    box-shadow: none;
}

.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-left,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-floating.nbb2b-cw-left {
    border: 0;
    border-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item {
    width: var(--cw-size);
    height: var(--cw-size);
    margin-top: 0;
    color: #ffffff;
    border-radius: 0 !important;
    transform: none !important;
    overflow: visible;
    z-index: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item::before {
    display: none;
}

/* 悬停时压暗按钮本身：inset 阴影不影响白色图标，也不依赖底色具体是什么 */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:hover,
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:focus-visible {
    color: #ffffff;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.14);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.24);
}

/* 品牌多色图标转白；单色图标已经由 mask + color:#fff 变白 */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-icon img {
    filter: brightness(0) invert(1);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:hover .nbb2b-cw-icon {
    transform: none;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-tooltip {
    top: 0;
    height: var(--cw-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 16px;
    background: var(--cw-tip-bg);
    color: var(--cw-tip-ink);
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition:
        opacity var(--cw-dur-slow) var(--cw-ease),
        transform var(--cw-dur-slow) var(--cw-ease-out),
        visibility var(--cw-dur-slow);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-tooltip::after {
    display: none;
}

.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-right .nbb2b-cw-tooltip {
    right: 100%;
    left: auto;
    transform: translateX(14px);
}

.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-left .nbb2b-cw-tooltip {
    left: 100%;
    right: auto;
    transform: translateX(-14px);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:hover .nbb2b-cw-tooltip,
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:focus-visible .nbb2b-cw-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item.nbb2b-cw-has-popup .nbb2b-cw-tooltip,
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-backtop .nbb2b-cw-tooltip {
    display: none;
}

/* ==========================================================================
   11. Style 3 — 圆形按钮
   ========================================================================== */

.nbb2b-contact-widget.nbb2b-cw-style3 {
    padding: 0;
    gap: 8px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.nbb2b-contact-widget.nbb2b-cw-style3:hover {
    box-shadow: none;
}

.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-left,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-floating.nbb2b-cw-left {
    border: 0;
    border-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item {
    width: var(--cw-size);
    height: var(--cw-size);
    margin-top: 0;
    color: #ffffff;
    border-radius: 50% !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.12),
        0 8px 20px -8px rgba(15, 23, 42, 0.35);
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item::before {
    display: none;
}

/* 圆形按钮各自独立，悬停上浮 + 加深投影比变底色更贴合这套语言 */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:hover,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:focus-visible {
    color: #ffffff;
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.14),
        0 14px 28px -10px rgba(15, 23, 42, 0.45);
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:active {
    transform: translateY(0) scale(0.96);
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-icon img {
    filter: brightness(0) invert(1);
}

/* 品牌色例外：这些按钮不跟随后台主色。
   带 :hover 变体是因为内联动态 CSS 里有一条同名的 :hover 规则会覆盖。 */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="whatsapp"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="whatsapp"]:hover {
    background-color: #25D366;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="wechat"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="wechat"]:hover {
    background-color: #07C160;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="facebook"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="facebook"]:hover {
    background-color: #1877F2;
}

/* ==========================================================================
   12. 无障碍与降级
   ========================================================================== */

/* 降低动效偏好：保留状态色变化，去掉位移、缩放与出场动画 */
@media (prefers-reduced-motion: reduce) {
    .nbb2b-contact-widget,
    .nbb2b-contact-widget * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .nbb2b-cw-item:hover .nbb2b-cw-icon,
    .nbb2b-cw-item:active,
    .nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:hover {
        transform: none;
    }
}

/* 高对比度模式：毛玻璃和淡色底在这里都会被系统换掉，
   显式给出边框，免得按钮糊成一片。 */
@media (forced-colors: active) {
    .nbb2b-contact-widget,
    .nbb2b-cw-item {
        border: 1px solid CanvasText;
    }

    .nbb2b-cw-item:hover,
    .nbb2b-cw-item:focus-visible {
        background: Highlight;
        color: HighlightText;
    }
}

@media print {
    .nbb2b-contact-widget {
        display: none !important;
    }
}

/* ==========================================================================
   其他社交媒体图标在样式二 / 样式三下的表现

   这些图标是内联 <svg>，结构是「品牌色圆角方块 + 字形」。样式一保留原样，
   与 WhatsApp / Facebook / 微信 的全彩品牌图标一致。

   样式二和样式三里，按钮本身已经有底色（样式二跟随后台主色，样式三是品牌
   色圆形），方块底色再画一遍会变成圆里套方。这里统一把方块藏掉，只留字形
   并转成白色，与其它按钮的白色透明图标一致。字形在 24 的画布里只占一半左
   右，去掉方块后要放大一点才和别的图标视觉等大。
   ========================================================================== */

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-icon svg .cxb-social-tile,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-icon svg .cxb-social-tile {
    display: none;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-icon svg .cxb-social-glyph,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-icon svg .cxb-social-glyph {
    fill: #ffffff;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-icon svg .cxb-social-stroke,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-icon svg .cxb-social-stroke {
    stroke: #ffffff;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item[data-type="social"] .nbb2b-cw-icon svg,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="social"] .nbb2b-cw-icon svg {
    transform: scale(1.55);
}

/* YouTube 去掉方块后只剩一个播放三角，比其它字形小得多，单独多放大一档。 */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item[data-social="youtube"] .nbb2b-cw-icon svg,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="youtube"] .nbb2b-cw-icon svg {
    transform: scale(2.3);
}

/* 样式三：按钮底色用各平台自己的品牌色，不跟随后台主色。
   带 :hover 变体的原因同上方 WhatsApp / 微信 / Facebook 那几条：
   内联动态 CSS 里有一条同名的 :hover 规则会覆盖。 */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="instagram"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="instagram"]:hover {
    background-color: #E4405F;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="x"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="x"]:hover {
    background-color: #000000;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="telegram"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="telegram"]:hover {
    background-color: #26A5E4;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="youtube"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="youtube"]:hover {
    background-color: #FF0000;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="tiktok"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="tiktok"]:hover {
    background-color: #010101;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="linkedin"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="linkedin"]:hover {
    background-color: #0A66C2;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="line"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="line"]:hover {
    background-color: #06C755;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="kakaotalk"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="kakaotalk"]:hover {
    background-color: #FEE500;
}

.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="vk"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="vk"]:hover {
    background-color: #0077FF;
}

/* KakaoTalk 的品牌色是亮黄，白色字形在上面看不清，字形保持品牌深棕。 */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-social="kakaotalk"] .nbb2b-cw-icon svg .cxb-social-glyph {
    fill: #3C1E1E;
}