/*
 * Studio Arfia — casi/posta.css · v0.102.0 · 04/11/2026
 * «La posta del lunedì, smistata dall'AI» (inc/casi/posta.php): Gmail in Chrome nel MacBook col notch, animato, con la
 * telecamera che si avvicina dove succede la cosa. Rami, 04/11: «riemula Gmail, e deve essere più chiaro quello che sta
 * succedendo». Le misure sono in punti di uno schermo da 1281 × 801 (--q = 1,18 punti del kit: il Mac con «testo più
 * grande»), i colori quelli di Gmail (Material 3), niente gialli. Il markup nasce col fotogramma finale; motion.js
 * (data-as-gm) toglie .as-gm--fermo e accende gli stati a tempo:
 *   is-arrivate  le 9 mail nuove entrano in cima, una alla volta
 *   is-pannello  si apre il pannello dell'assistente («Sto leggendo…»)
 *   is-smistate  ogni mail prende la sua etichetta, dall'alto in basso; le etichette a sinistra contano
 *   is-sunto     il riepilogo: quante mail per etichetta
 *   is-aperta    si apre la mail di Villa Castelmora; nel pannello l'ordine riconosciuto
 *   is-ev1..3    le tre cose che contano si evidenziano nella mail e passano nell'ordine, coi numeri
 *   is-bozza     la risposta pronta nel pannello
 *   is-creato    «Ordine n. 2041 creato», e la snackbar di Gmail
 *   is-risposta  la risposta inserita sotto la mail
 * La telecamera (.as-gm__cam) è il MacBook alla misura del primo piano più stretto (--z volte il palco), rimpicciolito
 * per le inquadrature larghe: così il testo resta nitido. Senza JS: il campo lungo, fermo, sul fotogramma finale.
 */

/* ══ IL PALCO E LA TELECAMERA ══ */
.as-gm { position: relative; width: 100%; }
.as-gm__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.as-gm__palco {
	--a: 2.05;
	--z: 1.45;
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: var(--a);
	overflow: hidden;
	border-radius: calc(28px * var(--as-brm));
	background: var(--as-sup);
}
@supports (corner-shape: squircle) { .as-gm__palco { corner-shape: squircle; } }
.as-gm__cam {
	/* il campo lungo (anche senza JS): il Mac intero, centrato */
	--cs: calc(.666 / var(--z));
	--cx: 16.7cqw;
	--cy: 2.4cqw;
	position: absolute;
	left: 0;
	top: 0;
	font-size: calc(var(--z) * 100cqw / 66);
	transform-origin: 0 0;
	transform: translate(var(--cx), var(--cy)) scale(var(--cs));
	transition: transform 1.35s cubic-bezier(.65, 0, .3, 1);
}
.as-gm__cam .as-macbook { margin: 0; }
@media (max-width: 999px) {
	.as-gm__palco { --a: 1.6; --z: 2.2; }
	.as-gm__cam { --cs: calc(.854 / var(--z)); --cx: 7.3cqw; --cy: 3.1cqw; }
}
@media (max-width: 699px) {
	.as-gm__palco { --a: 1; --z: 2.3; border-radius: calc(22px * var(--as-brm)); }
	.as-gm__cam { --cs: calc(.92 / var(--z)); --cx: 4cqw; --cy: 19.7cqw; }
}
.as-gm.is-salto .as-gm__cam, .as-gm.is-salto .as-gm__cam * { transition: none !important; animation: none !important; }
.as-gm--fermo *, .as-gm--fermo { transition: none !important; animation: none !important; }

/* ══ GMAIL IN CHROME ══ */
.as-gm__app {
	--q: calc(var(--u) * 1.18);
	--g-blu: #0B57D0;
	--g-testo: #1F1F1F;
	--g-grigio: #444746;
	--g-muto: #5E5E5E;
	--g-fondo: #F6F8FC;
	--ai-1: #7B61FF;
	--ai-2: #3E8BFF;
	--ai-chiaro: #EEE8FF;
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--g-fondo);
	color: var(--g-testo);
	font-family: 'Google Sans', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: calc(14 * var(--q));
	line-height: 1.43;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
}
.as-gm__app :where(p, ul, li) { margin: 0; list-style: none; }
.as-gm__app :where(ul) { padding: 0; }
.as-gm__app :is(b, small, em, i, u, mark) { font-style: normal; text-decoration: none; }
.as-gm__ic { flex: none; display: block; width: calc(20 * var(--q)); height: calc(20 * var(--q)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.as-gm__ic:is(.is-app, .is-kebab) { fill: currentColor; stroke: none; }
.as-gm__ic.is-scintilla { fill: url(#as-gm-scintilla) currentColor; stroke: none; color: var(--ai-1); }
.as-gm__sep { flex: none; display: block; width: 1px; height: calc(20 * var(--q)); background: #DADCE0; }

/* Chrome: la fila delle schede (36) e la barra degli indirizzi (40). A tutto schermo, quindi niente semafori. */
.as-gm__chrome { flex: none; background: #fff; box-shadow: 0 1px 0 #DADCE0; position: relative; z-index: 3; }
.as-gm__schede { display: flex; align-items: flex-end; gap: calc(2 * var(--q)); height: calc(36 * var(--q)); padding: 0 calc(10 * var(--q)); background: #DFE4EA; }
.as-gm__scheda { display: flex; align-items: center; gap: calc(8 * var(--q)); width: calc(236 * var(--q)); height: calc(30 * var(--q)); padding: 0 calc(8 * var(--q)) 0 calc(12 * var(--q)); border-radius: calc(9 * var(--q)) calc(9 * var(--q)) 0 0; font-size: calc(12 * var(--q)); color: #3C4043; white-space: nowrap; }
.as-gm__scheda.is-on { background: #fff; color: var(--g-testo); }
.as-gm__scheda .as-gm__ic { width: calc(14 * var(--q)); height: calc(14 * var(--q)); margin-left: auto; color: #5F6368; }
.as-gm__scheda-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-gm__fav { flex: none; display: grid; place-items: center; width: calc(16 * var(--q)); height: calc(16 * var(--q)); overflow: hidden; border-radius: calc(3 * var(--q)); }
.as-gm__fav .as-lg { width: 100%; height: 100%; }
.as-gm__fav .as-gm__m { width: 100%; height: auto; }
.as-gm__scheda-piu { display: grid; place-items: center; width: calc(28 * var(--q)); height: calc(30 * var(--q)); color: #5F6368; }
.as-gm__scheda-piu .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
.as-gm__barra { display: flex; align-items: center; gap: calc(16 * var(--q)); height: calc(40 * var(--q)); padding: 0 calc(14 * var(--q)); color: #474747; }
.as-gm__barra > .as-gm__ic { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }
.as-gm__barra > .as-gm__ic.is-avanti { opacity: .35; }
.as-gm__omni { flex: 1; display: flex; align-items: center; gap: calc(10 * var(--q)); height: calc(30 * var(--q)); padding: 0 calc(12 * var(--q)); border-radius: 999px; background: #E9EEF6; font-size: calc(13.5 * var(--q)); color: var(--g-testo); }
.as-gm__omni .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); color: #474747; }
.as-gm__omni .as-gm__ic.is-stella { margin-left: auto; }
.as-gm__omni em { color: #5F6368; }
.as-gm__io { flex: none; display: block; width: calc(32 * var(--q)); height: calc(32 * var(--q)); overflow: hidden; border-radius: 50%; }
.as-gm__io.is-piccolo { width: calc(24 * var(--q)); height: calc(24 * var(--q)); }
.as-gm__io img, .as-gm__av img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Gmail */
.as-gm__gmail { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.as-gm__testa { flex: none; display: flex; align-items: center; height: calc(64 * var(--q)); padding: 0 calc(12 * var(--q)) 0 calc(16 * var(--q)); }
.as-gm__marchio { flex: none; display: flex; align-items: center; gap: calc(16 * var(--q)); width: calc(238 * var(--q)); color: var(--g-grigio); }
.as-gm__marchio > .as-gm__ic { width: calc(24 * var(--q)); height: calc(24 * var(--q)); }
.as-gm__logo { display: flex; align-items: center; gap: calc(8 * var(--q)); }
.as-gm__logo .as-gm__m { width: calc(32 * var(--q)); height: auto; }
.as-gm__logo b { font-size: calc(22 * var(--q)); font-weight: 400; letter-spacing: -.01em; color: #5F6368; }
.as-gm__cerca { flex: 0 1 calc(720 * var(--q)); display: flex; align-items: center; gap: calc(14 * var(--q)); height: calc(46 * var(--q)); padding: 0 calc(14 * var(--q)) 0 calc(16 * var(--q)); border-radius: 999px; background: #E9EEF6; font-size: calc(16 * var(--q)); color: var(--g-grigio); }
.as-gm__cerca .as-gm__ic { width: calc(22 * var(--q)); height: calc(22 * var(--q)); }
.as-gm__cerca .as-gm__ic.is-regola { margin-left: auto; }
.as-gm__attrezzi { display: flex; align-items: center; gap: calc(16 * var(--q)); margin-left: auto; color: var(--g-grigio); }
.as-gm__attrezzi .as-gm__ic { width: calc(22 * var(--q)); height: calc(22 * var(--q)); }
.as-gm__chiedi { display: grid; place-items: center; width: calc(36 * var(--q)); height: calc(36 * var(--q)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #E1E5EA; }
.as-gm__chiedi .as-gm__ic { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
.as-gm__corpo { flex: 1; min-height: 0; display: flex; }

/* la colonna a sinistra */
.as-gm__nav { flex: none; width: calc(256 * var(--q)); padding-right: calc(16 * var(--q)); }
.as-gm__scrivi { display: inline-flex; align-items: center; gap: calc(12 * var(--q)); height: calc(56 * var(--q)); margin: calc(8 * var(--q)) 0 calc(16 * var(--q)) calc(8 * var(--q)); padding: 0 calc(22 * var(--q)) 0 calc(16 * var(--q)); border-radius: calc(16 * var(--q)); background: #C2E7FF; font-weight: 500; color: #001D35; }
.as-gm__scrivi .as-gm__ic { width: calc(22 * var(--q)); height: calc(22 * var(--q)); }
.as-gm__voce { display: flex; align-items: center; gap: calc(18 * var(--q)); height: calc(32 * var(--q)); padding: 0 calc(12 * var(--q)) 0 calc(26 * var(--q)); border-radius: 0 999px 999px 0; color: #202124; white-space: nowrap; }
.as-gm__voce .as-gm__ic { width: calc(19 * var(--q)); height: calc(19 * var(--q)); color: var(--g-grigio); }
.as-gm__voce b { margin-left: auto; font-size: calc(12.5 * var(--q)); font-weight: 400; }
.as-gm__voce.is-on { background: #D3E3FD; font-weight: 700; color: #001D35; }
.as-gm__voce.is-on b { font-weight: 700; }
.as-gm__nav-h { display: flex; align-items: center; justify-content: space-between; height: calc(40 * var(--q)); margin-top: calc(12 * var(--q)); padding: 0 calc(12 * var(--q)) 0 calc(26 * var(--q)); font-size: calc(16 * var(--q)); font-weight: 500; }
.as-gm__nav-h .as-gm__ic { color: var(--g-grigio); }
.as-gm__tag { flex: none; display: block; width: calc(17 * var(--q)); height: calc(17 * var(--q)); background: var(--c-tag); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5v5.4l8 8a1.6 1.6 0 0 0 2.3 0l5.8-5.8a1.6 1.6 0 0 0 0-2.3l-8-8H6.5a3 3 0 0 0-3 2.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5v5.4l8 8a1.6 1.6 0 0 0 2.3 0l5.8-5.8a1.6 1.6 0 0 0 0-2.3l-8-8H6.5a3 3 0 0 0-3 2.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.as-gm .is-ordini { --c-tag: #16A765; --c-chip: #C6EFD9; --c-chip-t: #0B5A33; }
.as-gm .is-reclami { --c-tag: #E8453C; --c-chip: #FBD9D7; --c-chip-t: #8C1D18; }
.as-gm .is-fatture { --c-tag: #4A86E8; --c-chip: #D3E3FD; --c-chip-t: #0B3D91; }
.as-gm .is-info { --c-tag: #A479E2; --c-chip: #E9DDFB; --c-chip-t: #4A2391; }
.as-gm__voce.is-eti b { font-weight: 700; color: var(--c-chip-t); transition: opacity .4s ease calc(2.4s + var(--i) * .12s), transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(2.4s + var(--i) * .12s); }
.as-gm:not(.is-smistate) .as-gm__voce.is-eti b { opacity: 0; transform: scale(.4); transition-delay: 0s; }

/* il riquadro bianco al centro: la lista, e sopra la mail aperta */
.as-gm__main { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 0 calc(16 * var(--q)); overflow: hidden; border-radius: calc(16 * var(--q)); background: #fff; }
.as-gm__vista { position: absolute; inset: 0; display: flex; flex-direction: column; }
.as-gm__strumenti { flex: none; display: flex; align-items: center; gap: calc(18 * var(--q)); height: calc(48 * var(--q)); padding: 0 calc(16 * var(--q)) 0 calc(20 * var(--q)); color: var(--g-grigio); }
.as-gm__strumenti .as-gm__ic { width: calc(19 * var(--q)); height: calc(19 * var(--q)); }
.as-gm__strumenti .as-gm__ic.is-giu { width: calc(14 * var(--q)); margin-left: calc(-14 * var(--q)); }
.as-gm__pag { margin-left: auto; font-size: calc(12 * var(--q)); color: var(--g-muto); white-space: nowrap; }
.as-gm__cat { flex: none; display: flex; height: calc(52 * var(--q)); box-shadow: inset 0 -1px 0 #ECEDEF; }
.as-gm__cat span { position: relative; flex: 0 1 calc(236 * var(--q)); min-width: 0; display: flex; align-items: center; gap: calc(16 * var(--q)); padding: 0 calc(16 * var(--q)); font-weight: 500; color: var(--g-grigio); white-space: nowrap; overflow: hidden; }
.as-gm__cat span.is-on { color: var(--g-blu); }
.as-gm__cat span.is-on::after { content: ""; position: absolute; left: calc(8 * var(--q)); right: calc(8 * var(--q)); bottom: 0; height: calc(3 * var(--q)); border-radius: calc(3 * var(--q)) calc(3 * var(--q)) 0 0; background: var(--g-blu); }
.as-gm__righe { flex: 1; min-height: 0; overflow: hidden; }
.as-gm__riga { display: flex; align-items: center; gap: calc(12 * var(--q)); height: calc(40 * var(--q)); padding: 0 calc(16 * var(--q)) 0 calc(14 * var(--q)); overflow: hidden; background: #fff; box-shadow: inset 0 -1px 0 rgba(100, 121, 143, .12); color: var(--g-testo); white-space: nowrap; }
.as-gm__riga > .as-gm__ic { width: calc(19 * var(--q)); height: calc(19 * var(--q)); color: #A6A9AC; }
.as-gm__riga > .as-gm__ic.is-graffetta { width: calc(16 * var(--q)); height: calc(16 * var(--q)); color: var(--g-muto); }
.as-gm__da { flex: none; width: calc(168 * var(--q)); overflow: hidden; text-overflow: ellipsis; }
.as-gm__testo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.as-gm__ogg { flex: none; }
.as-gm__ante { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--g-muto); }
.as-gm__ora { flex: none; width: calc(52 * var(--q)); text-align: right; font-size: calc(12 * var(--q)); }
.as-gm__riga.is-nuova :is(.as-gm__da, .as-gm__ogg, .as-gm__ora) { font-weight: 700; }
.as-gm__riga.is-letta { background: #F2F6FC; }
.as-gm__riga.is-letta .as-gm__ora { color: var(--g-muto); }
.as-gm__chip { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--q)); height: calc(20 * var(--q)); max-width: calc(140 * var(--q)); margin-right: calc(8 * var(--q)); padding: 0 calc(6 * var(--q)); overflow: hidden; border-radius: calc(4 * var(--q)); background: var(--c-chip, #E8EAED); color: var(--c-chip-t, #3C4043); font-size: calc(12 * var(--q)); font-weight: 500; line-height: 1; }
.as-gm__chip .as-gm__ic { width: calc(12 * var(--q)); height: calc(12 * var(--q)); }
.as-gm__chip.is-grigio { --c-chip: #E8EAED; --c-chip-t: #3C4043; }
/* le mail nuove entrano in cima, una alla volta (la più vecchia per prima: quelle sopra la spingono giù) */
.as-gm__riga.is-nuova { transition: height .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .34s), opacity .4s ease calc(var(--i) * .34s + .1s), background-color .6s ease; }
.as-gm:not(.is-arrivate) .as-gm__riga.is-nuova { height: 0; opacity: 0; transition: none; }
/* l'etichetta: la riga si accende di lavanda mentre l'AI la legge, poi resta la pastiglia */
.as-gm__riga .as-gm__chip { transition: max-width .5s cubic-bezier(.2, .8, .2, 1) calc(var(--j) * .27s + .25s), padding .5s ease calc(var(--j) * .27s + .25s), margin .5s ease calc(var(--j) * .27s + .25s), opacity .3s ease calc(var(--j) * .27s + .35s); }
.as-gm:not(.is-smistate) .as-gm__riga .as-gm__chip { max-width: 0; margin-right: 0; padding: 0; opacity: 0; transition: none; }
.as-gm.is-smistate:not(.as-gm--fermo) .as-gm__riga.is-nuova { animation: as-gm-legge .75s ease calc(var(--j) * .27s) both; }
@keyframes as-gm-legge { 0% { background-color: #fff; } 35% { background-color: var(--ai-chiaro); } 100% { background-color: #fff; } }
.as-gm.is-aperta .as-gm__riga { animation: none; }

/* la mail aperta: come in Gmail, prende il posto della lista */
.as-gm__vista.is-mail { background: #fff; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.as-gm:not(.is-aperta) .as-gm__vista.is-mail { opacity: 0; transform: translateX(calc(24 * var(--q))); pointer-events: none; }
.as-gm__lettura { flex: 1; min-height: 0; overflow: hidden; padding: calc(10 * var(--q)) calc(24 * var(--q)) 0 0; }
.as-gm__oggetto { display: flex; align-items: center; gap: calc(8 * var(--q)); padding-left: calc(72 * var(--q)); font-size: calc(21 * var(--q)); line-height: 1.3; white-space: nowrap; }
.as-gm__oggetto .as-gm__chip { margin: 0; }
.as-gm__oggetto .as-gm__chip:first-of-type { margin-left: calc(6 * var(--q)); }
.as-gm__ogg-ic { display: flex; gap: calc(18 * var(--q)); margin-left: auto; color: var(--g-grigio); }
.as-gm__mitt { display: flex; align-items: flex-start; gap: calc(16 * var(--q)); margin-top: calc(20 * var(--q)); padding-left: calc(16 * var(--q)); }
.as-gm__av { flex: none; display: block; width: calc(40 * var(--q)); height: calc(40 * var(--q)); overflow: hidden; border-radius: 50%; }
.as-gm__av .as-lg { display: block; width: 100%; height: 100%; }
.as-gm__mitt-chi { display: flex; flex-wrap: wrap; column-gap: calc(6 * var(--q)); align-items: baseline; min-width: 0; white-space: nowrap; }
.as-gm__mitt-chi b { font-weight: 700; }
.as-gm__mitt-chi span { font-size: calc(12 * var(--q)); color: var(--g-muto); }
.as-gm__mitt-chi small { flex-basis: 100%; display: flex; align-items: center; gap: calc(2 * var(--q)); font-size: calc(12 * var(--q)); color: var(--g-muto); }
.as-gm__mitt-chi small .as-gm__ic { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.as-gm__mitt-ora { display: flex; align-items: center; gap: calc(16 * var(--q)); margin-left: auto; font-size: calc(12 * var(--q)); color: var(--g-muto); white-space: nowrap; }
.as-gm__mitt-ora .as-gm__ic { width: calc(19 * var(--q)); height: calc(19 * var(--q)); color: var(--g-grigio); }
.as-gm__mitt-ora .as-gm__ic:first-of-type { margin-left: calc(4 * var(--q)); }
.as-gm__corpo-mail { display: grid; gap: calc(12 * var(--q)); margin-top: calc(14 * var(--q)); padding-left: calc(72 * var(--q)); font-size: calc(14.5 * var(--q)); line-height: 1.55; color: #222; }
.as-gm__firma { font-size: calc(12.5 * var(--q)); color: var(--g-muto); }
/* le tre cose che contano: si evidenziano in lavanda, col loro numero */
.as-gm__ev { position: relative; padding: 0 calc(2 * var(--q)); border-radius: calc(4 * var(--q)); background: transparent; color: inherit; transition: background-color .45s ease, box-shadow .45s ease; }
.as-gm__ev::after { content: attr(data-n); position: absolute; top: calc(-11 * var(--q)); right: calc(-9 * var(--q)); display: grid; place-items: center; width: calc(17 * var(--q)); height: calc(17 * var(--q)); border-radius: 50%; background: linear-gradient(135deg, var(--ai-1), var(--ai-2)); color: #fff; font-size: calc(10.5 * var(--q)); font-weight: 700; line-height: 1; opacity: 0; transform: scale(.3); transition: opacity .3s ease .15s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .15s; }
.as-gm.is-ev1 .as-gm__ev.is-1, .as-gm.is-ev2 .as-gm__ev.is-2, .as-gm.is-ev3 .as-gm__ev.is-3 { background: var(--ai-chiaro); box-shadow: 0 0 0 calc(2 * var(--q)) var(--ai-chiaro), inset 0 calc(-2 * var(--q)) 0 rgba(123, 97, 255, .45); }
.as-gm.is-ev1 .as-gm__ev.is-1::after, .as-gm.is-ev2 .as-gm__ev.is-2::after, .as-gm.is-ev3 .as-gm__ev.is-3::after { opacity: 1; transform: none; }
.as-gm__azioni { display: flex; gap: calc(12 * var(--q)); margin-top: calc(26 * var(--q)); padding-left: calc(72 * var(--q)); transition: opacity .3s ease; }
.as-gm__azioni span { display: inline-flex; align-items: center; gap: calc(8 * var(--q)); height: calc(36 * var(--q)); padding: 0 calc(18 * var(--q)) 0 calc(14 * var(--q)); border-radius: 999px; box-shadow: inset 0 0 0 1px #747775; font-weight: 500; color: var(--g-grigio); }
.as-gm__azioni .as-gm__ic { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }
.as-gm.is-risposta .as-gm__azioni { display: none; }
/* la risposta, inserita dall'assistente sotto la mail */
.as-gm__risp { display: flex; gap: calc(16 * var(--q)); margin-top: calc(22 * var(--q)); padding-left: calc(16 * var(--q)); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.as-gm:not(.is-risposta) .as-gm__risp { display: none; }
.as-gm__risp-box { flex: 1; min-width: 0; padding: calc(12 * var(--q)) calc(16 * var(--q)) calc(12 * var(--q)); border-radius: calc(10 * var(--q)); background: #fff; box-shadow: 0 calc(1 * var(--q)) calc(3 * var(--q)) rgba(60, 64, 67, .3), 0 calc(4 * var(--q)) calc(8 * var(--q)) calc(3 * var(--q)) rgba(60, 64, 67, .15); }
.as-gm.is-risposta:not(.as-gm--fermo) .as-gm__risp-box { animation: as-gm-sale .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes as-gm-sale { from { opacity: 0; transform: translateY(calc(14 * var(--q))); } }
.as-gm__risp-a { display: flex; align-items: center; gap: calc(8 * var(--q)); color: var(--g-grigio); }
.as-gm__risp-a .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
.as-gm__a-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--q)); height: calc(24 * var(--q)); padding: 0 calc(10 * var(--q)) 0 calc(2 * var(--q)); border-radius: 999px; box-shadow: inset 0 0 0 1px #C4C7C5; font-size: calc(13 * var(--q)); color: var(--g-testo); }
.as-gm__a-chip img { width: calc(20 * var(--q)); height: calc(20 * var(--q)); border-radius: 50%; object-fit: cover; }
.as-gm__risp-t { margin-top: calc(12 * var(--q)) !important; font-size: calc(14.5 * var(--q)); line-height: 1.55; color: #222; }
.as-gm.is-risposta:not(.as-gm--fermo) .as-gm__risp-t { animation: as-gm-evidenzia 1.8s ease .3s both; }
@keyframes as-gm-evidenzia { 0% { background-color: var(--ai-chiaro); } 100% { background-color: transparent; } }
.as-gm__risp-giu { display: flex; align-items: center; gap: calc(16 * var(--q)); margin-top: calc(16 * var(--q)) !important; color: var(--g-grigio); }
.as-gm__risp-giu .as-gm__ic { width: calc(19 * var(--q)); height: calc(19 * var(--q)); }
.as-gm__risp-giu > .as-gm__ic:last-child { margin-left: auto; }
.as-gm__invia { display: inline-flex; align-items: center; gap: calc(10 * var(--q)); height: calc(36 * var(--q)); padding: 0 calc(10 * var(--q)) 0 calc(22 * var(--q)); border-radius: 999px; background: var(--g-blu); color: #fff; font-weight: 500; }
.as-gm__invia .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); padding-left: calc(8 * var(--q)); box-sizing: content-box; border-left: 1px solid rgba(255, 255, 255, .35); }
.as-gm__fatta { display: inline-flex; align-items: center; gap: calc(6 * var(--q)); height: calc(24 * var(--q)); padding: 0 calc(10 * var(--q)) 0 calc(8 * var(--q)); border-radius: 999px; background: var(--ai-chiaro); font-size: calc(12 * var(--q)); font-weight: 500; color: #4A3AA8; }
.as-gm__fatta .as-gm__ic { width: calc(14 * var(--q)) !important; height: calc(14 * var(--q)) !important; }

/* ══ IL PANNELLO DELL'ASSISTENTE (a destra, come il pannello laterale di Gmail) ══ */
.as-gm__ai { position: relative; flex: 0 0 calc(344 * var(--q)); margin: 0 0 calc(16 * var(--q)) calc(8 * var(--q)); overflow: hidden; border-radius: calc(16 * var(--q)); background: #fff; transition: flex-basis .8s cubic-bezier(.65, 0, .3, 1), margin .8s cubic-bezier(.65, 0, .3, 1), opacity .5s ease; }
.as-gm:not(.is-pannello) .as-gm__ai { flex-basis: 0; margin-left: 0; opacity: 0; transition: none; }
.as-gm__ai-in { display: flex; flex-direction: column; gap: calc(14 * var(--q)); width: calc(344 * var(--q)); height: 100%; padding: calc(14 * var(--q)) calc(16 * var(--q)); background: radial-gradient(120% 50% at 100% 0, rgba(123, 97, 255, .07), rgba(123, 97, 255, 0) 70%); }
.as-gm__ai-h { display: flex; align-items: center; gap: calc(8 * var(--q)); }
.as-gm__ai-h b { font-size: calc(16 * var(--q)); font-weight: 500; }
.as-gm__ai-h small { font-size: calc(12 * var(--q)); color: var(--g-muto); }
.as-gm__ai-h > .as-gm__ic.is-x { width: calc(18 * var(--q)); height: calc(18 * var(--q)); margin-left: auto; color: var(--g-grigio); }
.as-gm__ai-h .as-gm__ic.is-scintilla { width: calc(22 * var(--q)); height: calc(22 * var(--q)); }
.as-gm__ai-tit { display: grid; gap: calc(2 * var(--q)); font-weight: 500; }
.as-gm__ai-tit small { font-size: calc(12 * var(--q)); font-weight: 400; color: var(--g-muto); }
/* sto leggendo… */
.as-gm__ai-leggo { display: grid; gap: calc(10 * var(--q)); padding: calc(12 * var(--q)) calc(14 * var(--q)); border-radius: calc(12 * var(--q)); background: #F3F6FC; font-size: calc(13.5 * var(--q)); color: var(--g-grigio); }
.as-gm__ai-leggo p { display: flex; align-items: center; gap: calc(8 * var(--q)); }
.as-gm__ai-leggo .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
.as-gm__ai-barra { display: block; height: calc(4 * var(--q)); overflow: hidden; border-radius: 999px; background: #E1E3F0; }
.as-gm__ai-barra::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ai-1), var(--ai-2)); transform-origin: 0 50%; transform: scaleX(0); }
.as-gm.is-pannello:not(.as-gm--fermo) .as-gm__ai-barra::after { animation: as-gm-barra 3.6s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes as-gm-barra { to { transform: scaleX(1); } }
.as-gm.is-sunto .as-gm__ai-leggo { display: none; }
/* il riepilogo */
.as-gm__ai-sunto { display: grid; gap: calc(10 * var(--q)); padding: calc(14 * var(--q)); border-radius: calc(12 * var(--q)); background: #F3F6FC; }
.as-gm:not(.is-sunto) .as-gm__ai-sunto { display: none; }
.as-gm.is-sunto:not(.as-gm--fermo) .as-gm__ai-sunto { animation: as-gm-sale .5s cubic-bezier(.2, .8, .2, 1) both; }
.as-gm__ai-conti { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--q)); }
.as-gm__ai-conti li { display: flex; align-items: center; gap: calc(8 * var(--q)); height: calc(34 * var(--q)); padding: 0 calc(10 * var(--q)); border-radius: calc(8 * var(--q)); background: var(--c-chip); color: var(--c-chip-t); font-size: calc(13 * var(--q)); font-weight: 500; }
.as-gm__ai-conti .as-gm__tag { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.as-gm__ai-conti b { margin-left: auto; font-size: calc(16 * var(--q)); font-weight: 700; }
.as-gm__ai-nota { font-size: calc(13 * var(--q)); color: var(--g-grigio); }
.as-gm.is-aperta .as-gm__ai-sunto { gap: calc(8 * var(--q)); }
.as-gm.is-aperta .as-gm__ai-nota { display: none; }
/* l'ordine riconosciuto: le righe arrivano coi numeri della mail */
.as-gm__ai-ordine { display: grid; gap: calc(10 * var(--q)); padding: calc(14 * var(--q)); border-radius: calc(12 * var(--q)); background: #fff; box-shadow: 0 0 0 1px #E3E3F2, 0 calc(6 * var(--q)) calc(16 * var(--q)) calc(-8 * var(--q)) rgba(62, 64, 140, .25); }
.as-gm:not(.is-aperta) .as-gm__ai-ordine { display: none; }
.as-gm.is-aperta:not(.as-gm--fermo) .as-gm__ai-ordine { animation: as-gm-sale .55s cubic-bezier(.2, .8, .2, 1) .3s both; }
.as-gm__ai-righe { display: grid; }
.as-gm__ai-righe li { display: flex; align-items: center; gap: calc(10 * var(--q)); height: calc(42 * var(--q)); box-shadow: inset 0 -1px 0 #EEF0F3; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.as-gm__ai-righe li > span { display: grid; min-width: 0; line-height: 1.25; }
.as-gm__ai-righe small { font-size: calc(11 * var(--q)); color: var(--g-muto); }
.as-gm__ai-righe b { margin-left: auto; font-weight: 700; white-space: nowrap; }
.as-gm__ai-righe i { flex: none; display: grid; place-items: center; width: calc(18 * var(--q)); height: calc(18 * var(--q)); border-radius: 50%; background: linear-gradient(135deg, var(--ai-1), var(--ai-2)); }
.as-gm__ai-righe i::after { content: attr(data-n); color: #fff; font-size: calc(10.5 * var(--q)); font-weight: 700; line-height: 1; }
.as-gm:not(.is-ev1) .as-gm__ai-righe .is-1, .as-gm:not(.is-ev2) .as-gm__ai-righe .is-2, .as-gm:not(.is-ev3) .as-gm__ai-righe .is-3 { opacity: 0; transform: translateX(calc(-18 * var(--q))); transition: none; }
.as-gm.is-ev1 .as-gm__ai-righe .is-1, .as-gm.is-ev2 .as-gm__ai-righe .is-2, .as-gm.is-ev3 .as-gm__ai-righe .is-3 { transition-delay: .25s; }
.as-gm__crea { position: relative; display: grid; place-items: center; height: calc(40 * var(--q)); margin-top: calc(4 * var(--q)) !important; border-radius: 999px; background: var(--g-blu); color: #fff; font-weight: 500; transition: background-color .35s ease, transform .2s ease; }
.as-gm__crea > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(8 * var(--q)); transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.as-gm__crea .as-gm__ic { width: calc(18 * var(--q)); height: calc(18 * var(--q)); stroke-width: 2.4; }
.as-gm__crea .is-dopo { opacity: 0; transform: scale(.7); }
.as-gm.is-creato .as-gm__crea { background: #146C2E; }
.as-gm.is-creato .as-gm__crea .is-prima { opacity: 0; transform: scale(.7); }
.as-gm.is-creato .as-gm__crea .is-dopo { opacity: 1; transform: none; }
.as-gm__crea.is-premuto, .as-gm__inserisci.is-premuto { transform: scale(.96); }
/* la risposta pronta */
.as-gm__ai-bozza { display: grid; gap: calc(8 * var(--q)); padding: calc(14 * var(--q)); border-radius: calc(12 * var(--q)); background: #F3F6FC; }
.as-gm:not(.is-bozza) .as-gm__ai-bozza { display: none; }
.as-gm.is-bozza:not(.as-gm--fermo) .as-gm__ai-bozza { animation: as-gm-sale .55s cubic-bezier(.2, .8, .2, 1) both; }
.as-gm__ai-testo { font-size: calc(13 * var(--q)); line-height: 1.5; color: #333; }
.as-gm__inserisci { justify-self: start; display: inline-flex; align-items: center; gap: calc(8 * var(--q)); height: calc(32 * var(--q)); padding: 0 calc(14 * var(--q)) 0 calc(10 * var(--q)); border-radius: 999px; box-shadow: inset 0 0 0 1px #C4C7C5; background: #fff; font-size: calc(13 * var(--q)); font-weight: 500; color: var(--g-blu); transition: transform .2s ease, background-color .3s ease; }
.as-gm__inserisci .as-gm__ic { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
.as-gm.is-risposta .as-gm__inserisci { background: #E8F0FE; }

/* la colonna delle app a destra (Calendar, Keep in grigio, Tasks, Contatti) */
.as-gm__rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--q)); width: calc(56 * var(--q)); padding-top: calc(14 * var(--q)); color: #1A73E8; }
.as-gm__rail .as-gm__ic { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
.as-gm__rail .as-gm__ic.is-lampadina { color: #5F6368; }
.as-gm__rail .as-gm__ic.is-piu { color: var(--g-grigio); }
.as-gm__sep.is-oriz { width: calc(20 * var(--q)); height: 1px; }

/* la snackbar di Gmail, in basso a sinistra */
.as-gm__toast { position: absolute; z-index: 6; left: calc(16 * var(--q)); bottom: calc(24 * var(--q)); display: flex; align-items: center; gap: calc(12 * var(--q)); height: calc(48 * var(--q)); padding: 0 calc(10 * var(--q)) 0 calc(14 * var(--q)); border-radius: calc(6 * var(--q)); background: #1F1F1F; box-shadow: 0 calc(4 * var(--q)) calc(12 * var(--q)) rgba(0, 0, 0, .3); color: #F2F2F2; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.as-gm__toast .as-gm__ic { width: calc(18 * var(--q)); height: calc(18 * var(--q)); color: #A8C7FA; }
.as-gm__toast .as-gm__ic.is-x { color: #C4C7C5; }
.as-gm__toast u { margin-left: calc(10 * var(--q)); font-weight: 500; color: #A8C7FA; }
/* come in Gmail se ne va da sola: quando la risposta è inserita non c'è più */
.as-gm:is(:not(.is-creato), .is-risposta) .as-gm__toast { opacity: 0; transform: translateY(calc(30 * var(--q))); }

/* il puntatore di macOS: lo muove motion.js sui bersagli (--px, --py in px del Gmail non scalato) */
.as-gm__punt { position: absolute; z-index: 9; left: 0; top: 0; width: calc(19 * var(--q)); height: calc(25 * var(--q)); pointer-events: none; opacity: 0; transform: translate(var(--px, 60%), var(--py, 90%)); transition: transform .85s cubic-bezier(.45, 0, .2, 1), opacity .3s ease; }
.as-gm__punt svg { display: block; width: 100%; height: 100%; fill: #000; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.as-gm__punt.is-su { opacity: 1; }
.as-gm__punt::before { content: ""; position: absolute; left: calc(-12 * var(--q)); top: calc(-12 * var(--q)); width: calc(26 * var(--q)); height: calc(26 * var(--q)); border-radius: 50%; background: rgba(123, 97, 255, .35); opacity: 0; transform: scale(.3); }
.as-gm__punt.is-clic::before { animation: as-gm-clic .5s ease-out; }
@keyframes as-gm-clic { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }

/* ══ LA SEZIONE (site/prova, demo «gmail»): titolo, la scena, i capitoli sotto ══
   Niente riquadro grigio intorno (il palco è già il riquadro), niente riga e card: i capitoli dicono cosa succede. */
.as-prova--gmail .as-prova__demo { display: block; padding: 0; border-radius: 0; background: none; overflow: visible; }
@media (min-width: 1000px) {
	.as-prova--gmail .as-prova__testa { display: block; }
	.as-prova--gmail .as-prova__titolo { max-width: none; }
}
.as-prova__capitoli { position: relative; margin-top: 22px; }
.as-prova__capitoli .as-cap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.as-cap__btn { appearance: none; display: grid; align-content: start; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--as-ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-cap__btn:focus-visible { outline: 2px solid var(--as-arancio); outline-offset: 6px; border-radius: 8px; }
.as-cap__barra { display: block; height: 3px; margin-bottom: 12px; overflow: hidden; border-radius: 3px; background: var(--as-line); }
.as-cap__barra i { display: block; height: 100%; border-radius: inherit; background: var(--as-arancio); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.as-cap__n { color: var(--as-muted); transition: color .35s ease; }
.as-cap__t { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.as-cap__r { font-size: 15px; line-height: 1.45; color: var(--as-muted); text-wrap: pretty; }
/* con la scena viva: il capitolo in corso in nero, gli altri spenti; quelli passati col numero arancio */
.as-prova__capitoli.is-viva .as-cap__btn { color: rgba(10, 10, 10, .38); transition: color .35s ease; }
.as-prova__capitoli.is-viva .as-cap__r { color: inherit; }
.as-prova__capitoli.is-viva .as-cap__voce.is-on .as-cap__btn { color: var(--as-ink); }
.as-prova__capitoli.is-viva .as-cap__voce.is-on .as-cap__r { color: var(--as-muted); }
.as-prova__capitoli.is-viva .as-cap__voce:is(.is-on, .is-fatto) .as-cap__n { color: var(--as-arancio); }
@media (hover: hover) {
	.as-prova__capitoli.is-viva .as-cap__btn:hover { color: var(--as-ink); }
}
.as-cap__rivedi { position: absolute; z-index: 3; right: 18px; top: -70px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--as-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.as-cap__rivedi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-prova__capitoli.is-finito .as-cap__rivedi { opacity: 1; transform: none; pointer-events: auto; }
.as-prova__capitoli:not(.is-viva) .as-cap__rivedi { display: none; }
/* da telefono: quattro barre in fila come le storie e, sotto, UN capitolo alla volta che compare (Rami, 04/11: «tipo a
   comparsa: compare l'1, appena è finito il suo tempo compare il 2, e così via fino al 4»). Il numero grande sale e si
   accende d'arancio, poi il titolo, poi la riga; quello di prima esce in alto. Senza script: i quattro in colonna. */
@media (max-width: 699px) {
	.as-prova__capitoli { margin-top: 16px; }
	.as-prova__capitoli .as-cap { position: relative; gap: 6px; padding-bottom: 112px; }
	.as-cap__barra { margin-bottom: 0; }
	.as-cap__btn { gap: 0; padding: 10px 0; margin: -10px 0; }
	.as-cap__voce :is(.as-cap__n, .as-cap__t, .as-cap__r) { position: absolute; visibility: hidden; opacity: 0; transform: translateY(-14px); transition: opacity .25s ease, transform .35s ease, visibility 0s .35s; }
	.as-cap__n { top: 26px; left: 0; width: 64px; font-size: 46px !important; font-weight: 300; line-height: 1; letter-spacing: -.045em !important; color: transparent; -webkit-text-stroke: 1px var(--as-arancio); font-variant-numeric: tabular-nums; }
	.as-cap__t { top: 28px; left: 70px; right: 0; font-size: 18.5px; }
	.as-cap__r { top: 56px; left: 70px; right: 0; font-size: 14.5px; }
	.as-prova__capitoli:not(.is-viva) .as-cap { grid-template-columns: 1fr; gap: 18px; padding-bottom: 0; }
	.as-prova__capitoli:not(.is-viva) .as-cap__voce :is(.as-cap__n, .as-cap__t, .as-cap__r) { position: static; visibility: visible; opacity: 1; transform: none; }
	.as-prova__capitoli:not(.is-viva) .as-cap__n { width: auto; font-size: 13px !important; color: var(--as-muted) !important; -webkit-text-stroke: 0; }
	.as-prova__capitoli.is-viva .as-cap__voce.is-on :is(.as-cap__n, .as-cap__t, .as-cap__r) { visibility: visible; opacity: 1; transform: none; transition: none; animation: as-cap-sale .75s cubic-bezier(.2, .8, .2, 1) both; }
	.as-prova__capitoli.is-viva .as-cap__voce.is-on .as-cap__n { animation-name: as-cap-numero; animation-duration: .9s; }
	.as-prova__capitoli.is-viva .as-cap__voce.is-on .as-cap__t { animation-delay: .14s; }
	.as-prova__capitoli.is-viva .as-cap__voce.is-on .as-cap__r { animation-delay: .28s; }
	.as-cap__rivedi { top: -58px; right: 12px; height: 36px; font-size: 13.5px; }
}
@keyframes as-cap-sale { from { opacity: 0; transform: translateY(22px); } }
@keyframes as-cap-numero {
	0% { opacity: 0; transform: translateY(30px) scale(.82); color: transparent; }
	55% { opacity: 1; transform: none; color: transparent; }
	100% { opacity: 1; transform: none; color: var(--as-arancio); }
}