/* Reacciones de fotos y videos 2026 (pedido del dueño 2026-10-12, igual a su diseño). Marcado en client.js:
   barrita para escoger (.vk-re-dock), resumen con las 5 principales (.vk-re-summary), botón con la reacción escogida
   (.vk-re-chosen) y el efecto al escoger (.vk-re-burst + .vk-anim-*). Dibujos: public/img/reactions/. */

/* --- Barrita para escoger --- */
.mp-reaction-dock.vk-re-dock {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 10px 8px;
  border-radius: 26px;
  background: rgba(10, 14, 32, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1.5px solid rgba(59, 130, 246, 0.85);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 0 22px rgba(59, 130, 246, 0.45), 0 18px 40px rgba(0, 0, 0, 0.55);
  max-width: calc(100vw - 16px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  animation: vkReDockIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.vk-re-dock::-webkit-scrollbar { display: none; }
.vk-re-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  padding: 2px 0 0;
  background: none !important;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: vkReItemIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.vk-re-item-ic {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.vk-re-item-ic .vk-re-img { width: 44px; height: 44px; }
.vk-re-item-label { font-size: 0.6rem; font-weight: 700; color: #e5e7eb; white-space: nowrap; letter-spacing: 0.1px; }
.vk-re-item:hover .vk-re-item-ic, .vk-re-item:focus-visible .vk-re-item-ic { transform: translateY(-6px) scale(1.22); }
.vk-re-item:active .vk-re-item-ic { transform: scale(0.9); }
.vk-re-item.vk-re-mine .vk-re-item-label { color: #60a5fa; }
.vk-re-item.vk-re-mine .vk-re-item-ic { transform: translateY(-3px); }
.vk-re-item.vk-re-picked .vk-re-item-ic { transform: translateY(-10px) scale(1.4); }

/* --- Dibujos --- */
.vk-re-img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.vk-re-emoji { font-size: 1.1em; line-height: 1; }

/* --- Resumen: las 5 reacciones principales (vista normal) --- */
.vk-re-summary {
  display: flex;
  gap: 8px;
  padding: 8px 12px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: pointer;
}
.vk-re-summary::-webkit-scrollbar { display: none; }
.vk-re-summary.hidden, .vk-re-summary:empty { display: none; }
.vk-re-chip {
  flex: 0 0 auto;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 6px 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.07));
  border: 1px solid rgba(99, 102, 241, 0.18);
}
.vk-re-chip-ic {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.6));
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 4px 10px rgba(59, 130, 246, 0.18);
}
.vk-re-chip-ic .vk-re-img { width: 26px; height: 26px; }
.vk-re-chip b { font-size: 0.82rem; font-weight: 800; line-height: 1.2; color: var(--text, #0f172a); }
.vk-re-chip small { font-size: 0.62rem; font-weight: 600; opacity: 0.7; white-space: nowrap; color: var(--text, #0f172a); }
.vk-re-chip:first-child { border-color: rgba(239, 68, 68, 0.35); }
/* En VYNKO Play (pantalla completa) no va la fila: solo el botón del costado. */
#vynkoPlayFeed .vk-re-summary { display: none; }
/* Los emojis apilados de antes quedan ocultos: la fila nueva ya muestra las principales. */
.mp-post-card .mp-reactions-stacked-emojis { display: none; }

/* --- Botón con la reacción escogida --- */
.like-btn.vk-re-chosen .vk-re-btn-ic { width: 22px; height: 22px; display: inline-flex; }
#vynkoPlayFeed .like-btn.vk-re-chosen .vk-re-btn-ic { width: 34px; height: 34px; }
.like-btn.vk-re-bump { animation: vkReBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* --- Ventana de quién reaccionó --- */
.vk-re-tab-ic { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; }
.vk-re-badge { display: flex; align-items: center; justify-content: center; }
.vk-re-badge .vk-re-img { width: 16px; height: 16px; }

/* --- Efecto al escoger: sale grande desde el botón, animada, sube y se desvanece --- */
.vk-re-burst {
  position: fixed;
  z-index: 3000;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  pointer-events: none;
  animation: vkReBurst 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
/* Cada reacción con su movimiento (además de la animación propia del dibujo). */
.vk-anim-risa .vk-re-img { animation: vkReRisa 0.5s ease-in-out 3; }
.vk-anim-latido .vk-re-img { animation: vkReLatido 0.6s ease-in-out 2; }
.vk-anim-wow .vk-re-img { animation: vkReWow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vk-anim-llama .vk-re-img { animation: vkReLlama 0.4s ease-in-out 3; }
.vk-anim-aplauso .vk-re-img { animation: vkReAplauso 0.28s ease-in-out 4; }
.vk-anim-pulgar .vk-re-img { animation: vkRePulgar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vk-anim-brillo .vk-re-img { animation: vkReBrillo 1.1s ease-in-out; }

@keyframes vkReDockIn { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes vkReItemIn { from { opacity: 0; transform: translateY(14px) scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes vkReBump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes vkReBurst {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  18% { opacity: 1; transform: translateY(-40px) scale(1.15); }
  70% { opacity: 1; transform: translateY(-90px) scale(1); }
  100% { opacity: 0; transform: translateY(-140px) scale(0.85); }
}
@keyframes vkReRisa { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-10deg) translateY(-2px); } 75% { transform: rotate(10deg) translateY(-2px); } }
@keyframes vkReLatido { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 55% { transform: scale(0.96); } }
@keyframes vkReWow { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes vkReLlama { 0%, 100% { transform: scaleY(1) skewX(0); } 50% { transform: scaleY(1.12) skewX(-4deg); } }
@keyframes vkReAplauso { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.88) rotate(-6deg); } }
@keyframes vkRePulgar { 0% { transform: rotate(-25deg) scale(0.8); } 60% { transform: rotate(10deg) scale(1.15); } 100% { transform: rotate(0) scale(1); } }
@keyframes vkReBrillo { 0% { filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); transform: scale(1); }
  45% { filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.95)); transform: scale(1.18) rotate(-6deg); }
  100% { filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .vk-re-dock, .vk-re-item, .vk-re-burst, [class*="vk-anim-"] .vk-re-img, .like-btn.vk-re-bump { animation: none !important; }
}

/* En celular caben las 8 a la vez (sin tener que deslizar), cada una con su nombre debajo. */
@media (max-width: 520px) {
  .mp-reaction-dock.vk-re-dock { padding: 9px 6px 7px; gap: 0; }
  .vk-re-item { width: calc((100vw - 34px) / 8); max-width: 58px; }
  .vk-re-item-ic, .vk-re-item-ic .vk-re-img { width: 36px; height: 36px; }
  .vk-re-item-label { font-size: 0.5rem; letter-spacing: -0.1px; }
}
/* El número suelto de "reacciones" de antes sobra: la fila de círculos ya muestra cada número. */
.mp-post-card .vk-re-summary:not(:empty) ~ .mp-post-card-counts-facebook .mp-post-card-counts-left { display: none; }

/* Más pequeño (pedido del dueño 2026-10-12: "está muy grande"): cada reacción en una píldora de una sola línea,
   dibujo chiquito + número + nombre. */
.vk-re-summary { gap: 6px; padding: 6px 12px 0; }
.vk-re-chip {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
}
.vk-re-chip-ic { width: 20px; height: 20px; box-shadow: none; background: none; }
.vk-re-chip-ic .vk-re-img { width: 18px; height: 18px; }
.vk-re-chip b { font-size: 0.74rem; line-height: 1; }
.vk-re-chip small { font-size: 0.68rem; line-height: 1; }
/* Con la fila de reacciones, la de comentarios/compartidas queda pegadita (sin el espacio en blanco). */
.mp-post-card .vk-re-summary:not(:empty) ~ .mp-post-card-counts-facebook { padding-top: 2px; padding-bottom: 4px; min-height: 0; }

/* La reacción que está debajo del dedo mientras se mantiene presionado (antes de soltar). */
.vk-re-item.vk-re-hover .vk-re-item-ic { transform: translateY(-12px) scale(1.45); }
.vk-re-item.vk-re-hover .vk-re-item-label { color: #fff; }
/* En celular caben todas: sin desplazamiento lateral, así la que se agranda no se corta por arriba. */
@media (max-width: 520px) { .mp-reaction-dock.vk-re-dock { overflow: visible; } }

/* Comentarios con el teclado abierto (public/keyboard-fix.js): la hoja sube justo encima del teclado, para que se
   vea lo que se escribe; si no cabe a su tamaño normal, se achica (la lista de comentarios se desplaza adentro). */
html.vk-teclado .mp-post-detail-comments-block.open,
html.vk-teclado #postDetailModal.is-tiktok-mode .mp-post-detail-comments-block.open {
  bottom: var(--vk-kb, 0px) !important;
  height: min(68vh, calc(var(--vk-vvh, 100vh) - 56px)) !important;
  max-height: none !important;
  padding-bottom: 10px !important;
  border-radius: 20px 20px 0 0 !important;
}
html.vk-teclado #vkPlayComments { padding-bottom: var(--vk-kb, 0px); }
html.vk-teclado #vkPlayComments .vpc-sheet { height: min(62vh, calc(var(--vk-vvh, 100vh) - 56px)); max-height: none; padding-bottom: 0; }

/* --- Reacciones en comentarios (commentLikeInnerHtml en client.js) --- */
.mp-comment-like-btn { display: inline-flex; align-items: center; gap: 2px; }
.mp-comment-like-btn .vk-cre-mine { display: inline-flex; width: 18px; height: 18px; }
.mp-comment-like-btn .vk-cre-mini { display: inline-flex; width: 14px; height: 14px; margin-right: -2px; }
.mp-comment-like-btn .vk-re-img { width: 100%; height: 100%; }
/* Precio del Vynko en la barrita */
.vk-re-item { position: relative; }
.vk-re-price {
  position: absolute; top: -4px; right: 2px; padding: 1px 5px; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; font-size: 0.55rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.5);
}
.vk-re-price::before { content: '🪙'; margin-right: 1px; font-size: 0.55rem; }