/* Corrección específica para forzar exactamente 2 filas en todos los dispositivos */

/* Forzar layout de 2 filas en los 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-countries .emoji-grid,
#xioleni-emoji-messages .emoji-grid {
    /* Estructura de grid forzada a 2 filas */
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
    
    /* Tamaño fijo para mostrar exactamente 2 filas completas */
    max-height: 84px !important;
    min-height: 84px !important;
    
    /* Scroll vertical configurado para 2 filas */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    
    /* Mejorar comportamiento de scroll */
    scroll-snap-type: y mandatory !important;
    scroll-behavior: smooth !important;
    
    /* Ajustar espaciado */
    gap: 6px !important;
    padding-right: 8px !important;
    margin-bottom: 5px !important;
}

/* Forzar tamaño específico en cada botón para 2 filas exactas */
#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-countries .emoji-button,
#xioleni-emoji-messages .emoji-button {
    min-width: 34px !important;
    min-height: 34px !important;
    width: 34px !important;
    height: 34px !important;
    scroll-snap-align: start !important;
}

/* Forzar scroll visible en todas las secciones */
#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-countries .emoji-grid::-webkit-scrollbar,
#xioleni-emoji-messages .emoji-grid::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
}

/* Estilo del thumb del scrollbar */
#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-countries .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;
}

/* Estilo del track del scrollbar */
#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-countries .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;
}

/* Asegurar altura suficiente del panel principal expandido */
#xioleni-emoji-panel.expanded {
    max-height: 220px !important;
    min-height: 220px !important;
}

/* Ajuste para que el botón no interfiera con la estructura */
#xioleni-upload-tag-btn {
    margin: 5px auto 8px auto !important;
    display: block !important;
    width: auto !important;
    position: relative !important;
}

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 480px) {
    /* Forzar 5 columnas y 2 filas en móvil */
    #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-countries .emoji-grid,
    #xioleni-emoji-messages .emoji-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        max-height: 82px !important;
        min-height: 82px !important;
        gap: 3px !important;
        margin-bottom: 0 !important;
        margin-top: 4px !important;
        padding: 0 5px 0 0 !important;
    }
    
    /* Mejorar espaciado de títulos */
    #xioleni-emoji-additional .title, 
    #xioleni-emoji-animals .title, 
    #xioleni-emoji-travelers .title,
    #xioleni-emoji-transportation .title,
    #xioleni-emoji-various .title,
    #xioleni-emoji-countries .title,
    #xioleni-emoji-messages .title {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        line-height: 1 !important;
        padding: 0 !important;
    }
    
    /* Ajustar secciones para mejor espaciado */
    #xioleni-emoji-additional, 
    #xioleni-emoji-animals, 
    #xioleni-emoji-travelers,
    #xioleni-emoji-transportation,
    #xioleni-emoji-various,
    #xioleni-emoji-countries,
    #xioleni-emoji-messages {
        padding-top: 4px !important;
        margin-top: 4px !important;
        border-top: 1px solid #555 !important;
    }
    
    /* Optimizar el botón de Upload Tag en móvil */
    #xioleni-upload-tag-btn {
        margin: 5px auto 8px auto !important;
        padding: 3px 10px !important;
        font-size: 12px !important;
    }
    
    #xioleni-emoji-panel.expanded {
        max-height: 230px !important;
        min-height: 230px !important;
        padding-top: 5px !important;
        padding-bottom: 2px !important;
    }
}