.message {
  @apply flex flex-row flex-wrap justify-start;
}

.messageRight {
  @apply !justify-end;
}

.message .messageAvatar {
  @apply relative inline-flex items-center justify-center text-center align-middle h-9 w-9 rounded-full;
}

.message .messageBox {
  @apply relative w-fit max-w-[55%] px-2 py-[0.375rem] mx-3 my-2 rounded-lg bg-light;
}
:global(.dark) .message .messageBox {
  @apply !bg-dark;
}

.message .messageBox::after {
  content: "";
  border-bottom: 7px solid;
  @apply absolute top-0 right-full w-2 h-3 text-light rounded-bl-lg;
}
:global(.dark) .message .messageBox::after {
  @apply !text-dark;
}
.message.messageRight .messageBox::after {
  @apply !left-full !right-auto !rounded-bl-[0] !rounded-br-lg;
}