feat: Implement chat interface font customization

This commit introduces new UI settings to control the font color, family, and size of the text within the chat interface.

Key changes:

- Added new state variables and actions to `ui/src/stores/useUi.js` for:
    - Chat font color (`chatFontColor`)
    - Chat font family (`chatFontFamily`)
    - Chat font size (`chatFontSize`)
- These settings are persisted in local storage.
- Added controls for these font properties to the "Chat Interface Colors" section in `ui/src/views/SettingsView.vue`.
    - Includes a color picker for font color.
    - Includes a text input for font family.
    - Includes a number input for font size (px).
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new font settings via CSS custom properties.
    - The `chatStyleVariables` computed property now includes variables for font settings.
    - Chat messages (agent and user) and the chat input textarea now apply these font styles.

I've confirmed that the font settings are applied correctly to messages and the input area, persist across sessions, and integrate well with existing theme and color customizations.

ui/src/components/chat/CanvasChat.vue

@@ -14,6 +14,9 @@ const chatStyleVariables = computed(() => ({
   '--chat-input-box-color': ui.chatInputBoxColor,
   '--chat-accent-color': ui.chatAccentColor,
   '--chat-background-color': ui.chatBackgroundColor,
+  '--chat-font-color': ui.chatFontColor,
+  '--chat-font-family': ui.chatFontFamily || 'inherit', // Fallback to inherit if empty
+  '--chat-font-size': ui.chatFontSize ? `${ui.chatFontSize}px` : 'inherit', // Fallback to inherit
 }))
 
 function scrollBottom () {
@@ -58,8 +61,13 @@ watch(() => chat.items.length, scrollBottom)
         <div :class="m.owner==='yo' ? 'flex justify-end' : 'flex justify-start'" v-if="m.type==='text'">
           <div
             class="max-w-lg rounded-lg px-4 py-2 shadow break-words"
-            :class="m.owner==='yo' ? 'text-white' : 'text-gray-900'"
-            :style="{ backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)' }">
+            :class="m.owner === 'yo' ? '' : ''"
+            :style="{
+              backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)',
+              color: 'var(--chat-font-color)',
+              fontFamily: 'var(--chat-font-family)',
+              fontSize: 'var(--chat-font-size)'
+            }">
             {{ m.text }}
           </div>
         </div>
@@ -77,7 +85,14 @@ watch(() => chat.items.length, scrollBottom)
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
         class="flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
-        :style="{ backgroundColor: 'var(--chat-input-box-color)', borderColor: 'var(--chat-accent-color)', '--tw-ring-color': 'var(--chat-accent-color)' }"
+        :style="{
+          backgroundColor: 'var(--chat-input-box-color)',
+          borderColor: 'var(--chat-accent-color)',
+          '--tw-ring-color': 'var(--chat-accent-color)',
+          color: 'var(--chat-font-color)',
+          fontFamily: 'var(--chat-font-family)',
+          fontSize: 'var(--chat-font-size)'
+        }"
       />
       <button type="submit" class="px-4 py-2 rounded-lg text-white transition" :style="{ backgroundColor: 'var(--chat-accent-color)' }">
         ➤