/* ============================================================================
   Notification bell — MySocial.ai Design System

   ── WHY THIS IS A SEPARATE FILE (read before moving it back) ───────────────
   These rules started life in Content/modules/notifications.css. That file is
   part of the ~/Content/main-bundle rendered by @Styles.Render in
   _ExternalReferencesHeader.cshtml, and with bundle optimizations off it emits
   PLAIN links with NO cache-busting query:
       /main/Content/modules/notifications.css
   Meanwhile Scripts/notifications.js IS versioned (?v=CacheVersion). So when
   renderBell() started emitting ms-notif-* class names, browsers paired the new
   JS with an indefinitely-cached old stylesheet and the panel rendered with no
   padding, no dividers and no type — "completely messed up".

   Living here, linked with ?v=CacheVersion, guarantees these rules version in
   lockstep with the JS that depends on them. Do not fold this back into
   Content/modules/ unless that bundle gets a version query.

   Styled from the claude.ai/design project "MySocial.ai Design System": magenta
   #C808BD primary, Inter, pill buttons, 12px cards with cool-tinted shadows.

   SCOPE: the bell lives in the shared top nav (_TopNavStatusBar.cshtml), so this
   component is global by nature — one bell on every page. Tokens are declared on
   the component root, never :root, so nothing else inherits them. The .ms-notif-btn-*
   rules are intentionally unscoped and use literal hex — see their own note.
   ========================================================================== */

.ms-notification-bell-wrapper {
    --magenta-700: #9A0791;
    --magenta-500: #C808BD;
    --magenta-50: #FBE8FA;
    --cyan-600: #00A6C2;
    --cyan-50: #E4FBFE;
    --white: #FFFFFF;
    --grey-50: #F3F4F6;
    --grey-100: #E7E9EF;
    --grey-200: #D4D7E0;
    --grey-500: #708090;
    --slate-600: #486581;
    --black: #101010;
    --error-500: #FE1D1D;
    --error-600: #D80027;

    --brand: var(--magenta-500);
    --brand-hover: var(--magenta-700);
    --surface-card: var(--white);
    --surface-subtle: var(--grey-50);
    --text-primary: var(--black);
    --text-secondary: var(--slate-600);
    --text-tertiary: var(--grey-500);
    --border-subtle: var(--grey-100);
    --border-default: var(--grey-200);

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(16,25,52,0.08);
    --shadow-md: 0 8px 24px rgba(16,25,52,0.12);
    --glow-magenta: 0 0 24px rgba(255,28,247,0.45);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 200ms;
}

/* ── Action buttons (design system: Button, sm) ───────────────────────────────
   Deliberately UNSCOPED and using literal hex rather than var(), because
   .ms-notif-btn-* is emitted by two different render paths in notifications.js:
   renderBell (the dropdown, inside .ms-notification-bell-wrapper) and the
   "Recent activity" list in _TeamHeaderBlock.cshtml, which is outside it. Scoping
   these to the bell would have left that panel's buttons unstyled, and tokens
   declared on the bell root would not resolve there. The class name is already
   notification-specific, so an unscoped rule reaches exactly the right elements. */
.ms-notif-btn-primary,
.ms-notif-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 120ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 200ms cubic-bezier(0.4,0,0.2,1),
                background 200ms cubic-bezier(0.4,0,0.2,1),
                color 200ms cubic-bezier(0.4,0,0.2,1),
                border-color 200ms cubic-bezier(0.4,0,0.2,1);
}

.ms-notif-btn-primary:active,
.ms-notif-btn-secondary:active { transform: scale(0.97); }

.ms-notif-btn-primary {
    background: #C808BD;
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.ms-notif-btn-primary:hover {
    background: #9A0791;
    color: #fff;
    box-shadow: 0 0 24px rgba(255,28,247,0.45);
}

.ms-notif-btn-secondary {
    color: #101010;
    border-color: #D4D7E0;
}

.ms-notif-btn-secondary:hover {
    background: rgba(200,8,189,0.08);
    border-color: #C808BD;
    color: #C808BD;
}


/* ── Dropdown panel (design system: Card) ─────────────────────────────────
   The old rules set width twice (320px here, min-width:30rem on .dropdown-menu)
   which fought each other; one declaration now. */
.ms-notification-bell-wrapper .dropdown-menu.ms-notification-dropdown {
    width: 384px;
    min-width: 0;
    max-height: 480px;
    overflow-y: auto;
    padding: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.ms-notification-bell-wrapper .ms-notification-dropdown-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 16px 12px;
}

.ms-notification-bell-wrapper .ms-notification-dropdown-header .ms-notif-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* ── Notification row ─────────────────────────────────────────────────────
   Unread previously wore Bootstrap's #0d6efd blue on a grey fill.

   Note the bell renders UNREAD ONLY — notifications.js render() filters on
   `!isRead` before calling renderBell, and renderBell hardcodes the `unread`
   class on every row. So a full magenta tint + magenta title (the "actionable
   row" treatment used on the Echo pages) applied to 100% of rows: it carried no
   information and turned the whole panel pink. The emphasis is therefore spent
   only on a slim brand edge, which stays true if a read row ever appears here,
   while the rows themselves read as an ordinary design-system list. The bell's
   own red dot is what signals "you have unread". */
.ms-notification-bell-wrapper .ms-notification-bell-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-standard);
}

.ms-notification-bell-wrapper .ms-notification-bell-item:last-child { border-bottom: none; }
.ms-notification-bell-wrapper .ms-notification-bell-item:hover { background: var(--surface-subtle); }

.ms-notification-bell-wrapper .ms-notification-bell-item.unread {
    box-shadow: inset 3px 0 0 var(--brand);
}

.ms-notification-bell-wrapper .ms-notif-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.ms-notification-bell-wrapper .ms-notif-title {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}


.ms-notification-bell-wrapper .ms-notif-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.ms-notification-bell-wrapper .ms-notif-message {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ms-notification-bell-wrapper .ms-notif-actions { display: flex; align-items: center; gap: 8px; }
.ms-notification-bell-wrapper .ms-notif-actions .ms-auto { margin-left: auto; }

/* ── Empty state (design system: EmptyState, compact) ─────────────────────── */
.ms-notification-bell-wrapper .ms-notif-empty {
    padding: 32px 24px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ms-notification-bell-wrapper .ms-notif-footer {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.ms-notification-bell-wrapper .ms-notif-link {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.ms-notification-bell-wrapper .ms-notif-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Unread indicators ───────────────────────────────────────────────────── */
.ms-notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 1.2;
}

/* The bell sits on the dark navy top bar, so the dot keeps a surface-coloured
   ring to separate it from the icon. Error red is the reserved "needs attention"
   semantic; magenta would read as decoration here. */
.ms-notification-bell.has-unread::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #FE1D1D;
    border-radius: 50%;
    border: 2px solid #0A1330;
}

.ms-notification-bell.has-unread .ms-notification-badge { display: none; }