/***************************** Webcam ********************************/
/* Floating container (NORMAL MODE: always 600px wide landscape) */
.class_TheAbs.BackWebcam {
    position: absolute;
    top: calc(100% - 360px);     /* starting near bottom */
    left: calc(50% - 300px);     /* centered horizontally */
    width: 600px;
    height: calc(600px * 9 / 16); /* EXACT LANDSCAPE HEIGHT = 337.5px */
    min-width: 600px;
    max-width: 100%;
    border-radius: 10px;
    background: #111;
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    overflow: hidden;
}

/* 900px mode */
.class_TheAbs.BackWebcam.Bigger900 {
    width: 900px;
    height: calc(900px * 9 / 16);
    left: calc(50% - 450px);
    top: calc(100% - (900px * 9 / 16) - 80px);
}
/* 1200px mode */
.class_TheAbs.BackWebcam.Bigger1200 {
    width: 1200px;
    height: calc(1200px * 9 / 16);
    left: calc(50% - 600px);
    top: calc(100% - (1200px * 9 / 16) - 80px);
}
/* Full-width mode */
.class_TheAbs.BackWebcam.BiggerFullScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 9; /* << The FIX: auto height based on width */
    height: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    background: #111;
    z-index: 9999;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* Inner container */
.class_TheRel.ContWebcam {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
}

/* TOP: Video area (strict landscape) */
.class_TheRel.WrapTopWebcam {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}


/* Video & Canvas always fill the box */
#id_WebcamVideo,
#id_CaptureCanvas {
    width: 100%;
    height: 100%;
    object-fit: contain !important;   /* ensures full wide view */
    object-fit: cover !important;  /* fills box */
    display: block;
    max-width: none;
    max-height: none;
}

/* Webcam color correction + background */
#id_WebcamVideo {
    filter:
        hue-rotate(-12deg)
        saturate(70%)
        brightness(110%)
        contrast(90%);
    background: black;                /* avoids artifacts around contain */
}

/* Blur cover overlay */
.class_TheAbs.WebcamCover {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: auto;
}

/* Bottom bar (controls) */
.class_RelFlex.WrapBottomWebcam {
    height: 80px;
    background: linear-gradient(to bottom, #bbb, #444);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
}

/* LEFT SIDE: Camera + mic selects */
.WebcamSelects {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

.WebcamSelects select {
    font-family: "Segoe UI", sans-serif;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid #555;
    background: #f8f8f8;
    color: #222;
    max-width: 180px;
    cursor: pointer;
}

/* Buttons */
#id_WrapBottomWebcam button {
    font-family: "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    background: transparent;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    gap: 6px;
}

#id_WrapBottomWebcam button:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #eaeaea 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Small screen fallback */
@media (max-width: 700px) {
    .class_TheAbs.BackWebcam {
        top: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        border-radius: 0;
        height: auto;
        aspect-ratio: 16 / 9;
        box-shadow: none;
    }
}
/***************************** Webcam ********************************/