/* --- Notifications Drawer Component --- */

/* Notification Bell Wrapper */
#notificationsBtn {
    position: relative;
    /* Hidden by default, shown via JS if user is logged in */
    display: none; 
}
#notificationsBtn.visible {
    display: flex;
}

/* Red Unread Badge */
.notification-badge {
    position: absolute;
    top: 4px; right: 4px;
    background-color: #ef4444;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    border: 2px solid var(--color-surface);
    z-index: 10;
}

/* Backdrop Overlay */
.drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 900;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.drawer-overlay.open { display: block; opacity: 1; }

/* The Drawer Panel */
.notification-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 400px; max-width: 85vw;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
}
.notification-drawer.open { transform: translateX(0); }

/* Drawer Header */
.drawer-header {
    flex-shrink: 0;
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
    background-color: var(--color-surface);
}
.drawer-header h3 {
    font-size: 1.125rem; font-weight: 600; margin: 0;
    color: var(--color-text);
}

/* Header Actions (Mark all read) */
.header-actions {
    display: flex; align-items: center; gap: 8px;
}
.mark-all-btn {
    background: none; border: none;
    font-size: 0.75rem; font-weight: 600;
    color: var(--color-primary);
    cursor: pointer; padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.15s;
}
.mark-all-btn:hover { background-color: var(--color-primary-light, #eff6ff); }

/* Close Button */
.close-drawer-btn {
    background: none; border: none;
    color: var(--color-text-muted);
    cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center;
}
.close-drawer-btn:hover { color: var(--color-text); }
.close-drawer-btn svg { width: 24px; height: 24px; }

/* Drawer Content */
.drawer-content {
    flex: 1; overflow-y: auto;
    overscroll-behavior: contain;
}

/* Notification Item */
.notif-item {
    display: flex; gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s ease;
    position: relative;
    background-color: var(--color-surface);
    cursor: pointer;
}
.notif-item:hover { background-color: var(--color-hover); }

/* Unread State */
.notif-item.unread {
    background-color: var(--color-primary-light, #eff6ff); 
}
.notif-item.unread:hover { background-color: #e0f2fe; }

/* Avatar */
.notif-avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    background-color: var(--color-border);
    color: var(--color-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 600;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Body */
.notif-body { flex: 1; min-width: 0; padding-right: 24px; /* Space for toggle */ }
.notif-text {
    font-size: 0.938rem; color: var(--color-text);
    line-height: 1.4; margin-bottom: 6px;
}
.notif-text strong { font-weight: 600; color: var(--color-text); }
.notif-meta { font-size: 0.75rem; color: var(--color-text-muted); }

/* Toggle Read/Unread Button (The Dot) */
.notif-toggle {
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    border-radius: 50%;
    z-index: 2; /* Sit on top of the link */
    color: var(--color-text-muted);
    opacity: 0; /* Hidden on read items unless hovered */
    transition: opacity 0.2s, background 0.15s;
}
.notif-item:hover .notif-toggle,
.notif-item.unread .notif-toggle {
    opacity: 1;
}
.notif-toggle:hover {
    background-color: rgba(0,0,0,0.05);
}

/* The Dot Icon */
.notif-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid currentColor;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Styling for Unread State */
.notif-item.unread .notif-toggle { color: var(--color-primary); }
.notif-item.unread .notif-dot {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* States */
.notif-empty, .notif-loading, .notif-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.938rem;
}

.notif-load-more {
    width: 100%; padding: 16px;
    background: transparent; border: none;
    color: var(--color-primary);
    font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.notif-load-more:hover {
    background-color: var(--color-hover);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .notification-drawer { width: 100%; max-width: 100%; border-left: none; }
}