.stopchat {
  background-color: #f44336; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.message { margin-bottom: 5px; }

.typing { font-style: italic; color: gray; }
  
/* Container for video layout */
    .video-container {
        width: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    /* Video Wrapper */
    #remote {
        width: 96%;
        height: 240px;
        background: #4a4a4a;
        border-radius: 10px;
        position: relative;
        overflow: hidden; /* Ensures border-radius applies to video */
    }
    
    #local {
        width: 96%;
        margin-top: 7px;
        height: 240px;
        background: #4a4a4a;
        border-radius: 10px;
        position: relative;
        overflow: hidden; /* Ensures border-radius applies to video */
    }

    /* Actual Video Element */
    video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Makes video fill the container properly */
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px; /* Ensures the video follows the rounded corners */
    }

    /* Branding inside remote */
    .brand-logo {
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: orange;
        font-family: sans-serif;
        z-index: 2; /* Ensures watermark stays above video */
        pointer-events: none; /* Prevents interaction issues */
    }

    /* Mobile View: Local video overlays at the top right */
    @media (max-width: 768px) {
        .video-container {
            align-items: center; /* Prevents stretching */
        }
        
        #local {
            width: 100px;
            height: 80px;
            position: absolute;
            top: 5px;
            right: 40px;
            margin-top: 5px;
            border: 1px solid #ffffff;
        }
        
        #remote {
        width: 85%;
        height: 250px;
        background: #4a4a4a;
        border-radius: 10px;
        position: relative;
        overflow: hidden; /* Ensures border-radius applies to video */
    }
    }