/* ========================================
   BREAKPOINT-KONVENTION (Responsive-Umbau)
   ========================================
   Zwei Breakpoints app-weit, keine dritte Stufe (kein 1024px) - das sind
   exakt die Werte, die vorher schon in consent_modal.css und
   category_feedback.css sowie vereinzelt hier in style.css verwendet
   wurden (.mood-buttons, .modal-content, .crisis-banner__btn). Bestehende
   Werte übernommen statt neue erfunden.

   - Mobile:  @media (max-width: 480px)  - iPhone Hochformat
   - Tablet:  @media (max-width: 768px)  - deckt sowohl "nur Tablet" als
     auch "Mobile" mit ab (Mobile-Regeln erben Tablet-Regeln, sofern nach
     ihnen notiert - kaskadierende Reihenfolge einhalten: erst 768px-Block,
     danach 480px-Block, nie umgekehrt, sonst überschreibt Tablet die
     spezifischeren Mobile-Werte wieder).
   - Desktop: ab 769px (kein eigenes @media nötig, das ist der Standard-
     Stil ohne Media-Query, also einfach alles außerhalb der beiden oben).

   CSS-Variablen funktionieren nicht innerhalb von @media-Bedingungen
   (kein Custom-Media in Standard-CSS ohne Präprozessor) - deshalb hier
   als Kommentar-Konvention statt als --breakpoint-Variable. Bitte für
   neue Media Queries ausschließlich diese zwei Werte verwenden, nicht
   projektfremde Zwischenwerte wie 600px/900px einführen.

   "Tablet-Breakpoint" im Sinne von Block 3 (Sidebar-Drawer) meint
   @media (max-width: 768px) - Hamburger/Drawer aktiv bis einschließlich
   768px, Sidebar ab 769px permanent sichtbar wie bisher. */

: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);
    /* 100vh zuerst als Fallback (Browser ohne dvh-Unterstützung ignorieren
       die zweite, ungültige Deklaration und behalten diese hier) - 100dvh
       danach überschreibt sie dort, wo verstanden. Wichtig für iOS Safari:
       vh bleibt bei eingeblendeter Tastatur auf der Höhe VOR dem
       Einblenden stehen, dvh berücksichtigt die tatsächlich sichtbare
       Höhe - ohne das würde z.B. das Eingabefeld unten aus dem Sichtfeld
       geschoben. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

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

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

/* Nur im Drawer-Modus sichtbar (siehe @media unten) - auf Desktop bleibt
   die Sidebar wie bisher permanent sichtbar, kein Hamburger nötig. */
.sidebar-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
}

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

.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    /* War var(--text-secondary) (#8b949e) - auf dem dunklen Sidebar-
       Hintergrund (--bg-secondary) zu kontrastarm fuer ein Schliessen-
       Symbol. --text-primary ist dieselbe helle Farbe, die der Rest der
       App fuer lesbaren Standardtext nutzt. */
    color: var(--text-primary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.sidebar-close-btn:hover {
    /* War ebenfalls var(--text-primary) - identisch zur (jetzt
       geänderten) Basisfarbe, der Hover-Effekt wäre dadurch unsichtbar
       geworden. Jetzt Markenviolett, passend zum Hover anderer
       Icon-Buttons (z.B. .sidebar-toggle-btn:hover). */
    color: var(--violet);
}

/* Abgedunkelter Hintergrund hinter dem ausgeklappten Drawer - Klick
   darauf schließt ihn (siehe script.js).
   KORREKTUR (nach echtem iPhone-Test): war vorher z-index:899, also unter
   .user-menu-container UND .modal (beide z-index:1000, siehe weiter unten
   in dieser Datei) - das schwebende User-Menü (Begrüßung/Export/Logout)
   blieb dadurch sichtbar über dem Drawer statt davon verdeckt zu werden.
   Jetzt bewusst höher als jedes andere Element der Seite, Modals
   eingeschlossen - Drawer und Modal sind ohnehin nie gleichzeitig
   sinnvoll offen (einzige Ausnahme: Voice-Einstellungen lässt sich aus
   der Sidebar heraus öffnen, schließt den Drawer aber aktuell nicht
   automatisch - siehe TODO in script.js).
   background/backdrop-filter an .modal angeglichen (dort schon als
   funktionierendes Muster vorhanden) statt eigene, schwächere Werte -
   der zusätzliche Blur verhindert lesbare Textfragmente dahinter, reine
   Abdunkelung allein reichte dafür nicht. */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 1100;
}

.sidebar-overlay.show {
    display: block;
}

/* Sidebar -> Hamburger-Drawer. Breakpoint 768px, siehe Breakpoint-
   Konvention oben im Kopf dieser Datei. Nur diese eine Stelle schaltet
   die Sidebar von "permanent im Flex-Layout" auf "Overlay, per Klasse
   .open eingeblendet" um - oberhalb von 768px bleibt .sidebar oben
   unverändert (kein position/transform), Desktop-Verhalten ist also
   automatisch unangetastet. */
@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: flex;
    }

    .sidebar-close-btn {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        /* Muss über .sidebar-overlay (jetzt 1100) liegen, siehe Kommentar
           dort zur z-index-Korrektur. */
        z-index: 1101;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Chat-Bubbles: .message-content ist aktuell ohne max-width (füllt
       .message-wrapper{flex:1} zu 100%, unabhängig von der Textlänge -
       kein Überlauf-Risiko, aber auch keine "schrumpft auf Textlänge"-
       Bubble-Optik). Für User-Nachrichten hier gedeckelt, damit die
       eingefärbte Bubble nicht die ganze Zeilenbreite einnimmt.
       margin-left:auto nötig, weil .message-content innerhalb von
       .message-wrapper sonst linksbündig bliebe, statt an den Avatar auf
       der rechten Seite (.message.user{flex-direction:row-reverse})
       heranzurücken. Absichtlich nur hier im Mobile/Tablet-Breakpoint,
       nicht am Desktop-Verhalten geändert - dort war das nicht Teil der
       Anfrage. */
    .message.user .message-content {
        max-width: 85%;
        margin-left: auto;
    }
}

.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;
}

.free-feedback-status {
    margin: 12px 0 0 0;
    min-height: 1.2em;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* font-size:16px explizit, nicht über .form-group input/select mit
   abgedeckt (die Basis-Regel dort gilt bewusst nicht für textarea, siehe
   #moodNote, das ebenfalls ohne eigene font-size auskommt) - ohne das
   würde iOS Safari beim Fokussieren wieder in die Seite hineinzoomen,
   siehe die vorherigen Mobile-Tickets zu #userInput. */
#freeFeedbackText {
    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;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
}

#freeFeedbackText:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 199, 0.1);
}

/* 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;
}

/* #freeFeedbackBtn: einziger Sidebar-Button mit Icon+Text nebeneinander
   (die anderen sind reiner Text) - .btn selbst ist display:inline-block,
   ohne diese Ergänzung würde Icon und Text nicht sauber zentriert
   ausgerichtet. Gezielt auf die ID beschränkt, keine neue generische
   Modifier-Klasse für einen einzigen Button. */
#freeFeedbackBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-icon-inline {
    display: flex;
}

/* 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. position:relative dient
   zusätzlich als Referenzrahmen für #conversationOverlay
   (position:absolute, inset:0, siehe static/voice-orb.css) - deckt dadurch
   exakt den Chat-Bereich inkl. Eingabezeile ab, nicht die Sidebar (die
   liegt außerhalb von .chat-container im DOM, siehe index.html). */
.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)
   ======================================== */

/* War zwischenzeitlich position:fixed (schwebend oben rechts) mit einer
   separaten position:static-Übersteuerung nur für Mobile. Jetzt bewusst
   auf beiden Bildschirmgrößen gleich: normaler dritter Flex-Child von
   .chat-header (siehe index.html), kein position mehr - kein Overlay-
   Verhalten mehr, das erneut hätte übersehen werden können. Begrüßung
   ("Hallo, ...") wurde hier komplett entfernt (#userMenuGreeting), bleibt
   nur noch in der Sidebar (#userGreeting, .user-profile) bestehen.
   Trug bis eben zusätzlich noch eigenen background/border/box-shadow -
   sah dadurch trotz normalem Flex-Fluss weiterhin wie eine separate,
   schwebend wirkende Karte über/neben dem Header aus, statt wie Teil
   davon (Desktop UND Mobile betroffen). Jetzt reiner Layout-Wrapper ohne
   eigene Optik - #exportChatBtn (.btn-secondary) und der Logout-.btn-icon
   (.user-actions .btn-icon) bringen beide bereits ihren eigenen
   Hintergrund/Rand mit (gleiches Muster wie z.B. .sidebar-toggle-btn),
   wirken dadurch wie zwei normale Header-Buttons statt wie eine
   gemeinsame Extra-Box. */
.user-menu-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.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;
    }

    /* Kein Ueberlapp-/z-index-Problem mehr (position:fixed ist komplett
       weg) - aber Hamburger+Titel+Untertitel+Export+Logout gemeinsam in
       EINER Zeile war auf schmalen Screens trotzdem zu eng: Untertitel
       wurde radikal per Ellipsis abgeschnitten, Export/Logout klebten eng
       am Text - wirkte wie "liegt drueber", obwohl es technisch Flex-
       Fluss war. Deshalb jetzt echter Zeilenumbruch: .chat-header bricht
       um, .user-menu-container faellt bei zu wenig Platz komplett als
       eigener Block in eine zweite Zeile (nicht seine Kinder Export/
       Logout einzeln - flex-wrap wirkt auf .chat-header-Ebene, also auf
       Hamburger/.header-content/.user-menu-container als ganze Bloecke). */
    .chat-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Basis-Regel ist jetzt schon position-los/normaler Flex-Child ohne
       eigene Optik (siehe Kommentar dort) - kein eigenes padding mehr
       noetig, das haette ohne sichtbaren Hintergrund/Rand nur unnoetigen
       Leerraum erzeugt. flex-shrink/margin-left bleiben reine Layout-
       Logik: margin-left:auto haelt es rechtsbuendig, wenn es bei
       flex-wrap in die zweite Zeile umbricht. */
    .user-menu-container {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* min-width statt 0: erzwingt bei zu wenig Platz einen Umbruch von
       .user-menu-container in Zeile 2, statt .header-content bis zur
       Unleserlichkeit zusammenzuquetschen. Titel/Untertitel behalten
       Ellipsis trotzdem als zusaetzliches Sicherheitsnetz (z.B. bei
       einem sehr lang umbenannten Chat). */
    .header-content {
        min-width: 140px;
    }

    .header-content h2,
    .header-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Touch-Ziele (Apple-Empfehlung 44x44px): #exportChatBtn/.btn-icon
       waren mit padding:4-6px/font-size:14-16px auf ca. 25-33px Hoehe -
       deutlich darunter. min-width/min-height statt groesserer
       Schrift/Icons, damit die Bubble optisch kompakt bleibt, aber die
       tatsaechliche Tippflaeche gross genug ist. */
    #exportChatBtn {
        min-height: 44px;
    }

    .user-actions .btn-icon {
        min-width: 44px;
        min-height: 44px;
        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%;
    /* Sicherheitsfix: Banner darf durch Weiterscrollen/neue Nachrichten
       nicht aus dem Sichtbereich verschwinden (Stufe 1 ist absichtlich
       nicht wegklickbar - dann darf er auch nicht "wegscrollbar" sein).
       sticky statt fixed, weil .messages (der scrollende Elternbereich)
       overflow-y:auto hat und dafür die passende Containing-Block-Basis
       liefert - bleibt dadurch an seiner Stelle im Gesprächsverlauf
       verankert, statt als losgelöste globale Leiste zu wirken, und kann
       das darunterliegende Eingabefeld (eigenes Flex-Geschwisterelement
       außerhalb von .messages) strukturell nie verdecken. z-index:10 wie
       .voice-status - genug, um über durchscrollenden Nachrichten zu
       liegen, deutlich unter dem globalen Modal-Layer (1000). */
    position: sticky;
    top: 0;
    z-index: 10;
}

.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;
}

/* Regression-Fix: diese 3 Regeln standen ursprünglich im frühen
   @media-Block bei Zeile 223 - dort ABER vor ihren Basis-Pendants
   (#userInput, .messages, .message-content, weiter oben in dieser
   Datei). Bei identischer Selektor-Spezifität gewinnt in CSS die später
   deklarierte Regel, unabhängig von @media - die Basis-Regeln haben die
   Mobile-Overrides deshalb bislang IMMER wieder überschrieben, auch auf
   Mobile (font-size blieb 14px, gap blieb 24px, padding blieb 12px 16px
   - das iOS-Zoom-Problem war dadurch nie wirklich behoben). Deshalb hier
   bewusst NACH den Basis-Regeln platziert, direkt vor dem 480px-Block
   (Breakpoint-Konvention: 768px vor 480px). */
@media (max-width: 768px) {
    #userInput {
        font-size: 16px;
    }

    .messages {
        gap: 28px;
    }

    .message-content {
        padding: 14px 18px;
    }
}

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