/* Stickers / Emoji tabs.
 *
 * Two tabs share these styles: <StickersTab> (image stickers from
 * public/stickers/) and <EmojiTab> (rasterized emoji glyphs). They render
 * the same grid layout; only the cell contents differ. Image stickers use
 * `<img>` inside the cell button; emoji use a `<span>` with a glyph.
 *
 * Class naming convention: `.st__*` everywhere; `.st--full` modifier on
 * the Stickers tab root for header / category bar, `.st--emoji` modifier
 * on the Emoji tab root. The grid modifier `.st__grid--emoji` tightens
 * the grid for the higher-density emoji layout.
 */

.st {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Header — Stickers tab only ---------------------------------------------- */

.st__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.st__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Empty-state copy for when public/stickers/ has no images yet. Centered
 * and muted so it sits in the panel quietly rather than reading as an
 * error. */
.st__empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Category pills (Stickers tab only) -------------------------------------
 *
 * Pills wrap to as many rows as needed (`flex-wrap: wrap`) and a max-height
 * + vertical scroll kicks in only when there are *so many* categories that
 * even wrapped they'd consume too much of the panel. This avoids the prior
 * behavior of horizontal overflow that hid pills off-screen on the right.
 */

.st__categories {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-height: 96px;
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-pink-soft) transparent;
}

.st__categories::-webkit-scrollbar { width: 6px; }
.st__categories::-webkit-scrollbar-track { background: transparent; }
.st__categories::-webkit-scrollbar-thumb {
  background: var(--brand-pink-soft);
  border-radius: 999px;
}

.st__category {
  flex-shrink: 0;
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.st__category:hover {
  background: var(--brand-pink-soft);
  color: var(--brand-pink-strong);
  border-color: var(--brand-pink);
}

.st__category.is-active {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
  color: #fff;
}

/* Grid --------------------------------------------------------------------
 *
 * The grid has its OWN scroll container (max-height + overflow-y: auto) so
 * loading hundreds of stickers doesn't expand the right panel and force the
 * main area to scroll.
 *
 * Image stickers (.st__grid in <StickersTab>) lay out as 47×47 fixed-size
 * cells via `auto-fill` columns — the source artwork is 47px native, so
 * rendering thumbnails larger would just upscale a small bitmap.
 * Emoji stickers (.st__grid--emoji in <EmojiTab>) keep the original 6-up
 * fluid grid: emoji glyphs are vector-rendered by the browser and read
 * better at a larger cell size. */

.st__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 47px);
  justify-content: start;
  gap: 0.55rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-pink-soft) transparent;
}

.st__grid::-webkit-scrollbar { width: 6px; }
.st__grid::-webkit-scrollbar-track { background: transparent; }
.st__grid::-webkit-scrollbar-thumb {
  background: var(--brand-pink-soft);
  border-radius: 999px;
}

.st__grid--emoji {
  /* Emoji grid overrides the image-grid layout. Glyphs render best at
   * a larger cell size, so we keep the original fluid 6-column grid
   * here rather than the 47px fixed cells used for image stickers.
   *
   * `minmax(0, 1fr)` (rather than plain `1fr`) is important: `1fr`
   * tracks size to their items' max-content by default, and our
   * `.st__sticker` base rule sets `width: 47px` — so `1fr` would
   * resolve to 47px per track and the cells would crowd at the
   * left of the grid. The `0` minimum lets the tracks shrink below
   * their items' intrinsic size, so the six tracks actually
   * partition the grid's full width equally. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0.4rem;
}

/* Cell --------------------------------------------------------------------
 *
 * Image-sticker cells are pinned to 47×47 (the source asset's native
 * size). Emoji cells inherit the cell base styles but override with
 * `aspect-ratio: 1 / 1` so they fill whatever 1fr column width they get.
 * Background is a soft pink tint so transparent stickers have something
 * to read against. Hover lifts the cell slightly via a scale transform
 * and a stronger background tint. */

.st__sticker {
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--brand-pink-tint);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  padding: 0;
  /* `overflow: hidden` so the inner <img> can use object-fit without
   * spilling past the rounded corners on hover. */
  overflow: hidden;
}

.st__grid--emoji .st__sticker {
  /* Emoji cells fill their fluid grid columns rather than being
   * pinned to the 47px used for image-sticker tiles. With
   * `grid-template-columns: repeat(6, minmax(0, 1fr))` on the
   * grid above, each track is now a real fluid width, so the cell
   * just needs `width: auto` to stretch into it (grid items stretch
   * to fill their tracks by default when `width` isn't explicit).
   * `aspect-ratio: 1/1` derives the cell height from its rendered
   * width — height stays `auto` for the aspect rule to take over. */
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
}

.st__sticker:hover {
  background: var(--brand-pink-soft);
  border-color: var(--brand-pink);
  transform: scale(1.06);
}

.st__sticker:active {
  transform: scale(0.96);
}

.st__sticker-emoji {
  font-size: 28px;
  line-height: 1;
}

.st__grid--emoji .st__sticker-emoji {
  font-size: 22px;
}

/* Image sticker thumbnails. `object-fit: contain` keeps the artwork's
 * aspect ratio without cropping; at 47×47 the source asset's native
 * size we fill the full cell rather than insetting (the inset was
 * needed when cells were ~50–60px and the image was meant to read as
 * "sticker on a pink tile"). */
.st__sticker-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The browser sometimes runs an implicit fade-in when a lazy image
   * decodes; opt out for snappier feel. */
  display: block;
  /* Prevent the image from being dragged out of the panel as a
   * standalone DOM drag — the user's drag should reach the parent
   * button's click handler instead. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 480px) {
  .st__grid {
    /* Fixed 47px cells already wrap naturally via auto-fill, so no
     * mobile-specific override is needed here. */
  }
  .st__grid--emoji {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
