/* Canon H14: mobiel-eerst, grote knoppen, één scherm per vraag, geen formulieren. */
/* 05-08: kleursysteem omgezet van oranje-accent naar teal (auto-browser herontwerp, Bram-bestek).
   --accent was #f59e0b (oranje); alle plekken die ermee gekoppeld waren (avatar, mic, actieve
   knoppen, keuzerij) volgen automatisch mee via de variabele. --warn is NIEUW: losgekoppeld van
   --accent zodat een waarschuwing (duplicaat-detectie, dubbelklik-bevestiging) niet dezelfde kleur
   draagt als een gewone primaire actie. --nav-bg/--border zijn nieuw voor de linker-navigatiekolom. */
:root {
  --bg: #0f1420; --card: #1a2233; --card-2: #232e46; --text: #edf1f7; --dim: #8fa0bb;
  --accent: #17a698; --accent-2: #2dd4bf; --accent-ink: #062420;
  --danger: #f87171; --ok: #4ade80; --warn: #f2a93c;
  --nav-bg: #0c1220; --border: #232c42;
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
/* ── Pincode-klavier: fullscreen, groot, blind te bedienen in de auto ──────────── */
#pin-scherm {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  /* Bram 04-08: op het brede, LAGE scherm van de wagen (autobrowser, ruim breder dan hoog)
     viel de Ontgrendel-knop letterlijk van het scherm af — "justify-content: center" op een
     fixed, niet-scrollende container laat overtollige inhoud gewoon onbereikbaar afsnijden.
     overflow-y is het bulletproof vangnet (blijft werken op ELK formaat); de media-query
     hieronder maakt scrollen op een autoscherm overbodig door alles compacter te maken. */
  overflow-y: auto;
}
.pin-kop { text-align: center; }
.pin-logo { width: 88px; height: 88px; border-radius: 22px; display: block; margin: 0 auto 6px; }
#pin-titel { font-size: 1.1rem; font-weight: 600; color: var(--text); }
#pin-fout { color: var(--danger); font-size: 0.9rem; font-weight: 600; margin-top: 6px; }
#pin-dots { display: flex; gap: 12px; min-height: 18px; }
#pin-dots .pd {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dim);
  background: transparent; transition: background 0.15s, border-color 0.15s;
}
#pin-dots .pd.vol { background: var(--accent-2); border-color: var(--accent-2); }
#pin-klavier {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; max-width: 320px;
}
#pin-klavier button {
  aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--card);
  color: var(--text); font-size: 1.6rem; font-weight: 700; cursor: pointer;
  touch-action: manipulation; min-height: 64px;
}
#pin-klavier button:active { background: var(--card-2); transform: scale(0.94); }
#pin-wis, #pin-terug { font-size: 1.3rem; color: var(--dim); background: transparent; }
#pin-ok {
  width: 100%; max-width: 320px; padding: 18px; border: 0; border-radius: var(--radius);
  background: var(--accent-2); color: #00251f; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
#pin-ok:active { transform: scale(0.98); }
/* schudden bij een foute code — duidelijk voelbaar, geen tekst nodig om te "lezen" */
#pin-scherm.fout #pin-dots { animation: pin-schud 0.4s; }
@keyframes pin-schud {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
/* Bug 04-08 (Bram): deze media-queries stonden eerst VÓÓR de gewone regels hierboven — bij
   gelijke specificiteit wint bij een CSS-cascade de LAATSTE regel in het bestand, dus de
   vaste ".pin-logo{width:88px}" enz. overschreven de compacte varianten alsnog, media-query
   of niet. Moeten NA de basisregels staan om echt te overrulen. */
@media (max-height: 700px) {
  #pin-scherm { gap: 10px; padding: 12px; }
  .pin-logo { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 2px; }
  #pin-titel { font-size: 1rem; }
  #pin-klavier { gap: 8px; max-width: 260px; }
  #pin-klavier button { min-height: 44px; font-size: 1.3rem; }
  #pin-ok { max-width: 260px; padding: 12px; }
}
/* Live gemeten op een echt autoscherm (breed/laag, ~480px hoog): de laag hierboven alleen was
   nog te hoog en verplichtte een scroll om te ontgrendelen. Nog een tandje compacter zodat een
   autoscherm normaal gezien NIETS hoeft te scrollen — overflow-y op #pin-scherm blijft het
   vangnet voor een nog lager scherm. */
@media (max-height: 560px) {
  #pin-scherm { gap: 6px; padding: 8px; }
  .pin-logo { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 0; }
  #pin-titel { font-size: 0.85rem; }
  #pin-dots { min-height: 12px; gap: 8px; }
  #pin-dots .pd { width: 12px; height: 12px; }
  #pin-klavier { gap: 5px; max-width: 220px; }
  #pin-klavier button { min-height: 34px; font-size: 1.05rem; }
  #pin-ok { max-width: 220px; padding: 8px; font-size: 0.9rem; }
}

header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 68px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
header h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1px; }
.header-spacer { flex: 1; }
.logo { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
/* Avatar linksboven naast logo/naam → mini-menu met profiel + uitloggen (Bram 04-08). */
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.avatar-btn:active { transform: scale(0.92); }
.avatar-btn-groot { width: 42px; height: 42px; font-size: 1.2rem; flex-shrink: 0; }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  background: var(--card); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 14px; width: 240px; display: flex; flex-direction: column; gap: 12px;
}
.avatar-menu-kop { display: flex; align-items: center; gap: 10px; }
.avatar-menu-kop b { display: block; font-size: 0.95rem; }
.avatar-menu-kop small { color: var(--dim); font-size: 0.8rem; word-break: break-all; }
.avatar-versie { color: var(--dim); font-size: 0.78rem; text-align: center; }
#avatar-verversen, #avatar-uitloggen {
  border: 0; background: var(--card-2); color: var(--text); border-radius: 12px;
  padding: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
#avatar-verversen:active, #avatar-uitloggen:active { transform: scale(0.98); }
#speak-toggle {
  border: 0; background: var(--card-2); border-radius: 10px; font-size: 1.05rem;
  padding: 6px 10px; cursor: pointer; margin-right: 8px;
}
#nieuw-gesprek {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--accent-2); color: #00251f; font-size: 1.5rem; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
#nieuw-gesprek:active { transform: scale(0.92); }
#exporteer-gesprek {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--card-2); color: var(--text); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
#exporteer-gesprek:active { transform: scale(0.92); }
#instellingen-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--card-2); color: var(--text); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
#instellingen-btn:active { transform: scale(0.92); }
#status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }

/* Concept-versiekaart in het gesprek (inklapbaar): elke gebouwde/bewerkte versie op zijn plek */
.msg.brain.versie-kaart { border-left: 3px solid var(--accent); background: rgba(23, 166, 152, 0.08); }
/* N5 (10-08): het versiespoor als eigen weergave in Brein — één kaart met alle versies erin, zodat
   "✕ Sluiten" ze samen opruimt. Binnenin mogen ze de volle breedte nemen (ze zitten al in een
   ingesprongen kaart) en hebben ze lucht tussen zich, anders plakken de randen aan elkaar. */
.versie-spoor { width: 100%; max-width: 100%; }
.versie-spoor .msg.brain.versie-kaart { max-width: 100%; margin-top: 8px; }
.versie-kop { font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.versie-meta { font-size: 0.76rem; color: var(--dim); margin-top: 3px; word-break: break-word; }
.versie-body {
  white-space: pre-wrap; font-size: 0.85rem; margin-top: 8px; color: var(--text);
  background: var(--bg); border-radius: 8px; padding: 8px 10px;
}
#status-dot.ok { background: var(--ok); }
#status-dot.mock { background: var(--warn); }

/* ── Split-screen workspace: links de navigatiekolom, rechts de hoofdinhoud ─── */
#workspace { flex: 1; display: flex; min-height: 0; }
/* #main-col: nieuwe wrapper (05-08 herontwerp) rond feed/compose/inbox -- neemt exact de rol over
   die #workspace vroeger rechtstreeks vervulde (desktop: feed+compose naast elkaar; mobiel: alles
   onder elkaar). #sidebar ernaast is puur navigatie (#tabs + #inbox-subtabs), zie verderop. */
#main-col { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
#sidebar { display: flex; flex-direction: column; flex-shrink: 0; }
main#feed {
  flex: 1 1 50%; min-width: 0; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

#compose {
  flex: 1 1 50%; min-width: 0; overflow-y: auto;
  border-left: 1px solid var(--border); background: #121a29;
  padding: 16px; display: flex; flex-direction: column;
  transition: flex-basis 0.15s;
}
/* Bram 05-08 ("halve scherm lege ruimte"): zonder actief concept reserveert het paneel geen
   breedte meer -- het gesprek krijgt de volle breedte. Verschijnt pas zodra er iets te tonen is
   (composePaneel._toonKaart() zet data-compose="actief"). ENKEL op desktop/split-screen: op
   mobiel (zie media query onderaan) stuurt data-tab welk paneel zichtbaar is, en moet de lege
   toestand van het Concept-tabblad gewoon zichtbaar blijven i.p.v. altijd ingeklapt. */
@media (min-width: 901px) {
  #workspace[data-compose="leeg"] #compose {
    flex: 0 0 0; padding: 0; border-left: 0; overflow: hidden;
  }
  #workspace[data-compose="leeg"] main#feed { flex: 1 1 100%; }
}
#compose-leeg {
  margin: auto; max-width: 320px; text-align: center; color: var(--dim);
}
#compose-leeg .cl-emoji { font-size: 2.6rem; margin-bottom: 8px; opacity: 0.8; }
#compose-leeg .cl-titel { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
#compose-leeg .cl-sub { font-size: 0.85rem; line-height: 1.5; }

/* Compose-kaart: e-mailclient-stijl met Aan/Onderwerp/Vanuit + live body */
#compose-kaart { display: flex; flex-direction: column; gap: 0; position: relative; padding-top: 34px; }
/* Verberg-knop (Bram 06-08): een concept uit een andere context bleef anders permanent de helft
   van het scherm innemen. Puur view-state -- geen Verwerpen, het draft blijft gewoon "concept".
   Eigen kopstrook (padding-top hierboven) zodat hij niet over het Aan-veld valt. */
.cmp-sluit {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--dim); font-size: 0.95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.cmp-sluit:hover { color: var(--text); }
.cmp-veld {
  display: grid; grid-template-columns: 74px 1fr auto auto; align-items: start;
  gap: 8px; padding: 10px 2px; border-bottom: 1px solid #212b40;
}
.cmp-veld > label {
  font-size: 0.78rem; color: var(--dim); font-weight: 600; padding-top: 3px;
}
.cmp-waarde { font-size: 0.92rem; word-break: break-word; min-height: 1.3em; }
.cmp-waarde.leeg { color: var(--dim); font-style: italic; }
.cmp-fb, .cmp-alt {
  grid-row: 1; align-self: start;
  width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 0.85rem;
  touch-action: manipulation;
}
.cmp-fb:active, .cmp-alt:active { transform: scale(0.92); }
.cmp-fb.actief { background: var(--accent-2); color: #00251f; }
.cmp-alt { color: var(--dim); font-size: 0.75rem; }

/* Dropdown-alternatieven (Bram 04-08): één tik i.p.v. een prompt bij twijfelgevallen */
.cmp-alt-menu {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px;
}
.cmp-alt-menu button {
  padding: 7px 11px; border: 0; border-radius: 10px; background: var(--card-2);
  color: var(--text); font-size: 0.8rem; cursor: pointer; touch-action: manipulation;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-alt-menu button:active { transform: scale(0.96); }

.cmp-body-veld { display: block; padding: 12px 2px; border-bottom: 0; }
.cmp-body-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cmp-body-kop label { flex: 1; }
.cmp-body-kop label { font-size: 0.78rem; color: var(--dim); font-weight: 600; }
.cmp-body {
  width: 100%; font: inherit; font-size: 0.95rem; line-height: 1.55;
  white-space: pre-wrap; min-height: 200px; resize: vertical;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg); color: var(--text); border: 1px solid #2c3a5c;
}
.cmp-body:focus { outline: 0; border-color: var(--accent-2); }
/* Terwijl het model typt staat de body read-only met een accentgloed → zichtbaar "aan het schrijven" */
.cmp-body[readonly] { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12); }
.cmp-acties { position: sticky; bottom: 0; background: #121a29; padding-top: 10px; }
.cmp-status {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card); font-size: 0.88rem; line-height: 1.4;
}

/* ── Verzonden-toestand van het conceptkader (Bram 10-08) ────────────────────────────────
   "Eens je het bericht verstuurt ... moet het kader meteen een nieuwe omlijsting en een andere
   kleur krijgen om aan te duiden dat dit bericht effectief verstuurd is." Tot nu bleef de kaart
   er exact hetzelfde uitzien als een concept dat nog op een beslissing wachtte.
   data-verzonden wordt in app.js pas gezet ná een bevestigd antwoord van de backend; de
   kopstrook die #compose-kaart al reserveerde (padding-top: 34px, voor de ✕-knop) draagt nu ook
   het opschrift, zodat er geen extra DOM voor nodig is. */
#compose-kaart[data-verzonden] {
  border: 2px solid var(--dim); border-radius: 14px;
  background: rgba(143, 160, 187, 0.07); padding: 34px 12px 12px;
}
#compose-kaart[data-verzonden]::before {
  position: absolute; top: 7px; left: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--dim);
}
#compose-kaart[data-verzonden="extern"]::before { content: "✋ Buiten de app afgehandeld"; }
/* Bevestigd verzonden: het groen van een echt verstuurd bericht. Alleen deze toestand krijgt het
   — 'extern' hierboven blijft bewust grijs, want de app heeft niets zien vertrekken. */
#compose-kaart[data-verzonden="app"] {
  border-color: #25d366; background: rgba(37, 211, 102, 0.08);
}
#compose-kaart[data-verzonden="app"]::before { content: "📤 Verzonden"; color: #25d366; }
/* De sticky actiebalk droeg de paneelkleur om scrollende tekst te maskeren; binnen een getint
   kader las die als een grijze reep. In deze toestand rest er enkel nog een statusregel. */
#compose-kaart[data-verzonden] .cmp-acties { background: transparent; }
/* Dezelfde redenering als de toonknoppen: aan een verzonden bericht valt geen veld meer bij te
   sturen, dus verdwijnen ook de veld-microfoons en de alternatieven-dropdowns. */
#compose-kaart[data-verzonden] .cmp-fb,
#compose-kaart[data-verzonden] .cmp-alt { display: none; }

/* Feedback-inspreekbalk boven een veld: toont welk veld je aanpast */
.cmp-fb-hint {
  font-size: 0.78rem; color: var(--accent-2); margin: 2px 0 0; min-height: 0;
}

/* Tab-balk: op desktop tonen we Gesprek/Werkblad + Inbox (Concept zit al in de split, dus die
   tab verschijnt alleen op mobiel). Op mobiel: alle drie. */
#tabs { display: flex; gap: 8px; padding: 8px 16px 0; }
#tab-concept { display: none; }              /* desktop: concept staat al naast het gesprek */
#tabs button {
  flex: 1; padding: 10px; border: 0; border-radius: 12px 12px 0 0; cursor: pointer;
  background: var(--card); color: var(--dim); font-size: 0.9rem; font-weight: 600;
  touch-action: manipulation;
}
#tabs button.actief { background: var(--card-2); color: var(--text); }
.tab-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 0.72rem; font-weight: 700; text-align: center; vertical-align: middle;
}

/* Inbox = full-width tabblad: verbergt de split zodra het actief is (desktop én mobiel) */
/* N4 (07-08): Outlook-indeling — mappen (sidebar) | berichtenlijst | leespaneel | concept.
   Vóór N4 was #inbox één kolom waarin lijst en lezer elkaar afwisselden, en werd #compose in dit
   werkblad HARD VERBORGEN. Dat was de tweede helft van dezelfde constructiefout als bij WhatsApp:
   een mailconcept kon je alleen zien door het werkblad te verlaten. Nu blijft #compose staan; hij
   klapt vanzelf dicht zolang er geen concept is (data-compose="leeg" hierboven), dus de lege
   toestand kost geen breedte. */
#inbox { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0; flex-direction: row; }
#workspace[data-tab="inbox"] main#feed { display: none; }
#workspace[data-tab="inbox"] #inbox { display: flex; }
#inbox-kolom {
  width: 340px; flex-shrink: 0; display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; padding: 12px; border-right: 1px solid var(--border);
}
#inbox-lezer { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 16px; }
#inbox-lezer.hidden { display: none; }
/* In de DOM staat #compose vóór #inbox (het hoorde vroeger bij de gespreksfeed), dus in een
   flex-rij belandde het conceptpaneel tússen de mappen en de berichtenlijst — gevonden bij de
   live-verificatie van N4, gemeten op x=264 waar de lijst hoort te staan. `order` zet het achter
   het leespaneel zonder de DOM te verbouwen, wat de bestaande DOM-traversal in app.js intact laat. */
#workspace[data-tab="inbox"] #compose { order: 2; }
/* WhatsApp = zelfde full-width-patroon als de Inbox (05-08, fase 1).
   W2 (06-08): binnen die volle breedte staan lijst en chat op DESKTOP naast elkaar, zoals
   web.whatsapp.com. Op mobiel blijft het één scherm tegelijk (media query onderaan). */
#whatsapp { display: none; flex: 1 1 100%; min-width: 0; padding: 0; flex-direction: row; overflow: hidden; }
#workspace[data-tab="whatsapp"] main#feed,
#workspace[data-tab="whatsapp"] #compose,
#workspace[data-tab="whatsapp"] #inbox { display: none; }
#workspace[data-tab="whatsapp"] #whatsapp { display: flex; }
/* Linkerkolom: zoekbalk + gesprekkenlijst, eigen scroll (de chat rechts scrollt apart) */
#wa-kolom {
  flex: 0 0 360px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 12px; overflow-y: auto;
}
#wa-lijst { flex: 1 1 auto; }
/* Rechterpaneel: de actieve chat, volledige hoogte (vroeger een max-height:62vh-blokje
   middenin het scherm -- dat leek nergens op een chat-app). */
#wa-lezer { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 12px 16px; overflow: hidden; }
#wa-lezer.hidden { display: none; }
/* Geen gesprek open op desktop: de lijst mag dan de volle breedte nemen i.p.v. een lege kolom
   naast zich te dulden. */
@media (min-width: 901px) {
  #whatsapp[data-open="0"] #wa-kolom { flex: 1 1 100%; border-right: 0; }
  /* N4: zelfde regel voor Mail — zonder geopend bericht neemt de berichtenlijst de volle
     breedte i.p.v. een leeg leespaneel naast zich te dulden. */
  #inbox[data-open="0"] #inbox-kolom { width: auto; flex: 1 1 100%; border-right: 0; }
}
/* Instellingen (06-08): zelfde full-width-patroon, bereikbaar via het tandwiel i.p.v. een tab
   in de sidebar -- daarom géén #tab-instellingen in #tabs, enkel de data-tab-waarde hergebruikt. */
#instellingen { display: none; flex: 1 1 100%; min-width: 0; overflow-y: auto; padding: 16px; flex-direction: column; }
#workspace[data-tab="instellingen"] main#feed,
#workspace[data-tab="instellingen"] #compose,
#workspace[data-tab="instellingen"] #inbox,
#workspace[data-tab="instellingen"] #whatsapp { display: none; }
#workspace[data-tab="instellingen"] #instellingen { display: flex; }
#inst-lijst { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.inst-kanaal {
  padding: 10px 14px; border: 0; border-bottom: 4px solid transparent; cursor: pointer;
  background: var(--card); color: var(--dim); font-weight: 700; font-size: 0.95rem;
  border-radius: 12px 12px 0 0; touch-action: manipulation; min-height: 46px;
}
.inst-kanaal small { display: block; font-weight: 500; opacity: 0.8; font-size: 0.75rem; }
.inst-kanaal.actief { color: var(--text); background: var(--card-2); border-bottom-color: var(--accent-2); }
.inst-kanaal[data-kanaal="zolderpunt"].actief { color: #3b82f6; border-bottom-color: #3b82f6; }
.inst-kanaal[data-kanaal="belhouse"].actief { color: #f59e0b; border-bottom-color: #f59e0b; }
.inst-kanaal[data-kanaal="gmail"].actief { color: #eab308; border-bottom-color: #eab308; }
#inst-paneel { max-width: 640px; }
.inst-uitleg { color: var(--dim); line-height: 1.5; margin-bottom: 12px; }
.inst-verwerk-knop { margin: 10px 0; }
.inst-log { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.inst-log-regel {
  background: var(--card); border-radius: 8px; padding: 8px 12px; font-size: 0.9rem;
}
.inst-log-ok { color: var(--ok); }
.inst-log-fout { color: var(--danger); }
.inst-mailbox-kaart { background: var(--card); border-radius: 12px; padding: 16px; }
.inst-mailbox-kaart h3 { margin: 0 0 6px; }
.inst-mailbox-kaart p { margin: 4px 0; }
.inst-mailbox-kaart .inst-sub { color: var(--dim); font-size: 0.85rem; }
/* Groepsgesprek-import (Bram 06-08: "een groep is geen contact") -- leden staan als info, geen
   klikbare keuzeknoppen, want je kiest de GROEP een naam, niet één van de leden. */
.wa-groep-leden { color: var(--dim); font-size: 0.85rem; margin: 6px 0; }
/* "Meer gesprekken laden" (W0): maakt zichtbaar dat er nog historiek is — vroeger verdwenen
   oudere gesprekken stil zodra de serverkant zijn cap raakte. */
.wa-meer { display: block; width: 100%; margin-top: 12px; }
/* W4 — media in de bubbel. Drie toestanden zijn alle drie zichtbaar (klaar / wordt opgehaald /
   mislukt mét reden): een lege bubbel zou lijken alsof er niets gestuurd is. */
.wa-media { display: block; margin-bottom: 6px; border-radius: 10px; max-width: 100%; }
.wa-media img, .wa-media video { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; }
.wa-media audio { width: 100%; min-width: 220px; }
.wa-media-doc, .wa-media-bezig, .wa-media-fout {
  padding: 10px 12px; background: rgba(255, 255, 255, 0.06); font-size: 0.9rem;
  text-decoration: none; color: var(--text);
}
.wa-media-doc small, .wa-media-fout small { display: block; color: var(--dim); font-size: 0.78rem; margin-top: 2px; }
.wa-media-bezig { color: var(--dim); }
.wa-media-fout { color: var(--warn); }

/* W3 — invoerbalk ÍN de chat (Bram 06-08: "een invoerveld met een spraakfunctie knop ernaast").
   De mic staat links en is bewust de grootste knop: spraak is de primaire invoer, typen de
   gelijkwaardige terugval (REQ-UX-06). Wat hier ingaat wordt een CONCEPT — nooit een direct
   verzonden bericht (canonregel 2). */
.wa-invoer {
  display: flex; gap: 8px; align-items: center; padding: 10px 0 4px;
  border-top: 1px solid var(--border); margin-top: 6px;
}
.wa-invoer input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid #2c3a5c;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; min-height: 46px;
}
.wa-invoer input:focus { outline: 0; border-color: #25d366; }
.wa-mic {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: #25d366; color: #05270f; font-size: 1.35rem; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.wa-mic.actief { background: var(--danger); color: #fff; }
.wa-mic:active { transform: scale(0.93); }
.wa-verstuur {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.15rem; touch-action: manipulation;
}
.wa-verstuur:active { transform: scale(0.93); }

/* W1 — groepsdraad: wie sprak (alleen in groepen; in een 1-op-1 zou dit ruis zijn) en
   datumscheiders, zodat een draad ook in de auto te plaatsen is. */
.wa-auteur {
  font-size: 0.78rem; font-weight: 700; color: var(--accent-2);
  margin-bottom: 3px; letter-spacing: 0.02em;
}
.wa-datum {
  align-self: center; margin: 14px 0 8px; padding: 3px 12px; border-radius: 999px;
  background: var(--card-2); color: var(--dim); font-size: 0.76rem; font-weight: 600;
}
#tabs button .cmp-tab-punt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); margin-left: 6px; vertical-align: middle;
}

/* ── Mobiel: één kolom, tabs sturen welk paneel zichtbaar is ───────────────── */
@media (max-width: 900px) {
  #tabs { display: flex; }
  #tab-concept { display: block; }           /* mobiel: concept is een eigen tabblad */
  #workspace { flex-direction: column; }
  /* #main-col (05-08 herontwerp): neemt op mobiel dezelfde kolomstapeling over die #workspace
     hiervoor rechtstreeks deed -- #sidebar (tabs + evt. mailbox-subtabs) blijft gewoon bovenaan
     staan, exact zoals de vroegere aparte #tabs-rij boven #workspace. */
  #main-col { flex-direction: column; }
  main#feed, #compose { flex: 1 1 auto; }
  #compose { border-left: 0; border-top: 1px solid var(--border); }
  /* standaard toont het gesprek; zodra er een concept is schakelt JS naar 'concept' */
  #workspace[data-tab="gesprek"] #compose { display: none; }
  #workspace[data-tab="concept"] main#feed { display: none; }

  /* W2 — WhatsApp op mobiel: één scherm tegelijk (zoals de WhatsApp-app zelf). De naast-elkaar
     -layout van desktop wordt hier teruggeklapt; `data-open` zegt of er een gesprek open is.
     Bewust CSS en geen JS: zo blijft er één bron van waarheid voor "wat is zichtbaar". */
  #whatsapp { flex-direction: column; padding: 16px; overflow-y: auto; }
  #wa-kolom { flex: 1 1 auto; border-right: 0; padding: 0; overflow: visible; }
  #wa-lezer { padding: 0; overflow: visible; }
  #whatsapp[data-open="1"] #wa-kolom { display: none; }

  /* N4 — Mail op mobiel: exact hetzelfde patroon. Op een autoscherm is er geen plaats voor drie
     panelen naast elkaar; `data-open` zegt of er een bericht open staat. Het conceptpaneel blijft
     op mobiel weg uit dit werkblad — daar schakelt composePaneel al naar de schermvullende
     concept-view (data-tab="concept"), wat op een klein scherm leesbaarder is dan een derde kolom. */
  #inbox { flex-direction: column; padding: 16px; overflow-y: auto; }
  #inbox-kolom { width: auto; flex: 1 1 auto; border-right: 0; padding: 0; overflow: visible; }
  #inbox-lezer { padding: 0; overflow: visible; }
  #inbox[data-open="1"] #inbox-kolom { display: none; }
  #workspace[data-tab="inbox"] #compose { display: none; }

  /* Mobiel conceptscherm: de BERICHTTEKST krijgt minstens 2/3 van het scherm zodat je hem kunt
     lezen en controleren; metadata compact bovenaan, de knoppen scrollen eronder i.p.v. in de weg
     te staan (fix 2026-07-12: "feedbackknoppen zitten in de weg, body te klein"). */
  #workspace[data-tab="concept"] #compose { overflow-y: auto; }
  .cmp-body { min-height: 66vh; }
  .cmp-veld { padding: 6px 2px; }            /* Aan/Onderwerp/Vanuit compacter */
  .cmp-body-veld { padding: 8px 2px; }
  .cmp-acties { position: static; }          /* niet sticky → overlapt de tekst niet meer */

  /* Uitgeklapte quick-actions mogen het gespreksbeeld NIET wegduwen: op mobiel worden ze een
     dismissbare overlay net boven de invoerbalk (fix: "snelle opties blokkeren het gesprek"). */
  #quick-actions:not(.collapsed) {
    position: fixed; left: 0; right: 0; bottom: 84px; z-index: 30;
    max-height: 56vh; overflow-y: auto; margin: 0;
    background: var(--bg); border-top: 1px solid #2c3a5c;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
.msg { max-width: 92%; padding: 12px 16px; border-radius: var(--radius); white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg.brain { align-self: flex-start; background: var(--card); border-bottom-left-radius: 6px; }
.msg .badge {
  display: inline-block; font-size: 0.72rem; padding: 1px 8px; margin-bottom: 6px;
  border-radius: 999px; background: var(--card-2); color: var(--dim);
}
.msg .badge.cache { color: var(--accent-2); }
.msg .badge.mock { color: var(--warn); }
.msg .timing { display: block; margin-top: 8px; font-size: 0.72rem; color: var(--dim); }
.concept-kop {
  font-size: 0.8rem; color: var(--dim); white-space: pre-wrap; margin: 6px 0;
  padding: 6px 10px; border-radius: 8px; background: rgba(45, 212, 191, 0.08);
  border-left: 3px solid var(--accent-2);
}

#quick-actions { padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
/* Hub-rij + submenu's: allebei een grid van grote knoppen (canon H14) */
#qa-hubs, .qa-sub {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.qa.hub.actief { background: var(--accent); color: var(--accent-ink); }
.qa-terug { background: var(--card); color: var(--accent-2); min-height: 44px; font-weight: 700; }
/* Sluit-/terug-knop blijft VAST bovenaan de open weergave (sticky t.o.v. de scrollende kolom),
   zodat je op elke pagina altijd terug kunt zonder eerst naar boven te scrollen. */
.ds-terug, .kaart-sluit, .ibl-terug {
  position: sticky; top: 0; z-index: 6; align-self: flex-start;
  min-height: auto; padding: 8px 14px; margin: 0 0 10px; border: 0; border-radius: 10px;
  background: var(--accent-2); color: #06231d; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Brein-submenu: knoppen met uitlegregel eronder zodat het onderscheid duidelijk is */
.qa-brein { grid-template-columns: 1fr; }
button.qa.uitleg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
}
button.qa.uitleg small { font-weight: 400; font-size: 0.78rem; color: var(--dim); line-height: 1.35; }

/* ── Inbox-tabblad — herkenbaar aan Outlook (kleurbalk/vet-ongelezen/rij-opbouw), maar GROTER
   en tekstARMER: bedoeld om blind/vlot te bedienen tijdens het rijden (Bram 04-08).
   05-08: de aparte "📥 Inbox"-kop (dubbel met het tabblad erboven) is weg; de ververs-knop zit
   nu inline in de subtabs-rij. Padding overal wat krapper zodat meer mailrijen boven de vouw
   passen, zonder onder veilige duim-maten (≥44px) te zakken. */
/* 05-08 herontwerp: #inbox-subtabs verhuisde uit #inbox (dat display:none is buiten het
   Inbox-tabblad) naar de sidebar -- die conditionele zichtbaarheid moet dus nu HIER expliciet,
   anders blijft de mailboxlijst op mobiel zichtbaar in elk tabblad (geverifieerd/gevonden bij
   de browsercheck vóór deploy). Universeel (mobiel én desktop); de @media-blok verderop voegt
   enkel de verticale lijst-opmaak toe voor desktop, dezelfde voorwaarde blijft gelden. */
#inbox-subtabs { display: none; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#workspace[data-tab="inbox"] #inbox-subtabs { display: flex; }
.ibsub {
  flex: 1; padding: 10px 8px; border: 0; border-bottom: 4px solid transparent; cursor: pointer;
  background: var(--card); color: var(--dim); font-weight: 700; font-size: 1rem;
  border-radius: 12px 12px 0 0; touch-action: manipulation; min-height: 46px;
}
/* Verzonden-item onder de actieve mailbox (Bram 05-08, Outlook-boomstructuur): ingesprongen en
   iets kleiner zodat de hiërarchie "account > map" meteen leesbaar is, maar nog altijd een
   volwaardig duimdoelwit (≥44px). Zichtbaarheid stuurt app.js (_telChips).
   Op MOBIEL krijgt het een eigen volle regel (flex-basis 100% + wrap): zo houden de drie
   mailboxknoppen exact de breedte die ze eerder deze sessie kregen -- een vierde knop in
   diezelfde rij zou ze allemaal smaller maken. */
.ibsub.ibsub-map {
  font-size: 0.9rem; font-weight: 600; opacity: 0.85;
  /* eigen volle regel ONDER de mailboxrij: order duwt hem voorbij de drie mailboxknoppen, die
     zo hun oorspronkelijke onderlinge breedte houden (zonder order breekt hij de rij in tweeën) */
  flex: 1 0 100%; order: 99;
}
#inbox-ververs { order: 100; }
#inbox-ververs {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.3rem; touch-action: manipulation;
  align-self: flex-end;
}
/* Sync-knop (Bram 05-08): draaiende ⟳ zolang /inbox/sync loopt -- enige feedback nodig, geen tekst */
#inbox-ververs.syncing { animation: ib-sync-spin 0.8s linear infinite; opacity: 0.7; }
#inbox-ververs:disabled { cursor: default; }
@keyframes ib-sync-spin { to { transform: rotate(360deg); } }
.ibsub .ibsub-n {
  display: inline-block; min-width: 22px; padding: 2px 6px; margin-left: 4px;
  border-radius: 999px; font-size: 0.8rem; color: #10151f; font-weight: 800;
}
.ibsub[data-mb="zolderpunt"] .ibsub-n { background: #3b82f6; }
.ibsub[data-mb="belhouse"]   .ibsub-n { background: #f59e0b; }
.ibsub[data-mb="gmail"]      .ibsub-n { background: #eab308; }
.ibsub.actief[data-mb="zolderpunt"] { color: #3b82f6; border-bottom-color: #3b82f6; background: var(--card-2); }
.ibsub.actief[data-mb="belhouse"]   { color: #f59e0b; border-bottom-color: #f59e0b; background: var(--card-2); }
.ibsub.actief[data-mb="gmail"]      { color: #eab308; border-bottom-color: #eab308; background: var(--card-2); }
/* De actieve mailboxkleur kleurt ook de linkerbalk van de mailrijen (Outlook's categoriebalk) */
#inbox[data-mb="zolderpunt"] .ib-rij { border-left-color: #3b82f6; }
#inbox[data-mb="belhouse"]   .ib-rij { border-left-color: #f59e0b; }
#inbox[data-mb="gmail"]      .ib-rij { border-left-color: #eab308; }

/* ── Desktop/auto-browser (≥901px): linker navigatiekolom (05-08 herontwerp, Bram-bestek) ───
   #tabs en #inbox-subtabs zijn dezelfde elementen als hierboven (geen andere id's/handlers) --
   hier krijgen ze enkel een verticale lijst-opmaak i.p.v. horizontale pillen, en krijgt #sidebar
   zijn kolombreedte/achtergrond.
   BELANGRIJK (les uit de pincode-cascadebug van 04-08): dit blok moet NA de bovenstaande
   basisregels voor #inbox-subtabs/.ibsub staan. Bij gelijke CSS-specificiteit wint de LAATSTE
   regel in het bestand ongeacht de media query -- stond dit blok vóór de basisregels (zoals de
   eerste versie), dan overschreef de onvoorwaardelijke "#inbox-subtabs{display:flex}" verderop
   alsnog de "display:none" hier, en bleef de mailboxlijst zichtbaar buiten het Inbox-tabblad.
   Numeriek geverifieerd in de browser vóór deploy (zie verificatiestap). */
@media (min-width: 901px) {
  #sidebar {
    width: 264px; background: var(--nav-bg); border-right: 1px solid var(--border);
    padding: 16px 12px; overflow-y: auto; gap: 2px;
  }
  #tabs { flex-direction: column; gap: 2px; padding: 0; }
  #tabs button {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    text-align: left; border-radius: 12px; padding: 13px 14px;
    border-left: 3px solid transparent; font-size: 0.95rem;
  }
  #tabs button.actief { border-left-color: var(--accent); }
  /* Zichtbaarheid (enkel tijdens het Inbox-tabblad) komt al van de basisregel hierboven --
     hier enkel de verticale lijst-opmaak voor desktop. */
  #inbox-subtabs {
    flex-direction: column; gap: 2px;
    margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .ibsub {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    text-align: left; border-radius: 12px; border-bottom: 0;
    border-left: 3px solid transparent; padding: 12px 14px; min-height: 0;
  }
  /* Verzonden-item ingesprongen onder zijn mailbox (desktop/auto: verticale boomstructuur).
     flex expliciet terug op none: de mobiele "eigen regel"-regel (.ibsub.ibsub-map) heeft een
     hogere specificiteit dan .ibsub hierboven en zou anders ook hier gelden. */
  .ibsub.ibsub-map { flex: none; order: 0; margin-left: 14px; padding: 10px 14px; }
  #inbox-ververs { order: 0; }
  /* Kleurcode per mailbox blijft behouden (04-08: herkenning tijdens het rijden) -- verhuisd van
     de onderrand (horizontale pil) naar de linkerrand (verticale lijst), zelfde 3 hexwaarden. */
  .ibsub.actief[data-mb="zolderpunt"] { border-left-color: #3b82f6; background: var(--card-2); }
  .ibsub.actief[data-mb="belhouse"]   { border-left-color: #f59e0b; background: var(--card-2); }
  .ibsub.actief[data-mb="gmail"]      { border-left-color: #eab308; background: var(--card-2); }
  #inbox-ververs { align-self: flex-end; margin-top: 4px; }
}

/* Bulk-opdrachtbalk in de inbox. Mic-knop staat in de HTML vóór het invoerveld (armafstand,
   Bram 05-08) -- flex volgt gewoon de brondocument-volgorde, geen aparte order-regel nodig. */
#inbox-bulk { display: flex; gap: 6px; margin-bottom: 8px; }
#inbox-bulk-input {
  flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid #2c3a5c;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; min-height: 44px;
}
#inbox-bulk-input:focus { outline: 0; border-color: var(--accent-2); }
#inbox-bulk-mic, #inbox-bulk-go {
  width: 44px; flex-shrink: 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.2rem; touch-action: manipulation;
}
#inbox-bulk-mic.actief { background: var(--danger); color: #fff; }

/* Zoekbalk (04-08): tikken of inspreken, over de VOLLEDIGE mailbox-historiek. Mic-knop links,
   zelfde armafstand-reden. */
#inbox-zoek { display: flex; gap: 6px; margin-bottom: 8px; }
#inbox-zoek-input {
  flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid #2c3a5c;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; min-height: 44px;
}
#inbox-zoek-input:focus { outline: 0; border-color: var(--accent-2); }
#inbox-zoek-mic, #inbox-zoek-wis {
  width: 44px; flex-shrink: 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.2rem; touch-action: manipulation;
}
#inbox-zoek-mic.actief { background: var(--danger); color: #fff; }

/* Rijen: groter, minder tekst zichtbaar per rij (geen snippet meer op het eerste scherm — tik om
   te openen), duidelijke Outlook-achtige signalen: dikke kleurbalk + ongelezen-stip + vet. */
.ib-rij {
  padding: 16px; border-radius: 14px; background: var(--card); cursor: pointer;
  margin-bottom: 8px; border-left: 5px solid var(--accent-2); min-height: 88px;
  display: flex; flex-direction: column; justify-content: center;
}
.ib-rij:active { transform: scale(0.99); background: var(--card-2); }
.ib-rij.gelezen { border-left-color: #2c3a5c; }
.ib-rij.gelezen .ib-van, .ib-rij.gelezen .ib-onderwerp { font-weight: 500; color: var(--dim); }
.ib-stip {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-2); flex-shrink: 0;
}
.ib-rij.gelezen .ib-stip { visibility: hidden; }   /* ruimte blijft staan → geen springende tekst */
.ib-kop { display: flex; align-items: center; gap: 10px; }
.ib-van { font-weight: 700; font-size: 1.02rem; }
.ib-richting { font-size: 0.95rem; }
.ib-bijlage { font-size: 0.9rem; }
.ib-tijd { margin-left: auto; font-size: 0.8rem; color: var(--dim); flex-shrink: 0; }
.ib-onderwerp {
  font-weight: 700; margin: 4px 0 0; font-size: 0.98rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Snippet bewust WEG uit de standaardrij (04-08: "te veel tekst") — de kop volstaat om te
   herkennen; volledige inhoud zie je in de lezer op één tik.
   06-08 (frontend-audit): deze regel stond ONGESCOPED en verborg daardoor óók de uitleg in de
   verwijder-bevestiging (.ib-confirm) en de voorbeeldmails in de bulk-preview (.ib-bulk-preview)
   — Bram kreeg daar dus "Bevestig bulkactie" + "✓ Zet N op gelezen" ZONDER te zien waarover hij
   besliste. Nu enkel de directe rij-snippet verbergen; elders is de snippet gewoon leesbaar. */
.ib-rij > .ib-snippet { display: none; }
.ib-snippet { font-size: 0.9rem; color: var(--dim); line-height: 1.45; margin-top: 6px; }
.ib-leeg { color: var(--dim); text-align: center; padding: 30px; font-size: 1rem; }

/* Per-rij snelacties: grote ronde ICOON-knoppen zonder tekst (04-08: "te veel tekst, te kleine
   knoppen") — herkenbaar genoeg via het icoon, 48px is een echte duimdoelwit-maat. */
.ib-acties { display: flex; gap: 10px; margin-top: 12px; }
.ib-actie-btn {
  width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--card-2);
  color: var(--text); font-size: 1.3rem; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.ib-actie-btn.verwijder { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
.ib-actie-btn:active { transform: scale(0.92); }
/* Bevestigingspopup vóór echt verwijderen */
.ib-confirm {
  padding: 14px; border-radius: 12px; background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--danger); margin-bottom: 10px; font-size: 0.95rem;
}
.ib-bulk-preview {
  padding: 12px 14px; border-radius: 12px; background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--accent-2); margin-bottom: 10px;
}
/* Lezer (één mail open) */
#inbox-lezer .ibl-kop { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
#inbox-lezer .ibl-meta { font-size: 0.8rem; color: var(--dim); margin-bottom: 12px; }
#inbox-lezer .ibl-tekst {
  white-space: pre-wrap; line-height: 1.55; background: var(--card);
  padding: 14px; border-radius: 12px; margin-bottom: 12px;
}
#inbox-lezer .ibl-geciteerd { border-left: 3px solid #2c3a5c; padding-left: 12px; color: var(--dim); font-size: 0.85rem; white-space: pre-wrap; }
#inbox-lezer .ibl-bijlagen {
  font-size: 0.9rem; margin-bottom: 12px; padding: 10px 14px;
  background: var(--card); border-radius: 12px;
}
#inbox-lezer .ibl-bijlage-link {
  background: transparent; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
/* Bijlage-modal (Bram 04-08): vervangt target="_blank" -- blijft in hetzelfde tabblad, essentieel
   op de autobrowser waar een nieuw tabblad de hele app-sessie liet verdwijnen. */
.bijlage-modal {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column; padding: 14px;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.bijlage-modal-kop { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 6px 2px 12px; }
.bijlage-modal-kop b {
  flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bijlage-modal-dl, .bijlage-modal-sluit {
  background: var(--card-2); color: var(--text); border: 0; border-radius: 10px;
  padding: 10px 16px; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  text-decoration: none; flex-shrink: 0; touch-action: manipulation;
}
.bijlage-modal-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: auto; background: var(--card); border-radius: var(--radius);
}
.bijlage-modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bijlage-modal-body iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
button.qa, #choice-row button {
  padding: 16px 12px; border: 0; border-radius: var(--radius);
  background: var(--card-2); color: var(--text);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  min-height: 56px; touch-action: manipulation;
}
button.qa:active, #choice-row button:active { transform: scale(0.97); background: #2c3a5c; }

#choice-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
#choice-row button { flex: 1 1 28%; }
#choice-row button.primary { background: var(--accent); color: var(--accent-ink); }
.hidden { display: none !important; }

/* Denk-animatie: drie pulserende bollen zolang er nog een antwoord onderweg is */
.denken { display: flex; align-items: center; gap: 5px; padding: 4px 0; color: var(--dim); }
.denken span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2);
  animation: denkpuls 1.2s infinite ease-in-out;
}
.denken span:nth-child(2) { animation-delay: 0.15s; }
.denken span:nth-child(3) { animation-delay: 0.3s; }
.denken em { font-style: normal; font-size: 0.85rem; margin-left: 6px; }
@keyframes denkpuls { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-row button {
  padding: 12px 16px; border: 0; border-radius: 12px; background: var(--card-2);
  color: var(--text); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  min-height: 48px; touch-action: manipulation;
}
.btn-row button.approve { background: var(--ok); color: #032b12; }
.btn-row button.reject { background: var(--danger); color: #3b0505; }
.tool-status { font-size: 0.78rem; color: var(--dim); font-style: italic; margin-top: 6px; }
.warn-card {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(242, 169, 60, 0.15); border: 1px solid var(--warn);
  font-size: 0.85rem;
}
.edit-area {
  width: 100%; min-height: 140px; margin-top: 10px; padding: 12px;
  border-radius: 12px; border: 1px solid #2c3a5c; background: var(--bg);
  color: var(--text); font: inherit;
}

/* Correspondenten-tabel: zoekbalk + rijen (tik een rij = concept naar dat contact) */
.corr-zoek {
  width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #2c3a5c; background: var(--bg); color: var(--text); font-size: 0.95rem;
}
.corr-zoek:focus { outline: 0; border-color: var(--accent-2); }
.corr-lijst { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.corr-rij {
  padding: 8px 10px; border-radius: 10px; background: var(--card-2); cursor: pointer;
  border: 1px solid transparent; touch-action: manipulation;
}
.corr-rij:active, .corr-rij:hover { border-color: var(--accent-2); }
.corr-hoofd { font-size: 0.92rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.corr-rel {
  margin-left: auto; font-size: 0.72rem; padding: 1px 8px; border-radius: 999px;
  background: rgba(45, 212, 191, 0.14); color: var(--accent-2); white-space: nowrap;
}
.corr-adres { font-size: 0.8rem; color: var(--dim); margin-top: 2px; word-break: break-word; }
.corr-ond {
  font-size: 0.78rem; color: var(--dim); margin-top: 3px; opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.corr-leeg { color: var(--dim); font-size: 0.85rem; padding: 8px 0; }

/* Live spraak-HUD: toont in één oogopslag of je stem gehoord/verwerkt wordt.
   De orb pulseert mee met je stem (JS zet scale in 'luisteren'); kleur = toestand. */
.voice-hud {
  display: flex; align-items: center; gap: 14px;
  margin: 0 16px 8px; padding: 12px 16px;
  border-radius: var(--radius); background: var(--card); border: 1px solid #2c3a5c;
}
.voice-hud .vh-orb {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--ok);
  will-change: transform; transition: background 0.25s;
}
.voice-hud .vh-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.voice-hud .vh-label { font-size: 0.9rem; font-weight: 600; }
.voice-hud .vh-live {
  font-size: 0.85rem; color: var(--dim); min-height: 1.15em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-hud[data-staat="luisteren"] .vh-orb { background: var(--ok); }
.voice-hud[data-staat="luisteren"][data-hoort="1"] .vh-orb {
  background: var(--accent-2); box-shadow: 0 0 0 7px rgba(45, 212, 191, 0.18);
}
.voice-hud[data-staat="verwerken"] .vh-orb,
.voice-hud[data-staat="herverbinden"] .vh-orb {
  background: var(--warn); animation: vh-puls-amber 1s ease-in-out infinite;
}
.voice-hud[data-staat="spreken"] .vh-orb {
  background: #60a5fa; animation: vh-puls-blauw 1s ease-in-out infinite;
}
@keyframes vh-puls-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 169, 60, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(242, 169, 60, 0); }
}
@keyframes vh-puls-blauw {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(96, 165, 250, 0); }
}

/* ── WhatsApp-sectie (05-08, fase 1) — spiegel van de WhatsApp-app: gesprekkenlijst per contact,
   ongelezen bovenaan, tikken opent de draad. Hergebruikt .ib-rij/.ibl-* voor identieke bediening
   in de auto; enkel de chatbubbels zijn nieuw. WhatsApp-groen als kanaalkleur, zoals de mailboxen
   elk hun eigen kleur hebben. */
#wa-zoek { display: flex; gap: 6px; margin-bottom: 8px; }
#wa-zoek-input {
  flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid #2c3a5c;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; min-height: 44px;
}
#wa-zoek-input:focus { outline: 0; border-color: #25d366; }
#wa-zoek-mic, #wa-zoek-wis {
  width: 44px; flex-shrink: 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.2rem; touch-action: manipulation;
}
#wa-zoek-mic.actief { background: var(--danger); color: #fff; }
/* W5 — "Nieuw gesprek": zelfde knopmaat als de zoek-acties ernaast, groen zoals de rest van het
   WhatsApp-werkblad (kanaalkleur, zie de opmerking bovenaan dit blok). */
#wa-nieuw-btn {
  width: 44px; flex-shrink: 0; border-radius: 12px; border: 0; cursor: pointer;
  background: #25d366; color: #05270f; font-size: 1.3rem; font-weight: 700; touch-action: manipulation;
}
#wa-nieuw-paneel { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
#wa-nieuw-zoek { display: flex; gap: 6px; }
#wa-nieuw-zoek-input {
  flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid #2c3a5c;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; min-height: 44px;
}
#wa-nieuw-zoek-input:focus { outline: 0; border-color: #25d366; }
#wa-nieuw-sluit {
  width: 44px; flex-shrink: 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--text); font-size: 1.1rem; touch-action: manipulation;
}
#wa-nieuw-lijst { flex: 1 1 auto; overflow-y: auto; }
.ib-rij.wa-rij { border-left-color: #25d366; }
.ib-rij.wa-rij.gelezen { border-left-color: #2c3a5c; }
/* Ongelezen-teller per gesprek, zoals het groene bolletje in WhatsApp zelf */
.wa-teller {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #25d366;
  color: #05270f; font-size: 0.78rem; font-weight: 800; text-align: center;
}
/* W2: de draad vult het rechterpaneel volledig en scrollt zelf — geen max-height:62vh-blokje
   meer middenin het scherm (dat las als een uitklapper, niet als een chat). */
.wa-draad { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 10px; }
.wa-bubbel {
  max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 0.95rem; line-height: 1.45;
}
.wa-bubbel.in { align-self: flex-start; background: var(--card); border-bottom-left-radius: 5px; }
.wa-bubbel.uit { align-self: flex-end; background: rgba(37, 211, 102, 0.16); border-bottom-right-radius: 5px; }
.wa-bubbel .wa-tekst { white-space: pre-wrap; word-break: break-word; }
.wa-bubbel .wa-tijd { font-size: 0.7rem; color: var(--dim); margin-top: 4px; text-align: right; }

/* Scope-chip (CDR-2026-02, fase 1): "je praat over deze mail" -- direct boven de voetbalk. */
#scope-chip {
  margin: 0 16px 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(23, 166, 152, 0.12); border: 1px solid var(--accent);
  color: var(--accent-2); font-size: 0.82rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
#scope-chip::before { content: "↩️"; flex-shrink: 0; }
#scope-chip .scope-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

footer {
  display: flex; gap: 10px; padding: 12px 16px 18px; align-items: center;
  border-top: 1px solid var(--border);
}
#qa-toggle {
  width: 52px; height: 52px; border-radius: 50%; border: 0; font-size: 1.25rem;
  background: var(--card-2); color: var(--text); cursor: pointer; flex-shrink: 0;
  touch-action: manipulation;
}
#qa-toggle.actief { background: var(--accent); color: var(--accent-ink); }
#quick-actions.collapsed { display: none !important; }
#mic {
  width: 64px; height: 64px; border-radius: 50%; border: 0; font-size: 1.6rem;
  background: var(--accent); cursor: pointer; flex-shrink: 0; touch-action: manipulation;
}
#mic.recording { background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(248,113,113,0.25); } }
#ask-input {
  flex: 1; padding: 14px 16px; border-radius: var(--radius); border: 1px solid #2c3a5c;
  background: var(--card); color: var(--text); font-size: 1rem; min-width: 0;
}
#send {
  width: 52px; height: 52px; border-radius: 50%; border: 0; font-size: 1.15rem;
  background: var(--accent-2); color: #00251f; cursor: pointer; flex-shrink: 0;
}

/* ── Sprint D2: pauzeknop in de spraak-HUD (U9) + inline adresveld (U4) ─────── */
.vh-pauze {
  border: 0; background: var(--card-2); color: var(--text); border-radius: 10px;
  font-size: 1.1rem; padding: 8px 12px; cursor: pointer; flex-shrink: 0;
  touch-action: manipulation;
}
.vh-pauze:active { transform: scale(0.92); }

/* Sprint V1 (spraak-betrouwbaarheid): bevestig/wis de lopende zin zonder het gesprek te stoppen */
.vh-bevestig, .vh-wis {
  border: 0; border-radius: 10px; font-size: 1.15rem; font-weight: 700;
  padding: 8px 14px; cursor: pointer; flex-shrink: 0; touch-action: manipulation;
}
.vh-bevestig { background: var(--ok); color: #032b12; }
.vh-wis { background: var(--card-2); color: var(--danger); }
.vh-bevestig:active, .vh-wis:active { transform: scale(0.92); }
.cmp-adres-invoer {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid #33405f; background: var(--card-2);
  color: var(--text); font-size: 1rem;
}

/* Sprint C3: afgeleid-veld-markering in de correspondententabel (canonregel 6) */
.corr-afgeleid { border-bottom: 1px dotted var(--dim); cursor: help; }

/* Sprint C5-C7: contactdossier-scherm (rijk contact, corrigeerbare velden, zelf-analyse) */
.ds-kaart { border-left: 3px solid var(--accent-2); }
.ds-kop { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.ds-veld { display: flex; align-items: center; gap: 8px; padding: 5px 0; flex-wrap: wrap; }
.ds-label { color: var(--dim); min-width: 92px; font-size: 0.9rem; }
.ds-waarde { font-weight: 500; }
.ds-edit, .ds-opslaan, .ds-annuleer {
  border: 0; background: var(--card-2); color: var(--text); border-radius: 8px;
  padding: 3px 8px; cursor: pointer; font-size: 0.95rem;
}
.ds-opslaan { background: var(--ok); color: #00251f; }
.ds-annuleer { background: var(--danger); color: #2a0b0b; }
.ds-invoer {
  flex: 1; min-width: 140px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid #33405f; background: var(--card-2); color: var(--text); font-size: 0.95rem;
}
.ds-chip { font-size: 0.72rem; padding: 1px 6px; border-radius: 999px; }
.ds-afg { background: rgba(143, 160, 187, 0.2); color: var(--dim); }
.ds-ok { background: rgba(74, 222, 128, 0.18); color: var(--ok); }
.ds-blok { margin: 8px 0; }
.ds-blok-t { color: var(--dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.ds-mini { color: var(--dim); font-size: 0.78rem; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ds-tag { background: var(--card-2); border-radius: 6px; padding: 2px 7px; font-size: 0.82rem; }
.ds-relcontact { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.ds-relcontact:hover { background: var(--card-2); }
.ds-dup { margin-top: 10px; padding: 8px; border-radius: 10px; background: rgba(242, 169, 60, 0.1); }
.ds-bewijs { color: var(--dim); font-size: 0.82rem; margin-top: 4px; }
.ds-overmoedig { border-left: 3px solid var(--danger); }

/* ── Demomodus (07-08) ──────────────────────────────────────────────────────────
   Balk onder de header, alleen zichtbaar met ?demo=1. Bewust in --warn i.p.v. --accent:
   een demo mag nooit te verwarren zijn met de gewone werkstand, zeker niet op een opname
   die naar Meta gaat. */
#demo-balk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: rgba(242, 169, 60, 0.12);
  border-bottom: 1px solid var(--warn); color: var(--text);
}
#demo-balk.hidden { display: none; }
.demo-tag {
  background: var(--warn); color: #2a1a02; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap;
}
#demo-stap { flex: 1; min-width: 180px; font-size: 0.92rem; }
#demo-start {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
  padding: 8px 14px; font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
#demo-start:disabled { opacity: 0.55; cursor: default; }
#demo-sluit {
  background: transparent; color: var(--dim); border: 0;
  font-size: 1.05rem; cursor: pointer; padding: 4px 6px;
}

/* ── N2/N3 (07-08): opdracht, breinantwoord en concept IN de WhatsApp-draad ─────────────
   Bram: "ofwel ga ik naar whatsapp en is al mijn input en de output whatsapp-gerelateerd".
   Wat hij typt is een OPDRACHT, geen verzonden bericht — die mag dus nooit als uitgaande
   bubbel lezen, anders lijkt het alsof er al iets weg is. Vandaar gecentreerd en gedempt,
   zoals de datumscheider. Het breinantwoord is een inkomende bubbel met een eigen kleur, zodat
   het niet te verwarren is met een bericht van de klant. */
.wa-opdracht {
  align-self: center; max-width: 88%; text-align: center; color: var(--dim);
  font-size: 0.82rem; font-style: italic; padding: 4px 10px;
}
.wa-bubbel.wa-brein {
  background: rgba(23, 166, 152, 0.12); border: 1px solid rgba(23, 166, 152, 0.35);
  color: var(--text);
}
/* Het concept: waar het echte bericht zou komen, maar zichtbaar nog NIET verzonden — vandaar
   de streepjesrand. Die blijft staan tot de gate hem vrijgeeft. */
.wa-bubbel.wa-concept {
  background: rgba(37, 211, 102, 0.09); border: 1px dashed var(--accent);
  display: flex; flex-direction: column; gap: 7px; max-width: 88%;
}
.wa-concept-label {
  font-size: 0.72rem; font-weight: 600; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.wa-concept-tekst {
  width: 100%; min-height: 44px; resize: vertical; overflow: hidden;
  background: transparent; border: 0; padding: 0; color: var(--text);
  font: inherit; line-height: 1.45; white-space: pre-wrap;
}
.wa-concept-tekst:focus { outline: none; }
.wa-concept-tekst:not([readonly]) {
  background: var(--card-2); border-radius: 8px; padding: 8px; overflow: auto;
}
.wa-concept-acties .btn-row { flex-wrap: wrap; gap: 6px; }
.wa-concept-acties button { font-size: 0.86rem; padding: 8px 12px; }
/* Verzonden (Bram 10-08): de streepjesrand stond er nog nadat het bericht al weg was, mét het
   label "Concept — nog niet verzonden" eronder. Nu wisselt de bubbel van idioom: volle rand en de
   gevulde kleur van een echt uitgaand bericht, precies waar dat bericht in de draad hoort. */
.wa-bubbel.wa-concept[data-verzonden="app"] {
  background: rgba(37, 211, 102, 0.24); border: 1px solid #25d366;
}
.wa-bubbel.wa-concept[data-verzonden="app"] .wa-concept-label { color: #25d366; }
/* Buiten de app afgehandeld is géén bevestigde verzending — de app zag niets vertrekken en de
   draft staat op 'extern_afgehandeld', niet op 'verzonden'. Vandaar een neutrale, gedempte rand
   in plaats van hetzelfde groen (canonregel 2: nooit een valse "verzonden" tonen). */
.wa-bubbel.wa-concept[data-verzonden="extern"] {
  background: var(--card); border: 1px solid var(--dim);
}
.wa-bubbel.wa-concept[data-verzonden="extern"] .wa-concept-label { color: var(--dim); }