/* Teclado de Emojis VYNKO (public/vk-emoji-panel.js, el dueño 2026-11-06 con imagen de referencia): azul noche casi
   negro, cristal, bordes luminosos azul eléctrico / cian / violeta, esquinas redondeadas. Prefijo vkx-. */
.vkx-panel {
  position: fixed; z-index: 965; left: 8px; right: 8px; bottom: 80px; height: 400px; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; color: #e0e7ff;
  background: linear-gradient(160deg, rgba(14, 20, 52, .96), rgba(6, 9, 28, .97) 55%, rgba(18, 10, 48, .97));
  border-radius: 24px; border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(56, 189, 248, .55), 0 0 22px rgba(59, 130, 246, .35), 0 0 40px rgba(139, 92, 246, .22), 0 -10px 40px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-family: inherit; overflow: hidden; animation: vkxIn .2s ease;
}
.vkx-panel.hidden { display: none !important; }
@keyframes vkxIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.vkx-panel svg { width: 100%; height: 100%; display: block; }
.vkx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.vkx-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vkx-brand img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .6)); }
.vkx-brand b { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .01em; white-space: nowrap; }
.vkx-brand b span { background: linear-gradient(90deg, #38bdf8, #818cf8 60%, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.vkx-close { width: 34px; height: 34px; padding: 8px; border-radius: 50%; border: 1px solid rgba(129, 140, 248, .35); background: rgba(255, 255, 255, .06); color: #c7d2fe; cursor: pointer; flex: none; }

.vkx-search { flex: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(10, 16, 44, .85); box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, .65), 0 0 14px rgba(59, 130, 246, .25); }
.vkx-search > svg { width: 19px; height: 19px; color: #93c5fd; flex: none; }
.vkx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 15px; -webkit-appearance: none; appearance: none; }
.vkx-search input::placeholder { color: #8ea2d8; }
.vkx-search input::-webkit-search-cancel-button { filter: invert(1); }

.vkx-chips { flex: none; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.vkx-chips::-webkit-scrollbar { display: none; }
.vkx-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; border: 0; cursor: pointer; color: #e0e7ff; font-size: 13.5px; font-weight: 600; background: rgba(15, 22, 58, .85); box-shadow: inset 0 0 0 1.3px rgba(99, 102, 241, .55); }
.vkx-chips button i { width: 18px; height: 18px; display: inline-flex; color: #a5b4fc; }
.vkx-chips .vkx-heart { color: #f472b6; filter: drop-shadow(0 0 4px rgba(244, 114, 182, .7)); }
.vkx-chips .vkx-v { color: #38bdf8; }
.vkx-chips button.on { background: linear-gradient(135deg, rgba(37, 99, 235, .55), rgba(124, 58, 237, .45)); box-shadow: inset 0 0 0 1.5px rgba(125, 211, 252, .85), 0 0 12px rgba(56, 189, 248, .35); color: #fff; }

.vkx-body { flex: 1; min-height: 0; display: flex; gap: 8px; }
.vkx-side { flex: none; width: 62px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; border-radius: 18px; background: rgba(12, 18, 50, .7); box-shadow: inset 0 0 0 1.2px rgba(99, 102, 241, .35); }
.vkx-side::-webkit-scrollbar { display: none; }
.vkx-side button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; border-radius: 14px; background: transparent; color: #c4b5fd; cursor: pointer; }
.vkx-side button svg { width: 26px; height: 26px; color: #c7d2fe; filter: drop-shadow(0 0 4px rgba(167, 139, 250, .45)); }
.vkx-side button[data-cat="caras"] svg { color: #e0e7ff; }
.vkx-side button[data-cat="amor"] svg { color: #c4b5fd; }
.vkx-side button[data-cat="vynko"] svg { color: #38bdf8; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .7)); }
.vkx-side button span { font-size: 9.5px; line-height: 1.1; font-weight: 600; color: #cbd5f5; text-align: center; overflow-wrap: anywhere; }
.vkx-side button.on { background: linear-gradient(160deg, #2563eb, #4f46e5); box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .9), 0 0 14px rgba(59, 130, 246, .6); }
.vkx-side button.on span, .vkx-side button.on svg { color: #fff; }

.vkx-grid { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 10px; border-radius: 18px; background: rgba(4, 7, 24, .55); box-shadow: inset 0 0 0 1.2px rgba(56, 189, 248, .3); -webkit-overflow-scrolling: touch; }
.vkx-h { margin: 8px 4px 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #93c5fd; }
.vkx-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 2px; }
.vkx-it { aspect-ratio: 1; padding: 4px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; transition: background .15s; }
.vkx-it img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.vkx-it:active { background: rgba(99, 102, 241, .25); }
.vkx-uni span { font-size: 28px; line-height: 1; }
.vkx-it.vkx-pop { animation: vkxPop .32s ease; }
@keyframes vkxPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.vkx-empty { margin: 24px 10px; text-align: center; color: #a5b4fc; font-size: 14px; line-height: 1.45; }

.vkx-preview { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 20, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vkx-preview.hidden { display: none; }
.vkx-preview-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(20, 28, 70, .97), rgba(30, 16, 64, .97)); box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .7), 0 0 26px rgba(99, 102, 241, .5); animation: vkxIn .16s ease; }
.vkx-preview-pic { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vkx-preview-pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.vkx-preview-pic span { font-size: 92px; line-height: 1; }
.vkx-preview-card b { color: #fff; font-size: 15px; }
.vkx-fav-btn { height: 36px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #db2777, #7c3aed); box-shadow: 0 0 14px rgba(236, 72, 153, .45); }

#chatEmojiBtn.vkx-on { color: #38bdf8; }

/* Pantallas anchas (tableta, computador): la barra lateral con nombre al lado del ícono, como la referencia. */
@media (min-width: 640px) {
  .vkx-side { width: 190px; }
  .vkx-side button { flex-direction: row; gap: 12px; padding: 9px 12px; }
  .vkx-side button svg { width: 26px; height: 26px; flex: none; }
  .vkx-side button span { font-size: 14px; text-align: left; }
  .vkx-cells { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
/* Teléfonos angostos. */
@media (max-width: 360px) {
  .vkx-side { width: 54px; }
  .vkx-side button span { font-size: 8.5px; }
  .vkx-cells { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}

/* Los personajes 3D en los mensajes: un poco más grandes que los emojis normales, para que se vean sus detalles. */
img.vkem-inline[src*="vk-emoji3d"] { width: 1.6em; height: 1.6em; vertical-align: -0.45em; }
img.vkem-inline.vkem-big[src*="vk-emoji3d"] { width: 3.6em; height: 3.6em; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }