/* ==========================================================================
   COMPOSER - MODALITA' SCRITTURA su telefono
   (public/assets/css/composer-write.css - caricato solo da feed.html, dopo
   modals-mobile.css)

   Richiesta dell'utente: "quando si clicca dentro il testo si deve espandere
   subito a tutto schermo... altrimenti e' un casino: i telefoni aprono la tastiera
   virtuale che porta via il 50% dello spazio... quando la tastiera si chiude le
   icone si riposizionano da sole... e mentre scrivi le icone spariscono e si
   abilitano emoji, hashtag, menziona, luogo, musica, tagga persone come piccoli
   badge che scorrono di lato".

   Qui: quando il testo ha il fuoco, il modale entra in stato `.mood-writing`:
     - l'area di scrittura si prende TUTTO lo spazio libero (riga azioni via);
     - in cima compare la testata `.mood-write-top` - croce a sinistra, "Pubblica" a
       destra (richiesta dell'utente 12/09/2026: "lo togliamo dal basso per mobile ...
       mettiamo il bottone close a sinistra e a destra il bottone Pubblica"); sotto di
       lei l'header di sempre (avatar, nome, privacy);
     - al posto della riga azioni compare la barra dei badge, agganciata in fondo
       e quindi sempre sopra la tastiera (il modale si accorcia gia' da solo con
       --mood-kb-offset, calcolata da feed.js sul visualViewport), con dentro
       Media/Video/Galia;
     - al tocco su un badge si apre un pannello (elenco + ricerca + filtri) sopra
       la barra.
   Solo sotto i 800px: su desktop il composer resta quello di sempre.
   ========================================================================== */

/* Fuori dal telefono ne' la barra ne' la testata esistono: stanno qui e non dentro il
   @media, altrimenti su desktop resterebbero due contenitori vuoti visibili. */
.mood-write-bar,
.mood-write-top { display: none; }

@media (max-width: 800px) {

    /* ---------- 1. Stato "sto scrivendo" ---------- */
    /* Questa riga vale solo per le azioni rimaste DENTRO il modulo: dal 12/09/2026
       composer-write.js le sposta nella barra dei badge (vedi 2b), quindi di norma non
       nasconde piu' niente. Non si cancella: e' la rete di sicurezza se lo spostamento non
       avviene (JavaScript vecchio in cache, markup diverso...). */
    #createPostModal.mood-writing .post-box .options { display: none; }

    /* La catena flex arriva fino all'editor: senza questo l'area di scrittura
       restava alta quanto una riga (misurato: 47px su 844 = 5% dello schermo). */
    #createPostModal.mood-writing .modal-text {
        display: flex;
        flex-direction: column;
    }
    #createPostModal.mood-writing .post-box {
        flex: 1 1 auto;
        min-height: 0;
    }
    /* `<mainwin class="create-post">` e' un elemento non standard: sta `inline`, e
       la catena flex si spezzava li' (misurato: area di testo ferma a 47px).
       `display: flex !important` serve perche' mood-ui.css impone `display: block
       !important` sullo stesso selettore. */
    #createPostModal.mood-writing .create-post {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #createPostModal.mood-writing .post-box form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        /* UN MEDIA NON DEVE SCHIACCIARE LA SCRITTURA (01/10/2026).
           IL TITOLARE: «quando mettiamo un media... non si deve schiacciare la parte textarea ..
           al massimo mettiamo uno scroll verticale».
           MISURATO (390x844, tastiera finta sul visualViewport: 344px di offset) con un media
           allegato: l'area di scrittura scendeva a 140px (il suo pavimento) ma il suo CONTENITORE
           si fermava a 101px, quindi il testo sbordava sotto e finiva 15px SOPRA la riga del media
           (146-286 contro 271) - e `.modal-text` non scorreva (386 di contenuto su 386 di
           finestra): non c'era ne' lo spazio ne' il modo di arrivarci.
           Adesso il posto dove si scorre e' il modulo: il pavimento del testo resta, e quel che
           non ci sta (media, interruttore AI, limiti) si raggiunge scorrendo. */
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* Nessun figlio del modulo si comprime: chi non ci sta, si raggiunge scorrendo. */
    #createPostModal.mood-writing .post-box form > * { flex: 0 0 auto; }
    #createPostModal.mood-writing #editor-container {
        display: flex;
        flex-direction: column;
        /* NON SI COMPRIME (prima `flex: 1 1 auto` con `min-height: 0`): il pavimento qui sotto e'
           lo stesso dell'area di scrittura, cosi' il testo non puo' piu' sbordare sotto. */
        flex: 1 0 auto;
        min-height: max(140px, calc(46dvh - var(--mood-kb-offset, 0px)));
        margin-top: 12px;
    }
    #createPostModal.mood-writing #editorDisplay {
        flex: 1 1 auto;
        /* Pavimento di sicurezza: anche se una catena di contenitori non
           collaborasse, il testo resta grande (mai una riga sola). */
        min-height: max(140px, calc(46dvh - var(--mood-kb-offset, 0px)));
        max-height: none;
        overflow-y: auto;
    }
    /* La testata si assottiglia: piu' righe per il testo */
    #createPostModal.mood-writing .post-box { padding-top: 8px; }
    #createPostModal.mood-writing .post-box .header { margin-bottom: 0; }

    /* ---------- 2. La barra dei badge ---------- */
    /* La barra NON dipende piu' dalla modalita' scrittura: da quando ci stanno dentro anche
       Media, Video, Galia e Pubblica dev'essere visibile ogni volta che il modale e' aperto,
       altrimenti uscendo dal testo le azioni sparirebbero (regressione trovata dal controllo
       del 12/09/2026: "uscendo dal testo la riga azioni non torna"). Il modale chiuso le
       nasconde comunque, perche' sono dentro di lui. */
    #createPostModal .mood-write-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        position: relative;
        z-index: 5;
        width: 100%;
        margin: 0;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        /* Senza questo, l'aggancio (scroll-snap) porta la barra a scrollLeft 12px - cioe'
           pari al riempimento di sinistra - e il primo badge finisce a filo dello schermo,
           senza aria: misurato, scrollLeft esattamente 12. Cosi' l'aggancio rispetta il
           margine e il badge resta al suo posto. */
        scroll-padding-inline-start: 12px;
        -webkit-overflow-scrolling: touch;
        background: var(--mood-bg-card, #15152A);
        border-top: 1px solid var(--mood-border, #2A2A4A);
    }
    .mood-write-bar::-webkit-scrollbar { display: none; }

    /* ---------- 2b. Le azioni del composer, DENTRO la barra ----------
       Media, Video e Galia non stanno piu' in una riga a parte: in modalita' scrittura quella
       riga spariva e su telefono restavano solo i badge ("ho difficolta' a vedere i bottoni",
       utente 12/09/2026). composer-write.js le sposta qui. "Pubblica" invece sta nella
       testata del modale (2d), non in fondo.

       Restano FERME a destra mentre i badge scorrono: `position: sticky; right: 0` dentro
       il contenitore che scorre. Serve lo sfondo pieno della barra, altrimenti i badge
       passerebbero sotto le icone trasparenti. Il velo sfumato a sinistra dice che sotto
       c'e' altro da scorrere.

       `margin-left: auto` serve da quando "Pubblica" e' salita nella testata: i due casi sono
       diversi e vanno coperti tutti e due.
         - contenuto PIU' CORTO della barra (ora succede a 390px: badge 136px + azioni 128px su
           366 utili): l'aggancio non ha niente da trattenere, perche' il gruppo e' gia' dentro lo
           schermo, e senza il margine automatico resterebbe attaccato ai badge al centro -
           misurato: Galia a 300 su una barra che finisce a 390;
         - contenuto PIU' LUNGO (con le etichette, sopra i 420px): il margine automatico vale 0
           e a tenerlo a destra e' l'aggancio, come prima. */
    #createPostModal .mood-write-bar .options {
        position: sticky;
        right: 0;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        /* margine sinistro automatico: `margin` in forma breve lo annullerebbe */
        margin: 0 0 0 auto;
        padding: 0 0 0 12px;
        border: 0;
        background: var(--mood-bg-card, #15152A);
        box-shadow: -14px 0 14px -6px var(--mood-bg-card, #15152A);
    }
    #createPostModal .mood-write-bar .options .btn-icon {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        min-height: 0;          /* modals-mobile.css ne impone 44: qui la barra deve restare bassa */
        padding: 0;
        border-radius: 50%;
    }
    #createPostModal .mood-write-bar .options .btn-icon svg,
    #createPostModal .mood-write-bar .options .btn-icon i {
        width: 19px;
        height: 19px;
    }
    #createPostModal .mood-write-bar .options .galia-ai-btn {
        flex: 0 0 auto;
        width: auto;            /* mood.css, sotto i 380px, impone width:100%: qui stirerebbe */
        height: 40px;
        min-height: 0;
        padding: 0 11px;
        gap: 6px;
        font-size: 12.5px;
        display: flex;
        justify-content: center;
    }
    #createPostModal .mood-write-bar .options .galia-ai-btn svg,
    #createPostModal .mood-write-bar .options .galia-ai-btn i {
        width: 16px;
        height: 16px;
    }
    /* ---------- 2d. La testata: croce a sinistra, "Pubblica" a destra ----------
       Richiesta dell'utente (12/09/2026): "lo [Pubblica] togliamo dal basso per mobile ...
       mettiamo il bottone close a sinistra e a destra il bottone Pubblica, poi header come e'
       gia' ora". Prima la croce stava assoluta nell'angolo in alto a destra e Pubblica in
       fondo, schiacciata in mezzo a Media/Video/Galia in una riga sola su 390px.
       La testata e' il primo figlio di `.modal-content`, FUORI da `.modal-text` (il
       contenitore che scorre): cosi' resta ferma mentre il testo scorre.
       `margin-left: auto` su Pubblica e non `justify-content: space-between`: se per un
       guasto la croce non si spostasse, Pubblica resta comunque a destra. */
    #createPostModal .mood-write-top {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
        padding: 8px 12px;
        background: var(--mood-bg-card, #15152A);
        border-bottom: 1px solid var(--mood-border, #2A2A4A);
    }
    /* La croce non e' piu' assoluta: e' il primo elemento della testata, grande per il pollice */
    #createPostModal .mood-write-top .close {
        position: static;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    #createPostModal .mood-write-top .mood-btn-primary {
        flex: 0 0 auto;
        margin-left: auto;     /* a destra, qualunque cosa ci sia alla sua sinistra */
        width: auto;           /* il width:100% del telefono stretto non serve qui */
        height: 40px;
        min-height: 0;
        padding: 0 20px;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    /* L'angolo in alto a destra non deve piu' tenere libero il posto della croce: da quando la
       croce sta nella testata, quel rientro (mood-ui.css, `#createPostModal .post-box .header`,
       `padding: 0 42px 0 0`) toglieva 42px al selettore della privacy per niente. Stessa
       specificita' di quella regola e piu' in basso nel foglio, quindi vince. */
    #createPostModal .post-box .header { padding-right: 0; }

    /* ---------- 2c. Schermi stretti: badge con la sola icona ----------
       Le azioni agganciate a destra coprono cio' che sta sotto: con le etichette i badge
       occupavano 303px e Hashtag e Menziona restavano DIETRO "Media/Video" - invisibili e
       nemmeno toccabili (il tocco finiva sul pulsante che gli stava sopra: l'ha trovato il
       controllo automatico, non l'occhio). Senza etichette i tre badge occupano 132px e
       stanno tutti visibili insieme alle tre azioni (misurato a 390px: 358px su 366 utili).
       Sotto i 420px, dove lo spazio e' quello; sopra tornano le etichette.
       Il nome del badge resta: `aria-label` e `title` li scrive composer-write.js. Il
       pulsante Galia tiene il suo `title`, quindi si annuncia anche con la scritta nascosta. */
    @media (max-width: 419px) {
        .mood-write-bar .mood-write-badge {
            width: 40px;
            padding: 0;
            justify-content: center;
        }
        .mood-write-bar .mood-write-badge span { display: none; }
        .mood-write-bar .mood-write-badge svg,
        .mood-write-bar .mood-write-badge i { width: 19px; height: 19px; }
        #createPostModal .mood-write-bar .options .galia-ai-btn { padding: 0; width: 40px; }
        #createPostModal .mood-write-bar .options .galia-ai-btn span { display: none; }
    }

    .mood-write-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 12px;
        border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
        border-radius: 999px;
        background: var(--mood-surface-muted, rgba(0, 0, 0, 0.04));
        color: var(--mood-text, #222222);
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        scroll-snap-align: start;
        cursor: pointer;
    }
    .mood-write-badge svg, .mood-write-badge i { width: 16px; height: 16px; }
    .mood-write-badge:active,
    .mood-write-badge.is-on {
        background: var(--mood-primary-soft, rgba(108, 92, 231, 0.14));
        border-color: var(--mood-primary, #6C5CE7);
        color: var(--mood-primary, #6C5CE7);
    }

    /* ---------- 3. Il pannello del badge (elenco + ricerca + filtri) ----------
       Sta SOPRA la barra dei badge, non al posto suo: cosi' si passa da un badge
       all'altro senza chiudere il pannello (misurato: da assoluto in fondo
       copriva i badge e il tocco successivo finiva sull'elenco). */
    .mood-write-panel {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        max-height: 62%;
        display: flex;
        flex-direction: column;
        background: var(--mood-bg-card, #ffffff);
        border-top: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.32);
        overflow: hidden;
        animation: moodWriteUp 0.18s ease-out;
    }
    /* `hidden` deve nascondere davvero: la regola qui sopra, con display:flex,
       vincerebbe sul default del browser. */
    .mood-write-panel[hidden] { display: none !important; }
    @keyframes moodWriteUp {
        from { transform: translateY(14px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .mood-write-panel { animation: none; }
    }

    .mood-write-panel__head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px 8px;
    }
    .mood-write-panel__title {
        flex: 1 1 auto;
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--mood-text, #222222);
    }
    .mood-write-panel__close {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--mood-surface-muted, rgba(0, 0, 0, 0.06));
        color: var(--mood-text, #222222);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }
    .mood-write-panel__search {
        margin: 8px 14px 8px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
        border-radius: 999px;
        background: var(--mood-bg, #ffffff);
        color: var(--mood-text, #222222);
        font-size: 0.95rem;
    }
    .mood-write-panel__tabs {
        display: flex;
        gap: 8px;
        padding: 8px 14px 8px 14px;
        overflow-x: auto;
        scrollbar-width: none;
        min-height: 46px;
    }
    .mood-write-panel__tabs::-webkit-scrollbar { display: none; }
    .mood-write-tab {
        flex: 0 0 auto;
        display: flex;
        padding: 4px 12px;
        border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
        border-radius: 999px;
        background: transparent;
        color: var(--mood-text, #222222);
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        align-items: center;
    }
    .mood-write-tab.is-on {
        background: var(--mood-primary-soft, rgba(108, 92, 231, 0.14));
        border-color: var(--mood-primary, #6C5CE7);
        color: var(--mood-primary, #6C5CE7);
    }

    .mood-write-panel__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 4px 14px calc(16px + env(safe-area-inset-bottom));
    }

    .mood-write-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 8px 10px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--mood-text, #222222);
        font: inherit;
        font-size: 0.95rem;
        text-align: left;
        cursor: pointer;
    }
    .mood-write-item:hover,
    .mood-write-item:focus-visible { background: var(--mood-surface-muted, rgba(0, 0, 0, 0.05)); }
    /* L'avatar nelle voci puo' essere un'immagine O un video (.mp4): la regola deve
       valere per tutti e due, altrimenti il video resterebbe senza misura. */
    .mood-write-item img.mood-write-av,
    .mood-write-item video.mood-write-av {
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex: 0 0 auto;
        background: var(--mood-surface-muted, rgba(0, 0, 0, 0.06));
    }
    .mood-write-item__txt { min-width: 0; }
    .mood-write-item__txt strong { display: block; font-weight: 700; }
    .mood-write-item__txt em {
        display: block;
        font-style: normal;
        font-size: 0.85rem;
        opacity: 0.7;
    }
    .mood-write-empty {
        padding: 18px 4px;
        font-size: 0.92rem;
        opacity: 0.75;
        text-align: center;
    }

    /* Griglia emoji */
    .mood-write-emojis {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
    }
    .mood-write-emoji {
        min-height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }
    .mood-write-emoji:hover,
    .mood-write-emoji:focus-visible { background: var(--mood-surface-muted, rgba(0, 0, 0, 0.06)); }
    .mood-write-group {
        margin: 10px 4px 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0.6;
    }

    /* ---------- 4. I tasti del formato (01/10/2026) ----------
       Gli otto tasti arrivano da `feed.js` (`MoodFormato.formati`): la lista e' la stessa della bolla
       della scrivania, qui se ne veste la griglia. Le facce si distinguono come le scritte che fanno:
       B grassetto, I corsivo, U sottolineato, S barrato, </> codice, H1 H2 H3 titoli. */
    .mood-write-nota {
        margin: 2px 4px 10px;
        font-size: 12.5px;
        line-height: 1.45;
        opacity: 0.75;
    }
    .mood-write-formato-griglia {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .mood-write-formato {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;             /* dito, non puntatore: la stessa misura delle voci degli elenchi */
        padding: 6px 10px;
        border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
        border-radius: 12px;
        background: var(--mood-surface-muted, rgba(0, 0, 0, 0.04));
        color: var(--mood-text, #222222);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .mood-write-formato:active { background: var(--mood-primary-soft, rgba(108, 92, 231, 0.14)); }
    .mood-write-formato__faccia {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--mood-bg-card, #ffffff);
        font-size: 0.95rem;
        font-weight: 700;
    }
    .mood-write-formato__nome { flex: 1 1 auto; font-size: 13px; font-weight: 600; }
    .mood-write-formato__faccia[data-faccia="Grassetto"] { font-weight: 800; }
    .mood-write-formato__faccia[data-faccia="Corsivo"] { font-style: italic; }
    .mood-write-formato__faccia[data-faccia="Sottolineato"] { text-decoration: underline; }
    .mood-write-formato__faccia[data-faccia="Barrato"] { text-decoration: line-through; }
    .mood-write-formato__faccia[data-faccia="Titolo 1"] { font-size: 1.1rem; }
    .mood-write-formato__faccia[data-faccia="Titolo 2"] { font-size: 1rem; }
    .mood-write-formato__faccia[data-faccia="Titolo 3"] { font-size: 0.9rem; }
    .mood-write-formato__faccia[data-faccia="Codice"] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.78rem;
    }
}

/* ============================================================================
   LA BOLLA DEL FORMATO: LE FACCE NUOVE E LA RIGA CHE NON SBORDA (01/10/2026)

   La bolla la crea `feed.js` (`creaBollaFormato`) e il suo vestito sta in `mood.css` (li' e' nata il
   01/10/2026 con quattro tasti: grassetto, corsivo, barrato, codice). Qui ci sono SOLO le cose aggiunte
   quel giorno — sottolineato, i tre titoli e la riga che va a capo invece di uscire dallo schermo — e
   stanno in QUESTO foglio per la stessa ragione delle regole dell'anteprima: `mood.css` viene riscritto
   da fuori (una correzione messa li' il 30/09 e' sparita la sera stessa), questo no.

   Perche' la riga va a capo: i tasti sono passati da quattro a otto. Misurato a 390px: quattro tasti
   occupano 161px di bolla; con otto si arriva a ~300px, che con i soli 8px di margine ci sta ancora, ma
   su uno schermo piu' stretto (o con i tasti ingranditi) la bolla usciva dallo schermo. Con `flex-wrap`
   e il tetto di larghezza va a capo; `mostraBollaFormato` legge comunque la sua larghezza vera
   (`offsetWidth`), quindi il conto del posto resta giusto anche su due righe. */
.mood-formato-bolla {
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 16px);
    /* SOPRA IL COMPOSITORE (01/10/2026). Il modale del compositore ha `z-index: 500` (`mood.css`,
       `.modale-uri`) e la bolla nasceva con 60 (`mood.css`, il suo blocco): con 60 la bolla si VEDEVA ma
       non si poteva toccare — il tocco finiva sul modale. Misurato dal controllo automatico sul sito
       vero: «#createPostModal intercepts pointer events», click sulla «B» impossibile da scrivania (dal
       telefono il problema non si vedeva perche' li' i tasti stanno nella barra del compositore). Adesso
       sta sopra al modale e sotto gli avvisi che devono coprire tutto (1000). */
    z-index: 600;
}
.mood-formato-btn[data-formato="Sottolineato"] { text-decoration: underline; }
/* I titoli si distinguono per misura, come nel testo reso: H1 piu' grande di H2, H2 di H3. */
.mood-formato-btn[data-formato="Titolo 1"] { font-size: 1.1rem; }
.mood-formato-btn[data-formato="Titolo 2"] { font-size: 1rem; }
.mood-formato-btn[data-formato="Titolo 3"] { font-size: 0.92rem; }