.trace-graph-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trace-graph-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.trace-graph-summary > div {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-primary-lighter) 18%, var(--rz-base-background-color) 82%));
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
    border-radius: 18px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    box-shadow: 0 16px 28px color-mix(in srgb, var(--rz-base-900) 5%, transparent);
}

.trace-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.trace-legend-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 50%, transparent);
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, transparent);
}

.trace-legend-primary { background: color-mix(in srgb, var(--rz-primary-lighter) 84%, transparent); color: var(--rz-primary-dark); }
.trace-legend-agent { background: color-mix(in srgb, var(--rz-success-lighter) 86%, transparent); color: var(--rz-success-dark); }
.trace-legend-tool { background: color-mix(in srgb, var(--rz-warning-lighter) 88%, transparent); color: var(--rz-warning-dark); }
.trace-legend-thinking { background: color-mix(in srgb, var(--rz-info-lighter) 88%, transparent); color: var(--rz-info-dark); }
.trace-legend-error { background: color-mix(in srgb, var(--rz-danger-lighter) 88%, transparent); color: var(--rz-danger-dark); }

.trace-graph-kpi-label {
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trace-graph-kpi-value {
    color: var(--rz-text-color);
    font-weight: 700;
    font-size: 0.95rem;
}

.trace-graph-canvas-wrap {
    overflow-x: auto;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 75%, transparent);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--rz-primary-lighter) 82%, transparent), transparent 30%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--rz-info-lighter) 80%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--rz-base-100) 55%, var(--rz-base-background-color) 45%), var(--rz-base-background-color));
    padding: 1.15rem;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--rz-base-900) 7%, transparent);
}

.trace-graph-canvas {
    width: 100%;
    min-width: 760px;
    display: block;
}

.trace-graph-backdrop {
    fill: color-mix(in srgb, var(--rz-base-background-color) 80%, transparent);
    stroke: color-mix(in srgb, var(--rz-border-color) 42%, transparent);
    stroke-width: 1;
}

.trace-grid-line {
    stroke: url(#trace-grid-fade);
    stroke-width: 1;
    opacity: 0.55;
    stroke-dasharray: 4 10;
}

.trace-edge {
    fill: none;
    stroke-width: 3.5;
    opacity: 0.92;
}

.trace-edge-next {
    stroke: color-mix(in srgb, var(--rz-primary) 84%, var(--rz-primary-light) 16%);
}

.trace-edge-branch {
    stroke: color-mix(in srgb, var(--rz-info) 78%, var(--rz-primary) 22%);
    stroke-dasharray: 7 5;
}

.trace-edge-error {
    stroke: color-mix(in srgb, var(--rz-danger) 85%, white 15%);
    stroke-dasharray: 6 4;
}

.trace-edge-arrow-next {
    fill: color-mix(in srgb, var(--rz-primary) 84%, var(--rz-primary-light) 16%);
}

.trace-edge-arrow-branch {
    fill: color-mix(in srgb, var(--rz-info) 78%, var(--rz-primary) 22%);
}

.trace-edge-arrow-error {
    fill: color-mix(in srgb, var(--rz-danger) 85%, white 15%);
}

.trace-node-card {
    stroke-width: 1.4;
    filter: url(#trace-node-shadow);
}

.trace-node-aura {
    opacity: 0.9;
}

.trace-node-headline {
    fill: color-mix(in srgb, var(--rz-white) 42%, transparent);
    opacity: 0.45;
}

.trace-node-card.trace-node-input,
.trace-node-card.trace-node-output {
    fill: color-mix(in srgb, var(--rz-primary-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-primary) 30%, transparent);
}

.trace-node-card.trace-node-agent {
    fill: color-mix(in srgb, var(--rz-success-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-success) 30%, transparent);
}

.trace-node-card.trace-node-tool {
    fill: color-mix(in srgb, var(--rz-warning-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-warning) 32%, transparent);
}

.trace-node-card.trace-node-thinking {
    fill: color-mix(in srgb, var(--rz-info-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-info) 34%, transparent);
}

.trace-node-card.trace-node-error {
    fill: color-mix(in srgb, var(--rz-danger-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-danger) 38%, transparent);
}

.trace-node-card.trace-node-muted {
    fill: color-mix(in srgb, var(--rz-base-100) 90%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-border-color) 60%, transparent);
}

.trace-node-aura.trace-node-input,
.trace-node-aura.trace-node-output {
    fill: color-mix(in srgb, var(--rz-primary-lighter) 72%, transparent);
}

.trace-node-aura.trace-node-agent {
    fill: color-mix(in srgb, var(--rz-success-lighter) 72%, transparent);
}

.trace-node-aura.trace-node-tool {
    fill: color-mix(in srgb, var(--rz-warning-lighter) 74%, transparent);
}

.trace-node-aura.trace-node-thinking {
    fill: color-mix(in srgb, var(--rz-info-lighter) 74%, transparent);
}

.trace-node-aura.trace-node-error {
    fill: color-mix(in srgb, var(--rz-danger-lighter) 76%, transparent);
}

.trace-node-aura.trace-node-muted {
    fill: color-mix(in srgb, var(--rz-base-200) 55%, transparent);
}

.trace-node-kind {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    fill: color-mix(in srgb, var(--rz-text-secondary-color) 88%, var(--rz-base-800) 12%);
}

.trace-node-label {
    font-size: 13.5px;
    font-weight: 700;
    fill: var(--rz-text-title-color);
}

.trace-node-meta {
    font-size: 11px;
    fill: color-mix(in srgb, var(--rz-text-secondary-color) 92%, var(--rz-base-900) 8%);
}