/* ======================================================================
   Chat met Stefan · 29-09; 14-10 vereenvoudigd (eigenaar: "dit is te druk,
   beter appen alleen").
   Markup: _src/_chat.part, gedrag: chat.js.
   - Knop: rond en nachtblauw met Stefans gezicht erin en een klein
     chat-teken; op desktop staat er een label naast ("Vraag het Stefan").
     Open toont de knop een kruis.
   - Paneel: beige (#F4ECDF, KLEUR 29-09), dunne nachtblauwe rand. Kop met
     Stefan, zijn briefje over de merkscan en één nachtblauwe knop over de
     volle breedte: App Stefan (WhatsApp).
   - Telefoon (< 600 px): alleen de ronde knop; het paneel wordt een
     onderblad over de hele breedte min de marges.
   ====================================================================== */
.mf-chat{
  --c-size:60px;
  --c-gap:clamp(16px,2vw,28px);
  --c-right:max(var(--c-gap),calc(env(safe-area-inset-right) + 12px));
  --c-bottom:max(var(--c-gap),calc(env(safe-area-inset-bottom) + 12px));
  --c-line:rgba(22,32,48,.18);
  font-family:var(--f-body);color:var(--ink)}
/* focus blijft zichtbaar: iets dat met Tab in beeld schuift, stopt boven de knop */
html{scroll-padding-bottom:calc(60px + 2 * clamp(16px,2vw,28px))}

/* ---------- de knop: label + rond gezicht ---------- */
.mf-chat-toggle{
  position:fixed;right:var(--c-right);bottom:var(--c-bottom);z-index:46;
  display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;color:var(--ink);
  font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear 0s}
.mf-chat-toggle:focus-visible{outline:none}
/* telefoon, appknop van de hero in beeld (chat.js): de ronde knop wijkt */
.mf-chat.is-quiet .mf-chat-toggle{opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden;
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.mf-chat-toggle:focus-visible .mf-chat-disc{outline:2px solid var(--delft);outline-offset:3px}

.mf-chat-label{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 24px -14px rgba(22,32,48,.4);
  transition:opacity .25s var(--ease),transform .3s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.mf-chat-toggle:hover .mf-chat-label{background:var(--ink);color:var(--paper)}
.mf-chat.is-open .mf-chat-label{opacity:0;transform:translateX(8px);pointer-events:none}

.mf-chat-disc{
  position:relative;flex:none;display:grid;place-items:center;width:var(--c-size);height:var(--c-size);border-radius:50%;
  background:var(--ink);color:var(--paper);
  box-shadow:0 10px 26px -10px rgba(22,32,48,.45),0 2px 6px rgba(22,32,48,.12);
  transition:background-color .25s var(--ease)}
.mf-chat-me{grid-area:1/1;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;object-fit:cover;
  transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mf-chat-disc::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--paper);pointer-events:none}
.mf-chat-badge{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--paper);z-index:1;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mf-chat-badge svg{width:13px;height:13px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linejoin:round}
.mf-chat-x{grid-area:1/1;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  opacity:0;transform:rotate(-45deg) scale(.8);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mf-chat-toggle:hover .mf-chat-disc{background:var(--delft)}
.mf-chat.is-open .mf-chat-me,.mf-chat.is-open .mf-chat-badge{opacity:0;transform:scale(.8)}
.mf-chat.is-open .mf-chat-x{opacity:1;transform:none}

/* boven de nachtblauwe voet: de lichte variant, anders verdwijnt de knop in het blauw */
.mf-chat.on-ink .mf-chat-disc{background:var(--paper);color:var(--ink);box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.mf-chat.on-ink .mf-chat-disc::after{border-color:var(--delft)}
.mf-chat.on-ink .mf-chat-badge{background:var(--paper);border-color:var(--ink)}
.mf-chat.on-ink .mf-chat-badge svg{stroke:var(--ink)}
.mf-chat.on-ink .mf-chat-label{border-color:var(--paper);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.mf-chat.on-ink .mf-chat-toggle:hover .mf-chat-disc{background:var(--riviera)}
.mf-chat.on-ink .mf-chat-toggle:hover .mf-chat-label{background:var(--riviera);color:var(--ink)}
.mf-chat.on-ink .mf-chat-toggle:focus-visible .mf-chat-disc{outline-color:var(--riviera)}

/* ---------- het paneel ---------- */
.mf-chat-panel{
  position:fixed;z-index:45;right:var(--c-right);bottom:calc(var(--c-bottom) + var(--c-size) + 12px);
  width:min(412px,calc(100vw - 2 * var(--c-gap)));
  max-height:calc(100dvh - var(--c-bottom) - var(--c-size) - 12px - 88px);overflow-y:auto;overscroll-behavior:contain;
  padding:30px 30px 26px;background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 24px 60px -18px rgba(22,32,48,.32),0 4px 14px -4px rgba(22,32,48,.1);
  transform-origin:calc(100% - var(--c-size) / 2) calc(100% + 12px + var(--c-size) / 2)}
.mf-chat-panel[hidden]{display:none}
.mf-chat-panel:focus{outline:none}   /* de container krijgt focus bij openen; elke keuze heeft zijn eigen ring */

.mf-chat-head{display:flex;align-items:center;gap:18px}
.mf-chat-face{flex:none;display:block;width:72px;height:72px;padding:3px;border:1px solid rgba(47,74,122,.4);border-radius:50%}
.mf-chat-face img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mf-chat-name{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-size:2.2rem;line-height:.95;color:var(--ink)}
.mf-chat-role{margin:6px 0 0;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--delft)}
/* het briefje: de merkscan in Stefans eigen woorden */
.mf-chat-note{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--c-line)}
.mf-chat-msg{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
.mf-chat-soft{margin:10px 0 0;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}

/* één knop: App Stefan, nachtblauw over de volle breedte */
.mf-chat-wa{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:14px;
  min-height:68px;margin:22px 0 0;padding:12px 18px 12px 14px;
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.mf-chat-wa:focus-visible{outline:2px solid var(--delft);outline-offset:3px}
.mf-chat-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(244,236,223,.14)}
.mf-chat-ic svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mf-chat-ic .mf-chat-dot{stroke-width:2.2}
.mf-chat-t{display:block;font-size:1.08rem;font-weight:600;line-height:1.25}
.mf-chat-t small{display:block;margin-top:3px;font-size:.84rem;font-weight:400;line-height:1.35;color:rgba(244,236,223,.78)}
.mf-chat-go{font-size:1.1rem;transition:transform .25s var(--ease)}
.mf-chat-wa:hover{background:var(--delft);border-color:var(--delft)}
.mf-chat-wa:hover .mf-chat-go,.mf-chat-wa:focus-visible .mf-chat-go{transform:translateX(4px)}
.mf-chat-todo{display:inline-block;margin:8px 0 0;font-size:.72rem;padding:0 6px}

/* telefoon: alleen de ronde knop; paneel als onderblad */
@media(max-width:599px){
  .mf-chat{--c-size:58px;--c-gap:16px}
  .mf-chat-label{display:none}
  .mf-chat-panel{
    left:max(16px,calc(env(safe-area-inset-left) + 12px));right:var(--c-right);width:auto;
    max-height:min(85dvh,calc(100dvh - var(--c-bottom) - var(--c-size) - 12px - 16px));padding:20px 18px 18px}
  .mf-chat-face{width:56px;height:56px}
  .mf-chat-name{font-size:1.8rem}
  .mf-chat-note{margin-top:16px;padding-top:14px}
  .mf-chat-msg{font-size:.96rem;line-height:1.5}
  .mf-chat-soft{margin-top:6px}
  .mf-chat-wa{min-height:60px;margin-top:16px;padding:10px 14px 10px 10px;column-gap:12px}
}

/* 14-10 mobieltest: op tablet viel het label "Vraag het Stefan" over de eerste alinea; onder 900 px alleen de ronde knop */
@media(max-width:899px){.mf-chat-label{display:none}}

/* telefoonmenu open: de knop maakt plaats (v6.js zet html.menu-open) */
html.menu-open .mf-chat{display:none}

@media(hover:none){
  .mf-chat-wa:hover{background:var(--ink);border-color:var(--ink)}
  .mf-chat-wa:hover .mf-chat-go{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .mf-chat-toggle,.mf-chat.is-quiet .mf-chat-toggle,.mf-chat-label,.mf-chat-disc,.mf-chat-me,.mf-chat-badge,.mf-chat-x,.mf-chat-wa,.mf-chat-go{transition:none}
}
@media print{.mf-chat{display:none}}

/* 29-09 · op de contactpagina staan App Stefan, Bel Stefan en het terugbelverzoek al groot in beeld: de zwevende chatknop valt daar weg (hij viel op 1440 over "Spreek Stefan direct") */
body[data-page="contact"] .mf-chat{display:none}