.message-list {
  display: table;
  width: 100%;
  max-width: 100%;
  border-spacing: 0 6px;
  padding: 0 1rem;
}
.message-list,
.message-list * {
  user-select: text;
}

.message {
  display: table-row;
  word-wrap: break-word;
  word-break: break-word;
  font-size: 0.9rem;
}

.message .nickname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

.message .from {
  display: table-cell;
  vertical-align: top;
  text-align: right;
  width: 120px;
  max-width: 120px;
  padding-right: 12px;
  font-weight: bold;
  color: #444;
}

.message .body {
  display: table-cell;
  vertical-align: top;
  line-height: 1.3;
  padding-right: 12px;
}

.message .when {
  display: table-cell;
  vertical-align: top;
  line-height: 1.3;
  color: #7c818c;
  width: 56px;
  font-size: 0.7rem;
  padding-top: 3px;
  text-align: right;
}

.message .command {
  margin-right: 6px;
  border: 1px solid #eaeaea;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.message.nick .text,
.message.away .text,
.message.quit .text {
  color: #bbb;
}

.compose-message {
  width: 100%;
}

.compose-message input[type='text'] {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
}

.compose-message input[type='submit'] {
  display: none;
}

.compose-message .suggestions-list {
  position: absolute;
  bottom: 100%;
}
.compose-message .suggestions-list li {
  cursor: default;
}
.compose-message .suggestions-list li.selected {
  font-weight: bold;
}
