/* style.css */
:root {
    --bg-main: #1e1e1e;
    --bg-sidebar: #171717;
    --text-primary: #ffffff;
    --text-secondary: #b4b4b4;
    --border-color: #333333;
    --accent: #6c63ff;
    --hover-bg: #2f2f2f;
    --sidebar-width: 280px;
}

* { box-sizing: border-box; font-family: 'Inter', sans-serif; color: var(--text-primary); }

body { background-color: var(--bg-main); margin: 0; display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
#sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: 0.3s ease;
}
#sidebar.hidden { margin-left: calc(var(--sidebar-width) * -1); }

/* Super Rounded Elements */
.new-chat-btn, .action-btn, .nav-links a, .user-card, .input-container, #profile-menu input {
    border-radius: 50px !important; /* Forces super rounded look */
}

.new-chat-btn {
    margin: 20px;
    padding: 15px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    text-align: center;
}

.nav-links { flex: 1; padding: 0 20px; }
.nav-links a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    margin-bottom: 8px;
    background: transparent;
}
.nav-links a.active { background: var(--hover-bg); }

/* User Section */
.user-section { padding: 20px; border-top: 1px solid var(--border-color); }
.user-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 15px; background: var(--hover-bg); cursor: pointer;
}

#profile-menu {
    display: none; background: #252525; padding: 15px;
    border-radius: 20px; margin-bottom: 10px; border: 1px solid var(--border-color);
}

/* Chat Input Area */
.input-area { padding: 20px 15%; width: 100%; }
.input-container {
    background: #2b2b2b;
    border: 1px solid #444;
    padding: 8px 20px;
    display: flex;
    align-items: center;
}
.input-container input {
    flex: 1; background: transparent; border: none; outline: none; padding: 12px; font-size: 16px;
}

/* Auth Buttons (Preserved exact colors/sizes) */
.auth-row-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; height: 52px; margin-top: 12px; border-radius: 50px;
    font-size: 16px; font-weight: 600; cursor: pointer; border: none;
}
.ms-btn { background-color: #2f2f2f; color: #fff !important; font-family: 'Segoe UI', sans-serif; }
.google-btn { background-color: #ffffff; color: #1f1f1f !important; border: 1px solid #747775 !important; }

/* Popups */
#logout-popup {
    display: none; position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center;
}
.popup-card { background: #252525; padding: 30px; border-radius: 30px; text-align: center; width: 350px; }
#chat-history-list {
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.chat-item:first-child {
    margin-top: 0 !important;
}