.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 100;
    top: 125%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.preview-area {
    /* Add your styling here to match the phone's message preview */
    min-height: 50px; /* Set a minimum height */
    width: 100%; /* Set the width you desire */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center the content vertically */
    justify-content: flex-end; /* Align content to the end (right side) */
    padding-right: 16px; /* Add some padding on the right */
    margin-top: 8px; /* Spacing from the text area */
    background: #f3f4f6; /* A light grey background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inner shadow for depth effect */
    font-family: 'Arial', sans-serif; /* Font styling */
    font-size: 16px; /* Adjust font size as needed */
    color: #333; /* Text color */
    overflow: hidden; /* Hide overflow */
}

.video-js .vjs-tech {
    border-radius: 0.5rem; /* Adjust the border-radius value as needed */
}