feat: Teams-style chat UX overhaul

Bubbles:
- Teams-style layout: bot avatar (green circle) on left, message beside it
- User messages right-aligned, no avatar (clean, like Teams)
- Rounded bubbles (border-radius: 16px) instead of square
- Distinct corner radii for conversation flow

Navigation:
- Links no longer close the chat — panel stays open for continued navigation
- Added #certifications anchor (alias to courses section)
- Fixed agent instruction to use #courses for certifications references

Theme:
- All colors use CSS variables from _themes.css
- Automatically adapts to light/dark without explicit .theme-clean overrides
- Panel uses --paper-bg (white in light, dark in dark theme)

Size modes:
- 3 discrete toggle buttons: compact, half-screen, fullscreen
- Active state highlighted, direct selection (no confusing cycling)
- Removed chat-half-left (simplified to compact/half/full)

Intelligence:
- React query now returns results (verified: 4 companies + 2 projects + skills)

templates/partials/sections/courses.html

@@ -1,6 +1,7 @@
 {{define "section-courses"}}
 <!-- Courses Section -->
 {{if .CV.Courses}}
+<span id="certifications"></span>
 <section id="courses" class="cv-section component-wrapper">
     <!-- Actual Content -->
     <div class="actual-content">

templates/partials/widgets/chat-widget.html

@@ -15,10 +15,17 @@
     <div class="chat-header">
         <iconify-icon icon="mdi:robot-happy-outline"></iconify-icon>
         <span>{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}</span>
-        <button class="chat-size-btn" onclick="cycleChatSize()"
-            aria-label="{{if eq .Lang "es"}}Cambiar tamaño{{else}}Resize{{end}}">
-            <iconify-icon icon="mdi:arrow-expand" id="chat-size-icon"></iconify-icon>
-        </button>
+        <div class="chat-size-controls">
+            <button class="chat-size-opt active" onclick="setChatSize('')" title="{{if eq .Lang "es"}}Compacto{{else}}Compact{{end}}">
+                <iconify-icon icon="mdi:dock-window"></iconify-icon>
+            </button>
+            <button class="chat-size-opt" onclick="setChatSize('chat-half')" title="{{if eq .Lang "es"}}Media pantalla{{else}}Half screen{{end}}">
+                <iconify-icon icon="mdi:dock-right"></iconify-icon>
+            </button>
+            <button class="chat-size-opt" onclick="setChatSize('chat-full')" title="{{if eq .Lang "es"}}Pantalla completa{{else}}Full screen{{end}}">
+                <iconify-icon icon="mdi:fullscreen"></iconify-icon>
+            </button>
+        </div>
         <button class="chat-help-btn"
             aria-label="{{if eq .Lang "es"}}Ayuda{{else}}Help{{end}}"
             commandfor="chat-help-modal"
@@ -28,9 +35,9 @@
     </div>
 
     <div id="chat-messages" class="chat-messages">
-        <div class="chat-bubble chat-bot">
-            <div class="chat-avatar chat-avatar-bot"><iconify-icon icon="mdi:robot-happy-outline"></iconify-icon></div>
-            <div class="chat-message">{{if eq .Lang "es"}}¡Hola! Pregúntame lo que quieras sobre este CV.{{else}}Hi! Ask me anything about this CV.{{end}}</div>
+        <div class="chat-row chat-row-bot">
+            <div class="chat-avatar"><iconify-icon icon="mdi:robot-happy-outline"></iconify-icon></div>
+            <div class="chat-msg">{{if eq .Lang "es"}}¡Hola! Pregúntame lo que quieras sobre este CV.{{else}}Hi! Ask me anything about this CV.{{end}}</div>
         </div>
     </div>
 
@@ -117,19 +124,16 @@ function closeChatHelpAndAsk(question) {
     sendChatQuestion(question);
 }
 
-// Cycle chat panel size: compact → half-right → half-left → full → compact
-var chatSizes = ['', 'chat-half-right', 'chat-half-left', 'chat-full'];
-var chatSizeIcons = ['mdi:arrow-expand', 'mdi:dock-right', 'mdi:dock-left', 'mdi:arrow-collapse'];
-var chatSizeIndex = 0;
-function cycleChatSize() {
+// Set chat panel size: '' (compact), 'chat-half', 'chat-full'
+function setChatSize(size) {
     var panel = document.getElementById('chat-panel');
-    var icon = document.getElementById('chat-size-icon');
-    // Remove current size class
-    chatSizes.forEach(function(cls) { if (cls) panel.classList.remove(cls); });
-    // Next size
-    chatSizeIndex = (chatSizeIndex + 1) % chatSizes.length;
-    if (chatSizes[chatSizeIndex]) panel.classList.add(chatSizes[chatSizeIndex]);
-    icon.setAttribute('icon', chatSizeIcons[chatSizeIndex]);
+    panel.classList.remove('chat-half', 'chat-full');
+    if (size) panel.classList.add(size);
+    // Highlight active button
+    document.querySelectorAll('.chat-size-opt').forEach(function(btn) {
+        btn.classList.remove('active');
+    });
+    event.currentTarget.classList.add('active');
 }
 
 // Navigate from chat link to CV section, then highlight
@@ -137,16 +141,11 @@ function scrollToCV(link) {
     var anchor = link.getAttribute('href');
     var target = document.querySelector(anchor);
     if (target) {
-        // Close chat panel
-        document.getElementById('chat-panel').classList.remove('chat-open');
-        document.getElementById('chat-toggle-btn').classList.remove('mascot-active');
-        // Scroll to target
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        // Highlight briefly
         target.classList.add('chat-highlight');
         setTimeout(function() { target.classList.remove('chat-highlight'); }, 2000);
     }
-    return false; // prevent default anchor navigation
+    return false;
 }
 
 // Clear input after HTMX request completes