/* Klantenzoeker: aanvullende opmaak op Filament (gesprekken, voorbeelden, domeincheck). Werkt in licht en donker thema. */

.kz-muted { color: var(--gray-500); font-size: .8125rem; }
.kz-link { color: var(--primary-600); }
.dark .kz-link { color: var(--primary-400); }
.kz-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; }
.kz-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; color: var(--gray-500); word-break: break-all; }
.kz-empty { padding: 2rem 1rem; text-align: center; color: var(--gray-500); }

/* ---------------------------------------------------------------- Gesprekken */

.kz-conversations {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .kz-conversations { grid-template-columns: 1fr; }
}

.kz-conversation-list { position: sticky; top: 5rem; }
.kz-conversation-list .fi-section-content { padding: .75rem; }
.kz-list-tools { display: grid; gap: .75rem; margin-bottom: .75rem; }
.kz-list-tools .fi-tabs { flex-wrap: wrap; overflow: visible; max-width: 100%; }
.kz-list-tools .fi-tabs-item { flex: none; }
.kz-list-tools .fi-tabs-nav-scroll-btn, .kz-list-tools .fi-tabs > button[aria-hidden] { display: none; }

.kz-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; max-height: calc(100vh - 20rem); overflow-y: auto; }
.kz-item {
    display: grid; gap: .125rem; width: 100%; padding: .625rem .75rem; text-align: left;
    border-radius: .5rem; background: transparent; border: 0; cursor: pointer; color: inherit;
}
.kz-item:hover { background: var(--gray-50); }
.dark .kz-item:hover { background: rgb(255 255 255 / .05); }
.kz-item.is-active { background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
.kz-item-row { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.kz-item strong { font-size: .875rem; font-weight: 600; }
.kz-item.is-unread strong::before {
    content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem;
    border-radius: 9999px; background: var(--primary-500); vertical-align: middle;
}
.kz-snippet { font-size: .8125rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-item.is-unread .kz-snippet { color: var(--gray-700); }
.dark .kz-item.is-unread .kz-snippet { color: var(--gray-300); }
.kz-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
.kz-badges:empty { display: none; }

.kz-placeholder { display: grid; justify-items: center; gap: .5rem; padding: 4rem 1rem; }
.kz-placeholder-icon { width: 2.5rem; height: 2.5rem; color: var(--gray-400); }

.kz-pane-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.kz-pane-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.kz-status { min-width: 11rem; }

.kz-messages {
    display: grid; gap: .75rem; padding: .75rem; margin-bottom: 1rem;
    max-height: calc(100vh - 30rem); min-height: 12rem; overflow-y: auto;
    border-radius: .75rem; background: var(--gray-50);
}
.dark .kz-messages { background: rgb(0 0 0 / .2); }
.kz-message {
    max-width: 85%; padding: .75rem 1rem; border-radius: .75rem;
    background: #fff; border: 1px solid var(--gray-200);
}
.dark .kz-message { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.kz-message.is-out {
    justify-self: end;
    background: color-mix(in oklab, var(--primary-500) 10%, #fff);
    border-color: color-mix(in oklab, var(--primary-500) 25%, transparent);
}
.dark .kz-message.is-out { background: color-mix(in oklab, var(--primary-500) 18%, var(--gray-900)); }
.kz-message.is-auto { opacity: .75; }
.kz-message.is-bounce { background: color-mix(in oklab, var(--danger-500) 10%, #fff); border-color: color-mix(in oklab, var(--danger-500) 30%, transparent); }
.kz-message header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8125rem; margin-bottom: .25rem; }
.kz-subject { font-size: .75rem; color: var(--gray-500); margin-bottom: .375rem; }
.kz-text { white-space: pre-wrap; font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.kz-message details summary { cursor: pointer; font-size: .75rem; color: var(--gray-500); margin-top: .5rem; }

.kz-reply { display: grid; gap: 1rem; }
.kz-reply-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kz-push { margin-left: auto; }

/* ---------------------------------------------------------------- Sjabloonvoorbeeld & handtekening */

.kz-preview { border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
.dark .kz-preview { border-color: rgb(255 255 255 / .1); }
.kz-preview-meta { padding: .5rem .875rem; font-size: .75rem; color: var(--gray-500); }
.kz-preview-subject { padding: .625rem .875rem; font-weight: 600; font-size: .875rem; border-block: 1px solid var(--gray-200); background: var(--gray-50); }
.dark .kz-preview-subject { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); }
.kz-preview-body { padding: .875rem; white-space: pre-wrap; font-size: .875rem; line-height: 1.55; }

.kz-signature-preview { display: block; width: 100%; height: 12rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: #fff; }

/* ---------------------------------------------------------------- Domeincheck */

.kz-check { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; font-size: .875rem; }
.kz-check + .kz-check { border-top: 1px solid var(--gray-100); }
.dark .kz-check + .kz-check { border-color: rgb(255 255 255 / .05); }
.kz-dot { flex: none; width: .625rem; height: .625rem; margin-top: .375rem; border-radius: 9999px; background: var(--gray-400); }
.kz-dot-ok { background: var(--success-500); }
.kz-dot-warning { background: var(--warning-500); }
.kz-dot-error { background: var(--danger-500); }