.slumens-whatsapp {
    --slumens-whatsapp-size: 3.75rem;
    position: fixed;
    bottom: max(var(--slumens-whatsapp-y, 24px), env(safe-area-inset-bottom));
    z-index: 8500;
    display: grid;
    justify-items: end;
    gap: .75rem;
    font-family: inherit;
}

.slumens-whatsapp--right { right: max(var(--slumens-whatsapp-x, 24px), env(safe-area-inset-right)); }
.slumens-whatsapp--left { left: max(var(--slumens-whatsapp-x, 24px), env(safe-area-inset-left)); justify-items: start; }

.slumens-whatsapp__launcher,
.slumens-whatsapp__cta {
    border: 0;
    background: #25d366;
    color: #081f10;
}

.slumens-whatsapp__launcher {
    width: var(--slumens-whatsapp-size);
    height: var(--slumens-whatsapp-size);
    display: grid;
    place-items: center;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 24%);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.slumens-whatsapp__launcher:hover,
.slumens-whatsapp__launcher:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 38px rgb(0 0 0 / 28%);
}

.slumens-whatsapp svg { width: 1.75rem; height: 1.75rem; }

.slumens-whatsapp__panel {
    position: relative;
    width: min(21rem, calc(100vw - 2rem));
    padding: 1.1rem;
    border: 1px solid var(--slumens-color-border, #dfe3e7);
    border-radius: var(--slumens-radius, 12px);
    background: var(--slumens-color-background, #fff);
    color: var(--slumens-color-text, #1b1e21);
    box-shadow: 0 20px 60px rgb(0 0 0 / 18%);
    transform-origin: bottom right;
    animation: slumens-whatsapp-in 180ms ease both;
}

.slumens-whatsapp--left .slumens-whatsapp__panel { transform-origin: bottom left; }
.slumens-whatsapp__panel[hidden] { display: none; }

.slumens-whatsapp__close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
}

.slumens-whatsapp__close:hover,
.slumens-whatsapp__close:focus-visible { background: var(--slumens-color-surface, #f5f6f7); }

.slumens-whatsapp__agent {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-right: 1.75rem;
}

.slumens-whatsapp__agent > div { display: grid; gap: .15rem; }
.slumens-whatsapp__agent strong { font-size: 1rem; line-height: 1.2; }

.slumens-whatsapp__photo {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 999px;
    object-fit: cover;
    background: #25d366;
}

.slumens-whatsapp__photo--fallback { display: grid; place-items: center; color: #081f10; }
.slumens-whatsapp__photo--fallback svg { width: 1.5rem; height: 1.5rem; }

.slumens-whatsapp__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--slumens-color-muted, #646b72);
    font-size: .82rem;
}

.slumens-whatsapp__status i {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #9a6500;
}

.slumens-whatsapp__status--open i { background: #25a65a; }
.slumens-whatsapp__message { margin: 1rem 0 .75rem; line-height: 1.5; }
.slumens-whatsapp__hours { margin: 0 0 .9rem; color: var(--slumens-color-muted, #646b72); font-size: .86rem; line-height: 1.4; }

.slumens-whatsapp__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 2.8rem;
    padding: .7rem 1rem;
    border-radius: .65rem;
    font-weight: 700;
    text-decoration: none;
}

.slumens-whatsapp__cta:hover,
.slumens-whatsapp__cta:focus-visible { filter: brightness(.95); text-decoration: none; }
.slumens-whatsapp__cta svg { width: 1.3rem; height: 1.3rem; }

body.woocommerce-checkout .slumens-whatsapp,
body.slumens-sticky-product-bar-active .slumens-whatsapp {
    bottom: max(calc(var(--slumens-whatsapp-y, 24px) + 4.5rem), env(safe-area-inset-bottom));
}

body.slumens-cart-drawer-open .slumens-whatsapp { z-index: 8000; }

@media (min-width: 769px) {
    .slumens-whatsapp--hide-desktop { display: none; }
}

@media (max-width: 768px) {
    .slumens-whatsapp { --slumens-whatsapp-size: 3.35rem; }
    .slumens-whatsapp--hide-mobile { display: none; }
    .slumens-whatsapp__panel { width: min(20rem, calc(100vw - 1.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
    .slumens-whatsapp__panel { animation: none; }
    .slumens-whatsapp__launcher { transition: none; }
}

@keyframes slumens-whatsapp-in {
    from { opacity: 0; transform: translateY(.5rem) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
