/* Quiet event rows, with the timestamp opposite the title. */
.notification-list { display: grid; gap: 2px; }
.notification-list .notification-item {
  display: block;
  width: 100%; margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.notification-list .notification-item.unread { background: #087cff0c; }
.notification-list .notification-item:focus-visible { outline: 2px solid #78b2ff; outline-offset: -2px; }
.notification-list .notification-item:active { background-color: #ffffff08; transform: none; }
.notification-copy { display: block; min-width: 0; }
.notification-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.notification-label { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; min-width: 0; }
.notification-time { flex-shrink: 0; padding-top: 2px; color: #8d99aa; text-align: right; font-size: 10px; line-height: 1.4; font-weight: 400; font-variant-numeric: tabular-nums; }
.notification-list .notification-title { display: block; margin: 0; color: #edf1f7; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.notification-reference { color: #9aaac0; font-size: 11px; font-weight: 500; white-space: nowrap; }
.notification-message { display: block; margin-top: 4px; color: #a6b0bf; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-reward { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.notification-reward strong { margin: 0; color: #f3f6fc; font-size: 16px; font-weight: 650; line-height: 1.2; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.notification-reward > span { color: #8a98ab; font-size: 10px; }
.notification-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; color: #7f8b9d; font-size: 10px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.notification-new { display: inline-flex; align-items: center; gap: 4px; color: #84b7ff; font-size: 9px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.notification-new > span { width: 3px; height: 3px; border-radius: 50%; background: #398bff; }

.inbox-popover {
  position: fixed; inset: auto; margin: 0; padding: 0; max-width: calc(100vw - 16px); overflow: hidden; box-sizing: border-box;
  /* Keep the same column layout while the native popover exits the top layer. */
  flex-direction: column;
  color: #f3f5fa; background: #1c2028; border: 1px solid #b7c7df26; border-radius: 22px;
  /* One opaque surface; an expanded clip used to cut the shadow into a lower shelf. */
  box-shadow: 0 12px 28px #00000040, inset 0 1px 0 #ffffff08;
  isolation: isolate; background-clip: border-box;
  backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
  opacity: 0; translate: none; transform: translateY(-4px);
  clip-path: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out, display 140ms allow-discrete, overlay 140ms allow-discrete;
}
.inbox-popover:popover-open {
  display: flex;
  opacity: 1; transform: none;
  transition-duration: 160ms;
}
.inbox-popover:not(:popover-open) { pointer-events: none; }
@starting-style { .inbox-popover:popover-open { opacity: 0; transform: translateY(-4px); } }
.inbox-popover::backdrop { background: transparent; }
.inbox-popover-head { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 9px; padding: 6px 10px 2px; }
.inbox-popover-head:not(:has(> :not([hidden]))) { display: none; }
.inbox-popover-head:not(:has(> :not([hidden]))) + .inbox-popover-content { padding-top: 6px; }
.inbox-unread-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px; color: #92c0ff; background: #087cff24; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inbox-unread-count[hidden] { display: none; }
.inbox-popover-head .icon-button { width: 30px; height: 30px; flex-shrink: 0; color: #98a5b7; border: 0; background: #ffffff05; border-radius: 50%; }
.inbox-popover-head .icon-button:active { transform: none; }
.inbox-popover-content { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 6px; scrollbar-width: thin; }
.inbox-popover .empty-state { padding: 24px 12px 32px; font-size: 13px; line-height: 1.5; }
@media (hover: hover) {
  .notification-list .notification-item:hover { background-color: #ffffff06; }
  .inbox-popover-head .icon-button:hover { background: #ffffff0b; color: #edf1f7; }
}
@media (prefers-reduced-motion: reduce) {
  .inbox-popover, .notification-list .notification-item { transition: none; }
  @starting-style { .inbox-popover:popover-open { opacity: 1; transform: none; } }
}

.inbox-popover[hidden], .inbox-popover-head[hidden] { display: none; }
.inbox-popover-head[hidden] + .inbox-popover-content { padding-top: 6px; }
.inbox-popover.inbox-fallback:not([hidden]) { display: flex; opacity: 1; transform: none; pointer-events: auto; z-index: 30; }