/* =========================================================
   window.css — the window image, the content box, the open animation
========================================================= */

.window {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1000px;
    height: 563px;
    transform: translate(-50%, -50%) scale(var(--ui-scale));
    transform-origin: center center;
    pointer-events: none;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
    z-index: 1000;
}

.window-content {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 560px;
    height: 420px;
    transform: translate(-50%, -50%) scale(var(--ui-scale));
    transform-origin: center center;
    display: flex;
    flex-direction: row;
    gap: 20px;
    z-index: 2000;
    pointer-events: auto;
}

.window-left-column {
    width: 170px;
    display: flex;
    flex-direction: column;
}

.window-right-column {
    flex: 1;
    display: flex;
}

@keyframes windowOpen {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(calc(var(--ui-scale) * 0.92));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--ui-scale));
    }
}

.window.is-opening {
    animation: windowOpen 280ms cubic-bezier(.22, 1, .36, 1) both;
}


/* fake scrollbar that lines up with the one drawn into the window art -
  synced to actual scroll position over in vn.js */

.scrollbar-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1000px;
    height: 563px;
    transform: translate(-50%, -50%) scale(var(--ui-scale));
    transform-origin: center center;
    pointer-events: none;
    z-index: 1500;   /* above the window frame, below the content box */
    opacity: 0;
    animation: contentFade .8s ease .15s forwards;
}

.scrollbar-overlay__track {
    position: absolute;
    left: 80.9%;
    width: 1.9%;
    top: 22.4%;
    height: 35%;
    pointer-events: auto;
    cursor: pointer;
}

.scrollbar-overlay__thumb {
    position: absolute;
    left: 0;
    width: 90%;
    background: #C7CBCC;
    border: 1.5px solid #494F4F;
    cursor: grab;
}

.scrollbar-overlay__thumb:active { cursor: grabbing; }