/* === CHATBOT WIDGET – STABLE BUILD === */

:root{
  --kc-primary:#FF6567;
  --kc-radius:16px;
  --kc-shadow:0 24px 64px rgba(0,0,0,.18);
  --kc-bg:#fff;
  --kc-text:#0f172a;
  --kc-muted:#fafafa;
}

/* ROOT (Dock unten rechts) */
#kc-root{
  position:fixed; right:16px; bottom:16px;
  z-index:2147483647; pointer-events:none;
  font-family:system-ui,-apple-system,"Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* PANEL (interaktiv) */
#kc-panel{
  position:absolute; right:0; bottom:0;
  width:420px !important; height:600px !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100vh - 32px) !important;
  pointer-events:auto; z-index:9999; overflow:visible;
}

/* WEISSE CHATBOX */
#kc-panel>div{
  position:relative; width:100%; height:100%;
  background:#fff; border-radius:20px; box-shadow:var(--kc-shadow);
  display:flex; flex-direction:column; overflow:visible;
  min-width:320px;
}

/* HEADER */
.kc-header{
  background:#f9fafb !important;
  border-top-left-radius:20px !important;
  border-top-right-radius:20px !important;
  border-bottom:1px solid rgba(0,0,0,.07) !important;
  padding:16px 20px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-shrink:0 !important;
  min-height:auto !important;
}
.kc-header span{
  font-size:16px !important;
  font-weight:600 !important;
  color:var(--kc-text) !important;
}
.kc-header__left{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:12px !important;
}
.kc-header__avatar{
  width:76px !important;
  height:76px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}
.kc-header__close{
  background:transparent !important;
  border:0 !important;
  color:#475569 !important;
  width:32px !important;
  height:32px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  transition:color .16s ease !important;
}
.kc-header__close:hover{color:#0f172a !important;}

/* Avatar slot fallback */
#kc-avatar-slot,#kc-ava-slot{
  background:transparent !important;
  position:relative !important;
  margin:0 !important;
}

/* === MITTLERER BEREICH (MESSAGES) */
.kc-messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  background:#fff !important;
  padding:16px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:var(--kc-text) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

/* MESSAGE BUBBLES – robust, ohne Seiteneffekte */
.kc-role-assistant p{
  background:#fff; color:var(--kc-text);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
  border-radius:12px; border-bottom-left-radius:4px;
  padding:10px 12px; display:inline-block; max-width:90%; margin:0 0 10px 0;
}
.kc-role-user p{
  background:var(--kc-primary); color:#fff;
  border-radius:12px; border-bottom-right-radius:4px;
  padding:10px 12px; display:inline-block; max-width:90%; margin:0 0 10px auto;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}

/* Input-Bar */
.kc-input-row{
  display:flex !important;
  gap:8px !important;
  padding:16px !important;
  border-top:1px solid rgba(0,0,0,.07) !important;
  background:#fafafa !important;
  border-bottom-left-radius:20px !important;
  border-bottom-right-radius:20px !important;
  align-items:center !important;
}
.kc-input-row textarea{
  flex:1 !important;
  resize:none !important;
  min-height:44px !important;
  max-height:88px !important;
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  padding:10px 12px !important;
  font-size:14px !important;
  line-height:1.4 !important;
  outline:none !important;
  background:#fff !important;
}
.kc-input-row textarea:focus{
  border-color:var(--kc-primary) !important;
  box-shadow:0 0 0 3px rgba(255,101,103,.15) !important;
}
.kc-input-row button{
  background:var(--kc-primary) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  padding:0 18px !important;
  height:44px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  box-shadow:0 12px 24px rgba(255,101,103,.4) !important;
  transition:transform .12s ease !important, opacity .12s ease !important;
}
.kc-input-row button:disabled{
  opacity:.6 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}
.kc-input-row button:active{transform:scale(.97) !important;}

/* Scrollbar hübsch */
.kc-messages::-webkit-scrollbar{width:6px;}
.kc-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2); border-radius:6px;}

/* Nie clippen – Header / Panel offen lassen */
#kc-panel,#kc-panel>div,.kc-header{overflow:visible !important;}