/* --- Cursors --- */
.cursor {
    position: absolute;
    user-select: none;
    /* transition is removed for more responsive feel during panning */
}

.cursor-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2b2b2b;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-top: 4px;
}

/* --- Trace Image --- */
#trace-image-container {
    /* Position relative to #world, which will scale and translate */
    position: absolute; /* Still absolute, but relative to its parent #world */
    opacity: 0.5; /* Default opacity, controlled by JS */
    z-index: 10;
    cursor: grab;
    border: 2px dashed #888;
    user-select: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    /* width, height, left, top will be set by JS in world coordinates */
    transform-origin: 0 0; /* Scaling relative to image top-left */
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#trace-image-container.dragging {
    cursor: grabbing;
}

/* Styles for when the trace image is fixed */
#trace-image-container.fixed {
    /* pointer-events is no longer the primary mechanism, but we keep it for consistency */
    cursor: auto; /* No longer draggable */
    border: 2px solid transparent; /* Keep border for layout, but make it invisible */
    box-shadow: none;
    animation: fix-image-pulse 0.4s ease-in-out;
    /* This is no longer the primary way to disable interaction, but we keep it as a fallback */
    pointer-events: none;
}

@keyframes fix-image-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#trace-image {
    display: block;
    width: 100%; /* Fill container */
    height: 100%; /* Fill container */
    object-fit: contain; /* Ensure image fits within bounds */
    pointer-events: none; /* Don't intercept clicks on image content */
}

/* Resize handles */
.resize-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #888;
    box-sizing: border-box;
    z-index: 12;
    touch-action: none; /* Important for preventing unintended scrolling/zooming */
}

#trace-image-container.fixed .resize-handle {
    display: none; /* Hide handles when fixed */
}

.resize-handle.top-left { top: -10px; left: -10px; cursor: nwse-resize; }
.resize-handle.top-right { top: -10px; right: -10px; cursor: nesw-resize; }
.resize-handle.bottom-left { bottom: -10px; left: -10px; cursor: nesw-resize; }
.resize-handle.bottom-right { bottom: -10px; right: -10px; cursor: nwse-resize; }

/* Pan controls for trace image */
.overlay-panel .pan-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.overlay-panel .pan-controls > div {
    display: flex;
    gap: 5px;
    align-items: center;
}

.overlay-panel .pan-btn {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 24px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.overlay-panel .pan-btn:hover {
    background-color: #e0e0e0;
}

.overlay-panel .pan-btn:active {
    background-color: #d0d0d0;
}

/* --- Layers --- */
#layer-list-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 5px;
}

#layer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background-color: #fff;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
}

.layer-item.active {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.layer-item.dragging {
    opacity: 0.5;
    background: #cce5ff;
}

.layer-preview {
    width: 60px;
    height: 40px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    flex-shrink: 0;
}

.layer-name {
    flex-grow: 1;
    font-size: 0.9em;
    color: #333;
}