/* ============================================================
   SKETCH SELECT & TRANSFORM — Isolated Styles
   No modifications to existing sketch.css or drawing styles.
   ============================================================ */

/* --- Selection Overlay Canvas --- */
#canvas-select-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    /* Above canvas-mask (z:10) */
    pointer-events: none;
    /* Default: transparent to clicks */
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    display: none;
    /* Hidden by default — no blank white box */
    background: transparent;
    box-shadow: none;
}

#canvas-select-overlay.active-select,
#canvas-select-overlay.active-move {
    display: block;
    /* Show only when tool is active */
    pointer-events: auto;
    /* Intercept events when tool is active */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Cursor states */
#canvas-select-overlay.active-select {
    cursor: crosshair;
}

#canvas-select-overlay.active-move {
    cursor: default;
    /* Will be overridden by JS for grab/resize */
}

/* --- Desktop Tool Buttons (inside .qe-tools-row) --- */
#btn-tool-select.qe-tool-btn.active,
#btn-tool-move.qe-tool-btn.active {
    background: var(--surface-hover);
    border-color: var(--neon-green) !important;
    color: var(--text-white);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

/* --- Mobile Tool Strip Buttons --- */
#btn-ts-select.qe-m-tool.active,
#btn-ts-move.qe-m-tool.active {
    background: var(--surface-hover);
    color: var(--neon-green);
    border-color: var(--neon-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Remove 300ms tap delay on selection tool buttons */
#btn-tool-select,
#btn-tool-move,
#btn-ts-select,
#btn-ts-move {
    touch-action: manipulation;
}

/* iPad portrait only: slight gap between Eraser and Selection buttons */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #btn-ts-select {
        margin-top: 6px;
    }
}

/* --- Marching Ants Animation --- */
@keyframes marchingAnts {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 16;
    }
}

/* --- Handle Dots (rendered on canvas, but CSS for any HTML handles if needed) --- */
/* All handles are drawn directly on the overlay canvas for pixel-accuracy */

/* --- Transform Box Glow --- */
/* The transform box outline uses a subtle green glow matching the site theme */