:root{
  --ground:#EAF2FA; --ground-2:#F6F9FC; --surface:#FFFFFF; --surface-2:#F7FAFD;
  --line:#E7EEF6; --line-soft:#EFF4F9;
  --ink:#22303E; --muted:#6C7885; --muted-2:#8A96A3;
  --brand:#1A60B1; --brand-ink:#144E90; --brand-soft:#E9F1FA;
  --appbar:#1A60B1; --appbar-ink:#FFFFFF; --appbar-sub:#C6DBF1;
  --green:#3EBA44; --green-ink:#2C8E34; --green-soft:#ECF7ED;
  --orange:#F58A20; --orange-ink:#C9701A; --orange-soft:#FDF1E3;
  --amber-soft:#FBF1DF; --amber-line:#F0D6A6; --amber-ink:#9A6A15;
  --red:#D6483B; --red-soft:#FBEBE9; --red-ink:#B23A2F;
  --shadow-sm:0 1px 3px rgba(20,50,90,.05);
  --shadow:0 2px 10px rgba(20,50,90,.06), 0 12px 34px rgba(20,50,90,.05);
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1621; --ground-2:#111C29; --surface:#16222F; --surface-2:#1B2836;
    --line:#26384B; --line-soft:#213041;
    --ink:#ECF2FB; --muted:#AAB8C9; --muted-2:#8B9AAC;
    --brand:#5497DE; --brand-ink:#77AEE8; --brand-soft:#16273B;
    --appbar:#12233A; --appbar-ink:#EAF2FB; --appbar-sub:#8FB4DE;
    --green:#48C24F; --green-ink:#6AD070; --green-soft:#13301B;
    --orange:#F59B3D; --orange-ink:#F7B36A; --orange-soft:#33240F;
    --amber-soft:#2E2410; --amber-line:#5A461C; --amber-ink:#E3B968;
    --red:#E5675B; --red-soft:#361A18; --red-ink:#F08B81;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow:0 2px 10px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1621; --ground-2:#111C29; --surface:#16222F; --surface-2:#1B2836;
  --line:#26384B; --line-soft:#213041;
  --ink:#ECF2FB; --muted:#AAB8C9; --muted-2:#8B9AAC;
  --brand:#5497DE; --brand-ink:#77AEE8; --brand-soft:#16273B;
  --appbar:#12233A; --appbar-ink:#EAF2FB; --appbar-sub:#8FB4DE;
  --green:#48C24F; --green-ink:#6AD070; --green-soft:#13301B;
  --orange:#F59B3D; --orange-ink:#F7B36A; --orange-soft:#33240F;
  --amber-soft:#2E2410; --amber-line:#5A461C; --amber-ink:#E3B968;
  --red:#E5675B; --red-soft:#361A18; --red-ink:#F08B81;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow:0 2px 10px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,sans-serif; font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
button{font-family:inherit}
.mono{font-family:"Roboto Mono",ui-monospace,Menlo,monospace}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

.btn{border:1px solid transparent; border-radius:10px; padding:10px 18px; font-weight:500; font-size:14.5px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:filter .12s, background .12s}
.btn:hover{filter:brightness(1.04)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:none}
.btn-green{background:var(--green); color:#fff}
.btn-orange{background:var(--orange); color:#fff}
.btn-brand{background:var(--brand); color:#fff}
.btn-soft{background:var(--surface); border-color:var(--line); color:var(--brand-ink)}
.btn-soft:hover{background:var(--brand-soft)}
.btn-danger{background:var(--surface); border-color:var(--line); color:var(--red-ink)}
.btn-danger:hover{background:var(--red-soft); border-color:var(--red)}
.link{background:none; border:none; color:var(--brand); cursor:pointer; font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; gap:6px; padding:4px 2px}
.link:hover{color:var(--brand-ink); text-decoration:underline}
.link svg{width:15px; height:15px}

#login{min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(180deg,#DCEBF9 0%, var(--ground) 46%, var(--ground-2) 100%)}
:root[data-theme="dark"] #login, :root:not([data-theme="light"]) #login{background:linear-gradient(180deg,#13233A 0%, var(--ground) 60%)}
.login-card{width:100%; max-width:396px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.login-top{padding:26px 28px 22px}
.login-body{padding:6px 28px 28px}
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:7px}
.field input{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--ink); font-size:14.5px}
.field input:focus{outline:none; border-color:var(--brand); background:var(--surface)}
.hint{font-size:12.5px; color:var(--muted); margin:2px 0 18px; line-height:1.5}
.err{font-size:13px; color:var(--red-ink); background:var(--red-soft); border:1px solid var(--red); border-radius:9px; padding:9px 12px; margin-bottom:14px}

.brandmark{display:flex; align-items:center; gap:11px}
.brandmark .logo{display:flex; flex-direction:column; line-height:1.05}
.brandmark .logo .a{font-weight:700; letter-spacing:.06em; color:var(--brand); font-size:16px}
.brandmark .logo .b{font-weight:500; letter-spacing:.16em; color:var(--muted); font-size:9.5px}
.brandmark .glyph{width:34px; height:34px; border-radius:9px; background:var(--brand-soft); display:grid; place-items:center; flex:none}
.brandmark .glyph svg{width:20px; height:20px}
.appbar .brandmark .logo .a{color:#fff} .appbar .brandmark .logo .b{color:var(--appbar-sub)}
.appbar .brandmark .glyph{background:rgba(255,255,255,.14)}

#app{min-height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#E1EDF8 0, var(--ground) 220px)}
:root[data-theme="dark"] #app, :root:not([data-theme="light"]) #app{background:var(--ground)}
.appbar{background:var(--appbar); color:var(--appbar-ink); display:flex; align-items:center; gap:14px; padding:13px 22px; position:sticky; top:0; z-index:30; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.appbar .spacer{flex:1}
.abtn{background:rgba(255,255,255,.14); color:var(--appbar-ink); border:none; padding:9px 14px; border-radius:10px; font-size:13.5px; cursor:pointer; font-weight:500; display:inline-flex; align-items:center; gap:8px}
.abtn:hover{background:rgba(255,255,255,.22)}
.abtn svg{width:16px; height:16px}
.userchip{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--appbar-ink)}
.userchip .av{width:28px; height:28px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700}

.layout{flex:1; display:grid; grid-template-columns:186px 330px 1fr; gap:20px; padding:20px; max-width:1320px; width:100%; margin:0 auto; min-height:0}
@media (max-width:1000px){ .layout{grid-template-columns:1fr; padding:16px; gap:14px} }

.rail{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:10px; align-self:start; display:flex; flex-direction:column; gap:3px}
@media (max-width:1000px){ .rail{flex-direction:row; overflow-x:auto} }
.folder{display:flex; align-items:center; gap:11px; padding:11px 12px; border:none; background:none; border-radius:11px; cursor:pointer; color:var(--ink); font-size:14px; font-weight:500; text-align:left; white-space:nowrap}
.folder:hover{background:var(--surface-2)}
.folder[aria-current="true"]{background:var(--brand-soft); color:var(--brand-ink)}
.folder .fi{width:18px; height:18px; flex:none; color:var(--muted)}
.folder[aria-current="true"] .fi{color:var(--brand)}
.folder .fn{flex:1}
.folder .cnt{font-size:12px; font-weight:700; color:var(--muted-2); font-variant-numeric:tabular-nums}
.folder[aria-current="true"] .cnt{color:var(--brand)}

.queue{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; align-self:start; max-height:calc(100vh - 100px)}
.queue-head{padding:16px 18px 12px}
.queue-head h1{margin:0 0 2px; font-size:16px; font-weight:700; color:var(--brand-ink)}
.queue-head .sub{font-size:12.5px; color:var(--muted)}
.qlist{overflow-y:auto; padding:6px 10px 12px; display:flex; flex-direction:column; gap:3px}
.qitem{width:100%; text-align:left; background:none; border:none; border-radius:12px; padding:12px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:background .12s}
.qitem:hover{background:var(--surface-2)}
.qitem[aria-current="true"]{background:var(--brand-soft)}
.qitem .av{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--brand-soft); color:var(--brand)}
.qitem[aria-current="true"] .av{background:#fff}
.qitem .who{min-width:0; flex:1}
.qitem .who .nm{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qitem .who .subj{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qitem .who .st{font-size:11.5px; margin-top:3px; display:flex; align-items:center; gap:6px; color:var(--muted-2)}
.qitem .who .st .d{width:7px; height:7px; border-radius:50%; flex:none}
.d-green{background:var(--green)} .d-amber{background:var(--orange)} .d-red{background:var(--red)} .d-done{background:var(--muted-2)}
.qitem .time{font-size:11.5px; color:var(--muted-2); flex:none; align-self:flex-start; margin-top:2px; font-variant-numeric:tabular-nums}

.detail-wrap{min-width:0; display:flex; flex-direction:column; gap:16px}
.dhead{display:flex; align-items:flex-start; gap:15px; padding:4px 4px 0}
.dhead .av{width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:17px}
.dhead h2{margin:0; font-size:21px; font-weight:700; color:var(--brand-ink); line-height:1.2; text-wrap:balance}
.dhead .subj{color:var(--muted); font-size:14.5px; margin-top:3px}
.dhead .rt{margin-left:auto; font-size:12.5px; color:var(--muted-2); white-space:nowrap; padding-top:4px; font-variant-numeric:tabular-nums}

.badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; padding:5px 11px; border-radius:999px; margin-top:8px}
.badge svg{width:14px; height:14px}
.badge-amber{background:var(--amber-soft); color:var(--amber-ink); border:1px solid var(--amber-line)}

.card{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px}
.card .clabel{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px}
.card .clabel .spacer{flex:1}

.addr-card{display:flex; align-items:center; gap:14px; padding:14px 20px}
.addr-card .l{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.addr-card .em{font-size:15px; font-weight:500; margin-top:2px}
.addr-card .spacer{flex:1}
.addr-card .route{font-size:12px; color:var(--muted); margin-top:2px}

.mailbody{word-break:break-word; font-size:15px; line-height:1.75; margin-top:14px; max-width:72ch; max-height:360px; overflow-y:auto; color:var(--ink)}
.mailbody p{margin:0 0 11px} .mailbody p:last-child{margin-bottom:0}
.mailtoggle{margin-top:10px}

.disc{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); border:1px solid var(--line); overflow:hidden}
.disc-btn{width:100%; display:flex; align-items:center; gap:11px; padding:14px 20px; background:none; border:none; cursor:pointer; color:var(--brand-ink); font-weight:500; font-size:14.5px; text-align:left}
.disc-btn:hover{background:var(--surface-2)}
.disc-btn .chev{margin-left:auto; transition:transform .18s; color:var(--muted)}
.disc-btn .chev svg{width:18px; height:18px; display:block}
.disc[data-open="true"] .disc-btn .chev{transform:rotate(180deg)}
.disc-btn .ic{width:26px; height:26px; border-radius:8px; background:var(--orange-soft); color:var(--orange-ink); display:grid; place-items:center; flex:none}
.disc-btn .ic svg{width:15px; height:15px}
.disc-panel{padding:0 20px; max-height:0; overflow:hidden; transition:max-height .22s ease, padding .22s ease}
.disc[data-open="true"] .disc-panel{max-height:360px; padding:2px 20px 20px}
.fb{width:100%; min-height:72px; resize:vertical; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:14px; padding:11px 13px; line-height:1.5}
.fb:focus{outline:none; border-color:var(--brand); background:var(--surface)}
.fb::placeholder{color:var(--muted-2)}
.actionrow{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:12px}
select.model{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; cursor:pointer}

.draft-ta{width:100%; min-height:236px; resize:vertical; border:none; background:transparent; color:var(--ink); font-family:inherit; font-size:14.5px; line-height:1.7; padding:14px 0 2px; margin-top:2px}
.draft-ta:focus{outline:none}
.sign-note{font-size:12.5px; color:var(--muted); margin-top:10px; padding-top:12px; border-top:1px dashed var(--line); display:flex; gap:8px; align-items:flex-start}
.sign-note svg{width:15px; height:15px; flex:none; margin-top:1px; color:var(--muted-2)}
.model-note{font-size:12px; color:var(--muted-2); font-weight:400; text-transform:none; letter-spacing:0}

.reason{display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:var(--r)}
.reason.amber{background:var(--amber-soft); border:1px solid var(--amber-line)}
.reason.red{background:var(--red-soft); border:1px solid var(--red)}
.reason .ic{width:34px; height:34px; border-radius:9px; color:#fff; display:grid; place-items:center; flex:none; font-weight:700}
.reason.amber .ic{background:var(--orange)} .reason.red .ic{background:var(--red)}
.reason h3{margin:0 0 4px; font-size:14.5px}
.reason.amber h3{color:var(--amber-ink)} .reason.red h3{color:var(--red-ink)}
.reason p{margin:0; font-size:13.5px; line-height:1.55}

.footbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.footbar .spacer{flex:1}
.footbar .info{font-size:12.5px; color:var(--muted)}
.handled{display:flex; align-items:center; gap:10px; background:var(--green-soft); color:var(--green-ink); border-radius:12px; padding:12px 16px; font-size:13.5px; font-weight:500}

.empty{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:56px 40px; text-align:center}
.empty .big{width:60px; height:60px; border-radius:16px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin:0 auto 16px}
.empty .big svg{width:30px; height:30px}
.empty h3{margin:0 0 6px; font-size:17px; color:var(--brand-ink)}
.empty p{margin:0 auto; max-width:340px; color:var(--muted)}

.spinner{width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(18px); background:var(--ink); color:#fff; padding:11px 17px; border-radius:11px; font-size:13.5px; font-weight:500; box-shadow:0 10px 34px rgba(0,0,0,.24); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; display:flex; gap:9px; align-items:center}
:root[data-theme="dark"] #toast, :root:not([data-theme="light"]) #toast{background:#0A121C}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast .ok{color:var(--green)}

/* Presence: wie heeft welke mail open (multi-user) */
.pchip{display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--amber-ink)}
.pdot{width:7px; height:7px; border-radius:50%; background:var(--amber-ink); box-shadow:0 0 0 3px var(--amber-soft); flex:0 0 auto; animation:ppulse 1.8s ease-in-out infinite}
@keyframes ppulse{0%,100%{opacity:1}50%{opacity:.45}}
.pbar{display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:9px 13px; border-radius:11px; background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber-ink); font-size:13px; line-height:1.35}

/* Bijlagen in het detail */
.clabel svg{width:15px; height:15px; vertical-align:-2px; margin-right:5px}
.attlist{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.attlist li{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface, transparent); font-size:13.5px}
.attlist .aname{font-weight:500; word-break:break-all}
.attlist .asize{margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap}
.att-note{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.4}
a.link{text-decoration:none}