{% extends "base.html" %}

{% block title %}Chat — ICDEV™ Dashboard{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Chat</h1>
    <p class="text-muted">Multi-stream agent chat with requirements intake, COA generation, and build pipeline.</p>
</div>

<!-- Stats bar -->
<div class="stat-grid" id="chat-top-stats">
    <div class="stat-card">
        <div class="stat-value" id="stat-active">0</div>
        <div class="stat-label">Active Chats</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-processing">0</div>
        <div class="stat-label">Processing</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-queued">0</div>
        <div class="stat-label">Queued Messages</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-total">0</div>
        <div class="stat-label">Total Contexts</div>
    </div>
</div>

<!-- Main layout: CSS Grid with resize handles (D-CU-5) -->
<div class="chat-layout" id="chat-layout">
    <!-- Left sidebar: context list -->
    <div class="chat-sidebar" id="chat-sidebar">
        <div class="chat-sidebar__header">
            <strong>Contexts</strong>
            <button id="btn-new-context" class="chat-sidebar__new-btn" title="Create new chat context">+ New</button>
        </div>
        <div id="context-list" class="chat-sidebar__list"></div>
    </div>

    <!-- Left resize handle -->
    <div class="chat-resize-handle" id="resize-left" title="Drag to resize"></div>

    <!-- Main chat pane -->
    <div class="chat-main">
        <!-- Chat header -->
        <div id="chat-header" class="chat-header">
            <span id="chat-title" class="chat-header__title">Select or create a context</span>
            <div class="chat-header__actions">
                <span id="chat-status" class="badge chat-header__status"></span>
                <button id="btn-ricoas-toggle" class="chat-toggle-btn chat-toggle-btn--ricoas" title="Toggle RICOAS sidebar">RICOAS</button>
                <button id="btn-gov-toggle" class="chat-toggle-btn chat-toggle-btn--gov" title="Toggle AI Governance sidebar">Gov</button>
                <button id="btn-intel-toggle" class="chat-toggle-btn chat-toggle-btn--intel" title="Toggle Intelligence sidebar (RAG, Bayesian, Code Quality, Genesis)">Intel</button>
                <button id="btn-focus-mode" class="chat-toggle-btn chat-toggle-btn--focus" title="Focus mode — hide sidebars">Focus</button>
                <button id="btn-close-context" class="chat-toggle-btn chat-toggle-btn--close">Close</button>
            </div>
        </div>

        <!-- Message stream -->
        <div id="message-stream" class="chat-messages"></div>

        <!-- Typing indicator (D-CU-1) -->
        <div id="typing-indicator" class="typing-indicator">
            <div class="agent-avatar" id="typing-avatar" style="width:28px;height:28px;font-size:0.7rem;"></div>
            <div class="typing-dots">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
            <span class="typing-label" id="typing-label">Agent is thinking...</span>
        </div>

        <!-- Intervention bar (visible during processing) -->
        <div id="intervention-bar" class="chat-intervention">
            <div class="chat-intervention__inner">
                <span class="chat-intervention__label">Agent is processing...</span>
                <input type="text" id="intervention-input" class="chat-intervention__input" placeholder="Type to intervene...">
                <button id="btn-intervene" class="chat-intervention__btn">Intervene</button>
            </div>
        </div>

        <!-- Input area with file upload -->
        <div id="input-area" class="chat-input-area">
            <div class="chat-input-area__inner">
                <button id="chat-upload-btn" class="chat-upload-btn" title="Upload document or image" aria-label="Upload file">&#x1F4CE;</button>
                <input type="text" id="message-input" class="chat-message-input" placeholder="Type a message..." disabled>
                <button id="btn-send" class="chat-send-btn" disabled>Send</button>
                <input type="file" id="chat-file-input" style="display:none" accept=".txt,.md,.pdf,.docx,.png,.jpg,.jpeg,.gif,.webp">
            </div>
        </div>
    </div>

    <!-- Right resize handle -->
    <div class="chat-resize-handle" id="resize-right" title="Drag to resize"></div>

    <!-- Right sidebar: Tabbed (RICOAS | Gov | Intel) -->
    <div id="right-sidebar" class="chat-right-panel">
        <!-- Tabs -->
        <div class="chat-right-tabs" id="right-sidebar-tabs">
            <button class="chat-right-tab chat-right-tab--active" data-tab="ricoas" id="tab-ricoas">RICOAS</button>
            <button class="chat-right-tab" data-tab="gov" id="tab-gov">Gov</button>
            <button class="chat-right-tab" data-tab="intel" id="tab-intel">Intel</button>
        </div>

        <!-- RICOAS Tab Content -->
        <div id="ricoas-sidebar" class="chat-right-tab-content chat-right-tab-content--active" data-tab-content="ricoas">
            <!-- Compliance Frameworks -->
            <div class="sidebar-section" id="frameworks-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Compliance Frameworks</h4>
                <div id="framework-tags" class="framework-tags"></div>
            </div>

            <!-- Complexity -->
            <div class="sidebar-section" id="complexity-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Project Complexity</h4>
                <div class="complexity-indicator" id="complexity-indicator">
                    <div class="complexity-level" id="complexity-level"></div>
                    <div class="complexity-bar-container"><div class="complexity-bar-fill" id="complexity-bar" style="width:0%"></div></div>
                    <div class="complexity-score-text" id="complexity-score-text"></div>
                </div>
                <div class="complexity-recommendation" id="complexity-recommendation" style="display:none;"></div>
            </div>

            <!-- Readiness Score -->
            <h4 class="chat-sidebar-heading">Readiness Score</h4>
            <div class="readiness-gauge-container" id="readiness-gauge" style="text-align: center;">
                <svg viewBox="0 0 120 120" class="readiness-gauge-svg" style="width: 100px; height: 100px;">
                    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--border-color)" stroke-width="10"/>
                    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent-blue)" stroke-width="10"
                            stroke-dasharray="314" stroke-dashoffset="314" stroke-linecap="round"
                            transform="rotate(-90 60 60)" id="readiness-arc"/>
                    <text x="60" y="60" text-anchor="middle" dominant-baseline="central"
                          fill="var(--text-primary)" font-size="24" font-weight="bold" id="readiness-pct">0%</text>
                </svg>
            </div>

            <div class="readiness-dimensions" id="readiness-dimensions">
                <div class="readiness-dim"><span class="readiness-dim-label">Completeness</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-completeness" style="width:0%"></div></div><span class="readiness-dim-value" id="val-completeness">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Clarity</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-clarity" style="width:0%"></div></div><span class="readiness-dim-value" id="val-clarity">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Feasibility</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-feasibility" style="width:0%"></div></div><span class="readiness-dim-value" id="val-feasibility">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Compliance</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-compliance" style="width:0%"></div></div><span class="readiness-dim-value" id="val-compliance">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Testability</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-testability" style="width:0%"></div></div><span class="readiness-dim-value" id="val-testability">0%</span></div>
            </div>

            <div class="chat-stats">
                <div class="chat-stat"><span class="chat-stat-label">Requirements</span> <span class="chat-stat-value" id="stat-requirements">0</span></div>
                <div class="chat-stat"><span class="chat-stat-label">Documents</span> <span class="chat-stat-value" id="stat-documents">0</span></div>
                <div class="chat-stat"><span class="chat-stat-label">Turns</span> <span class="chat-stat-value" id="stat-turns">0</span></div>
            </div>

            <!-- Elicitation Techniques -->
            <div class="sidebar-section" id="techniques-section">
                <h4 class="chat-sidebar-heading">Elicitation Techniques</h4>
                <div id="technique-active" class="technique-active-banner" style="display:none;">
                    <span id="technique-active-name"></span>
                    <button class="technique-deactivate-btn" onclick="ICDEV.chatDeactivateTechnique()" title="Deactivate">&times;</button>
                </div>
                <div id="technique-chips" class="technique-chips"></div>
            </div>

            <!-- BDD Preview -->
            <div class="sidebar-section" id="bdd-preview-section" style="display:none;">
                <h4 class="chat-sidebar-heading">BDD Scenarios (Draft)</h4>
                <div id="bdd-preview-list" class="bdd-preview-list"></div>
            </div>

            <!-- Courses of Action -->
            <div class="sidebar-section" id="coa-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Courses of Action</h4>
                <div id="coa-list"></div>
                <div id="coa-selected-banner" class="coa-selected-banner" style="display:none;">&#x2713; <span id="coa-selected-name"></span> selected</div>
            </div>

            <div id="chat-actions" class="chat-actions">
                <button class="btn btn-success btn-lg" id="generate-plan-btn" style="display:none;" onclick="ICDEV.chatGeneratePlan()">Generate Plan &#x2192;</button>
                <button class="btn btn-secondary" id="export-btn" style="display:none;" onclick="ICDEV.chatExport()">Export Requirements</button>
            </div>

            <!-- Post-export actions -->
            <div id="post-export-actions" class="post-export-actions" style="display:none;">
                <h4 class="chat-sidebar-heading">What's next?</h4>
                <button class="btn btn-primary" onclick="ICDEV.chatTriggerBuild()">Generate Application</button>
                <button class="btn btn-warning" onclick="ICDEV.chatSendToKanban()">&#x1F4CB; Send to Kanban</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatRunSimulation()">Run Simulation (COAs)</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatViewRequirements()">View Requirements</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatGeneratePRD()">&#x1F4C4; Generate PRD</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatValidatePRD()">&#x2714; Validate PRD</button>
            </div>

            <!-- Build Pipeline -->
            <div class="sidebar-section" id="build-pipeline-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Build Pipeline</h4>
                <div id="build-pipeline-phases" class="build-pipeline"></div>
                <div id="build-pipeline-status" class="build-pipeline-status"></div>
                <div id="build-done-actions" class="build-done-actions" style="display:none;">
                    <button class="btn btn-primary" onclick="ICDEV.chatViewProject()">View Project</button>
                    <button class="btn btn-secondary" onclick="ICDEV.chatRunTests()">Run Tests</button>
                    <button class="btn btn-secondary" onclick="window.open('/events','_blank')">View Events</button>
                </div>
            </div>
        </div>

        <!-- Governance Tab Content -->
        <div id="gov-sidebar" class="chat-right-tab-content" data-tab-content="gov">
            <div class="gov-sidebar-header">
                <strong class="gov-sidebar-title">AI Governance</strong>
            </div>
            <div id="gov-sidebar-content">
                <p class="gov-sidebar-placeholder">Loading governance status...</p>
            </div>
        </div>

        <!-- Intelligence Tab Content -->
        <div id="intel-sidebar" class="chat-right-tab-content" data-tab-content="intel">
            <div class="intel-sidebar-header">
                <strong class="intel-sidebar-title">Intelligence</strong>
                <span class="intel-sidebar-subtitle">RAG + Bayesian + Quality + Genesis</span>
            </div>

            <!-- RAG Knowledge Sources -->
            <div class="intel-section" id="intel-rag">
                <h4 class="intel-section-heading intel-section-heading--rag">Knowledge Sources (RAG)</h4>
                <div id="intel-rag-content" class="intel-section-content">
                    No sources retrieved yet. RAG context is automatically injected when you ask questions.
                </div>
            </div>

            <!-- Bayesian Learning -->
            <div class="intel-section" id="intel-bayesian">
                <h4 class="intel-section-heading intel-section-heading--bayesian">Bayesian Learning</h4>
                <div id="intel-bayesian-content" class="intel-section-content">
                    Discuss compliance topics to get information-gain optimized recommendations for control implementation order.
                </div>
            </div>

            <!-- Code Quality -->
            <div class="intel-section" id="intel-code-quality">
                <h4 class="intel-section-heading intel-section-heading--quality">Code Quality</h4>
                <div id="intel-code-quality-content" class="intel-section-content">
                    Discuss code or implementation topics to get maintainability insights, smell detection, and complexity alerts.
                </div>
            </div>

            <!-- Genesis Activity -->
            <div class="intel-section" id="intel-genesis">
                <h4 class="intel-section-heading intel-section-heading--genesis">Genesis Research Lab</h4>
                <div id="intel-genesis-content" class="intel-section-content">
                    Discuss improvements or research to see autonomous Genesis findings and pending knowledge packets.
                </div>
            </div>

            <!-- Context Health -->
            <div class="intel-section" id="intel-health">
                <h4 class="intel-section-heading intel-section-heading--health">Context Health</h4>
                <div id="intel-health-content" class="intel-section-content">
                    <span style="color: #4caf50;">Healthy</span> — Pressure and stuck detection monitored every 10 turns.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Context Modal -->
<div id="new-context-modal" class="chat-modal-overlay">
    <div class="chat-modal">
        <h3 class="chat-modal__title">New Chat Context</h3>
        <div class="chat-modal__field">
            <label class="chat-modal__label">Title</label>
            <input type="text" id="new-ctx-title" class="chat-modal__input" placeholder="Chat title...">
        </div>
        <div class="chat-modal__field">
            <label class="chat-modal__label">Agent Model</label>
            <select id="new-ctx-model" class="chat-modal__select">
                <option value="sonnet">Sonnet (Default)</option>
                <option value="opus">Opus</option>
                <option value="haiku">Haiku</option>
            </select>
        </div>
        <div class="chat-modal__field">
            <label class="chat-modal__label chat-modal__label--inline">
                <input type="checkbox" id="new-ctx-intake" class="chat-modal__checkbox">
                Link to Requirements Intake (RICOAS)
            </label>
        </div>
        <div class="chat-modal__field">
            <label class="chat-modal__label">System Prompt (optional)</label>
            <textarea id="new-ctx-prompt" class="chat-modal__textarea" placeholder="Custom system prompt..." rows="3"></textarea>
        </div>
        <div class="chat-modal__actions">
            <button id="btn-cancel-modal" class="chat-modal__btn chat-modal__btn--cancel">Cancel</button>
            <button id="btn-create-context" class="chat-modal__btn chat-modal__btn--create">Create</button>
        </div>
    </div>
</div>

<!-- Pass config to JS -->
<script>
    window._CHAT_CONFIG = {
        sessionId: {{ session_id|tojson if session_id is defined else 'null' }},
        wizardGoal: {{ (wizard_goal or '')|tojson if wizard_goal is defined else '""' }},
        wizardRole: {{ (wizard_role or '')|tojson if wizard_role is defined else '""' }},
        wizardClassification: {{ (wizard_classification or '')|tojson if wizard_classification is defined else '""' }},
        wizardFrameworks: {{ (wizard_frameworks or '')|tojson if wizard_frameworks is defined else '""' }},
        customRoleName: {{ (wizard_custom_role_name or '')|tojson if wizard_custom_role_name is defined else '""' }},
        customRoleDesc: {{ (wizard_custom_role_desc or '')|tojson if wizard_custom_role_desc is defined else '""' }}
    };
</script>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('static', filename='js/chat.js') }}"></script>
<script>
// Right sidebar tab switching
(function() {
    var tabs = document.querySelectorAll('.chat-right-tab');
    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            var tabName = this.getAttribute('data-tab');
            // Deactivate all tabs and contents
            document.querySelectorAll('.chat-right-tab').forEach(function(t) { t.classList.remove('chat-right-tab--active'); });
            document.querySelectorAll('.chat-right-tab-content').forEach(function(c) { c.classList.remove('chat-right-tab-content--active'); });
            // Activate clicked tab
            this.classList.add('chat-right-tab--active');
            var content = document.querySelector('[data-tab-content="' + tabName + '"]');
            if (content) content.classList.add('chat-right-tab-content--active');
        });
    });
})();

// Right sidebar toggle buttons (Gov, Intel, RICOAS)
(function() {
    var rightSidebar = document.getElementById('right-sidebar');

    function showRightSidebar(tabName) {
        rightSidebar.classList.add('chat-right-panel--visible');
        document.getElementById('chat-layout').classList.add('chat-layout--right-open');
        // Switch to the requested tab
        document.querySelectorAll('.chat-right-tab').forEach(function(t) { t.classList.remove('chat-right-tab--active'); });
        document.querySelectorAll('.chat-right-tab-content').forEach(function(c) { c.classList.remove('chat-right-tab-content--active'); });
        var tab = document.getElementById('tab-' + tabName);
        var content = document.querySelector('[data-tab-content="' + tabName + '"]');
        if (tab) tab.classList.add('chat-right-tab--active');
        if (content) content.classList.add('chat-right-tab-content--active');
    }

    function hideRightSidebar() {
        rightSidebar.classList.remove('chat-right-panel--visible');
        document.getElementById('chat-layout').classList.remove('chat-layout--right-open');
    }

    function toggleTab(tabName) {
        var isVisible = rightSidebar.classList.contains('chat-right-panel--visible');
        var activeTab = document.querySelector('.chat-right-tab--active');
        var activeTabName = activeTab ? activeTab.getAttribute('data-tab') : '';

        if (isVisible && activeTabName === tabName) {
            hideRightSidebar();
        } else {
            showRightSidebar(tabName);
            if (tabName === 'gov') refreshGovernanceSidebar();
        }
    }

    // Button handlers
    var btnGov = document.getElementById('btn-gov-toggle');
    var btnIntel = document.getElementById('btn-intel-toggle');
    var btnRicoas = document.getElementById('btn-ricoas-toggle');

    if (btnGov) btnGov.addEventListener('click', function() { toggleTab('gov'); });
    if (btnIntel) btnIntel.addEventListener('click', function() { toggleTab('intel'); });
    if (btnRicoas) btnRicoas.addEventListener('click', function() { toggleTab('ricoas'); });

    // Focus mode
    var btnFocus = document.getElementById('btn-focus-mode');
    if (btnFocus) {
        btnFocus.addEventListener('click', function() {
            var sidebar = document.getElementById('chat-sidebar');
            var layout = document.getElementById('chat-layout');
            var resizeLeft = document.getElementById('resize-left');
            var resizeRight = document.getElementById('resize-right');
            var isFocused = sidebar.style.display === 'none';

            if (isFocused) {
                sidebar.style.display = '';
                if (resizeLeft) resizeLeft.style.display = '';
                btnFocus.textContent = 'Focus';
            } else {
                sidebar.style.display = 'none';
                hideRightSidebar();
                if (resizeLeft) resizeLeft.style.display = 'none';
                if (resizeRight) resizeRight.style.display = 'none';
                layout.style.gridTemplateColumns = '1fr';
                btnFocus.textContent = 'Expand';
            }
        });
    }

    // AI Governance sidebar refresh
    function refreshGovernanceSidebar() {
        var content = document.getElementById('gov-sidebar-content');
        if (!content) return;
        var html = '';
        Promise.all([
            fetch('/api/ai-transparency/stats').then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; }),
            fetch('/api/ai-accountability/stats').then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; })
        ]).then(function(results) {
            var tStats = results[0];
            var aStats = results[1];

            html += '<div class="gov-section-heading"><strong>Transparency</strong></div>';
            if (tStats) {
                html += govStatRow('AI Systems', tStats.inventory_count || 0);
                html += govStatRow('Model Cards', tStats.model_cards || 0);
                html += govStatRow('System Cards', tStats.system_cards || 0);
            } else {
                html += '<p class="gov-sidebar-placeholder">Transparency API not available</p>';
            }

            html += '<div class="gov-section-heading" style="margin-top:12px;"><strong>Accountability</strong></div>';
            if (aStats) {
                html += govStatRow('Oversight Plans', aStats.oversight_plans || 0);
                html += govStatRow('CAIO Designated', aStats.caio_designations || 0);
                html += govStatRow('Open Appeals', aStats.open_appeals || aStats.total_appeals || 0);
                html += govStatRow('Ethics Reviews', aStats.ethics_reviews || 0);
                html += govStatRow('Reassessments', aStats.reassessment_schedules || 0);
            } else {
                html += '<p class="gov-sidebar-placeholder">Accountability API not available</p>';
            }

            content.innerHTML = html;
        });
    }

    function govStatRow(label, value) {
        return '<div class="gov-stat-row"><span class="gov-stat-label">' + label + '</span><span class="gov-stat-value">' + value + '</span></div>';
    }

    // Refresh on governance_advisory state change
    if (typeof window._chatOnStateChange === 'undefined') {
        window._chatOnStateChange = [];
    }
    window._chatOnStateChange.push(function(data) {
        if (data && data.change_type === 'governance_advisory' && rightSidebar.classList.contains('chat-right-panel--visible')) {
            var activeTab = document.querySelector('.chat-right-tab--active');
            if (activeTab && activeTab.getAttribute('data-tab') === 'gov') {
                refreshGovernanceSidebar();
            }
        }
    });
})();

// Intelligence sidebar state change handlers
(function() {
    if (typeof window._chatOnStateChange === 'undefined') {
        window._chatOnStateChange = [];
    }
    window._chatOnStateChange.push(function(data) {
        if (!data) return;
        var ct = data.change_type || '';

        if (ct === 'rag_attribution') {
            var ragEl = document.getElementById('intel-rag-content');
            if (ragEl && data.source_count) {
                ragEl.innerHTML = '<span style="color:#2196f3;font-weight:600;">' + data.source_count +
                    ' source(s)</span> used in last response. View the [Knowledge Sources] message in chat for details.';
            }
        }

        if (ct === 'bayesian_advisory') {
            var bayEl = document.getElementById('intel-bayesian-content');
            if (bayEl) {
                var domain = data.fitness_domain || 'compliance';
                bayEl.innerHTML = '<span style="color:#00bfa5;font-weight:600;">Active</span> — ' +
                    'Bayesian info-gain analysis running for <em>' + domain + '</em>. ' +
                    'See [Bayesian Learning] messages for recommended next actions.';
            }
        }

        if (ct === 'code_quality_advisory') {
            var cqEl = document.getElementById('intel-code-quality-content');
            if (cqEl) {
                var score = data.score ? (data.score * 100).toFixed(0) + '%' : 'N/A';
                var sev = data.severity || 'info';
                var color = sev === 'high' ? '#d44' : sev === 'medium' ? '#ff9800' : '#4caf50';
                cqEl.innerHTML = '<span style="color:' + color + ';font-weight:600;">Score: ' + score + '</span> — ' +
                    'See [Code Quality] messages for smell and complexity details.';
            }
        }

        if (ct === 'genesis_advisory') {
            var genEl = document.getElementById('intel-genesis-content');
            if (genEl) {
                genEl.innerHTML = '<span style="color:#e040fb;font-weight:600;">Activity detected</span> — ' +
                    'See [Genesis Insight] messages for research findings and pending GKPs.';
            }
        }

        if (ct === 'context_health') {
            var healthEl = document.getElementById('intel-health-content');
            if (healthEl) {
                var level = data.pressure_level || 'unknown';
                var stuck = data.is_stuck;
                var hColor = stuck ? '#ff5252' : (level === 'high' ? '#ff9800' : '#4caf50');
                var hText = stuck ? 'STUCK — agent may need intervention' :
                    (level === 'high' ? 'High pressure (' + level + ')' : 'Healthy');
                healthEl.innerHTML = '<span style="color:' + hColor + ';font-weight:600;">' + hText + '</span>';
            }
        }
    });
})();

// Resize handles
(function() {
    function initResize(handleId, targetId, side) {
        var handle = document.getElementById(handleId);
        var target = document.getElementById(targetId);
        if (!handle || !target) return;

        var startX, startWidth;

        handle.addEventListener('mousedown', function(e) {
            e.preventDefault();
            startX = e.clientX;
            startWidth = target.offsetWidth;
            handle.classList.add('chat-resize-handle--active');
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });

        function onMouseMove(e) {
            var diff = e.clientX - startX;
            var newWidth = side === 'left' ? startWidth + diff : startWidth - diff;
            newWidth = Math.max(200, Math.min(400, newWidth));
            target.style.width = newWidth + 'px';
            var layout = document.getElementById('chat-layout');
            if (side === 'left') {
                layout.style.gridTemplateColumns = newWidth + 'px 6px 1fr 6px var(--chat-right-w, 0px)';
            }
            try { localStorage.setItem('icdev_chat_' + side + '_w', newWidth); } catch(ex) {}
        }

        function onMouseUp() {
            handle.classList.remove('chat-resize-handle--active');
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    }

    initResize('resize-left', 'chat-sidebar', 'left');
    initResize('resize-right', 'right-sidebar', 'right');

    // Restore saved widths
    try {
        var leftW = localStorage.getItem('icdev_chat_left_w');
        if (leftW) document.getElementById('chat-sidebar').style.width = leftW + 'px';
    } catch(ex) {}
})();
</script>
{% endblock %}