.notification-button .notification-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -5px;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 14px rgba(239, 68, 68, .28);
  z-index: 2;
}

.notification-button.notification-arrived {
  animation: notificationButtonPulse .75s ease both;
}

.notification-button.notification-arrived > .bi-bell {
  display: inline-block;
  transform-origin: 50% 0;
  animation: notificationBellRing .75s ease both;
}

.notification-button.notification-arrived .notification-count {
  animation: notificationBadgePop .55s cubic-bezier(.2, .85, .32, 1.35) both;
}

.live-notification-toast-container {
  top: 74px !important;
  z-index: 1090;
}

.live-notification-toast {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
}

.live-notification-toast .toast-header {
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.live-notification-toast.severity-success .toast-header > i { color: #16a34a; }
.live-notification-toast.severity-warning .toast-header > i { color: #d97706; }
.live-notification-toast.severity-danger .toast-header > i { color: #dc2626; }
.live-notification-toast.severity-info .toast-header > i { color: #4f46e5; }

@keyframes notificationBellRing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(18deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-6deg); }
}

@keyframes notificationButtonPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, .12); }
}

@keyframes notificationBadgePop {
  0% { transform: scale(.55); opacity: .2; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .notification-button.notification-arrived,
  .notification-button.notification-arrived > .bi-bell,
  .notification-button.notification-arrived .notification-count {
    animation: none;
  }
}