/* Artifact cards (web/artifactcard.js): what a message delivered, each a
 * small card (a thumbnail or a type icon, and a short name) one tap from the
 * thing, one fill step off the page (no border, glass or shadow), in a row
 * that wraps under Share's answer and beside a finished chat's report in the
 * home; on a call, the latest in a strip above the composer that scrolls
 * sideways. A 44px tap on every screen. */

.artifact-cards { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }

/* Inside the answer: the bubble's column, under the words (row 2 of the turn's grid, transcript.css). */
.turn-agent > .artifact-cards { grid-row: 3; width: 100%; max-width: 34rem; margin-top: var(--sv-space-2); }

/* Beside a report in the home: the answer column, where the report's own
 * words line up (the report card itself starts at the transcript's edge). */
.transcript > .artifact-cards { margin-left: 36px; max-width: min(100%, 34rem); }

.artifact-card {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 44px;
  max-width: 13rem;
  padding: 3px var(--sv-space-3) 3px 3px;
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  background: var(--sv-fill-2);
  color: var(--sv-ink);
  font: 500 var(--ui-meta) / 1.2 var(--sv-font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.artifact-card:hover { background: var(--sv-fill-3); }
.artifact-card:active { background: var(--sv-fill-4); }
.artifact-card:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.artifact-card-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sv-radius);
  background: var(--sv-fill-2);
  color: var(--sv-ink-secondary);
  overflow: hidden;
}
.artifact-card-thumb .media-thumb { display: grid; place-items: center; width: 100%; height: 100%; } /* a box: the observer that loads it sees only boxes */
.artifact-card-thumb :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.artifact-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a call: the latest, newest first, just above the composer. */
.artifact-strip {
  align-self: center;
  width: min(100% - 2 * var(--sv-space-5), var(--reading));
  display: flex;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.artifact-strip[hidden] { display: none; }
.artifact-strip::-webkit-scrollbar { display: none; }
.artifact-strip > .artifact-card { max-width: 10rem; }

@media (max-width: 760px) {
  .artifact-strip { width: calc(100% - 2 * var(--sv-space-3)); }
}