/* FS-Hub AI im Help Center — folgt dem hellen und dunklen Theme der Website (html.dark). */
.fhai {
  --fhai-bg: #ffffff; --fhai-surface: #f4f5f8; --fhai-line: rgb(17 21 28 / 10%); --fhai-text: #11151c; --fhai-muted: #5b6070;
  --fhai-accent: #0a84f0; --fhai-accent-ink: #fff; --fhai-warn: #b26a00; --fhai-crit: #c02a3a;
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
  font: 14px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fhai-text);
}
html.dark .fhai { --fhai-bg: #171a22; --fhai-surface: #1f232d; --fhai-line: rgb(237 237 243 / 10%); --fhai-text: #ededf3; --fhai-muted: #a3a8b8; --fhai-accent: #3d9bff; }
.fhai * { box-sizing: border-box; }
.fhai-launch {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: var(--fhai-accent); color: var(--fhai-accent-ink); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 30px rgb(10 132 240 / 30%); transition: transform .16s cubic-bezier(.16,1,.3,1);
}
.fhai-launch:hover { transform: translateY(-1px); }
.fhai-launch:active { transform: scale(.97); }
.fhai.open .fhai-launch { display: none; }
.fhai-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--fhai-accent); font-style: normal; font-size: 12px; line-height: 20px; text-align: center; }
.fhai-panel {
  width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column;
  border: 1px solid var(--fhai-line); border-radius: 18px; background: var(--fhai-bg); box-shadow: 0 30px 80px rgb(0 0 0 / 28%);
  overflow: hidden; animation: fhai-in .24s cubic-bezier(.16,1,.3,1) both;
}
.fhai-panel[hidden] { display: none; }
.fhai-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--fhai-line); }
.fhai-head div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.fhai-head strong { font-size: 15px; }
.fhai-head small { color: var(--fhai-muted); font-size: 12.5px; }
.fhai-close { width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--fhai-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.fhai-close:hover { background: var(--fhai-surface); color: var(--fhai-text); }
.fhai-orb { width: 30px; height: 30px; flex: none; border-radius: 50%; background: conic-gradient(from 0deg, var(--fhai-accent), #8e9bf5, #3b4cc9, var(--fhai-accent)); animation: fhai-spin 3.2s linear infinite; box-shadow: 0 0 16px rgb(10 132 240 / 35%); }
.fhai-orb.small { width: 18px; height: 18px; }
.fhai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: grid; align-content: start; gap: 14px; }
.fhai-kicker { display: block; margin-bottom: 8px; font: 500 11px/1 ui-monospace, "JetBrains Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--fhai-muted); }
.fhai-chips { display: grid; gap: 6px; }
.fhai-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fhai-line); border-radius: 12px; background: var(--fhai-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s; }
.fhai-chip:hover, .fhai-chip.focus { border-color: var(--fhai-accent); }
.fhai-chip b { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 12px; color: var(--fhai-crit); }
.fhai-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fhai-chip small { color: var(--fhai-muted); font-size: 11.5px; white-space: nowrap; }
.fhai-empty { padding: 12px; border: 1px dashed var(--fhai-line); border-radius: 12px; color: var(--fhai-muted); font-size: 13px; }
.fhai-thread { display: grid; gap: 12px; }
.fhai-q { justify-self: end; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--fhai-accent); color: var(--fhai-accent-ink); white-space: pre-wrap; }
.fhai-a { padding: 14px 16px; border: 1px solid var(--fhai-line); border-radius: 14px; background: var(--fhai-surface); animation: fhai-in .24s cubic-bezier(.16,1,.3,1) both; }
.fhai-a.loading { display: flex; align-items: center; gap: 10px; color: var(--fhai-muted); }
.fhai-a.error { border-color: rgb(192 42 58 / 35%); color: var(--fhai-crit); }
.fhai-a p { margin: 0 0 10px; }
.fhai-a h4 { margin: 14px 0 8px; font-size: 14px; }
.fhai-a h4:first-child { margin-top: 0; }
.fhai-a ol, .fhai-a ul { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 8px; }
.fhai-a ol { counter-reset: fhai; list-style: none; padding-left: 0; }
.fhai-a ol li { counter-increment: fhai; position: relative; padding-left: 34px; }
.fhai-a ol li::before { content: counter(fhai); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--fhai-accent); color: var(--fhai-accent-ink); font-size: 12px; font-weight: 600; line-height: 24px; text-align: center; }
.fhai-a code { padding: 1px 6px; border-radius: 6px; background: var(--fhai-bg); border: 1px solid var(--fhai-line); font: 12.5px ui-monospace, "JetBrains Mono", Consolas, monospace; }
.fhai-a a { color: var(--fhai-accent); }
.fhai-shimmer { background: linear-gradient(90deg, var(--fhai-muted), var(--fhai-text), var(--fhai-muted)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fhai-shimmer 1.8s linear infinite; }
.fhai-form { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--fhai-line); }
.fhai-form textarea { width: 100%; min-height: 48px; max-height: 140px; padding: 10px 12px; border: 1px solid var(--fhai-line); border-radius: 12px; background: var(--fhai-surface); color: inherit; font: inherit; resize: vertical; }
.fhai-form textarea:focus { outline: 2px solid var(--fhai-accent); outline-offset: 1px; }
.fhai-form-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.fhai-remaining { color: var(--fhai-muted); font-size: 12px; }
.fhai-send { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--fhai-accent); color: var(--fhai-accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.fhai-send:disabled { opacity: .5; cursor: default; }
@keyframes fhai-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fhai-spin { to { transform: rotate(360deg); } }
@keyframes fhai-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .fhai-panel, .fhai-a, .fhai-orb, .fhai-shimmer { animation: none; } }
@media (max-width: 520px) { .fhai { right: 12px; bottom: 12px; } }

/* Letzte Fehler mit Anleitung (ohne KI) und „In den Chat einfügen“ */
.fhai-errors { display: grid; gap: 6px; }
.fhai-err { border: 1px solid var(--fhai-line); border-radius: 12px; background: var(--fhai-surface); transition: border-color .16s; }
.fhai-err[open], .fhai-err.focus { border-color: var(--fhai-accent); }
.fhai-err summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.fhai-err summary::-webkit-details-marker { display: none; }
.fhai-err summary b { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 12px; color: var(--fhai-crit); }
.fhai-err summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fhai-err summary small { color: var(--fhai-muted); font-size: 11.5px; white-space: nowrap; }
.fhai-guide { display: grid; gap: 8px; padding: 0 12px 12px; font-size: 13px; }
.fhai-guide p { margin: 0; color: var(--fhai-muted); }
.fhai-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.fhai-err-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fhai-mini { height: 30px; padding: 0 12px; border: 1px solid var(--fhai-line); border-radius: 999px; background: var(--fhai-bg); color: inherit; font: 500 12.5px/1 inherit; cursor: pointer; }
.fhai-mini:hover { border-color: var(--fhai-accent); }
.fhai-mini.primary { border-color: transparent; background: var(--fhai-accent); color: var(--fhai-accent-ink); }
.fhai-paste-all { margin-top: 8px; }
.fhai-err :is(summary, button):focus-visible, .fhai-mini:focus-visible { outline: 2px solid var(--fhai-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fhai-err { transition: none; } }