/* ==========================================================================
   css/components/emoji-gif-picker.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4437-4487.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- EMOJI / GIF PICKER ----------------------------------------- */
.picker-backdrop { position:fixed;inset:0;z-index:900 }
.emoji-picker { position:fixed;bottom:72px;right:56px;width:420px;height:460px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.55);display:none;flex-direction:column;z-index:901;overflow:hidden;animation:menu-in 0.18s var(--ease-out, ease) }
.picker-tabs { display:flex;border-bottom:1px solid var(--border);flex-shrink:0 }
.picker-tab { flex:1;padding:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:.15s;user-select:none }
.picker-tab.active { color:var(--text-primary);border-bottom-color:var(--accent) }
.picker-search { padding:8px;border-bottom:1px solid var(--border);flex-shrink:0 }
.picker-search input { width:100%;background:var(--bg-void);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text-primary);font-size:13px;outline:none }
.picker-search input:focus { border-color:var(--accent) }
/* Emoji picker body sits next to a category rail (like the reference). */
.picker-main { flex:1;display:flex;min-height:0;overflow:hidden }
.picker-cats { width:44px;flex-shrink:0;overflow-y:auto;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:2px;border-right:1px solid var(--border);background:var(--bg-void);scrollbar-width:none }
.picker-cats::-webkit-scrollbar { display:none }
.picker-cat { width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:8px;cursor:pointer;opacity:.65;transition:opacity .1s, background .1s }
.picker-cat:hover { opacity:1;background:var(--bg-hover) }
.picker-cat.active { opacity:1;background:var(--bg-active) }
.picker-preview { flex-shrink:0;height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid var(--border);background:var(--bg-void) }
.picker-preview .pv-emoji { font-size:28px;line-height:1 }
.picker-preview .pv-name { font-size:13px;color:var(--text-secondary);font-weight:600 }
.picker-preview:empty { display:none }
.picker-body { flex:1;overflow-y:auto;padding:8px }
.emoji-cat-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);padding:8px 4px 4px }
.emoji-grid { display:flex;flex-wrap:wrap;gap:2px }
.emoji-btn { width:38px;height:38px;font-size:24px;background:none;border:none;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .1s }
.emoji-btn:hover { background:var(--bg-hover) }
/* Masonry: 2 balanced columns so GIFs of different heights pack together with no
   empty space under the shorter ones (a fixed grid left gaps). */
.gif-grid { columns:2;column-gap:6px }
.gif-item { position:relative;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--bg-void);break-inside:avoid;margin-bottom:6px }
.gif-item img { width:100%;height:auto;display:block }
.gif-item:hover .gif-fav-btn { opacity:1 }
.msg-image-embed:hover .gif-fav-btn { opacity:1 }
.gif-fav-btn { position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.35;transition:opacity .15s, transform .15s;font-size:13px;line-height:1 }
.gif-fav-btn:hover { transform:scale(1.2) }
.gif-fav-btn.faved { opacity:1 }
.gif-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);padding:8px 4px 4px;column-span:all }
.gif-cat-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px }
.gif-cat-tile { position:relative;border-radius:8px;overflow:hidden;cursor:pointer;height:80px;background:var(--bg-void) }
.gif-cat-tile img { width:100%;height:100%;object-fit:cover;display:block }
.gif-cat-tile-label { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 100%) }
.gif-back-btn { background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 6px 0 0;font-size:18px;line-height:1;display:flex;align-items:center;flex-shrink:0 }
.gif-back-btn:hover { color:var(--text-primary) }
.picker-search { display:flex;align-items:center;gap:4px }
.gif-overlay { position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:.15s;display:flex;align-items:flex-start;justify-content:flex-end;padding:6px }
.gif-item:hover .gif-overlay { opacity:1 }
.gif-star { font-size:18px;cursor:pointer;line-height:1;transition:transform .1s }
.gif-star:hover { transform:scale(1.2) }
.gif-label { position:absolute;bottom:0;left:0;right:0;padding:4px 6px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);pointer-events:none }
.gif-giphy { display:flex;align-items:center;justify-content:flex-end;padding:4px 2px;flex-shrink:0 }
.gif-giphy img { height:14px;opacity:.5 }