@media (hover: hover) {
  .chat-naar-beneden:hover {
    transform: translate(-50%, -2px);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
  }
}
.chat-naar-beneden:active { transform: translateX(-50%) scale(.95); }
.chat-naar-beneden[hidden] { display: none; }
.chat-naar-beneden:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.msg .codeblok { min-width: 0; max-width: 100%; margin: 12px 0; border: 1px solid #374151; border-radius: 10px; overflow: hidden; background: #161b22; color: #e6edf3; }
.msg .codeblok-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #374151; background: #21262d; }
.msg .codeblok-type { font: 12px Consolas, monospace; color: #9da7b3; }
.msg .codeblok-acties { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.msg .codeblok-acties button { width: auto; margin: 0; padding: 6px 8px; border: 1px solid #576171; border-radius: 6px; background: transparent; color: #e6edf3; font: inherit; font-size: 12px; cursor: pointer; box-shadow: none; }
.msg .codeblok-acties button:hover { background: #303843; }
.msg .codeblok-acties button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg .codeblok pre { margin: 0; border: 0; border-radius: 0; }
.msg pre {
  min-width: 0;
  max-width: 100%;
  max-height: 420px;
  max-height: min(420px, 60vh);
  overflow: auto;
  overscroll-behavior-x: contain;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #374151;
  border-radius: 10px;
  background: #161b22;
  color: #e6edf3;
  text-align: left;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: #687384 #161b22;
}
.msg pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg pre, .msg pre code {
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.msg pre code { display: block; padding: 0; background: none; color: inherit; }
.msg :not(pre) > code { overflow-wrap: anywhere; }
.msg table { display: block; max-width: 100%; overflow-x: auto; }
.msg pre .hljs-comment, .msg pre .hljs-quote { color: #9da7b3; }
.msg pre .hljs-keyword, .msg pre .hljs-selector-tag, .msg pre .hljs-literal { color: #ff7b72; }
.msg pre .hljs-string, .msg pre .hljs-regexp, .msg pre .hljs-doctag { color: #a5d6ff; }
.msg pre .hljs-number, .msg pre .hljs-attr, .msg pre .hljs-variable { color: #79c0ff; }
.msg pre .hljs-title, .msg pre .hljs-section { color: #d2a8ff; }
.msg pre .hljs-name, .msg pre .hljs-selector-class, .msg pre .hljs-selector-id { color: #7ee787; }
.msg pre .hljs-type, .msg pre .hljs-built_in, .msg pre .hljs-attribute { color: #ffa657; }
.input-row {
  outline: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  margin-top: 10px;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.ai-analyse {
  padding: 8px 16px;
}
.transparent-background {
  background: transparent;
}
.chat-kolom {
  padding-bottom: var(--keyboard-inset, 0px);
  box-sizing: border-box;
}

.round-icon-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-family: inherit;
}
.round-icon-btn:hover:not(:disabled) {
  box-shadow: 0 0 15px var(--accent);
}
.round-icon-btn:disabled {
  cursor: default;
}
.ai-mode-container { position: relative; flex-shrink: 0; }
.ai-mode-btn {
  width: auto;
  padding: 0 10px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ai-mode-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 245px;
  max-width: calc(100vw - 40px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}
.ai-mode-menu button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
}
.ai-mode-menu button span { font-size: 12px; color: var(--muted); }
.ai-mode-menu button[aria-checked="true"] { border-color: var(--accent); }
.ai-mode-menu button:hover:not(:disabled), .ai-mode-menu button:focus-visible { background: var(--bg); }
.ai-mode-menu button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(1);
}
.ai-mode-menu button:disabled[aria-checked="true"] { border-color: transparent; }

.chat-input-flat {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
  padding: 13px 8px 7px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  overflow-y: hidden;
  height: 44px;
  min-height: 44px;
  max-height: 150px;
  line-height: 1.4;
  box-sizing: border-box;
  box-shadow: none;
}
.chat-input-flat:focus, .chat-input-flat:hover {
  border: none;
  box-shadow: none;
}

.sidebar-overlay { display: none; }

.chat-acties-plek {
  position: absolute;
  right: 16px;
  bottom: 8px;
  z-index: 10;
}

.chat-acties-container {
  position: relative;
}

.chat-acties-btn {
  width: auto;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.chat-acties-btn:hover {
  border: none;
}

.chat-acties-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 0 15px var(--accent);
  min-width: 220px;
  overflow: hidden;
  z-index: 20;
}
.chat-acties-menu.open { display: block; }

.chat-actie-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: var(--card);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.chat-actie-item:not(:last-child), .chat-actie-item:not(:last-child):hover { 
  border-bottom: 1px solid var(--border); 
}
.chat-actie-item:hover { 
  background: var(--bg); 
  border: none;
}

.msg-verwijder-btn,
.msg-kopieer-btn {
  width: auto;
  padding: 2px;
  margin: 0;
  background: none;
  border: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.15s ease;
}
.msg-verwijder-btn:hover { border: none; color: var(--error); }
.msg-kopieer-btn:hover { border: none; color: var(--accent); }


.wachtwoord-wrapper {
  position: relative;
}
.wachtwoord-wrapper input {
  padding-right: 42px;
}
.wachtwoord-oog-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: 6px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.wachtwoord-oog-btn:hover {
  border: none;
  color: var(--accent);
}

/* ==========================================================================
   Pagina laden
   ========================================================================== */

.pagina-laadt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.billing-laadscherm[hidden], .billing-overzicht[hidden] { display: none !important; }
.lijst-laadt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}
.lijst-laadt[hidden] { display: none !important; }
.spinner-groot {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes carozo-spin { to { transform: rotate(360deg); } }
.spin-icoon { animation: carozo-spin 0.9s linear infinite; }



/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 650px) {

  .app-layout { position: relative; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-radius: 0;
    margin-right: 0;
    height: calc(var(--echte-vh, 100dvh));
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: 240px; padding: 12px; }
  .sidebar.collapsed .nav-label { display: block; }
  .sidebar.collapsed .sidebar-divider,
  .sidebar.collapsed .sidebar-list { display: block !important; }
  .sidebar.collapsed .toggle-switch-label { display: flex !important; }
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .account-trigger { justify-content: flex-start; }
  .sidebar.collapsed .account-trigger { padding: 8px; }
  .sidebar.collapsed .account-copy { display: flex; }
  .collapse-btn { display: none; }
  .sidebar-collapse-footer { display: none; }
  .sidebar.collapsed .account-menu {
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    width: auto;
  }
  .sidebar.collapsed #settingsSidebarContent > .sidebar-nav { margin-bottom: 0; }
  .mobile-only {
    display: flex;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
  }
  .mobile-only:hover {
    border: none;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100dvh;
    background: rgba(0,0,0,0.5);
    z-index: 99;
  }
  .sidebar-overlay.active { display: block; }
  body.app-shell { padding: 0; height: 100dvh; }
  .main-area { 
    width: 100%; 
    padding: 0; 
    height: calc(var(--echte-vh, 100dvh)); 
    overflow: hidden;
  }
  #pageContent {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
    border: var(--accent);
    border-radius: 0;
  }
  .settings-page { padding: 14px; }
  .settings-preference-row { align-items: stretch; flex-direction: column; gap: 12px; }
  .settings-select { width: 100%; }
  .billing-plans-grid { grid-template-columns: 1fr; }
  .billing-overzicht .settings-card { padding: 18px; }
  .billing-heading { align-items: flex-start; }
  .billing-heading-acties { width: 100%; margin-left: 0; justify-content: flex-start; }
  .billing-heading-acties .billing-naar-kosten { flex: 1; }
  .billing-kolomkop { display: none; }
  .billing-monteur { align-items: center; flex-direction: row; gap: 10px; }
  .billing-persoon { flex: 1 1 45%; }
  .billing-pakket-label { align-self: center; width: max-content; }
  .billing-pakket-keuze { width: max-content; max-width: 60%; }
  .billing-pakket-menu { width: min(230px, calc(100vw - 48px)); max-width: none; }
  .billing-pakket-keuze summary { margin-left: auto; }
  .billing-verder, .billing-acties { flex-wrap: nowrap; }
  .billing-open-checkout-acties { flex-direction: column; }
  .billing-open-checkout-acties button { width: 100%; }
  .billing-overzicht .billing-verder .billing-naar-kosten,
  .billing-overzicht .billing-acties .submitBtn { flex: 1; min-width: 0; }
  .billing-factuurregel { gap: 12px; }
  .billing-beheerkaart .submitBtn { width: 100%; }
  .billing-statuskaart .settings-secondary { width: 100%; }
  .team-invite-row { flex-direction: column; }
  .team-invite-row .submitBtn { width: 100% !important; }
  .team-member-card, .team-invitation-card { gap: 12px; }
  .team-actions button { min-height: 44px; }
  .team-actions .delete-btn { min-width: 44px; }
  .global-topbar { 
    padding: 5px 10px 5px 10px; 
    margin: 0; 
  }
  .meta { padding: 8px 16px; }
  .messages { border-radius: 0; box-shadow: none; }
  .messages-glow {
    display: block;
    border-radius: 0;
    box-shadow:
      inset 0 15px 15px -15px var(--accent),
      inset 0 -15px 15px -15px var(--accent);
  }
  .input-row { margin: 6px 12px 12px; }
  .tools { border-radius: 0; }
  .plan-card { border-radius: 0; }
  .settings-page .tools,
  .settings-page .plan-card { border-radius: 12px; }
}
@media (max-width: 420px) {
  .billing-overzicht .billing-heading-acties .settings-secondary,
  .billing-overzicht .billing-annuleren,
  .billing-overzicht .billing-naar-kosten,
  .billing-overzicht .billing-acties .submitBtn { padding-right: 10px; padding-left: 10px; font-size: 12px; }
  .billing-verder, .billing-acties, .billing-heading-acties { gap: 8px; }
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

.spinner-licht {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--opposite-text) 30%, transparent);
  border-top-color: var(--opposite-text);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

/* ==========================================================================
   Animaties
   ========================================================================== */

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInChunk {
  from { opacity: 0; }
  to { opacity: 1; }
}
.chunk-fade {
  animation: fadeInChunk 0.4s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Zoekbalk in de topbalk
   ========================================================================== */

.global-topbar { position: relative; z-index: 20; --zoek-boven: 0px; --zoek-onder: 10px; --zoek-rechts: max(20px, calc((100% - 1000px) / 2 + 20px)); --zoek-links: max(20px, calc((100% - 1000px) / 2 + 20px)); }
#topbarContent { transition: opacity 0.2s ease; }
.global-topbar.zoek-open #topbarContent { opacity: 0; pointer-events: none; }

.topbar-zoek {
  position: absolute;
  top: var(--zoek-boven);
  bottom: var(--zoek-onder);
  left: var(--zoek-links);
  right: var(--zoek-rechts);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.topbar-zoek[hidden] { display: none; }

.zoek-veld {
  position: relative;
  width: 118px;
  height: 42px;
  max-width: 100%;
  pointer-events: auto;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-zoek.open .zoek-veld { width: 100%; }

.zoek-balk {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  color: var(--text);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.zoek-balk:hover { border-color: var(--accent); }
.topbar-zoek.open .zoek-balk {
  background: var(--bg);
  border-color: var(--control-border);
  color: var(--text);
  box-shadow: 0 0 20px var(--bg);
}
.topbar-zoek.open .zoek-balk:hover,
.topbar-zoek.open .zoek-balk:focus-within { border-color: var(--accent); box-shadow: none; }
.zoek-icoon { flex-shrink: 0; transition: color 0.25s ease; }
.topbar-zoek.open .zoek-icoon { color: var(--accent); }
.zoek-label {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  transition: max-width 0.2s ease, opacity 0.15s ease;
}
.topbar-zoek.open .zoek-label { max-width: 0; opacity: 0; }

#topbarZoek .zoek-input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.08s;
}
#topbarZoek .zoek-input:focus { border: 0; box-shadow: none; outline: none; }
#topbarZoek .zoek-input::placeholder { color: var(--muted); }
#topbarZoek.open .zoek-input { opacity: 1; pointer-events: auto; }
#topbarZoek:not(.open) .zoek-input { width: 0; flex: 0 0 0; }

#topbarZoek .zoek-wis {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
}
#topbarZoek .zoek-wis[hidden] { display: none; }
#topbarZoek .zoek-wis:hover { border: 0; color: var(--text); background: var(--bg); }

/* Onzichtbare knop over de dichte balk heen: één grote klikzone */
#topbarZoek .zoek-knop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
#topbarZoek .zoek-knop:hover { border: 0; }
#topbarZoek .zoek-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar-zoek.open .zoek-knop { display: none; }

.zoek-resultaten {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: min(70vh, calc(var(--echte-vh, 100dvh) - 100px));
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 0 15px var(--accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.zoek-resultaten.zichtbaar { opacity: 1; visibility: visible; transform: translateY(0); }

.zoek-sectie {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.zoek-resultaten a.zoek-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.zoek-resultaten a.zoek-item.actief,
.zoek-resultaten a.zoek-item:hover {
  background: var(--bg);
  border-color: var(--accent);
}
.zoek-item-icoon { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.zoek-item-tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zoek-item-titel { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek-item-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek-resultaten mark { background: transparent; color: var(--accent); }

.zoek-voertuig { margin-top: 4px; }
.zoek-voertuigkop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 2px;
  font-size: 13px;
  font-weight: 600;
}
.zoek-voertuigtitel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek-voertuigaantal { font-size: 12px; font-weight: 400; color: var(--muted); }
.zoek-resultaten a.zoek-chat { margin-left: 32px; padding: 7px 10px; }
.zoek-chat .zoek-item-titel { font-weight: 500; }
.zoek-meer { margin: 2px 0 0 42px; padding: 2px 10px 4px; font-size: 12px; color: var(--muted); }
.zoek-leeg { padding: 14px 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 650px) {
  .global-topbar { --zoek-boven: 5px; --zoek-onder: 5px; --zoek-rechts: 10px; --zoek-links: 56px; }
  .zoek-veld { width: 42px; }
  .zoek-label { display: none; }
  .zoek-balk { padding: 0 11px; }
  .topbar-zoek.open .zoek-balk { padding: 0 8px 0 11px; }
}

/* ==========================================================================
   Diagonale reveal (zoekresultaten op de startpagina)
   ========================================================================== */

@keyframes diagonaalReveal {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  to   { -webkit-mask-position: 0% 0%;     mask-position: 0% 0%; }
}
.diagonaal-reveal {
  -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 42%, transparent 58%, transparent 100%);
  mask-image: linear-gradient(135deg, #000 0%, #000 42%, transparent 58%, transparent 100%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: diagonaalReveal 1.1s cubic-bezier(0.45, 0.1, 0.55, 0.9);
}

/* ==========================================================================
   Bestandsvoorbeelden (foto's en pdf's) en het grote scherm
   ========================================================================== */

button.bestand-voorbeeld {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: zoom-in;
  box-shadow: none;
  font-weight: 400;
}
button.bestand-voorbeeld:hover { border-color: var(--accent); }
button.bestand-voorbeeld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bestand-voorbeeld-plek { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bestand-voorbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* In de bestandenlijst: klein vierkant */
button.bestand-voorbeeld-lijst { width: 56px; height: 56px; flex-shrink: 0; }

/* In het gesprek: klein, links naast de tekst (bubbel met twee kolommen) */
.msg.msg-met-voorbeeld {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.msg-met-voorbeeld > * { grid-column: 2; min-width: 0; }
.msg-met-voorbeeld > button.bestand-voorbeeld-chat { grid-column: 1; grid-row: 1 / span 10; }
button.bestand-voorbeeld-chat {
  width: 88px;
  min-height: 60px;
  margin: 2px 0 0;
  text-align: left;
}
button.bestand-voorbeeld-chat[data-type="pdf"] { width: 68px; }
button.bestand-voorbeeld-chat .bestand-voorbeeld-plek { min-height: 60px; }
button.bestand-voorbeeld-chat.geladen .bestand-voorbeeld-plek { min-height: 0; display: block; }
button.bestand-voorbeeld-chat img { height: auto; max-height: 120px; }

.bestand-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--opposite-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Groot scherm */
.bestand-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}
.bestand-viewer {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(92dvh, 100%);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 0 20px var(--accent);
}
.bestand-viewer-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.bestand-viewer-kop h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.bestand-viewer-acties { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bestand-viewer-acties button {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
}
.bestand-viewer-acties button:hover { border-color: var(--accent); }
.bestand-viewer-acties .bestand-viewer-sluit {
  padding: 2px 10px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--muted);
}
.bestand-viewer-inhoud {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--bg);
  text-align: center;
}
.bestand-viewer-foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.bestand-viewer-pagina {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.bestand-viewer-status { padding: 24px 8px; font-size: 13px; color: var(--muted); }
.bestand-viewer-status.fout { color: var(--error); }

@media (max-width: 650px) {
  .bestand-viewer-overlay { padding: 0; }
  .bestand-viewer { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .bestand-viewer-inhoud { padding: 8px; }
  .bestand-viewer-acties button:not(.bestand-viewer-sluit) { padding: 6px 8px; font-size: 12px; }
}

/* Bestandsnaam in de bestandenlijst: klikbare tekst die het bestand in Carozo opent */
button.bestand-naam-link {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
button.bestand-naam-link:hover { border: 0; color: var(--accent); text-decoration: underline; }
button.bestand-naam-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Statusregel naast de drie puntjes tijdens het wachten op de AI */
.ai-wacht { display: flex; align-items: center; gap: 10px; }
.ai-status-regel {
  font-size: 13px;
  color: var(--muted);
  animation: aiStatusIn 0.25s ease both;
}
@keyframes aiStatusIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* Opslaan-knop in popups (accentkleur, want .popup-bevestigen is de rode verwijderknop) */
.popup-opslaan,
.popup-overdragen {
  background: var(--accent);
  color: var(--opposite-text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.popup-opslaan:hover:not(:disabled), .popup-opslaan:focus-visible, .popup-opslaan:active:not(:disabled),
.popup-overdragen:hover:not(:disabled), .popup-overdragen:focus-visible, .popup-overdragen:active:not(:disabled) { box-shadow: 0 0 15px var(--accent); }
.popup-opslaan:disabled,
.popup-overdragen:disabled { opacity: 0.5; cursor: default; box-shadow: none; }


/* Instellingen: formulieren */
.settings-form { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.bedrijf-settings .settings-form { box-shadow: none; }
.settings-form-veld { display: flex; flex-direction: column; gap: 6px; }
.settings-form-veld > label { color: var(--muted); font-size: 12px; font-weight: 500; }
.settings-form-veld input { width: 100%; box-sizing: border-box; }
.settings-form-hint { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-form-acties { display: flex; justify-content: flex-start; }
.settings-save {
  width: auto; margin: 0; padding: 10px 22px; border-radius: 8px;
  background: var(--accent); color: var(--opposite-text); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.settings-save:hover:not(:disabled), .settings-save:focus-visible, .settings-save:active:not(:disabled) { box-shadow: 0 0 15px var(--accent); }
.settings-save:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.settings-secondary {
  width: auto; margin: 0; padding: 10px 18px; border-radius: 8px;
  background: var(--bg); color: var(--text); border: 1px solid var(--accent); font-size: 14px; font-weight: 500; cursor: pointer;
}
.settings-secondary:hover { box-shadow: 0 0 15px var(--accent); }
.settings-secondary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.collegas-settings .settings-card { box-shadow: none; }
.collegas-settings > .settings-card + .settings-card { margin-top: 16px; }
.collega-section-heading h2 { margin: 0 0 4px; font-size: 17px; line-height: 1.35; }
.collega-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.collega-invite-card form { display: flex; flex-direction: column; gap: 16px; }
.collega-invite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.collega-invite-grid .settings-form-veld:last-child { grid-column: 1 / -1; }
.collega-invite-grid input, .collega-invite-grid select { width: 100%; box-sizing: border-box; }
.collega-invite-grid .settings-form-veld > label,
.collega-invite-grid .collega-pakket-veldlabel { margin: 0; }
.collega-pakket-veldlabel { color: var(--muted); font-size: 12px; font-weight: 500; }
.collega-pakket-keuze { width: 100%; max-width: none; }
.collega-pakket-keuze summary { width: 100%; justify-content: space-between; }
.collega-pakket-keuze .billing-pakket-tekst { flex: 1 1 auto; justify-content: space-between; }
.collega-pakket-keuze .billing-pakket-menu { width: 100%; max-width: none; }
.collega-pakket-keuze .billing-pakket-prijs { color: var(--muted); font-weight: 500; }
.collegas-settings #monteurZoeken {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font: inherit;
}
.collegas-settings #monteurZoeken:focus { outline: none; border-color: var(--accent); }
.collegas-settings .team-groep { margin-top: 2px; }
.collegas-settings .team-groep + .team-groep { padding-top: 16px; border-top: 1px solid var(--border); }
.collegas-settings .team-card { box-shadow: none; background: var(--bg); }
.collegas-settings .team-invitation-card + .team-invitation-card { margin-top: 8px; }
.collegas-settings .team-invitation-email strong, .collegas-settings .team-invitation-email small { display: block; }
.collegas-settings .team-invitation-email strong { font-weight: 600; }
.collegas-settings .team-invitation-email small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.collega-pakket-badge { padding: 5px 10px; border: 1px solid var(--accent); border-radius: 7px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--card)); font-size: 12px; white-space: nowrap; }
.collega-resultaat { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; line-height: 1.5; }
.collega-resultaat:empty { display: none; }
.collega-resultaat.succes { color: var(--success); }
.collega-resultaat.fout { color: var(--error); }
.collegas-settings .team-actions .settings-secondary { padding: 7px 12px; font-size: 12px; }
.collegas-settings .team-actions .team-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #a51d2b;
  border-radius: 8px;
  background: #b42332;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.collegas-settings .team-actions .delete-btn { min-width: 34px; padding: 7px; }
.collegas-settings .team-actions .team-danger-btn:hover:not(:disabled) {
  border-color: #8f1724;
  background: #991b2b;
  box-shadow: 0 0 0 3px rgba(180, 35, 50, .14);
}
.collegas-settings .team-actions .team-danger-btn:focus-visible {
  outline: 3px solid rgba(180, 35, 50, .35);
  outline-offset: 2px;
}
.collegas-settings .team-actions .team-danger-btn:disabled {
  border-color: #a51d2b;
  background: #b42332;
  color: #fff;
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .collegas-settings .team-actions .team-danger-btn { min-height: 44px; }
  .collegas-settings .team-actions .delete-btn { min-width: 44px; }
  .collega-invite-grid { grid-template-columns: 1fr; }
  .collega-invite-grid .settings-form-veld:last-child { grid-column: auto; }
  .collega-invite-card .settings-save { width: 100%; }
}
.settings-preference-rij { border-top: 1px solid var(--border); padding-top: 16px; }

/* Diagnose en import gebruiken dezelfde themakleuren als de rest van de app. */
.visueel-verborgen { display: none; }
.diagnose-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.diagnose-label-vervolg { margin-top: 16px; }
.diagnose-veld { width: 100%; padding: 10px 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
textarea.diagnose-veld { resize: vertical; }
.diagnose-dropzone, .import-dropzone {
  margin-top: 8px; padding: 32px 16px; border: 2px dashed var(--border);
  border-radius: 10px; background: var(--bg); text-align: center; cursor: pointer;
}
.diagnose-dropzone { box-shadow: 0 0 15px var(--bg); }
.import-dropzone { box-shadow: none; }
.import-dropzone.is-dragover { border-color: var(--accent); }
.diagnose-dropzone-icoon, .import-dropzone-icoon { display: flex; justify-content: center; color: var(--muted); }
.diagnose-dropzone-tekst, .import-dropzone-tekst { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.diagnose-bestandsnamen, .import-bestandsnaam { margin-top: 12px; font-size: 14px; }
.diagnose-analyse-label { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--muted); font-size: 15px; cursor: pointer; }
.diagnose-analyse-label.is-beperkt { opacity: .5; }
.diagnose-analyse-label input { flex-shrink: 0; width: 25px; height: 25px; margin: 0; border-color: var(--border); }
.diagnose-limiet-tekst { color: var(--error); }
.diagnose-status { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.diagnose-status[hidden], .import-lijst-kaart[hidden], .imp-fout[hidden] { display: none !important; }
.diagnose-bestandsrij { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin-top: 6px; }
.diagnose-bestandsnaam { overflow-wrap: anywhere; }
.diagnose-bestand-verwijderen { width: auto; flex-shrink: 0; margin: 0; padding: 4px 10px; }

.import-paperclip { vertical-align: -2px; margin-right: 2px; }
.import-dropzone-icoon .import-paperclip { width: 28px; height: 28px; margin-right: 0; }
.import-settings-card { margin-bottom: 16px; }
.import-intro, .import-hint { margin: 0; color: var(--muted); }
.import-intro { font-size: 14px; }
.import-hint { font-size: 13px; }
.import-uitleg { color: var(--muted); font-size: 13px; }
.import-uitleg summary { color: var(--accent); cursor: pointer; }
.import-uitleg ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.import-uitleg a { color: var(--accent); }
.import-status { margin-top: 4px; color: var(--muted); font-size: 13px; text-align: center; }
.import-status.is-fout { color: var(--error); }
.import-filterrij, .import-selectie-acties, .import-rij-velden { display: flex; flex-wrap: wrap; gap: 8px; }
.import-filterrij { align-items: center; }
.import-kenteken-filter { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.import-invoer { padding: 8px 10px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.import-zoekveld { flex: 1; min-width: 180px; background: var(--bg); }
.import-selectie-knop { background: var(--bg); color: var(--text); }
.import-rijen { display: flex; flex-direction: column; gap: 10px; }
.import-rij { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg); }
.import-rij.is-klaar { opacity: .6; }
.import-rij .imp-vink { flex-shrink: 0; margin-top: 2px; }
.import-rij-inhoud { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.import-rij-meta { color: var(--muted); font-size: 12px; }
.imp-status { margin-left: 6px; }
.imp-status.is-klaar { color: var(--accent); }
.imp-status.is-fout, .imp-fout { color: var(--error); }
.import-rij-velden { gap: 6px; }
.imp-kenteken { width: 120px; }
.imp-model { flex: 1; min-width: 150px; }
.imp-probleem { width: 100%; resize: vertical; }
.imp-fout { font-size: 12px; }
.import-balk {
  position: sticky; bottom: 14px; z-index: 5; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px; background: var(--card); box-shadow: 0 -8px 16px var(--bg);
}
.import-balk-info { flex: 1 1 200px; min-width: 0; }
#importTeller { color: var(--text); font-size: 13px; }
#importVoortgang { color: var(--muted); font-size: 12px; }
.import-start, .import-start:disabled { width: auto; margin: 0; padding: 10px 20px; white-space: nowrap; }

/* Chatlijst, berichten en de bewerkvensters. */
.chats-filterrij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.chats-zoekveld { flex: 1; min-width: 160px; padding: 8px 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.chats-probleem-zoekveld { transition: flex-grow .25s ease; }
.chats-slim-zoeken { display: none; width: auto; align-items: center; gap: 6px; color: var(--opposite-text); white-space: nowrap; }
.chats-filter-extra { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.chats-monteur-filter { position: relative; flex: 0 0 auto; width: 160px; }
.chats-monteur-filter .chats-zoekveld { width: 100%; }
.chats-monteur-menu, #overdraagLijst {
  display: none; position: absolute; left: 0; right: 0; z-index: 50;
  overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); box-shadow: 0 0 15px var(--accent);
}
.chats-monteur-menu { top: 100%; max-height: 220px; margin-top: 4px; }
.chats-monteur-menu .monteur-optie {
  display: block; width: 100%; margin: 0; padding: 9px 12px;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 400; text-align: left; box-shadow: none;
}
.chats-monteur-menu .monteur-optie:hover,
.chats-monteur-menu .monteur-optie:focus-visible,
.chats-monteur-menu .monteur-optie[aria-selected="true"] {
  border: 0; background: var(--bg); color: var(--text); box-shadow: none;
}
.chats-monteur-menu .monteur-optie:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chats-slim-status { display: none; flex-basis: 100%; color: var(--muted); font-size: 13px; }
.chats-menu-leeg, .chat-overdragen-leeg { padding: 8px 12px; color: var(--muted); font-size: 13px; }
.chats-lijst-melding { color: var(--muted); }
.chats-lijst-leeg { padding: 40px 0; text-align: center; }
.chats-kaart { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chats-kaart-link { display: block; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.chats-kaart .chat-title { margin-bottom: 4px; color: var(--text); font-size: 14px; font-weight: 600; }
.chats-kaart .chat-probleem { display: -webkit-box; overflow: hidden; margin-bottom: 2px; color: var(--muted); font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chats-kaart .chat-meta { color: var(--muted); font-size: 12px; }
.chats-kaart-acties { display: flex; flex-shrink: 0; gap: 6px; }
.chats-kaart-bewerken { display: flex; padding: 6px; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.chats-kaart-verwijderen { display: flex; padding: 6px; border: 1px solid var(--dark-danger); border-radius: 6px; background: var(--danger); color: var(--muted); cursor: pointer; }

.chat-scherm { display: flex; flex-direction: column; height: 100%; }
.chat-berichten-gebied { position: relative; flex: 1; min-height: 0; }
.chat-bijlage-status { color: var(--muted); font-size: 13px; }
.chat-bijlage-knop { border: 0; background: var(--card); color: var(--text); box-shadow: none; }
.chat-verstuur-knop { border: 0; background: var(--accent); }
.chat-meta-kop { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.chat-bestanden-knop { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; width: auto; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
.chat-bewerk-knop { display: none; flex-shrink: 0; width: auto; margin-left: 8px; padding: 6px; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.messages .msg { padding: 14px 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--card); font-size: 14px; line-height: 1.6; max-width: 90%; overflow-wrap: break-word; word-break: break-word; z-index: 0; }
.messages .msg.user { align-self: flex-end; color: var(--text); box-shadow: 0 0 15px var(--accent); }
.messages .msg.assistant { align-self: flex-start; box-shadow: 0 0 15px var(--muted); }
.chat-bestand-openen { width: auto; margin: 10px 0 0; padding: 8px 14px; font-size: 13px; }
.bericht-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.bericht-meta-acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bericht-meta-bewerken { margin-left: auto; }
.chat-bestanden-leeg { color: var(--muted); font-size: 13px; }
.chat-bestand-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
.chat-bestand-gegevens { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bestand-voorbeeld-plek-lijst { flex-shrink: 0; }
.chat-bestand-omschrijving { min-width: 0; }
.chat-bestand-meta { color: var(--muted); font-size: 11px; }
.chat-bestand-acties { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }
.chat-bestand-menu-knop { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font-size: 23px; line-height: 1; cursor: pointer; }
.chat-bestand-menu-knop:hover, .chat-bestand-menu-knop:focus-visible { background: var(--bg); border-color: var(--border); box-shadow: none; }
.chat-bestand-menu { position: fixed; z-index: 1050; min-width: 180px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); box-shadow: 0 10px 26px #0003; }
.chat-bestand-menu[hidden] { display: none; }
.chat-bestand-menu button { display: block; width: 100%; padding: 8px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.chat-bestand-menu button:hover, .chat-bestand-menu button:focus-visible { background: var(--bg); border: 0; box-shadow: none; }
.chat-bestand-menu-scheider { height: 1px; margin: 5px 3px; background: var(--border); }
.chat-bestand-menu button.chat-bestand-menu-verwijderen { color: var(--error); }
.chat-dialoog-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.chat-dialoog { width: 100%; max-width: 460px; overflow-y: auto; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 0 20px var(--accent); }
.chat-bestanden-dialoog { max-height: 70vh; }
.chat-bewerk-dialoog { max-height: 90vh; }
.chat-dialoog-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.chat-dialoog-kop h2 { margin: 0; font-size: 16px; }
.chat-dialoog-sluiten { flex-shrink: 0; width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.chat-bewerk-bestand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 14px; }
#bewerkBestandNaam { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
#bewerkBestandNaam.is-verwijderd { color: var(--muted); text-decoration: line-through; }
#bewerkBestandKnop { flex-shrink: 0; width: auto; margin: 0; padding: 4px 10px; border: 1px solid var(--dark-danger); border-radius: 6px; background: var(--danger); color: var(--danger-text); font-size: 12px; cursor: pointer; }
#bewerkBestandKnop.is-ongedaan { border-color: var(--border); background: var(--bg); color: var(--text); }
#bewerkBestandHint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.chat-overdragen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.chat-overdragen h3 { margin: 0 0 6px; font-size: 14px; }
.chat-overdragen p:not([role="alert"]) { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-overdragen-rij { display: flex; align-items: flex-start; gap: 8px; }
.chat-overdragen-zoek { position: relative; flex: 1 1 0; min-width: 0; }
#overdraagLijst { bottom: 100%; max-height: 180px; margin-bottom: 4px; z-index: 5; }
#overdraagKnop { flex: 0 0 auto; width: auto; margin: 0; padding: 10px 16px; white-space: nowrap; }
#overdraagFout { margin: 8px 0 0; color: var(--error); font-size: 13px; }
#bewerkFout { margin: 12px 0 0; color: var(--error); font-size: 13px; }
.chat-bewerk-acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.overdraag-optie { width: 100%; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; font-size: 13px; font-weight: 400; cursor: pointer; }
.overdraag-optie:hover { background: var(--bg); }
@media (max-width: 700px) {
  .settings-preference-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .settings-save, .settings-secondary { width: 100%; }
}

/* Gedeelde bedrijfskennis */
.kennisbank-page { max-width: 980px; padding-bottom: 30px; }
.kennisbank-page .settings-card { padding: 20px 22px; }
.kennisbank-page h2 { margin: 0; font-size: 16px; }
.kennisbank-page [hidden] { display: none !important; }
.kennisbank-werkbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.kennisbank-kruimels { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; font-size: 13px; color: var(--muted); }
.kennisbank-kruimels button { width: auto; max-width: 220px; padding: 4px 2px; border: 1px solid transparent; background: transparent; color: var(--accent); font: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.kennisbank-kruimels button[aria-current="page"] { color: var(--text); font-weight: 600; cursor: default; }
.kennisbank-kruimels button:hover:not([aria-current="page"]) { text-decoration: underline; }
.kennisbank-werkbalk-acties { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kennisbank-werkbalk-acties button { white-space: nowrap; }
.kennisbank-nieuw-groep { position: relative; flex: 0 0 auto; }
.kennisbank-upload-groep { position: relative; flex: 0 0 auto; }
.kennisbank-weergave-groep { position: relative; flex: 0 0 auto; }
.kennisbank-werkbalk-acties button.kennisbank-werkbalk-icoon { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; padding: 0; flex: 0 0 40px; }
.kennisbank-werkbalk-icoon svg { display: block; width: 19px; height: 19px; }
.kennisbank-werkbalk-acties .kennisbank-werkbalk-verwijderen:not(:disabled):hover,
.kennisbank-werkbalk-acties .kennisbank-werkbalk-verwijderen:not(:disabled):focus-visible { border-color: var(--error); color: var(--error); box-shadow: 0 0 15px var(--dark-danger); }
.kennisbank-zoekveld { box-sizing: border-box; display: flex; align-items: center; flex: 0 1 220px; width: 220px; min-width: 150px; height: 40px; margin-left: 6px; padding: 4px 5px 4px 11px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); }
.kennisbank-zoekveld:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.kennisbank-zoekveld input.kennisbank-werkbalk-zoeken { box-sizing: border-box; flex: 1 1 auto; align-self: center; width: 0; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 28px; box-shadow: none; }
.kennisbank-zoekveld input.kennisbank-werkbalk-zoeken:hover,
.kennisbank-zoekveld input.kennisbank-werkbalk-zoeken:focus { border: 0; border-radius: 0; outline: 0; box-shadow: none; }
.kennisbank-werkbalk-acties .kennisbank-zoek-wis { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.kennisbank-werkbalk-acties .kennisbank-zoek-wis:hover { border: 0; background: var(--card); color: var(--text); box-shadow: none; }
.kennisbank-werkbalk-acties .kennisbank-zoek-wis:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kennisbank-nieuw-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 190px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); box-shadow: 0 10px 26px #0002; }
.kennisbank-upload-menu { width: 235px; }
.kennisbank-nieuw-menu button { display: block; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.kennisbank-nieuw-menu button:hover, .kennisbank-nieuw-menu button:focus-visible { background: var(--bg); border: 0; box-shadow: none; }
.kennisbank-nieuw-menu button[aria-checked="true"] { background: var(--bg); color: var(--accent); font-weight: 600; }
.kennisbank-naam-form { margin: 16px 0; padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.kennisbank-naam-form label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.kennisbank-naam-velden { display: flex; align-items: center; gap: 8px; }
.kennisbank-naam-velden input { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
.kennisbank-naam-velden input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kennisbank-naam-velden > span { font-size: 13px; color: var(--muted); }
.kennisbank-page .kennisbank-upload-status { margin: 12px 0 16px; color: var(--text); font-size: 13px; }
.kennisbank-inhoud-kop { display: flex; align-items: baseline; gap: 9px; padding: 10px 0 12px; }
.kennisbank-inhoud-kop > span { color: var(--muted); font-size: 12px; }
.kennisbank-items { margin: 0; padding: 0; list-style: none; }
.kennisbank-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; }
.kennisbank-item-hoofd { display: flex; align-items: center; gap: 12px; min-width: 0; width: auto; flex: 1 1 auto; padding: 4px 0; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
button.kennisbank-item-hoofd { cursor: pointer; }
button.kennisbank-item-hoofd:hover { border: 0; background: transparent; box-shadow: none; }
button.kennisbank-item-hoofd:hover .kennisbank-item-naam { color: var(--text); text-decoration: none; }
.kennisbank-item-icoon { width: 23px; height: 23px; flex: 0 0 auto; color: var(--accent); }
.kennisbank-item-naam { overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.kennisbank-bestand-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; font-size: 13px; }
.kennisbank-bestand-info strong { overflow-wrap: anywhere; font-weight: 600; }
.kennisbank-bestand-info > span:not(.kennisbank-status):not(.kennisbank-fout) { color: var(--muted); font-size: 12px; }
.kennisbank-status { width: fit-content; color: var(--muted); font-size: 12px; }
.kennisbank-status-klaar { color: var(--success); }
.kennisbank-status-mislukt, .kennisbank-fout { color: var(--error); }
.kennisbank-item-acties { display: flex; align-items: center; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kennisbank-item-acties button { width: auto; margin: 0; padding: 7px 10px; font-size: 12px; }
.kennisbank-verwijderen { border: 1px solid var(--dark-danger); border-radius: 8px; background: var(--danger); color: var(--danger-text); font: inherit; cursor: pointer; }
.kennisbank-verwijderen:hover:not(:disabled), .kennisbank-verwijderen:focus-visible { box-shadow: 0 0 15px var(--dark-danger); }
.kennisbank-verwijderen:disabled { opacity: .5; cursor: default; }
/* De algemene button:hover-rand is blauw; verwijderacties houden een rode rand. */
button:is(.popup-bevestigen, .delete-btn, .team-danger-btn, .kennisbank-verwijderen, .chats-kaart-verwijderen, .diagnose-bestand-verwijderen):is(:hover, :focus-visible):not(:disabled),
button#bewerkBestandKnop:not(.is-ongedaan):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--error);
  box-shadow: 0 0 15px var(--dark-danger);
}
.kennisbank-page .kennisbank-leeg, .kennisbank-page .kennisbank-fout { margin: 0; padding: 13px 0 16px; font-size: 13px; }
.kennisbank-dialoog { width: min(440px, calc(100% - 30px)); padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); box-shadow: 0 14px 40px #0004; }
.kennisbank-dialoog::backdrop { background: #0008; }
.kennisbank-dialoog h2 { margin: 0 0 8px; }
.kennisbank-dialoog p { margin: 0 0 18px; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.kennisbank-dialoog label { display: block; margin-bottom: 6px; font-size: 13px; }
.kennisbank-dialoog select { width: 100%; }
.kennisbank-dialoog-acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.kennisbank-conflict-dialoog { width: min(560px, calc(100% - 30px)); }
.kennisbank-conflict-dialoog .kennisbank-conflict-alle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.kennisbank-conflict-alle input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent); }
.kennisbank-conflict-dialoog .kennisbank-dialoog-acties { flex-wrap: wrap; }
.kennisbank-conflict-dialoog .kennisbank-dialoog-acties button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .kennisbank-werkbalk, .kennisbank-item { align-items: stretch; flex-direction: column; }
  .kennisbank-werkbalk-acties { justify-content: flex-end; }
  .kennisbank-item-acties { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .kennisbank-page .settings-card { padding: 18px; }
  .kennisbank-werkbalk-acties, .kennisbank-naam-velden { flex-wrap: wrap; }
  .kennisbank-werkbalk-acties button { flex: 1 1 auto; }
  .kennisbank-item-acties button { flex: 1 1 auto; }
  .kennisbank-naam-velden input { flex-basis: 100%; }
}

/* Bestandenverkenner */
.app-shell.bestanden-scherm { padding: 0; }
.bestanden-scherm .app-layout { max-width: none; }
.bestanden-scherm .sidebar { height: var(--echte-vh, 100dvh); margin-right: 0; border-radius: 0; }
.bestanden-scherm .main-area { height: var(--echte-vh, 100dvh); }
.bestanden-scherm #pageContent { max-width: none; margin: 0; padding: 20px 24px; }
.bestanden-scherm .kennisbank-page { max-width: none; margin: 0; }
.kennisbank-page { max-width: 1240px; }
.kennisbank-werkbalk { flex-wrap: wrap; }
.kennisbank-navigatie { display: flex; align-items: center; min-width: 0; gap: 7px; }
.kennisbank-navknop { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
.kennisbank-navknop:hover { background: var(--card); }
.kennisbank-navknop:disabled { opacity: .4; cursor: default; }
.kennisbank-navknop:disabled:hover { background: var(--bg); border-color: var(--border); box-shadow: none; }
.kennisbank-verkenner { display: grid; grid-template-columns: minmax(170px, 225px) minmax(0, 1fr); min-height: 320px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.kennisbank-boom-paneel { min-width: 0; padding: 15px 10px; border-right: 1px solid var(--border); background: var(--bg); }
.kennisbank-boom-paneel h2 { padding: 0 9px 10px; font-size: 13px; }
.kennisbank-boom-paneel ul { margin: 0; padding: 0 0 0 14px; list-style: none; }
.kennisbank-boom-paneel > div > ul { padding-left: 0; }
.kennisbank-boomregel { display: flex; align-items: center; min-width: 0; }
.kennisbank-boom-toggle, .kennisbank-boom-spacer { flex: 0 0 22px; width: 22px; padding: 4px 0; border: 1px solid transparent; background: transparent; color: var(--muted); text-align: center; }
.kennisbank-boom-map { min-width: 0; width: auto; padding: 6px 7px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.kennisbank-boom-map[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--text); }
.kennisbank-boom-map:hover, .kennisbank-boom-toggle:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--text); }
.kennisbank-boom-bestand { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 6px 7px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.kennisbank-boom-bestand svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.kennisbank-boom-bestand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennisbank-boom-bestand:hover, .kennisbank-boom-bestand:focus-visible { border-color: transparent; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.kennisbank-lijst-paneel { min-width: 0; padding: 6px 14px; }
.kennisbank-kolomkop, .kennisbank-item { display: grid; grid-template-columns: 25px minmax(130px, 1fr) 55px 75px 90px 360px; align-items: center; gap: 7px; }
.kennisbank-kolomkop { padding: 8px 0; color: var(--muted); font-size: 11px; }
.kennisbank-kolomkop button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; width: auto; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kennisbank-kolomkop button[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.kennisbank-sorteer-pijl { width: 13px; height: 13px; flex: 0 0 13px; color: var(--accent); }
.kennisbank-kolomkop button:hover { border: 0; color: var(--accent); }
.kennisbank-item { min-height: 58px; border-radius: 7px; }
.kennisbank-item:hover, .kennisbank-item:focus-within { background: color-mix(in srgb, var(--accent) 5%, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.kennisbank-item-geselecteerd { background: color-mix(in srgb, var(--accent) 9%, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.kennisbank-item-hoofd { width: 100%; }
.kennisbank-item-eigenschap { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.kennisbank-selectie { margin: 0; }
.kennisbank-item.kennisbank-sleepdoel, .kennisbank-boom-map.kennisbank-sleepdoel, .kennisbank-kruimels .kennisbank-sleepdoel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.kennisbank-mobiel-meta { display: none; }
.kennisbank-statusbalk { margin-top: 10px; padding: 10px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.bestanden-scherm .global-topbar { min-height: 52px; padding: 0 24px; box-sizing: border-box; --zoek-boven: 5px; --zoek-onder: 5px; --zoek-links: 24px; --zoek-rechts: 24px; }
.kennisbank-verkenner.heeft-voorbeeld { grid-template-columns: minmax(155px, 210px) minmax(0, 1fr) minmax(290px, 30%); }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-kolomkop { display: none; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item { display: flex; flex-wrap: wrap; align-items: center; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-hoofd { flex: 1 1 calc(100% - 45px); }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-eigenschap { display: none; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-acties { width: 100%; padding-left: 34px; justify-content: flex-start; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-mobiel-meta { display: block; }
.kennisbank-voorbeeld { min-width: 0; padding: 14px; border-left: 1px solid var(--border); background: var(--card); overflow-y: auto; }
.kennisbank-voorbeeld-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.kennisbank-voorbeeld-sluiten { width: 30px; height: 30px; padding: 0; flex: 0 0 30px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 21px; line-height: 1; }
.kennisbank-voorbeeld-sluiten:hover { border-color: var(--accent); }
.kennisbank-voorbeeld-naam { margin: 14px 0 4px; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.kennisbank-voorbeeld-meta, .kennisbank-voorbeeld-melding { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.kennisbank-voorbeeld-pdf { display: block; width: 100%; height: min(68vh, 720px); border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.kennisbank-voorbeeld-afbeelding { display: block; width: 100%; max-height: 68vh; object-fit: contain; border-radius: 7px; background: var(--bg); }
.kennisbank-voorbeeld-tekst { max-height: 68vh; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1330px) {
  .kennisbank-verkenner { grid-template-columns: minmax(145px, 190px) minmax(0, 1fr); }
  .kennisbank-kolomkop, .kennisbank-item { grid-template-columns: 25px minmax(130px, 1fr) 70px 360px; }
  .kennisbank-kolomkop > :nth-child(3), .kennisbank-kolomkop > :nth-child(5),
  .kennisbank-item > :nth-child(3), .kennisbank-item > :nth-child(5) { display: none; }
}
@media (max-width: 1170px) {
  .kennisbank-verkenner { grid-template-columns: 1fr; }
  .kennisbank-verkenner.heeft-voorbeeld { grid-template-columns: 1fr; }
  .kennisbank-voorbeeld { border-left: 0; border-top: 1px solid var(--border); }
  .kennisbank-boom-paneel { max-height: 180px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .kennisbank-kolomkop { display: none; }
  .kennisbank-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kennisbank-item-hoofd { flex: 1 1 calc(100% - 45px); }
  .kennisbank-item-eigenschap { display: none; }
  .kennisbank-item-acties { width: 100%; padding-left: 34px; }
  .kennisbank-mobiel-meta { display: block; }
}
@media (max-width: 650px) {
  .bestanden-scherm .global-topbar { padding: 0 10px; --zoek-links: 56px; --zoek-rechts: 10px; }
  .bestanden-scherm #pageContent { padding: 0; }
  .bestanden-scherm .kennisbank-page { padding: 14px; }
}

/* Bestanden: gelijke rijen, rustige selectie en compacte actiemenu's. */
.kennisbank-verkenner { overflow: visible; }
.kennisbank-boom-paneel { border-radius: 9px 0 0 9px; }
.kennisbank-kolomkop, .kennisbank-item {
  display: grid;
  grid-template-columns: 20px minmax(180px, 1fr) 62px 82px 100px 42px;
  align-items: center;
  gap: 10px;
}
.kennisbank-item {
  position: relative;
  min-height: 68px;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 -10px;
  border-top: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  user-select: none;
}
.kennisbank-item:hover, .kennisbank-item:focus-visible, .kennisbank-item:focus-within {
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.kennisbank-item.kennisbank-item-geselecteerd {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.kennisbank-item:has(.kennisbank-item-menu[open]) { z-index: 40; }
.kennisbank-selectie-indicator {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: var(--card);
  opacity: 0;
  display: grid;
  place-items: center;
}
.kennisbank-item:hover .kennisbank-selectie-indicator, .kennisbank-item:focus-visible .kennisbank-selectie-indicator, .kennisbank-item-geselecteerd .kennisbank-selectie-indicator { opacity: 1; }
.kennisbank-selectie-indicator svg { width: 14px; height: 14px; fill: none; stroke: white; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.kennisbank-item-geselecteerd .kennisbank-selectie-indicator { border-color: var(--accent); background: var(--accent); }
.kennisbank-item-geselecteerd .kennisbank-selectie-indicator svg { visibility: visible; }
.kennisbank-item-hoofd { display: flex; align-items: center; min-width: 0; width: 100%; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.kennisbank-item-miniatuur { display: grid; place-items: center; position: relative; flex: 0 0 34px; width: 34px; height: 40px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--accent); }
.kennisbank-item-miniatuur svg { width: 25px; height: 25px; }
.kennisbank-miniatuur-map { border: 0; background: transparent; }
.kennisbank-miniatuur-bestand > span, .kennisbank-miniatuur-afbeelding > span { font-size: 10px; font-weight: 700; letter-spacing: -.03em; }
.kennisbank-miniatuur-afbeelding img { display: none; width: 100%; height: 100%; object-fit: cover; }
.kennisbank-miniatuur-afbeelding.kennisbank-miniatuur-geladen img { display: block; object-fit: contain; background: #fff; }
.kennisbank-miniatuur-afbeelding.kennisbank-miniatuur-geladen img + span { display: none; }
.kennisbank-item-naam, .kennisbank-bestand-info strong { color: var(--text); }
.kennisbank-item:hover .kennisbank-item-naam { color: var(--text); }
.kennisbank-bestand-info { gap: 2px; }
.kennisbank-item-acties { display: flex; justify-content: flex-end; width: 42px; padding: 0; }
.kennisbank-item-menu { position: relative; }
.kennisbank-item-menu > summary { display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; list-style: none; }
.kennisbank-item-menu > summary::-webkit-details-marker { display: none; }
.kennisbank-item-menu > summary:hover, .kennisbank-item-menu > summary:focus-visible, .kennisbank-item-menu[open] > summary { border-color: var(--accent); background: var(--card); box-shadow: none; }
.kennisbank-item-menu > summary svg { width: 20px; height: 20px; fill: currentColor; }
.kennisbank-menu-lijst { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; width: 170px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); box-shadow: 0 8px 24px #0003; }
.kennisbank-item:nth-last-child(-n+3) .kennisbank-menu-lijst { top: auto; bottom: calc(100% + 5px); }
.kennisbank-menu-lijst button { display: block; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.kennisbank-menu-lijst button:hover, .kennisbank-menu-lijst button:focus-visible { border: 0; background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: none; }
.kennisbank-menu-lijst .kennisbank-menu-verwijderen { color: var(--error); }
.kennisbank-menu-lijst .kennisbank-menu-verwijderen:hover, .kennisbank-menu-lijst .kennisbank-menu-verwijderen:focus-visible { background: color-mix(in srgb, var(--error) 11%, var(--card)); color: var(--error); }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) 42px; flex-direction: initial; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-hoofd { flex: initial; }
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-acties { width: 42px; padding: 0; }
@media (max-width: 1330px) {
  .kennisbank-kolomkop, .kennisbank-item { grid-template-columns: 20px minmax(130px, 1fr) 70px 42px; }
  .kennisbank-kolomkop > :nth-child(3), .kennisbank-kolomkop > :nth-child(5), .kennisbank-item > :nth-child(3), .kennisbank-item > :nth-child(5) { display: none; }
}
@media (max-width: 1170px) {
  .kennisbank-item { display: grid; flex-direction: initial; flex-wrap: initial; }
  .kennisbank-item-hoofd { flex: initial; }
  .kennisbank-item-acties { width: 42px; padding: 0; }
}
@media (max-width: 650px) {
  .kennisbank-kolomkop, .kennisbank-item { grid-template-columns: 20px minmax(0, 1fr) 42px; }
  .kennisbank-item > :nth-child(4) { display: none; }
  .kennisbank-item { padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
}

/* Verkenner: herkenbare weergaven, prullenbak en contextmenu. */
.kennisbank-prullenbak-link { display: block; width: 100%; margin-top: 14px; padding: 9px; border: 1px solid transparent; border-top-color: var(--border); border-radius: 7px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.kennisbank-prullenbak-link:hover, .kennisbank-prullenbak-link[aria-current="page"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.kennisbank-context-menu { position: fixed; z-index: 1000; width: 210px; max-height: min(70vh, 460px); overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); box-shadow: 0 10px 30px #0003; }
.kennisbank-context-menu[hidden] { display: none; }
.kennisbank-context-menu button { display: block; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; }
.kennisbank-context-menu button:hover, .kennisbank-context-menu button:focus-visible { border: 0; background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: none; }
.kennisbank-context-menu .kennisbank-menu-verwijderen { color: var(--error); }
.kennisbank-context-menu .kennisbank-menu-verwijderen:hover { background: color-mix(in srgb, var(--error) 10%, var(--card)); }
.kennisbank-inline-naam { min-width: 90px; width: min(100%, 400px); padding: 5px 7px; font: inherit; }
.kennisbank-item-pad { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.kennisbank-page[data-weergave="compact"] .kennisbank-item { min-height: 42px; padding-top: 4px; padding-bottom: 4px; }
.kennisbank-page[data-weergave="compact"] .kennisbank-item-miniatuur { width: 25px; height: 30px; flex-basis: 25px; }
.kennisbank-page[data-weergave="compact"] .kennisbank-item-miniatuur svg { width: 20px; height: 20px; }
.kennisbank-page[data-weergave="compact"] .kennisbank-status, .kennisbank-page[data-weergave="compact"] .kennisbank-mobiel-meta { display: none; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-kolomkop { display: none; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; padding-top: 12px; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-item { display: flex; flex-direction: column; align-items: stretch; min-height: 150px; margin: 0; padding: 10px; border: 1px solid var(--border); }
.kennisbank-page[data-weergave="tegels"] .kennisbank-item-hoofd { flex-direction: column; align-items: flex-start; gap: 6px; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-item-miniatuur { width: 70px; height: 80px; flex-basis: 80px; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-item-eigenschap { display: none; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-item-acties { position: absolute; right: 6px; top: 6px; }
.kennisbank-page[data-weergave="tegels"] .kennisbank-selectie-indicator { position: absolute; top: 14px; left: 11px; }
.kennisbank-prullenbak-modus .kennisbank-nieuw-groep,
.kennisbank-prullenbak-modus .kennisbank-upload-groep { display: none; }

/* De verkenner vult de vrije schermhoogte; de status blijft onderaan. */
.bestanden-scherm #pageContent { display: flex; flex-direction: column; }
.bestanden-scherm .kennisbank-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-bottom: 0; }
.bestanden-scherm .kennisbank-beheer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bestanden-scherm .kennisbank-verkenner { flex: 1 1 auto; min-height: 260px; overflow: hidden; }
.bestanden-scherm .kennisbank-boom-paneel,
.bestanden-scherm .kennisbank-lijst-paneel,
.bestanden-scherm .kennisbank-voorbeeld { min-height: 0; overflow-y: auto; }
.bestanden-scherm .kennisbank-statusbalk { flex: 0 0 auto; margin-top: 10px; }
.bestanden-mobiel-melding { align-self: center; width: min(100%, 420px); margin: auto; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-sizing: border-box; text-align: center; }
.bestanden-mobiel-melding h1 { margin: 0 0 10px; font-size: 20px; }
.bestanden-mobiel-melding p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.bestanden-mobiel-melding button { display: block; width: fit-content; margin: 0 auto; }
@media (max-width: 800px) {
  #appSidebarNav > a[data-route="/bestanden"] { display: none; }
  .bestanden-scherm #pageContent:has(.bestanden-mobiel-melding) { display: flex; padding: 16px; }
}

/* De drie puntjes openen hetzelfde menu als de rechtermuisknop. */
.kennisbank-item-acties > button.kennisbank-item-menu { display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.kennisbank-item-acties > button.kennisbank-item-menu:hover,
.kennisbank-item-acties > button.kennisbank-item-menu:focus-visible,
.kennisbank-item-acties > button.kennisbank-item-menu[aria-expanded="true"] { border-color: var(--accent); background: var(--card); box-shadow: none; }
.kennisbank-item-acties > button.kennisbank-item-menu svg { width: 20px; height: 20px; fill: currentColor; }
.kennisbank-context-menu { width: 205px; padding: 6px; }
.kennisbank-context-scheiding { height: 1px; margin: 6px 4px; background: var(--border); }
.kennisbank-context-menu button:disabled { color: var(--muted); opacity: .55; cursor: default; }
.kennisbank-context-menu button:disabled:hover { background: transparent; box-shadow: none; }

/* Een geopende preview verandert de kolommen van de verkenner niet. */
@media (min-width: 1171px) {
  .kennisbank-verkenner.heeft-voorbeeld { grid-template-columns: minmax(155px, 210px) minmax(0, 1fr) minmax(340px, 32%); }
}
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld #kennisbankInhoud { min-width: 570px; }
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-kolomkop,
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item {
  display: grid;
  grid-template-columns: 20px minmax(180px, 1fr) 62px 82px 100px 42px;
  gap: 10px;
}
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-kolomkop > :nth-child(3),
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-kolomkop > :nth-child(5),
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item > :nth-child(3),
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item > :nth-child(5),
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-eigenschap { display: block; }
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-hoofd { flex: initial; }
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-acties { width: 42px; padding: 0; }
.kennisbank-page:not([data-weergave="tegels"]) .kennisbank-verkenner.heeft-voorbeeld .kennisbank-mobiel-meta { display: none; }

/* Naam wijzigen gebruikt de beschikbare breedte van de naamkolom. */
.kennisbank-item:has(.kennisbank-inline-naam) .kennisbank-item-naam,
.kennisbank-item:has(.kennisbank-inline-naam) .kennisbank-bestand-info { flex: 1 1 auto; min-width: 0; }
.kennisbank-item .kennisbank-inline-naam { box-sizing: border-box; display: block; width: 100%; min-width: 0; max-width: none; padding: 8px 10px; font: inherit; }

/* Bestandsnaam boven, groot voorbeeld, eigenschappen daaronder. */
.kennisbank-voorbeeld-kop h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.kennisbank-voorbeeld-weergave { margin-top: 14px; }
.kennisbank-voorbeeld-weergave .kennisbank-voorbeeld-pdf { height: min(68vh, 780px); }
.kennisbank-voorbeeld-weergave .kennisbank-voorbeeld-afbeelding { width: 100%; max-height: 68vh; }
.kennisbank-voorbeeld-weergave .kennisbank-voorbeeld-tekst { max-height: 68vh; }
.kennisbank-voorbeeld-details { margin: 16px 0 0; border-top: 1px solid var(--border); font-size: 12px; }
.kennisbank-voorbeeld-details > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kennisbank-voorbeeld-details dt { color: var(--muted); }
.kennisbank-voorbeeld-details dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* Mappenboom met prullenbak onderaan. */
.bestanden-scherm .kennisbank-boom-paneel { display: flex; flex-direction: column; overflow: hidden; }
.kennisbank-boom-paneel #kennisbankBoom { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kennisbank-boom-paneel .kennisbank-prullenbak-link { flex: 0 0 auto; margin-top: auto; }

/* Bestandsnamen blijven leesbaar wanneer het voorbeeld ruimte inneemt. */
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-naam-tekst,
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-bestand-info strong,
.kennisbank-voorbeeld-kop h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.kennisbank-verkenner.heeft-voorbeeld .kennisbank-item-naam-tekst { max-width: 100%; }

/* Versleepbare scheiding en een compacte actie naast Sluiten. */
@media (min-width: 1171px) {
  .kennisbank-verkenner.heeft-voorbeeld {
    grid-template-columns: minmax(155px, 210px) minmax(0, 1fr) 8px minmax(300px, min(var(--kennisbank-voorbeeld-breedte, 32%), calc(100% - 560px)));
  }
}
.kennisbank-voorbeeld-scheider { position: relative; background: var(--border); cursor: col-resize; touch-action: none; }
.kennisbank-voorbeeld-scheider::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 4px; background: transparent; transition: background .15s ease; }
.kennisbank-voorbeeld-scheider:hover::after,
.kennisbank-voorbeeld-scheider:focus-visible::after,
.kennisbank-voorbeeld-scheider.is-slepend::after { background: var(--accent); }
.kennisbank-voorbeeld-scheider[hidden] { display: none; }
.kennisbank-voorbeeld-scheider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kennisbank-voorbeeld { border-left: 0; }
.kennisbank-voorbeeld-acties { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.kennisbank-voorbeeld-openen { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: 0 0 30px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.kennisbank-voorbeeld-openen svg { width: 17px; height: 17px; }
.kennisbank-voorbeeld-openen:hover { border-color: var(--accent); }
@media (max-width: 1170px) {
  .kennisbank-voorbeeld-scheider { display: none; }
  .kennisbank-voorbeeld { border-top: 1px solid var(--border); }
}

/* De mappenbalk houdt dezelfde breedte bij selectie en heeft een eigen schuifgreep. */
@media (min-width: 1171px) {
  .kennisbank-verkenner {
    grid-template-columns: var(--kennisbank-boom-breedte, 225px) 8px minmax(0, 1fr);
  }
  .kennisbank-verkenner.heeft-voorbeeld {
    grid-template-columns: var(--kennisbank-boom-breedte, 225px) 8px minmax(0, 1fr) 8px minmax(300px, min(var(--kennisbank-voorbeeld-breedte, 32%), calc(100% - var(--kennisbank-boom-breedte, 225px) - 350px)));
  }
  .kennisbank-boom-paneel { border-right: 0; }
}
.kennisbank-boom-scheider { position: relative; background: var(--border); cursor: col-resize; touch-action: none; }
.kennisbank-boom-scheider::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 4px; background: transparent; transition: background .15s ease; }
.kennisbank-boom-scheider:hover::after,
.kennisbank-boom-scheider:focus-visible::after,
.kennisbank-boom-scheider.is-slepend::after { background: var(--accent); }
.kennisbank-boom-scheider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kennisbank-boom-paneel #kennisbankBoom { overflow-x: hidden; }
.kennisbank-boom-paneel ul { box-sizing: border-box; width: 100%; }
.kennisbank-boom-paneel li { min-width: 0; }
.kennisbank-boom-paneel .kennisbank-boomregel { width: 100%; }
.kennisbank-boom-paneel .kennisbank-boom-map { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1170px) {
  .kennisbank-boom-scheider { display: none; }
}

/* Ook zonder geopend voorbeeld worden lange namen na twee regels afgekort. */
.kennisbank-item-naam-tekst,
.kennisbank-bestand-info strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}