.ft-live-chat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    font-family: Jura, Arial, sans-serif;
    color: #171717;
}

.ft-live-chat *,
.ft-live-chat *::before,
.ft-live-chat *::after {
    box-sizing: border-box;
}

/* WordPress/thema-CSS mag verborgen chatonderdelen nooit opnieuw tonen. */
.ft-chat-panel[hidden],
.ft-chat-start-form[hidden],
.ft-chat-reply-form[hidden],
.ft-chat-new[hidden],
.ft-chat-notice[hidden],
.ft-chat-receipt[hidden],
.ft-chat-human-note[hidden],
.ft-chat-unread[hidden],
.ft-chat-status-badge[hidden],
.ft-chat-closed-note[hidden] {
    display: none !important;
}

.ft-chat-launcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 17px;
    border: 1px solid #111;
    border-radius: 11px;
    background: #111;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    font: 700 14px/1 Jura, Arial, sans-serif;
    cursor: pointer;
}

.ft-chat-launcher-icon { font-size: 15px; }

.ft-chat-unread {
    position: absolute;
    right: -6px;
    top: -8px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #beaa8c;
    color: #111;
    display: grid;
    place-items: center;
    font: 800 10px/1 Arial, sans-serif;
}

.ft-chat-panel {
    position: absolute;
    right: 0;
    bottom: 62px;
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 28px));
    height: min(535px, calc(100vh - 105px));
    max-height: min(535px, calc(100vh - 105px));
    overflow: hidden;
    border: 1px solid #d8d0c7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 62px rgba(24, 20, 17, .22);
}

.ft-chat-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 15px;
    background: #111;
    color: #fff;
}

.ft-chat-header-copy { display: grid; gap: 2px; min-width:0; }
.ft-chat-header strong { font-size: 15px; line-height: 1.2; }
.ft-chat-header-copy > span { font-size: 10px; opacity: .72; }
.ft-chat-header-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.ft-chat-status-badge{display:inline-flex;align-items:center;min-height:24px;padding:5px 8px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:800 8px/1 Jura,Arial,sans-serif;white-space:nowrap}
.ft-chat-status-badge.is-open{background:#f1dfb9;color:#332919;border-color:#f1dfb9}
.ft-chat-status-badge.is-awaiting_customer{background:#dcebdc;color:#234127;border-color:#dcebdc}
.ft-chat-status-badge.is-closed{background:#e8e8e8;color:#333;border-color:#e8e8e8}

.ft-chat-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    font: 300 26px/1 Arial, sans-serif;
    cursor: pointer;
}
.ft-chat-close:hover { background: rgba(255,255,255,.1); }

.ft-chat-notice {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    background: #f4eee6;
    border-bottom: 1px solid #e5ddd3;
    color: #554d45;
    font-size: 10px;
    line-height: 1.4;
}

.ft-chat-notice::before {
    content: "i";
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid #bca98e;
    border-radius: 50%;
    font: 800 10px/1 Arial, sans-serif;
}
.ft-chat-notice strong { display: none; }

.ft-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 11px;
    overflow: hidden;
    background: #fff;
}

.ft-chat-human-note {
    flex: 0 0 auto;
    margin: 0 1px 8px;
    color: #746d65;
    font-size: 10px;
    line-height: 1.4;
}

.ft-chat-state {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    margin: 0 2px 7px;
    color: #7b746c;
    font-size: 9px;
}
.ft-chat-ticket { font-weight: 800; color: #4e4842; }
.ft-chat-view-status { text-align: right; }

.ft-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1px 2px 8px;
    scrollbar-width: thin;
}

.ft-chat-bubble {
    max-width: 84%;
    padding: 9px 10px;
    border: 1px solid #e1d9d0;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.45;
}
.ft-chat-bubble.is-staff { justify-self: start; background: #f4eee6; }
.ft-chat-bubble.is-me { justify-self: end; background: #171717; border-color: #171717; color: #fff; }
.ft-chat-bubble > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.ft-chat-bubble strong { font-size: 9px; }
.ft-chat-bubble time { font-size: 8px; opacity: .62; }
.ft-chat-bubble p { margin: 0; color: inherit; }

.ft-chat-closed-note{flex:0 0 auto;display:grid;gap:3px;margin:4px 0 7px;padding:9px 10px;border:1px solid #d8d2ca;border-radius:9px;background:#f5f3f0;color:#45403b}.ft-chat-closed-note strong{font-size:10px}.ft-chat-closed-note span{font-size:9px;line-height:1.45;color:#6b645e}

.ft-chat-receipt {
    flex: 0 0 auto;
    margin: 4px 0 6px;
    padding: 7px 9px;
    border: 1px solid #cfe2d1;
    border-radius: 8px;
    background: #edf6ee;
    color: #315b37;
    font-size: 9px;
    line-height: 1.4;
}

.ft-chat-start-form {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #eee8e1;
}

.ft-chat-reply-form {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
    margin-top: 7px;
    padding-top: 8px;
    border-top: 1px solid #eee8e1;
}

.ft-chat-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.ft-chat-start-form label,
.ft-chat-reply-form label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: #514b45;
    font-size: 9px;
    font-weight: 750;
}

.ft-chat-start-form input,
.ft-chat-start-form textarea,
.ft-chat-reply-form textarea {
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #d8cec4;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #171717;
    font: 500 11px/1.4 Jura, Arial, sans-serif;
}
.ft-chat-start-form input:focus,
.ft-chat-start-form textarea:focus,
.ft-chat-reply-form textarea:focus { border-color: #8e8175; box-shadow: 0 0 0 2px rgba(190,170,140,.14); }

.ft-chat-start-form textarea { min-height: 68px; max-height: 112px; resize: vertical; }
.ft-chat-reply-form .ft-chat-message-label { min-width: 0; }
.ft-chat-reply-form .ft-chat-message-label > span { display: none; }
.ft-chat-reply-form textarea { min-height: 42px; max-height: 82px; resize: none; }

.ft-chat-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ft-chat-form-foot small { max-width: 215px; color: #817970; font-size: 8px; line-height: 1.35; }
.ft-chat-form-foot a { color: #514b45; text-decoration: underline; }

.ft-chat-send,
.ft-chat-new {
    min-height: 38px;
    border: 1px solid #171717;
    border-radius: 8px;
    background: #171717;
    color: #fff !important;
    padding: 9px 13px;
    font: 800 10px/1 Jura, Arial, sans-serif;
    cursor: pointer;
}
.ft-chat-send:hover,
.ft-chat-new:hover { background: #2b2b2b; }
.ft-chat-send:disabled { opacity: .55; cursor: wait; }
.ft-chat-reply-form .ft-chat-send { min-width: 70px; height: 42px; }
.ft-chat-new { width: 100%; margin-top: 8px; }

.ft-chat-launcher:focus-visible,
.ft-chat-close:focus-visible,
.ft-chat-send:focus-visible,
.ft-chat-new:focus-visible {
    outline: 3px solid rgba(190,170,140,.5);
    outline-offset: 2px;
}

.ft-chat-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .ft-live-chat { right: 10px; bottom: 10px; }
    .ft-chat-launcher { min-height: 46px; padding: 0 13px; font-size: 12px; }
    .ft-chat-panel {
        position: fixed;
        right: 8px;
        left: 8px;
        bottom: 64px;
        width: auto;
        height: min(520px, calc(100dvh - 82px));
        max-height: calc(100dvh - 82px);
        border-radius: 14px;
    }
    .ft-chat-header { padding: 12px 13px; }
    .ft-chat-body { padding: 10px; }
    .ft-chat-guest-fields { grid-template-columns: 1fr; }
    .ft-chat-start-form textarea { min-height: 62px; }
    .ft-chat-reply-form { grid-template-columns: minmax(0,1fr) auto; }
    .ft-chat-form-foot { align-items: flex-end; }
    .ft-chat-form-foot small { max-width: 64%; }
}