.notification-center{position:relative}.notification-center [data-notification-bell]{position:relative}.notification-center svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.notification-center [data-notification-count]{position:absolute;right:-3px;top:-4px;background:#c62828;color:white;border-radius:20px;min-width:17px;padding:2px;font-size:10px}.notification-center-panel{position:absolute;right:0;top:48px;width:min(460px,calc(100vw - 28px));max-height:80vh;overflow:auto;z-index:500;border:1px solid var(--border-default,#ccd3df);background:var(--surface-secondary,#fff);color:var(--text-primary,#172033);border-radius:16px;box-shadow:0 14px 50px #0003;padding:18px}.notification-center-panel[hidden]{display:none}.notification-center-panel header,.notification-center-panel footer{display:flex;gap:12px;justify-content:space-between;align-items:center}.notification-center-panel h2{margin:0;font-size:19px}.notification-center-panel button{cursor:pointer;background:transparent;color:var(--accent,#328fea);border:0;padding:8px}.notification-center-panel button:focus-visible{outline:2px solid var(--accent,#328fea)}.notification-center-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0}.notification-center-filters label{display:flex;gap:6px;align-items:center;font-size:12px}.notification-center-filters select{max-width:185px;padding:6px}.notification-center-list{max-height:48vh;overflow:auto}.notification-center-list article{display:flex;gap:12px;padding:15px 5px;border-top:1px solid var(--border-default,#dde3ee)}.notification-center-list article.is-unread{border-left:3px solid #328fea;padding-left:9px}.notification-center-list img{width:27px;height:27px;margin-top:6px}.notification-center-list strong{display:block;margin-top:5px}.notification-center-list small{font-size:11px;color:var(--text-secondary,#526078)}.notification-center-list p{margin:6px 0;font-size:13px}.notification-center-panel footer{border-top:1px solid var(--border-default,#dde3ee);font-size:12px;margin-top:8px}@media(max-width:600px){.notification-center-panel{position:fixed;right:14px;top:75px}}

.notification-record-detail{width:min(620px,calc(100vw - 32px));border:1px solid var(--border-default,#ccd3df);border-radius:16px;padding:24px;background:var(--surface-secondary,#fff);color:var(--text-primary,#172033)}.notification-record-detail::backdrop{background:#0008}.notification-record-detail dl{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.notification-record-detail dt{font-size:12px;color:var(--text-secondary,#526078)}.notification-record-detail dd{margin:5px 0;overflow-wrap:anywhere}

/* These workspace surfaces sit inside the topbar, but use the workspace theme. */
.notification-center-panel,
.notification-record-detail {
  --surface-secondary: var(--app-surface, #000000);
  --surface-tertiary: color-mix(in srgb, var(--body-text, #cdcdcd) 6%, var(--app-surface, #000000));
  --card-text: var(--body-text, #cdcdcd);
  --ink: var(--body-text, #cdcdcd);
  --text-primary: var(--body-text, #cdcdcd);
  --text-secondary: var(--body-text, #cdcdcd);
  --muted: color-mix(in srgb, var(--body-text, #cdcdcd) 80%, var(--app-surface, #000000));
  --border-default: color-mix(in srgb, var(--body-text, #cdcdcd) 22%, transparent);
  --line: var(--border-default);
  --interactive-hover: color-mix(in srgb, var(--body-text, #cdcdcd) 6%, transparent);
  --control-color-scheme: var(--workspace-color-scheme, dark);
  background: var(--app-surface, #000000);
  color: var(--body-text, #cdcdcd);
  color-scheme: var(--workspace-color-scheme, dark);
}

.notification-center-panel h2 { color: var(--title-text, var(--text-primary)); }
.notification-center-panel button {
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 13px;
  min-height: 36px;
}
.notification-center-panel button:hover:not(:disabled) { background: var(--interactive-hover); }
.notification-center-panel button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.notification-center-panel button:disabled { opacity: .55; cursor: default; }
.notification-center-panel [data-notification-close] { font-size: 24px; line-height: 1; }
.notification-center-filters select {
  background: var(--surface-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  min-height: 36px;
  color-scheme: var(--workspace-color-scheme, dark);
}
.notification-center-filters option { background: var(--app-surface); color: var(--text-primary); }
.notification-center-filters input { accent-color: var(--body-text); }
.notification-center-list article > div { min-width: 0; overflow-wrap: anywhere; }
.notification-center-list img { filter: var(--app-logo-workspace-filter, none); }
.notification-center-list article.is-unread { background: color-mix(in srgb, var(--body-text) 3%, transparent); }
.notification-center-list small,
.notification-record-detail dt { color: var(--muted); }
.notification-center-list p { line-height: 1.5; }
.notification-center-panel footer { flex-wrap: wrap; }

@media (max-width: 600px) {
  .topbar:has(.notification-center-panel:not([hidden])) { overflow: visible; }
  .notification-center-panel { left: 14px; right: 14px; width: auto; max-height: calc(100dvh - 89px); padding: 14px; }
  .notification-center-filters { gap: 10px; }
}