/* ---------- Altilia AI: zwevende knop en gespreksvenster ---------- */
.ai-knop{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:.55rem;background:var(--inkt);color:#fff;font-weight:600;font-size:.92rem;border-radius:var(--r-pill);padding:.8rem 1.15rem .8rem .9rem;box-shadow:0 12px 30px -12px rgba(25,28,24,.55);transition:transform .2s var(--ease),background .2s}
.ai-knop:hover{transform:translateY(-2px);background:#2c302b}
.ai-knop .ic{width:22px;height:22px;color:var(--sage)}
.ai-paneel{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:61;width:min(420px,calc(100vw - 32px));height:min(640px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--canvas);border-radius:24px;box-shadow:0 0 0 1px var(--lijn),0 30px 70px -24px rgba(25,28,24,.5);overflow:hidden;animation:ai-in .25s var(--ease)}
@keyframes ai-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ai-kop{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--inkt);color:#fff}
.ai-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--sage);flex:none}
.ai-logo .ic{width:22px;height:22px}
.ai-kop div{display:grid;flex:1;line-height:1.25}
.ai-kop b{color:#fff;font-size:1rem}
.ai-kop span{font-size:var(--fs-xs);color:rgba(255,255,255,.7)}
.ai-sluit{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ai-sluit:hover{background:rgba(255,255,255,.12)}
.ai-sluit .ic{width:20px;height:20px}
.ai-gesprek{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;overscroll-behavior:contain}
.ai-bericht{max-width:92%;border-radius:18px;padding:.75rem .95rem;font-size:.94rem;line-height:1.55;display:grid;gap:.5rem}
.ai-bericht p,.ai-bericht ul{margin:0}
.ai-bericht ul{padding-left:1.1rem;display:grid;gap:.25rem}
.ai-altilia{align-self:flex-start;background:var(--paper);box-shadow:var(--schaduw-kaart);border-bottom-left-radius:6px;color:var(--tekst)}
.ai-bezoeker{align-self:flex-end;background:var(--actie-vlak);color:#fff;border-bottom-right-radius:6px}
.ai-fout{background:var(--blauw-zacht);box-shadow:none}
.ai-voorbeelden{display:flex;flex-wrap:wrap;gap:.45rem}
.ai-voorbeelden button{font-size:var(--fs-sm);color:var(--sage-diep);background:var(--veld);border-radius:var(--r-pill);padding:.45rem .85rem;text-align:left}
.ai-voorbeelden button:hover{background:var(--veld-2)}
.ai-bronnen{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;border-top:1px solid var(--lijn);padding-top:.55rem;margin-top:.1rem}
.ai-bronnen span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ai-bronnen a{font-size:var(--fs-sm);color:var(--sage-diep);text-decoration:underline;text-underline-offset:2px}
.ai-offerte{justify-self:start;padding:.7rem 1.1rem;font-size:.88rem}
.ai-denkt{display:flex;align-items:center;gap:.3rem;color:var(--muted);font-size:var(--fs-sm)}
.ai-denkt span{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:ai-stip 1s infinite ease-in-out}
.ai-denkt span:nth-child(2){animation-delay:.15s}.ai-denkt span:nth-child(3){animation-delay:.3s;margin-right:.35rem}
@keyframes ai-stip{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:none}}
.ai-invoer{display:flex;gap:.5rem;align-items:flex-end;padding:.75rem;border-top:1px solid var(--lijn);background:var(--paper)}
.ai-invoer textarea{flex:1;resize:none;border:0;background:var(--canvas);border-radius:16px;padding:.7rem .9rem;font:inherit;font-size:.95rem;color:var(--inkt);max-height:140px;line-height:1.45}
.ai-invoer textarea:focus{outline:2px solid var(--actie);outline-offset:0}
.ai-verstuur{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--actie-vlak);color:#fff;flex:none}
.ai-verstuur:hover{background:var(--actie-vlak-hover)}
.ai-verstuur .ic{width:20px;height:20px}
.ai-klein{margin:0;padding:.45rem 1rem .7rem;background:var(--paper);font-size:.74rem;color:var(--muted);line-height:1.4}
.ai-klein a{text-decoration:underline}
@media (max-width:560px){
  .ai-knop span{display:none}
  .ai-knop{padding:.85rem}
  .ai-paneel{right:0;bottom:0;width:100vw;height:calc(100dvh - env(safe-area-inset-top));border-radius:22px 22px 0 0}
}
@media (prefers-reduced-motion:reduce){.ai-paneel{animation:none}.ai-denkt span{animation:none}}