.chat {
  display: flex;
  flex-direction: column;
  border: solid 1px var(--grey-300);
  background-color: var(--grey-100);
}
.chat .chat-messages {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: var(--content-padding);
  overflow-y: auto;
}
.chat .chat-keyboard {
  padding: var(--content-padding);
  padding-top: 0px;
}
.chat .chat-keyboard-input {
  height: 34px;
}
.chat .chat-message {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  background-color: white;
  border: solid 1px var(--grey-300);
  border-radius: 8px;
  margin-bottom: 2px;
  max-width: calc(100% - 20px);
  width: -moz-fit-content;
  width: fit-content;
}
.chat .chat-message.chat-message-you {
  margin-left: auto;
  background-color: var(--primary-color-300);
  border-color: var(--primary-color-500);
  border-top-right-radius: 0px;
  color: white;
}
.chat .chat-message:not(.chat-message-you) {
  border-top-left-radius: 0px;
}
.chat .chat-message .chat-message-sender {
  margin: 0px;
  width: 100%;
}
.chat .chat-message .chat-message-content {
  white-space: pre-wrap;
  margin-right: 10px;
}
.chat .chat-message .chat-message-time {
  margin-top: auto;
  margin-left: auto;
  opacity: 0.7;
}
.chat .chat-date {
  margin: 16px auto 8px auto;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--grey-300);
  border: solid 1px var(--grey-700);
}/*# sourceMappingURL=component-chat.css.map */