/*--------------------------------------------
 5. layout containers
--------------------------------------------*/
#modern-forum-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

#posts-container,
#modern-summary-container {
    display: block;
}

/* Unsorted */
img:not(.slick_carousel img) {
    content-visibility: auto;
}

/* Hide original posts */
#topic .topic, #topic .topic .mainbg, #topic .post, #send .post, #search .post, #blog .post, .summary, blockquote.twitter-tweet, .slick_carousel:not(.slick-initialized) > *:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ve-content.color img {
    user-select: all;
}

.ve-content.color {
    background-color: #000;
}

div, table {
    margin: unset;
}

/* Default style (fallback for all browsers) */
[rows].textinput {
    width: 100%;
    height: 100px;       
    min-height: 100px;    
    max-height: 500px;
}

/* Enhanced style (applied only to browsers that support it) */
@supports (field-sizing: content) {
    [rows].textinput {
        field-sizing: content;
        resize: none;
        height: auto;
        min-height: 100px;
        max-height: 500px;
    }
}

/* Hide original platform menu on user/msg pages */
body#user .menuwrap,
body#msg .menuwrap {
    display: none !important;
}

/*===================== Custom Navigation =====================*/
.custom-nav {
    position: relative;
    z-index: 9;
    font-family: var(--font-primary);
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

#nav-toggle, .menu.st-emoji-notice {
    display: none;
}

.nav-hamburger {
    display: block;
    font-size: 1.8rem;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
}

.nav-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
}

#nav-toggle:checked ~ .nav-list {
    display: flex;
    flex-direction: column;
}

.nav-list li {
    border-bottom: 1px solid var(--border-color);
}

.nav-list a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s;
}

.nav-list a:hover {
    background: var(--hover-color);
}

.admin-link {
    display: none !important;
}

@media (min-width: 768px) {
    .nav-hamburger {
        display: none;
    }
    .nav-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-top: none;
    }
    .nav-list li {
        border-bottom: none;
    }
    .nav-list a {
        padding: 0.6rem 1rem;
    }
}

body.gruppo1 .admin-link {
    display: block !important;
}

@media (min-width: 768px) {
    body.gruppo1 .admin-link {
        display: inline-block !important;
    }
}

body#msg .textinput {
    font-family: 'Courier New', Courier, 'Liberation Mono', 'Menlo', 'Consolas', monospace;
}

/*--------------------------------------------
 5b. slick carousel – emerald theme overrides
--------------------------------------------*/
.carousel-wrapper {
    padding: 0;
    margin: var(--space-xl) auto var(--space-xl);
    width: 100%;
}

.slick_carousel {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 2.618rem;
    height: 2.618rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.slick-prev:hover,
.slick-next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
    opacity: 1;
}

.slick-prev {
    left: var(--space-md);
}

.slick-next {
    right: var(--space-md);
}

.slick-prev i,
.slick-next i {
    font-size: 1rem;
}

.slick-dots {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9;
}

.slick-dots li {
    margin: 0;
}

.slick-dots li button {
    width: 0.618rem;
    height: 0.618rem;
    padding: 0;
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-full);
    background: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.slick-dots li button:hover {
    border-color: var(--primary-light);
    background: rgba(16, 185, 129, 0.2);
}

.slick-dots li.slick-active button {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

.slick-slide img {
    border-radius: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 300;
    object-fit: cover;
}

/*--------------------------------------------
 6. MODERN POST CARD STYLES
--------------------------------------------*/
.post-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-lg);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    overflow: hidden;
    will-change: transform;
}

.post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(calc(var(--phi-inverse) * -2px));
    border-color: rgba(5, 150, 105, 0.4);
}

.post-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-5) var(--pad-6);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.post-number {
    border-radius: 0;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-time {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-actions,
.post-member-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.action-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    width: var(--btn-height);
    height: var(--btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
}

.action-icon:hover {
    background: var(--hover-color);
    border-color: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.delete-action:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(220, 38, 38, 0.1);
}

.report-action:hover {
    border-color: var(--warning-color);
    color: var(--warning-color);
    background: rgba(245, 158, 11, 0.1);
}

.post-card-body {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) var(--pad-6) 0 var(--pad-6);
    align-items: flex-start;
    flex-wrap: wrap;
}

.avatar-modern {
    flex-shrink: 0;
}

.post-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    display: block;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.avatar-circle:hover {
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15), 0 0 0 1px rgba(5, 150, 105, 0.1);
    border-color: var(--primary-light);
}

.initial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', 'Bree Serif', system-ui, sans-serif;
    font-weight: 600;
    color: white;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: calc(60px * 0.618);
}

.initial-avatar:hover,
.modal-initial-avatar:hover {
    transform: scale(1.02);
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-light);
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
    background: #6b7280;
    transition: background 0.2s;
}

.status-dot.online {
    background: #10b981;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.status-dot.offline {
    background: #6b7280;
}

.status-dot.idle {
    background: #f59e0b;
}

.status-dot.dnd {
    background: #dc2626;
}

.status-dot:hover::after {
    content: attr(data-status);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-light);
    color: var(--text-primary);
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 4px;
    z-index: 1;
}

.post-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.user-name {
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    display: flex;
    text-align: left;
    width: fit-content;
}

.user-name a {
    color: var(--text-primary);
}

.user-name a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.user-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-badge {
    background: var(--primary-color);
    border-radius: 40px;
    padding: 0.2rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    width: fit-content;
}

.role-badge.admin {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.role-badge.moderator {
    background: #8b5cf6;
}

.role-badge.developer {
    background: #0ea5e9;
}

.role-badge.member {
    background: var(--primary-color);
}

.role-badge.founder {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.role-badge.global-moderator {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}

.role-badge.game-dev {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

.role-badge.fan {
    background: linear-gradient(135deg, #ec4899, #be185d) !important;
}

.user-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.user-stats div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    padding: 0;
}

.user-rank i,
.user-posts i,
.user-reputation i,
.user-joined i {
    color: var(--primary-light);
}

.post-content {
    padding: var(--space-lg) var(--pad-6);
}

.post-message {
    font-size: 1rem;
    line-height: 1.618;
    color: var(--text-primary);
    text-align: left;
}

.post-message img:not(.embedded-link-image img) {
    max-width: 100%;
    border-radius: var(--radius);
    display: block;
    height: auto;
}

.post-edit-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
    justify-content: flex-end;
    width: 100%;
    margin: var(--space-md) 0 0;
}

.post-edit-info time {
    color: var(--text-secondary);
}

.post-edit-info i {
    color: var(--primary-color);
}

.post-signature {
    border-top: 1px solid var(--border-color);
    margin-top: 1.5rem;
    padding-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.post-footer {
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    padding: var(--pad-4) var(--pad-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.post-reactions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
}

.reaction-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    padding: 0.3rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    transition: all 0.2s;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    height: var(--btn-height);
    min-height: var(--btn-height);
    max-height: var(--btn-height);
}

.reaction-btn:hover {
    border-color: var(--primary-color);
    background: var(--hover-color);
    transform: translateY(-1px);
}

.reaction-count,
.like-count {
    background: rgba(5, 150, 105, 0.15);
    border-radius: 30px;
    padding: 0.1rem 0.5rem;
    font-weight: 600;
    color: var(--primary-light);
}

.post-ip {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/*--------------------------------------------
 6b. GROUP-SPECIFIC AVATAR BORDERS (POSTS)
--------------------------------------------*/
.post-card.group-founder .avatar-circle,
.post-card.group-founder .initial-avatar {
    border-color: #f59e0b !important;
}

.post-card.group-founder .avatar-circle:hover,
.post-card.group-founder .initial-avatar:hover {
    box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-card.group-administrator .avatar-circle,
.post-card.group-administrator .initial-avatar {
    border-color: #dc2626 !important;
}

.post-card.group-administrator .avatar-circle:hover,
.post-card.group-administrator .initial-avatar:hover {
    box-shadow: 0 0 0 2px #dc2626, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-card.group-global-moderator .avatar-circle,
.post-card.group-global-moderator .initial-avatar {
    border-color: #06b6d4 !important;
}

.post-card.group-global-moderator .avatar-circle:hover,
.post-card.group-global-moderator .initial-avatar:hover {
    box-shadow: 0 0 0 2px #06b6d4, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-card.group-game-dev .avatar-circle,
.post-card.group-game-dev .initial-avatar {
    border-color: #3b82f6 !important;
}

.post-card.group-game-dev .avatar-circle:hover,
.post-card.group-game-dev .initial-avatar:hover {
    box-shadow: 0 0 0 2px #3b82f6, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-card.group-fan .avatar-circle,
.post-card.group-fan .initial-avatar {
    border-color: #ec4899 !important;
}

.post-card.group-fan .avatar-circle:hover,
.post-card.group-fan .initial-avatar:hover {
    box-shadow: 0 0 0 2px #ec4899, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-card.group-member .avatar-circle,
.post-card.group-member .initial-avatar {
    border-color: var(--primary-color) !important;
}

/*--------------------------------------------
 6c. MODERN BLOG CARD STYLES (body#topic articles)
--------------------------------------------*/
.post-card--blog {
    border-color: rgba(5, 150, 105, 0.15);
}

.blog-card-header {
    padding: var(--pad-6) var(--pad-6) var(--pad-4);
    border-bottom: 1px solid var(--border-color);
}

.blog-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--space-sm) 0;
    color: var(--text-primary);
    display: flex;
}

.blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-title a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.blog-date,
.blog-comments,
.blog-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
}

.blog-date i,
.blog-comments i,
.blog-views i {
    color: var(--primary-light);
    font-size: 0.9em;
}

.blog-actions.top-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
}

/*--------------------------------------------
 7. EMBEDDED LINK STYLES
--------------------------------------------*/
.modern-embedded-link {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    margin: var(--space-md) 0;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 100%;
}

.modern-embedded-link:hover {
    box-shadow: var(--shadow);
    transform: translateY(calc(var(--phi-inverse) * -1px));
    border-color: var(--primary-color);
}

.embedded-link-container {
    display: flex;
    align-items: stretch;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

.embedded-link-container:hover {
    background: var(--hover-color);
    text-decoration: none;
}

.embedded-link-image {
    flex: 0 0 180px;
    background: var(--bg-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.embedded-link-image img {
    content-visibility: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.embedded-link-container:hover .embedded-link-image img {
    transform: scale(1.05);
}

.embedded-link-content {
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
    padding: var(--pad-5) var(--pad-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.modern-embedded-link .embedded-link-title {
    margin: 0 0 var(--space-xs) 0;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}

.modern-embedded-link .embedded-link-description {
    font-size: var(--text-sm);
    line-height: var(--phi);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}

.modern-embedded-link .embedded-link-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    text-align: left;
    width: 100%;
}

.modern-embedded-link .embedded-link-read-more {
    font-size: var(--text-xs);
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-block;
    text-align: left;
    width: 100%;
}

.modern-embedded-link .embedded-link-container:hover .embedded-link-read-more {
    color: var(--primary-light);
}

.modern-embedded-link:not(:has(.embedded-link-image)) .embedded-link-container {
    display: block;
}

.modern-embedded-link:not(:has(.embedded-link-image)) .embedded-link-content {
    width: 100%;
    flex: none;
}

@media (min-width: 48.0625em) {
    .modern-embedded-link .embedded-link-container {
        display: grid;
        grid-template-columns: 180px 1fr;
        grid-template-rows: auto;
        min-height: 140px;
    }
    .modern-embedded-link .embedded-link-image {
        grid-column: 1;
        width: 100%;
        height: 100%;
    }
    .modern-embedded-link .embedded-link-content {
        grid-column: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media (max-width: 48em) {
    .modern-embedded-link .embedded-link-container {
        flex-direction: column;
        min-height: auto;
    }
    .modern-embedded-link .embedded-link-image {
        flex: 0 0 140px;
        width: 100%;
    }
    .modern-embedded-link .embedded-link-image img {
        position: relative;
        height: 140px;
    }
    .modern-embedded-link .embedded-link-content {
        padding: var(--pad-4) var(--pad-5);
        width: 100%;
        flex: 1 1 auto;
    }
    .modern-embedded-link .embedded-link-title {
        font-size: var(--text-sm);
        margin-bottom: var(--space-xs);
    }
    .modern-embedded-link .embedded-link-description {
        font-size: var(--text-xs);
        margin-bottom: var(--space-xs);
    }
}

@media (max-width: 30em) {
    .modern-embedded-link .embedded-link-image {
        flex: 0 0 100px;
    }
    .modern-embedded-link .embedded-link-image img {
        height: 100px;
    }
    .modern-embedded-link .embedded-link-content {
        padding: var(--pad-3) var(--pad-4);
        width: 100%;
    }
    .modern-embedded-link .embedded-link-title {
        font-size: var(--text-sm);
        margin-bottom: var(--pad-1);
    }
}

/*--------------------------------------------
 8. MODERN LIKES MODAL (Accessibility Enhanced)
--------------------------------------------*/
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

body.modal-open {
    overflow: hidden !important;
    padding-right: var(--scrollbar-width, 0px);
}

.modern-modal-overlay,
.modern-report-overlay,
.modern-report-notify-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.618);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}

.modern-likes-modal,
.modern-report-container,
.modern-report-notify-container {
    background: var(--surface-color, #1f2937);
    border-radius: var(--radius-lg, 13px);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s ease;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    outline: none;
}

.modern-likes-modal:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.modern-modal-header,
.report-modal-header,
.notify-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--surface-color, #1f2937);
    flex-shrink: 0;
}

.modern-modal-title,
.report-modal-title,
.notify-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-modal-title i,
.report-modal-title i,
.notify-modal-title i {
    color: var(--primary-light, #10b981);
    font-size: 1rem;
}

.modern-modal-title h3,
.report-modal-title h3,
.notify-modal-title h3 {
    color: var(--text-primary, #f9fafb);
    margin: 0;
}

.modal-like-count {
    background: rgba(5, 150, 105, 0.15);
    border-radius: 30px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light, #10b981);
}

.modern-modal-close,
.report-modal-close,
.notify-modal-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary, #6b7280);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.modern-modal-close:hover,
.report-modal-close:hover,
.notify-modal-close:hover {
    background: var(--hover-color, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #f9fafb);
    transform: rotate(90deg);
}

.modern-likes-list {
    flex: 1;
    overflow-y: auto;
    background: var(--surface-color, #1f2937);
}

.modern-likes-list::-webkit-scrollbar {
    width: 6px;
}

.modern-likes-list::-webkit-scrollbar-track {
    background: transparent;
}

.modern-likes-list::-webkit-scrollbar-thumb {
    background: var(--surface-light, #374151);
    border-radius: 20px;
}

.modal-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modern-like-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
    transition: background 0.2s;
    cursor: pointer;
}

.modern-like-item:hover {
    background: var(--hover-color, rgba(255, 255, 255, 0.05));
}

.modern-like-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: var(--hover-color);
}

.modern-like-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.modern-like-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color, #059669);
    display: block;
    background: var(--surface-light, #374151);
}

.modal-initial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', 'Bree Serif', system-ui, sans-serif;
    font-weight: 600;
    color: white;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: calc(48px * 0.618);
}

.modern-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface-color, #1f2937);
    transition: background 0.2s;
}

.modern-status-dot.online {
    background: #10b981;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.modern-status-dot.offline {
    background: #6b7280;
}

.modern-status-dot.idle {
    background: #f59e0b;
}

.modern-status-dot.dnd {
    background: #dc2626;
}

.modern-status-dot:hover::after {
    content: attr(data-status);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-light);
    color: var(--text-primary);
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 4px;
    z-index: 1;
}

.modern-like-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.modern-like-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modern-like-name {
    font-weight: 600;
    color: var(--text-primary, #f9fafb);
    font-size: 0.95rem;
    transition: color 0.2s;
    cursor: pointer;
}

.modern-like-name:hover {
    color: var(--primary-light, #10b981);
    text-decoration: underline;
}

.modern-role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    cursor: default;
}

.role-founder {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.role-administrator {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.role-global-mod {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.role-moderator {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.role-developer {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.role-game-dev {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.role-fan {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.role-premium {
    background: linear-gradient(135deg, #d946ef, #c026d3);
}

.role-vip {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.role-member {
    background: linear-gradient(135deg, #059669, #047857);
}

.role-banned {
    background: linear-gradient(135deg, #4b5563, #374151);
}

.modern-like-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-tertiary, #6b7280);
}

.modern-like-stats i {
    margin-right: 0.25rem;
    width: 12px;
    color: var(--primary-light, #10b981);
}

.modern-loading,
.modern-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-tertiary, #6b7280);
}

.modern-loading i,
.modern-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.modern-modal-footer,
.report-modal-footer,
.notify-modal-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--bg-color, #111827);
    font-size: 0.7rem;
    color: var(--text-tertiary, #6b7280);
    text-align: center;
    flex-shrink: 0;
}

.modern-modal-footer i {
    margin-right: 0.25rem;
    font-size: 0.65rem;
}

/*--------------------------------------------
 8b. MODAL GROUP-SPECIFIC AVATAR BORDERS
--------------------------------------------*/
.modern-like-item.group-founder .modern-like-avatar,
.modern-like-item.group-founder .modal-initial-avatar {
    border-color: #f59e0b !important;
}

.modern-like-item.group-founder .modern-like-avatar:hover,
.modern-like-item.group-founder .modal-initial-avatar:hover {
    box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-like-item.group-administrator .modern-like-avatar,
.modern-like-item.group-administrator .modal-initial-avatar {
    border-color: #dc2626 !important;
}

.modern-like-item.group-administrator .modern-like-avatar:hover,
.modern-like-item.group-administrator .modal-initial-avatar:hover {
    box-shadow: 0 0 0 2px #dc2626, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-like-item.group-global-moderator .modern-like-avatar,
.modern-like-item.group-global-moderator .modal-initial-avatar {
    border-color: #06b6d4 !important;
}

.modern-like-item.group-global-moderator .modern-like-avatar:hover,
.modern-like-item.group-global-moderator .modal-initial-avatar:hover {
    box-shadow: 0 0 0 2px #06b6d4, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-like-item.group-game-dev .modern-like-avatar,
.modern-like-item.group-game-dev .modal-initial-avatar {
    border-color: #3b82f6 !important;
}

.modern-like-item.group-game-dev .modern-like-avatar:hover,
.modern-like-item.group-game-dev .modal-initial-avatar:hover {
    box-shadow: 0 0 0 2px #3b82f6, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-like-item.group-fan .modern-like-avatar,
.modern-like-item.group-fan .modal-initial-avatar {
    border-color: #ec4899 !important;
}

.modern-like-item.group-fan .modern-like-avatar:hover,
.modern-like-item.group-fan .modal-initial-avatar:hover {
    box-shadow: 0 0 0 2px #ec4899, 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-like-item.group-member .modern-like-avatar,
.modern-like-item.group-member .modal-initial-avatar {
    border-color: var(--primary-color) !important;
}

/*--------------------------------------------
 9. LOADING SHIMMER & UTILITIES
--------------------------------------------*/
.modern-forum-wrapper:empty {
    min-height: 200px;
    background: linear-gradient(90deg, var(--surface-color) 25%, var(--surface-light) 50%, var(--surface-color) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: var(--radius);
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

img,
.avatar-circle {
    content-visibility: auto;
}

/*--------------------------------------------
 10. SUMMARY MODERN HEADER (body#send)
--------------------------------------------*/
.summary-header.modern-section-header {
    margin-bottom: var(--space-lg);
    padding: var(--pad-4) var(--pad-6);
    background: var(--surface-color);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.summary-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.summary-header-content i {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.summary-header-content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 500;
    margin: 0;
    color: var(--text-primary);
}

.summary-subtitle {
    font-size: var(--text-sm);
    font-weight: normal;
    color: var(--text-tertiary);
    margin-left: var(--space-xs);
}

@media (max-width: 48em) {
    .summary-header-content h3 {
        font-size: var(--text-md);
    }
    .summary-subtitle {
        display: block;
        margin-left: 0;
        font-size: var(--text-xs);
    }
}

/*--------------------------------------------
 11. CONSOLIDATED RESPONSIVE STYLES (680px)
--------------------------------------------*/
@media (max-width: 680px) {
    body {
        padding: 1rem;
    }
    .user-area {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .username-row {
        justify-content: center;
    }
    .badge-container {
        justify-content: center;
    }
    .user-stats-grid {
        justify-content: center;
    }
    .post-footer-modern {
        flex-direction: column;
        align-items: flex-start;
    }
    .topic-title {
        font-size: 1.4rem;
    }
    .action-buttons-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .post-signature {
        display: none;
    }
    .blog-card-header {
        padding: var(--pad-4) var(--pad-4) var(--pad-3);
    }
    .blog-title {
        font-size: var(--text-xl);
    }
    .blog-meta {
        gap: var(--space-sm);
        flex-direction: column;
        align-items: flex-start;
    }
    .blog-actions.top-actions {
        margin-left: 0;
        align-self: flex-end;
    }
    .slick-prev {
        left: var(--space-sm);
    }
    .slick-next {
        right: var(--space-sm);
    }
    .slick-dots {
        bottom: var(--space-xs);
    }
    .slick-dots li button {
        width: 0.5rem;
        height: 0.5rem;
    }
}

/*--------------------------------------------
 12. REDUCED MOTION PREFERENCE
--------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*--------------------------------------------
 13. MODAL ANIMATIONS
--------------------------------------------*/
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*--------------------------------------------
 14. WYSIWYG IMAGES OVERRIDE
--------------------------------------------*/
.ve-content.color img:not(img[alt="fav"],
    img[src^="https://img.forumfree.net/html/emoticons/new/"],
    [class*="e1a-"],
    img[alt$=":"],
    .res_tmb img,
    .emojione) {
    max-width: calc(100% - (2 * 5px)) !important;
}

/*============================================
 checkboxes & radios - harmonized
============================================*/
input[type="checkbox"] {
    align-items: center;
    appearance: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    font-size: 0.75rem;
    height: 1rem;
    justify-content: center;
    margin: 0;
    outline-style: none;
    padding: 0;
    text-align: center;
    width: 1rem;
}

input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked::before {
    color: #fff;
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

input[type="radio"] {
    align-items: center;
    appearance: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    font-size: 0.5rem;
    height: 1rem;
    justify-content: center;
    margin: 0;
    outline-style: none;
    padding: 0;
    text-align: center;
    width: 1rem;
}

input[type="radio"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="radio"]:checked::before {
    color: #fff;
    content: '\f111';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

/*--------------------------------------------
 15. HIDE LEGACY POPUP ELEMENTS
--------------------------------------------*/
.popup.pop_points,
.forumfree-modal\.report-modal-notify.Blocker.current,
.ff-modal.modal.report-modal {
    visibility: hidden !important;
}

/* ==========================================================================
   MODERN MESSENGER OVERHAUL (CSS only)
   ========================================================================== */


body#msg form {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    margin: var(--space-lg) 0 0 0;
    overflow: hidden;
}

/* ----- 1. Base messenger container – card style ----- */
body#msg .cp.send {
    order: 1;
}

/* ----- 2. Modern tabs (consistent with posts module) ----- */
body#msg .cp.send .tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 0;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    margin: 0;
    list-style: none;
}

body#msg .cp.send .tabs li {
    margin: 0;
    border: none;
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

body#msg .cp.send .tabs li[style*="float:right"] {
    float: none !important;
}

body#msg .cp.send .tabs li a,
body#msg .cp.send .tabs li.current h2 a {
    display: inline-block;
    padding: var(--pad-4) var(--pad-6);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

body#msg .cp.send .tabs li.current h2 a {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
    background: transparent;
}

/* Tab icons */
body#msg .cp.send .tabs li a::before,
body#msg .cp.send .tabs li.current h2 a::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    margin-right: var(--space-xs);
    display: inline-block;
    width: 1.25rem;
    text-align: center;
}

body#msg .cp.send .tabs li:first-child a::before { content: "\f1d8"; } /* paper-plane */
body#msg .cp.send .tabs li:nth-child(2) a::before { content: "\f0e0"; } /* envelope */
body#msg .cp.send .tabs li[style*="float:right"] a::before { content: "\f0f3"; } /* bell */
body#msg .cp.send .tabs li:nth-child(4) a::before { content: "\f07b"; } /* folder */
body#msg .cp.send .tabs li:nth-child(5) a::before { content: "\f2bb"; } /* address-book */
body#msg .cp.send .tabs li:nth-child(6) a::before { content: "\f304"; } /* pen */

body#msg .cp.send .tabs li a:hover {
    color: var(--text-primary);
    background: var(--hover-color);
}

body#msg .cp.send .tabs li[style*="float:right"] a {
    background: transparent;
}

/* ----- 3. Form sections as cards ----- */
body#msg .cp.send .skin_tbl {
    background: transparent;
}

/* All main_list > li cards (including #attach and #smilies when visible) */
body#msg .cp.send .main_list > li:not(#attach + li),
body#msg #attach:not(.nascosta),
body#msg #smilies:not(.nascosta) {
    background: var(--surface-color);
    border-radius: var(--radius);
    margin: var(--space-md) var(--space-md) var(--space-lg) var(--space-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Recipient & title rows – modern flex layout */
body#msg .cp.send .list > li {
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

body#msg .cp.send .list .Item.top-addons + .Item {
    padding: var(--pad-6) !important;
}

body#msg .cp.send .list > li > .Sub.Item:first-child {
    flex: 0 0 120px;
    font-weight: 600;
    color: var(--text-secondary);
}

body#msg .cp.send .list > li > .Sub.Item:last-child {
    flex: 1;
    min-width: 0 !important;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}

body#msg input.forminput[name="msg_title"] {
    width: 100%;
}

body#msg .cp.send .list > li > .Sub.Item {
    width: auto !important;
}

/* Inputs & selects */
body#msg input.forminput,
body#msg select.forminput {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--pad-3) var(--pad-4);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: all 0.2s ease;
    max-width: 100% !important;
}

body#msg .cp.send .list > li:first-child input[name="entered_name"] {
    margin-right: var(--space-sm);
}

body#msg input.forminput:focus,
body#msg select.forminput:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

body#msg select.forminput {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%236B7280' d='M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z'/%3E%3C/svg%3E") !important;
    background-size: auto 1rem;   /* match icon font size */
    background-repeat: no-repeat;
    background-position: right var(--pad-3) center;
    appearance: none;
    padding-right: var(--space-lg);
}

/* ----- 4. Editor toolbar (top) – buttons & selects ----- */
body#msg .top-editor {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: var(--pad-5) var(--pad-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 0;
}

/* All editor buttons */
body#msg .top-editor .left.Sub button,
body#msg .top-editor .left.Sub input[type="button"] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0;
    padding: 0;
    margin: 0 var(--space-micro);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 1rem;
}

body#msg .top-editor .left.Sub button:hover,
body#msg .top-editor .left.Sub input[type="button"]:hover {
    background-color: var(--hover-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

/* Dropdown selects */
body#msg .top-editor .left.Sub select.codebuttons {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--pad-2) var(--pad-3);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
    cursor: pointer;
}

/* Hide legacy junk in toolbar */
body#msg .top-editor .left.Sub [onclick*="<sup>"],
body#msg .top-editor .left.Sub [onclick*="<sub>"],
body#msg .top-editor .left.Sub [onclick*="float: left"],
body#msg .top-editor .left.Sub [onclick*="[CENTER]"],
body#msg .top-editor .left.Sub [onclick*="transform: rotate(90deg)"],
body#msg .top-editor .left.Sub [onclick="tag_email()"],
body#msg .top-editor .left.Sub select[onchange*="[font="],
body#msg .top-editor .left.Sub select[onchange*="[size="],
body#msg .top-editor .left.Sub select[onchange*="[color="],
body#msg .bottom-editor .right-bottom-icons #emoticons2,
body#msg .top-editor .left.Sub button[title^="Create a list"] img,
body#msg #attach b,
body#msg #attach b + br {
    display: none !important;
}

/* Right‑side icons container – move ImgBB to main row, hide others */
body#msg .right-top-icons, body#msg .top-editor .left.Sub, body#msg .top-editor .left.Sub > div:last-of-type {
    display: contents;
}

body#msg .right-top-icons img:not(#imgbb-icon),
body#msg .right-top-icons a,
body#msg .right-top-icons script {
    display: none !important;
}

/* ----- 5. Editor button SVGs (color #D1D5DB) ----- */
body#msg .top-editor .left.Sub button[title^="Insert Bold Text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23D1D5DB' d='M303.8 241.7c2.084-1.838 4.41-3.307 6.385-5.303c22.72-22.91 35.03-53.31 34.72-85.59C344.3 85.31 290.4 32 224.9 32H24C10.75 32 0 42.75 0 56S10.75 80 24 80H48v352H24C10.75 432 0 442.8 0 456S10.75 480 24 480h216c70.59 0 128-57.41 128-128C368 304.8 341.1 263.9 303.8 241.7zM224.9 80c39.31 0 71.59 32 72 71.31c.1875 19.34-7.219 37.56-20.84 51.34C262.5 216.4 244.3 224 224.9 224H96V80H224.9zM240 432H96v-160h144c44.13 0 80 35.88 80 80.01S284.1 432 240 432z'/%3E%3C/svg%3E");
    order: 1;
}

body#msg .top-editor .left.Sub button[title^="Insert Italic Text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23D1D5DB' d='M384 56c0 13.25-10.75 24-24 24h-67.98l-146.9 352H232c13.25 0 24 10.75 24 24S245.3 480 232 480h-208C10.75 480 0 469.3 0 456s10.75-24 24-24h70.6l146.9-352H152C138.8 80 128 69.25 128 56S138.8 32 152 32h208C373.3 32 384 42.75 384 56z'/%3E%3C/svg%3E");
    order: 2;
}

body#msg .top-editor .left.Sub button[title^="Insert Underlined Text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D1D5DB' d='M40 48H64v192c0 88.22 71.78 160 160 160s160-71.78 160-160v-192h24c13.25 0 24-10.75 24-24S421.3 0 408 0h-96C298.8 0 288 10.75 288 24s10.75 24 24 24h24v192c0 61.75-50.25 112-112 112S112 301.8 112 240v-192h24C149.3 48 160 37.25 160 24S149.3 0 136 0h-96C26.75 0 16 10.75 16 24S26.75 48 40 48zM424 464H24C10.75 464 0 474.8 0 488S10.75 512 24 512h400c13.25 0 24-10.75 24-24S437.3 464 424 464z'/%3E%3C/svg%3E");
    order: 3;
}

body#msg .top-editor .left.Sub [onclick="tag('<del>','</del>')"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D1D5DB' d='M488 239.9L287.2 240c-8.262-2.459-42.31-12.21-42.31-12.21C161.5 203.7 138.4 182.8 146.2 138.5c9.719-55.4 81.72-64.51 140.5-55.43c16.77 2.564 36.75 7.908 62.84 16.8c12.69 4.344 26.62-2.299 31.03-14.82c4.414-12.53-2.336-26.21-15.06-30.54c-28.93-9.861-51.58-15.86-71.29-18.89C189.7 19.57 110.9 57.61 98.15 130.3C88.41 185.7 113 218.8 146.5 240L24 239.9c-13.25 0-24 10.75-24 23.1s10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1S501.3 239.9 488 239.9zM361.7 336c5.1 10.26 6.734 22.25 4.059 37.47c-9.719 55.38-81.69 64.48-140.7 55.42c-25.89-3.83-56.08-14.53-82.72-23.97L128.6 400.1c-12.72-4.438-26.63 2.111-31.14 14.61c-4.494 12.5 2.16 26.22 14.85 30.64l13.47 4.75c28.76 10.19 61.36 21.75 91.86 26.27C233.6 478.8 249 480 263.7 480c81.09 0 139.3-36.74 150.1-98.34c3.047-17.35 2.619-32.35-.2246-45.66H361.7z'/%3E%3C/svg%3E") !important;
    order: 4;
}

body#msg .top-editor .left.Sub button[title^="Create a list"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D1D5DB' d='M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM488 72C501.3 72 512 82.75 512 96C512 109.3 501.3 120 488 120H184C170.7 120 160 109.3 160 96C160 82.75 170.7 72 184 72H488zM488 232C501.3 232 512 242.7 512 256C512 269.3 501.3 280 488 280H184C170.7 280 160 269.3 160 256C160 242.7 170.7 232 184 232H488zM488 392C501.3 392 512 402.7 512 416C512 429.3 501.3 440 488 440H184C170.7 440 160 429.3 160 416C160 402.7 170.7 392 184 392H488zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z'/%3E%3C/svg%3E");
    margin-right: calc(var(--space-md) + var(--space-micro));
    order: 5;
}

body#msg .top-editor .left.Sub input[title="Insert Hyperlink (alt + w)"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23D1D5DB' d='M173 131.5C229.2 75.27 320.3 75.27 376.5 131.5C430 185 432.9 270.9 383 327.9L377.7 334C368.9 344 353.8 345 343.8 336.3C333.8 327.6 332.8 312.4 341.5 302.4L346.9 296.3C380.1 258.3 378.2 201.1 342.5 165.4C305.1 127.1 244.4 127.1 206.1 165.4L93.63 278.7C56.19 316.2 56.19 376.9 93.63 414.3C129.3 449.1 186.6 451.9 224.5 418.7L230.7 413.3C240.6 404.6 255.8 405.6 264.5 415.6C273.3 425.5 272.2 440.7 262.3 449.4L256.1 454.8C199.1 504.6 113.2 501.8 59.69 448.2C3.505 392.1 3.505 300.1 59.69 244.8L173 131.5zM467 380.5C410.8 436.7 319.7 436.7 263.5 380.5C209.1 326.1 207.1 241.1 256.9 184.1L261.6 178.7C270.3 168.7 285.5 167.7 295.5 176.4C305.5 185.1 306.5 200.3 297.8 210.3L293.1 215.7C259.8 253.7 261.8 310.9 297.4 346.6C334.9 384 395.6 384 433.1 346.6L546.4 233.3C583.8 195.8 583.8 135.1 546.4 97.7C510.7 62.02 453.4 60.11 415.5 93.35L409.3 98.7C399.4 107.4 384.2 106.4 375.5 96.44C366.7 86.47 367.8 71.3 377.7 62.58L383.9 57.22C440.9 7.348 526.8 10.21 580.3 63.76C636.5 119.9 636.5 211 580.3 267.2L467 380.5z'/%3E%3C/svg%3E");
    order: 6;
}

body#msg .top-editor .left.Sub [onclick="tag_image()"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D1D5DB' d='M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z'/%3E%3C/svg%3E") !important;
    order: 7;
}

/* ----- 6. ImgBB icon (replaces PNG with SVG) ----- */
body#msg #imgbb-icon {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23D1D5DB' d='M303 175C312.4 165.7 327.6 165.7 336.1 175L416.1 255C426.3 264.4 426.3 279.6 416.1 288.1C407.6 298.3 392.4 298.3 383 288.1L344 249.9V384C344 397.3 333.3 408 320 408C306.7 408 296 397.3 296 384V249.9L256.1 288.1C247.6 298.3 232.4 298.3 223 288.1C213.7 279.6 213.7 264.4 223 255L303 175zM144 480C64.47 480 0 415.5 0 336C0 273.3 40.07 219.1 96 200.2V200C96 107.2 171.2 32 264 32C314.9 32 360.4 54.6 391.3 90.31C406.2 83.68 422.6 80 440 80C506.3 80 560 133.7 560 200C560 206.6 559.5 213 558.5 219.3C606.5 240.3 640 288.3 640 344C640 416.4 583.4 475.6 512 479.8V480H144zM264 80C197.7 80 144 133.7 144 200L144 234.1L111.1 245.5C74.64 258.7 48 294.3 48 336C48 389 90.98 432 144 432H506.6L509.2 431.8C555.4 429.2 592 390.8 592 344C592 308 570.4 276.9 539.2 263.3L505.1 248.4L511.1 211.7C511.7 207.9 512 204 512 200C512 160.2 479.8 128 440 128C429.5 128 419.6 130.2 410.8 134.2L378.2 148.7L354.9 121.7C332.8 96.08 300.3 80 263.1 80L264 80z'/%3E%3C/svg%3E") !important;
    background-size: auto 1rem;   
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius) !important;
    margin: 0 var(--space-micro);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    object-fit: contain;
    margin-right: calc(var(--space-md) + var(--space-micro)) !important;
    order: 8;
}

body#msg #imgbb-icon:hover {
    background-color: var(--hover-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

body#msg .top-editor .left.Sub input[title="Insert Quoted Text (alt + q)"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D1D5DB' d='M96 416c53.02 0 96-42.98 96-96S149 224 96 224C78.42 224 62.17 229.1 48 237.3V216c0-39.7 32.31-72 72-72h16C149.3 144 160 133.3 160 120S149.3 96 136 96h-16C53.84 96 0 149.8 0 216V320C0 373 42.98 416 96 416zM96 272c26.47 0 48 21.53 48 48S122.5 368 96 368S48 346.5 48 320S69.53 272 96 272zM352 416c53.02 0 96-42.98 96-96s-42.98-96-96-96c-17.58 0-33.83 5.068-48 13.31V216c0-39.7 32.31-72 72-72h16C405.3 144 416 133.3 416 120S405.3 96 392 96h-16C309.8 96 256 149.8 256 216V320C256 373 298.1 416 352 416zM352 272c26.47 0 48 21.53 48 48s-21.53 48-48 48s-48-21.53-48-48S325.5 272 352 272z'/%3E%3C/svg%3E");
    order: 9;
}

body#msg .top-editor .left.Sub [onclick="tag_code()"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23D1D5DB' d='M414.9 31.11L270.9 495.1C266.1 507.8 253.5 514.8 240.9 510.9C228.2 506.1 221.1 493.5 225.1 480.9L369.1 16.89C373 4.226 386.5-2.852 399.1 1.077C411.8 5.006 418.9 18.45 414.9 31.11V31.11zM504.4 118.5L632.4 238.5C637.3 243 640 249.4 640 255.1C640 262.6 637.3 268.1 632.4 273.5L504.4 393.5C494.7 402.6 479.6 402.1 470.5 392.4C461.4 382.7 461.9 367.6 471.6 358.5L580.9 255.1L471.6 153.5C461.9 144.4 461.4 129.3 470.5 119.6C479.6 109.9 494.7 109.4 504.4 118.5V118.5zM168.4 153.5L59.09 255.1L168.4 358.5C178.1 367.6 178.6 382.7 169.5 392.4C160.4 402.1 145.3 402.6 135.6 393.5L7.585 273.5C2.746 268.1 0 262.6 0 255.1C0 249.4 2.746 243 7.585 238.5L135.6 118.5C145.3 109.4 160.4 109.9 169.5 119.6C178.6 129.3 178.1 144.4 168.4 153.5V153.5z'/%3E%3C/svg%3E") !important;
    order: 10;
}

body#msg .top-editor .left.Sub input[title="Insert hidden elements (alt + h)"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23D1D5DB' d='M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM189.8 123.5L235.8 159.5C258.3 139.9 287.8 128 320 128C390.7 128 448 185.3 448 256C448 277.2 442.9 297.1 433.8 314.7L487.6 356.9C521.1 322.8 545.9 283.1 558.6 256C544.1 225.1 518.4 183.5 479.9 147.7C438.8 109.6 385.2 79.1 320 79.1C269.5 79.1 225.1 97.73 189.8 123.5zM394.9 284.2C398.2 275.4 400 265.9 400 255.1C400 211.8 364.2 175.1 320 175.1C319.3 175.1 318.7 176 317.1 176C319.3 181.1 320 186.5 320 191.1C320 202.2 317.6 211.8 313.4 220.3L394.9 284.2zM404.3 414.5L446.2 447.5C409.9 467.1 367.8 480 320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L120.8 191.2C102.1 214.5 89.76 237.6 81.45 255.1C95.02 286 121.6 328.5 160.1 364.3C201.2 402.4 254.8 432 320 432C350.7 432 378.8 425.4 404.3 414.5zM192 255.1C192 253.1 192.1 250.3 192.3 247.5L248.4 291.7C258.9 312.8 278.5 328.6 302 333.1L358.2 378.2C346.1 381.1 333.3 384 319.1 384C249.3 384 191.1 326.7 191.1 255.1z'/%3E%3C/svg%3E");
    margin-right: calc(var(--space-md) + var(--space-micro));
    order: 11;
}

/* ----- 7. Bottom toolbar (attachment & smilies) ----- */
body#msg .bottom-editor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--pad-4);
    border-top: 1px solid var(--border-color);
    font-size: 0;
    width: 100%;
}

body#msg .bottom-editor .left.Sub {
    display: flex;
    flex-direction: column;
}

body#msg .bottom-editor .left.Sub label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

body#msg .bottom-editor .right-bottom-icons {
    display: flex;
    align-items: center;
}

body#msg .bottom-editor .right-bottom-icons img {
    background-size: auto 1rem !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin: 0 var(--space-micro);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

body#msg .bottom-editor .right-bottom-icons img:hover {
    background-color: var(--hover-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px) !important;
}

/* Paperclip attachment */
body#msg .bottom-editor .right-bottom-icons img[alt="File Attachments"] {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D1D5DB' d='M375 72.97C349.1 46.1 306.9 46.1 280.1 72.97L88.97 264.1C45.32 308.6 45.32 379.4 88.97 423C132.6 466.7 203.4 466.7 247 423L399 271C408.4 261.7 423.6 261.7 432.1 271C442.3 280.4 442.3 295.6 432.1 304.1L280.1 456.1C218.6 519.4 117.4 519.4 55.03 456.1C-7.364 394.6-7.364 293.4 55.03 231L247 39.03C291.7-5.689 364.2-5.689 408.1 39.03C453.7 83.75 453.7 156.3 408.1 200.1L225.2 384.7C193.6 416.3 141.6 413.4 113.7 378.6C89.88 348.8 92.26 305.8 119.2 278.8L271 127C280.4 117.7 295.6 117.7 304.1 127C314.3 136.4 314.3 151.6 304.1 160.1L153.2 312.7C143.5 322.4 142.6 337.9 151.2 348.6C161.2 361.1 179.9 362.2 191.2 350.8L375 167C401 141.1 401 98.94 375 72.97V72.97z'/%3E%3C/svg%3E") !important;
}

/* Smiley icons */
body#msg .bottom-editor .right-bottom-icons img[id="emoticons"] {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D1D5DB' d='M256 352C293.2 352 319.2 334.5 334.4 318.1C343.3 308.4 358.5 307.7 368.3 316.7C378 325.7 378.6 340.9 369.6 350.6C347.7 374.5 309.7 400 256 400C202.3 400 164.3 374.5 142.4 350.6C133.4 340.9 133.1 325.7 143.7 316.7C153.5 307.7 168.7 308.4 177.6 318.1C192.8 334.5 218.8 352 256 352zM208.4 208C208.4 225.7 194 240 176.4 240C158.7 240 144.4 225.7 144.4 208C144.4 190.3 158.7 176 176.4 176C194 176 208.4 190.3 208.4 208zM304.4 208C304.4 190.3 318.7 176 336.4 176C354 176 368.4 190.3 368.4 208C368.4 225.7 354 240 336.4 240C318.7 240 304.4 225.7 304.4 208zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'/%3E%3C/svg%3E") !important;
}

/* ----- 8. Textarea (message body) ----- */
body#msg #Post {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--pad-4);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.618;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100% !important;
}

/* Placeholder text color for the message textarea */
body#msg #Post::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

body#msg #Post:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* ----- 9. Hidden sections (smilies & attachment panels) – styled when visible ----- */
body#msg #smilies.nascosta,
body#msg #attach.nascosta {
    display: none;
}

body#msg #smilies:not(.nascosta),
body#msg #attach:not(.nascosta) {
    background: var(--surface-color);
    border-radius: var(--radius);
    margin: var(--space-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

body#msg #smilies .Item {
    gap: var(--space-xs);
}

#attach h3.sunbar::before {
    content: '\f0c6';
    font-size: 1rem;
    color: var(--primary-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    margin-right: var(--space-xs);
    display: inline-block;
}

#smilies h3.sunbar::before {
    content: '\f118';
    font-size: 1rem;
    color: var(--primary-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    margin-right: var(--space-xs);
    display: inline-block;
}

#smilies .Item {
 background-color: var(--bg-color);
}

body#msg #smilies .sunbar,
body#msg #attach .sunbar {
    background: var(--bg-color);
    padding: var(--pad-4) var(--pad-6) !important;
    border-bottom: 1px solid var(--border-color);
}

body#msg #smilies table {
    width: 100%;
    background: transparent;
}

body#msg #smilies img {
    cursor: pointer;
}

/* ==========================================================================
   Replace default smilies with Twemoji (CSS only)
   Custom emoji :kekw: is preserved
   ========================================================================== */

/* Base rule for all smilies images: hide original, show Twemoji background */
body#msg #smilies img {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    object-fit: contain;               /* prevents distortion for custom images */
    background-color: var(--bg-color); /* fallback for transparent images */
}

body#msg #smilies .Item td { 
    border-radius: var(--radius);
}

body#msg #smilies .Item td:hover {
    background: var(--hover-color);        /* subtle highlight */
    transform: scale(1.08);
}

body#msg #smilies .Item td:hover img { 
    border-color: var(--primary-color) !important}

body#msg #smilies .Item td:active {
    transform: scale(0.95);
}

/* Make the original image invisible but keep its clickable area */
body#msg #smilies img {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: auto 20px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

body#msg #smilies img:not([src*="/emoticons/"]) {
    content: none !important;          /* restore original image */
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;    /* scale custom image without distortion */
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    padding: 0.5rem; 
}

#smilies table, #smilies tbody, #smilies tr {
    display: contents;
}

/* ---- Standard emoji replacements (corrected) ---- */
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/huh.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f928.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/happy.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f60a.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/ohmy.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f62f.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/wink.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f609.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/tongue.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f61b.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/biggrin.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f600.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/laugh.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f606.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/cool.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f60e.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/rolleyes.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f644.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/sleep.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f634.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/dry.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f612.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/smile.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f642.svg") !important; }

/* Corrected wub.gif → heart eyes (😍) instead of face savoring food */
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/wub.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f60d.svg") !important; }

body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/mad.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f620.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/sad.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f641.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/unsure.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f615.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/wacko.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f92a.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/blink.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f440.svg") !important; }

/* Corrected ph34r.gif → fearful face (😨) instead of ninja */
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/ph34r.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f628.svg") !important; }

body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/alien.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f47d.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/cry.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f622.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/sick.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f922.svg") !important; }
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/shifty.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f608.svg") !important; }

/* Corrected w00t.gif → grinning face with big eyes (😁) instead of exploding head */
body#msg #smilies img[src="https://img.forumfree.net/html/emoticons/w00t.gif"] { background-image: url("https://twemoji.maxcdn.com/v/latest/svg/1f603.svg") !important; }

/* File attachment input */
body#msg #attach input[type="file"] {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--pad-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
    width: auto;
    max-width: 100%;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    order: 1;
}

/* Style the "Choose file" button (modern browsers) */
body#msg #attach input[type="file"]::file-selector-button {
    background: var(--surface-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--pad-2) var(--pad-4);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: var(--space-sm);
}

body#msg #attach input[type="file"]::file-selector-button:hover {
    background: var(--hover-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

body#msg #attach .list {
    margin: 0 !important;
    padding: var(--space-sm) var(--space-md);
}

body#msg #attach .list li.Item {
    text-align: center !important;
    line-height: 1.618 !important;
    padding: var(--space-md) !important;
    background: transparent;
}

/* ----- 10. Action buttons (Send / Preview) ----- */
body#msg .darkbar.Item {
    background: transparent;
    padding: var(--pad-5);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    font-size: 0;
}

body#msg input[name="sub_mit"],
body#msg button[name="preview"] {
    border: none;
    border-radius: var(--radius);
    padding: var(--pad-3) var(--pad-6);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

body#msg input[name="sub_mit"] {
    background: var(--primary-color);
    color: white;
    order: 2;
}

body#msg button[name="preview"] {
    order: 1;
    align-items: center;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    justify-content: center;
}

body#msg input[name="sub_mit"]:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

body#msg button[name="preview"]:hover {
    background: var(--hover-color);
    border-color: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ----- 11. AJAX Preview area – modern card style ----- */
body#msg #loading:not(.nascosta) {
    background: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    box-shadow: none;
    order: 2;
    margin: 0 var(--space-md) var(--space-lg) var(--space-md);
    overflow: hidden;
}

body#msg #ajaxObject > b:first-of-type {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--pad-4) var(--pad-6);
    font-family: 'Bree Serif', var(--font-heading);
    font-weight: 400;
    font-size: clamp(1rem, 2.5vw, var(--text-base));
    color: var(--text-primary);
}

body#msg #ajaxObject > b:first-of-type::before {
    content: '\f06e';
    font-size: 1rem;
    color: var(--primary-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    margin-right: var(--space-xs);
    display: inline-block;
}

body#msg #ajaxObject hr {
    display: none;
}

body#msg #ajaxObject .color {
    padding: var(--space-lg) var(--pad-6);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ----- 12. Hide legacy junk (popups, breaks, extra divs) ----- */
body#msg .Break.Sub,
body#msg .popup#popup,
body#msg .bottom-editor .Break.Sub,
.cp.send .sunbar:not(#smilies .sunbar):not(#attach .sunbar) {
    display: none !important;
}

body#msg .Item[style*="margin-bottom: 0.5em"] {
    display: none;
}

#msg ul.list {
    margin: 0 !important;
}

#msg .Item.top-addons, #msg .Item.bottom-addons, #ajaxObject {
    padding: 0 !important;
}

/* Hide extra <br> after preview */
#ajaxObject + br {
    display: none !important;
}

/* ----- 13. Responsive adjustments (≤680px) for messenger ----- */
@media (max-width: 680px) {
    body#msg .cp.send .list > li {
        flex-direction: column;
        align-items: flex-start;
    }

    body#msg .cp.send .list > li > .Sub.Item:first-child {
        flex-basis: auto;
    }

    body#msg .top-editor .left.Sub {
        justify-content: center;
    }

    body#msg .darkbar.Item {
        justify-content: center;
    }

    body#msg .bottom-editor {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ----- 14. Reduced motion preference (messenger) ----- */
@media (prefers-reduced-motion: reduce) {
    body#msg * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}