/* Notifications popover — composes the dropdown pattern
   (molecules/dropdown.css); this file also owns the item-row list
   (.notifications-list__*, U6) since the rows only ever render inside
   this panel. */

.app-notifications {
  position: relative;
}

.notifications-popover {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 22rem;
  max-width: calc(100vw - var(--sp-6));
  margin-top: var(--sp-2);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.notifications-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-rule);
}

.notifications-popover__title {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.notifications-popover .notifications-popover__mark-all {
  font-size: var(--fs-13);
  color: var(--color-ink-muted);
}

.notifications-popover__body {
  display: block;
  max-height: 24rem;
  overflow-y: auto;
}

/* docs/solutions/design-patterns/pico-unscoped-nav-ul-li-hijacks-any-nested-list.md */
.notifications-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notifications-list__item {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--color-rule);
}

.notifications-list__item:last-child {
  border-bottom: none;
}

/* Paint reset is `.lc-bare-btn` (atoms/button.css, (0,1,1)); this scoped
   selector sits above it at (0,2,0) so the row keeps its padding. */
.notifications-list__item .notifications-list__entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
}

.notifications-list__item[data-unread="true"] .notifications-list__entry {
  background: var(--color-surface);
}

.notifications-list__time {
  font-size: var(--fs-12);
  color: var(--color-ink-subtle);
}

.notifications-list__body {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-ink);
}

.notifications-list__directory {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-12);
  color: var(--color-ink-subtle);
}

.notifications-list__actor {
  font-weight: var(--fw-semibold);
}

.notifications-list__title {
  display: block;
  color: var(--color-ink-muted);
}

.notifications-list__empty {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-14);
}