/* AI Assistant Panel - Push/Compress Flex Layout */
/* Clean Cartography Light Theme */
/* CSS variables from static/css/themes/lsoet-theme-v2.css */

/* ------------------------------------------------------------------ */
/* App layout container                                                 */
/* ------------------------------------------------------------------ */

.app-layout {
    display: flex;
    height: calc(100vh - var(--nav-height, 48px));
    overflow: hidden;
    position: relative;
}

/* Main content area - compresses when panel opens */
.app-layout__main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Resize handle between main content and AI panel                      */
/* ------------------------------------------------------------------ */

.app-layout__resize-handle {
    width: 4px;
    cursor: col-resize;
    background: var(--border, #E8E6E1);
    flex-shrink: 0;
    display: none;
    position: relative;
}

.app-layout__resize-handle:hover,
.app-layout__resize-handle.dragging {
    background: var(--accent, #1B6B6D);
}

/* Three horizontal grip lines centered in the handle */
.app-layout__resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 -3px 0 currentColor, 0 3px 0 currentColor;
    color: var(--text-muted, #8A8A8A);
}

/* ------------------------------------------------------------------ */
/* AI panel                                                             */
/* ------------------------------------------------------------------ */

.app-layout__ai-panel {
    width: 0;
    border: none;
    overflow: hidden;
    transition: width 0.3s ease;
    flex-shrink: 0;
    background: var(--bg-surface, #FFFFFF);
}

/* ------------------------------------------------------------------ */
/* Open state modifiers                                                 */
/* ------------------------------------------------------------------ */

.app-layout--ai-open .app-layout__resize-handle {
    display: block;
}

.app-layout--ai-open .app-layout__ai-panel {
    width: var(--ai-panel-width, 420px);
}

/* ------------------------------------------------------------------ */
/* Loading bar                                                           */
/* ------------------------------------------------------------------ */

.app-layout__loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent, #1B6B6D);
    z-index: 10;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: opacity 0.2s;
}

.app-layout__loading-bar.active {
    opacity: 1;
    animation: loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes loading-shimmer {
    0%   { transform: scaleX(0); }
    50%  { transform: scaleX(0.7); }
    100% { transform: scaleX(1); }
}

/* ------------------------------------------------------------------ */
/* Mobile: hide panel and handle entirely                               */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .app-layout__resize-handle,
    .app-layout__ai-panel {
        display: none !important;
    }
}