/* ===== Fugro Build Studio (js/build-studio.js) ===== */
#bs-root { --navy: #011E41; --blue: #003C71; --accent: #1E88E5; --cyan: #7FDBFF; --ok: #00875A; --warn: #E07A00; --bad: #D13212;
    --bg: #EEF3F8; --panel: #fff; --line: #DCE4EE; --muted: #5A6B7A; --ink: #0A1628;
    position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
    font: 14px/1.45 'Segoe UI', Inter, system-ui, Arial, sans-serif; animation: bsIn .25s ease-out; }
#bs-root[hidden] { display: none; }
body.bs-open { overflow: hidden; }
@keyframes bsIn { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

/* kop */
.bs-top { display: flex; align-items: center; gap: 16px; padding: 8px 14px 8px 10px; color: #fff;
    background: linear-gradient(110deg, var(--navy) 0%, var(--blue) 62%, #0B5FAD 100%); box-shadow: 0 2px 12px rgba(1,30,65,.35); z-index: 2; }
.bs-brand { border: 0; background: none; padding: 2px 6px; cursor: pointer; border-radius: 10px; }
.bs-brand:hover { background: rgba(255,255,255,.08); }
.bs-brand img { height: 40px; display: block; }
.bs-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bs-title input { font: 600 17px/1.2 inherit; color: #fff; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 8px; max-width: 520px; }
.bs-title input:hover:not(:disabled), .bs-title input:focus { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); outline: none; }
.bs-title input::placeholder { color: rgba(255,255,255,.65); }
.bs-title small { padding-left: 9px; color: rgba(255,255,255,.72); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-progress { width: 150px; display: grid; gap: 3px; }
.bs-progress::before { content: ''; grid-area: 1/1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.bs-progress i { grid-area: 1/1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), #00C27A); transition: width .5s; }
.bs-progress span { font-size: 11px; color: rgba(255,255,255,.8); }
.bs-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.bs-status[data-s=gepubliceerd] { background: rgba(0,194,122,.25); border-color: rgba(0,194,122,.6); }
.bs-status[data-s=gedelegeerd] { background: rgba(127,219,255,.2); }
.bs-top-act { display: flex; align-items: center; gap: 8px; }
.bs-btn { border-radius: 10px; padding: 7px 14px; font: 600 13px inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.bs-btn.primary { background: #fff; color: var(--navy); border-color: #fff; }
.bs-btn:disabled { opacity: .45; cursor: not-allowed; }
.bs-btn:not(:disabled):hover { transform: translateY(-1px); }
.bs-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 0; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }
.bs-ic:hover { background: rgba(255,255,255,.2); }

/* drie panelen */
.bs-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 400px; gap: 10px; padding: 10px; }
#bs-root.bs-no-left .bs-main { grid-template-columns: 34px minmax(0, 1fr) 400px; }
#bs-root.bs-no-right .bs-main { grid-template-columns: 270px minmax(0, 1fr) 46px; }
#bs-root.bs-no-left.bs-no-right .bs-main { grid-template-columns: 34px minmax(0, 1fr) 46px; }
.bs-left, .bs-center, .bs-right { min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(1,30,65,.06); position: relative; }
.bs-left { display: flex; flex-direction: column; overflow: hidden; }
#bs-root.bs-no-left .bs-left > :not(.bs-collapse), #bs-root.bs-no-right .bs-right > :not(.bs-chat-head), #bs-root.bs-no-right .bs-chat-head > :not(.bs-collapse) { display: none; }
#bs-root.bs-no-right .bs-chat-head { border: 0; padding: 8px 4px; }
.bs-collapse { position: absolute; right: 6px; top: 8px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; font-weight: 700; }
#bs-root.bs-no-left .bs-left .bs-collapse { transform: rotate(180deg); right: 4px; }
.bs-chat-head .bs-collapse { position: static; margin-left: auto; }
#bs-root.bs-no-right .bs-chat-head .bs-collapse { transform: rotate(180deg); }
.bs-seg { display: flex; gap: 2px; margin: 8px 36px 6px 8px; padding: 3px; background: var(--bg); border-radius: 10px; }
.bs-seg button { flex: 1; border: 0; background: none; padding: 6px 4px; border-radius: 8px; font: 600 12px inherit; color: var(--muted); cursor: pointer; }
.bs-seg button.on { background: var(--panel); color: var(--navy); box-shadow: 0 1px 3px rgba(1,30,65,.12); }
.bs-left-body { flex: 1; overflow: auto; padding: 4px 10px 12px; }
.bs-new { width: 100%; padding: 9px; border-radius: 10px; border: 1px dashed var(--accent); background: rgba(30,136,229,.06); color: var(--blue); font: 600 13px inherit; cursor: pointer; margin-bottom: 8px; }
.bs-new:hover { background: rgba(30,136,229,.12); }
.bs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bs-list button { width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px 10px 10px; cursor: pointer; position: relative; display: grid; gap: 1px; }
.bs-list button:hover { background: var(--bg); }
.bs-list button.on { border-color: var(--accent); background: rgba(30,136,229,.07); }
.bs-list b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-list small { color: var(--muted); font-size: 11.5px; }
.bs-list i { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p)); }
.bs-muted { color: var(--muted); font-size: 12.5px; }
.bs-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 20px 12px; display: grid; gap: 4px; text-align: center; color: var(--muted); }
.bs-drop span { font-size: 26px; }
.bs-drop b { color: var(--ink); }
.bs-mem { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.bs-mem li { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; padding: 7px 9px; border-radius: 10px; background: var(--bg); }
.bs-mem small { grid-column: 1; color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.bs-mem span { grid-column: 1; font-size: 13px; }
.bs-mem button { grid-column: 2; grid-row: 1 / span 2; align-self: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.bs-mem button:hover { background: rgba(209,50,18,.1); color: var(--bad); }
.bs-mem-add { display: flex; gap: 6px; }
.bs-mem-add input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); font: inherit; font-size: 13px; }
.bs-mem-add button { border: 0; border-radius: 8px; padding: 0 12px; background: var(--blue); color: #fff; font-weight: 600; cursor: pointer; }

/* midden */
.bs-center { display: flex; flex-direction: column; overflow: hidden; }
.bs-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.bs-tabs:empty { display: none; }
.bs-tabs button { border: 0; background: none; padding: 8px 14px; font: 600 13px inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.bs-tabs button.on { color: var(--navy); border-bottom-color: var(--accent); }
.bs-stage { flex: 1; min-height: 0; position: relative; overflow: auto; }
.bs-map { position: absolute; inset: 0; }
.bs-map-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(1,30,65,.12); max-width: 60%; }
.bs-tip { font-weight: 600; font-size: 11px; }
.bs-welcome { max-width: 980px; margin: 0 auto; padding: 40px 28px; text-align: center; }
.bs-welcome-logo { height: 70px; margin-bottom: 18px; }
.bs-welcome h1 { margin: 0 0 8px; font-size: 28px; color: var(--navy); }
.bs-welcome > p { max-width: 640px; margin: 0 auto 26px; color: var(--muted); }
.bs-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bs-kinds button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 16px; cursor: pointer; display: grid; gap: 4px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.bs-kinds button:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(1,30,65,.12); }
.bs-kinds span { font-size: 26px; }
.bs-kinds b { color: var(--navy); font-size: 15px; }
.bs-kinds small { color: var(--muted); }
.bs-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.bs-howto div { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; background: rgba(30,136,229,.06); color: var(--blue); font-size: 13px; }
.bs-howto b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; }
.bs-design { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.bs-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.bs-card.bs-wide { grid-column: 1 / -1; }
.bs-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--navy); display: flex; align-items: baseline; gap: 8px; }
.bs-card h3 small { color: var(--muted); font-weight: 400; }
.bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.bs-kv small { display: block; color: var(--muted); font-size: 11.5px; }
.bs-kv span { font-weight: 600; }
.bs-kv i { color: #9AAABB; font-weight: 400; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bs-chips span { padding: 2px 10px; border-radius: 999px; background: rgba(30,136,229,.1); color: var(--blue); font-size: 12px; font-weight: 600; }
.bs-items { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.bs-items li.q::marker { content: '❓ '; }
.bs-card pre { margin: 0; max-height: 280px; overflow: auto; font-size: 12px; background: var(--bg); border-radius: 8px; padding: 8px; }
.bs-table { overflow: auto; max-height: 360px; }
.bs-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bs-table th { position: sticky; top: 0; background: var(--blue); color: #fff; text-align: left; padding: 5px 8px; font-weight: 600; }
.bs-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bs-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bs-hist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 0 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--bg); }
.bs-hist b { color: var(--blue); }
.bs-hist small { grid-column: 2; color: var(--muted); }
.bs-hist button { grid-column: 3; grid-row: 1 / span 2; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 12px; }

/* agent */
.bs-right { display: flex; flex-direction: column; overflow: hidden; }
.bs-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bs-chat-head b { display: block; color: var(--navy); }
.bs-chat-head small { color: var(--muted); font-size: 11.5px; }
.bs-chat { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bs-chat-empty { margin: auto; text-align: center; color: var(--muted); max-width: 280px; display: grid; gap: 10px; justify-items: center; }
.bs-msg { display: flex; gap: 8px; align-items: flex-end; animation: bsMsg .2s ease-out; }
@keyframes bsMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bs-msg.me { justify-content: flex-end; }
.bs-bub { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; }
.bs-bub p { margin: 0 0 6px; }
.bs-bub p:last-child { margin-bottom: 0; }
.bs-bub ul { margin: 4px 0 6px; padding-left: 18px; }
.bs-msg.me .bs-bub { background: linear-gradient(135deg, var(--blue), var(--accent)); color: #fff; border-bottom-right-radius: 4px; }
.bs-msg.bot .bs-bub { background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bs-msg.live .bs-bub { box-shadow: 0 0 0 1px rgba(30,136,229,.25), 0 4px 16px rgba(30,136,229,.15); background: var(--panel); }
.bs-msg img { flex: none; }
.bs-tl, .bs-steps ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.bs-step { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; }
.bs-step em { font-style: normal; padding: 0 6px; border-radius: 6px; background: rgba(30,136,229,.1); color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 11.5px; }
.bs-step small { margin-left: auto; opacity: .75; }
.bs-step i { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(30,136,229,.25); border-top-color: var(--accent); animation: bsSpin .7s linear infinite; position: relative; }
.bs-step.is-ok i { border: 0; background: #00C27A; animation: none; }
.bs-step.is-ok i::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bs-step.is-err i { border: 0; background: var(--bad); animation: none; }
.bs-step.note { font-style: italic; }
.bs-step.note i { border: 0; animation: none; background: none; }
.bs-step.note i::after { content: '\1F4AC'; position: absolute; inset: -3px 0 0; font-size: 10px; font-style: normal; }
@keyframes bsSpin { to { transform: rotate(360deg); } }
.bs-steps { margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.bs-steps summary { cursor: pointer; display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(30,136,229,.08); list-style: none; }
.bs-steps summary::-webkit-details-marker { display: none; }
.bs-phase { font-weight: 600; font-size: 13px; background: linear-gradient(90deg, #64748b 35%, var(--accent) 50%, #64748b 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bsSheen 1.8s linear infinite; }
@keyframes bsSheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.bs-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); animation: bsCaret 1s steps(1) infinite; }
@keyframes bsCaret { 50% { opacity: 0; } }
.bs-ccard { margin-top: 8px; padding: 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; }
.bs-ccard.warn { border-color: #f5c26b; background: #fff8eb; }
.bs-ccard dl { display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; margin: 4px 0 0; }
.bs-ccard dt { color: var(--muted); }
.bs-ccard dd { margin: 0; font-weight: 600; }
.bs-cchip { display: inline-block; margin: 6px 6px 0 0; padding: 2px 8px; border-radius: 999px; background: rgba(30,136,229,.1); font-size: 12px; }
/* chatbalk (zoals VS Code): tekstvak in een kader, daaronder +, modus, model, denkniveau, microfoon, versturen/stop */
.bs-compose { position: relative; margin: 8px 10px 8px; padding: 6px 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 2px;
    box-shadow: 0 1px 3px rgba(1,30,65,.06); transition: border-color .15s, box-shadow .15s; }
.bs-compose:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,136,229,.14); }
.bs-compose textarea { resize: none; border: 0; padding: 6px 8px; font: inherit; font-size: 13.5px; min-height: 40px; max-height: 220px; background: transparent; color: var(--ink); }
.bs-compose textarea:focus { outline: none; }
.bs-compose textarea:disabled { opacity: .55; cursor: not-allowed; }
.bs-cbar { display: flex; align-items: center; gap: 2px; }
.bs-cb-fill { flex: 1; }
.bs-cb-ic, .bs-cb-pick { border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; height: 28px; display: inline-flex; align-items: center; gap: 4px; font: 600 12px inherit; white-space: nowrap; }
.bs-cb-ic { width: 30px; justify-content: center; }
.bs-cb-pick { padding: 0 7px; }
.bs-cb-ic:hover:not(:disabled), .bs-cb-pick:hover { background: var(--bg); color: var(--navy); }
.bs-cb-ic:disabled { opacity: .35; cursor: not-allowed; }
.bs-cb-pick[data-v=vragen] { color: #6A4CD6; }
.bs-cb-pick[data-v=opus] { color: #B8860B; }
.bs-cb-ic.is-rec { color: #fff; background: var(--bad); animation: bsPulse 1.2s ease-in-out infinite; }
.bs-send { width: 34px; height: 30px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--accent)); color: #fff; cursor: pointer; display: grid; place-items: center; margin-left: 2px; }
.bs-send .stop { display: none; }
.bs-send.is-stop { background: var(--navy); }
.bs-send.is-stop .go { display: none; }
.bs-send.is-stop .stop { display: block; }
.bs-send:disabled { opacity: .45; cursor: not-allowed; }
.bs-attached { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 0; }
.bs-attached:empty { display: none; }
.bs-chip-file { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 8px; border-radius: 8px; background: var(--bg); font-size: 12px; }
.bs-chip-file button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 3px; }
.bs-cb-menu { position: absolute; bottom: calc(100% - 4px); z-index: 50; min-width: 250px; max-width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
    box-shadow: 0 12px 34px rgba(1,30,65,.22); display: grid; gap: 2px; animation: bsIn .12s ease-out; }
.bs-cb-menu[hidden] { display: none; }
.bs-cb-menu h5 { margin: 2px 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bs-cb-menu button { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; }
.bs-cb-menu button:hover { background: var(--bg); }
.bs-cb-menu button.on { background: rgba(30,136,229,.1); }
.bs-cb-menu button b { font-size: 13px; color: var(--ink); }
.bs-cb-menu button em { font-style: normal; font-size: 11px; color: var(--ok); font-weight: 700; }
.bs-cb-menu button small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.bs-cb-menu p { margin: 4px 8px 2px; font-size: 11px; color: var(--muted); }
.bs-budget { color: var(--muted); font-size: 11px; padding: 2px 8px 0; border-top: 1px dashed var(--line); margin-top: 2px; }
.bs-toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 22px rgba(1,30,65,.35); font-size: 13px; animation: bsMsg .2s ease-out; }

/* avatarmenu */
.user-menu-item.umi-studio .umi-new { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #003C71, #1E88E5); padding: 1px 7px; border-radius: 999px; }

/* donker */
[data-theme="dark"] #bs-root { --bg: #0b1726; --panel: #0f2238; --line: rgba(157,211,245,.16); --muted: #93a6ba; --ink: #e6eef6; }
[data-theme="dark"] #bs-root .bs-welcome-logo { content: url('../assets/build-studio-logo-dark.svg'); }
[data-theme="dark"] #bs-root .bs-kinds b, [data-theme="dark"] #bs-root .bs-card h3, [data-theme="dark"] #bs-root .bs-welcome h1, [data-theme="dark"] #bs-root .bs-chat-head b { color: #cfe6f7; }
[data-theme="dark"] #bs-root .bs-map-legend { background: rgba(15,34,56,.94); }

@media (max-width: 1180px) { .bs-main { grid-template-columns: 34px minmax(0, 1fr) 360px; } .bs-left > :not(.bs-collapse) { display: none; } .bs-kinds { grid-template-columns: repeat(2, 1fr); } .bs-progress { display: none; } }
@media (max-width: 820px) {
    .bs-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
    .bs-left { display: none; }
    .bs-brand img { height: 30px; }
    .bs-top-act .bs-btn { display: none; }
    .bs-design, .bs-grid, .bs-howto { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { #bs-root, .bs-msg, .bs-step i, .bs-phase, .bs-caret { animation: none; } }

/* ===== stap B: bestanden, kaart bewerken, meetpunten, controle, databronnen, tabbladen van de agent, dialogen ===== */
/* knoppen op een lichte ondergrond */
.bs-stage .bs-btn, .bs-modal .bs-btn, .bs-left .bs-btn { color: var(--blue); border-color: var(--line); background: var(--panel); }
.bs-stage .bs-btn.primary, .bs-modal .bs-btn.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.bs-stage .bs-btn.ghost:hover, .bs-modal .bs-btn.ghost:hover { border-color: var(--accent); }
.bs-top .bs-btn.primary.is-ready { background: linear-gradient(90deg, #00C27A, #00A3E0); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px rgba(0,194,122,.25); }
.bs-x { border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.bs-x:hover { background: rgba(209,50,18,.1); color: var(--bad); }
.bs-link { border: 0; background: none; color: var(--blue); cursor: pointer; padding: 0; font: inherit; }
.bs-link:hover { text-decoration: underline; }
.warn { color: var(--warn); }
.bs-tabs { overflow-x: auto; scrollbar-width: thin; }
.bs-tabs button { white-space: nowrap; }
.bs-tabs em { font-style: normal; font-size: 11px; background: var(--bg); color: var(--blue); border-radius: 999px; padding: 0 6px; margin-left: 3px; }
.bs-tabs em.bad { background: rgba(209,50,18,.12); color: var(--bad); }
.bs-ai-tab { background: linear-gradient(90deg, rgba(127,219,255,.25), rgba(30,136,229,.12)); border-radius: 6px; padding: 1px 6px; }
.bs-card h3 .bs-card-act { margin-left: auto; display: flex; gap: 6px; }
.bs-card select, .bs-form input, .bs-form select, .bs-form textarea, .bs-secret input, .bs-modal select, .bs-modal textarea {
    font: 13px inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
.bs-form input:focus, .bs-form select:focus, .bs-form textarea:focus, .bs-secret input:focus { outline: 2px solid rgba(30,136,229,.35); border-color: var(--accent); }

/* bestanden */
#bs-root.bs-dragging::after { content: 'Laat los om toe te voegen aan dit concept'; position: absolute; inset: 0; z-index: 4000; display: grid; place-items: center;
    background: rgba(1,30,65,.55); color: #fff; font: 600 20px inherit; border: 4px dashed var(--cyan); pointer-events: none; }
label.bs-drop { cursor: pointer; transition: border-color .2s, background .2s; }
label.bs-drop:hover { border-color: var(--accent); background: rgba(30,136,229,.05); }
.bs-up { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; margin: 8px 0; font-size: 12px; }
.bs-up i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p)); }
.bs-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bs-files li { padding: 7px 8px; border-radius: 10px; background: var(--bg); display: grid; gap: 3px; }
.bs-files li.bad { background: rgba(209,50,18,.07); }
.bs-files a { display: flex; gap: 6px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.bs-files a b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-files a:hover b { color: var(--blue); text-decoration: underline; }
.bs-files small { color: var(--muted); font-size: 11px; }
.bs-file-act { display: flex; flex-wrap: wrap; gap: 4px; }
.bs-file-act button:not(.bs-x) { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 2px 7px; font: 600 11px inherit; color: var(--blue); cursor: pointer; }
.bs-file-act button:not(.bs-x):hover { border-color: var(--accent); }
.bs-file-act .bs-x { margin-left: auto; }
.bs-left-h { margin: 14px 2px 6px; font-size: 12px; color: var(--navy); display: flex; gap: 6px; align-items: center; }
.bs-left-h em { font-style: normal; background: var(--warn); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }

/* kaart */
.bs-pin { display: grid; place-items: center; }
.bs-pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.leaflet-marker-draggable.bs-pin { cursor: grab; }
.bs-map-tools { position: absolute; right: 12px; bottom: 26px; z-index: 500; }
.bs-map.is-adding { cursor: crosshair; }
.bs-map.is-adding .leaflet-grab { cursor: crosshair; }
.bs-map-legend small { display: block; color: var(--muted); font-size: 11px; }

/* meetpunten */
.bs-points td { white-space: nowrap; }
.bs-points td i { color: #9AAABB; }

/* controle */
.bs-check { margin: 6px 0 10px; }
.bs-check h4 { margin: 0 0 4px; font-size: 13px; }
.bs-check h4 small { color: var(--muted); font-weight: 400; }
.bs-check ul { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 13px; }
.bs-check.is-fout li::marker { color: var(--bad); }
.bs-check.is-let_op li::marker { color: var(--warn); }
.bs-check.is-ok { opacity: .8; }
.bs-ready { padding: 10px 12px; border-radius: 10px; background: rgba(0,194,122,.1); border: 1px solid rgba(0,194,122,.35); }

/* databronnen en formulieren */
.bs-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.bs-source { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: linear-gradient(180deg, #fff, #FAFCFE); }
.bs-source header { position: relative; padding-right: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-source header > .bs-x { position: absolute; right: 0; top: 0; }
.bs-source header small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; order: 3; }
.bs-source header .bs-x { margin-left: auto; }
.bs-source p { margin: 0; }
.bs-source footer, .bs-card footer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.bs-source footer small { color: var(--muted); font-size: 11.5px; }
.bs-chip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.bs-chip.wait { background: rgba(224,122,0,.12); color: var(--warn); }
.bs-chip.ok { background: rgba(0,135,90,.12); color: var(--ok); }
.bs-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 10px; }
.bs-form label, .bs-form fieldset { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.bs-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 0; }
.bs-form .bs-full, .bs-form fieldset, .bs-form .bs-secret { grid-column: 1 / -1; }
.bs-form label.bs-opt, .bs-opt { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ink); font-size: 13px; }
.bs-help { font-weight: 400; color: var(--muted); font-size: 11px; }
.req { color: var(--bad); }
.bs-secret { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(1,30,65,.04); border: 1px dashed rgba(1,30,65,.18); }
.bs-secret > label { font-size: 12px; font-weight: 600; color: var(--navy); }
.bs-secret-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bs-secret-row input { flex: 1; min-width: 160px; font-family: ui-monospace, Consolas, monospace; }
.bs-secret-set { font-size: 12px; color: var(--ok); font-weight: 600; }
.bs-secret output { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bs-secret output code { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; word-break: break-all; }
.bs-secret output small { color: var(--muted); font-size: 11px; }

/* dialogen */
.bs-modal { position: absolute; inset: 0; z-index: 4100; display: grid; place-items: center; background: rgba(1,30,65,.45); backdrop-filter: blur(2px); animation: bsIn .15s ease-out; }
.bs-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--panel); border-radius: 16px; padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(1,30,65,.35); display: grid; gap: 10px; }
.bs-dialog h2 { margin: 0; font-size: 18px; color: var(--navy); }
.bs-dialog p { margin: 0; }
.bs-dialog label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bs-dialog-act { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.bs-dialog-act > span { flex: 1; }
.bs-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bs-plan li { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg); }
.bs-plan small { color: var(--muted); }
.bs-launched { display: grid; gap: 10px; text-align: center; justify-items: center; }
.bs-launched > span { font-size: 54px; animation: bsLaunch 1.2s ease-out; }
@keyframes bsLaunch { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-8px) scale(1.1); opacity: 1; } 100% { transform: none; } }
.bs-launched .bs-dialog-act { width: 100%; }

@media (max-width: 900px) {
    .bs-sources { grid-template-columns: 1fr; }
    .bs-plan li { grid-template-columns: 1fr; }
}
/* status van de agent boven het werkvlak */
.bs-center { position: relative; }
.bs-agent-state { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 80%;
    background: linear-gradient(110deg, var(--navy), var(--blue)); box-shadow: 0 6px 22px rgba(1,30,65,.35); overflow: hidden; animation: bsIn .2s ease-out; }
.bs-agent-state span { overflow: hidden; text-overflow: ellipsis; }
.bs-agent-state small { font-weight: 400; opacity: .8; margin-left: 4px; }
.bs-agent-state i { font-style: normal; font-size: 16px; animation: bsBob 1.2s ease-in-out infinite; }
.bs-agent-state b { position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: bsScan 1.4s linear infinite; }
.bs-agent-state[data-phase=bouwen] { background: linear-gradient(110deg, #0B5FAD, #00A3E0); }
.bs-agent-state[data-phase=analyseren] { background: linear-gradient(110deg, #3B2C8F, #6A4CD6); }
.bs-agent-state[data-phase=lezen] { background: linear-gradient(110deg, #00566B, #00879E); }
.bs-agent-state[data-phase=controleren] { background: linear-gradient(110deg, #00664A, #00A36C); }
@keyframes bsBob { 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes bsScan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bs-tabs button.is-busy { color: var(--accent); position: relative; }
.bs-tabs button.is-busy::after { content: ''; position: absolute; right: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bsPulse 1s ease-in-out infinite; }
@keyframes bsPulse { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .bs-agent-state i, .bs-agent-state b, .bs-tabs button.is-busy::after { animation: none; } }
/* nieuw tabblad: komt binnen met een gloed */
.bs-tabs button.is-new { animation: bsTabIn .6s cubic-bezier(.2,1.4,.4,1), bsTabGlow 2.4s ease-out; border-radius: 8px 8px 0 0; }
@keyframes bsTabIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes bsTabGlow { 0%, 30% { background: rgba(127,219,255,.35); box-shadow: 0 0 18px rgba(30,136,229,.45); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .bs-tabs button.is-new { animation: none; } }
/* visuals van de agent */
.bs-visuals { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; overflow: auto; height: 100%; box-sizing: border-box; align-content: start; }
.bs-visual { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; display: grid; box-shadow: 0 2px 10px rgba(1,30,65,.06); }
.bs-visual figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.bs-visual figcaption b { color: var(--navy); }
.bs-visual-act { margin-left: auto; display: flex; gap: 4px; }
.bs-visual-act .bs-btn { padding: 3px 9px; }
.bs-visual p { margin: 0; padding: 6px 10px 10px; }
.bs-visual-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #fff; }
.bs-modal-wide .bs-dialog { width: min(1400px, calc(100vw - 32px)); }
/* Handleiding: inhoudsopgave links, tekst rechts; leesbare regellengte. */
.bs-modal-manual .bs-dialog { height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bs-man { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.bs-man-toc { overflow: auto; padding: 18px 14px; border-right: 1px solid var(--line, #D5DEE8); background: #F5F9FD; display: flex; flex-direction: column; gap: 2px; }
.bs-man-toc > b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #011E41; margin-bottom: 6px; }
.bs-man-toc a { color: #003C71; text-decoration: none; font-size: 13px; padding: 4px 8px; border-radius: 6px; line-height: 1.3; }
.bs-man-toc a.l3 { padding-left: 20px; font-size: 12px; color: #5A6B7A; }
.bs-man-toc a:hover { background: #E6ECF2; }
.bs-man-doc { overflow: auto; padding: 22px 34px 40px; font-size: 14px; line-height: 1.6; color: #1C2B3A; }
.bs-man-doc > * { max-width: 860px; }
.bs-man-doc h1 { font-size: 26px; color: #011E41; margin: 0 0 12px; }
.bs-man-doc h3 { font-size: 19px; color: #011E41; margin: 28px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #003C71; scroll-margin-top: 12px; }
.bs-man-doc h4 { font-size: 15px; color: #003C71; margin: 18px 0 6px; scroll-margin-top: 12px; }
.bs-man-doc p { margin: 6px 0 10px; }
.bs-man-doc ul, .bs-man-doc ol { margin: 4px 0 12px; padding-left: 22px; }
.bs-man-doc li { margin: 3px 0; }
.bs-man-doc li.sub { margin-left: 18px; list-style: circle; }
.bs-man-doc code { background: #EEF2F7; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.bs-man-pre { background: #011E41; color: #E6ECF2; padding: 12px 14px; border-radius: 10px; font: 12px/1.35 'Cascadia Code', Consolas, monospace; overflow: auto; white-space: pre; }
.bs-man-table { overflow: auto; margin: 8px 0 14px; }
.bs-man-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.bs-man-table th { background: #003C71; color: #fff; text-align: left; padding: 6px 9px; font-weight: 600; }
.bs-man-table td { border-bottom: 1px solid #D5DEE8; padding: 6px 9px; vertical-align: top; }
.bs-man-table tr:nth-child(even) td { background: #F5F9FD; }
.bs-man-foot { margin-top: 26px; font-size: 12px; }
.bs-modal-manual .bs-dialog-act { padding: 10px 18px; border-top: 1px solid var(--line, #D5DEE8); margin: 0; }
.bs-welcome-help { margin-top: 14px; text-align: center; }
@media (max-width: 760px) {
    .bs-man { grid-template-columns: 1fr; }
    .bs-man-toc { display: none; }
    .bs-man-doc { padding: 16px; }
    .bs-manbtn span { display: none; }
}
.bs-modal-wide .bs-visual-frame { aspect-ratio: auto; height: calc(100vh - 170px); }
/* AI-kosten: teller bovenin, onder elk antwoord en in het startvenster */
.bs-costchip { position: relative; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1); color: #fff; font: 600 12.5px inherit; cursor: pointer; white-space: nowrap; }
.bs-costchip:hover { background: rgba(255,255,255,.2); }
.bs-costchip small { font-weight: 400; opacity: .75; }
.bs-costchip i { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-style: normal; font-size: 12px; color: var(--cyan); animation: bsCost 2.6s ease-out forwards; pointer-events: none; }
@keyframes bsCost { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 2px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.bs-msg-meta { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(1,30,65,.08); font-size: 11px; color: var(--muted); }
.bs-msg-meta b { color: var(--blue); }
.bs-cost-note { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(0,60,113,.06), rgba(30,136,229,.08)); border: 1px solid rgba(30,136,229,.25); }
.bs-cost-note b { color: var(--navy); }
.bs-cost-note span { font-size: 13px; }
.bs-cost-note small { color: var(--muted); font-size: 11.5px; }
.bs-dialog input[type=text] { font: 600 16px inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; letter-spacing: .02em; }
.bs-dialog input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,136,229,.15); }
.bs-nr-info { margin: -4px 0 0; min-height: 18px; }
/* werkplaats: VS Code in een Fugro-jasje */
.bs-ws { height: 100%; display: grid; grid-template-columns: 240px minmax(0, 1fr); background: #1E1E1E; color: #D4D4D4; border-radius: 0 0 14px 14px; overflow: hidden;
    font: 13px/1.45 'Segoe UI', system-ui, sans-serif; }
.bs-ws-tree { background: #181818; border-right: 1px solid #2B2B2B; overflow: auto; }
.bs-ws-tree > header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 11px; letter-spacing: .06em; color: #9DA5B4; position: sticky; top: 0; background: #181818; }
.bs-ws-tree > header button { border: 0; background: none; color: #9DA5B4; cursor: pointer; font-size: 14px; border-radius: 4px; padding: 0 5px; }
.bs-ws-tree > header button:hover { background: #2A2D2E; color: #fff; }
.bs-ws-tree ul { list-style: none; margin: 0; padding: 0; }
.bs-ws-tree button.dir, .bs-ws-tree button.file { width: 100%; text-align: left; border: 0; background: none; color: #CCCCCC; cursor: pointer; padding: 2px 8px 2px calc(10px + var(--d) * 14px);
    font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-ws-tree button:hover { background: #2A2D2E; }
.bs-ws-tree button.file.on { background: #04395E; color: #fff; outline: 1px solid #1E88E5; outline-offset: -1px; }
.bs-ws-main { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(90px, 32%); min-width: 0; }
.bs-ws-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 36px; background: #252526; border-bottom: 1px solid #2B2B2B; }
.bs-ws-name { font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 10px; border-top: 2px solid #1E88E5; background: #1E1E1E; align-self: stretch; display: flex; align-items: center; }
.bs-ws-act { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.bs-ws-act button, .bs-ws-act a { border: 1px solid #3C3C3C; background: #2D2D2D; color: #CCCCCC; border-radius: 6px; padding: 3px 9px; cursor: pointer; font: 12px inherit; text-decoration: none; }
.bs-ws-act button:hover, .bs-ws-act a:hover { background: #37373D; color: #fff; }
.bs-ws-act button.run { background: #0E7A3F; border-color: #12924B; color: #fff; }
.bs-ws-act button.run:hover { background: #12924B; }
.bs-ws-view { min-height: 0; overflow: hidden; background: #1E1E1E; }
.bs-ws-editor { height: 100%; display: grid; grid-template-columns: auto 1fr; font: 13px/1.5 'Cascadia Code', Consolas, 'Courier New', monospace; }
.bs-ws-gutter { margin: 0; padding: 10px 10px 10px 14px; color: #6E7681; text-align: right; overflow: hidden; user-select: none; background: #1E1E1E; font: inherit; }
.bs-ws-code { margin: 0; padding: 10px 12px; border: 0; resize: none; outline: none; background: #1E1E1E; color: #D4D4D4; font: inherit; tab-size: 4; white-space: pre; overflow: auto; }
.bs-ws-img { height: 100%; display: grid; place-items: center; overflow: auto; padding: 12px; box-sizing: border-box;
    background: repeating-conic-gradient(#2A2A2A 0 25%, #222 0 50%) 50% / 20px 20px; }
.bs-ws-img img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.5); border-radius: 4px; }
.bs-ws-split { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.bs-ws-tabs2 { display: flex; gap: 2px; padding: 4px 8px; background: #252526; }
.bs-ws-tabs2 button { border: 0; background: none; color: #9DA5B4; font: 12px inherit; padding: 3px 10px; border-radius: 5px; cursor: pointer; }
.bs-ws-tabs2 button.on { background: #37373D; color: #fff; }
.bs-ws-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.bs-ws-csv { max-height: none; height: 100%; background: #fff; color: var(--ink); }
.bs-ws-term { border-top: 1px solid #2B2B2B; background: #181818; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.bs-ws-term > header { display: flex; gap: 10px; align-items: baseline; padding: 5px 12px; font-size: 11px; letter-spacing: .06em; color: #9DA5B4; border-bottom: 1px solid #2B2B2B; }
.bs-ws-term > header small { letter-spacing: 0; color: #6E7681; }
.bs-ws-runs { overflow: auto; padding: 4px 0; }
.bs-ws-runs details { border-bottom: 1px solid #222; }
.bs-ws-runs summary { cursor: pointer; padding: 4px 12px; font: 12px 'Cascadia Code', Consolas, monospace; color: #CCCCCC; list-style: none; }
.bs-ws-runs summary::-webkit-details-marker { display: none; }
.bs-ws-runs summary small { color: #6E7681; margin-left: 6px; font-family: 'Segoe UI', sans-serif; }
.bs-ws-runs summary i { font-style: normal; font-weight: 700; margin-right: 4px; }
.bs-ws-runs i.ok { color: #3FB950; }
.bs-ws-runs i.bad { color: #F85149; }
.bs-ws-runs pre { margin: 0; padding: 6px 14px 10px 30px; font: 12px/1.45 'Cascadia Code', Consolas, monospace; color: #D4D4D4; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.bs-ws-runs pre .err { color: #F85149; display: block; }
.bs-stage:has(.bs-ws) { padding: 0; overflow: hidden; }
@media (max-width: 1100px) { .bs-ws { grid-template-columns: 180px minmax(0, 1fr); } }

/* foto's in de chat */
.bs-cphotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.bs-cphotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--bg); }
/* chat: tabellen, code en links uit het antwoord */
.bs-bub .bs-mdtable { margin: 6px 0; max-height: 320px; }
.bs-bub .bs-mdtable table { font-size: 12px; }
.bs-bub code { font: 12px 'Cascadia Code', Consolas, monospace; background: rgba(1,30,65,.07); padding: 1px 5px; border-radius: 5px; }
.bs-bub pre.bs-code { margin: 6px 0; padding: 8px 10px; background: #1E1E1E; color: #D4D4D4; border-radius: 8px; font: 12px/1.45 'Cascadia Code', Consolas, monospace; overflow: auto; max-height: 300px; }
.bs-bub a { color: var(--accent); word-break: break-word; }
.bs-bub .bs-h { margin: 8px 0 2px; color: var(--navy); }
.bs-dialog label.bs-opt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); cursor: pointer; }
.bs-dialog label.bs-opt input { width: 18px; height: 18px; accent-color: var(--blue); }
/* Dashboard, 3D en presentatie uit de werkplaats (renderView) */
.bs-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bs-view-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line, #D5DEE8); background: var(--panel); }
.bs-view-bar select { max-width: 320px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.bs-view-bar .bs-btn.ghost { color: var(--ink); border-color: var(--line, #D5DEE8); text-decoration: none; padding: 5px 10px; font-size: 12px; }
.bs-view-frame { flex: 1; min-height: 360px; background: #fff; }
.bs-view-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.bs-view-frame:fullscreen { background: #fff; }
/* Archief onderaan de conceptenlijst */
.bs-archive { margin-top: 14px; border-top: 1px solid var(--line, #D5DEE8); padding-top: 8px; }
.bs-archive summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted, #5B6B7F); padding: 4px 2px; }
.bs-archive summary em { font-style: normal; margin-left: 4px; opacity: .8; }
.bs-archive .bs-list button { opacity: .8; }
/* Geschiedenis: uitschuifpaneel rechts met een trektab (toggleHistory/renderHistory) */
.bs-main { position: relative; }
.bs-drawer { position: absolute; top: 10px; right: 0; bottom: 10px; width: min(400px, 92vw); z-index: 1000; display: flex; transform: translateX(100%);
    transition: transform .22s ease; pointer-events: none; }
.bs-drawer[hidden] { display: none; }
#bs-root.bs-hist-open .bs-drawer { transform: translateX(0); pointer-events: auto; }
.bs-drawer-tab { position: absolute; left: -32px; top: 64px; width: 32px; padding: 12px 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px;
    background: var(--navy); color: #fff; cursor: pointer; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: -3px 2px 10px rgba(1,30,65,.22); font: 600 12px inherit; }
.bs-drawer-tab span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .02em; white-space: nowrap; }
.bs-drawer-tab em { font-style: normal; min-width: 18px; padding: 1px 4px; border-radius: 9px; background: rgba(255,255,255,.2); font-size: 11px; text-align: center; }
.bs-drawer-tab em:empty { display: none; }
.bs-drawer-tab:hover, .bs-drawer-tab:focus-visible { background: var(--blue); outline: none; }
#bs-root.bs-hist-open .bs-drawer-tab { background: var(--blue); }
.bs-drawer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
    border-right: 0; border-radius: 14px 0 0 14px; box-shadow: -10px 0 28px rgba(1,30,65,.18); }
.bs-drawer-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin-bottom: 6px; }
.bs-drawer-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.bs-drawer-head small { grid-column: 1; color: var(--muted); font-size: 12px; }
.bs-drawer-head .bs-ic { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--ink); background: var(--bg); font-weight: 700; }
.bs-drawer-cost { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.bs-drawer-cost small { color: var(--muted); }
.bs-drawer .bs-hist li { grid-template-columns: 40px 1fr auto; }
.bs-drawer .bs-hist li.is-now { box-shadow: inset 3px 0 0 var(--accent); }
.bs-hist-now { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); }
[data-theme="dark"] #bs-root .bs-drawer-head h3 { color: var(--ink); }
/* Rondleiding (startTour): donker scherm met een uitsparing rond het onderdeel en een uitlegballon */
.bs-tour { position: fixed; inset: 0; z-index: 5000; }
.bs-tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(1,30,65,.62), 0 0 0 3px var(--cyan); transition: all .28s ease; pointer-events: none; }
.bs-tour-pop { position: fixed; padding: 16px 18px 12px; border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px rgba(1,30,65,.4);
    border-top: 4px solid var(--accent); transition: left .28s ease, top .28s ease; }
.bs-tour-pop h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }
[data-theme="dark"] #bs-root .bs-tour-pop h3 { color: var(--ink); }
.bs-tour-pop p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.bs-tour-never { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.bs-tour-pop footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bs-tour-pop .bs-btn { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.bs-tour-dots { flex-basis: 100%; margin-bottom: 4px; }
.bs-tour-pop .bs-btn.ghost { color: var(--ink); border-color: var(--line); }
.bs-tour-pop .bs-btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.bs-tour-dots { display: flex; gap: 4px; }
.bs-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.bs-tour-dots i.on { background: var(--accent); width: 14px; border-radius: 3px; }