/* ══════════════════════════════════════════════════════════════════════════
   Het chatvenster

   Wattje staat rechtsonder op elke pagina: een knop die het venster opent, en
   het venster zelf. De maten en kleuren staan niet hier maar in
   tokens-onderdelen.css onder "Chatvenster", zodat een andere breedte of een
   andere kleur op één plek verandert.

   De opbouw van boven naar beneden:

     .mw-chat-knop      de ronde knop rechtsonder
     .mw-chat           het venster
       .mw-chat-kop     naam, avatar en de sluitknop
       .mw-chat-log     de berichten
       .mw-chat-plan    het afsprakenformulier, alleen als erom gevraagd is
       .mw-chat-invoer  het tekstveld en de verstuurknop

   Het venster is geen modal: je kunt de pagina eronder blijven lezen en
   bedienen. Daarom staat er geen overlay overheen op desktop. Op een klein
   scherm neemt het venster het hele scherm, en dan is het wel een modal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── De knop ────────────────────────────────────────────────────────────── */

.mw-chat-knop {
  position: fixed;
  right: var(--g);
  bottom: var(--g);
  z-index: 90;
  width: var(--mw-chat-knop-maat);
  height: var(--mw-chat-knop-maat);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mw-chat-knop-straal);
  background: var(--mw-chat-knop-vlak);
  color: var(--mw-chat-knop-tekst);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--mw-schaduw-1);
  transition: background var(--mw-duur-snel) var(--mw-easing),
              transform var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-knop:hover  { background: var(--mw-chat-knop-hover); transform: translateY(-2px); }
.mw-chat-knop:active { transform: translateY(0); }
.mw-chat-knop svg    { width: var(--mw-chat-knop-icoon); height: var(--mw-chat-knop-icoon); }
.mw-chat-knop[hidden] { display: none; }

/* De avatar uit Instellingen, als die er is. Dan geen icoon maar het gezicht.
   De foto ligt over de hele knop en wordt door de knop zelf rond geknipt. Als
   flexkind bleef hij een paar pixels kleiner dan de knop, en dan zag je het
   groene vlak eromheen als een rand: een foto in een rondje in plaats van een
   rond portret. Daarom absoluut en niet als flexkind. */
.mw-chat-knop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── De aanspreekbel ─────────────────────────────────────────────────────
   Wie de helft van de pagina heeft gescrold, is aan het lezen. Dan komt er één
   keer een klein wolkje naast de knop met de vraag of er iets te vragen valt.
   Daarna niet meer: dit hoort een uitnodiging te zijn en geen achtervolging. */

.mw-chat-tip {
  position: fixed;
  right: calc(var(--g) + var(--mw-chat-knop-maat) + var(--mw-ruimte-4));
  bottom: calc(var(--g) + var(--mw-ruimte-3));
  z-index: 89;
  width: var(--mw-chat-tip-breedte);
  display: flex;
  align-items: flex-start;
  gap: var(--mw-ruimte-3);
  padding: var(--mw-ruimte-5) var(--mw-ruimte-6);
  background: var(--mw-chat-tip-vlak);
  color: var(--mw-chat-tip-tekst);
  border: var(--mw-rand-dikte) solid var(--mw-chat-rand);
  border-radius: var(--mw-straal-kaart);
  box-shadow: var(--mw-schaduw-1);
  font-size: var(--mw-klein);
  line-height: var(--mw-regel);
  text-align: left;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--mw-duur) var(--mw-easing),
              transform var(--mw-duur) var(--mw-easing);
}

.mw-chat-tip[hidden] { display: none; }
.mw-chat-tip[data-open] { opacity: 1; transform: translateX(0); }

/* Het puntje dat naar de knop wijst. */
.mw-chat-tip::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: 18px;
  width: 9px;
  height: 9px;
  background: var(--mw-chat-tip-vlak);
  border-right: var(--mw-rand-dikte) solid var(--mw-chat-rand);
  border-bottom: var(--mw-rand-dikte) solid var(--mw-chat-rand);
  transform: rotate(-45deg);
}

.mw-chat-tip-tekst {
  flex: 1;
  border: 0;
  padding: var(--mw-ruimte-0);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mw-chat-tip-tekst strong { font-weight: var(--mw-gewicht-titel); }

.mw-chat-tip-weg {
  /* 44 pixels om te raken, met negatieve marge zodat het wolkje compact blijft. */
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: calc(var(--mw-ruimte-5) * -1) calc(var(--mw-ruimte-6) * -1) calc(var(--mw-ruimte-5) * -1) calc(var(--mw-ruimte-3) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mw-chat-knop-straal);
  background: none;
  color: var(--mw-grijs-zacht);
  cursor: pointer;
}

.mw-chat-tip-weg:hover { background: var(--mw-vlak-hover); color: var(--mw-donkergroen); }
.mw-chat-tip-weg:focus-visible,
.mw-chat-tip-tekst:focus-visible { outline: 2px solid var(--mw-veld-rand-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mw-chat-tip { transition: none; transform: none; }
}
.mw-chat-tip-weg svg { width: 12px; height: 12px; }

/* Naast de knop is op een telefoon geen ruimte: daar staat hij erboven. */
@media (max-width: 600px) {
  .mw-chat-tip {
    right: var(--g);
    bottom: calc(var(--g) + var(--mw-chat-knop-maat) + var(--mw-ruimte-4));
    transform: translateY(8px);
  }
  .mw-chat-tip[data-open] { transform: translateY(0); }
  .mw-chat-tip::after { right: 22px; bottom: -5px; }
}

/* ── Het venster ────────────────────────────────────────────────────────── */

.mw-chat {
  position: fixed;
  right: var(--g);
  bottom: var(--g);
  z-index: 95;
  width: min(var(--mw-chat-breedte), calc(100vw - 2 * var(--g)));
  height: var(--mw-chat-hoogte);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mw-chat-vlak);
  border: var(--mw-rand-dikte) solid var(--mw-chat-rand);
  border-radius: var(--mw-chat-straal);
  box-shadow: var(--mw-schaduw-2);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--mw-duur) var(--mw-easing),
              transform var(--mw-duur) var(--mw-easing);
}

/* display: flex wint het van de browserregel voor [hidden]; zonder deze regel
   staat het venster er ook als het script het nog niet heeft geopend. */
.mw-chat[hidden] { display: none; }
.mw-chat[data-open] { opacity: 1; transform: translateY(0) scale(1); }

/* ── De kop ─────────────────────────────────────────────────────────────── */

.mw-chat-kop {
  display: flex;
  align-items: center;
  gap: var(--mw-ruimte-6);
  padding: var(--mw-ruimte-7) var(--mw-ruimte-8);
  background: var(--mw-chat-kop-vlak);
  color: var(--mw-chat-kop-tekst);
}

.mw-chat-gezicht {
  flex: 0 0 var(--mw-badge-klein);
  width: var(--mw-badge-klein);
  height: var(--mw-badge-klein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mw-chat-knop-straal);
  background: var(--mw-lichtgroen);
  color: var(--mw-donkergroen);
  overflow: hidden;
  position: relative;
}

/* Zelfde reden als bij de knop: de foto vult het rondje helemaal. */
.mw-chat-gezicht img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mw-chat-gezicht svg { width: 18px; height: 18px; }

.mw-chat-naam  { font-size: var(--mw-label); font-weight: var(--mw-gewicht-titel); }
.mw-chat-rol   { font-size: var(--mw-klein); color: var(--mw-chat-kop-zacht); }
.mw-chat-namen { display: grid; gap: var(--mw-ruimte-1); margin-right: auto; }

.mw-chat-sluit {
  flex: 0 0 var(--mw-raakvlak);
  width: var(--mw-raakvlak);
  height: var(--mw-raakvlak);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--mw-rand-dikte) solid var(--mw-rand-op-donker-zacht);
  border-radius: var(--mw-straal-rond);
  background: none;
  color: var(--mw-chat-kop-tekst);
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-sluit:hover { background: var(--mw-vlak-op-donker); }
.mw-chat-sluit svg   { width: 16px; height: 16px; }

/* ── De berichten ───────────────────────────────────────────────────────── */

.mw-chat-lijf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.mw-chat-log {
  display: flex;
  flex-direction: column;
  gap: var(--mw-ruimte-6);
  padding: var(--mw-chat-ruimte);
}

.mw-chat-bericht { max-width: 86%; display: flex; flex-direction: column; gap: var(--mw-ruimte-2); }
.mw-chat-bericht[data-van="mij"] { align-self: flex-end; align-items: flex-end; }
.mw-chat-bericht[data-van="bot"] { align-self: flex-start; }

.mw-chat-afzender {
  font-size: var(--mw-klein);
  color: var(--mw-grijs-zacht);
}

.mw-chat-bel {
  padding: var(--mw-ruimte-5) var(--mw-ruimte-7);
  border-radius: var(--mw-chat-bel-straal);
  font-size: var(--mw-label);
  line-height: var(--mw-regel);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mw-chat-bericht[data-van="mij"] .mw-chat-bel {
  background: var(--mw-chat-mij-vlak);
  color: var(--mw-chat-mij-tekst);
}

.mw-chat-bericht[data-van="bot"] .mw-chat-bel {
  background: var(--mw-chat-bot-vlak);
  color: var(--mw-chat-bot-tekst);
}

/* Een antwoord dat misging blijft leesbaar maar is wel als storing te zien. */
.mw-chat-bericht[data-fout] .mw-chat-bel {
  background: var(--mw-fout-vlak);
  color: var(--mw-fout);
}

/* Wattje denkt: drie stippen, en voor wie beweging uit heeft gewoon tekst. */
.mw-chat-denkt { display: flex; gap: var(--mw-ruimte-3); padding: var(--mw-ruimte-5) var(--mw-ruimte-7); }
.mw-chat-denkt span {
  width: 6px;
  height: 6px;
  border-radius: var(--mw-straal-rond);
  background: var(--mw-grijs-zacht);
  animation: mw-chat-stip 1.2s var(--mw-easing) infinite;
}
.mw-chat-denkt span:nth-child(2) { animation-delay: .15s; }
.mw-chat-denkt span:nth-child(3) { animation-delay: .3s; }

@keyframes mw-chat-stip {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ── De voorzetjes: waar je mee kunt beginnen ───────────────────────────── */

.mw-chat-voorzetjes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-ruimte-3);
  padding: 0 var(--mw-chat-ruimte) var(--mw-chat-ruimte);
}

.mw-chat-voorzet {
  padding: var(--mw-ruimte-3) var(--mw-ruimte-6);
  border: var(--mw-rand-dikte) solid var(--mw-grijs-rand);
  border-radius: var(--mw-straal-rond);
  background: var(--mw-vlak);
  color: var(--mw-donkergroen);
  font-family: inherit;
  font-size: var(--mw-klein);
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-easing),
              border-color var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-voorzet:hover { background: var(--mw-mint); border-color: var(--mw-goed-rand); }

/* ── Het afsprakenformulier ─────────────────────────────────────────────── */

.mw-chat-plan {
  margin: 0 var(--mw-chat-ruimte) var(--mw-chat-ruimte);
  padding: var(--mw-ruimte-7);
  border: var(--mw-rand-dikte) solid var(--mw-goed-rand);
  border-radius: var(--mw-straal-kaart);
  background: var(--mw-goed-vlak);
  display: grid;
  gap: var(--mw-ruimte-6);
}

.mw-chat-plan[hidden] { display: none; }
.mw-chat-plan h3 { font-size: var(--mw-label); font-weight: var(--mw-gewicht-titel); }
.mw-chat-plan-uitleg { font-size: var(--mw-klein); color: var(--mw-grijs-tekst); }
.mw-chat-plan-stap   { display: grid; gap: var(--mw-ruimte-3); }
.mw-chat-plan-label  { font-size: var(--mw-klein); color: var(--mw-grijs-zacht); }
.mw-chat-plan-rij    { display: flex; flex-wrap: wrap; gap: var(--mw-ruimte-3); }

.mw-chat-plan-keuze {
  padding: var(--mw-ruimte-4) var(--mw-ruimte-6);
  border: var(--mw-rand-dikte) solid var(--mw-grijs-rand);
  border-radius: var(--mw-straal-rond);
  background: var(--mw-vlak);
  color: var(--mw-donkergroen);
  font-family: inherit;
  font-size: var(--mw-klein);
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-plan-keuze:hover { background: var(--mw-mint); }

/* Gekozen is nooit alleen kleur: er komt een vinkje voor te staan. */
.mw-chat-plan-keuze[aria-pressed="true"] {
  background: var(--mw-felgroen);
  border-color: var(--mw-felgroen);
  font-weight: var(--mw-gewicht-titel);
}

.mw-chat-plan-keuze[aria-pressed="true"]::before { content: '\2713\00a0'; }

/* De knop die de aanvraag verstuurt is een gewone primaire knop en geen keuze:
   hij doet iets, in plaats van iets aan of uit te zetten. */
.mw-chat-plan-versturen {
  width: 100%;
  height: var(--mw-veld-hoogte);
  border: 0;
  border-radius: var(--mw-straal-rond);
  background: var(--mw-knop-primair-vlak);
  color: var(--mw-knop-primair-tekst);
  font-family: inherit;
  font-size: var(--mw-label);
  font-weight: var(--mw-gewicht-titel);
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-plan-versturen:hover:not(:disabled) {
  background: var(--mw-knop-primair-vlak-hover);
  color: var(--mw-knop-primair-tekst-hover);
}
.mw-chat-plan-versturen:disabled { opacity: .6; cursor: not-allowed; }

.mw-chat-plan-velden { display: grid; gap: var(--mw-ruimte-4); }
.mw-chat-plan-velden[hidden] { display: none; }

.mw-chat-plan-velden input {
  width: 100%;
  height: var(--mw-veld-hoogte);
  padding: 0 var(--mw-ruimte-6);
  border: var(--mw-veld-randdikte) solid var(--mw-veld-rand);
  border-radius: var(--mw-veld-straal);
  background: var(--mw-veld-vlak);
  color: var(--mw-veld-tekst);
  font-family: inherit;
  font-size: var(--mw-label);
}

.mw-chat-plan-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mw-ruimte-4); }
.mw-chat-plan-fout { font-size: var(--mw-klein); color: var(--mw-fout); }
.mw-chat-plan-fout[hidden] { display: none; }

.mw-chat-plan-privacy { font-size: var(--mw-klein); color: var(--mw-grijs-zacht); }

/* ── Invoer ─────────────────────────────────────────────────────────────── */

.mw-chat-invoer {
  display: flex;
  align-items: flex-end;
  gap: var(--mw-ruimte-4);
  padding: var(--mw-ruimte-6) var(--mw-chat-ruimte);
  border-top: var(--mw-rand-dikte) solid var(--mw-chat-rand);
  background: var(--mw-chat-vlak);
}

.mw-chat-invoer textarea {
  flex: 1;
  min-height: var(--mw-raakvlak);
  max-height: var(--mw-chat-invoer-max);
  padding: var(--mw-ruimte-5) var(--mw-ruimte-6);
  border: var(--mw-veld-randdikte) solid var(--mw-veld-rand);
  border-radius: var(--mw-veld-straal);
  background: var(--mw-veld-vlak);
  color: var(--mw-veld-tekst);
  font-family: inherit;
  font-size: var(--mw-label);
  line-height: var(--mw-regel);
  resize: none;
}

.mw-chat-invoer textarea::placeholder { color: var(--mw-veld-plekhouder); }

.mw-chat-stuur {
  flex: 0 0 var(--mw-raakvlak);
  width: var(--mw-raakvlak);
  height: var(--mw-raakvlak);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mw-straal-veld);
  background: var(--mw-knop-primair-vlak);
  color: var(--mw-knop-primair-tekst);
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-easing),
              color var(--mw-duur-snel) var(--mw-easing);
}

.mw-chat-stuur:hover:not(:disabled) {
  background: var(--mw-knop-primair-vlak-hover);
  color: var(--mw-knop-primair-tekst-hover);
}
.mw-chat-stuur:disabled { opacity: .5; cursor: not-allowed; }
.mw-chat-stuur svg { width: 18px; height: 18px; }

.mw-chat-voet {
  padding: 0 var(--mw-chat-ruimte) var(--mw-ruimte-5);
  font-size: var(--mw-klein);
  color: var(--mw-grijs-zacht);
  background: var(--mw-chat-vlak);
}

.mw-chat-voet a { color: inherit; }

/* ── Klein scherm: het venster neemt het hele scherm ────────────────────── */

@media (max-width: 600px) {
  .mw-chat {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: var(--mw-straal-0);
    transform: translateY(100%);
  }
  .mw-chat[data-open] { transform: translateY(0); }
  .mw-chat-plan-twee { grid-template-columns: minmax(0, 1fr); }
  /* iOS zoomt in op een veld met een letter kleiner dan 16 pixels. */
  .mw-chat-invoer textarea,
  .mw-chat-plan-velden input { font-size: var(--mw-tekst); }
}