.aiAssistant-toggleBtn {
    position: fixed;
    right: 30px;
    bottom: 75px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(-160deg, var(--primary), var(--success));
    text-align: center;
    line-height: 60px;
    color: var(--white);
    font-size: 23px;
    transition: all 0.3s;
    z-index: 90;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.aiAssistant-toggleBtn:hover {
    bottom: 80px;
    transform: scale(1.05);
}

.aiAssistant-container {
    /* display: none; */
    flex-direction: column;
    z-index: 1;
}

.aiAssistant-container.opened {
    display: flex;
    width: 500px;
    border-left: 1px solid var(--border);
}

/* [unified-assistant Fase 1 / fix] Pannello unico come COLONNA FLEX dentro #fw360-container
   (#fw360-container è display:flex row). Niente absolute: occupa spazio reale e spinge il contenuto.
   [agent-switch] Ancorato a DESTRA del contenuto: il divisore sta sul bordo SINISTRO del pannello. */
.fw360-assistant-panel {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* background: var(--white); */
    /* border-left: 1px solid var(--border); */
}
body.fw360-assistant-open .fw360-assistant-panel {
    flex: 0 0 420px;
    width: 420px;
    max-width: 90%;
    z-index: 100;
}

/* [mobile] Su mobile il pannello APERTO diventa un foglio FISSO in basso (bottom sheet) a tutta larghezza:
   angoli superiori arrotondati + ombra. Più comodo della colonna stretta a destra e non copre la topbar.
   z-index sotto le modali (2041) ma sopra il contenuto. */
@media (max-width: 768px) {
    body.fw360-assistant-open .fw360-assistant-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: 100%;
        height: 85vh;
        z-index: 1000;
        border-left: none;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        box-shadow: 0 -6px 24px -6px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }
}
/* [unified-assistant] Stato CHIUSO (pulsante X): rimuove DEL TUTTO il pannello host (e quindi anche la
   linguetta .aiAssistant-openButton, che è un suo discendente) dal layout. Diverso da "ridotto" (pannello
   a larghezza 0 ma linguetta visibile): qui niente spazio vuoto residuo e niente riapparizione al reload. */
body.fw360-assistant-closed .fw360-assistant-panel,
.fw360-assistant-panel.is-closed {
    display: none !important;
}
.fw360-assistant-panel .aiAssistant-container,
.fw360-assistant-panel .aiAssistant-container.opened {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-right: 0;
    background: var(--sidebar);
    border-top-left-radius: var(--radius);
}

/* Header pulito: 70px, sfondo bianco, pulsanti sobri. */
.aiAssistant-container .aiAssistant-header {
    height: 70px;
    background: var(--primary);
    color: var(--white);
    border-bottom: 1px solid var(--border);
    padding-left: 15px;
    gap: 12px;
}
.aiAssistant-container .aiAssistant-header .aiAssistant-avatar {
    width: 38px; height: 38px; background: var(--light, #f2f2f2);
}
.aiAssistant-container .aiAssistant-header .aiAssistant-info h3 {
    color: var(--white); margin: 0; font-size: 15px; font-weight: 600;
}
.aiAssistant-container .aiAssistant-header .aiAssistant-info small { color: var(--white); }
.aiAssistant-container .aiAssistant-header .aiAssistant-close {
    color: var(--white);
    line-height: 70px;
    width: 42px;
    font-size: 105%;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.aiAssistant-container .aiAssistant-header .aiAssistant-close:hover {
    color: var(--dark, #2c2c2c); background: var(--light, #f2f2f2);
}
.aiAssistant-container .aiAssistant-header .aiAssistant-close[data-action="close"] { margin-right: 8px; }

/* Pulsante Stop: piccolo cerchio contenuto, non una barra stirata dal flex del footer. */
.aiAssistant-container .aiAssistant-footerBar .aiAssistant-stopBtn {
    width: 38px;
    height: 39px;
    min-height: 38px;
    padding: 0;
    text-align: center;
    position: absolute;
    z-index: 1;
    bottom: 75px;
    left: 10px;
}

/* [unified-assistant Fase 2] Card di piano (ACT) con conferma a crediti. */
.aiAssistant-planCard {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    background: var(--white);
}
.aiAssistant-planText {/* margin-bottom: 10px; */}
.aiAssistant-planActions {
    display: flex;
    gap: 8px;
}
.aiAssistant-planActions .btn { flex: 0 0 auto; }
.aiAssistant-planCost { margin-bottom: 8px; font-size: 90%; opacity: 0.85; }

/* [unified-assistant Fase 6] Stop sempre disponibile durante lo streaming + Riprendi su errore. */
.aiAssistant-stopBtn { display: none; }
.aiAssistant-container.ai-writing .aiAssistant-stopBtn { display: inline-block; }
.aiAssistant-resume { margin-top: 8px; }

/* [unified-assistant] Stop SOTTO il messaggio dell'agente, solo durante il caricamento. */
.aiAssistant-msgStop { display: none; margin-top: 10px; align-items: center; gap: 6px; }
.aiAssistant-container.ai-writing .aiAssistant-msgStop { display: inline-flex; }

.aiAssistant-container.opened > .aiAssistant-openButton,
.aiAssistant-container:not(.opened) > :not(.aiAssistant-openButton) {
    display: none !important;
}

.aiAssistant-container > .aiAssistant-openButton {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 45px;
    margin: auto;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.aiAssistant-container.aiAssistant-inline {
    border: none;
    width: auto;
    margin: -15px;
    flex: 1;
}

.aiAssistant-container .aiAssistant-header {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 15px;
    padding-left: 15px;
    border-top-left-radius: var(--radius);
}

.aiAssistant-container .aiAssistant-header .aiAssistant-avatar {
    background: var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 5px;
}

.aiAssistant-container .aiAssistant-header .aiAssistant-info {
    flex: 1;
}

.aiAssistant-container .aiAssistant-header .aiAssistant-close {
    /* color: white; */
    font-size: 150%;
    display: block;
    line-height: 45px;
    width: 45px;
    text-align: center;
    /* flex: 0; */
    cursor: pointer;
}

.aiAssistant-container .aiAssistant-header .aiAssistant-close[data-action="close"] {
    margin-right: 10px;
}

.aiAssistant-container .aiAssistant-tickets {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    background: white;
    gap: 5px;
}

.aiAssistant-container .aiAssistant-tickets > a:first-child {
    flex: 1;
}

.aiAssistant-container .aiAssistant-body {
    flex: 1;
    background: var(--light);
    overflow: auto;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-empty {
    padding: 30px;
    text-align: center;
    height: 100%;
    align-content: center;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-empty .aiAssistant-logo {
    background: var(--white);
    border-radius: 50%;
    width: 60px;
    height: 60px;
}


.aiAssistant-container .aiAssistant-body .aiAssistant-empty ul {
    padding: 0;
    list-style: none;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-terms {
    padding: 30px;
    text-align: left;
    height: 100%;
    align-content: center;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-logo {
    background: var(--white);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: auto;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message > .aiAssistant-messageText  {
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: rgb(28 28 28 / 30%) 5px 5px 15px -10px;
}


.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message > .aiAssistant-messageText .btn {
    min-height: 20px;
    margin: 3px 0;
    line-height: 1;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message {
    max-width: 85%;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="user"]  {
    margin-left: auto;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="user"] > .aiAssistant-messageText  {
    background: var(--primary);
    color: var(--white);
    white-space: pre-line;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] {
    margin-right: auto;
    width: 100%;
}

/* Stile base bolla assistente (sovrascritto più in basso per la formattazione avanzata) */
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-messageText {
    background: var(--white);
    color: var(--dark);
    border: 1px solid var(--border);
    transition: height 0.1s ease;
    min-height: 40px;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate {
    display: flex;
    gap: 10px;
    padding: 3px 5px;
    margin: 5px 0 0;
    width: 60px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--border);
    text-align: center;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-messageText a:not(.btn) {
    /* display: block; */
    margin: 5px 0;
}


.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-messageText a:last-child {
    margin-bottom: 0;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a {
    color: var(--black);
    opacity: 0.25;
    flex: 11;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a[data-rate="-"]:hover,
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a[data-rated="-"] {
    color: var(--danger);
    opacity: 1;
}
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a[data-rate="+"]:hover,
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a[data-rated="+"] {
    color: var(--success);
    opacity: 1;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-rate > a[data-thankyou] {
    color: var(--success);
    opacity: 1;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message > .aiAssistant-attachments {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message > .aiAssistant-attachments .mediaPicker_DeletePreview,
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message > .aiAssistant-attachments .file-name small {
    display: none;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-components {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    /* flex-wrap: wrap; */
}


.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-components > .btn {
    flex: 1;
    min-width: 50%;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing {
    align-items: center;
    display: flex;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing > i {
    background-color: var(--dark);
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing > i {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 2px;
    display: inline-block;
    height: 4px;
    margin-right: 2px;
    width: 4px;
}

@-webkit-keyframes mercuryTypingAnimation{
    0%{
        -webkit-transform:translateY(0px)
    }
    28%{
        -webkit-transform:translateY(-5px)
    }
    44%{
        -webkit-transform:translateY(0px)
    }
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing > i:nth-child(1){
    -webkit-animation-delay:200ms;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing > i:nth-child(2){
    -webkit-animation-delay:300ms;
}

.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message .aiAssistant-typing > i:nth-child(3){
    -webkit-animation-delay:400ms;
}


.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-messageFooter {
    text-align: right;
}

.aiAssistant-container .aiAssistant-footerBar {
    display: flex;
    border-top: 1px solid var(--border);
    top: 0 !important;
    width: 100% !important;
    /* max-height: 350px; */
    min-height: 70px;
    background: var(--light);
}

.aiAssistant-container .aiAssistant-footerBar {
    min-height: 200px;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar {
    min-height: 170px;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar:before {
    content: ':::::::::::::';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    margin: auto;
    width: 100px;
    font-size: 80%;
    opacity: 0.5;
    z-index: 9;
}

.aiAssistant-container .aiAssistant-footerBar > .ui-resizable-handle {
    top: 0;
    height: 20px;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar > .ui-resizable-handle {
    display: none;
}
.aiAssistant-footerBar-resizable {
    background: var(--primary);
    opacity: 0.3;
    z-index: 9999 !important;
}

.aiAssistant-footerBar-resizable *  {
    content: '';
    display: none !important;
}

.aiAssistant-container .aiAssistant-footerBar textarea,
.aiAssistant-container .aiAssistant-footerBar .tox {
    min-width: 0 !important;
    flex: 1;
    border-radius: 0;
    border: none;
    max-height: 350px;
    padding: 15px !important;
    resize: none;
    min-height: 0px !important;
    margin-bottom: 65px;
    border-bottom: 1px solid var(--border);
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .aiAssistant-learningContainer {
    width: auto;
    min-width: 0px;
    height: auto;
    position: absolute;
    right: 147px;
    bottom: 10px;
    z-index: 9;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar .aiAssistant-learningContainer {
    width: auto;
    flex: 0;
    min-width: 120px;
    max-width: none;
}

.aiAssistant-container .aiAssistant-footerBar #aiAssistant-attachments {
    display: none;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .aiAssistant-footerActions {
    display: flex;
}

.aiAssistant-container .aiAssistant-footerBar .tox {
    padding: 0 !important;
    border: none !important;
    max-height: initial !important;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .btn-submit {
    border-radius: 0;
    width: 80px;
    /* flex: 1; */
    display: flex;
    padding: 0;
    font-size: 25px;
    /* height: 100%; */
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .btn-submit i {
    width: auto;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .btn span {
    display: none;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .btn.mediaPicker_OpenPopup {
    position: absolute;
    bottom: 10px;
    right: 90px;
    z-index: 9;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .btn[data-action="clear"] {
    position: absolute;
    bottom: 10px;
    left: 15px;
    z-index: 9;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview {
    position: absolute;
    top: -72px;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    grid-template-columns: repeat(auto-fill, minmax(50px, 0fr));
}


.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview .file-box .icon,
.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview .file-box .image {
    height: 50px;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview .file-box .file-name {
    display: none;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview .file-box .mediaPicker_DeletePreview {
    /* display: none; */
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    transition: all 0.5s;
}

.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .mediaPicker_Preview .file-box:hover .mediaPicker_DeletePreview {
    opacity: 1;
}

.aiAssistant-container .aiAssistant-cost-badge {
    position: absolute;
    bottom: 20px;
    right: 150px;
    line-height: 18px;
    font-size: 12px;
    color: var(--muted);
    border: 1px solid;
    padding: 3px 9px;
    border-radius: 30px;
    /* [cost-badge-hidden] Nascosto su richiesta; riattivare rimuovendo !important (sovrascrive il .show() lato JS). */
    display: none !important;
}

/* [link-inline] I pulsanti-link generati nelle risposte AI devono fluire inline col testo: compatti,
   allineati alla riga e senza spaziature storte (la punteggiatura resta attaccata). Selettore a.fw360-ai-link
   per vincere su .btn-xs a prescindere dall'ordine dei fogli di stile. */
a.fw360-ai-link {
    vertical-align: middle;
    min-height: 0;
    padding: 3px 9px;
}

/* [link-buttons-locked] I pulsanti che sostituiscono i link restano disabilitati durante la generazione
   (classe .ai-writing nella chat, oppure .disabled aggiunta esplicitamente nel widget dashboard) e si
   riattivano a fine risposta. */
.aiAssistant-container.ai-writing .aiAssistant-messageText .fw360-ai-link,
.aiAssistant-container.ai-writing .aiAssistant-components > .btn,
.fw360-ai-link.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar {
    flex-direction: column;
    height: auto !important;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar .aiAssistant-footerActions {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--border);
    background: var(--white);
    align-items: center;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar .aiAssistant-footerActions > * {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

.aiAssistant-container.aiAssistant-inline .aiAssistant-footerBar .aiAssistant-footerActions .btn-submit {
    margin-left: auto !important;
}

/* [unified-assistant] Durante l'elaborazione i controlli restano ATTIVI (Interrompi, Svuota, Invio).
   Niente più blocco dei pointer-events sui pulsanti. */
.aiAssistant-queuedHint {
    font-size: 11px;
    color: var(--muted, #9aa0a6);
    padding: 2px 4px 6px;
    width: 100%;
}
/* CURSORE */
.fw360-cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 1000;
    pointer-events: none;
    background: url('https://login.framework360.com/assets/img/cursor.png');
    background-size: contain;
}

.fw360-cursor.cursor-clicked {
    animation: click-scale 0.24s ease-in-out 2;
}

@keyframes click-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
}

/* Contenitore Status (Chain of Thought) */
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-status {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top left;
}

/* Icona Status */
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-status i {
    color: var(--primary);
    font-size: 14px;
}

/* Status Minimizzato (quando inizia a scrivere il testo) */
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-status.minimized {
    padding: 2px 6px;
    font-size: 10px;
    background: transparent;
    border-color: transparent;
    opacity: 0.7;
}

/* Animazione pulsazione per l'icona di caricamento */
@keyframes status-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.fa-spin-pulse {
    animation: status-pulse 1.5s infinite ease-in-out;
}

/* ============================================================ */
/*    FORMATTAZIONE RISPOSTA AI MIGLIORATA (MARKDOWN STYLE)     */
/* ============================================================ */

/* Stile tipografico base */
.aiAssistant-messageText {
}

/* Contenitore Bolla Assistente Ottimizzato */
.aiAssistant-container .aiAssistant-body .aiAssistant-messages .aiAssistant-message[data-role="assistant"] > .aiAssistant-messageText {
    padding: 20px; /* Più spazio interno */
    background: #ffffff;
    border: 1px solid #e1e4e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Titoli */
.aiAssistant-messageText h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 10px 0;
    color: var(--dark);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.aiAssistant-messageText h3 {
    margin: 10px 0 0;
}
.aiAssistant-messageText h4 {
    margin: 10px 0 0;
}

/* Liste */
.aiAssistant-messageText ul {
    margin: 5px 0 10px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.aiAssistant-messageText li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
}

.aiAssistant-messageText br + li {
    margin-top: 15px;
}

/* Liste che simulano passaggi numerati (classe gestita dal parser JS) */
.aiAssistant-messageText li.numbered {
    /* list-style-type: decimal; */
}

.aiAssistant-messageText li.numbered::marker {
    display: block;
    font-weight: bold;
}

/* Grassetto */
.aiAssistant-messageText b,
.aiAssistant-messageText strong {
    font-weight: 700;
    color: #000;
}

/* Citazioni / Note importanti */
.aiAssistant-messageText blockquote {
    border-left: 3px solid var(--primary);
    background: var(--primary-transparent);
    margin: 10px 0;
    padding: 10px 15px;
    color: var(--primary);
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* Spaziatura paragrafi */
.aiAssistant-messageText .spacer {
    height: 5px;
    display: block;
    margin: 0;
}

.fw360-ai-bubble {
    position: absolute; top: -45px; left: 10px;
    background: var(--dark);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* --- AI AGENT UI STYLES --- */
:root {
    --warning-light: #fff3cd;
    --warning-dark: #856404;
    --agent-background: #f8f9fa;
    --agent-border: #dee2e6;
}

/* Contenitore principale della chat quando l'agente è attivo */
.aiAssistant-container.agent-active {
    background: var(--agent-background);
    border-color: var(--agent-border);
}

/* Pannello interno dell'agente */
#ai-agent-panel {
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px 25px;
    box-sizing: border-box;
}

/* Icona dell'agente */
#ai-agent-panel .ai-icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}

#ai-agent-panel .ai-icon-container video {

}

/* Stato di default/processing dell'icona */
#ai-agent-panel  .ai-icon-container.processing video {
    display: block;
    width: 100px;
    margin-bottom: 20px;
}

#ai-agent-panel  .ai-icon-container:not(.processing) video,
#ai-agent-panel  .ai-icon-container.processing i {
    display: none;
}

/* Stato "in attesa dell'utente" dell'icona */
#ai-agent-panel  .ai-icon-container.waiting-for-user {
    background: var(--warning-light);
    color: var(--warning-dark);
}

/* Overlay per lo spotlight */
.ai-spotlight-overlay {
    position: fixed;
    background: rgba(0,0,0,0.5);
    z-index: 990000;
}

/* ============================================================ */
/*    FULL AI MODE - VISUAL BUILDER INTEGRATION                 */
/* ============================================================ */
body.fw-full-ai-mode .visualBuilderAddContentBtn,
body.fw-full-ai-mode .visualBuilderAddContentBtn_Sections,
body.fw-full-ai-mode .visualBuilderWidgetContent {
    display: none !important;
}

body.fw-full-ai-mode [data-action="toggle_layers"],
body.fw-full-ai-mode [data-action="import"],
body.fw-full-ai-mode [data-action="ai"] {
    display: none !important;
}

/* ============================================================================
   [unified-assistant] Loader di pensiero + stato + suggerimenti + overlay.
   TUTTI gli stili stanno QUI (mai inline da JS).
   ============================================================================ */

/* Loader "sto pensando": vive DENTRO la bubble .aiAssistant-messageText (com'era prima).
   Quando arriva il testo, gli handler token/done sostituiscono il contenuto della bubble. */
.aiAssistant-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light, #6c757d);
    font-size: 13px;
    font-weight: 500;
}
.aiAssistant-loaderText {
    background: linear-gradient(90deg, #9aa0a6 25%, var(--primary,#007bff) 50%, #9aa0a6 75%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aiAssistantShimmer 1.8s linear infinite;
}
@keyframes aiAssistantShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.aiAssistant-typingDots {display: inline-flex;align-items: center;gap: 2px;flex-shrink: 0;}
.aiAssistant-typingDots > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary, #007bff);
    opacity: .4;
    animation: aiAssistantTyping 1.2s infinite ease-in-out;
}
.aiAssistant-typingDots > span:nth-child(2) { animation-delay: .18s; }
.aiAssistant-typingDots > span:nth-child(3) { animation-delay: .36s; }
@keyframes aiAssistantTyping {
    0%, 80%, 100% { transform: translateY(0); opacity: .35; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* Badge di stato quando c'è GIÀ testo nel messaggio (sotto il testo) */
.aiAssistant-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-light, #6c757d); }
.aiAssistant-status i { color: var(--primary, #007bff); }

/* Suggerimenti schermata vuota. SOLO layout del CONTENITORE: i pulsanti usano lo stile standard
   `btn btn-default` (nessuno stile dedicato su .aiAssistant-suggestion, che è solo un hook per il click). */
.aiAssistant-suggestions {
    display: flex; flex-direction: column; gap: 8px; margin-top: 18px;
    width: 100%; max-width: 340px; overflow: hidden;
    transition: opacity .2s ease, max-height .25s ease;
}
.aiAssistant-suggestions.aiAssistant-suggestions--hidden { opacity: 0; max-height: 0; margin-top: 0; pointer-events: none; }

/* Overlay "sto manipolando i dati" su .fw360-wrapper-content (come l'overlay del builder). */
.fw360-wrapper-content.fw360-ai-has-overlay { position: relative; }
#fw360-ai-working-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; z-index: 45; opacity: 0; transition: opacity .15s ease;
}
#fw360-ai-working-overlay.is-visible { opacity: 1; }
.fw360-ai-working-spinner {
    width: 42px; height: 42px;
    border: 3px solid rgba(0,123,255,.15); border-top-color: var(--primary, #007bff);
    border-radius: 50%; animation: fw360AiSpin .7s linear infinite;
}
.fw360-ai-working-text {
    font-size: 13px; color: #444; font-weight: 600; letter-spacing: .2px;
    background: #fff; padding: 6px 14px; border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08); max-width: 80%; text-align: center;
}
@keyframes fw360AiSpin { to { transform: rotate(360deg); } }

/* Card di piano (proposta ACT): vive DENTRO la bubble del messaggio (.aiAssistant-messageText),
   nessun box-dentro-box. Proposta umana + costo + 2 bottoni di scelta. */
.aiAssistant-planText {line-height: 1.5;}
.aiAssistant-planCost {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-light, #6c757d); margin-bottom: 12px;
}
.aiAssistant-planCost i { color: var(--primary, #007bff); }
.aiAssistant-planActions {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 15px;}
/* [Builder] Costo in crediti sotto il messaggio di conferma. */
.aiAssistant-messageCost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0 5px;
    font-size: 12px;
    color: var(--dark);
}

/* [Builder — elemento allegato] Chip RIMOVIBILE dell'elemento selezionato dal canvas, mostrato come fascia
   sopra la barra di input. Indica che la prossima richiesta agirà su quell'elemento (edit/add chirurgico). */
.aiAssistant-builderSelection {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px;
    padding: 6px 10px;
    background: var(--primary-light, rgba(0, 123, 255, 0.08));
    border: 1px solid var(--primary, #007bff);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--dark, #2b2b2b);
}
.aiAssistant-builderSelection .aiAssistant-builderSelection-ico { color: var(--primary, #007bff); flex: 0 0 auto; }
.aiAssistant-builderSelection .aiAssistant-builderSelection-text {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
.aiAssistant-builderSelection .aiAssistant-builderSelection-remove {
    flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
    color: var(--text-light, #6c757d); padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.aiAssistant-builderSelection .aiAssistant-builderSelection-remove:hover {
    color: var(--danger, #dc3545); background: rgba(0, 0, 0, 0.06);
}
.aiAssistant-messageCost i { color: var(--primary, #007bff); }

/* [Builder — pick-mode] Richiesta "clicca l'elemento": pulsante Annulla sotto il messaggio + esiti. */
.aiAssistant-pickActions { margin-top: 10px; display: flex; }
.aiAssistant-pickActions .aiAssistant-pickCancel { font-size: 13px; }
.aiAssistant-pickPicked {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--success, #28a745); font-weight: 600;
}
.aiAssistant-pickCancelled { display: block; margin-top: 6px; color: var(--text-light, #6c757d); }

/* [chat Agente — .projects/agente-connettore PROGETTO.md §6.1; owner, 11/10/2026: «nella barra in basso e non
   nell'header»] Lo switch Assistente/Agente (componente button-radio, classi btn-sm dichiarate nel markup) sulla riga
   di «Pulisci» e dell'allegato. Nessun componente dice dove sta un gruppo di bottoni nella barra della chat: come quei
   due pulsanti (qui sopra) sta in posizione assoluta, centrato sulla stessa riga (i tondi da 45px a 10px dal fondo
   hanno il centro a 32px; il gruppo btn-sm è alto 30px).
   [owner, 12/10/2026: «lo switch a sinistra e il pulsante per svuotare totalmente a destra»] Lo switch sta a
   sinistra, al posto di «Pulisci» (15px), e «Pulisci» passa a destra accanto all'invio (90px, il posto dell'allegato);
   quando c'è anche l'allegato (modalità Assistente) gli sta subito a sinistra (90px + 45px + 10px). Solo nella barra
   che ha lo switch: dove l'Agente non c'è (produzione, altri pannelli) «Pulisci» resta a sinistra com'era. */
.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar .aiAssistant-modeSwitch {
    position: absolute;
    bottom: 17px;
    left: 15px;
    z-index: 9;
}
.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar:has(.aiAssistant-modeSwitch) .btn[data-action="clear"] {
    left: auto;
    right: 90px;
}
.aiAssistant-container:not(.aiAssistant-inline) .aiAssistant-footerBar:has(.aiAssistant-modeSwitch):has(.mediaPicker_OpenPopup) .btn[data-action="clear"] {
    right: 145px;
}

/* [chat Agente — scelta della modalità al centro, owner 12/10/2026: «quando avviamo una nuova chat, il toggle dovrebbe
   stare al centro della schermata invece che nella barra in basso, e per ogni opzione deve darmi una breve spiegazione di
   che cosa si tratta»; poi, vista la prima versione: «invece che i box così, mettili in orizzontale con icona a sinistra
   e dati a destra»] Le card sono il componente optionpicker così com'è (cornice, stato attivo, titolo, spunta: niente di
   tutto questo si ritocca). Nessun componente dice dove stanno due card dentro la schermata vuota della chat, e
   l'optionpicker non copriva tre cose:
   1. il posto: la sua griglia mette le card affiancate, in colonne da almeno 200px pensate per la pagina di un modulo;
      qui le due scelte stanno una sotto l'altra, larghe quanto il pannello;
   2. la card in orizzontale: il componente la disegna in verticale (anteprima sopra, titolo sotto). Qui l'icona sta a
      sinistra in un riquadro di 56px (la stessa misura di «Modello» del Checkout classico, icona 22px) e a destra, allineati
      a sinistra, il nome e la spiegazione: una griglia a due colonne dentro la card, senza toccare il markup del componente;
   3. la riga di descrizione sotto il titolo, che il componente non ha: il Checkout se l'è scritta nel suo modulo
      (.checkout-model-desc), che la chat non carica. Qui la stessa riga con le stesse misure. */
.aiAssistant-container .aiAssistant-body .aiAssistant-empty .aiAssistant-modeChooser {
    grid-template-columns: 1fr;
    margin-top: 18px;
}
.aiAssistant-modeChooser .ms-option-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    text-align: left;
}
.aiAssistant-modeChooser .ms-option-preview {
    grid-row: 1 / span 2;
    align-self: center;
    width: 56px;
    height: 56px;
}
.aiAssistant-modeChooser .ms-option-preview__placeholder {
    font-size: 22px;
}
.aiAssistant-modeChooser .ms-option-label {
    align-self: end;
    margin-top: 0;
    text-align: left;
}
.aiAssistant-modeChooser .aiAssistant-modeDesc {
    align-self: start;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}
/* Chat nuova (.aiAssistant-newChat: la mette checkView di js/aiAssistant.js quando si vede la schermata vuota E ci sono le
   card): la modalità si sceglie al centro, quindi lo switch della barra in basso non si vede. Resta nel markup — porta i
   dati del consenso — e al primo messaggio torna dov'era (a sinistra, «Pulisci» a destra). Nessun componente copriva
   «nascondi questo comando finché la conversazione è vuota»: è uno stato della chat, non del button-radio. */
.aiAssistant-container.aiAssistant-newChat .aiAssistant-footerBar .aiAssistant-modeSwitch {
    display: none;
}

/* [chat Agente — §6.3] Il racconto del turno sopra la risposta: righe .stream del componente activitystream, le
   stesse del wizard. Nessun componente copriva il CONTENITORE: .last_activities_streambox ha altezza fissa (365px) e
   margini negativi pensati per i widget della dashboard; dentro una bolla della chat serve una scatola che non sposta
   il testo della risposta. Senza altezza massima né scorrimento suo (owner, 11/10/2026: «togli lo scroll dalla lista
   delle azioni»): si allunga con le righe e scorre la conversazione intera. */
.aiAssistant-agentSteps {
    margin-bottom: 10px;
    /* border: 1px solid var(--border); */
    /* border-radius: var(--radius); */
    /* background: var(--sidebar-text); */
    /* [owner, 12/10/2026: «metti un overflow al .aiAssistant-agentSteps»] La linea verticale del componente
       (.stream:before) è alta il 120% della riga: quella dell'ultima riga esce sotto il riquadro. Nel componente la
       taglia .last_activities_streambox, che scorre; qui la si taglia e basta — nessuna altezza massima, quindi lo
       scroll tolto l'11/10 non torna. */
    /* overflow: hidden; */
}
.aiAssistant-agentSteps .activity-stream { padding: 10px; }
.aiAssistant-agentSteps .stream-panel img { max-width: 100%; border-radius: var(--radius); margin-top: 5px; }

/* [chat Agente — verifica finale 11/10] Il valore INTERO di un parametro nella scheda di conferma: chi approva deve
   vedere tutto quello che approva (uno <script> o un link dopo il trecentesimo carattere compresi). Nessun componente
   copriva un testo lungo e preformattato dentro la card della chat (.aiAssistant-planCard): qui un riquadro che va a
   capo e scorre, senza allargare la bolla. */
.aiAssistant-planValue {
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0 8px;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

/* [owner, 12/10/2026: «assicurati di sistemare anche questa grafica, deve essere perfetto»] La scheda di conferma
   dell'Agente (.aiAssistant-agentConfirm). Il contenitore resta la card di casa della chat (.aiAssistant-planCard) e
   dentro ci sono solo pezzi di casa: l'elenco a icone di Font Awesome (ul.fa-ul > li > .fa-li), l'ibox, .label, .btn,
   .text-* e .font-bold. Nessun componente copriva però la DISPOSIZIONE di una card che impila gruppi diversi (frase,
   modifiche, avvisi, riquadri, stato, pulsanti): coi margini di ognuno le distanze uscivano di 12, 14, 16 e 27px, il
   fondo di una scheda chiusa era il doppio della cima (24px contro 12) e il testo stava 8px a sinistra di quello
   della bolla sopra. Qui: una colonna con UNA distanza (gap), lo stesso respiro della bolla dell'assistente (20px,
   così i due testi stanno sullo stesso filo) e le icone in una colonna da 20px che parte da quel filo.
   Valgono solo per questa scheda: la card del piano a crediti del builder (.aiAssistant-planCard da sola) resta com'era. */
.aiAssistant-messages .aiAssistant-planCard.aiAssistant-agentConfirm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 20px;
    border-radius: var(--radius);
    line-height: 1.5;
    background: var(--warning-light);
    border: 1px dashed var(--dark-transparent);
}
/* I gruppi non portano margini loro: la distanza è il gap. (Tre classi: deve vincere su «.ibox + div», che ne ha due
   e un elemento, e sui margini di ul, .aiAssistant-planText e .ibox.) */
.aiAssistant-messages .aiAssistant-planCard.aiAssistant-agentConfirm > * {
    margin: 0;
}
/* L'elenco a icone: Font Awesome lo fa rientrare di 2.5em con l'icona al centro di una colonna da 2em. Qui la colonna
   è di 20px e l'icona parte dal filo del testo, così icone di larghezza diversa (ⓘ, ✓, ›) cominciano tutte lì. */
.aiAssistant-messages .aiAssistant-planCard.aiAssistant-agentConfirm > .fa-ul {
    --fa-li-width: 20px;
    margin-left: 20px;
}
.aiAssistant-agentConfirm > .fa-ul > li + li {
    margin-top: 5px;
}
.aiAssistant-agentConfirm > .fa-ul .fa-li {
    text-align: left;
    color: var(--muted);
}
/* .aiAssistant-planNotes: le righe piccole della scheda (perché serve la conferma, gli avvisi, il prezzo, lo stato).
   Nessun componente copriva un testo secondario a 12px: .text-small è l'80% (11,2px), sotto la misura delle altre
   righe secondarie della chat (.aiAssistant-messageCost, 12px). L'icona è del colore principale, come quella del
   costo del turno; una riga colorata (.text-success, .text-warning, .text-danger, .text-muted) colora anche la sua. */
.aiAssistant-agentConfirm > .aiAssistant-planNotes {
    font-size: 12px;
    color: var(--muted);
}
.aiAssistant-agentConfirm > .aiAssistant-planNotes .fa-li {
    color: var(--primary);
}
.aiAssistant-agentConfirm > .aiAssistant-planNotes li[class*="text-"] .fa-li {
    color: inherit;
}
/* Dentro i riquadri «Testo completo» e «Codice» l'ultimo blocco non lascia un vuoto sotto di sé. */
.aiAssistant-agentConfirm .ibox-content > .aiAssistant-planText:last-child,
.aiAssistant-agentConfirm .ibox-content .aiAssistant-planValue {
    margin-bottom: 0;
}
/* I pulsanti dell'Agente («Apri…») sotto la scheda: staccati quanto la scheda lo è da ciò che ha sopra. */
.aiAssistant-agentConfirm + .aiAssistant-agentNav {
    margin-top: 8px;
}
/* [owner, 12/10/2026: «quando clicco il pulsante di conferma o di rifiuto, deve mostrare una classe 'loading' mentre
   carica»] La scheda prende la classe `loading` di casa (components/main: velo sui contenuti e rotellina) finché il
   server non risponde. La rotellina di casa si centra nel primo antenato posizionato, e nessun componente lo rende
   tale da sé: la scheda lo diventa solo mentre carica. */
.aiAssistant-agentConfirm.loading {
    position: relative;
}