/* KN Labs Chatbot – widget.css */
:root {
  --knl-primary: #111111;
  --knl-accent:  #ffffff;
  --knl-bg:      #ffffff;
  --knl-bg2:     #fafafa;
  --knl-border:  #e0e0e0;
  --knl-text:    #1a1a1a;
  --knl-muted:   #888888;
  --knl-font:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --knl-radius:  0px;
}

/* FAB */
#knl-fab {
  position:fixed; bottom:28px; right:28px;
  width:52px; height:52px;
  background:var(--knl-primary); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:background .2s,box-shadow .2s,transform .2s;
  z-index:99999; border-radius:var(--knl-radius);
}
#knl-fab:hover { box-shadow:0 8px 28px rgba(0,0,0,.3); transform:translateY(-2px); }
#knl-fab svg  { width:22px; height:22px; fill:var(--knl-accent); }
#knl-badge {
  position:absolute; top:-4px; right:-4px;
  width:12px; height:12px; border-radius:50%;
  background:#4caf50; border:2px solid #fff;
  animation:knlPulse 2s infinite;
}
@keyframes knlPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.4);}50%{box-shadow:0 0 0 5px rgba(76,175,80,0);}}

/* Window */
#knl-window {
  position:fixed; bottom:94px; right:20px;
  width:420px;
  max-height:540px;
  min-height:320px;
  background:var(--knl-bg);
  border:1px solid var(--knl-border);
  display:flex; flex-direction:column; overflow:hidden;
  z-index:99998; border-radius:var(--knl-radius);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.10),0 24px 60px rgba(0,0,0,.12);
  opacity:0; transform:translateY(18px) scale(.97); pointer-events:none;
  transition:opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1);
}
#knl-window.knl-open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }

/* Header */
#knl-header {
  background:var(--knl-primary); padding:14px 16px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#knl-avatar {
  width:34px; height:34px;
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#knl-avatar svg { fill:rgba(255,255,255,.85); }
#knl-header-text { flex:1; min-width:0; }
#knl-name {
  font-family:var(--knl-font); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--knl-accent); margin:0;
}
#knl-status { display:flex; align-items:center; gap:5px; margin-top:2px; }
#knl-dot { width:6px; height:6px; border-radius:50%; background:#4caf50; animation:knlPulse 2s infinite; }
#knl-status-text { font-family:var(--knl-font); font-size:.6rem; color:rgba(255,255,255,.4); letter-spacing:.08em; }
#knl-close {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.4); font-size:.95rem;
  padding:5px; transition:color .15s; flex-shrink:0;
}
#knl-close:hover { color:var(--knl-accent); }

/* Messages */
#knl-messages {
  flex:1; overflow-y:auto; padding:18px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--knl-bg2);
  scrollbar-width:thin; scrollbar-color:#ddd transparent;
}
.knl-msg {
  max-width:80%;
  font-family:var(--knl-font); font-size:.8rem; line-height:1.65;
  animation:knlIn .18s ease both;
}
@keyframes knlIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;}}
.knl-bot  { align-self:flex-start; }
.knl-user { align-self:flex-end; }
.knl-bubble { padding:10px 14px; }
.knl-bot .knl-bubble {
  background:var(--knl-bg); border:1px solid var(--knl-border);
  color:var(--knl-text); border-radius:0 10px 10px 10px;
}
.knl-user .knl-bubble {
  background:var(--knl-primary); color:var(--knl-accent);
  border-radius:10px 0 10px 10px;
}
.knl-err .knl-bubble { background:#fff5f5; border-color:#fcc; color:#c0392b; }
.knl-ts { font-size:.58rem; color:#bbb; margin-top:4px; font-family:var(--knl-font); }
.knl-ts-right { text-align:right; }

/* Quick replies */
.knl-qrs { display:flex; flex-direction:column; gap:5px; margin-top:8px; width:100%; }
.knl-qr {
  background:var(--knl-bg); border:1px solid var(--knl-primary);
  color:var(--knl-primary); padding:8px 14px;
  font-size:.75rem; font-weight:600; letter-spacing:.01em;
  font-family:var(--knl-font); cursor:pointer;
  transition:background .15s,color .15s;
  text-align:left; white-space:normal; line-height:1.5;
  word-break:break-word; hyphens:auto;
  width:100%; display:block; box-sizing:border-box;
}
.knl-qr:hover:not(:disabled) { background:var(--knl-primary); color:var(--knl-accent); }
.knl-qr:disabled { opacity:.35; cursor:default; }
a.knl-qr { text-decoration:none; }
.knl-qr-weitere { opacity:.7; font-size:.7rem; }

/* Typing */
.knl-typing-wrap { align-self:flex-start; animation:knlIn .18s ease both; }
.knl-typing {
  background:var(--knl-bg); border:1px solid var(--knl-border);
  border-radius:0 10px 10px 10px; padding:13px 15px;
  display:flex; gap:5px; align-items:center;
}
.knl-typing span {
  width:6px; height:6px; border-radius:50%;
  background:#bbb; animation:knlDot 1.3s infinite;
}
.knl-typing span:nth-child(2){animation-delay:.2s;}
.knl-typing span:nth-child(3){animation-delay:.4s;}
@keyframes knlDot{0%,60%,100%{opacity:.3;transform:none;}30%{opacity:1;transform:translateY(-4px);}}

/* Lead form */
#knl-lead-form {
  padding:14px 16px; border-top:1px solid var(--knl-border);
  background:#fefefe; flex-shrink:0;
  animation:knlIn .2s ease both;
}
#knl-lead-prompt {
  font-family:var(--knl-font); font-size:.78rem; color:var(--knl-text);
  margin-bottom:10px; line-height:1.5;
}
#knl-lead-name, #knl-lead-email {
  width:100%; padding:8px 10px; margin-bottom:7px;
  border:1px solid var(--knl-border); background:#f8f8f8;
  font-family:var(--knl-font); font-size:.78rem; color:var(--knl-text);
  outline:none; transition:border-color .15s;
}
#knl-lead-name:focus, #knl-lead-email:focus { border-color:var(--knl-primary); background:#fff; }
#knl-lead-submit, #knl-lead-skip {
  font-family:var(--knl-font); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:7px 16px;
}
#knl-lead-submit {
  background:var(--knl-primary); color:var(--knl-accent); border:none;
  margin-right:8px; transition:opacity .15s;
}
#knl-lead-submit:hover { opacity:.85; }
#knl-lead-skip { background:none; border:1px solid #ccc; color:#888; }
#knl-lead-skip:hover { border-color:#888; }

/* Input */
#knl-input-row {
  padding:11px 13px; border-top:1px solid var(--knl-border);
  display:flex; gap:7px; align-items:flex-end;
  background:var(--knl-bg); flex-shrink:0;
}
#knl-input {
  flex:1; background:#f5f5f5; border:1px solid transparent;
  padding:9px 12px; color:var(--knl-text);
  font-size:.8rem; font-family:var(--knl-font); outline:none;
  resize:none; min-height:38px; max-height:88px;
  transition:border-color .15s,background .15s; line-height:1.5;
}
#knl-input:focus { background:#fff; border-color:var(--knl-primary); }
#knl-input::placeholder { color:#bbb; font-size:.76rem; }
#knl-send {
  width:38px; height:38px; background:var(--knl-primary);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:opacity .15s;
}
#knl-send:hover:not(:disabled) { opacity:.85; }
#knl-send:disabled { background:#ccc; cursor:default; }
#knl-send svg { width:15px; height:15px; fill:var(--knl-accent); }

/* Footer */
#knl-footer {
  text-align:center; padding:5px 12px;
  font-family:var(--knl-font); font-size:.56rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:#ccc; border-top:1px solid #f0f0f0;
  background:var(--knl-bg); flex-shrink:0;
}

@media(max-width:440px){
  #knl-window{width:calc(100vw - 16px);right:8px;bottom:84px;}
  #knl-fab{right:16px;bottom:16px;}
}

/* ── DSGVO Consent Screen ───────────────────────────────────────── */
#knl-consent {
  position:absolute; inset:0;
  background:rgba(17,17,17,.96);
  display:flex; align-items:center; justify-content:center;
  z-index:10; padding:24px;
  animation:knlIn .2s ease both;
}
#knl-consent-inner {
  text-align:center; max-width:280px;
}
#knl-consent-icon {
  font-size:2rem; margin-bottom:14px;
  filter:grayscale(1) brightness(2);
}
#knl-consent-text {
  font-family:var(--knl-font,'Montserrat',sans-serif);
  font-size:.76rem; color:rgba(255,255,255,.8);
  line-height:1.7; margin-bottom:20px;
}
#knl-consent-text a { color:rgba(255,255,255,.6); }
#knl-consent-accept {
  display:block; width:100%;
  background:#ffffff; color:#111111;
  border:none; padding:11px 20px; margin-bottom:8px;
  font-family:var(--knl-font,'Montserrat',sans-serif);
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:opacity .15s;
}
#knl-consent-accept:hover { opacity:.9; }
#knl-consent-decline {
  background:none; border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.5); padding:8px 20px; width:100%;
  font-family:var(--knl-font,'Montserrat',sans-serif);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:border-color .15s, color .15s;
}
#knl-consent-decline:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.7); }

/* ── Ankündigung / Wichtiger Hinweis ────────────────────────────── */

/* FAB Badge mit Ausrufezeichen bei aktiver Ankündigung */
#knl-badge.knl-badge-alert {
  background: #e53935;
  width: 18px; height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 11px; font-weight: 900;
  color: #fff; line-height: 14px; text-align: center;
  animation: knlAlertPulse 1.5s infinite;
  top: -6px; right: -6px;
}
@keyframes knlAlertPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(229,57,53,0); transform: scale(1.1); }
}

/* Ankündigungs-Screen */
#knl-announcement {
  display: none;
  position: absolute; inset: 0;
  z-index: 20;
  flex-direction: column;
  overflow: hidden;
  animation: knlIn .2s ease both;
}

#knl-ann-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 12px;
  text-align: center;
  overflow-y: auto;
  min-height: 0;
}
#knl-ann-icon {
  font-size: 2.5rem; margin-bottom: 12px;
  animation: knlBounce .6s ease both;
  flex-shrink: 0;
}
@keyframes knlBounce {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
#knl-ann-label {
  font-family: var(--knl-font);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 8px;
  flex-shrink: 0;
}
#knl-ann-title {
  font-family: var(--knl-font);
  font-size: .95rem; font-weight: 700;
  color: #ffffff; margin-bottom: 10px;
  line-height: 1.3; flex-shrink: 0;
}
#knl-ann-text {
  font-family: var(--knl-font);
  font-size: .79rem; color: rgba(255,255,255,.88);
  line-height: 1.7;
}
#knl-ann-expires {
  font-family: var(--knl-font);
  font-size: .63rem; color: rgba(255,255,255,.45);
  margin-top: 10px; letter-spacing: .06em;
  flex-shrink: 0;
}
#knl-ann-buttons {
  padding: 12px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}
#knl-ann-ok {
  background: #ffffff; color: #111111;
  border: none; padding: 13px;
  font-family: var(--knl-font);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: opacity .15s;
  width: 100%;
}
#knl-ann-ok:hover { opacity: .9; }
#knl-ann-contact {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.9); padding: 11px;
  font-family: var(--knl-font);
  font-size: .72rem; letter-spacing: .06em;
  cursor: pointer; text-decoration: none;
  display: block; text-align: center;
  transition: background .15s; width: 100%;
  box-sizing: border-box;
}
#knl-ann-contact:hover { background: rgba(255,255,255,.25); }