/* =========================================================
NEXORIA V97 · ANIMATED NOTO EMOJI · CHAT + COMENTARIOS
========================================================= */
.nx-real-emoji-picker{
width:min(390px,calc(100vw - 32px))!important;
max-width:390px!important;
max-height:360px!important;
padding:0!important;
overflow:hidden!important;
border:1px solid rgba(124,92,255,.20)!important;
border-radius:16px!important;
background:#0d131d!important;
box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
}
.nx-real-emoji-picker-head{
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:9px 11px;
border-bottom:1px solid rgba(255,255,255,.065);
background:
linear-gradient(135deg,rgba(124,92,255,.075),rgba(0,217,255,.025)),
#101722;
}
.nx-real-emoji-picker-head strong{
color:#d9d4ff;
font-size:8px;
font-weight:900;
letter-spacing:.11em;
}
.nx-real-emoji-picker-head span{
color:#667386;
font-size:7px;
}
.nx-real-emoji-picker-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:3px;
max-height:310px;
padding:8px;
overflow:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
}
.nx-real-emoji-choice{
width:100%!important;
aspect-ratio:1;
min-width:0!important;
height:auto!important;
display:grid!important;
place-items:center!important;
padding:4px!important;
border:1px solid transparent!important;
border-radius:10px!important;
background:transparent!important;
cursor:pointer!important;
transform:none!important;
}
.nx-real-emoji-choice:hover{
transform:none!important;
border-color:rgba(0,217,255,.18)!important;
background:rgba(124,92,255,.08)!important;
}
.nx-real-emoji-choice picture,
.nx-real-emoji-choice img{
width:100%!important;
height:100%!important;
max-width:34px!important;
max-height:34px!important;
object-fit:contain!important;
display:block!important;
}
.nx-real-animated-emoji{
display:inline-block;
width:1.9em;
height:1.9em;
margin:0 .08em;
vertical-align:-.52em;
line-height:1;
}
.nx-real-animated-emoji img{
width:100%;
height:100%;
display:block;
object-fit:contain;
}
.nx-chat-message-body .nx-real-animated-emoji{
width:34px;
height:34px;
vertical-align:-10px;
}
.nx-comment-body .nx-real-animated-emoji{
width:32px;
height:32px;
vertical-align:-9px;
}
/* Los WebP/GIF se reproducen automáticamente; no dependen del hover. */
.nx-real-animated-emoji,
.nx-real-emoji-choice picture{
pointer-events:none;
}
@media(max-width:680px){
.nx-real-emoji-picker{
width:min(340px,calc(100vw - 24px))!important;
}
.nx-real-emoji-picker-grid{
grid-template-columns:repeat(7,1fr);
}
.nx-real-emoji-choice picture,
.nx-real-emoji-choice img{
max-width:31px!important;
max-height:31px!important;
}
}
/* =========================================================
NEXORIA V98 · FIX SELECTOR EMOJIS ANIMADOS
Corrige conflicto con los grids antiguos del picker
========================================================= */
/* El popover nuevo debe ser una caja vertical, NO heredar el grid viejo */
.nx-emoji-popover.nx-real-emoji-picker,
.nx-chat-emoji-popover.nx-real-emoji-picker{
display:block!important;
grid-template-columns:none!important;
grid-auto-flow:initial!important;
gap:0!important;
width:min(390px,calc(100vw - 32px))!important;
max-width:390px!important;
max-height:360px!important;
padding:0!important;
overflow:hidden!important;
white-space:normal!important;
}
/* Encabezado ocupa todo el ancho */
.nx-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-head,
.nx-chat-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-head{
display:flex!important;
width:100%!important;
min-width:0!important;
}
/* El grid interno es el único grid del selector */
.nx-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-grid,
.nx-chat-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-grid{
display:grid!important;
width:100%!important;
min-width:0!important;
grid-template-columns:repeat(8,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:4px!important;
max-height:306px!important;
padding:8px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
/* Botones: neutraliza tamaños heredados del selector viejo */
.nx-real-emoji-picker .nx-real-emoji-choice{
position:relative!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:40px!important;
min-height:40px!important;
padding:3px!important;
margin:0!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* Los recursos animados siempre visibles */
.nx-real-emoji-picker .nx-real-emoji-choice picture{
display:block!important;
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
opacity:1!important;
visibility:visible!important;
}
.nx-real-emoji-picker .nx-real-emoji-choice picture img{
display:block!important;
width:34px!important;
height:34px!important;
max-width:34px!important;
max-height:34px!important;
object-fit:contain!important;
opacity:1!important;
visibility:visible!important;
}
/* Evita que reglas de botones del toolbar pisen los emojis */
.nx-comment-tools .nx-real-emoji-choice,
.nx-chat-editor-tools .nx-real-emoji-choice{
color:inherit!important;
font-size:initial!important;
}
/* Posicionamiento más estable */
.nx-emoji-wrap .nx-real-emoji-picker,
.nx-chat-emoji-wrap .nx-real-emoji-picker{
left:0!important;
right:auto!important;
bottom:42px!important;
top:auto!important;
}
/* En chat, si falta espacio a la izquierda, anclar a la derecha */
.nx-chat-emoji-wrap .nx-real-emoji-picker{
left:auto!important;
right:0!important;
}
/* Mobile */
@media(max-width:680px){
.nx-emoji-popover.nx-real-emoji-picker,
.nx-chat-emoji-popover.nx-real-emoji-picker{
width:min(336px,calc(100vw - 24px))!important;
}
.nx-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-grid,
.nx-chat-emoji-popover.nx-real-emoji-picker .nx-real-emoji-picker-grid{
grid-template-columns:repeat(7,minmax(0,1fr))!important;
}
.nx-real-emoji-picker .nx-real-emoji-choice{
height:38px!important;
min-height:38px!important;
}
.nx-real-emoji-picker .nx-real-emoji-choice picture,
.nx-real-emoji-picker .nx-real-emoji-choice picture img{
width:31px!important;
height:31px!important;
min-width:31px!important;
min-height:31px!important;
}
}
.nx-real-emoji-picker[hidden]{
display:none!important;
}
/* =========================================================
NEXORIA V99 · EMOJIS FLUIDOS + PICKER CHAT SIN RECORTES
========================================================= */
/* El picker vive en body y flota sobre todo el sitio */
body > .nx-real-emoji-picker{
position:fixed!important;
z-index:12000!important;
display:block!important;
width:min(390px,calc(100vw - 24px))!important;
max-width:390px!important;
height:auto!important;
max-height:min(360px,72vh)!important;
overflow:hidden!important;
box-sizing:border-box!important;
contain:layout paint style;
}
body > .nx-real-emoji-picker[hidden]{
display:none!important;
}
body > .nx-real-emoji-picker .nx-real-emoji-picker-head{
position:relative;
z-index:2;
width:100%!important;
min-height:42px!important;
flex:0 0 auto!important;
box-sizing:border-box!important;
}
body > .nx-real-emoji-picker .nx-real-emoji-picker-grid{
width:100%!important;
height:auto!important;
max-height:min(306px,calc(72vh - 44px))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable;
box-sizing:border-box!important;
}
/* Emoji del selector: placeholder instantáneo + WebP al entrar en viewport */
.nx-real-emoji-choice{
position:relative!important;
contain:layout paint!important;
}
.nx-real-emoji-choice .nx-real-emoji-loader{
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size:24px;
line-height:1;
opacity:.38;
filter:saturate(.55);
pointer-events:none;
transition:opacity .12s ease;
}
.nx-real-emoji-choice .nx-real-emoji-lazy{
position:relative;
z-index:1;
display:block!important;
width:34px!important;
height:34px!important;
max-width:34px!important;
max-height:34px!important;
object-fit:contain!important;
opacity:0;
visibility:visible!important;
transform:translateZ(0);
backface-visibility:hidden;
transition:opacity .12s ease;
}
.nx-real-emoji-choice.is-loaded .nx-real-emoji-lazy{
opacity:1;
}
.nx-real-emoji-choice.is-loaded .nx-real-emoji-loader{
opacity:0;
}
/* No animar la caja del botón: solo el propio WebP */
.nx-real-emoji-choice,
.nx-real-emoji-choice:hover{
transform:none!important;
transition:background .12s ease,border-color .12s ease!important;
}
/* Emojis publicados: reservar espacio fijo evita saltos y tirones */
.nx-real-animated-emoji{
display:inline-block!important;
flex:0 0 auto;
overflow:hidden;
line-height:0!important;
contain:layout paint;
transform:translateZ(0);
backface-visibility:hidden;
}
.nx-real-animated-emoji img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
transform:translateZ(0);
backface-visibility:hidden;
}
/* Chat ligeramente más contenido para no forzar reflow */
.nx-chat-message-body .nx-real-animated-emoji{
width:30px!important;
height:30px!important;
margin:0 2px!important;
vertical-align:-9px!important;
}
/* Comentarios */
.nx-comment-body .nx-real-animated-emoji{
width:30px!important;
height:30px!important;
margin:0 2px!important;
vertical-align:-9px!important;
}
/* Evita que filtros/animaciones CSS viejas se sumen al WebP real */
.nx-chat-message-body .nx-real-animated-emoji,
.nx-comment-body .nx-real-animated-emoji{
animation:none!important;
filter:none!important;
will-change:auto!important;
}
@media(max-width:680px){
body > .nx-real-emoji-picker{
width:min(336px,calc(100vw - 20px))!important;
max-height:68vh!important;
}
body > .nx-real-emoji-picker .nx-real-emoji-picker-grid{
grid-template-columns:repeat(7,minmax(0,1fr))!important;
max-height:calc(68vh - 44px)!important;
}
.nx-real-emoji-choice .nx-real-emoji-lazy{
width:31px!important;
height:31px!important;
max-width:31px!important;
max-height:31px!important;
}
.nx-real-emoji-choice .nx-real-emoji-loader{
font-size:22px;
}
}

/* Coversmania V78: integración visual sin alterar los módulos existentes. */
.nx-real-emoji-picker{
border-color:rgba(0,255,163,.22)!important;
background:#081117!important;
box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(41,207,255,.04)!important;
}
.nx-real-emoji-picker-head{
border-bottom-color:rgba(0,255,163,.12)!important;
background:linear-gradient(135deg,rgba(0,255,163,.08),rgba(41,207,255,.035)),#0b151b!important;
}
.nx-real-emoji-picker-head strong{color:#c9fff0!important;}
.nx-real-emoji-picker-head span{color:#6f8991!important;}
.nx-real-emoji-choice:hover,
.nx-real-emoji-choice:focus-visible{
border-color:rgba(0,255,163,.28)!important;
background:rgba(0,255,163,.08)!important;
outline:none!important;
}
.cm-animated-emoji-wrap{position:relative;display:flex;align-items:center;flex:0 0 auto;}
.cm-animated-emoji-button{
min-height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 12px;
border:1px solid rgba(0,255,163,.18);
border-radius:10px;
background:rgba(0,255,163,.055);
color:#00ffa3;
font:800 10px/1 'Outfit',sans-serif;
letter-spacing:.06em;
cursor:pointer;
transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cm-animated-emoji-button:first-letter{font-size:18px;}
.cm-animated-emoji-button:hover,
.cm-animated-emoji-button[aria-expanded="true"]{
border-color:rgba(0,255,163,.42);
background:rgba(0,255,163,.11);
color:#b9ffe7;
}
.cm-v14-message-box .cm-animated-emoji-wrap{margin:0 0 8px;}
.cm-v14-message-box .cm-animated-emoji-button{min-height:36px;}

@media(max-width:680px){
.cm-v18-reply-box{flex-wrap:wrap;}
.cm-v18-reply-box .cm-animated-emoji-wrap{order:1;}
.cm-v18-reply-box textarea{order:2;flex:1 1 calc(100% - 92px);min-width:0;}
.cm-v18-reply-box .cm-v18-reply-btn{order:3;}
.cm-animated-emoji-button{padding:0 10px;}
.cm-animated-emoji-button span{display:none;}
}

@media(prefers-reduced-motion:reduce){
.cm-animated-emoji-button,
.nx-real-emoji-choice,
.nx-real-emoji-choice .nx-real-emoji-loader,
.nx-real-emoji-choice .nx-real-emoji-lazy{transition:none!important;}
}