/* ==========================================================================
   ngs-ui.css — bouwstenen voor de product-mockups in de visuals
   (vensters, panelen, rijen, pills, chat-bubbels, cursor, connector-lijnen).
   Dovetail toont nooit "stockfoto's van dashboards": het zijn altijd echte,
   leesbare UI-fragmenten op een donker raster. Dat doen wij ook.
   ========================================================================== */
.stage { position: relative; width: 1200px; height: 750px; overflow: hidden; background: #0A0A0A; font-family: var(--font-body); color: #fff; }
.stage--grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; background-color: #0B0B0B; }
.stage--hue { background: var(--hue, var(--ngs-blue-500)); }
.stage canvas.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.fit { position: absolute; inset: 0; transform-origin: top left; }

/* Venster / paneel */
.win { position: absolute; background: var(--ink-3); border-radius: 14px; box-shadow: var(--shadow-ui); overflow: hidden; }
.win__bar { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line-1); font-size: 13px; font-weight: 600; }
.win__bar .dots { display: flex; gap: 6px; } .win__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #333; display: block; }
.win__bar .crumb { color: var(--text-2); font-weight: 500; }
.win__bar .spacer { flex: 1; }
.win__body { padding: 16px; }
.panel { position: absolute; background: #161616; border: 1px solid var(--line-1); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); }
.panel--glass { background: rgba(22,22,22,.86); backdrop-filter: blur(10px); }

/* Typografie in UI */
.ui-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ui-sub { font-size: 12px; color: var(--text-2); }
.ui-mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.ui-num { font-family: var(--font-accent); font-size: 44px; line-height: .8; }

/* Rijen, pills, chips */
.row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; }
.row + .row { border-top: 1px solid var(--line-1); }
.row .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.pill--ok { background: rgba(34,197,94,.14); color: #4ADE80; }
.pill--warn { background: rgba(245,165,36,.14); color: #FBBF24; }
.pill--err { background: rgba(240,68,56,.16); color: #F87171; }
.pill--blue { background: rgba(76,116,255,.16); color: #8FA8FF; }
.pill--lilac { background: rgba(166,92,255,.16); color: #C29BFF; }
.pill--gray { background: rgba(255,255,255,.08); color: var(--text-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--ink-4); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip .sq { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; }
.field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #1F1F1F; font-size: 12.5px; }
.field .k { color: var(--text-2); } .field .v { font-weight: 600; }
.hl { background: rgba(35,80,245,.28); box-shadow: 0 0 0 1px rgba(76,116,255,.6); border-radius: 3px; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bubble--me { align-self: flex-end; background: #2A2A2A; border-bottom-right-radius: 4px; }
.bubble--ai { align-self: flex-start; background: transparent; padding-left: 0; color: #EDEDED; }
.ai-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.ai-head .av { width: 20px; height: 20px; border-radius: 6px; background: var(--ngs-blue-500); display: grid; place-items: center; }
.cite { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; margin: 0 2px; border-radius: 5px; background: rgba(76,116,255,.16); color: #A9BCFF; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #1F1F1F; border: 1px solid var(--line-1); font-size: 13px; color: var(--text-2); }
.composer .send { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; }

/* Knop in UI + cursor */
.ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: #fff; color: #0A0A0A; }
.ui-btn--blue { background: var(--ngs-blue-500); color: #fff; }
.ui-btn--ghost { background: rgba(255,255,255,.08); color: #fff; }
.cursor { position: absolute; width: 22px; height: 22px; z-index: 40; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: transform 900ms var(--spring-1000); }
.cursor.click::after { content: ""; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; animation: ripple 500ms ease-out forwards; }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* Node-diagrammen */
.node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.node__box { width: 64px; height: 64px; border-radius: 16px; background: #1A1A1A; border: 1px solid var(--line-2); display: grid; place-items: center; transition: box-shadow 400ms, border-color 400ms, background 400ms; }
.node.is-live .node__box { border-color: var(--ngs-blue-400); box-shadow: 0 0 0 6px rgba(76,116,255,.14), 0 0 40px rgba(76,116,255,.35); background: #161c33; }
.node__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
svg.wires path { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.25; }
svg.wires path.dash { stroke-dasharray: 3 5; }
svg.wires circle.packet { fill: var(--ngs-blue-400); filter: drop-shadow(0 0 6px rgba(76,116,255,.9)); }

/* Grafieken */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--ngs-blue-400), var(--ngs-blue-600)); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.gridlines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 100% 25%; }

/* Animatiehulpjes */
.pop { animation: pop 500ms var(--spring-750) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.fadein { animation: revealFade 400ms ease-out both; }
.slide-in-r { animation: slideR 600ms var(--spring-750) both; }
@keyframes slideR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ngs-blue-400), transparent); box-shadow: 0 0 18px var(--ngs-blue-400); }

/* Schuifregelaar (uit 05-visuals/12-tijdwinst-calculator) voor de calculators op Prijzen, Kennis en Tijdwinst */
.ngs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 6px 0 0; background: linear-gradient(90deg, var(--ngs-blue-500) var(--p, 50%), #2A2A2A var(--p, 50%)) center / 100% 4px no-repeat; outline: none; cursor: pointer; }
.ngs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(35,80,245,.35); cursor: grab; }
.ngs-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(35,80,245,.35); }
.ngs-range::-moz-range-track { background: transparent; }
.ngs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(35,80,245,.35), 0 0 0 6px #fff; }