<!-- tell-v23 16ott2026: INGLESE. Carica /i18n.js (in italiano non fa nulla); nomi di persone/team, elementi DNA, testo della storia e bozza AI marcati translate="no"; dettatura nella lingua scelta (TRSP_LOCALE); prezzi dell’assistente in formato inglese solo in inglese; testo di condivisione via window.t; il riepilogo del merito si compone a pezzi (nodi di testo separati) per poterlo tradurre, in italiano identico. -->
<!-- tell-v22 14ott2026: l'occhio non si capiva: al suo posto un bottoncino scritto PUBBLICO / NASCOSTO su ogni nome del merito, e il testo d'aiuto lo nomina -->
<!-- tell-v21 14ott2026: POST PUBBLICO, ATTORE SEGRETO. Ogni nome del merito ha l'occhio "mostra/nascondi in pubblico". I nascosti non finiscono sulla storia: il database li mette nel cassetto riservato (story_credits_private), visibile solo al team e al report del consiglio; il sigillo li comprende nell'impronta. L'invito via email parte anche ai nascosti. -->
<!-- tell-v20 14ott2026: ATTRIBUISCI IL MERITO. Campo sotto il peso dichiarato: membri del team, nomi esterni, interi team (anche multi-team). Va in stories.credits; il database rilegge i nomi dai profili, scarta qualsiasi email, sigilla il merito insieme al testo e lo rende immutabile. Per gli esterni l'autore puo' scrivere un'email: dopo la pubblicazione parte l'invito (Edge Function credit-invite, max 5 per storia); l'email non viene salvata da nessuna parte. -->
<!-- tell-v19 24set2026: (1) arriva dalla nuova home con la storia gia' scritta: se c'e' trsp_tell_prefill (stesso team, meno di un'ora) il testo entra nel composer e si prosegue da qui, anche con Racconta con AI. (2) FIX: i team in cui sei partner 'accepted' (entrati da join.html) non comparivano nella scelta del team, solo gli 'active'. -->
<!-- tell-v18 16set2026: FIX riservatezza — una storia interna al team non finisce piu' nella community di LIVE. "Pubblica anche sul tuo profilo" si spegne e si blocca quando la storia non e' pubblica, e in ogni caso il post in feed_posts viene scritto solo per le storie pubbliche. -->
<!-- tell-v17 16set2026: RACCONTA CON AI. Pulsante ✦ sotto il composer: l'assistente (Edge Function story-assistant) fa max 3 domande sugli elementi mancanti e compone una bozza SOLO con i fatti dell'autore, con le parole aggiunte in evidenza e togliibili. I tag restano manuali: l'AI non propone mai VSM. Quote e tetti decisi dal server (ai_tell_status / ai_tell_reserve): prova gratuita, extra 0,49 €/mese, tetto giornaliero, budget piattaforma. Proposta di acquisto DOPO la bozza. La dicitura AI la scrive il sistema (ai_tell_attach_story -> stories.ai_assist), l'utente non puo' falsificarla. Nessuna modifica a voce, foto, VSM, analisi, conferma, condivisione. -->
<!-- tell-v16 19ago2026: l'analisi smette di essere smemorata e muta. (1) ARCO NARRATIVO: a analyze-story arrivano teamId e itemIds, con cui la function recupera via SQL le puntate precedenti dello stesso filone (thread_for_tags) e valuta il PASSO AVANTI invece della singola frase isolata — era questa la causa dei voti bassi ingiusti sulle storie di serie. (2) MOTIVAZIONI: reasons[] e missing[] mostrate in anteprima, fine dei voti muti. (3) DICHIARAZIONE DELL'AUTORE: se lo scarto fra il tuo peso e il voto dell'algoritmo supera i 2 punti, compare il riquadro per farlo rileggere tenendo conto del tuo giudizio; il tuo voto NON entra nella media, entra nel prompt come informazione da riconciliare. (4) STATO: dopo l'inserimento si chiama refresh_rating_status, cosi' la storia nasce gia' nello stato corretto invece di restare 'pending' per sempre. -->
<!-- tell-v14 09ago2026: nuova UI di selezione VSM in screen-input — blob (mansioni/servizi/valori) al posto degli accordion, blocchi sempre aperti e multi-selezione, mansioni gia usate in cima con "Altre N", riordino di servizi e valori per co-occorrenza sulle storie precedenti dell'autore, VSM dei moduli isolati in schede a fine pagina con interruttore per l'intero pacchetto. Nessuna modifica a voce, foto, anteprima, conferma, condivisione. -->
<!-- tell-v15 14ago2026: fallimento di analyze-story non piu' silenzioso — avviso esplicito "Certificazione non completata", pulsante Riprova che non fa perdere testo ne' selezioni, rating_status='uncertified' sulle storie senza algo_rating (prima uscivano indistinguibili dalle altre); rimosso l'invito fuorviante a "dare il voto manuale", che non entra nel punteggio -->
<!-- tell-v13 07ago2026: analyze-story chiamata via db.functions.invoke() (JWT utente) invece di fetch con publishable key come Bearer — prerequisito per attivare verify_jwt sulla function e chiudere l'endpoint aperto -->
<!-- tell-v12 07ago2026: FIX spinner infinito su seconda storia (btn-confirm restava disabled dopo il successo: nessun finally, e resetAll non lo ripristinava) + FIX foto della storia precedente riproposta (pendingStoryFile e preview non azzerati in resetAll) + guard anti-doppio-click su sendStory/confirmStory + timeout analyze-story 8s->20s (su rete mobile 8s tagliavano l'analisi e mostravano "Valutazione AI non disponibile") -->
<!-- tell-v11 19lug2026: design autovalutazione (decisione 18lug) — lo slider diventa PESO DICHIARATO ("quanto conta per te?") e va su story_author_ratings (congelato, solo team); final_rating = algo puro, NIENTE piu' media col voto autore (era (algo+voto)/2: origine del caso 465d49d5); rimossa divergence-box; stories.author_rating legacy non piu' scritta -->
<!-- tell-v10 01lug2026 -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <script src="/i18n.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Tell">
    <meta name="theme-color" content="#ffffff">
    <title>TELL — Traspality</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --blue:        #175F75;
            --blue-light:  #55A2B5;
            --green:       #8FC55B;
            --yellow:      #E6CF42;
            --purple:      #B54D8D;
            --purple-dark: #7a2b5a;
            --bg:          #f8fafb;
            --surface:     #ffffff;
            --border:      #eeeeee;
            --text:        #222222;
            --muted:       #aaaaaa;
        }

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

        html, body {
            height: 100%;
            font-family: 'Montserrat', sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow: hidden;
        }

        .screen {
            position: fixed; inset: 0;
            display: flex; flex-direction: column;
            transition: opacity .3s ease, transform .3s ease;
        }
        .screen.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }

        /* TOP BAR */
        .top-bar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 20px 10px;
            padding-top: max(14px, env(safe-area-inset-top));
            background: white; border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .top-brand { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
        .top-brand span { color: var(--purple); }

        .team-pill {
            display: flex; align-items: center; gap: 7px;
            background: var(--bg); border: 1px solid var(--border);
            border-radius: 20px; padding: 7px 14px; cursor: pointer; transition: border-color .2s;
        }
        .team-pill:hover { border-color: var(--purple); }
        .team-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
        .team-pill-name { font-size: 11px; font-weight: 600; color: var(--blue); }
        .team-pill-arrow { font-size: 9px; color: var(--muted); }

        .top-back { background: none; border: none; color: var(--muted); font-family: 'Montserrat'; font-size: 11px; font-weight: 600; letter-spacing: 1px; cursor: pointer; text-decoration: none; }
        .top-back:hover { color: var(--blue); }

        /* BODY */
        .body-area { flex: 1; display: flex; flex-direction: column; padding: 0 20px; overflow-y: auto; }

        .prompt-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); padding: 18px 0 12px; }

        .story-textarea {
            flex: 1; width: 100%; min-height: 120px;
            background: transparent; border: none; outline: none; resize: none;
            font-family: 'Montserrat'; font-size: 18px; font-weight: 300;
            line-height: 1.6; color: var(--text); caret-color: var(--purple);
        }
        .story-textarea::placeholder { color: #cccccc; }

        .char-count { font-size: 10px; font-weight: 600; color: var(--muted); text-align: right; padding: 6px 0 8px; flex-shrink: 0; }

        /* SELEZIONE VSM */
        .tags-area { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }

        .vsm-blobs { display: flex; gap: 10px; justify-content: center; padding: 4px 0 6px; }
        .vsm-blob { flex: 0 1 110px; background: none; border: none; padding: 4px 0; cursor: pointer; text-align: center; font-family: 'Montserrat'; }
        .vsm-blobwrap { display: block; position: relative; width: 52px; height: 52px; margin: 0 auto; }
        .vsm-blobwrap svg { display: block; width: 52px; height: 52px; }
        .vsm-num { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; }
        .vsm-cap { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

        .vsm-block { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; }
        .vsm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
        .vsm-seed { display: block; width: 14px; height: 14px; flex-shrink: 0; }
        .vsm-seed svg { display: block; width: 14px; height: 14px; }
        .vsm-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #555; }
        .vsm-more { border: none; background: none; padding: 0; margin-top: 12px; font-family: 'Montserrat'; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .vsm-more:hover { color: var(--blue); }

        .packs-area { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 4px; border-top: 1px solid var(--border); margin-top: 4px; }
        .packs-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
        .pack { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
        .pack-top { display: flex; align-items: center; gap: 10px; }
        .pack-name { font-size: 12px; font-weight: 700; color: #555; }
        .pack-sw { margin-left: auto; flex-shrink: 0; width: 44px; height: 26px; border-radius: 20px; border: 1px solid var(--border); background: #ececec; position: relative; cursor: pointer; transition: background .18s; }
        .pack-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s; }
        .pack-sw.on { background: var(--purple); border-color: var(--purple); }
        .pack-sw.on::after { transform: translateX(18px); }
        .pack-sw.part { background: #dcdcdc; border-color: var(--purple); }
        .pack-sw.part::after { transform: translateX(9px); }
        .pack-more { border: none; background: none; padding: 0; margin-top: 10px; font-family: 'Montserrat'; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .pack-body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
        .pack-body.open { display: block; }
        .pack-group { margin-bottom: 10px; }
        .pack-group:last-child { margin-bottom: 0; }
        .pack-group h4 { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
        .chip.chip-mod { border-style: dashed; }
        .chip.chip-mod.selected { border-style: solid; }

        .chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

        .chip {
            padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
            background: white; font-family: 'Montserrat'; font-size: 11px; font-weight: 600;
            color: #888; cursor: pointer; transition: all .2s; white-space: nowrap;
        }
        .chip.none-chip { font-style: italic; font-weight: 400; }
        .chip:hover { border-color: #bbb; color: var(--text); }
        .chip-v.selected { background: #EDF7E4; color: #5a8a30; border-color: var(--green); }
        .chip-s.selected { background: #FDF9E3; color: #9c8a1b; border-color: var(--yellow); }
        .chip-m.selected { background: #F9EDF5; color: var(--purple-dark); border-color: var(--purple); }

        /* ACTION BAR */
        .action-bar {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 20px;
            padding-bottom: max(20px, env(safe-area-inset-bottom));
            background: white; border-top: 1px solid var(--border); flex-shrink: 0;
        }

        /* COMPOSER (textarea + voce insieme) */
        .composer {
            flex: 1; display: flex; flex-direction: column; min-height: 200px;
            background: white; border: 1.5px solid var(--border); border-radius: 18px;
            padding: 16px 16px 10px; margin-bottom: 12px;
            transition: border-color .2s;
        }
        .composer:focus-within { border-color: var(--purple); }
        .composer-foot {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border);
        }
        .composer-foot .char-count { padding: 0; text-align: left; }

        .voice-btn {
            display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
            padding: 11px 18px; border-radius: 24px;
            border: 1.5px solid var(--purple); background: #F9EDF5;
            color: var(--purple-dark); font-family: 'Montserrat';
            font-size: 12px; font-weight: 700; letter-spacing: .5px;
            cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent;
        }
        .voice-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .voice-btn:hover { background: var(--purple); color: white; }
        .voice-btn.recording { background: #e74c3c; border-color: #e74c3c; color: white; animation: pulse-rec 1.2s ease-in-out infinite; }
        @keyframes pulse-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,.4); } 50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); } }

        .btn-send {
            flex: 1; height: 50px; border-radius: 25px; border: none;
            background: var(--purple); font-family: 'Montserrat'; font-size: 12px;
            font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: white;
            cursor: pointer; transition: background .2s;
        }
        .btn-send:hover { background: var(--purple-dark); }
        .btn-send:disabled { opacity: .35; cursor: not-allowed; }

        /* PREVIEW */
        #screen-preview .body-area { overflow-y: auto; }

        .preview-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); padding: 18px 0 14px; }

        .story-box { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 14px; }
        .story-box-text { font-size: 15px; font-weight: 300; line-height: 1.7; }
        .story-box-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
        .story-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 10px; text-transform: uppercase; }
        .story-tag-v { background: #EDF7E4; color: #5a8a30; }
        .story-tag-s { background: #FDF9E3; color: #9c8a1b; }
        .story-tag-m { background: #F9EDF5; color: var(--purple-dark); }

        .rating-box { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 14px; }
        .rating-box-label { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
        .rating-row { display: flex; align-items: center; gap: 16px; }
        .rating-main { font-size: 48px; font-weight: 200; color: var(--purple); line-height: 1; }
        .rating-main span { font-size: 16px; color: var(--muted); }
        .rating-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
        .rbar-row { display: flex; align-items: center; gap: 8px; }
        .rbar-lbl { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; width: 60px; color: var(--muted); }
        .rbar-track { flex: 1; height: 3px; background: #eee; border-radius: 2px; overflow: hidden; }
        .rbar-fill { height: 100%; border-radius: 2px; }
        .rbar-val { font-size: 10px; font-weight: 700; width: 22px; text-align: right; }
        .ai-note { font-size: 11px; color: #8a6d1f; background: rgba(230,207,66,.14); border-radius: 10px; padding: 11px 13px; line-height: 1.6; margin-top: 12px; display: none; text-align: left; }
        .ai-note b { color: #6b5312; }
        .ai-retry { margin-top: 9px; background: none; border: 1px solid rgba(138,109,31,.35); color: #8a6d1f; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all .2s; }
        .ai-retry:hover { background: rgba(138,109,31,.08); }
        .ai-retry:disabled { opacity: .5; cursor: default; }
        /* v16 — l'algoritmo motiva */
        .ai-explain { display: none; margin-top: 14px; text-align: left; border-top: 1px solid rgba(0,0,0,.07); padding-top: 13px; }
        .ai-explain h5 { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
        .ai-explain ul { margin: 0 0 13px; padding-left: 16px; }
        .ai-explain li { font-size: 11.5px; font-weight: 300; color: #444; line-height: 1.65; margin-bottom: 4px; }
        .ai-explain .miss li { color: #7a6420; }
        .ai-outcome { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 11px; }
        .ai-outcome.conclusa { background: rgba(46,160,110,.14); color: #1f6b4a; }
        .ai-outcome.in_corso { background: rgba(230,207,66,.18); color: #7a6420; }
        .ai-outcome.problema_rilevato { background: rgba(90,120,200,.14); color: #3c5490; }
        /* v16 — scarto fra la dichiarazione dell'autore e il giudizio dell'algoritmo */
        .ai-gap { display: none; margin-top: 13px; background: rgba(90,120,200,.09); border: 1px solid rgba(90,120,200,.22); border-radius: 11px; padding: 13px 14px; text-align: left; }
        .ai-gap p { font-size: 11.5px; font-weight: 300; color: #3c5490; line-height: 1.65; margin: 0 0 9px; }
        .ai-gap b { font-weight: 700; }
        .ai-gap button { background: none; border: 1px solid rgba(60,84,144,.4); color: #3c5490; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all .2s; }
        .ai-gap button:hover { background: rgba(60,84,144,.08); }
        .ai-gap button:disabled { opacity: .5; cursor: default; }
        .ai-verdict { display: none; margin-top: 10px; font-size: 11.5px; font-weight: 300; line-height: 1.65; color: #3c5490; }

        .my-rating-section { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 14px; }
        .my-rating-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
        .my-rating-val { color: var(--purple); font-size: 16px; font-weight: 700; }

        input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: #eee; outline: none; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--purple); cursor: pointer; box-shadow: 0 2px 8px rgba(181,77,141,.3); }

        .divergence-box { background: #FFF9E6; border: 1px solid #E6CF42; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; display: none; }
        .divergence-box.visible { display: block; }
        .divergence-box h4 { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #9c8a1b; margin-bottom: 6px; }
        .divergence-box p { font-size: 12px; font-weight: 300; color: #666; line-height: 1.6; }

        .preview-actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
        .btn-confirm { width: 100%; padding: 16px; border-radius: 25px; border: none; background: var(--purple); font-family: 'Montserrat'; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: white; cursor: pointer; transition: background .2s; }
        .btn-confirm:hover { background: var(--purple-dark); }
        .btn-confirm:disabled { opacity: .4; cursor: not-allowed; }
        .btn-modify { width: 100%; padding: 14px; border-radius: 25px; border: 1px solid var(--border); background: white; font-family: 'Montserrat'; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .2s; }
        .btn-modify:hover { border-color: var(--blue); color: var(--blue); }

        /* DONE */
        #screen-done { align-items: center; justify-content: center; text-align: center; padding: 40px 30px; background: white; }
        .done-orb { width: 90px; height: 90px; border-radius: 50%; background: var(--purple); margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: white; animation: pop-in .5s cubic-bezier(.175,.885,.32,1.275) both; box-shadow: 0 8px 30px rgba(181,77,141,.3); }
        @keyframes pop-in { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .done-title { font-size: 26px; font-weight: 200; color: var(--blue); margin-bottom: 10px; line-height: 1.2; }
        .done-title strong { font-weight: 700; }
        .done-sub { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.6; max-width: 280px; margin: 0 auto 30px; }
        .done-score-pill { display: inline-flex; align-items: center; gap: 8px; background: #F9EDF5; border: 1px solid #e8c8e0; border-radius: 30px; padding: 10px 24px; margin-bottom: 36px; }
        .done-score-num { font-size: 22px; font-weight: 700; color: var(--purple); }
        .done-score-lbl { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
        .btn-new-story { display: block; width: 100%; max-width: 300px; margin: 0 auto; padding: 16px; border-radius: 25px; border: 1px solid var(--border); background: white; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .2s; }
        .btn-new-story:hover { border-color: var(--purple); color: var(--purple); }

        /* TEAM SHEET */
        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; z-index: 200; transition: opacity .25s; }
        .overlay.hidden { opacity: 0; pointer-events: none; }
        .sheet { width: 100%; background: white; border-radius: 20px 20px 0 0; padding: 20px 20px max(28px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 30px rgba(0,0,0,.1); }
        .sheet-handle { width: 36px; height: 4px; background: #eee; border-radius: 2px; margin: 0 auto 20px; }
        .sheet-title { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
        .team-option { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
        .team-option:last-child { border-bottom: none; }
        .team-option-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
        .team-option-name { font-size: 14px; font-weight: 600; color: var(--blue); }
        .team-option-check { margin-left: auto; color: var(--purple); font-size: 16px; }

        /* TOAST */
        .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--blue); border-radius: 30px; padding: 10px 20px; font-size: 12px; font-weight: 600; color: white; opacity: 0; transition: all .3s; pointer-events: none; white-space: nowrap; z-index: 300; }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: white; animation: spin .7s linear infinite; display: inline-block; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* IDENTITY BAR */
        .identity-bar {
            background: var(--blue); color: white;
            padding: 10px 20px;
            display: flex; align-items: center; justify-content: space-between;
            flex-shrink: 0;
        }
        .identity-who { font-size: 11px; font-weight: 300; letter-spacing: 1px; opacity: .7; }
        .identity-team {
            font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
        }
        .identity-change {
            font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
            color: rgba(255,255,255,.6); cursor: pointer; text-decoration: underline;
            background: none; border: none; font-family: 'Montserrat'; white-space: nowrap;
        }
        .identity-change:hover { color: white; }

        /* SCREEN TEAM SELECT */
        #screen-team { background: var(--bg); justify-content: flex-start; }
        #screen-team .top-bar { background: var(--blue); border-bottom: none; }
        #screen-team .top-brand { color: rgba(255,255,255,.6); }
        #screen-team .top-brand span { color: white; }
        .team-select-body { flex: 1; padding: 30px 20px; display: flex; flex-direction: column; }
        .team-select-user { font-size: 13px; font-weight: 300; color: var(--muted); margin-bottom: 6px; }
        .team-select-title { font-size: 22px; font-weight: 700; color: var(--blue); margin-bottom: 28px; line-height: 1.2; }
        .team-card {
            background: white; border: 2px solid var(--border); border-radius: 16px;
            padding: 20px; margin-bottom: 12px; cursor: pointer;
            display: flex; align-items: center; justify-content: space-between;
            transition: border-color .2s, box-shadow .2s;
        }
        .team-card:hover { border-color: var(--purple); box-shadow: 0 4px 20px rgba(181,77,141,.1); }
        .team-card-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-right: 16px; }
        .team-card-name { font-size: 18px; font-weight: 700; color: var(--blue); letter-spacing: .5px; }
        .team-card-status { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
        .team-card-arrow { font-size: 20px; color: var(--muted); }
    
        /* TOGGLE PUBBLICA STORIA */
        .publish-toggle-row { display:flex; align-items:center; justify-content:space-between; background:rgba(143,197,91,.08); border:1px solid rgba(143,197,91,.3); border-radius:14px; padding:14px 18px; margin:16px 0; }
        .publish-toggle-label { font-size:12px; font-weight:600; color:#1a1a1a; }
        .publish-toggle-sub { font-size:10px; font-weight:300; color:#888; margin-top:2px; }
        .toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
        .toggle-switch input { opacity:0; width:0; height:0; }
        .toggle-knob { position:absolute; inset:0; background:#ddd; border-radius:24px; cursor:pointer; transition:background .2s; }
        .toggle-knob::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
        .toggle-switch input:checked + .toggle-knob { background:#8FC55B; }
        .toggle-switch input:checked + .toggle-knob::before { transform:translateX(20px); }

        /* TOGGLE TIPO STORIA */
        .story-type-row { display:flex; align-items:center; justify-content:space-between; background:rgba(181,77,141,.06); border:1px solid rgba(181,77,141,.2); border-radius:14px; padding:14px 18px; margin:0 0 16px; }
        .story-type-label { font-size:12px; font-weight:600; color:#1a1a1a; }
        .story-type-sub { font-size:10px; font-weight:300; color:#888; margin-top:2px; }
        .story-type-pills { display:flex; gap:6px; flex-shrink:0; }
        .type-pill { padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:#fff; font-family:'Montserrat'; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#888; cursor:pointer; transition:all .2s; }
        .type-pill.active-team { background:var(--blue); color:#fff; border-color:var(--blue); }
        .type-pill.active-personal { background:var(--purple); color:#fff; border-color:var(--purple); }

        .photo-upload-area { margin:16px 0; }
        .photo-upload-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border:1px dashed #ccc; border-radius:12px; background:none; font-family:'Montserrat'; font-size:11px; font-weight:600; color:#888; cursor:pointer; transition:all .2s; }
        .photo-upload-btn:hover { border-color:var(--traspality-blue,#175F75); color:#175F75; }
        .photo-upload-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
        .photo-preview { margin-top:10px; position:relative; display:none; }
        .photo-preview img { max-width:100%; max-height:200px; border-radius:12px; object-fit:cover; }
        .photo-preview .remove-photo { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        /* v17 — RACCONTA CON AI */
        .ai-assist { flex-shrink: 0; margin: -2px 0 12px; }
        .ai-assist.off { display: none; }
        .ai-assist-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 24px; border: 1.5px solid var(--blue); background: #EAF3F6; color: var(--blue); font-family: 'Montserrat'; font-size: 12px; font-weight: 700; letter-spacing: .5px; cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent; }
        .ai-btn:hover { background: var(--blue); color: #fff; }
        .ai-btn:disabled { opacity: .55; cursor: wait; }
        .ai-counter { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
        .ai-panel { display: none; margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
        .ai-panel.open { display: block; }
        .ai-panel-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
        .ai-panel-sub { font-size: 11.5px; font-weight: 300; color: #666; line-height: 1.6; margin-bottom: 12px; }
        .ai-q { margin-bottom: 12px; }
        .ai-q label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
        .ai-q textarea { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: 'Montserrat'; font-size: 14px; font-weight: 300; line-height: 1.5; resize: vertical; outline: none; }
        .ai-q textarea:focus { border-color: var(--blue); }
        .ai-draft { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--text); background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
        .ai-seg, .ai-seg-demo { background: rgba(85,162,181,.18); border-bottom: 1.5px dashed var(--blue-light); color: inherit; border-radius: 3px; }
        .ai-seg { cursor: pointer; }
        .ai-seg.off { background: none; text-decoration: line-through; color: #bbb; border-bottom-color: transparent; }
        .ai-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
        .ai-primary { display: inline-block; padding: 11px 18px; border-radius: 22px; border: none; background: var(--blue); color: #fff; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; letter-spacing: .5px; cursor: pointer; text-decoration: none; }
        .ai-primary:disabled { opacity: .55; cursor: wait; }
        .ai-link { border: none; background: none; padding: 0; font-family: 'Montserrat'; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .ai-link:hover { color: var(--blue); }
        .ai-msg { display: none; font-size: 11.5px; line-height: 1.6; color: #8a6d1f; background: rgba(230,207,66,.14); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
        .ai-offer { display: none; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
        .ai-offer:first-child { margin-top: 0; border-top: none; padding-top: 0; }
        .ai-offer-title { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 6px; }
        .ai-offer p { font-size: 12px; font-weight: 300; color: #555; line-height: 1.6; margin-bottom: 10px; }
        .ai-badge { display: none; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: var(--blue); }
        .ai-disclosure { display: none; margin-top: 12px; font-size: 11px; font-weight: 400; color: var(--blue); line-height: 1.55; border-top: 1px solid var(--border); padding-top: 10px; }

        /* v20 — Attribuisci il merito */
        .credit-box { background:rgba(79,184,216,.07); border:1px solid rgba(79,184,216,.35); border-radius:14px; padding:14px 18px; margin:0 0 16px; }
        .credit-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
        .credit-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #d6eef5; border-radius:20px; padding:5px 6px 5px 11px; font-size:11px; font-weight:600; color:#175F75; }
        .credit-chip small { font-size:9px; font-weight:400; color:#999; text-transform:uppercase; letter-spacing:1px; }
        .credit-chip.hidden-pub { background:#f6f6f6; border-style:dashed; color:#777; }
        .credit-chip .vis { width:auto !important; height:auto !important; line-height:1 !important; border-radius:10px !important; padding:4px 8px !important; font-size:8px !important; font-weight:800; letter-spacing:1px; font-family:'Montserrat',sans-serif; background:#175F75 !important; color:#fff !important; }
        .credit-chip.hidden-pub .vis { background:#fff !important; color:#777 !important; border:1px dashed #aaa !important; }
        .credit-chip button { border:none; background:#eef7fa; color:#175F75; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:12px; line-height:18px; padding:0; }
        .credit-input { width:100%; margin-top:10px; font-family:'Montserrat',sans-serif; font-size:13px; padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#222; }
        .credit-sugg { display:none; background:#fff; border:1px solid #e6e6e6; border-radius:10px; margin-top:6px; overflow:hidden; }
        .credit-sugg button { display:block; width:100%; text-align:left; border:none; background:#fff; padding:10px 12px; font-family:'Montserrat',sans-serif; font-size:12px; color:#222; cursor:pointer; border-bottom:1px solid #f3f3f3; }
        .credit-sugg button:last-child { border-bottom:none; }
        .credit-sugg button:hover { background:#f4fafc; color:#175F75; }
        .credit-sugg small { color:#999; font-size:10px; margin-left:6px; }
        .credit-invites { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
        .credit-invite-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:#555; }
        .credit-invite-row input { flex:1; min-width:160px; font-family:'Montserrat',sans-serif; font-size:12px; padding:8px 10px; border:1px solid #ddd; border-radius:8px; }
        .credit-note { font-size:10px; font-weight:300; color:#999; margin-top:8px; line-height:1.5; }
</style>
</head>
<body>

<!-- SCREEN 0: SELEZIONE TEAM -->
<div class="screen hidden" id="screen-team">
    <div class="top-bar">
        <div class="top-brand"><span>T</span>RASPALITY · TELL</div>
        <a href="hub.html" class="top-back" style="color:rgba(255,255,255,.6);text-decoration:none;font-family:'Montserrat';font-size:11px;font-weight:600;letter-spacing:1px;">← Hub</a>
    </div>
    <div class="team-select-body">
        <div class="team-select-user" id="select-username" translate="no"></div>
        <div class="team-select-title">Per quale team<br>stai certificando?</div>
        <div id="team-cards-list"></div>
    </div>
</div>

<!-- SCREEN 1: INPUT -->
<div class="screen hidden" id="screen-input">
    <div class="top-bar">
        <a href="hub.html" class="top-back">← Hub</a>
        <div class="top-brand"><span>T</span>RASPALITY · TELL</div>
    </div>
    <div class="identity-bar">
        <div>
            <div class="identity-who" id="identity-who" translate="no">—</div>
            <div class="identity-team" id="identity-team" translate="no">—</div>
        </div>
        <button class="identity-change" onclick="openTeamSelect()">Cambia team</button>
    </div>

    <div class="body-area">
        <div class="prompt-label">Cosa hai fatto oggi?</div>

        <!-- UPLOAD FOTO — visibile subito -->
        <div class="photo-upload-area" id="photo-upload-area-input">
            <label class="photo-upload-btn" for="story-photo-input">
                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                Aggiungi una foto
            </label>
            <input type="file" id="story-photo-input" accept="image/*" style="display:none" onchange="previewPhoto(this)">
            <div class="photo-preview" id="photo-preview">
                <img id="photo-preview-img" alt="">
                <button class="remove-photo" onclick="removePhoto()">&times;</button>
            </div>
        </div>

        <div class="composer">
            <textarea class="story-textarea" id="story-textarea" placeholder="Descrivi l&rsquo;azione&hellip; oppure tocca &laquo;Racconta a voce&raquo; qui sotto e parla." maxlength="1200" oninput="onTextInput()"></textarea>
            <div class="composer-foot">
                <span class="char-count" id="char-count">0 / 1200</span>
                <button class="voice-btn" id="btn-mic" onclick="toggleVoice()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                        <line x1="12" y1="19" x2="12" y2="23"/>
                        <line x1="8" y1="23" x2="16" y2="23"/>
                    </svg>
                    <span class="voice-label" id="mic-label">Racconta a voce</span>
                </button>
            </div>
        </div>

        <!-- v17: RACCONTA CON AI -->
        <div class="ai-assist off" id="ai-assist">
            <div class="ai-assist-bar">
                <button class="ai-btn" id="ai-btn" onclick="aiStart()">&#10022; Racconta con AI</button>
                <span class="ai-counter" id="ai-counter"></span>
            </div>
            <div class="ai-panel" id="ai-panel">
                <div id="ai-step-questions" style="display:none">
                    <div class="ai-panel-title">Qualche dettaglio in pi&ugrave;</div>
                    <p class="ai-panel-sub" id="ai-questions-sub">Rispondi solo a quello che sai: le risposte vuote vengono ignorate.</p>
                    <div id="ai-questions"></div>
                    <div class="ai-actions">
                        <button class="ai-primary" id="ai-draft-btn" onclick="aiDraft()">Componi la bozza</button>
                        <button class="ai-link" onclick="aiClose()">Annulla</button>
                    </div>
                </div>
                <div id="ai-step-draft" style="display:none">
                    <div class="ai-panel-title">La tua bozza</div>
                    <p class="ai-panel-sub">In <span class="ai-seg-demo">evidenza</span> le parole aggiunte dall&rsquo;assistente: toccale per toglierle. Il resto &egrave; tuo, e potrai ancora modificarlo.</p>
                    <div class="ai-draft" id="ai-draft" translate="no"></div>
                    <div class="ai-actions">
                        <button class="ai-primary" onclick="aiUseDraft()">Usa questa bozza</button>
                        <button class="ai-link" id="ai-redo-btn" onclick="aiDraft()">Rifai la bozza</button>
                        <button class="ai-link" onclick="aiClose()">Annulla</button>
                    </div>
                </div>
                <div class="ai-offer" id="ai-offer">
                    <div class="ai-offer-title" id="ai-offer-title">Ti &egrave; stato utile?</div>
                    <p id="ai-offer-text"></p>
                    <div class="ai-actions">
                        <a class="ai-primary" id="ai-offer-cta" href="pricing.html#assistente">Scopri l&rsquo;Assistente</a>
                        <button class="ai-link" id="ai-offer-close" onclick="aiClose()" style="display:none">Chiudi</button>
                    </div>
                </div>
                <div class="ai-msg" id="ai-msg"></div>
            </div>
            <div class="ai-badge" id="ai-badge">&#10022; Raccolta con assistente AI &mdash; fatti e valori restano tuoi.</div>
        </div>

        <div class="tags-area">
            <div class="vsm-blobs" id="vsm-blobs"></div>

            <div class="vsm-block">
                <div class="vsm-head"><span class="vsm-seed" id="seed-m"></span><span class="vsm-title">Mansioni</span></div>
                <div class="chips-wrap" id="chips-m"></div>
                <button class="vsm-more" id="more-m" onclick="toggleMore()" style="display:none"></button>
            </div>

            <div class="vsm-block">
                <div class="vsm-head"><span class="vsm-seed" id="seed-s"></span><span class="vsm-title">Servizi</span></div>
                <div class="chips-wrap" id="chips-s"></div>
            </div>

            <div class="vsm-block">
                <div class="vsm-head"><span class="vsm-seed" id="seed-v"></span><span class="vsm-title">Valori</span></div>
                <div class="chips-wrap" id="chips-v"></div>
            </div>

            <div class="packs-area" id="packs-area" style="display:none">
                <div class="packs-label">Pacchetti attivi sul team</div>
                <div id="packs-list"></div>
            </div>
        </div>
    </div>

    <div class="action-bar">
        <button class="btn-send" id="btn-send" onclick="sendStory()" disabled>CERTIFICA &rarr;</button>
    </div>
</div>

<!-- SCREEN 2: PREVIEW -->
<div class="screen hidden" id="screen-preview">
    <div class="top-bar">
        <button class="top-back" onclick="goBack()">← Modifica</button>
        <div class="top-brand"><span>T</span>RASPALITY · PREVIEW</div>
    </div>
    <div class="body-area">
        <div class="preview-label" id="preview-label">Come la vediamo noi</div>

        <div class="story-box">
            <div class="story-box-text" id="prev-story-text" translate="no">—</div>
            <div class="story-box-meta" id="prev-tags"></div>
            <div class="ai-disclosure" id="prev-ai-disclosure"></div>
        </div>

        <div class="rating-box">
            <div class="rating-box-label">Rating Algoritmo</div>
            <div class="rating-row">
                <div class="rating-main" id="prev-algo-num">—<span>/10</span></div>
                <div class="rating-bars" id="prev-bars"></div>
            </div>
            <div class="ai-note" id="ai-note"><b>Certificazione non completata.</b> L’analisi non ha risposto, quindi questa storia non ha ancora un punteggio. Puoi riprovare adesso, oppure pubblicarla lo stesso: resterà segnata come <b>da certificare</b> e potrai completarla più tardi.<br><button class="ai-retry" id="ai-retry" onclick="retryAnalysis()">Riprova la certificazione</button></div>

            <!-- v16: l'algoritmo deve dire perché. Un voto muto non insegna niente. -->
            <div class="ai-explain" id="ai-explain">
                <span class="ai-outcome" id="ai-outcome"></span>
                <div id="ai-reasons-wrap"><h5>Perché questo voto</h5><ul id="ai-reasons" translate="no"></ul></div>
                <div id="ai-missing-wrap" class="miss"><h5>Cosa lo alzerebbe</h5><ul id="ai-missing" translate="no"></ul></div>
            </div>

            <!-- v16: il tuo voto non entra nella media, ma l'algoritmo ci si deve paragonare -->
            <div class="ai-gap" id="ai-gap">
                <p id="ai-gap-text"></p>
                <button id="ai-gap-btn" onclick="reanalyzeWithMyRating()">Rileggi tenendo conto del mio voto</button>
                <div class="ai-verdict" id="ai-verdict"></div>
            </div>
        </div>

        <div class="my-rating-section">
            <div class="my-rating-top">
                <span>Quanto conta per te questa azione?</span>
                <span class="my-rating-val" id="slider-val">7 / 10</span>
            </div>
            <input type="range" id="rating-slider" min="1" max="10" step="1" value="7" oninput="onSlider()">
            <div style="font-size:10px;font-weight:300;color:#999;margin-top:8px;line-height:1.5">Non entra nella media: la qualit&agrave; la certificano i tuoi pari. &Egrave; la tua dichiarazione, il peso che questa azione ha per te &mdash; e se si discosta molto dal giudizio dell&rsquo;algoritmo puoi chiedergli di rileggere tenendone conto. Resta visibile solo al team.</div>
        </div>

        <!-- UPLOAD FOTO spostata in screen-input -->

        <!-- v20: ATTRIBUISCI IL MERITO -->
        <div class="credit-box" id="credit-box">
            <div class="publish-toggle-label">Attribuisci il merito</div>
            <div class="publish-toggle-sub">Chi ha generato il valore di questa azione? Non sempre &egrave; chi la racconta. Puoi indicare pi&ugrave; persone, anche esterne al team, e interi team.</div>
            <div class="credit-chips" id="credit-chips"></div>
            <input class="credit-input" id="credit-input" type="text" placeholder="Scrivi un nome o un team&hellip;" autocomplete="off" oninput="creditSearch()" onfocus="creditSearch()">
            <div class="credit-sugg" id="credit-sugg"></div>
            <div class="credit-invites" id="credit-invites"></div>
            <div class="credit-note">Facoltativo. Con la conferma il merito viene sigillato insieme alla storia e non si cambia pi&ugrave;. Tocca <b>PUBBLICO</b> accanto a un nome per renderlo <b>NASCOSTO</b>: i nomi nascosti non compaiono sulla storia pubblica, li vedono solo il team e il consiglio. Le email servono solo per l&rsquo;invito e non vengono salvate.</div>
        </div>

        <div class="story-type-row">
            <div>
                <div class="story-type-label">Tipo di azione</div>
                <div class="story-type-sub" id="story-type-sub">Conta nel DNA Score del team</div>
            </div>
            <div class="story-type-pills">
                <button class="type-pill active-team" id="pill-team" onclick="setStoryType('team')">Team</button>
                <button class="type-pill" id="pill-personal" onclick="setStoryType('personal')">Personale</button>
            </div>
        </div>

        <div class="publish-toggle-row">
            <div>
                <div class="publish-toggle-label">Pubblica sulla pagina del team</div>
                <div class="publish-toggle-sub">L&rsquo;azione certificata apparirà nella vetrina pubblica di questo team</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="toggle-public" checked onchange="syncPersonalFeed()">
                <span class="toggle-knob"></span>
            </label>
        </div>

        <div class="publish-toggle-row" style="margin-top:-8px">
            <div>
                <div class="publish-toggle-label">Pubblica anche sul tuo profilo</div>
                <div class="publish-toggle-sub" id="personal-feed-sub">Condividi questa azione nel tuo DNA personale e nella community di LIVE</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="toggle-personal-feed">
                <span class="toggle-knob"></span>
            </label>
        </div>

        <div class="preview-actions">
            <button class="btn-confirm" id="btn-confirm" onclick="confirmStory()">✓ CONFERMA E CERTIFICA</button>
            <button class="btn-modify" onclick="goBack()">Voglio cambiare qualcosa</button>
        </div>
    </div>
</div>

<!-- SCREEN 3: DONE -->
<div class="screen hidden" id="screen-done">
    <div class="done-orb">✦</div>
    <div class="done-title">Azione<br><strong>certificata.</strong></div>
    <p class="done-sub">È nell&rsquo;hub del team. I partner la riceveranno per validarla.</p>
    <p class="done-sub" id="done-credits" style="display:none;margin-top:-6px"></p>
    <div class="done-score-pill">
        <span class="done-score-num" id="done-score">+7</span>
        <span class="done-score-lbl">DNA Score</span>
    </div>
    <button class="btn-new-story" id="btn-share-story" style="display:none;background:#175F75;margin-top:10px" onclick="shareStory()">&#8679; Condividi questa azione</button>
    <button class="btn-new-story" onclick="resetAll()">+ Certifica un&rsquo;altra azione</button>
    <a href="hub.html" style="display:block;margin-top:14px;font-family:'Montserrat';font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;" onmouseover="this.style.color='var(--blue)'" onmouseout="this.style.color='var(--muted)'">→ Torna all&rsquo;Hub</a>
</div>

<!-- TEAM SHEET -->
<div class="overlay hidden" id="team-overlay" onclick="closeTeamSheet(event)">
    <div class="sheet">
        <div class="sheet-handle"></div>
        <div class="sheet-title">Scegli il team</div>
        <div id="team-options-list"></div>
    </div>
</div>

<div class="toast" id="toast"></div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
const SUPABASE_URL = 'https://otllbwtdbfubmeaewyze.supabase.co';
const SUPABASE_KEY = 'sb_publishable_hgD8skYCfzIe0CiUu0hIKg_7kCc7nBZ';
const db = supabase.createClient(SUPABASE_URL, SUPABASE_KEY, {
    auth: { persistSession: true, autoRefreshToken: true, storage: window.localStorage }
});
window.db = db;

let currentUser = null, allTeams = [], currentTeam = null;
let dnaItems = { v:[], s:[], m:[] }, selected = { v:[], s:[], m:[] };
let mediaRecorder = null, isRecording = false, algoRating = null, recognition = null;
let storyType = 'team';

function setStoryType(type) {
    storyType = type;
    document.getElementById('pill-team').className = 'type-pill' + (type === 'team' ? ' active-team' : '');
    document.getElementById('pill-personal').className = 'type-pill' + (type === 'personal' ? ' active-personal' : '');
    var sub = document.getElementById('story-type-sub');
    if (type === 'personal') {
        sub.textContent = 'Conta nel tuo Personal Score individuale';
    } else {
        sub.textContent = 'Conta nel DNA Score del team';
    }
}

async function init() {
    let session = null;
    try { const {data} = await db.auth.getSession(); session = data?.session; } catch(e){}
    if (!session) {
        const t = localStorage.getItem('trsp_access_token');
        const r = localStorage.getItem('trsp_refresh_token');
        if (t && r) { try { const {data} = await db.auth.setSession({access_token:t,refresh_token:r}); session = data?.session; } catch(e){} }
    }
    if (!session) { window.location.href = 'login.html'; return; }
    currentUser = session.user;
    aiLoadStatus(); // v17: in parallelo, non blocca il caricamento
    await loadTeams();
    applyPrefill(); // v19
}

// v19: la storia scritta nella home arriva qui intera, sullo stesso team
function applyPrefill() {
    try {
        var raw = localStorage.getItem('trsp_tell_prefill');
        if (!raw) return;
        localStorage.removeItem('trsp_tell_prefill');
        var p = JSON.parse(raw);
        if (!p || !p.text || Date.now() - (p.at || 0) > 3600000) return;
        if (currentTeam && p.team && currentTeam.id !== p.team) return;
        var ta = document.getElementById('story-textarea');
        if (!ta) return;
        ta.value = p.text;
        if (typeof onTextInput === 'function') onTextInput();
        if (new URLSearchParams(location.search).get('ai') === '1') showToast('La tua storia \u00e8 qui: tocca \u2726 Racconta con AI');
    } catch(e) { console.warn('prefill skip:', e); }
}

async function loadTeams() {
    const teams = [];
    try {
        const {data} = await db.from('teams').select('id,name,status').eq('founder_id', currentUser.id).order('name');
        if (data) teams.push(...data);
    } catch(e){}
    try {
        const {data:pd} = await db.from('partners').select('team_id').eq('user_id', currentUser.id).in('status',['active','accepted']);
        if (pd && pd.length > 0) {
            const ids = pd.map(p => p.team_id);
            const {data:td} = await db.from('teams').select('id,name,status').in('id', ids).order('name');
            if (td) td.forEach(t => { if (!teams.find(x => x.id === t.id)) teams.push(t); });
        }
    } catch(e){}

    if (!teams.length) { showToast('Nessun team trovato. Fondane uno prima.'); return; }
    allTeams = teams.sort((a,b) => (a.name || '').localeCompare(b.name || ''));

    // Popola username nella schermata selezione
    const uname = currentUser.user_metadata?.full_name || currentUser.email || '—';
    document.getElementById('select-username').textContent = uname;
    document.getElementById('identity-who').textContent = uname;

    // Se arriva ?team=ID dall'hub, salta la selezione
    const preselectedId = new URLSearchParams(location.search).get('team');
    const preselected = preselectedId ? teams.find(t => t.id === preselectedId) : null;

    if (preselected) {
        await selectTeam(preselected);
        showScreen('screen-input');
    } else if (teams.length === 1) {
        await selectTeam(teams[0]);
        showScreen('screen-input');
    } else {
        openTeamSelect();
    }
}

function renderTeamCards() {
    const list = document.getElementById('team-cards-list');
    if (!list) return;
    if (!allTeams.length) {
        list.innerHTML = '<div style="font-size:13px;color:#aaa;font-style:italic;padding:20px 0">Nessun team disponibile. Fondane uno prima.</div>';
        return;
    }
    list.innerHTML = allTeams.map(t => `
        <div class="team-card" onclick="pickTeamAndGo('${t.id}')">
            <div class="team-card-dot"></div>
            <div>
                <div class="team-card-name" translate="no">${t.name}</div>
                <div class="team-card-status">${t.status || 'active'}</div>
            </div>
            <div class="team-card-arrow">›</div>
        </div>`).join('');
}

// Mostra la schermata di selezione team SEMPRE renderizzando prima le card.
// (Il bug era: "Cambia team" apriva screen-team senza popolare la lista.)
function openTeamSelect() {
    renderTeamCards();
    showScreen('screen-team');
}

async function pickTeamAndGo(id) {
    const team = allTeams.find(t => t.id === id);
    if (team) {
        await selectTeam(team);
        showScreen('screen-input');
    }
}

async function selectTeam(team) {
    currentTeam = team;
    document.getElementById('identity-team').textContent = team.name;
    await loadDNA(team.id);
    creditsReset(); // v20
}

const VSM_BLOB = {
    m:'M99.8 47.7 C99.6 56.3 96.5 63.7 92.1 71.3 C87.8 78.9 83.1 85.5 75.8 90.1 C68.5 94.6 59.7 97.2 51.4 96.3 C43.1 95.5 36.5 90.1 29.7 85.3 C22.8 80.5 18.6 76.4 13.4 69.6 C8.3 62.9 2.1 56.2 1.0 47.7 C-0.0 39.2 2.7 29.8 7.5 22.4 C12.3 15.0 19.8 10.3 27.7 6.8 C35.6 3.3 43.1 2.7 51.4 3.1 C59.6 3.5 66.1 5.4 73.7 9.1 C81.2 12.7 88.7 16.5 93.4 23.5 C98.1 30.4 100.0 39.1 99.8 47.7Z',
    s:'M99.0 47.7 C97.9 56.2 91.7 62.9 86.6 69.6 C81.4 76.4 77.2 80.5 70.3 85.3 C63.5 90.1 56.9 95.5 48.7 96.3 C40.4 97.2 31.6 94.5 24.3 90.0 C16.9 85.5 12.2 78.9 7.9 71.3 C3.5 63.7 0.4 56.3 0.2 47.7 C-0.0 39.1 1.9 30.4 6.6 23.5 C11.3 16.5 18.8 12.7 26.3 9.1 C33.9 5.4 40.4 3.5 48.7 3.1 C56.9 2.7 64.4 3.3 72.3 6.8 C80.2 10.3 87.7 15.0 92.5 22.4 C97.3 29.8 100.0 39.2 99.0 47.7Z',
    v:'M99.5 51.1 C100.1 60.1 98.6 70.2 93.4 77.2 C88.2 84.2 78.8 86.9 70.6 90.1 C62.5 93.3 56.6 94.5 48.1 95.1 C39.7 95.7 31.5 96.9 23.6 93.5 C15.8 90.1 8.9 83.8 4.6 76.2 C0.4 68.5 -0.1 60.0 0.0 51.1 C0.1 42.1 1.2 34.2 5.4 26.4 C9.5 18.6 15.5 11.8 23.2 7.9 C30.9 4.1 39.6 4.4 48.1 5.1 C56.7 5.8 63.3 7.9 70.7 11.9 C78.2 15.8 84.6 20.0 89.7 27.1 C94.9 34.1 98.8 42.1 99.5 51.1Z'
};
const VSM_COLOR = { m:'#B54D8D', s:'#E6CF42', v:'#8FC55B' };
const VSM_ORDER = ['m','s','v'];

let modItems = { v:[], s:[], m:[] };   // VSM che arrivano dai moduli, tenuti separati
let modList  = [];                     // { id, name, color }
let modOpen  = {};
let showAllM = false;
let noneSel  = { v:false, s:false, m:false };
let usedRank = {};                     // item_id -> quanto e' recente (0 = ultima storia)
let coocc    = {};                     // item_id -> { item_id: quante volte insieme }

function blobSvg(cat, size) {
    return '<svg viewBox="0 0 100 100" aria-hidden="true"><path d="'+VSM_BLOB[cat]+'" fill="'+VSM_COLOR[cat]+'"/></svg>';
}

async function loadDNA(teamId) {
    try {
        const {data} = await db.from('dna_items').select('id,item_type,name,active,module_id').eq('team_id', teamId).order('display_order');
        dnaItems = { v:[], s:[], m:[] };
        modItems = { v:[], s:[], m:[] };
        const modIds = [];
        if (data) data.filter(i => i.active !== false).forEach(i => {
            let cat = null;
            if (i.item_type==='value')   cat = 'v';
            if (i.item_type==='service') cat = 's';
            if (i.item_type==='role')    cat = 'm';
            if (!cat) return;
            if (i.module_id) {
                modItems[cat].push(i);
                if (modIds.indexOf(i.module_id) === -1) modIds.push(i.module_id);
            } else {
                dnaItems[cat].push(i);
            }
        });
        await loadModuleNames(modIds);
        await loadHistory(teamId);
        renderVSM();
        renderPacks();
    } catch(e) { showToast('Errore caricamento DNA'); }
}

// Nomi e colori dei moduli attivi. Se la lettura non riesce, i pacchetti restano
// fuori dalla pagina invece di comparire senza nome.
async function loadModuleNames(ids) {
    modList = [];
    if (!ids.length) return;
    try {
        const {data} = await db.from('modules').select('id,name,icon_color').in('id', ids);
        if (data) modList = data.map(m => ({ id:m.id, name:m.name, color:m.icon_color || 'var(--purple)' }));
    } catch(e) { modList = []; }
}

// Le storie precedenti dell'autore in questo team danno due segnali, entrambi
// suoi: quali mansioni usa davvero (e quanto di recente) e quali servizi/valori
// ha gia' certificato insieme a quelli. Servono solo a ordinare: nessun item
// viene preselezionato o nascosto.
async function loadHistory(teamId) {
    usedRank = {}; coocc = {};
    try {
        const {data} = await db.from('stories')
            .select('item_tags,created_at')
            .eq('team_id', teamId).eq('author_id', currentUser.id)
            .order('created_at', {ascending:false}).limit(40);
        if (!data) return;
        data.forEach((row, idx) => {
            const tags = row.item_tags || [];
            tags.forEach(a => {
                if (usedRank[a] === undefined) usedRank[a] = idx;
                if (!coocc[a]) coocc[a] = {};
                tags.forEach(b => { if (a !== b) coocc[a][b] = (coocc[a][b] || 0) + 1; });
            });
        });
    } catch(e) { usedRank = {}; coocc = {}; }
}

function affinityScore(itemId, sourceIds) {
    let n = 0;
    sourceIds.forEach(src => { if (coocc[src] && coocc[src][itemId]) n += coocc[src][itemId]; });
    return n;
}

// Mansioni: prima quelle gia' usate, dalla piu' recente; il resto sotto "Altre N".
function listMansioni() {
    const used = dnaItems.m.filter(i => usedRank[i.id] !== undefined)
                           .sort((a,b) => usedRank[a.id] - usedRank[b.id]);
    const rest = dnaItems.m.filter(i => usedRank[i.id] === undefined);
    if (!used.length) return { primary: dnaItems.m, secondary: [] };
    return { primary: used, secondary: rest };
}

// Servizi ordinati sulle mansioni scelte, valori sui servizi scelti.
function listOrdered(cat) {
    const src = (cat === 's') ? selected.m : selected.s;
    const pool = dnaItems[cat].slice();
    if (!src.length) return pool;
    return pool.sort((a,b) => {
        const d = affinityScore(b.id, src) - affinityScore(a.id, src);
        if (d !== 0) return d;
        return dnaItems[cat].indexOf(a) - dnaItems[cat].indexOf(b);
    });
}

function chipEl(item, cat, isMod) {
    const c = document.createElement('div');
    c.className = 'chip chip-'+cat + (isMod ? ' chip-mod' : '') + (selected[cat].indexOf(item.id) !== -1 ? ' selected' : '');
    c.textContent = item.name;
    c.setAttribute('translate', 'no');
    c.dataset.id = item.id;
    c.onclick = () => toggleChip(cat, item.id);
    return c;
}

function fillChips(cat, items, isMod) {
    const wrap = document.getElementById('chips-'+cat);
    wrap.innerHTML = '';
    const none = document.createElement('div');
    none.className = 'chip none-chip chip-'+cat + (noneSel[cat] ? ' selected' : '');
    none.textContent = 'Nessuno';
    none.onclick = () => selectNone(cat);
    wrap.appendChild(none);
    items.forEach(it => wrap.appendChild(chipEl(it, cat, isMod)));
}

function renderVSM() {
    VSM_ORDER.forEach(cat => {
        const seed = document.getElementById('seed-'+cat);
        if (seed) seed.innerHTML = blobSvg(cat);
    });

    const man = listMansioni();
    fillChips('m', showAllM ? man.primary.concat(man.secondary) : man.primary, false);
    const moreBtn = document.getElementById('more-m');
    if (man.secondary.length) {
        moreBtn.style.display = 'block';
        moreBtn.textContent = showAllM ? 'Mostra meno' : 'Altre ' + man.secondary.length;
    } else {
        moreBtn.style.display = 'none';
    }

    fillChips('s', listOrdered('s'), false);
    fillChips('v', listOrdered('v'), false);

    updateCounters();
}

function toggleMore() { showAllM = !showAllM; renderVSM(); }

function renderPacks() {
    const area = document.getElementById('packs-area');
    const list = document.getElementById('packs-list');
    if (!modList.length) { area.style.display = 'none'; list.innerHTML = ''; return; }
    area.style.display = 'flex';
    list.innerHTML = '';

    modList.forEach(md => {
        const ids = packItemIds(md.id);
        const n = ids.filter(id => isSelectedId(id)).length;
        const state = n === 0 ? '' : (n === ids.length ? ' on' : ' part');

        const card = document.createElement('div');
        card.className = 'pack';

        const top = document.createElement('div');
        top.className = 'pack-top';
        const nm = document.createElement('div');
        nm.className = 'pack-name'; nm.textContent = md.name; nm.setAttribute('translate', 'no');
        const sw = document.createElement('div');
        sw.className = 'pack-sw' + state;
        sw.onclick = () => togglePack(md.id);
        top.appendChild(nm); top.appendChild(sw);
        card.appendChild(top);

        const more = document.createElement('button');
        more.className = 'pack-more';
        more.textContent = modOpen[md.id] ? 'Chiudi' : 'Scegli i singoli';
        more.onclick = () => { modOpen[md.id] = !modOpen[md.id]; renderPacks(); };
        card.appendChild(more);

        const body = document.createElement('div');
        body.className = 'pack-body' + (modOpen[md.id] ? ' open' : '');
        VSM_ORDER.forEach(cat => {
            const items = modItems[cat].filter(i => i.module_id === md.id);
            if (!items.length) return;
            const g = document.createElement('div');
            g.className = 'pack-group';
            const h = document.createElement('h4');
            h.textContent = cat === 'm' ? 'Mansioni' : (cat === 's' ? 'Servizi' : 'Valori');
            const w = document.createElement('div');
            w.className = 'chips-wrap';
            items.forEach(it => w.appendChild(chipEl(it, cat, true)));
            g.appendChild(h); g.appendChild(w);
            body.appendChild(g);
        });
        card.appendChild(body);
        list.appendChild(card);
    });
}

function packItemIds(moduleId) {
    let ids = [];
    VSM_ORDER.forEach(cat => {
        modItems[cat].filter(i => i.module_id === moduleId).forEach(i => ids.push(i.id));
    });
    return ids;
}
function isSelectedId(id) {
    return selected.v.indexOf(id) !== -1 || selected.s.indexOf(id) !== -1 || selected.m.indexOf(id) !== -1;
}
function catOfId(id) {
    let cat = null;
    VSM_ORDER.forEach(c => {
        if (modItems[c].some(i => i.id === id) || dnaItems[c].some(i => i.id === id)) cat = c;
    });
    return cat;
}
function togglePack(moduleId) {
    const ids = packItemIds(moduleId);
    const allOn = ids.every(id => isSelectedId(id));
    ids.forEach(id => {
        const cat = catOfId(id);
        if (!cat) return;
        const idx = selected[cat].indexOf(id);
        if (allOn) { if (idx !== -1) selected[cat].splice(idx,1); }
        else if (idx === -1) { selected[cat].push(id); }
    });
    renderPacks(); updateCounters();
}

function toggleChip(cat, id) {
    noneSel[cat] = false;
    const idx = selected[cat].indexOf(id);
    if (idx === -1) selected[cat].push(id); else selected[cat].splice(idx,1);
    // La scelta delle mansioni riordina i servizi, quella dei servizi riordina i valori.
    if (cat === 'm') { fillChips('s', listOrdered('s'), false); fillChips('v', listOrdered('v'), false); }
    if (cat === 's') { fillChips('v', listOrdered('v'), false); }
    fillChips(cat, cat === 'm'
        ? (showAllM ? listMansioni().primary.concat(listMansioni().secondary) : listMansioni().primary)
        : listOrdered(cat), false);
    if (modItems[cat].some(i => i.id === id)) renderPacks();
    updateCounters();
}

function selectNone(cat) {
    // Azzera solo i VSM di base di questa categoria: quelli dei pacchetti si tolgono dal pacchetto.
    const modIdsHere = modItems[cat].map(i => i.id);
    selected[cat] = selected[cat].filter(id => modIdsHere.indexOf(id) !== -1);
    noneSel[cat] = true;
    renderVSM();
}

function updateCounters() {
    const box = document.getElementById('vsm-blobs');
    if (!box) return;
    box.innerHTML = '';
    VSM_ORDER.forEach(cat => {
        const modIdsHere = modItems[cat].map(i => i.id);
        const n = selected[cat].filter(id => modIdsHere.indexOf(id) === -1).length;
        const b = document.createElement('button');
        b.className = 'vsm-blob';
        b.innerHTML = '<span class="vsm-blobwrap">'+blobSvg(cat)+'<span class="vsm-num">'+n+'</span></span>' +
                      '<span class="vsm-cap">'+(cat==='m'?'Mansioni':(cat==='s'?'Servizi':'Valori'))+'</span>';
        b.onclick = () => {
            const el = document.getElementById('chips-'+cat);
            if (el) el.scrollIntoView({behavior:'smooth', block:'center'});
        };
        box.appendChild(b);
    });
}

function onTextInput() {
    const val = document.getElementById('story-textarea').value;
    document.getElementById('char-count').textContent = val.length+' / 1200';
    document.getElementById('btn-send').disabled = val.trim().length < 10;
}
function setMicUI(on) {
    var btn = document.getElementById('btn-mic');
    var lbl = document.getElementById('mic-label');
    btn.classList.toggle('recording', on);
    lbl.textContent = on ? 'Ascolto&hellip; tocca per fermare' : 'Racconta a voce';
}
function toggleVoice() {
    if (isRecording) { try { recognition && recognition.stop(); } catch(e){} return; }
    var SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) { showToast('La dettatura vocale non e supportata su questo browser. Scrivi pure a mano.'); return; }

    var ta = document.getElementById('story-textarea');
    var baseText = ta.value ? ta.value.trim() + ' ' : '';

    recognition = new SR();
    recognition.lang = window.TRSP_LOCALE || 'it-IT';
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = function(ev) {
        var spoken = '';
        for (var i = 0; i < ev.results.length; i++) { spoken += ev.results[i][0].transcript; }
        ta.value = (baseText + spoken).slice(0, 1200);
        onTextInput();
    };
    recognition.onerror = function(ev) {
        isRecording = false; setMicUI(false);
        if (ev.error === 'not-allowed' || ev.error === 'service-not-allowed') showToast('Permesso microfono negato');
        else if (ev.error !== 'aborted' && ev.error !== 'no-speech') showToast('Microfono: ' + ev.error);
    };
    recognition.onend = function() { isRecording = false; setMicUI(false); };

    try {
        recognition.start();
        isRecording = true; setMicUI(true);
    } catch(e) {
        isRecording = false; setMicUI(false);
        showToast('Impossibile avviare il microfono');
    }
}

async function sendStory() {
    const btn = document.getElementById('btn-send');
    if (btn.disabled) return; // v12: guard anti doppio click / stato residuo
    btn.disabled=true; btn.innerHTML='<span class="spinner"></span>';

    const storyText = document.getElementById('story-textarea').value.trim();
    const names = { v:getNames('v'), s:getNames('s'), m:getNames('m') };

    document.getElementById('prev-story-text').textContent = storyText;
    renderPreviewTags(names);
    aiRenderDisclosure(); // v17

    algoRating = null;
    try {
        await runAnalysis(storyText, names);
    } finally {
        // v12: il ripristino avviene SEMPRE, anche su errore imprevisto
        btn.disabled=false; btn.textContent='CERTIFICA \u2192';
    }

    showScreen('screen-preview');
}

// v15 — L'analisi e' estratta qui perche' possa essere ritentata senza riscrivere la storia.
// Fino alla v14 un fallimento era definitivo e silenzioso: la storia veniva pubblicata con
// algo_rating null, quindi senza voce interna, e nessuno lo diceva. 22 storie su 32 sono
// finite cosi'. Il messaggio invitava a "dare il voto manuale", ma lo slider e' il peso
// dichiarato e non entra nel punteggio: il rimedio promesso non esisteva.
async function runAnalysis(storyText, names, authorRating) {
    try {
        // v13: db.functions.invoke() manda il JWT della sessione utente al posto della
        // publishable key. Funziona sia con verify_jwt spento sia acceso: e' il passo che
        // permette di chiudere analyze-story senza rompere la certificazione.
        //
        // v16: teamId + itemIds sono il carburante dell'arco narrativo. Con questi la
        // function chiama thread_for_tags in SQL (zero token) e recupera le puntate
        // precedenti dello stesso filone, riconosciute per combinazione VSM pesata per
        // rarita' e tipo. Senza, ogni storia veniva letta come se fosse la prima riga
        // mai scritta dal team: "il problema resta aperto, team al lavoro" prendeva 4
        // anche quando era la notizia di tre settimane di tentativi.
        const body = {
            teamName: currentTeam?.name,
            storyText: storyText,
            valuesNames: names.v,
            servicesNames: names.s,
            rolesNames: names.m,
            teamId: currentTeam ? currentTeam.id : null,
            itemIds: [...selected.v, ...selected.s, ...selected.m]
        };
        // La dichiarazione dell'autore si manda solo se l'autore l'ha davvero espressa
        // chiedendo la rilettura: un valore di default sarebbe una dichiarazione finta.
        if (typeof authorRating === 'number') body.authorRating = authorRating;

        const inv = await Promise.race([
            db.functions.invoke('analyze-story', { body: body }),
            new Promise((_,rej) => setTimeout(()=>rej(new Error('timeout')), 20000))
        ]);
        if (inv.error) throw inv.error;
        const parsed = inv.data;
        if (!parsed) throw new Error('nessuna risposta da analyze-story');
        if (parsed.error) throw new Error(parsed.error);

        algoRating = parsed.ratingAlgo || 7;
        if (parsed.summary) document.getElementById('prev-story-text').textContent = parsed.summary;
        renderPreviewBars(parsed);
        renderExplain(parsed);
        document.getElementById('prev-algo-num').innerHTML = algoRating+'<span>/10</span>';
        document.getElementById('ai-note').style.display = 'none';
        // v11: lo slider e' il PESO dichiarato, non un voto di qualita': niente preset dall'algoritmo
        document.getElementById('preview-label').textContent = 'Come la vediamo noi';
        if (typeof authorRating === 'number') renderVerdict(parsed);
        onSlider();
        return true;

    } catch(e) {
        console.warn('analyze-story non riuscita:', e && e.message ? e.message : e);
        algoRating = null;
        document.getElementById('prev-algo-num').innerHTML = '\u2014<span>/10</span>';
        document.getElementById('prev-bars').innerHTML = '';
        document.getElementById('ai-explain').style.display = 'none';
        document.getElementById('ai-gap').style.display = 'none';
        document.getElementById('ai-note').style.display = 'block';
        document.getElementById('preview-label').textContent = 'La tua azione';
        return false;
    }
}

// v16 — fine dei voti muti. Un 4 senza spiegazione e' solo una punizione;
// con le ragioni e le mancanze diventa il momento in cui il prodotto insegna.
function renderExplain(p) {
    var box = document.getElementById('ai-explain');
    var esc = function(s){ var d=document.createElement('div'); d.textContent=s; return d.innerHTML; };
    var ok = false;

    var out = document.getElementById('ai-outcome');
    var etichette = { conclusa:'Azione conclusa', in_corso:'In corso', problema_rilevato:'Problema rilevato' };
    if (p.outcome && etichette[p.outcome]) {
        out.textContent = etichette[p.outcome];
        out.className = 'ai-outcome ' + p.outcome;
        out.style.display = 'inline-block'; ok = true;
    } else { out.style.display = 'none'; }

    var rw = document.getElementById('ai-reasons-wrap');
    if (Array.isArray(p.reasons) && p.reasons.length) {
        document.getElementById('ai-reasons').innerHTML = p.reasons.slice(0,3).map(function(r){ return '<li>'+esc(String(r))+'</li>'; }).join('');
        rw.style.display = 'block'; ok = true;
    } else { rw.style.display = 'none'; }

    var mw = document.getElementById('ai-missing-wrap');
    if (Array.isArray(p.missing) && p.missing.length) {
        document.getElementById('ai-missing').innerHTML = p.missing.slice(0,3).map(function(m){ return '<li>'+esc(String(m))+'</li>'; }).join('');
        mw.style.display = 'block'; ok = true;
    } else { mw.style.display = 'none'; }

    box.style.display = ok ? 'block' : 'none';
}

// v16 — l'esito della riconciliazione fra la dichiarazione dell'autore e il giudizio
function renderVerdict(p) {
    var v = document.getElementById('ai-verdict');
    var testi = {
        contesto_mancante: 'Mi mancava del contesto: ho riletto la storia dentro il suo filone e rivisto il giudizio.',
        sovrastima: 'Ho riletto e resto della mia idea. Non vuol dire che l\u2019azione valga poco: vuol dire che il racconto non ne porta ancora la prova.',
        allineato: 'Il tuo giudizio e il mio coincidono.'
    };
    if (p.authorGap && testi[p.authorGap]) {
        v.textContent = testi[p.authorGap];
        v.style.display = 'block';
    } else { v.style.display = 'none'; }
}

// v16 — la rilettura si chiede, non si subisce: e' l'autore a decidere di far
// riconciliare la propria dichiarazione con il giudizio dell'algoritmo.
async function reanalyzeWithMyRating() {
    var b = document.getElementById('ai-gap-btn');
    if (!b || b.disabled) return;
    var testo = b.textContent;
    b.disabled = true; b.textContent = 'Rileggo\u2026';
    try {
        var storyText = document.getElementById('story-textarea').value.trim();
        var names = { v:getNames('v'), s:getNames('s'), m:getNames('m') };
        var mio = parseInt(document.getElementById('rating-slider').value);
        await runAnalysis(storyText, names, mio);
    } catch(e) {
        console.warn('rilettura non riuscita:', e);
    } finally {
        b.disabled = false; b.textContent = testo;
    }
}

// Ritenta l'analisi dalla schermata di anteprima, senza perdere testo ne' selezioni
async function retryAnalysis() {
    const rb = document.getElementById('ai-retry');
    if (!rb || rb.disabled) return;
    const testoOriginale = rb.textContent;
    rb.disabled = true;
    rb.textContent = 'Riprovo\u2026';
    try {
        const storyText = document.getElementById('story-textarea').value.trim();
        const names = { v:getNames('v'), s:getNames('s'), m:getNames('m') };
        const ok = await runAnalysis(storyText, names);
        if (!ok) {
            rb.disabled = false;
            rb.textContent = testoOriginale;
        }
    } catch(e) {
        rb.disabled = false;
        rb.textContent = testoOriginale;
    }
}

function getNames(cat) {
    return selected[cat].map(id => {
        const i = dnaItems[cat].find(x=>x.id===id) || modItems[cat].find(x=>x.id===id);
        return i ? i.name : '';
    }).filter(Boolean);
}
function renderPreviewTags(names) {
    const wrap = document.getElementById('prev-tags');
    wrap.innerHTML = '';
    names.v.forEach(n => wrap.innerHTML += '<span class="story-tag story-tag-v" translate="no">◎ '+n+'</span>');
    names.s.forEach(n => wrap.innerHTML += '<span class="story-tag story-tag-s" translate="no">◈ '+n+'</span>');
    names.m.forEach(n => wrap.innerHTML += '<span class="story-tag story-tag-m" translate="no">▸ '+n+'</span>');
}
function renderPreviewBars(p) {
    const bars=[{lbl:'Valori',val:p.ratingValues||algoRating,c:'var(--green)'},{lbl:'Servizi',val:p.ratingServices||algoRating,c:'var(--yellow)'},{lbl:'Mansioni',val:p.ratingRoles||algoRating,c:'var(--purple)'}];
    document.getElementById('prev-bars').innerHTML = bars.map(b=>'<div class="rbar-row"><div class="rbar-lbl">'+b.lbl+'</div><div class="rbar-track"><div class="rbar-fill" style="width:'+(b.val*10)+'%;background:'+b.c+'"></div></div><div class="rbar-val" style="color:'+b.c+'">'+b.val+'</div></div>').join('');
}
function onSlider() {
    const v = parseInt(document.getElementById('rating-slider').value);
    document.getElementById('slider-val').textContent = v+' / 10';

    // v16: lo scarto fra la dichiarazione e il giudizio non e' un errore da correggere,
    // e' informazione. Se e' ampio, l'autore puo' chiedere all'algoritmo di rileggere
    // tenendone conto. Il voto resta fuori dalla media: entra nel prompt, non nel calcolo.
    var box = document.getElementById('ai-gap');
    if (!box) return;
    if (algoRating === null || algoRating === undefined || Math.abs(v - algoRating) < 3) {
        box.style.display = 'none';
        return;
    }
    var su = v > algoRating;
    document.getElementById('ai-gap-text').innerHTML =
        'Tu le dai <b>'+v+'</b>, l\u2019algoritmo <b>'+algoRating+'</b>. ' +
        (su ? 'Puo\u2019 darsi che gli manchi il contesto che tu hai: chiedigli di rileggere sapendo quanto conta per te.'
            : 'Sei piu\u2019 severo di lui: puoi fargli rileggere la storia alla luce del tuo giudizio.');
    document.getElementById('ai-verdict').style.display = 'none';
    box.style.display = 'block';
}


// ── v20: ATTRIBUISCI IL MERITO ──
// credits: [{kind:'member',user_id,name} | {kind:'external',name,email?} | {kind:'team',team_id,name}]
// L'email resta solo qui, in memoria: al database va tutto tranne l'email.
var creditState = { list: [], members: [], teamId: null, timer: null, teamHits: [] };
var CREDIT_MAX = 20, CREDIT_INVITE_MAX = 5;

function creditEsc(s) { return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function creditKey(c) { return c.kind + '|' + (c.user_id || c.team_id || String(c.name).toLowerCase()); }

async function creditsReset() {
    creditState.list = [];
    creditState.teamHits = [];
    var inp = document.getElementById('credit-input');
    if (inp) inp.value = '';
    creditRender();
    creditHideSugg();
    var dc = document.getElementById('done-credits');
    if (dc) { dc.style.display = 'none'; dc.textContent = ''; }
    if (!currentTeam) return;
    if (creditState.teamId === currentTeam.id && creditState.members.length) return;
    creditState.teamId = currentTeam.id;
    creditState.members = [];
    try {
        var r = await db.rpc('credit_candidates', { p_team_id: currentTeam.id, p_q: '' });
        if (!r.error && r.data && r.data.ok) creditState.members = r.data.members || [];
    } catch (e) { console.warn('credit candidates skip:', e); }
}

function creditHideSugg() { var s = document.getElementById('credit-sugg'); if (s) { s.style.display = 'none'; s.innerHTML = ''; } }

function creditSearch() {
    var q = (document.getElementById('credit-input').value || '').trim();
    clearTimeout(creditState.timer);
    creditDrawSugg(q);
    if (q.length >= 2 && currentTeam) {
        creditState.timer = setTimeout(async function () {
            try {
                var r = await db.rpc('credit_candidates', { p_team_id: currentTeam.id, p_q: q });
                creditState.teamHits = (!r.error && r.data && r.data.ok) ? (r.data.teams || []) : [];
            } catch (e) { creditState.teamHits = []; }
            if ((document.getElementById('credit-input').value || '').trim() === q) creditDrawSugg(q);
        }, 300);
    } else {
        creditState.teamHits = [];
    }
}

function creditDrawSugg(q) {
    var box = document.getElementById('credit-sugg');
    var ql = q.toLowerCase();
    var taken = {};
    creditState.list.forEach(function (c) { taken[creditKey(c)] = true; });
    var html = '';
    var mem = creditState.members.filter(function (m) {
        return !taken['member|' + m.user_id] && (!ql || String(m.name).toLowerCase().indexOf(ql) > -1);
    }).slice(0, 6);
    mem.forEach(function (m) {
        html += '<button type="button" data-kind="member" data-id="' + creditEsc(m.user_id) + '" data-name="' + creditEsc(m.name) + '">' +
            '<span translate="no">' + creditEsc(m.name) + '</span><small>membro del team</small></button>';
    });
    if (ql.length >= 2) {
        creditState.teamHits.filter(function (t) { return !taken['team|' + t.team_id]; }).forEach(function (t) {
            html += '<button type="button" data-kind="team" data-id="' + creditEsc(t.team_id) + '" data-name="' + creditEsc(t.name) + '">' +
                '<span translate="no">' + creditEsc(t.name) + '</span><small>team</small></button>';
        });
        var exact = mem.some(function (m) { return String(m.name).toLowerCase() === ql; });
        if (!exact && !taken['external|' + ql]) {
            html += '<button type="button" data-kind="external" data-name="' + creditEsc(q) + '">+ Aggiungi “' + creditEsc(q) + '”<small>persona esterna</small></button>';
        }
    }
    if (!html) { creditHideSugg(); return; }
    box.innerHTML = html;
    box.style.display = 'block';
    Array.prototype.forEach.call(box.querySelectorAll('button'), function (b) {
        b.onclick = function () { creditAdd(b.dataset.kind, b.dataset.id, b.dataset.name); };
    });
}

function creditAdd(kind, id, name) {
    if (creditState.list.length >= CREDIT_MAX) { showToast('Puoi indicare al massimo ' + CREDIT_MAX + ' nomi.'); return; }
    name = String(name || '').trim().slice(0, 120);
    if (!name) return;
    var c = { kind: kind, name: name, pub: true };
    if (kind === 'member') c.user_id = id;
    if (kind === 'team') c.team_id = id;
    if (kind === 'external') c.email = '';
    if (creditState.list.some(function (x) { return creditKey(x) === creditKey(c); })) return;
    creditState.list.push(c);
    document.getElementById('credit-input').value = '';
    creditState.teamHits = [];
    creditHideSugg();
    creditRender();
}

function creditTogglePub(i) { if (creditState.list[i]) { creditState.list[i].pub = !creditState.list[i].pub; creditRender(); } }

function creditRemove(i) { creditState.list.splice(i, 1); creditRender(); }

function creditRender() {
    var chips = document.getElementById('credit-chips');
    var inv = document.getElementById('credit-invites');
    if (!chips || !inv) return;
    var lbl = { member: 'team', external: 'esterno', team: 'team intero' };
    chips.innerHTML = creditState.list.map(function (c, i) {
        return '<span class="credit-chip' + (c.pub ? '' : ' hidden-pub') + '"><span translate="no">' + creditEsc(c.name) + '</span> <small>' + lbl[c.kind] + '' + '</small>' +
            '<button type="button" class="vis" title="Tocca per cambiare" onclick="creditTogglePub(' + i + ')">' + (c.pub ? 'PUBBLICO' : 'NASCOSTO') + '</button>' +
            '<button type="button" aria-label="Togli" onclick="creditRemove(' + i + ')">\u00d7</button></span>';
    }).join('');
    var ext = creditState.list.map(function (c, i) { return { c: c, i: i }; }).filter(function (x) { return x.c.kind === 'external'; });
    inv.innerHTML = ext.map(function (x) {
        return '<div class="credit-invite-row">✉ Invita <b translate="no">' + creditEsc(x.c.name) + '</b>' +
            '<input type="email" placeholder="email (facoltativa)" value="' + creditEsc(x.c.email) + '" oninput="creditSetEmail(' + x.i + ', this.value)"></div>';
    }).join('');
}

function creditSetEmail(i, v) { if (creditState.list[i]) creditState.list[i].email = String(v || '').trim(); }

function creditsForInsert() {
    if (!creditState.list.length) return null;
    return creditState.list.map(function (c) {
        var pub = c.pub !== false;
        if (c.kind === 'member') return { kind: 'member', user_id: c.user_id, name: c.name, public: pub };
        if (c.kind === 'team') return { kind: 'team', team_id: c.team_id, name: c.name, public: pub };
        return { kind: 'external', name: c.name, public: pub };
    });
}

async function sendCreditInvites(storyId) {
    var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    var todo = creditState.list.filter(function (c) { return c.kind === 'external' && re.test(c.email || ''); }).slice(0, CREDIT_INVITE_MAX);
    var names = creditState.list.map(function (c) { return c.name; });
    var dc = document.getElementById('done-credits');
    if (names.length && dc) {
        var hid = creditState.list.filter(function (c) { return c.pub === false; }).length;
        dc.textContent = 'Merito attribuito a: ' + names.join(', ') + '.';
        if (hid) dc.appendChild(document.createTextNode(' (' + (hid === 1 ? '1 nome visibile' : hid + ' nomi visibili') + ' solo al team)'));
        dc.style.display = 'block';
    }
    if (!todo.length) return;
    var ok = 0;
    for (var k = 0; k < todo.length; k++) {
        try {
            var r = await db.functions.invoke('credit-invite', { body: { story_id: storyId, name: todo[k].name, email: todo[k].email } });
            if (!r.error && r.data && r.data.ok) ok++;
        } catch (e) { console.warn('credit invite skip:', e); }
    }
    if (dc) dc.appendChild(document.createTextNode(' ' + (ok === todo.length
        ? (ok === 1 ? 'Invito inviato.' : ok + ' inviti inviati.')
        : 'Inviti inviati: ' + ok + ' su ' + todo.length + '.')));
}

document.addEventListener('click', function (e) {
    if (!e.target.closest('#credit-box')) creditHideSugg();
});

async function confirmStory() {
    const btn = document.getElementById('btn-confirm');
    if (btn.disabled) return; // v12: guard anti doppio click / stato residuo
    btn.disabled=true; btn.innerHTML='<span class="spinner"></span>';
    const storyText = document.getElementById('story-textarea').value.trim();
    const myRating  = parseInt(document.getElementById('rating-slider').value);
    const allTagIds = [...selected.v,...selected.s,...selected.m];
    // v11: final = algo puro. Il peso dichiarato non entra MAI nella media (va su story_author_ratings).
    const finalRating = algoRating;
    try {
        // Upload foto se presente (non blocca se fallisce)
        var imgUrl = null;
        try { imgUrl = await uploadStoryMedia(currentTeam.id); } catch(ue) { console.warn('upload skip:', ue); }

        // Inserisci storia
        var insertObj = {
            team_id: currentTeam.id, author_id: currentUser.id,
            content: storyText, status: 'published',
            story_type: storyType,
            publish_to: document.getElementById('toggle-public').checked ? 'public' : 'internal',
            item_tags: allTagIds, algo_rating: algoRating,
            final_rating: finalRating,
            // v15: se l'analisi non ha risposto la storia nasce senza voce interna.
            // Va detto nel dato, non nascosto: 'uncertified' la rende recuperabile.
            rating_status: (algoRating === null || algoRating === undefined) ? 'uncertified' : 'pending',
            // v20: merito sigillato con la storia (il database rilegge i nomi e scarta le email)
            credits: creditsForInsert()
        };
        if (imgUrl) { insertObj.image_url = imgUrl; insertObj.media_type = 'image'; }

        var result = await db.from('stories').insert(insertObj).select('id').single();
        if (result.error) throw result.error;

        var storyId = result.data ? result.data.id : null;

        // v11: peso dichiarato -> story_author_ratings (RLS: solo autore, una volta; visibile solo al team)
        // v16: un trigger sincronizza il valore anche su stories.author_rating, cosi' lo scarto
        // fra dichiarazione e verdetto e' interrogabile senza join.
        if (storyId && myRating) {
            var wRes = await db.from('story_author_ratings').insert({ story_id: storyId, rating: myRating }).select('story_id');
            if (wRes.error) console.warn('author weight skip:', wRes.error);
        }

        // v16: lo stato lo decide il database, non il client. Prima ogni storia nasceva
        // 'pending' e ci restava per sempre, perche' votes_needed era 0 e nessuna funzione
        // muoveva mai rating_status: in tutta la piattaforma non era mai stata certificata
        // una storia. Ora il quorum e' calcolato sui pari reali e lo stato si allinea subito.
        if (storyId) {
            try { await db.rpc('refresh_rating_status', { p_story_id: storyId }); }
            catch(re) { console.warn('refresh stato skip:', re); }
        }

        // v17: dicitura AI scritta dal sistema (l'utente non puo' scriverla ne' toglierla)
        if (storyId && aiState.sessionId) {
            try {
                var at = await db.rpc('ai_tell_attach_story', { p_session: aiState.sessionId, p_story: storyId });
                if (at.error) console.warn('ai attach skip:', at.error);
            } catch(ae) { console.warn('ai attach skip:', ae); }
        }

        // v20: inviti a chi ha ricevuto il merito (non blocca la conferma)
        if (storyId) sendCreditInvites(storyId);

        // Pubblica anche sul profilo personale se richiesto
        // v18: solo le storie pubbliche possono uscire dal team
        if (document.getElementById('toggle-public').checked && document.getElementById('toggle-personal-feed').checked) {
            var vsmsLabels = [
                ...getNames('v'),
                ...getNames('s'),
                ...getNames('m')
            ].map(function(l){ return { label: l }; });
            try {
                await db.from('feed_posts').insert({
                    author_id: currentUser.id,
                    post_type: 'ispirazione',
                    body: storyText,
                    vsm_refs: vsmsLabels,
                    team_id: currentTeam.id,
                    author_score_snapshot: finalRating
                });
            } catch(fe){ console.warn('feed_post skip:', fe); }
        }

        document.getElementById('done-score').textContent = finalRating !== null && finalRating !== undefined ? '+'+finalRating : '✓';
        window._lastStoryId = storyId;
        document.getElementById('btn-share-story').style.display = 'block';
        showScreen('screen-done');
    } catch(e) {
        console.error('confirmStory error:', e);
        showToast('Errore: '+(e.message||'riprova'));
    } finally {
        // v12: PRIMA il ripristino stava solo nel catch. Sul percorso di successo il
        // bottone restava disabled con lo spinner dentro: alla storia successiva il
        // click veniva ignorato e la rotella girava a vuoto per sempre.
        btn.disabled=false; btn.textContent='\u2713 CONFERMA E CERTIFICA';
    }
}

var pendingStoryFile = null;

function previewPhoto(input) {
    var file = input.files[0];
    if (!file) return;
    pendingStoryFile = file;
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('photo-preview-img').src = e.target.result;
        document.getElementById('photo-preview').style.display = 'block';
    };
    reader.readAsDataURL(file);
}

function removePhoto() {
    pendingStoryFile = null;
    document.getElementById('photo-preview').style.display = 'none';
    document.getElementById('story-photo-input').value = '';
}

async function uploadStoryMedia(teamId) {
    if (!pendingStoryFile) return null;
    try {
        var ext = pendingStoryFile.name.split('.').pop().toLowerCase();
        var path = teamId + '/' + Date.now() + '.' + ext;
        var { data, error } = await db.storage.from('story-media').upload(path, pendingStoryFile, { upsert: true });
        if (error) throw error;
        return db.storage.from('story-media').getPublicUrl(path).data.publicUrl;
    } catch(e) {
        console.warn('media upload error:', e);
        return null;
    }
}


function shareStory() {
    if (!window._lastStoryId) return;
    var url = 'https://www.traspality.com/story.html?id=' + window._lastStoryId;
    var teamName = currentTeam ? currentTeam.name : 'TRASPALITY';
    if (navigator.share) {
        navigator.share({ title: (window.t ? window.t(teamName + ' su TRASPALITY') : teamName + ' su TRASPALITY'), text: (window.t ? window.t('Un\'azione certificata. Do What You Say.') : 'Un\'azione certificata. Do What You Say.'), url: url });
    } else {
        navigator.clipboard.writeText(url).then(function(){
            var btn = document.getElementById('btn-share-story');
            if (btn) { btn.innerText = '\u2713 Link copiato!'; setTimeout(function(){ btn.innerText = '\u2679 Condividi questa azione'; }, 2500); }
        });
    }
}

function generateShareImage(teamName, storyText, scoreVal) {
    const SIZE = 1080;
    const canvas = document.createElement('canvas');
    canvas.width = SIZE; canvas.height = SIZE;
    const ctx = canvas.getContext('2d');

    // Sfondo bianco
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, SIZE, SIZE);

    // Bordo superiore colorato
    ctx.fillStyle = '#175F75';
    ctx.fillRect(0, 0, SIZE, 12);

    // TRASPALITY wordmark in alto
    ctx.fillStyle = '#175F75';
    ctx.font = '600 36px Montserrat, Arial, sans-serif';
    ctx.letterSpacing = '6px';
    ctx.fillText('TRASPALITY', 80, 90);

    ctx.font = '300 18px Montserrat, Arial, sans-serif';
    ctx.fillStyle = '#aaaaaa';
    ctx.letterSpacing = '3px';
    ctx.fillText('DO WHAT YOU SAY', 80, 124);

    // Separatore
    ctx.strokeStyle = '#e8e8e8';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(80, 148); ctx.lineTo(SIZE - 80, 148); ctx.stroke();

    // Nome team
    ctx.fillStyle = '#175F75';
    ctx.font = '700 52px Montserrat, Arial, sans-serif';
    ctx.letterSpacing = '0px';
    const maxW = SIZE - 160;
    let teamFontSize = 52;
    while (ctx.measureText(teamName).width > maxW && teamFontSize > 28) {
        teamFontSize -= 2;
        ctx.font = '700 ' + teamFontSize + 'px Montserrat, Arial, sans-serif';
    }
    ctx.fillText(teamName, 80, 220);

    // Testo storia — wrap manuale
    ctx.fillStyle = '#333333';
    ctx.font = '300 32px Montserrat, Arial, sans-serif';
    const words = storyText.split(' ');
    const lineH = 50; let line = ''; let y = 320;
    const maxLines = 8;
    let lineCount = 0;
    for (let i = 0; i < words.length; i++) {
        const test = line + (line ? ' ' : '') + words[i];
        if (ctx.measureText(test).width > maxW && line) {
            ctx.fillText(line, 80, y);
            line = words[i]; y += lineH; lineCount++;
            if (lineCount >= maxLines) { ctx.fillText(line + '…', 80, y); break; }
        } else { line = test; }
        if (i === words.length - 1 && lineCount < maxLines) ctx.fillText(line, 80, y);
    }

    // DNA Score pill
    if (scoreVal && parseFloat(scoreVal) > 0) {
        const s = parseFloat(scoreVal);
        const sc = s >= 8 ? '#8FC55B' : s >= 6 ? '#E6CF42' : '#B54D8D';
        ctx.fillStyle = sc;
        ctx.beginPath();
        ctx.roundRect(80, SIZE - 220, 160, 64, 32);
        ctx.fill();
        ctx.fillStyle = '#ffffff';
        ctx.font = '700 28px Montserrat, Arial, sans-serif';
        ctx.fillText('DNA ' + scoreVal, 110, SIZE - 178);
    }

    // Bollino SVG in basso a destra
    const img = new Image();
    const BADGE_SVG = `<svg width="100%" height="100%" viewBox="0 0 437 433" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-6985.75,-3682.56)">
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7804.82,4085.32L7797.18,4098.24C7793.02,4105.27 7795.23,4113.86 7803.32,4118.64L7813.21,4124.49C7815.5,4125.85 7817.58,4125.31 7818.94,4123.02L7837.02,4092.45C7838.37,4090.16 7837.84,4088.08 7835.55,4086.73L7825.66,4080.88C7817.57,4076.09 7808.98,4078.29 7804.82,4085.32ZM7811.11,4089.05C7813.29,4085.37 7817.89,4083.56 7822.47,4086.27L7827.86,4089.46C7829.01,4090.14 7829.27,4091.18 7828.6,4092.33L7814.77,4115.7C7814.09,4116.85 7813.05,4117.12 7811.91,4116.44L7806.51,4113.25C7801.93,4110.54 7801.3,4105.64 7803.48,4101.96L7811.11,4089.05Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7771.81,4055.52L7761.37,4066.3C7755.69,4072.17 7755.18,4081.72 7761.93,4088.26C7768.69,4094.8 7778.21,4093.97 7783.89,4088.1L7794.33,4077.31C7800.01,4071.45 7800.53,4061.9 7793.77,4055.36C7787.01,4048.82 7777.49,4049.65 7771.81,4055.52ZM7777.06,4060.6C7780.03,4057.53 7785.26,4056.51 7789.08,4060.2C7792.9,4063.9 7792.05,4069.16 7789.07,4072.23L7778.64,4083.01C7775.67,4086.08 7770.44,4087.11 7766.62,4083.41C7762.8,4079.71 7763.65,4074.46 7766.63,4071.39L7777.06,4060.6Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7738.78,3974.86L7704.93,3986.53C7703.68,3986.96 7703.2,3987.92 7703.64,3989.18L7704.51,3991.7C7704.94,3992.95 7705.9,3993.42 7707.16,3992.99L7733.47,3983.92C7734.19,3983.67 7734.65,3984.42 7733.9,3985.18L7728.05,3991.22C7726.62,3992.61 7725.23,3994.1 7725.84,3995.89C7726.46,3997.69 7728.48,3998 7730.46,3998.22L7738.8,3999.37C7739.85,3999.5 7739.95,4000.37 7739.23,4000.62L7712.92,4009.69C7711.66,4010.12 7711.19,4011.09 7711.62,4012.35L7712.49,4014.86C7712.93,4016.12 7713.89,4016.59 7715.15,4016.16L7749,4004.49C7753.76,4002.85 7754.72,3999.8 7753.94,3997.56C7752.99,3994.78 7751.29,3993.65 7744.74,3993L7738.81,3992.43C7738.18,3992.34 7737.64,3992.23 7737.52,3991.87C7737.39,3991.51 7737.75,3991.09 7738.19,3990.63L7742.51,3986.53C7747.21,3982.1 7747.91,3980.05 7746.95,3977.26C7746.14,3974.93 7743.54,3973.22 7738.78,3974.86Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7737.33,3932.36L7697.81,3936.13C7696.48,3936.25 7695.8,3937.08 7695.92,3938.41L7696.22,3941.53C7696.35,3942.85 7697.18,3943.53 7698.5,3943.41L7713.06,3942.02C7714.38,3941.89 7715.21,3942.58 7715.34,3943.9L7716.53,3956.38C7716.65,3957.7 7715.97,3958.53 7714.65,3958.66L7700.09,3960.05C7698.76,3960.17 7698.08,3961 7698.2,3962.33L7698.5,3965.45C7698.63,3966.77 7699.46,3967.45 7700.78,3967.33L7740.3,3963.56C7741.62,3963.43 7742.31,3962.61 7742.18,3961.28L7741.89,3958.16C7741.76,3956.84 7740.93,3956.15 7739.61,3956.28L7725.05,3957.67C7723.72,3957.8 7722.9,3957.11 7722.77,3955.79L7721.58,3943.31C7721.45,3941.98 7722.14,3941.15 7723.46,3941.03L7738.02,3939.64C7739.35,3939.51 7740.03,3938.68 7739.9,3937.36L7739.61,3934.24C7739.48,3932.92 7738.65,3932.23 7737.33,3932.36Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7741.84,3891.24L7714.74,3887.49C7706.65,3886.37 7698.64,3891.59 7697.35,3900.9C7696.06,3910.22 7702.35,3917.42 7710.44,3918.54L7737.53,3922.29C7738.85,3922.47 7739.71,3921.82 7739.89,3920.51L7740.32,3917.4C7740.5,3916.09 7739.86,3915.23 7738.54,3915.05L7724.05,3913.04C7722.73,3912.86 7722.09,3912 7722.27,3910.68L7723.99,3898.26C7724.17,3896.95 7725.03,3896.3 7726.34,3896.48L7740.83,3898.49C7742.15,3898.67 7743.01,3898.02 7743.19,3896.7L7743.62,3893.6C7743.8,3892.28 7743.15,3891.43 7741.84,3891.24ZM7715.99,3895.05C7717.31,3895.23 7717.96,3896.09 7717.78,3897.41L7716.06,3909.82C7715.88,3911.14 7715.02,3911.79 7713.7,3911.61L7711.44,3911.29C7707.21,3910.71 7703.3,3907.1 7704.03,3901.83C7704.76,3896.56 7709.5,3894.15 7713.74,3894.74L7715.99,3895.05Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7720.93,3838.35L7718.98,3837.58C7717.74,3837.1 7716.76,3837.52 7716.27,3838.76L7706.32,3864.04C7705.83,3865.27 7706.26,3866.26 7707.5,3866.75L7709.44,3867.51C7710.68,3868 7711.67,3867.57 7712.15,3866.33L7715.04,3859C7715.53,3857.76 7716.51,3857.33 7717.75,3857.82L7748.86,3870.07C7750.1,3870.55 7751.08,3870.13 7751.57,3868.89L7752.68,3866.06C7753.17,3864.82 7752.74,3863.84 7751.5,3863.35L7720.4,3851.1C7719.16,3850.62 7718.73,3849.63 7719.22,3848.39L7722.11,3841.06C7722.59,3839.82 7722.16,3838.84 7720.93,3838.35Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7782.73,3760.01C7782.54,3758.79 7781.04,3757.96 7779.9,3758.97L7777.41,3761.18C7776.42,3762.06 7776.27,3763.46 7776.53,3764.76L7779.08,3777.22C7779.24,3777.97 7779.28,3778.44 7778.92,3778.76C7778.57,3779.08 7778.1,3778.98 7777.38,3778.74L7765.3,3774.72C7764.05,3774.31 7762.64,3774.29 7761.64,3775.17L7759.23,3777.32C7758.02,3778.39 7758.67,3779.97 7759.86,3780.31L7779.4,3786.59C7780.85,3787.08 7782.4,3788.12 7783.47,3789.32L7794.57,3801.83C7795.45,3802.82 7796.52,3802.89 7797.52,3802L7799.79,3799.99C7800.79,3799.1 7800.85,3798.03 7799.97,3797.04L7788.87,3784.53C7787.8,3783.33 7786.96,3781.66 7786.64,3780.16L7782.73,3760.01Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7839.19,3757.51L7832.12,3744.28C7828.27,3737.07 7819.34,3733.66 7811.04,3738.1C7802.75,3742.53 7800.63,3751.85 7804.48,3759.06L7811.56,3772.29C7815.41,3779.49 7824.34,3782.9 7832.63,3778.47C7840.92,3774.03 7843.05,3764.71 7839.19,3757.51ZM7832.75,3760.96C7834.76,3764.73 7834.14,3770.01 7829.45,3772.52C7824.76,3775.03 7820.02,3772.61 7818.01,3768.84L7810.93,3755.61C7808.91,3751.84 7809.53,3746.55 7814.22,3744.04C7818.91,3741.54 7823.65,3743.96 7825.67,3747.72L7832.75,3760.96Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7881.71,3744.85L7874.82,3718.38C7874.49,3717.09 7873.56,3716.55 7872.28,3716.89L7869.24,3717.67C7867.95,3718.01 7867.41,3718.93 7867.75,3720.22L7874.63,3746.7C7875.7,3750.83 7873.86,3755.82 7868.72,3757.16C7863.57,3758.5 7859.53,3755.04 7858.45,3750.9L7851.57,3724.43C7851.23,3723.14 7850.31,3722.6 7849.02,3722.93L7845.99,3723.72C7844.7,3724.06 7844.15,3724.98 7844.49,3726.27L7851.37,3752.74C7853.43,3760.65 7861.31,3766.06 7870.41,3763.69C7879.51,3761.32 7883.76,3752.76 7881.71,3744.85Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M7969.54,3751.6C7971.46,3742.88 7965.11,3737.69 7957.05,3735.43C7957.05,3735.43 7949.69,3733.53 7950.89,3728.05C7951.32,3726.11 7953.82,3722.67 7959.57,3723.93C7961.8,3724.42 7963.75,3725.72 7965.22,3727.89C7965.89,3728.82 7966.96,3729.25 7968.03,3728.8L7970.6,3727.72C7971.79,3727.2 7972.2,3726.22 7971.49,3724.99C7969.67,3721.77 7966.28,3718.6 7961,3717.44C7951.44,3715.34 7945.33,3720.61 7944.02,3726.55C7942.47,3733.6 7946.63,3739.47 7955.62,3741.93C7955.62,3741.93 7963.78,3743.72 7962.4,3750.03C7961.62,3753.56 7958.47,3756.85 7952.63,3755.57C7948.27,3754.61 7945.76,3750.95 7944.41,3747.83C7943.96,3746.76 7943,3746.26 7941.84,3746.68L7939.38,3747.7C7938.08,3748.29 7937.77,3749.29 7938.19,3750.45C7939.64,3754.47 7943.2,3760.4 7951.18,3762.15C7960.83,3764.27 7967.81,3759.48 7969.54,3751.6Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M8004.85,3779.55L8016.81,3754.95C8020.38,3747.6 8017.89,3738.37 8009.44,3734.26C8000.98,3730.15 7992.18,3733.9 7988.61,3741.25L7976.66,3765.85C7976.08,3767.05 7976.43,3768.06 7977.63,3768.64L7980.45,3770.01C7981.64,3770.59 7982.66,3770.24 7983.24,3769.05L7989.63,3755.89C7990.21,3754.7 7991.23,3754.34 7992.42,3754.93L8003.7,3760.4C8004.9,3760.99 8005.25,3762 8004.66,3763.2L7998.27,3776.35C7997.69,3777.55 7998.04,3778.56 7999.24,3779.14L8002.06,3780.51C8003.25,3781.1 8004.27,3780.74 8004.85,3779.55ZM8009.23,3753.8C8008.65,3755 8007.64,3755.35 8006.44,3754.77L7995.16,3749.29C7993.97,3748.71 7993.61,3747.69 7994.2,3746.49L7995.19,3744.44C7997.06,3740.6 8001.7,3738 8006.49,3740.32C8011.27,3742.65 8012.1,3747.91 8010.23,3751.75L8009.23,3753.8Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(0.999372,-0.035441,0.035441,0.999372,-844.891,249.939)">
            <path d="M8062.15,3774.42C8063.33,3774.03 8063.91,3772.42 8062.74,3771.46L8060.17,3769.35C8059.14,3768.51 8057.73,3768.58 8056.49,3769.04L8044.59,3773.52C8043.87,3773.79 8043.41,3773.91 8043.04,3773.61C8042.68,3773.3 8042.7,3772.83 8042.82,3772.08L8044.89,3759.52C8045.1,3758.22 8044.9,3756.82 8043.87,3755.98L8041.37,3753.93C8040.12,3752.91 8038.66,3753.79 8038.51,3755.02L8035.38,3775.31C8035.13,3776.82 8034.35,3778.51 8033.33,3779.76L8022.72,3792.68C8021.88,3793.71 8021.99,3794.78 8023.01,3795.62L8025.36,3797.55C8026.39,3798.4 8027.46,3798.29 8028.3,3797.26L8038.91,3784.34C8039.93,3783.09 8041.44,3782 8042.87,3781.45L8062.15,3774.42Z" style="fill:rgb(59,100,118);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7800.2,4073.08C7799.14,4073.62 7798.77,4074.52 7799.31,4075.92L7800.26,4078.4C7800.76,4079.54 7801.65,4079.91 7803.05,4079.37C7804.71,4078.78 7808.39,4076.57 7812.79,4079.55C7817.2,4082.54 7817.26,4087.86 7814.86,4091.4L7806.44,4103.82C7804.04,4107.36 7799.07,4109.27 7794.67,4106.28C7790.27,4103.3 7790.96,4098.72 7791,4097.14C7791.01,4095.77 7790.2,4095.1 7788.91,4095.15L7786.12,4095.2C7784.75,4095.19 7784.21,4096.32 7784.05,4097.24C7783.72,4099.08 7783.11,4106.59 7790.89,4111.86C7798.67,4117.14 7807.91,4114.68 7812.49,4107.92L7820.91,4095.5C7825.5,4088.74 7824.36,4079.25 7816.58,4073.97C7808.8,4068.7 7802.24,4071.94 7800.2,4073.08Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7770.11,4042.47C7768.95,4042.76 7768.38,4043.54 7768.58,4045.03L7768.93,4047.66C7769.14,4048.88 7769.92,4049.46 7771.41,4049.26C7773.17,4049.07 7777.26,4047.77 7780.85,4051.7C7784.43,4055.63 7783.26,4060.82 7780.1,4063.7L7778.42,4065.24C7777.43,4066.14 7776.36,4066.09 7775.46,4065.11L7768.93,4057.95C7768.04,4056.97 7766.96,4056.92 7765.98,4057.82L7764.44,4059.23C7763.45,4060.12 7763.41,4061.2 7764.3,4062.18L7770.84,4069.33C7771.73,4070.31 7771.68,4071.39 7770.7,4072.28L7769.02,4073.82C7765.86,4076.7 7760.59,4077.4 7757,4073.48C7753.41,4069.55 7755.15,4065.26 7755.56,4063.73C7755.89,4062.4 7755.26,4061.57 7753.99,4061.31L7751.26,4060.71C7749.93,4060.38 7749.15,4061.35 7748.77,4062.21C7748.02,4063.93 7745.68,4071.08 7752.02,4078.02C7758.36,4084.97 7767.92,4084.73 7773.95,4079.22L7785.03,4069.1C7791.06,4063.6 7792.17,4054.1 7785.83,4047.16C7779.49,4040.21 7772.35,4041.84 7770.11,4042.47Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7752.21,4002.16L7745.14,4006.06C7739.99,4008.9 7738.46,4012.24 7737.89,4014.94C7737.68,4015.92 7737.01,4016.29 7736.15,4015.9C7734.72,4015.28 7731.26,4013.72 7726.6,4016.28C7719.19,4020.37 7718.04,4028.7 7722.35,4036.52C7726.89,4044.75 7736.24,4046.76 7743.39,4042.81L7767.35,4029.61C7768.51,4028.96 7768.81,4027.93 7768.17,4026.77L7766.65,4024.02C7766.01,4022.86 7764.98,4022.56 7763.82,4023.2L7751.01,4030.26C7749.84,4030.91 7748.81,4030.61 7748.17,4029.44L7745.14,4023.95C7742.57,4019.3 7744.93,4014.53 7748.68,4012.46L7755.74,4008.56C7756.91,4007.92 7757.21,4006.89 7756.57,4005.72L7755.05,4002.98C7754.41,4001.82 7753.38,4001.52 7752.21,4002.16ZM7730.13,4022.69C7734.79,4020.12 7738.46,4024.82 7739.65,4026.98L7742.68,4032.47C7743.32,4033.63 7743.02,4034.67 7741.86,4035.31L7739.86,4036.41C7736.12,4038.47 7730.83,4037.92 7728.26,4033.26C7726.1,4029.35 7726.14,4024.89 7730.13,4022.69Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7703.72,3971.86L7701.7,3972.41C7700.41,3972.75 7699.88,3973.68 7700.23,3974.97L7707.33,4001.19C7707.68,4002.47 7708.61,4003.01 7709.89,4002.66L7711.91,4002.11C7713.19,4001.76 7713.73,4000.83 7713.38,3999.55L7711.32,3991.94C7710.97,3990.66 7711.51,3989.72 7712.79,3989.38L7745.06,3980.64C7746.34,3980.29 7746.88,3979.36 7746.53,3978.07L7745.74,3975.14C7745.39,3973.86 7744.45,3973.32 7743.17,3973.67L7710.9,3982.41C7709.62,3982.76 7708.69,3982.22 7708.34,3980.94L7706.28,3973.33C7705.93,3972.05 7705,3971.51 7703.72,3971.86Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7737.66,3920.24L7735.57,3920.3C7734.24,3920.34 7733.5,3921.12 7733.54,3922.45L7733.75,3930.33C7733.78,3931.66 7733.05,3932.44 7731.72,3932.47L7704.56,3933.2C7703.23,3933.24 7702.45,3932.5 7702.42,3931.17L7702.29,3926.42C7702.25,3925.1 7701.47,3924.36 7700.14,3924.39L7698.06,3924.45C7696.73,3924.48 7695.99,3925.26 7696.02,3926.59L7696.59,3947.48C7696.62,3948.81 7697.4,3949.55 7698.73,3949.51L7700.82,3949.46C7702.15,3949.42 7702.89,3948.64 7702.85,3947.31L7702.72,3942.56C7702.69,3941.24 7703.43,3940.45 7704.76,3940.42L7731.91,3939.69C7733.24,3939.65 7734.02,3940.39 7734.06,3941.72L7734.27,3949.6C7734.3,3950.93 7735.08,3951.67 7736.41,3951.63L7738.5,3951.58C7739.83,3951.54 7740.57,3950.76 7740.53,3949.43L7739.8,3922.28C7739.77,3920.95 7738.99,3920.21 7737.66,3920.24Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7710.83,3870.36C7709.87,3869.46 7708.67,3869.58 7707.81,3870.36C7705.62,3872.3 7702,3876.74 7700.73,3882.4C7698.67,3891.57 7704.34,3899.27 7712.31,3901.06L7739,3907.05C7740.3,3907.34 7741.2,3906.77 7741.5,3905.47L7742.18,3902.41C7742.47,3901.11 7741.9,3900.21 7740.6,3899.91L7726.33,3896.71C7725.03,3896.42 7724.46,3895.51 7724.75,3894.22L7727.74,3880.87C7728.04,3879.57 7727.46,3878.66 7726.16,3878.37L7724.12,3877.92C7722.83,3877.62 7721.92,3878.2 7721.63,3879.5L7718.63,3892.84C7718.34,3894.14 7717.43,3894.71 7716.14,3894.42L7713.91,3893.92C7709.74,3892.99 7706.15,3889.07 7707.31,3883.88C7708.18,3879.98 7710.6,3877.02 7712.62,3874.95C7713.39,3874.14 7713.49,3872.8 7712.53,3871.91L7710.83,3870.36Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7762.12,3840.82L7760.24,3839.91C7759.04,3839.33 7758.02,3839.69 7757.45,3840.89L7754.03,3847.99C7753.45,3849.19 7752.44,3849.54 7751.24,3848.97L7726.76,3837.19C7725.57,3836.61 7725.21,3835.6 7725.79,3834.4L7727.85,3830.12C7728.42,3828.92 7728.07,3827.91 7726.87,3827.33L7724.99,3826.43C7723.79,3825.85 7722.77,3826.2 7722.2,3827.4L7713.14,3846.23C7712.56,3847.43 7712.91,3848.44 7714.11,3849.02L7716,3849.93C7717.19,3850.5 7718.21,3850.15 7718.78,3848.95L7720.84,3844.67C7721.42,3843.47 7722.44,3843.12 7723.63,3843.69L7748.11,3855.47C7749.31,3856.05 7749.66,3857.06 7749.09,3858.26L7745.67,3865.36C7745.09,3866.56 7745.45,3867.58 7746.65,3868.15L7748.53,3869.06C7749.73,3869.64 7750.74,3869.28 7751.32,3868.08L7763.1,3843.61C7763.67,3842.41 7763.32,3841.39 7762.12,3840.82Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7783.03,3804.77C7782.59,3803.67 7781.73,3803.21 7780.29,3803.62L7777.73,3804.35C7776.55,3804.74 7776.1,3805.59 7776.51,3807.03C7776.95,3808.75 7778.81,3812.61 7775.44,3816.72C7772.07,3820.84 7766.76,3820.41 7763.46,3817.7L7761.69,3816.26C7760.66,3815.41 7760.56,3814.34 7761.4,3813.32L7767.55,3805.83C7768.39,3804.8 7768.29,3803.73 7767.26,3802.89L7765.64,3801.56C7764.61,3800.72 7763.55,3800.82 7762.7,3801.85L7756.56,3809.34C7755.71,3810.37 7754.64,3810.47 7753.62,3809.63L7751.85,3808.18C7748.55,3805.47 7747.1,3800.35 7750.47,3796.24C7753.85,3792.13 7758.34,3793.24 7759.91,3793.42C7761.28,3793.56 7762.01,3792.81 7762.09,3791.52L7762.28,3788.73C7762.42,3787.37 7761.35,3786.73 7760.44,3786.48C7758.64,3785.99 7751.22,3784.69 7745.26,3791.96C7739.3,3799.23 7740.9,3808.66 7747.22,3813.84L7758.82,3823.36C7765.13,3828.54 7774.69,3828.27 7780.65,3821C7786.62,3813.73 7783.99,3806.9 7783.03,3804.77Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(-0.848902,-0.528551,0.528551,-0.848902,11843.9,11418.1)">
            <path d="M7812.81,3771.49L7803.74,3759.54C7798.8,3753.03 7790.02,3751.82 7782.53,3757.51L7773.37,3764.45C7771.25,3766.06 7770.96,3768.19 7772.57,3770.31L7794.03,3798.61C7795.64,3800.72 7797.77,3801.02 7799.89,3799.41L7809.05,3792.46C7816.54,3786.78 7817.74,3778 7812.81,3771.49ZM7806.98,3775.91C7809.56,3779.32 7809.49,3784.26 7805.26,3787.47L7800.26,3791.26C7799.2,3792.06 7798.14,3791.92 7797.34,3790.86L7780.92,3769.22C7780.11,3768.16 7780.26,3767.09 7781.32,3766.29L7786.31,3762.5C7790.55,3759.28 7795.33,3760.55 7797.91,3763.96L7806.98,3775.91Z" style="fill:rgb(84,204,214);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(1,0,0,1,5884.23,2284.29)">
            <g transform="matrix(0.275084,0,0,0.275084,-1208.31,955.435)">
                <path d="M9267.88,2588.71C9293.82,2610.78 9319.75,2623.47 9342.38,2623.47C9342.38,2623.47 9342.38,2623.47 9342.39,2623.47C9358.82,2623.47 9373.27,2612.59 9377.81,2596.79C9382.35,2580.99 9375.89,2564.1 9361.96,2555.37C9307.07,2520.73 9271.19,2460.47 9271.19,2391.71C9271.19,2283.01 9360.59,2197.48 9473.16,2197.48C9586.28,2197.48 9675.68,2282.46 9675.68,2391.71C9675.68,2500.42 9586.28,2587.05 9473.16,2587.05L9473.16,2587.05C9470.4,2587.05 9467.8,2588.36 9466.16,2590.58C9430.92,2638.02 9390.97,2664.31 9347.34,2664.31C9326.28,2664.31 9304.56,2658.47 9283.96,2647.34C9273.94,2641.92 9266.55,2632.66 9263.48,2621.69C9260.4,2610.72 9261.91,2598.98 9267.65,2589.14C9267.8,2588.86 9267.88,2588.71 9267.88,2588.71ZM9630.98,2391.71C9630.98,2306.74 9559.24,2239.42 9473.16,2239.42C9387.08,2239.42 9316.44,2306.74 9316.44,2391.71C9316.44,2476.69 9387.08,2544.57 9473.16,2544.57C9559.24,2544.57 9630.98,2476.69 9630.98,2391.71Z" style="fill:rgb(66,116,120);"/>
            </g>
        </g>
        <g transform="matrix(1,0,0,1,5884.23,2284.29)">
            <g transform="matrix(0.275084,0,0,0.275084,-1208.64,955.316)">
                <path d="M9423.19,2085.9C9437.57,2085.9 9449.22,2074.24 9449.22,2059.87C9449.22,2052.66 9449.22,2044.61 9449.22,2036.64C9449.22,2024.57 9444.43,2013 9435.9,2004.47C9427.36,1995.94 9415.79,1991.15 9403.73,1991.15C9254.35,1991.15 8788.39,1991.15 8788.39,1991.15L8788.39,1993C8788.39,2017.64 8798.18,2041.27 8815.6,2058.69C8833.02,2076.11 8856.65,2085.9 8881.29,2085.9L9001.79,2085.9C9019.6,2085.9 9036.69,2092.98 9049.29,2105.58C9061.89,2118.18 9068.97,2135.26 9068.97,2153.08C9068.97,2289.15 9068.97,2597.79 9068.97,2755.63C9068.97,2809.15 9112.36,2852.54 9165.88,2852.54L9167.41,2852.54L9167.41,2339.01C9167.41,2271.88 9194.08,2207.5 9241.55,2160.03C9289.02,2112.57 9353.4,2085.9 9420.53,2085.9L9423.19,2085.9Z" style="fill:rgb(84,204,214);"/>
            </g>
        </g>
    </g>
</svg>`;
    const blob = new Blob([BADGE_SVG], {type: 'image/svg+xml'});
    const url  = URL.createObjectURL(blob);
    img.onload = function() {
        const bSize = 200;
        ctx.drawImage(img, SIZE - bSize - 60, SIZE - bSize - 60, bSize, bSize);
        URL.revokeObjectURL(url);
        // Download
        const link = document.createElement('a');
        link.download = 'traspality-storia.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
        showToast('Immagine scaricata!');
    };
    img.onerror = function() {
        // Fallback: scarica senza bollino
        const link = document.createElement('a');
        link.download = 'traspality-storia.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
        showToast('Immagine scaricata!');
    };
    img.src = url;
}

// v18: una storia interna resta nel team, quindi non si puo' condividere nella community
function syncPersonalFeed() {
    var pub = document.getElementById('toggle-public');
    var pf = document.getElementById('toggle-personal-feed');
    var sub = document.getElementById('personal-feed-sub');
    if (!pub || !pf) return;
    if (!pub.checked) { pf.checked = false; pf.disabled = true; }
    else { pf.disabled = false; }
    if (sub) sub.textContent = pub.checked
        ? 'Condividi questa azione nel tuo DNA personale e nella community di LIVE'
        : 'Disponibile solo per le storie pubblicate sulla pagina del team';
    var row = pf.closest('.publish-toggle-row');
    if (row) row.style.opacity = pub.checked ? '' : '.5';
}

function showScreen(id) { document.querySelectorAll('.screen').forEach(s=>s.classList.add('hidden')); document.getElementById(id).classList.remove('hidden'); }
function goBack() { showScreen('screen-input'); }
function resetAll() {
    // --- testo e tag ---
    document.getElementById('story-textarea').value='';
    document.getElementById('char-count').textContent='0 / 1200';
    selected={v:[],s:[],m:[]};
    showAllM = false; modOpen = {}; noneSel = { v:false, s:false, m:false };
    creditsReset(); // v20
    renderVSM();
    renderPacks();
    setStoryType('team');

    // --- v12: foto. Senza questo, la storia nuova ripescava l'immagine della precedente ---
    removePhoto();

    // --- v12: stato dell'analisi e schermata di preview ---
    algoRating = null;
    var slider = document.getElementById('rating-slider');
    if (slider) { slider.value = 7; onSlider(); }
    document.getElementById('prev-algo-num').innerHTML = '—<span>/10</span>';
    document.getElementById('prev-bars').innerHTML = '';
    document.getElementById('prev-tags').innerHTML = '';
    document.getElementById('prev-story-text').textContent = '';
    document.getElementById('ai-note').style.display = 'none';
    document.getElementById('preview-label').textContent = 'Come la vediamo noi';

    // --- v12: bottoni riportati allo stato di partenza (erano la causa dello spinner infinito) ---
    var bSend = document.getElementById('btn-send');
    bSend.disabled = true; bSend.textContent = 'CERTIFICA \u2192';
    var bConf = document.getElementById('btn-confirm');
    bConf.disabled = false; bConf.textContent = '\u2713 CONFERMA E CERTIFICA';

    // --- v17: assistente AI ---
    aiReset();

    // --- v18: interruttori di pubblicazione coerenti ---
    syncPersonalFeed();

    // --- v12: residui della schermata "fatto" ---
    window._lastStoryId = null;
    document.getElementById('btn-share-story').style.display = 'none';

    showScreen('screen-input');
}
function openTeamSheet() {
    if (allTeams.length<=1) return;
    document.getElementById('team-options-list').innerHTML = allTeams.map(t=>'<div class="team-option" onclick="pickTeam(\''+t.id+'\')"><div class="team-option-dot"></div><div class="team-option-name" translate="no">'+t.name+'</div>'+(t.id===currentTeam?.id?'<div class="team-option-check">✓</div>':'')+'</div>').join('');
    document.getElementById('team-overlay').classList.remove('hidden');
}
async function pickTeam(id) { const t=allTeams.find(x=>x.id===id); if(t) await selectTeam(t); document.getElementById('team-overlay').classList.add('hidden'); }
function closeTeamSheet(e) { if(e.target===document.getElementById('team-overlay')) document.getElementById('team-overlay').classList.add('hidden'); }
function showToast(msg, ms=3000) { const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),ms); }

// ─── v17: RACCONTA CON AI ─────────────────────────────────────────────
// L'assistente non scrive la storia: fa domande e compone una bozza con i fatti dell'autore.
// Quote, tetti e budget li decide SOLO il server: qui si mostra lo stato e basta.
var AI_PREZZO_EXTRA = window.TRSP_LANG === 'en' ? '\u20ac0.49' : '0,49\u00a0\u20ac';
var AI_PREZZO_PRO = window.TRSP_LANG === 'en' ? '\u20ac3.99' : '3,99\u00a0\u20ac';
var aiState = { sessionId: null, questions: [], segments: [], used: false, isTrial: false, callsLeft: null, busy: false };
var aiStatus = null;
var aiPlan = 'free';

var AI_MSG = {
    spento: 'L\u2019assistente non \u00e8 disponibile in questo momento. Puoi raccontare come sempre.',
    non_disponibile: 'L\u2019assistente non \u00e8 disponibile in questo momento. Puoi raccontare come sempre.',
    limite_giornaliero: 'Hai raggiunto il limite di storie assistite per oggi. Riprova domani, oppure racconta come sempre.',
    quota_esaurita: 'Hai usato tutte le storie assistite di questo mese: il contatore riparte il primo del mese. Intanto puoi raccontare come sempre.',
    limite_chiamate_storia: 'Per questa storia hai usato tutti i passaggi disponibili: rifinisci il testo a mano.',
    sessione_scaduta: 'L\u2019aiuto per questa storia \u00e8 scaduto. Tocca di nuovo \u00ab\u2726 Racconta con AI\u00bb per ricominciare.',
    sessione_non_valida: 'L\u2019aiuto per questa storia non \u00e8 pi\u00f9 valido. Tocca di nuovo \u00ab\u2726 Racconta con AI\u00bb per ricominciare.',
    errore_modello: 'L\u2019assistente non ha risposto. Riprova: questo tentativo non viene conteggiato.',
    testo_troppo_breve: 'Scrivi o detta almeno una frase su cosa hai fatto, poi chiedi aiuto all\u2019assistente.',
    non_autenticato: 'La sessione \u00e8 scaduta: rientra e riprova.',
    rete: 'Connessione assente o lenta. Riprova tra poco: questo tentativo non viene conteggiato.'
};

function aiEsc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function(c) {
        return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c];
    });
}

async function aiLoadStatus() {
    try {
        var r = await db.rpc('ai_tell_status');
        if (r.error) throw r.error;
        aiStatus = r.data || null;
    } catch(e) { console.warn('ai status:', e); aiStatus = null; }
    try {
        var p = await db.rpc('effective_plan');
        if (!p.error && p.data && p.data.plan) aiPlan = String(p.data.plan).toLowerCase();
    } catch(e) {}
    aiRenderCounter();
}

function aiRenderCounter() {
    var box = document.getElementById('ai-assist');
    var el = document.getElementById('ai-counter');
    if (!aiStatus || aiStatus.reason === 'spento' || aiStatus.reason === 'non_autenticato') {
        box.classList.add('off');
        return;
    }
    box.classList.remove('off');
    var t = '';
    if (aiStatus.has_addon) {
        t = 'Storie assistite: ' + aiStatus.remaining + ' su ' + aiStatus.quota + ' questo mese';
    } else if (aiStatus.trials_left > 0) {
        t = aiStatus.trials_left === 1 ? '1 storia di prova gratuita' : aiStatus.trials_left + ' storie di prova gratuite';
    } else {
        t = 'Assistente di scrittura: ' + AI_PREZZO_EXTRA + ' al mese';
    }
    el.textContent = t;
}

function aiShowMsg(reason, testoLibero) {
    var m = document.getElementById('ai-msg');
    var txt = testoLibero || AI_MSG[reason] || AI_MSG.non_disponibile;
    m.textContent = txt;
    m.style.display = 'block';
    document.getElementById('ai-panel').classList.add('open');
}
function aiHideMsg() { var m = document.getElementById('ai-msg'); m.style.display = 'none'; m.textContent = ''; }

function aiShowOffer(dopoLaProva) {
    var quota = (aiStatus && aiStatus.quota_extra) || 10;
    var title = document.getElementById('ai-offer-title');
    var text = document.getElementById('ai-offer-text');
    var cta = document.getElementById('ai-offer-cta');
    title.textContent = dopoLaProva ? 'Ti \u00e8 stato utile?' : 'Hai gi\u00e0 usato la tua storia di prova';
    if (aiPlan === 'free') {
        text.textContent = 'Con il piano Pro e l\u2019Assistente di scrittura hai ' + quota + ' storie assistite al mese: ' +
            AI_PREZZO_PRO + ' + ' + AI_PREZZO_EXTRA + ' al mese.';
        cta.textContent = 'Scopri Pro + Assistente';
    } else {
        text.textContent = 'Con l\u2019Assistente di scrittura hai ' + quota + ' storie assistite al mese, a ' +
            AI_PREZZO_EXTRA + ' al mese in pi\u00f9 sul tuo piano.';
        cta.textContent = 'Attiva l\u2019Assistente';
    }
    document.getElementById('ai-offer-close').style.display = dopoLaProva ? 'none' : 'inline';
    document.getElementById('ai-offer').style.display = 'block';
    document.getElementById('ai-panel').classList.add('open');
}
function aiHideOffer() { document.getElementById('ai-offer').style.display = 'none'; }

function aiSetBusy(on, label) {
    aiState.busy = on;
    var b = document.getElementById('ai-btn');
    var d = document.getElementById('ai-draft-btn');
    b.disabled = on; d.disabled = on;
    b.innerHTML = on && label === 'ask' ? '\u2726 Sto leggendo\u2026' : '\u2726 Racconta con AI';
    d.textContent = on && label === 'draft' ? 'Sto componendo\u2026' : 'Componi la bozza';
    var r = document.getElementById('ai-redo-btn');
    if (r) r.disabled = on;
}

async function aiCall(payload) {
    try {
        var res = await db.functions.invoke('story-assistant', { body: payload });
        if (res.error) {
            var body = null;
            try { body = res.error.context && typeof res.error.context.json === 'function' ? await res.error.context.json() : null; } catch(e) {}
            return body && body.reason ? body : { ok: false, reason: 'rete' };
        }
        return res.data || { ok: false, reason: 'non_disponibile' };
    } catch(e) {
        console.warn('story-assistant:', e);
        return { ok: false, reason: 'rete' };
    }
}

async function aiStart() {
    if (aiState.busy) return;
    aiHideMsg(); aiHideOffer();
    var text = document.getElementById('story-textarea').value.trim();
    if (text.length < 15) { aiShowMsg('testo_troppo_breve'); return; }

    // Una storia gia' avviata non consuma una nuova unita' di quota: si prosegue sulla stessa sessione.
    if (!aiState.sessionId && aiStatus && !aiStatus.can_start) {
        if (aiStatus.reason === 'serve_extra') { aiShowOffer(false); return; }
        aiShowMsg(aiStatus.reason); return;
    }

    aiSetBusy(true, 'ask');
    var r = await aiCall({ action: 'ask', text: text, sessionId: aiState.sessionId });
    aiSetBusy(false);

    if (r.sessionId) aiState.sessionId = r.sessionId;
    if (!r.ok) {
        if (r.reason === 'sessione_scaduta' || r.reason === 'sessione_non_valida') aiState.sessionId = null;
        if (r.reason === 'serve_extra') { aiShowOffer(false); }
        else aiShowMsg(r.reason);
        aiLoadStatus();
        return;
    }
    aiState.isTrial = !!r.isTrial;
    aiState.callsLeft = r.callsLeft;
    aiState.questions = Array.isArray(r.questions) ? r.questions : [];
    aiRenderQuestions();
    aiLoadStatus();
}

function aiRenderQuestions() {
    var wrap = document.getElementById('ai-questions');
    var sub = document.getElementById('ai-questions-sub');
    if (!aiState.questions.length) {
        sub.textContent = 'Il tuo racconto \u00e8 gi\u00e0 completo. Se vuoi, l\u2019assistente lo mette in forma senza aggiungere nulla.';
        wrap.innerHTML = '';
    } else {
        sub.textContent = 'Rispondi solo a quello che sai: le risposte vuote vengono ignorate.';
        wrap.innerHTML = aiState.questions.map(function(q, i) {
            return '<div class="ai-q"><label translate="no" for="ai-a-' + i + '">' + aiEsc(q) + '</label>' +
                   '<textarea id="ai-a-' + i + '" maxlength="400" rows="2"></textarea></div>';
        }).join('');
    }
    document.getElementById('ai-step-draft').style.display = 'none';
    document.getElementById('ai-step-questions').style.display = 'block';
    document.getElementById('ai-panel').classList.add('open');
    var first = document.getElementById('ai-a-0');
    if (first) first.focus();
}

async function aiDraft() {
    if (aiState.busy || !aiState.sessionId) return;
    aiHideMsg();
    var text = document.getElementById('story-textarea').value.trim();
    if (text.length < 15) { aiShowMsg('testo_troppo_breve'); return; }
    var answers = aiState.questions.map(function(q, i) {
        var el = document.getElementById('ai-a-' + i);
        return { q: q, a: el ? el.value.trim() : '' };
    });

    aiSetBusy(true, 'draft');
    var r = await aiCall({ action: 'draft', text: text, sessionId: aiState.sessionId, answers: answers });
    aiSetBusy(false);

    if (!r.ok) {
        if (r.reason === 'sessione_scaduta' || r.reason === 'sessione_non_valida') aiState.sessionId = null;
        aiShowMsg(r.reason);
        aiLoadStatus();
        return;
    }
    aiState.callsLeft = r.callsLeft;
    aiState.isTrial = !!r.isTrial;
    aiState.segments = (r.segments || []).map(function(s) { return { t: String(s.t || ''), ai: s.src === 'ai', off: false }; });
    aiRenderDraft();
    if (aiState.isTrial) aiShowOffer(true);
    aiLoadStatus();
}

function aiRenderDraft() {
    var box = document.getElementById('ai-draft');
    box.innerHTML = aiState.segments.map(function(s, i) {
        if (!s.ai) return '<span>' + aiEsc(s.t) + '</span>';
        return '<span class="ai-seg' + (s.off ? ' off' : '') + '" role="button" tabindex="0" title="Tocca per togliere o rimettere" onclick="aiToggleSeg(' + i + ')">' + aiEsc(s.t) + '</span>';
    }).join('');
    var redo = document.getElementById('ai-redo-btn');
    redo.style.display = (aiState.callsLeft !== null && aiState.callsLeft <= 0) ? 'none' : 'inline';
    document.getElementById('ai-step-questions').style.display = 'none';
    document.getElementById('ai-step-draft').style.display = 'block';
    document.getElementById('ai-panel').classList.add('open');
}

function aiToggleSeg(i) {
    if (!aiState.segments[i] || !aiState.segments[i].ai) return;
    aiState.segments[i].off = !aiState.segments[i].off;
    aiRenderDraft();
}

function aiUseDraft() {
    // Togliendo un collegamento non si devono incollare due parole: se nel punto del taglio
    // manca uno spazio, lo si rimette.
    var testo = '', saltato = false;
    aiState.segments.forEach(function(s) {
        if (s.off) { saltato = true; return; }
        if (saltato && testo && !/\s$/.test(testo) && !/^[\s,.;:!?)]/.test(s.t)) testo += ' ';
        testo += s.t;
        saltato = false;
    });
    testo = testo.replace(/[ \t]{2,}/g, ' ').replace(/\s+([,.;:!?])/g, '$1').trim().slice(0, 1200);
    if (testo.length < 10) { aiShowMsg(null, 'La bozza \u00e8 rimasta vuota: rimetti qualche parte o scrivi a mano.'); return; }
    var ta = document.getElementById('story-textarea');
    ta.value = testo;
    onTextInput();
    aiState.used = true;
    document.getElementById('ai-step-draft').style.display = 'none';
    aiHideMsg();
    if (document.getElementById('ai-offer').style.display !== 'block') document.getElementById('ai-panel').classList.remove('open');
    document.getElementById('ai-badge').style.display = 'block';
    showToast('Bozza inserita: rileggila e scegli i tag');
}

function aiClose() {
    document.getElementById('ai-step-questions').style.display = 'none';
    document.getElementById('ai-step-draft').style.display = 'none';
    aiHideOffer(); aiHideMsg();
    document.getElementById('ai-panel').classList.remove('open');
    if (aiState.sessionId) document.getElementById('ai-badge').style.display = 'block';
}

function aiRenderDisclosure() {
    var el = document.getElementById('prev-ai-disclosure');
    if (!el) return;
    if (!aiState.sessionId) { el.style.display = 'none'; el.textContent = ''; return; }
    var n = aiState.questions.length;
    var fatto = n === 0 ? 'ha letto il racconto' : ('ha posto ' + (n === 1 ? 'una domanda' : n + ' domande'));
    el.textContent = aiState.used
        ? '\u2726 Raccolta con assistente AI \u2014 l\u2019AI ' + fatto + ' e dato forma al testo; fatti e valori sono dichiarati dall\u2019autore.'
        : '\u2726 Raccolta con assistente AI \u2014 l\u2019AI ' + fatto + '; testo, fatti e valori sono dell\u2019autore.';
    el.style.display = 'block';
}

function aiReset() {
    aiState = { sessionId: null, questions: [], segments: [], used: false, isTrial: false, callsLeft: null, busy: false };
    document.getElementById('ai-questions').innerHTML = '';
    document.getElementById('ai-draft').innerHTML = '';
    document.getElementById('ai-step-questions').style.display = 'none';
    document.getElementById('ai-step-draft').style.display = 'none';
    document.getElementById('ai-badge').style.display = 'none';
    aiHideOffer(); aiHideMsg();
    document.getElementById('ai-panel').classList.remove('open');
    aiSetBusy(false);
    aiRenderDisclosure();
    aiLoadStatus();
}

init();
</script>
</body>
</html>