/* Chat «Maxim · assistente AI» (public/assets/chat.js). Si carica solo sulle pagine con la chat (CHAT_ATTIVA="1").
   lucabartolini.com: usa i token di sito.css (--primario rosa-rosso, --scuro, --inchiostro, --filo, --sans): testata scura
   con il filo del colore del marchio, bolle chiare, pulsante del colore primario.
   Nessuna animazione continua; con prefers-reduced-motion nessuna animazione. Sul telefono il pannello è a tutto schermo. */

.posto-chat, .mx-pannello { --filo-chat: linear-gradient(120deg, var(--primario), #ff6a8e 55%, var(--primario-scuro)); }
/* Con il pulsante WhatsApp di Kristina (KRISTINA_WHATSAPP) la chat sta sopra, non sopra di lui */
.kristina ~ .posto-chat { bottom: 84px; }
.posto-chat { position: fixed; right: 20px; bottom: 20px; z-index: 70; font-family: var(--sans); }
.posto-chat[hidden] { display: none; }

/* ——— Pulsante ——— */
.mx-lancio { display: flex; align-items: center; gap: 11px; margin: 0; padding: 7px 18px 7px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #0e1016; color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 14px 36px rgba(9,10,15,.28), 0 2px 6px rgba(9,10,15,.18); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; isolation: isolate; }
.mx-lancio::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--filo-chat); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; transition: opacity .18s ease; }
.mx-lancio:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(9,10,15,.34), 0 2px 6px rgba(9,10,15,.2); color: #fff; }
.mx-lancio:hover::after { opacity: 1; }
.mx-lancio:focus-visible { outline: 3px solid var(--primario-chiaro); outline-offset: 3px; }
.mx-lancio__avatar { flex: none; }
.mx-lancio__testi { display: grid; line-height: 1.15; }
.mx-lancio__testi strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.mx-lancio__testi small { font-size: 11.5px; color: #aeb5c4; letter-spacing: .02em; }
.posto-chat[data-aperta] .mx-lancio { display: none; }

/* Avatar: il marchio del sito su un disco scuro con l'anello del colore primario (non una persona) */
.mx-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #1f2433, #0b0c12 70%); }
.mx-avatar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--filo-chat); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mx-avatar__marchio { width: 24px; height: auto; }
.mx-avatar__ai { position: absolute; right: -4px; bottom: -3px; padding: 2px 4px 1px; border-radius: 5px; background: var(--primario); color: #fff; font: 800 8.5px/1 var(--sans); letter-spacing: .08em; box-shadow: 0 0 0 2px #0e1016; }

/* ——— Pannello ——— */
.mx-pannello { position: fixed; right: 20px; bottom: 20px; z-index: 71; display: flex; flex-direction: column; width: min(410px, calc(100vw - 40px)); height: min(660px, calc(100vh - 40px)); height: min(660px, calc(100dvh - 40px)); border-radius: 18px; overflow: hidden; background: #fff; color: var(--testo); box-shadow: 0 30px 80px rgba(9,10,15,.32), 0 4px 14px rgba(9,10,15,.14); border: 1px solid rgba(9,10,15,.08); font-size: 15px; line-height: 1.5; transform-origin: bottom right; }
.mx-pannello[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mx-pannello:not([hidden]) { animation: mx-entra .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes mx-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
}

.mx-testata { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: #0e1016; color: #fff; }
.mx-testata::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--filo-chat); opacity: .9; }
.mx-testata__testi { min-width: 0; flex: 1; line-height: 1.2; }
.mx-testata__nome { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.mx-testata__sotto { margin: 2px 0 0; font-size: 12.5px; color: #aeb5c4; }
.mx-chiudi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
.mx-chiudi:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.mx-chiudi:focus-visible { outline: 3px solid var(--primario-chiaro); outline-offset: 2px; }
.mx-chiudi svg { width: 18px; height: 18px; }

/* ——— Conversazione ——— */
.mx-registro { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; background: linear-gradient(180deg, #f7f8fa, var(--fondo-caldo)); display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .mx-registro { scroll-behavior: auto; } }
.mx-registro:focus-visible { outline: 3px solid var(--primario); outline-offset: -3px; }
.mx-giorno { align-self: center; margin: 0 0 4px; padding: 3px 10px; border-radius: 999px; background: rgba(15,18,30,.05); color: var(--muto); font-size: 11.5px; letter-spacing: .03em; }

.mx-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; overflow-wrap: anywhere; white-space: normal; }
.mx-msg p { margin: 0; }
.mx-msg p + p { margin-top: .55em; }
.mx-msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--filo); border-top-left-radius: 4px; color: var(--testo); box-shadow: 0 1px 2px rgba(15,18,30,.04); }
.mx-msg--utente { align-self: flex-end; background: var(--primario); color: #fff; border-top-right-radius: 4px; white-space: pre-wrap; }
.mx-msg a { color: var(--primario-scuro); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; }
.mx-msg a:hover { color: var(--primario); text-decoration-thickness: 2px; }
.mx-msg--errore { border-color: #f3c4cc; background: #fff7f8; }
.mx-autore { display: block; margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: var(--muto); letter-spacing: .02em; }

/* Tre puntini finché non arriva il primo pezzo di risposta (si animano solo senza reduced-motion) */
.mx-scrive { display: inline-flex; gap: 4px; padding: 4px 0; }
.mx-scrive span { width: 7px; height: 7px; border-radius: 50%; background: #b3b9c6; }
@media (prefers-reduced-motion: no-preference) {
  .mx-scrive span { animation: mx-punto 1.2s ease-in-out infinite; }
  .mx-scrive span:nth-child(2) { animation-delay: .15s; }
  .mx-scrive span:nth-child(3) { animation-delay: .3s; }
  @keyframes mx-punto { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
}

/* Domande pronte */
.mx-spunti { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.mx-spunto { padding: 7px 12px; border-radius: 999px; border: 1px solid #f3c4cc; background: #fff; color: var(--primario-scuro); font: 600 13px/1.25 var(--sans); cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.mx-spunto:hover { background: var(--primario-chiaro); border-color: var(--primario); }
.mx-spunto:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }

/* Riquadri: richiesta registrata e alternative */
.mx-riquadro { align-self: stretch; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--filo); background: #fff; font-size: 14px; }
.mx-riquadro--ok { border-color: #b7e4c7; background: #f2fbf5; }
.mx-riquadro__titolo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 800; color: var(--inchiostro); }
.mx-riquadro__titolo svg { width: 18px; height: 18px; color: #15803d; flex: none; }
.mx-riquadro p { margin: 0; }
.mx-numero { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mx-alternative { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mx-alt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--filo-forte); background: #fff; color: var(--inchiostro); font: 600 13.5px/1.2 var(--sans); text-decoration: none; }
.mx-alt:hover { border-color: var(--primario); color: var(--primario-scuro); }
.mx-alt .icona-tonda { width: 22px; height: 22px; }

/* ——— Scrittura ——— */
.mx-piede { border-top: 1px solid var(--filo); background: #fff; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.mx-modulo { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--filo-forte); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.mx-modulo:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(216,19,71,.14); }
.mx-campo { flex: 1; min-height: 24px; max-height: 132px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--inchiostro); font: 400 16px/1.45 var(--sans); }
.mx-campo::placeholder { color: #8a90a0; }
.mx-invia { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--primario); color: #fff; cursor: pointer; transition: background .15s, opacity .15s; }
.mx-invia:hover { background: var(--primario-scuro); }
.mx-invia:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.mx-invia[disabled] { opacity: .45; cursor: not-allowed; }
.mx-invia svg { width: 18px; height: 18px; }
.mx-conta { margin: 4px 4px 0; font-size: 11.5px; color: var(--muto); text-align: right; }
.mx-conta[data-oltre] { color: #be123c; font-weight: 700; }
.mx-avviso { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--muto); }
.mx-avviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mx-avviso a:hover { color: var(--primario); }
.mx-avviso strong { color: var(--testo); font-weight: 700; }

/* ——— Telefono: pannello a tutto schermo, pulsante compatto ——— */
@media (max-width: 560px) {
  .posto-chat { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mx-lancio { padding: 6px 14px 6px 6px; gap: 9px; }
  .mx-lancio .mx-avatar { width: 38px; height: 38px; }
  .mx-lancio__testi strong { font-size: 14px; }
  .mx-pannello { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .mx-testata { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .mx-msg { max-width: 92%; }
  html.mx-bloccata, html.mx-bloccata body { overflow: hidden; }
}

@media print { .posto-chat, .mx-pannello { display: none !important; } }