/* Estilos para el panel de emojis limitado a 2 filas */
/* Este archivo sobrescribe los estilos anteriores */

/* Estilos para el panel expandido */
#xioleni-emoji-panel.expanded {
    height: auto;
    max-height: 190px; /* Ajustar para mostrar título + 2 filas + padding */
    overflow-y: hidden; /* Evitar scroll en el panel principal */
    padding-bottom: 15px;
    /* Ocultar el scrollbar del panel cuando se muestra la sección de mensajes */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#xioleni-emoji-panel.expanded::-webkit-scrollbar {
    display: none;
}

/* Cuando se muestra la sección de mensajes, evitar overflow en el panel principal */
#xioleni-emoji-panel.expanded.messages-active {
    overflow: hidden;
}

/* Estilos unificados para todas las grids de emojis */
#xioleni-emoji-additional .emoji-grid, 
#xioleni-emoji-animals .emoji-grid, 
#xioleni-emoji-travelers .emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin: 0 auto;
    max-width: 100%;
    /* Limitar a dos filas y agregar scroll */
    max-height: 84px; /* Alto para 2 filas: (34px altura botón + 6px gap) * 2 = 80px + 4px margen */
    overflow-y: auto;
    scrollbar-width: thin; /* Scrollbar delgado en Firefox */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Scrollbar en IE/Edge */
    padding-right: 8px; /* Más espacio para el scrollbar */
    /* Asegurar scroll suave y por filas */
    scroll-snap-type: y mandatory;
    /* Añadir padding inferior para la última fila */
    padding-bottom: 10px;
}

/* Estilos específicos para la sección de Messages - con scrollbar delicado */
#xioleni-emoji-messages .emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin: 0 auto;
    max-width: 100%;
    /* Limitar a dos filas y agregar scroll */
    max-height: 84px; /* Alto para 2 filas: (34px altura botón + 6px gap) * 2 = 80px + 4px margen */
    overflow-y: auto;
    scrollbar-width: thin; /* Scrollbar delgado en Firefox */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Autohiding scrollbar en IE/Edge */
    padding-right: 8px; /* Más espacio para el scrollbar */
    /* Asegurar scroll suave y por filas */
    scroll-snap-type: y mandatory;
    /* Añadir padding inferior para la última fila */
    padding-bottom: 10px;
}

/* Ocultar scrollbar en Chrome/Safari/Opera para todos los grids excepto Messages */
#xioleni-emoji-additional .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-animals .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-travelers .emoji-grid::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Estilo para scrollbar delicado en Chrome/Safari/Opera para Messages */
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar {
    width: 4px; /* Ancho delgado para el scrollbar */
    display: block;
}

/* Estilos para el "thumb" (la parte móvil) del scrollbar */
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* Estilo para el track (la parte fija) del scrollbar */
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 480px) {
    /* Ajustes para el panel expandido en móviles */
    #xioleni-emoji-panel.expanded {
        max-height: 240px !important; /* Aumentar la altura del panel principal en móviles */
        padding-bottom: 5px !important; /* Reducir padding para maximizar espacio */
    }
    
    /* Reducir margen superior de las secciones */
    #xioleni-emoji-additional, 
    #xioleni-emoji-animals, 
    #xioleni-emoji-travelers, 
    #xioleni-emoji-messages {
        margin-top: 5px !important;
        padding: 5px !important;
    }
    
    /* Ajustes de las grids */
    #xioleni-emoji-additional .emoji-grid, 
    #xioleni-emoji-animals .emoji-grid, 
    #xioleni-emoji-travelers .emoji-grid, 
    #xioleni-emoji-messages .emoji-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        /* Ajuste de altura para móviles */
        max-height: 180px !important; /* Altura mucho mayor para asegurar 2 filas completas */
        /* Forzar altura de filas consistente */
        grid-auto-rows: 42px;
        align-items: center;
        /* Mejorar comportamiento del scroll en móviles */
        scroll-padding: 42px; /* Igual a la altura de una fila */
        padding-right: 4px;
        /* Añadir padding inferior para mostrar completa la última fila */
        padding-bottom: 15px !important;
        /* Ajustar propiedades de scroll */
        scroll-snap-align: none;
        scroll-snap-type: y proximity;
    }
    
    /* Ajustar el ancho del scrollbar en dispositivos móviles */
    #xioleni-emoji-messages .emoji-grid::-webkit-scrollbar {
        width: 3px; /* Scrollbar aún más delgado en móviles */
    }
    
    /* Asegurar tamaño exacto de botones en móvil para 2 filas consistentes */
    #xioleni-emoji-additional .emoji-button,
    #xioleni-emoji-animals .emoji-button,
    #xioleni-emoji-travelers .emoji-button,
    #xioleni-emoji-messages .emoji-button {
        min-width: 38px;
        min-height: 38px;
        max-height: 38px;
        padding: 1px;
        margin: 0;
        box-sizing: border-box;
        /* Eliminar snap en móviles para un scroll más suave */
        scroll-snap-align: none !important;
    }
    
    #xioleni-emoji-additional .emoji-button img,
    #xioleni-emoji-animals .emoji-button img,
    #xioleni-emoji-travelers .emoji-button img,
    #xioleni-emoji-messages .emoji-button img {
        width: 24px;
        height: 24px;
        margin: 0 auto;
    }
    
    /* Forzar altura para mostrar exactamente 2 filas */
    #xioleni-emoji-messages .title,
    #xioleni-emoji-additional .title,
    #xioleni-emoji-animals .title,
    #xioleni-emoji-travelers .title {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1;
    }
}

#xioleni-emoji-messages .emoji-button,
#xioleni-emoji-additional .emoji-button, 
#xioleni-emoji-animals .emoji-button,
#xioleni-emoji-travelers .emoji-button {
    min-width: 34px;
    min-height: 34px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #555;
    transition: transform 0.2s, background-color 0.2s;
    /* Mejorar comportamiento del scroll */
    scroll-snap-align: start;
}

/* Estilos para garantizar que los emojis se comporten como emojis de chat */

/* Asegurar que las imágenes de emojis sean pequeñas e inline */
.xioleni-emoji-inline {
    display: inline !important;
    width: 28px !important;
    height: 28px !important;
    vertical-align: middle !important;
    margin: 0 1px !important;
    position: relative !important;
    top: -1px !important;
    box-sizing: content-box !important;
    object-fit: contain !important;
    border: none !important;
    white-space: nowrap !important;
    float: none !important;
    clear: none !important;
    display: inline !important;
    /* Prevenir que los emojis se coloquen en lugares incorrectos pero permitir copia */
    pointer-events: inherit !important;
    user-select: all !important; /* Cambiar a 'all' para permitir selección y copia */
    -webkit-user-select: all !important; /* Para Safari */
    -moz-user-select: all !important; /* Para Firefox */
    -ms-user-select: all !important; /* Para IE/Edge */
    -webkit-user-drag: none !important;
    -moz-user-drag: none !important;
    -ms-user-drag: none !important;
    cursor: text !important; /* Cambiado a text para indicar que es seleccionable */
}

/* Reglas específicas para la etiqueta img con clase xioleni-emoji-inline */
img.xioleni-emoji-inline {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    object-fit: contain !important;
    display: inline-block !important;
    /* Permitir copia pero prevenir arrastre */
    user-drag: none !important;
    -webkit-user-drag: none !important;
    user-select: all !important; /* Permitir selección para copia */
    -moz-user-select: all !important;
    -webkit-user-select: all !important;
    -ms-user-select: all !important;
    /* Asegurar que se copie con el texto */
    contain: none !important; /* No aislar el contenido */
}

/* Ajustes para emojis dentro de diferentes contextos */
p .xioleni-emoji-inline, 
div .xioleni-emoji-inline,
span .xioleni-emoji-inline {
    vertical-align: text-bottom !important;
    display: inline !important;
    /* Asegurar que se pueda seleccionar dentro de texto */
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
}

/* Restringir los emojis para que solo puedan insertarse en el editor */
.xioleni-editor-container .xioleni-emoji-inline {
    /* Permitir eventos en el editor */
    pointer-events: auto !important;
    /* Permitir selección para copia y pegado */
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
}

/* Proteger las publicaciones existentes pero permitir copia */
.xioleni-post-content .xioleni-emoji-inline {
    /* Mantener la posición exacta */
    position: static !important;
    /* Permitir selección y copia */
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    /* Permitir eventos para selección pero no arrastre */
    pointer-events: auto !important;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 480px) {
    .xioleni-emoji-inline {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Reglas específicas para la etiqueta img con clase xioleni-emoji-inline en móviles */
    img.xioleni-emoji-inline {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* Estilos para prevenir saltos de línea */
.xioleni-emoji-inline {
    break-inside: avoid !important;
    break-before: auto !important;
    break-after: auto !important;
}

/* Modificar para permitir selección pero prevenir arrastre */
div:not(.xioleni-editor-container) img.xioleni-emoji-inline {
    /* Para divs que no son el editor, prevenir arrastre pero permitir selección */
    -webkit-user-drag: none !important;
    -moz-user-drag: none !important;
    -ms-user-drag: none !important;
    /* Permitir interacción para copia */
    pointer-events: auto !important;
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
}

/* Estilos para el contenedor del editor - asegurar que los emojis se queden dentro */
.xioleni-editor-container {
    position: relative !important; /* Para contener correctamente los elementos absolutos */
    z-index: 1 !important; /* Nivel de apilamiento adecuado */
}

/* Evitar que los emojis se muevan a lugares incorrectos */
.xioleni-editor {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important; /* Permitir que el contenido sea visible */
}

/* Estilo específico para emojis en el muro (publicaciones) */
.xioleni-post-content img.xioleni-emoji-inline {
    /* Forzar posición en línea */
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    /* Permitir copia */
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
}

/* SOLUCIÓN MEJORADA PARA COPIA DE EMOJIS */

/* Capturar cualquier elemento que comience o contenga "Emoji" */
[id*="Emoji"], [class*="Emoji"], [id^="Emoji"], [class^="Emoji"],
/* Capturar cuando tiene espacio después de "Emoji" */
[id*="Emoji "], [class*="Emoji "], [id^="Emoji "], [class^="Emoji "] {
    position: relative !important;
    font-size: 0 !important; /* Ocultar el texto "Emoji..." */
    color: transparent !important; /* Hacer invisible cualquier texto */
    opacity: 1 !important;
    display: inline !important;
    user-select: all !important; /* Permitir selección completa */
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    -khtml-user-select: all !important;
}

/* Hacer que el texto dentro de estos elementos sea invisible pero seleccionable */
[id*="Emoji"]::before, [class*="Emoji"]::before, 
[id^="Emoji"]::before, [class^="Emoji"]::before,
[id*="Emoji "]::before, [class*="Emoji "]::before, 
[id^="Emoji "]::before, [class^="Emoji "]::before {
    content: "" !important;
    font-size: 0 !important;
    color: transparent !important;
    display: inline !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Asegurar que las imágenes dentro de elementos Emoji tengan el tamaño correcto */
[id*="Emoji"] img, [class*="Emoji"] img,
[id^="Emoji"] img, [class^="Emoji"] img,
[id*="Emoji "] img, [class*="Emoji "] img,
[id^="Emoji "] img, [class^="Emoji "] img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    margin: 0 1px !important;
    user-select: all !important;
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 480px) {
    [id*="Emoji"] img, [class*="Emoji"] img,
    [id^="Emoji"] img, [class^="Emoji"] img,
    [id*="Emoji "] img, [class*="Emoji "] img,
    [id^="Emoji "] img, [class^="Emoji "] img {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* Soporte específico para navegadores difíciles */
/* Firefox */
@-moz-document url-prefix() {
    [id*="Emoji"], [class*="Emoji"], [id^="Emoji"], [class^="Emoji"],
    [id*="Emoji "], [class*="Emoji "], [id^="Emoji "], [class^="Emoji "] {
        color: rgba(0,0,0,0) !important;
        text-shadow: none !important;
        background: transparent !important;
        -moz-user-select: all !important;
    }
    
    [id*="Emoji"] img, [class*="Emoji"] img,
    [id^="Emoji"] img, [class^="Emoji"] img,
    [id*="Emoji "] img, [class*="Emoji "] img,
    [id^="Emoji "] img, [class^="Emoji "] img {
        -moz-user-select: all !important;
        cursor: text !important;
    }
}

/* IE/Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    [id*="Emoji"], [class*="Emoji"], [id^="Emoji"], [class^="Emoji"],
    [id*="Emoji "], [class*="Emoji "], [id^="Emoji "], [class^="Emoji "] {
        font-size: 1px !important;
        color: transparent !important;
        text-indent: -9999px !important;
        -ms-user-select: all !important;
    }
    
    [id*="Emoji"] img, [class*="Emoji"] img,
    [id^="Emoji"] img, [class^="Emoji"] img,
    [id*="Emoji "] img, [class*="Emoji "] img,
    [id^="Emoji "] img, [class^="Emoji "] img {
        -ms-user-select: all !important;
    }
}