/* Orqenio Webchat – Claude-/ChatGPT-inspiriert, hell/dunkel, zugänglich. */
:root {
    --bg: #f7f7f5; --surface: #ffffff; --surface-2: #ececea; --sidebar: #f0efec;
    --text: #1a1a17; --muted: #6d6d66; --border: #dcdbd5;
    --accent: #b45f47; --accent-text: #ffffff; --danger: #c0392b;
    --accent-dark: #af4f34;
    --user-bubble: #e8e7e2; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1915; --surface: #24231e; --surface-2: #2f2e28; --sidebar: #201f1a;
        --text: #eceae4; --muted: #a5a398; --border: #3a382f;
        --accent: #c9785d; --accent-text: #1a1915; --danger: #ff7b6b;
        --accent-dark: #af4f34;
        --user-bubble: #33322b;
    }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.55 system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button {
    font: inherit; cursor: pointer; border: 1px solid var(--border);
    background: transparent; color: var(--text); border-radius: 8px; padding: 6px 12px;
}
button:hover { background: var(--surface-2); }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}
button.danger { color: var(--danger); border-color: var(--danger); }
.brandMark { color: var(--accent); }
/* Orqenio-Marke: skaliert über font-size des Elternelements, Farbe folgt --accent. */
.brandGlyph { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }

/* ---------------------------------- Icons ---------------------------------
 * Font Awesome (PRO Duotone → Free Solid → Emoji-Fallback). Die .ico-Spans
 * werden per JS gefüllt; Duotone-Farben folgen dem Akzent des Themes. */
.ico { display: inline-block; min-width: 1.15em; text-align: center; }
.ico .fa-duotone {
    --fa-primary-color: var(--accent);
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.45;
}
button.danger .ico .fa-duotone, .listActionBtn .ico .fa-duotone { --fa-primary-color: var(--danger); }
.primaryAction .ico .fa-duotone { --fa-primary-color: var(--accent); }
#sendBtn .ico .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }
.projectDeleteChoices { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.projectDeleteChoices button { text-align: left; }

/* ------------------------------- Anmeldung ------------------------------- */
.authView { display: flex; align-items: center; justify-content: center; height: 100%; }
.authCard {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 32px; width: min(400px, 92vw); display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.authCard .brandMark { font-size: 28px; text-align: center; }
.authCard h1 { margin: 0; font-size: 24px; text-align: center; font-weight: 650; }
.authHint { margin: 0 0 10px; color: var(--muted); font-size: 0.9em; text-align: center; }
.authCard label { font-weight: 600; font-size: 0.88em; }
.authCard input {
    font: inherit; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg); color: var(--text);
}
.authCard button { margin-top: 12px; background: var(--accent); color: var(--accent-text); border-color: var(--accent); padding: 10px; }
.authError { color: var(--danger); min-height: 1.2em; margin: 8px 0 0; font-size: 0.9em; text-align: center; }

/* -------------------------------- Sidebar -------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w, 270px) 1fr; height: 100%; }
body.navCollapsed .app { grid-template-columns: 58px 1fr; }
.sidebar { position: relative; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.brandRow { padding: 14px 12px 10px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.brandRowMain { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.collapseToggle { border: none; background: none; color: var(--muted); padding: 4px 6px; border-radius: 6px; flex-shrink: 0; }
.collapseToggle:hover { color: var(--text); background: var(--surface-2); }
/* Ziehbarer Rand (Breite verstellen); im eingeklappten Zustand aus. */
.sidebarResize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 3; }
body.navCollapsed .sidebarResize { display: none; }
body.resizingNav { cursor: col-resize; user-select: none; }

/* Eingeklappt: nur Icons (Small-Ansicht), alles zentriert. Der ⟩-Button
 * bleibt sichtbar (zurück zur großen Navigation). */
body.navCollapsed .brandName,
body.navCollapsed .sidebarSearch,
body.navCollapsed .sectionLabel,
body.navCollapsed .chatList,
body.navCollapsed .bulkBar,
body.navCollapsed .listActions,
body.navCollapsed .newChatRow .tempToggle,
body.navCollapsed .whoAmI,
body.navCollapsed .navLabel { display: none; }
body.navCollapsed .sidebarActions { align-items: stretch; }
body.navCollapsed .sidebarActions button,
body.navCollapsed .minorActions { padding: 0; }
body.navCollapsed .sidebarActions button,
body.navCollapsed .sidebarBottom button { justify-content: center; display: flex; padding: 9px 0; }
body.navCollapsed .minorActions { flex-direction: column; gap: 6px; }
body.navCollapsed .newChatRow { flex-direction: column; }
body.navCollapsed .sectionRow { justify-content: center; padding: 6px 0; flex-direction: column; gap: 6px; }
/* Eingeklappt: nur das 💬-Symbol – Auswahl/Import/Archiv/Papierkorb wandern ins Modal. */
body.navCollapsed .sectionToggles { display: none; }
/* „Chats"-Button nur im eingeklappten Zustand (öffnet die Chats als Liste). */
.chatsMenuBtn { display: none; border: none; background: none; color: var(--muted); padding: 9px 0; border-radius: 8px; width: 100%; justify-content: center; }
.chatsMenuBtn:hover { color: var(--text); background: var(--surface-2); }
body.navCollapsed .chatsMenuBtn { display: flex; }
/* User-Bereich ganz nach unten schieben (Chatliste ist eingeklappt weg). */
body.navCollapsed .sidebarBottom { margin-top: auto; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px 16px; }
body.navCollapsed .userAvatar { margin: 0 auto; }
body.navCollapsed .brandRow { justify-content: center; }
body.navCollapsed .collapseToggle { margin: 0; }

/* Chats-Modal (eingeklappte Navigation) */
.chatsModalList { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.chatsModalRow { display: flex; align-items: stretch; border-radius: 8px; }
.chatsModalRow.active { background: var(--surface-2); }
.chatsModalRow:hover { background: var(--surface-2); }
.chatsModalOpen { flex: 1; min-width: 0; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 8px; overflow: hidden; }
.chatsModalMeta { display: block; font-size: 0.74em; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatsModalMenu { border: none; background: none; padding: 0 10px; color: var(--muted); border-radius: 8px; }
.chatsModalMenu:hover { color: var(--text); }
.chatsModalCheck { align-self: center; margin: 0 4px 0 8px; }
.chatsModalTabs { display: flex; gap: 6px; margin: 6px 0; }
.chatsModalTab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--border); background: none; color: var(--muted); border-radius: 8px; font-size: 0.9em; }
.chatsModalTab.active { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.chatsModalTools { display: flex; gap: 6px; margin-bottom: 4px; }
.chatsModalTool { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); background: none; color: var(--muted); border-radius: 8px; font-size: 0.86em; }
.chatsModalTool.active { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.chatsModalCount { flex: 1; align-self: center; color: var(--muted); font-size: 0.9em; }
.sidebarActions { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.primaryAction { background: var(--surface); font-weight: 600; text-align: left; }
.sidebarActions button { text-align: left; }
/* Neuer-Chat-Zeile: primäre Aktion + Temp-Switch (⏳). */
.newChatRow { display: flex; gap: 6px; }
.newChatRow .primaryAction { flex: 1; }
.tempToggle { flex-shrink: 0; text-align: center; padding: 6px 10px; }
.tempToggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* Größere Bereiche (Projekte/Personas) leicht hervorgehoben. */
.navMajor { font-weight: 600; }
/* Nebensächliches als kompakte Icon-Reihe. */
.minorActions { display: flex; gap: 6px; margin-top: 2px; }
.minorActions button { flex: 1; text-align: center; padding: 6px; color: var(--muted); }
.minorActions button:hover { color: var(--text); }
.sidebarSearch { padding: 0 10px 6px; }
.sidebarSearch input {
    width: 100%; font: inherit; font-size: 0.9em; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
}
.chatItemSnippet {
    display: block; font-size: 0.76em; opacity: 0.75; font-weight: 400;
    white-space: normal; overflow: hidden; max-height: 2.6em;
}
.sectionRow { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px; }
.sectionLabel { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sectionToggles { display: flex; gap: 2px; }
#trashToggle, #archiveToggle { border: none; padding: 2px 8px; }
#trashToggle[aria-pressed="true"], #archiveToggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
/* Sammel-Aktionen unter der Chat-Liste (Alles löschen / Papierkorb leeren). */
.listActions { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--border); }
/* Mehrfach-Auswahl (Bulk-Bar + Checkbox) */
.bulkBar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 0.85em; }
.bulkBar.hidden { display: none; }
#bulkCount { font-weight: 600; white-space: nowrap; }
.bulkActions { margin-left: auto; display: flex; gap: 4px; }
.bulkActions button { font-size: 0.9em; padding: 5px 9px; white-space: nowrap; }
.bulkActions .danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.chatItemCheck { margin: 0 6px 0 2px; align-self: center; flex-shrink: 0; }
#selectToggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.chatItem.selected { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.listActionBtn { font-size: 0.85em; text-align: left; color: var(--danger); border-color: transparent; }
.listActionBtn:hover { border-color: var(--danger); }
.chatList { flex: 1; overflow-y: auto; padding: 4px 8px; }
.chatItem {
    display: flex; flex-direction: column; border-radius: 8px; margin-bottom: 1px;
}
.chatItemTop { display: flex; align-items: stretch; }
.chatItemChips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 7px; }
.chip {
    border: none; border-radius: 10px; padding: 1px 8px; font-size: 0.7em;
    background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.chip:hover { background: var(--accent); color: var(--accent-text); }
.chip.chipCat { background: var(--border); color: var(--text); font-weight: 600; }
.chip.chipCat:hover { background: var(--accent); color: var(--accent-text); }
.chatItem:hover, .chatItem:focus-within { background: var(--surface-2); }
.chatItem.active { background: var(--surface-2); font-weight: 600; }
.chatItem.temp { font-style: italic; }
.chatItemMain {
    flex: 1; min-width: 0; text-align: left; border: none; background: none;
    padding: 8px 10px; border-radius: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatItemMain:hover { background: none; }
.chatItemMeta { display: block; font-size: 0.74em; opacity: 0.65; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.chatItemQuick {
    border: none; background: none; padding: 0 8px; border-radius: 8px;
    opacity: 0; flex-shrink: 0; font-size: 0.9em;
}
.chatItem:hover .chatItemQuick, .chatItemQuick:focus-visible, .chatItem:focus-within .chatItemQuick { opacity: 0.8; }
.chatItemQuick:hover { opacity: 1; background: var(--border); }

/* Mini-Icons unter dem Listeneintrag: Modi (🧠/🗣), Persona (🎭/🎓), Freigaben (🌐) */
.chatItemBadges {
    display: flex; gap: 6px; align-items: center;
    padding: 0 10px 6px; font-size: 0.72em; opacity: 0.75;
}
.modeBadge { display: inline-flex; align-items: center; cursor: default; }
.modeBadge.prep { animation: badgePulse 1.6s ease-in-out infinite; }
.modeBadge.failed { color: var(--danger); }
@keyframes badgePulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Persona-Modal: Lernmodus-Zeile + Lektionen */
.personaLearnRow { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; }
.personaLessons .taskRow { display: flex; align-items: flex-start; gap: 8px; }
/* Lektionen sind ganze Sätze – im Persona-Dialog umbrechen statt kürzen. */
.personaLessons .lessonText { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
.lessonText { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kontextmenü der Chatliste (⋯-Button und Rechtsklick) */
.chatMenu {
    position: fixed; z-index: 60; min-width: 230px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22); padding: 6px;
    display: flex; flex-direction: column;
}
.chatMenuItem {
    display: flex; align-items: center; gap: 8px;
    border: none; background: none; text-align: left;
    padding: 8px 10px; border-radius: 8px; font-size: 0.92em; width: 100%;
}
.chatMenuItem:hover { background: var(--surface-2); }
.chatMenuItem.danger { color: var(--danger); }
.chatMenuSep { height: 1px; background: var(--border); margin: 5px 4px; }
.chatMenuLabel {
    font-size: 0.72em; color: var(--muted); padding: 4px 10px 2px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
/* Menüzeile mit Schalter (🔒 Ver-/Entschlüsseln der Session) */
.chatMenuSwitch .switch { margin-left: auto; }
.switch {
    position: relative; display: inline-block; flex-shrink: 0;
    width: 34px; height: 19px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    transition: background 0.15s ease;
}
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.disabled { opacity: 0.5; }
.switchKnob {
    position: absolute; top: 1px; left: 1px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
    transition: left 0.15s ease;
}
.switch.on .switchKnob { left: 16px; border-color: var(--accent-text); }
.emptyNote { color: var(--muted); text-align: center; margin: 30px 8px; font-size: 0.9em; }
.sidebarBottom {
    padding: 14px 14px 16px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.userAvatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.whoAmI { flex: 1; font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logoutBtn { border: none; font-size: 16px; padding: 4px 8px; }

/* ------------------------------ Hauptbereich ------------------------------ */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.chatHeader {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.chatTitle { margin: 0; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tempBadge {
    font-size: 0.72em; padding: 2px 8px; border-radius: 10px;
    background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border);
}
.chatActions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* Kompakte Kopfzeile: nur Icons (Text als Tooltip). Nahm sonst zu viel Raum. */
.chatActions button { font-size: 0.95em; padding: 6px 8px; }
.chatActions .hlabel { display: none; }

/* Leerer Chat: zentrierte Begrüßung + Composer in der Mitte */
.hero { display: none; text-align: center; }
.main.empty .hero { display: block; margin: auto 0 24px; }
.main.empty .messages { display: none; }
.main.empty .composerWrap { margin: 0 auto auto; width: min(760px, 94%); }
.main.empty { justify-content: center; }
.heroMark {
    font-size: 38px; color: var(--accent); margin: 0 0 8px;
    filter: drop-shadow(0 4px 14px rgba(180, 95, 71, 0.35));
}
.hero h2 { margin: 0 0 6px; font-size: 30px; font-weight: 650; letter-spacing: -0.01em; }
.heroSub { margin: 0; color: var(--muted); }

.messages { flex: 1; overflow-y: auto; padding: 24px 0; scroll-behavior: smooth; }
.msgRow { width: min(780px, 94%); margin: 0 auto 20px; animation: msgIn 0.25s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msgRow.user { display: flex; justify-content: flex-end; }
.userMsg {
    background: linear-gradient(135deg, var(--user-bubble), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: 18px 18px 4px 18px; padding: 10px 16px;
    max-width: 85%; overflow-wrap: break-word; white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Assistenten-Antwort mit dezenter Marken-Kennung (nur echte Antworten,
 * nicht Arbeitsschritte-Blöcke; ohne :has-Support fehlt nur das Symbol). */
.msgRow.assistant { position: relative; padding-left: 26px; }
.msgRow.assistant:has(.assistantMsg)::before {
    content: "◆"; position: absolute; left: 0; top: 1px;
    color: var(--accent); font-size: 13px; opacity: 0.85;
}
.assistantMsg { overflow-wrap: break-word; line-height: 1.62; }
.assistantMsg pre { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 0.88em; }
.assistantMsg code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
/* Code-/Textblöcke mit Kopf (Sprach-Label + Kopieren + Ausklappen) */
.codeWrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 8px 0; background: var(--surface); }
.codeHead {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: 0.78em;
}
.codeHead .codeLang { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; flex: 1; }
.codeBtn { border: none; background: transparent; color: var(--muted); padding: 2px 6px; border-radius: 6px; font-size: 0.95em; }
.codeBtn:hover { background: var(--border); color: var(--text); }
.codeWrap pre.codeBlock { margin: 0; border-radius: 0; background: var(--surface); max-height: 340px; }
.codeWrap.expanded pre.codeBlock { max-height: none; }
/* Syntax-Farben (nur bei echtem Code) */
.tok-kw { color: #b45f9e; }
.tok-str { color: #4c9a52; }
.tok-com { color: var(--muted); font-style: italic; }
.tok-num { color: #c07a3e; }
@media (prefers-color-scheme: dark) {
    .tok-kw { color: #d78fc4; }
    .tok-str { color: #8fce93; }
    .tok-num { color: #e0a56a; }
}
/* Inline-Bild in einer Chat-Antwort (z. B. /bild) */
.chatImage { display: block; max-width: min(420px, 100%); border-radius: 10px; margin-top: 8px; border: 1px solid var(--border); }
/* Bibliothek: Bild-Galerie + Dateiliste */
.mediaBody { max-height: 60vh; overflow-y: auto; }
.mediaGallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mediaTile { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); color: var(--muted); }
.mediaTile img { width: 100%; height: 100%; object-fit: cover; }
/* Globale Bibliothek: Gruppen je Chat */
.mediaGroup { margin-bottom: 14px; }
.mediaGroupTitle { display: block; width: 100%; text-align: left; border: none; background: none; color: var(--accent); font-weight: 600; padding: 6px 2px; font-size: 0.92em; }
.mediaGroupTitle:hover { text-decoration: underline; background: none; }
.assistantMsg h2, .assistantMsg h3, .assistantMsg h4 { margin: 10px 0 4px; }
.assistantMsg .li { padding-left: 8px; }
.assistantMsg .gap { height: 8px; }
.assistantMsg hr { border: none; border-top: 1px solid var(--border); }
.msgMeta { display: block; margin-top: 6px; font-size: 0.72em; color: var(--muted); }

/* Arbeitsschritte („Thinking") */
.steps {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 10px; font-size: 0.85em;
}
.steps summary { cursor: pointer; color: var(--muted); font-weight: 600; user-select: none; }
/* Denkblock/Arbeitsschritte höhenbegrenzt + eigener Scroll: Während der
 * Generierung wächst der Block sonst endlos und blockiert das Scrollen der
 * Seite. Jetzt scrollt nur die Liste intern; die Seite bleibt bedienbar. */
.steps ol { margin: 6px 0 2px; padding-left: 20px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.steps li { margin: 2px 0; color: var(--muted); }
.steps li.current { color: var(--text); }
.steps li.failed { color: var(--danger); }
.steps li.clickable { cursor: pointer; }
/* Modellaufrufe (🧠, mit Eingabe/Ausgabe) farblich abgehoben */
.steps li.modelCallStep
{
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding-left: 6px;
    margin-left: -8px;
    border-radius: 2px;
}
.steps li.modelCallStep:hover { color: var(--accent); }
.steps li.clickable:hover { color: var(--text); text-decoration: underline dotted; }
.steps li.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Live entstehende Antwort (Streaming) – ebenfalls höhenbegrenzt + scrollbar. */
.liveAnswer { white-space: pre-wrap; color: var(--muted); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.liveAnswer::after { content: "▍"; color: var(--accent); animation: liveBlink 1s steps(1) infinite; }
@keyframes liveBlink { 50% { opacity: 0; } }

/* Schritt-Detail-Modal */
.stepDetails {
    background: var(--surface-2); border-radius: 8px; padding: 10px 12px;
    font-size: 0.8em; overflow: auto; max-height: 50vh; white-space: pre-wrap; word-break: break-word;
}

/* Senden-Button im Stop-Modus */
.composer button.stopMode { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ------------------------------- AI Studio ------------------------------- */

/* 🎛 Modi-Button (Thinking/Debatte/Studio in EINEM Popover): aus = neutral,
 * ≥1 Modus aktiv = Akzentfarbe + Zähler-Badge. */
#modesBtn { position: relative; background: transparent; border: 1px solid var(--border); color: var(--muted); }
#modesBtn:hover { color: var(--text); background: var(--surface-2); }
#modesBtn.modesOn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.modesBadge {
    position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px;
    border-radius: 8px; background: var(--accent-dark); color: #fff;
    font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px;
}
.modesMenu { min-width: 270px; }

/* 📥 Warteschlange + ⚡ Einwerfen (nur sichtbar, solange ein Lauf arbeitet) */
#queueBtn { background: transparent; border: 1px solid var(--border); color: var(--muted); }
#queueBtn:hover { color: var(--text); background: var(--surface-2); }
#steerBtn { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
#steerBtn:hover { background: var(--accent); color: var(--accent-text); }
.queueChip { border-style: dashed; }

.studioHint { color: var(--muted); font-size: 0.85em; margin: 4px 0 10px; }

.studioServerRow
{
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}

.studioServerRow select, .studioServerRow input
{
    padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
}

.studioStatus { margin: 8px 0 4px; font-size: 0.9em; color: var(--muted); }

.studioLogs
{
    background: var(--surface-2); border-radius: 8px; padding: 8px 10px;
    font-size: 0.78em; max-height: 180px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
}

.studioEmpty { color: var(--muted); font-size: 0.9em; }

.linklike
{
    background: none; border: none; color: var(--text); cursor: pointer;
    text-align: left; padding: 4px 0; font: inherit;
}

.linklike:hover { text-decoration: underline; }

#studioPreviewLink { font-weight: 600; }

/* --------------------- Verbindungen & Kontingente --------------------- */

.connRow { display: block; }

.connHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.connBadge
{
    font-size: 0.75em; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}

.connBadge.ok { background: color-mix(in srgb, #2e9e5b 18%, transparent); color: #2e9e5b; }
.connBadge.overloaded { background: color-mix(in srgb, #cc8800 18%, transparent); color: #cc8800; }
.connBadge.quota_exhausted { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.connBadge.unavailable { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }

.chip.chipUnavailable { opacity: 0.45; text-decoration: line-through; }

.connMeta { color: var(--muted); font-size: 0.85em; margin-top: 4px; }

.connModels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.stepSectionTitle { font-size: 0.85em; margin: 10px 0 4px; color: var(--muted); }

/* Quellen / Visualisierungen / Angebote */
.sources { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.sources summary { cursor: pointer; font-size: 0.85em; color: var(--muted); }
.sources a { color: var(--accent); word-break: break-all; }
.sources .srcMeta { font-size: 0.78em; color: var(--muted); margin-bottom: 6px; }
.vizCard, .offerCard, .pricePanel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px; margin-top: 10px;
}
.vizTitle, .offerTitle { font-weight: 650; margin-bottom: 6px; }
.vizBarRow { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 8px; align-items: center; margin: 3px 0; }
.vizBarLabel { font-size: 0.85em; color: var(--muted); }
.vizBarTrack { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.vizBarFill { height: 100%; background: var(--accent); border-radius: 6px; min-width: 2px; }
.vizBarVal { font-size: 0.82em; white-space: nowrap; }
.vizLine { width: 100%; height: 90px; display: block; color: var(--accent); }
.vizMeta, .vizSource { font-size: 0.8em; color: var(--muted); margin-top: 4px; }
.vizTable { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: 0.85em; }
.vizTable th, .vizTable td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.vizKpiValue { font-size: 1.6em; font-weight: 700; }
.offerHead { display: flex; align-items: center; gap: 8px; }
.offerBadge { font-size: 0.72em; padding: 1px 8px; border-radius: 10px; background: var(--accent); color: var(--accent-text); }
.offerPrice { font-size: 1.15em; font-weight: 700; margin: 4px 0; }
.kv { font-size: 0.88em; line-height: 1.55; }
.kvKey { color: var(--muted); }
.offerLink { display: inline-block; margin-top: 6px; color: var(--accent); text-decoration: none; }
.offerLink:hover { text-decoration: underline; }

/* Composer */
.composerWrap { padding: 8px 0 14px; position: relative; }
/* Befehls-Vorschläge (/aufgabe …) über dem Eingabefeld */
.cmdSuggest {
    position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%);
    width: min(780px, 94%); z-index: 25;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.12); overflow: hidden;
}
.cmdSuggestItem {
    display: block; width: 100%; text-align: left;
    border: none; border-radius: 0; padding: 8px 14px;
}
.cmdSuggestItem.first, .cmdSuggestItem:hover { background: var(--surface-2); }
.cmdHint { color: var(--muted); font-size: 0.85em; }
.composer {
    display: flex; align-items: center; gap: 8px;
    width: min(780px, 94%); margin: 0 auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    padding: 10px 10px 10px 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,0.09); }
.composer textarea {
    flex: 1; font: inherit; resize: vertical; border: none; background: transparent;
    color: var(--text); max-height: 420px; min-height: 24px; padding: 4px 0;
}
/* Slash-Befehl als Highlight-Chip vor dem Eingabefeld */
.cmdChip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    background: var(--accent); color: var(--accent-text);
    border-radius: 10px; padding: 3px 8px; font-size: 0.85em; font-weight: 600;
    align-self: flex-end; margin-bottom: 6px;
}
.cmdChipRemove {
    border: none; background: transparent; color: var(--accent-text);
    padding: 0 2px; font-size: 0.9em; opacity: 0.8;
}
.cmdChipRemove:hover { opacity: 1; background: transparent; }
.composer textarea:focus { outline: none; }
.composer button {
    background: var(--accent); color: var(--accent-text); border-color: var(--accent);
    border-radius: 12px; width: 38px; height: 38px; padding: 0; font-size: 15px; flex-shrink: 0;
}

.composer button:disabled { opacity: 0.4; cursor: default; }
.composerHint { width: min(780px, 94%); margin: 6px auto 0; font-size: 0.72em; color: var(--muted); text-align: center; }
#attachBtn {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    border-radius: 10px; width: 34px; height: 34px; padding: 0; font-size: 17px; flex-shrink: 0;
}
#attachBtn:hover { color: var(--text); background: var(--surface-2); }
#modelSelect {
    font: inherit; font-size: 0.8em; max-width: 140px; flex-shrink: 0;
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 8px; padding: 5px 6px;
}
#modelSelect:focus-visible { outline: 2px solid var(--accent); }
.attachChips {
    display: flex; flex-wrap: wrap; gap: 6px;
    width: min(780px, 94%); margin: 0 auto 6px;
}
.attachChip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 3px 6px 3px 10px; font-size: 0.8em; max-width: 240px;
}
.attachChip .chipName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachChip .chipMeta { color: var(--muted); flex-shrink: 0; }
.attachChip button {
    border: none; background: none; padding: 0 4px; font-size: 0.95em; color: var(--muted);
}
.attachChip button:hover { color: var(--danger); background: none; }
.attachNote { display: block; margin-top: 6px; font-size: 0.78em; opacity: 0.75; }

/* Modal (Berechtigungen / Rückfragen) */
.modalOverlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
/* Das generische Dialog-Modal (Berechtigungen, 12-Wörter, Rückfragen) liegt
 * IMMER über den Panel-Overlays (Einstellungen/Projekte/Studio …). */
#modalOverlay { z-index: 80; }
/* Anlege-Modal der Personas liegt ÜBER der Personas-Seite. */
#personaCreateOverlay { z-index: 85; }
.pageHeadActions { display: flex; align-items: center; gap: 8px; }
.pageHeadActions .allow { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.modalCard {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 22px 24px; width: min(520px, 92vw); max-height: 84vh; overflow-y: auto;
    box-shadow: 0 18px 60px rgba(0,0,0,0.25);
}
.modalCard h2 { margin: 0 0 8px; font-size: 18px; }
.modalCard .modalReason { color: var(--muted); font-size: 0.9em; margin: 0 0 12px; }
.modalButtons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.modalButtons .allow { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.qField { margin-bottom: 14px; }
.qLabel { font-weight: 600; margin-bottom: 2px; }
.qReason { font-size: 0.82em; color: var(--muted); margin-bottom: 6px; }
.qOption { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.qText, .qOtherText {
    display: block; width: 100%; font: inherit; padding: 8px 10px; margin-top: 4px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.qOtherText { margin-left: 24px; width: calc(100% - 24px); }
.qError { color: var(--danger); font-size: 0.85em; min-height: 1.2em; margin-top: 8px; }
.assistantMsg a { color: var(--accent); word-break: break-all; }
.mdTableWrap { overflow-x: auto; margin: 8px 0; }
.mdTable { border-collapse: collapse; font-size: 0.9em; min-width: 50%; }
.mdTable th, .mdTable td { border: 1px solid var(--border); padding: 4px 10px; text-align: left; }
.mdTable th { background: var(--surface-2); font-weight: 650; }
.mdTable tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }

/* Seiten-Overlay (Projekte/Personas): keine kleine Modalkarte, sondern eine
 * eigene Seite – aber NEBEN der Navigation (Sidebar bleibt links sichtbar). */
.modalOverlay.fullPage { background: var(--bg); align-items: stretch; justify-content: stretch; padding: 0; left: var(--sidebar-w, 270px); }
body.navCollapsed .modalOverlay.fullPage { left: 58px; }
@media (max-width: 760px) { .modalOverlay.fullPage { left: 0; } }
.modalOverlay.fullPage .pageCard {
    background: var(--bg); border: none; border-radius: 0; box-shadow: none;
    width: 100%; max-width: 1100px; margin: 0 auto; max-height: none; height: 100%;
    overflow-y: auto; padding: 20px 24px 40px;
}
.modalOverlay.fullPage .tasksHead { position: sticky; top: 0; background: var(--bg); padding: 8px 0 12px; border-bottom: 1px solid var(--border); z-index: 2; }

/* Aufgaben-Panel */
.tasksCard { width: min(680px, 94vw); }
.tasksHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tasksHead h2 { margin: 0; }
.taskCreate { display: flex; gap: 6px; margin-bottom: 14px; }
.taskCreate input[type="text"] {
    flex: 1; font: inherit; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.taskCreate select { font: inherit; font-size: 0.9em; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.tasksList { display: flex; flex-direction: column; gap: 10px; }
.taskRow { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
/* Untergeordnete Chats eines Projekts (Projekte-Seite) */
.projectChats { margin: 8px 0 0; padding-left: 8px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.projectChatEmpty { color: var(--muted); font-size: 0.82em; padding: 2px 4px; }
.projectChatLink {
    display: flex; align-items: center; gap: 6px; text-align: left; width: 100%;
    border: none; background: none; padding: 4px 6px; border-radius: 6px; font-size: 0.9em;
}
.projectChatLink:hover { background: var(--surface-2); }
.projectChatMeta { margin-left: auto; color: var(--muted); font-size: 0.78em; }
.taskHead { display: flex; align-items: center; gap: 8px; }
.taskTitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.taskHeadBtns { display: flex; gap: 6px; flex-shrink: 0; }
/* Persona-Zeilen: Info links (Name + Status-Badges), Aktionen rechts. */
.personaRow { display: flex; align-items: center; gap: 12px; }
.personaInfo { flex: 1; min-width: 0; }
.personaName { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personaMeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.personaBadge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.76em;
    padding: 1px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.personaBadge.ready { color: #4c9a52; }
.personaBadge.preparing { color: var(--accent); }
.personaBadge.failed { color: var(--danger); }
.personaBadge.learn { color: var(--accent); }
.personaBadge.training { color: var(--accent); }
.personaActions { display: flex; gap: 6px; flex-shrink: 0; }

/* --- Lauf-Tabs: Arbeitsschritte | Gedanken ------------------------------ */
.runTabs { display: flex; gap: 4px; margin: 8px 0 6px; border-bottom: 1px solid var(--border); }
.runTab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 6px 10px; font: inherit; font-size: 0.85em; color: var(--muted); cursor: pointer;
}
.runTab:hover { color: var(--text); }
.runTab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.thoughtsPanel { padding: 4px 0 2px; }
.thoughtBlock { margin-bottom: 12px; }
.thoughtHead { font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.thoughtBody {
    margin: 0; padding: 10px 12px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 0.86em; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
    max-height: 420px; overflow-y: auto;
}

/* --- Kalender: Agenda-Ansicht ------------------------------------------- */
.calendarDay {
    margin: 18px 0 8px; font-size: 0.82em; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted);
}
.calendarDay:first-child { margin-top: 4px; }
.calendarRow { display: flex; align-items: flex-start; gap: 12px; }
.calendarRow.calendarOff { opacity: 0.55; }
.calendarTime { flex: 0 0 auto; min-width: 48px; font-variant-numeric: tabular-nums; font-weight: 650; }
.calendarBody { flex: 1; min-width: 0; }
.calendarTitle { font-weight: 600; overflow-wrap: anywhere; }
.calendarMeta { font-size: 0.78em; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.calendarPrompt {
    font-size: 0.82em; color: var(--muted); margin-top: 6px; padding-left: 10px;
    border-left: 2px solid var(--border); overflow-wrap: anywhere;
}
/* Bestätigung im Chat, wenn aus einer Nachricht ein Termin wurde. */
.reminderChip {
    display: inline-flex; align-items: center; gap: 6px; margin: 6px 0;
    padding: 5px 10px; border-radius: 10px; font-size: 0.84em;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}

/* --- Persona-Verwaltung als eigene Seite (#personaDetailOverlay) --------- */
#personaDetailOverlay { z-index: 60; }
/* Statuszeile ganz oben: farbig nach Zustand. */
.personaHero {
    border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px;
    background: var(--surface); padding: 12px 16px; margin: 14px 0 18px;
}
.personaHero-ready { border-left-color: #4c9a52; }
.personaHero-failed { border-left-color: var(--danger); }
.personaHeroText { line-height: 1.5; }
.personaHeroTask { margin-top: 8px; font-size: 0.82em; color: var(--muted); overflow-wrap: anywhere; }
/* Abschnittskarten – geben dem vielen Inhalt Struktur. */
.personaSection { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin-bottom: 16px; }
.personaSectionTitle { margin: 0; font-size: 15px; font-weight: 650; }
.personaSectionHint { margin: 4px 0 0; color: var(--muted); font-size: 0.86em; line-height: 1.5; }
.personaSectionBody { margin-top: 12px; }
.personaRoleText, .personaDossier { line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.personaDossier { margin-top: 10px; font-size: 0.94em; }
/* Kennzahlen der Einarbeitung. */
.personaStats { display: flex; flex-wrap: wrap; gap: 10px; }
.personaStat { flex: 1 1 110px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.personaStatValue { font-size: 1.25em; font-weight: 650; }
.personaStatLabel { font-size: 0.78em; color: var(--muted); margin-top: 2px; }
.personaProgress { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 12px 0 4px; }
.personaProgressFill { height: 100%; background: var(--accent); transition: width 0.4s ease; }
/* Aufklappbare Blöcke (Wissen, Protokoll, Dossier). */
.personaDetails { margin-top: 12px; border-top: 1px solid var(--border); }
.personaDetails > summary {
    cursor: pointer; font-size: 0.88em; font-weight: 600; color: var(--muted);
    padding: 10px 0 4px; list-style: revert;
}
.personaDetails > summary:hover { color: var(--text); }
/* Zeilen mit ganzen Sätzen: MÜSSEN umbrechen (keine Ellipse wie .lessonText). */
.personaRowList { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.personaTextRow {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 9px 12px;
}
.personaRowMark { flex-shrink: 0; font-size: 0.95em; line-height: 1.55; color: var(--muted); }
.personaTextRow.conf-verified .personaRowMark { color: #4c9a52; }
.personaTextRow.conf-disputed .personaRowMark { color: #d9a441; }
.personaRowBody { flex: 1; min-width: 0; }
.personaRowText { line-height: 1.55; overflow-wrap: anywhere; }
.personaRowMeta { font-size: 0.76em; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.personaTrainingLog .personaRowText { font-size: 0.9em; }
.personaRoundFailed .personaRowText, .personaRoundFailed .personaRowMark { color: var(--danger); }
p.personaRoundFailed { color: var(--danger); }
/* Steuerzeilen (Takt wählen, einlernen). */
.personaControlRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.personaControlRow .qText { flex: 1 1 240px; width: auto; margin-top: 0; }
.personaSelect { flex: 0 1 320px; }
.personaPageActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 20px 0 8px; }
.personaPageActions .allow { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.iconOnlyBtn { padding: 6px 9px; }
.taskStatus { font-size: 0.78em; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); flex-shrink: 0; }
.taskStatus.st-running, .taskStatus.st-scheduled { background: var(--accent); color: var(--accent-text); }
.taskStatus.st-waiting_for_user { background: #d9a441; color: #1a1915; }
.taskStatus.st-failed, .taskStatus.st-expired { background: var(--danger); color: #fff; }
.taskMeta { font-size: 0.82em; color: var(--muted); margin: 4px 0; }
.taskActions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.taskActions button, .taskDecision button, .taskArtifact { font-size: 0.82em; }
.taskDetails summary { cursor: pointer; font-size: 0.85em; color: var(--muted); }
.taskDecision { border: 1px dashed var(--border); border-radius: 8px; padding: 8px; margin: 8px 0; }
.taskDecision p { margin: 0 0 6px; }
.taskDecision button { margin-right: 6px; }
.taskArtifact { display: block; margin-top: 6px; text-align: left; }

/* Projekt-Detail (§17) */
.projectDetail { margin-top: 10px; }
.projectDetail #projectBackBtn { margin-bottom: 12px; }
.projectDetailActions { justify-content: flex-start; margin: 4px 0 6px; }
.projFilesTitle { margin: 14px 0 8px; font-size: 15px; }
.tasksHead > div { display: flex; gap: 6px; }

/* ------------------------- Feinschliff & Details ------------------------- */

/* Aktiver Chat mit Akzentbalken in der Liste */
.chatItem.active { box-shadow: inset 3px 0 0 var(--accent); }

/* Dezente eigene Scrollbalken (Chrome/Edge/Safari) */
.messages::-webkit-scrollbar, .chatList::-webkit-scrollbar, .modalCard::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb, .chatList::-webkit-scrollbar-thumb, .modalCard::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 8px;
}
.messages::-webkit-scrollbar-thumb:hover, .chatList::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Benutzereinstellungen: Navigation links + Unterseiten rechts */
.settingsCard { width: min(780px, 96vw); }
.settingsLayout { display: grid; grid-template-columns: 200px 1fr; gap: 14px; min-height: 340px; }
.settingsNav { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); padding-right: 10px; }
.settingsNavBtn { text-align: left; border: none; padding: 8px 10px; border-radius: 8px; }
.settingsNavBtn.active { background: var(--surface-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.settingsContent { min-width: 0; }
.settingsSection {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; background: var(--bg);
}
.settingsSectionTitle { margin: 0 0 6px; font-size: 15px; }
@media (max-width: 640px) {
    .settingsLayout { grid-template-columns: 1fr; }
    .settingsNav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 8px; }
}
.profileStatus { color: var(--muted); font-size: 0.85em; align-self: center; }
.memoryText { white-space: normal; font-weight: 400; }
.e2eStatus { font-size: 0.88em; margin: 4px 0 8px; }
.e2eActions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.e2eWords { font-size: 1.05em; letter-spacing: 0.03em; user-select: all; }

/* Orchestrator-Editor (Rolle → geordnete Modell-Kandidaten) */
.orchRoles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .orchRoles { grid-template-columns: 1fr; } }
.orchChips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.orchAuto { color: var(--muted); font-size: 0.85em; }
.orchChip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 2px 8px; font-size: 0.82em;
}
.orchChipOffline { opacity: 0.55; }
.orchChipBtn { border: none; background: transparent; padding: 0 2px; font-size: 0.9em; color: var(--muted); }
.orchChipBtn:hover { color: var(--text); background: transparent; }
.orchAdd { font-size: 0.85em; }

/* Shopping-Ansicht (Angebots-Raster) + Downloads */
.shopHead { font-weight: 700; margin: 10px 0 6px; }
.shopGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.shopGrid .offerCard { margin: 0; display: flex; flex-direction: column; }
.offerRecommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.shopGrid .offerPrice { font-size: 1.35em; font-weight: 750; margin: 4px 0; }
.offerRetailer { color: var(--muted); font-size: 0.85em; margin-bottom: 4px; }
.shopGrid .offerLink {
    margin-top: auto; align-self: flex-start;
    background: var(--accent); color: var(--accent-text) !important;
    border-radius: 8px; padding: 5px 12px; text-decoration: none; font-weight: 600; font-size: 0.9em;
}
.priceLiveNote { color: var(--muted); font-size: 0.8em; margin: 2px 0 8px; }
.downloadCard {
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    padding: 10px 12px; margin-top: 10px;
}
.downloadTitle { font-weight: 700; margin-bottom: 8px; }
.downloadButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.downloadButtons .allow { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* Drop-Ziel beim Chat-Verschieben (Drag&Drop auf ein Projekt) */
.taskRow.dropTarget { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Run-Details je Antwort */
.runDetailsList { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 8px 0 2px; font-size: 0.85em; }
.runDetailsList dt { color: var(--muted); font-weight: 600; }
.runDetailsList dd { margin: 0; overflow-wrap: anywhere; }

/* Lauf-Indikator in der Chatliste */
.ico.spinning .fa-spinner, .ico.spinning { display: inline-block; }
.ico.spinning { animation: orqSpin 1.1s linear infinite; }
@keyframes orqSpin { to { transform: rotate(360deg); } }
/* Wartende Berechtigung eines Chats (🔔 pulsiert dezent) */
.ico.permPending { color: var(--accent); animation: orqPulse 1.4s ease-in-out infinite; }
@keyframes orqPulse { 50% { opacity: 0.35; } }
/* „Vollständig laden" im Schritt-Modal */
.fullLoadRow { justify-content: flex-start; gap: 10px; align-items: center; }
.fullLoadRow .modalReason { font-size: 0.82em; margin: 0; }
#settingsBtn { border: none; padding: 4px 8px; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .messages { scroll-behavior: auto; }
}

/* --------------------------- Mobile Navigation --------------------------- */

.navToggle { display: none; border: none; padding: 4px 10px; font-size: 17px; flex-shrink: 0; }
.sidebarBackdrop {
    position: fixed; inset: 0; z-index: 30;
    background: rgba(0, 0, 0, 0.45);
}
/* Desktop: Backdrop nie anzeigen (Sidebar ist fest verankert). */
@media (min-width: 761px) {
    .sidebarBackdrop { display: none !important; }
}

@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    /* Sidebar als Overlay: per Burger (☰) einblenden, Backdrop schließt. */
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
        width: min(320px, 86vw);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }
    body.navOpen .sidebar { transform: translateX(0); }
    .navToggle { display: inline-flex; align-items: center; justify-content: center; }
    .chatHeader { padding: 10px 12px; }
    .chatActions button { font-size: 0.78em; padding: 5px 8px; }
    .msgRow { width: 94%; }
    .composer { width: 94%; }
    .composerHint { display: none; }
    #modelSelect { max-width: 90px; }
}