/* Zaakstudio-assistent (VK-ASSISTENT-20261103). Kleuren uit de app (studio-nieuw.css), met eigen terugval voor pagina's zonder die tokens. */
.swa-knop,.swa-paneel{--s-bg:var(--paneel,#191D26);--s-bg2:var(--paneel2,#20252F);--s-rand:var(--rand,#2A303C);--s-rand2:var(--rand2,#3A4150);--s-tekst:var(--tekst,#F4F5F7);--s-zacht:var(--zacht,#B7BCC7);--s-dim:var(--dim,#9CA3B1);--s-veld:var(--veld,#141820);--s-acc:var(--vk-limoen,#D1FF3A);--s-acc-t:var(--vk-inkt,#0F1218);--s-r:var(--vk-r,12px);--s-uit:var(--vk-uit,cubic-bezier(.16,1,.3,1));font-family:inherit}
:root[data-thema="dag"] .swa-knop,:root[data-thema="dag"] .swa-paneel{--s-acc:#0F1218;--s-acc-t:#fff}

.swa-knop{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--swa-onder,18px) + env(safe-area-inset-bottom));z-index:8300;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 13px;border:0;border-radius:999px;background:var(--s-acc);color:var(--s-acc-t);font-size:14px;font-weight:700;letter-spacing:-.005em;cursor:pointer;box-shadow:0 14px 30px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);transition:transform .25s var(--s-uit),box-shadow .25s}
.swa-knop:hover{transform:translateY(-1px)}
.swa-knop svg{width:20px;height:20px}
.swa-knop[hidden]{display:none}
.swa-stip{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#FF5B3A;box-shadow:0 0 0 2px var(--s-acc)}
.swa-knop.swa-loopt .swa-stip{animation:swaPuls 1.4s ease-in-out infinite}
@media (max-width:560px){.swa-knop span{display:none}.swa-knop{padding:0;width:50px;justify-content:center}}

.swa-paneel{position:fixed;z-index:8400;right:16px;bottom:16px;top:16px;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;background:var(--s-bg);color:var(--s-tekst);border:1px solid var(--s-rand2);border-radius:18px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);overflow:hidden;animation:swaIn .28s var(--s-uit);font-size:14.5px;line-height:1.5}
.swa-paneel[hidden]{display:none}
@media (max-width:640px){.swa-paneel{inset:0;width:auto;border-radius:0;border:0;padding-top:env(safe-area-inset-top)}}
.swa-kop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 12px 16px;border-bottom:1px solid var(--s-rand)}
.swa-titel{display:flex;align-items:center;gap:10px;min-width:0}
.swa-titel>svg{width:22px;height:22px;flex:none;color:var(--s-acc)}
:root[data-thema="dag"] .swa-titel>svg{color:#5B2BFF}
.swa-titel b{display:block;font-size:15px;font-weight:700}
.swa-titel small{display:block;color:var(--s-dim);font-size:12px}
.swa-kopknoppen{display:flex;gap:2px}
.swa-ik{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--s-zacht);cursor:pointer}
.swa-ik:hover{background:var(--s-bg2);color:var(--s-tekst)}
.swa-ik svg{width:20px;height:20px}
.swa-menu{position:absolute;right:12px;top:54px;z-index:2;display:flex;flex-direction:column;min-width:220px;padding:6px;background:var(--s-bg);border:1px solid var(--s-rand2);border-radius:12px;box-shadow:0 20px 40px -18px rgba(0,0,0,.55)}
.swa-menu[hidden]{display:none}
.swa-menu button{text-align:left;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--s-tekst);font:inherit;cursor:pointer}
.swa-menu button:hover{background:var(--s-bg2)}

.swa-lijst,.swa-logvak{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.swa-lijst[hidden],.swa-logvak[hidden]{display:none}
.swa-pad{padding:16px}
.swa-leeg p{margin:0 0 8px;color:var(--s-zacht)}
.swa-leeg p b{color:var(--s-tekst)}
.swa-voorbeelden{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
.swa-chip{padding:9px 13px;border:1px solid var(--s-rand2);border-radius:999px;background:transparent;color:var(--s-tekst);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.swa-chip:hover{background:var(--s-bg2);border-color:var(--s-dim)}

.swa-b{display:flex;flex-direction:column;gap:8px;max-width:100%}
.swa-klant{align-items:flex-end}
.swa-klant .swa-tekst{max-width:86%;padding:9px 13px;border-radius:14px 14px 4px 14px;background:var(--s-bg2);white-space:normal;overflow-wrap:anywhere}
.swa-klant small{display:block;margin-top:4px;color:var(--s-dim);font-size:12px}
.swa-ai .swa-tekst{overflow-wrap:anywhere}
.swa-ai .swa-tekst p{margin:0 0 6px}
.swa-ai .swa-tekst p:last-child{margin-bottom:0}
.swa-ai .swa-tekst ul{margin:4px 0 6px;padding-left:20px}
.swa-fout .swa-tekst{padding:9px 12px;border-radius:12px;background:rgba(255,91,58,.1);color:var(--s-tekst);border:1px solid rgba(255,91,58,.35)}
.swa-denk{flex-direction:row;align-items:center;gap:10px;color:var(--s-dim);font-size:13px}
.swa-puntjes{display:inline-flex;gap:4px}
.swa-puntjes i{width:6px;height:6px;border-radius:50%;background:var(--s-dim);animation:swaPunt 1.2s ease-in-out infinite}
.swa-puntjes i:nth-child(2){animation-delay:.15s}.swa-puntjes i:nth-child(3){animation-delay:.3s}
.swa-links{display:flex;flex-wrap:wrap;gap:8px}
.swa-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--s-rand2);border-radius:10px;background:transparent;color:var(--s-tekst);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.swa-link:hover{background:var(--s-bg2)}
.swa-link.klein{min-height:32px;padding:0 10px;font-size:13px;margin-top:6px;align-self:flex-start}
.swa-link svg{width:15px;height:15px}

.swa-plan{border:1px solid var(--s-rand2);border-radius:14px;background:var(--s-veld);overflow:hidden}
.swa-plankop{display:flex;flex-direction:column;gap:2px;padding:12px 14px 4px}
.swa-plankop b{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--s-dim)}
.swa-plankop span{font-weight:600}
.swa-plan ol{list-style:none;margin:0;padding:6px 8px}
.swa-stap{display:flex;gap:10px;padding:8px 6px;border-radius:10px}
.swa-stap+.swa-stap{border-top:1px solid var(--s-rand)}
.swa-sicoon{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--s-bg2);color:var(--s-zacht);font-size:12px;font-style:normal}
.swa-sicoon em{font-style:normal;font-weight:700}
.swa-sicoon svg{width:15px;height:15px}
.swa-klaar .swa-sicoon{background:var(--s-acc);color:var(--s-acc-t)}
.swa-fout .swa-sicoon,.swa-stap.swa-fout .swa-sicoon{background:#FF5B3A;color:#fff}
.swa-overgeslagen{opacity:.6}
.swa-sinhoud{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.swa-srij{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.swa-srij b{font-weight:600}
.swa-sinhoud>small{color:var(--s-zacht);font-size:12.5px;overflow-wrap:anywhere}
.swa-prijs{flex:none;font-size:12.5px;font-weight:700;white-space:nowrap}
.swa-prijs.gratis{color:var(--s-dim);font-weight:600}
.swa-dim{color:var(--s-dim)!important}
.swa-rood{color:#FF7A5C!important}
:root[data-thema="dag"] .swa-rood{color:#B42318!important}
.swa-balk{height:4px;margin:6px 0 2px;border-radius:4px;background:var(--s-bg2);overflow:hidden}
.swa-balk i{display:block;height:100%;background:var(--s-acc);border-radius:4px;transition:width .6s var(--s-uit)}
.swa-draai{width:14px;height:14px;border:2px solid var(--s-rand2);border-top-color:var(--s-acc);border-radius:50%;animation:swaDraai .8s linear infinite}
.swa-vinkje{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;font-weight:600;cursor:pointer}
.swa-vinkje input{width:18px;height:18px;accent-color:#FF5B3A}
.swa-beeld{display:block;margin-top:6px;max-width:160px;border-radius:10px;overflow:hidden;border:1px solid var(--s-rand)}
.swa-beeld img{display:block;width:100%;height:auto}
.swa-post{margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--s-bg2);font-size:13px}
.swa-post p{margin:0}
.swa-totaal{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 2px;border-top:1px solid var(--s-rand)}
.swa-totaal b{font-size:15px}
.swa-plan>small{display:block;padding:0 14px}
.swa-planknoppen{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 14px}
.swa-ja{flex:1 1 auto;min-height:44px;padding:0 18px;border:0;border-radius:var(--s-r);background:var(--s-acc);color:var(--s-acc-t);font:inherit;font-weight:700;cursor:pointer}
.swa-ja:disabled{opacity:.6;cursor:default}
.swa-nee{min-height:44px;padding:0 16px;border:1px solid var(--s-rand2);border-radius:var(--s-r);background:transparent;color:var(--s-tekst);font:inherit;font-weight:600;cursor:pointer}
.swa-nee:hover,.swa-ja:not(:disabled):hover{filter:brightness(1.06)}
.swa-planstand{margin:0;padding:8px 14px 12px;color:var(--s-dim);font-size:13px}

.swa-logkop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.swa-logkop .swa-link{margin:0}
.swa-log{list-style:none;margin:0;padding:0}
.swa-log li{display:grid;grid-template-columns:84px 1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid var(--s-rand);font-size:13px}
.swa-log li span{color:var(--s-dim);font-variant-numeric:tabular-nums}
.swa-log li b{white-space:nowrap;font-weight:700}

.swa-invoer{border-top:1px solid var(--s-rand);padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--s-bg)}
.swa-bijlvak{max-height:46vh;overflow:auto;margin-bottom:8px}
.swa-bijlvak[hidden]{display:none}
.swa-strip:empty{display:none}
.swa-strip{margin-bottom:6px}
.swa-rij{display:flex;align-items:flex-end;gap:6px;padding:4px;border:1px solid var(--s-rand2);border-radius:14px;background:var(--s-veld)}
.swa-rij:focus-within{border-color:var(--s-acc)}
:root .swa-paneel .swa-rij textarea:focus-visible,:root .swa-paneel .swa-rij textarea:focus{outline:none!important;box-shadow:none!important}
.swa-rij textarea{flex:1;min-height:40px;max-height:160px;padding:9px 4px;border:0;background:transparent;color:var(--s-tekst);font:inherit;font-size:15px;line-height:1.45;resize:none;outline:none}
.swa-rij textarea::placeholder{color:var(--s-dim)}
.swa-stuur{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:10px;background:var(--s-acc);color:var(--s-acc-t);cursor:pointer}
.swa-stuur svg{width:19px;height:19px}
.swa-klein{margin:6px 2px 0;color:var(--s-dim);font-size:11.5px}
.swa-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);padding:9px 14px;border-radius:10px;background:var(--s-tekst);color:var(--s-bg);font-size:13px;font-weight:600;white-space:nowrap;animation:swaIn .25s var(--s-uit)}

@keyframes swaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes swaPunt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes swaDraai{to{transform:rotate(360deg)}}
@keyframes swaPuls{50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.swa-paneel,.swa-toast,.swa-puntjes i,.swa-draai,.swa-knop.swa-loopt .swa-stip{animation:none}.swa-knop{transition:none}}
.swa-toast{left:50%}
.swa-knop:focus-visible,.swa-paneel button:focus-visible{outline:2px solid var(--s-acc);outline-offset:2px}
/* VK-SUPPORT-20261104: hulpvenster en de gedeelde knop. Het paneel zelf gebruikt de stijl van assistent.css (hierboven meegenomen). */
.vks2-knop{--s-acc:var(--vk-limoen,#D1FF3A);--s-acc-t:var(--vk-inkt,#0F1218);position:fixed;z-index:8300;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 13px;border:0;border-radius:999px;background:var(--s-acc);color:var(--s-acc-t);font:700 14px/1 "Onest",Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 14px 30px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);transition:transform .25s cubic-bezier(.16,1,.3,1)}
:root[data-thema="dag"] .vks2-knop{--s-acc:#0F1218;--s-acc-t:#fff}
.vks2-knop[hidden]{display:none}
.vks2-knop svg{width:20px;height:20px}
.vks2-knop:hover{transform:translateY(-1px)}
.vks2-knop:focus-visible{outline:2px solid var(--s-acc);outline-offset:3px}
.vks2-stip{display:none;position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#FF5B3A;box-shadow:0 0 0 2px var(--s-acc)}
.vks2-knop.vks2-nieuw .vks2-stip{display:block}
.vks-item.vks2-nieuw{position:relative}
.vks-item.vks2-nieuw::after{content:"";position:absolute;top:8px;right:14px;width:8px;height:8px;border-radius:50%;background:#FF5B3A}
@media (max-width:700px){.vks2-knop.vks2-app span{display:none}.vks2-knop.vks2-app{padding:0;width:48px;min-height:48px;justify-content:center}}
@media (max-width:420px){.vks2-knop:not(.vks2-app){padding:0 14px 0 11px;min-height:44px}}
.vks2-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--s-rand,#2A303C)}
.vks2-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--s-zacht,#B7BCC7);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.vks2-tabs button svg{width:17px;height:17px}
.vks2-tabs button[aria-selected="true"]{background:var(--s-bg2,#20252F);color:var(--s-tekst,#F4F5F7)}
.vks2-tabs button:focus-visible{outline:2px solid var(--s-acc,#D1FF3A);outline-offset:1px}
.vks2-mw .swa-tekst{padding:10px 12px;border-radius:12px;background:var(--s-bg2,#20252F);border-left:3px solid var(--s-acc,#D1FF3A)}
.vks2-label{color:var(--s-dim,#9CA3B1);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.vks2-sys{align-items:center;text-align:center}
.vks2-sys p{margin:0;padding:8px 12px;border-radius:10px;background:var(--s-bg2,#20252F);color:var(--s-zacht,#B7BCC7);font-size:13px}
.vks2-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:8px}
.vks2-mens{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--s-rand2,#3A4150);border-radius:10px;background:transparent;color:var(--s-tekst,#F4F5F7);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vks2-mens svg{width:16px;height:16px}
.vks2-contact{color:var(--s-dim,#9CA3B1);font-size:12px}
.vks2-contact a{color:inherit}
.vks2-form{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--s-rand2,#3A4150);border-radius:14px;background:var(--s-veld,#141820)}
.vks2-form p{margin:0;color:var(--s-zacht,#B7BCC7);font-size:13px}
.vks2-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.vks2-form input,.vks2-form textarea{min-height:40px;padding:8px 10px;border:1px solid var(--s-rand2,#3A4150);border-radius:10px;background:var(--s-bg,#191D26);color:var(--s-tekst,#F4F5F7);font:inherit;font-size:15px}
.vks2-form .swa-planknoppen{padding:4px 0 0}
.vks2-klein{font-size:12px!important;color:var(--s-dim,#9CA3B1)!important}
.vks2-paneel .swa-tekst a{color:inherit;text-decoration:underline}
/* op de site (zonder app-tokens): de donkere kleuren van het merk */
:root:not([data-merk]) .swa-paneel{--paneel:#191D26;--paneel2:#20252F;--rand:#2A303C;--rand2:#3A4150;--tekst:#F4F5F7;--zacht:#B7BCC7;--dim:#9CA3B1;--veld:#141820;font-family:"Onest",Inter,system-ui,sans-serif}