/* Barra de arriba de VYNKO en vidrio azul (diseño del dueño 2026-11-05, "Glassmorphism"): ☰ · logo · | · Mi Mundo,
   Live, Buscar, Comunidad (solicitudes de PIN) y Notificaciones, todos del mismo azul (#087CF0 / #006BFF / #35D5FF)
   con reflejo arriba, borde blanco translúcido y sombra azulada; insignias rojo coral (#FF304F) flotando arriba a la
   derecha (99+). Crear y Mensajes se quitan de aquí: están en la barra de abajo. Solo en el teléfono. Prefijo vkhd-.
   El logo no se toca. topbar-glass.js: Live, 99+, aparición de la insignia y la campana. */

body .mp-mobile-topbar {
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 24px -20px rgba(8, 124, 240, .55) !important;
  gap: 8px !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
}
/* Onda azul muy suave debajo, como en el diseño */
body .mp-mobile-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(53, 213, 255, .22), rgba(234, 247, 255, 0) 70%);
}

/* Botones de vidrio azul: ☰ y los de la derecha */
body .mp-mobile-topbar .mp-menu-toggle,
body .mp-mobile-topbar .mp-mobile-topbar-icon {
  position: relative;
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 13px !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(150deg, #35d5ff 0%, #087cf0 52%, #006bff 100%) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -3px 8px rgba(0, 60, 180, .28), 0 6px 14px -6px rgba(0, 107, 255, .75), 0 0 12px -4px rgba(53, 213, 255, .7) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}
body .mp-mobile-topbar .mp-menu-toggle:active,
body .mp-mobile-topbar .mp-mobile-topbar-icon:active { transform: scale(.92); filter: brightness(1.12); }
body .mp-mobile-topbar .mp-menu-toggle svg,
body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 22px; height: 22px; stroke: #fff !important; filter: drop-shadow(0 1px 1px rgba(0, 50, 150, .35)); }
body .mp-mobile-topbar .mp-menu-toggle svg { width: 24px; height: 24px; stroke-width: 2.4; }

/* Separador sutil entre el logo y los botones */
.vkhd-sep { flex: none; width: 1.5px; height: 30px; margin: 0 2px 0 auto; border-radius: 2px; background: linear-gradient(180deg, rgba(8, 124, 240, 0), rgba(8, 124, 240, .35), rgba(8, 124, 240, 0)); }
body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 7px !important; margin-left: 0 !important; }

/* Crear y Mensajes: ya están abajo */
body .mp-mobile-topbar #mobileTopCreateBtn,
body .mp-mobile-topbar #mobileTopMessagesBtn { display: none !important; }

/* Insignias rojo coral flotando arriba a la derecha */
body .mp-mobile-topbar .mp-mobile-topbar-icon .mp-nav-badge {
  position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important;
  min-width: 20px; height: 20px; padding: 0 5px !important; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important; background: #ff304f !important; color: #fff !important;
  font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important;
  border: 2px solid #fff !important; box-shadow: 0 3px 8px -2px rgba(255, 48, 79, .7) !important;
}
body .mp-mobile-topbar .mp-mobile-topbar-icon .mp-nav-badge.hidden { display: none !important; }
.vkhd-pop { animation: vkhdPop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes vkhdPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.vkhd-ring .vkhd-bell { animation: vkhdRing .9s ease; transform-origin: 50% 10%; }
@keyframes vkhdRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* Teléfonos angostos: que no se monten */
@media (max-width: 389px) {
  body .mp-mobile-topbar { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; }
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 12px !important; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 20px; height: 20px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 6px !important; }
}
@media (max-width: 350px) {
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 33px !important; height: 33px !important; min-width: 33px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 4px !important; }
  .vkhd-sep { display: none; }
}

/* Ajuste tras la prueba: el logo nunca se corta (los botones se achican según el ancho) y el ☰ en blanco. */
body .mp-mobile-topbar .mp-mobile-topbar-brand { flex: none !important; min-width: max-content; overflow: visible !important; }
body .mp-mobile-topbar .mp-mobile-topbar-brand span { white-space: nowrap; }
body .mp-mobile-topbar .mp-menu-toggle svg path,
body .mp-mobile-topbar .mp-menu-toggle svg line { stroke: #fff !important; }
body .mp-mobile-topbar .mp-menu-toggle,
body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 37px !important; height: 37px !important; min-width: 37px; border-radius: 12px !important; }
body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 20px; height: 20px; }
body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 6px !important; }
body .mp-mobile-topbar .mp-mobile-topbar-icon .mp-nav-badge { top: -6px !important; right: -6px !important; min-width: 18px; height: 18px; font-size: 10.5px !important; }
@media (max-width: 400px) {
  body .mp-mobile-topbar { gap: 6px !important; padding-left: 8px !important; padding-right: 9px !important; }
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 33px !important; height: 33px !important; min-width: 33px; border-radius: 11px !important; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 18px; height: 18px; }
  body .mp-mobile-topbar .mp-menu-toggle svg { width: 20px; height: 20px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 5px !important; }
}
@media (max-width: 365px) {
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 30px !important; height: 30px !important; min-width: 30px; border-radius: 10px !important; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 17px; height: 17px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 4px !important; }
  .vkhd-sep { display: none; }
}
@media (max-width: 365px) { body .mp-mobile-topbar .mp-mobile-topbar-actions { margin-left: auto !important; } }

/* Teléfonos de 401 a 440 de ancho (muy comunes: 412, 414, 430): con los botones grandes la barra necesitaba ~415 px y
   saltaba de línea, tapando Chats / Personas / Grupos (el dueño 2026-11-10: "los tamaños deben organizarse según el
   tamaño del teléfono"). Botones compactos hasta 440 y la barra nunca salta de línea. */
body .mp-mobile-topbar { flex-wrap: nowrap !important; }
body .mp-mobile-topbar .mp-mobile-topbar-actions { flex-wrap: nowrap !important; min-width: 0; }
@media (max-width: 440px) {
  body .mp-mobile-topbar { gap: 6px !important; padding-left: 8px !important; padding-right: 9px !important; }
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 11px !important; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 19px; height: 19px; }
  body .mp-mobile-topbar .mp-menu-toggle svg { width: 21px; height: 21px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 5px !important; }
}
@media (max-width: 400px) {
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 33px !important; height: 33px !important; min-width: 33px; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 18px; height: 18px; }
  body .mp-mobile-topbar .mp-menu-toggle svg { width: 20px; height: 20px; }
}
@media (max-width: 365px) {
  body .mp-mobile-topbar .mp-menu-toggle,
  body .mp-mobile-topbar .mp-mobile-topbar-icon { width: 30px !important; height: 30px !important; min-width: 30px; }
  body .mp-mobile-topbar .mp-mobile-topbar-icon svg { width: 17px; height: 17px; }
  body .mp-mobile-topbar .mp-mobile-topbar-actions { gap: 4px !important; }
}