feat: resizable chat panel (compact → half-right → half-left → full)

4 size modes cycled via expand button in header:
- Compact: 360px (default, bottom-right corner)
- Half-right: 50vw docked to right edge, full height
- Half-left: 50vw docked to left edge, full height
- Full: 100% viewport overlay

Also fixes text overflow in chat messages (overflow-wrap, word-break).
Messages area expands to fill available height in larger modes.
Size button uses mdi icons: arrow-expand, dock-right, dock-left, arrow-collapse.
CSS transitions for smooth size changes.

static/css/04-interactive/_chat.css

@@ -74,12 +74,64 @@
     z-index: 999;
     overflow: hidden;
     font-family: 'Source Sans Pro', 'Segoe UI', sans-serif;
+    transition: all 0.25s ease;
 }
 
 .chat-panel.chat-open {
     display: flex;
 }
 
+/* Size: Half screen — docked right */
+.chat-panel.chat-half-right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: 50vw;
+    max-height: none;
+    border-radius: 0;
+    border-left: 2px solid var(--border-light, #e0e0e0);
+}
+
+.chat-panel.chat-half-right .chat-messages {
+    max-height: none;
+    flex: 1;
+}
+
+/* Size: Half screen — docked left */
+.chat-panel.chat-half-left {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    width: 50vw;
+    max-height: none;
+    border-radius: 0;
+    border-right: 2px solid var(--border-light, #e0e0e0);
+}
+
+.chat-panel.chat-half-left .chat-messages {
+    max-height: none;
+    flex: 1;
+}
+
+/* Size: Full width */
+.chat-panel.chat-full {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-height: none;
+    border-radius: 0;
+    border: none;
+}
+
+.chat-panel.chat-full .chat-messages {
+    max-height: none;
+    flex: 1;
+}
+
 /* ==========================================================================
    Header — accent-blue for visual distinction
    ========================================================================== */
@@ -100,7 +152,7 @@
     font-size: 1.1rem;
 }
 
-.chat-help-btn {
+.chat-size-btn {
     margin-left: auto;
     background: none;
     border: none;
@@ -113,6 +165,23 @@
     padding: 0;
 }
 
+.chat-size-btn:hover {
+    color: #fff;
+}
+
+.chat-help-btn {
+    margin-left: 0;
+    background: none;
+    border: none;
+    color: var(--action-bar-text-muted, rgba(255, 255, 255, 0.85));
+    cursor: pointer;
+    font-size: 1rem;
+    transition: color 0.2s;
+    display: flex;
+    align-items: center;
+    padding: 0;
+}
+
 .chat-help-btn:hover {
     color: #fff;
 }
@@ -140,6 +209,9 @@
     line-height: 1.5;
     max-width: 90%;
     word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    overflow: hidden;
 }
 
 .chat-message p {

templates/partials/widgets/chat-widget.html

@@ -15,6 +15,10 @@
     <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>
         <button class="chat-help-btn"
             aria-label="{{if eq .Lang "es"}}Ayuda{{else}}Help{{end}}"
             commandfor="chat-help-modal"
@@ -112,6 +116,21 @@ 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() {
+    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]);
+}
+
 // Navigate from chat link to CV section, then highlight
 function scrollToCV(link) {
     var anchor = link.getAttribute('href');