/* ===== Floating Action Buttons (FAB) ===== */

/* Vùng bọc toàn bộ FAB (góc phải–dưới) */
.fab-wrap {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Panel các nút (hiện mặc định ở ≥640px) */
@media (min-width: 640px) {
    .fab-panel {
        display: flex !important;
    }
}

/* Tooltip tinh tế bên trái mỗi nút */
.fab-tip {
    position: absolute;
    right: 100%;
    margin-right: .75rem;
    padding: .375rem .625rem;
    border-radius: .5rem;
    font-size: .75rem;
    color: #fff;
    background: rgba(15, 23, 42, .92); /* slate-900/90 */
    opacity: 0;
    transform: translateX(.25rem);
    pointer-events: none;
    transition: all .18s ease;
}

.fab-item:hover .fab-tip,
.fab-item:focus .fab-tip {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Hiệu ứng chuông rung & ping ===== */
@keyframes bell-shake {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(12deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(8deg);
    }

    40% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-2deg);
    }

    70%,100% {
        transform: rotate(0);
    }
}

.shake-bell {
    transform-origin: 50% 10%;
    animation: bell-shake 1.4s ease-in-out 4s infinite;
}

    .shake-bell:hover,
    .shake-bell:focus {
        animation-play-state: paused;
    }

/* Vòng sáng “ping” nhẹ để hút mắt */
@keyframes fab-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56,189,248,.45);
        opacity: .9;
    }

    70% {
        box-shadow: 0 0 0 14px rgba(56,189,248,0);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(56,189,248,0);
        opacity: 0;
    }
}

.fab-ping {
    position: relative;
}

    .fab-ping::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        box-shadow: 0 0 0 0 rgba(56,189,248,.45); /* sky-400 */
        animation: fab-pulse 2.2s cubic-bezier(0,0,.2,1) infinite;
    }

/* Tôn trọng người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce) {
    .shake-bell, .fab-ping::after {
        animation: none !important;
    }
}

/* ===== Tuỳ chọn: phù hiệu thông báo nhỏ (badge) ===== */
.fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #ef4444; /* red-500 */
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}