/* Clean Layout CSS - Based on the working demo-layout.html */

:root {
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --secondary-color: #10b981;
    --text-color: #333;
    --light-text: #666;
    --bg-color: #fff;
    --light-bg: #f9fafb;
    --sidebar-bg: #1a202c;
    --sidebar-text: #e2e8f0;
    --border-color: #e5e7eb;
}

/* Reset styles */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Main app layout - Three Column Structure */
.chat-app {
    display: flex !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Left sidebar */
.nav-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

/* Main chat area */
.chat-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: white !important;
    height: 100vh !important;
}

/* Right sidebar */
.info-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    background-color: var(--light-bg) !important;
    border-left: 1px solid var(--border-color) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

/* Info sidebar sections */
.info-sidebar-section {
    padding: 15px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.info-sidebar-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

/* Dashboard menu */
.dashboard-menu h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.dashboard-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.dashboard-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    color: var(--light-text) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.dashboard-nav-item:hover, .dashboard-nav-item.active {
    background-color: rgba(37, 99, 235, 0.1) !important;
    color: var(--primary-color) !important;
}

/* Case info */
.case-info-item {
    margin-bottom: 10px !important;
}

.case-info-label {
    font-size: 0.85rem !important;
    color: var(--light-text) !important;
    margin-bottom: 4px !important;
}

.case-info-value {
    font-weight: 500 !important;
}

/* Progress bar */
.progress-bar {
    height: 8px !important;
    background-color: #e5e7eb !important;
    border-radius: 4px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

.progress {
    height: 100% !important;
    background-color: var(--secondary-color) !important;
    border-radius: 4px !important;
}

/* Fix for Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .chat-app {
        display: -webkit-box !important;
        -webkit-box-orient: horizontal !important;
    }
    
    .nav-sidebar {
        -webkit-box-flex: 0 !important;
        width: 280px !important;
    }
    
    .chat-main {
        -webkit-box-flex: 1 !important;
    }
    
    .info-sidebar {
        -webkit-box-flex: 0 !important;
        width: 280px !important;
    }
}