/* ============================================
   NOTIFICATIONS
   Modal, bell badge, and notification items
   ============================================ */

.notifications-modal {
    max-width: 550px !important;
    width: 98% !important;
    height: 90vh;
    max-height: 850px;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeUp 0.3s ease-out;
    background: var(--popup-bg) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--popup-border) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    margin: 10px auto;
}

.notifications-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--divider-border);
    background: rgba(255, 255, 255, 0.02);
}

.notifications-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notifications-header-actions .modal-close {
    position: static !important;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
}

.mark-all-read-btn {
    background: none;
    border: none;
    color: var(--text-accent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 4px;
}

.mark-all-read-btn:hover {
    background: var(--accent-bg);
    color: var(--accent-color);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Custom Scrollbar for list */
.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.notification-item {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.notification-item.unread {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
    border-left: 4px solid var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notification-item:hover {
    transform: translateY(-2px);
    background: var(--bg-hover);
    border-color: var(--text-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.notification-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.notification-item-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    padding-right: 12px;
}

.notification-badge-new {
    background: var(--accent-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px var(--accent-glow);
}

.notification-item-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 12px;
    overflow-wrap: break-word;
}

.notification-item-body p {
    margin: 0 0 8px 0;
}

.notification-item-body p:last-child {
    margin-bottom: 0;
}

.notification-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.notification-item-date {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: 0.7;
}

/* A broadcast corrected after it was sent says so, quietly. */
.notification-item-edited {
    font-style: italic;
    opacity: 0.9;
}

.notification-read-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-accent);
}

.notification-read-status.is-read {
    color: var(--text-muted);
    opacity: 0.5;
}

.notification-item-actions {
    display: flex;
    gap: 8px;
}

.notification-action-btn {
    background: var(--accent-bg);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-action-btn:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 0 8px var(--accent-glow);
}

.notification-action-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.notification-pod-decline-btn {
    border-color: color-mix(in srgb, var(--danger-color, #e05252) 68%, var(--border-color));
    background: color-mix(in srgb, var(--danger-color, #e05252) 9%, transparent);
    color: var(--danger-color, #e05252);
}

.notification-pod-decline-btn:hover:not(:disabled) {
    border-color: var(--danger-color, #e05252);
    background: var(--danger-color, #e05252);
    color: white;
    box-shadow: 0 0 8px color-mix(in srgb, var(--danger-color, #e05252) 45%, transparent);
}

.notification-pod-accept-btn:hover:not(:disabled) {
    background: var(--accent-color);
}

/* Empty State */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
    color: var(--text-muted);
}

.notification-empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.15;
    animation: pulse 3s infinite ease-in-out;
}

.notification-empty p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Shared unread count badge */
.notification-count-badge {
    background: var(--mtg-red-mana);
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--header-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
    animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notification-avatar-badge {
    position: absolute;
    top: -6px;
    right: -8px;
}

.notification-menu-count {
    position: static;
    margin-left: auto;
    border-color: var(--popup-bg);
    flex: 0 0 auto;
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes modalSlideUp {
    0% { transform: translate(-50%, -45%); opacity: 0; }
    100% { transform: translate(-50%, -50%); opacity: 1; }
}

/* Base modal centers with fixed, but if we use the overlay it might be different.
   The current modal-overlay uses flex.
*/

.notifications-modal {
    position: relative; /* Inside flex container */
    transform: none;
    animation: modalFadeUp 0.3s ease-out;
}

@keyframes modalFadeUp {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    .notifications-modal {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .notifications-header {
        padding: 16px;
    }

    .notification-list {
        padding: 8px;
    }
}

/* ── Session toast log (Toast Notices tab) ──────────────────────────────────
   Every toast shown this session, newest first, so a message that auto-dismissed
   can still be read back. Rows reuse the toast type classes (.toast-success …)
   purely for their --toast-accent custom property. */
.toast-log-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    font-size: 0.85rem;
}

.toast-log-item:last-child {
    border-bottom: none;
}

.toast-log-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
    color: var(--toast-accent, var(--accent-color));
}

.toast-log-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-log-message {
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* Optional longer explanation, collapsed by default. */
.toast-log-details summary {
    cursor: pointer;
    color: var(--accent-color);
    font-size: 0.75rem;
    user-select: none;
}

.toast-log-details summary:hover {
    text-decoration: underline;
}

.toast-log-details-body {
    margin-top: 4px;
    padding: 8px 10px;
    border-left: 2px solid var(--toast-accent, var(--accent-color));
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 6px 6px 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.toast-log-time {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Above every other modal overlay (z-index 6000): almost anything in the app,
   including an open modal, can raise a toast, and clicking that toast must be able
   to open this modal on top of whatever raised it. Toasts themselves (9999) still
   float above. The modal renders through the shared BaseModal shell, whose overlay
   class is fixed, so the lift keys off the shell class it passes instead. */
.base-modal-overlay:has(> .notifications-base-modal) {
    z-index: 9000;
}

/* Signed-out sessions see the inbox tab but cannot use it: visibly muted, and its
   click explains itself with a toast instead of switching tabs. */
.notifications-header .legal-tab-btn.tab-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* In-app link on a log entry ("Go see achievements") — same quiet-link voice as
   the details summary, sized as a tap target. */
.toast-log-link {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.toast-log-link:hover,
.toast-log-link:focus-visible {
    text-decoration: underline;
}