/* ==========================================================================
   COMMENTI - LE AZIONI DELL'AUTORE (modificare, togliere) E LE TRACCE VISIBILI
   --------------------------------------------------------------------------
   File a parte, come mood-reazioni.css e per la stessa ragione: sono regole che
   devono esserci SEMPRE, e nessuna riscrittura di un foglio generale deve poterle
   portare via. Richiesta del titolare (16/09/2026): "l'autore del commento non puo'
   eliminarlo ... o modificarlo ... deve avere la possibilita' di poter togliere e
   eliminare ... a lato admin deve essere tutto tracciato per segnalazioni".
   ========================================================================== */

.mood-comment { position: relative; }

/* Il menu "...": in alto a destra del commento, discreto ma sempre presente - sul
   telefono non esiste l'hover, e un'azione che si vede solo col mouse non esiste. */
.mood-comment-azioni {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.mood-comment-menu { position: relative; display: inline-flex; }
.mood-comment-menu-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mood-text-muted, #9a9ab0);
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.mood-comment-menu-btn:hover,
.mood-comment-menu.is-open .mood-comment-menu-btn {
    background: rgba(255, 255, 255, .08);
    color: var(--mood-text, #e6e6f0);
}
.mood-comment-menu-pannello {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    min-width: 148px;
    padding: 4px;
    border-radius: 12px;
    background: var(--mood-bg-card, #15152a);
    border: 1px solid var(--mood-border, #2a2a4a);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.mood-comment-menu.is-open .mood-comment-menu-pannello { display: flex; }
.mood-comment-menu-pannello button {
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}
.mood-comment-menu-pannello button:hover { background: rgba(255, 255, 255, .07); }
.mood-comment-menu-pannello button[data-azione="elimina"] { color: #ff6b6b; }

/* "modificato" accanto all'ora: discreto, ma c'e' - chi legge sa che il testo e' cambiato. */
.mood-comment-modificato {
    margin-left: 6px;
    font-size: .72rem;
    font-style: italic;
    color: var(--mood-text-muted, #9a9ab0);
}

/* Il commento tolto dall'autore: si vede CHE e' stato tolto, non COSA c'era scritto
   (quello resta nella storia, per il pannello e per le segnalazioni). */
.mood-comment--eliminato .mood-comment-body {
    font-style: italic;
    opacity: .85;
    color: var(--mood-text-muted, #9a9ab0);
}
.mood-comment--eliminato .mood-comment-header strong { opacity: .7; }

/* La modifica in linea: il testo diventa un campo, con Salva e Annulla. */
.mood-comment-modifica { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.mood-comment-modifica-campo {
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid var(--mood-border, #2a2a4a);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
}
.mood-comment-modifica-campo:focus { outline: 2px solid var(--mood-primary, #6C5CE7); outline-offset: 1px; }
.mood-comment-modifica-azioni { display: flex; gap: 8px; }
.mood-comment-errore { font-size: .78rem; color: #ff6b6b; }
.mood-comment-modifica-azioni { display: flex; gap: 8px; }
.mood-comment-errore { font-size: .78rem; color: #ff6b6b; }

/* ============================================================================
   TELEFONO — IL FOGLIO DEI COMMENTI NON DEVE RIDURSI A UNA FESSURA (22/09/2026)
   ----------------------------------------------------------------------------
   Il titolare: «ho aperto un post e cliccando qui non si aprono i commenti ...
   in mobile sono fuori schermo sotto, non accessibili».

   Misurato col browser vero, aprendo la pagina di un post con 4 commenti:
     - 390x844: il foglio dei commenti alto 89px (una fessura);
     - 360x640: alto 24px — praticamente invisibile;
     - e il primo tocco su «Commenti (4)» lo CHIUDEVA (era già aperto da solo: la
       pagina del post apre il visore con il foglio aperto), quindi sembrava che
       il tasto non facesse niente.

   Perché: `.post-modal-comments` ha `flex: 1` (`flex-basis: 0%`) dentro
   `.post-modal-aside-body`, che su telefono è alto al massimo `50dvh` e si porta
   già la testata, il testo del post, i pulsanti e il tasto dei commenti: al foglio
   resta la briciola. E siccome il foglio ha `overflow-y: auto`, non chiede spazio:
   si rimpicciolisce lui (è il minimo di contenuto di un contenitore che scorre).

   Qui su telefono il foglio prende l'altezza del suo contenuto, e a scorrere è il
   corpo del foglio (che ha già `overflow-y: auto`): i commenti si leggono tutti.
   Vale solo per il visore compatto (`#lightbox.lb-compact`), quindi la
   disposizione da scrivania non cambia. Il tocco su «Commenti» li porta anche in
   vista (`portaCommentiInVista`, in feed.js e profile.js).
   ========================================================================== */
#lightbox.lb-compact .post-modal-aside.comments-open .post-modal-comments {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
}

/* ============================================================================
   LA RIGA DEI COMANDI DEL COMMENTO: LA LARGHEZZA LA DECIDE LA CARD (22/09/2026)
   ----------------------------------------------------------------------------
   Il titolare ha segnalato questa riga, nella sua copia di `mood.css`:

       .mood-comment-meta { ... width: max-content; }

   Con `width: max-content` la riga dei comandi (ora · reazioni · Rispondi · ⋯) si STRINGE al suo
   contenuto: «Rispondi» finisce appiccicato alle reazioni e la riga non arriva più a filo della card.

   MISURATO col browser vero (regola del titolare: mai a occhio), telefono 390x844, commento con tre
   reazioni (le tre iconcine più larghe):
       com'è adesso ......... riga 334px su card 358px · «Rispondi» a 362 (dentro 374, a filo) · niente esce
       con `max-content` ... riga 238px · «Rispondi» a 266: appiccicato alle reazioni, riga che non riempie

   Qui si scrive l'intenzione invece di lasciarla al caso: la larghezza la decide la card, e se proprio
   non ci sta tutto la riga va a capo (`flex-wrap`) — prima usciva dalla card. Non si tocca `mood.css`
   perché quel foglio viene ricaricato dall'esterno e si porterebbe via la correzione (è già successo
   due volte, vedi `docs/COSA_FATTO.md`).

   Il selettore `.mood-comment .mood-comment-meta` è più specifico di `.mood-comment-meta`: vince anche
   se un altro foglio scrive `width: max-content` più tardi, senza bisogno di `!important`.
   ========================================================================== */
.mood-comment .mood-comment-meta,
.mood-comment-meta {
    width: auto;          /* non `max-content`: è la card a decidere quanto è larga */
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;      /* con poco spazio si va a capo, non fuori dalla card */
    row-gap: 6px;
}