/* --- 2. TERMINAL UI --- */
.terminal-container {
    width: 90%;
    max-width: var(--terminal-max-width);
    background-color: var(--bg-terminal);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* Ensure relative stacking context */
}

.terminal-header {
    background-color: #1f2229;
    padding: 10px 15px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27c93f; }

.terminal-body {
    padding: 20px;
    min-height: 160px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 5px; 
}

/* Line Styling */
.line {
    display: flex;
    align-items: baseline; /* Fixes the weird Y-offset */
    white-space: pre; 
    overflow: hidden;
    width: 100%;
    min-height: 1.5em; /* Ensures line has height even if empty */
}

.prompt { color: var(--accent-blue); font-weight: bold; }
.bar-filled { color: var(--accent-lime); }
.bar-empty { color: var(--text-muted); }

/* Success Message - Removed margin to fix alignment */
.success-line { 
    color: var(--accent-lime); 
    font-weight: bold;
}

/* Cursor */
.cursor {
    display: inline-block;
    width: 10px;
    height: 1em;
    background-color: var(--accent-lime);
    animation: blink 1s step-end infinite;
    margin-left: 5px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Measure helper */
#char-measure {
    visibility: hidden;
    position: absolute;
    white-space: pre;
    font-family: var(--font-stack);
    font-size: var(--font-size);
}