/* Agent OS v3 — werkplek (Operate-modus). Vaste linkerrail, promptbalk bovenaan, leesbaar en Nederlands.
   Alles staat onder .agent-os: de studentkant en de rest van de hub veranderen niet. Ingebedde hubviews (.jv-inbed) krijgen geen eigen resets.
   Tekst op een accentkleur altijd via var(--ao-on-acc). Eén sans-serif; monospace alleen voor id's, tijden en cijfers. */
html.jarvis-aan #side,html.jarvis-aan .topbar,html.jarvis-aan #topbar,html.jarvis-aan .mnav{display:none!important}
html.jarvis-aan body{overflow:hidden}

.agent-os{
  --ao-bg:#0f1220;--ao-rail:#0b0e1a;--ao-panel:#161a2c;--ao-panel2:#1d2238;--ao-line:#2a3050;--ao-line2:#3d4672;
  --ao-ink:#e6e8ef;--ao-mut:#a6adc6;--ao-dim:#8d94b0;
  --ao-acc:#7f8dff;--ao-on-acc:#0b0e1a;
  --ao-ok:#4ade80;--ao-wacht:#fbbf24;--ao-fout:#f87171;
  --ao-sans:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  --ao-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ao-ease:cubic-bezier(.2,.7,.2,1);
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ao-bg);color:var(--ao-ink);font:15px/1.5 var(--ao-sans);color-scheme:dark;-webkit-font-smoothing:antialiased;
  scrollbar-color:var(--ao-line2) transparent;
}
.agent-os *{box-sizing:border-box}
.agent-os ::selection{background:var(--ao-acc);color:var(--ao-on-acc)}
.agent-os :focus-visible{outline:2px solid var(--ao-acc);outline-offset:2px}
.agent-os ::-webkit-scrollbar{width:10px;height:10px}
.agent-os ::-webkit-scrollbar-thumb{background:var(--ao-line2);border-radius:6px;border:2px solid var(--ao-bg)}
.agent-os .ao-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.agent-os .ao-mono{font-family:var(--ao-mono);font-variant-numeric:tabular-nums}
.agent-os a{color:var(--ao-acc);text-underline-offset:3px}
.agent-os svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* knoppen en invoer (alleen onze eigen klassen, zodat ingebedde hubviews hun eigen stijl houden) */
.agent-os .ao-knop,.agent-os .ao-mini,.agent-os .ao-primair,.agent-os .ao-menuknop,.agent-os .ao-switch button{font:inherit;color:var(--ao-ink);cursor:pointer;background:var(--ao-panel2);border:1px solid var(--ao-line);border-radius:8px;padding:8px 14px;min-height:40px;transition:background .15s var(--ao-ease),border-color .15s var(--ao-ease)}
.agent-os a.ao-knop{display:inline-flex;align-items:center;text-decoration:none}
.agent-os .ao-knop:hover:not(:disabled),.agent-os .ao-mini:hover:not(:disabled),.agent-os .ao-switch button:hover:not([aria-pressed=true]){border-color:var(--ao-line2);background:var(--ao-line)}
.agent-os .ao-knop:active:not(:disabled),.agent-os .ao-mini:active:not(:disabled){background:var(--ao-panel)}
.agent-os button:disabled{opacity:.5;cursor:default}
.agent-os .ao-primair{background:var(--ao-acc);color:var(--ao-on-acc);border-color:transparent;font-weight:600;padding:8px 22px}
.agent-os .ao-primair:hover:not(:disabled){background:var(--ao-ink)}
.agent-os .ao-mini{font-size:13px;min-height:34px;padding:4px 12px;background:transparent;color:var(--ao-mut)}
.agent-os .ao-link{font:inherit;font-size:14px;background:none;border:0;padding:0 2px;margin-left:6px;color:var(--ao-acc);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.agent-os input,.agent-os select{font:inherit;color:var(--ao-ink);background:var(--ao-bg);border:1px solid var(--ao-line2);border-radius:8px;padding:8px 12px;min-height:40px;caret-color:var(--ao-acc);accent-color:var(--ao-acc)}
.agent-os input::placeholder{color:var(--ao-dim)}
.agent-os input:focus-visible,.agent-os select:focus-visible{outline-offset:0;border-color:var(--ao-acc)}

/* ---- kop: titel, schakelaar, verbruik, promptbalk, routering ---- */
.agent-os .ao-kop{flex:none;background:var(--ao-panel);border-bottom:1px solid var(--ao-line);padding:10px 20px 8px}
.agent-os .ao-kop h1{font:650 18px/1.2 var(--ao-sans);margin:0}
.agent-os .ao-kop-rij{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.agent-os .ao-kopacties{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap;color:var(--ao-mut);font-size:14px}
.agent-os .ao-kopacties time{color:var(--ao-ink);font-size:14px}
.agent-os .ao-chip{font-size:13px;color:var(--ao-mut)}
.agent-os .ao-chip b{color:var(--ao-ink);font-weight:600}
.agent-os .ao-switch{display:flex;gap:2px;padding:2px;background:var(--ao-bg);border:1px solid var(--ao-line);border-radius:10px}
.agent-os .ao-switch button{border:0;background:transparent;color:var(--ao-mut);min-height:30px;padding:2px 12px;font-size:13px;border-radius:8px}
.agent-os .ao-switch button[aria-pressed=true]{background:var(--ao-acc);color:var(--ao-on-acc);font-weight:600}
.agent-os .ao-menuknop{display:none}
.agent-os .ao-prompt{display:flex;gap:8px;margin:10px 0 0}
.agent-os .ao-prompt input{flex:1;min-width:0;min-height:48px;font-size:16px;padding:10px 16px;border-radius:10px}
.agent-os .ao-prompt .ao-primair{min-height:48px;border-radius:10px}
.agent-os .ao-routebalk{min-height:26px;margin-top:6px;font-size:14px}
.agent-os .ao-routebalk p{margin:0}
.agent-os .ao-routeregel{color:var(--ao-ink)}
.agent-os .ao-routeregel span{color:var(--ao-mut)}
.agent-os .ao-routeregel b{font-weight:600}
.agent-os .ao-hint{color:var(--ao-dim);font-size:13px}
.agent-os .ao-let-op{color:var(--ao-wacht);font-size:13px}
.agent-os #ao-taak p{margin:4px 0 0}
.agent-os .ao-melding{font-size:14px;color:var(--ao-ink)}
.agent-os .ao-melding.fout{color:var(--ao-fout)}
.agent-os #ao-taak:empty{display:none}

/* ---- romp: rail + inhoud ---- */
.agent-os .ao-body{flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr)}
.agent-os .ao-rail{overflow:auto;background:var(--ao-rail);border-right:1px solid var(--ao-line);padding:10px 8px;display:flex;flex-direction:column}
.agent-os .ao-groepen{list-style:none;margin:0;padding:0;flex:1}
.agent-os .ao-groep{width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-weight:600;color:var(--ao-ink);background:none;border:0;border-radius:8px;padding:8px 10px;min-height:42px;cursor:pointer;text-align:left;transition:background .15s var(--ao-ease)}
.agent-os .ao-groep span{flex:1}
.agent-os .ao-groep:hover{background:var(--ao-panel)}
.agent-os .ao-groep.actief svg:first-child{color:var(--ao-acc)}
.agent-os .ao-groep .ao-pijl{width:16px;height:16px;color:var(--ao-dim);transition:transform .2s var(--ao-ease)}
.agent-os .ao-groep[aria-expanded=true] .ao-pijl{transform:rotate(180deg)}
.agent-os .ao-items{list-style:none;margin:0 0 6px;padding:0 0 0 14px}
.agent-os .ao-items[hidden]{display:none}
.agent-os .ao-item{width:100%;display:block;font:inherit;font-size:14px;color:var(--ao-mut);background:none;border:0;border-radius:8px;padding:7px 12px;min-height:36px;cursor:pointer;text-align:left;transition:background .15s var(--ao-ease),color .15s var(--ao-ease)}
.agent-os .ao-item:hover{background:var(--ao-panel);color:var(--ao-ink)}
.agent-os .ao-item[aria-current=page]{background:var(--ao-acc);color:var(--ao-on-acc);font-weight:600}
.agent-os .ao-rail-onder{border-top:1px solid var(--ao-line);padding-top:8px;margin-top:8px}
.agent-os .ao-item.klassiek{color:var(--ao-ink);padding-left:10px}
.agent-os .ao-inhoud{overflow:auto;padding:20px 24px 48px;min-width:0}

/* ---- blokken en tekst ---- */
.agent-os .ao-blok{background:var(--ao-panel);border:1px solid var(--ao-line);border-radius:12px;padding:16px 18px;min-width:0}
.agent-os .ao-blok h2{font:650 16px/1.3 var(--ao-sans);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.agent-os .ao-blok h3{font:600 14px/1.3 var(--ao-sans);margin:16px 0 8px;color:var(--ao-ink)}
.agent-os .ao-blok h4,.agent-os .ao-blok h5{font:600 13px/1.3 var(--ao-sans);margin:14px 0 6px;color:var(--ao-mut)}
.agent-os .ao-blok p{margin:0 0 8px}
.agent-os .ao-blok ul,.agent-os .ao-blok ol{margin:0;padding:0;list-style:none}
.agent-os .ao-breed{max-width:980px}
.agent-os .ao-vandaag{display:grid;gap:16px}
.agent-os .ao-drie{display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.5fr) minmax(260px,1.1fr);gap:16px;align-items:start}
.agent-os .ao-klein{font-size:13px;color:var(--ao-dim)}
.agent-os .ao-leeg{color:var(--ao-mut);font-size:14px;max-width:62ch}
.agent-os .ao-tekst{color:var(--ao-ink);max-width:68ch}
.agent-os .ao-teller{display:inline-block;min-width:22px;padding:0 7px;border-radius:99px;background:var(--ao-wacht);color:var(--ao-on-acc);font:600 12px/20px var(--ao-mono);text-align:center}
.agent-os .ao-label{font-size:12px;color:var(--ao-mut);border:1px solid var(--ao-line2);border-radius:6px;padding:0 6px;white-space:nowrap}
.agent-os .ao-fout{padding:12px 14px;border:1px solid var(--ao-line2);border-radius:8px;background:var(--ao-bg)}
.agent-os .ao-fout p{margin:0 0 8px;color:var(--ao-fout)}
.agent-os .ao-leeg-scherm{margin:auto;padding:24px;text-align:center}
.agent-os .ao-leeg-scherm h1{font:650 22px/1.3 var(--ao-sans);margin:0 0 8px}

/* status: kleur + tekst */
.agent-os .ao-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap}
.agent-os .ao-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ao-dim)}
.agent-os .ao-st.bezig{color:var(--ao-ok)}.agent-os .ao-st.bezig::before{background:var(--ao-ok)}
.agent-os .ao-st.wacht{color:var(--ao-wacht)}.agent-os .ao-st.wacht::before{background:var(--ao-wacht)}
.agent-os .ao-st.fout{color:var(--ao-fout)}.agent-os .ao-st.fout::before{background:var(--ao-fout)}
.agent-os .ao-st.vrij{color:var(--ao-mut)}

/* lijsten en rijen */
.agent-os .ao-lijst{display:grid;gap:2px}
.agent-os .ao-rij{width:100%;display:grid;gap:2px;text-align:left;font:inherit;color:var(--ao-ink);background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s var(--ao-ease)}
.agent-os .ao-rij:hover,.agent-os .ao-rij.aan{background:var(--ao-panel2)}
.agent-os .ao-rij b{font-weight:600}
.agent-os .ao-rij span{font-size:13px;color:var(--ao-mut)}
.agent-os .ao-rijkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.agent-os .ao-regel{display:grid;gap:2px;padding:8px 10px}
.agent-os .ao-regel span{font-size:13px;color:var(--ao-mut)}
.agent-os .ao-punten{display:grid;gap:4px}
.agent-os .ao-punten li{font-size:14px;color:var(--ao-ink);padding-left:14px;position:relative}
.agent-os .ao-punten li::before{content:"";position:absolute;left:2px;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--ao-line2)}
.agent-os .ao-resultaat{display:grid;gap:2px;padding:8px 10px;border-bottom:1px solid var(--ao-line)}
.agent-os .ao-resultaat span{font-size:13px;color:var(--ao-mut)}
.agent-os .ao-resultaat .ao-fragment{color:var(--ao-dim)}

/* afdelingen en agents (geen kaart-in-kaart: scheiding met een lijn) */
.agent-os .ao-afd{padding:14px 0;border-top:1px solid var(--ao-line)}
.agent-os .ao-afd:first-child{border-top:0;padding-top:0}
.agent-os .ao-afd header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agent-os .ao-blok .ao-afd h3{margin:0}
.agent-os .ao-afd .ao-klein{margin:2px 0 6px}
.agent-os .ao-agents{display:grid;gap:2px;margin-top:4px}
.agent-os .ao-agent{width:100%;display:grid;gap:1px;text-align:left;font:inherit;color:var(--ao-ink);background:none;border:0;border-radius:8px;padding:8px 10px;transition:background .15s var(--ao-ease)}
.agent-os button.ao-agent{cursor:pointer}
.agent-os button.ao-agent:hover{background:var(--ao-panel2)}
.agent-os .ao-agent-kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agent-os .ao-agent-kop b{font-weight:600}
.agent-os .ao-agent-meta{font-size:13px;color:var(--ao-mut)}
.agent-os .ao-agent-taak{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-os .ao-agent-laatst{font-size:12.5px;color:var(--ao-dim)}

/* workflow: één regel met zes fasen */
.agent-os .ao-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0 0 8px}
.agent-os .ao-flow li{display:flex;align-items:baseline;gap:8px;padding:6px 14px;border-left:1px solid var(--ao-line)}
.agent-os .ao-flow li:first-child{border-left:0;padding-left:0}
.agent-os .ao-flow .ao-mono{font-size:20px;font-weight:600}
.agent-os .ao-flow li span:last-child{font-size:14px;color:var(--ao-mut)}

/* meters (verbruik) */
.agent-os .ao-meter{display:grid;grid-template-columns:130px 52px 1fr;align-items:center;gap:12px;padding:6px 0;max-width:520px}
.agent-os .ao-meter span{color:var(--ao-mut);font-size:14px}
.agent-os .ao-meter b{font-weight:600;text-align:right}
.agent-os .ao-meter i{display:block;height:8px;background:var(--ao-bg);border:1px solid var(--ao-line);border-radius:99px;overflow:hidden}
.agent-os .ao-meter em{display:block;height:100%;background:var(--ao-acc)}

/* brein: tabs, zoeken, uitklappen, tweepaneel */
.agent-os .ao-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--ao-line);margin:0 0 14px}
.agent-os .ao-tabs button{font:inherit;color:var(--ao-mut);background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;min-height:40px;cursor:pointer;transition:color .15s var(--ao-ease),border-color .15s var(--ao-ease)}
.agent-os .ao-tabs button:hover{color:var(--ao-ink)}
.agent-os .ao-tabs button[aria-current=page]{color:var(--ao-ink);border-bottom-color:var(--ao-acc);font-weight:600}
.agent-os .ao-zoek{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.agent-os .ao-zoek input{flex:1;min-width:160px}
.agent-os .ao-uitklap{width:100%;text-align:left;font:inherit;font-weight:600;color:var(--ao-ink);background:none;border:0;border-radius:8px;padding:8px 10px;min-height:38px;cursor:pointer}
.agent-os .ao-uitklap::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-right:2px solid var(--ao-mut);border-bottom:2px solid var(--ao-mut);transform:rotate(-45deg);transition:transform .15s var(--ao-ease)}
.agent-os .ao-uitklap[aria-expanded=true]::before{transform:rotate(45deg)}
.agent-os .ao-uitklap:hover{background:var(--ao-panel2)}
.agent-os .ao-uitklap-inh{padding:0 10px 10px 32px}
.agent-os .ao-uitklap-inh p{margin:0 0 6px;font-size:14px}
.agent-os .ao-twee{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.3fr);gap:20px;align-items:start}
.agent-os .ao-lees{border-left:1px solid var(--ao-line);padding-left:20px;min-width:0}
.agent-os .ao-blok .ao-lees h3{margin-top:0}
.agent-os .ao-leestekst{max-width:68ch;line-height:1.6;overflow-wrap:anywhere}
.agent-os .ao-paginering{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--ao-mut);flex-wrap:wrap}
.agent-os .ao-skills{display:grid;gap:2px}
.agent-os .ao-skill{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px;border-bottom:1px solid var(--ao-line)}
.agent-os .ao-skill p{margin:2px 0;font-size:14px;color:var(--ao-mut)}

/* skeleton: statische blokken, geen animatie */
.agent-os .ao-skel{display:grid;gap:10px}
.agent-os .ao-skel i{display:block;height:14px;border-radius:6px;background:var(--ao-panel2)}
.agent-os .ao-skel i:nth-child(odd){width:92%}.agent-os .ao-skel i:nth-child(even){width:68%}

/* detailpaneel van een agent */
.agent-os .ao-detail{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:70;background:var(--ao-panel);border-left:1px solid var(--ao-line2);box-shadow:-12px 0 32px rgba(3,4,10,.45);padding:18px 20px;overflow:auto}
.agent-os .ao-detail header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.agent-os .ao-detail h2{font:650 18px/1.3 var(--ao-sans);margin:0}
.agent-os .ao-detail h3{font:600 14px/1.3 var(--ao-sans);margin:16px 0 6px}
.agent-os .ao-detail p{margin:0 0 8px}
.agent-os .ao-detail ul{margin:0;padding:0;list-style:none}
.agent-os .ao-dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:8px 0}
.agent-os .ao-dl dt{color:var(--ao-dim);font-size:13px}
.agent-os .ao-dl dd{margin:0;font-size:14px}

/* ingebedde hubview: eigen thema van de hub, geen resets van Agent OS */
.agent-os .jv-inbed{background:var(--bg);color:var(--tx);border:1px solid var(--ao-line);border-radius:12px;padding:16px;min-height:60vh}

/* commandopalet (Ctrl/Cmd+K of /) */
.jarvis-pal{position:fixed;inset:0;z-index:80;background:rgba(3,4,10,.72);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.jarvis-pal .jv-palvak{width:min(620px,92vw);background:#161a2c;border:1px solid #3d4672;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden;color:#e6e8ef;font:15px/1.5 Inter,-apple-system,"Segoe UI",system-ui,sans-serif}
.jarvis-pal .jv-palvak input{width:100%;padding:16px 18px;background:transparent;border:0;border-bottom:1px solid #2a3050;color:inherit;font:inherit;font-size:16px;outline:none;caret-color:#7f8dff}
.jarvis-pal .jv-palvak input::placeholder{color:#8d94b0}
.jarvis-pal .ao-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.jarvis-pal #jarvis-pallijst{max-height:50vh;overflow:auto}
.jarvis-pal .jv-palrij{padding:10px 18px;display:flex;gap:12px;align-items:baseline;cursor:pointer}
.jarvis-pal .jv-palrij em{font-style:normal;color:#8d94b0;font-size:13px}
.jarvis-pal .jv-palrij.on,.jarvis-pal .jv-palrij:hover{background:#1d2238}
.jarvis-pal .jv-leeg{padding:14px 18px;color:#a6adc6}

/* ---- tablet en telefoon ---- */
@media(max-width:1180px){
  .agent-os .ao-drie{grid-template-columns:1fr 1fr}
  .agent-os .ao-drie>.ao-blok:first-child{grid-column:1/-1}
  .agent-os .ao-flow{grid-template-columns:repeat(3,1fr);row-gap:8px}
  .agent-os .ao-flow li:nth-child(4){border-left:0;padding-left:0}
}
@media(max-width:860px){
  .agent-os .ao-twee{grid-template-columns:1fr}
  .agent-os .ao-lees{border-left:0;padding-left:0;border-top:1px solid var(--ao-line);padding-top:14px}
  .agent-os .ao-drie{grid-template-columns:1fr}
}
@media(max-width:767px){
  .agent-os .ao-kop{padding:8px 12px 6px}
  .agent-os .ao-kop-rij{gap:8px}
  .agent-os .ao-menuknop{display:inline-flex;align-items:center}
  .agent-os .ao-kopacties{margin-left:0;width:100%;gap:8px;font-size:13px}
  .agent-os .ao-prompt{flex-wrap:nowrap}
  .agent-os .ao-prompt .ao-primair{padding:8px 16px}
  .agent-os .ao-body{grid-template-columns:minmax(0,1fr)}
  .agent-os .ao-rail{position:fixed;top:0;bottom:0;left:0;width:min(300px,86vw);z-index:75;transform:translateX(-102%);visibility:hidden;transition:transform .2s var(--ao-ease),visibility 0s linear .2s;box-shadow:12px 0 32px rgba(3,4,10,.5)}
  .agent-os .ao-rail.open{transform:none;visibility:visible;transition:transform .2s var(--ao-ease),visibility 0s}
  .agent-os .ao-scrim{position:fixed;inset:0;z-index:74;background:rgba(3,4,10,.6)}
  .agent-os .ao-inhoud{padding:14px 12px 40px}
  .agent-os .ao-blok{padding:14px}
  .agent-os .ao-flow{grid-template-columns:repeat(2,1fr)}
  .agent-os .ao-flow li:nth-child(4){border-left:1px solid var(--ao-line);padding-left:14px}
  .agent-os .ao-flow li:nth-child(odd){border-left:0;padding-left:0}
  .agent-os .ao-meter{grid-template-columns:100px 48px 1fr}
  .agent-os .ao-dl{grid-template-columns:1fr}
  .agent-os .ao-skill{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){.agent-os *{transition:none!important}}