.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.filters a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 1em;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.95rem/1.2 var(--font-display);
  text-decoration: none;
}

.filters a[aria-current="page"] { border-color: var(--ink); box-shadow: var(--shadow-pop); }
.filters__count { padding: 0 0.5em; border-radius: var(--radius-pill); background: var(--paper-deep); font-size: 0.8rem; }

.conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-blob);
  overflow: hidden;
}

.conversation-list li + li { border-top: 2px dashed var(--line); }

.conversation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem 0.9rem;
  padding: 0.9rem 1.2rem;
  color: var(--ink);
  text-decoration: none;
}

.conversation-row:hover { background: var(--paper); color: var(--ink); }

.conversation-row__subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__meta { color: var(--ink-soft); font-size: 0.9rem; }
.conversation-row__main { min-width: 0; }

.person-photo :is(.figure, .portrait) { display: block; width: 2.4rem; height: 2.4rem; flex: none; }

@media (max-width: 560px) {
  .conversation-row { grid-template-columns: auto 1fr; }
  .conversation-row > .pill { grid-column: 2; justify-self: start; }
}

.inbox-summary { margin: 0.35rem 0 0; }

/* Status tags in search wear the same colours as the pills on each row. */
.filters a.filters__tag--needs-reply { background: var(--coral-pale); }
.filters a.filters__tag--waiting { background: var(--amber-pale); }
.filters a.filters__tag--resolved { background: var(--mint-pale); }
.filters--quiet a { border-width: 1px; font-size: 0.85rem; padding: 0.3em 0.8em; }