Animated Chat Mobile App with CSS

That´s my first attempt to this challenge using what I know to the moment, with this chaotic non-optimized (but commented) code lol!

If anyone can give me tips on how to improve my code, that would be awesome!

Things I wanna implement (but I don't know how yet):

• Speech bubbles caming from the bottom, and keep scrolling up, like in a regular app chat;

• When I click on the dog photos, they will be shown in fullscreen;

• When it's the cell phone owner's turn to write, it simulates a text being written in the text-area of ​​the input;

• When it's the other person's turn to write, let the three dots appear in animation and the phrase ("person" is typing);

• When Speech bubbles apears, a sound will be played;

• A button inside the app menu to restart the animation.

Any help and ideas will be very welcome!