/* Theme */
/*
FONTS
--sistemi-chatbot-text-font-family: font family del testo

EFFECTS
--sistemi-chatbot-transition: transizione generale per hover, apertura modali, ecc.

COLORS
--sistemi-chatbot-background: colore dello sfondo principale
--sistemi-chatbot-color: colore di default del testo
--sistemi-chatbot-border: colore di default dei bordi
--sistemi-chatbot-toolbar-background: colore dello sfondo della toolbar
--sistemi-chatbot-sidebar-btn-background: colore dello sfondo dei bottoni della toolbar
--sistemi-chatbot-sidebar-btn-color: colore del testo dei bottoni della toolbar
--sistemi-chatbot-sidebar-btn-hover-background: colore hover dello sfondo dei bottoni della toolbar
--sistemi-chatbot-sidebar-thread-background: colore dello sfondo degli elementi della lista thread
--sistemi-chatbot-sidebar-thread-active-background: colore dello sfondo degll'elemento attivo della lista thread
--sistemi-chatbot-sidebar-thread-active-color: colore del testo dell'elemento attivo della lista thread
--sistemi-chatbot-sidebar-thread-hover-background: colore hover dello sfondo degli elementi della lista thread
--sistemi-chatbot-sidebar-dropdown-color: colore del testo dropdown dei thread
--sistemi-chatbot-sidebar-dropdown-background: colore dello sfondo della dropdown dei thread
--sistemi-chatbot-sidebar-dropdown-border: colore del bordo della dropdown dei thread
--sistemi-chatbot-sidebar-dropdown-hover-background: colore hover dello sfondo della dropdown dei thread
--sistemi-chatbot-overlay-background: colore dello sfondo dell'overlay dei modali
--sistemi-chatbot-modal-background: colore dello sfondo dei modali
--sistemi-chatbot-modal-color: colore del testo dei modali
--sistemi-chatbot-modal-text-color: colore del testo secondario dei modali
--sistemi-chatbot-modal-btn-secondary-background: colore dello sfondo dei bottoni secondari dei modali
--sistemi-chatbot-modal-btn-secondary-border: colore del bordo dei bottoni secondari dei modali
--sistemi-chatbot-modal-btn-secondary-color: colore del testo dei bottoni secondari dei modali
--sistemi-chatbot-modal-btn-secondary-hover-background: colore hover dello sfondo dei bottoni secondari dei modali
--sistemi-chatbot-modal-btn-danger-background: colore dello sfondo dei bottoni danger dei modali
--sistemi-chatbot-modal-btn-danger-color: colore del testo dei bottoni danger dei modali
--sistemi-chatbot-modal-btn-danger-hover-background: colore hover dello sfondo dei bottoni danger dei modali
--sistemi-chatbot-chat-background: colore dello sfondo dell'area chat
--sistemi-chatbot-link-color: colore dei link
--sistemi-chatbot-link-hover-color: colore hover dei link
--sistemi-chatbot-message-flashing-cursor-color: colore del cursore lampeggiante
--sistemi-chatbot-message-user-background: colore dello sfondo dei messaggi dell'utente
--sistemi-chatbot-message-user-color: colore del testo dei messaggi dell'utente
--sistemi-chatbot-message-bot-background: colore dello sfondo dei messaggi del bot
--sistemi-chatbot-message-bot-color: colore del testo dei messaggi del bot
--sistemi-chatbot-message-error-border: colore del bordo dei messaggi di errore
--sistemi-chatbot-message-error-background: colore dello sfondo dei messaggi di errore
--sistemi-chatbot-message-error-color: colore del testo dei messaggi di errore
--sistemi-chatbot-reasoning-background: colore dello sfondo dei messaggi di reasoning
--sistemi-chatbot-reasoning-color: colore del testo dei messaggi di reasoning
--sistemi-chatbot-toolcall-background: colore dello sfondo dei messaggi di toolcall
--sistemi-chatbot-toolcall-color: colore del testo dei messaggi di toolcall
--sistemi-chatbot-code-wrapper-background: colore dello sfondo del wrapper dei blocchi di codice
--sistemi-chatbot-code-header-background: colore dello sfondo dell'header dei blocchi di codice
--sistemi-chatbot-code-lang-color: colore del testo dell'indicazione del linguaggio dei blocchi di codice
--sistemi-chatbot-code-copy-btn-color: colore del testo del bottone di copia dei blocchi di codice
--sistemi-chatbot-code-copy-btn-hover-background: colore hover dello sfondo del bottone di copia dei blocchi di codice
--sistemi-chatbot-code-copy-btn-copied-border: colore del bordo del bottone di copia dei blocchi di codice quando è stato cliccato
--sistemi-chatbot-code-copy-btn-copied-color: colore del testo del bottone di copia dei blocchi di codice quando è stato cliccato
--sistemi-chatbot-codeblock-background: colore dello sfondo dei blocchi di codice
--sistemi-chatbot-codeblock-color: colore del testo dei blocchi di codice
--sistemi-chatbot-code-comment-color: colore del testo dei commenti nei blocchi di codice
--sistemi-chatbot-code-string-color: colore del testo delle stringhe nei blocchi di codice
--sistemi-chatbot-code-number-color: colore del testo dei numeri nei blocchi di codice
--sistemi-chatbot-code-keyword-color: colore del testo delle keyword nei blocchi di codice
--sistemi-chatbot-code-func-color: colore del testo delle funzioni nei blocchi di codice
--sistemi-chatbot-status-idle-color: colore dello stato idle
--sistemi-chatbot-status-listening-color: colore dello stato listening
--sistemi-chatbot-status-reasoning-color: colore dello stato reasoning
--sistemi-chatbot-status-responding-color: colore dello stato responding
--sistemi-chatbot-disclaimer-color: colore del disclaimer
--sistemi-chatbot-inputbar-background: colore dello sfondo della input bar
--sistemi-chatbot-inputbar-text-color: colore del testo della input bar
--sistemi-chatbot-inputbar-placeholder-color: colore del testo placeholder della input bar
--sistemi-chatbot-inputbar-btn-background: colore dello sfondo del bottone di invio della input bar
--sistemi-chatbot-inputbar-btn-color: colore del testo del bottone di invio della input bar
--sistemi-chatbot-inputbar-btn-hover-background: colore hover dello sfondo del bottone di invio della input bar
--sistemi-chatbot-inputbar-send-btn-background: colore dello sfondo del bottone di invio della input bar
--sistemi-chatbot-inputbar-send-btn-color: colore del testo del bottone di invio della input bar
--sistemi-chatbot-inputbar-send-btn-hover-background: colore hover dello sfondo del bottone di invio della input bar

*/
:root {
    /* Fonts */
    --sistemi-chatbot-text-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Effects */
    --sistemi-chatbot-transition: all 0.2s ease;
}

:root,
.sistemi-chatbot-theme-light {
    /* Colors */
    --sistemi-chatbot-background: #ffffff;
    --sistemi-chatbot-color: #111111;
    --sistemi-chatbot-border: #333333;
    --sistemi-chatbot-toolbar-background: #e1e1e1;
    --sistemi-chatbot-sidebar-btn-background: #e1e1e1;
    --sistemi-chatbot-sidebar-btn-color: #111111;
    --sistemi-chatbot-sidebar-btn-hover-background: #c0c0c0;
    --sistemi-chatbot-sidebar-thread-background: #e1e1e1;
    --sistemi-chatbot-sidebar-thread-active-background: #d0d0d0;
    --sistemi-chatbot-sidebar-thread-active-color: #111111;
    --sistemi-chatbot-sidebar-thread-hover-background: #c0c0c0;
    --sistemi-chatbot-sidebar-dropdown-color: #111111;
    --sistemi-chatbot-sidebar-dropdown-background: #ffffff;
    --sistemi-chatbot-sidebar-dropdown-border: #cccccc;
    --sistemi-chatbot-sidebar-dropdown-hover-background: #f0f0f0;
    --sistemi-chatbot-overlay-background: rgba(0,0,0,0.3);
    --sistemi-chatbot-modal-background: #ffffff;
    --sistemi-chatbot-modal-color: #111111;
    --sistemi-chatbot-modal-text-color: #333333;
    --sistemi-chatbot-modal-btn-secondary-background: #f5f5f5;
    --sistemi-chatbot-modal-btn-secondary-border: #cccccc;
    --sistemi-chatbot-modal-btn-secondary-color: #111111;
    --sistemi-chatbot-modal-btn-secondary-hover-background: #e0e0e0;
    --sistemi-chatbot-modal-btn-danger-background: #d32f2f;
    --sistemi-chatbot-modal-btn-danger-color: #ffffff;
    --sistemi-chatbot-modal-btn-danger-hover-background: #b71c1c;
    --sistemi-chatbot-chat-background: #f9f9f9;
    --sistemi-chatbot-link-color: #1a73e8;
    --sistemi-chatbot-link-hover-color: #0b5ed7;
    --sistemi-chatbot-message-flashing-cursor-color: #e1e1e1;
    --sistemi-chatbot-message-user-background: #d1e7ff;
    --sistemi-chatbot-message-user-color: #111111;
    --sistemi-chatbot-message-bot-background: #f0f0f0;
    --sistemi-chatbot-message-bot-color: #111111;
    --sistemi-chatbot-message-error-border: #d32f2f;
    --sistemi-chatbot-message-error-background: #ffecec;
    --sistemi-chatbot-message-error-color: #a40000;
    --sistemi-chatbot-reasoning-background: #f0f0f0;
    --sistemi-chatbot-reasoning-color: #111111;
    --sistemi-chatbot-toolcall-background: #f0f0f0;
    --sistemi-chatbot-toolcall-color: #111111;
    --sistemi-chatbot-code-wrapper-background: #1e1e1e;
    --sistemi-chatbot-code-header-background: #2a2a2a;
    --sistemi-chatbot-code-lang-color: #9ca3af;
    --sistemi-chatbot-code-copy-btn-color: #9ca3af;
    --sistemi-chatbot-code-copy-btn-hover-background: #3a3a3a;
    --sistemi-chatbot-code-copy-btn-copied-border: #16a34a;
    --sistemi-chatbot-code-copy-btn-copied-color: #16a34a;
    --sistemi-chatbot-codeblock-background: #1e1e1e;
    --sistemi-chatbot-codeblock-color: #d4d4d4;
    --sistemi-chatbot-code-comment-color: #6a9955;
    --sistemi-chatbot-code-string-color: #ce9178;
    --sistemi-chatbot-code-number-color: #b5cea8;
    --sistemi-chatbot-code-keyword-color: #569cd6;
    --sistemi-chatbot-code-func-color: #dcdcaa;
    --sistemi-chatbot-status-idle-color: #9ca3af;
    --sistemi-chatbot-status-listening-color: #e5b700;
    --sistemi-chatbot-status-reasoning-color: #e5b700;
    --sistemi-chatbot-status-responding-color: #60a5fa;
    --sistemi-chatbot-disclaimer-color: #9ca3af;
    --sistemi-chatbot-inputbar-background: #f5f5f5;
    --sistemi-chatbot-inputbar-text-color: #111111;
    --sistemi-chatbot-inputbar-placeholder-color: #bbbbbb;
    --sistemi-chatbot-inputbar-btn-background: #e0e0e0;
    --sistemi-chatbot-inputbar-btn-color: #111111;
    --sistemi-chatbot-inputbar-btn-hover-background: #d0d0d0;
    --sistemi-chatbot-inputbar-send-btn-background: #e0e0e0;
    --sistemi-chatbot-inputbar-send-btn-color: #111111;
    --sistemi-chatbot-inputbar-send-btn-hover-background: #d0d0d0;
}

.sistemi-chatbot-theme-dark {
    /* Colors */
    --sistemi-chatbot-background: #111111;
    --sistemi-chatbot-color: #ffffff;
    --sistemi-chatbot-border: #333333;
    --sistemi-chatbot-toolbar-background: #1e1e1e;
    --sistemi-chatbot-sidebar-btn-background: #1e1e1e;
    --sistemi-chatbot-sidebar-btn-color: #ffffff;
    --sistemi-chatbot-sidebar-btn-hover-background: #3a3a3a;
    --sistemi-chatbot-sidebar-thread-background: #1e1e1e;
    --sistemi-chatbot-sidebar-thread-active-background: #333333;
    --sistemi-chatbot-sidebar-thread-active-color: #ffffff;
    --sistemi-chatbot-sidebar-thread-hover-background: #3c3c3c;
    --sistemi-chatbot-sidebar-dropdown-color: #ffffff;
    --sistemi-chatbot-sidebar-dropdown-background: #222222;
    --sistemi-chatbot-sidebar-dropdown-border: #444444;
    --sistemi-chatbot-sidebar-dropdown-hover-background: #333333;
    --sistemi-chatbot-overlay-background: rgba(0,0,0,0.6);
    --sistemi-chatbot-modal-background: #1e1e1e;
    --sistemi-chatbot-modal-color: #ffffff;
    --sistemi-chatbot-modal-text-color: #cccccc;
    --sistemi-chatbot-modal-btn-secondary-background: #2a2a2a;
    --sistemi-chatbot-modal-btn-secondary-border: #444444;
    --sistemi-chatbot-modal-btn-secondary-color: #ffffff;
    --sistemi-chatbot-modal-btn-secondary-hover-background: #333333;
    --sistemi-chatbot-modal-btn-danger-background: #b71c1c;
    --sistemi-chatbot-modal-btn-danger-color: #ffffff;
    --sistemi-chatbot-modal-btn-danger-hover-background: #ff0000;
    --sistemi-chatbot-chat-background: #1a1a1a;
    --sistemi-chatbot-link-color: #8ab4f8;
    --sistemi-chatbot-link-hover-color: #c1e0ff;
    --sistemi-chatbot-message-flashing-cursor-color: #1e1e1e;
    --sistemi-chatbot-message-user-background: #2b2b2b;
    --sistemi-chatbot-message-user-color: #ffffff;
    --sistemi-chatbot-message-bot-background: #2a2a2a;
    --sistemi-chatbot-message-bot-color: #ffffff;
    --sistemi-chatbot-message-error-border: #ff6666;
    --sistemi-chatbot-message-error-background: #5a1a1a;
    --sistemi-chatbot-message-error-color: #ff9999;
    --sistemi-chatbot-reasoning-background: #444141;
    --sistemi-chatbot-reasoning-color: #ffffff;
    --sistemi-chatbot-toolcall-background: #444141;
    --sistemi-chatbot-toolcall-color: #ffffff;
    --sistemi-chatbot-code-wrapper-background: #1e1e1e;
    --sistemi-chatbot-code-header-background: #2a2a2a;
    --sistemi-chatbot-code-lang-color: #9ca3af;
    --sistemi-chatbot-code-copy-btn-color: #9ca3af;
    --sistemi-chatbot-code-copy-btn-hover-background: #3a3a3a;
    --sistemi-chatbot-code-copy-btn-copied-border: #16a34a;
    --sistemi-chatbot-code-copy-btn-copied-color: #16a34a;
    --sistemi-chatbot-codeblock-background: #1e1e1e;
    --sistemi-chatbot-codeblock-color: #d4d4d4;
    --sistemi-chatbot-code-comment-color: #6a9955;
    --sistemi-chatbot-code-string-color: #ce9178;
    --sistemi-chatbot-code-number-color: #b5cea8;
    --sistemi-chatbot-code-keyword-color: #569cd6;
    --sistemi-chatbot-code-func-color: #dcdcaa;
    --sistemi-chatbot-status-idle-color: #9ca3af;
    --sistemi-chatbot-status-listening-color: #e5b700;
    --sistemi-chatbot-status-reasoning-color: #e5b700;
    --sistemi-chatbot-status-responding-color: #60a5fa;
    --sistemi-chatbot-disclaimer-color: #9ca3af;
    --sistemi-chatbot-inputbar-background: #1c1c1c;
    --sistemi-chatbot-inputbar-text-color: #ffffff;
    --sistemi-chatbot-inputbar-placeholder-color: #bbbbbb;
    --sistemi-chatbot-inputbar-btn-background: #000000;
    --sistemi-chatbot-inputbar-btn-color: #f9fafb;
    --sistemi-chatbot-inputbar-btn-hover-background: #222222;
    --sistemi-chatbot-inputbar-send-btn-background: #000000;
    --sistemi-chatbot-inputbar-send-btn-color: #f9fafb;
    --sistemi-chatbot-inputbar-send-btn-hover-background: #222222;
}

/* Component */
.sisbot-root {
    font-family: var(--sistemi-chatbot-text-font-family);
    background-color: var(--sistemi-chatbot-background);
    color: var(--sistemi-chatbot-color);
    display: flex;
    height: 100%;
    width: 100%;
}

    .sisbot-root .sisbot-layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

        /* Summary */
        .sisbot-root .sisbot-layout details summary {
            cursor: pointer;
            font-weight: bold;
            padding: 4px 0;
            list-style: none;
            padding-left: 3px;
        }

            .sisbot-root .sisbot-layout details summary .sisbot-summary-icon {
                padding-right: 4px;
            }

            .sisbot-root .sisbot-layout details summary::-webkit-details-marker {
                display: none;
            }

            .sisbot-root .sisbot-layout details summary .sisbot-arrow {
                margin-right: 6px;
                transform: rotate(-90deg);
                transition: transform 0.15s ease;
            }

        .sisbot-root .sisbot-layout details[open] summary .sisbot-arrow {
            transform: rotate(0deg);
        }

        /* Sidebar */
        .sisbot-root .sisbot-layout .sisbot-sidebar {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            width: 100%;
            height: 48px;
            background: var(--sistemi-chatbot-toolbar-background);
            border-bottom: 1px solid var(--sistemi-chatbot-border);
        }

    .sisbot-root.sidebar-open .sisbot-layout .sisbot-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 320px;
        z-index: 20;
        border-right: 1px solid var(--sistemi-chatbot-border);
        border-bottom: none;
        flex-direction: column;
        height: 100%;
    }

    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top {
        display: flex;
        flex-direction: row;
        gap: 8px;
        padding: 7px;
        flex-shrink: 0;
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .sisbot-root.sidebar-open .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top {
        flex-direction: column;
    }

    /* Sidebar buttons */
    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top .sisbot-sidebar-btn {
        width: auto;
        padding: 8px 10px;
        background: var(--sistemi-chatbot-sidebar-btn-background);
        color: var(--sistemi-chatbot-sidebar-btn-color);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top .sisbot-sidebar-btn:hover {
            background: var(--sistemi-chatbot-sidebar-btn-hover-background);
        }

    .sisbot-root:not(.sidebar-open) .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top .sisbot-sidebar-btn {
        justify-content: center;
    }

    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top .sisbot-sidebar-btn .sisbot-sidebar-btn-icon {
        display: inline-block;
        height: 14px;
    }

    .sisbot-root:not(.sidebar-open) .sisbot-layout .sisbot-sidebar .sisbot-sidebar-top .sisbot-sidebar-btn .sisbot-sidebar-btn-text {
        display: none;
    }

    /* Sidebar content */
    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content {
        flex: 1;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        padding: 7px;
    }

    .sisbot-root.sidebar-open .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content {
        display: flex;
    }

    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details {
        padding: 7px;
    }

    .sisbot-root:not(.sidebar-open) .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details {
        display: none;
    }

    /* Threads list */
    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item {
            padding: 6px 8px;
            border-radius: 6px;
            cursor: pointer;
            background: var(--sistemi-chatbot-sidebar-thread-background);
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 2px;
        }

            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item.active {
                background-color: var(--sistemi-chatbot-sidebar-thread-active-background);
                color: var(--sistemi-chatbot-sidebar-thread-active-color);
            }

            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item:hover {
                background-color: var(--sistemi-chatbot-sidebar-thread-hover-background);
            }

            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-title {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-menu-btn {
                background: none;
                border: none;
                cursor: pointer;
                /*display: none;*/
                color: var(--sistemi-chatbot-color);
                visibility: hidden;
                opacity: 0;
            }

            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item:hover .sisbot-thread-menu-btn {
                /*display: block;*/
                visibility: visible;
                opacity: 1;
            }

            /* Thread dropdown */
            .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-dropdown {
                position: absolute;
                right: 8px;
                top: 32px;
                background: var(--sistemi-chatbot-sidebar-dropdown-background);
                border: 1px solid var(--sistemi-chatbot-sidebar-dropdown-border);
                border-radius: 6px;
                display: none;
                min-width: 150px;
                z-index: 100;
            }

                .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-dropdown.open {
                    display: block;
                    box-sizing: border-box;
                }

                .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-dropdown .sisbot-thread-delete {
                    width: 100%;
                    padding: 8px 10px;
                    background: var(--sistemi-chatbot-sidebar-dropdown-background);
                    color: var(--sistemi-chatbot-sidebar-dropdown-color);
                    border: none;
                    border-radius: 8px;
                    cursor: pointer;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }

                    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-dropdown .sisbot-thread-delete:hover {
                        background: var(--sistemi-chatbot-sidebar-dropdown-hover-background);
                    }

                    .sisbot-root .sisbot-layout .sisbot-sidebar .sisbot-sidebar-content details .sisbot-threads-list .sisbot-thread-item .sisbot-thread-dropdown .sisbot-thread-delete .sisbot-delete-btn-icon {
                        display: inline-block;
                    }

/* Overlay */
.sisbot-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--sistemi-chatbot-overlay-background);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--sistemi-chatbot-transition);
    z-index: 9999;
}

    .sisbot-modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    /* Modal */
    .sisbot-modal-overlay .sisbot-modal {
        background: var(--sistemi-chatbot-modal-background);
        color: var(--sistemi-chatbot-modal-color);
        padding: 24px;
        border-radius: 12px;
        width: 340px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        transform: scale(0.95);
        transition: var(--sistemi-chatbot-transition);
    }

    .sisbot-modal-overlay.open .sisbot-modal {
        transform: scale(1);
    }

    .sisbot-modal-overlay .sisbot-modal .sisbot-modal-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .sisbot-modal-overlay .sisbot-modal .sisbot-modal-text {
        font-size: 14px;
        color: var(--sistemi-chatbot-modal-text-color);
        margin-bottom: 20px;
    }

    .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

        /* Modal Buttons */
        .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-secondary,
        .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-danger {
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
        }

        .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-secondary {
            background: var(--sistemi-chatbot-modal-btn-secondary-background);
            border: 1px solid var(--sistemi-chatbot-modal-btn-secondary-border);
            color: var(--sistemi-chatbot-modal-btn-secondary-color);
        }

            .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-secondary:hover {
                background: var(--sistemi-chatbot-modal-btn-secondary-hover-background);
            }

        .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-danger {
            background: var(--sistemi-chatbot-modal-btn-danger-background);
            border: none;
            color: var(--sistemi-chatbot-modal-btn-danger-color);
        }

            .sisbot-modal-overlay .sisbot-modal .sisbot-modal-actions .sisbot-btn-danger:hover {
                background: var(--sistemi-chatbot-modal-btn-danger-hover-background);
            }

/* Container */
.sisbot-root .sisbot-layout .sisbot-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    gap: 10px;
    box-sizing: border-box;
}

.sisbot-root.sidebar-open .sisbot-layout .sisbot-container {
    padding: 0;
    padding-top: 48px;
    overflow: hidden;
}

    .sisbot-root.sidebar-open .sisbot-layout .sisbot-container::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 10;
    }

/* Chat */
.sisbot-root .sisbot-layout .sisbot-container .sisbot-chat {
    flex: 1 1 auto;
    border-radius: 8px;
    padding: 10px;
    background-color: var(--sistemi-chatbot-chat-background);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-anchor: none;
}

    /* Flashing cursor */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.sisbot-flashing-cursor {
        display: none;
        order: 9998;
        transition: opacity .2s ease;
        color: var(--sistemi-chatbot-message-flashing-cursor-color);
    }

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat.sisbot-is-thinking .sisbot-message.sisbot-flashing-cursor {
        display: block;
    }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat.sisbot-is-thinking .sisbot-message.sisbot-flashing-cursor svg {
            animation: sisbotFlashingCursor 1s infinite;
        }

@keyframes sisbotFlashingCursor {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }
}

/* Bottom spacer */
.sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-bottom-spacer {
    width: 100%;
    pointer-events: none;
    order: 9999;
    height: 0;
    flex-shrink: 0;
}

    /* Initial greetings message */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.sisbot-initial-greetings {
        display: none;
    }

    .sisbot-root .sisbot-layout .sisbot-container.no-messages .sisbot-chat .sisbot-message.sisbot-initial-greetings {
        display: block;
    }

    /* Reasoning message */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-reasoning {
        max-width: 90%;
        margin: 6px 0;
        padding: 6px;
        background: var(--sistemi-chatbot-reasoning-background);
        border-radius: 6px;
        font-size: 0.85em;
    }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-reasoning .sisbot-reasoning-content {
            margin-top: 6px;
            white-space: pre-wrap;
            color: var(--sistemi-chatbot-reasoning-color);
        }

    /* Standard message */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message {
        max-width: 90%;
        padding: 8px 12px;
        border-radius: 16px;
        word-wrap: break-word;
        font-size: 14px;
    }

        /* List */
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message ul,
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message ol {
            margin: 0 0 0 16px;
            padding: 0;
            white-space: normal;
        }

        /* Error message */
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.error {
            border-left: 3px solid var(--sistemi-chatbot-message-error-border);
            padding: 0;
        }

            .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.error .sisbot-error {
                border-radius: 16px;
                padding: 6px 10px;
                background: var(--sistemi-chatbot-message-error-background);
                color: var(--sistemi-chatbot-message-error-color);
                font-size: 0.9em;
            }

        /* User / Bot messages */
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.sisbot-user-text {
            align-self: flex-end;
            background-color: var(--sistemi-chatbot-message-user-background);
            color: var(--sistemi-chatbot-message-user-color);
        }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message.sisbot-bot-text {
            align-self: flex-start;
            background-color: var(--sistemi-chatbot-message-bot-background);
            color: var(--sistemi-chatbot-message-bot-color);
        }

        /* Links */
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message .sisbot-link {
            color: var(--sistemi-chatbot-link-color);
            text-decoration: underline;
        }

            .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-message .sisbot-link:hover {
                color: var(--sistemi-chatbot-link-hover-color);
                text-decoration: none;
            }

    /* BC syntax highlight */
    /*.bc-comment {
                color: #ff0000;
            }

            .bc-directive {
                color: #ffff00;
            }

            .bc-subname {
                color: #00ffff;
            }

            .bc-keyword {
                color: #ffff00;
            }*/


    /* Code wrapper */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper {
        background: var(--sistemi-chatbot-code-wrapper-background);
        border-radius: 10px;
        margin: 10px 0;
        position: relative;
    }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-code-header {
            border-bottom: 1px solid var(--sistemi-chatbot-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 8px;
            background: var(--sistemi-chatbot-code-header-background);
            font-family: monospace;
        }

            .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-code-header .sisbot-code-lang {
                color: var(--sistemi-chatbot-code-lang-color);
                font-size: 12px;
                font-family: monospace;
                text-transform: lowercase;
            }

            .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-code-header .sisbot-copy-btn {
                margin-left: auto;
                background: transparent;
                border: 1px solid var(--sistemi-chatbot-border);
                color: var(--sistemi-chatbot-code-copy-btn-color);
                font-size: 12px;
                padding: 4px 8px;
                border-radius: 6px;
                cursor: pointer;
                transition: var(--sistemi-chatbot-transition);
                opacity: 0;
            }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper:hover .sisbot-code-header .sisbot-copy-btn {
            opacity: 1;
        }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-code-header .sisbot-copy-btn:hover {
            background: var(--sistemi-chatbot-code-copy-btn-hover-background);
        }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-code-header .sisbot-copy-btn.copied {
            border-color: var(--sistemi-chatbot-code-copy-btn-copied-border);
            color: var(--sistemi-chatbot-code-copy-btn-copied-color);
        }

        /* Code block content */
        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock {
            background-color: var(--sistemi-chatbot-codeblock-background);
            color: var(--sistemi-chatbot-codeblock-color);
            padding: 8px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
            display: block;
        }

            .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code {
                display: block;
            }

                /* Syntax highlighting */
                .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code .code-comment {
                    color: var(--sistemi-chatbot-code-comment-color);
                    font-style: italic;
                }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code .code-string {
                    color: var(--sistemi-chatbot-code-string-color);
                }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code .code-number {
                    color: var(--sistemi-chatbot-code-number-color);
                }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code .code-keyword {
                    color: var(--sistemi-chatbot-code-keyword-color);
                    font-weight: bold;
                }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-code-wrapper .sisbot-codeblock code .code-func {
                    color: var(--sistemi-chatbot-code-func-color);
                }

    /* Toolcall */
    .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-toolcall {
        max-width: 90%;
        margin: 6px 0;
        padding: 6px;
        background: var(--sistemi-chatbot-toolcall-background);
        border-radius: 6px;
        font-size: 0.85em;
    }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-chat .sisbot-toolcall .sisbot-toolcall-content {
            margin-top: 6px;
            white-space: pre-wrap;
            word-break: break-all;
            color: var(--sistemi-chatbot-toolcall-color);
        }

/* Status bar */
.sisbot-root .sisbot-layout .sisbot-container .sisbot-status {
    font-size: 12px;
    color: var(--sistemi-chatbot-status-idle-color);
    text-align: center;
    display: none;
}

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-status.listening {
        color: var(--sistemi-chatbot-status-listening-color);
    }

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-status.reasoning {
        color: var(--sistemi-chatbot-status-reasoning-color);
    }

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-status.responding {
        color: var(--sistemi-chatbot-status-responding-color);
    }

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-status.idle {
        color: var(--sistemi-chatbot-status-idle-color);
    }

/* Disclaimer */
.sisbot-root .sisbot-layout .sisbot-container .sisbot-disclaimer-full,
.sisbot-root .sisbot-layout .sisbot-container .sisbot-disclaimer-short {
    font-size: 10px;
    color: var(--sistemi-chatbot-disclaimer-color);
}

.sisbot-root .sisbot-layout .sisbot-container .sisbot-disclaimer-full {
    text-align: left;
    display: none;
}

.sisbot-root .sisbot-layout .sisbot-container.no-messages .sisbot-disclaimer-full {
    display: flex;
    padding-right: 10px;
}

    .sisbot-root .sisbot-layout .sisbot-container.no-messages .sisbot-disclaimer-full .sisbot-disclaimer-full-icon {
        padding: 0 10px;
    }

.sisbot-root .sisbot-layout .sisbot-container .sisbot-disclaimer-short {
    text-align: center;
    padding-bottom: 10px;
}

.sisbot-root .sisbot-layout .sisbot-container.no-messages .sisbot-disclaimer-short {
    visibility: hidden;
}

/* Input bar wrapper */
.sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper {
    display: flex;
    justify-content: center;
    padding: 0 10px;
}

    .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar {
        background-color: var(--sistemi-chatbot-inputbar-background);
        border: 1px solid var(--sistemi-chatbot-border);
        border-radius: 28px;
        width: 100%;
        max-width: 900px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner {
            display: flex;
            padding: 10px 12px;
            align-items: center;
            flex: 1;
            gap: 6px;
        }

            /* Stop / Send Buttons */
            .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner .sisbot-btn {
                width: 36px;
                height: 36px;
                border-radius: 999px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background-color: var(--sistemi-chatbot-inputbar-btn-background);
                color: var(--sistemi-chatbot-inputbar-btn-color);
                transition: var(--sistemi-chatbot-transition);
            }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner .sisbot-btn .sisbot-btn-icon {
                    display: inline-flex;
                    align-items: center;
                }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner .sisbot-btn:hover {
                    background-color: var(--sistemi-chatbot-inputbar-btn-hover-background);
                }

                /* Send button */
                .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner .sisbot-btn.sisbot-send-btn {
                    background-color: var(--chatbot-inputbar-send-btn-background);
                    color: var(--chatbot-inputbar-send-btn-color);
                }

                    .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner .sisbot-btn.sisbot-send-btn:hover {
                        background-color: var(--chatbot-inputbar-send-btn-hover-background);
                    }

            /* Textarea */
            .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner textarea {
                flex: 1;
                padding: 8px 10px;
                border-radius: 8px;
                border: none;
                outline: none;
                background: transparent;
                color: var(--sistemi-chatbot-inputbar-text-color);
                font-size: 14px;
                font-family: inherit;
                line-height: 1.4;
                resize: none;
                overflow-y: hidden;
                min-height: 2.6em;
                max-height: 5.6em;
                box-sizing: border-box;
            }

                .sisbot-root .sisbot-layout .sisbot-container .sisbot-input-bar-wrapper .sisbot-input-bar .sisbot-input-bar-inner textarea::placeholder {
                    color: var(--sistemi-chatbot-inputbar-placeholder-color);
                    opacity: 1;
                }