/* VeltrixOS shared emoji picker — internal structure built by mountEmojiPicker()
   in /js/emoji-picker.js. The panel itself (size, position, border, shadow) is
   still owned by each consuming module — this only styles what's INSIDE it. */
.vs-ep-search-row { padding:8px; flex-shrink:0; }
.vs-ep-search {
  width:100%; box-sizing:border-box; padding:7px 12px;
  background:var(--vs-bg-3); border:1px solid var(--vs-glass-border); border-radius:20px;
  color:var(--vs-text-primary); font-size:12px; outline:none; font-family:inherit;
}
.vs-ep-cat-jump { display:flex; gap:2px; padding:0 6px 6px; flex-shrink:0; overflow-x:auto; }
.vs-ep-cat-jump button { background:none; border:none; font-size:17px; padding:5px 6px; border-radius:7px; cursor:pointer; line-height:1; flex-shrink:0; }
.vs-ep-cat-jump button:hover { background:var(--vs-bg-3); }
.vs-ep-grid-scroll { flex:1; overflow-y:auto; padding:0 6px 8px; min-height:0; }
.vs-ep-section-title {
  font-size:10px; font-weight:700; color:var(--vs-text-muted); text-transform:uppercase;
  letter-spacing:0.4px; padding:8px 6px 4px; position:sticky; top:0;
  background:var(--vs-ep-panel-bg, var(--vs-bg-card)); z-index:1;
}
.vs-ep-section-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:1px; }
.vs-ep-item {
  background:none; border:none; font-size:19px; padding:6px 0; cursor:pointer;
  border-radius:7px; line-height:1; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.vs-ep-item:hover { background:var(--vs-bg-3); }

/* Skin-tone support — a small corner dot on the ~330 applicable tiles opens a flyout of the 5
   Fitzpatrick variants (hover on desktop, tap on the dot for touch); the base tile itself still
   selects the default/no-modifier character on a direct click. */
.vs-ep-tone-dot {
  position:absolute; bottom:2px; right:2px; width:6px; height:6px; border-radius:50%;
  background:var(--vs-text-muted); opacity:.5;
}
.vs-ep-item--tone:hover .vs-ep-tone-dot { opacity:.9; }
.vs-ep-tone-flyout {
  position:fixed; display:flex; gap:2px; padding:5px;
  background:var(--vs-ep-panel-bg, var(--vs-bg-card)); border:1px solid var(--vs-glass-border);
  border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:10000;
}
.vs-ep-tone-flyout .vs-ep-item { width:30px; height:30px; padding:0; }