.wf-chat {
    --wf-chat-w: 380px;
    --wf-chat-h: 560px;
    --wf-chat-radius: 18px;
    /* Hoogte van de chatknop + de ruimte tussen knop en venster. Het venster hangt hier precies
       bovenop, zodat de knop nooit van zijn plek komt als het venster opengaat. */
    --wf-chat-knop: 60px;
    --wf-chat-gat: 14px;
    position: fixed;
    /* Marges via de gedeelde tokens uit wf-2026-system.css: "naar boven" leest dezelfde waarden en
       staat daardoor altijd recht boven deze knop, op elke schermbreedte. */
    right: var(--wf-zweef-rechts, 24px);
    bottom: var(--wf-zweef-onder, 24px);
    z-index: 1045; /* onder Bootstrap-modals (1055), boven de rest */
    font-size: 14px;
}

/* ── Startknop ──────────────────────────────────────────────────────────────
   Een pil met label in plaats van een kaal rondje: "Chat met een expert" zegt wat
   je krijgt, en dat is precies het verschil dat we willen uitstralen. */
.wf-chat-launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px 0 8px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #a12359, #da176c);
    color: #fff;
    font-family: var(--font-body, inherit);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(161, 35, 89, .34);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, filter .35s;
}

.wf-chat-launcher:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(161, 35, 89, .42);
}

.wf-chat-launcher:focus-visible {
    outline: 3px solid rgba(50, 188, 238, .55);
    outline-offset: 2px;
}

.wf-chat-launcher-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Groen stipje = er is nu echt een expert beschikbaar. */
.wf-chat-launcher-dot {
    position: absolute;
    top: 6px;
    left: 32px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--wf-green, #b0d136);
    border: 2px solid #fff;
    animation: wf-chat-pulse 2.4s ease-out infinite;
}

@keyframes wf-chat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(176, 209, 54, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(176, 209, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(176, 209, 54, 0); }
}

/* Het cijfer op de chatknop: hoeveel berichten of gesprekken wachten er nog op je. Iets ruimer dan
   eerst (21 → 25px), want met een "9+" erin zat het tegen de rand aan. Staat op beide widgets. */
.wf-chat-unread {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 9999px;
    background: var(--bs-danger, #d81f25);
    border: 2px solid #fff;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 21px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(216, 31, 37, .45);
}

[data-bs-theme="dark"] .wf-chat-unread { border-color: #2a3447; }

/* De knop blijft staan als het venster openstaat — hij is de toggle. Het icoon blijft daarbij
   gewoon rechtop; een draaiend icoon leidde alleen maar af. (Was: display:none, waardoor de knop
   verdween en het venster naar beneden zakte.) */
.wf-chat-launcher { position: relative; z-index: 3; }

/* Donkere laag over de rest van het scherm zolang de chat openstaat. Klikken sluit hem — net als
   het nog een keer op de chatknop drukken. Ligt onder het venster en onder de knop, want die twee
   moeten juist bruikbaar blijven. */
.wf-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(1, 16, 61, .42);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    animation: wf-chat-veil .22s ease-out;
    border: none;
    padding: 0;
    cursor: default;
}
@keyframes wf-chat-veil { from { opacity: 0; } to { opacity: 1; } }

.wf-chat-bounce { animation: wf-chat-bounce .6s ease; }

@keyframes wf-chat-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-7px); }
    60%      { transform: translateY(-3px); }
}

/* ── Venster ──────────────────────────────────────────────────────────────── */
/* Het venster hangt ABSOLUUT boven de knop in plaats van er in de stroom bovenop te staan. Anders
   duwt het venster de knop omhoog en staat die ineens ergens anders — precies wat je niet wilt bij
   een knop die je gebruikt om het venster weer te sluiten. */
/* Een eigen tekstkleur voor het hele venster. Zonder dit erft alles wat zelf geen kleur zet de
   kleur van de pagina eromheen — op een donkere site is dat wit, en dan verdwijnt de tekst in ons
   witte venster. Dezelfde soort fout als de padding hieronder: leunen op een standaard die op
   andermans site iets anders is. */
.wf-chat {
    color: var(--wf-text, #1f2937);
}

/* Verborgen is verborgen. Het `hidden`-attribuut is maar een browserstandaard (display:none), en
   een site die ergens `input { display: inline-block }` heeft staan wint daarvan — dan verscheen
   ineens het kale "Bestand kiezen" van ons verborgen bestandsveld midden in de widget. Gezien op
   perfectmanage.nl. */
.wf-chat [hidden] {
    display: none !important;
}

/* margin/padding expliciet op nul: dit is een <section>, en een site die ergens
   `section { padding: 100px 0 }` heeft staan duwde daarmee onze kopbalk honderd pixels omlaag en
   zette een wit vlak onder de composer. Precies dat gebeurde op offertemaster.ai. Een klasse wint
   van een elementselector, dus hiermee komt hun regel er niet meer doorheen.
   Tegen een gastheer die !important gebruikt helpt dit niet; dat vangt het insluitscript af
   (ChatWidgetController), want daar weten we zeker dat we op andermans site staan. */
.wf-chat-panel {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    bottom: calc(var(--wf-chat-knop) + var(--wf-chat-gat));
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: var(--wf-chat-w);
    height: var(--wf-chat-h);
    max-height: calc(100vh - var(--wf-chat-knop) - var(--wf-chat-gat) - 48px);
    border-radius: var(--wf-chat-radius);
    background: var(--wf-surface, #fff);
    border: 1px solid var(--wf-border, #e2e8f0);
    box-shadow: 0 24px 60px rgba(1, 16, 61, .22);
    overflow: hidden;
    animation: wf-chat-in .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes wf-chat-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Kop ──────────────────────────────────────────────────────────────────── */
/* De kop draagt de kleuren van de Webfix AI-header uit de stijlgids: de achtergrond komt van
   .wf-ai-bg (wf-2026-system.css), hier alleen de indeling. Was een magenta verloop; de chat is
   Webfix AI met een expert als achtervang, dus hoort hij bij de AI-kleuren. */
/* Zelfde verhaal als bij .wf-chat-panel: dit is een <header>, en die stylen sites graag. */
.wf-chat-head {
    margin: 0;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 14px 16px;
    color: #fff;
}

/* De lichtsluier van .wf-ai-bg ligt over het element; de inhoud moet er dus bovenop. */
.wf-chat-head > * { position: relative; }

.wf-chat-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.wf-chat-head-main { flex: 1 1 auto; min-width: 0; }
/* Eén regel, en afkappen als het niet past. "Webfix AI helpt u graag verder" brak anders over twee
   regels en maakte de kopbalk een stuk hoger dan bedoeld — goed zichtbaar zodra de naam van de AI
   per site verschilt en dus langer kan zijn. */
.wf-chat-title,
.wf-chat-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-chat-status > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.wf-chat-title { font-weight: 800; font-size: 15px; line-height: 1.2; }

.wf-chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
    margin-top: 2px;
}

.wf-chat-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.wf-chat-status.is-online .wf-chat-dot { background: var(--wf-green, #b0d136); }
.wf-chat-status.is-offline .wf-chat-dot { background: #f0b429; }

.wf-chat-iconbtn,
.wf-chat-head-back {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

.wf-chat-iconbtn:hover,
.wf-chat-head-back:hover { background: rgba(255, 255, 255, .26); }

/* ── Berichten ────────────────────────────────────────────────────────────── */
.wf-chat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    background: var(--wf-bg, #f5f6fa);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-chat-intro {
    margin: auto 0;
    text-align: center;
    padding: 12px 6px;
}

.wf-chat-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background: var(--wf-green-subtle, #f3fad7);
    color: var(--wf-green-text, #5a6e0e);
    font-size: 22px;
    margin-bottom: 10px;
}

.wf-chat-intro-title {
    margin: 0 0 4px;
    font-weight: 800;
    font-size: 15px;
    color: var(--wf-text, #1e293b);
}

.wf-chat-intro-text {
    margin: 0;
    font-size: 13px;
    color: var(--wf-text-soft, #475569);
    line-height: 1.5;
}

.wf-chat-msg { display: flex; flex-direction: column; max-width: 84%; }
.wf-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.wf-chat-msg.them { align-self: flex-start; align-items: flex-start; }
/* Alleen de KANT, niet het uiterlijk. In ons eigen chatvenster staat alles wat niet van de klant
   komt rechts — ook Webfix AI, net als in het chatdashboard (Tom, 18-09-2026). Die bel houdt zijn
   eigen kader met de merkgradient; hij schuift alleen naar de overkant. Bij de klant wordt deze
   klasse nooit gezet: daar is rechts zíjn kant. */
.wf-chat-msg.wf-chat-rechts { align-self: flex-end; align-items: flex-end; }
/* Het "staartje" van de bel hoort aan de kant waar hij staat. Een bel van Webfix AI die naar rechts
   schuift, houdt anders zijn hoekje linksonder. */
.wf-chat-msg.wf-chat-rechts.them .wf-chat-bubble {
    border-bottom-left-radius: 16px;   /* dezelfde ronding als .wf-chat-bubble hieronder */
    border-bottom-right-radius: 5px;
}

.wf-chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--wf-surface, #fff);
    color: var(--wf-text, #1e293b);
    border: 1px solid var(--wf-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(1, 16, 61, .05);
}

.wf-chat-msg.mine .wf-chat-bubble {
    background: linear-gradient(135deg, #a12359, #b8115a);
    color: #fff;
    border-color: transparent;
    border-bottom-right-radius: 5px;
}

.wf-chat-msg.them .wf-chat-bubble { border-bottom-left-radius: 5px; }

/* Webfix AI krijgt een eigen, herkenbare rand in de merkgradient — de klant moet altijd
   kunnen zien of hij met een mens of met AI praat. */
.wf-chat-msg.ai .wf-chat-bubble {
    border-color: transparent;
    background:
        linear-gradient(var(--wf-surface, #fff), var(--wf-surface, #fff)) padding-box,
        linear-gradient(120deg, var(--wf-green, #b0d136), var(--wf-pink, #da176c), var(--wf-blue, #32bcee)) border-box;
    border: 1.5px solid transparent;
}

.wf-chat-meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--wf-muted, #94a3b8);
    padding: 0 4px;
}

.wf-chat-sys {
    align-self: center;
    max-width: 92%;
    text-align: center;
    font-size: 11.5px;
    color: var(--wf-muted, #94a3b8);
    padding: 2px 8px;
}

/* Bijlage in een bericht — in de tinten van de Webfix AI-header (navy #000229 → cyaan #6fd2f2),
   zodat de chat één kleurenfamilie heeft in plaats van een losse blauwe accentkleur. */
.wf-chat-attach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(0, 2, 41, .05);
    border: 1px solid rgba(111, 210, 242, .45);
    color: var(--wf-text, #1e293b);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
}

.wf-chat-attach:hover { background: rgba(0, 2, 41, .09); border-color: rgba(111, 210, 242, .75); color: var(--wf-text, #1e293b); }
.wf-chat-attach > i { color: #2b325c; }
.wf-chat-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-chat-msg.mine .wf-chat-attach { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }
.wf-chat-msg.mine .wf-chat-attach > i { color: #fff; }

/* Achtergrond achter een geüploade foto. Een PNG met transparantie liet anders de bubbelkleur
   doorschemeren — op een eigen bericht was dat de volle magenta, en dan is de foto niet meer te
   beoordelen. Nu een rustig AI-navy vlak, in beide bubbels hetzelfde. */
.wf-chat-thumb {
    display: block;
    margin-top: 6px;
    max-width: 100%;
    border-radius: 12px;
    background: rgba(0, 2, 41, .06);
    border: 1px solid rgba(111, 210, 242, .35);
}
.wf-chat-msg.mine .wf-chat-thumb { background: rgba(0, 2, 41, .22); border-color: rgba(255, 255, 255, .35); }

/* Keuzeknoppen onder een bericht (increment 3: AI-keuzes en Smart Bubbles). */
/* De voet onder een antwoord van Webfix AI: een streepje en daarachter de weg naar een mens.
   Groen + headset = er is iemand online en je kunt meteen doorpraten; blauw + envelop = er is
   niemand, dus het wordt een bericht dat blijft liggen. De linkjes zijn de systeembrede .wf-link-
   varianten uit wf-2026-system.css (rol-gradient), hier alleen op maat gezet voor een bubbel. */
.wf-chat-aivoet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(1, 16, 61, .10);
    font-size: 12px;
    line-height: 1.4;
}

/* Het bijschrift op een eigen regel. Inline liep het bij drie namen af met een streepje aan het
   einde van de regel en de rest eronder — een losse divider zonder naam erachter leest als een fout. */
.wf-chat-aivoet-label { width: 100%; color: #6b7280; font-weight: 600; }

.wf-chat-aivoet button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    /* Alleen de vlakke kleur weghalen, niet de background-image: .wf-link-* tekent de naam met een
       gradient die via background-clip op de tekst valt. Een `background: none` hier wist die
       gradient en dan blijft er een onzichtbare (transparante) naam over. */
    background-color: transparent;
    font-size: 12px;
    font-family: inherit;
}

/* Het icoontje ligt binnen het element dat de gradient op zijn tekst clipt, dus het krijgt vanzelf
   dezelfde kleurloop als de naam ernaast. */
.wf-chat-aivoet button i { font-size: 12.5px; }
.wf-chat-aivoet button:disabled { opacity: .55; cursor: default; text-decoration: none; }
.wf-chat-aivoet .wf-link-divider { height: 12px; }

.wf-chat-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

.wf-chat-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(161, 35, 89, .28);
    background: rgba(161, 35, 89, .06);
    color: var(--wf-title, #a12359);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, background .2s;
}

.wf-chat-choice:hover { transform: translateY(-1px); background: rgba(161, 35, 89, .12); }
.wf-chat-choice[disabled] { opacity: .5; cursor: default; transform: none; }

/* Terugbelformulier in de chat — alleen zichtbaar binnen het belvenster. */
.wf-chat-callback { display: flex; flex-direction: column; gap: 7px; }
.wf-chat-callback-title { margin: 0 0 2px; font-weight: 700; font-size: 13px; }

.wf-chat-callback-in {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--wf-border, #e2e8f0);
    border-radius: 10px;
    background: var(--wf-bg, #f5f6fa);
    color: var(--wf-text, #1e293b);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.wf-chat-callback-in:focus { border-color: rgba(161, 35, 89, .45); }

/* ── Bericht achterlaten ──────────────────────────────────────────────────────
   Verschijnt als de klant op een naam klikt terwijl er niemand online is. Boven
   staat wat er meegaat (de laatste regels van het gesprek), daaronder zijn eigen
   vraag. Zonder dat lijstje typt hij zijn vraag over, of denkt hij dat wij niets
   van het gesprek zien.                                                        */
.wf-chat-bericht { display: flex; flex-direction: column; gap: 9px; }
.wf-chat-bericht-t { margin: 0; font-weight: 700; font-size: 13px; }

.wf-chat-bericht-sam {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--wf-border, #e2e8f0);
}
.wf-chat-bericht-lab {
    display: block;
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wf-muted, #94a3b8);
}
.wf-chat-bericht-sam ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.wf-chat-bericht-sam li { font-size: 12px; line-height: 1.4; color: var(--wf-text-soft, #475569); }
.wf-chat-bericht-sam li span { font-weight: 700; margin-right: 5px; color: var(--wf-text, #1e293b); }

.wf-chat-bericht-in {
    width: 100%;
    min-height: 68px;
    padding: 9px 11px;
    border: 1px solid var(--wf-border, #e2e8f0);
    border-radius: 10px;
    background: var(--wf-bg, #f5f6fa);
    color: var(--wf-text, #1e293b);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.wf-chat-bericht-in:focus { border-color: rgba(161, 35, 89, .45); }
.wf-chat-bericht-in:disabled { opacity: .6; }
.wf-chat-bericht-ok { align-self: flex-start; }

/* ── Typ-indicator ────────────────────────────────────────────────────────── */
.wf-chat-typing {
    flex: none;
    display: flex;
    gap: 4px;
    padding: 0 20px 8px;
    background: var(--wf-bg, #f5f6fa);
}

.wf-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-muted, #94a3b8);
    animation: wf-chat-blink 1.4s infinite both;
}

.wf-chat-typing span:nth-child(2) { animation-delay: .2s; }
.wf-chat-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes wf-chat-blink {
    0%, 80%, 100% { opacity: .25; }
    40%           { opacity: 1; }
}

/* ── Meldingsbalk + gekozen bijlage ───────────────────────────────────────── */
.wf-chat-note {
    flex: none;
    padding: 9px 16px;
    font-size: 12px;
    line-height: 1.45;
    background: rgba(50, 188, 238, .10);
    color: var(--wf-text-soft, #475569);
    border-top: 1px solid var(--wf-border-lt, #f1f5f9);
}

.wf-chat-note.is-error { background: rgba(216, 31, 37, .10); color: var(--bs-danger, #d81f25); font-weight: 600; }

.wf-chat-file {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12.5px;
    color: var(--wf-text-soft, #475569);
    background: var(--wf-hover-bg, #f8fafc);
    border-top: 1px solid var(--wf-border-lt, #f1f5f9);
}

.wf-chat-file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.wf-chat-file-x {
    flex: none;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--wf-muted, #94a3b8);
    cursor: pointer;
    font-size: 11px;
}

/* ── Antwoordvak: de gedeelde composer uit de stijlgids ──────────────────────
   Was een rij met losse knoppen naast een smal tekstveldje; dat oogde rommelig en het veld liet
   op Windows zijn scrollpijltjes zien zodra er één regel in stond. Nu hetzelfde omkaderde vlak als
   in de team-inbox en de flow-wizard (wf-composer.css): bijlage linksonder, dicteren en versturen
   rechtsonder. Hier alleen de afwijkingen die dit smalle venster nodig heeft. */
.wf-chat-input {
    flex: none;
    padding: 8px 12px 10px;
    background: var(--wf-surface, #fff);
    border-top: 1px solid var(--wf-border, #e2e8f0);
}

/* De composer staat op grote schermen standaard op 70% breedte (bedoeld voor een paginakolom);
   in een chatvenster van ~340px moet hij juist de volle breedte pakken. */
.wf-chat-composer { max-width: none; width: 100%; box-sizing: border-box; }
@media (min-width: 992px) {.wf-chat-composer { max-width: none; }
}

/* Hoger dan de standaard compacte variant: twee regels zichtbaar, daarna meegroeien tot een cap.
   Boven die cap scrollt het veld — anders duwt een lang bericht de gesprekken uit beeld.
   overflow-y:auto i.p.v. hidden, met een dunne scrollbalk zonder pijltjesknoppen. */
.wf-chat-composer .wf-ctext {
    /* Expliciete kleur, geen `inherit`. wf-composer.css valt terug op de tekstkleur van de pagina
       eromheen, en op perfectmanage.nl is die wit — dan typ je in een wit veld met witte letters en
       zie je pas wat je typte als je het selecteert. Gemeld door Tom op 08-09-2026. */
    color: var(--wf-text, #1f2937);
    min-height: 52px;
    max-height: 150px;
    padding: 12px 14px 2px;
    font-size: 13.5px;
    line-height: 1.45;
    overflow-y: auto;
    scrollbar-width: thin;
}
.wf-chat-composer .wf-ctext::placeholder { color: var(--wf-muted, #9aa3b2); }
.wf-chat-composer .wf-ctext::-webkit-scrollbar { width: 6px; }
.wf-chat-composer .wf-ctext::-webkit-scrollbar-button { display: none; }
.wf-chat-composer .wf-ctext::-webkit-scrollbar-thumb { background: rgba(1, 16, 61, .18); border-radius: 9999px; }
.wf-chat-composer .wf-ctext:disabled { opacity: .55; cursor: default; }

/* Het invoerveld zelf: geen eigen rand, geen eigen vlak, geen eigen schaduw.
   Op een vreemde site heeft een <textarea> die gauw wél — een rand, een afronding, een grijs vlak —
   en dan zit er een tweede kader binnen ons kader. Onze eigen omlijsting (.wf-composer) is de enige
   die er hoort te staan. Gezien op offertemaster.ai. */
.wf-chat-composer .wf-ctext {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    margin: 0;
}

.wf-chat-composer .wf-ctext:focus,
.wf-chat-composer .wf-ctext:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

/* En de knoppenrij sluit strak aan op het invoerveld: 5px, niet meer. Een gastheer die zijn
   <textarea> een eigen hoogte of marge geeft, duwde die rij anders naar beneden. */
.wf-chat-composer .wf-ctools { padding: 5px 6px 6px; margin: 0; }
/* Versturen blijft rechts, ook als de bijlageknop links ontbreekt (bij een bezoeker). */
.wf-chat-composer .wf-ctools-r { margin-left: auto; }

/* De bijlage- en microfoonknop houden hun formaat uit het Spike-thema: dat zet
   `.round { width: 45px !important }` in het beschermde styles.css, en daar gaan we hier niet
   tegenin. De verzendknop stemmen we erop af in plaats van andersom, zodat de drie knoppen als
   één rij lezen — precies zoals in de team-inbox. */
.wf-chat-composer .wf-csend { width: 40px; height: 40px; font-size: 15px; }
.wf-chat-composer .wf-csend:disabled { opacity: .45; cursor: default; box-shadow: none; background: var(--wf-pink, #da176c); }
.wf-chat-composer .wf-csend:disabled:hover { background: var(--wf-pink, #da176c); }
.wf-chat-composer .wf-ctool i { font-size: 16px; }

/* Merkkleur voor de composer-rand bij focus: de chat is magenta, niet blauw. */
.wf-chat-composer:focus-within { border-color: rgba(161, 35, 89, .45); box-shadow: 0 0 0 4px rgba(161, 35, 89, .10); }

.wf-chat-foot {
    /* Ook dit is een HTML5-element (<footer>) dat een gastheer-site graag zelf stylet. */
    margin: 0;
    flex: none;
    padding: 0 16px 10px;
    background: var(--wf-surface, #fff);
    text-align: center;
}

.wf-chat-endlink {
    border: none;
    background: none;
    padding: 0;
    font-size: 11.5px;
    color: var(--wf-muted, #94a3b8);
    text-decoration: underline;
    cursor: pointer;
}

.wf-chat-endlink:hover { color: var(--wf-title, #a12359); }

/* "Nieuwe vraag stellen" verschijnt op dezelfde plek zodra het gesprek is afgesloten. Wél opvallend
   — dit is op dat moment de enige weg terug, dus geen grijs onderstreept linkje. */
.wf-chat-newlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--wf-title, #a12359);
    border-radius: 999px;
    background: none;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wf-title, #a12359);
    cursor: pointer;
}

.wf-chat-newlink:hover { background: var(--wf-title, #a12359); color: #fff; }

/* "U chat met Webfix AI" in de kop. Nodig zodra een gesprek bij de AI-kaart begint: zonder deze
   regel staat er "Experts online" en zit de klant te wachten op een mens die niet onderweg is. */
.wf-chat-metai { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.wf-chat-metai .wf-ai-mark { font-size: 12.5px; }

/* ── Wie kunt u spreken ───────────────────────────────────────────────────────
   We zijn met een klein clubje, dus in plaats van "Experts online" staan de namen er gewoon:
   dat leest persoonlijker en de klant kan meteen kiezen wie hij liever spreekt. Klikken legt een
   VOORKEUR vast — geen toewijzing, want als die collega net niet kan moet een ander het gewoon
   kunnen oppakken. */
.wf-chat-expert {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.wf-chat-expert:hover { color: #fff; }

.wf-chat-voorkeur { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.wf-chat-voorkeur i { font-size: 10px; }

.wf-chat-expert-wis {
    margin-left: 8px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: inherit;
    opacity: .75;
    text-decoration: underline;
    cursor: pointer;
}

.wf-chat-expert-wis:hover { opacity: 1; }

/* Dezelfde keuze als knoppen in het startscherm — daar heeft iemand nog niets getypt en kiest hij
   het makkelijkst. */
.wf-chat-experts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: 260px;
    margin: 16px auto 0;
}

.wf-chat-expert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(161, 35, 89, .28);
    border-radius: 9999px;
    background: var(--wf-surface, #fff);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    color: var(--wf-title, #a12359);
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}

.wf-chat-expert-btn:hover { background: rgba(218, 23, 108, .07); transform: translateY(-1px); }
.wf-chat-expert-btn i { font-size: 15px; }

/* "Geen voorkeur" is de rustige uitweg: een echte knop met een dun grijs kader, maar duidelijk
   geen hoofdactie. Hij staat er alleen als er meer dan één collega online is — met één naam is het
   een vraag zonder alternatief (zie tekenIntroKeuze in live-chat.js). */
.wf-chat-expert-btn.-geen {
    height: 34px;
    border: 1px solid var(--wf-border, #e2e8f0);
    background: var(--wf-surface, #fff);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--wf-text-soft, #475569);
}

.wf-chat-expert-btn.-geen:hover { border-color: var(--wf-muted, #94a3b8); background: var(--wf-surface, #fff); color: var(--wf-text, #1e293b); transform: none; }

[data-bs-theme="dark"] .wf-chat-expert-btn { background: rgba(255, 255, 255, .06); border-color: rgba(241, 169, 203, .32); color: #f1a9cb; }

/* ── Eerdere gesprekken ───────────────────────────────────────────────────── */
.wf-chat-history {
    position: absolute;
    inset: 66px 0 0;
    z-index: 2;
    overflow-y: auto;
    padding: 16px;
    background: var(--wf-bg, #f5f6fa);
}

.wf-chat-history-title { margin: 0 0 10px; font-weight: 800; font-size: 13px; color: var(--wf-text, #1e293b); }
.wf-chat-history-list { display: flex; flex-direction: column; gap: 8px; }

.wf-chat-history-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--wf-border, #e2e8f0);
    background: var(--wf-surface, #fff);
    cursor: pointer;
    transition: transform .25s, border-color .2s;
}

.wf-chat-history-item:hover { transform: translateY(-1px); border-color: rgba(161, 35, 89, .35); }
.wf-chat-history-when { font-size: 11px; color: var(--wf-muted, #94a3b8); }

.wf-chat-history-prev {
    display: block;
    font-size: 13px;
    color: var(--wf-text, #1e293b);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-chat-history-empty { font-size: 13px; color: var(--wf-muted, #94a3b8); }

/* ── Gesprek afsluiten (modal) ────────────────────────────────────────────────
   Het afsluiten zat hiervoor als schermpje IN het venster (.wf-chat-close, absoluut over de
   berichten heen). Dat leest als "even iets wegschuiven" terwijl het onomkeerbaar is; sinds
   29-08-2026 is het een echte modal met de Webfix support-kop. De opmaak hieronder hoort bij
   #wfLcEndModal in _LiveChatWidget.cshtml. */
/* Zelfde breedte als de andere Webfix AI-vensters: 640px. */
.wf-chat-endmodal .modal-dialog { max-width: 640px; }
.wf-chat-endmodal .modal-content { border: none; border-radius: 18px; overflow: hidden; }
/* De titelbalk zonder eigen afronding: het venster knipt de hoeken al af. Had de balk zijn eigen
   18px, dan piepte er waar het venster een andere afronding kreeg (op een vreemde site zet het
   insluitscript die) een wit hoekje doorheen, linksboven en rechtsboven. */
.wf-chat-endmodal .wf-flows-modalhead { border-radius: 0; }
/* Het functionele icoon in de witte chip kleurt mee met de AI-kop (flows.css regelt dit voor de
   andere varianten, niet voor -ai; daar staat het merklogo). */
.wf-chat-endmodal .wf-flows-modalhead-logo i { color: #2b325c; }

.wf-chat-endbody { padding: 20px 22px 4px; }
.wf-chat-endtitle { margin: 0 0 4px; font-weight: 800; font-size: 16.5px; color: var(--wf-text, #1e293b); }
.wf-chat-endtext { margin: 0 0 16px; font-size: 13px; color: var(--wf-text-soft, #475569); }

/* De vragenkaart: rustig vlak, duidelijk los van de vraag erboven. */
.wf-chat-endcard {
    border: 1px solid var(--wf-border, #e2e8f0);
    border-radius: 14px;
    background: var(--wf-bg, #f8f9fc);
    padding: 14px 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wf-chat-endcard-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--wf-text, #1e293b);
}

/* "optioneel" hoort niet als waarschuwing te lezen — vandaar een stil grijs pilletje. */
.wf-chat-endopt {
    border-radius: 999px;
    background: rgba(1, 16, 61, .06);
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wf-muted, #94a3b8);
}

.wf-chat-endq { display: flex; flex-direction: column; gap: 8px; }
.wf-chat-endq-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--wf-text, #1e293b); }
.wf-chat-endq-btns { display: flex; gap: 8px; }
/* Even breed, zodat Ja en Nee visueel gelijkwaardig zijn: geen van beide is het "goede" antwoord. */
.wf-chat-endq-btn { flex: 1 1 0; justify-content: center; }

.wf-chat-close-comment {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--wf-border, #e2e8f0);
    border-radius: 12px;
    background: var(--wf-surface, #fff);
    color: var(--wf-text, #1e293b);
    font-family: inherit;
    font-size: 13px;
    resize: none;
    outline: none;
}

.wf-chat-close-comment:focus { border-color: rgba(161, 35, 89, .45); }

.wf-chat-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--wf-text-soft, #475569);
    cursor: pointer;
    line-height: 1.4;
}

.wf-chat-check input { margin-top: 2px; }

/* Eigen flex-indeling in plaats van die van Bootstrap's .modal-footer: op een site zonder
   Bootstrap-CSS stonden de knoppen anders los tegen de linkerrand. */
.wf-chat-endfoot { display: flex; align-items: center; border-top: none; padding: 16px 22px 20px; gap: 8px; }
.wf-chat-endfoot .wf-btn { flex: 1 1 0; margin: 0; justify-content: center; }

/* ── Donkere modus ────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .wf-chat-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
[data-bs-theme="dark"] .wf-chat-launcher-dot { border-color: #2a3447; }
[data-bs-theme="dark"] .wf-chat-bubble { box-shadow: none; }
[data-bs-theme="dark"] .wf-chat-choice { background: rgba(241, 169, 203, .10); border-color: rgba(241, 169, 203, .32); color: #f1a9cb; }
[data-bs-theme="dark"] .wf-chat-choice:hover { background: rgba(241, 169, 203, .18); }
[data-bs-theme="dark"] .wf-chat-attach { color: var(--wf-text, #e6eaf0); background: rgba(111, 210, 242, .10); border-color: rgba(111, 210, 242, .35); }
[data-bs-theme="dark"] .wf-chat-attach:hover { background: rgba(111, 210, 242, .18); }
[data-bs-theme="dark"] .wf-chat-attach > i { color: #6fd2f2; }
[data-bs-theme="dark"] .wf-chat-thumb { background: rgba(255, 255, 255, .06); border-color: rgba(111, 210, 242, .28); }
[data-bs-theme="dark"] .wf-chat-note { background: rgba(50, 188, 238, .14); }
/* De composer heeft eigen donkere tokens (wf-composer.css); hier alleen wat bij dit venster hoort. */
[data-bs-theme="dark"] .wf-chat-composer .wf-ctext { color: var(--wf-text, #e6eaf0); }
[data-bs-theme="dark"] .wf-chat-composer .wf-ctext::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .wf-chat-composer:focus-within { border-color: rgba(241, 169, 203, .55); box-shadow: 0 0 0 4px rgba(241, 169, 203, .12); }

/* ── "Is uw vraag hiermee opgelost?" ──────────────────────────
   Compact kadertje links naast de chatknop, nadat de klant op een actieknop klikte en het venster
   dichtging. Bewust klein en zonder donkere laag eronder: hij is de pagina aan het bekijken en dat
   mogen we niet onderbreken — dit is een vraag terzijde, geen dialoogvenster. */
.wf-chat-opgelost {
    position: absolute;
    right: calc(var(--wf-chat-knop) + var(--wf-chat-gat));
    bottom: 4px;
    z-index: 2;
    width: 224px;
    padding: 12px 14px 12px;
    border-radius: 14px;
    background: var(--wf-surface, #fff);
    border: 1px solid var(--wf-border, #e2e8f0);
    box-shadow: 0 14px 34px rgba(1, 16, 61, .18);
    animation: wf-chat-in .28s cubic-bezier(.16, 1, .3, 1);
}

.wf-chat-opgelost-vraag {
    margin: 0 0 10px;
    padding-right: 14px;   /* ruimte voor het kruisje */
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wf-text, #1f2937);
}

.wf-chat-opgelost-knoppen { display: flex; gap: 8px; }
.wf-chat-opgelost-knoppen .wf-chat-choice { flex: 1; justify-content: center; }

/* Een linkje, geen knop: wie hier klikt beantwoordt de vraag erboven niet, hij loopt eromheen. */
.wf-chat-opgelost-verder {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--wf-muted, #6b7280);
    text-decoration: underline;
    cursor: pointer;
}

.wf-chat-opgelost-verder:hover { color: var(--wf-text, #1f2937); }

.wf-chat-opgelost-x {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    padding: 4px;
    line-height: 1;
    font-size: 10px;
    color: var(--wf-muted, #6b7280);
    cursor: pointer;
}

.wf-chat-opgelost-x:hover { color: var(--wf-text, #1f2937); }

[data-bs-theme="dark"] .wf-chat-opgelost { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }

/* Keuzeknoppen onder een systeemregel. Die komen voor op sites waar onze AI uitstaat: daar komt
   het menu "Wat wilt u doen?" van Systeem in plaats van van Webfix AI. Gecentreerd, zoals de regel
   erboven — ze horen bij elkaar. */
.wf-chat-sys-keuzes {
    justify-content: center;
    margin: 2px 0 10px;
}

/* Het e-mailveld op de "bericht achterlaten"-kaart. Verschijnt alleen als we het adres nog niet
   kennen — bij een ingelogde klant staat het in zijn account. */
.wf-chat-bericht-mail {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--wf-border, #d8e0ea);
    border-radius: 10px;
    background: var(--wf-surface, #fff);
    color: var(--wf-text, #1f2937);
    font-size: 13px;
}

.wf-chat-bericht-mail::placeholder { color: var(--wf-muted, #9aa3b2); }

/* "Mail chat naar mijzelf" - het verslag van een afgesloten gesprek. Zelfde vorm als de
   bericht-achterlaten-kaart: een veld (alleen bij een bezoeker, want van een ingelogde klant
   kennen we het adres) en een knop, met de bevestiging eronder. */
.wf-chat-verslag { display: flex; flex-direction: column; gap: 8px; }
.wf-chat-verslag .wf-chat-bericht-mail { margin-bottom: 0; }
.wf-chat-verslag-ok { align-self: flex-start; }
.wf-chat-verslag-uit { margin: 0; font-size: 12.5px; color: var(--wf-text-soft, #4b5563); }
.wf-chat-bericht-mail.is-fout { border-color: #d81f25; }
/* Hetzelfde signaal in het terugbelformulier: naam of nummer ontbreekt. */
.wf-chat-callback-in.is-fout { border-color: #d81f25; }
/* Hetzelfde veld in het afsluitvenster, onder "Stuur mij een kopie" (alleen bij een onbekende bezoeker). */
.wf-chat-kopie-mail { margin: 8px 0 0; }

/* ── Klantweergave: wat ziet de klant onder dit bericht? ─────────────────────
   In onze inbox stond alleen de tekst. De keuzeknoppen, de Flows-knop en de vaste regel met
   collega's zag de klant wél en wij niet — je las dus "Wat wilt u doen?" zonder de antwoorden.
   Deze schets tekent ze na: grijs, gestippeld en niet klikbaar, zodat meteen duidelijk is dat het
   andermans scherm is en geen knop van jou. Zie klantweergave.js. */
.wf-klantweergave {
    margin-top: 10px;
    padding: 8px 10px 9px;
    border: 1px dashed var(--wf-border, #d8e0ea);
    border-radius: 10px;
    background: rgba(1, 16, 61, .025);
    /* Kijken mag, klikken niet: het is een afbeelding van het scherm van de klant. */
    pointer-events: none;
    user-select: none;
}

.wf-klantweergave-kop {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wf-muted, #9aa3b2);
    margin-bottom: 6px;
}

.wf-klantweergave-rij { display: flex; flex-wrap: wrap; gap: 6px; }

.wf-klantweergave-knop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--wf-border, #d8e0ea);
    background: rgba(255, 255, 255, .7);
    color: var(--wf-muted, #6b7280);
    font-size: 11.5px;
    font-weight: 600;
}

/* Het Flows-woordmerk erbij, zodat je herkent dat de klant daar een flow instapt en niet zomaar
   een link krijgt. */
.wf-klantweergave-merk {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .02em;
    color: #a12359;
    opacity: .55;
}

.wf-klantweergave-voet {
    margin-top: 6px;
    font-size: 11px;
    color: var(--wf-muted, #9aa3b2);
    font-style: italic;
}

[data-bs-theme="dark"] .wf-klantweergave { background: rgba(255, 255, 255, .04); }
[data-bs-theme="dark"] .wf-klantweergave-knop { background: rgba(255, 255, 255, .05); }

/* ── "Met wie chatten wij?" — de intake voor onbekende bezoekers ────────────
   Zelfde vorm als het terugbelformulier en de kaart "bericht achterlaten": velden onder elkaar in
   een bel van ons, met één knop eronder. Bewust geen apart venster — dan zou de bezoeker uit de
   chat gehaald worden voor hij er goed en wel in zat. */
/* Het formulier staat over de volle breedte van het venster en niet in een bel aan de linkerkant
   (Tom, 12-10-2026). Een bel is voor wat iemand zegt; dit is iets wat je invult, en in 84% breedte
   links stond het scheef en onnodig smal. De marges zijn dezelfde als die van de bellen eromheen,
   want die komen van de padding van .wf-chat-body — hier dus geen eigen marge bovenop. */
.wf-chat-intakekaart {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.wf-chat-intakevak {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--wf-surface, #fff);
    border: 1px solid var(--wf-border, #e2e8f0);
}

[data-bs-theme="dark"] .wf-chat-intakevak { background: rgba(255, 255, 255, .04); }

.wf-chat-intake { display: flex; flex-direction: column; gap: 8px; }

.wf-chat-intake-kop {
    margin: 0;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--wf-chat-ink, #1e293b);
}

.wf-chat-intake-uit,
.wf-chat-intake-waarom {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--wf-chat-soft, #64748b);
}
.wf-chat-intake-waarom { margin-top: -2px; }

/* De keuze organisatie / particulier, alleen waar een particulier welkom is. */
.wf-chat-intake-keuze { display: flex; gap: 6px; }
.wf-chat-intake-keuze .wf-chat-choice { flex: 1 1 0; }
.wf-chat-intake-keuze .wf-chat-choice.is-gekozen {
    border-color: var(--wf-chat-accent, #a12359);
    color: var(--wf-chat-accent, #a12359);
    font-weight: 700;
}

.wf-chat-intake-in {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--wf-chat-line, #e2e8f0);
    border-radius: 10px;
    background: var(--wf-surface, #fff);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--wf-chat-ink, #1e293b);
}
.wf-chat-intake-in:focus {
    outline: none;
    border-color: var(--wf-chat-accent, #a12359);
}
.wf-chat-intake-in[hidden] { display: none; }
.wf-chat-intake-in.is-fout { border-color: #dc3545; }

/* "Ik ben particulier": een linkje en geen knop — het is geen gelijkwaardige keuze maar een
   zijweg, en op deze sites leveren we alleen aan organisaties. */
.wf-chat-intake-pb {
    align-self: flex-start;
    padding: 2px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--wf-chat-soft, #64748b);
    text-decoration: underline;
    cursor: pointer;
}
.wf-chat-intake-pb:hover { color: var(--wf-chat-accent, #a12359); }

.wf-chat-intake-fout {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #dc3545;
}

/* Geweigerd: de velden gaan op slot, de melding blijft staan. */
.wf-chat-intake.-geweigerd .wf-chat-intake-in,
.wf-chat-intake.-geweigerd .wf-chat-intake-ok,
.wf-chat-intake.-geweigerd .wf-chat-intake-keuze { display: none; }

/* Op een telefoon een ruimer raakvlak, net als de andere velden in het venster. */
@media (max-width: 767.98px) {
    .wf-chat-intake-in { min-height: 44px; }
    .wf-chat-intake-pb { padding: 10px 0; }
}

/* Zolang "Met wie chatten wij?" open staat, heeft het antwoordvak eronder geen functie: het staat
   uitgeschakeld en je kunt pas typen als het formulier klaar is. Het weghalen scheelt honderd
   pixels, en die zijn op een kort venster precies het verschil tussen wel of niet de knop zien. */
.wf-chat.is-intake .wf-chat-composer,
.wf-chat.is-intake .wf-chat-foot { display: none; }

/* Een kort venster (een laptop van 640-720 hoog, of een venster dat half dichtgesleept is): dan
   past het formulier net niet en moet je scrollen om de knop te zien. Hier levert het wat lucht in
   — kleinere tussenruimte, lagere velden, een strakkere uitlegregel. De kop blijft staan: die moet
   je als eerste zien (Tom, 11-10-2026). Gemeten op 1024x640; daar past het daarna wél in één keer. */
@media (max-height: 720px) {
    .wf-chat-intake { gap: 6px; }
    .wf-chat-intake-in { min-height: 36px; padding: 7px 11px; }
    .wf-chat-intake-uit { margin-bottom: 1px; }
    .wf-chat-intake-waarom { font-size: 11.5px; line-height: 1.3; }
}

/* ── Mobiel: schermvullend, zoals elke chattool doet ────────────────────────
   De grens lag op 575.98px, en daar viel een telefoon in LIGGENDE stand buiten: die is breder, maar
   nog steeds een telefoon (Tom, 05-10-2026). Nu tot 768px.

   Bewust op BREEDTE en niet op `pointer: coarse`: Jenny werkt op een laptop met aanraakscherm, en
   daar hoort het venster gewoon een venster in de hoek te blijven. */
@media (max-width: 767.98px) {.wf-chat-launcher { height: 48px; padding: 0 18px 0 6px; font-size: 13px; }
    .wf-chat-launcher-icon { width: 34px; height: 34px; }

    /* inset:0 bepaalt zelf de breedte en hoogte. Bewust GEEN width:100vw — die telt de
       schuifbalk mee, waardoor het venster net buiten het scherm steekt en de pagina
       horizontaal gaat schuiven. */
    .wf-chat-panel {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    /* Schermvullend venster: dan is er niets om overheen te leggen, en de knop zou er middenop
       zweven. Sluiten doe je hier met het pijltje in de kop.
       Op de ID-selector, want wf-2026-system.css zet het glazen uiterlijk ook op #wfLcLauncher en
       een id wint altijd van een klasse — daardoor bleef de knop hiervoor overal staan. */
    #wfLcLauncher.is-open { display: none; }
    .wf-chat-overlay { display: none; }

    /* Naast de knop is hier geen ruimte meer; dan hangt het kadertje erboven. */
    .wf-chat-opgelost {
        right: 0;
        bottom: calc(var(--wf-chat-knop) + var(--wf-chat-gat));
        width: min(260px, calc(100vw - 32px));
    }

    .wf-chat-history { inset: 66px 0 0; }
}

/* Aanraakmaten in de kop van het chatvenster: de icoonknoppen zijn 32px, en dat is voor een muis
   prima maar voor een duim te klein (de regel van Tom: 44px per knop, niet per groepje). Alleen op
   een telefoon oprekken - op desktop blijft de kop smal. */
@media (max-width: 767.98px) {
  .wf-chat-iconbtn { width: 44px; height: 44px; }
}

/* ── Meer in beeld op ruimere schermen ────────────────────────────────────────
   Het venster stond vast op 560px, ook op een scherm van 1440 hoog. Dan zie je drie berichten en
   scroll je de rest. Hier groeit hij mee — maar alleen als er ook echt hoogte is: op een laptop van
   768 hoog zou een hoger venster juist afgeknipt worden. Vandaar dat elke stap óók op min-height
   staat. De max-height op .wf-chat-panel blijft de vangnet-grens. */
/* Tussenstap (11-10-2026): tussen 700 en 780 schermhoogte bleef het venster op 560 staan, en net
   daar paste het intakeformulier nét niet — de kop viel boven de rand. 620 past wél binnen de
   vangnet-grens (max-height op .wf-chat-panel) en scheelt die ene regel. */
@media (min-width: 992px) and (min-height: 700px) {.wf-chat { --wf-chat-h: 620px; }
}

@media (min-width: 992px) and (min-height: 780px) {.wf-chat { --wf-chat-h: 700px; }
}

@media (min-width: 1200px) and (min-height: 950px) {.wf-chat { --wf-chat-h: 860px; }
}

/* Wie liever geen beweging heeft, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {.wf-chat-panel,
    .wf-chat-launcher,
    .wf-chat-launcher-dot,
    .wf-chat-bounce { animation: none; transition: none; }
}

/* ============================================================================
   De bezoekersconsole (/admin/chat/console) stond hier ook, maar staat nu in
   assets/css/chat-console.css.

   Reden: dit bestand gaat integraal mee naar elke vreemde site waar onze widget op staat
   (zie ChatWidgetCss.cs). Console-opmaak heeft daar niets te zoeken - het was een halve
   kilobyte per bezoeker die niemand gebruikt, en klassenamen die op zo'n site zomaar
   kunnen bestaan. 08-09-2026, samen met het nieuwe ontwerp van dat scherm.
   ========================================================================== */

/* Meekijken terwijl de klant typt. Grijs, schuin en zonder bubbel: dit is nog geen bericht, en
   het mag er ook niet uitzien als een bericht — anders ga je erop antwoorden terwijl de klant zijn
   zin nog aan het herschrijven is. Verdwijnt zodra hij verstuurt of alles weghaalt; stopt hij
   alleen met typen, dan blijft de regel staan met "gestopt met typen" (.is-gestopt). */
.lc-peek.is-gestopt { opacity: .7; border-style: dotted; }
.lc-peek {
    align-self: flex-start;
    max-width: 85%;
    margin: 2px 0 6px;
    padding: 6px 12px;
    border: 1px dashed var(--wf-border, #d8e0ea);
    border-radius: 12px;
    background: rgba(1, 16, 61, .02);
    color: var(--wf-muted, #94a3b8);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Smal venster ─────────────────────────────────────────────────────────────
   De console hoort in een popout van ~560px. Daaronder zakken de pagina-regel en de knop onder
   de naam, in plaats van dat alles tot onleesbaarheid wordt samengeknepen. */

/* ============================================================================
   Chatbalk voor het team (.wf-abar-*) — op elke adminpagina
   ========================================================================== */

/* Melding bovenin: een "omgekeerde tab" die van bovenaf naar binnen schuift zodra er een klant
   wacht. Bewust bovenaan en midden: dat is de enige plek die je ziet ongeacht waar je in het
   paneel bezig bent. Alleen een geluidje is te makkelijk te missen. */
.wf-abar-alert {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1060;
    display: flex;
    align-items: stretch;
    max-width: min(520px, calc(100vw - 24px));
    border-radius: 0 0 16px 16px;
    background: linear-gradient(135deg, #a12359, #da176c);
    color: #fff;
    box-shadow: 0 12px 30px rgba(1, 16, 61, .28);
    overflow: hidden;
    transform: translate(-50%, -110%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

.wf-abar-alert.is-in { transform: translate(-50%, 0); }

/* "Er wordt om je gevraagd" — dezelfde balk, maar groen en met een lichte klop, zodat je het
   verschil ziet met een gewoon binnenkomend bericht. */
.wf-abar-alert.is-roep {
    background: linear-gradient(135deg, #6f8a1b, #b0d136);
    color: #16210a;
}
.wf-abar-alert.is-roep .wf-abar-alert-cta,
.wf-abar-alert.is-roep .wf-abar-alert-x { color: #16210a; }
.wf-abar-alert.is-roep.is-in { animation: wf-abar-klop 1.1s ease-in-out 2; }
@keyframes wf-abar-klop {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50%      { transform: translate(-50%, 2px) scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {.wf-abar-alert.is-roep.is-in { animation: none; }
}

/* De oproep in het gesprekkenmenu. Blijft staan tot je het gesprek opent — anders was hij na acht
   seconden weg en wist je alleen nog dát er iets was. */
.wf-abar-roep {
    margin: 4px 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(176, 209, 54, .5);
    background: rgba(176, 209, 54, .12);
}
.wf-abar-roep-t {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: #4d6112;
}
.wf-abar-roep-s { margin-top: 3px; font-size: 11.5px; color: var(--wf-text-soft, #5a6472); }
.wf-abar-roep-a { display: flex; gap: 7px; margin-top: 9px; }
.wf-abar-roep-b {
    flex: 1;
    padding: 6px 10px;
    border-radius: 9999px;
    border: 1px solid var(--wf-border, #e2e8f0);
    background: #fff;
    color: var(--wf-text, #1e293b);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
}
.wf-abar-roep-b:hover { border-color: rgba(176, 209, 54, .8); }
.wf-abar-roep-b.-join { background: #b0d136; border-color: #b0d136; color: #16210a; }

/* Zolang er een oproep openstaat draagt de chatknop een groen stipje. */
.wf-chat-launcher.is-roep::after {
    content: "";
    position: absolute; top: 6px; right: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #b0d136;
    box-shadow: 0 0 0 2px #fff;
    animation: wf-abar-roepdot 1.4s ease-in-out infinite;
}
@keyframes wf-abar-roepdot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {.wf-chat-launcher.is-roep::after { animation: none; }
}

.wf-abar-alert-main {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 8px 12px 16px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.wf-abar-alert-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.wf-abar-alert-text { min-width: 0; }
.wf-abar-alert-name { display: block; font-weight: 800; font-size: 13.5px; }

.wf-abar-alert-prev {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.wf-abar-alert-cta {
    flex: none;
    margin-left: 6px;
    padding: 5px 13px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .20);
    font-size: 12px;
    font-weight: 700;
}

.wf-abar-alert-x {
    flex: none;
    width: 38px;
    border: none;
    background: rgba(0, 0, 0, .10);
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    cursor: pointer;
}

.wf-abar-alert-x:hover { background: rgba(0, 0, 0, .22); color: #fff; }

@media (max-width: 575.98px) {.wf-abar-alert-prev { max-width: 150px; }
    .wf-abar-alert-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {.wf-abar-alert { transition: none; }
}

/* De plek, de maten en de laagvolgorde komen van .wf-chat (die staat óók op deze wrapper). Hier
   alleen wat ons onderscheidt: net onder de klantwidget in de laagvolgorde, voor het geval ze ooit
   op dezelfde pagina staan. */
.wf-abar { z-index: 1044; }

/* Onze balk heeft in het antwoordvak méér knoppen dan de klantwidget: oppakken/doorgeven, een flow
   aanbevelen, bijlage en notitie. Op 380px passen die niet naast elkaar en breekt de rij af. Op een
   ruim scherm mag dit venster daarom breder — de klantwidget blijft 380, die heeft het niet nodig. */
@media (min-width: 1200px) {.wf-abar { --wf-chat-w: 440px; }
}

.wf-abar-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 20px 0 7px;
    border: none;
    border-radius: 9999px;
    background: var(--wf-surface, #fff);
    color: var(--wf-text, #1e293b);
    border: 1px solid var(--wf-border, #e2e8f0);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(1, 16, 61, .14);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}

.wf-abar-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(1, 16, 61, .18); }

.wf-abar-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--wf-green-subtle, #f3fad7);
    color: var(--wf-green-text, #5a6e0e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Niet beschikbaar: grijs in plaats van groen, zodat je in één oogopslag ziet hoe je staat. */
.wf-abar.is-away .wf-abar-ico { background: rgba(120, 130, 145, .14); color: var(--wf-muted, #94a3b8); }
.wf-abar.has-unread .wf-abar-ico { background: rgba(216, 31, 37, .12); color: var(--bs-danger, #d81f25); }

.wf-abar-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--bs-danger, #d81f25);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 21px;
    text-align: center;
}

/* .wf-abar-panel / -head / -head-tools / -iconbtn stonden hier: een eigen schil, kop en
   icoonknoppen voor de adminwidget. Vervallen op 29-08-2026 — die widget gebruikt nu dezelfde
   .wf-chat-panel, .wf-chat-head en .wf-chat-iconbtn als de klantwidget. Eén basis, twee inhouden. */

.wf-abar-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.wf-abar-empty { margin: 0; padding: 16px; font-size: 13px; color: var(--wf-muted, #94a3b8); text-align: center; }

.wf-abar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.wf-abar-item:hover { background: var(--wf-hover-bg, #f8fafc); }
.wf-abar-item.is-unread { background: rgba(176, 209, 54, .10); }
.wf-abar-item.is-closed { opacity: .55; }

.wf-abar-item-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.wf-abar-item-dot.on { background: var(--wf-green, #b0d136); }

.wf-abar-item-main { flex: 1 1 auto; min-width: 0; }
.wf-abar-item-name { display: block; font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }

.wf-abar-item-prev {
    display: block;
    font-size: 12px;
    color: var(--wf-muted, #94a3b8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-abar-item-time { flex: none; font-size: 11px; color: var(--wf-muted, #94a3b8); }

.wf-abar-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9999px;
    background: rgba(216, 31, 37, .12);
    color: var(--bs-danger, #d81f25);
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.wf-abar-conv { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ── Onze eigen widget: de admin-specifieke onderdelen ────────────────────────
   De schil, de kop, de bubbels, de composer, de donkere laag en de chatknop komen uit de gedeelde
   .wf-chat-*-regels hierboven — precies dezelfde als bij de klant. Hieronder staat alleen wat wij
   extra hebben: de gereedschapsbalk, de gesprekkenlijst en de interne notitie. */

/* Gereedschapsbalk onder de kop: gesprek wisselen, Chatdash, wie is er online, archief. */
.wf-abar-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--wf-hover-bg, #f8fafc);
    border-bottom: 1px solid var(--wf-border-lt, #f1f5f9);
}

.wf-abar-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--wf-border, #e2e8f0);
    border-radius: 9999px;
    background: var(--wf-surface, #fff);
    color: var(--wf-text, #1e293b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.wf-abar-tool:hover { border-color: rgba(50, 188, 238, .55); background: rgba(50, 188, 238, .08); color: var(--wf-text, #1e293b); }
.wf-abar-tool > i { font-size: 13px; color: #2b325c; }

/* Het gesprekkenmenu mag de ruimte pakken die overblijft en kapt zijn label af. */
.wf-abar-pick { flex: 1 1 auto; min-width: 0; }
.wf-abar-tool-wide { width: 100%; justify-content: flex-start; }
.wf-abar-tool-wide span { overflow: hidden; text-overflow: ellipsis; }
.wf-abar-tool-wide::after { margin-left: auto; }

/* De twee kleine icoonknoppen rechts. */
.wf-abar-tool-ico { position: relative; width: 34px; padding: 0; justify-content: center; }
.wf-abar-tool-ico > i { font-size: 14px; }

/* Groen bolletje met het aantal klanten dat nu online is. */
.wf-abar-online {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--wf-green, #b0d136);
    color: #35480a;
    border: 2px solid var(--wf-surface, #fff);
    font-size: 10px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}
.wf-abar-online.is-leeg { background: #cbd5e1; color: #64748b; }

/* Het menu zelf. */
.wf-abar-menu { max-height: 260px; overflow-y: auto; font-size: 13px; --bs-dropdown-min-width: 240px; }
.wf-abar-menu-item { display: flex; align-items: center; gap: 8px; }
.wf-abar-menu-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-abar-menu-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bs-danger, #d81f25); }

/* Beschikbaarheid als icoonknop in de kop: groen als je aanstaat. */
.wf-abar-avail.is-on { background: rgba(176, 209, 54, .30); color: #eaf7c2; }

/* Interne notitie: de knop kleurt op zodra hij aanstaat, en de bubbel wijkt af zodat je in het
   gesprek meteen ziet dat de klant die regel niet heeft gezien. */
.wf-ctool.is-on { background: rgba(220, 158, 47, .18); color: #b7801f; }
.wf-chat-msg.note .wf-chat-bubble {
    background: rgba(220, 158, 47, .12);
    border: 1px dashed rgba(220, 158, 47, .65);
    color: var(--wf-text, #1e293b);
}
/* De donkere schaduw en de mobiele volle breedte komen nu van .wf-chat-panel (gedeeld). */

@media (max-width: 575.98px) {.wf-abar-label { display: none; }
    .wf-abar-pill { padding: 0 8px 0 7px; }
    /* De gereedschapsbalk kapt zijn labels af zodra het smal wordt; de icoonknoppen blijven. */
    .wf-abar-tools { gap: 5px; padding: 7px 8px; }
    .wf-abar-tool > span { display: none; }
    .wf-abar-tool-wide > span { display: inline; }
}

/* ============================================================================
   Teamkant (.wf-ac-*) — aanvullingen op het legacy blok in webfix.css
   ========================================================================== */

/* Avatar in de kop van het geopende gesprek. Stond als `.wf-ac-head .wf-lc-avatar` in het legacy
   webfix.css — het laatste restje van de oude klantwidget dat de inbox nog gebruikte. Hierheen
   verhuisd onder een eigen naam, zodat het .wf-lc-*-blok daar helemaal weg kon. */
.wf-ac-head .wf-ac-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wf-blue, #32bcee);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Een collega die verbonden is maar zichzelf op "niet beschikbaar" heeft gezet, toont
   grijs in plaats van groen. Alleen wij zien dit onderscheid; de klant krijgt
   uitsluitend te horen dát er een expert online is. */
.wf-ac-agent.is-away {
    color: var(--bs-secondary-color, #6c757d);
    background: rgba(120, 130, 145, .12);
    border-color: rgba(120, 130, 145, .28);
}

.wf-ac-agent.is-away .wf-ac-dot,
.wf-ac-agent .wf-ac-dot.off { background: #a9b2bd; }

/* Interne notitie en Webfix AI in de inbox: kleur maakt in één blik duidelijk wie er praat en
   wat de klant wél en niet ziet. */
.wf-ac-msg.note .wf-ac-bubble {
    background: rgba(220, 158, 47, .12);
    border: 1px solid rgba(220, 158, 47, .45);
    color: var(--wf-text, #1e293b);
}

.wf-ac-msg.ai .wf-ac-bubble { border: 1.5px solid rgba(176, 209, 54, .6); }

/* Bijlagen in de inbox — spiegelt de klantkant, zodat een schermafdruk aan beide kanten hetzelfde
   oogt. Een afbeelding tonen we meteen (klikbaar voor de volledige weergave), de rest als knop. */
.wf-ac-thumb {
    display: block;
    margin-top: 6px;
    max-width: 220px;
    border-radius: 10px;
    border: 1px solid var(--wf-border, #e2e8f0);
}

.wf-ac-attach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--wf-border, #e2e8f0);
    background: rgba(50, 188, 238, .10);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.wf-ac-attach:hover { background: rgba(50, 188, 238, .20); color: inherit; }
.wf-ac-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gekozen bijlage boven het antwoordvak, vóór verzenden. */
.wf-ac-file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--wf-border, #e2e8f0);
    background: var(--wf-surface-2, #f7f8fb);
    font-size: 13px;
}

.wf-ac-file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.wf-ac-file-x {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--wf-muted, #64748b);
    border-radius: 6px;
    padding: 2px 6px;
    line-height: 1;
}

.wf-ac-file-x:hover { background: rgba(216, 31, 37, .12); color: var(--bs-danger, #d81f25); }

/* Antwoordvak in de inbox = de flow-composer uit de stijlgids. Bewust vast op drie regels: een
   antwoord aan een klant is zelden één zin, en een veld dat pas groeit terwijl je typt leest
   onrustig. Boven de drie regels groeit het gewoon mee (wf-composer.js). */
.wf-ac-composer .wf-ctext {
    min-height: calc(3 * 1.55em + 20px);
    padding: 12px 16px 2px;
    font-size: 14px;
    color: var(--wf-text, #1e293b);
}

.wf-ac-composer .wf-ctext::placeholder { color: var(--wf-muted, #94a3b8); }
.wf-ac-note-label { font-size: 12.5px; }

/* Notitiemodus: het hele vlak kleurt amber, zodat je nooit per ongeluk een interne notitie naar
   de klant stuurt — of andersom. */
.wf-ac-composer.is-note {
    background: rgba(220, 158, 47, .08);
    border-color: rgba(220, 158, 47, .55);
}

.wf-ac-composer.is-note:focus-within {
    border-color: rgba(220, 158, 47, .85);
    box-shadow: 0 0 0 4px rgba(220, 158, 47, .16);
}

.wf-ac-composer.is-note .wf-ctool#wfNoteToggle {
    background: rgba(220, 158, 47, .18);
    color: #8a6212;
}

[data-bs-theme="dark"] .wf-ac-composer { background: var(--wf-surface, #2a3447); border-color: var(--wf-border, #3a4658); }
[data-bs-theme="dark"] .wf-ac-composer .wf-ctext { color: var(--wf-text, #e6eaf0); }
[data-bs-theme="dark"] .wf-ac-composer.is-note { background: rgba(220, 158, 47, .14); }

/* Standaardantwoorden ("/"-sneltoets) boven het invoerveld. */
.wf-ac-canned {
    max-height: 210px;
    overflow-y: auto;
    border-top: 1px solid var(--wf-border-lt, #f1f5f9);
    background: var(--wf-hover-bg, #f8fafc);
}

.wf-ac-canned-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.wf-ac-canned-item:hover { background: var(--wf-border-lt, #f1f5f9); }

.wf-ac-canned-key {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--wf-title, #a12359);
}

.wf-ac-canned-title { font-size: 13px; color: var(--wf-text-soft, #475569); }

/* In onze eigen chatbalk staat het lijstje gewoon boven het antwoordvak, in de stroom — net als in
   de inbox. Absoluut positioneren leek logischer ("omhoog openklappen"), maar het paneel snijdt
   alles af wat buiten zijn rand valt: het lijstje stond er dan wel, maar je zag en raakte het niet.
   In de stroom schuift het antwoordvak gewoon een stukje omlaag en klopt het altijd. */
.wf-abar-canned {
    flex: none;
    border-top: 1px solid var(--wf-border, #e2e8f0);
    border-bottom: 1px solid var(--wf-border-lt, #f1f5f9);
    background: var(--wf-surface, #fff);
}

/* Klantcontext-kolom. */
.wf-ac-side { font-size: 13.5px; }
.wf-ac-side-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 14px; font-size: 12.5px; }
.wf-ac-side-dl dt { color: var(--wf-muted, #94a3b8); font-weight: 600; }
.wf-ac-side-dl dd { margin: 0; color: var(--wf-text, #1e293b); overflow-wrap: anywhere; }

.wf-ac-side-title {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wf-muted, #94a3b8);
}

.wf-ac-side-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.wf-ac-side-tag {
    padding: 2px 9px;
    border-radius: 9999px;
    background: var(--wf-green-subtle, #f3fad7);
    color: var(--wf-green-text, #5a6e0e);
    font-size: 11.5px;
    font-weight: 600;
}

.wf-ac-side-list { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--wf-text-soft, #475569); }

/* Aantal online klanten op de knop "Wie is er online". */
.wf-ac-online-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .25);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

[data-bs-theme="dark"] .wf-ac-agent.is-away {
    color: #adb5bd;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

/* ══ Inbox: zoeken, wachttijd, oppakken en meekijken ══════════════════════════
   Toegevoegd 28-08-2026. Bewust hier en niet in webfix.css (beschermd bestand);
   de oudere .wf-ac-*-regels staan daar nog wel. */

/* Zoekbalk boven de gesprekkenlijst. */
.wf-ac-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.wf-ac-search .bi { color: var(--bs-secondary-color, #8a94a6); font-size: 13px; flex: none; }
.wf-ac-search input { box-shadow: none; padding-left: 0; }
.wf-ac-search input:focus { box-shadow: none; }

/* Derde regel in een gesprekregel: wie het opgepakt heeft, wie meekijkt, hoe lang de klant wacht. */
.wf-ac-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wf-ac-item-agent,
.wf-ac-item-viewing,
.wf-ac-item-wait {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.wf-ac-item-agent { color: #0e9c81; background: rgba(19, 194, 150, .12); }
.wf-ac-item-viewing { color: #1f8fbb; background: rgba(50, 188, 238, .14); }
/* Wachttijd is de enige die alarmeert: rood, want hier ligt werk. */
.wf-ac-item-wait { color: #b02a37; background: rgba(220, 53, 69, .12); }

/* Balk onder de gesprekskop: "Opgepakt door Jan · Marie kijkt mee". */
.wf-ac-claimbar { background: var(--bs-secondary-bg, #f3f5f9); }
.wf-ac-claimbar.is-busy { background: rgba(50, 188, 238, .10); color: #1f8fbb; }

.wf-ac-flowmenu { max-height: 320px; overflow-y: auto; }

[data-bs-theme="dark"] .wf-ac-item-agent { background: rgba(19, 194, 150, .18); }
[data-bs-theme="dark"] .wf-ac-item-viewing { background: rgba(50, 188, 238, .20); }
[data-bs-theme="dark"] .wf-ac-item-wait { color: #ff8a94; background: rgba(220, 53, 69, .20); }
[data-bs-theme="dark"] .wf-ac-claimbar { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .wf-ac-claimbar.is-busy { background: rgba(50, 188, 238, .14); }

/* Wat wij typten voordat het naar de taal van de klant vertaald werd. Alleen in ONZE console; de
   klant ziet uitsluitend de vertaling. Gedempt en kleiner: het is een controle achteraf, geen
   onderdeel van het gesprek. */
.lc-bub-org {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, .35);
  font-size: 11.5px;
  line-height: 1.45;
  opacity: .78;
}
.lc-msg.-in .lc-bub-org { border-top-color: rgba(1, 16, 61, .14); }

/* ── Linkjes onder een bijlage ───────────────────────────────────────────────
   "Download" en "Openen" onder elke bijlage, aan beide kanten van het gesprek (Tom, 17-09-2026).
   Een plaatje in de bel is klein en een pdf opent niet vanzelf; zonder deze twee regels wist de
   ontvanger niet wat hij ermee kon. Bewust klein en grijs: ze horen bij de bijlage en niet bij het
   gesprek. */
.wf-chat-bijl {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.wf-chat-bijl-l {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--wf-muted, #9aa3b2);
    text-decoration: none;
}

.wf-chat-bijl-l:hover,
.wf-chat-bijl-l:focus-visible {
    color: var(--wf-text, #1f2937);
    text-decoration: underline;
}

/* In onze eigen bel (rechts, gekleurd) moeten ze op de kleur leesbaar blijven. */
.wf-chat-msg.mine .wf-chat-bijl-l { color: rgba(255, 255, 255, .72); }
.wf-chat-msg.mine .wf-chat-bijl-l:hover { color: #fff; }

/* ── Naam en organisatie in de kop ───────────────────────────────────────────
   Achter de naam van de klant staat de organisatie waar hij bij hoort, met een streepje ertussen
   (Tom, 20-09-2026). "Marjanne vd Werff" zegt niets; "Marjanne vd Werff | Volleybalvereniging
   Stentor" wel. Allebei een maatje kleiner zodat ze samen op één regel passen, en de organisatie
   krimpt als eerste — die mag afgekapt worden, de naam van de mens niet. */
.wf-chat-title:has(.wf-chat-org) {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 13.5px;
    min-width: 0;
}

.wf-chat-wie { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wf-chat-org {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 12px;
    opacity: .85;
}

/* Het streepje ertussen hoort bij de organisatie, niet bij de naam: zonder organisatie hoort er
   ook geen streepje te staan. */
.wf-chat-org::before { content: "| "; opacity: .55; font-weight: 400; }

/* En in de gesprekkenlijst van de chatbalk: klein en grijs achter de naam. */
.wf-abar-item-org {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: var(--wf-muted, #94a3b8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}