@import '@/styles/common.less';
@import '@/styles/variables.less';

.page-message-chat {
  height: 100vh;
  background: #FFFFFF;

  &__loading {
    position: fixed;
    top: 0;
    background: #F5F6FA;
    z-index: 999;
  }

  &__header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 120px;
    .flex-row();
    padding: 0 32px;
    box-sizing: border-box;
    background: #FFFFFF;

    &__reject {
      .button(@height: 72px; @fontSize: 28px; @borderRadius: 48px; @highlight: 0);
      flex: 1;
      margin-right: 26px;
      
      &.highlight {
        color: @blColorG1;
        background: #F7F7F7;
      }
    }

    &__exchange {
      .button(@height: 72px; @fontSize: 28px; @borderRadius: 48px;);
      flex: 1;
    }
  }

  &__chat {
    width: 100%;
    height: calc(100vh - 120px - 112px - env(safe-area-inset-bottom));
    background: #F5F6FA;
    margin-top: 120px;
    padding-top: 20px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }

  &__chat-list {
    height: 100%;
  }

  &__footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  &__input-container {
    .flex-row();
    padding: 20px 32px;
    background: #FFFFFF;
  }

  &__expand-icon {
    width: 64px;
    height: 64px;
    margin-right: 32px;
  }

  &__input {
    min-height: 40px;
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    padding: 16px;
    color: @blColor;
    background: #F7F7F8;
    border-radius: 16px;
    box-sizing: border-box;
    white-space: wrap;
  }

  &__send-button {
    .button(@width: 120px; @height: 64px; @fontSize: 28px; @borderRadius: 48px;);
    margin-left: 32px;
  }

  &__more {
    .flex-row();
    padding: 12px 32px 32px;
    background: #FFFFFF;

    &__item {
      .flex-column();

      &__icon-wrapper {
        width: 124px;
        height: 124px;
        .flex-row();
        justify-content: center;
        background: #F3F3F5;
        border-radius: 20px;
      }

      &__icon {
        width: 56px;
        height: 56px;
      }

      &__text {
        font-size: 24px;
        line-height: 34px;
        font-weight: 400;
        color: @blColor;
        margin-top: 8px;
      }
    }
  }
}