/* feed.css — Item del feed de actividad (compartido: dashboard y /social). */

.feed-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  align-items: flex-start;
}
.feed-item-new {
  animation: feed-in 420ms var(--ease-snap);
}

.fi-avatar-link {
  display: inline-flex;
  transition: transform var(--transition);
}
.fi-avatar-link:hover {
  transform: rotate(4deg) scale(1.08);
}
.fi-user-link:hover b {
  color: var(--brand);
}

.fi-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.fi-text {
  line-height: 1.45;
}
.fi-time {
  font-size: var(--fs-xs);
}

.fi-reactions {
  display: flex;
  /* Siempre una sola línea, pegadas a la izquierda. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.fi-react {
  flex-shrink: 0;
}
.fi-reactions:empty {
  display: none;
}
.fi-react {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.25em 0.55em;
  font-size: var(--fs-sm);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  opacity: 0.55;
  transition: all var(--transition);
}
.fi-react:hover {
  opacity: 1;
  background: var(--surface-2);
  transform: translateY(-1px) scale(1.06);
}
.fi-react.has-count {
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--border);
}
.fi-react.is-mine {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.fi-count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 0.6em;
}

/* Chevron de expansión del feed: solo móvil. */
.fi-expand {
  display: none;
}

@media (max-width: 560px) {
  /* En móvil las reacciones se despliegan al tocar la tarjeta, compactas
     para caber SIEMPRE en una sola línea. */
  .feed-item:not(.is-open) .fi-reactions {
    display: none;
  }
  /* Ocupan el ancho completo de la card (anulando el offset del avatar:
     36px + gap) y se centran respecto a los bordes reales de la tarjeta. */
  .fi-reactions {
    gap: 3px;
    margin-left: calc(-36px - var(--space-3));
    justify-content: center;
  }
  .fi-react {
    padding: 0.18em 0.42em;
    font-size: 0.85rem;
    gap: 2px;
  }
  .fi-count {
    font-size: 0.66rem;
    min-width: 0;
  }
  .feed-item.is-open .fi-reactions {
    animation: dropdown-in-feed 300ms var(--ease-spring);
  }
  .fi-expand {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    transition: transform 260ms var(--ease-spring), color var(--transition);
  }
  .feed-item.is-open .fi-expand {
    transform: rotate(180deg);
    color: var(--brand);
  }
}

@keyframes dropdown-in-feed {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(-12px) rotate(-0.6deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}