/* AIDG-huisstijl uit het logo: donkerblauw #153041, petrol #028bab, oranje #ef6d00 (alleen accent). */
html, .dark {
  --surface-submit: #153041;
  --surface-submit-hover: #0d2230;
  --brand-purple: #028bab;
  --ring-primary: #028bab;
  --aidg-blauw: #153041;
  --aidg-petrol: #028bab;
  --aidg-oranje: #ef6d00;
}
.dark { --surface-submit: #028bab; --surface-submit-hover: #0a7a95; }

/* Standaard zijn links en accenten groen; bij AIDG is dat petrol. */
.text-green-500, .text-green-600, .text-green-700, .hover\:text-green-700:hover { color: var(--aidg-petrol) !important; }
.dark .text-green-500, .dark .text-green-600, .dark .text-green-700 { color: #4cc3dd !important; }
.bg-green-500, .bg-green-600, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--surface-submit) !important; }
.border-green-500, .focus\:border-green-500:focus { border-color: var(--aidg-petrol) !important; }
button[role='switch'][aria-checked='true'], [data-state='checked'] { background-color: var(--aidg-petrol) !important; }

/* Dunne signaallijn bovenaan in de logokleuren. */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aidg-blauw) 0 70%, var(--aidg-petrol) 70% 92%, var(--aidg-oranje) 92% 100%); z-index: 9999; pointer-events: none; }

/* ---- Live browser als paneel (aidg-app.js, docs/browser-paneel-uitrol.md). Alles hieronder werkt
   alleen als het script het paneel aanzet (klassen op <html>), dus niet in de Brain-chats. */
#aidg-paneel, .aidg-paneel-knop, .aidg-inline-kaart {
  --ap-bg: #ffffff; --ap-tekst: #1d2a33; --ap-zacht: #5b6b75; --ap-rand: #d5dde2; --ap-vlak: #eef2f4;
  font: 13px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.dark #aidg-paneel, .dark .aidg-paneel-knop, .dark .aidg-inline-kaart {
  --ap-bg: #1b2328; --ap-tekst: #e6edf0; --ap-zacht: #9aabb4; --ap-rand: #2c3840; --ap-vlak: #0f1417;
}
#aidg-paneel[hidden], .aidg-paneel-knop[hidden], #aidg-paneel .aidg-pk[hidden] { display: none !important; }
#aidg-paneel {
  position: fixed; z-index: 45; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ap-vlak); color: var(--ap-tekst); box-sizing: border-box;
}
#aidg-paneel * { box-sizing: border-box; }
/* Bovenbalk: één rustige regel (stip, naam, status), iconen rechts. */
.aidg-paneel-balk {
  display: flex; align-items: center; gap: 0; height: 38px; flex: none; padding: 0 4px 0 2px;
  background: var(--ap-bg); border-bottom: 1px solid var(--ap-rand);
}
.aidg-paneel-kop {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; white-space: nowrap;
}
.aidg-paneel-kop { overflow: hidden; }
.aidg-paneel-kop b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: none; max-width: 100%; }
.aidg-paneel-status { color: var(--ap-zacht); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aidg-paneel-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--ap-zacht); flex: none; display: inline-block; }
.aidg-paneel-stip.ai { background: #0b7a5c; box-shadow: 0 0 0 3px rgba(11, 122, 92, .15); }
.aidg-paneel-stip.jij { background: var(--aidg-oranje); box-shadow: 0 0 0 3px rgba(239, 109, 0, .15); }
.aidg-pk {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ap-zacht);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.aidg-pk svg { display: block; }
.aidg-pk:hover, .aidg-paneel-kop:hover { background: var(--ap-vlak); color: var(--ap-tekst); }
.aidg-pk[data-doe="sluiten"]:hover { color: #c0392b; }
.aidg-pk:focus-visible, .aidg-paneel-kop:focus-visible { outline: 2px solid var(--aidg-petrol); outline-offset: -2px; }
.aidg-paneel-inhoud { flex: 1; min-height: 0; position: relative; }
.aidg-paneel-inhoud iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--ap-vlak); }
.aidg-paneel-greep { position: absolute; z-index: 2; touch-action: none; }
.aidg-paneel-sleept #aidg-paneel iframe { pointer-events: none; }
.aidg-paneel-sleept, .aidg-paneel-sleept * { user-select: none; -webkit-user-select: none; }

/* Computer, rechts naast het gesprek; het gesprek krimpt mee (geen overlap). */
html.aidg-paneel-rechts #root { margin-right: var(--aidg-pb); }
#aidg-paneel.rechts { top: 0; right: 0; bottom: 0; width: var(--aidg-pb); border-left: 1px solid var(--ap-rand); }
#aidg-paneel.rechts .aidg-paneel-greep { left: -4px; top: 0; bottom: 0; width: 10px; cursor: col-resize; }
#aidg-paneel.rechts .aidg-paneel-greep:hover, .aidg-paneel-sleept #aidg-paneel.rechts .aidg-paneel-greep { background: linear-gradient(90deg, transparent 3px, var(--aidg-petrol) 3px 6px, transparent 6px); }
/* Ingeklapt rechts: een smalle strook met de stip; klik = uitklappen. */
#aidg-paneel.rechts.ingeklapt .aidg-paneel-balk { flex-direction: column; height: auto; width: 100%; padding: 4px 0; border-bottom: 0; gap: 4px; }
#aidg-paneel.rechts.ingeklapt .aidg-paneel-kop { flex: none; writing-mode: vertical-rl; height: auto; width: 30px; padding: 8px 0; justify-content: flex-start; }
#aidg-paneel.rechts.ingeklapt .aidg-paneel-status,
#aidg-paneel.rechts.ingeklapt [data-doe="groter"], #aidg-paneel.rechts.ingeklapt [data-doe="kleiner"], #aidg-paneel.rechts.ingeklapt [data-doe="plek"],
#aidg-paneel.rechts.ingeklapt .aidg-paneel-greep { display: none; }
#aidg-paneel.rechts.ingeklapt { background: var(--ap-bg); }

/* Boven het gesprek (telefoon altijd; tablet/computer als je dat kiest). Het gesprek (#root) neemt de
   rest van de zichtbare hoogte (visualViewport: met het toetsenbord open blijft het invoerveld erboven).
   AIDG Chat 0.8.7 zet de hoogte van het gesprek NIET via #root maar op het eerste kind ervan:
   <div class="flex" style="height: calc(100dvh - <banner>px)"> (client/src/routes/Root.tsx), met daaronder
   een keten van h-full (zijbalk/hoofdkolom → ChatView → main → kolom met berichtenlijst + formulier).
   Dat kind bleef 100dvh hoog en #root sneed het af: het invoerveld viel onder het paneel uit beeld.
   Daarom wordt #root een flexkolom en krimpt dat kind (en alles wat AIDG Chat op 100dvh/100vh of
   h-screen zet) tot de ruimte van #root; de h-full-keten eronder volgt vanzelf. */
html.aidg-paneel-boven, html.aidg-paneel-boven body { overflow: hidden; }
html.aidg-paneel-boven #root {
  position: fixed; left: 0; right: 0; overflow: hidden; display: flex; flex-direction: column;
  top: calc(var(--aidg-vt, 0px) + var(--aidg-ph) + env(safe-area-inset-top, 0px));
  height: calc(var(--aidg-vh, 100dvh) - var(--aidg-ph) - env(safe-area-inset-top, 0px));
}
html.aidg-paneel-boven #root > * { flex: none; }
html.aidg-paneel-boven #root > [style*="vh"], html.aidg-paneel-boven #root > .h-screen, html.aidg-paneel-boven #root > .h-dvh {
  flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-height: 100% !important;
}
html.aidg-paneel-boven #root * [style*="100dvh"], html.aidg-paneel-boven #root * [style*="100vh"],
html.aidg-paneel-boven #root * .h-screen, html.aidg-paneel-boven #root * .h-dvh {
  height: 100% !important; min-height: 0 !important; max-height: 100% !important;
}
#aidg-paneel.boven {
  top: var(--aidg-vt, 0px); left: 0; right: 0; height: calc(var(--aidg-ph) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: 12px;
  border-bottom: 1px solid var(--ap-rand); box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
#aidg-paneel.boven .aidg-paneel-greep { left: 0; right: 0; bottom: 0; height: 12px; cursor: row-resize; background: var(--ap-bg); }
#aidg-paneel.boven .aidg-paneel-greep::after {
  content: ''; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ap-rand);
}
#aidg-paneel.boven .aidg-paneel-greep:hover::after, .aidg-paneel-sleept #aidg-paneel.boven .aidg-paneel-greep::after { background: var(--aidg-petrol); }
#aidg-paneel.boven.ingeklapt { padding-bottom: 0; }
#aidg-paneel.boven.ingeklapt .aidg-paneel-inhoud { display: none; }
#aidg-paneel.boven.ingeklapt .aidg-paneel-greep, #aidg-paneel.boven.ingeklapt [data-doe="groter"], #aidg-paneel.boven.ingeklapt [data-doe="kleiner"] { display: none; }
#aidg-paneel.boven.ingeklapt .aidg-paneel-balk { border-bottom: 0; }
/* Telefoon en tablet (aanraakscherm): iets grotere tikvlakken. */
#aidg-paneel.telefoon .aidg-pk, #aidg-paneel.aanraak .aidg-pk { width: 34px; height: 34px; }
#aidg-paneel.telefoon .aidg-paneel-greep { height: 14px; }
#aidg-paneel.telefoon { padding-bottom: 14px; }
#aidg-paneel.telefoon.ingeklapt { padding-bottom: 0; }
/* Ingeklapt rechts houdt het beeld de stroom (status), maar het iframe is onzichtbaar. */
#aidg-paneel.rechts.ingeklapt .aidg-paneel-inhoud { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* De knop "Live browser": alleen een klein groen stipje rechtsboven (verschijnt als de browser in dit
   gesprek gebruikt is). Tekst alleen als uitleg bij aanwijzen; knippert zachtjes als de AI bezig is. */
.aidg-paneel-knop {
  position: fixed; z-index: 44; top: calc(60px + env(safe-area-inset-top, 0px)); right: 14px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid var(--ap-rand); background: var(--ap-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10); cursor: pointer;
}
.aidg-paneel-knop > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aidg-paneel-knop:hover { border-color: var(--aidg-petrol); }
.aidg-paneel-knop .aidg-paneel-stip { background: #0b7a5c; width: 10px; height: 10px; }
.aidg-paneel-knop.werkt { border-color: #0b7a5c; }
.aidg-paneel-knop.werkt .aidg-paneel-stip { animation: aidg-stip 1.2s ease-in-out infinite; }
#aidg-paneel .aidg-pk[data-doe="vanzelf"] { opacity: .45; }
#aidg-paneel .aidg-pk[data-doe="vanzelf"].aan { opacity: 1; color: #0b7a5c; }
@keyframes aidg-stip { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .aidg-paneel-knop.werkt .aidg-paneel-stip { animation: none; } }

/* In het bericht: kaartje in plaats van het kleine venster. */
.aidg-inline-kaart {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--ap-rand); border-radius: 10px; background: var(--ap-bg); color: var(--ap-tekst);
}
.aidg-inline-kaart span { flex: 1; min-width: 180px; }
.aidg-inline-kaart button {
  border: 1px solid var(--surface-submit); background: var(--surface-submit); color: #fff; border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
}

/* Telefoon: het paneel volgt het zichtbare deel van het scherm (visualViewport), zodat bij een
   ingezoomde pagina geen knop rechts buiten beeld valt. */
#aidg-paneel.boven.telefoon { left: var(--aidg-vl, 0px); right: auto; width: var(--aidg-vw, 100%); }
/* Compact (telefoon, uitgeklapt): de meekijkpagina toont ▴ en × zelf; onze balk weg = meer beeld. */
#aidg-paneel.compact .aidg-paneel-balk { display: none; }
/* ---- Document van AIDG Werkplek in hetzelfde paneel (aidg-app.js, docs/werkplek-paneel.md). */
.aidg-paneel-inhoud iframe[hidden] { display: none; }
.aidg-paneel-stip.doc { background: var(--aidg-petrol); box-shadow: 0 0 0 3px rgba(2, 139, 171, .15); }
#aidg-paneel.document .aidg-paneel-kop b { flex: 0 1 auto; }
/* Bijgehouden wijzigingen van het document (aidg-app.js, wijzTel): balk boven de editor. */
.aidg-paneel-wijz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border-bottom: 1px solid var(--ap-rand); background: var(--ap-vlak); color: var(--ap-tekst); font-size: 12.5px; }
.aidg-paneel-wijz[hidden] { display: none; }
.aidg-paneel-wijz span { flex: 1 1 auto; min-width: 140px; }
.aidg-paneel-wijz button { border: 1px solid var(--ap-rand); background: var(--ap-bg); color: var(--ap-tekst); border-radius: 8px; padding: 4px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.aidg-paneel-wijz button.aidg-wijz-ja { border-color: var(--aidg-petrol); background: var(--aidg-petrol); color: #fff; }
.aidg-paneel-wijz button.aidg-wijz-nee { border-color: #b42318; color: #b42318; }
.aidg-paneel-wijz button:disabled { opacity: .55; cursor: default; }
/* Melding over het document (nakijken, inloggen): midden in het paneel; de tip onderaan, klein. */
.aidg-paneel-melding { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ap-vlak); }
.aidg-paneel-melding[hidden] { display: none; }
.aidg-paneel-melding-vak { max-width: 360px; text-align: center; color: var(--ap-tekst); font-size: 14px; }
.aidg-paneel-melding-vak p { margin: 0 0 8px; }
.aidg-paneel-melding-knoppen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.aidg-paneel-melding button, .aidg-inline-kaart a.aidg-kaart-tab {
  border: 1px solid var(--ap-rand); background: var(--ap-bg); color: var(--ap-tekst); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
/* Documentkaartje: één rustige regel (naam · Naast de chat · Nieuw tabblad) in plaats van een blok met grote knop; het
   nam in het antwoord te veel ruimte (VDL, 12-10-2026). */
.aidg-inline-kaart.aidg-werkplek-kaart { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; max-width: 100%; margin: 2px 0; padding: 3px 12px 3px 10px; border: 1px solid var(--ap-rand); border-radius: 999px; background: var(--ap-vlak); font-size: 12.5px; line-height: 1.5; }
.aidg-werkplek-kaart .aidg-paneel-stip { width: 7px; height: 7px; box-shadow: none; margin: 0 -4px 0 0; }
.aidg-werkplek-kaart span { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aidg-werkplek-kaart button, .aidg-werkplek-kaart a.aidg-kaart-tab { border: 0; background: none; padding: 0; border-radius: 0; color: var(--aidg-petrol); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.aidg-werkplek-kaart a.aidg-kaart-tab { color: var(--ap-zacht); font-weight: 500; }
.aidg-werkplek-kaart button:hover, .aidg-werkplek-kaart a.aidg-kaart-tab:hover { text-decoration: underline; }
.aidg-paneel-melding button.hoofd { border-color: var(--surface-submit); background: var(--surface-submit); color: #fff; }
.aidg-paneel-melding.tip { inset: auto 0 0 0; padding: 6px 10px; background: var(--ap-bg); border-top: 1px solid var(--ap-rand); justify-content: flex-start; }
.aidg-paneel-melding.tip .aidg-paneel-melding-vak { max-width: none; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 13px; }
.aidg-paneel-melding.tip p { margin: 0; }
.aidg-paneel-melding.tip .aidg-paneel-melding-knoppen { margin: 0; }
.aidg-paneel-melding.tip button { padding: 3px 10px; }
#aidg-paneel.rechts.ingeklapt .aidg-paneel-melding { display: none; }
/* Onzichtbaar iframe dat nakijkt of je bij de Werkplek bent ingelogd. */
iframe.aidg-werkplek-status { position: fixed; left: -10px; top: -10px; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.aidg-werkplek-kaart b { font-weight: 600; word-break: break-word; }

/* "Websites bedienen" vanzelf aanzetten: het MCP-menu gaat even onzichtbaar open (aidg-app.js). */
html.aidg-mcp-stil [role="menu"], html.aidg-mcp-stil [data-backdrop], html.aidg-mcp-stil [role="tooltip"] {
  opacity: 0 !important; transition: none !important; animation: none !important;
}

/* ---- AIDG in het menu (aidg-app.js, blok aidg-menu): "AI buiten de EU toestaan" en het AIDG-portaal.
   Alleen op aichat.aidg.nl; het script maakt de elementen, dus in de Brain-chats doet dit niets. */
.aidg-instelling {
  --ai-rand: #d5dde2; --ai-zacht: #5b6b75; --ai-uit: #c3ccd2;
  display: block; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--ai-rand); border-radius: 12px;
  font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left;
}
.dark .aidg-instelling { --ai-rand: #2c3840; --ai-zacht: #9aabb4; --ai-uit: #3a4750; }
.aidg-instelling-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aidg-instelling-kop { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aidg-instelling-titel { font-weight: 600; }
.aidg-instelling-nu { font-size: 12px; color: var(--ai-zacht); }
.aidg-instelling-uitleg { margin: 8px 0 0; font-size: 13px; color: var(--ai-zacht); }
.aidg-instelling-uitleg[hidden] { display: none; }
.aidg-instelling-uitleg a { color: var(--aidg-petrol); text-decoration: underline; }
.dark .aidg-instelling-uitleg a { color: #4cc3dd; }
.aidg-instelling.grijs .aidg-instelling-titel { opacity: .6; }
/* Eigen schakelaar (niet [data-state]: die kleurt aidg.css hierboven al voor AIDG Chat). */
.aidg-schakelaar {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 0; cursor: pointer;
  background: var(--ai-uit); transition: background .15s;
}
.aidg-schakelaar[aria-checked="true"] { background: var(--aidg-petrol); }
.aidg-schakelaar:disabled { cursor: default; opacity: .5; }
.aidg-schakelaar:focus-visible { outline: 2px solid var(--aidg-petrol); outline-offset: 2px; }
.aidg-schakelaar-bol {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.aidg-schakelaar[aria-checked="true"] .aidg-schakelaar-bol { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .aidg-schakelaar, .aidg-schakelaar-bol { transition: none; } }
/* Klein venster vanuit het gebruikersmenu. */
.aidg-venster {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .5);
}
.aidg-venster-kaart {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 36px 16px 4px; border-radius: 16px; background: #fff; color: #1d2a33; box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.dark .aidg-venster-kaart { background: #1b2328; color: #e6edf0; }
.aidg-venster-dicht {
  position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.aidg-venster-dicht:hover { background: rgba(127, 127, 127, .15); }
/* Menu-items en de vaste link in de zijbalk. */
.aidg-menu-item { display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; }
.aidg-menu-tekst { flex: 1; }
.aidg-menu-stand { font-size: 12px; opacity: .65; }
.aidg-zijbalk-portaal {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 2px; padding: 8px 10px; border-radius: 12px;
  font-size: 14px; color: inherit; text-decoration: none;
}
.aidg-zijbalk-portaal:hover { background: var(--surface-active-alt, rgba(127, 127, 127, .12)); }
/* Cloud en Office (AIDG Werkplek): titel met een korte uitleg eronder, in de zijbalk en het gebruikersmenu. */
.aidg-zijbalk-werkplek, .aidg-menu-werkplek { align-items: flex-start; }
.aidg-zijbalk-werkplek svg, .aidg-menu-werkplek svg { flex: none; margin-top: 1px; }
.aidg-link-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.aidg-link-titel { font-weight: 600; }
.aidg-link-uitleg { font-size: 12px; opacity: .7; white-space: normal; }
/* Knoppen onder het invoerveld op één regel (08-10-2026). AIDG Chat zet de rij (Zoeken, Code, Skills, …, MCP) met
   flex-wrap; was er te weinig ruimte, dan viel het MCP-knopje (altijd als laatste) naar een tweede regel, ook op
   mobiel. Nu: nooit afbreken; is de werkbalk smal (container-query op de @container-werkbalk van AIDG Chat), dan
   alleen iconen; past het dan nog niet, dan schuift de rij opzij in plaats van onder elkaar. */
.\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 {
  flex-wrap: nowrap; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 2px; margin: -2px; /* ruimte voor de schaduw van de knoppen */
}
.\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2::-webkit-scrollbar { display: none; }
.\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 > * { flex-shrink: 0; }
@container (max-width: 720px) {
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button .md\:block { display: none; }
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button.md\:w-full,
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button.md\:w-fit {
    width: auto; min-width: 2.25rem; padding: 0 .5rem; justify-content: center;
  }
}
/* MCP-knopje (h-9 min-w-9, altijd als laatste) blijft zichtbaar aan het eind van de rij, ook als die opzij schuift. */
.\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 > button.min-w-9:last-child {
  position: sticky; right: 0; z-index: 1; background-color: var(--surface-chat, var(--surface-primary, #fff));
}
/* Telefoon: kleinere knoppen en minder tussenruimte, zodat alles meestal past zonder te schuiven. */
@container (max-width: 430px) {
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 { gap: .25rem; }
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button.size-9,
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button.h-9 { height: 2rem; min-width: 2rem; }
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 button.size-9 { width: 2rem; padding: .375rem; }
}
/* Verstuurknop altijd in beeld (12-10-2026, docs/invoerbalk-mobiel.md). Het blok hierboven liet de knoppenrij opzij
   schuiven, maar dat werkte niet: de rij gaf haar volle breedte (alle knoppen naast elkaar) als minimale breedte door
   aan het invoervak (flex-items houden standaard min-width:auto), dus werd het hele invoervak breder dan het scherm en
   vielen microfoon en verstuurknop rechts buiten beeld. (De klasse @container van AIDG Chat staat niet in de gebouwde
   CSS: container-type bleef "normal", dus ook de container-query's hierboven deden niets; dat laten we zo, de computer
   blijft daardoor ongewijzigd.) Nu telt de breedte van de rij niet meer mee (contain: inline-size, geen query-container)
   en mogen de vakken eromheen krimpen; links (paperclip) en rechts (cirkel, microfoon, stop/versturen) krimpen nooit,
   alleen de middelste knoppen schuiven, zonder schuifbalk en met een vervaging aan de rand waar nog meer staat. */
.\@container.items-between { contain: inline-size; min-width: 0; }
form :has(> .\@container.items-between), form :has(> * > .\@container.items-between),
form :has(> * > * > .\@container.items-between) { min-width: 0; }
.\@container.items-between > :not(.relative.flex.flex-wrap) { flex-shrink: 0; }
.\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 { flex: 0 1 auto; min-width: 0; }
/* Vervaging alleen als de rij echt schuift (scroll-timeline: zonder schuifruimte is de animatie inactief = geen rand).
   Links vervaagt wat eronder verdwenen is; rechts de rest, of (staat het MCP-knopje vast rechts) een zachte schaduw
   links van dat knopje. Browsers zonder animation-timeline: geen vervaging, wel schuiven. */
@property --aidg-rand-l { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --aidg-rand-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
@keyframes aidg-rand {
  0% { --aidg-rand-l: 0px; --aidg-rand-r: 20px; }
  8% { --aidg-rand-l: 20px; }
  92% { --aidg-rand-r: 20px; }
  100% { --aidg-rand-l: 20px; --aidg-rand-r: 0px; }
}
@supports (animation-timeline: scroll(self inline)) {
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 {
    animation: aidg-rand linear both; animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--aidg-rand-l), #000 calc(100% - var(--aidg-rand-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--aidg-rand-l), #000 calc(100% - var(--aidg-rand-r)), transparent 100%);
  }
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2:has(> button.min-w-9:last-child) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--aidg-rand-l), #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--aidg-rand-l), #000 100%);
  }
  .\@container.items-between > .relative.flex.flex-wrap.items-center.gap-2 > button.min-w-9:last-child {
    box-shadow: calc(-1 * var(--aidg-rand-r)) 0 12px -6px var(--surface-chat, var(--surface-primary, #fff));
  }
}