#terminal_container {
/* Updated width to be relative to the viewport width */
width: 90vw;
/* You can adjust this max-width as you like */
max-width: 1000px;
/* border: 1px solid #00ff41; */ /* <-- Border removed */
border-radius: 8px;
/* Updated background-color to be semi-transparent */
background-color: rgba(0, 0, 0, 0.85);
box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
padding: 1.5rem;
box-sizing: border-box;
}

/* This div will hold all the lines and act as the "window" */
#terminal_window {
/* height: 20em; */ /* <-- Removed fixed height */
max-height: 20em; /* <-- Set max-height for ~10 rows */
overflow: hidden; /* This will make old lines "disappear" from the top */
display: flex;
flex-direction: column;
justify-content: flex-end; /* Starts content at the bottom */
line-height: 1.8;
font-size: 1.1rem;
}

.terminal-line {
    width: 100%;
    white-space: pre-wrap; /* Allows text to wrap */
    word-break: break-all;
}

/* User input line */
.input-line {
    display: flex;
}

.prompt-symbol {
    margin-right: 0.5em;
}

/* The actual input field */
.terminal-input {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    outline: none;
    color: #00ff41;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    caret-color: #00ff41;
}

/* Bot response line */
.bot-response {
    color: #00bcd4; /* Different color for the bot */
}

.bot-response .cursor {
    display: inline-block;
    background-color: #00bcd4;
    width: 0.6em;
    height: 1.2em;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

/* System message line */
.system-message .cursor {
    display: inline-block;
    background-color: #00ff41;
    width: 0.6em;
    height: 1.2em;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { background-color: transparent }
    50% { background-color: currentColor }
}