/* NEVARO — huisstijl van de klant-voorkant.
 * Alles wat met kleur en vorm te maken heeft staat hier bovenaan als variabele,
 * zodat de huisstijl per klant aan te passen is zonder de rest aan te raken.
 * Geen externe lettertypes of scripts: alles komt van de eigen server (privacy). */

/* DE NIEUWE UITVOERING IS ER NIET MEER (12-10-2026, 1.9.24). Op het woord van de eigenaar
 * (*"je mag het nieuwe thema weghalen, dus we houden dan alleen het oude thema over met licht en
 * donker"*) is de nieuwe uitvoering uit deze voorkant gehaald: het scherm in onze eigen groen, met
 * de bijbehorende indeling (menu links, het gesprek als kaart, het paneel rechts) en de twee keuzes
 * "Nieuw, licht" en "Nieuw, donker" in het instellingenvenster. Wat overblijft is één look met
 * licht en donker — de look die in de opmerkingen hieronder "professioneel" heet en die de klant in
 * het instellingenvenster als "Licht" en "Donker" kiest.
 * Waar in de opmerkingen hieronder nog gesproken wordt over "de nieuwe uitvoering" of "speels", gaat
 * het over het werk dat eruit is gehaald; de uitgehaalde bestanden staan in
 * /opt/data/backups/nieuw-thema-eruit-20261012/ (binnen de omgeving). Een aantal bedragen uit die
 * uitvoering is eerder overgenomen in de look die overblijft — daar verwijzen die opmerkingen naar.
 * Er is geen enkele regel opmaak uit de nieuwe uitvoering achtergebleven. */

:root {
  --accent: #1F6F5C;
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface-2: #F1EFEA;
  --ink: #17191C;
  --ink-soft: #5C6167;
  --ink-faint: #8B9096;
  --line: #E5E2DC;
  --shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 8px 24px rgba(20, 22, 26, .05);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Lettergrootte van de hele voorkant. De knoppen bij "Lettergrootte" in het
     instellingenvenster zetten dit hoger of lager (app.js: applyFont). Vijf standen
     van 0,7 (Extra klein) tot 1,3 (Extra groot), in de namen en de volgorde van de
     eigenaar (29-09-2026): extra klein · klein · normaal · groot · extra groot. Zonder
     keuze geldt "normaal" (0,9) sinds 1.4.20 — één stapje van 10% kleiner dan de maat
     van vóór die dag. Op de knop "Groot" staat precies de maat van vóór die dag (1),
     zodat er altijd één klik terug is naar hoe het was. */
  --fs: .9;
}

html[data-theme="dark"] {
  --bg: #0F1113;
  --surface: #17191C;
  --surface-2: #1D2024;
  --ink: #ECEDEE;
  --ink-soft: #A2A7AD;
  --ink-faint: #7C8188;
  --line: #262A2F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
}

/* Kleur van GESELECTEERDE tekst (30-09-2026, melding van de eigenaar: "als je de tekst selecteert dan
   is de kleur van de font hetzelfde als de achtergrond en valt dus weg" — gezien bij "Oude bestanden
   verwijderen" en "Oude chats uit de lijst halen"). Zonder eigen regel bepaalt de BROWSER van de
   bezoeker de kleur van de selectie; staat die op dezelfde kleur als de tekst, dan verdwijnt de tekst
   zodra je hem selecteert. Deze regel zet onze eigen kleuren — in beide thema's dezelfde — zodat het
   niet meer van de instellingen van de bezoeker afhangt. Eén regel voor de hele voorkant, dus ook
   voor elk venster en elke lijst. */
::selection { background: var(--accent); color: #FFFFFF; }
::-moz-selection { background: var(--accent); color: #FFFFFF; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* De maat van de hele voorkant hangt aan deze twee regels. Alle tekst staat in
   rem (gerekend vanaf dit html-element), de rest van het scherm in vaste maten.
   Daarom schaalt met --fs alleen de tekst mee en blijven de panelen, randen en
   pictogrammen staan: die zijn zo groot dat ze met de muis en met een vinger te
   raken blijven, en het scherm loopt er niet vol van. De kleinste lettertjes
   (onder .8rem — de kopjes in de lijsten, de etiketten) hebben verderop een
   ondergrens van 9,6px, anders wordt een etiket van 7,7px onleesbaar.
   Bij --fs: .8 (de standaard sinds 29-09-2026) is de lopende tekst 12px; bij
   --fs: 1 is het precies zoals het was: html 16px (de standaard van de browser)
   en de lopende tekst op 15px. */
html { font-size: calc(16px * var(--fs)); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(15px * var(--fs));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

.screen { height: 100%; }

/* ------------------------------------------------------------ woordmerk */

.wordmark { display: flex; flex-direction: column; gap: 2px; }

/* Merkteken + naam naast elkaar. Het merkteken erft de huisstijlkleur
   (currentColor), dus per klant mee te kleuren zonder het logo aan te raken. */
.lockup { display: flex; align-items: center; gap: 12px; }
.lockup--stack { gap: 14px; }

.mark {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--accent);
}
.mark--lg { width: 38px; height: 38px; }
.mark--xl { width: 52px; height: 52px; }

.wordmark__name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

.wordmark__tag {
  font-size: max(9.6px, .6rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.wordmark--lg .wordmark__name { font-size: 1.6rem; letter-spacing: .26em; }
.wordmark--lg .wordmark__tag { font-size: max(9.6px, .7rem); }
.wordmark--xl .wordmark__name { font-size: 2.1rem; letter-spacing: .3em; }
.wordmark--xl .wordmark__tag { font-size: max(9.6px, .78rem); }

/* ------------------------------------------------------------ inloggen */

.login {
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: rise .4s ease both;
}

.login__card .lockup { margin-bottom: 16px; }

.login__label {
  font-size: max(9.6px, .72rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.login__input {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.login__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s, transform .1s, border-color .15s;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface-2); }

.login__error {
  margin: 0;
  font-size: .85rem;
  color: #B4232A;
}
html[data-theme="dark"] .login__error { color: #FF8A8A; }

.login__hint {
  margin: 6px 0 0;
  font-size: max(9.6px, .74rem);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- de app */

.app {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: 100%;
}

/* zijkant */

.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 14px 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  min-height: 0;
}

.side__top { padding: 0 6px; }

.side__new {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  font-size: .9rem;
}

.plus {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
}

/* zoeken in gesprekken (filtert de lijst hieronder) */

.side__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 8px 0 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

.side__search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.side__search svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.side__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
  padding: 9px 0;
}

.side__search input::placeholder { color: var(--ink-faint); }
.side__search input::-webkit-search-cancel-button { display: none; }

.side__search-clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.side__search-clear:hover { color: var(--ink); }

/* De lege-lijst-boodschap wordt door de voorkant zelf gezet (die weet of er op
   titel of op inhoud is gezocht), dus hier geen tekst meer. */

.side__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
}

.chatitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.chatitem:hover { background: var(--surface-2); color: var(--ink); }

.chatitem--active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  font-weight: 550;
}

.chatitem__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatitem__time {
  font-size: max(9.6px, .7rem);
  color: var(--ink-faint);
  flex: none;
}

/* Etiket bij gesprekken uit een ander kanaal (WhatsApp, automatisch):
   die horen bij het geheugen van de assistent en zijn hier niet te verwijderen —
   vandaar het etiket en geen ×. */
.chatitem__badge {
  flex: none;
  font-size: max(9.6px, .6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 .34rem;
  line-height: 1.55;
  opacity: .8;
}

.chatitem__del {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s;
}

.chatitem:hover .chatitem__del { opacity: 1; }
.chatitem__del:hover { color: #B4232A; }

/* Een regel met een etiket en een pin (het WhatsApp-gesprek) kan niet weg (22-09-2026):
   het kruisje blijft staan — anders lijkt de regel stuk — maar het ziet er anders uit en
   legt bij een klik uit waarom het niet gaat. */
.chatitem__del.is-vast { opacity: 1; cursor: default; color: var(--ink-faint); }
.chatitem__del.is-vast:hover { color: var(--ink-faint); }

/* Punaise: alleen zichtbaar als je er met de muis overheen gaat (net als het
   verwijderknopje), behalve op een telefoon — daar is er geen zweven, dus staat
   hij altijd aan, anders kun je nooit vastpinnen. */
.chatitem__pin {
  flex: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  color: var(--ink-faint);
  transition: opacity .12s, color .12s;
}

.chatitem__pin svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatitem:hover .chatitem__pin { opacity: 1; }
.chatitem__pin:hover { color: var(--accent); }
.chatitem__pin.is-on { opacity: 1; color: var(--accent); }
.chatitem__pin.is-on svg { fill: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Het WhatsApp-gesprek staat altijd vast: de pin is altijd zichtbaar en niet
   aanklikbaar (de server weigert losmaken ook, met een nette melding). */
.chatitem__pin.is-vast { opacity: 1; cursor: default; }
.chatitem__pin:disabled { cursor: default; }

@media (hover: none) {
  .chatitem__pin, .chatitem__del { opacity: 1; }
}

/* Kopjes boven de groepen in de gesprekkenlijst. */
.side__group {
  padding: 10px 10px 4px;
  font-size: max(9.6px, .62rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.side__none {
  padding: 10px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.side__list--empty::after {
  content: "Nog geen gesprekken. Begin met \2018Nieuwe chat\2019.";
  display: block;
  padding: 10px;
  font-size: .8rem;
  color: var(--ink-faint);
}

.side__foot { border-top: 1px solid var(--line); padding-top: 8px; }

.linkbtn {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: .8rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

.linkbtn:hover { color: var(--ink); background: var(--surface-2); }

/* Kort bericht onderin de lijst (bijvoorbeeld "3 gesprekken uit de lijst gehaald"). */
.side__note {
  margin: 0 0 2px;
  padding: 4px 10px;
  font-size: max(9.6px, .78rem);
  color: var(--accent);
}

/* Het kruisje waarmee de klant zo'n regel zelf wegklikt (01-10-2026, 1.6.20). Tot die versie
   verdween de regel vanzelf na 5 seconde — dat mocht niet meer. */
.side__note-x {
  margin-left: 6px;
  padding: 0 3px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: var(--ink-faint);
}

.side__note-x:hover { color: var(--ink); }

/* hoofdkolom */

.main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  height: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  /* Sinds 28-09-2026 staat de balk als laag boven de gesprekken zichtbaar, zodat het vakje
     van de zweeftekst (zie .tip hieronder) over de gesprekken heen mag vallen in plaats van
     erachter te verdwijnen. Zonder dit schildert de browser het gesprek eroverheen, want
     een laag van de balk komt niet buiten de balk uit. */
  position: relative;
  z-index: 30;
  /* Sinds 29-09-2026: de balk mag krimpen tot het scherm.
     Zonder deze regel bepaalt de titel (die op één regel staat) hoe breed de hele kolom
     wordt: op een telefoon van 390 pixels kwam het gesprek daardoor op 515 pixels uit —
     gemeten 29-09-2026 in test01, met een gesprekstitel van 26 tekens. De tekst en het
     plaatje liepen dan rechts buiten beeld en waren met geen mogelijkheid te bereiken
     (html en body hebben overflow: hidden). Met min-width: 0 krimpt de titel en zet hij
     zijn beletselteken (…) zoals bedoeld. Boven de 900 pixels verandert er niets. */
  min-width: 0;
}

/* De naam van het gesprek bovenin (02-10-2026, 1.7.5). De titelruimte zelf is één rij: de naam
   (aanklikbaar), het potloodje, en tijdens het aanpassen het invulvak met het vinkje en het
   rondpijltje. De knoppenrij rechts staat hier LOS van en blijft op zijn plaats. */
.topbar__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.titel__tekst {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.titel__tekst:hover { color: var(--ink); }
.titel__tekst:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.titel__penwrap { flex: none; }

.titel__pen {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-faint);
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s, color .15s, background .15s;
}

.titel__pen:hover { opacity: 1; color: var(--accent); background: var(--surface-2); }
.titel__pen:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.titel__pen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.titel__vak {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.titel__invoer {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 8px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.titel__knop {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.titel__knop:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent); }
.titel__knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.titel__knop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Op een smal scherm (telefoon) staan er tien knoppen in deze balk en houdt de naam maar een paar
   pixels over — die was daar al nauwelijks leesbaar (gemeten 02-10-2026 op 430 pixels: de naam
   kreeg 35 pixels, waarvan het potloodje er 22 opmaakte). Zodra de klant de naam wil aanpassen
   krijgt de titelruimte daarom een EIGEN REGEL: de knoppen blijven precies staan waar ze staan
   (het instellingenknopje blijft helemaal rechts), de balk wordt tijdelijk één regel hoger, en het
   invulvak heeft de volle breedte. Boven de 700 pixels verandert er niets. */
@media (max-width: 700px) {
  .topbar.is-titel-bewerken { flex-wrap: wrap; row-gap: 8px; }
  .topbar.is-titel-bewerken .topbar__title { flex: 1 1 100%; order: 2; }
  /* margin-left: auto houdt de knoppenrij op de bovenste regel tegen de RECHTERKANT: zonder dat
     schuift hij naar de linkerkant op zodra de titel een eigen regel krijgt (gemeten: het
     instellingenknopje zakte van 420 naar 381 op een scherm van 430). */
  .topbar.is-titel-bewerken .topbar__right { order: 1; margin-left: auto; }
}

/* Een afgewezen naam: losse strook onder de balk, zodat er niets verspringt. */
.titel__fout {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 31;
  padding: 5px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: .78rem;
  color: #B4232A;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Knoppen in de topbalk: thema en gesprek opslaan. Altijd zichtbaar (de
   hamburger hiernaast is de enige die alleen op mobiel bestaat). */
.topbtn {
  position: relative;   /* het telletje van de takenlijst hangt in de hoek */
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.topbtn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.topbtn:disabled { opacity: .35; cursor: default; }
.topbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.topbtn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Het thema staat sinds het instellingenvenster niet meer in de balk: één plek
   waar je hem zet, en dat is het tandwiel. */

.topbtn.is-done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.topbtn.is-failed { color: #B4232A; }

/* Zweeftekst bij de knoppen in de balk (28-09-2026): een eigen vakje in plaats van het
   ballonnetje van de browser. Dat ballonnetje toont alleen de naam, is niet te versieren,
   en verschijnt pas na ongeveer een seconde wachten. Dit is een EXTRAATJE: het werkt alleen
   met een muis of met het toetsenbord, dus wie een telefoon gebruikt ziet het niet — daar
   draagt het blok voorbeeldvragen op het lege scherm de uitleg. Er staat daarom nooit iets
   alleen in de zweeftekst. */
.tipwrap { position: relative; display: flex; }

.tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 250px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: default;
}

/* Het gat tussen de knop en het vakje hoort bij het vakje: anders valt de aanwijzing weg
   zodra de muis erheen reist en klapt het vakje dicht voordat je er iets kunt aanklikken. */
.tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.tipwrap:hover .tip,
.tipwrap:focus-within .tip { display: block; }

/* Heeft het toestel ooit een aanraking gemeld, dan is het geen muis (zie app.js: daar komt de klasse
   "geen-muis" op de pagina). Een telefoon laat na een aanraking de knop "zwevend" achter, en dan zou
   het vakje blijven staan en het gesprek bedekken. Daarom blijven de vakjes daar dicht — het blok op
   het lege scherm is daar de uitleg, en dat is de drager. */
html.geen-muis .tipwrap:hover .tip,
html.geen-muis .tipwrap:focus-within .tip { display: none; }

.tip__kop { display: block; margin-bottom: 2px; color: var(--ink); }
.tip__tekst { display: block; }

.tip__zin {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: .84rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
}
.tip__zin:hover { border-color: var(--accent); }
.tip__zin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.iconbtn {
  display: none;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.iconbtn span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--ink-soft);
  border-radius: 2px;
}

/* gesprek */

.thread {
  min-height: 0;
  overflow-y: auto;
  /* Bewust NIET 'smooth': tijdens het meekruipen moet het scherm direct volgen,
     en een klant die zelf omhoog scrolt mag niet teruggetrokken worden. */
  scroll-behavior: auto;
  padding: 0 20px;
}

.welcome {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 0 60px;
}

.welcome__line {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* Het hintje onder de voorbeeldvragen (06-10-2026, 1.8.25). Klein en rustig: het mag niet met de
   voorbeeldvragen wedijveren — dat is de drager van dit scherm. Eén regel die je kunt aanklikken en
   die het instellingenvenster opent, waar het thema en de lettergrootte staan. De stippellijn zegt
   ook zonder muis dat er iets achter zit; de zweeftekst is er alleen voor wie een muis gebruikt. */
.welcome__hintwrap {
  justify-content: center;
  margin-top: 12px;
}

.welcome__hint {
  padding: 2px 3px;
  font: inherit;
  font-size: max(8.8px, .78rem);
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-faint) 65%, transparent);
  cursor: pointer;
}
.welcome__hint:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.welcome__hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* De zweeftekst van dit regeltje hangt in het midden onder de regel (het vakje is 250 px breed en
   zou anders aan één kant buiten het gesprek vallen). */
.welcome__hintwrap .tip {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* De voorbeeldvragen op het lege scherm (28-09-2026). Bewust gewone knoppen in de huisstijl:
   zonder muis (op een telefoon) is er niets aan te wijzen, en dit is de eerste seconde dat
   een klant naar het scherm kijkt. Aanklikken zet de zin in het invoerveld; er wordt niets
   verstuurd. De zinnen zelf staan in index.html — dat is de enige plek waar ze staan. */
.voorstel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin-top: 10px;
}

.voorstel__kop {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: max(9.6px, .78rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.voorstel__zin {
  padding: 8px 14px;
  font: inherit;
  font-size: .92rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.voorstel__zin:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
  background: var(--surface-2);
}
.voorstel__zin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.msgs {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.msg { animation: rise .25s ease both; }

.msg--user {
  align-self: flex-end;
  max-width: 80%;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--assistant { align-self: stretch; color: var(--ink); }

/* Kopiëren van een antwoord. Op een muis verschijnt hij bij hover, op een
   aanraakscherm staat hij altijd aan (anders is er geen weg om bij te komen). */
.msg__tools { display: flex; gap: 6px; margin-top: 8px; }

.copybtn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-faint);
  font: inherit;
  font-size: max(9.6px, .74rem);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .15s, border-color .15s;
}

.msg--assistant:hover .copybtn,
.copybtn:focus-visible { opacity: 1; }

@media (hover: none) { .copybtn { opacity: 1; }
}

.copybtn:hover { background: var(--surface-2); color: var(--ink); }
.copybtn.is-done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.copybtn.is-failed { color: #B4232A; border-color: color-mix(in srgb, #B4232A 35%, var(--line)); }

.msg__body > *:first-child { margin-top: 0; }
.msg__body > *:last-child { margin-bottom: 0; }
.msg__body p { margin: 0 0 .85em; }
.msg__body h1, .msg__body h2, .msg__body h3 {
  margin: 1.3em 0 .5em;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.msg__body ul, .msg__body ol { margin: 0 0 .85em; padding-left: 1.3em; }
.msg__body li { margin: .25em 0; }
.msg__body a { color: var(--accent); text-underline-offset: 2px; }
.msg__body code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--surface-2);
  padding: 2px 5px;
  border-radius: 5px;
}
.msg__body pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 .9em;
}
.msg__body pre code { background: none; padding: 0; font-size: .84em; line-height: 1.55; }
.msg__body blockquote {
  margin: 0 0 .9em;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
}
.msg__body hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.msg__body table { border-collapse: collapse; margin: 0 0 .9em; font-size: .9em; }
.msg__body th, .msg__body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }

.msg__error {
  font-size: .9rem;
  color: #B4232A;
  background: color-mix(in srgb, #B4232A 7%, transparent);
  border: 1px solid color-mix(in srgb, #B4232A 20%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Zelf gestopt is geen fout: rustige grijstint in plaats van rood. */
.msg__note {
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-block;
}
html[data-theme="dark"] .msg__error { color: #FF9B9B; }

.cursor {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--accent);
  opacity: .85;
  animation: blink 1s steps(2, start) infinite;
}

/* De invoerbalk is de onderrand van het gespreksvenster; het klokje eronder hangt aan
   DEZE doos (position: relative), zodat het meebeweegt als het invulvak groeit. */
.composer {
  position: relative;
  padding: 0 20px calc(18px + env(safe-area-inset-bottom));
}
/* HET KLOKJE RECHTSONDER (11-10-2026, 1.9.5). Het hangt aan de onderrand van de invoerbalk en staat
   dus rechtsonder in het gespreksvenster, in de lege strook onder het invulvak — hetzelfde vak waar de
   rest van het venster zijn marge heeft. Klein en gedempt: dezelfde maat als de regel onder de
   invoerbalk, in de kleur van gewone bijtekst (iets donkerder dan het fijnste grijs, zodat de tijd ook
   op een telefoon te lezen is). De muis klikt er dwars doorheen, zodat er nooit iets misgaat bij het
   typen of klikken, en de cijfers staan op vaste breedte zodat het klokje niet heen en weer springt als
   de minuut omslaat. */
.klokje {
  position: absolute;
  right: 22px;
  bottom: 2px;
  font-size: max(9.6px, .78rem);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.composer__box {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 8px 8px 8px 14px;
  transition: border-color .15s, box-shadow .15s;
}

.composer__box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.composer textarea {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  max-height: 190px;
  padding: 8px 0;
}

.composer textarea::placeholder { color: var(--ink-faint); }

.send {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  cursor: pointer;
  transition: background .15s, opacity .15s;
}

.send svg { width: 20px; height: 20px; fill: #fff; }

.send:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

.send:disabled { opacity: .4; cursor: default; }

/* 1.4.33 (29-09-2026): geen pictogram meer in de stopknop, alleen het woord Stop — wens van de
   eigenaar: "alleen stop dus niet het stop vierkantje". Daarom is de aparte opmaak voor het
   pictogram hier weg en is de ruimte links gelijk aan rechts. */
.send--stop { background: var(--surface-2); border: 1px solid var(--line); }
.send--stop:hover { background: var(--line); }

/* Het tweede knopje in de invoerbalk (01-10-2026, 1.6.12): pijltje met een plus — "in de
   wachtrij zetten". Met opzet ANDERS dan het pijltje ernaast: dat is een gevuld vierkant in de
   huisstijlkleur, dit is een lichte knop met een rand en een pijltje in de huisstijlkleur. Hij
   moet ze in één oogopslag uit elkaar houden (wens van de eigenaar: "het tweede knopje moet
   duidelijk anders zijn dan het pijltje ... anders klikt hij mis"). */
.send--queue {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
}
.send--queue svg { fill: var(--accent); }
.send--queue:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

.composer__status {
  max-width: 760px;
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: max(9.6px, .78rem);
  color: var(--ink-faint);
  padding-left: 4px;
}

.composer__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
  flex: none;
}

.composer__hint {
  margin-left: auto;
  font-size: max(9.6px, .72rem);
  color: var(--ink-faint);
  opacity: .85;
}

/* Op een telefoon bestaat Ctrl+C niet — daar is de stopknop de weg. */
@media (hover: none) {
  .composer__hint { display: none; }
}

/* mobiel */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 19, .45);
  z-index: 8;
  animation: fade .2s ease both;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .side {
    position: fixed;
    z-index: 9;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82%;
    max-width: 320px;
    transform: translateX(-102%);
    transition: transform .24s ease;
    box-shadow: var(--shadow);
  }

  .app--menu .side { transform: none; }

  .iconbtn { display: flex; }

  .thread { padding: 0 14px; }
  .msgs { padding: 20px 0 30px; gap: 18px; }
  .msg--user { max-width: 92%; }
  .composer { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
  .klokje { right: 12px; }
  .wordmark--xl .wordmark__name { font-size: 1.6rem; }
  .mark--xl { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .thread { scroll-behavior: auto; }
}

/* animaties */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; }
}
@keyframes blink { 50% { opacity: 0; }
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; }
}

/* scrollbalk */

.thread::-webkit-scrollbar, .side__list::-webkit-scrollbar, .fm__list::-webkit-scrollbar, .td__list::-webkit-scrollbar { width: 10px; }
.thread::-webkit-scrollbar-thumb, .side__list::-webkit-scrollbar-thumb, .fm__list::-webkit-scrollbar-thumb, .td__list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-faint) 35%, transparent);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

/* Oude chats opruimen: eigen venster (geen systeemvenster), want de klant moet
   eerst het aantal zien voordat hij klikt. */

.prune {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.prune::backdrop { background: rgba(12, 14, 16, .45); }

.prune__card {
  width: min(430px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.prune__title { margin: 0; font-size: 1.05rem; }

.prune__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
}

.prune__row { display: flex; align-items: center; gap: 10px; }

.prune__label { font-size: .86rem; color: var(--ink-soft); }

.prune__select {
  flex: 1;
  font: inherit;
  font-size: .9rem;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.prune__count { margin: 0; font-size: .9rem; min-height: 1.3em; }

.prune__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Kalender: één maand in een eigen venster. Zelfde opzet als het opruimvenster,
   zodat er geen tweede soort venster in de voorkant ontstaat. */

.cal {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.cal::backdrop { background: rgba(12, 14, 16, .45); }

.cal__card {
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.cal__head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
}

.cal__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-align: center;
  /* De maandnamen komen in het Nederlands met een kleine letter binnen. */
  text-transform: capitalize;
}

.cal__nav, .fm__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.cal__nav:hover, .fm__nav:hover { background: var(--surface-2); color: var(--ink); }
.cal__nav:focus-visible, .fm__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal__nav svg, .fm__nav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal__dow span {
  padding: 2px 0;
  font-size: max(9.6px, .62rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 40px;
  padding: 3px 0 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.cal__day:hover { background: var(--surface-2); }
.cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dagen van de vorige/volgende maand staan er wel (het raster blijft dan heel),
   maar duidelijk zachter: ze zijn hier niet de bedoeling. */
.cal__day--buiten { color: var(--ink-faint); opacity: .5; }

.cal__day--vandaag {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 650;
}

.cal__stip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* De lege stip houdt de rij even hoog, zodat de cijfers niet verspringen. */
.cal__stip--leeg { background: transparent; }

.cal__hint { margin: 0; font-size: max(9.6px, .76rem); line-height: 1.5; color: var(--ink-faint); }

.cal__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Documenten (bestandsbeheer): de gedeelde map tussen klant en assistente.
   Zelfde vensteropzet als de kalender en het opruimvenster. */

.fm {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.fm::backdrop { background: rgba(12, 14, 16, .45); }

.fm__card {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.fm__head { display: flex; align-items: center; gap: 10px; }
.fm__title { flex: 1; margin: 0; font-size: 1.05rem; }
/* De naam van dit venster is sinds 01-10-2026 niet meer te zien (verzoek van de eigenaar: alle
   teksten bij het bestandsvenster weg). Hij blijft wél in de pagina staan als naam voor wie het
   scherm voorleest, en houdt met `flex: 1` de twee pictogrammen rechts. */
.fm__title--voorlezer { font-size: 0; line-height: 0; color: transparent; }

/* Het eigen gedeelte van de PLAATJES (01-10-2026, 1.6.5): boven de bestanden, want het is een
   eigen soort inhoud met een eigen termijn (24 uur) — de bestanden eronder hebben geen termijn.
   Een liggende strook die zelf scrolt, zodat tien plaatjes het venster niet hoger maken; staat er
   geen plaatje, dan is het hele vak er niet (app.js zet `hidden`). */
.fm__plaatjes {
  display: grid;
  gap: 6px;
  padding: 8px 8px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.fm__plaatjes-strook {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fm__plaatjes-strook::-webkit-scrollbar { height: 8px; }
.fm__plaatjes-strook::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-faint) 35%, transparent);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

/* Eén plaatje: het beeld, de naam en de datum. Aanklikken opent het plaatje zelf. */
.fm__plaatje {
  flex: none;
  width: 108px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.fm__plaatje:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fm__plaatje:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fm__plaatje-beeld {
  width: 100%;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}

.fm__plaatje-naam {
  font-size: max(9.6px, .74rem);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm__plaatje-datum { font-size: max(9.6px, .7rem); color: var(--ink-faint); }

/* Het merkteken op een render (16-10-2026): dezelfde vorm en kleur als het etiket in de
   bestandenlijst (.fm__badge), alleen kleiner — een renderkaart is zelf al klein. */
.fm__plaatje-merk {
  justify-self: start;
  padding: 0 .34rem;
  font-size: max(9.6px, .6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
}

.fm__plaatjes-regel { margin: 0; font-size: max(9.6px, .72rem); line-height: 1.4; color: var(--ink-faint); }
.fm__hint { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
/* Verbruik van de map als geheel: een vaste regel in het venster, zodat de klant ziet
   dat de map vol raakt voordat er iets niet meer bij kan. */
.fm__gebruik { margin: 0; font-size: max(9.6px, .78rem); line-height: 1.5; color: var(--ink-faint); }
/* Hoe lang de bestanden bewaard blijven (29-09-2026): één vaste regel direct onder het verbruik,
   altijd zichtbaar — op een telefoon is er geen muis, dus de uitleg mag niet in een zweeftekst
   zitten. Iets donkerder dan het verbruik, want het is iets wat de klant moet weten. */
.fm__bewaar { margin: 0; font-size: max(9.6px, .78rem); line-height: 1.5; color: var(--ink-soft); }
.fm__gebruik--bijna { color: #B4761A; }
.fm__gebruik--vol { color: #B4232A; font-weight: 600; }
html[data-theme="dark"] .fm__gebruik--bijna { color: #E8B15A; }
html[data-theme="dark"] .fm__gebruik--vol { color: #FF8A8A; }

.fm__list {
  max-height: 44vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 0 4px;
}

.fm__empty {
  margin: 0;
  padding: 14px 4px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.fm__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
}

.fm__row:hover { background: var(--surface-2); }

/* Mapje of document voor de naam. Lijnen, geen emoji — zelfde stijl als de rest. */
.fm__icoon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--ink-faint);
}

.fm__row--map .fm__icoon { color: var(--accent); }
.fm__row--map .fm__bestand { font-weight: 600; }

/* De map waar een gesleept bestand boven hangt (01-10-2026): hij licht op, zodat je ziet waar
   het heen gaat vóórdat je loslaat. Sinds die dag kun je een bestand ook echt op een map
   neerzetten — daarvoor gebeurde er niets en viel het bestand door naar de bovenste map. */
.fm__row--over {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Kruimelpad boven de lijst. Bij een diep pad schuift het op naar het einde. */
.fm__pad {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 26px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: .8rem;
}

.fm__kruimel {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
}

.fm__kruimel:hover { background: var(--surface-2); color: var(--ink); }
.fm__kruimel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fm__kruimel--nu { color: var(--ink); font-weight: 600; padding: 2px 4px; }
.fm__kruimel-scheiding { color: var(--ink-faint); }

/* De hele naam is de knop om te openen; daaronder staat de kleine regel met maat
   en tijd. min-width:0 houdt een lange bestandsnaam binnen de regel. */
.fm__naam {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fm__bestand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .87rem;
}

.fm__naam:hover .fm__bestand { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fm__naam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.fm__meta { font-size: max(9.6px, .72rem); color: var(--ink-faint); }

.fm__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 .34rem;
  font-size: max(9.6px, .6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
}

.fm__opslaan {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-faint);
  font: inherit;
  font-size: max(9.6px, .72rem);
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
}

.fm__opslaan:hover { background: var(--surface-2); color: var(--ink); }

.fm__weg {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}

.fm__weg:hover { color: #B4232A; }

/* Slepen-en-neerzetten. Op een aanraakscherm bestaat dit niet, daar is de knop. */
.fm__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}

.fm__drop.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.fm__droptext { margin: 0; font-size: .8rem; color: var(--ink-faint); }

/* Naam van een nieuwe map: een gewoon veld in ons eigen venster (22-09-2026). Daarvoor
   vroeg de browser het zelf, en die vraag kan de bezoeker uitzetten — dan leek de knop stuk. */
.fm__nieuwemap { display: grid; gap: 8px; }

.fm__status { margin: 0; font-size: max(9.6px, .78rem); line-height: 1.4; color: var(--accent); }
.fm__status--fout { color: #B4232A; }
html[data-theme="dark"] .fm__status--fout { color: #FF8A8A; }

.fm__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* PRULLENBAK (1.10.3, 15-10-2026). Een eigen vak onder de bestanden, met een eigen kop erboven,
   zodat het niet te verwarren is met een map: wat hier staat hoort niet meer bij de documentenmap
   (het telt er ook niet in mee) en gaat vanzelf weg. Alleen zichtbaar als er iets in staat; de
   regel onderaan komt van de server, uit dezelfde waarde waarmee opgeruimd wordt.
   Zelfde vormentaal als het plaatjesvak erboven: een eigen vlak met een rand, geen schaduw. */
.fm__prul {
  display: grid;
  gap: 6px;
  padding: 8px 8px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.fm__prul-kop { display: flex; align-items: center; gap: 8px; }

.fm__prul-titel {
  flex: 1;
  margin: 0;
  font-size: max(9.6px, .78rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* Leegmaken: klein en terughoudend — het is niet de gewone weg vooruit, en er gaat niets mee
   terug. De vraag ervoor staat in het gewone bevestigingsvenster (app.js). */
.fm__prul-leeg {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: max(9.6px, .74rem);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.fm__prul-leeg:hover { border-color: #B4232A; color: #B4232A; }
.fm__prul-leeg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-theme="dark"] .fm__prul-leeg:hover { border-color: #FF8A8A; color: #FF8A8A; }

.fm__prul-lijst { max-height: 22vh; }

/* Eén weggegooid item: naam met daaronder de maat, wanneer het weggegooid is en wanneer het vanzelf
   verdwijnt. Terugzetten staat als knop op de regel. */
.fm__prul-rij {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: var(--d-rij, 5px) 6px;
  border-radius: 8px;
}

.fm__prul-rij:hover { background: var(--surface); }
.fm__prul-icoon { color: var(--ink-faint); display: flex; }
.fm__prul-icoon svg { width: 18px; height: 18px; }

.fm__prul-tekst { display: grid; gap: 1px; min-width: 0; }
.fm__prul-naam {
  font-size: .875rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm__prul-meta { font-size: max(9.6px, .72rem); color: var(--ink-faint); }

.fm__prul-terug {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: max(9.6px, .76rem);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}

.fm__prul-terug:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fm__prul-terug:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fm__prul-regel { margin: 0; font-size: max(9.6px, .72rem); line-height: 1.4; color: var(--ink-faint); }

/* DE VASTGEZETTE PRULLENBAK (1.10.10, 16-10-2026). De regel valt iets op (hij staat vast), de pin is
   hetzelfde tekeningetje als bij een vastgezet gesprek, en het kruisje ziet er hetzelfde uit als bij
   een gesprek dat niet weg kan: zichtbaar, maar het doet niets. Geen nieuwe kleuren en geen nieuwe
   vormtaal — alleen de bestaande accentkleur, zwakker gemaakt. */
.fm__row--vast { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fm__row--vast:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.fm__pin {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
  fill: color-mix(in srgb, var(--accent) 25%, transparent);
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fm__weg.is-vast { cursor: default; color: var(--ink-faint); }
.fm__weg.is-vast:hover { color: var(--ink-faint); }

/* Wat de klant zelf aanleverde (24-09-2026): een eigen blok boven de documenten. Deze bestanden
   worden elke nacht opgeruimd; de lijst eronder is wat de assistente voor hem maakte. */
.fm__inlaat {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
}

.fm__inlaatkop {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
}

/* Slepen in het gespreksvenster (24-09-2026). Het vakje verschijnt zodra er een bestand boven het
   scherm hangt; het korte bericht ná het plaatsen gebruikt dezelfde vorm. Vast onderin, dus het
   duwt nooit iets in de layout. */
.sleep-hint {
  position: fixed;
  left: 50%;
  bottom: 108px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(600px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 16px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.sleep-hint__punt {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

.sleep-hint--toast { border-radius: 14px; }

/* Het kruisje in de korte melding onderin (01-10-2026, 1.6.20). Tot die versie viel de melding
   vanzelf weg na 8 seconde (na een fout 10) — dat mocht niet meer. */
.sleep-hint__x {
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 1px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: var(--ink-faint);
}

.sleep-hint__x:hover { color: var(--ink); background: var(--surface); }

.sleep-hint--fout {
  color: #8E1B21;
  background: #FBEEEE;
  border-color: #B4232A;
}

html[data-theme="dark"] .sleep-hint--fout { color: #FF8A8A; background: #2A1D1D; }

/* Taken: één gedeeld lijstje. Zelfde vensteropzet als de andere vensters. */

.td {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.td::backdrop { background: rgba(12, 14, 16, .45); }

.td__card {
  width: min(480px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.td__head { display: flex; align-items: center; gap: 10px; }
.td__title { flex: 1; margin: 0; font-size: 1.05rem; }

.td__nieuw { display: flex; gap: 8px; }

.td__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .9rem;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.td__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.td__voeg { flex: none; font-size: .88rem; padding: 11px 15px; }

.td__list {
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 0 4px;
}

.td__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 10px;
}

.td__item:hover { background: var(--surface-2); }

/* Etiket, potloodje en kruisje samen aan de rechterkant, in één kolom. */
.td__eind {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Het invoerveld dat verschijnt als je een taak aanpast. Het neemt de plaats van
   de tekst in, zodat de regel niet verspringt. */
.td__bewerk {
  font: inherit;
  font-size: .9rem;
  line-height: 1.45;
  width: 100%;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.td__bewerk:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.td__edit {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 0 3px;
  line-height: 1;
  cursor: pointer;
}

.td__edit:hover { color: var(--accent); }
.td__edit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Het vakje en de tekst zitten in één label, zodat een tik op de tekst ook afvinkt. */
.td__vak {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.td__box {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.td__tekst {
  min-width: 0;
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.td__item--klaar .td__tekst { color: var(--ink-faint); text-decoration: line-through; }

/* Kleine regel achter de taak als de assistente hem heeft toegevoegd. */
.td__label {
  align-self: center;
  font-size: max(9.6px, .6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  padding: 0 .34rem;
}

.td__del {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1.25;
  padding: 0 3px;
  cursor: pointer;
}

.td__del:hover { color: #B4232A; }

.td__kop {
  padding: 12px 6px 2px;
  font-size: max(9.6px, .62rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.td__leeg {
  margin: 0;
  padding: 14px 4px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.td__status { margin: 0; font-size: max(9.6px, .78rem); line-height: 1.4; color: var(--accent); }
.td__status--fout { color: #B4232A; }
html[data-theme="dark"] .td__status--fout { color: #FF8A8A; }

.td__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.td__wis {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: max(9.6px, .78rem);
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
}

.td__wis:hover:not(:disabled) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.td__wis:disabled { opacity: .45; cursor: default; }

/* Het aantal open taken op de topbalkknop, zodat je het ziet zonder te openen. */
.td__badge, .topbtn__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: max(9.6px, .62rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* Het plusje op een koppelknop in de balk (29-09-2026, 1.4.19). Wens van de eigenaar: "voor ieder
   bij de 3 knopjes mag je een klein + tekentje zetten". Het is een aanwijzing, geen alarm: het
   staat ín de knop (dus ook op een telefoon zichtbaar, anders dan de zweefvakjes), in de eigen
   kleur van het scherm, en het verdwijnt zodra er iets gekoppeld is (zie app.js: koppelPlusStand).
   Het witte randje laat het loskomen van de knop eronder. */
.topbtn__plus {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  font-size: max(11px, .7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ------------------------------------------------------------ instellingen
   Zelfde kaart en dezelfde koppen als de andere vensters, maar met blokken:
   elk onderwerp is een eigen stuk met een eigen kop, zodat je niet hoeft te
   lezen wat je niet zoekt. */

.set {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.set__card {
  width: min(540px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 20px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.set__head { display: flex; align-items: center; gap: 10px; }
.set__title { flex: 1; margin: 0; font-size: 1.05rem; }

.set__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.set__nav:hover { background: var(--surface-2); color: var(--ink); }
.set__nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.set__blok {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.set__blok:first-of-type { border-top: 0; }

.set__kop {
  margin: 0;
  font-size: max(9.6px, .78rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.set__hint {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.set__form { display: grid; gap: 6px; }
.set__label { font-size: .84rem; color: var(--ink-soft); }

.set__input {
  font: inherit;
  font-size: .9rem;
  padding: 10px 12px;
  margin-bottom: 6px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.set__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.set__status { margin: 0; font-size: .84rem; line-height: 1.5; min-height: 1.2em; color: var(--ink-soft); }
.set__status.is-ok { color: var(--accent); }
.set__status.is-fout { color: #B3261E; }

.set__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.set__actions.set__links { justify-content: flex-start; }

/* Mag over twee regels vallen: op een smalle telefoon passen het label en de knoppen
   niet naast elkaar. Zonder dit rekte de rij de hele kaart op en liep de inhoud van
   het instellingenvenster buiten de kaart (gemeten 29-09-2026 op 360 en 390 breed). */
.set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.set__sleutel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.set__sleutel-naam { font-size: .9rem; color: var(--ink); }
.set__sleutel-staat { font-size: .82rem; color: var(--ink-soft); }
.set__sleutel-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

.set__keuze {
  display: flex;
  flex-wrap: wrap;            /* de vier standen mogen op een telefoon over twee regels */
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 10px;
}
.set__opt {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .84rem;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.set__opt.is-aan { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.set__lijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: .86rem;
}
.set__lijst dt { color: var(--ink-faint); }
.set__lijst dd { margin: 0; color: var(--ink); word-break: break-word; }

/* Het venster Team: de teamleider bovenaan en opvallend (hij houdt het overzicht en verdeelt het
   werk), daaronder de specialisten die de klant zelf toevoegt. Dezelfde rust als de andere
   vensters; geen nieuwe kleuren. */
.team {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.team::backdrop { background: rgba(12, 14, 16, .45); }

.team__card {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.team__head { display: flex; align-items: center; gap: 10px; }
.team__title { flex: 1; margin: 0; font-size: 1.05rem; }
.team__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.team__nav:hover { border-color: var(--accent); color: var(--accent); }
.team__nav:disabled { opacity: .45; cursor: default; }
.team__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.team__hint { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.team__kop { margin: 4px 0 0; font-size: max(9.6px, .78rem); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

/* De teamleider als één rij (30-09-2026, 1.4.35). Wens van de eigenaar: "bij teamleider zit nog
   veeel wit, je mag rij met hoofden aanhouden". Hiervoor stond het hoofdje midden boven losse
   regels: de rechterhelft van de kaart bleef leeg en de kaart was ruim 230px hoog. Nu staat het
   hoofdje links, staan de naam en de taak ernaast en staan de twee knoppen rechts. De kaart is
   nog ongeveer 95px hoog en er blijft geen lege helft meer over. */
.team__leiderkaart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.team__leiderkaart > .hoofd { grid-column: 1; grid-row: 1 / span 4; justify-self: start; margin: 0; }
.team__leiderkaart > .team__label { grid-column: 2; grid-row: 1; }
.team__leiderkaart > .team__naam { grid-column: 2; grid-row: 2; }
.team__leiderkaart > .team__taak { grid-column: 2; grid-row: 3; }
.team__leiderkaart > .team__wijzig { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }
.team__leiderkaart > .team__vraag { grid-column: 3; grid-row: 3; justify-self: end; margin: 0; }
.team__label { font-size: max(9.6px, .72rem); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.team__naam { font-size: 1rem; }
.team__taak { font-size: .82rem; color: var(--ink-soft); }
.team__naamvorm { display: grid; gap: 6px; margin-top: 8px; grid-column: 1 / -1; }
.team__wijzig { justify-self: start; margin-top: 4px; }
.team__vraag { justify-self: start; margin-top: 6px; }

.team__lijst { display: flex; flex-direction: column; gap: 4px; }
.team__rij {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 6px;
  border-radius: 10px;
}
.team__rij:hover { background: var(--surface-2); }
.team__rijnaam { font-size: .92rem; }
.team__rijtaak { font-size: .82rem; color: var(--ink-soft); }
.team__weg {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.team__weg:hover { color: #B4232A; }
.team__leeg { margin: 0; font-size: .84rem; color: var(--ink-soft); }

.team__vorm { display: grid; gap: 6px; }
.team__status { margin: 0; font-size: .82rem; }
.team__status.is-ok { color: #1F6B3A; }
.team__status.is-fout { color: #B4232A; }
html[data-theme="dark"] .team__status.is-ok { color: #7BD69C; }
html[data-theme="dark"] .team__status.is-fout { color: #FF8A8A; }

.team__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* De + van het team staat onderaan het teamveld, direct onder de specialisten (wens van de
   eigenaar, 28-09-2026): daar is te zien dat je er een specialist bij zet. Het is dezelfde knop als
   eerst (.team__nav), alleen van plaats veranderd; hij staat links uitgelijnd onder de lijst. */
.team__voeg { display: flex; justify-content: flex-start; margin-top: 2px; }

.prune, .cal, .fm, .td, .set, .team, .kp {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .set__card { width: calc(100vw - 20px); max-height: 88vh; }
}

/* Een gemaakt plaatje komt als gewone afbeelding in het gesprek te staan (23-09-2026).
   Rustig van vorm: nooit breder dan het gesprek, met dezelfde rand als de rest van de
   kaart, en erop klikken opent hem op ware grootte in een nieuw tabblad. */
.chat-beeld {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

a > .chat-beeld:hover { border-color: var(--accent); }

/* Een plaatje dat opgeruimd is (de software ruimt de beeldmap na een dag op, de documentenmap
   elke nacht): geen kapot plaatje, maar één rustige regel. */
.chat-beeld-weg {
  display: block;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: .86rem;
}
/* ================================================================== dichtheid
   Eén vaste maat voor alle vensters die uit een knop komen: Documenten, Taken,
   Kalender, Team, Instellingen, Sleutels, Bevestigen en Opruimen.
   Alleen maat en ruimte — geen woord, geen knop, geen volgorde en geen werking
   verandert. Vastgelegd 29-09-2026 op verzoek van de eigenaar
   ("ik zie veel wit ... kan je zorgen dat het allemaal wat informatie denser wordt?").
   Gemeten op 1440x900, 1366x768 en 1280x720 (laptopmaten). */

:root {
  --d-pad: 12px 14px 10px;    /* binnenmarge van de kaart (was 20/22/20 en 16/18 onder) */
  --d-gap: 6px;               /* ruimte tussen de blokken (was 12 en 14) */
  --d-rij: 5px;               /* marge boven en onder een regel (was 7 en 8) */
  --d-knop: 28px;             /* de vierkante knopjes in de kop (was 34) */
  --d-regel: 1.35;            /* regelhoogte van lopende tekst (was 1.6) */
  --d-knopmarge: 9px 13px;    /* marge in de knoppen onderaan (was 12px 16px) */
}

/* Het venster blijft altijd binnen het scherm; alleen als het echt niet past scrolt het. */
.prune, .cal, .fm, .td, .set, .team, .kp {
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}

/* Eén kaart voor alle vensters. */
.prune__card, .cal__card, .fm__card, .td__card, .set__card, .team__card {
  gap: var(--d-gap);
  padding: var(--d-pad);
  line-height: var(--d-regel);
}

/* Lijstvensters: de lijst van het venster zelf krijgt de ruimte die overblijft en
   scrolt zelf, zodat het venster nooit hoger wordt dan het scherm. Alleen de lijst
   die direct in de kaart staat: de lijst in het aanleverblokje houdt zijn eigen
   hoogtegrens (44vh) en blijft dus zoals hij was. */
.fm__card, .td__card, .team__card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 20px);
}
.fm__card > .fm__list, .td__card > .td__list, .team__card > .team__lijst {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Instellingen: op een laag scherm mag het venster de hoogte gebruiken die er is. */
.set__card { max-height: min(calc(100dvh - 20px), 780px); }

/* Kop van het venster. */
.cal__head { grid-template-columns: var(--d-knop) 1fr var(--d-knop); }
.cal__nav, .fm__nav, .set__nav, .team__nav { width: var(--d-knop); height: var(--d-knop); border-radius: 8px; }

/* Regels in de lijsten. */
.fm__row, .td__item, .team__rij { padding: var(--d-rij) 6px; }
.fm__naam { gap: 1px; }
.fm__bestand { line-height: 1.3; }
.fm__meta, .fm__gebruik, .fm__bewaar, .fm__droptext, .fm__status, .td__status,
.set__hint, .cal__hint, .team__hint { line-height: 1.4; }

/* Kalender: kleinere dagen, dezelfde indeling. */
.cal__day { min-height: 30px; padding: 2px 0 3px; gap: 2px; }
.cal__dow span { padding: 1px 0; }

/* Losse blokken binnen de vensters. */
.fm__pad { min-height: 20px; }
.fm__inlaat { gap: 4px; margin-bottom: 6px; padding: 8px 10px; }
.fm__drop { gap: 8px; padding: 8px; }
.fm__empty, .td__leeg { padding: 8px 4px; }
.td__kop { padding: 8px 6px 2px; }
.set__blok { gap: 6px; padding: 10px 0; }
.set__sleutel { padding: 5px 0; }
.set__input { padding: 8px 10px; margin-bottom: 4px; }
.set__lijst { gap: 4px 16px; }
.prune__card { gap: 8px; }

/* Knoppen in de vensters. */
.btn { padding: var(--d-knopmarge); }
.td__input { padding: 8px 10px; }
.td__voeg { padding: 8px 13px; }

/* Op een telefoonbreedte blijft het venster binnen de rand (ongewijzigd gedrag). */
@media (max-width: 900px) {
  .set__card { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
}

/* Het venster Koppelen: post en agenda op één plek. Zelfde opzet als de andere vensters
   (instellingen, team): één kaart in het midden, alles binnen het scherm. */
.kp {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  /* Het venster mag niet hoger worden dan het scherm (zie de regel bovenaan bij
     ".prune, .cal, .fm, .td, .set, .team, .kp"): eerst stond hier `max-height: none`,
     en daardoor groeide het venster op een laptop tot 972px en viel de titel boven
     het scherm en de knop "Sluiten" eronder. Gemeten 29-09-2026. */
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}

.kp::backdrop { background: rgba(12, 14, 16, .45); }

.kp__card {
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 20px 22px 18px;
  /* De kaart zelf blijft binnen het scherm en scrolt; de kop met het kruisje is dan
     altijd te zien en de knop "Sluiten" is met scrollen te bereiken. */
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
}

.kp__head { display: flex; align-items: center; gap: 10px; }
.kp__title { flex: 1; margin: 0; font-size: 1.05rem; }

.kp__hint { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }

/* De uitleg vóór het invullen (06-10-2026, 1.8.15). De eigenaar kreeg bij het koppelen van Gmail
   "het wachtwoord klopt niet" en zocht de uitleg tevergeefs: die stond in het e-mailvak, en dat vak
   is dicht tot je erop klikt. Daarom staat de uitleg nu bovenaan het venster, vóór het invullen, per
   aanbieder. Een eigen kader zodat het opvalt tussen de tegels, in dezelfde leesmaat als de andere
   regels van dit venster (.84rem), zodat het bij het venster hoort en niet schreeuwt. */
.kp__uitleg {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.kp__uitleg > p { margin: 0 0 6px; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }
.kp__uitleg > p:last-child { margin-bottom: 0; }
.kp__uitleg > p.kp__uitleg-kop { font-weight: 600; color: var(--ink); }
.kp__uitleg ul { margin: 0 0 6px; padding-left: 17px; }
.kp__uitleg li { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.kp__uitleg li + li { margin-top: 3px; }

.kp__vak { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.kp__vak > summary { cursor: pointer; list-style: none; }
.kp__vak > summary::-webkit-details-marker { display: none; }
.kp__vakkop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  font-size: max(9.6px, .78rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kp__vakkop::after {
  content: "+";
  order: 3;
  margin-left: auto;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.kp__vak[open] > summary.kp__vakkop::after { content: "–"; }
.kp__vakstand { font-size: max(9.6px, .78rem); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }

.kp__vorm { display: grid; gap: 6px; }
.kp__gekoppeld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp__stand { font-size: .86rem; color: var(--ink-soft); }
.kp__let { margin: 0 0 4px; font-size: max(9.6px, .78rem); line-height: 1.5; color: var(--ink-faint); }
.kp__let--streep {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  color: var(--ink-soft);
}
.kp__twee { display: flex; gap: 10px; }
.kp__veld { flex: 1; display: grid; gap: 4px; }
.kp__veld--klein { flex: none; width: 84px; }
.kp__keuze {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  cursor: pointer;
}
.kp__keuze input { accent-color: var(--accent); }
.kp__status { margin: 0; font-size: .82rem; line-height: 1.5; }
.kp__status--goed { color: #1F6B3A; }
.kp__status--fout { color: #B4232A; }
html[data-theme="dark"] .kp__status--goed { color: #7BD69C; }
html[data-theme="dark"] .kp__status--fout { color: #FF8A8A; }
.kp__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* De afspraken van de aangeklikte dag onder de kalender. */
.cal__agenda {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre-line;
  color: var(--ink);
}

/* Een dag met een afspraak: een eigen kleur stip, naast de stip van gesprekken. */
.cal__stip--afspraak { background: var(--ink-soft); }

@media (max-width: 520px) {
  .kp__twee { flex-direction: column; }
  .kp__veld--klein { width: 100%; }

  /* De balk op een telefoon (29-09-2026, 1.4.19): gemeten op 390px liep de rij al 7px buiten het
     scherm, en met het chatknopje erbij zouden de laatste knoppen wegvallen. Daarom zijn de
     knoppen en de tussenruimte hier kleiner. Er verdwijnt niets en er verandert niets boven 520px;
     het pictogram binnenin blijft 15px, dus het blijft goed raakbaar. */
  .topbar { padding: 10px 10px; gap: 5px; }
  .topbar__right { gap: 4px; }
  .topbtn, .iconbtn { width: 30px; height: 30px; }
  .topbtn svg { width: 15px; height: 15px; }
  .topbtn__plus { top: -4px; right: -4px; width: 13px; height: 13px; }
}

/* ------------------------------------------------- team als organisatieschema (29-09-2026, 1.4.25)
   Wens van de eigenaar: "eenvoudige hoofdjes ... beetje speels met boven de teamleider", met een
   organisatieschema als voorbeeld. Drie varianten, alle drie met de teamleider bovenaan en per
   persoon een zelf getekend hoofdje (geen fotobestand, geen beeldgenerator, dus geen kosten).
   De keuzerij staat boven in het venster; de klasse team-vorm--a/b/c staat op het venster zelf. */
.team__keuzerij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team__keuzelabel { font-size: max(9.6px, .72rem); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.team__keuzeknop {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: max(10.4px, .78rem);
  cursor: pointer;
}
.team__keuzeknop:hover { border-color: var(--accent); color: var(--accent); }
.team__keuzeknop.is-aan {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-weight: 600;
}
.team__stam { display: none; }
.team__rijtekst { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.team__rijnaam, .team__rijtaak { overflow: hidden; text-overflow: ellipsis; }

.hoofd {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.hoofd svg { display: block; width: 100%; height: 100%; }
.hoofd--leider { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--accent); }
/* In de rij-indeling van de teamleider staat het hoofdje in de eerste kolom (zie de regel
   .team__leiderkaart hierboven, 1.4.35); deze regel zet het daar links in plaats van gecentreerd. */
.team__leiderkaart > .hoofd { justify-self: start; margin-bottom: 0; }

/* A — boom met lijnen (het organisatieschema) */
.team-vorm--a .team__stam { display: block; width: 0; height: 20px; margin: 2px auto 0; border-left: 2px solid var(--line); }
.team-vorm--a .team__lijst {
  display: flex;
  flex-direction: row;
  /* De boom wikkelt NOOIT naar een tweede regel (gemeten 29-09-2026: dan klopten de
     verbindingslijnen niet meer). Past het niet, dan schuift de rij horizontaal. */
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: safe center;
  gap: 0;
  padding: 20px 4px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.team-vorm--a .team__lijst::-webkit-scrollbar { height: 8px; }
.team-vorm--a .team__lijst::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.team-vorm--a .team__rij {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 104px;
  max-width: 136px;
  padding: 10px 6px 8px;
  text-align: center;
}
.team-vorm--a .team__rij::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 0;
  height: 20px;
  border-left: 2px solid var(--line);
}
.team-vorm--a .team__rij::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--line);
}
.team-vorm--a .team__rij:first-child::after { left: 50%; }
.team-vorm--a .team__rij:last-child::after { right: 50%; }
.team-vorm--a .team__rij:only-child::after { display: none; }
.team-vorm--a .team__rijtekst { align-items: center; }
.team-vorm--a .team__rijtaak { white-space: normal; }
.team-vorm--a .team__weg { position: absolute; top: 4px; right: 4px; padding: 2px 6px; }

/* B — rij met hoofden: rustiger, zonder lijnen */
.team-vorm--b .team__lijst { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
.team-vorm--b .team__rij {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 92px;
  max-width: 124px;
  padding: 8px 6px 6px;
  text-align: center;
}
.team-vorm--b .hoofd { width: 48px; height: 48px; }
.team-vorm--b .team__rijtekst { align-items: center; }
.team-vorm--b .team__rijtaak { white-space: normal; }
.team-vorm--b .team__weg { position: absolute; top: 2px; right: 2px; padding: 2px 6px; }

/* C — speels: dezelfde kaartjes, maar de hoofden verspringen en staan scheef */
.team-vorm--c .team__lijst {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 6px;
  padding-bottom: 14px;
}
.team-vorm--c .team__rij {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 92px;
  max-width: 124px;
  padding: 8px 6px 6px;
  text-align: center;
}
.team-vorm--c .team__rij:nth-child(even) { transform: translateY(12px); }
.team-vorm--c .team__rij:nth-child(odd) .hoofd { transform: rotate(-6deg); }
.team-vorm--c .team__rij:nth-child(even) .hoofd { transform: rotate(6deg); }
.team-vorm--c .hoofd { width: 48px; height: 48px; }
.team-vorm--c .team__rijtekst { align-items: center; }
.team-vorm--c .team__rijtaak { white-space: normal; }
.team-vorm--c .team__weg { position: absolute; top: 2px; right: 2px; padding: 2px 6px; }

/* Op een smal scherm laat de boom zich horizontaal schuiven in plaats van te proppen: de lijnen
   kloppen dan nog, alleen zie je ze één voor één. De andere twee vormen wikkelen gewoon. */
@media (max-width: 560px) {
  /* Op een telefoon mogen de vakjes smaller: dan past een team van drie zonder schuiven. */
  .team-vorm--a .team__rij { min-width: 92px; }
  /* De rij van de teamleider op een telefoon (30-09-2026, 1.4.35): de twee knoppen gaan onder de
     naam en de taak staan, anders blijft er voor die tekst maar ~85px over en wikkelt hij over vier
     regels (gemeten op 390px). Met de knoppen eronder is de tekst ~268px breed. */
  .team__leiderkaart { grid-template-columns: auto minmax(0, 1fr); }
  .team__leiderkaart > .hoofd { grid-row: 1 / span 3; }
  .team__leiderkaart > .team__wijzig { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 6px; }
  .team__leiderkaart > .team__vraag { grid-column: 2; grid-row: 5; justify-self: start; margin-top: 4px; }
}

/* ---------------------------------------------------------------- typen tijdens het antwoord
   (29-09-2026, 1.4.22 — wens van de eigenaar: "ik wil kunnen typen en versturen terwijl de
   assistente nog bezig is"). Twee dingen zijn hier zichtbaar gemaakt:
   1. het invulvak blijft open (dat doet app.js), dus er is niets dat het blokkeert;
   2. het stopknopje draagt het woord Stop en staat in de huisstijlkleur, zodat stoppen te vinden is.
   Op een telefoon bestaat Escape niet; daar is deze knop de enige weg, dus hij moet er staan.
   Sinds 29-09-2026 (1.4.32) is die kleur de huisstijlkleur --accent en niet meer rood — wens van de
   eigenaar: "de nieuwe stopknop mag gewoon dezelfde groen worden". Bewust via de VARIABELE en niet als
   ingebakken groen: de kleur komt per omgeving uit de omgeving (NEVARO_ACCENT → /api/brand → --accent),
   dus een klant met een eigen kleur krijgt zijn eigen kleur op deze knop. Sinds 1.4.33 staat er geen
   vierkantje meer in de knop, alleen het woord Stop — zijn woorden: "alleen stop dus niet het stop
   vierkantje". Daarom is de ruimte links en rechts nu gelijk (0 12px) en is de opmaak van het
   pictogram hier weg. De knop is dus: huisstijlkleur, wit woord "Stop". */
.composer.is-bezig .send--stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 40px;
  padding: 0 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.composer.is-bezig .send--stop:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.send__tekst { display: none; }
.composer.is-bezig .send__tekst {
  display: inline;
  color: #fff;
  font-size: max(10.4px, .8rem);
  font-weight: 600;
  letter-spacing: .01em;
}
/* Geen aparte donkere stand meer nodig: --accent is in beide thema's dezelfde huisstijlkleur. */

.composer__wachtrij {
  max-width: 760px;
  margin: 6px auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: max(10.4px, .8rem);
  line-height: 1.4;
}
.composer__wachtrijkop { color: var(--ink-faint); }
.composer__wachtrijlijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer__wachtrijregel {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.composer__wachtrijtekst { flex: 1; }
/* "vooraan" (01-10-2026, 1.6.12): een gewoon woord, geen pijltje — de eigenaar houdt niet van
   een symbool waar een woord kan staan. Alleen zichtbaar bij het tweede bericht en verder,
   want het bovenste bericht staat al vooraan. */
.composer__wachtrijknop {
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  text-decoration: underline;
  padding: 0 2px;
  cursor: pointer;
}
.composer__wachtrijknop:hover { color: var(--accent); }
.composer__wachtrijweg {
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.composer__wachtrijweg:hover { color: #B4232A; }

/* ------------------------------------------------------------ de stekker (29-09-2026, 1.4.27)
   Eén icoon in de balk waarin alle kanalen samenkomen, in de plaats van de losse koppelknopjes.
   De klant kiest zelf hoe het eruitziet: kaarten (open, met uitleg), lijst (kort, de stand rechts)
   of tegels (twee naast elkaar, met de stand groot). De keuze blijft in zijn eigen browser staan.
   Per kanaal staat er een STIP én een WOORD: kleur alleen is niet genoeg, want dan kan wie geen
   kleur ziet het niet lezen — en het woord alleen is langzamer te overzien. */
.stek__keuzerij { margin: 2px 0 4px; }
.stek__keuzeknop.is-aan { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.stek__stand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: max(9.6px, .78rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.stek__stip {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink-faint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-faint) 22%, transparent);
}
.stek__woord { color: var(--ink-soft); }
.stek__stand.is-aan .stek__stip { background: #1F6B3A; box-shadow: 0 0 0 2px rgba(31, 107, 58, .18); }
.stek__stand.is-aan .stek__woord { color: #1F6B3A; }
.stek__stand.is-let .stek__stip { background: #B4791F; box-shadow: 0 0 0 2px rgba(180, 121, 31, .2); }
.stek__stand.is-let .stek__woord { color: #8A5A12; }
.stek__stand.is-uit .stek__stip { background: var(--ink-faint); }
.stek__stand.is-uit .stek__woord { color: var(--ink-faint); }

.stek__kanaal { scroll-margin-top: 4px; }
/* De gemeten stand van een kanaal, in gewone taal (bijvoorbeeld "je postbus is ingevuld, maar de
   aanmelding lukt nog niet"). Iets meer gewicht dan de uitleg eromheen, zodat het opvalt. */
.stek__let { color: var(--ink-soft); font-weight: 500; }

/* Vorm 1 — kaarten (de standaard): elk kanaal onder elkaar, met de uitleg erbij. */
.stekker--kaarten .stek__kanaal .kp__vakkop { margin-bottom: 4px; }

/* Vorm 2 — lijst: korte regels, de stand rechts, de uitleg pas als je het kanaal opent. */
.stekker--rijen .stek__kanaal { border-top: 0; margin-top: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stekker--rijen .stek__kanaal .kp__vakkop { margin: 0; font-size: max(10.4px, .84rem); }
.stekker--rijen .stek__kanaal .kp__vakkop::after { margin-left: 8px; order: 4; }

/* Vorm 3 — tegels: twee naast elkaar, de stand groot in de tegel; open je er een, dan vult hij
   de hele breedte zodat de uitleg leesbaar blijft. */
.stekker--tegels .stek__kanalen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stekker--tegels .stek__kanaal {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 0;
  padding: 10px 12px;
  background: var(--surface-2);
}
.stekker--tegels .stek__kanaal[open] { grid-column: 1 / -1; background: var(--surface); }
.stekker--tegels .stek__kanaal .kp__vakkop {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  color: var(--ink);
  font-size: max(10.4px, .84rem);
}
.stekker--tegels .stek__kanaal .kp__vakkop::after { position: absolute; right: 12px; }
.stekker--tegels .stek__kanaal { position: relative; }
.stekker--tegels .stek__stand { margin-left: 0; font-size: max(10.4px, .86rem); }

/* Het veld van "Iets anders koppelen" (tot 1.4.35 "ergens anders") en de regel over de nachtelijke
   ronde. De regel .stek__ander is eruit: dat was de losse kaart onder de kanalen, en die is sinds
   1.4.35 een gewone tegel (.stek__kanaal) — daar hoort de tegelopmaak bij, niet deze. */
.stek__anderrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.stek__anderrij .set__input { flex: 1 1 190px; }
.stek__nacht {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: max(9.6px, .78rem);
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: 10px;
}

@media (max-width: 520px) {
  /* Op een telefoon passen twee tegels naast elkaar niet leesbaar (gemeten: 390px breed, kaart
     358px → twee tegels van 175px). Daarom staan ze daar onder elkaar. */
  .stekker--tegels .stek__kanalen { grid-template-columns: 1fr; }
  .stek__stand { font-size: max(10px, .8rem); }
}

/* Het venster Vaste taken. Zelfde opzet als de andere vensters (.td/.set/.fm): één kaart in het
   midden, alles binnen het scherm. De klassen eronder zijn alleen wat dit venster extra nodig
   heeft: de lijst met taken, de regel boven de lijst als er iets mislukte, en het invulformulier.
   Het venster is iets breder dan het takenlijstje, want er staan meer gegevens per regel in. */

.vt__card { width: min(560px, calc(100vw - 32px)); }

.vt__uitleg {
  margin: 0;
  font-size: max(10px, .8rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* De regel boven de lijst zodra er iets mislukte: niet te missen, maar zonder alarm te maken. */
.vt__mislukt {
  margin: 0;
  padding: 9px 11px;
  font-size: max(10px, .8rem);
  line-height: 1.5;
  color: #7A2A21;
  background: #FBEDEA;
  border: 1px solid #EFCFC8;
  border-radius: 10px;
}

html[data-theme="dark"] .vt__mislukt {
  color: #FFC9C0;
  background: #2A1B18;
  border-color: #5A342B;
}

.vt__redelink {
  border: 0;
  background: transparent;
  padding: 2px 0 0;
  font: inherit;
  font-size: max(9.6px, .78rem);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.vt__lijst {
  display: grid;
  gap: 8px;
  max-height: 44vh;
  overflow: auto;
  padding: 2px 2px 2px 0;
}

.vt__rij {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.vt__rij--fout { border-color: #E2B7AE; }
.vt__rij--oplicht { box-shadow: 0 0 0 2px var(--accent); }

.vt__rij-kop { display: flex; align-items: center; gap: 10px; }
.vt__naam {
  flex: 1;
  font-size: max(10.4px, .84rem);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.vt__schakel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: max(9.6px, .78rem);
  color: var(--ink-soft);
  cursor: pointer;
}

.vt__box { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.vt__wanneer,
.vt__uitkomst,
.vt__reden {
  margin: 0;
  font-size: max(9.6px, .78rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.vt__uitkomst--goed { color: var(--accent); }
.vt__uitkomst--fout { color: #B4232A; }
html[data-theme="dark"] .vt__uitkomst--fout { color: #FF8A8A; }

/* De reden van een mislukking: één regel in gewone taal, nooit de technische fouttekst. */
.vt__reden {
  padding-top: 2px;
  color: #B4232A;
}
html[data-theme="dark"] .vt__reden { color: #FF8A8A; }

.vt__tel {
  margin: 0;
  font-size: max(9.6px, .76rem);
  line-height: 1.4;
  color: var(--ink-faint);
}

.vt__tel--let { color: #B4232A; }
html[data-theme="dark"] .vt__tel--let { color: #FF8A8A; }

.vt__leeg {
  margin: 0;
  padding: 6px 2px;
  font-size: max(9.6px, .78rem);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Het invulformulier. Alles wat een klant invult is gewone taal of een keuze; er is met opzet
   geen veld waarin een schema, een script of een commando kan staan. */
.vt__nieuw {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.vt__samenvatting {
  cursor: pointer;
  font-size: max(10px, .8rem);
  font-weight: 600;
  color: var(--accent);
}

.vt__vorm { display: grid; gap: 4px; padding: 8px 0 2px; }
.vt__vorm .set__label { margin-top: 6px; }

.vt__tekstvak {
  font: inherit;
  resize: vertical;
  min-height: 62px;
}

.vt__getal { max-width: 130px; }

.vt__hint {
  margin: 2px 0 0;
  font-size: max(9.6px, .76rem);
  line-height: 1.45;
  color: var(--ink-faint);
}

.vt__aan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: max(10px, .8rem);
  color: var(--ink);
  cursor: pointer;
}

.vt__aan input { accent-color: var(--accent); cursor: pointer; }

.vt__voet {
  font-size: max(9.6px, .76rem);
  color: var(--ink-faint);
}

/* Het kijkvenster "Automatisch" (01-10-2026, 1.6.21): alles wat in de omgeving vanzelf loopt. Het
   gebruikt dezelfde kaart en dezelfde rijen als het venster Vaste taken (de vt__-klassen), want het
   is dezelfde soort informatie in dezelfde woorden. Wat er extra is: een stilstaand Aan/Uit in
   plaats van een schakelaar — in dit venster valt er niets om te zetten. Eén klein chipje dus, geen
   nieuw vensterontwerp. */
.ovz__stand {
  flex: none;
  padding: 1px 9px 2px;
  font-size: max(9.4px, .74rem);
  line-height: 1.5;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ovz__stand--uit { color: var(--ink-faint); }

/* ============================ HET BLOK RECHTS: team, wat loopt en taken (1.6.14, 01-10-2026) ============================
   De wens van de eigenaar, 14:41 UTC: *"mooie task lijst hiernaast, dat mag ook naar de test01"*.
   Dezelfde vorm als de balk die hij op de beheerkant heeft: per teamlid zijn naam en wat hij NU
   doet, daaronder zijn opdrachten met de stand erbij — en die rijen zijn te verslepen om zelf de
   volgorde te bepalen. Daaronder de eigen takenlijst van de klant.
   Alleen op een breed scherm als derde kolom; op een smal scherm staat hij er niet en gaat hij
   open met de knop "Team en taken" in de balk (app.js verplaatst dan dezelfde inhoud).
   BLOK-BEGIN */
@media (min-width: 901px) {
  /* De derde kolom: gesprekken | gesprek | team en taken. Vaste maat, zodat de balk niet
     meebeweegt met de lengte van een tekst erin — precies als op de beheerkant. */
  .app { grid-template-columns: 272px 1fr 320px; }
}

.blok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 14px 12px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  min-height: 0;
}

.blok__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.blok__titel {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.blok__bewaard { font-size: max(9.6px, .7rem); color: var(--accent); }

/* Het kruisje achter "volgorde bewaard" in de kop van het rechter blok (01-10-2026, 1.6.20).
   Tot die versie verdween die regel vanzelf na 3 seconde. */
.blok__bewaard-x {
  margin-left: 5px;
  padding: 0 3px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: var(--ink-faint);
}

.blok__bewaard-x:hover { color: var(--ink); }

.blok__binnen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.blok__bij { margin: 0; font-size: max(9.6px, .7rem); color: var(--ink-faint); }

.blok__lijst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 8px;
}

.blok__lid { border-top: 1px solid var(--line); padding-top: 8px; }

.blok__naam {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-size: .84rem;
}

.blok__wie { font-weight: 600; }
.blok__rol { font-size: max(9.6px, .68rem); color: var(--ink-faint); }

.blok__stand {
  margin-left: auto;
  font-size: max(9.6px, .68rem);
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
}

.blok__stand--bezig { background: var(--accent); color: #FFFFFF; }

.blok__bezig,
.blok__rust { margin: 0; font-size: max(10px, .74rem); line-height: 1.45; color: var(--ink-soft); }

.blok__wat { display: block; color: var(--ink); }
.blok__sinds, .blok__rust { color: var(--ink-faint); }

.blok__rijen { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

/* Eén opdracht of taak in de lijst. Versleepbaar met muis, vinger of pen (app.js), zodat hij voor
   kan gaan; de greep houdt het scrollen van de pagina tegen zodra je hem vastpakt. */
.blok__rij {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: max(10px, .74rem);
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: grab;
  background: transparent;
}

.blok__rij:hover { background: var(--surface-2); }
.blok__rij--sleep { opacity: .45; }
.blok__rij--over { border-top-color: var(--accent); }

.blok__greep {
  flex: none;
  color: var(--ink-faint);
  letter-spacing: -1px;
  cursor: grab;
  touch-action: none;      /* een vinger op de greep sleept de regel, niet het scherm */
  user-select: none;
}

.blok__tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blok__chip {
  flex: none;
  font-size: max(9.6px, .62rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-faint);
}

.blok__chip--bezig { background: var(--accent); color: #FFFFFF; }
.blok__chip--klaar { background: transparent; border: 1px solid var(--line); color: var(--accent); }

.blok__doe { flex: none; display: flex; align-items: center; gap: 2px; }

/* Rustig beeld: de twee knopjes komen pas te voorschijn als de klant op de rij staat (of er met
   het toetsenbord in zit). Anders vreten ze de ruimte op en wordt de regel onleesbaar. Op een
   aanraakscherm is er niets om "op te staan", dus daar staan ze altijd. */
.blok__rij .blok__doe { opacity: 0; transition: opacity .12s ease; }
.blok__rij:hover .blok__doe,
.blok__rij:focus-within .blok__doe { opacity: 1; }
@media (hover: none) {
  .blok__rij .blok__doe { opacity: 1; }
}

/* De twee kleine knopjes op een rij: "vooraan" (volgorde) en "×" (afbreken / weghalen).
   Ze zijn klein maar hebben een eigen raakvlak, zodat ze op een telefoon ook te treffen zijn. */
.blok__knop {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: max(9.6px, .68rem);
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 7px;
  cursor: pointer;
}

.blok__knop:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.blok__knop--weg:hover { color: #B4232A; }

.blok__meer, .blok__geen {
  margin: 4px 0 0;
  font-size: max(9.6px, .7rem);
  color: var(--ink-faint);
}

.blok__voet { margin: 0; font-size: max(9.6px, .68rem); line-height: 1.4; color: var(--ink-faint); }

.blok__leeg { margin: 0; font-size: max(10px, .74rem); color: var(--ink-faint); }

/* De knop in de balk is er alleen als de balk rechts er niet is (smal scherm). */
.topbtn--smal { display: none; }

@media (max-width: 900px) {
  .blok { display: none; }
  .topbtn--smal { display: inline-flex; }
  .app { grid-template-columns: 1fr; }
}

/* Hetzelfde blok als venster op een smal scherm. */
.blokdlg {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}

.blokdlg::backdrop { background: rgba(12, 14, 16, .45); }

.blokdlg__card {
  width: min(420px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(12, 14, 16, .22);
}

.blokdlg__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.blokdlg__titel { margin: 0; font-size: 1rem; }
.blokdlg__sluit {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
}

.blokdlg__sluit:hover { background: var(--surface-2); color: var(--ink); }
/* De inhoud is hetzelfde vak als rechts naast het gesprek; hier alleen de hoogte begrenzen. */
.blokdlg__body { min-height: 0; max-height: 70vh; display: flex; }
.blokdlg__body .blok__binnen { overflow: hidden; }
.blokdlg__body .blok__lijst { overflow-y: auto; }

/* TELLERS-BALK-BEGIN — de twee tellers onderaan de linkerkolom, onder de gesprekken (02-10-2026; sinds
   04-10-2026 staat het vakje hier en niet meer in de balk bovenin).

   WAT ER STAAT: "RENDERS nog 10 / 30 · AI-TEGOED nog 99,9%" — één rustige regel (het tegoed staat
   sinds 1.8.9 in procenten, precies het getal van de meter; zie app.js). De getallen
   komen uit /api/tellers en de woorden van de server; hier staat alleen de vorm.

   DE VORM IS SINDS 1.8.7 WEER ÉÉN REGEL, ZOALS OP BÈTA01 (05-10-2026). Woorden van de eigenaar, via de
   manager: *"in beta1 staat linksonder de tickers, kan je dezelfde vorm aanhouden en terugzetten naar
   test01, met een font kleiner en met de mouseover aangeven na hoeveel dagen deze reset? dan hoeft het
   niet altijd zichtbaar te zijn."* Het tabelletje van 1.8.6 (de kopjes in de ene kolom, de waarde met
   de resetregel eronder in de andere) is dus weer weg, en de resetregel onder elke teller ook: die
   woorden staan nu in de ZWEEFTEKST (app.js: tellersKort zet ze in de eerste regel).

   HET LETTERGREP IS KLEINER DAN OP BÈTA01 EN KLEINER DAN IN 1.8.6, en dat is te meten: met de maat van
   bèta01 (.72rem voor de waarde, .66rem voor het kopje) paste de regel niet in de smalle kolom van de
   klant — daarom stond er in 1.8.6 een tabelletje onder elkaar.
   GEMETEN OP HET ECHTE SCHERM (05-10-2026, kolom van 243 pixels, proefscherm met dezelfde opmaak):
     * de maat van dit blok (waarde .6rem = 8,6 pixels, kopje .55rem met een ondergrens van 8 pixels,
       tussenruimte 4 en 3 pixels, binnenmarge 6 pixels): het vakje is 233,9 pixels — het past, met
       9,1 pixels ruimte over;
     * met de oude maat (.72rem / .66rem) zou het vakje 269,5 pixels zijn: 26,5 pixels over de rand;
     * MET LETTERAFSTAND (.08em, zoals het kopje er elders uitziet) past het NIET: dat kost op deze
       regel 10 pixels en dan komt het vakje 9,2 pixels over de rand. Daarom staat hier geen
       letterafstand (dat is de enige plek in dit bestand waar dat zo is, en het is gemeten).
   De letters zijn kleiner maar niet onleesbaar: het kleinste stukje in het vakje (het kopje) is in
   pixels nooit kleiner dan 8.

   OF DE TWEE TELLERS NAAST ELKAAR PASSEN WORDT GEMETEN, NIET GEDRACHT (1.8.7). app.js zet de klasse
   .tellers--hoog als de ENE regel niet in de kolom past (zie `tellersVorm` daar): dan gaan de twee
   tellers onder elkaar met het kopje boven zijn waarde. Dat is dezelfde keuze als in 1.8.6, maar nu
   op een ECHTE meting in plaats van op een vaste grens in de tekstmaat — bij "Groot" (waar 1.8.6 nog
   naast elkaar zette en de tekst er 17 pixels uit liep) gaat het nu dus ook goed. Met het kopje erboven
   is de breedste regel de waarde van het AI-tegoed en die blijft ruim binnen de kolom.

   TWEE DINGEN DIE HIER BEWUST ZO STAAN:
   1. De getallen hebben een KLEINE vaste breedte (min-width in tekens, met tabelcijfers), zodat het
      vakje niet wiebelt als een getal van lengte verandert ("nog 9,9%" tegen "nog 99,9%").
   2. De zweeftekst opent OMHOOG. Dit vakje staat onderaan de linkerkolom: een vakje dat naar beneden
      uitklapt zou onder de onderrand van het scherm vallen. Daarom hier een eigen stand (bottom in
      plaats van top) en ook het onzichtbare tussenstukje verhuist naar beneden.
   Wat er NIET in staat: geen knop, geen venster, geen getal dat het scherm zelf uitrekent. */

.tellers__wrap { flex: none; align-items: center; }

/* DE ENE REGEL ZELF. De tussenruimte tussen de twee tellers is 4 pixels (bèta01 had er 6): dat scheelt
   op deze regel 4 pixels en daar past het net wel of net niet mee. */
.tellers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;                 /* rustig en klein; hoeft niet even hoog te zijn als de knoppen bovenin */
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: max(8.4px, .6rem);
  white-space: nowrap;
}

/* Eén teller: het kopje en de waarde naast elkaar, met de onderkant van de letters op één lijn
   (baseline) zodat de twee tellers netjes uitgelijnd staan. */
.tellers__stuk { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }

.tellers__kop {
  font-size: max(8px, .55rem);
  letter-spacing: 0;            /* gemeten: met .08em past de regel niet in de kolom (zie hierboven) */
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Nooit middenin afbreken: "AI-TEGOED" mag niet op het streepje afbreken. */
  white-space: nowrap;
}

.tellers__waarde { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Vaste breedtes tegen het wiebelen, per teller de LANGSTE vorm die er is: bij de Renders is dat
   "nog 30 / 30" (9 tekens) en bij het AI-tegoed SINDS 1.8.9 "nog 100,0%" (10 tekens; het was 16 tekens
   voor "nog 99 van de 100"). De vaste breedte houdt het vakje stil als een getal van lengte verandert.
   LET OP: in `ch` gerekend, en dat schaalt mee met de maat van dit vakje — bij "Extra groot" wordt het
   vakje dus niet breder dan de letters. */
#teller-plaatjes { display: inline-block; min-width: 9ch; }
#teller-tegoed { display: inline-block; min-width: 10ch; }

/* Het puntje TUSSEN de twee tellers (net als op bèta01). In de hoge vorm hieronder gaat het weg: daar
   zou het als een losse kogel tussen de twee blokjes staan — precies wat de eigenaar in 1.8.6
   *"niet mooi"* noemde. */
.tellers__punt { color: var(--ink-faint); }

/* Geen telling: een grijs streepje in plaats van een getal — nooit een oud of verzonnen getal. */
.tellers--onbekend #teller-plaatjes { color: var(--ink-faint); }

/* DE HOGE VORM (app.js: alleen bij "Extra groot"): het kopje BOVEN zijn waarde, de twee tellers onder
   elkaar, alles op dezelfde linkerrand. De hoogte mag dan meegroeien (height: auto) en er komt een
   beetje lucht tussen de twee tellers; het puntje verdwijnt. */
.tellers--hoog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  padding: 3px 7px;
  row-gap: 1px;
}
.tellers--hoog .tellers__stuk { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.tellers--hoog .tellers__stuk + .tellers__stuk { margin-top: 3px; }
.tellers--hoog .tellers__punt { display: none; }

/* De zweeftekst klapt hier OMHOOG open (zie punt 2 hierboven), met hetzelfde onzichtbare tussenstukje
   als bij de andere zweefvakjes zodat de aanwijzing niet wegvalt zodra de muis erheen reist.

   EN HIJ BLIJFT BINNEN HET VENSTER (1.8.7). Gemeten op het proefscherm (venster van 720 hoog): bij
   "Extra groot" is de zweeftekst 939 pixels hoog en stak hij 327 pixels BOVEN het venster uit — de
   bovenkant was dan niet te lezen. Dat was ook al zo in 1.8.6 (daar 782 pixels, 205 pixels erbuiten);
   het viel alleen niet eerder op. Daarom is de TEKST van de zweeftekst nu begrensd op de hoogte van
   het venster min 150 pixels, met een eigen schuifbalk als het niet past. Die 150 pixels zijn de
   ruimte die het vakje zelf onderaan de kolom inneemt plus een marge: gemeten zit de onderkant van de
   zweeftekst 107 pixels boven de onderrand van het venster, dus met deze grens blijft hij er ruim
   binnen (gemeten: de bovenkant komt op 20 pixels van de bovenrand in plaats van 327 pixels erbuiten).
   De begrenzing staat op het BINNENSTE stukje (.tip__tekst) en niet op het vakje zelf: het pijltje
   onderaan het vakje hoort namelijk buiten de tekst te blijven staan (een vakje met een schuifbalk
   knipt zijn eigen pijltje weg).
   Bij de gewone tekstmaat verandert er niets: de tekst is dan korter dan de grens (gemeten 435 pixels
   tegen een grens van 570). */
.tellers__wrap .tip { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.tellers__wrap .tip::before { top: auto; bottom: -10px; }
.tellers__wrap .tip__tekst { max-height: calc(100vh - 150px); overflow-y: auto; }

/* VERBRUIK-MELDING-BEGIN — de korte regel over het verbruik van deze 30 dagen (03-10-2026). Hij hangt als LOSSE STROOK ONDER DE BALK, precies zoals de afwijzing van de nieuwe naam
   (`.titel__fout`, sinds 1.7.5): de balk verandert niet van hoogte en het instellingenknopje blijft
   staan waar het staat. In het balkje zelf zou een lange regel de rij van de knoppen in de war
   schuiven.

   TWEE DINGEN DIE HIER BEWUST ZO STAAN:
   1. De strook neemt zijn eigen hoogte in (hij duwt de gesprekken een stukje naar beneden) in plaats
      van eroverheen te vallen: een klant mag nooit tekst van zijn gesprek kwijtraken door een
      mededeling van ons. Hij komt alleen in beeld als er echt iets te zeggen is.
   2. "Bijna op" is kalme tekst; "op" is dezelfde woorden met nadruk. Geen felle foutkleur: er is
      niets stuk — de maand is vol.

   De woorden zelf staan NIET hier maar in de server, op één plek (VERBRUIK_TEKST_BIJNA_OP en
   VERBRUIK_TEKST_OP). */
.verbruik__melding {
  padding: 7px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font-size: max(9.6px, .74rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

.verbruik__melding--bijna { color: var(--ink-soft); }
.verbruik__melding--op { color: var(--ink); font-weight: 600; }

/* Sinds 1.9.10 staat het THEMABLOK hier NIET meer bij: de klant kiest zijn thema in het
   instellingenvenster (index.html). Sinds 12-10-2026 zijn dat er twee: Licht en Donker. Het blok
   met de vijf lettergroottes staat er wel: dit scherm houdt de vijf standen. */

/* Het menu in de linkerkolom (#side-menu) en de twee ingangen in het paneel rechts (.blok__nav)
   horen bij de nieuwe indeling die op 12-10-2026 uit deze voorkant is gehaald. In de look die
   overblijft bestaan ze niet; staan ze er toch (bijvoorbeeld in een oudere pagina), dan blijven ze
   verborgen. */

#side-menu, .blok__nav { display: none; }

/* De variabele waar alle vensterkaarten hun hoeken van halen — in de nieuwe uitvoering 22 px
   (r3523 en r3565). Wat hem gebruikt: de twee plaatjes in een gesprek (.chat-beeld,
   .chat-beeld-weg). De acht vensterkaarten krijgen hieronder hun eigen 26 px, net als daar. */
html[data-skin="professioneel"] { --radius: 22px; }

/* De losse gespreksregels in de gesprekkenlijst. */
html[data-skin="professioneel"] .chatitem { border-radius: 18px; }

/* De knoppen: van een afgeronde rechthoek naar volledig rond. */
html[data-skin="professioneel"] .btn { border-radius: 999px; }

/* De knopjes in de balk boven het gesprek en de losse pictogramknopjes. */
html[data-skin="professioneel"] .topbtn,
html[data-skin="professioneel"] .iconbtn { border-radius: 13px; }

/* Het zoekvak in de linkerkolom en het kruimelspoor in het venster Documenten. */
html[data-skin="professioneel"] .side__search,
html[data-skin="professioneel"] .fm__kruimel { border-radius: 999px; }

/* Het eigen bericht in het gesprek: dezelfde vorm, alle hoeken een maat groter. */
html[data-skin="professioneel"] .msg--user { border-radius: 24px 24px 7px 24px; }

/* De invulbalk onderaan het gesprek: van een afgeronde doos naar een pil. */
html[data-skin="professioneel"] .composer__box,
html[data-skin="professioneel"] .composer__box:focus-within { border-radius: 999px; }

/* Het pijltje om te versturen. */
html[data-skin="professioneel"] .send { border-radius: 999px; }

/* DE ACHT VENSTERS. In de standaard-uitvoering halen ze hun hoeken uit --radius (14 px); in de
   nieuwe uitvoering krijgen ze er 26 px. */
html[data-skin="professioneel"] .prune__card,
html[data-skin="professioneel"] .cal__card,
html[data-skin="professioneel"] .fm__card,
html[data-skin="professioneel"] .td__card,
html[data-skin="professioneel"] .set__card,
html[data-skin="professioneel"] .team__card,
html[data-skin="professioneel"] .kp__card,
html[data-skin="professioneel"] .vt__card { border-radius: 26px; }

/* De losse regels in de vensters. */
html[data-skin="professioneel"] .fm__row,
html[data-skin="professioneel"] .td__item { border-radius: 14px; }

/* De teamleden in het teamvenster: een maat groter dan de andere regels, net als in de nieuwe
   uitvoering (daar wint de regel bij de vriendelijke figuurtjes het van de regel hierboven). */
html[data-skin="professioneel"] .team__rij { border-radius: 18px; }

/* De rij van de teamleider in het teamvenster (die haalt zijn hoeken uit --radius). */
html[data-skin="professioneel"] .team__leiderkaart { border-radius: 18px; }

/* De dagen in de kalender. */
html[data-skin="professioneel"] .cal__day { border-radius: 12px; }

/* De invulvakken: het instellingenvenster, de takenlijst en het venster met oude bestanden. */
html[data-skin="professioneel"] .set__input,
html[data-skin="professioneel"] .prune__select { border-radius: 14px; }  /* was: 10 px (r2069, r1242) */
html[data-skin="professioneel"] .td__input { border-radius: 14px; }

/* De keuzeknopjes in het instellingenvenster (de vier thema's en de vijf lettergroottes). */
html[data-skin="professioneel"] .set__keuze { border-radius: 999px; }    /* was: 10 px (r2109) */
html[data-skin="professioneel"] .set__opt { border-radius: 999px; }

/* De regels bij "Terugkerende taken". */
html[data-skin="professioneel"] .vt__rij { border-radius: 16px; }

/* De losse regels in het paneel rechts (de taken en de wachtrij). */
html[data-skin="professioneel"] .blok__rij { border-radius: 14px; }

/* ------------------------------------------------------------------------------------------
   TELERS — dezelfde vorm, maar op het zichtbare vakje in plaats van op het omhulsel.
   In de nieuwe uitvoering staat het ronde bedrag (999 px) op het OMHULSEL #tellers-wrap, omdat
   het vakje erbinnen daar geen eigen rand en geen eigen ondergrond meer heeft (onzichtbaar). In
   de standaard-uitvoering is dat omhulsel juist onzichtbaar en is het VAKJE .tellers het
   zichtbare ding: eigen rand, eigen ondergrond, 9 px (r3363). Daarom staat hetzelfde bedrag daar
   op .tellers — de klant ziet in beide uitvoeringen dezelfde vorm (een pil). De regel op
   #tellers-wrap staat erbij zodat beide uitvoeringen dezelfde twee regels hebben.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] #tellers-wrap { border-radius: 999px; }  /* geen vorm in de standaard-uitvoering */
html[data-skin="professioneel"] .tellers { border-radius: 999px; }

/* ------------------------------------------------------------------------------------------
   [2] DE LETTERCIRKELS IN DE STANDAARD-UITVOERING.
   De cirkel zelf (.hoofd) bestaat al sinds 29-09-2026: 40 px, rond, met een dunne rand — daar
   verandert niets aan. In het teamvenster is hij 48 px (.team-vorm--b en --c) en 54 px voor de
   teamleider; die maten blijven precies zoals ze zijn, zodat de indeling van het venster niet
   verschuift. Hieronder staat alleen de LETTER: de maat, het gewicht en de afronding.
   De kleur van de cirkel en van de letter komen uit app.js (hoofdjeLetter) — dezelfde kleurenparen
   als het poppetje, gekozen uit de naam, en ze staan IN het element. Daardoor zijn ze in licht en in
   donker precies gelijk en is de leesbaarheid in beide thema's dezelfde.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .hoofd--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;          /* de ronde cirkel, net als bij het poppetje */
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  user-select: none;
}

/* In het teamvenster is de cirkel 48 px: de letter gaat mee omhoog, anders staat hij klein in een
   grote cirkel. */
html[data-skin="professioneel"] .team-vorm--b .hoofd--letter,
html[data-skin="professioneel"] .team-vorm--c .hoofd--letter { font-size: 21px; }

/* De teamleider heeft de grootste cirkel (54 px) en houdt zijn eigen ring in de huisstijlkleur. */
html[data-skin="professioneel"] .hoofd--leider.hoofd--letter {
  font-size: 24px;
  box-shadow: 0 0 0 2px var(--accent);
}

/* In de LOSSE stand ("Om en om") draaide het poppetje een paar graden scheef — dat hoorde bij dat
   figuurtje. Een letter hoort recht te staan, dus in de standaard-uitvoering gaat die scheefstand
   eraf. Het verspringen van de kaartjes zelf (het ene kaartje een stukje lager dan het andere)
   blijft, want dat is de indeling van deze stand en niet de tekening. */
html[data-skin="professioneel"] .team-vorm--c .team__rij .hoofd--letter { transform: none; }

/* ==========================================================================================
   DE ACHTERGROND ACHTER HET GESPREK (1.9.18, 11-10-2026 — kleiner, onregelmatiger en meer soorten
   per 1.9.21, 12-10-2026)
   ------------------------------------------------------------------------------------------
   OPDRACHT VAN DE EIGENAAR, LETTERLIJK (12-10-2026, ~18:25 UTC, via de manager):
   *"de achtergrond icoontjes mogen een stuk kleiner, zeg 50% wat het nu is en meer random, en meer
   soorten."*

   WAT HIER STAAT is ONS EIGEN patroon: TWINTIG eigen lijntekeningen (schild, envelop, paperclip,
   kalender, bestand, koffiekopje, lampje, grafiekje, wolk, sleutel, doos, gespreksballon, vinkje, klok,
   map, muzieknoot, sterretje, potlood, bel en boek) en tien losse stippen, met de hand in SVG
   uitgeschreven. Ze staan als TEGEL van 400 bij 400 px in een data-URL in dit bestand, dus er komt
   geen enkel bestand bij: de voorkant blijft bij dezelfde vier bestanden, en de browser haalt niets
   extra op (het gewicht zit in `nevaro.css` zelf).
   NIETS OVERGENOMEN VAN WHATSAPP of van wie dan ook: geen bestand, geen tekening, geen maat, geen
   kleur. Wat op hen teruggaat is het IDEE (een flauw patroon achter de berichten) en dat idee is van
   niemand. De bron van de tekeningen staat in
   `nevaro/deploy/12-10-2026-patroon-kleiner/` (patroon-licht.svg, patroon-donker.svg en de kijkversie
   met volle inkt) en de hulpstukken zijn fe-1012-328 t/m fe-1012-344.

   KLEINER. De langste zijde van een tekening was 67 tot 79 beeldpunten (gemiddeld 73,7); nu is dat
   32 tot 38 (gemiddeld 35,1, dus 48% van wat het was) — gemeten
   door elke tekening met de echte browser te renderen en de beeldpunten te tellen (fe-1012-328).
   De lijndikte ging van 1,8 naar 1,6 px, zodat de kleinere tekening niet zwaar gaat lijken.

   ONREGELMATIG. De tekeningen staan niet meer in negen vakken op hetzelfde ritme van 133,3 px: ze zijn
   door elkaar gezet (dichtst bij elkaar ongeveer 43,9 px, ruimer elders ongeveer 92,5 px;
   nagemeten uit de gebouwde tegel komt dat op 45 en 93), hier
   en daar dichter bij elkaar en elders een leegte. De draaiingen blijven klein (-9 tot +9 graden), zodat niets
   de aandacht trekt, en alle tekeningen zijn even flauw: geen enkele springt eruit.

   NAADLOOS. Elke tekening houdt minstens 10 px afstand tot de rand van de tegel, en er raken
   geen twee tekeningen elkaar (nagerekend én ECHT gerenderd in fe-1012-330). Wat de rand niet raakt,
   kan geen naad geven: de ene tegel sluit dus naadloos op de andere aan, in beide richtingen.

   WAAROM TWEE KLEUREN. De twee LICHTE thema's (Huidig licht, Nieuw licht) hebben allebei een witte
   kaart onder het gesprek en krijgen zwarte lijnen met doorzichtigheid .048; de twee DONKERE
   thema's hebben allebei #17191C en krijgen witte lijnen met .065. Die twee getallen komen uit
   een meting: op de plekken waar twee lijnstukken van één tekening samenkomen wordt de lijn twee keer
   getekend en is het beeldpunt twee keer zo donker.
   NAGEMETEN (fe-1012-336): gewone tekst haalt op de kaart 17,61 op 1 (donker 15,03) en de zachte
   grijs 6,25 (donker 7,27); boven de LIJN van het patroon blijft dat 14,77 respectievelijk 2,70
   (donker 10,81 en 6,64). Gewone tekst houdt dus ruim boven 4,5 op 1. De flauwste grijze
   voetnootjes ("Kopiëren" en dergelijke) zaten AL onder 4,5 op 1 vóórdat dit patroon bestond
   (zonder patroon 3,22) en dat is met dit patroon niet wezenlijk veranderd. Tot slot: de eigen
   ballon van een bericht dekt het patroon volledig af (0 van 23 188 beeldpunten verandert er).
   Het patroon staat achter ALLES in het gesprek (de ballonnen zijn ondoorzichtig en dekken het af),
   dus de tekst blijft op dezelfde ondergrond staan die hij altijd al had.

   AAN OF UIT. De klant kan het in het instellingenvenster uitzetten (rij "Achtergrond"); uit betekent
   `data-patroon="uit"` op het html-element en dan valt alleen de tekening weg. Aan die schakelaar is
   in deze ronde NIETS veranderd. Staat er niets, dan is het patroon aan.
   ========================================================================================== */

:root {
  --gesprek-patroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='black' stroke-opacity='.048' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(74.0 34.0) rotate(7) scale(0.4615) translate(-50 -50)'%3E%3Cpath d='M12 26H88V74H12Z M12 26 50 54 88 26'/%3E%3C/g%3E%3Cg transform='translate(120.0 78.0) rotate(-6) scale(0.5156) translate(-50 -50)'%3E%3Cpath d='M20 54 42 76 82 26'/%3E%3C/g%3E%3Cg transform='translate(244.0 28.0) rotate(-9) scale(0.3953) translate(-50 -50)'%3E%3Cpath d='M50 14 61 44 92 44 67 62 76 92 50 74 24 92 33 62 8 44 39 44Z'/%3E%3C/g%3E%3Cg transform='translate(322.0 58.0) rotate(5) scale(0.5500) translate(-50 -50)'%3E%3Cpath d='M28 62C28 42 38 30 50 28 62 30 72 42 72 62Z M22 62H78 M50 28V20M42 70a8 8 0 0 0 16 0'/%3E%3C/g%3E%3Cg transform='translate(298.0 116.0) rotate(6) scale(0.5000) translate(-50 -50)'%3E%3Cpath d='M32 76C18 76 12 62 22 55 20 43 32 33 44 37 48 23 68 21 74 33 88 31 94 45 85 55 93 63 84 76 72 76Z'/%3E%3C/g%3E%3Cg transform='translate(32.0 122.0) rotate(-8) scale(0.6034) translate(-50 -50)'%3E%3Cpath d='M22 78 30 56 64 22 78 36 44 70Z M30 56 44 70 M60 26 74 40'/%3E%3C/g%3E%3Cg transform='translate(152.0 148.0) rotate(4) scale(0.4865) translate(-50 -50)'%3E%3Cpath d='M50 14a36 36 0 1 0 0 72 36 36 0 1 0 0-72 M50 32V52H70'/%3E%3C/g%3E%3Cg transform='translate(222.0 190.0) rotate(-7) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M18 38 50 22 82 38V78L50 94 18 78Z M18 38 50 54 82 38 M50 54V94'/%3E%3C/g%3E%3Cg transform='translate(368.0 168.0) rotate(-4) scale(0.4857) translate(-50 -50)'%3E%3Cpath d='M34 36a14 14 0 1 0 0 28 14 14 0 0 0 0-28 M48 50H88 M74 50V62 M84 50V58'/%3E%3C/g%3E%3Cg transform='translate(62.0 208.0) rotate(8) scale(0.5152) translate(-50 -50)'%3E%3Cpath d='M50 32C40 24 28 22 18 26V78C28 74 40 76 50 84 60 76 72 74 82 78V26C72 22 60 24 50 32Z M50 32V84'/%3E%3C/g%3E%3Cg transform='translate(168.0 246.0) rotate(-5) scale(0.6800) translate(-50 -50)'%3E%3Ccircle cx='38' cy='70' r='10'/%3E%3Cpath d='M48 70V22L72 34 M72 34V54'/%3E%3C/g%3E%3Cg transform='translate(262.0 216.0) rotate(-8) scale(0.4444) translate(-50 -50)'%3E%3Cpath d='M50 9 80 19V46C80 66 68 80 50 88 32 80 20 66 20 46V19ZM37 47 47 58 64 37'/%3E%3C/g%3E%3Cg transform='translate(338.0 274.0) rotate(6) scale(0.5152) translate(-50 -50)'%3E%3Cpath d='M18 24H82V68H46L30 84V68H18Z M32 40H68 M32 52H58'/%3E%3C/g%3E%3Cg transform='translate(204.0 306.0) rotate(9) scale(0.4231) translate(-50 -50)'%3E%3Cpath d='M12 32H46L54 42H88V82H12Z M12 42H88'/%3E%3C/g%3E%3Cg transform='translate(40.0 300.0) rotate(-3) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M14 26H86V86H14Z M14 42H86 M32 16V32 M68 16V32 M28 56h12 M48 56h12M28 70h12'/%3E%3C/g%3E%3Cg transform='translate(118.0 344.0) rotate(4) scale(0.4714) translate(-50 -50)'%3E%3Cpath d='M18 16V84H86 M32 84V58 M50 84V40 M68 84V66 M84 84V48'/%3E%3C/g%3E%3Cg transform='translate(162.0 322.0) rotate(3) scale(0.4211) translate(-50 -50)'%3E%3Cpath d='M28 14V68a16 16 0 0 0 32 0V20a10 10 0 0 0-20 0V64'/%3E%3C/g%3E%3Cg transform='translate(352.0 366.0) rotate(7) scale(0.4231) translate(-50 -50)'%3E%3Cpath d='M22 12H60L78 30V88H22Z M60 12V30H78 M34 52H66 M34 64H58'/%3E%3C/g%3E%3Cg transform='translate(262.0 368.0) rotate(-6) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M20 42H70V60C70 72 61 80 45 80 29 80 20 72 20 60ZM74 48C86 48 88 60 78 64 M12 88H80 M38 32C42 26 34 22 38 16M52 32C56 26 48 22 52 16'/%3E%3C/g%3E%3Cg transform='translate(46.0 368.0) rotate(-9) scale(0.4103) translate(-50 -50)'%3E%3Cpath d='M50 22a22 22 0 1 0 0 44 22 22 0 1 0 0-44 M41 70h18 M44 78h12M50 8V2 M20 44H14 M80 44H86 M28 20 23 15 M72 20 77 15'/%3E%3C/g%3E%3Ccircle cx='186.0' cy='20.0' r='1.5'/%3E%3Ccircle cx='56.0' cy='82.0' r='1.5'/%3E%3Ccircle cx='196.0' cy='100.0' r='1.5'/%3E%3Ccircle cx='350.0' cy='104.0' r='1.5'/%3E%3Ccircle cx='110.0' cy='186.0' r='1.5'/%3E%3Ccircle cx='314.0' cy='210.0' r='1.5'/%3E%3Ccircle cx='140.0' cy='286.0' r='1.5'/%3E%3Ccircle cx='306.0' cy='324.0' r='1.5'/%3E%3Ccircle cx='96.0' cy='384.0' r='1.5'/%3E%3Ccircle cx='222.0' cy='40.0' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  --gesprek-patroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='white' stroke-opacity='.065' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(74.0 34.0) rotate(7) scale(0.4615) translate(-50 -50)'%3E%3Cpath d='M12 26H88V74H12Z M12 26 50 54 88 26'/%3E%3C/g%3E%3Cg transform='translate(120.0 78.0) rotate(-6) scale(0.5156) translate(-50 -50)'%3E%3Cpath d='M20 54 42 76 82 26'/%3E%3C/g%3E%3Cg transform='translate(244.0 28.0) rotate(-9) scale(0.3953) translate(-50 -50)'%3E%3Cpath d='M50 14 61 44 92 44 67 62 76 92 50 74 24 92 33 62 8 44 39 44Z'/%3E%3C/g%3E%3Cg transform='translate(322.0 58.0) rotate(5) scale(0.5500) translate(-50 -50)'%3E%3Cpath d='M28 62C28 42 38 30 50 28 62 30 72 42 72 62Z M22 62H78 M50 28V20M42 70a8 8 0 0 0 16 0'/%3E%3C/g%3E%3Cg transform='translate(298.0 116.0) rotate(6) scale(0.5000) translate(-50 -50)'%3E%3Cpath d='M32 76C18 76 12 62 22 55 20 43 32 33 44 37 48 23 68 21 74 33 88 31 94 45 85 55 93 63 84 76 72 76Z'/%3E%3C/g%3E%3Cg transform='translate(32.0 122.0) rotate(-8) scale(0.6034) translate(-50 -50)'%3E%3Cpath d='M22 78 30 56 64 22 78 36 44 70Z M30 56 44 70 M60 26 74 40'/%3E%3C/g%3E%3Cg transform='translate(152.0 148.0) rotate(4) scale(0.4865) translate(-50 -50)'%3E%3Cpath d='M50 14a36 36 0 1 0 0 72 36 36 0 1 0 0-72 M50 32V52H70'/%3E%3C/g%3E%3Cg transform='translate(222.0 190.0) rotate(-7) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M18 38 50 22 82 38V78L50 94 18 78Z M18 38 50 54 82 38 M50 54V94'/%3E%3C/g%3E%3Cg transform='translate(368.0 168.0) rotate(-4) scale(0.4857) translate(-50 -50)'%3E%3Cpath d='M34 36a14 14 0 1 0 0 28 14 14 0 0 0 0-28 M48 50H88 M74 50V62 M84 50V58'/%3E%3C/g%3E%3Cg transform='translate(62.0 208.0) rotate(8) scale(0.5152) translate(-50 -50)'%3E%3Cpath d='M50 32C40 24 28 22 18 26V78C28 74 40 76 50 84 60 76 72 74 82 78V26C72 22 60 24 50 32Z M50 32V84'/%3E%3C/g%3E%3Cg transform='translate(168.0 246.0) rotate(-5) scale(0.6800) translate(-50 -50)'%3E%3Ccircle cx='38' cy='70' r='10'/%3E%3Cpath d='M48 70V22L72 34 M72 34V54'/%3E%3C/g%3E%3Cg transform='translate(262.0 216.0) rotate(-8) scale(0.4444) translate(-50 -50)'%3E%3Cpath d='M50 9 80 19V46C80 66 68 80 50 88 32 80 20 66 20 46V19ZM37 47 47 58 64 37'/%3E%3C/g%3E%3Cg transform='translate(338.0 274.0) rotate(6) scale(0.5152) translate(-50 -50)'%3E%3Cpath d='M18 24H82V68H46L30 84V68H18Z M32 40H68 M32 52H58'/%3E%3C/g%3E%3Cg transform='translate(204.0 306.0) rotate(9) scale(0.4231) translate(-50 -50)'%3E%3Cpath d='M12 32H46L54 42H88V82H12Z M12 42H88'/%3E%3C/g%3E%3Cg transform='translate(40.0 300.0) rotate(-3) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M14 26H86V86H14Z M14 42H86 M32 16V32 M68 16V32 M28 56h12 M48 56h12M28 70h12'/%3E%3C/g%3E%3Cg transform='translate(118.0 344.0) rotate(4) scale(0.4714) translate(-50 -50)'%3E%3Cpath d='M18 16V84H86 M32 84V58 M50 84V40 M68 84V66 M84 84V48'/%3E%3C/g%3E%3Cg transform='translate(162.0 322.0) rotate(3) scale(0.4211) translate(-50 -50)'%3E%3Cpath d='M28 14V68a16 16 0 0 0 32 0V20a10 10 0 0 0-20 0V64'/%3E%3C/g%3E%3Cg transform='translate(352.0 366.0) rotate(7) scale(0.4231) translate(-50 -50)'%3E%3Cpath d='M22 12H60L78 30V88H22Z M60 12V30H78 M34 52H66 M34 64H58'/%3E%3C/g%3E%3Cg transform='translate(262.0 368.0) rotate(-6) scale(0.4595) translate(-50 -50)'%3E%3Cpath d='M20 42H70V60C70 72 61 80 45 80 29 80 20 72 20 60ZM74 48C86 48 88 60 78 64 M12 88H80 M38 32C42 26 34 22 38 16M52 32C56 26 48 22 52 16'/%3E%3C/g%3E%3Cg transform='translate(46.0 368.0) rotate(-9) scale(0.4103) translate(-50 -50)'%3E%3Cpath d='M50 22a22 22 0 1 0 0 44 22 22 0 1 0 0-44 M41 70h18 M44 78h12M50 8V2 M20 44H14 M80 44H86 M28 20 23 15 M72 20 77 15'/%3E%3C/g%3E%3Ccircle cx='186.0' cy='20.0' r='1.5'/%3E%3Ccircle cx='56.0' cy='82.0' r='1.5'/%3E%3Ccircle cx='196.0' cy='100.0' r='1.5'/%3E%3Ccircle cx='350.0' cy='104.0' r='1.5'/%3E%3Ccircle cx='110.0' cy='186.0' r='1.5'/%3E%3Ccircle cx='314.0' cy='210.0' r='1.5'/%3E%3Ccircle cx='140.0' cy='286.0' r='1.5'/%3E%3Ccircle cx='306.0' cy='324.0' r='1.5'/%3E%3Ccircle cx='96.0' cy='384.0' r='1.5'/%3E%3Ccircle cx='222.0' cy='40.0' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Het gesprek draagt de tekening. De tekening KRULT MEE met de berichten (standaard) — ze staat
   stil ten opzichte van wat je leest. */
.thread {
  background-image: var(--gesprek-patroon);
  background-repeat: repeat;
  background-position: left top;
}

/* UIT (de klant koos "Uit" in het instellingenvenster). Deze regel staat hieronder en is even sterk
   als de regel hierboven, dus hij wint; de extra regel met data-skin maakt het ook zonder die
   volgorde zeker. Alleen de tekening valt weg: de ondergrond van de kaart blijft precies zoals hij was. */
html[data-patroon="uit"] .thread {
  background-image: none;
}

/* ------------------------------------------------------------------------------------------
   [0] DE SCHADUW VAN DE LOSSE KAARTEN, PER THEMA.
   In de nieuwe uitvoering komt de schaduw uit `--nieuw-schaduw-inkt` (licht groen-grijs, donker
   zwart). Voor de standaard-uitvoering is hier hetzelfde idee met de kleur die daar al in de
   schaduw zit: in het lichte thema dezelfde inkt als `--shadow` (20, 22, 26), in het donkere
   thema zwart. Zo loopt de schaduw mee met het thema zonder dat er een kleur bijkomt.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] { --lk-schaduw-inkt: 20, 22, 26; }
html[data-skin="professioneel"][data-theme="dark"] { --lk-schaduw-inkt: 0, 0, 0; }

/* ==========================================================================================
   [1] DE LINKERKOLOM EN HET PANEEL RECHTS STAAN ALS KAART OP DE ONDERGROND
   ------------------------------------------------------------------------------------------
   Wat er verandert: het eigen witte vlak van de twee kolommen houdt zijn kleur, maar krijgt
   ronde hoeken, een zachte schaduw en een kleine marge, zodat de ondergrond van het scherm
   eromheen te zien is. De scheidingslijn met het midden valt weg: die hoorde bij de kolom als
   vlak, niet bij een kaart.

   DE MARGE EN DE HOEK KOMEN UIT DE NIEUWE UITVOERING: die geeft zijn kolommen een marge van
   6 px aan de zijkant (2 px boven, 10 px onder) en de hoek `var(--radius)`. Hier staat precies
   hetzelfde. Alleen op een BREED scherm (vanaf 901 px): op een telefoon schuift de linkerkolom
   als lade over het gesprek heen en moet hij tot de rand doorlopen — dezelfde grens die de
   nieuwe uitvoering daar gebruikt.

   EN DE MARGE WORDT VAN DE BINNENRUIMTE AFGEHAALD, zodat de INHOUD van de kolom precies blijft
   staan waar hij stond: het merk, het menu, "Nieuw gesprek", het zoekvak, de gesprekken en de
   twee tellers houden hun eigen plek en hun eigen breedte (14 px van de rand van het scherm).
   Zonder die correctie zou de hele kolom 6 px opschuiven en 12 px smaller worden — en dat is
   niet gevraagd: de KAART is de verandering, niet de inhoud. De nieuwe uitvoering doet het op
   dezelfde manier (daar: marge 6 px, binnenmarge 18 px 8 px 2 px).
   ========================================================================================== */
@media (min-width: 901px) {
  html[data-skin="professioneel"] .side {
    margin: 2px 6px 10px 6px;
    padding: 18px 8px 2px;              /* 20/14/12 min de marge (2/6/10) = de inhoud blijft staan */
    border-right: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  html[data-skin="professioneel"] .blok {
    margin: 2px 6px 10px 6px;
    padding: 18px 8px 2px 9px;          /* idem: de inhoud van het paneel blijft op zijn plek */
    border-left: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
}

/* ==========================================================================================
   [2] DE GESPREKKEN IN DE LINKERKOLOM: ELK EEN EIGEN KAART MET RUIMTE ERTUSSEN
   ------------------------------------------------------------------------------------------
   De hoek (18 px) stond al sinds 1.9.16 op deze regels; wat erbij komt is de RUIMTE tussen de
   regels (6 px — dezelfde ruimte als tussen de regels in de nieuwe uitvoering) en dat elke regel
   een eigen kaart is: eigen ondergrond, de zachte schaduw uit de nieuwe uitvoering en een dunne
   lijn in de bestaande lijnkleur (--line, dezelfde lijn die al overal in deze uitvoering staat).
   Die dunne lijn hoort erbij: de kolom is in deze uitvoering wit en de regel is dat ook, dus
   zonder een randje zou een kaart van wit op wit niet te zien zijn — in de nieuwe uitvoering is
   de kolom zelf doorschijnend en daar is de kaart alleen te zien als je er met de muis op staat;
   hier heeft de eigenaar juist gevraagd om ELKE regel als losse kaart. De binnenmarge en de
   letter van de regel blijven zoals ze waren (9 px 10 px) — daar is niets aan veranderd.

   De regel van het OPEN gesprek houdt zijn eigen kleur (het groene waas van de huisstijl): dat
   is de enige plek waar je zonder woorden ziet welk gesprek openstaat. Hij krijgt dezelfde
   kaartvorm en gaat iets meer op de voorgrond liggen (schaduw), zodat "open" en "niet open"
   uit elkaar te houden blijven nu alle regels een kaart zijn.
   ========================================================================================== */
html[data-skin="professioneel"] .side__list { gap: 6px; }

html[data-skin="professioneel"] .chatitem {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(var(--lk-schaduw-inkt), .08);
}

html[data-skin="professioneel"] .chatitem:hover {
  background: var(--surface-2);
  color: var(--ink);
}

html[data-skin="professioneel"] .chatitem--active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* ==========================================================================================
   [3] DE TEAMLEDEN IN HET PANEEL RECHTS: OOK ELK EEN EIGEN KAART
   ------------------------------------------------------------------------------------------
   In de standaard-uitvoering waren dit regels met een scheidingslijntje erboven. Dat lijntje
   valt weg (een kaart heeft geen streep meer nodig), en elke regel wordt een eigen kaart met
   de vorm die de nieuwe uitvoering voor deze regels zelf heeft staan (hoek 16 px, binnenmarge
   10 px 12 px, ondergrond --surface en de zachte schaduw — dat staat daar in het blok van de
   losse kaartjes, al heeft de stap daarna die kaartjes daar weer vlak gemaakt). De dunne lijn
   in de bestaande lijnkleur hoort er hier om dezelfde reden bij als bij de gesprekken: wit op
   wit is anders niet te zien. De ruimte ertussen blijft zoals hij was (12 px): die was in deze
   uitvoering al ruim genoeg, dus daar is niets aan veranderd.
   ========================================================================================== */
html[data-skin="professioneel"] .blok__lid {
  border-top: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(var(--lk-schaduw-inkt), .08);
}

/* ==========================================================================================
   [4] DE INTERNE VENSTERS: KOP, INHOUD EN KNOPPENRIJ ELK EEN EIGEN KAART
   ------------------------------------------------------------------------------------------
   Precies dezelfde behandeling als in de nieuwe uitvoering. Het venster zelf wordt geen vlak
   meer maar een stapel kaarten: eigen ondergrond, rand, hoek en schaduw gaan eraf, de
   binnenmarge gaat naar 0 en de ruimte tussen de kaarten wordt 8 px. Elk onderdeel van het
   venster (kop, inhoud, knoppenrij, losse tekstregel) wordt daarna een eigen kaart: ondergrond
   --surface, hoek 26 px, binnenmarge 12 px 14 px en de zachte schaduw. De koppen en de
   knoppenrijen zijn lager en krijgen daarom de kleinere hoek (18 px) en een kleinere marge
   (8 px 12 px) — een kleine kaart met een grote hoek leest niet rustig.

   LET OP: de afrondingen van 1.9.16 zetten op deze vensterkaarten al 26 px. Die regel wordt
   hier niet aangepast; hij doet alleen niets meer, omdat de kaart eromheen nu doorzichtig en
   hoekloos is (net als in de nieuwe uitvoering).
   ========================================================================================== */
html[data-skin="professioneel"] .prune__card,
html[data-skin="professioneel"] .cal__card,
html[data-skin="professioneel"] .fm__card,
html[data-skin="professioneel"] .td__card,
html[data-skin="professioneel"] .set__card,
html[data-skin="professioneel"] .team__card,
html[data-skin="professioneel"] .blokdlg__card,
html[data-skin="professioneel"] .kp__card,
html[data-skin="professioneel"] .vt__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 8px;
}

html[data-skin="professioneel"] .prune__card > *,
html[data-skin="professioneel"] .cal__card > *,
html[data-skin="professioneel"] .fm__card > *,
html[data-skin="professioneel"] .td__card > *,
html[data-skin="professioneel"] .set__card > *,
html[data-skin="professioneel"] .team__card > *,
html[data-skin="professioneel"] .blokdlg__card > *,
html[data-skin="professioneel"] .kp__card > * {
  background: var(--surface);
  border-radius: 26px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(var(--lk-schaduw-inkt), .08);
}

/* Kop, knoppenrij en losse tekstregels: een kleinere kaart, dus een kleinere hoek. */
html[data-skin="professioneel"] .prune__card > :is(.blokdlg__head, .cal__head, .fm__head, .td__head,
    .set__head, .team__head, .kp__head, .cal__actions, .fm__actions, .td__foot, .kp__actions,
    .set__actions, .team__actions, .prune__actions, .prune__row, .prune__count, .vt__tel,
    .vt__mislukt, .vt__uitleg, .team__hint, .team__kop, .team__leeg, .team__status, .fm__status,
    .td__status, .fm__gebruik, .fm__pad, .cal__hint, .cal__agenda, .set__hint, .prune__title,
    .prune__text) {
  border-radius: 18px;
  padding: 8px 12px;
}

/* In Instellingen en Sleutels staan de onderwerpen nu als losse kaarten: de scheidingslijn
   bovenaan kan weg. */
html[data-skin="professioneel"] .set__blok { border-top: 0; }

/* ==========================================================================================
   [5] DE LOSSE REGELS BINNEN DE VENSTERS: EEN BEETJE LUCHT ERTUSSEN
   ------------------------------------------------------------------------------------------
   De regels zelf (bestanden, taken, terugkerende taken, team) hadden in de standaard-
   uitvoering hun eigen ruimte al; met de kaarten eromheen is 6 px dezelfde lucht als in de
   nieuwe uitvoering. Aan de regels zelf verandert niets (kleur, maat, hoek en letter blijven).
   ========================================================================================== */
html[data-skin="professioneel"] .fm__list,
html[data-skin="professioneel"] .td__list,
html[data-skin="professioneel"] .vt__lijst,
html[data-skin="professioneel"] .team__lijst { gap: 6px; }

/* ==========================================================================================
   [6] DE TWEE TELLERS ONDERAAN DE LINKERKOLOM: IN DEZELFDE LIJN ALS DE REST
   ------------------------------------------------------------------------------------------
   Klacht van de eigenaar (11-10-2026, ~19:10 UTC): *"de tellertjes links ondering mogen beter
   worden uitgelijnd, het pillitje/kaartje"*. Gemeten op het scherm is het kaartje smaller dan
   de gesprekkenlijst erboven (205 px in een kolom van 243 px), dus het houdt ruim voor de
   rechterrand op en staat niet in dezelfde lijn als de lijst, het menu en het zoekvak.

   WAT HIER STAAT: het KAARTJE wordt verhuisd van het smalle pilletje naar het omhulsel eromheen,
   precies zoals de nieuwe uitvoering het doet. Het omhulsel heeft de volle breedte van de kolom,
   dus daarmee begint het kaartje op dezelfde marge links als de gesprekkenlijst, het menu en het
   zoekvak, en houdt het op dezelfde marge rechts op. De twee tellers zelf veranderen niet van
   maat en blijven op hun plek staan: alleen de binnenmarge van het omhulsel (10 px, net als in de
   nieuwe uitvoering) schuift de tekst 4 px naar rechts, zodat hij vrij van de ronde zijkant blijft.

   WAAROM HET KAARTJE NAAR HET OMHULSEL VERHUIST — dit is geen smaak maar een eis van de voorkant
   zelf: `app.js` (tellersVorm) meet of de ENE regel in de kolom past door de BREEDTE van
   `#tellers` te vergelijken met de breedte van het vak eromheen, en zet de twee tellers anders
   ONDER ELKAAR. Zet je de volle breedte op `#tellers` zelf, dan is die meting per definitie te
   breed en slaat de voorkant om naar twee regels (in het lab gemeten: het kaartje werd 28 px hoog
   in plaats van 64 px, met de twee tellers onder elkaar). Op het OMHULSEL verandert er niets aan
   die meting — daarom staat de kaart daar.

   Alleen de BREEDTE van het kaartje en die 10 px binnenmarge veranderen. De hoogte van de tekst,
   de letter en de getallen blijven precies zoals ze waren; de linker kolom zelf schuift door de
   kaart eromheen geen millimeter op (zie [1]), dus het kaartje staat in dezelfde lijn als de rest.
   ========================================================================================== */
html[data-skin="professioneel"] #tellers-wrap {
  display: flex;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
}

/* Het pilletje erbinnen houdt zijn eigen maat en zijn eigen plek; het is geen kaartje meer. */
html[data-skin="professioneel"] .tellers {
  background: transparent;
  border: 0;
}

/* ------------------------------------------------------------------------------------------
   [0] DE KLEUREN VAN DE ETIKETTEN, PER THEMA.
   Licht en donker hebben elk hun eigen vlak en hun eigen inkt; de inkt is de kleur die je leest
   en het vlak is waar hij op staat. Beide zijn nagerekend; de getallen staan in het logboek.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] {
  --pr-klaar-vlak: #E3EFEB;                      /* onze eigen groen, licht */
  --pr-klaar-inkt: #14614F;
  --pr-bezig-vlak: #FDF1E0;                      /* onze eigen amber, licht */
  --pr-bezig-inkt: #8A5A12;
  --pr-mislukt-vlak: color-mix(in srgb, #B4232A 10%, var(--surface));
  --pr-mislukt-inkt: #B4232A;                    /* ons eigen rood */
  --pr-taak-vlak: #E4EEFB;                       /* ons eigen blauw, licht */
  --pr-taak-inkt: #2E5A8A;
}

html[data-skin="professioneel"][data-theme="dark"] {
  --pr-klaar-vlak: #1E3B34;                      /* dezelfde kleurenfamilie, donker */
  --pr-klaar-inkt: #7FD3BC;
  --pr-bezig-vlak: #382C18;
  --pr-bezig-inkt: #E0B173;
  --pr-mislukt-vlak: color-mix(in srgb, #FF8A8A 12%, var(--surface));
  --pr-mislukt-inkt: #FF8A8A;
  --pr-taak-vlak: #1B2C42;
  --pr-taak-inkt: #8FB8E8;
}

/* ------------------------------------------------------------------------------------------
   [1] DE KAARTEN: de teamleider, het kopje "Team", het kopje "Jouw taken" (met de regels erin) en
   de losse kluskaart "Loopt nu". Zelfde vorm als de losse kaarten van 1.9.19 (hoek 16 px,
   binnenmarge 10 px 12 px, ondergrond --surface, dunne lijn en zachte schaduw), zodat het paneel
   één familie blijft. De teamleden zelf (.blok__lid) hebben die vorm al sinds 1.9.19.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__leider,
html[data-skin="professioneel"] .blok__kaart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(var(--lk-schaduw-inkt), .08);
}

/* De kop van een kaart: de titel links, de teller rechtsboven. */
html[data-skin="professioneel"] .blok__kaartkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

html[data-skin="professioneel"] .blok__kaarttitel {
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
}

/* De teller rechtsboven: een klein rond kaartje met het aantal erin. Kleur en maat komen uit de
   bestaande tokens (--surface-2 en --ink-soft), dus licht en donker lopen mee. */
html[data-skin="professioneel"] .blok__teller {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: max(9.6px, .68rem);
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* ------------------------------------------------------------------------------------------
   [2] DE TEAMLEIDER BOVENAAN: zijn cirkel groot, zijn naam, "teamleider · N teamleden", het
   pilletje "Nu bezig" en daaronder de regel over waar hij mee bezig is. De cirkel zelf is de
   bestaande lettercirkel van 1.9.17 (.hoofd--letter .hoofd--leider, 54 px met de ring in de
   huisstijlkleur); hier staat alleen de indeling eromheen.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__leiderrij {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[data-skin="professioneel"] .blok__leidertekst {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

html[data-skin="professioneel"] .blok__leidernaam {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}

html[data-skin="professioneel"] .blok__leiderrol {
  margin: 0;
  font-size: max(9.6px, .68rem);
  color: var(--ink-faint);
}

/* Het pilletje "● Nu bezig". Alleen te zien als er echt werk loopt (app.js); de kleur is onze
   eigen groen, dezelfde als het etiket "klaar" — het gaat immers over werk dat loopt. */
html[data-skin="professioneel"] .blok__nubezig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin: 3px 0 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pr-klaar-vlak);
  color: var(--pr-klaar-inkt);
  font-size: max(9.6px, .68rem);
  font-weight: 600;
}

html[data-skin="professioneel"] .blok__stip {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* De regel over waar de teamleider mee bezig is: de HELE regel, niets afgekapt. Eerst stond hier
   een afkapping op twee regels; op test01 staat de standaardregel van de teamleider en die is
   langer, waardoor er "…om jou t" stond. Een halve zin is geen informatie, dus de afkapping is er
   uit (nagemeten 11-10-2026 ~21:44 UTC). */
html[data-skin="professioneel"] .blok__leiderbezig {
  margin: 0;
  font-size: max(10px, .74rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------------------------------
   [3] EEN TEAMLID ALS EIGEN KAART: de cirkel met de eerste letter (28 px — hij is geen knop, dus
   hij hoeft niet groot te zijn), de naam, de rol, de regel over waar hij mee bezig is en daaronder
   zijn opdrachten. De kaart zelf (.blok__lid) is van 1.9.19 en blijft precies zoals hij is.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__lid .blok__naam { align-items: center; }

html[data-skin="professioneel"] .blok__lid .hoofd {
  width: 28px;
  height: 28px;
}

html[data-skin="professioneel"] .blok__lid .hoofd--letter { font-size: 14px; }

/* ------------------------------------------------------------------------------------------
   [4] DE OPDRACHTEN VAN EEN TEAMLID: één pil per opdracht, in de kleur van zijn stand ("bezig" amber,
   "klaar" groen, "mislukt" rood). De pil loopt mee met de breedte van de kaart — de twee knopjes
   ("vooraan" en "×") hangen sinds [4b] los boven de regel en nemen dus geen ruimte meer in.
   De sleepgreep (⠿) is er nog wel (je kunt een opdracht nog steeds verplaatsen) maar komt pas te
   voorschijn als je op de pil staat; op een aanraakscherm staat hij altijd.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__rij--pil {
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pr-vlak, var(--surface-2));
  color: var(--ink);
}

html[data-skin="professioneel"] .blok__rij--bezig {
  --pr-vlak: var(--pr-bezig-vlak);
  --pr-inkt: var(--pr-bezig-inkt);
}

html[data-skin="professioneel"] .blok__rij--klaar {
  --pr-vlak: var(--pr-klaar-vlak);
  --pr-inkt: var(--pr-klaar-inkt);
}

html[data-skin="professioneel"] .blok__rij--mislukt {
  --pr-vlak: var(--pr-mislukt-vlak);
  --pr-inkt: var(--pr-mislukt-inkt);
}

html[data-skin="professioneel"] .blok__rij--pil:hover {
  background: color-mix(in srgb, var(--pr-inkt) 14%, var(--pr-vlak));
}

/* Het woord van de stand ("bezig", "klaar", "mislukt") staat in de inktkleur van zijn etiket; het
   vlak erachter is de pil zelf, dus het eigen pilltje eromheen valt weg. */
html[data-skin="professioneel"] .blok__rij--pil .blok__chip {
  background: none;
  border: 0;
  padding: 0;
  font-size: max(9.6px, .68rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pr-inkt);
}

html[data-skin="professioneel"] .blok__rij--pil .blok__greep { opacity: 0; }

html[data-skin="professioneel"] .blok__rij--pil:hover .blok__greep,
html[data-skin="professioneel"] .blok__rij--pil:focus-within .blok__greep { opacity: 1; }

@media (hover: none) {
  html[data-skin="professioneel"] .blok__rij--pil .blok__greep { opacity: 1; }
}

/* ------------------------------------------------------------------------------------------
   [4b] DE TWEE KNOPJES STAAN LOS VAN DE REGEL (1.9.20 — nagemeten 11-10-2026 ~21:38 UTC).
   Eerst stonden "vooraan" en "×" gewoon ín de regel. In een kaart van 291 px breed ging daar
   ongeveer 70 px van af en bleef er voor de opdracht zelf nog maar een paar centimeter over: de
   tekst werd midden in een woord afgekapt ("Zoek de levertijden va…"). Daarom hangen ze nu
   BOVEN de regel (position: absolute) in de rechteronderhoek: ze nemen geen ruimte meer in, de
   opdracht heeft de hele breedte, en ze komen nog steeds pas te voorschijn als de klant op de rij
   staat. Ze krijgen het vlak van de regel mee, zodat er geen letters door de knopjes heen
   schemeren. Dit is nagemeten met de meetlat van het lab (lab/pr-meet.js), niet op het oog.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__rij { position: relative; }

html[data-skin="professioneel"] .blok__rij > .blok__doe {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 4px 2px 8px;
  border-radius: 999px;
  background: var(--pr-vlak, var(--surface));
}

html[data-skin="professioneel"] .blok__rij--taak:hover > .blok__doe { background: var(--surface-2); }

/* ------------------------------------------------------------------------------------------
   [5] JOUW TAKEN: een vierkantje om aan te vinken, de tekst en rechts het etiket.
   Het vierkantje is een echte knop (app.js: blokTaakRijStandaard): aanklikken vinkt de taak af en
   zet hem in de Taken-lijst op dezelfde manier op "klaar"; nog eens klikken zet hem weer open. Het
   staat in de plaats van de sleepgreep — een taak haal je met "vooraan" naar boven.
   Het etiket zegt waar de taak vandaan komt ("van je assistente"). Dat is het enige wat de
   omgeving hier echt over zegt; "vandaag" of "morgen" bestaat er niet, dus dat staat er niet.
   ------------------------------------------------------------------------------------------ */
html[data-skin="professioneel"] .blok__rij--taak {
  align-items: flex-start;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 8px;
  cursor: default;
}

html[data-skin="professioneel"] .blok__rij--taak .blok__tekst { padding-top: 1px; }

html[data-skin="professioneel"] .blok__vink {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
}

html[data-skin="professioneel"] .blok__vink:hover { border-color: var(--accent); }

html[data-skin="professioneel"] .blok__vink.is-aan {
  background: var(--accent);
  border-color: var(--accent);
}

/* Het vinkje zelf: twee streepjes van een randje, een kwartslag gedraaid. */
html[data-skin="professioneel"] .blok__vink.is-aan::after {
  content: "";
  position: absolute;
  left: 4.4px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid #FFFFFF;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

html[data-skin="professioneel"] .blok__rijen--taken { gap: 4px; }

html[data-skin="professioneel"] .blok__etiket {
  flex: none;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: max(9.6px, .62rem);
  font-weight: 600;
  white-space: nowrap;
}

html[data-skin="professioneel"] .blok__etiket--assistente {
  background: var(--pr-taak-vlak);
  color: var(--pr-taak-inkt);
}

/* ================================================================================================
   DE KNOPPEN VAN HET OUDE THEMA — 12-10-2026, 1.9.25 (alleen test01)
   ------------------------------------------------------------------------------------------------
   De eigenaar zat in zijn eigen beheerscherm en vroeg: *"kan je naar de knoppen kijken voor de nu
   standaard thema"*. Dit blok zet ALLEEN de hoekafronding van de knoppen (en van de vakken en de
   regels waar je op klikt of in typt) gelijk aan zijn eigen scherm. Wat een pil is blijft een pil:
   de etiketten, de standen, de keuzeknopjes van de teamvorm, de tellers en de voorbeeldvragen.

   De waarden komen één op één uit `nevaro/beheer/app/static/nevaro.css` (alleen gelezen):
   .btn 12 px · .send 12 px · .topbtn/.iconbtn 10 px · .set__keuze 10 px · .set__opt 8 px ·
   .cal__day 10 px · .td__input 12 px · .fm__kruimel 6 px · .chatitem 10 px · .side__search 10 px ·
   .composer__box 18 px · de rijen en invulvakken in de vensters 10 px · .blok__rij 8 px.

   WAT NIET: geen hoogte, breedte, binnenmarge, kleur, letter, plek of volgorde; niets aan de acht
   vensterkaarten, aan de losse kaarten in het paneel rechts, aan de losse gesprekskaart of aan de
   ballon van het eigen bericht; geen regel die geen `border-radius` zet.
   ================================================================================================ */

/* DE GROTE KNOPPEN: "Nieuw gesprek" links, en in elk venster Sluiten, Opslaan, Toevoegen,
   Annuleren, Bewaren, Verwijderen, Aanvragen, Vandaag, Agenda koppelen, Bestand kiezen,
   Wachtwoord wijzigen, Uitloggen. In zijn scherm 12 px. */
html[data-skin="professioneel"] .btn { border-radius: 12px; }

/* HET PIJLTJE OM TE VERSTUREN, hetzelfde pijltje in de wachtrij en het stopknopje tijdens een
   antwoord. In zijn scherm 12 px. */
html[data-skin="professioneel"] .send,
html[data-skin="professioneel"] .send--queue,
html[data-skin="professioneel"] .send--stop { border-radius: 12px; }

/* DE KNOPJES IN DE BALK BOVEN HET GESPREK (Taken, Team en taken, Documenten, downloaden,
   tijdelijke kluis, Kalender, Koppelen, Instellingen) en de pictogramknopjes: het menu-knopje
   links en de vernieuw-knopjes in de vensters. In zijn scherm 10 px. */
html[data-skin="professioneel"] .topbtn,
html[data-skin="professioneel"] .iconbtn { border-radius: 10px; }

/* HET INSTELLINGENVENSTER: de keuzeknopjes Licht en Donker, Aan en Uit, en de vijf
   lettergroottes (8 px in zijn scherm) op de strip waar ze in staan (10 px in zijn scherm). */
html[data-skin="professioneel"] .set__opt { border-radius: 8px; }
html[data-skin="professioneel"] .set__keuze { border-radius: 10px; }

/* DE KALENDER: de dagen waar je op kunt klikken (in zijn scherm 10 px). */
html[data-skin="professioneel"] .cal__day { border-radius: 10px; }

/* DE INVULVAKKEN IN DE VENSTERS: een taak toevoegen (12 px in zijn scherm), het wachtwoordveld,
   de keuzelijst bij het opruimen (10 px). */
html[data-skin="professioneel"] .td__input { border-radius: 12px; }
html[data-skin="professioneel"] .set__input,
html[data-skin="professioneel"] .prune__select { border-radius: 10px; }

/* HET KRUIMELSPOOR BOVENAAN HET VENSTER DOCUMENTEN (in zijn scherm 6 px). */
html[data-skin="professioneel"] .fm__kruimel { border-radius: 6px; }

/* DE GESPREKKEN IN DE LIJST LINKS (zijn woorden: *"alles wat links staat dis chats"*) en het
   zoekvak erboven: 10 px in zijn scherm. */
html[data-skin="professioneel"] .chatitem { border-radius: 10px; }
html[data-skin="professioneel"] .side__search { border-radius: 10px; }

/* DE INVULBALK ONDERAAN HET GESPREK: die draagt het pijltje om te versturen (in zijn scherm
   18 px; een pil in het oude thema). */
html[data-skin="professioneel"] .composer__box,
html[data-skin="professioneel"] .composer__box:focus-within { border-radius: 18px; }

/* DE REGELS IN DE VENSTERS WAAR JE OP KLIKT: een document, een taak, een teamlid, een regel in de
   agenda, een terugkerende taak. In zijn scherm 10 px. */
html[data-skin="professioneel"] .fm__row,
html[data-skin="professioneel"] .td__item,
html[data-skin="professioneel"] .team__rij,
html[data-skin="professioneel"] .cal__agenda,
html[data-skin="professioneel"] .vt__rij,
html[data-skin="professioneel"] .vt__mislukt { border-radius: 10px; }

/* DE REGELS IN HET PANEEL RECHTS (Jouw taken, de wachtrij, de opdrachten van de teamleden):
   8 px in zijn scherm. De twee kleine knopjes op zo'n regel blijven zoals ze zijn: die zitten
   vast aan het vlakje dat hun eigen achtergrond meebrengt (anders schemeren de letters erdoor
   heen) — daar is geen keuze die logisch is, en dat is aan de eigenaar gemeld. */
html[data-skin="professioneel"] .blok__rij { border-radius: 8px; }

/* ================================================================================================
   HET RONDE KNOPJE, DE ETIKETTEN EN DE ETIKETTEN IN DE GESPREKKENLIJST — 12-10-2026, 1.9.26
   (alleen test01)
   ------------------------------------------------------------------------------------------------
   Drie wensen van de eigenaar, alle drie op 12-10-2026 in de avond:

   1. *"het helemaal ronde knopje wil ik het knopje van hier, ook de knopjes van hier wil ik naar
      test01"* — NAGEMETEN, geen regel nodig: van elk rond knopje op test01 staat dezelfde soort knop
      op zijn eigen beheerscherm, en daar heeft hij DEZELFDE vorm (zie `fe-1012-421-vorm-vergelijk.py`
      en `bewijs/460-vorm-vergelijk.txt`). De keuzeknopjes in het instellingenvenster — het ronde
      knopje dat hij bedoelde — hebben sinds 1.9.25 al de vorm van zijn scherm (8 px in plaats van
      helemaal rond). Wat op test01 nog rond is (de keuzeknopjes van de teamvorm en van het koppelen,
      de voorbeeldvragen op het lege scherm, het plusje op een koppelknop, de telletjes en de
      etiketten) is op zijn eigen scherm OOK rond: dat blijft dus zo.

   2. *"etiketten ook dezelfde ronding als hier het admin pagina"* — NAGEMETEN: alle etiketten van
      test01 hebben dezelfde ronding als zijn beheerscherm (999 px), en met dezelfde binnenmarge waar
      hetzelfde etiket daar ook bestaat (klaar/bezig-chip 1 px 6 px, stand 1 px 7 px, de badge bij
      een gesprek en bij een taak 0 .34rem, de telletjes 0 4 px, de stand bij een terugkerende taak
      1 px 9 px 2 px). Twee etiketten bestaan op zijn scherm NIET en hadden 8 px links en rechts in
      plaats van de 6 en 7 px van hun soortgenoten daar; die twee staan hieronder.

   3. *"labels bij chats mogen weg"* — het etiket in de gesprekkenregel (`.chatitem__badge`) wordt
      niet meer gemaakt (zie app.js). De regel hieronder staat er als geheugensteun; hij raakt geen
      enkel element. De etiketten bij de teamleden, bij de taken en de telletjes blijven.

   WAT NIET: geen hoogte, kleur, letter, plek of volgorde; niets aan de knoppen; niets aan de
   ronding van welk etiket dan ook (die was al gelijk); niets aan de tellers (daar bestaat geen
   soortgenoot op zijn scherm, dus valt er niets over te nemen).
   ================================================================================================ */

/* Het etiket "Assistente" bij een taak in het paneel rechts: dezelfde binnenmarge als het gewone
   etiket op zijn beheerscherm (1 px boven en onder, 6 px links en rechts). Het was 8 px links en
   rechts; de ronding (999 px) blijft. */
html[data-skin="professioneel"] .blok__etiket { padding: 1px 6px; }

/* De stand op een pil-regel in het paneel rechts ("bezig"): dezelfde binnenmarge als de stand op
   zijn beheerscherm (1 px boven en onder, 7 px links en rechts). Het was 8 px links en rechts. */
html[data-skin="professioneel"] .blok__nubezig { padding: 1px 7px; }

/* Het etiket in de gesprekkenregel bestaat niet meer (app.js). Deze regel staat er alleen zodat
   duidelijk is dat er niets meer aan hangt; hij raakt geen enkel element. */
html[data-skin="professioneel"] .chatitem__badge { display: none; }

/* ================================================================================================
   DE VENSTERS OP ÉÉN DOORLOPEND VLAK — 12-10-2026, 1.9.27 (alleen test01)
   ------------------------------------------------------------------------------------------------
   Woorden van de eigenaar (12-10-2026 ~20:05 UTC, via de manager): *"en vergeet de achtergrond niet
   van het setting menu die is nog doorzichtig"* en eerder al *"bij de settings en andere menu's …
   dan zie je de tekst van de chat erachter, kan je die doorlopend maken?"*.

   WAT ER AAN DE HAND WAS. In blok [4] hierboven is de kaart van elk venster doorzichtig gemaakt
   (`background: transparent`) en kreeg ELK onderdeel erin zijn eigen vlak (`--surface`), met 8 px
   ruimte ertussen en een eigen ronde hoek. Door die 8 px ruimte en langs de ronde hoeken van die
   losse vlakken is te zien wat er achter het venster staat — de gesprekkenlijst, de chattekst en het
   achtergrondpatroon. Het venster was dus geen vlak maar een stapel losse kaartjes boven een gat.

   WAT DIT BLOK DOET. Het venster zelf krijgt weer één eigen vlak: de kleur van het thema
   (`--surface` — precies de kleur die de onderdelen erin al hadden, dus er komt GEEN nieuwe kleur
   bij), dezelfde buitenhoek van 26 px (zodat de buitenkant van het venster precies hetzelfde blijft
   als wat er stond) en dezelfde zachte schaduw als elk ander venster. Daarmee dekt het venster
   overal door: er komt niets van het scherm erachter meer door — geen gesprekkenlijst, geen
   chattekst, geen patroon.

   GEEN RAND OM HET VENSTER, en dat is met opzet: een rand van 1 px duwt de inhoud 1 px opzij en
   maakt het venster 2 px hoger (gemeten op 12-10-2026 in de eerste proef: de kop en alle
   onderdelen schoven 1 px, de lijst werd 2 px korter). De eigenaar wil dat alles blijft staan waar
   het staat, en een rand is voor het door-dekken niet nodig: het vlak zelf is de grens.

   De onderdelen IN het venster blijven exact staan waar ze staan: zelfde plek, zelfde maat, zelfde
   marge, zelfde letter, zelfde kleur. Ze krijgen alleen geen eigen vlak, geen eigen hoek en geen
   eigen schaduw meer — anders bleef je de losse kaartjes zien. In plaats daarvan komt er tussen twee
   onderdelen een dun scheidingslijntje van 1 px in de lijnkleur van het thema; dat is precies wat de
   eigenaar toestaat: *"onderdelen mogen hooguit door een dun scheidingslijntje gescheiden zijn, niet
   door losse doorschijnende vlakken met ruimte ertussen"*.

   DE DONKERE LAAG ACHTER HET VENSTER BLIJFT (`::backdrop`, 45% donker): die hoort bij een venster.
   Daar is niets aan veranderd.

   WAT NIET: geen kleur, maat, letter, plek of volgorde van welk onderdeel dan ook; geen knop; geen
   etiket; geen ronding van een knop of etiket; niets aan de losse kaarten op het hoofdscherm; niets
   aan het menu; niets aan de gesprekkenlijst; de andere twee uitvoeringen ("Huidig" en
   "Nieuw") hebben deze regels nooit gehad en blijven zoals ze zijn.
   ================================================================================================ */

html[data-skin="professioneel"] .prune__card,
html[data-skin="professioneel"] .cal__card,
html[data-skin="professioneel"] .fm__card,
html[data-skin="professioneel"] .td__card,
html[data-skin="professioneel"] .set__card,
html[data-skin="professioneel"] .team__card,
html[data-skin="professioneel"] .blokdlg__card,
html[data-skin="professioneel"] .kp__card,
html[data-skin="professioneel"] .vt__card {
  background: var(--surface);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

/* De onderdelen in het venster: geen eigen vlak, hoek of schaduw meer. De marge en de maat blijven
   zoals ze in [4] staan (12 px 14 px, en 8 px 12 px voor de kop, de knoppenrij en de losse regels) —
   er verschuift dus niets. */
html[data-skin="professioneel"] .prune__card > *,
html[data-skin="professioneel"] .cal__card > *,
html[data-skin="professioneel"] .fm__card > *,
html[data-skin="professioneel"] .td__card > *,
html[data-skin="professioneel"] .set__card > *,
html[data-skin="professioneel"] .team__card > *,
html[data-skin="professioneel"] .blokdlg__card > *,
html[data-skin="professioneel"] .kp__card > *,
html[data-skin="professioneel"] .vt__card > * {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Tussen twee onderdelen één dun scheidingslijntje. Geschilderd aan de binnenkant van het tweede
   onderdeel, zodat er geen enkele maat of plek verschuift (een rand zou 1 px per onderdeel toevoegen). */
html[data-skin="professioneel"] .prune__card > * + *,
html[data-skin="professioneel"] .cal__card > * + *,
html[data-skin="professioneel"] .fm__card > * + *,
html[data-skin="professioneel"] .td__card > * + *,
html[data-skin="professioneel"] .set__card > * + *,
html[data-skin="professioneel"] .team__card > * + *,
html[data-skin="professioneel"] .blokdlg__card > * + *,
html[data-skin="professioneel"] .kp__card > * + *,
html[data-skin="professioneel"] .vt__card > * + * {
  box-shadow: inset 0 1px 0 var(--line);
}