.emoji-picker-portal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999999;
}

.emoji-picker {
position: absolute;
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
opacity: 0;
transform: translateY(-8px) scale(0.95);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
font-size: 20px;
line-height: 1.2;
user-select: none;
display: flex;
flex-direction: column;
gap: 8px;
width: 200px;
max-width: calc(100vw - 32px);
}

.emoji-picker.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}

.emoji-picker:hover {
background: #252b3d;
transform: translateY(0) scale(1.02);
}

.emoji-row {
display: flex;
gap: 8px;
justify-content: center;
}

.emoji-char {
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.2s ease;
display: inline-block;
min-width: 32px;
text-align: center;
}

.emoji-char:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.2);
}

.emoji-char:active {
transform: scale(0.9);
}