/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Das hidden-Attribut muss IMMER gewinnen.
   Der Browser-Standard dafuer ist nur [hidden]{display:none} aus dem UA-Stylesheet — jede
   eigene Regel wie `.offline-banner { display: flex }` schlaegt ihn, und das Element bleibt
   trotz `el.hidden = true` sichtbar. Genau das liess am 02.09.2026 das Offline-Banner
   dauerhaft stehen ("TRON ist gerade nicht erreichbar", obwohl der Dienst lief); dasselbe
   traf perf-bar, context-bar und #chat-screen. Bisher wurde je Komponente eine eigene
   `.x[hidden]`-Regel nachgezogen — was man beim naechsten neuen Bauteil wieder vergisst.
   Diese eine Regel erledigt es ein fuer alle Mal. Sichtbarkeit per Inline-`style.display`
   wird nirgends mit gesetztem hidden-Attribut kombiniert, das !important ist also gefahrlos. */
[hidden] { display: none !important; }

:root {
    /* TRON Legacy Farbpalette (MCPEndOfLine-Stil) */
    --bg: #0a0a0f;
    --bg-surface: #0d0d14;
    --bg-input: #0a0a0f;
    --bg-hover: #16161f;
    --bg-panel: #111119;
    --border: #1e1e2e;
    --border-glow: rgba(0, 212, 255, 0.2);
    --text: #bff8ff;
    --text-muted: #6a6a8a;
    --accent: #00d4ff;
    --accent-hover: #3de6ff;
    --accent-dim: rgba(0, 212, 255, 0.1);
    --accent-border: rgba(0, 212, 255, 0.3);
    --orange: #ff8c00;
    --orange-dim: rgba(255, 140, 0, 0.1);
    --denk: #b894ff;                          /* Denkprozess — bewusst NICHT der Akzent */
    --denk-text: #cdb8f5;
    --denk-bg: rgba(184, 148, 255, 0.07);
    --denk-rand: rgba(184, 148, 255, 0.25);
    --user-bubble: rgba(0, 212, 255, 0.08);
    --bot-bubble: #111119;
    --error: #ff4444;
    --success: #00ff88;
    --radius: 8px;
    --header-h: 56px;
    --ansicht-tabs-h: 33px;
    --input-h: 72px;
    /* Glow-Effekte */
    --glow-cyan: 0 0 15px rgba(0, 212, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.1);
    --glow-cyan-sm: 0 0 8px rgba(0, 212, 255, 0.25);
    --glow-cyan-lg: 0 0 30px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.15);
    --glow-orange: 0 0 15px rgba(255, 140, 0, 0.3), 0 0 30px rgba(255, 140, 0, 0.1);
    /* --- Tiefe -----------------------------------------------------------------
       Die Oberflaeche war flach: Session-Kacheln hatten im Ruhezustand weder Flaeche
       noch Rahmen (man sah sie erst beim Ueberfahren), und Reiter waren blosser Text
       mit Unterstrich. Diese Stufen geben Bauteilen eine erkennbare Ebene, ohne die
       dunkle TRON-Anmutung aufzugeben: Kachel liegt auf der Flaeche, Hover hebt sie
       an, aktiv traegt zusaetzlich die Akzentkante.
       Im Light-Theme werden sie weiter unten mit weicheren Werten ueberschrieben. */
    --kachel-bg: #101018;
    --kachel-bg-hover: #16161f;
    --kachel-rand: #23233a;
    /* In einem Reiter offen (schwach) / gerade aktiv (kraeftig) — dieselbe Farbe, zwei Stufen. */
    --kachel-tab-bg: rgba(0, 212, 255, 0.06);
    --kachel-aktiv-bg: rgba(0, 212, 255, 0.16);
    --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --schatten-2: 0 3px 8px rgba(0, 0, 0, 0.55);
    --kante-innen: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    /* Schriftarten */
    --font-display: 'Orbitron', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Light theme overrides (abgeschwächte TRON-Variante) */
[data-theme="light"] {
    --bg: #f0f4f8;
    --bg-surface: #ffffff;
    --bg-input: #e8ecf1;
    --bg-hover: #dde3ea;
    --bg-panel: #f5f7fa;
    --border: #c8d0da;
    --border-glow: rgba(0, 150, 200, 0.15);
    --text: #1a2030;
    --text-muted: #5a6578;
    --accent: #0088aa;
    --accent-hover: #006688;
    --accent-dim: rgba(0, 136, 170, 0.08);
    --accent-border: rgba(0, 136, 170, 0.25);
    --user-bubble: #e0f4fa;
    --denk: #6b3fc4;
    --denk-text: #5a4480;
    --denk-bg: rgba(107, 63, 196, 0.06);
    --denk-rand: rgba(107, 63, 196, 0.25);
    --bot-bubble: #ffffff;
    --error: #cf222e;
    --success: #1a7f37;
    --glow-cyan: none;
    --glow-cyan-sm: none;
    --glow-cyan-lg: none;
    /* Tiefe im Hellen: Schatten statt Leuchten, sonst wirkt es schmutzig. */
    --kachel-bg: #ffffff;
    --kachel-bg-hover: #f2f6fa;
    --kachel-rand: #d5dde6;
    --kachel-tab-bg: rgba(0, 136, 170, 0.07);
    --kachel-aktiv-bg: rgba(0, 136, 170, 0.18);
    --schatten-1: 0 1px 2px rgba(26, 32, 48, 0.07);
    --schatten-2: 0 3px 8px rgba(26, 32, 48, 0.12);
    --kante-innen: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Light theme — login background */
[data-theme="light"] #login-screen {
    background: radial-gradient(ellipse at center, #e8ecf1 0%, #f0f4f8 70%);
}
[data-theme="light"] #login-screen::before,
[data-theme="light"] #login-screen::after,
[data-theme="light"] .login-grid {
    display: none;
}
[data-theme="light"] .login-box {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Light theme — logo color */
[data-theme="light"] .logo pre {
    color: var(--accent);
    text-shadow: none;
}

/* Light theme — code blocks */
[data-theme="light"] .message.assistant .msg-content pre {
    background: #e4e8ee;
    border-color: #cdd3db;
}
[data-theme="light"] .message.assistant .msg-content code {
    background: #e4e8ee;
    border-color: #cdd3db;
}

/* Light theme — assistant border */
[data-theme="light"] .message.assistant {
    border-color: var(--border);
}

/* Light theme — user bubble text */
[data-theme="light"] .message.user {
    color: var(--text);
}

html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none; /* iOS: kein Dokument-Rubberbanding über den Chat hinweg */
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

/* Custom Scrollbar (TRON-Stil) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.4); }

/* Text-Auswahl */
::selection {
    background: rgba(0, 212, 255, 0.3);
    color: #e0fcff;
}

.screen { height: 100%; }

/* === Login Screen === */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050508;
}

/* TRON Legacy Hintergrund — Himmel + Horizont-Glow */
#login-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Sternen-ähnliche Lichtpunkte */
        radial-gradient(1px 1px at 10% 25%, rgba(0, 212, 255, 0.4), transparent),
        radial-gradient(1px 1px at 22% 18%, rgba(0, 212, 255, 0.3), transparent),
        radial-gradient(1px 1px at 35% 30%, rgba(0, 212, 255, 0.2), transparent),
        radial-gradient(1px 1px at 47% 12%, rgba(0, 212, 255, 0.35), transparent),
        radial-gradient(1px 1px at 62% 22%, rgba(0, 212, 255, 0.25), transparent),
        radial-gradient(1px 1px at 75% 28%, rgba(0, 212, 255, 0.3), transparent),
        radial-gradient(1px 1px at 88% 16%, rgba(0, 212, 255, 0.2), transparent),
        radial-gradient(1.5px 1.5px at 15% 35%, rgba(0, 212, 255, 0.15), transparent),
        radial-gradient(1px 1px at 55% 33%, rgba(0, 212, 255, 0.2), transparent),
        radial-gradient(1px 1px at 80% 20%, rgba(0, 212, 255, 0.3), transparent),
        /* Horizont-Glow (Cyan-Schein) */
        radial-gradient(ellipse 140% 20% at 50% 60%, rgba(0, 212, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 80% 8% at 50% 60%, rgba(0, 230, 255, 0.18) 0%, transparent 60%),
        /* Himmel-Gradient */
        linear-gradient(to bottom,
            #030306 0%,
            #050510 30%,
            #06081a 50%,
            #081425 58%,
            #050510 68%,
            #030306 100%
        );
    z-index: 0;
}

/* TRON Legacy Stadt-Silhouette */
#login-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Ferne kleine Gebäude */
        linear-gradient(to bottom, transparent 50%, #060a14 50%, #060a14 59.5%, transparent 59.5%) no-repeat 3% center / 1.2% 100%,
        linear-gradient(to bottom, transparent 48%, #070c16 48%, #070c16 59.5%, transparent 59.5%) no-repeat 5.5% center / 0.8% 100%,
        linear-gradient(to bottom, transparent 46%, #080e1c 46%, #080e1c 59.5%, transparent 59.5%) no-repeat 9% center / 1% 100%,
        linear-gradient(to bottom, transparent 49%, #060a14 49%, #060a14 59.5%, transparent 59.5%) no-repeat 11% center / 0.6% 100%,
        linear-gradient(to bottom, transparent 44%, #070c16 44%, #070c16 59.5%, transparent 59.5%) no-repeat 15% center / 1.5% 100%,
        linear-gradient(to bottom, transparent 47%, #080e1c 47%, #080e1c 59.5%, transparent 59.5%) no-repeat 20% center / 0.8% 100%,
        linear-gradient(to bottom, transparent 42%, #060a14 42%, #060a14 59.5%, transparent 59.5%) no-repeat 24% center / 1.2% 100%,
        linear-gradient(to bottom, transparent 50%, #070c16 50%, #070c16 59.5%, transparent 59.5%) no-repeat 28% center / 0.7% 100%,
        /* Vordergrund-Gebäude */
        linear-gradient(to bottom, transparent 38%, #0a1420 38%, #0a1420 59.5%, transparent 59.5%) no-repeat 6% center / 2.5% 100%,
        linear-gradient(to bottom, transparent 42%, #091220 42%, #091220 59.5%, transparent 59.5%) no-repeat 10% center / 1.8% 100%,
        linear-gradient(to bottom, transparent 34%, #0c1a2a 34%, #0c1a2a 59.5%, transparent 59.5%) no-repeat 14% center / 2.8% 100%,
        linear-gradient(to bottom, transparent 40%, #0a1624 40%, #0a1624 59.5%, transparent 59.5%) no-repeat 18% center / 2% 100%,
        linear-gradient(to bottom, transparent 30%, #0d1e30 30%, #0d1e30 59.5%, transparent 59.5%) no-repeat 22% center / 1.5% 100%,
        linear-gradient(to bottom, transparent 36%, #0b1828 36%, #0b1828 59.5%, transparent 59.5%) no-repeat 26% center / 3% 100%,
        /* Zentrale Türme */
        linear-gradient(to bottom, transparent 24%, #0e2238 24%, #0e2238 59.5%, transparent 59.5%) no-repeat 32% center / 2% 100%,
        linear-gradient(to bottom, transparent 28%, #0c1c2e 28%, #0c1c2e 59.5%, transparent 59.5%) no-repeat 35% center / 3.5% 100%,
        linear-gradient(to bottom, transparent 18%, #102840 18%, #102840 59.5%, transparent 59.5%) no-repeat 40% center / 2.5% 100%,
        linear-gradient(to bottom, transparent 32%, #0d2034 32%, #0d2034 59.5%, transparent 59.5%) no-repeat 44% center / 1.5% 100%,
        linear-gradient(to bottom, transparent 22%, #0f243c 22%, #0f243c 59.5%, transparent 59.5%) no-repeat 48% center / 2% 100%,
        linear-gradient(to bottom, transparent 26%, #0e2238 26%, #0e2238 59.5%, transparent 59.5%) no-repeat 52% center / 3% 100%,
        linear-gradient(to bottom, transparent 20%, #102840 20%, #102840 59.5%, transparent 59.5%) no-repeat 56% center / 1.8% 100%,
        linear-gradient(to bottom, transparent 30%, #0c1a2a 30%, #0c1a2a 59.5%, transparent 59.5%) no-repeat 60% center / 2.5% 100%,
        /* Rechte Seite */
        linear-gradient(to bottom, transparent 24%, #0e2238 24%, #0e2238 59.5%, transparent 59.5%) no-repeat 64% center / 2.2% 100%,
        linear-gradient(to bottom, transparent 34%, #0b1828 34%, #0b1828 59.5%, transparent 59.5%) no-repeat 68% center / 3% 100%,
        linear-gradient(to bottom, transparent 28%, #0d1e30 28%, #0d1e30 59.5%, transparent 59.5%) no-repeat 72% center / 1.5% 100%,
        linear-gradient(to bottom, transparent 38%, #0a1420 38%, #0a1420 59.5%, transparent 59.5%) no-repeat 76% center / 2.5% 100%,
        linear-gradient(to bottom, transparent 32%, #0c1a2a 32%, #0c1a2a 59.5%, transparent 59.5%) no-repeat 80% center / 2% 100%,
        linear-gradient(to bottom, transparent 40%, #091220 40%, #091220 59.5%, transparent 59.5%) no-repeat 84% center / 2.8% 100%,
        linear-gradient(to bottom, transparent 44%, #080e1c 44%, #080e1c 59.5%, transparent 59.5%) no-repeat 88% center / 1.5% 100%,
        linear-gradient(to bottom, transparent 48%, #070c16 48%, #070c16 59.5%, transparent 59.5%) no-repeat 92% center / 2% 100%,
        linear-gradient(to bottom, transparent 46%, #060a14 46%, #060a14 59.5%, transparent 59.5%) no-repeat 96% center / 1.8% 100%,
        /* Leuchtende Fenster */
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.7), transparent) no-repeat 40.3% 28% / 3px 3px,
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.5), transparent) no-repeat 40.8% 35% / 3px 3px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.6), transparent) no-repeat 41.2% 42% / 2px 2px,
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.5), transparent) no-repeat 48.5% 30% / 3px 3px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.7), transparent) no-repeat 48.2% 38% / 2px 2px,
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.4), transparent) no-repeat 56.3% 26% / 3px 3px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.6), transparent) no-repeat 56.6% 34% / 2px 2px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.5), transparent) no-repeat 52.5% 28% / 2px 2px,
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.4), transparent) no-repeat 32.4% 30% / 3px 3px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.6), transparent) no-repeat 35.8% 36% / 2px 2px,
        radial-gradient(1.5px 1.5px at center, rgba(0, 230, 255, 0.5), transparent) no-repeat 64.2% 30% / 3px 3px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.4), transparent) no-repeat 68.5% 38% / 2px 2px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.7), transparent) no-repeat 22.5% 36% / 2px 2px,
        radial-gradient(1px 1px at center, rgba(0, 230, 255, 0.3), transparent) no-repeat 76.8% 36% / 2px 2px,
        radial-gradient(1px 1px at center, rgba(0, 240, 255, 0.8), transparent) no-repeat 40.5% 22% / 2px 2px,
        radial-gradient(1px 1px at center, rgba(0, 240, 255, 0.6), transparent) no-repeat 48.8% 24% / 2px 2px,
        /* Horizont-Linie */
        linear-gradient(to bottom,
            transparent 59%,
            rgba(0, 212, 255, 0.06) 59.3%,
            rgba(0, 212, 255, 0.3) 59.7%,
            rgba(0, 230, 255, 0.45) 60%,
            rgba(0, 212, 255, 0.3) 60.3%,
            rgba(0, 212, 255, 0.06) 60.7%,
            transparent 61%
        ) no-repeat center / 100% 100%;
}

/* Perspektivisches Bodengitter (eigenes Element mit CSS perspective) */
.login-grid {
    position: absolute;
    bottom: 0;
    left: -20%;
    width: 140%;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    perspective: 400px;
    perspective-origin: 50% 0%;
    overflow: hidden;
}

    .login-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    transform: rotateX(55deg);
    transform-origin: 50% 0%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 78px,
            rgba(0, 212, 255, 0.06) 78px,
            rgba(0, 212, 255, 0.06) 80px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 78px,
            rgba(0, 212, 255, 0.06) 78px,
            rgba(0, 212, 255, 0.06) 80px
        );
}

/* Glow direkt am Horizont über dem Grid */
.login-grid::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
}

/* Login-Box — TRON Legacy Panel mit Glow */
.login-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 32px;
    text-align: center;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 12px;
    box-shadow:
        0 0 40px rgba(0, 212, 255, 0.08),
        0 0 15px rgba(0, 212, 255, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(0, 212, 255, 0.03);
}

#login-screen[hidden] {
    display: none;
}

/* Video-Overlay nach 3 Fehlversuchen */
.login-video-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-video-overlay[hidden] { display: none; }
.login-video-overlay video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.logo pre {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.15;
    color: var(--accent);
    white-space: pre;
    display: inline-block;
    text-align: left;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.25);
}

.subtitle {
    color: var(--text-muted);
    margin: 8px 0 32px;
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#login-form input {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#login-form input:focus {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: var(--glow-cyan-sm);
}

#login-form button {
    padding: 12px;
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 6px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    font-size: 13px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

#login-form button:hover { background: rgba(0, 212, 255, 0.2); box-shadow: var(--glow-cyan-sm); }
#login-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* MCPAuth SSO-Login-Button (ersetzt das lokale Passwort-Formular) */
.sso-login-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 14px 12px;
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 6px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    font-size: 13px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.sso-login-btn:hover { background: rgba(0, 212, 255, 0.2); box-shadow: var(--glow-cyan-sm); }

.error {
    color: var(--error);
    font-size: 13px;
    margin-top: 4px;
}

.external-warning {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

.login-version {
    margin-top: 16px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.5;
    letter-spacing: 0.1em;
    font-family: var(--font-mono);
}

/* === Chat Screen === */
#chat-screen {
    display: grid;
    /* Linke Spalte ziehbar bis 50 % (30.09.2026, Wunsch Jens) — Wert aus app.js/localStorage. */
    grid-template-columns: var(--links-breite, 280px) 1fr;
    /* minmax(0, 1fr) statt 1fr: '1fr' heißt implizit minmax(auto, 1fr) — bei langen
       Chats (300+ Nachrichten) wird die Mindesthöhe = Inhaltshöhe, das Grid wächst über
       den Viewport hinaus und iOS scrollt trotz overflow:hidden das GANZE Dokument:
       der Header wanderte aus dem Bild, man musste zum Bedienen nach oben scrollen.
       Mit minmax(0, …) bleibt die Zeile auf Viewport-Höhe und NUR #chat-messages scrollt. */
    grid-template-rows: var(--header-h) minmax(0, 1fr);
}

/* Header spannt über alle Spalten */
header#chat-header {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Left column: 3D panel (top) + Sidebar (bottom) */
#left-column {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* wie #chat-column: Grid-Item darf unter Inhaltshöhe schrumpfen */
    border-right: 1px solid var(--border);
    position: relative;
}

/* 3D panel: height determined by background image aspect ratio (16:9) */
#model-panel {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    /* Bei breiter linker Spalte wuechse das Panel mit 16:9 und verdraengte die Liste. */
    max-height: 32vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

/* Sidebar takes all remaining space */
#left-column .conv-sidebar {
    flex: 1 1 0;
    min-height: 0;
    border-right: none;
}

/* Chat-Bereich unter Header, full remaining width */
#chat-column {
    grid-column: 2;
    grid-row: 2;
    min-height: 0; /* Grid-Item darf schrumpfen — sonst drückt langer Chat das Layout auf */
}

/* === Conversation Sidebar === */
.conv-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    overflow: hidden;
    position: relative;
}

/* Glow-Linie am rechten Rand der linken Spalte */
#left-column::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.2), transparent);
    z-index: 1;
}

/* Umschalter Chats / Projekte in der Seitenleiste */
/* Segmentleiste statt dreier loser Woerter: Ein gemeinsamer Rahmen fasst die Reiter
   zusammen, der aktive hebt sich als gefuellte Flaeche darin ab. Vorher war es blosser
   Text — die Zahl am Projekte-Reiter klebte sichtbar am naechsten Wort ("86DATEIEN"). */
.conv-tabs {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--kachel-rand);
    border-radius: 8px;
    background: var(--kachel-bg);
    box-shadow: var(--kante-innen);
}

/* Vier Reiter (Favoriten, Chats, Projekte, Dateien) — als Symbole, s. .conv-tab. */
.conv-sidebar-header { padding-left: 12px; padding-right: 12px; gap: 6px; }

.conv-tab {
    /* Symbole statt Woerter (11.09.2026): Mit dem vierten Reiter (Favoriten) passten die
       Beschriftungen endgueltig nicht mehr nebeneinander — sie ueberlappten und liefen in
       den +-Knopf. Vier gleich breite Symbole brauchen keinen Platzverteilungs-Kompromiss
       mehr, und der Name steht im title bzw. aria-label. */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-dim, #6e7681);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    padding: 7px 4px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.conv-tab:hover {
    color: var(--text-secondary, #9da7b3);
    background: var(--kachel-bg-hover);
}

.conv-tab.aktiv {
    color: var(--accent);
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 1px var(--accent-border), var(--schatten-1);
}

.conv-tab-zahl {
    font-size: 9px;
    letter-spacing: 0;
    background: rgba(88, 166, 255, 0.16);
    color: #58a6ff;
    border-radius: 999px;
    padding: 0 5px;
    min-width: 15px;
}

.conv-tab-zahl:empty { display: none; }

.conv-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    flex-shrink: 0;
}

.conv-new-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    color: var(--accent);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.conv-new-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: var(--glow-cyan-sm);
}

.conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
}

/* ESP-Gerät ist gerade aktiv (nimmt auf, denkt, spricht) */
.conv-item.esp-aktiv {
    border-color: #3fb950;
    box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.35);
}

.esp-zustand {
    margin-top: 4px;
    font-size: 11px;
    color: #3fb950;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: esp-pulsieren 1.6s ease-in-out infinite;
}

@keyframes esp-pulsieren {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* --- Zwei Listen: Chats und Code-Sessions ------------------------------- */

.conv-section {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-dim, #6e7681);
    padding: 10px 6px 4px;
    font-weight: 600;
}

.code-machine {
    margin: 2px 0 6px;
}

.code-machine-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary, #9da7b3);
    user-select: none;
}

.code-machine-head:hover { background: rgba(255, 255, 255, 0.05); }
.code-caret { width: 10px; font-size: 10px; opacity: 0.7; }
.code-machine-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Punkt ist die Kerninformation: läuft der Sidecar auf diesem Rechner gerade? */
.code-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 6px rgba(63, 185, 80, 0.7);
    flex: 0 0 auto;
}

.code-machine.offline .code-dot {
    background: #6e7681;
    box-shadow: none;
}

.code-machine.offline .code-machine-name { opacity: 0.6; }
.code-machine.zu .code-machine-body { display: none; }
.code-machine-body { padding-left: 8px; }

.code-project {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-dim, #6e7681);
    padding: 4px 6px 2px;
    overflow: hidden;
    white-space: nowrap;
}

.code-project-name { overflow: hidden; text-overflow: ellipsis; }
.code-machine-body .conv-item { margin-left: 10px; }

/* Projektstand: Jobs, Arbeitsbaum, Diff */
.projekt-liste {
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
}

.projekt-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
    overflow: hidden;
    white-space: nowrap;
}

.projekt-zeile:last-child { border-bottom: none; }
.projekt-zeile:hover { background: rgba(255, 255, 255, 0.06); }
.projekt-zeile code { overflow: hidden; text-overflow: ellipsis; }

.job-laeuft, .job-fertig, .git-status {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.job-laeuft {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    animation: esp-pulsieren 1.6s ease-in-out infinite;
}

.job-fertig { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.job-fehler { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.job-unklar { background: rgba(110, 118, 129, 0.2); color: #9da7b3; }
.git-status { background: rgba(210, 153, 34, 0.15); color: #d29922; min-width: 24px; text-align: center; }
.git-M { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.git-A { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.git-D { background: rgba(248, 81, 73, 0.15); color: #f85149; }

.projekt-zurueck {
    cursor: pointer;
    color: #58a6ff;
    font-size: 12px;
    margin-bottom: 8px;
}

.projekt-ausgabe {
    background: var(--bg-primary, #0d1117);
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
    font-size: 11.5px;
    line-height: 1.45;
    max-height: 52vh;
    overflow: auto;
    white-space: pre;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.projekt-diff .d-plus { color: #3fb950; }
.projekt-diff .d-minus { color: #f85149; }
.projekt-diff .d-stelle { color: #58a6ff; }
.projekt-diff .d-kopf { color: #6e7681; }

/* Der Chip zeigt an, dass im Projekt gerade etwas läuft */
.projekt-badge.beschaeftigt {
    border-color: #58a6ff;
    animation: esp-pulsieren 1.6s ease-in-out infinite;
}

.code-machine-menue {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0;
    border-radius: 4px;
}

.code-machine-head:hover .code-machine-menue { opacity: 0.75; }
.code-machine-menue:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.code-gefahr { color: #f85149; border-color: #f85149; }

.code-pair-btn {
    font-size: 11px;
    color: var(--accent-cyan, #58a6ff);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
}

.code-pair-btn:hover { background: rgba(88, 166, 255, 0.1); }

/* Projekt-Chip in der Kopfzeile */
.projekt-badge {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #30363d;
    background: rgba(88, 166, 255, 0.12);
    color: #58a6ff;
    cursor: pointer;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projekt-badge.leer { background: transparent; color: #6e7681; }
.projekt-badge.offline { background: rgba(248, 81, 73, 0.12); color: #f85149; border-color: #f85149; }

/* Dialoge (Kopplung, Projektzuweisung) */
.code-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.code-dialog {
    background: var(--bg-secondary, #161b22);
    border: 1px solid #30363d;
    border-radius: 10px;
    width: min(560px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.code-dialog-head {
    padding: 12px 14px;
    border-bottom: 1px solid #30363d;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-dialog-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.code-dialog-body { padding: 14px; overflow-y: auto; }
.code-hint { font-size: 12px; color: var(--text-dim, #6e7681); margin: 6px 0; }
.code-fehler { color: #f85149; font-size: 12px; }
.code-label { display: block; font-size: 11px; color: #6e7681; margin: 10px 0 4px; }

.code-input {
    width: 100%;
    padding: 7px 9px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background: var(--bg-primary, #0d1117);
    color: inherit;
    font-size: 13px;
    font-family: inherit;
}

.code-browser {
    margin-top: 10px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 4px;
}

.code-browser-titel {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6e7681;
    padding: 6px 6px 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-mkdir {
    float: right;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    padding: 2px 7px;
    margin: -2px 0 0 6px;
    border-radius: 5px;
    border: 1px solid #30363d;
    background: rgba(255, 255, 255, 0.05);
    color: #adbac7;
    cursor: pointer;
}
.code-mkdir:hover { background: rgba(56, 139, 253, 0.15); border-color: #388bfd; color: #fff; }

.code-browser-eintrag {
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-browser-eintrag:hover { background: rgba(255, 255, 255, 0.06); }
.code-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.code-primary, .code-secondary {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #30363d;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}

.code-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.code-secondary { background: transparent; color: var(--text-secondary, #9da7b3); }

.code-pair-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 26px;
    letter-spacing: 4px;
    text-align: center;
    padding: 14px;
    margin: 10px 0;
    border: 1px dashed #30363d;
    border-radius: 8px;
    color: #ffcc00;
}

.code-cmd {
    background: var(--bg-primary, #0d1117);
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px 76px 10px 10px;
    margin: 0;
    font-size: 12px;
    overflow-x: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.code-cmd-box { position: relative; margin-bottom: 4px; }

.code-kopieren {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 11px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    border-radius: 5px;
    padding: 3px 9px;
    cursor: pointer;
    font-family: inherit;
}

.code-kopieren:hover { background: #30363d; }
.code-pair-code { cursor: pointer; }
.code-pair-code:hover { border-color: #ffcc00; }

.code-leer {
    font-size: 11px;
    color: var(--text-dim, #6e7681);
    padding: 4px 6px 8px;
    line-height: 1.5;
}

/* Session-Kachel: Jede Kachel ist IMMER vollstaendig — Nummer, Titel, alle Knoepfe.
   Bis 03.10.2026 schrumpfte alles, was in keinem Reiter offen war, auf eine Zeile und
   klappte erst beim Ueberfahren auf. Beim Blaettern durch die Liste sprang dadurch
   staendig das Layout (Nutzerwunsch: "das nervt"). Jetzt aendert sich nur die FARBE,
   nie die Groesse:
     normal          → eigener Grund + feiner Rand
     in Reiter offen → schwach getoent (--kachel-tab-bg)
     aktiv           → kraeftig getoent (--kachel-aktiv-bg) + Akzentkante
   Hover hebt nur den Rand hervor — kein Versatz, keine andere Hoehe. */
.conv-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 6px;
    position: relative;
    background: var(--kachel-bg);
    border: 1px solid var(--kachel-rand);
    box-shadow: var(--schatten-1), var(--kante-innen);
}
.conv-item:hover {
    background: var(--kachel-bg-hover);
    border-color: var(--accent-border);
}
.conv-item.im-tab {
    background: var(--kachel-tab-bg);
    border-color: var(--accent-border);
}
.conv-item.im-tab:hover { background: var(--kachel-tab-bg); }
.conv-item.active,
.conv-item.active:hover {
    background: var(--kachel-aktiv-bg);
    border-color: var(--accent-border);
    /* Die Akzentkante sitzt als eigener Streifen davor, damit sie den Text nicht
       verschiebt (border-left aenderte vorher die Innenbreite der aktiven Kachel). */
    box-shadow: inset 3px 0 0 var(--accent), var(--schatten-1);
}

/* Zeile 1: Aktiv-Marker + #ID + Spinner + Buttons */
.conv-item-row1 {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
}
/* Rechte Gruppe in Zeile 1 (Spinner + Buttons) */
.conv-r1-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
/* Session-Nummer (#123) */
.conv-num {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Letzte Aktivität (relativ) */
.conv-zeit {
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
}
/* Zeile 2: Titel */
.conv-item-row2 {
    margin-top: 3px;
}
.conv-item-title {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
}
.conv-item-title.unread {
    font-weight: 700;
    color: var(--text);
}
.conv-item.active .conv-item-title {
    color: var(--accent);
    font-weight: 500;
}
.conv-item.active .conv-item-title.unread {
    font-weight: 700;
}

.conv-item-date { display: none; }

.conv-item-actions {
    display: flex;
    align-items: center;   /* alle drei Kästchen auf einer Höhe */
    gap: 4px;
    position: static;
}
/* Fremd-Regeln (z.B. die gleichnamige details.conv-archive) dürfen die Buttons
   nicht vertikal verschieben. */
.conv-item-actions button { margin: 0; flex: 0 0 auto; }
/* Farbige, gerahmte Aktions-Kästchen — deutlich sichtbarer als die alten Text-Glyphen */
.conv-item-actions button {
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.9;
    transition: opacity 0.12s, transform 0.08s, background 0.12s;
}
.conv-item-actions button svg {
    width: 13px;
    height: 13px;
    pointer-events: none;
}
.conv-item-actions button:hover {
    opacity: 1;
    transform: scale(1.08);
}
.conv-item-actions button.conv-rename {
    color: #4da3ff;
    border-color: rgba(77, 163, 255, 0.45);
    background: rgba(77, 163, 255, 0.12);
}
.conv-item-actions button.conv-rename:hover { background: rgba(77, 163, 255, 0.25); }
.conv-item-actions button.conv-archive {
    color: #d29922;
    border-color: rgba(210, 153, 34, 0.45);
    background: rgba(210, 153, 34, 0.12);
}
.conv-item-actions button.conv-archive:hover { background: rgba(210, 153, 34, 0.25); }
.conv-item-actions button.conv-unarchive {
    color: #3fb950;
    border-color: rgba(63, 185, 80, 0.45);
    background: rgba(63, 185, 80, 0.12);
}
.conv-item-actions button.conv-unarchive:hover { background: rgba(63, 185, 80, 0.25); }
.conv-item-actions button.conv-delete {
    color: #f85149;
    border-color: rgba(248, 81, 73, 0.45);
    background: rgba(248, 81, 73, 0.12);
}
.conv-item-actions button.conv-delete:hover { background: rgba(248, 81, 73, 0.25); }

/* Kanal-Konversationen (z.B. ESP-Gerät): fest oben angepinnt, dezent markiert */
.conv-item.sticky {
    border-left: 2px solid var(--accent);
    /* Kein eigener Hintergrund: der gehoert den Zustaenden "im Reiter" und "aktiv". */
}

/* Shared conversations divider */
.conv-divider {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 12px 12px 6px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

/* Archiv-Block (zugeklappt) in der Konversationsliste.
   ACHTUNG: als `details.` qualifiziert — die Klasse `conv-archive` trägt auch der
   Archivieren-BUTTON in jeder Zeile; unqualifiziert schob dieses margin-top ihn
   gegenüber den Nachbar-Buttons nach unten. */
details.conv-archive {
    margin-top: 8px;
    border-top: 1px solid var(--border);
}
.conv-archive-summary {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 12px 12px 6px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.conv-archive-summary::-webkit-details-marker { display: none; }
.conv-archive-summary::before { content: "▸ "; }
details.conv-archive[open] .conv-archive-summary::before { content: "▾ "; }
details.conv-archive .conv-item { opacity: 0.72; }
details.conv-archive .conv-item:hover { opacity: 1; }

/* Altersgruppen der Chat-Liste — gleiche Gestalt wie der Archiv-Block, damit die
   Seitenleiste EINE Sprache spricht: zugeklappte Abschnitte sehen ueberall gleich aus.
   Die Gruppe "Aktuell" traegt denselben Kopf wie die uebrigen; ein Sonderstil dafuer
   wuerde nur suggerieren, sie sei etwas anderes als ein aufgeklappter Abschnitt. */
.conv-gruppe-kopf {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 12px 12px 6px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.conv-gruppe-kopf::-webkit-details-marker { display: none; }
.conv-gruppe-kopf::before { content: "▸ "; }
details.conv-gruppe[open] .conv-gruppe-kopf::before { content: "▾ "; }
.conv-gruppe-kopf:hover { color: var(--accent); }
/* Zugeklappte Gruppen sind Archiv zum Anklicken; die offene Gruppe traegt die Arbeit
   und bleibt deshalb in voller Deckkraft. */
details.conv-gruppe:not([open]) .conv-gruppe-kopf { opacity: 0.8; }

/* Kunden-Gruppe (Projekte-Ansicht) */
.kunde-gruppe { margin: 0; }
.kunde-gruppe-kopf {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 10px 6px 4px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.kunde-gruppe-kopf::-webkit-details-marker { display: none; }
.kunde-gruppe-kopf::before { content: "▸ "; }
details.kunde-gruppe[open] .kunde-gruppe-kopf::before { content: "▾ "; }
.kunde-gruppe-kopf:hover { color: var(--accent); }
details.kunde-gruppe:not([open]) .kunde-gruppe-kopf { opacity: 0.8; }

/* Compact-Snapshot im Chat (aufklappbare Zusammenfassung des verdichteten Verlaufs) */
.context-summary {
    margin: 10px auto;
    max-width: 760px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 13px;
}
.context-summary-head {
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-weight: 500;
    list-style: none;
}
.context-summary-head::-webkit-details-marker { display: none; }
.context-summary-head::before { content: "▸ "; }
.context-summary[open] .context-summary-head::before { content: "▾ "; }
.context-summary-body { padding: 0 12px 12px; }
.context-summary-body .cs-text { color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.cs-original-btn {
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
}
.cs-original-btn:hover { color: var(--text); border-color: var(--accent); }
.cs-original {
    margin-top: 10px;
    padding: 10px;
    border-top: 1px solid var(--border);
    max-height: 340px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.5;
}
.cs-original-msg { margin-bottom: 8px; white-space: pre-wrap; color: var(--text-muted); }
.cs-original-msg .cs-who { font-weight: 600; color: var(--text); }

/* Aktiv/Inaktiv-Statuspunkt — inline in Flex-Zeile 1 (nicht mehr absolut positioniert) */
.conv-status {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.conv-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    transition: transform 0.12s;
}
.conv-status.inactive::before { background: var(--text-muted); opacity: 0.55; }
.conv-status:hover::before { transform: scale(1.5); }

/* Hintergrund-Fortführung (Feature B): Spinner in Zeile 1 (inline in conv-r1-right). */
.conv-running-spinner {
    display: none;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border: 2px solid rgba(0, 212, 255, 0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.conv-item.running .conv-running-spinner { display: block; }

/* "läuft noch im Hintergrund"-Hinweis am Ende der aktiven Ansicht (nach Zurückwechseln). */
.bg-running {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px auto;
    padding: 10px 14px;
    max-width: 680px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 8px;
}
.bg-running-spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 212, 255, 0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* HTML-Overlay-Viewer: von TRON erzeugte Workspace-HTML-Dateien per Klick im Chat öffnen. */
.html-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
    padding: 24px;
}
.html-viewer-box {
    display: flex;
    flex-direction: column;
    width: min(1100px, 96vw);
    height: min(820px, 92vh);
    background: var(--bg-surface);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(0, 212, 255, 0.04);
    overflow: hidden;
}
.html-viewer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.html-viewer-title {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Schrumpft zugunsten des Pfades nur bis hierher: Der DATEINAME ist das, wonach der
       Nutzer sucht — der Ordner ist Zusatz. */
    max-width: 60%;
    flex: 0 1 auto;
}

/* Der Ordner neben dem Dateinamen. Zurueckgenommen in Farbe und Groesse, damit er den
   Namen nicht ueberdeckt, und von LINKS gekuerzt: Bei
   "Media/ComfyUI/Output/conv_3437/" ist das Ende die nuetzliche Information, nicht der
   Anfang — alle Pfade beginnen gleich. */
.html-viewer-pfad {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim, #8a8f98);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;          /* kuerzt vorn statt hinten … */
    text-align: left;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 8px;
    cursor: pointer;
    user-select: all;
}

.html-viewer-pfad:hover {
    color: var(--accent);
}

/* … und `bdi` waere sauberer, aber der Pfad enthaelt nur ASCII-Pfadzeichen. Bei rtl
   wandert ein fuehrender Schraegstrich ans Ende; deshalb steht im Text KEIN fuehrender
   Schraegstrich (siehe _medienPfadAusUrl). */
.html-viewer-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 9px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.html-viewer-btn:hover {
    background: rgba(0, 212, 255, 0.14);
    border-color: rgba(0, 212, 255, 0.35);
    color: var(--accent);
}
.html-viewer-close:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); }

/* Flexibler Inhalts-Container: nimmt je nach Dateityp iframe/img/video/pre/Tabelle auf. */
.html-viewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
    background: var(--bg);
}
.fv-msg {
    margin: auto;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}
/* iframe (HTML/PDF): füllt den Body, weißer Hintergrund für beliebige Inhalte. */
.fv-frame { flex: 1; width: 100%; border: none; background: #fff; }
/* Bild: eingepasst, zentriert, Schachbrett-Hintergrund für Transparenz. */
.fv-img {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.fv-media { margin: auto; max-width: 100%; max-height: 100%; background: #000; }
.fv-audio { margin: auto; padding: 24px; }
.fv-audio audio { min-width: min(420px, 80vw); }
/* Text/Code: monospaced, scrollbar, hljs-Farben greifen über <code class="hljs">. */
.fv-code {
    flex: 1;
    margin: 0;
    padding: 16px 18px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 4;
    color: var(--text);
    background: var(--bg-surface);
}
.fv-code code { background: none; padding: 0; font-family: inherit; }
/* Dokument (Markdown/DOCX): lesbar wie ein Blatt — heller Grund, dunkler Text. */
.fv-doc {
    flex: 1;
    overflow: auto;
    padding: 28px 32px;
    background: #fbfbfa;
    color: #1a1a1a;
    line-height: 1.6;
}
.fv-doc h1, .fv-doc h2, .fv-doc h3 { color: #111; margin: 0.8em 0 0.4em; }
.fv-doc p { margin: 0.5em 0; }
.fv-doc a { color: #0b66c3; }
.fv-doc table { border-collapse: collapse; margin: 0.6em 0; }
.fv-doc td, .fv-doc th { border: 1px solid #ccc; padding: 4px 8px; }
.fv-doc img { max-width: 100%; height: auto; }
.fv-doc pre { background: #f0f0f0; padding: 10px; border-radius: 6px; overflow: auto; }
/* Tabellenkalkulation (XLSX/CSV): Blatt-Tabs + Tabelle. */
.fv-sheet-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fv-sheet-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex: 0 0 auto;
}
.fv-sheet-tab {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.fv-sheet-tab.active { color: var(--accent); border-color: rgba(0, 212, 255, 0.4); background: rgba(0, 212, 255, 0.08); }
.fv-sheet-content { flex: 1; overflow: auto; background: #fff; color: #1a1a1a; }
.fv-sheet-content table { border-collapse: collapse; font-size: 12.5px; }
.fv-sheet-content td, .fv-sheet-content th { border: 1px solid #d0d0d0; padding: 3px 8px; white-space: nowrap; }
.fv-sheet-content tr:first-child td { background: #f3f3f3; font-weight: 600; }

@media (max-width: 640px) {
    .html-viewer-overlay { padding: 0; }
    .html-viewer-box { width: 100vw; height: 100vh; border-radius: 0; }
}

.conv-list::-webkit-scrollbar { width: 6px; }
.conv-list::-webkit-scrollbar-track { background: transparent; }
.conv-list::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.15); border-radius: 3px; }
.conv-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.3); }

/* Chat Column (center) */
#chat-column {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}


/* 3D Model Panel (top of left column) — base styles already in grid section above */

#model-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Thinking-Text Overlay: Gedanken-Fragmente schweben über die 3D-Szene */
#thinking-text-overlay {
    position: absolute;
    top: 16%;
    left: 0;
    width: 100%;
    height: 68%;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
    perspective: 600px;
}

.thinking-float {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 15px;
    color: rgba(0, 212, 255, 0.80);
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    pointer-events: none;
    will-change: transform, opacity;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.thinking-float.from-left {
    animation-name: thinkFloatLeft;
}

.thinking-float.from-right {
    animation-name: thinkFloatRight;
}

@keyframes thinkFloatLeft {
    0%   { transform: translateX(-100%) translateY(-50%) translateZ(var(--tz, 0px)); opacity: 0; }
    10%  { opacity: var(--depth-opacity, 0.80); }
    50%  { opacity: calc(var(--depth-opacity, 0.80) * 0.85); }
    90%  { opacity: var(--depth-opacity, 0.80); }
    100% { transform: translateX(calc(100vw)) translateY(-50%) translateZ(var(--tz, 0px)); opacity: 0; }
}

@keyframes thinkFloatRight {
    0%   { transform: translateX(calc(100vw)) translateY(-50%) translateZ(var(--tz, 0px)); opacity: 0; }
    10%  { opacity: var(--depth-opacity, 0.80); }
    50%  { opacity: calc(var(--depth-opacity, 0.80) * 0.85); }
    90%  { opacity: var(--depth-opacity, 0.80); }
    100% { transform: translateX(-100%) translateY(-50%) translateZ(var(--tz, 0px)); opacity: 0; }
}

#model-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
    z-index: 2;
    background: var(--bg);
}

#model-loading .spinner {
    width: 28px;
    height: 28px;
}

#model-loading.hidden {
    display: none;
}

/* Header */
header#chat-header {
    height: var(--header-h);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    position: relative;
}

/* Neon-Linie unter dem Header */
header#chat-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.5), rgba(0, 212, 255, 0.3), transparent);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    overflow: hidden;
}

.header-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--accent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
}

.header-user {
    font-size: 13px;
    color: var(--text-muted);
}

/* Profil-Schaltflaeche: Symbol und Name sind EIN Bedienelement (vorher stand der Name
   separat links im Kopf, obwohl beides dasselbe Ziel hat). */
.header-btn--profil {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.header-btn--profil .header-user {
    color: inherit;          /* faerbt beim Ueberfahren mit, statt stumpf zu bleiben */
    white-space: nowrap;
}

/* Leerer Name (noch nicht angemeldet): kein Abstand ins Nichts */
.header-btn--profil .header-user:empty {
    display: none;
}

.llm-status-badge[hidden] { display: none !important; }  /* [hidden] muss display:inline-flex schlagen */
.llm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
    cursor: default;
}
.llm-status-badge .llm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}
.llm-status-badge.busy {
    border-color: #eab308;
    color: #eab308;
}
.llm-status-badge.busy .llm-dot {
    background: #eab308;
    animation: llm-pulse 1.2s ease-in-out infinite;
}
@keyframes llm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.llm-status-badge.clickable { cursor: pointer; }
.llm-status-badge.clickable:hover { border-color: var(--accent); color: var(--text); }

/* Betriebs-/Wartungsankündigung an alle Nutzer */
.ops-banner[hidden] { display: none !important; }  /* [hidden] muss display:flex schlagen */
.ops-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: #b45309;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ops-banner.warn { background: #b91c1c; }
.ops-banner #ops-banner-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.85;
}
.ops-banner #ops-banner-close:hover { opacity: 1; }

.mode-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s, opacity 0.15s;
    /* Button-Reset */
    background: none;
    border: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    outline: none;
}
.mode-badge:hover {
    opacity: 0.75;
}
.mode-badge.mode-plan {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.mode-badge.mode-build {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* === LoRA Expert Badge === */


.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* LoRA Dropdown Menu */

.header-right {
    display: flex;
    gap: 8px;
}

.header-btn {
    padding: 6px 14px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s;
}

.header-btn:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: var(--glow-cyan-sm);
    color: var(--accent);
}

.header-btn-secondary {
    color: var(--text-muted);
}

.header-select {
    padding: 4px 8px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 4px;
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    outline: none;
    max-width: 140px;
}

.header-select:hover {
    border-color: rgba(0, 212, 255, 0.4);
}

.header-select:focus {
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: var(--glow-cyan-sm);
}

#btn-sound {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
}

/* Messages Area */
main#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    /* TRON Grid Hintergrund */
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}



.message {
    max-width: 80%;
    padding: 12px 16px 18px 16px;
    border-radius: var(--radius);
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.6;
    animation: fadeIn 0.2s ease;
    position: relative;
}

.msg-time {
    display: block;
    font-size: 10px;
    color: rgba(0, 212, 255, 0.25);
    text-align: right;
    margin-top: 4px;
    line-height: 1;
    user-select: none;
    font-family: var(--font-mono);
}

.message.user .msg-time {
    color: rgba(0, 212, 255, 0.3);
}

[data-theme="light"] .msg-time {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .message.user .msg-time {
    color: rgba(255, 255, 255, 0.5);
}

.message.status .msg-time {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.message.user {
    align-self: flex-end;
    background: var(--user-bubble);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.message.user.queued {
    opacity: 0.55;
    border-style: dashed;
    position: relative;
}

.queue-badge {
    display: inline-block;
    font-size: 10px;
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 8px;
    vertical-align: middle;
    font-family: var(--font-mono);
}

.queue-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.message.queued:hover .queue-remove {
    opacity: 0.7;
}
.queue-remove:hover {
    opacity: 1 !important;
    color: var(--accent);
}

[data-theme="light"] .queue-badge {
    background: rgba(0, 100, 200, 0.12);
    color: #0064c8;
}

.message.assistant {
    align-self: flex-start;
    background: var(--bot-bubble);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.02);
}

.message.assistant .msg-content {
    overflow-x: auto;
}

/* --- Denkprozess (<details>) Block ---
   Eigene Farbe (--denk, violett), damit Denken und Antwort auf einen Blick
   auseinanderfallen — vorher trug beides den Cyan-Ton des Akzents (Jens, 24.09.2026:
   "denkprozesse und ausgegebenen text im chat unterschiedlich farblich markieren").
   Die Chat-Kontrolle zeichnet ihre TRON-Blasen als .message.assistant und erbt das hier. */
.message.assistant .msg-content details {
    margin: 0 0 12px 0;
    padding: 0;
    border: 1px solid var(--denk-rand);
    border-left: 3px solid var(--denk);
    border-radius: 8px;
    background: var(--denk-bg);
    color: var(--denk-text);      /* auch Listen/Code im Denkblock, nicht nur <p> */
    overflow: hidden;
}
.message.assistant .msg-content details summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--denk);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.message.assistant .msg-content details summary::before {
    content: "▶";
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--denk);
}
.message.assistant .msg-content details[open] summary::before {
    transform: rotate(90deg);
}
.message.assistant .msg-content details summary::-webkit-details-marker {
    display: none;
}
.message.assistant .msg-content details > :not(summary) {
    padding: 0 12px;
}
/* Listen brauchen links Platz fuer ihre Punkte — die Regel darueber nahm ihn weg, die
   Aufzaehlungszeichen standen ausserhalb des Kastens. */
.message.assistant .msg-content details > ul,
.message.assistant .msg-content details > ol {
    padding-left: 32px;
}
.message.assistant .msg-content details li {
    font-size: 13px;
    font-style: italic;
}
.message.assistant .msg-content details > p {
    padding: 0 12px;
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--denk-text);
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

/* Markdown rendering in messages */
.message.assistant .msg-content h1,
.message.assistant .msg-content h2,
.message.assistant .msg-content h3 {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}

.message.assistant .msg-content pre {
    background: rgba(255, 255, 255, 0.06);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 13px;
    border: 1px solid var(--border);
}

.message.assistant .msg-content code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.message.assistant .msg-content pre code {
    background: none;
    padding: 0;
}

/* Code block wrapper with copy button */
.message.assistant .msg-content .code-block {
    position: relative;
    margin: 8px 0;
}

.message.assistant .msg-content .code-block .code-lang {
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 1;
}

.message.assistant .msg-content .code-block .code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 1;
}

.message.assistant .msg-content .code-block:hover .code-copy {
    opacity: 1;
}

.message.assistant .msg-content .code-block .code-copy:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--accent);
}

/* highlight.js overrides to fit dark theme */
.message.assistant .msg-content pre code.hljs {
    background: transparent;
    padding: 0;
    font-size: 13px;
}

.message.assistant .msg-content .code-block pre {
    padding-top: 28px;  /* room for lang label */
}

/* Blockquotes (rendered by marked) */
.message.assistant .msg-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 12px;
    margin: 8px 0;
    color: var(--text-muted);
    background: rgba(0, 212, 255, 0.04);
    border-radius: 0 4px 4px 0;
}

.message.assistant .msg-content ul,
.message.assistant .msg-content ol {
    padding-left: 28px;
    margin: 10px 0;
}
.message.assistant .msg-content ol {
    list-style-type: decimal;
}
.message.assistant .msg-content ul {
    list-style-type: disc;
}
.message.assistant .msg-content li {
    padding-left: 4px;
    margin: 4px 0;
}

.message.assistant .msg-content p {
    margin: 12px 0;
}

.message.assistant .msg-content p:first-child {
    margin-top: 0;
}

.message.assistant .msg-content p:last-child {
    margin-bottom: 0;
}

.message.assistant .msg-content a {
    color: var(--accent);
    text-decoration: none;
}

.message.assistant .msg-content a:hover {
    text-decoration: underline;
}

.message.assistant .msg-content table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
}

.message.assistant .msg-content th,
.message.assistant .msg-content td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    font-size: 13px;
}

.message.assistant .msg-content th {
    background: var(--bg);
}

/* Status message (thinking, tool calls) */
.message.status {
    align-self: flex-start;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tool-Call-Bubble — persistente Anzeige von Tool-Aktivitäten */
/* Tool-Calls als kompakte Icon-Chips in einer horizontalen Reihe (statt gestapelter Boxen). */
.tool-call-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-self: flex-start;
    max-width: 100%;
    background: none;
    border: none;
    padding: 2px 0;
}
.message.tool-call {
    background: var(--bg-surface, rgba(10,10,30,0.6));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 9px;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    animation: fadeIn 0.15s ease;
}
/* Kompakter Chip-Zustand: Icon prominent, Detail ausgeblendet, Name gekürzt. */
.message.tool-call:not(.tool-expanded) .tool-call-detail { display: none; }
.message.tool-call:not(.tool-expanded) .tool-call-name {
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Aufgeklappt: volle Zeile in der Reihe, Details sichtbar. */
.message.tool-call.tool-expanded {
    flex-basis: 100%;
    border-left: 3px solid var(--accent, #6366f1);
}
.message.tool-call.tool-expanded .tool-call-detail { display: inline; }
.message.tool-call.tool-meta {
    border-left-color: rgba(99,102,241,0.35);
    opacity: 0.7;
}
.message.tool-call.tool-call-done.tool-meta {
    opacity: 0.5;
}
.tool-call-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tool-call-icon {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}
/* Animierte SVG-Tool-Icons: aktives Tool bewegt sich, fertige frieren ein. */
.tool-call-icon svg.ticon {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: var(--accent, #6cc4ff);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.tool-call-icon svg.ticon .ln { stroke-width: 1.4; }
.tool-call-icon svg.ticon .dot { fill: currentColor; stroke: none; }
.tool-call-icon svg.ticon .sc { stroke: #ffd166; stroke-width: 1.8; }
/* animierte Teile — transform-box:fill-box macht transform-origin robust (bbox-Zentrum) */
.ticon [class*="ia-"] { transform-box: fill-box; transform-origin: center; }
.ticon .ia-spin  { animation: ia-spin 2.6s linear infinite; }
.ticon .ia-swing { animation: ia-swing 1.7s ease-in-out infinite; }
.ticon .ia-blink { animation: ia-blink 1.1s steps(1, end) infinite; }
.ticon .ia-pulse { animation: ia-pulse 1.5s ease-in-out infinite; }
.ticon .ia-scan  { animation: ia-scan 1.4s ease-in-out infinite alternate; }
@keyframes ia-spin  { to { transform: rotate(360deg); } }
@keyframes ia-swing { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes ia-blink { 0%,45% { opacity: 1; } 55%,100% { opacity: 0.12; } }
@keyframes ia-pulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes ia-scan  { from { transform: translateY(0); } to { transform: translateY(9px); } }
/* Fertig = eingefroren (nur das gerade laufende Tool animiert) */
.tool-call.tool-call-done .tool-call-icon .ticon [class*="ia-"] { animation-play-state: paused !important; }
/* Hinweis: prefers-reduced-motion wird hier bewusst NICHT respektiert — die Aktiv-Animation
   ist ein ausdrücklich gewünschtes Funktions-Signal (welches Tool gerade läuft), keine Deko. */
.tool-call-name {
    color: var(--accent, #6366f1);
    font-weight: 600;
    flex-shrink: 0;
}
.tool-call-detail {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
    flex: 1;
}
.tool-call-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--border);
    border-top-color: var(--accent, #6366f1);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
    margin-left: auto;
}
.tool-call-status {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: auto;
}
.tool-call-status.ok { color: var(--success, #22c55e); }
.tool-call-status.err { color: var(--error, #ef4444); }

/* --- Guard-Freigabe: Knopf an einer blockierten run_command-Blase ------------------
   Der Nutzer hebt einen Ausführungs-Guard (destruktiver Befehl / rohes SQL) bewusst auf.
   Bewusst auffällig (roter Rahmen), weil es eine Sicherheitsentscheidung ist. */
.guard-freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid #9a3412;
  border-radius: 8px;
  background: rgba(124, 45, 18, 0.18);
  font-size: 12px;
}
.guard-freigabe-label { color: #fca5a5; }
.guard-freigabe-label.ok { color: #86efac; }
.guard-freigabe-btn {
  padding: 3px 10px;
  border: 1px solid var(--accent-border, rgba(0, 212, 255, 0.3));
  border-radius: 6px;
  background: transparent;
  color: var(--text, #bff8ff);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.guard-freigabe-btn:hover { background: var(--bg-hover, #16161f); border-color: var(--accent, #00d4ff); }
.guard-freigabe-btn.session { border-color: #9a3412; color: #fca5a5; }
.guard-freigabe-btn.session:hover { background: rgba(124, 45, 18, 0.35); }
.guard-freigabe-btn:disabled { opacity: 0.5; cursor: default; }
.tool-call-time {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Aufklappbare Detail-Ansicht eines Tool-Aufrufs (volle Argumente + Ergebnis) */
.tool-call-chevron {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 10px;
    transition: color 0.15s ease;
}
.tool-call-expandable {
    cursor: pointer;
    user-select: none;
}
.tool-call-expandable:hover .tool-call-chevron,
.tool-call-expandable:hover .tool-call-name {
    color: var(--accent-bright, #818cf8);
}
.tool-call-details {
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeIn 0.12s ease;
}
/* display:flex oben würde sonst das [hidden]-Attribut überstimmen (Browser-Default
   [hidden]{display:none} hat geringere Spezifität) → Zuklappen bliebe wirkungslos. */
.tool-call-details[hidden] {
    display: none;
}
.tool-detail-label {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}
.tool-detail-pre {
    margin: 0;
    padding: 6px 8px;
    background: rgba(0,0,0,0.28);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
    color: var(--text, #e5e7eb);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.tool-detail-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}
/* Von einem Tool erzeugte Datei: anklickbare Karte bzw. Bild-Preview */
.tool-call-file {
    margin-top: 6px;
}
.tool-call-file-card {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text, #e5e7eb);
    font-size: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tool-call-file-card:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99,102,241,0.12);
}
.tool-call-file-card .tcf-icon { font-size: 14px; flex-shrink: 0; }
.tool-call-file-card .tcf-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tool-call-file-card .tcf-open { color: var(--text-muted); flex-shrink: 0; }
.tool-call-file-thumb {
    max-width: min(320px, 100%);
    max-height: 240px;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    display: block;
    transition: border-color 0.15s ease;
}
.tool-call-file-thumb:hover { border-color: var(--accent, #6366f1); }
.tool-call-result {
    margin-top: 5px;
    border-top: 1px solid var(--border);
    padding-top: 5px;
}
.tool-call-result pre {
    margin: 0;
    overflow-x: auto;
    max-height: 120px;
    scrollbar-width: thin;
}
.tool-call-result pre code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
}
.tool-call-result ul.tool-result-list {
    margin: 0;
    padding: 0 0 0 14px;
    list-style: disc;
}
.tool-call-result ul.tool-result-list li {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-all;
}
.tool-result-url {
    color: var(--text-muted);
    font-size: 10px;
}
.tool-result-ok {
    color: #4caf50;
    font-size: 11px;
}
.tool-result-err {
    color: #f44336;
    font-size: 11px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Typing indicator — animated bouncing dots */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Upload preview */
#upload-preview {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}

/* Drag & Drop overlay */
main#chat-messages.drag-over {
    position: relative;
}
main#chat-messages.drag-over::after {
    content: "Dateien hier ablegen";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.06);
    border: 2px dashed var(--accent);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    z-index: 10;
    pointer-events: none;
    margin: 8px;
}

.upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.upload-chip .remove {
    cursor: pointer;
    color: var(--error);
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

.upload-chip .remove:hover { color: #ff7b72; }

.upload-chip.uploading {
    border-color: var(--accent);
}
/* Animierter Analyse-Hinweis: nur während uploading sichtbar. Ersetzt das blasse Pulsieren,
   das Nutzer nicht als "läuft noch" erkannten (rotes × wirkte wie Fehler → warum kann ich nicht senden?). */
.upload-status {
    display: none;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
}
.upload-chip.uploading .upload-status { display: inline-flex; }
.upload-chip.uploading .remove { display: none; }  /* rotes × während der Analyse ausblenden */
.upload-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: upload-spin 0.7s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }
.upload-chip.done { border-color: var(--success); }
.upload-chip.error { border-color: var(--error); }

/* Upload-Thumbnail Vorschau */
.upload-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Bilder in Chat-Nachrichten */
.msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.msg-image-thumb {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    object-fit: cover;
}

.msg-image-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Bilder in Markdown (Bot-Antworten) */
.msg-image-inline {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    cursor: pointer;
    margin: 8px 0;
    transition: transform 0.15s ease;
}

.msg-image-inline:hover {
    transform: scale(1.02);
}

/* Video in Chat-Nachrichten (ComfyUI-Generierungen) */
.msg-video {
    max-width: 100%;
    max-height: 480px;
    border-radius: 8px;
    margin: 8px 0;
    background: #000;
}

/* Inline-Medien mit sichtbarer Speichern-Leiste (auf iOS lässt sich ein <video> sonst
   nur abspielen, nicht sichern). Gilt für Bild UND Video im Chatverlauf. */
.msg-media {
    display: inline-block;
    max-width: 100%;
}
.media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 8px;
}
/* Dateiname unter/neben Inline-Medien — lange Namen werden abgeschnitten, der volle
   steht im title. user-select, damit man ihn zum Weiterverwenden kopieren kann. */
.media-name {
    font-size: 12px;
    color: var(--text-muted, #9aa3b2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
}
.media-actions .media-name {
    flex: 1 1 100%;
}
.media-dl-btn {
    font-size: 12px;
    font-family: inherit; /* Speichern ist jetzt ein <button> — UA-Font neutralisieren */
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    background: var(--bg-input, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
    color: var(--text, #e6e9ef);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.media-dl-btn:hover {
    border-color: var(--accent);
}

/* Bild-Overlay (Lightbox) */
.image-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

.image-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.image-overlay-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.image-overlay-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.image-overlay-actions {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 1;
}

.image-overlay-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-family: inherit; /* Herunterladen ist jetzt ein <button> */
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.image-overlay-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Input Area */
footer#chat-input-area {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
    position: relative;
}

/* Neon-Linie über dem Input-Bereich */
footer#chat-input-area::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.25), rgba(0, 212, 255, 0.4), rgba(0, 212, 255, 0.25), transparent);
}

/* Kontext-Auslastungsanzeige */
.context-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    border-bottom: 1px solid var(--border);
}
.context-bar-label {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-display);
}
.context-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.context-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.4s ease;
    width: 0%;
}
.context-bar-fill.ctx-low { background: var(--success); }
.context-bar-fill.ctx-mid { background: #d29922; }
.context-bar-fill.ctx-high { background: #e3872d; }
.context-bar-fill.ctx-critical { background: var(--error); }
.context-bar-text {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 160px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Performance Stats Bar --- */
/* === Reiter der rechten Seite (Chat / Workspace) === */
/* Sie sitzen ueber allem, was rechts liegt, und muessen ueber den Panels bleiben —
   die sind absolut positioniert und wuerden sie sonst verdecken. */
.ansicht-tabs {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 10px;
    height: var(--ansicht-tabs-h);
    box-sizing: border-box;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

/* Die Tab-Leiste selbst darf waagerecht rollen, wenn viele Tabs offen sind —
   sie soll nie die Aktionen rechts verdraengen. */
.tab-liste {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Reiter, die auch wie Reiter aussehen: eigene Flaeche mit oben abgerundeten Ecken und
   Rahmen. Vorher war ein Tab nur Text mit einem Unterstrich — man erkannte nicht, wo
   einer anfaengt und der naechste aufhoert. Der AKTIVE sitzt jetzt sichtbar auf der
   Inhaltsflaeche: heller Grund, Akzentlinie oben, und der untere Rand ist offen
   (negativer margin ueber die Trennlinie der Leiste hinweg). Inaktive liegen dunkler
   und einen Hauch tiefer daneben. */
.tab {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 6px 12px;
    margin-top: 3px;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    background: var(--kachel-bg);
    color: var(--text-dim, #6e7681);
    font-family: var(--font-mono);
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s, background 0.15s, border-color 0.15s, margin-top 0.12s;
}

.tab:hover {
    color: var(--text-secondary, #9da7b3);
    background: var(--kachel-bg-hover);
    border-color: var(--kachel-rand);
}

.tab.aktiv {
    color: var(--accent, #00d4ff);
    background: var(--bg);
    border-color: var(--border);
    border-bottom-color: var(--bg);
    /* Ein Pixel tiefer als die Leistenkante: der Reiter „steht offen" zum Inhalt. */
    margin-top: 0;
    margin-bottom: -1px;
    z-index: 1;
    box-shadow: inset 0 2px 0 var(--accent), 0 -2px 8px rgba(0, 212, 255, 0.10);
}

.tab-titel {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „TRON arbeitet in diesem Tab": pulsierender Punkt vor dem Titel. Ohne ihn sah man eine
   laufende Generierung nur, wenn man zufällig in genau dem Tab stand — bei mehreren
   offenen Sessions arbeitete TRON unsichtbar im Hintergrund. */
.tab-laeuft {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--accent, #00d4ff);
    box-shadow: 0 0 6px var(--accent, #00d4ff);
    animation: tab-laeuft-puls 1.1s ease-in-out infinite;
}
@keyframes tab-laeuft-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.72); }
}
/* Der arbeitende Tab bleibt auch inaktiv gut lesbar — sonst übersieht man genau den,
   auf den es gerade ankommt. */
.tab.arbeitet { color: var(--text, #bff8ff); border-color: var(--accent-border); }
.tab.arbeitet:not(.aktiv) { background: var(--kachel-bg-hover); }

@media (prefers-reduced-motion: reduce) {
    .tab-laeuft { animation: none; }
}

/* Erscheint erst beim Ueberfahren, damit die Leiste ruhig bleibt — beim aktiven
   Tab dauerhaft, weil man ihn am ehesten schliesst. */
.tab-zu {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.tab:hover .tab-zu,
.tab.aktiv .tab-zu { opacity: 0.7; }
.tab-zu:hover { opacity: 1; color: var(--danger, #f85149); }

.ansicht-tab-aktionen {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 3px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.03em;
    user-select: none;
}
.perf-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.perf-label {
    font-family: var(--font-display);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    opacity: 0.7;
    margin-right: 4px;
}
.perf-value {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    min-width: 36px;
    text-align: right;
}
.perf-dim {
    color: var(--text-muted);
}
.perf-sep {
    color: var(--border);
    font-size: 9px;
}
.perf-divider {
    width: 1px;
    height: 12px;
    background: var(--border);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
}

.upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.upload-btn:hover {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    color: var(--accent);
}

#msg-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-mono);
    resize: none;
    outline: none;
    max-height: 160px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#msg-input:focus {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: var(--glow-cyan-sm);
}

#msg-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

#btn-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

#btn-send:hover:not(:disabled) { background: rgba(0, 212, 255, 0.2); box-shadow: var(--glow-cyan-sm); }
#btn-send:disabled { opacity: 0.3; cursor: not-allowed; }
#btn-send.stop-mode { background: rgba(255, 68, 68, 0.15); border-color: var(--error); color: var(--error); }
#btn-send.stop-mode:hover { background: rgba(255, 68, 68, 0.25); }

/* Microphone Button */
.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mic-btn:hover {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    color: var(--accent);
}

.mic-btn.recording {
    background: var(--error);
    color: #fff;
    animation: pulse-mic 1.2s ease-in-out infinite;
}

@keyframes pulse-mic {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

/* Recording indicator bar */
.recording-indicator {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--error);
    background: var(--bg-surface);
    font-size: 13px;
    color: var(--error);
}

.recording-indicator .rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error);
    animation: blink-dot 1s ease-in-out infinite;
}

@keyframes blink-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.recording-indicator .rec-timer {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.recording-indicator .rec-cancel {
    margin-left: auto;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    transition: all 0.2s;
}

.recording-indicator .rec-cancel:hover {
    border-color: var(--error);
    color: var(--error);
}

/* VCM Button (Voice Conversation Mode) */
/* Akustik-Schalter in der Eingabeleiste (01.10.2026). Ausgefuellt = TRON spricht gerade;
   ein Klick bringt dann nur diese Antwort zum Schweigen. */
.audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.audio-btn:hover {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    color: var(--accent);
}

.audio-btn.spricht {
    background: var(--accent);
    color: #fff;
}

.audio-btn.spricht svg polygon {
    fill: currentColor;
}

.vcm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.vcm-btn:hover {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    color: var(--accent);
}

.vcm-btn.active {
    background: var(--accent);
    color: #fff;
    animation: pulse-vcm 1.5s ease-in-out infinite;
}

.vcm-btn.paused {
    background: #e6a817;
    color: #fff;
    animation: none;
}

.vcm-btn.paused:hover {
    background: #d49b0e;
}

@keyframes pulse-vcm {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

/* Mic-Button "Warte auf Sprache" Zustand (blau statt rot) */
.mic-btn.waiting {
    background: var(--accent);
    color: #fff;
    animation: pulse-mic 1.5s ease-in-out infinite;
}

/* Recording-Indicator "Warte auf Sprache" Variante */
.recording-indicator.waiting {
    border-top-color: var(--accent);
    color: var(--accent);
}

.recording-indicator.waiting .rec-dot {
    background: var(--accent);
}

/* Voice message style */
.message.user .voice-tag {
    font-size: 11px;
    color: rgba(0, 212, 255, 0.4);
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

/* Welcome state */
.welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 12px;
    padding: 40px;
    text-align: center;
}

.welcome h2 {
    color: var(--accent);
    font-size: 20px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.welcome p {
    font-size: 14px;
    max-width: 400px;
    font-family: var(--font-mono);
}

/* Scrollbar */
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.15); border-radius: 3px; }
#chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.3); }

/* === Files Panel — Zweispaltiger Dateibrowser === */
.files-panel {
    position: absolute;
    top: var(--ansicht-tabs-h);   /* unter den Reitern; Bezug ist #chat-column */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.files-panel[hidden] { display: none; }

.files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    flex-shrink: 0;
}
.files-header button,
.files-header label {
    font-size: 11px;
    line-height: 1;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: normal;
}
.files-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.files-header-actions label,
.files-header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Hauptbereich: Baum + Inhalt */
.files-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Linke Spalte: Ordnerbaum */
/* Der Ordnerbaum sitzt seit dem 13.08.2026 in der Seitenleiste (Reiter "Dateien").
   Die Regeln fuer .tree-* darunter gelten dort unveraendert weiter. */
.workspace-tree {
    padding: 6px 4px;
    overflow-y: auto;
}

.workspace-tree[hidden] { display: none; }

/* Umbenennen und Loeschen sitzen am Ordner selbst — wie bei den Konversationen. Sie
   erscheinen erst beim Ueberfahren, damit die Liste ruhig bleibt. */
.tree-akt-btn {
    background: none;
    border: none;
    color: var(--text-dim, #6e7681);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

/* Der erste Knopf schiebt die Gruppe nach rechts, der zweite schliesst direkt an. */
.tree-akt-btn:first-of-type { margin-left: auto; }

.tree-folder-row:hover .tree-akt-btn { opacity: 1; }
.tree-akt-btn:hover { color: var(--accent, #00d4ff); }
.tree-del-btn:hover { color: var(--danger, #f85149); }

/* Damit der Loeschknopf rechts andocken kann */
.tree-folder-row { display: flex; align-items: center; }

/* Ordner-Einträge im Baum */
.tree-folder {
    user-select: none;
}
.tree-folder-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    transition: background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-folder-row:hover {
    background: var(--bg-hover);
}
.tree-folder-row.active {
    background: var(--accent);
    color: var(--bg);
}
.tree-folder-row .tree-arrow {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.tree-folder-row.active .tree-arrow {
    color: var(--bg);
}
.tree-folder-row .tree-arrow.open {
    transform: rotate(90deg);
}
.tree-folder-row .tree-icon {
    flex-shrink: 0;
    font-size: 14px;
}
.tree-folder-row .tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-children {
    padding-left: 16px;
}
.tree-children[hidden] { display: none; }

/* Rechte Spalte: Dateien + Vorschau */
.files-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Ohne die Baumspalte daneben nimmt der Inhalt die ganze Breite ein. */
.files-content--voll { width: 100%; }

/* Ablegebereich fuer Dateien — bewusst flach, er soll die Dateiliste nicht verdraengen. */
.files-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 10px 4px;
    padding: 7px 10px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim, #6e7681);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.files-drop:hover {
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--text-secondary, #9da7b3);
}

/* Waehrend etwas darueber schwebt */
.files-drop.bereit {
    border-color: var(--accent, #00d4ff);
    border-style: solid;
    color: var(--accent, #00d4ff);
    background: rgba(0, 212, 255, 0.06);
}

/* Breadcrumb-Leiste */
/* Pfadzeile und Neu-laden-Knopf in einer Reihe. */
.files-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.files-bar .files-breadcrumb { flex: 1; min-width: 0; }
.files-reload {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.files-reload.laeuft svg { animation: files-reload-dreh 0.8s linear infinite; }
@keyframes files-reload-dreh { to { transform: rotate(360deg); } }

.files-breadcrumb {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.files-breadcrumb span {
    cursor: pointer;
    color: var(--accent);
}
.files-breadcrumb span:hover {
    text-decoration: underline;
}
.files-breadcrumb .bc-sep {
    margin: 0 4px;
    color: var(--text-muted);
    cursor: default;
}
.files-breadcrumb .bc-current {
    color: var(--text);
    cursor: default;
}

/* Die gefaltete Mitte. Klickbar, weil ein "…" ohne Ausweg schlimmer ist als ein langer
   Pfad — man sieht dann, dass etwas fehlt, und kommt nicht heran. */
.files-breadcrumb .bc-mehr {
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 3px;
}
.files-breadcrumb .bc-mehr:hover {
    color: var(--accent);
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    text-decoration: none;
}

/* Dateiliste */
.files-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.files-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 0;
    font-size: 14px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
    background: var(--bg-surface);
    transition: background 0.15s;
    cursor: pointer;
}
.file-item:hover {
    background: var(--bg-hover);
}
.file-item.is-folder {
    border-color: var(--accent);
    border-style: dashed;
}

.file-icon {
    font-size: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

/* Thumbnail-Vorschaubilder */
.file-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    margin-right: 10px;
    background: var(--bg-hover);
}

.file-info {
    flex: 1;
    min-width: 0;
}
.file-name {
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.file-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.file-download {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.file-download:hover {
    background: var(--accent);
    color: var(--bg);
}
.file-rename {
    background: none;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.file-rename:hover {
    background: var(--text-muted);
    color: var(--bg);
}
.file-delete {
    background: none;
    border: 1px solid var(--error);
    color: var(--error);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.file-delete:hover {
    background: var(--error);
    color: #fff;
}

/* Toolbar: Select-All + Bulk-Actions */
.fb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    min-height: 36px;
    flex-shrink: 0;
}
.fb-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.fb-select-all-cb {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.fb-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}
.fb-bulk-bar[hidden] { display: none; }
.fb-bulk-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fb-bulk-delete {
    border-color: var(--error);
    color: var(--error);
}
.fb-bulk-delete:hover {
    background: var(--error);
    color: #fff;
}
.fb-bulk-download {
    border-color: var(--accent);
    color: var(--accent);
}
.fb-bulk-download:hover {
    background: var(--accent);
    color: var(--bg);
}

/* Sortier-Leiste */
.fb-sort-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}
.fb-sort-btn {
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    user-select: none;
    white-space: nowrap;
}
.fb-sort-btn:hover {
    background: var(--bg-hover, color-mix(in srgb, var(--accent) 10%, var(--bg-surface)));
    color: var(--text);
    border-color: var(--border);
}
.fb-sort-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
    font-weight: 500;
}

/* Datei-Checkbox */
.file-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px;
}
/* Ausgewählte Zeile */
.file-item.is-selected {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
    border-color: var(--accent);
}

/* Vorschau-Bereich */
.files-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.files-preview[hidden] { display: none; }

.files-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.files-preview-actions {
    display: flex;
    gap: 6px;
}

.files-preview-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.files-preview-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.files-preview-body video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}
.files-preview-body pre {
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-surface);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: auto;
    max-height: 100%;
}
.files-preview-body iframe,
.files-preview-body object {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}
.files-preview-body .preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
    padding: 40px;
}
.files-preview-body .preview-placeholder .preview-icon {
    font-size: 48px;
}

.files-preview-meta {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
}
.files-preview-meta table {
    width: 100%;
    border-collapse: collapse;
}
.files-preview-meta td {
    padding: 3px 8px 3px 0;
    vertical-align: top;
}
.files-preview-meta td:first-child {
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
    width: 120px;
}

/* Responsive: Auf schmalem Bildschirm Baum ausblenden */
@media (max-width: 640px) {
    .files-tree { display: none; }
    .files-body { flex-direction: column; }
}

/* === Help Panel (Overlay) === */
.help-panel {
    position: absolute;
    top: var(--ansicht-tabs-h);   /* unter den Reitern; Bezug ist #chat-column */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.help-panel[hidden] { display: none; }
.help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.help-header button {
    font-size: 22px;
    line-height: 1;
    padding: 2px 8px;
}
.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 40px;
}
.help-content section {
    margin-bottom: 22px;
}
.help-content section:last-child {
    margin-bottom: 0;
}
.help-content h3 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
}
.help-content p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 6px;
}
.help-content p:last-child {
    margin-bottom: 0;
}
.help-content ul {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}
.help-content code {
    background: var(--bg-surface);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-mono);
}
.help-content kbd {
    display: inline-block;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    line-height: 1.5;
}
.help-shortcuts {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.help-shortcuts td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.help-shortcuts td:first-child {
    width: 160px;
    white-space: nowrap;
}

/* === Export Menu === */
.export-menu {
    position: fixed;
    z-index: 200;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), var(--glow-cyan-sm);
}
.export-menu button {
    padding: 8px 18px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-mono);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    white-space: nowrap;
    transition: all 0.15s;
}
.export-menu button:hover {
    background: rgba(0, 212, 255, 0.06);
    color: var(--accent);
}

/* === Slash Command Popup === */
.cmd-popup {
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    padding: 4px 8px;
    max-height: 200px;
    overflow-y: auto;
}
.cmd-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.cmd-popup-item:hover,
.cmd-popup-item.active {
    background: rgba(0, 212, 255, 0.06);
}
.cmd-popup-item .cmd-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
    min-width: 80px;
    font-family: var(--font-mono);
}
.cmd-popup-item .cmd-desc {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* === Mobile Support === */

/* Hamburger button — hidden on desktop */
.mobile-only { display: none; }

/* Sidebar backdrop — hidden on desktop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 59;
}
.sidebar-backdrop[hidden] { display: none; }

/* Hide 3D panel on narrower screens, left column becomes sidebar only */
@media (max-width: 900px) {
    #model-panel { display: none; }
}

/* === Tablet & narrow desktop (<=768px): Left column becomes overlay === */
@media (max-width: 768px) {
    /* minmax(0, 1fr) statt 1fr: "1fr" bedeutet implizit minmax(AUTO, 1fr) — das
       Minimum ist damit die INHALTSbreite. Der Header (Logo + 8 Buttons) braucht
       ~489px, also wuchs die Spalte auf 489px statt der 390px des iPhone-Viewports,
       und ALLE Kinder wurden mitgezogen: Chat-Blasen, Kontextleiste und vor allem
       die Eingabezeile — der Senden-Button lag bei x=481px, also ausserhalb des
       Bildschirms und unerreichbar. Das overflow:hidden auf #chat-column lief ins
       Leere, weil die Spalte SELBST zu breit war. minmax(0, …) erlaubt ihr zu
       schrumpfen, danach greifen die Umbruch-/Scroll-Regeln der 640px-Query. */
    #chat-screen { grid-template-columns: minmax(0, 1fr); }
    /* Chat-Spalte zurück auf Spalte 1 — sonst landet sie im 1-Spalten-Grid in einer
       Phantom-Spalte 2 und der Chat wird auf die rechte Hälfte gequetscht. */
    #chat-column { grid-column: 1; }
    .mobile-only { display: flex; }

    #left-column {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        background: var(--bg-surface);
        border-right: 1px solid var(--border);
    }
    #left-column.open {
        transform: translateX(0);
    }
    /* On mobile, hide 3D panel in sidebar overlay */
    #left-column #model-panel { display: none; }
    /* Sidebar takes full height in overlay mode */
    #left-column .conv-sidebar { flex: 1; }

    .sidebar-backdrop.visible {
        display: block;
    }

    /* Header adjustments */
    /* Auf schmalen Schirmen bleibt vom Profil nur das Symbol — der Name kostet dort
       mehr Platz als er nuetzt. Das !important schlaegt das inline-flex der Kombination. */
    .header-user,
    .header-btn--profil .header-user { display: none !important; }

    #btn-logout { font-size: 0; padding: 6px 10px; }
    #btn-logout::before { content: "\2192"; font-size: 16px; }

    /* Hide non-essential header buttons */
    .header-select { display: none; }
}

/* === Mobile (<=640px): Full touch optimization === */
@media (max-width: 640px) {
    /* Login screen */
    .logo pre { font-size: 6px; }
    .login-box { padding: 16px; }
    #login-form input { padding: 14px 16px; font-size: 16px; }
    #login-form button { padding: 14px; font-size: 16px; }

    /* Header compact */
    header#chat-header {
        padding: 0 8px;
        height: 48px;
    }
    :root { --header-h: 48px; }

    .header-logo { font-size: 16px; letter-spacing: 1px; }

    /* Metrik-Leiste (tok/s · Zeit) kompakt + horizontal scrollbar statt am Rand abgeschnitten */
    .perf-bar {
        gap: 8px;
        padding: 3px 8px;
        font-size: 9px;
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .perf-bar::-webkit-scrollbar { display: none; }

    /* flex-shrink:1 + min-width:0 heben das flex-shrink:0 der Grundregel auf —
       sonst beharrt die Button-Leiste auf ihrer vollen Breite (~388px) und schiebt
       den Header über den Bildschirmrand hinaus.
       KEIN flex-wrap: die Buttons wuerden zwar umbrechen, aber der Header hat eine
       feste Hoehe von 48px — die zweite Zeile wird oben herausgeschoben und man sieht
       nur angeschnittene Button-Raender.
       Und die Buttons NICHT schrumpfen lassen (flex-shrink:0 auf den Kindern): sonst
       quetscht Flexbox sie unter ihre Inhaltsbreite und die Icons ueberlappen sich.
       Stattdessen horizontal scrollbar — dasselbe Muster wie bei .perf-bar darueber:
       alle Buttons bleiben erreichbar, nichts wird abgeschnitten oder verzerrt. */
    /* Der Betriebs-Badge traegt auf dem Handy nur noch seinen Punkt.
       Sein Text wird lang ("Standard · JW · 2 aktiv · Pool 34%") und er steht in
       header-LEFT, waehrend die Knoepfe in header-RIGHT sitzen: Ab einem gewissen
       Punkt schiebt er die linke Haelfte unter die rechte, und der Punkt landete
       sichtbar im Rahmen des Ton-Knopfes. Gemessen am 20.09.2026 bei 390 px: 16 px
       Ueberlappung, ausgeloest durch den zusaetzlichen Feedback-Knopf.
       font-size: 0 blendet nur den Text aus — derselbe Kniff wie bei #btn-logout
       weiter oben; der Punkt bleibt, und der Volltext steht weiter im title. */
    .llm-status-badge { font-size: 0; gap: 0; padding: 4px; }

    /* 16 px zwischen vier Elementen sind auf dem Handy ein Drittel des Platzes,
       den der Text daneben braucht. Zusammen mit der Badge-Regel reicht es bei
       360 und 390 px ohne Ueberlappung — beides nachgemessen. */
    .header-left { gap: 10px; }

    .header-right { gap: 4px; flex-wrap: nowrap; justify-content: flex-end;
                    flex-shrink: 1; min-width: 0;
                    overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .header-right::-webkit-scrollbar { display: none; }
    .header-right > * { flex-shrink: 0; }
    .header-btn { padding: 5px 7px; }
    .header-btn svg { width: 15px; height: 15px; }

    /* GPU-Mini-Balken ausblenden: 4px breite Balken sind auf dem Handy ohnehin nicht
       ablesbar, kosten aber ~50px Headerbreite. Der Button selbst bleibt erhalten
       und öffnet weiterhin das GPU-Dashboard. Per ID-Selektor, weil die Basisregel
       .gpu-header-btn { min-width: 72px } weiter unten in der Datei steht und bei
       gleicher Spezifität sonst gewinnt — Media-Queries erhöhen die Spezifität nicht. */
    #btn-gpu .gpu-mini-bars { display: none; }
    #btn-gpu { min-width: 0; }

    /* Platzhalter einzeilig halten: das Eingabefeld ist nur eine Zeile hoch, auf
       schmalen Displays brach "Nachricht eingeben..." aber um und wurde unten
       angeschnitten. Vorher fiel das nicht auf, weil die Seite ohnehin 99px zu
       breit war und das Feld dadurch mehr Platz hatte. */
    #msg-input::placeholder {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* Hide export and files button text */
    #btn-files svg, #btn-export svg { width: 18px; height: 18px; }

    /* Messages area */
    main#chat-messages { padding: 12px 8px; gap: 12px; }
    .message { max-width: 92%; font-size: 14px; padding: 10px 12px; }
    .message.assistant .msg-content pre {
        font-size: 12px;
        padding: 8px;
    }
    .message.assistant .msg-content .code-block pre {
        padding-top: 24px;
    }
    .message.assistant .msg-content .code-block .code-copy {
        opacity: 1;  /* Always visible on touch — no hover */
        padding: 4px 8px;
    }

    /* Tables scroll horizontally */
    .message.assistant .msg-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Input area — bigger touch targets */
    .input-row {
        padding: 8px;
        gap: 6px;
    }

    #msg-input {
        font-size: 16px;  /* Prevents iOS zoom on focus */
        padding: 10px 12px;
        border-radius: 20px;
    }

    .upload-btn, .mic-btn, .vcm-btn, .audio-btn, #btn-send {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Upload preview chips */
    .upload-chip {
        font-size: 11px;
        padding: 4px 8px;
    }
    .upload-thumb {
        width: 36px;
        height: 36px;
    }
    #upload-preview {
        padding: 6px 8px;
    }

    /* Bilder in Nachrichten - mobil */
    .msg-image-thumb {
        max-width: 140px;
        max-height: 140px;
    }
    .msg-image-inline {
        max-height: 280px;
    }

    /* Welcome screen */
    .welcome { padding: 20px; }
    .welcome h2 { font-size: 18px; }
    .welcome p { font-size: 13px; }

    /* Files panel */
    .files-panel {
        top: 48px;  /* match mobile header height */
    }
    .files-header { padding: 10px 12px; }
    .files-list { padding: 8px; }

    /* Help panel */
    .help-panel {
        top: 48px;
    }
    .help-header { padding: 10px 12px; }
    .help-content { padding: 14px 12px 30px; }

    /* Admin panel */
    .admin-panel { top: 48px; }
    .admin-header { padding: 10px 12px; }
    .admin-content { padding: 14px 12px 30px; }
    .admin-table th, .admin-table td { padding: 8px 4px; font-size: 12px; }
    .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; } /* Telegram ausblenden */
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-btn--sm { font-size: 10px; padding: 2px 6px; }

    /* TOTP form */
    #totp-form input { padding: 14px 16px; font-size: 18px; }
    #totp-form button[type="submit"] { padding: 14px; font-size: 16px; }

    .file-item { padding: 10px; }
    .file-download { padding: 8px 14px; font-size: 13px; }

    /* Export menu */
    .export-menu {
        left: auto !important;
        right: 8px !important;
    }
    .export-menu button {
        padding: 12px 18px;
        font-size: 14px;
    }

    /* Left column when open (mobile) */
    #left-column.open {
        width: 85vw;
        max-width: 320px;
    }
    .conv-item { padding: 12px; }
    .conv-item-title { font-size: 14px; }
    .conv-item-actions {
        display: flex;  /* Always visible on touch */
    }
    .conv-item-actions button {
        width: 28px;
        height: 28px;
    }

    /* Recording indicator */
    .recording-indicator { padding: 8px 12px; }
}

/* === Very small screens (<=380px) === */
@media (max-width: 380px) {
    .logo pre { font-size: 5px; }
    .header-logo { font-size: 14px; }

    /* Stack header buttons if too many */
    .header-right { flex-wrap: wrap; justify-content: flex-end; }

    .message { max-width: 96%; }
    main#chat-messages { padding: 8px 4px; }
}

/* === Prevent iOS zoom on input focus === */
@supports (-webkit-touch-callout: none) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* === 2FA TOTP Form === */
#totp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#totp-form[hidden] { display: none; }

.totp-info {
    color: var(--accent);
    font-size: 13px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0;
}

#totp-form input {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-size: 18px;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#totp-form input:focus { border-color: rgba(0, 212, 255, 0.4); box-shadow: var(--glow-cyan-sm); }

#totp-form button[type="submit"] {
    padding: 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    font-size: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
#totp-form button[type="submit"]:hover { background: rgba(0, 212, 255, 0.2); box-shadow: var(--glow-cyan-sm); }
#totp-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

.totp-cancel-btn {
    padding: 10px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}
.totp-cancel-btn:hover { border-color: rgba(0, 212, 255, 0.4); color: var(--accent); }

/* === Admin Panel (Benutzerverwaltung) === */
.admin-panel {
    position: absolute;
    top: var(--ansicht-tabs-h);   /* unter den Reitern; Bezug ist #chat-column */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-panel[hidden] { display: none; }

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.admin-header button { font-size: 22px; line-height: 1; padding: 2px 8px; }
.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 40px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.admin-table tr:hover td { background: var(--bg-hover); }

.admin-table .totp-active {
    color: var(--accent);
    font-weight: 600;
}
.admin-table .totp-inactive {
    color: var(--text-muted);
}

.admin-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: transparent;
    color: var(--accent);
}
.admin-btn:hover { background: rgba(0, 212, 255, 0.08); border-color: var(--accent); box-shadow: var(--glow-cyan-sm); }

.admin-btn--danger {
    border-color: var(--error);
    color: var(--error);
}
.admin-btn--danger:hover { background: var(--error); color: #fff; }

.admin-btn--secondary {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.admin-btn--secondary:hover { background: var(--text-muted); color: var(--bg); }

.admin-btn--sm {
    padding: 3px 10px;
    font-size: 11px;
}

.admin-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.admin-table .status-active { color: var(--success); font-weight: 600; }
.admin-table .status-locked { color: var(--error); font-weight: 600; }
.admin-table .status-inactive { color: var(--text-muted); }
.admin-table .row-locked td { opacity: 0.6; }

/* --- Admin-Tabs --- */
.admin-tabs {
    display: flex;
    gap: 2px;
}
.admin-tab {
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s;
}
.admin-tab:hover { color: var(--accent); border-color: var(--accent); }
.admin-tab.aktiv {
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

/* --- Workspace-Übersicht --- */
.admin-ws-zusammenfassung {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.admin-ws-nutzer {
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.admin-ws-nutzer[open] { margin-bottom: 8px; }
.admin-ws-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    list-style: none;
    user-select: none;
}
.admin-ws-kopf::-webkit-details-marker { display: none; }
.admin-ws-kopf:hover { background: var(--bg-hover); }
.admin-ws-name { font-weight: 600; color: var(--text); }
.admin-ws-name small { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.admin-ws-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.admin-ws-gross .admin-ws-meta { color: var(--warning, #e0a030); }
.admin-ws-warn .admin-ws-meta { color: var(--error); font-weight: 600; }
.admin-ws-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.admin-ws-tabelle th {
    text-align: left;
    padding: 6px 14px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.admin-ws-tabelle td {
    padding: 5px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
}
.admin-ws-tabelle tr:hover td { background: var(--bg-hover); }
.admin-ws-laden {
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
}

/* Admin Benutzer-Formular */
.admin-form {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
}
.admin-form[hidden] { display: none; }
.admin-form h3 {
    margin: 0 0 16px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
}
/* Erklaerzeile unter einer Einstellung — sagt, was gerade gilt (Push-Zustand). */
.settings-hinweis {
    margin: 0 0 12px;
    color: var(--text-secondary, #9aa);
    font-size: 13px;
    line-height: 1.5;
}
.settings-hinweis.warnung { color: var(--warning, #e0a030); }

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.admin-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.admin-form-grid input,
.admin-form-grid select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-mono);
}
.admin-form-grid input:focus,
.admin-form-grid select:focus {
    outline: none;
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: var(--glow-cyan-sm);
}
.admin-form-grid input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.admin-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* Profile logout section */
.profile-logout-section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.profile-logout-btn {
    width: 100%;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.profile-logout-btn:hover {
    background: rgba(255, 68, 68, 0.1);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
}

.admin-totp-setup {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    text-align: center;
}
.admin-totp-setup[hidden] { display: none; }
.admin-totp-setup h3 {
    margin: 0 0 8px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.admin-totp-setup p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0 16px;
}
.admin-qr {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    margin-bottom: 12px;
}
.admin-totp-secret {
    margin: 8px 0 16px;
}
.admin-totp-secret code {
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.05em;
    user-select: all;
}

/* === ComfyUI Fortschrittsanzeige (innerhalb User-Blase) === */
.comfy-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    animation: fadeIn 0.3s ease;
}

.comfy-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.comfy-blocks {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.comfy-block {
    width: 3px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
    animation: comfy-wave 1.2s ease-in-out infinite;
}

.comfy-block:nth-child(2) { animation-delay: 0.1s; }
.comfy-block:nth-child(3) { animation-delay: 0.2s; }
.comfy-block:nth-child(4) { animation-delay: 0.3s; }
.comfy-block:nth-child(5) { animation-delay: 0.4s; }

/* Wartet in der Queue (noch kein GPU-Slot): Balken gedimmt + ohne Wellen-Animation,
   damit sichtbar ist, dass noch NICHTS rendert (der Render-Timeout läuft dann auch nicht). */
.comfy-progress.comfy-pending .comfy-block {
    animation: none;
    opacity: 0.35;
}

@keyframes comfy-wave {
    0%, 100% {
        transform: scaleY(0.4);
        opacity: 0.4;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.comfy-done {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: var(--success);
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

[data-theme="light"] .comfy-progress {
    border-top-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .comfy-done {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* === Claude-Beratungs-Block (TRON <-> Claude, vom consult_claude-Tool) === */
.claude-consult {
    align-self: stretch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-left: 3px solid #a855f7;
    border-radius: 10px;
    background: var(--bg-surface);
    padding: 10px 14px;
    margin: 4px 0;
    font-size: 14px;
}
.claude-consult-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c084fc;
    margin-bottom: 8px;
}
.claude-consult .cc-model {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid #a855f7;
    border-radius: 4px;
    color: #c084fc;
}
.claude-consult .cc-cont { font-size: 10px; opacity: 0.7; margin-left: auto; }
.claude-consult .cc-q { margin-bottom: 8px; font-size: 13px; }
.claude-consult .cc-q summary {
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
}
.claude-consult .cc-q-body {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 6px;
    white-space: pre-wrap;
    color: var(--text-muted);
}
.claude-consult .cc-a-label {
    font-size: 11px;
    color: #c084fc;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.claude-consult .cc-a-body { color: var(--text); }

/* === Safe area for notched devices === */
@supports (padding: max(0px)) {
    footer#chat-input-area {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    header#chat-header {
        padding-top: max(0px, env(safe-area-inset-top));
    }
}

/* === KaTeX Mathe-Formeln === */
.katex-display {
    text-align: center;
    margin: 0.8em 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.4em 0;
}
.katex-display > .katex {
    font-size: 1.15em;
}
.msg-content .katex {
    font-size: 1.05em;
}
.katex-error {
    color: #f88;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
[data-theme="light"] .katex-error {
    color: #c44;
}

/* --- Datei-Links im Chat (öffnen Filebrowser) --- */
a.file-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    transition: opacity 0.15s;
}
a.file-link:hover {
    opacity: 0.75;
    text-decoration-style: solid;
}
a.file-link::before {
    content: "📄 ";
    font-size: 0.85em;
}

/* === GPU Mini-Bar Header Button === */
.gpu-header-btn {
    padding: 4px 10px !important;
    min-width: 72px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.gpu-header-btn:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.gpu-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}
.gpu-mini-group {
    display: flex;
    align-items: flex-end;
    gap: 1px;
}
.gpu-mini-bar {
    width: 4px;
    height: 20px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.gpu-mini-fill {
    width: 100%;
    height: 0%;
    border-radius: 2px;
    background: var(--success);
    transition: height 0.6s ease, background 0.3s ease;
}
.gpu-mini-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    margin: 0 2px;
    align-self: center;
}

/* === GPU Dashboard Panel === */
.gpu-panel {
    position: absolute;
    top: var(--ansicht-tabs-h);   /* unter den Reitern; Bezug ist #chat-column */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gpu-panel[hidden] { display: none; }

.gpu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.gpu-header button { font-size: 22px; line-height: 1; padding: 2px 8px; }
.gpu-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gpu-last-update {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.gpu-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 40px;
}

/* 2x2 Grid: vLLM spans left column, shared top-right, comfy bottom-right */
.gpu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    margin-bottom: 28px;
}
.gpu-cell {
    min-width: 0;
}

.gpu-server-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gpu-server-ip {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-mono);
}

.gpu-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* GPU Card */
.gpu-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.gpu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.gpu-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.gpu-card-index {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.gpu-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gpu-metric {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 10px;
}
.gpu-metric-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-display);
}
.gpu-metric-value {
    font-size: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Progress Bar */
.gpu-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}
.gpu-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
    min-width: 2px;
}

/* Stats Row */
.gpu-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin-top: 4px;
    padding-left: 80px;
}
.gpu-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Process Tags */
.gpu-processes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.gpu-process-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--accent);
    font-family: var(--font-mono);
}

/* ── Funktions-Gruppierung (LLM/VLM/Render/Whisper) + Kompakt-Karten ── */
.gpu-grid-funktion {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows: none;
    gap: 14px;
    align-items: start;
    margin-bottom: 20px;
}
.gpu-grid-funktion .gpu-server-title {
    margin-bottom: 8px;
}
.gpu-cards-kompakt {
    gap: 8px;
}
.gpu-card-kompakt {
    padding: 8px 12px;
    border-radius: 8px;
}
.gpu-card-kompakt .gpu-card-header {
    margin-bottom: 5px;
    gap: 8px;
    justify-content: flex-start;
}
.gpu-card-kompakt .gpu-card-index {
    margin-left: auto;
}
.gpu-card-host {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.gpu-card-kompakt .gpu-metric {
    grid-template-columns: 38px 1fr auto;
    gap: 8px;
    margin-bottom: 3px;
}
.gpu-card-kompakt .gpu-bar {
    height: 5px;
}
.gpu-card-kompakt .gpu-metric-value {
    font-size: 11px;
    min-width: 82px;
    text-align: right;
}
.gpu-card-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.gpu-card-fuss .gpu-process-tag {
    font-size: 10px;
    padding: 1px 6px;
}

/* Container Tabelle */
.gpu-containers-section {
    margin-top: 8px;
}
.gpu-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gpu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.gpu-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.gpu-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.gpu-table tr:hover td { background: var(--bg-hover); }

.gpu-container-name {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 12px;
}
.gpu-container-image {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gpu-container-ports {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.gpu-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.gpu-status-up {
    background: rgba(63, 185, 80, 0.15);
    color: var(--success);
}
.gpu-status-down {
    background: rgba(248, 81, 73, 0.15);
    color: var(--error);
}

.gpu-restart-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s, border-color 0.15s;
}
.gpu-restart-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.gpu-restart-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gpu-loading {
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.gpu-error {
    color: var(--error);
    font-size: 13px;
    padding: 12px;
    background: rgba(248, 81, 73, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(248, 81, 73, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gpu-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gpu-content {
        padding: 14px 12px 30px;
    }
    .gpu-metric {
        grid-template-columns: 60px 1fr auto;
        gap: 6px;
    }
    .gpu-stats {
        padding-left: 60px;
        gap: 10px;
        font-size: 11px;
    }
    .gpu-table th:nth-child(3),
    .gpu-table td:nth-child(3),
    .gpu-table th:nth-child(4),
    .gpu-table td:nth-child(4) {
        display: none;
    }
    .gpu-panel { top: 48px; }
}

/* === PWA Update Banner === */
.update-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    animation: slideUp 0.4s ease;
}
.update-banner[hidden] { display: none; }

.update-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    max-width: 480px;
}
.update-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.update-banner-text strong {
    font-size: 14px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}
.update-banner-text span {
    font-size: 12px;
    color: var(--text-muted);
}
.update-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.update-btn-dismiss {
    background: none;
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
}
.update-btn-dismiss:hover {
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--accent);
}
.update-btn-apply {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.update-btn-apply:hover {
    background: rgba(0, 212, 255, 0.2);
    box-shadow: var(--glow-cyan-sm);
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 100%); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 768px) {
    .update-banner {
        left: 12px;
        right: 12px;
        transform: none;
        bottom: 16px;
    }
    .update-banner-content {
        flex-direction: column;
        gap: 12px;
        max-width: none;
    }
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ==============================================
   FEEDBACK BUTTON + MODAL
   ============================================== */

/* Der Feedback-Knopf traegt .header-btn und sieht damit aus wie Hilfe und
   Einstellungen daneben. Die frueheren .feedback-btn-Regeln (fixiert unten links,
   48px rund) sind entfallen: Genau diese Position hat die Eingabe ueberlappt. */

/* Modal Overlay */
.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.feedback-modal[hidden] {
    display: none;
}

.feedback-modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), var(--glow-cyan-sm);
    animation: modalSlideUp 0.2s ease;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.feedback-modal-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.feedback-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.feedback-modal-close:hover {
    color: var(--accent);
}

.feedback-modal-body {
    padding: 16px 20px;
}

.feedback-screenshot-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    max-height: 240px;
    background: #000;
}

.feedback-screenshot-preview img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 240px;
    object-fit: contain;
}

.feedback-screenshot-warning {
    padding: 12px 16px;
    color: var(--orange);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-align: center;
    border: 1px dashed var(--orange);
    border-radius: var(--radius);
    background: var(--orange-dim);
}

.feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(10, 10, 15, 0.7);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.feedback-textarea:focus {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: var(--glow-cyan-sm);
}

.feedback-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.feedback-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

.feedback-btn-cancel {
    padding: 8px 18px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
}

.feedback-btn-cancel:hover {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--accent);
}

.feedback-btn-submit {
    padding: 8px 22px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent);
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.feedback-btn-submit:hover {
    background: rgba(0, 212, 255, 0.2);
    box-shadow: var(--glow-cyan-sm);
}

.feedback-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==============================================
   TOAST NOTIFICATIONS
   ============================================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-mono);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), var(--glow-cyan-sm);
    pointer-events: auto;
    animation: toastSlideIn 0.25s ease;
    max-width: 360px;
    word-break: break-word;
}

.toast.toast-success {
    border-left: 3px solid #22c55e;
}

.toast.toast-error {
    border-left: 3px solid #ef4444;
}

.toast.toast-info {
    border-left: 3px solid var(--accent);
}

.toast.toast-hide {
    animation: toastSlideOut 0.2s ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

@media (max-width: 768px) {
    .feedback-btn {
        bottom: 16px;
        left: 16px;
        width: 42px;
        height: 42px;
    }
    .feedback-modal-content {
        width: 95%;
        max-height: 85vh;
    }
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 16px;
    }
    .toast {
        max-width: none;
    }
}

/* --- Nachricht loeschen: erscheint erst beim Ueberfahren der Blase ------------------
   Bewusst zurueckhaltend: Der Schritt ist nicht umkehrbar, aber er soll auch nicht
   staendig ins Auge springen. Auf Touch-Geraeten (kein Hover) ist er dauerhaft da,
   sonst waere er dort gar nicht erreichbar. */
.message { position: relative; }
.msg-loeschen {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.message:hover .msg-loeschen { opacity: 0.75; }
.msg-loeschen:hover { opacity: 1; background: #c0392b; }
@media (hover: none) {
  .msg-loeschen { opacity: 0.5; }
}

/* --- Tab-Umsortierung per Drag-and-Drop --- */
.tab[draggable="true"] { cursor: grab; }
.tab.zieht { opacity: 0.45; cursor: grabbing; }

/* --- Backend nicht erreichbar (TRON-Neustart o. A.) -------------------------------
   Ersetzt das blanke 502/„Load failed": Der Nutzer soll sehen, DASS der Dienst gerade
   weg ist und dass automatisch weiterprobiert wird — nicht raten muessen. */
.offline-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #7c2d12;
  color: #fee2e2;
  font-size: 13px;
  border-bottom: 1px solid #9a3412;
}
.offline-punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f87171;
  flex: 0 0 auto;
  animation: offline-puls 1.2s ease-in-out infinite;
}
@keyframes offline-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --- Guard-Freigabe: erklären, was freigegeben wird ------------------------
   Vorher stand am blockierten Befehl nur "Blockiert (destruktiver Befehl)" mit zwei
   Knöpfen. Wer wissen wollte, WAS da eigentlich laufen soll, musste die Tool-Blase
   aufklappen und die auslösende Zeile selbst im Skript suchen (Beschwerde 10.09.2026).
   Jetzt trägt der Kasten die drei Angaben, um die es geht: Wirkung, Fundstelle, Grund. */
.guard-freigabe-kopf {
  font-weight: 600;
  color: var(--warn, #d97706);
  margin-bottom: 4px;
}
.guard-freigabe-stelle {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 6px 8px;
  margin: 4px 0;
  border-radius: 6px;
  background: var(--kachel-bg, rgba(127, 127, 127, 0.12));
  border-left: 3px solid var(--warn, #d97706);
  overflow-x: auto;
  white-space: pre;
}
.guard-freigabe-warum {
  font-size: 0.9em;
  opacity: 0.85;
  margin-bottom: 6px;
}
.guard-freigabe-warum.fehlt {
  font-style: italic;
  opacity: 0.7;
}

/* Der Kasten, der erscheint, WÄHREND TRON auf die Freigabe wartet — er steht frei im
   Verlauf (es gibt noch keine Tool-Blase, an die er sich hängen könnte) und soll auffallen,
   weil die Zeit läuft. */
.guard-freigabe.guard-wartet {
  border: 1px solid var(--warn, #d97706);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  background: var(--kachel-bg, rgba(217, 119, 6, 0.07));
  box-shadow: var(--schatten-1, 0 1px 3px rgba(0, 0, 0, 0.12));
  animation: guard-puls 2s ease-in-out infinite;
}
.guard-freigabe.guard-wartet.abgelaufen {
  animation: none;
  opacity: 0.6;
  border-color: var(--rand, rgba(127, 127, 127, 0.4));
}
@keyframes guard-puls {
  0%, 100% { border-color: var(--warn, #d97706); }
  50% { border-color: rgba(217, 119, 6, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .guard-freigabe.guard-wartet { animation: none; }
}

/* --- Plan-Ansicht neben dem Chat -----------------------------------------
   Der Plan-Ledger war bisher nur für das Modell da (jede Runde in den Kontext
   injiziert). Wer zusah, konnte nur raten, an welchem Schritt TRON gerade ist.
   Die Ansicht gehört zum Reiter: Jeder Tab zeigt den Plan seiner Sitzung. */
#chat-mit-plan {
  display: flex;
  flex: 1;
  min-height: 0;         /* sonst wächst der Chat über den Container hinaus */
  overflow: hidden;
}
#chat-mit-plan > #chat-messages {
  flex: 1;
  min-width: 0;          /* ohne das drückt langer Code das Panel aus dem Bild */
}
#plan-panel {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.25));
  background: var(--kachel-bg, rgba(127, 127, 127, 0.04));
  overflow: hidden;
}
#plan-panel[hidden] { display: none; }

#plan-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.2));
  font-weight: 600;
}
#plan-titel { flex: 1; }
.plan-fortschritt {
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.plan-zu {
  background: none; border: none; cursor: pointer;
  font-size: 1.2em; line-height: 1; opacity: 0.6;
  color: inherit; padding: 0 2px;
}
.plan-zu:hover { opacity: 1; }

#plan-inhalt { overflow-y: auto; padding: 10px 12px 16px; font-size: 0.9em; }
.plan-leer { opacity: 0.65; font-style: italic; line-height: 1.5; }
.plan-ziel {
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.18));
  line-height: 1.35;
}
.plan-schritte { list-style: none; margin: 0; padding: 0; }
.plan-schritt {
  padding: 7px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.plan-schritt-kopf { display: flex; gap: 7px; align-items: baseline; }
.plan-marke { flex: 0 0 auto; width: 1.1em; text-align: center; opacity: 0.8; }
.plan-aktion { flex: 1; }

.plan-done { opacity: 0.55; }
.plan-done .plan-marke { color: var(--gut, #16a34a); }
.plan-failed .plan-marke { color: var(--fehler, #dc2626); }
.plan-doing .plan-marke { color: var(--warn, #d97706); }
/* Der aktuelle Schritt muss auf einen Blick zu finden sein — das ist der ganze Zweck. */
.plan-aktuell {
  background: var(--kachel-bg-hover, rgba(127, 127, 127, 0.12));
  border-left-color: var(--warn, #d97706);
  font-weight: 500;
}
.plan-meta {
  margin: 3px 0 0 calc(1.1em + 7px);
  font-size: 0.85em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.plan-kriterium, .plan-notiz {
  margin: 2px 0 0 calc(1.1em + 7px);
  font-size: 0.85em;
  opacity: 0.65;
}
.plan-notiz { font-style: italic; }

.plan-fakten {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.18));
}
.plan-fakten-titel { font-weight: 600; margin-bottom: 5px; font-size: 0.9em; }
.plan-fakt {
  display: flex; gap: 6px;
  font-size: 0.85em; line-height: 1.4;
  padding: 1px 0;
}
.plan-fakt-key { opacity: 0.65; flex: 0 0 auto; }
#btn-plan.aktiv { color: var(--warn, #d97706); }

/* Auf schmalen Fenstern nimmt das Panel sonst den halben Chat weg. */
@media (max-width: 900px) {
  #plan-panel { width: 240px; flex-basis: 240px; }
}
/* Auf dem Handy NICHT nebeneinander und auch nicht untereinander: Der Bildschirm ist für
   beides zu klein — mit Chat oben und Plan unten war keines von beidem mehr benutzbar
   (Rückmeldung 11.09.2026). Dort legt sich der Plan als Fläche ÜBER den Chat, zum kurzen
   Reinschauen und Wieder-Wegwischen. Alle größeren Geräte behalten das Nebeneinander. */
@media (max-width: 640px) {
  #plan-panel {
    position: fixed;
    inset: 0;
    width: auto;
    flex: none;
    z-index: 60;
    border-left: none;
    background: var(--bg, #111);   /* deckend: der Chat darunter darf nicht durchscheinen */
    box-shadow: none;
  }
  /* Kopfzeile bleibt stehen, damit das Schließen-Kreuz beim Scrollen erreichbar ist. */
  #plan-kopf {
    position: sticky;
    top: 0;
    background: var(--bg, #111);
    padding: 14px 16px;
    border-bottom: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.25));
  }
  /* Fingergröße, nicht Mauszeigergröße: 25x22 px waren am iPhone kaum zu treffen.
     44 px ist das Mindestmaß, das Apple für Bedienelemente nennt. */
  .plan-zu {
    font-size: 1.6em;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -8px;   /* optisch bündig trotz größerer Trefferfläche */
  }
  #plan-inhalt { padding: 12px 16px 32px; font-size: 0.95em; }
  .plan-schritt { padding: 10px 8px; }             /* mehr Luft zum Tippen */
}

/* Der ganze Befehl im Freigabe-Kasten — zugeklappt, damit er nicht den Chat füllt.
   Als Tooltip war er praktisch unerreichbar, und bei einem mehrzeiligen Skript reicht
   die auslösende Zeile allein nicht zum Entscheiden. */
.guard-freigabe-mehr { margin: 4px 0 6px; font-size: 0.85em; }
.guard-freigabe-mehr summary {
  cursor: pointer;
  opacity: 0.75;
  user-select: none;
}
.guard-freigabe-mehr summary:hover { opacity: 1; }
.guard-freigabe-mehr pre {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 260px;
  overflow: auto;
  border-radius: 6px;
  background: var(--kachel-bg, rgba(127, 127, 127, 0.12));
  font-size: 0.95em;
  line-height: 1.4;
  white-space: pre;
}
.guard-freigabe-wo {
  font-size: 0.85em;
  opacity: 0.7;
  margin-bottom: 4px;
}

/* Laufzeit und "zuletzt bewegt" — die zweite Zahl zeigt bei langen selbständigen
   Strecken, ob TRON vorankommt oder seit einer halben Stunde am selben Schritt hängt. */
.plan-zeiten {
  font-size: 0.85em;
  opacity: 0.7;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.plan-zeiten.stockt { color: var(--warn, #d97706); opacity: 0.95; }

/* Früher abgearbeitete Pläne derselben Sitzung — zugeklappt, damit der laufende
   Plan oben die Aufmerksamkeit behält. */
.plan-frueher {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--kante-innen, rgba(127, 127, 127, 0.18));
}
.plan-frueher summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  opacity: 0.75;
  line-height: 1.35;
}
.plan-frueher summary:hover { opacity: 1; }
.plan-frueher[open] summary { opacity: 1; font-weight: 500; }
.plan-frueher-bilanz {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.85em;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.plan-frueher .plan-schritte { margin-top: 6px; opacity: 0.85; }

/* Direktbefehl: vom Nutzer selbst ausgeführt, mit '!' vorn. Sieht bewusst anders aus als
   eine Chat-Blase — hier hat nicht TRON gehandelt, sondern der Mensch, und zwar ohne die
   Schutzprüfung, die für das Modell gilt. */
.direktbefehl {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--warn, #d97706);
  background: var(--kachel-bg, rgba(127, 127, 127, 0.08));
  font-size: 0.9em;
}
.direktbefehl.fehler { border-left-color: var(--fehler, #dc2626); }
.direktbefehl-kopf {
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.85;
}
.direktbefehl pre {
  margin: 0;
  padding: 8px;
  border-radius: 6px;
  background: var(--kachel-bg-hover, rgba(127, 127, 127, 0.12));
  font-size: 0.95em;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.direktbefehl-ausgabe {
  margin-top: 6px !important;
  max-height: 320px;
  overflow-y: auto;
  opacity: 0.9;
}

/* Sprung ans Ende des Chats.
   Sichtbar nur, wenn der Nutzer NICHT unten steht — dann pausiert auch das Autoscroll
   (app.js: klebtAmEnde). Vorher riss jede neue Ausgabe die Ansicht ans Ende, mitten im
   Nachlesen (gemeldet 11.09.2026). */
/* Decke ueber der Chat-Spalte waehrend eines Sitzungswechsels.
   Bezug ist #chat-column (position: relative, s.o.) — dieselbe Verankerung wie beim
   Sprung-Knopf. Sie deckt bewusst auch die Eingabezeile mit ab: Der halbfertige
   Zustand darunter gehoert noch zur alten Sitzung, und eine Nachricht, die in diesem
   Moment abgeht, landete in der falschen. */
.wechsel-decke {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-main, #0d1117) 72%, transparent);
  backdrop-filter: blur(2px);
  /* Kurzer Wechsel soll nicht flackern: Der Schleier blendet erst ein, wenn es
     tatsaechlich dauert. Bleibt es darunter, sieht man gar nichts — genau richtig. */
  animation: wechsel-decke-auf 0.32s ease-out both;
}
.wechsel-decke[hidden] { display: none; }

@keyframes wechsel-decke-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Die Eingabe ist zusaetzlich hart gesperrt (msgInput.disabled); das hier nimmt ihr
   sichtbar die Bereitschaft, damit der gesperrte Zustand nicht wie ein Hänger wirkt. */
#chat-column.wechselt .input-row { opacity: 0.45; pointer-events: none; }

.ans-ende {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent, #58a6ff);
  background: var(--panel-bg, #161b22);
  color: var(--accent, #58a6ff);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, background 0.12s ease;
}
.ans-ende:hover { transform: translateY(-2px); background: var(--accent, #58a6ff); color: #0d1117; }
.ans-ende[hidden] { display: none; }

/* Der Chatbereich ist der Bezugspunkt für den Knopf. */
#chat-mit-plan { position: relative; }

/* --- Favoriten -----------------------------------------------------------------------
   Angeheftetes: Sitzungen, Projektordner, Workspace-Ordner — frei sortierbar. Die Liste
   lebt serverseitig (Tabelle favoriten), damit sie auf allen Geräten gleich ist. */
.fav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-secondary, #9da7b3);
    font-size: 13px;
    transition: background 0.12s, border-color 0.12s;
}
.fav-item:hover { background: var(--kachel-bg-hover); border-color: var(--kachel-rand); }
.fav-item.aktiv { border-color: var(--accent-border); background: var(--accent-dim); color: var(--accent); }
.fav-item.dragging { opacity: 0.45; }
.fav-item .fav-art { flex: none; font-size: 13px; opacity: 0.85; }
.fav-item .fav-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item .fav-weg {
    flex: none; border: none; background: none; cursor: pointer;
    color: var(--text-dim, #6e7681); font-size: 15px; line-height: 1;
    padding: 2px 4px; border-radius: 4px; opacity: 0;
}
.fav-item:hover .fav-weg { opacity: 1; }
.fav-item .fav-weg:hover { color: #f85149; background: rgba(248, 81, 73, 0.12); }

/* Ziel-Markierung beim Ziehen */
.fav-item.ziel-oben { box-shadow: inset 0 2px 0 var(--accent); }
.fav-item.ziel-unten { box-shadow: inset 0 -2px 0 var(--accent); }

.fav-leer {
    padding: 18px 14px;
    color: var(--text-dim, #6e7681);
    font-size: 12px;
    line-height: 1.6;
}

/* Stern zum Anheften — sitzt bei den anderen Knöpfen an der Sitzung. */
.conv-fav {
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--text-dim, #6e7681); font-size: 13px; line-height: 1; border-radius: 4px;
}
.conv-fav:hover { color: #e3b341; background: rgba(227, 179, 65, 0.12); }
.conv-fav.ist-fav { color: #e3b341; }

/* Der Stern sitzt in Projekt- und Ordnerzeilen wie die anderen Zeilen-Knöpfe: unauffällig,
   bis man die Zeile überfährt. Angeheftetes bleibt dagegen immer sichtbar. */
.code-project .conv-fav, .tree-folder-row .conv-fav { margin-left: auto; opacity: 0; }
.code-project:hover .conv-fav, .tree-folder-row:hover .conv-fav { opacity: 1; }
.code-project .conv-fav.ist-fav, .tree-folder-row .conv-fav.ist-fav { opacity: 1; }

/* --- Verschieben im Arbeitsbereich (14.09.2026) --------------------------------- */
/* Ziehen ist der schnelle Weg, der Zielwähler der verlässliche. Beide brauchen eine
   sichtbare Rückmeldung: Wohin fällt es, und was hängt gerade am Mauszeiger? */
.fb-bulk-move {
    border-color: var(--orange);
    color: var(--orange);
}
.fb-bulk-move:hover {
    background: var(--orange);
    color: var(--bg);
}

/* Die Zeile, die gerade gezogen wird — sonst verliert man bei Mehrfachauswahl
   aus dem Blick, was eigentlich am Zeiger hängt. */
.file-item.wird-gezogen {
    opacity: 0.45;
}

/* Ablegeziel: Der Ordner unter dem Zeiger muss eindeutig sein, sonst landet die
   Datei im Nachbarordner. Deshalb Rahmen UND Fläche, nicht nur ein Farbton. */
.tree-folder-row.ablage-ziel {
    background: var(--accent-dim);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 6px;
}

.modal-hinter {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-kasten {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    min-width: min(420px, 92vw);
    max-width: 92vw;
    color: var(--text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.modal-kasten h3 {
    margin: 0 0 10px;
    font-size: 15px;
}
.ziel-pfad {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    word-break: break-all;
}
.ziel-liste {
    max-height: min(50vh, 340px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
}
.ziel-eintrag {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.ziel-eintrag:hover {
    background: var(--bg-hover);
}
.ziel-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.ziel-knoepfe button {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.ziel-ok {
    border-color: var(--accent);
    color: var(--accent);
}
.ziel-ok:hover {
    background: var(--accent);
    color: var(--bg);
}

/* --- Wartet TRON auf mich? (14.09.2026) ----------------------------------------- */
/* Ein Reiter, in dem eine Freigabe oder Rückfrage wartet. Pulsierend statt nur farbig:
   Eine statische Einfärbung übersieht man in einer Leiste mit acht Reitern. */
/* Rueckfrage/Freigabe: ruhig und fest statt blinkend — das Pulsieren gehoert dem Punkt
   „TRON rechnet" (.tab-laeuft), beides war sonst nicht zu unterscheiden (26.09.2026). */
.tab.wartet {
    border-color: var(--orange);
    background: var(--orange-dim);
    color: var(--text, #e6e9ef);
}
.tab.wartet .tab-laeuft { display: none; }
.tab.wartet .tab-titel::before {
    content: "❓ ";
}
@keyframes tab-wartet-puls {
    0%, 100% { background: transparent; }
    50%      { background: var(--orange-dim); }
}
/* Wer Bewegung im Bild nicht möchte oder verträgt, bekommt die Markierung ruhig. */
@media (prefers-reduced-motion: reduce) {
    .tab.wartet { background: var(--orange-dim); }
}

/* --- "TRON wartet" in der Kopfzeile -------------------------------------------------
 *
 * Ton, Fenstertitel und Reiter-Markierung melden, DASS etwas wartet. Dieser Knopf sagt
 * auch WO und bringt mit einem Klick hin — in die Sitzung und an die Stelle. Orange wie
 * die Reiter-Markierung, damit beides als dasselbe Signal gelesen wird.
 * Die [hidden]-Regel steht zuerst: Sie muss display:inline-flex schlagen (s. 1708). */
.wartet-badge[hidden] { display: none !important; }
.wartet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    background: var(--orange-dim);
    border: 1px solid var(--orange);
    color: var(--orange);
    white-space: nowrap;
    cursor: pointer;
    animation: wartet-puls 1.6s ease-in-out infinite;
}
.wartet-badge:hover {
    background: var(--orange);
    color: var(--bg-input);
    animation: none;
}
.wartet-badge .wartet-glocke { font-size: 12px; line-height: 1; }

@keyframes wartet-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 140, 0, 0); }
}

/* Kurzes Aufleuchten der Stelle, zu der gesprungen wurde — ohne das landet man im
 * Verlauf und sucht dann doch wieder, welcher Kasten gemeint war. */
.wartet-hervor {
    animation: wartet-aufleuchten 2.5s ease-out;
}
@keyframes wartet-aufleuchten {
    0%   { box-shadow: 0 0 0 3px var(--orange); }
    100% { box-shadow: 0 0 0 3px rgba(255, 140, 0, 0); }
}

/* Bewegung abschalten, wo das System es verlangt — der Knopf bleibt sichtbar. */
@media (prefers-reduced-motion: reduce) {
    .wartet-badge, .wartet-hervor { animation: none; }
}

/* Ablehnen — das Gegenstück zur Freigabe. Bewusst zurückhaltend gestaltet: Es ist kein
 * Abbruch und kein Fehler, sondern eine Auskunft („diesen Weg nicht"). Rot wäre falsch. */
.guard-freigabe-btn.ablehnen {
    background: transparent;
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.guard-freigabe-btn.ablehnen:hover:not(:disabled) {
    border-color: var(--danger, #f85149);
    color: var(--danger, #f85149);
    background: transparent;
}
.guard-freigabe-label.abgelehnt { color: var(--text-muted); }

/* --- Anfrage aus einer anderen Sitzung --------------------------------------------
 *
 * Sie landet technisch als role=user im Verlauf und sähe ohne Kennzeichnung aus wie eine
 * eigene Eingabe — wer später mitliest, hielte sie für einen Auftrag, den er selbst
 * gegeben hat. Deshalb eine andere Farbe, ein Rand und die Herkunft obenauf.
 * Bewusst nicht wie eine Warnung gestaltet: Es ist nichts Schlimmes, nur etwas anderes. */
.message.user.aus-sitzung {
    background: var(--bg-panel);
    border: 1px solid var(--accent-border);
    border-left: 3px solid var(--accent);
    opacity: 0.95;
}
.msg-herkunft {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0 0 6px 0;
    margin: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.msg-herkunft:hover { text-decoration: underline; }

/* Die Regeln der Zustellung sind Maschinentext — eingeklappt, aber nicht verschwunden:
 * Wer wissen will, was der anderen Sitzung gesagt wurde, soll es nachlesen können. */
.msg-herkunft-regeln { margin-top: 8px; }
.msg-herkunft-regeln summary {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
}
.msg-herkunft-regeln pre {
    margin: 6px 0 0 0;
    padding: 8px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-x: auto;
}

/* --- Steckbrief im Rechner-Dialog ---------------------------------------------------
 *
 * Die Angaben, die man sonst über die Kommandozeile suchen müsste: wo der Rechner steht,
 * unter welchem Konto er läuft, seit wann er verbunden ist. Bewusst ruhig gesetzt — sie
 * sind Nachschlagewerk, nicht Hauptsache. */
.maschine-info {
    margin: 12px 0 4px 0;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.maschine-info-zeile {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12px;
}
.maschine-info-name { color: var(--text-muted); white-space: nowrap; }
.maschine-info-wert {
    color: var(--text);
    text-align: right;
    word-break: break-all;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
}
.maschine-beschreibung { resize: vertical; min-height: 60px; font-family: inherit; }

/* ---- Werkzeug- und Skill-Uebersicht --------------------------------------
   Reiter statt Aufklappen: Die drei Sichten (Zugaenge, Bestand, Betrieb) sind
   gleichrangig, und der Bestand ist mit 332 Eintraegen zu lang, um ihn neben
   den anderen stehen zu lassen. */
.wz-reiter {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.wz-reiter-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.wz-reiter-btn:hover { color: var(--text); }
.wz-reiter-btn.aktiv { color: var(--accent); border-bottom-color: var(--accent); }
.wz-zahl {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.wz-suche {
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.wz-eintrag {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-surface);
}
.wz-eintrag-kopf {
    display: flex;
    /* baseline statt center: Bricht ein langer Name auf zwei Zeilen um, richtet center
       die Abzeichen an der MITTE des zweizeiligen Namens aus — der zweite Teil rutschte
       dann unter die Beschreibung (gemeldet 21.09.2026 an "sophos-xgs-tool-auswahl"). */
    align-items: baseline;
    column-gap: 8px;
    row-gap: 4px;
    flex-wrap: wrap;
}
/* Lange Werkzeug- und Skill-Namen sind durchgehende Bezeichner ohne Leerzeichen. Ohne
   diese Regel schiebt so einer die Kachel auf, statt umzubrechen. */
.wz-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
/* flex-basis statt width: width laesst das Element zwar 100 % breit werden, aber es
   bleibt auf DERSELBEN Flex-Zeile stehen und legt sich ueber den umgebrochenen Namen.
   flex-basis zwingt es auf eine eigene Zeile. */
.wz-zweck {
    color: var(--text-muted);
    font-size: 12px;
    flex-basis: 100%;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Der Zustand ist die wichtigste Auskunft der Seite — er traegt Farbe UND Wort,
   damit er nicht allein an der Farbe haengt. */
.wz-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.wz-status--ok { color: var(--success); }
.wz-status--verdaechtig { color: var(--error); }
.wz-status--fehlt { color: var(--text-muted); }
.wz-status--ungeprueft { color: var(--accent); }

.wz-fehler {
    color: var(--error);
    font-size: 12px;
    margin-top: 6px;
    word-break: break-word;
}

.wz-zugang-form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.wz-zugang-form input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 6px 9px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.wz-gruppe { margin-bottom: 10px; }
.wz-gruppe-kopf {
    cursor: pointer;
    padding: 7px 4px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    list-style: none;
}
.wz-gruppe-kopf::-webkit-details-marker { display: none; }
.wz-gruppe-kopf::before { content: "▸ "; }
details[open] > .wz-gruppe-kopf::before { content: "▾ "; }
.wz-gruppe-kopf:hover { color: var(--accent); }

.wz-werkzeug {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 4px 5px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.wz-werkzeug:last-child { border-bottom: none; }
.wz-werkzeug-name { color: var(--text); font-family: var(--font-mono, monospace); }
/* Nie benutzt heisst nicht kaputt — deshalb gedaempft statt rot. */
.wz-werkzeug--kalt .wz-werkzeug-name { color: var(--text-muted); }
.wz-werkzeug-nutzung { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

.skill-editor-text {
    width: 100%;
    min-height: 420px;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

#zugang-warnung { color: var(--error); }

@media (max-width: 640px) {
    .wz-reiter-btn { padding: 8px 10px; font-size: 12px; }
    .wz-werkzeug { flex-direction: column; gap: 2px; }
}

/* ---- Feedback-Anhaenge ---------------------------------------------------- */
.feedback-anhaenge { margin-top: 10px; }
.feedback-anhang-knopf {
    display: inline-block;
    padding: 6px 12px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}
.feedback-anhang-knopf:hover { color: var(--accent); border-color: var(--accent); }
.feedback-anhang-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.feedback-anhang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 12px;
    color: var(--text);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.feedback-anhang-groesse { color: var(--text-muted); font-size: 11px; }
.feedback-anhang-weg {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.feedback-anhang-weg:hover { color: var(--error); }

/* Was nach einem Direktbefehl passiert — der entscheidende Unterschied zwischen den
   zwei Wegen, der vorher nur am Verhalten ablesbar war. */
.direktbefehl-folge {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Link zur Stelle, an der man den Schluessel holt. Ohne ihn sucht man selbst —
   und bei Entra ID ist der Pfad tief genug, dass Suchen wehtut. */
.wz-dienst-link {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 6px;
}
.wz-dienst-link:hover { text-decoration: underline; }


/* --- Kundenzuordnung im Maschinen-Dialog ------------------------------------------- */
/* Die Zuordnung ist optional (Entscheidung Jens, 23.09.2026). Deshalb zeigt das Feld
   zuerst den IST-Zustand — auch wenn der "Unzugeordnet" heisst — und erst darunter die
   Suche. Wer nichts zuordnen will, muss nichts tun. */
.kunde-feld { margin-bottom: 4px; }

.kunde-ist {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Zurueckgenommen, nicht alarmierend: "Unzugeordnet" ist ein gueltiger Zustand. */
.kunde-ist.leer { color: var(--text-muted); font-style: italic; }

.kunde-weg {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
}
.kunde-weg:hover { color: var(--fehler, #e06c75); }

.kunde-treffer {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-top: 4px;
}
.kunde-zeile {
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    border-bottom: 1px solid var(--border);
}
.kunde-zeile:last-child { border-bottom: none; }
.kunde-zeile:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.06)); }
.kunde-name { font-size: 13px; color: var(--text); }
/* Zusatz und Ort stehen dabei, weil "Meier" allein nicht reicht — genau daran
   entscheidet sich, ob man den richtigen erwischt. */
.kunde-zusatz, .kunde-ort { font-size: 11px; color: var(--text-muted); }
.kunde-lade { padding: 8px; font-size: 12px; color: var(--text-muted); }

/* Freigabe fertiger Medien (25.09.2026): Daumen hoch/runter, 90 s Countdown. */
.medien-freigabe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--accent-border, rgba(0, 212, 255, 0.3));
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.06);
  font-size: 12px;
  max-width: 560px;
}
.medien-freigabe.wartet { border-color: var(--accent, #00d4ff); }
.medien-freigabe.abgelaufen { opacity: 0.85; }
.medien-freigabe-kopf { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.medien-freigabe-kopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.medien-freigabe-rest { color: var(--text-muted, #9aa3b2); }
.medien-freigabe-knoepfe, .medien-freigabe-details { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.medien-freigabe-details[hidden], .medien-freigabe-knoepfe[hidden] { display: none; }
.medien-freigabe-btn {
  padding: 5px 12px;
  border: 1px solid var(--accent-border, rgba(0, 212, 255, 0.3));
  border-radius: 6px;
  background: transparent;
  color: var(--text, #e6e9ef);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.medien-freigabe-btn:hover { border-color: var(--accent, #00d4ff); }
.medien-freigabe-btn.hoch { border-color: #15803d; }
.medien-freigabe-btn.durchzug { font-weight: 600; }
.medien-freigabe-btn.runter.aktiv, .medien-freigabe-btn.runter:hover { border-color: #b91c1c; }
.medien-freigabe-wunsch {
  flex: 1 1 100%;
  min-height: 2.6em;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: var(--bg-input, rgba(255, 255, 255, 0.05));
  color: var(--text, #e6e9ef);
  font-family: inherit;
  font-size: 13px;
}
.medien-freigabe-ergebnis { color: var(--text-muted, #9aa3b2); }

/* medien_auswahl: Varianten nebeneinander (26.09.2026) */
.auswahl-raster { display: grid; gap: 8px; margin: 6px 0 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auswahl-raster.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auswahl-raster.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .auswahl-raster.n3, .auswahl-raster.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auswahl-kachel { border: 2px solid var(--border, rgba(255, 255, 255, 0.15)); border-radius: 8px; overflow: hidden; cursor: pointer; background: rgba(0, 0, 0, 0.25); }
.auswahl-kachel:hover { border-color: var(--accent-border, rgba(0, 212, 255, 0.5)); }
.auswahl-kachel.gewaehlt { border-color: var(--accent, #00d4ff); box-shadow: 0 0 0 1px var(--accent, #00d4ff); }
.auswahl-medium { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: #000; }
.auswahl-fuss { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 6px; font-size: 12px; }
.auswahl-sync { margin: -2px 0 10px; padding: 4px 12px; font-size: 12px; font-family: inherit; border-radius: 6px; border: 1px solid var(--accent-border, rgba(0, 212, 255, 0.3)); background: transparent; color: var(--text, #e6e9ef); cursor: pointer; }

/* Daumen-Markierung: gewaehlte Bewertung bleibt sichtbar (26.09.2026) */
.media-dl-btn.media-bw { opacity: 0.55; }
.media-dl-btn.media-bw:hover { opacity: 1; }
.media-dl-btn.bw-ok.aktiv { opacity: 1; background: rgba(21, 128, 61, 0.35); border-color: #22c55e; }
.media-dl-btn.bw-nok.aktiv { opacity: 1; background: rgba(185, 28, 28, 0.35); border-color: #ef4444; }
.frage-abgelaufen { margin: 0 0 8px; padding: 4px 8px; font-size: 12px; border-radius: 6px; color: #fbbf24; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); }

/* Einstellungen → Töne */
.klang-zeile { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) auto; gap: 6px 10px; align-items: center; margin: 6px 0; }
.klang-zeile input[type="text"] { grid-column: 1 / -1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,0.15)); background: var(--bg-input, rgba(255,255,255,0.05)); color: var(--text, #e6e9ef); font-family: inherit; }
.klang-zeile select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,0.15)); background: var(--bg-input, rgba(255,255,255,0.05)); color: var(--text, #e6e9ef); font-family: inherit; }
@media (max-width: 600px) { .klang-zeile { grid-template-columns: 1fr auto; } .klang-zeile label { grid-column: 1 / -1; } }

/* Medien im Chat standardmaessig kompakt (~30 %), je Medium aufklappbar (26.09.2026) */
.msg-media:not(.gross) .msg-image-inline { max-height: 130px; }
.msg-media:not(.gross) .msg-video { max-height: 150px; }
.msg-media:not(.gross) { max-width: 520px; }
.msg-media:not(.gross) .media-actions { max-width: 360px; }
@media (max-width: 700px) {
    .msg-media:not(.gross) .msg-image-inline { max-height: 110px; }
    .msg-media:not(.gross) .msg-video { max-height: 130px; }
}

/* Kompakte Medienkachel (26.09.2026): ⤢ und Uhrzeit oben links auf dem Bild,
   darunter eine Zeile aus Dateiname + Symbolen. */
.msg-media { position: relative; }
.msg-media .msg-image-inline, .msg-media .msg-video { margin: 4px 0 2px; display: block; }
.msg-media .media-groesse {
    position: absolute; top: 8px; left: 4px; z-index: 2;
    padding: 0 6px; line-height: 20px; font-size: 13px; font-family: inherit;
    border: none; border-radius: 4px; cursor: pointer;
    background: rgba(0, 0, 0, 0.55); color: #e6e9ef;
}
.msg-media .media-zeit {
    position: absolute; top: 8px; left: 32px; z-index: 2; pointer-events: none;
    padding: 0 5px; line-height: 20px; font-size: 10px; border-radius: 4px;
    background: rgba(0, 0, 0, 0.55); color: #cfd8e3;
}
.msg-media .media-actions { flex-wrap: nowrap; gap: 4px; margin: 0 0 4px; }
.msg-media .media-actions .media-name {
    flex: 1 1 auto; min-width: 0; cursor: pointer; font-size: 11px;
    text-decoration: underline dotted rgba(255, 255, 255, 0.25); text-underline-offset: 2px;
}
.msg-media .media-actions .media-name:hover { color: var(--accent, #00d4ff); }
.msg-media .media-actions .media-dl-btn { padding: 2px 6px; font-size: 12px; line-height: 18px; }
.msg-media:not(.gross) .media-actions { max-width: none; }
.message.nur-medien { padding: 6px 8px 4px; }
.message.nur-medien > .msg-time { display: none; }
.file-item.hervor { outline: 2px solid var(--accent, #00d4ff); outline-offset: -2px; transition: outline-color 0.3s; }
.media-dl-btn .media-icon { display: block; }

/* --- Sitzung freigeben (30.09.2026) --------------------------------------- */
.conv-item-actions button.conv-share {
    position: relative;
    color: #a371f7;
    border-color: rgba(163, 113, 247, 0.45);
    background: rgba(163, 113, 247, 0.12);
}
.conv-item-actions button.conv-share:hover { background: rgba(163, 113, 247, 0.25); }
.conv-item-actions button.conv-share.ist-geteilt { background: rgba(163, 113, 247, 0.35); }
.conv-item-actions button.conv-share .share-zahl {
    position: absolute; top: -6px; right: -6px; min-width: 12px; height: 12px; padding: 0 2px;
    border-radius: 6px; background: #a371f7; color: #0a0a0f; font-size: 9px; line-height: 12px;
    text-align: center;
}
/* Ziehgriff am rechten Rand der linken Spalte */
#links-griff {
    position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize;
    z-index: 20;
}
#links-griff:hover, #links-griff.zieht { background: var(--accent-border); }
#freigabe-kasten {
    position: fixed; z-index: 2000; width: min(320px, calc(100vw - 32px));
    background: var(--bg-panel); border: 1px solid var(--accent-border); border-radius: 8px;
    padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); color: var(--text);
}
#freigabe-kasten .fk-kopf { font-weight: 600; margin-bottom: 4px; }
#freigabe-kasten .fk-hinweis { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
#freigabe-kasten .fk-liste { max-height: min(50vh, calc(100vh - 140px)); overflow-y: auto; }
#freigabe-kasten .fk-suche {
    width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 5px 8px;
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
}
#freigabe-kasten .fk-zeile { display: flex; gap: 8px; align-items: center; padding: 5px 2px; cursor: pointer; }
#freigabe-kasten .fk-zeile:hover { background: var(--bg-hover); }
.message .msg-autor {
    display: block; font-size: 11px; color: var(--accent); opacity: 0.85; margin-bottom: 2px;
}
.fav-abschnitt {
    margin: 12px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
}
.fav-item.fav-freigabe .fav-unter { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) { #links-griff { display: none; } }

/* --- Anfrage einer fremden Sitzung (30.09.2026) ------------------------------ */
.sitzungs-anfrage {
    margin: 10px 0; padding: 10px 12px; border: 1px solid #a371f7; border-radius: 8px;
    background: rgba(163, 113, 247, 0.08);
}
.sitzungs-anfrage .sa-kopf { font-weight: 600; margin-bottom: 6px; }
.sitzungs-anfrage .sa-frage {
    white-space: pre-wrap; padding: 6px 8px; background: var(--bg-input); border-radius: 5px;
    margin-bottom: 6px; max-height: 30vh; overflow-y: auto;
}
.sitzungs-anfrage .sa-hinweis { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.sitzungs-anfrage .sa-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Gespeicherte Zugangsdaten (30.09.2026) -------------------------------- */
.wz-alle { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; }
.zd-gruppe { margin-bottom: 14px; }
.zd-gruppe h4 { margin: 10px 0 4px; color: var(--accent); }
.zd-unterkopf { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 8px 0 4px; }
.zd-eintrag { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; }
.zd-eintrag.zd-automatisch { border-style: dashed; }
.zd-dienst { font-weight: 600; word-break: break-all; }
.zd-info, .zd-notiz { font-size: 12px; color: var(--text-muted); word-break: break-word; }

/* --- Ablage der Sitzung (03.10.2026) ----------------------------------------------
   Bilder, Videos und Dokumente einer Sitzung. Ersetzt den Chat, solange sie offen ist;
   im Chat stehen Medien dann nur als kompakte Zeile. */
#chat-mit-plan.ablage-offen > #chat-messages,
#chat-mit-plan.ablage-offen > #btn-ans-ende { display: none !important; }
.ablage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ablage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ablage-reiterleiste { display: flex; gap: 4px; }
.ablage-reiter {
  background: var(--kachel-bg);
  border: 1px solid var(--kachel-rand);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.ablage-reiter:hover { color: var(--text); }
.ablage-reiter.aktiv { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }
.ablage-zahl { font-size: 11px; opacity: 0.75; margin-left: 2px; font-variant-numeric: tabular-nums; }
.ablage-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ablage-zurueck {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.ablage-zurueck:hover { background: var(--accent-dim); }
.ablage-btn {
  background: var(--kachel-bg);
  border: 1px solid var(--kachel-rand);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ablage-btn:hover { border-color: var(--accent-border); }
.ablage-btn.gefahr:hover { border-color: var(--error); color: var(--error); }
.ablage-btn.media-bw.aktiv.bw-ok { border-color: var(--success); background: rgba(0, 255, 136, 0.12); }
.ablage-btn.media-bw.aktiv.bw-nok { border-color: var(--error); background: rgba(255, 68, 68, 0.12); }

.ablage-inhalt { flex: 1; overflow-y: auto; padding: 12px 14px 24px; }
.ablage-leer { color: var(--text-muted); text-align: center; margin-top: 48px; }
.ablage-runde { margin-bottom: 20px; }
.ablage-runde-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
.ablage-runde-nr { color: var(--accent); font-weight: 600; white-space: nowrap; }
.ablage-runde-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ablage-runde-frage { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.ablage-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ablage-kachel {
  position: relative;
  margin: 0;
  background: var(--kachel-bg);
  border: 1px solid var(--kachel-rand);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ablage-kachel.gewaehlt { border-color: var(--accent); box-shadow: var(--glow-cyan-sm); }
.ablage-kachel.hervor, .ablage-zeile.hervor { box-shadow: var(--glow-cyan-lg); border-color: var(--accent); }
.ablage-vorschau {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  cursor: zoom-in;
  overflow: hidden;
}
.ablage-vorschau img, .ablage-vorschau video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ablage-play {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  pointer-events: none;
}
.ablage-wahl {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--accent);
}
.ablage-kachel figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 0;
  font-size: 12px;
}
.ablage-grund { color: var(--text-muted); font-style: italic; overflow-wrap: anywhere; }
.ablage-bw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 8px;
}
.ablage-bw .ablage-btn { padding: 2px 8px; }
.ablage-kommentar {
  flex: 1 1 100%;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12px;
}

.ablage-liste { display: flex; flex-direction: column; gap: 6px; }
.ablage-zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 34px;
  background: var(--kachel-bg);
  border: 1px solid var(--kachel-rand);
  border-radius: var(--radius);
  min-width: 0;
}
.ablage-zeile .ablage-wahl { top: 50%; transform: translateY(-50%); left: 10px; }
.ablage-zeile.gewaehlt { border-color: var(--accent); }
.ablage-zeile .ablage-bw { padding: 0; margin-left: auto; flex-wrap: nowrap; }
.ablage-zeile .ablage-kommentar { flex-basis: 200px; }
.ablage-dok-symbol { font-size: 20px; }
.ablage-dok-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-size: 13px;
}
.ablage-dok-name span { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ablage-dok-name:hover strong { color: var(--accent); }

/* Buehne: Diashow und Video-Loop */
.ablage-buehne {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.94);
  color: #e8f6ff;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ablage-buehne-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-width: 0; }
.ablage-buehne-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ablage-buehne-zaehler { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 13px; }
.ablage-buehne-zu { background: none; border: none; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.ablage-buehne-flaeche { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.ablage-buehne-bild, .ablage-buehne-video { max-width: 100%; max-height: 100%; object-fit: contain; }
.ablage-buehne-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
.ablage-buehne-fuss .ablage-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #e8f6ff; font-size: 14px; padding: 6px 14px; }
.ablage-buehne-bw { display: inline-flex; gap: 6px; margin-left: 12px; }
.ablage-takt { background: rgba(255, 255, 255, 0.08); color: #e8f6ff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 5px; }

/* Kompakte Medienzeile im Chat */
.message.medien-mitglied { display: none !important; }
.message.medien-kopf > .msg-content { display: none; }
.message.medien-kopf { padding-top: 6px; padding-bottom: 6px; }
.medien-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.medien-zeile-text {
  flex: 1 1 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0 0 2px;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}
.medien-zeile-text:hover { text-decoration: underline; }
.medien-chip {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--kachel-rand);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
}
.medien-chip:hover { border-color: var(--accent); }
.medien-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medien-chip-video { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--accent); font-size: 18px; }
.medien-chip-nr {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}
.medien-chip-nr:empty { display: none; }
.medien-chip.geloescht { opacity: 0.35; filter: grayscale(1); }
.medien-chip.geloescht::after {
  content: "🗑";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

@media (max-width: 600px) {
  .ablage-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* Werkzeuge in eine eigene Zeile unter Reiter und Zurueck-Knopf, sonst ueberlappen sie. */
  .ablage-werkzeuge { flex: 1 1 100%; order: 3; }
  .ablage-zeile { flex-wrap: wrap; }
}
#btn-ablage.aktiv { color: var(--accent); }

/* Rundenmarke oben in Nutzerfragen und Medienzeilen — dieselbe Zaehlung wie in der Ablage. */
.msg-runde {
  position: absolute;
  top: 2px;
  left: 8px;
  font-size: 9px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.55;
  font-family: var(--font-mono);
  pointer-events: none;
  user-select: none;
}
.message.medien-kopf { padding-top: 12px; }
.ablage-dateiname {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Einsicht: Sitzungen anderer Benutzer unter Favoriten (04.10.2026) -------------- */
.fav-nutzer { margin: 2px 4px; }
.fav-nutzer > summary {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; cursor: pointer;
  list-style: none; font-size: 12px; color: var(--text); border-radius: 6px;
}
.fav-nutzer > summary::-webkit-details-marker { display: none; }
.fav-nutzer > summary::before { content: "▸"; color: var(--text-muted); font-size: 10px; }
.fav-nutzer[open] > summary::before { content: "▾"; }
.fav-nutzer > summary:hover { background: var(--bg-hover); }
.fav-nutzer-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-nutzer-info { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.fav-item.fav-fremd { padding-left: 22px; }
.fav-item.fav-fremd .fav-unter { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.fav-item.fav-fremd.archiviert { opacity: 0.55; }

/* Nur lesend geoeffnete Sitzung: Eingabezeile sichtbar gesperrt */
#chat-input-area.nur-lesen .upload-btn,
#chat-input-area.nur-lesen #btn-mic,
#chat-input-area.nur-lesen #btn-vcm,
#chat-input-area.nur-lesen #btn-send { opacity: 0.35; pointer-events: none; }
#chat-input-area.nur-lesen #btn-send { opacity: 0.35 !important; box-shadow: none !important; }

/* --- Ablage, Reiter „Repo“ (04.10.2026) ------------------------------------------------ */
.repo-karte {
  background: var(--kachel-bg);
  border: 1px solid var(--kachel-rand);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  min-width: 0;
}
.repo-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.repo-name { margin: 0; font-size: 15px; color: var(--accent); }
.repo-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); min-width: 0; }
.repo-links a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.repo-links a:hover { text-decoration: underline; }
.repo-fakten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 12px;
}
.repo-fakten dt { color: var(--text-muted); }
.repo-fakten dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .repo-fakten { grid-template-columns: max-content minmax(0, 1fr); }
}
.repo-verlauf { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--kachel-rand); padding-left: 10px; }
.repo-eintrag { font-size: 12px; padding: 4px 0; min-width: 0; }
.repo-eintrag-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.repo-symbol { width: 1.2em; text-align: center; color: var(--accent); flex: none; }
.repo-push_fehler .repo-symbol, .repo-befehl.fehler .repo-symbol { color: var(--error); }
.repo-angelegt .repo-symbol, .repo-veroeffentlicht .repo-symbol { color: var(--success); }
.repo-stand { font-size: 11px; color: var(--text-muted); flex: none; }
.repo-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.repo-meta { margin-left: auto; display: flex; gap: 8px; align-items: baseline; flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.repo-plus { color: var(--success); }
.repo-minus { color: var(--error); }
.repo-sitzung { font-size: 11px; padding: 0 6px; border: 1px solid var(--kachel-rand); border-radius: 10px; }
.repo-sitzung.diese { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
.repo-dateien { display: flex; gap: 8px; margin: 2px 0 0 calc(1.2em + 8px); min-width: 0; color: var(--text-muted); }
.repo-dateien-art { flex: none; white-space: nowrap; }
.repo-dateien-neu .repo-dateien-art { color: var(--success); }
.repo-dateien-entfernt .repo-dateien-art { color: var(--error); }
.repo-dateien-namen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.repo-details { margin: 2px 0 0 calc(1.2em + 8px); color: var(--text-muted); overflow-wrap: anywhere; }
.repo-art { font-size: 11px; padding: 0 6px; border-radius: 10px; background: var(--accent-dim); color: var(--accent); flex: none; }
.repo-befehl details { margin: 2px 0 0 calc(1.2em + 8px); }
.repo-befehl-text { cursor: pointer; font-family: var(--font-mono, monospace); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-pre {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 260px;
  overflow: auto;
  font-size: 11px;
  background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.repo-ausgabe { color: var(--text-muted); }
@media (max-width: 640px) {
  .repo-eintrag-kopf { flex-wrap: wrap; row-gap: 2px; }
  .repo-titel { flex: 1 1 calc(100% - 8em); white-space: normal; overflow-wrap: anywhere; }
  .repo-meta { margin-left: calc(1.2em + 8px); flex-wrap: wrap; }
  .repo-autor { display: none; }
}