* { margin: 0; padding: 0; }

html, body {width: 100%; height: 100%; overflow: hidden;}

h1 {text-align: center;}
h1 img {max-width: 5em;}

div.container {max-width: 40em; margin: 0 auto; height: 100%;}
div.tbl {display: table; width: 100%; height: 100%;}
div.row {display: table-row;}
div.row.send > * {display: table-cell;}
div.row.send > div {width: 100%;}
div.row.send > div > input {width: 100%; box-sizing: border-box; border-radius: .5em;}
div.header {}
div.chat {height: 100%;}
div.chatcontainer {width: 100%; height: 100%; overflow: auto;}

button {color: #0b293c; border: none; background-color: transparent; cursor: pointer; vertical-align: middle;}
button:hover {text-decoration: underline;}
input, button {font-size: 1.3em; padding: .2em .5em;}
button img {height: 1.3em;}

div.human > div, div.ai > div { padding: .5em 1em; margin-bottom: 1em; border-radius: .5em;}

div.human {margin-left: 1em; margin-right: 1px;}
div.ai {margin-right: 1em; margin-left: 1px;}

div.human > div {background-color: #0b293c; color: white; float: right; clear: both;}
div.ai > div {background-color: #208ac8; color: white; float: left; clear: both;}

input {}