/* AIDA Portal, huisstijl DEPLOY Consultancy.
 *
 * Kleuren rechtstreeks uit de logo's gehaald:
 *   paars      #a8489c  (de "consultancy" in het DEPLOY-logo)
 *   lichtblauw #24c0d8  (de bovenste haak in het DEPLOY-logo)
 *   navy       #245490  (de letters DEPLOY)
 *   slate      #485460  (de letters AIDA)
 *
 * Paars draagt de interface, lichtblauw is het accent ernaast. Lichtblauw
 * haalt op wit maar een contrast van 2,2 en is dus nooit tekstkleur: het zit
 * in randen, iconen en verlopen.
 */

:root {
  --paars: #a8489c;
  --paars-donker: #8d3b84;
  --paars-zacht: #f7ecf5;
  --lichtblauw: #24c0d8;
  --lichtblauw-zacht: #e7f8fb;
  --navy: #245490;

  --accent: var(--paars);
  --verloop: linear-gradient(135deg, var(--lichtblauw) 0%, var(--paars) 100%);

  --tekst: #3a4450;
  --tekst-zacht: #6b7683;
  --achtergrond: #f7f8fa;
  --paneel: #ffffff;
  --rand: #e3e7ec;
  --bubbel-eigen: var(--paars);
  --bubbel-eigen-tekst: #ffffff;
  --fout: #a4262c;
  --radius: 12px;
  --schaduw: 0 1px 3px rgba(36, 84, 144, .10);

  /* De portal is altijd licht, ook op een telefoon die op donker staat.
     Zonder deze regel maakt de browser invoervelden en schuifbalken alsnog
     donker, en dan klopt het beeld niet meer met wat op de laptop staat. */
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: Aptos, Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Logo's ---------- */

.aida-logo { display: block; height: auto; }
/* Het volledige logo alleen groot gebruiken: op klein formaat valt de regel
   "Your AI-powered DEPLOY Assistant" weg in een grijze veeg. Elders het
   icoon plus een woordmerk in tekst. */
.aida-logo.groot { width: 240px; max-width: 100%; margin: 0 0 6px; }

.woordmerk {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--navy);
}

.aida-icoon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
}
.aida-icoon.groot { width: 64px; height: 64px; }

.deploy-logo {
  width: 46px;
  height: auto;
  opacity: .9;
}

/* ---------- Inlogpagina ---------- */

.login-pagina {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(900px 420px at 15% -10%, var(--lichtblauw-zacht), transparent 70%),
    radial-gradient(800px 420px at 110% 110%, var(--paars-zacht), transparent 70%),
    var(--achtergrond);
}

/* Twee kolommen op een laptop: links het merk en de uitleg, rechts het
   formulier. Onder 860px klapt hij terug naar een kolom voor de telefoon. */
.login-kaart {
  position: relative;
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  overflow: hidden;
  text-align: left;
}

.login-intro {
  padding: 40px 36px;
  background:
    radial-gradient(520px 320px at 0% 0%, var(--lichtblauw-zacht), transparent 72%),
    radial-gradient(420px 320px at 100% 100%, var(--paars-zacht), transparent 72%),
    var(--paneel);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
}

.login-formulier { padding: 40px 36px; }

.login-formulier h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
.formulier-uitleg {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--tekst-zacht);
}

.login-punten {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--tekst-zacht);
}
.login-punten li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.login-punten li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verloop);
}

/* Het verloop uit het AIDA-logo als bandje bovenlangs */
.login-kaart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--verloop);
  z-index: 1;
}

.merk-onder {
  margin: 0 0 18px;
  color: var(--tekst-zacht);
  font-size: 13px;
}

.uitleg {
  color: var(--tekst-zacht);
  font-size: 14px;
  margin: 0 0 20px;
  text-align: left;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--navy);
  text-align: left;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: inherit;
  font-size: 15px;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--paars);
  outline-offset: 1px;
}

.login-kaart button[type="submit"] {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--paars);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-kaart button[type="submit"]:hover { background: var(--paars-donker); }

.foutmelding {
  background: var(--paars-zacht);
  border-left: 3px solid var(--fout);
  color: var(--fout);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0 0 16px;
  text-align: left;
}

.voet {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--tekst-zacht);
  text-align: left;
}
.voet.klein { font-size: 11px; margin-top: 10px; }

/* De bewaarregels staan bewust niet in de kleine lettertjes: wie inlogt moet
   ze gezien hebben, vooral de 48 uur voor documenten. */
.bewaarregels {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--lichtblauw);
  border-radius: 8px;
  background: var(--lichtblauw-zacht);
  font-size: 12.5px;
  color: var(--tekst);
  text-align: left;
}
.bewaarregels-kop {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--navy);
}
.bewaarregels ul { margin: 0; padding-left: 18px; }
.bewaarregels li { margin-bottom: 4px; }
.bewaarregels-voet { margin: 8px 0 0; color: var(--tekst-zacht); }

.afzender {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 12px;
  color: var(--tekst-zacht);
}

/* ---------- Chatraamwerk ---------- */

.chat-pagina { overflow: hidden; }

.raamwerk {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: 100vh;
  height: 100dvh;
}

.zijbalk {
  background: var(--paneel);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* De afzender staat bovenaan de zijbalk. Het AIDA-logo staat al in de kop
   van het gesprek ernaast, dus een tweede keer hier kost alleen ruimte in de
   gesprekkenlijst. */
.zijbalk-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 12px;
}
/* Het logo is bijna vierkant, dus breedte bepaalt hier de hoogte van de kop.
   Op 88 pixels is de regel "Training & Coaching" nog leesbaar en houdt de
   gesprekkenlijst ruimte over. */
.zijbalk-kop .deploy-logo { width: 88px; opacity: 1; }
.zijbalk-sluit { display: none; margin-left: auto; }

.nieuw-knop {
  margin: 0 16px 12px;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: transparent;
  color: var(--tekst);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.nieuw-knop:hover { background: var(--paars-zacht); border-color: var(--paars); }

.gesprekken {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
  min-height: 0;
}

/* Kopje per periode, zodat de lijst niet een lange rij losse titels wordt. */
.gesprek-groep {
  margin: 14px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.gesprek-groep:first-child { margin-top: 2px; }

.gesprek-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  border-radius: 8px;
  position: relative;
}
.gesprek-item:hover { background: var(--paars-zacht); }
.gesprek-item.actief { background: var(--paars-zacht); }
.gesprek-item.actief::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--paars);
}

.gesprek-item .titel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 4px 8px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--tekst-zacht);
}
.gesprek-item.actief .titel { color: var(--navy); }
.gesprek-naam {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gesprek-item.actief .gesprek-naam { font-weight: 600; }
.gesprek-tijd { font-size: 11px; color: var(--tekst-zacht); }

.gesprek-item .wissen {
  opacity: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: opacity .12s, color .12s, background .12s;
}
.gesprek-item:hover .wissen { opacity: 1; }
.gesprek-item .wissen:focus-visible { opacity: 1; }
.gesprek-item .wissen:hover { background: #fff; color: var(--fout); }

.gesprekken-leeg {
  margin: 10px;
  font-size: 13px;
  color: var(--tekst-zacht);
}

.zijbalk-voet {
  border-top: 1px solid var(--rand);
  padding: 14px 16px;
}

/* Naam, niveau en nummer als een kaartje, zodat de voet niet een losse
   stapel regels is. */
.deelnemer-kaart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--achtergrond);
}
.deelnemer-tekst { display: flex; flex-direction: column; min-width: 0; }
.avatar.klein {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--paars-zacht);
  color: var(--paars-donker);
  border: 1px solid var(--rand);
}
.deelnemer {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.niveau-label { margin: 0; font-size: 12px; color: var(--tekst-zacht); }
.deelnemersnummer {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--tekst-zacht);
  font-variant-numeric: tabular-nums;
}

.uitlog {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: transparent;
  color: var(--tekst-zacht);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.uitlog:hover {
  border-color: var(--paars);
  background: var(--paars-zacht);
  color: var(--paars-donker);
}
/* ---------- Gesprek ---------- */

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

.gesprek-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rand);
  background: var(--paneel);
}
.gesprek-kop h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.niveau-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paars-zacht);
  color: var(--navy);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 4px 14px 4px 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
/* Het beltschild draagt de kleur van het niveau. De naam staat ernaast, dus
   de kleur is nooit de enige drager. */
.belt { width: 32px; height: 32px; display: block; }

.icoonknop {
  display: none;
  border: 0;
  background: transparent;
  color: var(--tekst);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.berichten {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 8px;
  scroll-behavior: smooth;
}

/* De rij is breed, de bubbel groeit mee met zijn inhoud. Een kort antwoord
   blijft dus smal, een antwoord met een tabel mag de hele breedte pakken.
   Jouw eigen vraag staat rechts, het antwoord links: niet allebei in een
   smalle kolom in het midden. */
.bericht {
  max-width: 1120px;
  margin: 0 auto 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bericht .avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.bericht.eigen { flex-direction: row-reverse; }
.bericht.eigen .avatar {
  background: var(--paars-zacht);
  color: var(--paars-donker);
  border: 1px solid var(--rand);
}
.bericht .avatar img { width: 100%; height: 100%; object-fit: contain; }

.bubbel {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--paneel);
  border: 1px solid var(--rand);
  min-width: 0;
  max-width: calc(100% - 44px);
  /* break-word en niet anywhere: anders knipt de browser gewone woorden
     zoals "Probleemstelling" middenin af zodra een tabelkolom krap wordt. */
  overflow-wrap: break-word;
}
.bericht.eigen .bubbel {
  background: var(--bubbel-eigen);
  border-color: var(--bubbel-eigen);
  color: var(--bubbel-eigen-tekst);
  /* Een vraag is kort. Hem niet laten uitdijen houdt het gesprek leesbaar. */
  max-width: min(70%, 680px);
}

.bubbel p:first-child { margin-top: 0; }
.bubbel p:last-child { margin-bottom: 0; }
.bubbel h2, .bubbel h3 { font-size: 16px; margin: 16px 0 6px; color: var(--navy); }
.bubbel ul, .bubbel ol { margin: 8px 0; padding-left: 22px; }
.bubbel li { margin: 3px 0; }
.bubbel li::marker { color: var(--paars); }
.bubbel code {
  background: var(--lichtblauw-zacht);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14px;
}
.bubbel pre {
  background: var(--lichtblauw-zacht);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
}
/* Een tabel die toch te breed is schuift horizontaal in plaats van over de
   rand van de bubbel te lopen. */
.tabel-houder { overflow-x: auto; margin: 12px 0; }
.bubbel table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.45;
}
.bubbel th, .bubbel td {
  border: 1px solid var(--rand);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.bubbel th {
  background: var(--paars-zacht);
  color: var(--navy);
  font-size: 13px;
  white-space: nowrap;
}
.bubbel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--achtergrond) 60%, transparent); }
.bubbel a { color: var(--paars); }

.bronnen {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rand);
  font-size: 12px;
  color: var(--tekst-zacht);
}
.bronnen span { display: inline-block; margin-right: 10px; }
.bronnen a { color: var(--paars); text-decoration: none; border-bottom: 1px dotted var(--paars); }
.bronnen a:hover { color: var(--paars-donker); }

.reacties { margin-top: 8px; display: flex; gap: 4px; }
.reacties button {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--tekst-zacht);
}
.reacties button:hover { background: var(--paars-zacht); }
.reacties button.gekozen { border-color: var(--paars); color: var(--paars); }

.typt span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--paars);
  animation: pulse 1.2s infinite ease-in-out;
}
.typt span:nth-child(2) { animation-delay: .15s; background: #7a86b8; }
.typt span:nth-child(3) { animation-delay: .3s; background: var(--lichtblauw); }

@keyframes pulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .typt span { animation: none; opacity: .5; }
  .berichten { scroll-behavior: auto; }
  #verstuur.stoppen { animation: none; }
  .bijlagen-rij.wacht .bijlage-label.bezig { animation: none; }
}

/* ---------- Welkom ---------- */

.welkom {
  max-width: 760px;
  margin: 6vh auto 0;
  text-align: center;
}
.welkom h2 { font-size: 22px; margin: 16px 0 8px; color: var(--navy); }
.welkom p { color: var(--tekst-zacht); margin: 0 auto 22px; max-width: 520px; }

.voorzetten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  text-align: left;
}
.voorzet {
  border: 1px solid var(--rand);
  background: var(--paneel);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--tekst);
  transition: border-color .15s, background .15s;
}
.voorzet:hover { border-color: var(--paars); background: var(--paars-zacht); }

/* ---------- Invoer ---------- */

.invoer {
  border-top: 1px solid var(--rand);
  background: var(--paneel);
  padding: 14px 16px 10px;
}
.invoer-rij {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 8px 8px 8px 6px;
  background: var(--achtergrond);
}
.invoer-rij:focus-within { border-color: var(--paars); }

/* ---------- Bijlagen ---------- */

.paperclip {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tekst-zacht);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.paperclip:hover { background: var(--paars-zacht); color: var(--paars-donker); }

/* De labels boven het invoerveld, voor het versturen. */
.bijlagen-rij {
  max-width: 1120px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bijlagen-rij[hidden] { display: none; }
.bijlagen-rij.wacht .bijlage-label.bezig { animation: tik .3s ease-in-out 2; }
@keyframes tik {
  50% { transform: translateY(-2px); border-color: var(--paars); }
}
.bijlagen-uitleg {
  font-size: 11px;
  color: var(--tekst-zacht);
  margin-left: 4px;
}

.bijlage-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px 5px 9px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--paneel);
  color: var(--navy);
  font-size: 12.5px;
}
.bijlage-label svg { flex: none; color: var(--paars); }
.bijlage-naam {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.bijlage-stand {
  color: var(--tekst-zacht);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.bijlage-label.bezig .bijlage-stand { font-style: italic; }
.bijlage-label.fout { border-color: var(--fout); background: var(--paars-zacht); }
.bijlage-label.fout .bijlage-stand { color: var(--fout); white-space: normal; }
.bijlage-label.verwijderd { opacity: .65; }
.bijlage-label.verwijderd .bijlage-naam { text-decoration: line-through; }

.bijlage-weg {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--tekst-zacht);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.bijlage-weg:hover { color: var(--fout); }

/* In een verstuurd bericht staan de labels boven de vraag. */
.bericht-bijlagen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.bericht.eigen .bijlage-label {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
}

/* Over het hele gesprek heen zodra er een bestand boven het venster hangt. */
.sleepvlak {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(36, 84, 144, .12);
  border: 3px dashed var(--paars);
  pointer-events: none;
}
.sleepvlak[hidden] { display: none; }
.sleepvlak-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 26px;
  border-radius: var(--radius);
  background: var(--paneel);
  box-shadow: var(--schaduw);
  text-align: center;
  color: var(--navy);
}
.sleepvlak-tekst span { font-size: 13px; color: var(--tekst-zacht); }

#vraag {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--tekst);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  max-height: 180px;
  padding: 4px 0;
}
#vraag:focus { outline: none; }

#verstuur {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--verloop);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#verstuur:disabled { opacity: .4; cursor: not-allowed; }
#verstuur:hover:not(:disabled) { filter: brightness(.94); }

/* Tijdens het antwoorden is dezelfde knop de stopknop. Een rustig vlak in
   plaats van het verloop, zodat het zichtbaar een andere handeling is. */
#verstuur.stoppen {
  background: var(--navy);
  animation: pols 1.6s ease-in-out infinite;
}
@keyframes pols {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 84, 144, .35); }
  50% { box-shadow: 0 0 0 5px rgba(36, 84, 144, 0); }
}

.afgebroken {
  margin: 10px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--tekst-zacht);
}

.disclaimer {
  max-width: 1120px;
  margin: 8px auto 0;
  font-size: 11px;
  color: var(--tekst-zacht);
  text-align: center;
}

/* ---------- Mobiel ---------- */

@media (max-width: 760px) {
  .raamwerk { grid-template-columns: 1fr; }
  .zijbalk {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--schaduw);
  }
  .zijbalk.open { transform: translateX(0); }
  .icoonknop, .zijbalk-sluit { display: block; }
  .berichten { padding: 16px 16px 8px; }
  .bericht { gap: 8px; }
  .welkom { margin-top: 3vh; }
  .aida-logo.groot { width: 200px; }
  /* In de kop is geen ruimte voor het woord, het icoon blijft over. */
  .toolbox-knop.kop .knop-tekst { display: none; }
  .toolbox-knop.kop { padding: 6px 8px; }
  .niveau-badge { padding: 3px 10px 3px 4px; font-size: 11px; }
}

/* Onder deze breedte past de linkerkolom niet meer naast het formulier. */
@media (max-width: 860px) {
  .login-kaart { grid-template-columns: 1fr; max-width: 460px; }
  .login-intro {
    border-right: 0;
    border-bottom: 1px solid var(--rand);
    padding: 28px 24px 24px;
  }
  .login-formulier { padding: 24px; }
  /* Op een telefoon telt elke pixel boven het formulier. De uitleg en de
     opsomming vallen weg, het merk en de afzender blijven staan. */
  .login-punten, .login-intro .uitleg { display: none; }
  .aida-logo.groot { width: 180px; margin-bottom: 2px; }
  .afzender {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 0;
  }
  .afzender .logo-rij { margin-top: 0; gap: 12px; }
  .afzender .logo-rij .deploy-logo { width: 52px; }
}

/* ======================================================================
   Beheerpagina
   ====================================================================== */

.beheer-pagina { background: var(--achtergrond); }

.beheer { min-height: 100vh; }

.beheer-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--paneel);
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}
.beheer-label {
  background: var(--verloop);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
}
.beheer-menu { display: flex; gap: 4px; margin-left: 16px; flex-wrap: wrap; }
.beheer-menu a {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--tekst-zacht);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.beheer-menu a:hover { background: var(--paars-zacht); color: var(--tekst); }
.beheer-menu a.actief { background: var(--paars-zacht); color: var(--paars-donker); }
.beheer-uit { margin-left: auto; }

.beheer-inhoud {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}

/* ---------- Tegels met kerncijfers ---------- */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.tegel {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tegel-getal {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}
.tegel-label { font-size: 14px; font-weight: 600; }
.tegel-extra { font-size: 12px; color: var(--tekst-zacht); }

/* ---------- Kaarten ---------- */

.kaart {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.kaart h2 { font-size: 16px; margin: 0 0 12px; color: var(--navy); }
.kaart-kop {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kaart-kop h2 { margin: 0; }
.twee-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.twee-kolommen .kaart { margin-bottom: 0; }

.toelichting { font-size: 13px; color: var(--tekst-zacht); margin: 0 0 12px; }
.leeg { font-size: 14px; color: var(--tekst-zacht); margin: 6px 0; }

.melding {
  background: var(--paars-zacht);
  border-left: 3px solid var(--paars);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0 0 20px;
}
.melding.waarschuwing { border-left-color: #c58a00; }
.melding code { font-size: 13px; }

/* ---------- Staafgrafiek ---------- */

.staafgrafiek { width: 100%; height: auto; display: block; }
.staafgrafiek .as { stroke: var(--rand); stroke-width: 1; }
.staafgrafiek .staaf path { fill: var(--paars); }
.staafgrafiek .staaf:hover path { fill: var(--paars-donker); }
.staafgrafiek .waarde {
  font-size: 11px;
  font-weight: 700;
  fill: var(--navy);
  text-anchor: middle;
}
.staafgrafiek .datum {
  font-size: 9px;
  fill: var(--tekst-zacht);
  text-anchor: middle;
}

/* ---------- Tabel en lijsten ---------- */

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; }
.tabel th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--tekst-zacht); }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel tr:last-child td { border-bottom: 0; }

/* Een stip in de niveaukleur. Het getal staat ernaast, dus de kleur is nooit
   de enige drager van de betekenis. */
.stip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: baseline;
}
.stip-greenbelt { background: var(--paars); }
.stip-blackbelt { background: var(--navy); }
.stip-champion { background: var(--lichtblauw); }

.woordenlijst { list-style: none; margin: 0; padding: 0; }
.woordenlijst li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.woordenlijst li:last-child { border-bottom: 0; }
.woordenlijst .woord { flex: 1; }
.woordenlijst .telling {
  font-variant-numeric: tabular-nums;
  color: var(--tekst-zacht);
  font-size: 13px;
}

.vraaglijst { list-style: none; margin: 0; padding: 0; }
.vraaglijst > li { border-bottom: 1px solid var(--rand); }
.vraaglijst > li:last-child { border-bottom: 0; }
.vraaglijst.kort > li { padding: 8px 0; }

.vraaglijst summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.vraaglijst summary::-webkit-details-marker { display: none; }
.vraaglijst summary:hover .vraagtekst { color: var(--paars-donker); }

.vraagregel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.vraagtekst {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.vraaglijst time {
  font-size: 12px;
  color: var(--tekst-zacht);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vraaglijst.kort li { display: flex; align-items: center; gap: 12px; }

.badge-klein {
  background: var(--paars-zacht);
  color: var(--paars-donker);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.duim { font-size: 14px; }

/* ---------- Tabel op de beheerpagina ---------- */

.beheer-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.beheer-tabel th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.beheer-tabel td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
.beheer-tabel tr:last-child td { border-bottom: 0; }
.beheer-tabel .nummer {
  font-variant-numeric: tabular-nums;
  color: var(--tekst-zacht);
  white-space: nowrap;
}
.beheer-tabel .niveaukolom {
  display: table-cell;
  white-space: nowrap;
}
.beheer-tabel .niveaukolom .badge-klein { margin-right: 4px; }
.beheer-tabel .subtekst {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--tekst-zacht);
}
.leeg-cel { color: var(--fout); font-weight: 600; }

.eenvoudige-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
  font-size: 13px;
  color: var(--tekst-zacht);
}
.eenvoudige-lijst li { break-inside: avoid; padding: 3px 0; }

@media (max-width: 760px) {
  .eenvoudige-lijst { columns: 1; }
}

.antwoord {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  background: var(--achtergrond);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 14px;
  max-height: 420px;
  overflow-y: auto;
}
.opmerking {
  font-size: 14px;
  background: var(--lichtblauw-zacht);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 10px;
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  padding: 5px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--tekst-zacht);
}
.filter:hover { border-color: var(--paars); color: var(--tekst); }
.filter.actief { background: var(--paars); border-color: var(--paars); color: #fff; }

.knop-klein {
  border: 1px solid var(--paars);
  background: transparent;
  color: var(--paars-donker);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.knop-klein:hover { background: var(--paars-zacht); }

.verderlink { color: var(--paars); font-size: 14px; }

@media (max-width: 760px) {
  .beheer-kop { padding: 10px 14px; }
  .beheer-menu { margin-left: 0; width: 100%; order: 3; }
  .beheer-inhoud { padding: 16px 14px 40px; }
  .vraaglijst summary { flex-wrap: wrap; }
}

/* ---------- Toolbox-knop in de zijbalk ---------- */

.toolbox-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  color: var(--paars-donker);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.toolbox-knop:hover { border-color: var(--paars); background: var(--paars-zacht); }

/* In de kop van het gesprek staat hij rechtsboven, naast het beltschild. */
.toolbox-knop.kop {
  margin: 0 0 0 auto;
  padding: 6px 12px;
  background: var(--paneel);
}

/* ---------- Bedankje na een duim ---------- */

.bedankje {
  font-size: 12px;
  color: var(--tekst-zacht);
  margin-left: 6px;
  align-self: center;
}

/* ---------- Eigen bevestigingsvenster ---------- */

.dialoog-scherm {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 42, .35);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 16px;
}
.dialoog {
  background: var(--paneel);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16, 36, 42, .22);
  padding: 22px 24px 18px;
  max-width: 360px;
  width: 100%;
}
.dialoog-vraag { margin: 0 0 18px; font-size: 15px; font-weight: 600; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 8px; }
.dialoog-knoppen button {
  border-radius: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dialoog-nee { border: 1px solid var(--rand); background: transparent; color: var(--tekst); }
.dialoog-nee:hover { background: var(--achtergrond); }
.dialoog-ja { border: 0; background: var(--paars); color: #fff; }
.dialoog-ja:hover { background: var(--paars-donker); }

/* ---------- Logo's naast elkaar onderaan ---------- */

.logo-rij {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.afzender { flex-direction: column; gap: 4px; }
.afzender-tekst { font-size: 12px; color: var(--tekst-zacht); }
.logo-rij .deploy-logo { width: 62px; }