/* The Share home's Details > Activity (activitychats.js, fed by proactive.js):
 * Needs you, Running, Finished since you last looked. One quiet row per chat:
 * the row is the panel's row material (panel.css .pn-row's): the title as its
 * Open, a status mark, one line under it (why, its status, its result), and
 * on Needs you an × beside it to wave it away. */

.pn-home { display: grid; gap: var(--sv-space-3); align-content: start; padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-4); }
.pn-home[hidden], .pn-home-sec[hidden] { display: none; }
.pn-home-sec { display: grid; gap: 1px; }
.pn-home-rows { display: grid; gap: 1px; }
.needs-item { display: flex; min-width: 0; }
.needs-go {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  min-height: 44px;
  padding: var(--sv-space-1) var(--sv-space-2);
  border: 0;
  border-radius: var(--sv-radius);
  background: none;
  color: var(--sv-ink-secondary);
  font: 400 var(--ui-text) / 1.4 var(--sv-font-sans);
  text-align: start;
  animation: sv-enter-row var(--sv-dur-fast) var(--sv-ease-out) both;
}
.needs-go:hover { background: var(--ws-hover); color: var(--sv-ink); }
.needs-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1em; color: var(--sv-ink-tertiary); }
.needs-mark .icon { width: 14px; height: 14px; }
.needs-item[data-status="running"] .needs-mark { color: var(--sv-ink-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .needs-item[data-status="running"] .needs-mark .icon { animation: sv-breathe 1.6s infinite; }
}
.needs-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.needs-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-why { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-open { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.needs-go:hover .needs-open { color: var(--sv-ink); }
.needs-x {
  flex: none;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--sv-ink-tertiary);
}
.needs-x:hover { color: var(--sv-ink); }
.needs-x .icon { width: 12px; height: 12px; }
@media (max-width: 960px) {
  /* The panel overlays a phone: the × keeps a touch target beside its row. */
  .needs-x { width: 44px; }
}
/* A row with no × (Running, Finished) keeps its Open in line with the rows that have one. */
.needs-item:not(:has(.needs-x)) .needs-go { margin-inline-end: 32px; }
@media (max-width: 960px) { .needs-item:not(:has(.needs-x)) .needs-go { margin-inline-end: 44px; } }