#overview-console {
    overflow-y: auto;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 15px;
    scrollbar-width: thin;
}

.log-line {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

/* ── Categories ── */

.log-error,
.log-loot_error,
.log-recipe_error,
.log-function_error {
    color: var(--danger);
    background: var(--danger-dim);
}

.log-warn {
    color: #f5a623;
    background: rgba(245, 166, 35, 0.08);
}

.log-info {
    color: var(--text-secondary);
}

.log-chat {
    color: var(--accent);
    background: var(--accent-dim);
}

.log-connection {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
}

.log-command {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
}

.log-server_ready {
    color: var(--accent);
    background: var(--accent-glow);
    font-weight: 500;
}

.log-mod_discovery {
    color: var(--text-muted);
}

.log-unknown {
    color: var(--text-muted);
}

.log-separator {
    height: 1rem;
    flex-shrink: 0;
}

.console-container {
    background: var(--bg-elevated);
    border: var(--border-subtle) solid 0.5px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    height: calc(100vh - 52px - 4rem - 120px);
}

.console-container .console-log {
    flex: 1;
    min-height: 0;
}

.console-log {
    overflow-y: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 5px;
    scrollbar-width: thin;
}

#consoleAutoFill,
#AutoFill {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.console-input {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;

    & input {
        flex-grow: 1;
        padding: 8px 12px;
        border: var(--border-focus) solid 0.5px;
        border-radius: var(--radius-sm);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: 0.9rem;
        transition: border-color 0.2s ease;

        &:focus {
            outline: none;
            border-color: var(--border-focus);
            border-width: 0.5px;
        }
    }

    & svg {
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: var(--accent);
        transition: color 0.2s ease;

        &:hover {
            color: var(--accent-glow);
        }
    }
}