/* 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;
    }
}

/* --- NEW Tool Panel Resizer Logic --- */
.tool-panel-resizer {
    display: none; /* Default hidden */
}

@media (min-width: 1024px) {
    .tool-panel-resizer {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 12px;
        right: var(--tool-panel-width, 450px);
        transform: translateX(50%); /* Center over edge */
        background: transparent;
        cursor: ew-resize; /* East-West resize */
        z-index: 7000; /* Above panels (6000) */
        display: none; /* JS or :has() will toggle */
    }

    /* Show resizer when any relevant panel is active (not hidden) */
    /* Using :has() for modern browsers */
    body:has(.diary-app:not(.hidden)), 
    body:has(.file-app:not(.hidden)) .tool-panel-resizer {
        display: block;
    }

    /* Fallback for older browsers: JS can toggle a class on body */
    body.tool-panel-open .tool-panel-resizer {
        display: block;
    }

    .tool-panel-resizer::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 32px;
        background: var(--border-color);
        border-radius: 2px;
        transition: all 0.2s;
        opacity: 0.6;
    }

    .tool-panel-resizer:hover::after,
    .tool-panel-resizer.active::after {
        background: var(--primary);
        height: 100%;
        width: 2px;
        opacity: 1;
    }
    
    .tool-panel-resizer:hover,
    .tool-panel-resizer.active {
        background: rgba(37, 99, 235, 0.05);
    }
}