/* ===== Vision - Chat-Oberflaeche (Seite, Akten-Reiter, Menueeintrag) =====
   1:1 aus der Lackdoktor-App (css/friday.css), dort ein Nachbau der J.A.R.V.I.S-Stile aus
   Immo_v2 (style.css Z. 1820-1850, index.html Z. 9-24).
   Einziger gewollter Unterschied (Vorgabe Ben 2026-09-26): futuristischer - holografischer
   Avatar, leuchtender Menueeintrag, HUD-Kopf, Reiter mit Verlaufskante. Aufbau, Knoepfe,
   Karten und Ablaeufe bleiben wie bei Jarvis.
   Die Farbwerte auf :root benutzt auch vision-gedaechtnis.css. */

:root {
  --vi-cyan: #22d3ee;
  --vi-blau: #3b82f6;
  --vi-violett: #8b5cf6;
  --vi-magenta: #d946ef;
  --vi-verlauf: linear-gradient(135deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%);
  --vi-nacht: #0b1020;
  --vi-nacht-2: #121a36;
  --vi-glas: rgba(255, 255, 255, .06);
  --vi-rand: rgba(129, 140, 248, .35);
  --vi-glow: 0 0 18px rgba(56, 189, 248, .45);
  --vi-text-hell: #e6ecff;
  /* hellere Verlaufsschrift fuer dunkle Flaechen (Menue, HUD) - #8b5cf6 waere dort zu dunkel */
  --vi-verlauf-hell: linear-gradient(90deg, #67e8f9 0%, #60a5fa 50%, #c4b5fd 100%);
}

/* Die Seite und der Akten-Reiter duerfen den Inhaltsbereich nicht verbreitern. #main-content
   ist ein Flex-Element ohne min-width:0 und waechst mit seinem breitesten Kind: Die
   Gedaechtnis-Tabelle (nicht umbrechende Spalten) schob so die ganze Seite ueber den
   Fensterrand, Knoepfe und die Statusspalte waren abgeschnitten (Test 2026-09-26). Mit
   inline-size-Containment zaehlt die Breite des Inhalts nicht mehr nach aussen - breite
   Tabellen scrollen dann in ihrer eigenen .table-wrapper. */
.vision-seite, #vision-akte-root { contain: inline-size; }

/* ===== Gemeinsame Animationen ===== */
@keyframes vision-dreh {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes vision-atmen {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@keyframes vision-scan {
  0% { transform: translateY(-12px); opacity: 0; }
  20% { opacity: .8; }
  80% { opacity: .8; }
  100% { transform: translateY(12px); opacity: 0; }
}
@keyframes vision-schimmer {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@keyframes vision-nav-glow {
  0%, 100% { filter: drop-shadow(0 0 1.5px rgba(34, 211, 238, .45)); }
  50% { filter: drop-shadow(0 0 5px rgba(139, 92, 246, .9)); }
}
@keyframes vision-kern-puls {
  0%, 100% { transform: scale(1); box-shadow: 0 0 5px rgba(34, 211, 238, .75), 0 0 10px rgba(139, 92, 246, .35); }
  50% { transform: scale(1.18); box-shadow: 0 0 8px rgba(34, 211, 238, .95), 0 0 16px rgba(139, 92, 246, .6); }
}
@keyframes vision-tippen {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes vision-glanz {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  10% { opacity: 1; }
  45% { transform: translateX(760%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(760%) skewX(-18deg); opacity: 0; }
}

/* ===== Avatar (holografischer KI-Kern, visionAvatarSvg) ===== */
.vision-avatar { display: block; flex: 0 0 auto; overflow: visible; }
.vision-avatar-gross { filter: drop-shadow(0 0 8px rgba(56, 189, 248, .45)); }
.vision-ring-langsam { animation: vision-dreh 18s linear infinite; }
.vision-ring-schnell { animation: vision-dreh 7s linear infinite reverse; }
.vision-hex { animation: vision-dreh 36s linear infinite; }
.vision-iris { animation: vision-dreh 5s linear infinite reverse; }
.vision-kern-glow { animation: vision-atmen 3.2s ease-in-out infinite; }
.vision-scanlinie { animation: vision-scan 3.6s ease-in-out infinite; }
/* denkt: alles schneller, solange eine Antwort laeuft */
.vision-avatar.vision-denkt .vision-ring-langsam { animation-duration: 2.2s; }
.vision-avatar.vision-denkt .vision-ring-schnell { animation-duration: 1.2s; }
.vision-avatar.vision-denkt .vision-hex { animation-duration: 6s; }
.vision-avatar.vision-denkt .vision-iris { animation-duration: 1s; }
.vision-avatar.vision-denkt .vision-kern-glow { animation: vision-atmen .8s ease-in-out infinite; }
.vision-avatar.vision-denkt .vision-scanlinie { animation-duration: 1.1s; }

/* ===== Menueeintrag #nav-vision (li#nav-vision > a.nav-link > span.nav-icon + span.nav-vision-text) ===== */
#nav-vision .nav-link { position: relative; }
/* Die Animationen im Menueeintrag laufen seit 2026-09-28 nur noch beim Ueberfahren. Eine endlos
   laufende Animation in der Seitenleiste steht im Verdacht, unter Windows den Mauszeiger dunkel
   zu verfaelschen (Ben: "schlecht sehende dunkle Farbe"; bekanntes Chromium-Muster, Animation +
   Grafiktreiber). Ruhend bleibt das Symbol sichtbar, nur ohne Bewegung. */
#nav-vision .vision-nav-ring { transform-origin: 12px 12px; }
#nav-vision .nav-link:hover .nav-icon svg { animation: vision-nav-glow 3.6s ease-in-out infinite; }
#nav-vision .nav-link:hover .vision-nav-ring { animation: vision-dreh 10s linear infinite; }
#nav-vision .nav-link:hover .nav-vision-text { animation: vision-schimmer 7s linear infinite; }
#nav-vision .nav-vision-text {
  font-weight: 600;
  letter-spacing: 1.4px;
  background: var(--vi-verlauf-hell);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#nav-vision .nav-link:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, .10), rgba(139, 92, 246, .10)), var(--sidebar-active, #1f2937);
}
/* Aktiv: dunkles Glas mit Verlaufsrand statt des normalen Blau */
#nav-vision .nav-link.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .16) 0%, rgba(59, 130, 246, .10) 45%, rgba(139, 92, 246, .18) 100%), var(--vi-nacht);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--vi-rand), 0 0 14px rgba(56, 189, 248, .18);
}
#nav-vision .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--vi-verlauf);
  box-shadow: 0 0 8px rgba(34, 211, 238, .7);
}

/* ===== Reiter in der Akte (button.akte-tab.akte-tab-vision, Beschriftung visionAkteTabLabel) ===== */
.akte-tab.akte-tab-vision,
.akte-tab[data-tab="vision"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vision-tab-kern {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 35%, #ffffff 0 18%, #22d3ee 40%, #3b82f6 70%, #8b5cf6 100%);
}
/* Wie im Menue (2026-09-28): Puls nur beim Ueberfahren des Reiters, nicht endlos. */
*:hover > .vision-tab-kern { animation: vision-kern-puls 2.8s ease-in-out infinite; }
.vision-tab-text {
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--vi-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: .8;
  transition: opacity .15s;
}
.akte-tab.akte-tab-vision:hover .vision-tab-text,
.akte-tab[data-tab="vision"]:hover .vision-tab-text { opacity: 1; }
/* aktiv: Verlaufsunterstrich statt der blauen Linie */
.akte-tab.akte-tab-vision.active,
.akte-tab[data-tab="vision"].active { border-bottom-color: transparent; }
.akte-tab.akte-tab-vision.active .vision-tab-text,
.akte-tab[data-tab="vision"].active .vision-tab-text { opacity: 1; filter: drop-shadow(0 0 4px rgba(56, 189, 248, .35)); }
.akte-tab.akte-tab-vision.active::after,
.akte-tab[data-tab="vision"].active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--vi-verlauf);
  box-shadow: 0 0 8px rgba(56, 189, 248, .6);
}

/* ===== Seitenkopf: dunkles HUD-Band ===== */
.vision-hud {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 16px 22px;
  margin-bottom: 16px;
  color: var(--vi-text-hell);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, .18) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(139, 92, 246, .24) 0%, transparent 60%),
    var(--vi-nacht);
  box-shadow: 0 10px 30px rgba(11, 16, 32, .22), inset 0 0 0 1px var(--vi-rand);
}
/* feines Raster */
.vision-hud::before,
.vision-akte-kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(129, 140, 248, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2));
}
/* Verlaufskante unten */
.vision-hud::after,
.vision-akte-kopf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--vi-verlauf);
  box-shadow: 0 0 12px rgba(56, 189, 248, .6);
}
/* langsamer Lichtstreif ueber das Band */
.vision-hud-glanz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: vision-glanz 9s ease-in-out infinite;
}
.vision-hud-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.vision-hud-text { min-width: 0; }
.vision-hud-titel {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 6px;
  background: var(--vi-verlauf-hell);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vision-hud-unterzeile {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(230, 236, 255, .62);
  margin-top: 3px;
}
.vision-hud-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .08);
  color: #67e8f9;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.vision-hud-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vi-cyan);
  box-shadow: 0 0 8px var(--vi-cyan);
  animation: vision-atmen 2.2s ease-in-out infinite;
}

/* ===== Reiter der Seite (Chat | Gedaechtnis) - Masse wie .property-tabs in Immo ===== */
.vision-reiter {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vision-reiter-knopf {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-muted);
}
.vision-reiter-knopf:hover { color: var(--text); background: var(--primary-light); }
.vision-reiter-knopf.active { color: #1e40af; background: var(--card-bg); }
.vision-reiter-knopf.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--vi-verlauf);
  box-shadow: 0 0 10px rgba(56, 189, 248, .5);
}

/* ===== Akten-Reiter: kompakter Kopf + Schnellknoepfe ===== */
.vision-akte-kopf {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  color: var(--vi-text-hell);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(34, 211, 238, .16) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 100%, rgba(139, 92, 246, .22) 0%, transparent 60%),
    var(--vi-nacht);
  box-shadow: inset 0 0 0 1px var(--vi-rand);
}
.vision-akte-kopf > * { position: relative; z-index: 1; }
.vision-akte-titelblock { min-width: 0; }
.vision-akte-titel { font-size: 15px; font-weight: 600; line-height: 1.35; }
.vision-akte-hinweis { font-size: 12px; color: rgba(230, 236, 255, .7); margin-top: 2px; line-height: 1.45; }
.vision-verlaufstext {
  font-weight: 700;
  letter-spacing: 3px;
  background: var(--vi-verlauf-hell);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* ===== Vision Korrektur (Vorgabe Ben 2026-10-06): Knopf rechtsbuendig in der Werkzeugleiste von Akteneintrag und
   Gespraechsnotiz (die Gespraechsnotiz ist ein Textfeld und bekommt dafuer eine eigene Leiste im selben Rahmen).
   Im Stil der frueheren Schnellknoepfe. vision.css ist auf jeder Seite geladen - der Knopf sieht auch dort so aus, wo
   die Vision-Seite nicht offen ist. */
.vision-korrektur-gruppe { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.vision-korrektur-knopf, .vision-korrektur-zurueck {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.vision-korrektur-knopf {
  border: 1px solid rgba(99, 102, 241, .35);
  background: linear-gradient(180deg, #ffffff, #f5f7ff);
  color: #1e3a8a;
  transition: border-color .15s, box-shadow .15s;
}
.vision-korrektur-knopf::before { content: '✦'; display: inline-block; margin-right: 6px; color: var(--vi-violett); }
.vision-korrektur-knopf:hover:not(:disabled) {
  border-color: var(--vi-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .15), 0 0 12px rgba(59, 130, 246, .25);
}
.vision-korrektur-knopf:disabled { cursor: progress; opacity: .85; }
.vision-korrektur-knopf.laeuft::before { animation: vision-dreh 1.2s linear infinite; }
.vision-korrektur-knopf.laeuft .vision-korrektur-text {
  background: var(--vi-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vision-korrektur-zurueck {
  border: 1px solid var(--border, #d1d5db);
  background: #fff;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}
.vision-korrektur-zurueck:hover { color: #1e3a8a; border-color: rgba(99, 102, 241, .45); }
.vision-korrektur-gesperrt { opacity: .65; cursor: progress; }
/* In der Werkzeugleiste (Vorgabe Ben 2026-10-06, rechtsbuendig): .richtext-toolbar button (style.css) wuerde Rand,
   Verlauf, Rundung, Schrift und Farbe der Pille ueberschreiben - deshalb hier mit hoeherer Spezifitaet. Nur an den
   Knopfklassen, nie an der Leiste allein: der Changelog-Editor teilt die Leiste und bekommt keinen Knopf. Der Schein
   beim Ueberfahren bleibt klein, der Rahmen schneidet sonst ab (overflow: hidden). */
.richtext-toolbar .vision-korrektur-gruppe { align-self: center; padding-left: 8px; }
.richtext-toolbar button.vision-korrektur-knopf, .richtext-toolbar button.vision-korrektur-zurueck {
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 12px;
  border-radius: 999px;
  min-width: 0;
}
.richtext-toolbar button.vision-korrektur-knopf { border: 1px solid rgba(99, 102, 241, .35); background: linear-gradient(180deg, #ffffff, #f5f7ff); color: #1e3a8a; }
.richtext-toolbar button.vision-korrektur-knopf:hover { background: linear-gradient(180deg, #ffffff, #f5f7ff); }
.richtext-toolbar button.vision-korrektur-knopf:hover:not(:disabled) { box-shadow: 0 0 0 2px rgba(34, 211, 238, .18); }
.richtext-toolbar button.vision-korrektur-zurueck { border: 1px solid var(--border, #d1d5db); background: #fff; color: var(--text-muted, #6b7280); font-weight: 500; }
.richtext-toolbar button.vision-korrektur-zurueck:hover { background: #fff; color: #1e3a8a; border-color: rgba(99, 102, 241, .45); }
/* Gespraechsnotiz: Leiste nur mit dem Knopf - ohne Knopf faellt sie ganz weg. */
.richtext-toolbar.vision-korrektur-leiste:empty { display: none; }

/* ===== Werkzeugleiste ueber dem Chat ===== */
.vision-werkzeugleiste {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  /* Nicht umbrechen, sondern Suche und Unterhaltungs-Knopf schmaler machen: Mit flex-wrap
     rutschte "History" bei 1280 px Fensterbreite in eine eigene Zeile, und dem Chat fehlte
     unten genau diese Hoehe (Test 2026-09-26). */
  flex-wrap: nowrap;
  min-width: 0;
}
.vision-unterhaltungen-knopf { white-space: nowrap; max-width: 240px; min-width: 90px; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.vision-suche { position: relative; flex: 0 1 360px; min-width: 120px; }
.vision-suche-lupe {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .55;
  pointer-events: none;
}
.vision-suche input {
  width: 100%;
  padding: 7px 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.vision-suche input:focus { outline: none; border-color: var(--vi-blau); box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.vision-suche-leeren {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}
.vision-suche-info { font-size: 12px; color: var(--text-muted); min-width: 70px; }

/* ===== Spalte Unterhaltungen + Chatkarte ===== */
.vision-chat-zeile { display: flex; gap: 12px; align-items: stretch; }
.vision-unterhaltungen { flex: 0 0 208px; flex-direction: column; }
.vision-unterhaltungen-liste {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}
.vision-unterhaltung {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card-bg, #fff);
  border-radius: 8px;
  padding: 6px 8px;
}
.vision-unterhaltung:hover { border-color: var(--vi-blau); }
.vision-unterhaltung.aktiv {
  border-color: var(--vi-blau);
  background: linear-gradient(90deg, rgba(34, 211, 238, .10), rgba(139, 92, 246, .10)), var(--card-bg, #fff);
  box-shadow: inset 3px 0 0 var(--vi-cyan);
}
.vision-unterhaltung-kopf { display: flex; gap: 3px; align-items: center; }
.vision-unterhaltung-titel {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vision-unterhaltung-letzte {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vision-unterhaltung-leer { font-size: 12px; color: var(--text-muted); padding: 6px 2px; line-height: 1.45; }
@media (max-width: 900px) { .vision-unterhaltungen { flex-basis: 148px; } }
/* Chatfuehrung (Vorgabe Ben 2026-10-06): Name an der Frage im gemeinsamen Akten-Chat bzw. in der Chat-Einsicht,
   Mitarbeiter-Auswahl ueber dem Hauptchat (nur Benjamin Albers). Die Unterhaltungs-Stile oben sind Altbestand. */
.vision-blase-name { font-size: 11px; font-weight: 600; opacity: .85; margin-bottom: 2px; }
.vision-mitarbeiter-auswahl { flex: 0 1 220px; min-width: 120px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--card-bg, #fff); color: var(--text); }

.card.vision-chat-karte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, .22);
}
.card.vision-chat-karte.vision-drop { outline: 2px dashed var(--vi-blau); outline-offset: -2px; }
.vision-nachrichten {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background-color: #fbfcff;
  background-image: radial-gradient(rgba(59, 130, 246, .08) 1px, transparent 1.3px);
  background-size: 18px 18px;
}
.vision-anhaenge { padding: 8px 16px 0; gap: 6px; flex-wrap: wrap; background: var(--card-bg); }
.vision-anhang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.vision-anhang-weg {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--danger);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.vision-eingabezeile {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
  background: var(--card-bg);
}
.vision-eingabe {
  flex: 1;
  resize: none;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.vision-eingabe:focus {
  outline: none;
  border-color: var(--vi-blau);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 0 12px rgba(34, 211, 238, .18);
}

/* ===== Leerer Zustand ===== */
.vision-leer { margin: auto; text-align: center; color: var(--text-muted); }
.vision-leer-avatar { display: flex; justify-content: center; margin-bottom: 14px; }
.vision-leer-titel {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  background: var(--vi-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
.vision-leer-text { font-size: 14px; max-width: 480px; margin: 0 auto; line-height: 1.5; }

/* ===== Tagestrenner ===== */
.vision-tag-trenner { display: flex; justify-content: center; margin: 6px 0 2px; }
.vision-tag-trenner span {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(129, 140, 248, .3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: .4px;
}

/* ===== Blasen ===== */
.vision-zeile-nutzer { display: flex; justify-content: flex-end; }
.vision-zeile-ki,
.vision-zeile-karte { display: flex; justify-content: flex-start; align-items: flex-start; }
.vision-zeile-ki { gap: 9px; }
.vision-zeile-karte { gap: 8px; }
.vision-zeile-avatar { flex: 0 0 auto; margin-top: 2px; }
.vision-ki-spalte { max-width: 78%; min-width: 0; }
.vision-karte-spalte { max-width: 85%; min-width: 0; }
.vision-karte-spalte.vision-karte-breit { flex: 1; }
.vision-blase {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Nutzer: im Verlauf */
.vision-blase-nutzer {
  max-width: 78%;
  color: #fff;
  background: linear-gradient(135deg, #0891b2 0%, #2563eb 55%, #7c3aed 100%);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .22);
}
/* Assistent: Glasoptik mit Verlaufskante links */
.vision-blase-ki {
  position: relative;
  padding-left: 16px;
  color: var(--text, #111827);
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 242, 255, .9));
  border: 1px solid rgba(129, 140, 248, .28);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(59, 130, 246, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vision-blase-ki::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #22d3ee, #3b82f6 50%, #8b5cf6);
  box-shadow: 0 0 8px rgba(56, 189, 248, .5);
}
.vision-blase-denkt { opacity: .7; font-style: italic; }
.vision-tipp-punkte { display: inline-flex; gap: 3px; margin-left: 7px; vertical-align: middle; }
.vision-tipp-punkte i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vi-cyan);
  animation: vision-tippen 1.2s ease-in-out infinite;
}
.vision-tipp-punkte i:nth-child(2) { background: var(--vi-blau); animation-delay: .15s; }
.vision-tipp-punkte i:nth-child(3) { background: var(--vi-violett); animation-delay: .3s; }
.vision-abbrechen-zeile { display: flex; justify-content: flex-start; padding-left: 37px; margin-top: -4px; }
.vision-fehler { text-align: center; color: var(--danger); font-size: 13px; padding: 4px 0; }

/* ===== Unter der Antwort: Knoepfe, Schritte, Gedaechtnis-Chip ===== */
.vision-fuss { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.vision-chat-knopf {
  border: 1px solid var(--border);
  background: var(--card-bg, #fff);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.vision-chat-knopf:hover { color: var(--text); border-color: var(--vi-blau); box-shadow: 0 0 0 2px rgba(59, 130, 246, .12); }
.vision-chat-knopf:disabled { opacity: .6; cursor: default; box-shadow: none; }
.vision-schritte { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.vision-schritte summary { cursor: pointer; user-select: none; }
.vision-schritte-liste { padding: 4px 0 2px; }
.vision-schritt {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
}
.vision-schritt-fehler { color: var(--danger); }
.vision-chip {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--text);
  background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(139, 92, 246, .12)), var(--card-bg, #fff);
  border: 1px solid rgba(129, 140, 248, .25);
}
.vision-chip a { color: #4338ca; font-weight: 600; text-decoration: none; }
.vision-chip a:hover { text-decoration: underline; }
.vision-hervorgehoben {
  outline: 3px solid var(--vi-blau);
  outline-offset: 3px;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(56, 189, 248, .45);
  transition: outline-color .4s;
}
.vision-gedimmt { color: var(--text-muted); }
.vision-ok { color: #065f46; font-weight: 600; }
.vision-fehlertext { color: var(--danger); }

/* ===== Suche im Chat ===== */
.vision-mark {
  background: #cffafe;
  color: #0b1020;
  border-radius: 2px;
  padding: 0 1px;
}
.vision-mark-aktiv {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .3);
}
.vision-blase-nutzer .vision-mark { background: rgba(255, 255, 255, .85); color: #1e3a8a; }
.vision-blase-nutzer .vision-mark-aktiv { background: #fff; color: #4c1d95; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }

/* ===== Karten (Bestaetigung, Rueckfrage, E-Mail-Entwurf) ===== */
.vision-karte {
  border: 1px solid rgba(59, 130, 246, .55);
  border-radius: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #f5f7ff);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .06);
}
.vision-karte-erledigt { opacity: .82; box-shadow: none; }
.vision-karte-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.vision-karte-kopf strong { font-size: 13px; }
.vision-karte-symbol { font-size: 15px; }
.vision-karte-zusatz { font-size: 11px; color: var(--text-muted); }
.vision-karte-beschreibung { font-size: 13px; margin-bottom: 6px; word-break: break-word; }
.vision-karte-vorschau { font-size: 12px; border-top: 1px solid var(--border); padding-top: 6px; }
.vision-karte-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vision-karte-status { font-size: 12px; }
.vision-vorschau-zeile { display: flex; gap: 8px; }
.vision-vorschau-name { color: var(--text-muted); min-width: 110px; flex: 0 0 auto; word-break: break-word; }
.vision-vorschau-wert { min-width: 0; word-break: break-word; }
.vision-vorschau-text {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
  margin: 2px 0;
  padding: 6px 8px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
}
.vision-entwurf-feld { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
.vision-entwurf-name { color: var(--text-muted); min-width: 64px; flex: 0 0 auto; }
.vision-entwurf-wert { min-width: 0; word-break: break-word; font-weight: 600; }
.vision-entwurf-text {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

/* ===== Dokument-Karte ===== */
.vision-dokument {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: var(--card-bg, #fff);
  box-shadow: 0 2px 10px rgba(59, 130, 246, .06);
}
.vision-dokument-symbol { font-size: 26px; }
.vision-dokument-text { flex: 1; min-width: 200px; }
.vision-dokument-name { font-weight: 600; font-size: 14px; }
.vision-dokument-ordner { font-size: 12px; color: var(--text-muted); word-break: break-all; }

/* Wer weniger Bewegung moechte (Systemeinstellung), bekommt einen ruhigen Vision. */
@media (prefers-reduced-motion: reduce) {
  .vision-avatar *,
  #nav-vision .nav-icon svg,
  #nav-vision .vision-nav-ring,
  #nav-vision .nav-vision-text,
  .vision-tab-kern,
  .vision-hud-glanz,
  .vision-hud-punkt,
  .vision-tipp-punkte i { animation: none !important; }
}