/* Floating Container */
.ai-widget-floating {
    /*background-color: var(--color-my-light-light-brown);*/
    border-radius: 1vw;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px; /* Feste Breite unten rechts */
    /*height: 500px;*/ /* Feste Gesamthöhe des Widgets */
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

    .ai-widget-floating.ai-collapsed {
        right: 15px;
        left: auto;
        width: 150px;
    }

        /* ==========================================
   MOBILE BILDSCHIRME (Handys & kleine Tablets)
   ========================================== */
@media (max-width: 767.98px) {
    .ai-widget-floating {
        /* Zurücksetzen der Desktop-Formel */
        right: 15px;
        left: 15px; /* Damit spannt es sich gleichmäßig von links bis rechts auf */
        width: auto; /* Breite passt sich automatisch an (Screen minus 30px Abstand) */
        bottom: 15px;
    }


        /* Wenn das Widget auf dem Handy geöffnet wird, 
kann die Höhe etwas angepasst werden */
        .ai-widget-floating:not(.ai-collapsed) .ai-assistant-body {
            height: 65vh; /* Nutzt 65% der Bildschirmhöhe des Handys */
        }

    #ai-assistant-container.ai-collapsed .ai-assistant-body {
        width: 150px;
    }
}
        /* Äußerer Container im View */
        .ai-widget-embedded {
    /*background-color: var(--color-my-light-light-brown);*/
    border-radius: 1vw;
    position: relative;
    width: 100%; /* Füllt das übergeordnete View-DIV aus */
    height: 100%; /* Bzw. z. B. min-height: 450px; */
    display: flex;
    flex-direction: column;
}

    /* Füllt die verfügbare Höhe im View aus */
    .ai-widget-embedded .ai-assistant-body {
        flex: 1;
        min-height: 400px; /* Mindesthöhe, damit es nie zu klein wird */
    }



.ai-assistant-header {
    background-color: var(--color-my-brown); /*#0078d4;*/
    border-radius: 1vw;
    color: #ffffff;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.ai-assistant-body {
    background-color: var(--color-my-light-light-brown);
    border-radius: 1vw;
    height: 100%;
    /* display: flex;
    flex-direction: column;
    padding: 10px;*/
    box-sizing: border-box;
    gap: 10px; /* Abstand zwischen Chat-Verlauf und Eingabefeld */
}

/* WICHTIG: Der direkte Parent-Container braucht das Flex-Layout! */
.ai-chat-container {
    display: flex;
    flex-direction: column; /* Ordnet die Elemente von oben nach unten an */
    height: 100%; /* Nimmt die volle Höhe des Bodys ein */
}

.ai-chat-history {
    flex: 1; /* Nimmt allen verfügbaren freien Platz ein */
    overflow-y: auto; /* Zeigt erst bei Bedarf einen Scrollbalken */
    min-height: 0; /* WICHTIG: Verhindert, dass Flexbox den Verlauf sprengt */
    word-break: break-word; /* Bricht sehr lange Wörter/URLs sauber um */
    margin-bottom: 12px;

    /*height: 200px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    */
}

.input-group {
    flex-shrink: 0; /* Darf niemals zusammengedrückt werden */
    display: flex;
    gap: 8px;
    /*align-items: center;*/
}

    .input-group textarea,
    .input-group input {
        flex: 1; /* Eingabefeld nutzt die volle Breite neben dem Button */
        resize: none; /* Verhindert manuelles Vergrößern der Textarea */
    }


/* WICHTIG: Blendet den Body aus, wenn geklappt */
#ai-assistant-container.ai-collapsed .ai-assistant-body {    
    display: none !important;
}

.ai-toggle-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
}