/* Notification bell + feed (NOTIF-1) — mounts in .quick-actions.
   Palette follows the quick-action buttons; row accents reuse the badge
   families (red offers / amber block / purple scout). */

.notif-bell-wrap { position: relative; }

.notif-bell-btn .notif-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary, #0f0f1a);
    pointer-events: none;
}

.notif-feed {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-secondary, #14141f);
    border: 1px solid var(--border-color, #2e2e46);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    z-index: 1200;
}

.notif-feed-hd {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #22223a);
    font-size: 12.5px;
    font-weight: 700;
    position: sticky;
    top: 0;
    background: inherit;
}

.notif-row {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #1c1c2e);
    align-items: flex-start;
    cursor: pointer;
}
.notif-row:hover { background: var(--bg-hover, #1d1d30); }
.notif-row:last-of-type { border-bottom: none; }
.notif-row.unread { background: var(--bg-tertiary, #181829); }
.notif-row.unread .notif-line::before {
    content: '●';
    color: var(--primary-color, #7c6af7);
    font-size: 8px;
    margin-right: 6px;
    vertical-align: 2px;
}

.notif-ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #26263a;
}
.notif-ic.block { background: #3a2f14; }
.notif-ic.scout { background: #241a3e; }
.notif-ic.offer { background: #3a1717; }
.notif-ic.trade { background: #14303a; }

/* Two fixed lines: message, then league + age. Keeps every row's second line
   on the same baseline regardless of how long the league name is. */
.notif-tx { font-size: 12.5px; line-height: 1.45; min-width: 0; flex: 1; }
.notif-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.notif-meta .notif-lg {
    color: var(--text-muted, #8f8fb0);
    font-size: 11.5px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-meta .notif-ago { color: var(--text-muted, #666); font-size: 11px; white-space: nowrap; flex: none; }

.notif-feed-ft,
.notif-empty {
    padding: 9px 14px;
    text-align: center;
    font-size: 11.5px;
}
.notif-feed-ft { color: var(--primary-color, #7c6af7); cursor: pointer; border-top: 1px solid var(--border-color, #22223a); }
.notif-feed-ft:hover { background: var(--bg-hover, #1d1d30); }
.notif-empty { color: var(--text-muted, #666); padding: 22px 14px; }

@media (max-width: 480px) {
    .notif-feed {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 56px;
        width: auto;
    }
}