/* Layout Components - Main Container, Footer */

/* Main Container - Full height layout */
.main-container {
        display: flex;
        min-height: calc(100vh - 40px); /* Account for footer only */
        min-height: calc(100dvh - 40px);
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
}

/* Chat Header - Integrated into right-content */
.chat-header {
        background-color: var(--bg-primary);
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 1rem;
        transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-left-section {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.header-brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease, color 0.2s ease;
        display: none; /* Hidden by default on desktop */
}

.sidebar-toggle:hover {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
}

/* Show sidebar toggle on mobile */
@media (max-width: 768px) {
        .sidebar-toggle {
                display: block;
        }
}

.header-center-section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
}

.header-right-section {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.header-right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

/* Right Content Column */
.right-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0; /* Prevent flex item from overflowing */
        max-width: 1200px; /* Prevent excessive stretching on large screens */
        margin-left: 280px; /* Account for sidebar width */
}

#chatTitle {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--header-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
}

#chatTitle:empty {
        display: none; /* Hide when empty */
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
        .chat-header {
                flex-direction: column;
                height: auto;
                padding: 0.5rem 1rem;
                align-items: flex-start;
        }

        .header-left-section {
                width: 100%;
                justify-content: space-between;
                margin-bottom: 0.5rem;
        }

        .header-center-section {
                width: 100%;
                justify-content: flex-start;
                padding: 0;
        }

        .header-right-section {
                position: absolute;
                top: 0.5rem;
                right: 1rem;
        }

        .main-container {
                min-height: calc(100vh - 40px); /* Account for footer only */
                min-height: calc(100svh - 40px); /* Use small viewport height on mobile */
                height: calc(100svh - 40px);
        }

        .header-right {
                gap: 0.25rem;
        }

        #chatTitle {
                font-size: 1rem; /* Smaller font on mobile */
                justify-content: flex-start;
        }

        /* Mobile: full width when sidebar closed */
        .right-content {
                width: 100%;
                margin-left: 0;
        }

        /* When sidebar is open on mobile, adjust right content */
        .left-sidebar.open ~ .right-content {
                width: 100%;
        }
}

/* Desktop: Integrated header layout */
@media (min-width: 769px) {
        /* Desktop: account for sidebar width */
        .right-content {
                margin-left: 0; /* Sidebar is already taking space */
        }
}