.message-container {
  @apply flex flex-1 overflow-hidden;

  .message-wrap {
    @apply mx-3 flex flex-1 flex-col overflow-hidden;

    .message-profile {
      @apply mb-1 flex w-full text-xs;
    }

    .bubble {
      @apply w-fit rounded-lg p-2.5;
      max-width: 60%;
      word-break: break-word;
      background-color: var(--chat-bubble);
    }

    .suffix {
      @apply ml-3 flex items-center;
    }
  }

  .menu-wrap {
    @apply flex w-fit items-center;
  }

  &-sender {
    @apply flex-row-reverse;

    .message-wrap {
      @apply items-end;

      .message-profile {
        @apply flex-row-reverse;
      }

      .bubble {
        background-color: var(--chat-bubble-sender);
      }

      .suffix {
        @apply ml-0 mr-3;
      }
    }

    .menu-wrap {
      @apply flex-row-reverse;
    }
  }
}

.animate-container {
  // background-color: var(--primary-active);
  animation: animate 2s ease-in-out;
}
@keyframes animate {
  from {
    background-color: var(--primary-active);
  }
  to {
    background-color: transparent;
  }
}

.card-shadow {
  @apply w-60 cursor-pointer overflow-hidden rounded-md shadow-md;
  box-shadow: 3px 3px 8px 1px rgba(81, 94, 112, 0.1);
}

.bubble {
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
