html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* prevent scrolling */
}

#snapshot-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* optional: black background */
}

#snapshot {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* scale image to fit container without distortion */
    display: block;
}

.overlay-input {
    position: absolute;
    border: none;            /* Remove the visible border */
    background: white; /* Fully transparent */
    caret-color: auto;       /* Keep caret visible when typing */
    font-size: 14px;
    padding: 0;              /* Remove padding so size matches snapshot element exactly */
    box-sizing: border-box;
    z-index: 10;             /* Ensure input is above the snapshot */
}