/* Hintergrund für die gesamte Seite */
html, body {
    background-color: #1e1e1e !important;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Chat-Box */
.chat-box {
    background-color: #2E2E2E;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    padding: 1rem;
    overflow-x: hidden;
}

    .chat-box .msg {
        flex-shrink: 0;
    }

.mud-paper.message {
    box-shadow: none;
    border-radius: 10px;
    background-color: transparent;
}
/* Nachrichtencontainer */
.message {
    display: flex;
}

    /* Nachrichteninhalt */
    .message .msg {
        font-size: 1.1rem; /* Größere Schriftgröße */
        padding: 12px; /* Optional: etwas mehr Padding */
        border-radius: 10px;
        max-width: 90%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
        .message .msg pre {
            background-color: #2a2a2a;
            padding: 10px;
            overflow: auto;
            border-radius: 4px;
            max-width: 100%;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        /* Absendername */
        .message .msg strong {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 1rem; /* Schriftgröße für den Absendernamen */
            color: #bbbbbb;
        }

    /* Ausrichtung der Nachrichten */
    .message.user {
        justify-content: flex-end;
    }
        /* Ihre Nachrichten (dunkelblau) */
        .message.user .msg {
            background-color: #082338; /* Dunkelblau */
            color: #ffffff;
        }

    .message.ai {
        justify-content: flex-start;
    }
        /* KI-Nachrichten (helleres Dunkelgrau) */
        .message.ai .msg {
            background-color: #232424; /* Etwas helleres Dunkelgrau */
            padding-left: 25px;
            color: #ffffff;
        }

/* Eingabefeld und Button */
.input-group .form-control {
    background-color: #2D2D2D;
    color: #ffffff;
    border: 1px solid #444444;
    font-size: 1rem; /* Schriftgröße im Eingabefeld */
}

    /* Platzhaltertext stylen */
    .input-group .form-control::placeholder {
        font-size: 1rem; /* Schriftgröße des Platzhaltertexts */
        color: #ffffff;
        opacity: 1;
    }

    /* Browser-Präfixe für Platzhaltertext */
    .input-group .form-control::-webkit-input-placeholder {
        font-size: 1rem;
        color: #ffffff;
        opacity: 1;
    }

    .input-group .form-control:focus {
        background-color: #2D2D2D;
        color: #ffffff;
        border: 1px solid #666666;
    }

.input-group .btn {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #666666;
}

    .input-group .btn:hover {
        background-color: #555555;
        color: #ffffff;
    }

/* Karte (Card) */
.card {
    background-color: #3A3F44; /* Helleres Dunkelgrau */
    border: 1px solid #444444;
}

/* Zusätzliche Abstände */
.mt-4 {
    margin-top: 1.5rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
/* Labels und Select-Felder */
.form-label {
    color: #ffffff;
}

.form-select {
    background-color: #2D2D2D;
    color: #ffffff;
    border: 1px solid #444444;
}

    .form-select:focus {
        background-color: #2D2D2D;
        color: #ffffff;
        border: 1px solid #666666;
    }

.folder-node {
    margin-left: 5px;
}

    .folder-node > span {
        cursor: pointer;
        user-select: none;
    }

        .folder-node > span:hover {
            color: #00BFFF; /* Helleres Blau beim Hover */
        }

    .folder-node input {
        margin-right: 5px;
    }
/* Style for folder toggle (clickable area) */
.folder-toggle {
    cursor: pointer;
    user-select: none;
}  
/* File and folder nodes */
.file-node, .folder-node {
    display: flex;
    align-items: center;
}  

    .file-node input {
        margin-right: 5px;
    }

.file-node-container {
    display: flex;
    flex-direction: column;
}
/* Apply margin between checkbox and icon/name */
.file-node-header .mud-checkbox {
    margin-right: -10px;
} 

.file-node-header {
    display: flex;
    align-items: center;
}

    .file-node-header > * {
        margin-right: 5px;
    }

.child-nodes {
    margin-left: 20px;
}
.custom-expand-panel {
    flex: 1 0 !important;
}