/* Houten Wandplank: the chat block with Stef (praat.js, 2026-10-25). Bottom right, warm, big enough for every hand. */
.praat{--praat-onder:0px;position:fixed;right:16px;bottom:calc(16px + var(--praat-onder) + env(safe-area-inset-bottom));z-index:55;font-family:Inter,system-ui,sans-serif;transition:opacity .25s,transform .25s}
.praat.wijk{opacity:0;pointer-events:none}   /* a button under the bubble: fade only, no shift, so the overlap check stays steady */
.praat.wacht{opacity:0;transform:translateY(12px);pointer-events:none}
.hb-open .praat,.menu-open .praat,html.sheet-open .praat{display:none}
.praat-bol{display:flex;align-items:center;gap:10px;min-height:60px;padding:6px 18px 6px 6px;border:0;border-radius:999px;background:#fff;color:#1d1b18;font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 28px -8px rgba(30,22,14,.35),0 0 0 1px rgba(0,0,0,.06)}
.praat-bol:hover{box-shadow:0 10px 30px -8px rgba(30,22,14,.45),0 0 0 1px rgba(0,0,0,.1)}
.praat-bol:focus-visible,.praat-x:focus-visible,.praat-snel button:focus-visible,.praat-knop:focus-visible,.praat-stuur:focus-visible,.praat-nog:focus-visible{outline:3px solid #1d1b18;outline-offset:2px}
.praat.open .praat-bol{display:none}
.praat-foto{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.praat-s{position:relative;overflow:hidden;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(rgba(242,226,200,.55),rgba(214,180,136,.35)),url(img/kleuren/pure.webp) center/140px;box-shadow:inset 0 0 0 1px rgba(122,82,48,.22),inset 0 -3px 6px rgba(90,58,30,.14)}
.praat-s b{font:400 15px/1 'Homemade Apple',cursive;color:#4a2f1a;transform:rotate(-8deg) translate(1px,2px);white-space:nowrap;letter-spacing:-.02em}
.praat-foto.groot.praat-s b{font-size:17px}
.praat-foto.groot{width:56px;height:56px;font-size:24px}
.praat-paneel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 110px - var(--praat-onder)));display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -18px rgba(30,22,14,.45),0 0 0 1px rgba(0,0,0,.06)}
.praat-paneel[hidden]{display:none}
.praat-kop{display:flex;align-items:center;gap:14px;padding:18px 12px 16px 18px;border-bottom:1px solid #eee9e1}
.praat-kop h2{margin:0;font-family:Inter,system-ui,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.praat-kop p{margin:2px 0 0;font-size:16px;color:#6f6a62}
.praat-kop>div{flex:1;min-width:0}
.praat-x{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:none;font-size:30px;line-height:1;color:#6f6a62;cursor:pointer;align-self:flex-start}
.praat-x:hover{background:#f6f5f2}
.praat-in{overflow:auto;padding:14px 18px 18px;display:grid;gap:14px;overscroll-behavior:contain}
.praat-log{display:grid;gap:8px}
.praat-log:empty{display:none}
.praat-b{max-width:88%;padding:11px 14px;border-radius:16px;font-size:16px;line-height:1.45}
.praat-b.jij{justify-self:end;background:#1d1b18;color:#fff;border-bottom-right-radius:6px}
.praat-b.stef{justify-self:start;background:#f4efe7;color:#1d1b18;border-bottom-left-radius:6px}
.praat-b a{color:#1d1b18;font-weight:600}
.praat-snel{display:flex;flex-wrap:wrap;gap:8px}
.praat-snel button{min-height:46px;padding:10px 14px;border:0;border-radius:999px;background:#fff;color:#1d1b18;font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;box-shadow:inset 0 0 0 1.5px #d9d3c9;text-align:left}
.praat-snel button:hover{box-shadow:inset 0 0 0 1.5px #1d1b18}
.praat-snel button:disabled{opacity:.5;cursor:default}
.praat-bel{display:grid;gap:8px}
.praat-knop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;font-size:17px;font-weight:600;text-decoration:none;color:#fff}
.praat-knop svg{width:22px;height:22px}
.praat-knop.bel{background:#1d1b18}
.praat-knop.wa{background:#1f7a45}
.praat-uren{margin:0;text-align:center;font-size:14.5px;color:#6f6a62}
.praat-form{display:grid;gap:6px;padding-top:12px;border-top:1px solid #eee9e1}
.praat-form[hidden]{display:none}
.praat-t{margin:0 0 4px;font-size:16px;font-weight:600}
.praat-form label{font-size:15.5px;font-weight:500;color:#1d1b18;margin-top:4px}
.praat-form input,.praat-form textarea{width:100%;font:inherit;font-size:17px;min-height:50px;padding:12px 14px;border-radius:12px;border:0;background:#fff;color:#1d1b18;box-shadow:inset 0 0 0 1.5px #cfc9bf;-webkit-appearance:none;appearance:none}
.praat-form textarea{min-height:92px;resize:vertical;line-height:1.45}
.praat-form input:focus,.praat-form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px #1d1b18}
.praat-form [aria-invalid=true]{box-shadow:inset 0 0 0 2px #b3261e}
.praat-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.praat-fout{margin:2px 0 0;color:#a3241b;font-size:15px;font-weight:500}
.praat-fout:empty{display:none}
.praat-stuur,.praat-nog{min-height:54px;margin-top:8px;border:0;border-radius:14px;background:#1d1b18;color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.praat-stuur:disabled{opacity:.6}
.praat-nog{background:#fff;color:#1d1b18;box-shadow:inset 0 0 0 1.5px #d9d3c9}
@media (max-width:760px){
  .praat{right:12px;bottom:calc(12px + var(--praat-onder) + env(safe-area-inset-bottom))}
  .praat-bol{min-height:56px;font-size:15.5px;padding-right:16px}
  .praat-foto{width:44px;height:44px}
  .praat.open{left:0;right:0;bottom:0}
  .praat.open .praat-paneel{position:fixed;left:0;right:0;bottom:0;width:100%;max-height:calc(100dvh - 40px);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  html.praat-open{overflow:hidden}
}
.praat-label{transition:opacity .2s}
@media (max-width:760px){
  .praat.klein .praat-bol{padding:6px;gap:0}
  .praat.klein .praat-label{width:0;opacity:0;overflow:hidden;white-space:nowrap}
}