/* Notificações Premium - Animações */

/* Badge Pulsante Amarelo (Fila) */
@keyframes pulse-yellow {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(234, 179, 8, 0);
    }
}

.badge-pulse-yellow {
    animation: pulse-yellow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Shake Suave na Aba - Aumentado para mais visibilidade */
@keyframes shake-gentle {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.shake-gentle {
    animation: shake-gentle 1s ease-in-out 2;
    /* 2x repeats, 1s each */
}

/* Flash Verde no Border do Card */
@keyframes flash-green {

    0%,
    100% {
        border-color: transparent;
        box-shadow: none;
    }

    50% {
        border-color: rgb(34, 197, 94);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 20px rgba(34, 197, 94, 0.1);
    }
}

.flash-green {
    animation: flash-green 0.6s ease-in-out 3;
}

/* Badge de Mensagens (Verde) */
@keyframes pulse-green {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.badge-pulse-green {
    animation: pulse-green 1.5s cubic-bezier(0.4, 0, 0.6, 1) 3;
}

/* Glow Effect */
.glow-yellow {
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.6);
}

.glow-green {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}
/* Vibração Contínua para Cards da Fila */
@keyframes vibrate-pending {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-3px); }
  20% { transform: translateX(3px); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(0); }
}

.vibrate-pending {
  animation: vibrate-pending 3s ease-in-out infinite;
  border: 2px solid rgba(234, 179, 8, 0.5) !important;
  background: linear-gradient(to right, rgba(234, 179, 8, 0.05), transparent) !important;
}