/* Notification rows in the end panel. */
@layer components {
  /* ——— Notifications ———
     Rows in the end panel, separated by hairlines and nothing else. */
  .notification {
    display: flex;
    align-items: start;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);

    & + .notification {
      border-block-start: var(--border);
    }
  }

  .notification-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
    text-decoration: none;
  }

  /* The caught-up note shows only while nothing is unread — the read list below
     is history and does not count as something waiting for you.
     :has(), not :empty — Turbo removals leave whitespace text nodes behind.
     .empty-note is this hook and nothing else; its voice is the view's
     utilities, so no stylesheet owns a rule for it. */
  #notifications_unread:has(.notification) + .empty-note {
    display: none;
  }

  /* The bell wears the unread dot (avatars.css) while something waits — the
     one unread mark outside the panel, so a phone, where the panel is a
     whole screen away, says so at all. The count lives on the panel
     (app_badge_controller), which outlasts the list a ping swaps out. */
  body:not(:has(#panel[data-unread])) label[for="panel-toggle"] .unread-dot {
    display: none;
  }

  /* And history stays out of the way until there is some. */
  #notifications_seen:not(:has(.notification)) {
    display: none;
  }
}