// Copyright (C) 2024 Intel Corporation
// SPDX-License-Identifier: Apache-2.0

@import "../../styles/styles";

.spacer {
  flex: 1 1 auto;
}

.conversationWrapper {
  @include flex(row, nowrap, flex-start, flex-start);
  flex: 1 1 auto;
  height: 100%;
  & > * {
    height: 100%;
  }
  .conversationContent {
    flex: 1 1 auto;
    position: relative;
    .conversationContentMessages {
      @include absolutes;
      // @include flex(column, nowrap, flex-start, flex-start);

      display: grid;
      grid-template-areas:
        "header"
        "messages"
        "inputs";

      grid-template-columns: auto;
      grid-template-rows: 60px auto 100px;

      .conversationTitle {
        grid-area: header;
        @include flex(row, nowrap, center, flex-start);
        height: 60px;
        padding: 8px 24px;
        border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
      }

      .historyContainer {
        grid-area: messages;
        overflow: auto;
        width: 100%;
        padding: 16px 32px;
        & > * {
          width: 100%;
        }
      }

      .conversationActions {
        // padding: --var()
        grid-area: inputs;
        padding: 18px;
        border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
      }
    }

    .conversationSplash {
      @include absolutes;
      @include flex(column, nowrap, center, center);
      font-size: 32px;
    }
  }
}
