.tba-chat-launcher {
        --tba-launcher-shadow: -6px 0 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 99998;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 13px 15px 13px 14px;
        border: 0;
        border-right: 0;
        border-radius: 14px 0 0 14px;
        background: linear-gradient(180deg, #0073FC, #005BC7);
        box-shadow: var(--tba-launcher-shadow);
        color: #FFFFFF;
        font-family: 'TK Heading', 'Poppins', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.07em;
        line-height: 1;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, padding .18s ease;
    }

    .tba-chat-launcher:hover,
    .tba-chat-launcher:focus-visible {
        padding-right: 19px;
        box-shadow: -8px 0 28px rgba(0, 115, 252, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
        outline: none;
    }

    .tba-chat-launcher:active {
        transform: translateY(-50%) scale(0.98);
    }

    .tba-chat-launcher__icon {
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
    }

    .tba-chat-launcher__icon svg {
        width: 20px;
        height: 20px;
    }

    /* the "we are here" dot, the same green the navbar uses for live states */
    .tba-chat-launcher__pip {
        position: absolute;
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22C55E;
        box-shadow: 0 0 0 2px rgba(0, 91, 199, 0.9);
    }

    /* While the panel is open the launcher gets out of the way. */
    .tba-chat-launcher.is-hidden {
        pointer-events: none;
        opacity: 0;
        transform: translateY(-50%) translateX(12px);
    }

    /* Pressed before Tawk has finished loading: a soft pulse until its
       window opens. */
    .tba-chat-launcher.is-loading {
        cursor: progress;
        animation: tba-chat-loading 1s ease-in-out infinite alternate;
    }

    @keyframes tba-chat-loading {
        to { opacity: 0.72; }
    }

    html[data-tk-theme="light"] .tba-chat-launcher {
        --tba-launcher-shadow: -6px 0 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* After the page has been open a while the launcher gives a short
       shake with a soft blue ripple, until the visitor opens the chat. */
    .tba-chat-launcher.is-nudging {
        transform-origin: 100% 50%;
        animation: tba-chat-shake .9s cubic-bezier(.36, .07, .19, .97) both, tba-chat-ring 1.8s ease-out both;
    }

    @keyframes tba-chat-shake {
        0%, 100% { transform: translateY(-50%) translateX(0) rotate(0); }
        12% { transform: translateY(-50%) translateX(-6px) rotate(-6deg); }
        26% { transform: translateY(-50%) translateX(3px) rotate(5deg); }
        40% { transform: translateY(-50%) translateX(-4px) rotate(-4deg); }
        54% { transform: translateY(-50%) translateX(2px) rotate(3deg); }
        68% { transform: translateY(-50%) translateX(-2px) rotate(-1.5deg); }
        82% { transform: translateY(-50%) translateX(1px) rotate(.5deg); }
    }

    @keyframes tba-chat-ring {
        0% { box-shadow: var(--tba-launcher-shadow), 0 0 0 0 rgba(0, 115, 252, .55), 0 0 0 0 rgba(125, 185, 255, .4); }
        70%, 100% { box-shadow: var(--tba-launcher-shadow), 0 0 0 16px rgba(0, 115, 252, 0), 0 0 0 30px rgba(125, 185, 255, 0); }
    }

    /* On a phone the label is dropped: a round button in the same place,
       clear of the thumb zone at the bottom of the screen. */
    @media (max-width: 767px) {
        .tba-chat-launcher {
            gap: 0;
            padding: 13px;
            border-radius: 50% 0 0 50%;
        }

        .tba-chat-launcher:hover,
        .tba-chat-launcher:focus-visible {
            padding-right: 13px;
        }

        .tba-chat-launcher__label {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .tba-chat-launcher {
            transition: none;
        }

        /* no shake for reduced motion, only the soft glow */
        .tba-chat-launcher.is-nudging {
            animation: tba-chat-ring 1.8s ease-out both;
        }
    }