.assistantImage {
  width: fit-content;
  max-width: min(100%, 28rem);
  margin: 0.65rem 0;
}

.assistantImageViewport {
  position: relative;
  display: grid;
  min-width: min(12rem, 100%);
  min-height: 6rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-md);
  background:
    linear-gradient(45deg, var(--mantine-color-default) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mantine-color-default) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mantine-color-default) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mantine-color-default) 75%);
  background-position:
    0 0,
    0 0.45rem,
    0.45rem -0.45rem,
    -0.45rem 0;
  background-size: 0.9rem 0.9rem;
}

.assistantImageViewport > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 24rem;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}

.assistantImageStatus {
  position: absolute;
  inset: 0;
  min-height: 6rem;
  color: var(--mantine-color-dimmed);
  background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent);
}

.assistantImageCaption {
  max-width: 100%;
  padding: 0.3rem 0.15rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:global(td) .assistantImage {
  width: 2rem;
  margin: 0 auto;
}

:global(td) .assistantImageViewport,
:global(td) .assistantImageStatus {
  min-width: 2rem;
  min-height: 2rem;
}

:global(td) .assistantImageViewport {
  border-radius: var(--mantine-radius-sm);
}