/*!
 * Marketing Natives — chatwidget
 * Hoort bij inc/mn-chatbot.php en assets/js/mn-chatbot.js
 *
 * De achtergrond van de chatbubbel zit als data-URI in --mnc-grad-bubble.
 * Wil je in plaats daarvan een bestand uit de mediabibliotheek, vervang dan
 * de url() in dat token.
 */

/* ── Tokens ──────────────────────────────────────────────────
   Neutralen en Native Blue komen uit de globale stylesheet van de
   site; die kloppen met het handboek. De drie merkkleuren en het
   verloop staan hier hard, want de style.css van de site loopt op
   die punten achter op Brandbook v2 (zie installatiehandleiding).
   ─────────────────────────────────────────────────────────── */
.mnc {
  /* Neutralen — Native Ink en de donkere UI-stappen van de site */
  --mnc-bg:        var(--bg-elevated, #13131A);
  --mnc-bg-page:   var(--bg, #0A0A0D);          /* Native Ink */
  --mnc-bg-card:   var(--bg-card, #111118);
  --mnc-border:    var(--border, rgba(255,255,255,0.08));
  --mnc-border-2:  var(--border-strong, rgba(255,255,255,0.16));
  --mnc-text:      var(--text-primary, #FFFFFF); /* Paper */
  --mnc-text-2:    var(--text-secondary, #B5B5C0);
  --mnc-muted:     var(--text-muted, #7E7E88);

  /* Merkkleuren — Brandbook v2, hoofdstuk 04 */
  --mnc-blue:      var(--brand-blue, #00BCFD);   /* Native Blue · primair */
  --mnc-blue-dark: var(--brand-blue-dark, #00A3DC);
  --mnc-green:     #03E000;                      /* Native Green · accent */
  --mnc-rose:      #FF33AF;                      /* Native Rose · accent */

  /* Het verloop — hoofdstuk 06. Organisch: groen linksboven,
     blauw centraal, roze rechtsonder, zachte witte hoogtepunten.
     Vaste richting, niet spiegelen, niet roteren. */
  --mnc-grad:
    radial-gradient(44% 38% at 72% 24%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(58% 62% at 8% 14%,  #03E000 0%, rgba(3,224,0,0) 74%),
    radial-gradient(62% 66% at 92% 92%, #FF33AF 0%, rgba(255,51,175,0) 76%),
    linear-gradient(130deg, #03E000 0%, #00BCFD 50%, #FF33AF 100%);

  /* Lijnvorm van hetzelfde verloop, voor de haarlijn. Zelfde
     leesrichting: groen links, blauw centraal, roze rechts. */
  --mnc-grad-line: linear-gradient(90deg, #03E000 0%, #00BCFD 50%, #FF33AF 100%);

  /* Achtergrond van de chatbubbel: het vierkante merkverloop, ingebakken als
     data-URI (3,3 kB) zodat het widget geen los beeldbestand nodig heeft. Wil je
     in plaats daarvan het bestand uit de mediabibliotheek gebruiken, vervang de
     url() dan door bijvoorbeeld
     url("/wp-content/uploads/Achtergrond_vierkant_2024_Marketing_Natives.jpg").
     De linear-gradient eronder is de terugval als het beeld niet laadt. */
  --mnc-grad-bubble:
    url("data:image/jpeg;base64,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"),
    linear-gradient(135deg, #8CF06B 0%, #29C3F7 38%, #C9B6E8 62%, #FF2FB0 100%);

--mnc-r:         var(--radius, 16px);
  --mnc-r-lg:      var(--radius-lg, 24px);
  --mnc-shadow:    var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.4));
  --mnc-display:   var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  --mnc-body:      var(--font-body, "Manrope", system-ui, sans-serif);
  --mnc-mono:      var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --mnc-ease:      var(--ease, cubic-bezier(0.22, 1, 0.36, 1));

  /* Afstand tot de onderrand. Ruim genoeg om boven de reCAPTCHA-badge uit te
     komen, die op bottom:14px staat en ongeveer 60px hoog is. Zit er geen
     badge op een site, dan kan dit terug naar 24px. */
  --mnc-offset: 96px;

  position: fixed;
  right: 24px;
  bottom: var(--mnc-offset);
  z-index: 99990;
  font-family: var(--mnc-body);
}

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

/* Het widget staat midden in de stylesheet van de site. Deze reset neutraliseert
   algemene regels voor knoppen en formulierelementen.

   De selector gebruikt :where(), dat zelf geen specificiteit toevoegt. Daardoor
   weegt deze reset precies even zwaar als een kale button-regel uit het thema —
   en omdat onze stylesheet later laadt, winnen wij. Tegelijk verliest hij van
   elke .mnc__-klasse hieronder, zodat de reset nooit onze eigen opmaak sloopt. */
:where(.mnc) button,
:where(.mnc) textarea {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  background: none;
  box-shadow: none;
  line-height: normal;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}
:where(.mnc) button::after,
:where(.mnc) button::before { content: none; }
:where(.mnc) a { box-shadow: none; }

/* ── Launcher ── */
.mnc__launch {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mnc-grad-bubble);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  /* Geen schaduw: die tekent zich af als een grijze halo zodra de bubbel over
     een lichte sectie van de pagina staat. */
  box-shadow: none;
  transition: transform .35s var(--mnc-ease), box-shadow .35s var(--mnc-ease),
              opacity .25s var(--mnc-ease);
}
/* Hover: alleen een lichte beweging en een iets diepere schaduw. Geen gloed,
   geen kleurverandering — de gradient blijft zoals hij is.
   De achtergrond staat hier opnieuw voor alle toestanden, met !important.
   Dat is hier geen luiheid: themastijlen voor button:hover gebruiken vaak zelf
   !important, en dat is de enige manier om de bubbel daartegen te beschermen. */
.mnc__launch,
.mnc__launch:hover,
.mnc__launch:focus,
.mnc__launch:focus-visible,
.mnc__launch:active {
  background-image: var(--mnc-grad-bubble) !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mnc__launch:hover {
  transform: translateY(-2px) scale(1.04);
}
.mnc__launch:focus-visible { outline: 2px solid var(--mnc-blue); outline-offset: 4px; }
.mnc__launch svg {
  width: 24px; height: 24px;
  fill: none; stroke: #FFFFFF;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.mnc[data-open="true"] .mnc__launch {
  transform: scale(.8);
  opacity: 0;
  pointer-events: none;
}

/* ── Paneel ── */
.mnc__panel {
  position: absolute;
  right: 0; bottom: 0;
  width: 386px;
  height: min(624px, calc(100vh - var(--mnc-offset) - 32px));
  display: flex;
  flex-direction: column;
  background: var(--mnc-bg);
  border: 1px solid var(--mnc-border);
  border-radius: var(--mnc-r-lg);
  box-shadow: var(--mnc-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s var(--mnc-ease), transform .3s var(--mnc-ease);
}
.mnc[data-open="true"] .mnc__panel { opacity: 1; transform: none; pointer-events: auto; }

/* De handtekening: het verloop als haarlijn. Het verloop op de launcher
   en deze lijn zijn nooit samen in beeld — de launcher verdwijnt als het
   paneel opent. Eén verloop per scherm, conform hoofdstuk 06. */
.mnc__panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mnc-grad-line);
  z-index: 3;
}

/* ── Header ──
   Eyebrow: JetBrains Mono, kleinkapitaal, ruime spatiëring (hoofdstuk 05).
   Titel: Bricolage 700 als sub-kop, met één accentwoord in italic Native
   Blue — dat is de visuele handtekening uit het handboek. */
.mnc__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 16px 16px;
  border-bottom: 1px solid var(--mnc-border);
  background: var(--mnc-bg-page);
}
.mnc__dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mnc-green);
  box-shadow: 0 0 0 3px rgba(3,224,0,.16);
}
/* Merknaam draagt de kop: Bricolage 700 in de sub-kop-rol, met het
   statusbolletje ervoor. */
.mnc__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mnc-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--mnc-text);
}
/* Uitnodiging eronder, klein en in Bricolage italic Native Blue — de
   handtekening uit hoofdstuk 05 blijft zo behouden, alleen kleiner. */
.mnc__sub {
  /* Inspringen over het statusbolletje plus de tussenruimte, zodat deze regel
     links uitlijnt met "Marketing Natives" erboven. */
  padding-left: 14px;
  margin: 4px 0 0;
  font-family: var(--mnc-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--mnc-blue);
}
.mnc__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--mnc-border);
  border-radius: 9px;
  background: transparent;
  color: var(--mnc-muted);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mnc__close:hover { color: var(--mnc-text); border-color: var(--mnc-border-2); }
.mnc__close:focus-visible { outline: 2px solid var(--mnc-blue); outline-offset: 2px; }
.mnc__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ── Berichten ── */
.mnc__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--mnc-border-2) transparent;
}
.mnc__log::-webkit-scrollbar { width: 6px; }
.mnc__log::-webkit-scrollbar-thumb { background: var(--mnc-border-2); border-radius: 3px; }

.mnc__msg {
  max-width: 88%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  border-radius: var(--mnc-r);
  overflow-wrap: break-word;
  animation: mnc-in .28s var(--mnc-ease) both;
}
@keyframes mnc-in { from { opacity: 0; transform: translateY(6px); } }

.mnc__msg--bot {
  align-self: flex-start;
  background: var(--mnc-bg-card);
  border: 1px solid var(--mnc-border);
  border-bottom-left-radius: 6px;
  color: var(--mnc-text-2);
}
.mnc__msg--user {
  align-self: flex-end;
  background: var(--mnc-blue);
  border-bottom-right-radius: 6px;
  color: #04121A;
  font-weight: 500;
}
.mnc__msg--error {
  align-self: flex-start;
  background: rgba(255,26,140,.09);
  border: 1px solid rgba(255,26,140,.3);
  border-bottom-left-radius: 6px;
  color: #FFC2E0;
}
.mnc__msg strong { color: var(--mnc-text); font-weight: 600; }
.mnc__msg a {
  color: var(--mnc-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mnc__msg a:hover { color: var(--mnc-text); }
.mnc__msg--user a { color: #04121A; }

/* ── Suggesties ── */
.mnc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mnc__chip {
  padding: 8px 16px;
  font-family: var(--mnc-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mnc-text-2);
  background: transparent;
  border: 1px solid var(--mnc-border-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.mnc__chip:hover { color: var(--mnc-text); border-color: var(--mnc-blue); background: rgba(0,188,253,.08); }
.mnc__chip:focus-visible { outline: 2px solid var(--mnc-blue); outline-offset: 2px; }

/* ── Typindicator ──
   Alle drie de stippen in Native Blue. Groen en roze zijn accenten die
   Blue ondersteunen, niet vervangen — drie merkkleuren naast elkaar als
   versiering gaat in tegen hoofdstuk 04. */
.mnc__typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  padding: 16px;
  background: var(--mnc-bg-card);
  border: 1px solid var(--mnc-border);
  border-radius: var(--mnc-r);
  border-bottom-left-radius: 6px;
}
.mnc__typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mnc-blue);
  animation: mnc-bounce 1.3s var(--mnc-ease) infinite;
}
.mnc__typing i:nth-child(2) { animation-delay: .16s; }
.mnc__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mnc-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Invoer ── */
.mnc__foot {
  flex: 0 0 auto;
  padding: 16px;
  border-top: 1px solid var(--mnc-border);
  background: var(--mnc-bg-page);
}
.mnc__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--mnc-bg-card);
  border: 1px solid var(--mnc-border);
  border-radius: 999px;
  transition: border-color .2s;
}
.mnc__row:focus-within { border-color: var(--mnc-blue); }
.mnc__input {
  flex: 1 1 auto;
  min-height: 22px; max-height: 96px;
  padding: 5px 0;
  font-family: var(--mnc-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mnc-text);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
}
.mnc__input::placeholder { color: var(--mnc-muted); }
.mnc__send {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--mnc-blue);
  cursor: pointer;
  transition: background .2s, opacity .2s, transform .2s var(--mnc-ease);
}
.mnc__send:hover:not(:disabled) { background: var(--mnc-blue-dark); transform: scale(1.06); }
.mnc__send:disabled { opacity: .3; cursor: default; }
.mnc__send:focus-visible { outline: 2px solid var(--mnc-blue); outline-offset: 2px; }
.mnc__send svg {
  width: 16px; height: 16px;
  fill: none; stroke: #04121A;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Voettekst in een caption-rol: Manrope, normale schrijfwijze. Deze regel
   is te lang voor kleinkapitaal met ruime spatiëring — dat leest slecht en
   klinkt schreeuwerig (hoofdstuk 10). */
.mnc__note {
  margin: 16px 0 0;
  font-family: var(--mnc-body);
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--mnc-muted);
  text-align: center;
}
.mnc__note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: color .2s, border-color .2s;
}
.mnc__note a:hover { color: var(--mnc-blue); border-bottom-color: var(--mnc-blue); }

/* ── Mobiel: volledig scherm ── */
@media (max-width: 520px) {
  .mnc { --mnc-offset: 88px; right: 16px; }
  .mnc__panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  /* Ruimte vrijhouden voor notch en gesture-balk */
  .mnc__head { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .mnc__foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mnc *, .mnc *::before, .mnc *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   VERDEDIGINGSBLOK

   Sommige thema's forceren knopstijlen met !important. Daar helpt
   specificiteit niet tegen; alleen !important wint van !important.
   Hieronder staan daarom de afmetingen en kleuren van de vier knoppen
   nog een keer, inclusief hun hovertoestanden.

   Dit blok staat bewust helemaal onderaan en raakt niets anders aan.
   Gebruikt het thema van de site geen !important, dan verandert dit
   blok niets aan het resultaat.
   ============================================================ */

/* Chatbubbel */
.mnc .mnc__launch,
.mnc .mnc__launch:hover,
.mnc .mnc__launch:focus,
.mnc .mnc__launch:focus-visible,
.mnc .mnc__launch:active {
  width: 58px !important;
  height: 58px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-image: var(--mnc-grad-bubble) !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}
.mnc .mnc__launch,
.mnc .mnc__launch:hover { box-shadow: none !important; }

/* Sluitknop in de kop */
.mnc .mnc__close,
.mnc .mnc__close:hover,
.mnc .mnc__close:focus,
.mnc .mnc__close:active {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
}
.mnc .mnc__close { border: 1px solid var(--mnc-border) !important; box-shadow: none !important; }
.mnc .mnc__close:hover { border-color: var(--mnc-border-2) !important; }

/* Verzendknop */
.mnc .mnc__send,
.mnc .mnc__send:focus,
.mnc .mnc__send:active {
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--mnc-blue) !important;
}
.mnc .mnc__send:hover:not(:disabled) { background: var(--mnc-blue-dark) !important; }
.mnc .mnc__send { box-shadow: none !important; }

/* Suggestieknoppen */
.mnc .mnc__chip {
  width: auto !important;
  min-height: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid var(--mnc-border-2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mnc .mnc__chip { box-shadow: none !important; }
.mnc .mnc__chip:hover {
  border-color: var(--mnc-blue) !important;
  background: rgba(0,188,253,.08) !important;
  box-shadow: none !important;
}

/* Invoerveld */
.mnc .mnc__input,
.mnc .mnc__input:focus {
  padding: 5px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mnc-text) !important;
  box-shadow: none !important;
  outline: none !important;
}