/* ZorgCursus Chatbot Widget — donker + warm-oranje (gemodelleerd op de sanisafe-widget) */
:root{
  --zc-accent:#E17000; --zc-accent2:#C45F00; --zc-accent-soft:rgba(225,112,0,.16);
  --zc-panel:#1f2024; --zc-panel-2:#17181b; --zc-bubble:#2a2c31; --zc-input:#26282d;
  --zc-ink:#eceef1; --zc-ink-soft:#b7bcc4; --zc-line:rgba(225,112,0,.16); --zc-ok:#4ade80;
}
.zc-chatbot{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'DM Sans',system-ui,-apple-system,sans-serif}

/* Zwevende knop */
.zc-chat-btn{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--zc-accent2),var(--zc-accent));color:#1a1206;font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(225,112,0,.42);
  transition:transform .3s ease,box-shadow .3s ease;position:relative;z-index:2}
.zc-chat-btn:hover{transform:scale(1.08);box-shadow:0 10px 34px rgba(225,112,0,.6)}
.zc-chat-btn-icon,.zc-chat-btn-close{position:absolute;transition:opacity .3s ease,transform .3s ease}
.zc-chat-btn-close{opacity:0;transform:rotate(-90deg) scale(.5)}
.zc-chatbot.open .zc-chat-btn-icon{opacity:0;transform:rotate(90deg) scale(.5)}
.zc-chatbot.open .zc-chat-btn-close{opacity:1;transform:rotate(0) scale(1)}
.zc-chat-btn-pulse{position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(225,112,0,.35);
  animation:zcPulse 2s ease-out infinite;z-index:-1}
.zc-chatbot.open .zc-chat-btn-pulse{display:none}
@keyframes zcPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}

/* Paneel */
.zc-chat-panel{position:absolute;bottom:78px;right:0;width:384px;height:532px;background:var(--zc-panel);
  border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 0 1px var(--zc-line);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.95);
  pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.zc-chatbot.open .zc-chat-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
.zc-chat-header{background:linear-gradient(135deg,var(--zc-accent2),var(--zc-accent));color:#1a1206;
  padding:15px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.zc-chat-header-info{display:flex;align-items:center;gap:12px}
.zc-chat-avatar{width:42px;height:42px;border-radius:50%;background:rgba(26,18,6,.16);display:flex;
  align-items:center;justify-content:center;font-size:1.15rem}
.zc-chat-header strong{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.zc-chat-status{font-size:.78rem;opacity:.85;display:flex;align-items:center;gap:5px;font-weight:600}
.zc-chat-status-dot{width:8px;height:8px;background:var(--zc-ok);border-radius:50%;display:inline-block;
  box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.zc-chat-close{background:rgba(26,18,6,.14);border:none;color:#1a1206;width:32px;height:32px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.zc-chat-close:hover{background:rgba(26,18,6,.28)}

/* Berichten */
.zc-chat-messages{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;
  background:var(--zc-panel-2)}
.zc-chat-messages::-webkit-scrollbar{width:5px}
.zc-chat-messages::-webkit-scrollbar-thumb{background:var(--zc-accent-soft);border-radius:4px}
.zc-msg{max-width:86%;animation:zcMsgIn .35s ease}
@keyframes zcMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.zc-msg-bot{align-self:flex-start}
.zc-msg-user{align-self:flex-end}
.zc-msg-bubble{padding:12px 16px;border-radius:16px;font-size:.92rem;line-height:1.55}
.zc-msg-bot .zc-msg-bubble{background:var(--zc-bubble);color:var(--zc-ink);border:1px solid var(--zc-line);
  border-bottom-left-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,.2)}
.zc-msg-bot .zc-msg-bubble a{color:var(--zc-accent);font-weight:600}
.zc-msg-user .zc-msg-bubble{background:linear-gradient(135deg,var(--zc-accent2),var(--zc-accent));color:#1a1206;
  font-weight:600;border-bottom-right-radius:5px}

/* Suggestie-knoppen */
.zc-msg-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.zc-msg-option{background:transparent;border:1.5px solid var(--zc-accent);color:var(--zc-accent);
  padding:8px 15px;border-radius:20px;font-size:.84rem;font-weight:600;cursor:pointer;
  transition:all .22s ease;font-family:inherit}
.zc-msg-option:hover{background:var(--zc-accent);color:#1a1206;transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(225,112,0,.3)}

/* Typing */
.zc-typing{display:flex;gap:5px;padding:12px 16px;align-self:flex-start}
.zc-typing span{width:8px;height:8px;background:var(--zc-accent);border-radius:50%;animation:zcTyping 1.2s infinite}
.zc-typing span:nth-child(2){animation-delay:.2s}
.zc-typing span:nth-child(3){animation-delay:.4s}
@keyframes zcTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* Input */
.zc-chat-input{padding:12px 14px;border-top:1px solid var(--zc-line);display:flex;gap:8px;
  background:var(--zc-panel);flex-shrink:0}
.zc-chat-input input{flex:1;border:1.5px solid var(--zc-line);border-radius:24px;padding:11px 18px;
  font-size:.9rem;font-family:inherit;outline:none;transition:border-color .2s;background:var(--zc-input);color:var(--zc-ink)}
.zc-chat-input input::placeholder{color:var(--zc-ink-soft)}
.zc-chat-input input:focus{border-color:var(--zc-accent)}
.zc-chat-input button{width:42px;height:42px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--zc-accent2),var(--zc-accent));color:#1a1206;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}
.zc-chat-input button:hover{transform:scale(1.06)}

/* Mobiel */
@media (max-width:480px){
  .zc-chatbot{bottom:16px;right:16px}
  .zc-chat-panel{position:fixed;inset:0;width:100%;height:100%;max-height:100dvh;border-radius:0}
  .zc-chatbot.open .zc-chat-btn{display:none}
}
@media (prefers-reduced-motion:reduce){.zc-chat-btn,.zc-msg,.zc-chat-panel{animation:none;transition:none}}