$desktop-main-container-max-width: 1360px;
$desktop-main-container-min-height: 800px;
$desktop-main-container-item-width: 320px;
$desktop-main-container-item-center-width: 720px;
// $desktop-main-container-item-center-width: 1040px;

.desktop-layout-main-container {
  // border: 1px solid var(--color-divider, #e7efff);
  // border: 2px solid #6c38cc;
  // min-height: $desktop-main-container-min-height;
  // max-width: $desktop-main-container-max-width;
  // height: calc(100vh - 128px);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 auto;

  &__item-left {
    border-bottom: 1px solid var(--divider);
    flex: 1 1 $desktop-main-container-item-width;
    // max-width: $desktop-main-container-item-width
    height: 100%;
  }
  &__item-right {
    border: 1px solid var(--divider);
    flex: 1 0 $desktop-main-container-item-width;
    // max-width: $desktop-main-container-item-width
    width: 100%;
    height: 100%;
  }
  &__item-center {
    //border: 1px solid  var(--divider);
    border-style: solid;
    border-color: var(--divider, #e7efff);
    border-width: 1px 1px 1px 0;
    // flex: 3 2 $desktop-main-container-item-center-width;
    height: 100%;
    width: 100%;
    //  min-width: 320px;
  }
}

.dialog-leave-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 48px;
  gap: 8px;
}

.empty-chat-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.empty-chat-history-placeholder {
  justify-content: center;
  height: 100%;
}

@media only screen and (max-width: 430px) {

  .desktop-layout-main-container {
    display: block;
  }
}