File: app/style.css

textarea {
  resize: none;
}

#chat {
  min-height: 500px;
  height: 500px;
  overflow: auto;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 10px;
  width: 82%;
}

#chat_private {
  min-height: 500px;
  height: 500px;
  overflow: auto;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 10px;
  width: 100%;
}

#online {
  min-height: 500px;
  height: 500px;
  float: right;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 10px;
  width: 17%;
}

.single-message {
  max-width: 400px;
  margin: 5px 0px 5px 0px;
  padding: 5px 10px 5px 10px;
  border: 1px solid #b3b3b3;
  border-radius: 5px;
  background-color: var(--bs-white);
  color: var(--bs-gray);
}

.single-message p {
  font-size: 14px;
  margin-top: 5px;
}

.single-message span {
  float: right;
  font-size: 12px;
}

.left {
  float: left;
}

.right {
  float: right;
  background: var(--bs-primary);
  color: var(--bs-white);
}

.clear {
  clear: both;
}

@media screen and (max-width: 600px) {
  #online {
    visibility: hidden;
    display: none;
  }

  #chat {
    width: 100%;
  }
}

@media screen and (max-width: 801px) {
  #online {
    visibility: hidden;
    display: none;
  }

  #chat {
    width: 100%;
  }
}