jan/web-app/src/styles/markdown.css

.markdown {
  @apply text-inherit;

  &.is-user {
    p {
      line-height: 1.6;
      margin-bottom: 1em;
      &:first-child {
        margin-bottom: 0;
      }
    }
  }

  /* Headings */
  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--text-2xl);
    line-height: 1.3;
  }

  h3 {
    font-size: var(--text-xl);
    line-height: 1.4;
  }

  h4 {
    font-size: var(--text-lg);
    line-height: 1.4;
  }

  h5 {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  h6 {
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  /* Paragraphs and text */
  p {
    line-height: 1.6;
    margin-bottom: 1em;
  }

  strong {
    font-weight: 600;
  }

  em {
    font-style: italic;
  }

  del {
    text-decoration: line-through;
  }

  /* Lists */
  ul,
  ol {
    line-height: 1.6;
    margin-bottom: 1em;
    padding-left: 1.5em;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin-bottom: 0.5em;
  }

  li > ul,
  li > ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  li > ol {
    list-style-type: lower-roman;
  }

  li > ul {
    list-style-type: circle;
  }

  /* Blockquotes */
  blockquote {
    line-height: 1.6;
    border-left: 4px solid var(--color-accent);
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
    opacity: 0.8;
  }

  /* Code */
  code {
    font-family: monospace;
    @apply bg-main-view-fg/6 text-main-view-fg;
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }

  pre {
    font-family: monospace;
    @apply bg-main-view-fg/6 text-main-view-fg;
    overflow-x: auto;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  pre code {
    background-color: transparent;
    padding: 8px;
    @apply !text-sm;
    display: inline-block;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    margin-bottom: 1em;
    border-spacing: 0;
    display: block;
    max-width: max-content;
    overflow-x: auto;
    font-variant: tabular-nums;
  }

  th {
    font-weight: 600;
    text-align: left;
    padding: 0.75em 1em;
    @apply border border-main-view-fg/20;
  }

  td {
    padding: 0.75em 1em;
    @apply border border-main-view-fg/20;
  }

  tr:nth-child(even) {
    @apply bg-main-view-fg/5;
  }

  /* Links */
  a {
    color: var(--color-primary);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  ul.contains-task-list {
    list-style: none;
    padding-left: 0;
  }

  ol,
  ul {
    list-style: auto;
    padding-left: 16px;
    white-space: normal;
    list-style-position: inside;
    li {
      p {
        display: inline;
      }
    }
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1em;
  }

  /* Horizontal rule */
  hr {
    border: 0;
    height: 1px;
    @apply bg-main-view-fg/50;
    opacity: 0.2;
    margin: 2em 0;
  }
}
[data-tool-call-block] + [data-tool-call-block] {
  margin-top: 16px;
}