.tb-testing-badge {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 950;
    width: max-content;
    max-width: calc(100vw - 32px);
    color: #513e00;
    font: 12px/1.5 system-ui, sans-serif;
}

.tb-testing-badge > summary {
    padding: 5px 10px;
    border: 1px solid #b89333;
    border-radius: 8px;
    background: #fff3cd;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    cursor: pointer;
    white-space: nowrap;
}

.tb-testing-badge > summary:focus-visible {
    outline: 3px solid #76570b;
    outline-offset: 3px;
}

.tb-testing-badge > summary strong {
    font-weight: 700;
    letter-spacing: .04em;
}

.tb-testing-badge > summary span {
    margin-left: 5px;
    font: 11px/1.5 ui-monospace, monospace;
}

.tb-testing-badge__details {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(280px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid #b89333;
    border-radius: 8px;
    background: #fffaf0;
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}

.tb-testing-badge__details p {
    margin: 0;
}

.tb-testing-badge__details p + p {
    margin-top: 8px;
}

/* Leave the existing chat launcher and its popover unobstructed. */
body:has(#chatbot-button) .tb-testing-badge {
    right: 108px;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 600px) {
    body:has(#chatbot-button) .tb-testing-badge {
        right: 88px;
    }

    body:has(#chatbot-button) .tb-testing-badge__details {
        width: min(240px, calc(100vw - 104px));
    }
}