.TextMessage {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 43px;
  padding: 5px 6px;
  background: var(--menu-background);
  border: 1px solid white;
  color: white;
  margin: 0 6px;
  border-radius: var(--menu-border-radius);
  text-shadow: -1px 1px #696969;

  /* So people can't higlight text */
  /* pointer-events: none; */
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  /* background: var(--menu-background);
  border: 1px solid var(--menu-border-color);
  color: var(--menu-font-color); */
}
.TextMessage_p {
  margin: 0;
  font-size: 9px;
  line-height: 1.2;
}
.TextMessage span {
  opacity: 0;
}
.TextMessage span.revealed {
  opacity: 1;
}

.TextMessage_button {
  margin: 0;
  font-size: 8px;
  padding:0;
  -webkit-appearance: none;
  background:none;
  border:0;
  font-family: inherit;
  cursor: pointer;
  position: absolute;
  right: 2px;
  bottom: 0;
}

.TextMessage_option {
  margin: 0;
  font-size: 9px;
  line-height: 1.2;
  padding-left: 10px;
  position: relative;
  cursor: pointer;
}

.TextMessage_option:hover::before,
.TextMessage_option.active::before {
  content: ">";
  position: absolute;
  left: -1px;
}

.TextMessage_portrait {
  margin-right: 6px;
  background-size: cover;
  background-position: 0 0; /* Start with the first panel */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.TextMessage_portrait.talking {
  animation: talkingAnimation .25s steps(2) infinite; /* Switch between first and second panel */
}

.TextMessage_portrait.blinking {
  animation: blinkingAnimation 4s steps(2) infinite; /* Switch between first and third panel */
}

@keyframes talkingAnimation {
  0% {
    background-position: 0 0; /* Closed mouth */
  }
  100% {
    background-position: -64px 0; /* Open mouth */
  }
}

@keyframes blinkingAnimation {
  0% {
    background-position: 0 0; /* Closed mouth */
  }
  95% {
    background-position: 0 0; /* Closed mouth */
  }
  100% {
    background-position: -128px 0; /* Blinking */
  }
}