/* Lizas — beta web. Componenti dalla v2.2 del design; in fondo le parti proprie dell'app vera. */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--font); color: var(--testo); background: var(--lilla); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--viola-scuro); }
:focus-visible { outline: 2.5px solid var(--viola); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.ic { flex: none; display: block; }
[dir=rtl] .flip { transform: scaleX(-1); }

/* ---------- Struttura di una schermata ---------- */
.body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--s4) var(--s4); }
.body.c { display: flex; flex-direction: column; }
.body.np { padding: 0; }
.foot { flex: none; padding: var(--s3) var(--s4) var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.grow { flex: 1; }
.nav { flex: none; padding: 0 var(--s2); }
.nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; }
.nav-s { display: flex; justify-content: flex-start; }
.nav-e { display: flex; justify-content: flex-end; }
.nav-t { text-align: center; display: flex; flex-direction: column; min-width: 0; max-width: 220px; }
.nav-t b { font-size: var(--t-head); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-t small { font-size: var(--t-cap); color: var(--testo-2); }
.nav h1 { font-family: var(--font-tondo); font-size: var(--t-large); font-weight: 700; letter-spacing: -.02em; padding: 2px var(--s2) var(--s2); }
.nb { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--viola); font-size: var(--t-body); gap: 2px; padding: 0 6px; border-radius: 12px; }
.dark .nb { color: #fff; }
.chat-h { display: flex; align-items: center; gap: 8px; min-height: 44px; text-align: start; min-width: 0; }
.chat-h > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.chat-h b { font-size: var(--t-sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-h small { font-size: var(--t-cap); color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav.chatnav .nav-row { grid-template-columns: auto 1fr auto; }
.nav.chatnav { border-bottom: 1px solid var(--linea); }
.nav.chatnav .nav-t { max-width: none; text-align: start; }

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s6) var(--s2) var(--s2); }
.h-t { font-family: var(--font-tondo); font-size: var(--t-title); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.h-p { color: var(--testo-2); line-height: 1.4; text-wrap: pretty; }
.dark .h-p { color: #CFC8DC; }
.lead { color: var(--testo-2); font-size: var(--t-sub); line-height: 1.4; padding: var(--s2) var(--s1) 0; }

/* ---------- Pulsanti ---------- */
.btn { min-height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: var(--t-body); padding: 10px 18px; width: 100%; text-align: center; line-height: 1.2; }
.btn.pri { background: var(--viola); color: #fff; }
.btn.sec { background: var(--lilla-2); color: var(--viola-scuro); }
.btn.pln { color: var(--viola); min-height: 44px; font-weight: 500; }
.btn.dng { background: var(--errore); color: #fff; }
.btn.dngp { color: var(--errore); min-height: 44px; }
.btn:disabled { background: #E3DEEA; color: #7D768B; cursor: default; }
.row2 { display: flex; gap: var(--s2); }

/* ---------- Celle e gruppi ---------- */
.grp { margin-top: var(--s5); }
.grp h3 { font-size: var(--t-foot); font-weight: 600; color: var(--testo-2); padding: 0 var(--s3) 6px; }
.grp-b { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; }
.cell { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; width: 100%; font-size: var(--t-body); }
.cell + .cell { border-top: 1px solid var(--linea); }
.cell-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--bianco)); color: var(--c); flex: none; }
.cell-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cell-t { overflow-wrap: anywhere; }
.cell-s { font-size: var(--t-foot); color: var(--testo-2); line-height: 1.3; }
.cell-v { color: var(--testo-2); font-size: var(--t-sub); flex: none; max-width: 46%; text-align: end; }
.chev { color: var(--testo-3); flex: none; }
.cell.danger .cell-t { color: var(--errore); }
.grp-f { font-size: var(--t-foot); color: var(--testo-2); padding: 6px var(--s3) 0; line-height: 1.35; }
.sw { width: 51px; height: 31px; border-radius: 99px; background: #CFC8DA; position: relative; flex: none; transition: background .2s; }
.sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--bianco); box-shadow: 0 1px 3px rgba(41, 35, 56, .3); transition: translate .2s; }
.sw.on { background: var(--viola); }
.sw.on i { translate: 20px 0; }

/* ---------- Campi ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s4); }
.fld label { font-size: var(--t-foot); font-weight: 600; color: var(--testo-2); padding-inline-start: 4px; }
.inp { display: flex; align-items: center; gap: 8px; min-height: 52px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco); padding: 0 14px; color: var(--testo-2); }
.inp input { flex: 1; border: 0; outline: 0; background: none; min-width: 0; height: 48px; color: var(--testo); }
.inp:focus-within { border-color: var(--viola); }
.inp.bad { border-color: var(--errore); }
.inp.srch { min-height: 40px; border-radius: 12px; background: var(--lilla); border-color: transparent; }
.inp.srch input { height: 38px; }
.hint { font-size: var(--t-foot); color: var(--testo-2); padding-inline-start: 4px; display: flex; gap: 6px; align-items: center; line-height: 1.35; }
.hint.bad { color: var(--errore); }
.hint.ok { color: var(--ok); }
.code { display: flex; gap: 8px; justify-content: center; margin-top: var(--s5); direction: ltr; }
.code input { width: 46px; height: 58px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco); text-align: center; font-size: 24px; font-weight: 600; outline: 0; }
.code input:focus { border-color: var(--viola); }
.code.bad input { border-color: var(--errore); }
.sugg { display: flex; gap: 8px; flex-wrap: wrap; }
.sugg button { min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--lilla-2); color: var(--viola-scuro); font-size: var(--t-sub); font-weight: 600; }

/* Riga a scelta (casella o opzione singola) */
.ck { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco); width: 100%; text-align: start; margin-top: var(--s2); line-height: 1.35; }
.ck-b { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #A9A0BA; flex: none; display: grid; place-items: center; color: transparent; }
.ck.rd .ck-b { border-radius: 50%; }
.ck[aria-checked=true] { border-color: var(--viola); }
.ck[aria-checked=true] .ck-b { background: var(--viola); border-color: var(--viola); color: #fff; }
.ck small { display: block; color: var(--testo-2); font-size: var(--t-foot); margin-top: 2px; }

/* ---------- Avatar, etichette, avvisi ---------- */
.av { width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: grid; place-items: center; background: hsl(var(--h) 60% 90%); color: hsl(var(--h) 45% 30%); font-weight: 700; font-size: calc(var(--s) * .36); letter-spacing: -.02em; }
.lg { flex: none; }
.lg.code { font-size: 10px; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 1.5; align-self: center; }
.demo { display: inline-flex; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--attenzione-sfondo); color: var(--attenzione-testo); white-space: nowrap; }
.ban { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: var(--t-foot); line-height: 1.35; background: var(--lilla); margin-top: var(--s3); }
.ban.warn { background: var(--attenzione-sfondo); color: var(--attenzione-testo); }
.ban.err { background: var(--errore-sfondo); color: var(--errore); }
.ban b { font-weight: 600; }
.ban button { color: inherit; font-weight: 700; text-decoration: underline; }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s3); padding: var(--s6); }
.empty-i { width: 72px; height: 72px; border-radius: 50%; background: var(--lilla-2); color: var(--viola); display: grid; place-items: center; }
.tips { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.tip { display: flex; gap: 12px; align-items: center; text-align: start; }
.tip-i { width: 40px; height: 40px; border-radius: 12px; background: var(--lilla-2); color: var(--viola); display: grid; place-items: center; flex: none; }
.tip small { display: block; color: var(--testo-2); font-size: var(--t-foot); }

/* ---------- Lista chat ---------- */
.filt { display: flex; gap: 8px; padding: var(--s3) var(--s4) var(--s2); }
.filt button { min-height: 34px; padding: 0 14px; border-radius: 99px; background: var(--lilla); font-size: var(--t-sub); font-weight: 500; }
.filt button.on { background: var(--prugna); color: #fff; }
.cr { display: flex; gap: 12px; align-items: center; padding: 10px var(--s4); width: 100%; min-height: 72px; }
.cr-m { flex: 1; min-width: 0; }
.cr-t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cr-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-h { font-size: var(--t-foot); color: var(--testo-2); flex: none; }
.cr-p { display: flex; gap: 8px; justify-content: space-between; align-items: center; color: var(--testo-2); font-size: var(--t-sub); margin-top: 2px; }
.cr-p > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; gap: 5px; align-items: center; min-width: 0; }
.badge { min-width: 22px; height: 22px; border-radius: 11px; background: var(--viola); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; flex: none; }
.tabbar { flex: none; display: flex; border-top: 1px solid var(--linea); padding-top: 6px; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; color: var(--testo-2); font-size: 11px; font-weight: 500; }
.tabbar .on { color: var(--viola); font-weight: 700; }

/* ---------- Conversazione ---------- */
.chat { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s3) var(--s2); display: flex; flex-direction: column; gap: 6px; }
.day { align-self: center; font-size: var(--t-cap); color: var(--testo-2); background: var(--lilla); padding: 3px 10px; border-radius: 99px; margin: 6px 0; }
.msg { display: flex; gap: 6px; max-width: 84%; align-items: flex-end; }
.msg.me { align-self: flex-end; }
.msg.them { align-self: flex-start; }
.bub { border-radius: 20px; padding: 9px 13px 7px; min-width: 0; }
.me .bub { background: var(--lilla-2); border-end-end-radius: 6px; }
.them .bub { background: var(--bianco); border: 1px solid var(--linea); border-end-start-radius: 6px; }
.b-who { font-size: var(--t-foot); font-weight: 700; color: hsl(var(--h) 45% 34%); margin-bottom: 2px; }
.b-t { line-height: 1.32; overflow-wrap: anywhere; }
.b-tr { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(118, 83, 207, .24); font-size: var(--t-sub); color: #473F5C; line-height: 1.32; align-items: baseline; }
.b-tr p { overflow-wrap: anywhere; min-width: 0; }
.b-tr button { color: var(--viola-scuro); font-weight: 700; text-decoration: underline; min-height: 28px; }
.b-multi { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(118, 83, 207, .24); font-size: var(--t-foot); color: var(--viola-scuro); font-weight: 600; min-height: 34px; width: 100%; }
.b-m { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--testo-2); margin-top: 3px; }
.b-m .rd { color: var(--viola); }
.b-orig { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: var(--t-foot); color: var(--viola-scuro); font-weight: 600; }
.b-o { font-size: var(--t-sub); color: var(--testo-2); padding-top: 6px; border-top: 1px solid var(--linea); line-height: 1.32; overflow-wrap: anywhere; }
.b-wait { display: flex; align-items: center; gap: 6px; font-size: var(--t-foot); color: var(--testo-2); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dt 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dt { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.read { align-self: flex-end; font-size: 11px; color: var(--testo-2); margin: -2px 6px 2px; }

.vm { display: flex; align-items: center; gap: 10px; min-width: 216px; direction: ltr; }
.vm-p { width: 40px; height: 40px; border-radius: 50%; background: var(--viola); color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.vm-p::before { content: ''; position: absolute; inset: -4px; }
.vm-w { display: flex; align-items: center; gap: 2px; height: 30px; flex: 1; }
.vm-w i { width: 3px; border-radius: 2px; background: #B5A3E4; height: calc(var(--h) * 1%); flex: none; }
.them .vm-w i { background: #D2C9E2; }
.vm-w i.on { background: var(--viola); }
.vm-d { font-size: var(--t-foot); font-variant-numeric: tabular-nums; color: var(--testo-2); }
.vm-l { display: flex; align-items: center; gap: 5px; font-size: var(--t-cap); color: var(--testo-2); margin-top: 5px; }
.vm.pend .vm-w i { animation: sh 1.3s infinite; animation-delay: calc(var(--i) * -45ms); }
.vm.pend .vm-p { background: none; border: 3px solid #C9BBEC; border-top-color: var(--viola); animation: spin 1s linear infinite; }
.vm.fail .vm-p { background: var(--errore); }
@keyframes sh { 50% { opacity: .3; } }
@keyframes spin { to { rotate: 360deg; } }
.b-err { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(180, 50, 74, .3); font-size: var(--t-foot); color: var(--errore); }
.b-err button { font-weight: 700; text-decoration: underline; min-height: 32px; color: var(--errore); }

.comp { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--linea); }
.ci { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--viola); flex: none; }
.ci.go { background: var(--viola); color: #fff; }
.ci-f { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--linea); border-radius: 22px; background: var(--bianco); display: flex; align-items: center; padding: 9px 14px; }
.ci-f:focus-within { border-color: var(--viola); }
.ci-f textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; height: calc(22px * var(--k)); line-height: calc(22px * var(--k)); min-width: 0; field-sizing: content; max-height: 96px; }
.recbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--rosa-chiaro); }
.rec-d { width: 10px; height: 10px; border-radius: 50%; background: var(--errore); animation: sh 1s infinite; flex: none; }
.rec-t { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--t-sub); }
.rec-w { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; }
.rec-w i { width: 3px; height: 60%; border-radius: 2px; background: var(--viola); flex: none; animation: wv 1s ease-in-out infinite; animation-delay: calc(var(--i) * -130ms); }
.kb { flex: none; background: #D8D3E0; padding: 8px 4px 6px; display: flex; flex-direction: column; gap: 9px; direction: ltr; }
.kb div { display: flex; justify-content: center; gap: 5px; }
.kb i { display: grid; place-items: center; flex: 1 1 0; max-width: 33px; height: 40px; border-radius: 6px; background: var(--bianco); font-style: normal; font-size: 19px; box-shadow: 0 1px 0 rgba(41, 35, 56, .3); }
.kb i.w { flex: 1.5 1 0; max-width: 48px; background: #B9B2C6; font-size: 13px; } .kb i.sp { flex: 5 1 0; max-width: none; font-size: 14px; }
.offl { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 12px; background: var(--prugna); color: #fff; font-size: var(--t-foot); flex: none; text-align: center; line-height: 1.3; }

/* ---------- Fogli, avvisi di sistema, toast ---------- */
.scrim { position: absolute; inset: 0; background: rgba(41, 35, 56, .4); z-index: 20; display: flex; align-items: flex-end; animation: fd .2s; color: var(--testo); }
.scrim.mid { align-items: center; justify-content: center; }
.sheet { width: 100%; background: var(--avorio); border-radius: 24px 24px 0 0; padding: 8px var(--s4) var(--s8); max-height: 88%; overflow: auto; animation: up .28s cubic-bezier(.2, .8, .2, 1); }
.sheet::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 9px; background: #CFC8DA; margin: 0 auto 12px; }
.sheet h3 { font-size: var(--t-head); text-align: center; }
.sheet .lead { text-align: center; }
.sheet .foot { padding: var(--s4) 0 0; }
@keyframes fd { from { opacity: 0; } }
@keyframes up { from { translate: 0 100%; } }
.alert { width: 272px; background: var(--bianco); border-radius: 16px; text-align: center; overflow: hidden; animation: fd .2s; }
.alert-b { padding: 18px 16px; }
.alert h4 { font-size: 17px; line-height: 1.25; }
.alert p { font-size: 13px; margin-top: 6px; line-height: 1.35; }
.alert-a { display: flex; border-top: 1px solid var(--linea); }
.alert-a button { flex: 1; min-height: 46px; color: var(--viola); font-size: 17px; text-align: center; }
.alert-a button + button { border-inline-start: 1px solid var(--linea); font-weight: 600; }
.toast { position: absolute; bottom: 96px; left: 50%; translate: -50% 0; background: var(--prugna); color: #fff; padding: 10px 16px; border-radius: 99px; font-size: 14px; z-index: 30; max-width: 86%; text-align: center; animation: fd .2s; }
.shr { display: flex; gap: 14px; overflow-x: auto; padding: var(--s4) 0; }
.shr button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; width: 64px; flex: none; text-align: center; }
.shr span { width: 56px; height: 56px; border-radius: 14px; background: var(--lilla-2); color: var(--viola); display: grid; place-items: center; }

/* ---------- Voce: orbita ---------- */
.orb { position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; margin-inline: auto; flex: none; }
.orb-h { position: absolute; inset: -9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 178, 188, .6), rgba(201, 180, 242, .35) 62%, transparent); filter: blur(calc(var(--s) * .06)); }
.orb-r { position: absolute; inset: 0; border-radius: 50%; background: var(--voce); -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89%); mask: radial-gradient(closest-side, transparent 88%, #000 89%); }
.orb-c { position: absolute; inset: 9%; border-radius: 50%; background: rgba(255, 253, 250, .82); }
.dark .orb-c { background: rgba(41, 35, 56, .6); }
.orb-w { display: flex; gap: calc(var(--s) * .045); align-items: center; position: relative; }
.orb-w b { width: calc(var(--s) * .052); border-radius: 99px; background: var(--viola); height: calc(var(--s) * var(--b)); }
.dark .orb-w b { background: #D9C9FA; }
.orb.rec .orb-w b { animation: wv .9s ease-in-out infinite; animation-delay: calc(var(--i) * -.17s); }
.orb.proc .orb-w b { animation: sh 1.4s infinite; animation-delay: calc(var(--i) * -.2s); }
.orb.rec .orb-r { animation: spin 8s linear infinite; }
.orb.proc .orb-r { animation: spin 3.5s linear infinite; }
.orb.idle .orb-h { animation: br 4.5s ease-in-out infinite; }
@keyframes wv { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.45); } }
@keyframes br { 50% { transform: scale(1.07); opacity: .8; } }
.orb.done .orb-w, .orb.err .orb-w { display: none; }
.orb-k { position: relative; color: var(--viola); }
.orb.err .orb-r { background: conic-gradient(#D9D2E3, #B9B0C9, #D9D2E3); }
.orb.err .orb-h { background: radial-gradient(closest-side, rgba(180, 50, 74, .18), transparent); }
.orb.err .orb-k { color: var(--errore); }

.seg-w { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: var(--s2); font-size: var(--t-foot); color: var(--testo-2); font-weight: 600; }
.seg { display: flex; gap: 6px; width: 120px; }
.seg i { flex: 1; height: 5px; border-radius: 9px; background: var(--lilla-2); }
.seg i.on { background: var(--viola); }
.frase { font-family: var(--font-tondo); font-size: calc(22px * var(--k)); line-height: 1.3; font-weight: 600; text-align: center; padding: var(--s5) var(--s2); text-wrap: balance; }
.orb-slot { flex: 1; display: grid; place-items: center; min-height: 120px; }
.stato { text-align: center; color: var(--testo-2); font-size: var(--t-sub); min-height: 2.6em; padding: 0 var(--s4); }
.dark .stato { color: #CFC8DC; }
.recb { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--viola); display: grid; place-items: center; margin-inline: auto; }
.recb i { width: 56px; height: 56px; border-radius: 50%; background: var(--viola); transition: all .2s; }
.recb.on { border-color: var(--errore); }
.recb.on i { width: 28px; height: 28px; border-radius: 8px; background: var(--errore); }
.ctl { min-height: 118px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); }
.card { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--s4); margin-top: var(--s4); }
.card .vm { min-width: 0; }
.card h4 { font-size: var(--t-foot); color: var(--testo-2); font-weight: 600; margin-top: var(--s3); }
.card p { line-height: 1.35; }

/* ---------- Movimento ridotto ---------- */
.rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- v2 ---------- */
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-sec { min-width: 0; flex: 1; }
.b-sec p { overflow-wrap: anywhere; }
.b-more { color: var(--viola-scuro); font-weight: 600; font-size: var(--t-foot); min-height: 32px; text-decoration: none !important; }
.b-tr0 { display: flex; gap: 6px; align-items: baseline; }
.b-o:not([hidden]) { margin-top: 6px; }
.sysc { align-self: center; max-width: 92%; background: var(--lilla); border-radius: 16px; padding: 12px 14px; font-size: var(--t-sub); line-height: 1.35; display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.sysc .btn { min-height: 44px; font-size: var(--t-sub); padding: 6px 10px; }
.provab { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--lilla-2); font-size: var(--t-foot); line-height: 1.35; text-align: start; flex: none; width: 100%; }
.provab .orb { margin: 0; }
.provab > span { flex: 1; }
.rec-v { font-size: var(--t-cap); color: var(--testo-2); white-space: nowrap; flex: none; }

/* ---------- v2.1 ---------- */
.vm-p.off { background: #A79EB8; }
.offl { flex-wrap: wrap; }
.offl button { color: #fff; font-weight: 700; text-decoration: underline; min-height: 32px; }


/* ---------- Beta web: struttura dell'app ---------- */
html, body { height: 100%; background: var(--avorio); overscroll-behavior: none; }
body { background: var(--avorio); }
#app { height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; position: relative; background: var(--avorio); color: var(--testo); overflow: hidden; padding-top: env(safe-area-inset-top); }
#screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
@media (min-width: 600px) { body { background: var(--lilla); } #app { box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -30px rgba(41, 35, 56, .35); } }
.tabbar { padding-bottom: env(safe-area-inset-bottom); }
.comp { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.foot { padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
.scrim { position: absolute; }
.toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
.avvio { flex: 1; display: grid; place-items: center; }
.avvio .orb { opacity: .9; }
.codice { font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .02em; overflow-wrap: anywhere; background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 14px; padding: 14px; text-align: center; user-select: all; -webkit-user-select: all; line-height: 1.5; }
.inp select { flex: 1; border: 0; outline: 0; background: none; height: 48px; color: var(--testo); font: inherit; min-width: 0; }
.inp textarea { flex: 1; border: 0; outline: 0; background: none; resize: none; padding: 12px 0; min-height: 76px; }
.vscelta { display: flex; gap: 6px; padding: 6px 10px 0; align-items: center; font-size: var(--t-foot); color: var(--testo-2); flex: none; }
.vscelta button { min-height: 32px; padding: 0 12px; border-radius: 99px; background: var(--lilla); font-size: var(--t-foot); font-weight: 600; color: var(--testo-2); }
.vscelta button[aria-pressed=true] { background: var(--lilla-2); color: var(--viola-scuro); }
.vm audio { display: none; }
.vm-w i { transition: background .1s; }
.b-azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.b-azioni button { color: var(--viola-scuro); font-weight: 700; text-decoration: underline; min-height: 32px; font-size: var(--t-foot); }
.altri { align-self: center; min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--lilla); font-size: var(--t-foot); font-weight: 600; color: var(--viola-scuro); margin-bottom: 6px; }
.passi { counter-reset: p; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.passi li { list-style: none; display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.passi li::before { counter-increment: p; content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: var(--lilla-2); color: var(--viola-scuro); font-weight: 700; display: grid; place-items: center; flex: none; font-size: 14px; }
.riga-stato { display: flex; gap: 8px; align-items: center; font-size: var(--t-foot); color: var(--testo-2); padding: 0 var(--s1); margin-top: 6px; }
.liv { height: 6px; border-radius: 9px; background: var(--lilla-2); overflow: hidden; width: 120px; margin: 8px auto 0; }
.liv i { display: block; height: 100%; width: 0; background: var(--viola); transition: width .08s; }
.vista { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Titolo grande sulla riga dei comandi; ricerca più alta e subito sotto */
.nav.big { padding: 0 var(--s2) 0 var(--s4); }
.nav.big .nav-row { grid-template-columns: 1fr auto; min-height: 52px; }
.nav.big h1 { padding: 0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inp.srch { min-height: 48px; border-radius: 14px; font-size: var(--t-body); }
.inp.srch input { height: 46px; }

/* Interface language is separate from the language of messages. */
.ui-language {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;flex-shrink:0;}
.ui-language label {font-size:14px;color:var(--testo-2,#61586b);}
.ui-language select {max-width:55%;min-height:44px;font:inherit;font-size:16px;padding:8px 12px;border:1px solid var(--linea,#e5ddef);border-radius:12px;background:var(--fondo,#fffdfa);color:var(--testo,#282333);}
.ci[aria-disabled="true"] {opacity:.45;}

/* Tastiera: l'app occupa solo l'area visibile e la pagina sotto non scorre */
html, body { position: fixed; inset: 0; overflow: hidden; width: 100%; }
#app { height: 100%; }
html.tastiera .comp { padding-bottom: 6px; }
html.tastiera .tabbar { display: none; }
.ci-f textarea { field-sizing: fixed; height: auto; min-height: calc(22px * var(--k)); max-height: 124px; overflow-y: auto; }
.comp { touch-action: manipulation; }
.b-t, .b-sec, .b-sec p, .b-sec span { white-space: pre-wrap; }
/* Permesso del microfono nella sezione della voce */
.mic-riga { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--bianco); text-align: start; }
.mic-riga > span:first-child { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilla-2); color: var(--viola-scuro); }
.mic-riga.ok > span:first-child { background: var(--viola); color: #fff; }
.mic-riga.no > span:first-child { background: #F8E3E7; color: var(--errore); }
.mic-riga div { flex: 1; min-width: 0; }
.mic-riga b { display: block; font-weight: 600; }
.mic-riga small { display: block; color: var(--testo-2); font-size: var(--t-sub); line-height: 1.3; }
.mic-riga button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--viola); color: #fff; font-weight: 600; font-size: var(--t-sub); }

/* Foto profilo: copre le iniziali quando arriva */
.av { position: relative; overflow: hidden; }
.av-f { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .2s; }
.av-f.pronta { opacity: 1; }
.pf { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 16px; }
.pf.carica .av { opacity: .5; }
.pf-a { display: flex; gap: 8px; }
.pf-a .btn { width: auto; min-height: 44px; padding: 8px 16px; font-size: var(--t-sub); }
.scheda { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 8px; }
.scheda .av { margin-bottom: 8px; }
.scheda .bio { margin-top: 10px; max-width: 30ch; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
button.chat-h { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; max-width: 100%; }

/* Foto in chat: lo spazio è riservato prima che l'immagine arrivi */
.msg.foto .bub { padding: 4px 4px 6px; max-width: min(78%, 268px); }
.msg.foto .b-m { padding: 0 8px; }
.ph { display: block; position: relative; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--lilla-2); padding: 0; border: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.ph img.pronta, .ph.loc img { opacity: 1; }
.ph.loc img { filter: saturate(.85) brightness(.96); }
.ph.vuota { display: grid; place-items: center; color: var(--viola-scuro); width: 220px; max-width: 100%; }
.ph-s { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(41, 35, 56, .55); color: #fff; display: grid; place-items: center; }
.ph-d { padding: 6px 9px 0; }
.msg.foto .b-err { margin: 6px 8px 0; }

/* Anteprima prima dell'invio e foto a tutto schermo */
.anteprima, .visore { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #17131F; color: #fff; animation: fd .18s; }
.anteprima header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 52px; padding: env(safe-area-inset-top) 6px 0; text-align: center; }
.anteprima header .nb, .visore .nb { color: #fff; }
.a-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.a-img img, .visore img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.a-img .lead { color: #D9D2E6; text-align: center; }
.anteprima .comp { border-top: 0; background: #17131F; }
.anteprima .ci-f { background: #2A2436; border-color: #3A3349; }
.anteprima textarea { color: #fff; }
.anteprima textarea::placeholder { color: #A79FB8; }
.visore { align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.visore .nb { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; z-index: 1; background: rgba(0, 0, 0, .35); border-radius: 50%; }
.visore img { opacity: 0; transition: opacity .2s; }
.visore img.pronta { opacity: 1; }
#bio { min-height: 56px; }

/* Parte alta: un po' d'aria sotto l'ora e la tacca, senza tornare alla riga vuota */
#app { box-sizing: border-box; padding-top: max(6px, env(safe-area-inset-top)); }
.nav.big { padding-top: 6px; }
.nav.big .nav-row { min-height: 48px; }
.nav.big .nb { color: var(--viola); }

/* Nota dentro una bolla: informazione, non errore */
.b-nota { margin: 6px 8px 0; font-size: var(--t-sub); color: var(--testo-2); line-height: 1.35; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.b-nota button { color: var(--viola-scuro); font-weight: 600; text-decoration: underline; min-height: 32px; }
.ph.vuota.loc { width: 220px; }
#bio:disabled { opacity: .6; }

/* A failed photo download has an explicit action, separate from sending it again. */
.media-riprova { position:absolute; inset:auto 8px 10px; padding:10px; border-radius:10px; background:var(--fondo,#fffdfa); color:var(--viola,#7653cf); font:inherit; font-size:13px; text-align:center; line-height:1.35; }
button.media-riprova { border:0; cursor:pointer; }
.ph[data-media-retry] { min-height:120px; }

/* Testo principale lungo: una decina di righe, poi «Leggi tutto» */
.b-t.clamp.lungo { -webkit-line-clamp: 10; }
/* Avanzamento di una foto in invio */
.ph-a { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(41, 35, 56, .62); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-a .barra { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ph-a .barra b { display: block; height: 100%; background: var(--bianco); border-radius: 4px; transition: width .15s linear; }
.ph-a .giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: giro .8s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-a .giro { animation: none; } .ph-a .barra b { transition: none; } }

/* Chat photos preserve the full image. Explicit bounds avoid percentage-height cropping on iOS. */
.msg.foto .bub { max-width:min(88%,328px); }
.ph { box-sizing:border-box; max-height:420px; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.a-img img, .visore img { width:auto; height:auto; object-fit:contain; }
.group-author { font-size:12px; font-weight:700; color:var(--viola-scuro); padding:3px 7px 5px; }
.group-delivery { font-size:11px; color:var(--testo-2); padding:4px 8px; }
.group-delivery button { margin-left:8px; color:var(--viola); font-weight:600; }

.once-choice{padding:10px 18px;background:var(--bg)}
.once-choice .hint{margin:4px 0;font-size:12px}
/* Preview images must fit the available area without their intrinsic size moving the controls. */
.anteprima{overflow:hidden}
.anteprima header,.anteprima .comp{flex-shrink:0}
.a-img{position:relative;overflow:hidden}
.a-img img{position:absolute;inset:0;width:100%;height:100%;padding:8px;object-fit:contain}
.once-choice{flex:0 0 auto;background:#17131F;color:#fff}
.once-choice .ck{background:#2A2436;color:#fff;border-color:#76668F}
.once-choice .hint{color:#D9D2E6}

/* Access screens have a single scroll area, including actions, on small/keyboard viewports. */
.auth-body{display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:max(20px,env(safe-area-inset-bottom));scroll-padding:16px}
.auth-body .fld,.auth-body .inp{flex-shrink:0}
.auth-body .hero{padding-top:20px}
.auth-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-bottom:8px}
.auth-view input{font-size:17px;scroll-margin:16px}

/* Moduli di accesso: «Mostra password» dentro il campo; azioni che scorrono con i campi */
.auth-form { display: block; }
.inp .vedi { flex: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; color: var(--testo-2); border-radius: 12px; }
.inp .vedi[aria-pressed="true"] { color: var(--viola); }
.vista:not(.auth-view) .auth-form .auth-actions { margin-top: 20px; }
.vista:not(.auth-view) .auth-form input { font-size: 17px; scroll-margin: 16px; }

/* Access uses native page scrolling: no fixed viewport or nested scroller fighting the iOS keyboard. */
html.auth-mode,html.auth-mode body{position:static;inset:auto;height:auto;min-height:100%;overflow:visible;width:100%}
html.auth-mode #app{height:auto!important;min-height:100svh;overflow:visible;transform:none!important}
html.auth-mode #screen{flex:1 0 auto}
html.auth-mode .auth-view{flex:1 0 auto;min-height:0}
html.auth-mode .auth-body{flex:1 0 auto;overflow:visible;overscroll-behavior:auto}
html.auth-mode .hero{animation:none;transition:none}
.auth-view .hint.bad{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.auth-view *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Compact photo composer: the image retains its complete frame. */
.anteprima{background:#101217}
.anteprima header{background:linear-gradient(#0007,transparent);padding-top:env(safe-area-inset-top,0px)}
.anteprima .comp{background:#101217;gap:10px;padding:12px 14px max(12px,env(safe-area-inset-bottom));align-items:flex-end}
.anteprima .ci-f{display:flex;align-items:flex-end;background:#282b32;border-radius:24px;min-height:46px;padding:4px 6px 4px 14px}
.anteprima .ci-f textarea{flex:1;min-width:0;background:none;color:#fff;padding:9px 0}
.anteprima .ci-f textarea::placeholder{color:#b9bdc8}
.anteprima .go{flex:0 0 46px;width:46px;height:46px;border-radius:50%}
.once-toggle{flex:0 0 40px;width:40px;height:38px;display:grid;place-items:center;border:0;background:none;color:#c8cbd3;border-radius:50%;touch-action:manipulation}
.once-mark{width:24px;height:24px;border:1.7px dashed currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;line-height:1}
.once-toggle[aria-pressed=true]{background:var(--brand,#8958d5);color:white}
.once-toggle:focus-visible{outline:2px solid white;outline-offset:2px}
.once-hint{margin:0;padding:10px 20px 0;flex-shrink:0;font-size:12px;line-height:1.4;color:#d9dce3;text-align:center}
.once-hint[hidden]{display:none}
.once-message{display:flex;gap:10px;align-items:center;min-height:52px;margin:0;padding:8px 5px;color:inherit;border:0;background:none;font:inherit;text-align:start}
button.once-message{cursor:pointer;width:100%;touch-action:manipulation}
.once-message.opened{opacity:.65}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Familiar conversation actions, compact on iPhone. */
.msg-actions{border:0;background:transparent;color:inherit;padding:3px 4px;display:inline-flex;opacity:.65;min-width:28px;min-height:24px;align-items:center;justify-content:center}
.reaction-picker{display:flex;justify-content:space-between;gap:6px;margin-bottom:14px}
.reaction-picker button{font-size:27px;width:44px;height:44px;border:0;border-radius:50%;background:var(--lilla);touch-action:manipulation}
.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.reactions button{font:inherit;font-size:13px;border:1px solid var(--linea);border-radius:16px;padding:4px 8px;background:var(--bianco);color:var(--testo)}.reactions button.selected{border-color:var(--viola)}
.reply-quote{border-inline-start:3px solid var(--viola);background:var(--lilla);border-radius:6px;padding:6px 9px;margin-bottom:7px;font-size:13px;display:flex;flex-direction:column;gap:3px}.reply-quote span{white-space:pre-wrap;max-height:54px;overflow:hidden}
.reply-draft{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--lilla);border-inline-start:3px solid var(--viola)}.reply-draft span{flex:1;min-width:0}.reply-draft small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reply-draft{flex-shrink:0}.typing-status{font-size:12px;color:var(--testo-2);padding:0 18px;min-height:0;flex-shrink:0}.typing-status:not(:empty){padding-top:4px;padding-bottom:4px}
.deleted{font-style:italic;color:var(--testo-2)}
.turn-room{text-align:center;max-width:460px;margin:0 auto}.turn-room .avatar{margin:auto}.turn-status{font-size:18px;font-weight:600;min-height:70px;display:grid;place-items:center;padding:14px}.turn-room audio{width:100%;margin:10px 0 20px}#turn-actions{display:grid;gap:10px}
#call-alert{position:fixed;z-index:80;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(94vw,430px);padding:0 10px}#call-alert button{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--linea);border-radius:18px;background:var(--bianco);color:var(--testo);box-shadow:0 4px 24px #0002;padding:14px;text-align:start;font:inherit}#call-alert small{display:block;margin-top:4px;font-size:12px}
:root[data-theme=dark]{color-scheme:dark;--avorio:#15131b;--prugna:#ede8f5;--testo:#ede8f5;--testo-2:#b6adc7;--testo-3:#a096b3;--bianco:#221e2c;--lilla:#2a2435;--lilla-2:#382b50;--linea:#40364e;--viola:#b095f2;--viola-scuro:#c2acf4;--errore:#ff92a5;--errore-sfondo:#43222c;--ok:#7aceaa;--attenzione-sfondo:#3c3221;--attenzione-testo:#f3d295}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){color-scheme:dark;--avorio:#15131b;--prugna:#ede8f5;--testo:#ede8f5;--testo-2:#b6adc7;--testo-3:#a096b3;--bianco:#221e2c;--lilla:#2a2435;--lilla-2:#382b50;--linea:#40364e;--viola:#b095f2;--viola-scuro:#c2acf4;--errore:#ff92a5;--errore-sfondo:#43222c;--ok:#7aceaa}}

.btn.pri,.ci.go,.vm-p,.badge,.ck[aria-checked=true] .ck-b{background:var(--action,#7653CF);color:#fff}
.toast,.offl,.filt button.on{background:#292338;color:#fff}
.fld select,.fld textarea{width:100%;font:inherit;color:var(--testo);background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:12px;margin-top:8px}.fld textarea{min-height:90px}

.turn-room .av{margin:0 auto}