/* NEVARO — huisstijl van de klant-voorkant.
 * Alles wat met kleur en vorm te maken heeft staat hier bovenaan als variabele,
 * zodat de huisstijl per klant aan te passen is zonder de rest aan te raken.
 * Geen externe lettertypes of scripts: alles komt van de eigen server (privacy).
 * De lettertypes van de website van de klant (mssas.nl) staan sinds 18-09-2026
 * lokaal in static/fonts — één keer opgehaald, daarna vraagt de pagina ze bij de
 * eigen server. Kiezen kan met het paneel Vormgeving (--font en --font-kop). */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/opensans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/playfair-400.woff2") format("woff2");
}

:root {
  --accent: #1F6F5C;
  --waarschuw: #B4232A;
  --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;
  --font-kop: var(--font);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* De bovenbalk in de accentkleur, zoals de navigatiebalk van de website */
html[data-balk="accent"] .topbar {
  background: var(--accent);
  border-bottom-color: transparent;
}

html[data-balk="accent"] .topbar .topbtn,
html[data-balk="accent"] .topbar__title { color: #fff; }

html[data-balk="accent"] .topbar .topbtn:hover { background: rgba(255, 255, 255, .16); }

html[data-balk="accent"] .topbar .topbtn svg { stroke: #fff; }

html[data-balk="accent"] .topbar .topbtn__sun circle,
html[data-balk="accent"] .topbar .topbtn__sun path { stroke: #fff; }

html[data-theme="dark"] {
  --bg: #0F1113;
  --waarschuw: #FF8A8A;
  --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);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  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-family: var(--font-kop);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

.wordmark__tag {
  font-size: .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: .7rem; }
.wordmark--xl .wordmark__name { font-size: 2.1rem; letter-spacing: .3em; }
.wordmark--xl .wordmark__tag { font-size: .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: .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: .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;
  /* Op een laag venster (of een lange gesprekkenlijst plus het tijdblok) past de
     zijkolom niet in één keer. Zonder deze regel valt de onderkant buiten beeld
     en is er niets te scrollen — html/body hebben overflow:hidden. Nu schuift de
     kolom zelf, zodat Uitloggen en Koppelingen altijd bereikbaar blijven. */
  overflow-y: auto;
}

.side__top { padding: 0 6px; }

/* klok, datum en weer (linksboven, boven "Nieuwe chat") */

.side__weer {
  padding: 10px 12px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.side__weer:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.weerblok__boven { display: flex; align-items: baseline; gap: 2px; }

.weerblok__tijd {
  font-family: var(--font-kop);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.weerblok__seconden {
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.weerblok__datum {
  margin-top: -2px;
  font-size: .8rem;
  color: var(--ink-soft);
  text-transform: lowercase;
}

.weerblok__weer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-soft);
}

.weerblok__beeld { flex: none; width: 22px; height: 22px; color: var(--accent); }

.weerblok__beeld svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weerblok__tekst b { color: var(--ink); font-size: .95rem; }

.weerblok__minmax { color: var(--ink-faint); font-size: .78rem; }

.weerblok__plaats { color: var(--ink-faint); font-size: .78rem; }

/* tijdregistratie — het urenlogboek van de klant, tussen het weerblok en
   "Nieuwe chat". Compact gehouden: de zijkolom is smal en op een telefoon
   mag dit blok de gesprekkenlijst niet wegdrukken. Alles in de huisstijl-
   variabelen, zodat kleur, lettertype en hoeken uit het vormgevingspaneel
   meelopen (ook in licht en donker). */

.side__tijd {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* display:flex hierboven zou het hidden-attribuut van dit blok overschrijven
   (een oude server zonder tijdregistratie stuurt geen gegevens, dan hoort het
   blok weg te blijven). */
.side__tijd[hidden] { display: none; }

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

.tijdblok__titel {
  font-family: var(--font-kop);
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tijdblok__tel {
  font-size: .75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

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

.tijdblok__klok {
  font-family: var(--font-kop);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.tijdblok__klok.is-loopt { color: var(--accent); }

.tijdblok__knoppen { display: flex; flex: none; gap: 6px; }

.tijdblok__knop { padding: 5px 10px; font-size: .8rem; border-radius: 10px; }

.tijdblok__loop {
  margin: 0;
  font-size: .73rem;
  line-height: 1.35;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* De twee velden hebben geen label boven zich: de plaatshouder zegt het al en
   elke regel die niet nodig is maakt de zijkolom onnodig hoog. Het label blijft
   wel in de html staan voor wie het scherm met een voorlezer gebruikt. */
.tijdblok__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tijdblok__in {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
}

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

.tijdblok__in:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.tijdblok__hand { display: flex; align-items: center; gap: 6px; }

.tijdblok__in--min { flex: 1 1 auto; }

.tijdblok__fout { margin: 0; font-size: .73rem; color: #c0392b; }

.tijdblok__vandaag {
  margin: 0;
  font-size: .73rem;
  line-height: 1.35;
  color: var(--ink-faint);
  /* Nooit meer dan twee regels: een lange lijst opdrachtgevers mag het blok niet
     laten groeien (de zijkolom is smal en moet op zijn plek blijven). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.tijdblok__vandaag b { color: var(--ink); font-weight: 600; }

.tijdblok__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 88px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tijdregel { display: flex; align-items: baseline; gap: 6px; }

.tijdregel__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tijdregel__kop {
  font-size: .78rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tijdregel__meta {
  font-size: .7rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tijdregel__min {
  flex: none;
  font-size: .74rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

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

.tijdregel__weg:hover { color: #c0392b; }

.tijdblok__leeg { font-size: .73rem; color: var(--ink-faint); }


/* "Installeer als app": staat bij de andere voetlinks in de zijkolom */

.linkbtn--installeer { color: var(--accent); }

.side__note--installeer {
  margin-bottom: 6px;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* Documentatie: lijst met echte links naar weekrapporten en beelden */

.doc__lijst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  margin: 4px 0 14px;
  overflow-y: auto;
}

.doc__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.doc__item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.doc__naam {
  font-size: .86rem;
  color: var(--ink);
  word-break: break-word;
}

.doc__meta { font-size: .74rem; color: var(--ink-faint); }

/* De kop boven een map in het documentatiepaneel. Kleine, stille regel met het
   aantal documenten erachter, zodat je in één oogopslag ziet hoe de map is
   ingedeeld. */
.doc__map {
  margin: 10px 0 2px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  text-transform: none;
}

.doc__map:first-child { margin-top: 0; }

/* Elk document op een eigen regel, met de verwijderknop ernaast. De link zelf
   blijft de hele kaart; het kruisje staat er los naast zodat een klik op het
   document nooit per ongeluk iets weghaalt. */
.doc__rij {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.doc__rij .doc__item { flex: 1 1 auto; min-width: 0; }

.doc__weg {
  flex: 0 0 auto;
  padding: 0 10px;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.doc__weg:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.doc__weg:disabled { opacity: .45; cursor: default; }

/* Vormgeving: het paneel waarin de klant zelf het scherm instelt */

.vorm__card {
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
}

.vorm__rij {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.vorm__label {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.vorm__kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.vorm__kleur {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.vorm__kleur.is-aan { border-color: var(--ink); }

.vorm__kleur--vrij {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.vorm__keuze { display: flex; flex-wrap: wrap; gap: 6px; }

.vorm__keuze button {
  padding: 6px 11px;
  font: inherit;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.vorm__keuze button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.vorm__keuze button.is-aan {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.vorm__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.vorm__klein { padding: 6px 10px; font-size: .8rem; }

.vorm__hint { font-size: .74rem; color: var(--ink-faint); }

.vorm__in {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.vorm__in--area {
  min-height: 66px;
  resize: vertical;
  line-height: 1.45;
}

.vorm__in:focus {
  outline: none;
  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);
}

.vorm__vinkjes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .85rem;
  color: var(--ink-soft);
}

.vorm__vinkjes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Een eigen merkteken is een beeld in plaats van het getekende schild */
.mark--img { object-fit: contain; border-radius: 8px; }

.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: 96px;         /* nooit in elkaar gedrukt: de gesprekken blijven zichtbaar */
  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: .7rem;
  color: var(--ink-faint);
  flex: none;
}

/* Etiket bij gesprekken uit een ander kanaal (WhatsApp, Main Chat, 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: .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; }

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

/* Main Chat en WhatsApp staan 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: .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: .78rem;
  color: var(--accent);
}

/* hoofdkolom */

.main {
  display: grid;
  /* Kop, gesprek (het enige deel dat meeschuift), invulveld, blokgroep. Het
     invulveld staat sinds 22-09-2026 direct onder het gesprek, met de drie
     blokken in de middenzone daaronder. */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  /* Ook de breedte mag krimpen tot het venster: zonder deze regel houdt de kop van
     het scherm (een lange gesprekstitel in de titelbalk) de hele kolom op zijn
     min-content breedte. Op een telefoon van 396 px werd het scherm daardoor 715 px
     breed en viel de rechterkant buiten beeld — ook in de versie van vóór deze
     wijziging (nagemeten op 9130). De titel kapt nu netjes af met een beletselteken. */
  min-width: 0;
  height: 100%;
}

/* De vier delen van de hoofdkolom mogen allemaal smaller worden dan hun inhoud.
   Zonder deze regel houdt de titelbalk met een lange gesprekstitel de rasterkolom
   op zijn min-content breedte (gemeten: 648 px) terwijl het venster 396 px is; dan
   schuiven het gesprek, het invulveld en de blokgroep voorbij de rechterkant. */
.main > * { min-width: 0; }

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

.topbar__title {
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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 {
  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 pictogram laat zien waar je naartoe gaat, niet waar je bent:
   in het licht staat de maan (klik = donker), in het donker de zon. */
html[data-theme="light"] .topbtn__sun { display: none; }
html[data-theme="dark"] .topbtn__moon { display: none; }

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

.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);
  max-width: 46ch;
  white-space: pre-line;
}

.msgs {
  /* De volle breedte van het middengebied (opdracht 22-09-2026): de limiet van
     760 px met centrering liet op een breed scherm honderden pixels leeg. De
     leesbaarheid van de regel tekst zit nu in .msg__body verderop (maximaal ±72
     tekens per regel); een codeblok en een tabel mogen de volle breedte gebruiken. */
  max-width: none;
  margin: 0;
  padding: 28px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.msg--user {
  align-self: flex-end;
  /* Een eigen bericht mag breed staan, maar de regel tekst erin blijft even
     leesbaar als die in een antwoord: nooit breder dan ±72 tekens. */
  max-width: min(80%, 72ch);
  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); }

/* Het gezicht van de assistent naast het antwoord. Alleen als er een foto is:
   zonder foto blijft het bericht precies zoals het was. */
.msg--assistant.has-avatar {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: start;
}

.msg__avatar {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}

.msg__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.welcome__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

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

/* Leesbaarheid binnen een bericht (opdracht 22-09-2026): het bericht loopt van balk
   tot balk, maar de REGEL TEKST wordt niet breder dan ±72 tekens (72ch) — anders
   worden zinnen te lang om te lezen. Een codeblok en een tabel mogen wél de volle
   breedte gebruiken: daar hoort een brede regel bij. Geldt voor het antwoord
   (.msg--assistant) en voor de losse tekstregel in een bericht met beelden. */
.msg__body > p,
.msg__body > ul,
.msg__body > ol,
.msg__body > blockquote,
.msg__body > h1,
.msg__body > h2,
.msg__body > h3,
.msg__body > .msg__tekst {
  max-width: 72ch;
}

/* De uitzonderingen staan er bewust bij: zonder deze regel zou een latere
   `max-width: 72ch` ook een codeblok of tabel raken. */
.msg__body > pre,
.msg__body > table,
.msg__body > .msg__beelden,
.msg__body > hr {
  max-width: none;
}

/* Een downloadknop in het gesprek: een regel als "BESTAND: Klanten/A3bc/rapport.pdf"
   wordt een echte knop naar dat document in de documentatiemap. De namen doc__*
   bestaan al in het documentatiepaneel, daarom staat alles hier onder .msg__body
   (het tekstblok van een bericht), zodat dat paneel niet verschuift. Kleur en vorm
   komen uit de huisstijlvariabelen, dus licht en donker doen allebei mee. */
.msg__body p.doc__rij { margin: 0 0 .85em; }

.msg__body .doc__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  max-width: 100%;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background .15s, color .15s, border-color .15s;
}

.msg__body .doc__knop:hover {
  color: var(--accent);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.msg__body .doc__knop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.msg__body .doc__icoon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--accent);
}

.msg__body .doc__knop .doc__naam {
  min-width: 0;
  font-size: .9rem;
  color: inherit;
  overflow-wrap: anywhere;
}

.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 {
  /* Staat tussen het gesprek en de blokgroep. De veilige strook onderaan hoort nu
     bij de groep eronder, niet meer bij dit veld. */
  padding: 6px 20px 0;
}

.composer__box {
  /* Van balk tot balk, net als het gesprek en de blokgroep eronder (opdracht
     22-09-2026). De padding van .composer houdt hem van de balken af. */
  max-width: none;
  margin: 0;
  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; }

.send--stop { background: var(--surface-2); border: 1px solid var(--line); }
.send--stop svg { fill: var(--ink-soft); width: 16px; height: 16px; }
.send--stop:hover { background: var(--line); }

.composer__status {
  max-width: none;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .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: .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: 4px 12px 0; }
  .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 { width: 10px; }
.thread::-webkit-scrollbar-thumb, .side__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;
  /* Zonder deze twee regels viel de onderkant van een lang venster buiten het
     scherm en was er niets te scrollen: de klant kon er dan niet bij. Geldt voor
     alle pop-ups, dus staat het hier en niet per venster. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  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 {
  font-family: var(--font-kop); 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; align-items: center; gap: 10px; }

/* ------------------------------------------------- detail per afspraak of taak
   Het blok naast het gesprek is smal: daar passen de titel en de datum, niet de
   toelichting. Een klik op de regel opent daarvoor dit venster. De regel krijgt een
   aanwijsbare cursor, zodat te zien is dat er iets achter zit. */

.rij--klikbaar { cursor: pointer; }

.rij--klikbaar:hover .rij__tekst {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

.prune.detail .prune__card {
  width: min(460px, calc(100vw - 32px));
  /* Het venster van een taak kan lang worden (gesprek erin): de kaart zelf
     scrollt, zodat de titel bovenaan in beeld blijft en het op een telefoon
     niet buiten het scherm loopt. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.prune__detail-meta {
  margin: 0;
  font-size: .82rem;
  color: var(--ink-soft);
}

.prune__detail-note {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.prune__detail-note[hidden] { display: none; }

/* ------------------------------------- antwoord per taak in het detailvenster
   Onderin het venster van een taak zit een eigen invoerveld: de klant typt zijn
   antwoord daar in plaats van in het grote gesprek, en het antwoord van de
   assistent komt daar terug. Alles wat kleur en vorm betreft komt uit dezelfde
   variabelen als de rest, dus de huisstijl werkt hier automatisch in mee. */

.taakvraag {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.taakvraag[hidden] { display: none; }

.taakvraag__kop {
  margin: 0;
  font-family: var(--font-kop);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.taakvraag__log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 34vh;
  overflow-y: auto;
  padding-right: 2px;
}

.taakvraag__log[hidden] { display: none; }

.taakvraag__bericht {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.5;
}

.taakvraag__bericht--klant { background: var(--surface-2); }

.taakvraag__bericht--ciri {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.taakvraag__wie {
  display: block;
  margin-bottom: 2px;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.taakvraag__tekst > :first-child { margin-top: 0; }
.taakvraag__tekst > :last-child { margin-bottom: 0; }
.taakvraag__tekst p { margin: 0 0 .5em; }
.taakvraag__tekst ul, .taakvraag__tekst ol { margin: 0 0 .5em; padding-left: 1.2em; }

.taakvraag__in {
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  font: inherit;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}

.taakvraag__in:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

.taakvraag__status {
  font-size: .82rem;
  color: var(--ink-soft);
}

.taakvraag__uitslag {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.45;
}

.taakvraag__uitslag[hidden] { display: none; }

.taakvraag__uitslag--goed {
  background: color-mix(in srgb, #2E9E5B 18%, var(--surface));
  border: 1px solid color-mix(in srgb, #2E9E5B 45%, transparent);
}

.taakvraag__uitslag--open {
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.koppel__kop {
  margin: 0;
  font-family: var(--font-kop);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.koppel__vak {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------ pipeline-review (maandagochtend)
   De kaart in de zijkolom toont alleen wat er te laat is. Wat rood omrand is vraagt
   echt actie; is er niets te laat, dan staat er één rustige regel in plaats van een
   lege lijst — een leeg vak leest als een fout. */

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.pipeline__rij {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, #C0392B 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pipeline__goed {
  border-left-color: var(--line);
  color: var(--ink-faint);
}

/* Klikbaar: een klik opent de kans in Odoo in een nieuw tabblad. */
.pipeline__link {
  color: inherit;
  text-decoration: none;
}

.pipeline__link:hover,
.pipeline__link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.pipeline__pijl {
  color: var(--accent);
  font-size: .8em;
}

.pipelinevenster__items {
  min-height: 42px;
}

.pipelinevenster__groep {
  margin: 12px 0 4px;
  font-family: var(--font-kop);
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pipelinevenster__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

/* In het grote venster mag een regel volledig te zien zijn, niet afgekapt. */
.pipelinevenster__lijst .pipeline__rij {
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
  font-size: .86rem;
}

.pipelinevenster__details {
  margin-top: 12px;
}

.pipelinevenster__details summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-soft);
}

.pipeline__leeg {
  font-size: .82rem;
  color: var(--ink-faint);
}

.pipelinevenster .prune__card {
  width: min(780px, calc(100vw - 16px));
}

.pipelinevenster__tekst {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ------------------------------------------ vandaag bellen (het belplan van Iris)
   Per gesprek één regel: het bedrijf (of de contactpersoon) vooraan, daarachter kort
   de reden. De hele regel is het raakvlak en opent de kans in Odoo in een nieuw
   tabblad; het adres komt uit het belplan, nooit uit het scherm. Zonder adres blijft de
   regel platte tekst — een link naar de verkeerde kans is erger dan geen link. Het
   volledige verhaal (de activiteit en de voorbereiding van Atlas) staat in het grote
   venster, per gesprek uitklapbaar; in de smalle kolom alleen de kern. */

#blok-belplan[hidden] { display: none; }

.belplan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.belplan__rij {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* De pijl hoort vóór de tekst: deze regels worden na twee regels afgekapt en alles wat
   achteraan staat valt dan buiten het kader (zie de pipelinekansen). */
.belplan__pijl { color: var(--accent); font-size: .95em; margin-right: 3px; }

.belplan__link { color: inherit; text-decoration: none; }

.belplan__link:hover,
.belplan__link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.belplan__tekst { flex: 1 1 auto; min-width: 0; }

.belplan__leeg { font-size: .82rem; color: var(--ink-faint); }

/* Een lange lijst maakt het venster een kolom, geen raster: dan blijft de kop met de
   datum in beeld en scrollt alleen de gesprekkenlijst, in plaats van de hele kaart
   (waarmee ook de sluitknop onder de onderkant zou verdwijnen). */
.belplanvenster .prune__card {
  width: min(720px, calc(100vw - 16px));
  display: flex;
  flex-direction: column;
}

.belplanvenster__items { display: grid; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.belplanvenster__rij {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--bg);
}

.belplanvenster__kop { font-size: .9rem; color: var(--ink); }

.belplanvenster__kop .belplan__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.belplanvenster__meta { margin: 3px 0 0; font-size: .8rem; color: var(--ink-soft); }

.belplanvenster__details { margin-top: 7px; }

.belplanvenster__details summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); }

.belplanvenster__activiteit { margin: 7px 0 0; font-size: .82rem; color: var(--ink); }

/* De voorbereiding komt als tekst met regeleinden uit het belplan: die horen te blijven
   staan (white-space: pre-wrap), anders wordt het één lange regel. */
.belplanvenster__voorbereiding {
  margin: 5px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .belplan__rij { font-size: .86rem; line-height: 1.45; -webkit-line-clamp: 3; padding-top: 3px; padding-bottom: 3px; }
  .belplanvenster__rij { padding: 10px 12px; }
  .belplanvenster__kop .belplan__link { min-height: 44px; align-items: center; }
  .belplan__rij--knop .belplan__tekstvak { -webkit-line-clamp: 3; }
}

/* De afrondknop bij een regel uit "Vandaag bellen" --------------------------------
   Een regel mét activiteit_id is een raster: de tekst links, de knop "Afgerond" rechts
   en de melding (afgerond of mislukt) over de volle breedte eronder. Een regel zónder
   activiteit_id houdt de oude vorm (twee regels met afkapping) — daar staat geen knop en
   dus is er ook geen raster nodig. De knop staat naast de link naar Odoo en niet erin:
   de regel zelf blijft de kans openen. */

.belplan__rij--knop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tekst knop" "melding melding";
  align-items: start;
  gap: 4px 8px;
  overflow: visible;              /* het raster kapt niet af; het tekstvak doet dat */
}

.belplan__rij--knop .belplan__tekstvak {
  grid-area: tekst;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.belplan__knop {
  grid-area: knop;
  font: inherit;
  font-size: .75rem;
  line-height: 1.1;
  padding: 6px 9px;
  white-space: nowrap;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  cursor: pointer;
}

.belplan__knop:hover,
.belplan__knop:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.belplan__knop:disabled { opacity: .6; cursor: default; }

.belplan__knop[hidden] { display: none; }

/* "afgerond om 14:32": hetzelfde groen als "klaar" in de teamstand, en de regel krijgt
   dezelfde rustige groene rand — geen vlag, geen vinkje, alleen te zien dat het gedaan is. */
.belplan__klaar {
  grid-area: melding;
  font-size: .75rem;
  color: #2E9E63;
}

.belplan__klaar[hidden] { display: none; }

.belplan__rij--klaar { border-left-color: #2E9E63; }

/* De stand uit het CRM is even niet op te halen: één rustige regel in de gewone grijstint
   (geen alarm — de knop hoort er dan juist te staan, zodat Maikel kan blijven werken). */
.belplan__onbekend {
  grid-area: melding;
  font-size: .75rem;
  color: var(--ink-faint);
}

.belplan__onbekend[hidden] { display: none; }

/* De melding als het afronden mislukte: de foutkleur van dit scherm (.rail__fout), hier
   alleen op zijn plek in het raster gezet — geen tweede kleur erbij. */
.belplan__fout { grid-area: melding; }

.belplan__fout[hidden] { display: none; }

/* De bevestiging voor het afronden: dezelfde kaart als het opruimvenster, met de
   activiteit eronder. Een lange activiteitregel mag nooit buiten de kaart lopen. */
.belplanafronden__activiteit { overflow-wrap: anywhere; }

/* Koppelingen: het venster waarin de klant de postbus klaarzet. Een gewoon
   formulier; het wachtwoordveld is een echt wachtwoordveld en de waarde wordt na
   bewaren meteen leeggemaakt. */

.koppel__vorm {
  display: grid;
  gap: 6px;
}

/* display:grid hierboven overschrijft het hidden-attribuut: zonder deze regel blijft een
   formulier staan dat de voorkant verbergt (de terugval als een route nog 404 geeft), en
   dan staat er een knop die een fout geeft in plaats van één rustige regel. */
.koppel__vorm[hidden] { display: none; }

.koppel__label {
  font-family: var(--font-kop);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}

.koppel__in {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.koppel__in:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.koppel__melding {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.45;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.koppel__melding[hidden] { display: none; }

.koppel__melding--goed {
  background: color-mix(in srgb, #2E9E5B 18%, var(--surface));
  border: 1px solid color-mix(in srgb, #2E9E5B 45%, transparent);
}

.koppel__melding--fout {
  background: color-mix(in srgb, #C0392B 16%, var(--surface));
  border: 1px solid color-mix(in srgb, #C0392B 42%, transparent);
}

/* Twee rustige regels uitleg bij een koppelingsvak (het LinkedIn-inlogvak): klein en stil,
   want het is uitleg en geen waarschuwing. Kleur en lettergrootte komen uit de huisstijl,
   zodat het in licht en donker en bij elke gekozen vormgeving meekleurt. */
.koppel__hint {
  margin: 2px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* De tweede stap van het LinkedIn-inlogvak: het codeblok onder de knoppen. Het is er pas als
   LinkedIn werkelijk om een verificatiecode vraagt. De eigen display-regel is er met opzet:
   zonder `.koppel__codeblok[hidden] { display: none }` zou een eigen display-waarde het
   hidden-attribuut overschrijven en bleef er een leeg blok met een knop staan. */
.koppel__codeblok {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.koppel__codeblok[hidden] {
  display: none;
}

/* De code zelf: ruim voor de cijfers, met even brede tekens zodat je hem kunt natellen. */
.koppel__code {
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------- De browser van de server (het inlogvenster van LinkedIn)
   Een groot venster in kolomvorm, zoals het meekijkvenster: de kop blijft staan, het beeld
   scrollt in zijn eigen vak en de knoppen blijven onderaan bereikbaar. Het beeld is klikbaar
   — een klik in het beeld is een klik in de browser — dus de cursor is een kruisje. Het beeld
   mag nooit breder worden dan zijn vak en wordt nooit uitgerekt: de omrekening van de
   klikpositie naar de echte beeldmaat gebeurt in app.js met de getoonde maat, en die moet
   kloppen met wat er te zien is. */

.prune.browservenster .prune__card {
  width: min(1100px, calc(100vw - 16px));
  /* De kaart krijgt een VASTE hoogte. Dat is nodig én voor het beeld (zie hieronder) én omdat
     de kaart anders precies zo hoog wordt als zijn inhoud: zonder vaste hoogte heeft het
     beeldvak niets om in te groeien en blijft er een klein venster over. Past de inhoud niet,
     dan scrollt de kaart zelf — de knoppen en het tekstveld blijven dus bereikbaar. */
  height: min(92vh, 940px);
  height: min(92dvh, 940px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
}

.browservenster__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

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

.browservenster__noot {
  margin: 0;
  color: var(--ink-faint);
  font-size: .78rem;
  line-height: 1.5;
}

.browservenster__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Een eigen display-regel zou het hidden-attribuut overschrijven; zonder deze twee regels
   blijft de balk staan als er nog geen browser loopt en zijn het dode knoppen. */
.browservenster__balk[hidden] { display: none; }

.browservenster__meta {
  min-width: 0;
  color: var(--ink-faint);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- groter kijken: de maatbalk, het schermvullende venster en de zoomstand ------------------
   De reCAPTCHA-puzzel van LinkedIn vraagt om kleine vakjes (soms ±20 px) aan te wijzen. Het beeld
   is 1280x900 en wordt hier geschaald getoond, dus zonder deze twee standen is dat op een telefoon
   niet te doen. De klikomrekening in app.js rekent met de GETOONDE maat van het beeld, dus geen van
   deze standen verandert iets aan waar een klik aankomt. */

.browservenster__zoombalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Zonder deze regel zou `display: flex` het hidden-attribuut overschrijven en blijft er een balk
   met dode knoppen staan als er nog geen browser loopt. */
.browservenster__zoombalk[hidden] { display: none; }

/* Op een telefoon is een raakvlak van 40 px het minimum; deze knoppen zitten dicht bij elkaar. */
.browservenster__zoombalk .filter {
  min-height: 36px;
  padding: 4px 10px;
  font-size: .78rem;
}

.browservenster__zoomstand {
  min-width: 0;
  color: var(--ink-soft);
  font-size: .76rem;
  line-height: 1.3;
}

/* De zoomstand: het beeld is groter dan zijn vak en het vak schuift. Het beeld staat dan NIET
   absoluut (zoals in de passende stand) maar als gewoon blok linksboven in het vak — anders valt
   het gecentreerde beeld aan de boven- en linkerkant buiten het bereikbare deel en is het niet
   meer te verschuiven. De breedte van het beeld zet app.js in pixels (echte maat × zoom).

   TWEE klassen in de kiezer, en dat is geen luxe: de basisregel `.browservenster__beeldvak` staat
   lager in dit bestand en zet `overflow: hidden`. Met één klasse won die regel en kon Maikel het
   ingezoomde beeld met zijn vinger of met het muiswiel niet verschuiven — gemeten: de computed
   waarde was `hidden` en een echte veeg (Input.synthesizeScrollGesture, de weg die DevTools zelf
   gebruikt) verschoof 0 px. Met twee klassen wint deze regel altijd. */
.browservenster__beeldvak.browservenster__beeldvak--zoom {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.browservenster__beeldvak.browservenster__beeldvak--zoom .browservenster__beeld {
  position: static;
  inset: auto;
  margin: 0;
  max-width: none;
  max-height: none;
  cursor: grab;
  touch-action: pan-x pan-y;      /* aanraken schuift het vak zelf, zoals overal */
}

.browservenster__beeldvak--sleept .browservenster__beeld { cursor: grabbing; }

.browservenster__beeldvak {
  /* Dit vak groeit naar de ruimte die de kaart overlaat (de kaart heeft een vaste hoogte) en
     het beeld staat er ABSOLUUT in. Dat laatste is met opzet: een percentage-max-height op een
     gewoon flexkind werd hier niet tegen de hoogte van het vak gerekend — gemeten: het beeld
     bleef 721 px hoog in een vak van 302 px, dus er moest gescrold worden om het inlogveld te
     zien. Een absoluut geplaatst element rekent wél tegen de binnenmaat van dit vak, dus past
     het beeld altijd binnen het vak: de hele pagina in één keer in beeld. */
  flex: 1 1 auto;
  min-height: 160px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Het beeld staat ABSOLUUT in dit vak. Dat is met opzet: een percentage-max-height op een
     gewoon flexkind wordt hier niet tegen de hoogte van het vak gerekend (gemeten: het beeld
     bleef 721 px hoog in een vak van 302 px, dus er moest gescrold worden om het inlogveld te
     zien). Een absoluut geplaatst element rekent wél tegen de binnenmaat van dit vak, dus past
     het beeld altijd precies binnen het vak — de hele pagina in één keer in beeld, zonder
     scrollen. */
  position: relative;
}

.browservenster__beeld {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  width: auto;
  height: auto;
  display: block;
  cursor: crosshair;
  border-radius: calc(var(--radius) - 2px);
  user-select: none;
  -webkit-user-drag: none;
}

.browservenster__beeld[hidden] { display: none; }

.browservenster__leeg {
  margin: 12px 8px;
  color: var(--ink-faint);
  font-size: .82rem;
}

.browservenster__leeg[hidden] { display: none; }

.browservenster__typen { gap: 8px; }

.browservenster__typen[hidden] { display: none; }

.browservenster__typenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.browservenster__typenrij .koppel__in {
  flex: 1 1 220px;
  min-width: 0;
}

@media (max-width: 720px) {
  .prune.browservenster .prune__card {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
    padding: 12px 10px 8px;
  }
  /* Op een telefoon vult het venster het scherm; het tekstveld en de knoppen blijven eronder
     staan en het beeld krijgt wat er overblijft. */
  .prune.browservenster .prune__card {
    height: calc(100vh - 8px);
    height: calc(100dvh - 8px);
  }
  .browservenster__beeldvak { min-height: 140px; }
  /* Op een telefoon is een raakvlak van 40 px het minimum; het beeld is er klein, dus de
     knoppen eromheen moeten het werk doen. */
  .browservenster__balk .filter { min-height: 40px; }
  .browservenster__typenrij .btn { min-height: 44px; }
  .browservenster__uitleg { font-size: .78rem; }
  /* Op een telefoon zijn de zoomknoppen het belangrijkste bedieningselement van dit venster
     (het venster is daar al bijna schermvullend, dus zoom is wat de puzzel groot maakt). */
  .browservenster__zoombalk .filter { min-height: 40px; }
  .browservenster__zoomstand { flex: 1 1 100%; font-size: .72rem; line-height: 1.15; }
}

/* "Volledig scherm" betekent hier: zoveel mogelijk beeld. Op een pc vult het venster dan het hele
   scherm; op een telefoon vult het dat al, dus daar zit de winst in de uitlegregels. In beide
   gevallen gaan de uitlegregels in deze stand weg — dat is meetbaar veel beeld: op een pc van 61%
   naar 70% van de ware grootte (beeld 787 -> 899 px breed) en op een telefoon van 185 naar 360 px
   breed (14% -> 28%, beeldvak 140 -> 296 px hoog). De regel onder het beeld blijft staan: dat dit
   een browser op de server is en dat het wachtwoord nergens blijft. De maatbalk zegt dat de uitleg
   verborgen is en dat dezelfde knop ("Venster") hem terugzet. */
.prune.browservenster.browservenster--groot .browservenster__uitleg { display: none; }

@media (max-width: 720px) {
  /* Het venster heeft op een telefoon weinig hoogte; de tussenruimtes zijn er kleiner zodat het
     beeld zoveel mogelijk overhoudt. */
  .browservenster__card { gap: 6px; }
}

/* ---- het schermvullende venster ---------------------------------------------------------------
   "Volledig scherm" in de maatbalk: het venster vult dan het hele scherm, zodat het beeld op een
   pc zo groot mogelijk staat (op 1280 breed scherm zelfs 1 op 1: één beeldpixel per schermpixel).
   Bewust GEEN requestFullscreen(): dat gedraagt zich op Android anders dan op Windows en zou de
   knoppen en het tekstveld kunnen wegvallen. Drie klassen in de kiezer, zodat deze regel ook de
   telefoonregel hierboven overschrijft — ongeacht de volgorde in dit bestand. */
.prune.browservenster.browservenster--groot .prune__card {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 10px 12px 8px;
  border-radius: 0;
}

/* ------------------------------------------- het grote takenvenster (pop-up)
   De kop Taken in de zijkolom opent dit venster: alle taken bij elkaar met
   filters. Op een telefoon vult het bijna het hele scherm, op een pc is het een
   groot venster. De lijst zelf scrollt en de knoppen blijven staan. */

.prune.takenvenster .prune__card {
  width: min(820px, calc(100vw - 16px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  /* Kolom in plaats van het raster van de gewone pop-ups. Waarom: als raster rekte
     de lijst het venster op tot de onderkant buiten het scherm viel, en dan waren de
     filters en de sluitknop niet meer te bereiken en viel er niets te scrollen. Nu
     neemt de lijst precies de ruimte die overblijft en scrolt hij zelf; de kop, de
     filters en de knoppen blijven staan. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.takenvenster__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.filter {
  padding: 5px 12px;
  font: inherit;
  font-size: .82rem;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

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

.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.filter--aan {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.takenvenster__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;      /* de lijst krijgt de ruimte die overblijft en scrolt zelf */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.takenvenster__lijst .rij { align-items: center; }

.takenvenster__lijst input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}

.rij__meta--noot {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ het postvak in
   De postbus in het scherm: een regel in de zijkolom per bericht, en een groot
   venster met de hele lijst en de tekst van een bericht. Alleen lezen. */

.rij__stip {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* Het venster is een KOLOM in plaats van het raster van de gewone pop-ups: de postbussen
   nemen de ruimte die overblijft en elke lijst scrolt zelf. Zonder die kolom rekt een
   lange lijst het venster op en vallen de knoppen buiten het scherm. Op een breed scherm
   staan de postbussen naast elkaar (elk met een eigen scrollgebied), op een telefoon zijn
   de koppen tabbladen en zie je er één tegelijk. */
.prune.postvakvenster .prune__card {
  width: min(1040px, calc(100vw - 16px));
  height: min(92vh, 1000px);
  height: min(92dvh, 1000px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
  overflow: hidden;
}

.prune.postvakvenster .takenvenster__kop,
.prune.postvakvenster .takenvenster__filters,
.prune.postvakvenster .prune__actions {
  flex: 0 0 auto;
}

.postvakvenster__vakken {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Nodig omdat het vak zelf `display: flex` heeft: zonder deze regel blijft een verborgen
   vak staan (het `hidden`-attribuut verliest het van `display`). */
.postvakvenster__vakken[hidden] { display: none; }

.postvakvenster__vak {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

/* De kop van een postbus: het tabblad op een telefoon, de kolomkop op een pc. Ruim
   genoeg om met een duim te raken. */
.postvakvenster__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.postvakvenster__tab:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.postvakvenster__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.postvakvenster__tabnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.postvakvenster__vaklijst {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 6px;
  padding: 8px 8px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.postvakvenster__noot {
  align-self: center;
  font-size: .78rem;
  color: var(--ink-faint);
}

/* De eerlijke regel boven een postbus die uit Odoo komt (Lodosolutions): klein,
   cursief, en met wat lucht boven de lijst. */
.postvakvenster__odoo-noot {
  font-style: italic;
  margin: 0 0 6px;
}

/* De teller per postbus in de zijkolom: klein en stil. */
.postvakvenster__tellers {
  margin: 0;
  padding: 0 2px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.postvakvenster__tellers[hidden] { display: none; }

.postvakvenster__ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postvakvenster__bericht {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.postvakvenster__bericht[hidden] { display: none; }

.postvakvenster__onderwerp {
  margin: 0 0 6px;
  font-family: var(--font-kop);
  font-size: 1.02rem;
  line-height: 1.35;
}

.postvakvenster__tekst {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Op een telefoon (ook op 396 px): de postbussen als tabbladen onder elkaar, alleen de
   gekozen lijst zichtbaar, en het venster zo hoog als het scherm toelaat zodat er echt
   in de lijst te scrollen valt. */
@media (max-width: 720px) {
  .prune.postvakvenster .prune__card {
    width: calc(100vw - 10px);
    height: calc(100dvh - 10px);
    padding: 14px 12px 10px;
  }

  .postvakvenster__vakken { flex-direction: column; gap: 8px; }
  .postvakvenster__vak { flex: 1 1 auto; }
  .postvakvenster__vak:not(.postvakvenster__vak--actief) { flex: 0 0 auto; }
  .postvakvenster__vak:not(.postvakvenster__vak--actief) .postvakvenster__vaklijst { display: none; }
  .postvakvenster__tab { min-height: 44px; }
  .postvakvenster__vak--actief .postvakvenster__tab {
    color: var(--ink);
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: inset 0 -2px 0 var(--accent);
  }
}

/* De kop van het takenblok in de zijkolom is een knop: het moet er precies zo
   uitzien als de andere koppen, met een aanwijshare cursor. */
.rail__kop--knop {
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.rail__kop--knop:hover .rail__title { color: var(--accent); }

.rail__kop--knop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------- agenda & taken (widgets)
   Twee widgets naast het gesprek. Op een breed scherm staan ze er altijd, op
   een smal scherm schuift het paneel over het gesprek heen. Kleuren en randen
   komen uit dezelfde variabelen als de rest, dus de huisstijl van de klant
   werkt hier automatisch in mee. */

.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px 26px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1280px) {
  .app { grid-template-columns: 272px 1fr 344px; }
}

.rail__blok { display: flex; flex-direction: column; gap: 10px; }

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

.rail__title {
  font-family: var(--font-kop);
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rail__maand { display: flex; align-items: center; gap: 5px; }

.rail__maandnaam { font-size: .78rem; color: var(--ink-soft); min-width: 8.4em; text-align: center; }

.rail__pijl {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.rail__pijl:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.rail__tel { font-size: .76rem; color: var(--ink-faint); }

/* team (avatars) */

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.teamlid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 2px 5px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

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

.teamlid.is-gekozen {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.teamlid__avatar { position: relative; width: 44px; height: 44px; }

.teamlid__avatar svg { display: block; width: 100%; height: 100%; }

.teamlid__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

.teamlid__stip {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink-faint);
}

.teamlid__stip--live { background: #2E9E63; }
.teamlid__stip--beschikbaar { background: var(--accent); }
.teamlid__stip--wacht { background: var(--ink-faint); }

.teamlid__naam { font-size: .76rem; line-height: 1.1; text-align: center; }

.teamlid__rol {
  font-size: .65rem;
  line-height: 1.15;
  color: var(--ink-faint);
  text-align: center;
  word-break: break-word;
}

.team__detail {
  margin: 0;
  padding: 8px 9px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.team__detail b { color: var(--ink); font-weight: 600; }

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

/* ---------------------------------------------------------- organogram (team)
   Sinds 22-09-2026 is het team een organogram: MSSAS bovenaan, daaronder de drie
   pijlers (CFO/COO/CTO) en per pijler de leden van die afdeling. Alles via de
   variabelen, zodat de huisstijlkeuze van Maikel er automatisch in meewerkt.
   Compact gehouden voor de rail, ook op een telefoonformaat; langere namen mogen
   niet uitpuilen (word-break), dus de tekstkolom mag krimpen. */

.team.team--boom { display: block; }        /* de boom is een kolom, geen raster */

.teamboom { display: flex; flex-direction: column; gap: 8px; }

.teamboom__top {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}

.teamboom__topnaam {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.teamboom__tophouder { font-size: .7rem; color: var(--ink-soft); overflow-wrap: anywhere; }

.teamboom__pijler { position: relative; padding-left: 12px; }

/* De lijn links is de tak waar de leden van de afdeling aan hangen. */
.teamboom__pijler::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 7px;
  width: 1px;
  background: var(--line);
}

.teamboom__tak { display: flex; flex-direction: column; gap: 4px; }

.teamboom__titel {
  font-size: .64rem;
  line-height: 1.15;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

.teamboom__leeg {
  margin: 0;
  padding: 1px 0 1px 2px;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

/* Naam en titel naast de avatar: een kolom die mag krimpen, nooit uitpuilen. */
.teamlid__tekst {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

/* Het C-lid: avatar 38 px, horizontaal naast de naam. */
.team .teamlid--pijler {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
}

.team .teamlid--pijler .teamlid__avatar { width: 38px; height: 38px; }
.team .teamlid--pijler .teamlid__stip { width: 10px; height: 10px; }
.team .teamlid--pijler .teamlid__naam { font-size: .76rem; text-align: left; }

/* Een afdelingslid: kleinere avatar (30 px) in een rij. */
.team .teamlid--lid {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
}

.team .teamlid--lid .teamlid__avatar { width: 30px; height: 30px; }
.team .teamlid--lid .teamlid__stip { width: 9px; height: 9px; border-width: 2px; }
.team .teamlid--lid .teamlid__naam { font-size: .74rem; text-align: left; }
.team .teamlid--lid .teamlid__rol { font-size: .66rem; text-align: left; }

.team .teamlid--pijler .teamlid__naam,
.team .teamlid--pijler .teamboom__titel,
.team .teamlid--lid .teamlid__naam,
.team .teamlid--lid .teamlid__rol { overflow-wrap: anywhere; word-break: break-word; }

/* afbeeldingen meesturen (paperclip, plakken, slepen) */

.attach {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-faint);
  cursor: pointer;
}

.attach:hover { color: var(--accent); background: var(--surface-2); }

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

.composer__chips {
  max-width: none;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.chip img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.chip__badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 9px;
}

.chip__naam {
  font-size: .74rem;
  color: var(--ink-soft);
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.chip__weg:hover { color: #c0392b; }

.composer__melding {
  max-width: none;
  margin: 6px 0 0;
  font-size: .76rem;
  color: #c0392b;
}

.composer.is-sleep .composer__box {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.msg__beelden {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.msg__beelden img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  cursor: zoom-in;
}

.msg__tekst { white-space: pre-wrap; }

/* stem: aan/uit-knoppen en de opname-indicator */

.topbtn.is-aan,
.attach.is-aan {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.attach.is-aan {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* kalender */

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

.cal__kop {
  font-size: .68rem;
  text-align: center;
  color: var(--ink-faint);
  padding-bottom: 2px;
}

.cal__dag {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: .8rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.cal__dag:hover { background: var(--surface-2); }
.cal__dag--leeg { visibility: hidden; }

.cal__dag.is-vandaag { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.cal__dag.is-gekozen { background: var(--accent); border-color: var(--accent); color: #fff; }

.cal__stip {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.cal__stip i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.cal__dag.is-gekozen .cal__stip i { background: #fff; }

/* lijsten */

.cal__detail, .agenda, .taken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal__detail { font-size: .8rem; }

.cal__detail-kop { font-size: .74rem; color: var(--ink-faint); text-transform: lowercase; }

.rij {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rij__tijd {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
  min-width: 40px;
  padding-top: 1px;
}

.rij__tekst { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.35; word-break: break-word; }

.rij__meta { display: block; font-size: .72rem; color: var(--ink-faint); }

.rij__meta--laat { color: #c0392b; }

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

.rij__weg:hover { color: #c0392b; }

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

.taken .rij { align-items: center; }

.taken input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}

.rail__leeg { font-size: .8rem; color: var(--ink-faint); padding: 2px 2px; }

/* toevoegen */

.rail__vorm { display: flex; gap: 6px; align-items: center; }

.rail__in {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .82rem;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
}

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

.rail__in--tijd { flex: 0 0 116px; font-size: .72rem; padding: 7px 5px; }

.rail__knop { padding: 6px 11px; font-size: 1rem; line-height: 1; }

.rail__fout { margin: 0; font-size: .76rem; color: #c0392b; }

.rail__noot { margin: 0; font-size: .7rem; line-height: 1.45; color: var(--ink-faint); }

/* smal scherm: het paneel schuift over het gesprek heen */

.topbtn--widgets { display: none; }

@media (max-width: 1279px) {
  .rail {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: min(92vw, 360px);
    transform: translateX(103%);
    transition: transform .24s ease;
    box-shadow: var(--shadow);
  }

  .app--rail .rail { transform: none; }

  .topbtn--widgets { display: flex; }
}

/* Labels bij een taak: kleine etiketten onder de titel in het takenmenu en in
   het takenscherm. Bewust stil en klein — ze zijn een hulpmiddel om te ordenen,
   niet iets dat om aandacht vraagt. */
.taaklabel {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
}

.taaklabel__chip {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: transparent;
  white-space: nowrap;
}

.taaklabels {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.taaklabels__kop {
  margin: 0 0 6px;
  font-size: .82rem;
  color: var(--ink-soft);
}

.taaklabels__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
  margin-bottom: 8px;
}

.taaklabels__leeg {
  font-size: .82rem;
  color: var(--ink-faint);
}

.taaklabels__vorm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.taaklabels__in {
  flex: 1 1 220px;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Teamactiviteit in het gespreksvenster
   Per teamlid dat nu aan een opdracht werkt een compacte ballon tussen het
   gesprek en de invoerbalk: avatar, naam, korte taak, stand en tijd. De stapel
   heeft een eigen maximumhoogte en scrolt zelf, zodat een lange reeks nooit de
   invoerbalk van het scherm duwt. Alles in de variabelen van de huisstijl, dus
   de keuze in het paneel Vormgeving werkt hier automatisch in mee.
   --------------------------------------------------------------------------- */

.teamact {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(36vh, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Zonder deze regel wint display:flex van het hidden-attribuut en blijft er een lege
   kaart in de groep staan zodra er geen werk loopt. */
.teamact[hidden] { display: none; }

.teamact__ballon {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 9px;
  align-items: start;
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.35;
  animation: rise .25s ease both;
  /* Klikbaar: een klik opent het venster waarin Maikel het werk van dit lid
     meeleest (/api/team/live). De cursor en de hover maken dat zichtbaar, zodat
     niemand hoeft te raden dat er iets achter zit. */
  cursor: pointer;
}

.teamact__ballon:hover,
.teamact__ballon:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface-2);
}

/* Klaar: gedempt, want het werk is klaar en de ballon verdwijnt zo. */
.teamact__ballon--klaar {
  opacity: .72;
  border-left-color: var(--line);
}

/* Mislukt: rood accent, want dit vraagt aandacht en blijft staan. */
.teamact__ballon--mislukt {
  border-left-color: #B4232A;
  background: color-mix(in srgb, #B4232A 6%, var(--surface));
}

.teamact__avatar {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}

.teamact__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.teamact__beginletter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.teamact__tekst { display: block; min-width: 0; }

.teamact__kop { display: flex; align-items: baseline; gap: 8px; }
.teamact__kop b { color: var(--ink); font-weight: 600; }

.teamact__status {
  margin-left: auto;
  font-size: .7rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.teamact__ballon--bezig .teamact__status { color: var(--accent); }
.teamact__ballon--mislukt .teamact__status { color: #B4232A; }

.teamact__taak { display: block; color: var(--ink); overflow-wrap: anywhere; }

.teamact__log {
  display: block;
  margin-top: 2px;
  font-size: .7rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teamact__letop { margin: 0; padding: 0 2px; font-size: .72rem; color: var(--ink-faint); }

/* ----------------------------------------------- meter per teamlid (21-09-2026)
   Bij een bezig teamlid: de meetellende kloktijd van de opdracht (elk seconde,
   vanaf het echte startmoment) tegenover de gebruikelijke looptijd van dat lid —
   de mediaan van zijn afgeronde opdrachten, die de server berekent. Zonder
   voldoende geschiedenis is er geen verwachting: dan staat er "nog geen
   verwachting" en loopt het streepje rustig door in plaats van een percentage.
   Duurt het langer dan gebruikelijk, dan kleurt de vulling waarschuwend met een
   rustige regel erbij — geen alarm. Alles in de huisstijlvariabelen, dus licht,
   donker en de kleurkeuze van de klant lopen mee. */

.teamact__meter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 4px;
  font-size: .71rem;
  line-height: 1.25;
  color: var(--ink-soft);
}

.teamact__klok { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.teamact__verwacht { color: var(--ink-faint); white-space: nowrap; }

.teamact__lang { color: var(--waarschuw); font-weight: 600; white-space: nowrap; }

.teamact__fase { color: var(--ink-soft); overflow-wrap: anywhere; }

.teamact__klaar { margin-top: 4px; font-size: .71rem; color: var(--ink-faint); }

.teamact__balk {
  display: block;
  margin-top: 3px;
  height: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.teamact__vulling {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .35s linear;
}

.teamact__vulling--over { background: var(--waarschuw); }

.teamact__balk--over { border-color: color-mix(in srgb, var(--waarschuw) 55%, var(--line)); }

/* Geen verwachting: geen percentage en geen vulling die vol kan lopen, maar een
   rustig lopend streepje — het laat zien dat er gewerkt wordt zonder een getal te
   verzinnen. */
.teamact__balk--onbepaald .teamact__vulling {
  width: 26%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: teamact-streep 2.4s linear infinite;
}

@keyframes teamact-streep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(420%); }
}

/* Op een smal scherm blijft de stapel compact: twee ballonnen naast elkaar is
   niet te lezen, maar de avatar mag kleiner en de hoogte korter. */
@media (max-width: 720px) {
  .teamact { padding: 0 14px; max-height: min(30vh, 180px); }
  .teamact__ballon { grid-template-columns: 26px 1fr; column-gap: 8px; padding: 6px 9px; }
  .teamact__avatar { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------------
   Teamstand: de tussenstand van het team in het gesprek (22-09-2026)
   Dezelfde regels die de wachtpost (scripts/teamstand.py) naar Telegram stuurt,
   hier opgehaald bij GET /api/team-stand (alleen lezen, eigen timer van 15
   seconden). Nieuwste regel eerst: de tijd en de tekst, met een accent per soort —
   `bezig` in het accent, `klaar` in het groen van de live-stip, `vast` in de
   waarschuwende kleur. Zonder regels is het blok verborgen (ook als het bestand
   ontbreekt), en het heeft een eigen maximumhoogte met eigen scrollen zodat het
   het gesprek nooit wegdrukt. Alles in de variabelen van de huisstijl, dus
   licht/donker en de kleur- en vormkeuze van de klant lopen automatisch mee; op
   396 px breed blijven tijd en tekst naast elkaar leesbaar.
   --------------------------------------------------------------------------- */

.teamstand {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(30vh, 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Zonder deze regel wint display:flex van het hidden-attribuut en blijft het blok
   als lege kaart staan — ook als er geen regels zijn. */
.teamstand[hidden] { display: none; }

/* In de middenzone staat Teamstand als tweede blok naast de teamactiviteit; de
   kaartopmaak en de hoogte van de groep staan bij de middenzone verderop. Op een
   telefoon valt de groep onder elkaar. */
.midden > .teamstand { flex: 1 1 260px; }

.teamstand__kop { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }

.teamstand__titel {
  font-family: var(--font-kop);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.teamstand__bij { margin-left: auto; font-size: .7rem; color: var(--ink-faint); white-space: nowrap; }

.teamstand__lijst {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teamstand__regel {
  display: grid;
  /* Vaste tijdkolom: de regels beginnen allemaal op dezelfde plek, ook bij
     verschillenden tijden. */
  grid-template-columns: 38px 1fr;
  column-gap: 8px;
  align-items: start;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  font-size: .8rem;
  line-height: 1.35;
}

.teamstand__tijd {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.teamstand__tekst { color: var(--ink); overflow-wrap: anywhere; }

/* Het accent per soort; het groen is hetzelfde als de live-stip van een teamlid. */
.teamstand__regel--bezig { border-left-color: var(--accent); }
.teamstand__regel--klaar { border-left-color: #2E9E63; }
.teamstand__regel--vast { border-left-color: var(--waarschuw); }

@media (max-width: 720px) {
  .teamstand { padding: 0 14px; max-height: min(26vh, 160px); }
  .teamstand__regel { grid-template-columns: 34px 1fr; padding: 6px 9px; }
}

/* ---------------------------------------------------------------------------
   Projectvoortgang: de blijvende meter direct onder de teamactiviteit
   Per project de naam, het percentage als tekst en een balk die vol loopt;
   heeft een project fases, dan per fase een regel met naam, percentage en een
   kleinere balk. Sinds 21-09-2026 staat er onder elke voortgangsbalk ook een
   tijdregel: de verwachte uren tegenover de gewerkte kloktijd, met een eigen balk
   (de verwachting is de volle breedte, het verbruik vult hem) die bij over budget
   de waarschuwende kleur en het percentage toont. Anders dan de teamactiviteit
   verdwijnt dit blok niet als er
   niets loopt — het is de stand van het werk, niet de stand van één opdracht.
   Alles in de variabelen van de huisstijl, dus licht/donker en de kleur- en
   vormkeuze van de klant lopen automatisch mee. De stapel heeft een eigen
   maximumhoogte en scrolt zelf, zodat hij de invoerbalk nooit van het scherm
   duwt; op 396 px breed blijven naam en percentage naast elkaar leesbaar.
   --------------------------------------------------------------------------- */

.projecten {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: min(38vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Zonder deze regel wint display:flex van het hidden-attribuut en blijft het
   blok als lege kaart staan zolang de route er nog niet is. */
.projecten[hidden] { display: none; }

.projecten__kop { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }

.projecten__titel {
  font-family: var(--font-kop);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.projecten__stand { margin-left: auto; font-size: .7rem; color: var(--ink-faint); white-space: nowrap; }

.projecten__lijst { display: flex; flex-direction: column; gap: 7px; }

.projecten__kaart {
  padding: 8px 11px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.35;
}

.projecten__regel { display: flex; align-items: baseline; gap: 8px; }

.projecten__naam {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.projecten__pct { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* De tweede regel onder het percentage: de planmaat in mensuren en het aantal
   afgeronde fases. Allebei bewust stil (geen accentkleur): het percentage en de
   tijdregel zijn de hoofdsignalen, dit is de onderbouwing eronder — en juist
   omdat een gewogen gemiddelde één getal is, is "5 van 10 fases klaar" er als
   tweede, hard getal naast gezet. */
.projecten__tweede {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* De balk: een rustige goot met het accent als vulling. role="progressbar" in
   de opmaak, zodat de stand ook voor een schermlezer klopt. */
.projecten__balk {
  margin-top: 5px;
  height: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.projecten__balk--klein { height: 5px; margin-top: 3px; }

.projecten__vulling {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---------------------------------------------- tijd: verwachting en verbruik
   Onder de voortgangsbalk de tijdregel in TEAMKLOKTIJD: `verwacht ~12 min ·
   gewerkt 6,0 min`, met daaronder een balk waarin de verwachting de volle breedte
   is en het verbruik hem vult. Meer gewerkt dan verwacht: de balk kleurt
   waarschuwend (--waarschuw) en het percentage staat erbij ("over budget · 118%").
   "Gewerkt" is de GEMETEN kloktijd van het team (de looptijd van de delegaties bij
   elkaar), "verwacht" is een schatting vooraf — hetzelfde soort getal, dus eerlijk
   vergelijkbaar. De mensuren uit het voorstel (plan) staan er los naast en krijgen
   nooit een percentage tegenover de kloktijd. Stiller en kleiner dan de
   voortgangsbalk: de voortgang is het hoofdsignaal, de tijd is de nuance. */

.projecten__tijd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

.projecten__tijd--klein { margin-top: 4px; font-size: .68rem; color: var(--ink-faint); }

/* Cijfers onder elkaar uitgelijnd, zodat de regels rustig lezen. */
.projecten__tijd-tekst { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.projecten__tijd-over { margin-left: auto; color: var(--waarschuw); font-weight: 600; white-space: nowrap; }

/* Loopt er een opdracht voor dit project, dan laat dit teken zien dat de klok op
   het scherm doortikt (uit de teamactiviteit, niet uit een schrijfactie). De klok
   staat in cijfers met vaste breedte, zodat hij niet danst bij elke seconde. */
.projecten__tijd-loopt { color: var(--accent); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* De stand van de laatste bijwerking hoort bij deze regel, maar is bijzaak: stil. */
.projecten__tijd-stand { color: var(--ink-faint); white-space: nowrap; }

.projecten__balk--tijd { margin-top: 3px; height: 5px; }

.projecten__balk--klein.projecten__balk--tijd { margin-top: 2px; height: 4px; }

/* Over budget: dezelfde balk, maar met de waarschuwende kleur — de goot krijgt
   een warme rand, de vulling de warme kleur, zodat het ook in grijstinten
   opvalt aan de volle breedte. */
.projecten__balk--over { border-color: color-mix(in srgb, var(--waarschuw) 55%, var(--line)); }

.projecten__vulling--over { background: var(--waarschuw); }

.projecten__fases { list-style: none; margin: 7px 0 0; padding: 7px 0 0; border-top: 1px solid var(--line); }

.projecten__fase + .projecten__fase { margin-top: 6px; }

.projecten__fase-kop { display: flex; align-items: baseline; gap: 8px; }

.projecten__fase-naam {
  min-width: 0;
  color: var(--ink-soft);
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.projecten__fase-pct { margin-left: auto; color: var(--ink-soft); font-size: .74rem; white-space: nowrap; }

/* Op een telefoon (396 px) blijft er minder ruimte over: kleinere kaart, iets
   minder hoge balken. De namen mogen afbreken in plaats van afgekapt worden. */
@media (max-width: 720px) {
  .projecten { padding: 0 14px; max-height: min(34vh, 220px); }
  .projecten__kaart { padding: 7px 9px 8px; font-size: .8rem; }
  .projecten__balk { height: 6px; }
  .projecten__balk--klein { height: 4px; }
  .projecten__fase-naam { font-size: .74rem; }
  /* De tijdregel moet ook op 396 px in één oogopslag te lezen zijn: iets
     kleiner, en het percentage mag naar de volgende regel zakken in plaats van
     de regel uit het kader te duwen. */
  .projecten__tijd { font-size: .68rem; }
  .projecten__tijd--klein { font-size: .65rem; }
  .projecten__tijd-over { margin-left: 0; }
}

/* ------------------------------------------- voortgang per project als popup
   Opdracht C (22-09-2026): het grote blok met alle fases eronder is weg. In de
   middenzone staat per project één compacte regel als knop (naam, percentage,
   dunne balk en of er nu een opdracht loopt); het volledige overzicht van dat
   project — tijdregel, plan en alle fases met hun eigen balk — opent in
   #project-dialog. De kaart in dat venster is dezelfde als voorheen
   (.projecten__kaart en alles daaronder), dus daar verandert niets aan de vorm.
   Alles in de huisstijlvariabelen, zodat licht/donker en de kleurkeuze van de
   klant meelopen. */

.projecten__knop {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 11px 9px;
  text-align: left;
  font: inherit;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius);
  cursor: pointer;
}

/* Aanwijsbaar en met een zichtbare focusring: het is een knop, dus hij hoort er
   ook zo uit te zien en met het toetsenbord te bedienen te zijn. */
.projecten__knop:hover { background: var(--surface-2); }

.projecten__knop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.projecten__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 4px;
}

.projecten__meta {
  min-width: 0;
  color: var(--ink-faint);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* De klok van de lopende opdracht rechts in de regel; zakt op een smal scherm
   naar de volgende regel in plaats van de regel uit het kader te duwen. */
.projecten__voet .projecten__tijdblok { margin-left: auto; }

.projecten__voet .projecten__tijd-loopt { font-size: .72rem; }

/* Het venster zelf: dezelfde kaart en dezelfde knoppenbalk als de andere
   vensters. De kaart scrollt (dat doet .prune__card al) en blijft binnen het
   scherm, zodat een lange faseslijst op een telefoon niet buiten beeld loopt. */
.prune.projectvenster .prune__card {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  outline: none;                 /* de kaart krijgt de focus; geen eigen kader */
}

.projectvenster__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.projectvenster__kop .prune__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.projectvenster__pct {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.projectvenster__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: .72rem;
  color: var(--ink-faint);
}

.projectvenster__stand[hidden] { display: none; }

.projectvenster__stand .projectvenster__bij { white-space: nowrap; }

.projectvenster__stand .projecten__tijdblok { margin-left: auto; }

/* De kaart in het venster staat op dezelfde ondergrond als het venster zelf;
   daarom een lichtere goot eronder, zodat het overzicht als blok leest. */
.projectvenster__vak .projecten__kaart { background: var(--bg); }

@media (max-width: 720px) {
  .prune.projectvenster .prune__card { padding: 18px 14px 14px; }
  .projecten__knop { padding: 7px 9px 8px; font-size: .8rem; }
  .projectvenster__stand .projecten__tijdblok { margin-left: 0; }
}

/* --------------------------------------- documentatie als verkenner (uitrol 21-09-2026)
   Het paneel Documentatie is nu een verkenner: mappen openen en er weer uit,
   kruimelpad, zoeken over alle mappen, en een knop om het venster groot te maken.
   Het venster is een kolom — kop, kruimelbalk, zoekveld en een lijst die zelf
   scrollt. Zonder die kolom rekt de lijst de kaart op en zijn het zoekveld en de
   sluitknop onbereikbaar. Alles in de huisstijlvariabelen, dus licht/donker en de
   kleurkeuze van de klant lopen mee. */

.prune.doc .doc__card {
  width: min(760px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 12px;
}

/* Groot: bijna het hele scherm. Eén knop, dezelfde op Windows en op Android —
   een echt systeemvenster (requestFullscreen) gedraagt zich op een telefoon
   anders dan op een pc en valt daar buiten het scherm van de app. */
.prune.doc.doc--groot .doc__card {
  width: calc(100vw - 8px);
  height: calc(100vh - 8px);
  height: calc(100dvh - 8px);
  max-height: calc(100dvh - 8px);
}

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

.doc__kop .prune__title { margin: 0; }
.doc__kop .prune__count { margin: 0 0 0 auto; }

.doc__groot {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.doc__groot:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.doc__groot[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.doc__balk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.doc__terug {
  flex: 0 0 auto;
  padding: 6px 10px;
  font: inherit;
  font-size: .78rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

.doc__terug:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.doc__terug:disabled { opacity: .45; cursor: default; }

/* Kruimelpad: één regel die zijwaarts schuift als hij te lang wordt, zodat het
   venster niet breder wordt van een diep pad. */
.doc__kruimel {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: .8rem;
  scrollbar-width: none;
}

.doc__kruimel::-webkit-scrollbar { display: none; }

.doc__kruimel-deel {
  padding: 5px 6px;
  font: inherit;
  font-size: .8rem;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.doc__kruimel-deel:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.doc__kruimel-deel--nu { color: var(--ink); font-weight: 600; cursor: default; }
.doc__streep { color: var(--ink-faint); }

.doc__zoekvak { position: relative; display: flex; align-items: center; }

.doc__zoek {
  width: 100%;
  padding: 9px 34px 9px 11px;
  font: inherit;
  font-size: .86rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.doc__zoek:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }

.doc__wis {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  font: inherit;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

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

/* De lijst scrolt zelf en rekt de kaart niet op. */
.prune.doc .doc__lijst {
  flex: 1 1 auto;
  min-height: 90px;
  max-height: none;
  margin: 0;
  padding-right: 2px;
}

.doc__maprij {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 11px;
  font: inherit;
  font-size: .86rem;
  text-align: left;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.doc__maprij:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.doc__mapicoon { color: var(--accent); font-size: .8rem; }
.doc__mapnaam { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.doc__maptel { flex: 0 0 auto; font-size: .72rem; color: var(--ink-faint); }

/* Op een telefoon gebruikt het venster bijna het hele scherm en zijn de knoppen
   groot genoeg voor een duim. */
@media (max-width: 720px) {
  .prune.doc .doc__card {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    padding: 14px 12px 10px;
  }

  .doc__maprij, .doc__item { padding: 11px 12px; }
  .doc__terug, .doc__groot { min-height: 40px; }
  .doc__kop { flex-wrap: wrap; }
}

/* ------------------------------------------- pipeline: kansen echt klikbaar
   Elke kans met een recordnummer is een echte regel: de hele regel is het raakvlak
   (niet alleen de woorden) en er staat altijd een pijl achter — ook zonder muis,
   want op een telefoon is er geen aanwijzer die verraadt dat je kunt tikken. Een
   kans zonder recordnummer blijft als platte regel staan, zodat er niets uit het
   overzicht verdwijnt. In het grote venster staat de klikbare lijst vóór de ruwe
   reviewtekst; die tekst zit in een uitklapbaar blok, want daar valt niets aan te
   klikken. */

.pipeline__pijl {
  color: var(--accent);
  font-size: .95em;
  /* In de zijkolom staat de pijl vóór de tekst (die regels worden afgekapt, achteraan
     zou hij wegvallen); in het grote venster staat hij rechts in de regel. */
  margin-right: 3px;
}

.pipelinevenster__lijst .pipeline__pijl { margin-right: 0; }

.pipelinevenster__lijst .pipeline__rij--klik {
  border-left-color: transparent;      /* de kaderlijn van de regel doet het werk */
}

.pipelinevenster__lijst .pipeline__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.pipelinevenster__lijst .pipeline__link:hover,
.pipelinevenster__lijst .pipeline__link:focus-visible {
  color: var(--ink);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.pipeline__tekst { flex: 1 1 auto; min-width: 0; }

/* Op een smal scherm: grotere letters, drie regels in de zijkolom en een raakvlak
   dat je met een duim kunt raken. */
@media (max-width: 720px) {
  .pipeline__rij { font-size: .86rem; line-height: 1.45; -webkit-line-clamp: 3; }
  .pipelinevenster__lijst .pipeline__rij { font-size: .88rem; }
  .pipelinevenster__lijst .pipeline__link { min-height: 44px; padding: 10px 12px; }
  .pipelinevenster__lijst .pipeline__pijl { font-size: 1.05em; }
}

/* ------------------------------------------- meekijken in het werk van een lid
   Het venster met het werklogboek van één delegatie: avatar en naam, status,
   opdracht en daaronder de uitvoer als leesbare tekst met vaste letterbreedte,
   nieuwste regel onderaan. Het venster zelf scrollt (max-height + overflow) en de
   logregels scrollen in hun eigen vak, zodat de kop met het lid en de status
   altijd in beeld blijft. De schakelaar "meescrollen" staat erbij: zonder die
   schakelaar zou de klant niet rustig kunnen terugkijken terwijl er gewerkt
   wordt. Alles wat hier komt is al geheim-vrij gemaakt door de server. */

.werkvenster__card {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
}

.werkvenster__avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: 600;
}

.werkvenster__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.werkvenster__taak {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.werkvenster__meta {
  margin: 4px 0 0;
  color: var(--ink-faint);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.werkvenster__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
}

.werkvenster__vinkje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--ink-soft);
  font-size: .78rem;
  cursor: pointer;
}

.werkvenster__vinkje input { width: 16px; height: 16px; margin: 0; }

.werkvenster__filter { color: var(--waarschuw, var(--ink-faint)); font-size: .74rem; }

/* De uitvoer zelf: vaste letterbreedte, eigen scrollvak, nieuwste regel onderaan.
   `white-space: pre-wrap` zodat lange regels wikkelen in plaats van weg te lopen
   buiten beeld (afkappen doet de server al op 300 tekens). */
.werkvenster__log {
  margin: 0;
  padding: 10px 12px;
  flex: 1 1 auto;
  min-height: 160px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-2, var(--bg));
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: .78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.werkvenster__leeg { margin: 6px 0 0; color: var(--ink-faint); font-size: .78rem; }

@media (max-width: 720px) {
  .werkvenster__card { width: calc(100vw - 10px); max-height: calc(100dvh - 10px); padding: 12px 10px 8px; }
  .werkvenster__log { max-height: 56vh; font-size: .74rem; }
  .werkvenster__vinkje { min-height: 40px; }
}

/* ---------------------------------------------------------------------------
   Indeling van het scherm: de klant zet zijn blokken, meters en vensters waar
   hij ze wil. Buiten de modus is er niets van te zien — de strips staan op
   display:none, dus het scherm ziet er precies zo uit als altijd (geen handvat,
   geen rand). Staat de modus aan, dan krijgt elk blok een strip met een
   sleephandvat (⠿) en een pin (📌), en elk venster een pin in zijn kop.
   Kleuren en vormen komen uit de variabelen van de huisstijl, dus licht/donker
   en de keuze van de klant in het paneel Vormgeving lopen automatisch mee.
   Het handvat is het enige met touch-action:none: alleen daar sleept het, de
   kolom zelf blijft met de vinger gewoon scrollen.
   --------------------------------------------------------------------------- */

.indeling__bediening { display: none; }

.indeling-aan .indeling__bediening {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 2px 9px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: .7rem;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* Een blok dat zichzelf verbergt (teamactiviteit zonder werk, voortgang zonder
   gegevens) verbergt zijn strip mee; zonder deze regel wint display:flex het van
   het hidden-attribuut en blijft er een handvat zweven bij een leeg blok. */
.indeling-aan .indeling__bediening[hidden] { display: none; }

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

/* De knoppen in de strip van een blok: de zone (Links/Midden/Rechts), de breedte
   (Kolom/Breed) en de hoogte (Compact/Normaal/Uitgebreid). Klein en stil, in de
   variabelen van de huisstijl — de keuze in het paneel Vormgeving loopt mee. De
   gekozen stand licht op in de accentkleur; staat het blok vast, dan zijn ze uit. */
.indeling__knoppen {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 1px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.indeling__zone,
.indeling__vorm {
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.indeling__zone:hover,
.indeling__vorm:hover { background: var(--surface-2); color: var(--ink); }

.indeling__zone[aria-pressed="true"],
.indeling__vorm[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-weight: 600;
}

.indeling__zone:disabled,
.indeling__vorm:disabled { opacity: .45; cursor: default; }

.indeling__greep {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 22px;
  border-radius: 6px;
  color: var(--ink-faint);
  cursor: grab;
  touch-action: none;
}

.indeling__greep:hover { background: var(--surface-2); color: var(--ink); }
.indeling__greep[hidden] { display: none; }
.indeling__greep svg { width: 13px; height: 18px; fill: currentColor; }

.indeling__pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.indeling__pin svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vastgezet: een gevulde pin tegen een lege, en een doorgetrokken rand. In één
   oogopslag te zien wat vast en wat los is. */
.indeling__pin[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.indeling__pin[aria-pressed="true"] svg { fill: currentColor; }
.indeling__bediening--vast { border-style: solid; }
.indeling__bediening--bezig { opacity: .45; }
.indeling--sleept .indeling__greep { cursor: grabbing; }

/* De plaatsaanduiding tijdens het slepen: rustig, in de accentkleur, geen alarm.
   `flex: none` en een minimumhoogte, want in een kolom die zelf scrolt zou een
   drie-pixel-lijntje anders tot niets in elkaar gedrukt worden. */
.indeling__lijn {
  flex: none;
  height: 4px;
  min-height: 4px;
  margin: 1px 0;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* De balk onderin met de uitleg, de rustige regel en de twee knoppen. */
.indeling__balk {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: min(680px, calc(100vw - 20px));
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .74rem;
  color: var(--ink-soft);
}

.indeling__balk[hidden] { display: none; }
.indeling__uitleg { flex: 1 1 220px; min-width: 0; }
.indeling__uitleg b { color: var(--accent); }
.indeling__noot { flex-basis: 100%; font-size: .7rem; color: var(--ink-faint); }
.indeling__noot[hidden] { display: none; }

/* Vensters: de kop is het sleepvlak, de pin zet de plek vast. */
.indeling-aan .indeling__kop { cursor: grab; touch-action: none; }
.indeling-aan .indeling__venster--vast .indeling__kop { cursor: default; }
.indeling__venster--sleept { cursor: grabbing; }

.indeling__venster-pin {
  display: none;
  place-items: center;
  width: 27px;
  height: 24px;
  padding: 0;
  margin-left: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-faint);
  cursor: pointer;
  vertical-align: middle;
}

.indeling-aan .indeling__venster-pin { display: inline-grid; }

.indeling__venster-pin svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.indeling__venster-pin[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.indeling__venster-pin[aria-pressed="true"] svg { fill: currentColor; }

/* Op een smal scherm: de balk onderin blijft leesbaar en de handvatten blijven
   44 px hoog genoeg om met een duim te pakken. */
@media (max-width: 720px) {
  .indeling__balk { bottom: 8px; gap: 6px 8px; padding: 8px 10px; font-size: .71rem; }
  .indeling__uitleg { flex-basis: 100%; }
  .indeling__greep { width: 44px; height: 26px; }
  .indeling__pin { width: 40px; height: 26px; }
  /* De zone- en vormknoppen blijven met de duim te raken. */
  .indeling__zone,
  .indeling__vorm { padding: 5px 8px; font-size: .72rem; }
}

/* Een blok dat de klant naar de andere kolom sleept, krijgt de buitenopmaak van
   die kolom: in de rail een rustige sectie (zoals de andere railblokken), in de
   zijkolom een kaart met rand en eigen achtergrond (zoals klok en tijd). De
   inhoud van het blok houdt zijn eigen opmaak — het is hetzelfde blok, op een
   andere plek. Alleen blokken die écht van kolom wisselen krijgen deze klasse;
   een blok in zijn eigen kolom verandert niets. */
.rail > .indeling__in-rail {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Niet laten krimpen: de rail is zelf een flexkolom die scrolt, en zonder deze regel
     wordt een hoog blok dat hierheen verhuist tot niets in elkaar gedrukt (de
     voortgangsmeter in de rail was 0 px hoog en dus onzichtbaar). */
  flex: 0 0 auto;
}

.rail > .indeling__in-rail.teamact,
.rail > .indeling__in-rail.projecten { max-height: 46vh; }
.rail > .indeling__in-rail.side__list { flex: 0 0 auto; max-height: 46vh; min-height: 96px; }

.side > .indeling__in-side {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  /* Zelfde reden als in de rail: de zijkolom scrolt en drukt een hoog blok anders
     in elkaar. */
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- de middenzone
   Het midden is de derde zone: het gebied onder het gesprek (met het invulveld er
   direct boven) waar de teamactiviteit, de Teamstand en de voortgangsmeter staan.
   Sinds 22-09-2026 vormen die drie één gegroepeerd geheel: dezelfde kaartopmaak,
   gelijke tussenruimte, en op een breed scherm twee naast elkaar met de derde
   eronder over de volle breedte.

   De zone is een rij die omslaat (`flex` met `wrap`) in plaats van een raster met
   twee kolommen. Waarom: een rastervak blijft bestaan als het blok erin zich
   verbergt, en dan valt er een half leeg vak naast het andere blok. Met flexgroei
   schuift een blok dat alleen overblijft netjes door over de volle breedte.
   `flex: 1 1 260px` betekent: twee blokken passen naast elkaar zolang de zone
   breder is dan 2 × 260 px plus de tussenruimte (op 396 px dus niet — daar valt de
   groep onder elkaar). Een blok op `breed` krijgt de volle breedte van de zone.

   In de zijkolom en de rail betekenen `kolom` en `breed` allebei de volle
   kolombreedte — daar zijn er geen regels voor, dus daar springt niets. */

.midden {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  min-width: 0;
  width: 100%;
  /* Geen eigen limiet meer: de zone loopt van balk tot balk (opdracht 22-09-2026).
     Deze 800 px was de negende limiet — hij hield de groep precies zo breed als
     het gesprek van 760 px plus zijn eigen padding, zodat alles op één lijn stond. */
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom));
  /* Vangnet voor een laag venster: in het slechtste geval (drie gevulde blokken)
     stopt de groep hier en scrolt hij zelf, zodat het gesprek er boven blijft. */
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.midden__eind { display: block; flex: 1 1 100%; height: 0; }

/* Elk blok in de middenzone zit in een eigen vak met zijn strip erboven. Het vak is
   de plek in de rij; de strip erbinnen eist dus geen eigen regel op, en twee blokken
   op `kolom` kunnen naast elkaar staan. */
.midden__vak {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 260px;
}

/* Het vak van een blok dat zich verbergt (leeg) verdwijnt mee; anders blijft er een
   leeg vak in de rij staan en valt er een gat naast het blok ernaast. */
.midden__vak[hidden] { display: none; }

/* De breedtekeuze (Kolom/Breed) van de indeling. Hij staat op het vak én op het blok:
   in de middenzone is het vak de plek in de rij, en een blok dat hier van zichzelf
   staat (Teamstand) heeft geen vak. */
.midden > .midden__vak.indeling__breedte-breed,
.midden > .indeling__breedte-breed { flex: 1 1 100%; }
.midden > .midden__vak.indeling__breedte-kolom,
.midden > .indeling__breedte-kolom { flex: 1 1 260px; }

/* De strip en de sleep-lijn horen bij een blok; die horen geen eigen plek in de rij
   te krijgen, anders staat de strip naast zijn blok in plaats van erboven. */
.midden > .indeling__bediening,
.midden > .indeling__lijn { flex: 1 1 100%; }

/* ------------------------------------------------------------------- de groep
   De drie blokken van de groep hebben dezelfde kaartopmaak: dezelfde kop (titel
   links, stand rechts), dezelfde padding, rand, hoek en tussenruimte, en elk een
   eigen maximumhoogte met eigen scrollen zodat de groep het gesprek niet wegdrukt.
   Alles in de variabelen van de huisstijl, dus de keuze in het paneel Vormgeving
   (kleur, lettertype, hoeken) werkt hier automatisch in mee; licht en donker ook.
   De dichtheidsschakelaar van de indeling (Compact/Normaal) staat hieronder en
   wint van deze standaardhoogtes. */

.midden .teamact,
.midden .teamstand,
.midden .projecten {
  width: 100%;
  max-width: none;          /* de zone bepaalt de breedte, niet het blok zelf */
  margin: 0;
  padding: 10px 12px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-y: auto;         /* elk blok scrolt binnen zijn eigen hoogte */
  /* Anders dan in de zijkolom en de rail loopt het scrollen hier door in de groep:
     staat de groep op zijn maximum, dan scrolt de pagina niet vast. */
  overscroll-behavior: auto;
}

.midden .teamact,
.midden .teamstand { max-height: min(28vh, 220px); }
.midden .projecten { max-height: min(28vh, 240px); }

/* De kop van elk blok: titel links, stand of status rechts — één maat en kleur voor
   alle drie. De kop blijft bovenin staan als het blok zelf scrolt. */
.midden .teamact__blokkop,
.midden .teamstand__kop,
.midden .projecten__kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0 0 2px;
  background: var(--surface);
}

.midden .teamact__bloktitel,
.midden .teamstand__titel,
.midden .projecten__titel {
  font-family: var(--font-kop);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.midden .teamact__blokbij,
.midden .teamstand__bij,
.midden .projecten__stand {
  margin-left: auto;
  font-size: .7rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Een blok dat uit een andere zone hierheen komt, krijgt de kaartopmaak van het
   midden; de twee meters die er van zichzelf staan veranderen niets. */
.midden > .indeling__in-midden {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
}

/* De dichtheid per blok. Compact en Normaal verbergen de regels die er niet meer bij
   passen; Uitgebreid laat alles staan — dat is precies hoe het scherm er vóór deze
   schakelaar uitzag, dus wie er niet aan komt ziet geen verschil.
   De fases van een project staan sinds opdracht C niet meer in dit blok maar in het
   venster #project-dialog, en daar hoort de volledige lijst te staan: de dichtheid
   van het blok mag niets van dat overzicht weglaten. Daarom is de regel die de derde
   en zevende fase verborg (.projecten__fase:nth-child(n+…)) vervallen. */

.indeling__hoogte-compact .teamact__ballon:nth-child(n+3),
.indeling__hoogte-normaal .teamact__ballon:nth-child(n+5) { display: none; }

/* De meters scrollen zelf (dat deden ze al); compact en normaal zetten de grens lager,
   zodat er meer gesprek overblijft. Uitgebreid laat de eigen grens staan — dat is de
   stand waarin er niets aan het scherm verandert. De waarden blijven onder de eigen
   grens van deze blokken op een telefoon (180 px), zodat de reeks compact < normaal <
   uitgebreid op elk scherm klopt en niet omslaat. Deze regels gelden in elke zone, dus
   ook als het blok in de zijkolom of de rail staat. */
.projecten.indeling__hoogte-compact,
.teamact.indeling__hoogte-compact { max-height: min(20vh, 140px); }

.projecten.indeling__hoogte-normaal,
.teamact.indeling__hoogte-normaal { max-height: min(25vh, 175px); }

/* Een blok van een andere zone in het midden: compact en normaal begrenzen de hoogte
   van het blok zelf, uitgebreid laat hem vrij (zoals altijd). */
.midden .indeling__in-midden.indeling__hoogte-compact { max-height: 160px; overflow-y: auto; }
.midden .indeling__in-midden.indeling__hoogte-normaal { max-height: 300px; overflow-y: auto; }

/* Op een telefoon valt de groep onder elkaar — teamactiviteit, Teamstand, Voortgang,
   in die volgorde — en gaan de hoogtes omlaag, zodat het gesprek er boven blijft.
   `kolom` en `breed` vallen hier samen (er is geen tweede kolom om naast te staan);
   de hoogteschakelaar van de indeling werkt er gewoon door. */
@media (max-width: 720px) {
  .midden {
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 8px 10px;
    max-height: min(56vh, 500px);
  }
  .midden .teamact,
  .midden .teamstand,
  .midden .projecten { padding: 8px 10px; }
  .midden .teamact,
  .midden .teamstand { max-height: min(20vh, 170px); }
  .midden .projecten { max-height: min(22vh, 190px); }
}

/* Tot 900 px houdt het invulveld 12 px zijkant aan (het smalle-schermblok hierboven
   bij de invoerbalk); de blokgroep loopt daarmee gelijk, zodat gesprek, invulveld en
   groep op één lijn staan. Deze regel staat bewust áchter de basisregel van de
   middenzone: met dezelfde specificiteit wint anders de regel die later komt. */
@media (max-width: 900px) {
  .midden { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
}

/* =============================================================== TELLERS-BALK (05-10-2026)
   De twee tellers linksonder onder de gesprekken: "RENDERS nog 30 / 30 · AI-TEGOED nog 99,1%".
   Eén rustige regel in het vakje en één regel in de zweeftekst erachter (het resetmoment van het
   AI-tegoed). Dit blok is in DIT bestand gevlochten — het scherm is een eigen tak en heeft de
   tellers van de andere omgevingen niet.

   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,1%" tegen "nog 99,1%").
   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.

   De letters zijn klein gehouden (waarde .6rem, kopje .55rem met een ondergrens van 8 pixels) omdat
   de twee tellers samen in de smalle kolom moeten passen; ze zijn nooit kleiner dan 8 pixels.
   Wat er NIET in staat: geen knop, geen venster, geen getal dat het scherm zelf uitrekent, geen
   bedrag. */

/* De zweeftekst (hetzelfde mechanisme als bij de knoppen elders in de voorkant). */
.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 het vakje en de zweeftekst hoort bij de zweeftekst: anders valt de aanwijzing weg
   zodra de muis erheen reist. */
.tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

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

.tip__tekst { display: block; }

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

.tellers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;                 /* rustig en klein; hoeft niet even hoog te zijn als de knoppen */
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  /* De maat is GEMETEN op zijn eigen scherm (05-10-2026): in zijn linkerkolom is 228 pixels
     beschikbaar en de hele regel meet bij 9,6 pixels 234 — 6 te veel, waardoor hij altijd in de hoge
     vorm zou vallen. Bij 9 pixels (deze maat) past de regel met 203 pixels ruim, ook met de hoogste
     standen ("nog 30 / 30" en "nog 100,0%"). De letters blijven ruim boven de ondergrens van 8. */
  font-size: max(8.6px, .56rem);
  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, .5rem);
  letter-spacing: 0;            /* geen letterafstand: dat kost op deze regel de ruimte die we niet hebben */
  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 "nog 30 / 30"
   (9 tekens) en bij het AI-tegoed "nog 100,0%" (10 tekens). */
#teller-plaatjes { display: inline-block; min-width: 9ch; }
#teller-tegoed { display: inline-block; min-width: 10ch; }

/* Het puntje TUSSEN de twee tellers. In de hoge vorm hieronder gaat het weg: daar zou het als een
   losse kogel tussen de twee blokjes staan. */
.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 TERUGVALVORM (app.js meet dit op zijn scherm): de ENE regel past niet, dus komen de twee tellers
   ONDER ELKAAR te staan — elk op zijn eigen regel, met het kopje en de waarde naast elkaar, alles op
   dezelfde linkerrand. Dat is twee regels en geen vier: het kopje blijft naast zijn waarde staan, want
   het getal is het belangrijkste en dat wil je niet losgekoppeld zien. Het puntje tussen de twee
   tellers verdwijnt in deze vorm (het zou als losse kogel op een eigen regel staan).
   Gemeten op zijn scherm (05-10): bij de tekststand "ruim" is de ene regel 234 pixels en de kolom 228,
   dus daar valt het scherm hierheen terug; de twee regels zijn samen 111 pixels breed en passen dus
   ruim. */
.tellers--hoog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  padding: 3px 7px;
  row-gap: 2px;
}
.tellers--hoog .tellers__stuk { display: inline-flex; flex-direction: row; align-items: baseline; gap: 3px; }
.tellers--hoog .tellers__punt { display: none; }

/* De zweeftekst klapt hier OMHOOG open (zie punt 2 boven), met hetzelfde onzichtbare tussenstukje als
   bij de andere zweefvakjes. Hij blijft binnen het venster: de TEKST is 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. */
.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 */