/* /Components/Layout/EmbeddedLayout.razor.rz.scp.css */
/* Vedi Widget.razor.css: gli stili stanno accanto al componente, non dentro il suo markup. */

.embedded-shell[b-tixxzr3x89] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kwiono6ohq],
.components-reconnect-repeated-attempt-visible[b-kwiono6ohq],
.components-reconnect-failed-visible[b-kwiono6ohq],
.components-pause-visible[b-kwiono6ohq],
.components-resume-failed-visible[b-kwiono6ohq],
.components-rejoining-animation[b-kwiono6ohq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-retrying[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-failed[b-kwiono6ohq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kwiono6ohq] {
    display: block;
}


#components-reconnect-modal[b-kwiono6ohq] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-kwiono6ohq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-kwiono6ohq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kwiono6ohq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-kwiono6ohq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-kwiono6ohq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-kwiono6ohq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-kwiono6ohq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-kwiono6ohq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-kwiono6ohq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-kwiono6ohq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-kwiono6ohq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-kwiono6ohq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-kwiono6ohq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-kwiono6ohq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-kwiono6ohq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-kwiono6ohq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-kwiono6ohq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-kwiono6ohq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Widget.razor.rz.scp.css */
/* Gli stili del widget stanno qui e non in un blocco <style> dentro il componente.
   Il widget e' reso in modo interattivo: Blazor lo prerenderizza, poi il circuito si riaggancia
   al DOM confrontandolo con quello che si aspetta, e un <style> e' un nodo che il browser
   rielabora per conto suo. E' l'unico punto in cui questa applicazione teneva CSS dentro un
   componente interattivo, ed e' anche l'unica pagina che cadeva appena aperta.

   La forma isolata e' quella che il progetto usa gia' per MainLayout e ReconnectModal: le regole
   valgono solo per gli elementi di questo componente, senza bisogno di prefissi. */

.widget-header[b-i15bqoqb17] {
    padding: 0.9rem 1rem;
    background: #1f1f1f;
    color: #fff;
    flex: 0 0 auto;
}

.widget-title[b-i15bqoqb17] { font-weight: 600; line-height: 1.2; }
.widget-subtitle[b-i15bqoqb17] { font-size: 0.78rem; opacity: 0.75; }

.widget-messages[b-i15bqoqb17] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    background: #fafafa;
}

.widget-welcome[b-i15bqoqb17] {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.45;
}

.widget-row[b-i15bqoqb17] { display: flex; margin-bottom: 0.6rem; }
.widget-row.from-customer[b-i15bqoqb17] { justify-content: flex-end; }
.widget-row.from-elvira[b-i15bqoqb17] { justify-content: flex-start; }

.widget-bubble[b-i15bqoqb17] {
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.45;
    background: #fff;
    border: 1px solid #e3e3e3;
}

.from-customer .widget-bubble[b-i15bqoqb17] {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #fff;
}

.widget-typing[b-i15bqoqb17] { color: #888; font-style: italic; }
.widget-failure[b-i15bqoqb17] { background: #fff4f4; border-color: #f0caca; }

.widget-composer[b-i15bqoqb17] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem;
    border-top: 1px solid #e3e3e3;
    background: #fff;
}

.widget-input[b-i15bqoqb17] {
    flex: 1 1 auto;
    border: 1px solid #d8d8d8;
    border-radius: 0.6rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
}

.widget-send[b-i15bqoqb17] {
    border: none;
    border-radius: 0.6rem;
    padding: 0.55rem 1rem;
    background: #1f1f1f;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

.widget-send:disabled[b-i15bqoqb17] { opacity: 0.45; cursor: default; }