/* ============================================================
   Spoilery — assets/css/comments.css
   Cartella: /assets/css/
   Commenti: pagina del post e riquadro sotto le schede dei post
   (come su Facebook, assets/js/comments.js). La barra fissa in basso
   della pagina del post è in assets/css/pages/post.css.
   ============================================================ */

/* ---------- Elenco ---------- */
.st-comments { margin-top: 1.5rem; }
.st-comments-title { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: 1rem; }
.st-comments-total { padding: 0 .45rem; border-radius: 999px; background: var(--st-raised); font-size: .75rem; line-height: 1.6; }
.st-comments-empty { padding: 1.5rem 0; color: var(--st-muted); text-align: center; }
.st-comments-more { padding: .25rem 0 1rem; }
/* "Visualizza altri commenti (N)": riga con trattino, come nelle app social */
.st-comments-more-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 44px;
    padding: 0 0 0 .3rem;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
}
.st-comments-more-btn:hover { color: var(--st-text); }
.st-comments-more-btn[hidden] { display: none; }
/* "Visualizza altre risposte (N)": allineato alle risposte */
.st-replies-more {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 40px;
    margin: -.2rem 0 .4rem 2.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: .84rem;
    font-weight: 700;
}
.st-replies-more:hover { color: var(--st-text); }
.st-replies-more[hidden] { display: none; }
.st-replies-more .st-more-line { width: 22px; }
.st-more-line { width: 28px; height: 1px; background: currentColor; flex-shrink: 0; }

.st-comment-list,
.st-replies { margin: 0; padding: 0; list-style: none; }
.st-comment { margin-bottom: .9rem; }
.st-replies { margin-top: .6rem; padding-left: 2.6rem; }
.st-replies:empty { display: none; }
.st-comment.is-reply { margin-bottom: .6rem; }

.st-comment-row { display: flex; gap: .6rem; align-items: flex-start; }
.st-comment-avatar { flex-shrink: 0; line-height: 0; }
.st-comment-main { min-width: 0; flex: 1 1 auto; }
/* Fumetto e menu ⋯ affiancati: i puntini stanno a destra, in alto, allineati al nome */
.st-comment-top { display: flex; align-items: flex-start; gap: .15rem; max-width: 100%; }
.st-comment-top > .st-comment-bubble { min-width: 0; }
/* in modifica: il fumetto prende tutta la larghezza e i puntini si nascondono */
.st-comment-top > .st-comment-bubble:has(textarea) { flex: 1 1 auto; }
.st-comment-top:has(textarea) > .st-comment-menu { display: none; }
.st-comment-top > .st-comment-bubble .st-edit { min-width: 0; }   /* la larghezza la dà già il fumetto */
.st-comment-top > .st-comment-menu { flex-shrink: 0; margin-top: .3rem; }
.st-comment-bubble {
    display: inline-block;
    max-width: 100%;
    padding: .55rem .85rem;
    border-radius: 4px var(--st-radius) var(--st-radius) var(--st-radius);
    background: var(--st-surface);
    border: 1px solid var(--st-line);
}
.st-comment-head { display: flex; align-items: center; gap: .45rem; }
.st-comment-name { color: var(--st-text); font-weight: 700; font-size: .9rem; text-decoration: none; }
.st-comment-badge { padding: 0 .4rem; border-radius: 4px; background: rgba(218, 9, 21, .15); color: var(--st-accent-hi); font-size: .68rem; font-weight: 700; }
.st-comment-body { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Traduzione dentro il fumetto del commento (stile base in assets/css/posts.css) */
.st-comment-bubble .st-post-tr { margin-top: .15rem; font-size: .78rem; }
.st-comment-bubble .st-post-tr-btn { min-height: 28px; }
.st-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .9rem; padding: .25rem .5rem 0; color: var(--st-muted); font-size: .78rem; }
.st-comment-actions > * { white-space: nowrap; }   /* "2 minuti fa", "Mi piace": mai spezzati su più righe */
.st-comment-actions > button { min-height: 32px; padding: 0; border: 0; background: none; color: var(--st-muted); font-weight: 700; }
.st-comment-more { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--st-muted); }
.st-comment-actions > button:hover,
.st-comment-more:hover, .st-comment-more[aria-expanded="true"] { color: var(--st-text); }
.st-comment-more { font-size: 1rem; line-height: 1; }
.st-comment-more:hover, .st-comment-more[aria-expanded="true"] { background: var(--st-raised); }
.st-comment-menu .dropdown-menu { font-size: .9rem; }
@media (max-width: 400px) { .st-comment-actions { gap: 0 .7rem; } }
.st-comment-deleted { color: var(--st-muted); font-style: italic; font-size: .88rem; padding: .3rem 0; }
.st-comment.is-highlight > .st-comment-row .st-comment-bubble { border-color: var(--st-accent); }

/* Ospiti */
.st-postpage-guest {
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-surface);
    text-align: center;
}
.st-postpage-guest img { margin-bottom: .75rem; }
.st-postpage-guest h3 { font-size: 1.2rem; }
.st-postpage-guest p { color: var(--st-muted); max-width: 40ch; margin: .25rem auto 1rem; }
.st-postpage-guest-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Barra per scrivere ---------- */
.st-comment-form { background: transparent; }
.st-comment-form-row { display: flex; align-items: flex-end; gap: .5rem; }
.st-comment-form-row .st-avatar { margin-bottom: 4px; }
.st-comment-form textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 140px;
    padding: .6rem .9rem;
    border-radius: 22px;
    resize: none;
    background-color: var(--st-surface);
    overflow-y: hidden;          /* nessuna barra mentre il campo cresce */
    scrollbar-width: none;       /* testo lunghissimo: si scorre col dito, barra nascosta */
}
.st-comment-form textarea::-webkit-scrollbar { display: none; }
.st-comment-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    font-size: 1.05rem;
}
.st-comment-send:disabled { background: var(--st-raised); color: var(--st-muted); }
.st-comment-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
    color: var(--st-accent-hi);
    font-size: .82rem;
    font-weight: 600;
}
.st-comment-replying .st-icon-btn { width: 32px; height: 32px; font-size: 1.1rem; }

/* Reazioni ai commenti (stesso menu dei post, in piccolo; comportamento in assets/js/posts.js) */
.st-comment-bubble { position: relative; }
.st-comment-bubble:has(.st-comment-react-sum:not(.d-none)) { margin-bottom: .45rem; }
.st-comment-react-sum {
    position: absolute;
    right: -.6rem;
    bottom: -.85rem;
    margin: 0;
    padding: .1rem .4rem .1rem .3rem;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-raised);
    color: var(--st-muted);
    font-size: .75rem;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.st-comment-react-sum .st-react-stack .st-ico { width: 1.15em; height: 1.15em; }
.st-react--comment { display: inline-flex; }
.st-comment-actions .st-react--comment .st-react-btn {
    min-height: 32px; padding: 0; gap: 0; border-radius: 0; background: none; color: var(--st-muted); font-weight: 700; font-size: inherit;
}
.st-comment-actions .st-react--comment .st-react-btn:hover { color: var(--st-text); background: none; }
.st-comment-actions .st-react--comment .st-react-btn.is-on { color: var(--st-r, var(--st-text)); background: none; }
.st-react--comment .st-react-picker { bottom: calc(100% + 4px); left: -.5rem; }
.st-react--comment .st-react-opt { width: 42px; height: 42px; }
.st-react--comment .st-react-opt .st-ico { width: 28px; height: 28px; }

/* ============================================================
 *  RIQUADRO SOTTO LA SCHEDA DEL POST
 * ============================================================ */
.st-cpanel {
    margin: .35rem -1rem 0;
    padding: .8rem 1rem .6rem;
    border-top: 1px solid rgba(44, 44, 48, .7);
}
.st-cpanel[hidden] { display: none; }
.st-cpanel-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 0; color: var(--st-muted); font-size: .9rem; }
/* i fumetti hanno lo stesso colore della scheda: un tono più chiaro per staccarli */
.st-cpanel .st-comment-bubble { background: var(--st-raised); border-color: transparent; }
.st-cpanel .st-comments-empty { padding: .4rem 0 .8rem; font-size: .92rem; }
.st-cpanel .st-comments-more { padding: 0 0 .5rem; }
.st-cpanel .st-comments-more-btn { min-height: 40px; }
.st-cpanel .st-comment-form { padding-top: .2rem; }
.st-cpanel .st-comment-form textarea { background-color: var(--st-raised); border-color: transparent; }
.st-cpanel-guest { padding: .2rem 0 .5rem; text-align: center; }
.st-cpanel-guest p { margin: 0 auto .7rem; max-width: 42ch; color: var(--st-muted); font-size: .92rem; }
.st-cpanel-guest strong { color: var(--st-text); }
/* icona 💬 accesa mentre il riquadro è aperto */
.st-post-act[data-st-comments-toggle].is-on { color: var(--st-text); }
/* Post coperto: tocco su 💬 → la copertura "saluta" per far capire cosa fare */
.st-spoiler-cover.is-nudge { animation: st-nudge .5s ease; }
@keyframes st-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .st-spoiler-cover.is-nudge { animation: none; } }