/* Assistent in der Shell (AUFTRAG-JARVIS): schwebendes Haeuschen, Seitenpanel, Gespraech, Figur. Nur Tokens aus tokens.css. */

/* ─── Schwebender Knopf ─── */
/* NACHTRAG-JARVIS-4: Rand 2 px in der Schemafarbe, Fuellung hell, Figur fuellt den Innenkreis (mittig per viewBox) */
.jv-knopf {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; box-sizing: border-box;
  width: 76px; height: 76px; padding: 0; border-radius: 50%; overflow: hidden;
  background: var(--flaeche); border: 2px solid var(--pri);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.jv-knopf:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.jv-knopf:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }
.jv-knopf[hidden] { display: none; }
html[data-jv-panel="offen"] .jv-knopf { right: calc(min(440px, 100vw) + 18px); }
@media (max-width: 700px) { html[data-jv-panel="offen"] .jv-knopf { display: none; } }

/* ─── Seitenpanel ueber dem Modul (Modul bleibt bedienbar: kein Schleier) ─── */
.jv-panel {
  position: fixed; top: var(--topbar-h, 56px); right: 0; bottom: 0; z-index: 55;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--flaeche); border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgba(0, 0, 0, .12);
}
.jv-panel[hidden] { display: none; }
.jv-panel-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.jv-panel-titel { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: flex-start; }
/* Befund KRE 16:24: Kopfzeile "Assistent" + Ton + Schliessen auf einer Linie (Knoepfe wie im Dialog-Kopf, 28 px) */
.jv-panel-zeile { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.jv-panel-zeile .jv-fueller { flex: 1 1 auto; }
.jv-panel-zeile .icon-knopf { width: 28px; height: 28px; flex: 0 0 28px; }
.jv-panel-zeile .icon-knopf[aria-pressed="true"] { background: none; color: var(--text-2); }
.jv-panel-zeile .icon-knopf[aria-pressed="true"]:hover { background: var(--hover); }
.jv-panel-name { line-height: 28px; }
.jv-kontext { color: var(--muted); font-size: var(--fs-klein, 13px); overflow-wrap: anywhere; }
.jv-panel .jv-gespraech { flex: 1; min-height: 0; }

/* ─── Gespraech ─── */
.jv-gespraech { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-height: 360px; }
.jv-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.jv-blase { max-width: 92%; padding: 8px 12px; border-radius: var(--r-sm, 8px); line-height: 1.45; overflow-wrap: anywhere; }
.jv-nutzer { align-self: flex-end; background: var(--pri); color: #fff; white-space: pre-wrap; }
.jv-antwort { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
.jv-text { overflow-wrap: anywhere; }
.jv-text p { margin: 0 0 0.5em; }
.jv-text p:last-child, .jv-text ul:last-child, .jv-text ol:last-child { margin-bottom: 0; }
.jv-text .jv-md-liste { margin: 0 0 0.5em; padding-left: 1.3em; }
.jv-text .jv-md-liste li { margin: 0.15em 0; }
.jv-status { color: var(--muted); font-size: var(--fs-klein, 13px); }
.jv-fehler { color: var(--err); }
.jv-abzeichen { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px;
  background: var(--warn-soft, rgba(255, 193, 7, .18)); color: var(--warn-text, #8a6100); }
.jv-werkzeug { margin: 6px 0; font-size: var(--fs-klein, 13px); }
.jv-werkzeug summary { cursor: pointer; color: var(--text-2); }
.jv-treffer { margin: 4px 0 0; padding-left: 18px; }
.jv-treffer li { margin: 2px 0; }
.jv-treffer-titel { font-weight: var(--fw-mittel, 500); }
.jv-treffer-zeile { color: var(--muted); margin-left: 6px; }
.jv-karte { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--warn);
  border-radius: var(--r-sm, 8px); background: var(--flaeche); }
.jv-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.jv-karte-text { white-space: pre-wrap; font-size: var(--fs-klein, 13px); max-height: 220px; overflow-y: auto; }
.jv-karte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jv-karte-ergebnis { margin-top: 6px; font-size: var(--fs-klein, 13px); color: var(--muted); }
.jv-karte-gefahr { margin-top: 6px; padding: 4px 8px; border-left: 3px solid var(--warn, #b45309); font-size: var(--fs-klein, 13px); }
.jv-eingabezeile { display: flex; gap: 8px; align-items: flex-end; }
.jv-eingabe { flex: 1; resize: vertical; min-height: 44px; max-height: 200px; font: inherit; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--flaeche); color: var(--text); }
.jv-fusszeile { display: flex; align-items: center; gap: 10px; }
.jv-hinweis { color: var(--muted); font-size: 12px; }
.jv-handeln-hinweis { margin: 4px 0 0; width: 100%; }
.jv-leer { color: var(--text-2); font-size: var(--fs-klein, 13px); }
.jv-leer ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.jv-beispiel { text-align: left; padding: 6px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm, 8px);
  background: transparent; cursor: pointer; color: var(--pri); }
[data-rolle="jv-mikro"][data-aufnahme="laeuft"] { background: var(--err); color: #fff; }
/* AUFTRAG JV7: Stopp-Knopf waehrend des Vorlesens (Panel-Lautsprecher, Hoerprobe) */
[data-rolle="jv-vorlesen"][data-zustand="stopp"], [data-rolle="e-hoerprobe"][data-zustand="stopp"] {
  background: var(--pri); border-color: var(--pri); color: #fff; }
.jv-panel-kopf .jv-figur, .jv-voll .jv-figur { cursor: pointer; }

/* ─── Figur (Haeuschen aus dem Logo) ─── */
.jv-figur { display: block; overflow: visible; }
.jv-figur-64 { width: 64px; height: 64px; }
.jv-figur-kreis { width: 100%; height: 100%; flex: 0 0 auto; }
/* NACHTRAG-JARVIS-4: Farbe aus dem Farbschema (--pri = Farbe der Logo-Dateien oben links, tokens.css) */
.jv-figur .jv-schema { fill: var(--pri); }
.jv-figur .jv-ring { stroke: var(--pri); }
.jv-figur-120 { width: 120px; height: 120px; flex: 0 0 120px; }
.jv-atem, .jv-lid, .jv-ring, .jv-punkt { transform-box: fill-box; transform-origin: center; }
.jv-mund { display: none; }
.jv-ring { opacity: 0; }
.jv-punkte { display: none; }

.jv-figur[data-zustand="wartet"] .jv-atem { animation: jv-atmen 4.8s ease-in-out infinite; }
.jv-figur .jv-lid { animation: jv-blinzeln 6.5s infinite; }
.jv-figur[data-zustand="hoert"] .jv-ring { animation: jv-pulsieren 1.1s ease-in-out infinite; }
.jv-figur[data-zustand="hoert"] .jv-atem { transform: scale(1.03); }
.jv-figur[data-zustand="denkt"] .jv-punkte { display: inline; }
.jv-figur[data-zustand="denkt"] .jv-punkt { animation: jv-punkt 1.2s ease-in-out infinite; }
.jv-figur[data-zustand="denkt"] .jv-punkt:nth-child(2) { animation-delay: .2s; }
.jv-figur[data-zustand="denkt"] .jv-punkt:nth-child(3) { animation-delay: .4s; }
.jv-figur[data-zustand="spricht"] .jv-mund { display: inline; }
.jv-figur[data-zustand="spricht"] .jv-laecheln { display: none; }
.jv-figur[data-zustand="fehler"] .jv-atem { animation: jv-schuetteln .45s ease-in-out 2; }

@keyframes jv-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes jv-blinzeln { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes jv-pulsieren { 0%, 100% { opacity: .15; transform: scale(.96); } 50% { opacity: .55; transform: scale(1.04); } }
@keyframes jv-punkt { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes jv-schuetteln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

html[data-jv-figur="aus"] .jv-figur .jv-atem, html[data-jv-figur="aus"] .jv-figur .jv-lid,
html[data-jv-figur="aus"] .jv-figur .jv-ring, html[data-jv-figur="aus"] .jv-figur .jv-punkt { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .jv-figur .jv-atem, .jv-figur .jv-lid, .jv-figur .jv-ring, .jv-figur .jv-punkt { animation: none !important; }
  .jv-figur[data-zustand="hoert"] .jv-ring { opacity: .45; }
  .jv-figur[data-zustand="denkt"] .jv-punkt { opacity: .8; }
}

/* ─── Vollansicht (Modul assistent, Reiter Gespraech/Einstellungen/Hilfe) ─── */
.jv-voll { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: start; }
.jv-voll .jv-gespraech { min-height: 60vh; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); }
@media (max-width: 700px) { .jv-voll { grid-template-columns: 1fr; } .jv-voll .jv-figur-120 { width: 80px; height: 80px; } }
.jv-einstellungen { display: grid; gap: 12px; max-width: 640px; }
.jv-einstellungen label { display: flex; align-items: center; gap: 8px; }
.jv-einstellungen fieldset { border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 8px 12px; }

/* JV8-a: selbstaendig erledigte Schritte, Liste "Erledigt" */
.jv-erledigt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; font-size: var(--fs-klein, 13px); }
.jv-erledigt[data-ok="ja"] svg { color: var(--ok); }
.jv-erledigt[data-ok="nein"] svg { color: var(--err); }
.jv-erledigt-liste { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  padding: 6px 10px; background: var(--surface); }

/* NACHTRAG-JARVIS-9b: Gedaechtnis-Zeile im Gespraech */
.jv-regel { margin: 6px 0; padding: 4px 8px; border-left: 3px solid var(--accent, #2563eb); font-size: var(--fs-klein, 13px); }
.jv-ergebnis { margin: 6px 0; padding: 4px 8px; border-left: 3px solid var(--ok, #16a34a); font-size: var(--fs-klein, 13px); }
.jv-link { margin-left: 4px; }
/* AUFTRAG JV8-c: Meldungen geplanter Auftraege */
.jv-meldung { padding: 6px 0; border-bottom: 1px solid var(--line); }
.jv-meldung[data-gelesen="nein"] { border-left: 3px solid var(--pri); padding-left: 6px; }

/* FEHLER KRE-PROBE 26.10. 11:36 (2): Zahl ungelesener Meldungen am Haeuschen */
.jv-knopf-zahl { position: absolute; top: 6px; right: 6px; margin: 0; pointer-events: none; z-index: 1; }