/* ============================================================================
   CAPOLAVORO — layer di regia Postazione + Home (evoluzione de "Il Sogno").
   Caricato DOPO styles.css. OGNI regola è scoped a:
     .app-shell.is-postazione-context                          (Postazione)
     .app-shell[data-context="home"]:not(.ui-professional)     (Home)
   o alle forme body:has(...) per i nodi fuori shell (velo, decorazione logo).
   Salon e Pro non sono MAI raggiunti da questo file: nessun selettore nudo.
   Motion: SOLO transform/opacity; prefers-reduced-motion rispettato in coda.
   Nessun blur/backdrop-filter. Zero !important.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · LESSICO — token locali (mai su :root globale).
   UN SOLO ORO: --capo-oro, caldo e desaturato. Mai riempimenti pieni d'oro,
   mai testo lungo o minuto in oro. CTA primarie in panna.
   ---------------------------------------------------------------------------- */
.app-shell.is-postazione-context,
.app-shell[data-context="home"]:not(.ui-professional) {
  --capo-nero: #0b0b0b;
  --capo-inchiostro: #14110e;
  --capo-panna: #f0ece4;
  --capo-muto: #a59c92;
  --capo-oro: #c9a35c;
  --capo-oro-filo: rgba(201, 163, 92, 0.5);
  --capo-oro-lieve: rgba(201, 163, 92, 0.28);
  --capo-filo: rgba(240, 236, 228, 0.14);
  --capo-filo-forte: rgba(240, 236, 228, 0.3);
  --capo-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* retro-compatibilità con i nomi del Sogno usati da regole ereditate */
  --sogno-nero: var(--capo-nero);
  --sogno-panna: var(--capo-panna);
  --sogno-muto: var(--capo-muto);
  --sogno-oro: var(--capo-oro);
  --sogno-filo: var(--capo-filo);
  --sogno-filo-forte: var(--capo-filo-forte);
  --sogno-curva: var(--capo-curva);
}

/* ----------------------------------------------------------------------------
   0b · LA LUCE — l'ambiente radiale passa dal quadro (684px, bordi visibili)
   alla sala intera: fondo continuo su tutta la pagina, nessuna cornice.
   ---------------------------------------------------------------------------- */
.app-shell.is-postazione-context,
.app-shell[data-context="home"]:not(.ui-professional) {
  background-image: radial-gradient(120% 70% at 50% 14%, rgba(28, 28, 28, 0.55) 0%, rgba(10, 10, 10, 0) 78%);
}
.app-shell.is-postazione-context .mirror-stage.ambient-scene,
.app-shell[data-context="home"]:not(.ui-professional) .mirror-stage.ambient-scene {
  background-image: none;
}
/* la vignetta legacy dei messaggi (::before, ritagliata dal box → bordi netti)
   lascia il posto alla luce unica della sala: nessun quadro dentro il quadro */
.app-shell.is-postazione-context .messages::before,
.app-shell[data-context="home"]:not(.ui-professional) .messages::before {
  content: none;
}

/* ============================================================================
   1 · LA SCENA — ricomposizione a palcoscenico (SOLO stati-domanda).
   La domanda scende verso le opzioni: un'unica unità visiva ancorata in basso,
   la luce (spazio negativo) resta in alto. Il taccuino NON abita più la scena:
   è una pillola compatta sotto i capitoli, uguale su tutti i device (sez. 4).
   ============================================================================ */
.app-shell.is-postazione-context.ui-guiding .mirror-stage.ambient-scene,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .mirror-stage.ambient-scene {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'header'
    'dialogue'
    'actions';
}
.app-shell.is-postazione-context.ui-guiding .stage-header,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .stage-header {
  grid-area: header;
}
.app-shell.is-postazione-context.ui-guiding .dialogue-block,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .dialogue-block {
  grid-area: dialogue;
  padding-top: 0;
  margin-top: 0;
  justify-content: flex-end;
}
.app-shell.is-postazione-context.ui-guiding .scene-actions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .scene-actions {
  grid-area: actions;
  padding-top: clamp(0.5rem, 1.6vh, 1rem);
  padding-bottom: clamp(1.2rem, 5vh, 3.2rem);
}
/* La feritoia dei messaggi si apre: la domanda vive libera, senza gabbia.
   justify-content flex-end: la domanda scende verso le opzioni — un'unica scena,
   la luce (spazio negativo) resta in alto. */
.app-shell.is-postazione-context.ui-guiding .messages,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .messages {
  min-height: 0;
  max-height: none;
  overflow-y: visible;
  padding-bottom: 0;
  justify-content: flex-end;
}
/* Telefono (<700px): la scena si impila — domanda, azioni. Il taccuino non è più
   nella griglia scena: è la pillola compatta sotto i capitoli (sez. 4). */
@media (max-width: 699px) {
  .app-shell.is-postazione-context.ui-guiding .mirror-stage.ambient-scene,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding .mirror-stage.ambient-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'header'
      'dialogue'
      'actions';
  }
}
.app-shell.is-postazione-context.ui-guiding .messages::before,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .messages::before {
  content: none;
}

/* ============================================================================
   2 · L'INGRESSO
   ============================================================================ */

/* — Postazione · attract: presenza scenica, invito come gioiello che respira. — */
.app-shell.is-postazione-context #attractLayer .attract-phrase {
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  font-weight: 500;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.app-shell.is-postazione-context #attractLayer .attract-phrase-stack::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--capo-oro);
  opacity: 0.75;
  margin: 1.5rem auto 0;
}
.app-shell.is-postazione-context #attractLayer .attract-cta {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--capo-panna);
  border: 1px solid var(--capo-oro-lieve);
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .app-shell.is-postazione-context #attractLayer .attract-cta {
    animation: capo-invito 3.6s ease-in-out infinite;
  }
}
@keyframes capo-invito {
  0%, 100% { opacity: 0.62; transform: none; }
  50% { opacity: 1; transform: scale(1.03); }
}

/* — Home · ingresso: la soglia ricomposta. Logo alzato sopra il centro,
     invito e CTA come battuta d'apertura in basso: mai in collisione. — */
body:has(.app-shell[data-context="home"]:not(.ui-professional).ui-standby) .salon-logo-heart-wrap {
  transform: translateY(-14vh);
}
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .mirror-stage.ambient-scene {
  display: flex;
  flex-direction: column;
}
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .scene-actions {
  margin-top: auto;
  padding-bottom: clamp(1.6rem, 6vh, 4rem);
}
/* invito montato dal modulo (nodo additivo .capo-invito, solo Home standby) */
.capo-invito { display: none; }
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito {
  display: block;
  text-align: center;
  margin: 0 auto clamp(1rem, 3vh, 1.8rem);
  max-width: 24ch;
}
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito .capo-invito-frase {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--capo-panna);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito .capo-invito-sub {
  font-size: 0.92rem;
  color: var(--capo-muto);
  margin: 0;
}
/* desktop: la frase respira in larghezza (mai in colonna sul logo) e il logo sale */
@media (min-width: 1025px) {
  body:has(.app-shell[data-context="home"]:not(.ui-professional).ui-standby) .salon-logo-heart-wrap {
    transform: translateY(-18vh) scale(0.86);
  }
  .app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito {
    max-width: 44ch;
  }
  .app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito .capo-invito-frase {
    font-size: 1.9rem;
  }
}
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .capo-invito::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--capo-oro);
  opacity: 0.75;
  margin: 1.1rem auto 0;
}
/* CTA d'ingresso Home: panna piena, presenza da soglia. */
.app-shell[data-context="home"]:not(.ui-professional).ui-standby .btn-primary#startBtn {
  background: var(--capo-panna);
  color: #14110e;
  border: 1px solid var(--capo-panna);
  border-radius: 999px;
  min-height: 3.2rem;
  padding: 0.85rem 2.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* — Home · il nome come rito. — */
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="ASK_NAME"] .msg.assistant {
  font-size: clamp(1.7rem, 1rem + 3vw, 2.6rem);
  line-height: 1.15;
}
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="ASK_NAME"] #textInput {
  text-align: center;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  border-color: var(--capo-filo-forte);
  transition: border-color 0.25s ease;
}
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="ASK_NAME"] #textInput:focus {
  border-color: var(--capo-oro);
  outline: none;
}

/* ============================================================================
   3 · LA DOMANDA — voce autorevole, riconoscimento, carte del guardaroba.
   ============================================================================ */

/* La domanda: unica, centrata, tipografia da manifesto. */
.app-shell.is-postazione-context.ui-guiding .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .msg.assistant {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
  background: none;
  border: 0;
  box-shadow: none;
}
/* Il riconoscimento: micro-frase fissa, sigillo della risposta precedente. */
.capo-ack { display: none; }
.app-shell.is-postazione-context .capo-ack,
.app-shell[data-context="home"]:not(.ui-professional) .capo-ack {
  display: block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--capo-muto);
  margin: 0 auto 1.15rem;
  text-align: center;
}
.app-shell.is-postazione-context .capo-ack::before,
.app-shell[data-context="home"]:not(.ui-professional) .capo-ack::before {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: var(--capo-oro);
  opacity: 0.8;
  vertical-align: middle;
  margin-right: 0.6rem;
}
@media (prefers-reduced-motion: no-preference) {
  .app-shell.is-postazione-context .capo-ack,
  .app-shell[data-context="home"]:not(.ui-professional) .capo-ack {
    animation: capo-salita 0.5s var(--capo-curva) both;
  }
}

/* Le opzioni: carte del guardaroba, non bottoni da form. */
.app-shell.is-postazione-context.ui-guiding #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.6vh, 0.95rem) clamp(0.7rem, 2vw, 1.1rem);
  width: 100%;
  max-width: 40rem;
}
@media (max-width: 560px) {
  .app-shell.is-postazione-context.ui-guiding #flowOptions,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }
}
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode {
  width: 100%;
  margin: 0;
  min-height: 56px;
  padding: 0.95rem 1.2rem;
  background: rgba(240, 236, 228, 0.03);
  border: 1px solid var(--capo-filo);
  border-radius: 14px;
  color: var(--capo-panna);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: normal;
  line-height: 1.3;
  text-shadow: none;
  transition: border-color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:not(:disabled):hover,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:not(:disabled):hover {
  border-color: var(--capo-oro-filo);
  background: rgba(240, 236, 228, 0.05);
}
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:active,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:active {
  border-color: var(--capo-oro);
  transform: scale(0.985);
}
/* selezione multipla: filo d'oro + sigillo, mai campiture gialle */
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode.flow-option-selected,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode.flow-option-selected {
  border-color: var(--capo-oro);
  background: rgba(201, 163, 92, 0.08);
  box-shadow: none;
}
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode.flow-option-selected::after,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode.flow-option-selected::after {
  content: '✓';
  margin-left: 0.5rem;
  color: var(--capo-oro);
  font-weight: 600;
}
/* Prima Mossa: le quattro carte-desiderio, più solenni. */
.app-shell.is-postazione-context[data-flow-state="POSTAZIONE_FIRST_MOVE"] .msg.assistant {
  font-size: clamp(1.6rem, 1rem + 2.8vw, 2.6rem);
  max-width: 20ch;
}
.app-shell.is-postazione-context[data-flow-state="POSTAZIONE_FIRST_MOVE"] #flowOptions .btn-mode {
  border-color: var(--capo-oro-lieve);
  min-height: clamp(64px, 9vh, 84px);
  font-size: 1.05rem;
}
.app-shell.is-postazione-context[data-flow-state="POSTAZIONE_FIRST_MOVE"] #flowOptions .btn-mode:active {
  border-color: var(--capo-oro);
}
@media (prefers-reduced-motion: no-preference) {
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode {
    animation: capo-salita 0.55s var(--capo-curva) both;
  }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(2),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(2) { animation-delay: 0.05s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(3),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(3) { animation-delay: 0.1s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(4),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(4) { animation-delay: 0.15s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(5),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(5) { animation-delay: 0.2s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(6),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(6) { animation-delay: 0.25s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(7),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(7) { animation-delay: 0.3s; }
  .app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode:nth-child(8),
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode:nth-child(8) { animation-delay: 0.35s; }
}
@keyframes capo-salita {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* "Continua" delle scelte multiple: panna primaria; sottovoce finché non c'è
   una scelta (solo dove :has è supportato — altrove resta piena: mai mentire). */
.app-shell.is-postazione-context.ui-guiding .concern-continue-slot .btn,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .concern-continue-slot .btn {
  background: var(--capo-panna);
  color: #14110e;
  border: 1px solid var(--capo-panna);
  border-radius: 999px;
  min-height: 52px;
  padding: 0.8rem 2.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: opacity 0.25s ease, transform 160ms ease;
}
.app-shell.is-postazione-context.ui-guiding:not(:has(.flow-option-selected)) .concern-continue-slot .btn,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding:not(:has(.flow-option-selected)) .concern-continue-slot .btn {
  opacity: 0.35;
}
.app-shell.is-postazione-context.ui-guiding .concern-continue-slot .btn:active,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .concern-continue-slot .btn:active {
  transform: scale(0.985);
}

/* "Ricomincia": presenza da servizio, mai da protagonista. */
.app-shell.is-postazione-context.ui-guiding .btn-reset-outside,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .btn-reset-outside {
  opacity: 0.42;
  border-color: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.app-shell.is-postazione-context.ui-guiding .btn-reset-outside:not(:disabled):hover,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .btn-reset-outside:not(:disabled):hover {
  opacity: 0.85;
  border-color: var(--capo-filo);
}

/* ============================================================================
   4 · IL TACCUINO — «Il tuo caso»: pillola COMPATTA sotto i capitoli, UGUALE su
   tutti i device. Chiusa di default (altezza FISSA: non cresce col numero di
   risposte). Al tocco apre un pannello FUORI FLUSSO (assoluto, ancorato alla
   pillola) che non sposta domanda né opzioni. Motion: solo opacity/transform.
   Il nodo #sognoCase è rimontato dal modulo dentro .stage-header, subito dopo i
   capitoli: qui vive la sola veste, scoped ai due contesti dell'opera.
   ============================================================================ */
.sogno-case { display: none; }
.sogno-case[hidden] { display: none; }

/* La pillola vive SOLO nelle scene-domanda con almeno una riga (is-on & !is-empty).
   Conteggio 0 → pillola assente (nessuna altezza occupata). Uguale su ogni device. */
.app-shell.is-postazione-context.ui-guiding .sogno-case.is-on,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .sogno-case.is-on {
  display: block;
  position: relative;
  z-index: 6; /* ordine LOCALE dentro .stage-header — vedi nota STACKING qui sotto */
  margin: 0.5rem auto 0;
  width: max-content;
  max-width: min(92vw, 26rem);
}
/* STACKING — causa reale per cui il cassetto finiva SOTTO la scena: .stage-header ha
   position:relative + z-index:2 (styles.css) e quindi CREA uno stacking context; lo
   z-index:6 qui sopra vale SOLO dentro quel contesto. Nel contesto padre (.app-shell)
   la scena dipinge dopo — .dialogue-block (z:2, più avanti nel DOM) e .scene-actions
   (z:3) — e copriva il pannello: nessun numero di z-index locale poteva bastare.
   Si corregge il CONTESTO: mentre il cassetto è APERTO l'intero header sale sopra la
   scena (resta sotto l'attract, z:50). A cassetto chiuso nulla cambia. */
.app-shell.is-postazione-context.ui-guiding .stage-header:has(.sogno-case.is-open),
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .stage-header:has(.sogno-case.is-open) {
  z-index: 8;
}
.app-shell.is-postazione-context.ui-guiding .sogno-case.is-on.is-empty,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .sogno-case.is-on.is-empty {
  display: none;
}

/* — La pillola chiusa: kicker oro «IL TUO CASO» + conteggio. Altezza FISSA. — */
.sogno-case .sogno-case-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  appearance: none;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.92), rgba(11, 10, 9, 0.92));
  color: var(--capo-muto);
  border: 1px solid var(--capo-filo);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  min-height: 34px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.sogno-case .sogno-case-toggle:hover { border-color: var(--capo-filo-forte); }
.sogno-case .sogno-case-toggle:focus-visible {
  outline: 2px solid var(--capo-oro);
  outline-offset: 2px;
}
.sogno-case .sogno-case-toggle .capo-strip-label {
  text-transform: uppercase;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--capo-oro);
  font-weight: 600;
  flex-shrink: 0;
}
.sogno-case .sogno-case-toggle .sogno-case-count {
  flex-shrink: 0;
  color: var(--capo-panna);
  background: transparent;
  border: 1px solid var(--capo-filo-forte);
  border-radius: 999px;
  min-width: 1.3rem;
  height: 1.3rem;
  line-height: 1.2rem;
  font-size: 0.66rem;
  text-align: center;
  font-weight: 600;
}
/* micro-lampo d'oro SOLO al cambiamento materiale del taccuino (classe posta dal modulo) */
@media (prefers-reduced-motion: no-preference) {
  .sogno-case .sogno-case-toggle .sogno-case-count.is-flash {
    animation: capo-lampo 0.5s var(--capo-curva) both;
  }
}
@keyframes capo-lampo {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 163, 92, 0); color: var(--capo-panna); }
  35% { transform: scale(1.16); box-shadow: 0 0 0 3px var(--capo-oro-lieve); color: var(--capo-oro); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 163, 92, 0); color: var(--capo-panna); }
}

/* — Il pannello aperto: FUORI FLUSSO, ancorato sotto la pillola. Altezza massima
     STATICA da viewport (+ safe-area); scroll interno. Mai in flusso di scena:
     non sposta domanda né opzioni. Apertura/chiusura: solo opacity/transform. — */
.sogno-case .sogno-case-body {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: min(88vw, 22rem);
  max-height: min(58dvh, 24rem);
  max-height: min(calc(58dvh - env(safe-area-inset-bottom, 0px)), 24rem);
  overflow-y: auto;
  text-align: left;
  /* SFONDO PIENO: alpha = 1 (era 0.98 → la scena traspariva). L'opacità viene
     ESCLUSIVAMENTE dal colore di sfondo: nessun opacity<1 sul pannello aperto,
     nessuno scrim sulla scena. */
  background: linear-gradient(180deg, rgb(20, 17, 14), rgb(11, 10, 9));
  border: 1px solid var(--capo-filo);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  /* stacco SOBRIO: sola separazione, niente effetto finestra flottante */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.26s var(--capo-curva), transform 0.26s var(--capo-curva),
    visibility 0s linear 0.26s;
}
.sogno-case.is-open .sogno-case-body {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.26s var(--capo-curva), transform 0.26s var(--capo-curva),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .sogno-case .sogno-case-body {
    transition: opacity 0.001s linear, visibility 0s;
    transform: translateX(-50%);
  }
  .sogno-case.is-open .sogno-case-body { transform: translateX(-50%); }
}

/* — Veste interna del taccuino (comune) — */
.sogno-case .sogno-case-kicker {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--capo-oro);
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.sogno-case .sogno-case-sub {
  font-size: 0.78rem;
  color: var(--capo-muto);
  margin: 0 0 0.55rem;
}
.sogno-case .sogno-case-rule {
  border: 0;
  height: 1px;
  background: var(--capo-filo);
  margin: 0.45rem 0 0.35rem;
}
.sogno-case .sogno-case-row {
  padding: 0.42rem 0;
  border-top: 1px solid rgba(240, 236, 228, 0.07);
}
.sogno-case .sogno-case-row:first-of-type { border-top: 0; }
.sogno-case .sogno-case-row-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--capo-muto);
  margin: 0 0 0.14rem;
}
.sogno-case .sogno-case-row-value {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--capo-panna);
  margin: 0;
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .sogno-case .sogno-case-row.is-new { animation: capo-riga 0.5s var(--capo-curva) both; }
}
@keyframes capo-riga {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================================
   5 · I CAPITOLI — progresso qualitativo (nodo additivo .capo-chapters
   nell'header, gestito dal modulo; qui solo la veste). Tre atti nominati,
   filo d'oro che avanza. Nessun numero.
   ============================================================================ */
.capo-chapters { display: none; }
.app-shell.is-postazione-context.ui-guiding .capo-chapters,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.2rem);
  margin: 0.65rem auto 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.38);
  padding-bottom: 0.45rem;
  position: relative;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter::after,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: rgba(240, 236, 228, 0.12);
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter > i,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--capo-oro);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--capo-curva);
  z-index: 1;
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter.is-active,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter.is-active {
  color: var(--capo-panna);
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter.is-done,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter.is-done {
  color: rgba(240, 236, 228, 0.6);
}
/* riempimento del filo d'oro: capitolo attivo = filo sommesso, capitolo chiuso = filo pieno.
   Qualitativo, nessun numero: la transizione del transform È la micro-transizione di capitolo. */
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter > i,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter > i {
  transition: transform 0.6s var(--capo-curva), opacity 0.4s ease;
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter.is-active > i,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter.is-active > i {
  transform: scaleX(1);
  opacity: 0.45;
}
.app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter.is-done > i,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter.is-done > i {
  transform: scaleX(1);
  opacity: 1;
}
/* la barra dei capitoli è pura regia: mai un tap mangiato */
.capo-chapters { pointer-events: none; }
/* schermi stretti: la terzina resta su una riga, sottovoce */
@media (max-width: 560px) {
  .app-shell.is-postazione-context.ui-guiding .capo-chapters,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters {
    gap: 0.8rem;
  }
  .app-shell.is-postazione-context.ui-guiding .capo-chapters .capo-chapter,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding .capo-chapters .capo-chapter {
    font-size: 0.54rem;
    letter-spacing: 0.14em;
  }
}

/* ============================================================================
   6 · LO SGUARDO — consenso foto come momento di fiducia.
   ============================================================================ */
.app-shell.is-postazione-context[data-flow-state="COLLECT_PHOTO"] .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="COLLECT_PHOTO"] .msg.assistant {
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  max-width: 30ch;
}
.app-shell.is-postazione-context[data-flow-state="COLLECT_PHOTO"] .photo-box,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="COLLECT_PHOTO"] .photo-box {
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.92), rgba(11, 10, 9, 0.92));
  border: 1px solid var(--capo-filo);
  border-radius: 18px;
  max-width: 30rem;
  padding: 1.4rem 1.5rem 1.5rem;
}
.app-shell.is-postazione-context[data-flow-state="COLLECT_PHOTO"] .photo-consent-title,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="COLLECT_PHOTO"] .photo-consent-title {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--capo-oro);
  font-weight: 600;
}
.app-shell.is-postazione-context[data-flow-state="COLLECT_PHOTO"] .photo-primary-actions .btn-primary,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="COLLECT_PHOTO"] .photo-primary-actions .btn-primary {
  background: var(--capo-panna);
  color: #14110e;
  border-radius: 999px;
  border-color: var(--capo-panna);
  font-weight: 600;
}
.app-shell.is-postazione-context[data-flow-state="COLLECT_PHOTO"] .photo-primary-actions .btn-secondary,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="COLLECT_PHOTO"] .photo-primary-actions .btn-secondary {
  background: transparent;
  border-color: var(--capo-filo-forte);
  border-radius: 999px;
}

/* ============================================================================
   7 · L'ATTESA — il velo (#sognoVeil). Overlay puramente visivo, pointer-events
   none; copre TUTTA la scena (nessun bottone in trasparenza).
   ============================================================================ */
.sogno-veil { display: none; }
.sogno-veil[hidden] { display: none; }
body:has(.app-shell.is-postazione-context) .sogno-veil.is-on,
body:has(.app-shell[data-context="home"]:not(.ui-professional)) .sogno-veil.is-on {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(11, 10, 9, 0.97), rgba(4, 4, 4, 0.995));
  opacity: 0;
  transition: opacity 0.45s ease;
}
body:has(.app-shell.is-postazione-context) .sogno-veil.is-on.is-visible,
body:has(.app-shell[data-context="home"]:not(.ui-professional)) .sogno-veil.is-on.is-visible {
  opacity: 1;
}
.sogno-veil .sogno-veil-inner {
  max-width: 30rem;
  text-align: center;
}
.sogno-veil .sogno-veil-kicker {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #c9a35c;
  font-weight: 600;
  margin: 0 0 0.9rem;
}
.sogno-veil .sogno-veil-title {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 1rem + 2vw, 2.1rem);
  line-height: 1.2;
  color: #f0ece4;
  margin: 0 0 1.3rem;
  letter-spacing: -0.01em;
}
.sogno-veil .sogno-veil-line {
  font-size: 0.98rem;
  color: #a59c92;
  margin: 0.4rem 0 0;
  opacity: 0;
}
.sogno-veil .sogno-veil-line.is-strong { color: #f0ece4; }
@media (prefers-reduced-motion: no-preference) {
  .sogno-veil .sogno-veil-line { animation: capo-eco 0.6s var(--capo-curva, ease) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .sogno-veil .sogno-veil-line { opacity: 1; }
}
@keyframes capo-eco {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.sogno-veil .sogno-veil-rule {
  border: 0;
  width: 2.2rem;
  height: 1px;
  background: #c9a35c;
  opacity: 0.75;
  margin: 1.2rem auto 0.2rem;
}

/* ============================================================================
   8 · LA RIVELAZIONE — il racconto prima della lettura, poi i sipari.
   Il testo della Voce resta VERBATIM: qui solo cornice e coreografia.
   ============================================================================ */

/* Il richiamo del taccuino (nodo additivo .capo-recap, montato dal modulo) */
.capo-recap { display: none; }
.app-shell.is-postazione-context .capo-recap,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap {
  display: block;
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  text-align: center;
}
.app-shell.is-postazione-context .capo-recap-kicker,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap-kicker {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--capo-oro);
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.app-shell.is-postazione-context .capo-recap-line,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap-line {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--capo-muto);
  margin: 0.15rem 0 0;
  letter-spacing: 0.01em;
}
.app-shell.is-postazione-context .capo-recap-line strong,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap-line strong {
  color: var(--capo-panna);
  font-weight: 500;
}
.app-shell.is-postazione-context .capo-recap-photo,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap-photo {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--capo-muto);
  margin: 0.8rem 0 0;
}
.app-shell.is-postazione-context .capo-recap-photo::before,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap-photo::before {
  content: '✦';
  color: var(--capo-oro);
  margin-right: 0.45rem;
  font-size: 0.7rem;
}
.app-shell.is-postazione-context .capo-recap::after,
.app-shell[data-context="home"]:not(.ui-professional) .capo-recap::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--capo-oro);
  opacity: 0.7;
  margin: 1.3rem auto 0;
}
@media (prefers-reduced-motion: no-preference) {
  .app-shell.is-postazione-context .capo-recap,
  .app-shell[data-context="home"]:not(.ui-professional) .capo-recap {
    animation: capo-salita 0.6s var(--capo-curva) both;
  }
}

/* capitolo (copy fisso di regia) */
.app-shell.is-postazione-context .sogno-chapter,
.app-shell[data-context="home"]:not(.ui-professional) .sogno-chapter {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--capo-oro);
  font-weight: 600;
  text-align: center;
  margin: 0.4rem auto 1.1rem;
}
.app-shell.is-postazione-context .sogno-chapter::after,
.app-shell[data-context="home"]:not(.ui-professional) .sogno-chapter::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--capo-oro);
  opacity: 0.65;
  margin: 0.8rem auto 0;
}
/* sipari in sequenza (testo VERBATIM, solo coreografia) */
.app-shell.is-postazione-context .sogno-line,
.app-shell[data-context="home"]:not(.ui-professional) .sogno-line {
  display: block;
  margin: 0 0 0.85em;
}
.app-shell.is-postazione-context .sogno-line:last-child,
.app-shell[data-context="home"]:not(.ui-professional) .sogno-line:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .app-shell.is-postazione-context .sogno-line,
  .app-shell[data-context="home"]:not(.ui-professional) .sogno-line {
    opacity: 0;
    animation: capo-sipario 0.7s var(--capo-curva) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.is-postazione-context .sogno-line,
  .app-shell[data-context="home"]:not(.ui-professional) .sogno-line { opacity: 1; }
}
@keyframes capo-sipario {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Gerarchia delle uscite dalla proposta: la routine è il passo naturale (panna),
   il congedo è sottovoce. L'ordine delle opzioni è fisso lato server. */
.app-shell.is-postazione-context[data-flow-state="PROPOSAL_SALON"] #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="PROPOSAL_SALON"] #flowOptions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.app-shell.is-postazione-context[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:first-child,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:first-child {
  background: var(--capo-panna);
  background-image: none;
  color: #14110e;
  border: 1px solid var(--capo-panna);
  border-radius: 999px;
  min-height: 54px;
  padding: 0.9rem 2.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: none;
}
.app-shell.is-postazione-context[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:last-child,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:last-child {
  background: transparent;
  border-color: transparent;
  color: var(--capo-muto);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 44px;
}
.app-shell.is-postazione-context[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:last-child:not(:disabled):hover,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="PROPOSAL_SALON"] #flowOptions .btn-mode:last-child:not(:disabled):hover {
  color: var(--capo-panna);
}

/* La proposta come lettera: via la bolla-chat anche su Home e desktop. */
.app-shell.is-postazione-context.ui-proposal[data-flow-state="PROPOSAL_SALON"] .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal[data-flow-state="PROPOSAL_SALON"] .msg.assistant {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.08rem, 2.2vw, 1.26rem);
  line-height: 1.72;
  letter-spacing: 0.015em;
  padding: 1.2rem 0.25rem 2rem;
}
/* respiro sotto il testo perché l'ultima riga superi la zona CTA nello scroll */
.app-shell.is-postazione-context.ui-proposal .messages,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal .messages {
  padding-bottom: clamp(2.5rem, 9vh, 6rem);
}
/* LETTURA DEL CASO — un SOLO scroll: la lettera scorre con la PAGINA, non in un cassetto
   interno (max-height/overflow) che, sommato allo scroll pagina, incastrava la CTA sul bordo
   inferiore all'apertura. La riga-scena si dimensiona al contenuto e spinge la zona CTA SOTTO
   la lettera (mai sopra): niente doppio scroll, la CTA si raggiunge scorrendo e resta libera. */
.app-shell.is-postazione-context.ui-proposal[data-flow-state="PROPOSAL_SALON"] .messages,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal[data-flow-state="PROPOSAL_SALON"] .messages {
  overflow: visible;
  max-height: none;
}
.app-shell.is-postazione-context.ui-proposal[data-flow-state="PROPOSAL_SALON"] .mirror-stage.ambient-scene,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal[data-flow-state="PROPOSAL_SALON"] .mirror-stage.ambient-scene {
  grid-template-rows: auto auto auto;
  align-content: space-between;
}
/* zona CTA leggibile: fondale pieno che sale morbido, niente card fantasma */
.app-shell.is-postazione-context.ui-proposal .scene-actions::before,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal .scene-actions::before {
  background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.92) 38%, rgba(11, 10, 9, 0.98) 100%);
  width: 100vw;
  height: 130%;
}

/* ============================================================================
   9 · LA ROUTINE — il rituale a casa.
   ============================================================================ */
/* il capitolo di regia apre la scena: prima di intro (order -2) e card (order -1) */
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .msg.assistant .sogno-chapter,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .msg.assistant .sogno-chapter {
  order: -3;
}
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .routine-cards-intro,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .routine-cards-intro,
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .routine-steps-lede,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .routine-steps-lede {
  text-align: center;
  color: var(--capo-muto);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .messages,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .messages {
  padding-bottom: clamp(3rem, 10vh, 6.5rem);
}
/* niente bolla-pannello dietro routine e riepilogo: fondo nero continuo, cards in scena */
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .msg.assistant,
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .msg.assistant {
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .scene-actions::before,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .scene-actions::before {
  background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.92) 38%, rgba(11, 10, 9, 0.98) 100%);
  width: 100vw;
  height: 130%;
}
/* micro-bordo oro del well immagine: allineato all'unico oro del layer */
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .routine-product-cards .routine-product-image-wrap,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .routine-product-cards .routine-product-image-wrap {
  box-shadow: inset 0 0 0 1px var(--capo-oro-lieve);
}
.app-shell.is-postazione-context[data-flow-state="HOME_ROUTINE"] .routine-product-cards .routine-product-phase,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] .routine-product-cards .routine-product-phase {
  color: var(--capo-oro);
  letter-spacing: 0.22em;
  font-weight: 600;
}
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="HOME_ROUTINE"] #flowOptions .btn-mode {
  background: var(--capo-panna);
  background-image: none;
  color: #14110e;
  border: 1px solid var(--capo-panna);
  border-radius: 999px;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-shadow: none;
}

/* ============================================================================
   10 · IL RIEPILOGO E LA CONSEGNA
   ============================================================================ */
/* badge dei servizi: etichetta sopra il nome, mai in collisione */
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-card,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  border-color: var(--capo-oro-lieve);
}
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-badge,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-badge {
  order: -1;
  position: static;
  float: none;
  margin: 0 0 0.15rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--capo-oro);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  font-weight: 600;
  text-transform: uppercase;
}
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-name,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-name {
  width: 100%;
}
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-benefit,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .service-hero-benefit {
  width: 100%;
  margin: 0;
}
/* respiro-scroll: l'ultima card supera i bottoni */
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .messages,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .messages {
  padding-bottom: clamp(3rem, 10vh, 6.5rem);
}
.app-shell.is-postazione-context[data-flow-state="CONSULTATION_SUMMARY"] .scene-actions::before,
.app-shell[data-context="home"]:not(.ui-professional)[data-flow-state="CONSULTATION_SUMMARY"] .scene-actions::before {
  background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.92) 38%, rgba(11, 10, 9, 0.98) 100%);
  width: 100vw;
  height: 130%;
}

/* — Mini-card «A casa» (layer additivo .capo-minicards; le pill originali
     restano nel DOM, silenziate qui sotto solo quando le card sono montate) — */
.app-shell.is-postazione-context .summary-routine-pills:has(.capo-minicards) .summary-routine-pills-inner,
.app-shell[data-context="home"]:not(.ui-professional) .summary-routine-pills:has(.capo-minicards) .summary-routine-pills-inner {
  display: none;
}
.app-shell.is-postazione-context .capo-minicards,
.app-shell[data-context="home"]:not(.ui-professional) .capo-minicards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.app-shell.is-postazione-context .capo-minicard,
.app-shell[data-context="home"]:not(.ui-professional) .capo-minicard {
  border: 1px solid var(--capo-filo);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  background: rgba(240, 236, 228, 0.03);
  text-align: left;
}
.app-shell.is-postazione-context .capo-minicard-role,
.app-shell[data-context="home"]:not(.ui-professional) .capo-minicard-role {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--capo-oro);
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.app-shell.is-postazione-context .capo-minicard-brand,
.app-shell[data-context="home"]:not(.ui-professional) .capo-minicard-brand {
  font-size: 0.74rem;
  color: var(--capo-muto);
  letter-spacing: 0.04em;
  margin: 0 0 0.15rem;
}
.app-shell.is-postazione-context .capo-minicard-name,
.app-shell[data-context="home"]:not(.ui-professional) .capo-minicard-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--capo-panna);
  line-height: 1.3;
  margin: 0;
}

/* — Presentazione e consegna: il sigillo — */
.app-shell.is-postazione-context .jervi-presentation-code {
  border-color: var(--capo-oro-filo);
}
.app-shell.is-postazione-context .jervi-plan-qr-title {
  letter-spacing: -0.01em;
}
.app-shell.is-postazione-context .jervi-presentation-code-value {
  letter-spacing: 0.18em;
}
/* presentazione: stessa cura delle card servizi (badge sopra, mai collisioni) */
.app-shell.is-postazione-context.jervi-presentation .service-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.app-shell.is-postazione-context.jervi-presentation .service-hero-badge {
  order: -1;
  position: static;
  float: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--capo-oro);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================================
   11 · DETTAGLI — sicurezza visiva, touch, superfici.
   ============================================================================ */
/* hidden REALE anche dove styles.css forza un display (gate accessibilità):
   nulla di [hidden] deve mai restare in flusso nei due contesti dell'opera */
.app-shell.is-postazione-context [hidden],
.app-shell[data-context="home"]:not(.ui-professional) [hidden] {
  display: none;
}
.app-shell.is-postazione-context .sogno-case,
.app-shell[data-context="home"]:not(.ui-professional) .sogno-case {
  -webkit-font-smoothing: antialiased;
}
/* mai scroll orizzontale sulle superfici del layer (legacy 63px @1024 contenuto) */
.app-shell.is-postazione-context,
.app-shell[data-context="home"]:not(.ui-professional) {
  overflow-x: hidden;
  overflow-x: clip;
}
/* landscape basso: la scena si compatta senza perdere l'unità domanda+opzioni */
@media (orientation: landscape) and (max-height: 620px) {
  .app-shell.is-postazione-context.ui-guiding .scene-actions,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding .scene-actions {
    padding-bottom: clamp(0.5rem, 2vh, 1.2rem);
  }
}

/* ============================================================================
   8 · DENSITÀ GUIDATA DAL FIT — UN SOLO sistema. Default ELEGANTE (respiro pieno);
   il modulo MISURA e, SOLO se domanda+opzioni+azione non entrano, sale di livello
   compatto (.capo-fit-1..3). Colonne .capo-cols-N (portrait max 2; 3+ solo landscape).
   Le spaziature/tipografie sono variabili: livello 0 = respiro pieno (tablet dove c'è
   spazio non si comprime); i livelli superiori le stringono solo quanto serve. Minimi:
   touch >=44px, testo opzioni 18px = pavimento, <=2 righe. Zero !important; no scale.
   La scena NARRATIVA (proposta) è trattata a parte, in coda (scroll libero, CTA mai coperta).
   ============================================================================ */

/* Il guscio in scena-domanda vive nell'altezza REALE del device (dvh): border-box a
   100dvh, padding verticale alla sola safe-area, così NON eccede il viewport. Qui vive
   anche la SCALA DI DENSITÀ (livello 0 = respiro pieno, default). */
.app-shell.is-postazione-context.ui-guiding,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding {
  box-sizing: border-box;
  min-height: 0;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* — livello 0 · RESPIRO PIENO (default elegante) — */
  --capo-q-font: clamp(1.35rem, 0.85rem + 1.7vh, 2.05rem);
  --capo-q-maxw: 30ch;
  --capo-hdr-pt: clamp(0.45rem, 2vh, 1.25rem);
  --capo-hdr-pb: clamp(0.3rem, 1.1vh, 0.75rem);
  --capo-scene-gap: clamp(0.65rem, 2.4vh, 1.7rem);
  --capo-stack-gap: clamp(0.65rem, 2vh, 1.4rem);
  --capo-act-pt: clamp(0.55rem, 2vh, 1.3rem);
  --capo-act-pb: clamp(0.65rem, 2.2vh, 1.6rem);
  --capo-opt-gapy: clamp(0.5rem, 1.5vh, 1rem);
  --capo-opt-gapx: clamp(0.5rem, 1.4vw, 1rem);
  --capo-card-h: clamp(56px, 7.4vh, 68px);
  --capo-card-padx: clamp(0.75rem, 2vw, 1.25rem);
}
.app-shell.is-postazione-context.ui-guiding.capo-fit-1,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-fit-1 {
  --capo-q-font: clamp(1.24rem, 0.75rem + 1.5vh, 1.8rem);
  --capo-hdr-pt: clamp(0.3rem, 1.4vh, 0.9rem);
  --capo-scene-gap: clamp(0.5rem, 1.8vh, 1.15rem);
  --capo-stack-gap: clamp(0.5rem, 1.6vh, 1rem);
  --capo-act-pt: clamp(0.4rem, 1.5vh, 1rem);
  --capo-act-pb: clamp(0.5rem, 1.7vh, 1.2rem);
  --capo-opt-gapy: clamp(0.4rem, 1.2vh, 0.8rem);
  --capo-card-h: clamp(52px, 6.6vh, 62px);
}
.app-shell.is-postazione-context.ui-guiding.capo-fit-2,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-fit-2 {
  --capo-q-font: clamp(1.16rem, 0.65rem + 1.3vh, 1.55rem);
  --capo-hdr-pt: clamp(0.2rem, 1vh, 0.6rem);
  --capo-hdr-pb: 0.2rem;
  --capo-scene-gap: clamp(0.35rem, 1.2vh, 0.8rem);
  --capo-stack-gap: clamp(0.4rem, 1.1vh, 0.75rem);
  --capo-act-pt: clamp(0.3rem, 1vh, 0.7rem);
  --capo-act-pb: clamp(0.4rem, 1.2vh, 0.9rem);
  --capo-opt-gapy: clamp(0.32rem, 0.9vh, 0.6rem);
  --capo-card-h: clamp(50px, 5.8vh, 56px);
  --capo-card-padx: clamp(0.6rem, 1.6vw, 1rem);
}
.app-shell.is-postazione-context.ui-guiding.capo-fit-3,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-fit-3 {
  --capo-q-font: clamp(1.1rem, 0.5rem + 1.2vh, 1.4rem);
  --capo-q-maxw: 42ch;
  --capo-hdr-pt: 0.1rem;
  --capo-hdr-pb: 0.1rem;
  --capo-scene-gap: clamp(0.25rem, 0.85vh, 0.55rem);
  --capo-stack-gap: clamp(0.3rem, 0.85vh, 0.55rem);
  --capo-act-pt: clamp(0.22rem, 0.8vh, 0.5rem);
  --capo-act-pb: clamp(0.3rem, 0.9vh, 0.65rem);
  --capo-opt-gapy: clamp(0.25rem, 0.7vh, 0.48rem);
  --capo-card-h: 50px;
}
/* La scena riempie il guscio (niente crescita oltre il viewport): la feritoia in alto
   collassa prima di comprimere le opzioni. */
.app-shell.is-postazione-context.ui-guiding .mirror-stage.ambient-scene,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .mirror-stage.ambient-scene {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  /* niente 1fr che scarica tutta la "luce" in alto: il blocco (domanda+opzioni+azione)
     si centra quando entra (poca aria sopra E sotto → il reset resta visibile) e impacca
     dall'alto quando è stretto (header salvo, eventuale eccedenza in basso = gate la vede). */
  grid-template-rows: auto auto auto;
  align-content: safe center;
  row-gap: var(--capo-scene-gap);
}

/* Header: zone distinte (capitoli↔taccuino↔domanda) con respiro dal livello densità. */
.app-shell.is-postazione-context.ui-guiding .stage-header,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .stage-header {
  padding-top: var(--capo-hdr-pt);
  padding-bottom: var(--capo-hdr-pb);
}

/* La domanda: manifesto, dimensione e larghezza dal livello (respiro pieno di default). */
.app-shell.is-postazione-context.ui-guiding .msg.assistant,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .msg.assistant {
  font-size: var(--capo-q-font);
  line-height: 1.2;
  max-width: var(--capo-q-maxw);
}
.app-shell.is-postazione-context.ui-guiding .dialogue-block,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .dialogue-block {
  min-height: 0;
}

/* scene-actions + stack: respiro dal livello densità (generoso di default). */
.app-shell.is-postazione-context.ui-guiding .scene-actions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .scene-actions {
  padding-top: var(--capo-act-pt);
  padding-bottom: var(--capo-act-pb);
  gap: var(--capo-scene-gap);
}
.app-shell.is-postazione-context.ui-guiding .dynamic-control-stack,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .dynamic-control-stack {
  gap: var(--capo-stack-gap);
}

/* Opzioni: numero colonne dal modulo (.capo-cols-N); gap dal livello densità.
   justify-items: stretch → ogni carta riempie la sua colonna (stessa larghezza, anche
   l'ultima riga incompleta): mai carte alla larghezza del testo o centrate diversamente. */
.app-shell.is-postazione-context.ui-guiding #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions {
  gap: var(--capo-opt-gapy) var(--capo-opt-gapx);
  max-width: 46rem;
  justify-items: stretch;
}
.app-shell.is-postazione-context.ui-guiding.capo-cols-1 #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-1 #flowOptions { grid-template-columns: minmax(0, 1fr); }
.app-shell.is-postazione-context.ui-guiding.capo-cols-2 #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-2 #flowOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell.is-postazione-context.ui-guiding.capo-cols-3 #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-3 #flowOptions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell.is-postazione-context.ui-guiding.capo-cols-4 #flowOptions,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-4 #flowOptions { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Card opzione UNIFORME: larghezza piena (1fr) + stessa altezza var(--capo-card-h),
   dimensionata per <=2 righe → carte a 1 e a 2 righe rendono IDENTICHE (nessun clip,
   contenuto sempre <= altezza). Testo 1rem = 18px (pavimento) invariato; touch >=44px. */
.app-shell.is-postazione-context.ui-guiding #flowOptions .btn-mode,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions .btn-mode {
  width: 100%;
  min-height: var(--capo-card-h);
  padding: 0.2rem var(--capo-card-padx);
  font-size: 1rem;
  line-height: 1.16;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* UNIFORMITÀ: vince sulla regola legacy (styles.css, [data-context=salon] che vale anche
   per Postazione, 481-1024px) che rende l'ultima card dispari a MEZZA larghezza e CENTRATA
   diversamente. Qui l'ultima carta resta uguale alle altre (1fr, piena colonna, allineata). */
.app-shell.is-postazione-context.ui-guiding #flowOptions > button:last-child,
.app-shell.is-postazione-context.ui-guiding #flowOptions > .btn:last-child,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions > button:last-child,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding #flowOptions > .btn:last-child {
  grid-column: auto;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}
/* ECCEZIONE — ultima carta SOLA sull'ultima riga (conteggio dispari rispetto alle colonne
   REALI capo-cols-N): resta LARGA come una colonna normale e CENTRATA da sola, non a mezza
   larghezza né allineata a sinistra. Si appoggia alla classe colonne (non a :last-child nudo):
   2 col -> conteggio dispari; 3 col -> conteggio == 1 (mod 3); 4 col -> conteggio == 1 (mod 4).
   Nessun effetto a 1 colonna, ne quando l'ultima riga ha 2+ carte (uniformita preservata). */
.app-shell.is-postazione-context.ui-guiding.capo-cols-2 #flowOptions > .btn-mode:last-child:nth-child(odd),
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-2 #flowOptions > .btn-mode:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--capo-opt-gapx)) / 2);
}
.app-shell.is-postazione-context.ui-guiding.capo-cols-3 #flowOptions > .btn-mode:last-child:nth-child(3n + 1),
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-3 #flowOptions > .btn-mode:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 2 * var(--capo-opt-gapx)) / 3);
}
.app-shell.is-postazione-context.ui-guiding.capo-cols-4 #flowOptions > .btn-mode:last-child:nth-child(4n + 1),
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding.capo-cols-4 #flowOptions > .btn-mode:last-child:nth-child(4n + 1) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 3 * var(--capo-opt-gapx)) / 4);
}

/* "Continua" multi-scelta: compatto ma >=44px touch. */
.app-shell.is-postazione-context.ui-guiding .concern-continue-slot .btn,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .concern-continue-slot .btn {
  min-height: 46px;
  padding: 0.5rem 2rem;
}

/* Ricomincia: servizio, compatto e stabile; non ruba una riga alle opzioni. */
.app-shell.is-postazione-context.ui-guiding .btn-reset-outside,
.app-shell[data-context="home"]:not(.ui-professional).ui-guiding .btn-reset-outside {
  min-height: 40px;
  padding: 0.3rem 1rem;
  margin-top: 0;
}

/* Altezza corta (landscape): la domanda si ALLARGA (meno righe). La compattezza generale
   è già gestita dal livello densità; qui solo la larghezza, orientata. */
@media (max-height: 560px) {
  .app-shell.is-postazione-context.ui-guiding .msg.assistant,
  .app-shell[data-context="home"]:not(.ui-professional).ui-guiding .msg.assistant {
    max-width: 46ch;
  }
}

/* ============================================================================
   9 · SCENA NARRATIVA (proposta / "lettura del tuo caso") — NON è una scena-domanda.
   Scroll libero e naturale, tipografia e respiro pieni (nessuna compressione). La CTA
   "Scopri la tua routine…" resta sempre raggiungibile e MAI coperta dalla barra del
   browser: padding-bottom ampio = safe-area + buffer barra; unità dvh (mai 100vh nudo).
   ============================================================================ */
.app-shell.is-postazione-context.ui-proposal .scene-actions,
.app-shell[data-context="home"]:not(.ui-professional).ui-proposal .scene-actions {
  /* Riserva STABILE: statica (rem) + safe-area, MAI unità viewport (vh/dvh) che la barra
     del browser fa mutare durante lo scroll facendo "saltare" la CTA. max() prende il maggiore
     tra un fondo generoso fisso e la safe-area del device. */
  padding-bottom: max(2.75rem, env(safe-area-inset-bottom, 0px) + 1.75rem);
}