/* Social Chat Widget — floating brand buttons */
.social-chat-floater {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 999;
    transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.social-chat-bottom-right {
    right: 20px;
    bottom: 88px;
    align-items: flex-end;
}

.social-chat-bottom-left {
    left: 20px;
    bottom: 88px;
    align-items: flex-start;
}

.social-chat-floater.is-tucked {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(.85);
}

/* Anchor: entrance + hover lift */
.social-chat-btn {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    animation: social-chat-in .6s cubic-bezier(.34, 1.56, .64, 1) var(--social-chat-delay, 0ms) backwards;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.social-chat-btn:hover,
.social-chat-btn:focus-visible {
    transform: translateY(-4px) scale(1.08);
    outline: none;
}

.social-chat-btn:active {
    transform: translateY(0) scale(.94);
}

/* Bubble: brand circle + idle float */
.social-chat-bubble {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    background: var(--social-chat-bg);
    box-shadow: 0 10px 24px -6px var(--social-chat-glow), 0 2px 6px rgba(0, 0, 0, .12);
    animation: social-chat-float 4.5s ease-in-out 1.2s infinite;
    transition: box-shadow .35s ease, filter .35s ease;
}

.social-chat-btn:hover .social-chat-bubble,
.social-chat-btn:focus-visible .social-chat-bubble {
    animation-play-state: paused;
    filter: brightness(1.08) saturate(1.1);
    box-shadow: 0 18px 34px -8px var(--social-chat-glow), 0 4px 10px rgba(0, 0, 0, .14);
}

/* Expanding halo */
.social-chat-ring {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--social-chat-bg);
    animation: social-chat-ring 2.6s cubic-bezier(.22, .61, .36, 1) var(--social-chat-delay, 0ms) infinite;
    pointer-events: none;
}

.social-chat-btn:hover .social-chat-ring,
.social-chat-btn:focus-visible .social-chat-ring {
    animation-duration: 1.3s;
}

/* Icon: idle nudge + hover pop */
.social-chat-icon {
    display: flex;
    animation: social-chat-nudge 6s ease-in-out 2s infinite;
}

.social-chat-btn:hover .social-chat-icon,
.social-chat-btn:focus-visible .social-chat-icon {
    animation: social-chat-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

.social-chat-svg {
    width: 30px;
    height: 30px;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

/* Hover label */
.social-chat-label {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    background: rgba(17, 24, 39, .92);
    padding: 9px 14px;
    border-radius: 10px;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.social-chat-bottom-right .social-chat-label {
    right: calc(100% + 14px);
    transform: translateY(-50%) translateX(10px) scale(.9);
    transform-origin: right center;
}

.social-chat-bottom-left .social-chat-label {
    left: calc(100% + 14px);
    transform: translateY(-50%) translateX(-10px) scale(.9);
    transform-origin: left center;
}

.social-chat-btn:hover .social-chat-label,
.social-chat-btn:focus-visible .social-chat-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* Brand themes */
.social-chat-whatsapp {
    --social-chat-bg: linear-gradient(140deg, #4ce07d 0%, #25d366 45%, #0f9d58 100%);
    --social-chat-glow: rgba(37, 211, 102, .55);
}

.social-chat-messenger {
    --social-chat-bg: linear-gradient(140deg, #00b2ff 0%, #006aff 48%, #a033ff 100%);
    --social-chat-glow: rgba(0, 106, 255, .5);
}

@keyframes social-chat-in {
    0% { opacity: 0; transform: translateY(28px) scale(.4) rotate(-25deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes social-chat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes social-chat-ring {
    0% { opacity: .5; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.75); }
}

@keyframes social-chat-nudge {
    0%, 82%, 100% { transform: rotate(0) scale(1); }
    86% { transform: rotate(-14deg) scale(1.08); }
    90% { transform: rotate(12deg) scale(1.08); }
    94% { transform: rotate(-7deg) scale(1.04); }
}

@keyframes social-chat-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22) rotate(-8deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (max-width: 640px) {
    .social-chat-bottom-right { right: 16px; bottom: 84px; }
    .social-chat-bottom-left { left: 16px; bottom: 84px; }
    .social-chat-bubble { width: 50px; height: 50px; }
    .social-chat-svg { width: 27px; height: 27px; }
    .social-chat-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .social-chat-btn,
    .social-chat-bubble,
    .social-chat-icon,
    .social-chat-ring {
        animation: none !important;
    }
    .social-chat-ring { opacity: 0; }
}
