<div class="container">
  <div id="messages"></div>
  <form id="form">
    <input id="form-text" type="text" placeholder="Insulte-o por aqui..." autocomplete="off" />
    <button id="form-button" type="submit">
      <i class="fas fa-paper-plane"></i>
    </button>
  </form>
</div>

$color: #8e44ad;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, Arial, sans-serif;
  font-size: 1em;
  
  &::selection {
    color: white;
    background-color: $color;
  }
}
html,
body {
  padding: 15px;
  height: 100%;
  background-image: linear-gradient(-45deg, #8e44ad, #5e7083);
}
.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 30px;
  max-width: 400px;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .125);
  background-color: #d5d5d5;

  #messages {
    padding: 0 10px; // Corrige problema com overflow.
    flex: 1;
    overflow-y: auto;
  }
  #form {
    display: flex;
    padding-top: 20px 10px;
    
    &-text {
      flex: 1;
      padding: 15px 25px;
      margin-right: 5px;
      border-radius: 50px;
      border: solid 1px #ccc;
      outline: none;
      box-shadow: inset -1px -1px 5px 1px #eee, 1px 1px 5px 1px #bbb;
    }
    &-button {
      padding: 15px;
      border-radius: 50%;
      border: solid 1px #ccc;
      box-shadow: 1px 1px 5px 1px #bbb;
      outline: none;
      cursor: pointer;
      background-color: #d35400;
      color: white;
      
      &:hover {
        background-color: lighten(#d35400, 2.5%);
      }
      &:active {
        background-color: lighten($color, 5%);
      }
    }
  }
  
  .msg {
    display: block;
    margin-bottom: 10px;
    
    &.left {
      text-align: left;
      
      .text {
        box-shadow: inset -1px -1px 5px 1px #eee, 1px 1px 5px 1px #bbb;

        &::before {
          left: 0;
          border-right-color: white;
          transform: translate(-100%, -50%);
        }
      }
    }
    &.right {
      text-align: right;

      .text {
        box-shadow: inset 1px 1px 5px 1px #eee, -1px -1px 5px 1px #bbb;

        &::before {
          right: 0;
          border-left-color: white;
          transform: translate(100%, -50%);
        }
      }
    }
  }
  .text {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: white;
    
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      top: 50%;
      border: solid 5px transparent;
    }
  }
}

$(document).ready(() => {
  sendBotMsg('Oi, humano, tudo bem?')
  sendBotMsg('Desafio que você me xingue!')
  sendUserMsg('Seu filho da *!')

  // Cria filtro de palavrões.
  var piii = new Piii({
    filters: [
      ...Object.values(piiiFilters)
    ]
  })

  // Ao enviar a mensagem...
  $('#form').on('submit', (event) => {
    event.preventDefault()
    const msg = $('#form-text').val()

    if (msg) {

      // Filtra os palavrões e envia a mensagem.
      sendUserMsg(piii.filter(msg))
      $('#form-text').val('')
    }
  })
})

function logMsg(msg, direction) {
  const $msg = $('<div>').addClass(['msg', direction])
  const $text = $('<div>').addClass('text')
  const $p = $('<p>').text(msg)
  
  $('#messages').append($msg.append($text.append($p)))
}

function sendBotMsg(msg) {
  logMsg(msg, 'left')
}

function sendUserMsg(msg) {
  logMsg(msg, 'right')
}