.dynamic-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    #object-fit: cover; /* Ensures the image covers the available space */

    object-fit: contain; /* Ensures the whole image is visible, adding letterboxing if necessary */
    object-position: center;
}





.ad-post-error {
    border: 2px solid red !important;
    background-color: #ffe6e6;
}





.az-messages {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add space between messages */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    flex-grow: 1; /* Allow the chat section to expand */
    padding: 10px; /* Add padding for better spacing */
    box-sizing: border-box; /* Include padding in the element's width/height */
}


.az-message {
    display: flex;
    align-items: flex-start; /* Ensure items align at the top */
    max-width: 70%; /* Set a maximum width for messages */
    word-wrap: break-word; /* Break long words to prevent overflow */
    margin-bottom: 10px;
}

.az-message.az-me {
    align-self: flex-end; /* Outgoing messages align to the right */
    text-align: right;
}

.az-message.az-cl {
    align-self: flex-start; /* Incoming messages align to the left */
    text-align: left;
}



.az-message .text {
    display: inline-block;
    max-width: 100%; /* Ensure the message doesn't exceed the container */
    word-break: break-word; /* Break words if they are too long */
    padding: 15px;
    border-radius: 20px;
}

.az-message.az-me .text {
    background: #f1f1f1;
    color: #000;
    margin-left: auto; /* Push the avatar to the left */
}

.az-message.az-cl .text {
    background: #704CFE;
    color: #fff;
    margin-right: auto; /* Push the avatar to the right */
}