/* =====================================================
   Bob — chatwidget rechtsonder
   ===================================================== */
.bob{position:fixed;right:20px;bottom:20px;z-index:220;font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.bob *{box-sizing:border-box}

/* ---------- knop ---------- */
.bob-knop{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:0;border-radius:999px;background:#14161b;color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(20,22,27,.28);transition:transform .16s,box-shadow .16s,background .16s;font:inherit}
.bob-knop:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,22,27,.34)}
.bob-knop:focus-visible{outline:3px solid #F26A21;outline-offset:3px}
.bob-knop-tekst{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.bob-knop-tekst strong{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.bob-knop-tekst small{font-size:11.5px;color:#b9bcc4;font-weight:500}
.bob-knop-tekst small::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#2e9b59;margin-right:5px;vertical-align:1px;box-shadow:0 0 0 2px rgba(46,155,89,.25)}
.bob-gezicht{width:44px;height:44px;flex-shrink:0;display:block}
.bob.is-open .bob-knop{display:none}
.bob-ongelezen{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#F26A21;color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.bob-ongelezen[hidden]{display:none}

/* ---------- paneel ---------- */
.bob-paneel{position:absolute;right:0;bottom:0;width:380px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(20,22,27,.28),0 0 0 1px rgba(20,22,27,.06);overflow:hidden;transform-origin:bottom right;opacity:0;transform:scale(.9) translateY(12px);pointer-events:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.bob.is-open .bob-paneel{opacity:1;transform:none;pointer-events:auto}

.bob-kop{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:#14161b;color:#fff}
.bob-kop .bob-gezicht{width:40px;height:40px}
.bob-kop-tekst{flex:1;min-width:0;line-height:1.2}
.bob-kop-tekst strong{display:block;font-size:15px;font-weight:800}
.bob-kop-tekst span{display:block;font-size:12px;color:#b9bcc4;margin-top:2px}
.bob-sluit{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .14s}
.bob-sluit:hover{background:rgba(255,255,255,.16)}

.bob-lijst{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:8px;background:#f7f6f3;scroll-behavior:smooth}
.bob-rij{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.bob-rij--bob{align-self:flex-start}
.bob-rij--klant{align-self:flex-end;flex-direction:row-reverse}
.bob-rij .bob-gezicht{width:26px;height:26px;flex-shrink:0;margin-bottom:2px}
.bob-bel{padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.bob-rij--bob .bob-bel{background:#fff;color:#14161b;border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(20,22,27,.06)}
.bob-rij--klant .bob-bel{background:#F26A21;color:#fff;border-bottom-right-radius:5px}
.bob-bel a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bob-tijd{font-size:11px;color:#9a9a9f;margin:-2px 0 2px 34px}
.bob-rij--klant + .bob-tijd{text-align:right;margin-left:0;margin-right:2px}
.bob-fout{align-self:center;font-size:12.5px;color:#b04a4a;background:#fff2f0;border:1px solid #f5d2cc;padding:8px 12px;border-radius:10px;text-align:center}

/* typindicator */
.bob-typt{display:inline-flex;gap:4px;padding:13px 14px}
.bob-typt i{width:7px;height:7px;border-radius:50%;background:#b9bcc4;animation:bobtyp 1.1s infinite}
.bob-typt i:nth-child(2){animation-delay:.15s}
.bob-typt i:nth-child(3){animation-delay:.3s}
@keyframes bobtyp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* snelle keuzes */
.bob-keuzes{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:#f7f6f3}
.bob-keuzes button{font:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1.5px solid #e2dfd8;background:#fff;color:#14161b;cursor:pointer;transition:border-color .14s,background .14s}
.bob-keuzes button:hover{border-color:#F26A21;color:#F26A21}

/* invoer */
.bob-invoer{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 14px;border-top:1px solid #ece8e1;background:#fff}
.bob-invoer textarea{flex:1;resize:none;border:0;outline:0;font:inherit;font-size:14px;line-height:1.45;padding:9px 0;max-height:110px;color:#14161b;background:transparent}
.bob-invoer textarea::placeholder{color:#9a9a9f}
.bob-stuur{width:40px;height:40px;flex-shrink:0;border:0;border-radius:12px;background:#F26A21;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .14s,transform .12s}
.bob-stuur:hover{background:#d95d1a}
.bob-stuur:disabled{background:#e2dfd8;cursor:default;transform:none}
.bob-voet{font-size:11px;color:#9a9a9f;text-align:center;padding:0 12px 9px;background:#fff}
.bob-voet a{color:inherit;text-decoration:underline}

/* cookiebalk staat even in de weg op smalle schermen */
@media (max-width:1180px){.fc-cookie.is-in ~ .bob:not(.is-open){bottom:150px}}
@media (max-width:640px){
  .bob{right:12px;bottom:12px}
  .bob-knop{padding:6px 14px 6px 6px}
  .bob-gezicht{width:40px;height:40px}
  .bob.is-open{right:0;bottom:0;left:0;top:0}
  .bob-paneel{width:100%;max-width:none;height:100%;max-height:none;border-radius:0}
}
@media (prefers-reduced-motion:reduce){.bob-paneel,.bob-knop{transition:none}.bob-typt i{animation:none}}