/* =============================================================
   COMPONENT / MESSENGER
   
   Плавающие кнопки WhatsApp / Telegram в правом нижнем углу.
   Анимация — лёгкое покачивание.
   Размер задаём через --icon-size, а не width/height —
   чтобы не конфликтовать с общими правилами для svg.icon.
   ============================================================= */

.messenger-button-wrapper {
    display: grid;
    position: fixed;
    bottom: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-toast);
}

/* Единственное, что важно: переопределяем переменную */
.messenger-button-wrapper svg.icon {
    --icon-size: var(--icon-lg);
}

.whatsapp.icon {
    animation: whatsapp 4s infinite;
}

.telegram.icon {
    animation: telegram 4s infinite;
}

@keyframes whatsapp {
    0% {
        transform: translate(0, 0);
    }

    3% {
        transform: translate(-3px, 0);
    }

    6% {
        transform: translate(0, 0);
    }

    9% {
        transform: translate(-3px, 0);
    }

    12% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(0, 0);
    }
}

@keyframes telegram {
    0% {
        transform: translate(0, 0);
    }

    3% {
        transform: translate(0, 0);
    }

    6% {
        transform: translate(-3px, 0);
    }

    9% {
        transform: translate(0, 0);
    }

    12% {
        transform: translate(-3px, 0);
    }

    15% {
        transform: translate(0, 0);
    }
}