.cover {
  min-height: 800px;
  height: calc(100vh - 120px);
}

.cover-dialog:before {
  content: '';
  right: 0;
  left: 0;
  top: -200px;
  height: 200px;
  background: inherit;
  position: absolute;
  z-index: 0;
}

.cover-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 260px;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
}

.cover-dialog.not-initialized {
  display: none;
}

.cover-dialog-inner {
  display: flex;
  flex-flow: column;
  width: 700px;
}

.message {
  align-items: flex-start;
  display: flex;
}

.message.yours {
  justify-content: flex-start;
}

.message.theirs {
  justify-content: flex-end;
}

.message.theirs .message-bubble {
  background: #43D5FF;
  color: #fff;
  transform-origin: bottom right;
}

.message.theirs .message-bubble:before {
  left: auto;
  right: -20px;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='37' viewBox='0 0 54 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.0591 9.30713V9.6944C23.0591 23.6927 12.7334 32.6927 0.233398 36.1898C8.73086 36.1898 24.7238 34.6937 30.9941 27.0068C26.4224 22.2292 23.5028 16.076 23.0591 9.30713ZM31.9688 27.9807C32.4274 28.4189 32.9006 28.844 33.3876 29.2554C32.9074 28.8531 32.4341 28.4287 31.9688 27.9807Z' fill='%2343D5FF'/%3E%3C/svg%3E%0A");
}

.message.typable .message-bubble {
  left: 0;
  top: 0;
  transform: translate(0, 0);
  max-width: unset;
  white-space: nowrap;
  z-index: 1;
  transition: all 700ms;
}

.message.typable.is-typing .message-bubble {
  left: 50%;
  top: 178px;
  transform: translate(-50%, -50%);
  font-size: 72px;
}

.message.typable.is-typing:not(.is-finished) .message-bubble span img {
  display: none;
}

.message.typable.is-finished .message-bubble .message-cursor {
  display: none;
}

.message.typable.is-typing .message-bubble {
  background: #00FFCE00;
}

.message.typable.is-typing .message-bubble:before {
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='37' viewBox='0 0 54 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.0591 9.30713V9.6944C23.0591 23.6927 12.7334 32.6927 0.233398 36.1898C8.73086 36.1898 24.7238 34.6937 30.9941 27.0068C26.4224 22.2292 23.5028 16.076 23.0591 9.30713ZM31.9688 27.9807C32.4274 28.4189 32.9006 28.844 33.3876 29.2554C32.9074 28.8531 32.4341 28.4287 31.9688 27.9807Z' fill='%2300FFCE00'/%3E%3C/svg%3E%0A");
}

.message.is-unsent .message-bubble {
  opacity: 0;
  transform: translateY(100%) rotate(4deg);
}

.message.theirs.is-unsent .message-bubble {
  transform: translateY(100%) rotate(-11deg);
}

.message + .message {
  margin-top: 24px;
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.message-cursor {
  animation: cursor-blink 1s infinite;
  background: currentColor;
  display: inline-block;
  height: 1.25em;
  vertical-align: text-bottom;
  width: .1em;
}

.message-bubble {
  align-items: center;
  border-radius: 27px;
  background: #fff;
  color: #202529;
  display: inline-flex;
  flex-flow: row;
  font-weight: 600;
  font-size: 24px;
  padding: 10px 22px;
  justify-content: flex-start;
  max-width: 396px;
  position: relative;
  transform-origin: bottom left;
  transition: transform 400ms, opacity .15s;
  z-index: 0;
}

.message-bubble:before {
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='37' viewBox='0 0 54 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.0591 9.30713V9.6944C23.0591 23.6927 12.7334 32.6927 0.233398 36.1898C8.73086 36.1898 24.7238 34.6937 30.9941 27.0068C26.4224 22.2292 23.5028 16.076 23.0591 9.30713ZM31.9688 27.9807C32.4274 28.4189 32.9006 28.844 33.3876 29.2554C32.9074 28.8531 32.4341 28.4287 31.9688 27.9807Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
 content: '';
  display: block;
  position: absolute;
  transition: inherit;
  height: 37px;
  width: 54px;
  left: -20px;
  bottom: 0;
  z-index: -1;
}

.message-bubble span img {
  display: inline-block;
  height: 1.25em;
  vertical-align: text-bottom;
}


@media (min-width: 1800px) {
  .cover {
    min-height: 900px;
  }

  .message-bubble {
    font-size: 28px;
    max-width: 462px;
  }

  .message.typable.is-typing .message-bubble {
    top: 170px;
    font-size: 96px;
  }

  .cover-dialog-inner {
    width: 856px;
  }
}


@media (max-width: 1000px) {
  .cover-dialog-inner {
    width: calc(100% - 40px);
    margin: 0 20px;
  }

  .message.typable.is-typing .message-bubble {
    font-size: 48px;
  }
}


@media (max-width: 750px) {
  .message.typable.is-typing .message-bubble {
    font-size: 36px;
  }
}


@media (max-width: 540px) {
  .cover {
    min-height: 600px;
  }

  .message.typable.is-typing .message-bubble {
    font-size: 23px;
    top: 150px;
  }

  .message-bubble {
    font-size: 18px;
  }
}


@media (max-width: 480px) {

}