/* Container that pins the terminal to the bottom of the screen */
.terminal-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 1. Explicitly state the starting height */
    height: 100px; 
    
    /* 2. Setup strict boundaries */
    min-height: 60px;
    max-height: 80vh;
    
    /* 3. Ensure content doesn't break when small */
    overflow: hidden; 
    
    background-color: #05070a; 
    border-top: 2px solid var(--font-color);
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 9999;
    font-family: var(--font-stack);
}

/* Ensure the handle positions perfectly relative to the 100px default height */
.terminal-resize-handle {
    position: fixed;
    bottom: calc(100px - 5px); /* 100px height minus half the handle thickness */
    left: 0;
    width: 100%;
    height: 10px; 
    cursor: ns-resize; 
    background: transparent; /* Switch to red temporarily if you need to debug placement! */
    z-index: 10000; 
}
/* Flexbox wrapper to align prompt symbol and text input horizontally */
.terminal-form {
    display: flex;
    align-items: center;
    max-width: 10000px;
    margin: 0 auto; 
}

/* Styling for the username/directory prompt text */
.terminal-prompt {
    color: var(--secondary-color); 
    margin-right: 0px;
    white-space: nowrap;
    user-select: none; 
}


/* Styling for the actual input field */
.terminal-input {
    flex-grow: 1;
    background: transparent !important; 
    border: none !important;             
    box-shadow: none !important;         
    outline: none !important;            
    color: var(--font-color);
    font-family: var(--font-stack);
    font-size: 1rem;
    padding: 0;
    margin: 0;
    width: 100%;
}

.terminal-output {
    flex-grow: 1;
    background: transparent !important; 
    border: none !important;             
    box-shadow: none !important;         
    outline: none !important;            
    color: var(--font-color);
    font-family: var(--font-stack);
    font-size: 1rem;
    padding: 0;
    margin: 0;
    width: 100%;
}