/* KLANTENSERVICE-INBOX (module 12, fase B klus 9, 03-10-2026): de indeling van ontwerp v6, overgenomen uit
   public/ontwerp/klantenservice.css en begrensd tot .ks-scherm. Alleen variabelen uit de bouwdoos.
   Hieronder het kopcommentaar van het ontwerp. */
/* KLANTENSERVICE-ONTWERP v1–v3 (fase A, 03-10-2026). Alleen variabelen uit de bouwdoos; geen letterlijke kleuren.
   Kaartvorm, tabbalk, chips, pillen en het tandwielpaneel komen uit bouwdoos.css; hier alleen de indeling. */
.ks { max-width: var(--inhoud-max); margin: 0 auto; padding: var(--a4) var(--a4) var(--a5); display: grid; gap: var(--a3); }
.ks-band { margin: 0; font-size: var(--tekst-klein); background: var(--letop-vlak); color: var(--letop-tekst); border-radius: var(--radius-kaart); padding: var(--a1) var(--a3); }
.ks-band a { color: inherit; }
.ks-klein { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-zin { margin: 0; font-size: var(--tekst-tabel); line-height: 1.45; }
.ks-fouttekst { color: var(--fout-tekst); }
.ks-kruimel { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-kop { display: flex; align-items: flex-start; gap: var(--a3); }
.ks-kop h1 { margin: 0; font-size: var(--tekst-kop); }
.ks-sub { margin: 2px 0 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-tandwiel { margin-left: auto; }
.ks-scherm .bd-knop:focus-visible, .ks-scherm .bd-chip:focus-visible, .ks-rij-kop:focus-visible, .ks-scherm .bd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ks-scherm a.bd-knop { display: inline-flex; align-items: center; text-decoration: none; }

/* Wat nu */
.ks-watnu { display: grid; gap: var(--a2); }
.ks-watnu h2, .ks-kh-boom h2, .ks-kh-voorstellen h2 { margin: 0; font-size: var(--tekst-titel); }
.ks-watnu-getallen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }

/* Filters in lagen */
.ks-filters { display: grid; gap: var(--a2); }
.ks-bronnen { display: flex; gap: var(--a1); flex-wrap: wrap; }
.ks-bronchip { font-size: var(--tekst-klein); min-height: 28px; height: 28px; }
.ks-scope { margin: 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* De lijst: één kaart per vraag, detail uitgeklapt in de rij */
.ks-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.ks-rij { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); }
.ks-rij--open { box-shadow: 0 0 0 2px var(--accent), var(--schaduw); }
.ks-rij-kop { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 76px 40px minmax(0, 1fr) auto auto; gap: var(--a2); align-items: center; padding: var(--a2) var(--a3); min-height: 60px; }
.ks-rij-kop .bd-mini { width: 40px; height: 40px; }
.ks-rij-tekst { display: grid; min-width: 0; gap: 2px; }
.ks-rij-bron { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-rij-vraag { font-size: var(--tekst-voorstel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-rij-termijn { text-align: right; font-variant-numeric: tabular-nums; }
.ks-kleur { min-width: 64px; justify-content: center; }

.ks-detail { padding: 0 var(--a3) var(--a3); display: grid; gap: var(--a2); border-top: 1px solid var(--lijn); }
.ks-triage { margin: var(--a2) 0 0; font-size: var(--tekst-tabel); }
.ks-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--a4); align-items: start; }
.ks-context { display: grid; gap: var(--a2); min-width: 0; }
.ks-deel h4, .ks-concept h4 { margin: 0 0 4px; font-size: var(--tekst-tabel); font-weight: 600; }
.ks-vraag { margin: 0; padding: var(--a2) var(--a3); background: var(--achtergrond); border-radius: var(--radius-kaart); font-size: var(--tekst-voorstel); }
.ks-tabel { width: 100%; font-size: var(--tekst-tabel); }
.ks-tabel .bd-num { white-space: nowrap; }
.ks-listing span[aria-hidden] { font-weight: 700; }
.ks-listing--ja span[aria-hidden] { color: var(--goed-tekst); }
.ks-listing--nee span[aria-hidden] { color: var(--fout-tekst); }

.ks-concept { display: grid; gap: var(--a2); min-width: 0; }
.ks-conceptbron { margin: 0; }
.ks-tekst { width: 100%; box-sizing: border-box; height: auto; min-height: 220px; font: inherit; font-size: var(--tekst-tabel); line-height: 1.5; padding: var(--a2); resize: vertical; }
.ks-regels { font-size: var(--tekst-klein); }
.ks-regels-kop { margin: 0 0 4px; }
.ks-regels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--a3); }
.ks-regel span[aria-hidden] { font-weight: 700; }
.ks-regel--ok span[aria-hidden] { color: var(--goed-tekst); }
.ks-regel--fout { color: var(--fout-tekst); }
.ks-knoppen { display: flex; gap: var(--a1); flex-wrap: wrap; align-items: center; }
.ks-concept--rood { background: var(--fout-vlak); color: var(--fout-tekst); padding: var(--a3); border-radius: var(--radius-kaart); }

/* Keuzehulp */
.ks-kh-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--a4); align-items: start; }
.ks-kh-boom, .ks-kh-voorstellen { display: grid; gap: var(--a3); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3) var(--a4); }
.ks-stap h3 { margin: 0 0 var(--a1); font-size: var(--tekst-basis); display: flex; gap: var(--a1); align-items: center; }
.ks-stapnr { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--radius-rond); background: var(--accent-licht); color: var(--accent); font-size: var(--tekst-klein); font-weight: 700; }
.ks-chips { display: flex; flex-wrap: wrap; gap: var(--a1); }
.ks-chips .bd-chip[disabled] { opacity: 1; color: var(--tekst-zacht); border-style: dashed; cursor: not-allowed; }
.ks-antwoord { display: grid; gap: var(--a2); border-top: 1px solid var(--lijn); padding-top: var(--a3); }
.ks-antwoord-kop, .ks-voorstel-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a2); align-items: center; }
.ks-antwoord-kop h3, .ks-voorstel-kop h3 { margin: 0; font-size: var(--tekst-voorstel); }
.ks-antwoord-tekst { margin: 0; white-space: pre-wrap; font: inherit; font-size: var(--tekst-tabel); line-height: 1.5; background: var(--achtergrond); padding: var(--a3); border-radius: var(--radius-kaart); }
.ks-voorstel { display: grid; gap: var(--a2); padding-bottom: var(--a3); border-bottom: 1px solid var(--lijn); }
.ks-voorstel:last-child { border-bottom: 0; padding-bottom: 0; }
.ks-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); }
.ks-drie > div { display: grid; gap: 2px; }
.ks-drie b { font-size: var(--tekst-titel); font-variant-numeric: tabular-nums; }
.ks-drie span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* Tandwiel */
.ks-tw-deel { display: grid; gap: var(--a1); padding-bottom: var(--a3); border-bottom: 1px solid var(--lijn); }
.ks-tw-deel h3 { margin: 0; font-size: var(--tekst-basis); }
.ks-veld { display: grid; gap: 4px; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-veld .bd-veld { color: var(--tekst); font-size: var(--tekst-tabel); }
.ks-tw-tekst { height: auto; min-height: 52px; font: inherit; padding: var(--a1) var(--a2); }
.ks-tw-rij { margin: 0; display: grid; gap: 2px; font-size: var(--tekst-tabel); }

/* Toast: minstens 6 s, sluitkruis, Ongedaan */
.ks-toast { position: fixed; left: 50%; bottom: var(--a4); transform: translateX(-50%); z-index: 50; max-width: min(720px, calc(100vw - 32px)); display: flex; gap: var(--a2); align-items: center;
  background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw), var(--schaduw); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); font-size: var(--tekst-tabel); }
.ks-skelet { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); }

@media (prefers-reduced-motion: reduce) { .ks-scherm * { transition: none !important; animation: none !important; } }

/* Mobiel (390 px): lijst en detail onder elkaar, concept vóór de context, versturen onderin vast */
@media (max-width: 700px) {
  .ks { padding: var(--a3) var(--a3) 96px; }
  .ks-watnu-getallen { grid-template-columns: 1fr; }
  .ks-rij-kop { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "mini tekst termijn" "mini kleur onderwerp"; padding: var(--a2); }
  .ks-rij-kop .ks-kleur { grid-area: kleur; justify-self: start; }
  .ks-rij-kop .bd-mini { grid-area: mini; }
  .ks-rij-tekst { grid-area: tekst; }
  .ks-rij-onderwerp { grid-area: onderwerp; justify-self: end; }
  .ks-rij-termijn { grid-area: termijn; }
  .ks-rij-vraag { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ks-detail { padding: 0 var(--a2) var(--a2); }
  .ks-detail-raster { grid-template-columns: 1fr; gap: var(--a3); }
  .ks-detail-raster .ks-concept { order: -1; }
  .ks-concept .ks-knoppen { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; }
  .ks-knoppen .bd-knop { min-height: 44px; }
  .ks-kh-raster { grid-template-columns: 1fr; }
  .ks-kh-boom, .ks-kh-voorstellen { padding: var(--a3); }
  .ks-tabel th:nth-child(3), .ks-tabel td:nth-child(3) { display: none; }
}

/* Lange titels, modelnummers en URL's breken af in plaats van het scherm te verbreden (390 px). */
.ks-detail-raster > *, .ks-deel { min-width: 0; }
.ks-zin, .ks-klein, .ks-vraag, .ks-antwoord-tekst { overflow-wrap: anywhere; }

/* Verdeling groen/geel/rood op de kaart "Open" (vorm én woord, nooit alleen kleur) */
.ks-balk { width: 100%; height: 10px; display: block; background: var(--achtergrond); border-radius: var(--radius-rond); }
.ks-balk-groen { fill: var(--goed-tekst); }
.ks-balk-geel { fill: var(--letop-tekst); }
.ks-balk-rood { fill: var(--fout-tekst); }
.ks-balk-legenda { display: flex; gap: var(--a2); flex-wrap: wrap; margin-top: 4px; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-balk-teken--groen { color: var(--goed-tekst); } .ks-balk-teken--geel { color: var(--letop-tekst); } .ks-balk-teken--rood { color: var(--fout-tekst); }
.ks-watnu .bd-stat-beeld { min-width: 0; }

/* ═══ v2 en v3 ═══ */
.ks-mailbox { margin: 0; display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; font-size: var(--tekst-tabel); background: var(--letop-vlak); color: var(--letop-tekst); border-radius: var(--radius-kaart); padding: var(--a1) var(--a3); }
.ks-mailbox .bd-knop { margin-left: auto; }
.ks-mailbox .bd-knop--tertiair { background: var(--vlak); }
.ks-mailbox .ks-klein { color: inherit; }
.ks-ringtekst { display: block; font-size: var(--tekst-klein); color: var(--tekst-zacht); margin-top: 4px; max-width: 220px; }
.ks-chipstrook { display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.ks-toetsen { margin-left: auto; }
.ks-groep { display: grid; gap: var(--a2); }
.ks-groep-kop { margin: var(--a2) 0 0; font-size: var(--tekst-titel); display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.ks-rij2 { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); }
.ks-rij2-kop { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) auto; gap: var(--a3); align-items: center; padding: var(--a2) var(--a3); min-height: 60px; }
.ks-rij2-kop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ks-termijn { display: grid; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ks-termijn b { font-size: var(--tekst-titel); }
.ks-termijn span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-termijn--fout b, .ks-termijn--fout span { color: var(--fout-tekst); }
.ks-termijn--letop b { color: var(--letop-tekst); }
.ks-rij-chip { white-space: nowrap; }
.ks-afwijkend { margin: 0; font-size: var(--tekst-tabel); color: var(--letop-tekst); background: var(--letop-vlak); border-radius: var(--radius-veld); padding: 4px var(--a2); }
.ks-feiten { display: grid; gap: var(--a3); }
.ks-feit h4 { margin: 0 0 4px; font-size: var(--tekst-tabel); }
.ks-stappen2 { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a1); }
.ks-stap2 { display: grid; gap: 2px; font-size: var(--tekst-tabel); border-top: 3px solid var(--lijn); padding-top: 4px; }
.ks-stap2--ja { border-top-color: var(--goed-tekst); }
.ks-stap2--onbekend { border-top-style: dashed; border-top-color: var(--tekst-zacht); }
.ks-stap2-punt { font-weight: 700; color: var(--goed-tekst); min-height: 1em; }
.ks-stap2--onbekend .ks-stap2-punt { color: var(--tekst-zacht); }
.ks-staaf { display: grid; grid-template-columns: minmax(0, 1fr) 90px 32px; gap: var(--a1); align-items: center; font-size: var(--tekst-klein); }
.ks-staaf-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-staaf-baan { height: 8px; background: var(--achtergrond); border-radius: var(--radius-rond); overflow: hidden; }
.ks-staaf-baan i { display: block; height: 100%; background: var(--accent); }
.ks-staaf b { text-align: right; font-variant-numeric: tabular-nums; }
.ks-allecontext summary, .ks-regels2 summary, .ks-voorproef summary { cursor: pointer; font-size: var(--tekst-tabel); color: var(--accent); }
.ks-allecontext { display: grid; gap: var(--a1); }
.ks-allecontext[open] > *:not(summary) { margin-top: 4px; }
.ks-keuzes { display: flex; gap: var(--a1); flex-wrap: wrap; }
.ks-tekst2 { min-height: 160px; resize: none; overflow: hidden; }
.ks-regels2 ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--tekst-klein); }
.ks-regel--kijk { color: var(--letop-tekst); }
.ks-regel--kijk span[aria-hidden] { font-weight: 700; }
.ks-klein-wit { font-size: var(--tekst-klein); opacity: .85; }
.ks-info { margin: 0; padding-left: var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); display: grid; gap: 2px; }
.ks-info b { color: var(--tekst); font-weight: 600; }
.ks-leren { border-top: 1px solid var(--lijn); padding-top: var(--a2); }
.ks-verstuurbalk .bd-knop[disabled] { opacity: 1; background: var(--achtergrond); border-color: var(--lijn); color: var(--tekst-zacht); cursor: not-allowed; }
.ks-minis { display: inline-flex; gap: 2px; align-items: center; }
.ks-minis .bd-mini { width: 32px; height: 32px; }
.ks-voorstel-kop { grid-template-columns: auto minmax(0, 1fr); }
.ks-zonderbron-kop { margin-top: var(--a3) !important; }
.ks-zonderbron { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.ks-zonderbron li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--a2); align-items: center; }
.ks-zonderbron li > span { display: grid; min-width: 0; }
.ks-zonderbron .ks-rij-vraag { font-size: var(--tekst-tabel); }
.ks-veld .bd-veld--zoek { width: 100%; max-width: 420px; }

@media (max-width: 700px) {
  .ks-rij2-kop { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "termijn tekst chip"; gap: var(--a2); padding: var(--a2); }
  .ks-rij2-kop .bd-mini { display: none; }
  .ks-rij2-kop .ks-termijn { grid-area: termijn; } .ks-rij2-kop .ks-rij-tekst { grid-area: tekst; } .ks-rij2-kop .ks-rij-chip { grid-area: chip; align-self: start; }
  .ks-rij2 .ks-rij-vraag { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--tekst-basis); }
  .ks-chipstrook { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ks-chipstrook .bd-chip { flex: 0 0 auto; }
  .ks-toetsen { display: none; }
  .ks-verstuurbalk { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; }
  .ks-mailbox .bd-knop { margin-left: 0; }
}

/* ═══ v3 ═══ */
.ks-rij2--open { box-shadow: 0 0 0 2px var(--accent), var(--schaduw); }
.ks-stat--te-laat .bd-stat-getal { color: var(--fout-tekst); }
.ks-telbalk { width: 160px; height: auto; display: block; }
.ks-telbalk text { font-size: var(--tekst-bijschrift); fill: var(--tekst); }
.ks-telbalk-baan { fill: var(--achtergrond); }
.ks-telbalk-vol { fill: var(--goed-tekst); }
.ks-scheiding { width: 1px; height: 20px; background: var(--lijn); margin: 0 var(--a1); }
.ks-wachtlijst { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); }
.ks-bronlijst { margin: 2px 0; padding-left: var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); display: grid; gap: 2px; }
.ks-staaf--dit .ks-staaf-label { font-weight: 600; color: var(--tekst); }
.ks-staaf--dit .ks-staaf-baan i { background: var(--letop-tekst); }
.ks-vraag-meta { display: block; margin-top: 4px; }
.ks-afzender { margin: 0; display: flex; gap: var(--a3); flex-wrap: wrap; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-onderwerpkeuze { display: inline-flex; gap: var(--a1); align-items: center; }
.ks-onderwerpkeuze .bd-veld { height: 32px; font-size: var(--tekst-tabel); }
.ks-verstuurbalk { display: grid; gap: var(--a1); }
.ks-meer summary { cursor: pointer; font-size: var(--tekst-tabel); color: var(--accent); }
.ks-meer[open] { display: grid; gap: var(--a1); }
.ks-oordeel { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a2); display: grid; gap: 4px; }
.ks-oordeel .bd-chip { height: 28px; min-height: 28px; }
.ks-klantvoorbeeld { border: 1px dashed var(--lijn); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a1); }
.ks-klantstappen { margin: 0; padding-left: var(--a4); display: flex; gap: var(--a4); flex-wrap: wrap; font-size: var(--tekst-tabel); }
.ks-voorstel--kort .ks-zin { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.ks-kern { color: var(--tekst); }
[data-versie="v3"] .ks-concept .ks-knoppen { position: static; }

@media (max-width: 700px) {
  [data-versie="v3"] .ks-watnu-strook { display: flex; overflow-x: auto; gap: var(--a2); scroll-snap-type: x mandatory; padding-bottom: 4px; }
  [data-versie="v3"] .ks-watnu-strook > * { flex: 0 0 82%; scroll-snap-align: start; }
  [data-versie="v3"] .ks-verstuurbalk { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; box-shadow: 0 -1px 0 var(--lijn); }
  [data-versie="v3"] .ks-tekst2 { scroll-margin-bottom: 120px; }
  .ks-scheiding { display: none; }
}

/* ═══ v4: het gesprek centraal, kanaal als merk, standaardreacties ═══ */
.ks-scherm .kanaal-chip img { display: block; }
.ks-kanaal-klein { font-size: var(--tekst-klein); }
.ks-rij-bron { display: flex; gap: var(--a1); align-items: center; }
.ks-rij-vraag4 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--tekst-voorstel); line-height: 1.35; }
.ks-gesprek-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--a4); align-items: start; padding-top: var(--a3); }
.ks-gesprek { display: grid; gap: var(--a3); min-width: 0; }
.ks-gesprek-wie { margin: 0 0 6px; display: flex; gap: var(--a2); align-items: center; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
h4.ks-gesprek-wie { font-size: var(--tekst-tabel); color: var(--tekst); font-weight: 600; }
.ks-bericht { border: 1px solid var(--lijn); border-radius: var(--radius-laag); border-top-left-radius: 4px; padding: var(--a3); max-width: 92%; }
.ks-bericht-tekst { margin: 0; font-size: var(--tekst-titel); line-height: 1.45; overflow-wrap: anywhere; }
.ks-openbaar { margin: 0; }
.ks-antwoordbericht { border: 2px solid var(--accent); border-radius: var(--radius-laag); border-top-right-radius: 4px; padding: var(--a3); margin-left: 8%; }
.ks-sjkeuze { height: 32px; font-size: var(--tekst-tabel); max-width: 240px; }
.ks-context4 { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
.ks-context4 h4 { margin: 0; font-size: var(--tekst-tabel); }
.ks-samen { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--a2); font-size: var(--tekst-klein); }
.ks-samen dt { color: var(--tekst-zacht); }
.ks-samen dd { margin: 0; overflow-wrap: anywhere; }
.ks-context4 > .bd-knop { justify-self: start; }
.ks-wwkregel { margin: var(--a2) 0 0; font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.ks-wwkregel a { color: var(--accent); }
.ks-bewaarsj { border-top: 1px solid var(--lijn); padding-top: var(--a2); display: grid; gap: var(--a1); }
.ks-sjkop { display: flex; gap: var(--a3); align-items: flex-start; justify-content: space-between; }
.ks-sjkop .bd-knop { flex: 0 0 auto; }
.ks-sjlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.ks-sjrij { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); }
.ks-sjrij--aan { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ks-sjrij-knop { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; gap: 2px; padding: var(--a2) var(--a3); }
.ks-sjrij-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ks-sjrij-naam { font-weight: 600; font-size: var(--tekst-basis); }
.ks-sjrij-kern { font-size: var(--tekst-tabel); color: var(--tekst); }
.ks-sjeditor { display: grid; gap: var(--a2); }
.ks-vinkje { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-tabel); }
.ks-sjvoorbeeld { display: grid; gap: var(--a1); }
.ks-rechts { margin-left: auto; }

@media (max-width: 700px) {
  .ks-gesprek-raster { grid-template-columns: 1fr; }
  .ks-bericht { max-width: 100%; }
  .ks-antwoordbericht { margin-left: 0; padding: var(--a2); }
  .ks-sjkop { flex-direction: column; }
  [data-versie="v4"] .ks-watnu-strook { display: flex; overflow-x: auto; gap: var(--a2); scroll-snap-type: x mandatory; padding-bottom: 4px; }
  [data-versie="v4"] .ks-watnu-strook > * { flex: 0 0 82%; scroll-snap-align: start; }
  [data-versie="v4"] .ks-verstuurbalk { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; box-shadow: 0 -1px 0 var(--lijn); }
}
[data-versie="v4"] .ks-concept .ks-knoppen { position: static; }

/* ═══ v5: statussen, antwoordopties, order en acties ═══ */
.ks-statustabs { margin-top: var(--a1); }
.ks-bericht--jij { margin-left: auto; border-color: var(--accent); background: var(--accent-licht); border-top-left-radius: var(--radius-laag); border-top-right-radius: 4px; }
.ks-bericht-tekst--jij { font-size: var(--tekst-basis); white-space: pre-wrap; }
.ks-opties { display: flex; gap: var(--a1); flex-wrap: wrap; align-items: center; }
.ks-opties .ks-sjkeuze { height: 36px; max-width: 260px; }
.ks-aipaneel { border: 1px dashed var(--lijn); border-radius: var(--radius-kaart); padding: var(--a2); display: grid; gap: var(--a1); }
[data-versie="v5"] .ks-gesprek-raster { grid-template-columns: minmax(0, 1fr) 340px; }
.ks-orderblok, .ks-actieblok { display: grid; gap: var(--a1); padding-bottom: var(--a2); border-bottom: 1px solid var(--lijn); }
.ks-orderblok h4, .ks-actieblok h4, .ks-context4 section > h4 { margin: 0; font-size: var(--tekst-tabel); }
.ks-ordernr { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: var(--a1); }
.ks-link { color: var(--accent); }
.ks-actie { display: grid; gap: 2px; }
.ks-actie .bd-knop { justify-self: start; }
.ks-bevestig { border: 1px solid var(--letop-tekst); background: var(--letop-vlak); border-radius: var(--radius-kaart); padding: var(--a2); display: grid; gap: var(--a1); }
.ks-bevestig .ks-zin { color: var(--letop-tekst); }
@media (max-width: 700px) {
  [data-versie="v5"] .ks-gesprek-raster { grid-template-columns: 1fr; }
  [data-versie="v5"] .ks-watnu-strook { display: flex; overflow-x: auto; gap: var(--a2); scroll-snap-type: x mandatory; padding-bottom: 4px; }
  [data-versie="v5"] .ks-watnu-strook > * { flex: 0 0 82%; scroll-snap-align: start; }
  [data-versie="v5"] .ks-verstuurbalk { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; box-shadow: 0 -1px 0 var(--lijn); }
  .ks-bericht--jij { max-width: 100%; }
}
[data-versie="v5"] .ks-concept .ks-knoppen { position: static; }
.ks-verstuurbalk .bd-knop[disabled] .ks-klein-wit { opacity: 1; }

/* ═══ v6: het casescherm in de opbouw van bol ═══ */
.ks-case { display: grid; gap: var(--a2); padding-top: var(--a2); }
.ks-casekop p { margin: 0; display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; font-size: var(--tekst-tabel); }
.ks-kopieer { min-width: 28px; height: 28px; padding: 0 6px; }
.ks-case-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--a3); align-items: start; }
.ks-details { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); min-width: 0; }
.ks-details h3, .ks-tijdlijn h3, .ks-caseonder h3 { margin: 0; font-size: var(--tekst-titel); }
.ks-det-foto { width: 120px; height: 120px; object-fit: contain; justify-self: center; }
.ks-details dl { margin: 0; display: grid; gap: var(--a2); }
.ks-det dt { font-size: var(--tekst-klein); font-weight: 600; color: var(--tekst); }
.ks-det dd { margin: 2px 0 0; font-size: var(--tekst-tabel); overflow-wrap: anywhere; }
.ks-details hr { border: 0; border-top: 1px solid var(--lijn); margin: 0; }
.ks-case-midden { display: grid; gap: var(--a3); min-width: 0; }
.ks-tijdlijn { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); }
.ks-dag { margin: var(--a1) 0; text-align: center; }
.ks-dag span { display: inline-block; background: var(--achtergrond); border-radius: var(--radius-rond); padding: 2px var(--a2); font-size: var(--tekst-klein); font-weight: 600; }
.ks-tl { border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); max-width: 78%; display: grid; gap: 4px; }
.ks-tl--vraag { background: var(--achtergrond); }
.ks-tl--antwoord { background: var(--accent-licht); margin-left: auto; }
.ks-tl--notitie { background: var(--vlak); border: 1px dashed var(--accent); margin-left: auto; }
.ks-tl-kop { margin: 0; font-size: var(--tekst-tabel); display: flex; gap: var(--a1); align-items: center; }
.ks-tl-tekst { margin: 0; font-size: var(--tekst-voorstel); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ks-tl--antwoord .ks-tl-tekst, .ks-tl--notitie .ks-tl-tekst { font-size: var(--tekst-basis); }
.ks-tl-tijd { margin: 0; text-align: right; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-caseonder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--a3); }
.ks-kanalen, .ks-caseacties { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); align-content: start; }
.ks-inbol { font-size: var(--tekst-klein); font-weight: 500; opacity: .9; }
.bd-knop--secundair .ks-inbol, .bd-knop--primair .ks-inbol { opacity: 1; }
.ks-meerhouder { position: relative; display: inline-block; }
.ks-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; list-style: none; margin: 0; padding: 4px; min-width: 280px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); }
.ks-menu-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; width: 100%; padding: var(--a1) var(--a2); border-radius: var(--radius-veld); font-size: var(--tekst-tabel); }
.ks-menu-item:hover, .ks-menu-item:focus-visible { background: var(--accent-licht); outline: none; }
.ks-menu-item[disabled] { cursor: not-allowed; color: var(--tekst-zacht); }
.ks-notitieveld { display: grid; gap: var(--a1); }
[data-versie="v6"] .ks-concept .ks-knoppen { position: static; }
.ks-verstuurbalk .bd-knop[disabled] .ks-klein-wit { opacity: 1; }
@media (max-width: 700px) {
  .ks-case-raster, .ks-caseonder { grid-template-columns: 1fr; }
  .ks-case-midden { order: -1; }
  .ks-tl { max-width: 100%; }
  .ks-menu { left: 0; right: auto; min-width: 0; width: min(320px, calc(100vw - 48px)); }
  [data-versie="v6"] .ks-watnu-strook { display: flex; overflow-x: auto; gap: var(--a2); scroll-snap-type: x mandatory; padding-bottom: 4px; }
  [data-versie="v6"] .ks-watnu-strook > * { flex: 0 0 82%; scroll-snap-align: start; }
  [data-versie="v6"] .ks-verstuurbalk { position: sticky; bottom: 0; background: var(--vlak); padding: var(--a2) 0; z-index: 2; box-shadow: 0 -1px 0 var(--lijn); }
}
.ks-kanalen .bd-knop[disabled] { color: var(--tekst-zacht); border-color: var(--lijn); cursor: not-allowed; }

/* ═══ v6, aanvullingen 03-10: chips bovenaan de case, opties in volgorde, standaardreacties onder het tandwiel ═══ */
.ks-casechips { align-items: center; }
.ks-casereden { margin: 0; }
.ks-statuschip { margin-left: var(--a1); }
.ks-optie-nr { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--radius-rond); background: var(--accent-licht); color: var(--accent); font-size: var(--tekst-klein); font-weight: 700; }
.ks-schakelaar { margin: 0; }
[data-ks-twbreed] { width: min(900px, 100vw); max-width: 100vw; }
[data-ks-twbreed] .ks-kh-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-ks-twbreed] .ks-kh-boom, [data-ks-twbreed] .ks-kh-voorstellen { box-shadow: none; border: 1px solid var(--lijn); }
@media (max-width: 700px) { [data-ks-twbreed] .ks-kh-raster { grid-template-columns: 1fr; } }
[data-ks-twterug] { justify-self: start; }

/* Fase B: wat het ontwerp niet had */
/* Kopregel en inhoud even breed (nawerk inbox, 03-10, Twan: "kopregel te smal"): dezelfde schermcontainer als Retouren
   (bd-scherm + max-width var(--inhoud-max), de maat van .bd-schermkop), en één kolom die niet breder kan worden dan het
   scherm (minmax(0, 1fr)); een 'auto'-kolom groeide mee met een lange regel en liep dan voorbij de kop. */
.ks-scherm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a3); max-width: var(--inhoud-max); position: relative; }
.ks-scope { margin: 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ks-laag1 { margin: 0; font-size: var(--tekst-tabel); background: var(--letop-vlak); color: var(--letop-tekst); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); }
.ks-alleenbol { display: grid; gap: var(--a2); background: var(--achtergrond); border-radius: var(--radius-kaart); padding: var(--a3); }
.ks-ongetoetst { color: var(--letop-tekst); }
.ks-tw-sj { display: grid; gap: var(--a2); padding: var(--a2) 0; border-bottom: 1px solid var(--lijn); }
.ks-tw-sj:last-child { border-bottom: 0; }
.ks-tw-schakel { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); min-height: 28px; }
.ks-tw-sub { margin: var(--a2) 0 0; font-size: var(--tekst-basis); }
.ks-tw-sj .bd-knop[disabled] { opacity: .6; cursor: not-allowed; }   /* staat zichtbaar zonder hover */