/* === AICW Chat CSS (corretto) === */
:root{
  --aicw-main:#4d5df1;     /* override da admin */
  --aicw-radius:16px;
  --aicw-chip-bg:rgba(77,93,241,.10);
  --aicw-chip-border:rgba(77,93,241,.35);
  --aicw-chip-bg-hover:rgba(77,93,241,.18);
  --aicw-chip-border-hover:rgba(77,93,241,.55);
}
.chat-logo {  margin-bottom: 9px; width: 100%; text-align:center;  font-size:8px;color:#999; line-height:1} 
 
/* ======================================================================== */
/* === BLOCCO CSS DEFINITIVO PER DOMANDE PREIMPOSTATE (Desktop & Mobile) === */
/* ======================================================================== */
#stop-tts-button {
    background-color: #db4437; /* Rosso Google */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

#stop-tts-button:hover {
    background-color: #c5372c;
}
/* --- Stili per la colonna laterale su DESKTOP --- */
#ai-chat-column-questions h4 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid var(--aicw-main);
    padding-bottom: 10px;
}

/* --- Stili per i SEPARATORI DI GRUPPO (es. "-Info-") --- */
.questions-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 15px;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%; /* Occupa tutta la larghezza */
}
.questions-separator::before, 
.questions-separator::after {
    content: '';
    flex: 1;
    margin-left:5px;
 }
.questions-separator:not(:empty)::before { margin-right: .5em; }
.questions-separator:not(:empty)::after { margin-left: .5em; }

/* --- Stili per i GRUPPI DI DOMANDE (i contenitori <ul>) --- */
#predefined-questions-container ul.predefined-questions-group {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    display: flex;
    flex-direction: row; /* CORREZIONE: li mette in riga */
    flex-wrap: wrap;     /* Permette di andare a capo */
    gap: 8px;
}

/* --- Stili per i SINGOLI PULSANTI-DOMANDA (gli elementi <li>) --- */
#predefined-questions-container li.predefined-question {
    padding: 8px 12px;
    background: var(--aicw-chip-bg);
    border: 1px solid var(--aicw-chip-border);
    border-radius: var(--aicw-radius);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    color: #202124;
    transition: background .15s, border-color .15s, transform .05s;
    user-select: none;
    margin: 0; /* Resetta eventuali margini ereditati */
    list-style: none;
}
#predefined-questions-container li.predefined-question:hover {
    background: var(--aicw-chip-bg-hover);
    border-color: var(--aicw-chip-border-hover);
}
#predefined-questions-container li.predefined-question:active {
    transform: translateY(1px);
}

/* ======================================================== */
/* === ACCORDION per la vista MOBILE (fino a 900px) === */
/* ======================================================== */
@media (max-width: 900px) {
    .questions-separator {
        cursor: pointer;
        margin: 0px 0 0px!important;
        position: relative;
        padding: 0px;
        padding-right: 25px;
        transition: background-color 0.2s;
        display:inline!important;
    }
    #predefined-questions-container ul.predefined-questions-group {
     
  flex-wrap: wrap; /* FONDAMENTALE: permette ai pulsanti di andare a capo! */
  gap: 8px;      /* Aggiunge spazio tra i pulsanti */
  width: 500px!important;     /* Assicura che il contenitore occupi lo spazio disponibile */
    
    
     
    flex-wrap: nowrap;  
     
}
 
     .predefined-question {
    padding: 2px 5px!important; margin-right: 5px!important;
    display:inline!important; margin-right:10px;white-space:  nowrap;
     }
 
    .questions-separator:hover {
        background-color: #f0f0f0;
        border-radius: 4px;
    }
    
    #predefined-questions-container ul.predefined-questions-group {
      
    margin: 0px 0px 5px !important;
}
    .questions-separator::after {
        content: '+';
        position: absolute;
        right: 3px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: 400;
        transition: transform 0.3s ease;
    }
    .questions-separator.active::after {
        transform: translateY(-50%) rotate(45deg);
    }
    
    /* Nasconde i gruppi di domande su mobile per la funzionalità accordion */
    #predefined-questions-container ul.predefined-questions-group {
        display: none;
        margin-top: 10px;
    }
}
 /* Stile per i pulsanti che contengono solo un'icona */
.aicw-icon-button {
    background: none;
    border: none;
    padding: 4px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 50%; /* Lo rende rotondo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555; /* Colore dell'icona in modalità chiara */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Stile per l'icona SVG dentro il pulsante */
.aicw-icon-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor; /* L'icona eredita il colore del pulsante */
}

/* Effetto al passaggio del mouse */
.aicw-icon-button:hover {
    background-color: #f0f0f0;
}



/* ======================================================
   === ✨ ICONA DEFINITIVA - IL BUBBLE NON SCOMPARE ✨ ===
   ====================================================== */

/* 1. Animazione di ingresso: combina lampo, zoom e un giro completo */
@keyframes flash-and-spin-in {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(360deg);
    }
}

/* 2. Animazione di rotazione lenta e continua */
@keyframes slow-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 3. Applichiamo l'icona SOPRA al cerchio nero esistente */
#ai-chat-bubble:hover::after {
    /* MANTIENE il colore di sfondo nero del cerchio */
    background-color: var(--aicw-main);
    
    /* AGGIUNGE l'icona colorata come immagine di sfondo (che si sovrappone al colore) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1.5L14.25 9.75L22.5 12L14.25 14.25L12 22.5L9.75 14.25L1.5 12L9.75 9.75Z'/%3E%3C/svg%3E");
    
    /* Imposta la dimensione e posizione solo per l'immagine */
    background-size: 55%;
    background-position: center;
    background-repeat: no-repeat;

    /* Applica le animazioni all'intero elemento ::after */
    animation: flash-and-spin-in 0.5s ease-out forwards, slow-spin 8s linear 0.5s infinite;
}
/* ======================================================
   === STILE FINALE E SEMPLIFICATO PER I TOGGLE ===
   ====================================================== */

/* 1. Stili di base per i contenitori <label> */
.tts-switch,
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    cursor: pointer;
    vertical-align: middle;
}

/* 2. Nasconde i checkbox di default */
.tts-switch input,
.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;  margin-left: 22px;
}.theme-toggle-switch   {
      margin-left: 22px;
}

/* 3. Stile per lo "sfondo" (il binario dello slider) */
.tts-slider-icon,
.slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

/* 4. Crea il "pallino" mobile */
.tts-slider-icon::before,
.slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 5. Crea il contenitore per le icone */
.tts-slider-icon::after,
.slider::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- LOGICA SEMPLIFICATA PER LE ICONE --- */

/* 6. Icone per il TOGGLE TEMA */
.theme-toggle-switch .slider::after {
    /* Stato SPENTO (luna) */
    right: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath fill-rule='evenodd' d='M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.459-.69a.75.75 0 01.975.442 9.002 9.002 0 01-9.459 9.459 9 9 0 01-9.9-9.9 9.002 9.002 0 015.048-8.472z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.theme-toggle-switch input:checked + .slider::after {
    /* Stato ACCESO (sole) */
    left: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 010 1.06l-1.591 1.59a.75.75 0 11-1.06-1.06l1.59-1.59a.75.75 0 011.06 0zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 011.06 0l1.59 1.59a.75.75 0 11-1.06 1.06l-1.59-1.59a.75.75 0 010-1.06zM12 21a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 21zM5.106 17.894a.75.75 0 010-1.06l1.59-1.59a.75.75 0 111.06 1.06l-1.59 1.59a.75.75 0 01-1.06 0zM3 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3.75A.75.75 0 013 12zM6.106 6.106a.75.75 0 011.06 0l1.591 1.59a.75.75 0 11-1.06 1.06L6.106 7.166a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
}

/* 7. Icone per il TOGGLE TTS */
.tts-switch .tts-slider-icon { font-size: 0; } /* Nasconde l'emoji dall'HTML */

.tts-switch .tts-slider-icon::after {
    /* Stato SPENTO (muto) */
    right: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.66 1.905H6.44l4.5 4.5c.944.945 2.56.276 2.56-1.06V4.06z'/%3E%3Cpath d='M16.72 16.72a.75.75 0 101.06-1.06L12.53 10.4l5.25 5.25-1.06 1.06zm-6.28-5.25a.75.75 0 00-1.06 1.06L10.44 12l-5.25-5.25 1.06-1.06 5.25 5.25z'/%3E%3C/svg%3E");
}
.tts-switch input:checked + .tts-slider-icon::after {
    /* Stato ACCESO (con suono) */
    left: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.66 1.905H6.44l4.5 4.5c.944.945 2.56.276 2.56-1.06V4.06zM18.584 12c0-1.833-.872-3.483-2.25-4.545a.75.75 0 00-1.088.99A5.252 5.252 0 0116.084 12a5.252 5.252 0 01-1.338 3.555.75.75 0 101.088.99c1.378-1.062 2.25-2.712 2.25-4.545z'/%3E%3C/svg%3E");
}

/* 8. Logica per lo stato "ACCESO" (comune a entrambi) */
input:checked + .tts-slider-icon,
input:checked + .slider {
    background-color: var(--aicw-main);
}
input:checked + .tts-slider-icon::before,
input:checked + .slider::before {
    transform: translateX(22px);
}

/* Stili aggiuntivi per la dark mode */
.dark-mode .tts-slider-icon,
.dark-mode .slider {
    background-color: #555;
}





/* ============================================== */
/* === STILI CARD PRODOTTI WOOCOMMERCE CHAT === */
/* ============================================== */

/* Contenitore principale dei risultati */
.aicw-product-results {
    padding: 10px 0;
    margin-bottom: 10px;
}

.aicw-product-results-title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333; /* Colore scuro per il titolo */
}

/* Contenitore delle card (per layout a griglia o flex) */
.aicw-product-cards-container {
    display: grid; /* Usiamo grid per una migliore responsività */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 2 colonne su schermi piccoli, si espande */
    gap: 15px; /* Spazio tra le card */
}

/* Stile della singola card del prodotto */
.aicw-product-card {
    display: flex;
    flex-direction: column;
    background-color: #fff; /* Sfondo bianco */
    border: 1px solid #eee; /* Bordo leggero */
    border-radius: var(--aicw-ui-radius, 8px); /* Raggio angoli ereditato dalle impostazioni del plugin */
    overflow: hidden; /* Nasconde l'eccesso dell'immagine */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
    color: inherit; /* Mantiene il colore del testo normale */
    transition: all 0.2s ease-in-out; /* Effetto hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leggera ombra */
    max-width: 250px; /* Limite massimo per evitare card troppo larghe */
    justify-self: center; /* Centra le card nella griglia */
    margin: 0 auto; /* Centra la singola card se la griglia non è riempita */
}

.aicw-product-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Ombra più pronunciata all'hover */
    transform: translateY(-2px); /* Lieve sollevamento */
}

/* Wrapper dell'immagine per controllarne le dimensioni e il rapporto d'aspetto */
.aicw-product-image-wrapper {
    width: 100%;
    padding-top: 100%; /* Crea un contenitore quadrato (rapporto 1:1) */
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8; /* Sfondo fallback per immagini mancanti */
}

.aicw-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine copra l'area senza distorcersi */
    display: block;
    border-bottom: 1px solid #eee; /* Bordo sotto l'immagine */
}

/* Dettagli del prodotto (nome e prezzo) */
.aicw-product-details {
    padding: 10px;
    flex-grow: 1; /* Permette ai dettagli di occupare lo spazio rimanente */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spinge il prezzo in basso se ci sono descrizioni */
}

.aicw-product-name {
    font-size: 0.95em;
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
    color: var(--aicw-main-color, #4d5df1); /* Colore del nome ereditato dalle impostazioni */
    word-break: break-word; /* Rompe parole lunghe per evitare overflow */
}

.aicw-product-price {
    font-size: 0.9em;
    font-weight: 700;
    color: #555; /* Colore scuro per il prezzo */
    margin: 0;
    word-break: break-word; /* Rompe parole lunghe */
}

/* Regole per la responsività */
@media (max-width: 768px) {
    .aicw-product-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Card leggermente più piccole su mobile */
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .aicw-product-cards-container {
        grid-template-columns: 1fr; /* Una sola colonna su schermi molto piccoli */
    }
    .aicw-product-card {
        max-width: 90%; /* Adatta la larghezza della card */
    }
}

/* Stile per i messaggi contenenti prodotti */
.aicw-message.aicw-product-message {
    background-color: transparent; /* Il messaggio modello è trasparente, la card ha già il suo sfondo */
    box-shadow: none;
    padding: 0;
}



::-webkit-scrollbar-thumb {
    background: var(--aicw-main)!important;}
   
    
/* 1. Rende il contenitore dell'input il punto di riferimento per il posizionamento */
#chat-input-container {
    position: relative;
}

/* 2. Sposta l'icona della lampadina in una posizione assoluta dentro il contenitore */
#aicw-qa-toggle {
    position: absolute;
    
    right: 4px;
    bottom: 83px;
    z-index: 5;
    
    /* Opzionale: Rimuove il margine che aveva prima per evitare disallineamenti */
    margin-right: 0; 
}

/* 3. Aggiunge spazio a destra nell'area di testo per non scrivere sotto le icone */
#user-message {
    padding-right: 15px !important; 
}


/* wrapper hidden */
#aicw-quick-actions-wrapper[hidden]{display:none !important;  }
 /* header */
.aicw-qa-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.aicw-qa-close{appearance:none;border:0;background:transparent;font-size:1.1rem;line-height:1;cursor:pointer}

/* toggle vicino all'input */
#aicw-qa-toggle{
  appearance:none;border:1px solid var(--aicw-chip-border,#ddd);
  background:var(--aicw-chip-bg,rgba(0,0,0,.05));
  border-radius:999px;
  padding:.35rem .55rem;
  margin-right:.35rem;
  cursor:pointer
}
hr {
    border-top: 1px dashed #8080805e;
    border-left: 0px solid transparent;
    border-bottom: 0px solid transparent;
   
}
/* Layout colonne (se non già presente) */
.aicw-chat-cols { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.aicw-col-side { border-left: 1px solid #e3e3e7; padding-left: 12px; }

/* Contenitore base per lo scorrimento orizzontale delle azioni rapide */
.quick-actions-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: #cccccc #f0f0f0;
}
 
/* Figli base */
.quick-actions-container > * { flex-shrink: 0; margin-right: 8px; }

/* Chips generiche usate altrove (non per #aicw-quick-actions) */
.aicw-quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

.aicw-chip{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--aicw-chip-border, #d6d6dc);
  background:var(--aicw-chip-bg, #fff);
  cursor:pointer;
  font-size:13px; line-height:1;
}
.aicw-chip:hover,
.aicw-chip:focus-visible{
  outline:none;
  border-color:var(--aicw-chip-border-hover, #9aa0a6);
  box-shadow:0 0 0 2px rgba(66,133,244,.15);
  background:var(--aicw-chip-bg-hover, #fff);
}
.aicw-chip:active{ transform:translateY(1px); }

/* font scaling */
#ai-chat-container.aicw-font-small { font-size:13px; }
#ai-chat-container.aicw-font-normal { font-size:15px; }
#ai-chat-container.aicw-font-medium { font-size:17px; }
#ai-chat-container.aicw-font-large { font-size:19px; }

body.aicw-overlay-open { overflow:hidden; }

/* Overlay */
#ai-chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:.3s}
#ai-chat-overlay.visible{opacity:1;visibility:visible}

/* Container Base (Stili comuni a entrambi i layout) */
#ai-chat-container{
    position:relative;
    background:#fff;
    display:flex;
    overflow:visible;
    transform:scale(.95);
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size:15px;
}

.aicw-page-container #ai-chat-container{width:100%;height:75vh;max-width:none;box-shadow:0 4px 15px rgba(0,0,0,.1);border:1px solid #e0e0e0;overflow:hidden;border-radius:12px;margin-top:20px}
#ai-chat-overlay.visible #ai-chat-container{transform:scale(1)}

/* Animazioni */
@keyframes liquid-glowing{0%{transform:translate(-50%,-50%) rotate(0);border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{transform:translate(-50%,-50%) rotate(180deg);border-radius:30% 60% 70% 40%/50% 60% 30% 60%}100%{transform:translate(-50%,-50%) rotate(360deg);border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}
@keyframes heartbeat{0%{transform:translateX(var(--translate-x,0)) scale(1)}50%{transform:translateX(var(--translate-x,0)) scale(1.05)}100%{transform:translateX(var(--translate-x,0)) scale(1)}}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* Bubble */
#ai-chat-bubble{position:fixed;bottom:25px;width:65px;height:65px;cursor:pointer;z-index:9998;transition:transform .2s,left .3s,right .3s;animation:heartbeat 2s ease-in-out infinite;--translate-x:0}
#ai-chat-bubble.aicw-bubble-center{left:50%;--translate-x:-50%}
#ai-chat-bubble.aicw-bubble-right{right:25px;left:auto}
#ai-chat-bubble.aicw-bubble-left{left:25px;right:auto}
#ai-chat-bubble:hover{animation-play-state:paused;transform:translateX(var(--translate-x,0)) scale(1.1)}
#ai-chat-bubble::before{content:'';position:absolute;z-index:-1;top:50%;left:50%;width:100px;height:100px;background:conic-gradient(from 0,var(--aicw-main),#0ff,var(--aicw-main),#ff0,#f00,var(--aicw-main));animation:liquid-glowing 8s ease-in-out infinite;filter:blur(25px)}
#ai-chat-bubble::after{content:'';position:absolute;inset:0;background:#1a1a1a;border-radius:50%}

/* Colonne */
#ai-chat-column-chat{flex:2;display:flex;flex-direction:column;background:#fff;transition:background-color .3s;border-radius:12px 0 0 12px;overflow:hidden;  
   
  height:100%;
  min-height:0;}
.aicw-page-container #ai-chat-column-chat{border-radius:12px}
#ai-chat-column-questions{flex:1;padding:25px;overflow-y:auto;background:#f7f8fa;border-left:1px solid #e5e5e5;transition:background-color .3s,border-color .3s;border-radius:0 12px 12px 0}

/* Header */
.chat-header{padding:15px 20px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center;gap:15px}
.chat-header-text{display:flex;flex-direction:column;flex-grow:1}
.chat-header h3{margin:0;font-size:1.1em;color:#333; line-height: 1; }
.chat-subtitle{font-size:.8em;color:#666; line-height: 1; margin-top: 5px; }
.chat-header-logo{position:relative;width:40px;height:40px;flex-shrink:0}
.chat-header-logo::before{content:'';position:absolute;z-index:0;top:50%;left:50%;width:60px;height:60px;background:conic-gradient(from 0,var(--aicw-main),#0ff,var(--aicw-main),#ff0,#f00,var(--aicw-main));animation:liquid-glowing 8s ease-in-out infinite;filter:blur(15px)}
.chat-header-logo::after{content:'';position:absolute;inset:0;background:#1a1a1a;border-radius:50%;z-index:1}
.chat-header-logo img{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;object-fit:cover}
.chat-header-logo.has-logo::before,.chat-header-logo.has-logo::after{display:none!important}

/* Close */
#ai-chat-close{position:absolute;top:-15px;right:-15px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;font-weight:700;color:#333;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}
.aicw-page-container #ai-chat-close{display:none}
#ai-chat-close:hover{transform:scale(1.1);background:#f55;color:#fff}

/* Chat box + msg */
#chat-box{ padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px;max-height:70vh;min-height: 0; flex:1 1 auto;
    }
.chat-message{padding:10px 15px;border-radius:18px;max-width:80%;line-height:1.5;word-wrap:break-word}
.user-message{background:var(--aicw-main);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ai-message{background:#f1f1f1;color:#333;align-self:flex-start;border-bottom-left-radius:4px;display:flex;align-items:center;gap:10px}
.tts-button{display: none; }
.tts-button:hover{opacity:1}

/* Input */
#chat-input-container{display:flex;padding-top:15px;padding-left:15px;padding-right: 15px;padding-bottom:5px;border-top:1px solid #e5e5e5;background:#fff}
#user-message{flex-grow:1;border:1px solid #ccc;padding:10px 15px;border-radius:20px;transition:border-color .2s}
#user-message:focus{outline:none;border-color:var(--aicw-main)}
#send-message{background:var(--aicw-main);color:#fff;border:none;padding:0 25px;border-radius:20px;margin-left:10px;cursor:pointer;font-weight:700}
#voice-input-button{background:transparent;border:none;font-size:24px;cursor:pointer;margin-right:10px;color:#888}

/* Tooltip */
#ai-chat-tooltip{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:linear-gradient(-45deg,var(--aicw-main),#a09bf5,#9be5f5,var(--aicw-main));background-size:400% 400%;max-width: 200px; color:#fff;padding:0;border-radius:8px;font-size:14px;z-index:9997;opacity:0;visibility:hidden;transition:.4s;box-shadow:0 4px 15px rgba(0,0,0,.2)}
#ai-chat-tooltip .tooltip-text{display:block;padding:10px 20px;background:rgba(0,0,0,.4);border-radius:8px; line-height: 1.3; ì}
#ai-chat-tooltip.visible{opacity:1;visibility:visible;bottom:105px}
.close-tooltip{position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:#333;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;line-height:1;opacity:.8}

/* Quick questions (mobile block) */
.aicw-quick-questions{margin:0;padding:0}
.aicw-quick-title{margin:1px 0;font-size:11px;color:#666;font-weight:600}
.aicw-quick-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.aicw-quick-list li{list-style:none}
.aicw-quick-list  {padding:8px 12px;background:var(--aicw-chip-bg);border:1px solid var(--aicw-chip-border);border-radius:var(--aicw-radius);cursor:pointer;font-size:14px;line-height:1.2;color:#202124;transition:background .15s,border-color .15s,transform .05s}
.aicw-quick-list  {background:var(--aicw-chip-bg-hover);border-color:var(--aicw-chip-border-hover)}
.aicw-quick-list  {transform:translateY(1px)}

/* ---------- BLOCCO CANONICO: Quick Actions orizzontali (lasciare in fondo) ---------- */
#aicw-quick-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:.5rem;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  max-width:100%;
  box-sizing:border-box;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
#aicw-quick-actions.aicw-quick-actions{ /* se il nodo avesse anche questa classe, resta no-wrap */
  flex-wrap:nowrap !important;
}
#aicw-quick-actions > *{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  scroll-snap-align:start;
  border:1px solid var(--aicw-chip-border, #ddd);
  background:var(--aicw-chip-bg, rgba(0,0,0,.05));
  border-radius:999px;
  padding:.4rem .7rem;
  cursor:pointer;
}
#aicw-quick-actions > *:hover{
  background:var(--aicw-chip-bg-hover, rgba(0,0,0,.08));
  border-color:var(--aicw-chip-border-hover, #bbb);
}
/* spazio per eventuale scrollbar tagliata */



/*
 * ===================================================================
 * NUOVE REGOLE PER I LAYOUT (Aggiunte)
 * ===================================================================
 */

/* --- LAYOUT 1: WALL (Stile Software Centrale) --- */
#ai-chat-overlay #ai-chat-container.aicw-layout-wall {
    position: relative; /* Cambiato da fixed per funzionare dentro l'overlay flex */
    width: 90%;
    height: 90%;
    max-width: 1200px;
    max-height: 800px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* Nasconde la colonna laterale nel layout Wall se lo schermo è troppo stretto */
@media (max-width: 900px) {
    #ai-chat-container.aicw-layout-wall #ai-chat-column-questions {
        display: none;
    }
    #ai-chat-container.aicw-layout-wall #ai-chat-column-chat {
        border-radius: 12px; /* Applica il raggio a tutti gli angoli */
    }
}


/* --- LAYOUT 2: COLUMN (Stile Live Chat a Destra) --- */
#ai-chat-overlay #ai-chat-container.aicw-layout-column {
    position: fixed; /* Posizionamento fisso rispetto alla finestra */
    bottom: 25px;
    right: 25px;
    width: 480px;
    height: auto; /* Altezza automatica */
    max-height: calc(107vh - 0px); /* Altezza max meno spazio per bubble e margini */
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    /* Resetta il posizionamento centrale se presente */
    top: auto;
    left: auto;
    transform: scale(1); /* Assicura che la scala sia 1 */
}
#ai-chat-column-chat {max-height: 90vh; } 
/* Nella modalità Colonna, la colonna laterale delle domande non serve */
#ai-chat-container.aicw-layout-column #ai-chat-column-questions {
    display: none;
}
#ai-chat-container.aicw-layout-column #ai-chat-column-chat {
    border-radius: 12px; /* Applica il raggio a tutti gli angoli */
}
#ai-chat-container.aicw-layout-column #ai-chat-close {
    top: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    background: #f1f1f1;
}

/* Per la modalità Colonna, lo sfondo dell'overlay deve essere trasparente */
#ai-chat-overlay.visible.layout-mode-column { display: none!important; 
    background-color: transparent;
    /* Permette di cliccare gli elementi sotto l'overlay */
    pointer-events: none;
}
/* Ma il contenitore della chat deve rimanere cliccabile */
#ai-chat-overlay.visible.layout-mode-column #ai-chat-container {
    pointer-events: auto;
}