{% if detail.steps %}
<div class="relative pl-8 space-y-10">
  <!-- Timeline Vertical Bar -->
  <div class="absolute left-[15px] top-4 bottom-4 w-1 timeline-line rounded-full opacity-50"></div>

  {% for step in detail.steps %}
  <div class="relative">
    <!-- Icon Node -->
    <div class="absolute -left-8 mt-1.5 w-8 h-8 rounded-full border-4 border-slate-50 dark:border-background-dark flex items-center justify-center z-10 shadow-lg
      {% if step.is_llm_call %}bg-purple-500 shadow-purple-500/20{% elif step.is_tool_call %}bg-primary shadow-primary/20{% else %}bg-emerald-500 shadow-emerald-500/20{% endif %}">
      <span class="material-symbols-outlined text-white text-base">
        {% if step.is_llm_call %}psychology{% elif step.is_tool_call %}search{% else %}check_circle{% endif %}
      </span>
    </div>

    <!-- Step Card -->
    <div class="glass-card rounded-xl overflow-hidden group">
      <div class="p-4 flex items-center justify-between border-b border-border-dark/50 bg-slate-100/30 dark:bg-white/5 cursor-pointer hover:bg-slate-100/50 dark:hover:bg-white/10 transition-colors"
           onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('.expand-icon').innerText = this.nextElementSibling.classList.contains('hidden') ? 'expand_more' : 'expand_less'">
        <div class="flex items-center gap-3">
          <span class="text-[10px] font-bold uppercase tracking-widest 
            {% if step.is_llm_call %}text-purple-400{% elif step.is_tool_call %}text-primary{% else %}text-emerald-400{% endif %}">
            {% if step.is_llm_call %}LLM Completion{% elif step.is_tool_call %}Tool Invocation{% else %}Execution Step{% endif %}
          </span>
          <h3 class="text-sm font-bold text-slate-900 dark:text-white">
            {% if step.is_llm_call %}{{ step.data.get('model', 'Unknown Model') }}{% elif step.is_tool_call %}{{ step.data.get('tool_name', 'Unknown Tool') }}{% else %}Result Payload{% endif %}
          </h3>
        </div>
        <div class="flex items-center gap-4">
          {% if step.duration_ms %}
          <div class="flex items-center gap-1 text-[11px] font-medium text-slate-500">
            <span class="material-symbols-outlined text-sm">schedule</span>
            {{ format_duration(step.duration_ms) }}
          </div>
          {% endif %}
          {% if step.is_llm_call and step.data.get('input_tokens') %}
          <div class="flex items-center gap-1 text-[11px] font-medium text-slate-500">
            <span class="material-symbols-outlined text-sm">token</span>
            {{ step.data.input_tokens + (step.data.output_tokens or 0) }} tokens
          </div>
          {% endif %}
          <span class="text-[11px] font-bold text-emerald-500 uppercase">Success</span>
          <span class="material-symbols-outlined text-slate-400 expand-icon">expand_less</span>
        </div>
      </div>

      <!-- Card Body (Collapsible) -->
      <div class="p-4 space-y-4">
        {% if step.is_llm_call %}
          <div class="space-y-2">
            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Model</p>
            <div class="bg-black/20 dark:bg-white/5 rounded-lg p-3 text-xs leading-relaxed text-slate-400 font-mono">
              {{ step.data.get('model', 'Unknown Model') }}
            </div>
          </div>
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="space-y-2">
              <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Output Preview</p>
              <div class="bg-black/40 rounded-lg p-3 font-mono text-[11px] border border-border-dark/50 max-h-[120px] overflow-y-auto leading-relaxed">
                {{ step.data.get('content', '...') }}
              </div>
            </div>
            <div class="space-y-2">
              <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Usage Details</p>
              <div class="bg-black/40 rounded-lg p-3 font-mono text-[11px] border border-border-dark/50 max-h-[120px] overflow-y-auto">
                <span class="code-syntax-key">"prompt_tokens"</span>: <span class="code-syntax-number">{{ step.data.get('input_tokens', 0) }}</span>,<br/>
                <span class="code-syntax-key">"completion_tokens"</span>: <span class="code-syntax-number">{{ step.data.get('output_tokens', 0) }}</span>
              </div>
            </div>
          </div>
        {% elif step.is_tool_call %}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="space-y-2">
              <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Input Arguments</p>
              <pre class="bg-black/40 rounded-lg p-3 font-mono text-[11px] border border-border-dark/50 max-h-[150px] overflow-y-auto leading-relaxed"><code class="language-json">{{ json_dumps(step.data.get('arguments', {}), indent=2) }}</code></pre>
            </div>
            <div class="space-y-2">
              <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Tool Status</p>
              <div class="bg-black/40 rounded-lg p-3 font-mono text-[11px] border border-border-dark/50">
                <span class="code-syntax-key">"status"</span>: <span class="code-syntax-string">"invoked"</span>,<br/>
                <span class="code-syntax-key">"name"</span>: <span class="code-syntax-string">"{{ step.data.get('tool_name', 'unknown') }}"</span>
              </div>
            </div>
          </div>
        {% else %}
          <div class="space-y-2">
            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Response Data</p>
            <div class="bg-black/40 rounded-lg p-3 font-mono text-[11px] border border-border-dark/50 max-h-[200px] overflow-y-auto leading-relaxed">
              {{ step.data.get('result', 'No result payload recorded.') }}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="py-20 flex flex-col items-center justify-center text-center">
  <div class="w-16 h-16 glass-card rounded-full flex items-center justify-center text-primary mb-4 animate-pulse">
    <span class="material-symbols-outlined text-3xl">bolt</span>
  </div>
  <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-widest">Awaiting Execution Trace</h3>
  <p class="text-xs text-slate-500 mt-2 max-w-[200px] leading-relaxed">Capture the agent's thought process and tool invocations in real-time.</p>
</div>
{% endif %}