/* Scope Compass — stylesheet voor "Proces verbeteren" via Vera (reeks verrijk).
   Laadt ná src/styles.css en leunt op de tokens daaruit. Het ontwerp (Claude Design, 2 okt 2026,
   "Vera Proces Verbeteren") is de afspraak: de tokens hieronder zijn de kleuren die het ontwerp
   extra gebruikt, de keyframes dragen letterlijk de namen en tijden uit het ontwerp. PR 1 gebruikt
   alleen de meter; de fases op volledig scherm (PR 4 en 6) bouwen op dezelfde tokens en keyframes.
   Mobiele regels onderaan in één @media-blok (max-width 640px), zoals de rest van de app. */

:root {
  --vr-stepper-border: #C7CBF5;
  --vr-reached-border: #CFE9D8;
  --vr-rec-border: #F2B8BD;
  --vr-hero-fg: #6A35C9;
  --vr-hero-bg: #F1EAFE;
  --vr-user-bubble: #EEF0FE;
  --vr-skip-bubble: #F0F1F4;
  --vr-breath: rgba(139, 92, 246, .35);
  --vr-ease: cubic-bezier(.4, 0, .2, 1);
  --vr-shadow-card: 0 1px 2px rgba(16, 24, 40, .05);
  --vr-shadow-float: 0 4px 16px rgba(16, 24, 40, .10);
}

/* ---- beweging: namen en tijden uit het ontwerp ---------------------------------------------- */
@keyframes veraIn     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes veraDrop   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes veraPop    { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes veraFade   { from { opacity: 0; } to { opacity: 1; } }
/* Vera ademt terwijl ze denkt: een gloed die de vorm van haar gezicht volgt (drop-shadow), niet een vierkant kader. */
@keyframes veraBreath { 0%, 100% { filter: drop-shadow(0 0 0 rgba(139, 92, 246, 0)); } 50% { filter: drop-shadow(0 0 5px var(--vr-breath)); } }
@keyframes veraLine   { 0% { opacity: .45; } 50% { opacity: 1; } 100% { opacity: .45; } }
@keyframes veraDot    { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Wie minder beweging wil, krijgt de inhoud zonder de verschijn- en de oneindige animaties. */
@media (prefers-reduced-motion: reduce) {
  .vr-meter-vul, .vr-meter-chev, [class^="vr-"], [class*=" vr-"] { animation: none !important; transition: none !important; }
}

/* ---- de meter "Bespreekbaar" (procespagina en telefoonhub) ---------------------------------- */
.vr-meter { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--vr-shadow-card); }
/* De kop wikkelt: label en percentage, dan de telling met de chevron, en de balk op volle breedte.
   De stappenkolom op het bureaublad is maar ~200px breed; één regel liep daar af. */
.vr-meter-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--text); }
.vr-meter-kop::-webkit-details-marker { display: none; }
.vr-meter-l { font-weight: 600; white-space: nowrap; }
.vr-meter-pct { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.vr-meter-balk { position: relative; flex: 1 1 100%; order: 5; height: 6px; border-radius: 999px; background: var(--slate-soft); }
.vr-meter-vul { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .5s var(--vr-ease), background .3s ease; }
.vr-meter-doel { position: absolute; left: 90%; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--text); }
.vr-meter-n { flex: 1 1 120px; min-width: 0; font-size: 12px; color: var(--text-3); }   /* wikkelt zelf, zodat de chevron op de regel blijft */
.vr-meter-chev { margin-left: auto; color: var(--text-3); font-size: 15px; transition: transform .2s var(--vr-ease); }
.vr-meter[open] .vr-meter-chev { transform: rotate(180deg); }
.vr-meter-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2px 16px; padding: 6px 12px 10px; border-top: 1px solid var(--border); background: var(--surface-2); animation: veraDrop .22s var(--vr-ease) both; }
.vr-meter-rij { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; }
.vr-meter-rij.is-nvt { opacity: .55; }
.vr-meter-rl { flex: 1; min-width: 0; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-meter-rb { position: relative; width: 70px; height: 5px; border-radius: 999px; background: var(--border); flex: none; }
.vr-meter-rv { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.vr-meter-rp { width: 36px; text-align: right; font-size: 11.5px; color: var(--text-2); flex: none; }
.vr-meter-voet { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); padding: 4px 8px 0; }
.is-groen.vr-meter-pct { color: var(--green); }
.is-indigo.vr-meter-pct { color: var(--pri); }
.is-amber.vr-meter-pct { color: var(--amber); }
.vr-meter-vul.is-groen, .vr-meter-rv.is-groen { background: var(--green); }
.vr-meter-vul.is-indigo, .vr-meter-rv.is-indigo { background: var(--pri); }
.vr-meter-vul.is-amber, .vr-meter-rv.is-amber { background: var(--amber); }
.pm-vr { margin-top: 12px; }

/* ---- de kaart in het Vera-paneel (PR 4): "WAT WIL JE DOEN" boven de snelacties ---------------- */
.vera-wat { margin: 0 0 8px; }
.vera-wat-kop { font-size: 10.5px; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin-bottom: 8px; }
.vera-vr-kaart { background: var(--surface); border: 1px solid var(--border-strong, #DADCE2); border-radius: 12px; padding: 14px; box-shadow: var(--vr-shadow-card); display: flex; flex-direction: column; gap: 10px; }
.vera-vr-rij { display: flex; gap: 11px; align-items: flex-start; }
.vera-vr-tegel { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 18px; color: var(--vr-hero-fg); background: var(--vr-hero-bg); }
.vera-vr-tegel .ic { font-size: 18px; color: inherit; }
.vera-vr-titel { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.vera-vr-tekst { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.vera-vr-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vera-vr-hint { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.vera-vr-voet .btn { margin-left: auto; }

/* ---- het volledige scherm (PR 4): kop, stepper ----------------------------------------------- */
.vr-scherm { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; height: calc(100dvh - var(--topbar-h, 58px) - 40px); min-height: 520px; }
.vr-kop { flex: none; display: flex; flex-direction: column; gap: 8px; }
.vr-kruimel { align-self: flex-start; display: flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 4px 6px 4px 2px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-2); }
.vr-kruimel:hover { background: var(--sunken); color: var(--text); }
.vr-kruimel b { font-weight: 500; color: var(--text); }
.vr-kop-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vr-kop-rij > .vr-av { width: 40px; height: 40px; flex: none; line-height: 0; }   /* Vera's gezicht (transparant); geen kader dat het afsnijdt */
.vr-kop-tekst { min-width: 0; }
.vr-kop-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-kop-vera { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.vr-kop-sub { font-size: 22px; font-weight: 400; color: var(--text-3); letter-spacing: -.02em; }
.vr-kop-regel { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.vr-stepper { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vr-stap { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.vr-stap.is-huidig { background: var(--vr-user-bubble); border-color: var(--vr-stepper-border); }
.vr-stap-n { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #565A66; background: var(--vr-skip-bubble); }
.vr-stap-n .ic { font-size: 11px; color: inherit; }
.vr-stap.is-huidig .vr-stap-n { color: #fff; background: var(--pri); }
.vr-stap.is-gedaan .vr-stap-n { color: #fff; background: var(--green); }
.vr-stap-l { font-size: 12.5px; color: var(--text-2); }
.vr-stap.is-huidig .vr-stap-l { font-weight: 600; color: var(--text); }

/* ---- de chatfases: ruimte voor de processtroom rechts ---------------------------------------- */
.vr-chatwrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; padding-right: 48px; transition: padding-right .25s var(--vr-ease); }
.vr-stroom-dock { position: absolute; top: 0; right: 0; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-height: calc(100% - 12px); }
.is-stroom-open .vr-stroom-dock { width: min(380px, calc(100% - 24px)); }
.vr-stroom-knop { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); box-shadow: var(--vr-shadow-float); transition: background .15s ease; }
.vr-stroom-knop:hover { background: var(--surface-2); }
.vr-stroom-tegel { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #4338CA; background: var(--vr-user-bubble); }
.vr-stroom-tegel .ic { font-size: 13px; color: inherit; }
.vr-stroom-lbl { display: none; }
.vr-chev { color: var(--text-3); transition: transform .2s var(--vr-ease); }
.vr-chev.is-open { transform: rotate(180deg); }
.vr-stroom-kaart { width: 100%; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-float); animation: veraDrop .22s var(--vr-ease) both; display: flex; flex-direction: column; }
.vr-stroom-kop { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
.vr-stroom-naam { font-size: 13px; font-weight: 600; }
.vr-stroom-sub { font-size: 11.5px; color: var(--text-3); }
.vr-stroom-svg { padding: 12px; display: flex; justify-content: center; background: var(--surface-2); overflow: auto; }
.vr-stroom-svg svg { max-width: 100%; height: auto; }
.vr-stroom-svg .flow-node { cursor: pointer; }
.vr-stroom-detail { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; animation: veraIn .22s var(--vr-ease) both; }
.vr-stroom-detail-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-stroom-titel { font-size: 13px; font-weight: 600; }
.vr-stroom-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.vr-stroom-rol { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.vr-stroom-hint { border-top: 1px solid var(--border); padding: 10px 14px; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
@media (min-width: 1120px) { .vr-chatwrap { padding-right: 216px; } .vr-stroom-knop { padding: 7px 12px 7px 10px; } .vr-stroom-lbl { display: inline; } }
@media (min-width: 1340px) { .vr-chatwrap.is-stroom-open { padding-right: 396px; } }

/* ---- het chatkader ---------------------------------------------------------------------------- */
.vr-kader { flex: 1; min-height: 0; width: 100%; max-width: 860px; margin: 0 auto; animation: veraPop .35s var(--vr-ease) both; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.vr-kader.is-los { background: transparent; border-color: transparent; box-shadow: none; justify-content: safe center; overflow: auto; }
.vr-hero { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px 18px; text-align: center; }
/* Vera als heel figuur boven de vraag; zweeft zacht, net als het hoofdje in de kop. De reduced-motion-
   regel bovenaan dit bestand zet de beweging uit ([class^="vr-"]). */
.vr-hero-vera { display: block; width: 132px; height: 132px; line-height: 0; animation: vr-hero-zweef 6s ease-in-out infinite; }
.vr-hero-vera .vf-figuur { width: 100%; height: 100%; object-fit: contain; }
@keyframes vr-hero-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.vr-hero-kop { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.vr-hero-tekst { max-width: 520px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* de statusbalk en de zekerheidsuitklap */
.vr-status { flex: none; position: relative; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border); }
.vr-status-rij { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; flex-wrap: wrap; }
.vr-status-knop { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; border: none; background: transparent; cursor: pointer; font: inherit; padding: 0; text-align: left; }
.vr-status-l { font-size: 12.5px; font-weight: 600; color: var(--text); }
.vr-status-pct { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.vr-status-pct.is-groen, .vr-dim-p.is-groen { color: var(--green); }
.vr-status-pct.is-indigo { color: var(--pri); }
.vr-status-pct.is-amber { color: var(--amber); }
.vr-status-balk { position: relative; flex: 1; min-width: 80px; height: 6px; border-radius: 999px; background: var(--vr-skip-bubble); }
.vr-status-vul { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .5s var(--vr-ease), background .3s ease; }
.vr-status-vul.is-groen, .vr-dim-v.is-groen { background: var(--green); }
.vr-status-vul.is-indigo, .vr-dim-v.is-indigo { background: var(--pri); }
.vr-status-vul.is-amber, .vr-dim-v.is-amber { background: var(--amber); }
.vr-status-doel { position: absolute; left: 90%; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--text); }
.vr-status-n { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.vr-uitklap { position: absolute; top: 100%; left: 0; right: 0; animation: veraDrop .22s var(--vr-ease) both; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); box-shadow: var(--vr-shadow-float); }
.vr-dots { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vr-dot { width: 20px; height: 5px; border-radius: 999px; background: var(--border); }
.vr-dot.is-ok { background: var(--green); }
.vr-dot.is-over { background: #DADCE2; }
.vr-dot.is-nu { background: var(--pri); }
.vr-dots-l { margin-left: 8px; font-size: 11.5px; color: var(--text-3); }
.vr-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2px 16px; }
.vr-dim { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; }
.vr-dim.is-nu { background: var(--vr-user-bubble); }
.vr-dim.is-nvt { opacity: .55; }
.vr-dim-l { flex: 1; min-width: 0; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-dim.is-nu .vr-dim-l { font-weight: 600; }
.vr-dim-b { width: 70px; height: 5px; border-radius: 999px; background: var(--border); flex: none; position: relative; }
.vr-dim-v { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.vr-dim-p { width: 32px; text-align: right; font-size: 11.5px; color: var(--text-2); flex: none; }

/* de draad */
.vr-draad { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.vr-msg { flex: none; display: flex; gap: 10px; align-items: flex-start; max-width: 640px; }
.vr-msg > .vr-av { width: 26px; height: 26px; flex: none; line-height: 0; }
.vr-draad > .vr-msg:nth-last-child(-n+3), .vr-draad > .vr-ack:nth-last-child(-n+3) { animation: veraIn .32s var(--vr-ease) both; }
.vr-bubbel { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; padding: 10px 12px; min-width: 0; }
.vr-bubbel-kop { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.vr-bubbel-tekst { font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.vr-msg.is-user { align-self: flex-end; max-width: 560px; flex-direction: column; align-items: flex-end; gap: 5px; }
.vr-draad > .vr-msg.is-user:nth-last-child(-n+3) { animation-duration: .26s; }
.vr-bubbel-u { background: var(--vr-user-bubble); color: var(--text); padding: 9px 12px; border-radius: 12px 12px 4px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.vr-bubbel-u.is-over { background: var(--vr-skip-bubble); color: var(--text-3); }
.vr-chip-file { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.vr-ack { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 36px; }
.vr-draad > .vr-ack:nth-last-child(-n+3) { animation-duration: .3s; animation-delay: .15s; }
.vr-pil { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 999px; padding: 3px 9px; }
.vr-pil.is-groen { color: #0F7A3D; background: var(--green-soft, #E6F6EC); }
.vr-pil.is-amber { color: #8A5A00; background: var(--amber-soft, #FBF0D9); }
.vr-pil .ic { font-size: 12px; color: inherit; }
.vr-msg.is-denkt { animation: veraIn .25s var(--vr-ease) both; }
.vr-av-adem { animation: veraBreath 1.4s ease-in-out infinite; }
.vr-msg .vr-av-adem .vf-hoofd img { animation: none; }   /* de adem zit op de omhulling; niet dubbel */
.vr-denkt { padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; width: 280px; max-width: 100%; }
.vr-denkt-kop { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.vr-denkt-dots { display: inline-flex; gap: 3px; }
.vr-denkt-dots span { width: 4px; height: 4px; border-radius: 999px; background: #8B5CF6; animation: veraDot 1.1s infinite; }
.vr-denkt-dots span:nth-child(2) { animation-delay: .18s; }
.vr-denkt-dots span:nth-child(3) { animation-delay: .36s; }
.vr-lijn { display: block; height: 8px; border-radius: 999px; background: var(--vr-skip-bubble); animation: veraLine 1.2s ease-in-out infinite; }
.vr-msg.is-kaart { animation: veraIn .34s var(--vr-ease) both; }
.vr-vraag { flex: 1; min-width: 0; background: var(--surface); border: 1px solid #DADCE2; border-radius: 4px 12px 12px 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vr-vraag-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-vraag-n { font-size: 12px; font-weight: 600; color: #4338CA; }
.vr-vraag-tekst { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.vr-vraag-waarom { display: flex; gap: 7px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.vr-vraag-waarom .ic { color: var(--text-3); flex: none; margin-top: 2px; }
.vr-opties { display: flex; flex-direction: column; gap: 6px; }
.vr-optie { animation: veraIn .3s var(--vr-ease) both; transition: background .15s ease, border-color .15s ease; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 9px 11px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.vr-optie:hover { background: var(--surface-2); border-color: #DADCE2; }
.vr-optie-k { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #565A66; background: var(--vr-skip-bubble); }
.vr-vraag-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-vraag-voet > span { font-size: 11.5px; color: var(--text-3); }
.vr-vraag-voet .btn { margin-left: auto; }
.vr-bereikt { flex: none; background: var(--green-soft, #E6F6EC); border: 1px solid var(--vr-reached-border); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 36px; animation: veraPop .3s var(--vr-ease) both; }
.vr-bereikt > .ic { color: #0F7A3D; font-size: 20px; }
.vr-bereikt-tekst { flex: 1; min-width: 200px; }
.vr-bereikt-kop { font-size: 13.5px; font-weight: 600; color: #0F7A3D; }
.vr-bereikt-sub { font-size: 12.5px; color: #0F7A3D; margin-top: 2px; }
.vr-fout { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--red-soft, #FCEBEC); color: var(--red-strong, #B42A33); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.vr-fout > span { flex: 1; min-width: 160px; }
.vr-fout.is-stil { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.vr-claim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--amber-soft, #FBF0D9); color: #8A5A00; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.vr-claim > span { flex: 1; min-width: 160px; }

/* het invoerblok en de startkaarten */
.vr-composer-blok { flex: none; width: 100%; border-top: 1px solid var(--border); padding: 12px 16px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.is-los .vr-composer-blok { max-width: 680px; margin: 0 auto; border-top-color: transparent; background: transparent; }
.vr-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px; margin-bottom: 4px; }
.vr-startkaart { display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px; cursor: pointer; font: inherit; box-shadow: var(--vr-shadow-card); transition: border-color .2s ease, box-shadow .2s ease, background .15s ease; }
.vr-startkaart:hover { background: var(--surface-2); border-color: #DADCE2; }
.vr-startkaart.is-gekozen { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.vr-startkaart-icoon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.vr-startkaart-icoon .ic { font-size: 15px; color: inherit; }
.vr-startkaart-icoon.is-green { color: #0F7A3D; background: var(--green-soft, #E6F6EC); }
.vr-startkaart-icoon.is-violet { color: var(--vr-hero-fg); background: var(--vr-hero-bg); }
.vr-startkaart-icoon.is-amber { color: #8A5A00; background: var(--amber-soft, #FBF0D9); }
.vr-startkaart-icoon.is-blue { color: #1B5FB8; background: var(--blue-soft, #E7F0FF); }
.vr-startkaart-icoon.is-slate { color: #565A66; background: var(--vr-skip-bubble); }
.vr-startkaart-titel { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.4; }
.vr-startkaart-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
/* FR-050 VK1: klaar voor het gesprek? (de acht punten van de lat) */
.vr-lat { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 4px 0; }
.vr-lat-kop { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; cursor: pointer; border: 0; background: none; border-radius: 12px; font: inherit; font-size: 12.5px; text-align: left; color: var(--text); }
.vr-lat-kop > .ic:first-child { color: var(--amber-strong); font-size: 16px; }
.vr-lat.is-klaar .vr-lat-kop > .ic:first-child { color: var(--green-strong); }
.vr-lat-zin { flex: 1; font-weight: 500; line-height: 1.4; }
.vr-lat-lijst { list-style: none; margin: 0; padding: 0 6px 6px; display: flex; flex-direction: column; gap: 2px; }
.vr-lat-rij { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; color: var(--text); box-sizing: border-box; }
button.vr-lat-rij { cursor: pointer; }
button.vr-lat-rij:hover { background: var(--surface-2); }
.vr-lat-icoon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.vr-lat-icoon .ic { font-size: 16px; }
.vr-lat-icoon.is-ok { color: var(--green-strong); }
.vr-lat-icoon.is-nvt { color: var(--text-3); }
.vr-lat-icoon.is-gat { color: var(--amber-strong); }
.vr-lat-icoon.is-onbekend { color: var(--slate-text); }
.vr-lat-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vr-lat-label { font-size: 12.5px; line-height: 1.4; }
.vr-lat-reden { font-size: 11.5px; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.vr-lat-pijl { flex: none; color: var(--text-3); align-self: center; }
.vrc { border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 8px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); transition: border-color .2s ease; }
.vrc.is-rec { border-color: var(--vr-rec-border); }
.vrc.is-uit { opacity: .7; }
.vrc-files { display: flex; gap: 6px; flex-wrap: wrap; }
.vrc-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); background: var(--sunken); border-radius: 6px; padding: 5px 6px 5px 8px; }
.vrc-file .ic { color: var(--text-3); }
.vrc-file button { border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 0 2px; display: grid; place-items: center; font: inherit; }
.vrc-band { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); background: var(--sunken); border-radius: 8px; padding: 7px 10px; }
.vrc-band.is-rec, .vrc-band.is-fout { color: #B42A33; background: var(--red-soft, #FCEBEC); }
/* De tekst vult de band. Bij een opname staat de stip vóór de tekst: tot 12 okt rekte deze regel dan
   de STIP uit tot een rode balk van de halve breedte (hij is de eerste span) en schoof de tekst naar rechts. */
.vrc-band > span:first-child:not(.vrc-dot), .vrc-band > .vrc-dot + span { flex: 1; min-width: 160px; }
.vrc-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #D64550; animation: veraDot 1.1s infinite; }
.vrc-fout { font-size: 12.5px; color: #B42A33; background: var(--red-soft, #FCEBEC); border-radius: 8px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vrc-ta { border: none; outline: none; resize: none; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text); background: transparent; width: 100%; min-height: 44px; padding: 0; }
.vrc-rij { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vrc-knop { height: 32px; padding: 0 9px; border: none; background: transparent; border-radius: 8px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; }
.vrc-knop:hover { background: var(--sunken); }
.vrc-knop .ic { font-size: 16px; color: inherit; }
.vrc-knop.is-rec { color: #B42A33; background: var(--red-soft, #FCEBEC); }
.vrc-knop:disabled { opacity: .5; cursor: default; }
.vrc-hint { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.vrc-send:disabled { opacity: .5; cursor: default; box-shadow: none; }
.vr-voet { font-size: 11px; color: var(--text-3); }
.is-los .vr-voet { text-align: center; }

/* ---- de resultaatfases: wachtkaart (componeren) -------------------------------------------- */
.vr-resultaat { flex: 1; min-height: 0; overflow: auto; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; animation: veraFade .3s ease both; }
.vr-res-links { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vr-res-rechts { flex: 0 1 440px; min-width: 0; position: sticky; top: 0; }
.vr-stroomkaart { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); overflow: hidden; }
.vr-stroomkaart-kop { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.vr-stroomkaart-titel { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; }
.vr-stroomkaart-svg { padding: 14px; display: flex; justify-content: center; align-items: flex-start; background: var(--surface-2); overflow: auto; }
.vr-stroomkaart-svg svg { max-width: 100%; height: auto; }
.vr-wacht { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.vr-wacht-tekst { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.vr-wacht-vera { align-self: center; width: 120px; line-height: 0; }   /* Vera schrijft terwijl ze samenstelt */
.vr-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- beoordelen (PR 6): kopkaart, categoriepillen, wijzigingskaarten, legenda ----------------- */
.vr-scherm .tag-indigo { background: var(--vr-user-bubble); color: #4338CA; }
.vr-rkop { position: sticky; top: 0; z-index: 2; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); padding: 14px 16px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.vr-rkop-tekst { flex: 1 1 240px; min-width: 0; }
.vr-rkop-titel { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.vr-rkop-sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.vr-rkop-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-pillen { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.vr-pil-cat { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.vr-pil-cat .ic { font-size: 13px; color: inherit; }
.vr-pil-cat:hover { background: var(--sunken); }
.vr-pil-cat.is-aan { background: #1E1F26; border-color: #1E1F26; color: #fff; }
.vr-pil-cat.is-leeg { opacity: .5; cursor: default; }
.vr-pil-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--slate-soft); color: var(--text-2); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.vr-pil-cat.is-aan .vr-pil-n { background: rgba(255, 255, 255, .18); color: #fff; }
.vr-waarschuw { display: flex; gap: 8px; align-items: flex-start; background: var(--amber-soft, #FBF0D9); color: #8A5A00; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.vr-waarschuw .ic { font-size: 16px; color: inherit; flex: none; margin-top: 1px; }
.vr-leeg { background: var(--surface); border: 1px dashed var(--border-3, #C9CCD4); border-radius: 12px; padding: 22px; font-size: 13.5px; color: var(--text-2); text-align: center; }
.vr-wk { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); animation: veraIn .32s var(--vr-ease) both; transition: border-color .2s ease, box-shadow .2s ease; scroll-margin-top: 150px; }
.vr-wk.is-gekozen { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.vr-wk-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; cursor: pointer; }
.vr-wk-num { width: 22px; height: 22px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: #fff; background: #E0A93B; }
.vr-wk-num.is-goedgekeurd { background: #2FA060; }
.vr-wk-num.is-afgewezen { background: #DADCE2; color: var(--text-2); }
.vr-wk-titel { flex: 1 1 160px; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.vr-wk-soort { font-size: 12px; color: var(--text-3); }
.vr-wk-stand { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.vr-wk-stand .vr-chev { color: var(--text-3); font-size: 15px; transition: transform .2s var(--vr-ease); }
.vr-wk-stand .vr-chev.is-open { transform: rotate(180deg); }
.vr-wk.is-beslist .vr-wk-titel { color: var(--text-2); }
.vr-wk-romp { padding: 0 14px 14px 46px; display: flex; flex-direction: column; gap: 10px; animation: veraDrop .22s var(--vr-ease) both; }
.vr-wk-waar, .vr-wk-bron, .vr-wk-reg { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.vr-wk-waar .ic, .vr-wk-bron .ic, .vr-wk-reg .ic { font-size: 14px; color: var(--text-3); flex: none; margin-top: 1px; }
.vr-wk-bron span, .vr-wk-reg span { overflow-wrap: anywhere; }
.vr-vn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vr-vn-kol { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vr-vn-l { font-size: 10.5px; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.vr-vn-r { display: flex; gap: 6px; align-items: flex-start; border-radius: 6px; padding: 6px 8px; font-size: 12.5px; line-height: 1.5; }
.vr-vn-r.is-voor { background: var(--red-soft, #FCEBEC); color: #8E1F27; }
.vr-vn-r.is-voor .vr-vn-x { text-decoration: line-through; }
.vr-vn-r.is-na { background: var(--green-soft, #E6F6EC); color: #0F5A2F; }
.vr-vn-r.is-leeg { background: var(--surface-2); color: var(--text-3); font-style: italic; }
.vr-vn-t { font-weight: 600; flex: none; }
.vr-vn-x { min-width: 0; overflow-wrap: anywhere; }
.vr-rollen { display: flex; flex-direction: column; gap: 6px; }
.vr-rol { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.vr-rol-ini { width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--green-soft, #E6F6EC); color: #0F7A3D; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.vr-rol-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vr-rol-naam { font-size: 13px; font-weight: 600; }
.vr-rol-oms { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.vr-wk-blok { display: flex; gap: 6px; align-items: flex-start; background: var(--slate-soft); color: var(--slate-text); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; }
.vr-wk-blok .ic { font-size: 14px; color: inherit; flex: none; margin-top: 2px; }
.vr-wk-knoppen { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.vr-res-rechts .vr-stroomkaart-kop { display: flex; flex-direction: column; gap: 8px; }
.vr-stroom-sub { font-size: 12px; font-weight: 400; color: var(--text-3); }
.vr-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.vr-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.vr-leg-blok { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid #DADCE2; background: #FFFFFF; flex: none; }
.vr-leg-blok.is-goed { background: #E6F6EC; border-color: #2FA060; }
.vr-leg-blok.is-open { background: #FBF0D9; border-color: #E0A93B; }
.vr-leg-blok.is-nieuw { background: #FFFFFF; border: 1.5px dashed #8A8D98; }
.vr-fade { animation: veraFade .35s ease both; }
.vr-stroom-hint { display: flex; gap: 6px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-3); }
.vr-stroom-hint .ic { font-size: 14px; color: inherit; }

/* ---- klaar (PR 6): de afrondkaart ----------------------------------------------------------- */
.vr-klaar { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--vr-shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 16px; animation: veraPop .3s var(--vr-ease) both; }
.vr-klaar-tegel { width: 40px; height: 40px; border-radius: 10px; background: var(--green-soft, #E6F6EC); color: #2FA060; display: inline-flex; align-items: center; justify-content: center; }
.vr-klaar-tegel .ic { font-size: 22px; color: inherit; }
.vr-klaar-vera { width: 96px; line-height: 0; }   /* Vera met het vinkje: afgerond */
.vr-klaar-kop { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.vr-klaar-tekst { margin-top: 4px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.vr-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vr-tegel { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.vr-tegel-l { font-size: 11.5px; color: var(--text-3); }
.vr-tegel-n { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }

/* ---- interviewmeting op AI-instellingen (PR 7, super-admin) ------------------------------------ */
.im-kaart .ais-feat-main { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; max-width: none; }   /* de uitslagtabel krijgt de hele breedte */
.im-kaart .ais-feat-main > .muted { max-width: 60ch; }
.im-lijst { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.im-rij { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.im-rij input { width: 16px; height: 16px; flex: none; }
.im-voortgang { margin-left: auto; font-size: 12px; }
.im-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.im-fout { font-size: 12px; color: var(--red-strong, #B42A33); }
.im-tabel td, .im-tabel th { font-size: 12.5px; }
.im-tabel td:first-child, .im-tabel th:first-child { min-width: 220px; }   /* de scenarionaam brak per woord af */

/* ---- telefoon ------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .vr-meter-kop { min-height: 44px; padding: 10px 12px; }
  .vr-meter-lijst { grid-template-columns: 1fr; }
  .vr-meter-rij { min-height: 36px; }
  .vera-vr-voet .btn { min-height: 44px; }
  .vr-scherm { height: auto; min-height: 0; }
  .vr-kruimel { min-height: 44px; }
  .vr-kop-vera, .vr-kop-sub { font-size: 19px; }
  .vr-stepper { margin-left: 0; width: 100%; }
  .vr-stap { min-height: 36px; }
  .vr-chatwrap { padding-right: 0; }
  .vr-stroom-dock { position: static; width: 100%; align-items: stretch; max-height: none; margin-bottom: 8px; }
  .is-stroom-open .vr-stroom-dock { width: 100%; }
  .vr-stroom-knop { min-height: 44px; padding: 6px 12px 6px 10px; }
  .vr-stroom-lbl { display: inline; }
  .vr-kader { max-width: none; }
  .vr-draad { max-height: 60vh; padding: 12px; }
  .vr-msg, .vr-msg.is-user { max-width: 100%; }
  .vr-ack, .vr-bereikt { padding-left: 0; margin-left: 0; }
  .vr-status-knop, .vr-status .btn, .vr-optie, .vr-vraag-voet .btn, .vr-bereikt .btn, .vr-startkaart, .vrc-knop, .vrc-send, .vr-fout .btn, .vr-claim .btn, .vr-knoppen .btn { min-height: 44px; }
  .vr-start, .vr-dims { grid-template-columns: 1fr; }
  /* FR-050 VK1: de lat leesbaar onder 640px; kop en rijen hebben al een tikvlak van 44px. */
  .vr-lat-kop, .vr-lat-label { font-size: 14px; }
  .vr-lat-reden { font-size: 13px; }
  .vr-composer-blok { padding: 10px 12px 12px; }
  .vrc-hint { display: none; }
  /* Onder 16px zoomt iOS in zodra je in het veld tikt. */
  .vrc-ta { font-size: 16px; }
  .vr-hero-vera { width: 96px; height: 96px; }
  .vr-resultaat { flex-direction: column; }
  .vr-res-links, .vr-res-rechts { flex: none; width: 100%; position: static; }
  .vr-rkop { position: static; }
  .vr-rkop-knoppen { width: 100%; }
  .vr-rkop-knoppen .btn, .vr-wk-knoppen .btn { min-height: 44px; flex: 1 1 auto; }
  .vr-pil-cat { min-height: 36px; }
  .vr-wk-kop { min-height: 44px; }
  .vr-wk-romp { padding-left: 14px; }
  .vr-vn { grid-template-columns: 1fr; }
  .im-rij { min-height: 44px; }
  .im-knoppen .btn { min-height: 44px; }
}