/* ═══════════════════════════════════════════════════════════════════
   Avatar-Assistent – schwebendes Widget (Figur + eigene Eingabe)
   ───────────────────────────────────────────────────────────────────
   Wird nur eingebunden/aktiv, wenn der Avatar-Skill aktiviert ist
   (avatar.js liest /api/avatar/config). Farben ausschliesslich ueber
   Theme-Variablen (branding.js ueberschreibt --accent zur Laufzeit).
   ═══════════════════════════════════════════════════════════════════ */

#jav-root {
    position: fixed;
    bottom: 18px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-family: var(--font-body, system-ui, sans-serif);
}
#jav-root.jav-pos-br { right: 18px; align-items: flex-end; }
#jav-root.jav-pos-bl { left: 18px;  align-items: flex-start; }
/* /chat hat unten eine eigene Eingabezeile – die Figur muss darueber sitzen,
   sonst verdeckt sie den Senden-Knopf des Chats und faengt dessen Klicks ab. */
#jav-root.jav-above-input { bottom: 104px; }

/* ── Figur (Clippy-Sprite oder SVG-Platzhalter) ── */
#jav-figure {
    width: 124px;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
/* Clippy haengt sein .clippy-Element hier ein (position:relative gesetzt in JS) */
#jav-figure .clippy { position: relative !important; left: 0 !important; top: 0 !important; }

/* Firmenlogo als Figur (graphic = "branding").
   Das Logo ist ein fertiges Bild – es hat keinen Mund, den man animieren
   koennte. Beim Sprechen pulsiert es daher dezent, damit die Rueckmeldung
   nicht ganz fehlt. */
.jav-logo {
    width: 84px; height: 84px;
    object-fit: contain;
    animation: jav-bob 3.2s ease-in-out infinite;
}
.jav-logo.talking { animation: jav-bob 3.2s ease-in-out infinite, jav-pulse-soft .7s ease-in-out infinite; }
@keyframes jav-pulse-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* SVG-Platzhalter */
.jav-ph { width: 96px; height: 96px; animation: jav-bob 3.2s ease-in-out infinite; }
@keyframes jav-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.jav-ph .jav-mouth { transform-origin: center; transform: scaleY(1); }
.jav-ph.talking .jav-mouth { animation: jav-talk .28s ease-in-out infinite; }
@keyframes jav-talk { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1.25); } }
.jav-ph.talking .jav-antenna { animation: jav-blink .6s steps(1) infinite; }
@keyframes jav-blink { 50% { opacity: .4; } }

/* ── Ein/Aus-Schalter in der Kopfzeile ──
   Der Knopf uebernimmt normalerweise die Klassen des Theme-Knopfes der
   jeweiligen Seite; hier nur der Aus-Zustand und die Notloesung fuer Seiten
   ohne Symbolleiste. */
#jav-toggle { display: inline-flex; align-items: center; justify-content: center; }
#jav-toggle.jav-toggle-off { opacity: .55; }
#jav-toggle.jav-toggle-off:hover { opacity: .85; }

/* Seiten ohne Kopfzeilen-Symbolleiste (z.B. /settings) */
.jav-toggle-float {
    position: fixed;
    top: 12px; right: 14px;
    z-index: 1300;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    background: var(--bg-secondary, #1b1f27);
    color: var(--text-secondary, #9ca3af);
    border-radius: 8px; cursor: pointer;
}
.jav-toggle-float:hover { color: var(--text-primary, #f3f4f6); border-color: var(--accent, #6366f1); }

/* ── Sprech-/Eingabepanel ── */
#jav-panel {
    position: relative;          /* Bezug fuer den Ziehgriff */
    width: 320px;
    max-width: calc(100vw - 36px);
    background: var(--bg-secondary, #1b1f27);
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform-origin: bottom right;
    transition: opacity .16s ease, transform .16s ease;
}
#jav-root.jav-pos-bl #jav-panel { transform-origin: bottom left; }
#jav-panel.jav-hidden {
    opacity: 0;
    transform: scale(.92) translateY(8px);
    pointer-events: none;
    height: 0;
    border: 0;
}

/* ── Groesse aendern ──
   Der Griff sitzt in der Ecke, die VOM Bildschirmrand weg zeigt: das Widget
   ist unten rechts verankert, es waechst also nach oben/links. Ein Griff unten
   rechts (CSS `resize`) wuerde aus dem Bild heraus ziehen. */
#jav-grip {
    position: absolute;
    top: 0;
    width: 16px; height: 16px;
    z-index: 2;
    touch-action: none;          /* sonst scrollt der Finger statt zu ziehen */
}
#jav-root.jav-pos-br #jav-grip { left: 0;  cursor: nwse-resize; }
#jav-root.jav-pos-bl #jav-grip { right: 0; cursor: nesw-resize; }
/* Zwei dezente Striche als Anfasser-Hinweis */
#jav-grip::before,
#jav-grip::after {
    content: '';
    position: absolute;
    background: var(--text-muted, #9ca3af);
    opacity: .5;
    height: 1px;
    transform-origin: center;
}
#jav-root.jav-pos-br #jav-grip::before { width: 9px;  top: 5px; left: 2px; transform: rotate(45deg); }
#jav-root.jav-pos-br #jav-grip::after  { width: 5px;  top: 8px; left: 2px; transform: rotate(45deg); }
#jav-root.jav-pos-bl #jav-grip::before { width: 9px;  top: 5px; right: 2px; transform: rotate(-45deg); }
#jav-root.jav-pos-bl #jav-grip::after  { width: 5px;  top: 8px; right: 2px; transform: rotate(-45deg); }
#jav-grip:hover::before, #jav-grip:hover::after { opacity: 1; }
/* Waehrend des Ziehens keine Textauswahl und keine Groessen-Animation */
body.jav-resizing { user-select: none; }
body.jav-resizing #jav-panel { transition: none; }

.jav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(var(--accent-rgb, 99, 102, 241), .14);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, .1));
}
.jav-header .jav-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent, #6366f1); flex: none;
}
#jav-title {
    flex: 1; min-width: 0;
    font-weight: 600; font-size: .92rem;
    color: var(--text-primary, #f3f4f6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#jav-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #9ca3af);
    font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
#jav-close:hover { background: rgba(var(--fg-rgb, 255, 255, 255), .1); color: var(--text-primary, #fff); }

#jav-log {
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 46vh; overflow-y: auto;
    font-size: .88rem; line-height: 1.4;
}
.jav-msg { max-width: 88%; padding: 7px 10px; border-radius: 12px; word-wrap: break-word; }
.jav-msg a { color: var(--accent-hover, #818cf8); word-break: break-all; }
.jav-msg-user {
    align-self: flex-end;
    background: var(--accent, #6366f1); color: #fff;
    border-bottom-right-radius: 4px;
}
.jav-msg-bot {
    align-self: flex-start;
    background: rgba(var(--fg-rgb, 255, 255, 255), .07);
    color: var(--text-primary, #f3f4f6);
    border-bottom-left-radius: 4px;
    white-space: pre-wrap;
}
.jav-msg-bot.jav-thinking { color: var(--text-secondary, #9ca3af); font-style: italic; }
.jav-dots::after { content: '…'; animation: jav-el 1.1s steps(4) infinite; }
@keyframes jav-el { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '…'; } }

.jav-input {
    display: flex; align-items: center; gap: 6px;
    padding: 8px; border-top: 1px solid var(--border, rgba(255, 255, 255, .1));
    background: var(--bg-primary, #14171d);
}
#jav-text {
    flex: 1; min-width: 0;
    background: rgba(var(--fg-rgb, 255, 255, 255), .06);
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: 9px; padding: 8px 10px;
    color: var(--text-primary, #f3f4f6); font-size: .88rem;
}
#jav-text:focus { outline: none; border-color: var(--accent, #6366f1); }
.jav-ibtn {
    flex: none; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    background: rgba(var(--fg-rgb, 255, 255, 255), .05);
    color: var(--text-primary, #f3f4f6);
    border-radius: 9px; cursor: pointer; font-size: 1rem;
}
.jav-ibtn:hover { background: rgba(var(--accent-rgb, 99, 102, 241), .18); border-color: var(--accent, #6366f1); }
/* Lautsprecher (Stummschalter fuer Figur-Geraeusche UND Sprachausgabe):
   stumm = blass und ohne Rahmenakzent. Die Farbe allein traegt die Aussage
   nicht – das Symbol selbst wechselt zwischen 🔊 und 🔇. */
#jav-speak.jav-off { opacity: .5; }
#jav-speak.jav-off:hover { opacity: .85; }
#jav-speak:not(.jav-off) { border-color: color-mix(in srgb, var(--accent, #6366f1) 60%, transparent); }
#jav-send { background: var(--accent, #6366f1); border-color: var(--accent, #6366f1); color: #fff; }
#jav-send:hover { background: var(--accent-hover, #4f52d6); }
/* Abbrechen ersetzt Senden waehrend eines Laufs (wie der Stop-Knopf im Chat).
   .jav-hidden hat hier hoehere Spezifitaet als die Button-Regeln darueber. */
.jav-input .jav-ibtn.jav-hidden { display: none; }
#jav-stop { background: var(--danger, #ef4444); border-color: var(--danger, #ef4444); color: #fff; }
#jav-stop:hover:not(:disabled) { filter: brightness(1.12); }
#jav-stop:disabled { opacity: .55; cursor: default; }
#jav-text:disabled { opacity: .6; cursor: not-allowed; }
#jav-mic.jav-listening { background: var(--danger, #ef4444); border-color: var(--danger, #ef4444); color: #fff; animation: jav-pulse 1s ease-in-out infinite; }
@keyframes jav-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } }