header {
  width: 100svw;
  height: var(--height-header);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-header-footer);
  border-bottom: var(--width-border) solid var(--color-border);
  color: var(--color-text);
}

#middleContainer {
  position: relative;
  width: 100%;
  /* height: 100%; */
  display: flex;
}

.middle-column {
  position: absolute;
  width: var(--width-chat);
  left: calc(50% - 0.5 * var(--width-chat));
}

#chatColumn {
  height: 100%;
}

#chatContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  padding-left: var(--padding-container);
}

#recommendationsColumn {
  width: 100%;
  left: 0;
}
@media only screen and (min-width: 992px) {
/* Desktop view */
  #recommendationsColumn {
    height: 100%;
    display: flex;
    width: calc(50svw - 0.5 * var(--width-chat));
    left: calc(50svw + 0.5 * var(--width-chat));
    padding: 0 0.5em;
  }
}