/* KS CRM — Website-Assistent (js/site-chat.js)
   Nutzt die Tokens aus site.css, mit Rückfallwerten für Seiten ohne site.css. */
.kc {
  --kc-ink: var(--ink, oklch(0.18 0.015 260));
  --kc-body: var(--body, oklch(0.42 0.012 260));
  --kc-mfg: var(--muted-fg, oklch(0.52 0.01 260));
  --kc-line: var(--line, oklch(0.915 0.005 260));
  --kc-muted: var(--muted, oklch(0.955 0.005 260));
  --kc-accent: var(--accent, oklch(0.5 0.22 265));
  --kc-accent-soft: var(--accent-soft, oklch(0.955 0.025 265));
  --kc-grad: var(--brand-grad, linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%));
  --kc-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --kc-z: 80; /* über Navigation/Drawer, unter Vollbild-Vorschau (90) und Cookie-Dialog */
  font-family: var(--font-body, "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--kc-ink);
}
.kc *, .kc *::before, .kc *::after { box-sizing: border-box; }

/* ── Starter ── */
.kc-launch {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--kc-z);
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: var(--kc-ink); color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px oklch(0.2 0.02 260 / .12), 0 16px 34px -12px oklch(0.2 0.02 260 / .45);
  transition: transform .25s var(--kc-ease), box-shadow .25s var(--kc-ease), opacity .2s;
}
.kc-launch:hover { transform: translateY(-2px); box-shadow: 0 4px 10px oklch(0.2 0.02 260 / .14), 0 22px 40px -12px oklch(0.2 0.02 260 / .5); }
.kc-launch:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 3px; }
.kc-launch > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Online-Punkt am Foto */
.kc-online { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px #fff; }
/* feiner Markenring */
.kc-launch::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: var(--kc-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.kc.is-open .kc-launch { opacity: 0; pointer-events: none; transform: scale(.85); }

/* Knopf springt beim Laden kurz auf (nur Startzustand, danach greifen die Übergänge) */
.kc-launch { animation: kc-pop .5s var(--kc-ease) backwards; }

/* Sprechblase über dem Knopf */
.kc-hint {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 70px); z-index: var(--kc-z);
  display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 16px;
  border: 1px solid var(--kc-line); border-radius: 16px; background: #fff;
  box-shadow: 0 2px 6px oklch(0.2 0.02 260 / .06), 0 18px 38px -14px oklch(0.2 0.02 260 / .3);
  transform-origin: calc(100% - 28px) calc(100% + 10px);
  animation: kc-hint-in .5s var(--kc-ease) backwards;
}
/* Zipfel zeigt auf den Knopf */
.kc-hint::after {
  content: ""; position: absolute; right: 22px; bottom: -6px; width: 11px; height: 11px;
  background: #fff; border-right: 1px solid var(--kc-line); border-bottom: 1px solid var(--kc-line);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}
.kc-hint-open { all: unset; cursor: pointer; padding: 9px 2px 9px 0; font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--kc-ink); white-space: nowrap; }
.kc-hint-open:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 3px; border-radius: 6px; }
.kc-hint-x { width: 28px; height: 28px; }
.kc-hint-x svg { width: 14px; height: 14px; }

/* ── Fenster ── */
.kc-panel {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--kc-z);
  display: flex; flex-direction: column; width: 384px; height: min(640px, calc(100dvh - 40px));
  border: 1px solid var(--kc-line); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 2px 6px oklch(0.2 0.02 260 / .06), 0 30px 70px -20px oklch(0.2 0.02 260 / .35);
  transform-origin: bottom right; animation: kc-open .35s var(--kc-ease) both;
}
.kc-panel[hidden] { display: none; }

.kc-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--kc-line); }
.kc-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--kc-muted); }
.kc-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kc-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
.kc-avatar-sm { width: 32px; height: 32px; }
.kc-avatar-sm::after { width: 8px; height: 8px; }
.kc-title { flex: 1; min-width: 0; }
.kc-title b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.2; }
.kc-title span { display: block; margin-top: 2px; font-size: .75rem; color: var(--kc-mfg); }
.kc-ib { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--kc-mfg); cursor: pointer; transition: background .15s, color .15s; }
.kc-ib:hover { background: var(--kc-muted); color: var(--kc-ink); }
.kc-ib:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 1px; }
.kc-ib svg { width: 17px; height: 17px; }
.kc-x { width: 26px; height: 26px; }
.kc-x svg { width: 14px; height: 14px; }

.kc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; scroll-behavior: smooth; }
.kc-msg { display: flex; margin-bottom: 10px; animation: kc-rise .3s var(--kc-ease) both; }
.kc-msg.user { justify-content: flex-end; }
.kc-bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.kc-msg.bot .kc-bubble { background: var(--kc-muted); color: var(--kc-ink); border-top-left-radius: 5px; }
.kc-msg.user .kc-bubble { background: var(--kc-ink); color: #fff; border-top-right-radius: 5px; white-space: pre-wrap; }
.kc-bubble p { margin: 0; }
.kc-bubble p + p, .kc-bubble p + ul, .kc-bubble ul + p { margin-top: 8px; }
.kc-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.kc-bubble li + li { margin-top: 3px; }
.kc-bubble a { color: var(--kc-accent); text-decoration: underline; text-underline-offset: 2px; }
.kc-bubble strong { font-weight: 650; }
.kc-msg.error .kc-bubble { background: oklch(0.97 0.02 25); color: oklch(0.45 0.16 25); }

.kc-note { display: flex; justify-content: center; margin: 4px 0 12px; }
.kc-note span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: oklch(0.96 0.04 150); color: oklch(0.42 0.12 150); font-size: .75rem; font-weight: 600; }
.kc-note svg { width: 13px; height: 13px; }

.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.kc-chip { all: unset; padding: 7px 11px; border: 1px solid var(--kc-line); border-radius: 99px; background: #fff; font-size: .8125rem; color: var(--kc-ink); cursor: pointer; transition: background .15s, border-color .15s; }
.kc-chip:hover { background: var(--kc-muted); border-color: oklch(0.86 0.006 260); }
.kc-chip:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 1px; }

.kc-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.kc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--kc-mfg); opacity: .4; animation: kc-dot 1.2s infinite ease-in-out; }
.kc-typing i:nth-child(2) { animation-delay: .15s; }
.kc-typing i:nth-child(3) { animation-delay: .3s; }

.kc-form { display: flex; align-items: flex-end; gap: 8px; margin: 8px 12px 0; padding: 6px 6px 6px 12px; border: 1px solid var(--kc-line); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.kc-form:focus-within { border-color: oklch(0.75 0.08 265); box-shadow: 0 0 0 3px var(--kc-accent-soft); }
.kc-input { flex: 1; min-width: 0; max-height: 112px; padding: 7px 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: .9rem; line-height: 1.45; color: var(--kc-ink); }
.kc-input::placeholder { color: var(--kc-mfg); }
.kc-send { all: unset; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--kc-ink); color: #fff; cursor: pointer; transition: opacity .15s, transform .15s; }
.kc-send:disabled { opacity: .3; cursor: default; }
.kc-send:not(:disabled):hover { transform: translateY(-1px); }
.kc-send:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
.kc-send svg { width: 16px; height: 16px; }
.kc-foot { padding: 8px 16px 12px; font-size: .6875rem; line-height: 1.4; color: var(--kc-mfg); text-align: center; }
.kc-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.kc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes kc-pop { from { opacity: 0; transform: scale(.6) translateY(10px); } }
@keyframes kc-hint-in { from { opacity: 0; transform: translateY(8px) scale(.92); } }
@keyframes kc-open { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes kc-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes kc-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }

/* Mobil: Vollbild-Blatt */
@media (max-width: 560px) {
  .kc-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); transform-origin: bottom center; }
  .kc-launch { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .kc-hint { right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); }
  .kc-hint::after { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-panel, .kc-msg, .kc-hint, .kc-launch { animation: none; }
  .kc-launch, .kc-send { transition: none; }
  .kc-typing i { animation: none; opacity: .6; }
  .kc-body { scroll-behavior: auto; }
}