/** * Loading skeleton for ChatHistory while conversation is loading. * Industrial shimmer with organic line widths — no generic pulse. */export const ChatHistoryLoadingState = (): JSX.Element => {  const rows = [    { user: ['85%', '60%'], ai: ['92%', '70%', '82%', '45%'] },    { user: ['75%', '92%', '40%'], ai: ['88%', '65%', '78%'] },    { user: ['95%', '55%'], ai: ['72%', '85%', '60%', '92%', '35%'] },  ];   return (    <div className="flex flex-1 items-center justify-center overflow-hidden bg-surface">      <div className="w-full max-w-5xl space-y-8 px-6">        {rows.map((row, i) => (          <div key={i} className="space-y-6">            {/* User message skeleton — right aligned */}            <div className="flex justify-end">              <div className="w-2/3 space-y-2">                {row.user.map((width, j) => (                  <div                    key={j}                    className="skeleton-shimmer ml-auto h-3 rounded-sm"                    style={{ width, backgroundColor: 'var(--skeleton-base)' }}                  />                ))}              </div>            </div>            {/* AI response skeleton — left aligned with border accent */}            <div className="space-y-2.5 border-l-2 border-border pl-3">              {row.ai.map((width, j) => (                <div                  key={j}                  className="skeleton-shimmer h-3 rounded-sm"                  style={{ width, backgroundColor: 'var(--skeleton-base)' }}                />              ))}            </div>          </div>        ))}      </div>    </div>  );};