diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
index f6ceb932..5591f7d1 100644
--- a/css/html_instruct_style.css
+++ b/css/html_instruct_style.css
@@ -17,28 +17,19 @@
line-height: 28px !important;
}
-.dark .chat .message-body p,
-.dark .chat .message-body li,
-.dark .chat .message-body q {
+.dark .chat .message-body :is(p, li, q, h1, h2, h3, h4, h5, h6) {
color: #d1d5db !important;
}
-.chat .message-body p,
-.chat .message-body ul,
-.chat .message-body ol {
- margin-top: 1.25em !important;
- margin-bottom: 1.25em !important;
+.chat .message-body :is(p, ul, ol) {
+ margin: 1.25em 0 !important;
}
-.chat .message-body p:first-child,
-.chat .message-body ul:first-child,
-.chat .message-body ol:first-child {
+.chat .message-body :is(p, ul, ol):first-child {
margin-top: 0 !important;
}
-.chat .message-body p:last-child,
-.chat .message-body ul:last-child,
-.chat .message-body ol:last-child {
+.chat .message-body :is(p, ul, ol):last-child {
margin-bottom: 0 !important;
}
diff --git a/css/main.css b/css/main.css
index fef3d3f1..7b3910f9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -433,12 +433,60 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-top: 20px;
}
-.message-body h1,
-.message-body h2,
-.message-body h3,
+.message-body {
+ font-size: 16px;
+}
+
+.message-body :is(h1, h2, h3, h4, h5, h6) {
+ color: black !important;
+}
+
+.dark .message-body :is(h1, h2, h3, h4, h5, h6) {
+ color: white !important;
+}
+
+.message-body h1 {
+ font-weight: 800;
+ font-size: 2.25em;
+ margin-top: 0;
+ margin-bottom: 0.8888889em;
+ line-height: 1.1111111;
+}
+
+.message-body h2 {
+ font-weight: 700;
+ font-size: 1.5em;
+ margin-top: 2em;
+ margin-bottom: 1em;
+ line-height: 1.3333333;
+}
+
+.message-body h3 {
+ font-weight: 600;
+ font-size: 1.25em;
+ margin-top: 0;
+ margin-bottom: 0.6em;
+ line-height: 1.6;
+}
+
.message-body h4 {
- color: var(--body-text-color);
- margin: 20px 0 10px;
+ font-weight: 600;
+ font-size: 1em;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+ line-height: 1.5;
+}
+
+.message-body h5 {
+ font-weight: normal;
+ font-size: 1em;
+ margin: 0;
+}
+
+.message-body h6 {
+ font-weight: normal;
+ font-size: 1em;
+ margin: 0;
}
.dark .message q {