.chat-thread { display: flex; flex-direction: column; position: relative; height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) - var(--chat-direct-message-creator-height, 0px) - env(safe-area-inset-bottom) ); .footer-nav-ipad & { height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) - var(--chat-direct-message-creator-height, 0px) - env(safe-area-inset-bottom) ); } &__header { height: var(--chat-header-offset); min-height: var(--chat-header-offset); border-bottom: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding-inline: 1rem; } &__body { overflow-y: scroll; @include chat-scrollbar(); margin: 2px; padding-right: 2px; box-sizing: border-box; flex-grow: 1; overscroll-behavior: contain; display: flex; flex-direction: column; } }