.assistant-message h3 {
  padding-top: 0.5rem;
}

.assistant-message ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
}

.assistant-message ul {
  list-style-type: disc;
  margin-left: 1.5rem;
}

.assistant-message hr {
  border-top: 1px solid #444;
  margin: 1rem 0;
}

.assistant-message p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Markdown from the agent carries no classes of its own, and Tailwind's reset
   leaves an anchor looking exactly like the text around it. Styled here rather
   than inline for the same reason the list and rule styles above are.

   Drawn as a chip rather than as underlined text: a link buried in a paragraph
   of an assistant's reply is not somewhere a reader is looking for one, so it
   has to announce itself as something to open — the chevron says where it goes.
   The chip borrows the card chrome the rest of the app uses, a tinted fill
   inside a one-pixel ring.

   box-decoration-break keeps the padding and the ring on both halves of a chip
   that wraps across a line break; without it a long recipe title comes apart. */
.assistant-message a {
  color: var(--color-indigo-200, #c7d2fe);
  background-color: color-mix(in oklab, var(--color-indigo-400, #818cf8) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-indigo-400, #818cf8) 35%, transparent);
  border-radius: 0.375rem;
  padding: 0.05rem 0.4rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 150ms, color 150ms;
}

.assistant-message a::after {
  content: " ›";
  opacity: 0.75;
}

.assistant-message a:hover {
  color: var(--color-white, #fff);
  background-color: color-mix(in oklab, var(--color-indigo-400, #818cf8) 32%, transparent);
}

.assistant-message a:focus-visible {
  outline: 2px solid var(--color-indigo-400, #818cf8);
  outline-offset: 2px;
}