brk/website_next/ask/conversation/message/style.css

main[data-page="ask"] [data-ask-conversation] > ol > li {
  display: grid;
  gap: 0.35rem;
  max-width: 100%;

  &[data-role="user"] {
    justify-self: end;
    max-width: min(82%, 34rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0.65rem 0.65rem 0.15rem 0.65rem;
    color: var(--black);
    background: var(--white);
  }

  > strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  > div {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    > * {
      white-space: normal;
    }

    > * + * {
      margin-top: 0.75rem;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--white);
      font-weight: var(--font-weight-regular);
      line-height: 1.1;
    }

    h1,
    h2 {
      font-size: var(--font-size-lg);
    }

    h3,
    h4 {
      font-size: var(--font-size-base);
    }

    :is(ul, ol) {
      display: grid;
      gap: 0.4rem;
      padding-left: 1.35rem;
    }

    li::marker {
      color: var(--orange);
    }

    strong {
      font-weight: 600;
    }

    a {
      color: var(--white);
      text-decoration-color: var(--orange);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15em;
    }

    :not(pre) > code {
      border: 1px solid var(--ask-border);
      border-radius: 0.2rem;
      padding: 0.08em 0.28em;
      color: color-mix(in oklch, var(--orange) 72%, var(--white));
      background: var(--ask-panel);
      font-size: 0.9em;
    }

    pre {
      max-width: 100%;
      border: 1px solid var(--ask-border);
      border-radius: var(--control-radius);
      padding: 0.85rem 1rem;
      background: var(--ask-panel);
      overflow-x: auto;
      white-space: pre;

      code {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
      }
    }

    blockquote {
      border-left: 1px solid var(--orange);
      padding-left: 0.85rem;
      color: color-mix(in oklch, var(--white) 72%, transparent);
    }
  }
}

@media (max-width: 48rem) {
  main[data-page="ask"]
    [data-ask-conversation]
    > ol
    > li[data-role="user"] {
    max-width: 90%;
  }
}