/* svc-ui — de componenten op de dienstpagina's.
 *
 * Geen venster maar losse stukken: donkergrijze, afgeronde fragmenten die op
 * het papier van de pagina liggen, met opzet iets over elkaar heen. Elk stuk
 * draagt dezelfde ronding en dezelfde schaduw, en per dienst is er één rond
 * element dat de staat van dat moment laat zien.
 *
 * Eén radius-schaal en één schaduw, anders wordt het rommelig. Radius 0 blijft
 * de regel voor de rest van de site; dit is de uitzondering, vastgelegd in
 * DESIGN-SYSTEM.md.
 *
 * De maten hangen aan de breedte van het kader (container query op
 * .svc-diagram-frame--ui), niet aan die van het scherm.
 */

.su {
  --su-ink:    #FAFAF8;
  --su-mid:    #A8A59E;
  --su-muted:  #7C7972;
  --su-card:   #232220;
  --su-card-2: #33302C;
  --su-line:   rgba(250, 250, 248, .16);
  --su-paper-line: rgba(10, 10, 10, .18);

  --r-pill: 999px;
  --r-card: 12px;
  --r-big:  20px;
  --su-shadow: 0 10px 28px rgba(10, 10, 10, .12);

  position: relative;
  height: 100%;
  background: transparent;
  font-family: var(--font, 'Basis', system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  user-select: none;
  container-type: inline-size;
}

/* Elk stuk software is zo'n fragment. */
.su-frag {
  position: absolute;
  background: var(--su-card);
  color: var(--su-ink);
  border-radius: var(--r-card);
  box-shadow: var(--su-shadow);
  padding: 10px 12px;
  font-variant-numeric: tabular-nums;
}
.su-frag--pill { border-radius: var(--r-pill); padding: 7px 14px; }
.su-frag--big { border-radius: var(--r-big); }
.su-frag--light { background: #fff; color: #0A0A0A; box-shadow: 0 6px 18px rgba(10, 10, 10, .09); }
.su-frag--ghost { background: transparent; box-shadow: none; color: #57554F; padding: 0; }

.su-lab { font-size: 9px; letter-spacing: .07em; color: var(--su-muted); }
.su-t { font-size: 11.5px; font-weight: 500; }
.su-p { font-size: 11.5px; color: var(--su-ink); }
.su-s { font-size: 10.5px; color: var(--su-mid); }

.su-in { animation: su-in .42s var(--ease, cubic-bezier(.22,.68,0,1)) both; }
@keyframes su-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* De knoop wordt al door transform gepositioneerd, dus zijn intro mag daar
   niet aankomen: alleen opacity. */
.su-fade { animation: su-fade .42s var(--ease, cubic-bezier(.22,.68,0,1)) both; }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .su-in, .su-fade { animation: none; } }

/* ── het ronde element ────────────────────────────────────────────────── */
.su-ring { position: absolute; width: 76px; height: 76px; }
.su-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.su-ring .bg { fill: var(--su-card); }
.su-ring .track { fill: none; stroke: var(--su-line); stroke-width: 3; }
.su-ring .arc { fill: none; stroke: var(--su-ink); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease, cubic-bezier(.22,.68,0,1)); }
.su-ring b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--su-ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.su-ring span { position: absolute; left: 6px; right: 6px; bottom: 15px; text-align: center; font-size: 8px; letter-spacing: .06em; color: var(--su-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 1 · workflow ─────────────────────────────────────────────────────── */
.su--workflow { touch-action: none; }
.su-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.su-edges path { fill: none; stroke: var(--su-paper-line); stroke-width: 1.5; }
.su-edges path.is-hot { stroke: #0A0A0A; stroke-width: 2; }
.su-pulse { fill: #0A0A0A; }

.su-node {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--x), var(--y));
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px;
  width: 128px; padding: 9px 12px;
  background: var(--su-card); color: var(--su-ink);
  border-radius: var(--r-pill);
  box-shadow: var(--su-shadow);
  font: inherit; text-align: left; border: 0;
  cursor: grab; transition: background .2s, box-shadow .2s;
}
.su-node:hover { background: var(--su-card-2); }
.su-node.is-drag { cursor: grabbing; background: var(--su-card-2); box-shadow: 0 16px 34px rgba(10, 10, 10, .2); z-index: 3; }
.su-node.is-hot { background: var(--su-card-2); }
.su-node svg { width: 15px; height: 15px; display: block; color: var(--su-mid); }
.su-node.is-hot svg { color: var(--su-ink); }
.su-node-name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-node-n { font-size: 9.5px; color: var(--su-muted); font-variant-numeric: tabular-nums; }

/* ── 2 · chat ─────────────────────────────────────────────────────────── */
.su-chips { position: absolute; display: flex; gap: 6px; flex-wrap: wrap; }
.su-chip { background: #fff; color: #57554F; border-radius: var(--r-pill); padding: 5px 11px; font-size: 10px; box-shadow: 0 4px 12px rgba(10, 10, 10, .07); transition: background .25s, color .25s, box-shadow .25s; }
.su-chip.is-hot { background: var(--su-card); color: var(--su-ink); box-shadow: var(--su-shadow); }

.su-bub { max-width: 82%; }
.su-bub--me { border-bottom-right-radius: 4px; }
.su-bub--bot { border-bottom-left-radius: 4px; }
.su-bub--human { border-bottom-left-radius: 4px; box-shadow: 0 10px 28px rgba(10, 10, 10, .18); }
.su-bub .su-lab { display: flex; gap: 10px; margin-bottom: 4px; }
.su-bub .su-lab em { margin-left: auto; font-style: normal; letter-spacing: 0; }

.su-typing { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.su-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--su-mid); }
@media (prefers-reduced-motion: no-preference) {
  .su-typing i { animation: su-blink 1.1s infinite; }
  .su-typing i:nth-child(2) { animation-delay: .18s; }
  .su-typing i:nth-child(3) { animation-delay: .36s; }
}
@keyframes su-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ── 3 · agent ────────────────────────────────────────────────────────── */
.su-queue { position: absolute; display: flex; flex-direction: column; gap: 6px; }
.su-item { display: flex; align-items: baseline; gap: 10px; background: #fff; color: #57554F; border-radius: var(--r-pill); padding: 6px 12px; font-size: 10.5px; box-shadow: 0 4px 12px rgba(10, 10, 10, .07); transition: background .25s, color .25s, opacity .3s; }
.su-item b { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.su-item.is-hot { background: var(--su-card); color: var(--su-ink); box-shadow: var(--su-shadow); }
.su-item.is-done { opacity: .4; }

.su-steps { display: grid; gap: 6px; margin-top: 8px; }
.su-step { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--su-muted); }
.su-step::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.su-step.is-on { color: var(--su-ink); }
.su-step.is-on::before { background: var(--su-ink); border-color: var(--su-ink); }
.su-step em { margin-left: auto; font-style: normal; font-size: 9.5px; opacity: .65; }

.su-tools { position: absolute; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.su-tool { display: flex; align-items: baseline; gap: 10px; background: #fff; color: #57554F; border-radius: var(--r-pill); padding: 6px 12px; font-size: 10.5px; box-shadow: 0 4px 12px rgba(10, 10, 10, .07); transition: background .25s, color .25s; }
.su-tool b { font-weight: 400; font-size: 9.5px; }
.su-tool.is-hot { background: var(--su-card); color: var(--su-ink); box-shadow: var(--su-shadow); }

/* ── 4 · app (maatwerk) ───────────────────────────────────────────────── */
.su-fields { display: grid; gap: 1px; }
.su-field { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 11px; color: var(--su-mid); transition: color .2s; }
.su-field + .su-field { border-top: 1px solid var(--su-line); }
.su-field b { margin-left: auto; color: var(--su-ink); font-weight: 400; }
.su-field.is-hot { color: var(--su-ink); }
.su-total { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--su-line); font-size: 12.5px; }
.su-total b { margin-left: auto; font-weight: 500; }

/* ── 5 · board (consultancy) ──────────────────────────────────────────── */
.su-cases { position: absolute; display: flex; flex-direction: column; gap: 7px; }
.su-case { display: grid; grid-template-columns: 16px minmax(0, 1fr) 54px 32px; align-items: center; gap: 10px; background: #fff; color: #57554F; border-radius: var(--r-pill); padding: 7px 14px; font-size: 10.5px; box-shadow: 0 4px 12px rgba(10, 10, 10, .07); transition: background .3s, color .3s, transform .4s var(--ease, cubic-bezier(.22,.68,0,1)); }
.su-case.is-top { background: var(--su-card); color: var(--su-ink); box-shadow: var(--su-shadow); }
.su-rank { font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; }
.su-case.is-ranked .su-rank { opacity: 1; }
.su-meter { height: 5px; border-radius: var(--r-pill); background: rgba(10, 10, 10, .12); overflow: hidden; }
.su-case.is-top .su-meter { background: var(--su-line); }
.su-meter i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: currentColor; transition: width .7s var(--ease, cubic-bezier(.22,.68,0,1)); }
.su-case .su-n { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 6 · progress (training) ──────────────────────────────────────────── */
.su-people { position: absolute; display: flex; flex-direction: column; gap: 7px; }
.su-person { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 14px); align-items: center; gap: 9px; background: #fff; color: #57554F; border-radius: var(--r-pill); padding: 7px 14px; font-size: 10.5px; box-shadow: 0 4px 12px rgba(10, 10, 10, .07); transition: background .3s, color .3s; }
.su-person.is-full { background: var(--su-card); color: var(--su-ink); box-shadow: var(--su-shadow); }
.su-tick { width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; opacity: .35; transition: opacity .25s, background .25s; }
.su-tick.is-on { opacity: 1; background: currentColor; }

/* ── smal ─────────────────────────────────────────────────────────────── */
@container (max-width: 470px) {
  .su-ring { width: 62px; height: 62px; }
  .su-node { width: 112px; padding: 8px 10px; }
  .su-frag { padding: 9px 10px; }
  .su-case { grid-template-columns: 14px minmax(0, 1fr) 40px 28px; gap: 7px; padding: 6px 11px; font-size: 9.5px; }
  .su-person { padding: 6px 11px; font-size: 9.5px; gap: 7px; }
}