/**
 * @file
 * Emoji Reactions — social-media layout styles + Views field/filter enhancements.
 *
 * Add to emoji_reactions.libraries.yml under a new 'emoji_reactions/layouts_social'
 * key, or append these rules to emoji-reactions.css.
 *
 * Each layout uses the class .emoji-reactions--{layout} on the widget wrapper.
 * The existing JS handles click/toggle behaviour; only presentation differs here.
 */

/* =============================================================================
   SHARED HELPERS (used across multiple social layouts)
   ============================================================================= */

.emoji-reactions-widget {
  /* Ensure relative positioning so floating/absolute children are anchored. */
  position: relative;
}

.emoji-reactions-widget .emoji-reactions__btn {
  padding: 0;
  /* Reset for all layouts — each layout overrides as needed. */
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  font: inherit;
}

/* =============================================================================
   FACEBOOK REACTIONS BAR  (.emoji-reactions--facebook)
   ─────────────────────────────────────────────────────────────────────────────
   Renders a horizontal row of large, animated emoji icons that expand on hover
   (similar to Facebook's reaction picker). The summary line shows a stack of
   emoji faces and a total count ("👍❤️😮 42").
   ============================================================================= */

.emoji-reactions--facebook {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Summary row — stacked small icons + count */
.emoji-reactions--facebook .emoji-reactions__summary {
  display: flex;
  align-items: center;
  min-height: 24px;
  color: #65676b;
  font-size: 0.9rem;
  gap: 4px;
}

.emoji-reactions--facebook .emoji-reactions__summary-icons {
  display: flex;
}

.emoji-reactions--facebook .emoji-reactions__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e4e6eb;
  font-size: 14px;
  line-height: 16px;
}

.emoji-reactions--facebook .emoji-reactions__summary-icon:first-child {
  margin-left: 0;
}

/* Reaction bar — large emoji buttons that grow on hover */
.emoji-reactions--facebook .emoji-reactions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
}

.emoji-reactions--facebook .emoji-reactions__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 10px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  border-radius: 22px;
  background: #f0f2f5;
  gap: 3px;
}

.emoji-reactions--facebook .emoji-reactions__btn:hover,
.emoji-reactions--facebook .emoji-reactions__btn:focus-visible {
  z-index: 2;
  transform: translateY(-4px) scale(1.15);
  background: #e4e6eb;
  box-shadow: 0 4px 12px #0000002e;
}

.emoji-reactions--facebook .emoji-reactions__btn--active {
  background: #e7f3ff;
  box-shadow: 0 0 0 2px #1877f2;
}

.emoji-reactions--facebook .emoji-reactions__char,
.emoji-reactions--facebook .emoji-reactions__img,
.emoji-reactions--facebook .emoji-reactions__svg {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.emoji-reactions--facebook .emoji-reactions__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.emoji-reactions--facebook .emoji-reactions__label {
  white-space: nowrap;
  color: #65676b;
  font-size: 0.72rem;
  font-weight: 600;
}

.emoji-reactions--facebook .emoji-reactions__count {
  color: #1877f2;
  font-size: 0.75rem;
  font-weight: 700;
}

/* =============================================================================
   TWITTER / X STYLE  (.emoji-reactions--twitter)
   ─────────────────────────────────────────────────────────────────────────────
   Icon-only compact row. Small emoji, count inline to the right. Colour
   accents match Twitter's brand palette (heart = red, other = blue).
   ============================================================================= */

.emoji-reactions--twitter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}

.emoji-reactions--twitter .emoji-reactions__btn {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  transition:
    color 0.15s,
    background 0.15s;
  color: #536471;
  border-radius: 20px;
  font-size: 0.85rem;
  gap: 5px;
}

.emoji-reactions--twitter .emoji-reactions__btn:hover,
.emoji-reactions--twitter .emoji-reactions__btn:focus-visible {
  color: #1d9bf0;
  background: #1d9bf01a;
}

.emoji-reactions--twitter .emoji-reactions__btn--active {
  color: #f91880; /* Twitter heart red */
}

.emoji-reactions--twitter .emoji-reactions__char,
.emoji-reactions--twitter .emoji-reactions__img,
.emoji-reactions--twitter .emoji-reactions__svg {
  font-size: 1.25rem;
  line-height: 1;
}

.emoji-reactions--twitter .emoji-reactions__img {
  width: 20px;
  height: 20px;
}

.emoji-reactions--twitter .emoji-reactions__label {
  display: none; /* Labels hidden — Twitter style is icon-only */
}

.emoji-reactions--twitter .emoji-reactions__count {
  font-size: 0.82rem;
  font-weight: 500;
}

/* =============================================================================
   REDDIT VOTE STYLE  (.emoji-reactions--reddit)
   ─────────────────────────────────────────────────────────────────────────────
   Score-centric layout. The first emoji acts as "upvote" (highlighted in
   orange), the second as "downvote" (blue). Additional emojis appear as
   smaller award-style icons to the right.
   ============================================================================= */

.emoji-reactions--reddit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}

.emoji-reactions--reddit .emoji-reactions__btn {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  color: #878a8c;
  border: 1.5px solid #edeff1;
  border-radius: 20px;
  background: #f6f7f8;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 4px;
}

.emoji-reactions--reddit .emoji-reactions__btn:first-child:hover,
.emoji-reactions--reddit .emoji-reactions__btn:first-child.emoji-reactions__btn--active {
  color: #ff4500;
  border-color: #ff4500;
  background: #fff4ed;
}

.emoji-reactions--reddit .emoji-reactions__btn:nth-child(2):hover,
.emoji-reactions--reddit .emoji-reactions__btn:nth-child(2).emoji-reactions__btn--active {
  color: #0079d3;
  border-color: #0079d3;
  background: #e8f0fe;
}

.emoji-reactions--reddit .emoji-reactions__btn:not(:first-child, :nth-child(2)):hover,
.emoji-reactions--reddit .emoji-reactions__btn:not(:first-child, :nth-child(2)).emoji-reactions__btn--active {
  color: #e65100;
  border-color: #ffb300;
  background: #fff8e1;
}

.emoji-reactions--reddit .emoji-reactions__char,
.emoji-reactions--reddit .emoji-reactions__img,
.emoji-reactions--reddit .emoji-reactions__svg {
  font-size: 1.1rem;
  line-height: 1;
}

.emoji-reactions--reddit .emoji-reactions__img {
  width: 18px;
  height: 18px;
}

.emoji-reactions--reddit .emoji-reactions__count {
  font-size: 0.88rem;
  font-weight: 700;
}

/* =============================================================================
   INSTAGRAM HEART STYLE  (.emoji-reactions--instagram)
   ─────────────────────────────────────────────────────────────────────────────
   The dominant "heart" emoji is large; others are smaller secondary icons
   beneath it. Count is shown large below the primary reaction.
   ============================================================================= */

.emoji-reactions--instagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.emoji-reactions--instagram .emoji-reactions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.emoji-reactions--instagram .emoji-reactions__btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  transition:
    transform 0.2s,
    opacity 0.2s;
  border-radius: 20px;
  background: transparent;
  gap: 4px;
}

.emoji-reactions--instagram .emoji-reactions__btn:first-child {
  /* Primary reaction — make it bigger */
}

.emoji-reactions--instagram .emoji-reactions__btn:first-child .emoji-reactions__char,
.emoji-reactions--instagram .emoji-reactions__btn:first-child .emoji-reactions__img,
.emoji-reactions--instagram .emoji-reactions__btn:first-child .emoji-reactions__svg {
  font-size: 1.8rem;
}

.emoji-reactions--instagram .emoji-reactions__btn:first-child .emoji-reactions__img {
  width: 28px;
  height: 28px;
}

.emoji-reactions--instagram .emoji-reactions__btn:not(:first-child) .emoji-reactions__char,
.emoji-reactions--instagram .emoji-reactions__btn:not(:first-child) .emoji-reactions__img,
.emoji-reactions--instagram .emoji-reactions__btn:not(:first-child) .emoji-reactions__svg {
  font-size: 1.1rem;
}

.emoji-reactions--instagram .emoji-reactions__btn:not(:first-child) .emoji-reactions__img {
  width: 18px;
  height: 18px;
}

.emoji-reactions--instagram .emoji-reactions__btn--active .emoji-reactions__char {
  animation: instagram-heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes instagram-heart-pop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.emoji-reactions--instagram .emoji-reactions__btn:hover {
  transform: scale(1.12);
}

.emoji-reactions--instagram .emoji-reactions__count {
  color: #262626;
  font-size: 0.85rem;
  font-weight: 600;
}

.emoji-reactions--instagram .emoji-reactions__label {
  color: #8e8e8e;
  font-size: 0.78rem;
}

/* =============================================================================
   LINKEDIN REACTIONS SUMMARY  (.emoji-reactions--linkedin)
   ─────────────────────────────────────────────────────────────────────────────
   Overlapping emoji icon stack on the left, "You and N others" text on the
   right. Hover reveals the full reaction breakdown.
   ============================================================================= */

.emoji-reactions--linkedin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.emoji-reactions--linkedin .emoji-reactions__summary {
  display: flex;
  align-items: center;
  cursor: default;
  color: #0009;
  font-size: 0.875rem;
  gap: 6px;
}

.emoji-reactions--linkedin .emoji-reactions__summary-icons {
  display: flex;
}

.emoji-reactions--linkedin .emoji-reactions__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e9e5df;
  box-shadow: 0 0 0 1.5px #00000014;
  font-size: 13px;
}

.emoji-reactions--linkedin .emoji-reactions__summary-icon:first-child {
  margin-left: 0;
}

.emoji-reactions--linkedin .emoji-reactions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.emoji-reactions--linkedin .emoji-reactions__btn {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  color: #0009;
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: #f3f2ef;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 5px;
}

.emoji-reactions--linkedin .emoji-reactions__btn:hover,
.emoji-reactions--linkedin .emoji-reactions__btn:focus-visible {
  border-color: #00000026;
  background: #e8e5df;
}

.emoji-reactions--linkedin .emoji-reactions__btn--active {
  color: #0a66c2;
  border-color: #0a66c2;
  background: #e8f1fb;
}

.emoji-reactions--linkedin .emoji-reactions__char,
.emoji-reactions--linkedin .emoji-reactions__img,
.emoji-reactions--linkedin .emoji-reactions__svg {
  font-size: 1.2rem;
}

.emoji-reactions--linkedin .emoji-reactions__img {
  width: 20px;
  height: 20px;
}

/* =============================================================================
   SLACK EMOJI PICKER TILES  (.emoji-reactions--slack)
   ─────────────────────────────────────────────────────────────────────────────
   Small square tiles in a wrapping grid, similar to Slack's existing reaction
   display below messages. Count in a badge, optional + button to add more.
   ============================================================================= */

.emoji-reactions--slack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.emoji-reactions--slack .emoji-reactions__btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px 3px 6px;
  transition:
    background 0.12s,
    border-color 0.12s;
  color: #1d1c1d;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background: #f8f8f8;
  font-size: 0.85rem;
  line-height: 1.4;
  gap: 5px;
}

.emoji-reactions--slack .emoji-reactions__btn:hover,
.emoji-reactions--slack .emoji-reactions__btn:focus-visible {
  border-color: #bbb;
  background: #e8e8e8;
}

.emoji-reactions--slack .emoji-reactions__btn--active {
  color: #1264a3;
  border-color: #1d9bd1;
  background: #e8f5fb;
  font-weight: 700;
}

.emoji-reactions--slack .emoji-reactions__char,
.emoji-reactions--slack .emoji-reactions__img,
.emoji-reactions--slack .emoji-reactions__svg {
  font-size: 1.15rem;
  line-height: 1;
}

.emoji-reactions--slack .emoji-reactions__img {
  width: 18px;
  height: 18px;
}

.emoji-reactions--slack .emoji-reactions__label {
  display: none;
}

.emoji-reactions--slack .emoji-reactions__count {
  min-width: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

/* =============================================================================
   WHATSAPP BUBBLE REACTIONS  (.emoji-reactions--whatsapp)
   ─────────────────────────────────────────────────────────────────────────────
   Emoji reactions float just below a message bubble, very compact, count as
   a superscript badge on each emoji.
   ============================================================================= */

.emoji-reactions--whatsapp {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
}

.emoji-reactions--whatsapp .emoji-reactions__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  transition: transform 0.15s;
  border: 1px solid #0000001a;
  border-radius: 14px;
  background: #ffffffd9;
  box-shadow: 0 1px 3px #0000001f;
  backdrop-filter: blur(4px);
}

.emoji-reactions--whatsapp .emoji-reactions__btn:hover,
.emoji-reactions--whatsapp .emoji-reactions__btn:focus-visible {
  z-index: 2;
  transform: scale(1.18);
}

.emoji-reactions--whatsapp .emoji-reactions__btn--active {
  border-color: #25d366;
  background: #dcf8c6;
}

.emoji-reactions--whatsapp .emoji-reactions__char,
.emoji-reactions--whatsapp .emoji-reactions__img,
.emoji-reactions--whatsapp .emoji-reactions__svg {
  font-size: 1.2rem;
  line-height: 1;
}

.emoji-reactions--whatsapp .emoji-reactions__img {
  width: 20px;
  height: 20px;
}

.emoji-reactions--whatsapp .emoji-reactions__label {
  display: none;
}

.emoji-reactions--whatsapp .emoji-reactions__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  background: #25d366;
  box-shadow: 0 1px 2px #0003;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
}

.emoji-reactions--whatsapp .emoji-reactions__count:empty,
.emoji-reactions--whatsapp .emoji-reactions__count[data-count="0"] {
  display: none;
}

/* =============================================================================
   DISCORD REACTION PILLS  (.emoji-reactions--discord)
   ─────────────────────────────────────────────────────────────────────────────
   Rounded pill buttons with emoji + count, dark background in dark mode.
   Active state highlighted in Discord's blurple accent colour.
   ============================================================================= */

.emoji-reactions--discord {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.emoji-reactions--discord .emoji-reactions__btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
  color: #4e5058;
  border: 1.5px solid #e3e5e8;
  border-radius: 20px;
  background: #f2f3f5;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 5px;
}

.emoji-reactions--discord .emoji-reactions__btn:hover,
.emoji-reactions--discord .emoji-reactions__btn:focus-visible {
  border-color: #c7cad1;
  background: #e8eaed;
}

.emoji-reactions--discord .emoji-reactions__btn--active {
  color: #5865f2;
  border-color: #5865f2;
  background: #e8eaf8;
  font-weight: 700;
}

.emoji-reactions--discord .emoji-reactions__char,
.emoji-reactions--discord .emoji-reactions__img,
.emoji-reactions--discord .emoji-reactions__svg {
  font-size: 1.1rem;
  line-height: 1;
}

.emoji-reactions--discord .emoji-reactions__img {
  width: 18px;
  height: 18px;
}

.emoji-reactions--discord .emoji-reactions__label {
  display: none;
}

.emoji-reactions--discord .emoji-reactions__count {
  min-width: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Dark-mode variant for Discord */
@media (prefers-color-scheme: dark) {
  .emoji-reactions--discord .emoji-reactions__btn {
    color: #dbdee1;
    border-color: #3f4147;
    background: #2b2d31;
  }

  .emoji-reactions--discord .emoji-reactions__btn:hover {
    border-color: #4e5058;
    background: #35373c;
  }

  .emoji-reactions--discord .emoji-reactions__btn--active {
    color: #c9cdfb;
    border-color: #5865f2;
    background: #3c3f8f;
  }
}

/* =============================================================================
   VIEWS FIELD STYLES — emoji character + entity link
   ============================================================================= */

/* Emoji field — shared wrapper */
.emoji-reactions-field {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap;
}

/* Emoji character variants */
.emoji-reactions-field__char {
  vertical-align: middle;
  font-size: 1.15em;
  line-height: 1;
}

.emoji-reactions-field__img {
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  object-fit: contain;
}

.emoji-reactions-field__svg {
  display: inline-flex;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
}

.emoji-reactions-field__label {
  color: inherit;
  font-weight: 500;
}

/* Deleted / unknown entity indicator */
.emoji-reactions-field__deleted,
.emoji-reactions-field__unknown {
  color: #9ca3af;
  font-size: 0.88em;
  font-style: italic;
}

/* Entity link field */
.emoji-reactions-field--entity-link {
  gap: 4px;
}

.emoji-reactions-field__entity-id {
  color: #6b7280;
  font-size: 0.88em;
  font-weight: 600;
}

.emoji-reactions-field__entity-label {
  color: inherit;
}

.emoji-reactions-field__entity-anchor {
  text-decoration: none;
  color: #1e40af;
}

.emoji-reactions-field__entity-anchor:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

.emoji-reactions-field__edit-link {
  text-decoration: none;
}

.emoji-reactions-field__edit-link:hover .emoji-reactions-field {
  text-decoration: underline;
}

/* =============================================================================
   VIEWS FILTER STYLES — emoji dropdown + date range
   ============================================================================= */

/* Emoji ID filter select — standard width, allow emoji chars to render */
.emoji-id-filter-select {
  min-width: 160px;
  font-size: 0.95rem;
}

/* Rich emoji select wrapper (JS-enhanced) */
.emoji-reactions-rich-select {
  position: relative;
  display: inline-block;
  min-width: 180px;
}

.emoji-reactions-rich-select__trigger {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.9rem;
  gap: 8px;
}

.emoji-reactions-rich-select__trigger:focus,
.emoji-reactions-rich-select__trigger:focus-visible {
  border-color: #5b7ef5;
  outline: none;
  box-shadow: 0 0 0 3px #5b7ef526;
}

.emoji-reactions-rich-select__preview {
  font-size: 1.3rem;
  line-height: 1;
}

.emoji-reactions-rich-select__preview img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  object-fit: contain;
}

.emoji-reactions-rich-select__preview .emoji-rich-svg {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.emoji-reactions-rich-select__text {
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.emoji-reactions-rich-select__arrow {
  flex-shrink: 0;
  color: #6b7280;
  font-size: 0.7rem;
}

/* Dropdown list */
.emoji-reactions-rich-select__list {
  position: absolute;
  z-index: 500;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: none;
  overflow-y: auto;
  max-height: 280px;
  padding: 4px 0;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px #0000001f;
}

.emoji-reactions-rich-select--open .emoji-reactions-rich-select__list {
  display: block;
}

.emoji-reactions-rich-select__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  border: none;
  background: none;
  font-size: 0.9rem;
  gap: 10px;
}

.emoji-reactions-rich-select__option:hover,
.emoji-reactions-rich-select__option:focus {
  outline: none;
  background: #f0f4ff;
}

.emoji-reactions-rich-select__option--selected {
  color: #1e3a8a;
  background: #e8f0fe;
  font-weight: 600;
}

.emoji-reactions-rich-select__option-char {
  min-width: 28px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1;
}

.emoji-reactions-rich-select__option-char img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  object-fit: contain;
}

.emoji-reactions-rich-select__option-label {
  flex: 1;
}

/* Date range filter pair */
.emoji-date-range-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.emoji-date-range-filter .form-item {
  flex: 1;
  min-width: 130px;
}

.emoji-date-range-filter input[type="date"] {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.9rem;
  color-scheme: light;
}

.emoji-date-range-filter input[type="date"]:focus {
  border-color: #5b7ef5;
  outline: none;
  box-shadow: 0 0 0 3px #5b7ef526;
}

/* Separator label between the two date inputs */
.emoji-date-range-separator {
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 6px;
  color: #6b7280;
  font-size: 0.85rem;
}