/* Compact conversation rows that cannot overlap their neighbours. */
.conversation-history {
  grid-auto-rows: 44px;
  gap: 2px;
}

.conversation-history .history-row {
  height: 44px;
  min-height: 44px;
  margin: 0 4px;
  overflow: visible;
  border-radius: 8px;
  transition: background-color .12s ease;
}

.conversation-history .history-row:hover,
.conversation-history .history-row:focus-within {
  background: rgba(255,255,255,.09);
}

.conversation-history .history-row.active {
  background: rgba(255,255,255,.13);
}

.conversation-history .history-row .history-open {
  height: 44px;
  min-height: 44px;
  padding: 5px 8px;
  gap: 0;
  border-radius: 8px;
  background: transparent;
}

.conversation-history .history-row .history-open:hover {
  background: transparent;
}

.conversation-history .history-title {
  line-height: 18px;
}

.conversation-history .history-meta {
  line-height: 14px;
}

.conversation-history .history-more {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, background-color .12s ease;
}

.conversation-history .history-row:hover .history-more,
.conversation-history .history-row:focus-within .history-more,
.conversation-history .history-row.active .history-more {
  opacity: .72;
  pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
  .conversation-history .history-more {
    opacity: .72;
    pointer-events: auto;
  }
}