/* Modal full-screen wrapper */
.pixelplot-modal {
    position: fixed;
    inset: 0;
    padding: 40px 16px;      /* space above & below + side padding for mobile */
    box-sizing: border-box;
    display: none;
    justify-content: center;
    align-items: flex-start; /* allow modal to honor top padding */
    overflow-y: auto;        /* allow scrolling if content is tall */
    z-index: 999999;
}

/* When opened */
.pixelplot-modal.show {
    display: flex;
}

/* Dark overlay */
.pixelplot-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: -1; /* keep it behind the modal content */
}

/* Modal content box */
.pixelplot-modal-content {
    position: relative;
    background: #0f0f1a;
    border-radius: 18px;
    width: 100%;
    max-width: 650px;

    /* Prevent modal from being taller than viewport */
    max-height: calc(100vh - 80px); /* 40px top + 40px bottom */
    overflow-y: auto; /* inner scroll if needed */

    box-shadow: 0 0 35px rgba(153,102,204,0.4);
}

/* Sticky Close Button */
.pixelplot-modal-close {
    position: sticky;
    top: 12px;
    right: 18px;
    margin-left: auto;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 20;
    display: block;
}

/* Modal inner padding */
.pixelplot-modal-inner {
    padding: 2rem;
    box-sizing: border-box;
}

/* Custom dark scrollbar for modal */
.pixelplot-modal-content::-webkit-scrollbar {
    width: 10px;
}

.pixelplot-modal-content::-webkit-scrollbar-track {
    background: #0f0f1a; /* modal background color */
    border-radius: 10px;
}

.pixelplot-modal-content::-webkit-scrollbar-thumb {
    background: #181828; /* slightly lighter than modal bg */
    border-radius: 10px;
    border: 2px solid #0f0f1a; /* blends into track */
}

.pixelplot-modal-content::-webkit-scrollbar-thumb:hover {
    background: #2c2c3a; /* highlight on hover */
}

/* Firefox scrollbar */
.pixelplot-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #181828 #0f0f1a;
}