:root {
    --bg-color: #000000;
    --text-color: #00ff00;
    --text-glow: 0 0 4px #00ff00;
    --username-color: #00cc00;
    --username-glow: 0 0 4px #00cc00;
    --prompt-color: #00ff00;
    --prompt-glow: 0 0 4px #00ff00;
    --input-color: #00ff00;
    --input-glow: 0 0 4px #00ff00;
    --cursor-bg-color: #00ff00;
    --scanline-rgba: rgba(0, 255, 0, 0.05);

    --perfect-score-color: #e69c00; /* New Yellow */
    --perfect-score-glow: 0 0 5px #e69c00, 0 0 10px #c98a00; /* Adjusted yellow glow */

    --divine-name-font-weight: bold;
    --divine-name-text-shadow: 0 0 7px #88ff88, 0 0 14px #00ff00;
    /* Optional: you can uncomment and choose a custom color for divine names in normal text */
    /* --divine-name-color: #ccffcc; */

    /* Bright orange for LORD in perfect‐score passages */
    --divine-name-perfect-color: #ffecb3;

    /* Glow around divine names in perfect‐score passages */
    --divine-name-perfect-text-shadow:
          0 0 5px #ffffff,
          0 0 10px #ffecb3,
          0 0 18px var(--perfect-score-color),
          0 0 25px var(--divine-name-perfect-color);

    /* Status Bar variables */
    --statusbar-height: 1.6em;
    --statusbar-bg-color: var(--text-color); /* Will be green in dark, dark grey in light */
    --statusbar-text-color: var(--bg-color); /* Will be black in dark, white in light */
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #fdfdfd;
        --text-color: #2b2b2b;
        --text-glow: 0 0 2px rgba(43, 43, 43, 0.2);
        --username-color: #1e1e1e;
        --username-glow: 0 0 2px rgba(30, 30, 30, 0.2);
        --prompt-color: #2b2b2b;
        --prompt-glow: 0 0 2px rgba(43, 43, 43, 0.2);
        --input-color: #2b2b2b;
        --input-glow: 0 0 2px rgba(43, 43, 43, 0.2);
        --cursor-bg-color: #2b2b2b;
        --scanline-rgba: rgba(43, 43, 43, 0.07);

        --perfect-score-color: #e69c00;
        --perfect-score-glow: 0 0 5px #e69c00, 0 0 10px #c98a00;

        --divine-name-font-weight: bold;
        --divine-name-text-shadow: 0 0 1px rgba(0,0,0,0.2);

        --divine-name-perfect-color: #ffb84d;
        --divine-name-perfect-text-shadow:
              0 0 1px rgba(0,0,0,0.3),
              0 0 3px var(--perfect-score-color),
              0 0 5px var(--divine-name-perfect-color);
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Lucida Console', Monaco, 'Courier New', monospace;
    margin: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.5;
}

#terminal {
    /* add horizontal padding so divine-name glow isn’t clipped at the edges */
    padding: 0 8px var(--statusbar-height) 8px; /* Padding-bottom for status bar */
    height: calc(100vh - 40px - var(--statusbar-height)); /* Adjusted height for status bar */
    overflow-x: visible;
    overflow-y: auto;
    position: relative; /* Ensures status bar is positioned relative to terminal */
}

/* Scanline effect */
#terminal::after {
    content: '';
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: calc(20px + var(--statusbar-height)); /* Adjusted bottom for status bar */
    background: repeating-linear-gradient(
        0deg,
        var(--scanline-rgba),
        var(--scanline-rgba) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 1;
}

#statusBar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--statusbar-height);
    background-color: var(--statusbar-bg-color);
    color: var(--statusbar-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    padding: 0 8px; /* Horizontal padding for text inside status bar */
    z-index: 2; /* Above scanlines, same level as output/prompt */
    user-select: none; /* Status bar text usually not selectable */
}

#output div {
    margin-bottom: 5px;
    word-wrap: break-word;
    text-shadow: var(--text-glow);
    position: relative;
    z-index: 2;
}

.prompt-line {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.username, .username-echo {
    color: var(--username-color);
    text-shadow: var(--username-glow);
    margin-right: 4px;
    user-select: none;
}

.prompt, .prompt-echo {
    color: var(--prompt-color);
    text-shadow: var(--prompt-glow);
    margin-right: 8px;
    user-select: none;
}

#commandInput {
    background-color: transparent;
    border: none;
    color: var(--input-color);
    font-family: inherit;
    font-size: inherit;
    outline: none;
    flex-grow: 1;
    padding: 0;
    text-shadow: var(--input-glow);
    caret-color: transparent;
}

#customCursor {
    position: absolute;
    display: inline-block;
    width: 1ch;
    background-color: var(--cursor-bg-color);
    pointer-events: none;
    z-index: 3;
    visibility: hidden;
    animation: blinkCustomCursor 1s step-end infinite;
}

@keyframes blinkCustomCursor {
    0%, 100% { background-color: var(--cursor-bg-color); }
    50% { background-color: transparent; }
}

#textMeasurer {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: pre;
}

.llm-response-text {
    white-space: pre-line;
}

.perfect-score-text {
    color: var(--perfect-score-color);
    text-shadow: var(--perfect-score-glow) !important;
}

/* Divine name in normal responses */
.divine-name {
    font-weight: var(--divine-name-font-weight);
    text-shadow: var(--divine-name-text-shadow);
}

/* Divine name in perfect‐score responses: bright orange + matching glow */
.perfect-score-text .divine-name {
    font-weight: var(--divine-name-font-weight);
    color: var(--divine-name-perfect-color);
    text-shadow: var(--divine-name-perfect-text-shadow) !important;
}

.echoed-command-line {
    display: flex;
    align-items: center;
}

.echoed-command-text {
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}