/* Service: the shared inbox classes live in ws.css; here only the Heijmans accents and module extras. */

/* yellow is the one accent, red stays for guardrails and urgent items */
.svc .ib-tab::after, .svc .tk-tab::after { background: var(--hy-hi); }
.svc .ib-tab.hot .n { color: var(--t3); }
.svc .ib-st.st-agent { color: var(--t1); }
.svc .ib-counts b.hot { color: var(--brand-t); }
.svc .ib-sel.on::after { background: var(--inv-bg); }
.svc .ib-sel.on > svg { stroke: var(--inv-fg); }
.svc .ib-row.sel { background: var(--hy-soft); }
.svc .ib-sel:focus-visible, .svc .ib-row:focus-visible { outline-color: var(--hy-hi); }
.svc .ws-st.s-brand { background: var(--hy-hi); }
.svc .tl-i.now .ti-ch { box-shadow: 0 0 0 3px var(--hy-soft); }
.svc .ai-mark, .svc-dock .ai-mark, .drawer.ck-d .ai-mark { background: conic-gradient(from 200deg, var(--hy), var(--navy), var(--sky), var(--hy)); box-shadow: 0 0 12px color-mix(in srgb, var(--hy) 45%, transparent); }
.svc .draft { background: linear-gradient(180deg, var(--draft-a), var(--draft-b)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--hy) 55%, transparent), var(--w10) 40%, color-mix(in srgb, var(--navy) 30%, transparent)) border-box; }
.svc .draft.own { background: var(--glass-2); }
.svc .tk-cta { background: linear-gradient(180deg, var(--draft-a), var(--draft-b)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--hy) 55%, transparent), var(--w10) 40%, color-mix(in srgb, var(--navy) 30%, transparent)) border-box; }
.svc .tk-cta.quiet { background: var(--glass); }
.svc .peak.on { background: var(--hy-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hy) 40%, transparent); }

/* list extras */
.svc-div { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c); }
.svc-auto-tab { margin-left: auto; }
.svc-auto-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc .ib-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }

/* Antwoord: contract check and guardrail steps */
.svc-clause { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; background: color-mix(in srgb, var(--up) 7%, transparent); }
.svc-clause > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke: var(--up); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-clause b { font-weight: 500; }
.svc-clause.no { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.svc-clause.no > svg { stroke: var(--warn); }
.svc-guard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--brand-hi) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-hi) 24%, transparent); font-size: 12.5px; }
.svc-guard b { font-weight: 500; }
.svc-guard .consent { margin-top: 0; }
.svc-guard .consent input { accent-color: var(--navy); }

/* Klant: contract summary */
.svc-crs { display: flex; flex-direction: column; }
.svc-cr { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.svc-ck { color: var(--t3); font-size: 12.5px; }
.svc-cv { min-width: 0; }
.svc-cr .src { max-width: 190px; }
.svc-quote { margin: 0; padding: 12px 16px; border-left: 2px solid var(--hy-hi); border-radius: 0 12px 12px 0; background: var(--w06); font-size: 13.5px; line-height: 1.6; color: var(--t1); }
.svc-ans:empty { display: none; }
.svc-ans { padding: 12px 14px; border-radius: 14px; background: var(--w06); line-height: 1.55; }
.svc .tk-card .row > .input { flex: 1; min-width: 0; }
.svc-sug { background: linear-gradient(180deg, var(--draft-a), var(--draft-b)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--hy) 55%, transparent), var(--w10)) border-box; }

/* dock */
.svc-dock-c { background: var(--hy-soft); }

/* Automatisch */
.svc-auto-back { width: fit-content; margin-bottom: 8px; }
.svc-mode { min-width: 82px; text-align: right; }
.svc-pad { padding: 22px 24px 0; }
.svc .mrow .row { justify-content: flex-end; }

@media (max-width: 860px) {
  .svc-cr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .svc-cr .src { max-width: 100%; justify-self: start; }
  .svc-auto-tab span { display: none; }
}