/* ╔══════════════════════════════════════════════════════════════════╗
   ║  WOLKMATT — foglio di stile unico per "Studio Saladino, accoglienza" ║
   ║  Tre moduli concatenati IN CASCATA (l'ordine conta: l'ultimo vince   ║
   ║  a parità di specificità):                                          ║
   ║    1) BOTTONI       — sistema bottoni del DS                         ║
   ║    2) CHAT          — componenti conversazionali (token chat)        ║
   ║    3) ACCOGLIENZA   — token master + colla di pagina                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */


/* ======================================================================
   1 · BOTTONI (ex wolkmatt-buttons.css)
   ====================================================================== */

/* ════════════════════════════════════════════════════════════════════
   WOLKMATT · BUTTONS — foglio di stile autonomo
   ────────────────────────────────────────────────────────────────────
   Tutte le classi dei bottoni (+ tag) in un singolo file portabile.
   I token necessari sono risolti nel :root qui sotto, quindi questo
   file funziona da solo — non richiede colors_and_type.css né kit.css.

   Classi disponibili
     .btn                 base (flex, 40px, halo system)
     .btn-primary         CTA teal pieno
     .btn-soft            tonal teal/lime
     .btn-secondary       outline neutro → accento teal
     .btn-ghost           link-like con underline animata
     .btn-danger          distruttivo (rosso → melograno)
     .btn-icon            quadrato, sola icona (.sm per 28px)
   Modificatori size
     .btn-xs 32 · .btn-sm 36 · (default) 40 · .btn-touch 44 · .btn-lg 48
   Modificatori stato
     .btn-block  full-width · .btn-loading  shimmer+spinner · .btn-pulse
     Stati forzabili a mano: .hover .focus .active (oltre a :hover ecc.)
   Tag (status pill)
     .tag + .lime|.teal|.apricot|.blush|.ink|.blue  · figlio .dot opzionale
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type ───────────────────────────────────────── */
  --font-sans: "Poppins", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ── Brand · teal/lime (PRIMARY · ACCENT) ───────── */
  --brand-teal:          #009580;
  --brand-teal-700:      #007966;
  --brand-teal-50:       #E6F4F1;
  --brand-lime:          #CAE86B;
  --brand-teal-rgb:      0, 149, 128;
  --brand-teal-700-rgb:  0, 121, 102;
  --brand-lime-rgb:      202, 232, 107;

  /* ── Neutrali ───────────────────────────────────── */
  --ink-900:             #202020;
  --ink-500:             #84818A;
  --ink-400:             #ABA8B0;
  --ink-100:             #F1F1F1;
  --surface-white:       #FFFFFF;
  --color-border:        #DCDBDD;
  --color-primary-contrast: #FFFFFF;

  /* ── Accent · superfici tinte + testo dim ─────────── */
  --surface-apricot-tint:#FFF1DA;
  --accent-apricot:      #F9A826;
  --accent-apricot-rgb:  249, 168, 38;
  --text-warm-dim:       #925810;
  --surface-blush-tint:  #FBE3E4;
  --accent-pomegranate:  #C5364E;
  --text-danger-dim:     #A22B2F;

  /* ── Geometria ──────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-pill: 999px;
  --squircle-modifier: 1;
  --space-3: 12px;
  --space-5: 20px;
  --height-control-sm:    36px;
  --height-control-lg:    48px;
  --height-control-touch: 44px;
  /* Scala a due taglie: ogni "piccolo" è aliasato al corpo (vedi blocco Tipografia) */
  --fz-xs:  var(--fz-base);
  --fz-sm:  var(--fz-base);
  --fz-base: 16px;

  /* ── Motion ─────────────────────────────────────── */
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 200ms;
  --t-med:  360ms;
  --t-halo: 480ms;
}


/* ── Base ─────────────────────────────────────────────────────────────
   Layout flex, halo via ::before (drop-shadow animabile, z-index −1),
   micro-lift −1px su hover, scale 0.98 su press. */
.btn {
  font: 500 var(--fz-base)/100% var(--font-sans); cursor: pointer;
  white-space: nowrap; text-decoration: none;
  padding: 0 16px; height: 40px;
  border-radius: calc(var(--radius-md) * var(--squircle-modifier));
  display: inline-flex; align-items: center; gap: 8px;
  border: none;
  position: relative; isolation: isolate;
  transition: transform var(--t-fast) var(--ease-bounce),
              background 320ms var(--ease-soft),
              border-color 420ms var(--ease-soft),
              color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  corner-shape: inherit;       /* l'halo segue la forma squircle del btn */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-halo) var(--ease-soft),
              box-shadow var(--t-halo) var(--ease-soft);
  z-index: -1;
}
.btn:hover,
.btn.hover { transform: translateY(-1px); z-index: 2; }
.btn:hover::before,
.btn.hover::before { opacity: 1; }
.btn:active,
.btn.active { transform: translateY(0) scale(0.98); transition-duration: 90ms, var(--t-fast), var(--t-fast), var(--t-fast), var(--t-fast); }

/* icona — micro-motion al hover */
.btn .ic { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--t-fast) var(--ease-bounce); }
.btn:hover .ic,
.btn.hover .ic { transform: scale(1.06); }


/* ── Size modifiers ─────────────────────────────────────────────────── */
.btn-sm { height: var(--height-control-sm); padding: 0 var(--space-3); font-size: var(--fz-sm); }
.btn-lg { height: var(--height-control-lg); padding: 0 var(--space-5); font-size: var(--fz-base); }
.btn-block { width: 100%; justify-content: center; }
/* Touch target WCAG 2.5.5 (≥44×44) — mobile/portale paziente */
.btn-touch { height: var(--height-control-touch); padding: 0 var(--space-5); }


/* ── Halo system condiviso ────────────────────────────────────────────
   --halo-rest / --halo-accent (triplette RGB) guidano una tinta diversa
   per stato. Hover/focus/active richiamano l'accent; rest usa la base. */
.btn:focus-visible,
.btn.focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--halo-accent, 0,149,128), 0.32),
    0 4px 10px -4px rgba(var(--halo-rest, 0,149,128), 0.30),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn:active::before,
.btn.active::before {
  opacity: 1;
  box-shadow:
    0 0 10px 1px rgba(var(--halo-accent, 0,149,128), 0.34),
    0 4px 8px -4px rgba(var(--halo-accent, 0,149,128), 0.40);
}


/* ── Primary — teal pieno, accent teal-700 su focus/active ───────────── */
.btn-primary {
  --halo-rest: var(--brand-teal-rgb);
  --halo-accent: var(--brand-teal-700-rgb);
  background: var(--brand-teal);
  color: var(--color-primary-contrast);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 10px -4px rgba(var(--halo-rest), 0.30),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary::before {
  box-shadow: 0 0 18px 1px rgba(var(--halo-rest), 0.18),
              0 12px 22px -8px rgba(var(--halo-rest), 0.24);
}
.btn-primary:hover::before,
.btn-primary.hover::before {
  box-shadow: 0 0 24px 2px rgba(var(--halo-rest), 0.26),
              0 14px 26px -8px rgba(var(--halo-rest), 0.32);
}
.btn-primary:hover,
.btn-primary.hover {
  background: color-mix(in srgb, var(--brand-teal) 90%, white);
  box-shadow: 0 6px 14px -6px rgba(var(--halo-rest), 0.34),
              inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-primary:active,
.btn-primary.active {
  background: var(--brand-teal-700);
  box-shadow: 0 2px 6px -4px rgba(var(--halo-accent), 0.40),
              inset 0 2px 4px rgba(0,0,0,0.10),
              inset 0 1px 0 rgba(255,255,255,0.10);
}


/* ── Soft (tonal) — teal-50 rest, accent lime su hover (warm play) ───── */
.btn-soft {
  --halo-rest: var(--brand-teal-700-rgb);
  --halo-accent: var(--brand-lime-rgb);
  background: var(--brand-teal-50);
  color: var(--brand-teal-700);
  border: 1px solid rgba(var(--halo-rest), 0.25);
  box-shadow: 0 1px 3px rgba(var(--halo-rest), 0.12),
              inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-soft::before {
  box-shadow: 0 0 16px 1px rgba(var(--halo-rest), 0.14),
              0 8px 18px -8px rgba(var(--halo-rest), 0.18);
}
.btn-soft:hover::before,
.btn-soft.hover::before {
  box-shadow: 0 0 20px 2px rgba(var(--halo-accent), 0.22),
              0 10px 22px -8px rgba(var(--halo-rest), 0.24);
}
.btn-soft:hover,
.btn-soft.hover {
  background: color-mix(in srgb, var(--brand-teal-50) 82%, rgb(var(--halo-accent)));
  border-color: rgba(var(--halo-rest), 0.42);
  box-shadow: 0 2px 6px -2px rgba(var(--halo-rest), 0.16),
              inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-soft:active,
.btn-soft.active {
  background: color-mix(in srgb, var(--brand-teal-50) 60%, rgb(var(--halo-rest)));
  color: var(--color-primary-contrast);
  border-color: rgba(var(--halo-rest), 0.50);
  box-shadow: 0 1px 3px rgba(var(--halo-rest), 0.20),
              inset 0 2px 4px rgba(var(--halo-rest), 0.20),
              inset 0 1px 0 rgba(255,255,255,0.30);
}


/* ── Secondary — outline neutro, accent teal su hover (CTA implicito) ── */
.btn-secondary {
  --halo-rest: 20,38,36;                       /* ink neutro */
  --halo-accent: var(--brand-teal-700-rgb);
  background: var(--surface-white);
  color: var(--ink-900);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(20,38,36,0.04),
              inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-secondary::before {
  box-shadow: 0 0 16px 1px rgba(var(--halo-rest), 0.05),
              0 10px 22px -8px rgba(var(--halo-rest), 0.10);
}
.btn-secondary:hover::before,
.btn-secondary.hover::before {
  box-shadow: 0 0 18px 1px rgba(var(--halo-accent), 0.12),
              0 12px 22px -8px rgba(var(--halo-accent), 0.18);
}
.btn-secondary:hover,
.btn-secondary.hover {
  background: color-mix(in srgb, #fff 94%, rgb(var(--halo-accent)));
  border-color: color-mix(in srgb, var(--ink-500) 60%, rgb(var(--halo-accent)));
  color: var(--brand-teal-700);
  box-shadow: 0 2px 6px -2px rgba(var(--halo-accent), 0.10),
              inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-secondary:active,
.btn-secondary.active {
  background: color-mix(in srgb, #fff 80%, rgb(var(--halo-accent)));
  border-color: rgba(var(--halo-accent), 0.42);
  color: var(--brand-teal-700);
  box-shadow: 0 1px 2px rgba(var(--halo-accent), 0.10),
              inset 0 1px 2px rgba(var(--halo-accent), 0.12);
}
.btn-secondary[disabled] { color: var(--ink-400); cursor: not-allowed; }
.btn-secondary[disabled]::before { display: none; }
.btn-secondary[disabled]:hover {
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(20,38,36,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  transform: none;
}


/* ── Ghost — link-like, underline animata, niente halo body ──────────── */
.btn-ghost {
  --halo-rest: var(--brand-teal-rgb);
  --halo-accent: var(--brand-teal-700-rgb);
  background: transparent; color: var(--brand-teal); padding: 0 4px; border: 0;
  box-shadow: none;
}
.btn-ghost::after {
  content: "";
  position: absolute; left: 4px; right: 4px; bottom: 8px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 0% 50%;
  transition: transform var(--t-med) var(--ease-soft);
}
.btn-ghost::before { display: none; }
.btn-ghost:hover,
.btn-ghost.hover { color: var(--brand-teal-700); transform: none; }
.btn-ghost:active,
.btn-ghost.active { color: rgb(var(--halo-accent)); transform: none; }
.btn-ghost:hover::after,
.btn-ghost.hover::after { transform: scaleX(1); }
.btn-ghost:active::after,
.btn-ghost.active::after { transform: scaleX(1); background: rgb(var(--halo-accent)); }


/* ── Danger — rosso rest, melograno accent su press (escalation) ─────── */
.btn-danger {
  --halo-rest: 229,72,77;      /* rosso brillante */
  --halo-accent: 197,54,78;    /* melograno — più profondo, deliberato */
  background: rgb(var(--halo-rest));
  color: var(--color-primary-contrast);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 10px -4px rgba(var(--halo-rest), 0.30),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-danger::before {
  box-shadow: 0 0 18px 1px rgba(var(--halo-rest), 0.18),
              0 12px 22px -8px rgba(var(--halo-rest), 0.24);
}
.btn-danger:hover::before,
.btn-danger.hover::before {
  box-shadow: 0 0 24px 2px rgba(var(--halo-rest), 0.28),
              0 14px 26px -8px rgba(var(--halo-accent), 0.32);
}
.btn-danger:hover,
.btn-danger.hover {
  background: color-mix(in srgb, rgb(var(--halo-rest)) 90%, white);
  box-shadow: 0 6px 14px -6px rgba(var(--halo-rest), 0.34),
              inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-danger:active,
.btn-danger.active {
  background: rgb(var(--halo-accent));
  box-shadow: 0 2px 6px -4px rgba(var(--halo-accent), 0.44),
              inset 0 2px 4px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.08);
}




/* ── Reduced motion — collassa tutte le animation/transition ─────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ======================================================================
   2 · CHAT (ex wolkmatt-chat.css)
   ====================================================================== */

/* ════════════════════════════════════════════════════════════════════
   WOLKMATT · CHAT (accoglienza) — modulo conversazionale portabile
   ────────────────────────────────────────────────────────────────────
   Estende il DS Wolkmatt con il vocabolario di una chat di accoglienza:
   feed, righe-messaggio con avatar + raggruppamento, bolle ricevute/inviate,
   quick-reply, indicatore "sta scrivendo", separatore di giornata, composer.

   TUTTO è tokenizzato: i valori vivono nei --chat-* qui sotto, derivati dai
   token base del DS (brand, ink, spacing, radius, shadow, motion). Nessun
   magic-number nelle regole. I bottoni usano le classi di "Wolkmatt Buttons".

   Dipendenze: token base del DS (colors_and_type.css o :root dell'host) +
   wolkmatt-buttons.css per le classi .btn. I var() hanno fallback così il
   modulo regge anche da solo.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Geometria messaggi ─────────────────────────── */
  --chat-feed-gap-turn:   var(--space-4, 16px);   /* tra turni: autori diversi */
  --chat-feed-gap-group:  var(--space-1, 4px);    /* tra bolle consecutive stesso autore */
  --chat-feed-min-h:      120px;

  --chat-bubble-pad-y:    var(--space-3, 12px);
  --chat-bubble-pad-x:    var(--space-4, 16px);
  --chat-bubble-radius:   var(--radius-lg, 16px);
  --chat-bubble-tail:     var(--radius-sm, 8px);  /* angolo "coda" lato mittente */
  --chat-bubble-fs:       var(--fz-base, 16px);
  --chat-bubble-lh:       1.6;
  --chat-bubble-max:      86%;
  --chat-bot-bubble-max:  min(86%, 46ch);

  /* ── Superfici bolle (token chat del DS) ────────── */
  --chat-bot-bg:          var(--surface-white, #fff);
  --chat-bot-border:      var(--color-border, #DCDBDD);
  --chat-bot-fg:          var(--color-text, #202020);
  --chat-me-bg:           var(--bubble-sent-bg, var(--brand-teal-50, #E6F4F1));
  --chat-me-border:       color-mix(in srgb, var(--brand-teal, #009580) 18%, transparent);
  --chat-me-fg:           var(--color-text, #202020);

  /* ── Gutter della riga messaggio ── */
  --chat-row-gap:         var(--space-2, 8px);

  /* ── Indicatore "sta scrivendo" ─────────────────── */

  /* ── Composer ───────────────────────────────────── */
  --chat-composer-bg:     var(--surface-white, #fff);
  --chat-composer-border: var(--color-border, #DCDBDD);   /* stesso bordo delle bolle */
  --chat-composer-pad:    var(--space-2, 8px);
  --chat-field-fs:        var(--fz-base);  /* corpo unificato (=16px): coincide col body e ≥16px → niente zoom su iOS */
  --chat-field-min-h:     46px;
  --chat-field-max-h:     152px;
}

/* ── Feed ──────────────────────────────────────────────────────────────
   Spaziatura a margini (non gap) per poter stringere il ritmo dentro un
   gruppo dello stesso autore. */
.wm-feed {
  display: flex;
  flex-direction: column;
  min-height: var(--chat-feed-min-h);
  margin: var(--space-5, 20px) 0 var(--space-4, 16px);
}
.wm-feed > * { margin-top: var(--chat-feed-gap-turn); }
.wm-feed > *:first-child { margin-top: 0; }
/* gruppo: due righe consecutive dello stesso autore → gap stretto */
.wm-row.is-bot + .wm-row.is-bot,
.wm-row.is-me  + .wm-row.is-me { margin-top: var(--chat-feed-gap-group); }

/* ── Riga messaggio (avatar gutter + bolla) ───────────────────────────── */
.wm-row {
  display: flex;
  align-items: flex-start;
  gap: var(--chat-row-gap);
}
.wm-row.is-bot { justify-content: flex-start; }
.wm-row.is-me  { justify-content: flex-end; }

/* ── Bolla ─────────────────────────────────────────────────────────────
   La bolla è agnostica all'allineamento (lo decide la riga). Coda
   asimmetrica = segnale direzionale (pattern Slack/iMessage). */
.bolla {
  padding: var(--chat-bubble-pad-y) var(--chat-bubble-pad-x);
  border-radius: var(--chat-bubble-radius);
  max-width: var(--chat-bubble-max);
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-optical-sizing: auto;
  font-size: var(--chat-bubble-fs);
  line-height: var(--chat-bubble-lh);
  overflow-wrap: anywhere;
}
.bolla :where(p):first-child { margin-top: 0; }
.bolla :where(p):last-child  { margin-bottom: 0; }

/* assistente (ricevuto): card "carta" — bianca, bordo definito, lift lieve */
.bolla.bot {
  background: var(--chat-bot-bg);
  color: var(--chat-bot-fg);
  border: 1px solid var(--chat-bot-border);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(20,38,36,.06));
  border-bottom-left-radius: var(--chat-bubble-tail);
  max-width: var(--chat-bot-bubble-max);
}
/* persona (inviato): tinta tenue del DS, non teal pieno. Stessa elevazione del bot. */
.bolla.me {
  background: var(--chat-me-bg);
  color: var(--chat-me-fg);
  border: 1px solid var(--chat-me-border);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(20,38,36,.06));
  border-bottom-right-radius: var(--chat-bubble-tail);
  white-space: pre-wrap;
}
.bolla a { color: var(--brand-teal-700, #007966); font-weight: var(--fw-medium, 500); }

/* Allegato: card con icona-per-tipo + riga "ha condiviso" + nome file + piccola sintesi.
   Eredita .bolla.me (tinta, bordo, elevazione, animazione comparsa); cambia solo il layout interno. */
.bolla.me.allegato{
  display:flex; gap:var(--space-3); align-items:flex-start;
  white-space:normal;            /* override del pre-wrap di .bolla.me */
  max-width:42ch;
}
.allegato-ico{ flex:0 0 auto; display:inline-flex; margin-top:1px; color:var(--brand-teal-700); }
.allegato-ico svg{ width:20px; height:20px; display:block; }
.allegato-corpo{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.allegato-riga{ font-weight:var(--fw-medium); line-height:1.3; }
.allegato-nome{
  font-size:var(--fz-sm); color:var(--color-text-muted);   /* muted (non soft): contrasto ≥4.5:1 sulla tinta della bolla (WCAG AA) */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;   /* nomi lunghi troncati; full su hover (title) */
}
.allegato-sint{ margin-top:4px; font-size:var(--fz-sm); line-height:1.4; color:var(--chat-me-fg); overflow-wrap:anywhere; }

/* ── Indicatore "sta scrivendo" ────────────────────────────────────────
   Vive in una piccola bolla bot (eredita .bolla.bot) → "il bot compone". */
.typing { display: inline-flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; }
/* "pensiero" del bot: testo caldo e breve mentre elabora (effetto attesa, non la risposta vera) */
/* testo "pensiero": testo normale, nero, non corsivo. La motion sta nel reveal parola-per-parola. */
.typing-pensiero { color: var(--color-text); }

/* ── Quick-reply ───────────────────────────────────────────────────────
   Suggerimenti di risposta della persona: allineati a destra (lato utente).
   I bottoni usano .btn .btn-soft; .wm-quick li rende a pillola. */
.wm-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  justify-content: flex-end;
  margin: 0;
}
.btn.wm-quick { border-radius: var(--radius-pill, 999px); }
/* quick-reply ANCORATE dentro la barra, appena sopra il composer: la distanza dal campo è
   data dal gap della barra + un filo di margine → stabile a prescindere dallo scroll del feed.
   pointer-events:auto perché la barra è pass-through (pointer-events:none). */
.barra #opzioni{ pointer-events:auto; margin:0 0 var(--space-1); }
.barra #opzioni:empty{ display:none; }   /* nessuno spazio fantasma quando non ci sono opzioni */

/* ── Composer (input + invia) ──────────────────────────────────────────
   Allineato a .chat-composer-input del DS. */
.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2, 8px);
  width: 100%;
  pointer-events: auto;
  background: var(--chat-composer-bg);
  border: 1px solid var(--chat-composer-border);
  border-radius: 30px;
  padding: var(--chat-composer-pad);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(20,38,36,.06));
  transition: border-color .18s, box-shadow .16s;
}
.composer:focus-within {
  border-color: var(--brand-teal, #009580);
  box-shadow: var(--halo-focus, 0 0 0 3px rgba(0,149,128,.18), inset 0 0 0 1px rgba(0,121,102,.28));
}
.wm-field {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--chat-field-fs);
  line-height: 1.45;
  color: var(--color-text, #202020);
  min-height: var(--chat-field-min-h);
  max-height: var(--chat-field-max-h);
  overflow-y: hidden;
  resize: none;
  padding: .62rem .35rem .62rem .8rem;
  border: none;
  background: transparent;
  outline: none;
}
.wm-field::placeholder { color: var(--color-text-soft, #84818A); }
.wm-field:disabled { opacity: .5; cursor: default; }
/* invio in corso: si attenua SOLO il contenuto (campo + bottone). NIENTE opacity sul .composer:
   renderebbe traslucido lo sfondo bianco e farebbe trasparire il glowbox dietro (glow "sopra" il campo). */
.composer:has(.wm-field:disabled) #manda { opacity: .55; }


/* ======================================================================
   3 · ACCOGLIENZA (ex wolkmatt-accoglienza.css)
   ====================================================================== */

/* ════════════════════════════════════════════════════════════════════
   WOLKMATT · ACCOGLIENZA — pagina di triage "Studio Saladino"
   ────────────────────────────────────────────────────────────────────
   Layer specifico della pagina: token master + colla di layout (gate,
   header, composer-bar, esito, finale, banner/pannelli di crisi).
   I componenti conversazionali stanno in wolkmatt-chat.css, i bottoni in
   wolkmatt-buttons.css. Caricato PER ULTIMO: a parità di specificità le
   regole di pagina (bolle speciali) vincono sulla base del modulo chat.

   Tutto è tokenizzato: nessun colore/scrim/dimensione grezzi nelle regole.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Neutrali (DS) ── */
  --ink-50:#F4F7F7; --ink-100:#F1F1F1; --ink-150:#ECEAEE; --ink-200:#DCDBDD;
  --ink-500:#84818A; --ink-700:#47464A; --ink-900:#202020;
  --surface-white:#FFFFFF; --surface-card:#FBFCFC;
  /* ink-scrim = inchiostro scuro del DS (per ombre + veli), come tripletta rgb */
  --ink-scrim:20,38,36;

  /* ── Brand (DS) ── */
  --brand-teal:#009580; --brand-teal-700:#007966; --brand-teal-50:#E6F4F1;
  --brand-teal-rgb:0,149,128; --brand-teal-700-rgb:0,121,102;
  --surface-teal-subtle:#F4FAF8;
  --brand-forest:#144C44; --brand-lime:#CAE86B;
  --bubble-sent-bg:var(--brand-teal-50);

  /* ── Accent (DS) ── */
  --accent-apricot:#F9A826; --surface-apricot-tint:#FFF1DA; --text-warm-dim:#925810;
  --accent-pomegranate:#C5364E; --accent-pomegranate-rgb:197,54,78;
  --surface-blush-tint:#FBE3E4; --text-danger-dim:#A22B2F;

  /* ── Semantici ── */
  --color-bg:var(--ink-50); --color-elevated:var(--surface-white);
  --color-text:var(--ink-900); --color-text-muted:var(--ink-700); --color-text-soft:var(--ink-500);
  --color-border:var(--ink-200); --color-divider:var(--ink-150);
  --color-primary-contrast:#FFFFFF; --color-on-brand:#FFFFFF;

  /* ── Tipografia ── */
  --font-sans:"Poppins","Inter","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Domine","Georgia","Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Scala a DUE dimensioni: corpo + titoli. Tutto il resto è aliasato al corpo,
     così la gerarchia vive nel COLORE e nel PESO (muted/soft · medium/semibold),
     non in tante taglie diverse → più pulizia e coerenza visiva. */
  --fz-base:16px;            /* CORPO: bolle, campi, bottoni, meta, note, badge — tutto il testo */
  --fz-title:22px;          /* TITOLI: testata, h2 esito/gate, esito-titolo */
  --fz-sm:var(--fz-base);   /* alias storico → corpo (compat con le regole esistenti) */
  --fz-xs:var(--fz-base);   /* alias storico → corpo */
  --fw-medium:500; --fw-semibold:600;

  /* ── Spaziatura ── */
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px; --space-10:40px;

  /* ── Raggi ── */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  /* ── Ombre (sull'ink-scrim) ── */
  --shadow-sm:0 1px 3px rgba(var(--ink-scrim),.06), 0 1px 2px rgba(var(--ink-scrim),.04);
  --shadow-md:0 6px 16px -8px rgba(var(--ink-scrim),.16), 0 2px 6px rgba(var(--ink-scrim),.04);
  --shadow-lg:0 18px 36px -12px rgba(var(--ink-scrim),.18), 0 4px 12px rgba(var(--ink-scrim),.06);
  --halo-focus:0 0 0 3px rgba(var(--brand-teal-rgb),.18), inset 0 0 0 1px rgba(var(--brand-teal-700-rgb),.28);

  /* ── Movimento (l'easing condiviso --ease-soft vive nel modulo bottoni) ── */

  /* ── Layout di pagina ── */
  --content-width:640px;             /* larghezza colonna (wrap + barra) */
  --composer-clearance:9rem;         /* spazio sotto per la barra fissa (normale, firma inclusa) */
  --composer-clearance-quick:12.5rem;/* idem quando le quick-reply sono sopra il composer (barra più alta) */
  --composer-clearance-crisi:15rem;  /* idem in crisi (barra più alta) */
  --gate-col:760px;                  /* colonna del consenso su DESKTOP: leggibile, coerente con le altre schermate (era 1040, troppo larga) */
  --gate-col-mobile:34rem;           /* colonna del consenso su MOBILE: tokenizzata → paginazione coerente, niente edge-to-edge */

}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:var(--fz-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;overscroll-behavior-y:none;padding:var(--space-6) var(--space-4) var(--composer-clearance);
}
/* benvenuto/consenso: il composer è nascosto, niente clearance in fondo (così il gate non scrolla) */
body.pre-chat{padding-top:var(--space-2);padding-bottom:var(--space-2)}
/* a triage concluso la barra sparisce: niente spazio morto in fondo */
body.concluso{padding-bottom:var(--space-6)}
/* quick-reply presenti → la barra è più alta: riserva più spazio così l'ultima bolla non ci finisce dietro */
body:not(.concluso):not(.in-crisi):has(#opzioni:not(:empty)){padding-bottom:var(--composer-clearance-quick)}
/* in crisi la barra è più alta (etichetta + pillole): più spazio sotto */
body.in-crisi:not(.concluso){padding-bottom:var(--composer-clearance-crisi)}
.wrap{max-width:var(--content-width);margin:0 auto}

/* intestazione: barra fissa in alto, compatta e centrata */
header{position:sticky;top:0;z-index:10;background:transparent;text-align:center;
  padding:var(--space-3) var(--space-2);margin-bottom:var(--space-4);border-bottom:none}
.marchio{display:none}  /* nasconde il saluto automatico (buongiorno/buonasera) */

/* Feed, bolle, righe+avatar, quick-reply, typing, composer → wolkmatt-chat.css */

/* composer: barra FISSA in fondo; il contenuto scorre dietro, sfumando */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;
  display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);margin:0 auto;
  /* max-width = colonna + padding L/R: così l'AREA del composer è larga quanto la colonna delle bolle
     (--content-width) sul desktop, e su mobile il padding dà comunque respiro dai bordi schermo */
  max-width:calc(var(--content-width) + 2 * var(--space-4));
  padding:var(--space-10) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--color-bg) 85%,transparent) 38%,var(--color-bg) 60%);
}
/* firma discreta sotto il composer: micro-testo di credito, fuori dalla scala dei contenuti (come un copyright) */
.firma-credito{margin:var(--space-1) 0 0;text-align:center;font-size:11px;letter-spacing:.03em;
  color:var(--color-text-soft);opacity:.7;line-height:1;pointer-events:none}
/* bottoni del composer (allega + invia): CERCHI pieni, icona centrata, un filo più grandi */
#allega,#manda{flex:0 0 auto;width:var(--height-control-touch);height:var(--height-control-touch);
  padding:0;border-radius:var(--radius-pill);justify-content:center}
#allega .ic,#manda .ic{width:20px;height:20px}
/* allega: niente underline da btn-ghost; cerchio tenue a riposo, velo teal su hover */
#allega::after{display:none}
#allega{background:color-mix(in srgb,var(--color-text) 6%,transparent);color:var(--brand-teal-700)}
#allega:hover,#allega.hover{background:color-mix(in srgb,var(--brand-teal) 12%,transparent)}
/* contatti diretti in crisi: pillole sopra il composer (solo quando #crisiAzioni è visibile) */
.crisi-azioni{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.crisi-azioni[hidden]{display:none}
.crisi-azioni-et{font-size:var(--fz-sm);color:var(--text-danger-dim);font-weight:var(--fw-medium);text-align:center}
.crisi-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.crisi-pill{
  font:inherit;font-weight:var(--fw-semibold);font-size:13px;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--space-1);height:30px;padding:0 var(--space-3);
  border-radius:var(--radius-md);
  background:var(--surface-blush-tint);color:var(--text-danger-dim);
  border:1px solid color-mix(in srgb,var(--text-danger-dim) 28%,transparent);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s,transform .15s;
}
.crisi-pill:hover{border-color:var(--text-danger-dim);transform:translateY(-1px)}
.crisi-pill svg{width:13px;height:13px}
/* off-ramp dalla crisi: link di testo discreto, sotto le pillole di contatto (priorità all'aiuto) */
.crisi-esci{
  margin-top:var(--space-1);align-self:center;
  background:none;border:none;cursor:pointer;padding:var(--space-1) var(--space-2);
  font:inherit;font-size:12px;color:var(--color-text-soft);
  text-decoration:underline;text-underline-offset:2px;opacity:.8;transition:opacity .15s;
}
.crisi-esci:hover{opacity:1}

/* ============================================================================
   SCHERMATA FINALE — "un respiro": chiusura calma, non uno scontrino.
   Campo ambientale tenue + sigillo che "respira" + composizione editoriale serif.
   Agganci JS invariati: #esito, .esito-titolo, .esito-sub, #riepilogo (.dato/.et/.vl),
   #scrivici, #email. mostraEsito() imposta display:block.
   ============================================================================ */
#esito{display:none;position:relative;z-index:1;min-height:100dvh;padding:clamp(22px,4.5vh,48px) 0}

/* campo ambientale a tutto schermo, dietro il contenuto (fixed: indipendente dalla colonna .wrap) */
body.concluso{background:var(--color-bg)}
body.concluso::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vmax 58vmax at 12% -10%, rgba(var(--brand-teal-rgb),.14), transparent 60%),
    radial-gradient(54vmax 54vmax at 102% 110%, rgba(var(--accent-apricot-rgb),.12), transparent 62%),
    radial-gradient(40vmax 40vmax at 88% 4%, rgba(var(--brand-lime-rgb),.09), transparent 60%)}

/* colonna ariosa centrata (nessuna "modale"). L'unico elemento "contenuto" è il pannello dati. */
.esito-card{position:relative;z-index:1;max-width:600px;margin:0 auto;padding:0 var(--space-6);
  background:transparent;border:0;border-radius:0;box-shadow:none;container-type:inline-size}

/* HERO: sigillo + occhiello + titolo, centrati */
.esito-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0}
/* sigillo che "respira": due anelli che si espandono lenti */
.esito-seal{position:relative;width:64px;height:64px;margin:0 0 var(--space-3);display:grid;place-items:center}
.esito-seal-ring{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  border:1.5px solid rgba(var(--brand-teal-rgb),.30)}
.esito-seal-core{position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  background:var(--brand-teal);color:var(--color-on-brand);display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgba(var(--brand-teal-rgb),.55)}
.esito-kicker{margin:0;font-size:var(--fz-sm);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.09em;color:var(--brand-teal-700)}
.esito-titolo{margin:var(--space-1) 0 0;font-family:var(--font-serif);font-size:clamp(24px,5vw,30px);
  font-weight:var(--fw-semibold);letter-spacing:-.012em;line-height:1.1;color:var(--brand-forest);text-wrap:balance}

/* nota di saluto: il messaggio personale dell'assistente — serif corsivo, centrato, con filo brand */
.esito-saluto{margin:var(--space-4) auto var(--space-1);max-width:46ch;text-align:center;padding:0}
.esito-saluto::before{content:"";display:block;width:30px;height:2px;margin:0 auto var(--space-3);
  border-radius:2px;background:linear-gradient(90deg,var(--brand-teal),var(--brand-lime))}
.esito-saluto .esito-sub{margin:0;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(16px,2.4vw,18px);line-height:1.55;color:var(--brand-forest);text-wrap:pretty}

/* sezioni strutturate da una hairline + micro-label coerente con l'occhiello */
.esito-passi,.esito-dati-sez{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.esito-sez-tit{margin:0 0 var(--space-3);font-size:var(--fz-sm);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.08em;color:var(--brand-teal-700)}

/* "Cosa succede ora": timeline calma a 3 passi con connettore verticale tenue */
.passi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.passo{position:relative;display:flex;gap:var(--space-3);align-items:flex-start}
.passo:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;
  bottom:calc(-1 * var(--space-3));width:2px;background:var(--brand-teal-50)}
.passo-n{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-pill);background:var(--brand-teal-50);
  color:var(--brand-teal-700);font-size:var(--fz-sm);font-weight:var(--fw-semibold);line-height:1}
.passo-t{color:var(--color-text-muted);font-size:var(--fz-base);line-height:1.5;padding-top:5px;text-wrap:pretty}

/* "Ciò che hai condiviso": pannello quieto, contenuto e rassicurante (non un modulo clinico) */
.esito-dati-sez .riepilogo{margin:0;background:var(--surface-teal-subtle);
  border:1px solid rgba(var(--brand-teal-rgb),.12);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}

/* nota di riservatezza: rassicurazione discreta (dati = salute) */
.esito-privacy{display:flex;gap:var(--space-2);align-items:center;justify-content:center;
  margin:var(--space-4) 0 0;color:var(--color-text-soft);font-size:var(--fz-sm);line-height:1.45;text-align:left}
.esito-privacy svg{flex:0 0 auto;color:var(--brand-teal-700)}

/* riepilogo: griglia che si adatta da sola alla larghezza (2 col larghe → 1 col stretta) */
.riepilogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.dato{display:flex;flex-direction:column;gap:2px;min-width:0}
.dato--wide{grid-column:1/-1}
.dato .et{color:var(--brand-teal-700);font-size:var(--fz-sm);font-weight:var(--fw-medium);
  text-transform:uppercase;letter-spacing:.05em}
.dato .vl{color:var(--color-text);font-size:var(--fz-base);overflow-wrap:anywhere}

/* azioni di conclusione: centrate, equilibrate, con respiro */
.esito-azioni{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);justify-content:center}
.esito-azioni .btn{flex:1 1 auto;min-width:150px}
.esito-hint{margin:var(--space-3) 0 0;color:var(--color-text-soft);font-size:var(--fz-sm);line-height:1.45;text-align:center}

/* sigillo: respiro lento dei due anelli (calma + segnale "abbiamo ricevuto"). Off con reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .esito-seal-ring{animation:esito-respiro 4.6s var(--ease-soft) infinite}
  .esito-seal-ring.r2{animation-delay:-2.3s}
  .esito-seal-core{animation:esito-core 4.6s var(--ease-soft) infinite}
}
@keyframes esito-respiro{0%{transform:scale(.66);opacity:0}30%{opacity:.5}100%{transform:scale(1.16);opacity:0}}
@keyframes esito-core{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* contenitore stretto (colonna su mobile): stringe i margini e impila le azioni */
@container (max-width:440px){
  .esito-card{padding:0 var(--space-4)}
  .esito-azioni{flex-direction:column}
  .esito-dati-sez .riepilogo{padding:var(--space-4)}
}
.badge{display:inline-flex;align-items:center;padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);font-size:var(--fz-sm);font-weight:var(--fw-semibold)}
.badge.bassa{background:var(--brand-teal-50);color:var(--brand-teal-700)}
.badge.media{background:var(--surface-apricot-tint);color:var(--text-warm-dim)}
.badge.alta{background:var(--surface-blush-tint);color:var(--text-danger-dim)}
details{margin-top:var(--space-5);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
summary{cursor:pointer;color:var(--color-text-muted);font-size:var(--fz-sm);font-weight:var(--fw-medium);user-select:none}

/* errore: bolla bot tinta blush (sovrascrive la card bianca del modulo chat) */
.bolla.errore{background:var(--surface-blush-tint);color:var(--text-danger-dim);
  border-color:color-mix(in srgb,var(--accent-pomegranate) 30%,transparent);box-shadow:none;
  align-self:stretch;max-width:100%}

/* accessibilità: focus sempre visibile */
:where(summary,.crisi-pill):focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.gate-consenso input:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}

/* movimento: comparsa morbida (una volta, niente loop). Off con reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .bolla.bot:not(.typing),#esito{animation:comparsa-testo .5s var(--ease-soft) both}
  /* bolla bot avvolta dal glow: il WRAPPER (bolla + glowbox: bordo e alone) CRESCE SOLO IN ALTEZZA
     (scaleY) mentre il testo si rivela — la larghezza è già quella finale (le parole occupano lo spazio
     da subito), quindi non "tira" il testo in orizzontale. Durata = --glow-dur (= rivelazione parola per
     parola): crescita, sweep, bordo, alone e testo COLLIMANO e finiscono insieme. La bolla interna non ri-anima. */
  .wm-row .glow-wrapper{transform-origin:top left;animation:bolla-cresce var(--glow-dur,1.5s) var(--ease-soft) both}
  .wm-row .glow-wrapper > .bolla.bot{animation:none}
  /* ENTRATA stile iMessage: l'INTERA riga sale da sotto con quadratic ease-out (parte veloce in basso,
     si posa piano a destinazione). Vale per bolle utente E bot; l'opacità resta sulle bolle/glow-wrapper,
     qui c'è SOLO la salita (transform sulla riga: non confligge col glow-wrapper né col reveal). */
  .wm-row{animation:bolla-sale .55s cubic-bezier(0.25,0.46,0.45,0.94) both}
  .bolla.me{animation:dissolvenza .55s var(--ease-soft) both}
  .marchio{animation:comparsa-testo .55s var(--ease-soft) both}
  .gate{animation:dissolvenza .3s var(--ease-soft) both}
  .gate-card{animation:comparsa .34s var(--ease-soft) both}
  /* testo che compare parola per parola nelle bolle del bot (ritardo per-parola inline; */
  /* a fine effetto il JS rimette il testo normale, in modo seamless) */
  .wm-word{display:inline-block;opacity:0;animation:wm-parola .40s var(--ease-soft) both}
  /* "cancellazione" parola per parola (effetto inverso): usato dal pensiero del typing */
  .wm-word.is-out{opacity:1;animation:wm-parola-out .30s var(--ease-soft) both}
}
@keyframes comparsa-testo{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes comparsa{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes bolla-sale{from{transform:translateY(18px)}to{transform:none}}
@keyframes dissolvenza{from{opacity:0}to{opacity:1}}
@keyframes wm-parola{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wm-parola-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}

/* banner crisi: blocco a sfondo tinta */
.crisi-banner{
  display:flex;gap:var(--space-2);align-items:flex-start;
  background:var(--surface-blush-tint);color:var(--text-danger-dim);
  border-radius:var(--radius-lg);padding:var(--space-3);margin:var(--space-3) 0 0;
  font-size:var(--fz-sm);line-height:1.45;
}
.crisi-banner .crisi-ico{flex:0 0 auto;margin-top:.1rem;color:var(--accent-pomegranate)}
.crisi-banner strong{font-weight:var(--fw-semibold)}
.crisi-banner a{color:var(--text-danger-dim);font-weight:var(--fw-semibold)}
.crisi-banner[hidden]{display:none}

/* card di conferma chiusura: messaggio finale + due azioni */
.bolla.chiusura{
  background:var(--surface-teal-subtle);color:var(--color-text);
  border:1px solid rgba(var(--brand-teal-rgb),.20);
  align-self:stretch;max-width:100%;box-shadow:var(--shadow-sm);
}
/* riepilogo deterministico dei dati dentro la card: sempre visibile prima di concludere */
.riepilogo-dati{margin:var(--space-3) 0 0;padding-top:var(--space-3);display:grid;gap:var(--space-2);
  border-top:1px solid rgba(var(--brand-teal-rgb),.18)}
.riepilogo-dati .rd{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--space-3);align-items:baseline}
/* sezione Riassunto: a tutta larghezza (etichetta sopra, testo sotto), separata dai dati di contatto */
.riepilogo-dati .rd--wide{grid-template-columns:1fr;gap:var(--space-1);padding-bottom:var(--space-3);
  border-bottom:1px solid rgba(var(--brand-teal-rgb),.10)}
.riepilogo-dati .rd--wide dd{line-height:1.55}
.riepilogo-dati dt{margin:0;color:var(--color-text-soft);font-size:var(--fz-sm);font-weight:var(--fw-medium)}
.riepilogo-dati dd{margin:0;color:var(--color-text);font-size:var(--fz-base);overflow-wrap:anywhere}
.chiusura-azioni{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid rgba(var(--brand-teal-rgb),.18);
}
.chiusura-ok{flex:0 0 auto}
.chiusura-altro{flex:0 0 auto}
.bolla.chiusura .chiusura-ok:disabled,
.bolla.chiusura .chiusura-altro:disabled{opacity:.55;cursor:default}

/* risorse di crisi: la bolla ha lo STESSO stile delle normali (card bianca .bolla.bot + glow +
   animazioni); il segnale "emergenza" lo danno il glow rossastro (body.in-crisi) e gli accenti
   rossi sui numeri utili. Niente più riquadro pieno: solo una bolla bot con dentro le risorse. */
.bolla.emergenza p:first-child{margin-top:0}
.bolla.emergenza strong{color:var(--text-danger-dim)}
.bolla.emergenza hr{border:none;border-top:1px solid rgba(var(--accent-pomegranate-rgb),.22);margin:var(--space-3) 0}
.bolla.emergenza .num{font-weight:var(--fw-semibold);color:var(--text-danger-dim)}

/* consenso/informativa: sezione INLINE, integrata sullo sfondo organico (niente "modale").
   Colonna tokenizzata (--gate-col) e CENTRATA VERTICALMENTE come la schermata di benvenuto,
   così la paginazione è coerente su mobile e desktop. */
.gate{position:relative;z-index:1;width:100%;max-width:var(--gate-col);margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-6) var(--space-5)}
.gate[hidden]{display:none}
/* la card perde superficie/bordo/ombra e vive sulle sfere: i callout (warn, nota, consenso)
   restano gli unici elementi "tenuti". */
.gate-card{background:transparent;border:0;border-radius:0;box-shadow:none;
  width:100%;max-width:var(--gate-col);margin:0 auto;max-height:none;overflow:visible;padding:0}
.gate-card[hidden]{display:none}
/* fase intro (benvenuto/consenso): la chat resta nascosta finché il consenso non è dato */
body.pre-chat header,body.pre-chat #chat,body.pre-chat #opzioni,body.pre-chat #barra{display:none}

/* stepper del consenso: orientamento visivo del flusso a 2 passi (decorativo → aria-hidden;
   la semantica resta negli heading). Stato statico per card. */
.gate-stepper{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3)}
.gate-step{display:inline-flex;align-items:center;gap:var(--space-1-5);min-width:0}
.gate-step-dot{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-pill);display:grid;
  place-items:center;font-size:var(--fz-sm);font-weight:var(--fw-semibold);line-height:1;
  border:1.5px solid var(--color-border);background:var(--surface-white);color:var(--color-text-soft);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.gate-step-lbl{font-size:var(--fz-sm);font-weight:var(--fw-medium);color:var(--color-text-soft);
  white-space:nowrap;letter-spacing:.01em}
.gate-step-bar{flex:1 1 auto;min-width:18px;height:2px;border-radius:2px;background:var(--color-border)}
.gate-step-bar.is-filled{background:var(--brand-teal)}
.gate-step.is-current .gate-step-dot{background:var(--brand-teal);border-color:var(--brand-teal);color:var(--color-on-brand)}
.gate-step.is-current .gate-step-lbl{color:var(--brand-forest);font-weight:var(--fw-semibold)}
.gate-step.is-done .gate-step-dot{background:var(--surface-teal-subtle);border-color:var(--brand-teal);color:var(--brand-teal-700)}
.gate-step.is-done .gate-step-lbl{color:var(--brand-teal-700)}

/* avviso (limiti LPPsi): ambra TENUE — tinta schiarita verso il bianco → testo scuro più leggibile */
.gate-warn{display:flex;gap:var(--space-2);align-items:flex-start;margin:0 0 var(--space-2);
  background:color-mix(in srgb,var(--surface-apricot-tint) 55%,var(--surface-white));color:var(--text-warm-dim);
  border:1px solid color-mix(in srgb,var(--text-warm-dim) 22%,transparent);
  border-radius:var(--radius-lg);padding:var(--space-3);font-size:var(--fz-sm);line-height:1.5}
.gate-warn .gate-warn-ic{flex:0 0 auto;margin-top:.05rem}
.gate-warn strong{font-weight:var(--fw-semibold)}
.gate-card h2{font-weight:var(--fw-semibold);font-size:var(--fz-title);letter-spacing:-.01em;margin:0 0 var(--space-2);color:var(--color-text)}
.gate-card p,.gate-card li{color:var(--color-text-muted);font-size:var(--fz-sm);line-height:1.5;max-width:60ch}
.gate-card ul{margin:var(--space-2) 0;padding-left:1.1rem}
/* nota di crisi: blush TENUE — stesso principio, testo rosso più leggibile su fondo pallido */
.gate-card .gate-nota{display:flex;gap:var(--space-2);align-items:flex-start;
  background:color-mix(in srgb,var(--surface-blush-tint) 55%,var(--surface-white));color:var(--text-danger-dim);
  border:1px solid color-mix(in srgb,var(--text-danger-dim) 18%,transparent);
  border-radius:var(--radius-md);padding:var(--space-3);margin:var(--space-2) 0;
  font-size:var(--fz-sm);line-height:1.5;max-width:none}
.gate-nota .gate-nota-ic{flex:0 0 auto;margin-top:.08rem;color:var(--text-danger-dim)}
.gate-card .gate-nota strong{font-weight:var(--fw-semibold)}
.gate-consenso{display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-3) 0 var(--space-1);
  font-size:var(--fz-base);color:var(--color-text);cursor:pointer}
.gate-consenso input{margin-top:.15rem;width:20px;height:20px;accent-color:var(--brand-teal);flex:0 0 auto}
.gate-card .btn{margin-top:var(--space-2)}
/* corpo dell'informativa su 2 colonne quando c'è spazio (1 sotto i 20rem per colonna):
   abbassa l'altezza così il consenso sta nel viewport senza far scrollare la pagina */
.gate-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:var(--space-2) var(--space-6);align-items:start;margin:0 0 var(--space-2)}
.gate-flow > p{margin:0 0 var(--space-2);max-width:none}
.gate-flow ul{margin:0}

/* MOBILE: colonna del consenso tokenizzata (--gate-col-mobile) → niente edge-to-edge, paginazione coerente */
@media (max-width:560px){
  .gate{max-width:var(--gate-col-mobile);padding:var(--space-5) var(--space-4)}
}


/* ══════════════════════════════════════════════════════════════════════
   RESTYLE "GEMINI": benvenuto + sfere · flourish invio · bolle a gradiente
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sfondo organico: 3 sfere a radial-gradient (NIENTE filter:blur, per le prestazioni:
      l'alpha sfuma a 0 prima del bordo → l'occhio le legge "sfocate"). Solo in fase intro. ── */
.sfondo-orbi{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--color-bg);pointer-events:none}
body:not(.pre-chat) .sfondo-orbi{display:none}
/* velo chiaro: appena compare il consenso (i "check"), un velo del colore-bg si dissolve sopra le sfere
   → sfondo più chiaro, testo del gate più leggibile. Resta SOTTO la colonna del gate (z-index:1). */
.sfondo-orbi::after{content:"";position:absolute;inset:0;background:var(--color-bg);
  opacity:0;transition:opacity .6s var(--ease-soft);pointer-events:none}
body:has(#gate:not([hidden])) .sfondo-orbi::after{opacity:.68}
.orbo{position:absolute;width:60vmax;height:60vmax;border-radius:50%;will-change:transform}
.orbo-1{top:-18vmax;left:-12vmax;background:radial-gradient(circle at 50% 50%,
  rgba(var(--brand-teal-rgb),.26) 0%,rgba(var(--brand-teal-rgb),.15) 32%,rgba(var(--brand-teal-rgb),.05) 55%,rgba(var(--brand-teal-rgb),0) 72%)}
.orbo-2{bottom:-22vmax;right:-14vmax;width:66vmax;height:66vmax;background:radial-gradient(circle at 50% 50%,
  rgba(var(--accent-apricot-rgb),.24) 0%,rgba(var(--accent-apricot-rgb),.14) 34%,rgba(var(--accent-apricot-rgb),.05) 58%,rgba(var(--accent-apricot-rgb),0) 74%)}
.orbo-3{top:26%;left:30%;width:52vmax;height:52vmax;background:radial-gradient(circle at 50% 50%,
  rgba(var(--brand-lime-rgb),.28) 0%,rgba(var(--brand-lime-rgb),.15) 30%,rgba(var(--brand-lime-rgb),.05) 56%,rgba(var(--brand-lime-rgb),0) 72%)}

/* ── Schermata di benvenuto (sopra le sfere) ── */
.benvenuto{position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:var(--space-6) var(--space-5)}
.benvenuto[hidden]{display:none}
.benvenuto-centro{text-align:center;max-width:var(--content-width)}
.benvenuto-titolo{font-size:clamp(1.75rem,7vw,2.75rem);font-weight:var(--fw-semibold);color:var(--brand-forest);
  letter-spacing:-.01em;line-height:1.15;margin:0 0 var(--space-5)}

@media (prefers-reduced-motion:no-preference){
  .orbo-1{animation:orbo-deriva-1 24s var(--ease-soft) infinite alternate}
  .orbo-2{animation:orbo-deriva-2 30s var(--ease-soft) infinite alternate;animation-delay:-6s}
  .orbo-3{animation:orbo-deriva-3 19s var(--ease-soft) infinite alternate;animation-delay:-11s}
  .benvenuto-centro{animation:comparsa-testo .55s var(--ease-soft) both}
}
@keyframes orbo-deriva-1{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(4vmax,3vmax) rotate(8deg) scale(1.06)}100%{transform:translate(-2vmax,5vmax) rotate(-5deg) scale(1.02)}}
@keyframes orbo-deriva-2{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-5vmax,-3vmax) rotate(-7deg) scale(1.08)}100%{transform:translate(3vmax,-5vmax) rotate(6deg) scale(1.03)}}
@keyframes orbo-deriva-3{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(5vmax,-4vmax) rotate(10deg) scale(1.05)}100%{transform:translate(-4vmax,2vmax) rotate(-4deg) scale(1)}}

/* ── Effetto glow "codeshack": un WRAPPER trasparente (padding 1px) avvolge un box opaco; due pseudo
      dietro (z-index:-1) mostrano il gradiente solo come BORDO (::after) + ALONE sfocato (::before).
      Il gradiente SCORRE (linear-gradient + background-position), non ruota. Parte con .glow-active
      (replay a ogni invio / a ogni risposta), 1.5s, poi svanisce. Stessi token colore del DS.
      Usato sia per il composer sia, avvolgendole, per le bolle bot. ── */
/* il box ADERISCE al contenuto: il wrapper ha lo stesso raggio del box interno + 1px del bordo,
   e i pseudo ereditano il raggio del wrapper (così il bordo gradiente segue la forma, coda inclusa). */
.glow-wrapper{position:relative;border-radius:calc(var(--chat-composer-radius, 16px) + 1px);padding:1px;z-index:1;pointer-events:auto}
.glow-wrapper > *{position:relative;z-index:1}
/* COMPOSER: il glow segue il border-radius del composer (30px per il fallback, vedi .composer sopra) */
#composerGlow{border-radius:31px}
/* contesto BOLLA: raggio della bolla (coda asimmetrica inclusa) + 1px, così il box aderisce alla bolla */
.wm-row .glow-wrapper{border-radius:calc(var(--chat-bubble-radius, 16px) + 1px);
  border-bottom-left-radius:calc(var(--chat-bubble-tail, 8px) + 1px)}
/* ADERENZA: il cap di larghezza vive sul WRAPPER (non sulla bolla), e la bolla riempie il wrapper.
   Senza questo, il wrapper (flex item shrink-to-fit) si gonfia fino alla riga piena mentre la bolla
   resta a min(86%,46ch) e si allinea a sinistra → fascia di gradiente che sporge a destra. */
.wm-row.is-bot .glow-wrapper{max-width:var(--chat-bubble-max)}  /* 86% — percentuale della RIGA (definita) */
.wm-row .glow-wrapper > .bolla{max-width:46ch}                   /* il cap assoluto resta sulla bolla, niente % circolare */
.glow-wrapper::after{content:"";position:absolute;inset:0.4px;border-radius:inherit;
  background-image:linear-gradient(135deg,var(--accent-apricot),var(--accent-pomegranate),var(--brand-lime),var(--brand-teal),var(--accent-apricot));
  background-size:300% 300%;opacity:0;z-index:-1}
.glow-wrapper::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:linear-gradient(135deg,var(--accent-apricot),var(--accent-pomegranate),var(--brand-lime),var(--brand-teal),var(--accent-apricot));
  background-size:300% 300%;filter:blur(0px);opacity:0;z-index:-1}
/* DALLA CRISI IN POI: il glow (composer, bolle, "pensante") diventa ROSSASTRO — segnale caldo di
   allerta. Sostituisce solo i COLORI del gradiente; sweep e animazioni restano identici. */
body.in-crisi .glow-wrapper::after,
body.in-crisi .glow-wrapper::before{
  background-image:linear-gradient(135deg,var(--accent-apricot),var(--accent-pomegranate),#d6304a,var(--accent-pomegranate),var(--accent-apricot));
}
@media (prefers-reduced-motion:no-preference){
  .glow-wrapper.glow-active::after{animation:gradientGlow var(--glow-dur,5s) ease,borderFade var(--glow-dur,5s) ease}
  .glow-wrapper.glow-active::before{animation:gradientGlow var(--glow-dur,5s) ease,glowPulse var(--glow-dur,5s) ease}
  /* invio: il box (glow incluso) si solleva un attimo e rientra con un piccolo rimbalzo elastico morbido */
  #composerGlow.is-invio{animation:invio-rimbalzo .5s var(--ease-soft) both}
  /* bolla che ELABORA ("sta pensando"): glow CONTINUO che respira finché attende la risposta —
     stato proprio della funzione, distinto dallo sweep di sola andata dell'invio. */
  .glow-wrapper.glow-pensante::after{animation:gradientGlow 3s ease-in-out infinite alternate,bordoPensante 2s ease-in-out infinite}
  .glow-wrapper.glow-pensante::before{animation:gradientGlow 3s ease-in-out infinite alternate,alonePensante 2s ease-in-out infinite}
}
/* sweep di SOLA ANDATA: il gradiente scorre 0% → 100% una volta, senza tornare indietro (niente boomerang) */
@keyframes gradientGlow{from{background-position:0% 50%}to{background-position:100% 50%}}
/* picco spostato al 70%: salita lenta (0→70%), rilascio rapido (70→100%) */
@keyframes borderFade{0%{opacity:0}70%{opacity:.3}100%{opacity:0}}
/* alone più SOTTILE al picco: meno blur e meno inset → bordino sottile, non una fascia spessa */
@keyframes glowPulse{0%{inset:0;opacity:0;filter:blur(0px)}70%{inset:0px;opacity:0.8;filter:blur(25px)}100%{inset:0;opacity:0;filter:blur(0px)}}
/* rimbalzo d'invio: su di scatto, poi oscillazione smorzata fino al riposo (elastico morbido) */
@keyframes invio-rimbalzo{0%{transform:translateY(0)}30%{transform:translateY(-1px)}58%{transform:translateY(2px)}80%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}
/* glow "pensante": bordo e alone respirano in loop mentre la bolla elabora (gentile, continuo) */
@keyframes bordoPensante{0%,100%{opacity:0}50%{opacity:.5}}
@keyframes alonePensante{0%,100%{inset:5px;opacity:.4;filter:blur(15px)}50%{inset:15px;opacity:.8;filter:blur(15px)}}
/* crescita del comparto bolla (glow incluso): SOLO IN ALTEZZA (scaleY 90%→100%), larghezza fissa e
   agnostica dal testo (che compare già con la propria animazione parola per parola). Nessuna scala in
   larghezza = nessun "tiro" orizzontale sul testo, nessun reflow. */
/* dissolvenza + blur: la bolla (glow incluso) emerge sfocata e va a fuoco mentre cresce (blur un filo più
   corto: a fuoco al 55% invece che al 65%) */
@keyframes bolla-cresce{0%{opacity:0;transform:scaleY(1);filter:blur(0px)}45%{opacity:1}55%{filter:blur(0)}100%{opacity:1;transform:scaleY(1);filter:blur(0)}}