/* Resizer Styles */
.resizer {
    width: 12px; /* Increased width for better grab area */
    background: transparent;
    cursor: col-resize;
    z-index: 1000; /* Much higher to avoid overlap */
    transition: background 0.2s;
    flex-shrink: 0;
    position: relative;
    /* Negative margin to overlap adjacent borders for better UX */
    margin-left: -6px;
    margin-right: -6px;
}

/* Hide resizer when side panel is closed or on mobile */
.resizer#rightResizer {
    display: none;
    /* Absolute positioning for new overlay layout */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    transform: translateX(-50%);
}

/* Only show resizer on desktop when panel is open */
@media (min-width: 769px) {
    body:has(.side-panel.open) .resizer#rightResizer {
        display: block;
    }
}

/* Visual indicator for resizer */
.resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; /* Slightly wider visual line */
    height: 32px; /* Taller handle */
    background: var(--border-color);
    border-radius: 2px;
    transition: background 0.2s, height 0.2s, width 0.2s;
    opacity: 0.6;
}

.resizer:hover::after, .resizer.resizing::after {
    background: var(--primary);
    height: 100%;
    width: 2px; /* Thin line on active */
    opacity: 1;
}

.resizer:hover, .resizer.resizing {
    background: rgba(139, 92, 246, 0.05); /* Very subtle highlight on hover area */
}


/* Ensure sidebars don't have transitions while resizing to prevent lag */
.no-transition {
    transition: none !important;
}

/* Update Sidebar and Panel to support resizing */
.sidebar {
    /* min-width removed to allow collapsing */
    /* width is handled by style.css */
}

.side-panel {
    /* width is controlled by JS when open, but let's set min/max */
    /* min-width: 300px;  REMOVED to allow full closing */
    /* Only apply max-width on desktop to prevent mobile issues */
}

@media (min-width: 769px) {
    .side-panel {
        max-width: 800px;
    }
    .side-panel.open {
        min-width: 300px;
    }
}