/* Notification components; light product tokens, no modal or polling. */
:root[data-theme] body>header .notification-bell{position:relative;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;border:1px solid var(--ui-control-border);border-radius:var(--ui-radius-control);color:var(--ui-fg);background:var(--ui-surface);flex:0 0 44px}
.notification-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-bell [data-notification-count]{position:absolute;inset-inline-end:-5px;top:-6px;min-width:20px;padding:0 4px;border-radius:var(--ui-radius-pill);background:var(--ui-accent);color:var(--ui-on-accent);font-size:11px;line-height:20px;text-align:center}
.notification-bell [hidden]{display:none}
#app .notification-toolbar,#app .notification-heading,#app .notification-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap}
#app .notification-toolbar .hero-actions{margin:0}
:root[data-theme] body #app .notification-toolbar .hero-actions{display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;min-width:0;gap:8px;margin:0}
:root[data-theme] body #app .notification-toolbar .hero-actions>button{flex:0 1 auto;min-width:0;white-space:nowrap;padding:10px 12px;font-size:14px}
:root[data-theme] body #app .notification-toolbar [aria-pressed=true]{background:var(--ui-soft)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
:root[data-theme] body #app .notification-toolbar [data-notifications-refresh]{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;flex:0 0 44px}
#app [data-notifications-refresh] svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app .notification-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-space-4);margin-top:var(--ui-space-4);align-items:stretch}
#app .notification-item{display:flex;flex-direction:column;gap:var(--ui-space-3);padding:var(--ui-space-5);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);background:var(--ui-surface);min-width:0;overflow-wrap:anywhere}
#app .notification-item.is-unread{border-inline-start:1px solid var(--ui-accent);background:var(--ui-soft)}
#app .notification-heading h3{font-size:16px;line-height:1.8;margin:0}
#app .notification-body{white-space:pre-wrap;line-height:var(--ui-line-height);margin:0}
#app .notification-item time{display:block;font-size:var(--ui-text-small);color:var(--ui-muted)}
#app .notification-item time span{display:block}
#app .notification-actions{justify-content:flex-start;margin-top:auto;padding-top:var(--ui-space-3)}
@media(min-width:768px){#app .notification-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){
 :root[data-theme] body:not(.gateway-view)>header.has-notifications{grid-template-columns:auto minmax(0,1fr) auto 44px}
 :root[data-theme] body>header.has-notifications .notification-bell{grid-column:4;grid-row:1}
 :root[data-theme] body.account-home:not(.gateway-view)>header.has-notifications{grid-template-columns:auto minmax(0,1fr) 44px!important}
 :root[data-theme] body.account-home>header.has-notifications .notification-bell{grid-column:3}
}
/* Compact headers hide account/menu controls; reserve only the visible bell. */
@media(max-width:1023px){
 :root[data-theme] body:not(.gateway-view)>header.has-notifications,
 :root[data-theme] body.account-home:not(.gateway-view)>header.has-notifications{grid-template-columns:minmax(0,1fr) 44px!important}
 :root[data-theme] body>header.has-notifications .notification-bell,
 :root[data-theme] body.account-home>header.has-notifications .notification-bell{grid-column:2;grid-row:1;order:2;margin:0;justify-self:end}
}
@media(max-width:360px){:root[data-theme] body>header.has-notifications .brand-symbol{width:126px;height:42px;flex-basis:126px}:root[data-theme] body>header.has-notifications .brand-name{font-size:16px}}
@media print{.notification-bell{display:none}}