.ccfw-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 61, 107, 0.95), rgba(255, 140, 66, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 22px rgba(255, 61, 107, 0.25);
    transform: translateY(10px) scale(0.9);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, opacity 200ms ease;
    animation: ccfw-float 5.4s ease-in-out infinite;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ccfw-button.is-ready {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ccfw-button.is-bouncing {
    animation:
        ccfw-float 5.4s ease-in-out infinite,
        ccfw-bounce 940ms cubic-bezier(0.2, 0.92, 0.28, 1.34) 1;
}

.ccfw-button:hover,
.ccfw-button:focus-visible {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 20px 34px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 0 30px rgba(255, 61, 107, 0.42);
}

.ccfw-button img {
    width: 30px;
    height: 30px;
    display: block;
    position: relative;
    z-index: 2;
}

.ccfw-button__pulse {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
    z-index: 1;
}

.ccfw-button.is-nudging .ccfw-button__pulse {
    animation: ccfw-pulse 1.2s ease-out 2;
}

.ccfw-button::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: scale(0.88);
    pointer-events: none;
}

.ccfw-button.is-nudging::before {
    animation: ccfw-ring 1.2s ease-out 2;
}

.ccfw-button__text {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    color: #f0ede8;
    background: rgba(13, 16, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.46rem 0.8rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
    transition: opacity 220ms ease, transform 220ms ease;
}

.ccfw-button:hover .ccfw-button__text,
.ccfw-button:focus-visible .ccfw-button__text,
.ccfw-button.is-nudging .ccfw-button__text {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@keyframes ccfw-float {
    0%,
    100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.005); }
}

@keyframes ccfw-pulse {
    0% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes ccfw-ring {
    0% { opacity: 0.55; transform: scale(0.9); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes ccfw-bounce {
    0% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-4px) scale(1.02); }
    34% { transform: translateY(-16px) scale(1.08) rotate(-2deg); }
    46% { transform: translateY(0) scale(0.98) rotate(0deg); }
    60% { transform: translateY(-8px) scale(1.03) rotate(1.5deg); }
    74% { transform: translateY(0) scale(0.995) rotate(0deg); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .ccfw-button {
        right: 14px;
        bottom: 14px;
        width: 54px;
        height: 54px;
    }

    .ccfw-button__text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccfw-button,
    .ccfw-button::before,
    .ccfw-button__pulse,
    .ccfw-button__text {
        animation: none !important;
        transition: none !important;
    }
}