/* ===========================================================
   Luna Chem Lab — Canvas Workspace v2
   Resize handles + Zoom cluster + Pan + Minimap + Fullscreen
   =========================================================== */

/* ────────────── Workspace wrapper ────────────── */
.canvas-workspace {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 420px;
    min-height: 300px;
    resize: both;              /* allow user to drag lower-right corner too */
    overflow: hidden;
}

/* Viewport clips the canvas at its current workspace size */
.canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;          /* IMPORTANT — zoom-transformed stage may overflow */
    border-radius: 14px;
    border: 1px solid rgba(34,211,238,0.22);
    background: #050510;
    isolation: isolate;        /* contain z-index stacks */
}

/* Stage = the scaled + translated inner layer (holds the actual <canvas>) */
.canvas-stage {
    position: absolute;
    left: 0; top: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.canvas-stage > #labCanvas {
    display: block;
    /* Fixed intrinsic size — scaling is done via .canvas-stage transform */
    width: 1000px;
    height: 600px;
    cursor: crosshair;
}

/* When panning or space-drag mode, show grab cursor */
.canvas-workspace.is-panning .canvas-stage > #labCanvas,
.canvas-workspace.is-space-down .canvas-stage > #labCanvas {
    cursor: grab !important;
}
.canvas-workspace.is-panning .canvas-stage > #labCanvas { cursor: grabbing !important; }

/* ────────────── 8-direction resize handles ────────────── */
.cr-handle {
    position: absolute;
    z-index: 40;
    background: transparent;
    transition: background 0.15s ease;
}
.cr-handle:hover { background: rgba(34,211,238,0.35); }
.cr-handle::after {
    /* Visual grabber shown on hover */
    content: '';
    position: absolute;
    background: var(--tone-primary, #22d3ee);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.cr-handle:hover::after { opacity: 0.85; }

/* Edges */
.cr-n, .cr-s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.cr-n { top: -3px; }
.cr-s { bottom: -3px; }
.cr-n::after, .cr-s::after { left: 50%; transform: translateX(-50%); width: 30px; height: 3px; top: 1.5px; }

.cr-e, .cr-w { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.cr-e { right: -3px; }
.cr-w { left: -3px; }
.cr-e::after, .cr-w::after { top: 50%; transform: translateY(-50%); width: 3px; height: 30px; left: 1.5px; }

/* Corners */
.cr-handle.cr-ne, .cr-handle.cr-nw, .cr-handle.cr-se, .cr-handle.cr-sw {
    width: 14px; height: 14px;
}
.cr-ne { top: -3px; right: -3px; cursor: nesw-resize; }
.cr-nw { top: -3px; left:  -3px; cursor: nwse-resize; }
.cr-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.cr-sw { bottom: -3px; left:  -3px; cursor: nesw-resize; }

.cr-ne::after, .cr-nw::after, .cr-se::after, .cr-sw::after {
    width: 10px; height: 10px; border-radius: 2px;
}
.cr-ne::after { top: 2px; right: 2px; }
.cr-nw::after { top: 2px; left:  2px; }
.cr-se::after { bottom: 2px; right: 2px; }
.cr-sw::after { bottom: 2px; left:  2px; }

/* Subtle always-visible hint on SE corner (primary grab handle) */
.cr-se {
    background:
        linear-gradient(135deg, transparent 40%, rgba(34,211,238,0.55) 45%, rgba(34,211,238,0.55) 55%, transparent 60%),
        linear-gradient(135deg, transparent 55%, rgba(34,211,238,0.55) 60%, rgba(34,211,238,0.55) 70%, transparent 75%);
    opacity: 0.8;
}

/* Resizing active state */
.canvas-workspace.is-resizing { user-select: none; }
.canvas-workspace.is-resizing .cr-handle { background: rgba(34,211,238,0.55) !important; }
.canvas-workspace.is-resizing .cr-handle::after { opacity: 1; }

/* ────────────── Zoom cluster (bottom-right corner buttons) ────────────── */
.cz-cluster {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(10,14,28,0.88);
    border: 1px solid var(--c-border-strong, rgba(34,211,238,0.45));
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 16px rgba(34,211,238,0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: 'Jua', 'Malgun Gothic', sans-serif;
    user-select: none;
}
.cz-btn {
    width: 30px; height: 26px;
    padding: 0 4px;
    background: transparent;
    color: var(--c-text, #e6e9ef);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.cz-btn:hover {
    background: rgba(34,211,238,0.18);
    border-color: rgba(34,211,238,0.4);
    color: var(--tone-primary, #22d3ee);
}
.cz-btn:active { transform: translateY(1px); }
.cz-btn.cz-level {
    width: 52px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--tone-primary, #22d3ee);
}
.cz-sep {
    width: 1px;
    height: 18px;
    background: var(--c-border-subtle, rgba(255,255,255,0.12));
    margin: 0 2px;
}
.cz-btn.active {
    background: rgba(34,211,238,0.25);
    border-color: var(--tone-primary, #22d3ee);
    color: var(--tone-primary, #22d3ee);
}

/* Light / glass theme variants */
:root[data-lab-theme="light"] .cz-cluster {
    background: rgba(255,255,255,0.96);
    border-color: rgba(14,138,138,0.28);
}
:root[data-lab-theme="light"] .cz-btn { color: #1A1F2E; }
:root[data-lab-theme="light"] .cz-btn:hover { background: rgba(14,138,138,0.1); color: #0E8A8A; }
:root[data-lab-theme="glass"] .cz-cluster {
    background: rgba(255,255,255,0.28);
    border-color: rgba(108,92,231,0.35);
}

/* ────────────── Minimap ────────────── */
.cz-minimap {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 184px;
    height: 114px;
    z-index: 44;
    padding: 2px;
    background: rgba(10,14,28,0.88);
    border: 1px solid var(--c-border-strong, rgba(34,211,238,0.45));
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
    cursor: crosshair;
}
.cz-minimap.visible { display: block; animation: cz-mm-fade 0.25s ease-out; }
@keyframes cz-mm-fade { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
.cz-minimap canvas {
    display: block;
    width: 100%; height: 100%;
    border-radius: 6px;
}
.cz-minimap-viewport {
    position: absolute;
    border: 2px solid var(--tone-primary, #22d3ee);
    background: rgba(34,211,238,0.12);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(34,211,238,0.5);
    border-radius: 2px;
    transition: all 0.1s linear;
}

/* ────────────── Fullscreen mode ────────────── */
.canvas-workspace.is-fullscreen {
    position: fixed !important;
    inset: 28px 0 0 0 !important;   /* below menubar */
    width: 100vw !important;
    height: calc(100vh - 28px) !important;
    z-index: 8000;
    background: var(--c-bg-page, #0a0a14);
    border-radius: 0;
    resize: none;
}
.canvas-workspace.is-fullscreen .canvas-wrap {
    border-radius: 0;
    border: 0;
}
.canvas-workspace.is-fullscreen .cr-handle { display: none; }

/* ────────────── Cursor mode indicators ────────────── */
.canvas-workspace.is-zoom-in .canvas-wrap  { cursor: zoom-in; }
.canvas-workspace.is-zoom-out .canvas-wrap { cursor: zoom-out; }

/* ────────────── Reduced motion ────────────── */
@media (prefers-reduced-motion: reduce) {
    .canvas-stage { transition: none !important; }
    .cz-minimap.visible { animation: none; }
}