/* Inbox surfaces (activity, threads, bookmarks, notifications, messages):
   the feed reads as a hairline-divided list, not a chat stream. Rows are the
   shared message partial; the DM list has its own treatment
   (dm_conversations.css on the .list-row rhythm). */

body.inbox .searches__results {
  row-gap: 0;
}

/* Cards carry their own chrome; everything else divides on hairlines */
body.inbox .searches__results > :not(.thread-card):not(.bookmark-card) {
  border-block-end: 1px solid var(--color-border);
  padding-block: 10px;
}

body.inbox .searches__results > :last-child {
  border-block-end: 0;
}

body.inbox .searches__results:has(.thread-card),
body.inbox .searches__results:has(.bookmark-card) {
  padding-inline: 16px;
  row-gap: 12px;
}

/* Activity verb rows (mentions, replies) reuse the message shell but read as
   "X mentioned you in Y" — the actor, the verb, and an accent room link — with
   a kind glyph tucked on the avatar's corner. Boosts keep their own row. */
.notification__avatar {
  position: relative;
}

.notification__kind {
  align-items: center;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  block-size: 17px;
  display: flex;
  font-size: 9px;
  inline-size: 17px;
  inset-block-end: -3px;
  inset-inline-end: -3px;
  justify-content: center;
  line-height: 1;
  position: absolute;
}

.notification__where {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

/* Today / Earlier group eyebrows. Every row carries its bucket; the eyebrow
   renders on the first row of each bucket via sibling logic, so prepended
   older pages and live-appended rows keep the labels deduped without a
   re-render. The list is ascending, so buckets only ever step earlier→today. */
body.inbox [data-activity-bucket]::before {
  color: var(--color-text-subtle);
  content: "Earlier";
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  grid-area: sep;
  letter-spacing: 0.07em;
  margin-block-end: 6px;
  text-transform: uppercase;
}

body.inbox [data-activity-bucket="today"]::before {
  content: "Today";
}

body.inbox [data-activity-bucket]:first-child::before,
body.inbox [data-activity-bucket="earlier"] + [data-activity-bucket="today"]::before {
  display: block;
}

/* Since-last-visit unread mark: an accent dot on the row's right edge */
body.inbox [data-activity-unread="true"] {
  position: relative;

  &::after {
    background-color: var(--color-accent-brand);
    border-radius: 50%;
    block-size: 8px;
    content: "";
    inline-size: 8px;
    inset-block-start: 50%;
    inset-inline-end: 4px;
    position: absolute;
    transform: translateY(-50%);
  }
}

/* The Activity kind filter rides the header bar beside the title */
.inbox-filter {
  align-items: center;
  display: flex;
  margin-inline-start: 0.5rem;
}

/* Threads inbox: each followed thread is a card — the room + an inline follow
   toggle, a "started by" byline with an optional unread pill, the root message,
   and the live reply-count footer (the embedded messages/threads chips). */
.thread-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}

/* Threads with unseen replies get the accent tint the comp draws */
.thread-card--unread {
  background-color: color-mix(in oklch, var(--color-accent-brand) 5%, var(--color-bg));
  border-color: color-mix(in oklch, var(--color-accent-brand) 30%, var(--color-border));
}

.thread-card__head {
  align-items: center;
  display: flex;
  gap: 9px;
}

.thread-card__room {
  color: var(--color-link);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.thread-card__starter {
  color: var(--color-text-subtle);
  font-size: 0.78125rem;
  white-space: nowrap;
}

/* The unseen-reply badge sits at the right edge of the head row. */
.thread-card__new {
  background-color: var(--color-accent-brand);
  border-radius: 9px;
  color: var(--color-text-reversed);
  font-size: 0.6875rem;
  font-weight: 700;
  margin-inline-start: auto;
  padding: 1px 8px;
  white-space: nowrap;
}

.thread-card__root {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
}

/* Foot row: the reply facepile takes the space so the follow toggle lands
   at the far right. */
.thread-card__foot {
  align-items: center;
  display: flex;
  gap: 10px;
}

.thread-card__foot .threads {
  flex: 1;
  min-inline-size: 0;
}

/* Bookmarks: each saved message is a card — where and when it was saved over
   the message itself, with an inline Remove. */
.bookmark-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.bookmark-card__head {
  align-items: center;
  display: flex;
  gap: 10px;
}

.bookmark-card__room {
  color: var(--color-link);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.bookmark-card__saved {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}

.bookmark-card__remove-form {
  margin-inline-start: auto;
}

.bookmark-card__remove {
  --btn-background: transparent;
  --btn-border-color: var(--color-border);
  --hover-color: transparent;
  --hover-filter: none;

  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;

  @media (any-hover: hover) {
    &:hover {
      --btn-background: var(--color-bg-hover);
    }
  }
}

.bookmark-card__message {
  display: flex;
  gap: 10px;
}

.bookmark-card__avatar {
  --avatar-size: 32px;

  flex-shrink: 0;
}

.bookmark-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.bookmark-card__byline {
  align-items: baseline;
  display: flex;
  font-size: 0.875rem;
  gap: 8px;
  margin: 0;
}

.bookmark-card__time {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Footer facepile: small overlapping participant faces (forum-card pattern) */
.thread-card .thread__avatars {
  gap: 0;
}

.thread-card .thread__avatar {
  --avatar-size: 22px;

  box-shadow: 0 0 0 2px var(--color-bg);
}

.thread-card .thread__avatar + .thread__avatar {
  margin-inline-start: -7px;
}

/* Filter-aware live streaming: the paginated Activity feed is server-filtered,
   but a live notification arrives on the inbox stream regardless of the active
   tab. When a filter is set on the container, hide any appended row whose
   activity type doesn't match — so a boost can't flash into the Mentions tab. */
#inbox[data-active-filter="mention"] [data-activity-type]:not([data-activity-type="mention"]),
#inbox[data-active-filter="thread_reply"] [data-activity-type]:not([data-activity-type="thread_reply"]),
#inbox[data-active-filter="boost"] [data-activity-type]:not([data-activity-type="boost"]) {
  display: none;
}