.notifications { position: relative; flex: 0 0 auto; }
.notifications-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; cursor: pointer; }
.notifications-bell:hover { background: #ffffff1f; }
.notifications-bell:disabled { opacity: .45; cursor: default; }
.notifications-bell svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Unread: a red dot ringed in the app bar's colour, so it reads on the white bar. */
.notifications-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px var(--h-surface, #fff); }
.notifications [hidden] { display: none; }
.notifications-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; width: min(330px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow: auto; box-sizing: border-box; padding: 14px; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-lg); white-space: normal; }
.notifications-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notifications-heading .btn { min-width: 36px; min-height: 36px; }
.notifications-empty { margin: 8px 0; font-size: 13px; line-height: 1.5; }
/* Each notification is its own card, with its dismiss in the card's corner, so the
   item reads apart from the panel's heading and the action below it. */
.notifications-welcome { position: relative; margin: 10px 0 12px; padding: 11px 40px 11px 12px; border: 1px solid var(--border-mid); border-left: 3px solid var(--rice-blue); border-radius: var(--radius-md); background: var(--bg-secondary); }
.notifications-welcome p { margin: 0; font-size: 13px; line-height: 1.5; }
.notifications-dismiss { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-tertiary); cursor: pointer; }
.notifications-dismiss:hover, .notifications-dismiss:focus-visible { background: var(--danger-bg); color: var(--danger); }
.notifications-panel > .btn { max-width: 100%; min-height: 40px; white-space: normal; }
.notifications-status { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.notifications-status:empty { display: none; }
.notifications button:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.notifications-bell:focus-visible { outline-color: #a9d3ff; }
@media (max-width: 600px) { .notifications-panel { position: fixed; top: 64px; right: 12px; } }