From 998b9bfb2a6df1e0bd37bd4dfcdbd10bf4a38977 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Fri, 13 Mar 2026 21:05:31 -0700
Subject: [PATCH] UI: Make all chat styles better match instruct style

---
 css/chat_style-Dark.css            |  5 +----
 css/chat_style-TheEncrypted777.css |  6 ++----
 css/chat_style-cai-chat.css        |  8 +-------
 css/chat_style-messenger.css       | 13 +++++--------
 css/chat_style-wpp.css             | 11 +----------
 css/main.css                       | 22 +++++++++++++++++++---
 6 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/css/chat_style-Dark.css b/css/chat_style-Dark.css
index 28d77a4b..02beb935 100644
--- a/css/chat_style-Dark.css
+++ b/css/chat_style-Dark.css
@@ -92,9 +92,6 @@
 }
 
 .message-body p {
-    margin-bottom: 0 !important;
-    font-size: 16px !important;
-    line-height: 1.5 !important;
     color: #e0e0e0 !important; /* Light color for text */
 }
 
@@ -123,7 +120,7 @@
     }
 
     .message-body p {
-        font-size: 14px !important; /* Smaller text for mobile */
+        font-size: 14px !important;
     }
 
     .username {
diff --git a/css/chat_style-TheEncrypted777.css b/css/chat_style-TheEncrypted777.css
index 21156ee5..b3df6710 100644
--- a/css/chat_style-TheEncrypted777.css
+++ b/css/chat_style-TheEncrypted777.css
@@ -87,10 +87,8 @@
     border-radius: 20px;
 }
 
-.message-body p {
-    margin-bottom: 0 !important;
+.message-body p, .message-body li {
     font-size: 18px !important;
-    line-height: 1.428571429 !important;
     color: rgb(243 244 246) !important;
     text-shadow: 2px 2px 2px rgb(0 0 0);
     font-weight: 500;
@@ -128,7 +126,7 @@
         padding-left: 0;
     }
 
-    .message-body p {
+    .message-body p, .message-body li {
         font-size: 16px !important;
     }
 
diff --git a/css/chat_style-cai-chat.css b/css/chat_style-cai-chat.css
index 6de32597..9cc4d4cd 100644
--- a/css/chat_style-cai-chat.css
+++ b/css/chat_style-cai-chat.css
@@ -47,16 +47,10 @@
     border-radius: 20px;
 }
 
-.message-body p {
-    font-size: 15px !important;
-    line-height: 22.5px !important;
+.message-body p, .message-body li {
     font-weight: 500;
 }
 
-.message-body p, .chat .message-body ul, .chat .message-body ol {
-    margin-bottom: 10px !important;
-}
-
 .dark .message-body p em {
     color: rgb(138 138 138) !important;
 }
diff --git a/css/chat_style-messenger.css b/css/chat_style-messenger.css
index 85178759..438b8060 100644
--- a/css/chat_style-messenger.css
+++ b/css/chat_style-messenger.css
@@ -61,8 +61,10 @@
     text-align: right;
 }
 
-.dark .circle-bot + .text div, .dark .circle-bot + .text * {
-    color: #000;
+.dark .circle-bot + .text div, .dark .circle-bot + .text *,
+.dark .chat .message .circle-bot + .text .message-body :is(h1, h2, h3, h4, h5, h6),
+.dark .chat .message .circle-bot + .text .message-body a {
+    color: #000 !important;
 }
 
 .text {
@@ -77,19 +79,14 @@
     font-weight: bold;
 }
 
-.message-body {
-}
-
 .message-body img {
     max-width: 300px;
     max-height: 300px;
     border-radius: 20px;
 }
 
-.message-body p {
-    margin-bottom: 0 !important;
+.message-body p, .message-body li {
     font-size: 15px !important;
-    line-height: 1.428571429 !important;
     font-weight: 500;
 }
 
diff --git a/css/chat_style-wpp.css b/css/chat_style-wpp.css
index 5c14fa80..ad6985d2 100644
--- a/css/chat_style-wpp.css
+++ b/css/chat_style-wpp.css
@@ -78,14 +78,8 @@
     border-radius: 12px;
 }
 
-.message-body p {
+.message-body p, .message-body li {
     font-size: 15px !important;
-    line-height: 1.4 !important;
-    font-weight: 400;
-}
-
-.message-body p:first-child {
-    margin-top: 0 !important;
 }
 
 .dark .message-body p em {
@@ -101,6 +95,3 @@
     margin-top: 8px;
 }
 
-.message-body p, .chat .message-body ul, .chat .message-body ol {
-    margin-bottom: 10px !important;
-}
diff --git a/css/main.css b/css/main.css
index 5a58c4a3..49b8f752 100644
--- a/css/main.css
+++ b/css/main.css
@@ -430,7 +430,12 @@ audio {
     font-size: 16px;
 }
 
-.dark .message-body :is(h1, h2, h3, h4, h5, h6) {
+.dark .message-body h1,
+.dark .message-body h2,
+.dark .message-body h3,
+.dark .message-body h4,
+.dark .message-body h5,
+.dark .message-body h6 {
     color: white !important;
 }
 
@@ -830,9 +835,20 @@ audio {
     }
 }
 
-.message-body ol, .message-body ul {
+.message-body p, .message-body li {
+    line-height: 1.75 !important;
+}
+
+.message-body p, .message-body ul, .message-body ol {
+    margin: 1.25em 0 !important;
+}
+
+.message-body :is(p, ul, ol):first-child {
     margin-top: 0 !important;
-    margin-bottom: 1.25em !important;
+}
+
+.message-body :is(p, ul, ol):last-child {
+    margin-bottom: 0 !important;
 }
 
 /* ----------------------------------------------