/* ── ZwangerCheck Chat Widget ─────────────────────────────── */
:root{
  --cw-rose:#9b3a5a;--cw-rose-dark:#7a2d47;--cw-rose-pale:#f8edf1;
  --cw-ink:#1e1419;--cw-ink-mid:#5a4850;--cw-ink-light:#8a7880;
  --cw-cream:#faf7f5;--cw-white:#fff;
  --cw-shadow:0 8px 40px rgba(155,58,90,.18),0 2px 12px rgba(0,0,0,.08);
}

/* Floating button */
#zc-chat-btn{
  position:fixed;bottom:24px;right:24px;z-index:9000;
  width:56px;height:56px;border-radius:50%;
  background:var(--cw-rose);color:#fff;border:none;
  box-shadow:0 4px 20px rgba(155,58,90,.4);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;
  font-family:'Jost',sans-serif;
}
#zc-chat-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(155,58,90,.5)}
#zc-chat-btn svg{width:24px;height:24px;flex-shrink:0;transition:opacity .2s}
#zc-chat-btn .icon-chat{opacity:1}
#zc-chat-btn .icon-close{opacity:0;position:absolute}
#zc-chat-btn.open .icon-chat{opacity:0}
#zc-chat-btn.open .icon-close{opacity:1}

/* Notificatie badge */
#zc-chat-badge{
  position:absolute;top:-2px;right:-2px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--cw-rose);
  font-size:.6rem;font-weight:700;color:var(--cw-rose);
  display:flex;align-items:center;justify-content:center;
  animation:badge-pulse 2s ease infinite;
}
@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
#zc-chat-btn.open #zc-chat-badge{display:none}

/* Chat panel */
#zc-chat-panel{
  position:fixed;bottom:92px;right:24px;z-index:8999;
  width:360px;max-height:540px;
  background:var(--cw-white);border-radius:20px;
  box-shadow:var(--cw-shadow);
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.92) translateY(12px);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s;
  border:1px solid rgba(155,58,90,.1);
}
#zc-chat-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

/* Header */
.zc-chat-header{
  background:var(--cw-rose);
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.zc-chat-avatar{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.1rem;
}
.zc-chat-header-info{flex:1;min-width:0}
.zc-chat-header-name{font-size:.88rem;font-weight:700;color:#fff;font-family:'Jost',sans-serif}
.zc-chat-header-status{font-size:.72rem;color:rgba(255,255,255,.75);font-family:'Jost',sans-serif;display:flex;align-items:center;gap:4px}
.zc-status-dot{width:6px;height:6px;border-radius:50%;background:#5de05d;flex-shrink:0}

/* Berichten */
.zc-chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
  background:var(--cw-cream);
}
.zc-chat-messages::-webkit-scrollbar{width:4px}
.zc-chat-messages::-webkit-scrollbar-track{background:transparent}
.zc-chat-messages::-webkit-scrollbar-thumb{background:rgba(155,58,90,.2);border-radius:99px}

/* Berichten bubbels */
.zc-msg{
  display:flex;flex-direction:column;max-width:85%;
  animation:msg-in .25s cubic-bezier(.16,1,.3,1);
}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.zc-msg.bot{align-self:flex-start}
.zc-msg.user{align-self:flex-end}
.zc-msg-bubble{
  padding:10px 14px;border-radius:16px;
  font-size:.85rem;line-height:1.65;font-family:'Jost',sans-serif;
  word-break:break-word;
}
.zc-msg.bot .zc-msg-bubble{
  background:var(--cw-white);color:var(--cw-ink-mid);
  border:1px solid rgba(155,58,90,.1);
  border-bottom-left-radius:4px;
}
.zc-msg.user .zc-msg-bubble{
  background:var(--cw-rose);color:#fff;
  border-bottom-right-radius:4px;
}
.zc-msg-time{font-size:.65rem;color:var(--cw-ink-light);margin-top:3px;padding:0 4px}
.zc-msg.user .zc-msg-time{text-align:right}

/* Typing indicator */
.zc-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--cw-white);border:1px solid rgba(155,58,90,.1);border-radius:16px;border-bottom-left-radius:4px;align-self:flex-start;width:fit-content}
.zc-typing span{width:6px;height:6px;border-radius:50%;background:var(--cw-ink-light);display:block;animation:typing-dot 1.2s ease infinite}
.zc-typing span:nth-child(2){animation-delay:.2s}
.zc-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing-dot{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}

/* Suggesties */
.zc-suggestions{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 16px;flex-shrink:0;
  border-top:1px solid rgba(155,58,90,.07);
  background:var(--cw-white);
}
.zc-suggestion{
  font-size:.75rem;font-weight:500;font-family:'Jost',sans-serif;
  color:var(--cw-rose);background:var(--cw-rose-pale);
  border:1px solid rgba(155,58,90,.15);
  border-radius:99px;padding:5px 12px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.zc-suggestion:hover{background:var(--cw-rose);color:#fff;border-color:var(--cw-rose)}

/* Input area */
.zc-chat-input-area{
  padding:12px 16px;border-top:1px solid rgba(155,58,90,.08);
  display:flex;gap:8px;align-items:flex-end;
  background:var(--cw-white);flex-shrink:0;
}
#zc-chat-input{
  flex:1;min-height:36px;max-height:100px;
  padding:8px 12px;
  font-size:.88rem;font-family:'Jost',sans-serif;
  border:1.5px solid rgba(155,58,90,.2);border-radius:12px;
  background:var(--cw-cream);color:var(--cw-ink);
  outline:none;resize:none;line-height:1.5;overflow-y:auto;
  transition:border-color .2s,box-shadow .2s;
}
#zc-chat-input:focus{border-color:var(--cw-rose);box-shadow:0 0 0 3px rgba(155,58,90,.08);background:var(--cw-white)}
#zc-chat-input::placeholder{color:var(--cw-ink-light)}
#zc-chat-send{
  width:36px;height:36px;border-radius:50%;
  background:var(--cw-rose);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .15s,transform .1s;
}
#zc-chat-send:hover{background:var(--cw-rose-dark)}
#zc-chat-send:active{transform:scale(.92)}
#zc-chat-send:disabled{background:rgba(155,58,90,.3);cursor:not-allowed}
#zc-chat-send svg{width:16px;height:16px}

/* Disclaimer */
.zc-chat-disclaimer{
  padding:6px 16px 8px;
  font-size:.65rem;color:var(--cw-ink-light);
  text-align:center;font-family:'Jost',sans-serif;
  line-height:1.4;background:var(--cw-white);flex-shrink:0;
}

/* Mobile */
@media(max-width:420px){
  #zc-chat-panel{width:calc(100vw - 24px);right:12px;bottom:80px}
  #zc-chat-btn{right:16px;bottom:16px}
}