/* Stickers de VYNKO (public/vk-stickers.js): panel como la captura del dueño 2026-10-30 y el sticker grande en el chat. */

/* En el chat: grande y sin burbuja, con la hora debajo. */
.vkst-big { display: block; width: 150px; height: 150px; object-fit: contain; margin: 0 auto 2px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .18)); }
#messagesView #chatPanel .mp-chat-bubble.vkst-msg,
#chatPeekMessages .mp-chat-bubble.vkst-msg,
.mp-chat-bubble.vkst-msg { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mp-chat-bubble.vkst-msg p { margin: 0; text-align: right; }
#messagesView #chatPanel .mp-chat-bubble.vkst-msg .mp-chat-bubble-meta-inline,
.mp-chat-bubble.vkst-msg .mp-chat-bubble-meta-inline,
.mp-chat-bubble.vkst-msg > .mp-chat-bubble-time {
  display: inline-flex !important; align-items: center; gap: 3px; padding: 1px 8px !important; border-radius: 999px;
  background: rgba(255, 255, 255, .88) !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
#messagesView #chatPanel .mp-chat-bubble.vkst-msg .mp-chat-bubble-time { color: #475569 !important; font-size: .68rem !important; }

/* Pestañas 😀 / V abajo del selector de emojis. */
.vkst-picker-tabs { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: center; margin-bottom: .35rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(143, 216, 255, .25); }
.vkst-picker-tabs > div { min-width: 56px; height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 1.15rem; }
.vkst-picker-tabs > div.on { background: rgba(255, 255, 255, .14); }
.vkst-picker-tabs .vkst-open { background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-size: .82rem; font-weight: 800; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); }
.vkst-picker-tabs .vkst-open b { font-size: 1.05rem; font-style: italic; }

/* Panel */
.vkst-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2200;
  height: min(56vh, 460px); display: flex; flex-direction: column;
  background: #f4f7fd; border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .18);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  animation: vkst-up .2s ease-out;
}
.vkst-sheet.hidden { display: none; }
@keyframes vkst-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vkst-handle { align-self: center; width: 44px; height: 5px; border-radius: 99px; background: #cbd5e1; margin: 8px 0 6px; flex: none; }
.vkst-search { display: flex; gap: 8px; padding: 0 12px 8px; flex: none; }
.vkst-search label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 14px; background: #e6ebf5; color: #64748b; }
.vkst-search svg { width: 19px; height: 19px; flex: none; }
.vkst-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: .95rem; color: #0f172a; }
.vkst-search input::placeholder { color: #8a96ab; }
.vkst-clock { width: 42px; height: 42px; flex: none; border: 1.5px solid #d5dcea; border-radius: 50%; background: #fff; color: #475569; display: grid; place-items: center; cursor: pointer; }
.vkst-clock svg { width: 20px; height: 20px; }
.vkst-cats { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 8px; flex: none; scrollbar-width: none; }
.vkst-cats::-webkit-scrollbar { display: none; }
.vkst-cats button { flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: #e6ebf5; color: #334155; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.vkst-cats button.on { background: #1d8cf0; color: #fff; box-shadow: 0 4px 10px rgba(29, 140, 240, .35); }
.vkst-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px 10px 10px; align-content: start; }
.vkst-item { aspect-ratio: 1; border: 0; background: none; padding: 3px; border-radius: 14px; cursor: pointer; }
.vkst-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.vkst-item:active { background: rgba(29, 140, 240, .12); transform: scale(.94); }
.vkst-empty { grid-column: 1 / -1; text-align: center; color: #64748b; font-size: .9rem; margin: 2rem 0; }
.vkst-tabs { flex: none; display: flex; gap: 8px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e2e8f0; background: #eef2f9; }
.vkst-tabs button { width: 52px; height: 34px; border: 0; border-radius: 12px; background: none; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.vkst-tabs .vkst-tab-v.on { background: #1d8cf0; color: #fff; box-shadow: 0 4px 10px rgba(29, 140, 240, .35); }
.vkst-tabs .vkst-tab-v b { font-size: 1.1rem; font-style: italic; }
@media (min-width: 900px) { .vkst-sheet { left: auto; right: 24px; width: 420px; border-radius: 22px; } }

/* Movimiento de cada sticker según lo que expresa (pedido del dueño: "hazla con movimientos"). Se mueven en el chat
   y en el panel, como los stickers animados; pivotan desde abajo para que se sienta el cuerpo y no la imagen. */
.vkst-anim { transform-origin: 50% 88%; will-change: transform; }
/* Se ríe a carcajadas: se sacude y rebota. */
.vkst-anim[data-move="uy-gonorrea"], .vkst-anim[data-move="jajaja"] { animation: vkst-laugh 1.1s ease-in-out infinite; }
/* Pícaro: ladea la cabeza de lado a lado, despacio. */
.vkst-anim[data-move="uy-parece-melo"] { animation: vkst-sly 2.4s ease-in-out infinite; }
/* Asiente: "Dale", "Sisas". */
.vkst-anim[data-move="dale"], .vkst-anim[data-move="sisas"] { animation: vkst-nod 1.5s ease-in-out infinite; }
/* Emoción: salto con estirón. */
.vkst-anim[data-move="que-chimba"], .vkst-anim[data-move="parcero"] { animation: vkst-hop 1.3s cubic-bezier(.3, 1.5, .5, 1) infinite; }
/* Duda: inclina la cabeza y se queda pensando. */
.vkst-anim[data-move="y-eso"], .vkst-anim[data-move="hmm"] { animation: vkst-tilt 2.6s ease-in-out infinite; }
/* Amor: late como corazón. */
.vkst-anim[data-move="ufff"], .vkst-anim[data-move="te-quiero"] { animation: vkst-beat 1.2s ease-in-out infinite; }
/* Rabia: tiembla. */
.vkst-anim[data-move="que-rabia"] { animation: vkst-angry .5s linear infinite; }
/* Cansado: respira lento, se balancea de sueño. */
.vkst-anim[data-move="toy-cansao"] { animation: vkst-sleepy 3.2s ease-in-out infinite; }
/* "No joda": niega de lado a lado. */
.vkst-anim[data-move="no-joda"] { animation: vkst-no 1.6s ease-in-out infinite; }
/* Me muero (de la risa / llorando): se tambalea. */
.vkst-anim[data-move="me-muero"] { animation: vkst-wobble 1.4s ease-in-out infinite; }

@keyframes vkst-laugh {
  0%, 100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-4deg) scale(1.04, .97); }
  30% { transform: rotate(3deg) scale(.98, 1.03) translateY(-3%); }
  45% { transform: rotate(-3deg) scale(1.03, .98); }
  60% { transform: rotate(2deg) scale(1) translateY(-2%); }
  75% { transform: rotate(-1deg); }
}
@keyframes vkst-sly {
  0%, 100% { transform: rotate(0) translateX(0); }
  30% { transform: rotate(-5deg) translateX(-2%); }
  55% { transform: rotate(-5deg) translateX(-2%); }
  75% { transform: rotate(3deg) translateX(1%); }
}
@keyframes vkst-nod {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(4%) rotate(2deg) scale(1.02, .97); }
  30% { transform: translateY(-2%) rotate(-1deg); }
  45% { transform: translateY(3%) rotate(1deg) scale(1.02, .98); }
}
@keyframes vkst-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  12% { transform: translateY(0) scale(1.06, .92); }
  35% { transform: translateY(-9%) scale(.96, 1.06) rotate(-3deg); }
  55% { transform: translateY(0) scale(1.05, .95); }
  70% { transform: translateY(-3%) scale(1) rotate(2deg); }
}
@keyframes vkst-tilt {
  0%, 100% { transform: rotate(0); }
  25%, 60% { transform: rotate(-7deg) translateY(-1%); }
  80% { transform: rotate(2deg); }
}
@keyframes vkst-beat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.09); }
  24% { transform: scale(.98); }
  32% { transform: scale(1.06); }
}
@keyframes vkst-angry {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-1.5%, .5%) rotate(-1.5deg); }
  40% { transform: translate(1.5%, -.5%) rotate(1.5deg); }
  60% { transform: translate(-1%, -.5%) rotate(-1deg); }
  80% { transform: translate(1%, .5%) rotate(1deg); }
}
@keyframes vkst-sleepy {
  0%, 100% { transform: rotate(0) scale(1); }
  40% { transform: rotate(-4deg) scale(1.03, .98) translateY(1%); }
  70% { transform: rotate(-2deg) scale(1.01); }
}
@keyframes vkst-no {
  0%, 50%, 100% { transform: rotate(0) translateX(0); }
  10% { transform: rotate(-6deg) translateX(-3%); }
  22% { transform: rotate(6deg) translateX(3%); }
  34% { transform: rotate(-4deg) translateX(-2%); }
  44% { transform: rotate(2deg) translateX(1%); }
}
@keyframes vkst-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-8deg) scale(1.03, .97); }
  40% { transform: rotate(6deg) scale(.98, 1.02); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}
/* Quien tenga activado "reducir movimiento" en el teléfono los ve quietos. */
@media (prefers-reduced-motion: reduce) { .vkst-anim { animation: none !important; } }