<div class="chat">
	<div class="bubble mine">Hey there</div>
	<div class="bubble mine">My birthday is coming up soon and I'm giving a tiny party</div>
	<div class="bubble mine">Wanna come?</div>
	<div class="bubble theirs">Does a pope shit in the woods?! Of course I want to come. When is it?</div>
	<div class="bubble mine">26th of March</div>
	<div class="bubble mine">Around 8-ish</div>
	<div class="bubble theirs">Cool. That's a tuesday right?</div>
	<div class="bubble mine">Yep. We're just getting together for a bit. Drinks, presents and cake :)</div>
	<div class="bubble mine">My parents will be there</div>
	<div class="bubble mine">Just in case you need that info ;D</div>
	<div class="bubble theirs">Ah crap. I was gonna misbehave and start a fire and dance naked on the table. Good thing you warned me in advance</div>
	<div class="bubble theirs">lol</div>
	<div class="bubble mine">Right. So now you'll behave?</div>
	<div class="bubble mine">Guess not. as it's you.</div>
	<div class="bubble theirs">You never know ;)</div>
	<div class="bubble mine">We'll see then</div>
	<div class="bubble theirs">I guess we will.</div>
	<div class="bubble theirs">Expect the unexpected</div>
	<div class="bubble mine">Right</div>
	<div class="bubble theirs">Gotta go. Love you bro. Say hi to mom and dad.</div>
	<div class="bubble mine">LY2. Buh-bye</div>
</div>

* {
	scrollbar-color: rgb(255, 143, 178) transparent;
	scrollbar-width: thin;
}

// code necessary to get the scrollbar to look as great in Blink browsers as it does in Firefox. :(
::-webkit-scrollbar {
		background: #fff;
		height: .6em;
    width: .6em;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
	box-sizing: content-box;
	border-radius: 10px;
	border: 2px solid #eee;
	background: rgb(255, 143, 178);
}

body {
	background: #eee;
	box-sizing: border-box;
	display: flex;
	font-family: sans-serif;
	height: 100vh;
	padding: 1em;
}

.chat {
	align-items: flex-start;
	background: white;
	border-radius: 1em;
	box-shadow: 0 1em 1em rgba(0,0,0,0.05);
	display: flex;
	flex-direction:column;
	line-height: 1.4;
	max-height: calc(100vh - 4em);
	min-height: 50vh;
	min-width: 15em;
	margin: auto;
	overflow: auto;
	position: relative;
	padding: 1em;
	resize: both;
	// transform: translate(0,0); // sadly doesn't work.
}

.bubble {
	background: #eee;
	border-radius: .5em;
	margin-bottom: .25em;
	max-width: 30ch;
	padding: .5em 1em;
	pointer-events: none;
}

.theirs {
	border-radius: .5em .5em .5em 0;
	margin-bottom: 0.25em;
	& + .mine {
		margin-top: 0.5em;
	}
}

.mine {
	align-self: flex-end;
	background-color: rgb(255, 143, 178);
	background-image: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
	background-attachment: fixed;
	border-radius: .5em .5em 0 .5em;
	color: white;
	// You could play with these values to make it work in smaller windows. Facebook is already calculating that size so this shouldn't be too hard.
	// background-size: 100% 20em; // the size of the window
	// background-position: 10em 10em; // where the top left position of the window is
	// background-repeat: no-repeat; // don't repeat it cause it may look weird
	
	& + .theirs {
		margin-top: 0.5em;
	}
}