/* Notification rows: shared by the Inbox/Done page and the bell menu, so the
   two surfaces render one row the same way. Page-only layout (header, tabs)
   stays in the page template. */
.notif-list { list-style: none; padding: 0; margin: 0; }
/* The row is the flex container so the action buttons sit beside the link
   rather than inside it: a button nested in an anchor is not valid markup,
   and they do different things. */
.notif-row { display: flex; align-items: stretch; gap: 0.4rem; margin-bottom: 0.5rem; }
.notif-item {
    flex: 1; min-width: 0;
    display: flex; gap: 0.75rem; padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    background: var(--bs-body-bg); border: 1px solid var(--hq-border-strong);
    text-decoration: none; color: inherit;
    transition: all 0.15s;
}
.notif-item:hover { background: var(--hq-surface-sunken); border-color: var(--hq-border-strong); transform: translateX(2px); }
.notif-item--unread {
    border-left: 3px solid var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
}
.notif-item__icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: var(--font-lg);
}
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { font-weight: 600; font-size: var(--font-md); color: var(--bs-body-color); margin-bottom: 2px; }
.notif-item__message {
    font-size: var(--font-sm); color: var(--bs-secondary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item__time { font-size: var(--font-xs); color: var(--bs-secondary); margin-top: 2px; }
/* "Why am I getting this?" answered in place. */
.notif-item__reason { font-style: italic; }
/* On a phone the pill fights the title for the same 200px; the icon colour
   already says what kind of row it is, so the pill waits for a wider screen. */
@media (max-width: 575.98px) { .notif-item__type { display: none; } }
.notif-item__type {
    font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; padding: 2px 8px; border-radius: 100px;
    white-space: nowrap;
}
.notif-action {
    flex-shrink: 0; width: 40px;
    border-radius: 0.65rem; border: 1px solid var(--hq-border-strong);
    background: var(--bs-body-bg); color: var(--bs-secondary);
    cursor: pointer; transition: all 0.15s;
}
.notif-action--done:hover {
    background: var(--hq-surface-sunken); color: var(--bs-success);
    border-color: var(--bs-success);
}
.notif-action--more:hover { background: var(--hq-surface-sunken); color: var(--bs-body-color); }
.notif-more { display: flex; }
/* Wide enough that "Mute <job name>" and its one-line explanation read as
   two lines, not five. */
.notif-more .dropdown-menu { min-width: 20rem; max-width: 92vw; }
/* The mute menu item is a form button so muting stays a POST. Two lines:
   what it mutes, then what that means, so nobody has to guess. */
.notif-mute-item { white-space: normal; }
.notif-mute-item .notif-mute-item__hint { font-weight: 400; }
.notif-empty { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary); }
.notif-empty i { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* The bell menu: the same rows, tighter, in a dropdown. */
.notif-menu { width: 400px; max-width: 92vw; }
.notif-menu .notif-row { margin-bottom: 0.25rem; }
.notif-menu .notif-item { padding: 0.6rem 0.75rem; border-radius: 0.5rem; }
.notif-menu .notif-item:hover { transform: none; }
.notif-menu .notif-item__message { -webkit-line-clamp: 1; }
.notif-menu .notif-action { width: 34px; border-radius: 0.5rem; }
.notif-menu__head { border-bottom: 1px solid var(--hq-border-strong); }
.notif-menu__foot { border-top: 1px solid var(--hq-border-strong); text-decoration: none; font-weight: 600; }
.notif-menu__foot:hover { background: var(--hq-surface-sunken); }
.notif-menu .notif-empty { padding: 1.75rem 1rem; }
.notif-menu .notif-empty i { font-size: 1.75rem; }