.container {
    display: flex; /* Enables side-by-side layout */
    width: 100vw; /* Full viewport width */
    min-height: 100vh; /* Full viewport height */
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes default padding */
    /* overflow: hidden; Prevents scrolling issues */
}

/* Left Pane */
#leftPane {
    width: 50vw; /* Exactly half the viewport width */
    min-height: 100vh; /* Full height */
    /* background-color: yellow; Change as needed */
}

/* Right Pane */
#rightPane {
    width: 50vw; /* Exactly half the viewport width */
    min-height: 100vh; /* Full height */
    /* background-color: green; Change as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ensure body and html take full size without overflow */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    font-family:Arial, Helvetica, sans-serif
}


.topRightOverlay, .bottomLeftOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: rgb(254, 128, 55);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 10px;
    border-style: solid;
    border-color: rgb(254, 128, 55);
    transition: clip-path 0.5s ease-out;
}

.topRightOverlay {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}
.bottomLeftOverlay {
    clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
}

.welcome {
    position: absolute; /* Instead of absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}
input {
    width: 40vw; /* 2/5 of the screen width */
    margin-left: 1vw;
    text-align: left; /* Left-aligned text */
    background-color: white; /* Keep background white or customize */
    color: black; /* Text color */
    border: 2px solid blue; /* Blue border */
    border-radius: 12px; /* Rounded edges */
    padding: 5px 20px; /* Comfortable padding */
    font-size: 16px; /* Readable text */
    cursor: text;
}

button {
    width: 5%; /* 2/5 of the screen width */
    text-align: left; /* Left-aligned text */
    background-color: blue; /* Keep background white or customize */
    color: white; /* Text color */
    border: 2px solid blue; /* Blue border */
    border-radius: 12px; /* Rounded edges */
    padding: 5px 5px; /* Comfortable padding */
    font-size: 16px; /* Readable text */
    cursor: pointer; /* Indicates interactivity */
}

/* Optional: Hover effect for better UI feedback */
button:hover {
    background-color: lightblue;
    color: black;
}
#mainTitle {
    padding-top: 5vh;
    padding-left: 1vw;
    font-size: 3cap;
    color: blue;
}
#response, #log_container {
    margin-left: 1vw;
}
#image-container {
    display: flex;
    flex-direction: column; /* ✅ Stack images vertically */
    align-items: center;  /* ✅ Center images horizontally */
    width: 100%;  /* ✅ Make sure container fills rightPane */
}

#image-container img {
    width: 80%; /* ✅ Make images 80% of #rightPane */
    max-width: 100%; /* ✅ Ensure they don't overflow */
    height: auto; /* ✅ Keep aspect ratio */
    display: block; /* ✅ Removes extra spacing */
    margin-bottom: 10px; /* ✅ Add spacing between images */
}