/* GO:BETTER — KI-Assistent, Seitenleiste (Entwurf „KI-Assistent Einstieg“, freigegeben 20.10.2026; Kalkulator und Tracker).
   Ab 1100 px Seitenleiste rechts, 400 px, --color-surface mit Linie links, ohne Schatten; der Inhalt rückt zur Seite (Klasse am
   body, Regel je Seite), nichts wird verdeckt. Darunter (Tablet, Handy) eigene Ansicht über die volle Fläche unter der Kopfleiste
   mit „← Zurück“. Aufbau und Verhalten: ki_seitenleiste.js. */
#aiAsstPanel{
  position:fixed;right:0;top:var(--app-nav-h,50px);bottom:0;
  width:400px;max-width:100%;box-sizing:border-box;
  background:var(--color-surface);border-left:1px solid var(--color-border);
  display:none;flex-direction:column;
  /* Über allem außer den Dialogen: Seitenleiste (250), Fußzeile (210). */
  z-index:950;
}
#aiAsstPanel.open{display:flex}
@media screen and (max-width:1099px){
  #aiAsstPanel{left:0;width:auto;border-left:0}
}
#aiAsstHeader{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--color-border);
}
.ai-kopf-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ai-kopf-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#aiAsstHeader .ai-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500;color:var(--color-text)}
#aiAsstHeader .ai-title .ai-emoji{font-family:var(--font-mono);font-size:15px}
.ai-bezug{font-size:12px;color:var(--color-text-muted)}
.ai-zurueck{display:none;align-self:flex-start;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--color-text-muted);cursor:pointer}
@media (hover:hover){.ai-zurueck:hover{color:var(--color-text)}}
@media screen and (max-width:1099px){.ai-zurueck{display:inline-flex;align-items:center}#aiAsstClose{display:none!important}}
/* Header-Action-Buttons: gleiche Höhe, gleicher vertikaler Padding, optisch
   konsistent. Close ist visuell größer (× ist von Natur aus kleines Symbol
   mit mehr Whitespace), aber padding gleich damit Boxen die gleiche Größe
   haben. History ist gedreht (180°) damit ⌃ als „Pfeil-nach-unten" wirkt. */
#aiAsstClose,
#aiAsstReset,
#aiAsstHistory{
  background:none;border:none;color:var(--text-3);
  cursor:pointer;padding:6px 8px;line-height:1;border-radius:var(--radius-2);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;min-height:28px;
}
#aiAsstClose{font-size:14px;width:32px;height:32px}
#aiAsstReset{font-size:15px}
#aiAsstHistory{font-size:14px;transform:rotate(180deg)}
@media (hover:hover){#aiAsstClose:hover{color:var(--text);background:var(--gray-bg)}}
@media (hover:hover){#aiAsstReset:hover,#aiAsstHistory:hover{color:var(--accent);background:var(--gray-bg)}}
/* KI-Verlauf: Aufklappmenü .gb-menu (tokens.css); hier nur Lage und Höhe. Aktueller Chat mit ✓. */
#aiAsstHistoryMenu{position:absolute;top:calc(100% + 4px);right:0;min-width:220px;max-height:300px;overflow-y:auto;z-index:10}

/* Ticker-Drift-Hinweis — sichtbar wenn gespeicherter Chat zu anderem Wert.
   Sieht aus wie der Disclaimer-Banner aber blau, um nicht mit dem Warnungs-
   Banner verwechselt zu werden. */
#aiAsstDrift{
  background:linear-gradient(var(--color-info-soft),var(--color-info-soft)),var(--color-surface);border-bottom:1px solid var(--color-info-border); /* Erklärung → info (Kategorie S) */
  padding:8px 16px;display:flex;gap:8px;align-items:flex-start;
  font-size:11.5px;line-height:1.5;color:var(--color-text);
}
#aiAsstDrift .ai-warn-icon{flex-shrink:0;color:var(--color-info);font-size:14px;line-height:1.2}
#aiAsstDrift strong{color:var(--text);font-weight:600}
#aiAsstDrift a{color:var(--color-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:600}
@media (hover:hover){#aiAsstDrift a:hover{text-decoration:underline}}

/* Disclaimer-Banner — collapsible (details/summary). Default geschlossen
   für minimalen Platzverbrauch, voller Text per Click. Rechtshinweis
   bleibt permanent sichtbar ("Keine Anlageberatung." in der Summary). */
/* Hinweis (Kategorie S, Prüfhinweis → Familie A warning) */
#aiAsstDisclaimer{
  background:linear-gradient(var(--color-warning-soft),var(--color-warning-soft)),var(--color-surface);border-bottom:1px solid var(--color-warning-border);
  font-size:11.5px;line-height:1.5;color:var(--color-text);
}
#aiAsstDisclaimer summary{
  padding:8px 36px 8px 16px;cursor:pointer;list-style:none;
  position:relative;user-select:none;
  line-height:1.45;
}
#aiAsstDisclaimer summary::-webkit-details-marker{display:none}
#aiAsstDisclaimer summary::after{
  content:'▸';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--text-3);transition:transform .15s;font-size:15px;line-height:1;
}
#aiAsstDisclaimer[open] summary::after{transform:translateY(-50%) rotate(90deg)}
#aiAsstDisclaimer .ai-warn-icon{color:var(--color-warning);font-size:14px}
#aiAsstDisclaimer strong{color:var(--text);font-weight:600}
#aiAsstDisclaimer .ai-disclaimer-body{
  padding:0 16px 9px 16px;
}
#aiAsstDisclaimer a{color:var(--color-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){#aiAsstDisclaimer a:hover{text-decoration:none}}

/* Chat-Stream */
#aiAsstStream{
  flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#aiAsstStream::-webkit-scrollbar{width:6px}
#aiAsstStream::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-1)}
.ai-msg{max-width:92%;padding:9px 12px;border-radius:var(--radius-2);font-size:13px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.ai-msg.user{align-self:flex-end;background:var(--color-surface-selected);color:var(--color-text); /* Produktfarbe nicht als Fläche */border-bottom-right-radius:var(--radius-1)}
.ai-msg.bot{align-self:flex-start;background:var(--bg);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:var(--radius-1)}
body.dark .ai-msg.bot{background:var(--gray-bg)}
/* Bot-Messages: pre-wrap auf normal überschreiben — sonst rendert jedes
   \n im HTML als sichtbare Leerzeile (Newlines zwischen <li>/<p>/<h*>
   würden den Text auseinanderziehen). Block-Spacing via margins. */
.ai-msg.bot{white-space:normal}
.ai-msg.bot strong{color:var(--text);font-weight:600}
.ai-msg.bot .ai-hinweis{margin-top:8px;font-size:12px;line-height:1.45}
.ai-msg.bot code{background:var(--color-surface-2);padding:1px 5px;border-radius:var(--radius-1);font-size:12px;font-family:var(--font-mono)}
.ai-msg.bot .ai-md-p{margin:0 0 7px 0}
.ai-msg.bot .ai-md-p:last-child{margin-bottom:0}
.ai-msg.bot .ai-md-h{margin:8px 0 3px;color:var(--text);font-weight:600;line-height:1.3}
.ai-msg.bot h3.ai-md-h{font-size:14px}
.ai-msg.bot h4.ai-md-h{font-size:13px}
.ai-msg.bot h5.ai-md-h{font-size:12.5px}
.ai-msg.bot .ai-md-h:first-child{margin-top:0}
.ai-msg.bot .ai-md-ul{margin:3px 0 7px 0;padding-left:18px}
.ai-msg.bot .ai-md-ul li{margin:1px 0}
.ai-msg.bot .ai-md-ul:last-child{margin-bottom:0}
.ai-msg.err{align-self:flex-start;background:linear-gradient(var(--color-warning-soft),var(--color-warning-soft)),var(--color-surface);color:var(--color-text);border:1px solid var(--color-warning-border);font-size:12px}

.ai-thinking{display:flex;align-self:flex-start;padding:10px 14px}

/* FAQ-Pills im Welcome-State — Discovery-Element für Erstnutzer.
   Werden über der ersten Bot-Welcome-Message gerendert, verschwinden
   sobald der User die erste eigene Frage abgeschickt hat. */
.ai-faq-pills{padding:6px 4px 2px;}
.ai-faq-title{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;padding-left:2px}
.ai-faq-row{display:flex;flex-wrap:wrap;gap:6px}
.ai-faq-pill{padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-2);background:var(--surface);color:var(--text-2);font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s;font-family:inherit;line-height:1.3;text-align:left;}
@media (hover:hover){.ai-faq-pill:hover{border-color:var(--color-border-strong);color:var(--color-text);background:var(--color-surface-2)}}

/* Quick-Actions als horizontal scrollbare Chip-Reihe */
#aiAsstQuick{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-top:1px solid var(--border);scrollbar-width:none}
#aiAsstQuick::-webkit-scrollbar{display:none}
.ai-chip{flex-shrink:0;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-2);background:var(--surface);color:var(--text-2);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
@media (hover:hover){.ai-chip:hover{border-color:var(--accent);color:var(--accent)}}
.ai-chip:disabled{opacity:.5;cursor:not-allowed}

/* Eingabe-Bereich */
#aiAsstInput{border-top:1px solid var(--border);padding:10px 12px 12px;display:flex;gap:8px;align-items:flex-end}
#aiAsstField{flex:1;min-height:38px;max-height:120px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-2);background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;resize:none;line-height:1.5}
#aiAsstField:focus{outline:none;border-color:var(--color-text);box-shadow:var(--focus-ring)}
#aiAsstSend{padding:9px 14px;background:var(--color-text);color:var(--color-text-inverse);border:none;border-radius:var(--radius-2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
#aiAsstSend:disabled{background:var(--color-surface-2);border-color:var(--color-surface-2);color:var(--color-text-disabled);cursor:not-allowed;}
@media (hover:hover){#aiAsstSend:hover:not(:disabled){background:var(--color-text-muted)}}

/* Ohne KI-Schlüssel (Entwurf „KI-Assistent Tracker“ T3): Kasten mit Titel, Satz und Knopf; die Eingabe bleibt gesperrt sichtbar. */
#aiAsstNoKey{flex-direction:column;gap:12px;margin:16px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-bg)}
#aiAsstNoKey b{font-size:15px;font-weight:500;color:var(--color-text)}
#aiAsstNoKey p{margin:0;font-size:13px;line-height:1.5;color:var(--color-text-muted)}
.ai-nokey-btn{align-self:flex-start;box-sizing:border-box;height:40px;padding:0 16px;border:1px solid var(--color-border-strong);border-radius:var(--radius-2);background:transparent;color:var(--color-text);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
@media (hover:hover){.ai-nokey-btn:hover{background:var(--color-surface-2)}}
.ai-nokey-btn:focus-visible{outline:none;border-color:var(--color-text);box-shadow:var(--focus-ring)}
#aiAsstField:disabled{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed}
#aiAsstPanel:has(#aiAsstNoKey[style*="flex"]) #aiAsstInput{margin-top:auto}
/* Kostenzeile unter der Eingabe, ohne Beträge (Entwurf „KI-Assistent Tracker“). */
.ai-kosten{margin:0;padding:0 12px 12px;font-size:12px;line-height:1.45;color:var(--color-text-muted)}
#aiAsstInput:has(+ .ai-kosten[style*="block"]){padding-bottom:8px}
/* Aufklapper „Was der Assistent kennt“ (Tracker, Entwurf T2/T5). */
#aiAsstKennt{padding:12px 16px 0}
.ai-kennt{border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-bg)}
.ai-kennt summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 12px;font-size:13px;font-weight:500;color:var(--color-text);cursor:pointer}
.ai-kennt summary::-webkit-details-marker{display:none}
.ai-kennt summary:focus-visible{outline:none;border-color:var(--color-text);box-shadow:var(--focus-ring)}
.ai-kennt-pf{color:var(--color-text-muted);font-weight:400}
.ai-kennt-l{display:flex;flex-direction:column;gap:6px;padding:0 12px 12px;font-size:13px;color:var(--color-text)}
.ai-kennt-l span{display:flex;justify-content:space-between;gap:12px}
.ai-kennt-l b{font-weight:400;font-family:var(--font-mono);font-feature-settings:var(--font-numeric-features)}
.ai-kennt-l .ai-kennt-satz{display:block;line-height:1.45;color:var(--color-text-muted)}