@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --bg: #0f172a;
    --panel: #111827;
    --panel-2: #0b1221;
    --accent: #6366f1;
    --accent-2: #8b5cf6;
    /* Sidebar-Buttons (dezenter) */
    --btn-fast-bg: rgba(255, 255, 255, 0.05);
    --btn-deep-bg: #4a3f6d;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: #1f2937;
    --danger: #ff4444;
    --success: #10b981;

    /* UI: Tag-Headlines / Labels (angelehnt an Google Workspace) */
    --tag-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    --tag-border: rgba(124, 58, 237, 0.40);
    --tag-border-soft: rgba(99, 102, 241, 0.20);
    --tag-shadow: 0 6px 16px rgba(99, 102, 241, 0.10);
    --icon-selected-bg: rgba(99, 102, 241, 0.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.12), transparent 25%), radial-gradient(circle at 80% 0%, rgba(139,92,246,0.12), transparent 25%), var(--bg);
    height: 100vh;           /* Exakt die Bildschirmhöhe */
    overflow: hidden;        /* Verhindert Scrollen der ganzen Seite */
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}
.layout {
    width: 100%;
    max-width: 1200px;
    height: calc(100vh - 24px);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
}
.sidebar {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    height: 100%;            /* Füllt die Höhe des Grids */
    overflow-y: auto;        /* Scrollbalken für die gesamte Sidebar */
    overflow-x: hidden;
    scrollbar-width: thin;   /* Schönerer Scrollbalken */
    scrollbar-color: var(--accent) transparent;
}
/* --- SIDEBAR LIST FIX (style.css) --- */

/* 1. Haupt-Container der Sidebar: Kein Scrollen mehr, nur Layout */
.sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;         /* Nimmt nur den benötigten Platz ein */
    overflow: visible;        /* Kein Scrollen mehr, Inhalt kann sich ausdehnen */
    min-height: 0;
}
.sidebar h2 {
    font-size: 18px;
    color: var(--text);
}
.sidebar .section {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.sidebar .section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 8px;
}
.sidebar .section .section-title {
    margin-bottom: 0;
}
.sidebar .section.actions {
    margin-top: 16px;        /* Normaler Abstand zum Inhalt darüber */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding-top: 15px;
    flex-shrink: 0;          /* Verhindert Quetschen des Footers */
    border-top: 1px solid var(--border);
}

/* Styling für die aufklappbaren Gruppen-Header */
.group-header {
    cursor: pointer;
    font-weight: 500;
    background: var(--panel); /* Matcht normale Links */
    user-select: none;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
    border: 1px solid transparent; /* Platzhalter für den Hover-Rahmen */
}


/* Einrückung für Sub-Items */
.sub-tab {
    padding-left: 28px !important; /* Etwas mehr Einrückung */
    font-size: 0.85rem !important;
    border-left: 2px solid transparent;
}
.sub-tab:hover {
    border-left-color: var(--accent);
}


/* --- Active File Container (Sidebar) --- */
.active-file-container {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.active-file-header {
    font-size: 0.85rem;
    color: #ddd;
    margin-bottom: 8px;
    font-weight: 700;
}

.active-file-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.active-file-list li {
    font-size: 0.85rem;
    color: var(--text);
    /* Container als Flex, damit Icon + gekürzter Name sauber nebeneinander stehen */
    display: flex;
    align-items: center;
    gap: 8px;
    /* Ensure long names never expand the sidebar layout */
    width: 100%;
    max-width: 180px; /* an Sidebar-Breite anpassen */
    min-width: 0;
    overflow: hidden;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Dateiname im Active-File-Container: Ellipsis */
/* (wird nun global über .file-item-name geregelt) */

.active-file-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.active-file-actions button {
    width: 100%;
    text-align: center;
}

.active-file-admin-options {
    margin-top: 10px;
}

.active-file-admin-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    text-align: center;
}
.model-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(99,102,241,0.12);
    color: var(--text);
    border: 1px solid rgba(99,102,241,0.4);
    font-size: 14px;
}

/* Einheitliches Design für Home, Neuer Chat und Verlauf-Speichern */
#navHome,
#newChatBtn,
.nav-item-toggle {
    background: rgba(99, 102, 241, 0.12) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    color: var(--text) !important;
    transition: background-color 0.2s, transform 0.2s;
}

#navHome:hover,
#newChatBtn:hover,
.group-header:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    transform: translateY(-1px);
    cursor: pointer;
}

/* Spezifische Korrektur für den Toggle-Container unten */
.nav-item-toggle {
    padding: 8px 12px;
    border-radius: 999px; /* Pill-Form wie Modell-Anzeige */
    justify-content: center;
}

/* Entferne alte Rahmen von nav-link, falls diese für Home/NewChat noch aktiv sind */
#navHome.nav-link,
#newChatBtn.nav-link {
    box-shadow: none;
}
.admin-stats {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #1f1f1f;
    color: var(--muted);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.progress-bar {
    width: 100%;
    height: 6px;
    background: #2d2d2d;
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.progress-bar > div {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.3s ease;
}
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nav-link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.nav-link:hover {
    background: var(--panel-2);
    border-color: var(--accent);
}
.nav-link.active {
    background: rgba(99,102,241,0.15);
    border-color: var(--accent);
    color: var(--accent);
}
.admin-nav {
    margin-top: 10px;
}
/* --- Dezentes Highlight für ausgeklappte Untermenüs --- */

/* Der Container des Untermenüs, wenn er sichtbar ist */
.settings-submenu:not(.hidden) {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(99, 102, 241, 0.05) 100%
    ) !important;
    border-radius: 12px;
    margin: 5px 0 10px 0;
    padding: 8px 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 2. Das aufklappbare Menü (Wrapper): Muss wachsen können */
.settings-submenu {
    /* Standardzustand: zu */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    display: block !important; /* Kein Flex, damit Items untereinander fließen */
}

/* Wenn aufgeklappt: KEINE Höhenbegrenzung, KEIN Scrollen im Element selbst */
.settings-submenu:not(.hidden) {
    max-height: none !important; /* WICHTIG: Lässt das Element so groß werden wie der Inhalt */
    overflow: visible !important; /* Verhindert interne Scrollbalken */
    opacity: 1;
    margin-bottom: 10px; /* Abstand zum nächsten Element */
    height: auto !important;
}

/* 3. Spezifischer Wrapper für Verlauf: Reset von Flex-Eigenschaften */
#historySubMenu {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 4. Die Liste der Einträge selbst: Darf nicht scrollen, muss sich ausdehnen */
#recentHistoryListNew {
    display: block !important;
    overflow: visible !important; /* Scrollbalken weg! */
    height: auto !important;
    max-height: none !important;  /* Begrenzung weg! */
    flex: none !important;
}

/* 5. Verhindert, dass einzelne Einträge gequetscht werden */
#recentHistoryListNew .nav-link {
    flex-shrink: 0; 
    min-height: auto;
}

/* Dateiverwaltung und andere Menüs: Nicht quetschen */
#files-menu,
#settings-menu,
.group-header {
    flex-shrink: 0;
}
/* Die einzelnen Links innerhalb des ausgeklappten Menüs */
.settings-submenu .nav-link,
.settings-submenu .sub-tab {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0; /* Margin auf 0, damit die Linien direkt anliegen */
    font-size: 0.82rem !important;
    color: var(--muted) !important;

    /* ÄNDERUNG: Von Schwarz auf ein dezentes Weiß-Licht */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: 0 !important; /* Eckig für die Linien-Optik */

    /* Optional: Etwas mehr Glanz beim Hover */
    transition: background 0.2s, border-color 0.2s;
}

/* Hover-Effekt: Etwas heller beim Drüberfahren */
.settings-submenu .nav-link:hover,
.settings-submenu .sub-tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text) !important;
}

/* Das letzte Element bekommt keinen Trennstrich am Boden */
.settings-submenu .nav-link:last-child,
.settings-submenu .sub-tab:last-child {
    border-bottom: none !important;
}

/* Markierung für das aktuell aktive Element im Untermenü */
.settings-submenu .nav-link.active,
.settings-submenu .sub-tab.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text) !important;
    font-weight: 600;
    border-radius: 8px !important;
    border-bottom: none !important;
    margin: 2px 4px;
}

.sub-tab {
    padding-left: 28px !important; /* Etwas mehr Einrückung */
    font-size: 0.85rem !important;
    border-left: 2px solid transparent;
}
.sub-tab:hover {
    border-left-color: var(--accent);
}
.nav-item-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: 0.3s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Der Schiebe-Knopf selbst */
.slider:before {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-label {
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.icon-option {
    user-select: none;
}
.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    background: var(--panel);
    min-height: 64px;
}
.icon-option input[type="radio"] {
    display: none;
}
.icon-emoji {
    font-size: 1.35rem;
    line-height: 1.1;
    margin-bottom: 4px;
}
.icon-svg {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.icon-svg svg {
    display: block;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
}
.avatar-has-svg {
    font-size: 0; /* verhindert vertikales "springen" durch Text-Lineheight */
}
.avatar-has-svg svg {
    display: block;
}
.icon-label {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
}

/* Vereinheitlichte "Tag"-Optik (gut lesbar, konsistent) */
.tag-headline,
.tag-subhead,
.assistant-settings .form-group > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--tag-bg);
    border: 2px solid var(--tag-border);
    box-shadow: var(--tag-shadow);
    color: var(--text);
    font-weight: 650;
    letter-spacing: 0.03em;
    user-select: none;
    line-height: 1.05;
    min-height: 38px; /* einheitliche "Tag-Höhe" */
}

/* Explizit: Label "Name Assistent" im Dark Mode weiß (Light Mode wird weiter unten überschrieben) */
#assistant-tab label[for="assistantName"] {
    color: var(--text) !important;
}
.tag-headline {
    width: 100%;
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.tag-subhead,
.assistant-settings .form-group > label {
    width: auto;
    font-size: 0.82rem;
    padding: 8px 12px;
    border-color: var(--tag-border-soft);
    margin-bottom: 12px; /* Abstand zwischen Tag und Auswahl/Control */
}
.assistant-settings .form-group .select {
    padding: 10px;
    font-size: 0.9rem;
}
.settings-section {
    margin-top: 20px; /* mehr Luft zwischen Bereichen */
}

.assistant-settings {
    padding-top: 6px;
    padding-bottom: 8px;
}

.icon-grid {
    margin-top: 6px;
}
/* (Altes Tag-Design entfernt – jetzt einheitlich oben definiert) */

.settings-row {
    display: grid;
    gap: 12px;
}
.settings-row-2 {
    grid-template-columns: 1fr 1fr;
}
.settings-row-tight {
    margin-top: 10px;
}
@media (max-width: 720px) {
    .settings-row-2 {
        grid-template-columns: 1fr;
    }
}

/* Kompaktere Theme Cards im Settings-Tab */
.assistant-settings .theme-selection-grid {
    gap: 12px;
    grid-template-columns: 1fr; /* Dark/Light untereinander (Block selbst ist 50% breit) */
}
.assistant-settings .theme-card {
    padding: 12px;
    width: 100%;
}
.assistant-settings .theme-label {
    font-size: 0.82rem;
}

/* Rechter Block: nach dem Tag direkt Controls mit Luft */
.assistant-settings #assistantFontFamily.select {
    margin-top: 12px;
    width: 100%;
}
@media (max-width: 720px) {
    .assistant-settings .theme-selection-grid {
        grid-template-columns: 1fr;
    }
}
.assistant-settings .font-size-selector {
    gap: 8px;
}
.assistant-settings .font-option {
    padding: 8px 10px;
    font-size: 0.82rem;
}
.icon-option:hover {
    background: var(--panel-2) !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px);
}
.icon-option.selected {
    border-color: var(--accent) !important;
    background: var(--icon-selected-bg) !important;
}
.instruction-box {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.instruction-box textarea {
    flex: 1;
    min-height: 60px;
    resize: none;
    overflow-y: hidden;
    padding-bottom: 2px;
}
.instruction-box button {
    padding: 8px 12px;
    background: linear-gradient(135deg, #f7b366, #f59551);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s, background 0.2s;
}
.instruction-box button:hover {
    background: linear-gradient(135deg, #f7b366, #f59551);
    transform: translateY(-1px);
}
.success-message {
    animation: fadeIn 0.3s ease-in;
}
.error-message {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.logout-btn {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.logout-btn:hover {
    background: linear-gradient(135deg, #111827, #1f2937);
    transform: translateY(-1px);
}
.card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    background: var(--panel-2);
}
.card-header h1 { font-size: 20px; }
.badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.4);
    color: var(--text);
    font-size: 12px;
}
.main {
    flex: 1;                 /* Nimmt den restlichen Platz */
    height: 100%;            /* Volle Höhe */
    overflow: hidden;        /* Container scrollt nicht, nur die Messages */
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.chat-messages,
#chatMessages {
    flex: 1;                 /* Füllt den Platz zwischen Header und Input */
    overflow-y: auto;        /* NUR HIER wird gescrollt */
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.1));
    min-height: 0;
    font-family: 'Google Sans Code', 'Roboto Mono', monospace;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.message {
    display: flex;
    margin-bottom: 14px;
    gap: 10px;
}
.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--border);
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--text);
}
.message.user .avatar { background: rgba(99,102,241,0.4); }
.bubble {
    max-width: 70%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* --- Copy Button (nur Bot-Text) --- */
.copy-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.copy-response-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.10);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    z-index: 1;
}

.message.assistant .bubble:hover .copy-response-btn {
    opacity: 1;
}

@media (hover: none) {
    .copy-response-btn {
        opacity: 0.9; /* auf Touch-Geräten sichtbar */
    }
}

.copy-response-btn:hover {
    transform: translateY(-1px);
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.40);
}

.copy-response-btn:active {
    transform: translateY(0px) scale(0.98);
}

.copy-response-btn.copied {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.14);
}

.copy-response-btn.copy-failed {
    border-color: rgba(255, 68, 68, 0.55);
    background: rgba(255, 68, 68, 0.12);
}

/* --- Wide-Screen Charts im Chat --- */
.chart-container {
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
    border-radius: 12px;
    overflow: hidden;
}
.chart-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Ausnahme: Assistant-Bubbles mit Charts dürfen fast die ganze Breite nutzen */
.message.assistant:has(.chart-container) { max-width: 95% !important; }
.message.assistant:has(.chart-container) .bubble {
    max-width: 95% !important;
    flex: 1 1 auto;
}
.system-notice {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
    margin: 10px 0;
    opacity: 0.8;
    line-height: 1.3;
    padding: 2px 0;
}
.source-badge-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.source-badge:hover {
    border-color: var(--muted);
    color: var(--text);
}
.source-badge-icon {
    font-size: 0.75rem;
}
.source-badge-label {
    display: inline-block;
}

/* Quellen (Links) unter Chat-Bubbles */
.sources-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 0 12px;
}
.source-link {
    font-size: 0.75rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.source-link,
.source-link a {
    color: #ffffff;
}
.source-link a {
    color: inherit;
    text-decoration: none;
}
.source-link-icon {
    color: #ffffff;
    opacity: 0.9;
}
.source-link:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.6);
    color: #ffffff;
}
.message.user .bubble {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
}
.meta {
    margin-top: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--muted);
}
/* Modellfarben für Meta-Informationen im Chat */
.meta.model-pro-color {
    color: #fd2abe; /* Lila für Pro 2.5 */
}
.meta.model-flash-lite-color {
    color: #f7fb24; /* Gelb/Orange für Flash Lite 2.5 */
}
.meta.model-flash-color {
    color: #7bfcf1; /* Blau für Flash 2.5 */
}
.meta.model-default-color {
    color: var(--muted); /* Standard-Farbe für unbekannte Modelle */
}

/* --- Modell-Signatur am Ende der Nachricht (Info-Line) --- */
.info-line {
    font-size: 0.75rem; /* +0.05rem gegenüber vorher (0.7rem) */
    color: var(--muted);
    font-weight: 500;
}
.info-line .meta-model,
.info-line .source-info,
.info-line .message-timestamp {
    color: var(--muted);
    font-weight: 500;
}
.info-line .message-timestamp {
    font-weight: 400;
}

/* --- Duale Analyse Buttons: dezente Farben (Fast/Deep) --- */
.btn-analyze-fast,
.btn-analyze-deep {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s, background 0.2s, border-color 0.2s;
}
/* IDs sind absichtlich dabei, um alte Button-Klassen (z.B. .secondary-upload-btn) sicher zu überschreiben */
/* Einheitliches transparentes Farbschema für alle Dateiverwaltungs-Buttons */
#btnAnalyzeFast.btn-analyze-fast {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: var(--text) !important;
    text-align: center !important;
}
#btnAnalyzeDeep.btn-analyze-deep {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: var(--text) !important;
    text-align: center !important;
}
.btn-analyze-fast:hover:not(:disabled),
.btn-analyze-deep:hover:not(:disabled) {
    filter: brightness(1.03);
    transform: translateY(-1px);
}
.btn-analyze-fast:disabled,
.btn-analyze-deep:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}
.input-area {
    padding: 14px;
    border-top: 1px solid var(--border);
    background: var(--panel-2);
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    align-items: flex-end;
    /* Normaler Flex-Container für Desktop-Layout */
}
#messageInput {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 14px;
    font-size: 0.9rem !important; /* Verkleinert von 16px */
    min-height: 48px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#sendButton {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: #fff;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}
#stopButton {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--text);
    padding: 14px 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#stopButton:hover { transform: translateY(-1px); }
#stopButton:active { transform: translateY(0); }
#stopButton:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.ghost-btn#newChatBtn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
}
#sendButton:hover { transform: translateY(-1px); }
.login-panel {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-title { font-size: 24px; margin-bottom: 14px; }
.form-group { margin-bottom: 16px; }
label { display:block; color: var(--muted); margin-bottom: 6px; font-size: 14px; }

/* Buttons: gleiche Typografie (global). Ausnahme: kann via #assistant-tab später überschrieben werden. */
button,
.btn-secondary-sidebar,
.logout-btn,
.upload-btn-unified {
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
input[type="text"], input[type="password"] {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}
button.primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
button.primary:hover { 
    transform: translateY(-1px);
    background: linear-gradient(135deg, #7c3aed, #9d4edd);
}

/* Secondary Button - Design-System konform */
button.secondary {
    width: 100%;
    padding: 14px;
    background: var(--btn-fast-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
    box-shadow: none;
}

button.secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

button.secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Admin-Danger Button: transparenter (weniger lila), aber klar als "Löschen" erkennbar */
button.danger-soft {
    width: 100%;
    padding: 14px;
    background: rgba(239, 68, 68, 0.10); /* danger, transparent */
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--text);
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

button.danger-soft:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.55);
    transform: translateY(-1px);
}

button.danger-soft:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Upload-Button für Langzeitgedächtnis - Orange wie logout-btn */
#btnMemory {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
}

/* Secondary Upload Button - Orange wie logout-btn */
.secondary-upload-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.secondary-upload-btn:hover {
    transform: translateY(-1px);
}
.error-message, .success-message {
    margin-top: 8px;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}
.error-message.show { display:block; background: rgba(239,68,68,0.15); color: #fecaca; border:1px solid rgba(239,68,68,0.4); }
.success-message.show { display:block; background: rgba(16,185,129,0.15); color: #bbf7d0; border:1px solid rgba(16,185,129,0.4); }
.loading { 
    color: var(--muted); 
    padding: 8px 18px; 
    display: none; 
    flex: 0 0 auto;
    background: var(--panel-2);
    border-top: 1px solid var(--border);
}
.loading.show { display: block; }
@media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; height:auto; }
    .sidebar { 
        order:2; 
        position: relative;
        height: auto;
        top: 0;
        overflow: visible;
    }
    .sidebar-content {
        overflow-y: visible;
    }
    .main-card { order:1; height: 80vh; }
    /* Mobile Tastatur-Korrektur: Fixed Position für Eingabeleiste */
    .input-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
    }
    /* Chat-Messages braucht extra Padding für fixed input-area */
    .chat-messages {
        padding-bottom: 70px;
    }
}
.ghost-btn {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
}

/* Sidebar Secondary Button - einheitliches transparentes Design */
.btn-secondary-sidebar {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
    box-shadow: none;
    text-align: center;
}
.btn-secondary-sidebar:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.36);
    transform: translateY(-1px);
}

/* --- Button-Feedback (Speichern): Erfolg/Fehler --- */
.btn-feedback-success {
    /* dezent: kein "grün leuchtender" Button, nur grünes Checkmark/Label */
    background: var(--panel) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: var(--success) !important;
    box-shadow: none !important;
}

@keyframes btnErrorBlink {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.35); }
    100% { filter: brightness(1); }
}

.btn-feedback-error {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: rgba(239, 68, 68, 0.75) !important;
    color: #ffffff !important;
    animation: btnErrorBlink 0.18s ease-in-out 0s 4;
}

/* Aktionen (unten in der Sidebar) */
.sidebar .section.actions #newChatBtn,
.sidebar .section.actions .model-pill,
.sidebar .section.actions #locationPill,
.sidebar .section.actions #logoutBtn,
.sidebar .section.actions .logout-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 12px;
    padding: 12px;
    margin: 0;
    box-sizing: border-box;
}
.sidebar .section.actions #locationPill {
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.35);
}
.label-inline { display:block; margin:8px 0 4px; color: var(--muted); font-size: 13px; }
.select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}
.slider-value { margin-top: 4px; color: var(--muted); font-size: 13px; }

/* Modals */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal.hidden { display: none; }
.hidden { display: none !important; }
.modal-content {
    width: 90%;
    max-width: 520px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.close-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}
.dropzone {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    background: var(--panel);
    cursor: pointer;
}
.dropzone.dragging {
    border-color: var(--accent);
    color: var(--text);
}
.progress {
    margin-top: 10px;
    padding: 10px;
    background: rgba(99,102,241,0.1);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
}
.upload-status { margin-top: 8px; color: var(--muted); }

/* --- Upload Modal: Dateinamen im Pop-up sauber kürzen (Ellipsis) --- */
#fileList {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
}

#fileList .file-item {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

/* Aktuelles Markup nutzt im Modal #filePreview: gleiche Schutzregel, damit nichts herausragt */
#filePreview {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* FilePreview-Badges sind inline-flex DIVs ohne .file-item Klasse -> hier hart begrenzen */
#uploadsModal #filePreview > div,
#filePreview > div {
  display: flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#uploadsModal #filePreview > div .file-item-name,
#filePreview > div .file-item-name {
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#filePreview .file-item {
  min-width: 0;
  overflow: hidden;
}

/* --- CSS-HAMMER: Ellipsis auch bei „unbesiegbaren“ Flex/Table-Layouts --- */
.file-item-name {
  flex: 1;
  min-width: 0; /* KRITISCH für Ellipsis in Flexbox */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Global: Ohne min-width:0 am Flex-Parent ignorieren Browser oft Ellipsis */
.file-item {
  min-width: 0;
}

/* Modal-Fix: im Upload-Modal sitzt der Name in inline-flex Badges (#filePreview) */
#uploadsModal .file-item {
  display: flex !important;
  max-width: 100% !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
#uploadsModal .file-item-name {
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tags-Zeile unter der Modell-Signatur */
.tags-line {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}

.tags-label {
    margin-right: 6px;
    opacity: 0.95;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
}
.tag-badge:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
}
.tag-badge:active {
    transform: translateY(1px);
}

/* Chat-Fehlermeldung (dezent aber deutlich rot) */
.bubble.chat-error-msg {
    border: 1px solid rgba(255, 68, 68, 0.55) !important;
    background: rgba(255, 68, 68, 0.10) !important;
    color: var(--danger) !important;
}

#login-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111827; /* bg-gray-900 */
    z-index: 50;
}

.layout-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.error-message:empty, .success-message:empty {
    display: none !important;
    padding: 0;
    border: none;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    transition: background-color 0.3s;
}
.status-dot.green { background-color: var(--success); }
.status-dot.red { background-color: var(--danger); }

#settings-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    margin-top: 10px;
}


/* Listen-Stil im Bubble WIEDERHERSTELLEN */
.message .bubble ul, .message .bubble ol {
    list-style-type: disc; /* Standard-Punkt wieder aktivieren */
    padding-left: 20px;    /* Einrückung wiederherstellen */
    margin-top: 4px;
    margin-bottom: 8px;
}
.message .bubble ol {
    list-style-type: decimal;
}

.message .bubble li {
    margin-bottom: 2px; /* Kompakterer Abstand zwischen Listenelementen */
    padding-left: 2px;
}

/* --- Kompaktmodus: Dateianalyse-Blöcke (vom JS als .file-analysis markiert) --- */
.message .bubble.file-analysis p {
    margin: 2px 0; /* deutlich kompakter als Browser-Default */
}
.message .bubble.file-analysis hr {
    margin: 10px 0 6px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.message .bubble.file-analysis ul {
    margin-top: 4px;
    margin-bottom: 4px;
}
.message .bubble.file-analysis p b {
    display: inline-block;
    margin: 4px 0 2px;
}

/* --- Upload-Limit UI (10 MB) + Datei-Badges --- */
.file-limit-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    font-size: 0.9rem;
}

.file-badge-label {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}

.file-badge-label--extracted {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: #bbf7d0;
}

.file-badge-label--attachment {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
}

.disabled-by-limit {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* --- GKDB Knowledge Preview Card (editierbar) --- */
.knowledge-preview-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12); /* dezentes Blau (System-Aktion) */
    color: var(--text);
}

.knowledge-preview-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.knowledge-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.knowledge-preview-item {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.25);
}

.knowledge-preview-meta {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.knowledge-preview-link {
    color: #93c5fd;
    text-decoration: underline;
}

.knowledge-preview-editor {
    min-height: 64px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(17, 24, 39, 0.75);
    color: var(--text);
    outline: none;
    white-space: pre-wrap;
}

.knowledge-preview-editor:focus {
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.knowledge-preview-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chat-messages hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 20px 0;
    width: 100%;
}

/* Neue Styles für Nachrichten-Formatierung */
.message-body {
    /* Hauptinhalt der Nachricht - Platzhalter für zukünftige Styles */
    line-height: 1.5;
}

.message-body h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    display: block;
    color: var(--accent);
}

.message-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.message-body li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Absätze kompakter machen (gegen die "riesigen Lücken") */
.message .bubble p {
    margin-bottom: 6px !important; /* Deutlich weniger Abstand als Standard */
    margin-top: 0;
}

/* Störende Trennlinie am Ende der Nachricht ausblenden */
.message-body > hr:last-child,
.message-content > hr:last-child,
.bubble-text > hr:last-child {
    display: none;
}

/* Stilvolle Trennlinien im Footer der Nachricht */
.bot-footer-divider {
    border: none;
    height: 1px;
    background: rgba(99, 102, 241, 0.3);
    margin: 15px 0 10px 0;
}

.model-info-container {
    margin-top: 25px; /* Mehr Abstand zum Ende der Antwort */
}

/* WebKit Scrollbar Styling (für Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
    border: 2px solid var(--panel-2); /* Kleiner Rand für "schwebenden" Look */
}

/* Echtes Schreib-Indikator Styling */
.streaming-active::after {
    content: " ▌";
    animation: blink 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Fix: Abstände nach Headlines kollabieren */
.message-body h4 {
    margin: 15px 0 2px 0 !important; /* Fast kein Abstand nach unten */
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-body p + ul,
.message-body h4 + ul,
.message-body h4 + p {
    margin-top: 2px !important; /* Schließt die Lücke zur Headline */
}

.message-body ul {
    margin-bottom: 10px;
    padding-left: 20px;
}

.message-body li {
    margin-bottom: 4px; /* Kompakte Listen */
}

/* Sidebar Tags Styling */
.sidebar-tag {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    margin-right: 4px;
    margin-bottom: 2px;
}

/* Fix: Kompakte Abstände */
.message-body h4 {
    margin: 8px 0 2px 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.message-body p, .message-body ul {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}
.message-body li {
    margin-bottom: 4px;
}

/* =========================================
   1. CHAT TEXT - ULTRA KOMPAKT (High Density)
   ========================================= */

/* --- FORMATIERUNG & SCHRIFTGRÖSSE --- */

/* --- HIGH DENSITY CHAT FIX --- */

/* --- FINAL HIGH DENSITY FIX --- */

/* Basis-Text */
.message-body {
    font-size: 0.9rem !important;
    line-height: 1.4;
    color: var(--text);
}

/* ÜBERSCHRIFTEN (Legacy-Regel - wird durch die neue Regel bei Zeile 1998 überschrieben) */
/* Diese Regel bleibt für Rückwärtskompatibilität, wird aber von der neuen Regel überschrieben */
.message-body h3 {
    display: block !important; 
    font-weight: 700 !important;
    color: var(--text);
}

/* ABSÄTZE - Ultra Kompakt */
.message-body p {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important; /* Kleiner Abstand zum nächsten Element */
}

/* LISTEN - Eingerückt & Kompakt */
.message-body ul, 
.message-body ol {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    padding-left: 18px !important; /* Sauberer Einzug */
    list-style-position: outside;
}

/* LISTENPUNKTE */
.message-body li {
    margin-bottom: 2px !important; /* Fast kein Abstand zwischen Items */
    line-height: 1.35;
    padding-left: 0 !important;
}

/* FETTGEDRUCKTES */
.message-body b, 
.message-body strong {
    font-weight: 700;
    color: #fff; /* Optional: etwas heller hervorheben */
}

/* H4 KILLER: Falls doch mal ein h4 durchrutscht -> mach es unschädlich */
.message-body h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 10px 0 4px 0;
    display: block;
}

/* MAGIC FIX: Wenn eine Liste nur fette Texte enthält (Pseudo-Headline in Liste), Punkt weg */
.message-body li:has(> b:only-child) {
    list-style-type: none !important;
    margin-left: -18px !important; /* Einrückung aufheben */
    margin-top: 8px !important;
    margin-bottom: 2px !important;
}


/* =========================================
   2. META FOOTER - LUFTIG & AUFGERÄUMT (Wie früher)
   ========================================= */

.meta-container {
    margin-top: 16px;      /* Deutlicher Abstand zum Text */
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px !important;   /* HIER: Wieder 8px Abstand zwischen den Elementen! */
}

/* TRENNSTRICH (Wieder sichtbar und mit Abstand) */
.meta-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1); /* Etwas heller */
    margin: 4px 0 !important; /* Wieder Luft nach oben/unten */
    width: 100%;
}

/* CHIPS (Tags & Quellen) */
.meta-chip {
    text-decoration: none;
    font-weight: 500;
    color: #ffffff !important;
    display: inline-block;
    transition: all 0.2s ease;
}

/* TAGS: GRÜN & WEISS */
.meta-chip.tag-chip {
    background-color: rgba(16, 185, 129, 0.2); 
    border: 1px solid rgba(16, 185, 129, 0.35);
    font-size: 0.8rem;
    padding: 2px 8px; /* Wieder etwas mehr Padding */
    border-radius: 4px;
}

.meta-chip.tag-chip:hover {
    background-color: rgba(16, 185, 129, 0.4);
    border-color: rgba(16, 185, 129, 0.6);
}

/* QUELLEN: LILA & WEISS */
.meta-chip.source-chip {
    background-color: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
}

.meta-chip.source-chip:hover {
    background-color: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
}

.meta-info-row {
    font-size: 0.75rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.85;
}

/* =========================================
   LIGHT MODE (Theming)
   ========================================= */

[data-theme="light"] {
    --bg: #f8fafc;          /* Slate 50 */
    --panel: #ffffff;       /* White */
    --panel-2: #f1f5f9;     /* Slate 100 */
    --text: #0f172a;        /* Slate 900 */
    --muted: #64748b;       /* Slate 500 */
    --border: #e2e8f0;      /* Slate 200 */
    
    --btn-fast-bg: rgba(0, 0, 0, 0.05);
    --btn-deep-bg: #e0e7ff; 
    
    --accent: #4f46e5;      /* Indigo 600 */
    --accent-2: #7c3aed;    /* Violet 600 */

    --tag-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
    --tag-border: rgba(124, 58, 237, 0.35);
    --tag-border-soft: rgba(99, 102, 241, 0.18);
    --tag-shadow: 0 6px 16px rgba(15,23,42,0.08);
    --icon-selected-bg: rgba(79, 70, 229, 0.12);
}

[data-theme="light"] label {
    color: #000;
}

[data-theme="light"] .tag-headline,
[data-theme="light"] .tag-subhead,
[data-theme="light"] .assistant-settings .form-group > label {
    color: #000;
}

/* Explizit: Label "Name Assistent" (für assistantName) im Light Mode schwarz */
[data-theme="light"] #assistant-tab label[for="assistantName"] {
    color: #000 !important;
}

[data-theme="light"] #assistantName,
[data-theme="light"] #assistantFontFamily {
    color: #000 !important;
}

/* Sidebar-Header "Mein Assistent" (botNameDisplay) im Light Mode schwarz */
[data-theme="light"] #botNameDisplay {
    color: #000 !important;
}

[data-theme="light"] .icon-label {
    color: rgba(15, 23, 42, 0.82);
}

[data-theme="light"] .font-size-selector {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(124, 58, 237, 0.06));
    border-color: rgba(79, 70, 229, 0.22);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}

[data-theme="light"] .font-option {
    color: rgba(15, 23, 42, 0.85);
}

[data-theme="light"] body {
    background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.08), transparent 25%), 
                radial-gradient(circle at 80% 0%, rgba(139,92,246,0.08), transparent 25%), 
                var(--bg);
    color: var(--text);
}

[data-theme="light"] .sidebar,
[data-theme="light"] .card,
[data-theme="light"] .login-panel {
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-color: var(--border);
}

[data-theme="light"] .message.user .bubble {
    background: linear-gradient(135deg, #1e293b, #334155); /* Slate 900 zu 700 */
    color: #ffffff;  /* Text bleibt Weiß für Lesbarkeit */
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Schöner Schatten für Tiefe */
}

/* Damit der Avatar dazu passt (falls sichtbar) */
[data-theme="light"] .message.user .avatar {
    background: #e2e8f0;
    color: #1e293b;
}

[data-theme="light"] .message.assistant .bubble {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

[data-theme="light"] .input-area {
    background: var(--panel);
    border-top: 1px solid var(--border);
}

[data-theme="light"] #messageInput {
    background: #f8fafc;
    color: var(--text);
}

[data-theme="light"] .meta-chip {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--text) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .nav-link:hover {
    background: rgba(0,0,0,0.04);
}

/* Light-Mode: Primary Button (Lila-Gradient) */
[data-theme="light"] button.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}

[data-theme="light"] button.primary:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
}

/* Light-Mode: Secondary Button */
[data-theme="light"] button.secondary {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] button.danger-soft {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #111827;
}

[data-theme="light"] button.danger-soft:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.55);
}

[data-theme="light"] button.secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.4);
}

/* Light-Mode: Verlauf-Links schwarz statt grau */
[data-theme="light"] .nav-link,
[data-theme="light"] #recentHistoryListNew .nav-link {
    color: #000000 !important; /* Schwarz im Light-Mode */
}

/* Light-Mode: Datum und Uhrzeit im Verlauf schwarz statt grau */
[data-theme="light"] #recentHistoryListNew .nav-link span,
[data-theme="light"] #recentHistoryListNew .nav-link div span,
[data-theme="light"] #recentHistoryListNew .nav-link div {
    color: #000000 !important; /* Schwarz statt var(--muted) */
    opacity: 1 !important; /* Volle Deckkraft statt 0.7 */
}

/* Light-Mode: Roll-Over-Effekte für ausklappbare Menüs */
[data-theme="light"] #navHome:hover,
[data-theme="light"] #newChatBtn:hover,
[data-theme="light"] .group-header:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
    cursor: pointer;
}

/* Light-Mode: Sub-Tab Hover mit linker Akzent-Linie */
[data-theme="light"] .sub-tab:hover {
    border-left-color: var(--accent) !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

/* Light-Mode: Trennstriche in Untermenüs */
[data-theme="light"] .settings-submenu .nav-link,
[data-theme="light"] .settings-submenu .sub-tab {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Light-Mode: Hover-Effekt in Untermenüs */
[data-theme="light"] .settings-submenu .nav-link:hover,
[data-theme="light"] .settings-submenu .sub-tab:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-bottom-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text) !important;
}

/* Light-Mode: Hintergrund für ausgeklappte Untermenüs */
[data-theme="light"] .settings-submenu:not(.hidden) {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(99, 102, 241, 0.05) 100%
    ) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light-Mode: Aktive Elemente in Untermenüs */
[data-theme="light"] .settings-submenu .nav-link.active,
[data-theme="light"] .settings-submenu .sub-tab.active {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

/* Logo-Wechsel je nach Theme */
.logo-image {
    width: 50px;
    height: auto;
    flex-shrink: 0;
}

/* Dark-Mode: Zeige phoenix-ai.png, verstecke phoenix-ai-white.png */
.logo-dark {
    display: block !important;
}
.logo-light {
    display: none !important;
}

/* Light-Mode: Zeige phoenix-ai-white.png, verstecke phoenix-ai.png */
[data-theme="light"] .logo-dark {
    display: none !important;
}
[data-theme="light"] .logo-light {
    display: block !important;
}

/* =========================================
   LIGHT MODE FINETUNING
   ========================================= */

/* 2. Trennstriche sichtbar machen (waren vorher transparent-weiß) */
[data-theme="light"] .meta-separator,
[data-theme="light"] .bot-footer-divider,
[data-theme="light"] hr {
    background-color: #cbd5e1 !important; /* Mittelgrau statt transparent */
    border-top-color: #cbd5e1 !important;
    height: 1px;
    opacity: 1;
    margin: 8px 0;
}

/* 3. Meta-Infos (Modell & Zeit) dunkel einfärben */
[data-theme="light"] .meta-container,
[data-theme="light"] .meta-info-row, 
[data-theme="light"] .info-line {
    color: #334155; /* Dunkles Grau für Text */
}

/* Modellname: Nutzt die Akzentfarbe (Lila) wie der Senden-Button */
[data-theme="light"] .meta-model,
[data-theme="light"] .meta-model.model-default-color {
    color: var(--accent) !important; /* Lila (#4f46e5) */
    font-weight: 600;
}

/* Zeitstempel: Dunkelgrau */
[data-theme="light"] .message-timestamp, 
[data-theme="light"] .meta-info-row span:last-child {
    color: #64748b; /* Slate 500 */
}

/* Quellen-Links im Footer besser sichtbar machen */
[data-theme="light"] .meta-chip.source-chip,
[data-theme="light"] .source-link {
    background: #e0e7ff !important; /* Ganz helles Lila Hintergrund */
    border-color: #c7d2fe !important;
    color: #4338ca !important; /* Dunkles Indigo für Text */
}
[data-theme="light"] .meta-chip.source-chip:hover,
[data-theme="light"] .source-link:hover {
    background: #c7d2fe !important;
}

/* Tags (Pills) anpassen */
[data-theme="light"] .tag-badge,
[data-theme="light"] .meta-chip.tag-chip {
    background: #ffedd5 !important; /* Helles Orange Hintergrund */
    border-color: #fed7aa !important;
    color: #c2410c !important; /* Dunkles Orange Text */
}

/* =========================================
   FINAL LIGHT MODE FIXES & FORMATTING
   ========================================= */

/* 1. FORMATIERUNG KORRIGIEREN (Listenpunkte neben Text) */
.message-body ul, .bubble-text ul,
.message-body ol, .bubble-text ol {
    list-style-position: outside !important; /* Punkt steht links außen */
    padding-left: 20px !important;
    margin-left: 4px !important;
}

.message-body li, .bubble-text li {
    display: list-item !important; /* Erzwingt Standard-Verhalten */
    margin-bottom: 4px !important;
}

/* Verhindert, dass Absätze IN Listenpunkten den Punkt nach oben schieben */
.message-body li p, .bubble-text li p {
    display: inline !important; 
    margin: 0 !important;
}


/* 2. USER BUBBLE: Transparentes Lila & Dunkle Schrift */
[data-theme="light"] .message.user .bubble {
    /* Sehr transparentes Lila (12% Deckkraft) */
    background: rgba(99, 102, 241, 0.12) !important; 
    
    /* Feiner Rahmen für Kontur */
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    
    /* WICHTIG: Dunkle Schrift (Dunkles Indigo), da Hintergrund hell ist */
    color: #312e81 !important; 
    
    box-shadow: none !important; /* Flacher "Ghost"-Look */
}

/* Avatar anpassen */
[data-theme="light"] .message.user .avatar {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}


/* 3. QUELLENANGABEN (Sichtbar machen) */
/* Wir zielen auf BEIDE möglichen Klassen (alte und neue Struktur) */
[data-theme="light"] .source-link,
[data-theme="light"] .meta-chip.source-chip {
    display: inline-flex !important; /* Sicherstellen, dass sie nicht hidden sind */
    background-color: #f1f5f9 !important; /* Helles Grau */
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important; /* Dunkles Slate-Grau für Text */
}
[data-theme="light"] .source-link:hover,
[data-theme="light"] .meta-chip.source-chip:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}
/* Icons in den Quellen dunkel machen */
[data-theme="light"] .source-link-icon {
    color: #64748b !important;
    opacity: 1 !important;
}


/* 4. MODELL & DATUM (Dunkles Lila / Schwarz) */
/* Überschriften für Modellname, Zeitstempel und Info-Zeile */
[data-theme="light"] .meta-info-row,
[data-theme="light"] .info-line,
[data-theme="light"] .message-timestamp {
    color: #1e1b4b !important; /* Fast Schwarz (Midnight Blue) */
    opacity: 1 !important;
}

[data-theme="light"] .meta-model {
    color: #4f46e5 !important; /* Sattes Lila (wie Senden-Button) */
    font-weight: 700 !important;
}

/* Trennstriche im Footer deutlich sichtbar machen */
[data-theme="light"] .bot-footer-divider,
[data-theme="light"] .meta-separator {
    background-color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* =========================================
   SETTINGS UI REDESIGN & FONT SCALING
   ========================================= */

/* --- 1. THEME CARDS (Stylische Auswahl) --- */
.theme-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.theme-card {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid var(--border);
    overflow: hidden;
    transition: all 0.2s ease;
    background: var(--panel);
}

.theme-card:hover {
    transform: translateY(-1px);
    border-color: var(--muted);
}

/* Der Input ist unsichtbar, steuert aber den Status */
.theme-card input {
    display: none;
}

/* Aktiver Status (Blauer Rahmen) */
.theme-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.theme-preview {
    height: 50px;
    width: 100%;
    position: relative;
}

/* Dark Preview Style */
.theme-preview.dark-preview {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.theme-preview.dark-preview::after {
    content: "🌙";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

/* Light Preview Style */
.theme-preview.light-preview {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.theme-preview.light-preview::after {
    content: "☀️";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

.theme-label {
    padding: 6px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    border-top: 1px solid var(--border);
}

/* --- 2. FONT SIZE SELECTOR (Segmented Control) --- */
.font-size-selector {
    display: flex;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    padding: 4px;
    gap: 3px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.font-option {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 5px;
    color: rgba(229, 231, 235, 0.92);
    transition: all 0.2s;
    user-select: none;
    font-weight: 500;
    border: 1px solid transparent;
}

.font-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

/* Aktive Schriftgröße */
.font-option.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(99,102,241,0.22);
    border-color: rgba(255,255,255,0.14);
}
/* Im Lightmode andere Textfarbe für aktive Option */
[data-theme="light"] .font-option.active {
    color: #fff;
}


/* --- 3. CHAT-TEXT, LISTEN & TYPOGRAPHIE (FINAL) --- */
:root {
    --chat-font-scale: 1;
}

/* 1. INPUT & BASIS */
#messageInput {
    font-size: calc(1rem * var(--chat-font-scale)) !important;
    line-height: 1.5 !important; 
    padding: 12px;
}

.message-body, .bubble-text, .message-content {
    font-size: calc(1rem * var(--chat-font-scale)) !important;
    line-height: 1.6 !important; 
}

/* 2. ÜBERSCHRIFTEN MIT SYMBOLEN */
/* Basis-Styling für alle Headlines */
.message-body h1, .bubble-text h1,
.message-body h2, .bubble-text h2,
.message-body h3, .bubble-text h3 {
    margin-top: 1.4em !important;    
    margin-bottom: 0.6em !important; 
    line-height: 1.3 !important;
    font-weight: 700;
    position: relative; /* Für die Positionierung der Symbole */
}

/* Schriftgrößen: Hierarchie h1 > h2 > h3 > p (normaler Text) */
.message-body h1, .bubble-text h1 {
    font-size: calc(1.5rem * var(--chat-font-scale)) !important;
}

.message-body h2, .bubble-text h2 {
    font-size: calc(1.25rem * var(--chat-font-scale)) !important;
}

.message-body h3, .bubble-text h3 {
    font-size: calc(1.1rem * var(--chat-font-scale)) !important; /* Größer als normaler Text (1rem) */
}
/* Erste Überschrift ohne Abstand nach oben */
.message-body > *:first-child { margin-top: 0 !important; }

/* H1: Großes Haupt-Symbol (z.B. Raute/Hash wie in Markdown) */
.message-body h1::before, .bubble-text h1::before {
    content: "#"; 
    color: var(--accent);
    margin-right: 8px;
    font-weight: 300;
    opacity: 0.8;
}

/* H2: Sekundär-Symbol (Doppel-Slash, sehr technisch/modern) */
.message-body h2::before, .bubble-text h2::before {
    content: "//"; 
    color: var(--accent);
    margin-right: 8px;
    font-weight: 300;
    letter-spacing: -1px;
    opacity: 0.8;
}

/* H3: Tertiär-Symbol (Pfeil/Bullet) */
.message-body h3::before, .bubble-text h3::before {
    content: "›"; 
    color: var(--accent);
    margin-right: 6px;
    font-weight: 600;
}

/* 3. NORMALE ABSÄTZE */
.message-body p, .bubble-text p {
    margin-bottom: 12px !important; 
    margin-top: 0 !important;
}

/* 4. LISTEN (KOMPLETT BEREINIGT) */
/* Container */
.message-body ul, .bubble-text ul,
.message-body ol, .bubble-text ol {
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    padding-left: 24px !important;
    margin-left: 0 !important;
    list-style-position: outside !important;
}

/* DER BR-KILLER: Entfernt störende Umbrüche in Listen */
.message-body ul br, .bubble-text ul br,
.message-body ol br, .bubble-text ol br,
.message-body li br, .bubble-text li br {
    content: none !important;
    display: none !important;
}

/* Listenpunkte (LI) */
.message-body li, .bubble-text li {
    margin-bottom: 4px !important;
    padding-left: 4px !important;
    line-height: 1.5 !important;
    display: list-item !important;
}

/* Text innerhalb von Listenpunkten */
.message-body li p, .bubble-text li p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important; /* Inline sorgt für perfekten Fluss */
}

/* 5. CODE BLÖCKE */
.message-body pre, .bubble-text pre {
    font-size: calc(0.9rem * var(--chat-font-scale)) !important;
    margin: 12px 0 !important;
}

/* 6. LIGHT MODE TEXT FIX */
/* Zwingt fetten Text und Headlines im Light Mode dunkel zu sein */
[data-theme="light"] .message-body strong,
[data-theme="light"] .message-body b,
[data-theme="light"] .message-body h1,
[data-theme="light"] .message-body h2,
[data-theme="light"] .message-body h3 {
    color: var(--text) !important;
}

/* Token-Stats Ausklapp-Animation */
#userTokenStatsList {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
    overflow: hidden;
}

#userTokenStatsList.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#userTokenStatsList:not(.hidden) {
    max-height: 2000px;
    opacity: 1;
}

/* Token-Verbrauchsbalken: Hintergrund im Light Mode sichtbar machen */
.token-progress-bar {
    background: rgba(255,255,255,0.1) !important;
}

[data-theme="light"] .token-progress-bar {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* --- Global Progress (z.B. für Löschaktionen) --- */
.global-progress {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.global-progress .progress-bar {
    margin-top: 8px;
}

.global-progress .progress-bar > div.indeterminate {
    animation: globalIndeterminate 1.1s ease-in-out infinite;
    will-change: transform;
}

@keyframes globalIndeterminate {
    0% { transform: translateX(-80%); }
    50% { transform: translateX(80%); }
    100% { transform: translateX(-80%); }
}

/* =========================================
   MÜLLEIMER-BUTTON STYLING (Trash Buttons)
   ========================================= */

/* 1. Delete-Button in Dateiliste (.btn-delete) */
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    background: rgba(156, 163, 175, 0.08);
    border: 2px solid rgba(239, 68, 68, 0.75);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    color: inherit;
}

.btn-delete:hover {
    background: rgba(156, 163, 175, 0.12);
    border-color: rgba(239, 68, 68, 0.9);
    transform: scale(1.05);
}

.btn-delete:active {
    transform: scale(0.95);
}

/* 2. Clear Context Button - nur das Icon stylen */
#clearContextBtn {
    text-align: left;
    display: flex;
    align-items: center;
}

#clearContextBtn .trash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    margin-right: 6px;
    border-radius: 6px;
    background: rgba(156, 163, 175, 0.08);
    border: 2px solid rgba(239, 68, 68, 0.75);
    transition: all 0.2s ease;
}

#clearContextBtn:hover .trash-icon {
    background: rgba(156, 163, 175, 0.12);
    border-color: rgba(239, 68, 68, 0.9);
}

/* 3. Remove Instruction Box Button */
.instruction-box {
    display: flex;
    align-items: center;
    text-align: left;
}

button[onclick*="removeInstructionBox"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(156, 163, 175, 0.08) !important;
    border: 2px solid rgba(239, 68, 68, 0.75) !important;
    color: var(--text) !important;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

button[onclick*="removeInstructionBox"]:hover {
    background: rgba(156, 163, 175, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
    transform: translateY(-1px);
}

button[onclick*="removeInstructionBox"]:active {
    transform: scale(0.95);
}

/* 4. Bestätigungs-Popup Titel - nur das Icon stylen */
#confirmDeleteTitle {
    display: flex;
    align-items: center;
    text-align: left;
}

#confirmDeleteTitle .trash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 8px;
    border-radius: 0;
    background: transparent;
    border: none;
}

/* Light Mode Anpassungen */
[data-theme="light"] .btn-delete {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.75);
}

[data-theme="light"] .btn-delete:hover {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.9);
}

[data-theme="light"] #clearContextBtn .trash-icon {
    background: transparent;
    border: none;
    color: #dc2626;
    padding: 0;
    margin-right: 8px;
}

[data-theme="light"] #clearContextBtn:hover .trash-icon {
    background: transparent;
    border: none;
    color: #b91c1c;
}

[data-theme="light"] button[onclick*="removeInstructionBox"] {
    background: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.75) !important;
}

[data-theme="light"] button[onclick*="removeInstructionBox"]:hover {
    background: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
}

[data-theme="light"] #confirmDeleteTitle .trash-icon {
    background: transparent;
    border: none;
    padding: 0;
}

/* =========================================
   LIGHT MODE: DATEIVERWALTUNG (Sidebar)
   ========================================= */

/* Active File Container - besserer Hintergrund und Kontrast */
[data-theme="light"] .active-file-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* Verhindert Verschiebung - Container bleibt stabil */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Header "Dateien im Kontext" - gut lesbar */
[data-theme="light"] .active-file-header {
    color: #0f172a;
    font-weight: 700;
}

/* Datei-Liste Items - besserer Kontrast */
[data-theme="light"] .active-file-list li {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    max-width: 100%; /* Nutzt die volle Container-Breite */
    box-sizing: border-box;
}

[data-theme="light"] .active-file-list li:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Dateiname - gut lesbar */
[data-theme="light"] .active-file-list li .file-item-name {
    color: #0f172a;
    font-weight: 500;
}

/* Allgemeine file-item-name im Light-Mode */
[data-theme="light"] .file-item-name {
    color: #0f172a;
}

/* Admin Toggle "In GKDB speichern" - gut lesbar */
[data-theme="light"] .active-file-admin-toggle {
    color: #475569;
    font-weight: 500;
}

[data-theme="light"] .active-file-admin-toggle input[type="checkbox"] {
    accent-color: #4f46e5;
}

/* Secondary Buttons - einheitliches transparentes Design (Light Mode) */
[data-theme="light"] .btn-secondary-sidebar {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #0f172a;
    font-weight: 600;
    text-align: center;
}

[data-theme="light"] .btn-secondary-sidebar:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.36);
    color: #0f172a;
}

/* Entfernen-Button - zentriert im Light-Mode */
[data-theme="light"] #clearContextBtn {
    text-align: center;
    justify-content: center;
}

/* Papierkorb-Icon - ohne Hintergrund und Umrahmung */
[data-theme="light"] #clearContextBtn .trash-icon {
    background: transparent;
    border: none;
    color: #dc2626;
    padding: 0;
    margin-right: 8px;
}

[data-theme="light"] #clearContextBtn:hover .trash-icon {
    background: transparent;
    border: none;
    color: #b91c1c;
}

/* Upload-Buttons - einheitliches transparentes Design (Light Mode) */
[data-theme="light"] .upload-btn-unified {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #0f172a !important;
}

[data-theme="light"] .upload-btn-unified:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.36);
}

/* Analyse-Buttons - einheitliches transparentes Design (Light Mode) */
[data-theme="light"] #btnAnalyzeFast.btn-analyze-fast,
[data-theme="light"] #btnAnalyzeDeep.btn-analyze-deep {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: #0f172a !important;
}

/* =========================================
   BESTÄTIGUNGS-POPUP (Delete Confirmation)
   ========================================= */

.confirm-modal-content {
    max-width: 450px;
    width: 90%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: confirmModalFadeIn 0.2s ease-out;
}

@keyframes confirmModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- Admin: Inline Loading Spinner (z.B. Verlauf löschen) --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes softPulse {
    0% { opacity: 0.85; }
    50% { opacity: 1; }
    100% { opacity: 0.85; }
}

.inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -2px;
    margin-right: 8px;
}

.admin-loading-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(99, 102, 241, 0.10);
    animation: softPulse 1.2s ease-in-out infinite;
}

.btn-busy {
    opacity: 0.7;
    pointer-events: none;
}

.confirm-modal-header {
    margin-bottom: 16px;
}

.confirm-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.confirm-modal-body {
    margin-bottom: 24px;
}

.confirm-modal-body p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}

.confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.confirm-btn-cancel {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text);
}

.confirm-btn-cancel:hover {
    background: var(--panel-2);
    border-color: var(--muted);
    transform: translateY(-1px);
}

.confirm-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
}

.confirm-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: rgba(239, 68, 68, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Light Mode Anpassungen */
[data-theme="light"] .confirm-modal-content {
    background: var(--panel);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

[data-theme="light"] .confirm-btn-cancel {
    background: var(--panel-2);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .confirm-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--muted);
}

[data-theme="light"] .confirm-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}

[data-theme="light"] .confirm-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* =========================================
   ASSISTANT-BEREICH OPTIMIERUNG
   ========================================= */

/* Kompaktere Darstellung für Assistent-Bereich */
#assistant-tab {
    padding: 0;
}

#assistant-tab h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

#assistant-tab .form-group {
    margin-bottom: 8px !important;
}

#assistant-tab label {
    margin-bottom: 4px !important;
    font-size: 0.85rem !important;
    color: var(--muted);
}

#assistant-tab .select,
#assistant-tab input[type="text"] {
    padding: 8px !important;
    font-size: 0.9rem;
}

#assistant-tab button.primary {
    padding: 10px !important;
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Meldung nach Speichern - kompakt und gut sichtbar */
#assistantMessage {
    font-size: 0.85rem !important;
    min-height: 20px;
    margin-top: 8px !important;
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

#assistantMessage.success-message,
#assistantMessage.error-message {
    display: block !important;
}

#assistantMessage.success-message {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

#assistantMessage.error-message {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* =========================================
   PASSWORT-BEREICH OPTIMIERUNG (Admin)
   ========================================= */

/* Kompaktere Darstellung für Passwort-Bereich */
#password-user-tab {
    padding: 0;
}

#password-user-tab h2 {
    margin-bottom: 12px;
    font-size: 1.3rem;
}

#password-user-tab .form-group {
    margin-bottom: 10px !important;
}

#password-user-tab label {
    margin-bottom: 4px !important;
    font-size: 0.9rem !important;
    color: var(--muted);
}

#password-user-tab .select,
#password-user-tab input[type="password"] {
    padding: 10px !important;
    font-size: 0.9rem;
}

#password-user-tab button.primary {
    padding: 10px !important;
    font-size: 0.9rem;
    margin-top: 8px;
}

#password-user-tab #passwordUserMessage,
#password-user-tab #adminPasswordMessage {
    font-size: 0.85rem;
    min-height: 20px;
}

/* Admin-Passwort-Reset Bereich */
#adminPasswordReset {
    margin-top: 20px !important;
    padding-top: 15px !important;
}

#adminPasswordReset h3 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    font-weight: 600;
}

/* --- Benutzerverwaltung: Neues Design --- */
.user-management-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.user-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.user-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-header {
    margin-bottom: 16px;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.user-status {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    width: fit-content;
}

.user-status.active {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.user-status.locked {
    color: var(--danger);
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.user-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s;
    width: 100%;
    justify-content: space-between;
}

.toggle-switch:hover {
    background: rgba(255, 255, 255, 0.03);
}

.toggle-switch input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}

.toggle-label {
    font-size: 0.9rem;
    color: var(--text);
    flex: 1;
}

.toggle-status {
    font-size: 0.9rem;
    min-width: 24px;
    text-align: center;
}

.toggle-status.enabled {
    color: var(--success);
}

.toggle-status.disabled {
    color: var(--muted);
}

.btn-menu-visibility {
    width: 100%;
    padding: 10px 16px;
    background: var(--btn-fast-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-menu-visibility:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.registration-section {
    margin-top: 24px;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

/* Menü-Sichtbarkeits-Modal */
.menu-visibility-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.menu-item-parent {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    font-weight: 600;
}

.menu-item-parent:hover {
    background: rgba(255, 255, 255, 0.03);
}

.menu-item-parent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}

.menu-item-child {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 8px 6px 32px;
    border-radius: 6px;
    transition: background-color 0.2s;
    font-weight: 400;
}

.menu-item-child:hover {
    background: rgba(255, 255, 255, 0.02);
}

.menu-item-child input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.menu-label {
    color: var(--text);
    font-size: 0.9rem;
}

.menu-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 8px;
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

/* Light-Mode Anpassungen für Benutzerverwaltung */
[data-theme="light"] .user-card {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .user-card:hover {
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .user-status.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .user-status.locked {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .toggle-switch:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .btn-menu-visibility {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e5e7eb;
}

[data-theme="light"] .btn-menu-visibility:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.4);
}

[data-theme="light"] .registration-section {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .menu-group {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .menu-item-parent:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .menu-item-child:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .menu-children {
    border-left-color: #e5e7eb;
}

/* --- Kompakte Benutzerverwaltung mit Accordion --- */
.user-management-accordion {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
    user-select: none;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.accordion-icon {
    font-size: 0.9rem;
    color: var(--muted);
    transition: transform 0.2s;
}

.accordion-content {
    padding: 16px;
}

.user-management-container-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-card-compact {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.2s;
}

.user-card-compact:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

.user-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.user-name-compact {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.user-status-compact {
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
}

.user-status-compact.active {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.user-status-compact.locked {
    color: var(--danger);
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.user-actions-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-action-toggle {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--btn-fast-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.btn-action-toggle.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
    color: var(--accent);
}

.btn-action-menu {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--btn-fast-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action-menu:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.registration-section-compact {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.section-title-compact {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

/* Light-Mode Anpassungen für kompakte Benutzerverwaltung */
[data-theme="light"] .user-management-accordion {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .accordion-header {
    background: #f9fafb;
    border-bottom-color: #e5e7eb;
}

[data-theme="light"] .accordion-header:hover {
    background: #f3f4f6;
}

[data-theme="light"] .user-card-compact {
    background: #f9fafb;
    border-color: #e5e7eb;
}

[data-theme="light"] .user-card-compact:hover {
    border-color: rgba(79, 70, 229, 0.4);
}

[data-theme="light"] .user-status-compact.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .user-status-compact.locked {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .btn-action-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e5e7eb;
}

[data-theme="light"] .btn-action-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.4);
}

[data-theme="light"] .btn-action-toggle.active {
    background: rgba(79, 70, 229, 0.15);
    border-color: rgba(79, 70, 229, 0.4);
    color: #4f46e5;
}

[data-theme="light"] .btn-action-menu {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e5e7eb;
}

[data-theme="light"] .btn-action-menu:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.4);
}

[data-theme="light"] .registration-section-compact {
    background: #ffffff;
    border-color: #e5e7eb;
}

/* =========================================
   GOOGLE WORKSPACE SECTION
   ========================================= */

.google-workspace-section {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.3s ease;
}

.google-workspace-section:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.google-workspace-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.google-workspace-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(91, 33, 182, 0.1));
    border: 2px solid rgba(124, 58, 237, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif;
    width: 100%;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.google-workspace-title:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(91, 33, 182, 0.2));
    border-color: rgba(124, 58, 237, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25);
}

.google-workspace-title::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.google-workspace-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Google Services Icons - Lebendigeres Design */
.google-services-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.google-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.google-service-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.google-service-icon:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(99, 102, 241, 0.6);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3), 0 0 20px rgba(99, 102, 241, 0.2);
    color: #ffffff;
}

.google-service-icon:hover::before {
    width: 120%;
    height: 120%;
}

.google-service-icon:active {
    transform: translateY(-1px) scale(1.02);
}

.google-service-icon svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: filter 0.3s ease;
}

.google-service-icon:hover svg {
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.4));
}

/* Spezifische Farben für jeden Service */
.google-service-icon:nth-child(1):hover {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.3), rgba(25, 118, 210, 0.25));
    border-color: rgba(66, 133, 244, 0.7);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.3), 0 0 20px rgba(66, 133, 244, 0.2);
}

.google-service-icon:nth-child(2):hover {
    background: linear-gradient(135deg, rgba(251, 188, 5, 0.3), rgba(245, 124, 0, 0.25));
    border-color: rgba(251, 188, 5, 0.7);
    box-shadow: 0 6px 16px rgba(251, 188, 5, 0.3), 0 0 20px rgba(251, 188, 5, 0.2);
}

.google-service-icon:nth-child(3):hover {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.3), rgba(211, 47, 47, 0.25));
    border-color: rgba(234, 67, 53, 0.7);
    box-shadow: 0 6px 16px rgba(234, 67, 53, 0.3), 0 0 20px rgba(234, 67, 53, 0.2);
}

/* Google Connect Button - Stylisches Design */
.btn-google-connect {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(25, 118, 210, 0.1));
    border: 2px solid rgba(66, 133, 244, 0.3);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.btn-google-connect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-google-connect:hover::before {
    left: 100%;
}

.btn-google-connect:hover {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.25), rgba(25, 118, 210, 0.2));
    border-color: rgba(66, 133, 244, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.25);
}

.btn-google-connect:active {
    transform: translateY(0);
}

.google-g-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #4285F4;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.btn-google-connect:hover .google-g-icon {
    background: #34A853;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 2px 8px rgba(52, 168, 83, 0.4);
}

.google-g-text {
    color: white;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Roboto', 'Arial', sans-serif;
    line-height: 1;
    letter-spacing: -0.5px;
}

.google-btn-text {
    white-space: nowrap;
}

/* Light Mode Anpassungen */
[data-theme="light"] .google-workspace-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .google-workspace-section:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .google-workspace-title {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(91, 33, 182, 0.08));
    border: 2px solid rgba(124, 58, 237, 0.35);
    color: var(--text);
}

[data-theme="light"] .google-workspace-title:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(91, 33, 182, 0.15));
    border-color: rgba(124, 58, 237, 0.5);
}

[data-theme="light"] .google-workspace-header {
    border-bottom-color: rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .google-services-icons {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .google-service-icon {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.03));
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: var(--text);
}

[data-theme="light"] .google-service-icon:hover {
    color: #ffffff;
}

[data-theme="light"] .btn-google-connect {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.12), rgba(25, 118, 210, 0.08));
    border: 2px solid rgba(66, 133, 244, 0.35);
    color: var(--text);
}

[data-theme="light"] .btn-google-connect:hover {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.2), rgba(25, 118, 210, 0.15));
    border-color: rgba(66, 133, 244, 0.5);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.2);
}

/* =========================================
   KALENDER-EVENT-CARDS (Verbessertes Design)
   ========================================= */

/* Container: Nutzt volle Breite des Chat-Bubbles */
.cal-event-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%; /* Volle Breite */
    margin-top: 10px;
    margin-bottom: 15px;
    /* Verhindert Layout-Verschiebungen beim Hinzufügen des Drop-Downs */
    position: relative;
}

/* =========================================
   GOOGLE KALENDER SCHEDULE VIEW
   ========================================= */

.gcal-schedule-view {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 15px;
}

.gcal-empty {
    text-align: center;
    color: var(--muted);
    padding: 20px;
    font-size: 0.9rem;
}

.gcal-day-group {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Datums-Header */
.gcal-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.gcal-day-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 32px;
}

.gcal-day-number {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    min-width: 32px;
    text-align: center;
}

.gcal-month-year {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
}

/* Heutiger Tag hervorheben */
.gcal-day-group.gcal-today .gcal-date-header {
    border-bottom-color: var(--accent);
}

.gcal-day-group.gcal-today .gcal-day-name {
    color: var(--accent);
    font-weight: 700;
}

.gcal-day-group.gcal-today .gcal-day-number {
    color: var(--accent);
    font-weight: 700;
}

.gcal-day-group.gcal-today .gcal-month-year {
    color: var(--accent);
    font-weight: 600;
}

/* Events-Liste */
.gcal-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 44px; /* Einrückung für Alignment mit Datum */
}

/* Event-Zeile */
.gcal-event-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.gcal-event-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Zeit-Anzeige */
.gcal-time {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
    min-width: 80px;
    flex-shrink: 0;
    font-family: 'Roboto Mono', monospace;
}

/* Farbindikator (Marker) */
.gcal-marker {
    width: 4px;
    height: auto;
    min-height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Event-Details */
.gcal-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gcal-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

.gcal-location {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.3;
}

.gcal-calendar-name {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.9;
}

/* Light Mode Anpassungen */
[data-theme="light"] .gcal-event-row:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .gcal-date-header {
    border-bottom-color: var(--border);
}

[data-theme="light"] .gcal-day-group.gcal-today .gcal-date-header {
    border-bottom-color: var(--accent);
}


/* Versteckte Event-Cards - Sanfte Transition */
.cal-event-card {
    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
}

.cal-event-card.hidden {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

/* Die Karte selbst */
.cal-event-card {
    /* Standard (Dark Mode): Dunkler Hintergrund, aber heller als Main BG */
    background-color: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 5px !important; /* Dickerer Farbbalken links */
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}


/* Zeit-Anzeige: Hell und deutlich */
.cal-time {
    font-family: monospace; /* Für Tabellen-Look */
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0; /* Fast Weiß im Dark Mode */
    margin-bottom: 4px;
    display: block;
    line-height: 1.4;
}

/* Titel: Groß und gut lesbar */
.cal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc; /* Weiß */
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Badge/Label im Tag-Style */
.cal-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    color: #fff;
    text-transform: none; /* Keine Großbuchstaben für natürlicheren Tag-Look */
    letter-spacing: 0.02em;
    align-self: flex-start;
    margin-top: 8px;
    /* Schatten für bessere Lesbarkeit des Textes auf der Pastellfarbe */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    /* Tag-Style: Subtiler Look */
    opacity: 0.9;
    transition: opacity 0.2s;
}

.cal-badge:hover {
    opacity: 1;
}

/* --- LIGHT MODE SUPPORT --- */
[data-theme="light"] .cal-event-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

[data-theme="light"] .cal-time {
    color: #334155; /* Dunkelgrau */
}

[data-theme="light"] .cal-title {
    color: #0f172a; /* Fast Schwarz - WICHTIG für User */
}

[data-theme="light"] .cal-badge {
    /* Im Light Mode: Badge behält Farbe, aber Text wird dunkler für bessere Lesbarkeit */
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    opacity: 0.95;
}

/* Legacy: Alte calendar-badge Klasse für Rückwärtskompatibilität */
.calendar-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #3b82f6;
    color: white;
    font-size: 0.75em;
    font-weight: 500;
    margin-right: 5px;
    vertical-align: middle;
    border: none;
}

/* =========================================
   KALENDER TAGESGRUPPIERUNG (Neues Design - Links-Rechts Layout)
   ========================================= */

/* Container: Breiter mit Padding */
.cal-container {
    width: 100%;
    min-width: 600px;
    padding: 10px 20px;
    margin: 0;
}

/* Erlaube breitere Bubbles für Kalender */
.message.assistant:has(.cal-container) .bubble {
    max-width: 95% !important;
}

/* Zeile pro Tag: Flexbox mit vertikaler Zentrierung */
.cal-day-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    gap: 20px;
}

.cal-day-row:last-child {
    border-bottom: none;
}

/* Linke Spalte: Datum (Wochentag + Tag) */
.cal-date-col {
    width: 80px;
    min-width: 80px;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Wochentag */
.cal-date-weekday {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* Tag-Zahl */
.cal-date-day {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--muted);
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
    line-height: 1;
}

/* Rechte Spalte: Termine */
.cal-events-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Event-Card: Mehr Padding und Margin für besseres Spacing */
.cal-event-card {
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

/* Header-Zeile: Punkt, Zeit, Badge - alles vertikal zentriert */
.cal-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    line-height: 1;
}

/* Punkt in Kalenderfarbe */
.cal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zeitangabe */
.cal-time {
    font-weight: bold;
    color: #888;
    min-width: 45px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* Kalendername - normale Schrift mit Farbe */
.cal-calendar-name {
    display: inline-block;
    align-self: center !important;
    margin-top: 0 !important;
    margin-left: 0;
    margin-right: 8px;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
}

/* Body-Zeile: Titel mit Einrückung */
.cal-row-body {
    margin-left: 22px; /* Dot-Width 10px + Gap 12px = 22px */
}

/* Titel des Termins */
.cal-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}

/* =========================================
   DARK MODE KALENDER (Standard)
   ========================================= */

/* Dark Mode: Stärkerer Gradient und Glow für die Zahl */
.cal-date-day {
    filter: drop-shadow(0 4px 16px rgba(99, 102, 241, 0.4)) 
            drop-shadow(0 2px 8px rgba(139, 92, 246, 0.3));
}

/* =========================================
   DARK MODE KALENDER ANPASSUNGEN
   ========================================= */

/* Dark Mode: Event-Punkte mit stärkerem Glow */
.cal-event-dot {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 
                0 0 12px rgba(99, 102, 241, 0.15);
}

/* =========================================
   LIGHT MODE KALENDER ANPASSUNGEN
   ========================================= */

[data-theme="light"] .cal-day-row {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cal-date-weekday,
[data-theme="light"] .cal-date-day {
    color: var(--muted);
}

[data-theme="light"] .cal-event-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cal-time {
    color: #666;
}

[data-theme="light"] .cal-dot {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 
                0 0 8px rgba(99, 102, 241, 0.1);
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.quick-reply {
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
    background-color: #007bff;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.9em;
    border: none;
    transition: background 0.2s;
}
.quick-reply:hover {
    background-color: #0056b3;
}

/* E-Mail Karten Design */
.mail-card {
    background: #f8fafc !important; /* Sehr helles Grau/Weiß */
    border-left: 5px solid var(--accent); /* Blauer Streifen links */
    border-radius: 8px;
    padding: 16px;
    margin: 15px 0;
    color: #1e293b !important; /* Dunkelgrau/Schwarz für Text */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.mail-card b, .mail-card strong {
    color: #0f172a !important; /* Tiefschwarz für Absender/Betreff */
}

.mail-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: #4a5568; /* Dunkelgrau für Metadaten */
    font-size: 0.85em;
}

.mail-sender {
    color: var(--accent);
    font-weight: bold;
}

.mail-subject {
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #0f172a !important;
}

.mail-preview {
    color: #334155 !important; /* Dunkler Text für die 5 Sätze */
    margin-top: 10px;
    line-height: 1.6;
    font-size: 0.95em;
}

.mail-footer-nav {
    border-top: 2px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 20px;
}