.mfb-floating-shell {
    position: fixed;
    right: var(--mfb-right, 24px);
    bottom: var(--mfb-bottom, 24px);
    z-index: 999999;
}

.mfb-floating-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mfb-size, 64px);
    height: var(--mfb-size, 64px);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.mfb-floating-button:hover,
.mfb-floating-button:focus-visible {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 16px 26px rgba(44, 92, 255, 0.26));
}

.mfb-floating-button:focus-visible {
    outline: 2px solid rgba(74, 175, 255, 0.48);
    outline-offset: 4px;
    border-radius: 40%;
}

.mfb-logo {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 18px rgba(65, 96, 255, 0.2));
}

.mfb-has-pulse::before,
.mfb-has-pulse::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 50%, rgba(63, 144, 255, 0.22), rgba(194, 61, 223, 0.08));
    z-index: -1;
    animation: mfb-wave 3s ease-out infinite;
}

.mfb-has-pulse::after {
    animation-delay: 1.5s;
}

@keyframes mfb-wave {
    0% {
        opacity: 0.4;
        transform: scale(0.86);
    }

    68% {
        opacity: 0;
        transform: scale(1.34);
    }

    100% {
        opacity: 0;
        transform: scale(1.46);
    }
}

@media (max-width: 767px) {
    .mfb-floating-shell {
        right: max(4px, env(safe-area-inset-right));
        bottom: max(4px, env(safe-area-inset-bottom));
    }

    .mfb-floating-button {
        width: calc(var(--mfb-size, 64px) - 6px);
        height: calc(var(--mfb-size, 64px) - 6px);
    }
}