/* /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-1zj29c8zaw] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-b6i01zyy73],
.components-reconnect-repeated-attempt-visible[b-b6i01zyy73],
.components-reconnect-failed-visible[b-b6i01zyy73],
.components-pause-visible[b-b6i01zyy73],
.components-resume-failed-visible[b-b6i01zyy73],
.components-rejoining-animation[b-b6i01zyy73] {
    display: none;
}

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


#components-reconnect-modal[b-b6i01zyy73] {
    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-b6i01zyy73 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-b6i01zyy73 {
    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-gtybjp9q8v] {
    padding: 0.9rem 1rem;
    background: #1f1f1f;
    color: #fff;
    flex: 0 0 auto;
}

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

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

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

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

.widget-bubble[b-gtybjp9q8v] {
    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-gtybjp9q8v] {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #fff;
}

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

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

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

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

.widget-send:disabled[b-gtybjp9q8v] { opacity: 0.45; cursor: default; }
/* /Components/Ui/ReplyText.razor.rz.scp.css */
/* Lo stile del testo di Elvira, che qui arriva come HTML: paragrafi, elenchi, grassetto,
   corsivo, codice in linea, a capo e collegamenti, e basta.

   Il markup viene da una stringa e non porta l'attributo con cui Blazor isola gli stili di un
   componente, quindi tutto quello che sta sotto la radice si raggiunge con ::deep. */

.reply-text[b-uln6ewpzgz] {
    /* Il testo contiene a capo fra un elemento e l'altro, e dentro un contenitore che ha
       pre-wrap, come la bolla del widget per i messaggi del cliente, si leggerebbero come righe
       vuote in più. Gli a capo che contano sono i <br>. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Il primo e l'ultimo blocco non portano spazio fuori dal testo: lo spazio attorno alla risposta lo
   decide chi la usa. */
.reply-text[b-uln6ewpzgz]  > :first-child {
    margin-top: 0;
}

.reply-text[b-uln6ewpzgz]  > :last-child {
    margin-bottom: 0;
}

.reply-text[b-uln6ewpzgz]  p {
    margin: 0 0 0.5em;
}

.reply-text[b-uln6ewpzgz]  ul,
.reply-text[b-uln6ewpzgz]  ol {
    margin: 0 0 0.5em;
    padding-left: 1.4em;
}

.reply-text[b-uln6ewpzgz]  ul ul,
.reply-text[b-uln6ewpzgz]  ul ol,
.reply-text[b-uln6ewpzgz]  ol ul,
.reply-text[b-uln6ewpzgz]  ol ol {
    margin-bottom: 0;
}

/* Un elenco con righe vuote fra gli elementi mette un paragrafo dentro ognuno. */
.reply-text[b-uln6ewpzgz]  li > p {
    margin: 0;
}

.reply-text[b-uln6ewpzgz]  strong {
    font-weight: 600;
}

.reply-text[b-uln6ewpzgz]  a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.reply-text[b-uln6ewpzgz]  code {
    font-size: 0.9em;
    overflow-wrap: anywhere;
}