body {
    background-color: #343541;
    color: white;
    font-family: Inter, sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;
}

.main-layout {
    display: flex;
    flex-direction: row; /* side-by-side on large screens */
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.chat-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 360px; 
    padding-left: 20px; 
    align-items: center;
    box-sizing: border-box;
    flex-grow: 1;
}


/* Chat History Container */
.chat-history-container {
    width: 100%;
    max-width: max(800px, 80%);
    height: calc(100vh - 120px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    flex-grow: 1;
}

/* Chat Message Boxes */
.chat-message {
    display: inline-block;
    background-color: #f9f9f9;
    margin: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 80%;
    word-wrap: break-word;
    clear: both;
}

.chat-message p {
font-size: 16px;
}
  
/* User's Messages */
.chat-message.user {
    background-color: #444654;
    color: white;
    align-self: flex-end;
    text-align: left;
    padding: 12px 15px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    max-width: 75%;
    word-wrap: break-word;
    /* increase font size */
}

/* Assistant's Messages */
.chat-message.llm {
    background-color: #0FA37F;
    color: white;
    align-self: flex-start;
    text-align: left;
    padding: 12px 15px;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    max-width: 75%;
    word-wrap: break-word;
}

.chat-message.llm.eco {
   background-color: #0FA37F;
}

/* Latency Info */
.eco-feedback-info {
    font-size: 18px;
    color: #888;
    margin-left: 15px; 
    align-self: flex-start; /* Works in flexbox containers */
}


/* Flex container for input and button */
.query-submission-container {
    flex-grow: 1;
    width: 100%;
    max-width: max(800px, 80%);
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
}

/* Styles for the input box */
.query-box {
    flex-grow: 1;
    height: 50px;
    padding: 10px;
    border: none;
    border-radius: 20px;
    background-color: #40414F;
    color: white;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

/* Input Focus */
.query-box:focus {
    background-color: #4A4B57;
}

/* Styles for the button */
.send_button {
    padding: 10px 20px;
    background-color: #0FA37F;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    height: 50px;
    transition: background-color 0.3s;
}

.send_button:hover {
    background-color: #0D8F6A;
}

/* Eco-Friendly Mode Button */
.eco-mode-label {
    font-size: 14px;
    color: white;
    margin-right: 5px;
    margin-bottom: 5px;
}

.eco-mode-dropdown {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
    font-size: 14px;
}

.chat-history-container.eco-mode {
    background-color: #d4f5d4;
}

/* Markdown Content Styling */
.markdown-content {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3 {
    margin-top: 20px;
    color: #4CAF50;
}

.markdown-content p {
    margin: 10px 0;
}

.markdown-content a {
    color: #007acc;
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.markdown-content code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: #d14;
}

/* Default Scrollbar (Matches Background) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #343541; /* Default dark mode */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #50515E;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #60616E;
}

/* Eco Mode Low */
body.eco-mode-low ::-webkit-scrollbar-track {
    background: #e0f7e0; /* Light green */
}

body.eco-mode-low ::-webkit-scrollbar-thumb {
    background: #b0dcb0; /* Slightly darker green */
}

body.eco-mode-low ::-webkit-scrollbar-thumb:hover {
    background: #88c388;
}

/* Eco Mode Medium */
body.eco-mode-medium ::-webkit-scrollbar-track {
    background: #c8e6c9; /* Medium green */
}

body.eco-mode-medium ::-webkit-scrollbar-thumb {
    background: #9ccc9c;
}

body.eco-mode-medium ::-webkit-scrollbar-thumb:hover {
    background: #75b575;
}

/* Eco Mode High */
body.eco-mode-high ::-webkit-scrollbar-track {
    background: #a5d6a7; /* Darker green */
}

body.eco-mode-high ::-webkit-scrollbar-thumb {
    background: #7cb67c;
}

body.eco-mode-high ::-webkit-scrollbar-thumb:hover {
    background: #5b9b5b;
}

/* Firefox Support */
body.eco-mode-low {
    scrollbar-color: #b0dcb0
}

/* login page styles */
.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background: #444654;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -80%);
}

.login-container input {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
}

.login-container button {
    width: 30%;
    padding: 10px;
    background-color: #0FA37F;
    color: white;
    border: none;
    cursor: pointer;
    margin: 10px;
}

.logout-button {
    padding: 8px 12px;
    background: red;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
}

.left-top-corner {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    align-items: flex-end;
}

.eco-mode-group {
    display: flex;
    flex-direction: column;
}