/* Home 1.87's expressions menu (js/emote-menu.mjs; docs/ui/HUD.md §6). Sizes are Home's
   1280×720 pixels inside a scaled anchor at the screen centre; colours were fitted on the native
   frames for OSD colour 11 (--osd = variant 0, --osd-hi = variant 1) and are written relative to
   them (Home lightens the tint additively), so the player's OSD colour tints the menu as Home does. #emotes overrides the old .hud/.emotes panel rules. */
#emotes {
  --em-frame: rgb(244 244 244 / .75);
  --em-edge: rgb(206 206 206 / .75);
  --em-row: linear-gradient(color-mix(in srgb, color-mix(in srgb, var(--osd-hi, #009bdb) 55%, #fff) 87.5%, transparent),
    color-mix(in srgb, color-mix(in srgb, var(--osd, #0091d1) 55%, #fff) 87.5%, transparent));
  --em-sel: linear-gradient(color-mix(in srgb, var(--osd-hi, #009bdb) 75%, #fff), var(--osd, #0091d1));
  --em-ink: #fff;
  position: fixed; inset: 0; z-index: 7; display: block; width: auto; max-width: none; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: none; transform: none; pointer-events: none; touch-action: manipulation; overflow: hidden;
}
/* Native, colour 11: rows (136,220,255)→(110,192,231) at α .875, focused (47,193,255)→(0,145,211). */
@supports (color: rgb(from red r g b)) {
  #emotes {
    --em-row: linear-gradient(rgb(from var(--osd-hi, #009bdb) calc(r + 136) calc(g + 65) calc(b + 36) / .875), rgb(from var(--osd, #0091d1) calc(r + 110) calc(g + 47) calc(b + 22) / .875));
    --em-sel: linear-gradient(rgb(from var(--osd-hi, #009bdb) calc(r + 47) calc(g + 38) calc(b + 36)), rgb(from var(--osd, #0091d1) r g calc(b + 2)));
  }
}
#emotes[hidden] { display: none; }
#emotes::before { content: none; }
html.night #emotes {
  --em-frame: rgb(30 34 39 / .78);
  --em-edge: rgb(10 12 14 / .8);
  --em-row: linear-gradient(color-mix(in srgb, color-mix(in srgb, var(--osd-hi, #2ac0fd) 42%, #12171c) 88%, transparent),
    color-mix(in srgb, color-mix(in srgb, var(--osd, #0093d2) 38%, #0b0f13) 88%, transparent));
}

.em-level { position: absolute; width: 0; height: 0; transform-origin: 0 0; font: 400 19px/30px var(--h-font); color: var(--em-ink); }
.em-level.in { animation: em-in .2s linear both; }
.em-level.out { animation: em-out .2s linear both; }
.em-level.out * { pointer-events: none !important; }
@keyframes em-in { from { opacity: 0; } }
@keyframes em-out { to { opacity: 0; } }

/* Panels: the rows above / below the focused one, and the focused row's own frame. */
.em-panel, .em-focus { position: absolute; display: flex; border: 4px solid var(--em-frame); border-radius: 5px; outline: 1px solid var(--em-edge); outline-offset: -1px; }
.em-panel { flex-direction: column; left: calc(var(--w) / -2 - 4px); width: calc(var(--w) + 8px); }
.em-down { top: 23px; }
.em-up { bottom: 23px; }
.em-focus { top: -19px; right: calc(var(--w) / -2 - 4px); }
#emotes .em-panel > * + * { border-top: 4px solid var(--em-frame); }

#emotes button { pointer-events: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; min-height: 0; box-shadow: none; text-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#emotes .em-row, #emotes .em-more, #emotes .em-tab { box-sizing: content-box; }
#emotes button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.em-row { display: flex; width: var(--w); height: 30px; }
.em-label { flex: 1; min-width: 0; height: 30px; border-radius: 3px; background: var(--em-row); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-arrow { flex: none; width: 30px; height: 30px; border-left: 4px solid var(--em-frame); box-sizing: content-box; position: relative; }
.em-arrow::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--em-row); }
.em-arrow::after { content: ""; position: absolute; inset: 7px; background: #fff; opacity: .5;
  -webkit-mask: url(/api/wardrobe/icon/SKIN_TEXTURE_QUICKCHAT_ARROW_ICON) center / 16px 16px no-repeat; mask: url(/api/wardrobe/icon/SKIN_TEXTURE_QUICKCHAT_ARROW_ICON) center / 16px 16px no-repeat; }
.em-row.focused .em-label, .em-row.focused .em-arrow::before, .em-tab { background: var(--em-sel); }
.em-row.focused .em-arrow::after { opacity: 1; }
.em-tab { height: 30px; border-radius: 3px !important; text-align: center; white-space: nowrap; }
#emotes .em-tab { background: var(--em-sel); }
#emotes .em-focus.with-tab .em-row { border-left: 4px solid var(--em-frame); }
.em-row.active .em-label { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .9); } /* the current mood (browser mark) */
.em-empty { display: block; width: 280px; padding: 0 12px; }

/* Chevron cell when the list runs on (the chat log's scroller arrow, in the OSD colour). */
.em-more { display: block; width: 100%; height: 30px; background: transparent; }
.em-more::after { content: ""; display: block; width: 22px; height: 13px; margin: 8px auto 0; background: var(--osd, #0093d2);
  -webkit-mask: url(/api/wardrobe/icon/SKIN_TEXTURE_CHATLOG_SCROLLER_ARROW) center / 100% 100% no-repeat; mask: url(/api/wardrobe/icon/SKIN_TEXTURE_CHATLOG_SCROLLER_ARROW) center / 100% 100% no-repeat; }
.em-more.down::after { transform: rotate(180deg); margin-top: 9px; }
#emotes .em-panel .em-more { background: var(--em-frame); }

@media (hover: hover) {
  .em-row:not(.focused):hover .em-label, .em-row:not(.focused):hover .em-arrow::before { filter: brightness(1.12); }
  .em-tab:hover, .em-row.focused:hover .em-label { filter: brightness(1.06); }
}