/* ========== Floating Toolbar (右侧快捷咨询) — ywx-mould-one ========== */

.floating-toolbar {

    --ywx-floating-primary: var(--ywx-theme-color, #e87a2e);

    --ywx-floating-primary-deep: color-mix(in srgb, var(--ywx-floating-primary) 78%, #000);

    position: fixed;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10100;

    display: flex;

    flex-direction: column;

    gap: 0;

    border-radius: 28px;

    overflow: visible;

    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.12);

    pointer-events: none;

}



.floating-toolbar__item {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    cursor: pointer;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    border: none;

    padding: 0;

    font: inherit;

    pointer-events: auto;

    overflow: visible;

}



.floating-toolbar__item--whatsapp {

    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

}

.floating-toolbar__item--whatsapp:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);

}



.floating-toolbar__item--wechat {

    background: linear-gradient(135deg, #07c160 0%, #059a4c 100%);

}

.floating-toolbar__item--wechat:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px rgba(7, 193, 96, 0.38);

}



.floating-toolbar__item--wecom {

    background: linear-gradient(135deg, #2f7deb 0%, #1e5fc4 100%);

}

.floating-toolbar__item--wecom:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px rgba(47, 125, 235, 0.38);

}



.floating-toolbar__item--email {

    background: linear-gradient(135deg, var(--ywx-floating-primary) 0%, var(--ywx-floating-primary-deep) 100%);

}

.floating-toolbar__item--email:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px color-mix(in srgb, var(--ywx-floating-primary) 42%, transparent);

}



.floating-toolbar__item--inquiry {

    background: linear-gradient(

        135deg,

        color-mix(in srgb, var(--ywx-floating-primary) 72%, #fff) 0%,

        var(--ywx-floating-primary-deep) 100%

    );

}

.floating-toolbar__item--inquiry:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px color-mix(in srgb, var(--ywx-floating-primary) 38%, transparent);

}



.floating-toolbar__item--top {

    background: linear-gradient(135deg, #606060 0%, #404040 100%);

    border-radius: 0 0 28px 28px;

}

.floating-toolbar__item--top:hover {

    transform: scale(1.08);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}



.floating-toolbar__item--whatsapp:first-child {

    border-radius: 28px 28px 0 0;

}



/* 左侧同色 pill 悬停提示 */

.floating-toolbar__pill {

    position: absolute;

    right: calc(100% - 6px);

    top: 50%;

    transform: translateY(-50%) translateX(8px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;

    z-index: 2;

}



.floating-toolbar__pill-text {

    display: block;

    padding: 10px 18px;

    border-radius: 999px;

    background: inherit;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    line-height: 1.2;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.floating-toolbar__item--whatsapp .floating-toolbar__pill-text {

    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

}

.floating-toolbar__item--wechat .floating-toolbar__pill-text {

    background: linear-gradient(135deg, #07c160 0%, #059a4c 100%);

}

.floating-toolbar__item--wecom .floating-toolbar__pill-text {

    background: linear-gradient(135deg, #2f7deb 0%, #1e5fc4 100%);

}

.floating-toolbar__item--email .floating-toolbar__pill-text {

    background: linear-gradient(135deg, var(--ywx-floating-primary) 0%, var(--ywx-floating-primary-deep) 100%);

}

.floating-toolbar__item--inquiry .floating-toolbar__pill-text {

    background: linear-gradient(

        135deg,

        color-mix(in srgb, var(--ywx-floating-primary) 72%, #fff) 0%,

        var(--ywx-floating-primary-deep) 100%

    );

}



.floating-toolbar__item:hover .floating-toolbar__pill,

.floating-toolbar__item:focus-within .floating-toolbar__pill {

    opacity: 1;

    visibility: visible;

    transform: translateY(-50%) translateX(0);

}



.floating-toolbar__item--has-qr .floating-toolbar__pill {

    pointer-events: auto;

}



.floating-toolbar__qr-pop {

    position: absolute;

    left: 50%;

    bottom: calc(100% + 10px);

    transform: translateX(-50%) translateY(6px);

    width: 132px;

    padding: 8px;

    border-radius: 10px;

    background: #fff;

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;

    z-index: 3;

}



.floating-toolbar__qr-pop img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 6px;

}



.floating-toolbar__item--has-qr:hover .floating-toolbar__qr-pop,

.floating-toolbar__item--has-qr:focus-within .floating-toolbar__qr-pop,

.floating-toolbar__pill:hover .floating-toolbar__qr-pop {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}



/* 兼容旧类名 */

.floating-toolbar__phone-hint {

    display: none !important;

}



@media (max-width: 1024px) and (min-width: 769px) {

    .floating-toolbar {

        top: auto;

        right: 15px;

        bottom: 25px;

        transform: none;

    }

    .floating-toolbar__item {

        width: 48px;

        height: 48px;

    }

    .floating-toolbar__pill {

        display: none;

    }

}



@media (max-width: 768px) {

    .floating-toolbar {

        left: 50%;

        right: auto;

        top: auto;

        bottom: 20px;

        transform: translateX(-50%);

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: center;

        gap: 8px;

        border-radius: 30px;

        padding: 8px 12px;

        background: transparent;

        backdrop-filter: none;

        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);

    }

    .floating-toolbar__item {

        width: 44px;

        height: 44px;

        border-radius: 50%;

    }

    .floating-toolbar__item--top {

        border-radius: 50%;

    }

    .floating-toolbar .sai-wdg-launcher.floating-toolbar__item--livechat {

        width: 44px !important;

        height: 44px !important;

        border-radius: 50%;

        background: linear-gradient(

            135deg,

            color-mix(in srgb, var(--ywx-floating-primary) 72%, #fff) 0%,

            var(--ywx-floating-primary-deep) 100%

        ) !important;

        box-shadow: none;

    }

    .floating-toolbar .sai-wdg-launcher.floating-toolbar__item--livechat img {

        width: 22px;

        height: 22px;

    }

    .floating-toolbar__pill {

        display: none;

    }

}

