/* Emoji picker — moss and brass, not Slack grey.
   House law (research/menu-design-rehaul.md): ONE 1px brass hairline, and it belongs to the
   outer panel. Everything inside separates by background value steps (well -> panel -> raised),
   never by more borders. Hard 11px type floor. Tokens come from viewer/game-ui.css. */

.emoji-picker {
  position: fixed;
  z-index: 46; /* above #chatcontext (45) so a picker opened from the composer wins */
  width: min(332px, calc(100vw - 16px));
  max-height: min(390px, 62dvh);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
  color: var(--ui-ink, #f2e6bd);
  /* OPAQUE. At .98 the world behind still ghosted through — lamp posts and name
     plates drifting under the grid read as a rendering fault, not as depth. */
  background: linear-gradient(150deg, #1e3025, #101b14);
  border: 1px solid var(--ui-hairline, rgba(198, 168, 91, .5));
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .48);
  font-family: var(--font-body, ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif);
}

.emoji-picker[hidden] { display: none !important; }

/* ---- header ------------------------------------------------------------------------- */

.emoji-picker-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.emoji-search {
  min-width: 0;
  min-height: 34px;
  flex: 1;
  padding: 6px 10px;
  box-sizing: border-box;
  color: var(--ui-ink, #f2e6bd);
  /* The panel already owns this screen's one brass hairline. Interior
     structure is background steps, so the field is a well, not a box. */
  background: var(--ui-well, #0f1813);
  border: 0;
  border-radius: 9px;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

.emoji-search::placeholder { color: var(--ui-muted, #a9b79e); opacity: .82; }
.emoji-search:focus { box-shadow: inset 0 0 0 2px rgba(149, 207, 139, .55); }
.emoji-search::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

.emoji-tone-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ui-raised, #2a3a2f);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.emoji-tone-btn:hover { background: #34473a; }

.emoji-tone-strip {
  padding: 4px;
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  background: var(--ui-well, #0f1813);
  border-radius: 10px;
}

.emoji-tone-strip[hidden] { display: none !important; }

.emoji-tone-swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.emoji-tone-swatch:hover { background: var(--ui-raised, #2a3a2f); }
/* Selection is the one legal extra stroke; it is allowed to coexist with the focus ring. */
.emoji-tone-swatch.on { box-shadow: inset 0 0 0 2px var(--ui-ink, #f2e6bd); }

/* ---- group strip -------------------------------------------------------------------- */

.emoji-tabs {
  padding: 3px;
  display: flex;
  gap: 2px;
  background: var(--ui-well, #0f1813);
  border-radius: 10px;
}

.emoji-tab {
  min-width: 0;
  height: 30px;
  padding: 0;
  flex: 1;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: .74;
  transition: opacity .14s ease, background .14s ease;
}

.emoji-tab:hover { background: var(--ui-raised, #2a3a2f); opacity: 1; }

/* Which group you are looking at. Without this the strip is eight buttons that
   only ever answer, never report, and scrolling loses your place. */
.emoji-tab.on {
  background: var(--ui-raised, #2a3a2f);
  box-shadow: inset 0 -2px 0 var(--ui-brass, #c6a85b);
  opacity: 1;
}

/* ---- grid --------------------------------------------------------------------------- */

.emoji-body {
  min-height: 0;
  flex: 1;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 163, 101, .38) transparent;
}

/* A row sliced in half at the edge of the scroller reads as a clipping bug, so
   the list fades where it actually continues — and only there, so the first and
   last rows never sit half-faded when there is nothing beyond them. The classes
   come from the scroll handler. */
.emoji-body.has-above,
.emoji-body.has-more {
  --fade-top: 0px;
  --fade-bot: 0px;
  -webkit-mask-image: linear-gradient(transparent 0, #000 var(--fade-top),
    #000 calc(100% - var(--fade-bot)), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 var(--fade-top),
    #000 calc(100% - var(--fade-bot)), transparent 100%);
}

.emoji-body.has-above { --fade-top: 16px; }
.emoji-body.has-more { --fade-bot: 20px; }

.emoji-section[hidden] { display: none !important; }

.emoji-heading {
  margin: 6px 0 4px 2px;
  color: var(--ui-brass, #c6a85b);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.emoji-section:first-child .emoji-heading { margin-top: 0; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
}

.emoji-cell {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  transition: background .1s ease, transform .1s ease;
}

.emoji-cell:hover { background: var(--ui-raised, #2a3a2f); }
.emoji-cell:active { transform: scale(.92); }

.emoji-empty {
  margin: 18px 8px;
  color: var(--ui-muted, #a9b79e);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.emoji-empty[hidden] { display: none !important; }

/* ---- preview ------------------------------------------------------------------------ */

.emoji-preview {
  min-height: 26px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  background: var(--ui-well, #0f1813);
  border-radius: 9px;
}

.emoji-preview-char { font-size: 17px; line-height: 1; }
.emoji-preview-char:empty { display: none; }
.emoji-preview-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--ui-muted, #a9b79e);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- thumbs --------------------------------------------------------------------------
   44x44 minimum on coarse pointers, and one fewer column so the cells can actually get
   there inside a phone-width panel. */

@media (pointer: coarse) {
  .emoji-picker { width: min(360px, calc(100vw - 14px)); max-height: min(420px, 56dvh); }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }
  .emoji-cell { min-height: 44px; font-size: 25px; }
  .emoji-search { min-height: 44px; font-size: 16px; }
  .emoji-tone-btn { width: 44px; height: 44px; font-size: 20px; }
  .emoji-tone-swatch { width: 44px; min-width: 44px; height: 44px; font-size: 21px; }
  .emoji-tab { height: 44px; min-height: 44px; font-size: 18px; }
  .emoji-preview { min-height: 30px; }
  .emoji-preview-name { font-size: 12px; }
}

@media (max-width: 560px) {
  .emoji-picker {
    width: calc(100vw - max(14px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-cell,
  .emoji-tab { transition: none !important; }
  .emoji-cell:active { transform: none !important; }
}