/*
 * Studio Arfia — mazzo/chatbot.css · v0.103.0 · 04/11/2026
 * I mockup del mazzo della pagina Chatbot (inc/mazzo/chatbot.php): l'assistente AI di Villa Castelmora, col bordeaux e la
 * calce della villa (gli stessi del caso «Domande ripetute»). Le primitive (vetro, titoletto, entrata dei vetri) stanno in
 * mazzo.css. Tutto in em della scena: da telefono la scena è alta 272px, quindi ogni mockup sta dentro ~27 × 20 em.
 * La vita, quando la carta arriva (.is-viva): le fonti entrano una alla volta, la riga del listino si evidenzia e il filo porta
 * alla risposta; i temi si spuntano dentro il confine e la domanda sullo sconto va da Irene; le prove si colorano; la risposta
 * di prima si barra, sale quella di adesso e le settimane crescono.
 * v0.105 (Rami, 04/11: «i disegni dovrebbero essere più chiari»): rifatte la 01, la 02 e la 04; la 03 resta.
 */
.as-mz-cb { --vb: #6E1F2B; --vb-chiaro: #F4EFE7; --verde: #1F9D55; --ai1: #7B61FF; --ai2: #3E8BFF; max-width: 27em; margin-inline: auto; }
@media (min-width: 900px) { .as-mz-cb { max-width: 29em; } }
.as-mz-cb :is(b, small, em, i) { font-style: normal; }
.as-mz-cb__ic { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-mz-cb__ai { display: inline-grid; place-items: center; height: 1.45em; margin-right: .4em; padding: 0 .42em; border-radius: .45em; background: linear-gradient(135deg, var(--ai1), var(--ai2)); color: #fff; font-size: .78em; font-weight: 700; letter-spacing: .04em; vertical-align: .08em; }
.as-mz-cb__bot { flex: none; display: block; width: 2.4em; height: 2.4em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .12em #fff, 0 .3em .7em -.2em rgba(110, 31, 43, .35); }
.as-mz-cb__bot .as-lg { display: block; width: 100%; height: 100%; }
.as-mz-cb__volto { flex: none; display: block; width: 2.2em; height: 2.2em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .12em #fff; }
.as-mz-cb__volto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@supports (corner-shape: squircle) { .as-mz-cb :is(.as-mz-cb__recinto, .as-mz-cb__persona, .as-mz-cb__tempo) { corner-shape: squircle; } }

/* comuni: i messaggi, l'avatar dell'assistente, il segno di spunta */
.as-mz-cb__ok { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--verde); color: #fff; }
.as-mz-cb__ok .as-mz-cb__ic { width: .95em; height: .95em; stroke-width: 2.6; }
.as-mz-cb__msg { max-width: 88%; padding: .5em .75em .55em; font-size: .9em; line-height: 1.35; color: #1C1C1E; }
.as-mz-cb__msg.is-tu { align-self: flex-end; border-radius: 1.1em 1.1em .35em 1.1em; background: var(--vb); color: #fff; }
.as-mz-cb__msg.is-bot { align-self: flex-start; border-radius: 1.1em 1.1em 1.1em .35em; background: #fff; box-shadow: 0 .06em .14em rgba(28, 25, 23, .08), 0 0 0 1px rgba(28, 25, 23, .05); }

/* 01 · impara: una scheda sola, dall'alto in basso. Quello che ci date (letto con la barra), quello che adesso sa (i fatti) */
.as-mz-cb--impara { max-width: 28em; }
.as-mz-cb__impara { padding: .8em .9em .95em; }
.as-mz-cb__impara-h { display: flex; align-items: center; gap: .6em; padding-bottom: .6em; border-bottom: 1px solid rgba(28, 28, 30, .08); }
.as-mz-cb__impara-h .as-mz-cb__bot { width: 2.2em; height: 2.2em; }
.as-mz-cb__impara-h > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.as-mz-cb__impara-h b { font-size: .98em; font-weight: 650; letter-spacing: -.01em; color: #1C1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-mz-cb__impara-h small { font-size: .76em; color: rgba(28, 28, 30, .55); white-space: nowrap; }
.as-mz-cb__stato { position: relative; flex: none; display: grid; font-size: .74em; font-weight: 650; }
.as-mz-cb__stato > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .35em; height: 2em; padding: 0 .75em; border-radius: 1em; white-space: nowrap; }
.as-mz-cb__stato .is-prima { background: #ECE6FF; color: #4A3AA8; opacity: 0; }
.as-mz-cb__stato .is-prima i { width: .5em; height: .5em; border-radius: 50%; background: #7B61FF; }
.as-mz-cb__stato .is-dopo { background: #DDF4E6; color: #146C3B; }
.as-mz-cb__stato .is-dopo .as-mz-cb__ic { width: 1.15em; height: 1.15em; stroke-width: 2.6; }
.as-mz-cb__sez { margin: .75em 0 .35em !important; }
.as-mz-cb__sez.is-sa { margin-top: .85em !important; color: #146C3B; }
.as-mz-cb .as-mz-cb__mat { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; } /* due classi: ul[class] { padding: 0 } del tema pesa (Errori 1.85) */
.as-mz-cb__mat li { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.2em auto; align-items: center; gap: .6em; padding: .42em .55em; border-radius: calc(.8em * var(--as-brm)); background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 30, .06); }
.as-mz-cb__mat li > .as-mz-cb__ic { color: var(--vb); }
.as-mz-cb__mat li > span { display: grid; min-width: 0; line-height: 1.2; }
.as-mz-cb__mat b { font-size: .86em; font-weight: 600; color: #1C1C1E; white-space: nowrap; }
.as-mz-cb__mat small { font-size: .72em; color: rgba(28, 28, 30, .55); white-space: nowrap; }
.as-mz-cb__letto { display: block; height: .4em; overflow: hidden; border-radius: 1em; background: rgba(120, 120, 128, .16); }
.as-mz-cb__letto i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B7BFF, #3E8BFF); transform-origin: 0 50%; }
.as-mz-cb__mat .as-mz-cb__ok { width: 1.3em; height: 1.3em; }
.as-mz-cb__fatti { display: flex; flex-wrap: wrap; gap: .32em; }
.as-mz-cb__fatti span { display: inline-flex; align-items: center; gap: .3em; padding: .34em .65em .34em .45em; border-radius: 1em; background: #DDF4E6; color: #0F5130; font-size: .78em; font-weight: 600; white-space: nowrap; }
.as-mz-cb__fatti .as-mz-cb__ic { width: 1.1em; height: 1.1em; stroke-width: 2.6; color: var(--verde); }
@supports (corner-shape: squircle) { .as-mz-cb__mat li { corner-shape: squircle; } }

/* 02 · confini: il confine disegnato. Dentro, a cosa risponde da solo; fuori, la domanda che passa a Irene */
.as-mz-cb--confini { display: grid; gap: .7em; max-width: 29em; }
.as-mz-cb__recinto { padding: .75em .8em .8em; border-radius: calc(1.1em * var(--as-brm)); background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); outline: 2px dashed rgba(31, 157, 85, .75); outline-offset: -.35em; }
.as-mz-cb__recinto-h { display: flex; align-items: center; gap: .5em; margin: .1em .2em .55em !important; font-size: .82em; font-weight: 650; color: #146C3B; }
.as-mz-cb__recinto-h .as-mz-cb__ok { width: 1.4em; height: 1.4em; }
.as-mz-cb__temi { display: flex; flex-wrap: wrap; gap: .35em; padding: 0 .2em; }
.as-mz-cb__temi span { display: inline-flex; align-items: center; gap: .35em; padding: .38em .7em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px rgba(31, 157, 85, .22); font-size: .8em; font-weight: 500; color: #1C1C1E; white-space: nowrap; }
.as-mz-cb__temi span::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--verde); }
.as-mz-cb__fuori { padding: 0 .2em; }
.as-mz-cb__fuori-h { display: flex; align-items: center; gap: .45em; margin-bottom: .45em !important; font-size: .82em; font-weight: 650; color: #4A3AA8; }
.as-mz-cb__fuori-h .as-mz-cb__ic { width: 1.2em; height: 1.2em; }
.as-mz-cb__fuori-r { display: grid; grid-template-columns: minmax(0, 1fr) 1.8em auto; align-items: center; gap: .3em; }
.as-mz-cb__fuori-r .as-mz-cb__msg { max-width: none; justify-self: stretch; font-size: .82em; }
.as-mz-cb__va { display: grid; place-items: center; color: #8B7BFF; }
.as-mz-cb__va .as-mz-cb__ic { width: 1.3em; height: 1.3em; stroke-width: 2.2; }
.as-mz-cb__persona { display: flex; align-items: center; gap: .5em; padding: .45em .8em .45em .45em; border-radius: calc(.9em * var(--as-brm)); background: #fff; box-shadow: 0 0 0 1.5px #8B7BFF, 0 .5em 1.2em -.7em rgba(123, 97, 255, .55); }
.as-mz-cb__persona .as-mz-cb__volto { width: 2em; height: 2em; }
.as-mz-cb__persona > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.2; }
.as-mz-cb__persona b { font-size: .86em; font-weight: 650; color: #1C1C1E; }
.as-mz-cb__persona small { font-size: .7em; color: rgba(28, 28, 30, .6); white-space: nowrap; }

/* 03 · la prova: Sofia prova, il sito è ancora spento */
.as-mz-cb__prova { padding: .85em 1em .9em; }
.as-mz-cb__prova-h { display: flex; align-items: center; gap: .65em; padding-bottom: .65em; border-bottom: 1px solid rgba(28, 28, 30, .08); }
.as-mz-cb__prova-h > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.as-mz-cb__prova-h b { font-size: 1em; font-weight: 650; color: #1C1C1E; }
.as-mz-cb__prova-h small { font-size: .8em; color: rgba(28, 28, 30, .58); }
.as-mz-cb__online { display: inline-flex; align-items: center; gap: .45em; font-size: .78em; font-weight: 600; color: rgba(28, 28, 30, .55); white-space: nowrap; }
.as-mz-cb__switch { position: relative; display: block; width: 2.6em; height: 1.55em; border-radius: 1em; background: rgba(120, 120, 128, .22); }
.as-mz-cb__switch::after { content: ""; position: absolute; left: .13em; top: .13em; width: 1.29em; height: 1.29em; border-radius: 50%; background: #fff; box-shadow: 0 .12em .35em rgba(0, 0, 0, .18); }
.as-mz-cb__test { list-style: none; margin: .4em 0 0; padding: 0; }
.as-mz-cb__test li { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .5em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .9em; color: #1C1C1E; }
.as-mz-cb__test li > span { min-width: 0; }
.as-mz-cb__test em { flex: none; display: inline-flex; align-items: center; gap: .3em; height: 1.9em; padding: 0 .65em 0 .5em; border-radius: 1em; font-size: .82em; font-weight: 600; }
.as-mz-cb__test em .as-mz-cb__ic { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.as-mz-cb__test .is-giusta em { background: #DDF4E6; color: #146C3B; }
.as-mz-cb__test .is-ritocco em { background: #FDE3D4; color: #A7410C; }
.as-mz-cb__voto { display: grid; gap: .45em; margin-top: .7em !important; font-size: .86em; color: rgba(28, 28, 30, .7); }
.as-mz-cb__voto b { font-weight: 700; color: #1C1C1E; }
.as-mz-cb__barra { display: block; height: .45em; overflow: hidden; border-radius: 1em; background: rgba(120, 120, 128, .16); }
.as-mz-cb__barra i { display: block; width: 94%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34C759, var(--verde)); transform-origin: 0 50%; }

/* 04 · migliora: la risposta di PRIMA e quella di ADESSO, e le settimane che salgono */
.as-mz-cb--migliora { display: grid; grid-template-columns: minmax(0, 1fr) 9.6em; align-items: stretch; gap: .6em; max-width: 30em; }
.as-mz-cb__rilegge { display: flex; flex-direction: column; gap: .35em; padding: .8em .8em .8em; }
.as-mz-cb__quando { margin-bottom: .15em !important; }
.as-mz-cb__rilegge .as-mz-cb__msg { font-size: .84em; }
.as-mz-cb__rilegge .as-mz-cb__msg.is-bot { background: var(--vb-chiaro); box-shadow: none; }
.as-mz-cb__tag { display: inline-flex; align-items: center; gap: .3em; margin-top: .25em !important; font-size: .68em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.as-mz-cb__tag .as-mz-cb__ic { width: 1.15em; height: 1.15em; stroke-width: 2.4; }
.as-mz-cb__tag.is-prima { color: rgba(28, 28, 30, .45); }
.as-mz-cb__tag.is-dopo { color: #146C3B; }
.as-mz-cb__msg.is-prima { color: rgba(28, 28, 30, .45); background: rgba(120, 120, 128, .1) !important; text-decoration: line-through; text-decoration-color: #C2410C; text-decoration-thickness: 1.5px; } /* barrata anche su due righe (da telefono va a capo) */
.as-mz-cb__msg.is-dopo { box-shadow: 0 0 0 1.5px var(--verde), 0 .5em 1.2em -.7em rgba(31, 157, 85, .5) !important; background: #fff !important; }
.as-mz-cb__tempo { display: flex; flex-direction: column; padding: .8em .7em .7em; }
.as-mz-cb__barre { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: .35em; min-height: 9em; }
.as-mz-cb__barre span { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; }
.as-mz-cb__barre b { font-size: .7em; font-weight: 700; color: #1C1C1E; font-variant-numeric: tabular-nums; }
.as-mz-cb__barre i { align-self: end; width: 100%; height: calc((var(--v) - 80) * 5%); min-height: .6em; margin-top: .25em; border-radius: .35em .35em .15em .15em; background: linear-gradient(180deg, #34C759, var(--verde)); transform-origin: 50% 100%; }
.as-mz-cb__barre span:not(:last-child) i { background: linear-gradient(180deg, rgba(52, 199, 89, .55), rgba(31, 157, 85, .55)); }
.as-mz-cb__barre small { margin-top: .3em; font-size: .62em; color: rgba(28, 28, 30, .55); white-space: nowrap; }

/* ══ LA VITA, quando la carta arriva ══ */
.as-pp-mazzo--viva :is(.as-mz-cb__temi span, .as-mz-cb__fuori-r > *, .as-mz-cb__test li, .as-mz-cb__rilegge > *, .as-mz-cb__barre i) { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
/* 01: «Sta imparando», i tre materiali si leggono uno alla volta (barra, spunta), poi escono i fatti e lo stato diventa «Pronto» */
.as-pp-mazzo--viva .as-mz-cb__letto i { transition: transform .8s cubic-bezier(.45, 0, .2, 1); transition-delay: calc(.45s + var(--k) * .55s); }
.as-pp-mazzo--viva .as-mz-cb__mat li { --k: 0; }
.as-pp-mazzo--viva .as-mz-cb__mat li:nth-child(2) { --k: 1; }
.as-pp-mazzo--viva .as-mz-cb__mat li:nth-child(3) { --k: 2; }
.as-pp-mazzo--viva .as-mz-cb__letto i { transition-delay: calc(.45s + var(--k) * .55s); }
.as-pp-mazzo--viva .as-mz-cb__mat .as-mz-cb__ok { transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.2s + var(--k) * .55s); }
.as-pp-mazzo--viva .as-mz-cb__fatti span { transition: opacity .4s ease, transform .55s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(2.5s + var(--k) * .14s); }
.as-pp-mazzo--viva .as-mz-cb__sez.is-sa { transition: opacity .4s ease 2.35s; }
.as-pp-mazzo--viva .as-mz-cb__stato > span { transition: opacity .35s ease 3.3s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__letto i { transform: scaleX(0); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__mat .as-mz-cb__ok { opacity: 0; transform: scale(.2); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__fatti span { opacity: 0; transform: translate3d(0, .5em, 0) scale(.9); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__sez.is-sa { opacity: 0; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__stato .is-prima { opacity: 1; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__stato .is-dopo { opacity: 0; }
.as-pp-mazzo--viva .as-pp-mazzo__card.is-viva .as-mz-cb__stato .is-prima { opacity: 0; }
/* 02: i temi si accendono dentro il confine, poi la domanda esce e va da Irene */
.as-pp-mazzo--viva .as-mz-cb__temi span:nth-child(1) { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-cb__temi span:nth-child(2) { transition-delay: .45s; }
.as-pp-mazzo--viva .as-mz-cb__temi span:nth-child(3) { transition-delay: .55s; }
.as-pp-mazzo--viva .as-mz-cb__temi span:nth-child(4) { transition-delay: .65s; }
.as-pp-mazzo--viva .as-mz-cb__temi span:nth-child(5) { transition-delay: .75s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__temi span { opacity: 0; transform: scale(.8); }
.as-pp-mazzo--viva .as-mz-cb__fuori-r > :nth-child(1) { transition-delay: 1.15s; }
.as-pp-mazzo--viva .as-mz-cb__fuori-r > :nth-child(2) { transition-delay: 1.55s; }
.as-pp-mazzo--viva .as-mz-cb__fuori-r > :nth-child(3) { transition-delay: 1.8s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__fuori-r > * { opacity: 0; transform: translate3d(-.6em, 0, 0); }
/* 03: le prove si colorano */
.as-pp-mazzo--viva .as-mz-cb__test li:nth-child(1) { transition-delay: .35s; }
.as-pp-mazzo--viva .as-mz-cb__test li:nth-child(2) { transition-delay: .6s; }
.as-pp-mazzo--viva .as-mz-cb__test li:nth-child(3) { transition-delay: .85s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__test li { opacity: 0; transform: translate3d(0, .6em, 0); }
.as-pp-mazzo--viva .as-mz-cb__barra i { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) 1.1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__barra i { transform: scaleX(0); }
/* 04: la risposta di prima si barra, sale quella di adesso, crescono le settimane */
.as-pp-mazzo--viva .as-mz-cb__rilegge > :nth-child(2) { transition-delay: .3s; }
.as-pp-mazzo--viva .as-mz-cb__rilegge > :nth-child(3), .as-pp-mazzo--viva .as-mz-cb__rilegge > :nth-child(4) { transition-delay: .55s; }
.as-pp-mazzo--viva .as-mz-cb__rilegge > :nth-child(5), .as-pp-mazzo--viva .as-mz-cb__rilegge > :nth-child(6) { transition-delay: 1.45s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__rilegge > :not(:first-child) { opacity: 0; transform: translate3d(0, .7em, 0); }
.as-pp-mazzo--viva .as-mz-cb__msg.is-prima { transition: opacity .45s ease .55s, transform .6s cubic-bezier(.2, .8, .2, 1) .55s, text-decoration-color .4s ease 1.1s; }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__msg.is-prima { text-decoration-color: transparent; }
.as-pp-mazzo--viva .as-mz-cb__barre i { transition-duration: .3s, .8s; transition-delay: calc(1.7s + var(--k) * .18s); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-mz-cb__barre i { transform: scaleY(0); }