Improve chat output and formatting

public/css/style.css

@@ -614,3 +614,146 @@ body {
     border-radius: 0.75rem;
     overflow: hidden;
 }
+
+/* Enhanced Chat Message Formatting */
+.message-text {
+    line-height: 1.6;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.message-text h3,
+.message-text h4,
+.message-text h5 {
+    color: inherit;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.message-text h3 {
+    font-size: 1.1rem;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding-bottom: 0.25rem;
+}
+
+.message-text h4 {
+    font-size: 1.05rem;
+}
+
+.message-text h5 {
+    font-size: 1rem;
+}
+
+/* Code formatting */
+.message-text .code-block {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+    margin: 0.5rem 0;
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    white-space: pre-wrap;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.message-text .inline-code {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    color: #d63384;
+}
+
+/* List formatting */
+.message-text .formatted-list {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+}
+
+.message-text .formatted-list li {
+    margin-bottom: 0.25rem;
+    line-height: 1.5;
+}
+
+.message-text ul.formatted-list {
+    list-style-type: disc;
+}
+
+.message-text ol.formatted-list {
+    list-style-type: decimal;
+}
+
+.message-text .bullet-item,
+.message-text .list-item {
+    display: list-item;
+}
+
+/* Bold and italic text */
+.message-text strong {
+    font-weight: 600;
+}
+
+.message-text em {
+    font-style: italic;
+}
+
+/* Paragraph spacing */
+.message-text br + br {
+    display: block;
+    margin: 0.5rem 0;
+    content: "";
+}
+
+/* Special styling for bot messages */
+.bot-message .message-text .code-block {
+    background-color: #f1f3f4;
+    border-color: #dadce0;
+}
+
+.bot-message .message-text .inline-code {
+    background-color: #f1f3f4;
+    border-color: #dadce0;
+    color: #1a73e8;
+}
+
+/* Special styling for user messages */
+.user-message .message-text .code-block {
+    background-color: rgba(255,255,255,0.1);
+    border-color: rgba(255,255,255,0.2);
+    color: #ffffff;
+}
+
+.user-message .message-text .inline-code {
+    background-color: rgba(255,255,255,0.1);
+    border-color: rgba(255,255,255,0.2);
+    color: #ffffff;
+}
+
+.user-message .message-text h3,
+.user-message .message-text h4,
+.user-message .message-text h5 {
+    color: #ffffff;
+    border-color: rgba(255,255,255,0.3);
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+    .message-text .code-block {
+        font-size: 0.8rem;
+        padding: 0.5rem;
+    }
+    
+    .message-text .formatted-list {
+        padding-left: 1.2rem;
+    }
+    
+    .message-text h3,
+    .message-text h4,
+    .message-text h5 {
+        font-size: 0.95rem;
+    }
+}