interface Props {
  visible: boolean;
}

// Visual cue layered over the ChatInput while a drag is in progress.
// Pointer-events: none so the underlying drop handler still receives the
// drop event. Renders nothing when not visible (cheap and out of layout).
export function DropOverlay({ visible }: Props) {
  if (!visible) return null;
  return (
    <div
      className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center rounded border-2 border-dashed border-primary bg-background/85"
      aria-hidden="true"
    >
      <div className="text-sm font-medium text-primary">Drop to attach</div>
    </div>
  );
}