/* notifications modal — flat Stage-themed design, rebuilt on the CHAT-HISTORY
   modal style. Surface = #141417 (same as the leaderboard modal). Each row is its
   own floating card (NOT a bordered list with dividers). Unread = gold accent.
   Header carries the compact "mark all read" action; footer = lone "Load more".
   Header uses the shared .mg-mtitle / .mg-mclose primitives (profile-modal.css). */

@keyframes nfSpin { to { transform: rotate(360deg); } }
@keyframes nfRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.notifications-modal-content { scrollbar-width: none; -ms-overflow-style: none; }
.notifications-modal-content::-webkit-scrollbar { display: none; }

/* ── header: title (left) · mark-all + close (right) ── */
.nf-head { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nf-head-r { display: flex; align-items: center; gap: 10px; }
.nf-markread { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55); transition: background .16s, border-color .16s, color .16s; }
.nf-markread:hover { background: rgba(255,200,61,0.08); border-color: rgba(255,200,61,0.28); color: #ffc83d; }
.nf-markread svg { width: 14px; height: 14px; }

/* ── scroll body (same height mechanics as the old #notificationsContainer) ── */
.nf-body { padding: 16px 24px 24px; max-height: calc(80vh - 80px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nf-body::-webkit-scrollbar { display: none; }

/* ── notification cards (each row a floating card like .ch-history-item) ── */
.nf-list { display: flex; flex-direction: column; gap: 8px; }
.notification-item {
    position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 12px 14px; cursor: pointer; border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04);
    transition: transform .16s, border-color .16s, background .16s; animation: nfRise .4s ease both;
}
.notification-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); }
/* unread = gold accent (tint + border), like chat-history's accent rows */
.notification-item.unread { border-color: rgba(255,200,61,0.28); background: rgba(255,200,61,0.05); }
.notification-item.unread:hover { border-color: rgba(255,200,61,0.42); background: rgba(255,200,61,0.08); }

/* icon tile — flat line icon in the avatar slot (neutral; gold when unread) */
.notification-icon {
    width: 46px; height: 46px; border-radius: 50% !important; flex: none; display: grid; place-items: center;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.72); transition: border-color .16s;
}
.notification-icon svg { width: 21px; height: 21px; }
.notification-item:hover .notification-icon { border-color: rgba(255,255,255,0.22); }
.notification-item.unread .notification-icon { background: rgba(255,200,61,0.12); border-color: rgba(255,200,61,0.30); color: #ffc83d; }

.notification-content { flex: 1; min-width: 0; }
.notification-title { margin: 0; color: #fff; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 7px; line-height: 1.25; }
.notification-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffc83d; flex: none; }
.notification-message { margin: 3px 0 0; color: rgba(255,255,255,0.6); font-size: 12.5px; line-height: 1.45; }
.notification-time { display: block; color: rgba(255,255,255,0.4); font-size: 11.5px; margin-top: 6px; }

/* per-row delete (always visible but subtle; brightens to red on hover) */
.notification-delete {
    flex: none; align-self: flex-start; width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
    color: rgba(255,255,255,0.28); font-size: 17px; line-height: 1; display: grid; place-items: center; padding: 0;
    transition: color .15s, background .15s;
}
.notification-delete:hover { color: #ff5470; background: rgba(255,84,112,0.12); }

/* promotion claim button — gold (claiming sparks = value) */
.promo-claim-btn {
    display: inline-flex; align-items: center; gap: 6px; margin: 9px 0 0; padding: 8px 16px; font-family: inherit; font-size: 12.5px; font-weight: 800;
    color: #000; background: #ffc83d; border: 0; border-radius: 11px; cursor: pointer; transition: filter .16s, transform .16s;
}
.promo-claim-btn svg { width: 14px; height: 14px; }
.promo-claim-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.promo-claim-btn.promo-claimed { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); cursor: default; }
.promo-claim-btn.promo-claimed:hover { filter: none; transform: none; }

/* ── load more (single, centered pagination pill — the only footer control) ── */
.nf-loadmore { text-align: center; padding: 18px 0 4px; }
.nf-loadmore button {
    appearance: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; padding: 11px 28px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); transition: background .16s, color .16s;
}
.nf-loadmore button:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); }

/* ── empty state (identical pattern to .ch-empty) ── */
.nf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 54px 24px 46px; gap: 16px; animation: nfRise .4s ease both; }
.nf-empty-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
.nf-empty-ic svg { width: 30px; height: 30px; }
.nf-empty-msg { font-size: 15.5px; font-weight: 700; color: rgba(255,255,255,0.72); }
.nf-empty-sub { font-size: 12.5px; color: rgba(255,255,255,0.4); max-width: 250px; line-height: 1.45; }

/* ── loading (chSpin-style spinner) ── */
.nf-loading { text-align: center; padding: 48px 0; }
.nf-spin { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.1); border-top-color: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 auto 12px; animation: nfSpin 0.8s linear infinite; }
.nf-loading-txt { color: rgba(255,255,255,0.35); font-size: 13px; }

/* ── external bell badge (topbar; unchanged) ── */
.notification-bell-badge {
    position: absolute; top: -4px; right: -4px; background: #EF4444; color: #fff; font-size: 10px; font-weight: 600;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    border: 2px solid #141417;
}

/* ── responsive ── */
@media (max-width: 480px) {
    .nf-markread .lbl { display: none; }
    .nf-markread { padding: 7px; }
}

/* ── Mobile fullscreen (PRESERVED — width/height unchanged) ── */
@media (max-width: 900px) {
    #notificationsModal { padding: 0 !important; }
    #notificationsModal > .notifications-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
    }
    #notificationsContainer { max-height: calc(100svh - 80px) !important; }
    .nf-head { padding: 18px 16px 0; }
    .nf-body { padding: 14px 16px 20px; }
}