web/src/components/ToolCallCard.css

/* ─── Tool status line ────────────────────────────────────────────────────── */
.tool-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.tool-line-indicator {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-green { background: #22c55e; }
.dot-amber { background: #f59e0b; }
.dot-red   { background: #ef4444; }
.dot-blue  { background: #3b82f6; }

.tool-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid #dddddd;
  border-top-color: #888888;
  border-radius: 50%;
  animation: tool-spin 0.8s linear infinite;
}

@keyframes tool-spin {
  to { transform: rotate(360deg); }
}

.tool-line-label {
  font-size: 0.8125rem;
  color: #888888;
}

.tool-line-status {
  font-size: 0.75rem;
  color: #bbbbbb;
}

.tool-line-summary {
  font-size: 0.8125rem;
  color: #555555;
  font-weight: 500;
}

.tool-line-error {
  font-size: 0.75rem;
  color: #ef4444;
}