/* Mention inbox (nav bell and the monitor Notifications window).
   Hashed by scripts/build.mjs (ensure: components-mentions-inbox), after
   views-admin. The old <style id="mentions-inbox-styles"> was appended
   when the bell or the inbox first rendered. The phone top bar's
   .topbar nav .nav-bell rule in base.css stays more specific. */

.mentions-section { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.mentions-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px; }
.mentions-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.mentions-markall { background: none; border: none; color: var(--accent-text); font-size: 11px; cursor: pointer; padding: 2px 4px; }
.mentions-markall:hover { text-decoration: underline; }
.mentions-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.mentions-empty { color: var(--text-muted); font-size: 12px; padding: 8px 4px; }
.mention-row { display: flex; align-items: flex-start; gap: 8px; background: none; border: none; text-align: left; cursor: pointer; padding: 7px 6px; border-radius: var(--r-sm, 6px); color: var(--text-1); }
.mention-row:hover { background: var(--accent-soft, rgba(120,140,255,.12)); }
.mention-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: transparent; }
.mention-row.unread .mention-dot { background: var(--accent); }
.mention-row.unread .mention-body { font-weight: 600; }
.mention-body { font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nav-bell { position: relative; }
.nav-bell .bell-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger-strong, #e11313); color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 700; }