#customerServiceOffice{display:none}
body[data-agent="customer-service"] .center>:not(#customerServiceOffice){display:none!important}
body[data-agent="customer-service"] #customerServiceOffice{display:block;width:100%;max-width:1320px;margin:0 auto}
body[data-agent="customer-service"] .rail{display:none!important}
body[data-agent="customer-service"] .workspace-main{grid-template-columns:minmax(0,1fr)}
body[data-agent="customer-service"] .center{grid-column:1/-1;overflow:auto;display:block;padding:0 32px 48px}
.cs{color:var(--text,#eef1f8);font-size:14px;line-height:1.5}
.cs *{box-sizing:border-box}
.cs h1,.cs h2,.cs p{margin:0}
.cs-head{display:flex;align-items:center;min-height:52px;margin:0 0 18px;padding:14px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.cs-head h1{font-family:var(--font-brand,inherit);font-size:26px;letter-spacing:-.02em}
.cs-head p{margin-top:6px;max-width:72ch}
.cs-muted{color:var(--muted,#8790b5)}
.cs-small{font-size:12px}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.cs-card{background:var(--panel,#0e1226);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.cs label{font-size:12px;font-weight:600;color:var(--muted,#8790b5)}
.cs textarea,.cs input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid #262e52;background:rgba(10,13,26,.5);color:inherit;font:inherit;resize:vertical}
.cs textarea{line-height:1.55}
.cs-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-row>div{display:flex;flex-direction:column;gap:10px}
.cs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cs button,.cs .cs-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.08));background:transparent;color:#c3d2ff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.cs .cs-primary{background:var(--ice,#5b8bff);border-color:transparent;color:#fff}
.cs button:disabled{opacity:.55;cursor:wait}
.cs button:focus-visible,.cs a:focus-visible,.cs textarea:focus-visible,.cs input:focus-visible{outline:2px solid var(--ice,#5b8bff);outline-offset:2px}
.cs-status{min-height:20px;font-size:13px;color:var(--muted,#8790b5)}
.cs-status.cs-error{color:#ff8b8b}
.cs-empty{padding:30px 6px;display:flex;flex-direction:column;gap:8px}
.cs-empty h2{font-size:17px}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cs-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);color:#c7cce0}
.cs-tag[data-cat="pakket"]{background:rgba(91,139,255,.15);color:#9db4ff}
.cs-tag[data-cat="retour"]{background:rgba(255,196,107,.14);color:#ffc46b}
.cs-tag[data-cat="klacht"],.cs-tag[data-cat="spam"]{background:rgba(255,107,107,.14);color:#ff8b8b}
.cs-missing{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,196,107,.35);background:rgba(255,196,107,.08);color:#ffc46b;font-size:13px}
.cs-missing ul{margin:6px 0 0;padding-left:18px}
.cs-facts{margin-top:8px;padding-top:14px;border-top:1px solid var(--line,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:8px}
.cs-kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#8790b5)}
.cs-fact{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#a6aed0}
.cs-fact b{color:var(--text,#eef1f8);font-weight:600;text-align:right;word-break:break-all}
.cs-note{font-size:13px;color:#ffc46b}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-tag[data-cat="pakket_kwijt"]{background:rgba(91,139,255,.15);color:#9db4ff}
.cs-tag[data-cat="geld_terug"],.cs-tag[data-cat="annuleren"]{background:rgba(255,196,107,.14);color:#ffc46b}
.cs-tag[data-cat="kapot"]{background:rgba(255,107,107,.14);color:#ff8b8b}
/* Aanbevolen actie, aanbod bij spijt en bevestiging van een terugbetaling. */
.cs-action{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid rgba(91,139,255,.35);background:rgba(91,139,255,.08)}
.cs-action b{font-size:15px}
.cs-offer{margin-top:8px;padding:14px;border-radius:12px;border:1px solid rgba(62,224,176,.35);background:rgba(62,224,176,.06);display:flex;flex-direction:column;gap:8px}
.cs-confirm{padding:12px;border-radius:10px;border:1px solid rgba(255,196,107,.4);background:rgba(255,196,107,.08);display:flex;flex-direction:column;gap:8px}
.cs-confirm[hidden],.cs-actions[hidden]{display:none}
.cs-steps-manual{margin:0;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.cs-log summary,.cs-settings summary{cursor:pointer;font-size:13px;font-weight:600;color:#c3d2ff}
.cs-log ul{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--muted,#8790b5)}
.cs-settings{margin-top:6px;padding-top:12px;border-top:1px solid var(--line,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:10px}
.cs-settings[open]>*+*{margin-top:10px}
@media(max-width:900px){.cs-grid{grid-template-columns:1fr}.cs-row{grid-template-columns:1fr}body[data-agent="customer-service"] .center{padding:0 16px 32px}}
/* Bulk: tabbladen voor inladen, en de lijst met alle mails in groepen. */
.cs-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(10,13,26,.6);border:1px solid #262e52}
.cs .cs-tabs button{flex:1;min-height:40px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#a6aed0;font-size:13px}
.cs .cs-tabs button[aria-selected="true"]{background:#1c2650;color:var(--text,#eef1f8)}
.cs-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:20px;border:1.5px dashed #33406e;border-radius:12px;text-align:center;cursor:pointer}
.cs-file[hidden],.cs-forward[hidden],.cs [data-panel][hidden],.cs .cs-order[hidden],.cs .cs-gmail[hidden]{display:none}
.cs-file input{position:absolute;width:1px;height:1px;opacity:0}
.cs-file:focus-within{outline:2px solid var(--ice,#5b8bff);outline-offset:2px}
.cs-file b{color:var(--text,#eef1f8);font-size:14px}
.cs-forward{padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);font-size:13px;color:#a6aed0}
.cs-found{min-height:0;font-size:13px;font-weight:600;color:#6fdc9b}
.cs-found:empty{display:none}
.cs-bulk{display:flex;flex-direction:column;gap:14px;padding:8px 0 40px}
.cs-bulk[hidden]{display:none}
.cs-bulk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px}
.cs-bulk-count{margin-top:6px!important;font-size:22px;font-weight:700}
.cs-bulk-count b{color:#6ea8ff}
.cs-bulk-count span{font-size:15px;font-weight:400;color:var(--muted,#8790b5)}
.cs-progress{height:6px;border-radius:999px;background:#141a36;overflow:hidden}
.cs-progress span{display:block;height:100%;background:#4f6fff;transition:width .3s}
.cs-group{background:var(--panel,#0e1226);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;overflow:hidden}
.cs-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px}
.cs-group h3{margin:0;font-size:15px}
.cs-lock{font-size:12px;color:#ffc46b}
.cs-item{border-top:1px solid rgba(255,255,255,.06)}
.cs-item>summary{list-style:none;display:flex;flex-direction:column;gap:4px;padding:12px 16px;cursor:pointer}
.cs-item>summary::-webkit-details-marker{display:none}
.cs-item[open]>summary{background:rgba(110,168,255,.1);box-shadow:inset 3px 0 0 #6ea8ff}
.cs-item[data-state="done"]>summary{opacity:.55}
.cs-item[data-state="pending"]>summary{cursor:default}
.cs-item-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.cs-item-state{font-size:12px;color:var(--muted,#8790b5);white-space:nowrap}
.cs-item-state[data-state="ready"]{color:#6fdc9b}
.cs-item-state[data-state="ready-gap"]{color:#ffc46b}
.cs-item-state[data-state="error"]{color:#ff8b8b}
.cs-item-sub{font-size:13px;color:#a6aed0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-item-tags{display:flex;flex-wrap:wrap;gap:6px}
.cs-item-body{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px}
.cs-item-mail{padding:10px 12px;border-radius:10px;background:rgba(10,13,26,.5);color:#c7cce0;font-size:13px;white-space:pre-line;max-height:180px;overflow:auto}
.cs-item-facts{font-size:12.5px;color:#a6aed0}
.cs .cs-back{align-self:flex-start;min-height:36px;padding:0 10px;border:0;background:none}
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start[data-mode="bulk"]{display:block;max-width:1180px}
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start[data-mode="bulk"] :is(.cs-grid,.cs-moment,.cs-head){display:none}
body:not(#vs):not(#ts) #customerServiceOffice .cs-input>:is(.cs-tabs,.cs-file,.cs-forward,.cs-found){margin-left:44px;width:calc(100% - 44px);box-sizing:border-box}
@media(max-width:900px){body:not(#vs):not(#ts) #customerServiceOffice .cs-input>:is(.cs-tabs,.cs-file,.cs-forward,.cs-found){margin-left:0;width:100%}.cs-bulk-count{font-size:18px}.cs-bulk-head .cs-actions{width:100%}.cs-bulk-head .cs-actions button{flex:1}}
.cs-group>header button{white-space:nowrap;flex-shrink:0}
/* Inbox: links de lijst, rechts de mail met het concept. */
.cs-inbox{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start}
.cs-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 260px);overflow:auto;position:sticky;top:12px}
.cs .cs-row{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:11px 16px;border:0;border-top:1px solid rgba(255,255,255,.06);border-radius:0;background:transparent;color:inherit;font-weight:400;text-align:left;cursor:pointer}
.cs .cs-row[aria-current="true"]{background:rgba(110,168,255,.12);box-shadow:inset 3px 0 0 #6ea8ff}
.cs .cs-row[data-state="done"]{opacity:.5}
.cs .cs-row:disabled{cursor:default;opacity:.7}
.cs-detail{background:var(--panel,#0e1226);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-width:0;outline:none}
.cs-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cs-detail-head h2{font-size:18px}
.cs-detail .cs-back{display:none}
.cs-detail textarea{min-height:200px}
.cs-label{font-size:12px;font-weight:600;color:#a6aed0}
.cs-facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.cs-facts-grid>div{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.cs-facts-grid span{font-size:11px;color:var(--muted,#8790b5)}
.cs-facts-grid b{font-size:13px;font-weight:600;word-break:break-word}
.cs kbd{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:1px 6px;border-radius:5px;border:1px solid #33406e;background:#141a36;color:#c7cce0;font-weight:500}
.cs .cs-primary kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;margin-left:8px}
.cs button kbd{margin-left:6px}
.cs .cs-quiet{border-color:transparent;color:#a6aed0}
.cs-keys{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted,#8790b5)}
.cs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border-radius:14px;background:#1c2650;border:1px solid #33406e;box-shadow:0 12px 40px rgba(0,0,0,.45);font-size:14px;max-width:calc(100vw - 32px);box-sizing:border-box}
.cs-toast[hidden]{display:none}
.cs .cs-toast button{min-height:36px;border:0;background:transparent;color:#9db4ff}
@media(max-width:900px){
  .cs-inbox{grid-template-columns:1fr}
  .cs-list{max-height:none;position:static}
  .cs-inbox[data-view="detail"] .cs-list,.cs-inbox[data-view="list"] .cs-detail{display:none}
  .cs-detail .cs-back{display:inline-flex}
  .cs-keys{display:none}
  .cs-detail .cs-actions .cs-primary{flex-basis:100%}
  .cs kbd{display:none}
}
#csBulkHead{display:flex;flex-direction:column;gap:14px}
.cs-list>.cs-group{flex-shrink:0}
/* Automatisch versturen: voorstel na 10 ongewijzigde goedkeuringen, en wat er aan staat. */
.cs-auto-offer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;border:1px solid rgba(110,168,255,.3);background:rgba(91,139,255,.08);font-size:13px;color:#c7cce0}
.cs-auto-offer p{flex:1 1 320px}
.cs-auto-on{font-size:12.5px;color:#a6aed0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.cs-auto-on span{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:999px;background:rgba(111,220,155,.12);color:#6fdc9b;font-weight:600}
.cs .cs-auto-on button{min-height:28px;padding:0 8px;font-size:12px}
/* Doorsturen: eigen adres, Gmail-stappen en nieuwe doorgestuurde mails. */
.cs-forward{display:flex;flex-direction:column;gap:10px;line-height:1.55}
.cs-forward[hidden]{display:none}
.cs-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#4f6fff;color:#fff;font-size:11px;font-weight:700}
.cs-forward-new{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:1px solid rgba(111,220,155,.35);background:rgba(111,220,155,.08);color:#c7f0d8}
.cs-address{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-address code{flex:1 1 220px;padding:10px 12px;border-radius:10px;border:1px solid #262e52;background:rgba(10,13,26,.5);color:var(--text,#eef1f8);font:13px 'IBM Plex Mono',monospace;word-break:break-all}
.cs-forward-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#c7cce0}
.cs-code{display:inline-block;padding:2px 8px;border-radius:6px;background:#1c2650;color:#fff;font:600 14px 'IBM Plex Mono',monospace;letter-spacing:.06em}
.cs .cs-linkish{min-height:28px;padding:0 4px;border:0;background:none;color:#9db4ff;font-weight:600;text-decoration:underline}
#customerServiceOffice .cs-found[hidden]{display:none!important}
/* Startscherm voor meerdere mails: groot plakvak, teller en een voorbeeld van de inbox. */
body:not(#vs):not(#ts) #customerServiceOffice #csMessage{min-height:300px;height:auto}
body:not(#vs):not(#ts) #customerServiceOffice .cs-found{font-size:14px}
.cs-preview{gap:18px!important}
.cs-preview-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.cs-preview-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(7,11,24,.55);border:1px solid rgba(255,255,255,.06)}
.cs-preview-list li span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cs-preview-list b{font-size:13px;color:#eef1f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-preview-list i{font-style:normal;font-size:11px;color:#9db4ff}
.cs-preview-list em{font-style:normal;font-size:11px;color:#6fdc9b;white-space:nowrap}
.cs-preview-list li:last-child em{color:#ffc46b}
.cs-preview-list li:first-child{box-shadow:inset 3px 0 0 #6ea8ff;background:rgba(110,168,255,.12)}
@media(max-width:900px){body:not(#vs):not(#ts) #customerServiceOffice #csMessage{min-height:220px}}
/* Eén klik: alle doorgestuurde mails laden. Staat boven plakken en bestanden. */
.cs-loadbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;border:1px solid rgba(110,168,255,.35);background:rgba(91,139,255,.1);margin-bottom:6px}
.cs-loadbar[hidden]{display:none}
.cs-loadbar[data-state="empty"]{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.cs-loadbar>div{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:3px}
.cs-loadbar>div p{overflow-wrap:anywhere}
.cs-loadbar-title{font-size:17px;font-weight:700;color:var(--text,#eef1f8)}
body:not(#vs):not(#ts) #customerServiceOffice .cs-loadbar .cs-loadbar-go{width:auto;min-height:52px;font-size:16px;animation:none;white-space:nowrap}
@media(max-width:900px){body:not(#vs):not(#ts) #customerServiceOffice .cs-loadbar .cs-loadbar-go{width:100%}}