body {
    font-family: sans-serif;
    margin: 0; /* Remove default margin for better control */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

/* --- Control Buttons Styling (Optional but good for layout) --- */
.controls {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.controls button, .controls input {
    padding: 8px 15px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.controls input {
    min-width: 150px;
}

/* --- Video Container Styling --- */
.video-container {
    display: flex;
    flex-direction: column; /* Stack videos vertically on small screens by default */
    gap: 15px;
    width: 100%;
    max-width: 1200px; /* Max width for very large screens */
    margin: 0 auto; /* Center the container */
}

video {
    border: 1px solid black;
    background-color: #333; /* Dark background for empty video */
    width: 100%; /* Make video take full width of its parent */
    height: auto; /* Maintain aspect ratio */
    max-height: 70vh; /* Limit max height to prevent excessive scrolling */
    object-fit: contain; /* Or 'cover' if you prefer, 'contain' ensures whole video is visible */
    border-radius: 5px; /* Optional: rounded corners */
}

#localVideo {
    /* transform: scaleX(-1); /* Mirror local preview - keep if desired */
    /* By default, localVideo is display:none; it's shown by JS */
    max-width: 320px; /* Smaller preview for local video if shown */
    max-height: 240px;
    align-self: center; /* Center it if it's smaller */
}

/* --- Fullscreen Button (We'll add this via JS or HTML) --- */
.fullscreen-button {
    position: absolute; /* Position relative to the video element if nested */
    bottom: 10px;
    right: 10px;
    padding: 5px 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    z-index: 10; /* Ensure it's above the video */
}

.fullscreen-button:hover {
    opacity: 1;
}

/* --- Media Queries for Responsiveness --- */
@media (min-width: 768px) { /* For tablets and desktops */
    .video-container {
        flex-direction: row; /* Videos side-by-side */
        /* If you want one video larger than the other when side-by-side: */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
    }

    #remoteVideo {
        flex-grow: 1; /* Allow remote video to take more space if needed */
        /* max-height: 80vh; */ /* Adjust max height for larger screens */
    }

    #localVideo {
        /* If local video is shown alongside remote on desktop */
        /* It will already be smaller due to its own max-width/max-height */
        /* You might want to position it differently, e.g., picture-in-picture style */
        /* For now, it will just be a smaller video next to the larger remote one */
        align-self: flex-start; /* Align to top if side-by-side */
    }
}

/* --- Styling for when a video is in fullscreen --- */
/* These are browser-prefixed selectors for the fullscreen pseudo-class */
video:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain; /* Or 'cover' if you prefer for fullscreen */
}
video:-moz-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}
video:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}
video:fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* Optional: Hide other elements when something is fullscreen (if needed) */
/* body:has(video:fullscreen) .controls {
    display: none;
} */