/* VG AI-assistent - chatvenster in de huisstijl */
#vg-ai-root{
  --vg-ai-bg:#0a0a0a;
  --vg-ai-surface:#161616;
  --vg-ai-line:#262626;
  --vg-ai-ink:#f4f4f4;
  --vg-ai-muted:#9a9a9a;
  --vg-ai-accent:#e30613;
  --vg-ai-font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:99999;
  font-family:var(--vg-ai-font);
}

#vg-ai-root *{box-sizing:border-box}

.vg-ai-launch{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  cursor:pointer;
  background:var(--vg-ai-accent);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:14px 20px;
  border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),opacity .18s;
}
.vg-ai-launch:hover{transform:translateY(-2px)}
.vg-ai-launch:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vg-ai-launch[hidden]{display:none}
.vg-ai-launch svg{width:18px;height:18px;flex:none;fill:currentColor}

.vg-ai-panel{
  width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 120px));
  display:flex;
  flex-direction:column;
  background:var(--vg-ai-bg);
  border:1px solid var(--vg-ai-line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.vg-ai-panel[hidden]{display:none}

.vg-ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--vg-ai-line);
  background:var(--vg-ai-surface);
}
.vg-ai-head h2{
  margin:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--vg-ai-ink);
}
.vg-ai-close{
  border:0;background:transparent;cursor:pointer;color:var(--vg-ai-muted);
  font-size:22px;line-height:1;padding:4px 6px;border-radius:6px;
}
.vg-ai-close:hover{color:var(--vg-ai-ink)}
.vg-ai-close:focus-visible{outline:2px solid var(--vg-ai-accent);outline-offset:2px}

.vg-ai-log{
  flex:1;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.vg-ai-msg{
  max-width:88%;
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  padding:12px 14px;
  border-radius:10px;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.vg-ai-msg a{color:var(--vg-ai-ink);text-decoration:underline;text-underline-offset:3px}
.vg-ai-bot{
  align-self:flex-start;
  background:var(--vg-ai-surface);
  border:1px solid var(--vg-ai-line);
  color:var(--vg-ai-muted);
}
.vg-ai-me{
  align-self:flex-end;
  background:var(--vg-ai-accent);
  color:#fff;
  font-weight:400;
}
.vg-ai-note{
  align-self:center;
  font-size:13px;
  color:var(--vg-ai-muted);
  text-align:center;
  max-width:100%;
}

.vg-ai-typing{display:flex;gap:5px;align-items:center;padding:14px}
.vg-ai-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--vg-ai-muted);
  animation:vg-ai-bounce 1s infinite ease-in-out;
}
.vg-ai-typing span:nth-child(2){animation-delay:.15s}
.vg-ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes vg-ai-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.vg-ai-foot{
  border-top:1px solid var(--vg-ai-line);
  background:var(--vg-ai-surface);
  padding:12px 14px;
}
.vg-ai-form{display:flex;gap:10px;align-items:flex-end}
.vg-ai-input{
  flex:1;
  resize:none;
  min-height:44px;
  max-height:120px;
  background:var(--vg-ai-bg);
  border:1px solid var(--vg-ai-line);
  border-radius:6px;
  color:var(--vg-ai-ink);
  font-family:inherit;
  font-size:15px;
  font-weight:300;
  line-height:1.5;
  padding:11px 12px;
}
.vg-ai-input::placeholder{color:#5e5e5e}
.vg-ai-input:focus{outline:2px solid var(--vg-ai-accent);outline-offset:1px;border-color:transparent}
.vg-ai-send{
  border:0;cursor:pointer;flex:none;
  width:44px;height:44px;border-radius:6px;
  background:var(--vg-ai-accent);color:#fff;
  display:grid;place-items:center;
}
.vg-ai-send:disabled{opacity:.45;cursor:not-allowed}
.vg-ai-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vg-ai-send svg{width:18px;height:18px;fill:currentColor}
.vg-ai-disclaimer{
  margin:10px 2px 0;
  font-size:12px;
  font-weight:300;
  line-height:1.4;
  color:#5e5e5e;
}

@media (max-width:480px){
  #vg-ai-root{right:12px;bottom:12px;left:12px}
  .vg-ai-panel{width:100%;height:min(76vh,560px)}
  .vg-ai-launch{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .vg-ai-launch,.vg-ai-typing span{transition:none;animation:none}
}