.room-chat {
    --room-grey: #DBDBDB ; /* �O���[ */
}

/*-- utilities --*/
.thema-color {
  /*default color*/
  background-color: #fa0;
}

.text-grey {
  color: var(--room-grey);
}
.clickable {
  cursor: pointer;
}
.xsmall {
  /* smaller than .small */
  font-size: 70%;
}
/*-- utilities end --*/

/* sidebar */

main .chat {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  background-color: #FFFFFF;
  word-break: break-all;
  /* min-height: 240px;*/
  height: calc(100vh - 100px);
  right: 0px;
}
.chat-header {
  display: flex;
  align-items: center;
  height: 32px;
  border-bottom: 1px solid var(--room-grey);
  flex-shrink: 0;
}
.chat-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;  /* .flex-fill */
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--room-grey);
  overflow-y: auto;
}
.chat-body .message-container {
  max-width: 92%;
  min-width: 92%;
  padding-bottom: 0.75rem;
  margin-top: 0.75rem;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  border-bottom: 1px solid var(--room-grey);
}
.chat-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20%;
  min-height: 120px;
}
.chat-footer textarea {
  height: 100%;
  width: 96%;
  font-size: 80%;  /* .small */
  resize: none;
}
.chat-footer button {
  width: 6rem;
}

.chat-me {
  max-width: 100%!important;
  min-width: 100%!important;
  /* border: 1px solid rgba(120,200,50,1); */
  /* background-color: rgba(120,200,50,0.3); */
  padding: 0.75em;
  margin: 0em!important;
}