/** Nocturne header notifications. Colours follow the active theme palette. */
.nocturne-notifications { flex: 0 0 auto; position: relative; }
.nocturne-notifications-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -7px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; border: 2px solid var(--nocturne-deep); border-radius: 999px; background: var(--nocturne-light); color: var(--nocturne-void); font-size: .7rem; font-weight: 700; }
.nocturne-notifications-panel { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); width: min(390px, calc(100vw - 64px)); max-height: calc(100dvh - 130px); overflow-y: auto; border: 1px solid var(--nocturne-edge); border-radius: .8rem; background: var(--nocturne-deep); color: var(--nocturne-light); box-shadow: 0 14px 36px rgb(var(--nocturne-void-rgb) / .75); z-index: 50; }
.nocturne-notifications-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--nocturne-edge); }
.nocturne-notifications-heading { margin: 0; font-weight: 700; }
.nocturne-notifications button { font: inherit; }
.nocturne-notifications-close, .nocturne-notification-delete { display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: .35rem; border: 0; background: transparent; color: var(--nocturne-muted); }
.nocturne-notifications :is(button:hover, a:hover) { color: var(--nocturne-light); }
.nocturne-notifications .nocturne-notification-list { list-style: none; margin: 0; padding: 0; max-height: min(380px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.nocturne-notification-item { display: flex; align-items: center; border-bottom: 1px solid rgb(var(--nocturne-edge-rgb) / .5); }
.nocturne-notification-item.is-unread { background: rgb(var(--nocturne-panel-rgb) / .65); }
.nocturne-notification-entry { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; padding: .9rem .7rem .9rem 1rem; text-decoration: none; color: inherit; }
.nocturne-notification-entry:hover { background: rgb(var(--nocturne-edge-rgb) / .2); }
.nocturne-notification-avatar { position: relative; flex: 0 0 42px; width: 42px; height: 42px; }
.nocturne-notification-avatar img { display: block; width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.nocturne-notification-type { position: absolute; bottom: -3px; right: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--nocturne-panel); font-size: .6rem; }
.nocturne-notification-content { display: flex; flex: 1; flex-direction: column; gap: .3rem; min-width: 0; }
.nocturne-notification-message { overflow-wrap: anywhere; line-height: 1.5; font-size: .9rem; }
.nocturne-notification-time { color: var(--nocturne-muted); font-size: .75rem; }
.nocturne-notification-unread { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--nocturne-light); }
.nocturne-notification-delete { margin-inline: .5rem; }
.nocturne-notifications-empty { margin: 0; padding: 1.5rem 1rem; color: var(--nocturne-muted); text-align: center; }
.nocturne-notifications-read-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem; border-top: 1px solid var(--nocturne-edge); }
.nocturne-notifications-read-actions button { padding: .5rem .65rem; font-size: .8rem; }
.nocturne-notifications-read-status { flex-basis: 100%; font-size: .8rem; color: var(--nocturne-muted); }
.nocturne-notifications-read-status:empty { display: none; }
.nocturne-notifications-footer { padding: .85rem 1rem; border-top: 1px solid var(--nocturne-edge); }
.nocturne-notifications-footer a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--nocturne-light); font-size: .85rem; }
.nocturne-notifications :focus-visible:not(.nocturne-header-button) { outline: 2px solid var(--nocturne-muted); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
 .nocturne-notifications[open] > .nocturne-notifications-panel { animation: nocturne-notifications-reveal .18s ease-out; }
 @keyframes nocturne-notifications-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1199px) {
 .nocturne-site-header { min-height: 78px; }
 .nocturne-notifications-panel { width: min(390px, calc(100vw - 88px)); }
}