@import url("visual.css");

:root {
    --visim-instagram: #e4405f;
    --visim-whatsapp: #25d366;
    --visim-contact-size: 52px;
    --visim-contact-radius: 16px;
}

.visim-floating-contacts {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 100000;

    display: flex;
    flex-direction: column;
    gap: 10px;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.visim-floating-contacts--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.visim-floating-contacts--admin {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 76px));
}

.visim-floating-contact {
    position: relative;
    width: var(--visim-contact-size);
    height: var(--visim-contact-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--visim-contact-radius);

    color: #fff;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);

    transition:
        transform .2s ease,
        filter .2s ease;
}

.visim-floating-contact::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--visim-contact-pulse);
    border-radius: inherit;
    pointer-events: none;
    animation: visim-contact-pulse 2.4s ease-out infinite;
}

@keyframes visim-contact-pulse {
    0% {
        transform: scale(1);
        opacity: .65;
    }
    70%, 100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.visim-floating-contact:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.visim-floating-contact:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .7);
    outline-offset: 3px;
}

.visim-floating-contact--instagram {
    --visim-contact-pulse: var(--visim-instagram);
    background: var(--visim-instagram);
}

.visim-floating-contact--whatsapp {
    --visim-contact-pulse: var(--visim-whatsapp);
    background: var(--visim-whatsapp);
}

.visim-floating-contact--whatsapp::before {
    animation-delay: .6s;
}

@media (prefers-reduced-motion: reduce) {
    .visim-floating-contact::before {
        animation: none;
        opacity: 0;
    }
}

.visim-floating-contact svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: currentColor;
}

@media (max-width: 600px) {
    :root {
        --visim-contact-size: 48px;
        --visim-contact-radius: 14px;
    }

    .visim-floating-contacts {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        gap: 9px;
    }

    .visim-floating-contacts--admin {
        bottom: max(86px, calc(env(safe-area-inset-bottom) + 72px));
    }
}