{# Inspector Panel - selected event details (right panel) #}
<div class="inspector-panel">
    <h3>INSPECTOR</h3>
    <div id="inspector-content" class="inspector-content">
        <div class="inspector-placeholder">
            Select an event from the timeline to inspect
        </div>
    </div>
</div>

<script>
// Inspector panel rendering for replay viewer
// This script handles rendering frame details including:
// - Args diff (showing only changes)
// - Decision narrative (why blocked/passed)
// - Anomalies with field highlighting
// - Cost information

function renderFrameInspector(frame) {
    if (!frame) {
        return '<div class="inspector-placeholder">Select a frame to inspect</div>';
    }
    
    let html = '';
    
    // Header
    html += `
        <div class="inspector-header">
            <h4>Step ${frame.seq}: ${frame.tool || 'Unknown Tool'}</h4>
            <div class="inspector-status status-${(frame.status || 'PENDING').toLowerCase()}">
                ${(frame.status || 'PENDING').toUpperCase()}
            </div>
        </div>
    `;
    
    // Tabs: Summary / Params / Evidence
    html += `
        <div class="inspector-tabs">
            <button class="inspector-tab active" data-tab="summary" onclick="switchInspectorTab('summary', ${frame.seq})">
                Summary
            </button>
            <button class="inspector-tab" data-tab="params" onclick="switchInspectorTab('params', ${frame.seq})">
                Params
            </button>
            <button class="inspector-tab" data-tab="evidence" onclick="switchInspectorTab('evidence', ${frame.seq})">
                Evidence
            </button>
        </div>
    `;
    
    // Tab content container
    html += '<div class="inspector-tab-content">';
    
    // Summary tab (default, high-level narrative)
    html += `
        <div id="inspector-tab-summary-${frame.seq}" class="inspector-tab-panel active">
            ${renderSummaryTab(frame)}
        </div>
    `;
    
    // Params tab (arguments)
    html += `
        <div id="inspector-tab-params-${frame.seq}" class="inspector-tab-panel">
            ${renderParamsTab(frame)}
        </div>
    `;
    
    // Evidence tab (raw trace data)
    html += `
        <div id="inspector-tab-evidence-${frame.seq}" class="inspector-tab-panel">
            ${renderEvidenceTab(frame)}
        </div>
    `;
    
    html += '</div>';
    
    return html;
}

function renderSummaryTab(frame) {
    let html = '';
    
    // Decision narrative (why blocked/passed)
    if (frame.decision) {
        html += `
            <div class="inspector-section decision-section decision-${(frame.status || 'PENDING').toLowerCase()}">
                <h5>DECISION</h5>
                <div class="decision-narrative">${escapeHtml(frame.decision)}</div>
            </div>
        `;
    }
    
    // Side-effect crossings (high priority)
    if (frame.side_effect_crossings && frame.side_effect_crossings.length > 0) {
        html += `
            <div class="inspector-section crossing-section crossing-high">
                <h5>BOUNDARY CROSSED</h5>
                ${frame.side_effect_crossings.map(crossing => `
                    <div class="crossing-item">
                        <div class="crossing-header">
                            <span class="crossing-type">${escapeHtml(crossing.crossing_type || 'unknown')}</span>
                            <span class="crossing-severity severity-${crossing.severity || 'high'}">${(crossing.severity || 'high').toUpperCase()}</span>
                        </div>
                        <div class="crossing-summary">${escapeHtml(crossing.summary || '')}</div>
                        ${crossing.target ? `<div class="crossing-target"><strong>Target:</strong> ${escapeHtml(crossing.target)}</div>` : ''}
                        ${crossing.allowed_categories && crossing.allowed_categories.length > 0 ? `
                            <div class="crossing-boundary">
                                <strong>Allowed categories:</strong> ${escapeHtml(crossing.allowed_categories.join(', '))}
                            </div>
                        ` : ''}
                    </div>
                `).join('')}
            </div>
        `;
    }
    
    // Anomalies summary
    if (frame.anomalies && frame.anomalies.length > 0) {
        const critical = frame.anomalies.filter(a => a.severity === 'critical').length;
        const high = frame.anomalies.filter(a => a.severity === 'high').length;
        
        html += `
            <div class="inspector-section anomalies-section">
                <h5>ANOMALIES (${frame.anomalies.length})</h5>
                <div class="anomalies-summary">
                    ${critical > 0 ? `<div class="anomaly-summary-item critical">${critical} Critical</div>` : ''}
                    ${high > 0 ? `<div class="anomaly-summary-item high">${high} High</div>` : ''}
                    ${frame.anomalies.length > 0 ? `<div class="anomaly-summary-item total">${frame.anomalies.length} Total</div>` : ''}
                </div>
                <div class="anomalies-list">
                    ${frame.anomalies.slice(0, 3).map(anomaly => `
                        <div class="anomaly-item severity-${anomaly.severity || 'low'}">
                            <div class="anomaly-header">
                                <span class="anomaly-field">${escapeHtml(anomaly.field_path || 'unknown')}</span>
                                <span class="anomaly-severity">${(anomaly.severity || 'low').toUpperCase()}</span>
                            </div>
                            <div class="anomaly-reason">${escapeHtml(anomaly.reason || '')}</div>
                        </div>
                    `).join('')}
                    ${frame.anomalies.length > 3 ? `<div class="anomalies-more">+${frame.anomalies.length - 3} more (see Evidence tab)</div>` : ''}
                </div>
            </div>
        `;
    }
    
    // Result summary
    if (frame.result_summary) {
        html += `
            <div class="inspector-section result-section">
                <h5>RESULT</h5>
                <div class="result-summary">${escapeHtml(frame.result_summary)}</div>
            </div>
        `;
    }
    
    // Cost information
    if (frame.metrics && frame.metrics.cost) {
        const cost = frame.metrics.cost;
        html += `
            <div class="inspector-section cost-section">
                <h5>COST</h5>
                <div class="cost-details">
                    <div class="cost-item">
                        <span class="cost-label">Delta:</span>
                        <span class="cost-value">$${(cost.delta_cost_usd || cost.incremental?.cost_usd || 0).toFixed(6)}</span>
                    </div>
                    <div class="cost-item">
                        <span class="cost-label">Cumulative:</span>
                        <span class="cost-value">$${(cost.cumulative_cost_usd || cost.cumulative?.cost_usd || 0).toFixed(6)}</span>
                    </div>
                    ${cost.delta_tokens || cost.incremental?.tokens ? `
                        <div class="cost-item">
                            <span class="cost-label">Tokens:</span>
                            <span class="cost-value">${(cost.delta_tokens || cost.incremental?.tokens || 0).toLocaleString()}</span>
                        </div>
                    ` : ''}
                </div>
            </div>
        `;
    }
    
    return html || '<div class="inspector-placeholder">No summary available</div>';
}

function renderParamsTab(frame) {
    let html = '';
    
    // Get drift changes for highlighting
    const driftChanges = [];
    if (frame.drift_annotations && frame.drift_annotations.length > 0) {
        frame.drift_annotations.forEach(ann => {
            if (ann.changes) {
                driftChanges.push(...ann.changes);
            }
        });
    }
    
    // Args diff (default view: only show changes)
    if (frame.args_diff && hasArgsDiffChanges(frame.args_diff)) {
        html += `
            <div class="inspector-section args-diff-section">
                <h5>ARGUMENTS (CHANGES)</h5>
                <div class="args-diff-view">
                    ${renderArgsDiff(frame.args_diff, frame.anomalies || [])}
                </div>
                <button class="btn-expand-args" onclick="toggleFullArgs(this, ${frame.seq})">
                    Show Full Arguments
                </button>
                <div id="full-args-${frame.seq}" class="full-args-view" style="display: none;">
                    ${renderParamsWithDrift(frame.args_raw || frame.args, driftChanges, frame.seq)}
                </div>
            </div>
        `;
    } else if (frame.args || frame.args_raw) {
        html += `
            <div class="inspector-section args-section">
                <h5>ARGUMENTS</h5>
                ${renderParamsWithDrift(frame.args_raw || frame.args, driftChanges, frame.seq)}
            </div>
        `;
    }
    
    // Full anomalies list in params tab
    if (frame.anomalies && frame.anomalies.length > 0) {
        html += `
            <div class="inspector-section anomalies-section">
                <h5>ANOMALIES (${frame.anomalies.length})</h5>
                <div class="anomalies-list">
                    ${frame.anomalies.map(anomaly => `
                        <div class="anomaly-item severity-${anomaly.severity || 'low'}">
                            <div class="anomaly-header">
                                <span class="anomaly-field">${escapeHtml(anomaly.field_path || 'unknown')}</span>
                                <span class="anomaly-severity">${(anomaly.severity || 'low').toUpperCase()}</span>
                            </div>
                            <div class="anomaly-reason">${escapeHtml(anomaly.reason || '')}</div>
                            <div class="anomaly-explanation">${escapeHtml(anomaly.explanation || '')}</div>
                            <div class="anomaly-risk-type">Risk: ${escapeHtml(anomaly.risk_type || 'other')}</div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }
    
    return html || '<div class="inspector-placeholder">No parameters available</div>';
}

function renderEvidenceTab(frame) {
    let html = '';
    
    // Evidence items (trace references)
    if (frame.evidence && frame.evidence.length > 0) {
        html += `
            <div class="inspector-section evidence-section">
                <h5>EVIDENCE (${frame.evidence.length})</h5>
                <div class="evidence-list">
                    ${frame.evidence.map(ev => `
                        <div class="evidence-item">
                            <div class="evidence-header">
                                <span class="evidence-type">${escapeHtml(ev.type || 'unknown')}</span>
                                <span class="evidence-seq">#${ev.seq || ev.event_id || '?'}</span>
                            </div>
                            ${ev.ts ? `<div class="evidence-ts">${new Date(ev.ts).toLocaleString()}</div>` : ''}
                            ${ev.message ? `<div class="evidence-message">${escapeHtml(ev.message)}</div>` : ''}
                            ${ev.trace_line !== undefined ? `<div class="evidence-trace-line">Trace Line: ${ev.trace_line}</div>` : ''}
                            ${ev.snippet ? `
                                <div class="evidence-snippet">
                                    <div class="evidence-snippet-label">Snippet:</div>
                                    <pre class="evidence-snippet-code"><code>${escapeHtml(ev.snippet)}</code></pre>
                                </div>
                            ` : ''}
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }
    
    // Raw result
    if (frame.result_raw !== undefined && frame.result_raw !== null) {
        html += `
            <div class="inspector-section result-raw-section">
                <h5>RAW RESULT</h5>
                <pre class="inspector-code"><code>${escapeHtml(JSON.stringify(frame.result_raw, null, 2))}</code></pre>
            </div>
        `;
    }
    
    // Raw args (if different from normalized)
    if (frame.args_raw && JSON.stringify(frame.args_raw) !== JSON.stringify(frame.args)) {
        html += `
            <div class="inspector-section args-raw-section">
                <h5>RAW ARGUMENTS</h5>
                <pre class="inspector-code"><code>${escapeHtml(JSON.stringify(frame.args_raw, null, 2))}</code></pre>
            </div>
        `;
    }
    
    // Full trace event reference (if available)
    html += `
        <div class="inspector-section trace-reference-section">
            <h5>TRACE REFERENCE</h5>
            <div class="trace-reference">
                <div class="trace-ref-item">
                    <span class="trace-ref-label">Step Sequence:</span>
                    <span class="trace-ref-value">${frame.seq}</span>
                </div>
                <div class="trace-ref-item">
                    <span class="trace-ref-label">Tool:</span>
                    <span class="trace-ref-value">${escapeHtml(frame.tool || 'N/A')}</span>
                </div>
                <div class="trace-ref-item">
                    <span class="trace-ref-label">Status:</span>
                    <span class="trace-ref-value">${escapeHtml(frame.status || 'N/A')}</span>
                </div>
                ${frame.ts_start ? `
                    <div class="trace-ref-item">
                        <span class="trace-ref-label">Start Time:</span>
                        <span class="trace-ref-value">${new Date(frame.ts_start).toLocaleString()}</span>
                    </div>
                ` : ''}
                ${frame.ts_end ? `
                    <div class="trace-ref-item">
                        <span class="trace-ref-label">End Time:</span>
                        <span class="trace-ref-value">${new Date(frame.ts_end).toLocaleString()}</span>
                    </div>
                ` : ''}
            </div>
        </div>
    `;
    
    return html || '<div class="inspector-placeholder">No evidence available</div>';
}

function renderParamsWithDrift(params, driftChanges, seq) {
    if (!params) {
        return '<pre class="inspector-code"><code></code></pre>';
    }
    
    const jsonStr = JSON.stringify(params, null, 2);
    
    if (!driftChanges || driftChanges.length === 0) {
        return `<pre class="inspector-code"><code>${escapeHtml(jsonStr)}</code></pre>`;
    }
    
    // Build field path map for highlighting
    const fieldMap = new Map();
    driftChanges.forEach(change => {
        if (change.field_path) {
            fieldMap.set(change.field_path, {
                severity: change.severity || 'info',
                change_type: change.change_type || 'value_changed',
                reason: change.reason || '',
            });
        }
    });
    
    // Simple highlighting: wrap lines containing drifted field names
    const lines = jsonStr.split('\n');
    const highlightedLines = lines.map(line => {
        for (const [fieldPath, info] of fieldMap.entries()) {
            const fieldName = fieldPath.split('.').pop();
            // Check if line contains the field name as a key
            const keyPattern = new RegExp(`"${fieldName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}"\\s*:`, 'g');
            if (keyPattern.test(line)) {
                const title = `${fieldPath}: ${info.reason}`;
                return `<span class="drift-field drift-${info.severity}" data-field="${escapeHtml(fieldPath)}" title="${escapeHtml(title)}">${escapeHtml(line)}</span>`;
            }
        }
        return escapeHtml(line);
    });
    
    return `<pre class="inspector-code"><code>${highlightedLines.join('\n')}</code></pre>`;
}

function switchInspectorTab(tabName, seq) {
    // Update tab buttons
    const tabButtons = document.querySelectorAll(`#inspector-content .inspector-tab[data-tab]`);
    tabButtons.forEach(btn => {
        if (btn.dataset.tab === tabName) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
    
    // Update tab panels
    const tabPanels = document.querySelectorAll(`#inspector-content .inspector-tab-panel`);
    tabPanels.forEach(panel => {
        if (panel.id === `inspector-tab-${tabName}-${seq}`) {
            panel.classList.add('active');
        } else {
            panel.classList.remove('active');
        }
    });
}

function renderArgsDiff(diff, anomalies) {
    if (!diff) return '';
    
    let html = '';
    
    // Added fields
    if (diff.added && Object.keys(diff.added).length > 0) {
        html += '<div class="diff-group diff-added">';
        html += '<div class="diff-label">Added:</div>';
        for (const [key, value] of Object.entries(diff.added)) {
            const anomaly = anomalies.find(a => a.field_path === key);
            const anomalyClass = anomaly ? `anomaly-highlight severity-${anomaly.severity}` : '';
            html += `
                <div class="diff-item ${anomalyClass}" data-field="${escapeHtml(key)}">
                    <span class="diff-key">${escapeHtml(key)}:</span>
                    <span class="diff-value">${escapeHtml(JSON.stringify(value))}</span>
                </div>
            `;
        }
        html += '</div>';
    }
    
    // Modified fields
    if (diff.modified && Object.keys(diff.modified).length > 0) {
        html += '<div class="diff-group diff-modified">';
        html += '<div class="diff-label">Modified:</div>';
        for (const [key, change] of Object.entries(diff.modified)) {
            const anomaly = anomalies.find(a => a.field_path === key);
            const anomalyClass = anomaly ? `anomaly-highlight severity-${anomaly.severity}` : '';
            html += `
                <div class="diff-item ${anomalyClass}" data-field="${escapeHtml(key)}">
                    <span class="diff-key">${escapeHtml(key)}:</span>
                    <span class="diff-old">${escapeHtml(JSON.stringify(change.old))}</span>
                    <span class="diff-arrow">→</span>
                    <span class="diff-new">${escapeHtml(JSON.stringify(change.new))}</span>
                </div>
            `;
        }
        html += '</div>';
    }
    
    // Deleted fields
    if (diff.deleted && Object.keys(diff.deleted).length > 0) {
        html += '<div class="diff-group diff-deleted">';
        html += '<div class="diff-label">Deleted:</div>';
        for (const [key, value] of Object.entries(diff.deleted)) {
            html += `
                <div class="diff-item">
                    <span class="diff-key">${escapeHtml(key)}:</span>
                    <span class="diff-value">${escapeHtml(JSON.stringify(value))}</span>
                </div>
            `;
        }
        html += '</div>';
    }
    
    return html || '<div class="diff-empty">No changes from previous frame</div>';
}

function hasArgsDiffChanges(diff) {
    return (diff.added && Object.keys(diff.added).length > 0) ||
           (diff.modified && Object.keys(diff.modified).length > 0) ||
           (diff.deleted && Object.keys(diff.deleted).length > 0);
}

function toggleFullArgs(button, seq) {
    const fullArgsDiv = document.getElementById(`full-args-${seq}`);
    if (fullArgsDiv.style.display === 'none') {
        fullArgsDiv.style.display = 'block';
        button.textContent = 'Hide Full Arguments';
    } else {
        fullArgsDiv.style.display = 'none';
        button.textContent = 'Show Full Arguments';
    }
}

function escapeHtml(text) {
    if (text === null || text === undefined) return '';
    const div = document.createElement('div');
    div.textContent = String(text);
    return div.innerHTML;
}

// Make functions available globally for timeline integration
window.renderFrameInspector = renderFrameInspector;
window.toggleFullArgs = toggleFullArgs;
window.switchInspectorTab = switchInspectorTab;
</script>

<style>
.inspector-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

.inspector-panel h3 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.inspector-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inspector-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.inspector-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inspector-status {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.inspector-status.status-ok {
    color: var(--green-500);
    border-color: var(--green-600);
    background: rgba(16, 185, 129, 0.1);
}

.inspector-status.status-blocked {
    color: var(--red-500);
    border-color: var(--red-600);
    background: rgba(239, 68, 68, 0.1);
}

.inspector-status.status-pending {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--bg-primary);
}

.inspector-section {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.inspector-section h5 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.decision-section {
    border-left: 3px solid var(--border);
}

.crossing-section {
    border-left: 3px solid var(--red-500);
    background: rgba(239, 68, 68, 0.05);
}

.crossing-section.crossing-high {
    border-left-width: 4px;
    background: rgba(239, 68, 68, 0.1);
}

.crossing-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 2px;
}

.crossing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.crossing-type {
    font-weight: 600;
    color: var(--red-500);
    font-family: monospace;
    font-size: 0.875rem;
}

.crossing-severity {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 2px;
}

.crossing-severity.severity-high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--red-500);
    border: 1px solid var(--red-600);
}

.crossing-summary {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.crossing-target,
.crossing-boundary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.crossing-target strong,
.crossing-boundary strong {
    color: var(--text-primary);
}

.decision-section.decision-blocked {
    border-left-color: var(--red-500);
}

.decision-section.decision-ok {
    border-left-color: var(--green-500);
}

.decision-narrative {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.args-diff-view {
    font-size: 0.8125rem;
    font-family: monospace;
}

.diff-group {
    margin-bottom: 1rem;
}

.diff-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.diff-added .diff-label {
    color: var(--green-500);
}

.diff-modified .diff-label {
    color: var(--yellow-500);
}

.diff-deleted .diff-label {
    color: var(--red-500);
}

.diff-item {
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    background: var(--bg-secondary);
    border-radius: 2px;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.diff-item.anomaly-highlight {
    border-left: 3px solid;
    padding-left: 0.75rem;
}

.diff-item.anomaly-highlight.severity-critical {
    border-left-color: var(--red-500);
    background: rgba(239, 68, 68, 0.1);
}

.diff-item.anomaly-highlight.severity-high {
    border-left-color: var(--red-500);
    background: rgba(239, 68, 68, 0.05);
}

.diff-item.anomaly-highlight.severity-medium {
    border-left-color: var(--yellow-500);
    background: rgba(245, 158, 11, 0.05);
}

.diff-item.anomaly-highlight.severity-low {
    border-left-color: var(--blue-500);
    background: rgba(59, 130, 246, 0.05);
}

.diff-key {
    font-weight: 600;
    color: var(--text-primary);
}

.diff-value, .diff-old, .diff-new {
    color: var(--text-secondary);
}

.diff-old {
    text-decoration: line-through;
    opacity: 0.6;
}

.diff-arrow {
    color: var(--text-muted);
}

.diff-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem;
}

.btn-expand-args {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 2px;
}

.btn-expand-args:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.full-args-view {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.full-args-view pre {
    margin: 0;
    font-size: 0.75rem;
    overflow-x: auto;
}

.anomalies-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.anomaly-item {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--border);
    border-radius: 2px;
}

.anomaly-item.severity-critical {
    border-left-color: var(--red-500);
}

.anomaly-item.severity-high {
    border-left-color: var(--red-500);
}

.anomaly-item.severity-medium {
    border-left-color: var(--yellow-500);
}

.anomaly-item.severity-low {
    border-left-color: var(--blue-500);
}

.anomaly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.anomaly-field {
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 0.8125rem;
}

.anomaly-severity {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 2px;
    background: var(--bg-tertiary);
}

.anomaly-reason {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.anomaly-explanation {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.anomaly-risk-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.cost-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.cost-label {
    color: var(--text-muted);
}

.cost-value {
    color: var(--text-primary);
    font-family: monospace;
    font-weight: 600;
}

.result-summary {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.evidence-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evidence-item {
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-left: 2px solid var(--border);
    border-radius: 2px;
    font-size: 0.8125rem;
}

.evidence-type {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.75rem;
}

.evidence-seq {
    color: var(--text-muted);
    font-family: monospace;
    margin-left: 0.5rem;
}

.evidence-message {
    margin-top: 0.25rem;
    color: var(--text-secondary);
}

.inspector-code {
    margin: 0;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow-x: auto;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Tabs */
.inspector-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.inspector-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
}

.inspector-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.inspector-tab.active {
    color: var(--blue-500);
    border-bottom-color: var(--blue-500);
}

.inspector-tab-content {
    position: relative;
}

.inspector-tab-panel {
    display: none;
}

.inspector-tab-panel.active {
    display: block;
}

.anomalies-summary {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.anomaly-summary-item {
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.anomaly-summary-item.critical {
    color: var(--red-500);
    border-left: 3px solid var(--red-500);
}

.anomaly-summary-item.high {
    color: var(--red-500);
    border-left: 3px solid var(--red-500);
}

.anomaly-summary-item.total {
    color: var(--text-primary);
    border-left: 3px solid var(--border);
}

.anomalies-more {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: 0.5rem;
}

.evidence-ts {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.evidence-trace-line {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: monospace;
    margin-top: 0.25rem;
}

.evidence-snippet {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.evidence-snippet-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

.evidence-snippet-code {
    margin: 0;
    font-size: 0.75rem;
    overflow-x: auto;
}

.trace-reference {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trace-ref-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.trace-ref-label {
    color: var(--text-muted);
}

.trace-ref-value {
    color: var(--text-primary);
    font-family: monospace;
}

/* Drift field highlighting */
.drift-field {
    display: inline-block;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    position: relative;
}

.drift-field.drift-info {
    background: rgba(59, 130, 246, 0.1);
    border-left: 2px solid var(--blue-500);
    padding-left: 0.5rem;
}

.drift-field.drift-warn {
    background: rgba(245, 158, 11, 0.1);
    border-left: 2px solid var(--yellow-500);
    padding-left: 0.5rem;
}

.drift-field.drift-high {
    background: rgba(239, 68, 68, 0.15);
    border-left: 2px solid var(--red-500);
    padding-left: 0.5rem;
    font-weight: 500;
}

.drift-field:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

.drift-field.drift-warn:hover {
    background-color: rgba(245, 158, 11, 0.2);
}

.drift-field.drift-high:hover {
    background-color: rgba(239, 68, 68, 0.25);
}

.inspector-code .drift-field {
    display: block;
    margin: 0.125rem 0;
}
</style>