.skeleton-text {
  background: #e9ecef;
  border-radius: 4px;
  height: 12px;
  animation: pulse 1.5s infinite;
}

.skeleton-circle {
  background: #e9ecef;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: pulse 1.5s infinite;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.sender-message {
  background-color: rgb(0, 123, 255); /* Bootstrap Primary Blue */
  color: white;

  .text-muted {
    color: #e3edf6 !important;
  }
  p {
    color: white !important;
  }
}
.receiver-message {
  background-color: #f8f9fa;
  color: black;
}