/* ============================================================
   CHAT MET MINDY
   Zwevende knop rechtsonder plus een gesprekspaneel. Kleuren,
   letters en maatvoering komen uit tokens.css, zodat de module
   meebeweegt met de huisstijl.

   Op telefoon en tablet vult het gesprek het hele scherm. Dat is
   de vaste opzet voor elke site waar Mindy op staat, zie onderaan
   dit bestand voor de reden.
   ============================================================ */

:root{
  /* Groen leest iedereen als "er is iemand bereikbaar", dus die kleur
     trekken we niet naar de huisstijl toe. */
  --chat-online:#4ec27a;
  --chat-breedte:380px;
}

.ug-chat{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-3);
  font-family:var(--font-body);
}

/* ------------------------------------------------- zwevende knop */
.ug-chat__knop{
  display:inline-flex; align-items:center; gap:var(--space-3);
  padding:6px 20px 6px 6px;
  border:0; border-radius:var(--radius-pill);
  background:var(--action); color:var(--ug-violet-900);
  font-size:var(--text-sm); font-weight:700;
  cursor:pointer; box-shadow:var(--glow-amber);
  transition:background .2s ease, transform .15s ease;
}
.ug-chat__knop:hover{ background:var(--ug-amber-300); transform:translateY(-2px) }
.ug-chat__knop:active{ transform:translateY(0) }
.ug-chat__knop img{
  width:38px; height:38px; flex:none;
  border-radius:var(--radius-pill); object-fit:cover;
  border:2px solid var(--ug-white);
}
.ug-chat__knop .ug-chat__kruis{ display:none }
.ug-chat.is-open .ug-chat__knop .ug-chat__label,
.ug-chat.is-open .ug-chat__knop img{ display:none }
.ug-chat.is-open .ug-chat__knop .ug-chat__kruis{ display:block }
.ug-chat.is-open .ug-chat__knop{ padding:14px }

/* --------------------------------------------------------- paneel */
.ug-chat__paneel{
  width:min(var(--chat-breedte), calc(100vw - 40px));
  background:var(--surface-light);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  animation:ug-chat-open .22s ease both;
}
.ug-chat__paneel[hidden]{ display:none }
@keyframes ug-chat-open{
  from{ opacity:0; transform:translateY(10px) scale(.96) }
  to{ opacity:1; transform:none }
}

.ug-chat__kop{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3);
  background:var(--ug-violet-500); color:var(--on-dark);
}
.ug-chat__avatar{ position:relative; flex:none; width:42px; height:42px }
.ug-chat__avatar img{
  width:42px; height:42px; border-radius:var(--radius-pill); object-fit:cover;
}
.ug-chat__lamp{
  position:absolute; right:-1px; bottom:0; width:12px; height:12px;
  border-radius:var(--radius-pill);
  background:var(--chat-online); border:2.5px solid var(--ug-violet-500);
}
.ug-chat__naam{
  display:block; font-family:var(--font-heading); font-weight:800;
  font-size:var(--text-lg); line-height:1.1; text-transform:none;
}
.ug-chat__status{
  display:block; margin-top:2px;
  font-size:var(--text-xs); color:var(--ug-lavender);
}
.ug-chat__sluit{
  margin-left:auto; display:flex; padding:8px;
  border:0; border-radius:var(--radius-pill);
  background:none; color:var(--ug-lavender); cursor:pointer;
  transition:background .15s ease;
}
.ug-chat__sluit:hover{ background:rgba(255,255,255,.16); color:var(--ug-white) }

/* -------------------------------------------------------- gesprek */
.ug-chat__berichten{
  display:flex; flex-direction:column; gap:var(--space-2);
  height:340px; max-height:48vh; overflow-y:auto;
  padding:var(--space-3);
  background:var(--surface-paper);
}
.ug-chat__bericht{
  max-width:88%; margin:0;
  padding:10px var(--space-3);
  font-size:var(--text-sm); line-height:1.45;
  border-radius:var(--radius-md);
  overflow-wrap:anywhere;
}
.ug-chat__bericht--mindy{
  align-self:flex-start;
  background:var(--surface-light); color:var(--on-light);
  border:1px solid var(--border-light);
  border-bottom-left-radius:var(--radius-sm);
}
.ug-chat__bericht--ik{
  align-self:flex-end;
  background:var(--ug-violet-500); color:var(--on-dark);
  border-bottom-right-radius:var(--radius-sm);
}
/* Mindy stuurt reserveringslinks, dus die moeten aanklikbaar en
   herkenbaar zijn. Onderstreept, want kleur alleen is te weinig. */
.ug-chat__bericht a{
  color:var(--ug-violet-700); text-decoration:underline; text-underline-offset:3px;
  font-weight:700;
}
.ug-chat__bericht--ik a{ color:var(--ug-amber-300) }

.ug-chat__tikt{ display:flex; gap:4px; align-items:center }
.ug-chat__tikt span{
  width:6px; height:6px; border-radius:var(--radius-pill);
  background:var(--ug-lavender-dim); animation:ug-chat-tik 1.1s ease-in-out infinite;
}
.ug-chat__tikt span:nth-child(2){ animation-delay:.16s }
.ug-chat__tikt span:nth-child(3){ animation-delay:.32s }
@keyframes ug-chat-tik{
  0%,60%,100%{ opacity:.3; transform:translateY(0) }
  30%{ opacity:1; transform:translateY(-3px) }
}

/* ------------------------------------------------------ suggesties */
.ug-chat__chips{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  padding:0 var(--space-3) var(--space-3);
  background:var(--surface-paper);
}
.ug-chat__chips[hidden]{ display:none }
.ug-chat__chip{
  padding:7px var(--space-3);
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  color:var(--ug-violet-700); background:var(--surface-light);
  border:1px solid var(--border-light);
  border-radius:var(--radius-pill); cursor:pointer;
  transition:background .15s ease;
}
.ug-chat__chip:hover{ background:var(--ug-paper) }

/* ---------------------------------------------------------- invoer */
.ug-chat__invoer{
  display:flex; gap:var(--space-2); padding:var(--space-3);
  border-top:1px solid var(--border-light);
  background:var(--surface-light);
}
.ug-chat__invoer input{
  flex:1; min-width:0;
  padding:11px var(--space-3);
  font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--on-light); background:var(--surface-paper);
  border:1px solid var(--border-light); border-radius:var(--radius-pill);
}
.ug-chat__invoer input::placeholder{ color:var(--on-light-muted) }
.ug-chat__invoer input:focus-visible{
  outline:none; border-color:var(--ug-violet-500);
  box-shadow:0 0 0 2px var(--ug-lavender);
}
.ug-chat__stuur{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:0; border-radius:var(--radius-pill);
  background:var(--ug-violet-500); color:var(--on-dark); cursor:pointer;
  transition:background .15s ease;
}
.ug-chat__stuur:hover{ background:var(--ug-violet-700) }

/* Eén regel onder de invoer: wat er met de gegevens gebeurt. */
.ug-chat__voet{
  margin:0; padding:0 var(--space-3) var(--space-3);
  font-size:var(--text-xs); line-height:1.4; color:var(--on-light-muted);
  background:var(--surface-light);
}
.ug-chat__voet a{ color:var(--ug-violet-700); text-decoration:underline }

/* ----------------------------------------------------- klein scherm */
@media (max-width:560px){
  .ug-chat{ right:12px; bottom:12px; left:12px; align-items:stretch }
  .ug-chat__knop{ align-self:flex-end }
  .ug-chat__paneel{ width:100% }
}

/* ------------------------------ telefoon en tablet: beeldvullend */
/* Op een aanraakscherm vult het gesprek het hele scherm. Reden: een
   invoerveld kleiner dan 16px laat iOS bij het typen inzoomen, en dan
   staat de pagina scheef en is er niets meer bedienbaar. Beeldvullend
   plus een veld van 16px haalt dat weg. Sluiten kan dan alleen met het
   kruisje in de kop; de zwevende knop verdwijnt zolang het gesprek
   openstaat. De tweede voorwaarde vangt tablets die breder zijn dan
   900px maar wel met een vinger bediend worden, zoals een iPad in
   liggende stand. */
@media (max-width:900px), (pointer:coarse) and (max-width:1200px){
  /* --chat-hoog en --chat-top worden door chat.js gezet, zie daar waarom. */
  .ug-chat.is-open{
    left:0; right:0; bottom:auto; top:var(--chat-top,0px);
    height:100vh; height:100dvh; height:var(--chat-hoog,100dvh);
    gap:0; align-items:stretch; z-index:9999;
  }
  .ug-chat.is-open .ug-chat__paneel{
    width:100%; max-width:none; height:100%; border:0; border-radius:0;
  }
  .ug-chat.is-open .ug-chat__berichten{
    height:auto; max-height:none; flex:1 1 auto; min-height:0;
    overscroll-behavior:contain;
  }
  .ug-chat.is-open .ug-chat__knop{ display:none }
  .ug-chat__invoer input{ font-size:16px }  /* onder de 16px zoomt iOS in */
  body.ug-chat-open{ overflow:hidden }
}

@media (prefers-reduced-motion:reduce){
  .ug-chat__paneel{ animation:none }
  .ug-chat__tikt span{ animation:none }
  .ug-chat__knop:hover{ transform:none }
}