Switching to a proper emojii picker

style.css

@@ -199,6 +199,7 @@ main {
   flex-direction: column;
   align-items: center;
   gap: 10px;
+  position: relative;
 }
 
 .emoji-display {
@@ -229,39 +230,30 @@ main {
   background: var(--accent-dim);
 }
 
-/* Visible emoji text input — slides in when picking */
-.emoji-picker-input {
-  width: 200px;
-  text-align: center;
-  font-size: 1.5rem;
-  /* collapse when hidden */
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  overflow: hidden;
+emoji-picker {
   opacity: 0;
+  visibility: hidden;
   pointer-events: none;
-  border-color: transparent;
-  transition:
-    max-height 0.2s ease,
-    padding 0.18s ease,
-    opacity 0.15s ease,
-    border-color 0.15s ease;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  width: min(340px, calc(100vw - 40px));
+  border-radius: var(--r);
+  --background: var(--surface);
+  --border-color: var(--border);
+  --indicator-color: var(--accent);
+  --input-border-color: var(--border);
+  --input-font-color: var(--text);
+  --input-placeholder-color: var(--muted);
+  --outline-color: var(--accent);
 }
 
-.emoji-section.picking .emoji-picker-input {
-  max-height: 60px;
-  padding-top: 9px;
-  padding-bottom: 9px;
+.emoji-section.picking emoji-picker {
   opacity: 1;
-  pointer-events: all;
-  border-color: var(--accent);
-}
-
-.emoji-hint {
-  font-size: 0.8rem;
-  color: var(--muted);
-  transition: opacity 0.15s;
+  visibility: visible;
+  pointer-events: auto;
 }
 
 /* ── Form fields ───────────────────────────────────────────────────────── */