/* Websitechat met Noa NL (04-11-2026). Kleuren via de variabelen van style.css, dus licht en donker thema werken vanzelf. */
.noa-btn{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:.5rem;padding:.8rem 1.15rem;border:0;border-radius:999px;background:var(--ai,#1F5C4A);color:var(--on-ink,#F4F1EA);font:600 .95rem var(--font-body,system-ui);box-shadow:0 8px 24px rgba(20,32,27,.22);cursor:pointer}
.noa-btn:hover{filter:brightness(1.08)}
.noa-btn svg{width:20px;height:20px}
.noa-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--human,#D93A24);color:#fff;font:700 .72rem/20px var(--font-body,system-ui);font-style:normal;text-align:center}
.noa-panel{position:fixed;right:20px;bottom:84px;z-index:61;width:min(390px,calc(100vw - 24px));height:min(580px,calc(100vh - 110px));display:none;flex-direction:column;background:var(--surface,#FBF9F4);color:var(--ink,#14201B);border:1px solid var(--line,rgba(20,32,27,.12));border-radius:18px;box-shadow:0 18px 48px rgba(20,32,27,.25);overflow:hidden;font-family:var(--font-body,system-ui)}
.noa-panel.open{display:flex}
.noa-head{display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem;background:var(--ai,#1F5C4A);color:var(--on-ink,#F4F1EA);transition:background .3s}
.noa-panel.mens .noa-head{background:var(--human,#D93A24)}
.noa-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-weight:700;font-size:.95rem}
.noa-hd b{display:block;font-size:1rem;line-height:1.2}.noa-hd small{opacity:.9;font-size:.78rem}
.noa-x{margin-left:auto;background:none;border:0;color:var(--on-ink,#F4F1EA);font-size:1.5rem;line-height:1;cursor:pointer;padding:.2rem .4rem}
.noa-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.noa-m{max-width:85%;padding:.6rem .85rem;border-radius:14px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.noa-m.bot{align-self:flex-start;background:var(--surface-2,#ECE7DC);border-bottom-left-radius:4px}
.noa-m.mens{align-self:flex-start;background:var(--human-soft,rgba(217,58,36,.10));border:1px solid var(--human-soft,rgba(217,58,36,.18));border-bottom-left-radius:4px}
.noa-wie{display:block;font-size:.72rem;font-weight:700;color:var(--human,#D93A24);margin-bottom:.15rem}
.noa-m.me{align-self:flex-end;background:var(--ai,#1F5C4A);color:var(--on-ink,#F4F1EA);border-bottom-right-radius:4px}
.noa-m.typ{color:var(--muted,#59635E)}
.noa-note{align-self:center;text-align:center;font-size:.78rem;color:var(--muted,#59635E);padding:.15rem .7rem}
.noa-note.ok{color:var(--ai,#1F5C4A);background:var(--ai-soft,rgba(31,92,74,.1));border-radius:999px;padding:.3rem .7rem}
.noa-bar{margin:0 .8rem .4rem;padding:.5rem .75rem;border-radius:10px;background:var(--human-soft,rgba(217,58,36,.10));color:var(--ink,#14201B);font-size:.82rem;display:flex;align-items:center;gap:.5rem}
.noa-bar::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--human,#D93A24);border-right-color:transparent;animation:noa-draai 1s linear infinite}
@keyframes noa-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.noa-bar::before{animation:none}}
.noa-chips{display:flex;justify-content:flex-start;padding:0 .8rem}
.noa-chip{border:1px solid var(--line,rgba(20,32,27,.18));background:var(--bg,#F4F1EA);color:var(--ink,#14201B);border-radius:999px;padding:.35rem .8rem;font:500 .8rem var(--font-body,system-ui);cursor:pointer;margin-bottom:.45rem}
.noa-chip:hover{border-color:var(--human,#D93A24);color:var(--human,#D93A24)}
.noa-opnieuw{align-self:center;margin-top:.3rem}
.noa-form{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line,rgba(20,32,27,.12))}
.noa-form[hidden]{display:none}
.noa-form textarea{flex:1;resize:none;border:1px solid var(--line,rgba(20,32,27,.18));border-radius:12px;padding:.6rem .75rem;font:inherit;font-size:.93rem;background:var(--bg,#F4F1EA);color:var(--ink,#14201B);caret-color:var(--ink,#14201B);max-height:110px}
.noa-form textarea::placeholder{color:var(--muted,#59635E);opacity:1}
.noa-form button{border:0;border-radius:12px;background:var(--ai,#1F5C4A);color:var(--on-ink,#F4F1EA);padding:0 1rem;font:600 .9rem var(--font-body,system-ui);cursor:pointer}
.noa-form button:disabled{opacity:.5;cursor:default}
.noa-foot{font-size:.72rem;color:var(--muted,#59635E);text-align:center;padding:0 .8rem .6rem;line-height:1.4}
.noa-end{background:none;border:0;padding:0;margin-left:.3rem;color:var(--human,#D93A24);font:600 .72rem var(--font-body,system-ui);text-decoration:underline;cursor:pointer}
.noa-hp{position:absolute;left:-9999px}
[hidden]{display:none!important}
@media (max-width:520px){.noa-panel{right:12px;left:12px;width:auto;bottom:80px}.noa-btn{right:12px;bottom:12px}}
@media print{.noa-btn,.noa-panel{display:none!important}}
.noa-m a{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}