/* ==========================================================================
   Custom stickers — chat bubbles, tray, save popover, creator, and the
   /community/stickers/ page. The creator reuses the .rxw sheet shell from
   community.css (a card on a desk, a bottom sheet on a phone).
   ========================================================================== */

/* ── in chat: a frameless sticker ───────────────────────────────────────── */
.cmxCst { display: inline-block; padding: 0; margin: .15rem 0; border: 0; background: none; cursor: pointer;
  border-radius: 12px; line-height: 0; transition: scale .15s var(--ease-out, ease); }
.cmxCst img { width: 9.5rem; height: 9.5rem; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.cmxCst:hover { scale: 1.03; }
.cmxCst:focus-visible { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
@media (max-width: 46rem) { .cmxCst img { width: 8rem; height: 8rem; } }

/* ── tray section ───────────────────────────────────────────────────────── */
.stkTray { margin-bottom: .6rem; }
.stkTray__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.stkTray__head .cmxTray__sub { margin: 0; }
.stkTray__acts { display: inline-flex; align-items: center; gap: .6rem; }
.stkTray__make { border: 1px solid rgb(240 198 74 / .5); background: rgb(240 198 74 / .1); color: var(--y-yellow);
  border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .75rem; cursor: pointer; min-height: 2rem; }
.stkTray__make:hover { background: rgb(240 198 74 / .2); }
.stkTray__manage { font-size: .72rem; color: var(--text-lo); text-decoration: none; }
.stkTray__manage:hover { color: var(--y-yellow); }
.stkTray__empty { margin: .4rem 0 .2rem; max-width: none; font-size: .75rem; color: var(--text-lo); line-height: 1.45; }
.stkTray__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .3rem; margin: .35rem 0 .5rem; }
.stkTray__s { aspect-ratio: 1; padding: .2rem; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.stkTray__s:hover, .stkTray__s:focus-visible { background: var(--cmx-pane2, rgb(255 255 255 / .06)); outline: none; }
.stkTray__s img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── "Save to my stickers" popover ──────────────────────────────────────── */
.stkPop { position: fixed; z-index: 700; width: 15rem; padding: .5rem; display: grid; gap: .3rem;
  border-radius: var(--radius); border: 1px solid var(--cmx-hair); background: var(--surface-2);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .9); animation: cmxRise .16s var(--ease-out); }
.stkPop__img { width: 5rem; height: 5rem; object-fit: contain; justify-self: center; margin: .2rem 0 .3rem; }
.stkPop__it { width: 100%; min-height: 2.6rem; padding: .5rem .8rem; border: 0; border-radius: var(--radius-sm, 8px);
  background: var(--surface-1); color: var(--text-hi); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.stkPop__it.is-primary { background: var(--y-yellow); color: var(--y-black, #111); font-weight: 600; }
.stkPop__it--quiet { background: transparent; color: var(--text-lo); font-size: var(--fs-xs); }
.stkPop__it:hover { filter: brightness(1.08); }
@media (max-width: 46rem) {
  .stkPop { left: .5rem !important; right: .5rem; top: auto !important; bottom: calc(.5rem + env(safe-area-inset-bottom));
    width: auto; border-radius: 1.1rem; padding: .7rem;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .5); animation: rxwUp .24s cubic-bezier(.2,.9,.3,1); }
  .stkPop__it { min-height: 3rem; font-size: var(--fs-body, 1rem); }
}

/* ── creator ────────────────────────────────────────────────────────────── */
.stkMk .rxw__box { width: min(46rem, 100%); max-height: min(44rem, calc(100dvh - 2rem)); }
.stkMk__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) var(--s-5);
  overflow-y: auto; overscroll-behavior: contain; }
.stkMk__drop { grid-column: 1 / -1; display: grid; place-items: center; gap: .4rem; min-height: 14rem; padding: var(--s-6);
  border: 2px dashed var(--cmx-hair); border-radius: var(--radius-lg); cursor: pointer; text-align: center;
  color: var(--text-mid); transition: border-color .2s, background-color .2s; }
.stkMk__drop b { font-size: var(--fs-body-lg, 1.1rem); color: var(--text-hi); }
.stkMk__drop span { font-size: var(--fs-xs); color: var(--text-lo); }
.stkMk__drop:hover, .stkMk__drop.is-over { border-color: rgb(240 198 74 / .6); background: rgb(240 198 74 / .05); }
.stkMk__stage { position: relative; align-self: start; }
.stkMk__canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--radius); cursor: grab; touch-action: none;
  background: repeating-conic-gradient(#2a2a30 0 25%, #1f1f24 0 50%) 0 0 / 22px 22px; }
.stkMk__canvas:active { cursor: grabbing; }
.stkMk__busy { position: absolute; inset: auto .6rem .6rem .6rem; margin: 0; max-width: none; padding: .45rem .7rem;
  border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font-size: .72rem; text-align: center; }
.stkMk__busy[hidden] { display: none; }
.stkMk__ctl { display: grid; gap: .55rem; align-content: start; min-width: 0; }
.stkMk__lbl { margin: 0; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo); }
.stkMk__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.stkMk__opt { min-height: 2.5rem; padding: .4rem .5rem; border-radius: var(--radius-sm, 8px); border: 1px solid var(--cmx-hair);
  background: var(--surface-1); color: var(--text-mid); font: inherit; font-size: .78rem; cursor: pointer; }
.stkMk__opt.is-on { border-color: rgb(240 198 74 / .6); background: rgb(240 198 74 / .12); color: var(--text-hi); }
.stkMk__row { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--text-mid); }
.stkMk__row[hidden] { display: none; }
.stkMk__row span { flex: none; min-width: 4.2rem; }
.stkMk__row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--y-yellow); }
.stkMk__row--check input { accent-color: var(--y-yellow); width: 1.1rem; height: 1.1rem; }
.stkMk__cap { width: 100%; min-width: 0; padding: .6rem .8rem; border-radius: var(--radius-sm, 8px); border: 1px solid var(--cmx-hair);
  background: var(--surface-1); color: var(--text-hi); font: inherit; font-size: var(--fs-sm); }
.stkMk__note { margin: 0; max-width: none; font-size: .75rem; color: var(--y-red-300, #f08a80); }
.stkMk__note:empty { display: none; }
.stkMk__hint { margin: 0; max-width: none; font-size: .7rem; line-height: 1.45; color: var(--text-lo); }
@media (max-width: 46rem) {
  .stkMk .rxw__box { max-height: 92dvh; }
  .stkMk__body { grid-template-columns: 1fr; padding: var(--s-3) var(--s-4); gap: var(--s-4); }
  .stkMk__stage { width: min(100%, 20rem); justify-self: center; }
  .stkMk__drop { min-height: 11rem; }
}

/* ── /community/stickers/ ───────────────────────────────────────────────── */
.stkPage { position: relative; z-index: 1; width: min(60rem, 100%); margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-24); display: grid; gap: var(--s-5); }
.stkHead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.stkHead h1 { margin: 0 0 .25rem; font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -.02em; color: var(--text-hi); }
.stkHead p { margin: 0; color: var(--text-lo); font-size: var(--fs-sm); max-width: 46ch; }
.stkHead--pack { display: grid; justify-items: start; gap: .5rem; }
.stkHead--pack .eyebrow { margin: 0; }
.stkHead__act { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.stkTabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.stkTabs::-webkit-scrollbar { display: none; }
.stkTabs button { flex: none; min-height: 2.4rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--cmx-hair);
  background: var(--surface-1); color: var(--text-mid); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.stkTabs button.is-on { border-color: rgb(240 198 74 / .55); background: rgb(240 198 74 / .12); color: var(--text-hi); }
.stkPane { display: grid; gap: var(--s-4); }
.stkEmpty { margin: 0; max-width: none; padding: var(--s-8) var(--s-5); text-align: center; border-radius: var(--radius);
  border: 1px dashed var(--cmx-hair); color: var(--text-lo); font-size: var(--fs-sm); line-height: 1.6; }
.stkEmpty b { color: var(--text-hi); }
.stkBar { position: sticky; top: .5rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--cmx-hair); background: var(--surface-2); }
.stkBar__n { flex: 1; min-width: 8rem; font-size: var(--fs-xs); color: var(--text-lo); font-family: var(--font-mono); }
.stkBar__sel { min-width: 0; max-width: 100%; padding: .4rem .6rem; border-radius: 999px; border: 1px solid var(--cmx-hair);
  background: var(--surface-1); color: var(--text-hi); font: inherit; font-size: var(--fs-xs); }
.stkGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .6rem; }
.stkCell { position: relative; margin: 0; aspect-ratio: 1; padding: .4rem; border-radius: var(--radius);
  border: 1px solid var(--cmx-hair); background: repeating-conic-gradient(rgb(255 255 255 / .03) 0 25%, transparent 0 50%) 0 0 / 18px 18px, var(--surface-1); }
.stkCell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stkCell--pick { cursor: pointer; font: inherit; }
.stkCell--pick.is-on { border-color: var(--y-yellow); box-shadow: 0 0 0 2px rgb(240 198 74 / .5); }
.stkCell--pick.is-on::after { content: "✓"; position: absolute; top: .3rem; right: .3rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--y-yellow); color: var(--y-black, #111); font-size: .75rem; font-weight: 700; }
.stkCell--sm { width: 4.4rem; flex: none; }
.stkCell__x { position: absolute; top: -.4rem; right: -.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--text-hi); font-size: .9rem; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px var(--cmx-hair); }
.stkPack { display: grid; gap: .8rem; padding: var(--s-4) var(--s-5); border-radius: var(--radius); border: 1px solid var(--cmx-hair); background: var(--surface-1); }
.stkPack__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.stkPack__head h3 { margin: 0 0 .15rem; font-size: var(--fs-body-lg, 1.1rem); color: var(--text-hi); }
.stkPack__head p { margin: 0; max-width: none; font-size: var(--fs-xs); color: var(--text-lo); }
.stkPack__act { display: flex; flex-wrap: wrap; gap: .35rem; }
.stkPack__strip { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem .1rem .2rem; scrollbar-width: thin; }
.stkPack__more { align-self: center; font-size: var(--fs-xs); color: var(--text-lo); padding: 0 .4rem; }
.stkDanger:hover { color: var(--y-red, #e8544a); border-color: rgb(232 84 74 / .5); }
.stkFoot { margin: 0; }
.stkToast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 950; translate: -50% 1rem;
  padding: .6rem 1rem; border-radius: 999px; background: var(--surface-2); color: var(--text-hi); border: 1px solid var(--cmx-hair);
  font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .9); }
.stkToast.is-on { opacity: 1; translate: -50% 0; }
@media (max-width: 46rem) {
  .stkPage { padding-top: var(--s-6); }
  .stkGrid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .stkHead__act .cmxBtn { flex: 1 1 auto; justify-content: center; }
  .stkPack { padding: var(--s-4); }
}
.stkMk .fwd__send { white-space: nowrap; }
.stkMk .fwd__n { min-width: 0; }

/* ── Import a .zip ──────────────────────────────────────────────────────── */
.stkImp .rxw__box { width: min(32rem, 100%); }
.stkImp__body { display: grid; gap: .7rem; padding: var(--s-4) var(--s-5); overflow-y: auto; }
.stkImp__body .stkMk__drop { min-height: 9rem; }
.stkImp__file { margin: 0; max-width: none; font-family: var(--font-mono); font-size: .75rem; color: var(--text-mid); }
.stkImp__file:empty { display: none; }
.stkImp__body .stkMk__row--check { align-items: flex-start; font-size: .8rem; }
.stkImp__body .stkMk__row--check span { min-width: 0; }
.stkImp__res { display: grid; gap: .6rem; }
.stkImp__res:empty { display: none; }
.stkImp__ok { margin: 0; max-width: none; color: var(--accent-ink, var(--y-yellow)); font-size: var(--fs-sm); }
.stkImp__err { margin: 0; max-width: none; color: var(--y-red-300, #f08a80); font-size: var(--fs-sm); }
.stkImp__skip { font-size: .75rem; color: var(--text-lo); }
.stkImp__skip ul { margin: .4rem 0 0; padding-left: 1.1rem; max-height: 8rem; overflow-y: auto; }
.stkHead > .stkHead__act { margin-top: 0; }