/* ==========================================================================
   Notifications page (the bell in the top bar leads here)
   ========================================================================== */

.notifications { display: grid; gap: 18px; max-width: 860px; }
.notifications .card__header .count-pill { background: var(--surface-3); color: var(--text-2); }

.notification-list { display: grid; }
.notification-form { display: block; margin: 0; }
.notification-form:last-child .notification { border-bottom: 0; }

.notification {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 22px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .12s;
}
.notification:hover { background: var(--surface-2); }
.notification.is-unread { background: var(--surface-2); }
.notification.is-unread:hover { background: var(--surface-3); }

.notification__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--surface-3); color: var(--text-2); }
.notification__icon--brand { background: var(--surface-2); color: var(--text-2); }
.notification__icon--info { background: var(--info-soft); color: var(--info-ink); }
.notification__icon--success { background: var(--success-soft); color: var(--success-ink); }
.notification__icon--warning { background: var(--warning-soft); color: var(--warning-ink); }

.notification__body { display: grid; flex: 1; gap: 3px; min-width: 0; }
.notification__text { font-size: 14.5px; line-height: 1.4; }
.notification__text strong { font-weight: 550; }
.notification__preview {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-size: 13.5px; color: var(--text-2);
}
.notification__time { font-size: 12.5px; color: var(--text-3); }
.notification__time time { color: inherit; }
.notification__dot { width: 9px; height: 9px; flex: none; margin-top: 7px; border-radius: 50%; background: var(--brand); }

@media (max-width: 640px) { .notification { padding: 12px 16px; } }