/* Última corrección para forzar exactamente 2 filas en móviles */

/* Forzar 2 filas exactas en móviles */
@media (max-width: 480px) {
    /* Panel principal */
    #xioleni-emoji-panel.expanded {
        max-height: 230px !important;
        min-height: 230px !important;
    }
    
    /* Ajustar altura de las secciones individuales */
    #xioleni-emoji-additional, 
    #xioleni-emoji-animals, 
    #xioleni-emoji-travelers, 
    #xioleni-emoji-transportation,
    #xioleni-emoji-various,
    #xioleni-emoji-messages {
        padding: 5px !important;
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }
    
    /* Aumentar significativamente la altura de 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 {
        max-height: 140px !important;
        min-height: 140px !important;
        grid-auto-rows: 62px !important;
        display: grid !important;
        grid-template-rows: repeat(2, 62px) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Asegurar espacio suficiente para el scroll */
        padding-right: 10px !important;
    }
    
    /* Tamaño fijo para botones de emoji */
    #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: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        width: 54px !important;
        height: 54px !important;
        padding: 4px !important;
        margin: 0 !important;
        /* Asegurar alineación vertical para mostrar completo */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #444 !important;
        border-radius: 6px !important;
        transition: transform 0.2s, background-color 0.2s !important;
    }
    
    #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;
    }
    
    /* Tamaño de las imágenes */
    #xioleni-emoji-additional .emoji-button img,
    #xioleni-emoji-animals .emoji-button img,
    #xioleni-emoji-travelers .emoji-button img,
    #xioleni-emoji-transportation .emoji-button img,
    #xioleni-emoji-various .emoji-button img,
    #xioleni-emoji-messages .emoji-button img {
        width: 38px !important;
        height: 38px !important;
    }
    
    /* Asegurarse de que los títulos no ocupen espacio innecesario */
    #xioleni-emoji-messages .title,
    #xioleni-emoji-additional .title,
    #xioleni-emoji-animals .title,
    #xioleni-emoji-travelers .title,
    #xioleni-emoji-transportation .title,
    #xioleni-emoji-various .title {
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        height: 14px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        color: #fff !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        text-transform: none !important;
    }
    
    /* Ajustes específicos para la sección de mensajes que tiene más emojis */
    #xioleni-emoji-messages .emoji-grid,
    #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 {
        padding-right: 10px !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        /* Asegurar scroll completo hasta el final */
        padding-bottom: 10px !important;
    }
    
    /* Ajustar el espacio entre filas */
    #xioleni-emoji-messages .emoji-grid,
    #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 {
        gap: 8px !important;
    }
    
    /* Asegurar scrollbar visible en todas las secciones */
    #xioleni-emoji-messages .emoji-grid::-webkit-scrollbar,
    #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 {
        width: 6px !important;
        display: block !important;
        visibility: visible !important;
    }
    
    #xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-thumb,
    #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 {
        background-color: rgba(255, 255, 255, 0.6) !important;
        border-radius: 5px !important;
        visibility: visible !important;
    }
    
    #xioleni-emoji-messages .emoji-grid::-webkit-scrollbar-track,
    #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 {
        background-color: rgba(0, 0, 0, 0.3) !important;
        border-radius: 5px !important;
        visibility: visible !important;
    }
}

/* Reglas globales para asegurar consistencia en todos los dispositivos */
#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;
}

#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;
}

/* Ajustes específicos para scroll-snap en todas las resoluciones */
#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 {
    scroll-snap-type: y mandatory !important;
    scroll-behavior: smooth !important;
    /* Asegurar que haya suficiente contenido scrollable */
    padding-bottom: 20px !important;
    /* Ajustar la altura total para contener exactamente 2 filas visibles */
    height: auto !important;
}

#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 {
    scroll-snap-align: start !important;
}

/* Ajuste para scroll padding */
#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 {
    scroll-padding-bottom: 60px !important;
} 

/* Hack para asegurar que el scroll llegue hasta el final en la última fila */
#xioleni-emoji-additional .emoji-grid::after, 
#xioleni-emoji-animals .emoji-grid::after, 
#xioleni-emoji-travelers .emoji-grid::after,
#xioleni-emoji-transportation .emoji-grid::after,
#xioleni-emoji-various .emoji-grid::after,
#xioleni-emoji-messages .emoji-grid::after {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
}