.fadeIn { animation: fadeInAnimation 0.5s ease-in-out;
}

.post-box .header .user-info .privacy-label i { margin-left: 6px;
}

.post-box .header .user-info .privacy-label i { font-size: 14px; margin-right: 0.5rem; color: var(--text-color-light);
}

.drop-area .upload label { padding: 10px; text-align: center;
}

.post-box label.allowcomments { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 13px 23px; background: var(--tagify-dd-bg-color); justify-content: center; font-size: 17px;
}

.post-box label.scheduled { display: flex; gap: 10px; padding: 6px 23px; font-size: 17px; flex-wrap: wrap; flex-direction: row; align-items: center; background: var(--tagify-dd-bg-color);
}

#scheduledAt { width: max-content; background: transparent; padding: 7px 11px;
}

.post-box button {display: flex;width: max-content;padding: 0.3rem .7rem;border: none;border-radius: 6px;font-size: 0.7rem;cursor: pointer;transition: background 0.3s;align-items: center;justify-content: center;}

.post-box svg { width: 18px; height: 18px; min-width: 13px;
}

.post-box button:hover { background: var(--mood-bg-hover); color: var(--text-brown);
}

/* Icon font family for privacy icons */

[class^="ito-"],
[class*=" ito-"] { font-family: 'ito-icon-to5-essential' !important;
}

.link-preview .error { color: #249b3f; padding-left: 36px;
}

.link-preview .error::before { content: ''; font-size: 36px; font-family: 'ito-icon-to5-essential'; position: absolute; margin-top: -1px; left: 21px; top: auto; display: block; width: 20px; height: 20px; background-color: #2196f359; border: 2px dashed #eaeaea; border-radius: 50%; margin-bottom: 11px; animation: circleClose 10s cubic-bezier(0.55, 0.09, 0.68, 0.53) infinite, checkmarkAppear 1s 1s ease-in-out infinite;
}

.link-preview .error::after { content: '"\ee43"'; display: none; top: initial; left: 10px; font-size: 45px; color: var(--text-brown); position: absolute; opacity: 1; align-items: center; justify-content: center;
}

.loading-indicator { margin-top: 10px; color: #888;
}

.start-post button { box-sizing: border-box; margin: auto; display: flex; width: calc(100% - 50px); font-size: 16px; padding: 13px 20px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; color: var(--text-color); background: var(--background-color-alf-a); flex-direction: row; align-items: center; justify-content: flex-start;
}

.start-post button:hover { color: var(--text-color-hover); background: var(--background-color-alf-a-hover);
}

#periodicFeedPublic { position: relative; max-width: 600px; width: -webkit-fill-available;
}

/* Generale */

/* Avatar */

/* Informazioni utente */

/* Contenuto del post */

/* Gallery del post */

/* Media queries per gestire il layout su diversi dispositivi */

/* Griglia mobile */

/* Griglia desktop */

/* Galleria popup */

/* Stili per il Lightbox */

/* gallria box light */

#lightbox .lightbox-gallery .link-preview-post:last-child { display: none;
}

#lightbox .fullscreen-btn { position: absolute; bottom: 20px; right: 25px; cursor: pointer; color: var(--text-color-white); z-index: 1001;
}

#lightbox .fullscreen-btn:hover { color: var(--text-color-highlight);
}

#lightbox .fullscreen-btn:before { content: "\e989"; font-family: 'ito-icon-to5-essential'; font-size: 1.3rem;
}

/* Stili per i dettagli delle immagini, come titolo, autore, ecc. */

/* Footer del post */

/* Define heart animation */

/* Hover effects */

/* Commenti e like */

.post-header .post-details { grid-column: 3; justify-self: end;
}

.post-header .post-preferences { grid-column: 4; justify-self: end;
}

.post-header i:hover { color: var(--text-cyan);
}

.new-comment .inner-comment { position: absolute; display: flex; width: -webkit-fill-available; margin-top: -27px; margin-right: 10px; animation-fill-mode: forwards; justify-content: space-between; align-items: center;
}

.new-comment .inner-comment .enter { position: relative; padding: 4px;
}

.new-comment .inner-comment .enter:hover { color: var(--button-hover-background);
}

.new-comment .inner-comment.enter:before { content: "\fa1e"; display: block; position: relative; height: inherit; margin-right: -14px; margin-top: 24px;
}

/* fine Commenti e like */

/* Stile per i pulsanti */

.dialog { position: fixed; min-width: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--background-color); padding: 20px; border-radius: 5px; box-shadow: var(--box-shadow-30); z-index: 10000; display: none; text-align: center;
}

/* Container del menu a discesa */

/* Visualizzazione del menu quando visibile */

/* Singolo elemento del menu */

/* Stato hover dell'elemento del menu */

/* Ulteriore stile per migliorare l'aspetto del menu */

/* Menu a discesa - nascosto di default */

/* Mostra il menu a discesa quando viene aggiunta la classe show */

/* Stile degli elementi del menu */

/* Colore di sfondo al passaggio del mouse sugli elementi */

/* Posizionamento del container delle preferenze */

/* Stile dell'icona delle preferenze */

.ito-sun7 { font-size: 20px; color: #666; transition: color 0.2s ease;
}

.ito-sun7:hover { color: #333;
}

@media (max-width: 400px) {
    .post-box label.allowcomments { gap: 10px; padding: 8px 19px;}
    .post-box label.scheduled { gap: 10px; padding: 0px 19px;}
    /* Gestione dimensioni variabili delle immagini utilizzando CSS Grid e :nth-child */ .img-gallery .grid-container>.imgGridSingle:nth-child(1) { grid-column-end: span 2; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(2) { grid-column-end: span 3; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(3) { grid-column-end: span 3; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(4) { grid-column-end: span 2; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(5) { grid-column-end: span 1; grid-row-end: span 2;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(6) { grid-column-end: span 1; grid-row-end: span 1;}
}

/* Media queries per responsive design */

@media (min-width: 401px) {
    /* Gestione dimensioni variabili delle immagini utilizzando CSS Grid e :nth-child */ .img-gallery .grid-container>.imgGridSingle:nth-child(1) { grid-column-end: span 2; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(2) { grid-column-end: span 3; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(3) { grid-column-end: span 3; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(4) { grid-column-end: span 2; grid-row-end: span 1;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(5) { grid-column-end: span 1; grid-row-end: span 2;}
    .img-gallery .grid-container>.imgGridSingle:nth-child(6) { grid-column-end: span 1; grid-row-end: span 1;}
}

/* CSS per il preloader */

/* Feedback css */

.feedback section { min-height: 100%; height: 100%;
}

.feedback form { box-shadow: none; background: transparent;
}

.ask { position: sticky; display: flex; top: 70px; background: #f92fd5; color: white; padding: 9px; justify-content: flex-start;
}

.feedback { background: var(--background-card); display: flex; padding: 29px 43px; text-align: center; align-items: center; flex-direction: column; justify-content: space-around; margin-top: auto; min-height: 100%; max-width: -webkit-fill-available; margin-left: auto; margin-right: auto;
}

.feedback.message { position: sticky; display: block; margin: auto; padding: 1rem; top: 0; left: unset; background: var(--base-blue);
}

.feedback.message * { color: var(--white);
}

.feedback i { margin: auto 8px;
}

.feedback.message i { position: relative; display: flex; width: 70px; height: 70px; margin: 3px auto 23px; padding: 10px; font-size: xx-large; color: #2196f3; border-radius: 50%; background: #e8e8e8; flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap;
}

.feedback.message p { position: relative; display: block; margin: auto; padding: 0; top: unset; left: unset;
}

.feedback .keyword { margin-bottom: 1rem; margin-top: 1rem; display: block; font-size: 21px; font-weight: 400;
}

.feedback .keyword span { display: block; background: #ff6a9d; color: #fff; width: inherit; border-radius: 6px; padding: 9px 20px; word-break: break-word;
}

.feedback p { margin-bottom: 2rem; margin-top: 1rem; display: block;
}

/* Stile per il select */

.feedback select { width: 100%; padding: 10px; border: var(--border-input); border-radius: 5px; font-size: 16px; background-color: var(--background-color); appearance: none;
}

/* Stile per gli option all'interno del select */

.feedback select option { font-size: 16px; background-color: #fff; color: #333; padding: 10px;
}

/* Stile quando il select e' attivo (cliccato o in focus) */

.feedback select:focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.feedback textarea { margin: 0 10px 7px; min-height: 150px; width: -webkit-fill-available; padding: 1rem;
}

/* ============================================
/* MOOD LEGACY ADDON Gallery, Post-box, Lightbox, Embed */

Portato dal social originale /social/ (parità 1:1) ============================================ */ .fadeIn { animation: fadeInAnimation 0.5s ease-in-out;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#suggestionsLoader.hidden { display: none;
}

#suggestionsLoader { text-align: center; padding: 8px; position: absolute;
}

.alert-box-verify { display: flex; justify-content: center; align-items: center; padding: 1rem; margin-top: 3rem;
}

.post-box { margin: auto; background: var(--background-color); border-radius: 20px; padding: 15px; min-width: -webkit-fill-available; width: 100%; box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.1);
}

.post-box .header { display: flex; align-items: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; background: transparent; padding: 10px; border-radius: 10px;
}

.post-box .header img.avatar,
.post-box .header video.avatar { width: 45px; height: 45px; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 0px 2px #2196F3; object-fit: cover; background-position: center; background-size: cover;
}

.post-box .header .user-info { display: flex; flex-direction: column; align-items: flex-start;
}

.post-box .header .user-info span { font-size: 17px; color: var(--drop-menu-text-secondary); margin-bottom: 0.5rem;
}

.post-box .header .user-info .privacy-label { display: flex; align-items: center; font-size: 1rem; flex-direction: row-reverse;
}

.post-box .header .user-info .privacy-label select { padding: 3px 7px; border-radius: 5px; border: 1px solid #ccc; font-size: 12px; height: auto; margin: auto; display: block; min-width: auto;
}

.post-box textarea { width: 100%; height: auto; min-height: 80px; padding: 1rem; background: var(--background-color-alf-5); border: var(--background-card-border); border-radius: 10px; font-size: 14px; resize: vertical;
}

.post-box .options { margin: auto; display: flex; gap: 9px; flex-wrap: wrap; justify-content: space-between; align-items: center;
}

.post-box label { display: flex; font-size: 1rem; flex-direction: column;
}

.post-box select,
.post-box input[type="checkbox"],
.post-box input[type="datetime-local"] { padding: 0.5rem; border-radius: 5px; border: 1px solid #ccc; font-size: 1rem; margin-top: 0.5rem;
}

/* Link preview (embed) */

.link-preview { margin-top: 1rem; font-size: 1rem; color: var(--text-color);
}

.preview-content { display: flex; align-items: flex-start; border: var(--drop-menu-border-1); padding: 2px; border-radius: 5px; margin-top: 10px; background-color: var(--background-color); flex-direction: column;
}

.preview-content img { max-width: -webkit-fill-available; margin: 14px; margin-bottom: 10px; border-radius: 5px;
}

.preview-details { flex: 1; margin: auto 14px 15px 14px;
}

.preview-details h3 { margin: 0 0 5px 0; font-size: 19px;
}

.preview-details p { margin: 0 0 10px 0; font-size: 12px;
}

.preview-details a { color: #007bff; text-decoration: none; font-size: 13px;
}

.link-preview-post { clear: both; position: relative; display: flex; flex-direction: column; border: var(--drop-menu-border-1); margin-top: 1rem;
}

.link-preview-post .link-info { display: flex; position: relative; align-items: center;
}

.link-preview-post img.avatar { width: 30px; height: 30px; margin: 14px; margin-bottom: 10px; border-radius: 5px;
}

.link-preview-post img { margin: 0; margin-bottom: 10px; border-radius: 0; width: -webkit-fill-available; border-top: var(--drop-menu-border-1); border-bottom: var(--drop-menu-border-1);
}

.link-preview-post .link-title:not(img) { padding: 0px 12px 0px 12px; color: var(--text-color); font-weight: bold;
}

.link-preview-post .domain { padding: 0px 12px 12px 12px; color: var(--text-color-light);
}

.link-preview-post .display-name { text-transform: capitalize; font-weight: bold;
}

/* Editor */

#editor-container { position: relative; max-width: -webkit-fill-available;
}

#editorDisplay,
#galleryDisplay { box-sizing: border-box; font-size: 15px; width: 100%; min-height: 49px; padding: 15px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; color: var(--text-color); line-height: 22px;
}

#editorDisplay:empty:before,
#galleryDisplay:empty:before { content: attr(placeholder); color: var(--text-color);
}

#editorDisplay:focus-visible,
#galleryDisplay:focus-visible { color: var(--button-text-color); border: var(--drop-menu-border-1); background: var(--background-color-alf-a-hover);
}

#suggestions { max-height: 200px; max-width: 422px; overflow-y: auto; display: none; margin-top: 0px; margin-left: 4px; margin-right: 4px; width: 100%;
}

#suggestions ul { list-style-type: none; padding: 0; margin: auto;
}

#suggestions li { padding: 10px; cursor: pointer; display: grid; grid-template-columns: 42px auto auto; gap: 8px; border-bottom: var(--drop-menu-border-1); align-items: center; background: var(--background-color-alf-4); margin: 3px; border-radius: 4px;
}

#suggestions li img { width: 40px; height: 40px;
}

#suggestions li .nickname { font-weight: bold;
}

#suggestions li .total { justify-self: end; font-size: 11px; padding: 3px 9px; background: var(--bg-color-dark); color: var(--text-color-white); border-radius: 7px;
}

#suggestions li:hover { background: var(--background-color-alf-3);
}

.hashtag { font-weight: bold; color: #1b95e0;
}

.mention { font-weight: bold; color: #1b95e0;
}

#charCounter { position: absolute; display: none; font-weight: 700; top: -18px; right: 4px; text-align: right; margin-top: 5px; font-size: 10px; background: var(--background-card-border); width: min-content; padding: 5px 9px; border-radius: 14px; border: var(--drop-menu-border-1);
}

#charCounter.over { color: var(--text-color-white); background: var(--text-red);
}

/* Start post / create post */

.start-post { position: relative; width: 100%; display: flex !important; justify-content: center;
}

.create-post { border-radius: 0.3rem; position: relative; margin: auto; width: -webkit-fill-available; height: -webkit-fill-available; display: flex !important; max-width: 500px; justify-content: center; align-items: center;
}

.start-post button:empty:before { content: attr(placeholder); color: var(--text-color-light); text-align: left;
}

#callPost { position: relative; margin-top: 1rem; margin-bottom: 2rem; background: var(--mood-bg-card); border-radius: 20px; padding: 15px; max-width: 600px; width: -webkit-fill-available; box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; flex-wrap: wrap;
}

.cell { display: flex; padding: 9px 2px 13px 2px; max-width: 500px; width: 100%; align-items: center; justify-content: space-between;
}

.cell:last-child { border-top: var(--drop-menu-border-1); margin: auto 1rem; width: -webkit-fill-available; overflow-x: auto;
}

.cell .video,
.cell .photo,
.cell .timeline {font-size: 11px;display: flex;font-weight: bold;color: var(--text-color-light);align-items: center;}

.cell .video i { font-size: 22px; color: var(--text-red); padding-right: 8px;
}

.cell .photo i { font-size: 22px; color: var(--text-green); padding-right: 8px;
}

.cell .timeline i { font-size: 22px; color: var(--text-light-blue); padding-right: 8px;
}

.cell .video:hover,
.cell .photo:hover,
.cell .timeline:hover { background: var(--bg-darken-1); color: var(--text-color-normal); border-radius: 32px;
}

.cell :hover { cursor: pointer;
}

.modale-uri .modal-content { background: var(--background-color-alf-1) !important;
}

.feed.public { padding-top: 40px; position: relative; width: 100%; display: flex !important; justify-content: center;
}

/* ===== POST CARD ===== */

.post { border-radius: 13px; background-color: var(--background-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-header { margin-bottom: 1px; justify-content: flex-start;
}

.post-footer { display: flex; margin-bottom: 1px; align-items: center;
}

.post-header .avatar { width: 34px; height: 34px; border-radius: 50%; margin-right: auto;
}

.post-username { font-size: 14px; margin-bottom: 2px;
}

.post-content { padding-top: 9px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; padding-bottom: 11px; border-bottom: var(--border-input);
}

.post-content .text { padding: 8px 9px 0 9px;
}

/* ===== GALLERIA ===== */

.post-content .img-gallery,
.post-content .lightbox .img-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px;
}

.post-content .img-gallery { border-top: var(--border-input); padding-top: 9px;
}

.post-content .imgGridSingle,
.post-content .lightbox .imgGridSingle { display: inherit; position: relative; cursor: pointer; background-size: cover; background-position: center; width: 100%; height: 100px; min-height: 200px;
}

.post-content .img-count,
.post-content .lightbox .img-count { position: absolute; display: flex; background-color: var(--bg-even-3); color: var(--tags-text-color); font-size: 2rem; font-weight: bold; width: -webkit-fill-available; height: -webkit-fill-available; margin: auto; justify-content: center; align-items: center;
}

/* Griglia mobile */

@media (max-width: 400px) {
    .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 5px;}
}

@media (max-width: 490px) {
    .col-span-1 { grid-column-end: span 1;}
    .col-span-2 { grid-column-end: span 2;}
    .col-span-3 { grid-column-end: span 3;}
    .col-span-4 { grid-column-end: span 4;}
    .row-span-1 { grid-row-end: span 1;}
    .row-span-2 { grid-row-end: span 2;}
}

/* Griglia desktop */

@media (min-width: 491px) {
    .col-span-1 { grid-column-end: span 1;}
    .col-span-2 { grid-column-end: span 2;}
    .col-span-3 { grid-column-end: span 3;}
    .col-span-4 { grid-column-end: span 4;}
    .row-span-1 { grid-row-end: span 1;}
    .row-span-2 { grid-row-end: span 2;}
}

/* Dimensioni variabili immagini (nth-child) */

.img-gallery .grid-container>.imgGridSingle:nth-child(1) { grid-column-end: span 2; grid-row-end: span 1;
}

.img-gallery .grid-container>.imgGridSingle:nth-child(2) { grid-column-end: span 3; grid-row-end: span 1;
}

.img-gallery .grid-container>.imgGridSingle:nth-child(3) { grid-column-end: span 3; grid-row-end: span 1;
}

.img-gallery .grid-container>.imgGridSingle:nth-child(4) { grid-column-end: span 2; grid-row-end: span 1;
}

.img-gallery .grid-container>.imgGridSingle:nth-child(5) { grid-column-end: span 1; grid-row-end: span 2;
}

.img-gallery .grid-container>.imgGridSingle:nth-child(6) { grid-column-end: span 1; grid-row-end: span 1;
}

/* ===== LIGHTBOX ===== */

#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(227 227 227 / 30%); display: flex; justify-content: center; align-items: center; z-index: 10000; backdrop-filter: blur(9px);
}

/* Mostra/nascondi via .hidden (display:none!important in mood.css) */

#lightbox.hidden { display: none !important;
}

#lightboxImg { max-width: 90vw; max-height: 90vh; border-radius: 5px; object-fit: contain;
}

#lightbox-content { max-width: 94%; max-height: 90%; overflow: auto;
}

.lightbox-gallery img { max-width: inherit; max-height: -webkit-fill-available; border-radius: 5px;
}

.lightbox-gallery .text { display: block; max-width: 50%; min-width: 420px; height: max-content; border: solid 1px var(--border-color); padding: 4px 11px 11px 11px; color: var(--text-color-light); border-radius: 25px 2px 2px 25px; background: var(--background-card);
}

.lightbox-gallery .text .incontent { padding: 1rem 11px; margin-top: 15px; border-top: var(--border-input);
}

#lightbox .close { position: absolute; color: white; top: 7px; right: 20px; border: none; cursor: pointer; font-size: 2.2em;
}

#lightbox .close:hover { color: chartreuse;
}

.lightbox-gallery .lightbox { display: flex; height: 100%; width: -webkit-fill-available;
}

.lightbox-gallery .link-preview-post { clear: both; position: relative; display: flex; border: var(--drop-menu-border-1); margin-top: 1rem; flex-direction: column;
}

#lightbox-content { display: flex; margin: auto; width: -webkit-fill-available; height: -webkit-fill-available; align-items: center; justify-content: center;
}

#lightbox .lightbox-gallery { display: none; overflow-x: scroll; width: 100%; height: -webkit-fill-available; gap: 10px; flex-wrap: nowrap;
}

#lightbox .gallery-wrapper { display: flex; flex-wrap: nowrap; width: 100%; height: 100%;
}

#lightbox .imgGridSingle { flex: 0 0 auto; width: fit-content; height: -webkit-fill-available; background-size: cover; background-position: center; margin-right: 10px;
}

#lightbox .imgGridSingle img { width: max-content; max-width: initial; height: 100%; object-fit: cover;
}

.img-details { padding: 0.5rem; background-color: rgba(255, 255, 255, 0.9); position: absolute; bottom: 0; left: 0; width: 100%; transition: background-color 0.3s ease; transform: translateY(100%);
}

.imgGridSingle:hover .img-details { background-color: rgba(255, 255, 255, 0.5); transform: translateY(0);
}

/* ===== FOOTER POST / LIKE / AZIONI ===== */

.post-footer { justify-content: flex-start; font-size: 12px; color: var(--text-color-active); margin: 12px 10px 4px 10px;
}

.post-footer span { margin-right: 10px; font-size: 14px;
}

.post-likes,
.post-view,
.post-comments,
.post-shares { position: relative; display: flex; padding: 4px; font-size: 16px; color: var(--bg-teal); border-radius: 4px; margin-top: 2px; margin-right: 11px; margin-left: 1px; flex-direction: row; transition: all 0.15s ease-in-out;
}

.post-likes i { padding: initial; font-size: 18px; color: var(--text-red);
}

.post-likes .number { padding-left: 6px; font-size: 14px;
}

.post-view i,
.post-comments i,
.post-shares i { padding: initial; padding-right: 7px; font-size: 18px; color: var(--text-color-active);
}

.post-likes:hover,
.post-view:hover,
.post-comments:hover,
.post-shares:hover,
.post-likes:hover i,
.post-view:hover i,
.post-comments:hover i,
.post-shares:hover i { color: var(--bg-dark);
}

/* Heart animation */

.pulse-animation { transform: rotate(45deg); animation: beat 1.16s ease infinite; transform-origin: center;
}

@keyframes beat {
    0% {
        transform: scale(1) rotate(0deg);
    }

    15% {
        transform: scale(1.3) rotate(0deg);
    }

    30% {
        transform: scale(1) rotate(0deg);
    }

    45% {
        transform: scale(1.3) rotate(0deg);
    }

    70% {
        transform: scale(0.82) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.post:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.post-header .avatar:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.post { border: 1px solid var(--border-color); padding: 15px; margin: 10px; margin-bottom: 30px; max-width: 640px;
}

.post-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
}

.post-header .avatar { grid-column: 1;
}

.post-header .post-user-info { grid-column: 2;
}

.post-header .post-details,
.post-header .post-preferences { color: var(--text-color-disabled); font-size: 20px;
}

.avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;
}

.post-user-info { display: flex; flex-direction: column;
}

.post-username { font-weight: bold;
}

.post-timestamp { font-size: 0.9em; color: gray;
}

.post-footer { margin-top: 10px;
}

/* ===== COMMENTI ===== */

.comment-section { margin-top: 10px;
}

.comment { border-top: 1px solid #eee; padding: 10px 0;
}

.comment .comment-content { margin-left: 20px;
}

.comment-likes { cursor: pointer; color: blue;
}

.comment-actions { margin-top: 5px;
}

.comment-reply { cursor: pointer; color: green;
}

.comment-delete { cursor: pointer; color: red;
}

.new-comment { position: relative; width: 100%; border-top: var(--border-input); padding-top: 11px;
}

.new-comment .new-comment-text { width: 100%; display: flex; justify-content: space-between; align-items: center;
}

.new-comment-text .avatar { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 0px 2px #2196F3; object-fit: cover; background-position: center; background-size: cover;
}

.new-comment textarea { width: 100%; border-radius: 10px; overflow-x: hidden; overflow-y: hidden; display: flex; flex-shrink: 1; flex-basis: auto; flex-grow: 1; padding-bottom: 8px; padding-top: 8px; padding-right: 37px; padding-left: 12px; text-overflow: ellipsis; justify-content: space-around;
}

/* ===== DROPDOWN / PREFERENZE ===== */

.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background-color: var(--background-card); border: var(--border-input); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10; padding: 10px; border-radius: 5px; min-width: 150px; font-size: 14px;
}

.dropdown-menu.visible,
.dropdown-menu.show { display: block;
}

.dropdown-item { padding: 8px 12px; cursor: pointer; color: var(--text-color); border-radius: 3px; transition: background-color 0.2s ease; white-space: nowrap;
}

.dropdown-item:hover { background-color: var(--background-color-alf-a-hover);
}

.post-preferences { position: relative; display: inline-block; margin-left: auto; margin-right: 10px; cursor: pointer;
}

/* ===== PRELOADER ===== */

.preloader { display: flex; justify-content: center; align-items: center; width: 100%; height: 100px; margin: 20px 0;
}

.preloader:before { content: ''; display: inline-block; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #22a6b3; border-radius: 50%; animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== GALLERY UPLOAD / DROP AREA ===== */

.box-image-upload.highlight { background-color: #f1e721;
}

.content-box { top: 2rem; height: 100%; position: relative; display: contents; width: 100%; max-width: 96%; margin: auto;
}

.drop-area { display: flex; justify-content: center; min-height: 180px; align-items: center; margin: 0; padding: 0; flex-direction: column;
}

.box-image-upload #drop-area-gallery { background-color: var(--background-color); border: 1px dashed #2196f3; border-radius: 8px; padding: 0; width: 100%; cursor: pointer; position: relative; display: flex; margin: 0; align-items: center; justify-content: center;
}

.box-image-upload input[type="file"] { display: inherit; padding: 13px;
}

.box-image-upload p { font-size: 16px; color: var(--text-color);
}

.drop-area .upload { display: none;
}

.box-image-upload input[type="submit"] { display: none;
}

.thumb { display: flex; position: relative; width: 100%; overflow-x: auto; background: var(--background); margin: 10px 0; padding: 9px 6px; border-radius: 6px;
}

.thumb-gallery { position: relative; margin-right: 10px; flex: 0 0 auto; max-width: calc(100% - 8px); height: 100px; overflow: hidden; display: flex; align-items: center;
}

.thumb-gallery img { width: auto; height: 100px; display: block; object-fit: cover; border-radius: 3px; border: 1px solid var(--border-color);
}

/* Responsive */

@media (max-width: 400px) {
    .post-content .img-gallery, .post-content .lightbox .img-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 10px;}
    .lightbox-gallery .text { min-width: -webkit-fill-available;}
    #lightbox .imgGridSingle { flex: 0 0 auto; width: fit-content; height: -webkit-fill-available; background-size: cover; background-position: center; margin-right: 10px;}
    .cell { margin: auto !important;}
    .cell .video i, .cell .photo i, .cell .timeline i { font-size: 16px;}
    .cell .video, .cell .photo, .cell .timeline { font-size: 12px;}
    .modale-uri .modal-content { margin: 0 !important;}
    #callPost { margin: 2rem 6px 6px 6px; max-width: 380px;}
    .create-post { width: 100%; display: flex !important; margin: auto; max-width: 580px; justify-content: center;}
    .post-header, .post-footer { align-items: flex-start;}
    .post-footer { margin-top: 10px;}
    .post-footer span { margin-right: 0; margin-bottom: 5px;}
}

/* ============================================================
/* MOOD ADDON Gallery rendering (feed.lsnn.net / mood) */

Caricato per ultimo: override sicuri per .mood-card. Rispetta la struttura legacy: .post-content > .img-gallery con celle .imgGridSingle e badge .img-count. ============================================================ */ .mood-card .post-content { padding: 0; border: none; overflow-wrap: anywhere;
}

.mood-card .post-content .img-gallery,
.mood-card .img-gallery.grid-container {display: grid;grid-template-columns: repeat(6, 1fr);grid-auto-rows: 150px;gap: 6px;border: none;padding: 0 0 11px 0;border-radius: 8px;}

/* Singola immagine -> occupa tutta la riga */

.mood-card .img-gallery.grid-container:has(.imgGridSingle:only-child) { grid-template-columns: 1fr; grid-auto-rows: minmax(300px, auto);
}

.mood-card .post-content .imgGridSingle,
.mood-card .imgGridSingle {width: 100%;height: 100%;min-height: 0;background-position: center center;overflow: hidden;position: relative;display: block;border-radius: 12px;overflow: hidden;background-color: rgb(0 0 87 / 88%);cursor: pointer;border-width: 1px;border-style: solid;border-color: var(--gradient-post);background-size: contain !important;background-repeat: no-repeat;}

.mood-card .imgGridSingle.col-span-2 { grid-column-end: span 2;
}

.mood-card .imgGridSingle.col-span-3 { grid-column-end: span 3;
}

.mood-card .imgGridSingle.col-span-4 { grid-column-end: span 4;
}

.mood-card .imgGridSingle.col-span-5 { grid-column-end: span 5;
}

.mood-card .imgGridSingle.col-span-6 { grid-column-end: span 6;
}

.mood-card .imgGridSingle.row-span-1 { grid-row-end: span 1;
}

.mood-card .imgGridSingle.row-span-2 { grid-row-end: span 2;
}

.mood-card .post-content .img-count,
.mood-card .img-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.6rem; font-weight: 700; border-radius: 8px; z-index: 2;
}

/* Audio dentro la gallery (media_urls con .mp3/.wav/.ogg) */

.mood-card .media-preview-item { width: 100%; height: auto; min-height: 54px; border-radius: 8px;
}

.mood-card .media-preview-item audio { width: 100%; height: 44px;
}

.mood-card .embed-audio { width: 100%; margin: 4px 0 12px;
}

/* Responsive gallery mobile: stessa griglia a 6 colonne (mai impilata).
   Le classi col-span-/row-span- continuano a funzionare:
   - col-span-6 = tutta larghezza (media principale)
   - col-span-3 = 1/2  -  col-span-2 = 1/3  -> mosaico sempre affiancato */

@media (max-width: 490px) {
    .mood-card .post-content .img-gallery, .mood-card .img-gallery.grid-container {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 50px;
    }
}

/* Selettore categoria annunci nel compositor (solo admin/founder) */

.category-select-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.1rem; margin-top: 0.15rem;
}

.category-select-row label { font-size: 0.8rem; font-weight: 600; color: var(--mood-text-muted, #8b8b9e);
}

.category-select-row select { background: var(--mood-bg-card, #181825); color: var(--mood-text, #e6e6ef); border: 1px solid var(--mood-border, #2b2b3d); border-radius: 8px; padding: 0.3rem 0.5rem; font-size: 0.85rem; max-width: 190px;
}

/* ===== Pulizia legacy feed.js: stili estratti dalle stringhe generate ===== */

.mood-comments-loading { padding: 6px 2px;
}

/* Trigger "Storie" nel compositor (stesso stile degli altri) */

.cell .story { font-size: 14px; display: flex; font-weight: bold; color: var(--text-color-light); padding: 8px 16px; align-items: center;
}

.cell .story i { font-size: 22px; color: var(--mood-primary); padding-right: 8px;
}

.cell .story:hover { background: var(--bg-darken-1); color: var(--text-color-normal); border-radius: 32px;
}

.hover-card-cover { background-image: var(--hover-cover, none), url("data:image/svg+xml; charset=utf-8,%3csvg xmlns='http: //www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236C5CE7'/%3E%3Cstop offset='1' stop-color='%233E2AB3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='200' fill='url(%23g)'/%3E%3Ctext x='50%25' y='55%25' font-family='Inter,Arial,sans-serif' font-size='130' font-weight='800' fill='rgba(255,255,255,0.92)' text-anchor='middle' dominant-baseline='middle'%3EM%3C/text%3E%3C/svg%3E");
}

.tuning-intro { color: var(--mood-text-muted); font-size: 0.9rem; margin-bottom: 15px;
}

.tuning-options { display: flex; flex-direction: column; gap: 10px;
}

.tuning-options .tuning-hide-author { color: var(--mood-danger);
}

/* Compositor: conteggio hashtag/@mention/link + suggerimenti menzioni */

.mood-token-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 0;
}

.mood-token-bar .tok { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: var(--mood-text-muted); background: var(--mood-bg-card); border: 1px solid var(--mood-border); border-radius: 999px; padding: 3px 9px;
}

.mood-token-bar .tok b { color: var(--mood-text);
}

.mood-token-bar .tok.tok-tag { border-color: var(--mood-primary); color: var(--mood-primary);
}

.mood-token-bar .tok.tok-mention { border-color: var(--mood-accent); color: var(--mood-accent);
}

.mood-token-bar .tok.tok-link { border-color: var(--mood-boost); color: var(--mood-boost);
}

#suggestions { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% - 2px); background: var(--mood-bg-card); border: 1px solid var(--mood-border); border-radius: 12px; box-shadow: var(--mood-shadow); overflow: hidden;
}

#suggestions .sug-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; color: var(--mood-text); cursor: pointer;
}

#suggestions .sug-item:hover { background: var(--mood-bg-hover);
}

#suggestions .sug-item img,
#suggestions .sug-item video { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
}

#suggestions .sug-name { font-weight: 600; font-size: 0.9rem;
}

#suggestions .sug-user { font-size: 0.78rem; color: var(--mood-text-muted);
}

.feed-status { text-align: center; font-size: 0.72rem; color: var(--mood-text-muted, #7a8699); padding: 2px 0 8px; letter-spacing: 0.3px;
}

/* ================= Trasparenza contenuti AI: switch + badge ================= */

.feed-ai-filterbar { display: flex; justify-content: flex-end; align-items: center; margin: 8px 2px 4px; padding: 0 2px;
}

/* ==========================================================================
   IL CAMPANELLO NELLA BARRA DEL FILTRO (24/09/2026) — telefoni
   --------------------------------------------------------------------------
   Il titolare: «abbiamo messo le notifiche in aside e va bene .. ma non è capibile da tutti... andrebbe
   messo la notifica il numerino magari qui [...] tipo notifiche .. e numerino che apre le notifiche».
   La campanella della barra in alto, sotto gli 800px, è nascosta (`mood-ui.css`): questa sta dove si
   guarda il feed — a sinistra, con il filtro AI che resta a destra — e preme quella vera.
   Il pallino è lo STESSO numero degli altri due (`app-nav.js`, `aggiornaVociPannello`): un conteggio solo.
   Dal desktop in su non si vede: lassù la campanella c'è già, e due campanelli sono un dubbio, non un aiuto.
   ========================================================================== */
.feed-ai-notifiche {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 19px;          /* a sinistra: il filtro AI resta a destra */
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 50%;
    background: transparent;
    color: var(--mood-text, #F0F0FF);
    cursor: pointer;
}
.feed-ai-notifiche i,
.feed-ai-notifiche svg { width: 19px; height: 19px; }
.feed-ai-notifiche:hover,
.feed-ai-notifiche:focus-visible { border-color: var(--mood-primary, #6C5CE7); }
.feed-ai-notifiche__pallino {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mood-danger, #E74C3C);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.feed-ai-notifiche__pallino.hidden { display: none; }
@media (max-width: 800px) { .feed-ai-notifiche { display: inline-flex; } }

.mood-ai-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 10px 0 2px;
}

.mood-ai-switch--bar { margin: 0;
}

.mood-ai-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.mood-ai-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--mood-border, #cbd5e1); transition: background 0.2s ease;
}

.mood-ai-track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease;
}

.mood-ai-switch input:checked + .mood-ai-track { background: linear-gradient(135deg, #6C5CE7, #00CEC9);
}

.mood-ai-switch input:checked + .mood-ai-track i { transform: translateX(16px);
}

.mood-ai-switch input:focus-visible + .mood-ai-track { outline: 2px solid var(--mood-primary); outline-offset: 2px;
}

.mood-ai-label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--mood-text-muted); transition: color 0.2s ease;
}

.mood-ai-label svg { width: 13px; height: 13px;
}

.mood-ai-switch input:checked ~ .mood-ai-label { color: var(--mood-primary, #6C5CE7); font-weight: 600;
}

/* Badge "AI" piccolo sul card post (icona sparkles) */

.mood-ai-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #6C5CE7, #00CEC9); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 5px rgba(108, 92, 231, 0.35);
}

.mood-ai-badge svg { width: 10px; height: 10px; stroke-width: 2.4;
}