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 {