/* Chatvenster in gespreksstijl. Zelfstandig: geen afhankelijkheden,
   en alle namen zijn afgeschermd met een eigen voorvoegsel zodat er niets
   botst met de opmaak van de site waarin dit geladen wordt. */

.mmchat,
.mmchat *,
.mmchat *::before,
.mmchat *::after {
  box-sizing: border-box;
}

.mmchat {
  --mmchat-groen: #0f7a68;
  --mmchat-groen-donker: #0a5a4d;
  --mmchat-bubbel-eigen: #d6f5cf;
  --mmchat-bubbel-bot: #ffffff;
  --mmchat-achtergrond: #e9e3db;
  --mmchat-tekst: #1f2c33;
  --mmchat-tekst-zacht: #667781;
  --mmchat-rand: rgba(0, 0, 0, .08);

  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2147483000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mmchat-tekst);
}

/* ── Openknop ─────────────────────────────────────────────────────────── */

.mmchat__opener {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--mmchat-groen);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .18s ease, background-color .18s ease;

  /* De omringende site kan de knop smal maken, waardoor het label over
     meerdere regels brak. Deze twee regels houden hem op één lijn. */
  white-space: nowrap;
  width: auto;
}

.mmchat__opener svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.mmchat__opener:hover { background: var(--mmchat-groen-donker); transform: translateY(-1px); }
.mmchat__opener:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mmchat[data-open="true"] .mmchat__opener { display: none; }

/* ── Venster ──────────────────────────────────────────────────────────── */

.mmchat__panel {
  display: none;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2.5rem));
  height: min(32rem, calc(100vh - 6rem));
  border-radius: 14px;
  overflow: hidden;
  background: var(--mmchat-achtergrond);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.mmchat[data-open="true"] .mmchat__panel { display: flex; }

/* Maximaliseren: het venster groeit naar bijna het volledige scherm. */
.mmchat[data-maximised="true"] .mmchat__panel {
  width: min(56rem, calc(100vw - 2.5rem));
  height: calc(100vh - 3rem);
}

@media (max-width: 30rem) {
  .mmchat { right: .75rem; bottom: .75rem; left: .75rem; }
  .mmchat__panel,
  .mmchat[data-maximised="true"] .mmchat__panel {
    width: 100%;
    height: min(80vh, 34rem);
  }
  /* Op een klein scherm voegt maximaliseren niets toe. */
  .mmchat__icon-btn[data-action="maximise"] { display: none; }
}

/* ── Kop ──────────────────────────────────────────────────────────────── */

.mmchat__header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  background: var(--mmchat-groen);
  color: #fff;
}

.mmchat__avatar {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.mmchat__titles { flex: 1 1 auto; min-width: 0; }
.mmchat__title { font-weight: 600; }
.mmchat__subtitle { font-size: .78rem; opacity: .85; }

.mmchat__icon-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.mmchat__icon-btn:hover { background: rgba(255, 255, 255, .16); }
.mmchat__icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mmchat__icon-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* ── Berichten ────────────────────────────────────────────────────────── */

.mmchat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mmchat__msg {
  max-width: 82%;
  padding: .5rem .7rem .4rem;
  border-radius: 10px;
  background: var(--mmchat-bubbel-bot);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  word-wrap: break-word;
  animation: mmchat-in .18s ease-out;
}

.mmchat__msg--bot  { align-self: flex-start; border-top-left-radius: 2px; }
.mmchat__msg--user { align-self: flex-end; background: var(--mmchat-bubbel-eigen); border-top-right-radius: 2px; }
.mmchat__msg--fout { background: #fdecea; color: #7a1c12; }

.mmchat__msg p { margin: 0 0 .4rem; }
.mmchat__msg p:last-of-type { margin-bottom: 0; }
.mmchat__msg a { color: var(--mmchat-groen-donker); text-decoration: underline; }

.mmchat__time {
  display: block;
  margin-top: .15rem;
  text-align: right;
  font-size: .68rem;
  color: var(--mmchat-tekst-zacht);
}

@keyframes mmchat-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Typindicator */
.mmchat__typing { display: flex; gap: .22rem; padding: .15rem 0; }
.mmchat__typing span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--mmchat-tekst-zacht);
  animation: mmchat-bounce 1.3s infinite ease-in-out;
}
.mmchat__typing span:nth-child(2) { animation-delay: .18s; }
.mmchat__typing span:nth-child(3) { animation-delay: .36s; }

@keyframes mmchat-bounce {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

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

.mmchat__form {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .6rem .7rem;
  background: #f3efe9;
  border-top: 1px solid var(--mmchat-rand);
}

.mmchat__input {
  flex: 1 1 auto;
  max-height: 6rem;
  min-height: 2.4rem;
  padding: .55rem .8rem;
  border: 1px solid var(--mmchat-rand);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  color: inherit;
  resize: none;
}

.mmchat__input:focus { outline: 2px solid var(--mmchat-groen); outline-offset: -1px; }

.mmchat__send {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--mmchat-groen);
  color: #fff; cursor: pointer;
}

.mmchat__send:disabled { opacity: .5; cursor: default; }
.mmchat__send svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.mmchat__note {
  padding: .3rem .8rem .55rem;
  background: #f3efe9;
  font-size: .68rem;
  color: var(--mmchat-tekst-zacht);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .mmchat__msg, .mmchat__opener { animation: none; transition: none; }
  .mmchat__typing span { animation-duration: 0s; }
}