/* chatbot.css — Moorschmied Chat Widget
   "Frag ehemalige Kursteilnehmer"
   ================================ */

/* ── Variables ── */
:root{
  --cb-red:#CF1C1C;
  --cb-red-dark:#a51616;
  --cb-white:#ffffff;
  --cb-bg:#f8f7f5;
  --cb-text:#202020;
  --cb-muted:#666;
  --cb-border:#e0dede;
  --cb-shadow:0 4px 24px rgba(0,0,0,.18);
  --cb-radius:12px;
  --cb-font:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  --cb-z-btn:1600;
  --cb-z-panel:1601;
}

/* ── Toggle Button ── */
#cb-toggle{
  position:fixed;
  bottom:24px;left:24px;
  z-index:var(--cb-z-btn);
  width:60px;height:60px;
  border-radius:50%;
  background:var(--cb-red);
  color:#fff;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(205,38,38,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  transition:background .2s,box-shadow .2s;
  animation:cb-nudge 5s ease-in-out 3s infinite;
}
#cb-toggle:hover{
  background:var(--cb-red-dark);
  transform:scale(1.08);
  box-shadow:0 6px 20px rgba(205,38,38,.55);
  animation:none;
}
#cb-toggle[aria-expanded="true"]{animation:none}
@keyframes cb-nudge{
  0%,18%,100%{transform:translateY(0)}
  6%{transform:translateY(-10px)}
  12%{transform:translateY(0)}
  15%{transform:translateY(-5px)}
}
#cb-toggle .cb-badge{
  position:absolute;top:-4px;right:-4px;
  width:18px;height:18px;
  background:#fff;color:var(--cb-red);
  border-radius:50%;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cb-font);
}

/* ── Chat Panel ── */
#cb-panel{
  position:fixed;
  left:24px;bottom:100px;
  z-index:var(--cb-z-panel);
  width:370px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 140px);
  background:var(--cb-white);
  border-radius:var(--cb-radius);
  box-shadow:var(--cb-shadow);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(20px) scale(.96);
  opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;
}
#cb-panel.cb-open{
  transform:translateY(0) scale(1);
  opacity:1;pointer-events:auto;
}

/* ── Panel Header ── */
#cb-header{
  background:var(--cb-red);color:#fff;
  padding:14px 16px 12px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.cb-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.cb-header-info{flex:1;min-width:0}
.cb-header-title{
  font-family:var(--cb-font);font-weight:700;
  font-size:15px;letter-spacing:.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cb-header-sub{font-size:12px;opacity:.85;letter-spacing:.02em}
#cb-close{
  background:none;border:none;color:#fff;
  font-size:20px;cursor:pointer;padding:4px;
  opacity:.85;transition:opacity .2s;line-height:1;
}
#cb-close:hover{opacity:1}

/* ── Messages Area ── */
#cb-messages{
  flex:1;overflow-y:auto;
  padding:16px 12px 8px;
  display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--cb-border) transparent;
  overscroll-behavior:contain;
}
#cb-messages::before{content:'';flex:1 1 auto;min-height:0}
#cb-messages::-webkit-scrollbar{width:4px}
#cb-messages::-webkit-scrollbar-track{background:transparent}
#cb-messages::-webkit-scrollbar-thumb{background:var(--cb-border);border-radius:2px}

/* ── Message Bubbles ── */
.cb-msg{
  display:flex;gap:8px;max-width:90%;
  animation:cb-fadein .2s ease;
}
@keyframes cb-fadein{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.cb-msg.cb-bot{align-self:flex-start}
.cb-msg.cb-user{align-self:flex-end;flex-direction:row-reverse}

.cb-bubble{
  padding:10px 14px;border-radius:16px;
  font-family:var(--cb-font);font-size:14px;
  line-height:1.55;color:var(--cb-text);
  max-width:100%;word-break:break-word;
}
.cb-msg.cb-bot .cb-bubble{
  background:var(--cb-bg);
  border-top-left-radius:4px;
  border:1px solid var(--cb-border);
}
.cb-msg.cb-user .cb-bubble{
  background:var(--cb-red);color:#fff;
  border-top-right-radius:4px;
}

/* ── Review Quotes ── */
.cb-quote{
  margin:10px 0 0;padding:8px 12px;
  background:#fff;
  border-left:3px solid var(--cb-red);
  border-radius:0 6px 6px 0;
  font-style:italic;font-size:13px;
  color:#444;line-height:1.5;
  box-sizing:border-box;
}
.cb-quote-author{
  display:block;font-style:normal;
  font-weight:700;font-size:12px;
  color:var(--cb-muted);margin-top:4px;
}

/* ── Typing Indicator ── */
.cb-typing{
  display:flex;gap:4px;align-items:center;
  padding:10px 14px;
  background:var(--cb-bg);
  border:1px solid var(--cb-border);
  border-radius:16px;border-top-left-radius:4px;
  align-self:flex-start;
}
.cb-typing span{
  width:7px;height:7px;
  background:var(--cb-muted);border-radius:50%;
  animation:cb-bounce 1.2s infinite;
}
.cb-typing span:nth-child(2){animation-delay:.2s}
.cb-typing span:nth-child(3){animation-delay:.4s}
@keyframes cb-bounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-5px)}
}

/* ── Quick-Reply Chips ── */
.cb-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;align-self:flex-start;
  max-width:100%;padding:0 2px;
}
#cb-panel .cb-chip{
  background:#fff !important;
  border:1.5px solid #CF1C1C !important;
  color:#CF1C1C !important;
  border-radius:20px;padding:5px 12px;
  font-family:var(--cb-font);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .15s,color .15s;
  white-space:nowrap;letter-spacing:.01em;
  outline:none;-webkit-tap-highlight-color:transparent;
}
#cb-panel .cb-chip:hover,#cb-panel .cb-chip:focus{background:#CF1C1C !important;color:#fff !important;border-color:#CF1C1C !important}
#cb-panel .cb-chip:active{background:#a51616 !important;color:#fff !important;border-color:#a51616 !important}

/* ── Contact Options ── */
.cb-contact-options{
  margin-top:10px;display:flex;
  flex-direction:column;gap:6px;
}
#cb-panel .cb-contact-btn{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:8px;
  text-decoration:none !important;
  font-family:var(--cb-font);font-size:14px;font-weight:600;
  transition:opacity .15s;color:#fff !important;
}
#cb-panel .cb-contact-btn:hover,#cb-panel .cb-contact-btn:active,#cb-panel .cb-contact-btn:visited{opacity:.9;text-decoration:none !important;color:#fff !important}
#cb-panel .cb-contact-btn.cb-phone,#cb-panel .cb-contact-btn.cb-phone:hover,#cb-panel .cb-contact-btn.cb-phone:visited,#cb-panel .cb-contact-btn.cb-phone:active{background:#333 !important;color:#fff !important}
#cb-panel .cb-contact-btn.cb-wa,#cb-panel .cb-contact-btn.cb-wa:hover,#cb-panel .cb-contact-btn.cb-wa:visited,#cb-panel .cb-contact-btn.cb-wa:active{background:#25d366 !important;color:#fff !important}
#cb-panel .cb-contact-btn.cb-mail,#cb-panel .cb-contact-btn.cb-mail:hover,#cb-panel .cb-contact-btn.cb-mail:visited,#cb-panel .cb-contact-btn.cb-mail:active{background:#CF1C1C !important;color:#fff !important}
#cb-panel .cb-contact-btn .fa{font-size:16px;width:18px;text-align:center;color:#fff !important}

/* ── Input Area ── */
#cb-input-area{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--cb-border);
  background:#fff;flex-shrink:0;
}
#cb-input{
  flex:1;
  border:1.5px solid var(--cb-border);
  border-radius:22px;padding:9px 14px;
  font-family:var(--cb-font);font-size:14px;
  color:var(--cb-text);background:var(--cb-bg);
  outline:none;transition:border-color .15s;
}
#cb-input:focus{border-color:var(--cb-red)}
#cb-input::placeholder{color:var(--cb-muted)}
#cb-send{
  width:40px;height:40px;border-radius:50%;
  background:var(--cb-red);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
  transition:background .15s,transform .1s;
}
#cb-send:hover{background:var(--cb-red-dark)}
#cb-send:active{transform:scale(.93)}

/* ── Privacy Note ── */
#cb-privacy{
  text-align:center;font-size:11px;
  color:var(--cb-muted);padding:4px 8px 8px;
  font-family:var(--cb-font);letter-spacing:.01em;
  flex-shrink:0;
}
#cb-privacy a{color:var(--cb-muted) !important;text-decoration:underline !important}
#cb-privacy a:hover{color:var(--cb-text) !important}
#cb-panel .cb-bubble a{color:#CF1C1C !important;font-weight:700}
#cb-panel .cb-bubble a:hover{color:#a51616 !important}

/* ── Mobile ── */
@media(max-width:767px){
  #cb-toggle{bottom:24px;left:16px}
  .floatwa{bottom:24px;right:16px}
  #cb-panel{
    left:8px;right:8px;bottom:100px;
    width:auto;max-width:none;
    height:60vh;max-height:calc(100vh - 150px);
  }
  /* Kursseiten: Button über Sticky-Bar */
  .kurs-sticky-bar~#cb-toggle{bottom:76px}
  .kurs-sticky-bar~#cb-panel{bottom:152px}
}