h1#title { margin: 0; padding: 0; font-size: 1.2em; }
p#status { margin: 0; padding: 0; font-size: 0.5em; color: darkgreen;}
ul#messages { overflow: auto; margin: 0; padding: 0 3px; list-style: none; border: 1px solid gray; height:100%; min-height:200px;}
ul#messages li { margin: 0.35em 0; padding: 0; }
ul#messages li small { display: block; font-size: 0.59em; color: gray; }
ul#messages li.pending { color: #aaa; }
form#sendmsg { font-size: 1em; margin: 0; padding: 0; }
form#sendmsg p { margin: 0; padding: 0; display: flex; gap: 0.5em; }
form#sendmsg p input { font-size: 1em; min-width: 0; }
form#sendmsg p input[name=name] { flex: 0 1 10em; padding:4px;}
form#sendmsg p input[name=content] { flex: 1 1 auto; padding:4px; width:70%;}
form#sendmsg p button#chat {}
h1#title, ul#messages, form#sendmsg { width: 100%; max-width: 320px; box-sizing: border-box; }

.action {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 100px;
  height: 40px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}

.action button#chat {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  border-radius: 20px;
  font-size: 14px;
  color: #a13dea;
  transition: 0.3s ease-in-out;
  outline: none;
  cursor: pointer;
}

.action.active button#chat {
  transform: rotate(359deg);
}

.action chatbox {
  position: absolute;
  bottom: 55px;
  left: -200%;
  height: 300px;
  width: 280px;
  background-color: #efff;
  display: grid;
  grid-gap: 10px;
  border-radius: 20px;
  padding: 20px;
  list-style-type: none;
  margin: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}

.action.active chatbox {
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
  bottom: 65px;
}

@media screen and (max-width: 350px) {
ul#messages, form#sendmsg { max-width: 2700; }
.action chatbox { width: 280px; left: -170%; }
}