/**
 * Chat Application Layout
 * Four-column flexbox structure: Project Sidebar | Main Content | Sources Panel | Outline Builder
 */

/* Main app container with multi-column layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

/* Project sidebar - left */
#project-sidebar {
    display: none;
    width: 200px;
    min-width: 200px;
    background: var(--card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#project-sidebar.visible {
    display: block;
}

#project-sidebar.collapsed {
    width: 50px;
    min-width: 50px;
    overflow-x: hidden;
}

#outline-builder.collapsed {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    overflow-x: hidden;
}

/* Main content area - left (chat interface) */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    order: 1;  /* First: Chat (leftmost) */
}

/* Sources panel - center */
#sources-panel {
    display: none;  /* Hidden by default when user not authenticated */
    flex: 0 0 320px;  /* Use flex-basis for reliable sizing */
    min-width: 200px;
    max-width: 600px;
    background: var(--card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    transition: width 0.2s ease;
    position: relative;
    order: 2;  /* Second: Sources (center) */
}

/* Show sources panel when user is authenticated */
#sources-panel.visible {
    display: flex;
    flex-direction: column;
}

/* Collapsed state - thin vertical bar */
#sources-panel.collapsed {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    overflow: hidden;
}

/* Resize handle */
#sources-panel .resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;  /* Increased from 4px for easier grabbing */
    background: transparent;
    cursor: ew-resize;
    z-index: 10;
    transition: background-color 0.2s;
}

#sources-panel .resize-handle:hover {
    background-color: var(--primary);
}

#sources-panel .resize-handle:active {
    background-color: var(--primary);
}

/* Outline builder - right sidebar */
#outline-builder {
    display: none;  /* Hidden by default when user not authenticated */
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    background: var(--card);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: relative;
    order: 3;  /* Third: Outline (rightmost) */
}

/* Show outline when user is authenticated and has content */
#outline-builder.visible {
    display: block;
}

/* Keep .active class for compatibility */
#outline-builder.active {
    display: block;
}

/* Laptop screens - hide project sidebar dropdown (now in header), keep 3-column layout */
@media (max-width: 1400px) {
    #project-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    
    #project-sidebar.visible {
        transform: translateX(0);
    }
}

/* Tablet screens - make sources and outline slide-over panels */
@media (max-width: 1024px) {
    #sources-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 999;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    
    #sources-panel.visible {
        transform: translateX(0);
    }
    
    #outline-builder {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(100%);
        box-shadow: var(--shadow-lg);
    }
    
    #outline-builder.visible {
        transform: translateX(0);
    }
}

/* Mobile - full width panels */
@media (max-width: 640px) {
    #project-sidebar,
    #sources-panel,
    #outline-builder {
        width: 100%;
        max-width: 100%;
    }
}

/* Dark mode */
body.dark-mode #project-sidebar,
body.dark-mode #sources-panel,
body.dark-mode #outline-builder {
    background: var(--card);
    border-color: rgba(255, 255, 255, 0.1);
}