/* ==========================================================
   GAYZZEE TWINK
   Publieke site-assistent
   Foundation V1
   ========================================================== */

:root {
    --twink-bg:
        rgba(11, 7, 18, .97);

    --twink-bg-soft:
        rgba(28, 14, 39, .96);

    --twink-border:
        rgba(199, 117, 255, .28);

    --twink-text:
        #ffffff;

    --twink-muted:
        rgba(255, 255, 255, .61);

    --twink-purple:
        #9f54ff;

    --twink-pink:
        #f13bb8;

    --twink-shadow:
        0 18px 55px
        rgba(0, 0, 0, .48);
}


/* ----------------------------------------------------------
   ROOT
   ---------------------------------------------------------- */

.gz-twink {
    position: fixed;

    z-index: 2147482000;

    right: 18px;
    bottom: 78px;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--twink-text);
}


/*
 * Pagina's met een vaste rechterzijbalk/chat:
 * Twink blijft rechtsonder in de hoofdzone en ligt niet
 * over de chatcomposer.
 */

@media (min-width: 1180px) {

    .gz-twink.is-right-rail-page {
        right: 336px;
    }

}


/* ----------------------------------------------------------
   FLOATING BUTTON
   ---------------------------------------------------------- */

.gz-twink-launcher {
    position: relative;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(216, 166, 255, .62);

    border-radius:
        999px;

    background:
        linear-gradient(
            145deg,
            rgba(115, 47, 221, .98),
            rgba(239, 53, 178, .95)
        );

    box-shadow:
        0 8px 28px
        rgba(154, 68, 255, .38);

    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.gz-twink-launcher:hover {
    transform:
        translateY(-2px)
        scale(1.025);

    box-shadow:
        0 10px 34px
        rgba(187, 82, 255, .52);
}


.gz-twink-launcher-avatar {
    width: 50px;
    height: 50px;

    display: block;

    border-radius: 50%;

    object-fit: cover;

    object-position: center top;

    background:
        #120a1d;
}


.gz-twink-launcher-dot {
    position: absolute;

    right: 1px;
    bottom: 3px;

    width: 13px;
    height: 13px;

    border:
        3px solid
        #0b0712;

    border-radius: 50%;

    background:
        #31e58d;

    box-shadow:
        0 0 10px
        rgba(49, 229, 141, .8);
}


/* ----------------------------------------------------------
   PANEL
   ---------------------------------------------------------- */

.gz-twink-panel {
    position: absolute;

    right: 0;
    bottom: 70px;

    width:
        min(
            342px,
            calc(100vw - 28px)
        );

    max-height:
        min(
            560px,
            calc(100vh - 120px)
        );

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--twink-border);

    border-radius:
        18px;

    background:
        linear-gradient(
            160deg,
            var(--twink-bg),
            var(--twink-bg-soft)
        );

    box-shadow:
        var(--twink-shadow);

    backdrop-filter:
        blur(18px);

    transform-origin:
        right bottom;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}


.gz-twink-panel[hidden] {
    display: none !important;
}


.gz-twink-panel.is-opening {
    animation:
        gzTwinkOpen
        .18s
        ease-out;
}


@keyframes gzTwinkOpen {

    from {
        opacity: 0;

        transform:
            translateY(8px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.gz-twink-header {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        14px
        14px
        12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.gz-twink-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(216, 168, 255, .43);

    border-radius:
        14px;

    object-fit: cover;

    object-position: center top;

    background:
        #11091b;
}


.gz-twink-heading {
    min-width: 0;

    flex: 1;
}


.gz-twink-heading strong {
    display: block;

    color:
        #fff;

    font-size: 14px;
    line-height: 1.2;

    font-weight: 800;
}


.gz-twink-heading small {
    display: block;

    margin-top: 3px;

    color:
        var(--twink-muted);

    font-size: 9px;
    line-height: 1.3;
}


.gz-twink-close {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 9px;

    color:
        rgba(255,255,255,.78);

    background:
        rgba(255,255,255,.035);

    cursor: pointer;
}


.gz-twink-close:hover {
    color: #fff;

    background:
        rgba(255,255,255,.08);
}


/* ----------------------------------------------------------
   INTRO / RESPONSE
   ---------------------------------------------------------- */

.gz-twink-body {
    min-height: 0;

    overflow-y: auto;

    padding:
        13px;
}


.gz-twink-intro {
    margin:
        0
        0
        12px;

    padding:
        10px
        11px;

    border:
        1px solid
        rgba(176, 96, 255, .18);

    border-radius:
        12px;

    background:
        rgba(151, 71, 237, .075);
}


.gz-twink-intro strong {
    display: block;

    margin-bottom:
        4px;

    color:
        #fff;

    font-size:
        11px;
}


.gz-twink-intro p {
    margin: 0;

    color:
        rgba(255,255,255,.69);

    font-size:
        10px;
    line-height:
        1.45;
}


.gz-twink-answer {
    margin-bottom:
        12px;

    padding:
        10px
        11px;

    border:
        1px solid
        rgba(241, 59, 184, .18);

    border-radius:
        12px;

    background:
        rgba(241, 59, 184, .065);
}


.gz-twink-answer[hidden] {
    display: none !important;
}


.gz-twink-answer-title {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom:
        5px;

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        800;
}


.gz-twink-answer-text {
    margin: 0;

    color:
        rgba(255,255,255,.75);

    font-size:
        10px;
    line-height:
        1.48;

    white-space:
        pre-line;
}


/* ----------------------------------------------------------
   QUICK ACTIONS
   ---------------------------------------------------------- */

.gz-twink-actions-label {
    display: block;

    margin:
        2px
        0
        7px;

    color:
        rgba(255,255,255,.42);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.gz-twink-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 7px;
}


.gz-twink-action {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        8px
        9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        10px;

    color:
        rgba(255,255,255,.86);

    background:
        rgba(255,255,255,.035);

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.25;

    text-align:
        left;

    cursor: pointer;
}


.gz-twink-action:hover {
    border-color:
        rgba(188, 113, 255, .38);

    color:
        #fff;

    background:
        rgba(157, 75, 236, .11);
}


.gz-twink-action-icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius:
        7px;

    background:
        rgba(166, 83, 246, .13);

    font-size:
        11px;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.gz-twink-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        9px
        13px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.37);

    font-size:
        8px;
}


.gz-twink-footer strong {
    color:
        rgba(222, 184, 255, .72);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (
    min-width: 701px
) and (
    max-width: 1179px
) {

    .gz-twink {
        right: 16px;
        bottom: 76px;
    }

}


/* ----------------------------------------------------------
   MOBILE = BOTTOM SHEET
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .gz-twink {
        right: 12px;

        bottom:
            calc(
                72px +
                env(safe-area-inset-bottom)
            );
    }


    .gz-twink-launcher {
        width: 54px;
        height: 54px;
    }


    .gz-twink-launcher-avatar {
        width: 46px;
        height: 46px;
    }


    .gz-twink-panel {
        position: fixed;

        left: 8px;
        right: 8px;

        bottom:
            calc(
                64px +
                env(safe-area-inset-bottom)
            );

        width: auto;

        max-height:
            min(
                70vh,
                590px
            );

        border-radius:
            18px
            18px
            14px
            14px;

        transform-origin:
            center bottom;
    }


    .gz-twink-actions {
        grid-template-columns:
            1fr;
    }


    .gz-twink-action {
        min-height: 42px;
    }

}


/* ----------------------------------------------------------
   ZEER KLEIN
   ---------------------------------------------------------- */

@media (max-width: 380px) {

    .gz-twink-panel {
        left: 5px;
        right: 5px;
    }


    .gz-twink-header {
        padding:
            11px;
    }


    .gz-twink-body {
        padding:
            10px;
    }

}


/* ==========================================================
   TWINK V1.1
   positionering t.o.v. composer / footer / sidebars
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1180px) {

    .gz-twink {
        bottom: 118px !important;
    }


    /*
     * Pagina's met rechterrail:
     * launcher blijft links van de rechterkolom.
     */

    .gz-twink.is-right-rail-page {
        right: 326px !important;
    }


    .gz-twink-launcher {
        width: 50px !important;
        height: 50px !important;
    }


    .gz-twink-launcher-avatar {
        width: 43px !important;
        height: 43px !important;
    }


    .gz-twink-launcher-dot {
        width: 12px !important;
        height: 12px !important;

        right: 0 !important;
        bottom: 2px !important;
    }


    .gz-twink-panel {
        bottom: 62px !important;

        max-height:
            min(
                520px,
                calc(100vh - 190px)
            ) !important;
    }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (
    min-width: 701px
) and (
    max-width: 1179px
) {

    .gz-twink {
        right: 14px !important;
        bottom: 108px !important;
    }


    .gz-twink-launcher {
        width: 50px !important;
        height: 50px !important;
    }


    .gz-twink-launcher-avatar {
        width: 43px !important;
        height: 43px !important;
    }


    .gz-twink-panel {
        bottom: 62px !important;

        max-height:
            min(
                520px,
                calc(100vh - 180px)
            ) !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .gz-twink {
        right: 10px !important;

        bottom:
            calc(
                84px +
                env(safe-area-inset-bottom)
            ) !important;
    }


    .gz-twink-launcher {
        width: 50px !important;
        height: 50px !important;
    }


    .gz-twink-launcher-avatar {
        width: 43px !important;
        height: 43px !important;
    }


    .gz-twink-panel {
        left: 8px !important;
        right: 8px !important;

        bottom:
            calc(
                78px +
                env(safe-area-inset-bottom)
            ) !important;

        max-height:
            min(
                68vh,
                540px
            ) !important;
    }

}


/* ----------------------------------------------------------
   EXTRA BESCHERMING TEGEN CHATCOMPOSERS
   ---------------------------------------------------------- */

.chat-composer ~ .gz-twink,
.message-composer ~ .gz-twink,
.global-chat-composer ~ .gz-twink {
    pointer-events: auto;
}


/*
 * Launcher altijd boven footer/composer,
 * maar panel nooit tegen viewport-rand.
 */

.gz-twink-launcher {
    z-index: 2;
}


.gz-twink-panel {
    z-index: 3;
}


/* ==========================================================
   TWINK V1.2
   FULL BODY CHARACTER
   ========================================================== */


/* ----------------------------------------------------------
   FULL BODY - BASIS
   ---------------------------------------------------------- */

.gz-twink-fullbody {
    position: absolute;

    z-index: 1;

    right: 350px;
    bottom: 54px;

    width: 250px;
    height: 390px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(18px)
        scale(.97);

    transform-origin:
        center bottom;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

    pointer-events: none;
}


.gz-twink-fullbody img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(
            0 16px 25px
            rgba(0, 0, 0, .42)
        );

    user-select: none;

    pointer-events: none;
}


/* Alleen zichtbaar wanneer Twink geopend is */

.gz-twink.is-open
.gz-twink-fullbody {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* Panel blijft boven Twink */

.gz-twink-panel {
    z-index: 4 !important;
}


.gz-twink-launcher {
    z-index: 5 !important;
}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1180px) {

    .gz-twink-fullbody {
        right: 350px;

        bottom: 48px;

        width: 270px;
        height: 410px;
    }


    /*
     * De kleine avatar in de header is op desktop
     * niet meer nodig: Twink staat er volledig naast.
     */

    .gz-twink.is-open
    .gz-twink-header
    .gz-twink-avatar {
        display: none;
    }


    .gz-twink.is-open
    .gz-twink-header {
        min-height: 58px;
    }

}


/* ----------------------------------------------------------
   GROTE DESKTOPS
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .gz-twink-fullbody {
        right: 355px;

        width: 300px;
        height: 445px;
    }

}


/* ----------------------------------------------------------
   KLEINERE DESKTOP / LAPTOP
   ---------------------------------------------------------- */

@media (
    min-width: 981px
) and (
    max-width: 1179px
) {

    .gz-twink-fullbody {
        right: 345px;

        bottom: 48px;

        width: 220px;
        height: 340px;
    }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (
    min-width: 701px
) and (
    max-width: 980px
) {

    /*
     * Geen zijwaartse ruimte genoeg voor een grote
     * full-body naast het panel.
     */

    .gz-twink-fullbody {
        display: none;
    }


    /*
     * Daarom grotere Twink in de panelheader.
     * object-fit contain toont veel meer van zijn lichaam.
     */

    .gz-twink.is-open
    .gz-twink-avatar {
        width: 72px;
        height: 92px;

        border: 0;

        border-radius: 0;

        object-fit: contain;
        object-position: center bottom;

        background: transparent;

        filter:
            drop-shadow(
                0 8px 13px
                rgba(0,0,0,.34)
            );
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .gz-twink-fullbody {
        display: none !important;
    }


    /*
     * Op mobiel krijgt Twink zelf meer plaats bovenaan,
     * zonder het bottom sheet gigantisch te maken.
     */

    .gz-twink.is-open
    .gz-twink-avatar {
        width: 68px;
        height: 92px;

        flex:
            0 0 68px;

        border: 0;

        border-radius: 0;

        object-fit: contain;
        object-position: center bottom;

        background: transparent;

        filter:
            drop-shadow(
                0 7px 12px
                rgba(0,0,0,.35)
            );
    }


    .gz-twink.is-open
    .gz-twink-header {
        align-items: center;

        min-height: 104px;
    }

}


/* ----------------------------------------------------------
   OPEN ANIMATIE
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    .gz-twink.is-open
    .gz-twink-fullbody img {
        animation:
            gzTwinkFullBodyArrival
            .28s
            ease-out;
    }


    @keyframes gzTwinkFullBodyArrival {

        0% {
            opacity: 0;

            transform:
                translateY(12px);
        }

        100% {
            opacity: 1;

            transform:
                translateY(0);
        }

    }

}


/* ==========================================================
   TWINK V1.3
   FULL BODY RECHTS VAN PANEL
   LAUNCHER IETS HOGER
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1180px) {

    /*
     * Hele Twink-root iets hoger zodat de ronde avatar
     * net boven de chat/emoticon-toolbar komt.
     */

    .gz-twink,
    .gz-twink.is-right-rail-page {
        bottom: 142px !important;
    }


    /*
     * Paneel compenseert die 24px verhoging,
     * zodat het paneel zelf ongeveer op dezelfde
     * aangename plaats blijft staan.
     */

    .gz-twink-panel {
        bottom: 38px !important;
    }


    /*
     * Full-body Twink stond links van zijn paneel.
     * Nu bewust RECHTS ervan, over de rechterrail /
     * Global Chat heen.
     */

    .gz-twink-fullbody {
        right: -300px !important;
        left: auto !important;

        bottom: 24px !important;

        width: 285px !important;
        height: 430px !important;

        z-index: 3 !important;
    }


    .gz-twink-fullbody img {
        object-fit: contain !important;
        object-position: center bottom !important;
    }


    /*
     * Paneel blijft boven zijn eigen achtergrond,
     * full-body mag rechts ernaast zichtbaar zijn.
     */

    .gz-twink-panel {
        z-index: 4 !important;
    }


    .gz-twink-launcher {
        z-index: 5 !important;
    }

}


/* ----------------------------------------------------------
   EXTRA BREDE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .gz-twink-fullbody {
        right: -325px !important;

        width: 310px !important;
        height: 455px !important;
    }

}


/* ----------------------------------------------------------
   LAPTOP / KLEINERE DESKTOP
   ---------------------------------------------------------- */

@media (
    min-width: 981px
) and (
    max-width: 1179px
) {

    .gz-twink {
        bottom: 132px !important;
    }


    .gz-twink-panel {
        bottom: 38px !important;
    }


    /*
     * Op deze breedte nog steeds rechts,
     * maar iets kleiner zodat hij niet te veel
     * van het scherm inneemt.
     */

    .gz-twink-fullbody {
        right: -225px !important;
        left: auto !important;

        bottom: 22px !important;

        width: 215px !important;
        height: 335px !important;
    }

}


/* ----------------------------------------------------------
   TABLET / MOBILE
   bestaande bottom-sheet gedrag behouden
   ---------------------------------------------------------- */

@media (max-width: 980px) {

    /*
     * Geen full-body naast het paneel op smalle schermen.
     * Daar blijft de bestaande grotere header-Twink actief.
     */

    .gz-twink-fullbody {
        display: none !important;
    }

}


/* ==========================================================
   TWINK V2
   CHAT + LOCAL KNOWLEDGE
   ========================================================== */


/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

.gz-twink-body {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(177, 91, 255, .36)
        transparent;
}


.gz-twink-conversation:empty {
    display: none;
}


.gz-twink-conversation:not(:empty) {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 12px;
}


/* ----------------------------------------------------------
   MESSAGES
   ---------------------------------------------------------- */

.gz-twink-message {
    display: flex;

    width: 100%;
}


.gz-twink-message.is-user {
    justify-content: flex-end;
}


.gz-twink-message.is-twink {
    justify-content: flex-start;
}


.gz-twink-message-bubble {
    max-width: 88%;

    padding:
        8px
        10px;

    border-radius:
        12px;

    font-size:
        10px;

    line-height:
        1.45;
}


.gz-twink-message.is-user
.gz-twink-message-bubble {
    border:
        1px solid
        rgba(206, 139, 255, .30);

    border-bottom-right-radius:
        4px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(126, 66, 255, .29),
            rgba(235, 53, 183, .17)
        );
}


.gz-twink-message.is-twink
.gz-twink-message-bubble {
    border:
        1px solid
        rgba(255,255,255,.08);

    border-bottom-left-radius:
        4px;

    color:
        rgba(255,255,255,.78);

    background:
        rgba(255,255,255,.045);
}


.gz-twink-message-name {
    display: block;

    margin-bottom: 3px;

    color:
        #dbb8ff;

    font-size: 8px;

    font-weight: 850;

    letter-spacing:
        .045em;

    text-transform: uppercase;
}


.gz-twink-message-bubble p {
    margin: 0;
}


/* ----------------------------------------------------------
   FOLLOW-UP ACTIONS
   ---------------------------------------------------------- */

.gz-twink-followups {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 8px;
}


.gz-twink-followup-action {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-height: 28px;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(187, 108, 255, .24);

    border-radius:
        8px;

    color:
        rgba(255,255,255,.87);

    background:
        rgba(153, 68, 238, .10);

    font:
        inherit;

    font-size:
        8px;

    font-weight:
        750;

    cursor: pointer;
}


.gz-twink-followup-action:hover {
    border-color:
        rgba(213, 156, 255, .48);

    color: #fff;

    background:
        rgba(164, 78, 246, .18);
}


.gz-twink-followup-icon {
    font-size: 9px;
}


/* ----------------------------------------------------------
   QUICK ACTIONS
   ---------------------------------------------------------- */

.gz-twink-quick-section {
    margin-top: 4px;
}


/* ----------------------------------------------------------
   COMPOSER
   ---------------------------------------------------------- */

.gz-twink-composer {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        36px;

    gap: 7px;

    padding:
        10px
        12px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(3, 2, 7, .34);
}


.gz-twink-input {
    width: 100%;

    min-width: 0;

    height: 36px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        10px;

    outline: none;

    color:
        #fff;

    background:
        rgba(255,255,255,.045);

    font:
        inherit;

    font-size:
        10px;
}


.gz-twink-input::placeholder {
    color:
        rgba(255,255,255,.35);
}


.gz-twink-input:focus {
    border-color:
        rgba(189, 110, 255, .55);

    box-shadow:
        0 0 0 2px
        rgba(154, 67, 237, .10);
}


.gz-twink-send {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(220, 166, 255, .31);

    border-radius:
        10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #8447f4,
            #e439b6
        );

    box-shadow:
        0 5px 15px
        rgba(175, 65, 240, .20);

    cursor: pointer;
}


.gz-twink-send:hover {
    filter:
        brightness(1.08);
}


/* ----------------------------------------------------------
   PANEL HOOGTE
   ---------------------------------------------------------- */

.gz-twink-panel {
    max-height:
        min(
            610px,
            calc(100vh - 165px)
        ) !important;
}


.gz-twink-body {
    flex:
        1 1 auto;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .gz-twink-panel {
        max-height:
            min(
                76vh,
                620px
            ) !important;
    }


    .gz-twink-composer {
        padding:
            9px
            10px;
    }


    .gz-twink-input {
        font-size: 16px;
    }


    .gz-twink-message-bubble {
        max-width: 92%;
    }

}

/* ==========================================================
   TWINK V2.4 - SMART GUIDANCE
   ========================================================== */

.twink-guided-control {
    position: relative !important;
    z-index: 12050 !important;

    outline:
        3px solid rgba(255, 63, 190, 0.95) !important;

    outline-offset:
        4px !important;

    box-shadow:
        0 0 0 7px rgba(255, 63, 190, 0.16),
        0 0 22px rgba(255, 63, 190, 0.85),
        0 0 42px rgba(108, 92, 255, 0.55) !important;

    animation:
        twink-guidance-pulse
        1.05s
        ease-in-out
        infinite
        alternate !important;
}


@keyframes twink-guidance-pulse {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.055);
    }

}


@media (prefers-reduced-motion: reduce) {

    .twink-guided-control {
        animation:
            none !important;
    }

}


/* ==========================================================
   TWINK V2.7 - PERSONAL GREETING
   ========================================================== */

.gz-twink-greeting {
    position: absolute;

    right: 4px;
    bottom: 62px;

    width: max-content;
    max-width: 260px;

    display: flex;
    flex-direction: column;

    gap: 2px;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(203, 135, 255, .33);

    border-radius:
        13px
        13px
        4px
        13px;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            rgba(18, 9, 29, .97),
            rgba(39, 16, 53, .96)
        );

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, .42),
        0 0 20px
        rgba(169, 72, 255, .13);

    backdrop-filter:
        blur(13px);

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(8px)
        scale(.98);

    animation:
        gzTwinkGreetingIn
        .28s
        ease-out
        forwards;

    z-index:
        6;
}


.gz-twink-greeting::after {
    content: "";

    position: absolute;

    right: 13px;
    bottom: -7px;

    width: 13px;
    height: 13px;

    border-right:
        1px solid
        rgba(203, 135, 255, .25);

    border-bottom:
        1px solid
        rgba(203, 135, 255, .25);

    background:
        rgba(34, 14, 47, .98);

    transform:
        rotate(45deg);
}


.gz-twink-greeting:hover {
    border-color:
        rgba(224, 174, 255, .56);

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, .48),
        0 0 25px
        rgba(184, 79, 255, .22);
}


.gz-twink-greeting-title {
    position: relative;

    z-index: 1;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1.25;
}


.gz-twink-greeting-sub {
    position: relative;

    z-index: 1;

    color:
        rgba(255, 255, 255, .59);

    font-size:
        8px;

    line-height:
        1.35;
}


.gz-twink-greeting.is-leaving {
    animation:
        gzTwinkGreetingOut
        .20s
        ease-in
        forwards;
}


/*
 * Zodra het grote Twink-panel open is,
 * hoeft de begroeting niet meer zichtbaar te zijn.
 */

.gz-twink.is-open
.gz-twink-greeting {
    display:
        none;
}


@keyframes gzTwinkGreetingIn {

    from {
        opacity:
            0;

        transform:
            translateY(8px)
            scale(.98);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes gzTwinkGreetingOut {

    from {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity:
            0;

        transform:
            translateY(5px)
            scale(.98);
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .gz-twink-greeting {
        right:
            0;

        bottom:
            60px;

        max-width:
            min(
                230px,
                calc(100vw - 34px)
            );

        padding:
            8px
            10px;
    }


    .gz-twink-greeting-title {
        font-size:
            10px;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .gz-twink-greeting,
    .gz-twink-greeting.is-leaving {
        animation:
            none;

        opacity:
            1;

        transform:
            none;
    }

}



/* ==========================================================
   TWINK V2.9 - SMART NUDGES
   ========================================================== */

.gz-twink-nudge {
    max-width:
        275px;
}


.gz-twink-nudge
.gz-twink-greeting-title {
    color:
        #ffffff;
}


.gz-twink-nudge
.gz-twink-greeting-sub {
    max-width:
        235px;
}


.gz-twink-nudge::before {
    content:
        "";

    position:
        absolute;

    inset:
        -1px;

    border-radius:
        inherit;

    pointer-events:
        none;

    box-shadow:
        0 0 18px
        rgba(198, 76, 255, .12);
}


@media (max-width: 700px) {

    .gz-twink-nudge {
        max-width:
            min(
                245px,
                calc(100vw - 34px)
            );
    }

}



/* ==========================================================
   TWINK V3 - SMART UNDERSTANDING / TYPEAHEAD
   ========================================================== */

.gz-twink-typeahead {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding:
        6px
        10px
        0;

    border-top:
        1px solid
        rgba(255,255,255,.045);

    background:
        rgba(4, 2, 8, .38);
}


.gz-twink-typeahead[hidden] {
    display: none !important;
}


.gz-twink-typeahead-item {
    width: 100%;

    min-height: 30px;

    display: flex;
    align-items: center;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(180, 101, 255, .14);

    border-radius:
        8px;

    color:
        rgba(255,255,255,.72);

    background:
        rgba(255,255,255,.035);

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        650;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.gz-twink-typeahead-item::before {
    content:
        "↗";

    flex:
        0 0 auto;

    margin-right:
        7px;

    color:
        rgba(206, 142, 255, .72);

    font-size:
        8px;
}


.gz-twink-typeahead-item:hover,
.gz-twink-typeahead-item:focus-visible {
    border-color:
        rgba(206, 132, 255, .42);

    color:
        #fff;

    background:
        rgba(145, 62, 225, .12);

    outline:
        none;

    transform:
        translateX(2px);
}


@media (max-width: 700px) {

    .gz-twink-typeahead {
        padding:
            5px
            8px
            0;
    }


    .gz-twink-typeahead-item {
        min-height:
            34px;

        font-size:
            10px;
    }

}