/* ============================================================================
   v15.746 — STICKER / GIF PICKER

   A bottom sheet that opens OVER the comment sheet. Editorial Dark: true black
   ground, one lavender accent, Söhne throughout.

   Z-INDEX. #feed-post-page sits at 999999, and during inline clip comments the
   gaming clips page is lifted to 1000000 so the floating clip can paint above
   the sheet (see 63-gaming-clips.css). This has to clear BOTH, or the picker
   opens behind the very composer that summoned it.

   MOTION. Only transform and opacity animate, on the 300ms curve the rest of the
   app's sheets use. The panel is promoted for the duration of the slide and
   nothing here triggers layout.
   ========================================================================== */

.shelfd-sticker-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: none;
}

.shelfd-sticker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-sticker-sheet.is-open .shelfd-sticker-backdrop { opacity: 1; }

.shelfd-sticker-panel {
  position: absolute;
  left: 0;
  right: 0;
  /* --shelfd-sticker-kb is written by the picker's visualViewport handler; it is
     0 whenever the keyboard is down, so this resolves to the bottom edge. */
  bottom: var(--shelfd-sticker-kb, 0px);
  display: flex;
  flex-direction: column;
  height: 62dvh;
  max-height: 62dvh;
  padding-bottom: max(var(--shelfd-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: #161618;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
  transform: translate3d(0, 100%, 0);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.shelfd-sticker-sheet.is-open .shelfd-sticker-panel { transform: translate3d(0, 0, 0); }

/* The keyboard drops the home-indicator inset — the keyboard covers it. */
.shelfd-sticker-sheet.is-keyboard .shelfd-sticker-panel { padding-bottom: 0; }

.shelfd-sticker-grabber {
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  margin: 8px auto 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

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

.shelfd-sticker-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
}

.shelfd-sticker-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  color: #f2edf9;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-weight: 400;
  /* 16px floor, not 14.1px: anything smaller makes iOS zoom the whole page on
     focus. Same guard the reply input carries in 55-quick-add-modal.css. */
  font-size: max(16px, calc(16 * var(--shelfd-px, 1px)));
  letter-spacing: 0.00em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.shelfd-sticker-search::placeholder { color: rgba(255, 255, 255, 0.38); }
.shelfd-sticker-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.shelfd-sticker-cancel {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.shelfd-sticker-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 10px 12px;
}

/* Multi-column rather than a grid: GIFs have wildly different aspect ratios, and
   columns give the staggered Tenor/Giphy layout for free with no masonry pass
   and no per-cell measurement. */
.shelfd-sticker-grid {
  columns: 3;
  column-gap: 6px;
}
@media (max-width: 380px) {
  .shelfd-sticker-grid { columns: 2; }
}

.shelfd-sticker-cell {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  break-inside: avoid;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Scale only — a background/opacity press state on an animating GIF reads as
     the GIF glitching rather than as a press. */
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-sticker-cell:active { transform: scale(0.95); }

.shelfd-sticker-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelfd-sticker-cell.is-skeleton {
  aspect-ratio: 1.4;
  background: rgba(255, 255, 255, 0.06);
  animation: shelfd-sticker-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shelfd-sticker-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.shelfd-sticker-note {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0.00em;
  text-align: center;
}

/* KLIPY's integration requirements make attribution mandatory wherever their
   content is displayed. */
.shelfd-sticker-attribution {
  flex: 0 0 auto;
  padding: 6px 14px 8px;
  color: rgba(255, 255, 255, 0.30);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(11 * var(--shelfd-px, 1px));
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ================= the composer's sticker button + attached chip ============ */

.feed-reply-sticker-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feed-reply-sticker-btn:active { transform: scale(0.92); }
.feed-reply-sticker-btn.is-armed { color: #c4b5fd; }
.feed-reply-sticker-btn svg { width: 20px; height: 20px; }
/* 32px painted, 44px tapped — the same pair the send button uses. */
.feed-reply-sticker-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* The attached sticker sits ABOVE the composer row, so the bar keeps its 42px
   capsule and simply grows upward — the same way the "Replying to X" strip
   already behaves. */
.feed-reply-sticker-chip {
  position: relative;
  align-self: flex-start;
  width: 96px;
  margin: 0 0 6px 40px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  line-height: 0;
}
.feed-reply-sticker-chip[hidden] { display: none; }
.feed-reply-sticker-chip img {
  display: block;
  width: 100%;
  height: auto;
}
.feed-reply-sticker-chip button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===================== the sticker as it appears IN a comment =============== */

.feed-reply-sticker {
  display: block;
  width: 140px;
  max-width: 60%;
  margin: 6px 0 2px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  line-height: 0;
}
.feed-reply-sticker img {
  display: block;
  width: 100%;
  height: auto;
}
/* A comment that is ONLY a sticker has no text line above it, so it does not
   need the gap that separates the two. */
.feed-reply-text:empty + .feed-reply-sticker { margin-top: 2px; }
.feed-reply-text:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .shelfd-sticker-backdrop,
  .shelfd-sticker-panel,
  .shelfd-sticker-cell { transition-duration: 120ms; }
  .shelfd-sticker-cell.is-skeleton { animation: none; }
}