/* ===============================
   Mood - Feed: rifiniture "vivaci" (Tappa 1)
   (public/assets/css/feed-vivace.css)

   Caricato DOPO gli altri fogli del feed (mood.css, feed-legacy.css,
   mood-app.css, stories.css, mood-ui.css): qui si rifinisce l'aspetto, senza
   toccare il comportamento (nessuna regola su misure che il JS calcola).

   Perche' esiste: il feed funziona ma e' tutto piatto - grigio su grigio, bordo
   sottile, nessuna gerarchia. Qui prende il linguaggio del marchio: gradiente
   viola -> ciano, pillole per le azioni, card tonde con ombra leggera.

   Tema: i colori vengono dai token del sito (--mood-bg, --mood-bg-card,
   --mood-border, --mood-text, --mood-primary, --mood-accent), quindi vale sia in
   tema chiaro sia in tema scuro. Le poche tinte fisse sono rgba a bassa
   opacita', leggibili su entrambi.
   ============================= */

/* ---------- 1. Il composer "Cosa stai pensando?" -------------------------- */
#callPost {
    position: relative;
    border: 1px solid var(--mood-border);
    box-shadow: 0 6px 22px rgba(16, 16, 36, .07);
    overflow: hidden;
}

/* filo di gradiente in cima al composer */
#callPost::before {
    /*
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mood-primary), var(--mood-accent));
    */
}

.start-post .avatar {
    padding: 2px;                                   /* anello del marchio */
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
}

.start-post .avatar img,
.start-post .avatar video {
    border: 2px solid var(--mood-bg-card);
}

#callPostBtn {
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    background: var(--mood-bg);
    color: var(--mood-text-muted);
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

#callPostBtn:hover {
    border-color: var(--mood-primary);
    color: var(--mood-text);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, .12);
}

/* Le cinque azioni del composer diventano pillole con il loro colore. */
.start-post .cell:last-child {
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid var(--mood-border);
}

.start-post .cell:last-child > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--mood-bg);
    transition: transform .15s ease, background .15s ease;
}

.start-post .cell:last-child > span:hover { transform: translateY(-2px); }
.start-post .cell:last-child > span svg { width: 18px; height: 18px; }

/* un colore per azione (id: vince sulle regole generiche del composer) */
#videoTrigger                    { color: #e94f6d; background: rgba(233, 79, 109, .12); }
#videoTrigger:hover              { background: rgba(233, 79, 109, .2); }
#videoTrigger svg                {color: #e94f6d;width: 16px;height: 16px;}
#photoTrigger                    { color: #128f86; background: rgba(0, 206, 201, .14); }
#photoTrigger:hover              { background: rgba(0, 206, 201, .22); }
#photoTrigger svg                { color: #128f86; }
#articleTrigger                  { color: #5566d6; background: rgba(85, 102, 214, .12); }
#articleTrigger:hover            { background: rgba(85, 102, 214, .2); }
#articleTrigger svg              {color: #5566d6;width: 18px;height: 18px;}
#clipTrigger                     { color: #b96a1e; background: rgba(247, 147, 30, .16); }
#clipTrigger:hover               { background: rgba(247, 147, 30, .24); }
#clipTrigger svg                 { color: #b96a1e; }
#storyTrigger                    { color: #7b4bd6; background: rgba(123, 75, 214, .14); }
#storyTrigger:hover              { background: rgba(123, 75, 214, .22); }
#storyTrigger svg                { color: #7b4bd6; }

/* In tema scuro le stesse tinte sono troppo cupo su fondo scuro: si schiariscono.
   (Misurato: senza queste righe la pillola "Storie" scendeva a 2.9:1, sotto la
   soglia leggibile.) */
[data-theme="dark"] #videoTrigger   { color: #ff8ba3; }
[data-theme="dark"] #photoTrigger   { color: #5fe3dc; }
[data-theme="dark"] #articleTrigger { color: #9fb0ff; }
[data-theme="dark"] #clipTrigger    { color: #ffb066; }
[data-theme="dark"] #storyTrigger   { color: #b9a1ff; }
[data-theme="dark"] #videoTrigger svg   { color: #ff8ba3; }
[data-theme="dark"] #photoTrigger svg   { color: #5fe3dc; }
[data-theme="dark"] #articleTrigger svg { color: #9fb0ff; }
[data-theme="dark"] #clipTrigger svg    { color: #ffb066; }
[data-theme="dark"] #storyTrigger svg   { color: #b9a1ff; }


/* ---------- 2. Il rail delle storie --------------------------------------- */
.story-rail {
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(16, 16, 36, .06);
    padding: 12px 24px 14px;
}

.story-rail .story-ring .ring-name { font-weight: 700; }

/* il riquadro "Crea storia": gradiente del marchio, tratteggio morbido */
.story-rail .add-ring .story-rect {
    border: 1px dashed rgba(108, 92, 231, .5);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(108, 92, 231, .14), rgba(0, 206, 201, .16));
}

.story-rail .add-ring .story-add-ico {
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
    color: #fff;
    border-radius: 50%;
}

.story-rail .add-ring .story-add-title { font-weight: 800; }
.story-rail .add-ring .story-add-sub { opacity: .8; }

.story-rail .story-scroll-arrow { box-shadow: 0 6px 16px rgba(16, 16, 36, .18); }

/* ---------- 3. Filtro "Solo contenuti AI" e riga di stato ---------------- */
.feed-ai-filterbar {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 2px 10px rgba(16, 16, 36, .05);
    width: fit-content;
    margin-left: auto;
}

.feed-status {
    display: block;
    width: fit-content;
    margin: 14px auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    color: var(--mood-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- 4. Le card dei post ------------------------------------------ */
.mood-post {
    border: 1px solid var(--mood-border);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(16, 16, 36, .06);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.mood-post:hover {
    border-color: rgba(108, 92, 231, .3);
    box-shadow: 0 14px 32px rgba(16, 16, 36, .1);
}

.mood-post-avatar {
    box-shadow: 0 0 0 2px var(--mood-bg-card), 0 0 0 4px rgba(108, 92, 231, .38);
}

.mood-post-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.mood-post-user .name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
}

.mood-post-user .name-text {
  overflow: hidden;
  text-overflow: ellipsis; /* fallback se il JS non gira */
  white-space: nowrap;
  min-width: 0;
}

.mood-post-user .privacy-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.mood-post-user .handle {
  /* IL NOME E L'HANDLE NON SI SFILANO A VICENDA (01/10/2026). Era `flex: 0 0 auto`: con un nome E un
     handle lunghi nessuno dei due cedeva, e la testata sforava fuori dalla scheda (sopra l'ora). Adesso
     cede l'handle — che si accorcia coi puntini (`mood.css`) — e il nome resta piu' lungo possibile. */
  flex: 0 1 auto;
  min-width: 0;
  color: #888;
  font-size: 0.9rem;
}
.mood-post-time {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mood-bg);
    color: var(--mood-text-muted);
    font-size: .74rem;
    font-weight: 600;
}

/* l'etichetta "Ripeti" come pastiglia del marchio */
.mood-repost-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(108, 92, 231, .12);
    color: var(--mood-primary-light, #A29BFE);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .03em;
}

/* il post citato: bordo del marchio a sinistra */
.mood-quote-card {
    border: 1px solid var(--gradient-post);
    border-left: 2px dashed  var(--base-blue);
    border-bottom: 1px dashed  var(--base-blue);
    border-radius: 16px;
    background: var(--mood-bg);
    overflow: hidden;
}

/* ---------- 5. Barra delle azioni del post ------------------------------- */
.mood-post-actions {
    border-top: 1px solid var(--mood-border);
    padding-top: 8px;
    gap: 6px;
}

.mood-action-btn {
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.mood-action-btn:hover {
    background: rgba(108, 92, 231, .1);
    color: var(--mood-primary-light, #A29BFE);
    transform: translateY(-1px);
}

.mood-action-btn.liked { background: rgba(108, 92, 231, .16); }

.mood-action-count {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mood-text-muted);
}

/* ---------- 6. Telefono -------------------------------------------------- */
@media (max-width: 800px) {
    .mood-container{
        padding-top: 0;
    }
    .start-post {
        margin: 0;
        padding: 0;
        width: 108%;
        margin-left: -4%;
        margin-right: -4%;
        }
    #callPost { margin: 0; border-radius: 1px; padding: 12px; }
    .start-post button {font-size: 0.75rem !important;}
    /* Un filo piu' piccolo del desktop, ma non sotto i 12px: su iPhone diventa
       faticoso da leggere. */
    .start-post #callPostBtn { font-size: .9rem; }

    /* Le azioni del composer scorrono di lato invece di andare a capo:
       la riga resta una sola e il composer non diventa alto. */
    .start-post .cell:last-child {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 8px;
        margin: 0 1px;
        padding: 12px 2px 12px 0;
    }

    .start-post .cell:last-child::-webkit-scrollbar { display: none; }
    .start-post .cell:last-child > span { flex: 0 0 auto; padding: 8px 12px; font-size: .8rem; }

    .story-rail { border-radius: 16px; padding: 10px 12px 12px; }
    .mood-post { border-radius: 16px; }
    .mood-quote-card { border-radius: 14px; }
    .feed-status { margin: 12px auto; font-size: .72rem; }
    .mood-action-btn { padding: 8px 10px; }
}

/* ---------- 7. Movimento (solo se il sistema lo consente) ---------------- */
@media (prefers-reduced-motion: reduce) {
    .start-post .cell:last-child > span:hover,
    .mood-action-btn:hover { transform: none; }
    .mood-post { transition: none; }
}


/* ---------- 8. Composer agganciato in alto che si riduce scorrendo ------ */
/*
   Richiesta dell'utente (12/09/2026): "si agganciato in alto... mentre scorro il feed si
   riduce e appare icona o ancora... su desktop anche ma su mobile deve essere un blocco
   alto tipo sticky... ottimizzato come fanno nei social".

   Come funziona: `.start-post` (che contiene il riquadro) diventa `sticky` sotto la
   testata, che e' gia' `sticky` a `top: 0` - quindi il riquadro resta appeso mentre si
   scorre il feed. La quota la scrive feed.js in `--mood-composer-top` (l'altezza VERA
   della testata: 41px su telefono, 65px a 1440px), perche' un numero scritto qui si
   sfalserebbe al primo cambio di misure della barra.
   Quando il riquadro raggiunge la testata, feed.js mette `.mood-composer-pinned` su
   <html>: la riga delle azioni si richiude con una transizione (non uno scatto), il
   riquadro prende la forma di una pillola con l'icona della penna e resta li'; scorrendo
   in su torna com'era.
   Questo blocco sta DOPO la sezione 6 di proposito: le sue regole devono vincere su
   quelle pensate per il telefono.

   Nota per chi mette mano qui: NON si toglie il riquadro dal flusso (`position:
   absolute`) per "recuperare spazio". E' quello che e' stato provato il 12/09 e faceva
   saltare il feed di ~140px di colpo (misurato: 171px in un solo passo) e riaccendeva
   lo sfarfallio; peggio, con il riquadro fuori dal flusso la fascia perde l'altezza e
   tornando in cima il riquadro restava richiuso per sempre (la condizione di aggancio
   non si ribaltava piu'). Lo spazio si recupera con margini e riempimenti (sezione 6),
   restando nel flusso.
*/
.start-post {
    position: sticky;
    top: var(--mood-composer-top, 41px);
    z-index: 60;                    /* sopra i post (statici), sotto la testata (100) */
    /* La fascia trasparente ai lati del riquadro non deve rubare i tocchi al feed che
       scorre sotto: il riquadro se li riprende da se', riga qui sotto. */
    pointer-events: none;
}

/* Righello vuoto che feed.js mette subito sopra la fascia: serve a sapere dove sta il
   riquadro nel documento anche quando e' agganciato (la fascia e' `sticky`, quindi la sua
   posizione a schermo e' incollata alla testata e non direbbe piu' dov'e' nel documento). */
.mood-composer-righello { height: 0; }

/* Usata da feed.js per misurare con le transizioni SPENTE: una misura presa mentre
   un'animazione e' in corso e' sbagliata (e su iPhone l'indirizzo che si nasconde fa
   scattare un `resize` a ogni scorrimento, quindi succedeva davvero). */
html.mood-composer-misura,
html.mood-composer-misura .start-post,
html.mood-composer-misura .start-post * { transition: none !important; }

/* Il contenitore del feed non fa da "ancora" allo scorrimento: quando il riquadro si
   richiude il browser non deve spostare di suo la pagina per tenere fermo il contenuto
   (lo faceva su Chrome, e con la posizione che cambia la condizione di aggancio si
   ribaltava -> sfarfallio). Lo spostamento lo fa l'animazione, una volta sola. */
.mood-container { overflow-anchor: none; }
#callPost {
    pointer-events: auto;
    transition: margin .24s ease, padding .24s ease, box-shadow .24s ease;
}
/* L'icona della penna: a riposo `display:none` la nasconde e la toglie dall'ordine di
   tabulazione (e' decorazione: l'ha gia' annunciata `aria-hidden`). */
.start-post .call-post-ico { display: none; }

/* La riga delle azioni ha una quota massima per poter essere richiusa con una
   transizione: `max-height` non si anima partendo da `none`. La quota esatta la scrive
   feed.js in `--mood-composer-row` (misurata a riposo): il ripiego vale per chi ha
   JavaScript spento, dove il riquadro resta grande e non serve richiuderlo. */
.start-post .cell:last-child {
    max-height: var(--mood-composer-row, 120px);
    transition: max-height .24s ease, opacity .2s ease, padding .24s ease,
                margin .24s ease, border-color .24s ease;
}
/* Le misure dell'avatar si animano solo se dichiarate anche a riposo. */
.start-post .avatar,
.start-post .avatar img,
.start-post .avatar video {
    transition: width .24s ease, height .24s ease, min-width .24s ease, margin .24s ease;
}
/* ---- da ridotto: pillola agganciata sotto la testata --------------------- */
.mood-composer-pinned #callPost {
    margin-top: 0;                  /* niente fascia vuota fra testata e pillola */
    padding: 8px 20px;
    box-shadow: 0 10px 26px rgba(16, 16, 36, .16);
    border-radius: 5px;
}
.mood-composer-pinned .start-post .cell {padding: 0;max-width: 100%;}
.mood-composer-pinned .start-post .avatar,
.mood-composer-pinned .start-post .avatar img,
.mood-composer-pinned .start-post .avatar video { width: 32px; height: 32px; min-width: 32px; }
.mood-composer-pinned .start-post button { padding: 9px 14px; font-size: .85rem; }
.mood-composer-pinned .start-post .call-post-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
}
.mood-composer-pinned .start-post .call-post-ico svg { width: 18px; height: 18px; }
.mood-composer-pinned .start-post .cell:last-child {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    border-top-color: transparent;
}
/* Chi ha chiesto meno movimento non deve vedere la richiusura animata. */
@media (prefers-reduced-motion: reduce) {
    #callPost,
    .start-post .cell:last-child,
    .start-post .avatar,
    .start-post .avatar img,
    .start-post .avatar video { transition: none; }
}

/* ---------- 9. Telefono: la fascia del composer non c'e' ------------------ */
/*
   Richiesta dell'utente (12/09/2026): "su mobile mainwin non e' piu' visibile ... cosi'
   eliminiamo il problema dello sfarfallio e recuperiamo spazio. mainwin appare cliccando
   su [l']icon[a] +".

   Sotto i 720px (la stessa soglia della barra in basso, che e' dove sta il "+") la fascia
   esce dal feed. Due conseguenze volute:
     - si recuperano ~153px in cima al feed (la fascia era alta 153px a riposo);
     - l'aggancio che si riduce scorrendo - su telefono la parte piu' fragile, perche' li' la
       fascia e' a filo della testata e si richiude al primo pixel di scorrimento - non ha
       piu' niente da agganciare: lo sfarfallio non puo' piu' succedere.
   Il composer resta quello che era: si apre dal "+" della barra in basso (`#appNewPostBtn`,
   app-nav.js) e diventa il modale a tutto schermo di modals-mobile.css.

   Il CSS da solo non basta: con la fascia alta 0 la logica di aggancio leggerebbe misure
   vuote (una soglia a 0 la farebbe credere sempre in cima), quindi feed.js si spegne da se'
   quando la fascia non e' visibile - `misuraQuote()` e `aggiorna()` guardano `offsetHeight`.

   Le regole della sezione 8 restano valide e sono quelle che contano da scrivania, dove la
   fascia c'e' ancora: questo blocco sta dopo di loro proprio per vincere sotto i 720px.
*/
@media (max-width: 720px) {
    /* `!important` non e' pigrizia: `.start-post` e' dichiarato `display: flex !important` in
       feed-legacy.css (riga 395), che vince per `!important` e non per ordine. Senza, la
       fascia resterebbe in pagina e l'aggancio continuerebbe ad accendersi. */
    .start-post { display: none !important; }
}

/* ---------- 9. Barra azioni compatta (telefono) --------------------------- */
/* A 390px i sette pulsanti del post non stanno in una riga: il padding 8px/12px
   di questa stessa scheda li allarga (~60px a pulsante) e la barra, che ha
   `overflow-x: auto` da mood-ui.css, scorre di lato: gli ultimi - Insight e
   Visualizzazioni - restavano fuori dallo schermo ("ci sono troppi bottoni
   sfora", titolare 30/09/2026).
   Sotto i 520px la barra porta i PRIMI TRE - Mi piace, Ripeti, Commenta - e il
   resto entra nel foglio "..." costruito da `comprimiBarraAzioni` (feed.js), che
   riprende le classi dei tre puntini del post: su telefono una LASTRA in basso
   (sezione 9b). Da scrivania non cambia niente: sta tutto qui dentro. */
/* ---------- 9b. Il foglio «Altre azioni»: una LASTRA, non un muro ---------
   MISURATO il 01/10/2026 a 390x844, con quattro azioni nel foglio (Salva,
   Condividi, Visualizzazioni, Insight): il foglio era alto e largo come lo
   schermo (390x844, `position: fixed; inset: 0`, raggio 0) e ogni voce era alta
   190px — quattro righe sparse su tutto lo schermo, l'icona a filo del bordo
   sinistro e il testo schiacciato a destra, in una scatola di 40px.
   Due eredita' sbagliate, tutte e due di classi condivise:
     1. il foglio nasceva con la classe `.mood-post-options-menu`, che sotto gli
        800px (mood-ui.css) vuol dire «foglio a tutto schermo»: giusto per i tre
        puntini della testata (Info, Modifica, Elimina...), sbagliato per
        due-quattro azioni. Adesso quella classe non c'e' piu' (feed.js) e la
        lastra e' questa;
     2. `.mood-action-btn` sotto i 520px e' `flex: 1 1 0` con `height: 36px`
        (mood-ui.css: serve a spartire la riga fra le azioni) e
        `.mood-dropdown-menu button` e' 40x40 (mood.css): dentro un foglio
        `display: flex; flex-direction: column` alto quanto lo schermo, ogni voce
        CRESCEVA fino a un quarto di schermo ed era larga 40px. Qui si riprende
        la misura: voce larga quanto la lastra, alta 52px, che NON cresce.

   Le voci si leggono come su Telegram e Facebook: icona, NOME, numero.
   L'ordine lo mette feed.js (infila l'etichetta PRIMA del numero); `order` qui
   sotto e' la rete di sicurezza per una copia vecchia di feed.js rimasta nella
   cache del telefono. Prima il numero aveva `margin-left: auto` ed era anche
   prima dell'etichetta: spingeva il testo a destra — «le voci sono schiacciate
   a destra» (titolare, 01/10/2026). */
@media (max-width: 520px) {
    .mood-azioni-altro-wrap {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }
    .mood-azioni-altro-wrap .mood-azioni-altro-btn { padding: 0 10px; }

    /* La lastra: appoggiata in basso, mai piu' alta del 70% dello schermo, e
       alta quanto le sue voci (l'altezza la decide il contenuto, non il
       viewport come nel foglio a tutto schermo). */
    .mood-dropdown-menu.mood-azioni-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        max-height: 70vh;
        padding: 0 0 calc(10px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        background: var(--mood-bg-card, #15152a);
        box-shadow: 0 -14px 40px rgba(0, 0, 0, .45);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
    }
    /* La testata («Altre azioni» + la X) e' la stessa dei fogli del sito: la
       mostra mood-ui.css dentro `.mood-post-options-menu`, qui la mostra questa
       regola, perche' quella classe il foglio non ce l'ha piu'. */
    .mood-dropdown-menu.mood-azioni-menu .mood-menu-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px 10px;
        border-bottom: 1px solid var(--mood-border, #2a2a4a);
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-menu-sheet-title {
        font-size: .95rem;
        font-weight: 700;
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-menu-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin: -8px -8px -8px 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
        touch-action: manipulation;
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-menu-sheet-close:hover {
        background: var(--mood-bg-hover, #1e1e3a);
    }

    /* Una voce: riga da dito, larga quanto la lastra, che NON cresce. */
    .mood-dropdown-menu.mood-azioni-menu .mood-azione-in-menu {
        width: 100%;
        min-width: 0;
        height: 52px;
        box-sizing: border-box;
        flex: 0 0 auto;
        padding: 0 16px;
        gap: 12px;
        justify-content: flex-start;
        border-radius: 12px;
        text-align: left;
        font-size: .95rem;
        font-weight: 600;
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-azione-in-menu svg,
    .mood-dropdown-menu.mood-azioni-menu .mood-azione-in-menu i[data-lucide] {
        width: 20px;
        height: 20px;
        padding: 0;
        flex: 0 0 auto;
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-azione-etichetta {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }
    .mood-dropdown-menu.mood-azioni-menu .mood-action-count {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
        font-size: .85rem;
    }
}

/* ---------- 10. Un media che non c'e' (01/10/2026) -------------------------
   Le immagini della scheda si disegnano come `background-image`: quando il file
   risponde, si vede; quando non c'e' (misurato: il jpg del post #88), la cella
   restava un rettangolo vuoto e sembrava un post senza foto. `sorvegliaMedia()`
   in feed.js prova la variante, poi l'originale, e se non c'e' nessuno dei due
   aggiunge `.mood-media-missing`: qui quella cella ha un fondo neutro e la scritta
   «Media non disponibile», cioe' una spiegazione al posto del buco.
   La misura minima e' quella delle altre celle (vedi .imgGridSingle in
   feed-legacy.css): cosi' il riquadro non si sgonfia e la pagina non salta. */
.imgGridSingle.mood-media-missing {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.mood-media-missing-nota {
    color: #9aa0b5;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    padding: 0 12px;
}