/* =========================================
   HEURESTIS CORPORATE UI - FINAL OVERRIDE
   ========================================= */

/* 1. Büroklammer & Regler unten restlos vernichten */
button:has(svg.lucide-settings2),
button:has(svg path[d^="M9 7C9"]),
button:has(svg path[d^="M20 7h-9"]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Modellauswahl oben einfrieren (Klicks blockieren) */
button[aria-label="Ein KI-Modell auswählen"],
[data-testid="model-selector-dropdown"] {
    display: flex !important; 
    pointer-events: none !important;
    cursor: default !important;
}

/* 3. Den kleinen Dropdown-Pfeil im Modell-Badge verstecken */
button[aria-label="Ein KI-Modell auswählen"] svg,
[data-testid="model-selector-dropdown"] svg {
    display: none !important;
}

/* 4. Weißen Rahmen des Chatfelds unten entfernen */
.message-block, .main-chat-viewport {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 5. Gehirn-Symbol (Erinnerung) in der linken Leiste verstecken */
[aria-label*="Erinnerung"],
[title*="Erinnerung"],
[aria-label*="Memory"],
[title*="Memory"],
a[href*="/memory"],
button:has(svg.lucide-brain),
a:has(svg.lucide-brain) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* 6. AI-Namen in der Chat-Antwort durch Heurestis ersetzen */
.agent-turn h2.select-none {
    font-size: 0 !important; /* Originaltext unsichtbar */
}
.agent-turn h2.select-none::after {
    content: 'Heurestis' !important;
    font-size: 1rem !important; /* Neue Schriftgröße für den neuen Namen */
    visibility: visible !important;
}

/* 7. Placeholder im Eingabefeld ("Nachricht an AI") ersetzen */
#prompt-textarea::placeholder {
    color: transparent !important; /* Macht das alte "AI" unsichtbar */
}
div:has(> #prompt-textarea) {
    position: relative !important;
}
div:has(> #prompt-textarea:placeholder-shown)::after {
    content: 'Nachricht an Heurestis' !important;
    position: absolute !important;
    top: 13px !important; /* Perfekt auf die Original-Box abgestimmt */
    left: 20px !important; 
    color: rgba(63, 63, 70, 0.6) !important; /* Das graue Aussehen des Placeholders */
    pointer-events: none !important; /* Man kann beim Klicken durch den Text hindurchgreifen */
    font-size: 1rem !important;
}

/* =========================================
   SCHRITT 8: CINEMATISCHE LOGO-ANIMATION 
   ========================================= */

/* Das Container-Element zentrieren und Text unter das Logo zwingen */
.flex-col.items-center.gap-0.p-2 .flex-col.md\:flex-row.items-center.justify-center.gap-2 {
    flex-direction: column !important; 
    gap: 1.5rem !important; 
}

/* 1. Den kompletten inneren Kasten (inkl. Umrandung und altem Icon) restlos zerstören */
.flex-col.items-center.gap-0.p-2 .relative.size-10 .shadow-stroke {
    display: none !important; 
}

/* 2. Container anpassen und das Logo völlig frei schwebend laden */
.flex-col.items-center.gap-0.p-2 .relative.size-10 {
    width: 8rem !important;  
    height: 8rem !important;
    max-width: 100% !important;
    margin: 0 auto !important; 
    
    /* Rahmen und Hintergründe zur Sicherheit killen */
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    
    /* Das Bild laden */
    background-image: url("https://app.heurestis.de/images/logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Die Heurestis Website-Animation */
    animation: heroLogoAnim 4s ease-in-out forwards !important;
}

/* Die originale Heurestis Animation mit Glow */
@keyframes heroLogoAnim {
    0% { 
        opacity: 0; 
        transform: translateY(15px); 
        filter: drop-shadow(0 0 0px rgba(139, 128, 118, 0));
    }
    30% { 
        opacity: 1; 
        transform: translateY(0); 
        filter: drop-shadow(0 0 40px rgba(139, 128, 118, 0.3));
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
        filter: drop-shadow(0 0 15px rgba(139, 128, 118, 0.1));
    }
}

/* =========================================
   SCHRITT 9: HINTERGRUND & EINGABEFELD (Heurestis Design)
   ========================================= */

/* 1. Das 'Drumherum' (Hintergrund der gesamten App) in das Heurestis-Hellgrau tauchen */
body, main, .main-chat-viewport, .bg-presentation {
    background-color: #FAFAFA !important; 
}

/* 2. Das Eingabefeld (Chatfenster) strahlend weiß machen, damit es sich abhebt */
.relative.flex.w-full.flex-grow.flex-col.overflow-hidden.rounded-t-3xl {
    background-color: #FFFFFF !important; 
    border: 1px solid rgba(0,0,0,0.04) !important;
    /* Wir nutzen exakt den --shadow-md von deiner Website für die Tiefe */
    box-shadow: 0 12px 34px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.01) !important;
}

/* 3. Sicherstellen, dass das eigentliche Textfeld keine eigene Farbe mitbringt */
#prompt-textarea {
    background-color: transparent !important;
}

/* =========================================
   SCHRITT 10: HEURESTIS ANTWORT-KARTEN
   ========================================= */

/* Die eigentlichen Nachrichten als weiße Karten auf dem grauen Hintergrund schweben lassen */
.markdown.prose.message-content {
    background-color: #FFFFFF !important; /* Strahlendes Weiß */
    padding: 1.5rem 1.75rem !important; /* Großzügiger, edler Innenabstand (Luft zum Atmen) */
    border-radius: 1rem !important; /* Weich abgerundete Ecken passend zum Eingabefeld */
    border: 1px solid rgba(0,0,0,0.04) !important; /* Sehr dezenter Rand */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; /* Leichter, weicher Schatten */
}

/* Falls die User-Nachrichten ein eigenes Styling haben, fangen wir sie hiermit auch ab */
div[data-message-author="User"] > div {
    background-color: #FFFFFF !important;
    padding: 1rem 1.5rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

/* =========================================
   SCHRITT 11: LOGIN-SEITE PERFEKTIONIEREN
   ========================================= */

/* 1. Das kleine Standard-Logo ganz oben auf der Login-Seite ausblenden */
img[alt="Heurestis Logo"] {
    display: none !important;
}

/* 2. Den Login-Kasten im Heurestis-Premium-Design (Card-Look) formatieren */
.w-authPageWidth {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.01) !important;
    border-radius: 1rem !important;
    padding-top: 3rem !important; /* Oben Platz für das neue Logo schaffen */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt */
}

/* 3. Das große Heurestis-Logo animiert über der Überschrift einfügen */
.w-authPageWidth h1::before {
    content: '';
    display: block;
    width: 14rem !important;
    height: 6rem !important;
    max-width: 100% !important;
    margin: 0 auto 1.5rem auto !important; /* Zentriert das Logo und gibt Abstand nach unten */
    background-image: url("https://app.heurestis.de/images/logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: heroLogoAnim 4s ease-in-out forwards !important;
}

/* 4. Die grünen Rechts-Links im Footer in Heurestis-Grau umwandeln */
a[href*="datenschutz"], a[href*="nutzungsbedingungen"], a[href*="impressum"], a#custom-impressum {
    color: #3F3F46 !important; /* Dein edles Text-Grau */
    text-decoration-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover-Effekt für die Links (etwas dunkler beim Drüberfahren) */
a[href*="datenschutz"]:hover, a[href*="nutzungsbedingungen"]:hover, a[href*="impressum"]:hover, a#custom-impressum:hover {
    color: #000000 !important;
    text-decoration-color: #000000 !important;
}

/* Den kleinen Mond (Dark Mode Schalter) unten links ebenfalls ausblenden, falls noch sichtbar */
button[aria-label="Toggle dark mode"] {
    display: none !important;
}

/* =========================================
   SCHRITT 12: FOOTER-LINKS UNIFORMIEREN
   ========================================= */

/* 1. Alle Links im Footer zwingend gleich aussehen lassen */
div[role="contentinfo"] a {
    font-size: 0.875rem !important; /* Einheitliche Textgröße (text-sm) für exakte Deckung */
    font-weight: 400 !important;
    color: #3F3F46 !important; /* Dein Heurestis-Grau */
    text-decoration: none !important; /* Cleaner Look ohne permanente Unterstreichung */
    transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out !important;
}

/* 2. Der Hover-Effekt: Erst beim Drüberfahren dezent unterstreichen */
div[role="contentinfo"] a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(0,0,0,0.4) !important;
}

/* 3. Die vertikalen Trennstriche auf exakt dieselbe Höhe und Farbe zwingen */
div[role="contentinfo"] div {
    height: 1rem !important; /* Alle Striche genau gleich hoch (16 Pixel) */
    border-right: 1px solid #D4D4D8 !important; /* Ein weiches, einheitliches Silbergrau */
    align-self: center !important; /* Perfekt mittig am Text ausgerichtet */
    margin: 0 0.25rem !important; /* Gleicher Abstand zu allen Wörtern */
}

/* =========================================
   SCHRITT 13: GLOBAL DAS HARTE SCHWARZ VERBANNEN
   ========================================= */

/* 1. Alle Texte und Icons, die hart auf "Schwarz" programmiert sind, auf Heurestis-Grau zwingen */
.text-black, 
.text-text-primary,
.text-gray-900 {
    color: #3F3F46 !important;
}

/* 2. Alle schwarzen Hintergründe (wie z.B. den runden Senden-Button) auf Heurestis-Grau umfärben */
.bg-black, 
.bg-text-primary,
.bg-gray-900 {
    background-color: #3F3F46 !important;
}

/* 3. Alle schwarzen Rahmenlinien weicher machen */
.border-black, 
.border-text-primary {
    border-color: #3F3F46 !important;
}

/* 4. Feinschliff für den Senden-Button: Der Pfeil darin soll strahlend weiß bleiben */
button#send-button svg {
    color: #FFFFFF !important; 
    stroke: #FFFFFF !important;
}

/* =========================================
   SCHRITT 14: CHAT-INHALTE & NAMEN UMFÄRBEN
   ========================================= */

/* 1. Die Namen über den Chat-Karten (z.B. "Tim Mansen", "Heurestis") */
h2.select-none.font-semibold.text-base {
    color: #3F3F46 !important; /* Heurestis-Grau */
}

/* 2. Alle Überschriften (h1 bis h6) innerhalb der Chat-Antworten */
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #3F3F46 !important;
}

/* 3. Alle fettgedruckten Texte (strong) innerhalb der Chat-Antworten */
.markdown strong, .prose strong, 
.markdown b, .prose b {
    color: #3F3F46 !important;
}

/* 4. Zur Sicherheit: Auch den normalen Fließtext in den Nachrichten auf das edle Grau zwingen */
.markdown p, .prose p, 
.markdown li, .prose li {
    color: #3F3F46 !important;
}

/* =========================================
   SCHRITT 15: KOPFZEILE BEREINIGEN (Modell & Plus)
   ========================================= */

/* 1. Den exakten Container abschießen, der das "core"-Menü hält */
.hide-scrollbar .relative.flex.w-full.max-w-md.flex-col {
    display: none !important;
}

/* 2. Den "Plus"-Button (Mehrere Chats hinzufügen) anhand seiner festen Test-ID ausblenden */
div[data-testid="add-multi-convo-button"] {
    display: none !important;
}

/* 3. Sicherheitsnetz: Falls LibreChat das Menü woanders platziert, fangen wir das Icon ab */
button:has(img[alt="Heurestis Icon"]) {
    display: none !important;
}