/*
 * Studio Arfia — casi/chat.css · v0.94.0 · 03/11/2026
 * Il caso «Domande ripetute» di /soluzioni/ (inc/casi/chat.php): il sito vero di Villa Castelmora aperto in Safari, con la
 * chat dell'assistente che si apre e lavora. Un iPhone solo (secondo giro di Rami: via il telefono della titolare).
 * Misure: la scena è una tela 440 × 600 in cqw (da telefono si rimpicciolisce uguale); dentro il telefono tutto è in punti
 * dello schermo vero (var(--u), il kit dei dispositivi). Da computer la tela sborda di 30px sopra e sotto nell'imbottitura
 * della scena dei casi (così il telefono è più grande senza che lo zoom lo rimpicciolisca).
 * Caratteri: il sito della villa in Cardo (serif aldino) e Jost (grotesk geometrico, maiuscolo spaziato), come le ville
 * toscane vere; la chat e Safari nel font di sistema, come i widget e iOS veri. Niente Instrument Serif (Rami: «molto AI»).
 * Colori della villa: bordeaux #6E1F2B, calce #F4EFE7.
 * Movimento: UNA volta, 14 s, sotto .as-demo-vivo (fuori schermo .as-demo-pausa lo ferma); l'ultimo fotogramma è la
 * schermata da fermo (la chat con la visita fissata). Niente backdrop-filter sui telefoni (i lampi di Safari, Errori 1.78):
 * il vetro sfocato di Safari solo con un puntatore.
 */
@font-face { font-family: 'Cardo Castelmora'; src: url('../../fonts/casi/chat-cardo-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Jost Castelmora'; src: url('../../fonts/casi/chat-jost-variabile.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: block; }

/* ── La scena ── */
.as-k-chat { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 440 / 600; container-type: inline-size; color: #1c1917; } /* il tetto: senza JavaScript la scatola è larga quanto la colonna */
@media (min-width: 1000px) { .as-k-chat { margin-block: -30px; } }
.as-k-chat *, .as-k-chat *::before, .as-k-chat *::after { box-sizing: border-box; }
.as-k-chat p { margin: 0; }
.as-k-chat__ic { display: block; flex: none; width: 100%; height: 100%; }
/* il telefono: 64cqw di larghezza (l'iPhone del kit è 20,512em), centrato */
.as-k-chat__tel { position: absolute; left: 18cqw; top: 0; font-size: calc(64cqw / 20.5124); }

/* ── Lo schermo ── */
.as-k-chat__app { position: absolute; inset: 0; overflow: hidden; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }

/* Il sito della villa: la hero della home, con la tipografia delle ville vere */
.as-k-chat__sito { position: absolute; inset: 0; z-index: 1; background: #0b0c0b; color: #fff; font-family: 'Cardo Castelmora', 'Iowan Old Style', Palatino, Georgia, serif; }
.as-k-chat__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.as-k-chat__ombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 10, .62) 0%, rgba(8, 12, 10, .1) 28%, rgba(8, 12, 10, .44) 50%, rgba(8, 12, 10, .9) 100%); }
.as-k-chat__testa { position: absolute; top: calc(66 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); }
.as-k-chat__marchio { flex: 1; display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.as-k-chat__marchio svg { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.as-k-chat__lingua { font-family: 'Jost Castelmora', 'Futura', 'Avenir Next', sans-serif; font-weight: 500; font-size: calc(11 * var(--u)); letter-spacing: .16em; opacity: .85; }
.as-k-chat__menu { width: calc(22 * var(--u)); height: calc(9 * var(--u)); border-top: calc(1.2 * var(--u)) solid #fff; border-bottom: calc(1.2 * var(--u)) solid #fff; }
.as-k-chat__eroe { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(170 * var(--u)); }
.as-k-chat__h1 { font-size: calc(47 * var(--u)); line-height: 1.04; letter-spacing: -.012em; text-shadow: 0 calc(2 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .55), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .3); }
.as-k-chat__riga { margin-top: calc(14 * var(--u)) !important; max-width: calc(330 * var(--u)); text-wrap: pretty; font-size: calc(17 * var(--u)); line-height: 1.42; color: rgba(255, 255, 255, .92); text-shadow: 0 calc(1 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .6); }
.as-k-chat__azioni { display: flex; gap: calc(26 * var(--u)); margin-top: calc(24 * var(--u)) !important; font-family: 'Jost Castelmora', 'Futura', 'Avenir Next', sans-serif; }
.as-k-chat__azioni span { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); padding-bottom: calc(7 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(255, 255, 255, .85); font-weight: 500; font-size: calc(11.5 * var(--u)); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 calc(1 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .6); }
.as-k-chat__azioni span + span { border-bottom-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .85); }
.as-k-chat__azioni span::after { content: "↗"; font-size: calc(12 * var(--u)); letter-spacing: 0; }

/* La bolla della chat e l'invito di Sofia */
.as-k-chat__lancia { position: absolute; z-index: 6; right: calc(18 * var(--u)); bottom: calc(92 * var(--u)); display: grid; place-items: center; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; background: #6E1F2B; color: #fff; box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, .6), inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .14); opacity: 0; }
.as-k-chat__lancia .as-k-chat__ic { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.as-k-chat__lancia::after { content: ""; position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: #34C759; box-shadow: 0 0 0 calc(2.5 * var(--u)) #6E1F2B; }
.as-k-chat__invito { position: absolute; z-index: 5; right: calc(86 * var(--u)); bottom: calc(95 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); width: calc(238 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)); background: #fff; color: #1c1917; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, .55); opacity: 0; }
.as-k-chat__invito-volto { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; object-fit: cover; }
.as-k-chat__invito-t { display: grid; gap: calc(1 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.3; color: rgba(28, 25, 23, .62); }
.as-k-chat__invito-t b { font-size: calc(14 * var(--u)); font-weight: 600; color: #1c1917; }
.as-k-chat__velo { position: absolute; inset: 0; z-index: 7; background: rgba(6, 8, 7, .52); }

/* La chat: il foglio sopra la barra di Safari */
.as-k-chat__foglio { position: absolute; z-index: 8; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(110 * var(--u)); bottom: calc(78 * var(--u)); display: flex; flex-direction: column; overflow: hidden; border-radius: calc(30 * var(--u)); background: #FAF7F2; color: #1c1917; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, .7), 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .1); }
.as-k-chat__intesta { flex: none; display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(13 * var(--u)); background: #6E1F2B; color: #fff; }
.as-k-chat__avatar { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, .2); }
.as-k-chat__avatar svg, .as-k-chat__bot-av svg { display: block; width: 100%; height: 100%; }
.as-k-chat__chi { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--u)); }
.as-k-chat__chi b { font-size: calc(16.5 * var(--u)); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.as-k-chat__chi small { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.2; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.as-k-chat__chi small i { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #5BD68A; }
.as-k-chat__chiudi { flex: none; display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .14); }
.as-k-chat__chiudi .as-k-chat__ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* I messaggi: la lista è ancorata in basso, i nuovi spingono su i vecchi (come una chat vera) */
.as-k-chat__flusso { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.as-k-chat__lista { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100%; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
/* il benvenuto (come nei widget veri): la villa e Sofia, in cima finché i messaggi non lo spingono via */
.as-k-chat__benvenuto { flex: none; overflow: hidden; border-radius: calc(20 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(28, 25, 23, .06), 0 0 0 calc(.5 * var(--u)) rgba(28, 25, 23, .08); }
.as-k-chat__benvenuto-foto { display: block; height: calc(96 * var(--u)); background-size: cover; background-position: 50% 55%; }
.as-k-chat__benvenuto-c { padding: calc(11 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)); }
.as-k-chat__benvenuto-h { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.as-k-chat__benvenuto-t { display: flex; align-items: flex-start; gap: calc(9 * var(--u)); margin-top: calc(8 * var(--u)) !important; font-size: calc(12.5 * var(--u)); line-height: 1.38; color: rgba(28, 25, 23, .7); }
.as-k-chat__benvenuto-t img { flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-top: calc(1 * var(--u)); border-radius: 50%; object-fit: cover; }
.as-k-chat__giorno { align-self: center; margin: auto 0 0 !important; padding-top: calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 500; color: rgba(28, 25, 23, .44); }
.as-k-chat__v { display: grid; grid-template-rows: 1fr; }
.as-k-chat__v > div { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.as-k-chat__v > div > * { margin-top: calc(8 * var(--u)) !important; }
.as-k-chat__v.is-4 { grid-template-rows: 0fr; opacity: 0; } /* i puntini: alla fine non ci sono più */
/* le risposte dell'assistente: il segno della villa in basso a sinistra */
.as-k-chat__bot { display: flex; align-items: flex-end; gap: calc(7 * var(--u)); }
.as-k-chat__bot-av { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 calc(.5 * var(--u)) rgba(110, 31, 43, .25); }
.as-k-chat__bot-av.is-vuoto { box-shadow: none; }
.as-k-chat__msg { max-width: 84%; padding: calc(9 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.37; letter-spacing: -.012em; text-wrap: pretty; }
.as-k-chat__bot .as-k-chat__msg { max-width: calc(88% - calc(33 * var(--u))); }
.as-k-chat__msg.is-bot { border-radius: calc(19 * var(--u)) calc(19 * var(--u)) calc(19 * var(--u)) calc(6 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(28, 25, 23, .06), 0 0 0 calc(.5 * var(--u)) rgba(28, 25, 23, .08); }
.as-k-chat__msg.is-tu { align-self: flex-end; border-radius: calc(19 * var(--u)) calc(19 * var(--u)) calc(6 * var(--u)) calc(19 * var(--u)); background: #6E1F2B; color: #fff; text-wrap: balance; }
.as-k-chat__rapide { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); padding-left: calc(33 * var(--u)); }
.as-k-chat__rapide span { padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(110, 31, 43, .3); color: #6E1F2B; font-size: calc(12.5 * var(--u)); font-weight: 500; white-space: nowrap; }
.as-k-chat__scrive { display: flex; gap: calc(4 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); border-radius: calc(19 * var(--u)) calc(19 * var(--u)) calc(19 * var(--u)) calc(6 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(28, 25, 23, .06), 0 0 0 calc(.5 * var(--u)) rgba(28, 25, 23, .08); }
.as-k-chat__scrive i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #A8A29E; }

/* La scheda della data */
.as-k-chat__scheda { width: calc(90% - calc(33 * var(--u))); overflow: hidden; border-radius: calc(18 * var(--u)); background: #fff; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(28, 25, 23, .3), 0 0 0 calc(.5 * var(--u)) rgba(28, 25, 23, .08); }
.as-k-chat__scheda-foto { position: relative; display: block; height: calc(92 * var(--u)); background-size: cover; background-position: 50% 62%; }
.as-k-chat__scheda-foto b { position: absolute; left: calc(10 * var(--u)); top: calc(10 * var(--u)); display: inline-flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .95); color: #24704A; font-size: calc(11.5 * var(--u)); font-weight: 600; }
.as-k-chat__scheda-foto b::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #34A065; }
.as-k-chat__scheda-c { padding: calc(11 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)); }
.as-k-chat__scheda-h { margin-bottom: calc(7 * var(--u)) !important; font-size: calc(16.5 * var(--u)); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.as-k-chat__scheda-r { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(4 * var(--u)) !important; font-size: calc(13 * var(--u)); line-height: 1.3; color: rgba(28, 25, 23, .72); }
.as-k-chat__scheda-r .as-k-chat__ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #6E1F2B; }
.as-k-chat__scheda-k { margin: calc(11 * var(--u)) 0 calc(7 * var(--u)) !important; padding-top: calc(10 * var(--u)); border-top: calc(.5 * var(--u)) solid rgba(28, 25, 23, .12); font-size: calc(12.5 * var(--u)); font-weight: 600; }
.as-k-chat__orari { display: flex; gap: calc(6 * var(--u)); }
.as-k-chat__orari span { position: relative; flex: 1; padding: calc(7 * var(--u)) 0; border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(28, 25, 23, .15); font-size: calc(13.5 * var(--u)); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.as-k-chat__orari .is-scelto { background: #6E1F2B; color: #fff; box-shadow: none; }
.as-k-chat__orari .is-preso { color: rgba(28, 25, 23, .3); text-decoration: line-through; }

/* La visita fissata */
.as-k-chat__fatto { width: calc(90% - calc(33 * var(--u))); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #fff; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(28, 25, 23, .3), 0 0 0 calc(.5 * var(--u)) rgba(28, 25, 23, .08); }
.as-k-chat__fatto-h { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-bottom: calc(6 * var(--u)) !important; font-size: calc(12.5 * var(--u)); font-weight: 600; color: #24704A; }
.as-k-chat__fatto-ok { display: grid; place-items: center; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; background: #34A065; color: #fff; }
.as-k-chat__fatto-ok .as-k-chat__ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.as-k-chat__fatto-q { margin-bottom: calc(10 * var(--u)) !important; font-size: calc(19 * var(--u)); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.as-k-chat__fatto-chi { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-bottom: calc(12 * var(--u)) !important; font-size: calc(13 * var(--u)); line-height: 1.3; }
.as-k-chat__volto { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; object-fit: cover; }
.as-k-chat__fatto-chi small { display: block; font-size: calc(11.5 * var(--u)); color: rgba(28, 25, 23, .55); }
.as-k-chat__fatto-link { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: #6E1F2B; font-size: calc(13.5 * var(--u)); font-weight: 600; }
.as-k-chat__fatto-link .as-k-chat__ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* Il campo di testo e la firma */
.as-k-chat__piede { flex: none; padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); background: #fff; box-shadow: 0 calc(-.5 * var(--u)) 0 rgba(28, 25, 23, .1); }
.as-k-chat__campo { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); }
.as-k-chat__campo-t { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); overflow: hidden; border-radius: calc(19 * var(--u)); background: #F2EEE8; font-size: calc(15 * var(--u)); letter-spacing: -.012em; white-space: nowrap; }
.as-k-chat__segna { color: rgba(28, 25, 23, .42); }
.as-k-chat__digita { position: absolute; left: calc(14 * var(--u)); top: 50%; transform: translateY(-50%); color: #1c1917; opacity: 0; }
.as-k-chat__digita i { font-style: normal; }
.as-k-chat__invia { position: relative; flex: none; display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #6E1F2B; color: #fff; }
.as-k-chat__invia .as-k-chat__ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.as-k-chat__firma { margin-top: calc(6 * var(--u)) !important; text-align: center; font-size: calc(10.5 * var(--u)); color: rgba(28, 25, 23, .42); letter-spacing: -.005em; }

/* La tastiera di iOS 26 (esce solo mentre scrive) */
.as-k-chat__tastiera { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: calc(300 * var(--u)); padding: calc(6 * var(--u)) calc(3 * var(--u)) 0; border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; background: #D6D8DE; box-shadow: 0 calc(-.5 * var(--u)) 0 rgba(0, 0, 0, .1); transform: translateY(105%); color: #000; }
.as-k-chat__sugg { display: flex; height: calc(40 * var(--u)); margin: 0 calc(8 * var(--u)) calc(6 * var(--u)) !important; }
.as-k-chat__sugg span { flex: 1; display: grid; place-items: center; font-size: calc(16 * var(--u)); }
.as-k-chat__sugg span + span { box-shadow: calc(-.5 * var(--u)) 0 0 rgba(0, 0, 0, .16); }
.as-k-chat__fila { display: flex; justify-content: center; gap: calc(6 * var(--u)); margin-bottom: calc(11 * var(--u)) !important; }
.as-k-chat__fila span { display: grid; place-items: center; width: calc(33.6 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(9 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, .26); font-size: calc(22 * var(--u)); line-height: 1; }
.as-k-chat__fila.is-1 { padding: 0 calc(18 * var(--u)); }
.as-k-chat__fila .is-mod { width: calc(44 * var(--u)); background: #B8BDC6; font-size: calc(15 * var(--u)); }
.as-k-chat__fila .is-maiusc { margin-right: calc(10 * var(--u)); }
.as-k-chat__fila .is-canc { margin-left: calc(10 * var(--u)); }
.as-k-chat__fila.is-3 .is-mod { width: calc(88 * var(--u)); }
.as-k-chat__fila .is-spazio { flex: 1; max-width: calc(192 * var(--u)); font-size: calc(15 * var(--u)); }
.as-k-chat__tastiera-sotto { display: flex; justify-content: space-between; padding: calc(2 * var(--u)) calc(22 * var(--u)) 0; color: #5B5F66; }
.as-k-chat__tastiera-sotto .as-k-chat__ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }

/* La barra di Safari di iOS 26, layout Compatto (quello di base): tre vetri separati, sospesi sopra la pagina:
   il pulsante indietro tondo, la capsula col dominio, il «•••» tondo. Sopra una pagina scura il vetro si scurisce e i
   segni diventano bianchi, come fa iOS. */
.as-k-chat__safari { position: absolute; z-index: 10; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u)); }
.as-k-chat__sf-tondo, .as-k-chat__sf-indirizzo { height: calc(48 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(58, 58, 62, .46); box-shadow: inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .26), inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .14), 0 calc(8 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, .5); color: #fff; }
.as-k-chat__sf-tondo { flex: none; display: grid; place-items: center; width: calc(48 * var(--u)); }
.as-k-chat__sf-tondo .as-k-chat__ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.as-k-chat__sf-indirizzo { flex: 1; display: grid; place-items: center; font-size: calc(16 * var(--u)); letter-spacing: -.012em; }
@media (hover: hover) {
	.as-k-chat__sf-tondo, .as-k-chat__sf-indirizzo { -webkit-backdrop-filter: blur(calc(10 * var(--u))) saturate(1.6); backdrop-filter: blur(calc(10 * var(--u))) saturate(1.6); }
}

/* Il tocco: il polpastrello dei video Apple, un disco di vetro piatto (come nel simulatore della Landing), sopra
   la cosa che si tocca */
.as-k-chat__lancia::before, .as-k-chat__campo::after, .as-k-chat__invia::after, .as-k-chat__orari .is-scelto::after { content: ""; position: absolute; z-index: 3; width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin: calc(-21 * var(--u)) 0 0 calc(-21 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .95), 0 0 0 calc(.75 * var(--u)) rgba(20, 20, 20, .22), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .24); opacity: 0; pointer-events: none; }
.as-k-chat__lancia::before, .as-k-chat__invia::after, .as-k-chat__orari .is-scelto::after { left: 50%; top: 50%; }
.as-k-chat__campo::after { left: 36%; top: 50%; }

/* v0.99 (Rami, 04/11): via la composizione da telefono di questo caso («mockup giganteschi»): da telefono la scena
   è quella da computer, rimpicciolita come una foto nella card della fila (soluzioni.css, motion.js «fila»). */


/* ══ LA SCENA, UNA VOLTA (14 s) ══════════════════════════════════════════════════════════
   0-2 s il sito, la bolla e l'invito · 2 s il tocco, la chat sale · 3,2 s il benvenuto, le risposte rapide · 4,4 s il campo,
   la tastiera · 5,2-7,4 s scrive · 7,9 s invio · 8,8-10 s i puntini · 10,1 s la risposta e la scheda · 11,7 s tocca 11:00
   · 12 s «Sabato 17 alle 11:00» · 12,6 s visita fissata. L'ultimo fotogramma = la schermata da fermo. */
.as-demo-vivo .as-k-chat__lancia { animation: kc-lancia 14s 1 both; }
.as-demo-vivo .as-k-chat__lancia::before { animation: kc-t1 14s 1 both; }
.as-demo-vivo .as-k-chat__invito { animation: kc-invito 14s 1 both; }
.as-demo-vivo .as-k-chat__velo { animation: kc-velo 14s 1 both; }
.as-demo-vivo .as-k-chat__foglio { animation: kc-foglio 14s 1 both, kc-foglio-alto 14s 1 both; }
.as-demo-vivo .as-k-chat__tastiera { animation: kc-tastiera 14s 1 both; }
.as-demo-vivo .as-k-chat__safari { animation: kc-safari 14s 1 both; }
.as-demo-vivo .as-k-chat__campo::after { animation: kc-t2 14s 1 both; }
.as-demo-vivo .as-k-chat__segna { animation: kc-segna 14s 1 both; }
.as-demo-vivo .as-k-chat__digita { animation: kc-digita 14s 1 both; }
/* le lettere: 40 in 2,2 s; la lettera k compare k × 0,057 s dopo la prima; il campo si svuota tutto insieme (kc-digita) */
.as-demo-vivo .as-k-chat__digita i { animation: kc-car 14s 1 both; animation-delay: calc(var(--k, 0) * .057s); }
.as-demo-vivo .as-k-chat__invia { animation: kc-invia 14s 1 both; }
.as-demo-vivo .as-k-chat__invia::after { animation: kc-t3 14s 1 both; }
.as-demo-vivo .as-k-chat__giorno { animation: kc-giorno 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-1 { animation: kc-v1 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-2 { animation: kc-v2 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-3 { animation: kc-v3 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-4 { animation: kc-v4 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-5 { animation: kc-v5 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-6 { animation: kc-v6 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-7 { animation: kc-v7 14s 1 both; }
.as-demo-vivo .as-k-chat__v.is-8 { animation: kc-v8 14s 1 both; }
.as-demo-vivo .as-k-chat__scrive i { animation: kc-punti 1.05s 12 both; }
.as-demo-vivo .as-k-chat__scrive i:nth-child(2) { animation-delay: .15s; }
.as-demo-vivo .as-k-chat__scrive i:nth-child(3) { animation-delay: .3s; }
.as-demo-vivo .as-k-chat__orari .is-scelto { animation: kc-scelto 14s 1 both; }
.as-demo-vivo .as-k-chat__orari .is-scelto::after { animation: kc-t4 14s 1 both; }

@keyframes kc-lancia { 0%, 4.3% { opacity: 0; transform: scale(.4); } 6.4% { opacity: 1; transform: scale(1.07); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 7.5%, 15% { opacity: 1; transform: scale(1); } 15.4% { opacity: 1; transform: scale(.88); } 16.3% { opacity: 1; transform: scale(1); } 18.6%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes kc-t1 { 0%, 14.3% { opacity: 0; transform: scale(1.35); } 14.9% { opacity: 1; transform: scale(1); } 15.4% { opacity: 1; transform: scale(.84); } 16.8%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kc-invito { 0%, 7.1% { opacity: 0; transform: translateX(calc(14 * var(--u))) scale(.96); } 9.3%, 15.7% { opacity: 1; transform: none; } 17.1%, 100% { opacity: 0; transform: translateX(calc(8 * var(--u))) scale(.98); } }
@keyframes kc-velo { 0%, 15.7% { opacity: 0; } 19.3%, 100% { opacity: 1; } }
@keyframes kc-foglio { 0%, 16% { opacity: 0; transform: translateY(120%); } 16.1% { opacity: 1; transform: translateY(118%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 21.4%, 100% { opacity: 1; transform: none; } }
@keyframes kc-foglio-alto { 0%, 32.1% { bottom: calc(78 * var(--u)); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 35.4%, 58.6% { bottom: calc(306 * var(--u)); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 62.1%, 100% { bottom: calc(78 * var(--u)); } }
@keyframes kc-tastiera { 0%, 32.1% { transform: translateY(105%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 35.4%, 58.6% { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } 62.1%, 100% { transform: translateY(105%); } }
@keyframes kc-safari { 0%, 31.8% { opacity: 1; transform: none; } 32.9%, 61.1% { opacity: 0; transform: translateY(calc(10 * var(--u))); } 62.9%, 100% { opacity: 1; transform: none; } }
@keyframes kc-t2 { 0%, 31.4% { opacity: 0; transform: scale(1.35); } 32% { opacity: 1; transform: scale(1); } 32.5% { opacity: 1; transform: scale(.84); } 33.9%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kc-segna { 0%, 36.3% { opacity: 1; } 36.4%, 57.1% { opacity: 0; } 57.2%, 100% { opacity: 1; } }
@keyframes kc-digita { 0%, 36.3% { opacity: 0; } 36.4%, 57.1% { opacity: 1; } 57.2%, 100% { opacity: 0; } }
@keyframes kc-car { 0%, 36.7% { opacity: 0; } 36.8%, 100% { opacity: 1; } }
@keyframes kc-t3 { 0%, 55.4% { opacity: 0; transform: scale(1.35); } 55.9% { opacity: 1; transform: scale(1); } 56.4% { opacity: 1; transform: scale(.84); } 57.9%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kc-invia { 0%, 56% { transform: none; } 56.4% { transform: scale(.86); } 57.6%, 100% { transform: none; } }
@keyframes kc-giorno { 0%, 22.9% { opacity: 0; } 24%, 100% { opacity: 1; } }
@keyframes kc-v1 { 0%, 22.9% { grid-template-rows: 0fr; opacity: 0; } 24.6%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v2 { 0%, 25.4% { grid-template-rows: 0fr; opacity: 0; } 27.1%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v3 { 0%, 57.2% { grid-template-rows: 0fr; opacity: 0; } 58.9%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v4 { 0%, 62.5% { grid-template-rows: 0fr; opacity: 0; } 63.9%, 71.4% { grid-template-rows: 1fr; opacity: 1; } 72.5%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes kc-v5 { 0%, 72.1% { grid-template-rows: 0fr; opacity: 0; } 73.9%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v6 { 0%, 74.6% { grid-template-rows: 0fr; opacity: 0; } 77.1%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v7 { 0%, 85.7% { grid-template-rows: 0fr; opacity: 0; } 87.5%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-v8 { 0%, 90% { grid-template-rows: 0fr; opacity: 0; } 92.5%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes kc-punti { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(calc(-3 * var(--u))); } }
@keyframes kc-scelto { 0%, 83.8% { background: #fff; color: #1c1917; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(28, 25, 23, .15); } 84.2%, 100% { background: #6E1F2B; color: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(110, 31, 43, 0); } }
@keyframes kc-t4 { 0%, 82.9% { opacity: 0; transform: scale(1.35); } 83.4% { opacity: 1; transform: scale(1); } 83.9% { opacity: 1; transform: scale(.84); } 85.4%, 100% { opacity: 0; transform: scale(1); } }