/* "SCRIVI CON L'AI" (26/10/2026) — js/components/scriviConAi.js. Solo variabili del tema (modalita' scura da sola), niente :has(). */
.sca-pannello { position: fixed; z-index: 20050;   /* sopra la finestra "Nuova conversazione" (20000) */ width: 400px; max-width: calc(100vw - 16px); background: var(--bg-primary, #fff); color: var(--text-primary, #111827);
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 10px 12px 12px; font-size: .86rem; }
.sca-pannello.sca-telefono { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 80vh; overflow-y: auto; }
.sca-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sca-titolo { font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.sca-titolo i { color: #8b5cf6; }
.sca-x { background: none; border: none; font-size: 1.2rem; line-height: 1; color: var(--text-secondary, #6b7280); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sca-x:hover { background: var(--bg-secondary, #f3f4f6); }
.sca-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sca-chip { font: inherit; font-size: .74rem; padding: 3px 9px; border-radius: 12px; border: 1px solid rgba(139,92,246,.35); background: rgba(139,92,246,.07); color: #7c3aed; cursor: pointer; }
.sca-chip:hover { background: rgba(139,92,246,.15); }
[data-theme="dark"] .sca-chip { color: #c4b5fd; }
.sca-richiesta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px; font: inherit; font-size: .84rem; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border-color, #d1d5db); background: var(--input-bg, var(--bg-primary, #fff)); color: var(--text-primary, #111827); }
.sca-richiesta:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.18); }
.sca-riga { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sca-nota { flex: 1; font-size: .72rem; color: var(--text-secondary, #6b7280); }
.sca-genera { font: inherit; font-size: .82rem; font-weight: 600; border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1); display: inline-flex; align-items: center; gap: 6px; }
.sca-genera:disabled { opacity: .55; cursor: default; }
.sca-risultato { margin-top: 10px; border-top: 1px solid var(--border-color, #e5e7eb); padding-top: 10px; }
.sca-testo { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; background: var(--bg-secondary, #f9fafb); border-radius: 8px;
  padding: 8px 10px; min-height: 20px; line-height: 1.45; }
.sca-testo.sca-attesa { min-height: 0; padding: 0; background: none; }
.sca-stato { font-size: .74rem; color: var(--text-secondary, #6b7280); margin: 6px 0 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sca-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sca-azioni button { font: inherit; font-size: .78rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-color, #d1d5db); background: var(--bg-primary, #fff);
  color: var(--text-primary, #111827); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sca-azioni button:hover { border-color: #8b5cf6; color: #7c3aed; }
.sca-azioni .sca-usa { background: #8b5cf6; border-color: #8b5cf6; color: #fff; font-weight: 600; }
.sca-azioni .sca-usa:hover { background: #7c3aed; color: #fff; }
.sca-azioni [hidden], .sca-risultato[hidden] { display: none !important; }

/* pulsante nella barra della chat (stessa forma degli altri: wa-toolbar-btn) */
.wa-toolbar-btn--ai { color: #8b5cf6 !important; }

/* finestra "Nuova conversazione": "Scrivi con l'AI" nella barra e la bacchetta dei campi nell'angolo della casella */
.compose-tool-btn.compose-ai-btn { color: #7c3aed; }
.compose-tool-btn.compose-ai-btn i { color: #8b5cf6; }
.compose-msg-wrap { position: relative; }
.compose-msg-wrap #compose-message { display: block; padding-right: 50px; }
.compose-campi-btn { position: absolute; right: 18px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(99,102,241,.12); color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: background .15s; }
.compose-campi-btn:hover { background: rgba(99,102,241,.24); }
[data-theme="dark"] .compose-campi-btn { color: #a5b4fc; background: rgba(129,140,248,.18); }