From 161012c6a699625e86f08e190f198cd428b9f83d Mon Sep 17 00:00:00 2001
From: Rodrigo Rodriguez <me@rodrigorodriguez.com>
Date: Fri, 13 Feb 2026 22:31:49 +0000
Subject: [PATCH] Update submodule changes

---
 README.md                         |   6 +-
 ui/suite/chat/chat.css            |   8 +-
 ui/suite/chat/chat.html           |   1 +
 ui/suite/css/app.css              |  16 +-
 ui/suite/css/base.css             |   5 +-
 ui/suite/css/home.css             | 152 +++++++++++++++++++
 ui/suite/css/markdown-message.css | 241 ++++++++++++++++++++++++++++++
 ui/suite/default.gbui             |   4 +
 ui/suite/index.html               |  36 ++++-
 ui/suite/js/htmx-app.js           |   8 -
 ui/suite/js/theme-manager.js      |  17 ++-
 11 files changed, 472 insertions(+), 22 deletions(-)
 create mode 100644 ui/suite/css/markdown-message.css

diff --git a/README.md b/README.md
index 51631f5..aa55049 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ For comprehensive documentation, see **[docs.pragmatismo.com.br](https://docs.pr
 ## Quick Start
 
 ```bash
-# Development mode - starts Axum server on port 3000
+# Development mode - starts Axum server on port 9000
 cargo run
 
 # Desktop mode (Tauri) - starts native window
@@ -27,7 +27,7 @@ cargo tauri dev
 
 ### Environment Variables
 
-- `BOTUI_PORT` - Server port (default: 3000)
+- `BOTUI_PORT` - Server port (default: 9000)
 
 ---
 
@@ -59,7 +59,7 @@ cargo tauri dev
 
 | Mode | Command | Description |
 |------|---------|-------------|
-| Web | `cargo run` | Axum server on port 3000 |
+| Web | `cargo run` | Axum server on port 9000 |
 | Desktop | `cargo tauri dev` | Tauri native window |
 
 ### Code Organization
diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index 1fef4df..bc8ddd1 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -232,16 +232,19 @@
 
 .message-content {
     max-width: 80%;
-    padding: 12px 16px;
+    padding: 14px 18px;
     border-radius: 16px;
-    line-height: 1.5;
+    line-height: 1.75;
     font-size: 14px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .user-message {
     background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
     color: #ffffff !important;
     border-bottom-right-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .bot-message {
@@ -249,6 +252,7 @@
     color: #000000 !important;
     border-bottom-left-radius: 4px;
     border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .bot-message,
diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index 56cc48d..60834b0 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="/suite/chat/chat.css" />
+<link rel="stylesheet" href="/suite/css/markdown-message.css" />
 
 <div class="chat-layout" id="chat-app">
     <!-- Connection Status -->
diff --git a/ui/suite/css/app.css b/ui/suite/css/app.css
index fd2db20..4300a4c 100644
--- a/ui/suite/css/app.css
+++ b/ui/suite/css/app.css
@@ -1085,9 +1085,23 @@ body {
 
 .logo-icon {
     width: 32px;
-    height: 20px;
+    height: 32px;
     color: var(--text, var(--text-primary, #ffffff));
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Theme logo image - when src is set, show as image */
+.logo-icon.logo-icon-img[src:not=""]] {
+    display: block;
+}
+
+/* Hide SVG when logo image is shown */
+.logo-icon.logo-icon-svg[style*="display: none"],
+.logo-icon.logo-icon-svg.hidden {
+    display: none !important;
 }
 
 .logo-text {
diff --git a/ui/suite/css/base.css b/ui/suite/css/base.css
index b4b0315..ce0e44c 100644
--- a/ui/suite/css/base.css
+++ b/ui/suite/css/base.css
@@ -472,14 +472,15 @@ body.no-animations .spinner {
 }
 
 .logo-icon {
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     background: linear-gradient(135deg, var(--primary), #8b5cf6);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
+    flex-shrink: 0;
 }
 
 /* ============================================ */
diff --git a/ui/suite/css/home.css b/ui/suite/css/home.css
index 903893e..49df26a 100644
--- a/ui/suite/css/home.css
+++ b/ui/suite/css/home.css
@@ -395,3 +395,155 @@
         -webkit-line-clamp: 3;
     }
 }
+
+/* ============================================ */
+/* MARKDOWN MESSAGE STYLING                    */
+/* ============================================ */
+
+/* Lists in message content */
+.message-content ul,
+.message-content ol {
+    margin: 12px 0;
+    padding-left: 24px;
+}
+
+/* List items with proper spacing from border */
+.message-content li {
+    margin: 8px 0;
+    line-height: 1.7;
+}
+
+/* Nested lists */
+.message-content ul ul,
+.message-content ol ol,
+.message-content ul ol,
+.message-content ol ul {
+    margin: 8px 0;
+}
+
+/* Bullet points */
+.message-content ul li {
+    list-style-type: disc;
+    padding-left: 8px;
+}
+
+.message-content ul li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+}
+
+/* Nested bullets */
+.message-content ul ul li {
+    list-style-type: circle;
+}
+
+.message-content ul ul ul li {
+    list-style-type: square;
+}
+
+/* Numbered lists */
+.message-content ol li {
+    list-style-type: decimal;
+}
+
+/* Nested numbered lists */
+.message-content ol ol li {
+    list-style-type: lower-alpha;
+}
+
+.message-content ol ol ol li {
+    list-style-type: lower-roman;
+}
+
+/* Lists in user messages */
+.message.user .message-content ul li::marker,
+.message.user .message-content ol li::marker {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Lists in bot messages */
+.message.bot .message-content ul li::marker,
+.message.bot .message-content ol li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+}
+
+/* Paragraphs in messages */
+.message-content p {
+    margin: 8px 0;
+    line-height: 1.7;
+}
+
+/* First and last paragraph spacing */
+.message-content p:first-child {
+    margin-top: 0;
+}
+
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+/* Headings in messages */
+.message-content h1,
+.message-content h2,
+.message-content h3,
+.message-content h4,
+.message-content h5,
+.message-content h6 {
+    margin: 16px 0 8px 0;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.message-content h1 { font-size: 1.5em; }
+.message-content h2 { font-size: 1.3em; }
+.message-content h3 { font-size: 1.15em; }
+.message-content h4 { font-size: 1.05em; }
+
+/* Code blocks */
+.message-content pre {
+    margin: 12px 0;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+/* Inline code */
+.message-content code {
+    padding: 2px 6px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+
+.message.user .message-content code {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Blockquotes */
+.message-content blockquote {
+    margin: 12px 0;
+    padding-left: 16px;
+    border-left: 3px solid var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+    font-style: italic;
+}
+
+/* Horizontal rules */
+.message-content hr {
+    margin: 16px 0;
+    border: none;
+    border-top: 1px solid rgba(128, 128, 128, 0.3);
+}
+
+/* Links in messages */
+.message-content a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: rgba(128, 128, 128, 0.5);
+    transition: text-decoration-color 0.2s;
+}
+
+.message-content a:hover {
+    text-decoration-color: currentColor;
+}
diff --git a/ui/suite/css/markdown-message.css b/ui/suite/css/markdown-message.css
new file mode 100644
index 0000000..509aa6a
--- /dev/null
+++ b/ui/suite/css/markdown-message.css
@@ -0,0 +1,241 @@
+/* Markdown Message Styling - Better lists and spacing for chat messages */
+
+/* Lists in message content */
+.message-content ul,
+.message-content ol {
+    margin: 16px 0 !important;
+    padding-left: 28px !important;
+}
+
+/* Extra space between list container edge and bullets */
+.message-content ul li,
+.message-content ol li {
+    margin-left: 0px !important;
+}
+
+/* List items with better spacing */
+.message-content li {
+    margin: 10px 0;
+    line-height: 1.8;
+    position: relative;
+    padding-left: 6px;
+}
+
+/* Nested lists with visual hierarchy */
+.message-content ul ul,
+.message-content ol ol,
+.message-content ul ol,
+.message-content ol ul {
+    margin: 12px 0;
+    padding-left: 32px;
+}
+
+/* Bullet points with better visual weight */
+.message-content ul li {
+    list-style-type: disc;
+    font-weight: 400;
+}
+
+.message-content ul li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+    font-size: 1.1em;
+}
+
+/* Nested bullets with distinct styles */
+.message-content ul ul li {
+    list-style-type: circle;
+}
+
+.message-content ul ul li::marker {
+    font-size: 1em;
+    opacity: 0.85;
+}
+
+.message-content ul ul ul li {
+    list-style-type: square;
+}
+
+.message-content ul ul ul li::marker {
+    font-size: 0.95em;
+    opacity: 0.75;
+}
+
+/* Numbered lists with better styling */
+.message-content ol li {
+    list-style-type: decimal;
+    font-weight: 500;
+}
+
+.message-content ol li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+    font-weight: 600;
+}
+
+/* Nested numbered lists with visual hierarchy */
+.message-content ol ol li {
+    list-style-type: lower-alpha;
+}
+
+.message-content ol ol li::marker {
+    font-weight: 500;
+    opacity: 0.9;
+}
+
+.message-content ol ol ol li {
+    list-style-type: lower-roman;
+}
+
+.message-content ol ol ol li::marker {
+    font-weight: 400;
+    opacity: 0.85;
+}
+
+/* Lists in user messages (white text on colored background) */
+.message.user .message-content ul li::marker,
+.message.user .message-content ol li::marker {
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.message.user .message-content ul ul li::marker,
+.message.user .message-content ol ol li::marker {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+/* Lists in bot messages with better contrast */
+.message.bot .message-content ul li::marker,
+.message.bot .message-content ol li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+}
+
+.message.bot .message-content ul ul li::marker,
+.message.bot .message-content ol ol li::marker {
+    color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+    opacity: 0.8;
+}
+
+/* Paragraphs in messages */
+.message-content p {
+    margin: 10px 0;
+    line-height: 1.75;
+}
+
+/* First and last paragraph spacing */
+.message-content p:first-child {
+    margin-top: 0;
+}
+
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+/* Lists with better visual separation from paragraphs */
+.message-content ul + p,
+.message-content ol + p,
+.message-content p + ul,
+.message-content p + ol {
+    margin-top: 14px;
+}
+
+/* Headings in messages */
+.message-content h1,
+.message-content h2,
+.message-content h3,
+.message-content h4,
+.message-content h5,
+.message-content h6 {
+    margin: 18px 0 10px 0;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+}
+
+.message-content h1 { font-size: 1.5em; }
+.message-content h2 { font-size: 1.3em; }
+.message-content h3 { font-size: 1.15em; }
+.message-content h4 { font-size: 1.05em; }
+
+/* Headings in user messages */
+.message.user .message-content h1,
+.message.user .message-content h2,
+.message.user .message-content h3 {
+    color: #ffffff;
+}
+
+/* Headings in bot messages */
+.message.bot .message-content h1,
+.message.bot .message-content h2,
+.message.bot .message-content h3 {
+    color: #1a1a1a;
+}
+
+/* Code blocks */
+.message-content pre {
+    margin: 12px 0;
+    padding: 14px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.6;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Inline code */
+.message-content code {
+    padding: 3px 7px;
+    background: rgba(0, 0, 0, 0.12);
+    border-radius: 5px;
+    font-size: 0.9em;
+    font-family: "Monaco", "Menlo", "Consolas", monospace;
+    letter-spacing: 0.02em;
+}
+
+.message.user .message-content code {
+    background: rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.message.bot .message-content code {
+    background: rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Blockquotes */
+.message-content blockquote {
+    margin: 12px 0;
+    padding-left: 16px;
+    border-left: 3px solid var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
+    font-style: italic;
+}
+
+/* Horizontal rules */
+.message-content hr {
+    margin: 16px 0;
+    border: none;
+    border-top: 1px solid rgba(128, 128, 128, 0.3);
+}
+
+/* Links in messages */
+.message-content a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: rgba(128, 128, 128, 0.5);
+    transition: text-decoration-color 0.2s;
+}
+
+.message-content a:hover {
+    text-decoration-color: currentColor;
+}
+
+/* Strong/bold text */
+.message-content strong,
+.message-content b {
+    font-weight: 600;
+}
+
+/* Emphasis/italic text */
+.message-content em,
+.message-content i {
+    font-style: italic;
+}
diff --git a/ui/suite/default.gbui b/ui/suite/default.gbui
index e50560a..0a426fb 100644
--- a/ui/suite/default.gbui
+++ b/ui/suite/default.gbui
@@ -12,6 +12,10 @@
 
         <!-- Styles -->
         <link rel="stylesheet" href="css/app.css" />
+        <!-- Config color overrides -->
+        <link rel="stylesheet" href="css/config-colors.css" />
+        <!-- Markdown message styling -->
+        <link rel="stylesheet" href="css/markdown-message.css" />
 
         <!-- Local Libraries (no external CDN dependencies) -->
         <script src="js/vendor/gsap.min.js"></script>
diff --git a/ui/suite/index.html b/ui/suite/index.html
index ed63efd..75a59a2 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -10,10 +10,32 @@
         />
         <meta name="theme-color" content="#d4f505" />
 
+        <!-- Preemptive theme colors to prevent flash -->
+        <script>
+            (function() {
+                const path = window.location.pathname;
+                const botMatch = path.match(/(?:\/bot\/)?([a-z0-9-]+)/i);
+                const botId = botMatch ? botMatch[1].toLowerCase() : 'default';
+
+                // Bot-specific theme colors (from config.csv)
+                const botColors = {
+                    'cristo': { color1: '#8B4513', color2: '#FFF8E7' },
+                    'salesianos': { color1: '#1976D2', color2: '#E3F2FD' },
+                    'default': { color1: '#8B4513', color2: '#FFF8E7' }
+                };
+
+                const colors = botColors[botId] || botColors['default'];
+                document.documentElement.style.setProperty('--color1', colors.color1);
+                document.documentElement.style.setProperty('--color2', colors.color2);
+            })();
+        </script>
+
         <!-- Critical CSS - minimal styles for shell/layout (loaded sync) -->
         <link rel="stylesheet" href="suite/css/app.css" />
         <link rel="stylesheet" href="suite/css/base.css" />
         <link rel="stylesheet" href="suite/css/theme-sentient.css" />
+        <!-- Config color overrides - must load AFTER theme CSS -->
+        <link rel="stylesheet" href="suite/css/config-colors.css" />
 
         <!-- Non-critical CSS - loaded async for faster initial paint -->
         <link
@@ -119,8 +141,14 @@
                     title="General Bots"
                     aria-label="General Bots - Home"
                 >
+                    <img
+                        class="logo-icon logo-icon-img"
+                        src=""
+                        alt=""
+                        style="display: none;"
+                    />
                     <svg
-                        class="logo-icon"
+                        class="logo-icon logo-icon-svg"
                         width="32"
                         height="20"
                         viewBox="0 0 140 80"
@@ -1847,6 +1875,12 @@
 
             <!-- Right: Notifications + User -->
             <div class="header-right">
+                <!-- Theme dropdown selector -->
+                <div
+                    id="themeSelectorContainer"
+                    aria-label="Theme selector"
+                ></div>
+
                 <!-- Notifications Bell -->
                 <div class="notifications-menu">
                     <button
diff --git a/ui/suite/js/htmx-app.js b/ui/suite/js/htmx-app.js
index d58fe9f..3577892 100644
--- a/ui/suite/js/htmx-app.js
+++ b/ui/suite/js/htmx-app.js
@@ -233,14 +233,6 @@
         console.log("Processing change_theme event, not appending to chat");
         if (message.data) {
           ThemeManager.setThemeFromServer(message.data);
-
-          if (message.data.color1 || message.data.color2) {
-            const root = document.documentElement;
-            if (message.data.color1)
-              root.style.setProperty("--color1", message.data.color1);
-            if (message.data.color2)
-              root.style.setProperty("--color2", message.data.color2);
-          }
         }
         return; // Don't append theme events to chat
       default:
diff --git a/ui/suite/js/theme-manager.js b/ui/suite/js/theme-manager.js
index e2b7ca7..6655b72 100644
--- a/ui/suite/js/theme-manager.js
+++ b/ui/suite/js/theme-manager.js
@@ -141,17 +141,24 @@ const ThemeManager = (() => {
     }
 
     if (data.logo_url) {
+      // For img elements - set src and show, hide SVG
+      const logoImg = document.querySelector('.logo-icon-img');
+      const logoSvg = document.querySelector('.logo-icon-svg');
+      if (logoImg && logoSvg) {
+        logoImg.src = data.logo_url;
+        logoImg.alt = data.title || 'Logo';
+        logoImg.style.display = 'block';
+        logoSvg.style.display = 'none';
+      }
+
+      // For elements that use background image
       document
-        .querySelectorAll(".logo-icon, .assistant-avatar")
+        .querySelectorAll(".assistant-avatar")
         .forEach((el) => {
           el.style.backgroundImage = `url("${data.logo_url}")`;
           el.style.backgroundSize = "contain";
           el.style.backgroundRepeat = "no-repeat";
           el.style.backgroundPosition = "center";
-          // Clear emoji text content when logo image is applied
-          if (el.classList.contains("logo-icon")) {
-            el.textContent = "";
-          }
         });
     }
     if (data.color1) {