/* B"H - VIBE LAYOUT (Absolute Fluidity & Resize Fixes) */

#vibe-editor-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-bg-deep);
}

.vibe-container {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Default CSS Variables for layout control via JS */
    --side-panel-width: 400px;
    --chat-panel-basis: 60%; /* Adjusted default for mobile */
}

.vibe-chat-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; 
}

.vibe-side-panel {
    background-color: var(--color-bg-secondary);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; 
}

.vibe-resizer {
    width: 8px;
    cursor: col-resize;
    background: var(--color-bg-deep);
    z-index: 100;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    transition: background 0.2s;
}
.vibe-resizer:hover { background: var(--neon-cyan); }

.vibe-resizer-horizontal {
    height: 12px;
    cursor: row-resize;
    background: var(--color-bg-deep);
    z-index: 100;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s;
}
.vibe-resizer-horizontal:hover { background: var(--neon-cyan); }

/* B"H --- MOBILE RESPONSIVE (Stacked Top/Bottom) --- */
@media (max-width: 768px) {
    .vibe-container {
        flex-direction: column;
    }
    .vibe-chat-panel {
        flex: none !important; 
        height: var(--chat-panel-basis, 60%) !important;
        width: 100% !important;
    }
    .vibe-side-panel {
        flex: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
    .vibe-resizer { display: none !important; }
    .vibe-resizer-horizontal { display: block !important; }
}

/* B"H --- DESKTOP RESPONSIVE (Side-by-side Left/Right) --- */
@media (min-width: 769px) {
    .vibe-container {
        flex-direction: row;
    }
    .vibe-chat-panel {
        flex: 1 !important;
        height: 100% !important;
    }
    .vibe-side-panel {
        flex: none !important;
        width: var(--side-panel-width, 400px) !important;
        height: 100% !important;
    }
    .vibe-resizer-horizontal { display: none !important; }
    .vibe-resizer { display: block !important; }
}

/* B"H --- STATE OVERRIDES --- */
.vibe-container.panel-maximized .vibe-chat-panel,
.vibe-container.panel-maximized .vibe-resizer,
.vibe-container.panel-maximized .vibe-resizer-horizontal {
    display: none !important;
}

.vibe-container.panel-maximized .vibe-side-panel {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
}

@media (min-width: 769px) {
    .vibe-container.panel-minimized .vibe-side-panel {
        width: 40px !important;
        flex: 0 0 40px !important;
    }
    .vibe-container.panel-minimized .vibe-resizer {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .vibe-container.panel-minimized .vibe-chat-panel {
        height: calc(100% - 40px) !important;
    }
    .vibe-container.panel-minimized .vibe-side-panel {
        height: 40px !important;
        flex: 0 0 40px !important;
    }
    .vibe-container.panel-minimized .vibe-resizer-horizontal {
        display: none !important;
    }
}