/* ── Globale SmartPicker kat-mascot (zweeft rechtsonder op elke pagina) ── */
.sp-kat-mascot{
  position:fixed;right:20px;bottom:20px;z-index:99999;
  width:64px;height:64px;cursor:pointer;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 4px 10px rgba(17,17,16,.16));
  transition:transform .2s;
}
.sp-kat-mascot:hover{transform:scale(1.08)}
.sp-kat-mascot-face{
  position:absolute;inset:0;
  background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;line-height:1;
  border:2px solid var(--sp-line,#e8e5df);
  animation:sp-kat-bob 3.6s ease-in-out infinite;
  box-shadow:0 2px 8px rgba(17,17,16,.06);
}
.sp-kat-emote{
  position:absolute;top:-10px;right:-10px;font-size:16px;z-index:2;
  opacity:0;transform:scale(.5);transition:all .25s;pointer-events:none;
}
.sp-kat-mascot:hover .sp-kat-emote{opacity:1;transform:scale(1)}
.sp-kat-mascot-bub{
  position:absolute;right:72px;top:0;max-width:180px;
  font-size:12.5px;font-weight:600;line-height:1.35;
  background:#fff;border:1px solid var(--sp-line,#e8e5df);border-radius:12px;
  padding:8px 11px;color:var(--sp-ink,#1f1e1a);
  box-shadow:0 6px 20px rgba(17,17,16,.10);
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .25s,transform .25s;white-space:nowrap;
}
.sp-kat-mascot-bub::after{content:'';position:absolute;right:-6px;top:16px;width:10px;height:10px;background:#fff;border-right:1px solid var(--sp-line,#e8e5df);border-bottom:1px solid var(--sp-line,#e8e5df);transform:rotate(-45deg)}
.sp-kat-mascot.open .sp-kat-mascot-bub{opacity:1;transform:translateX(0)}
.sp-kat-mascot:hover .sp-kat-emote{animation:sp-kat-wink .8s ease}

/* ── Chat-venster (opent bij klik op de kat) ── */
.sp-kat-chat{
  position:fixed;right:20px;bottom:96px;z-index:100000;
  width:340px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--sp-line,#e8e5df);border-radius:18px;
  box-shadow:0 18px 50px rgba(17,17,16,.20);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:all .22s ease;max-height:480px;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.sp-kat-chat.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.sp-kat-mascot.hidden-chat{display:none}
.sp-kat-chat-kop{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  background:linear-gradient(135deg,var(--sp-accent,#e06535),#c94f1a);
  color:#fff;
}
.sp-kat-chat-kop .sp-kat-avatar{font-size:24px;line-height:1}
.sp-kat-chat-kop-naam{font-size:14px;font-weight:800;line-height:1.2}
.sp-kat-chat-kop-sub{font-size:10.5px;opacity:.85}
.sp-kat-chat-sluit{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:2px 6px}
.sp-kat-chat-berichten{flex:1;padding:13px;overflow-y:auto;background:var(--sp-bg-soft,#faf9f6);display:flex;flex-direction:column;gap:9px;min-height:120px}
.sp-kat-chat-bub-msg{
  max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word;
}
.sp-kat-chat-msg-user{align-self:flex-end;background:var(--sp-ink,#1f1e1a);color:#fff;border-bottom-right-radius:4px}
.sp-kat-chat-msg-ai{align-self:flex-start;background:#fff;color:var(--sp-ink,#1f1e1a);border:1px solid var(--sp-line,#e8e5df);border-bottom-left-radius:4px}
.sp-kat-chat-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#fff;border:1px solid var(--sp-line,#e8e5df);border-radius:14px;border-bottom-left-radius:4px}
.sp-kat-chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--sp-muted,#8a8780);animation:sp-typ-dot 1.2s infinite}
.sp-kat-chat-typing i:nth-child(2){animation-delay:.15s}
.sp-kat-chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes sp-typ-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.sp-kat-chat-inputbar{display:flex;gap:8px;padding:11px;border-top:1px solid var(--sp-line,#e8e5df);background:#fff}
.sp-kat-chat-input{
  flex:1;border:1px solid var(--sp-line,#e8e5df);border-radius:10px;padding:9px 12px;
  font-family:inherit;font-size:13px;color:var(--sp-ink,#1f1e1a);outline:none;
}
.sp-kat-chat-input:focus{border-color:var(--sp-accent,#e06535)}
.sp-kat-chat-verstuur{
  background:var(--sp-ink,#1f1e1a);color:#fff;border:none;border-radius:10px;padding:0 14px;
  font-size:16px;cursor:pointer;transition:background .15s;
}
.sp-kat-chat-verstuur:hover{background:var(--sp-orange,#c94f1a)}

@keyframes sp-kat-bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-5px) rotate(-6deg)}
  60%{transform:translateY(0) rotate(3deg)}
  85%{transform:translateY(-2px) rotate(0deg)}
}
@keyframes sp-kat-wink{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.3) rotate(8deg)}
}

@media(max-width:640px){
  .sp-kat-mascot{right:12px;bottom:12px;width:54px;height:54px}
  .sp-kat-mascot-face{font-size:30px}
  .sp-kat-chat{right:12px;bottom:78px;width:calc(100vw - 24px);max-height:60vh}
}