/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevent unnecessary scrollbars */
}

/* Sidebar */
.sidebar {
    width: 60px;
    height: 100vh;
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    position: fixed;
}

/* Sidebar Icons - Fix Scaling */
.sidebar-icon {
    width: 40px; /* Increased for better visibility */
    height: 40px;
    margin: 15px 0;
    cursor: pointer;
    object-fit: contain; /* Prevents distortion */
    image-rendering: crisp-edges; /* Helps in IE */
}

/* Chat Container */
.chat-container {
    margin-left: 60px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #2c2f35;
    padding: 15px;
    box-sizing: border-box; /* Fix width issues */
}

/* Chat Box */
.chat-box {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

/* Soften User Messages (Green) */
.user-message {
    background-color: #34c759 !important; /* Softer green */
    color: white !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: right;
    text-align: left;
    clear: both;
}

.user-message-dark {
    background-color: #34c759 !important; /* Softer green */
    color: white !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: right;
    text-align: left;
    clear: both;
}
.user-message-light {
    background-color: #34c759 !important; /* Softer green */
    color: black !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: right;
    text-align: left;
    clear: both;
}
/* Soften Assistant Messages (Gray) */
.assistant-message {
    background-color: #666 !important; /* Softer gray */
    color: white !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: left;
    text-align: left;
    clear: both;
    white-space: pre-line;
}
.assistant-message-light {
    background-color: #666 !important; /* Softer gray */
    color: black !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: left;
    text-align: left;
    clear: both;
    white-space: pre-line;
}
.assistant-message-night {
    background-color: #666 !important; /* Softer gray */
    color: white !important;
    display: block;
    max-width: 60%;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
    float: left;
    text-align: left;
    clear: both;
    white-space: pre-line;
}

/* Ensure chat messages don't overlap */
.chat-box:after {
    content: "";
    display: table;
    clear: both;
}

/* Fix Input Bar Alignment */
.input-container {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 0;
}

/* Input Field */
.input-container input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 10px;
    font-size: 16px;
    outline: none;
}

/* Fix Input Icons (Attachment & Send) */
.icon {
    width: 35px; /* Increased size */
    height: 35px;
    margin: 0 3px;
    cursor: pointer;
    object-fit: contain;
}

/* Dark Mode */
.dark-mode {
    background: #2c2f35 !important;
    color: white !important;
}

/* Light Mode */
.light-mode {
    background: #f0f0f0 !important;
    color: black !important;
}
/* Ensure text contrast in both modes */
/* Code Block Styling (IE Compatible) */
.code-block {
    background-color: #282c34; /* Dark gray */
    color: #ffffff; /* Light text */
    font-family: "Courier New", monospace;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    white-space: pre-wrap; /* Ensures long code doesn't break */
    word-wrap: break-word;
    border-left: 4px solid #00ff99; /* Highlighted border */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Dark background with opacity */
}

.modal-content {
    background-color: #2c2f35; /* Match the dark mode background */
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px; /* Set a fixed width */
    border-radius: 8px;
    color: white; /* Text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: white; /* Change color on hover */
    text-decoration: none;
    cursor: pointer;
}

/* Input Field Styles */
#userNameInput {
    width: calc(100% - 20px); /* Full width minus padding */
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #444; /* Match the dark theme */
    color: white; /* Text color */
}

/* Button Container */
.button-container {
    display: flex;
    justify-content: center; /* Center the button */
    margin-top: 10px; /* Space above the button */
}

/* Button Styles */
#saveNameButton {
    padding: 10px 20px;
    background-color: #34c759;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#saveNameButton:hover {
    background-color: #28a745; /* Darker green on hover */
}


#saveNameButton:hover {
    background-color: #28a745; /* Darker green on hover */
}

/* Popup Styles */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark background with opacity */
    justify-content: center;
    align-items: center;
}



.popup-content {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    background-color: #2c2f35; /* Match the dark mode background */
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Set a fixed width for the popup */
    max-width: 600px; /* Max width for larger screens */
    border-radius: 8px;
    color: white; /* Text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.summary-textbox {
    width: 100%; /* Full width of the popup */
    max-width: 400px; /* Limit the width of the text box */
    min-height: 100px; /* Minimum height */
    border: 1px solid #ccc; /* Border for the text box */
    padding: 10px; /* Padding inside the text box */
    border-radius: 5px; /* Rounded corners */
    background-color: #444; /* Background color */
    color: white; /* Text color */
    resize: none; /* Prevent resizing */
}

.btn {
    background-color: #04AA6D; /* Green background */
    color: white; /* White text */
    padding: 10px 15px; /* Padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 10px; /* Space above the button */
}

.btn:hover {
    opacity: 0.8; /* Slightly transparent on hover */
}



.loading-indicator {
    color: yellow; /* Change to a color that stands out */
    font-weight: bold;
    text-align: center;
    margin: 10px 0; /* Space around the loading text */
}
.btn:hover {
    opacity: 0.8; /* Slightly transparent on hover */
}

.modal-content {
    position: relative;      /* Position relative for absolute positioning of close button */
    display: flex;
    flex-direction: column;  /* Stack children vertically */
    align-items: center;     /* Center children horizontally */
    padding: 20px;          /* Add some padding */
}

.close {
    position: absolute;      /* Position the close button absolutely */
    top: 5px;              /* Distance from the top */
    right: 20px;            /* Distance from the right */
    font-size: 24px;        /* Size of the close icon */
    cursor: pointer;        /* Change cursor to pointer on hover */
}

input {
    margin-top: 10px; 
    margin-bottom: 0px;    /* Space between inputs and button */
    width: 250px;           /* Set a specific width for inputs */
}

#loginButton {
    margin-top: 5px;       /* Space above the button */
    padding: 5px 5px;     /* Add padding for better appearance */
    cursor: pointer;         /* Change cursor to pointer on hover */
}

#fileListModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#fileListModal .modal-content {
    margin: 15% auto;
    padding: 5px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(100, 100, 0, 0.2);
}

#fileListModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#fileListModal .close:hover,
#fileListModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#fileListContainer {
    max-height: 250px; /* Set a maximum height for the container */
    overflow-y: auto; /* Enable vertical scrolling */
    margin: 10px 10px; /* Add some space above the list */
    border: 2px solid #888; /* Add a border with a noticeable color */
    border-radius: 5px; /* Optional: round the corners */
}

#fileList {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    font-size: 14px; /* Decreased font size for list items */
}

#fileList li {
    padding: 5px 5px;
    cursor: pointer; /* Change cursor to pointer for clickable items */
}

#fileList li:hover {
    background-color: #000000; /* Highlight on hover */
}