/* Subtle branded reconnect toast */
.twx-reconnect > div {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.25);
    background: var(--main-content-color, #333);
    color: var(--primary-color);
    font-size: 0.9rem;
    display: none;
    z-index: 9999;
    gap: 0.5rem;
    align-items: center;
    border-left: 4px solid var(--tertiary-color, #4caf50);
    opacity: 0.96;
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > .twx-reconnect__attempting,
.components-reconnect-retrying > .twx-reconnect__attempting {
    display: inline-flex;
    align-items: center;
}

    .components-reconnect-show > .twx-reconnect__attempting button,
    .components-reconnect-retrying > .twx-reconnect__attempting button {
        margin: unset !important;
        background: var(--primary-color) !important;
        color: var(--main-content-color) !important;
    }

.components-reconnect-failed > .twx-reconnect__failed {
    display: inline-flex;
    align-items: center;
}

    .components-reconnect-failed > .twx-reconnect__failed button {
        margin: unset !important;
        background: var(--primary-color) !important;
        color: var(--main-content-color) !important;
    }

.components-reconnect-rejected > .twx-reconnect__rejected {
    display: inline-flex;
    align-items: center;
}

.twx-reconnect span {
    font-weight: 500;
}

.twx-reconnect small {
    font-size: 0.8rem;
    opacity: 0.8;
}

.twx-reconnect button {
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--tertiary-color, #4caf50);
    color: #fff;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

    .twx-reconnect button:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.25);
    }

#components-reconnect-modal {
    transition: visibility 0s linear 1000ms;
}

    #components-reconnect-modal button {
        margin: unset !important;
        background: var(--primary-color) !important;
        color: var(--main-content-color) !important;
    }