/* ═══════════════════════════════════════════════════════════════
   DIGITALER KUNDENSERVICE-MITARBEITER · Demo-Styles
   Scope: .ksd  ·  Look nativ zur ki-agenten-Seite (dunkel/lime).
   Mobile-first: gestapelt + Segment-Umschalter; ab 920px zweispaltig.
═══════════════════════════════════════════════════════════════ */
.ksd{
  --k-bg:#0a0d0b; --k-panel:#101411; --k-panel-2:#0d100e; --k-line:rgba(237,234,221,.12);
  --k-line-2:rgba(237,234,221,.2); --k-lime:#beff00; --k-ink:#edeadd; --k-muted:#a9aaa3;
  --k-ok:#bef264; --k-warn:#ffb454; --k-danger:#ff8f7a; --k-info:#cfe8ff;
  margin-top:26px;color:var(--k-ink);
  font:400 15px/1.55 Inter,system-ui,sans-serif;
}
.ksd *{box-sizing:border-box}
.ksd-seg{display:flex;gap:6px;margin-bottom:14px}
.ksd-seg button{flex:1;min-height:46px;border:1px solid var(--k-line);border-radius:12px;background:var(--k-panel-2);
  color:var(--k-muted);font:600 .9rem Inter,sans-serif;cursor:pointer}
.ksd-seg button[aria-selected=true]{border-color:var(--k-lime);background:rgba(190,255,0,.1);color:var(--k-ink)}
.ksd-seg button:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
.ksd-grid{display:grid;gap:14px}
.ksd-pane{min-width:0}
/* [hidden] muss die display-Regeln (flex/grid) der Bausteine schlagen —
   sonst bleiben Modal, Chips, Aktionen und Panes trotz hidden sichtbar. */
.ksd [hidden]{display:none!important}

/* Panels */
.ksd-chat,.ksd-crm{border:1px solid var(--k-line);border-radius:20px;background:var(--k-panel);
  display:flex;flex-direction:column;overflow:hidden}
.ksd-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--k-line)}
.ksd-head .ksd-badge-ki{margin-left:auto}
.ksd-agent{display:flex;align-items:center;gap:10px;min-width:0}
.ksd-agent .ksd-avatar{width:38px;height:38px;border-radius:11px;background:rgba(190,255,0,.12);color:var(--k-lime);
  display:grid;place-items:center;font-size:1.2rem;flex:0 0 auto}
.ksd-agent b{display:block;font-size:.98rem}
.ksd-agent small{color:var(--k-muted);font-size:.78rem}
.ksd-badge-ki{border:1px solid var(--k-line-2);border-radius:999px;padding:4px 10px;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;color:var(--k-lime);white-space:nowrap}

/* Status-Pille */
.ksd-pill{border-radius:999px;padding:4px 11px;font-size:.72rem;font-weight:700;white-space:nowrap;
  border:1px solid var(--k-line-2);color:var(--k-ink)}
.ksd-pill[data-ton=info]{color:var(--k-info);border-color:rgba(207,232,255,.35)}
.ksd-pill[data-ton=ok]{color:var(--k-ok);border-color:rgba(190,242,100,.4)}
.ksd-pill[data-ton=warn]{color:var(--k-warn);border-color:rgba(255,180,84,.45)}
.ksd-pill[data-ton=muted]{color:var(--k-muted)}

.ksd-note{display:flex;gap:8px;align-items:flex-start;padding:9px 18px;background:rgba(190,255,0,.05);
  border-bottom:1px solid var(--k-line);color:var(--k-muted);font-size:.78rem;line-height:1.45}
.ksd-note b{color:var(--k-ink)}

/* Fortschritt */
.ksd-progress-wrap{padding:12px 18px 4px}
.ksd-progress{height:6px;border-radius:99px;background:rgba(237,234,221,.1);overflow:hidden}
.ksd-progress::after{content:"";display:block;height:100%;width:100%;transform:scaleX(var(--pct,0));
  transform-origin:left;background:var(--k-lime);border-radius:99px;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.ksd-progress-label{display:block;margin-top:6px;font-size:.72rem;color:var(--k-muted)}

/* Thread */
.ksd-thread{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:260px;max-height:min(58vh,460px);
  overflow-y:auto;scroll-behavior:smooth}
.ksd-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.ksd-row--user{justify-content:flex-end}
.ksd-row .ksd-avatar{width:28px;height:28px;font-size:.95rem;border-radius:9px;background:rgba(190,255,0,.12);
  color:var(--k-lime);display:grid;place-items:center;flex:0 0 auto}
.ksd-bubble{padding:11px 14px;border-radius:15px;max-width:82%;font-size:.92rem;line-height:1.5;word-wrap:break-word}
.ksd-bubble--agent{background:var(--k-panel-2);border:1px solid var(--k-line);border-bottom-left-radius:5px}
.ksd-bubble--user{background:var(--k-lime);color:#0a0d0b;font-weight:500;border-bottom-right-radius:5px}
.ksd-bubble strong{font-weight:700}
.ksd-typing{display:flex;gap:4px;align-items:center}
.ksd-typing span{width:7px;height:7px;border-radius:50%;background:var(--k-muted);animation:ksd-blink 1.2s infinite both}
.ksd-typing span:nth-child(2){animation-delay:.2s}.ksd-typing span:nth-child(3){animation-delay:.4s}
@keyframes ksd-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ksd-resume{margin:0 18px 4px;padding:7px 11px;border-radius:9px;background:rgba(190,255,0,.08);color:var(--k-ok);font-size:.76rem}

/* Korrektur-Chips */
.ksd-fixes{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 6px;align-items:center}
.ksd-fixlabel{font-size:.72rem;color:var(--k-muted)}
.ksd-fix{border:1px dashed var(--k-line-2);background:transparent;color:var(--k-muted);border-radius:999px;
  padding:5px 10px;font-size:.74rem;cursor:pointer;min-height:32px}
.ksd-fix:hover{color:var(--k-ink);border-color:var(--k-lime)}
.ksd-fix:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}

/* Chips (Antwortoptionen) */
.ksd-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 10px}
.ksd-chip{border:1px solid var(--k-line-2);background:var(--k-panel-2);color:var(--k-ink);border-radius:11px;
  padding:10px 14px;font:500 .86rem Inter,sans-serif;cursor:pointer;min-height:44px;transition:border-color .2s,background .2s}
.ksd-chip:hover{border-color:var(--k-lime);background:rgba(190,255,0,.08)}
.ksd-chip:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
.ksd-chip--ghost{border-style:dashed;color:var(--k-muted)}

/* Einwilligung */
.ksd-consent{padding:4px 18px 12px}
.ksd-consent-inner{border:1px solid var(--k-line-2);border-radius:14px;padding:14px;background:var(--k-panel-2)}
.ksd-consent label{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.45;cursor:pointer}
.ksd-consent input[type=checkbox]{width:20px;height:20px;margin-top:1px;accent-color:var(--k-lime);flex:0 0 auto}
.ksd-consent-ok{margin-top:12px;width:100%}

/* Eingabe */
.ksd-inputrow{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--k-line);align-items:center}
.ksd-input{flex:1;min-height:46px;border:1px solid var(--k-line-2);border-radius:12px;background:var(--k-panel-2);
  color:var(--k-ink);padding:10px 14px;font:400 .92rem Inter,sans-serif}
.ksd-input:focus{outline:2px solid var(--k-lime);outline-offset:1px;border-color:var(--k-lime)}
.ksd-input:disabled{opacity:.5}
.ksd-input[aria-invalid=true]{border-color:var(--k-danger)}
.ksd-send{min-width:46px;min-height:46px;border:none;border-radius:12px;background:var(--k-lime);color:#0a0d0b;
  font-size:1.1rem;font-weight:700;cursor:pointer}
.ksd-send:disabled{opacity:.4;cursor:default}
.ksd-send:focus-visible{outline:2px solid var(--k-ink);outline-offset:2px}
.ksd-flash{width:100%;color:var(--k-danger);font-size:.78rem;padding:2px 18px 0}

/* Steuerleiste */
.ksd-controls{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}
.ksd-ctrl{flex:1 1 auto;min-height:44px;border:1px solid var(--k-line-2);border-radius:11px;background:transparent;
  color:var(--k-ink);font:600 .82rem Inter,sans-serif;cursor:pointer;padding:8px 12px}
.ksd-ctrl:hover{border-color:var(--k-lime)}
.ksd-ctrl:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
.ksd-ctrl--end{color:var(--k-danger);border-color:rgba(255,143,122,.4)}
.ksd-ctrl--reset{color:var(--k-muted);flex-basis:100%}

/* Start-Vorhang */
.ksd-curtain{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 18px;text-align:center}
.ksd-start{min-height:52px;padding:14px 28px;border:none;border-radius:999px;background:var(--k-lime);color:#0a0d0b;
  font:700 1rem Inter,sans-serif;cursor:pointer}
.ksd-start:focus-visible{outline:2px solid var(--k-ink);outline-offset:3px}
.ksd-curtain p{margin:0;color:var(--k-muted);font-size:.82rem;max-width:44ch;line-height:1.5}
.ksd-modes{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}
.ksd-start--demo{background:transparent;color:var(--k-ink);border:1px solid var(--k-line-2)}
.ksd-start--demo:focus-visible{outline:2px solid var(--k-lime)}
/* Modus-Streifen: Demo dezent, echte Anfrage deutlich */
.ksd-mode{padding:8px 18px;font-size:.8rem;border-bottom:1px solid var(--k-line);color:var(--k-muted);line-height:1.4}
.ksd-mode[data-real]{color:#0a0d0b;background:var(--k-lime);font-weight:700}
/* Datenschutz-Link im echten Modus */
.ksd-privacy{display:inline-block;margin-top:10px;color:var(--k-lime);font-size:.8rem}
.ksd-privacy:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
/* Honeypot: für Menschen unsichtbar, für Bots ein Köder */
.ksd-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ── CRM-Cockpit ─────────────────────────────────────────────── */
.ksd-crm-head{flex-wrap:wrap;gap:10px}
.ksd-crm-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem}
.ksd-crm-title .ksd-demo-flag{border:1px solid var(--k-lime);color:var(--k-lime);border-radius:6px;padding:2px 7px;
  font-size:.64rem;font-weight:800;letter-spacing:.08em}
.ksd-roletabs{display:flex;gap:6px;margin-left:auto}
.ksd-roletab{min-height:38px;border:1px solid var(--k-line);border-radius:9px;background:var(--k-panel-2);
  color:var(--k-muted);font:600 .78rem Inter,sans-serif;padding:6px 11px;cursor:pointer}
.ksd-roletab[aria-selected=true]{border-color:var(--k-lime);background:rgba(190,255,0,.1);color:var(--k-ink)}
.ksd-roletab:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
.ksd-crm-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:min(70vh,620px)}

.ksd-case-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ksd-case-id{font-weight:700;font-size:.95rem;letter-spacing:.02em}
.ksd-case-id small{display:block;color:var(--k-muted);font-size:.7rem;font-weight:400;letter-spacing:.04em}
.ksd-rail{display:flex;flex-wrap:wrap;gap:5px}
.ksd-rail-item{font-size:.66rem;color:var(--k-muted);border:1px solid var(--k-line);border-radius:6px;padding:3px 7px;white-space:nowrap}
.ksd-rail-item[data-on]{color:#0a0d0b;background:var(--k-lime);border-color:var(--k-lime);font-weight:700}

.ksd-fields{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;border:1px solid var(--k-line);border-radius:12px;
  overflow:hidden;background:var(--k-line)}
.ksd-field{background:var(--k-panel-2);padding:9px 12px;min-width:0}
.ksd-field dt{color:var(--k-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;margin:0}
.ksd-field dd{margin:3px 0 0;font-size:.85rem;word-wrap:break-word}
.ksd-field-empty{color:var(--k-muted);opacity:.6}

.ksd-block{border:1px solid var(--k-line);border-radius:12px;padding:12px 14px;background:var(--k-panel-2)}
.ksd-block-h{display:block;color:var(--k-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ksd-prio [data-v]{font-size:1.15rem;font-weight:800}
.ksd-prio [data-v][data-ton=warn]{color:var(--k-warn)}
.ksd-prio [data-v][data-ton=info]{color:var(--k-lime)}
.ksd-prio [data-v][data-ton=muted]{color:var(--k-ink)}
.ksd-prio [data-grund]{display:block;margin-top:4px;color:var(--k-muted);font-size:.82rem;line-height:1.45}
.ksd-missing[data-ok] .ksd-block-h::after{content:" ✓";color:var(--k-ok)}
.ksd-missing [data-v]{font-size:.85rem;color:var(--k-warn)}
.ksd-missing[data-ok] [data-v]{color:var(--k-ok)}
.ksd-summary [data-v]{font-size:.86rem;line-height:1.5}
.ksd-next{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ksd-next [data-aufgabe]{font-size:.9rem;font-weight:600;display:block}
.ksd-next .ksd-zust{margin-top:6px;font-size:.74rem;color:var(--k-muted)}
.ksd-next .ksd-zust b{color:var(--k-lime)}

.ksd-activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.ksd-activity li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--k-line);font-size:.8rem}
.ksd-activity li:first-child{border-top:none}
.ksd-activity time{color:var(--k-lime);font-variant-numeric:tabular-nums;flex:0 0 auto;font-size:.74rem;padding-top:1px}
.ksd-activity span{color:var(--k-muted)}

/* Aktionen (Mitarbeiter) */
.ksd-actions{display:flex;flex-direction:column;gap:8px}
.ksd-act{min-height:46px;border-radius:11px;font:600 .86rem Inter,sans-serif;cursor:pointer;padding:10px 14px;border:1px solid var(--k-line-2)}
.ksd-act--primary{background:var(--k-lime);color:#0a0d0b;border-color:var(--k-lime)}
.ksd-act--ghost{background:transparent;color:var(--k-ink)}
.ksd-act--lock{background:transparent;color:var(--k-warn);border-color:rgba(255,180,84,.4)}
.ksd-act:hover:not(:disabled){filter:brightness(1.06)}
.ksd-act:focus-visible{outline:2px solid var(--k-lime);outline-offset:2px}
.ksd-act:disabled{opacity:.45;cursor:default}
.ksd-actions-note{margin:2px 0 0;color:var(--k-muted);font-size:.74rem;line-height:1.45}

/* Nutzen (GF) */
.ksd-benefit-title{margin:0 0 10px;font-size:1rem}
.ksd-benefit-list{margin:0;display:flex;flex-direction:column;gap:0}
.ksd-benefit-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--k-line)}
.ksd-benefit-row:first-child{border-top:none}
.ksd-benefit-row dt{color:var(--k-muted);font-size:.8rem;max-width:58%}
.ksd-benefit-row dd{margin:0;font-weight:600;font-size:.85rem;text-align:right}
.ksd-demoval{display:inline-block;border:1px solid var(--k-line-2);color:var(--k-lime);border-radius:5px;
  padding:1px 5px;font-size:.6rem;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.ksd-benefit-foot{margin:12px 0 0;color:var(--k-muted);font-size:.74rem;line-height:1.45}
.ksd-benefit-foot em{color:var(--k-lime);font-style:normal}

/* Modal (Freigabe) */
.ksd-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(6,8,7,.72);backdrop-filter:blur(4px)}
.ksd-modal-card{width:min(480px,100%);border:1px solid var(--k-line-2);border-radius:18px;background:var(--k-panel);
  padding:20px;max-height:90vh;overflow-y:auto}
.ksd-modal-card h4{margin:0 0 4px;font-size:1.05rem}
.ksd-modal-lead{color:var(--k-muted);font-size:.84rem;line-height:1.5;margin:0 0 12px}
.ksd-mail{border:1px solid var(--k-line);border-radius:12px;padding:12px;background:var(--k-panel-2);font-size:.82rem;line-height:1.5}
.ksd-mail-body{margin-top:8px;padding-top:8px;border-top:1px solid var(--k-line);color:var(--k-muted)}
.ksd-modal-actions{display:flex;gap:8px;margin-top:16px}
.ksd-modal-actions button{flex:1;min-height:46px;border-radius:11px;font:600 .88rem Inter,sans-serif;cursor:pointer}
.ksd-modal-ok{background:var(--k-lime);color:#0a0d0b;border:none}
.ksd-modal-cancel{background:transparent;color:var(--k-ink);border:1px solid var(--k-line-2)}
.ksd-modal-actions button:focus-visible{outline:2px solid var(--k-ink);outline-offset:2px}

/* Zweispaltig ab 920px */
@media(min-width:920px){
  .ksd-seg{display:none}
  .ksd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
  .ksd-pane[hidden]{display:block!important}
}
@media(max-width:520px){
  .ksd-fields{grid-template-columns:1fr}
  .ksd-controls{flex-direction:column}
  .ksd-ctrl{flex-basis:auto}
}
@media(prefers-reduced-motion:reduce){
  .ksd-progress::after{transition:none}

  .ksd-typing span{animation:none;opacity:.6}
  .ksd-thread{scroll-behavior:auto}
}