:root {
  --notification-pink-bg: #fff0f6;
  --notification-pink-hover: #fce3ee;
  --notification-pink-text: #91385e;
  --notification-pink-border: #eab6ca;
}
:root[data-theme="dark"] {
  --notification-pink-bg: #3c2938;
  --notification-pink-hover: #4c3245;
  --notification-pink-text: #ffc0dc;
  --notification-pink-border: #82566e;
}
html:root #notification-list .notification-row.is-pinned .notification-item,
html:root .history-message.is-pinned {
  background: var(--notification-pink-bg);
  color: var(--text-primary);
  box-shadow: inset 3px 0 var(--notification-pink-border);
}
html:root #notification-list .notification-row.is-pinned .notification-item:hover {
  background: var(--notification-pink-hover);
}
html:root #notification-list .notification-item .notification-pin-note,
html:root .history-message .notification-pin-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--notification-pink-text);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
}
.notification-pin-note svg { flex: 0 0 14px; margin-top: 1px; }
html:root #notifications-toggle.has-pinned-notifications {
  background: #d84d8c26;
  border-color: #f1a4c7;
  color: #ffd3e8;
}
html:root #notifications-toggle.has-pinned-notifications:hover,
html:root #notifications-toggle.has-pinned-notifications[aria-expanded="true"] { background: #d84d8c40; }
html:root[data-theme="macos"] #notifications-toggle.has-pinned-notifications {
  color: #91385e;
  border-color: #da92b0;
}
html:root #notifications-toggle.has-pinned-notifications #notification-count { background: #b93270; color: #fff; }
html:root #notifications-toggle.has-pinned-notifications > svg {
  transform-origin: 50% 15%;
  animation: notification-bell-swing 1.9s ease-in-out infinite;
}
@keyframes notification-bell-swing {
  0%, 44%, 100% { transform: rotate(0); }
  8% { transform: rotate(15deg); }
  16% { transform: rotate(-13deg); }
  24% { transform: rotate(10deg); }
  32% { transform: rotate(-7deg); }
  38% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  html:root #notifications-toggle.has-pinned-notifications > svg { animation: none; transform: none; }
}

/* Dark translucent banners; the bell list keeps the active theme. */
html:root #toast-region .toast-notification {
  position: relative;
  color-scheme: dark;
  color: #f7f9f8;
  background: rgba(16, 23, 22, .92);
  border: 1px solid #ffffff20;
  border-radius: 14px;
  box-shadow: 0 12px 36px #07110e30, inset 0 1px #ffffff08;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
html:root #toast-region .toast-notification .toast-close { color: #c5cfcb; background: transparent; border-color: transparent; box-shadow: none; }
html:root #toast-region .toast-notification .toast-close:hover { color: #fff; background: #ffffff12; }
html:root #toast-region .toast-notification button:focus-visible { outline: 2px solid #d5e8df; outline-offset: -3px; }
html:root #toast-region .toast-notification {
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 4px 8px;
  padding: 12px 10px 14px 18px;
}
html:root #toast-region .toast-notification .toast-title {
  grid-column: 1;
  align-self: center;
  min-width: 0;
  color: inherit;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.35;
}
html:root #toast-region .toast-notification .toast-message { grid-column: 1; padding: 0; font-size: .875rem; line-height: 1.4; color: #f0f4f2; }
html:root #toast-region .toast-notification .toast-close {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  margin: -6px 0 0;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1;
}
html:root #toast-region .toast-notification .toast-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
html:root #toast-region .toast-notification .toast-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
html:root #toast-region .toast-notification .toast-open:hover { background: #ffffff06; }
@media (max-width: 700px), (pointer: coarse) {
  html:root #toast-region .toast-notification { grid-template-columns: minmax(0, 1fr) 44px; padding-left: 14px; }
  html:root #toast-region .toast-notification .toast-close { width: 44px; height: 44px; min-height: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  html:root #toast-region .toast-notification { background: #101716; backdrop-filter: none; -webkit-backdrop-filter: none; }
}