/* Overlay */
.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    z-index: 9999;
    display: grid;
    grid-template-rows: auto 1fr;
    opacity: 0;
    transition: opacity .15s ease;
}

.zoom-overlay.show {
    opacity: 1;
}

/* Toolbar */
.zoom-toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
    padding: .5rem .75rem;
    color: #e5e7eb;
    user-select: none;
}

.zoom-btn {
    background: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: .25rem .5rem;
    font-size: .875rem;
    cursor: pointer;
}

.zoom-btn:hover {
    background: #1f2937;
}

/* Viewport + panning surface */
.zoom-viewport {
    position: relative;
    overflow: hidden; /* important: keeps scrollbars off; we'll pan ourselves */
    display: grid;
    place-items: center; /* centers when smaller than viewport */
}

.zoom-canvas {
    transform-origin: 0 0; /* we’ll translate+scale from top-left math */
    will-change: transform;
    cursor: grab;
}

.zoom-canvas.dragging {
    cursor: grabbing;
}

/* Limit max size when fitting */
.zoom-media {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
}

/* Make inline SVG shrink nicely in the popup */
.zoom-canvas svg {
    height: auto;
    width: auto;
}

/* Clickable diagrams before opening */
.zoomable {
    cursor: zoom-in;
}