Write a minimal, self-contained vanilla CSS snippet for styling LLM conversations. It should style HTML elements semantically like github's markdown styles. For example, <h1>, <h1>, <b>, etc. should be styled directly without needing to add extra styles. No need to worry about syntax highlighting. Assume all contents are directly in the <html> element. Additionally include a special class "user-message" that wraps the content in a chat bubble like ChatGPT's interface.

Here’s a minimal, self-contained vanilla CSS snippet that provides clean, GitHub-like Markdown styling for semantic HTML elements and adds a .user-message chat bubble style inspired by ChatGPT’s interface:

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #24292e;
  background-color: #ffffff;
  padding: 1.5rem;
  max-width: 720px;
  margin: auto;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.25;
}
h1 { font-size: 2em; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.3em; }
h2 { font-size: 1.5em; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.2em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; color: #6a737d; }

/* Text */
p, ul, ol, blockquote, pre, table {
  margin-top: 0;
  margin-bottom: 1em;
}
b, strong { font-weight: 600; }
em, i { font-style: italic; }
code, pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95em;
  background-color: #f6f8fa;
  border-radius: 4px;
}
code {
  padding: 0.2em 0.4em;
}
pre {
  padding: 0.8em;
  overflow-x: auto;
}

/* Lists */
ul, ol {
  padding-left: 2em;
}

/* Blockquotes */
blockquote {
  margin: 0;
  padding-left: 1em;
  border-left: 0.25em solid #dfe2e5;
  color: #6a737d;
}

/* Links */
a {
  color: #0366d6;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Horizontal rule */
hr {
  height: 1px;
  border: 0;
  background: #e1e4e8;
  margin: 2em 0;
}

/* User message bubble */
.user-message {
  background: #e5f3ff;
  border: 1px solid #c8e1ff;
  border-radius: 12px;
  padding: 0.75em 1em;
  margin: 1em 0;
  max-width: 85%;
  align-self: flex-end;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

✅ Features:

You can drop this CSS in a <style> tag in a standalone HTML document and it will “just work.”