/* css/notification.css */

/* Dropdown container */
#notification-dropdown {
    transform-origin: top right;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    max-height: 600px; /* Chiều cao tối đa */
    /* ĐÃ XÓA display: flex và flex-direction để tránh xung đột với class .hidden của Tailwind */
}

/* Badge (Chấm đỏ) */
.notif-badge {
    animation: pulse-red 3s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Avatar trong thông báo */
.notif-avatar {
    width: 44px;
    height: 44px; 
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.notif-icon-fallback {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Item thông báo */
.notif-item {
    transition: background-color 0.2s ease;
}

/* Custom Scrollbar */
#notification-list::-webkit-scrollbar {
    width: 6px;
}
#notification-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}
#notification-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
#notification-list::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* --- Style cho nút chuông khi Active --- */
#notification-bell-btn.active {
    background-color: #eff6ff; /* blue-50 */
    color: #2563eb; /* blue-600 */
}

#notification-bell-btn.active svg {
    stroke: currentColor;
}