Tool call card

<div class="card" id="card">
  <div class="row">
    <span class="badge run" id="st"><i class="spin"></i>실행 중</span>
    <code class="fn">search_web(<span id="arg">"2025 GPU 벤치마크"</span>)</code>
  </div>
  <div class="res" id="res"></div>
</div>

.card{width:min(310px,96%);border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:10px 12px;display:grid;gap:8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px}
.badge.run{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.badge.done{background:color-mix(in srgb, var(--accent-3) 18%, transparent);color:#0f9d78}
.spin{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:sp .6s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.fn{font-family:ui-monospace,monospace;font-size:11px;color:var(--fg)}
.res{font-size:11px;color:var(--muted);line-height:1.55;opacity:0;max-height:0;overflow:hidden;transition:opacity .25s}
.res[data-show]{opacity:1;max-height:60px}

const st = document.getElementById('st'), res = document.getElementById('res');
function run() {
  st.className = 'badge run';
  st.innerHTML = '<i class="spin"></i>실행 중';
  res.removeAttribute('data-show');
  res.textContent = '';
  setTimeout(() => {
    st.className = 'badge done';
    st.innerHTML = '완료';
    res.textContent = '결과 8건 — 상위 3개 벤치마크 기사 확인함';
    res.setAttribute('data-show', '');
  }, 1500);
}
run();
setInterval(run, 3400);