/* search.js: a search's message hits, one group a chat, and the message one opens. */

.chats .rail-hits { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); margin-top: var(--sv-space-2); }
.chats .c-hit-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.chats button.c-hit-head { color: var(--sv-ink); font-weight: 500; }
.chats button.c-hit { padding: var(--sv-space-1) var(--sv-space-2) var(--sv-space-1) calc(var(--sv-space-3) + var(--sv-space-4)); }

/* The same box on the Recents page (recents.js): the rail's layout, the
 * board's row rhythm, none of the rail's indent. */
.board .rail-hits { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); margin: var(--sv-space-6) 0 0; }
.board .rail-group-head { margin: 0 0 var(--sv-space-1); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.board .c-hit-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.board button:is(.c-hit-head, .c-hit) {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  width: 100%;
  min-height: 40px;
  margin: 0 calc(-1 * var(--sv-space-3));
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--sv-radius);
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  font-weight: 400;
  transition: background var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
}
.board button.c-hit-head { color: var(--sv-ink); font-weight: 500; }
.board button:is(.c-hit-head, .c-hit):hover { background: var(--ws-hover); color: var(--sv-ink); }
.board button.c-hit { padding: var(--sv-space-1) var(--sv-space-3); }
.board .c-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .c-when { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.board .rail-empty { margin: 0; padding: var(--sv-space-2) var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-text); }

@media (hover: none) and (pointer: coarse) {
  .board button:is(.c-hit-head, .c-hit) { min-height: 44px; }
}
.c-hit-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.35; overflow-wrap: anywhere; }
.c-hit-who { color: var(--sv-ink-tertiary); }
.c-hit-text mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--sv-accent) 26%, transparent); color: var(--sv-ink); }
.transcript :is(.turn-user, .chat-report).search-hit, .transcript .turn-agent.search-hit > .text { outline: 2px solid color-mix(in srgb, var(--sv-accent) 60%, transparent); outline-offset: 3px; }