:root { --ink: #161619; --cta: #13C2E9; --cta-h: #0ea8cb; --bg: #fbfbfb; --grond: #f6f6f7; --surface: #fff; --muted: #717179; --zacht: #9c9ca3; --border: #ececed; --border-d: #e7e7ea; --zij: #fff; --actief: rgba(22,22,25,.06); --geel: #fef3c7; --geel-t: #b45309; --cta-t: #e0f7fd; --goed: #16a34a; --goed-z: #dcfce7; --fout: #dc2626; --fout-z: #fee2e2; } /* de tokens van het HelloGekko-ontwerpsysteem (HelloInsights, globals.css): Inter voor alles, Outfit voor het woordmerk en koppen; 8 px voor knoppen en velden, 12 px voor kaarten; kaarten zonder rand op grijs (#f6f6f7); één hairline (#ececed) */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 14 px voor de bediening, zoals HelloInsights (text-sm); lezen (berichten, document) op 15 px */
p { margin: 0; }
svg { flex-shrink: 0; }
.wordmark { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.025em; }
.wordmark span { font-weight: 300; } /* "Hello" vet, "AI" licht, alles inkt: zoals HelloInsights */
.wordmark.groot { font-size: 30px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.input { border: 1px solid var(--border); border-radius: 8px; height: 36px; padding: 0 10px; font-size: 14px; background: var(--surface); width: 100%; }
textarea.input { height: auto; padding: 8px 10px; }
.input::placeholder { color: var(--zacht); }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; padding: 0 12px; border-radius: 8px; white-space: nowrap; } /* de standaardknop van HelloInsights: 32 px hoog, inkt, 14 px medium */
.knop:hover { background: rgba(22,22,25,.8); }
.knop-licht { display: inline-flex; align-items: center; gap: 6px; height: 32px; background: var(--surface); border: 1px solid var(--border); padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.knop-licht:hover { background: var(--grond); }
.knop.klein { height: 32px; }
.link { color: var(--muted); text-decoration: underline; }
.icoon { display: inline-flex; color: var(--muted); }
.hint { color: var(--muted); font-size: 12.5px; }
.vul-aan { background: var(--geel); border-radius: 4px; padding: 1px 5px; }
.chip { font-size: 12px; font-weight: 500; color: var(--cta-h); background: var(--cta-t); border-radius: 999px; padding: 0 8px; height: 20px; display: inline-flex; align-items: center; white-space: nowrap; }
.chip.gewijzigd { color: var(--geel-t); background: var(--geel); }
.chip.merk { color: #6d28d9; background: #ede9fe; } .chip.activatie { color: var(--cta-h); background: var(--cta-t); } /* het label van een stuk: merk (herkenning) of activatie (de vraag van nu) */
.doc-kaart .chip { margin-left: 2px; }
/* De balans merk/activatie boven een contentkalender (plan met een regel "Balans: …") */
.balans { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--grond); border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.balans-kop { display: flex; justify-content: space-between; gap: 12px; } .balans-kop small { font-size: 12.5px; color: var(--muted); } .balans-kop b { font-weight: 500; }
.balans-balk { display: flex; height: 10px; border-radius: 999px; overflow: hidden; } .balans-balk i { display: block; height: 100%; } .balans-balk .merk { background: #6d28d9; } .balans-balk .activatie { background: var(--cta); }

/* Inloggen (zoals HelloInsights: het woordmerk boven een kaart zonder rand) */
.login { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 16px; }
.login-kolom { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.kaart-titel { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.kaart-sub { font-size: 14px; color: var(--muted); margin-top: -10px; }
.login-voet { font-size: 12px; color: rgba(22,22,25,.4); }
.kaart { width: min(448px, 100%); background: var(--surface); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(22,22,25,.04); }
.kaart .knop { width: 100%; height: 40px; }
.kaart .mail { display: flex; align-items: center; gap: 10px; font-weight: 600; }
/* Je eigen Claude: de toestemming (routes/mcp.js) */
.toestemming-kop { font-weight: 600; font-size: 17px; }
.toestemming .rechten { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.toestemming .rechten div { display: flex; gap: 10px; align-items: flex-start; }
.toestemming .rechten svg { flex-shrink: 0; margin-top: 3px; }
.toestemming .herkomst { background: rgba(22,22,25,.04); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: rgba(22,22,25,.7); }
.toestemming .herkomst strong { color: var(--ink); }
.toestemming .herkomst.let-op { background: rgba(180,83,9,.08); color: var(--geel-t); }
.toestemming .herkomst.let-op strong { color: var(--geel-t); }
.toestemming .keuze { display: flex; gap: 8px; justify-content: flex-end; }
.toestemming .keuze .knop, .toestemming .keuze .knop-licht { width: auto; padding: 9px 16px; font-size: 15px; font-weight: 500; }
.toestemming .keuze .knop { font-weight: 600; }
.toestemming .inlog { display: flex; flex-direction: column; gap: 14px; }
.toestemming > .knop-licht { align-self: flex-start; }

/* Schil */
:root { --zij-breedte: 256px; } /* de zijbalk: te slepen tussen 220 en 480 px, de browser onthoudt het */
.app { display: grid; grid-template-columns: var(--zij-breedte) minmax(0, 1fr); height: 100%; }
:root { --paneel-breedte: calc((100% - var(--zij-breedte)) * .55); } /* het documentpaneel: standaard iets meer dan de helft van de ruimte naast de zijbalk, te slepen vanaf 360 px (dan in px), de browser onthoudt het */
.app.met-paneel { grid-template-columns: var(--zij-breedte) minmax(0, 1fr) min(var(--paneel-breedte), calc(100% - var(--zij-breedte) - 320px)); }
.zij { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); min-height: 0; position: relative; }
.zij-greep { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 1; }
.zij-greep:hover, .zij-greep.sleept { background: var(--cta); opacity: .5; }
.zij-kop { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.zij-sluit { width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--muted); }
.zij-klantvak { display: flex; align-items: center; gap: 10px; margin: 12px 12px 4px; height: 36px; padding: 0 10px; border-radius: 8px; }
.zij-klantvak:has(select):hover { background: rgba(22,22,25,.04); }
.klant-avatar { width: 24px; height: 24px; border-radius: 8px; background: var(--cta); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.klant-avatar.met-foto { background: var(--surface); border: 1px solid var(--border); overflow: hidden; } .klant-avatar img { width: 100%; height: 100%; object-fit: cover; } /* het favicon van de site, zoals in HelloInsights */
.kiezer { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c9ca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center; padding: 0 24px 0 0; height: 36px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zij-knop { display: flex; align-items: center; gap: 12px; margin: 4px 12px 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; text-align: left; }
.zij-knop:hover { background: var(--grond); }
.zij-nav { display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: rgba(22,22,25,.65); border-radius: 8px; text-decoration: none; text-align: left; width: calc(100% - 24px); }
.zij-nav:hover { background: rgba(22,22,25,.04); color: var(--ink); }
.zij-nav svg { width: 16px; height: 16px; }
.zij-nav.actief { color: var(--ink); font-weight: 600; background: var(--actief); }
.lijst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; padding: 0 12px; }
.groep { font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 12px 6px; text-transform: uppercase; letter-spacing: .08em; }
.lijst .groep { font-size: 10px; letter-spacing: .05em; color: rgba(22,22,25,.4); padding: 4px 12px 4px; }
.groep + .groep, .rij + .groep { padding-top: 12px; }
.rij { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.rij span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij.actief, .rij:hover { background: var(--actief); }
.rij .bezig { flex: none; font-size: 11.5px; color: var(--cta-h); white-space: nowrap; }
.rij.ongelezen span { font-weight: 600; }
.rij .icoon { visibility: hidden; }
.rij:hover .icoon { visibility: visible; }
.rij-titel { flex: 1; min-width: 0; font: inherit; border: 1px solid var(--cta); border-radius: 8px; padding: 1px 6px; background: var(--surface); }
.zij-archief { align-self: flex-start; font-size: 12.5px; margin: 6px 24px 0; padding: 0; }
.zij-voet { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.zij-voet .zij-nav { margin: 0; width: 100%; }
.zij-ik { display: flex; align-items: center; gap: 12px; padding: 8px 8px 0; }
.zij-ik-tekst { flex: 1; min-width: 0; text-align: right; font-size: 12px; color: rgba(22,22,25,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zij-foto { width: 32px; height: 32px; border-radius: 50%; background: var(--cta-t); flex-shrink: 0; }
.zij-klant { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.als-klant { grid-template-rows: 36px minmax(0, 1fr); }
.app.portal-kennisbank { grid-template-columns: minmax(0, 1fr); } /* de kennisbank-tab in de portal (Kitchen-iframe): zonder zijbalk */
.app.portal-kennisbank.met-paneel { grid-template-columns: minmax(0, 1fr) min(var(--paneel-breedte), calc(100% - 320px)); }
.app.portal-kennisbank .zij { display: none; }
.als-klant-balk { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--geel); color: var(--geel-t); font-size: 13.5px; border-bottom: 1px solid #fde68a; }
.als-klant-balk .link { color: inherit; font-weight: 500; }
.rij .van { flex: none; font-size: 11.5px; color: var(--muted); background: rgba(22,22,25,.06); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* Kop van een scherm */
.kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 24px 32px 12px; } /* de paginakop van HelloInsights: grote titel, geen balk; is het smal (document open), dan gaan de knoppen onder de titel */
.kop-knoppen { display: flex; gap: 8px; flex-shrink: 0; }
.kop-titel { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.kop-titel b { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kop-titel small { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Gesprek */
.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--grond); }
.berichten { flex: 1; overflow-y: auto; padding: 8px 32px 12px; display: flex; flex-direction: column; gap: 22px; font-size: 15px; line-height: 1.6; }
.bericht { max-width: 46rem; width: 100%; margin: 0 auto; }
.bericht.user { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.bericht.user .potlood { visibility: hidden; padding: 4px; }
.bericht.user:hover .potlood { visibility: visible; }
.bericht.vervalt { opacity: .4; }
.bericht.user .bubbel { background: var(--surface); box-shadow: 0 1px 2px rgba(22,22,25,.04); border-radius: 12px 12px 4px 12px; padding: 11px 16px; max-width: 80%; white-space: pre-wrap; overflow-wrap: anywhere; }
.bericht.bram { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cta); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; object-fit: cover; flex-shrink: 0; }
.avatar.groot { width: 88px; height: 88px; font-size: 32px; } .avatar.mini { width: 20px; height: 20px; font-size: 10px; }
.avatar.a1 { background: linear-gradient(135deg, #f7b2c4, #e86f95); } .avatar.a2 { background: linear-gradient(135deg, #a9b8ff, #6f7fe8); } .avatar.a3 { background: linear-gradient(135deg, #ffd08a, #f09a3e); } .avatar.a4 { background: linear-gradient(135deg, #9fe3c9, #3fb08a); }
.bericht.bram .kolom { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; min-width: 0; }
.wie { display: flex; align-items: baseline; gap: 8px; margin-bottom: -4px; } .wie b { font-size: 14px; } .wie small { font-size: 12.5px; color: var(--muted); }
.bericht.bram .bubbel { display: flex; flex-direction: column; gap: 10px; }
.bubbel h1, .bubbel h2, .bubbel h3 { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.bubbel ul, .bubbel ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-kaart { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--cta); background: var(--surface); border-radius: 12px; padding: 9px 14px; width: fit-content; max-width: 100%; font-size: 14px; cursor: pointer; }
.doc-kaart b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-kaart small { font-size: 14px; color: var(--muted); white-space: nowrap; }
/* Zoeken (⌘K): de spotlight boven alles, het scherm erachter gedimd; op een telefoon vult hij het scherm */
.zoek-nav kbd { margin-left: auto; font: inherit; font-size: 11.5px; color: var(--zacht); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; line-height: 18px; }
.zoek-achter { position: fixed; inset: 0; z-index: 60; background: rgba(22,22,25,.35); display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px 16px; }
.zoek { width: min(680px, 100%); max-height: calc(100vh - 128px); background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(22,22,25,.28), 0 0 0 1px rgba(22,22,25,.06); display: flex; flex-direction: column; overflow: hidden; }
.zoek-veld { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--muted); }
.zoek-veld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; color: var(--ink); }
.zoek-esc { font: inherit; font-size: 11.5px; color: var(--zacht); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; line-height: 20px; }
.zoek-annuleer { display: none; font-size: 15px; color: var(--cta-h); }
.zoek-filters { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.zoek-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.zoek-chip { height: 26px; padding: 0 10px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; background: var(--grond); color: #3c3c42; border: 1px solid var(--border); cursor: pointer; }
.zoek-chip.aan { background: var(--ink); color: #fff; border-color: var(--ink); }
.zoek-scope { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3c3c42; white-space: nowrap; }
.zoek-scope .link { color: var(--cta-h); }
.zoek-lijst { overflow-y: auto; padding: 4px 6px 8px; flex: 1; min-height: 0; }
.zoek-groep { display: flex; justify-content: space-between; padding: 12px 12px 4px; } .zoek-groep span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .zoek-groep small { font-size: 12px; color: var(--zacht); }
.zoek-rij { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.zoek-rij.actief { background: #eefbfe; box-shadow: inset 2px 0 0 var(--cta); }
.zoek-icoon { width: 28px; height: 28px; border-radius: 8px; background: var(--grond); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.zoek-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zoek-tekst b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoek-tekst small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoek-stukje { font-size: 13px; color: #3c3c42; line-height: 1.45; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zoek-rij mark { background: var(--cta-t); color: #0b7f99; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.zoek-datum { font-size: 12px; color: var(--zacht); white-space: nowrap; padding-top: 2px; }
.zoek-leeg { padding: 20px 14px; color: var(--muted); font-size: 14px; margin: 0; }
.zoek-voet { display: flex; align-items: center; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--muted); } .zoek-voet b { font-weight: 600; } .zoek-voet .vul { flex: 1; }
.bericht.gevonden .bubbel { box-shadow: 0 0 0 2px var(--cta); transition: box-shadow .3s; } /* vanuit het zoeken: het bericht met het woord, kort gemarkeerd */
body.zoekt { overflow: hidden; }
/* Vooraf gelezen (het feitenpakket, week 1): onder het antwoord wat de server voor Bram las */
.gelezen { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; } .gelezen b { font-weight: 600; color: #3c3c42; }
/* Feiten (week 2): de inbox in de Kennisbank, één kaart per feit met Overnemen en Weg */
.feit { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); margin-bottom: 10px; }
.feit-kop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .feit-kop .chip { color: #3c3c42; background: var(--grond); }
.feit-tekst { font-size: 14.5px; line-height: 1.45; } .feit-citaat { font-size: 13px; color: #3c3c42; border-left: 2px solid var(--border); padding-left: 10px; font-style: italic; }
.feit-knoppen { display: flex; gap: 8px; margin-top: 2px; } .feit-knoppen .knop { height: 28px; font-size: 13px; }
.feiten-uitleg { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
/* Kwaliteit (week 1): Noors cijfer voor onderscheid per klant en per soort */
.cijfer { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #b91c1c; background: #fee2e2; }
.cijfer.ok { color: #15803d; background: #dcfce7; } .cijfer.bijna { color: #b45309; background: #fef3c7; } .cijfer.leeg { color: var(--muted); background: var(--grond); font-weight: 500; }
.klantrij { display: grid; grid-template-columns: minmax(0, 1fr) 44px 60px 80px 90px; align-items: center; gap: 12px; }
.klantrij small { font-size: 12.5px; color: var(--muted); } .klantrij .rood { color: #b91c1c; } .klantrij .groen { color: #15803d; }
.kwaliteit-kop { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 12px; margin-bottom: 6px; background: var(--grond); } .kwaliteit-kop.ok { background: #dcfce7; } .kwaliteit-kop.bijna { background: #fef3c7; } .kwaliteit-kop.rood { background: #fee2e2; }
.kwaliteit-kop .groot { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 34px; line-height: 1; } .kwaliteit-kop .uitleg-k { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .kwaliteit-kop .uitleg-k small { font-size: 12.5px; color: var(--muted); } .kwaliteit-kop svg { margin-left: auto; }
.soortrij { display: grid; grid-template-columns: minmax(0, 1fr) 44px 120px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px; } .soortrij small { font-size: 12.5px; color: var(--muted); }
.stukrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 8px; font-size: 14px; } .stukrij small { font-size: 12.5px; color: var(--muted); } .stukrij .cijfers { display: flex; gap: 4px; font-size: 11px; color: var(--muted); } .stukrij .cijfers span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.chip.goed { color: #15803d; background: #dcfce7; }
/* Het beeld in Canva: de kaart onder een antwoord (concept, bewaard of weg) en het beeld boven een document in het paneel */
.canva-kaart { display: flex; gap: 16px; border: 1px solid var(--cta); background: var(--surface); border-radius: 12px; padding: 14px; width: fit-content; max-width: 100%; font-size: 14px; margin: 6px 0; }
.canva-kaart.weg { border-color: var(--border); }
.canva-beeld { width: 132px; height: 165px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--grond); box-shadow: 0 1px 2px rgba(22,22,25,.08); }
.canva-beeld.leeg { border: 1px dashed var(--border); box-shadow: none; }
.canva-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-content: space-between; }
.canva-kop { display: flex; align-items: center; gap: 8px; } .canva-kop b { font-weight: 600; }
.canva-info > small { color: var(--muted); font-size: 13px; } .canva-info > span { font-size: 13.5px; }
.canva-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .canva-knoppen a.knop-licht { text-decoration: none; color: inherit; } .canva-knoppen small { color: var(--muted); }
.chip.concept { color: #b45309; background: #fef3c7; } .chip.bewaard { color: #15803d; background: #dcfce7; } .chip.weg { color: var(--muted); background: var(--grond); }
.beeld { display: flex; gap: 16px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--grond); margin-bottom: 16px; }
.beeld img { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(22,22,25,.08); }
.beeld-info { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; min-width: 0; flex: 1; } .beeld-info small { color: var(--muted); }
.beeld-kop { display: flex; align-items: center; gap: 8px; } .beeld-kop b { font-weight: 600; }
.beeld-knoppen { display: flex; gap: 8px; margin-top: 6px; } .beeld-knoppen a.knop-licht { text-decoration: none; color: inherit; }
/* Plugins → Canva: per klant de basisontwerpen per soort stuk, en het zoeken in Canva */
.canva-basis { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 6px; }
.basis-rij { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px; } .basis-rij .bestand-twee { flex: 1; min-width: 0; }
.basis-zoek { margin: 6px 0 0; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.basis-zoek .input { background: var(--grond); }
.basis-resultaten { display: flex; flex-wrap: wrap; gap: 10px; }
.basis-keuze { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 92px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.basis-keuze img, .basis-keuze .leeg { width: 92px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--grond); display: block; }
.basis-keuze span { font-size: 11.5px; text-align: center; line-height: 1.3; }
.gestopt { color: var(--muted); font-size: 12.5px; }
.anders { align-self: flex-start; font-size: 12.5px; visibility: hidden; } .bericht.bram:hover .anders { visibility: visible; } /* "Dit moet anders": één regel feedback, Bram leert ervan */
.typend { display: flex; align-items: center; gap: 10px; padding: 0 24px 8px; max-width: 46rem; width: 100%; margin: 0 auto; color: var(--muted); font-size: 13px; }
.dots { display: inline-flex; gap: 4px; padding: 8px 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(22,22,25,.04); border-radius: 4px 12px 12px 12px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cta); animation: dot 1.3s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.invoer { padding: 0 24px 20px; max-width: calc(46rem + 48px); width: 100%; margin: 0 auto; }
.invoer-vak { border: 1px solid var(--border-d); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(22,22,25,.04); }
.invoer textarea { display: block; width: 100%; border: 0; background: none; outline: none; resize: none; padding: 14px 16px 6px; max-height: 224px; font-size: 15px; line-height: 1.5; }
.invoer-rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px 8px 12px; }
.invoer-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.klem { width: 32px; height: 32px; border-radius: 8px; justify-content: center; align-items: center; flex-shrink: 0; }
.klem:hover { background: var(--grond); color: var(--ink); }
/* Bijlagen bij een bericht (pdf, afbeelding, Word, tekst): chips boven het tekstveld, en in de bubbel boven de tekst */
.bijlagen { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.bijlage { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--grond); border-radius: 8px; padding: 6px 10px; font-size: 13px; max-width: 100%; color: inherit; text-decoration: none; white-space: nowrap; }
.bijlage .icoon { color: var(--muted); }
.bijlage b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.bijlage small { font-size: 13px; color: var(--muted); }
.bijlage .weg { display: inline-flex; color: var(--muted); margin-left: 2px; }
.bijlage .weg:hover { color: var(--ink); }
.bubbel .bijlagen { padding: 0 0 8px; }
.chat.sleep .invoer-vak { border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-t); }
.rond { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rond:hover { background: rgba(22,22,25,.8); }
.rond.stop { background: var(--muted); margin-right: 4px; }
.rond:disabled { opacity: .35; }

/* Documentpaneel */
.paneel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border-left: 1px solid var(--border); position: relative; }
.paneel-greep { position: absolute; top: 0; left: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 1; }
.paneel-greep:hover, .paneel-greep.sleept { background: var(--cta); opacity: .5; }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px 11px 24px; border-bottom: 1px solid var(--border); }
.paneel-titel { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.paneel-titel b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paneel-titel .input { padding: 6px 10px; }
.paneel-titel select.input { width: auto; }
.paneel-acties { display: flex; align-items: center; gap: 6px; }
.paneel-acties #paneelActie.knop { order: 1; } .paneel-acties #paneelSluit { order: 2; } /* een primaire actie (Opslaan) staat rechts, voor het kruisje */
.paneel-inhoud { flex: 1; overflow-y: auto; padding: 28px 40px; font-size: 15px; line-height: 1.65; outline: none; }
.paneel-inhoud::selection, .paneel-inhoud *::selection { background: rgba(19,194,233,.22); }
.paneel-inhoud h1 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 14px; }
.paneel-inhoud h2 { font-size: 18px; font-weight: 600; margin: 26px 0 14px; }
.paneel-inhoud h3 { font-size: 16px; font-weight: 600; margin: 22px 0 12px; }
.paneel-inhoud p, .paneel-inhoud ul, .paneel-inhoud ol { margin: 0 0 14px; }
.paneel-inhoud ul, .paneel-inhoud ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.paneel-inhoud blockquote { margin: 0 0 14px; border-left: 2px solid #e7e7ea; padding-left: 14px; color: #3c3c42; }
.paneel-inhoud table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 14px; }
.paneel-inhoud th, .paneel-inhoud td { border: 1px solid var(--border-d); padding: 6px 10px; text-align: left; vertical-align: top; }
.paneel-inhoud th { background: var(--grond); font-weight: 600; }
.paneel-links { display: flex; align-items: center; gap: 14px; white-space: nowrap; flex-shrink: 0; }
.paneel-inhoud a { color: var(--cta-h); }
.paneel-inhoud .leeg { color: var(--zacht); }
.paneel-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.paneel-editor .toastui-editor-defaultUI { border: 0; border-radius: 0; flex: 1; min-height: 0; font-family: inherit; }
.paneel-editor .toastui-editor-defaultUI-toolbar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 16px; }
.paneel-editor .toastui-editor-contents { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink); }
.paneel-editor .toastui-editor-contents h1 { font-family: 'Outfit', system-ui, sans-serif; font-size: 26px; border: 0; }
.paneel-editor .toastui-editor-contents h2 { font-size: 18px; border: 0; } .paneel-editor .toastui-editor-contents h3 { font-size: 16px; }
.paneel-editor .toastui-editor-md-container, .paneel-editor .toastui-editor-ws-container { background: var(--surface); }
.paneel-editor .ProseMirror, .paneel-editor .toastui-editor-md-preview { padding: 20px 40px; }
.paneel-editor .toastui-editor-mode-switch { background: var(--bg); border-top: 1px solid var(--border); }.paneel-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.paneel-voet span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passage { position: absolute; display: flex; flex-direction: column; gap: 8px; width: 380px; max-width: calc(100% - 32px); background: var(--surface); border: 1px solid var(--border-d); border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(22,22,25,.12); z-index: 1000; }
.passage textarea { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 14px; resize: none; outline: none; }
.passage-knoppen { display: flex; justify-content: flex-end; gap: 6px; }
.passage .knop-licht, .passage .knop { padding: 5px 11px; font-size: 13px; }

/* Skills: het voorstel van Bram (Laat Bram meekijken): vier blokken met kleur */
.voorstel-blok { border-left: 3px solid var(--muted); background: var(--grond); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.voorstel-blok .groep { padding: 0; color: inherit; }
.voorstel-blok ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.voorstel-blok.blijft { border-color: var(--goed); background: #f0fdf4; color: var(--goed); }
.voorstel-blok.weg { color: var(--zacht); } .voorstel-blok.weg li { text-decoration: line-through; color: var(--zacht); }
.voorstel-blok.tegen { border-color: var(--geel-t); background: var(--geel); color: var(--geel-t); }
.voorstel-blok.mis { border-color: var(--cta-h); background: var(--cta-t); color: var(--cta-h); }

.inbox-bestand { display: flex; align-items: center; gap: 12px; margin-top: 10px; } #inboxTekst { font-size: 14px; line-height: 1.5; }
/* Gezondheid (Plugins): per koppeling een stip */
.bestand.gezond { cursor: default; } .stip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 4px; background: var(--zacht); } .stip.goed { background: var(--goed); } .stip.fout { background: var(--fout); }

/* Kennisbank */
.bestanden { flex: 1; overflow-y: auto; padding: 8px 32px 32px; display: flex; flex-direction: column; gap: 22px; }
.map { display: flex; flex-direction: column; gap: 4px; }
.map-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 12px 4px; }
.map-kop .groep { padding: 0; }
.map-kop small { font-size: 12px; color: var(--muted); }
.bestand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.bestand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestand small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bestand small.leeg { color: var(--geel-t); }
.bestand.actief { background: var(--actief); } .bestand.actief span { font-weight: 500; }
.bestand:hover { background: var(--actief); }
.bestand.gedempt { color: var(--muted); }
.bestand-twee { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bestand-twee small { font-size: 12.5px; color: var(--muted); }

/* Velden boven de tekst in het paneel (skills: Naam, Agent, en over de volle breedte Wanneer (signalen)) */
.paneel-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px 40px 12px; border-bottom: 1px solid var(--border); margin: 0 40px; padding-left: 0; padding-right: 0; }
.veld-blok { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.veld-blok.breed { grid-column: 1 / -1; }
.veld-blok .tekstblok { font-size: 13.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; white-space: pre-line; }
.veld-blok textarea.input { font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.veld-blok small { font-size: 12px; color: var(--muted); }
.veld-blok .groep { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veld-blok .groep { padding: 0; }
.veld-blok .input { padding: 6px 10px; }
.veld-blok .leeg { color: var(--zacht); font-style: normal; }

/* Klanten (staff) */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.veld .groep, .veld .map-kop { padding: 0 0 4px; }
.stil { color: var(--muted); }
.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.contact:last-child { border-bottom: 1px solid var(--border); }
.contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importblok { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 6px; }
.importkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.importkop > div { display: flex; flex-direction: column; gap: 2px; }
.importkop b { font-weight: 500; font-size: 14px; }
.portallinks { display: flex; flex-direction: column; gap: 6px; }
.portallinks code { font-size: 12.5px; background: var(--grond); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; user-select: all; }

/* Kosten (staff) */
.maandkiezer { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 6px; font-size: 13.5px; }
.maandkiezer span { min-width: 110px; text-align: center; }
.kostentabel { display: flex; flex-direction: column; gap: 4px; }
.kostenrij { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 90px; gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.kostenrij span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kostenrij.kop { cursor: default; padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kostenrij.totaal { cursor: default; padding: 12px 12px 0; margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0; font-weight: 500; }
.kostenrij.actief, .kostenrij:not(.kop):not(.totaal):hover { background: var(--actief); } .kostenrij.actief span:first-child { font-weight: 500; }
.kostenrij.gedempt { color: var(--muted); cursor: default; }
.r { text-align: right; white-space: nowrap; }
.kosten-groot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.kosten-groot .groot { font-size: 22px; font-weight: 600; font-family: 'Outfit', system-ui, sans-serif; }
.instel { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.instel .input { width: 72px; text-align: right; padding: 6px 10px; }
.schakel { position: relative; display: inline-block; width: 40px; height: 22px; }
.schakel input { opacity: 0; width: 0; height: 0; }
.schakel span { position: absolute; inset: 0; border-radius: 999px; background: #c6c6cb; transition: background .15s; cursor: pointer; }
.schakel span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.schakel input:checked + span { background: var(--cta); } .schakel input:checked + span::after { left: 20px; }
.gesprekrij { display: grid; grid-template-columns: 52px minmax(0, 1fr) 70px 70px; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.gesprekrij:last-child { border-bottom: 1px solid var(--border); }
.gesprekrij span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importblok { margin-bottom: 22px; }

/* Agents (staff) */
.bestand .met-avatar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.skill-rechts { display: flex; align-items: center; gap: 8px; }
.agentfoto { display: flex; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.agentfoto .veld-blok { gap: 6px; } .agentfoto .rij-knop { display: flex; align-items: center; gap: 8px; }
.agentvelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.agentvelden .veld-blok { gap: 6px; } .agentvelden .input { padding: 8px 11px; }
.agentskills .bestand, .agentskills .bestand:hover { background: var(--grond); cursor: default; }

/* Rapport (analyse) in het paneel */
.rapport-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--cta-h); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.rapport h1 { font-size: 24px; margin-bottom: 4px; }
.rapport .rapport-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.tegel { background: var(--grond); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tegel-label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tegel-waarde { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; }
.tegel-delta { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; width: fit-content; }
.tegel-delta.goed { color: var(--goed); background: var(--goed-z); } .tegel-delta.slecht { color: var(--fout); background: var(--fout-z); }
.prios { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.prio { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.prio-nr { width: 28px; height: 28px; border-radius: 50%; background: var(--cta); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.prio-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prio-tekst b { font-weight: 600; } .prio-tekst span { font-size: 13.5px; color: #3c3c42; }
.prio-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.badge { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: #ececed; color: #3c3c42; }
.badge.goed { color: var(--goed); background: var(--goed-z); } .badge.midden { color: #b45309; background: var(--geel); } .badge.zwak { color: var(--fout); background: var(--fout-z); } .badge.kritiek { color: #fff; background: var(--fout); }
.rapport h2 { font-size: 17px; margin: 22px 0 10px; }

/* Plugins (staff) */
.bestand.plugin { padding: 12px; }
.bestand.plugin .bestand-twee small { white-space: normal; } .bestand.plugin > small { flex-shrink: 0; }
.uitleg { margin: 0 0 16px; }
.pluginklant { border-radius: 8px; font-size: 14px; }
.pluginklant.open { background: var(--actief); padding-bottom: 12px; }
.pluginkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; }
.pluginkop:hover { background: var(--actief); border-radius: 8px; }
.pluginklant.open .klantnaam { font-weight: 500; }
.mcp-adres { display: flex; gap: 8px; align-items: center; }
.mcp-adres code { flex-grow: 1; background: var(--bg); font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; padding: 7px 12px; overflow-wrap: anywhere; }
.mcp-stappen { margin: 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.mcp-tools { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.mcp-tools code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.mcp-tools span { color: rgba(22,22,25,.7); }
.mcp-verbinding { cursor: default; }
.pluginvelden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 12px 10px; }
.pluginvelden .input { background: var(--surface); }
.pluginknoppen { display: flex; justify-content: flex-end; gap: 6px; padding: 0 12px; }
.pluginknoppen a.knop-licht { text-decoration: none; color: inherit; }
.leeg-oranje { color: var(--geel-t); }

.melding { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; z-index: 10; }
.melding.fout { background: var(--fout); }
.mobiel-balk, .zij-achter, .zij-sluit { display: none; }
/* Telefoon en smal scherm (onder 1024 px, zoals HelloInsights): een bovenbalk met het menu, de klant en Nieuw gesprek; de zijbalk schuift in als blad; het documentpaneel vult het hele scherm */
@media (max-width: 1023px) {
  .app, .app.met-paneel, .app.portal-kennisbank.met-paneel { grid-template-columns: minmax(0, 1fr); padding-top: 56px; }
  .app.portal-kennisbank { padding-top: 0; }
  .app.als-klant { grid-template-rows: 36px 56px minmax(0, 1fr); padding-top: 0; }
  .mobiel-balk { position: fixed; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 8px; background: rgba(246,246,247,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); z-index: 30; }
  .app.als-klant .mobiel-balk { position: static; grid-column: 1 / -1; }
  .app.portal-kennisbank .mobiel-balk { display: none; }
  .menu-knop, .mobiel-nieuw { display: inline-flex; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
  .menu-knop:hover, .mobiel-nieuw:hover { background: rgba(22,22,25,.06); }
  .mobiel-klant { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
  .mobiel-klant .klant-avatar { width: 28px; height: 28px; font-size: 13px; }
  .mobiel-klant span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zij-sluit { display: inline-flex; }
  .kop { padding: 16px 16px 8px; }
  .input, .invoer textarea, .passage textarea { font-size: 16px; } /* anders zoomt iOS in bij een veld */
  .zij { position: fixed; top: 0; bottom: 0; left: 0; width: min(85vw, 320px); z-index: 40; transform: translateX(-105%); transition: transform .2s ease; }
  .zij-kop { height: 56px; }
  .app.menu-open .zij { transform: none; box-shadow: 0 0 40px rgba(22,22,25,.25); }
  .app.menu-open .zij-achter { display: block; position: fixed; inset: 0; background: rgba(22,22,25,.35); z-index: 35; }
  .zij-greep, .paneel-greep { display: none; }
  .rij .icoon, .anders { visibility: visible; } /* geen hover op een telefoon */
  .paneel { position: fixed; inset: 0; z-index: 36; border-left: 0; }
  .app.als-klant .paneel { top: 36px; }
  .paneel-kop { flex-wrap: wrap; padding: 10px 12px; }
  .paneel-acties { flex-wrap: wrap; }
  .paneel-acties .knop-licht { padding: 6px 9px; font-size: 13px; }
  .paneel-inhoud { padding: 20px 16px; }
  .paneel-velden { margin: 0 16px; }
  .paneel-editor .ProseMirror, .paneel-editor .toastui-editor-md-preview { padding: 16px; }
  .paneel-voet { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .berichten { padding: 16px 16px 8px; }
  .invoer { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
  #invoerHint { display: none; } /* op een telefoon stuurt de knop; Enter is een nieuwe regel */
  .rond { width: 40px; height: 40px; }
  .bestanden { padding: 16px 12px; }
  .melding { bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); }
  .zoek-achter { padding: 0; background: var(--surface); }
  .zoek { width: 100%; max-height: none; height: 100%; border-radius: 0; box-shadow: none; }
  .zoek-veld { padding: 10px 12px; } .zoek-veld input { font-size: 16px; } .zoek-esc { display: none; } .zoek-annuleer { display: inline-flex; }
  .zoek-filters { padding: 8px 12px; flex-wrap: wrap; } .zoek-scope { margin-left: 0; }
  .zoek-voet { display: none; }
  .zoek-nav kbd { display: none; }
}