@layoutMargin: 0px;

.layout {
  height: 100%;
  width: 100%;

  .container {
    height: 100%;
    width: 100%;
    margin: @layoutMargin;
    display: grid;
    grid-template-areas:
      "header"
      "content"
      "footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
  
    .header {
      grid-area: header;
    }
  
    .content {
      grid-area: content;

      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
  
    .footer {
      grid-area: footer;
    }

    .goToEndOfConversationButton {
    }
  }
}