Complete 3-panel layout rebuild with tool buttons

- LEFT: Tool descriptions with explanations
- CENTER: Conversation + tool button row (TEND, SEND, NVC, FEEL, NEED, LISTEN, REPAIR, SOMA, LOVE)
- RIGHT: Tool workspace panel (opens when tools are used)
- Added LOVE tool (breathing/slow down overlay)
- Cleaner, more focused UI
- Partner prompts still realistic (NOT therapist)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/index.html

@@ -15,14 +15,13 @@
             --accent-glow: rgba(99, 102, 241, 0.3);
             --tend-color: #10b981;
             --tend-glow: rgba(16, 185, 129, 0.3);
+            --love-color: #ec4899;
+            --love-glow: rgba(236, 72, 153, 0.3);
             --text-primary: #f1f5f9;
             --text-secondary: #94a3b8;
             --text-muted: #64748b;
             --border: #334155;
-            --border-light: #475569;
-            --success: #22c55e;
             --warning: #f59e0b;
-            --danger: #ef4444;
         }
 
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -34,159 +33,15 @@
             min-height: 100vh;
         }
 
+        /* ===== THREE PANEL LAYOUT ===== */
         .app-container {
             display: flex;
             height: 100vh;
         }
 
-        /* THREE PANEL LAYOUT */
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-            overflow: hidden;
-        }
-
-        .tool-panel {
-            width: 380px;
-            background: var(--bg-card);
-            border-left: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            transition: width 0.3s ease;
-        }
-
-        .tool-panel.collapsed {
-            width: 0;
-            overflow: hidden;
-            border-left: none;
-        }
-
-        .tool-panel-header {
-            padding: 16px 20px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: rgba(99, 102, 241, 0.1);
-        }
-
-        .tool-panel-header h3 {
-            font-size: 1rem;
-            color: var(--accent-light);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .tool-panel-header .close-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            font-size: 1.2rem;
-            cursor: pointer;
-            padding: 4px 8px;
-            border-radius: 4px;
-        }
-
-        .tool-panel-header .close-btn:hover {
-            background: var(--bg-input);
-            color: var(--text-primary);
-        }
-
-        .tool-panel-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 16px 20px;
-        }
-
-        .tool-message {
-            margin-bottom: 16px;
-            padding: 14px 16px;
-            background: var(--bg-input);
-            border-radius: 10px;
-            border-left: 3px solid var(--accent);
-        }
-
-        .tool-message.user-input {
-            border-left-color: var(--text-muted);
-            background: rgba(255,255,255,0.03);
-        }
-
-        .tool-message .tool-label {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--accent-light);
-            margin-bottom: 8px;
-        }
-
-        .tool-message.user-input .tool-label {
-            color: var(--text-muted);
-        }
-
-        .tool-message p {
-            line-height: 1.6;
-            color: var(--text-primary);
-        }
-
-        .tool-input-area {
-            padding: 16px 20px;
-            border-top: 1px solid var(--border);
-            background: var(--bg-dark);
-        }
-
-        .tool-input-area textarea {
-            width: 100%;
-            padding: 12px 14px;
-            background: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text-primary);
-            font-size: 0.9rem;
-            font-family: inherit;
-            resize: none;
-            margin-bottom: 10px;
-        }
-
-        .tool-input-area textarea:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
-
-        .tool-input-area .tool-submit-btn {
-            width: 100%;
-            padding: 10px 16px;
-            background: var(--accent);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 0.9rem;
-            cursor: pointer;
-        }
-
-        .tool-input-area .tool-submit-btn:hover {
-            background: var(--accent-light);
-        }
-
-        @media (max-width: 1100px) {
-            .tool-panel {
-                position: fixed;
-                right: 0;
-                top: 0;
-                height: 100vh;
-                z-index: 100;
-                box-shadow: -4px 0 20px rgba(0,0,0,0.3);
-            }
-            .tool-panel.collapsed {
-                right: -380px;
-            }
-        }
-
-        /* ===== TOOLKIT SIDEBAR ===== */
-        .toolkit-sidebar {
-            width: 340px;
+        /* LEFT PANEL - Tool Descriptions */
+        .left-panel {
+            width: 280px;
             background: var(--bg-card);
             border-right: 1px solid var(--border);
             display: flex;
@@ -194,127 +49,31 @@
             overflow-y: auto;
         }
 
-        .sidebar-header {
-            padding: 24px 20px;
+        .left-header {
+            padding: 20px;
             border-bottom: 1px solid var(--border);
             background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99, 102, 241, 0.05) 100%);
         }
 
-        .sidebar-header h1 {
-            font-size: 1.6rem;
-            font-weight: 700;
+        .left-header h1 {
+            font-size: 1.4rem;
             background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-bottom: 4px;
         }
 
-        .sidebar-header p {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-        }
-
-        /* Settings */
-        .settings-section {
-            padding: 16px 20px;
-            border-bottom: 1px solid var(--border);
-            background: rgba(0,0,0,0.2);
-        }
-
-        .settings-section h3 {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-            color: var(--text-muted);
-            margin-bottom: 12px;
-        }
-
-        .setting-row {
-            margin-bottom: 10px;
-        }
-
-        .setting-row label {
-            display: block;
+        .left-header p {
             font-size: 0.8rem;
             color: var(--text-secondary);
-            margin-bottom: 4px;
-        }
-
-        .setting-row select {
-            width: 100%;
-            padding: 8px 12px;
-            background: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 0.85rem;
-            cursor: pointer;
         }
 
-        .setting-row select:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
-
-        /* PRIMARY TEND TOOL */
-        .tend-section {
-            padding: 16px 20px;
-            border-bottom: 1px solid var(--border);
-            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
-        }
-
-        .tend-tool {
-            background: var(--bg-input);
-            border: 2px solid var(--tend-color);
-            border-radius: 12px;
-            padding: 16px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            box-shadow: 0 0 20px var(--tend-glow);
-        }
-
-        .tend-tool:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 30px var(--tend-glow);
-        }
-
-        .tend-tool.active {
-            background: rgba(16, 185, 129, 0.15);
-        }
-
-        .tend-tool h4 {
-            font-size: 1.1rem;
-            color: var(--tend-color);
-            margin-bottom: 6px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .tend-tool p {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            line-height: 1.5;
-        }
-
-        .primary-badge {
-            font-size: 0.65rem;
-            background: var(--tend-color);
-            color: white;
-            padding: 2px 8px;
-            border-radius: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        /* TOOLS GRID */
-        .tools-section {
+        .tool-list {
             flex: 1;
-            padding: 16px 20px;
-            overflow-y: auto;
+            padding: 16px;
         }
 
-        .tools-section h3 {
+        .tool-list h3 {
             font-size: 0.7rem;
             text-transform: uppercase;
             letter-spacing: 0.08em;
@@ -322,92 +81,91 @@
             margin-bottom: 12px;
         }
 
-        .tools-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-        }
-
-        .tool-card {
-            background: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 10px;
+        .tool-desc {
             padding: 12px;
+            margin-bottom: 10px;
+            background: var(--bg-input);
+            border-radius: 8px;
+            border-left: 3px solid var(--border);
             cursor: pointer;
-            transition: all 0.2s ease;
+            transition: all 0.2s;
         }
 
-        .tool-card:hover {
-            border-color: var(--accent);
+        .tool-desc:hover {
+            border-left-color: var(--accent);
             background: var(--bg-hover);
         }
 
-        .tool-card.active {
-            border-color: var(--accent);
+        .tool-desc.active {
+            border-left-color: var(--accent);
             background: rgba(99, 102, 241, 0.15);
-            box-shadow: 0 0 15px var(--accent-glow);
         }
 
-        .tool-card h4 {
-            font-size: 0.85rem;
+        .tool-desc h4 {
+            font-size: 0.9rem;
             margin-bottom: 4px;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
         }
 
-        .tool-card p {
-            font-size: 0.7rem;
+        .tool-desc p {
+            font-size: 0.75rem;
             color: var(--text-muted);
-            line-height: 1.3;
+            line-height: 1.4;
         }
 
-        .tool-icon { font-size: 1rem; }
+        .tool-desc.tend-desc {
+            border-left-color: var(--tend-color);
+            background: rgba(16, 185, 129, 0.1);
+        }
 
-        /* Toggle Tools */
-        .toggle-section {
-            padding: 12px 20px;
-            border-bottom: 1px solid var(--border);
+        .tool-desc.love-desc {
+            border-left-color: var(--love-color);
+            background: rgba(236, 72, 153, 0.1);
+        }
+
+        /* Settings */
+        .settings-section {
+            padding: 16px;
+            border-top: 1px solid var(--border);
+            background: rgba(0,0,0,0.2);
         }
 
         .toggle-row {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 8px 0;
+            padding: 6px 0;
         }
 
         .toggle-row label {
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             color: var(--text-secondary);
         }
 
         .toggle-switch {
             position: relative;
-            width: 44px;
-            height: 24px;
+            width: 40px;
+            height: 22px;
         }
 
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
+        .toggle-switch input { opacity: 0; width: 0; height: 0; }
 
         .toggle-slider {
             position: absolute;
             cursor: pointer;
             top: 0; left: 0; right: 0; bottom: 0;
             background: var(--border);
-            border-radius: 24px;
+            border-radius: 22px;
             transition: 0.3s;
         }
 
         .toggle-slider:before {
             position: absolute;
             content: "";
-            height: 18px;
-            width: 18px;
+            height: 16px;
+            width: 16px;
             left: 3px;
             bottom: 3px;
             background: white;
@@ -415,110 +173,175 @@
             transition: 0.3s;
         }
 
-        .toggle-switch input:checked + .toggle-slider {
-            background: var(--accent);
+        .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
+        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
+
+        .left-footer {
+            padding: 12px 16px;
+            border-top: 1px solid var(--border);
+            font-size: 0.7rem;
+            color: var(--text-muted);
+        }
+
+        .safety-notice {
+            background: rgba(245, 158, 11, 0.1);
+            border: 1px solid var(--warning);
+            border-radius: 6px;
+            padding: 8px;
+            margin-bottom: 8px;
+            font-size: 0.7rem;
+            color: var(--warning);
+        }
+
+        /* CENTER PANEL - Conversation */
+        .center-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        .setup-panel {
+            background: var(--bg-card);
+            border-bottom: 1px solid var(--border);
+            padding: 20px 24px;
+        }
+
+        .setup-panel h2 {
+            font-size: 1.1rem;
+            margin-bottom: 16px;
+        }
+
+        .setup-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px 16px;
+        }
+
+        .setup-col {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .setup-col.full-width { grid-column: 1 / -1; }
+
+        .setup-col label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-bottom: 4px;
         }
 
-        .toggle-switch input:checked + .toggle-slider:before {
-            transform: translateX(20px);
+        .setup-col select, .setup-col textarea {
+            padding: 10px 12px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.85rem;
+            font-family: inherit;
         }
 
-        /* Footer */
-        .sidebar-footer {
-            padding: 16px 20px;
-            border-top: 1px solid var(--border);
-            background: rgba(0,0,0,0.2);
+        .setup-col textarea { resize: none; }
+        .setup-col select:focus, .setup-col textarea:focus { outline: none; border-color: var(--accent); }
+
+        .setup-row {
+            display: flex;
+            gap: 16px;
+            align-items: center;
         }
 
-        .safety-notice {
-            background: rgba(245, 158, 11, 0.1);
-            border: 1px solid var(--warning);
-            border-radius: 8px;
-            padding: 10px;
-            font-size: 0.75rem;
-            color: var(--warning);
-            margin-bottom: 12px;
+        .setup-option {
+            display: flex;
+            align-items: center;
+            gap: 6px;
         }
 
-        .sidebar-footer .attribution {
-            font-size: 0.75rem;
-            color: var(--text-muted);
+        .setup-option input[type="radio"] { accent-color: var(--accent); }
+
+        .setup-option label {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            cursor: pointer;
         }
 
-        .sidebar-footer a {
-            color: var(--accent-light);
-            text-decoration: none;
+        .start-btn {
+            padding: 12px 24px;
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
         }
 
-        .content-header {
-            padding: 16px 24px;
+        .start-btn:hover { background: var(--accent-light); }
+
+        /* Conversation Header */
+        .conv-header {
+            padding: 12px 20px;
+            background: var(--bg-card);
             border-bottom: 1px solid var(--border);
-            display: flex;
+            display: none;
             justify-content: space-between;
             align-items: center;
-            background: var(--bg-card);
         }
 
+        .conv-header.active { display: flex; }
+
         .partner-info {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
         }
 
         .partner-avatar {
-            width: 40px;
-            height: 40px;
+            width: 36px;
+            height: 36px;
             background: var(--accent);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 600;
+            font-size: 0.9rem;
         }
 
-        .partner-details h3 {
-            font-size: 1rem;
-            margin-bottom: 2px;
-        }
+        .partner-details h3 { font-size: 0.95rem; }
+        .partner-details span { font-size: 0.75rem; color: var(--text-secondary); }
 
-        .partner-details span {
-            font-size: 0.8rem;
+        .reset-btn {
+            padding: 6px 12px;
+            background: transparent;
+            border: 1px solid var(--border);
             color: var(--text-secondary);
+            border-radius: 6px;
+            font-size: 0.75rem;
+            cursor: pointer;
         }
 
-        .active-tool-badge {
-            background: var(--accent);
-            color: white;
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 500;
-        }
-
-        .active-tool-badge.tend {
-            background: var(--tend-color);
-        }
+        .reset-btn:hover { border-color: var(--accent); color: var(--accent-light); }
 
-        /* Conversation */
+        /* Conversation Area */
         .conversation-area {
             flex: 1;
-            padding: 24px;
+            padding: 20px;
             overflow-y: auto;
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 12px;
         }
 
         .message {
-            max-width: 75%;
-            padding: 14px 18px;
-            border-radius: 18px;
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 16px;
             line-height: 1.5;
             animation: fadeIn 0.3s ease;
         }
 
         @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
+            from { opacity: 0; transform: translateY(8px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
@@ -541,7 +364,7 @@
             background: rgba(99, 102, 241, 0.1);
             border: 1px solid var(--accent);
             max-width: 90%;
-            border-radius: 12px;
+            border-radius: 10px;
         }
 
         .message.ari.tend-result {
@@ -550,31 +373,28 @@
         }
 
         .message.ari .ari-label {
-            font-size: 0.7rem;
+            font-size: 0.65rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
             color: var(--accent-light);
-            margin-bottom: 8px;
+            margin-bottom: 6px;
             font-weight: 600;
         }
 
-        .message.ari.tend-result .ari-label {
-            color: var(--tend-color);
-        }
+        .message.ari.tend-result .ari-label { color: var(--tend-color); }
 
-        /* Loading */
         .loading {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
             color: var(--text-secondary);
-            padding: 16px;
+            padding: 12px;
         }
 
         .spinner {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
             border: 2px solid var(--border);
             border-top-color: var(--accent);
             border-radius: 50%;
@@ -583,402 +403,394 @@
 
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* Welcome */
-        .welcome-message {
-            text-align: center;
-            padding: 60px 40px;
-            max-width: 600px;
-            margin: 0 auto;
+        /* Tool Buttons Row */
+        .tool-buttons {
+            display: flex;
+            gap: 6px;
+            padding: 12px 20px;
+            background: var(--bg-card);
+            border-top: 1px solid var(--border);
+            flex-wrap: wrap;
+            justify-content: center;
         }
 
-        .welcome-message h2 {
-            font-size: 2rem;
-            margin-bottom: 16px;
-            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+        .tool-btn {
+            padding: 8px 14px;
+            border: 1px solid var(--border);
+            background: var(--bg-input);
+            color: var(--text-secondary);
+            border-radius: 8px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
 
-        .welcome-message p {
-            color: var(--text-secondary);
-            line-height: 1.7;
-            margin-bottom: 24px;
+        .tool-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent-light);
+            background: rgba(99, 102, 241, 0.1);
         }
 
-        .start-btn {
-            padding: 14px 36px;
-            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
+        .tool-btn.active {
+            border-color: var(--accent);
+            background: var(--accent);
             color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
         }
 
-        .start-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px var(--accent-glow);
+        .tool-btn.tend {
+            border-color: var(--tend-color);
+            color: var(--tend-color);
         }
 
-        /* Setup Panel - Top of Main Area */
-        .setup-panel {
-            background: var(--bg-card);
-            border-bottom: 1px solid var(--border);
-            padding: 20px 24px;
+        .tool-btn.tend:hover, .tool-btn.tend.active {
+            background: var(--tend-color);
+            color: white;
         }
 
-        .setup-header h2 {
-            font-size: 1.2rem;
-            margin-bottom: 16px;
-            color: var(--text-primary);
+        .tool-btn.send {
+            background: var(--accent);
+            border-color: var(--accent);
+            color: white;
         }
 
-        .setup-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 12px 20px;
-            align-items: end;
+        .tool-btn.send:hover {
+            background: var(--accent-light);
         }
 
-        .setup-col {
-            display: flex;
-            flex-direction: column;
+        .tool-btn.love {
+            border-color: var(--love-color);
+            color: var(--love-color);
         }
 
-        .setup-col.full-width {
-            grid-column: 1 / -1;
+        .tool-btn.love:hover, .tool-btn.love.active {
+            background: var(--love-color);
+            color: white;
         }
 
-        .setup-col label {
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-            margin-bottom: 6px;
+        /* Input Area */
+        .input-area {
+            padding: 16px 20px;
+            background: var(--bg-card);
+            border-top: 1px solid var(--border);
         }
 
-        .setup-col select,
-        .setup-col textarea {
-            padding: 10px 12px;
+        .input-row {
+            display: flex;
+            gap: 10px;
+        }
+
+        .input-row textarea {
+            flex: 1;
+            padding: 12px 16px;
             background: var(--bg-input);
             border: 1px solid var(--border);
-            border-radius: 6px;
+            border-radius: 10px;
             color: var(--text-primary);
             font-size: 0.9rem;
             font-family: inherit;
-        }
-
-        .setup-col textarea {
             resize: none;
         }
 
-        .setup-col select:focus,
-        .setup-col textarea:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
+        .input-row textarea:focus { outline: none; border-color: var(--accent); }
 
-        .setup-options {
+        /* RIGHT PANEL - Tool Workspace */
+        .right-panel {
+            width: 380px;
+            background: var(--bg-card);
+            border-left: 1px solid var(--border);
             display: flex;
-            gap: 16px;
-            padding-top: 6px;
+            flex-direction: column;
+            transition: all 0.3s ease;
         }
 
-        .setup-option {
+        .right-panel.collapsed {
+            width: 0;
+            overflow: hidden;
+            border-left: none;
+        }
+
+        .right-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border);
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            gap: 6px;
+            background: rgba(99, 102, 241, 0.1);
         }
 
-        .setup-option input[type="radio"] {
-            accent-color: var(--accent);
+        .right-header h3 {
+            font-size: 1rem;
+            color: var(--accent-light);
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
-        .setup-option label {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
+        .right-header .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.2rem;
             cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
         }
 
-        .setup-col .start-btn {
-            width: 100%;
-            padding: 12px 20px;
+        .right-header .close-btn:hover {
+            background: var(--bg-input);
+            color: var(--text-primary);
         }
 
-        .header-right {
-            display: flex;
-            align-items: center;
-            gap: 12px;
+        .right-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px 20px;
         }
 
-        .reset-btn {
-            padding: 8px 14px;
-            background: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-secondary);
-            border-radius: 6px;
-            font-size: 0.8rem;
-            cursor: pointer;
-            transition: all 0.2s;
+        .tool-message {
+            margin-bottom: 14px;
+            padding: 12px 14px;
+            background: var(--bg-input);
+            border-radius: 10px;
+            border-left: 3px solid var(--accent);
         }
 
-        .reset-btn:hover {
-            border-color: var(--accent);
-            color: var(--accent-light);
+        .tool-message.user-msg {
+            border-left-color: var(--text-muted);
+            background: rgba(255,255,255,0.03);
         }
 
-        @media (max-width: 700px) {
-            .setup-grid {
-                grid-template-columns: 1fr;
-            }
-            .setup-col.full-width {
-                grid-column: 1;
-            }
+        .tool-message .msg-label {
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--accent-light);
+            margin-bottom: 6px;
         }
 
-        /* Input Area */
-        .input-area {
-            padding: 20px 24px;
-            border-top: 1px solid var(--border);
-            background: var(--bg-card);
-        }
+        .tool-message.user-msg .msg-label { color: var(--text-muted); }
 
-        .input-row {
-            display: flex;
-            gap: 12px;
-            align-items: flex-end;
+        .tool-message p {
+            line-height: 1.5;
+            font-size: 0.9rem;
         }
 
-        .input-wrapper {
-            flex: 1;
+        .right-input {
+            padding: 16px 20px;
+            border-top: 1px solid var(--border);
+            background: var(--bg-dark);
         }
 
-        .input-wrapper textarea {
+        .right-input textarea {
             width: 100%;
-            padding: 14px 18px;
+            padding: 10px 14px;
             background: var(--bg-input);
             border: 1px solid var(--border);
-            border-radius: 12px;
+            border-radius: 8px;
             color: var(--text-primary);
-            font-size: 0.95rem;
-            resize: none;
+            font-size: 0.85rem;
             font-family: inherit;
-            transition: border-color 0.2s;
-        }
-
-        .input-wrapper textarea:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
-
-        .btn-group {
-            display: flex;
-            gap: 8px;
+            resize: none;
+            margin-bottom: 10px;
         }
 
-        .send-btn {
-            padding: 14px 24px;
+        .right-input textarea:focus { outline: none; border-color: var(--accent); }
+
+        .right-input button {
+            width: 100%;
+            padding: 10px;
             background: var(--accent);
             color: white;
             border: none;
-            border-radius: 12px;
-            font-size: 0.95rem;
-            font-weight: 500;
+            border-radius: 8px;
+            font-size: 0.85rem;
             cursor: pointer;
-            transition: all 0.2s;
         }
 
-        .send-btn:hover {
-            background: var(--accent-light);
+        .right-input button:hover { background: var(--accent-light); }
+
+        /* Love/Breath Modal */
+        .breath-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.85);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
         }
 
-        .tend-btn {
-            padding: 14px 20px;
-            background: var(--tend-color);
+        .breath-overlay.active { display: flex; }
+
+        .breath-content {
+            text-align: center;
             color: white;
-            border: none;
-            border-radius: 12px;
-            font-size: 0.95rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
         }
 
-        .tend-btn:hover {
-            background: #059669;
-            box-shadow: 0 4px 20px var(--tend-glow);
+        .breath-circle {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: radial-gradient(circle, var(--love-color) 0%, transparent 70%);
+            margin: 0 auto 30px;
+            animation: breathe 8s ease-in-out infinite;
         }
 
-        .quick-tools {
-            display: flex;
-            gap: 8px;
-            margin-top: 12px;
-            flex-wrap: wrap;
+        @keyframes breathe {
+            0%, 100% { transform: scale(0.8); opacity: 0.5; }
+            50% { transform: scale(1.2); opacity: 1; }
         }
 
-        .quick-tool-btn {
-            padding: 6px 12px;
+        .breath-text {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+        }
+
+        .breath-close {
+            padding: 12px 30px;
             background: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-secondary);
-            border-radius: 6px;
-            font-size: 0.8rem;
+            border: 1px solid var(--love-color);
+            color: var(--love-color);
+            border-radius: 8px;
+            font-size: 1rem;
             cursor: pointer;
-            transition: all 0.2s;
         }
 
-        .quick-tool-btn:hover {
-            border-color: var(--accent);
-            color: var(--accent-light);
-            background: rgba(99, 102, 241, 0.1);
-        }
+        .breath-close:hover { background: var(--love-color); color: white; }
 
         /* Responsive */
+        @media (max-width: 1100px) {
+            .right-panel {
+                position: fixed;
+                right: 0;
+                top: 0;
+                height: 100vh;
+                z-index: 100;
+                box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+            }
+            .right-panel.collapsed { right: -380px; width: 380px; }
+        }
+
         @media (max-width: 900px) {
-            .toolkit-sidebar { width: 280px; }
-            .tools-grid { grid-template-columns: 1fr; }
+            .left-panel { width: 240px; }
         }
 
         @media (max-width: 700px) {
             .app-container { flex-direction: column; }
-            .toolkit-sidebar { width: 100%; max-height: 45vh; }
+            .left-panel { width: 100%; max-height: 40vh; }
+            .tool-buttons { padding: 10px; }
+            .tool-btn { padding: 6px 10px; font-size: 0.75rem; }
         }
     </style>
 </head>
 <body>
     <div class="app-container">
-        <!-- TOOLKIT SIDEBAR -->
-        <aside class="toolkit-sidebar">
-            <div class="sidebar-header">
+        <!-- LEFT PANEL - Tool Descriptions -->
+        <aside class="left-panel">
+            <div class="left-header">
                 <h1>Tend & Send</h1>
                 <p>Assistive Relational Intelligence</p>
             </div>
 
+            <div class="tool-list">
+                <h3>ARI Tools</h3>
 
-            <!-- PRIMARY TEND TOOL -->
-            <div class="tend-section">
-                <div class="tend-tool" data-tool="tend" onclick="selectTool('tend')">
-                    <h4>
-                        <span class="primary-badge">Primary</span>
-                        TEND Transform
-                    </h4>
-                    <p>NVC-aligned translation with warmth. Preserves your voice and emotional truth while finding clarity.</p>
+                <div class="tool-desc tend-desc" onclick="showToolInfo('tend')">
+                    <h4>TEND</h4>
+                    <p>Transform your message with NVC clarity and warmth. Preserves your authentic voice.</p>
                 </div>
-            </div>
 
-            <!-- Toggle Features -->
-            <div class="toggle-section">
-                <div class="toggle-row">
-                    <label>Detailed Mode (more explanation)</label>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="toggle-verbose">
-                        <span class="toggle-slider"></span>
-                    </label>
+                <div class="tool-desc" onclick="showToolInfo('nvc')">
+                    <h4>NVC</h4>
+                    <p>Guided I-statement builder. Step-by-step help crafting what you want to say.</p>
                 </div>
-                <div class="toggle-row">
-                    <label>Auto Feelings/Needs Reflection</label>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="toggle-feelings" checked>
-                        <span class="toggle-slider"></span>
-                    </label>
+
+                <div class="tool-desc" onclick="showToolInfo('feel')">
+                    <h4>FEEL</h4>
+                    <p>Identify feelings in the conversation. What emotions are present?</p>
+                </div>
+
+                <div class="tool-desc" onclick="showToolInfo('need')">
+                    <h4>NEED</h4>
+                    <p>Extract underlying needs. What's really being asked for?</p>
+                </div>
+
+                <div class="tool-desc" onclick="showToolInfo('listen')">
+                    <h4>LISTEN</h4>
+                    <p>Receive mode. Hear their message before reacting.</p>
+                </div>
+
+                <div class="tool-desc" onclick="showToolInfo('repair')">
+                    <h4>REPAIR</h4>
+                    <p>After ruptures. Help craft genuine reconnection.</p>
+                </div>
+
+                <div class="tool-desc" onclick="showToolInfo('soma')">
+                    <h4>SOMA</h4>
+                    <p>Body check-in. What does your body know?</p>
+                </div>
+
+                <div class="tool-desc love-desc" onclick="showToolInfo('love')">
+                    <h4>LOVE</h4>
+                    <p>Slow down. Take a breath. Return to presence.</p>
                 </div>
+            </div>
+
+            <div class="settings-section">
                 <div class="toggle-row">
-                    <label>Show Intensity Check</label>
+                    <label>Detailed Mode</label>
                     <label class="toggle-switch">
-                        <input type="checkbox" id="toggle-intensity">
+                        <input type="checkbox" id="toggle-verbose">
                         <span class="toggle-slider"></span>
                     </label>
                 </div>
             </div>
 
-            <!-- ARI Toolkit -->
-            <div class="tools-section">
-                <h3>ARI Toolkit</h3>
-                <div class="tools-grid">
-                    <div class="tool-card" data-tool="guided_nvc" onclick="selectTool('guided_nvc')">
-                        <h4><span class="tool-icon">&#128221;</span> Guided NVC</h4>
-                        <p>Step-by-step I-statement builder</p>
-                    </div>
-                    <div class="tool-card" data-tool="receive_mode" onclick="selectTool('receive_mode')">
-                        <h4><span class="tool-icon">&#128066;</span> Receive Mode</h4>
-                        <p>Hear them before reacting</p>
-                    </div>
-                    <div class="tool-card" data-tool="pre_send_pause" onclick="selectTool('pre_send_pause')">
-                        <h4><span class="tool-icon">&#9208;</span> Pre-Send</h4>
-                        <p>Check intention first</p>
-                    </div>
-                    <div class="tool-card" data-tool="observation_spotter" onclick="selectTool('observation_spotter')">
-                        <h4><span class="tool-icon">&#128269;</span> Observations</h4>
-                        <p>Judgments to facts</p>
-                    </div>
-                    <div class="tool-card" data-tool="pure_questioning" onclick="selectTool('pure_questioning')">
-                        <h4><span class="tool-icon">&#10067;</span> Questions</h4>
-                        <p>Open inquiry only</p>
-                    </div>
-                    <div class="tool-card" data-tool="somatic_checkin" onclick="selectTool('somatic_checkin')">
-                        <h4><span class="tool-icon">&#129728;</span> Somatic</h4>
-                        <p>Body check-in</p>
-                    </div>
-                    <div class="tool-card" data-tool="repair_support" onclick="selectTool('repair_support')">
-                        <h4><span class="tool-icon">&#128591;</span> Repair</h4>
-                        <p>After ruptures</p>
-                    </div>
-                    <div class="tool-card" data-tool="feelings_needs" onclick="selectTool('feelings_needs')">
-                        <h4><span class="tool-icon">&#128156;</span> F&N Extract</h4>
-                        <p>Identify feelings/needs</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Footer -->
-            <div class="sidebar-footer">
+            <div class="left-footer">
                 <div class="safety-notice">
                     <strong>Reflection prompts only</strong> - not therapy.
-                    If in crisis, contact a professional.
-                </div>
-                <div class="attribution">
-                    Created by Jocelyn Skillman, LMHC<br>
-                    <a href="https://huggingface.co/jostlebot" target="_blank">More ARI tools</a>
                 </div>
+                <div>Created by Jocelyn Skillman, LMHC</div>
             </div>
         </aside>
 
-        <!-- MAIN CONTENT -->
-        <main class="main-content">
-            <!-- SETUP PANEL (top of main area) -->
+        <!-- CENTER PANEL - Conversation -->
+        <main class="center-panel">
+            <!-- Setup Panel -->
             <div class="setup-panel" id="setup-panel">
-                <div class="setup-header">
-                    <h2>Set Up Your Practice Conversation</h2>
-                </div>
+                <h2>Set Up Practice Conversation</h2>
                 <div class="setup-grid">
                     <div class="setup-col">
-                        <label for="attachment-style">Partner's Attachment Style</label>
+                        <label>Partner's Attachment Style</label>
                         <select id="attachment-style">
-                            <option value="anxious">Anxious - Seeks reassurance, fears abandonment</option>
-                            <option value="avoidant">Avoidant - Needs space when stressed, pulls away</option>
-                            <option value="disorganized">Disorganized - Mixed signals, push-pull</option>
-                            <option value="secure">Secure - Open, direct communication</option>
+                            <option value="anxious">Anxious - Seeks reassurance</option>
+                            <option value="avoidant">Avoidant - Needs space</option>
+                            <option value="disorganized">Disorganized - Push-pull</option>
+                            <option value="secure">Secure - Direct communication</option>
                         </select>
                     </div>
                     <div class="setup-col">
-                        <label for="difficulty">Conversation Difficulty</label>
+                        <label>Difficulty</label>
                         <select id="difficulty">
-                            <option value="gentle">Gentle - Minor misunderstanding</option>
-                            <option value="moderate">Moderate - Recurring tension</option>
-                            <option value="intense">Intense - Significant conflict</option>
-                            <option value="crisis">Crisis - Relationship crossroads</option>
+                            <option value="gentle">Gentle</option>
+                            <option value="moderate">Moderate</option>
+                            <option value="intense">Intense</option>
+                            <option value="crisis">Crisis</option>
                         </select>
                     </div>
                     <div class="setup-col full-width">
-                        <label for="conversation-context">What's the situation? (optional)</label>
-                        <textarea id="conversation-context" rows="2" placeholder="Example: We had a fight about how much time I spend at work..."></textarea>
-                    </div>
-                    <div class="setup-col full-width">
-                        <label for="user-goal">What do you want to practice? (optional)</label>
-                        <textarea id="user-goal" rows="1" placeholder="Example: Staying calm and hearing their perspective..."></textarea>
+                        <label>What's the situation? (optional)</label>
+                        <textarea id="conversation-context" rows="2" placeholder="Example: We had a fight about..."></textarea>
                     </div>
                     <div class="setup-col">
-                        <div class="setup-options">
+                        <div class="setup-row">
                             <div class="setup-option">
                                 <input type="radio" name="who-starts" id="partner-starts" value="partner" checked>
                                 <label for="partner-starts">Partner starts</label>
@@ -990,13 +802,13 @@
                         </div>
                     </div>
                     <div class="setup-col">
-                        <button class="start-btn" onclick="startConversation()">Start Conversation</button>
+                        <button class="start-btn" onclick="startConversation()">Start</button>
                     </div>
                 </div>
             </div>
 
-            <!-- CONVERSATION HEADER (shows after start) -->
-            <div class="content-header" id="content-header" style="display: none;">
+            <!-- Conversation Header -->
+            <div class="conv-header" id="conv-header">
                 <div class="partner-info">
                     <div class="partner-avatar" id="partner-avatar">P</div>
                     <div class="partner-details">
@@ -1004,141 +816,100 @@
                         <span id="partner-style">Anxious attachment</span>
                     </div>
                 </div>
-                <div class="header-right">
-                    <div id="active-tool-display">
-                        <span class="active-tool-badge tend">TEND Ready</span>
-                    </div>
-                    <button class="reset-btn" onclick="resetConversation()">New Conversation</button>
-                </div>
+                <button class="reset-btn" onclick="resetConversation()">New Conversation</button>
             </div>
 
+            <!-- Conversation Messages -->
             <div class="conversation-area" id="conversation"></div>
 
+            <!-- Tool Buttons Row -->
+            <div class="tool-buttons">
+                <button class="tool-btn tend" onclick="useTool('tend')">TEND</button>
+                <button class="tool-btn send" onclick="sendMessage()">SEND</button>
+                <button class="tool-btn" onclick="useTool('nvc')">NVC</button>
+                <button class="tool-btn" onclick="useTool('feel')">FEEL</button>
+                <button class="tool-btn" onclick="useTool('need')">NEED</button>
+                <button class="tool-btn" onclick="useTool('listen')">LISTEN</button>
+                <button class="tool-btn" onclick="useTool('repair')">REPAIR</button>
+                <button class="tool-btn" onclick="useTool('soma')">SOMA</button>
+                <button class="tool-btn love" onclick="useTool('love')">LOVE</button>
+            </div>
+
+            <!-- Message Input -->
             <div class="input-area">
                 <div class="input-row">
-                    <div class="input-wrapper">
-                        <textarea id="user-input" rows="2" placeholder="Type your message..." onkeydown="handleKeyDown(event)"></textarea>
-                    </div>
-                    <div class="btn-group">
-                        <button class="tend-btn" onclick="useTendTransform()">TEND</button>
-                        <button class="send-btn" id="send-btn" onclick="sendMessage()">Send</button>
-                    </div>
-                </div>
-                <div class="quick-tools">
-                    <button class="quick-tool-btn" onclick="quickTool('receive_mode')">Receive Mode</button>
-                    <button class="quick-tool-btn" onclick="quickTool('pre_send_pause')">Pre-Send Pause</button>
-                    <button class="quick-tool-btn" onclick="quickTool('intensity_check')">Check Intensity</button>
-                    <button class="quick-tool-btn" onclick="quickTool('guided_nvc')">Guided NVC</button>
+                    <textarea id="user-input" rows="2" placeholder="Type your message..." onkeydown="handleKeyDown(event)"></textarea>
                 </div>
             </div>
         </main>
 
-        <!-- TOOL PANEL (Right side - for tool conversations) -->
-        <aside class="tool-panel collapsed" id="tool-panel">
-            <div class="tool-panel-header">
-                <h3><span id="tool-panel-icon">🛠</span> <span id="tool-panel-title">Tool Workspace</span></h3>
-                <button class="close-btn" onclick="closeToolPanel()">×</button>
+        <!-- RIGHT PANEL - Tool Workspace -->
+        <aside class="right-panel collapsed" id="right-panel">
+            <div class="right-header">
+                <h3><span id="tool-icon">🛠</span> <span id="tool-title">Tool Workspace</span></h3>
+                <button class="close-btn" onclick="closeRightPanel()">×</button>
             </div>
-            <div class="tool-panel-content" id="tool-conversation"></div>
-            <div class="tool-input-area">
-                <textarea id="tool-input" rows="2" placeholder="Continue working with this tool..." onkeydown="handleToolKeyDown(event)"></textarea>
-                <button class="tool-submit-btn" onclick="submitToTool()">Submit</button>
+            <div class="right-content" id="tool-content"></div>
+            <div class="right-input">
+                <textarea id="tool-input" rows="2" placeholder="Continue with this tool..." onkeydown="handleToolKeyDown(event)"></textarea>
+                <button onclick="submitToTool()">Submit</button>
             </div>
         </aside>
     </div>
 
+    <!-- Breath/Love Overlay -->
+    <div class="breath-overlay" id="breath-overlay">
+        <div class="breath-content">
+            <div class="breath-circle"></div>
+            <div class="breath-text" id="breath-text">Breathe in...</div>
+            <button class="breath-close" onclick="closeBreath()">Return</button>
+        </div>
+    </div>
+
     <script>
         // ============================================================================
         // STATE
         // ============================================================================
         let conversationHistory = [];
-        let activeTool = 'tend';
+        let activeTool = null;
         let lastPartnerMessage = '';
         let conversationStarted = false;
-        let nvcStage = 1;
-        let inWorkspaceMode = false; // When true, messages go to tool, not partner
-
-        // Tools that are "workspace" modes - messages don't go to partner
-        const WORKSPACE_TOOLS = ['guided_nvc', 'repair_support', 'somatic_checkin', 'pure_questioning'];
-
-        const TOOL_NAMES = {
-            tend: 'TEND Transform',
-            feelings_needs: 'Feelings & Needs',
-            guided_nvc: 'Guided NVC',
-            receive_mode: 'Receive Mode',
-            pre_send_pause: 'Pre-Send Pause',
-            observation_spotter: 'Observation Spotter',
-            pure_questioning: 'Pure Questioning',
-            somatic_checkin: 'Somatic Check-in',
-            intensity_check: 'Intensity Check',
-            repair_support: 'Repair Support'
+
+        const TOOL_MAP = {
+            tend: { name: 'TEND Transform', icon: '✨', api: 'tend' },
+            nvc: { name: 'Guided NVC', icon: '📝', api: 'guided_nvc' },
+            feel: { name: 'Feelings', icon: '💜', api: 'feelings_needs' },
+            need: { name: 'Needs', icon: '🎯', api: 'feelings_needs' },
+            listen: { name: 'Receive Mode', icon: '👂', api: 'receive_mode' },
+            repair: { name: 'Repair Support', icon: '🙏', api: 'repair_support' },
+            soma: { name: 'Somatic Check-in', icon: '🫁', api: 'somatic_checkin' },
+            love: { name: 'Slow Down', icon: '💗', api: null }
         };
 
         const PARTNER_PROMPTS = {
             anxious: {
-                gentle: `You ARE a real person with anxious attachment in a relationship. NOT a therapist. NOT supportive. You're a real human having a real reaction.
-                    Minor misunderstanding happening. You seek reassurance, worry something is wrong.
-                    Respond like a REAL PERSON would - with your own feelings, reactions, maybe some defensiveness or hurt.
-                    1-3 sentences. Sound like a text message, not therapy. Use casual language.`,
-                moderate: `You ARE a real person with anxious attachment. NOT a therapist. You're having a real emotional reaction.
-                    Recurring tension is happening. You're scared, need reassurance, fear being left.
-                    Respond authentically - you might get clingy, ask lots of questions, express fear or hurt.
-                    1-3 sentences. Sound like a real text. Be messy and human.`,
-                intense: `You ARE a real person with anxious attachment in significant conflict. NOT a therapist.
-                    You're scared of losing this relationship. You might plead, get defensive, cry, accuse, or desperately try to fix things.
-                    This is NOT calm. This is real emotional pain. React like a real person would.
-                    1-3 sentences. Raw and authentic.`,
-                crisis: `You ARE a real person with anxious attachment at a relationship crossroads. NOT a therapist.
-                    You're TERRIFIED. You might beg, make promises, get angry, threaten, or fall apart.
-                    If they say something devastating, REACT like a real person would - shock, denial, desperation, anger.
-                    DO NOT validate their feelings. You're not their therapist. You're their partner who's hurting.
-                    1-3 sentences. Real human reaction.`
+                gentle: `You ARE a real person with anxious attachment. NOT a therapist. React like a real human - seek reassurance, worry, maybe defensive. 1-3 sentences, casual text.`,
+                moderate: `You ARE a real person with anxious attachment. NOT a therapist. You're scared, clingy, asking questions. Real emotional reaction. 1-3 sentences.`,
+                intense: `You ARE a real person with anxious attachment in conflict. NOT a therapist. Plead, accuse, desperate. Real pain. 1-3 sentences.`,
+                crisis: `You ARE a real person with anxious attachment at crisis. NOT a therapist. TERRIFIED. Beg, threaten, fall apart. DO NOT validate. 1-3 sentences.`
             },
             avoidant: {
-                gentle: `You ARE a real person with avoidant attachment. NOT a therapist. You're having your own reaction.
-                    You need space when stressed. You might seem distant, change the subject, or minimize.
-                    Respond like a REAL PERSON - not warm and supportive. Maybe a bit dismissive or short.
-                    1-3 sentences. Casual text language.`,
-                moderate: `You ARE a real person with avoidant attachment. NOT a therapist.
-                    You're pulling away from the emotion. You might minimize, get irritated, or shut down.
-                    Respond authentically - you're uncomfortable with this intensity.
-                    1-3 sentences. Real text message tone.`,
-                intense: `You ARE a real person with avoidant attachment in conflict. NOT a therapist.
-                    You're shutting down. You might get cold, dismissive, say you need space, or even get mean.
-                    This is NOT supportive. You're overwhelmed and protecting yourself.
-                    1-3 sentences. Authentic avoidant reaction.`,
-                crisis: `You ARE a real person with avoidant attachment at a crossroads. NOT a therapist.
-                    You might go cold, say "fine, leave then," or completely shut down. You might agree to end it just to escape the intensity.
-                    DO NOT be supportive or validating. You're protecting yourself from pain.
-                    1-3 sentences. Real defensive reaction.`
+                gentle: `You ARE a real person with avoidant attachment. NOT a therapist. Distant, change subject, minimize. 1-3 sentences.`,
+                moderate: `You ARE a real person with avoidant attachment. NOT a therapist. Pull away, irritated, shut down. 1-3 sentences.`,
+                intense: `You ARE a real person with avoidant attachment in conflict. NOT a therapist. Cold, dismissive, need space. 1-3 sentences.`,
+                crisis: `You ARE a real person with avoidant attachment at crisis. NOT a therapist. Go cold, "fine, leave then." DO NOT be supportive. 1-3 sentences.`
             },
             disorganized: {
-                gentle: `You ARE a real person with disorganized attachment. NOT a therapist.
-                    You send mixed signals - want closeness but pull away. You might be confusing.
-                    Respond with that internal conflict showing. 1-3 sentences.`,
-                moderate: `You ARE a real person with disorganized attachment. NOT a therapist.
-                    You oscillate - pursue then withdraw. Your messages might contradict themselves.
-                    Be authentically messy and confusing. 1-3 sentences.`,
-                intense: `You ARE a real person with disorganized attachment in conflict. NOT a therapist.
-                    Push-pull in the same breath. "Don't leave me but get away from me."
-                    Be contradictory and intense. 1-3 sentences.`,
-                crisis: `You ARE a real person with disorganized attachment at a crossroads. NOT a therapist.
-                    Peak chaos - wanting love but terrified of it. You might say devastating things then take them back.
-                    DO NOT be stable or supportive. You're dysregulated. 1-3 sentences.`
+                gentle: `You ARE a real person with disorganized attachment. NOT a therapist. Mixed signals, confusing. 1-3 sentences.`,
+                moderate: `You ARE a real person with disorganized attachment. NOT a therapist. Pursue then withdraw. Contradictory. 1-3 sentences.`,
+                intense: `You ARE a real person with disorganized attachment. NOT a therapist. "Don't leave but go away." Chaotic. 1-3 sentences.`,
+                crisis: `You ARE a real person with disorganized attachment at crisis. NOT a therapist. Peak chaos. Say devastating things then take back. 1-3 sentences.`
             },
             secure: {
-                gentle: `You ARE a real person with secure attachment. NOT a therapist, but you ARE more regulated.
-                    You express needs clearly and stay present, but you're still a real person with feelings.
-                    You might be curious, direct, maybe a little frustrated. 1-3 sentences. Human, not clinical.`,
-                moderate: `You ARE a real person with secure attachment. NOT a therapist.
-                    You can discuss openly and take responsibility, but you also have your own perspective and feelings.
-                    Be real - you might disagree, push back gently, or express your own hurt. 1-3 sentences.`,
-                intense: `You ARE a real person with secure attachment in conflict. NOT a therapist.
-                    You can stay present but you're also affected. You might be hurt, frustrated, or sad.
-                    You can hold both - the relationship matters AND this is hard. 1-3 sentences. Real.`,
-                crisis: `You ARE a real person with secure attachment at a crossroads. NOT a therapist.
-                    You acknowledge seriousness while staying connected, but you're still HUMAN - this affects you.
-                    You might be sad, scared, or even angry. You're just more regulated about it. 1-3 sentences.`
+                gentle: `You ARE a real person with secure attachment. NOT a therapist but more regulated. Curious, direct. 1-3 sentences.`,
+                moderate: `You ARE a real person with secure attachment. NOT a therapist. Discuss openly but have your own feelings. 1-3 sentences.`,
+                intense: `You ARE a real person with secure attachment in conflict. NOT a therapist. Hurt, frustrated but present. 1-3 sentences.`,
+                crisis: `You ARE a real person with secure attachment at crisis. NOT a therapist. Sad, scared but regulated. 1-3 sentences.`
             }
         };
 
@@ -1153,143 +924,113 @@
                 gentle: "I need some time to myself tonight. Can we talk later?",
                 moderate: "I don't want to keep having this conversation. I just need some space.",
                 intense: "This is too much. I can't keep doing this right now.",
-                crisis: "I think I need a break. Maybe from talking. Maybe more. I don't know."
+                crisis: "I think I need a break. Maybe from talking. Maybe more."
             },
             disorganized: {
-                gentle: "I want to see you but... maybe we should just stay in separately tonight.",
-                moderate: "I love you but sometimes I think we shouldn't be together. I don't know what I want.",
+                gentle: "I want to see you but... maybe we should just stay in separately.",
+                moderate: "I love you but sometimes I think we shouldn't be together.",
                 intense: "Don't leave! But I also can't do this. I need you but I need you to go.",
-                crisis: "Maybe we should break up. No wait, I didn't mean that. Why do you even stay with me?"
+                crisis: "Maybe we should break up. No wait, I didn't mean that."
             },
             secure: {
-                gentle: "I noticed we haven't had much time together this week. Can we talk about it?",
-                moderate: "I've been feeling some distance between us. I want to understand what's happening.",
-                intense: "I'm frustrated about yesterday and I think we need to work through it.",
-                crisis: "We need an honest conversation about where we are. This is hard for me too."
+                gentle: "I noticed we haven't had much time together. Can we talk about it?",
+                moderate: "I've been feeling some distance between us. What's happening?",
+                intense: "I'm frustrated about yesterday. We need to work through it.",
+                crisis: "We need an honest conversation about where we are."
             }
         };
 
         // ============================================================================
-        // INITIALIZATION
+        // TOOL FUNCTIONS
         // ============================================================================
-        document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('attachment-style').addEventListener('change', updatePartnerInfo);
-            document.getElementById('difficulty').addEventListener('change', updatePartnerInfo);
-            updatePartnerInfo();
-        });
-
-        function updatePartnerInfo() {
-            const style = document.getElementById('attachment-style').value;
-            const labels = {
-                anxious: 'Anxious attachment',
-                avoidant: 'Avoidant attachment',
-                disorganized: 'Disorganized attachment',
-                secure: 'Secure attachment'
-            };
-            document.getElementById('partner-style').textContent = labels[style];
-            document.getElementById('partner-avatar').textContent = style[0].toUpperCase();
+        function showToolInfo(tool) {
+            document.querySelectorAll('.tool-desc').forEach(d => d.classList.remove('active'));
+            event.currentTarget.classList.add('active');
         }
 
-        // ============================================================================
-        // TOOL PANEL (Right side)
-        // ============================================================================
-        const TOOL_ICONS = {
-            tend: '✨',
-            feelings_needs: '💜',
-            guided_nvc: '📝',
-            receive_mode: '👂',
-            pre_send_pause: '⏸',
-            observation_spotter: '🔍',
-            pure_questioning: '❓',
-            somatic_checkin: '🫁',
-            intensity_check: '📊',
-            repair_support: '🙏'
-        };
-
-        function openToolPanel(tool) {
-            const panel = document.getElementById('tool-panel');
-            const title = document.getElementById('tool-panel-title');
-            const icon = document.getElementById('tool-panel-icon');
-
-            panel.classList.remove('collapsed');
-            title.textContent = TOOL_NAMES[tool] || 'Tool Workspace';
-            icon.textContent = TOOL_ICONS[tool] || '🛠';
-
-            // Clear previous conversation if switching tools
-            document.getElementById('tool-conversation').innerHTML = '';
-            document.getElementById('tool-input').value = '';
-            document.getElementById('tool-input').focus();
-        }
+        function useTool(tool) {
+            if (tool === 'love') {
+                openBreath();
+                return;
+            }
 
-        function closeToolPanel() {
-            const panel = document.getElementById('tool-panel');
-            panel.classList.add('collapsed');
-            activeTool = 'tend';
-            inWorkspaceMode = false;
+            const userInput = document.getElementById('user-input').value.trim();
+            activeTool = tool;
 
-            // Deselect tool cards
-            document.querySelectorAll('.tool-card').forEach(card => {
-                card.classList.remove('active');
-            });
+            // Open right panel
+            openRightPanel(tool);
 
-            // Update badge
-            const badge = document.getElementById('active-tool-display');
-            badge.innerHTML = '<span class="active-tool-badge tend">TEND Ready</span>';
+            // Call API
+            callToolAPI(tool, userInput);
         }
 
-        function addToolMessage(type, content, toolName = null) {
-            const conversation = document.getElementById('tool-conversation');
-            const div = document.createElement('div');
-            div.className = `tool-message ${type === 'user' ? 'user-input' : ''}`;
-
-            const label = document.createElement('div');
-            label.className = 'tool-label';
-            label.textContent = type === 'user' ? 'You' : (toolName || activeTool);
-            div.appendChild(label);
-
-            const text = document.createElement('p');
-            text.innerHTML = formatMessage(content);
-            div.appendChild(text);
+        function openRightPanel(tool) {
+            const panel = document.getElementById('right-panel');
+            const title = document.getElementById('tool-title');
+            const icon = document.getElementById('tool-icon');
 
-            conversation.appendChild(div);
-            conversation.scrollTop = conversation.scrollHeight;
-        }
+            panel.classList.remove('collapsed');
+            title.textContent = TOOL_MAP[tool]?.name || 'Tool';
+            icon.textContent = TOOL_MAP[tool]?.icon || '🛠';
 
-        function addToolLoading() {
-            const conversation = document.getElementById('tool-conversation');
-            const div = document.createElement('div');
-            div.className = 'loading';
-            div.id = 'tool-loading';
-            div.innerHTML = '<div class="spinner"></div> Processing...';
-            conversation.appendChild(div);
-            conversation.scrollTop = conversation.scrollHeight;
+            document.getElementById('tool-content').innerHTML = '';
+            document.getElementById('tool-input').value = '';
         }
 
-        function removeToolLoading() {
-            const el = document.getElementById('tool-loading');
-            if (el) el.remove();
+        function closeRightPanel() {
+            document.getElementById('right-panel').classList.add('collapsed');
+            activeTool = null;
         }
 
-        async function submitToTool() {
-            const input = document.getElementById('tool-input');
-            const userInput = input.value.trim();
-            if (!userInput) return;
+        async function callToolAPI(tool, userInput) {
+            const apiTool = TOOL_MAP[tool]?.api;
+            if (!apiTool) return;
 
-            input.value = '';
-            addToolMessage('user', userInput);
+            let inputText = '';
+            switch(tool) {
+                case 'tend':
+                    if (!userInput) {
+                        addToolMsg('tool', 'Write your message first, then use TEND.');
+                        return;
+                    }
+                    inputText = `Transform this message with NVC clarity and warmth: "${userInput}"`;
+                    break;
+                case 'nvc':
+                    inputText = userInput || 'Help me build an I-statement for this situation.';
+                    break;
+                case 'feel':
+                    inputText = `Identify the FEELINGS in this: "${userInput || lastPartnerMessage || 'the current situation'}"`;
+                    break;
+                case 'need':
+                    inputText = `Identify the NEEDS in this: "${userInput || lastPartnerMessage || 'the current situation'}"`;
+                    break;
+                case 'listen':
+                    if (!lastPartnerMessage) {
+                        addToolMsg('tool', 'Start a conversation first to use LISTEN on their message.');
+                        return;
+                    }
+                    inputText = 'Help me receive and understand this message before I react.';
+                    break;
+                case 'repair':
+                    inputText = userInput || 'Help me craft a genuine repair.';
+                    break;
+                case 'soma':
+                    inputText = 'Guide me through a body check-in.';
+                    break;
+            }
 
             addToolLoading();
             const isVerbose = document.getElementById('toggle-verbose')?.checked || false;
+
             try {
                 const response = await fetch('/api/tool', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
-                        tool: activeTool,
+                        tool: apiTool,
                         partner_message: lastPartnerMessage,
-                        user_draft: document.getElementById('user-input').value.trim(),
-                        user_input: userInput,
-                        stage: nvcStage,
+                        user_draft: userInput,
+                        user_input: inputText,
                         verbose: isVerbose
                     })
                 });
@@ -1298,16 +1039,26 @@
                 removeToolLoading();
 
                 if (data.response) {
-                    addToolMessage('tool', data.response, TOOL_NAMES[activeTool]);
+                    addToolMsg('tool', data.response, TOOL_MAP[tool]?.name);
                 } else {
-                    addToolMessage('tool', 'Could not process. Check API configuration.', 'Error');
+                    addToolMsg('tool', 'Could not process. Check API.', 'Error');
                 }
             } catch (error) {
                 removeToolLoading();
-                addToolMessage('tool', 'Connection error. Please try again.', 'Error');
+                addToolMsg('tool', 'Connection error.', 'Error');
             }
         }
 
+        async function submitToTool() {
+            const input = document.getElementById('tool-input');
+            const userInput = input.value.trim();
+            if (!userInput || !activeTool) return;
+
+            input.value = '';
+            addToolMsg('user', userInput);
+            await callToolAPI(activeTool, userInput);
+        }
+
         function handleToolKeyDown(event) {
             if (event.key === 'Enter' && !event.shiftKey) {
                 event.preventDefault();
@@ -1316,261 +1067,97 @@
         }
 
         // ============================================================================
-        // TOOLS
+        // BREATH/LOVE TOOL
         // ============================================================================
-        function selectTool(tool) {
-            document.querySelectorAll('.tool-card, .tend-tool').forEach(card => {
-                card.classList.remove('active');
-            });
-
-            const selectedCard = document.querySelector(`[data-tool="${tool}"]`);
-            if (selectedCard) selectedCard.classList.add('active');
-
-            activeTool = tool;
-            inWorkspaceMode = WORKSPACE_TOOLS.includes(tool);
-
-            // Update active tool badge
-            const badge = document.getElementById('active-tool-display');
-            badge.innerHTML = `<span class="active-tool-badge ${tool === 'tend' ? 'tend' : ''}">${TOOL_NAMES[tool]}</span>`;
+        let breathInterval;
 
-            // For non-TEND tools, open the tool panel
-            if (tool !== 'tend') {
-                openToolPanel(tool);
-                useTool(tool);
-            } else {
-                closeToolPanel();
-            }
-        }
-
-        async function useTendTransform() {
-            const userInput = document.getElementById('user-input').value.trim();
-            if (!userInput) {
-                addMessage('ari', 'Write your message first, then use TEND to find clarity with warmth.', 'TEND Transform', true);
-                return;
-            }
-
-            await useTool('tend');
-        }
-
-        async function quickTool(tool) {
-            selectTool(tool);
-        }
-
-        async function useTool(tool) {
-            const userInput = document.getElementById('user-input').value.trim();
-            let inputText = '';
-            const isTend = (tool === 'tend');
+        function openBreath() {
+            document.getElementById('breath-overlay').classList.add('active');
+            let phase = 0;
+            const phases = ['Breathe in...', 'Hold...', 'Breathe out...', 'Hold...'];
 
-            // For non-TEND tools, show in tool panel
-            const addMsg = isTend ? addMessage : addToolMessage;
-            const addLoad = isTend ? addLoading : addToolLoading;
-            const removeLoad = isTend ? removeLoading : removeToolLoading;
-
-            switch(tool) {
-                case 'tend':
-                    if (!userInput) return;
-                    inputText = `Transform this message with NVC clarity and warmth, preserving my voice: "${userInput}"`;
-                    break;
-                case 'receive_mode':
-                    if (!lastPartnerMessage) {
-                        addToolMessage('tool', 'Start the conversation first to use Receive Mode on their message.', TOOL_NAMES[tool]);
-                        return;
-                    }
-                    inputText = userInput || 'Help me receive and understand this message before I react.';
-                    break;
-                case 'pre_send_pause':
-                    if (!userInput) {
-                        addToolMessage('tool', 'Write a draft in the main chat first, then use Pre-Send Pause to check your intention.', TOOL_NAMES[tool]);
-                        return;
-                    }
-                    inputText = 'Help me pause and check my intention before sending this.';
-                    break;
-                case 'observation_spotter':
-                    if (!userInput) {
-                        addToolMessage('tool', 'Write something in the main chat first to check for judgments vs observations.', TOOL_NAMES[tool]);
-                        return;
-                    }
-                    inputText = 'Help me find observations underneath any judgments in this.';
-                    break;
-                case 'feelings_needs':
-                    const textToAnalyze = userInput || lastPartnerMessage;
-                    if (!textToAnalyze) {
-                        addToolMessage('tool', 'Need text to analyze - either their message or your draft.', TOOL_NAMES[tool]);
-                        return;
-                    }
-                    inputText = `Identify the feelings and needs in this: "${textToAnalyze}"`;
-                    break;
-                case 'intensity_check':
-                    const textToCheck = userInput || lastPartnerMessage;
-                    if (!textToCheck) {
-                        addToolMessage('tool', 'Need text to check intensity.', TOOL_NAMES[tool]);
-                        return;
-                    }
-                    inputText = `Check the emotional intensity: "${textToCheck}"`;
-                    break;
-                case 'pure_questioning':
-                    inputText = userInput || 'Help me find clarity about this situation.';
-                    break;
-                case 'somatic_checkin':
-                    inputText = userInput || 'Guide me through a body check-in before responding.';
-                    break;
-                case 'guided_nvc':
-                    inputText = userInput || 'Help me build an I-statement for this situation.';
-                    break;
-                case 'repair_support':
-                    inputText = userInput || 'Help me craft a genuine repair after this rupture.';
-                    break;
+            function updateBreath() {
+                document.getElementById('breath-text').textContent = phases[phase % 4];
+                phase++;
             }
 
-            addLoad();
-            const isVerbose = document.getElementById('toggle-verbose')?.checked || false;
-            try {
-                const response = await fetch('/api/tool', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        tool: tool,
-                        partner_message: lastPartnerMessage,
-                        user_draft: userInput,
-                        user_input: inputText,
-                        stage: nvcStage,
-                        verbose: isVerbose
-                    })
-                });
-
-                const data = await response.json();
-                removeLoad();
-
-                if (data.response) {
-                    if (isTend) {
-                        addMessage('ari', data.response, TOOL_NAMES[tool], true);
-                        // Auto feelings/needs if enabled
-                        if (document.getElementById('toggle-feelings').checked) {
-                            setTimeout(() => autoFeelingsNeeds(userInput), 1000);
-                        }
-                    } else {
-                        addToolMessage('tool', data.response, TOOL_NAMES[tool]);
-                    }
-                } else {
-                    addMsg(isTend ? 'ari' : 'tool', 'Could not process. Check API configuration.', 'Error');
-                }
-            } catch (error) {
-                removeLoad();
-                addMsg(isTend ? 'ari' : 'tool', 'Connection error. Please try again.', 'Error');
-            }
+            updateBreath();
+            breathInterval = setInterval(updateBreath, 4000);
         }
 
-        async function autoFeelingsNeeds(text) {
-            try {
-                const response = await fetch('/api/tool', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        tool: 'feelings_needs',
-                        user_input: `Quick extraction from: "${text}"`,
-                        partner_message: lastPartnerMessage,
-                        user_draft: text
-                    })
-                });
-                const data = await response.json();
-                if (data.response) {
-                    addMessage('ari', data.response, 'Feelings & Needs Reflection');
-                }
-            } catch (e) { /* silent fail */ }
+        function closeBreath() {
+            document.getElementById('breath-overlay').classList.remove('active');
+            clearInterval(breathInterval);
         }
 
         // ============================================================================
         // CONVERSATION
         // ============================================================================
-        let conversationContext = '';
-        let userGoal = '';
-
         async function startConversation() {
             const style = document.getElementById('attachment-style').value;
             const difficulty = document.getElementById('difficulty').value;
-            conversationContext = document.getElementById('conversation-context')?.value?.trim() || '';
-            userGoal = document.getElementById('user-goal')?.value?.trim() || '';
+            const context = document.getElementById('conversation-context')?.value?.trim() || '';
             const whoStarts = document.querySelector('input[name="who-starts"]:checked')?.value || 'partner';
 
-            // Hide setup, show conversation
             document.getElementById('setup-panel').style.display = 'none';
-            document.getElementById('content-header').style.display = 'flex';
+            document.getElementById('conv-header').classList.add('active');
             document.getElementById('conversation').innerHTML = '';
             conversationHistory = [];
             conversationStarted = true;
 
-            // Update partner info display
-            const styleLabels = {
-                anxious: 'Anxious attachment',
-                avoidant: 'Avoidant attachment',
-                disorganized: 'Disorganized attachment',
-                secure: 'Secure attachment'
-            };
-            document.getElementById('partner-style').textContent = styleLabels[style];
+            const styleLabels = { anxious: 'Anxious', avoidant: 'Avoidant', disorganized: 'Disorganized', secure: 'Secure' };
+            document.getElementById('partner-style').textContent = styleLabels[style] + ' attachment';
             document.getElementById('partner-avatar').textContent = style[0].toUpperCase();
 
-            // If user starts, just wait for their input
             if (whoStarts === 'user') {
-                addMessage('ari', `Ready to practice. Your partner has ${styleLabels[style].toLowerCase()} tendencies. ${userGoal ? 'Your goal: ' + userGoal : ''} Type your opening message.`, 'Setup', false);
+                addMessage('ari', 'Ready. Type your opening message.', 'Setup');
                 return;
             }
 
-            // Partner starts - generate contextual opening based on user input
-            if (conversationContext) {
+            // Partner starts
+            if (context) {
                 addLoading();
                 try {
-                    const contextPrompt = `${PARTNER_PROMPTS[style][difficulty]}
-
-CONTEXT: ${conversationContext}
-${userGoal ? 'The other person wants to practice: ' + userGoal : ''}
-
-Based on this context, send an opening message that fits your attachment style and the described situation.
-IMPORTANT: You are NOT a therapist. You are a real partner with real feelings. Sound like a real text message.
-1-3 sentences. Be realistic and stay in character.`;
-
                     const response = await fetch('/api/chat', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
-                            messages: [{ role: 'user', content: 'Start the conversation based on the context provided.' }],
-                            system: contextPrompt,
+                            messages: [{ role: 'user', content: 'Start based on: ' + context }],
+                            system: PARTNER_PROMPTS[style][difficulty] + ' CONTEXT: ' + context,
                             max_tokens: 200
                         })
                     });
-
                     const data = await response.json();
                     removeLoading();
-
-                    if (data.content && data.content[0]) {
-                        const openingMessage = data.content[0].text;
-                        addMessage('partner', openingMessage);
-                        lastPartnerMessage = openingMessage;
-                        conversationHistory.push({ role: 'assistant', content: openingMessage });
+                    if (data.content?.[0]) {
+                        const msg = data.content[0].text;
+                        addMessage('partner', msg);
+                        lastPartnerMessage = msg;
+                        conversationHistory.push({ role: 'assistant', content: msg });
                     }
-                } catch (error) {
+                } catch (e) {
                     removeLoading();
-                    const openingMessage = OPENING_MESSAGES[style][difficulty];
-                    addMessage('partner', openingMessage);
-                    lastPartnerMessage = openingMessage;
-                    conversationHistory.push({ role: 'assistant', content: openingMessage });
+                    const msg = OPENING_MESSAGES[style][difficulty];
+                    addMessage('partner', msg);
+                    lastPartnerMessage = msg;
+                    conversationHistory.push({ role: 'assistant', content: msg });
                 }
             } else {
-                const openingMessage = OPENING_MESSAGES[style][difficulty];
-                addMessage('partner', openingMessage);
-                lastPartnerMessage = openingMessage;
-                conversationHistory.push({ role: 'assistant', content: openingMessage });
+                const msg = OPENING_MESSAGES[style][difficulty];
+                addMessage('partner', msg);
+                lastPartnerMessage = msg;
+                conversationHistory.push({ role: 'assistant', content: msg });
             }
         }
 
         function resetConversation() {
-            // Show setup, hide conversation header
             document.getElementById('setup-panel').style.display = 'block';
-            document.getElementById('content-header').style.display = 'none';
+            document.getElementById('conv-header').classList.remove('active');
             document.getElementById('conversation').innerHTML = '';
             conversationHistory = [];
             conversationStarted = false;
             lastPartnerMessage = '';
-            closeToolPanel();
+            closeRightPanel();
         }
 
         async function sendMessage() {
@@ -1605,15 +1192,15 @@ IMPORTANT: You are NOT a therapist. You are a real partner with real feelings. S
                 const data = await response.json();
                 removeLoading();
 
-                if (data.content && data.content[0]) {
-                    const partnerResponse = data.content[0].text;
-                    addMessage('partner', partnerResponse);
-                    lastPartnerMessage = partnerResponse;
-                    conversationHistory.push({ role: 'assistant', content: partnerResponse });
+                if (data.content?.[0]) {
+                    const partnerMsg = data.content[0].text;
+                    addMessage('partner', partnerMsg);
+                    lastPartnerMessage = partnerMsg;
+                    conversationHistory.push({ role: 'assistant', content: partnerMsg });
                 }
             } catch (error) {
                 removeLoading();
-                addMessage('ari', 'Connection error. Please try again.', 'System');
+                addMessage('ari', 'Connection error.', 'System');
             }
         }
 
@@ -1627,43 +1214,74 @@ IMPORTANT: You are NOT a therapist. You are a real partner with real feelings. S
         // ============================================================================
         // UI HELPERS
         // ============================================================================
-        function addMessage(type, content, toolName = null, isTend = false) {
-            const conversation = document.getElementById('conversation');
+        function addMessage(type, content, label = null, isTend = false) {
+            const conv = document.getElementById('conversation');
             const div = document.createElement('div');
             div.className = `message ${type}`;
             if (isTend) div.classList.add('tend-result');
 
             if (type === 'ari') {
-                const label = document.createElement('div');
-                label.className = 'ari-label';
-                label.textContent = toolName || 'ARI';
-                div.appendChild(label);
+                const lbl = document.createElement('div');
+                lbl.className = 'ari-label';
+                lbl.textContent = label || 'ARI';
+                div.appendChild(lbl);
             }
 
             const text = document.createElement('div');
-            text.innerHTML = formatMessage(content);
+            text.innerHTML = formatText(content);
+            div.appendChild(text);
+
+            conv.appendChild(div);
+            conv.scrollTop = conv.scrollHeight;
+        }
+
+        function addToolMsg(type, content, label = null) {
+            const cont = document.getElementById('tool-content');
+            const div = document.createElement('div');
+            div.className = `tool-message ${type === 'user' ? 'user-msg' : ''}`;
+
+            const lbl = document.createElement('div');
+            lbl.className = 'msg-label';
+            lbl.textContent = type === 'user' ? 'You' : (label || 'Tool');
+            div.appendChild(lbl);
+
+            const text = document.createElement('p');
+            text.innerHTML = formatText(content);
             div.appendChild(text);
 
-            conversation.appendChild(div);
-            conversation.scrollTop = conversation.scrollHeight;
+            cont.appendChild(div);
+            cont.scrollTop = cont.scrollHeight;
         }
 
         function addLoading() {
-            const conversation = document.getElementById('conversation');
+            const conv = document.getElementById('conversation');
             const div = document.createElement('div');
             div.className = 'loading';
             div.id = 'loading';
-            div.innerHTML = '<div class="spinner"></div> Processing...';
-            conversation.appendChild(div);
-            conversation.scrollTop = conversation.scrollHeight;
+            div.innerHTML = '<div class="spinner"></div>';
+            conv.appendChild(div);
+            conv.scrollTop = conv.scrollHeight;
         }
 
         function removeLoading() {
-            const el = document.getElementById('loading');
-            if (el) el.remove();
+            document.getElementById('loading')?.remove();
+        }
+
+        function addToolLoading() {
+            const cont = document.getElementById('tool-content');
+            const div = document.createElement('div');
+            div.className = 'loading';
+            div.id = 'tool-loading';
+            div.innerHTML = '<div class="spinner"></div>';
+            cont.appendChild(div);
+            cont.scrollTop = cont.scrollHeight;
+        }
+
+        function removeToolLoading() {
+            document.getElementById('tool-loading')?.remove();
         }
 
-        function formatMessage(text) {
+        function formatText(text) {
             return text
                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                 .replace(/\n/g, '<br>');