.notifications-holder,
.notifications-menu {
  position: relative;
  display: grid;
  place-items: center;
}

.notification-badge {
  position: absolute;
  top: -.16rem;
  right: -.38rem;
  z-index: 8;
  display: grid;
  place-items: center;
  min-width: 1.62rem;
  height: 1.12rem;
  padding: 0 .3rem 0 .42rem;
  border: 1px solid var(--notification-alert, #ed7653);
  background: #29120d;
  color: #ffd4c8;
  font: 700 .7rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .03em;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow: inset 0 0 10px rgba(237, 118, 83, .16), 0 0 10px rgba(237, 118, 83, .42);
}

.notification-badge::before {
  content: "";
  position: absolute;
  top: .2rem;
  bottom: .2rem;
  left: .22rem;
  width: 2px;
  background: var(--notification-alert, #ed7653);
  box-shadow: 0 0 5px var(--notification-alert, #ed7653);
}

.notification-target-lock {
  position: absolute;
  top: -.43rem;
  right: -.69rem;
  z-index: 7;
  width: 2.28rem;
  height: 1.75rem;
  pointer-events: none;
  animation: notification-target-lock 2.2s cubic-bezier(.2, .8, .2, 1) infinite;
}

.notification-target-lock::before,
.notification-target-lock::after {
  content: "";
  position: absolute;
  inset: 0;
}

.notification-target-lock::before {
  background:
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 0 0 / 8px 1px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 100% 0 / 8px 1px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 100% 0 / 1px 8px no-repeat;
}

.notification-target-lock::after {
  background:
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 0 100% / 8px 1px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 100% 100% / 8px 1px no-repeat,
    linear-gradient(var(--notification-alert, #ed7653), var(--notification-alert, #ed7653)) 100% 100% / 1px 8px no-repeat;
}

.notification-beacon {
  position: absolute;
  top: -.8rem;
  left: 50%;
  z-index: 0;
  width: 1px;
  height: 4.3rem;
  pointer-events: none;
  background: linear-gradient(transparent, var(--cyan), transparent);
  box-shadow: 0 0 8px var(--cyan);
  transform: translateX(-50%) scaleY(.2);
  animation: notification-beacon 2.2s ease-in-out infinite;
}

.has-unseen-notifications > .utility-button > svg {
  position: relative;
  z-index: 4;
  animation: notification-beacon-bell 2.2s ease-in-out infinite;
}

@keyframes notification-beacon {
  0%, 100% { opacity: 0; transform: translateX(-50%) scaleY(.2); }
  35%, 60% { opacity: .65; transform: translateX(-50%) scaleY(1); }
}

@keyframes notification-beacon-bell {
  0%, 100% { filter: none; color: inherit; }
  40%, 58% { filter: drop-shadow(0 0 12px rgba(var(--theme-rgb), 1)); color: #fff; }
}

@keyframes notification-target-lock {
  0%, 100% {
    opacity: .18;
    filter: none;
    transform: scale(1.24);
  }
  35%, 60% {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--notification-alert, #ed7653));
    transform: scale(1);
  }
}

.notifications-panel {
  position: absolute;
  top: calc(100% + .65rem);
  right: -7rem;
  z-index: 118;
  display: none;
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(68vh, 36rem);
  overflow: auto;
  border: 1px solid rgba(var(--theme-rgb), .42);
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(var(--theme-rgb), .018) 5px),
    rgba(1, 10, 12, .97);
  box-shadow: inset 0 0 28px rgba(var(--theme-rgb), .055), 0 18px 45px rgba(0, 0, 0, .72), 0 0 20px rgba(var(--theme-rgb), .12);
  color: var(--ink);
  scrollbar-color: rgba(var(--theme-rgb), .45) transparent;
}

.notifications-menu.is-open .notifications-panel { display: block; }

.notifications-panel::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: .66rem;
}

.notifications-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .82rem .9rem;
  border-bottom: 1px solid rgba(var(--theme-rgb), .24);
  background: rgba(1, 10, 12, .98);
}

.notifications-heading span { display: grid; gap: .22rem; }
.notifications-heading strong { font: 600 .86rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .16em; }
.notifications-heading small { color: rgba(var(--theme-rgb), .5); font: 600 .52rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .16em; }
.notifications-heading b { color: var(--cyan); font: 600 .58rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .12em; }

.notifications-list { display: grid; }

.notification-item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .72rem;
  padding: .82rem .9rem;
  border-bottom: 1px solid rgba(var(--theme-rgb), .12);
  color: var(--ink);
  text-decoration: none;
}

.notification-item:hover,
.notification-item:focus-visible {
  outline: none;
  background: rgba(var(--theme-rgb), .08);
  box-shadow: inset 2px 0 var(--cyan);
}

.notification-glyph {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(var(--theme-rgb), .3);
  background: rgba(var(--theme-rgb), .07);
  color: var(--cyan);
}

.notification-glyph svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.notification-copy { display: grid; gap: .24rem; min-width: 0; }
.notification-copy strong { font: 650 .7rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .12em; }
.notification-copy b { overflow: hidden; color: var(--cyan); font: 600 .61rem/1.2 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.notification-copy > span { color: rgba(210, 232, 226, .58); font: 400 .61rem/1.35 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .04em; }
.notification-time { width: 3.8rem; color: rgba(var(--theme-rgb), .47); font: 600 .52rem/1.2 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-align: right; }
.notification-time.is-action-required { width: 4.8rem; color: rgb(var(--hud-amber-rgb)); }

.notification-empty {
  margin: 0;
  padding: 2rem 1rem;
  color: rgba(var(--theme-rgb), .56);
  font: 600 .65rem/1.4 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .13em;
  text-align: center;
  text-decoration: none;
}

.notifications-panel footer {
  padding: .62rem .8rem;
  color: rgba(var(--theme-rgb), .4);
  font: 600 .49rem/1.35 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .notification-beacon,
  .notification-target-lock,
  .has-unseen-notifications > .utility-button > svg { animation: none; }
  .notification-beacon { opacity: .35; transform: translateX(-50%) scaleY(.72); }
  .notification-target-lock { opacity: .75; transform: scale(1); }
}

@media (max-width: 760px) {
  .notifications-panel { position: fixed; top: 7.2rem; right: .75rem; }
}