/* Mobile reaction picker: make emoji row swipeable instead of overflowing */

@media (max-width: 768px) {
  .post-reaction-trigger {
    /* helps sticky/absolute children positioning */
    max-width: 100%;
  }

  .reaction-picker-popup {
    /* Keep popup within viewport with padding on both sides */
    max-width: calc(100vw - 32px) !important;

    /* swipe / scroll horizontally */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x;

    /* prevent flex wrapping; allow a single row */
    flex-wrap: nowrap !important;
    white-space: nowrap;

    /* a bit tighter on mobile */
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  /* Center the little caret/arrow for the speech-bubble feel */
  .reaction-picker-popup::after,
  .reaction-picker-popup::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .reaction-picker-popup::-webkit-scrollbar {
    display: none;
  }

  .reaction-emoji-btn {
    flex: 0 0 auto;
    /* ~25% smaller than desktop */
    font-size: 1.125rem !important;
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
  }

  /* Mobile: active emoji (left Like button) 20% smaller */
  .reaction-active-emoji {
    font-size: 22.4px !important; /* 28px * 0.8 */
    line-height: 1 !important;
    display: inline-block;
  }

  /* Mobile: shrink the reaction count chips (emoji + number) ~20% */
  .reactions-display {
    gap: 6px !important;
  }

  .reactions-display .reaction-item {
    padding: 3px 6px !important; /* was ~py-1 px-2 */
  }

  .reactions-display .reaction-item .text-lg {
    font-size: 0.9rem !important; /* 1.125rem * 0.8 */
    line-height: 1 !important;
  }

  .reactions-display .reaction-item .font-medium {
    font-size: 0.8rem !important;
    line-height: 1 !important;
  }

  /* If other templates use the "reaction-summary" styles, shrink those too */
  .reaction-summary {
    gap: 6px !important;
  }

  .summary-emoji {
    font-size: 0.96rem !important; /* 1.2rem * 0.8 */
  }

  .selected-emoji {
    font-size: 0.9rem !important; /* 1.125rem * 0.8 */
  }

  .selected-count {
    font-size: 0.96rem !important; /* 1.2rem * 0.8 */
  }
}