/* Inline fallback without JS; enhanced cards slide in like the PIM panel. */
.notifications { flex-shrink: 0; }
.notification {
  --notification-accent: var(--link);
  --notification-tint: var(--accent-surface);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--notification-accent);
  border-radius: .85rem;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  pointer-events: auto;
}
.notification--success { --notification-accent: var(--success-text); --notification-tint: var(--success-bg); }
.notification--error { --notification-accent: var(--error-text); --notification-tint: var(--error-bg); }
.notification--warning { --notification-accent: var(--warning-text); --notification-tint: var(--warning-bg); }
.notification-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: .65rem;
  color: var(--notification-accent);
  background: var(--notification-tint);
}
.notification-copy { flex: 1; min-width: 0; padding: .1rem 0; }
.notification-title { margin: 0 0 .2rem; font-size: .86rem; font-weight: 750; color: var(--heading); }
.notification-message { margin: 0; font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.notification-close:not([hidden]) {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -.35rem -.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--muted);
}
.notification-close:hover { background: var(--hover); color: var(--heading); }
.notification-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--notification-tint); }
.notification-progress span { display: block; height: 100%; background: var(--notification-accent); transform-origin: left; }
.notifications--enhanced {
  position: fixed;
  z-index: 100;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(38rem, calc(100% - 2rem));
  max-height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem;
  pointer-events: none;
}
.notifications--enhanced .notification { margin: .5rem 0 0; animation: notification-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.notifications--enhanced .notification--leaving { animation: notification-out .2s ease-in both; }
@keyframes notification-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notification-out { to { opacity: 0; transform: translateY(16px); } }
@media (max-width: 480px) {
  .notifications--enhanced { width: calc(100% - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .notification { gap: .65rem; padding: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .notifications--enhanced .notification, .notifications--enhanced .notification--leaving { animation: none; }
  .notification-progress span { transition: none !important; }
}