/* =============================================================
   ls_notifications.css
   Standalone notification panel styles — loaded globally via the
   XF header so the dropdown renders correctly on every page.

   Uses var() with fallback values so it works both on LinkHub
   pages (where links.css defines the custom properties) and on
   regular forum pages (where they're absent).
   ============================================================= */

/* ── Panel container ─────────────────────────────────────────── */
/* position: fixed pulls the panel out of any parent stacking context
   so it always composites above iframes (YouTube, X, etc.) which
   create their own hardware-accelerated layers.                   */
#user_notifications {
    display: none;
    position: fixed;
    top: 48px;
    right: 12px;
    width: 340px;
    max-width: 90vw;
    background: var(--ls-bg-primary, #fff);
    border: 1px solid var(--ls-border, #d0d0d0);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 1000500;
    overflow: hidden;
}

/* ── Mobile: full-width with equal margins ───────────────────── */
@media (max-width: 767px) {
    #user_notifications {
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
}

/* ── Notification items ──────────────────────────────────────── */
.ls-notif-item {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ls-notif-border, #e0e0e0);
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.ls-notif-item:last-child { border-bottom: none; margin-bottom: 0; }

.ls-notif-item--unread {
    background: var(--ls-notif-unread-bg, rgba(59, 130, 246, 0.08));
    border-left: 3px solid var(--ls-border-comment, #000096);
    border-radius: 0 6px 6px 0;
}

/* ── Notification link ───────────────────────────────────────── */
.ls-notif-link {
    display: block;
    font-size: 12px;
    color: var(--ls-notif-link, #000064);
    text-decoration: none;
    line-height: 1.45;
    margin-bottom: 4px;
}
.ls-notif-link:hover {
    text-decoration: underline;
    color: var(--ls-notif-link-hover, #000096);
}

/* ── Body / action / snippet ─────────────────────────────────── */
.ls-notif-body   { display: block; }
.ls-notif-action { color: var(--ls-notif-action, #555); font-weight: 400; }

.ls-notif-snippet {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ls-text-muted, #888);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Reaction emoji in notification ──────────────────────────── */
.ls-notif-react-img {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    vertical-align: -2px;
    margin: 0 2px;
    object-fit: contain;
}

/* ── Meta row: time + read toggle ────────────────────────────── */
.ls-notif-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ls-notif-time {
    font-size: 10px;
    color: var(--ls-text-muted, #888);
}
.ls-notif-check {
    cursor: pointer;
    accent-color: var(--ls-border-comment, #000096);
}
.ls-notif-toggle {
    background: none;
    border: 1px solid var(--ls-border, #d0d0d0);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    color: var(--ls-text-muted, #888);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, border-color 0.1s;
}
.ls-notif-toggle:hover {
    background: var(--ls-tool-bg-hover, #f0f0f0);
    border-color: var(--ls-border-comment, #000096);
    color: var(--ls-text-primary, #222);
}

/* ── Empty state ─────────────────────────────────────────────── */
.ls-notif-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--ls-text-muted, #888);
    text-align: center;
}

/* ── Scroll container — shows ~5 items, scroll for the rest ── */
.ls-notif-scroll {
    max-height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ls-border, #d0d0d0) transparent;
}
.ls-notif-scroll::-webkit-scrollbar       { width: 4px; }
.ls-notif-scroll::-webkit-scrollbar-track { background: transparent; }
.ls-notif-scroll::-webkit-scrollbar-thumb { background: var(--ls-border, #d0d0d0); border-radius: 4px; }

/* ── Dark theme overrides (XF alternate / data-ls-theme="dark") */
[data-ls-theme="dark"] #user_notifications {
    background: var(--ls-bg-primary, #0a1929);
    border-color: var(--ls-border, #1e3a5f);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
[data-ls-theme="dark"] .ls-notif-item {
    border-bottom-color: var(--ls-notif-border, #1e3a5f);
}
[data-ls-theme="dark"] .ls-notif-item--unread {
    background: rgba(59, 130, 246, 0.12);
    border-left-color: var(--ls-border-comment, #4a7abf);
}
[data-ls-theme="dark"] .ls-notif-link {
    color: var(--ls-notif-link, #7eb8f7);
}
[data-ls-theme="dark"] .ls-notif-link:hover {
    color: var(--ls-notif-link-hover, #a8d4ff);
}
[data-ls-theme="dark"] .ls-notif-action {
    color: var(--ls-notif-action, #8892b0);
}
[data-ls-theme="dark"] .ls-notif-toggle {
    border-color: var(--ls-border, #1e3a5f);
    color: var(--ls-text-muted, #607090);
}
[data-ls-theme="dark"] .ls-notif-toggle:hover {
    background: var(--ls-tool-bg-hover, #0a1929);
    border-color: var(--ls-border-comment, #4a7abf);
    color: var(--ls-text-primary, #ccd6f6);
}