/*
 * tools/chat/chat.css - Chatvenster van de AI-assistent (nl.legal-huisstijl)
 * Zelfstandig: hangt niet af van de Tailwind-build in assets/css/style.css.
 * Alles valt onder .nlc- zodat het later zonder botsingen op elke pagina kan.
 */
.nlc-root {
    --nlc-paars: #4F2C75;
    --nlc-paars-donker: #3d215c;
    --nlc-paars-licht: #f1ecf6;
    --nlc-mint: #8FC47A;
    --nlc-mint-licht: #eef6ea;
    --nlc-groen: #428628;
    --nlc-donker: #1a1a1a;
    --nlc-licht: #f4f4f4;
    --nlc-grijs: #4b5563;
    --nlc-rand: #d1d5db;
    --nlc-rood: #b42318;
    --nlc-rood-licht: #fdf0ef;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nlc-donker);
}
.nlc-root *, .nlc-root *::before, .nlc-root *::after { box-sizing: border-box; }
.nlc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Knoppen en focus */
.nlc-root button { font: inherit; }
.nlc-root input, .nlc-root textarea { font: inherit; color: inherit; }
.nlc-root button { cursor: pointer; }
.nlc-root button:disabled { cursor: not-allowed; }
.nlc-root :focus-visible { outline: 3px solid var(--nlc-paars); outline-offset: 2px; }
.nlc-kop :focus-visible, .nlc-starter:focus-visible { outline-color: var(--nlc-mint); }

.nlc-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--nlc-paars); border-radius: .5rem;
    background: var(--nlc-paars); color: #fff; font-weight: 600; white-space: nowrap;
}
.nlc-knop:hover:not(:disabled) { background: var(--nlc-paars-donker); border-color: var(--nlc-paars-donker); }
.nlc-knop:disabled { background: #e5e7eb; border-color: #d1d5db; color: #4b5563; }
.nlc-knop--licht { background: #fff; color: var(--nlc-paars); }
.nlc-knop--licht:hover:not(:disabled) { background: var(--nlc-paars-licht); color: var(--nlc-paars-donker); }

/* Startknop rechtsonder */
.nlc-starter {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2147483000;
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 56px; padding: .8rem 1.3rem .8rem 1.1rem;
    border: 0; border-radius: 999px; background: var(--nlc-paars); color: #fff;
    font-size: 1.0625rem; font-weight: 600;
    box-shadow: 0 6px 20px rgba(26, 26, 26, .25);
}
.nlc-starter:hover { background: var(--nlc-paars-donker); }
.nlc-starter svg { width: 26px; height: 26px; flex: none; }
.nlc-starter[hidden] { display: none; }

/* Venster */
.nlc-venster {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2147483001;
    display: flex; flex-direction: column;
    width: 440px; max-width: calc(100vw - 2.5rem);
    height: 820px; max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem);
    background: #fff; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 16px 48px rgba(26, 26, 26, .28);
}
.nlc-venster[hidden] { display: none; }
/* Turnstile: onzichtbaar, behalve als Cloudflare de bezoeker een vakje laat aanvinken */
.nlc-controle { flex: none; display: flex; justify-content: center; }

.nlc-kop { flex: none; display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1rem .9rem 1.15rem; background: var(--nlc-paars); color: #fff; }
.nlc-kop-tekst { flex: 1; min-width: 0; }
.nlc-titel { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: #fff; }
.nlc-ondertitel { margin: .2rem 0 0; font-size: .875rem; line-height: 1.4; color: #fff; }
.nlc-ondertitel a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.nlc-kop-knoppen { display: flex; gap: .25rem; flex: none; }
.nlc-ikoonknop {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: .5rem; background: transparent; color: #fff;
}
.nlc-ikoonknop:hover { background: rgba(255, 255, 255, .15); }
.nlc-ikoonknop svg { width: 22px; height: 22px; }

/* Berichten */
.nlc-log { flex: 1; min-height: min(160px, 22vh); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: #fff; }
.nlc-ballon { max-width: 88%; padding: .7rem .95rem; border-radius: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.nlc-ballon a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.nlc-ballon--assistent { align-self: flex-start; background: var(--nlc-licht); border-bottom-left-radius: .3rem; }
.nlc-ballon--assistent a { color: var(--nlc-paars); }
.nlc-ballon--bezoeker { align-self: flex-end; background: var(--nlc-paars); color: #fff; border-bottom-right-radius: .3rem; }
.nlc-afzender { display: block; margin-bottom: .15rem; font-size: .8125rem; font-weight: 600; color: var(--nlc-grijs); }
.nlc-ballon--bezoeker .nlc-afzender { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Meldingen van de website zelf: geen ballon, maar een balk met rand */
.nlc-melding { align-self: stretch; padding: .65rem .85rem; border-left: 4px solid var(--nlc-groen); border-radius: .4rem; background: var(--nlc-mint-licht); font-size: .9375rem; }
.nlc-melding--fout { border-left-color: var(--nlc-rood); background: var(--nlc-rood-licht); }
.nlc-melding a { color: var(--nlc-paars); font-weight: 600; text-decoration: underline; }
.nlc-melding .nlc-knop { margin-top: .6rem; }

.nlc-typt { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 1rem; background: var(--nlc-licht); color: var(--nlc-grijs); font-size: .9375rem; }
.nlc-typt[hidden] { display: none; }
.nlc-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--nlc-paars); opacity: .35; animation: nlc-stip 1.2s infinite; }
.nlc-stip:nth-child(2) { animation-delay: .2s; }
.nlc-stip:nth-child(3) { animation-delay: .4s; }
@keyframes nlc-stip { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nlc-stip { animation: none; opacity: .7; } }

/* Dossiergegevens: twee aparte velden, duidelijk los van het chatvak */
.nlc-dossier { flex: none; padding: .75rem 1rem .75rem; border-top: 1px solid var(--nlc-rand); background: var(--nlc-paars-licht); }
.nlc-dossier { padding-top: .4rem; }
.nlc-dossier-kop { margin: 0; font-size: 1rem; }
.nlc-uitklap {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px;
    padding: 0; border: 0; background: transparent; color: var(--nlc-paars); font-weight: 700; text-align: left;
}
.nlc-uitklap svg { width: 20px; height: 20px; flex: none; transition: transform .15s; }
.nlc-uitklap[aria-expanded="false"] svg { transform: rotate(180deg); }
#nlc-dossier-velden { padding-top: .25rem; }
#nlc-dossier-velden[hidden] { display: none; }

/* Verstuurd dossiernummer als één regel */
.nlc-samenvatting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; padding: .35rem 0 .1rem; font-size: .9375rem; }
.nlc-samenvatting[hidden] { display: none; }
.nlc-samenvatting-label { font-weight: 600; }
.nlc-samenvatting strong { letter-spacing: .06em; }
.nlc-samenvatting-knoppen { display: flex; gap: .25rem; }
.nlc-linkknop {
    min-height: 36px; padding: .25rem .5rem; border: 0; border-radius: .4rem; background: transparent;
    color: var(--nlc-paars); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.nlc-linkknop:hover:not(:disabled) { background: rgba(79, 44, 117, .08); }
.nlc-linkknop:disabled { color: var(--nlc-grijs); text-decoration: none; }
.nlc-linkknop[hidden] { display: none; }
.nlc-veld[hidden] + .nlc-veld { margin-top: 0; }
.nlc-veld + .nlc-veld { margin-top: .6rem; }
.nlc-veld[hidden] { display: none; }
.nlc-label { display: block; font-size: .9375rem; font-weight: 600; }
.nlc-uitleg { display: block; margin-bottom: .3rem; font-size: .8125rem; color: var(--nlc-grijs); }
.nlc-rij { display: flex; gap: .5rem; }
.nlc-invoer {
    flex: 1; min-width: 0; min-height: 44px; padding: .5rem .75rem;
    border: 2px solid #6b7280; border-radius: .5rem; background: #fff;
    font-size: 1.0625rem; letter-spacing: .12em;
}
.nlc-invoer:focus-visible { outline-offset: 0; border-color: var(--nlc-paars); }
/* Dossiernummer: vaste "IN" ervoor, zodat duidelijk is dat alleen de cijfers getypt worden */
.nlc-prefixveld {
    flex: 1; min-width: 0; display: flex; align-items: stretch;
    border: 2px solid #6b7280; border-radius: .5rem; background: #fff; overflow: hidden;
}
.nlc-prefixveld:focus-within { border-color: var(--nlc-paars); outline: 3px solid var(--nlc-paars); outline-offset: 0; }
.nlc-prefix {
    display: flex; align-items: center; padding: 0 .6rem;
    background: var(--nlc-licht); border-right: 2px solid var(--nlc-rand);
    font-size: 1.0625rem; font-weight: 700; letter-spacing: .12em; color: var(--nlc-grijs);
}
.nlc-prefixveld .nlc-invoer { border: 0; border-radius: 0; }
.nlc-prefixveld .nlc-invoer:focus-visible { outline: none; }
.nlc-prefixveld:has(.nlc-invoer:disabled), .nlc-prefixveld:has(.nlc-invoer:disabled) .nlc-invoer { background: var(--nlc-licht); }

/* Chatvak */
.nlc-invoerblok { flex: none; padding: .75rem 1rem 1rem; border-top: 1px solid var(--nlc-rand); background: #fff; }
.nlc-tekstvak {
    display: block; width: 100%; min-height: 64px; max-height: 160px; resize: none; padding: .6rem .75rem;
    border: 2px solid #6b7280; border-radius: .5rem; background: #fff; font-size: 1rem; line-height: 1.45;
}
.nlc-tekstvak:focus-visible { outline-offset: 0; border-color: var(--nlc-paars); }
.nlc-tekstvak:disabled, .nlc-invoer:disabled { background: var(--nlc-licht); }
.nlc-hint { margin: .35rem 0 .5rem; font-size: .8125rem; color: var(--nlc-grijs); }
.nlc-zachte-hint { margin: .35rem 0 0; font-size: .8125rem; color: var(--nlc-paars); font-weight: 600; }
.nlc-zachte-hint[hidden], .nlc-teller[hidden] { display: none; }
.nlc-voet { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nlc-teller { font-size: .8125rem; color: var(--nlc-grijs); }
.nlc-teller--over { color: var(--nlc-rood); font-weight: 700; }

/* Telefoon: volledig scherm */
@media (max-width: 520px) {
    .nlc-venster { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .nlc-starter { right: 1rem; bottom: 1rem; }
}

/* Lage schermen (laptop): minder ruimte voor uitleg, meer voor het gesprek */
@media (max-height: 760px) {
    .nlc-kop { padding-top: .7rem; padding-bottom: .6rem; }
    .nlc-dossier { padding-bottom: .6rem; }
    .nlc-invoerblok { padding-top: .6rem; padding-bottom: .7rem; }
    .nlc-log { padding: .75rem 1rem; }
    .nlc-uitleg { font-size: .8125rem; margin-bottom: .2rem; }
    .nlc-tekstvak { min-height: 48px; }
    .nlc-hint { margin: .25rem 0 .35rem; }
}

@media (prefers-reduced-motion: reduce) { .nlc-uitklap svg { transition: none; } }

@media (forced-colors: active) {
    .nlc-ballon, .nlc-melding, .nlc-typt { border: 1px solid CanvasText; }
}