/* =====================================================================
   Direct Messages: Pagination Loader & Ellipsis Dots Spinner
   ===================================================================== */

#loadMore {
  display: block;
  height: 25px;
  background-color: transparent;
  opacity: 0;
}

/* Warm Paper Shimmer Bar */
.loader {
  background-size: 300% 300%;
  background-image: linear-gradient(-90deg, #edebe6 0%, #f7f6f2 50%, #edebe6 100%);
  animation: loadAnim 2.5s ease-in-out 3;
}

@keyframes loadAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* =====================================================================
   Ellipsis Bouncing Dots
   ===================================================================== */

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  color: var(--accent, #4f46e5);                  /* Brand indigo dots */
  display: block;
  position: relative;
  width: 72px;
  height: 24px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}

.lds-ellipsis div {
  position: absolute;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 48px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes lds-ellipsis3 {
  0%   { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes lds-ellipsis2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(20px, 0); }
}