/**
 * MINOMO — la segnalazione di un contenuto. 27/08/2026.
 *
 * Il triangolo riprende il disegno indicato da Vito e gia' in uso su rzx.bio:
 * pastiglia tonda semitrasparente con sfocatura dietro, in basso a sinistra.
 *
 * 🔴 DUE CORREZIONI RISPETTO A QUELL'ORIGINALE, e sono deliberate:
 *
 * 1. **L'area sensibile e' 44px, non 30.** Su rzx.bio la pastiglia e' 30px, che
 *    e' sotto la soglia di tocco di Apple: su un telefono si manca. Qui il
 *    CERCHIO resta piccolo e discreto come nel disegno, ma il bersaglio del dito
 *    e' 44px. Si vede quello che voleva Vito, si tocca quello che serve.
 *
 * 2. **Sta SOPRA la barra in basso.** Su rzx.bio non c'e' una barra di
 *    navigazione; qui c'e', su tutte le pagine dove questo triangolo compare, ed
 *    e' fissa in fondo. A `bottom: 1rem` finirebbe sotto le voci di menu.
 *    ⚠️ Il valore dipende dall'altezza di `.m-nav` (10px + icona + etichetta +
 *       safe area). Se un giorno la barra cambia altezza, questo numero e' il
 *       posto da cambiare, ed e' il motivo per cui e' scritto in una variabile.
 */

:root {
  --sg-sopra-barra: 74px;
}

.sg-apri {
  position: fixed;
  left: 8px;
  bottom: calc(var(--sg-sopra-barra) + env(safe-area-inset-bottom));
  z-index: 90; /* sotto la barra (100): la navigazione vince sempre */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t3, #7E8A97);
  cursor: pointer;
}
/* Il cerchio vero: piccolo, dentro il bersaglio grande. */
.sg-apri::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.sg-apri svg { position: relative; width: 15px; height: 15px; }
.sg-apri:hover { color: var(--t1, #F5F7FA); }

/* ------------------------------------------------------------------ foglio */

.sg-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200; /* sopra la barra: e' un dialogo modale */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sg-foglio {
  width: 100%;
  max-width: 520px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--surf, #18212B);
  border-top: 1px solid var(--bd, rgba(255,255,255,.07));
}
.sg-foglio:focus { outline: none; }
.sg-titolo { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--t1, #F5F7FA); }

.sg-motivi { display: flex; flex-direction: column; gap: 8px; }
.sg-motivo {
  /* 52px come le azioni di S3: il rifiuto e la segnalazione non si fanno con
     bersagli piccoli. */
  min-height: 52px;
  padding: 0 14px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--bd, rgba(255,255,255,.07));
  background: var(--surf-2, #1E2935);
  color: var(--t2, #B8C2CC);
  font: inherit;
  cursor: pointer;
}
.sg-motivo:hover { color: var(--t1, #F5F7FA); }
.sg-motivo.sg-on {
  border-color: var(--orange, #F26A2E);
  color: var(--t1, #F5F7FA);
}

.sg-nota { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sg-nota[hidden] { display: none; } /* `display:flex` vince su [hidden]: vedi s3.css */
.sg-nota-lbl { font-size: 13px; color: var(--t3, #7E8A97); }
.sg-nota-testo {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--bd, rgba(255,255,255,.07));
  background: var(--surf-2, #1E2935);
  color: var(--t1, #F5F7FA);
  font: inherit;
  resize: vertical;
}

.sg-rassicura { margin: 14px 0 0; font-size: 13px; color: var(--t3, #7E8A97); }

.sg-invia {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--orange, #F26A2E);
  color: #14100c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sg-invia:disabled { opacity: .45; cursor: default; }

.sg-esito { margin: 14px 0 0; color: var(--t1, #F5F7FA); }
.sg-esito[hidden] { display: none; }
.sg-esito--ko { color: var(--warn, #FFC46B); }