diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index 1a994b2..2f8515f 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -1117,6 +1117,26 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
+/* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */
+.ai-message pre {
+  overflow-x: auto;
+  max-width: 340px;
+}
+
+.ai-message code {
+  max-width: 340px;
+}
+
+@media (min-width: 768px) {
+  .ai-message pre {
+    max-width: 720px;
+  }
+
+  .ai-message code {
+    max-width: 720px;
+  }
+}
+
 .message-text {
   margin-bottom: 8px;
 }
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index acea63b..b756439 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -1188,6 +1188,26 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
 }
 
+/* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */
+.ai-message pre {
+  overflow-x: auto;
+  max-width: 340px;
+}
+
+.ai-message code {
+  max-width: 340px;
+}
+
+@media (min-width: 768px) {
+  .ai-message pre {
+    max-width: 720px;
+  }
+
+  .ai-message code {
+    max-width: 720px;
+  }
+}
+
 .message-text {
   margin-bottom: 8px !important;
 }