/* Hostmaister AI-chatwidget — gebruikt dezelfde huisstijl-variabelen als site.css */
.hm-chat-launcher{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;display:none;align-items:center;gap:.6rem;background:var(--primary);color:#fff;border:0;border-radius:99px;padding:.9rem 1.3rem;font:600 .95rem var(--font-body);box-shadow:0 10px 28px rgba(70,50,218,.38);cursor:pointer;transition:bottom .2s var(--ease),transform .15s,box-shadow .15s}
.hm-chat-launcher:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(70,50,218,.44)}
.hm-chat-launcher .icon{width:1.3rem;height:1.3rem}
.hm-chat-launcher[data-open="true"] .hm-chat-launcher-label{display:none}
body.hm-chat-ready .hm-chat-launcher{display:inline-flex}

.hm-chat-panel{position:fixed;right:1.25rem;bottom:1.25rem;z-index:71;width:min(380px,calc(100vw - 2rem));height:min(600px,calc(100vh - 3rem));background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(27,24,64,.28);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),bottom .2s var(--ease)}
.hm-chat-panel[data-open="true"]{opacity:1;transform:none;pointer-events:auto}

.hm-chat-head{background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.75rem;flex:none}
.hm-chat-head .hm-chat-avatar{width:38px;height:38px;border-radius:11px;background:var(--primary);display:grid;place-items:center;flex:none}
.hm-chat-head .hm-chat-avatar .icon{width:20px;height:20px}
.hm-chat-head-text{flex:1;min-width:0}
.hm-chat-head-text strong{display:block;font:400 1.05rem var(--font-display)}
.hm-chat-head-text span{display:block;font-size:.78rem;color:#b9b6e0}
.hm-chat-close{background:rgba(255,255,255,.12);border:0;color:#fff;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none}
.hm-chat-close .icon{width:18px;height:18px}
.hm-chat-close:hover{background:rgba(255,255,255,.22)}

.hm-chat-body{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--soft)}
.hm-msg{max-width:85%;padding:.65rem .9rem;border-radius:14px;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.hm-msg-user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.hm-msg-bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px}
.hm-msg-error{align-self:flex-start;background:#fee4e2;color:#7a271a;border-radius:14px}
.hm-msg-typing{align-self:flex-start;display:flex;gap:.3rem;padding:.75rem 1rem;background:#fff;border:1px solid var(--border);border-radius:14px}
.hm-msg-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:hmTyping 1s infinite ease-in-out}
.hm-msg-typing i:nth-child(2){animation-delay:.15s}
.hm-msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes hmTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.hm-pkg-card{align-self:stretch;background:#fff;border:1.5px solid var(--primary-100);border-radius:14px;padding:1rem 1.1rem;font-size:.88rem}
.hm-pkg-card h4{margin:0 0 .2rem;font:400 1.15rem var(--font-display);color:var(--ink)}
.hm-pkg-card .hm-pkg-price{color:var(--primary);font-weight:700;font-size:1.05rem;margin-bottom:.4rem}
.hm-pkg-card .hm-pkg-price span{color:var(--muted);font-weight:500;font-size:.82rem}
.hm-pkg-card p{margin:0 0 .6rem;color:var(--muted)}
.hm-pkg-card ul{list-style:none;padding:0;margin:0 0 .8rem;display:grid;gap:.3rem}
.hm-pkg-card li{display:flex;gap:.4rem;align-items:flex-start;color:var(--ink)}
.hm-pkg-card li .icon{width:.9rem;height:.9rem;color:var(--ok);margin-top:.2rem;flex:none}
.hm-pkg-card .btn{width:100%;justify-content:center}

.hm-chat-action{align-self:flex-start;background:var(--accent);color:var(--ink);border:0;border-radius:10px;padding:.7rem 1.1rem;font:600 .88rem var(--font-body);cursor:pointer}
.hm-chat-action:hover{background:#ffab4d}
.hm-chat-action:disabled{opacity:.6;cursor:default}
.hm-calendly-actions{align-self:flex-start;display:flex;flex-direction:column;gap:.45rem;max-width:85%}
.hm-chat-link{font-size:.82rem;color:var(--primary);text-decoration:underline;text-underline-offset:2px}

.hm-lead-form{align-self:stretch;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:1rem 1.1rem;display:grid;gap:.6rem}
.hm-lead-form .hm-field{display:flex;flex-direction:column;gap:.25rem}
.hm-lead-form label{font-size:.78rem;font-weight:600;color:var(--ink)}
.hm-lead-form input[type=text],.hm-lead-form input[type=email],.hm-lead-form input[type=tel]{font:400 .88rem var(--font-body);border:1.5px solid #c9c5b8;border-radius:8px;padding:.55rem .65rem}
.hm-lead-form input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(70,50,218,.15)}
.hm-lead-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.78rem;color:var(--muted)}
.hm-lead-check input{width:16px;height:16px;margin-top:.1rem;accent-color:var(--primary);flex:none}
.hm-lead-form .btn{width:100%;justify-content:center}
.hm-lead-status{font-size:.8rem;margin:0}
.hm-lead-status.ok{color:var(--ok)}
.hm-lead-status.fail{color:var(--err)}

.hm-chat-foot{flex:none;border-top:1px solid var(--border);padding:.85rem;display:flex;gap:.6rem;align-items:flex-end;background:#fff}
.hm-chat-foot textarea{flex:1;resize:none;max-height:6.5rem;font:400 .92rem var(--font-body);border:1.5px solid #c9c5b8;border-radius:12px;padding:.65rem .85rem;line-height:1.4}
.hm-chat-foot textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(70,50,218,.15)}
.hm-chat-send{background:var(--primary);color:#fff;border:0;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;cursor:pointer;flex:none}
.hm-chat-send:hover{background:var(--primary-dark)}
.hm-chat-send:disabled{opacity:.5;cursor:default}
.hm-chat-send .icon{width:1.1rem;height:1.1rem}
.hm-chat-note{flex:none;padding:0 1.1rem .75rem;font-size:.7rem;color:var(--muted);text-align:center}

@media (max-width:480px){
  .hm-chat-panel{right:.75rem;left:.75rem;bottom:.75rem;width:auto;height:min(88vh,640px)}
  .hm-chat-launcher{right:.9rem;bottom:.9rem}
}