/* ===== Mia OS · shell "Teamkanaal" (voorstel 8, 01-10-2026) =====
   Port van /home/mia/os-agenthub/base.css + kanaal.css naar een echte app (geen bord-zoom).
   Backend-stijl: dicht, rustig, lijsten boven kaarten, één accent oranje = wacht op jou.
   Eén lettertype (Onest) + JetBrains Mono voor tijden en bedragen. Geen gradients/glow. */
:root{
  --bg:#F2F3F1; --vlak:#FBFBFA; --vlak2:#F6F7F5; --wit:#FFFFFE; --lijn:#E4E6E2; --lijn2:#D5D8D3;
  --inkt:#1D2124; --inkt2:#5C6368; --inkt3:#8B9195;
  --jou:#C9531D; --jou-zacht:#FBEEE6; --jou-rand:#E9C3AE;
  --bezig:#3F63A3; --klaar:#4C7A4F; --mis:#A8352B; --mis-zacht:#F7E7E4; --stil:#979DA1;
  --c-mi:#1D2124; --c-rd:#C9A227; --c-st:#C77B4E; --c-vk:#5B82B5; --c-bk:#6E9152; --c-wb:#9A7B5C; --c-nd:#7D8C94; --c-ad:#8A6FA8; --c-ks:#5E9A96;
  --f:'Onest',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --zweef:0 12px 32px -14px rgba(29,33,36,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--vlak);font-family:var(--f);color:var(--inkt);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-size:14px;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bezig);outline-offset:2px}
[hidden]{display:none!important}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--mono);font-size:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- login ---------- */
.login{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);overflow:auto}
.login-kaart{width:100%;max-width:360px;background:var(--wit);border:1px solid var(--lijn2);border-radius:18px;padding:28px 24px 20px;display:flex;flex-direction:column}
.login-merk{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin-bottom:22px}
.login h1{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.login-sub{font-size:13px;color:var(--inkt2);margin:4px 0 18px}
.veld-l{font-size:12px;font-weight:500;color:var(--inkt2);margin:10px 0 5px}
.login input{height:44px;border:1px solid var(--lijn2);border-radius:10px;padding:0 14px;background:var(--wit);font-size:15px}
.login input:focus{outline:none;border-color:var(--inkt)}
.login-fout{margin-top:10px;font-size:13px;color:var(--mis)}
.login .btn{margin-top:18px;width:100%}
.login-taal{display:flex;justify-content:center;margin-top:14px}

/* ---------- knoppen ---------- */
.btn{height:44px;border-radius:11px;border:1px solid var(--lijn2);background:var(--wit);font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 16px;white-space:nowrap}
.btn.pri{background:var(--inkt);border-color:var(--inkt);color:#fff}
.btn.rood{background:var(--mis);border-color:var(--mis);color:#fff}
.b2{height:34px;border-radius:9px;border:1px solid var(--lijn2);background:var(--wit);font-size:13px;font-weight:500;color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;white-space:nowrap}
.b2 svg{width:13px;height:13px}
.b2.pri{background:var(--inkt);border-color:var(--inkt);color:#fff}
.b2.zacht{border-color:transparent;color:var(--inkt2);background:transparent}
.b2.rood{color:var(--mis);border-color:#E6C9C5}
.b2:not(:disabled):hover{border-color:var(--inkt3)}
.b2.pri:not(:disabled):hover{background:#000}
.ibtn{height:32px;border-radius:8px;border:1px solid var(--lijn2);display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:13px;color:var(--inkt);background:var(--wit);white-space:nowrap;flex:none}
.ibtn svg{width:14px;height:14px}
.ibtn.rood{color:var(--mis);border-color:#E6C9C5}
.ikoon{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--inkt2);flex:none}
.ikoon:hover{background:var(--vlak2);color:var(--inkt)}
.taal{display:inline-flex;border:1px solid var(--lijn2);border-radius:9px;overflow:hidden}
.taal button{font-size:12px;font-weight:500;color:var(--inkt2);padding:5px 10px;border-left:1px solid var(--lijn2)}
.taal button:first-child{border-left:0}
.taal button[aria-pressed="true"]{color:var(--inkt);background:var(--vlak2);font-weight:600}

/* ---------- statusring-avatar ---------- */
.av{--r:var(--lijn2);position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--vlak2);font-size:14px;font-weight:600;color:var(--inkt);box-shadow:0 0 0 2px var(--vlak),0 0 0 4px var(--r);margin:4px}
.av.mi{background:var(--inkt);color:#fff}
.av.xs{width:22px;height:22px;font-size:9.5px;box-shadow:0 0 0 1.5px var(--vlak),0 0 0 3px var(--r);margin:3px}
.av.sm{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px var(--vlak),0 0 0 3.5px var(--r);margin:3px}
.av.lg{width:64px;height:64px;font-size:22px;box-shadow:0 0 0 3px var(--vlak),0 0 0 6px var(--r);margin:6px}
.av.xl{width:88px;height:88px;font-size:30px;box-shadow:0 0 0 4px var(--vlak),0 0 0 8px var(--r);margin:8px}
.av .cp{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--c,var(--inkt3));border:2px solid var(--vlak)}
.av.sm .cp,.av.xs .cp{width:8px;height:8px;right:-2px;bottom:-2px;border-width:1.5px}
.av.xs .cp{display:none}
.av.lg .cp{width:14px;height:14px}
.av.xl .cp{width:18px;height:18px;border-width:3px}
.av.mi .cp{display:none}
.av.rust{--r:var(--lijn2)}
.av.jou{--r:var(--jou)}
.av.klaar{--r:var(--klaar)}
.av.vast{--r:var(--mis)}
.av.pauze{--r:var(--inkt3);opacity:.5}
.av.bezig{box-shadow:0 0 0 2px var(--vlak)}
.av.bezig::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--bezig) 0 var(--p,70%),var(--lijn) var(--p,70%) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:draai 2.4s linear infinite}
.av.xs.bezig::before{inset:-3px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px))}
.av.sm.bezig::before{inset:-3.5px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px))}
.av.lg.bezig::before{inset:-6px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.av.xl.bezig::before{inset:-8px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))}
@keyframes draai{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.av.bezig::before{animation:none}}
.av.vast::after{content:"!";position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;background:var(--mis);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--vlak)}
.av.jou::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:var(--jou);border:2px solid var(--vlak)}
.av.sm.jou::after,.av.xs.jou::after{width:8px;height:8px;top:-3px;right:-3px;border-width:1.5px}
.av.sm.vast::after,.av.xs.vast::after{width:12px;height:12px;font-size:8px;top:-5px;right:-5px;border-width:1.5px}
.av.mens{background:var(--wit);color:var(--inkt2);box-shadow:none;border:1.5px dashed var(--inkt3)}
.mi{--c:var(--c-mi)} .rd{--c:var(--c-rd)} .st{--c:var(--c-st)} .vk{--c:var(--c-vk)} .bk{--c:var(--c-bk)} .wb{--c:var(--c-wb)} .nd{--c:var(--c-nd)} .ad{--c:var(--c-ad)} .ks{--c:var(--c-ks)}
a.avlink,button.avlink{display:inline-flex;border-radius:50%}
.avs{display:flex;gap:1px;align-items:center}

/* teamicoon: puntjes van de leden, ring van het dringendste lid */
.teamico{--r:var(--lijn2);width:40px;height:40px;border-radius:12px;background:var(--vlak2);border:1px solid var(--lijn2);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:6px;gap:3px;flex:none;position:relative}
.teamico i{border-radius:50%;background:var(--c,var(--lijn2))}
.teamico.sm{width:30px;height:30px;border-radius:9px;padding:5px;gap:2px}
.teamico.jou{border-color:var(--jou);box-shadow:0 0 0 1px var(--jou)}
.teamico.jou::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--jou);border:2px solid var(--vlak)}
.teamico.vast{border-color:var(--mis);box-shadow:0 0 0 1px var(--mis)}
.teamico.bezig{border-color:var(--bezig)}
.teamico.klaar{border-color:var(--klaar)}
.teamico.pauze{opacity:.55}
.teamico.mia{background:var(--inkt);border-color:var(--inkt);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px}

.klant{--k:var(--inkt3);display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--inkt2);border:1px solid var(--lijn2);border-radius:6px;padding:1px 6px;background:var(--wit);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.klant::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--k);flex:none}
.s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--inkt2);white-space:nowrap}
.s::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stil)}
.s.jou{color:var(--jou);font-weight:500}.s.jou::before{background:var(--jou)}
.s.bezig::before{background:var(--bezig)} .s.klaar::before{background:var(--klaar)} .s.vast{color:var(--mis)}.s.vast::before{background:var(--mis)}
.slot{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--inkt2);white-space:nowrap}
.slot svg{width:12px;height:12px}
.chip{height:28px;border-radius:7px;border:1px solid var(--lijn2);font-size:12.5px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;color:var(--inkt2);background:var(--wit);white-space:nowrap;flex:none}
.chip.on{background:var(--inkt);border-color:var(--inkt);color:#fff}
.chip .n{font-size:11.5px;opacity:.75}
.chip .k{width:6px;height:6px;border-radius:2px;background:var(--k,var(--inkt3))}
.chip svg{width:13px;height:13px}
.balk{height:5px;border-radius:3px;background:var(--lijn);overflow:hidden}
.balk i{display:block;height:100%;background:var(--inkt)}
.balk.bezig i{background:var(--bezig)}
.balk.over i{background:var(--jou)}

/* ---------- de shell ---------- */
.os{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--vlak)}
.kol{flex:1;min-height:0;min-width:0;display:flex}
.stopbalk{flex:none;display:flex;align-items:center;gap:12px;padding:9px 16px;background:var(--mis-zacht);border-bottom:1px solid #E6C9C5;font-size:13px;color:var(--inkt2);min-width:0}
.stopbalk .stip{width:22px;height:22px;border-radius:50%;background:var(--mis);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.stopbalk .stip svg{width:10px;height:10px;fill:#fff;stroke:none}
.stopbalk b{color:var(--mis);font-weight:600}
.stopbalk .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stopbalk .b2{background:var(--inkt);color:#fff;border-color:var(--inkt)}

.rail{width:60px;flex:none;border-right:1px solid var(--lijn);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px;background:var(--vlak2)}
.rail .logo{width:32px;height:32px;border-radius:9px;background:var(--inkt);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.rail a,.rail .rk{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--inkt3);position:relative}
.rail a:hover,.rail .rk:hover{color:var(--inkt)}
.rail a svg,.rail .rk svg{width:20px;height:20px}
.rail a.on{background:var(--wit);color:var(--inkt);border:1px solid var(--lijn2)}
.rail .bd{position:absolute;top:3px;right:1px;background:var(--jou);color:#fff;font-size:9.5px;font-weight:700;border-radius:7px;padding:0 4px;line-height:14px}
.rail .sp{flex:1}
.nood{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--mis);color:var(--mis);display:flex;align-items:center;justify-content:center;flex:none;background:var(--wit)}
.nood svg{width:14px;height:14px;fill:var(--mis);stroke:var(--mis)}
.nood:hover{background:var(--mis-zacht)}
.nood.aan{background:var(--mis)}
.nood.aan svg{fill:#fff;stroke:#fff}

.zij{width:320px;flex:none;border-right:1px solid var(--lijn);display:flex;flex-direction:column;min-height:0;background:var(--vlak)}
.zij .zk{padding:16px 14px 10px 18px;display:flex;align-items:center;gap:8px;flex:none}
.zij .zk h3{font-size:17px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zij .zk .sub{display:none}
.zij .nieuw{width:30px;height:30px;border-radius:8px;border:1px solid var(--lijn2);display:flex;align-items:center;justify-content:center;color:var(--inkt);background:var(--wit);flex:none}
.zij .nieuw svg{width:15px;height:15px}
.zij .scroll{flex:1;min-height:0;min-width:0;overflow:auto;overflow-x:hidden;padding-bottom:16px}
.zoek{margin:0 14px 8px;height:34px;border-radius:9px;background:var(--vlak2);border:1px solid var(--lijn);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--inkt3);flex:none}
.zoek svg{width:14px;height:14px}
.zoek input{flex:1;min-width:0;border:0;background:transparent;font-size:13px;color:var(--inkt);outline:none}
.vast-item{margin:2px 8px;padding:8px 10px;border-radius:9px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--inkt);border:1px solid transparent}
.vast-item:hover{background:var(--vlak2)}
.vast-item svg{width:16px;height:16px;color:var(--inkt2)}
.vast-item .r{margin-left:auto;font-size:12px;color:var(--inkt3);font-weight:400}
.vast-item .r.jou{background:var(--jou);color:#fff;font-weight:700;border-radius:9px;padding:0 7px;line-height:18px}
.vast-item.on{background:var(--wit);border-color:var(--lijn2)}
.zgrp{font-size:11.5px;font-weight:500;color:var(--inkt3);padding:14px 18px 6px;display:flex;justify-content:space-between;letter-spacing:.01em}
.wie{display:flex;gap:10px;align-items:center;padding:7px 10px;margin:1px 8px;border-radius:10px;border:1px solid transparent;min-width:0}
.wie:hover{background:var(--vlak2)}
.wie.on{background:var(--wit);border-color:var(--lijn2)}
.wie .mid{flex:1;min-width:0}
.wie .nm{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.wie .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wie .nm small{font-size:11px;font-weight:500;color:var(--inkt3);flex:none}
.wie .nu{font-size:12.5px;color:var(--inkt2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wie .nu.jou{color:var(--jou);font-weight:500}
.wie .nu.vast{color:var(--mis)}
.wie .tijd{font-size:11.5px;color:var(--inkt3);flex:none;align-self:flex-start;margin-top:3px}
.zij .leeg-z{font-size:12.5px;color:var(--inkt3);padding:4px 18px}
.mstrook{display:none}
.mkopr{display:none}

.midden{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--vlak);position:relative;outline:none}
.view{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.view.vast{overflow:hidden}
.mterug{display:none}

/* ---------- teamgesprek ---------- */
.dk{min-height:64px;border-bottom:1px solid var(--lijn);display:flex;align-items:center;gap:12px;padding:10px 20px;flex:none}
.dk .mid{flex:1;min-width:0}
.dk .nm{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .waar{font-size:12.5px;color:var(--inkt2);margin-top:2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .waar svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.dk .waar b{color:var(--inkt);font-weight:500}
.dk .terug-m{display:none}
.dk .info-m{display:none}
.tijdlijn{flex:1;min-height:0;overflow:auto;padding:18px 28px 12px;display:flex;flex-direction:column;gap:12px}
.dagl{font-size:11.5px;color:var(--inkt3);text-align:center;margin:4px 0}
.msg{display:flex;gap:10px;align-items:flex-start;max-width:680px}
.msg>.av,.msg>.avlink{margin-top:2px}
.msg .in{flex:1;min-width:0}
.msg .van{font-size:12.5px;color:var(--inkt2);margin-bottom:3px}
.msg .van b,.msg .van a b{color:var(--inkt);font-weight:600}
.msg .van a:hover b{text-decoration:underline}
.msg .tx{font-size:14px;line-height:1.5;color:var(--inkt);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.ik{margin-left:auto;justify-content:flex-end;max-width:620px}
.msg.ik .tx{background:var(--inkt);color:#fff;border-radius:14px 4px 14px 14px;padding:9px 13px}
.msg.ik .van{text-align:right}
.sys{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--inkt2);padding-left:52px;min-width:0}
.sys>span{min-width:0;overflow-wrap:anywhere}
.sys svg{width:13px;height:13px;color:var(--inkt3)}
.sys b{color:var(--inkt);font-weight:500}
.sys.klaar svg{color:var(--klaar)}
.sys.vast{color:var(--mis)} .sys.vast svg{color:var(--mis)}
.sys .tm{font-size:11.5px;color:var(--inkt3);flex:none}
.denkt{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--inkt2)}
.denkt .pt{display:inline-flex;gap:3px}
.denkt .pt i{width:5px;height:5px;border-radius:50%;background:var(--inkt3);animation:pt 1.2s infinite}
.denkt .pt i:nth-child(2){animation-delay:.2s}.denkt .pt i:nth-child(3){animation-delay:.4s}
@keyframes pt{0%,60%,100%{opacity:.25}30%{opacity:1}}
.leeg-g{margin:auto;max-width:380px;text-align:center;color:var(--inkt2);font-size:13.5px;line-height:1.55;padding:24px}
.leeg-g h3{font-size:17px;color:var(--inkt);margin-bottom:6px}

/* inline objecten */
.obj{margin-top:8px;background:var(--wit);border:1px solid var(--lijn2);border-radius:14px;overflow:hidden;max-width:540px}
.obj .oh{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--lijn);font-size:12.5px;color:var(--inkt2)}
.obj .oh svg{width:14px;height:14px}
.obj .oh b{color:var(--inkt);font-weight:600}
.obj .oh .r{margin-left:auto;white-space:nowrap}
.obj .ob{padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--inkt)}
.obj .ob .kop{font-weight:600;font-size:14.5px;margin-bottom:2px}
.obj .ob .zacht{color:var(--inkt2);font-size:13px}
.obj .ov{padding:10px 14px;border-top:1px solid var(--lijn)}
.obj.vraag{border-color:var(--jou-rand);box-shadow:0 0 0 3px var(--jou-zacht)}
.obj.vraag .oh{background:var(--jou-zacht);color:var(--jou);border-color:#F1D5C5}
.obj.vraag .oh b{color:var(--jou)}
.obj.vraag.weg{opacity:.6}
.stapjes{list-style:none;font-size:13px}
.stapjes li{display:flex;gap:9px;align-items:center;padding:4px 0;color:var(--inkt)}
.stapjes li .ck{width:15px;height:15px;border-radius:50%;border:1.3px solid var(--lijn2);flex:none;display:flex;align-items:center;justify-content:center}
.stapjes li .ck.on{background:var(--klaar);border-color:var(--klaar);color:#fff}
.stapjes li .ck.on svg{width:9px;height:9px;stroke-width:2.6}
.stapjes li .ck.nu{border:2px solid var(--bezig);border-right-color:transparent}
.stapjes li .ck.mis{background:var(--mis);border-color:var(--mis);color:#fff}
.stapjes li .ck.mis svg{width:9px;height:9px;stroke-width:2.6}
.stapjes li.weg{color:var(--inkt3)}
.stapjes li .r{margin-left:auto;font-size:11.5px;color:var(--inkt3);font-family:var(--mono);flex:none}
.stapjes li .t{min-width:0;overflow-wrap:anywhere}

/* kaartblokken (zelfde typen als de Stapel) */
.kblokken{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.kblokken:empty{display:none}
.kb-tekst{background:var(--vlak2);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.kb-tekst .tag{display:block;font-size:11px;color:var(--inkt3);margin-bottom:3px}
.kb-tekst.voorstel{background:var(--wit);border:1px solid var(--lijn2)}
.kb-med img,.kb-med video{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px;background:var(--vlak2)}
.kb-med audio{width:100%}
.kb-med figcaption{font-size:12px;color:var(--inkt3);margin-top:4px}
.kb-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.kb-gal .g{position:relative;border-radius:9px;overflow:hidden;border:2px solid transparent;background:var(--vlak2);padding:0}
.kb-gal .g img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.kb-gal .g .lab{position:absolute;left:5px;bottom:5px;background:rgba(29,33,36,.78);color:#fff;font-size:11px;border-radius:5px;padding:1px 6px}
.kb-gal .g.gekozen{border-color:var(--inkt)}
.kb-link{display:flex;gap:10px;align-items:center;border:1px solid var(--lijn2);border-radius:10px;padding:8px 10px;min-width:0}
.kb-link:hover{border-color:var(--inkt3)}
.kb-link img{width:56px;height:56px;object-fit:cover;border-radius:7px;flex:none}
.kb-link .ic{width:36px;height:36px;border-radius:8px;background:var(--vlak2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--inkt2)}
.kb-link .tx{min-width:0;display:flex;flex-direction:column;font-size:13px}
.kb-link .tx b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-link .tx .om{color:var(--inkt2);font-size:12.5px}
.kb-link .tx .dom{color:var(--inkt3);font-size:12px;font-family:var(--mono)}
.kb-vn{margin:0}
.kb-vn .veld{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--vlak2)}
.kb-vn .veld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kb-vn .lijn{position:absolute;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-1px)}
.kb-vn .tg{position:absolute;top:6px;font-size:11px;background:rgba(29,33,36,.78);color:#fff;border-radius:5px;padding:1px 6px}
.kb-vn .tg.l{left:6px}.kb-vn .tg.r{right:6px}
.kb-vn input{width:100%;margin-top:6px}
.kb-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px}
.kb-cijfers div{border:1px solid var(--lijn2);border-radius:9px;padding:7px 10px}
.kb-cijfers dt{font-size:11px;color:var(--inkt3)}
.kb-cijfers dd{font-size:16px;font-weight:600}
.kb-cijfers .sub{font-size:11px;color:var(--inkt3)}
.kb-bedrag{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kb-bedrag .bedrag{font-size:24px;font-weight:600;letter-spacing:-.02em}
.kb-bedrag .bij{font-size:13px;color:var(--inkt2)}
.kb-bewijs{display:flex;gap:6px;flex-wrap:wrap}
.kb-bewijs a,.kb-bewijs span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--inkt2);border:1px solid var(--lijn);border-radius:8px;padding:4px 8px;max-width:100%;overflow-wrap:anywhere}
.kb-bewijs svg{width:12px;height:12px}
.kb-terug{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--inkt3);border:1px dashed var(--lijn2);border-radius:9px;padding:8px 10px}
.kb-graf figcaption{font-size:12px;color:var(--inkt2);margin-bottom:4px}
.kb-graf svg{width:100%;height:auto;display:block}
.kb-graf text{font-family:var(--f);font-size:10.5px;fill:var(--inkt2)}
.kb-graf .kpi{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kb-graf .kpi b{font-size:24px;font-weight:600}
.kb-graf .kpi span{font-size:12.5px;color:var(--inkt2)}

/* besluitknoppen */
.besluit{display:flex;flex-direction:column;gap:8px}
.besluit .rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.besluit .rij .sp{flex:1}
.besluit.stapel .rij{flex-direction:column;align-items:stretch}
.besluit.stapel .b2{height:42px;font-size:14px}
.besluit .hint{font-size:12px;color:var(--inkt3);line-height:1.45}
.besluit .hint.fout{color:var(--mis)}
.besluit textarea{width:100%;min-height:72px;border:1px solid var(--lijn2);border-radius:10px;padding:9px 11px;font-size:13.5px;resize:vertical;background:var(--wit)}
.besluit textarea:focus{outline:none;border-color:var(--inkt)}
.besluit .uitkomst{font-size:13px;color:var(--inkt2)}

/* composer */
.composer{margin:8px 20px 14px;border:1px solid var(--lijn2);border-radius:14px;background:var(--wit);padding:7px 7px 7px 14px;display:flex;align-items:flex-end;gap:10px;flex:none}
.composer:focus-within{border-color:var(--inkt3)}
.composer textarea{flex:1;min-width:0;border:0;outline:none;resize:none;font-size:14px;line-height:1.45;padding:6px 0;max-height:140px;background:transparent}
.composer .hint{font-size:12px;color:var(--inkt3);display:flex;gap:6px;align-items:center;padding-bottom:7px;white-space:nowrap}
.composer .hint span{border:1px solid var(--lijn);border-radius:5px;padding:0 5px;font-family:var(--mono);font-size:11px}
.composer .send{width:34px;height:34px;border-radius:50%;background:var(--inkt);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.composer .send svg{width:15px;height:15px}

/* ---------- rechterpaneel ---------- */
.paneel{width:360px;flex:none;border-left:1px solid var(--lijn);display:flex;flex-direction:column;background:var(--vlak2);min-height:0}
.ptabs{display:flex;gap:2px;padding:10px 12px 0;border-bottom:1px solid var(--lijn);flex:none;align-items:flex-end}
.ptabs button{font-size:13px;font-weight:500;color:var(--inkt3);padding:8px 10px 10px;border-bottom:2px solid transparent}
.ptabs button[aria-selected="true"]{color:var(--inkt);border-color:var(--inkt)}
.ptabs .sluit-m{display:none;margin-left:auto}
.pin{flex:1;min-height:0;overflow:auto}
.psec{padding:14px 16px;border-bottom:1px solid var(--lijn)}
.psec h5{font-size:12px;font-weight:500;color:var(--inkt3);margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.psec h5 a{color:var(--inkt2)}
.psec h5 a:hover{color:var(--inkt)}
.psec .leeg{font-size:13px;color:var(--inkt3);line-height:1.5}
.werkt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--lijn)}
.werkt:last-child{border-bottom:0}
.werkt .mid{flex:1;min-width:0;font-size:13px}
.werkt .mid b{font-weight:600}
.werkt .mid .ln{color:var(--inkt2);font-size:12.5px;margin-top:1px;overflow-wrap:anywhere}
.werkt .balk{margin-top:6px}
.kv2{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;color:var(--inkt2)}
.kv2 b{color:var(--inkt);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.run{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--lijn)}
.run:last-child{border-bottom:0}
.run .tm{font-family:var(--mono);font-size:11.5px;color:var(--inkt3);width:52px;flex:none}
.run .mid{flex:1;min-width:0;color:var(--inkt)}
.run .mid small{display:block;font-size:11.5px;color:var(--inkt3);overflow-wrap:anywhere}
.run .r{font-size:12px;color:var(--inkt2);flex:none;font-family:var(--mono)}

/* ---------- hoofdpaneel overzichten ---------- */
.hk{padding:20px 28px 14px;display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--lijn);flex:none;flex-wrap:wrap}
.hk h2{font-size:24px;font-weight:600;letter-spacing:-.015em}
.hk .sub{font-size:13px;color:var(--inkt2);margin-top:4px}
.hk .sp{flex:1}
.hk .rechts{font-size:13px;color:var(--inkt2);display:flex;gap:16px}
.hk .rechts b{color:var(--inkt);font-weight:600}
.filters{display:flex;gap:6px;padding:10px 28px;border-bottom:1px solid var(--lijn);align-items:center;flex-wrap:wrap;flex:none}
.filters .lb{font-size:12px;color:var(--inkt3);width:42px;flex:none}
.volgorde{font-size:12px;color:var(--inkt3);padding:8px 28px;border-bottom:1px solid var(--lijn);flex:none}
.volgorde b{color:var(--inkt2);font-weight:500}
table.lijst{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.lijst col.w-waarom{width:150px} table.lijst col.w-klant{width:128px} table.lijst col.w-kost{width:76px} table.lijst col.w-open{width:92px}
table.lijst .besl b{overflow-wrap:anywhere}
table.lijst th{text-align:left;font-weight:500;color:var(--inkt3);font-size:11.5px;padding:8px 12px;border-bottom:1px solid var(--lijn2);background:var(--vlak2);position:sticky;top:0;z-index:1}
table.lijst td{padding:10px 12px;border-bottom:1px solid var(--lijn);vertical-align:middle;color:var(--inkt2)}
table.lijst td b{color:var(--inkt);font-weight:600}
table.lijst td.num,table.lijst th.num{text-align:right;font-family:var(--mono);font-size:12px;color:var(--inkt);white-space:nowrap}
table.lijst tr{cursor:pointer}
table.lijst tbody tr:hover td{background:var(--vlak2)}
table.lijst tr.on td{background:var(--wit)}
table.lijst tr.on td:first-child,table.lijst tr.top td:first-child{box-shadow:inset 3px 0 0 var(--jou)}
table.lijst .waarom b{display:block;font-weight:600;font-size:12.5px}
table.lijst .waarom.geld b,table.lijst .waarom.wk b{color:var(--jou)}
table.lijst .waarom small{font-size:11.5px;color:var(--inkt3)}
table.lijst .besl{display:flex;gap:10px;align-items:center;min-width:0}
table.lijst .besl .mid{min-width:0}
table.lijst .besl b{display:block;line-height:1.35}
table.lijst .besl .ln{font-size:12px;color:var(--inkt3);display:flex;gap:6px;align-items:center;margin-top:2px;white-space:nowrap;overflow:hidden}
.soortje{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--lijn2);border-radius:6px;padding:0 6px;font-size:11.5px;color:var(--inkt2);background:var(--wit);flex:none}
.soortje svg{width:11px;height:11px}
.wacht-w{flex:1;min-height:0;display:flex}
.wacht-l{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.wacht-l .tabel{flex:1;min-height:0;overflow:auto}
.wacht-d{width:380px;flex:none;border-left:1px solid var(--lijn);overflow:auto;background:var(--vlak);display:flex;flex-direction:column}
.wd-kop{padding:16px 20px 12px;border-bottom:1px solid var(--lijn)}
.wd-kop .chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wd-kop .chips .r{margin-left:auto;font-size:12px;color:var(--jou);font-weight:500}
.wd-kop h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:10px 0 8px;overflow-wrap:anywhere}
.wd-kop .wie2{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--inkt2)}
.wd-kop .wie2 b{color:var(--inkt)}
.wd-sec{padding:14px 20px;border-bottom:1px solid var(--lijn)}
.wd-sec h5{font-size:11.5px;font-weight:500;color:var(--inkt3);margin-bottom:8px;letter-spacing:.02em;text-transform:uppercase}
.wd-sec p{font-size:13.5px;line-height:1.5;color:var(--inkt)}
.wd-sec p.zacht{color:var(--inkt2);font-size:13px}
.wd-sec ul.gevolg{list-style:none;font-size:13px;line-height:1.5}
.wd-sec ul.gevolg li{display:flex;gap:8px;padding:2px 0}
.wd-sec ul.gevolg li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--inkt3);margin-top:8px;flex:none}
.wd-sec .bedr{font-size:20px;font-weight:600}
.wd-knop{padding:16px 20px}
.leeg-w{padding:40px 28px;color:var(--inkt2);font-size:14px;line-height:1.55}
.leeg-w h3{font-size:18px;color:var(--inkt);margin-bottom:4px}
.voet-w{padding:12px 28px;font-size:12.5px;color:var(--inkt3);display:flex;gap:8px;align-items:center}
.voet-w svg{color:var(--klaar)}

/* apps */
.appsview{padding:6px 0 24px}
.apps-zoek{margin:14px 28px 4px;max-width:420px}
.grp{font-size:12px;font-weight:500;color:var(--inkt3);padding:18px 28px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;max-width:960px}
.grp .l{display:inline-flex;align-items:center;gap:8px;color:var(--inkt2)}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px 8px;padding:4px 20px;max-width:960px}
.app{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--inkt);text-align:center;line-height:1.25;padding:4px;border-radius:12px;min-width:0}
.app .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .ic{width:58px;height:58px;border-radius:16px;background:var(--wit);border:1px solid var(--lijn2);display:flex;align-items:center;justify-content:center;position:relative}
.app:hover .ic{border-color:var(--inkt3)}
.app .ic svg{width:24px;height:24px;stroke-width:1.5}
.app .ic img{width:100%;height:100%;object-fit:cover;border-radius:15px}
.app .ic .bd{position:absolute;top:-5px;right:-5px;background:var(--jou);color:#fff;font-size:10px;font-weight:600;border-radius:9px;padding:0 5px;line-height:17px}
.appkop{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--lijn);flex:none}
.appkop h1{font-size:16px;font-weight:600}
.appkop .crumb{font-size:13px;color:var(--inkt3)}
.appkop .sp{flex:1}
.appframe{flex:1;min-height:0;display:flex}
.appframe iframe{flex:1;width:100%;border:0;background:var(--vlak);display:block}

/* view-kop voor views van B op mobiel */
.mvkop{display:none}

/* melding (toast) */
.melding{position:fixed;left:50%;top:60px;transform:translateX(-50%) translateY(-8px);opacity:0;pointer-events:none;background:var(--inkt);color:#fff;font-size:13px;padding:10px 14px;border-radius:10px;max-width:calc(100% - 32px);transition:opacity .2s,transform .2s;z-index:80;line-height:1.4}
.melding.aan{opacity:1;transform:translateX(-50%) translateY(0)}
.melding.fout{background:var(--mis)}

/* laag: dialoog + menu */
.laag{position:fixed;inset:0;z-index:70;background:rgba(29,33,36,.38);display:flex;align-items:center;justify-content:center;padding:20px}
.dialoog{width:100%;max-width:440px;background:var(--wit);border-radius:18px;border:1px solid var(--lijn2);padding:22px 22px 18px;box-shadow:var(--zweef);max-height:100%;overflow:auto}
.dialoog .stopico{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--mis);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.dialoog .stopico svg{width:16px;height:16px;fill:var(--mis);stroke:var(--mis)}
.dialoog h2{font-size:22px;font-weight:600;letter-spacing:-.015em}
.dialoog .sub{font-size:13.5px;color:var(--inkt2);margin:6px 0 12px;line-height:1.5}
.dialoog ul{list-style:none;border-top:1px solid var(--lijn)}
.dialoog li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--lijn);font-size:13px;line-height:1.45;color:var(--inkt2)}
.dialoog li b{color:var(--inkt);font-weight:600}
.dialoog li svg{margin-top:2px;color:var(--inkt2)}
.dialoog .knoppen{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.dialoog .knoppen .btn{width:100%}
.dialoog .menu-r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--lijn);font-size:13.5px}
.dialoog .menu-r:last-child{border-bottom:0}
.dialoog .menu-r a,.dialoog .menu-r button.l{display:flex;gap:8px;align-items:center;color:var(--inkt)}

/* ---------- smallere desktop ---------- */
@media (max-width:1240px){ .paneel{width:300px} .zij{width:280px} .wacht-d{width:340px} }
@media (max-width:1060px) and (min-width:861px){ .paneel{display:none!important} }

/* ---------- mobiel ---------- */
@media (max-width:860px){
  body{font-size:15px}
  .rail{display:none}
  .paneel{display:none!important}
  html[data-paneel-m="1"] .paneel{display:flex!important;position:fixed;inset:0;bottom:calc(64px + env(safe-area-inset-bottom));width:auto;z-index:50;border:0}
  html[data-paneel-m="1"] .ptabs .sluit-m{display:inline-flex}
  .zij{display:none;width:auto;flex:1;min-width:0;border-right:0}
  .wacht-l .tabel{overflow-x:hidden}
  table.lijst{table-layout:auto}
  table.lijst colgroup{display:none}
  html[data-scherm="lijst"] .zij{display:flex}
  html[data-scherm="lijst"] .midden{display:none}
  .zij .zk{padding:14px 14px 8px 18px}
  .zij .zk h3{font-size:24px;letter-spacing:-.02em}
  .zij .zk .sub{display:block;font-size:12.5px;color:var(--inkt2);margin-top:2px;font-weight:400;letter-spacing:0}
  .zij .zk .kt{flex:1;min-width:0}
  .zij .zk .kt h3{display:block}
  .mkopr{display:flex;gap:6px;align-items:center}
  .zij .vast-items{display:none}
  .mstrook{display:block;margin:4px 14px 6px;border:1px solid var(--jou-rand);border-radius:12px;background:var(--wit);overflow:hidden}
  .mstrook .mk{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--jou-zacht);color:var(--jou);font-weight:600;font-size:13.5px}
  .mstrook .mk .r{margin-left:auto;font-weight:500;font-size:12.5px}
  .mstrook a.mr{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--lijn);font-size:13px;min-width:0}
  .mstrook a.mr span.t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mstrook a.mr .tm{font-size:11.5px;color:var(--inkt3)}
  .mstrook.leeg{border-color:var(--lijn2)}
  .mstrook.leeg .mk{background:var(--vlak2);color:var(--inkt2);font-weight:500}
  .wie{margin:0;border-radius:0;border:0;border-bottom:1px solid var(--lijn);padding:10px 18px}
  .wie.on{border-color:var(--lijn)}
  .zgrp{padding:16px 18px 6px}
  .zoek{margin:0 14px 6px}
  .mtabs{display:flex}
  .dk{padding:8px 12px;gap:8px;min-height:58px}
  .dk .terug-m,.dk .info-m{display:inline-flex}
  .dk .avs{display:none}
  .dk .ibtn .lbl{display:none}
  .dk .nm{font-size:15px}
  .tijdlijn{padding:14px 14px 10px}
  .sys{padding-left:46px}
  .msg{max-width:100%}
  .msg.ik{max-width:88%}
  .obj{max-width:100%}
  .composer{margin:6px 10px 8px}
  .composer .hint{display:none}
  .composer textarea{font-size:16px}
  .hk{padding:14px 18px 10px}
  .hk h2{font-size:24px}
  .hk .rechts{width:100%}
  .filters{padding:8px 14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters .lb{width:auto}
  .volgorde{padding:8px 18px}
  .wacht-d{display:none}
  html[data-detail="1"] .wacht-l{display:none}
  html[data-detail="1"] .wacht-d{display:flex;width:auto;flex:1;border-left:0}
  .mterug{display:flex;align-items:center;gap:6px;padding:10px 12px 0;font-size:14px;color:var(--inkt2);flex:none}
  table.lijst thead{display:none}
  table.lijst,table.lijst tbody,table.lijst tr{display:block;width:100%}
  table.lijst tr{display:grid;grid-template-columns:1fr auto;padding:10px 16px;border-bottom:1px solid var(--lijn);gap:4px 10px}
  table.lijst td{display:block;padding:0;border:0;background:none!important;box-shadow:none!important}
  table.lijst td.c-besl{grid-column:1/-1;order:-1}
  table.lijst td.c-waarom{grid-column:1}
  table.lijst td.c-open{grid-column:2;text-align:right}
  table.lijst td.c-klant,table.lijst td.c-kost{display:none}
  table.lijst tr.top{box-shadow:inset 3px 0 0 var(--jou)}
  table.lijst .waarom{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
  table.lijst .waarom b{display:inline}
  .apps{grid-template-columns:repeat(4,1fr);padding:4px 10px}
  .grp{padding:16px 18px 6px}
  .apps-zoek{margin:12px 14px 4px}
  .mvkop{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--lijn);flex:none;font-size:15px;font-weight:600}
  .mvkop .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stopbalk{padding:8px 12px;gap:8px;font-size:12.5px}
  .stopbalk .tx .lang{display:none}
  .melding{top:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
  .laag{align-items:flex-end;padding:0}
  .dialoog{border-radius:18px 18px 0 0;max-width:none;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
.mtabs{display:none;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--lijn);background:var(--vlak);flex:none}
.mtabs a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--inkt3);position:relative;min-width:64px;padding:4px 0}
.mtabs a svg{width:22px;height:22px}
.mtabs a.on{color:var(--inkt)}
.mtabs a .bd{position:absolute;top:0;left:50%;margin-left:6px;background:var(--jou);color:#fff;font-size:10px;border-radius:8px;padding:0 5px;font-weight:600;line-height:15px}
@media (max-width:860px){ .mtabs{display:flex} }
@media (max-height:760px) and (max-width:860px){
  .zij .zk{padding-top:10px}
  .zij .zk h3{font-size:21px}
  .dk{min-height:52px}
  .tijdlijn{gap:10px}
}