:root {
    --notif-preview-bg: #ffffff;
    --notif-preview-hover-bg: #f5f5f5;
    --notif-preview-text: #212529;
    --notif-preview-secondary: #6c757d;

    --notif-preview-icon-bg: #e9ecef;
    --notif-preview-icon-color: #0d6efd;

    --notif-preview-unread-dot: #0d6efd;
}

/* Dark mode overrides */
[data-bs-theme="dark"],
body.dark-mode {
    --notif-preview-bg: #1e1e1e;
    --notif-preview-hover-bg: #2a2a2a;

    --notif-preview-text: #f8f9fa;
    --notif-preview-secondary: #b5b5b5;

    --notif-preview-icon-bg: #2d2d2d;
    --notif-preview-icon-color: #4dabff;

    --notif-preview-unread-dot: #4dabff;
}

/* Notification item container */
.notification-item {
    background: var(--notif-preview-bg);
    color: var(--notif-preview-text) !important;
}

.notification-item:hover {
    background: var(--notif-preview-hover-bg);
}

/* Main text */
.notification-item .message-text,
.notification-item p,
.notification-item * {
    color: var(--notif-preview-text) !important;
}

/* Secondary text (time, metadata) */
.notification-item .small,
.notification-item .text-secondary {
    color: var(--notif-preview-secondary) !important;
}

/* Icon bubble */
.notification-icon {
    width: 48px;
    height: 48px;
    background: var(--notif-preview-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.notification-icon i {
    color: var(--notif-preview-icon-color) !important;
}


/* Unread dot */
.unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--notif-preview-unread-dot);
    flex-shrink: 0;
    margin-left: 10px;
    margin-top: 6px; /* aligns with text */
}

/* Optional pulse animation */
.unread-dot.pulse {
    animation: pulseDot 1.4s infinite ease-in-out;
}

@keyframes pulseDot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}