body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; margin: 0; }
.container {
    max-width: 1600px; /* 👈 INCREASED to accommodate wider sidebars */
    margin: 20px auto;
    padding: 0 20px;
}
nav { background: #fff; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
nav a { text-decoration: none; color: #65676b; font-weight: 600; margin-left: 15px; }
.card { 
    background: #fff; 
    padding: 12px; /* 👈 Reduced from 20px */
    border-radius: 8px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    margin-bottom: 15px; 
}

.chat-messages { 
    height: 450px; /* 👈 Increased from 300px */
    overflow-y: auto; 
    border: 1px solid #e4e6eb; 
    padding: 8px; 
    background: #f8f9fa; 
    border-radius: 8px; 
    margin-bottom: 8px; 
}

/* Make inputs smaller too */
input, button { 
    padding: 8px; /* 👈 Reduced from 10px */
    border-radius: 6px; 
    border: 1px solid #dddfe2; 
    font-size: 0.9em; 
}
button { background: #1877f2; color: white; border: none; font-weight: bold; cursor: pointer; }

.badge {
    background-color: #fa3e3e !important;
    color: #fa3e3e !important;
    padding: 2px 6px; 
    border-radius: 50%;
    font-size: 0.7em; 
    font-weight: bold;
    display: inline-block;
    min-width: 12px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid white;
}

.toggle-btn {
    background: transparent !important; /* 👈 Added !important to override the global button style */
    color: #ccc !important;              /* 👈 Overriding global white text */
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 2px 5px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;                    /* 👈 Ensuring no shadow is inherited */
}

.toggle-btn:hover {
    background: transparent !important;
    color: #888 !important;
}

.sidebar-section {
    transition: all 0.3s ease;
}