/* =============================================================================
   app.css - guscio della PWA AppleNearoo (Fase 1: shell installabile).
   Nessun valore di colore letterale: si usano SOLO le variabili di tokens.css.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* L'attributo `hidden` deve VINCERE su qualunque display del foglio di stile:
   `.avviso { display: flex }` ha specificita' maggiore della regola del browser
   `[hidden] { display: none }`, quindi senza questa riga l'avviso della sessione
   scaduta resterebbe visibile per sempre (bug silenzioso: nessun errore, solo un
   avviso falso). La guardia lo verifica. */
[hidden] {
  display: none !important;
}

/* Un `<dialog>` CHIUSO non si vede (guscio v71, 29/10/2026). Stessa ragione
   della regola qui sopra: `dialog:not([open]) { display: none }` e' dello UA
   stylesheet e PERDE contro una classe che dichiara `display`
   (`.tenda--profilo { display: flex }`), quindi la scheda profilo della chat —
   che nessuno aveva aperto — veniva disegnata come tenda in basso VUOTA sopra
   la schermata di benvenuto (segnalazione dall'app: "pannello Profilo vuoto
   sovrapposto in basso"). La regola vale per OGNI `<dialog>` del guscio, anche
   per quelli che arriveranno: `open` resta l'unico modo per mostrarlo. */
dialog:not([open]) {
  display: none !important;
}

/* =============================================================================
   GUSCIO A SCHERMO INTERO (guscio v8)
   La PAGINA non scorre MAI: `html` e `body` sono alti quanto lo schermo con
   `overflow: hidden`. Lo scorrimento vive SOLO dentro il pannello della scheda
   (`.vista`) o dentro la schermata di accesso (`.accesso`). Cosi' non esiste
   piu' lo "strabordare" orizzontale/verticale del foglio lungo e la barra in
   basso resta ferma come in un'app nativa.
   ============================================================================= */
html,
body {
  width: 100%;
  /* 100vw = larghezza della finestra anche quando il contenitore ha margini:
     con `overflow: hidden` non esiste barra di scorrimento che la allarghi. */
  width: 100vw;
  height: 100%;
  height: 100dvh;
  /* ALTEZZA VISIBILE MISURATA (guscio v60): `js/viewport-stabilizza.js` scrive
     `--vh` (px) all'avvio, appena WebKit sa quanto e' alto il viewport. Su iOS
     installata il primo frame puo' riportare un'altezza TRONCATA: con `100dvh` e
     basta il guscio si dimensionava su quella misura sbagliata.
     TETTO ASSOLUTO (guscio v84, 30/10/2026, D37): `min(..., 100dvh)`. Il guscio
     non puo' essere piu' alto di quello che si vede, qualunque valore arrivi da
     JavaScript (o da una shell vecchia in cache): un guscio piu' alto del
     viewport spinge fuori dal fondo l'ultimo elemento della colonna — il
     composer della Chat, che deve stare SOPRA la barra, e i campi in fondo al
     Profilo. E' il difetto del 30/10/2026 (app installata: `--vh` = `screen.height`
     = 34-59px oltre l'area visibile, composer invisibile sotto la barra).
     Senza JavaScript `--vh` vale `100dvh` (tokens.css) e il ripiego qui sotto e'
     lo stesso: il comportamento senza script non cambia. */
  height: min(var(--vh, 100dvh), 100dvh);
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  /* AGGANCIO DELLA RADICE (guscio v81, 30/10/2026). `overflow: hidden` da solo
     NON basta su Safari iOS: un box con `overflow: hidden` resta uno SCROLL
     CONTAINER per lo script. Quando WebKit "rivela" il campo che ha preso il
     focus (campi in fondo al Profilo, composer della Chat) — o quando un
     `scrollIntoView` cerca un antenato scorrevole e ne trova uno — scrive
     `documentElement.scrollTop`: il DOCUMENTO scorre verso l'alto, la testata
     esce dallo schermo e in basso resta la fascia vuota, con il campo
     disallineato. Lo stato non si annulla da solo: resta rotto finche' non si
     ricarica. Con `position: fixed; inset: 0` sulla RADICE il box del documento
     e' ancorato al viewport e non ha nulla da scorrere: `scrollTop` resta 0,
     `scrollIntoView` non ha un contenitore da muovere. Lo scorrimento vero vive
     SOLO dentro il pannello della scheda (`.vista`) e dentro
     `.chat-thread__corpo`. */
  position: fixed;
  inset: 0;
}

html {
  /* RADICE COLORATA (guscio v97): il fondo della pagina e' dichiarato ANCHE qui
     e non solo su `body`. Quando la capsula resta staccata dal bordo, la fascia
     sotto di lei e' la tela della RADICE: senza questa riga la dipingeva il
     browser (bianco/nero), e si vedeva come una striscia di un altro colore.
     Stesso `--bg-base` di `body` e di `theme_color`: nessuna differenza a schermo. */
  background: var(--bg-base);
  /* iOS: il testo non si ingrandisce da solo ruotando il dispositivo. */
  -webkit-text-size-adjust: 100%;
  /* Il doppio tocco NON ingrandisce (un'app nativa non lo fa). Il pinch a due
     dita lo ferma js/viewport-lock.js: `touch-action` da sola non basta su
     Safari. */
  touch-action: manipulation;
}

/* =============================================================================
   CAMPI DI TESTO E ZOOM AUTOMATICO DI WEBKIT (guscio v52)
   iOS ingrandisce la pagina quando riceve il focus un campo con carattere
   MINORE di 16px, e l'ingrandimento resta anche dopo (interfaccia "allargata"
   e fuori dai margini: segnalazione del 29/10/2026). Il rimedio e' il carattere
   a 16px, e vale SOLO su iOS: altrove le misure del progetto (15px nel composer
   della chat, 14px nel profilo) restano quelle approvate.
   ============================================================================= */
/* Il `:root` davanti ai selettori NON e' decorativo: serve la specificita'. Le
   misure approvate dell'APK dichiarano il composer della chat a 15px (classe =
   0,1,0) e una regola con il solo nome dell'elemento (0,0,1) non la batterebbe:
   su iOS il composer resterebbe a 15px e l'auto zoom tornerebbe.
   `:root textarea` (0,1,1) vince su qualunque classe singola del foglio. */
@supports (-webkit-touch-callout: none) {
  :root input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
  :root textarea,
  :root select {
    font-size: 16px;
  }
}

/* =============================================================================
   BLOCCO DELL'ORIENTAMENTO (guscio v52, decide il guscio dal v78)
   La PWA resta verticale. Dove il browser rispetta `orientation: portrait` del
   manifest (Android; iOS installata) questa tendina non compare MAI; dove la
   ignora (Safari in una scheda) copre l'interfaccia e invita a ruotare il
   telefono, cosi' il guscio non si riorganizza mai in orizzontale.

   CHI DECIDE (v78, segnalazione del 30/10/2026): NON la media query
   `(orientation: landscape)`. Quella si calcola sul VIEWPORT, e la TASTIERA
   virtuale lo abbassa: su Chrome Android un telefono verticale 360x740 diventa
   360x300 mentre si scrive, il browser dice `landscape` e la tendina copriva la
   pagina a ogni campo di testo (chat, Radar, Dating, Bottiglie, Profilo).
   L'orientamento VERO (quello del DISPOSITIVO, tastiera esclusa) lo scrive
   `js/orientamento-avviso.js` in `data-orientamento` sulla radice; qui resta
   solo la FORMA: solo un telefono basso (`pointer: coarse`, `max-height`), mai
   un tablet o una finestra stretta del computer.
   ============================================================================= */
.orientamento {
  display: none;
}

.orientamento__icona svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--accento-ciano);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.orientamento__testo {
  max-width: 16em;
  margin: 0;
  color: var(--testo-attenuato);
  font-size: var(--dimensione-testo);
  line-height: var(--interlinea);
  text-align: center;
}

@media (max-height: 560px) and (pointer: coarse) {
  html[data-orientamento='orizzontale'] .orientamento {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spazio-3);
    padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom-reale) + 24px);
    background: var(--bg-base);
  }

  .orientamento__icona svg {
    animation: orientamento-invito 2.4s ease-in-out infinite;
  }
}

/* Il telefono disegnato si raddrizza: e' l'invito a ruotare il dispositivo. */
@keyframes orientamento-invito {
  0%,
  40% {
    transform: rotate(0deg);
  }

  60%,
  100% {
    transform: rotate(-90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientamento__icona svg {
    animation: none;
  }
}

body {
  /* `fixed` + `inset: 0`: su iOS la barra degli indirizzi di Safari non
     "allunga" il guscio; l'altezza e' sempre quella della finestra visibile. */
  position: fixed;
  inset: 0;
  /* CIMA DEL VIEWPORT VISIBILE (guscio v66): con la tastiera aperta su iOS la
     finestra visibile si sposta e `fixed` la ignora — il guscio resterebbe
     ancorato al viewport di layout, cioe' dietro la tastiera. `--vv-top` (0px
     a tastiera chiusa) lo riallinea all'area che si vede. */
  top: var(--vv-top, 0px);
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--dimensione-testo);
  line-height: var(--interlinea);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Nessun elemento puo' allargare la pagina: le immagini stanno nel riquadro. */
img {
  max-width: 100%;
}

/* --- Sfondo: gradiente radiale dal basso + i due glow d'atmosfera ---------- */
.sfondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% 6%, var(--glow-magenta) 0%, transparent 38%),
    radial-gradient(circle at 8% 96%, var(--glow-ciano) 0%, transparent 42%),
    radial-gradient(
      ellipse 120% 90% at 50% 100%,
      var(--bg-stop-basso) 0%,
      var(--bg-stop-centro) 42%,
      var(--bg-stop-transizione) 78%,
      var(--bg-stop-alto) 100%
    );
}

/* --- Nessuna testata fissa (guscio v61) ----------------------------------- */
/* Fino al v60 qui c'erano `.testata` (riga fissa di 48-56px con icona,
   "Nearoo", claim e pulsante lingua) e `.marchio*`. Sono state ELIMINATE: la
   barra rubava altezza al contenuto in ogni schermata. La safe area in alto
   (`--safe-top`, `env(safe-area-inset-top)`) ora la prende il primo elemento
   scorrevole: `.accesso` e `.vista` hanno `calc(… + var(--safe-top))` nel
   padding. Nessuna regola deve reintrodurre un contenitore fisso in cima. */

/* --- Guscio app: una sola scheda visibile, lo scroll vive QUI ------------- */
.guscio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* BLINDATURA (guscio v82, 30/10/2026): il guscio non e' un contenitore che
     scorre e non ha area da scorrere. Vive dentro il `body`, che e' ancorato al
     viewport (`position: fixed; inset: 0; overflow: hidden`, D34) e ne occupa
     esattamente l'altezza: nessun `overflow: auto`, nessun `height` diverso da
     quella del corpo. Lo scorrimento legittimo resta SOLO dentro `.vista` (e
     `.chat-thread__corpo`): la barra in basso e i pannelli non si muovono di un
     pixel quando Safari trascina la pagina per mostrare un campo. */
  position: relative;
}

.viste {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Il pannello di UNA scheda: e' l'unico elemento che scorre. Il fondo tiene
   conto della barra fissa (`--altezza-barra`) e della safe area REALE, cosi'
   l'ultima scheda non finisce mai sotto la barra e non resta una fascia vuota
   in fondo (v. `--safe-bottom-reale` in tokens.css). */
.vista {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--spazio-2) + var(--safe-top)) var(--spazio-4)
    calc(var(--barra-ingombro) + var(--spazio-5));
  display: grid;
  /* COLONNA UNICA LARGA QUANTO IL PANNELLO: `minmax(0, 1fr)`, MAI la traccia
     `auto` implicita. Con la traccia `auto` la griglia si dimensiona sul
     min-content/max-content degli item: il pager del Dating (sette pagine
     affiancate, `flex: 0 0 100%`) la allargava oltre lo schermo, quindi le
     schede uscivano TAGLIATE a destra e lo swipe cadeva fuori asse (ogni pagina
     era larga quanto la traccia, non quanto il pannello). Con `minmax(0, 1fr)`
     la colonna e' esattamente la larghezza visibile e ogni `width: 100%`
     interno vale il pannello. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-4);
  align-content: start;
}

/* Le regole `body[data-sessione='…'] .testata` / `body[data-vista='home']
   .testata` (guscio v8-v60) sono sparite con la barra: il marchio resta solo
   dove appartiene, cioe' nell'hero dell'accesso (`.accesso__logo`) e nella
   testata della Home (`.home__logo`). `body[data-vista]` resta scritto da
   `js/app.js` per la diagnostica e per la barra in basso.


/* --- Accesso (welcome.tsx): hero, consensi e CTA --------------------------- */
/* Le misure sono quelle del componente APK (docs/apk-parity-roadmap.md §4).
   Qui si usano i px del componente e NON la scala `--spazio-*` del guscio: le
   due scale non coincidono (Spacing.three = 16 nell'app, --spazio-3 = 12 nel
   guscio) e la schermata va riprodotta a misura, non "a occhio". I COLORI
   restano in tokens.css (regola di V7). */
.accesso {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Spacing.two ai lati? no: Spacing.four = 24. In fondo Spacing.three (16)
     piu' la barra fissa del guscio e la safe area: il login non finisce mai
     sotto la barra. In ALTO la safe area (guscio v61): senza la testata fissa,
     il notch lo prenota la schermata stessa. */
  padding: calc(8px + var(--safe-top)) 24px
    calc(16px + var(--barra-ingombro));
}

.accesso__interno {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  min-height: 100%;
  margin: 0 auto;
}

/* HERO: flex 1 come il componente, cosi' consensi e CTA restano in fondo
   quando lo schermo e' alto, e la schermata scorre quando non lo e'. */
.accesso__hero {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
}

/* Aura morbida unificante (heroAura: 400x400, tre stop, l'ultimo trasparente). */
.accesso__aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--accesso-alone-viola) 0%,
    var(--accesso-alone-rosa) 50%,
    var(--accesso-alone-fine) 100%
  );
  pointer-events: none;
}

/* Area del logo: i blob sono assoluti rispetto a QUEST'area (top/left 50%),
   quindi restano centrati sul logo a ogni larghezza di schermo. */
.accesso__glow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.accesso__logo {
  /* Wordmark ufficiale dell'app (1107x430, aspectRatio del componente):
     `width` 330 con `max-width` 88% come `styles.logo`, `height: auto` per non
     deformarlo su iPhone stretti. z-index: i blob stanno DIETRO (nell'app sono
     fratelli precedenti nel DOM). */
  position: relative;
  z-index: 1;
  display: block;
  width: 330px;
  max-width: 88%;
  height: auto;
  aspect-ratio: 1107 / 430;
}

/* LOGO_BLOBS: `translate(dx - size/2, dy - size/2)` e' esattamente il
   transform del componente (l'offset include gia' mezzo lato). */
.accesso__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.accesso__blob--viola {
  width: 124px;
  height: 124px;
  opacity: 0.5;
  transform: translate(-88px, -64px) rotate(-12deg);
  background: linear-gradient(
    135deg,
    var(--accesso-blob-viola-a) 0%,
    var(--accesso-blob-viola-b) 55%,
    /* `${c2}00`: la STESSA tinta con alfa 0 (mai `transparent` nudo, che
       interpolerebbe verso il nero trasparente). */
    color-mix(in srgb, var(--accesso-blob-viola-b) 0%, transparent) 100%
  );
}

.accesso__blob--rosa {
  width: 110px;
  height: 110px;
  opacity: 0.42;
  transform: translate(-33px, -55px) rotate(14deg);
  background: linear-gradient(
    135deg,
    var(--accesso-blob-rosa-a) 0%,
    var(--accesso-blob-rosa-b) 55%,
    color-mix(in srgb, var(--accesso-blob-rosa-b) 0%, transparent) 100%
  );
}

.accesso__blob--ciano {
  width: 88px;
  height: 88px;
  opacity: 0.34;
  transform: translate(-44px, -34px) rotate(24deg);
  background: linear-gradient(
    135deg,
    var(--accesso-blob-ciano-a) 0%,
    var(--accesso-blob-ciano-b) 55%,
    color-mix(in srgb, var(--accesso-blob-ciano-b) 0%, transparent) 100%
  );
}

.accesso__eyebrow {
  margin: 0;
  color: var(--testo-secondario);
  font-family: var(--font-titoli);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}

/* Etichetta della versione (AppVersionLabel): margini minimi, il ritmo
   dell'hero resta logo -> versione -> sottotitolo. */
.accesso__versione {
  margin: 4px 0 2px;
  color: var(--accesso-versione);
  font-size: var(--dimensione-micro);
  line-height: 16px;
  /* AppVersionLabel: 700 con spaziatura 0,8 e cifre a larghezza fissa, cosi'
     la riga non si muove quando cambia il numero. */
  font-weight: 700;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.accesso__sottotitolo {
  max-width: 320px;
  margin: 0 0 8px;
  color: var(--accesso-testo-sottotitolo);
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
}

/* Tre card informative: flex 1 con gap 12 e 4px ai lati (featuresRow). */
.accesso__funzionalita {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.accesso__card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: var(--card-bg);
  text-align: center;
}

/* Il "ventaglio": le card laterali scendono di 4px e ruotano di 2 gradi, quella
   centrale sale di 8px (featureCardTiltLeft/Raised/Right). */
.accesso__card--sinistra {
  transform: translateY(4px) rotate(-2deg);
}

.accesso__card:nth-child(2) {
  transform: translateY(-8px);
}

.accesso__card--destra {
  transform: translateY(4px) rotate(2deg);
}

/* Pastiglia dell'emoji di ogni card. `${accent}2E` = 18% di opacita' (fondo),
   `${accent}66` = 40% (bordo): la stessa tinta del token mescolata col
   trasparente, quindi nessun colore nuovo e nessuna indirezione locale (la
   guardia del guscio pretende che OGNI var() usata sia dichiarata in
   `tokens.css`). */
.accesso__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  font-size: 26px;
  line-height: 30px;
}

.accesso__badge--ciano {
  border: 1px solid color-mix(in srgb, var(--accesso-badge-ciano) 40%, transparent);
  background: color-mix(in srgb, var(--accesso-badge-ciano) 18%, transparent);
}

.accesso__badge--rosa {
  border: 1px solid color-mix(in srgb, var(--accesso-badge-rosa) 40%, transparent);
  background: color-mix(in srgb, var(--accesso-badge-rosa) 18%, transparent);
}

.accesso__badge--giallo {
  border: 1px solid color-mix(in srgb, var(--accesso-badge-giallo) 40%, transparent);
  background: color-mix(in srgb, var(--accesso-badge-giallo) 18%, transparent);
}

.accesso__card-titolo {
  margin: 0;
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.accesso__card-testo {
  margin: 0;
  color: var(--testo-attenuato);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}


/* --- Consensi + CTA (il `footer` della Welcome) --------------------------- */
.accesso__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.accesso__consensi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
}

.accesso__consensi-testa {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accesso__scudo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--accesso-scudo-bordo);
  border-radius: 16px;
  background: var(--accesso-scudo-sfondo);
  font-size: 16px;
  line-height: 18px;
}

.accesso__consensi-titolo {
  flex: 1;
  margin: 0;
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 16px;
  font-weight: 900;
  line-height: 22px;
}

.accesso__divisore {
  height: 1px;
  margin-top: -2px;
  background: var(--card-border-soft);
}

/* Riga della casella (ConsentCheckbox): quadratino 24x24 raggio 8 + testo
   14/22. La casella 18+ e' l'unica cliccabile; quella dei Termini e' di sola
   lettura e si spunta accettando nel foglio dei Termini. */
.consenso {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  cursor: pointer;
}

.consenso--lettura {
  cursor: default;
}

/* L'input VERO resta nel DOM (accessibile e con `:checked` corretto): e'
   invisibile e sovrapposto al quadratino disegnato, cosi' il tocco resta
   quello nativo del `<label>` (anche da tastiera). */
.consenso__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.consenso__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  flex: none;
  border: 1.5px solid var(--accesso-bordo-casella);
  border-radius: 8px;
  color: var(--testo);
  font-size: 15px;
  font-weight: 900;
  line-height: 16px;
}

.consenso__input:checked + .consenso__mark {
  border-color: var(--accesso-bordo-casella-spunta);
  background: linear-gradient(135deg, var(--accento-viola) 0%, var(--accento-magenta) 100%);
}

.consenso__input:checked + .consenso__mark::after {
  content: '\2713';
}

/* Anello di focus visibile: l'input e' invisibile, quindi il focus si vede
   sul quadratino (a11y da tastiera). */
.consenso__input:focus + .consenso__mark {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

.consenso__testo {
  flex: 1;
  color: var(--accesso-testo-etichetta);
  font-size: 14px;
  line-height: 22px;
}

.consenso__input:checked ~ .consenso__testo {
  color: var(--testo);
}

/* Link inline dentro la frase ("Termini di servizio"): stesso ciano dei link
   legali dell'app, sottolineato e parte della frase (niente pulsanti fuori
   riga). `font: inherit` per non alterare il ritmo del testo. */
.consenso__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accento-ciano);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.consenso__link:hover {
  color: var(--testo);
}


/* --- Pulsante "Continua con Google": disegno NOSTRO, clic del provider ----- */
/* `accesso__cta-area` regge il pulsante visibile e l'iframe di Google
   sovrapposto: l'iframe e' trasparente ma cliccabile, quindi il consenso Google
   resta quello vero (il pulsante del provider non viene imitato). Fino a quando
   i consensi non sono completi lo slot ha `inert`: nessun clic e nessun focus
   arrivano a GIS, il tocco cade sul nostro pulsante disabilitato. */
.accesso__cta-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* Blocco del solo Google: il pulsante visibile e l'iframe trasparente di GIS
   devono sovrapporsi QUI. */
.accesso__cta-blocco {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 62px;
  border-radius: 32px;
}

.accesso__cta {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px;
  border: 1px solid transparent;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accento-viola) 0%, var(--accento-magenta) 100%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accento-magenta) 55%, transparent);
  color: var(--testo);
  /* Il pulsante Google dell'APK usa il font di sistema (nessun `fontFamily`):
     il marchio resta nel gradiente, non nella tipografia. */
  font-family: var(--font-sistema);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.accesso__cta:disabled {
  opacity: 0.6;
  cursor: default;
}

.accesso__cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--accesso-google-bordo);
  border-radius: 15px;
  background: var(--testo);
  color: var(--accesso-google-g);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
}

.accesso__cta-testo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accesso__cta-slot {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
}

/* L'iframe/il wrapper di GIS prende TUTTA l'area e resta invisibile: quello che
   si vede e' il nostro pulsante, quello che risponde al clic e' Google. */
.accesso__cta-slot > div,
.accesso__cta-slot iframe {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0;
  opacity: 0;
}

.accesso__suggerimento {
  margin: 0;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.accesso__suggerimento[hidden] {
  display: none;
}

.accesso__esito {
  margin: 0;
  color: var(--testo-errore);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.accesso__esito[hidden] {
  display: none;
}

.accesso__installa {
  margin-top: 0;
}


/* Riquadro richiudibile della schermata ospite: la prima cosa che si vede e'
   il login, il resto (stato, benvenuto, tappe) si apre a richiesta. */
.accesso__dettagli {
  margin-top: var(--spazio-2);
}

.accesso__riepilogo {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spazio-3) var(--spazio-4);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: var(--dimensione-piccola);
  font-weight: var(--peso-medio);
  cursor: pointer;
  list-style: none;
}

.accesso__riepilogo::-webkit-details-marker {
  display: none;
}

.accesso__dettagli[open] .accesso__riepilogo {
  border-color: var(--chip-selected-border);
  color: var(--testo);
}

.accesso__dettagli > .card {
  margin-top: var(--spazio-4);
}

.card {
  background: var(--card-bg);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  padding: var(--spazio-4);
  backdrop-filter: blur(10px);
}

.card__titolo {
  margin: 0 0 var(--spazio-3);
  font-family: var(--font-titoli);
  font-size: var(--dimensione-piccola);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-attenuato);
}

.card__testo {
  margin: 0 0 var(--spazio-3);
  color: var(--testo-secondario);
}

.card__testo:last-child {
  margin-bottom: 0;
}

.nota {
  font-size: var(--dimensione-micro);
  color: var(--testo-attenuato);
}

/* --- Accesso (Fase 2) ------------------------------------------------------ */
/* Casella dei consensi: etichetta cliccabile a tutta riga, con area di tocco
   comoda (iOS chiede ~44px). Il testo e' quello ufficiale del dizionario. */
.casella {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-3);
  min-height: 44px;
  padding: var(--spazio-2) 0;
  font-size: var(--dimensione-piccola);
  color: var(--testo-secondario);
  cursor: pointer;
}

.casella input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  /* Gli input di Safari hanno il colore del sistema: si allinea alla marca senza
     inventare un colore nuovo (le tinte stanno solo in tokens.css). */
  accent-color: var(--accento-viola);
}

/* Esito dell'accesso: messaggio del SERVER quando c'e', altrimenti una nota. */
#accesso-esito {
  margin-top: var(--spazio-3);
}

#utente-riga {
  word-break: break-word;
}

/* --- Elenco di stato (semafori) -------------------------------------------- */
.elenco-stato {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-2);
}

.elenco-stato li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: var(--spazio-3);
  font-size: var(--dimensione-piccola);
}

.semaforo {
  width: 10px;
  height: 10px;
  border-radius: var(--raggio-pillola);
  background: var(--marker-presenza);
}

.semaforo--ok {
  background: var(--marker-luogo);
  box-shadow: 0 0 0 4px var(--semaforo-ok-alone);
}

.semaforo--attenzione {
  background: var(--stato-attivo);
  box-shadow: 0 0 0 4px var(--stato-attivo-alone);
}

.semaforo--ko {
  background: var(--testo-errore);
  box-shadow: 0 0 0 4px var(--warning-bg);
}

.valore-stato {
  color: var(--testo-attenuato);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Pulsanti -------------------------------------------------------------- */
.pulsante {
  appearance: none;
  border: var(--bordo-sottile) solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-weight: var(--peso-medio);
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: var(--raggio-pillola);
  cursor: pointer;
  min-height: 44px; /* area di tocco minima iOS */
  transition:
    background var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    transform var(--durata-veloce) ease;
}

.pulsante:active {
  transform: scale(0.98);
}

.pulsante--primario {
  background: var(--chip-selected-bg);
  border-color: var(--chip-selected-border);
}

/* Pulsante DISTRUTTIVO delle conferme (blocca l'utente, cancella la
   conversazione): la tinta d'errore del tema, mai un colore scritto a mano. */
.pulsante--pericolo {
  background: var(--profilo-pericolo-sfondo);
  border-color: var(--profilo-pericolo-bordo);
  color: var(--testo-errore);
}

.pulsante[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* `.pillola` (v8-v60) era la pillola del pulsante lingua della testata fissa:
   eliminata con la barra (D26). Il selettore della lingua ha le sue regole
   (`.lingua__scelta`), le pillole di contenuto hanno `social__pillola`/`chip`. */

.griglia-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* =============================================================================
   BARRA DI NAVIGAZIONE INFERIORE (guscio v8)
   Fissa in basso, sempre visibile con la sessione (vive dentro `#guscio-app`,
   che ha `data-area="utente"`). CINQUE voci (Passo 2 della parita', guscio v13:
   Home, Radar, Segnali, Chat, Profilo), una sola scheda per volta: niente
   ricariche e niente ancore. Il cambio scheda e' ISTANTANEO e non aggiunge voci
   alla cronologia (`replaceState` in js/app.js): il tasto INDIETRO del browser
   resta quello di prima (chiude il thread aperto, poi esce).
   `z-index: 9999` la tiene sopra ogni scheda e ogni foglio della pagina.
   SPESSORE (guscio v56): `bottom: 0` e `padding-bottom: 0`, LETTERALI. La barra
   tocca il bordo inferiore della pagina in ogni modalita': sotto le icone non
   c'e' un solo pixel di spazio. Il valore non si legge da un token ne' da
   `env(safe-area-inset-bottom)`: l'inset GREZZO vale ~34px anche quando la
   pagina non arriva al bordo (Safari iOS) ed era LUI la fascia vuota sotto le
   voci (tre segnalazioni, l'ultima su iPhone 16 Pro) — v. tokens.css, storia
   v54/v55/v56. `--safe-bottom-reale` resta 0 per i pannelli, cosi' il composer
   della chat finisce esattamente sul filo della barra.
   L'altezza che i pannelli prenotano e' `--barra-ingombro` (guscio v93/D46:
   altezza delle voci + i due bordi + il distacco della capsula + safe area).
   Misure dall'APK (`nearoo-tab-bar.tsx` + `tab-bar-item.tsx`): pillola 42x30
   raggio 16, glifo 22, etichetta 11px, badge 18px.
   LA BARRA NON SI SPOSTA DI UN PIXEL (guscio v83, 30/10/2026 — D36)
   Fino al v82 qui c'era `margin-bottom: calc(-1 * var(--barra-scarto, 0px))`:
   la barra SCENDEVA di `--barra-scarto` per "toccare il bordo vero" quando
   WebKit (al primo frame della PWA installata) calcola il layout viewport piu'
   basso dello schermo. In STANDALONE — `navigator.standalone` o
   `display-mode: standalone`, cioe' l'app installata sulla schermata Home —
   `screen.height` supera il viewport di 34-59px (barra di stato e indicatore
   home, che il guscio copre): `js/viewport-stabilizza.js` scriveva quello
   scarto e la barra (58px) finiva SOTTO il bordo inferiore, del tutto
   invisibile, con Profilo e Chat irraggiungibili. Nella scheda di Safari la
   differenza e' molto piu' grande e veniva scartata, quindi il difetto si
   vedeva SOLO nell'app installata.
   La regola ora e' assoluta: `position: fixed` + `bottom: 0` e' DENTRO il
   viewport per costruzione, qualunque `margin-bottom`/`bottom` negativo lo
   porta fuori e nessuna misura (viewport troncato, `screen.height`, safe area)
   puo' renderlo sicuro — quindi qui il fondo NON si legge da nessuna variabile.
   `--barra-scarto` resta scritta a `0px` da `js/viewport-stabilizza.js` come
   sola diagnostica e NON e' piu' consumata: anche una shell vecchia in cache
   che scrivesse 34-59px non puo' nascondere la barra.
   COMPROMESSO DICHIARATO: se sotto le voci resta una fascia di qualche pixel
   (solo nell'app installata, solo finche' WebKit non ricalcola) si accetta:
   e' estetica, mentre la barra che sparisce toglie la navigazione.
   `display: flex` esplicito: la barra e' un blocco che c'e' SEMPRE (nessuna
   regola, nessun `hidden`, nessun `display` ereditato puo' toglierla).
   ============================================================================= */
/* CAPSULA SOSPESA (guscio v93, 03/11/2026 - D46)
   -----------------------------------------------------------------------------
   La barra non e' piu' una fascia a tutta larghezza incollata al bordo: e' una
   CAPSULA DI VETRO galleggiante in stile Stitch UI, staccata dal fondo
   (`--barra-aria`, piu' la safe area che resta SOTTO di lei), centrata e con un
   tetto di larghezza su tablet e in orizzontale.

   Cosa NON cambia rispetto a D36 (v83): il fondo e' COMUNQUE un valore
   POSITIVO. La barra perse la navigazione quando un `margin-bottom`/`bottom`
   NEGATIVO la portava sotto il bordo del viewport; qui il distacco e' verso
   l'ALTO, quindi nessuna misura puo' spingerla fuori dallo schermo. Le guardie
   (`checks/test-apple-shell.mjs` H31) rifiutano ancora `margin-bottom` e
   `bottom` negativi.

   Spazio prenotato: `--barra-ingombro` in tokens.css (altezza voci + bordi +
   distacco + safe area) - e' quello che `.vista` e i pannelli sommano in fondo,
   cosi' l'ultima riga non finisce dietro il vetro. */
.barra-basso {
  position: fixed;
  bottom: calc(var(--barra-aria) + env(safe-area-inset-bottom, 0px));
  /* 12px dal bordo + la safe area laterale (notch in orizzontale). */
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  max-width: 480px;
  /* Con `left`/`right` simmetrici e una `max-width`, i margini automatici
     CENTRANO la capsula: su telefono occupa tutta la larghezza meno 12px per
     lato, su tablet resta 480px in mezzo. */
  margin: 0 auto;
  z-index: 9999;
  /* Nessuna traslazione: il distacco e' `bottom`, non un `transform`. */
  display: flex;
  flex-direction: column;
  /* LETTERALI, non token: la capsula non eredita padding da nessuna parte. */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur)) saturate(140%);
  backdrop-filter: blur(var(--rc-vetro-blur)) saturate(140%);
  /* Ombra fluttuante + riflesso interno sul bordo alto. */
  box-shadow:
    0 18px 40px var(--rc-ombra),
    0 2px 10px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
  /* Il vetro taglia le voci secondo il raggio della capsula. */
  overflow: hidden;
}

/* La fascia interna e' l'AREA DI SCORRIMENTO ORIZZONTALE della capsula
   (guscio v95, D49): le otto voci stanno in fila e, quando non entrano tutte,
   si raggiungono col dito. `scroll-snap-type: x mandatory` fa fermare lo
   scorrimento su una voce alla volta (`scroll-snap-align: center` sulle voci);
   la barra di scorrimento non si vede (`scrollbar-width: none` per Firefox e il
   pseudo-elemento qui sotto per WebKit/Blink) e `-webkit-overflow-scrolling`
   tiene lo scorrimento inerziale su iOS.
   ATTENZIONE: niente `display: none` nello pseudo-elemento — la guardia del
   guscio (H22zh) vieta qualunque `display: none` su un selettore che comincia
   per `.barra-basso` (l'unica regola che spegne la capsula e' quella della
   digitazione). Un'altezza a zero basta e non tocca quella regola. */
.barra-basso__dentro {
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spazio-1);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.barra-basso__dentro::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* =============================================================================
   FRECCE DI SCORRIMENTO DELLA CAPSULA (guscio v96, 03/11/2026 - D50)
   -----------------------------------------------------------------------------
   Con otto voci la capsula scorre, ma una capsula che scorre non lo DICE: chi
   non prova a trascinare non sa che ci sono altre tre sezioni. Due micro-frecce
   ai bordi estremi lo dichiarano, e compaiono SOLO quando c'e' qualcosa da
   scoprire in quella direzione. Lo stato e' UNO e lo scrive `js/app.js`
   (`aggiornaFrecceBarra()` -> `data-scorrimento`) sull'evento `scroll` dell'area
   di scorrimento, con la decisione presa da `js/barra-frecce.js`:

     data-scorrimento="inizio" -> solo la freccia destra (c'e' altro a destra)
     data-scorrimento="meta"   -> entrambe (si puo' tornare e si puo' andare)
     data-scorrimento="fine"   -> solo la freccia sinistra
     data-scorrimento="niente" -> nessuna (le otto voci entrano tutte)

   PERCHE' NON RUBANO SPAZIO ALLE VOCI (requisito esplicito): sono
   `position: absolute` DENTRO la capsula (`position: fixed`, quindi sono
   ancorate a lei), sono disegnate SOPRA le voci e non esiste nessun
   `padding`/`mask`/`width` sull'area di scorrimento per "far posto" a loro: le
   otto pillole scorrono libere sotto le frecce, che sono solo un velo.
   `pointer-events: none` sempre, anche quando sono accese: il tocco arriva
   alla voce sottostante e il trascinamento scorre la capsula (nessuna
   delimitazione rigida).

   PERCHE' `opacity` E NON `display`/`visibility`: la guardia del guscio (H22zh)
   vieta `display: none` e `visibility: hidden` su qualunque selettore che
   comincia per `.barra-basso` — l'unica regola che spegne la capsula e' quella
   della digitazione. `opacity` fa la stessa cosa senza toccare quella regola.
   ============================================================================= */
.barra-basso__freccia {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mai un tocco: la voce sotto resta cliccabile e la capsula trascinabile. */
  pointer-events: none;
  color: var(--testo);
  opacity: 0;
  transition: opacity var(--durata-veloce) ease;
}

/* Velo di vetro al bordo (la tinta e' quella della capsula, non un colore
   nuovo): la freccia non sta mai su un'etichetta "nuda" e il bordo arrotondato
   resta quello della capsula. */
.barra-basso__freccia--prima {
  left: 0;
  border-radius: var(--rc-raggio-pillola) 0 0 var(--rc-raggio-pillola);
  background: linear-gradient(to right, var(--rc-vetro-sfondo), transparent);
}

.barra-basso__freccia--dopo {
  right: 0;
  border-radius: 0 var(--rc-raggio-pillola) var(--rc-raggio-pillola) 0;
  background: linear-gradient(to left, var(--rc-vetro-sfondo), transparent);
}

/* Il glifo: 16px, solo tratto, arrotondato — lo stesso linguaggio delle voci. */
.barra-basso__freccia-icona {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Accensione: la freccia c'e' dove c'e' altro da scoprire (tabella identica a
   `frecceVisibili()` di `js/barra-frecce.js`, confrontata dalla guardia). */
.barra-basso[data-scorrimento='inizio'] .barra-basso__freccia--dopo,
.barra-basso[data-scorrimento='meta'] .barra-basso__freccia--prima,
.barra-basso[data-scorrimento='meta'] .barra-basso__freccia--dopo,
.barra-basso[data-scorrimento='fine'] .barra-basso__freccia--prima {
  opacity: 0.62;
}

/* Una voce: pillola sopra, etichetta sotto (la stesse disposizione dell'APK).
   `min-height`/`height` da `--altezza-barra`: area di tocco piena anche senza
   testo e altezza FISSA, cosi' le viste prenotano esattamente lo spazio reale
   (il composer del thread non finisce sotto il filo della barra).
   CAPSULA TATTILE (guscio v93, D46): dentro la capsula di vetro ogni voce e' a
   sua volta una pillola, con il fondo che si accende al tocco e il pallino
   viola della sezione corrente (v. `::after` sotto).
   OTTO VOCI (guscio v95, D49): la voce NON si divide piu' lo spazio in parti
   uguali (`flex: 1 1 0`): con otto pillole su un telefono le etichette si
   schiaccerebbero fino a sparire. Ora la voce CRESCE se c'e' spazio
   (`flex-grow: 1`, cosi' su tablet la capsula resta piena come prima) ma NON si
   restringe sotto il minimo leggibile (`min-width`) ne' sotto la larghezza della
   propria etichetta (`flex-shrink: 0`): quando non entrano tutte, scorre la
   capsula. `scroll-snap-align` e' l'aggancio. */
.barra-basso__voce {
  appearance: none;
  position: relative;
  flex: 1 0 auto;
  min-width: 64px;
  scroll-snap-align: center;
  min-height: var(--altezza-barra);
  height: var(--altezza-barra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--spazio-1);
  border: 0;
  border-radius: var(--rc-raggio-pillola);
  background: transparent;
  color: var(--icona-spenta);
  font: inherit;
  font-size: 11px;
  font-weight: var(--peso-medio);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--durata-veloce) ease,
    background-color var(--durata-veloce) ease,
    transform var(--durata-veloce) ease;
}

/* Tocco: la capsula interna si accende di un riflesso di vetro e si comprime
   appena. E' l'unico effetto che non usa trasformazioni di posizionamento. */
.barra-basso__voce:active {
  background-color: var(--rc-vetro-riflesso);
  transform: scale(0.96);
  opacity: 0.9;
}

/* Pillola della voce: capsula 42x30 con raggio 16, cosi' le cinque voci hanno la
   STESSA impronta a prescindere dal glifo (`styles.iconaContenitore`). */
.barra-basso__pillola {
  position: relative;
  width: 42px;
  height: 30px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barra-basso__voce[aria-current='page'] .barra-basso__pillola {
  background: var(--tab-active-bg);
  /* RADAR CONNECT (v85/D38): indicatore attivo "luminoso". E' un alone, non un
     colore nuovo: usa l'alone viola del design system. */
  box-shadow: 0 0 18px var(--rc-alone-viola);
}

/* Glifo: 22px, solo tratto (`Icon` dell'app). Il colore lo decide la voce:
   `ICON_MUTED` spenta, `ACCENT_CYAN` quando la scheda e' quella corrente. */
.barra-basso__icona {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra-basso__voce[aria-current='page'] {
  color: var(--testo);
}

.barra-basso__voce[aria-current='page'] .barra-basso__icona {
  color: var(--accento-ciano);
  stroke-width: 2;
}

.barra-basso__etichetta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* La voce corrente ha l'etichetta SemiBold (Inter-SemiBold nell'APK). */
.barra-basso__voce[aria-current='page'] .barra-basso__etichetta {
  font-weight: 600;
}

/* PALLINO DELLA SEZIONE ATTIVA (guscio v93, 03/11/2026 - D46)
   L'indicatore viola sotto la voce corrente, come nello screenshot Stitch UI:
   un punto, non una barra, e nessuna emoji. Vive nella fascia libera sotto
   l'etichetta (voce 58px, contenuto ~47px), quindi non tocca mai il testo, e
   non aggiunge nodi al DOM (e' un `::after`). */
.barra-basso__voce[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rc-viola-chiaro);
  box-shadow: 0 0 8px var(--rc-alone-viola);
  transform: translateX(-50%);
}

/* Badge dei non letti della chat (lo scrive js/app.js da `onNonLetti`): dentro
   la pillola, in alto a destra (`styles.badge`: top -2, right 4, min 18x18,
   raggio 9, magenta, testo 10px). */
.barra-basso__badge {
  position: absolute;
  top: -2px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 2px;
  border-radius: 9px;
  background: var(--accento-magenta);
  color: var(--testo);
  font-size: 10px;
  font-weight: var(--peso-forte);
  line-height: 18px;
  text-align: center;
}

/* --- Avvisi globali (nuova versione / sessione scaduta) -------------------- */
/* Livello fisso SOPRA la testata: sono avvisi, non contenuto. Il contenitore
   non intercetta i tocchi (`pointer-events: none`), i singoli avvisi si'. */
.avvisi {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9998;
  display: grid;
  gap: var(--spazio-2);
  padding: calc(var(--spazio-2) + var(--safe-top))
    calc(var(--spazio-4) + var(--safe-right)) 0 calc(var(--spazio-4) + var(--safe-left));
  pointer-events: none;
}

.avviso {
  pointer-events: auto;
  margin: 0 auto;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-card);
  background: var(--warning-bg);
  border: var(--bordo-sottile) solid var(--warning-border);
  font-size: var(--dimensione-piccola);
}

/* --- Modale dell'aggiornamento (guscio v50) -------------------------------- */
/* Una finestra CENTRATA, non una barra in cima: la barra `.avviso` si
   sovrapponeva alla testata e ai campi della scheda attiva (segnalazione del
   28/10/2026). E' un `<dialog>` come le altre modali (`::backdrop`, Esc e focus
   trap del browser), compatta: 340px al massimo, icona tonda, titolo, un testo
   e UNA azione. Nessun colore nuovo: solo le tinte del tema. */
.modale-aggiornamento {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(calc(100% - var(--spazio-6)), 340px);
  /* Su un telefono basso la modale non esce dallo schermo: scorre dentro. */
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: calc(var(--spazio-5) + var(--spazio-1)) var(--spazio-4) var(--spazio-4);
  overflow-y: auto;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--spazio-5);
  background: var(--bg-stop-alto);
  color: var(--testo);
  text-align: center;
  box-shadow: 0 24px 60px var(--card-ombra);
}

.modale-aggiornamento::backdrop {
  background: var(--velo-scuro);
}

.modale-aggiornamento[open] {
  display: grid;
  justify-items: center;
  gap: var(--spazio-3);
  animation: modale-aggiornamento-entra var(--durata-media) ease-out;
}

@keyframes modale-aggiornamento-entra {
  from {
    opacity: 0;
    transform: translateY(var(--spazio-2)) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Chi ha chiesto meno movimento non deve vedere nessuna animazione. */
@media (prefers-reduced-motion: reduce) {
  .modale-aggiornamento[open] {
    animation: none;
  }
}

.modale-aggiornamento__chiudi {
  appearance: none;
  position: absolute;
  top: var(--spazio-2);
  right: var(--spazio-2);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modale-aggiornamento__icona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bordo-sottile) solid var(--tinta-viola-bordo);
  border-radius: 50%;
  background: var(--tinta-viola-sfondo);
  color: var(--icona-chiara);
}

.modale-aggiornamento__icona svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modale-aggiornamento__titolo {
  margin: 0;
  padding: 0 var(--spazio-4);
  font-family: var(--font-titoli);
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  color: var(--testo);
}

.modale-aggiornamento__testo {
  margin: 0;
  font-size: var(--dimensione-piccola);
  line-height: 20px;
  color: var(--testo-secondario);
}

.modale-aggiornamento__azioni {
  display: grid;
  width: 100%;
  margin-top: var(--spazio-1);
}

.modale-aggiornamento__azioni .pulsante {
  width: 100%;
}

/* --- Modale dell'ESITO DEL LANCIO di una bottiglia (29/10/2026) ------------ */
/* Riusa INTEGRALMENTE `.modale-aggiornamento` (card, velo, X, titolo, testo,
   pulsante): qui c'e' solo lo STATO. `.modale-esito--errore` la applica
   `js/icebreaker.js` sul `<dialog>` quando il server rifiuta il lancio, e tinge
   l'icona con la tinta d'errore del tema: nessun colore scritto a mano. */
.modale-esito--errore .modale-aggiornamento__icona {
  color: var(--testo-errore);
}

/* --- Conferme della CHAT (blocca utente / cancella conversazione) --------- */
/* Riusano `.modale-aggiornamento` (card centrata, velo `::backdrop`, X) e
   aggiungono solo cio' che serve a una conferma: campo del motivo, nota,
   messaggio d'errore e DUE azioni affiancate (Annulla / azione distruttiva).
   L'azione distruttiva e' `.pulsante--pericolo`: tinta d'errore del tema. */
.modale-conferma {
  text-align: left;
}

.modale-conferma .modale-aggiornamento__titolo,
.modale-conferma .modale-aggiornamento__testo {
  text-align: center;
  width: 100%;
}

.modale-conferma__etichetta {
  width: 100%;
  color: var(--testo-secondario);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.modale-conferma__campo {
  box-sizing: border-box;
  width: 100%;
  min-height: 74px;
  padding: 10px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 12px;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
}

.modale-conferma__campo::placeholder {
  color: var(--testo-attenuato);
}

.modale-conferma__nota {
  width: 100%;
  margin: 0;
  color: var(--testo-secondario);
  font-size: 11px;
  line-height: 15px;
  text-align: left;
}

.modale-conferma__errore {
  width: 100%;
  margin: 0;
  color: var(--testo-errore);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

/* Due azioni affiancate, stessa larghezza: nessuna gerarchia ambigua. */
.modale-conferma__azioni {
  display: flex;
  gap: var(--spazio-2);
  margin-top: var(--spazio-1);
}

.modale-conferma__azioni .pulsante {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spazio-2) var(--spazio-3);
}

/* --- Modale di ATTESA dell'upload foto (29/10/2026) ------------------------ */
/* Centrata, compatta, BLOCCANTE: e' un `<dialog>` aperto con `showModal()`,
   quindi il resto della pagina non e' toccabile (nessun doppio invio) e il
   velo e' `::backdrop`. Nessun pulsante di chiusura: l'operazione e' in corso.
   Il giro e' un bordo con animazione di rotazione; chi ha chiesto meno
   movimento vede un giro FERMO (il testo dice comunque cosa sta succedendo). */
.modale-attesa {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(calc(100% - var(--spazio-6)), 320px);
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: calc(var(--spazio-5) + var(--spazio-1)) var(--spazio-4) var(--spazio-4);
  overflow-y: auto;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--spazio-5);
  background: var(--bg-stop-alto);
  color: var(--testo);
  text-align: center;
  box-shadow: 0 24px 60px var(--card-ombra);
}

.modale-attesa::backdrop {
  background: var(--velo-scuro);
}

.modale-attesa[open] {
  display: grid;
  justify-items: center;
  gap: var(--spazio-3);
  animation: modale-aggiornamento-entra var(--durata-media) ease-out;
}

/* Il giro: anello con un settore acceso che ruota (nessuna icona nuova). */
.modale-attesa__giro {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--tinta-viola-bordo);
  border-top-color: var(--icona-chiara);
  animation: modale-attesa-giro 900ms linear infinite;
}

@keyframes modale-attesa-giro {
  to {
    transform: rotate(360deg);
  }
}

.modale-attesa__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  color: var(--testo);
}

.modale-attesa__testo {
  margin: 0;
  font-size: var(--dimensione-piccola);
  line-height: 20px;
  color: var(--testo-secondario);
}

/* Barra DETERMINATA sulla fase reale (2 passi: verifica -> salvataggio). */
.modale-attesa__barra {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--chip-bg);
}

.modale-attesa__barra-pieno {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: 999px;
  background: var(--icona-chiara);
  transition: width var(--durata-media) ease-out;
}

.modale-attesa__conta {
  margin: 0;
  font-size: var(--dimensione-piccola);
  line-height: 18px;
  font-weight: 600;
  color: var(--testo-secondario);
}

.modale-attesa__nota {
  margin: 0;
  font-size: var(--dimensione-piccola);
  line-height: 18px;
  color: var(--testo-secondario);
}

@media (prefers-reduced-motion: reduce) {
  .modale-attesa[open] {
    animation: none;
  }

  .modale-attesa__giro {
    animation: none;
  }

  .modale-attesa__barra-pieno {
    transition: none;
  }
}

/* --- Suggerimento di installazione (Modulo 3, guscio v20) ------------------ */
/* Un avviso, non una modale: superficie piena (sopra il contenuto), filo di
   marca in cima e nessun colore nuovo (solo token del tema). La X e' l'unico
   modo per toglierlo e scrive la preferenza: per questo ha un'area di tocco
   da 32px e un'etichetta accessibile che dice cosa fa. */
.installazione-prompt {
  pointer-events: auto;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--bg-stop-alto);
  box-shadow: 0 12px 32px var(--card-ombra);
  overflow: hidden;
}

.installazione-prompt::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accento-viola), var(--accento-magenta));
}

.installazione-prompt__chiudi {
  appearance: none;
  position: absolute;
  top: var(--spazio-1);
  right: var(--spazio-1);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-pillola);
  background: transparent;
  color: var(--testo-attenuato);
  cursor: pointer;
}

.installazione-prompt__chiudi svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.installazione-prompt__testata {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-3);
  padding-right: var(--spazio-5);
}

.installazione-prompt__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: var(--bordo-sottile) solid var(--card-border-soft);
  background: var(--chip-selected-bg);
  color: var(--icona-chiara);
}

.installazione-prompt__icona svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.installazione-prompt__testi {
  min-width: 0;
}

.installazione-prompt__titolo {
  margin: 0 0 var(--spazio-1);
  font-family: var(--font-titoli);
  font-size: var(--dimensione-piccola);
  line-height: 1.3;
  color: var(--testo);
}

.installazione-prompt__testo {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: var(--interlinea);
  color: var(--testo-secondario);
}

.installazione-prompt__passi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  margin-top: var(--spazio-3);
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-radius: 12px;
  background: var(--input-bg);
}

.installazione-prompt__passo {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  padding: var(--spazio-1) var(--spazio-2);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: var(--dimensione-micro);
  line-height: 1.4;
  white-space: nowrap;
}

.installazione-prompt__passo svg,
.installazione-prompt__freccia {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.installazione-prompt__passo svg {
  color: var(--accento-ciano);
}

.installazione-prompt__freccia {
  color: var(--testo-attenuato);
}

.installazione-prompt__nota {
  flex-basis: 100%;
  color: var(--testo-attenuato);
  font-size: var(--dimensione-micro);
  line-height: 1.4;
}

.installazione-prompt__azioni {
  display: flex;
  margin-top: var(--spazio-3);
}

.installazione-prompt__cta {
  width: 100%;
  min-height: 40px;
  padding: var(--spazio-2) var(--spazio-4);
  font-size: var(--dimensione-piccola);
}

@media (max-width: 359px) {
  .installazione-prompt {
    padding: var(--spazio-2);
  }

  .installazione-prompt__icona {
    width: 32px;
    height: 32px;
  }

  .installazione-prompt__passo {
    padding: var(--spazio-1) 6px;
  }
}

/* Una parte dell'app non e' partita: riga dentro il guscio (deve restare
   leggibile e non coprire i pulsanti). Dal guscio v61 e' il primo elemento del
   guscio, quindi prenota anche la safe area in alto (la testata non c'e' piu'). */
.avviso-sezioni {
  flex: none;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  margin: calc(var(--spazio-2) + var(--safe-top)) auto 0;
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-card);
  background: var(--warning-bg);
  border: var(--bordo-sottile) solid var(--warning-border);
  font-size: var(--dimensione-piccola);
}

/* --- Foglio (bottom sheet) ------------------------------------------------- */
.foglio {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  /* `<dialog>` ha `width: fit-content` da UA: senza questa riga un testo lungo
     allarga il foglio oltre lo schermo (schede tagliate a destra). Il padding
     sta DENTRO il 100% (border-box), altrimenti il foglio sborda di 32 px. */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  margin: 0 auto;
  /* Su un telefono basso o su una finestra desktop il foglio non deve uscire
     dallo schermo: scorre dentro. `dvh` dove c'e', `vh` come ripiego. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  border: var(--bordo-sottile) solid var(--card-border);
  border-bottom: 0;
  border-radius: var(--raggio-card) var(--raggio-card) 0 0;
  background: var(--bg-stop-alto);
  color: var(--testo);
  padding: var(--spazio-4) var(--spazio-4) calc(var(--spazio-5) + var(--safe-bottom-reale));
}

.foglio::backdrop {
  background: var(--velo-scuro);
}

.foglio__titolo {
  margin: 0 0 var(--spazio-3);
  font-size: var(--dimensione-testo);
  font-weight: var(--peso-forte);
}

.passi {
  margin: 0 0 var(--spazio-4);
  padding-left: var(--spazio-4);
  color: var(--testo-secondario);
}

.passi li {
  margin-bottom: var(--spazio-2);
}

.foglio .griglia-azioni {
  margin-top: var(--spazio-4);
}
/* --- Foglio dei Termini (terms-consent-modal.tsx) --------------------------- */
/* Non e' un bottom sheet: nell'app e' una modale a TUTTO schermo, nera, con
   testata fissa, documento scorrevole e piede fisso (via `dialog` modale, cosi'
   Esc e il focus trap sono quelli del browser). */
.termini {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--foglio-sfondo);
  color: var(--foglio-testo);
}

.termini::backdrop {
  background: var(--foglio-sfondo);
}

.termini[open] {
  display: block;
}

/* Colonna a tre fasce: testata e piede non scorrono, il documento si'. */
.termini__interno {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  height: 100%;
  margin: 0 auto;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom-reale);
}

.termini__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 16px 24px;
  border-bottom: 1px solid var(--foglio-bordo);
}

.termini__titolo {
  flex: 1;
  margin: 0;
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.termini__chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--foglio-bordo);
  color: var(--foglio-testo-tenue);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.termini__corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 32px;
}

.termini__sezioni {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.termini__sezione {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.termini__sezione-titolo {
  margin: 0;
  color: var(--azione-primaria-chiara);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.termini__sezione-corpo {
  margin: 0;
  color: var(--foglio-testo);
  font-size: 14px;
  line-height: 22px;
}

.termini__piede {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  padding: 16px 24px;
  border-top: 1px solid var(--foglio-bordo);
}

.termini__suggerimento {
  margin: 0;
  color: var(--foglio-testo-tenue);
  font-size: var(--dimensione-micro);
  line-height: 16px;
  text-align: center;
}

/* Il suggerimento sparisce appena il documento e' letto (come nell'app: il
   testo e' dentro `{!canAccept && ...}`). `[hidden]` da solo non basta se una
   regola d'autore imposta `display`. */
.termini__suggerimento[hidden] {
  display: none;
}

/* Il pulsante "Accetta" e' l'unico accesso alla spunta della casella: spento
   resta visibile (opacita' .4) ma non risponde, mai nascosto. */
.termini__accetta {
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background: var(--azione-primaria);
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.termini__accetta:disabled {
  opacity: 0.4;
  cursor: default;
}

.termini__informativa,
.termini__senza {
  align-self: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--foglio-testo-tenue);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.termini__informativa {
  color: var(--azione-primaria-chiara);
  font-weight: 700;
  text-decoration: none;
}

.termini__informativa:hover,
.termini__senza:hover {
  color: var(--testo);
}

/* Il link "informativa completa" e' un <a> nella versione web: l'aspetto resta
   quello del pulsante dell'app, il comportamento e' quello del browser. */



/* --- Radar (Passo 4 della parita' APK, guscio v14) ------------------------ */
/* MISURE: sono quelle di `src/app/(app)/(tabs)/radar.tsx` e dei suoi componenti,
   scritte in px come nel componente. Le due scale di spaziatura NON coincidono
   (Spacing.three = 16 nell'app, --spazio-3 = 12 nel guscio), quindi una
   trascrizione "a variabili" sarebbe una parita' solo apparente. I COLORI
   restano token di tokens.css (regola V7).
   SCROLL: il pannello e' `.vista` (l'unico elemento che scorre); `html`/`body`
   sono `overflow: hidden` e testata/barra in basso sono `flex: none`, quindi la
   pagina non scorre mai e le due barre restano ferme. */
.vista[data-pannello='radar'] {
  /* `content` del componente: 24 ai lati, 16 in alto; in fondo la barra fissa
     piu' la safe area piu' 24 (Spacing.four). In alto si somma `--safe-top`:
     dal guscio v61 non c'e' piu' la testata fissa che prenotava il notch. */
  padding: calc(var(--spazio-4) + var(--safe-top)) var(--spazio-5)
    calc(var(--barra-ingombro) + var(--spazio-5));
  display: block;
}

/* La schermata non sta in una card: nell'APK il contenuto vive sul gradiente e
   l'unica superficie e' la card dei controlli (sotto). */
.radar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 1. SCOPE COMPATTO (RADAR_SCOPE_SIZE_COMPACT = 132): doppia classe perche' la
   regola base `.radar-scope` (180px, margine superiore 24) sta piu' avanti nel
   foglio e qui va SOVRASCRITTA, non solo affiancata. */
.radar__scope {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.radar-scope.radar-scope--compatta {
  width: 132px;
  height: 132px;
  margin: 0 auto;
}

/* Anelli a 0.45 / 0.72 / 1 del raggio (RING_RATIOS). */
.radar-scope--compatta .radar-scope__anello--interno {
  width: 59.4px;
  height: 59.4px;
}

.radar-scope--compatta .radar-scope__anello--medio {
  width: 95.04px;
  height: 95.04px;
}

.radar-scope--compatta .radar-scope__anello--esterno {
  width: 132px;
  height: 132px;
}

/* Ritaglio dello sweep 2px dentro l'anello esterno (SWEEP_CLIP_INSET). */
.radar-scope--compatta .radar-scope__sweep {
  width: 128px;
  height: 128px;
}

/* Centro: 22% dello scope (CENTER_BADGE_RATIO) con il core al 78%. I pallini
   decorativi restano 16/8 px: nell'app DOT_HALO_SIZE non dipende dallo scope. */
.radar-scope--compatta .radar-scope__centro {
  width: 29px;
  height: 29px;
}

.radar-scope--compatta .radar-scope__core {
  width: 23px;
  height: 23px;
  line-height: 23px;
  font-size: 12px;
}

/* 2. CARD DEI CONTROLLI (controlsCard): superficie 0.10, bordo 0.20, raggio 20,
   padding 16 e gap 8. */
.radar__controlli {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
}

.radar__visibilita {
  display: flex;
  align-items: center;
  gap: 16px;
}

.radar__visibilita-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radar__titolo {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  color: var(--testo);
}

.radar__sottotitolo {
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-attenuato);
}

/* Switch di visibilita' (Switch dell'APK): traccia 44x24 con bordo `outlineButton`
   e cursore bianco 20 (il vecchio pallino). `data-attivo` e' l'unico segnale. */
.radar__interruttore {
  appearance: none;
  flex: none;
  width: 44px;
  height: 24px;
  padding: 2px;
  display: flex;
  align-items: center;
  border: var(--bordo-sottile) solid var(--radar-comando-bordo);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  cursor: pointer;
}

.radar__interruttore[data-attivo='si'] {
  border-color: var(--chip-selected-border);
  background: var(--accento-viola);
}

.radar__interruttore:disabled {
  opacity: 0.55;
  cursor: default;
}

.radar__interruttore:focus-visible {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

.radar__pallino {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--testo);
  transform: translateX(0);
  transition: transform 160ms ease;
}

.radar__interruttore[data-attivo='si'] .radar__pallino {
  transform: translateX(20px);
}

/* Testo di attesa del salvataggio (il posto dello spinner dell'APK). */
.radar__salvataggio,
.radar__suggerimento {
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
}

/* Etichetta di sezione (`sectionLabel`): 12/16 700 maiuscole. */
.radar__sezione-etichetta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--testo-attenuato);
}

.radar__sezione {
  display: grid;
  gap: 8px;
}

.radar__sezione-intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.radar__aiuto {
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: var(--bordo-sottile) solid var(--radar-comando-bordo);
  border-radius: 50%;
  background: transparent;
  color: var(--testo-secondario);
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  cursor: pointer;
}

/* Mood (TextInput + pulsante ✓): campo 40..72, bordo input, salva 40 tondo viola. */
.radar__umore-riga {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar__umore {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 72px;
  padding: 8px 12px;
  resize: vertical;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
}

.radar__umore-salva {
  appearance: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accento-viola);
  color: var(--testo);
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.radar__umore-salva:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Chip di badge/durata (chipSelected / chipUnselected dell'APK). */
.radar__chip-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radar__chip {
  appearance: none;
  padding: 7px 12px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}

.radar__chip[data-scelto='si'] {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.radar__chip:focus-visible,
.radar__aiuto:focus-visible,
.radar__umore-salva:focus-visible {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

/* Countdown: 13/18 700 ciano (`countdownText`). */
.radar__countdown {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--accento-ciano);
}

/* Avviso permesso (warningCard): superficie 0.12, bordo 0.45, raggio 18. */
.radar__permesso {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 16px;
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 18px;
  background: var(--warning-bg);
}

.radar__permesso-titolo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--testo);
}

.radar__permesso-corpo {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.radar__permesso-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Modale informativa dei badge (RadarScope? no: la modale `showBadgeHelp`). */
.radar__badge-elenco {
  margin: 12px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.radar__badge-elenco li {
  display: grid;
  gap: 2px;
}

.radar__badge-nome {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--testo);
}

.radar__badge-descrizione,
.foglio__testo {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.foglio__azioni {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Divisore del tema (CARD_BORDER_SOFT). */
.radar__separatore {
  height: 1px;
  background: var(--card-border-soft);
}

/* Righe di stato: etichette `sectionLabel` (12/16, 700, maiuscole, spaziatura
   0.6) e valori `textSmallSecondary` (13/18). */
.radar__stato {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.radar__stato li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.radar__stato li > span:first-child {
  flex: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--testo-attenuato);
}

.radar__valore {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
  text-align: right;
}

/* Comandi "pillola": `outlineButton` (8/14, bordo 0.30) e `refreshButton`
   (7/14, sfondo 0.06, bordo 0.25, testo ciano 12/700). Niente pulsanti a tutta
   larghezza in stile web. */
.radar__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.radar__pulsante {
  appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--testo);
  padding: 8px 14px;
  border: var(--bordo-sottile) solid var(--radar-comando-bordo);
  border-radius: var(--raggio-pillola);
  background: transparent;
  cursor: pointer;
}

.radar__pulsante:active {
  opacity: 0.75;
}

.radar__pulsante--aggiorna {
  font-size: 12px;
  line-height: 16px;
  padding: 7px 14px;
  border-color: var(--radar-aggiorna-bordo);
  background: var(--radar-aggiorna-sfondo);
  color: var(--accento-ciano);
}

/* 3. POSIZIONE (positionRow): 11/15 attenuato, coordinate a sinistra e ora a
   destra. */
.radar__posizione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--testo-attenuato);
}

/* 4. INTESTAZIONE DELLA LISTA (radarHeader): 18/24 800 + Aggiorna. */
.radar__intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 8px;
}

.radar__intestazione-titolo {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: var(--testo);
}

/* La superficie di attesa della mappa e' il colore TERRA dello stile della mappa
   (`--mappa-terra`, lo stesso `MAP_PAINT.land`): il primo frame non cambia colore
   quando l'iframe disegna. Altezza: 16:10 sta in verticale su iPhone senza
   mangiarsi l'elenco; `min-height` e' il ripiego per i browser senza
   `aspect-ratio` (il riquadro resta comunque una mappa, non una riga). */
.radar__mappa {
  position: relative;
  margin: 0 0 8px;
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-radius: var(--raggio-card);
  background: var(--mappa-terra);
  overflow: hidden;
  min-height: 220px;
  aspect-ratio: 16 / 10;
}

/* L'iframe della mappa: nessun bordo, tutto lo spazio del riquadro. */
.radar__tela {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- PULSANTE FISSO "MAPPA" (FAB di radar.tsx) ---------------------------- */
/* Pillola viola -> magenta con ombra, in basso a destra SOPRA la barra: il
   fondo prenota gia' `--altezza-barra` + safe area (regola `.vista`), quindi il
   pulsante non copre l'ultima tessera. */
.radar__fab {
  position: fixed;
  right: var(--spazio-4);
  bottom: calc(var(--barra-ingombro) + var(--spazio-3));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--raggio-pillola);
  background: linear-gradient(135deg, var(--accento-viola), var(--accento-magenta));
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 8px 18px var(--card-ombra);
}

.radar__fab:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.radar__fab svg {
  flex: 0 0 auto;
}

/* Tessera di una persona accesa dal tap su un pin della Mappa Globale. */
.radar__persona--evidenziata {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

/* --- MAPPA GLOBALE (modale a schermo intero, GlobalMap dell'app) ---------- */
/* Il dialogo occupa TUTTO lo schermo e non ha il padding di `.foglio`. La
   superficie di attesa e' la terra della mappa: il primo frame dell'iframe non
   cambia colore. */
.mappa-globale {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mappa-terra);
  color: var(--testo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mappa-globale::backdrop {
  background: var(--velo-scuro);
}

/* Testata glassmorphic fluttuante (globalMapHeader di radar.tsx). Il margine
   somma la SAFE AREA (come `.avvisi` e gli altri fogli): con
   `viewport-fit=cover` (index.html) su iPhone la testata finirebbe DENTRO la
   barra di stato / sotto il notch, quindi la ✕ di chiusura sarebbe invisibile e
   dietro l'orologio (segnalazione iOS del 30/10/2026: "la mappa non si chiude,
   non c'e' nessun pulsante"). Gli inset laterali servono in orizzontale. */
.mappa-globale__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  margin: calc(var(--spazio-2) + var(--safe-top))
    calc(var(--spazio-3) + var(--safe-right)) 0 calc(var(--spazio-3) + var(--safe-left));
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--card-bg);
}

.mappa-globale__testi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mappa-globale__titolo {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
}

.mappa-globale__sottotitolo {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bersaglio da 44px (linee guida HIG iOS): a 36px la ✕ al bordo destro del
   notch era difficile da centrare col pollice. Il glifo resta 16px. */
.mappa-globale__chiudi {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.mappa-globale__corpo {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: var(--spazio-2);
}

.mappa-globale__tela {
  position: absolute;
  inset: 0;
  background: var(--mappa-terra);
}

.mappa-globale__tela iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pillola "Cerco i locali..." (solo il primo giro, come l'hint dell'app). */
.mappa-globale__ricerca {
  position: absolute;
  top: var(--spazio-3);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--card-bg);
  color: var(--testo-secondario);
  font-size: 12px;
  z-index: 3;
}

/* Controlli POI sovrapposti alla mappa (alto a destra). */
.mappa-globale__controlli {
  position: absolute;
  top: var(--spazio-3);
  right: var(--spazio-3);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spazio-1);
  z-index: 4;
}

.mappa-globale__pillola {
  padding: 8px 12px;
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--card-bg);
  color: var(--testo);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mappa-globale__pillola[data-scelto='si'] {
  background: var(--accento-viola);
  border-color: var(--accento-magenta);
}

/* Legenda fluttuante: alzata dal fondo per non coprire l'attribuzione Google
   (stessa scelta di `legend` in global-map.tsx, `bottom: 34`). */
.mappa-globale__legenda {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom-reale) + var(--spazio-5));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--card-bg);
  z-index: 3;
}

.mappa-globale__voce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--testo-secondario);
}

.mappa-globale__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* I tre colori sono i marker VERI di `map.html` (MAP_PAINT), non tinte nuove:
   persona = testa del pin rosa con cornice bianca, POI = verde, Tu = blu. */
.mappa-globale__punto--persone {
  background: var(--marker-persona);
  border: 2px solid var(--testo);
}

.mappa-globale__punto--poi {
  background: var(--marker-luogo);
}

.mappa-globale__punto--tu {
  background: var(--marker-io);
}

/* Elenco dei luoghi e scheda del locale: due fogli ancorati al fondo, sopra la
   legenda (che resta visibile quando sono chiusi). */
.mappa-globale__elenco-foglio,
.mappa-globale__dettaglio {
  position: absolute;
  left: var(--spazio-2);
  right: var(--spazio-2);
  bottom: calc(var(--safe-bottom-reale) + var(--spazio-2));
  max-height: 55%;
  overflow: auto;
  padding: var(--spazio-3);
  border-radius: var(--raggio-card);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--input-opzione-bg);
  z-index: 5;
}

.mappa-globale__elenco-titolo {
  margin: 0 0 var(--spazio-2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.mappa-globale__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

/* Una riga-POI: nome e categoria a sinistra, stato di apertura a destra. */
.mappa-globale__riga {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--spazio-2);
  padding: 9px 12px;
  border-radius: 14px;
  border: var(--bordo-sottile) solid var(--card-border-soft);
  background: var(--card-bg);
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mappa-globale__riga-nome {
  grid-column: 1;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mappa-globale__riga-meta {
  grid-column: 1;
  font-size: 11px;
  line-height: 15px;
  color: var(--testo-attenuato);
}

.mappa-globale__riga-stato {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 10px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--testo-attenuato);
}

.mappa-globale__riga-stato[data-stato='aperto'] {
  color: var(--marker-luogo);
}

.mappa-globale__riga-stato[data-stato='chiuso'] {
  color: var(--testo-errore);
}

.mappa-globale__dettaglio-nome {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.mappa-globale__dettaglio-meta {
  margin: 0 0 var(--spazio-2);
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-attenuato);
}

.mappa-globale__dettaglio-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.mappa-globale__azione {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--card-bg);
  color: var(--testo);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.mappa-globale__azione:active {
  opacity: 0.85;
}

/* Avviso della mappa (errore dell'iframe, posizione mancante): riga di testo
   sopra il fondo, mai una superficie colorata. */
.mappa-globale__avviso {
  position: absolute;
  left: var(--spazio-3);
  right: var(--spazio-3);
  bottom: calc(var(--safe-bottom-reale) + var(--spazio-2));
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-errore);
  z-index: 6;
}

/* 6. TESSERE DEI PROFILI (RadarUserCard): riga con avatar 48, testi a sinistra
   e distanza a destra. */
.radar__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.radar__persona {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.radar__persona:active {
  opacity: 0.75;
}

.radar__foto,
.radar__iniziale {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

/* Ripiego senza foto (userAvatarFallback): iniziale bianca 20/24 900 sul viola
   tenue. */
.radar__iniziale {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--radar-avatar-ripiego);
  color: var(--testo);
  font-size: 20px;
  line-height: 24px;
  font-weight: 900;
}

/* Blocco dei testi: gap 1px (userInfo); nome e badge sulla stessa riga. */
.radar__testi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.radar__nome-riga {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.radar__nome {
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge di intenzione e pensiero del giorno: 13/18 secondario; il pensiero si
   ferma a due righe (numberOfLines=2 dell'APK). */
.radar__meta,
.radar__descrizione {
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.radar__descrizione {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.radar__pillola {
  flex: none;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: var(--dimensione-micro);
  padding: 0 var(--spazio-2);
}

/* Distanza (distanceBadge): 5/10, ciano 11/15 su velo ciano. */
.radar__distanza {
  flex: none;
  padding: 5px 10px;
  border: var(--bordo-sottile) solid var(--radar-distanza-bordo);
  border-radius: var(--raggio-pillola);
  background: var(--radar-distanza-sfondo);
  color: var(--accento-ciano);
  font-size: 11px;
  line-height: 15px;
}

/* 7. STATO VUOTO (emptyState): card centrata, icona SVG 36 nel box di 42,
   titolo 13/18 700. */
.radar__vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 24px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
  text-align: center;
}

/* Box dell'icona: 42 = l'altezza di riga dell'emoji nell'APK, 36 il lato del
   disegno (misure e pittura dell'SVG stanno negli attributi del markup). La
   tinta e' quella del tema e l'SVG la eredita con `currentColor`. */
.radar__vuoto-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  color: var(--accento-ciano);
}

.radar__vuoto-titolo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--testo);
}

.radar__vuoto-corpo {
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

/* Avviso della vista (offline, timer scaduto, mappa non disponibile): una riga
   di testo come `styles.error` dell'APK (13/18), non una superficie in stile
   web. */
.radar__avviso {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-errore);
}


/* --- Piè di pagina -------------------------------------------------------- */
.pie {
  margin: var(--spazio-2) 0 0;
  font-size: var(--dimensione-micro);
  color: var(--testo-attenuato);
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-3);
}

/* =============================================================================
   CHAT 1-a-1 (Passo 5 della parita' APK, guscio v15)
   Elenco conversazioni (`chat/index.tsx` + `ChatRow`) e thread
   (`chat/[chatId].tsx` + `MessageBubble`/`Composer`).

   MISURE: sono i px dei componenti nativi, scritti come nel componente. Le due
   scale di spaziatura NON coincidono (Spacing.three = 16 nell'app, --spazio-3 =
   12 nel guscio), quindi una trascrizione "a variabili" sarebbe una parita'
   solo apparente. I COLORI restano token di tokens.css (regola V7).

   SCROLL (requisito del Passo 5): il pannello `#vista-chat` NON scorre mai
   (`overflow: hidden`) e prenota in fondo la barra fissa a cinque voci; l'unica
   parte che scorre e' `.chat-elenco__corpo` (elenco) o `.chat-thread__corpo`
   (messaggi), entrambi con `overscroll-behavior: contain`. La testata dell'app
   e la barra in basso restano ferme, il body non si muove mai.
   ============================================================================= */

/* Il pannello della Chat e' una schermata dell'app: colonna a piena altezza.
   Il fondo prenota ESATTAMENTE l'ingombro della barra (`--altezza-barra` +
   `--safe-bottom-reale` + il suo bordo): cosi' `.chat-thread__superficie`
   (flex: 1) prende TUTTI i pixel rimasti fra testata e barra e i messaggi non
   perdono la fascia che l'inset grezzo riservava senza mostrarla. */
.vista[data-pannello='chat'] {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-content: stretch;
  overflow: hidden;
  padding: 0 0 calc(var(--barra-ingombro) + var(--bordo-sottile));
}

/* Le due schede della Chat non hanno piu' la veste "card" del web (padding,
   bordo, fondo): sono schermate con la LORO testata, come nell'APK. */
.vista[data-pannello='chat'] #card-chat,
.vista[data-pannello='chat'] #card-thread {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

/* --- 1. ELENCO CONVERSAZIONI ---------------------------------------------- */
/* `#card-chat` e' una colonna: testata (fissa) + avviso (fisso) + corpo che
   scorre. */
#card-chat {
  display: flex;
  flex-direction: column;
}

/* Testata dell'elenco (styles.header di chat/index.tsx): titolo 20/26 900,
   pillola dei non letti, bordo inferiore sottile. */
.chat-elenco__testa {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  /* Guscio v61: la safe area in alto la prenota QUESTA testata (il pannello
     Chat ha `padding-top: 0` e la barra fissa del guscio non esiste piu'). */
  padding: calc(16px + var(--safe-top)) 16px 16px;
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
}

.chat-elenco__titolo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 900;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `unreadPill`: ciano di marca, testo scuro, 12/16 800. */
.chat-elenco__nonLetti {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--raggio-pillola);
  background: var(--accento-ciano);
  color: var(--chat-nonletti-testo);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  white-space: nowrap;
}

/* Comando in pillola (nell'APK l'aggiornamento e' il gesto pull-to-refresh). */
.chat-pillola {
  appearance: none;
  flex: none;
  align-self: center;
  padding: 7px 14px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--accento-ciano);
  font: inherit;
  font-size: var(--dimensione-piccola);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

.chat-pillola:active {
  opacity: 0.75;
}

/* Avviso (errore del server / offline): una riga di testo, non una superficie. */
.chat-avviso {
  flex: none;
  margin: 0;
  padding: var(--spazio-2) 16px 0;
  color: var(--testo-errore);
  font-size: 13px;
  line-height: 18px;
}

/* L'UNICA parte che scorre nell'elenco. */
.chat-elenco__corpo {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat__voce {
  margin: 0;
  min-width: 0;
}

/* Una conversazione: la riga di `ChatRow` (vetro 10%, bordo 20%, raggio 16,
   padding 8, avatar 52). */
.chat__conversazione {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat__conversazione:active {
  opacity: 0.9;
  transform: scale(0.99);
}

/* Avatar `RadarAvatar` (size 52) e sue due facce: foto o iniziale. */
.chat__foto,
.chat__iniziale {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--avatar-sfondo);
}

.chat__iniziale {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marker-iniziale);
  font-size: 20px;
  font-weight: var(--peso-forte);
}

/* `rowText`: due righe distinte (nome/orario, anteprima/badge). */
.chat__testi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.chat__rigaAlta,
.chat__rigaBassa {
  display: flex;
  align-items: center;
  gap: var(--spazio-1);
  min-width: 0;
}

.chat__rigaBassa {
  gap: var(--spazio-2);
}

.chat__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  color: var(--testo);
}

/* `StaffBadge compact` (staff-badge.tsx): 10/14 700 viola, pillola sottile. */
.chat__staff {
  flex: none;
  padding: 2px 6px;
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  border-radius: var(--raggio-pillola);
  color: var(--accento-viola);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

/* `rowTime`: 11/14 attenuato, a destra nella riga alta. */
.chat__quando {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  line-height: 14px;
  color: var(--testo-attenuato);
  white-space: nowrap;
}

/* `rowPreview`: 13/18 secondario; con non letti diventa bianco e 700. */
.chat__ultimo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.chat__ultimo--nonLetto {
  color: var(--testo);
  font-weight: 700;
}

/* `rowBadge`: pillola ciano 20x20 (minimo), 11/14 900, testo scuro. */
.chat__badge {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accento-ciano);
  color: var(--chat-nonletti-testo);
  font-size: 11px;
  line-height: 20px;
  font-weight: 900;
  text-align: center;
}

/* `lista.vuoto`: 13/19 attenuato, centrato, 64 dall'alto. */
.chat-elenco__vuoto {
  margin: 64px 0 0;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}

/* --- Pezzi condivisi con le superfici sociali (valori INVARIATI) ---------- */
.social__lista {
  margin: 0 0 var(--spazio-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spazio-2);
}

/* La bacheca usa lo stesso gap del `listContent` natale (8): la distanza fra
   due bottiglie non e' un'informazione, il testo dentro la card si'. */
.social__lista--bacheca {
  gap: var(--spazio-2);
}

.social__testi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.social__nome {
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  color: var(--testo);
}

/* --- 2. THREAD APERTO ------------------------------------------------------ */
/* `#card-thread` e' una colonna: testata (fissa) + banner + superficie che
   contiene l'unica lista che scorre e il composer.
   `max-height: 100%` e' la rete di sicurezza per la TASTIERA (chat su Safari
   iOS): quando l'area visibile si riduce il guscio si accorcia (`--vh`, scritto
   da js/viewport-stabilizza.js) e il pannello deve accorciarsi con lui, mai
   restare alto quanto la schermata: altrimenti il composer finisce dietro la
   tastiera e WebKit scorre la finestra visiva, spingendo il contenuto fuori
   (fascia vuota sopra la tastiera). Nessuna altezza di viewport qui dentro:
   quella (100vh/dvh) sbaglia proprio con la tastiera aperta. */
#card-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

/* Testata: la card dell'header di `[chatId].tsx` (margine 8, raggio 22,
   vetro scuro) con la safe area in alto: in modalita' thread la testata del
   guscio e' nascosta (`body[data-sottopagina='chat']`). */
.chat-thread__testa {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  margin: calc(8px + var(--safe-top)) 8px 8px;
  padding: 8px 16px;
  border: var(--bordo-sottile) solid var(--chat-intestazione-bordo);
  border-radius: 22px;
  background: var(--chat-intestazione-sfondo);
}

/* Freccia indietro: cerchio 36 (come `headerMore` dell'APK). Serve al web:
   nell'app il back e' quello nativo dello stack. */
.chat-thread__indietro {
  appearance: none;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 18px;
  background: var(--chip-bg);
  color: var(--testo);
  cursor: pointer;
}

.chat-thread__indietro:active {
  opacity: 0.75;
}

.chat-thread__indietro svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Il testo resta per gli screen reader (l'icona da sola non e' un nome). */
.chat__indietroTesto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Una sottopagina ha la SUA intestazione e la safe area in alto la prende la
   testata del thread (`margin` con `--safe-top`): non c'e' piu' una testata del
   guscio da nascondere (guscio v61). */

/* Avatar della controparte (size 52, come l'elenco). */
.chat-thread__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-sfondo);
}

.chat-thread__avatar .chat__foto,
.chat-thread__avatar .chat__iniziale {
  width: 100%;
  height: 100%;
}

.chat-thread__testi {
  flex: 1 1 auto;
  min-width: 0;
}

/* Avatar + nome = UNICO bersaglio (scheda profilo dell'altra persona): e' un
   <button> che si comporta da contenitore flessibile, cosi' il nome continua a
   cedere spazio con i puntini e .chat-thread__badge/.chat-thread__strumento
   restano fuori dal tocco. Nessun colore nuovo: e' la testata di sempre. */
.chat-thread__profilo {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-thread__profilo:active {
  opacity: 0.8;
}

/* Comandi della testata (cestino = cancella la conversazione, "..." = segnala /
   blocca): cerchi 36 come la freccia indietro, cosi' la testata resta una riga
   sola anche con il font di sistema ingrandito. */
.chat-thread__strumento {
  appearance: none;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 18px;
  background: var(--chip-bg);
  color: var(--testo);
  cursor: pointer;
}

.chat-thread__strumento:active {
  opacity: 0.75;
}

.chat-thread__strumento svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Il "..." e' pieno (tre cerchi): la regola sopra toglie il riempimento agli
   SVG dei comandi, quindi qui si ridanno i puntini. */
#thread-menu svg circle {
  fill: currentColor;
  stroke: none;
}

/* `headerName`: 20/24 900; il nome cede spazio con i puntini (flexShrink). */
.chat-thread__nome {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  margin: 0;
  min-width: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 900;
  color: var(--testo);
}

.chat-thread__nomeTesto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `headerSubtitle`: riga di STATO (Online / sta scrivendo / ultimo accesso),
   11/14. Il pallino esiste solo quando la persona e' Online. */
.chat-thread__sottotitolo {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 0;
  min-width: 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--chat-sottotitolo);
}

/* Il testo cede spazio con i puntini (nome o frase lunghi). */
.chat-thread__sottotitolo > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pallino "Online": verde (la stessa tinta del messaggio letto, nessun colore
   nuovo). Nascosto per "sta scrivendo" e per l'ultimo accesso: li' informa il
   testo, non un pallino. */
.chat-thread__punto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chat-stato-letto);
}

/* "Sta scrivendo": in tinta d'accento, cosi' si distingue da "Online". */
.chat-thread__sottotitolo[data-presenza='digitando'] {
  color: var(--accento-ciano);
}

/* `blockedBadge`: pillola 12/16 700 con bordo tenue. Nel componente il badge
   puo' restringersi (flexShrink) e troncare, lasciando spazio al nome. */
.chat-thread__badge {
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px 8px;
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  border-radius: var(--raggio-pillola);
  color: var(--testo-attenuato);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `blockedBanner` (thread.bloccata): riquadro sopra la superficie con margine
   8 su tutti i lati, padding 8, testo 12/17 centrato nell'ambra d'avviso
   dell'APK (`blockedText.color` -> --chat-blocco-testo). */
.chat-thread__blocco {
  flex: none;
  margin: 8px 16px;
  padding: 8px;
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-bg);
  color: var(--chat-blocco-testo);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

/* `chatSurface`: lista + composer nella STESSA card di vetro. */
.chat-thread__superficie {
  flex: 1 1 auto;
  min-height: 0;
  /* Mai piu' alta del pannello: con la tastiera aperta il guscio si accorcia
     (`--vh`) e la superficie lo segue, cosi' il composer resta SOPRA il bordo
     visibile (lo spazio e' del campo, non della lista). */
  max-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 8px 8px;
  border: var(--bordo-sottile) solid var(--chat-superficie-bordo);
  border-radius: 22px;
  background: var(--chat-superficie-sfondo);
  overflow: hidden;
}

/* L'UNICA parte che scorre nel thread: i messaggi. */
.chat-thread__corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Quando iOS porta in vista il campo che ha preso il focus, l'ultimo fumetto
     non deve finire appiccicato al composer. */
  scroll-padding-bottom: 8px;
}

/* "Carica i precedenti" e stato vuoto: centrati nel corpo. */
.chat-thread__piu {
  align-self: center;
}

.chat-thread__vuoto {
  margin: 64px 0 0;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

/* La lista dei messaggi: una colonna, i fumetti si allineano da soli. */
.chat__thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `bubble`: max 80%, padding 8/12, raggio 20, bordo 1. Il mio a destra. */
.chat__bolla {
  max-width: 80%;
  align-self: flex-start;
  padding: 8px 12px;
  border: var(--bordo-sottile) solid var(--chat-bolla-ricevuta-bordo);
  border-radius: 20px;
  background: var(--chat-bolla-ricevuta-sfondo);
}

.chat__bolla--mia {
  align-self: flex-end;
  border-color: var(--chat-bolla-mia-bordo);
  background: var(--chat-bolla-mia-sfondo);
}

/* Messaggio di SISTEMA (conversazione cancellata): banner centrato, non bolla. */
.chat__bolla--sistema {
  align-self: center;
  max-width: 86%;
  margin: 8px 0;
  padding: 8px 16px;
  border-color: var(--input-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
}

.chat__testoBolla {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--chat-bolla-ricevuta-testo);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat__bolla--mia .chat__testoBolla {
  color: var(--testo);
}

/* `systemText`: 12/17 corsivo attenuato, centrato. */
.chat__bolla--sistema .chat__testoBolla {
  color: var(--testo-attenuato);
  font-size: 12px;
  line-height: 17px;
  font-style: italic;
  text-align: center;
}

/* `bubbleMeta`: riga DENTRO la bolla, a destra (modificato + orario + stato). */
.chat__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
  font-size: 10px;
  line-height: 12px;
  color: var(--chat-meta-ricevuta);
}

.chat__bolla--mia .chat__meta {
  color: var(--chat-meta-mia);
}

/* `editedLabel`: 10/12 corsivo bianco al 60%. */
.chat__modificato {
  font-style: italic;
  color: var(--chat-modificato);
}

.chat__orario {
  flex: none;
}

/* Stato di recapito: SPUNTE (una = inviato, due = consegnato/letto), affiancate
   e sulla stessa linea come `MessageStatusIndicator`. Rosse/neutre finche' il
   messaggio non e' letto, VERDI quando lo e'. */
.chat__stato {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 12px;
  color: var(--chat-stato-non-letto);
}

.chat__stato--letto {
  color: var(--chat-stato-letto);
}

/* Una spunta: i due lati "sinistro + inferiore" di un quadratino ruotati di
   -45 gradi. 7x4 px, sempre la stessa forma: l'allineamento orizzontale e'
   esatto per costruzione (nessun glifo, nessuna emoji, nessuna SVG). */
.chat__spunta {
  display: block;
  flex: none;
  width: 7px;
  height: 4px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

/* La seconda spunta si sovrappone appena alla prima: doppia spunta compatta. */
.chat__spunta + .chat__spunta {
  margin-left: -1px;
}

/* Allegato (il web non carica media: mostra il link di quello ricevuto). */
.chat__allegato {
  display: inline-block;
  margin-top: var(--spazio-1);
  color: var(--accento-ciano);
  font-size: 13px;
}

/* `composer`: barra in fondo alla superficie (campo + invio). */
.chat__composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--spazio-2);
  padding: 8px 16px;
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
  background: var(--chat-barre-sfondo);
}

/* `input`: 15/20, min 42, max 110, raggio 14 (vetro 8% + bordo 16%). */
.chat__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  max-height: 110px;
  padding: 8px 12px;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  resize: none;
}

.chat__campo::placeholder {
  color: var(--testo-attenuato);
}

.chat__campo:disabled {
  opacity: 0.5;
}

/* `sendButton`: cerchio 42 viola con la freccia bianca. */
.chat__invia {
  appearance: none;
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 21px;
  background: var(--accento-viola);
  color: var(--testo);
  cursor: pointer;
}

.chat__invia svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.chat__invia:disabled {
  opacity: 0.4;
}

.chat__invia:active {
  opacity: 0.75;
}

/* Contatore dei caratteri: nell'APK non si vede (il limite e' imposto da
   `maxLength`), quindi resta nel DOM per gli screen reader e per le guardie. */
.chat__contatore {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   CHAT — FASE A: MEDIA, VOCALE, FOTOCAMERA E ASSISTENTE (guscio v17)
   Misure dai componenti nativi approvati:
     - Composer: attachButton 42x42 raggio 21, bordo 24%, vetro 8%; glifo 24/28
       700 (dentro il cerchio non scala);
     - voce: voiceStatus raggio 14, rosso 12% + bordo 35%, pallino 10,
       voiceCancelButton rosso 18% + bordo, voicePlayButton 26;
     - ChatMediaBubble: foto 220x220, video 240x160, riquadro raggio 20,
       loader al 45%; audio: play 34, onda 30, chip velocita'.
   ============================================================================= */

/* --- Composer: "+" / cestino ---------------------------------------------- */
.chat__allega {
  appearance: none;
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--chat-allegato-bordo);
  border-radius: 21px;
  background: var(--chat-allegato-sfondo);
  color: var(--testo);
  cursor: pointer;
}

.chat__allega:active {
  opacity: 0.75;
}

.chat__allegaIcona {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat__allegaIcona[hidden] {
  display: none;
}

/* Durante la registrazione il "+" e' il CESTINO (scarta, non invia). */
.chat__allega--cestino {
  border-color: var(--chat-vocale-bordo);
  background: var(--chat-vocale-cestino);
  color: var(--chat-vocale-testo);
}

/* --- Vocale: stato al posto del campo testo ------------------------------- */
.chat__vocale {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: 8px 12px;
  border: var(--bordo-sottile) solid var(--chat-vocale-bordo);
  border-radius: 14px;
  background: var(--chat-vocale-sfondo);
}

.chat__vocale[hidden] {
  display: none;
}

/* --- Vocale: ONDE animate durante la registrazione ------------------------ */
/* Sostituiscono il pallino statico del 2025: con la registrazione a TAP
   (28/10/2026) il movimento e' l'unica prova che il microfono sta acquisendo. */
.chat__vocaleOnda {
  flex: none;
  width: 30px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat__vocaleOnda[hidden] {
  display: none;
}

/* Profilo FISSO delle barre (nessuna casualita'): l'onda la fa l'animazione
   CSS, sfasata barra per barra (nth-child), non il caso. */
.chat__vocaleBarra {
  flex: 0 0 3px;
  height: 60%;
  border-radius: 2px;
  background: var(--chat-vocale-testo);
  transform-origin: center;
  animation: chat-vocale-onda 900ms ease-in-out infinite alternate;
}

.chat__vocaleBarra:nth-child(1) { height: 40%; animation-delay: 0ms; }
.chat__vocaleBarra:nth-child(2) { height: 75%; animation-delay: 90ms; }
.chat__vocaleBarra:nth-child(3) { height: 55%; animation-delay: 180ms; }
.chat__vocaleBarra:nth-child(4) { height: 100%; animation-delay: 270ms; }
.chat__vocaleBarra:nth-child(5) { height: 65%; animation-delay: 360ms; }

/* --- Microfono DEDICATO del composer (fuori dal campo testo) -------------- */
/* Cerchio 42 identico a "+" e invio: sta FRA il campo e la freccia, quindi il
   vocale non richiede piu' di aprire il menu allegati. */
.chat__vocaleMic {
  appearance: none;
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--chat-allegato-bordo);
  border-radius: 21px;
  background: var(--chat-allegato-sfondo);
  color: var(--testo);
  cursor: pointer;
}

.chat__vocaleMic:active {
  opacity: 0.75;
}

.chat__vocaleMic:disabled {
  opacity: 0.4;
}

/* Registrazione in corso: il microfono e' diventato "ferma" (rosso). */
.chat__vocaleMic--stop {
  border-color: var(--chat-vocale-bordo);
  background: var(--chat-vocale-cestino);
  color: var(--chat-vocale-testo);
  animation: chat-vocale-respiro 1s ease-in-out infinite;
}

.chat__vocaleMicIcona {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat__vocaleMicIcona[hidden] {
  display: none;
}

.chat__vocaleTempo {
  flex: none;
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
}

.chat__vocaleTesto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
}

.chat__vocalePlay {
  appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: var(--accento-viola);
  color: var(--testo);
  cursor: pointer;
}

.chat__vocalePlay[hidden] {
  display: none;
}

.chat__vocalePlay svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

#thread-vocale-audio {
  display: none;
}

/* Il campo sparisce SOLO in modalita' vocale (il composer resta lo stesso). */
.chat__composer--vocale .chat__campo {
  display: none;
}

/* Selettori file del sistema: mai visibili (li apre il menu "+"). */
.chat__file {
  display: none;
}

@keyframes chat-vocale-respiro {
  50% {
    opacity: 0.35;
  }
}

/* Onda delle barre: la scala va da bassa a piena (alternate = su e giu'). */
@keyframes chat-vocale-onda {
  from {
    transform: scaleY(0.35);
  }

  to {
    transform: scaleY(1);
  }
}

/* --- Media nelle bolle ----------------------------------------------------- */
.chat__media {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--chat-media-sfondo);
  overflow: hidden;
}

.chat__media--foto {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.chat__media--video {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
}

.chat__mediaImg,
.chat__mediaVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: var(--chat-media-sfondo);
}

.chat__mediaCaricamento {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: var(--chat-media-velo);
  color: var(--chat-media-testo);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

.chat__mediaCaricamento[hidden] {
  display: none;
}

.chat__mediaSpinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--chat-media-testo);
  border-right-color: transparent;
  border-radius: 50%;
  animation: chat-media-gira 0.8s linear infinite;
}

@keyframes chat-media-gira {
  to {
    transform: rotate(360deg);
  }
}

.chat__mediaScaduto {
  margin: 0;
  padding: 6px 2px;
  color: var(--chat-meta-ricevuta);
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
}

.chat__bolla--caricamento {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
}

/* Il velo del loader dentro una bolla "in corso" non e' un overlay assoluto. */
.chat__bolla--caricamento .chat__mediaCaricamento {
  position: static;
  flex-direction: row;
  background: transparent;
  color: var(--testo-secondario);
  padding: 0;
}

.chat__bolla--caricamento .chat__mediaSpinner {
  border-color: var(--accento-ciano);
  border-right-color: transparent;
}

/* --- Player del vocale dentro la bolla ------------------------------------ */
.chat__audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  min-width: 200px;
}

.chat__audioPlay {
  appearance: none;
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: var(--chat-audio-pulsante);
  color: var(--chat-media-testo);
  cursor: pointer;
}

.chat__audioGlifo {
  font-size: 12px;
  line-height: 14px;
  font-weight: 900;
}

.chat__onda {
  flex: 1 1 auto;
  min-width: 96px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.chat__ondaBarra {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--accento-ciano);
  opacity: 0.35;
}

.chat__ondaBarra--suonata {
  opacity: 0.95;
}

.chat__audioTempo {
  flex: none;
  font-size: 11px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--chat-meta-mia);
  white-space: nowrap;
}

.chat__bolla:not(.chat__bolla--mia) .chat__audioTempo {
  color: var(--chat-meta-ricevuta);
}

.chat__audioVelocita {
  flex: none;
  display: flex;
  gap: 4px;
}

.chat__audioRate {
  appearance: none;
  padding: 3px 7px;
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  border-radius: var(--raggio-pillola);
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  cursor: pointer;
}

.chat__audioRate--attiva {
  border-color: var(--accento-ciano);
  background: var(--accento-ciano);
  color: var(--chat-nonletti-testo);
}

/* --- Foglio degli allegati e pannello dell'Assistente (tenda) ------------- */
.tenda {
  padding: 0 0 calc(var(--spazio-4) + var(--safe-bottom-reale));
  border-radius: 20px 20px 0 0;
}

.tenda__testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: 16px 16px 8px;
}

.tenda__titolo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  color: var(--testo);
}

.tenda__chiudi {
  appearance: none;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 18px;
  background: var(--chip-bg);
  color: var(--testo-attenuato);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.tenda__intro {
  margin: 0;
  padding: 0 16px 8px;
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 18px;
}

.tenda__passo[hidden] {
  display: none;
}

.tenda__sottotitolo {
  margin: 8px 0 4px;
  padding: 0 16px;
  color: var(--testo-attenuato);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.tenda__voce {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  min-height: 50px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tenda__voce:active {
  opacity: 0.6;
}

.tenda__icona {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 18px;
  background: var(--chip-bg);
  color: var(--accento-ciano);
}

.tenda__icona svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tenda__testi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tenda__testo {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--testo);
}

.tenda__nota {
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-secondario);
}

.tenda__separatore {
  height: var(--bordo-sottile);
  margin: 0 16px;
  background: var(--card-border-soft);
}

/* Voce DISTRUTTIVA del menu della conversazione ("Blocca utente"): la tinta
   d'errore del tema sul testo e sull'icona, stessa misura delle altre voci. */
.tenda__voce--pericolo .tenda__testo,
.tenda__voce--pericolo .tenda__icona {
  color: var(--testo-errore);
}

.tenda__voce--pericolo .tenda__icona {
  border-color: var(--profilo-pericolo-bordo);
  background: var(--profilo-pericolo-sfondo);
}

/* Riga NON cliccabile ("Gia' bloccato"): stesso ingombro, testo attenuato. */
.tenda__voce--disabilitata {
  cursor: default;
  opacity: 0.7;
}

/* `hidden` deve VINCERE su `display: flex` della voce (l'attributo da solo
   soccombe a una regola d'autore). */
.tenda__voce[hidden] {
  display: none;
}

.tenda__voce--disabilitata .tenda__testo {
  color: var(--testo-attenuato);
  font-weight: 600;
}

/* --- Scheda PROFILO (schermo intero, parita' `user-profile-screen.tsx`) ---- */
/* Dal 05/11/2026 e' una SEZIONE a schermo intero, non piu' una tenda in basso:
   stessa forma della galleria media (`.media-viewer`), testata ferma in alto e
   corpo che scorre. Il foglio resta un `<dialog>` (fuoco, ESC e blocco dello
   scorrimento sotto arrivano da `apriFoglio`): le regole di `.foglio` qui
   vengono ribaltate — niente margini, niente angoli, nessun limite di altezza. */
.tenda--profilo {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--bg-stop-alto);
  color: var(--testo);
}

/* Testata a filo dello schermo, sotto la tacca; la X resta a portata di
   pollice come nella galleria media. */
.tenda--profilo .tenda__testa {
  flex: none;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
}

.chat-profilo__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  min-height: 0;
  gap: var(--spazio-3);
  margin: 0 auto;
  padding: var(--spazio-2) 16px calc(var(--spazio-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-profilo__avviso {
  margin: 0;
  padding: 8px 12px;
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-bg);
  color: var(--testo);
  font-size: 13px;
  line-height: 18px;
}

.chat-profilo__testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
}

/* Avatar 72 (RadarAvatar grande): stesso cerchio delle altre superfici. */
.chat-profilo__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-sfondo);
}

.chat-profilo__avatar .chat__foto,
.chat-profilo__avatar .chat__iniziale {
  width: 100%;
  height: 100%;
}

/* AVATAR DELLA SCHEDA PROFILO = PORTA DELLA GALLERIA (06/11/2026)
   Il bottone che avvolge la foto non deve aggiungere bordo, sfondo o spazio:
   l'avatar resta identico, cambia solo che al tocco si apre il visualizzatore
   a schermo intero (swipe fra TUTTE le foto) invece di non fare nulla. */
.profilo-avatar-apri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}

.profilo-avatar-apri:focus-visible {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

.profilo-avatar-apri .chat__foto,
.profilo-avatar-apri .chat__iniziale {
  width: 100%;
  height: 100%;
}

.chat-profilo__testi {
  min-width: 0;
}

.chat-profilo__nome {
  margin: 0;
  overflow: hidden;
  color: var(--testo);
  font-size: 18px;
  line-height: 24px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-profilo__meta {
  margin: 2px 0 0;
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 18px;
}

.chat-profilo__sezione {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--spazio-2);
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
}

.chat-profilo__sezione[hidden] {
  display: none;
}

.chat-profilo__etichetta {
  margin: 0;
  color: var(--testo-attenuato);
  font-size: 11px;
  line-height: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Il testo arriva dal DB: si conservano gli a capo, mai `innerHTML`. */
.chat-profilo__testo {
  margin: 0;
  color: var(--testo);
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Pillola del genere accanto al nome (04/11/2026): e' la stessa capsula del
   Dating (`pillolaGenere`, tinte `--genere-*`), qui in un contenitore che la
   tiene a filo del nome e la centra sul proprio inchiostro. */
.chat-profilo__genere {
  display: flex;
  margin-top: 2px;
}

.chat-profilo__genere[hidden] {
  display: none;
}

/* --- Voci etichetta/valore di "Dettagli" e "Gusti" ----------------------- */
/* Classi CONDIVISE dalle due schede del guscio (Dating e Chat): la forma della
   coppia `dt`/`dd` si scrive una volta sola (le riempie
   `riempiElencoProfilo` di radar.js). Griglia a due colonne: l'etichetta si
   adatta al contenuto, il valore prende il resto e va a capo. */
.chat-profilo__elenco,
.dating__profilo-elenco {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px var(--spazio-3);
  margin: 0;
}

.chat-profilo__elenco[hidden],
.dating__profilo-elenco[hidden] {
  display: none;
}

.profilo-scheda__voce-chiave {
  margin: 0;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.profilo-scheda__voce-valore {
  margin: 0;
  color: var(--testo);
  font-size: 13px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* GALLERIA A MINIATURE (05/11/2026). Tutte le anteprime in una griglia che si
   adatta alla larghezza (`auto-fill`): si vede SUBITO quante foto ci sono. Il
   tocco su una qualsiasi apre il visualizzatore media a schermo intero
   (`visualizzatore-media.js`), che ha una pagina per foto, lo SWIPE laterale,
   le frecce e il contatore "n / tot": indice del riquadro = indice dello swipe. */
.chat-profilo__galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.chat-profilo__foto {
  appearance: none;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 14px;
  background: var(--avatar-sfondo);
  cursor: pointer;
}

.chat-profilo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Fotocamera (schermo intero) ----------------------------------------- */
.camera,
.anteprima,
.media-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--foglio-sfondo);
  color: var(--foglio-testo);
}

.camera[open],
.anteprima[open],
.media-viewer[open] {
  display: block;
}

.camera::backdrop,
.anteprima::backdrop,
.media-viewer::backdrop {
  background: var(--foglio-sfondo);
}

.camera__interno,
.anteprima__interno {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--larghezza-max-contenuto);
  height: 100%;
  margin: 0 auto;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom-reale);
}

.camera__testa,
.anteprima__testa {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: var(--bordo-sottile) solid var(--foglio-bordo);
}

.camera__titolo,
.anteprima__titolo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera__chiudi,
.anteprima__chiudi,
.media-viewer__chiudi {
  appearance: none;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--foglio-bordo);
  color: var(--foglio-testo-tenue);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.camera__area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--chat-media-sfondo);
}

.camera__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera__timer {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--raggio-pillola);
  background: var(--chat-media-velo);
  color: var(--chat-media-testo);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.camera__timer[hidden] {
  display: none;
}

.camera__piede {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.camera__gira {
  appearance: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--foglio-bordo);
  border-radius: 24px;
  background: transparent;
  color: var(--foglio-testo);
  cursor: pointer;
}

.camera__gira svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera__azione {
  appearance: none;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 4px solid var(--foglio-testo);
  border-radius: 34px;
  background: var(--chat-media-testo);
  cursor: pointer;
}

.camera__azione--video {
  border-color: var(--chat-vocale-testo);
  background: var(--chat-vocale-punto);
}

.camera__azione--attiva {
  border-radius: 14px;
  border-color: var(--chat-vocale-testo);
  background: var(--chat-vocale-punto);
}

.camera__spazio {
  width: 48px;
  height: 48px;
}

/* --- Anteprima prima dell'invio ----------------------------------------- */
.anteprima__area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--chat-media-sfondo);
}

.anteprima__immagine,
.anteprima__video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  object-fit: contain;
}

.anteprima__immagine[hidden],
.anteprima__video[hidden] {
  display: none;
}

.anteprima__nota {
  flex: none;
  margin: 0;
  padding: 8px 24px 0;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
}

.anteprima__nota[hidden] {
  display: none;
}

.anteprima__piede {
  flex: none;
  display: flex;
  gap: var(--spazio-3);
  padding: 16px 24px calc(16px + var(--safe-bottom-reale));
}

.anteprima__annulla,
.anteprima__invia {
  appearance: none;
  flex: 1 1 0;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--raggio-pillola);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  cursor: pointer;
}

.anteprima__annulla {
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--chip-bg);
  color: var(--testo);
}

.anteprima__invia {
  border: 0;
  background: var(--accento-viola);
  color: var(--testo);
}

.anteprima__invia:disabled {
  opacity: 0.4;
}

/* --- Media a schermo intero --------------------------------------------- */
.media-viewer {
  align-items: center;
  justify-content: center;
  padding: calc(56px + var(--safe-top)) 16px calc(16px + var(--safe-bottom-reale));
}

/* Un `<dialog>` chiuso resta `display:none` anche con il flex del viewer. */
.media-viewer:not([open]) {
  display: none;
}

.media-viewer[open] {
  display: flex;
}

.media-viewer__chiudi {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: 16px;
  z-index: 3;
}

/* PISTA + BINARIO: una slide per foto, il binario scorre in orizzontale.
   `touch-action: none` e' OBBLIGATORIO: senza, iOS/Android si tengono il gesto
   per lo scroll della pagina e il trascinamento fra le foto non arriva mai.
   `user-select`/`-webkit-user-drag` spengono la selezione e il "trascina
   immagine" del desktop, che ruberebbe il pointer al gesto. */
.media-viewer__pista {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.media-viewer__binario {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  /* Rientro e cambio foto: la transizione la spegne il gesto con la classe
     `--secco` (durante il trascinamento il binario segue il dito). */
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms linear;
}

.media-viewer__binario--secco {
  transition: none;
}

.media-viewer__foto {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer__immagine {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 20px;
  -webkit-user-drag: none;
  user-select: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform 180ms ease-out;
}

/* Frecce della galleria: solo desktop/tastiera (su telefono si swipa). */
.media-viewer__freccia {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--foglio-bordo);
  color: var(--foglio-testo);
  font: inherit;
  font-size: 26px;
  line-height: 26px;
  cursor: pointer;
}

.media-viewer__freccia[hidden] {
  display: none;
}

.media-viewer__freccia:disabled {
  opacity: 0.35;
}

.media-viewer__freccia--prima {
  left: 12px;
}

.media-viewer__freccia--dopo {
  right: 12px;
}

/* Contatore "3 / 8": numeri tabulari, sopra la safe area del fondo. */
.media-viewer__contatore {
  position: absolute;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom-reale));
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--foglio-bordo);
  color: var(--foglio-testo-tenue);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.media-viewer__contatore[hidden] {
  display: none;
}

.media-viewer__immagine,
.media-viewer__video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

.media-viewer__immagine[hidden],
.media-viewer__video[hidden] {
  display: none;
}

/* --- Assistente Nearoo --------------------------------------------------- */
.chat-ai__scintilla {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--chat-ai-pulsante);
  color: var(--chat-ai-accento);
}

.chat-ai__scintilla::before {
  content: "\2726";
  font-size: 16px;
  line-height: 18px;
}

.chat-ai__vuoto {
  margin: 0;
  padding: 8px 16px;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
}

.chat-ai__vuoto[hidden] {
  display: none;
}

.chat-ai__flusso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 38vh;
  max-height: 38dvh;
  padding: 0 16px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-ai__bolla {
  max-width: 88%;
  padding: 10px 14px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 20px;
}

.chat-ai__bolla--utente {
  align-self: flex-end;
  border-color: var(--chat-bolla-mia-bordo);
  background: var(--chat-bolla-mia-sfondo);
}

.chat-ai__bolla--assistente {
  align-self: flex-start;
  border-color: var(--chat-ai-bordo);
  background: var(--chat-ai-sfondo);
}

.chat-ai__tag {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  color: var(--chat-ai-accento);
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.chat-ai__tagIcona::before {
  content: "\2726";
  font-size: 11px;
  line-height: 13px;
}

.chat-ai__testo {
  margin: 0;
  color: var(--chat-ai-testo);
  font-size: 15px;
  line-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-ai__bolla--utente .chat-ai__testo {
  color: var(--testo);
}

.chat-ai__digitando {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 8px;
  color: var(--testo-attenuato);
  font-size: 13px;
  line-height: 18px;
}

.chat-ai__digitando[hidden] {
  display: none;
}

.chat-ai__punti {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chat-ai__punti span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--chat-ai-accento);
  animation: chat-ai-punto 1s ease-in-out infinite;
}

.chat-ai__punti span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-ai__punti span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-ai-punto {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.chat-ai__errore {
  margin: 0;
  padding: 0 16px 8px;
  color: var(--testo-errore);
  font-size: 13px;
  line-height: 18px;
}

.chat-ai__errore[hidden] {
  display: none;
}

.chat-ai__riprova {
  appearance: none;
  align-self: flex-start;
  margin: 0 16px 8px;
  padding: 8px 16px;
  border: var(--bordo-sottile) solid var(--chat-ai-bordo);
  border-radius: var(--raggio-pillola);
  background: var(--chat-ai-pulsante);
  color: var(--chat-ai-accento);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  cursor: pointer;
}

.chat-ai__riprova[hidden] {
  display: none;
}

.chat-ai__azioni {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
}

.chat-ai__azione {
  appearance: none;
  width: 100%;
  padding: 13px 16px;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 16px;
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.chat-ai__azione:active {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .chat__mediaSpinner,
  .chat__vocaleBarra,
  .chat__vocaleMic--stop,
  .chat-ai__punti span {
    animation: none;
  }
}

/* --- Composer delle superfici sociali (valori INVARIATI) ------------------ */
.social__composer {
  display: grid;
  gap: var(--spazio-2);
  margin-top: var(--spazio-3);
}

.social__campo {
  width: 100%;
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: var(--raggio-card);
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  resize: vertical;
}

/* =============================================================================
   SUPERFICI SOCIALI (Fase 4): bottiglie, Segnale di Fumo, richieste
   ============================================================================= */

.social__voce,
.social__riga {
  display: grid;
  gap: var(--spazio-2);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-radius: var(--raggio-card);
  background: var(--input-bg);
}

/* La card della bacheca e' "fluttuante" come `bottiglia-card.tsx`: superficie
   CARD_BACKGROUND, ombra leggera e piu' respiro fra le parti. */
.social__voce {
  padding: var(--spazio-4);
  gap: var(--spazio-3);
  background: var(--card-bg);
  box-shadow: 0 6px 12px var(--card-ombra);
}

.social__testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  min-width: 0;
}

.social__meta {
  flex-basis: 100%;
  color: var(--testo-attenuato);
  font-size: var(--dimensione-piccola);
}

.social__testo {
  margin: 0;
  color: var(--testo);
  overflow-wrap: anywhere;
}

.social__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* Un composer dentro una voce (risposta a una bottiglia, Rompighiaccio). */
.social__composer {
  margin-top: var(--spazio-1);
}

.social__sottotitolo {
  margin: var(--spazio-2) 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--testo-secondario);
}

/* La tendina della durata del segnale: stessa superficie dei campi. */
.casella select {
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: var(--raggio-pillola);
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
}

/* =============================================================================
   RADAR CONNECT - DESIGN SYSTEM (guscio v85, D38)
   -----------------------------------------------------------------------------
   Le classi CONDIVISE del design "Radar Connect" (Google Stitch): superfici in
   vetro, pillole di telemetria e le animazioni della Dashboard. Vivono qui, in
   un punto solo, perche' le usano la Home, le sue card e (in futuro) qualsiasi
   altra superficie che adotti lo stesso linguaggio.

   ATTENZIONE ALLA PALETTE (V7): qui NON si scrive un colore. Ogni tinta e'
   un token `--rc-*` di `tokens.css`; la guardia
   `checks/test-apple-dashboard.mjs` (sezione H) rifiuta gli esadecimali in
   tutto il foglio.

   `backdrop-filter` ha SEMPRE anche la forma `-webkit-`: la PWA gira su WebKit
   (iOS) e senza il prefisso il vetro diventerebbe un rettangolo piatto.
   ============================================================================= */

/* --- Superfici in vetro --------------------------------------------------- */
.glass-card {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 18px 38px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  padding: 3px var(--spazio-2);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-testo-tenue);
  white-space: nowrap;
}

/* Varianti di colore delle pillole: la tinta la dichiara il chiamante con una
   classe, mai con uno stile in linea. */
.glass-pill--ciano {
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
}

.glass-pill--rosa {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
}

.glass-pill--viola {
  border-color: var(--rc-badge-info-bordo);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
}

/* --- Telemetria (distanze, versioni, ping) -------------------------------- */
/* Le cifre in mono e con cifre TABULARI: un contatore che cambia non deve far
   ballare la riga. Mini-maiuscolo spaziato, come i tag del design. */
.mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* --- Animazioni ----------------------------------------------------------- */
/* Alone che respira (pulseGlow del design): lo usa il radar acceso. */
@keyframes rc-pulse-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Rotazione dello sweep della Dashboard: un giro in 3,8 s (piu' lento del
   radar a schermo intero, che resta `radar-giro` a 2,6 s: in Home e' un
   elemento d'atmosfera, non uno strumento). */
@keyframes rc-sweep {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home__card[data-attivo='si'] .home__alone,
  .radar-scope--home .radar-scope__sweep {
    animation: none;
  }
}

/* =============================================================================
   HOME / DASHBOARD (Passo 3 della parita' APK, guscio v13)
   Fonte dei valori: src/app/(app)/(tabs)/index.tsx (header, card protagonista,
   griglia), src/components/radar-hero-card.tsx (padding/gap della card e
   riquadro di stato), src/components/radar-scope.tsx (anelli, assi, sweep,
   centro), src/components/radar-avatar.tsx (avatar a due anelli).
   Palette: SOLO token di tokens.css. Misure: commentate col nome del blocco APK.
   ============================================================================= */

/* Il pannello Home usa i padding della Dashboard: 24 in alto/ai lati
   (`content.paddingHorizontal/paddingTop = Spacing.four`), gap 16 tra i blocchi
   (`content.gap = Spacing.three`) e 64 di respiro in fondo (`Spacing.six`),
   sommati allo spazio della barra fissa e della safe area. Scorre SOLO questo
   pannello (`.vista` ha gia' `overflow-y: auto`): il body non si muove.
   Selettore per `data-pannello`: il pannello resta un `.vista` come gli altri
   (le guardie del guscio contano i pannelli da li'). */
.vista[data-pannello='home'] {
  /* Guscio v61: `--safe-top` in alto (la testata fissa non c'e' piu'). */
  padding: calc(var(--spazio-5) + var(--safe-top)) var(--spazio-5)
    calc(var(--barra-ingombro) + var(--spazio-6) * 2);
  gap: var(--spazio-4);
  /* RADAR CONNECT (v85/D38): fondo notte con due aloni (viola in alto a
     sinistra, ciano in basso a destra). Il gradiente scorre col pannello: e'
     un'atmosfera della Dashboard, non un'immagine fissa. Nessun colore qui:
     solo token `--rc-*`. */
  background-color: var(--rc-sfondo);
  background-image: radial-gradient(circle at 12% 0%, var(--rc-alone-viola), transparent 55%),
    radial-gradient(circle at 88% 94%, var(--rc-alone-ciano), transparent 52%),
    linear-gradient(to bottom, var(--rc-sfondo), var(--rc-sfondo-alto));
}

/* --- Testata: avatar (60) + saluto + sottotitolo + wordmark (88) ----------- */
.home__testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-4);
}

.home__testi {
  flex: 1 1 auto;
  /* Il nome lungo deve poter RESTRINGERE il blocco: senza `min-width: 0` spinge
     fuori il logo o finisce sotto di esso (stessa regola di `headerText`). */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

/* RadarAvatar 60px: anello esterno 60, anello interno 44 (44/60), core 30
   (30/60). I bordi sono 1.5px (anelli) e 1px (core). */
.home__avatar {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home__avatar-anello {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
}

.home__avatar-anello--esterno {
  width: 60px;
  height: 60px;
  border-color: var(--avatar-anello-esterno);
}

.home__avatar-anello--interno {
  width: 44px;
  height: 44px;
  border-color: var(--avatar-anello-interno);
}

/* Iniziale: 15px (size * 0.25), peso 900, viola chiaro sul core scuro. */
.home__avatar-core {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--avatar-sfondo);
  border: 1px solid var(--avatar-core-bordo);
  color: var(--marker-iniziale);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Saluto: 22/28 Sora SemiBold in `TEXT_SECONDARY`, nome in `TEXT_PRIMARY`
   (Sora Bold). Una sola riga con l'ellissi come ULTIMA difesa: i nomi lunghi
   restano interi finche' c'e' spazio (nessun rimpicciolimento forzato qui). */
.home__saluto {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--testo-secondario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home__nome {
  color: var(--testo);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.home__sottotitolo {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--testo-secondario);
}

/* Wordmark dell'app (1107x430): 88px di larghezza, proporzioni intatte. */
.home__logo {
  flex: none;
  width: 88px;
  height: auto;
  opacity: 0.85;
}

/* Eyebrow di rete (RADAR CONNECT): il marchio della rete di prossimita' sopra
   il saluto, in mono spaziato. Non e' un'etichetta di sezione e non sostituisce
   il wordmark: e' il "PROXIMITY NETWORK" della testata del design. */
.home__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-ciano);
}

/* Azioni rapide della testata: due pillole di vetro a larghezza uguale, icona +
   tag in mono. Destinazioni che esistono gia' (Radar, Notifiche): nessuna
   azione nuova, nessuna richiesta di rete. */
.home__azioni {
  display: flex;
  gap: var(--spazio-2);
}

.home__azione {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-1);
  height: 34px;
  padding: 0 var(--spazio-3);
  color: var(--rc-viola-chiaro);
  font: inherit;
  cursor: pointer;
}

.home__azione:active {
  background: var(--rc-vetro-bordo);
}

.home__azione .home__icona {
  flex: none;
  width: 16px;
  height: 16px;
}

.home__azione .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etichetta di sezione in SENTENCE CASE ("Le tue sezioni"), Sora SemiBold. */
.home__sezioni {
  margin: var(--spazio-1) 0 0;
  font-family: var(--font-titoli);
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--testo-attenuato);
}

/* Variante COMPATTA dell'header sotto 400px (`HeaderCompact`): gap 8, logo 72,
   saluto 19/24. Sotto 350px (`HEADER_LOGO_MIN_WIDTH`) il logo non si mostra. */
@media (max-width: 399px) {
  .home__testata {
    gap: var(--spazio-2);
  }

  .home__logo {
    width: 72px;
  }

  .home__saluto {
    font-size: 19px;
    line-height: 24px;
  }
}

@media (max-width: 349px) {
  .home__logo {
    display: none;
  }
}


/* --- Card protagonista: pannello di vetro del Radar (RADAR CONNECT) -------- */
/* E' un CONTENITORE, non piu' un `<button>`: dentro ci sono due comandi veri
   (l'interruttore di visibilita' e la pillola del raggio) e un bottone dentro
   un bottone non e' valido. Il tocco che apre il Radar sta nella testata
   (`.home__card-apri`); `data-attivo` continua a dire lo stato (lo scrive
   `disegnaHome()`). */
.home__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spazio-2);
  padding: var(--spazio-4);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 18px 38px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
  color: inherit;
  text-align: left;
}

/* Radar VISIBILE: bordo viola acceso (e' l'unico segnale di stato della card). */
.home__card[data-attivo='si'] {
  border-color: var(--rc-vetro-bordo-acceso);
}

/* Alone che respira dietro lo scope: compare SOLO a radar acceso. E' un
   elemento decorativo (`aria-hidden`), non intercetta i tocchi e non sposta
   nulla (posizione assoluta). */
.home__alone {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rc-alone-ciano), transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.home__card[data-attivo='si'] .home__alone {
  opacity: 1;
  animation: rc-pulse-glow 3.4s ease-in-out infinite;
}

/* Intestazione: icona, testi, pulsante "apri". Sta SOPRA il disegno
   (`z-index: 2`) ma non ci risale piu' dentro: nello scope ingrandito il
   margine negativo taglierebbe il primo anello. */
.home__card-testata {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
}

/* "Apri" il Radar: pillola di vetro con il tag in mono e la freccia. */
.home__card-apri {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  padding: 4px var(--spazio-2);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-ciano);
  font: inherit;
  cursor: pointer;
}

.home__card-apri:active {
  background: var(--rc-vetro-bordo);
}

.home__card-apri .home__freccia {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* --- Scope INGRANDITO della Dashboard (200px) ------------------------------ */
/* Il design vuole il widget radar protagonista: qui lo scope cresce a 200px
   (la schermata Radar tiene i suoi 180/132, invariati). Gli anelli restano in
   proporzione al raggio (0.45 / 0.72 / 1) e lo sweep fa un giro in 3,8 s. */
.radar-scope--home {
  width: 200px;
  height: 200px;
  margin: var(--spazio-2) auto 0;
}

.radar-scope--home .radar-scope__anello--interno {
  width: 90px;
  height: 90px;
  border-color: var(--rc-anello-uno);
}

.radar-scope--home .radar-scope__anello--medio {
  width: 144px;
  height: 144px;
  border-color: var(--rc-anello-due);
}

.radar-scope--home .radar-scope__anello--esterno {
  width: 200px;
  height: 200px;
  border-color: var(--rc-anello-tre);
}

.radar-scope--home .radar-scope__asse {
  background: var(--rc-griglia);
}

.radar-scope--home .radar-scope__sweep {
  top: 2px;
  left: 2px;
  width: 196px;
  height: 196px;
  background: conic-gradient(
    from 0deg,
    var(--rc-sweep-punta) 0deg,
    var(--rc-sweep-coda) 60deg,
    transparent 60deg 360deg
  );
  animation: rc-sweep 3.8s linear infinite;
}

/* --- Pin a goccia dei profili VICINI (Radar Connect) ----------------------- */
/* Il radar della Home non ha piu' pallini disegnati a mano: `disegnaRadarHome()`
   (js/app.js) mette qui un pin per ogni profilo REALE che la lista del Radar ha
   entro i 3 km. Forma a goccia: testa tonda (foto ritagliata, o iniziale in mono
   quando la foto non c'e' o non e' visibile) e coda appuntita sul punto. La
   tinta la decide la prossimita' (`tonoProssimita` di radar-controlli.js):
   ciano entro 1 km, rosa entro 2, viola oltre. Nessun colore scritto qui: solo
   token --rc-*. */
.home__pin {
  position: absolute;
  left: var(--marker-x, 50%);
  top: var(--marker-y, 50%);
  width: 28px;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 8px var(--rc-ombra));
  animation: rc-pin-in 320ms ease-out both;
}

.home__pin--vicino {
  --pin-tinta: var(--rc-ciano);
  --pin-alone: var(--rc-alone-ciano);
}

.home__pin--medio {
  --pin-tinta: var(--rc-rosa);
  --pin-alone: var(--rc-alone-rosa);
}

.home__pin--lontano {
  --pin-tinta: var(--rc-viola);
  --pin-alone: var(--rc-alone-viola);
}

.home__pin-testa {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid var(--pin-tinta, var(--rc-ciano));
  border-radius: 50%;
  background: var(--rc-vetro-sfondo);
  box-shadow: 0 0 0 3px var(--pin-alone, var(--rc-alone-ciano));
}

.home__pin-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home__pin-iniziale {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pin-tinta, var(--rc-ciano));
}

.home__pin-coda {
  width: 9px;
  height: 9px;
  margin: -5px 0 2px;
  border-radius: 2px;
  background: var(--pin-tinta, var(--rc-ciano));
  transform: rotate(45deg);
}

@keyframes rc-pin-in {
  from {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home__pin {
    animation: none;
  }
}
/* --- Profili vicini: il numero REALE sotto il radar ----------------------- */
/* `data-stato` dice in che caso siamo: `attesa` (il Radar non ha ancora letto),
   `nessuno` (letto, zero profili) o `vicini` (n profili). Il numero compare solo
   nell'ultimo caso: il testo lo compone `disegnaRadarHome()` con le chiavi
   `dashboard.vicini.*` (mai una frase scritta nel JS). */
.home__vicini {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spazio-1);
  margin: var(--spazio-2) 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--rc-testo-tenue);
  text-align: center;
}

.home__vicini-numero {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--rc-ciano);
}

.home__vicini[data-stato='vicini'] .home__vicini-testo {
  color: var(--testo-secondario);
}



/* --- Interruttore di visibilita' + raggio (RADAR CONNECT) ------------------ */
/* L'interruttore e' un `role="switch"`: `aria-checked` lo scrive `disegnaHome()`
   leggendo lo stato REALE del Radar (mai un interruttore decorativo). */
.home__visibilita {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-1);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
}

.home__interruttore {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home__binario {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  border: var(--bordo-sottile) solid var(--rc-interruttore-spento);
  background: var(--rc-vetro-sfondo);
  transition:
    background var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

.home__pomello {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rc-pomello);
  transition: transform var(--durata-veloce) ease;
}

.home__interruttore[aria-checked='true'] .home__binario {
  border-color: var(--rc-interruttore-acceso);
  background: var(--rc-interruttore-acceso);
}

.home__interruttore[aria-checked='true'] .home__pomello {
  transform: translateX(18px);
}

.home__visibilita-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.home__visibilita-titolo {
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home__visibilita-nota {
  font-size: 11px;
  line-height: 15px;
  color: var(--rc-testo-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pillola del raggio: mostra il raggio del SERVER (`RADIUS_KM` di radar.asp) e
   apre il Radar, dove si configurano badge e durata. Non e' una preferenza
   locale: il raggio non si cambia da qui (nessuna API inventata). */
.home__raggio {
  appearance: none;
  flex: none;
  padding: 4px var(--spazio-2);
  color: var(--rc-ciano);
  font: inherit;
  cursor: pointer;
}

.home__raggio:active {
  background: var(--rc-vetro-bordo);
}


.home__icona-tonda {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icona-tonda-sfondo);
  color: var(--icona-chiara);
}

.home__icona {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home__card-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home__card-titolo {
  font-family: var(--font-titoli);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--testo);
}

.home__card-sottotitolo {
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-secondario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home__freccia {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accento-ciano);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home__freccia--piccola {
  width: 16px;
  height: 16px;
  stroke: var(--icona-spenta);
}

/* --- Scope del radar (RadarScope 180px) ----------------------------------- */
/* 180x180 con margine superiore di 24px (`SCOPE_TOP_GAP`): insieme al margine
   negativo dell'header (-32) e al gap 8 della card, l'anello esterno tocca il
   bordo inferiore dell'intestazione senza sfiorarla. */
.radar-scope {
  position: relative;
  align-self: center;
  width: 180px;
  height: 180px;
  margin: var(--spazio-5) auto 0;
}

.radar-scope__anello {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid;
}

/* Raggi 0.45 / 0.72 / 1 del raggio (RING_RATIOS). */
.radar-scope__anello--interno {
  width: 81px;
  height: 81px;
  border-color: var(--radar-anello-interno);
}

.radar-scope__anello--medio {
  width: 129.6px;
  height: 129.6px;
  border-color: var(--radar-anello-medio);
}

.radar-scope__anello--esterno {
  width: 180px;
  height: 180px;
  border-color: var(--radar-anello-esterno);
}

/* Assi (croce) interni: appena percettibili. */
.radar-scope__asse {
  position: absolute;
  background: var(--radar-asse);
}

.radar-scope__asse--verticale {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.radar-scope__asse--orizzontale {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
/* Sweep: un giro in 2,6 s (`SWEEP_DURATION_MS`), ritagliato 2px dentro l'anello
   esterno (`SWEEP_CLIP_INSET`). A radar SPENTO non si vede (`quiet`). */
.radar-scope__sweep {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--radar-sweep-punta) 0deg,
    var(--radar-sweep-coda) 55deg,
    transparent 55deg 360deg
  );
  animation: radar-giro 2.6s linear infinite;
  opacity: 0;
}

.radar-scope[data-attivo='si'] .radar-scope__sweep {
  opacity: 1;
}

@keyframes radar-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-scope__sweep {
    animation: none;
  }
}

/* Pallini decorativi (DEFAULT_SCOPE_DOTS): alone 16px, nucleo 8px. Le percentuali
   sono le coordinate polari dell'APK (orbit = raggio * 0.82). */
.radar-scope__pallino {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--icona-tonda-sfondo);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
}

.radar-scope[data-attivo='si'] .radar-scope__pallino {
  opacity: 1;
}

.radar-scope__pallino::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.radar-scope__pallino--1 {
  left: 55.13%;
  top: 37.04%;
}

.radar-scope__pallino--1::after {
  background: var(--accento-ciano);
}

.radar-scope__pallino--2 {
  left: 72.09%;
  top: 58.79%;
}

.radar-scope__pallino--2::after {
  background: var(--accento-viola);
}

.radar-scope__pallino--3 {
  left: 28.07%;
  top: 73.27%;
}

.radar-scope__pallino--3::after {
  background: var(--accento-ciano);
}

.radar-scope__pallino--4 {
  left: 34.05%;
  top: 39.93%;
}

.radar-scope__pallino--4::after {
  background: var(--accento-magenta);
}

/* --- Marker REALI dello scope (marker 32 px di radar-scope.tsx) ----------- */
/* Con profili nel raggio i pallini decorativi spariscono: gli avatar sono la
   verita' (max 12). La posizione arriva da js/radar-controlli.js in percentuale
   (`--marker-x`/`--marker-y`), nessun colore nel JS. */
.radar-scope[data-marker='reali'] .radar-scope__pallino {
  display: none;
}

.radar-scope__marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.radar-scope__marker {
  position: absolute;
  left: var(--marker-x, 50%);
  top: var(--marker-y, 50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--avatar-anello-esterno);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* E' un BOTTONE: apre la Mappa Globale su quella persona (il layer sotto ha
     `pointer-events: none`, il marker li riaccende per se'). */
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.radar-scope__marker-core {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 1px solid var(--avatar-core-bordo);
  background: var(--avatar-sfondo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.radar-scope__marker-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radar-scope__marker-iniziale {
  color: var(--marker-iniziale);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Centro: badge 40px (22% dello scope) con l'iniziale su core 31px. */
.radar-scope__centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--radar-centro-sfondo);
  border: 1px solid var(--radar-centro-bordo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-scope__core {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--avatar-sfondo);
  border: 1px solid var(--avatar-core-bordo);
  color: var(--marker-iniziale);
  font-size: 14px;
  line-height: 31px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-align: center;
}

/* --- Griglia 2x2 delle funzionalita' (RADAR CONNECT) ---------------------- */
/* Due colonne ESATTE (`minmax(0, 1fr)`): la card non puo' sfondare la traccia
   nemmeno con un titolo lungo. Il gap e' 12 (il design vuole le card piu'
   vicine fra loro di quanto non fossero prima). */
.home__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spazio-3);
}

/* Card 100% della traccia, altezza minima 132: icona + badge in alto, titolo e
   stato in basso. Superficie in vetro come la card del Radar. */
.home__tile {
  appearance: none;
  width: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spazio-1);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 12px 26px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home__tile:active {
  opacity: 0.9;
  transform: scale(0.99);
}

.home__tile-testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  width: 100%;
  margin-bottom: 6px;
}

/* Badge di stato della card (MAX, NEW, 24/7, PUSH): pillola in mono allineata a
   destra della testata. Il colore lo da' la variante `.glass-pill--*`. */
.home__tile-badge {
  margin-left: auto;
  padding: 2px var(--spazio-2);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.home__icona-tonda--tile {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tinta-viola-bordo);
  background: var(--tinta-viola-sfondo);
}

.home__icona-tonda--tile .home__icona {
  width: 17px;
  height: 17px;
}

/* Toni della griglia (`ICON_TILE_TONES`): ciano, viola, rosa. */
.home__tinta--ciano {
  border-color: var(--tinta-ciano-bordo);
  background: var(--tinta-ciano-sfondo);
  color: var(--accento-ciano);
}

.home__tinta--viola {
  border-color: var(--tinta-viola-bordo);
  background: var(--tinta-viola-sfondo);
  color: var(--icona-chiara);
}

.home__tinta--rosa {
  border-color: var(--tinta-rosa-bordo);
  background: var(--tinta-rosa-sfondo);
  color: var(--stato-attivo);
}

.home__tile-titolo {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-titoli);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--testo);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home__tile-stato {
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  color: var(--testo-secondario);
}


/* =============================================================================
   SEGNALI e PROFILO (Passo 6 della parita' APK, guscio v16)
   Fonte dei valori: src/app/(app)/(tabs)/segnale-fumo.tsx (header, controlsCard,
   listHeader, DisponibileRow), src/components/bottiglia-card.tsx, src/app/
   (app)/(tabs)/profile.tsx (header, card, chip, saveButton, signOutLink) e
   src/components/radar-avatar.tsx (avatar ad anelli).
   Palette: SOLO token di tokens.css. Misure: commentate col nome del blocco APK.
   ============================================================================= */

/* I due pannelli usano i padding delle schermate native. Segnali
   (`segnale-fumo.tsx` -> `container`): 16 in alto, 24 ai lati
   (`Spacing.three` / `Spacing.four`); Profilo (`profile.tsx` -> `content`):
   24 in alto e ai lati. Il fondo somma barra fissa, safe area e respiro.
   Scorre SOLO il pannello (`.vista` ha gia' `overflow-y: auto`). */
.vista[data-pannello='social'] {
  /* Guscio v61: `--safe-top` in alto (la testata fissa non c'e' piu'). */
  padding: calc(var(--spazio-4) + var(--safe-top)) var(--spazio-5)
    calc(var(--barra-ingombro) + var(--spazio-6) * 2);
  gap: var(--spazio-4);
}

/* Profilo v25: le misure sono quelle di `profile.tsx` (padding 16, gap 12,
   card 12). La barra resta fuori: il padding inferiore somma la sua altezza. */
.vista[data-pannello='profilo'] {
  /* Guscio v61: `--safe-top` in alto (la testata fissa non c'e' piu'). */
  padding: calc(var(--spazio-4) + var(--safe-top)) var(--spazio-4)
    calc(var(--barra-ingombro) + var(--spazio-6));
  gap: var(--spazio-3);
  /* Guscio v99 («Radar Connect»): il pannello ha un fondo NOTTE suo, come la
     Home e la Chat. Non e' decorazione: le schede sono di vetro traslucido
     (`--rc-vetro-sfondo`), e senza qualcosa sotto il vetro si legge sul fondo
     chiaro della pagina e i testi chiari spariscono. Due aloni (viola in alto a
     sinistra, ciano in alto a destra) e una discesa verso il fondo base: tutte
     tinte di token, nessun esadecimale. */
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% -6%, var(--rc-alone-viola), transparent 58%),
    radial-gradient(circle at 92% 2%, var(--rc-alone-ciano), transparent 52%),
    linear-gradient(180deg, var(--rc-sfondo-alto), var(--rc-sfondo) 46%);
}

/* --- Avatar ad anelli (radar-avatar.tsx) ----------------------------------
   Anello esterno = 100% della taglia, interno = 73.333% (44/60), core = 50%
   (30/60). I colori sono i tre token del componente, il core e' scuro con
   l'iniziale viola chiaro (`INITIAL_COLOR`). */
.avatar-radar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
}

.avatar-radar--48 {
  width: 48px;
  height: 48px;
}

.avatar-radar--52 {
  width: 52px;
  height: 52px;
}

.avatar-radar--64 {
  width: 64px;
  height: 64px;
}

.avatar-radar__anello {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
}

.avatar-radar__anello--esterno {
  inset: 0;
  border-color: var(--avatar-anello-esterno);
}

.avatar-radar__anello--interno {
  width: 73.333%;
  height: 73.333%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: var(--avatar-anello-interno);
}

.avatar-radar__core,
.avatar-radar__foto {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 1px solid var(--avatar-core-bordo);
  object-fit: cover;
  background: var(--avatar-sfondo);
}

.avatar-radar__core {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marker-iniziale);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.avatar-radar--52 .avatar-radar__core {
  font-size: 13px;
}

.avatar-radar--64 .avatar-radar__core {
  font-size: 16px;
}

/* --- Testata Segnali (header di segnale-fumo.tsx) ------------------------ */
.social__testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-4);
}

.social__testata-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social__testata-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 20px;
  line-height: 26px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--testo);
}

.social__testata-sotto {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

/* Riquadro icona 44 con raggio 14 (`headerIcon`). */
.social__testata-icona {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 26px;
  background: var(--icona-tonda-sfondo);
  border: var(--bordo-sottile) solid var(--tinta-viola-bordo);
}

/* --- Testata delle card (titolo + riquadro icona) ------------------------ */
.social__intestazione-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.social__icona-tonda {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--bordo-sottile) solid var(--tinta-viola-bordo);
  background: var(--tinta-viola-sfondo);
}

.social__icona-tonda--ciano {
  border-color: var(--tinta-ciano-bordo);
  background: var(--tinta-ciano-sfondo);
}

.social__icona-tonda--rosa {
  border-color: var(--tinta-rosa-bordo);
  background: var(--tinta-rosa-sfondo);
}

.social__icona {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--icona-chiara);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.social__icona-tonda--ciano .social__icona {
  stroke: var(--accento-ciano);
}

.social__icona-tonda--rosa .social__icona {
  stroke: var(--stato-attivo);
}

/* --- Stato e controlli del Segnale di Fumo (controlsCard) ---------------- */
.social__stato {
  margin: 0;
  align-self: flex-start;
  padding: 3px var(--spazio-3);
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--stato-riga-bordo);
  background: var(--stato-riga-sfondo);
  color: var(--testo-secondario);
  font-size: var(--dimensione-micro);
  line-height: 18px;
  font-weight: var(--peso-forte);
}

.social__controlli {
  display: grid;
  gap: var(--spazio-3);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 16px;
  background: var(--input-bg);
}

.social__casella {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

/* Riga interruttore del fumo: etichetta + nota a sinistra, comando a destra
   (`controlsTitle`/`controlsHint` e il pulsante dell'APK). */
.social__interruttore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.social__interruttore-testi {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* `sectionLabel` dell'APK: 12/16, 800, maiuscolo, spaziatura 1. */
.social__sezione-etichetta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--testo-secondario);
}

/* Nota sotto un comando (timer, stato degli interruttori). */
.social__nota {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 18px;
  color: var(--testo-attenuato);
}

.social__divisorio {
  height: 0;
  border-top: var(--bordo-sottile) solid var(--input-border);
}

/* Chip di scelta (tag e durata): lo stato ACCESSO viaggia su `aria-pressed`,
   cosi' lo legge anche il lettore di schermo. */
.social__chip[aria-pressed='true'] {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.social__chip-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* Comandi a pillola (`outlineButton`/`primaryButton` dell'APK). */
.social__chip,
.social__aggiorna {
  padding: 7px var(--spazio-3);
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.social__chip--primario {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.social__chip--tenue {
  background: transparent;
}

.social__aggiorna {
  padding: 6px var(--spazio-3);
  border-color: var(--radar-aggiorna-bordo);
  background: var(--radar-aggiorna-sfondo);
  color: var(--testo);
}

/* =============================================================================
   SOTTO-SCHEDE DI SEGNALI (guscio v30)
   Fumo / Bottiglie / Richieste sono TRE schermate, non tre blocchi impilati:
   la barra a pillole sceglie quella a schermo e il pannello nasconde la card.
   ============================================================================= */
.social__schede {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--spazio-1);
  padding: var(--spazio-1);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: var(--raggio-pillola);
  background: var(--input-bg);
}

.social__scheda {
  min-width: 0;
  padding: 8px var(--spazio-3);
  border: 0;
  border-radius: var(--raggio-pillola);
  background: transparent;
  color: var(--testo-secondario);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* La pillola scelta: fondo del chip selezionato + testo pieno. Lo stato vive
   su `aria-selected` (lo scrive `mostraSchedaSociale`), non su una classe. */
.social__scheda[aria-selected='true'] {
  background: var(--chip-selected-bg);
  box-shadow: inset 0 0 0 var(--bordo-sottile) var(--chip-selected-border);
  color: var(--testo);
}

/* Il pannello e' un figlio della `.vista` (griglia con gap): mantiene lo
   stesso ritmo fra le card della sotto-scheda. */
.social__pannello {
  display: grid;
  gap: var(--spazio-4);
  min-width: 0;
}

/* --- INTERRUTTORI del fumo: binario + pallino ---------------------------------
   Un vero switch, non un chip: lo stato si vede a colpo d'occhio e il tocco
   risponde subito (`aria-checked`/`social__switch--acceso`). */
.social__switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  flex: none;
  min-height: 34px;
  padding: 4px 4px 4px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.social__switch-binario {
  position: relative;
  display: inline-block;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--raggio-pillola);
  background: var(--input-border);
  transition: background var(--durata-veloce) ease;
}

.social__switch-pallino {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--testo);
  transition: transform var(--durata-veloce) ease;
}

.social__switch--acceso {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.social__switch--acceso .social__switch-binario {
  background: var(--accento-viola);
}

.social__switch--acceso .social__switch-pallino {
  transform: translateX(18px);
}

/* Il conto alla rovescia cambia una cifra per volta: cifre a larghezza fissa,
   cosi' il testo non "balla" a ogni minuto. */
#fumo-timer {
  font-variant-numeric: tabular-nums;
}

/* --- TENDINA DELLA DURATA ---------------------------------------------------
   Il select eredita la superficie del campo (`.casella select`), ma la LISTA
   aperta no: senza queste due righe le <option> uscivano con testo bianco su
   fondo chiaro di sistema. `color-scheme: dark` allinea anche la lista nativa
   (iOS/Android) alla palette scura. */
#fumo-durata {
  color-scheme: dark;
  min-width: 108px;
  font-weight: var(--peso-forte);
}

#fumo-durata option,
#fumo-durata optgroup {
  background-color: var(--input-opzione-bg);
  color: var(--testo);
}

/* --- MAPPA DEL SEGNALE ------------------------------------------------------
   Riquadro e iframe sono quelli del Radar (`.radar__mappa`/`.radar__tela`,
   scritta da `js/map-bridge.js`); qui solo la riga con il comando e la legenda. */
.social__mappa-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  flex-wrap: wrap;
}

.social__mappa-pulsante {
  padding: 6px var(--spazio-3);
}

.social__legenda {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  flex-wrap: wrap;
  font-size: 11px;
  line-height: 15px;
  color: var(--testo-attenuato);
}

.social__legenda-voce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.social__legenda-punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.social__legenda-punto--io {
  background: var(--marker-io);
}

.social__legenda-punto--disponibili {
  background: var(--marker-iniziale);
}

.social__legenda-punto--presenze {
  background: var(--marker-presenza);
}

.social__mappa {
  margin-top: var(--spazio-2);
  min-height: 200px;
}

/* Il listHeader dell'APK ha 8px sopra e sotto; la bacheca usa lo stesso ritmo
   di 8px fra le card (`listContent.gap`). */
.social__intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  margin: var(--spazio-2) 0;
}

/* `sectionLabel` di bottiglie.tsx (`sezioneTitolo`): 12/16, 800, maiuscolo,
   spaziatura 1. Il titolo dell'elenco del fumo invece e' `listTitle`
   (15/20 800, sentence case) e usa la variante `--lista`. */
.social__intestazione-titolo {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--testo-secondario);
}

.social__intestazione-titolo--lista {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--testo);
}

/* --- Riga/card di una persona o di una bottiglia ------------------------- */
.social__nome-riga {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-1);
  min-width: 0;
}

.social__pillole {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-1);
}

/* Pillola della card (`pill` di bottiglia-card.tsx): ciano su INPUT_BG. */
.social__pillola {
  border: 0;
  background: var(--input-bg);
  color: var(--accento-ciano);
  font-size: 11px;
  line-height: 15px;
  font-weight: var(--peso-forte);
  padding: 2px var(--spazio-2);
}

/* Badge di intenzione (`rowBadge`) e badge Staff (`staff-badge.tsx`). */
.social__pillola--badge {
  background: var(--chip-selected-bg);
  border: var(--bordo-sottile) solid var(--chip-selected-border);
  color: var(--testo);
}

.social__pillola--staff {
  background: transparent;
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  color: var(--accento-viola);
}

.social__zona {
  font-size: 11px;
  line-height: 15px;
  color: var(--testo-attenuato);
}

/* Riga di un DISPONIBILE (`DisponibileRow` di segnale-fumo.tsx): NON e' una
   card della bacheca. Padding 8 in verticale e 16 in orizzontale, gap 16,
   raggio 16, bordo del tema e NESSUNA ombra: la riga resta leggera e lascia
   al testo tutto lo spazio. */
.social__voce--persona {
  gap: var(--spazio-4);
  padding: var(--spazio-2) var(--spazio-3);
  border-color: var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: none;
}

.social__voce--persona .social__testa {
  gap: var(--spazio-4);
}

.social__voce--bottiglia {
  /* `bottiglia-card.tsx` -> card.gap = Spacing.two (8). */
  gap: var(--spazio-2);
}

/* Il testo della bottiglia in un riquadro (`testo` della card). */
.social__voce--bottiglia .social__testo {
  padding: var(--spazio-2);
  border-radius: 12px;
  background: var(--input-bg);
  font-size: 15px;
  line-height: 22px;
}

/* Targhetta del badge di intenzione (`badge` della card). */
.social__badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: 11px;
  line-height: 15px;
  font-weight: var(--peso-forte);
}


/* --- Richieste di contatto (`icebreaker-requests-sheet.tsx`) --------------
   La voce del foglio "RICHIESTE": riga con avatar + nome + sottotitolo,
   messaggio inline con l'etichetta che dice QUALE testo si legge, chip delle
   azioni consentite al ruolo (colori semantici di `INBOX_CHIP_THEME`). */
.social__voce--richiesta {
  gap: var(--spazio-2);
}

.social__sottotitolo-riga {
  color: var(--testo-secondario);
  font-size: 12px;
  line-height: 16px;
}

.social__messaggio {
  display: grid;
  gap: 2px;
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-left: 2px solid var(--accento-viola);
  border-radius: 10px;
  background: var(--input-bg);
}

.social__messaggio-etichetta {
  color: var(--testo-attenuato);
  font-size: 10px;
  line-height: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.social__messaggio-testo {
  margin: 0;
  color: var(--testo);
  font-size: 13px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.social__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-1);
}

.social__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 15px;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}

.social__chip--accept {
  background: var(--tinta-ciano-sfondo);
  border-color: var(--tinta-ciano-bordo);
  color: var(--accento-ciano);
}

.social__chip--reject {
  background: var(--profilo-pericolo-sfondo);
  border-color: var(--profilo-pericolo-bordo);
  color: var(--testo-errore);
}

.social__chip--clarify {
  background: var(--tinta-viola-sfondo);
  border-color: var(--tinta-viola-bordo);
  color: var(--testo);
}

/* --- Azioni rapide (cta / ghost / segnala di bottiglia-card.tsx) --------- */
.social__azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-1);
}

.social__cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px var(--spazio-3);
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--accento-viola);
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.social__cta:disabled {
  background: var(--chip-bg);
  color: var(--testo-attenuato);
  cursor: default;
}

.social__fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

/* Segnalazione a 1 tap: cerchio 40 con la tinta d'avviso del componente. */
.social__segnala {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--social-segnala-bordo);
  background: var(--social-segnala-sfondo);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

/* --- Composer della bacheca ---------------------------------------------- */
.social__composer--lancio {
  margin-top: 0;
}

.social__composer-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}

.social__contatore {
  font-size: var(--dimensione-micro);
  line-height: 16px;
  color: var(--testo-attenuato);
}

/* La quota e' una pillola ciano (`social.quota`), non un paragrafo. */
.social__quota {
  margin: 0;
  display: flex;
}

/* =============================================================================
   PROFILO (profile.tsx)
   ============================================================================= */

.profilo__testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  margin-bottom: var(--spazio-2);
}

.profilo__testata-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

.profilo__nome {
  font-family: var(--font-titoli);
  font-size: 22px;
  line-height: 28px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profilo__email {
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge di ruolo (`StaffBadge`): compare solo per lo staff. */
.profilo__badge {
  align-self: flex-start;
  padding: 2px var(--spazio-2);
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  color: var(--accento-viola);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--peso-forte);
}

.profilo__intro {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--testo-secondario);
}

/* La riga "Accesso effettuato come ..." resta un testo del guscio (tests). */
.profilo__riga {
  margin: 0;
  font-size: var(--dimensione-piccola);
  line-height: 20px;
  color: var(--testo-secondario);
  overflow-wrap: anywhere;
}


/* --- Dati dell'account (dl a righe) -------------------------------------- */
.profilo__dati {
  margin: 0;
  display: grid;
  gap: 0;
}

.profilo__dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding: 10px 0;
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
}

.profilo__dato:last-child {
  border-bottom: 0;
}

.profilo__dato dt {
  flex: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-attenuato);
}

.profilo__dato dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font-size: var(--dimensione-piccola);
  line-height: 20px;
  font-weight: var(--peso-medio);
  color: var(--testo);
  overflow-wrap: anywhere;
}

/* Badge VERSIONE del guscio (v70): pillola compatta nella card "Sei dentro",
   fra email e ruolo. Stesso raggio e stesso bordo del badge di ruolo
   (`profilo__badge`), colore attenuato perche' e' un dato informativo. Il
   selettore con `dd` vince su `.profilo__dato dd` (peso medio e 13px). */
.profilo__dato dd.profilo__versione {
  flex: none;
  padding: 2px var(--spazio-2);
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  color: var(--testo-attenuato);
  text-align: right;
}

/* --- Uscita (`signOutLink`): link centrato, sottolineato, attenuato ------
   Nel Profilo dell'APK l'uscita NON e' la CTA principale (quella e' "Salva
   profilo", che sul web non esiste perche' il profilo esteso si modifica
   dall'app): qui e' un link come nel componente nativo. */
.profilo__uscita {
  align-self: center;
  margin-top: var(--spazio-1);
  padding: var(--spazio-2) 0;
  border: 0;
  background: transparent;
  color: var(--testo-attenuato);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Voci delle impostazioni (righe toccabili del Profilo) --------------- */
.profilo__voci {
  display: grid;
  gap: 0;
}

.profilo__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  width: 100%;
  padding: var(--spazio-3) 0;
  border: 0;
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
  background: transparent;
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profilo__voce:last-child {
  border-bottom: 0;
}

.profilo__voce-testi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profilo__voce-titolo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  color: var(--testo);
}

.profilo__voce-sotto {
  font-size: var(--dimensione-micro);
  line-height: 17px;
  color: var(--testo-attenuato);
}

.profilo__freccia {
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--testo-attenuato);
}

/* --- Editor Profilo v25 ---------------------------------------------------
   Fonte: src/app/(app)/(tabs)/profile.tsx. Card 18/12, input 14/16, chip
   12/700, CTA "Salva profilo" 48 con il blu di marca, pericolo rosso del
   componente nativo. Tutti i colori sono token: qui non si scrive nessun
   esadecimale. */
.profilo__ricarica {
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: var(--raggio-pillola);
  background: var(--input-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.profilo__ricarica:active {
  background: var(--chip-bg);
}

.profilo__card {
  display: grid;
  gap: var(--spazio-2);
  padding: var(--spazio-3);
}

.profilo__form {
  display: grid;
  gap: var(--spazio-3);
}

.profilo__intestazione-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}

.profilo__intestazione-card .card__titolo {
  margin: 0;
}

.profilo__aggiorna {
  appearance: none;
  min-height: 36px;
  padding: var(--spazio-1) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: var(--dimensione-micro);
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.profilo__stato {
  margin: 0;
  min-height: 17px;
  font-size: var(--dimensione-micro);
  line-height: 17px;
  color: var(--testo-attenuato);
}

.profilo__stato[data-tono='errore'] {
  color: var(--testo-errore);
}

.profilo__stato[data-tono='ok'] {
  color: var(--marker-luogo);
}

.profilo__gruppo {
  display: grid;
  gap: var(--spazio-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.profilo__gruppo + .profilo__gruppo {
  margin-top: var(--spazio-1);
  padding-top: var(--spazio-3);
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
}

.profilo__legenda {
  padding: 0;
  font-family: var(--font-titoli);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  color: var(--testo);
}

.profilo__campo {
  display: grid;
  gap: var(--spazio-1);
  min-width: 0;
}

/* Tendina dei comuni sotto il campo città (stesse regole della modale di
   onboarding). Inline e con max-height: con la tastiera aperta non si
   sovrappone a nulla, scorre dentro il suo riquadro. */
.profilo__suggerimenti {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
  list-style: none;
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-radius: 14px;
  background: var(--input-opzione-bg);
}

.profilo__suggerimenti[hidden] {
  display: none;
}

/* Errore sotto il campo comune ("Seleziona una citta' dall'elenco proposto"):
   visibile solo quando il testo digitato non e' una voce scelta. */
.profilo__errore {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 17px;
  color: var(--testo-errore);
}

.profilo__errore[hidden] {
  display: none;
}

.profilo__suggerimento {
  appearance: none;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--testo-secondario);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.profilo__suggerimento:hover,
.profilo__suggerimento:focus-visible {
  background: var(--chip-bg);
  color: var(--testo);
  outline: none;
}

.profilo__etichetta {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  color: var(--testo-secondario);
}

.profilo__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 22px;
}

.profilo__input:focus {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 1px;
}

/* Comune OBBLIGATORIO (v107/D59): `profilo.js` scrive `aria-invalid` sul campo
   quando e' vuoto (o quando il testo non e' una voce scelta). Il bordo d'errore
   rende visibile DOVE intervenire anche senza leggere la riga sotto il campo. */
.profilo__input[aria-invalid='true'] {
  border-color: var(--testo-errore);
}

.profilo__textarea {
  min-height: 110px;
  resize: vertical;
}

.profilo__hint {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 17px;
  color: var(--testo-attenuato);
}

.profilo__contatore {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 16px;
  color: var(--testo-attenuato);
  font-variant-numeric: tabular-nums;
}

.profilo__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.profilo__scelta {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.profilo__scelta input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.profilo__scelta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: var(--dimensione-micro);
  line-height: 16px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.profilo__scelta input:checked + span {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.profilo__scelta input:focus-visible + span {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 1px;
}

/* =============================================================================
   SELETTORE DELLA LINGUA (guscio v61)
   Non c'e' piu' la barra fissa in alto: il selettore vive DENTRO le schermate
   — in cima al Profilo (`#card-lingua`, impostazioni personali) e in fondo
   all'accesso (`.lingua--accesso`), dove serve a chi arriva con la lingua
   sbagliata prima di entrare. Stesso markup nei due punti: due pulsanti con
   `data-lingua`, lo stato attivo su `aria-pressed` (scritto da
   `disegnaSelettoreLingua` in js/app.js), nessuna icona e nessun colore
   letterale: le tinte sono i token delle pillole selezionate del Profilo.
   Le etichette "Italiano"/"English" NON si traducono: sono endonimi.
   ============================================================================= */
.lingua {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-3);
}

.lingua__etichetta {
  color: var(--testo-attenuato);
  font-size: var(--dimensione-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lingua__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* Area di tocco piena (44px come i pulsanti del guscio) e pillola chiusa:
   IT / EN ben distinti, il nome per esteso accanto al codice. */
.lingua__scelta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: var(--dimensione-piccola);
  cursor: pointer;
  transition:
    background var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

.lingua__scelta[aria-pressed='true'] {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.lingua__scelta:focus-visible {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 2px;
}

.lingua__codice {
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
}

/* Nell'accesso il selettore sta nella card del login, sotto la CTA. */
.lingua--accesso {
  justify-content: center;
  margin-top: var(--spazio-3);
  padding-bottom: var(--spazio-2);
}

.profilo__privacy {
  display: grid;
  gap: var(--spazio-1);
  margin-top: var(--spazio-1);
}

.profilo__foto-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
}

.profilo__foto-anteprima {
  flex: none;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 50%;
  background: var(--input-bg);
}

.profilo__foto-principale {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profilo__foto-iniziale {
  font-family: var(--font-titoli);
  font-size: 30px;
  line-height: 36px;
  font-weight: 900;
  color: var(--marker-iniziale);
}

.profilo__foto-azioni {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--spazio-2);
}

.profilo__riga-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.profilo__galleria-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  margin-top: var(--spazio-1);
}

.profilo__galleria-testata .profilo__contatore {
  margin-left: auto;
}

.profilo__galleria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spazio-2);
}

.profilo__galleria-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
}

.profilo__galleria-slot[data-piena='si'] {
  border-color: var(--card-border);
}

.profilo__galleria-apri {
  appearance: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--testo-attenuato);
  cursor: pointer;
}

.profilo__galleria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profilo__galleria-piu {
  font-size: 30px;
  line-height: 34px;
  font-weight: 200;
  color: var(--testo-attenuato);
}

.profilo__galleria-slot[data-piena='si'] .profilo__galleria-piu {
  display: none;
}

.profilo__galleria-numero {
  position: absolute;
  top: var(--spazio-1);
  left: var(--spazio-2);
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--peso-forte);
  color: var(--testo);
  text-shadow: 0 0 3px var(--velo-scuro);
}

.profilo__galleria-principale {
  position: absolute;
  left: var(--spazio-1);
  bottom: var(--spazio-1);
  padding: 2px var(--spazio-1);
  border-radius: var(--raggio-pillola);
  background: var(--chip-selected-bg);
  color: var(--testo);
  font-size: 9px;
  line-height: 13px;
  font-weight: var(--peso-forte);
}

.profilo__galleria-comandi {
  position: absolute;
  top: var(--spazio-1);
  right: var(--spazio-1);
  display: flex;
  gap: var(--spazio-1);
}

.profilo__galleria-comandi button {
  appearance: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: var(--bordo-sottile) solid var(--chat-bordo-tenue);
  border-radius: 50%;
  background: var(--bg-stop-alto);
  color: var(--testo);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.profilo__galleria-comandi button[data-azione='profilo-foto-rimuovi'] {
  color: var(--profilo-pericolo);
}

.profilo__file {
  display: none;
}

.profilo__interruttore {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-2);
  min-height: 44px;
  cursor: pointer;
}

.profilo__interruttore input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accento-viola);
}

.profilo__interruttore-testi {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profilo__impostazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding: var(--spazio-2) 0;
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
}

.profilo__impostazione:last-of-type {
  border-bottom: 0;
}

.profilo__impostazione-testi {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profilo__feedback {
  margin: 0;
  text-align: center;
  font-size: var(--dimensione-piccola);
  line-height: 20px;
  font-weight: var(--peso-forte);
  color: var(--testo-secondario);
}

.profilo__feedback[data-tono='ok'] {
  color: var(--marker-luogo);
}

.profilo__feedback[data-tono='errore'] {
  color: var(--testo-errore);
}

.profilo__salva {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: var(--spazio-2) var(--spazio-4);
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--azione-primaria);
  color: var(--testo);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 22px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.profilo__salva:active {
  background: var(--azione-primaria-chiara);
}

.profilo__salva[disabled] {
  opacity: 0.5;
  cursor: default;
}

.profilo__pericolo {
  border-color: var(--profilo-pericolo-bordo);
  background: var(--profilo-pericolo-sfondo);
}

.profilo__pericolo-pulsante {
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: var(--spazio-2) var(--spazio-4);
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--profilo-pericolo);
  color: var(--testo);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.profilo__pericolo-pulsante:active {
  background: var(--profilo-pericolo-scuro);
}

.profilo__pericolo-pulsante[disabled] {
  opacity: 0.5;
  cursor: default;
}

.profilo__link,
.profilo__annulla {
  appearance: none;
  align-self: center;
  padding: var(--spazio-2) 0;
  border: 0;
  background: transparent;
  color: var(--testo-attenuato);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Modale di eliminazione (dialog nativo centrato) ---------------------- */
.profilo__modale {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(calc(100% - var(--spazio-6)), 480px);
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: var(--spazio-4);
  overflow-y: auto;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--bg-stop-alto);
  color: var(--testo);
}

.profilo__modale::backdrop {
  background: var(--velo-scuro);
}

.profilo__modale[open] {
  display: grid;
  gap: var(--spazio-3);
}

.profilo__modale-chiudi {
  appearance: none;
  position: absolute;
  top: var(--spazio-2);
  right: var(--spazio-2);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.profilo__modale-titolo {
  margin: 0;
  padding-right: var(--spazio-5);
  font-family: var(--font-titoli);
  font-size: var(--dimensione-titolo);
  line-height: 28px;
  font-weight: 800;
  color: var(--testo);
}

.profilo__modale-testo {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--testo-secondario);
}

.profilo__avviso-eliminazione {
  display: grid;
  gap: var(--spazio-1);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--profilo-pericolo-bordo);
  border-radius: var(--spazio-2);
  background: var(--profilo-pericolo-sfondo);
}

.profilo__avviso-eliminazione p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.profilo__avviso-titolo {
  color: var(--testo) !important;
  font-weight: var(--peso-forte);
}

.profilo__errore-modale {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  color: var(--testo-errore);
}

.profilo__modale-azioni {
  display: grid;
  gap: var(--spazio-2);
}

/* =============================================================================
   DONAZIONI — "Sostieni Nearoo" (Modulo 2, guscio v19)
   La card vive nel Profilo. I preset sono radio veri (accessibili da tastiera)
   vestiti da pillole; il campo libero compare solo alla scelta "Libero". I
   pulsanti PayPal sono l'iframe ufficiale: qui si governa solo lo spazio.
   ============================================================================= */

.donazioni {
  display: grid;
  gap: var(--spazio-3);
}

.donazioni__importi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.donazioni__legenda {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.donazioni__importo {
  position: relative;
  display: flex;
  min-width: 0;
}

.donazioni__importo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.donazioni__importo > span {
  flex: 1 1 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-card);
  background: var(--chip-bg);
  color: var(--testo);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--durata-veloce) ease, border-color var(--durata-veloce) ease;
}

.donazioni__importo input:checked + span {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.donazioni__importo input:focus-visible + span {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

.donazioni__importo--libero {
  grid-column: 1 / -1;
}

.donazioni__importo--libero > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.donazioni__importo-testo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
}

.donazioni__importo-nota {
  color: var(--testo-attenuato);
  font-size: var(--dimensione-micro);
  line-height: 16px;
  font-weight: var(--peso-normale);
}

.donazioni__campo {
  display: grid;
  gap: var(--spazio-2);
}

.donazioni__campo-etichetta {
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-medio);
}

.donazioni__campo-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 48px;
  padding: 0 var(--spazio-3);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
}

.donazioni__campo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.donazioni__campo-input:focus-visible {
  outline: none;
}

.donazioni__campo-riga:focus-within {
  border-color: var(--chip-selected-border);
}

.donazioni__campo-valuta {
  flex: none;
  color: var(--testo-secondario);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--peso-forte);
}

.donazioni__nota {
  margin: 0;
  color: var(--testo-attenuato);
  font-size: var(--dimensione-micro);
  line-height: 17px;
}

/* CTA del link configurato a DB (`donazioni_link`): comando principale della
   card quando le donazioni sono attive. Solo token, nessun colore a mano. */
.donazioni__link {
  display: block;
  margin-top: var(--spazio-2);
  text-align: center;
  text-decoration: none;
}

.donazioni__pulsanti {
  min-height: 48px;
}

.donazioni__attesa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-2);
  min-height: 48px;
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.donazioni__spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--testo-secondario);
  border-right-color: transparent;
  border-radius: 50%;
  animation: donazioni-gira 0.8s linear infinite;
}

.donazioni__stato {
  margin: 0;
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 19px;
}

.donazioni__stato[data-tono='errore'] {
  color: var(--testo-errore);
}

.donazioni__riprova {
  width: 100%;
}

.donazioni__grazie {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-3);
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--donazioni-ok-bordo);
  border-radius: 14px;
  background: var(--donazioni-ok-sfondo);
}

.donazioni__grazie-icona {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--donazioni-ok-sfondo);
  color: var(--donazioni-ok);
}

.donazioni__grazie-icona svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.donazioni__grazie-testi {
  min-width: 0;
}

.donazioni__grazie-titolo {
  margin: 0 0 2px;
  color: var(--testo);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
}

.donazioni__grazie-testo {
  margin: 0;
  color: var(--testo-secondario);
  font-size: 13px;
  line-height: 19px;
}

.donazioni__configurazione {
  margin: 0;
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-bg);
  color: var(--testo-errore);
  font-size: 13px;
  line-height: 18px;
}

@keyframes donazioni-gira {
  to {
    transform: rotate(360deg);
  }
}

/* --- Titoli delle card nelle due schermate (cardTitle 16/22 800) -----------
   Il `.card__titolo` generale del guscio e' 14/.. medio MAIUSCOLO (stile del
   vecchio foglio): nell'APK i titoli delle card sono 16/22 800 in sentence case
   (`cardTitle` di profile.tsx e `controlsTitle`/`listTitle` di
   segnale-fumo.tsx). Il selettore e' limitato ai due pannelli, quindi le altre
   schermate non cambiano. */
.vista[data-pannello='social'] .card__titolo,
.vista[data-pannello='profilo'] .card__titolo {
  margin: 0 0 var(--spazio-2);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--testo);
}

/* Nella testata della card il titolo sta su una riga flex con l'icona. */
.social__intestazione-card .card__titolo {
  margin: 0;
}


/* =============================================================================
   PROFILO «RADAR CONNECT» (guscio v99)
   ---
   Il pannello Profilo non e' piu' un elenco di schede piatte: e' una pila di
   superfici di VETRO sul fondo notte (definito su `.vista[data-pannello=
   'profilo']`), con il linguaggio grafico che l'app usa gia' nella Chat e nella
   Bacheca (`--rc-*` di tokens.css). Le schede che restano sono poche e tutte
   legate alla persona: testata, dati account, editor, legale e
   sessione/account. Lingua, notifiche, app, donazioni e uscita sono uscite dal
   Profilo (dal v94 vivono nella schermata Impostazioni App della Home), come
   prima privacy, supporto e le scorciatoie sociali: quello che resta deve
   respirare, non essere un menu.

   REGOLE DI QUESTO BLOCCO
   - nessun colore letterale: solo token `--rc-*`, `--bordo-sottile` e le tinte
     del tema (lo pretende la guardia anti-esadecimale di app.css);
   - niente nuove classi nel markup oltre a `glass-card` (gia' usata da Chat e
     Bacheca): le regole lavorano sui selettori che il componente gia' ha (il
     selettore della lingua vive nelle Impostazioni App, `.lingua--impostazioni`);
   - i nomi delle variabili sono quelli veri di tokens.css: se un token cambia
     li' cambia anche qui, senza rincorse.
   ============================================================================= */

/* --- 1. Vetro delle schede -------------------------------------------------
   `--rc-vetro-sfondo` + bordo viola tenue + ombra profonda: la scheda si
   stacca dal fondo notte senza diventare un riquadro pieno. Il `backdrop-filter`
   c'e' anche con il prefisso `-webkit-` (Safari iOS): senza, su iPhone il vetro
   resta opaco. Il riflesso superiore e' una riga di 1px generata da `::before`
   (NESSUN nodo in piu' nel markup), esattamente come nella barra in basso. */
.vista[data-pannello='profilo'] .glass-card {
  position: relative;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  box-shadow: 0 18px 38px -26px var(--rc-ombra);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

.vista[data-pannello='profilo'] .glass-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rc-vetro-riflesso),
    transparent
  );
  pointer-events: none;
}

/* La testata e' vetro anche lei, ma resta un'intestazione: padding proprio e
   nessun margine in fondo (lo spazio lo danno il gap del pannello e la lingua). */
.vista[data-pannello='profilo'] .profilo__testata.glass-card {
  padding: var(--spazio-3);
  margin-bottom: 0;
}

/* La card di eliminazione conserva la sua tinta di pericolo: l'id vince sul
   vetro generico, quindi il rosso non viene "normalizzato" dal restyle. */
.vista[data-pannello='profilo'] #card-pericolo.glass-card {
  border-color: var(--profilo-pericolo-bordo);
  background: var(--profilo-pericolo-sfondo);
}

/* --- 2. Lingua: due pillole compatte ---------------------------------------
   Guscio v94: il selettore e' uscito dal Profilo ed e' entrato nella card
   "Lingua" della schermata Impostazioni App (`#card-lingua`). Non e' piu' una
   scheda con titolo e descrizione: e' una barra di pillole centrata, larga
   quanto il contenuto. L'area di tocco resta quella della regola base
   (`.lingua__scelta` 44px): qui si cambia solo la pelle. La classe non e'
   legata a un pannello (`lingua--impostazioni`): la stessa regola vale ovunque
   il selettore venga montato. */
.lingua--impostazioni {
  justify-content: center;
  gap: var(--spazio-1);
  padding: var(--spazio-1);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

.lingua--impostazioni .lingua__scelte {
  gap: var(--spazio-1);
}

.lingua--impostazioni .lingua__scelta {
  border-color: transparent;
  background: transparent;
  color: var(--rc-testo-tenue);
}

.lingua--impostazioni .lingua__scelta[aria-pressed='true'] {
  border-color: var(--rc-vetro-bordo-acceso);
  background: var(--rc-vetro-sfondo);
  color: var(--rc-ciano);
}

.lingua--impostazioni .lingua__codice {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* --- 3. Editor: i gruppi diventano pannelli --------------------------------
   Un solo `glass-card` per l'editor e i sette gruppi come pannelli interni:
   vetro dentro vetro raddoppierebbe il blur, quindi i gruppi usano la pillola
   (piu' chiara, senza ombra) e un raggio piu' stretto. La linea di divisione
   fra un gruppo e l'altro diventa il bordo del pannello (nessun `margin-top`
   da annullare: e' la stessa altezza, cambia solo il colore). */
.vista[data-pannello='profilo'] .profilo__gruppo {
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: 16px;
  background: var(--rc-vetro-sfondo-pillola);
}

.vista[data-pannello='profilo'] .profilo__gruppo + .profilo__gruppo {
  margin-top: 0;
  padding-top: var(--spazio-3);
  border-top: var(--bordo-sottile) solid var(--rc-vetro-bordo);
}

/* Le legende sono etichette di sezione: mono, maiuscole spaziate, ciano.
   `--font-mono` esiste in tokens.css (JetBrains Mono con ripieghi di sistema). */
.vista[data-pannello='profilo'] .profilo__legenda {
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- 4. Contatori: cifre allineate ---------------------------------------
   `0/1000` e `0/8` cambiano continuamente mentre si scrive: con `tabular-nums`
   il numero non "balla" e con la mono (gia' usata dai contatori della Chat)
   somiglia a un contatore di sistema, non a una frase. */
.vista[data-pannello='profilo'] .profilo__contatore {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--rc-testo-tenue);
}

/* --- 5. Galleria foto ----------------------------------------------------
   Gli slot diventano riquadri di vetro con il bordo che si ACCENDE quando c'e'
   la foto (`data-piena='si'`, gia' scritto da js/profilo.js): lo stato non e'
   affidato al colore dell'immagine ma a un attributo, quindi resta leggibile
   anche senza foto. Il badge "Principale" e' una pillola ciano. */
.vista[data-pannello='profilo'] .profilo__galleria-slot {
  border-color: var(--rc-vetro-bordo);
  border-radius: 16px;
  background: var(--rc-vetro-sfondo-pillola);
}

.vista[data-pannello='profilo'] .profilo__galleria-slot[data-piena='si'] {
  border-color: var(--rc-vetro-bordo-acceso);
}

.vista[data-pannello='profilo'] .profilo__galleria-piu {
  color: var(--rc-testo-tenue);
}

.vista[data-pannello='profilo'] .profilo__galleria-principale {
  border: var(--bordo-sottile) solid var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- 6. "Salva profilo": la CTA del pannello -------------------------------
   Gradiente viola -> ciano (le due tinte del marchio) e pressione "fisica"
   (`scale(0.97)` all'`:active`): l'unico comando che scrive sul database deve
   essere il piu' evidente della schermata, senza introdurre un colore nuovo. */
.vista[data-pannello='profilo'] .profilo__salva {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-ciano));
  color: var(--rc-pomello);
  font-family: var(--font-titoli);
  letter-spacing: 0.02em;
  box-shadow: 0 16px 32px -20px var(--rc-alone-viola);
  transition:
    transform var(--durata-veloce) ease,
    filter var(--durata-veloce) ease;
}

.vista[data-pannello='profilo'] .profilo__salva:active {
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-ciano));
  filter: brightness(1.1);
  transform: scale(0.97);
}

/* Disabilitato: spento e senza ombra, ma il testo resta leggibile (il velo lo
   da' l'opacita' della regola base, qui non si tocca). */
.vista[data-pannello='profilo'] .profilo__salva[disabled] {
  box-shadow: none;
  filter: none;
}

/* --- 7. Uscita, voci legali e comandi ------------------------------------
   "Esci" resta un link attenuato (non e' la CTA principale) ma diventa una
   pillola di vetro: stessa famiglia delle altre superfici, tocco pieno. Dal
   guscio v94 il pulsante vive nella card "Sessione" delle Impostazioni App:
   il selettore e' l'id della card, non piu' il pannello Profilo. */
#card-sessione .profilo__uscita {
  padding: var(--spazio-2) var(--spazio-4);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

#card-sessione .profilo__uscita:active {
  background: var(--rc-vetro-sfondo);
  color: var(--testo);
}

.vista[data-pannello='profilo'] .profilo__voce-sotto,
.vista[data-pannello='profilo'] .profilo__hint,
.vista[data-pannello='profilo'] .profilo__intro,
.vista[data-pannello='profilo'] .profilo__stato {
  color: var(--rc-testo-tenue);
}

.vista[data-pannello='profilo'] .profilo__voce {
  border-bottom-color: var(--rc-vetro-bordo);
}

.vista[data-pannello='profilo'] .profilo__freccia {
  color: var(--rc-ciano);
}

.vista[data-pannello='profilo'] .profilo__ricarica,
.vista[data-pannello='profilo'] .profilo__aggiorna {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-ciano);
}

.vista[data-pannello='profilo'] .profilo__ricarica:active,
.vista[data-pannello='profilo'] .profilo__aggiorna:active {
  background: var(--rc-vetro-sfondo);
}

/* --- 8. Accessibilita' ---------------------------------------------------
   Chi ha `prefers-reduced-motion` non deve vedere la CTA "scalare": la
   transizione si spegne, la pressione resta dichiarata dal cambio di tinta. */
@media (prefers-reduced-motion: reduce) {
  .vista[data-pannello='profilo'] .profilo__salva {
    transition: none;
  }

  .vista[data-pannello='profilo'] .profilo__salva:active {
    transform: none;
  }
}

/* =============================================================================
   IMPOSTAZIONI APP «RADAR CONNECT» (guscio v94)
   ---
   La sotto-schermata della Home che raccoglie lingua, notifiche push,
   applicazione (installa/aggiorna), sostegno a Nearoo e sessione. Stesso
   linguaggio del Profilo: superfici di vetro sul fondo notte della Dashboard,
   pillole di telemetria, nessun colore letterale (solo token `--rc-*`). Il
   fondo e' quello del pannello Home (gradiente + `--rc-sfondo`): qui non si
   ridipinge nulla.
   ============================================================================= */

/* --- 1. Vetro delle card --------------------------------------------------- */
#home-schermata-impostazioni .impostazioni__card {
  position: relative;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  box-shadow: 0 18px 38px -26px var(--rc-ombra);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

/* Riflesso superiore di 1px: nessun nodo in piu' nel markup. */
#home-schermata-impostazioni .impostazioni__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--rc-vetro-riflesso), transparent);
  pointer-events: none;
}

/* --- 2. Testata della card: titolo a sinistra, pillola di telemetria a destra */
#home-schermata-impostazioni .impostazioni__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}

#home-schermata-impostazioni .impostazioni__testata .sotto__card-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--testo);
}

/* I testi descrittivi restano attenuati come nel resto del design notturno. */
#home-schermata-impostazioni .sotto__testo,
#home-schermata-impostazioni .sotto__nota,
#home-schermata-impostazioni .sotto__intro {
  color: var(--rc-testo-tenue);
}

/* --- 3. Azioni: comandi larghi, uno sopra l'altro ------------------------- */
#home-schermata-impostazioni .impostazioni__azioni {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

#home-schermata-impostazioni .impostazioni__azioni .pulsante {
  width: 100%;
  min-height: 48px;
}

/* CTA principale delle impostazioni: stesso gradiente del marchio. */
#home-schermata-impostazioni .impostazioni__azioni .pulsante--primario {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-ciano));
  color: var(--rc-pomello);
  font-family: var(--font-titoli);
  letter-spacing: 0.02em;
  box-shadow: 0 16px 32px -20px var(--rc-alone-viola);
  transition:
    transform var(--durata-veloce) ease,
    filter var(--durata-veloce) ease;
}

#home-schermata-impostazioni .impostazioni__azioni .pulsante--primario:active {
  filter: brightness(1.1);
  transform: scale(0.97);
}

/* --- 4. "Dona con PayPal": gradiente viola -> rosa ------------------------ */
#card-donazioni .donazioni__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  color: var(--rc-pomello);
  font-family: var(--font-titoli);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 16px 32px -20px var(--rc-alone-rosa);
  transition:
    transform var(--durata-veloce) ease,
    filter var(--durata-veloce) ease;
}

#card-donazioni .donazioni__link:active {
  filter: brightness(1.08);
  transform: scale(0.97);
}

/* --- 5. Sessione: "Esci" occupa tutta la riga ---------------------------- */
#home-schermata-impostazioni .impostazioni__uscita {
  width: 100%;
  min-height: 48px;
  font-family: var(--font-titoli);
}

/* --- 6. Accessibilita' --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #home-schermata-impostazioni .impostazioni__azioni .pulsante--primario,
  #card-donazioni .donazioni__link {
    transition: none;
  }

  #home-schermata-impostazioni .impostazioni__azioni .pulsante--primario:active,
  #card-donazioni .donazioni__link:active {
    transform: none;
  }
}


/* =============================================================================
   DASHBOARD v23: schermate interne e strumenti super_admin
   Fonte: src/app/(app)/(tabs)/index.tsx (toolsCard/toolsRow), admin.tsx,
   support.tsx, notification-settings.tsx, debug.tsx e dating.tsx.
   Palette: SOLO token di tokens.css. Niente colori scritti qui.
   ============================================================================= */

/* Ogni schermata della Home e' una colonna con lo stesso ritmo della Dashboard. */
.home__schermata {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  /* Item della griglia `.vista`: senza `min-width: 0` il minimo automatico e'
     il min-content dell'item e un contenuto "largo" (il pager del Dating)
     sfonderebbe la traccia finendo tagliato a destra. `max-width: 100%` chiude
     il box sul pannello: la schermata non e' MAI piu' larga dello schermo. */
  min-width: 0;
  max-width: 100%;
}

/* --- Card "Strumenti" (solo super_admin) ---------------------------------- */
/* RADAR CONNECT: stessa superficie in vetro delle altre card. La testata porta
   il titolo e il pulsante del PING (latenza VERA dell'endpoint di versione,
   misurata solo su tocco: la Home non fa richieste da sola). */
.home__strumenti {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  width: 100%;
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 12px 26px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
}

.home__strumenti-testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-1) var(--spazio-2) 0;
}

.home__strumenti-titolo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--testo-attenuato);
}

/* Ping di diagnostica: pillola di vetro con il valore in mono. */
.home__strumenti-ping {
  appearance: none;
  flex: none;
  padding: 3px var(--spazio-2);
  font: inherit;
  cursor: pointer;
}

.home__strumenti-ping .home__icona {
  width: 13px;
  height: 13px;
}

.home__strumenti-ping[data-stato='ok'] {
  border-color: var(--rc-badge-max-bordo);
  color: var(--rc-ciano);
}

.home__strumenti-ping[data-stato='errore'] {
  border-color: var(--rc-badge-new-bordo);
  color: var(--rc-rosa);
}

.home__strumento {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  width: 100%;
  min-height: 58px;
  padding: var(--spazio-1) var(--spazio-2);
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home__strumento:active {
  background: var(--chip-bg);
}

.home__strumento-icona {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--icona-tonda-sfondo);
  border-radius: 17px;
  background: var(--icona-tonda-sfondo);
}

.home__strumento-icona .home__icona {
  width: 19px;
  height: 19px;
}

.home__strumento-testi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home__strumento-titolo {
  font-family: var(--font-titoli);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--testo);
}

.home__strumento-stato {
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  color: var(--testo-secondario);
}

/* --- Schede interne (Supporto, Dating, Notifiche, Admin, Diagnostica) ------ */
.sotto__testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
}

.sotto__indietro {
  appearance: none;
  flex: none;
  padding: var(--spazio-1) var(--spazio-2);
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.sotto__indietro:active {
  background: var(--card-bg);
}

.sotto__titolo {
  margin: 0;
  min-width: 0;
  font-family: var(--font-titoli);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--testo);
}

.sotto__intro,
.sotto__testo,
.sotto__nota {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--testo-secondario);
}

.sotto__nota {
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-attenuato);
}

.sotto__card {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--card-bg);
}

.sotto__card-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--testo);
}

.sotto__etichetta {
  font-size: 12px;
  line-height: 17px;
  font-weight: 600;
  color: var(--testo-secondario);
}

.sotto__campo {
  width: 100%;
  padding: 11px 12px;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}

.sotto__campo--lungo {
  min-height: 96px;
  resize: vertical;
}

.sotto__campo:focus {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 1px;
}

.sotto__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}

.sotto__contatore {
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-attenuato);
}

.sotto__contatore--errore {
  color: var(--testo-errore);
}

.sotto__interruttore {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  font-size: 13px;
  line-height: 19px;
  color: var(--testo);
}

.sotto__interruttore input {
  width: 20px;
  height: 20px;
  accent-color: var(--accento-viola);
}

.sotto__esito {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-secondario);
}

.sotto__esito--ok {
  color: var(--marker-luogo);
}

.sotto__esito--errore {
  color: var(--testo-errore);
}

.sotto__esito--neutro {
  color: var(--testo-attenuato);
}

.sotto__blocco {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-bg);
}

#admin-contenuto,
#admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}


/* --- Supporto: email, FAQ e documenti ------------------------------------- */
.supporto__form {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

.supporto__email-link {
  color: var(--icona-chiara);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.supporto__faq-voce {
  padding: var(--spazio-2) 0;
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
}

.supporto__faq-voce:first-of-type {
  border-top: 0;
}

.supporto__faq-voce summary {
  cursor: pointer;
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  color: var(--testo);
}

.supporto__faq-voce p {
  margin: var(--spazio-2) 0 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--testo-secondario);
}

.supporto__legale .profilo__voce {
  padding: var(--spazio-2) 0;
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
  background: transparent;
}

.supporto__legale .profilo__voce:first-of-type {
  border-top: 0;
}

/* --- Dating: elenco, righe e composer ------------------------------------ */
/* PARITA' CON `src/app/(app)/(tabs)/dating.tsx` (allineamento 27/10/2026).
   I numeri qui sotto NON sono inventati: sono i valori di
   `StyleSheet.create` della schermata APK, tradotti nei token del guscio.
   Attenzione alla scala di `Spacing` dell'APK, che NON coincide con i numeri
   del token: Spacing.one = 4 (--spazio-1), two = 8 (--spazio-2),
   three = 16 (--spazio-4), four = 24 (--spazio-5), five = 32 (--spazio-6),
   six = 64 (2 x --spazio-6). Nessun colore scritto a mano: --card-bg e
   --card-border sono CARD_BACKGROUND/CARD_BORDER, --testo-secondario e'
   TEXT_SECONDARY, --testo-attenuato e' TEXT_MUTED, --accento-ciano e'
   ACCENT_CYAN; per i comandi con bordo traslucido si usano
   --radar-aggiorna-sfondo / -bordo (bianco al 6% e al 25%, gli stessi di
   `refreshButton` e `outlineButton` dell'APK). */
.dating__meta-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

/* `counterSubtitle`: 12/16 TEXT_MUTED. */
.dating__meta,
.dating__quota {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
}

/* `refreshButton`: pillola 7/14, bordo 1 a 0.25, fondo 0.06, etichetta
   12/16 in peso 700 ACCENT_CYAN (colore che `.home__strumento` non ha). */
.dating__aggiorna {
  width: auto;
  min-height: 32px;
  margin-left: auto;
  padding: 7px 14px;
  border: var(--bordo-sottile) solid var(--radar-aggiorna-bordo);
  border-radius: 999px;
  background: var(--radar-aggiorna-sfondo);
  color: var(--accento-ciano);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

/* `listaGiorno`: colonna con gap 8 e fondo 16 (nessun padding laterale: la
   riga deve arrivare ai bordi della pagina, come la lista dell'APK). */
.dating__lista {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 0 0 var(--spazio-4);
  list-style: none;
}

/* Pager a 7 giorni (parita' con `dating.tsx`): una pagina-giorno per volta,
   swipe orizzontale con scroll-snap e pagina mai sostituita dallo stato vuoto.
   La BARRA DI SCORRIMENTO del pager non si vede (segnalazione 27/10/2026: la
   barra nativa grigia sporcava il pager sotto le pagine). Si tengono tutte e tre
   le dichiarazioni perche' coprono browser diversi: `scrollbar-width` e' lo
   standard (Firefox), `-ms-overflow-style` il vecchio Edge/IE, e la pseudo-classe
   `::-webkit-scrollbar` WebKit/Blink (Safari iOS, Chrome, Samsung Internet).
   Nascondere la barra NON toglie lo scorrimento: resta quello nativo del
   browser (dito = pan orizzontale) piu' `scroll-snap-type: x mandatory` e
   `scroll-behavior: smooth` per frecce e `scrollTo`. `overscroll-behavior-x:
   contain` evita che lo swipe oltre la prima/ultima pagina si propaghi al
   documento (rimbalzo / gesto indietro del browser).

   MISURE (allineamento dei 27/10/2026). Il pager e' lo SCROLLPORT e ogni pagina
   e' esattamente larga quanto lui: `width: 100%` + `flex: 0 0 100%` +
   `box-sizing: border-box` e NESSUN padding/margine orizzontale sulla pagina.
   Prima la pagina sommava `min-width: 100%` + `padding-right`: box e contenuto
   non coincidevano, il contenuto della scheda usciva a destra e lo snap (calcolato
   sul bordo della pagina) cadeva fuori asse. Come in `dating.tsx` (pagina =
   100% del viewport visibile) `min-width: 0` impedisce che un contenuto largo
   (nickname lungo senza spazi) allarghi la pagina: il box resta 100% e il testo
   va a capo (`overflow-wrap: anywhere`, ereditato dai figli).
   `align-items: flex-start` (mai `stretch`) perche' le pagine hanno altezze
   diverse e non devono stirarsi a vicenda.

   CONFINE DELLO SCHERMO (segnalazione 27/10/2026: schede tagliate a destra e
   swipe fuori asse). Il pager e' largo quanto il PANNELLO, non quanto il suo
   contenuto: la traccia della griglia `.vista` e' `minmax(0, 1fr)` (mai `auto`
   implicita) e `.home__schermata` ha `min-width: 0`/`max-width: 100%`. Senza
   quei due pezzi la griglia si allargava sul contenuto (sette pagine in fila),
   quindi `width: 100%` della pagina valeva quella traccia enorme: una pagina
   era piu' larga dello schermo, lo swipe si fermava fuori campo e la parte
   destra finiva tagliata da `overflow-x: hidden` del pannello. Qui NON si
   mettono margini/padding orizzontali: il pager tocca i bordi del pannello e la
   spaziatura la danno le righe (padding 8) dentro la pagina.

   ALTEZZA = ALTEZZA DELLA PAGINA VISIBILE (come il `height` che `dating.tsx`
   da' al pager e alle pagine con l'`onLayout`). Il pager NON ha piu' un
   `padding-bottom` (spostato su `.dating__lista`, dove sta nell'APK): con un
   padding qui l'altezza inline calcolata da `dating.js` non sarebbe piu'
   l'altezza del contenuto. `dating.js` scrive lo `style.height` della pagina
   attiva (una pagina-giorno per volta): il documento non riserva lo spazio del
   giorno piu' pieno quando quello visibile ha una sola riga, e nessun contenuto
   viene tagliato perche' il ramo misura la pagina prima di applicarla. Se la
   misura non e' possibile (schermata ancora `hidden`, DOM senza layout) lo
   `style.height` viene svuotato e vale la regola del contenuto piu' alto. */
.dating__pager {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dating__pager::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Una pagina-giorno: testata, indicatori, lista. La spaziatura verticale e'
   quella dei singoli blocchi (`paginaHeader` paddingBottom 4, `dotsRow`
   paddingBottom 8): un `gap` sommato a quelli allontanerebbe testata e pallini
   rispetto all'APK. */
.dating__pagina {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-wrap: anywhere;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* `paginaHeader`: riga, gap 8, fondo 4. */
.dating__pagina-testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding-bottom: var(--spazio-1);
}

/* `paginaHeaderText`: colonna, gap 1. */
.dating__pagina-testi {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* `paginaGiorno`: 18/24, peso 900, spaziatura 0.3. */
.dating__giorno {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 18px;
  line-height: 24px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--testo);
}

/* `paginaConteggio`: 12/16 TEXT_SECONDARY. */
.dating__conteggio {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-secondario);
}

.dating__frecce {
  display: flex;
  gap: var(--spazio-1);
  margin-left: auto;
}

/* `freccia`: cerchio 36, bordo 0.25, fondo 0.06, glifo 20/24 peso 900 ciano. */
.dating__freccia {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bordo-sottile) solid var(--radar-aggiorna-bordo);
  border-radius: 999px;
  background: var(--radar-aggiorna-sfondo);
  color: var(--accento-ciano);
  font-size: 20px;
  line-height: 24px;
  font-weight: 900;
}

.dating__freccia:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* `dotsRow`: gap 4 e fondo 8. */
.dating__punti {
  display: flex;
  align-items: center;
  gap: var(--spazio-1);
  padding-bottom: var(--spazio-2);
}

/* `dot`: 6 x 6, raggio 3, bianco al 25%; `dotActive`: 18 x 6 ACCENT_CYAN. */
.dating__punto {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--radar-aggiorna-bordo);
  transition: width 150ms ease, background 150ms ease;
}

.dating__punto--attivo {
  width: 18px;
  background: var(--accento-ciano);
}

/* `giornoVuoto`: centro, margine superiore 32, 13/19 TEXT_MUTED. */
.dating__giorno-vuoto {
  margin: var(--spazio-6) 0 0;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: var(--testo-attenuato);
}

/* `row`: la CARD e' un `<button>` (04/11/2026): il tocco apre il profilo
   completo, non c'e' piu' una CTA a destra. Struttura: avatar 52 a sinistra,
   colonna dei testi (nome su una riga, dati anagrafici sotto, badge in fondo).
   Il reset del bottone (`font`, `color`, `text-align`, `cursor`) sta qui perche'
   senza, i browser dei telefoni disegnano il testo del pulsante con il font di
   sistema e centrato dentro la riga. */
.dating__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  padding: var(--spazio-2);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 16px;
  background: var(--card-bg);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dating__riga:active {
  transform: scale(0.99);
}

.dating__riga:focus-visible {
  outline: 2px solid var(--accento-ciano);
  outline-offset: 2px;
}

/* La voce dell'elenco e' un contenitore neutro: il vetro e il tap stanno sul
   `<button>` interno (`<li><button>` e' l'unico markup valido per una lista di
   card cliccabili). */
.dating__voce {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `RadarAvatar` nell'APK: 52 (anelli + core). */
.dating__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid var(--avatar-anello-esterno);
  border-radius: 50%;
  background: var(--avatar-sfondo);
}

.dating__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dating__iniziale {
  color: var(--marker-iniziale);
  font-size: 18px;
  font-weight: 900;
}

/* `rowText`: colonna, gap 3, larghezza elastica con `min-width: 0` (un testo
   lungo va in ellissi invece di allargare la riga). */
.dating__testi {
  flex: 1 1 120px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* `rowTop`: il NOME su una riga tutta sua e i dati anagrafici SOTTO, in
   colonna (04/11/2026). Niente piu' nome e dati affiancati: la riga sotto e'
   fluida (`flex-wrap`) e il nome non viene mai compresso. */
.dating__riga-alta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: var(--spazio-2);
  row-gap: 2px;
  min-width: 0;
}

/* `rowName`: 15/20 peso 800, una riga sola con ellissi (`numberOfLines={1}`).
   In colonna (`rowTop`) il nome non cresce in altezza: `flex: none` + larghezza
   del contenuto, con l'ellissi come ultima difesa. */
.dating__nome {
  flex: none;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-titoli);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  color: var(--testo);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* `rowMeta`: 11/14 TEXT_MUTED, grappolo elastico in coda al nome. I pezzi
   (eta', pillola del genere, localita' e distanza) stanno su una riga sola e
   vanno a capo solo quando serve; `min-width: 0` consente l'ellissi ai soli
   pezzi di coda, mai al nome. */
.dating__dettagli {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spazio-1);
  row-gap: 2px;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 14px;
  color: var(--testo-attenuato);
}

.dating__eta,
.dating__luogo {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ICONA del genere accanto all'eta' (04/11/2026): niente piu' lettere
   `M`/`F`/`A` (sigla italiana, illeggibile in altre lingue), ma i simboli
   universali di Marte (uomo), Venere (donna) e un punto neutro per i profili
   registrati prima dell'obbligo del sesso. La dicitura piena
   ("Uomo"/"Donna"/"Altro") resta nell'`aria-label`/`title`.

   Il simbolo sullo schermo e' un DISEGNO SVG (vedi `.dating__genere svg`,
   costruito da `dating.js`), non il carattere Unicode: su Safari iOS ♂ e ♀
   arrivano da un font di ripiego e il loro inchiostro cade SOTTO il centro
   della capsula (l'icona sembrava slittata verso i badge). Un SVG si centra
   per geometria e non dipende dalle metriche del font; il glifo resta solo
   come ripiego testuale quando il DOM non sa creare nodi SVG.

   Colori (`--genere-*` di tokens.css, unica fonte): uomo azzurro, donna rosa,
   `altro` neutro di sempre — la capsula vive SOLO nella schermata Dating, che
   sta in tema "Radar Connect", quindi il neutro legge i token del vetro. */
.dating__genere {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  vertical-align: middle;
  min-width: 16px;
  min-height: 16px;
  padding: 0 4px;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: 8px;
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

/* Il disegno ha misura fissa e `display: block`: la capsula centra una scatola
   vera, non l'inchiostro di un carattere (era questa la causa dello
   slittamento verticale su iOS). */
.dating__genere svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* Tinte del genere: uomo azzurro, donna rosa. `--altro` non ha regola, quindi
   resta il neutro del vetro (nessun colore per chi non ha dichiarato il sesso). */
.dating__genere--uomo {
  border-color: var(--genere-uomo-bordo);
  background: var(--genere-uomo-sfondo);
  color: var(--genere-uomo);
}

.dating__genere--donna {
  border-color: var(--genere-donna-bordo);
  background: var(--genere-donna-sfondo);
  color: var(--genere-donna);
}

/* Separatore "·" fra i pezzi dei dati anagrafici: un nodo vero (non un
   `::before`) perche' la pillola del genere non deve contenere il punto. */
.dating__sep {
  flex: none;
  color: var(--testo-attenuato);
}

/* `rowBottom`: sottotitolo elastico + badge di stato (gap 8 come l'APK). */
.dating__riga-bassa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  min-width: 0;
}

/* `rowSubtitle`: 13/18 TEXT_SECONDARY, una riga. */
.dating__stato {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* `rowBadge` dell'APK: pillola di 20 (min 20), 11/14 peso 800 ACCENT_CYAN su
   CHIP_UNSELECTED_*; il badge d'intenzione tiene la tinta viola di sempre. */
.dating__badgeStato,
.dating__badge {
  flex: none;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 10px;
  background: var(--chip-bg);
  color: var(--accento-ciano);
  font-size: 11px;
  line-height: 14px;
  font-weight: 800;
}

.dating__badge {
  border-color: var(--tinta-viola-bordo);
  background: var(--tinta-viola-sfondo);
  color: var(--icona-chiara);
}

/* L'anteprima della bio nella card NON esiste piu' (04/11/2026): la
   descrizione si legge solo nel profilo completo, per intero. */

/* CTA (icebreaker / "Apri Chat"): vive SOLO nel piede del profilo completo
   (04/11/2026), non c'e' piu' nella card. La misura resta quella del pulsante
   a testo (`due .dating__invia--glifo` e il glifo a freccia sono stati
   rimossi insieme alla CTA-icona della card). */
.dating__invia {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-selected-border);
  border-radius: 999px;
  background: var(--chip-selected-bg);
  color: var(--testo);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.dating__invia:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- PROFILO COMPLETO: testata compatta, corpo scorrevole, CTA fissa ------- */
/* Il selettore raddoppia la classe perche' l'elemento porta anche
   `.dating__composer` (larghezza, `max-height` e `overflow` della base): senza
   questa specificita' la regola del composer vincerebbe per ordine di file.
   La CTA NON sta dentro lo scorrimento: e' la BARRA FISSA in fondo
   (05/11/2026), come la barra dell'APK. */
.dating__composer.dating__profilo {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 24px));
  max-height: min(88vh, 720px);
  padding: 0;
  overflow: hidden;
}

/* TESTATA COMPATTA: avatar in evidenza (72), nome, umore, riga anagrafica e
   "Membro dal" in colonna; sfondo, bordo e blur arrivano da `.glass-card`. */
.dating__profilo-testata {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  flex: none;
  margin: var(--spazio-3) var(--spazio-4) 0;
  padding: var(--spazio-3);
}

.dating__profilo-avatar {
  flex: none;
  width: 72px;
  height: 72px;
}

/* Il contenuto dell'avatar (foto o iniziale) riempie il cerchio: la scheda
   profilo della chat ci mette `.chat__foto`/`.chat__iniziale` e senza questa
   regola l'immagine resterebbe alla dimensione naturale (ritagliata). */
.dating__profilo-avatar .chat__foto,
.dating__profilo-avatar .chat__iniziale {
  width: 100%;
  height: 100%;
}

.dating__profilo-identita {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Il nome del profilo riusa il titolo del composer, senza il margine. */
.dating__profilo-identita .dating__composer-titolo {
  margin: 0;
}

/* UMORE: lo stato breve dichiarato dall'utente, una riga attenuata. */
.dating__profilo-umore {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-secondario);
  overflow-wrap: anywhere;
}

/* Le righe FACOLTATIVE (umore, "Membro dal", contatore, riga dei badge) hanno
   `display` proprio: senza queste regole `[hidden]` non le nasconderebbe. */
.dating__profilo-umore[hidden],
.dating__profilo-membro[hidden],
.dating__profilo-conteggio[hidden],
.dating__profilo-badge-riga[hidden] {
  display: none;
}

.dating__profilo-meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.dating__profilo-membro {
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--testo-attenuato);
}

/* CORPO: l'unica parte che scorre (flex: prende lo spazio che lascia la CTA). */
.dating__profilo-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--spazio-3) var(--spazio-4) var(--spazio-4);
}

/* RIGA DEI BADGE: intento (dal Radar) e stato "Impegnato". */
.dating__profilo-badge-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-1);
}

.dating__profilo-sezione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  margin: 0;
}

/* `display: flex` vincerebbe sullo stile di sistema di `[hidden]`: la sezione
   di un profilo senza dati (bio, interessi, dettagli, gusti) deve sparire. */
.dating__profilo-sezione[hidden] {
  display: none;
}

/* Badge d'intenzione nella testata della scheda: pillola della card, a filo del
   nome e nascosta quando il profilo non ne ha uno. */
.dating__profilo-badge {
  align-self: flex-start;
  margin-top: 2px;
}

.dating__profilo-badge[hidden] {
  display: none;
}

.dating__profilo-etichetta {
  margin: 0;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-attenuato);
}

.dating__profilo-testo {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--testo-secondario);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* TAG degli hobby: pillole che vanno a capo. Il testo arriva dal campo libero
   del profilo (`hobby_interessi`), quindi nessun tag e' scritto nel CSS. */
.dating__profilo-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dating__profilo-tag-voce {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--spazio-2);
  font-size: 12px;
  line-height: 16px;
  color: var(--testo);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  overflow-wrap: anywhere;
}

/* SCHEDE di "Dettagli" (lavoro, disponibilita') e CARD VERTICALI di "Gusti":
   una voce per blocco, sfondo scuro. La coppia `dt`/`dd` resta quella prodotta
   da `riempiElencoProfilo` (etichetta sopra, valore sotto): l'etichetta chiude
   in alto la card, il valore la chiude in basso, e due voci consecutive restano
   separate dal margine dell'etichetta. */
#dating-profilo-sezione-dettagli .dating__profilo-elenco,
#dating-profilo-sezione-gusti .dating__profilo-elenco {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#dating-profilo-sezione-dettagli .profilo-scheda__voce-chiave,
#dating-profilo-sezione-gusti .profilo-scheda__voce-chiave {
  margin-top: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-3) 0;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--card-bg);
  border: var(--bordo-sottile) solid var(--card-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

#dating-profilo-sezione-dettagli .profilo-scheda__voce-valore,
#dating-profilo-sezione-gusti .profilo-scheda__voce-valore {
  padding: 0 var(--spazio-3) var(--spazio-2);
  background: var(--card-bg);
  border: var(--bordo-sottile) solid var(--card-border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  overflow-wrap: anywhere;
}

/* Intestazione della galleria: etichetta a sinistra, contatore a destra. */
.dating__profilo-intestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-2);
}

.dating__profilo-conteggio {
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  color: var(--testo-attenuato);
}

/* GRIGLIA a LARGHEZZA FISSA: tre colonne di celle quadrate (massimo 8 foto,
   nessun box "+N altre"). */
.dating__profilo-galleria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spazio-2);
}

.dating__profilo-foto {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
}

.dating__profilo-foto:focus-visible {
  outline: var(--bordo-sottile) solid var(--accento-viola);
  outline-offset: 2px;
}

.dating__profilo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PIEDE: la CTA e' la BARRA FISSA in fondo (05/11/2026). Il piede non sta piu'
   dentro lo scorrimento: e' un fratello del corpo, quindi resta sempre visibile
   senza `sticky` e senza scorrere sotto il contenuto. */
.dating__profilo-piede {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  flex: none;
  padding: var(--spazio-3) var(--spazio-4);
  border-top: var(--bordo-sottile) solid var(--card-border);
  background: inherit;
}

.dating__profilo-piede[hidden] {
  display: none;
}

.dating__profilo-nota {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
  text-align: center;
}

/* `emptyState`: card CENTRATA (colonna, gap 4, padding 32/24, raggio 20) con
   l'icona grande in cima; i testi sono centrati come nell'APK. La card e' la
   "scheda interna" della pagina: `width/max-width: 100%` + `box-sizing:
   border-box` + `margin: 0 auto` la tengono DENTRO lo schermo (mai un bordo
   fuori a destra), anche quando il pager e' al minimo della sua larghezza. */
.dating__vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  gap: var(--spazio-1);
  padding: var(--spazio-6) var(--spazio-5);
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
  text-align: center;
}

/* `emptyIcon`: 36/42 (cerchio 36). Il globo e' disegnato in CSS (cerchio +
   meridiano + equatore) e NON con un `<svg>` inline: creare elementi SVG
   richiede una stringa con il namespace di W3C, cioe' un host esterno in un
   modulo del guscio (guardia `test-apple-pwa.mjs`, sezione F). Nessun margine:
   la distanza dal titolo e' il `gap` della card (`emptyState` ha `gap` 4 e
   l'icona non ha margine). `currentColor` lo tinge. */
.dating__vuoto-icona {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border: var(--bordo-sottile) solid currentColor;
  border-radius: 50%;
  color: var(--accento-ciano);
}

.dating__vuoto-icona::before,
.dating__vuoto-icona::after {
  content: '';
  position: absolute;
  border: 0 solid currentColor;
}

/* Meridiano: ellisse verticale al centro. */
.dating__vuoto-icona::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 40%;
  transform: translateX(-50%);
  border-right-width: var(--bordo-sottile);
  border-left-width: var(--bordo-sottile);
  border-radius: 50%;
}

/* Equatore: una riga orizzontale. */
.dating__vuoto-icona::after {
  top: 50%;
  left: 0;
  right: 0;
  border-top-width: var(--bordo-sottile);
}

/* `emptyTitle`: 14/19 peso 800; `emptyText`: 13/18 TEXT_SECONDARY. */
.dating__vuoto-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 14px;
  line-height: 19px;
  font-weight: 800;
  color: var(--testo);
}

.dating__vuoto-testo {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}


.dating__composer {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  overflow: auto;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--bg-stop-alto);
  color: var(--testo);
}

.dating__composer::backdrop {
  background: var(--velo-scuro);
}

.dating__composer-form {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  padding: var(--spazio-4);
}

.dating__composer-testata,
.dating__composer-piede {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
}

.dating__composer-testata {
  justify-content: space-between;
}

.dating__composer-piede {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dating__composer-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 17px;
  line-height: 23px;
  font-weight: 700;
  color: var(--testo);
}

.dating__composer-chiudi {
  appearance: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  cursor: pointer;
}

.dating__composer-nome {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.dating__composer-distanza,
.dating__composer-etichetta {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-secondario);
}

.dating__composer-preset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.dating__preset {
  appearance: none;
  padding: 6px 10px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 12px;
  line-height: 17px;
  text-align: left;
  cursor: pointer;
}

.dating__composer-campo {
  width: 100%;
  min-height: 88px;
  padding: 11px 12px;
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: vertical;
}

.dating__composer-contatore {
  margin-right: auto;
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-attenuato);
}

/* --- Dating: filtri del canale (genere, eta', distanza) ------------------- */
/* PARITA' CON LA MODALE DELL'APK: pillola d'apertura sotto il conteggio,
   foglio con chip di genere, due stepper d'eta' e distanza. Nessun colore
   scritto a mano: chip = --chip-bg/--chip-border e, da attivi,
   --chip-selected-*; il bordo della pillola e' quello di `refreshButton`
   (--radar-aggiorna-*), la tinta del testo attivo e' --accento-ciano. */
.dating__filtri {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  width: 100%;
  min-height: 44px; /* area di tocco minima iOS */
  margin-top: var(--spazio-2);
  padding: 10px 14px;
  border: var(--bordo-sottile) solid var(--radar-aggiorna-bordo);
  border-radius: var(--raggio-pillola);
  background: var(--radar-aggiorna-sfondo);
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.dating__filtri-icona,
.dating__filtri-freccia {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dating__filtri-icona {
  color: var(--accento-ciano);
}

.dating__filtri-freccia {
  margin-left: auto;
  opacity: 0.7;
}

/* `aria-pressed`/`.dating__filtri--attivo`: la pillola si accende solo quando
   un filtro RESTRINGE davvero il pool (non basta il raggio del canale). */
.dating__filtri--attivo {
  border-color: var(--tinta-ciano-bordo);
}

.dating__filtri-testo {
  flex: 0 0 auto;
  font-weight: var(--peso-forte);
}

.dating__filtri-riepilogo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--testo-secondario);
  font-size: 12px;
  line-height: 17px;
}

.dating__filtri--attivo .dating__filtri-riepilogo {
  color: var(--accento-ciano);
}

/* Il foglio riusa `.dating__composer` (dialog, backdrop, testata, ✕): qui solo
   la larghezza e il corpo a colonna. */
.dating__filtri-foglio {
  width: min(460px, calc(100vw - 32px));
}

.dating__filtri-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
}

.dating__filtri-intestazione {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dating__filtri-sottotitolo,
.dating__filtri-nota {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--testo-secondario);
}

.dating__filtri-etichetta {
  margin: var(--spazio-2) 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--testo-attenuato);
}

.dating__filtri-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.dating__filtri-chip {
  appearance: none;
  min-height: 36px;
  padding: 7px 12px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.dating__filtri-chip--attivo {
  background: var(--chip-selected-bg);
  border-color: var(--chip-selected-border);
  font-weight: var(--peso-forte);
}

.dating__filtri-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-3);
}

.dating__filtri-stepper {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dating__filtri-stepper-etichetta {
  font-size: 12px;
  line-height: 16px;
  color: var(--testo-attenuato);
}

.dating__filtri-stepper-controlli {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
}

.dating__filtri-passo {
  appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--testo);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.dating__filtri-passo[disabled] {
  opacity: 0.45;
  cursor: default;
}

.dating__filtri-valore {
  flex: 1 1 auto;
  min-width: 56px;
  font-family: var(--font-titoli);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--testo);
}

.dating__filtri-piede {
  display: flex;
  gap: var(--spazio-2);
  margin-top: var(--spazio-1);
}

.dating__filtri-piede .pulsante {
  flex: 1 1 0;
}

/* --- Diagnostica ---------------------------------------------------------- */
.debug__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.debug__riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-2) 0;
  border-top: var(--bordo-sottile) solid var(--card-border-soft);
  font-size: 12px;
  line-height: 17px;
}

.debug__riga:first-child {
  border-top: 0;
}

.debug__etichetta {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--testo-secondario);
}

.debug__valore {
  flex: none;
  max-width: 52%;
  overflow: hidden;
  color: var(--testo);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   GATE DEL PROFILO (js/profilo-obbligatorio.js)
   Dialogo BLOCCANTE: `showModal()` blocca il resto della pagina e lo sfondo non
   e' cliccabile, quindi non serve (e non deve esistere) un click-fuori. Il
   `::backdrop` e' lo stesso velo delle altre modali: la PWA resta riconoscibile.
   Gli asterischi sono rossi SOLO quando il campo e' mancante (`[data-mancante]`
   lo scrive il modulo): un asterisco sempre acceso sarebbe rumore.
   --------------------------------------------------------------------------- */
.onboarding {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(calc(100% - var(--spazio-4)), 460px);
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--bordo-sottile) solid var(--card-border);
  border-radius: var(--raggio-card);
  background: var(--bg-stop-alto);
  color: var(--testo);
}

.onboarding::backdrop {
  background: var(--velo-scuro);
}

.onboarding[open] {
  display: block;
}

.onboarding__interno {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 92vh;
  max-height: 92dvh;
}

.onboarding__testata {
  display: grid;
  gap: var(--spazio-1);
  padding: var(--spazio-4) var(--spazio-4) var(--spazio-2);
  border-bottom: var(--bordo-sottile) solid var(--card-border-soft);
}

.onboarding__titolo {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--peso-forte);
  color: var(--testo);
}

.onboarding__intro {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 17px;
  color: var(--testo-attenuato);
}

.onboarding__form {
  display: grid;
  gap: var(--spazio-3);
  align-content: start;
  padding: var(--spazio-3) var(--spazio-4) var(--spazio-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.onboarding__campo {
  display: grid;
  gap: var(--spazio-1);
  min-width: 0;
}

.onboarding__etichetta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--peso-forte);
  color: var(--testo-secondario);
}

.onboarding__asterisco {
  color: var(--testo-errore);
  font-weight: var(--peso-forte);
}

.onboarding__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--testo);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 22px;
}

.onboarding__input:focus {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 1px;
}

.onboarding__campo[data-mancante='si'] .onboarding__input {
  border-color: var(--warning-border);
}

.onboarding__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.onboarding__scelta {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.onboarding__scelta input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.onboarding__scelta span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: var(--bordo-sottile) solid var(--chip-border);
  border-radius: var(--raggio-pillola);
  background: var(--chip-bg);
  color: var(--testo-secondario);
  font-size: var(--dimensione-testo);
  line-height: 18px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.onboarding__scelta input:checked + span {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--testo);
}

.onboarding__scelta input:focus-visible + span {
  outline: 2px solid var(--chip-selected-border);
  outline-offset: 1px;
}

.onboarding__campo[data-mancante='si'] .onboarding__scelte {
  padding: 4px;
  border: var(--bordo-sottile) solid var(--warning-border);
  border-radius: 16px;
}

.onboarding__hint {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 16px;
  color: var(--testo-attenuato);
}

.onboarding__suggerimenti {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
  list-style: none;
  border: var(--bordo-sottile) solid var(--card-border-soft);
  border-radius: 14px;
  background: var(--input-opzione-bg);
}

.onboarding__suggerimenti[hidden] {
  display: none;
}

/* Errore sotto il campo comune della modale ("Seleziona una citta'
   dall'elenco proposto"): compare alla perdita del focus e al salvataggio. */
.onboarding__errore {
  margin: 0;
  font-size: var(--dimensione-micro);
  line-height: 16px;
  color: var(--testo-errore);
}

.onboarding__errore[hidden] {
  display: none;
}

.onboarding__suggerimento {
  appearance: none;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--testo-secondario);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.onboarding__suggerimento:hover,
.onboarding__suggerimento:focus-visible {
  background: var(--chip-bg);
  color: var(--testo);
  outline: none;
}

.onboarding__feedback {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--testo-secondario);
}

.onboarding__feedback[hidden] {
  display: none;
}

.onboarding__feedback[data-tono='errore'] {
  color: var(--testo-errore);
}

.onboarding__piede {
  display: grid;
  gap: var(--spazio-2);
  margin-top: var(--spazio-1);
}

.onboarding__salva {
  appearance: none;
  min-height: 50px;
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--chip-selected-border);
  border-radius: var(--raggio-pillola);
  background: var(--accento-viola);
  color: var(--testo);
  font: inherit;
  font-size: var(--dimensione-testo);
  line-height: 22px;
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.onboarding__salva:disabled {
  opacity: 0.6;
  cursor: default;
}

.onboarding__esci {
  appearance: none;
  min-height: 44px;
  padding: var(--spazio-2);
  border: 0;
  background: none;
  color: var(--testo-attenuato);
  font: inherit;
  font-size: var(--dimensione-micro);
  line-height: 18px;
  text-decoration: underline;
  cursor: pointer;
}

.onboarding__esci:hover {
  color: var(--testo-secondario);
}

/* Con la modale aperta la pagina sotto non scorre (iOS ignora il blocco del
   dialogo nativo: `showModal` isola i tocchi, non lo scroll del documento). */
body[data-onboarding='aperto'] {
  overflow: hidden;
}

/* =============================================================================
   TRASCINA IN GIU' PER AGGIORNARE (pull-to-refresh) - `js/pull-to-refresh.js`
   -----------------------------------------------------------------------------
   L'indicatore lo crea il modulo (`div.pull-indicatore` con dentro
   `span.pull-indicatore__giro`) e lo appende al `body`: e' FUORI dal pannello
   della scheda, quindi non entra ne' nella griglia di `.vista` ne' nello scroll
   (nessuno spostamento del contenuto, nessuna riga in piu').

   PERCHE' `fixed` E NON `absolute`: `absolute` avrebbe bisogno di un antenato
   posizionato, cioe' di cambiare il `position` di `.vista` — e i pannelli
   contengono gia' elementi `position: absolute` che si appoggiano ad antenati
   piu' in alto (hero del Radar, veli delle mappe). Il `top` lo scrive il JS
   misurando il bordo superiore del contenitore, la `left: 50%` e il margine
   negativo lo centrano senza usare `transform` (che il JS usa per la scala).

   COLORE: solo token di `tokens.css` (regola V7), nessun esadecimale qui.
   ============================================================================= */
.pull-indicatore {
  position: fixed;
  left: 50%;
  margin-left: -17px; /* meta' dei 34px: centrato senza toccare `transform` */
  z-index: 45; /* sopra le schede, sotto le modali (`dialog` sta piu' in alto) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--raggio-pillola);
  border: var(--bordo-sottile) solid var(--card-border);
  background: var(--chat-intestazione-sfondo);
  box-shadow: 0 6px 18px var(--card-ombra);
  /* Nessun tocco: l'indicatore non deve mai intercettare il dito. */
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--durata-veloce) linear,
    transform var(--durata-veloce) ease-out;
}

/* La rotellina: arco aperto in cima (si capisce il verso del gesto). */
.pull-indicatore__giro {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--testo-attenuato);
  border-top-color: var(--accento-ciano);
  transition: transform var(--durata-veloce) ease-out;
}

/* Soglia raggiunta: la rotellina si "chiude" (l'utente ha capito che puo'
   lasciare) e prende la tinta di marca. */
.pull-indicatore--pronto {
  border-color: var(--tinta-ciano-bordo);
}

.pull-indicatore--pronto .pull-indicatore__giro {
  border-color: var(--accento-ciano);
  border-top-color: var(--tinta-ciano-sfondo);
  transform: rotate(180deg);
}

/* Ricarica in corso: gira finche' la promessa non e' risolta (nessun timer). */
.pull-indicatore--carica .pull-indicatore__giro {
  border-color: var(--tinta-viola-bordo);
  border-top-color: var(--accento-ciano);
  animation: pull-indicatore-giro 820ms linear infinite;
}

@keyframes pull-indicatore-giro {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Chi ha chiesto meno animazioni vede la rotellina ferma: il gesto resta
   identico, cambia solo il riscontro visivo. */
@media (prefers-reduced-motion: reduce) {
  .pull-indicatore {
    transition: none;
  }

  .pull-indicatore--carica .pull-indicatore__giro {
    animation: none;
  }
}

/* =============================================================================
   RADAR IN VETRO — il design system "Radar Connect" sulla scheda Radar
   (guscio v88, 03/11/2026 — D40)
   -----------------------------------------------------------------------------
   La scheda Radar adotta il linguaggio della Home (D38): superfici in vetro
   (`.glass-card`), pillole (`.glass-pill`), telemetria in `--font-mono`. Le
   regole qui sotto sono RIFINITURE: la geometria (misure, ordine dei blocchi,
   distanze dei marker) resta quella della sezione "Radar" piu' in alto nel
   foglio, che le guardie legge per prima — qui non si sposta un blocco, si
   cambia la superficie.
   NESSUN colore nuovo (V7): solo token `--rc-*` di tokens.css. `backdrop-filter`
   ha sempre la forma `-webkit-`: la PWA gira su WebKit (iOS).
   ============================================================================= */

/* --- Card dei controlli (visibilita' + pensiero del giorno) ---------------- */
.radar__controlli {
  /* La superficie (vetro scuro, bordo viola al 16%, riflesso) la porta
     `.glass-card` nel markup; qui il raggio del design system. */
  border-radius: var(--rc-raggio-vetro);
}

/* Etichette di sezione e valori di stato: mono spaziato, cifre tabulari.
   Sono telemetria: un numero che cambia non deve far ballare la riga. */
.radar__sezione-etichetta,
.radar__stato li > span:first-child {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--rc-testo-tenue);
}

.radar__valore {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rc-testo-tenue);
}

/* Riga della posizione (coordinate GPS + ora dell'ultimo fix): mono. */
.radar__posizione {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rc-testo-tenue);
}

/* Campo del pensiero del giorno: vetro, non il campo del tema indaco. */
.radar__umore {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo-pillola);
}

.radar__umore:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 1px;
}

/* Bottone d'azione del campo: gradiente viola -> rosa (la scala della FAB). */
.radar__umore-salva {
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  box-shadow: 0 6px 16px var(--rc-ombra);
}

/* Chip di badge e durata: pillole di vetro; scelta = accento viola del design. */
.radar__chip {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-testo-tenue);
}

.radar__chip[data-scelto='si'] {
  border-color: var(--rc-vetro-bordo-acceso);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
}

/* Il "?" della modale dei badge resta un cerchio di vetro. */
.radar__aiuto {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
}

/* Countdown della visibilita' residua: telemetria ciano. */
.radar__countdown {
  color: var(--rc-ciano);
}

/* Comandi pillola: Mostra mappa / Tieni acceso lo schermo / Aggiorna / Riprova. */
.radar__pulsante {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--testo);
}

.radar__pulsante--aggiorna {
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
}

/* Interruttore di visibilita': traccia di vetro, acceso sul viola del design. */
.radar__interruttore {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
}

.radar__interruttore[data-attivo='si'] {
  border-color: var(--rc-vetro-bordo-acceso);
  background: var(--rc-viola);
}

/* Stato vuoto: stessa superficie in vetro delle altre card. */
.radar__vuoto {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo);
}

.radar__vuoto-icona {
  color: var(--rc-ciano);
}



/* --- Tessere dei profili vicini ------------------------------------------- */
/* `.glass-card` arriva dal markup (`js/radar.js`): qui la resa al tocco e il
   raggio del design system, nessun colore di superficie duplicato. */
.radar__persona {
  border-radius: var(--rc-raggio-vetro);
  transition: transform var(--durata-veloce) ease, border-color var(--durata-veloce) ease;
}

.radar__persona:active {
  transform: scale(0.99);
  border-color: var(--rc-vetro-bordo-acceso);
}

/* Distanza (`glass-pill glass-pill--ciano mono`): solo le cifre tabulari. */
.radar__distanza {
  font-variant-numeric: tabular-nums;
}

/* Il pensiero del giorno nelle tessere resta leggibile sul vetro. */
.radar__descrizione {
  color: var(--rc-testo-tenue);
}

/* --- Pin a goccia dei profili nello scope --------------------------------- */
/* La stessa forma dei pin della Home (D39): testa tonda con la foto (o
   l'iniziale in mono) e coda appuntita SUL punto calcolato da `posizioneMarker`.
   La tinta la decide la prossimita' (`data-tono`, scritto da `tonoProssimita`):
   ciano entro 1 km, rosa entro 2, viola oltre. Solo token: nessun colore qui. */
.radar-scope__marker {
  width: 32px;
  height: 40px;
  border: 0;
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-start;
  /* La PUNTA della goccia cade sul punto (come `.home__pin`). */
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 8px var(--rc-ombra));
}

.radar-scope__marker[data-tono='vicino'] {
  --pin-tinta: var(--rc-ciano);
  --pin-alone: var(--rc-alone-ciano);
}

.radar-scope__marker[data-tono='medio'] {
  --pin-tinta: var(--rc-rosa);
  --pin-alone: var(--rc-alone-rosa);
}

.radar-scope__marker[data-tono='lontano'] {
  --pin-tinta: var(--rc-viola);
  --pin-alone: var(--rc-alone-viola);
}

.radar-scope__marker-core {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--pin-tinta, var(--rc-ciano));
  background: var(--rc-vetro-sfondo);
  box-shadow: 0 0 0 3px var(--pin-alone, var(--rc-alone-ciano));
}

/* Coda della goccia: un quadratino ruotato di 45 gradi sotto la testa. */
.radar-scope__marker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: var(--pin-tinta, var(--rc-ciano));
  transform: rotate(45deg);
}

/* Iniziale del pin (senza foto): mono, con la tinta della prossimita'. */
.radar-scope__marker-iniziale {
  color: var(--pin-tinta, var(--rc-ciano));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}


/* =============================================================================
   CUCITURA IN CIMA ALLA PAGINA: la fascia della barra di stato non si vede
   (guscio v107, 04/11/2026 - D58)
   -----------------------------------------------------------------------------
   Con la barra di stato "default" (v106/D57) iOS dipinge i 62px in cima con lo
   sfondo della RADICE (`html`)/`body` in `app.css`: `--bg-base`, tinta PIATTA) e
   la pagina comincia subito sotto. Nei primi ~140px pero' dipingono cose diverse
   a seconda della scheda:
     - le schede TRASPARENTI (Accesso, Radar, Chat, Segnali) lasciano vedere
       `.sfondo`: alone magenta a 88% 6%, piu' la discesa del fondo a tre stop;
     - Home e Profilo hanno un fondo LORO, OPACO, con un alone viola che entra
       dal bordo superiore (`circle at 12% 0%` e `circle at 18% -6%`).
   Risultato: fascia piatta sopra, bagliore piu' chiaro sotto, con una cucitura
   netta a 62px dall'alto.
   RIMEDIO: un VELO alto 140px che parte ESATTAMENTE dal colore della fascia
   (`--bg-base`) e sfuma nel contenuto. Sta sopra i bagliori e sotto i contenuti:
     - `.sfondo::before` copre le schede trasparenti: `.sfondo` e' gia' uno
       stacking context (`position: fixed; z-index: -1`), quindi il velo dipinge
       sopra il suo gradiente e sotto `body`;
     - `.vista[data-pannello='home']::before` (e Profilo) coprono i due pannelli
       col fondo proprio: senza un livello DENTRO il loro stacking context il
       velo resterebbe dietro un fondo opaco, invisibile. Per questo Home riceve
       `isolation: isolate` (Profilo lo aveva gia' dalla v99): cosi' `z-index:
       -1` dipinge sopra il fondo del pannello e SOTTO il suo testo.
   `position: fixed` e non `absolute`: il pannello scorre, la fascia no — il velo
   resta ancorato alla cima del viewport, come il fondo che copre.
   AMBITO, deliberatamente stretto: solo iOS (`@supports (-webkit-touch-callout:
   none)`, che solo WebKit riconosce), solo PWA INSTALLATA (`display-mode:
   standalone`) e solo con la barra "default", cioe' NON con
   `html[data-viewport-troncato='si']` (icone installate prima della v106, D57:
   li' il viewport e' troncato e la fascia la dipinge ancora iOS). Chrome
   Android, desktop, la scheda di Safari e le icone vecchie restano identici al
   pixel. Nessun colore nuovo: solo `--bg-base`.
   ============================================================================= */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    /* 1. IL VELO (sopra i bagliori, sotto i contenuti). */
    html:not([data-viewport-troncato='si']) .sfondo::before,
    html:not([data-viewport-troncato='si']) .vista[data-pannello='home']::before,
    html:not([data-viewport-troncato='si']) .vista[data-pannello='profilo']::before {
      content: '';
      position: fixed;
      inset: 0 0 auto 0;
      height: 140px;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(to bottom, var(--bg-base) 0, transparent 100%);
    }

    /* 2. LO STACKING CONTEXT dei pannelli col fondo proprio: senza, un
       `z-index: -1` finirebbe DIETRO il loro gradiente (invisibile). Profilo ha
       gia' `isolation: isolate` nella sua regola di base; qui serve la Home. */
    html:not([data-viewport-troncato='si']) .vista[data-pannello='home'] {
      isolation: isolate;
    }
  }
}


/* =============================================================================
   TASTIERA APERTA — la barra in basso RESTA e si alza sopra la tastiera
   (guscio v82, 30/10/2026; sostituisce la v79, che la nascondeva)
   Segnalazione dal vivo (Safari iOS, Chat e Modifica Profilo): con la tastiera
   aperta restava una FASCIA VUOTA ("spazio viola") fra il form e la tastiera e
   il testo digitato finiva coperto.
   La v79 aveva risposto togliendo di mezzo la barra (`display: none`) e la sua
   prenotazione di spazio: la fascia spariva, ma la navigazione diventava
   IRRAGGIUNGIBILE mentre si scriveva (nessun modo di passare al Profilo senza
   chiudere la tastiera). La barra e' intoccabile, quindi:
     1) la barra si ALZA dell'ingombro misurato della tastiera
        (`--tastiera-altezza`, scritto da `js/viewport-stabilizza.js`:
         fondo del layout - cima visibile - altezza visibile) e si appoggia al
        fondo dell'area che si vede: sempre visibile, sempre cliccabile;
     2) `.vista` CONTINUA a prenotare lo spazio della barra
        (`--altezza-barra` + safe area), perche' la barra e' di nuovo li' sopra:
        senza prenotazione l'ultimo campo resterebbe dietro le voci;
     3) il pannello della chat prenota la sola barra: il composer sta sopra le
        voci, non sotto.
   Nessun colore nuovo, nessuna quota fissa: a tastiera chiusa `--tastiera-altezza`
   vale `0px` e la capsula torna al suo distacco (`--barra-aria`).
   Il blocco sta in FONDO al foglio di proposito: le regole valgono per
   specificita' (attributo + classe), ma le guardie leggono la PRIMA regola di un
   selettore (`regola('.vista')` = `indexOf`) e devono continuare a trovare le
   dichiarazioni di base.
   ============================================================================= */
html[data-tastiera='si'] .barra-basso {
  /* MAI spenta (nessun `display` a zero) e mai traslata con `transform`: la
     capsula si sposta SOLO in verticale, quanto basta per stare sopra la
     tastiera, tenendo il suo distacco (`--barra-aria`, guscio v93/D46). */
  bottom: calc(var(--tastiera-altezza, 0px) + var(--barra-aria));
}

html[data-tastiera='si'] .vista {
  padding-bottom: calc(var(--barra-ingombro) + var(--spazio-4));
}

/* Il pannello della chat prenota la barra e nient'altro: il composer tocca la
   barra, che a sua volta tocca la tastiera. */
html[data-tastiera='si'] .vista[data-pannello='chat'] {
  padding-bottom: calc(var(--barra-ingombro) + var(--bordo-sottile));
}

/* =============================================================================
   MENTRE SI SCRIVE LA BARRA SI NASCONDE (guscio v88, 03/11/2026 — D41)
   -----------------------------------------------------------------------------
   La v82 (sopra) risolveva lo "spazio viola" alzando la barra sopra la
   tastiera. Su Safari iOS (PWA) il difetto visto dal vivo e' un altro: appena
   un campo di testo prende il focus, la barra ALZATA si infila nella fascia
   fra il campo e la tastiera, ruba altezza alla viewport utile e copre il
   contenuto che si sta scrivendo.

   Regola nuova, opposta e NON ambigua: finche' c'e' un campo di testo con il
   focus la barra in basso NON si vede (`display: none`); al `focusout` torna
   esattamente com'era. Il segnale e' UNO SOLO: `html[data-digitazione='si']`,
   scritto da `js/viewport-stabilizza.js` nei suoi gestori `focusin`/`focusout`
   (gli stessi che gia' portano il campo in vista). Non e' `data-tastiera`:
   quello dice "la finestra visiva e' piu' bassa" e puo' essere `si` anche
   senza tastiera (documento spostato), e in quel caso la barra deve restare.

   Cosa NON cambia, di proposito: le prenotazioni di spazio di `.vista`
   (`--altezza-barra` + safe area) restano quelle di sempre — la barra sparisce,
   il contenuto non si muove di un pixel — e le regole della v82 restano nel
   foglio come ripiego per una tastiera aperta senza un campo in focus.
   L'attributo lo scrive solo `js/viewport-stabilizza.js`; `js/app.js` non
   tocca la barra (guardia `test:apple:shell` H22zh/H22zi).
   ============================================================================= */
/* `!important` (guscio v93, D46): la capsula e' `display: flex` per costruzione e
   nessuna regola - presente o futura, anche piu' specifica - deve poterla
   rimettere a schermo mentre si scrive. Al `focusout` (o alla tastiera chiusa
   col tasto indietro/gesture, v. `tastieraRinchiusa`) l'attributo torna `no` e
   la capsula ricompare identica. */
html[data-digitazione='si'] .barra-basso {
  display: none !important;
}

/* Con la barra fuori dal layout, il pannello NON deve piu' prenotarne lo
   spazio: senza queste due regole resterebbe una fascia vuota alta quanto la
   barra (58px) fra il campo e la tastiera — lo stesso difetto che il D35
   combatteva, solo vuoto invece che coperto. Le regole valgono per
   specificita' (attributo + classe) e non toccano quelle di base, che le
   guardie leggono per prime. */
html[data-digitazione='si'] .vista {
  padding-bottom: calc(var(--safe-bottom-reale) + var(--spazio-4));
}

html[data-digitazione='si'] .vista[data-pannello='chat'] {
  padding-bottom: var(--bordo-sottile);
}

/* =============================================================================
   CAPSULA A OTTO VOCI: DISTACCO iOS E PULSANTE MAPPA (guscio v95, 03/11/2026 - D49)
   -----------------------------------------------------------------------------
   Due difetti visti dal vivo, due regole, nessuna modifica alla geometria
   condivisa (la capsula resta `position: fixed` con `bottom: calc(--barra-aria +
   env(safe-area-inset-bottom))` nella regola di base, che le guardie leggono per
   prima).

   1) SAFARI iOS — la capsula risultava schiacciata sul bordo inferiore.
      `env(safe-area-inset-bottom)` vale 0 nella scheda del browser e nella barra
      degli strumenti compatta, quindi restava il solo `--barra-aria` (10px): il
      vetro toccava quasi il filo dello schermo e le etichette sembravano
      tagliate. Il primo rimedio (D49) sommava `--spazio-vetro-distacco` (6px,
      tokens.css): sul telefono con home indicator il difetto si e' pero'
      ROVESCIATO — i 10px di `--barra-aria` si sommavano ai 34px di safe area e la
      capsula galleggiava 50px sopra il bordo, con la banda dei gesti vuota sotto
      (segnalazione del 03/11/2026). La regola di base del blocco `@supports` e'
      quindi `max(safe area, 6px)`, senza `--barra-aria` (v96, D50): e' la
      REGOLA NORMALE ripristinata nella v106 (D57) dopo il passaggio della v97 ai
      `12px` fissi, che apparteneva al mondo del viewport TRONCATO (v. "RISERVA",
      per le icone installate prima della v106).
      Il blocco e' dentro `@supports (-webkit-touch-callout: none)`, condizione
      che SOLO WebKit/iOS riconosce: su Chrome Android il foglio resta quello di
      prima, identico al pixel (nessun altro `bottom` viene riscritto).
      Niente `margin-bottom` (vietato dalla guardia H31: la capsula si sposta
      solo con `bottom`) e niente padding interno (cambierebbe l'altezza della
      capsula rispetto a `--barra-ingombro`).

   2) PULSANTE FLUTTUANTE "MAPPA" mentre si scrive — il FAB viola/magenta del
      Radar (`#radar-fab-mappa`, classe `.radar__fab`) restava sopra la tastiera
      coprendo la tessera che si stava leggendo. Il segnale e' UNO SOLO, lo
      stesso della capsula: `html[data-digitazione='si']`, scritto da
      `js/viewport-stabilizza.js` su `focusin`/`focusout`. Al `focusout` (o alla
      tastiera chiusa col tasto indietro/gesture) l'attributo torna `no` e il
      pulsante ricompare insieme alla capsula, senza alcun codice in piu'.
   ============================================================================= */
@supports (-webkit-touch-callout: none) {
  /* POSIZIONE SU WEBKIT — REGOLA NORMALE (guscio v106, D57): la capsula si
     appoggia SOPRA la banda dei gesti, `max(env(safe-area-inset-bottom), 6px)`
     (v96/D50), e non piu' `12px` fissi (v97).
     PERCHE' TORNA `max(...)`: la v97 era la risposta al viewport TRONCATO
     (`innerHeight` 812 contro `screen.height` 874), dove il fondo della pagina
     non era il fondo dello schermo e la capsula andava tenuta a filo. Dalla
     v106 la barra di stato iOS e' "default" (index.html): il layout torna alto
     quanto lo schermo e `env(safe-area-inset-bottom)` vale di nuovo 34px, cioe'
     lo spazio VERO dell'indicatore home — i `12px` letterali lasciavano il vetro
     dentro quella banda (la "striscia scura" della segnalazione del 03/11/2026).
     L'inset inferiore non e' un distacco da sommare: e' l'ingombro in cui vive
     l'indicatore, e `max(..., 6px)` copre anche la scheda di Safari, dove
     l'inset vale 0. Su Chrome Android questo blocco e' falso da sempre: li'
     resta la geometria di base. */
  .barra-basso {
    bottom: max(env(safe-area-inset-bottom, 0px), var(--spazio-vetro-distacco)) !important;
  }

  /* RISERVA — ICONE INSTALLATE PRIMA DELLA v106 (`12px`, la v97).
     iOS REGISTRA lo stile della barra di stato nel collegamento alla Home: una
     icona aggiunta con `black-translucent` continua a troncare il layout
     viewport di 62px finche' l'app non viene REINSTALLATA (D57), e li' il fondo
     della pagina non e' il fondo dello schermo: la capsula va tenuta bassa, come
     nella v97. L'attributo lo scrive `js/viewport-guarigione.js` ed e' "si" solo
     su iOS installato, in verticale, con gap >= 40 **e**
     `env(safe-area-inset-top)` >= 40 (con la barra "default" l'inset superiore
     vale 0: nessun ripiego, si passa alla regola normale).
     Va PRIMA dell'eccezione tastiera: stessa specificita' (attributo + classe),
     quindi l'ordine decide, e la tastiera deve vincere. */
  html[data-viewport-troncato='si'] .barra-basso {
    bottom: 12px !important;
  }

  /* LA TASTIERA RESTA L'UNICA ECCEZIONE (v82/D35): quando la finestra visibile si
     abbassa la capsula sale sopra la tastiera col distacco di sempre
     (`--barra-aria`); qui la safe area NON si somma, perche' la tastiera copre
     proprio la banda dei gesti. Senza questo `!important` quello qui sopra
     vincerebbe e la capsula resterebbe dietro la tastiera (navigazione
     irraggiungibile mentre si scrive). */
  html[data-tastiera='si'] .barra-basso {
    bottom: calc(var(--tastiera-altezza, 0px) + var(--barra-aria)) !important;
  }
}

html[data-digitazione='si'] .radar__fab {
  display: none !important;
}


/* =============================================================================
   MAPPA GLOBALE IN VETRO — il design system "Radar Connect" sul modale 3 km
   (guscio v89, 03/11/2026 — D42)
   -----------------------------------------------------------------------------
   Il modale della Mappa Globale adotta lo stesso linguaggio della Home (D38) e
   della scheda Radar (D40): testata in `.glass-card`, controlli e legenda in
   `.glass-pill`, telemetria in `--font-mono`, pin a goccia.

   Come per D40 sono RIFINITURE: le regole di base (geometria del dialog, margini
   con la SAFE AREA, bersaglio da 44px della ✕, quota della legenda sopra
   l'attribuzione Google, `bottom` di elenco e scheda) restano dove sono, perche'
   le guardie leggono quelle per prime e perche' quel posizionamento e' stato
   conquistato con i difetti iOS del 30/10/2026. Qui si cambia la SUPERFICIE.

   Cosa NON si tocca (D42): la mappa resta `map.html` nell'iframe del ponte —
   posizioni, raggio 3 km, offuscamento 70-500 m, chiamate `poi.asp` e
   `fit`/`setCenter` sono di la'. Nessun colore letterale: solo token `--rc-*` e
   i token del tema; `backdrop-filter` sempre anche in forma `-webkit-` (WebKit).
   ============================================================================= */

/* --- 1. Testata e chiusura ------------------------------------------------ */
/* La superficie (vetro scuro, bordo viola al 16%, riflesso) la porta
   `.glass-card` nel markup; qui solo respiro e ombra da pannello flottante. */
.mappa-globale__testata.glass-card {
  gap: var(--spazio-3);
  padding-right: var(--spazio-2);
  box-shadow:
    0 16px 34px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

.mappa-globale__titolo {
  letter-spacing: -0.01em;
}

.mappa-globale__sottotitolo {
  color: var(--rc-testo-tenue);
}

/* La ✕ resta il bersaglio da 44px della regola di base: qui diventa un cerchio
   di vetro (`glass-pill` nel markup), con la tinta piena per restare leggibile
   sopra la mappa chiara. */
.mappa-globale__chiudi.glass-pill {
  padding: 0;
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--testo);
  box-shadow: 0 10px 22px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

.mappa-globale__chiudi.glass-pill:active {
  transform: scale(0.94);
  border-color: var(--rc-viola);
}

.mappa-globale__chiudi.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- 2. Controlli sovrapposti (Solo aperti / Elenco) ---------------------- */
.mappa-globale__controlli {
  gap: var(--spazio-2);
}

/* `.glass-pill` da' gia' vetro, bordo luminoso e raggio; qui il bersaglio comodo
   (38px), il testo da telemetria e la micro-transizione al tocco. */
.mappa-globale__pillola.glass-pill {
  min-height: 38px;
  padding: var(--spazio-2) var(--spazio-3);
  gap: var(--spazio-2);
  color: var(--testo);
  font-size: 11px;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 22px var(--rc-ombra);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease,
    box-shadow var(--durata-veloce) ease;
}

.mappa-globale__pillola.glass-pill:active {
  transform: scale(0.96);
  border-color: var(--rc-viola);
}

.mappa-globale__pillola.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Filtro acceso: la pillola si accende sul viola del design (non su un colore
   nuovo). La regola di base resta e questa la segue nella cascata. */
.mappa-globale__pillola[data-scelto='si'] {
  border-color: var(--rc-viola);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
  box-shadow:
    0 0 0 1px var(--rc-viola),
    0 10px 22px var(--rc-ombra);
}

/* Il conteggio "(N)": telemetria ciano in mono, cifre tabulari (non deve far
   ballare la pillola quando passa da (3) a (12)). */
.mappa-globale__pillola .mono {
  color: var(--rc-ciano);
  font-variant-numeric: tabular-nums;
}

/* La pillola "Cerco i locali qui intorno…": stesso vetro, testo attenuato. */
.mappa-globale__ricerca.glass-pill {
  padding: var(--spazio-1) var(--spazio-3);
  border-color: var(--rc-vetro-bordo-pillola);
  color: var(--rc-testo-tenue);
  font-size: 11px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px var(--rc-ombra);
}

/* --- 3. Legenda in basso -------------------------------------------------- */
/* Una capsula sola, centrata (il centraggio e' della regola di base), con piu'
   padding, divisori sottili e testo in mono: le tre voci non si sovrappongono
   ne' si tagliano, perche' ognuna tiene la sua colonna e non va a capo. */
.mappa-globale__legenda.glass-pill {
  gap: var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-4);
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo);
  box-shadow:
    0 14px 30px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

.mappa-globale__voce {
  gap: var(--spazio-1);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--rc-testo-tenue);
  white-space: nowrap;
}

/* Divisore verticale fra una voce e la successiva: separa senza aggiungere
   un bordo alla capsula. */
.mappa-globale__voce + .mappa-globale__voce {
  padding-left: var(--spazio-3);
  border-left: var(--bordo-sottile) solid var(--rc-vetro-bordo);
}

/* Il pallino della legenda diventa il PIN A GOCCIA della mappa e delle tessere
   (D39/D40): testa tonda, punta in basso a sinistra prima della rotazione. La
   TINTA resta quella dei marker veri (`--marker-persona|luogo|io`): la legenda
   deve dire il vero su cosa si vede sulla mappa. */
.mappa-globale__punto {
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 8px var(--rc-ombra);
}

/* --- 4. Superfici della mappa (elenco, scheda, righe, azioni) -------------- */
/* L'elenco e la scheda restano OPACHI (ci si legge sopra un elenco che scorre),
   ma con raggio e bordo del design system. */
.mappa-globale__elenco-foglio,
.mappa-globale__dettaglio {
  border-color: var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  box-shadow: 0 20px 40px var(--rc-ombra);
}

.mappa-globale__riga {
  border-color: var(--rc-vetro-bordo-pillola);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

.mappa-globale__riga:active {
  transform: scale(0.99);
  border-color: var(--rc-vetro-bordo-acceso);
}

.mappa-globale__riga:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 1px;
}

/* Le azioni della scheda (Indicazioni / Chiama / Sito / Chiudi) sono pillole di
   vetro, come i comandi del Radar. */
.mappa-globale__azione {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--testo);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

.mappa-globale__azione:active {
  transform: scale(0.97);
  border-color: var(--rc-viola);
}

.mappa-globale__azione:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* =============================================================================
   SUPPORTO E SICUREZZA IN VETRO (guscio v94 — Fase 3, 03/11/2026 — D48)
   -----------------------------------------------------------------------------
   La schermata "Supporto e Sicurezza" della Home adotta il linguaggio "Radar
   Connect" gia' in uso nella Dashboard (D38), nel Radar (D40), nella Mappa
   Globale (D42), nel Dating (D43), nei Segnali (D44) e nella Chat (D45):
   cinque superfici `.glass-card` (modulo staff, email, FAQ, documenti e
   sessione), capsule `.glass-pill` per i comandi, campi SCANALATI nel modulo,
   contatore in JetBrains Mono con cifre tabulari e righe legali con la freccia
   del design system.

   E' una rifinitura di SUPERFICIE: nessun id, nessuna `data-azione` e nessuna
   funzione di `js/supporto.js` cambia (modulo `contatta_staff.asp`, copia
   dell'email e pagina web di eliminazione restano quelli) e la gestione della
   tastiera iOS (`data-digitazione`, guscio v88/D41) non viene toccata: la
   textarea resta un `<textarea>` normale, quindi il viewport si comporta come
   prima.

   La card di PERICOLO della compliance Google Play (`#card-pericolo` con il
   modale `#profilo-elimina-modale`) vive nel Profilo e qui NON si duplica: in
   questa schermata la riga "Elimina account e dati" (stessa
   `data-azione="supporto-elimina"`, stessa pagina web) diventa una riga
   scarlatta dentro la card "Sessione e account".

   Palette: solo token `--rc-*` e i token del tema — nessun esadecimale e
   nessuna funzione colore scritta a mano (guardie D/E di Radar e PayPal); il
   `backdrop-filter` c'e' sempre anche in forma `-webkit-` (WebKit iOS).
   ============================================================================= */

/* --- 1. Testata: Indietro in pillola, stato in telemetria ------------------ */
#home-schermata-supporto .sotto__indietro.glass-pill {
  min-height: 36px;
  padding: 6px var(--spazio-3);
  border-color: var(--rc-vetro-bordo-pillola);
  color: var(--testo);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  box-shadow: 0 8px 18px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-supporto .sotto__indietro.glass-pill:active {
  transform: scale(0.95);
  border-color: var(--rc-viola);
  background: var(--rc-badge-info-sfondo);
}

#home-schermata-supporto .sotto__indietro.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Intestazione della card modulo: titolo a sinistra, pillola "24/7" a destra.
   Su schermi stretti la pillola va a capo invece di comprimere il titolo. */
#home-schermata-supporto .supporto__testata-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}

/* "24/7" non e' un'etichetta ma una misura: mono e cifre tabulari. */
#home-schermata-supporto .supporto__stato {
  flex: none;
  margin-left: auto;
  padding: 2px var(--spazio-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#home-schermata-supporto .sotto__intro {
  color: var(--rc-testo-tenue);
}

/* --- 2. Le cinque superfici in vetro --------------------------------------- */
/* `.sotto__card` (regola base, piu' avanti nel foglio) vince su `.glass-card`:
   qui il vetro si ri-dichiara con lo scope della schermata, cosi' bordo viola
   traslucido, riflesso di 1px e blur valgono davvero anche su queste card. */
#home-schermata-supporto .supporto__card.glass-card {
  position: relative;
  gap: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  box-shadow: 0 18px 38px -26px var(--rc-ombra);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

#home-schermata-supporto .supporto__card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--rc-vetro-riflesso), transparent);
  pointer-events: none;
}

#home-schermata-supporto .sotto__card-titolo {
  font-weight: 800;
  letter-spacing: 0.01em;
}

#home-schermata-supporto .sotto__testo,
#home-schermata-supporto .sotto__nota {
  color: var(--rc-testo-tenue);
}

/* --- 3. Modulo staff: campi scanalati e contatore in mono ------------------ */
/* La "scanalatura" e' un fondo del colore della notte piu' un'ombra interna:
   il campo sembra incassato nel vetro, senza bordi spessi. */
#home-schermata-supporto .supporto__form {
  gap: var(--spazio-2);
}

#home-schermata-supporto .sotto__etichetta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-testo-tenue);
}

#home-schermata-supporto .supporto__form .sotto__campo {
  padding: 12px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: 14px;
  background: var(--rc-sfondo);
  box-shadow: inset 0 2px 6px var(--rc-ombra);
  color: var(--testo);
  font-size: 14px;
  line-height: 20px;
  transition:
    border-color var(--durata-veloce) ease,
    box-shadow var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-supporto .supporto__form .sotto__campo::placeholder {
  color: var(--rc-testo-tenue);
}

#home-schermata-supporto .supporto__form .sotto__campo:focus {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 1px;
  border-color: var(--rc-vetro-bordo-acceso);
  background: var(--rc-sfondo-alto);
}

/* Contatore caratteri: telemetria, non testo. */
#home-schermata-supporto .sotto__contatore {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--rc-testo-tenue);
}

#home-schermata-supporto .supporto__form .sotto__riga {
  flex-wrap: nowrap;
  gap: var(--spazio-3);
}

/* CTA del modulo: gradiente viola -> ciano, alto contrasto. */
#home-schermata-supporto #supporto-invia.pulsante--primario {
  flex: 1 1 auto;
  min-height: 48px;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-ciano));
  color: var(--rc-pomello);
  font-family: var(--font-titoli);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 32px -20px var(--rc-alone-viola);
  transition:
    transform var(--durata-veloce) ease,
    filter var(--durata-veloce) ease;
}

#home-schermata-supporto #supporto-invia.pulsante--primario:active {
  filter: brightness(1.1);
  transform: scale(0.97);
}

#home-schermata-supporto #supporto-invia.pulsante--primario[disabled] {
  filter: none;
  transform: none;
  opacity: 0.6;
}

#home-schermata-supporto .sotto__esito--ok {
  color: var(--rc-ciano);
}

#home-schermata-supporto .sotto__esito--errore {
  color: var(--testo-errore);
}

/* --- 4. Email: indirizzo in mono, azioni in capsule di vetro -------------- */
#home-schermata-supporto .supporto__email .sotto__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--rc-testo-tenue);
}

#home-schermata-supporto .supporto__email-link {
  align-self: flex-start;
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#home-schermata-supporto .supporto__email .sotto__riga {
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* `.pulsante` porta geometria e area di tocco, `.glass-pill` il vetro: qui la
   capsula si allarga, si centra e prende la tinta del design system. */
#home-schermata-supporto .supporto__capsula.pulsante.glass-pill {
  flex: 1 1 140px;
  justify-content: center;
  min-height: 44px;
  padding: 10px var(--spazio-3);
  border-radius: var(--rc-raggio-pillola);
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 13px;
  line-height: 19px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 22px -16px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-supporto #supporto-email-cta.supporto__capsula {
  border-color: var(--rc-vetro-bordo-acceso);
  color: var(--rc-ciano);
}

#home-schermata-supporto .supporto__capsula.pulsante.glass-pill:active {
  transform: scale(0.97);
  border-color: var(--rc-viola);
  background: var(--rc-badge-info-sfondo);
}

#home-schermata-supporto .supporto__capsula.pulsante.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- 4-bis. Canale WhatsApp: la stessa capsula di vetro dell'email -------- */
/* Il canale ufficiale affianca modulo ed email. La CTA e' un `<button
   data-azione="supporto-whatsapp">` (l'URL vive in `js/legale.js`): resta
   leggibile come link (ciano, come `#supporto-email-cta`) e su schermo stretto
   prende la riga intera, cosi' non si comprime accanto a un'altra azione.
   Nessun colore a mano: solo i token del design system. */
#home-schermata-supporto #supporto-whatsapp-cta.supporto__capsula {
  flex: 1 1 100%;
  border-color: var(--rc-vetro-bordo-acceso);
  color: var(--rc-ciano);
}

/* Il feedback di pressione della capsula (`:active` del design system) ha una
   specificita' piu' bassa di questa regola: il bordo viola si ri-dichiara qui,
   altrimenti la CTA resterebbe ciano anche sotto il dito. */
#home-schermata-supporto #supporto-whatsapp-cta.supporto__capsula:active {
  border-color: var(--rc-viola);
}

#home-schermata-supporto .supporto__whatsapp .sotto__nota {
  color: var(--rc-testo-tenue);
}

/* --- 5. FAQ: tendine di vetro e chevron che ruota ------------------------- */
/* Le cinque voci restano `<details class="supporto__faq-voce">` (la guardia le
   conta esattamente con quella classe): la pelle arriva dallo scope. */
#home-schermata-supporto .supporto__faq {
  gap: var(--spazio-2);
}

#home-schermata-supporto .supporto__faq-voce {
  padding: 0;
  border-top: 0;
}

#home-schermata-supporto .supporto__faq-voce summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  min-height: 44px;
  padding: 10px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: 14px;
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--testo);
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition:
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease,
    color var(--durata-veloce) ease;
}

#home-schermata-supporto .supporto__faq-voce summary::-webkit-details-marker {
  display: none;
}

/* Il chevron e' disegnato con due bordi: ruota di 45 gradi chiuso e di -135
   aperto, con la stessa durata del resto del design system. */
#home-schermata-supporto .supporto__faq-voce summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--rc-viola-chiaro);
  border-bottom: 2px solid var(--rc-viola-chiaro);
  transform: rotate(45deg);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

#home-schermata-supporto .supporto__faq-voce[open] summary {
  border-color: var(--rc-vetro-bordo-acceso);
  background: var(--rc-vetro-sfondo);
  color: var(--rc-ciano);
}

#home-schermata-supporto .supporto__faq-voce[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--rc-ciano);
}

#home-schermata-supporto .supporto__faq-voce p {
  margin: 0;
  padding: var(--spazio-2) var(--spazio-1) 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--rc-testo-tenue);
}

/* --- 6. Documenti e diritti: righe di vetro con la freccia ---------------- */
#home-schermata-supporto .supporto__diritti {
  gap: var(--spazio-2);
}

#home-schermata-supporto .supporto__diritto.profilo__voce {
  min-height: 44px;
  padding: 12px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: 14px;
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--testo);
  font-family: var(--font-titoli);
  font-size: 13px;
  line-height: 19px;
  font-weight: 700;
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-supporto .supporto__diritto.profilo__voce::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--rc-ciano);
  border-right: 2px solid var(--rc-ciano);
  transform: rotate(45deg);
}

#home-schermata-supporto .supporto__diritto.profilo__voce:active {
  transform: scale(0.98);
  border-color: var(--rc-viola);
  background: var(--rc-vetro-sfondo);
}

#home-schermata-supporto .supporto__diritto.profilo__voce:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- 7. Sessione e account: il pericolo resta visibile -------------------- */
/* Sfondo di vetro + bagliore scarlatto traslucido. La CARD di pericolo della
   compliance (`#card-pericolo` con `#profilo-elimina-modale`) resta nel Profilo
   e conserva le sue regole: qui non c'e' nessun secondo modale. */
#home-schermata-supporto .supporto__account.glass-card {
  border-color: var(--profilo-pericolo-bordo);
  background: var(--rc-vetro-sfondo);
  background-image: linear-gradient(160deg, var(--profilo-pericolo-sfondo), transparent 70%);
  box-shadow: 0 18px 40px -24px var(--profilo-pericolo-bordo);
}

#home-schermata-supporto .supporto__account.glass-card::before {
  background: linear-gradient(90deg, transparent, var(--profilo-pericolo-bordo), transparent);
}

#home-schermata-supporto .supporto__account .sotto__card-titolo {
  color: var(--testo-errore);
}

#home-schermata-supporto .supporto__diritto--pericolo.profilo__voce {
  border-color: var(--profilo-pericolo-bordo);
  background: var(--profilo-pericolo-sfondo);
  color: var(--testo-errore);
}

#home-schermata-supporto .supporto__diritto--pericolo.profilo__voce::after {
  border-color: var(--profilo-pericolo);
}

#home-schermata-supporto .supporto__diritto--pericolo.profilo__voce:active {
  border-color: var(--profilo-pericolo);
  background: var(--profilo-pericolo-sfondo);
}

/* --- 8. Accessibilita' --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #home-schermata-supporto .sotto__indietro.glass-pill,
  #home-schermata-supporto .supporto__form .sotto__campo,
  #home-schermata-supporto #supporto-invia.pulsante--primario,
  #home-schermata-supporto .supporto__capsula.pulsante.glass-pill,
  #home-schermata-supporto .supporto__faq-voce summary,
  #home-schermata-supporto .supporto__faq-voce summary::after,
  #home-schermata-supporto .supporto__diritto.profilo__voce {
    transition: none;
  }

  #home-schermata-supporto .sotto__indietro.glass-pill:active,
  #home-schermata-supporto #supporto-invia.pulsante--primario:active,
  #home-schermata-supporto .supporto__capsula.pulsante.glass-pill:active,
  #home-schermata-supporto .supporto__diritto.profilo__voce:active {
    transform: none;
  }
}

/* =============================================================================
   DATING A LUNGO RAGGIO IN VETRO — il design system "Radar Connect" sul canale
   (guscio v90, 03/11/2026 — D43)
   -----------------------------------------------------------------------------
   La schermata del Dating adotta lo stesso linguaggio della Home (D38), della
   scheda Radar (D40) e della Mappa Globale (D42): testata e comandi in
   `.glass-pill`, barra dei filtri in `.glass-card`, telemetria in `--font-mono`,
   schede profilo e stato vuoto in vetro scuro con bordo luminoso.

   Come per D40/D42 sono RIFINITURE di SUPERFICIE: le regole di base (geometria
   del pager a 7 giorni, altezza adattiva, misure di `paginaGiorno`/`row`,
   larghezze al 100% dentro il pannello, dialoghi del composer e dei filtri)
   restano dove sono e con i loro valori, perche' le guardie le leggono per
   prime e perche' quel posizionamento e' stato conquistato con i difetti iOS
   del 27/10/2026. Qui si aggiungono SOLO override con lo scope
   `#home-schermata-dating`, che hanno specificita' maggiore e vengono dopo.

   Cosa NON si tocca (D43): `js/dating.js` continua a chiamare
   `dating_lungo_raggio.asp` (`genera_giornaliero`, `lista`, `invia_icebreaker`,
   `salva_filtri`), `js/dating-giorni.js` resta la regola dei 7 giorni, le
   `data-azione` e gli id restano quelli, la Home e il viewport iOS/Safari non
   cambiano. Nessun file nuovo da precache, nessun colore letterale: solo token
   `--rc-*` e i token del tema; `backdrop-filter` sempre anche in forma
   `-webkit-` (WebKit).
   ============================================================================= */

/* --- 1. Testata: Indietro e Aggiorna come pillole di vetro ---------------- */
/* `.glass-pill` porta il vetro, il bordo violetto e la forma; qui solo il
   bersaglio comodo, la tinta del comando e il feedback tattile (nessun colore
   scritto a mano). */
#home-schermata-dating .sotto__indietro.glass-pill {
  min-height: 36px;
  padding: 6px var(--spazio-3);
  border-color: var(--rc-vetro-bordo-pillola);
  color: var(--testo);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  box-shadow: 0 8px 18px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-dating .sotto__indietro.glass-pill:active {
  transform: scale(0.95);
  border-color: var(--rc-viola);
  background: var(--rc-badge-info-sfondo);
}

#home-schermata-dating .sotto__indietro.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* `Aggiorna` (refreshButton): pillola compatta, testo ciano del design system. */
#home-schermata-dating .dating__aggiorna.glass-pill {
  min-height: 34px;
  padding: 6px var(--spazio-3);
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-ciano);
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    background var(--durata-veloce) ease;
}

#home-schermata-dating .dating__aggiorna.glass-pill:active {
  transform: scale(0.95);
  border-color: var(--rc-ciano);
}

#home-schermata-dating .dating__aggiorna.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- 2. Telemetria: numeri in mono, badge Icebreaker in vetro -------------- */
/* "Proposte oggi: N · entro 500 km" e' una riga di TELEMETRIA: JetBrains Mono
   con cifre TABULARI (il contatore che cambia non fa ballare la riga). */
#home-schermata-dating .dating__meta {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rc-testo-tenue);
}

/* "Icebreaker rimasti: N/3": capsula di vetro con bordo viola e accento rosa. */
#home-schermata-dating .dating__quota.glass-pill {
  min-height: 22px;
  padding: 2px var(--spazio-2);
  border-color: var(--rc-badge-info-bordo);
  background-color: var(--rc-badge-new-sfondo);
  background-image: linear-gradient(
    135deg,
    var(--rc-badge-info-sfondo),
    var(--rc-badge-new-sfondo)
  );
  color: var(--rc-rosa);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px var(--rc-ombra);
}

/* Prima del primo dato (e dopo un errore) la quota e' VUOTA: una capsula di
   vetro senza testo non deve restare appesa nella riga di telemetria. */
#home-schermata-dating .dating__quota.glass-pill:empty {
  display: none;
}


/* --- 3. Barra dei filtri in vetro ----------------------------------------- */
/* Il vetro e il riflesso superiore li porta `.glass-card`; qui il raggio del
   design system (la pillola di base resta nella sua regola), il bersaglio
   comodo e il gradiente di riflesso sul bordo alto. */
#home-schermata-dating .dating__filtri.glass-card {
  min-height: 48px;
  padding: 10px var(--spazio-3);
  border-color: var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background-color: var(--rc-vetro-sfondo);
  background-image: linear-gradient(
    to bottom,
    var(--rc-vetro-riflesso),
    transparent 42%
  );
  box-shadow:
    0 14px 30px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease;
}

#home-schermata-dating .dating__filtri.glass-card:active {
  transform: scale(0.99);
  border-color: var(--rc-vetro-bordo-acceso);
}

#home-schermata-dating .dating__filtri.glass-card:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Icona e freccia in tinta col design system: viola l'icona, rosa la freccia. */
#home-schermata-dating .dating__filtri-icona {
  color: var(--rc-viola-chiaro);
}

#home-schermata-dating .dating__filtri-freccia {
  color: var(--rc-rosa);
  opacity: 1;
}

#home-schermata-dating .dating__filtri-testo {
  letter-spacing: 0.01em;
}

#home-schermata-dating .dating__filtri-riepilogo {
  color: var(--rc-testo-tenue);
}

/* Filtri che RESTRINGONO davvero il pool: bordo acceso e alone viola. */
#home-schermata-dating .dating__filtri--attivo.glass-card {
  border-color: var(--rc-vetro-bordo-acceso);
  box-shadow:
    0 0 0 1px var(--rc-viola),
    0 14px 30px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

#home-schermata-dating .dating__filtri--attivo .dating__filtri-riepilogo {
  color: var(--rc-viola-chiaro);
}

/* --- 4. Carousel: giorno, conteggio, frecce e pallini --------------------- */
/* Il giorno ("Oggi", "Ieri") diventa una capsula di vetro viola: mantiene la
   misura di `paginaGiorno` (18/24, peso 900) dentro un bersaglio leggibile. */
#home-schermata-dating .dating__giorno {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  padding: 0 var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* "N proposte" e' telemetria: mono, cifre tabulari, testo tenue. */
#home-schermata-dating .dating__conteggio {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rc-testo-tenue);
}

/* Le due frecce < > sono PICCOLE CAPSULE di vetro (bersaglio 44x34) con
   micro-transizione al tocco, come i comandi del Radar. */
#home-schermata-dating .dating__freccia.glass-pill {
  width: 44px;
  height: 34px;
  min-width: 44px;
  padding: 0;
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-ciano);
  box-shadow: 0 8px 18px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    border-color var(--durata-veloce) ease,
    color var(--durata-veloce) ease;
}

#home-schermata-dating .dating__freccia.glass-pill:active {
  transform: scale(0.92);
  border-color: var(--rc-viola);
  color: var(--rc-viola-chiaro);
}

#home-schermata-dating .dating__freccia.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

#home-schermata-dating .dating__freccia.glass-pill:disabled {
  opacity: 0.35;
}

/* Pallini di stato: spenti nel tenue del design, attivo in gradiente
   viola -> ciano con alone (il trattino allungato resta quello di base). */
#home-schermata-dating .dating__punto {
  background: var(--rc-interruttore-spento);
  transition:
    width 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

#home-schermata-dating .dating__punto--attivo {
  background-image: linear-gradient(90deg, var(--rc-viola), var(--rc-ciano));
  background-color: var(--rc-viola);
  box-shadow: 0 0 10px var(--rc-alone-ciano);
}


/* --- 5. Schede profilo in vetro ------------------------------------------ */
/* La riga e' una `.glass-card` (raggio del design system, vetro scuro, bordo
   luminoso e riflesso) ma resta dentro il pager: `width/max-width` e
   `box-sizing` NON si toccano (guardia F4, difetto del 27/10/2026). */
#home-schermata-dating .dating__riga.glass-card {
  padding: var(--spazio-2) var(--spazio-3);
  border-color: var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  box-shadow:
    0 14px 30px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Gli anelli dell'avatar prendono il bordo del vetro: la foto resta quella
   vera servita dal backend, cambia solo la cornice. */
#home-schermata-dating .dating__avatar {
  border-color: var(--rc-vetro-bordo-acceso);
  box-shadow: 0 6px 14px var(--rc-ombra);
}

#home-schermata-dating .dating__dettagli {
  color: var(--rc-testo-tenue);
}

#home-schermata-dating .dating__stato {
  color: var(--rc-testo-tenue);
}

/* Badge d'intenzione (viola) e badge di stato (ciano) = pillole di vetro con
   testo mono tabulare: leggibili anche quando la scheda si restringe. */
#home-schermata-dating .dating__badge.glass-pill,
#home-schermata-dating .dating__badgeStato.glass-pill {
  min-height: 22px;
  padding: 0 var(--spazio-2);
  border-radius: var(--rc-raggio-pillola);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#home-schermata-dating .dating__badge.glass-pill {
  border-color: var(--rc-badge-info-bordo);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
}

#home-schermata-dating .dating__badgeStato.glass-pill {
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
}

/* CTA principale ("Invia Icebreaker" / "Apri chat") in gradiente di marca:
   testo scuro sul gradiente chiaro (contrasto AA), alone e feedback tattile. */
#home-schermata-dating .dating__invia {
  min-height: 40px;
  padding: 0 var(--spazio-3);
  border-color: var(--rc-vetro-bordo-acceso);
  background-color: var(--rc-viola);
  background-image: linear-gradient(135deg, var(--rc-viola), var(--rc-ciano));
  color: var(--rc-sfondo);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px var(--rc-ombra);
  transition:
    transform var(--durata-veloce) ease,
    box-shadow var(--durata-veloce) ease;
}

#home-schermata-dating .dating__invia:active {
  transform: scale(0.97);
  box-shadow: 0 6px 14px var(--rc-ombra);
}

#home-schermata-dating .dating__invia:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

#home-schermata-dating .dating__invia:disabled {
  opacity: 0.45;
}

/* --- 6. Stato vuoto ("Nessun profilo proposto") --------------------------- */
/* Vetro scuro + bordo luminoso: la scheda resta centrata e dentro lo schermo
   (`width/max-width/margin` sono della regola di base, guardia F4). */
#home-schermata-dating .dating__vuoto.glass-card {
  border-color: var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  box-shadow:
    0 18px 38px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Icona e testi di suggerimento nel tenue del design e nella tipografia del
   testo (non il display font): il vuoto deve respirare, non gridare. */
#home-schermata-dating .dating__vuoto-icona {
  color: var(--rc-testo-tenue);
}

#home-schermata-dating .dating__vuoto-titolo {
  font-family: var(--font-testo);
  color: var(--testo);
}

#home-schermata-dating .dating__vuoto-testo {
  font-family: var(--font-testo);
  color: var(--rc-testo-tenue);
}

/* "Nessuna proposta" dei giorni precedenti: stessa tinta tenue. */
#home-schermata-dating .dating__giorno-vuoto {
  color: var(--rc-testo-tenue);
}

/* Caricamento: nota discreta, stesso tenue della telemetria. */
#home-schermata-dating .dating__meta-riga {
  gap: var(--spazio-2);
}

/* =============================================================================
   SEGNALI IN VETRO (guscio v91, D44)
   -----------------------------------------------------------------------------
   La scheda "Segnali" (Fumo / Bottiglie / Richieste) passa al linguaggio del
   design "Radar Connect": selettore delle sotto-schede in UNA pillola di vetro,
   card di lancio in vetro scuro con bordo viola, quota e contatore in JetBrains
   Mono tabulare, sezioni e stato vuoto dentro capsule di vetro, tessere della
   bacheca con badge in pillola.

   REGOLE (valgono per tutto il blocco):
   - ogni regola e' SOTTO `#vista-social`: la geometria storica del pannello
     (padding della `.vista`, misure dei componenti dell'APK, gap della
     bacheca) resta scritta dove stava e continua a valere dove non la
     tocchiamo;
   - qui NON si scrive un colore: solo token `--rc-*` e token del tema;
   - `backdrop-filter` ha SEMPRE anche `-webkit-` (la PWA gira su WebKit);
   - nessuna posizione fissa/assoluta e nessun `z-index`: la barra in basso
     resta protetta dall'attributo di digitazione (`html[data-digitazione]`),
     che spegne la barra quando la tastiera e' aperta.
   ============================================================================= */

/* --- Selettore delle sotto-schede: una pillola di vetro ------------------- */
#vista-social .social__schede.glass-pill {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--spazio-1);
  padding: var(--spazio-1);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso), 0 12px 26px var(--rc-ombra);
}

#vista-social .social__scheda {
  padding: 9px var(--spazio-3);
  border-radius: var(--rc-raggio-pillola);
  color: var(--rc-testo-tenue);
  transition: transform 0.16s ease, color 0.16s ease;
}

/* Micro-feedback al tocco: la pillola si preme, non si sposta. */
#vista-social .social__scheda:active {
  transform: scale(0.95);
}

/* La scheda scelta: vetro SCURO traslucido con sfumatura viola/rosa e il
   riflesso superiore del design. Lo stato vive su `aria-selected`
   (`mostraSchedaSociale`), mai su una classe scritta a mano. */
#vista-social .social__scheda[aria-selected='true'] {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-badge-info-sfondo), var(--rc-badge-new-sfondo));
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso), 0 8px 18px var(--rc-ombra);
  color: var(--testo);
}

#vista-social .social__scheda:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}


/* --- "Messaggio in Bottiglia": la card di lancio in vetro scuro ------------ */
#vista-social .social__composer--lancio.glass-card {
  margin-top: 0;
  padding: var(--spazio-4);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 18px 38px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* --- Invito al lancio: box CENTRATO (parita' con la CTA di bottiglie.tsx) -- */
#vista-social .social__invito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-1);
  margin: var(--spazio-3) 0 var(--spazio-2);
  text-align: center;
}

#vista-social .social__invito-titolo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--peso-forte);
  color: var(--testo);
}

#vista-social .social__invito-testo {
  margin: 0;
  color: var(--rc-testo-tenue);
}

/* Quota degli Icebreaker: riquadro di vetro con TITOLO e DETTAGLIO (parita' con
   `BottigliaQuotaBadge`). Cifre MONO tabulari: un contatore che cambia non deve
   far ballare la riga. A quota finita il box prende la tinta d'attesa. */
#vista-social .social__quota {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--spazio-2) 0;
  padding: var(--spazio-2) var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-badge-max-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-badge-max-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso);
  text-align: center;
}

#vista-social .social__quota-titolo {
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-forte);
}

#vista-social .social__quota-dettaglio {
  color: var(--rc-testo-tenue);
  font-size: var(--dimensione-micro);
  line-height: 18px;
}

/* Quota esaurita: il box passa al bordo "acceso" e il titolo tiene la tinta
   ciano (il testo lo dice a parole, mai solo col colore). */
#vista-social .social__quota--esaurita {
  border-color: var(--rc-vetro-bordo-acceso);
}

/* --- Raggio della bacheca: pillole 10/25/50/100 km ------------------------ */
#vista-social .social__raggio {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  margin: var(--spazio-2) 0;
}

#vista-social .social__raggio .social__chip {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* La pillola ACCESA: la stessa veste della scheda scelta (gradiente del badge +
   riflesso del vetro). Lo stato vive su `aria-pressed`, mai su una classe. */
#vista-social .social__raggio .social__chip[aria-pressed='true'] {
  border-color: var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-badge-info-sfondo), var(--rc-badge-new-sfondo));
  color: var(--testo);
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* "Aggiorna" dentro la capsula dell'intestazione della bacheca. */
#vista-social .social__intestazione .social__aggiorna {
  flex: 0 0 auto;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--testo);
}

#vista-social .social__intestazione .social__aggiorna:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- Stato vuoto: titolo e riga, centrati come `spiaggiaVuota` ------------ */
#vista-social .social__vuoto-titolo,
#vista-social .social__vuoto-testo {
  display: block;
  text-align: center;
}

#vista-social .social__vuoto-titolo {
  font-size: 14px;
  line-height: 19px;
  font-weight: var(--peso-forte);
  color: var(--testo);
}

#vista-social .social__vuoto-testo {
  margin-top: 2px;
  font-size: var(--dimensione-micro);
  line-height: 18px;
  color: var(--rc-testo-tenue);
}

/* --- Area di testo: campo in vetro scanalato ------------------------------ */
#vista-social .social__composer--lancio .social__campo {
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 2px 10px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
  color: var(--testo);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#vista-social .social__composer--lancio .social__campo::placeholder {
  color: var(--rc-testo-tenue);
  opacity: 1;
}

/* Focus: bordo luminoso, nessun outline di sistema (il campo e' gia' acceso). */
#vista-social .social__composer--lancio .social__campo:focus {
  outline: none;
  border-color: var(--rc-vetro-bordo-acceso);
  box-shadow: inset 0 2px 10px var(--rc-ombra), 0 0 0 3px var(--rc-badge-info-sfondo);
}

/* Contatore caratteri (0/300): JetBrains Mono, cifre tabulari. */
#vista-social .social__composer-piede .social__contatore {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--rc-testo-tenue);
}

/* --- "Lancia in mare": gradiente viola/rosa ad alto contrasto ------------- */
#vista-social #bottiglia-crea.social__cta {
  padding: 11px var(--spazio-4);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  border-radius: var(--rc-raggio-pillola);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  box-shadow: 0 10px 22px var(--rc-ombra);
  color: var(--rc-sfondo);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#vista-social #bottiglia-crea.social__cta:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px var(--rc-ombra);
}

#vista-social #bottiglia-crea.social__cta:disabled {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo-pillola);
  box-shadow: none;
  color: var(--rc-testo-tenue);
  cursor: default;
  transform: none;
}

#vista-social #bottiglia-crea.social__cta:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}


/* --- Sezioni della bacheca: intestazioni in capsula di vetro -------------- */
/* IN MARE ADESSO / LE MIE BOTTIGLIE / RISPOSTE RICEVUTE: tipografia di
   sistema (quelle regole restano dove stavano), capsule di vetro qui. */
#vista-social .social__intestazione.glass-card,
#vista-social .social__sottotitolo.glass-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  margin: var(--spazio-2) 0;
  padding: 6px var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso);
  color: var(--rc-testo-tenue);
}

/* --- Stati vuoti: "Nessuna bottiglia nel raggio adesso." ------------------ */
#vista-social .nota.glass-card {
  margin: var(--spazio-2) 0;
  padding: var(--spazio-3);
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso);
  color: var(--rc-testo-tenue);
  text-align: center;
}

/* --- Tessere della bacheca: vetro scuro ---------------------------------- */
#vista-social .social__voce--bottiglia.glass-card,
#vista-social .social__voce--richiesta.glass-card {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: 0 18px 38px var(--rc-ombra), inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Il testo della bottiglia: campo scanalato dentro la tessera. */
#vista-social .social__voce--bottiglia .social__testo {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  box-shadow: inset 0 2px 8px var(--rc-ombra);
  color: var(--testo);
}

/* --- Telemetria delle tessere: distanze e conteggi in MONO ---------------- */
#vista-social .social__pillola {
  border: var(--bordo-sottile) solid var(--rc-badge-max-bordo);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

#vista-social .social__pillola--badge {
  border-color: var(--rc-badge-info-bordo);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
}

#vista-social .social__pillola--staff {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
}

#vista-social .social__zona {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--rc-testo-tenue);
}

/* Badge di intenzione: pillola di vetro viola, cifre mono. */
#vista-social .social__badge {
  padding: 3px var(--spazio-2);
  border: var(--bordo-sottile) solid var(--rc-badge-info-bordo);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-badge-info-sfondo);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-viola-chiaro);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}


/* --- Azioni rapide delle tessere: pillole di vetro ------------------------ */
#vista-social .social__azioni .social__cta {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
  transition: transform 0.16s ease;
}

#vista-social .social__azioni .social__cta:active {
  transform: scale(0.97);
}

#vista-social .social__azioni .social__cta:disabled {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  transform: none;
}

#vista-social .social__azioni .social__cta:focus-visible,
#vista-social .social__fantasma:focus-visible,
#vista-social .social__segnala:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* "Apri chat" / "Rispondi" fuori dalla tessera (Richieste): ghost in vetro. */
#vista-social .social__fantasma {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: var(--rc-raggio-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  transition: transform 0.16s ease;
}

#vista-social .social__fantasma:active {
  transform: scale(0.97);
}

/* Segnalazione a 1 tap: resta un cerchio da 40 (misura dell'APK), in vetro rosa. */
#vista-social .social__segnala {
  border: var(--bordo-sottile) solid var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
  transition: transform 0.16s ease;
}

#vista-social .social__segnala:active {
  transform: scale(0.94);
}

/* Stato del Segnale di Fumo: capsula di vetro (sparisce quando e' vuota). */
#vista-social .social__stato {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-testo-tenue);
  font-variant-numeric: tabular-nums;
}

#vista-social .social__stato:empty {
  display: none;
}

/* Chi ha chiesto meno movimento non deve vedere la pillola "premersi". */
@media (prefers-reduced-motion: reduce) {
  #vista-social .social__scheda,
  #vista-social #bottiglia-crea.social__cta,
  #vista-social .social__azioni .social__cta,
  #vista-social .social__fantasma,
  #vista-social .social__segnala,
  #vista-social .social__composer--lancio .social__campo {
    transition: none;
  }

  #vista-social .social__scheda:active,
  #vista-social #bottiglia-crea.social__cta:active,
  #vista-social .social__azioni .social__cta:active,
  #vista-social .social__fantasma:active,
  #vista-social .social__segnala:active {
    transform: none;
  }
}


/* =============================================================================
   CHAT IN VETRO (guscio v92, D45)
   -----------------------------------------------------------------------------
   La scheda "Chat" (elenco delle discussioni + conversazione aperta) adotta il
   linguaggio del design "Radar Connect": righe della lista in `.glass-card` con
   bordo viola e alone al tocco, testata della conversazione in vetro traslucido,
   fumetti con timestamp in JetBrains Mono tabulare, player del vocale in capsule,
   composer in vetro.

   REGOLE (valgono per tutto il blocco):
   - ogni regola e' SOTTO `#vista-chat`: le misure dell'APK (avatar 52, riga 8px,
     bolla 80%/20, composer 8/16, cerchi 42) e la geometria iOS del pannello
     restano scritte dove stavano e continuano a valere dove non le tocchiamo;
   - qui NON si scrive un colore: solo token `--rc-*` e token del tema;
   - `backdrop-filter` ha SEMPRE anche `-webkit-` (la PWA gira su WebKit);
   - nessuna posizione fissa/assoluta e nessun `z-index`: la barra in basso resta
     protetta da `html[data-digitazione='si']` (D41), che la spegne mentre si
     scrive e la riaccende al `focusout`;
   - il blur si accende SOLO sui pezzi singoli (testata, composer, campi,
     capsule): righe e fumetti sono decine e il vetro resta di superficie —
     il risultato a schermo non cambia, il costo per frame si'.
   ============================================================================= */

/* --- 1. ELENCO: testata, pillole e comandi -------------------------------- */

/* La testata resta quella di sempre (padding con la safe area in alto): cambia
   solo il filo del bordo inferiore, che passa al viola del vetro. */
#vista-chat .chat-elenco__testa {
  border-bottom-color: var(--rc-vetro-bordo-pillola);
}

/* "Aggiorna": capsula di vetro con il testo ciano. Il padding resta quello
   della regola di base (7/14: bersaglio comodo), il vetro e' la superficie. */
#vista-chat .chat-pillola.glass-pill {
  padding: 7px 14px;
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-ciano);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

#vista-chat .chat-pillola.glass-pill:active {
  opacity: 1;
  transform: scale(0.95);
  border-color: var(--rc-vetro-bordo-acceso);
}

#vista-chat .chat-pillola.glass-pill:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Pillola dei non letti della testata: cifre mono tabulari (il numero cambia
   senza far ballare la riga). Vuota = nessuna capsula. */
#vista-chat .chat-elenco__nonLetti.glass-pill {
  padding: 4px 10px;
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

#vista-chat .chat-elenco__nonLetti.glass-pill:empty {
  display: none;
}

/* --- 2. TESSERE DELLA LISTA (una conversazione per riga) ------------------ */

/* Vetro scuro, bordo viola tenue, riflesso superiore e ombra: la riga resta
   alta come prima (padding 8, avatar 52) e il raggio scende a 18 per stare
   dentro la capsula senza toccare le misure della guardia (16 di base). */
#vista-chat .chat__conversazione.glass-card {
  padding: 8px;
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo);
  border-radius: 18px;
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 10px 22px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

/* Al tocco l'alone: il bordo si accende e il vetro "risponde", senza spegnere
   la riga (l'opacita' resta piena: e' il feedback a parlare). */
#vista-chat .chat__conversazione.glass-card:active {
  opacity: 1;
  transform: scale(0.99);
  border-color: var(--rc-vetro-bordo-acceso);
  box-shadow:
    0 0 0 1px var(--rc-vetro-bordo-acceso),
    0 14px 30px var(--rc-alone-viola);
}

#vista-chat .chat__conversazione.glass-card:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Avatar (foto o iniziale): cerchio in vetro con bordo luminoso e anello
   tenue. Le due facce sono figli diretti del pulsante: nessun nodo nuovo. */
#vista-chat .chat__conversazione > .chat__foto,
#vista-chat .chat__conversazione > .chat__iniziale {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: var(--rc-vetro-sfondo-pillola);
  box-shadow:
    0 0 0 3px var(--rc-vetro-riflesso),
    0 6px 16px var(--rc-alone-viola);
  color: var(--rc-viola-chiaro);
}

/* Orario/etichetta della lista ("Venerdi'", "17/10", "Ieri"): telemetria in
   mono tabulare, cosi' le righe restano allineate colonna per colonna. */
#vista-chat .chat__quando {
  color: var(--rc-testo-tenue);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* "Staff": capsula di vetro viola, maiuscoletto mono (il badge del design). */
#vista-chat .chat__staff.glass-pill {
  padding: 2px 7px;
  border-color: var(--rc-badge-info-bordo);
  background: var(--rc-badge-info-sfondo);
  color: var(--rc-viola-chiaro);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Contatore dei non letti: capsula ciano con le cifre mono tabulari. La
   geometria (20x20 minimo) resta quella della regola di base. */
#vista-chat .chat__badge.glass-pill {
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}


/* --- 3. TESTATA DELLA CONVERSAZIONE --------------------------------------- */

/* Il riquadro dell'header (indietro, avatar+nome, cestino, "...") diventa un
   vetro traslucido: stessa misura (raggio 22, margine con la safe area in
   alto), superficie del design. */
#vista-chat .chat-thread__testa.glass-card {
  border-color: var(--rc-vetro-bordo);
  border-radius: var(--rc-raggio-vetro);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow:
    0 14px 30px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Cerchi d'azione (indietro, cestino, menu): vetro, bordo sottile viola e
   `scale` al tocco. Le misure restano 36/18 come nell'APK. */
#vista-chat .chat-thread__indietro,
#vista-chat .chat-thread__strumento {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-testo-tenue);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

#vista-chat .chat-thread__indietro:active,
#vista-chat .chat-thread__strumento:active {
  opacity: 1;
  transform: scale(0.92);
  border-color: var(--rc-vetro-bordo-acceso);
  color: var(--testo);
}

#vista-chat .chat-thread__indietro:focus-visible,
#vista-chat .chat-thread__strumento:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* Avatar 52 della controparte: cerchio in vetro con bordo luminoso. */
#vista-chat .chat-thread__avatar {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: var(--rc-vetro-sfondo-pillola);
  box-shadow:
    0 0 0 3px var(--rc-vetro-riflesso),
    0 8px 20px var(--rc-alone-viola);
}

/* "Ultimo accesso...": telemetria in mono tabulare, come le date della lista. */
#vista-chat .chat-thread__sottotitolo {
  color: var(--rc-testo-tenue);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* "Sta scrivendo" resta in tinta d'accento (nessun colore nuovo). */
#vista-chat .chat-thread__sottotitolo[data-presenza='digitando'] {
  color: var(--rc-ciano);
}

/* Badge "Bloccata": capsula di vetro rosa, bordo luminoso. */
#vista-chat .chat-thread__badge {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
}

/* La superficie dei messaggi prende il filo viola del vetro (il fondo resta
   quello di base: e' l'area che scorre, non un pannello flottante). */
#vista-chat .chat-thread__superficie {
  border-color: var(--rc-vetro-bordo);
}


/* --- 4. FUMETTI ----------------------------------------------------------- */

/* Ricevuti: `.glass-card` scuro con bordo viola tenue e riflesso superiore. */
#vista-chat .chat__bolla.glass-card {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 8px 18px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Miei: gradiente violaceo/rosa scuro traslucido con bordo luminoso. Il testo
   resta quello di base (bianco su tinta scura: contrasto alto). */
#vista-chat .chat__bolla--mia {
  border-color: var(--rc-vetro-bordo-acceso);
  background: linear-gradient(
    135deg,
    var(--chat-bolla-mia-sfondo),
    var(--rc-badge-new-sfondo)
  );
  box-shadow:
    0 10px 22px var(--rc-ombra),
    inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Messaggio di sistema (conversazione cancellata): banner di vetro, non bolla. */
#vista-chat .chat__bolla--sistema {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
}

#vista-chat .chat__bolla--sistema .chat__testoBolla {
  color: var(--rc-testo-tenue);
}

/* Timestamp e stato dentro il fumetto: mono tabulare (10/12 resta la misura).
   La TINTA resta quella di base: sui miei e' piu' chiara, sui ricevuti piu'
   tenue, ed e' la regola `.chat__bolla--mia .chat__meta` a deciderlo. */
#vista-chat .chat__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- 5. PLAYER DEL VOCALE ------------------------------------------------- */

/* Play 34 del fumetto: gradiente viola/rosa con alone, `scale` al tocco. */
#vista-chat .chat__audioPlay {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  color: var(--rc-sfondo);
  box-shadow: 0 6px 16px var(--rc-alone-viola);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#vista-chat .chat__audioPlay:active {
  transform: scale(0.92);
  box-shadow: 0 3px 10px var(--rc-alone-viola);
}

/* Contatore 0:00 / 0:03: mono tabulare (una cifra che cambia non sposta la
   riga) nel tenue del design. */
#vista-chat .chat__audioTempo {
  color: var(--rc-testo-tenue);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}

/* Onda del vocale: la tinta d'accento resta (e' il segnale che sta suonando). */
#vista-chat .chat__ondaBarra {
  background: linear-gradient(180deg, var(--rc-ciano), var(--rc-viola));
}

/* Chip di velocita' (1x / 1.5x / 2x): capsule di vetro mono tabulari. Il
   padding resta quello stretto della regola di base. */
#vista-chat .chat__audioRate.glass-pill {
  padding: 3px 7px;
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

#vista-chat .chat__audioRate.glass-pill:active {
  transform: scale(0.95);
}

/* Velocita' scelta: capsula ciano (lo stato lo scrive `.chat__audioRate--attiva`,
   che qui riprende il sopravvento sul vetro neutro: due classi, come la regola
   del vetro che deve battere). */
#vista-chat .chat__audioRate--attiva.glass-pill {
  border-color: var(--rc-badge-max-bordo);
  background: var(--rc-badge-max-sfondo);
  color: var(--rc-ciano);
}

/* --- 6. MEDIA (foto e video) ---------------------------------------------- */

/* Riquadro coerente col design: raggio 20 (misura di base) e filo viola. */
#vista-chat .chat__media {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  box-shadow: 0 10px 22px var(--rc-ombra);
}


/* --- 7. COMPOSER (campo, "+", microfono, invio) --------------------------- */

/* La barra di composizione e' un vetro che chiude la superficie dei messaggi:
   il filo in alto e' l'unico bordo (il fondo lo arrotonda la superficie, che
   ha `overflow: hidden`), cosi' il composer resta a filo del bordo visibile —
   anche con la tastiera aperta (`html[data-digitazione='si']`). */
#vista-chat .chat__composer.glass-card {
  padding: 8px 16px;
  border: 0;
  border-top: var(--bordo-sottile) solid var(--rc-vetro-bordo-pillola);
  border-radius: 0;
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 1px 0 var(--rc-vetro-riflesso);
}

/* Campo "Scrivi un messaggio...": vetro scanalato (ombra interna) con bordo
   luminoso al focus. Misure di base: 15/20, min 42, max 110, raggio 14. */
#vista-chat .chat__campo {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  box-shadow: inset 0 2px 10px var(--rc-ombra);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#vista-chat .chat__campo:focus {
  border-color: var(--rc-vetro-bordo-acceso);
  outline: none;
  box-shadow:
    inset 0 2px 10px var(--rc-ombra),
    0 0 0 3px var(--rc-badge-info-sfondo);
}

#vista-chat .chat__campo::placeholder {
  color: var(--rc-testo-tenue);
}

/* "+" (allega / cestino) e microfono: cerchi 42 in vetro. */
#vista-chat .chat__allega,
#vista-chat .chat__vocaleMic {
  border-color: var(--rc-vetro-bordo-pillola);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
  color: var(--rc-testo-tenue);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

#vista-chat .chat__allega:active,
#vista-chat .chat__vocaleMic:active {
  opacity: 1;
  transform: scale(0.92);
  border-color: var(--rc-vetro-bordo-acceso);
  color: var(--testo);
}

/* Durante la registrazione "+" e' il CESTINO: capsula rosa (non vetro neutro),
   cosi' "scarta" non si confonde con "allega". */
#vista-chat .chat__allega--cestino {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
}

/* Microfono in registrazione ("ferma"): stessa capsula rosa; il respiro
   dell'opacita' resta quello della regola di base. */
#vista-chat .chat__vocaleMic--stop {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-badge-new-sfondo);
  color: var(--rc-rosa);
}

/* Invio principale: gradiente viola/rosa, freccia scura (contrasto alto),
   alone e `scale` al tocco. Disabilitato = vetro traslucido. */
#vista-chat .chat__invia {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  color: var(--rc-sfondo);
  box-shadow: 0 8px 20px var(--rc-alone-viola);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#vista-chat .chat__invia:active {
  opacity: 1;
  transform: scale(0.94);
  box-shadow: 0 4px 12px var(--rc-alone-viola);
}

#vista-chat .chat__invia:disabled {
  border-color: var(--rc-vetro-bordo);
  background: var(--rc-vetro-sfondo-pillola);
  color: var(--rc-testo-tenue);
  box-shadow: none;
  transform: none;
}

#vista-chat .chat__invia:focus-visible,
#vista-chat .chat__allega:focus-visible,
#vista-chat .chat__vocaleMic:focus-visible,
#vista-chat .chat__audioPlay:focus-visible,
#vista-chat .chat__audioRate:focus-visible {
  outline: 2px solid var(--rc-ciano);
  outline-offset: 2px;
}

/* --- 8. STATO DI REGISTRAZIONE (modalita' vocale) ------------------------- */

/* Il riquadro che sostituisce il campo mentre si registra: vetro con il filo
   rosa, timer in mono tabulare (le cifre non ballano mentre scorrono). */
#vista-chat .chat__vocale {
  border-color: var(--rc-badge-new-bordo);
  background: var(--rc-vetro-sfondo-pillola);
  -webkit-backdrop-filter: blur(var(--rc-vetro-blur));
  backdrop-filter: blur(var(--rc-vetro-blur));
}

#vista-chat .chat__vocaleTempo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

#vista-chat .chat__vocaleTesto {
  color: var(--rc-testo-tenue);
}

#vista-chat .chat__vocaleBarra {
  background: var(--rc-rosa);
}

/* Il ▶ dell'anteprima: cerchio 26 con il gradiente del design. */
#vista-chat .chat__vocalePlay {
  border: var(--bordo-sottile) solid var(--rc-vetro-bordo-acceso);
  background: linear-gradient(135deg, var(--rc-viola), var(--rc-rosa));
  color: var(--rc-sfondo);
}

/* Chi ha chiesto meno movimento non deve vedere il "premuto". */
@media (prefers-reduced-motion: reduce) {
  #vista-chat .chat-pillola.glass-pill,
  #vista-chat .chat__conversazione.glass-card,
  #vista-chat .chat-thread__indietro,
  #vista-chat .chat-thread__strumento,
  #vista-chat .chat__audioPlay,
  #vista-chat .chat__audioRate.glass-pill,
  #vista-chat .chat__campo,
  #vista-chat .chat__allega,
  #vista-chat .chat__vocaleMic,
  #vista-chat .chat__invia {
    transition: none;
  }

  #vista-chat .chat-pillola.glass-pill:active,
  #vista-chat .chat__conversazione.glass-card:active,
  #vista-chat .chat-thread__indietro:active,
  #vista-chat .chat-thread__strumento:active,
  #vista-chat .chat__audioPlay:active,
  #vista-chat .chat__audioRate.glass-pill:active,
  #vista-chat .chat__allega:active,
  #vista-chat .chat__vocaleMic:active,
  #vista-chat .chat__invia:active {
    transform: none;
  }
}