Chat bubbles

Make a chat scene where speech bubbles appear in turn, like a messenger. The conversation is [list of messages]; the left side is grey and the right side is [my bubble colour]. Bubbles pop up slightly from below, and before each next bubble a typing indicator of three blinking dots shows briefly.

Put CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw in a 16:9 area in the centre of the screen. If prefers-reduced-motion is on, show the final scene without motion.

메신저처럼 말풍선이 번갈아 나타나는 대화 장면을 만들어 주세요. 대화 내용은 [대화 목록]이고, 왼쪽은 회색, 오른쪽은 [내 말풍선 색]이에요. 말풍선은 아래에서 살짝 튀어 오르며 나타나고, 다음 말풍선 전에 점 세 개가 깜빡이는 입력 중 표시가 잠깐 보여요.

HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.