.wa-message-preview {
    padding: 24px 18px;
    background-color: #E5DDD5;
    min-width: 280px;
    width: 280px;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;

    & .title {
        font-size: 16px;
        font-weight: 600;
        color: #0A0A0A;
        margin-bottom: 14px;
    }

    & .bubble,
    .bubble-carousel {
        background-color: #FFFFFF;
        border-radius: 8px;

        color: #565656;
        font-size: 14px;
        line-height: 21px;

        margin-bottom: 14px;
        padding: 14px 14px 4px 14px;

        & .message-html {
            max-width: 100%;
            white-space: pre;
            flex-wrap: wrap;
            word-break: break-word;
            white-space: pre-wrap;
        }

        & .clock {
            color: #565656;
            font-size: 10px;
            line-height: 15px;
            text-align: right;
            margin-top: 12px;
        }
    }

    & .bubble-carousel {
        padding: 0px;
        min-width: 244px;

        &.activated {
            min-width: 198px;
            max-width: 198px;
        }

        & .media-container {
            height: 141px;
            width: 100%;
            padding: 4px 4px 0px 4px;

            /* &.video {
                height: auto;
            } */
        }

        & .empty,
        img,
        video {
            height: 100%;
            border-radius: 8px;
            background-color: var(--c-gray, #FAFAFA);
            width: 100%;
        }

        & img {
            -o-object-fit: cover;
            object-fit: cover;
        }

        & video {
            height: auto;
            aspect-ratio: 16/9;
        }

        & .empty {
            display: -ms-grid;
            display: grid;
            place-items: center;
        }

        & .message {
            padding: 10px 14px 14px 14px;
            scroll-snap-align: start;
            min-height: 87px;

            overflow-wrap: break-word;
            white-space: break-spaces;
            max-width: 100%;
            max-height: 500px;
            overflow-y: auto;
        }

        & .button-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;

            & button {
                all: unset;
                border-radius: unset !important;
                border-top: 1px solid #ECECEC;
                padding-block: 10px;
                margin-inline: 14px;
                color: #007BFF;
                font-size: 14px !important;
                font-weight: normal !important;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                gap: 8px;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                overflow-wrap: anywhere;

                & svg {
                    min-width: 18px;

                }
            }
        }
    }

    & .carousel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overflow: -moz-scrollbars-none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    & #slider-container .nav-prev,
    #slider-container .nav-next {
        aspect-ratio: 1/1;
        height: 40px;
        width: 40px;
        border-radius: 100%;
        background-color: #FFFFFF;
        padding: 8px;
        position: absolute;
        top: 0;
        -webkit-box-shadow: 1px 7px 12px 0px #0000001A;
        box-shadow: 1px 7px 12px 0px #0000001A;

        cursor: pointer;
    }

    & #slider-container .nav-prev {
        left: 0;
        -webkit-transform: translateY(38px) translateX(-10px);
        -ms-transform: translateY(38px) translateX(-10px);
        transform: translateY(38px) translateX(-10px);
    }

    & #slider-container .nav-next {
        -webkit-transform: translateY(38px) translateX(10px);
        -ms-transform: translateY(38px) translateX(10px);
        transform: translateY(38px) translateX(10px);
        right: 0;
    }
}