chat app css illustration using flexbox

After 4 days of struggle, I finally got the closest UI output Earlier I used px unit for elements, which then I replaced with rem to make them responsive. Although I have used px for border-radius.

I would like some help for below points:

1. As per the desktop screen design provided in the challenge, my UI is displaying the mobile element bigger in size.

2. While setting the right bottom background div in mobile mode, first I used below css on element ".bgBottomRight", which was not setting the div properly position:absolute; bottom:0; right:0; After some research, I changed it to below code,which worked, but I couldn't understand the behaviour position:absolute top:100% right:0%

3. Is it a good practice to use margin and padding with flexbox to achieve the responsive. I think, with margin and padding my code is not looking clean