/* 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). */

: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); }

/* Geen treffer bij het zoeken: zeg dat, in plaats van een lege lijst. */
/* 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); }

/* Stap 1 (01-10-2026, 1.6.9) had hier het kaartje "Klaar van je team": het resultaat van een klus
   kreeg een eigen kader met een kleine kop en de klus eronder. Dat is er op 01-10-2026 in 1.6.11
   uit: de eigenaar wil het zoals de teamleider zelf bericht — een gewone regel in het gesprek
   (.msg--assistant dus). Er blijft hier niets van over. */

/* 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;
}

/* invoerveld */

.composer {
  padding: 0 20px calc(18px + env(safe-area-inset-bottom));
}

.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); }

/* Hier stond tot 01-10-2026 de opmaak van de tweede bestandenknop in de invoerbalk
   (`.send--bestand`, sinds 22-09-2026). Die knop is weg — de eigenaar vond twee knoppen voor
   hetzelfde venster dubbelop. De knop in de balk is nu de enige ingang. */

/* 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)); }
  .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); }

.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; }

/* 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; }

/* ------------------------------------------------- vensters binnen het scherm */
/* 29-09-2026: op een half scherm (of een telefoon) verdween de bovenkant van het
   documentenvenster. Het venster werd hoger dan het scherm en viel aan de bovenkant buiten
   beeld, terwijl er niet naar boven te scrollen viel — het kruisje en de titel waren dan
   onbereikbaar. Elk venster blijft nu binnen het scherm en scrolt zelf, zodat de bovenkant
   altijd te bereiken is. `100dvh` klopt ook op een telefoon met een adresbalk die in- en
   uitklapt; `100vh` staat ervoor als terugval voor een oudere browser. */
/* ------------------------------------------------- team (29-09-2026) */
/* 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; }
}

/* ------------------------------------------------- plaatjes van de assistent */
/* 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); }
}

/* ---------------------------------------------------------------- koppelen (29-09-2026) */
/* 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); }
}

/* ------------------------------------------------- vaste taken (01-10-2026, 1.6.7) */
/* 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 klussen 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 klus 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; }
/* BLOK-EINDE */

/* 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; }

/* TELLERS-BALK-EINDE */

/* 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; }

/* VERBRUIK-MELDING-EINDE */