@keyframes bounce {
  0% {
    transform: scale(0.2); }
  1% {
    transform: scale(0.2); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

html {
  font-size: 16px; }

body {
  padding-top: 1rem;
  background-color: #000;
  color: #fff;
  font-weight: 400;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
  letter-spacing: 3px; }

.message-pane {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  min-height: calc(100vh - 2rem); }

.messages {
  align-self: stretch;
  flex-grow: 1;
  height: 100%;
  overflow-y: scroll; }
  .messages .message {
    padding-bottom: 2rem; }
    .messages .message:last-child {
      padding-bottom: 0; }
    .messages .message.author-black .message-avatar,
    .messages .message.author-black .message-text {
      background: #0d0d0d;
      background-image: url("/assets/images/black.setton.svg"); }
    .messages .message.author-black .message-text {
      background: linear-gradient(to bottom, #d6cdcb 0, #9c9395 calc(50% - 1px), #82767d calc(50% + 1px), #7a6e75 100%); }
    .messages .message.author-blue .message-avatar,
    .messages .message.author-blue .message-text {
      background: #80c4fb;
      background-image: url("/assets/images/blue.tanaka.svg"); }
    .messages .message.author-blue .message-text {
      background: linear-gradient(to bottom, #87b5e0 0, #6597d0 calc(50% - 1px), #4b79c3 calc(50% + 1px), #456ba9 100%); }
    .messages .message.author-orange .message-avatar,
    .messages .message.author-orange .message-text {
      background: #f8a30e;
      background-image: url("/assets/images/orange.kanra.svg"); }
    .messages .message.author-orange .message-text {
      background: linear-gradient(to bottom, #fad64c 0, #f39331 calc(50% - 1px), #d86d15 calc(50% + 1px), #fa831c 100%); }
    .messages .message.author-red .message-avatar,
    .messages .message.author-red .message-text {
      background: #a20f03;
      background-image: url("/assets/images/red.zaika.svg"); }
    .messages .message.author-red .message-text {
      background: linear-gradient(to bottom, #cc666d 0, #a2201f calc(50% - 1px), #9a0e06 calc(50% + 1px), #a41a0d 100%); }
    .messages .message.author-green .message-avatar,
    .messages .message.author-green .message-text {
      background: #8ccc26;
      background-image: url("/assets/images/green._zawa.svg"); }
    .messages .message.author-green .message-text {
      background: linear-gradient(to bottom, #b3d952 0, #abda4b calc(50% - 1px), #77c93a calc(50% + 1px), #4b972d 100%); }
    .messages .message .message-line {
      align-items: flex-start;
      display: flex; }
      .messages .message .message-line .message-author {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: 2rem;
        margin-top: 0.125rem; }
      .messages .message .message-line .message-avatar {
        height: 3.5rem;
        width: 3.5rem;
        border: #fff 0.125rem solid;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 3.5rem 3.5rem; }
      .messages .message .message-line .message-text {
        animation: bounce .2s;
        display: inline-block;
        border: #fff 0.25rem solid;
        border-radius: 1rem;
        padding: 0.75rem 1.25rem;
        font-size: 1.375rem;
        position: relative;
        margin-right: 1.25rem; }
        .messages .message .message-line .message-text .message-arrow {
          position: absolute;
          top: 1.375rem;
          left: -1.25rem;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0.3125rem 1rem 0.3125rem 0;
          border-color: transparent #fff transparent transparent; }

.message-editor {
  align-self: start;
  padding-top: 1rem;
  width: 100%;
  display: flex;
  flex-direction: row; }
  .message-editor .editor-container {
    align-self: stretch;
    flex-grow: 1;
    width: 100%;
    min-height: 3.375rem;
    max-height: 6.125rem;
    overflow-y: scroll;
    background-color: gray; }
    .message-editor .editor-container .editor {
      font-size: 1.375rem;
      padding: 1rem; }
  .message-editor .message-input-send {
    align-self: center;
    padding: 1rem; }

[placeholder]:empty::before {
  content: attr(placeholder);
  color: #555; }

[placeholder]:empty:focus::before {
  content: ""; }