src/components/LoadingCard.tsx

import { Icon } from "./Icon";

export function LoadingCard() {
  return (
    <div className="flex justify-start">
      <div className="flex items-start gap-3 w-full">
        <div className="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center shrink-0">
          <Icon
            name="smart_toy"
            className="text-on-secondary-container text-sm animate-pulse"
          />
        </div>
        <div className="flex-1 max-w-[85%] rounded-2xl border border-outline-variant bg-surface-container px-4 py-3">
          <p className="font-body-sm text-body-sm text-secondary">
            Searching the catalogue and reasoning…
          </p>
        </div>
      </div>
    </div>
  );
}