/* =============================================================
   SM Vragen-wolk
   Herken-je-dit sectie naar het Nubi AI-SEO recept: kop in het
   midden, daaromheen zwevende vraag-ballonnen met een staartje en
   een dubbel randje, elk met een poppetje (of icoontje) ernaast.
   Twee smaken ballon: vraag (stil) en cijfer (groen, de oogballen
   die je nu mist). Gemeten uit de Nubi-code: buitenrand radius 14,
   binnenvlak radius 12 met 6px marge, staartje 12px gedraaid
   vierkant aan de zijkant, tekst 16px regel 1.3.
   ============================================================= */

.sm-vw {
  /* licht is de standaard, donker is de band op de homepagina */
  --vw-bg: #f4f6f5;
  --vw-ink: #0d1512;
  --vw-tekst: rgba(13, 21, 18, .78);
  --vw-stil: rgba(13, 21, 18, .6);
  --vw-rand: rgba(13, 21, 18, .16);
  --vw-vlak: rgba(13, 21, 18, .05);
  --vw-accent: #0f8f74;
  --sm-badge-accent: var(--vw-accent);

  box-sizing: border-box;
  background: var(--vw-bg);
  color: var(--vw-ink);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  overflow: hidden;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-vw *, .sm-vw *::before, .sm-vw *::after { box-sizing: inherit; }

.sm-vw--donker {
  --vw-bg: #0a0909;
  --vw-ink: #ffffff;
  --vw-tekst: rgba(255, 255, 255, .82);
  --vw-stil: rgba(255, 255, 255, .58);
  --vw-rand: rgba(255, 255, 255, .14);
  --vw-vlak: rgba(255, 255, 255, .055);
  --vw-accent: #3DC78F;
}

/* ---------- kop (zelfde taal als de andere secties) ---------- */
.sm-vw-top { max-width: 880px; margin: 0 auto; text-align: center; }
.sm-vw .sm-vw-kop {
  font-family: var(--sm-kop-font, inherit);
  font-size: var(--sm-kop, clamp(40px, 6vw, 68px));
  line-height: var(--sm-kop-regel, .95);
  letter-spacing: var(--sm-kop-sp, .005em);
  text-wrap: balance;
  font-weight: 600; color: var(--vw-ink); margin: 0 0 14px;
}
.sm-vw-sub { color: var(--vw-tekst); font-size: 1.02rem; line-height: 1.7; margin: 0 auto; max-width: 620px; }

/* ---------- de wolk ---------- */
.sm-vw-wolk {
  max-width: var(--sm-inhoud, 1080px); margin: 44px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 30px 44px;
}

/* poppetje links, ballon rechts; om en om gespiegeld */
.sm-vw-item { display: flex; align-items: center; gap: 14px; }
.sm-vw-item--rechts { flex-direction: row-reverse; }

/* losjes zweven: kleine hoogte-verschillen per plek */
@media (min-width: 761px) {
  .sm-vw-wolk > :nth-child(3n+1) { transform: translateY(-8px); }
  .sm-vw-wolk > :nth-child(3n+2) { transform: translateY(10px); }
}

/* het poppetje: echt beeld (staand 3:4) of icoon-rondje zolang
   de personages er nog niet zijn */
.sm-vw-pop { flex: 0 0 auto; margin: 0; }
.sm-vw-pop img {
  display: block; width: 74px; height: 92px; object-fit: cover;
  border-radius: 16px;
}
.sm-vw-pop--icoon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--vw-accent) 14%, transparent);
  color: var(--vw-accent); font-size: 28px; line-height: 0;
}
.sm-vw-pop--icoon i, .sm-vw-pop--icoon svg { width: 1em; height: 1em; fill: currentColor; }

/* de ballon: dubbel randje (rand + 6px lucht + vlak) en een staartje
   richting het poppetje, het Nubi-recept in het donker vertaald */
.sm-vw-bal {
  position: relative; max-width: 300px;
  border: 1px solid var(--vw-rand); border-radius: 14px;
  padding: 6px;
}
.sm-vw-bal > span {
  display: block; background: var(--vw-vlak); border-radius: 9px;
  padding: 11px 15px;
  color: var(--vw-tekst); font-size: 16px; line-height: 1.35;
}
.sm-vw-bal::after {
  content: ""; position: absolute; top: 50%; left: -6px;
  width: 12px; height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--vw-bg);
  border-left: 1px solid var(--vw-rand); border-bottom: 1px solid var(--vw-rand);
}
.sm-vw-item--rechts .sm-vw-bal::after {
  left: auto; right: -6px;
  border-left: 0; border-bottom: 0;
  border-right: 1px solid var(--vw-rand); border-top: 1px solid var(--vw-rand);
}

/* de cijfer-ballon: de ogen die je nu mist, in het groen */
.sm-vw-item--cijfer .sm-vw-bal { border-color: color-mix(in srgb, var(--vw-accent) 45%, transparent); }
.sm-vw-item--cijfer .sm-vw-bal::after { border-color: color-mix(in srgb, var(--vw-accent) 45%, transparent); }
.sm-vw-item--cijfer .sm-vw-bal > span {
  background: color-mix(in srgb, var(--vw-accent) 14%, transparent);
  color: var(--vw-ink); font-weight: 500;
}
.sm-vw-item--cijfer .sm-vw-pop--icoon {
  background: var(--vw-accent);
  color: #0a0909;
}

/* ---------- smal scherm: nette stapel ---------- */
@media (max-width: 760px) {
  .sm-vw-wolk { gap: 18px; margin-top: 34px; }
  .sm-vw-item { width: 100%; justify-content: flex-start; }
  .sm-vw-item--rechts { justify-content: flex-end; }
  .sm-vw-bal { max-width: min(300px, calc(100% - 74px)); }
  .sm-vw-bal > span { font-size: 14px; }
  .sm-vw-pop img { width: 60px; height: 75px; }
  .sm-vw-pop--icoon { width: 46px; height: 46px; font-size: 23px; }
}

/* ---------- antwoord-ballon: jij, rechts, met je avatar ---------- */
.sm-vw-item--antwoord .sm-vw-bal { border-color: color-mix(in srgb, var(--vw-accent) 45%, transparent); }
.sm-vw-item--antwoord .sm-vw-bal::after { border-color: color-mix(in srgb, var(--vw-accent) 45%, transparent); }
.sm-vw-item--antwoord .sm-vw-bal > span {
  background: color-mix(in srgb, var(--vw-accent) 10%, transparent);
  color: var(--vw-ink);
}
.sm-vw-item--antwoord .sm-vw-pop img {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--vw-accent) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vw-accent) 12%, transparent);
}

/* ---------- opmaak gesprek: vraag links, antwoord rechts, onder elkaar ---------- */
.sm-vw--gesprek .sm-vw-wolk {
  max-width: 860px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px;
}
.sm-vw--gesprek .sm-vw-wolk > * { transform: none; }
.sm-vw--gesprek .sm-vw-item { width: 100%; justify-content: flex-start; }
.sm-vw--gesprek .sm-vw-bal { max-width: 560px; }
.sm-vw--gesprek .sm-vw-bal > span { text-wrap: pretty; }
/* korte vragen: regels gelijk verdelen, nooit één los woord op de laatste regel */
.sm-vw--gesprek .sm-vw-item--vraag .sm-vw-bal > span { text-wrap: balance; }
/* na elk antwoord wat lucht: dan leest het als losse gesprekjes */
.sm-vw--gesprek .sm-vw-item--antwoord { margin-bottom: 18px; }
.sm-vw--gesprek .sm-vw-item--antwoord:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .sm-vw--gesprek .sm-vw-bal { max-width: calc(100% - 62px); }
  .sm-vw--gesprek .sm-vw-bal > span { font-size: 15px; line-height: 1.45; }
  .sm-vw-item--antwoord .sm-vw-pop img { width: 44px; height: 44px; }
}

/* gesprek: de klant-avatars rond, net als jouw avatar bij de antwoorden */
.sm-vw--gesprek .sm-vw-item--vraag .sm-vw-pop img {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--vw-rand);
}
@media (max-width: 760px) { .sm-vw--gesprek .sm-vw-item--vraag .sm-vw-pop img { width: 44px; height: 44px; } }

/* woorden in de kop in de accentkleur (veld kop_groen) */
.sm-vw-kopaccent { color: var(--vw-accent); }