/* AI Agent 2.0: chat met de planning-agent op de opdrachtpagina, prefix ap- (1-10-2026) */

/* ── Eigen tokens: op het venster (portal aan <body>) en op de knop op de pagina ─────────────────────────────── */
.ap-laag,
.ap-agent-knop {
  --ap-navy: #1F2A60;
  --ap-navy-d: #16204C;
  --ap-van: #0B102B;
  --ap-mid: #1A2352;
  --ap-tot: #31408F;
  --ap-violet: #6d5cff;
  --ap-lavendel: #8b9cf5;
  --ap-lavendel-l: #dfe4ff;
  --ap-blauw: #2a78d6;
  --ap-blauw-d: #3987e5;
  --ap-oranje: #d95926;
  --ap-goed: #0ca30c;
  --ap-goed-d: #2fbf3a;
  --ap-let: #fab219;
  --ap-ernstig: #ec835a;
  --ap-kritiek: #d03b3b;
  --ap-gedempt: #898781;
  --ap-tekst: rgba(255, 255, 255, .93);
  --ap-tekst-2: rgba(255, 255, 255, .7);
  --ap-tekst-3: rgba(255, 255, 255, .52);
  --ap-glas: rgba(255, 255, 255, .06);
  --ap-glas-2: rgba(255, 255, 255, .1);
  --ap-rand: rgba(255, 255, 255, .12);
  --ap-rand-2: rgba(255, 255, 255, .22);
  --ap-kop: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Zelfde betekenis per scanteken als de afspeler op AI Brains (--br-scan-*). */
  --ap-scan-k: #2fbf3a;
  --ap-scan-f: #3987e5;
  --ap-scan-p: rgba(159, 195, 238, .6);
  --ap-scan-t: #d95926;
  --ap-scan-o: #d03b3b;
  --ap-scan-d: #fab219;
  --ap-scan-a: #ec835a;
  --ap-scan-h: rgba(137, 135, 129, .45);
  --ap-scan-v: rgba(195, 193, 184, .62);
  --ap-scan-n: rgba(225, 224, 217, .16);
  --ap-scan-x: rgba(255, 255, 255, .05);
}

.ap-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.ap-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Knop "AI Agent" op de opdrachtpagina ────────────────────────────────────────────────────────────────────── */
/* Rustig, naast "Inplannen" (1-10-2026, Jeffrey: "veel te overdreven"): zelfde maat en hoeken als .btn-primary, maar
   wit met een donkerblauwe rand; geen verloop, gloed of animatie. */
.ap-agent-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--border-radius, 10px); border: 1.5px solid var(--brand-accent, #1F2A60);
  background: var(--surface, #fff); color: var(--brand-accent, #1F2A60);
  font: 700 14px/1.5 'Inter', 'Helvetica Neue', Arial, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.ap-agent-knop:hover { background: #F2F3FA; }
.ap-agent-knop:focus-visible { outline: 2px solid var(--brand-accent, #1F2A60); outline-offset: 2px; }
.ap-agent-knop-icoon { display: inline-flex; color: #5b56e0; }
.ap-agent-knop-icoon .ap-ic { width: 15px; height: 15px; }

/* Op de lichte pagina: knoppen naast elkaar in de lege planningkaart, en de regel "Planning-agent" bij een afspraak. */
.ap-leeg-knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ap-leeg-knoppen .btn-primary { width: auto; }
.ap-vzp-agent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }

/* ── Venster ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Onder de lagen van AI Brains (.br-laag, 1300): het Denkproces opent boven de chat. */
.ap-laag {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 2vh 2vw;
  background: rgba(6, 9, 26, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--ap-tekst);
  animation: ap-laag-in .25s ease both;
}
.ap-dlg {
  position: relative; width: min(1240px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; color: #fff;
  background:
    radial-gradient(820px 420px at 82% -14%, rgba(109, 92, 255, .3), transparent 70%),
    radial-gradient(640px 420px at 0% 112%, rgba(57, 135, 229, .16), transparent 70%),
    linear-gradient(150deg, var(--ap-van) 0%, #141B42 52%, #1E2A68 100%);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .78);
  animation: ap-dlg-in .38s cubic-bezier(.2, .8, .2, 1) both;
}
/* clip in plaats van alleen hidden: dan kan geen scrollIntoView of focus het hele venster opschuiven (1-10-2026). */
.ap-dlg { overflow: clip; }
.ap-dlg:focus { outline: none; }
.ap-dlg button { font-family: inherit; }
.ap-dlg-glans {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 30px, linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px) 0 0 / 30px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 0%, #000, transparent 70%);
}

/* Kop */
.ap-kop { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px 13px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
/* Rustig (1-10-2026, Jeffrey: bol met gloed en ring was te veel): een vlak vierkantje met het icoon. */
.ap-kop-icoon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c9d1ff;
}
.ap-kop-icoon .ap-ic { width: 18px; height: 18px; }
.ap-kop-titel { flex: 1; min-width: 0; }
.ap-kop-titel h2 {
  margin: 0; font-family: var(--ap-kop); font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, #fff 0%, #dfe4ff 60%, #a99cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ap-kop-titel h2 span { font-weight: 600; opacity: .75; }
.ap-kop-titel p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 3px 0 0; font-size: 12.5px; color: var(--ap-tekst-2); min-width: 0; }
.ap-kop-titel p b { color: #fff; font-weight: 700; }
.ap-kop-titel p span::before { content: "·"; margin: 0 7px; color: var(--ap-tekst-3); }
.ap-kop-klacht { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Geen kosten- of budgetpil meer in de kop (1-10-2026, Jeffrey): die staan in Instellingen › AI-kosten. */
.ap-kop-rechts { flex: none; display: flex; align-items: center; gap: 8px; }
.ap-sluit {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s;
}
.ap-sluit:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

/* Knoppen in het venster */
.ap-knop-glas {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--ap-rand-2); background: rgba(255, 255, 255, .07); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .15s;
}
.ap-knop-glas:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; }
.ap-knop-glas:disabled { opacity: .45; cursor: not-allowed; }
.ap-knop-glas .ap-ic { width: 14px; height: 14px; }
.ap-knop-plan,
.ap-knop-oranje {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 18px; border-radius: 10px; border: 0;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .15s, transform .15s, box-shadow .2s;
}
.ap-knop-plan { background: linear-gradient(135deg, #36c942, #0ca30c); box-shadow: 0 8px 18px -8px rgba(47, 191, 58, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ap-knop-oranje { background: linear-gradient(135deg, #ec835a, #d95926); box-shadow: 0 8px 18px -8px rgba(217, 89, 38, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ap-knop-plan:hover:not(:disabled),
.ap-knop-oranje:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.ap-knop-plan:disabled,
.ap-knop-oranje:disabled { background: rgba(255, 255, 255, .1); color: var(--ap-tekst-3); box-shadow: none; cursor: not-allowed; }
.ap-knop-plan .ap-ic, .ap-knop-oranje .ap-ic { width: 15px; height: 15px; }
.ap-knop-wit { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; border: 0; background: #fff; color: var(--ap-navy-d); font-weight: 700; font-size: 13px; cursor: pointer; }
.ap-knop-wit:hover { background: #e8ebff; }
.ap-ikoon-knop {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ap-tekst-2); cursor: pointer; transition: background .15s, color .15s;
}
.ap-ikoon-knop:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ap-ikoon-knop .ap-ic { width: 14px; height: 14px; }
.ap-link-knop { padding: 0; border: 0; background: none; color: var(--ap-lavendel); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(139, 156, 245, .4); text-underline-offset: 2px; }
.ap-link-knop:hover { color: #fff; }
.ap-dlg :is(button, a, textarea):focus-visible { outline: 2px solid var(--ap-lavendel); outline-offset: 2px; }

/* De knop "Denkproces" (AI Brains) op het donkere venster. */
.ap-dlg .br-ritknop.is-knop {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 10px;
  border: 1px solid rgba(139, 156, 245, .5); background: rgba(139, 156, 245, .15); color: var(--ap-lavendel-l); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ap-dlg .br-ritknop.is-knop:hover { background: rgba(139, 156, 245, .28); border-color: rgba(185, 196, 255, .8); color: #fff; }

/* Chips */
.ap-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.35;
  border: 1px solid var(--ap-rand); background: rgba(255, 255, 255, .07); color: var(--ap-tekst);
}
.ap-chip .ap-ic { width: 12px; height: 12px; }
.ap-chip.is-oranje { background: rgba(217, 89, 38, .2); border-color: rgba(236, 131, 90, .55); color: #ffcfba; }
.ap-chip.is-rood { background: rgba(208, 59, 59, .22); border-color: rgba(208, 59, 59, .6); color: #ffc6c6; }
.ap-chip.is-paars { background: rgba(139, 156, 245, .2); border-color: rgba(139, 156, 245, .5); color: var(--ap-lavendel-l); }
.ap-chip.is-groen { background: rgba(47, 191, 58, .2); border-color: rgba(47, 191, 58, .55); color: #bff5c3; }
.ap-stip { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }

.ap-spinner { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--ap-lavendel-l); animation: ap-draai .8s linear infinite; }
.ap-spinner.is-groot { width: 28px; height: 28px; border-width: 3px; }
.ap-golf {
  background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0%, #fff 45%, rgba(255, 255, 255, .45) 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ap-golf 2.2s linear infinite;
}

/* ── Indeling ────────────────────────────────────────────────────────────────────────────────────────────────── */
.ap-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); }
.ap-gesprek { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .09); }
.ap-stroom { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 20px 22px 14px; display: flex; flex-direction: column; gap: 10px; }
.ap-brein {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
.ap-stroom, .ap-brein, .ap-route, .ap-rp { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.ap-stroom::-webkit-scrollbar, .ap-brein::-webkit-scrollbar, .ap-route::-webkit-scrollbar, .ap-rp::-webkit-scrollbar { width: 8px; height: 6px; }
.ap-stroom::-webkit-scrollbar-thumb, .ap-brein::-webkit-scrollbar-thumb, .ap-route::-webkit-scrollbar-thumb, .ap-rp::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 8px; }
.ap-stroom::-webkit-scrollbar-track, .ap-brein::-webkit-scrollbar-track, .ap-route::-webkit-scrollbar-track, .ap-rp::-webkit-scrollbar-track { background: transparent; }

/* Rechterkolom met tabbladen Brein | Route (1-10-2026). Beide panelen blijven staan: de kaart hoeft niet opnieuw. */
.ap-zij { min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); }
.ap-zij .ap-brein { flex: 1; padding-top: 12px; background: none; }
.ap-zij-paneel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ap-zij-paneel[hidden] { display: none; }
.ap-zij-tabs { flex: none; display: flex; gap: 4px; margin: 12px 18px 0; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ap-rand); }
.ap-zij-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ap-tekst-2); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .2s;
}
.ap-zij-tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ap-zij-tab[aria-selected="true"] {
  color: #fff; background: linear-gradient(135deg, rgba(139, 156, 245, .34), rgba(109, 92, 255, .3));
  box-shadow: inset 0 0 0 1px rgba(185, 196, 255, .45), 0 6px 16px -10px rgba(109, 92, 255, .9);
}
.ap-zij-tab .ap-ic { width: 15px; height: 15px; }
.ap-zij-tab .ap-live { margin-left: 1px; }
.ap-zij-tab-tag { padding: 1px 6px; border-radius: 6px; background: rgba(11, 16, 43, .55); color: var(--ap-lavendel-l); font: 600 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ap-zij-tab-tel {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139, 156, 245, .38); color: #fff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; animation: ap-pop .35s cubic-bezier(.2, .8, .2, 1);
}

/* ── Gesprek ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ap-rij { display: flex; gap: 10px; max-width: 100%; animation: ap-rij-in .32s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-rij.is-planner { flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 6px; }
.ap-rij.is-agent { align-items: flex-start; }
.ap-rij-inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ap-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #7d8cf0 0%, #31408F 52%, #141B42 100%); border: 1px solid rgba(185, 196, 255, .5); box-shadow: 0 0 14px rgba(120, 140, 255, .45);
}
.ap-avatar .ap-ic { width: 16px; height: 16px; }
.ap-avatar.is-leeg { height: 1px; visibility: hidden; }
.ap-meta { font-size: 11px; color: var(--ap-tekst-3); }
.ap-meta .ap-link-knop { font-size: 11px; }

.ap-bubbel { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ap-bubbel p { margin: 0; }
.ap-bubbel.is-vraag {
  max-width: min(78%, 560px); padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; color: #fff;
  background: linear-gradient(135deg, #31408F, #4a4bc4); border: 1px solid rgba(139, 156, 245, .45); box-shadow: 0 10px 22px -14px rgba(76, 80, 220, .9);
}
.ap-bubbel.is-vraag.is-onderweg { opacity: .82; }
.ap-bubbel.is-antwoord {
  max-width: min(100%, 680px); padding: 12px 15px; border-radius: 4px 16px 16px 16px; color: var(--ap-tekst);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--ap-rand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ap-md > * + * { margin-top: 8px; }
.ap-md p { margin: 0; }
.ap-md ul, .ap-md ol { margin: 0; padding-left: 20px; }
.ap-md li + li { margin-top: 3px; }
.ap-md li::marker { color: var(--ap-lavendel); }
.ap-md strong { color: #fff; font-weight: 700; }
.ap-md code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); font-size: 12.5px; }
.ap-md-kop { font-family: var(--ap-kop); font-weight: 800; color: #fff; }

.ap-gedachte { max-width: min(100%, 680px); min-width: 0; }
.ap-gedachte > button {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 8px 3px 4px; border: 0; border-radius: 8px; background: none;
  color: var(--ap-tekst-3); font-size: 12.5px; font-style: italic; cursor: pointer; text-align: left;
}
.ap-gedachte > button:hover { color: var(--ap-tekst-2); background: rgba(255, 255, 255, .05); }
.ap-gedachte > button .ap-ic { width: 14px; height: 14px; }
.ap-gedachte-label { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ap-gedachte-kort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ap-gedachte-pijl { transition: transform .2s; }
.ap-gedachte.is-open .ap-gedachte-pijl { transform: rotate(90deg); }
.ap-gedachte-tekst {
  margin: 4px 0 0 10px; padding: 2px 0 2px 12px; border-left: 2px solid rgba(139, 156, 245, .35);
  color: var(--ap-tekst-2); font-size: 12.5px; font-style: italic; line-height: 1.55; white-space: pre-wrap;
}

/* Tool-regel in het gesprek: compact, de details staan in het brein. */
.ap-toollijn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: var(--ap-tekst-2);
}
.ap-toollijn-icoon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 156, 245, .16); color: var(--ap-lavendel-l); }
.ap-toollijn-icoon .ap-ic { width: 12px; height: 12px; }
.ap-toollijn-titel { font-weight: 600; color: var(--ap-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-toollijn-detail { color: var(--ap-tekst-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-toollijn-ms { color: var(--ap-tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-toollijn-status { display: inline-flex; flex: none; }
.ap-toollijn-status .ap-ic { width: 14px; height: 14px; }
.ap-toollijn.is-klaar .ap-toollijn-status { color: var(--ap-goed-d); }
.ap-toollijn.is-fout .ap-toollijn-status { color: #ff8a8a; }
.ap-toollijn.is-onderbroken .ap-toollijn-status { color: var(--ap-tekst-3); }
.ap-toollijn.is-bezig { border-color: rgba(139, 156, 245, .4); }
.ap-toollijn-knop { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.ap-toollijn-knop .ap-ic { width: 11px; height: 11px; }

.ap-typt { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--ap-rand); font-size: 13px; max-width: 100%; }
.ap-typt-stippen { display: inline-flex; gap: 4px; }
.ap-typt-stippen i { width: 6px; height: 6px; border-radius: 50%; background: var(--ap-lavendel-l); animation: ap-stip 1.2s ease-in-out infinite; }
.ap-typt-stippen i:nth-child(2) { animation-delay: .15s; }
.ap-typt-stippen i:nth-child(3) { animation-delay: .3s; }
.ap-typt .ap-golf { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ap-fout {
  display: flex; gap: 10px; max-width: min(100%, 680px); padding: 10px 13px; border-radius: 12px;
  background: rgba(208, 59, 59, .14); border: 1px solid rgba(208, 59, 59, .5); color: #ffd6d6; font-size: 13.5px; line-height: 1.5;
}
.ap-fout p { margin: 0; }
.ap-fout-icoon { flex: none; color: #ff8a8a; padding-top: 1px; }
.ap-fout.is-gestopt { background: rgba(255, 255, 255, .05); border-color: var(--ap-rand); color: var(--ap-tekst-2); }
.ap-fout.is-gestopt .ap-fout-icoon { color: var(--ap-tekst-3); }
.ap-chip-knop {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(139, 156, 245, .55); background: rgba(139, 156, 245, .16); color: var(--ap-lavendel-l); font-size: 12px; font-weight: 600;
}
.ap-chip-knop:hover:not(:disabled) { background: rgba(139, 156, 245, .3); color: #fff; }
.ap-chip-knop:disabled { opacity: .5; cursor: not-allowed; }
.ap-chip-knop .ap-ic { width: 13px; height: 13px; }

.ap-ingepland {
  display: flex; gap: 12px; width: min(100%, 680px); padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(47, 191, 58, .22), rgba(12, 163, 12, .07)); border: 1px solid rgba(47, 191, 58, .55);
  animation: ap-succes 1.4s ease-out .1s 1 both;
}
.ap-ingepland-icoon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #36c942, #0ca30c); color: #fff; box-shadow: 0 0 18px rgba(47, 191, 58, .6);
}
.ap-ingepland-icoon .ap-ic { width: 19px; height: 19px; stroke-width: 2.6; }
.ap-ingepland-tekst { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-ingepland-tekst b { font-family: var(--ap-kop); font-size: 15px; font-weight: 800; color: #c8f7cc; }
.ap-ingepland-tekst p { margin: 0; font-size: 13.5px; color: var(--ap-tekst); }
.ap-ingepland-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ap-mailbalk { margin-left: 40px; max-width: 680px; }

/* Lege staat */
.ap-leeg { margin: auto; max-width: 600px; padding: 20px 6px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ap-leeg-bol {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #c9d1ff;
}
.ap-leeg-bol .ap-ic { width: 24px; height: 24px; stroke-width: 1.7; }
.ap-leeg h3 {
  margin: 0; font-family: var(--ap-kop); font-size: 22px; font-weight: 800; letter-spacing: -.4px;
  background: linear-gradient(90deg, #fff, #dfe4ff 60%, #a99cff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ap-leeg > p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ap-tekst-2); }
.ap-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ap-starter {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(139, 156, 245, .45); background: rgba(139, 156, 245, .12); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s, border-color .15s; animation: ap-rij-in .4s backwards;
}
.ap-starter:nth-child(2) { animation-delay: .06s; }
.ap-starter:nth-child(3) { animation-delay: .12s; }
.ap-starter:nth-child(4) { animation-delay: .18s; }
.ap-starter:hover:not(:disabled) { background: rgba(139, 156, 245, .26); border-color: rgba(185, 196, 255, .85); transform: translateY(-1px); }
.ap-starter:disabled { opacity: .5; cursor: not-allowed; }
/* "Zoek de beste plek": de snelle zoekactie zonder chat-model (1-10-2026), warm in plaats van lavendel. */
.ap-starter.is-snel {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 12px;
  border-color: rgba(250, 178, 25, .6); background: linear-gradient(120deg, rgba(250, 178, 25, .2), rgba(236, 131, 90, .14));
  box-shadow: 0 8px 20px -12px rgba(250, 178, 25, .8);
}
.ap-starter.is-snel .ap-ic { width: 14px; height: 14px; color: #ffd27a; }
.ap-starter.is-snel:hover:not(:disabled) { background: linear-gradient(120deg, rgba(250, 178, 25, .32), rgba(236, 131, 90, .24)); border-color: rgba(255, 214, 122, .9); }
/* Label "snel", zoals in de voet (.ap-snel-tag): geen bedrag meer. */
.ap-starter-tag {
  padding: 2px 7px; border-radius: 999px; background: rgba(11, 16, 43, .45); color: #ffe7b0;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ap-voorbeelden { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin-top: 10px; font-size: 12px; color: var(--ap-tekst-3); }
.ap-voorbeeld {
  padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .18); background: none; color: var(--ap-tekst-2);
  font-size: 13px; font-style: italic; text-align: left; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ap-voorbeeld:hover:not(:disabled) { border-color: rgba(185, 196, 255, .6); color: #fff; background: rgba(255, 255, 255, .04); }
.ap-voorbeeld:disabled { opacity: .5; cursor: not-allowed; }

.ap-laden { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ap-tekst-2); font-size: 13.5px; }
.ap-laadfout { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--ap-tekst); font-size: 14px; }
.ap-laadfout > .ap-ic { width: 34px; height: 34px; color: var(--ap-let); }
.ap-laadfout p { margin: 0; max-width: 420px; }

/* Voet van het gesprek (invoer): de pil "Nieuwe berichten" hangt er net boven, hoe hoog de invoer ook wordt. */
.ap-voet { position: relative; flex: none; }
.ap-nieuw-pil {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(200, 195, 255, .6); cursor: pointer; color: #fff; font-size: 12.5px; font-weight: 700;
  background: linear-gradient(120deg, var(--ap-tot), var(--ap-violet)); box-shadow: 0 10px 24px -8px rgba(109, 92, 255, .85);
  animation: ap-pil-in .3s cubic-bezier(.2, .8, .2, 1);
}
.ap-nieuw-pil .ap-ic { width: 14px; height: 14px; }

/* Invoer */
.ap-opsteller { flex: none; padding: 12px 18px 12px; border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(11, 16, 43, .45); }
.ap-opsteller-vak {
  display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--ap-rand-2); transition: border-color .2s, box-shadow .2s, background .2s;
}
.ap-opsteller-vak:focus-within { border-color: rgba(139, 156, 245, .75); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(139, 156, 245, .14), 0 0 28px -6px rgba(109, 92, 255, .6); }
.ap-opsteller textarea {
  flex: 1; min-width: 0; max-height: 180px; padding: 7px 0; border: 0; outline: none; resize: none; background: transparent;
  color: #fff; font: 14px/1.5 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.ap-dlg .ap-opsteller textarea:focus-visible { outline: none; }
.ap-opsteller textarea { overflow-y: hidden; }
/* Lange voorbeeldvraag op een smal scherm: op één regel afkappen in plaats van half zichtbaar over twee regels. */
.ap-opsteller textarea::placeholder { color: var(--ap-tekst-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Uit: alleen het invoervak dimt; de melding en de snelle knop blijven helder (die werken nog). */
.ap-opsteller.is-uit .ap-opsteller-vak, .ap-opsteller.is-uit .ap-opsteller-hint { opacity: .55; }
.ap-stuur {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #8b9cf5, #6d5cff); color: #fff; box-shadow: 0 6px 16px -6px rgba(109, 92, 255, .9); transition: filter .15s, transform .15s;
}
.ap-stuur:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.ap-stuur:disabled { background: rgba(255, 255, 255, .1); color: var(--ap-tekst-3); box-shadow: none; cursor: not-allowed; }
.ap-stuur .ap-ic { width: 17px; height: 17px; }
.ap-stuur.is-stop { width: auto; padding: 0 13px; background: rgba(208, 59, 59, .22); border: 1px solid rgba(208, 59, 59, .6); color: #ffd0d0; box-shadow: none; font-size: 12.5px; font-weight: 700; }
.ap-stuur.is-stop:hover { background: rgba(208, 59, 59, .35); }
.ap-stuur.is-stop .ap-ic { width: 13px; height: 13px; fill: currentColor; }
.ap-opsteller-voet { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-top: 7px; padding: 0 2px 0 0; font-size: 11px; color: var(--ap-tekst-3); }
.ap-opsteller-hint { margin-left: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Snelle knop "Beste plek" links in de voet (1-10-2026): de gewone planning-agent, zonder chat-model. */
.ap-snel {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 3px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(250, 178, 25, .45); background: rgba(250, 178, 25, .1); color: #fff; font-size: 12px; font-weight: 700;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .2s;
}
.ap-snel-icoon {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #3d2a00;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #fab219 55%, #d98a0b); box-shadow: 0 0 10px -1px rgba(250, 178, 25, .8);
}
.ap-snel-icoon .ap-ic { width: 12px; height: 12px; fill: currentColor; stroke-width: 1.5; }
.ap-snel-tag {
  padding: 2px 7px; border-radius: 999px; background: rgba(11, 16, 43, .5); color: #ffe7b0;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ap-snel:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(250, 178, 25, .2); border-color: rgba(255, 214, 122, .85); transform: translateY(-1px); }
.ap-snel:disabled, .ap-snel[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* De chat staat uit: dit is wat nog werkt, dus de knop licht op. */
.ap-snel.is-uitgelicht:not(:disabled):not([aria-disabled="true"]) {
  border-color: rgba(255, 214, 122, .9); background: linear-gradient(120deg, rgba(250, 178, 25, .3), rgba(236, 131, 90, .22));
  box-shadow: 0 0 0 3px rgba(250, 178, 25, .14), 0 8px 20px -10px rgba(250, 178, 25, .9); animation: ap-snel-puls 2.4s ease-in-out infinite;
}

/* Waarom de chat uit staat, boven het invoervak. */
.ap-opsteller-melding {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding: 10px 13px 10px 10px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; animation: ap-rij-in .3s cubic-bezier(.2, .8, .2, 1);
}
.ap-opsteller-melding p { margin: 0; min-width: 0; }
.ap-opsteller-melding b { font-weight: 700; color: #fff; }
.ap-opsteller-melding a { color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.ap-opsteller-melding a:hover { text-decoration-thickness: 2px; }
.ap-opsteller-melding-icoon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ap-opsteller-melding-icoon .ap-ic { width: 14px; height: 14px; }
.ap-opsteller-melding.is-op { background: rgba(208, 59, 59, .13); border: 1px solid rgba(208, 59, 59, .5); color: #ffd6d6; }
.ap-opsteller-melding.is-op .ap-opsteller-melding-icoon { background: rgba(208, 59, 59, .3); color: #ffb3b3; }
.ap-opsteller-melding.is-uit { background: rgba(250, 178, 25, .11); border: 1px solid rgba(250, 178, 25, .45); color: #ffe7b0; }
.ap-opsteller-melding.is-uit .ap-opsteller-melding-icoon { background: rgba(250, 178, 25, .22); color: var(--ap-let); }
.ap-teller { font-variant-numeric: tabular-nums; }
.ap-teller.is-te-lang { color: #ff8a8a; font-weight: 700; }

/* ── Voorstelkaarten ─────────────────────────────────────────────────────────────────────────────────────────── */
.ap-voorstellen { display: flex; flex-direction: column; gap: 12px; width: min(100%, 680px); }
.ap-voorstellen-kop { margin: 2px 0 -2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ap-tekst-3); }
.ap-kaart {
  --mk: var(--ap-lavendel);
  position: relative; overflow: hidden; padding: 14px 16px 12px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  border: 1px solid var(--ap-rand); box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  animation: ap-kaart-in .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ap-kaart:nth-child(3) { animation-delay: .08s; }
.ap-kaart:nth-child(4) { animation-delay: .16s; }
.ap-kaart:nth-child(5) { animation-delay: .24s; }
.ap-kaart:nth-child(6) { animation-delay: .32s; }
.ap-kaart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--mk), color-mix(in srgb, var(--mk) 35%, transparent)); }
.ap-kaart:hover { border-color: var(--ap-rand-2); transform: translateY(-1px); box-shadow: 0 20px 36px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); }
.ap-kaart.is-ertussen { border-color: rgba(236, 131, 90, .45); background: linear-gradient(160deg, rgba(217, 89, 38, .13), rgba(255, 255, 255, .03)); }
.ap-kaart.is-ingepland { border-color: rgba(47, 191, 58, .6); box-shadow: 0 0 0 1px rgba(47, 191, 58, .25), 0 0 30px -8px rgba(47, 191, 58, .5); }
/* Klik op de kaart kiest hem voor de Route rechts (1-10-2026); de gekozen kaart krijgt een lavendel ring. */
.ap-kaart.is-kiesbaar { cursor: pointer; }
.ap-kaart.is-gekozen,
.ap-kaart.is-gekozen:hover {
  border-color: rgba(185, 196, 255, .8);
  box-shadow: 0 0 0 1px rgba(139, 156, 245, .55), 0 0 34px -8px rgba(109, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ap-kaart.is-gekozen:not(.is-ertussen) { background: linear-gradient(160deg, rgba(139, 156, 245, .17), rgba(255, 255, 255, .04)); }
.ap-knop-glas.ap-knop-route .ap-ic { color: var(--ap-lavendel); }
.ap-knop-glas.ap-knop-route.is-aan { border-color: transparent; background: linear-gradient(135deg, #8b9cf5, #6d5cff); box-shadow: 0 8px 18px -10px rgba(109, 92, 255, .95); }
.ap-knop-glas.ap-knop-route.is-aan .ap-ic { color: #fff; }
.ap-knop-glas.ap-knop-route.is-aan:hover:not(:disabled) { background: linear-gradient(135deg, #9aa8ff, #7a6bff); border-color: transparent; }
.ap-lint {
  position: absolute; top: 14px; right: -36px; width: 132px; padding: 4px 0; transform: rotate(45deg); text-align: center; pointer-events: none;
  background: linear-gradient(90deg, #d95926, #ec835a); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6);
}
.ap-kaart-kop { display: flex; align-items: center; gap: 11px; }
.ap-kaart-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mk) 70%, white), var(--mk) 60%, color-mix(in srgb, var(--mk) 60%, #0B102B));
  color: #fff; font-family: var(--ap-kop); font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 25%, transparent), 0 0 16px -2px var(--mk);
}
.ap-kaart-wie { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-kaart-wie b { font-family: var(--ap-kop); font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kaart-duo { font-weight: 600; color: var(--ap-tekst-2); }
.ap-kaart-wie span { font-size: 13.5px; font-weight: 600; color: var(--ap-lavendel-l); font-variant-numeric: tabular-nums; }
.ap-kaart-tags { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.ap-kaart.is-ertussen .ap-kaart-tags { margin-right: 46px; }
.ap-kaart-id { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--ap-rand); font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ap-tekst-3); }
.ap-kaart-feiten { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px; }
.ap-feit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ap-tekst-2); }
.ap-feit .ap-ic { width: 14px; height: 14px; color: var(--ap-lavendel); }
.ap-feit.is-let { color: #ffd27a; }
.ap-feit.is-let .ap-ic { color: var(--ap-let); }
.ap-reizen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.ap-reis { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ap-tekst-2); min-width: 0; }
.ap-reis .ap-ic { width: 13px; height: 13px; color: var(--ap-tekst-3); }
.ap-reis b { color: var(--ap-tekst); font-weight: 600; }
.ap-reis em { font-style: normal; padding: 1px 6px; border-radius: 6px; background: rgba(139, 156, 245, .15); color: var(--ap-lavendel-l); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Mini-route: de dag na inplannen, de nieuwe stop gemarkeerd. */
.ap-route { list-style: none; display: flex; margin: 12px 0 2px; padding: 2px 0 6px; overflow-x: auto; }
.ap-route li { position: relative; flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: ap-pop .35s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
/* Lijn van de vorige stop naar deze: 18px boven de stip (tijd 14px + 4px), stip 16px hoog. */
.ap-route li + li::before { content: ""; position: absolute; top: 25px; right: calc(50% + 8px); width: calc(100% - 16px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.ap-route li.is-nieuw::before { background: linear-gradient(90deg, rgba(139, 156, 245, .3), rgba(139, 156, 245, .85)); }
.ap-route li.is-nieuw + li::before { background: linear-gradient(90deg, rgba(139, 156, 245, .85), rgba(139, 156, 245, .3)); }
.ap-route-tijd { font-size: 11px; line-height: 14px; color: var(--ap-tekst-3); font-variant-numeric: tabular-nums; }
.ap-route-stip { width: 16px; height: 16px; display: grid; place-items: center; }
.ap-route-stip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2a3570; border: 2px solid rgba(255, 255, 255, .45); }
.ap-route-plaats { max-width: 78px; font-size: 11px; color: var(--ap-tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-route li.is-nieuw .ap-route-tijd { color: var(--ap-lavendel-l); font-weight: 700; }
.ap-route li.is-nieuw .ap-route-stip::before {
  width: 14px; height: 14px; border: 0; background: radial-gradient(circle at 35% 30%, #fff, #8b9cf5 45%, #6d5cff);
  box-shadow: 0 0 0 4px rgba(139, 156, 245, .25), 0 0 14px #8b9cf5; animation: ap-nieuw-puls 1.8s ease-out infinite;
}
.ap-route li.is-nieuw .ap-route-plaats { color: #fff; font-weight: 700; }

.ap-schuif { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ap-schuif-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-tekst-3); margin-right: 2px; }
.ap-schuif .ap-chip { font-variant-numeric: tabular-nums; }
.ap-overtredingen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.ap-kaart-reden { margin: 10px 0 0; padding-left: 11px; border-left: 2px solid rgba(139, 156, 245, .4); font-size: 13px; line-height: 1.55; color: var(--ap-tekst-2); }
.ap-bevestig {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: rgba(217, 89, 38, .15); border: 1px solid rgba(236, 131, 90, .55); color: #ffdccc; animation: ap-rij-in .25s ease;
}
.ap-bevestig b { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ap-kop); font-size: 14px; color: #fff; }
.ap-bevestig b .ap-ic { color: var(--ap-ernstig); }
.ap-bevestig ul { margin: 0; padding-left: 20px; }
.ap-bevestig-knoppen { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ap-kaart-balk { margin-top: 12px; }
.ap-kaart-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* Waarom Inplannen uit staat, zichtbaar (een title op een uitgeschakelde knop toont niet elke browser). */
.ap-kaart-uit { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: #ffe7b0; background: rgba(250, 178, 25, .1); border: 1px solid rgba(250, 178, 25, .35); }
.ap-kaart-uit .ap-ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ap-let); }

/* Vragen van de server (boven de norm, na de werktijd) en de mailvraag, in de donkere stijl. */
.ap-dlg .over-limiet { margin: 0; background: rgba(250, 178, 25, .12); border: 1px solid rgba(250, 178, 25, .45); border-left: 4px solid var(--ap-let); color: #ffe7b0; }
.ap-dlg .over-limiet .ol-tekst b { color: #ffd27a; }
.ap-dlg .over-limiet .btn-ghost { background: rgba(255, 255, 255, .07); border-color: var(--ap-rand-2); color: #fff; border-radius: 10px; }
.ap-dlg .over-limiet .btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.ap-dlg .over-limiet .knop { padding: 8px 16px; border-radius: 10px; font-size: 13px; }
.ap-dlg .over-limiet .knop.ol-toch { background: var(--ap-oranje); }
.ap-dlg .over-limiet .knop.ol-toch:hover { background: #c04c1f; }
.ap-dlg .over-limiet.is-mail { background: rgba(57, 135, 229, .14); border-color: rgba(57, 135, 229, .5); border-left-color: var(--ap-blauw-d); color: #d6e6ff; }
.ap-dlg .over-limiet.is-mail .ol-tekst b { color: #a9cbff; }
.ap-dlg .over-limiet.is-mail .ol-fout { color: #ff9a9a; }
.ap-dlg .over-limiet .knop.ol-mail-ja { background: var(--ap-blauw-d); }
.ap-dlg .over-limiet .knop.ol-mail-ja:hover { background: var(--ap-blauw); }

/* ── Route van het gekozen voorstel (1-10-2026) ───────────────────────────────────────────────────────────────── */
.ap-rp {
  --mk: var(--ap-lavendel); --ap-nieuw: #EA580C;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 0; display: flex; flex-direction: column; gap: 14px;
  /* De knoppenbalk onderin blijft staan: focus en "in beeld schuiven" landen erboven, niet erachter. */
  scroll-padding: 12px 0 84px;
}
.ap-rp > * { flex: none; }
.ap-rp-kop { display: flex; align-items: center; gap: 11px; animation: ap-rij-in .3s cubic-bezier(.2, .8, .2, 1); }
.ap-rp-wie { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-rp-wie h3 { margin: 0; font-family: var(--ap-kop); font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rp-wie p { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ap-lavendel-l); font-variant-numeric: tabular-nums; }
.ap-rp-klap { display: none; }
.ap-rp-klap .ap-ic { transform: rotate(-90deg); transition: transform .2s; }
.ap-rp.is-ingeklapt .ap-rp-klap .ap-ic { transform: rotate(90deg); }
.ap-rp-feiten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -4px; }
.ap-rp-ertussen { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 800; }
.ap-rp-regels { margin: -6px 0 0; }

.ap-rp-blok { display: flex; flex-direction: column; gap: 9px; }
.ap-rp-blok-kop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ap-rp-blok-kop h4 { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ap-tekst-3); }
.ap-rp-blok-kop h4 .ap-ic { width: 14px; height: 14px; color: var(--ap-lavendel); }
.ap-rp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ap-rand); }
.ap-rp-seg button {
  height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--ap-tekst-2); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.ap-rp-seg button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ap-rp-seg button[aria-pressed="true"] { background: #fff; color: var(--ap-navy-d); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6); }

/* De kaart: vaste hoogte (geen verspringing als Google laadt), afgerond in het donkere paneel. */
.ap-rp-kaartvak { position: relative; isolation: isolate; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .95); }
.ap-rp-kaart { position: relative; height: 300px; background: #141c48; }
.ap-rp-kaart:not(.vk-blik-kaart-leeg)::before {
  content: "Kaart laden…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ap-tekst-3); font-size: 12.5px; font-weight: 600;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .02) 25%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .02) 75%) 0 0 / 200% 100%,
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 100%;
  animation: ap-skelet 1.6s linear infinite;
}
/* Geen sleutel, Google laadt niet of geen stops: de eigen tekst van VoorstelKaart, op het donkere vlak. */
.ap-rp-kaart.vk-blik-kaart-leeg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center;
  color: var(--ap-tekst-2); font-size: 13px; font-weight: 600;
  background:
    radial-gradient(240px 160px at 50% 45%, rgba(139, 156, 245, .14), transparent 75%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 100%,
    #141c48;
}
.ap-rp-kaart.vk-blik-kaart-leeg small { max-width: 46ch; font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--ap-tekst-3); }
.ap-rp-kaart-label {
  position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none; padding: 4px 10px; border-radius: 999px;
  background: rgba(11, 16, 43, .82); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 11.5px; font-weight: 700;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}
.ap-rp-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; font-size: 11.5px; color: var(--ap-tekst-3); }
.ap-rp-legenda li { display: inline-flex; align-items: center; gap: 6px; }
/* Zelfde kleuren als de markers van VoorstelKaart: navy met witte rand, de nieuwe stop oranje. */
.ap-rp-pin {
  width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: #1F2A60; border: 2px solid #fff; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; line-height: 1;
}
.ap-rp-pin.is-nieuw { background: var(--ap-nieuw); }

/* Nu ↔ Na inplannen */
.ap-rp-samen { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.ap-rp-samen .ap-ic { width: 15px; height: 15px; margin-top: 1px; stroke-width: 2.4; }
.ap-rp-samen.is-goed { background: rgba(47, 191, 58, .12); border: 1px solid rgba(47, 191, 58, .42); color: #c8f7cc; }
.ap-rp-samen.is-goed .ap-ic { color: var(--ap-goed-d); }
.ap-rp-samen.is-rood { background: rgba(208, 59, 59, .15); border: 1px solid rgba(208, 59, 59, .55); color: #ffd6d6; }
.ap-rp-samen.is-rood .ap-ic { color: #ff8a8a; }
.ap-rp-samen.is-neutraal { background: rgba(255, 255, 255, .05); border: 1px solid var(--ap-rand); color: var(--ap-tekst-2); }
.ap-rp-tabel { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 5px; margin: -5px 0; font-size: 12.5px; }
.ap-rp-k-nr { width: 30px; }
.ap-rp-k-tijd { width: 52px; }
.ap-rp-k-tijd.is-na { width: 96px; }
/* Eigen tabelstijl: de algemene th/td-regels van furnit.css (lichte kop, randen) gelden hier niet. */
.ap-rp-tabel thead th {
  padding: 2px 6px 0; border: 0; background: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ap-tekst-3); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-rp-tabel .ap-rp-rij td {
  padding: 8px 6px; vertical-align: top; font-size: 12.5px; color: var(--ap-tekst); background: rgba(255, 255, 255, .045);
  border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background-color .15s;
}
.ap-rp-tabel .ap-rp-rij td:first-child { padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 10px 0 0 10px; }
.ap-rp-tabel .ap-rp-rij td:last-child { padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, .08); border-radius: 0 10px 10px 0; }
.ap-rp-rij { animation: ap-rij-in .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-rp-rij:nth-child(2) { animation-delay: .04s; }
.ap-rp-rij:nth-child(3) { animation-delay: .08s; }
.ap-rp-rij:nth-child(4) { animation-delay: .12s; }
.ap-rp-rij:nth-child(n + 5) { animation-delay: .16s; }
.ap-rp-tabel .ap-rp-rij:hover td, .ap-rp-tabel .ap-rp-rij.is-actief td { background-color: rgba(255, 255, 255, .085); }
/* De kleur links is van het tijdblok (de haak om de groep); de rij zelf zegt alleen wat er met de klant gebeurt. */
.ap-rp-tabel .ap-rp-rij.is-schuift td { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.ap-rp-tabel .ap-rp-rij.is-buiten td { background-color: rgba(208, 59, 59, .14); border-color: rgba(208, 59, 59, .48); }
.ap-rp-tabel .ap-rp-rij.is-nieuw td { background-color: rgba(234, 88, 12, .17); border-color: rgba(249, 115, 22, .55); }
.ap-rp-tabel .ap-rp-rij.is-weg td { opacity: .62; }
.ap-rp-tabel .ap-rp-rij.is-schuift:hover td, .ap-rp-tabel .ap-rp-rij.is-schuift.is-actief td { background-color: rgba(255, 255, 255, .11); }
.ap-rp-tabel .ap-rp-rij.is-buiten:hover td, .ap-rp-tabel .ap-rp-rij.is-buiten.is-actief td { background-color: rgba(208, 59, 59, .2); }
.ap-rp-tabel .ap-rp-rij.is-nieuw:hover td, .ap-rp-tabel .ap-rp-rij.is-nieuw.is-actief td { background-color: rgba(234, 88, 12, .24); }
.ap-rp-nr span {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #1F2A60; border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ap-rp-rij.is-nieuw .ap-rp-nr span { background: var(--ap-nieuw); border-color: #fff; box-shadow: 0 0 0 3px rgba(234, 88, 12, .25); }
.ap-rp-rij.is-actief .ap-rp-nr span { background: #7C3AED; }
.ap-rp-tijd { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 20px; }
.ap-rp-tijd.is-nu { color: var(--ap-tekst-2); }
.ap-rp-tijd.is-na { color: #fff; }
.ap-rp-tijd .ap-ic { width: 12px; height: 12px; margin: -2px 3px 0 -2px; }
.ap-rp-rij.is-schuift .ap-rp-tijd.is-nu { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .45); }
.ap-rp-rij.is-schuift .ap-rp-tijd.is-na { color: color-mix(in srgb, var(--tb) 45%, #fff); font-weight: 800; }
.ap-rp-rij.is-buiten .ap-rp-tijd.is-na { color: #ffa3a3; font-weight: 800; }
.ap-rp-rij.is-nieuw .ap-rp-tijd.is-na { color: #ffc29e; font-weight: 800; }
.ap-rp-tijd > span[aria-hidden] { color: var(--ap-tekst-3); }
.ap-rp-klant { min-width: 0; line-height: 1.35; }
.ap-rp-naam { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; min-height: 20px; }
.ap-rp-naam b { min-width: 0; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.ap-rp-klant small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ap-tekst-3); overflow-wrap: anywhere; }
.ap-rp-nieuw-tag {
  padding: 1px 7px; border-radius: 999px; background: var(--ap-nieuw); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ap-rp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; font-size: 11.5px; font-weight: 600; }
.ap-rp-status .ap-ic { width: 12px; height: 12px; flex: none; stroke-width: 2.6; }
.ap-rp-status.is-goed { color: #8fe596; }
.ap-rp-status.is-rood { color: #ffa3a3; }
.ap-rp-status.is-nieuw { color: #ffd2b8; }
.ap-rp-status.is-stil { color: var(--ap-tekst-3); font-weight: 500; }

/* Tijdblokken: dezelfde haak, kop en kleuren als op het planbord (.dl-tb), op de donkere ondergrond. */
.ap-rp-kolommen {
  display: grid; grid-template-columns: 30px 52px 96px minmax(0, 1fr); padding-left: 13px; margin-bottom: -3px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ap-tekst-3);
}
.ap-rp-kolommen span { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rp-tbs { display: flex; flex-direction: column; gap: 10px; }
.ap-rp-tb {
  position: relative; padding: 0 0 7px 10px; border-left: 3px solid var(--tb); border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb) 14%, transparent), transparent 62%);
  animation: ap-rij-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ap-rp-tb::before, .ap-rp-tb::after { content: ""; position: absolute; left: 0; width: 16px; height: 3px; background: var(--tb); border-radius: 0 3px 3px 0; }
.ap-rp-tb::before { top: 0; }
.ap-rp-tb::after { bottom: 0; }
.ap-rp-tb-kop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 9px 0 0 2px; font-size: 11px; }
.ap-rp-tb-kop b { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--tb) 55%, #fff); }
.ap-rp-tb-kop span { color: var(--ap-tekst-3); font-weight: 600; }
.ap-rp-tb .ap-rp-tabel { margin: -2px 0 -5px; }
.ap-rp-tabel .ap-rp-sr-kop th { padding: 0; height: 0; line-height: 0; }
.ap-rp-tbchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--tb) 18%, transparent); border: 1px solid color-mix(in srgb, var(--tb) 45%, transparent);
  color: color-mix(in srgb, var(--tb) 38%, #fff); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ap-rp-tbchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tb); }
.ap-rp-tbchip.is-oud { text-decoration: line-through; opacity: .8; }
.ap-rp-status .ap-ic + .ap-rp-tbchip { margin-left: -1px; }
.ap-rp-reis { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: 11.5px; line-height: 1.45; color: var(--ap-tekst-2); }
.ap-rp-reis .ap-ic { width: 13px; height: 13px; flex: none; margin-top: 1px; color: #ffb68a; }
.ap-rp-noot { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ap-tekst-3); }
.ap-rp-noot b { color: var(--ap-tekst-2); }
.ap-rp .ap-bevestig, .ap-rp .ap-kaart-balk, .ap-rp .ap-kaart-uit { margin-top: 0; }

/* Acties blijven onderin in beeld, ook bij een lange dag. */
.ap-rp-acties {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto -18px 0; padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(16, 22, 56, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Lege Route: uitleg en de voorstellen van de laatste vraag om meteen te kiezen. */
.ap-rp-leeg { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 4px 24px; text-align: center; }
.ap-rp-leeg > p { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.6; color: var(--ap-tekst-2); }
.ap-rp-leeg > p b { color: #fff; }
.ap-rp-leeg-bol {
  width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 35% 28%, #9aa8ff 0%, #5b56e0 50%, #1d2160 100%); border: 1px solid rgba(200, 195, 255, .6);
  box-shadow: 0 0 0 7px rgba(139, 156, 245, .09), 0 0 34px rgba(120, 110, 255, .55);
}
.ap-rp-leeg-bol .ap-ic { width: 26px; height: 26px; stroke-width: 1.8; }
.ap-rp-kies { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 2px; }
.ap-rp-kies-knop {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px 9px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  border: 1px solid var(--ap-rand); background: rgba(255, 255, 255, .05); color: var(--ap-tekst); font-size: 12.5px;
  transition: background .15s, border-color .15s, transform .15s; animation: ap-rij-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ap-rp-kies-knop:nth-child(2) { animation-delay: .05s; }
.ap-rp-kies-knop:nth-child(n + 3) { animation-delay: .1s; }
.ap-rp-kies-knop:hover { background: rgba(139, 156, 245, .14); border-color: rgba(185, 196, 255, .6); transform: translateX(2px); }
.ap-rp-kies-knop b { color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-rp-kies-knop > span:not(.ap-stip):not(.ap-kaart-id) { color: var(--ap-tekst-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-rp-kies-knop em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: rgba(217, 89, 38, .25); color: #ffcfba; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ap-rp-kies-knop .ap-kaart-id { margin-left: auto; }
.ap-rp-kies-knop > .ap-ic { width: 14px; height: 14px; color: var(--ap-tekst-3); }

/* ── Brein ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.ap-brein-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ap-brein-klap, .ap-brein-status { display: none; }
.ap-brein-klap .ap-ic { transform: rotate(-90deg); transition: transform .2s; }
.ap-brein.is-ingeklapt .ap-brein-klap .ap-ic { transform: rotate(90deg); }
.ap-brein-kop h3 { margin: 3px 0 0; font-family: var(--ap-kop); font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #fff; }
.ap-oog { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-tekst-3); }
.ap-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ap-gedempt); }
.ap-live.is-aan { background: var(--ap-goed-d); animation: ap-live 1.6s ease-out infinite; }
.ap-beurten { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ap-rand); }
.ap-beurten button { min-width: 24px; height: 24px; padding: 0 6px; border: 0; border-radius: 7px; background: none; color: var(--ap-tekst-2); font-size: 11.5px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.ap-beurten button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ap-beurten button[aria-pressed="true"] { background: linear-gradient(135deg, #8b9cf5, #6d5cff); color: #fff; }

/* Het brein (1-10-2026, rustiger): vlakke kern, dunne lijnen, alleen de bron die nu gebruikt wordt kleurt op. */
.ap-kern {
  position: relative; flex: none; height: 196px; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--ap-rand);
}
.ap-kern-doek { position: absolute; inset: 0; display: block; }
.ap-kern-bron { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; z-index: 1; }
.ap-kern-bron i {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #141B42; border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62);
  transition: background .25s, border-color .25s, color .25s;
}
.ap-kern-bron i .ap-ic { width: 15px; height: 15px; }
.ap-kern-bron small { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .62); white-space: nowrap; transition: color .25s; }
.ap-kern-bron.is-aan i { border-color: var(--kleur); color: var(--kleur); background: color-mix(in srgb, var(--kleur) 14%, #141B42); }
.ap-kern-bron.is-aan small { color: #fff; }
.ap-kern-midden { position: absolute; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; color: #c9d1ff; display: inline-flex; }
.ap-kern-midden .ap-ic { width: 22px; height: 22px; stroke-width: 1.7; }
.ap-kern-label {
  position: absolute; left: 50%; bottom: 9px; z-index: 2; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 3px 11px; border-radius: 999px;
  background: rgba(11, 16, 43, .78); border: 1px solid var(--ap-rand); font-size: 11.5px; font-weight: 600; color: var(--ap-tekst-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-kern.is-werkt .ap-kern-label { color: #fff; border-color: rgba(139, 156, 245, .5); }
.ap-kern.is-klaar .ap-kern-label { color: #bff5c3; border-color: rgba(47, 191, 58, .45); }
.ap-kern.is-fout .ap-kern-label { color: #ffc6c6; border-color: rgba(208, 59, 59, .5); }

.ap-brein-tellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ap-brein-tellers > div { padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.ap-brein-tellers dt { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-tekst-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-brein-tellers dd { margin: 2px 0 0; font-family: var(--ap-kop); font-size: 17px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-brein-vraag {
  margin: 0; font-size: 12px; font-style: italic; color: var(--ap-tekst-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ap-brein-leeg { padding: 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .16); font-size: 12.5px; line-height: 1.55; color: var(--ap-tekst-2); }
.ap-brein-leeg p { margin: 0; }

.ap-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-stap { position: relative; overflow: hidden; padding: 9px 10px 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); animation: ap-stap-in .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-stap-rij { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; align-items: center; gap: 9px; }
.ap-stap-icoon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 156, 245, .16); color: var(--ap-lavendel-l); }
.ap-stap-icoon .ap-ic { width: 14px; height: 14px; }
.ap-stap-tekst { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-stap-tekst b { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35; }
.ap-stap-tekst small { font-size: 11.5px; color: var(--ap-tekst-2); line-height: 1.4; }
.ap-stap-ms { font-size: 11px; color: var(--ap-tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-stap-status { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.ap-stap-status .ap-ic { width: 15px; height: 15px; stroke-width: 2.6; }
.ap-stap.is-klaar .ap-stap-status { color: var(--ap-goed-d); }
.ap-stap.is-klaar .ap-stap-status .ap-ic { animation: ap-pop .35s cubic-bezier(.2, .8, .2, 1); }
.ap-stap.is-fout { border-color: rgba(208, 59, 59, .45); }
.ap-stap.is-fout .ap-stap-status { color: #ff8a8a; }
.ap-stap.is-onderbroken { opacity: .7; }
.ap-stap.is-onderbroken .ap-stap-status { color: var(--ap-tekst-3); }
.ap-stap.is-bezig, .ap-stap.is-denkt { border-color: rgba(139, 156, 245, .5); background: rgba(139, 156, 245, .1); }
.ap-stap.is-bezig::after, .ap-stap.is-denkt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(185, 196, 255, .14) 50%, transparent 70%) 0 0 / 220% 100%; animation: ap-veegglans 1.6s linear infinite;
}
.ap-stap-klap .ap-ic { transition: transform .2s; }
.ap-stap-klap.is-open .ap-ic { transform: rotate(90deg); }

/* Mini-zoektocht */
.ap-mini { margin-top: 10px; padding: 10px 10px 11px; border-radius: 11px; background: rgba(8, 12, 34, .6); border: 1px solid rgba(139, 156, 245, .22); }
.ap-mini-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--ap-tekst-3); }
.ap-mini-kop b { font-family: var(--ap-kop); font-size: 12.5px; font-weight: 800; color: #fff; }
.ap-mini-knoppen { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.ap-mini-knop {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(139, 156, 245, .45); background: rgba(139, 156, 245, .14); color: var(--ap-lavendel-l); font-size: 11.5px; font-weight: 700;
}
.ap-mini-knop:hover { background: rgba(139, 156, 245, .3); color: #fff; }
.ap-mini-knop .ap-ic { width: 12px; height: 12px; }
.ap-mini-in { --veeg-eind: min(100%, calc(76px + var(--kol, 1) * 42px)); display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.ap-mini-wens { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-mini-wens .ap-chip { font-size: 11px; padding: 2px 8px; animation: ap-pop .3s backwards; }
.ap-mini-raster { position: relative; }
.ap-mini-cellen { position: relative; }
/* Hooguit 40px per dag: bij twee gevraagde dagen blokjes, geen lange balken. */
.ap-mini-rij { display: grid; grid-template-columns: 74px repeat(var(--kol), minmax(0, 40px)); gap: 2px; align-items: center; }
.ap-mini-rij + .ap-mini-rij { margin-top: 2px; }
.ap-mini-rij.is-kop { margin-bottom: 3px; }
.ap-mini-dag { font-size: 9.5px; color: var(--ap-tekst-3); text-align: center; white-space: nowrap; overflow: hidden; }
.ap-mini-naam { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: var(--ap-tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ap-links .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-mini-naam .ap-stip { width: 6px; height: 6px; box-shadow: none; }
.ap-cel { display: block; height: 13px; border-radius: 3px; background: var(--ap-scan-x); animation: ap-cel .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-cel.c-k { background: var(--ap-scan-k); box-shadow: 0 0 7px rgba(47, 191, 58, .8); }
.ap-cel.c-f { background: var(--ap-scan-f); }
.ap-cel.c-v { background: var(--ap-scan-v); }
.ap-cel.c-n { background: var(--ap-scan-n); }
.ap-cel.c-h { background: var(--ap-scan-h); }
.ap-cel.c-p { background: var(--ap-scan-p); }
.ap-cel.c-t { background: var(--ap-scan-t); }
.ap-cel.c-o { background: var(--ap-scan-o); }
.ap-cel.c-d { background: var(--ap-scan-d); }
.ap-cel.c-a { background: var(--ap-scan-a); }
.ap-cel.c-x { background: var(--ap-scan-x); }
.ap-cel.is-stil { display: inline-block; width: 10px; height: 10px; animation: none; box-shadow: none; }
.ap-mini-lijn {
  position: absolute; top: -3px; bottom: -3px; left: 100%; width: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, #dfe4ff 20%, #8b9cf5 80%, transparent); box-shadow: 0 0 10px 2px rgba(139, 156, 245, .75);
  animation: ap-veeg var(--veeg, 1500ms) linear backwards;
}
.ap-mini-voet { margin: 6px 0 0; font-size: 10.5px; color: var(--ap-tekst-3); }
.ap-mini-tellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; }
.ap-mini-tellers > div { padding: 5px 7px; border-radius: 8px; background: rgba(255, 255, 255, .045); min-width: 0; }
.ap-mini-tellers dt { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-tekst-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mini-tellers dd { margin: 1px 0 0; font-family: var(--ap-kop); font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ap-mini-tellers .is-goed dd { color: #8fe596; }
.ap-mini-tellers .is-af dd { color: #ffb899; }
.ap-mini-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 11px; margin: 0; padding: 0; font-size: 10.5px; color: var(--ap-tekst-3); }
.ap-mini-legenda li { display: inline-flex; align-items: center; gap: 5px; }
.ap-mini-opties { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.ap-mini-opties li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); animation: ap-schuif-in .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ap-mini-opties li:first-child { background: rgba(47, 191, 58, .1); border-color: rgba(47, 191, 58, .45); }
.ap-mini-opties li.is-ertussen { border-color: rgba(236, 131, 90, .5); }
.ap-mini-plek { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 156, 245, .22); font-family: var(--ap-kop); font-size: 11px; font-weight: 800; color: #fff; }
.ap-mini-opties li:first-child .ap-mini-plek { background: var(--ap-goed-d); }
.ap-mini-optie { min-width: 0; display: flex; flex-direction: column; }
.ap-mini-optie b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mini-optie b .ap-stip { width: 7px; height: 7px; box-shadow: none; }
.ap-mini-optie small { font-size: 11px; color: var(--ap-tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mini-opties .ap-chip { font-size: 10.5px; padding: 1px 7px; }
.ap-mini-id { font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ap-tekst-3); }
.ap-mini-leeg { margin: 0; font-size: 12px; color: var(--ap-tekst-2); animation: ap-rij-in .4s backwards; }
.ap-mini-fout { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: 12px; color: #ffd3c0; }
.ap-mini-fout .ap-ic { width: 14px; height: 14px; color: var(--ap-ernstig); }
.ap-mini-skelet { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ap-mini-skelet i {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .05) 75%) 0 0 / 200% 100%; animation: ap-skelet 1.3s linear infinite;
}
.ap-mini-skelet i:nth-child(2) { width: 82%; }
.ap-mini-skelet i:nth-child(3) { width: 64%; }

/* ── Smal ────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ap-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ap-zij { order: -1; max-height: 38vh; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  /* Route gekozen: meer hoogte voor kaart en vergelijking; ingeklapt blijft het één regel. */
  .ap-zij.is-route:not(.is-ingeklapt) { max-height: 56vh; }
  .ap-zij-tabs { margin: 10px 14px 0; }
  .ap-zij .ap-brein { padding: 10px 14px 14px; }
  .ap-rp { padding: 10px 14px 0; gap: 12px; }
  .ap-rp-acties { margin: 0 -14px; padding: 10px 14px 12px; }
  .ap-rp-klap { display: inline-flex; flex: none; }
  .ap-rp.is-ingeklapt { padding-bottom: 12px; }
  .ap-rp.is-ingeklapt > :not(.ap-rp-kop) { display: none; }
  .ap-rp.is-ingeklapt .ap-kaart-id { display: none; }
  .ap-rp-kaart { height: 220px; }
  .ap-kern { height: 168px; }
  .ap-gesprek { border-right: 0; min-height: 0; }
  .ap-kop-klacht { display: none; }
  .ap-brein-klap { display: inline-flex; flex: none; }
  .ap-brein.is-ingeklapt { padding-bottom: 12px; }
  .ap-brein.is-ingeklapt > :not(.ap-brein-kop) { display: none; }
  .ap-brein.is-ingeklapt .ap-brein-kop { align-items: center; }
  .ap-brein.is-ingeklapt .ap-brein-kop h3 { display: none; }
  .ap-brein.is-ingeklapt .ap-brein-status { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ap-brein.is-ingeklapt .ap-brein-kop > div:first-child { min-width: 0; }
  .ap-brein.is-ingeklapt .ap-beurten { display: none; }
}
@media (max-width: 760px) {
  .ap-laag { padding: 0; }
  .ap-dlg { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  /* Rechts staan alleen nog twee knoppen (Nieuw gesprek als icoon, Sluiten): die passen naast de titel. */
  .ap-kop { padding: 12px 14px; gap: 10px; }
  .ap-kop-icoon { width: 32px; height: 32px; }
  .ap-kop-rechts { gap: 6px; }
  .ap-verberg-smal { display: none; }
  .ap-stroom { padding: 14px 14px 10px; }
  .ap-opsteller { padding: 10px 12px; }
  .ap-bubbel.is-vraag { max-width: 90%; }
  .ap-brein-tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-mailbalk { margin-left: 0; }
  .ap-rp-kop .ap-kaart-id { display: none; }
  .ap-kaart { padding: 13px 13px 11px 15px; }
  .ap-kaart-acties > * { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .ap-opsteller-hint { display: none; }
  /* Telefoon: het icoon links wijkt, zodat de titel ruimte houdt naast de knoppen. */
  .ap-kop-icoon { display: none; }
}

/* ── Keyframes ───────────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes ap-laag-in { from { opacity: 0; } }
@keyframes ap-dlg-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes ap-rij-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ap-kaart-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes ap-stap-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes ap-schuif-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes ap-links { from { opacity: 0; transform: translateX(-10px); } }
@keyframes ap-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ap-pil-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes ap-draai { to { transform: rotate(360deg); } }
@keyframes ap-golf { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ap-stip { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ap-live { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 58, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(47, 191, 58, 0); } }
@keyframes ap-nieuw-puls { 0% { box-shadow: 0 0 0 0 rgba(139, 156, 245, .55), 0 0 14px #8b9cf5; } 80%, 100% { box-shadow: 0 0 0 9px rgba(139, 156, 245, 0), 0 0 14px #8b9cf5; } }
@keyframes ap-succes { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 58, .55); } 100% { box-shadow: 0 0 0 16px rgba(47, 191, 58, 0); } }
@keyframes ap-veegglans { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes ap-cel { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.35); filter: brightness(1.9); } 100% { transform: scale(1); filter: none; } }
@keyframes ap-veeg { 0% { left: 76px; opacity: 1; } 94% { opacity: 1; } 100% { left: var(--veeg-eind, 100%); opacity: 0; } }
@keyframes ap-skelet { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ap-snel-puls { 0%, 100% { box-shadow: 0 0 0 3px rgba(250, 178, 25, .14), 0 8px 20px -10px rgba(250, 178, 25, .9); } 50% { box-shadow: 0 0 0 6px rgba(250, 178, 25, .06), 0 8px 24px -8px rgba(250, 178, 25, 1); } }

/* Geen beweging gewenst: alles meteen in de eindstand. Het brein-doek tekent dan één stilstaand beeld (BreinKern). */
@media (prefers-reduced-motion: reduce) {
  .ap-laag,
  .ap-laag *,
  .ap-laag *::before,
  .ap-laag *::after,
  .ap-agent-knop,
  .ap-agent-knop *,
  .ap-agent-knop *::before,
  .ap-agent-knop *::after {
    animation: none !important;
    transition: none !important;
  }
  .ap-mini-lijn { display: none; }
}