/* The notification bell, its dropdown and the top-right toasts (see
   notifications/_bell, _panel and notifications_controller.js). Toast markup
   is built in JS, so its styling lives here as plain classes rather than
   Tailwind utilities. Every animation is a one-shot entrance with a
   reduced-motion fallback at the bottom. */

/* ---- bell + badge ------------------------------------------------------- */
.notification-bell__icon { transform-origin: 50% 0; }
.notification-bell--ring .notification-bell__icon { animation: notification-bell-ring 0.9s ease-in-out; }

.notification-badge {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: var(--pill-blue-text);
  color: var(--page-bg);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-align: center;
}
.notification-badge--pop { animation: notification-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes notification-bell-ring {
  0% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
@keyframes notification-badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ---- dropdown ----------------------------------------------------------- */
.notification-panel:not(.hidden) { animation: notification-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top left; }
.notification-item .notification-unread-dot { visibility: hidden; }
.notification-item--unread .notification-unread-dot { visibility: visible; }
.notification-item--unread { background: color-mix(in srgb, var(--pill-blue-bg) 45%, transparent); }
.notification-item--arriving { animation: notification-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes notification-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes notification-item-in {
  from { opacity: 0; transform: translateY(-10px); background: var(--pill-amber-bg); }
  to { opacity: 1; transform: none; }
}

/* ---- toasts ------------------------------------------------------------- */
.notification-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.notification-toast {
  --toast-accent: var(--pill-amber-text);
  --toast-accent-bg: var(--pill-amber-bg);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: var(--surface-elevated);
  box-shadow: var(--card-shadow);
  animation: notification-toast-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.notification-toast--blue { --toast-accent: var(--pill-blue-text); --toast-accent-bg: var(--pill-blue-bg); }
.notification-toast--green { --toast-accent: var(--pill-green-text); --toast-accent-bg: var(--pill-green-bg); }
.notification-toast.is-leaving { animation: notification-toast-out 0.3s ease-in both; }

.notification-toast__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 2.25rem 1rem 0.875rem;
  color: var(--page-text);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}
.notification-toast__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--toast-accent-bg);
  color: var(--toast-accent);
  animation: notification-toast-icon 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.notification-toast__icon svg { width: 1.125rem; height: 1.125rem; }

.notification-toast__close {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.notification-toast__close:hover { color: var(--page-text); }

.notification-toast__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--toast-accent);
  transform-origin: left;
  animation: notification-toast-progress linear forwards;
}
.notification-toast.is-paused .notification-toast__progress { animation-play-state: paused; }

@keyframes notification-toast-in {
  0% { opacity: 0; transform: translateX(110%) scale(0.95); }
  100% { opacity: 1; transform: none; }
}
@keyframes notification-toast-out {
  to { opacity: 0; transform: translateX(110%) scale(0.95); }
}
@keyframes notification-toast-icon {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: none; }
}
@keyframes notification-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-bell--ring .notification-bell__icon,
  .notification-badge--pop,
  .notification-panel:not(.hidden),
  .notification-item--arriving,
  .notification-toast,
  .notification-toast.is-leaving,
  .notification-toast__icon,
  .notification-toast__progress { animation: none; }
}