/* ==========================================================================
   Fintool adviesconsole — abonnees (/chat/index.cfm)
   ==========================================================================

   Uitgangspunt: één omhullend paneel in plaats van losse zwevende kaarten.
   De gesprekkenlijst, de thread en de invoerbalk delen één rand en één
   schaduw; binnenin scheiden haarlijnen de onderdelen.

   Berichten zijn records, geen bubbels: links een smalle kolom met rol en
   acties, rechts de inhoud, met een scheidslijn ertussen. Dat leest als een
   dossier en niet als een chat-app, en dat past bij het publiek.

   Dit bestand is een kopie van /css/chat.beheer.css. Bewust een kopie en geen
   gedeeld bestand: de twee pagina's hangen onder een andere header en een
   andere globale stylesheet, en een tweak voor abonnees mag de beheerpagina
   niet omgooien. De prijs is dat een wijziging die voor allebei geldt op twee
   plaatsen moet. Wat afwijkt van de beheerversie staat hieronder bij
   --chat-sticky-top en --chat-sidebar-reserve; de rest is gelijk.

   Kleuren komen uit /css/legacy.css en Bootstrap. Secundaire tekst staat op
   #4a5565 — ruim 7:1 op wit, dus AAA.

   Let op: .chat-window staat bewust op column-reverse. In combinatie met
   prepend() in chat.js levert dat oudste boven, nieuwste onder, en blijft de
   scrollpositie vanzelf onderaan hangen. Niet omzetten naar column.
   ========================================================================== */

:root {
	--chat-line:        #dde3ec;
	--chat-line-soft:   #e9edf4;
	--chat-rail:        #f6f8fc;
	--chat-answer:      #f7f9fc;
	--chat-meta:        #4a5565;
	--chat-ink:         #14304f;
	--chat-radius:      10px;

	/* Hoogte van de twee koppen naast elkaar: die van de gesprekkenlijst en die
	   boven het gesprek. Eén maat, zodat de scheidslijn eronder doorloopt en de
	   twee kolommen als één balk lezen. Ruim genoeg voor de knoppen erin, die
	   hem dus nooit uit elkaar duwen. */
	--chat-head-h:      3.5rem;

	/* Waar de vastgeplakte gesprekkenlijst blijft hangen: onder de vaste
	   siteheader (.headerWrapper, position:fixed; top:0; height:70px). 70px is
	   ook wat legacy.css met body{padding-top} vrijhoudt, dus dat is de maat
	   die klopt. In de beheerversie staat hier 50px. */
	--chat-sticky-top:  70px;

	/* Hoeveel schermhoogte de gesprekkenlijst NIET mag gebruiken. Dit is de knop
	   om aan te draaien als de knop 'Alle gesprekken' onderaan wegvalt: hoger
	   getal is een kortere lijst.

	   Waarom dit een aparte maat is en niet --chat-sticky-top: die bepaalt waar
	   het blok blijft hangen én wordt van de hoogte afgetrokken, dus daaraan
	   draaien verschuift de onderkant geen millimeter. En de hoogte moet niet
	   passen bij de vastgeplakte stand maar bij de stand bovenaan de pagina,
	   waar het blok lager staat — onder de balk én de kruimelpaden. Reken je met
	   de vastgeplakte stand, dan steekt het blok bij het laden net onder de
	   onderkant van het scherm uit en zie je de knop niet.

	   Hoger dan de 7rem van de beheerversie, want boven het paneel staat hier
	   meer: de vaste header van 70px, daaronder de navigatiebalk in de gewone
	   stroom, en dan pas de kruimelpaden. */
	--chat-sidebar-reserve: 11rem;
}

/* Geen .crumb-regel hier: op de publieke site worden de kruimelpaden al door
   legacy.css opgemaakt, en die overschrijven zou de rest van de site raken. */

/* --------------------------------------------------------------------------
   Het paneel
   -------------------------------------------------------------------------- */

/* Twee kolommen binnen één rand: de gesprekkenlijst links, het gesprek rechts.
   Het paneel groeit mee met de inhoud; de pagina scrolt, niet de thread.

   overflow:clip en niet hidden — hidden maakt van dit paneel een scrollgebied,
   en dan zoekt een position:sticky hierbinnen houvast in plaats van bij de
   pagina. Er staat nu niets sticky, maar dat verschil is precies waar eerdere
   pogingen op stukliepen; clip knipt de hoeken net zo goed af. */
.chat-panel {
	background: #fff;
	border: 1px solid var(--chat-line);
	border-radius: var(--chat-radius);
	box-shadow: 0 1px 2px rgba(20, 48, 79, .06), 0 8px 24px rgba(20, 48, 79, .07);
	overflow: clip;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-width: 0;
}

/* De gesprekskolom. min-width:0 is hier niet optioneel: zonder dat weigert een
   flex-item te krimpen onder zijn inhoud, en dan duwt een brede tabel of een
   lange URL in een antwoord het hele paneel uit elkaar. */
.chat-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Kopstrook boven het gesprek. Zelfde hoogte en zelfde achtergrond als de kop
   van de gesprekkenlijst ernaast, zodat het één doorlopende balk is. De
   linkermarge is krap gehouden: de knop hoort visueel bij de zijkolom en moet
   dus tegen de scheiding aan staan, niet midden in de gesprekskolom. */
.chat-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	min-height: var(--chat-head-h);
	padding: .35rem 1.75rem .35rem .8rem;
	border-bottom: 1px solid var(--chat-line);
	background: var(--chat-rail);
}
.chat-toolbar .btn {
	font-size: .93em;
	font-weight: 600;
	padding: .35rem .85rem;
	border-radius: 5px;
	white-space: nowrap;
}

/* Rangorde in de balk. Er stonden vier klikbare dingen naast elkaar die er alle
   vier anders uitzagen — een link, een omlijnde knop en een gevulde knop — en
   dan leest niets meer als het belangrijkst.

   Drie niveaus, meer niet:

   1. De zijkolomknop links. Structuur, geen actie, en staat ver genoeg van de
      rest om niet mee te tellen in de groep rechts.
   2. De stille acties: de FAQ en het mailen van het gesprek. Zelfde vorm,
      zelfde gewicht, geen omlijning. Ze horen bij elkaar en hoeven niet op te
      vallen; wie ze zoekt, vindt ze.
   3. Nieuw gesprek. De enige gevulde knop in de balk, en daarmee vanzelf het
      zwaartepunt. Dat werkt alleen zolang het de enige blijft. */
.chat-toolbar-action {
	font-weight: 500;
	color: var(--chat-meta);
	background: none;
	border: 0;
	text-decoration: none;
}
.chat-toolbar-action:hover,
.chat-toolbar-action:focus-visible {
	color: var(--bs-info);
	background: rgba(var(--bs-info-rgb), .08);
	text-decoration: none;
}

/* De primaire actie een tikje zwaarder dan de rest van de balk. */
.chat-toolbar #reset-chat-btn { font-weight: 700; }

/* Het ticketnummer in de balk op dezelfde maat als de knoppen ernaast — zonder
   dit erft het de bodymaat en steekt het uit boven de rest van de balk. */
.chat-ticket-top {
	font-size: .93em;
	white-space: nowrap;
}

/* Alleen een pijl, geen woord: de kop van de zijkolom benoemt de lijst al.
   Bootstrap zet .collapsed op de knop zodra de kolom dicht is; daar draait de
   pijl op mee, zodat hij altijd wijst naar wat de klik gaat doen.

   De selector is .chat-toolbar .chat-sidebar-toggle en niet alleen de klasse:
   .chat-toolbar .btn hierboven weegt even zwaar, en zonder dat wint diens
   padding en wordt de cirkel een ovaal. */
.chat-toolbar .chat-sidebar-toggle {
	/* Vaste maat in plaats van padding: btn-round rondt af op 200px, maar alleen
	   een vierkant vlak levert daarmee een echte cirkel op. */
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: .95em;
	flex: none;
}
/* Let op de selector: '> *' en niet 'i'. Font Awesome draait hier als kit-JS
   (zie /beheer/inc_beheeritems.cfm), en die vervangt een <i> door een <svg>.
   Een regel op 'i' matcht dan niets meer en de pijl draait nooit. Met '> *'
   maakt het niet uit welk element de kit ervan maakt. */
.chat-sidebar-toggle > * { transition: transform .2s ease; }
.chat-sidebar-toggle.collapsed > * { transform: rotate(180deg); }

.card-chat {
	margin: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* --------------------------------------------------------------------------
   De thread
   -------------------------------------------------------------------------- */

/* Geen eigen scrollgebied: de pagina scrolt. Zou hier overflow-y:auto staan,
   dan is dit de scrollende voorouder van de sticky meta-kolom — en omdat dit
   venster met de inhoud meegroeit, scrolt het nooit en plakt er dus niets. */
.chat-window {
	padding: 0;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column-reverse;
	flex: 1;
	min-height: 40vh;
}

.chat-message {
	display: grid;
	/* Breed genoeg dat de afzender en de Kopiëren-knop naast elkaar passen zonder
	   af te breken. De bovengrens voorkomt dat de kolom op een breed scherm
	   meegroeit tot een lege baan. */
	grid-template-columns: clamp(310px, 26%, 360px) minmax(0, 1fr);
	gap: 0 1.5rem;
	align-items: start;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 1.4rem 1.75rem;
	border-radius: 0;
	border-bottom: 1px solid var(--chat-line-soft);
	line-height: 1.55;
	animation: fadeIn .35s ease-in-out;
}

.user-message {
	background: #fff;
}

.assistant-message {
	background: var(--chat-answer);
}

/* Systeemmeldingen blijven één kolom: die hebben geen afzender. */
.is-system-message {
	display: block;
	background: rgba(var(--bs-danger-rgb), .06);
	border-left: 3px solid var(--bs-danger);
	padding: .9rem 1.75rem;
}

/* --------------------------------------------------------------------------
   De linkerkolom van een bericht: wie, en wat je ermee kunt
   -------------------------------------------------------------------------- */

.message-toolbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	z-index: 1;
}

.toolbar-title {
	padding: 0;
	font-size: .93em;
	font-weight: 700;
	/* Ruim genoeg dat het icoon binnen de regelhoogte past. Met een krappe
	   regelhoogte snijdt de overflow hieronder de bovenkant van het icoon af. */
	line-height: 1.7;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--chat-meta);
	/* Afzender op één regel houden; bij een lange naam liever afkappen dan de
	   kolom laten uitzakken. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.assistant-message .toolbar-title {
	color: var(--bs-info);
}

.chat-icon {
	height: 17px;
	width: auto;
	margin: 0 5px 0 0;
	vertical-align: middle;
	opacity: .75;
}

.toolbar-actions { margin-left: -.4rem; }

.message-toolbar .btn {
	padding: .1rem .4rem;
	font-size: .93em;
	color: var(--chat-meta);
}
.message-toolbar .btn:hover { color: var(--bs-info); }
/* 1em en niet .93em: dit staat binnen .message-toolbar .btn, dat al op .93em
   staat. Zou hier ook .93em staan, dan wordt het .93 x .93 en valt de tekst
   ongemerkt onder de ondergrens. */
.message-toolbar .btn .button-text { font-size: 1em; }

/* --------------------------------------------------------------------------
   De inhoud van een bericht
   -------------------------------------------------------------------------- */

.message-content {
	grid-column: 2;
	width: 100%;
	font-size: 1em;
	line-height: 1.6;
	color: var(--bs-gray-900);
}

.user-message .message-content {
	font-size: 1.05em;
	color: var(--chat-ink);
}

.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content p { max-width: 72ch; }

/* Koppen binnen een antwoord moeten boven de labels eromheen uitkomen. Nu de
   ondergrens voor labels op .93rem ligt, zat .95rem daar te dicht tegenaan en
   verdween de rangorde. */
.message-content h2,
.message-content h3,
.message-content h4 {
	/* legacy.css zet h4 op 16pt tegen een body van 13.8pt, oftewel 1.16em. Deze
	   koppen zaten met 1.08 daar net onder en staken daardoor nauwelijks boven de
	   lopende tekst uit. */
	font-size: 1.16em;
	line-height: 1.4;
	font-weight: 700;
	color: var(--chat-ink);
	margin: 1.3em 0 .35em;
}

.message-content ul {
	list-style-type: "\276f   ";
	padding: 0 1.4rem;
	margin: 5px 0 !important;
	max-width: 72ch;
}
.message-content ul li { margin: 0; padding: 0 10px; }
.message-content ul li::marker { font-size: .93em; color: var(--bs-info); }

.message-content table {
	width: 100%;
	margin-bottom: 1rem;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}
.message-content table td,
.message-content table th {
	vertical-align: top;
	border-bottom: 1px solid var(--chat-line);
	padding: .3rem .5rem .3rem 0;
}

.is-system-message .message-content { grid-column: auto; }

/* --------------------------------------------------------------------------
   Bronnen
   -------------------------------------------------------------------------- */

.message-sources {
	grid-column: 2;
	margin-top: 1.4rem;
	min-height: 0;
}

.message-sources h3, .research-trace h3 {
	font-size: .93em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--chat-meta);
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--chat-line);
	margin-bottom: .2rem;
}

/* --------------------------------------------------------------------------
   Onderzoeksspoor
   Toont welke documenten zijn overwogen, gelezen en gebruikt. Standaard
   ingeklapt: het antwoord is de hoofdzaak, dit is de verantwoording.
   -------------------------------------------------------------------------- */

.research-trace {
	grid-column: 2;
	margin: 1.1rem 0 0;
	font-size: .93em;
}

/* Let op bij alles wat hieronder in het spoor staat: .research-trace zet zelf al
   .93em, dus een kind op .93em wordt .93 x .93. Wat even groot moet zijn als de
   labels elders krijgt hier dus 1em. */
.research-trace h3 { font-size: 1em; }

/* De knop en de rondes eronder delen één linkerlijn; het pijltje hangt daar
   links van in de marge. Daardoor staat de knoptekst recht boven de rondes en
   is er geen rand nodig om het verband te laten zien. */
.research-trace { --trace-indent: 1.2rem; }

.research-trace .trace-toggle {
	position: relative;
	display: block;
	width: 100%;
	background: none;
	border: 0;
	padding: .1rem 0 .1rem var(--trace-indent);
	margin: 0;
	font-weight: 600;
	color: var(--chat-ink);
	cursor: pointer;
	text-align: left;
}
.research-trace .trace-toggle:hover { color: var(--chat-ink); }
.research-trace .trace-toggle:hover .trace-label { text-decoration: underline; }
.research-trace .trace-toggle.open { color: var(--chat-ink); font-weight: 600; }

/* Pijltje als aanwijzing dat het blok in- en uitklapt: naar rechts als het
   dicht is, naar beneden als het open staat. Als vorm in CSS getekend, zodat
   het niet afhangt van een geladen icoonset. */
.research-trace .trace-toggle::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 6px solid currentColor;
	border-top: 4.5px solid transparent;
	border-bottom: 4.5px solid transparent;
	transform: translateY(-50%);
	transition: transform .15s ease;
}
.research-trace .trace-toggle.open::before { transform: translateY(-50%) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	.research-trace .trace-toggle::before { transition: none; }
}

/* Geen linkerrand: de kop 'Onderzoek' erboven markeert het blok al, net als bij
   de bronnen. Een tweede lijn erlangs vecht daarmee en sluit nooit netjes aan
   op de knop erboven. De uitlijning met de knoptekst doet het werk. */
.research-trace .trace-body {
	margin-top: .35rem;
	padding-left: var(--trace-indent);
}

.research-trace .trace-round-title {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--chat-meta);
	margin: .8rem 0 .25rem;
}
.research-trace .trace-round-title:first-child { margin-top: 0; }

.research-trace .trace-call { margin: 0 0 .6rem; }
.research-trace .trace-reden { font-style: italic; color: var(--bs-gray-800);font-size: 1.1em; }

.research-trace .trace-treffers {
	list-style: none;
	margin: .2rem 0 0;
	padding-left: .8rem;
}
.research-trace .trace-treffers li { padding: .1rem 0; }
.research-trace .trace-treffers a { color: var(--chat-ink); text-decoration: underline; }
.research-trace .trace-treffers a:hover { text-decoration: underline; }

.research-trace .trace-herkomst {
	color: var(--chat-meta);
	font-size: 1em;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.research-trace .trace-fout { color: var(--bs-danger); padding-left: .8rem; }

/* Zoekactie zonder treffers. Rustig grijs en cursief: het is geen fout, maar het
   moet er wel staan — anders leest een lege zoekactie als een kapotte. */
.research-trace .trace-leeg {
	color: var(--chat-meta);
	font-style: italic;
	padding-left: .8rem;
}

/* De rol van een document in het antwoord. Alleen 'gebruikt' krijgt kleur die
   opvalt: dat is wat het antwoord daadwerkelijk draagt. */
/* Het label blijft op de ondergrens, maar zonder kapitalen en met minder
   letterafstand — anders wordt een badge van .93rem een blok naast de titel. */
.research-trace .trace-rol {
	display: inline-block;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.35;
	padding: 0 .45em;
	border-radius: 3px;
	vertical-align: baseline;
}
.research-trace .trace-rol-gebruikt  { background: #e0f0e6; color: #0d5c30; }
.research-trace .trace-rol-gelezen   { background: #e4edf6; color: #1d4f7c; }
.research-trace .trace-rol-overwogen { background: var(--chat-line-soft); color: var(--chat-meta); }

/* --------------------------------------------------------------------------
   Status tijdens het onderzoek: in de thread, niet als zwevend blok
   -------------------------------------------------------------------------- */

.chat-status {
	margin: 0;
	width: auto;
	padding: 1rem 1.75rem;
	border-radius: 0;
	border-bottom: 1px solid var(--chat-line-soft);
	background: var(--chat-answer);
	color: var(--chat-ink);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	box-shadow: none;
}

.status-indicator {
	font-style: italic;
	display: flex;
	align-items: center;
	gap: .6rem;
	animation: fadeIn .3s ease-in-out;
}
.status-indicator #status-icon { color: var(--bs-info); font-style: normal; }
.status-indicator .fa-spinner { animation: fa-spin 2s infinite linear; }

/* --------------------------------------------------------------------------
   Invoer: vastgeklikt onderaan het paneel
   -------------------------------------------------------------------------- */

.chat-footer {
	margin: 0;
	padding: 1rem 1.75rem 1.15rem;
	border-top: 1px solid var(--chat-line);
	border-radius: 0;
}

.chat-footer .d-flex {
	border: 1px solid var(--chat-line);
	border-radius: 8px;
	padding: .5rem .6rem .5rem .85rem;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-footer .d-flex:focus-within {
	border-color: var(--bs-info);
	box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), .12);
}

#user-input {
	resize: none;
	overflow-y: hidden;
	border: 0 !important;
	box-shadow: none !important;
	padding: .25rem 0;
	font-size: 1em;
	background: transparent;
}
#user-input:focus { outline: none; }

.chat-disclaimer {
	margin: .7rem 0 0;
	font-size: .93em;
	line-height: 1.4;
	color: var(--chat-meta);
}

/* --------------------------------------------------------------------------
   Gesprekkenlijst: zijkolom, inklapbaar

   De oude opzet liep bij tien gesprekken vast: de lijst had geen hoogtegrens
   en liep over de knop eronder heen. Dat is hier op één plek opgelost — de
   lijst heeft een max-height en scrolt daarbinnen. Kop en voet staan er los
   van en kunnen dus nooit meer worden overlopen, hoeveel gesprekken er ook
   zijn. Alleen dát ontbrak; een kolom naast het gesprek is op zichzelf prima.

   Het in- en uitklappen is Bootstrap's horizontale collapse. Dat vraagt een
   vaste breedte op het kind (--chat-sidebar-w), want de wrapper animeert van
   0 naar auto en zonder die breedte herschikt de inhoud tijdens de animatie.
   -------------------------------------------------------------------------- */

:root { --chat-sidebar-w: 300px; }

/* Op een breed scherm mag de lijst ruimer. Onderwerpen worden op twee regels
   afgekapt en bij 300px valt dat vaak middenin het woord waar het om gaat.
   Bij 1400px houdt het gesprek zelf nog ruim 900px over, genoeg voor de
   meta-kolom van een bericht plus een leesbare regellengte ernaast. */
@media (min-width: 1400px) {
	:root { --chat-sidebar-w: 450px; }
}

.chat-sidebar-wrap {
	display: flex;
	flex: 0 0 auto;
}

/* De kolom zelf loopt over de volle paneelhoogte — daar komt de achtergrond en
   de scheidslijn vandaan. Hij wordt door de flexrij uitgerekt, dus hij heeft
   zelf geen ruimte om te schuiven; dat doet .chat-sidebar-sticky hierbinnen. */
.chat-sidebar {
	width: var(--chat-sidebar-w);
	background: var(--chat-rail);
	border-right: 1px solid var(--chat-line);
}

/* Kop, lijst en voet blijven samen in beeld terwijl je door het gesprek scrolt.

   Dit werkt hier wél, waar eerdere pogingen strandden, en dat zit in twee dingen:

   1. Geen enkele voorouder is een scrollgebied. .chat-panel staat op
      overflow:clip, en clip knipt wel af maar wordt géén scrollgebied — de
      sticky hangt dus aan de paginascroll. Met overflow:hidden zou dát het
      scrollgebied worden, en omdat het paneel met de inhoud meegroeit scrolt
      het nooit; dan plakt er niets. Dat was het oude euvel.

   2. Er is ruimte om te schuiven. De ouder loopt over de volle paneelhoogte en
      dit blok is maar een schermhoogte hoog, dus het kan meebewegen tot de
      onderkant van de kolom.

   De hoogtegrens zit hier en niet meer op de lijst: kop en voet staan vast en
   de lijst krijgt wat overblijft. */
.chat-sidebar-sticky {
	position: sticky;
	top: var(--chat-sticky-top);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--chat-sidebar-reserve));
}

/* Zelfde hoogte als .chat-toolbar ernaast: samen vormen ze één balk waar de
   scheidslijn onderdoor loopt. */
.chat-sidebar-header {
	flex: none;
	display: flex;
	align-items: center;
	min-height: var(--chat-head-h);
	padding: .35rem 1.1rem;
	border-bottom: 1px solid var(--chat-line);
}

.chat-sidebar-title {
	margin: 0;
	font-size: .93em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--chat-meta);
}

/* Het enige dat scrolt. flex:0 1 auto in plaats van flex:1 — de lijst mag
   krimpen tot binnen de hoogtegrens van het sticky-blok, maar niet meegroeien,
   anders staat de knop eronder honderden pixels lager dan de laatste regel. */
#conversation-history-list {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Zijkolom met de profielnavigatie (archiefpagina /chat/user.chat.cfm)

   Daar staat in dezelfde zijkolom niet de gesprekkenlijst maar het profielmenu.
   Dat is ook een list-group met list-group-items, dus het past in dezelfde
   vorm — maar het is een menu: geen tweeregelige onderwerpen, geen metaregel
   met datum en ticket, geen verwijderknop. Vandaar een eigen, kleiner blok in
   plaats van de opmaak van de gesprekkenlijst hergebruiken.
   -------------------------------------------------------------------------- */

.chat-sidebar-nav {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* De marge komt uit navigatie.cfm zelf (list-group mb-4) en moet hier weg:
   binnen de zijkolom loopt de lijst tot de rand door. */
.chat-sidebar-nav .list-group {
	margin: 0 !important;
	border-radius: 0;
}

.chat-sidebar-nav .list-group-item {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--chat-line-soft);
	border-left: 3px solid transparent;
	border-radius: 0 !important;
	padding: .7rem 1.1rem;
	color: var(--chat-ink);
	transition: background-color .12s ease;
}
.chat-sidebar-nav .list-group-item:hover,
.chat-sidebar-nav .list-group-item:focus-visible { background: #fff; }

.chat-sidebar-nav .list-group-item.active {
	background: #fff;
	border-left-color: var(--bs-info);
	color: var(--chat-ink);
}

/* --------------------------------------------------------------------------
   Melding over het hele gesprek, onder de balk
   -------------------------------------------------------------------------- */

/* Alleen het pictogram is rood; de tekst staat op de gewone donkere inktkleur.
   Een hele zin in rood leest als een storing, en dit is een kanttekening. */
.chat-notice {
	padding: .8rem 1.75rem;
	border-bottom: 1px solid var(--chat-line);
	background: rgba(var(--bs-danger-rgb),.05);
	font-size: .93em;
	line-height: 1.45;
}

.chat-sidebar-footer {
	flex: none;
	border-top: 1px solid var(--chat-line);
	padding: .85rem 1.1rem;
}
.chat-sidebar-footer .btn { width: 100%; }

/* flex:none is hier geen detail. Bootstrap's .list-group is zelf een flex-kolom,
   dus deze items zijn flex-items en krimpen standaard (flex-shrink: 1). Met een
   hoogtegrens op de lijst worden ze dan platgedrukt in plaats van dat de lijst
   gaat scrollen: bij tien gesprekken krijg je tien samengeperste regels en komt
   overflow-y:auto er nooit aan te pas. */
#conversation-history-list .list-group-item {
	flex: none;
	position: relative;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--chat-line-soft);
	border-left: 3px solid transparent;
	border-radius: 0 !important;
	padding: .75rem 2.1rem .8rem 1.1rem;
	color: inherit;
	transition: background-color .12s ease;
}
#conversation-history-list .list-group-item:hover,
#conversation-history-list .list-group-item:focus-visible { background: #fff; }
#conversation-history-list .list-group-item.active {
	background: #fff;
	border-left-color: var(--bs-info);
	color: inherit;
}

/* De binnenste flex-wrappers uit chat.js platslaan: onderwerp boven,
   meta-regel eronder. */
#conversation-history-list .list-group-item > .d-flex { display: block !important; }
#conversation-history-list .list-group-item > .d-flex > div { width: 100%; }

.conversation-header {
	max-height: none;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
	font-weight: 600;
	font-size: 1em;
	line-height: 1.35;
	color: var(--chat-ink);
	padding: 0;
	margin-bottom: .2rem;
}

/* Meta-regel: datum links, ticket rechts. */
#conversation-history-list .list-group-item .d-flex.justify-content-between {
	display: flex !important;
	align-items: baseline;
	gap: .5rem;
}
#conversation-history-list small {
	font-size: .93em;
	line-height: 1.4;
	color: var(--chat-meta) !important;
	font-variant-numeric: tabular-nums;
}
#conversation-history-list small i { opacity: .6; margin-right: .1rem; }

/* Het ticketnummer is een kenmerk, geen waarschuwing: blauw in plaats van rood,
   in cijfermaat zodat de nummers onder elkaar uitlijnen. */
#conversation-history-list .rood,
#conversation-history-list .rood i {
	color: var(--bs-info) !important;
	font-family: var(--bs-font-monospace);
	letter-spacing: -.02em;
}
/* Alleen op de buitenste: stond de maat ook op de i, dan werd die .93 x .93,
   want het icoon zit binnen .rood. */
#conversation-history-list .rood { font-size: .93em; }

/* Verwijderen: pas zichtbaar bij aanwijzen, zodat de lijst rustig blijft. */
.deactivate-btn {
	position: absolute;
	top: .7rem;
	right: .5rem;
	padding: .15rem .3rem;
	color: var(--chat-meta) !important;
	opacity: 0;
	transition: opacity .12s ease, color .12s ease;
}
.list-group-item:hover .deactivate-btn,
.list-group-item:focus-within .deactivate-btn { opacity: 1; }
.deactivate-btn:hover { color: var(--bs-danger) !important; }

@media (hover: none) {
	.deactivate-btn { opacity: .55; }
}

/* --------------------------------------------------------------------------
   Toelichting van de redactie
   -------------------------------------------------------------------------- */

#chat-explanation {
	border-radius: var(--chat-radius);
	box-shadow: none !important;
	background: rgba(var(--bs-danger-rgb), .04);
}

/* --------------------------------------------------------------------------
   Alleen in de abonneechat
   -------------------------------------------------------------------------- */

/* Ticketnummer en de verwijzing naar de helpdesk, onder het gesprek. Staat
   binnen .chat-main, dus het paneel geeft geen ruimte mee: die zit hier. */
.chat-ticket {
	padding: 1.1rem 1.75rem 1.3rem;
	border-top: 1px solid var(--chat-line);
	background: var(--chat-rail);
}
.chat-ticket h4 {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 .35rem;
}
.chat-ticket .text-m,
.chat-ticket .text-s { color: var(--chat-meta); }

/* Het gesprek naar de eigen mailbox sturen.

   Drie standen in één knop. De drie labels staan alle drie in de markup en hier
   wordt er per stand één getoond — zo blijft de tekst in de template staan, waar
   hij vertaalbaar is, in plaats van in JavaScript. De knop houdt daarbij zijn
   breedte ongeveer vast, dus de balk springt niet bij het wisselen. */
.chat-mail-btn .mail-busy,
.chat-mail-btn .mail-done { display: none; }

.chat-mail-btn.is-busy .mail-idle,
.chat-mail-btn.is-done .mail-idle { display: none; }
.chat-mail-btn.is-busy .mail-busy { display: inline; }
.chat-mail-btn.is-done .mail-done { display: inline; }

/* In de 'verstuurd'-stand groen: de actie is gedaan, er valt even niets te
   klikken. Wel een vlak, want dit is de enige plek waar een stille actie
   tijdelijk om aandacht vraagt. */
.chat-mail-btn.is-done,
.chat-mail-btn.is-done:disabled {
	color: #0d5c30;
	background: #e0f0e6;
	opacity: 1;
}

/* Terugmelding na het versturen. Contrastwaarden gemeten tegen de achtergrond
   van de balk (--chat-rail, #f6f8fc), niet tegen wit — dat scheelt net genoeg
   om het verschil te maken:

     --chat-meta   #4a5565   7,1:1   haalde AAA op het randje, en las daardoor
                                     als grijze ruis in plaats van als melding
     --chat-ink    #14304f  12,6:1   nu in gebruik
     --bs-lightblue #085386  7,6:1   AAA, dus bruikbaar voor het adres
*/
.chat-mail-msg {
	font-size: .93em;
	line-height: 1.35;
	font-weight: 500;
	color: var(--chat-ink);
}

/* Het adres eruit lichten: dat is het antwoord op 'waar is het heen gegaan'. */
.chat-mail-msg .chat-mail-adres {
	color: var(--bs-lightblue);
	font-weight: 600;
}

/* Niet var(--bs-danger): die staat op #bb271c en haalt hier 5,8:1. Genoeg voor
   AA, te weinig voor AAA. Deze donkerder rood komt op 8,4:1 uit. */
.chat-mail-msg.is-fout,
.chat-mail-msg.is-fout .chat-mail-adres { color: #8f1d15; }

/* --------------------------------------------------------------------------
   Kopieerknop: wisselen tussen icoon en bevestiging
   -------------------------------------------------------------------------- */

.dropdown-toggle .icon-default { display: inline-block; }
.dropdown-toggle .icon-feedback { display: none; }
.dropdown-toggle.is-copied .icon-default { display: none; }
.dropdown-toggle.is-copied .icon-feedback { display: inline-block; }

/* --------------------------------------------------------------------------
   Inklapbare chunk-weergave (elders in het beheer gebruikt)
   -------------------------------------------------------------------------- */

.chunk-collapse-wrapper {
	max-height: 8em;
	min-height: 6em;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.chunk-collapse-wrapper:not(.is-expanded) {
	-webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.chunk-collapse-wrapper.is-expanded { max-height: 2000px; }

/* --------------------------------------------------------------------------
   Animatie en toegankelijkheid
   -------------------------------------------------------------------------- */

/* Alleen dekking, geen verschuiving. Een translate laat de browser het bericht
   op een eigen laag renderen met subpixel-positie; zodra de animatie stopt valt
   dat terug op hele pixels en springt de inhoud een pixel of twee. */
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.chat-message, .status-indicator { animation: none; }
	.chunk-collapse-wrapper { transition: none; }
	.chat-sidebar-toggle > * { transition: none; }
}

/* --------------------------------------------------------------------------
   Smal scherm: de lijst boven de thread
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	/* Kolommen worden rijen. De breedte blijft een vaste maat en wordt geen 100%:
	   de collapse animeert de breedte van de wrapper naar nul, en een kind op 100%
	   krimpt dan mee — je ziet de lijst tijdens het inklappen ineenschuiven. */
	.chat-panel { flex-direction: column; }
	.chat-sidebar {
		width: min(340px, 88vw);
		border-right: 0;
		border-bottom: 1px solid var(--chat-line);
	}

	/* Geen sticky op smal scherm: de lijst staat hier bóven het gesprek, dus
	   meeschuiven zou hem over het antwoord heen leggen in plaats van ernaast. */
	.chat-sidebar-sticky {
		position: static;
		max-height: none;
	}
	#conversation-history-list { max-height: 45vh; }

	/* De lijst klapt hier niet opzij maar open en dicht boven het gesprek, dus
	   wijst de pijl omlaag als hij dicht is en omhoog als hij openstaat. Zelfde
	   icoon als op een breed scherm, alleen anders gedraaid: het icoon in de
	   markup wijst naar links, dus +90° maakt er omhoog van en -90° omlaag.
	   Scheelt een tweede icoon en een stuk JavaScript om ze te wisselen. */
	.chat-sidebar-toggle > *           { transform: rotate(90deg); }
	.chat-sidebar-toggle.collapsed > * { transform: rotate(-90deg); }

	.chat-window { min-height: 0; }
	.chat-toolbar { padding: .7rem 1.1rem; }

	/* De knoppengroepen in de balk mogen hier naar een tweede regel. De knoppen
	   zelf staan op nowrap (een label hoort niet midden in te breken), en de balk
	   laat alleen zijn directe kinderen doorlopen — een groep met drie knoppen
	   bleef daardoor één onbreekbaar blok, breder dan 390px, en werd rechts door
	   .chat-panel afgeknipt. */
	.chat-toolbar > .d-flex {
		flex-wrap: wrap;
		row-gap: .5rem;
	}

	/* minmax(0, 1fr) en niet 1fr — dit was de eigenlijke oorzaak.

	   1fr is een afkorting voor minmax(auto, 1fr), en die 'auto' betekent: nooit
	   smaller dan het breedste onbreekbare ding in het bericht. Eén lange URL, een
	   tabel of een lang woord in een bronvermelding, en de hele kolom wordt zo
	   breed — alle alinea's daarin worden op die breedte gezet, en .chat-panel knipt
	   de rechterkant af met overflow:clip. Op een breed scherm staat hier al
	   minmax(0, 1fr); deze regel voor smalle schermen had dat per ongeluk weer
	   ongedaan gemaakt. */
	.chat-message {
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem;
		padding: 1.1rem 1.1rem;
	}

	/* Met minmax(0, 1fr) wordt de kolom niet meer opgerekt, maar een lange URL
	   steekt dan nog steeds buiten zijn eigen vak. Laten afbreken waar het niet
	   anders kan; gewone woorden blijven heel. */
	.message-content,
	.message-sources,
	.research-trace,
	.chat-mail-msg {
		overflow-wrap: anywhere;
	}

	/* Tabellen en codeblokken kunnen niet afbreken zonder onleesbaar te worden.
	   Die krijgen hun eigen horizontale scrollbalk, zodat de rest van het antwoord
	   gewoon binnen beeld blijft. */
	.message-content table,
	.message-content pre {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	.message-toolbar { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.message-content, .message-sources, .research-trace { grid-column: auto; }
	.chat-status, .chat-footer { padding-left: 1.1rem; padding-right: 1.1rem; }
}