/* ============================================================================
   LucaFlow-embed (Graaf Draluca) — compositie van launcher en chatvenster
   ----------------------------------------------------------------------------
   Luca (de launcher) staat VOOR het chatvenster. Het venster schuift achter
   hem en zijn rechter- en onderrand vallen ongeveer halverwege Luca's hoofd,
   zodat Luca voor het venster staat maar geen bedieningselementen afdekt.

   Waarom hier en niet in LucaFlow zelf: dit is een site-specifieke compositie.
   De gedeelde widget blijft ongewijzigd; alleen deze site schuift het paneel.

   WAAROM `body`-prefix: de embed zet zijn eigen <style> pas tijdens runtime
   achteraan in de <head>. Een regel met gelijke specificiteit zou daardoor
   verliezen; `body .lucaflow-*` heeft hogere specificiteit en wint.

   Let op: deze offsets gaan uit van de launcher op right:24px/bottom:24px
   (mobiel 16px) met een doorsnede van 128px (LucaFlow `launcherSizePx`).
   Verandert die maat, dan moeten de offsets hieronder mee.
   ========================================================================== */

/* Luca altijd bovenop het paneel (paneel = 2147483001 in de embed). */
body .lucaflow-launcher {
    z-index: 2147483200;
}

/* Desktop: rechter- en onderrand van het venster op het midden van Luca's
   hoofd. Luca staat 128px breed op 24px van rand, dus zijn hoofd-midden zit
   op 24 + 64 = 88px van rechts en ~116px van onderen. */
body .lucaflow-panel {
    right: 88px;
    bottom: 116px;
}

/* Mobiel: het paneel blijft bijna schermbreed zodat het invoerveld bruikbaar
   blijft, maar het komt volledig boven Luca uit in plaats van eroverheen
   (Luca op 16px van onderen met 128px hoogte + 8px lucht). */
@media (max-width: 760px) {
    body .lucaflow-panel {
        left: 12px;
        right: 12px;
        bottom: 152px;
    }
}

/* ============================================================================
   Kleinere tekst in het chatvenster, zodat er meer inhoud op het scherm past.
   ----------------------------------------------------------------------------
   De embed zet deze maten hard in zijn eigen <style> (14px voor berichten,
   16px voor invoerveld/verzendknop/kop). Deze regels verkleinen ze; door de
   `body`-prefix winnen ze op specificiteit zonder `!important`.

   Bijstellen? Pas alleen de drie variabelen hieronder aan.
   ========================================================================== */
body .lucaflow-panel {
    --hbb-lf-msg: 12.5px;    /* chatberichten */
    --hbb-lf-ui: 13.5px;     /* invoerveld + verzendknop */
    --hbb-lf-title: 14px;    /* naam in de kop van het venster */
}

body .lucaflow-message {
    font-size: var(--hbb-lf-msg);
}

body .lucaflow-input,
body .lucaflow-send {
    font-size: var(--hbb-lf-ui);
}

body .lucaflow-title {
    font-size: var(--hbb-lf-title);
}