/* ===========================================================================
   De chat rechtsonder

   Kleuren komen uit de huisstijl: oranje voor de knop en de eigen
   berichten, donkerblauw voor de kop. De widget staat los van Bootstrap,
   zodat hij op elke pagina hetzelfde is.
   =========================================================================== */

.hsb-chat {
    --chat-oranje: #f56c20;
    --chat-oranje-donker: #dd5c14;
    --chat-blauw: #103856;
    --chat-rand: #e6ecf3;

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
    font-family: inherit;
}

/* --- de knop --------------------------------------------------------- */

.hsb-chat__knop {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--chat-oranje);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgb(16 56 86 / .28);
    margin-left: auto;
    transition: background-color .2s, transform .2s;
}

.hsb-chat__knop:hover {
    background: var(--chat-oranje-donker);
    transform: translateY(-2px);
}

.hsb-chat__knop:focus-visible {
    outline: 3px solid var(--chat-blauw);
    outline-offset: 2px;
}

/* --- het paneel ------------------------------------------------------ */

.hsb-chat__paneel {
    width: 360px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgb(16 56 86 / .24);
    margin-bottom: 14px;

    /* Dicht: uit beeld én uit de tabvolgorde, zodat je er niet met de
       toetsenbordtab in belandt terwijl je hem niet ziet. */
    display: none;
}

.hsb-chat.is-open .hsb-chat__paneel {
    display: flex;
    flex-direction: column;
}

.hsb-chat__kop {
    background: var(--chat-oranje);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hsb-chat__titel {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.hsb-chat__intro {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: rgb(255 255 255 / .92);
}

.hsb-chat__sluit {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hsb-chat__sluit:hover { background: rgb(255 255 255 / .32); }

/* --- meldingen ------------------------------------------------------- */

.hsb-chat__status {
    display: none;
    padding: 10px 18px;
    font-size: .85rem;
    line-height: 1.5;
}

.hsb-chat__status.is-zichtbaar { display: block; }

.hsb-chat__status.is-fout {
    background: #fdf2f2;
    color: #9b2c2c;
}

.hsb-chat__status.is-goed {
    background: #f0f9f4;
    color: #22613c;
}

/* --- de berichten ---------------------------------------------------- */

.hsb-chat__berichten {
    padding: 16px 18px;
    max-height: 320px;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
}

.hsb-chat__berichten:empty { display: none; }

.hsb-chat__bericht {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.hsb-chat__bericht--bezoeker {
    align-self: flex-end;
    background: var(--chat-oranje);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.hsb-chat__bericht--medewerker {
    align-self: flex-start;
    background: #fff;
    color: #1d2b3a;
    border: 1px solid var(--chat-rand);
    border-bottom-left-radius: 4px;
}

.hsb-chat__tijd {
    display: block;
    margin-top: 4px;
    font-size: .72rem;
    opacity: .7;
}

/* --- het formulier --------------------------------------------------- */

.hsb-chat__form {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--chat-rand);
}

.hsb-chat__gegevens {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.hsb-chat__gegevens.is-verborgen { display: none; }

.hsb-chat__gegevens input {
    width: 100%;
    border: 1px solid var(--chat-rand);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: .88rem;
    color: #1d2b3a;
}

.hsb-chat__gegevens input:focus {
    outline: 0;
    border-color: var(--chat-oranje);
}

.hsb-chat__invoer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.hsb-chat__invoer textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--chat-oranje);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: .9rem;
    font-family: inherit;
    line-height: 1.45;
    color: #1d2b3a;
}

.hsb-chat__invoer textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(245 108 32 / .18);
}

.hsb-chat__invoer button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--chat-oranje);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hsb-chat__invoer button:hover:not(:disabled) { background: var(--chat-oranje-donker); }

.hsb-chat__invoer button:disabled {
    opacity: .5;
    cursor: default;
}

/* De honeypot. Niet display:none — sommige bots slaan verborgen velden
   juist over. Wel volledig uit beeld en uit de tabvolgorde. */
.hsb-chat__pot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- mobiel ---------------------------------------------------------- */
/*  Op een telefoon staat onderaan al een vaste balk met "Beschikbaarheid
    & Prijs". De chatknop schuift daarboven, anders overlappen ze. */

@media (max-width: 991.98px) {
    .hsb-chat {
        right: 14px;
        bottom: 86px;
    }
}

@media (max-width: 480px) {
    .hsb-chat__paneel {
        width: calc(100vw - 28px);
    }

    .hsb-chat__berichten {
        max-height: 46vh;
    }
}

/* Wie beweging heeft uitgezet in zijn systeem, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
    .hsb-chat__knop {
        transition: none;
    }

    .hsb-chat__knop:hover {
        transform: none;
    }
}

/* ==========================================================================
   Naast de omhoog-knop

   In includes/footer.php staat #myBtn, de knop die je naar boven brengt:
   rechtsonder, 50 bij 50, op 30px van de rand. De chat staat daar ook, dus
   die twee lagen over elkaar heen.

   De chat houdt de onderste plek — dat is waar bezoekers een chat zoeken,
   en het is de knop waar jij iets aan hebt. De omhoog-knop schuift erboven.

   'body #myBtn' in plaats van alleen '#myBtn': dan wint deze regel ongeacht
   of dit bestand voor of na de stijl in footer.php wordt ingeladen, zonder
   dat er !important aan te pas komt.

   Deze regels staan bewust in chat.css en niet in footer.php: staat de chat
   uit, dan wordt dit bestand niet geladen en springt de omhoog-knop vanzelf
   terug naar zijn oude plek.
   ========================================================================== */

body #myBtn {
    bottom: 88px;
    right: 23px;
}

/* Op een telefoon staat de chat hoger, boven de vaste balk met
   "Beschikbaarheid & Prijs". De omhoog-knop schuift dan mee. */
@media (max-width: 991.98px) {
    body #myBtn {
        bottom: 152px;
        right: 17px;
    }
}