/* ========================================
   SocialHub - Global Emoji Picker UI
   ======================================== */

.sh-emoji-picker {
    position: fixed; /* Position relative to viewport to avoid container clipping */
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    width: 340px !important; 
    max-width: calc(100vw - 20px);
    height: 400px !important; /* Matches pickerHeight in JS */
    display: none;
    flex-direction: column !important;
    overflow: hidden !important;
    backdrop-filter: blur(15px);
    box-sizing: border-box;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
}

.sh-emoji-picker.show {
    display: flex;
    animation: emojiPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emojiPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.emoji-picker-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-hover);
}

.emoji-grid {
    flex: 1;
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    align-content: start;
    gap: 2px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-card);
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding: 5px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
}

.emoji-item:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

/* Component Trigger - Centralized styling for the emoji button */
.emoji-trigger {
    cursor: pointer;
    transition: all 0.2s ease;
}

.emoji-trigger i { color: #f59e0b; }

/* Mobile Responsiveness & Overflow Prevention */
@media (max-width: 1024px) {
    .sh-emoji-picker {
        position: fixed !important; 
        top: unset !important;
        bottom: 80px !important; /* Positioned above the mobile bottom nav bar */
        left: 10px !important;
        right: 10px !important;
        width: auto !important; /* Fills space between left and right */
        margin: 0 !important;
        height: 300px !important;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
        max-height: 50vh !important; /* Never take more than half the screen */
        transform: translateZ(0) !important; /* Force hardware acceleration and ignore parent transforms */
    }
    .sh-emoji-picker.show {
        animation: emojiPopMobile 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

@keyframes emojiPopMobile {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}