:root {
    --bg-primary: #1a1e2e;
    --bg-secondary: #252936;
    --bg-tertiary: #2d3142;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    /* Aufgabe 5/5 Cleanup: --accent-color war das alte "kalte Blau" und wird
       app-weit an ~19 Stellen referenziert (Buttons, Bubbles, Fokus-Zustände
       etc.). Statt jede Stelle einzeln zu ändern, zeigt der Token jetzt auf
       Markenviolett - einheitlich und ohne Gefahr, eine Stelle zu übersehen. */
    --accent-color: var(--violet);
    --accent-hover: var(--violet-deep);
    --border-color: #30363d;
    --danger-color: #f85149;
    --success-color: #3fb950;

    /* Krisen-Banner (Backend-Keyword-Trigger, siehe crisis_detection.py) */
    --crisis-accent: var(--danger-color);
    --crisis-accent-deep: #d1443f;
    --crisis-bg: #2f2129;

    /* Schriftrollen: Fraunces für Überschriften/Kennzahlen, Georgia für
       alles andere. Einzige Stelle, an der Schriftfamilien definiert
       werden - der Rest der Datei verweist nur noch auf diese Variablen. */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: Georgia, 'Times New Roman', serif;

    /* Neue Mentana-UI (Setup Aufgabe 1/5) */
    --violet: #6C63C7;
    --violet-deep: #514AA3;
    --violet-soft: #E7E5F7;
    --ground: #FAF9FC;
    --calm: #5AA08C;
    --gentle: #C98A7A;
    --bg: #14111F;
    --surface: #1D1930;
    --surface-2: #252039;
    --surface-soft: #191527;
    --line: #332f47;
    --ink: #EEECF7;
    --ink-soft: #B4AECB;
    --ink-faint: #7D7699;
    --violet-bright: #8E84E6;
    /* Aufgabe 17: nochmal deutlich erhöht. WICHTIG (siehe Kommentar bei
       .progress-turtle/.settings-head img): die eigentliche Ursache für
       "wirkt trotzdem klein" ist NICHT diese Variable, sondern dass die
       turtle_*.png-Dateien riesige transparente Ränder haben (Canvas
       2481x3508, Motiv füllt nur ~45% der Höhe). Diese Werte sind daher
       bewusst deutlich größer als nötig, um das zu kompensieren. */
    --turtle-sm: 52px;
    --turtle-md: 80px;
    --turtle-lg: 100px;

    /* Aufgabe 11: Radius/Schatten-System, ausgerichtet am DSGVO-Consent-
       Modal (static/consent_modal.css, dort NICHT verändert - schon
       Zielstil). Rundere Karten, weichere mehrschichtige Schatten. */
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-modal: 0 1px 2px rgba(0,0,0,.3), 0 24px 60px -20px rgba(0,0,0,.65);
    --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.5);
    --shadow-glow: 0 0 0 1px rgba(124,117,209,.2), 0 8px 24px -8px rgba(108,99,199,.45);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

.container {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.sidebar-header {
    margin-bottom: 20px;
}

.sidebar-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Bildmarke (Aufgabe 10, Größe erhöht in Aufgabe 23/24): Logo sichtbar
   neben dem Schriftzug, zusätzlich zum bestehenden Wasserzeichen
   (.chat-container::before, unverändert). Das Pendant im Chat-Titel-
   Bereich (.chat-title-lockup/.chat-logo) wurde in Aufgabe 24 wieder
   entfernt - dort steht nur noch der Text-Titel. */
.brand-lockup{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.brand-logo{width:56px;height:56px;object-fit:contain;border-radius:14px}
.brand-lockup h1{margin:0}

.chat-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
}

.chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat-item:hover {
    background: var(--surface-2);
}

.chat-item.active {
    background: var(--accent-color);
    color: white;
}

.chat-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    cursor: pointer;
}

.delete-chat-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 4px;
}

.delete-chat-btn:hover {
    opacity: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.version {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chat-header {
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    flex: 1;
}

.header-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.header-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.message {
    display: flex;
    gap: 14px;
    animation: fadeIn 0.3s ease;
}

/* Aufgabe 19: .msg trug bisher nur bei regulären Bubbles (zusammen mit
   .message) ein Flex-Layout - beim Denk-Indikator (nur "msg thinking",
   ohne .message-Klasse) stand Avatar+Bubble bislang ohne Flex/Gap direkt
   übereinander. Jetzt trägt .msg selbst das Layout, für beide Fälle. */
.msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Aufgabe 12: Der 36px-Container quetschte das Schildkröten-Bild bisher
   unabhängig vom --turtle-sm-Token auf seine eigene feste Größe zusammen
   (flex-shrink des Bildes im zu kleinen Kreis) - das war der eigentliche
   Grund für den "24px"-Effekt, nicht der Token-Wert allein. Container jetzt
   auf die Token-Größe gebracht, nur für den Assistant-Avatar (Turtle),
   User-Avatar (👤) bleibt bei 36px. */
/* Aufgabe 21: die Schildkröte (turtle_thinking/idea/happy) steht freistehend
   ohne Kreis-Hintergrund - der Kreis war die vom Basis-Selektor .message-
   avatar geerbte border-radius:50% + background:var(--bg-tertiary). Beides
   hier für den Assistant-Avatar gezielt aufgehoben. Basis-Regel bleibt für
   den User-Avatar (👤) unverändert kreisförmig. Voice-Halo (.voice-turtle-
   halo, unten im aktiven Sprachmodus) ist ein separates Element, nicht
   angefasst. */
.message.assistant .message-avatar {
    background: none;
    border-radius: 0;
    width: var(--turtle-sm);
    height: var(--turtle-sm);
}

/* Schildkröten-Zustände Chat (Aufgabe 2/5): Denk-Indikator + Antwort-Avatar */
.thinking .av img{width:var(--turtle-sm);height:var(--turtle-sm);object-fit:contain;animation:turtle-bob 2s ease-in-out infinite}
@keyframes turtle-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.thinking .bubble{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-style:italic}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--violet-bright);animation:dot-pulse 1.3s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot-pulse{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
.msg .av img{width:var(--turtle-sm);height:var(--turtle-sm);object-fit:contain;filter:drop-shadow(0 3px 8px rgba(108,99,199,.4))}
@media (prefers-reduced-motion: reduce){.thinking .av img,.dots i{animation:none}}

/* Generisches Fehler-Template (Aufgabe 5/5): NUR für technische Fehler
   (Verbindung/Server). NIEMALS im Krisen-/Sicherheitsbanner verwenden -
   das bleibt bewusst ruhig und figurfrei (siehe showCrisisBanner() in
   script.js, komplett eigenständiges Markup ohne turtle_sad-Referenz). */
.error{
    border-left: 3px solid var(--gentle);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
}
.error img{
    width: var(--turtle-lg);
    height: var(--turtle-lg);
    object-fit: contain;
    flex-shrink: 0;
}
.error h4{
    margin: 0 0 6px 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
}
.error p{
    margin: 0 0 12px 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
}
.error .retry{
    background: var(--violet);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}
.error .retry:hover{background: var(--violet-deep);}

.message-wrapper {
    flex: 1;
    max-width: 100%;
}

.message-content {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    line-height: 1.6;
    word-wrap: break-word;
}

.message.user .message-content {
    background: var(--accent-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.assistant .message-content {
    background: transparent;
    color: var(--text-primary);
    padding: 0;
}

.feedback-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.feedback-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.feedback-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--violet);
    transform: scale(1.1);
}

.feedback-thanks {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.input-container {
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    position: relative;
}

#userInput {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    resize: none;
    font-family: inherit;
}

#userInput:focus {
    outline: none;
    border-color: var(--accent-color);
}

.btn-voice {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.btn-voice:hover {
    background: var(--bg-secondary);
    border-color: var(--violet);
}

.btn-voice.listening {
    background: var(--violet);
    border-color: var(--violet);
    animation: pulse 1.5s infinite;
}

.voice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.btn-voice.listening .voice-icon {
    transform: scale(1.2);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(108, 99, 199, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(108, 99, 199, 0);
    }
}

.voice-status {
    position: absolute;
    bottom: 80px;
    left: 24px;
    background: var(--bg-tertiary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    display: none;
    animation: slideUp 0.3s ease;
    z-index: 10;
}

.voice-status.show {
    display: block;
}

.voice-status.listening {
    background: var(--accent-color);
    color: white;
}

.voice-settings {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 8px;
}

.toggle-label:last-of-type {
    margin-bottom: 0;
}

.toggle-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-label input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.toggle-label input[type="checkbox"]:checked {
    background: var(--violet);
    border-color: var(--violet);
}

.toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.toggle-text {
    font-size: 14px;
    color: var(--text-primary);
}

.tts-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.tts-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    color: var(--ink-soft);
    opacity: 0.85;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tts-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--violet-bright);
    opacity: 1;
}

.tts-btn.playing {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

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

.tts-status {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.tts-status.speaking {
    color: var(--accent-color);
}

.push-to-talk-container {
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Aktiver Sprachchat-Screen (Aufgabe 4/5): turtle_happy in pulsierendem
   Halo im Markenviolett - NICHT die Settings-Schildkröte. Während Mentana
   auf die Backend-Antwort wartet, wird auf turtle_thinking umgeschaltet
   (siehe showThinkingIndicator()/removeThinkingIndicator() in script.js -
   identischer Denk-Zustand wie im Text-Chat aus Aufgabe 2). */
.voice-turtle-halo {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-turtle-halo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--violet);
    opacity: .35;
    animation: voice-halo-pulse 2.2s ease-in-out infinite;
}

.voice-turtle {
    position: relative;
    width: var(--turtle-lg);
    height: var(--turtle-lg);
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(108, 99, 199, .4));
}

.voice-turtle.is-thinking {
    animation: turtle-bob 2s ease-in-out infinite;
}

@keyframes voice-halo-pulse {
    0%, 100% { transform: scale(1); opacity: .35; }
    50% { transform: scale(1.25); opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
    .voice-turtle-halo::before, .voice-turtle.is-thinking { animation: none; }
}

.btn-push-to-talk {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
}

.btn-push-to-talk:hover {
    background: var(--bg-secondary);
    border-color: var(--violet);
    transform: scale(1.05);
}

.btn-push-to-talk.active {
    background: var(--violet);
    border-color: var(--violet);
    animation: pulse 1.5s infinite;
    transform: scale(1.1);
}

.ptt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ptt-text {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.btn-push-to-talk.active .ptt-text {
    color: white;
}

.conversation-status {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    min-width: 200px;
}

.conversation-status.active {
    background: var(--violet);
    color: white;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* Stop-Button: ersetzt "Senden" während eine Antwort läuft (GPT-Anfrage
   oder Typewriter-Ausgabe), wie bei Claude. */
.btn-stop {
    background: var(--danger-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-stop:hover {
    filter: brightness(1.1);
}

.btn-stop .stop-icon {
    display: block;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 2px;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-primary);
}

/* Settings-Panel (Aufgabe 4): Buttons im Markenviolett statt Signalblau -
   --violet für die primäre (aktive) Aktion, --surface-2 für die sekundäre.
   #registerModal-Regeln zogen nach Aufgabe 7 in den Login/Auth-Block um
   (dort zusammen mit #loginModal gepflegt, siehe unten). */
/* Aufgabe 19: die beiden Buttons standen bisher ohne Breite/Abstand direkt
   nebeneinander (inline-block, nur durch Zeilenumbruch im Markup getrennt)
   - anders als Login/Register, die das schon per Inline-Style lösten. */
#voiceSettingsModal .btn {
    width: 100%;
    display: block;
}

#voiceSettingsModal .btn-primary {
    margin-top: 4px;
    margin-bottom: 12px;
    background: var(--violet);
}

#voiceSettingsModal .btn-primary:hover {
    background: var(--violet-deep);
}

#voiceSettingsModal .btn-secondary {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}

#voiceSettingsModal .btn-secondary:hover {
    background: var(--surface);
}

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

/* Aufgabe 19: #progressBtn/#checkinBtn hatten bisher keine eigene Regel und
   standen dadurch ohne Breite/Abstand direkt aneinander (#dashboardBtn gab
   es in der aktuellen Sidebar-HTML gar nicht mehr - toter Selektor). */
#newChatBtn,
#progressBtn {
    width: 100%;
    margin-bottom: 12px;
}

#checkinBtn {
    width: 100%;
    margin-bottom: 16px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-modal);
    animation: slideUp 0.3s ease;
}

.modal-content h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    color: var(--text-primary);
}

.modal-subtitle {
    margin: 0 0 32px 0;
    color: var(--text-secondary);
    font-size: 16px;
}

/* Settings-Panel-Header (Aufgabe 4/5): Schildkröte links neben Titel +
   Kurzbeschreibung, für jedes Settings-Panel (Voice-Einstellungen,
   Account-Erstellung). */
.settings-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.settings-head img{width:var(--turtle-md);height:var(--turtle-md);object-fit:contain;filter:drop-shadow(0 6px 14px rgba(108,99,199,.4))}
.settings-head h2{margin:0}
.settings-head .modal-subtitle{margin:4px 0 0 0}

/* Login/Account-Erstellung (Aufgabe 7): warme Begrüßung statt nüchternem
   Settings-Header. Consent-Modal bleibt unangetastet, hat eigenes Markup. */
.auth-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.auth-head img{width:var(--turtle-md);height:var(--turtle-md);object-fit:contain;filter:drop-shadow(0 6px 14px rgba(108,99,199,.4))}
.auth-head h3{font-family:var(--font-display);font-weight:500;color:#fff;margin:0}
.auth-head p{font-size:13px;color:var(--ink-faint);margin:4px 0 0 0}

#loginModal .modal-content,
#registerModal .modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
}

#loginModal .form-group label,
#registerModal .form-group label {
    color: var(--ink-soft);
}

#loginModal .form-group input,
#registerModal .form-group input {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--ink);
}

#loginModal .form-group input:focus,
#registerModal .form-group input:focus {
    border-color: var(--violet);
}

#loginModal .btn-primary,
#registerModal .btn-primary {
    background: var(--violet);
}

#loginModal .btn-primary:hover,
#registerModal .btn-primary:hover {
    background: var(--violet-deep);
}

#loginModal .btn-secondary,
#registerModal .btn-secondary {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}

#loginModal .btn-secondary:hover,
#registerModal .btn-secondary:hover {
    background: var(--surface);
}

#loginModal .help-text,
#registerModal .help-text {
    color: var(--ink-faint);
}

.form-group {
    margin-bottom: 20px;
}

.help-text {
    color: var(--text-secondary);
    font-size: 13px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s ease;
}

.form-group input[type="range"] {
    padding: 0;
    height: 6px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 199, 0.1);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

#userGreeting {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background 0.2s ease;
}

.btn-icon:hover {
    background: var(--bg-secondary);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Aufgabe 13: von dominanter Vollbreiten-Warnleiste auf eine dezente Zeile
   unter dem Eingabefeld umgestellt - wie bei Claude. Bleibt sichtbar, nur
   optisch stark zurückgenommen. Der Crisis-Banner (akute Eskalation) ist
   davon unberührt, siehe .crisis-banner weiter unten. */
.chat-disclaimer{
    font-size:11.5px;
    color:var(--ink-faint);
    text-align:center;
    padding:8px 16px 4px;
    margin:0;
    line-height:1.4;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--text-primary);
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.chat-rename-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.chat-rename-input:focus {
    box-shadow: 0 0 0 2px rgba(108, 99, 199, 0.2);
}

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

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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}
/* ========================================
   ABORT BUTTON STYLES
   ======================================== */

.abort-response-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
    transition: all 0.3s ease;
    margin-top: 10px;
    display: none;
}

.abort-response-btn:hover {
    background: linear-gradient(135deg, #ff5555 0%, #dd1111 100%);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
    transform: translateY(-2px);
}

.abort-response-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 68, 68, 0.3);
}

/* Mentana Wasserzeichen im Chat-Hintergrund */
.chat-container {
    position: relative;
    overflow: hidden;
}

.chat-container::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Wasserzeichen bewusst mit Schriftzug (volles Lockup), anders als
       .brand-logo/Favicon, die nur die Bildmarke nutzen - siehe
       static/_logo_originals/mentana-logo-full-lockup.png für das Original. */
    background: url("/static/mentana-logo-full.png") no-repeat center center;
    background-size: 35%;
    opacity: 0.05;          /* Sichtbarkeit: kleiner Wert = sehr dezent */
    pointer-events: none;   /* Klicks gehen weiter an den Chat */
    z-index: 0;
}

/* Sicherstellen, dass Messages über dem Logo liegen */
.messages,
.chat-header,
.input-container,
.chat-disclaimer,
#pushToTalkContainer {
    position: relative;
    z-index: 1;
}

/* ============================================
   MOOD MODAL STYLING
   ============================================ */

.mood-scale {
    margin: 32px 0;
}

.mood-buttons {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.mood-btn {
    aspect-ratio: 1;
    border: 2px solid #3d4458;
    background: #2a3042;
    color: #e6edf3;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mood-btn:hover {
    background: #363d52;
    border-color: var(--violet);
    transform: scale(1.05);
}

.mood-btn.selected {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
    transform: scale(1.1);
}

/* Mood-Tracking-Karte (Aufgabe 3/5): dezentes Schildkröten-Badge */
#moodModal .modal-content {
    position: relative;
}

.track-turtle{position:absolute;top:18px;right:18px;width:var(--turtle-md);height:var(--turtle-md);object-fit:contain;opacity:.9;filter:drop-shadow(0 6px 14px rgba(108,99,199,.4))}

.mood-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #8b949e;
    padding: 0 4px;
}

@media (max-width: 768px) {
    .mood-buttons {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* ========================================
   USER MENU (Top Right)
   ======================================== */

.user-menu-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

.user-greeting {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    padding-right: 8px;
    border-right: 1px solid var(--line);
}

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

.user-actions .btn-icon {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-actions .btn-icon:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}


/* ========================================
   CHAT LIST IMPROVEMENTS
   ======================================== */

/* Aufgabe 19: dezenter Rahmen + eigener Hintergrund statt "aneinander-
   geklatschter" Liste, damit sich die Einträge voneinander abheben. */
.chat-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--line);
}

/* Saß vorher im .chat-header mit einem hartkodierten left/bottom-Offset-
   Hack ("Ändere die Zahl bis es passt!"), weil die schwebende
   .user-menu-container (position:fixed, oben rechts, z-index:1000) ihn an
   der natürlichen Position sonst verdeckt hätte. Jetzt direkt in
   .user-actions neben dem Logout-Button - selbe Gruppe, kein Overlap-
   Problem mehr, Padding an .user-actions .btn-icon angeglichen. */
#exportChatBtn {
    padding: 6px 12px;
    font-size: 14px;
}


.chat-item:hover {
    background: var(--surface-2);
    border-color: var(--violet-bright);
}

.chat-item.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.chat-item-content {
    flex: 1;
    overflow: hidden;
    cursor: pointer;
}

.chat-item-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.chat-item-date {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.chat-item.active .chat-item-date {
    color: rgba(255, 255, 255, 0.8);
}

.delete-chat-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    opacity: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-item:hover .delete-chat-btn {
    opacity: 0.6;
}

.delete-chat-btn:hover {
    opacity: 1 !important;
    background: rgba(248, 81, 73, 0.2);
}

.chat-item.active .delete-chat-btn {
    color: white;
}


/* ========================================
   LOADING INDICATOR
   ======================================== */

.message.loading {
    opacity: 0.7;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typing 1.4s infinite;
}

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

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

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


/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .modal-content {
        max-width: 95%;
        margin: 20px;
    }

    .user-menu-container {
        top: 10px;
        right: 10px;
        padding: 8px 12px;
    }
    
    .user-greeting {
        font-size: 12px;
    }
    
    .user-actions .btn-icon {
        font-size: 14px;
        padding: 4px 8px;
    }
}


/* ========================================
   ANIMATIONS
   ======================================== */

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

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


/* ========================================
   INPUT VALIDATION STATES
   ======================================== */

.form-group input:invalid:not(:placeholder-shown) {
    border-color: var(--danger-color);
}

.form-group input:valid:not(:placeholder-shown) {
    border-color: var(--success-color);
}

.form-group input[type="password"] {
    letter-spacing: 0.2em;
}

.form-group input[type="password"]::placeholder {
    letter-spacing: normal;
}


/* ========================================
   KRISEN-BANNER (Backend-Keyword-Trigger)
   Erscheint anhand von crisis_level aus der /chat-Response,
   unabhängig vom Modelltext. Siehe crisis_detection.py.
   ======================================== */

.crisis-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 18px 20px;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.crisis-banner__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.crisis-banner__content {
    flex: 1;
    min-width: 0;
}

.crisis-banner__title {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.crisis-banner__text {
    font-size: 0.94rem;
    margin: 0 0 14px 0;
    color: var(--text-primary);
}

.crisis-banner__footnote {
    font-size: 0.8rem;
    margin: 12px 0 0 0;
    color: var(--text-secondary);
}

/* ---------------------- STUFE 1: AKUT (nicht wegklickbar) ---------------------- */
.crisis-banner--level1 {
    background: var(--crisis-bg);
    border: 1.5px solid var(--crisis-accent);
    box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.15),
                0 8px 24px rgba(0, 0, 0, 0.35);
}

.crisis-banner--level1 .crisis-banner__title {
    color: var(--crisis-accent);
}

.crisis-banner__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.crisis-banner__btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 12px;
    min-width: 130px;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.crisis-banner__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.crisis-banner__btn:active {
    transform: translateY(0);
}

.crisis-banner__btn-label {
    font-size: 0.78rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.crisis-banner__btn-number {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.crisis-banner__btn--primary {
    background: var(--crisis-accent);
    color: #2a0f0f;
}

.crisis-banner__btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------------------- STUFE 2: BELASTEND (schließbar) ---------------------- */
.crisis-banner--level2 {
    background: var(--bg-tertiary);
    border: 1px solid rgba(88, 166, 255, 0.3);
    color: var(--text-secondary);
    align-items: center;
}

.crisis-banner__text--soft {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.crisis-banner--level2 a {
    color: var(--accent-hover);
    font-weight: 600;
    text-decoration: none;
}

.crisis-banner--level2 a:hover {
    text-decoration: underline;
}

.crisis-banner__close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    opacity: 0.6;
}

.crisis-banner__close:hover {
    opacity: 1;
}

@media (max-width: 480px) {
    .crisis-banner__btn {
        flex: 1;
        min-width: 0;
    }
}