/* Hidden by default */
#components-reconnect-modal {
    display: none;
}

    /* Show modal when reconnecting or failed */
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed {
        display: flex;
        position: fixed;
        inset: 0;
        background-color: var(--color-overlay-60);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }

    /* Dialog styling */
    #components-reconnect-modal .reconnect-dialog {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        text-align: center;
        min-width: 320px;
        box-shadow: 0 10px 30px var(--color-overlay-30);
    }

    /* Hide failed message & reload button by default */
    #components-reconnect-modal .reconnect-failed-text,
    #components-reconnect-modal .reload-button {
        display: none;
    }

    /* When reconnect failed → show failed message + button */
    #components-reconnect-modal.components-reconnect-failed .reconnect-text {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
    #components-reconnect-modal.components-reconnect-failed .reload-button {
        display: block;
        margin-top: 1rem;
    }