/* ═══════════════════════════════════════════════════
   Wind Pirates — AI Assistant Widget
   Floating chat panel for admin + public pages.
   All CSS variables have inline fallbacks — no dependency on admin.css.
   ═══════════════════════════════════════════════════ */

/* ── Prevent widget from creating viewport scrollbars ── */
.wp-ai-panel,
.wp-ai-launcher,
.wp-ai-launcher-label {
  contain: layout style;
}

/* ── Floating launcher button ── */
.wp-ai-launcher {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid #1eb8ec;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  background: var(--wp-blue, #33CCFF);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-ai-launcher:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 32px rgba(0,0,0,0.28);
}

.wp-ai-launcher:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
}
}

/* Avatar pirata: dimensioni fisse, uguali su tutte le pagine */
.wp-ai-launcher .wp-ai-avatar-img {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 1px 2px rgba(0,40,70,0.3));
}
.wp-ai-launcher:hover .wp-ai-avatar-img { transform: scale(1.08); }

.wp-ai-launcher .pulse-dot {
  position: absolute;
  bottom: 2px; right: -8px;
  width: 13px; height: 13px;
  background: var(--green, #22c55e);
  border-radius: 50%;
  border: 2px solid #fff;
}
.wp-ai-launcher .pulse-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--green, #22c55e);
  animation: wp-ai-ping 1.8s ease-out infinite;
}
@keyframes wp-ai-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Launcher: stato "non configurato" (nessuna chiave DeepSeek) ──
   Il bottone resta visibile e cliccabile (mai nascosto), ma non deve
   sembrare "online": cerchio grigio e pallino ambra fisso, senza pulse. */
.wp-ai-launcher.wp-ai-offline {
  background: #8899aa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.wp-ai-launcher.wp-ai-offline:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}
.wp-ai-launcher.wp-ai-offline .pulse-dot {
  background: var(--amber, #f59e0b);
}
.wp-ai-launcher.wp-ai-offline .pulse-dot::after {
  display: none;
}

/* ── Launcher hint label ── */
.wp-ai-launcher-label {
  position: fixed;
  bottom: 38px;
  right: 94px;
  background: var(--wp-navy, #0D1B2A);
  color: #fff;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(13,27,42,0.25);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 9997;
}
.wp-ai-launcher-label::after {
  content: '';
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--wp-navy, #0D1B2A);
}
body.wp-ai-show-hint .wp-ai-launcher-label { opacity: 1; transform: translateX(0); }

/* ── Chat panel ── */
.wp-ai-panel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 380px;
  box-sizing: border-box;
  min-width: 320px;
  max-width: min(760px, calc(100vw - 40px));
  height: 520px;
  min-height: 380px;
  max-height: calc(100vh - 120px);
  background: var(--card-bg, #ffffff);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(13,27,42,0.22), 0 0 0 1px var(--border, #dde4ed);
  display: flex;
  flex-direction: column;
  overflow: visible;  /* permette al pirata di sporgere fuori a sinistra */
  z-index: 9999;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  /* resize gestito solo dal pulsante Espandi (admin) */
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
/* Sospende la transizione apri/chiudi SOLO quando lo stato "aperto" viene
   ripristinato da sessionStorage a un nuovo caricamento pagina (vedi
   widget.js): senza questo, ogni cambio pagina faceva ripartire da capo
   l'animazione di comparsa (scale+fade), come se la chat si "aprisse di
   nuovo" a ogni click su un link — anche se per l'utente era già aperta. */
.wp-ai-panel.no-anim { transition: none !important; }
.wp-ai-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* Larghezza della colonna agganciata: variabile CSS così pannello e .main
   restano sempre sincronizzati (vedi body.wp-ai-docked .main) e il resize a
   mano (vedi .wp-ai-resizer in widget.js) può aggiornarla dal vivo senza
   toccare due punti diversi del CSS. Il valore di default è quello di prima
   (clamp 380–560px); la maniglia lo sovrascrive e lo ricorda per la sessione. */
:root {
  --wp-ai-dock-w: clamp(380px, 32vw, 560px);
}

/* Stato "espanso" attivato dal pulsante nell'header. Su viewport stretti
   (sotto i 900px, vedi media query più sotto) resta un overlay più grande
   come prima; da 900px in su invece si aggancia come terza colonna, vedi
   sotto — qui è solo il fallback per schermi piccoli. */
.wp-ai-panel.expanded {
  width: min(760px, calc(100vw - 40px));
  height: calc(100vh - 120px);
}

/* Classe temporanea (vedi animateDock() in widget.js) che abilita le
   transizioni di posizione/dimensione SOLO durante l'animazione in due fasi
   di aggancio/sgancio: scivolamento verso il bordo → allargamento (o il
   percorso inverso per minimizzare). Fuori da questa animazione il resize a
   mano resta istantaneo (nessun ritardo rispetto al mouse) e l'apri/chiudi
   normale del pannello usa solo la sua transizione originale (fade). */
.wp-ai-panel.dock-anim {
  transition:
    transform .26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .2s ease,
    top .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1),
    bottom .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
    width .34s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
    border-radius .3s ease, box-shadow .3s ease;
}
/* Fase intermedia dell'animazione: il pannello è già agganciato a tutta
   altezza sul bordo destro ma ridotto a una sottile striscia, come se stesse
   sparendo (andata) o ricomparendo (ritorno) dal bordo dello schermo, prima
   di allargarsi o dopo essersi ristretto. */
.wp-ai-panel.docking {
  top: 0; right: 0; bottom: 0; left: auto;
  height: 100vh;
  width: 4px;
  max-width: none;
  border-radius: 0;
  resize: none;
}

/* Da 900px in su: "espandi" non ingrandisce più un overlay sopra il
   contenuto, ma aggancia il pannello come terza colonna a tutta altezza sul
   lato destro della pagina. Il contenuto (.main) si restringe di pari passo
   (vedi body.wp-ai-docked .main più sotto, stessa variabile) così non resta
   mai coperto: la pagina "si stringe" invece di essere nascosta sotto il
   pannello. "Minimizza" (stesso pulsante) rimuove la classe e il pannello
   torna flottante sopra il contenuto come prima. */
@media (min-width: 900px) {
  .wp-ai-panel.expanded {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--wp-ai-dock-w, 420px);
    min-width: 320px;
    /* Tetto rimosso su richiesta di Yuriy (2026-07-08): prima 760px/60vw
       impedivano di allargare oltre un certo punto anche su schermi grandi;
       ora l'unico limite è un margine di sicurezza di 40px (stesso valore
       già usato per l'overlay su viewport stretti sopra), per poter
       trascinare il pannello fino quasi al bordo sinistro della pagina. */
    max-width: calc(100vw - 40px);
    height: 100vh;
    max-height: none;
    /* Angoli SINISTRI arrotondati anche da agganciato (richiesta di Yuriy,
       2026-07-12: l'angolino bianco squadrato in alto/basso a sinistra
       copriva l'header della pagina). Il lato destro resta dritto perché
       aderisce al bordo dello schermo; header e composer qui sotto seguono
       lo stesso raggio, altrimenti i loro sfondi squadrati sbordano. */
    border-radius: 14px 0 0 14px;
    resize: none;
    box-shadow: -12px 0 40px rgba(13,27,42,0.18), 0 0 0 1px var(--border, #dde4ed);
  }
  .wp-ai-panel.expanded .wp-ai-panel-header { border-top-left-radius: 14px; }
  .wp-ai-panel.expanded .wp-ai-composer { border-bottom-left-radius: 14px; }
  .wp-ai-panel.expanded.open::after {
    display: none;
  }
  /* Riserva sul layout la stessa larghezza occupata dal pannello agganciato,
     usando l'identica variabile CSS: .main si restringe e il resto del
     contenuto resta interamente visibile, riempiendo lo spazio sopra e sotto
     invece di sparire dietro il pannello. */
  body.wp-ai-docked .main {
    margin-right: var(--wp-ai-dock-w, 420px);
    transition: margin-right 0.25s ease;
  }
  /* Maniglia di ridimensionamento sul bordo sinistro del pannello agganciato:
     visibile solo in questa modalità (in modalità overlay flottante il resize
     nativo dell'angolo, se mai riattivato, basterebbe). */
  .wp-ai-panel.expanded .wp-ai-resizer {
    display: block;
  }
}

/* Durante il trascinamento della maniglia: niente transizioni (altrimenti il
   pannello e il contenuto "inseguono" il mouse con un ritardo elastico invece
   di seguirlo esattamente), e blocco della selezione testo sul resto della
   pagina mentre si trascina. */
body.wp-ai-resizing .main,
body.wp-ai-resizing .wp-ai-panel {
  transition: none !important;
}
body.wp-ai-resizing {
  cursor: col-resize;
  user-select: none;
}

/* Maniglia di resize del pannello agganciato: nascosta di default (vedi
   media query sopra per quando appare), striscia sottile sul bordo sinistro
   con un indicatore visivo che appare solo in hover o durante il drag. */
.wp-ai-resizer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
/* .wp-ai-panel ha overflow:hidden (necessario altrove per i bordi arrotondati
   e lo scroll interno dei messaggi): la maniglia resta quindi DENTRO al bordo
   sinistro del pannello (left:0) invece che a cavallo, altrimenti verrebbe
   tagliata dall'overflow. */
.wp-ai-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--wp-blue, var(--border, #dde4ed));
  opacity: 0;
  transition: opacity .15s ease;
}
.wp-ai-resizer:hover::before,
body.wp-ai-resizing .wp-ai-resizer::before {
  opacity: 1;
}
/* Piccolo indicatore visivo della maniglia di ridimensionamento nativa del
   browser (che resta comunque quella funzionante): pointer-events:none così
   non intercetta il drag, serve solo a farla notare. */
.wp-ai-panel.open::after {
  content: '';
  position: absolute;
  right: 4px; bottom: 4px;
  width: 9px; height: 9px;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--border, #dde4ed) 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 65%, var(--border, #dde4ed) 65% 75%, transparent 75% 100%);
  pointer-events: none;
  opacity: 0.8;
}

/* ── Panel header ── */
.wp-ai-panel-header {
  padding: 14px 16px;
  background: linear-gradient(120deg, var(--wp-blue, #33CCFF), var(--wp-blue-dark, #009fe3));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.wp-ai-panel-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Stesso principio del bottone flottante: immagine più grande del cerchio
   bianco che la contiene, così l'illustrazione ne esce parzialmente invece
   di restare tutta rinchiusa dentro (il contenitore non ha overflow:hidden). */
.wp-ai-panel-avatar .wp-ai-avatar-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}
.wp-ai-panel-title { flex: 1; min-width: 0; }
.wp-ai-panel-title .name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
}
.wp-ai-panel-title .status {
  font-size: 10.5px;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.wp-ai-panel-title .status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green, #22c55e);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.wp-ai-panel-title .status.offline .dot { background: var(--amber, #f59e0b); }
.wp-ai-panel-close {
  background: rgba(255,255,255,0.16);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-size: 16px;
  line-height: 1;
}
.wp-ai-panel-close:hover { background: rgba(255,255,255,0.3); }

.wp-ai-panel-clear {
  background: rgba(255,255,255,0.16);
  border: none;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.wp-ai-panel-clear:hover { background: rgba(255,255,255,0.3); }

.wp-ai-panel-expand {
  background: rgba(255,255,255,0.16);
  border: none;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.wp-ai-panel-expand:hover { background: rgba(255,255,255,0.3); }
.wp-ai-panel-expand svg { width: 15px; height: 15px; }
/* Due icone (espandi/comprimi) nello stesso bottone: si mostra solo quella
   giusta a seconda dello stato, cambiato da widget.js con la classe is-expanded. */
.wp-ai-panel-expand .icon-collapse { display: none; }
.wp-ai-panel-expand.is-expanded .icon-expand { display: none; }
.wp-ai-panel-expand.is-expanded .icon-collapse { display: block; }
.wp-ai-panel-clear svg { width: 15px; height: 15px; }

/* ── Pillola "voce" (altoparlante + lingua audio), composer accanto a
   microfono/invio ──
   Seconda revisione, 2026-07-08, su richiesta di Yuriy: prima erano due
   bottoni separati (uno tondo per l'altoparlante, uno a pillola per la
   lingua con icona a globo); ora sono un SOLO contenitore a pillola
   (#wp-ai-voice-pill) con due zone cliccabili al suo interno — l'icona
   altoparlante (menu breve/media/lunga/off) e il codice lingua senza icona
   globo (menu lingua manuale). Tutta la pillola diventa blu quando la
   lettura vocale è attiva (qualunque modalità diversa da "off"); il colore è
   sulla pillola, non sui singoli bottoni, così i due segmenti restano
   visivamente uniti in un solo gruppo. */
.wp-ai-voice-pill {
  display: flex;
  align-items: stretch;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.wp-ai-voice-pill-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.wp-ai-voice-pill-btn:hover { background: rgba(51,204,255,0.12); }
.wp-ai-voice-pill-speaker {
  width: 30px;
  padding: 0;
}
.wp-ai-voice-pill-speaker svg { width: 16px; height: 16px; }
.wp-ai-voice-pill-speaker .icon-voice-on  { display: none; }  /* default spento: nasconde icona ON */
.wp-ai-voice-pill-speaker .icon-voice-off { display: block; } /* default spento: mostra icona OFF (X) */
.wp-ai-voice-pill-lang {
  padding: 0 8px 0 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-left: 1px solid rgba(100,116,139,0.18);
}
/* Stato attivo: applicato al CONTENITORE (non ai singoli bottoni), così tutta
   la pillola diventa blu in un colpo solo. */
.wp-ai-voice-pill.active {
  background: var(--wp-blue-dark, #009fe3);
}
.wp-ai-voice-pill.active .wp-ai-voice-pill-btn { color: #fff; }
.wp-ai-voice-pill.active .wp-ai-voice-pill-btn:hover { background: rgba(255,255,255,0.18); }
.wp-ai-voice-pill.active .wp-ai-voice-pill-lang { border-left-color: rgba(255,255,255,0.35); }
.wp-ai-voice-pill.active .wp-ai-voice-pill-speaker .icon-voice-on  { display: block; } /* voce attiva: mostra icona ON (onde) */
.wp-ai-voice-pill.active .wp-ai-voice-pill-speaker .icon-voice-off { display: none; }  /* voce attiva: nasconde icona OFF */
/* Lingua fissata manualmente (non "Auto"): sottolineatura come indicatore
   discreto in più, visibile sia da spenta che da attiva. */
.wp-ai-voice-pill-lang.lang-override { text-decoration: underline; text-underline-offset: 2px; }

/* ── Bottone "Cronologia" (header) ──
   Stesso stile a quadrato dei bottoni vicini (clear/expand): prima non aveva
   NESSUNA regola CSS, quindi l'SVG restava alla sua dimensione naturale
   (24x24, senza contenitore) invece di stare dentro il tondino da 28px come
   gli altri — da qui la resa "sballata" dell'icona. */
.wp-ai-panel-history {
  background: rgba(255,255,255,0.16);
  border: none;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.wp-ai-panel-history:hover { background: rgba(255,255,255,0.3); }
.wp-ai-panel-history svg { width: 15px; height: 15px; }
/* Stato "attivo" mentre la cronologia è aperta, per far capire che il
   bottone ha un toggle e in che stato si trova. */
.wp-ai-panel-history.is-active { background: rgba(255,255,255,0.42); }

/* ── Vista Cronologia (lista + dettaglio) ──
   Quando il pannello è in modalità cronologia, l'area messaggi cambia
   contenuto ma quick-actions e casella di testo (pensate per la chat dal
   vivo) devono sparire: non ha senso scrivere o usare le scorciatoie
   mentre si sta leggendo una conversazione passata in sola lettura. */
.wp-ai-panel.history-mode .wp-ai-quick-actions,
.wp-ai-panel.history-mode .wp-ai-composer {
  display: none;
}

.wp-ai-history-empty {
  text-align: center;
  color: #64748b;
  font-size: 12.5px;
  padding: 24px 12px;
}

.wp-ai-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-ai-history-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid #d8eaf5;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wp-ai-history-item:hover {
  border-color: var(--wp-blue, #33CCFF);
  box-shadow: 0 2px 10px rgba(0,159,227,0.15);
}
.wp-ai-history-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 0 10px 12px;
  cursor: pointer;
  font: inherit;
}
.wp-ai-history-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wp-ai-history-item-meta {
  font-size: 10.5px;
  color: #64748b;
}
/* Riga-scheda cliente nella lista cronologia (2026-07-13): 👤×2 + 🧒×2 (5, 8) · 💶 ... */
.wp-ai-history-item-cust {
  display: block;
  font-size: 10.5px;
  color: #0b6f9e;
  margin: 2px 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-ai-history-item-del {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none; border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  margin: 4px 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.wp-ai-history-item-del:hover { background: #fee2e2; color: #dc2626; }
.wp-ai-history-item-del svg { width: 14px; height: 14px; }

/* Pulsante "svuota tutta la cronologia" */
.wp-ai-history-clear-all {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 12px;
  border: 1px dashed #d8eaf5; border-radius: 8px;
  background: #fef2f2; color: #dc2626;
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin-bottom: 4px;
}
.wp-ai-history-clear-all:hover { background: #fee2e2; border-color: #dc2626; }
.wp-ai-history-clear-all svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Banner "torna indietro" nella vista dettaglio ── */
.wp-ai-history-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #d8eaf5;
  position: sticky;
  top: -16px;
  background: #fff;
  z-index: 1;
}
.wp-ai-history-back {
  background: var(--gray-bg, #f4f6f9);
  border: none;
  color: var(--wp-blue-dark, #009fe3);
  cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wp-ai-history-back:hover { background: #e3f2fb; }
.wp-ai-history-back svg { width: 15px; height: 15px; }
.wp-ai-history-banner-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Messages area ── */
.wp-ai-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: radial-gradient(ellipse at 100% 0%, rgba(51,204,255,0.04), transparent 50%);
}
.wp-ai-panel-messages::-webkit-scrollbar { width: 5px; }
.wp-ai-panel-messages::-webkit-scrollbar-thumb { background: var(--border, #dde4ed); border-radius: 5px; }

/* ── Message bubbles ── */
.wp-ai-msg {
  position: relative;
  max-width: 84%;
  padding: 9px 28px 9px 12px;  /* spazio a destra per il pulsante copia */
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  animation: wp-ai-msg-rise 0.3s ease both;
  word-wrap: break-word;
}
@keyframes wp-ai-msg-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Le tabelle hanno bisogno di più spazio orizzontale del solito fumetto di
   testo: quando un messaggio del bot contiene una tabella, il fumetto può
   allargarsi fino a tutta la larghezza disponibile invece di restare all'84%. */
.wp-ai-msg.bot:has(.md-table-wrap) { max-width: 100%; }
.wp-ai-msg.bot {
  align-self: flex-start;
  background: #f0f7fb;
  border: 1px solid #d8eaf5;
  color: #1a2e3c;
  border-bottom-left-radius: 4px;
}
.wp-ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--wp-blue-dark, #009fe3), var(--wp-blue, #33CCFF));
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* ── Pulsante copia messaggio ── */
.wp-ai-msg-copy {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  width: 24px; height: 24px;
  border: none; border-radius: 5px;
  background: rgba(0,0,0,0.08);
  color: #5a6b7a;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.15s ease, background 0.15s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.wp-ai-msg-copy svg { width: 13px; height: 13px; }
.wp-ai-msg:hover .wp-ai-msg-copy { opacity: 1; }
.wp-ai-msg-copy:hover { background: rgba(0,0,0,0.15); color: var(--wp-navy, #0D1B2A); }
.wp-ai-msg.user .wp-ai-msg-copy { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.wp-ai-msg.user .wp-ai-msg-copy:hover { background: rgba(255,255,255,0.25); color: #fff; }
.wp-ai-msg-copy.copied { background: var(--green, #22c55e) !important; color: #fff !important; }

/* ── Markdown reso dentro le risposte del bot (titoli, elenchi, grassetto, separatori) ── */
.wp-ai-msg.bot p { margin: 0 0 8px; }
.wp-ai-msg.bot p:last-child { margin-bottom: 0; }
.wp-ai-msg.bot strong { color: var(--wp-navy, #0D1B2A); font-weight: 700; }
.wp-ai-msg.bot em { font-style: italic; }
.wp-ai-msg.bot del { color: #8a99a8; }
/* Titoli: prima tutti i livelli (#..######) condividevano un'unica classe
   .md-h senza distinzione — ora ogni livello ha una dimensione/peso propri,
   con una gerarchia visiva decrescente da H1 a H6. */
.wp-ai-msg.bot .md-h {
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
  margin: 10px 0 6px;
  padding-top: 8px;
  border-top: 1px solid #d8eaf5;
}
.wp-ai-msg.bot .md-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.wp-ai-msg.bot .md-h1 { font-size: 16px; }
.wp-ai-msg.bot .md-h2 { font-size: 14.5px; }
.wp-ai-msg.bot .md-h3 { font-size: 13.5px; }
.wp-ai-msg.bot .md-h4 { font-size: 12.5px; }
.wp-ai-msg.bot .md-h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.wp-ai-msg.bot .md-h6 { font-size: 11.5px; color: #64748b; }
.wp-ai-msg.bot ul, .wp-ai-msg.bot ol {
  margin: 0 0 8px;
  padding-left: 18px;
}
.wp-ai-msg.bot ul:last-child, .wp-ai-msg.bot ol:last-child { margin-bottom: 0; }
.wp-ai-msg.bot li { margin: 2px 0; }
/* Liste annidate: niente margine esterno extra sulla lista figlia, altrimenti
   si stacca troppo dal suo elemento padre. */
.wp-ai-msg.bot li > ul, .wp-ai-msg.bot li > ol {
  margin: 2px 0 2px 4px;
}
.wp-ai-msg.bot hr {
  border: none;
  border-top: 1px solid #d8eaf5;
  margin: 8px 0;
}
.wp-ai-msg.bot code {
  background: rgba(13,27,42,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 11.5px;
  color: var(--wp-navy, #0D1B2A);
}
.wp-ai-msg.bot a {
  color: var(--wp-blue-dark, #009fe3);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Checkbox list (- [ ] / - [x]) ──
   Prima restavano parentesi quadre a vista ("[x]", "[ ]"): qui una vera
   casella visiva, spuntata o meno a seconda dello stato. Sola lettura (il
   contenuto arriva già scritto dal bot), quindi non è un <input> cliccabile. */
.wp-ai-msg.bot .md-checklist { list-style: none; padding-left: 0; }
.wp-ai-msg.bot .md-check-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 3px 0;
}
.wp-ai-msg.bot .md-checkbox {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid #b6c6d1;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  box-sizing: border-box;
}
.wp-ai-msg.bot .md-check-item.checked .md-checkbox {
  background: var(--wp-blue, #33CCFF);
  border-color: var(--wp-blue, #33CCFF);
}
.wp-ai-msg.bot .md-check-item.checked .md-checkbox::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wp-ai-msg.bot .md-check-item.checked .md-check-label {
  color: #8a99a8;
  text-decoration: line-through;
}

/* ── Citazione (>) ──
   Prima non esisteva nessuno stile: restava testo con ">" a vista. Bordo
   laterale + sfondo leggero, come in un client di chat/email. Il contenuto
   interno è markdown vero (può contenere grassetto, liste, ecc.), quindi i
   margini dei suoi elementi figli vengono attenuati per non "gonfiare" la
   citazione con spazi doppi. */
.wp-ai-msg.bot .md-quote {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--wp-blue, #33CCFF);
  background: rgba(0,159,227,0.06);
  border-radius: 0 6px 6px 0;
  color: #3a4a58;
}
.wp-ai-msg.bot .md-quote p,
.wp-ai-msg.bot .md-quote ul,
.wp-ai-msg.bot .md-quote ol {
  margin-bottom: 4px;
}
.wp-ai-msg.bot .md-quote > *:last-child { margin-bottom: 0; }

/* ── Blocco di codice (```lang ... ```) ──
   Prima non esisteva nessun parsing: l'intero blocco, backtick incluse,
   veniva stampato come paragrafo normale. Qui un riquadro scuro in stile
   editor, con etichetta del linguaggio se dichiarato. */
.wp-ai-msg.bot .md-code-block {
  margin: 6px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0d1b2a;
  border: 1px solid #1c3346;
}
.wp-ai-msg.bot .md-code-lang {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9fb8cc;
  background: #10263a;
  padding: 4px 10px;
  border-bottom: 1px solid #1c3346;
}
.wp-ai-msg.bot .md-code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
}
.wp-ai-msg.bot .md-code-block code {
  background: none;
  padding: 0;
  color: #d7e6f0;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre;
}

/* ── Card documento generato (fattura o documento ad-hoc) ──
   Messaggio dedicato, non un semplice link in mezzo al testo: sempre visibile
   e cliccabile, con icona file e nota di scadenza se il documento è temporaneo. */
.wp-ai-msg.wp-ai-doc-msg {
  background: none;
  border: none;
  padding: 0;
  max-width: 92%;
}
.wp-ai-doc-card {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #d8eaf5;
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wp-ai-doc-card:hover {
  border-color: var(--wp-blue, #33CCFF);
  box-shadow: 0 2px 10px rgba(0,159,227,0.15);
}
.wp-ai-doc-view {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 2px 4px;
  transition: background 0.15s;
}
.wp-ai-doc-view:hover { background: #f0f7fb; }
.wp-ai-doc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #e3f2fb;
  color: var(--wp-blue-dark, #009fe3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wp-ai-doc-icon svg { width: 17px; height: 17px; }
.wp-ai-doc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-ai-doc-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-ai-doc-expiry {
  font-size: 10.5px;
  color: #64748b;
}
.wp-ai-doc-print {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gray-bg, #f4f6f9);
  color: var(--wp-blue-dark, #009fe3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  /* reset stile <button> nativo: prima era un <a>, ora è un <button> per poter
     lanciare printDocument() via JS invece di aprire un altro link */
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.wp-ai-doc-print:hover { background: var(--wp-blue, #33CCFF); color: #fff; }
.wp-ai-doc-print svg { width: 15px; height: 15px; }
.wp-ai-doc-save {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wp-blue, #33CCFF);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s;
}
.wp-ai-doc-save:hover { background: var(--wp-blue-dark, #009fe3); }
.wp-ai-doc-save svg { width: 15px; height: 15px; }

/* ── Tabelle Markdown rese dentro le risposte del bot ──
   Prima il testo grezzo delle tabelle (pipe e trattini a vista) veniva
   stampato così com'era: qui si disegna una vera tabella HTML, con intestazione
   evidenziata e scroll orizzontale di sicurezza se le colonne non ci stanno. */
.wp-ai-msg.bot .md-table-wrap {
  overflow-x: auto;
  margin: 6px 0 10px;
  border: 1px solid #d8eaf5;
  border-radius: 8px;
  max-width: 100%;
}
.wp-ai-msg.bot .md-table-wrap:last-child { margin-bottom: 0; }
.wp-ai-msg.bot .md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11.5px;
}
.wp-ai-msg.bot .md-table th,
.wp-ai-msg.bot .md-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d8eaf5;
}
.wp-ai-msg.bot .md-table tbody tr:last-child td { border-bottom: none; }
.wp-ai-msg.bot .md-table tbody tr:nth-child(even) { background: rgba(0,159,227,0.04); }
.wp-ai-msg.bot .md-table th {
  background: #e3f2fb;
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.wp-ai-msg.bot .md-table td { color: #1a2e3c; }

/* ── Typing indicator ── */
.wp-ai-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #f0f7fb;
  border: 1px solid #d8eaf5;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}
.wp-ai-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a0c4d8;
  animation: wp-ai-bounce 1.2s ease-in-out infinite;
}
.wp-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.wp-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wp-ai-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}

/* ── Quick action pills ── */
.wp-ai-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px 10px;
  flex-shrink: 0;
}
.wp-ai-quick-actions button {
  background: var(--gray-bg, #f4f6f9);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.wp-ai-quick-actions button:hover {
  background: rgba(51,204,255,0.12);
  border-color: var(--wp-blue, #33CCFF);
  color: var(--wp-blue-dark, #009fe3);
}

/* ── Composer (stile Claude): textarea sopra, toolbar sotto con
   allega/microfono a sinistra-centro e invio a destra. Un unico riquadro
   con bordo che si "illumina" in focus, non più una singola riga rigida. ── */
.wp-ai-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 14px 12px;
  padding: 8px 8px 6px;
  border: 1px solid var(--border, #dde4ed);
  border-radius: 18px;
  background: var(--card-bg, #ffffff);
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-ai-composer:focus-within {
  border-color: var(--wp-blue, #33CCFF);
  box-shadow: 0 0 0 3px rgba(51,204,255,0.12);
}
.wp-ai-composer textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 22px;
  max-height: 210px;  /* +50% */
  padding: 4px 6px 2px;
  color: inherit;
  box-sizing: border-box;
}

/* Chip allegato, sopra la textarea quando presente */
.wp-ai-attach-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  background: rgba(51,204,255,0.10);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 10px;
  padding: 4px 6px 4px 8px;
  font-size: 11.5px;
  color: var(--wp-blue-dark, #009fe3);
  margin: 0 4px 2px;
}
.wp-ai-attach-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.wp-ai-attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.wp-ai-attach-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #64748b;
  padding: 0 2px;
  flex-shrink: 0;
}
.wp-ai-attach-remove:hover { color: #ef4444; }

/* Barra icone in basso nel composer */
.wp-ai-composer-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}
.wp-ai-composer-spacer { flex: 1; }

.wp-ai-tool-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
  touch-action: manipulation; /* evita che una pressione prolungata apra il menu contestuale del browser */
  -webkit-user-select: none;
  user-select: none;
}
.wp-ai-tool-btn svg { width: 17px; height: 17px; }
.wp-ai-tool-btn:hover { background: rgba(51,204,255,0.12); color: var(--wp-blue-dark, #009fe3); }
.wp-ai-tool-btn:disabled { opacity: 0.45; cursor: default; background: none; }

/* Bottone microfono in registrazione: rosso e pulsante */
.wp-ai-tool-btn.is-recording { color: #ef4444; background: rgba(239,68,68,0.12); }
.wp-ai-tool-btn.is-recording svg { animation: wp-ai-mic-pulse 1.1s ease-in-out infinite; }
@keyframes wp-ai-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Puntino che indica "invio automatico" attivo per la dettatura (vedi
   pressione prolungata sul microfono → menu modalità, in widget.js) */
.wp-ai-tool-btn.dictation-auto::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wp-blue-dark, #009fe3);
  border: 1.5px solid var(--card-bg, #fff);
}

/* Menu "modalità dettatura" (pressione prolungata sul microfono): piccolo
   popover ancorato in basso a destra del composer, niente overlay scuro
   (è un'impostazione veloce, non una conferma bloccante). */
.wp-ai-mic-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 6px;
  min-width: 220px;
  max-width: 260px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13,27,42,0.18);
  padding: 6px;
  z-index: 20;
  animation: wp-ai-mic-menu-in 0.15s ease both;
}
@keyframes wp-ai-mic-menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.wp-ai-mic-menu-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  padding: 4px 8px 6px;
}
.wp-ai-mic-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--wp-navy, #0D1B2A);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.wp-ai-mic-menu-item:hover { background: rgba(51,204,255,0.12); }
.wp-ai-mic-menu-item.active { background: rgba(0,159,227,0.12); color: var(--wp-blue-dark, #009fe3); font-weight: 600; }

/* Menu "lunghezza risposta vocale" (click sull'altoparlante).
   Fino al 2026-07-08 il bottone viveva nell'header (overflow:hidden per gli
   angoli arrotondati) e il menu era ancorato al pannello intero per non
   restare clippato. Ora che il bottone si è spostato nel composer insieme a
   microfono/invio, riusa esattamente lo stesso pattern di ancoraggio del
   mic-menu (bottom: calc(100% + 8px), ancorato al composer). */
.wp-ai-voice-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 6px;
  min-width: 210px;
  max-width: 260px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13,27,42,0.18);
  padding: 6px;
  z-index: 20;
  animation: wp-ai-mic-menu-in 0.15s ease both;
}
.wp-ai-voice-menu-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  padding: 4px 8px 6px;
}
.wp-ai-voice-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--wp-navy, #0D1B2A);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.wp-ai-voice-menu-item:hover { background: rgba(51,204,255,0.12); }
.wp-ai-voice-menu-item.active { background: rgba(0,159,227,0.12); color: var(--wp-blue-dark, #009fe3); font-weight: 600; }

/* Menu "lingua audio" (click sul selettore lingua, nuovo 2026-07-08): stesso
   identico pattern visivo/di ancoraggio del voice-menu qui sopra, riusa le
   stesse classi -title/-item per non duplicare stile — solo il contenitore ha
   una classe propria per poterlo distinguere/chiudere separatamente in JS. */
.wp-ai-lang-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 6px;
  min-width: 190px;
  max-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13,27,42,0.18);
  padding: 6px;
  z-index: 20;
  animation: wp-ai-mic-menu-in 0.15s ease both;
}

.wp-ai-composer .wp-ai-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--wp-blue, #33CCFF), var(--wp-blue-dark, #009fe3));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wp-ai-send-btn:hover { transform: scale(1.08); }
.wp-ai-send-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.wp-ai-send-btn svg { width: 15px; height: 15px; }

/* ── Draft order modal (overlay) ── */
.wp-ai-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wp-ai-fade-in 0.2s ease;
}
@keyframes wp-ai-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Variante "dentro il pannello" (2026-07-12, richiesta Yuriy): la conferma
   svuota-chat compare centrata NELLA finestra della chat, non al centro
   dello schermo — così i pulsanti restano vicini al cestino appena premuto.
   position:absolute copre solo il pannello (elemento posizionato) e ne
   eredita gli angoli arrotondati. */
.wp-ai-modal-backdrop-panel {
  position: absolute;
  border-radius: inherit;
}
.wp-ai-modal-backdrop-panel .wp-ai-modal {
  width: calc(100% - 36px);
  max-width: 340px;
}
.wp-ai-modal {
  background: var(--card-bg, #ffffff);
  border-radius: var(--radius, 14px);
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(13,27,42,0.3);
  animation: wp-ai-modal-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wp-ai-modal-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.wp-ai-modal-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #dde4ed);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--wp-navy, #0D1B2A);
}
.wp-ai-modal-header i { color: var(--wp-blue-dark, #009fe3); font-size: 20px; }
.wp-ai-modal-body { padding: 16px 18px; }
.wp-ai-modal-body table { width: 100%; font-size: 12px; border-collapse: collapse; }
.wp-ai-modal-body table td { padding: 5px 0; vertical-align: top; }
.wp-ai-modal-body table .lbl { color: #64748b; padding-right: 10px; white-space: nowrap; }
.wp-ai-modal-body table .val { font-weight: 600; color: #1a2e3c; }
.wp-ai-modal-body .total-row { font-size: 15px; font-weight: 700; color: var(--wp-navy, #0D1B2A); padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border, #dde4ed); }
.wp-ai-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border, #dde4ed);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.wp-ai-modal-footer button {
  padding: 8px 18px;
  border-radius: var(--radius-sm, 8px);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}
.wp-ai-btn-save {
  background: var(--green, #22c55e);
  color: #fff;
}
.wp-ai-btn-save:hover { background: #1ea34c; }
.wp-ai-btn-cancel {
  background: var(--gray-bg, #f4f6f9);
  color: #64748b;
  border: 1px solid var(--border, #dde4ed) !important;
}
.wp-ai-btn-cancel:hover { background: #e2e8f0; }
.wp-ai-btn-danger { background: #ef4444; color: #fff; }
.wp-ai-btn-danger:hover { background: #dc2626; }

/* ── Pannello archivio .zip (elenco file dentro allo zip allegato) ──
   Compare sopra il composer quando l'utente allega uno .zip; elenca ogni
   file leggibile con dimensione e, se editabile (testo puro), un bottone
   "Modifica" che apre la modale sottostante. */
.wp-ai-archive-panel {
  margin: 0 10px 6px;
  background: #fff;
  border: 1px solid var(--border, #dde4ed);
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
  display: flex;
  flex-direction: column;
}
.wp-ai-archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-bg, #f4f6f9);
  border-bottom: 1px solid var(--border, #dde4ed);
  font-size: 12px;
  font-weight: 700;
  color: var(--wp-navy, #0D1B2A);
}
.wp-ai-archive-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wp-ai-archive-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #64748b;
  flex-shrink: 0;
  padding: 0 2px;
}
#wp-ai-archive-close:hover { color: #ef4444; }
.wp-ai-archive-list {
  overflow-y: auto;
  padding: 4px 0;
}
.wp-ai-archive-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  border-bottom: 1px solid #f0f4f7;
}
.wp-ai-archive-row:last-child { border-bottom: none; }
.wp-ai-archive-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a2e3c;
}
.wp-ai-archive-size {
  color: #94a3b8;
  flex-shrink: 0;
}
.wp-ai-archive-readonly {
  color: #94a3b8;
  font-style: italic;
  flex-shrink: 0;
  font-size: 11px;
}
.wp-ai-archive-edit {
  flex-shrink: 0;
  border: 1px solid var(--wp-blue, #33CCFF);
  background: #fff;
  color: var(--wp-blue-dark, #009fe3);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wp-ai-archive-edit:hover { background: rgba(51,204,255,0.12); }
.wp-ai-archive-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border, #dde4ed);
  display: flex;
  justify-content: flex-end;
}
.wp-ai-archive-footer .wp-ai-btn-save {
  padding: 6px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 12px;
}

/* Modale editor file di testo dentro l'archivio: più larga della modale
   bozza ordine, per lasciare spazio alla textarea del contenuto. */
.wp-ai-modal-wide { width: 560px; }
.wp-ai-archive-edit-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius-sm, 8px);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #1a2e3c;
}
.wp-ai-archive-edit-textarea:focus {
  outline: none;
  border-color: var(--wp-blue, #33CCFF);
}

/* ── Vassoio "documenti generati in questa chat" ──
   Compare sopra il composer solo quando l'assistente ha generato almeno
   un documento (fattura/report) nella sessione corrente. Collassato mostra
   un'unica riga con il pulsante "Scarica tutto"; espanso (click sulla
   riga/etichetta) mostra un pulsante di download per ogni documento. */
.wp-ai-doc-tray {
  margin: 0 10px 6px;
  background: rgba(51,204,255,0.10);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 10px;
  padding: 4px 8px 4px 4px;
}
.wp-ai-doc-tray-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wp-ai-doc-tray-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 4px 6px 8px;
  text-align: left;
}
.wp-ai-doc-tray-label {
  font-size: 11.5px;
  color: var(--wp-blue-dark, #009fe3);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-ai-doc-tray-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--wp-blue-dark, #009fe3);
  transition: transform 0.2s ease;
}
.wp-ai-doc-tray.expanded .wp-ai-doc-tray-chevron { transform: rotate(180deg); }
.wp-ai-doc-tray .wp-ai-btn-save {
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: 11.5px;
  flex-shrink: 0;
}
.wp-ai-doc-tray-list {
  border-top: 1px solid rgba(13,27,42,0.08);
  margin-top: 2px;
  padding-top: 2px;
}
.wp-ai-doc-tray-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 12px;
}
.wp-ai-doc-tray-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: #1a2e3c;
}
.wp-ai-doc-tray-item-dl {
  flex-shrink: 0;
  border: 1px solid var(--wp-blue, #33CCFF);
  background: #fff;
  color: var(--wp-blue-dark, #009fe3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wp-ai-doc-tray-item-dl:hover { background: rgba(51,204,255,0.12); }

/* ── Pirata decorativo ancorato all'angolo sinistro in basso della chat ──
   Posizionato DENTRO #wp-ai-panel così segue automaticamente la chat
   ovunque venga spostata/ridimensionata. */
.wp-ai-pirate-left {
  position: absolute;
  right: 100%;          /* bordo destro del pirata = bordo sinistro del pannello */
  bottom: 0;            /* ancorato al fondo del pannello */
  margin-right: -30px;  /* 30px di sovrapposizione sopra la chat */
  z-index: 0;           /* dietro il contenuto del pannello ma visibile fuori */
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.wp-ai-pirate-left img {
  display: block;
  width: 170px;
  max-width: 170px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  transition: transform 0.3s ease;
}
.wp-ai-pirate-left:hover img { transform: scale(1.05); }
.wp-ai-pirate-left.hidden { opacity: 0; pointer-events: none; }

/* Nascondi su mobile */
@media (max-width: 900px) { .wp-ai-pirate-left { display: none; } }

/* ── Responsive ── */
@media (max-width: 480px) {
  .wp-ai-panel {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 84px;
    height: 65vh;
  }
  .wp-ai-launcher { right: 12px; bottom: 20px; }
  .wp-ai-launcher-label { right: 78px; bottom: 30px; }
}

/* ═══════════════════════════════════════════════════
   Help button inside composer (public pages)
   ═══════════════════════════════════════════════════ */
.wp-ai-help-btn svg {
  color: var(--wp-blue, #33CCFF);
}

.wp-ai-help-active {
  background: rgba(51, 204, 255, 0.15);
  border-radius: 50%;
}

.wp-ai-help-active svg {
  color: var(--wp-blue-dark, #009fe3);
}