/* ============================================================
   MENTANA – KATEGORISIERTES FEEDBACK-POPUP (Aufgabe 25/26/27)
   ============================================================
   Design aus popup-mockup-mit-maskottchen.html übernommen, aber
   auf die bereits bestehenden Design-Tokens aus style.css
   ummappt statt neue Farb-/Font-Variablen anzulegen (--violet,
   --surface, --line, --ink*, --font-display/--font-body,
   --radius-*, --shadow-glow, --turtle-md gibt es dort schon 1:1
   bzw. sehr nah am Mockup-Wortschatz --violett/--card/--card-edge/
   --zart etc.).

   Scale-Buttons (1-10), Skalen-Labels und die Schildkröten-Badge
   oben rechts (.track-turtle) sind bewusst NICHT hier neu
   definiert, sondern reuse von .mood-buttons/.mood-btn/
   .mood-labels/.track-turtle aus style.css (dort bereits generisch,
   nicht auf #moodModal beschränkt) - selbe Bausteine wie beim
   Mood-Rating, nur in einer neuen Karten-Hülle.

   ANDERS ALS IM MOCKUP: kein .cat-nav (Kategorie-Umschalter), keine
   .dots (Fragen-Stepper) - pro Öffnung wird genau EINE Frage
   gezeigt, die Rotation läuft über mehrere Trigger-Zeitpunkte
   verteilt (siehe category_feedback.py). Und: nicht-blockierendes
   Floating-Card statt Vollbild-Modal mit abgedunkeltem Hintergrund
   (kein .modal/.modal-content) - das Popup soll die laufende
   Konversation (Text- oder Sprachmodus) nicht unterbrechen.
============================================================ */

.cf-popup {
    position: fixed;
    right: 20px;
    /* bottom ist ein CSS-Fallback (falls JS aus irgendeinem Grund nicht
       läuft) - im Normalfall überschreibt category_feedback.js das inline
       mit dem tatsächlichen Abstand zur Eingabeleiste (Aufgabe 29, Bug 2:
       #messages/.input-container liegen im normalen Fluss, wissen nichts
       vom fixed-positionierten Popup darüber - siehe positionPopup()). */
    bottom: 20px;
    z-index: 950; /* unter .modal (1000) und .user-menu-container (1000) */
    width: min(380px, calc(100vw - 32px));
    /* Ebenfalls ein Fallback - JS setzt die exakte, an die Eingabeleiste
       angepasste Obergrenze inline (siehe positionPopup()). */
    max-height: calc(100vh - 40px);
}

.cf-popup.hidden {
    display: none;
}

.cf-popup.show {
    animation: slideUp 0.3s ease;
}

.cf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100%; /* respektiert die (von JS gesetzte) Höhe von .cf-popup */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 24px 22px;
    /* Deutlichere Elevation als das reine Marken-Glow (--shadow-glow) -
       das Popup soll klar als schwebendes, vom Chatverlauf getrenntes
       Element erkennbar sein, nicht wie ein Teil davon (Aufgabe 29). */
    box-shadow: var(--shadow-glow), var(--shadow-modal);
    font-family: var(--font-body);
}

/* Aufgabe 29 (Bug 2): Frage+Skala+Freitext sollen bei viel Inhalt intern
   scrollen statt die Karte unbegrenzt wachsen zu lassen und dabei die
   letzte Chat-Nachricht/das Eingabefeld zu verdecken. NICHT auf .cf-card
   selbst (dort sitzt die absolut positionierte .track-turtle-Badge mit
   negativem Offset - overflow:auto auf .cf-card würde die abschneiden).
   flex+min-height:0 ist der Standard-Trick, damit ein Flex-Kind kleiner
   werden darf als sein Inhalt und stattdessen selbst scrollt. */
.cf-question-view {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(64vh, 480px); /* Fallback, bevor .cf-card eine echte Höhengrenze von JS bekommt */
    overflow-y: auto;
}

/* Schildkröten-Badge oben rechts - reuse von .track-turtle, das braucht
   nur position:relative auf dem Eltern-Element (siehe .cf-card oben). */
.cf-card .track-turtle {
    top: -14px;
    right: -12px;
}

.cf-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-right: 44px; /* Platz für die Schildkröten-Badge */
}

.cf-eyebrow {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gentle);
    font-weight: bold;
}

.cf-close-btn {
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    font-family: var(--font-body);
}

.cf-close-btn:hover {
    color: var(--ink);
}

.cf-question {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 18px;
}

/* Skala-Bereich: Platz oben für die wandernde Schildkröte (mascot-thinking),
   die sich je nach gewähltem Skalenwert horizontal mitbewegt. */
.cf-scale-area {
    position: relative;
    margin-bottom: 16px;
    padding-top: 50px;
}

.cf-mascot-thinking {
    position: absolute;
    top: 0;
    left: 50%;
    width: 48px;
    transform: translateX(-50%);
    transition: left 0.28s cubic-bezier(.34, 1.56, .64, 1), opacity 0.2s ease;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

.cf-mascot-thinking.visible {
    opacity: 1;
}

.cf-field-label {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cf-required-mark {
    color: var(--gentle);
    font-weight: bold;
}

.cf-freetext {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-soft);
    resize: none;
    box-sizing: border-box;
}

.cf-freetext::placeholder {
    color: var(--ink-faint);
}

.cf-freetext:focus {
    outline: none;
    border-color: var(--violet);
}

.cf-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Danke-Ansicht ersetzt die Frage-Ansicht innerhalb derselben Karte -
   kein zweites, separates Karten-Element (weniger Markup, kein doppeltes
   Schildkröten-Badge). */
.cf-done-view {
    text-align: center;
    padding: 6px 4px 2px;
}

.cf-done-view.hidden {
    display: none;
}

.cf-done-mark {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--calm);
    margin-bottom: 6px;
}

.cf-done-view h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--ink);
}

.cf-done-view p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 480px) {
    .cf-popup {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
    }
}