/* Memorie — interfaccia di mamma.
   Regole ferme: testo grande (min 20px), contrasto alto, un'azione principale per
   schermata, pulsanti ≥60px, niente gesti nascosti. Tema caldo "quaderno di famiglia". */

:root {
  --carta: #FBF7EF;
  --carta-calda: #F6EFE2;
  --carta-scura: #EFE7D6;
  --inchiostro: #2A251E;
  --inchiostro-tenue: #5D564B;
  --linea: #E0D6C2;
  --primario: #A34A32;          /* terracotta profonda: l'azione principale */
  --primario-scuro: #86391F;
  --primario-chiaro: #F7E4DB;
  --verde: #3F6E4C;
  --verde-chiaro: #E4EEE2;
  --blu: #33538D;
  --blu-chiaro: #E8EEF8;
  --oro: #B98A2F;
  --bianco: #FFFFFF;
  --ombra: 0 2px 12px rgba(42, 37, 30, 0.10);
  --ombra-alta: 0 6px 24px rgba(42, 37, 30, 0.14);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(20px * var(--scala-testo, 1)); }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -200px, #F3E7D2 0%, var(--carta) 60%);
  background-color: var(--carta);
  color: var(--inchiostro);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

#app { max-width: 760px; margin: 0 auto; padding: 16px 20px 56px; }

.caricamento { text-align: center; color: var(--inchiostro-tenue); padding: 80px 0; font-size: 1.1rem; }

button {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--inchiostro);
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: 18px;
  min-height: 64px;
  padding: 12px 22px;
  cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: scale(0.985); }
button:focus-visible { outline: 4px solid var(--blu); outline-offset: 2px; }
button:disabled { opacity: 0.55; }

.btn-primario {
  background: linear-gradient(180deg, #B0543B, var(--primario));
  border-color: var(--primario-scuro);
  color: var(--bianco);
  font-size: 1.25rem;
  min-height: 76px;
  border-radius: 22px;
  box-shadow: var(--ombra);
  width: 100%;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-primario:active { background: var(--primario-scuro); }
.btn-secondario { width: 100%; background: var(--bianco); }
.btn-verde { background: linear-gradient(180deg, #4A7D58, var(--verde)); border-color: #33593E; color: var(--bianco); width: 100%; font-size: 1.15rem; }
.btn-quieto {
  background: none; border: none; min-height: 52px;
  color: var(--inchiostro-tenue); text-decoration: underline;
  text-underline-offset: 4px; font-weight: 500; font-size: 0.95rem;
}

/* ---------- intestazione ---------- */
.testata { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.btn-casa {
  min-height: 56px; min-width: 56px;
  border-radius: 16px; font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: var(--bianco);
}
.testata h1 { font-size: 1.3rem; margin: 0; font-weight: 750; letter-spacing: -0.01em; }

/* ---------- Home ---------- */
.salotto {
  background: linear-gradient(135deg, #F6E8D0 0%, #F2DFC4 100%);
  border: 2px solid #E7D7B8;
  border-radius: 26px;
  padding: 22px 24px 18px;
  margin-bottom: 18px;
  box-shadow: var(--ombra);
}
.saluto { font-size: 1.9rem; font-weight: 750; margin: 0; letter-spacing: -0.01em; }
.data-oggi { color: var(--inchiostro-tenue); margin: 2px 0 0; font-size: 1rem; }
.progresso {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 14px;
  background: rgba(255,255,255,0.75);
  border: 1.5px solid #E0CFA9;
  border-radius: 999px;
  font-size: 0.95rem; font-weight: 650; color: #6B5320;
}

.carta {
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--ombra);
}
.carta .etichetta {
  font-size: 0.85rem; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primario); margin: 0 0 10px;
}
.carta-vincenzo { border-color: #B9C6E2; background: var(--blu-chiaro); }
.carta-vincenzo .etichetta { color: var(--blu); }

.domanda-testo { font-size: 1.42rem; font-weight: 680; line-height: 1.35; margin: 0 0 18px; }

/* menu principale */
.menu-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 6px 0 18px; }
.menu-voce {
  border: 2px solid var(--linea);
  border-radius: 22px;
  min-height: 110px;
  padding: 16px;
  font-size: 1.08rem; font-weight: 680;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px;
  text-align: left;
  box-shadow: var(--ombra);
}
.menu-voce .icona { font-size: 2rem; }
.menu-voce .sotto { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.88rem; }

/* ---------- il libro ---------- */
.libro-copertina { display: flex; align-items: center; gap: 18px; }
.libro-dorso {
  width: 82px; height: 112px; border-radius: 6px 14px 14px 6px;
  background: linear-gradient(115deg, #3E5C97 0%, #24406F 70%);
  border-left: 6px solid #1B3156;
  color: #F3E6C8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 1.5rem; box-shadow: var(--ombra-alta); flex-shrink: 0;
  position: relative;
}
.libro-dorso::after {
  content: ""; position: absolute; right: -4px; top: 6px; bottom: 6px; width: 4px;
  background: repeating-linear-gradient(#F7F3E8 0 2px, #D9D2BE 2px 3px);
  border-radius: 0 3px 3px 0;
}
.libro-dorso .titolo-libro { font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; }
.libro-info { font-size: 1.1rem; }
.libro-info b { font-size: 1.25rem; }

/* ---------- registrazione ---------- */
.domanda-fissa {
  position: sticky; top: 0; z-index: 5;
  background: var(--carta);
  padding: 10px 0 14px;
  font-size: 1.3rem; font-weight: 680; line-height: 1.35;
  border-bottom: 2px solid var(--linea);
  margin-bottom: 20px;
}
.zona-registra { text-align: center; padding: 8px 0 20px; }
.pulsantone {
  width: 190px; height: 190px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 30%, #C05F44, var(--primario) 70%);
  color: var(--bianco);
  font-size: 1.2rem; font-weight: 700;
  margin: 24px auto 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 28px rgba(163, 74, 50, 0.45);
}
.pulsantone .mic { font-size: 3rem; }
.pulsantone.registrando {
  background: var(--bianco);
  color: var(--primario);
  border: 6px solid var(--primario);
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 74, 50, 0.35); }
  50% { box-shadow: 0 0 0 22px rgba(163, 74, 50, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulsantone.registrando { animation: none; } }

.timer { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; }
.stato-ascolto { color: var(--inchiostro-tenue); font-size: 1.05rem; min-height: 1.6em; }
.livello {
  height: 14px; border-radius: 7px; background: var(--carta-scura);
  margin: 14px auto; max-width: 320px; overflow: hidden;
  border: 1px solid var(--linea);
}
.livello > div { height: 100%; width: 0%; background: linear-gradient(90deg, #6FA37E, var(--verde)); border-radius: 7px; transition: width 0.12s linear; }
.controlli-registra { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-top: 18px; }

/* scrittura come alternativa alla voce */
.scrivi-area { display: flex; flex-direction: column; gap: 12px; margin: 14px auto; max-width: 560px; text-align: left; }
.scrivi-testo {
  font-family: inherit; font-size: 1.15rem; line-height: 1.5;
  padding: 14px 16px; border: 2px solid var(--linea); border-radius: 16px;
  background: var(--bianco); color: var(--inchiostro);
  resize: vertical; min-height: 110px;
}
.scrivi-testo.grande { min-height: 260px; font-size: 1.2rem; }
.scrivi-testo:focus-visible { outline: 4px solid var(--blu); outline-offset: 2px; }

/* striscia di foto sopra la chiacchierata */
.strip-foto {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 4px 0 12px; margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.strip-foto img {
  height: 110px; border-radius: 12px;
  border: 2px solid var(--linea); box-shadow: var(--ombra);
  flex-shrink: 0;
}

/* ---------- dialogo ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 20px; }
.bolla { padding: 16px 20px; border-radius: 22px; font-size: 1.2rem; line-height: 1.45; max-width: 92%; }
.bolla-app { background: var(--bianco); border: 2px solid var(--linea); align-self: flex-start; border-bottom-left-radius: 8px; box-shadow: var(--ombra); }
.bolla-mamma { background: var(--primario-chiaro); border: 2px solid #EBCDBF; align-self: flex-end; border-bottom-right-radius: 8px; }
.bolla-nota { color: var(--inchiostro-tenue); font-size: 0.95rem; align-self: center; text-align: center; background: none; border: none; padding: 4px; }

/* ---------- rivedi / conferma ---------- */
.riascolta audio { width: 100%; margin: 14px 0; }
.pila { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.conferma-grande { text-align: center; padding: 30px 10px; }
.conferma-grande .spunta { font-size: 4rem; }
.conferma-grande h2 { font-size: 1.5rem; margin: 12px 0 8px; }
.conferma-grande p { color: var(--inchiostro-tenue); font-size: 1.1rem; }

/* ---------- temi ---------- */
.griglia-temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.tema-carta {
  border: 2px solid rgba(42,37,30,0.12);
  border-radius: 22px;
  padding: 18px; min-height: 150px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  font-size: 1.12rem; font-weight: 700;
  box-shadow: var(--ombra);
  position: relative;
}
.tema-carta .emoji { font-size: 2.1rem; }
.tema-carta .desc { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.86rem; line-height: 1.35; }
.tema-carta .conta { font-weight: 650; color: var(--inchiostro); font-size: 0.92rem; }
.tema-carta .conta.vuoto-tema { color: var(--inchiostro-tenue); font-weight: 500; }
.tema-copertina { width: 100%; height: 90px; object-fit: cover; border-radius: 12px; border: 1.5px solid rgba(42,37,30,0.12); }

/* ---------- pagina narrativa (capitoli e persone) ---------- */
.pagina-narrativa {
  background: var(--carta-calda);
  border: 2px solid var(--linea);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 18px;
  font-size: 1.15rem; line-height: 1.6;
  box-shadow: var(--ombra);
}
.pagina-narrativa p { margin: 0 0 0.9em; }
.pagina-narrativa p:last-child { margin-bottom: 0; }

/* ---------- spunti ---------- */
.spunti-sezione { margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.spunti-sezione .emoji { font-size: 1.5rem; }
.spunti-sezione h3 { font-size: 1.25rem; margin: 0; }
.spunto {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px; margin-bottom: 12px;
  font-size: 1.12rem; font-weight: 600; line-height: 1.4;
}
.spunto .badge {
  align-self: flex-start;
  font-size: 0.78rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.badge-vincenzo { background: var(--blu-chiaro); color: var(--blu); }
.badge-personale { background: var(--verde-chiaro); color: var(--verde); }

/* ---------- storie ---------- */
.storia-riga {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 12px;
}
.storia-riga .quando { color: var(--inchiostro-tenue); font-size: 0.9rem; font-weight: 500; }
.storia-riga .play { margin-left: auto; font-size: 1.5rem; color: var(--primario); }
.storia-testo { font-size: 1.25rem; line-height: 1.6; }
.storia-testo p { margin: 0 0 1em; }
.foto-storia { width: 100%; border-radius: 16px; margin: 12px 0; border: 2px solid var(--linea); box-shadow: var(--ombra); }
.storia-persone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.storia-persone .con-chi { color: var(--inchiostro-tenue); font-weight: 650; font-size: 0.95rem; }
.persona-chip {
  min-height: 48px; padding: 6px 16px; border-radius: 999px;
  font-size: 0.95rem; background: var(--verde-chiaro); border-color: #C4D8C4;
}
.ritratto-persona { display: flex; justify-content: center; margin: 4px 0 8px; }
.ritratto-persona .cerchio { width: 110px; height: 110px; font-size: 2.4rem; }
.reazione {
  background: var(--blu-chiaro); border: 2px solid #B9C6E2; border-radius: 18px;
  padding: 14px 18px; margin: 14px 0; font-size: 1.05rem;
}

/* ---------- famiglia e albero ---------- */
.griglia-volti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.volto {
  background: var(--bianco); border: 2px solid var(--linea); border-radius: 20px;
  padding: 14px; text-align: center; font-size: 1rem; font-weight: 680;
  box-shadow: var(--ombra);
}
.cerchio {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--carta-scura); border: 2.5px solid var(--linea);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: var(--bianco); font-weight: 750;
  overflow: hidden;
}
.cerchio img { width: 100%; height: 100%; object-fit: cover; }
.volto .relazione { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.9rem; }
.fatto { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 1.05rem; }

/* albero interattivo */
.albero-controlli { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.btn-zoom { min-height: 52px; min-width: 52px; font-size: 1.4rem; padding: 4px 16px; border-radius: 14px; }
.albero-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--linea);
  border-radius: 20px;
  background:
    linear-gradient(var(--carta-calda), var(--carta-calda)),
    var(--bianco);
  max-height: 70vh;
  box-shadow: var(--ombra);
}
.albero-canvas { position: relative; }
.albero-linee { position: absolute; inset: 0; pointer-events: none; }
.linea-coppia { stroke: var(--primario); stroke-width: 3; }
.linea-figlio { stroke: var(--verde); stroke-width: 2.5; fill: none; }
.linea-proposta { stroke-dasharray: 7 6; opacity: 0.65; }
.albero-nodo {
  position: absolute;
  background: none; border: none; min-height: 0; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; font-size: 0.95rem; font-weight: 680;
  border-radius: 16px;
}
.albero-nodo .cerchio { width: 72px; height: 72px; margin: 0 0 4px; font-size: 1.5rem; background-color: var(--carta-scura); }
.albero-nodo.proposto .cerchio { border-style: dashed; opacity: 0.8; }
.albero-nodo.proposto .nodo-rel { color: var(--oro); font-weight: 650; }
.albero-nodo.io .nodo-nome { color: var(--primario); }
.nodo-nome { line-height: 1.15; }
.nodo-rel, .nodo-anni { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.78rem; line-height: 1.2; }

.albero { position: relative; padding-left: 4px; }
.generazione { margin-bottom: 8px; }
.generazione .gen-titolo {
  font-size: 0.85rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--inchiostro-tenue); margin: 18px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.gen-titolo::after { content: ""; flex: 1; height: 1.5px; background: var(--linea); }
.gen-fila { display: flex; flex-wrap: wrap; gap: 12px; }
.ramo {
  display: flex; align-items: center; gap: 10px;
  background: var(--bianco); border: 2px solid var(--linea); border-radius: 999px;
  padding: 8px 18px 8px 8px; font-size: 1rem; font-weight: 650;
  box-shadow: var(--ombra);
}
.ramo .cerchio { width: 52px; height: 52px; margin: 0; font-size: 1.2rem; }
.ramo .rel { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.85rem; display: block; }
.ramo.io { background: var(--primario-chiaro); border-color: #E3BCA9; }

/* ---------- foto-racconto ---------- */
.foto-racconto {
  max-width: 100%; max-height: 40vh;
  border-radius: 16px; border: 2px solid var(--linea);
  box-shadow: var(--ombra); margin: 0 auto 8px; display: block;
}
.foto-racconto-didascalia { text-align: center; color: var(--inchiostro-tenue); font-size: 1rem; margin: 0 0 8px; }
.figura-storia { margin: 12px 0; }
.figura-storia .foto-storia { margin: 0; }
.figura-storia figcaption { color: var(--inchiostro-tenue); font-size: 0.95rem; text-align: center; margin-top: 4px; }

/* ---------- fotografie ---------- */
.griglia-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.griglia-foto button { padding: 0; min-height: 0; border-radius: 14px; overflow: hidden; border-width: 2px; }
.griglia-foto img { width: 100%; height: 150px; object-fit: cover; display: block; }
.foto-piena {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30, 25, 18, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 20px;
}
.foto-piena img { max-width: 100%; max-height: 78vh; border-radius: 12px; }
.foto-piena .didascalia { color: #F2EADC; font-size: 1.05rem; text-align: center; }
.foto-piena .didascalia-data { display: block; font-size: 0.85rem; color: #C9BFA9; margin-top: 2px; }
.foto-piena button { background: var(--bianco); }
.foto-piena .btn-racconta-foto {
  background: linear-gradient(180deg, #B0543B, var(--primario));
  border-color: var(--primario-scuro); color: var(--bianco);
}

/* ---------- aiuto ---------- */
.passo-aiuto { display: flex; gap: 16px; align-items: flex-start; }
.passo-aiuto .icona { font-size: 2.2rem; line-height: 1.2; }

/* ---------- impostazioni ---------- */
.piede-home { display: flex; justify-content: center; gap: 18px; margin-top: 4px; }
.pila-scelte { display: flex; flex-direction: column; gap: 10px; }
.scelta-testo { width: 100%; text-align: left; }
.scelta-testo.attiva {
  border-color: var(--verde); background: var(--verde-chiaro);
  box-shadow: inset 0 0 0 1.5px var(--verde);
}
.scelta-testo.attiva::after { content: "  ✓"; color: var(--verde); font-weight: 750; }

/* ---------- barra menu in basso ---------- */
.barra-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; gap: 4px;
  background: var(--bianco);
  border-top: 2px solid var(--linea);
  box-shadow: 0 -2px 12px rgba(42, 37, 30, 0.08);
  padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.barra-menu button {
  flex: 1; max-width: 140px; min-height: 64px;
  border: none; background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 0.82rem; font-weight: 650; color: var(--inchiostro-tenue);
  border-radius: 14px; padding: 6px 4px;
}
.barra-menu button .icona { font-size: 1.55rem; line-height: 1.2; }
.barra-menu button.attiva { color: var(--primario); background: var(--primario-chiaro); }
body.con-barra #app { padding-bottom: 130px; }

/* ---------- varie ---------- */
.avviso {
  background: var(--primario-chiaro); border: 2px solid #E3BCA9;
  border-radius: 16px; padding: 14px 18px; margin: 14px 0; font-size: 1.05rem;
}
.vuoto { text-align: center; color: var(--inchiostro-tenue); padding: 40px 10px; font-size: 1.1rem; }
h2.sezione { font-size: 1.5rem; margin: 6px 0 16px; }

@media (max-width: 440px) {
  html { font-size: calc(19px * var(--scala-testo, 1)); }
  .menu-griglia { grid-template-columns: 1fr 1fr; }
  .pulsantone { width: 170px; height: 170px; }
}