/* chatbot.css */

/* Base Styles */
body {
    background-color: #000000; /* Black background */
    font-family: 'IBM Plex Mono', Consolas, monospace;
    color: #FFFFFF; /* Default text color set to white */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.chatbox {
    width: 700px; /* Increased width for a more spacious interface */
    max-width: 90%;
    background-color: #000000;
    border: 2px solid #00FF00;
    padding: 10px;
    box-sizing: border-box;
}

.chatlogs {
    height: 400px;
    overflow-y: auto;
    padding: 0; /* Removed padding to allow messages to span full width */
    border-bottom: 1px solid #00FF00;
}

.chat {
    margin: 0; /* Removed vertical margins between messages */
}

.message {
    display: flex; /* Use flex to align username and message */
    align-items: flex-start; /* Align items to the top */
    padding: 2px 5px; /* Reduced padding for less spacing */
    border-radius: 3px;
    width: 100%; /* Make message container span full width */
    white-space: pre-wrap; /* Preserve line breaks */
    background-color: transparent; /* Remove background color */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.username {
    font-weight: bold;
    margin-right: 5px;
    flex-shrink: 0; /* Prevent username from shrinking */
}

.user .username {
    color: #CCCCCC; /* Slightly darker white for "GuestUser:" */
}

.user .message-content {
    color: #FFFFFF; /* White text for user messages */
    flex-grow: 1; /* Allow message content to take remaining space */
}

.bot .username {
    color: #00CC00; /* Slightly darker green for "Terminal:" */
}

.bot .message-content {
    color: #00FF00; /* Green text for bot messages */
    flex-grow: 1; /* Allow message content to take remaining space */
}

/* Chat Form Styles */
.chat-form {
    display: flex;
    margin-top: 10px;
}

.chat-form .userInput {
    flex: 1;
    padding: 10px;
    background-color: #000000;
    border: 1px solid #00FF00;
    color: #FFFFFF; /* White input text */
    outline: none; /* Remove default focus outline */
    font-family: 'IBM Plex Mono', Consolas, monospace;
    position: relative;
}

.chat-form .userInput::after {
    content: '|';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    animation: blink 1s steps(2, start) infinite;
    color: #FFFFFF; /* Cursor color set to white */
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

.chat-form .userInput:focus {
    border: 1px solid #00FF00; /* Maintain consistent border color */
    /* Remove the default browser outline */
    outline: none;
}

/* Adjust Text Selection Coloring */
.chat-form .userInput::selection {
    background: #003300; /* Dark green selection background */
    color: #FFFFFF; /* White text selection color */
}

.chat-form .userInput::-moz-selection {
    background: #003300; /* Dark green selection background */
    color: #FFFFFF; /* White text selection color */
}

/* Send Button Styling */
.chat-form button {
    padding: 10px;
    background-color: #00FF00;
    font-family: monospace;
    border: none;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
}

.chat-form button:hover {
    background-color: #33FF33;
}