:root {
  --bg-line-white: linear-gradient(90deg, transparent, #f8faff);
  --bg-line-purple: #f5f6fc;
}
.media-pad{
  .MessageList,
  .ChatFooter{
    padding: 12px !important;
  }
}
@media (min-width: 768px) {
  .media-pad{
    .MessageList,
    .ChatFooter{
      padding: 12px 30px !important;
    }
  }
}
@media (min-width: 1024px) {
  .media-pad{
    .MessageList,
    .ChatFooter{
      padding: 12px 60px !important;
    }
  }
  .right-show-pad{
    .MessageList,
    .ChatFooter{
      padding-right: 540px !important;
    }
  }
  .right-hidden-pad{
    .MessageList,
    .ChatFooter{
      padding-right: 60px !important;
    }
  }
}

.ChatApp {
  padding: 0;
  background: transparent;
  line-height: normal !important;
  align-items: center;
  .Navbar {
    align-self: flex-start;
    width: 100%;
    background-color: #f8f9fa;
  }
  .MessageContainer {
    width: 100%;
    background-color: transparent;
    .MessageList {
      padding: 0;
      .Bubble {
        position: relative;
        /* padding: 10px 20px; */
        color: rgba(var(--color-text-midd), 0.9);
        &[data-type="custom"],
        &[data-type="combine"] {
          @apply !DS-GA-bg-transparent;
        }
        &[data-type="markdown"],
        &[data-type="text"] {
          @apply DS-GA-p-4;
        }
      }
      .Avatar {
        @apply DS-GA-bg-white DS-GA-border-0;
        > * {
          line-height: 2.75rem;
          @apply DS-GA-h-11 DS-GA-w-11;
        }
      }
    }
    .PullToRefresh {
      overflow-y: auto;
      .PullToRefresh-inner {
        padding-bottom: var(--gutter);
      }
    }

    .Message-main {
      .Message.left {
        .Message-content {
          .Bubble {
            min-width: 160px;
            min-height: 40px;
          }
        }
      }
    }
  }
  .ChatFooter {
    width: 100%;
    background-color: transparent;
    .Composer {
      /* display: none; */
      .Composer-sendBtn {
        background: rgb(var(--color-theme-shal));
      }
      .composer-icon i {
        cursor: pointer;
      }
    }
  }
}

.Message + .Message {
  margin-bottom: var(--gutter);
}

.Message.right {
  .Message-main > .Avatar {
    /* margin-left: 12px; */
    margin-right: 0 !important;
    margin-left: 12px;
  }
}

.Message.left {
  .Message-main > .Avatar {
    /* margin-left: 12px; */
    margin-left: 0 !important;
    margin-right: 12px;
  }
}