.I-ChatBot {
  background-color: ghostwhite;
  padding: 0.5em;

  position: absolute;
  top: 6em;
  bottom: 4em;
  left: 1em;
  right: 1em;

  ul.ActionBar {
    list-style-type: none;
    margin: 0;
    overflow-y: scroll;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    li.Action {
      display: inline-block;
      margin: 0 0.5em;

      button, input {
        border: none;
        border-radius: 6px;
        outline: none;
        padding: 0.5em 1em;
      }

      button.GetStartedButton {
        background-color: antiquewhite;
      }

      button.ReplyButton {
        background-color: lightblue;
      }

      div.TextInput {
        input.Input {
        }

        button.Submit {
          background-color: lightblue;
          margin: 0 0.5em;
        }
      }
    }

  }

  ul.Messages {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0.5em;

    position: absolute;
    top: 0;
    bottom: 3em;
    left: 0;
    right: 0;

    li.Message {
      margin: 0.25em 0;

      div.Message-Animatable-Container {
        display: flex;
        position: relative;
        width: 100%;
      }

      div.Message-Content {
        border-radius: 6px;
        max-width: 60%;
        padding: 0.5em 1em;
        text-align: center;

        span {
        }

        div.Typing {
          background-color: lightgray;
          border-radius: 6px;
          display: table;
          padding: 0.5em 0;
          width: auto;

          span {
            background-color: darkgray;
            border-radius: 50%;
            float: left;
            height: 0.5em;
            margin: 0 0.2em;
            opacity: 0.4;
            width: 0.5em;
          }

          span:nth-of-type(1) {
            animation: 1s blink infinite 0.3333s;
          }

          span:nth-of-type(2) {
            animation: 1s blink infinite 0.6666s;
          }

          span:nth-of-type(3) {
            animation: 1s blink infinite 0.9999s;
          }

          @keyframes blink {
            50% {
              opacity: 1;
            }
          }
        }
      }
    }

    li.Message.Inbound {
      div.Message-Animatable-Container {
        align-items: flex-end;
        justify-content: flex-end;

        div.Message-Content {
          background-color: darkgray;
          color: white;
        }
      }
    }

    li.Message.Outbound {
      div.Message-Animatable-Container {
        align-items: flex-start;
        justify-content: flex-start;

        div.Message-Content {
          background-color: lightgray;
          color: black;
        }
      }
    }
  }

  /// Animations
  // - ActionBar
  .ActionBar-enter {
    transform: translate3d(0, 500%, 0);
  }

  .ActionBar-enter.ActionBar-enter-active {
    transform: translate3d(0, 0, 0);
    transition: all 500ms ease-out;
  }

  .ActionBar-exit {
    opacity: 1;
  }

  .ActionBar-exit.ActionBar-exit-active {
    opacity: 0;
    transition: all 300ms ease-out;
  }

  // - Messages
  .Messages-enter.Inbound {
    transform: translate3d(200%, 0, 0);
  }

  .Messages-enter.Outbound {
    transform: translate3d(-200%, 0, 0);
  }

  .Messages-enter.Messages-enter-active {
    transform: translate3d(0, 0, 0);
    transition: all 500ms ease-out;
  }

  .Messages-exit {
    opacity: 1;
  }

  .Messages-exit.Messages-exit-active {
    opacity: 0;
    transition: all 300ms ease-out;
  }

  // - Message-Content
  .Message-Content-enter {
    opacity: 0;
  }

  .Message-Content-enter.Message-Content-enter-active {
    opacity: 1;
    transition: all 500ms ease-out;
  }

  .Message-Content-exit {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
  }

  .Message-Content-exit.Message-Content-exit-active {
    opacity: 0;
    transition: all 300ms ease-out;
  }
}
