/* ═══ EMOJI LAB — picker · creator · stickers (B51-30) ═══════════════════ */
.emoji-lab{ position:fixed;z-index:10000;width:360px;max-width:calc(100vw - 16px);
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--emj-fam,inherit); }
.emoji-lab .el-hd{ display:flex;align-items:center;gap:6px;padding:8px 8px 6px;border-bottom:1px solid var(--border); }
.emoji-lab .el-si{ font-size:18px;color:var(--fg-3);margin-inline-start:4px; }
.emoji-lab .el-srch{ flex:1;min-width:0;height:30px;border:0;background:transparent;color:var(--fg-1);font:inherit;font-size:13px;outline:none; }
.emoji-lab .el-srch::-webkit-search-cancel-button{ filter:grayscale(1);opacity:.5; }
.emoji-lab .el-ico{ width:30px;height:30px;min-width:30px;border:0;background:transparent;border-radius:8px;
  color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
.emoji-lab .el-ico:hover{ background:var(--bg-2);color:var(--fg-1); }
.emoji-lab .el-ico .mi{ font-size:18px; }
.emoji-lab .el-tabs{ display:flex;gap:1px;padding:4px 6px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none; }
.emoji-lab .el-tabs::-webkit-scrollbar{ display:none; }
.emoji-lab .el-tab{ width:28px;height:28px;min-width:28px;border:0;background:transparent;border-radius:8px;
  color:var(--fg-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
.emoji-lab .el-tab .mi{ font-size:17px; }
.emoji-lab .el-tab:hover{ background:var(--bg-2);color:var(--fg-1); }
.emoji-lab .el-tab.on{ background:var(--bg-3);color:var(--fg-1); }
.emoji-lab .el-tab-st{ margin-inline-start:auto; }
.emoji-lab .el-body{ height:236px;overflow-y:auto;padding:6px 8px 10px; }
.emoji-lab .el-sec{ font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);padding:6px 2px 4px;position:sticky;top:-6px;background:var(--bg-1);z-index:1; }
.emoji-lab .el-grid{ display:grid;grid-template-columns:repeat(8,1fr);gap:1px; }
.emoji-lab .el-cell{ width:100%;aspect-ratio:1;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;
  font-family:var(--emj-fam,inherit); }
.emoji-lab .el-cell:hover{ background:var(--bg-2);transform:scale(1.12); }
.emoji-lab .el-cell img.emj-c{ width:24px;height:24px;display:block; }
.emoji-lab .el-cellwrap,.emoji-lab .el-stwrap{ position:relative;display:block; }
.emoji-lab .el-del{ position:absolute;inset-block-start:-2px;inset-inline-end:-2px;width:16px;height:16px;
  border:0;border-radius:50%;background:var(--bg-3);color:var(--fg-2);cursor:pointer;display:none;
  align-items:center;justify-content:center;padding:0; }
.emoji-lab .el-del .mi{ font-size:12px; }
.emoji-lab .el-cellwrap:hover .el-del,.emoji-lab .el-stwrap:hover .el-del{ display:inline-flex; }
.emoji-lab .el-del:hover{ background:var(--danger,#EB5757);color:#fff; }
.emoji-lab .el-stgrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.emoji-lab .el-st{ width:100%;border:1px solid var(--border);background:var(--bg-2);border-radius:var(--mk-radius-md);
  cursor:pointer;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:4px; }
.emoji-lab .el-st:hover{ border-color:var(--accent);background:var(--bg-1); }
.emoji-lab .el-st img{ width:56px;height:56px;display:block; }
.emoji-lab .el-st i{ font-style:normal;font-size:10.5px;color:var(--fg-3);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap; }
.emoji-lab .el-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:100%;color:var(--fg-3);font-size:12px;text-align:center;padding:0 24px; }
.emoji-lab .el-empty .mi{ font-size:26px;opacity:.6; }
.emoji-lab .el-ft{ display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);background:var(--bg-2); }
.emoji-lab .el-mk{ flex:1;height:32px;border:1px solid var(--border);background:var(--bg-1);border-radius:8px;
  color:var(--fg-1);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px; }
.emoji-lab .el-mk .mi{ font-size:16px;color:var(--fg-3); }
.emoji-lab .el-mk:hover{ border-color:var(--accent);color:var(--accent); }
.emoji-lab .el-mk:hover .mi{ color:var(--accent); }

/* style menu */
.el-style-menu{ position:fixed;z-index:10001;width:212px;background:var(--bg-1);border:1px solid var(--border);
  border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);padding:6px; }
.el-sm-hd{ font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding:4px 8px 6px; }
.el-sm-it{ width:100%;border:0;background:transparent;border-radius:8px;cursor:pointer;padding:6px 8px;
  display:flex;align-items:center;gap:8px;color:var(--fg-1);font:inherit;font-size:12.5px;text-align:start; }
.el-sm-it:hover{ background:var(--bg-2); }
.el-sm-it.on{ background:var(--bg-3); }
.el-sm-nm{ flex:1;min-width:0; }
.el-sm-prev{ flex:0 0 auto;font-size:15px;letter-spacing:1px;white-space:nowrap; }
.el-sm-it .mi{ flex:0 0 18px;font-size:16px;color:var(--accent);text-align:end; }
.el-sm-note{ font-size:10.5px;color:var(--fg-3);padding:6px 8px 2px;line-height:1.4; }

/* creator */
.el-mk-ov{ z-index:10002; }
.el-mk-ov .el-mk-card{ width:min(560px,calc(100vw - 32px)); }
/* B63-011 (Pablo: "This create sticker modal could've shown up as a bottom
   sheet in mobile portrait and a side panel on mobile landscape, this is a
   general prototype rule please make sure we're adhering to it everywhere")
   — same pair #alertsModal already uses (panels.css). */
@media (max-width:600px) and (orientation:portrait){
  .el-mk-ov{ align-items:flex-end;justify-content:stretch;padding:0; }
  .el-mk-ov .el-mk-card{
    width:100%;max-width:100%;max-height:86dvh;
    border-radius:18px 18px 0 0;border-inline-width:0;border-bottom:0;
    transform:translateY(100%);transition:transform 260ms var(--mk-ease);
  }
  .el-mk-ov.open .el-mk-card{ transform:none; }
}
@media (max-height:599px) and (orientation:landscape){
  .el-mk-ov{ align-items:stretch;justify-content:flex-end;padding:0; }
  .el-mk-ov .el-mk-card{
    height:100%;max-height:100%;width:min(420px, 92vw);
    border-radius:0;border-block-width:0;border-inline-end:0;
    transform:translateX(100%);transition:transform 260ms var(--mk-ease);
  }
  .el-mk-ov.open .el-mk-card{ transform:none; }
  html[dir="rtl"] .el-mk-ov .el-mk-card{ transform:translateX(-100%); }
  html[dir="rtl"] .el-mk-ov.open .el-mk-card{ transform:none; }
}
.el-mk-body{ display:grid;grid-template-columns:168px 1fr;gap:18px;align-items:start; }
.el-mk-prev{ display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--mk-radius-md); }
.el-mk-prev img{ width:120px;height:120px;display:block; }
.el-mk-cap{ font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);font-weight:700; }
.el-mk-lbl{ display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);margin:2px 0 6px; }
.el-mk-row{ display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px; }
.el-mk-glyph{ width:44px;height:44px;min-width:44px;border:1px solid var(--border);background:var(--bg-2);
  border-radius:10px;cursor:pointer;font-size:22px;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--emj-fam,inherit); }
.el-mk-glyph:hover{ border-color:var(--accent); }
.el-mk-in{ height:44px;min-width:0;flex:1;border:1px solid var(--border);background:var(--bg-1);border-radius:10px;
  padding:0 12px;color:var(--fg-1);font:inherit;font-size:13px;outline:none; }
.el-mk-in:focus{ border-color:var(--accent); }
.el-mk-in.wide{ width:100%; }
.el-mk-sh{ width:44px;height:44px;min-width:44px;border:1px solid var(--border);background:var(--bg-1);border-radius:10px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0; }
.el-mk-sh i{ width:22px;height:22px;background:var(--fg-2);display:block; }
.el-mk-sh i.sh-circle{ border-radius:50%; }
.el-mk-sh i.sh-rounded{ border-radius:6px; }
.el-mk-sh i.sh-square{ border-radius:1px; }
.el-mk-sh i.sh-squircle{ border-radius:9px; }
.el-mk-sh.on{ border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset; }
.el-mk-sh.on i{ background:var(--accent); }
.el-sw{ width:26px;height:26px;min-width:26px;border:1px solid var(--border);border-radius:50%;cursor:pointer;padding:0; }
.el-sw.on{ box-shadow:0 0 0 2px var(--bg-1) inset,0 0 0 3px var(--accent); }
.el-sw.none{ background:repeating-linear-gradient(45deg,var(--bg-3) 0 4px,transparent 4px 8px); }
.el-mk-ring{ height:26px;border:1px solid var(--border);background:var(--bg-1);border-radius:13px;padding:0 12px;
  color:var(--fg-2);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;margin-inline-start:auto; }
.el-mk-ring.on{ border-color:var(--accent);color:var(--accent); }
.el-mk-ft{ display:flex;justify-content:flex-end;gap:8px; }
/* Audit A · B63-012 — the sticker is an image: the preview IS the drop zone */
.el-mk-drop{ cursor:pointer;min-height:150px;justify-content:center;border-style:dashed;
  background:repeating-conic-gradient(color-mix(in srgb,var(--fg-3) 12%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px,var(--bg-2); }
.el-mk-drop:hover,.el-mk-drop.is-over{ border-color:var(--accent); }
.el-mk-drop img{ object-fit:cover; }
.el-mk-ph{ display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px var(--mk-font-ui);color:var(--fg-2);text-align:center; }
.el-mk-ph .mi{ font-size:30px;color:var(--accent-text); }
.el-mk-ph[hidden],.el-mk-drop img[hidden]{ display:none; }
.rsn-btn[disabled]{ opacity:.45;cursor:not-allowed; }

/* emoji + stickers inside the app's own surfaces */
.emj-c{ width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block; }
.rx-chip .emj-c{ width:15px;height:15px; }
.mb-stk{ padding:2px 0; }
.mb-stk img{ width:132px;height:132px;display:block; }
.msg .mb-stk-cap{ display:none; }  /* B63-012 — no caption under a sticker; the name is its alt */
.mb-stk img{ object-fit:cover; }
.cmp-edit .emj-st-in,.ast-input .emj-st-in{ width:96px;height:96px;display:inline-block;vertical-align:bottom; }
@media (max-width:560px){
  .emoji-lab{ width:min(360px,calc(100vw - 16px)); }
  .emoji-lab .el-body{ height:212px; }
  /* B51-01 trap 4 — a touch floor written only as (pointer:coarse) never fires
     in a resized desktop browser, so pin it at the width as well. */
  .emoji-lab .el-tab{ width:36px;height:36px;min-width:36px; }
  .emoji-lab .el-grid{ grid-template-columns:repeat(7,1fr); }
  .emoji-lab .el-mk{ height:40px; }
  .emoji-lab .el-ico{ width:36px;height:36px;min-width:36px; }
  .el-mk-body{ grid-template-columns:1fr;gap:12px; }
  .el-mk-prev{ padding:10px; }
  .el-mk-prev img{ width:96px;height:96px; }
  .el-sw{ width:32px;height:32px;min-width:32px; }
  .el-mk-ring{ height:32px; }
}
.el-mk-ci .mci{ flex:1 1 180px;width:auto; }
.el-mk-row[hidden]{ display:none; }