/* APP INTERFACE */
#ms-paint {
    border: 0.5px outset rgb(12, 12, 12);     /* Thin border around the entire container */
    width: 100%;                                /* Full width of the parent */
    display: block;                             /* Block display to occupy full width */
    box-sizing: border-box;                     /* Include border in the total width calculation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Light shadow */
}

#mspaint-bar {
    background-color: rgb(67,67,67);
    width: 100%;
    height: 31px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;   /* keep the chrome images from ever spilling onto the canvas */
}

.paint-img {
    height: 31px;
}

.paint-img-left  { float: left; }
.paint-img-right { float: right; }

.paint-img::selection {
    background: transparent;
}

#mspaint-body {
    width: 100%;
    height: 500px;
    background-color: rgb(242,242,242);
    /* misc effects */
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;   /* let the canvas own touch gestures instead of scrolling the page */
}

.pixel {
    position: absolute;
}

/* BUTTONS */
br, .paint-button {
    user-select: none;
}

.paint-button button {
    touch-action: manipulation;   /* drop the 300ms double-tap-zoom delay on touch */
}

#pointer-size-button {
    display: flex; /* Use flexbox */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

#pointer-icon {
    font-size: 6.25px; /* Adjust icon size, 35 is max */
}

.button-row {
    display: flex;
    justify-content: space-between; /* Push groups to the edges */
    align-items: center; /* Align buttons vertically (optional) */
    width: 100%; /* Make sure it spans the width of the parent */
}

.left-buttons, .right-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* SLIDERS */
.slider {
    margin-top: 17px;
    height: 10px;
}

#slider-title {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none; /* Prevent tooltip from interfering with mouse events */
    transform: translate(-50%, -150%); /* Position above the cursor */
    opacity: 0;
    transition: opacity 0.1s ease;
}

input[type="range"] {
    background: #ddd;
    border-radius: 5px;
    outline: none;
}

#zoom-slider {
    margin-top: 10px;
}

/* ===== RESPONSIVE ===== */
/* Breakpoints match the Phantom template (736px small, 480px x-small). */
@media screen and (max-width: 736px) {
    #mspaint-body {
        height: 340px;   /* a 500px canvas eats most of a phone screen */
    }

    /* At natural size the two chrome images total 366px and wrap onto a second
       row, pushing the right one down over the canvas. Scale them to fit. */
    .paint-img {
        height: 24px;
    }

    #mspaint-bar {
        height: 24px;
    }

    /* Let the toolbar wrap instead of pushing the sliders off-screen */
    .button-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .left-buttons, .right-buttons {
        flex-wrap: wrap;
        flex: 1 1 auto;
    }

    .right-buttons {
        justify-content: flex-end;
    }

    .slider {
        flex: 1 1 110px;
        min-width: 90px;
        max-width: 100%;
        margin-top: 0;   /* the wrapped rows already provide vertical spacing */
    }
}

@media screen and (max-width: 480px) {
    #mspaint-body {
        height: 280px;
    }

    .paint-img {
        height: 20px;
    }

    #mspaint-bar {
        height: 20px;
    }

    /* Full-width sliders read better than three cramped ones side by side */
    .slider {
        flex: 1 1 100%;
    }
}