html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Crucial: Prevents scrolling on the body */
    height: 100%; /* Ensure html and body take full viewport height */
    font-family: sans-serif;
    display: flex; /* Use flexbox for body to stack content */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: stretch; /* Stretch children to fill width */
    background-color: #f0f0f0;
}

.paint-container {
    display: flex;
    flex-direction: column; /* Controls above canvas */
    flex-grow: 1; /* Allow container to grow and fill available space */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Contain any overflowing content within this container */
    margin: 10px; /* Optional: Add some margin around the app */
}

.controls {
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap; /* Allow controls to wrap onto multiple lines if needed */
    flex-shrink: 0; /* Prevent controls from shrinking */
    background-color: #f5f5f5; /* Slightly different background for controls */
}

canvas {
    display: block;
    border-top: 1px solid #eee;
    background-color: #fff;
    /* Canvas itself should take remaining space */
    flex-grow: 1; /* Allows canvas to take up all remaining vertical space */
    width: 100%; /* Ensures canvas always fills its parent's width */
    height: auto; /* Height will be managed by JS based on flex-grow */
    -webkit-tap-highlight-color: transparent; /* For iOS */
    user-select: none; /* Prevent text selection issues */
    touch-action: none; /* Prevents default touch actions like pan/zoom/scroll */
}

/* Optional: Media query for small screens/landscape to adjust control layout */
@media (max-width: 768px) and (orientation: landscape) {
    .controls {
        flex-direction: row; /* Keep controls in a row for more horizontal space */
        justify-content: center; /* Center them horizontally */
        flex-wrap: wrap; /* Still allow wrapping */
        padding: 5px; /* Smaller padding */
        gap: 5px; /* Smaller gap */
    }
    .controls input, .controls select, .controls button {
        padding: 6px 10px; /* Adjust padding for smaller buttons */
        font-size: 0.8em; /* Smaller font size */
    }
}
#eraserBtn.active {
    background-color: #ffcccc; /* Light red/pink to show it's active */
    border-color: #ff0000;
    font-weight: bold;
}
/* Ensure mobile browser UI (address bar, etc.) doesn't cause issues */
/* This is a common trick, but needs careful testing */
body {
  min-height: -webkit-fill-available; /* For Safari on iOS */
}
html {
  min-height: 100vh;
}