una/modules/boonex/messenger/template/css/tailwind/components/attachment.css

div.bx-messenger-attachment-file-images img {
    @apply float-left mt-1 cursor-zoom-in rounded;
}

.bx-messenger-attachment-file {
    @apply float-left overflow-hidden text-6xl rounded border-2 border-gray-900 dark:border-white p-2 relative
    max-w-[320px] w-full flex items-center;
}

.bx-messenger-attachment-file-wrapper {
    @apply w-full overflow-hidden flex mb-2;
}

.bx-messenger-attachment-accordion {
    @apply text-xs flex space-x-2 p-[0.325rem] w-fit items-center;
}

.bx-messenger-attachment {
    @apply overflow-hidden relative m-2 w-auto pl-3;
}

.bx-messenger-attachment-area {
    @apply max-w-full flex flex-col;
}

.bx-messenger-attachment-file-videos,
.bx-messenger-attachment-file-images,
.bx-messenger-attachment-file-audio
{
    @apply w-full text-left mb-2 overflow-hidden max-w-[80%];
}

.bx-messenger-media-wrapper {
   @apply w-full mb-2;
}

div.bx-messenger-attachment-header span.bx-messenger-attachment-author-icon img
{

    width:1rem;
    height:1rem;
    top: 4px;
    position: relative;
}

div.bx-messenger-attachment div.bx-messenger-attachment-author-message
{
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 1;
    white-space:pre-line;
}

div.bx-messenger-attachment-footer
{
    text-transform:lowercase;
}

div.bx-messenger-attachment-footer span.type
{
    border-right:1px solid rgba(0,0,0,0.1);
    padding-right:0.2rem;
}

.bx-messenger-attachment-files
{
    position: relative;
    margin-top: 0.5rem;
    width: auto;
    white-space:normal;
}

.bx-messenger-attachment-group{
    display: none;
    flex-direction: column;
}

.bx-messenger-attachment-file-wrapper a
{
    color:inherit;
}

.bx-messenger-attachment-file i
{
    float:left;
    margin: 0.3rem;
}
div.bx-messenger-attachment-file-videos span.delete,
div.bx-messenger-attachment-file-images span.delete
{
    position:absolute;
    top:2.9rem;
    right:0;
    opacity:inherit;
}

div.bx-messenger-attachment-file-wrapper span.delete
{
    position: absolute;
    right:0;
    opacity:inherit;
}

.bx-messenger-attachment-file-info
{
    overflow:hidden;
    opacity:1;
}

.bx-messenger-attachment-file-info span
{
    font-size:1rem;
    float:left;
    margin: 0.3rem;
    width:100%;
}

div.bx-messenger-attachment-file-download
{
    position:absolute;
    right:0;
    bottom:0;
    font-size:1rem;
    margin:0.3rem;
}

div.bx-messenger-attachment-file-images span.title
{
    width:100%;
    overflow:hidden;
    text-align:left;
    opacity:1;
    float:left;
    margin-top:1rem;
    padding:0.3rem;
}

div.bx-messenger-attachment-temp-video img,
div.bx-messenger-attachment-file-audio audio
{
    max-width: 480px;
    width: 90%;
    float: left;
    margin-top: 0.3rem;
    border-radius:0.2rem;
}

div.bx-messenger-attachment-file-videos video.bx-player-plyr{
    width:100%;
}

div.bx-messenger-attachment-file-audio .audio{
    display: flex;
    flex-direction: column;
    justify-content: left;
}

div.bx-messenger-attachment-file-audio .audio > span{
    margin:0.3rem;
}

div.bx-messenger-attachment-file-audio .audio .title{
    font-weight: bold;
}

div.bx-messenger-attachment-file-audio .audio .file img{
    max-height:3rem;
}