/* Trace Viewer Timeline Styles - Spark Design System */

/* Dark mode (default) CSS variables */
:root {
    --trace-card-bg: var(--card-surface, #0f1520);
    --trace-card-border: var(--border, #1b2330);
    --trace-header-bg: var(--panel, #121822);
    --trace-header-hover: color-mix(in srgb, var(--primary) 8%, var(--panel));
    --trace-text: var(--text, #e8eef4);
    --trace-text-muted: var(--muted, #8aa1b3);
    --trace-primary: var(--primary, #6aa3ff);
    --trace-success: var(--success, #3ccf91);
    --trace-warning: var(--warning, #ffd166);
    --trace-error: var(--error, #ff6b6b);
    --trace-surface-subtle: #0f1724;
    --trace-user-msg-bg: color-mix(in srgb, var(--primary) 10%, transparent);
    --trace-user-msg-border: var(--primary);
    --trace-escalation-bg: color-mix(in srgb, var(--error) 15%, transparent);
    --trace-escalation-border: var(--error);
}

/* Light mode overrides */
body[data-theme="light"] {
    --trace-card-bg: #ffffff;
    --trace-card-border: #E2E8F0;
    --trace-header-bg: #f8f9fa;
    --trace-header-hover: #e9ecef;
    --trace-text: #1a1d21;
    --trace-text-muted: #5E6772;
    --trace-primary: #5B8CFF;
    --trace-success: #2e9d70;
    --trace-warning: #ffb454;
    --trace-error: #e05757;
    --trace-surface-subtle: #F1F5F9;
    --trace-user-msg-bg: #f0f7ff;
    --trace-user-msg-border: #5B8CFF;
    --trace-escalation-bg: #fff3cd;
    --trace-escalation-border: #ffc107;
}

.turn-timeline {
    max-width: 1200px;
    margin: 0 auto;
}

.turn-card {
    margin-bottom: 20px;
    border: 1px solid var(--trace-card-border);
    border-radius: var(--radius-card, 12px);
    background: var(--trace-card-bg);
    transition: box-shadow 0.3s, border-color 0.2s;
}

.turn-card:hover {
    border-color: color-mix(in srgb, var(--trace-primary) 30%, var(--trace-card-border));
    box-shadow: 0 2px 12px color-mix(in srgb, var(--trace-primary) 15%, transparent);
}

.turn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--trace-header-bg);
    border-bottom: 1px solid var(--trace-card-border);
    cursor: pointer;
    border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
    transition: background-color 0.2s;
}

.turn-header:hover {
    background: var(--trace-header-hover);
}

.turn-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.turn-index {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--trace-primary);
}

.turn-meta {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
    color: var(--trace-text-muted);
}

.turn-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.turn-collapse-icon {
    font-size: 1.2em;
    color: var(--trace-text-muted);
    transition: transform 0.2s;
}

.turn-collapsed .turn-collapse-icon {
    transform: rotate(-90deg);
}

.turn-body {
    padding: 20px;
    background: var(--trace-card-bg);
}

.turn-section {
    margin-bottom: 20px;
}

.turn-section:last-child {
    margin-bottom: 0;
}

.turn-section-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--trace-text);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-message {
    background: var(--trace-user-msg-bg);
    border-left: 4px solid var(--trace-user-msg-border);
    padding: 12px 15px;
    border-radius: 4px;
    font-style: italic;
    color: var(--trace-text);
}

.citations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.citations-table th {
    text-align: left;
    padding: 8px;
    background: var(--trace-header-bg);
    border-bottom: 2px solid var(--trace-card-border);
    font-weight: 600;
    color: var(--trace-text);
}

.citations-table td {
    padding: 8px;
    border-bottom: 1px solid var(--trace-card-border);
    vertical-align: top;
    color: var(--trace-text);
}

.citation-score {
    font-weight: 600;
    color: var(--trace-success);
}

.tool-item {
    background: var(--trace-surface-subtle);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--trace-card-border);
}

.tool-name {
    font-weight: 600;
    color: var(--trace-primary);
}

.tool-result {
    margin-top: 5px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    color: var(--trace-text-muted);
}

.safety-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.safety-ok {
    background: color-mix(in srgb, var(--trace-success) 20%, transparent);
    color: var(--trace-success);
    border: 1px solid color-mix(in srgb, var(--trace-success) 30%, transparent);
}

.safety-escalation {
    background: color-mix(in srgb, var(--trace-error) 20%, transparent);
    color: var(--trace-error);
    border: 1px solid color-mix(in srgb, var(--trace-error) 30%, transparent);
}

.escalation-details {
    margin-top: 10px;
    padding: 10px;
    background: var(--trace-escalation-bg);
    border-left: 4px solid var(--trace-escalation-border);
    border-radius: 4px;
    color: var(--trace-text);
}

.action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-chip {
    background: color-mix(in srgb, var(--trace-primary) 15%, transparent);
    color: var(--trace-primary);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    border: 1px solid color-mix(in srgb, var(--trace-primary) 25%, transparent);
    transition: background-color 0.2s;
}

.action-chip:hover {
    background: color-mix(in srgb, var(--trace-primary) 25%, transparent);
}

.final-response {
    background: var(--trace-surface-subtle);
    padding: 15px;
    border-radius: 8px;
    white-space: pre-wrap;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--trace-text);
    border: 1px solid var(--trace-card-border);
}

.copy-button {
    padding: 6px 12px;
    font-size: 0.85em;
    cursor: pointer;
}

.toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.summary-box {
    background: var(--trace-header-bg);
    padding: 15px;
    border-radius: var(--radius-card, 12px);
    margin-bottom: 20px;
    border-left: 4px solid var(--trace-primary);
    border: 1px solid var(--trace-card-border);
    border-left-width: 4px;
}

.summary-stats {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.summary-stat {
    display: flex;
    flex-direction: column;
}

.summary-stat-label {
    font-size: 0.85em;
    color: var(--trace-text-muted);
    margin-bottom: 3px;
}

.summary-stat-value {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--trace-text);
}

.highlight-turn {
    animation: highlight-dark 2s ease-out;
}

body[data-theme="light"] .highlight-turn {
    animation: highlight-light 2s ease-out;
}

@keyframes highlight-dark {
    0% {
        background-color: color-mix(in srgb, var(--warning) 30%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes highlight-light {
    0% {
        background-color: #fff3cd;
    }
    100% {
        background-color: transparent;
    }
}

.agent-badge {
    background: #6f42c1;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.agent-badge.compliance {
    background: var(--trace-primary);
}

.agent-badge.coach {
    background: var(--trace-success);
}

.agent-badge.coordinator {
    background: #6f42c1;
}