/* Dark Mode Enhancements */
body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#conversations-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px;
    overflow: hidden; /* Prevent vertical scrolling on the grid */
}

.conversation-box {
    border: 1px solid #333;
    border-radius: 8px;
    background-color: #242424;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow: hidden;
}

.conversation-header {
    padding: 8px;
    background-color: #1a1a1a;
    color: #fff;
    border-bottom: 1px solid #333;
}

.messages-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 8px; /* Adjusted padding for better bubble appearance */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #121212; /* For Firefox */
}

/* Scrollbar styles for Chrome, Edge, and Safari */
.messages-list::-webkit-scrollbar {
    width: 8px;
}

.messages-list::-webkit-scrollbar-track {
    background: #121212;
}

.messages-list::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.message-item {
    width: 165px; /* Fixed width for all message bubbles */
    margin: 4px 8px; /* Adjust margin for spacing */
    padding: 8px 12px 20px 12px; /* Adjust padding to accommodate timestamp */
    border-radius: 10px; /* Rounded corners for bubble effect */
    color: #fff;
    display: block; /* Keeps block layout */
    word-wrap: break-word; /* Ensures long words do not overflow */
    position: relative; /* Allows absolute positioning of children, such as the timestamp */
}
.message-time {
    position: absolute;
    bottom: 5px; /* Adjust as needed to fit within the bottom padding of message-item */
    right: 5px; /* Keeps timestamp to the right */
    font-size: 0.65rem;
    color: #ccc; /* Light grey color for the timestamp */
}
.message-item.outgoing {
    background-color: #0A8DAB; /* Green for outgoing messages */
    align-self: flex-end;
    margin-left: auto; /* Align to the right */
    margin-right: 8px; /* Maintain margin on the right */
    border-bottom-right-radius: 2px; /* Adjust for tail effect */
}

.message-item.incoming {
    background-color: #2E4053; /* Red for incoming messages */
    align-self: flex-start;
    margin-right: auto; /* Align to the left */
    margin-left: 8px; /* Maintain margin on the left */
    border-bottom-left-radius: 2px; /* Adjust for tail effect */
}

.reply-box {
    padding: 8px;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

.reply-input {
    width: 100%; /* Full width to avoid cutoff */
    padding: 8px;
    background-color: #333;
    border: none;
    border-radius: 4px;
    color: #fff;
    box-sizing: border-box; /* Include padding and border in element's width */
}

.site-header {
    background-color: #121212; /* Dark background color */
    padding: 10px 20px; /* Padding around the header */
    text-align: center; /* Center the logo/image */
    border-bottom: 1px solid #333; /* Optional: adds a subtle border */
}

.logo {
    height: 100px; /* Adjust based on your logo's size */
    width: auto; /* Maintain aspect ratio */
}