.notification-center{position:relative}.notification-button{position:relative;display:grid;width:38px;height:38px;padding:0;place-items:center;border:1px solid #2b3a4d;border-radius:12px;background:#111b28;color:#dce6f3;font-size:20px}.notification-button:hover,.notification-button[aria-expanded=true]{border-color:#7c6cff;background:rgba(124,108,255,.14)}.notification-button b{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border:2px solid #0b1018;border-radius:12px;background:#ee5e79;color:#fff;font-size:10px;line-height:15px}.notification-panel{position:absolute;z-index:70;right:0;top:48px;width:min(430px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 92px));overflow:hidden;border:1px solid #2a3a50;border-radius:18px;background:#0d1622;box-shadow:0 24px 70px rgba(0,0,0,.5)}.notification-panel>header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px}.notification-panel>header small{color:#7f91aa;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.notification-panel>header h2{margin:3px 0 0;font-size:20px}.notification-panel>header button{width:32px;height:32px;padding:0;font-size:20px}.notification-summary{display:flex;align-items:center;gap:12px;padding:10px 18px;border-block:1px solid #223145;color:#8fa2b9;font-size:11px}.notification-summary strong{color:#fff}.notification-summary button{margin-left:auto;padding:6px 8px;border:0;background:transparent;color:#aa9fff;font-size:11px}.notification-filters{display:flex;gap:6px;padding:12px 18px;overflow-x:auto}.notification-filters button{padding:6px 9px;white-space:nowrap;border:1px solid #26364a;border-radius:999px;background:#111d2b;color:#91a3b9;font-size:10px}.notification-filters button.active{border-color:#7568e8;background:rgba(124,108,255,.16);color:#dcd8ff}.notification-list{display:grid;max-height:500px;overflow:auto;padding:0 10px 12px}.notification-item{position:relative;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;padding:13px 8px;border-bottom:1px solid #1d2b3d;cursor:pointer}.notification-item:hover{background:#111d2b}.notification-item.read{opacity:.65}.notification-severity{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#76869a}.notification-item[data-severity=high] .notification-severity{background:#f0ad4e}.notification-item[data-severity=urgent] .notification-severity{background:#ee5e79;box-shadow:0 0 0 4px rgba(238,94,121,.1)}.notification-copy strong,.notification-copy span,.notification-copy small{display:block}.notification-copy strong{font-size:12px;color:#edf3fb}.notification-copy span{margin-top:4px;color:#9bacc0;font-size:11px;line-height:1.35}.notification-copy small{margin-top:6px;color:#6f8299;font-size:9px}.notification-dismiss{align-self:start;padding:2px 5px;border:0;background:transparent;color:#66798f;font-size:15px}.notification-dismiss:hover{color:#fff}.notification-empty{padding:52px 24px;text-align:center;color:#73869d;font-size:12px}.notification-loading{padding:32px;text-align:center;color:#8496ac}
@media(max-width:760px){.notification-center{position:static}.notification-panel{position:fixed;inset:12px 12px 84px;width:auto;max-height:none}.notification-list{max-height:calc(100vh - 280px)}}

/*
 * Keep the notification layer above animated workspace surfaces. Page entrance
 * animations create stacking contexts, so a z-index on the popup alone is not
 * sufficient when the browser is zoomed.
 */
.workspace-topbar {
  position: relative;
  z-index: 100;
}

.notification-center {
  z-index: 101;
}

.notification-panel {
  z-index: 102;
  overscroll-behavior: contain;
}

/*
 * Browser zoom reduces the usable viewport before the mobile navigation is
 * activated. Detach the popup from the account bar early enough to prevent it
 * from colliding with dashboard cards and decorative graphics.
 */
@media (max-width: 1100px) {
  .notification-center {
    position: static;
  }

  .notification-panel {
    position: fixed;
    top: 72px;
    right: 16px;
    bottom: 16px;
    width: min(430px, calc(100vw - 32px));
    max-height: calc(100dvh - 88px);
  }

  .notification-list {
    max-height: calc(100dvh - 270px);
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  .notification-panel {
    inset: 12px 12px 84px;
    width: auto;
    max-height: none;
  }

  .notification-list {
    max-height: calc(100dvh - 280px);
  }
}

@media (max-height: 520px) and (min-width: 761px) {
  .notification-panel {
    top: 12px;
    max-height: calc(100dvh - 24px);
  }

  .notification-panel > header {
    padding-block: 12px 8px;
  }

  .notification-filters {
    padding-block: 8px;
  }

  .notification-list {
    max-height: calc(100dvh - 205px);
  }
}