/* AFGELEID BESTAND - NIET MET DE HAND WIJZIGEN.
   De opmaak van de verkoopchat, afgeleid uit madvance-liquid-glass.html door
   dev-test/chatkopie-test.cjs. Wijzig de chat in het WERKBESTAND en draai
   daarna `node dev-test/chatkopie-test.cjs --zet`. */
#mad-chat-fab, #mad-chat-teaser, #mad-chat-paneel {
  --coral: #FF536C; --coral-rgb: 255, 83, 108; --coral-tx: var(--coral);
  --crimson: #F2135E; --navy: #1A2530; --dark2: #394B5B; --dark3: #22303D;
  --teal: #9FD6DB; --teal-tx: var(--teal); --cyan: #C2F8FF;
  --ink: 255, 255, 255; --shade: 0, 0, 0;
  --ka: 1; --kb: 1; --ks: 1; --kt: 1;
  --sans: 'Barlow', system-ui, sans-serif;
  --serif: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 16px; line-height: normal;
}
html.mad-rondleiding #main-nav, html.mad-rondleiding #mad-chat-fab, html.mad-rondleiding #mad-chat-paneel, html.mad-rondleiding #mad-chat-teaser{ display: none !important; }
@media(max-width: 1000px){
#page-rondleiding.active ~ #mad-chat-fab, body.rl-pagina #mad-chat-fab{ padding: 12px; }
#page-rondleiding.active ~ #mad-chat-fab span:not(.mc-stip), body.rl-pagina #mad-chat-fab span:not(.mc-stip){ display: none; }
}
#mad-chat-fab{
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9990;
      display: none;
      align-items: center;
      gap: 10px;
      padding: 13px 20px 13px 16px;
      border-radius: 100px;
      border: 1px solid rgba(255, 83, 108, 0.35);
      background: rgba(34, 48, 61, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 10px 34px rgba(var(--shade), calc(0.42 * var(--ks)));
      color: var(--offwhite);
      font-family: var(--sans);
      font-size: 14.5px;
      font-weight: 500;
      cursor: pointer;
      transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), border-color .22s, background .22s;
    }
#mad-chat-fab.aan{ display: flex; }
#mad-chat-fab:hover{ transform: translateY(-2px); border-color: var(--coral); background: rgba(47, 64, 80, 0.96); }
#mad-chat-fab:focus-visible{ outline: 2px solid var(--coral); outline-offset: 3px; }
#mad-chat-fab svg{ flex: none; stroke: var(--coral); }
#mad-chat-fab .mc-stip{
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--teal); flex: none;
    }
#mad-chat-teaser{
      position: fixed;
      right: 24px;
      bottom: 84px;
      z-index: 9990;
      display: none;
      align-items: flex-start;
      gap: 8px;
      max-width: 270px;
      padding: 13px 12px 13px 16px;
      border-radius: 16px 16px 4px 16px;
      border: 1px solid rgba(var(--ink), calc(0.09 * var(--ka)));
      background: rgba(26, 37, 48, 0.985);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 12px 38px rgba(var(--shade), calc(0.5 * var(--ks)));
      color: var(--offwhite);
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.45;
      cursor: pointer;
      animation: mcTeaser .3s cubic-bezier(.34, 1.3, .64, 1) both;
    }
#mad-chat-teaser.aan{ display: flex; }
.mc-teaser-x{
      flex: none;
      width: 22px; height: 22px;
      margin: -2px -4px 0 0;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: 6px;
      background: transparent;
      color: rgba(var(--ink), calc(0.45 * var(--kt)));
      cursor: pointer;
    }
.mc-teaser-x:hover{ background: rgba(var(--ink), calc(0.08 * var(--kb))); color: var(--offwhite); }
.mc-teaser-x:focus-visible{ outline: 2px solid var(--coral); outline-offset: 1px; }
@media(prefers-reduced-motion: reduce){
#mad-chat-teaser{ animation: none; }
}
#mad-chat-paneel{
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9991;
      width: 384px;
      max-width: calc(100vw - 32px);
      height: 560px;
      max-height: calc(100vh - 48px);
      display: none;
      flex-direction: column;
      border-radius: 20px;
      border: 1px solid rgba(var(--ink), calc(0.09 * var(--ka)));
      background: rgba(26, 37, 48, 0.985);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow: 0 24px 70px rgba(var(--shade), calc(0.55 * var(--ks)));
      
      overflow: clip;
      overflow: hidden;
    }
#mad-chat-paneel.aan{
      display: flex;
      animation: mcOpen .26s cubic-bezier(.34, 1.28, .64, 1) both;
    }
.mc-kop{
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 15px 14px 15px 18px;
      border-bottom: 1px solid rgba(var(--ink), calc(0.07 * var(--ka)));
      flex: none;
    }
.mc-kop-tekst{ flex: 1; min-width: 0; }
.mc-kop-titel{
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 600;
      color: var(--offwhite);
      line-height: 1.15;
    }
.mc-kop-sub{
      font-size: 12px;
      color: rgba(var(--ink), calc(0.45 * var(--kt)));
      margin-top: 1px;
    }
.mc-kop-sub b{ color: var(--teal); font-weight: 500; }
.mc-sluit{
      flex: none;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: 10px;
      background: transparent;
      color: rgba(var(--ink), calc(0.5 * var(--kt)));
      cursor: pointer;
      transition: background .18s, color .18s;
    }
.mc-sluit:hover{ background: rgba(var(--ink), calc(0.07 * var(--kb))); color: var(--offwhite); }
.mc-sluit:focus-visible{ outline: 2px solid var(--coral); outline-offset: 1px; }
.mc-log{
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 16px 18px 6px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
.mc-bubbel{
      max-width: 88%;
      padding: 11px 14px;
      border-radius: 15px;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--offwhite);
      white-space: pre-wrap;
      word-break: break-word;
    }
.mc-bubbel.van-ons{
      align-self: flex-start;
      background: rgba(var(--ink), calc(0.055 * var(--kb)));
      border: 1px solid rgba(var(--ink), calc(0.06 * var(--ka)));
      border-bottom-left-radius: 5px;
    }
.mc-bubbel.van-jou{
      align-self: flex-end;
      background: rgba(255, 83, 108, 0.16);
      border: 1px solid rgba(255, 83, 108, 0.24);
      border-bottom-right-radius: 5px;
    }
.mc-bubbel.fout{
      align-self: flex-start;
      background: rgba(255, 83, 108, 0.1);
      border: 1px solid rgba(255, 83, 108, 0.22);
      color: rgba(var(--ink), calc(0.9 * var(--kt)));
    }
.mc-typt{ align-self: flex-start; display: flex; gap: 4px; padding: 13px 15px; }
.mc-typt i{
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(var(--ink), calc(0.42 * var(--kt)));
      animation: mcTyp 1.25s infinite ease-in-out;
    }
.mc-typt i:nth-child(2){ animation-delay: .16s; }
.mc-typt i:nth-child(3){ animation-delay: .32s; }
.mc-actie{
      align-self: flex-start;
      margin-top: -3px;
      padding: 10px 17px;
      border-radius: 100px;
      border: none;
      background: var(--coral);
      color: var(--white);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background .18s, transform .18s;
    }
.mc-actie:hover{ background: var(--crimson); transform: translateY(-1px); }
.mc-actie:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.mc-lead{
      align-self: stretch;
      padding: 14px;
      border-radius: 14px;
      background: rgba(159, 214, 219, 0.07);
      border: 1px solid rgba(159, 214, 219, 0.2);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
.mc-lead input[type="email"]{
      width: 100%;
      padding: 11px 13px;
      border-radius: 10px;
      border: 1px solid rgba(var(--ink), calc(0.12 * var(--ka)));
      background: rgba(var(--shade), calc(0.22 * var(--ks)));
      color: var(--offwhite);
      font-family: var(--sans);
      font-size: 14.5px;
    }
.mc-lead input[type="email"]:focus{ outline: none; border-color: var(--teal); }
.mc-lead-vink{
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: 12.5px;
      line-height: 1.45;
      color: rgba(var(--ink), calc(0.6 * var(--kt)));
      cursor: pointer;
    }
.mc-lead-vink input{ margin-top: 2px; accent-color: var(--teal); flex: none; }
.mc-lead-knop{
      padding: 10px 16px;
      border-radius: 100px;
      border: none;
      background: var(--coral);
      color: var(--white);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      align-self: flex-start;
    }
.mc-lead-knop:hover{ background: var(--crimson); }
.mc-lead-knop:disabled{ opacity: .55; cursor: default; }
.mc-chips{
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      padding: 8px 18px 0;
      flex: none;
    }
.mc-chip{
      padding: 8px 13px;
      border-radius: 100px;
      border: 1px solid rgba(194, 248, 255, 0.22);
      background: rgba(194, 248, 255, 0.06);
      color: var(--cyan);
      font-family: var(--sans);
      font-size: 13px;
      cursor: pointer;
      transition: background .18s, border-color .18s;
    }
.mc-chip:hover{ background: rgba(194, 248, 255, 0.13); border-color: rgba(194, 248, 255, 0.4); }
.mc-chip:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.mc-voet{
      flex: none;
      padding: 12px 14px 14px;
      border-top: 1px solid rgba(var(--ink), calc(0.07 * var(--ka)));
      display: flex;
      align-items: flex-end;
      gap: 9px;
    }
.mc-invoer{
      flex: 1;
      min-height: 42px;
      max-height: 110px;
      padding: 11px 14px;
      border-radius: 13px;
      border: 1px solid rgba(var(--ink), calc(0.11 * var(--ka)));
      background: rgba(var(--shade), calc(0.22 * var(--ks)));
      color: var(--offwhite);
      font-family: var(--sans);
      font-size: 14.5px;
      line-height: 1.45;
      resize: none;
    }
.mc-invoer:focus{ outline: none; border-color: rgba(255, 83, 108, 0.5); }
.mc-invoer::placeholder{ color: rgba(var(--ink), calc(0.32 * var(--kt))); }
.mc-stuur{
      flex: none;
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: 13px;
      background: var(--coral);
      color: var(--white);
      cursor: pointer;
      transition: background .18s;
    }
.mc-stuur:hover{ background: var(--crimson); }
.mc-stuur:disabled{ opacity: .45; cursor: default; }
.mc-stuur:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.mc-klein{
      padding: 0 18px 10px;
      font-size: 11.5px;
      line-height: 1.4;
      color: rgba(var(--ink), calc(0.33 * var(--kt)));
      flex: none;
    }
.mc-klein a{ color: rgba(var(--ink), calc(0.5 * var(--kt))); }
#mad-chat-ts{ padding: 0 18px; flex: none; }
#mad-chat-ts:not(:empty){ padding-bottom: 8px; }
@media(max-width: 640px){
#mad-chat-fab{
        right: 16px;
        bottom: 16px;
        padding: 12px 16px 12px 14px;
        font-size: 14px;
      }
#mad-chat-teaser{
        right: 16px;
        bottom: 74px;
        max-width: calc(100vw - 32px);
      }
#mad-chat-paneel{
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: 88vh;
        height: 88dvh;
        max-height: none;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom);
      }
}
@media(prefers-reduced-motion: reduce){
#mad-chat-paneel.aan{ animation: none; }
.mc-typt i{ animation: none; opacity: .55; }
#mad-chat-fab:hover{ transform: none; }
}