:root {
  --full-height: 100vh;
  --app-height: 100svh;
  /* --safe-padding-bottom: 34.0px; for manage input box at mobile, by pass argument from mobile  */ 
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100% !important;
  width: 100%;
  overflow: hidden;
}

#purple-chat {
  height: var(--app-height);
}

.purple-chat-container {
  height: 100%;
}

.chat-widget-container {
  display: block !important;
  position: unset !important;
  max-width: 100% !important;
  height: 100%;
  opacity: 1 !important;
  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;
  transition: none !important;
  -webkit-transition: none !important;
}

.purple-chat-container > div {
  height: 100%;
}

.purple-chat-container .chat-widget-container > div {
  max-width: unset !important;
  display: flex;
  flex-direction: column;
  /* background-color: grey; */
  height: inherit;
}

.avatar-container,
.feather-chevron-down,
.chat-widget-header {
  display: none !important;
}

.purple-chat-container .chat-widget-container .chat-widget-body {
  display: flex;
  flex: auto;
}

.purple-chat-container
  .chat-widget-container
  .chat-widget-body
  .overflow-y {
  height: unset !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
  height: calc(var(--full-height) - 70px);
  max-height: calc(var(--app-height) - 70px) !important;
}

.purple-chat-container
  .chat-widget-container
  .chat-widget-body
  .overflow-y.is-banned {
  max-height: var(--app-height) !important;
}

.chat-widget-footer-container {
  flex: none;
}

.chat-widget-footer-container .chat-widget-footer {
  padding-bottom: calc(var(--safe-padding-bottom, 0px) + 15px) !important;
  /* box-sizing: content-box !important;
  height: 50px !important; */
  border-radius: 0 !important;
}

.purple-chat-container .chat-widget-container .feedback-container {
  height: 100% !important;
}

.purple-chat-container .chat-widget-container .queue-container {
  height: 100% !important;
}

#ph-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;
}

#ph-loading-container > div {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}
#ph-loading-container > div::before,
#ph-loading-container > div::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #cacaca;
  animation: prixClipFix 2s linear infinite;
}
#ph-loading-container > div::after {
  inset: 8px;
  transform: rotate3d(90, 90, 0, 180deg);
  border-color: #555555;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  75%,
  100% {
    clip-path: polygon(
      50% 50%,
      0 0,
      100% 0,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
}