body { --assistant-panel-width: 440px; }
.assistant-root {
  position: fixed; inset: 0 0 0 auto; z-index: 1050;
  width: var(--assistant-panel-width); color: var(--fg-primary, #2c2a26);
  font-family: 'DM Sans', system-ui, sans-serif; pointer-events: none;
}
.assistant-root[hidden], .assistant-root [hidden] { display: none !important; }
body.page-chat .assistant-root { display: none; }
/* Legacy dossier dialogs share the workspace with Assistant; confirmations
   retain their normal blocking layer. */
body:has(#modal.open .cand-detail-modal) .assistant-root,
body:has(#modal.open #tab-cl-info) .assistant-root { z-index: 1101; }
.assistant-launcher {
  position: fixed; right: 24px; bottom: 24px; display: grid; place-items: center;
  width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  background: var(--navy, #17384f); color: #fff; pointer-events: auto; cursor: pointer;
  box-shadow: 0 4px 16px rgba(23,56,79,.18);
}
.assistant-launcher svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-root[data-open="true"] .assistant-launcher { display: none; }
.assistant-root[data-unread="true"] .assistant-launcher::after { content: ''; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--koper, #d07a3a); }
.assistant-panel { display: flex; flex-direction: column; height: 100dvh; pointer-events: auto; border-left: 1px solid var(--border, #dedbd5); background: var(--surface, #fff); overflow: hidden; }
.assistant-panel__head { display: flex; align-items: center; gap: 8px; min-height: 76px; flex-shrink: 0; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--border, #dedbd5); }
.assistant-panel__heading { flex: 1; min-width: 0; }
.assistant-panel__title { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--navy, #17384f); font: 650 15px/1.3 'DM Sans', system-ui, sans-serif; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.assistant-panel__title:disabled { cursor: default; }
.assistant-panel__subtitle { margin-top: 3px; color: var(--fg-tertiary, #8a8680); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-panel__tools { display: flex; gap: 2px; flex-shrink: 0; }
.assistant-iconbtn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-tertiary, #8a8680); cursor: pointer; }
.assistant-iconbtn:hover { background: var(--surface-active, #f1efeb); color: var(--fg-primary, #1a1a1a); }
.assistant-iconbtn svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-panel__back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.assistant-panel__back .assistant-panel__back-arrow { display: none; }
.assistant-panel__badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #fff; border-radius: 8px; background: var(--koper, #d97b3d); color: #fff; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; }
.assistant-history__preferences { display: block; width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border, #dedbd5); border-radius: 10px; background: transparent; color: var(--navy, #17384f); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.assistant-history__empty { margin: 0 0 12px; padding: 0 12px; color: var(--fg-tertiary, #8a8680); font-size: 13.5px; }
.assistant-messages { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; padding: 28px 22px; scrollbar-width: none; }
.assistant-messages::-webkit-scrollbar, #assistantInput::-webkit-scrollbar, .assistant-attachments::-webkit-scrollbar { width: 0; height: 0; }
/* Canvas (build.py Main/Wisselen): starting points sit at the bottom, 8px above
   the composer's own 12px margin. */
.assistant-empty { margin-top: auto; }
.assistant-messages:has(> .assistant-empty) { padding-bottom: 8px; }
.assistant-empty__title { margin: 0 0 12px; color: var(--navy, #17384f); font: 600 17px/1.3 'DM Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.assistant-empty__hint { margin: 0; color: var(--fg-secondary, #555); font-size: 13.5px; }
.assistant-empty__list { display: flex; flex-direction: column; gap: 8px; }
.assistant-empty__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #e8e7e2; border-radius: 10px; background: #fff; color: var(--fg-primary, #1a1a1a); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.assistant-empty__item:hover { border-color: #d6d2cc; background: var(--surface-hover, rgba(0,0,0,.015)); }
.assistant-empty__item svg { fill: none; stroke: var(--fg-tertiary, #8a8680); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
@media (min-width: 1050px) {
  body.assistant-open:not(.page-chat) .main { margin-right: var(--assistant-panel-width); }
  body.assistant-open:not(.page-chat) .cdv2-main,
  body.assistant-open:not(.page-chat) .clw-main { right: var(--assistant-panel-width); }
  body.assistant-open:not(.page-chat) #modal:has(.cand-detail-modal),
  body.assistant-open:not(.page-chat) #modal:has(#tab-cl-info) { right: var(--assistant-panel-width); }
}
body:has(.assistant-root) [data-assistant-entry] { display: none; }
/* De ronde launcher rechtsonder overlapt anders de laatste regel/knoppen van
   de pagina; deze onderpadding geldt zolang #assistantRoot bestaat en niet
   [hidden] is (na login tot aan uitloggen), ongeacht of het paneel zelf open
   of dicht staat. */
body:has(.assistant-root:not([hidden])):not(.page-chat) .content { padding-bottom: 96px; }
body:has(.assistant-root:not([hidden])):not(.page-chat) .cdv2-wrap,
body:has(.assistant-root:not([hidden])):not(.page-chat) .clw-wrap { padding-bottom: 96px; }
.assistant-message { max-width: 88%; margin: 0 0 26px; padding: 12px 15px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.assistant-message--user { margin-left: auto; background: var(--surface-active, #f1efeb); border-bottom-right-radius: 4px; }
.assistant-message--assistant { max-width: 100%; padding: 0; background: transparent; }
.assistant-message__author { display: block; margin-bottom: 8px; color: var(--navy, #17384f); font-size: 12px; font-weight: 650; }
.assistant-progress { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 18px; color: var(--fg-tertiary, #817d76); font-size: 13px; line-height: 1.5; }
.assistant-progress__duration { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.assistant-progress__duration::before { content: '·'; margin-right: 8px; }
.assistant-progress[data-active="true"] > span:first-child { animation: assistant-progress-pulse 1.6s ease-in-out infinite; }
@keyframes assistant-progress-pulse { 50% { opacity: .65; } }
.assistant-message .assistant-progress { margin-bottom: 12px; }
.assistant-panel:has(.assistant-progress[data-active="true"]) .assistant-status[data-busy="true"] { display: none; }
.assistant-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.assistant-steps__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-tertiary, #8a8680); }
.assistant-steps__item[data-state="done"] { color: var(--fg-secondary, #555); }
.assistant-steps__item[data-state="now"] { color: var(--fg-primary, #1a1a1a); }
.assistant-steps__mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.assistant-steps__item[data-state="done"] .assistant-steps__mark { background: #eaf7ee; color: #16a34a; }
.assistant-steps__item[data-state="done"] .assistant-steps__mark svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.assistant-steps__item[data-state="now"] .assistant-steps__mark::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--koper, #d97b3d); animation: assistant-thinking 1.6s ease-in-out infinite; }
.assistant-steps__item[data-state="todo"] .assistant-steps__mark::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #d6d2cc; }
.assistant-panel:has(.assistant-steps) .assistant-status[data-busy="true"] { display: none; }
.assistant-message__body { white-space: normal; }
.assistant-message__body p { margin: 0 0 12px; }
.assistant-message__body > :last-child { margin-bottom: 0; }
.assistant-message__body ul, .assistant-message__body ol { padding-left: 20px; margin: 8px 0 14px; }
.assistant-message__body li { margin: 4px 0; }
.assistant-message__body h2, .assistant-message__body h3, .assistant-message__body h4 { font-size: 14px; margin: 16px 0 8px; }
.assistant-message__body strong { font-weight: 600; }
.assistant-message__body .ai-table { display: block; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.assistant-message--system { max-width: 100%; padding: 8px 10px; color: var(--fg-secondary, #5d5953); background: #f5f3ef; font-size: 12px; }
.assistant-result { color: var(--fg-tertiary, #817d76); font-size: 12px; }
.assistant-draft { margin: 12px 0 24px; padding: 12px 14px; border: 1px solid var(--border, #dedbd5); border-radius: 10px; font-size: 14px; line-height: 1.6; }
.assistant-draft > summary { cursor: pointer; color: var(--navy, #17384f); }
.assistant-draft p { margin: 10px 0 0; }
.assistant-draft__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-change { margin: 2px 0 16px; padding: 12px 14px; border: 1px solid #e8e7e2; border-radius: 12px; background: #fff; }
.assistant-change[data-undone="true"] { opacity: .6; }
.assistant-change__head { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; color: #15803d; font-size: 12.5px; font-weight: 600; }
.assistant-change__head svg { fill: none; stroke: #16a34a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-change__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid #f0efeb; }
.assistant-change__label { padding-top: 1px; color: #687067; font-size: 12.5px; }
.assistant-change__value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.assistant-change__value b { font-weight: 600; overflow-wrap: anywhere; }
.assistant-change__old { color: var(--fg-tertiary, #8a8680); text-decoration-color: #c9c5bf; }
.assistant-change__value svg { fill: none; stroke: #c9c5bf; stroke-width: 1.7; }
.assistant-change__value[data-layout="stacked"] { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; }
.assistant-change__value[data-layout="stacked"] .assistant-change__old { font-size: 12.5px; color: #8a8680; overflow-wrap: anywhere; }
.assistant-change__foot { display: flex; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px solid #f0efeb; }
.assistant-change__link, .assistant-change__undo { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.assistant-change__link { color: #193b50; font-weight: 500; }
.assistant-change__undo { color: var(--fg-tertiary, #8a8680); }
.assistant-change__undo svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-change__undo:disabled { opacity: .5; cursor: default; }
.assistant-change__done { color: var(--fg-tertiary, #8a8680); font-size: 13px; }
.cdv2-root .cdv2-fact--fresh { margin: 2px -10px; padding: 9px 10px; border-radius: 8px; background: #fff3e8; transition: background 1.2s ease; }
.assistant-decision { margin: 12px 0; padding: 11px; border: 1px solid var(--border, #dedbd5); border-radius: 9px; }
.assistant-decision b, .assistant-decision small { display: block; }
.assistant-decision small { margin-top: 3px; color: var(--fg-tertiary, #817d76); }
.assistant-blocked { margin: 2px 0 16px; padding: 13px 14px 14px; border: 1px solid #efe4d8; border-radius: 12px; background: #fcfaf7; }
.assistant-blocked__head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.assistant-blocked__head svg { fill: none; stroke: var(--koper, #d97b3d); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-blocked__body { margin: 6px 0 12px; color: var(--fg-secondary, #555); font-size: 13.5px; line-height: 1.6; }
.assistant-blocked__options { display: flex; flex-direction: column; gap: 8px; }
.assistant-blocked__option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px; border: 1px solid #e8e7e2; border-radius: 10px; background: #fff; color: var(--fg-primary, #1a1a1a); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.assistant-blocked__option span { flex: 1; }
.assistant-blocked__option svg { fill: none; stroke: var(--fg-tertiary, #8a8680); stroke-width: 1.7; }
.assistant-blocked__option[data-primary="true"] { border-color: #193b50; background: #f4f7f9; }
.assistant-blocked__option[data-primary="true"] svg { stroke: #193b50; }
.assistant-decision__answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.assistant-decision__answer textarea { min-height: 44px; padding: 9px 10px; border: 1px solid var(--border, #dedbd5); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.assistant-decision__answer textarea:focus { outline: 2px solid var(--koper, #d07a3a); outline-offset: 1px; }
.assistant-decision__answer button { align-self: end; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--navy, #17384f); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.assistant-controls { display: flex; gap: 6px; margin: 8px 0 12px; }
.assistant-controls button, .assistant-attachment button { padding: 4px 8px; border: 1px solid var(--border, #dedbd5); border-radius: 6px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.assistant-history { flex: 1; min-height: 0; overflow: auto; padding: 14px 10px 10px; }
.assistant-panel:has(#assistantHistory:not([hidden])) .assistant-messages { display: none; }
.assistant-panel:has(#assistantHistory:not([hidden])) #assistantWaiting { display: none; }
.assistant-history__search { box-sizing: border-box; width: 100%; height: 38px; margin: 0 0 14px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: #f5f5f3; font: inherit; font-size: 13.5px; }
.assistant-history__search:focus { outline: 0; border-color: #8fa7b2; background: #fff; }
.assistant-history__group { margin: 0 0 14px; }
.assistant-history__label { padding: 0 12px 6px; color: var(--fg-tertiary, #8a8680); font-size: 12px; font-weight: 600; }
.assistant-history__item { display: flex; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.assistant-history__item:hover { background: #f7f6f3; }
.assistant-history__item[hidden] { display: none; }
.assistant-history__dot { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; flex-shrink: 0; background: #b0aca5; }
.assistant-history__dot[data-tone="koper"] { background: var(--koper, #d97b3d); }
.assistant-history__dot[data-tone="green"] { background: #16a34a; }
.assistant-history__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.assistant-history__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-history__meta { color: #687067; font-size: 12.5px; }
.assistant-history__more { display: block; width: 100%; padding: 10px; border: 0; background: transparent; color: #193b50; font: inherit; font-size: 13px; cursor: pointer; }
.assistant-waiting { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin: 24px 22px 6px; padding: 9px 12px; border: 0; border-radius: 10px; background: #fff3e8; color: var(--fg-primary, #1a1a1a); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
/* Under the "Wacht op jou" row: 6px of fixed room, then scrolled content fades
   in over the 18px top padding (about one line), so a cut-off line never sits
   against the row. Unscrolled content starts 24px below the row and is never
   faded (canvas: 18px; the extra 6px is the fixed room). */
#assistantWaiting + .assistant-messages { padding-top: 18px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); mask-image: linear-gradient(to bottom, transparent, #000 18px); }
.assistant-waiting__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--koper, #d97b3d); flex-shrink: 0; }
.assistant-waiting__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-waiting__text b { font-weight: 600; }
.assistant-waiting svg { fill: none; stroke: #b5612e; stroke-width: 1.7; flex-shrink: 0; }
.assistant-compose { flex-shrink: 0; margin: 12px 16px 16px; padding: 10px 12px; border: 1px solid var(--border, #dedbd5); border-radius: 12px; background: var(--surface, #fff); }
.assistant-compose__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 38px; align-items: end; gap: 7px; }
.assistant-compose__attach, #assistantSend { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-tertiary, #817d76); cursor: pointer; }
#assistantSend { width: 38px; height: 38px; background: var(--navy, #17384f); color: #fff; }
#assistantSend[data-operation="stop"]::before { content: ''; width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
#assistantSend:focus-visible { outline: 2px solid var(--koper, #d07a3a); outline-offset: 3px; }
.assistant-compose__attach svg, #assistantSend svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#assistantInput { box-sizing: border-box; width: 100%; min-width: 0; max-height: 180px; min-height: 38px; resize: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; white-space: pre-wrap; overflow-wrap: anywhere; padding: 9px 2px 7px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1.4; }
/* A long placeholder stays on one line with an ellipsis. Chromium ignores
   text-overflow set on ::placeholder itself, but inherits it from the textarea
   (where it has no effect on typed text: that wraps). While the input has focus
   Chromium always clips the placeholder: a short fade replaces the hard cut. */
#assistantInput { text-overflow: ellipsis; }
#assistantInput::placeholder { color: var(--fg-tertiary, #817d76); white-space: nowrap; overflow: hidden; text-overflow: inherit; }
#assistantInput:focus::placeholder { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.assistant-compose:focus-within { border-color: var(--koper, #d07a3a); box-shadow: 0 0 0 2px rgba(208, 122, 58, .11); }
.assistant-status { min-height: 0; margin: 6px 0 0 41px; color: var(--fg-tertiary, #817d76); font-size: 11px; }
.assistant-status:has(#assistantStatus:empty):has(#assistantRetry[hidden]) { display: none; }
#assistantStatus[data-kind="error"] { color: #a43e32; }
.assistant-status[data-busy="true"]::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--koper, #d07a3a); animation: assistant-thinking 1.6s ease-in-out infinite; }
@keyframes assistant-thinking { 50% { opacity: .3; } }
#assistantRetry { padding: 0; border: 0; background: transparent; color: var(--navy, #17384f); font: inherit; font-weight: 650; cursor: pointer; }
.assistant-attachments { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.assistant-attachment { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; background: var(--surface-active, #f1efeb); color: var(--fg-secondary, #5d5953); font-size: 11px; }
.assistant-attachment button { padding: 1px 4px; border: 0; background: transparent; color: var(--navy, #17384f); font-weight: 650; }
@media (max-width: 1049px) {
  .assistant-root { width: 100vw; }
}
@media (max-width: 640px) {
  .assistant-root { width: 100vw; }
  .assistant-panel { border: 0; }
  .assistant-launcher { right: 16px; bottom: 16px; }
  .assistant-panel__head { min-height: 64px; padding: 10px 8px 10px 16px; }
  .assistant-panel__back .assistant-panel__back-close { display: none; }
  .assistant-panel__back .assistant-panel__back-arrow { display: block; }
  #assistantInput { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .assistant-root *, .assistant-root *::before { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.assistant-preference textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid #e8e6e3;
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
.assistant-preference { margin: 12px 0; }