/* Mobile layout */
@media (max-width: 900px){
  #ai-chat-container{width:99%;height:96%}
   #ai-chat-column-chat{border-radius:12px}
  .aicw-mobile-only{display:block}
  .chat-header-logo {
   
    margin-right: 15px;
}
  .chat-header {
   
    gap: 1px;
}

  .tts-switch-wrapper {text-align: right!important;}


/* ----------------------------------------- */
/* STILI MOBILE (fino a 768px di larghezza) */
/* ----------------------------------------- */
 
    /* 1. Rendi le intestazioni cliccabili */
    .questions-separator {
        cursor: pointer;
        position: relative; /* Necessario per posizionare l'icona */
        padding-right: 20px; /* Spazio per l'icona */
        transition: background-color 0.2s;
    }
    
    .questions-separator:hover {
        background-color: #f9f9f9;
        border-radius: 4px;
    }

    /* 2. Aggiungi l'icona '+' a destra */
    .questions-separator::after {
        content: '+';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: 400;
        transition: transform 0.3s ease;
    }

    /* 3. Ruota l'icona in 'x' quando l'accordion è aperto */
    .questions-separator.active::after {
        transform: translateY(-50%) rotate(45deg);
    }
    
 
 
  
  /* Sposta la bubble a destra su mobile */
  #aicw-bubble-button,  #ai-chat-bubble.aicw-bubble-center, #ai-chat-tooltip {
    left: auto!important; /* Disattiva la regola 'left: 50%' del centraggio */
    transform: none!important; /* Disattiva la traslazione per il centraggio */
    
    right: 20px!important; /* Posiziona la bubble a 20px dal bordo destro */
  }
  #ai-chat-close {top: -10px!important;
    right: -10px!important;} 
  /* in assets/css/chat-components.css o chat-mobile.css */

/* Permette al testo nei messaggi dell'AI di andare a capo per evitare overflow */
 
.chat-message.ai-message .ai-message-text a {
     overflow-wrap: break-word;
    word-wrap: break-word; /* Fallback per browser più vecchi */
    word-break: break-all; /* Opzione più aggressiva se le prime due non bastano */
}
     
}

/* Aggiungiamo un po' di spazio tra gli elementi della lista per migliorare la leggibilità */
.chat-message.ai-message ul li {
    margin-bottom: 12px;
}


.ai-message-text li {line-height:  1. 2; font-size:  14px;  list-style: none;
    list-style-position: inside;} 
.ai-message-text ul {margin-left: 15px!important;} 
ul strong {font-size:  20px} 
}
 
 .aicw-side-title {
  display: none; 
}