/* ============================================================================
   Wegvio Analyse-Chat - Styles
   ============================================================================ */

.analyse-app {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 640px) { .analyse-app { gap: 16px; } }
@media (min-width: 880px) { .analyse-app { gap: 20px; } }

.analyse-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
    background: var(--wv-surface);
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius);
}
@media (min-width: 640px) { .analyse-top { padding: 16px 18px; gap: 14px; border-radius: var(--wv-radius-lg); } }
@media (min-width: 880px) { .analyse-top { padding: 20px 24px; gap: 16px; } }
@media (min-width: 720px) {
    .analyse-top { grid-template-columns: 1fr 320px; align-items: center; }
}
.analyse-progress { min-width: 0; }
@media (min-width: 720px) { .analyse-progress { min-width: 240px; } }
.analyse-progress__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; font-size: 12px;
}
@media (min-width: 640px) { .analyse-progress__head { font-size: var(--wv-fs-sm); } }
.analyse-progress__hint {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--wv-text-soft);
    background: var(--wv-surface-soft);
    border-radius: var(--wv-radius-sm);
    line-height: 1.35;
}
@media (min-width: 640px) {
    .analyse-progress__hint { margin-top: 10px; padding: 8px 12px; font-size: var(--wv-fs-xs); line-height: 1.4; border-radius: var(--wv-radius); }
}
.analyse-progress__hint.is-unlocked {
    background: var(--wv-gradient-soft);
    color: var(--wv-coral-deep);
    font-weight: 600;
}

/* --------- Session-Tabs --------- */
.session-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
}
.session-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    background: var(--wv-surface);
    border: 1.5px solid var(--wv-border);
    border-radius: var(--wv-radius);
    cursor: pointer;
    transition: all var(--wv-trans);
    text-align: left;
    min-width: 140px;
    max-width: 220px;
}
.session-tab:hover {
    border-color: var(--wv-orange);
    background: var(--wv-surface-soft);
}
.session-tab.is-current {
    border-color: var(--wv-orange);
    background: var(--wv-gradient-soft);
    color: var(--wv-coral-deep);
    box-shadow: var(--wv-shadow-sm);
}
.session-tab.is-archived {
    opacity: 0.55;
}
.session-tab__title {
    font-weight: 600;
    font-size: var(--wv-fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.session-tab__meta {
    font-size: var(--wv-fs-xs);
    color: var(--wv-text-muted);
}
.session-tab.is-current .session-tab__meta { color: var(--wv-coral-deep); }
.session-tab__arch {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

/* Modal-Styles sind global in wegvio.css definiert */

/* Session-Liste im Modal */
.session-row {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius);
    margin-bottom: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.session-row.is-current { border-color: var(--wv-orange); background: var(--wv-gradient-soft); }
.session-row.is-archived { opacity: 0.7; }
.session-row__main { flex: 1; min-width: 220px; }
.session-row__title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.session-row__title-input {
    flex: 1; min-width: 0;
    font-weight: 700;
    font-size: var(--wv-fs-base);
    border: 0;
    background: transparent;
    color: var(--wv-text);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}
.session-row__title-input:focus {
    outline: none;
    border-bottom-color: var(--wv-orange);
}
.session-row__badge {
    background: var(--wv-coral); color: #fff;
    font-size: var(--wv-fs-xs);
    padding: 2px 8px;
    border-radius: var(--wv-radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.session-row__badge--muted { background: var(--wv-text-muted); }
.session-row__desc {
    width: 100%;
    border: 1px solid var(--wv-border-soft);
    background: var(--wv-bg);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: var(--wv-fs-sm);
    color: var(--wv-text-soft);
    resize: vertical;
}
.session-row__meta {
    font-size: var(--wv-fs-xs);
    color: var(--wv-text-muted);
    margin-top: 6px;
}
.session-row__actions {
    display: flex; flex-direction: column; gap: 6px;
    flex-shrink: 0;
}

/* Probe-Indicator: zeigt aktuelle Vertiefungs-Stufe */
.probe-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--wv-gradient-soft);
    color: var(--wv-coral-deep);
    border-radius: var(--wv-radius-pill);
    font-size: var(--wv-fs-sm);
    font-weight: 600;
    align-self: flex-start;
    box-shadow: var(--wv-shadow-xs);
}
.probe-indicator .probe-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wv-coral); display: inline-block;
    box-shadow: 0 0 0 4px rgba(81, 30, 234, 0.18);
    animation: probePulse 1.6s ease-in-out infinite;
}
.probe-indicator .probe-step {
    font-size: var(--wv-fs-xs);
    color: var(--wv-coral-deep);
    opacity: 0.85;
    margin-left: 4px;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}
@keyframes probePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* Dimension-Karten - jetzt klickbar zur manuellen Bereichs-Wahl */
.dim-grid {
    display: flex; flex-direction: column;
    gap: 10px;
}
.dim-grid__header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.dim-grid__title {
    font-size: var(--wv-fs-sm);
    font-weight: 700;
    color: var(--wv-text);
    margin-right: 8px;
}
.dim-grid__hint {
    font-size: var(--wv-fs-xs);
    color: var(--wv-text-muted);
}
/* Mobile: 4 Spalten kompakt (klein, alle sichtbar). Ab 640px wieder breitere Karten */
.dim-grid__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
@media (min-width: 480px) {
    .dim-grid__cards { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (min-width: 640px) {
    .dim-grid__cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
}
.dim-auto-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--wv-surface);
    border: 1px solid var(--wv-border);
    color: var(--wv-text-soft);
    border-radius: var(--wv-radius-pill);
    font-size: var(--wv-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--wv-trans);
}
.dim-auto-btn:hover { border-color: var(--wv-orange); color: var(--wv-text); }
.dim-auto-btn.is-active {
    background: var(--wv-gradient);
    color: #fff;
    border-color: transparent;
}
.dim-auto-btn__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}
.dim-card {
    position: relative;
    background: var(--wv-surface);
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius-sm);
    padding: 8px 8px;
    transition: transform var(--wv-trans), box-shadow var(--wv-trans), border-color var(--wv-trans), background var(--wv-trans);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    appearance: none;
}
@media (min-width: 640px) { .dim-card { padding: 12px 14px; border-radius: var(--wv-radius); } }
.dim-card:hover {
    border-color: var(--wv-orange);
    transform: translateY(-2px);
    box-shadow: var(--wv-shadow-sm);
}
.dim-card:focus-visible {
    outline: 2px solid var(--wv-orange);
    outline-offset: 2px;
}
.dim-card.is-active {
    border-color: var(--wv-orange);
    background: var(--wv-gradient-soft);
    box-shadow: var(--wv-shadow-sm);
}
.dim-card.is-focus {
    border-color: var(--wv-coral-deep);
    background: var(--wv-gradient);
    color: #fff;
    box-shadow: 0 8px 22px rgba(81, 30, 234, 0.28);
}
.dim-card.is-focus .dim-card__pct,
.dim-card.is-focus .dim-card__name { color: #fff; }
.dim-card.is-focus .dim-card__bar { background: rgba(255,255,255,0.25); }
.dim-card.is-focus .dim-card__fill { background: #fff; }
.dim-card.is-done .dim-card__pct::after { content: ' ✓'; color: var(--wv-orange); }
.dim-card.is-focus.is-done .dim-card__pct::after { color: #fff; }
.dim-card__top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.dim-card__emoji { font-size: 14px; line-height: 1; }
@media (min-width: 480px) { .dim-card__emoji { font-size: 16px; } }
@media (min-width: 640px) { .dim-card__emoji { font-size: 20px; } }
.dim-card__name { font-weight: 600; font-size: 10px; line-height: 1.15; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 480px) { .dim-card__name { font-size: 11px; } }
@media (min-width: 640px) { .dim-card__name { font-size: var(--wv-fs-sm); white-space: normal; } }
/* Mobile (<640px, 4-Spalten-Raster): lange Bereichsnamen dürfen umbrechen und
   die Kacheln dürfen schrumpfen, sonst läuft die rechte Kachel über (Werte). */
@media (max-width: 639px) {
    .dim-card { min-width: 0; }
    .dim-card__name {
        white-space: normal;
        overflow-wrap: anywhere;       /* sichere Rückfallebene gegen Überlauf */
        -webkit-hyphens: auto;
        hyphens: auto;                 /* bevorzugt: saubere dt. Silbentrennung (html lang="de") */
        overflow: visible;
        text-overflow: clip;
    }
}
.dim-card__pct { font-size: 9.5px; color: var(--wv-text-muted); font-weight: 600; }
@media (min-width: 480px) { .dim-card__pct { font-size: 10px; } }
@media (min-width: 640px) { .dim-card__pct { font-size: var(--wv-fs-xs); } }
.dim-card__bar {
    margin-top: 6px;
    height: 4px; background: var(--wv-border-soft);
    border-radius: 999px; overflow: hidden;
}
@media (min-width: 640px) { .dim-card__bar { margin-top: 8px; height: 6px; } }
.dim-card__fill {
    height: 100%;
    background: var(--wv-gradient);
    border-radius: 999px;
    transition: width 350ms ease;
}
.dim-card__badge {
    position: absolute;
    top: -8px; right: 10px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #fff;
    color: var(--wv-coral-deep);
    border: 1px solid var(--wv-coral-deep);
    border-radius: var(--wv-radius-pill);
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.dim-card__badge--soft {
    background: var(--wv-surface);
    color: var(--wv-text-soft);
    border-color: var(--wv-border);
}

/* Chat */
.chat-shell {
    background: var(--wv-surface);
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--wv-shadow-sm);
}
@media (min-width: 640px) { .chat-shell { border-radius: var(--wv-radius-lg); } }
.chat-stream {
    padding: 12px;
    min-height: 280px;
    max-height: 55vh;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    background:
        radial-gradient(80% 60% at 50% -10%, rgba(107, 70, 255,0.05), transparent 70%),
        var(--wv-surface);
}
@media (min-width: 640px) { .chat-stream { padding: 18px; min-height: 320px; gap: 12px; } }
@media (min-width: 880px) { .chat-stream { padding: 24px; min-height: 360px; max-height: 60vh; gap: 14px; } }
.chat-loading { text-align: center; color: var(--wv-text-muted); padding: 40px; }

.chat-break {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--wv-text-muted);
    font-size: var(--wv-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.chat-break span {
    padding: 4px 12px;
    background: var(--wv-surface-soft);
    border-radius: var(--wv-radius-pill);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--wv-text-soft);
}

.msg {
    display: flex; gap: 10px;
    align-items: flex-end;
    max-width: 88%;
    animation: msgIn 220ms ease-out;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg--assistant { align-self: flex-start; }
.msg--user      { align-self: flex-end; flex-direction: row-reverse; }
.msg--system    { align-self: center; }

.msg__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 18px;
    background: var(--wv-gradient);
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--wv-shadow-xs);
}
.msg--user .msg__avatar { background: var(--wv-surface-soft); color: var(--wv-text); }

/* Profil-Avatar (Figur/Emoji wie auf der Profilseite) in der User-Blase –
   auf die bisherige Chat-Avatar-Groesse (36px) skaliert. Hintergrund, Akzent
   und Figur kommen unveraendert aus den .avatar-Regeln (wegvio.css). */
.msg .avatar { width: 36px; height: 36px; font-size: 18px; box-shadow: var(--wv-shadow-xs); }

.msg__bubble {
    padding: 9px 12px;
    border-radius: 14px;
    line-height: 1.45;
    font-size: 13px;
    box-shadow: var(--wv-shadow-xs);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
@media (min-width: 640px) { .msg__bubble { padding: 12px 16px; border-radius: 18px; line-height: 1.55; font-size: var(--wv-fs-base); } }
.msg--assistant .msg__bubble {
    background: var(--wv-surface-soft);
    color: var(--wv-text);
    border-bottom-left-radius: 4px;
}
.msg--user .msg__bubble {
    background: var(--wv-gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg__bubble small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.7;
}
.msg__voice-tag {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.8;
}

/* Question chips/slider Strukturiertes Format */
.chat-structured {
    padding: 18px 24px;
    border-top: 1px solid var(--wv-border);
    background: var(--wv-surface-soft);
}
.chat-structured h4 { margin: 0 0 8px; font-size: var(--wv-fs-base); }
.chat-structured__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--wv-surface);
    border: 1.5px solid var(--wv-border);
    cursor: pointer;
    font-size: var(--wv-fs-sm); font-weight: 500;
    transition: all 150ms ease;
    user-select: none;
}
.chip:hover { border-color: var(--wv-orange); }
.chip.is-selected {
    background: var(--wv-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--wv-shadow-brand);
}
.chat-structured__slider {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 10px;
}
.chat-structured__slider-labels {
    display: flex; justify-content: space-between;
    font-size: var(--wv-fs-sm); color: var(--wv-text-soft); font-weight: 500;
}
.chat-structured__slider input[type=range] {
    width: 100%;
    accent-color: var(--wv-coral);
    height: 6px;
}
.chat-structured__value {
    text-align: center;
    font-weight: 700;
    font-size: var(--wv-fs-xl);
    background: var(--wv-gradient);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.chat-structured__actions {
    display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}

/* Input Bar */
.chat-input {
    display: flex; gap: 10px; align-items: flex-end;
    padding: 14px 16px;
    border-top: 1px solid var(--wv-border);
    background: var(--wv-bg-alt);
}
.chat-textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    border: 1.5px solid var(--wv-border);
    border-radius: var(--wv-radius);
    padding: 12px 14px;
    font: inherit;
    color: var(--wv-text);
    background: var(--wv-surface);
    min-height: 48px;
    max-height: 200px;
    line-height: 1.4;
    transition: border-color var(--wv-trans), box-shadow var(--wv-trans);
}
.chat-textarea::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-textarea:focus {
    outline: none;
    border-color: var(--wv-orange);
    box-shadow: 0 0 0 4px rgba(107, 70, 255,0.15);
}
.chat-send {
    padding: 12px 18px;
}
.chat-hint {
    padding: 8px 16px 12px;
    font-size: var(--wv-fs-xs);
    color: var(--wv-text-muted);
    text-align: center;
}

/* Voice Button */
.voice-btn {
    position: relative;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--wv-border);
    background: var(--wv-surface);
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 22px;
    transition: all 200ms ease;
    flex-shrink: 0;
}
.voice-btn:hover { transform: scale(1.05); border-color: var(--wv-orange); }
.voice-btn.is-recording {
    background: var(--wv-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--wv-shadow-brand);
}
.voice-btn.is-recording .voice-btn__icon { animation: pulseMic 1.2s infinite; }
.voice-btn.is-processing {
    background: var(--wv-surface-soft);
    cursor: wait;
}
.voice-btn.is-processing .voice-btn__icon::before {
    content: '⏳';
}
.voice-btn.is-processing .voice-btn__icon {
    font-size: 0;
}
.voice-btn.is-processing .voice-btn__icon::before {
    font-size: 22px;
}

@keyframes pulseMic {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.voice-btn__pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--wv-coral);
    animation: ripple 1.4s ease-out infinite;
    pointer-events: none;
}
@keyframes ripple {
    0%   { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Typing Indicator */
.typing {
    display: inline-flex; gap: 4px; align-items: center;
    padding: 12px 16px;
    background: var(--wv-surface-soft);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
}
.typing span {
    width: 7px; height: 7px;
    background: var(--wv-text-muted);
    border-radius: 50%;
    animation: typing 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* XP Toast */
.xp-toast {
    position: fixed;
    top: 90px; right: 24px;
    z-index: 100;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    background: var(--wv-gradient);
    color: #fff;
    border-radius: var(--wv-radius);
    box-shadow: var(--wv-shadow-lg);
    font-weight: 700;
    transform: translateX(120%);
    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.xp-toast.is-visible { transform: translateX(0); }
.xp-toast__icon { font-size: 22px; }

@media (max-width: 720px) {
    /* Mobile: Chat verhält sich wie eine echte Chat-App.
       - Wenig Nachrichten: Box nur so hoch wie der Inhalt, erste Nachricht oben,
         Eingabefeld direkt darunter (kein Leerraum).
       - Voller Chat: Box auf max. Bildschirmhöhe (unter dem ~61px Sticky-Header)
         gedeckelt, der Nachrichten-Stream scrollt intern, Eingabefeld bleibt
         unten fest. (Desktop unverändert.) */
    .chat-shell {
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
    }
    .chat-stream {
        padding: 16px;
        flex: 0 1 auto;      /* nicht über den Inhalt wachsen; bei vollem Chat
                                schrumpfen + intern scrollen (min-height:0) */
        min-height: 0;
        max-height: none;
    }
    .chat-input  { padding: 10px 12px; flex-shrink: 0; }
    .voice-btn   { width: 44px; height: 44px; font-size: 20px; }
    .chat-send span:first-child { display: none; }
    .chat-send   { padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
   Klickbare Antwortoptionen der KI (unter einer Assistant-Nachricht):
   2-4 personalisierte Beispiel-Antworten + "Lieber frei schreiben".
   -------------------------------------------------------------------------- */
.msg__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.msg__options .chip {
    font-size: 13px;
    padding: 7px 12px;
    background: var(--wv-surface);
}
.msg__options .chip--ghost {
    background: transparent;
    border-style: dashed;
    color: var(--wv-text-muted);
}

/* --------------------------------------------------------------------------
   Strukturierte Auswahl (chips/slider) als CHATNACHRICHT von Wegvio:
   breite Sprechblase mit Frage + Klick-Elementen direkt im Verlauf.
   -------------------------------------------------------------------------- */
.msg--structured { width: 100%; }
.msg__bubble--structured {
    max-width: min(92%, 640px);
    flex: 1;
}
.msg__bubble--structured h4 {
    margin: 0 0 8px;
    font-size: var(--wv-fs-base);
    line-height: 1.45;
}
.msg__bubble--structured .chat-structured__actions { margin-top: 12px; }