:root {
    --body-bg: #fff;
    --body-color: #212529;
    --secondary-text-color: #6c757d;
    --border-color: #dee2e6;
    --border-color-translucent: rgba(0, 0, 0, 0.125);

    --navbar-bg: #f8f9fa; /* Light gray for navbar */
    --navbar-color: rgba(0, 0, 0, 0.9);
    --navbar-border-color: var(--border-color);

    --channels-panel-bg: #f8f9fa; /* Light background for channels */
    --channels-panel-border-color: var(--border-color);
    --channels-panel-header-color: var(--body-color);

    --messages-pane-bg: var(--body-bg);

    --form-control-bg: #fff;
    --form-control-color: var(--body-color);
    --form-control-border-color: #ced4da;
    --form-control-placeholder-color: #6c757d;
    --form-control-focus-border-color: #80bdff;
    --form-control-focus-shadow: rgba(0, 123, 255, 0.25);

    --list-group-item-bg: transparent;
    --list-group-item-color: var(--body-color);
    --list-group-item-border-color: var(--border-color-translucent);
    --list-group-item-hover-bg: #e9ecef;
    --list-group-item-active-bg: #007bff; /* Bootstrap primary */
    --list-group-item-active-color: #fff;
    --list-group-item-active-border-color: var(--list-group-item-active-bg);

    --modal-content-bg: #fff;
    --modal-content-color: var(--body-color);
    --modal-header-border-color: var(--border-color);
    --modal-footer-border-color: var(--border-color);
    --btn-close-filter: none;

    --link-color: #007bff;
    --link-hover-color: #0056b3;

    --primary-color: #007bff;
    --light-color: #f8f9fa;
    --dark-color: #212529;
}

/* Avatar in message list */
.message-avatar img {
    width: 40px; /* Adjust as needed */
    height: 40px; /* Adjust as needed */
    border-radius: 50%; /* Makes it circular */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    margin-right: 10px;
}

/* Ensure the avatar and content are aligned nicely */
.message {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 10px;
}

.message-content {
    display: flex;
    flex-direction: column;
}

.message-user {
    font-weight: bold;
    margin-right: 8px;
    font-size: 0.9em;
}

.message-timestamp {
    font-size: 0.75em;
    color: var(--secondary-text-color); /* Bootstrap's secondary text color */
    margin-left: 5px;
}

.message-text {
    font-size: 1em;
    margin-top: 2px; /* Small space between user/time and text */
    word-wrap: break-word; /* Ensure long words don't break layout */
    white-space: pre-wrap; /* Respect newlines and spaces */
}

/* General body and container styling (examples) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
    color: var(--body-color);
}

/* Profile Modal Specifics */
#profile-modal .modal-body img {
    max-width: 150px; /* Limit preview size in modal */
    height: 150px; /* Ensure it's a circle */
    display: block;
    margin-bottom: 1rem;
    border-radius: 50%; /* Make profile picture preview circular */
    object-fit: cover;
}

/* Dark Theme Adjustments using Bootstrap's data-bs-theme attribute */
[data-bs-theme="dark"] {
    color-scheme: dark; /* Informs browser about the color scheme */

    --body-bg: #212529; /* var(--bs-dark-bg-subtle, #212529) -> using direct value */
    --body-color: #f8f9fa; /* var(--bs-light-text-emphasis, #f8f9fa) */
    --secondary-text-color: #adb5bd; /* var(--bs-secondary-color, #adb5bd) */
    --border-color: #495057; /* var(--bs-border-color-translucent, #495057) or var(--bs-border-color, #6c757d) */
    --border-color-translucent: rgba(255, 255, 255, 0.15);


    --navbar-bg: #212529; /* var(--bs-dark, #212529) */
    --navbar-color: var(--light-color); /* var(--bs-light, #f8f9fa) */
    --navbar-border-color: #495057; /* var(--bs-border-color-translucent, #495057) */

    --channels-panel-bg: #2c3034; /* var(--bs-dark-bg-subtle, #2c3034) */
    --channels-panel-border-color: var(--border-color);
    --channels-panel-header-color: var(--body-color);

    --messages-pane-bg: var(--body-bg); /* var(--bs-body-bg, #212529) */

    --form-control-bg: #343a40; /* var(--bs-tertiary-bg, #343a40) */
    --form-control-color: var(--body-color);
    --form-control-border-color: #6c757d; /* var(--bs-border-color, #6c757d) */
    --form-control-placeholder-color: #adb5bd; /* var(--bs-secondary-color, #adb5bd) */
    --form-control-focus-border-color: #80bdff; /* Light blue focus outline - can be Bootstrap variable too */
    /* --form-control-focus-shadow: rgba(0, 123, 255, 0.25); */ /* This can often remain the same */

    --list-group-item-bg: transparent;
    --list-group-item-color: #ced4da; /* var(--bs-secondary-color, #ced4da) */
    --list-group-item-border-color: var(--border-color);
    --list-group-item-hover-bg: #495057; /* var(--bs-dark-tertiary, #495057) */
    /* --list-group-item-active-bg: #007bff; */ /* var(--bs-primary, #007bff) - often same in dark */
    /* --list-group-item-active-color: #fff; */ /* often same in dark */
    /* --list-group-item-active-border-color: var(--list-group-item-active-bg); */ /* often same in dark */

    --modal-content-bg: #343a40; /* var(--bs-dark-bg-subtle, #343a40) */
    --modal-content-color: var(--body-color);
    --modal-header-border-color: var(--border-color);
    --modal-footer-border-color: var(--border-color);
    --btn-close-filter: invert(1) grayscale(100%) brightness(200%);

    --link-color: #69b5ff; /* Lighter blue for dark mode */
    --link-hover-color: #8cc8ff;
}

[data-bs-theme="dark"] body {
    background-color: var(--body-bg);
    color: var(--body-color);
}

[data-bs-theme="dark"] .navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border-color);
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] #user-display {
    color: var(--navbar-color);
}

[data-bs-theme="dark"] .btn-outline-light {
    color: var(--light-color);
    border-color: var(--light-color);
}
[data-bs-theme="dark"] .btn-outline-light:hover {
    color: var(--dark-color);
    background-color: var(--light-color);
}

[data-bs-theme="dark"] .channels-panel {
    background-color: var(--channels-panel-bg);
    border-right-color: var(--channels-panel-border-color);
}

[data-bs-theme="dark"] .channels-panel h2 {
    color: var(--channels-panel-header-color);
}

[data-bs-theme="dark"] .messages-pane {
    background-color: var(--messages-pane-bg);
}

[data-bs-theme="dark"] .form-control {
    background-color: var(--form-control-bg);
    color: var(--form-control-color);
    border-color: var(--form-control-border-color);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--form-control-placeholder-color);
}
[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--form-control-bg); /* Or a slightly different focus bg if desired */
    color: var(--form-control-color);
    border-color: var(--form-control-focus-border-color);
    box-shadow: 0 0 0 0.2rem var(--form-control-focus-shadow);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--list-group-item-bg);
    border-color: var(--list-group-item-border-color);
    color: var(--list-group-item-color);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--list-group-item-hover-bg);
}

[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--list-group-item-active-bg);
    color: var(--list-group-item-active-color);
    border-color: var(--list-group-item-active-border-color);
}

[data-bs-theme="dark"] .message-timestamp {
    color: var(--secondary-text-color);
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--modal-content-bg);
    color: var(--modal-content-color);
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--modal-header-border-color);
}
[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--modal-footer-border-color);
}
[data-bs-theme="dark"] .btn-close {
    filter: var(--btn-close-filter);
}

/* Remove redundant specific dark theme rules that are now covered by Bootstrap's data-bs-theme */
/* [data-bs-theme="dark"] #sidebar, [data-bs-theme="dark"] #main-content, etc. */
/* The new rules above are more targeted and leverage Bootstrap variables. */

/* Auth Modal Styling */
#login-register-modal .modal-dialog {
    max-width: 400px;
}

#login-register-modal .form-floating {
    margin-bottom: 1rem;
}

#login-register-modal .btn-primary,
#login-register-modal .btn-success {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Header styling */
#app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}

#app-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

#header-actions {
    display: flex;
    align-items: center;
}

#header-actions .btn {
    margin-left: 0.5rem;
}

/* Dark theme for header - covered by .navbar styling */
/* [data-bs-theme="dark"] #app-header { ... } */
/* [data-bs-theme="dark"] #app-header h1 { ... } */

/* Ensure user section in sidebar is visible and correctly laid out */
/* #user-section.d-none is handled by Bootstrap */

/* #user-section:not(.d-none) is handled by Bootstrap when d-none is removed */

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        width: 100%; /* Full width on small screens */
        height: auto; /* Auto height */
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    #main-content {
        height: calc(100vh - Xpx); /* Adjust X to be the height of your sidebar/header on mobile */
    }

    #app-container {
        flex-direction: column; /* Stack sidebar and main content */
    }

    /* #user-section { */
        /* Optional: Adjust user section for smaller screens if needed */
    /* } */
    #message-list-container {
        display: flex;
        flex-direction: column-reverse; /* New messages at the bottom */
    }
}

/* Ensure login button is visible when user is not logged in */
#open-login-modal-btn:not(.d-none) {
    display: inline-block !important;
}

/* Hide elements meant to be hidden by default or by JS logic */
/* .d-none class handles this now */
/* #user-section.d-none, */
/* #profile-btn[style*="display: none"], */
/* #logout-btn[style*="display: none"], */
/* #theme-toggle-btn[style*="display: none"] { */
/* display: none !important; */
/* } */

/* Ensure user section is properly displayed when not d-none */
/* #user-section { */
    /* display: flex; */ /* This is handled by Bootstrap's d-flex on the element itself or by removing d-none */
    /* align-items: center; */
    /* justify-content: space-between; */
/* } */

/* General application of variables to light theme elements */
.navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border-color);
}

.navbar-brand,
.navbar .nav-link,
#user-display {
    color: var(--navbar-color);
}

.btn-outline-light { /* This class is typically for dark backgrounds, adjust if needed for light theme */
    color: var(--dark-color);
    border-color: var(--dark-color);
}
.btn-outline-light:hover {
    color: var(--light-color);
    background-color: var(--dark-color);
}

.channels-panel {
    background-color: var(--channels-panel-bg);
    border-right: 1px solid var(--channels-panel-border-color); /* Ensure border is applied in light theme too */
}

.channels-panel h2 {
    color: var(--channels-panel-header-color);
}

.messages-pane {
    background-color: var(--messages-pane-bg);
}

.form-control {
    background-color: var(--form-control-bg);
    color: var(--form-control-color);
    border-color: var(--form-control-border-color);
}
.form-control::placeholder {
    color: var(--form-control-placeholder-color);
}
.form-control:focus {
    background-color: var(--form-control-bg);
    color: var(--form-control-color);
    border-color: var(--form-control-focus-border-color);
    box-shadow: 0 0 0 0.2rem var(--form-control-focus-shadow);
}

.list-group-item {
    background-color: var(--list-group-item-bg);
    border: 1px solid var(--list-group-item-border-color); /* Ensure border is applied */
    color: var(--list-group-item-color);
}

.list-group-item:hover {
    background-color: var(--list-group-item-hover-bg);
}

.list-group-item.active {
    background-color: var(--list-group-item-active-bg);
    color: var(--list-group-item-active-color);
    border-color: var(--list-group-item-active-border-color);
}

.modal-content {
    background-color: var(--modal-content-bg);
    color: var(--modal-content-color);
}
.modal-header {
    border-bottom: 1px solid var(--modal-header-border-color);
}
.modal-footer {
    border-top: 1px solid var(--modal-footer-border-color);
}