.message-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: fadeInUp 0.2s ease;
}

.message-item:hover {
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.message-item-active {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b4e62;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.message-sender i {
  font-size: 0.7rem;
  color: #6c86a3;
}

.message-bubble {
  background: #f1f5f9;
  padding: 10px 16px;
  border-radius: 20px;
  border-top-left-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1e293b;
  word-wrap: break-word;
  font-weight: 450;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.02);
}

.message-bubble p {
  margin: 0;
}


.badge {
  padding: 10px;
  border-radius: 15px;

  box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0 16px 16px -16px rgb(0 0 0 /10%);
  max-width: calc(100% - 60px);
  display: inline-block;
  overflow-wrap: break-word;
  /* modern standard */
  word-break: break-word
}

.outcoming span {
  border-radius: 18px 18px 0 18px;
}