/* Module verhuuragent: chat en telefoon, beschikbaarheid, prijs, vlootplanning, reservaties en API voor AI-agents */
.m-verhuuragent .va { display: grid; gap: 14px; min-width: 0; }
.m-verhuuragent .va > * { min-width: 0; }
.m-verhuuragent svg { flex: none; }

/* referentieband */
.m-verhuuragent .va-ref { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, #4F46E5 30%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, #4F46E5 9%, white), color-mix(in srgb, var(--accent) 7%, white)); }
.m-verhuuragent .va-ref-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.m-verhuuragent .va-ref-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.m-verhuuragent .va-ref-txt b { font-size: 14.5px; }
.m-verhuuragent .va-ref-txt span { color: var(--muted); font-size: 13px; }
.m-verhuuragent .va-ref-link { display: grid; gap: 4px; justify-items: end; text-align: right; flex: none; }
.m-verhuuragent .va-ref-link .btn { background: var(--panel); }

/* kop */
.m-verhuuragent .va-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.m-verhuuragent .va-head-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.m-verhuuragent .va-head h3 { font-size: 16px; letter-spacing: -.01em; }
.m-verhuuragent .va-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed)); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.m-verhuuragent .va-avatar.is-bot { background: linear-gradient(135deg, #334155, #4F46E5); }
.m-verhuuragent .va-head-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.m-verhuuragent .va-ai-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border-radius: 9px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); }
.m-verhuuragent .va-ai-note svg { margin-top: 2px; color: var(--accent); }
.m-verhuuragent .va-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.m-verhuuragent .va-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-verhuuragent .va-switch span { width: 34px; height: 20px; border-radius: 999px; background: #cbd1da; position: relative; transition: background-color .2s; }
.m-verhuuragent .va-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.m-verhuuragent .va-switch input:checked + span { background: var(--ok); }
.m-verhuuragent .va-switch input:checked + span::after { transform: translateX(14px); }
.m-verhuuragent .va-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* tabbladen */
.m-verhuuragent .va-tabs { margin-bottom: 0; }
.m-verhuuragent .va-tabs .tab { display: inline-flex; align-items: center; gap: 7px; }
.m-verhuuragent .va-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; }

/* ---------- vraag stellen ---------- */
.m-verhuuragent .va-ask { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 14px; align-items: start; }
.m-verhuuragent .va-ask > * { min-width: 0; }
.m-verhuuragent .va-chat { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.m-verhuuragent .va-chat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.m-verhuuragent .va-chat-title { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.m-verhuuragent .va-chat-title svg { color: var(--accent); }
.m-verhuuragent .va-calls { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.m-verhuuragent .va-calls .btn svg { color: var(--ok); }
.m-verhuuragent .va-callbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; background: linear-gradient(120deg, #121821, color-mix(in srgb, var(--accent) 50%, #121821)); }
.m-verhuuragent .va-callbar > div:first-of-type { display: grid; line-height: 1.25; }
.m-verhuuragent .va-callbar .small { opacity: .75; font-variant-numeric: tabular-nums; }
.m-verhuuragent .va-callic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); animation: va-pulse 1.6s infinite; }
.m-verhuuragent .va-callbar .btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }
.m-verhuuragent .va-voice { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; opacity: .9; }
.m-verhuuragent .va-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.m-verhuuragent .va-wave i { width: 3px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .8); animation: va-wave 1s ease-in-out infinite; }
.m-verhuuragent .va-wave i:nth-child(2) { animation-delay: .15s; } .m-verhuuragent .va-wave i:nth-child(3) { animation-delay: .3s; } .m-verhuuragent .va-wave i:nth-child(4) { animation-delay: .45s; } .m-verhuuragent .va-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes va-wave { 0%, 100% { height: 6px; } 50% { height: 20px; } }
@keyframes va-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.m-verhuuragent .va-msgs { height: 540px; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); scroll-behavior: smooth; }
.m-verhuuragent .va-msg { display: flex; flex-direction: column; max-width: 88%; animation: va-in .25s ease-out; }
.m-verhuuragent .va-msg.is-klant { align-self: flex-end; align-items: flex-end; }
.m-verhuuragent .va-msg.is-agent { align-self: flex-start; }
@keyframes va-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.m-verhuuragent .va-bubble { padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.m-verhuuragent .is-klant .va-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.m-verhuuragent .is-agent .va-bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.m-verhuuragent .is-call.is-klant .va-bubble { background: #1f2733; }
.m-verhuuragent .va-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.m-verhuuragent .va-sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 5px 11px; border-radius: 999px; background: var(--line-2); color: var(--muted); font-size: 12px; text-align: center; }
.m-verhuuragent .va-typing { display: inline-flex; align-items: center; gap: 4px; }
.m-verhuuragent .va-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: va-dot 1.1s infinite; }
.m-verhuuragent .va-typing i:nth-child(2) { animation-delay: .15s; } .m-verhuuragent .va-typing i:nth-child(3) { animation-delay: .3s; }
.m-verhuuragent .va-typing span { margin-left: 6px; }
@keyframes va-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

.m-verhuuragent .va-offer { margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.m-verhuuragent .va-offer.is-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.m-verhuuragent .va-offer.is-bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.m-verhuuragent .va-offer-line { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.m-verhuuragent .va-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--panel); }
.m-verhuuragent .va-offer-foot b { white-space: nowrap; }
.m-verhuuragent .va-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.m-verhuuragent .va-dot.ok { background: var(--ok); } .m-verhuuragent .va-dot.bad { background: var(--bad); }
.m-verhuuragent .va-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.m-verhuuragent .va-alts { display: grid; gap: 6px; margin-top: 9px; }
.m-verhuuragent .va-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); text-align: left; cursor: pointer; font-size: 13px; transition: border-color .15s, background-color .15s; }
.m-verhuuragent .va-alt:hover { border-color: var(--accent); background: var(--accent-soft); }
.m-verhuuragent .va-alt b { white-space: nowrap; }
.m-verhuuragent .va-alt:disabled { opacity: .6; cursor: default; }
.m-verhuuragent .va-hint { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 9px; padding: 8px 10px; border-radius: 9px; background: var(--info-soft); color: color-mix(in srgb, var(--info) 85%, black); font-size: 13px; }
.m-verhuuragent .va-hint svg { margin-top: 2px; }
.m-verhuuragent .va-hint span { flex: 1; min-width: 160px; }
.m-verhuuragent .va-hint .btn { background: var(--panel); }
.m-verhuuragent .va-notes { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.m-verhuuragent .is-klant .va-notes { color: rgba(255, 255, 255, .8); }

.m-verhuuragent .va-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px 4px; border-top: 1px solid var(--line-2); scrollbar-width: thin; }
.m-verhuuragent .va-chip { flex: none; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; cursor: pointer; color: var(--ink); transition: border-color .15s, background-color .15s; }
.m-verhuuragent .va-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.m-verhuuragent .va-chip:disabled { opacity: .5; cursor: default; }
.m-verhuuragent .va-input { display: flex; gap: 8px; padding: 10px 14px 14px; }
.m-verhuuragent .va-input .input { flex: 1; min-width: 0; }

/* zijpaneel */
.m-verhuuragent .va-side { display: grid; gap: 12px; }
.m-verhuuragent .va-side > * { min-width: 0; }
.m-verhuuragent .va-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 30px 22px; color: var(--muted); }
.m-verhuuragent .va-empty b { color: var(--ink); }
.m-verhuuragent .va-empty svg { color: var(--accent); }
.m-verhuuragent .va-card .card-head { margin-bottom: 10px; }
.m-verhuuragent .va-lines { display: grid; gap: 6px; }
.m-verhuuragent .va-line { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; align-items: center; }
.m-verhuuragent .va-line .select, .m-verhuuragent .va-line .input { padding: 7px 9px; }
.m-verhuuragent .va-addline { justify-self: start; color: var(--accent); }
.m-verhuuragent .va-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.m-verhuuragent .va-form .input { padding: 7px 8px; min-width: 0; }
.m-verhuuragent .va-form .va-span3 { grid-column: 1 / -1; }
.m-verhuuragent .va-form .seg { width: 100%; }
.m-verhuuragent .va-form .seg button { flex: 1; padding: 6px 4px; font-size: 12.5px; }
.m-verhuuragent .va-form .seg button:disabled { opacity: .45; cursor: not-allowed; }
.m-verhuuragent .va-extras { display: grid; gap: 6px; margin-top: 10px; font-size: 13.5px; }
.m-verhuuragent .va-zone, .m-verhuuragent .va-warnline { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13px; background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 85%, black); }
.m-verhuuragent .va-warnline { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 80%, black); }

.m-verhuuragent .va-av { padding: 10px 0; border-top: 1px solid var(--line-2); }
.m-verhuuragent .va-av:first-of-type { border-top: 0; padding-top: 0; }
.m-verhuuragent .va-av-head { display: flex; align-items: center; gap: 8px; }
.m-verhuuragent .va-av-n { font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.m-verhuuragent .va-av-n.ok { background: var(--ok-soft); color: var(--ok); } .m-verhuuragent .va-av-n.bad { background: var(--bad-soft); color: var(--bad); }
.m-verhuuragent .va-av p { margin: 2px 0 8px; }
.m-verhuuragent .va-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 22px; }
.m-verhuuragent .va-strip i { border-radius: 3px; background: var(--line-2); opacity: .55; }
.m-verhuuragent .va-strip i.is-in { opacity: 1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.m-verhuuragent .va-strip i.is-ok { background: var(--ok); }
.m-verhuuragent .va-strip i.is-low { background: var(--warn); }
.m-verhuuragent .va-strip i.is-none { background: var(--bad); }
.m-verhuuragent .va-strip i.is-past { background: repeating-linear-gradient(45deg, var(--line), var(--line) 2px, transparent 2px, transparent 4px); }
.m-verhuuragent .va-strip-lab { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: 11px; }
.m-verhuuragent .va-units { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.m-verhuuragent .va-units span { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }
.m-verhuuragent .va-units .is-free { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.m-verhuuragent .va-units .is-use { color: #fff; background: var(--ok); border-color: var(--ok); }
.m-verhuuragent .va-units .is-busy { text-decoration: line-through; opacity: .6; }
.m-verhuuragent .va-altbox { display: grid; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }

.m-verhuuragent .va-price { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 12px; }
.m-verhuuragent .va-price td { padding: 7px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.m-verhuuragent .va-price td:first-child { padding-right: 10px; }
.m-verhuuragent .va-price td span { display: block; color: var(--muted); font-size: 12px; }
.m-verhuuragent .va-price .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-verhuuragent .va-price .va-sub td { border-top: 1px solid var(--line); }
.m-verhuuragent .va-price .va-tot td { font-weight: 750; font-size: 15.5px; border-bottom: 2px solid var(--ink); }
.m-verhuuragent .va-price .va-dep td { color: var(--muted); border-bottom: 0; }
.m-verhuuragent .va-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 80%, black); }
.m-verhuuragent .va-done > div { display: grid; flex: 1; min-width: 0; }
.m-verhuuragent .va-done .btn { background: var(--panel); }
.m-verhuuragent .va-guardline { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; }
.m-verhuuragent .va-guardline svg { margin-top: 2px; }

/* modals (staan buiten de stage, daarom ook zonder modulevoorvoegsel) */
.va-rmodal { display: grid; gap: 12px; }
.va-rsum { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.va-rsum > div:not(.muted) { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.va-guard { display: flex; gap: 7px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 75%, black); }
.va-guard svg { margin-top: 2px; flex: none; }
.va-preview { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); display: grid; gap: 8px; }
.va-preview-tag { justify-self: start; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); }
.va-dos { display: grid; gap: 12px; }
.va-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.va-dl dt { color: var(--muted); font-size: 13px; }
.va-dl dd { margin: 0; }
.va-dos-units { display: flex; flex-wrap: wrap; gap: 6px; }
.va-dos-units span { font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: var(--line-2); }
.va-h4 { font-size: 14px; margin: 16px 0 8px; }
.va-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.va-zones > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }

/* ---------- vlootplanning ---------- */
.m-verhuuragent .va-kpis .kpi { box-shadow: var(--shadow); }
.m-verhuuragent .va-gcard { padding: 14px; }
.m-verhuuragent .va-gtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.m-verhuuragent .va-gnav { gap: 6px; }
.m-verhuuragent .va-grange { margin-left: 6px; font-size: 14px; }
.m-verhuuragent .va-gtype { width: auto; max-width: 100%; }
.m-verhuuragent .va-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; color: var(--muted); }
.m-verhuuragent .va-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-verhuuragent .lg { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.m-verhuuragent .lg-req { background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px dashed var(--accent); }
.m-verhuuragent .lg-mk { width: 8px; height: 8px; transform: rotate(45deg); background: var(--ink); display: inline-block; border-radius: 1px; }

.m-verhuuragent .va-gantt { --lab: 78px; container-type: inline-size; }
.m-verhuuragent .va-g-head, .m-verhuuragent .va-g-row, .m-verhuuragent .va-g-cols { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); }
.m-verhuuragent .va-g-track { position: relative; min-width: 0; }
.m-verhuuragent .va-g-head { position: sticky; top: 100px; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); }
.m-verhuuragent .va-g-head .va-g-track { height: 34px; }
.m-verhuuragent .va-g-day { position: absolute; top: 0; bottom: 0; display: grid; align-content: center; justify-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.m-verhuuragent .va-g-day em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 500; }
.m-verhuuragent .va-g-day.is-we { color: var(--muted); }
.m-verhuuragent .va-g-day.is-today { color: var(--accent); }
.m-verhuuragent .va-g-day.is-today::after { content: ''; position: absolute; bottom: -1px; left: 15%; right: 15%; height: 3px; border-radius: 2px; background: var(--accent); }
.m-verhuuragent .va-g-body { position: relative; }
.m-verhuuragent .va-g-cols { position: absolute; inset: 0; pointer-events: none; }
.m-verhuuragent .va-g-we { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--line-2) 70%, transparent); }
.m-verhuuragent .va-g-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); opacity: .7; z-index: 2; }
.m-verhuuragent .va-g-grp { position: relative; z-index: 3; background: var(--panel); display: flex; align-items: baseline; gap: 10px; padding: 9px 0 4px; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.m-verhuuragent .va-g-grp.is-req b { color: var(--accent); }
.m-verhuuragent .va-g-row { height: 26px; border-bottom: 1px solid var(--line-2); }
.m-verhuuragent .va-g-lab { font-size: 11.5px; color: var(--muted); align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.m-verhuuragent .va-g-reqband { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 1px dashed var(--accent); border-right: 1px dashed var(--accent); }
.m-verhuuragent .va-bar { position: absolute; top: 4px; height: 18px; padding: 0 7px; border: 0; border-radius: 5px; display: flex; align-items: center; font: 600 11px/1 var(--sans); color: #fff; cursor: pointer; overflow: visible; white-space: nowrap; text-align: left; z-index: 1; transition: filter .15s, box-shadow .15s; }
.m-verhuuragent .va-bar span { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.m-verhuuragent .va-bar:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(16, 24, 40, .2); z-index: 2; }
.m-verhuuragent .va-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.m-verhuuragent .va-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.m-verhuuragent .st-actief { background: var(--accent); }
.m-verhuuragent .st-bevestigd { background: color-mix(in srgb, var(--accent) 55%, white); color: color-mix(in srgb, var(--accent) 70%, black); }
.m-verhuuragent .va-bar.st-bevestigd { color: color-mix(in srgb, var(--accent) 75%, black); }
.m-verhuuragent .st-wacht { background: repeating-linear-gradient(135deg, var(--warn), var(--warn) 6px, color-mix(in srgb, var(--warn) 78%, white) 6px, color-mix(in srgb, var(--warn) 78%, white) 12px); }
.m-verhuuragent .st-offerte { background: var(--panel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, white); }
.m-verhuuragent .va-bar.st-offerte { color: var(--muted); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, white); box-shadow: none; }
.m-verhuuragent .st-terug, .m-verhuuragent .st-gefactureerd { background: #c3c9d2; }
.m-verhuuragent .va-bar.st-terug, .m-verhuuragent .va-bar.st-gefactureerd { color: #3b4350; }
.m-verhuuragent .st-onderhoud { background: repeating-linear-gradient(45deg, #9aa3af, #9aa3af 4px, #b9c0ca 4px, #b9c0ca 8px); }
.m-verhuuragent .va-bar.is-new { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--warn); animation: va-glow 1.4s ease-in-out 4; z-index: 2; }
@keyframes va-glow { 50% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 7px color-mix(in srgb, var(--warn) 45%, transparent); } }
.m-verhuuragent .mk { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--ink); border: 1.5px solid var(--panel); transform: rotate(45deg); border-radius: 1px; }
.m-verhuuragent .mk-in { left: -3px; } .m-verhuuragent .mk-out { right: -3px; }
@container (max-width: 760px) {
  .m-verhuuragent .va-g-day em { display: none; }
  .m-verhuuragent .va-g-day { font-size: 9.5px; font-weight: 500; }
  .m-verhuuragent .va-g-day:not(.is-mon):not(.is-today) { color: transparent; }
  .m-verhuuragent .va-bar span { display: none; }
  .m-verhuuragent .va-bar { padding: 0; }
}

.m-verhuuragent .va-trip-list { display: grid; gap: 6px; }
.m-verhuuragent .va-trip { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; cursor: pointer; font-size: 13.5px; transition: border-color .15s; }
.m-verhuuragent .va-trip:hover { border-color: var(--accent); }
.m-verhuuragent .va-trip.is-new { border-color: var(--warn); background: var(--warn-soft); }
.m-verhuuragent .va-trip-day { font-weight: 650; }
.m-verhuuragent .va-trip-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.m-verhuuragent .va-trip-kind.in { color: var(--ok); } .m-verhuuragent .va-trip-kind.out { color: var(--info); }
.m-verhuuragent .va-trip-who { display: grid; min-width: 0; }
.m-verhuuragent .va-trip-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- reservaties ---------- */
.m-verhuuragent .va-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.m-verhuuragent .va-flow-step { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.m-verhuuragent .va-flow-step b { font-size: 22px; color: var(--ink); letter-spacing: -.02em; }
.m-verhuuragent .va-flow-step::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; }
.m-verhuuragent .va-flow-step.st-wacht { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.m-verhuuragent .va-flow-step.st-actief::before { background: var(--accent); }
.m-verhuuragent .va-flow-step.st-bevestigd::before { background: color-mix(in srgb, var(--accent) 55%, white); }
.m-verhuuragent .va-flow-step.st-wacht::before { background: var(--warn); }
.m-verhuuragent .va-flow-step.st-offerte, .m-verhuuragent .va-flow-step.st-terug, .m-verhuuragent .va-flow-step.st-gefactureerd { box-shadow: none; }
.m-verhuuragent .va-flow-note { margin: -4px 0 2px; }
.m-verhuuragent .va-rlist { display: grid; gap: 8px; }
.m-verhuuragent .va-ritem { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.m-verhuuragent .va-ritem:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.m-verhuuragent .va-ritem.is-new { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.m-verhuuragent .va-ritem.is-off { opacity: .55; }
.m-verhuuragent .va-ritem-main { display: grid; gap: 3px; min-width: 0; }
.m-verhuuragent .va-ritem-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-verhuuragent .va-ritem-who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.m-verhuuragent .va-ritem-side { display: grid; justify-items: end; gap: 4px; flex: none; text-align: right; }
.m-verhuuragent .va-ritem-acts { gap: 6px; flex-wrap: nowrap; }

/* ---------- voor AI-agents ---------- */
.m-verhuuragent .va-api-intro { max-width: 860px; color: var(--muted); font-size: 14.5px; }
.m-verhuuragent .va-api { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.m-verhuuragent .va-api > *, .m-verhuuragent .va-api-side > * { min-width: 0; }
.m-verhuuragent .va-api-side { display: grid; gap: 14px; }
.m-verhuuragent .va-apiform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin-bottom: 12px; }
.m-verhuuragent .va-apiform .input, .m-verhuuragent .va-apiform .select { padding: 7px 8px; min-width: 0; }
.m-verhuuragent .va-code { border-radius: 10px; overflow: hidden; border: 1px solid #1f2733; }
.m-verhuuragent .va-code-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: #1b222d; color: #c9d4e3; }
.m-verhuuragent .va-code-head span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.m-verhuuragent .va-code-head .btn { color: #c9d4e3; border-color: transparent; }
.m-verhuuragent .va-code-head .btn:hover { background: rgba(255, 255, 255, .08); }
.m-verhuuragent .va-pre { margin: 0; padding: 12px 14px; background: #0f141b; color: #dbe4f0; font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 460px; overflow-y: auto; border-radius: 0; }
.m-verhuuragent .va-pre-sm { max-height: 220px; border-radius: 8px; margin-top: 6px; }
.m-verhuuragent .va-pre .k { color: #8cc8ff; } .m-verhuuragent .va-pre .s { color: #a5e3a1; } .m-verhuuragent .va-pre .n { color: #f6c177; } .m-verhuuragent .va-pre .b { color: #e39ff6; }
.m-verhuuragent .va-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.m-verhuuragent .va-rules li { display: flex; gap: 8px; align-items: flex-start; }
.m-verhuuragent .va-rules svg { margin-top: 3px; color: var(--ok); }
.m-verhuuragent .va-sim { display: grid; gap: 12px; }
.m-verhuuragent .va-sim-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-verhuuragent .va-sim-head > div { min-width: 0; flex: 1 1 260px; }
.m-verhuuragent .va-task { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.m-verhuuragent .va-task p { font-weight: 600; margin-top: 2px; }
.m-verhuuragent .va-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-verhuuragent .va-steps:empty { display: none; }
.m-verhuuragent .va-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; animation: va-in .3s ease-out; }
.m-verhuuragent .va-step > div { min-width: 0; display: grid; gap: 6px; }
.m-verhuuragent .va-step p { font-size: 13.5px; }
.m-verhuuragent .va-step.is-call p { font: 600 12.5px var(--mono); overflow-wrap: anywhere; }
.m-verhuuragent .va-step-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--line-2); color: var(--muted); }
.m-verhuuragent .va-step.is-call .va-step-ic { background: #1b222d; color: #8cc8ff; }
.m-verhuuragent .va-step.is-warn .va-step-ic { background: var(--warn-soft); color: var(--warn); }
.m-verhuuragent .va-step.is-res .va-step-ic { background: var(--ok); color: #fff; }
.m-verhuuragent .va-step.is-think .va-step-ic { background: var(--accent-soft); color: var(--accent); }

/* ---------- smallere schermen ---------- */
@media (max-width: 1180px) {
  .m-verhuuragent .va-ask { grid-template-columns: minmax(0, 1fr) 370px; }
}
@media (max-width: 1020px) {
  .m-verhuuragent .va-ask { grid-template-columns: minmax(0, 1fr); }
  .m-verhuuragent .va-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .m-verhuuragent .va-api { grid-template-columns: minmax(0, 1fr); }
  .m-verhuuragent .va-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .m-verhuuragent .va-ref { flex-wrap: wrap; }
  .m-verhuuragent .va-ref-link { justify-items: start; text-align: left; flex-basis: 100%; }
  .m-verhuuragent .va-head { grid-template-columns: minmax(0, 1fr); }
  .m-verhuuragent .va-head-side { justify-content: flex-start; }
  .m-verhuuragent .va-tabs .tab { padding: 9px 9px; }
  .m-verhuuragent .va-calls { margin-left: 0; width: 100%; }
  .m-verhuuragent .va-calls .btn { flex: 1 1 0; min-width: 0; }
  .m-verhuuragent .va-calls .btn span { overflow: hidden; text-overflow: ellipsis; }
  .m-verhuuragent .va-msgs { height: 470px; padding: 12px 10px; }
  .m-verhuuragent .va-msg { max-width: 94%; }
  .m-verhuuragent .va-trip { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .m-verhuuragent .va-trip-who { grid-column: 1 / -1; grid-row: 2; }
  .m-verhuuragent .va-trip .badge { grid-column: 2; grid-row: 1; }
  .m-verhuuragent .va-trip-kind { display: none; }
  .m-verhuuragent .va-ritem { flex-direction: column; align-items: stretch; }
  .m-verhuuragent .va-ritem-side { justify-items: start; text-align: left; grid-template-columns: 1fr auto; align-items: center; }
  .m-verhuuragent .va-ritem-acts { grid-column: 1 / -1; }
  .m-verhuuragent .va-ritem-acts .btn { flex: 1; }
  .m-verhuuragent .va-gantt { --lab: 54px; }
  .m-verhuuragent .va-g-lab { font-size: 10px; }
  .m-verhuuragent .va-g-head { top: 96px; }
}
@media (max-width: 600px) {
  .m-verhuuragent .va-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .m-verhuuragent .va-tabs .tab { justify-content: center; padding: 9px 6px; }
  .m-verhuuragent .va-tabs .tab span:not(.va-count) { font-size: 13.5px; }
  .m-verhuuragent .va-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .m-verhuuragent .va-kpis .kpi { padding: 10px 12px; }
  .m-verhuuragent .va-kpis .kpi-val { font-size: 21px; }
  .m-verhuuragent .va-side { grid-template-columns: minmax(0, 1fr); }
  .m-verhuuragent .va-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-verhuuragent .va-apiform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-verhuuragent .va-apiform .btn { grid-column: 1 / -1; }
  .m-verhuuragent .va-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-verhuuragent .va-sim-head .btn { width: 100%; }
  .m-verhuuragent .va-chip { max-width: 260px; }
  .m-verhuuragent .va-wave { display: none; }
  .m-verhuuragent .va-callbar { gap: 8px; padding: 9px 10px; }
  .m-verhuuragent .va-callbar > div:first-of-type { min-width: 0; flex: 1; }
  .m-verhuuragent .va-callbar > div:first-of-type > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-verhuuragent .va-callbar .spacer { display: none; }
  .va-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .va-dl dd { margin-bottom: 6px; }
}