:host {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.head {
  flex: 0 0 auto;
  box-sizing: content-box;
  margin: -3rem -3rem 0;
}

.messages-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;

  .messages-list {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    margin: 1rem -3rem;
    padding: 0 3rem;
    overflow-y: overlay;

    div {
      margin: 0.7rem 0;

      &.date {
        text-align: center;
      }

      &.my, &.buddy {
        position: relative;
        padding: 1.8rem;
        max-width: 60%;
      }

      &.buddy {
        align-self: flex-end;
      }
    }
  }

  .type-message {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: 4.2rem;

    .input-block {
      width: 100%;

      > textarea {
        min-height: 4.2rem;
      }
    }

    button {
      flex: 0 0 15rem;
    }
  }
}

