/* Modal de reconexão Blazor Server — identidade Kaju / ChatBox */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(23, 29, 47, 0.45);
    backdrop-filter: blur(2px);
    transition: visibility 0s linear 800ms;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    visibility: visible;
    transition-delay: 0s;
}

.chatbox-reconnect__panel {
    width: min(100%, 26rem);
    background: #fff;
    border: 1px solid var(--kaju-border, #dde2ef);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(23, 29, 47, 0.18);
    overflow: hidden;
    text-align: center;
    animation: chatbox-reconnect-in 0.25s ease-out;
}

.chatbox-reconnect__panel::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--kaju-nut-dark, #2d3142) 0%, var(--kaju-orange, #ff7a2f) 100%);
}

.chatbox-reconnect__body {
    padding: 1.75rem 1.5rem 1.5rem;
}

.chatbox-reconnect__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kaju-text-muted, #636e8b);
}

.chatbox-reconnect__brand img {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.3rem;
}

.chatbox-reconnect__state {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .chatbox-reconnect__state--show,
#components-reconnect-modal.components-reconnect-retrying .chatbox-reconnect__state--show,
#components-reconnect-modal.components-reconnect-paused .chatbox-reconnect__state--paused,
#components-reconnect-modal.components-reconnect-failed .chatbox-reconnect__state--failed,
#components-reconnect-modal.components-reconnect-rejected .chatbox-reconnect__state--rejected {
    display: block;
}

.chatbox-reconnect__spinner {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
    border: 0.22rem solid var(--kaju-orange-soft, rgba(255, 122, 47, 0.12));
    border-top-color: var(--kaju-orange, #ff7a2f);
    border-radius: 50%;
    animation: chatbox-reconnect-spin 0.75s linear infinite;
}

.chatbox-reconnect__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--kaju-text-strong, #171d2f);
}

.chatbox-reconnect__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--kaju-text-muted, #636e8b);
}

.chatbox-reconnect__attempt {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #f2f4fa;
    color: var(--kaju-nut-dark, #2d3142);
    font-size: 0.78rem;
    font-weight: 600;
}

.chatbox-reconnect__actions {
    margin-top: 1.25rem;
}

.chatbox-reconnect__actions .btn {
    min-width: 11rem;
}

@keyframes chatbox-reconnect-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chatbox-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}