.hub-notification-panel,.hub-notification-toast{box-sizing:border-box;color:#f1f1f3;background:#23242a;border:1px solid #484950;border-radius:8px;box-shadow:0 8px 30px #0008;font:13px/1.45 system-ui,sans-serif}
#hubNotificationButton{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative;white-space:nowrap}
#hubNotificationButton svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hub-notification-badge{font-size:11px;border-radius:8px;background:#b92335;color:#fff;padding:0 4px;min-width:16px}
.hub-notification-panel{position:fixed;z-index:10000;right:16px;top:58px;width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 80px);overflow:auto;padding:12px}
.hub-notification-panel[hidden]{display:none}
.hub-notification-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hub-notification-panel button,.hub-notification-toast button{font:inherit;cursor:pointer;color:inherit;background:#303138;border:1px solid #5a5b63;border-radius:5px;padding:4px 8px}
.hub-notification-panel button:focus-visible,.hub-notification-toast button:focus-visible{outline:2px solid #ef5261;outline-offset:2px}
.hub-notification-panel ol{list-style:none;padding:0;margin:8px 0 0}
.hub-notification-panel li{padding:10px 8px;border-top:1px solid #45464e;border-left:3px solid #ef5261;overflow-wrap:anywhere}
.hub-notification-panel li.is-read{border-left-color:#686973}
.hub-notification-panel p,.hub-notification-toast p{margin:4px 0;color:#d3d3dc;overflow-wrap:anywhere}
.hub-notification-panel time{font-size:11px;color:#aaaab4}
.hub-notification-actions{display:flex;gap:6px;margin-top:6px}
.hub-notification-source:empty{display:none}
.hub-notification-toasts{position:fixed;z-index:10001;right:16px;bottom:16px;width:min(370px,calc(100vw - 32px));display:grid;gap:8px;pointer-events:none}
.hub-notification-toast{position:relative;padding:12px 38px 12px 12px;border-left:3px solid #ef5261;pointer-events:auto}
.hub-notification-toast button{position:absolute;right:7px;top:7px}
.hub-notification-panel .is-error strong,.hub-notification-toast.is-error strong{color:#ff8d98}
@media(max-width:600px){#hubNotificationButton{width:36px;height:36px;padding:8px;justify-content:center}.hub-notification-label{display:none}.hub-notification-badge{position:absolute;right:-3px;top:-4px;font-size:10px}.hub-notification-panel{right:8px;top:48px;width:calc(100vw - 16px);max-height:calc(100dvh - 64px)}.hub-notification-toasts{right:8px;bottom:8px;width:calc(100vw - 16px)}}

/* The bell is a separate header action; its accessible label retains unread count. */
html body .workspace-bar #hubNotificationButton{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 46px;width:46px;height:auto;min-height:0;align-self:stretch;gap:0;margin:0;padding:8px;border:0;border-inline-start:1px solid var(--hub-border);border-radius:0;background:transparent;color:var(--hub-accent)}
html body .workspace-bar #hubNotificationButton:is(:hover,:focus-visible){background:var(--hub-accent-soft)}
html body .workspace-bar #hubNotificationButton:focus-visible{outline:2px solid var(--hub-accent);outline-offset:-2px}
html body .workspace-bar #hubNotificationButton svg{width:21px;height:21px}
html body .workspace-bar .hub-notification-label{display:none}
html body .workspace-bar .hub-notification-badge{position:absolute;right:3px;top:4px;font-size:10px}
@media(max-width:640px){html body .workspace-bar #hubNotificationButton{flex-basis:38px;width:38px;height:auto;min-height:0;padding:6px}}