/* Anular las reglas que ocultan los scrollbars */
#xioleni-emoji-additional .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-animals .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-travelers .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-transportation .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-various .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
}

/* Anular las reglas específicas para todos los grids para hacer que sean consistentes */
#xioleni-emoji-additional .emoji-grid, 
#xioleni-emoji-animals .emoji-grid, 
#xioleni-emoji-travelers .emoji-grid,
#xioleni-emoji-transportation .emoji-grid,
#xioleni-emoji-various .emoji-grid,
#xioleni-emoji-messages .emoji-grid {
    /* Configuración uniforme para todas las secciones */
    max-height: 84px !important;
    grid-auto-rows: 40px !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px !important;
    overflow-y: auto !important; /* Forzar overflow scroll */
    padding-right: 8px !important;
    padding-bottom: 10px !important;
    
    /* Configuración de scroll para mover de una fila a la vez */
    scroll-snap-type: y proximity !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important; /* Firefox */
    -ms-overflow-style: auto !important; /* IE/Edge */
}

/* Estilos de scrollbar unificados para todos */
#xioleni-emoji-additional .emoji-grid::-webkit-scrollbar-thumb,
#xioleni-emoji-animals .emoji-grid::-webkit-scrollbar-thumb,
#xioleni-emoji-travelers .emoji-grid::-webkit-scrollbar-thumb,
#xioleni-emoji-transportation .emoji-grid::-webkit-scrollbar-thumb,
#xioleni-emoji-various .emoji-grid::-webkit-scrollbar-thumb,
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 5px !important;
}

#xioleni-emoji-additional .emoji-grid::-webkit-scrollbar-track,
#xioleni-emoji-animals .emoji-grid::-webkit-scrollbar-track,
#xioleni-emoji-travelers .emoji-grid::-webkit-scrollbar-track,
#xioleni-emoji-transportation .emoji-grid::-webkit-scrollbar-track,
#xioleni-emoji-various .emoji-grid::-webkit-scrollbar-track,
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px !important;
}

/* Establecer dimensiones exactas para TODOS los botones de emojis */
#xioleni-emoji-additional .emoji-button,
#xioleni-emoji-animals .emoji-button,
#xioleni-emoji-travelers .emoji-button,
#xioleni-emoji-transportation .emoji-button,
#xioleni-emoji-various .emoji-button,
#xioleni-emoji-messages .emoji-button {
    min-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 2px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    background-color: #444 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s, background-color 0.2s !important;
}

/* Estilo para hover en los botones */
#xioleni-emoji-additional .emoji-button:hover,
#xioleni-emoji-animals .emoji-button:hover,
#xioleni-emoji-travelers .emoji-button:hover,
#xioleni-emoji-transportation .emoji-button:hover,
#xioleni-emoji-various .emoji-button:hover,
#xioleni-emoji-messages .emoji-button:hover {
    background-color: #555 !important;
    transform: scale(1.05) !important;
}

/* Asegurar que el título tenga el mismo estilo en todos los paneles */
#xioleni-emoji-additional .title,
#xioleni-emoji-animals .title,
#xioleni-emoji-travelers .title,
#xioleni-emoji-transportation .title,
#xioleni-emoji-various .title,
#xioleni-emoji-messages .title {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    text-transform: none !important;
}

/* Ajustes para móviles */
@media (max-width: 480px) {
    /* Aumentar altura del panel principal en móviles */
    #xioleni-emoji-panel.expanded {
        max-height: 195px !important;
        min-height: 195px !important;
    }
    
    /* Ajustar todas las grids */
    #xioleni-emoji-additional .emoji-grid, 
    #xioleni-emoji-animals .emoji-grid, 
    #xioleni-emoji-travelers .emoji-grid,
    #xioleni-emoji-transportation .emoji-grid,
    #xioleni-emoji-various .emoji-grid,
    #xioleni-emoji-messages .emoji-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        max-height: 84px !important;
        /* Scroll para avanzar de una fila a la vez */
        scroll-snap-type: y mandatory !important;
    }
    
    /* Ajustar altura de las grids para móviles */
    #xioleni-emoji-additional .emoji-grid, 
    #xioleni-emoji-animals .emoji-grid, 
    #xioleni-emoji-travelers .emoji-grid,
    #xioleni-emoji-transportation .emoji-grid,
    #xioleni-emoji-various .emoji-grid,
    #xioleni-emoji-messages .emoji-grid {
        max-height: 100px !important; /* Mayor altura para asegurar 2 filas completas */
        grid-auto-rows: 45px !important; /* Filas más altas para móviles */
        padding-bottom: 5px !important;
    }
    
    /* Ajustar botones de emoji para móviles */
    #xioleni-emoji-additional .emoji-button,
    #xioleni-emoji-animals .emoji-button,
    #xioleni-emoji-travelers .emoji-button,
    #xioleni-emoji-transportation .emoji-button,
    #xioleni-emoji-various .emoji-button,
    #xioleni-emoji-messages .emoji-button {
        min-width: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        width: 45px !important;
        height: 45px !important;
        padding: 3px !important;
        background-color: #444 !important;
        border-radius: 6px !important;
    }
} 
#xioleni-editor img.xioleni-emoji-inline,
.xioleni-post-content img.xioleni-emoji-inline,
[id^="xioleni-post-"] img.xioleni-emoji-inline {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: inline !important;
    vertical-align: middle !important;
    float: none !important;
}