/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    background: #f4f5f7;          /* Light neutral */
    font-family: "Segoe UI", sans-serif;
    color: #333;
}

/* ---------------------------------------------------------
   SCREEN CONTAINERS
--------------------------------------------------------- */
.screen {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background: #ffffff;          /* White panel */
    border: 1px solid #d0d0d0;    /* Light deterministic border */
}

/* ---------------------------------------------------------
   HEADERS
--------------------------------------------------------- */
h2 {
    margin-top: 0;
    font-weight: 600;
    color: #222;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 10px;
}

/* ---------------------------------------------------------
   INPUTS & TEXTAREAS
--------------------------------------------------------- */
input, textarea {
    width: 98%;
    padding: 10px;
    margin: 8px 0;
    background: #fafafa;          /* Light neutral */
    border: 1px solid #c8c8c8;
    color: #333;
    font-size: 14px;
}

textarea {
    height: 140px;
    resize: none;
    font-family: Consolas, monospace;
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
button {
    background: #e6e6e6;          /* Light neutral */
    border: 1px solid #bcbcbc;
    color: #222;
    padding: 10px 16px;
    margin: 8px 4px 8px 0;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background: #dcdcdc;          /* Slight deterministic hover */
}

/* ---------------------------------------------------------
   OUTPUT CONSOLE
--------------------------------------------------------- */
#output {
    background: #f9f9f9;          /* Light console background */
    border: 1px solid #d0d0d0;
    padding: 15px;
    margin-top: 20px;
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    font-size: 13px;
    color: #2a4a2a;               /* Muted green for mgCommands */
}

/* ---------------------------------------------------------
   ERROR TEXT
--------------------------------------------------------- */
#login-error {
    color: #c0392b;               /* Deterministic red */
    margin-top: 10px;
}

#model-text.hidden {
    display: none;
}

#model-text.visible {
    display: block;
}


.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Thinking Indicator Container */
.thinking-indicator {
    font-weight: bold;
    color: #4da3ff;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* Animated Dots */
.thinking-indicator .dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
}

/* Keyframes for dot animation */
@keyframes dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

#command-screen {
    display: flex;
    flex-direction: column;
}

#command-screen .button-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0; /* prevents movement */
}


/* Default command button styling */
#command-screen button {
    /*border: 2px solid #333;*/
    background: #f2f2f2;
    color: #111;
    padding: 10px 20px;
    border-radius: 8px;
    /*font-weight: 600;*/
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover */
#command-screen button:hover {
    background: #d5e0fb;
    border-color: #000;
}

/* ACTIVE COMMAND BUTTON */
.active-command {
    background: #4da3ff !important;
    border-color: #003d80 !important;
    color: white !important;
}