// Premium robot family — consistent silhouette, richer detail.
const ROBOT_PALETTES = {
  cyan:    { body: "#D8EEFA", bodyMid: "#8BB8D9", bodyDark: "#2E4A6A", visor: "#4FD8FF", glow: "#4FD8FF", accent: "#BEE8FF", plate: "#1A3550" },
  pink:    { body: "#F8D5E6", bodyMid: "#E8A8C8", bodyDark: "#6B3250", visor: "#FF6FB8", glow: "#FF7ABF", accent: "#FFC8DE", plate: "#3A1A2A" },
  violet:  { body: "#E0D4F4", bodyMid: "#B9A3D9", bodyDark: "#443066", visor: "#A97BFF", glow: "#B78BFF", accent: "#D8C4FF", plate: "#2A1D42" },
  orange:  { body: "#F8D8B8", bodyMid: "#E8B088", bodyDark: "#6A3820", visor: "#FF9547", glow: "#FFA55C", accent: "#FFD2AC", plate: "#3A220F" },
  green:   { body: "#CEE8D6", bodyMid: "#9FD4AF", bodyDark: "#2A4F38", visor: "#4FE08A", glow: "#5EEB95", accent: "#C6F0D2", plate: "#14301E" },
  teal:    { body: "#C8E8E4", bodyMid: "#8BCFCB", bodyDark: "#234E4A", visor: "#3FE0D4", glow: "#4FE8DC", accent: "#BEEDE8", plate: "#0F3230" },
  amber:   { body: "#F4DFAE", bodyMid: "#E6C888", bodyDark: "#6A4E1E", visor: "#FFC24F", glow: "#FFD170", accent: "#FFE4AC", plate: "#3A2A10" },
  magenta: { body: "#EAC6EA", bodyMid: "#D499D3", bodyDark: "#552852", visor: "#E866E2", glow: "#F07EEC", accent: "#EFC4EE", plate: "#311830" },
  lime:    { body: "#DDECA4", bodyMid: "#C8DE88", bodyDark: "#4A5A24", visor: "#B8E84A", glow: "#C5F060", accent: "#E0F0A8", plate: "#283014" },
};

// Shared premium robot rendering. Used for both avatars and room bots.
// view: "bust" (head + shoulders for avatars), "full" (whole body for big avatar or rooms)
function PremiumRobot({ color = "cyan", size = 100, view = "full", mood = "happy" }) {
  const p = ROBOT_PALETTES[color] || ROBOT_PALETTES.cyan;
  const id = React.useMemo(() => "pr" + Math.random().toString(36).slice(2, 8), []);
  const eye = mood === "focus" ? "focus" : mood === "sleep" ? "sleep" : "happy";

  const defs = (
    <defs>
      {/* body gradient: metallic ceramic */}
      <linearGradient id={`body-${id}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={p.body} />
        <stop offset="0.5" stopColor={p.bodyMid} />
        <stop offset="1" stopColor={p.bodyDark} />
      </linearGradient>
      <radialGradient id={`shine-${id}`} cx="0.35" cy="0.25" r="0.45">
        <stop offset="0" stopColor="#ffffff" stopOpacity="0.75" />
        <stop offset="1" stopColor="#ffffff" stopOpacity="0" />
      </radialGradient>
      <linearGradient id={`visor-${id}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#06121f" />
        <stop offset="0.45" stopColor={p.visor} />
        <stop offset="0.55" stopColor={p.visor} />
        <stop offset="1" stopColor="#041018" />
      </linearGradient>
      <radialGradient id={`glow-${id}`} cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor={p.glow} stopOpacity="0.8" />
        <stop offset="1" stopColor={p.glow} stopOpacity="0" />
      </radialGradient>
      <filter id={`blur-${id}`}><feGaussianBlur stdDeviation="1.2" /></filter>
    </defs>
  );

  // full body (100x120 viewbox normalized)
  if (view === "full") {
    return (
      <svg width={size} height={size * 1.15} viewBox="0 0 100 115">
        {defs}
        {/* ground shadow */}
        <ellipse cx="50" cy="110" rx="22" ry="3" fill="#000" opacity="0.45" />
        {/* ground halo */}
        <ellipse cx="50" cy="110" rx="28" ry="4" fill={`url(#glow-${id})`} />

        {/* antenna */}
        <line x1="50" y1="10" x2="50" y2="3" stroke={p.bodyDark} strokeWidth="1.4" strokeLinecap="round" />
        <circle cx="50" cy="2.5" r="2" fill={p.visor} />
        <circle cx="50" cy="2.5" r="3.5" fill={p.glow} opacity="0.5" filter={`url(#blur-${id})`} />

        {/* legs / hover base */}
        <ellipse cx="50" cy="104" rx="16" ry="3.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
        <ellipse cx="50" cy="102" rx="14" ry="2.5" fill={p.bodyMid} opacity="0.4" />
        <ellipse cx="50" cy="103" rx="10" ry="1.6" fill={p.visor} opacity="0.7" />

        {/* lower connector (waist) */}
        <rect x="44" y="86" width="12" height="10" rx="1.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
        <rect x="46" y="88" width="8" height="1.2" fill={p.visor} opacity="0.7" />
        <rect x="46" y="91" width="8" height="1.2" fill={p.visor} opacity="0.5" />

        {/* torso shell */}
        <path d="M 26 56 Q 25 50 32 48 L 68 48 Q 75 50 74 56 L 74 86 Q 74 90 68 90 L 32 90 Q 26 90 26 86 Z"
              fill={`url(#body-${id})`} stroke={p.bodyDark} strokeWidth="0.9" />
        {/* torso shine */}
        <path d="M 30 52 Q 28 56 29 66 L 35 64 Q 34 56 36 52 Z" fill={`url(#shine-${id})`} opacity="0.6" />
        {/* chest plate (dark recessed panel) */}
        <rect x="36" y="58" width="28" height="22" rx="3" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
        <rect x="37" y="59" width="26" height="20" rx="2.5" fill="#050d18" />
        {/* chest core */}
        <circle cx="50" cy="68" r="5" fill="#0a1a2a" stroke={p.visor} strokeWidth="0.6" />
        <circle cx="50" cy="68" r="3.5" fill={p.visor} opacity="0.7" />
        <circle cx="50" cy="68" r="1.6" fill="#fff" />
        <circle cx="50" cy="68" r="7" fill={p.glow} opacity="0.35" filter={`url(#blur-${id})`} />
        {/* chest readout lights */}
        <rect x="40" y="62" width="6" height="1.2" fill={p.visor} opacity="0.8" rx="0.3" />
        <rect x="40" y="64.5" width="4" height="1.2" fill={p.visor} opacity="0.55" rx="0.3" />
        <rect x="54" y="62" width="6" height="1.2" fill={p.glow} opacity="0.7" rx="0.3" />
        <rect x="54" y="64.5" width="4" height="1.2" fill={p.glow} opacity="0.5" rx="0.3" />
        <rect x="41" y="74" width="18" height="1" fill={p.visor} opacity="0.35" rx="0.3" />
        <rect x="41" y="76" width="12" height="1" fill={p.visor} opacity="0.22" rx="0.3" />
        {/* shoulder joints */}
        <circle cx="25" cy="56" r="4.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
        <circle cx="25" cy="56" r="2.2" fill={p.bodyMid} />
        <circle cx="75" cy="56" r="4.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
        <circle cx="75" cy="56" r="2.2" fill={p.bodyMid} />
        {/* arms */}
        <path d="M 20 58 Q 16 68 17 78 Q 18 85 22 86 Q 26 85 25 78 Q 24 68 26 60 Z"
              fill={`url(#body-${id})`} stroke={p.bodyDark} strokeWidth="0.7" />
        <path d="M 80 58 Q 84 68 83 78 Q 82 85 78 86 Q 74 85 75 78 Q 76 68 74 60 Z"
              fill={`url(#body-${id})`} stroke={p.bodyDark} strokeWidth="0.7" />
        {/* hands */}
        <circle cx="21" cy="88" r="3.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
        <circle cx="21" cy="88" r="1.5" fill={p.visor} opacity="0.7" />
        <circle cx="79" cy="88" r="3.5" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
        <circle cx="79" cy="88" r="1.5" fill={p.visor} opacity="0.7" />

        {/* neck */}
        <rect x="46" y="42" width="8" height="7" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
        <rect x="47" y="44" width="6" height="0.8" fill={p.visor} opacity="0.6" />

        {/* head */}
        {HeadShape({ p, id, eye })}
      </svg>
    );
  }

  // bust (head + shoulders only) for roster avatars — viewbox 100x90
  return (
    <svg width={size} height={size * 0.9} viewBox="0 0 100 90">
      {defs}
      {/* shoulders */}
      <path d="M 15 85 Q 22 68 36 66 L 64 66 Q 78 68 85 85 Z"
            fill={`url(#body-${id})`} stroke={p.bodyDark} strokeWidth="0.8" />
      <circle cx="50" cy="78" r="3.5" fill={p.visor} opacity="0.8" />
      <circle cx="50" cy="78" r="1.6" fill="#fff" />
      {/* shoulder joints */}
      <circle cx="25" cy="72" r="4" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
      <circle cx="25" cy="72" r="1.5" fill={p.bodyMid} />
      <circle cx="75" cy="72" r="4" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
      <circle cx="75" cy="72" r="1.5" fill={p.bodyMid} />
      {/* neck */}
      <rect x="45" y="58" width="10" height="10" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.5" />
      {/* antenna */}
      <line x1="50" y1="12" x2="50" y2="3" stroke={p.bodyDark} strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="50" cy="2.5" r="2" fill={p.visor} />
      {/* head */}
      {HeadShape({ p, id, eye, yOffset: 2 })}
    </svg>
  );
}

// Helper: head + visor + eyes — shared between bust and full
function HeadShape({ p, id, eye = "happy", yOffset = 0 }) {
  const yo = yOffset;
  return (
    <g>
      {/* head shell (rounded rect with softer jaw) */}
      <path d={`M 22 ${20+yo} Q 22 ${12+yo} 32 ${10+yo} L 68 ${10+yo} Q 78 ${12+yo} 78 ${20+yo} L 78 ${44+yo} Q 78 ${56+yo} 68 ${58+yo} L 32 ${58+yo} Q 22 ${56+yo} 22 ${44+yo} Z`}
            fill={`url(#body-${id})`} stroke={p.bodyDark} strokeWidth="0.9" />
      {/* top highlight */}
      <path d={`M 30 ${14+yo} Q 50 ${8+yo} 70 ${14+yo}`} stroke="#fff" strokeWidth="1.4" opacity="0.45" fill="none" strokeLinecap="round" />
      {/* shine blob */}
      <ellipse cx="36" cy={20+yo} rx="8" ry="4" fill={`url(#shine-${id})`} opacity="0.7" />
      {/* ear pods */}
      <rect x="18" y={30+yo} width="6" height="12" rx="2" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
      <rect x="19" y={32+yo} width="4" height="2" fill={p.visor} opacity="0.9" />
      <rect x="19" y={36+yo} width="4" height="1" fill={p.visor} opacity="0.6" />
      <rect x="76" y={30+yo} width="6" height="12" rx="2" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.6" />
      <rect x="77" y={32+yo} width="4" height="2" fill={p.visor} opacity="0.9" />
      <rect x="77" y={36+yo} width="4" height="1" fill={p.visor} opacity="0.6" />
      {/* brow shadow */}
      <path d={`M 28 ${24+yo} Q 50 ${20+yo} 72 ${24+yo} L 72 ${28+yo} Q 50 ${25+yo} 28 ${28+yo} Z`} fill={p.bodyDark} opacity="0.35" />
      {/* visor frame */}
      <rect x="26" y={28+yo} width="48" height="20" rx="9" fill="#050d18" stroke={p.bodyDark} strokeWidth="0.8" />
      <rect x="27.5" y={29.5+yo} width="45" height="17" rx="7.5" fill={`url(#visor-${id})`} />
      {/* visor glow band */}
      <rect x="27.5" y={36+yo} width="45" height="3" fill={p.glow} opacity="0.45" />
      {/* eyes */}
      {eye === "sleep" ? (
        <g>
          <path d={`M 38 ${39+yo} Q 42 ${37+yo} 46 ${39+yo}`} stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" />
          <path d={`M 54 ${39+yo} Q 58 ${37+yo} 62 ${39+yo}`} stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" />
        </g>
      ) : (
        <g>
          <circle cx="42" cy={39+yo} r="3.2" fill="#fff" />
          <circle cx="58" cy={39+yo} r="3.2" fill="#fff" />
          <circle cx={eye === "focus" ? 43 : 42.5} cy={39.5+yo} r="1.5" fill="#0a1a2a" />
          <circle cx={eye === "focus" ? 59 : 58.5} cy={39.5+yo} r="1.5" fill="#0a1a2a" />
          <circle cx="41.5" cy={38.2+yo} r="0.6" fill="#fff" />
          <circle cx="57.5" cy={38.2+yo} r="0.6" fill="#fff" />
        </g>
      )}
      {/* visor top reflection */}
      <path d={`M 30 ${31+yo} L 44 ${31+yo}`} stroke="#fff" strokeWidth="1.5" opacity="0.35" strokeLinecap="round" />
      {/* cheek vents */}
      <line x1="29" y1={52+yo} x2="33" y2={52+yo} stroke={p.bodyDark} strokeWidth="0.5" opacity="0.6" />
      <line x1="29" y1={54+yo} x2="32" y2={54+yo} stroke={p.bodyDark} strokeWidth="0.5" opacity="0.6" />
      <line x1="67" y1={52+yo} x2="71" y2={52+yo} stroke={p.bodyDark} strokeWidth="0.5" opacity="0.6" />
      <line x1="68" y1={54+yo} x2="71" y2={54+yo} stroke={p.bodyDark} strokeWidth="0.5" opacity="0.6" />
      {/* chin plate */}
      <rect x="44" y={55+yo} width="12" height="3" rx="1" fill={p.plate} stroke={p.bodyDark} strokeWidth="0.4" />
    </g>
  );
}

// Public: avatar used in roster + collaborators (bust).
// Opts into the reusable agent microanimation system via .agent-float-sm.
// `delay` desyncs multiple agents rendered in a row.
function RobotAvatar({ color = "cyan", size = 48, style = {}, delay = 0 }) {
  return (
    <div
      className="agent-float-sm"
      style={{ display: "inline-block", lineHeight: 0, animationDelay: `${delay}s`, ...style }}
    >
      <PremiumRobot color={color} size={size} view="bust" />
    </div>
  );
}

// Public: large full-body used in Selected Agent panel.
// Opts into .agent-float-lg for a slightly more notorious bob.
function RobotFull({ color = "cyan", size = 90, delay = 0 }) {
  return (
    <div
      className="agent-float-lg"
      style={{ display: "inline-block", lineHeight: 0, animationDelay: `${delay}s` }}
    >
      <PremiumRobot color={color} size={size} view="full" />
    </div>
  );
}

// ============================================================
// ROOM BOT — "in-scene" robot with NAMETAG and ACTIVITY INDICATOR
// ============================================================
const ACTIVITY = {
  working:    { label: "WORKING",    color: "#4FD8FF", icon: "gear" },
  researching:{ label: "RESEARCH",   color: "#FFD170", icon: "flask" },
  meeting:    { label: "MEETING",    color: "#C17AFF", icon: "chat" },
  idle:       { label: "IDLE",       color: "#7A95B4", icon: "zzz" },
  comm:       { label: "COMMS",      color: "#4FE08A", icon: "wave" },
  moving:     { label: "MOVING",     color: "#7EE8FF", icon: "arrow" },
};

function ActivityIcon({ type, size = 8, color }) {
  const c = color;
  switch (type) {
    case "gear": return <g><circle cx="0" cy="0" r={size*0.35} fill="none" stroke={c} strokeWidth="0.8" /><circle cx="0" cy="0" r={size*0.15} fill={c} /></g>;
    case "flask": return <g><path d={`M ${-size*0.25} ${-size*0.4} L ${-size*0.25} ${-size*0.1} L ${-size*0.4} ${size*0.35} L ${size*0.4} ${size*0.35} L ${size*0.25} ${-size*0.1} L ${size*0.25} ${-size*0.4} Z`} fill="none" stroke={c} strokeWidth="0.8" /></g>;
    case "chat": return <g><rect x={-size*0.4} y={-size*0.35} width={size*0.8} height={size*0.6} rx={size*0.15} fill="none" stroke={c} strokeWidth="0.8" /></g>;
    case "zzz": return <text x="0" y={size*0.3} textAnchor="middle" fontSize={size*0.9} fill={c} fontFamily="monospace" fontWeight="700">z</text>;
    case "wave": return <g><path d={`M ${-size*0.4} 0 Q ${-size*0.2} ${-size*0.35} 0 0 Q ${size*0.2} ${size*0.35} ${size*0.4} 0`} fill="none" stroke={c} strokeWidth="0.9" /></g>;
    case "arrow": return <path d={`M ${-size*0.3} 0 L ${size*0.3} 0 M ${size*0.1} ${-size*0.2} L ${size*0.3} 0 L ${size*0.1} ${size*0.2}`} fill="none" stroke={c} strokeWidth="0.9" strokeLinecap="round" />;
    default: return null;
  }
}

function RoomBot({ color = "cyan", x = 50, y = 50, size = 28, name, activity = "working", idx = 0, facing = "front" }) {
  const p = ROBOT_PALETTES[color] || ROBOT_PALETTES.cyan;
  const id = React.useMemo(() => "rm" + Math.random().toString(36).slice(2, 7), []);
  const act = ACTIVITY[activity] || ACTIVITY.working;
  const delay = (idx * 0.55) + "s";
  const flip = facing === "right" ? -1 : 1;

  return (
    <g transform={`translate(${x}, ${y})`}>
      {/* Ground layer (stays put while the body floats above it).
          The black ellipse counter-breathes via .agent-shadow so the avatar
          reads as having weight. */}
      <ellipse className="agent-shadow" style={{ animationDelay: delay }}
               cx="0" cy={size * 0.62} rx={size * 0.3} ry={size * 0.055} fill="#000" opacity="0.5" />
      <ellipse cx="0" cy={size * 0.62} rx={size * 0.36} ry={size * 0.07}
               fill="none" stroke={p.glow} strokeWidth="0.5" opacity="0.35" />

      {/* Floating body — adopts the reusable microanimation system */}
      <g className="agent-float-md" style={{ animationDelay: delay }}>

      <defs>
        <linearGradient id={`rb-body-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={p.body} />
          <stop offset="0.55" stopColor={p.bodyMid} />
          <stop offset="1" stopColor={p.bodyDark} />
        </linearGradient>
        <linearGradient id={`rb-visor-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#041018" />
          <stop offset="0.5" stopColor={p.visor} />
          <stop offset="1" stopColor="#041018" />
        </linearGradient>
      </defs>

      <g transform={`scale(${flip} 1)`}>
        {/* hover base */}
        <ellipse cx="0" cy={size * 0.52} rx={size * 0.28} ry={size * 0.06} fill={p.plate} stroke={p.bodyDark} strokeWidth="0.4" />
        <ellipse cx="0" cy={size * 0.5} rx={size * 0.2} ry={size * 0.035} fill={p.visor} opacity="0.8" />

        {/* torso */}
        <path d={`M ${-size*0.3} ${size*0.02} Q ${-size*0.3} ${-size*0.05} ${-size*0.2} ${-size*0.06} L ${size*0.2} ${-size*0.06} Q ${size*0.3} ${-size*0.05} ${size*0.3} ${size*0.02} L ${size*0.3} ${size*0.42} Q ${size*0.3} ${size*0.48} ${size*0.22} ${size*0.48} L ${-size*0.22} ${size*0.48} Q ${-size*0.3} ${size*0.48} ${-size*0.3} ${size*0.42} Z`}
              fill={`url(#rb-body-${id})`} stroke={p.bodyDark} strokeWidth="0.6" />
        {/* chest panel */}
        <rect x={-size*0.22} y={size*0.08} width={size*0.44} height={size*0.28} rx={size*0.04} fill={p.plate} stroke={p.bodyDark} strokeWidth="0.3" />
        <circle cx="0" cy={size*0.22} r={size*0.06} fill={p.visor} />
        <circle cx="0" cy={size*0.22} r={size*0.025} fill="#fff" />
        <rect x={-size*0.17} y={size*0.12} width={size*0.1} height={size*0.02} fill={p.visor} opacity="0.7" />
        <rect x={size*0.07} y={size*0.12} width={size*0.1} height={size*0.02} fill={p.glow} opacity="0.7" />
        {/* arms */}
        <rect x={-size*0.38} y={size*0.02} width={size*0.08} height={size*0.3} rx={size*0.04} fill={`url(#rb-body-${id})`} stroke={p.bodyDark} strokeWidth="0.3" />
        <rect x={size*0.3} y={size*0.02} width={size*0.08} height={size*0.3} rx={size*0.04} fill={`url(#rb-body-${id})`} stroke={p.bodyDark} strokeWidth="0.3" />
        {/* shoulders */}
        <circle cx={-size*0.33} cy={size*0.02} r={size*0.05} fill={p.plate} />
        <circle cx={size*0.33} cy={size*0.02} r={size*0.05} fill={p.plate} />

        {/* head */}
        <path d={`M ${-size*0.38} ${-size*0.3} Q ${-size*0.38} ${-size*0.5} ${-size*0.22} ${-size*0.52} L ${size*0.22} ${-size*0.52} Q ${size*0.38} ${-size*0.5} ${size*0.38} ${-size*0.3} L ${size*0.38} ${-size*0.1} Q ${size*0.38} ${-size*0.02} ${size*0.28} ${-size*0.02} L ${-size*0.28} ${-size*0.02} Q ${-size*0.38} ${-size*0.02} ${-size*0.38} ${-size*0.1} Z`}
              fill={`url(#rb-body-${id})`} stroke={p.bodyDark} strokeWidth="0.6" />
        {/* top shine */}
        <path d={`M ${-size*0.28} ${-size*0.48} Q 0 ${-size*0.54} ${size*0.28} ${-size*0.48}`} stroke="#fff" strokeWidth="0.7" opacity="0.45" fill="none" />
        {/* ear pods */}
        <rect x={-size*0.42} y={-size*0.3} width={size*0.05} height={size*0.12} rx={size*0.02} fill={p.plate} />
        <rect x={size*0.37} y={-size*0.3} width={size*0.05} height={size*0.12} rx={size*0.02} fill={p.plate} />
        <circle cx={-size*0.4} cy={-size*0.24} r={size*0.015} fill={p.visor} />
        <circle cx={size*0.4} cy={-size*0.24} r={size*0.015} fill={p.visor} />
        {/* visor */}
        <rect x={-size*0.3} y={-size*0.32} width={size*0.6} height={size*0.2} rx={size*0.08} fill="#041018" stroke={p.bodyDark} strokeWidth="0.3" />
        <rect x={-size*0.28} y={-size*0.3} width={size*0.56} height={size*0.17} rx={size*0.07} fill={`url(#rb-visor-${id})`} />
        {/* eyes */}
        <circle cx={-size*0.11} cy={-size*0.2} r={size*0.038} fill="#fff" />
        <circle cx={size*0.11} cy={-size*0.2} r={size*0.038} fill="#fff" />
        <circle cx={-size*0.1} cy={-size*0.19} r={size*0.018} fill="#0a1a2a" />
        <circle cx={size*0.12} cy={-size*0.19} r={size*0.018} fill="#0a1a2a" />
        {/* visor band glow */}
        <rect x={-size*0.28} y={-size*0.18} width={size*0.56} height={size*0.01} fill={p.glow} opacity="0.7" />

        {/* antenna */}
        <line x1="0" y1={-size*0.52} x2="0" y2={-size*0.64} stroke={p.bodyDark} strokeWidth="0.6" />
        <circle cx="0" cy={-size*0.66} r={size*0.035} fill={p.glow} />
        <circle cx="0" cy={-size*0.66} r={size*0.06} fill={p.glow} opacity="0.4" />
      </g>

      {/* ===== NAMETAG ===== */}
      {name && (
        <g transform={`translate(0, ${-size*0.9})`}>
          {/* tag bg */}
          <rect x={-name.length * 1.7 - 8} y="-4.5" width={name.length * 3.4 + 16} height="10"
                rx="5" fill="rgba(6, 16, 28, 0.92)" stroke={act.color} strokeWidth="0.5" />
          {/* activity dot */}
          <circle cx={-name.length * 1.7 - 3} cy="0" r="1.6" fill={act.color}>
            <animate attributeName="opacity" values="1;0.4;1" dur="1.4s" repeatCount="indefinite" />
          </circle>
          <text x={1} y="2.2" textAnchor="middle" fontSize="4.2" fill="#EAF6FF" fontFamily="Inter, sans-serif" fontWeight="700" letterSpacing="0.3">
            {name.toUpperCase()}
          </text>
          {/* pointer down */}
          <path d="M -3 5.5 L 0 8 L 3 5.5 Z" fill="rgba(6, 16, 28, 0.92)" stroke={act.color} strokeWidth="0.5" />
        </g>
      )}

      {/* ===== ACTIVITY BUBBLE (right of bot) ===== */}
      <g transform={`translate(${size*0.55}, ${-size*0.35})`}>
        <circle r="4.5" fill="rgba(6, 16, 28, 0.95)" stroke={act.color} strokeWidth="0.6" />
        <circle r="6.5" fill={act.color} opacity="0.15">
          <animate attributeName="r" values="5;8;5" dur="2s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.25;0;0.25" dur="2s" repeatCount="indefinite" />
        </circle>
        <g>
          <ActivityIcon type={act.icon} size={6} color={act.color} />
        </g>
      </g>
      </g>
    </g>
  );
}

Object.assign(window, { RobotAvatar, RobotFull, RoomBot, ROBOT_PALETTES, ACTIVITY });