/* ════════════════════════════════════════════════════════════════════
   native-feel.css — UX nativa WebView/PWA (2026)
   CodeHub by Wilson.E
   1) Scroll + toque nativo: sin rebote elástico blanco, sin retardo de
      300ms en el clic, highlight táctil transparente.
   2) Capas GPU a 60fps para los fondos de partículas/Matrix: se anima
      SOLO transform/opacity + contain → cero repintados del documento.
   3) View Transitions API: slide lateral tipo "tabs de Android", con
      soporte para navegación entre páginas (MPA) vía @view-transition.
   Cargar SIEMPRE antes de viewport-guard.css (última capa de la cadena).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1) Scroll + toque nativo ─────────────────────────────────────── */

/* Mata el rebote elástico blanco del WebView en el scroll del documento */
html, body {
  overscroll-behavior: none;
}

/* El tap del nav/gamepad ya no deja rastro visual (solo el nuestro) */
* { -webkit-tap-highlight-color: transparent; }

/* Mata el retardo de 300ms en clics móviles SIN matar el zoom
   accesible (mejor que user-scalable=no). WebView moderno lo respeta. */
button, a, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}

/* Zonas de juego/efectos: el gesto no arranca el scroll de la página */
canvas.game-canvas, .ch-fx {
  touch-action: none;
}

/* Juegos: nada de callout de selección/long-press en el canvas */
canvas.game-canvas, .arr, .control-btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 2) Capas aceleradas por hardware (Matrix / partículas) ──────────
   La capa vive en el compositor (translateZ(0)), su contenido no
   afecta el layout del documento (contain) y solo se tocan
   transform/opacity → el pintor no vuelve a recopilarse → 60fps. */
.ch-fx {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout paint style;
}

/* ── 3) View Transitions: slide lateral tipo app nativa ───────────── */

/* Activa MPA View Transitions (Chrome/WebView 126+): la navegación
   entre páginas del hub (Tools/Apps/Servicios) ya no "salta": hace
   transición nativa del navegador. Sin efecto -> mismo comportamiento. */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: .34s; }

html[data-vt="fwd"]::view-transition-old(root) {
  animation: vtOutLeft .32s cubic-bezier(.42, 0, .2, 1) both;
}
html[data-vt="fwd"]::view-transition-new(root) {
  animation: vtInLeft  .32s cubic-bezier(.42, 0, .2, 1) both;
}
html[data-vt="back"]::view-transition-old(root) {
  animation: vtOutRight .32s cubic-bezier(.42, 0, .2, 1) both;
}
html[data-vt="back"]::view-transition-new(root) {
  animation: vtInRight  .32s cubic-bezier(.42, 0, .2, 1) both;
}

@keyframes vtOutLeft  { to { transform: translate3d(-22%, 0, 0); opacity: .35; } }
@keyframes vtInLeft   { from { transform: translate3d(100%, 0, 0); } }
@keyframes vtOutRight { to { transform: translate3d(22%, 0, 0);    opacity: .35; } }
@keyframes vtInRight  { from { transform: translate3d(-100%, 0, 0); } }

/* A11y: usuarios con "less motion" → nada de slide, ida y vuelta limpio */
@media (prefers-reduced-motion: reduce) {
  html[data-vt]::view-transition-old(root),
  html[data-vt]::view-transition-new(root),
  ::view-transition-group(root) { animation: none !important; }
}

/* ── Polaco del tab activo del menú inferior (píldora sutil) ──────── */
@media (max-width: 640px) {
  #mobile-nav-bar a.active {
    background: rgba(47, 128, 237, .12);
  }
}

/* ── 4) Control de música flotante (solo APK) ────────────────────────
   Se monta SOLO cuando Android empuja estado de reproducción
   (js/native-music.js → window.__chMusicOnState): en el navegador no
   existe el elemento y aquí no queda nada suelto.
   Flota justo encima de #hub-dock; el offset real lo mide el JS en cada
   breakpoint, y este valor es la red de seguridad si no hay dock. */
.ch-nm__live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

#chNativeMusic {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 116px;
  z-index: 4001;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* border-box: el ancho declarado es el ancho real (padding+borde dentro).
     Sin esto, en 380px el control desbordaba ~6px. */
  box-sizing: border-box;
  width: min(380px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  min-width: 0;
  padding: 8px 12px 10px;
  border-radius: var(--radius-xl, 22px);
  background: rgba(12, 12, 20, .82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: #e8ecf5;
  user-select: none;
  -webkit-user-select: none;
  /* Arrastrable con long-press: nada de scroll ni menú de selección */
  touch-action: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
/* display:flex del bloque no puede ganarle al atributo hidden */
#chNativeMusic[hidden] { display: none !important; }

/* Arrastre activo (long-press) y posición personalizada del usuario.
   z 5100 para que, si lo colocan encima del FAB de WIL.E (5000), el
   control se vea completo; el dock queda por debajo (4000). */
#chNativeMusic.ch-nm--drag,
#chNativeMusic.ch-nm--placed {
  z-index: 5100;
}
#chNativeMusic.ch-nm--drag {
  cursor: grabbing;
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#chNativeMusic.ch-nm--drag .ch-nm__meta,
#chNativeMusic.ch-nm--drag .ch-nm__btn {
  cursor: grabbing;
}
[data-theme="light"] #chNativeMusic.ch-nm--drag {
  border-color: rgba(15, 23, 42, .25);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
}

/* Progreso: 2px pegados al borde superior */
.ch-nm__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.ch-nm__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary, #2f80ed), var(--accent, #00d4ff));
  transition: width .3s linear;
}

.ch-nm__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Metadatos = botón "abrir reproductor" */
.ch-nm__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 6px 2px 2px;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ch-nm__title,
.ch-nm__sub {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-nm__title { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.ch-nm__sub   { font-size: .68rem; line-height: 1.3; opacity: .65; }

.ch-nm__btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md, 14px);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.ch-nm__btn:active { transform: scale(.94); }
.ch-nm__btn:hover  { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.ch-nm__meta:focus-visible,
.ch-nm__btn:focus-visible { outline: 2px solid var(--primary, #2f80ed); outline-offset: 2px; }
.ch-nm__play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border-color: transparent;
  background: linear-gradient(150deg, var(--primary, #2f80ed), var(--accent, #1b6ef3));
  color: #fff;
  font-size: 1rem;
}
.ch-nm__play:hover {
  background: linear-gradient(150deg, var(--primary, #2f80ed), var(--accent, #1b6ef3));
  border-color: transparent;
  filter: brightness(1.08);
}

/* Teléfonos: mismo lenguaje que #hub-dock a ≤480px (dock a ~14px + 74px) */
@media (max-width: 480px) {
  #chNativeMusic { bottom: 100px; padding: 7px 10px 9px; gap: 5px; }
  .ch-nm__title { font-size: .78rem; }
  .ch-nm__sub   { font-size: .64rem; }
  .ch-nm__row   { gap: 6px; }
  .ch-nm__btn   { width: 36px; height: 36px; font-size: .82rem; }
  .ch-nm__play  { width: 40px; height: 40px; font-size: .95rem; }
}

/* Mínimo soportado (380px): nada puede desbordar */
@media (max-width: 380px) {
  #chNativeMusic { width: calc(100vw - 16px); }
  .ch-nm__btn  { width: 34px; height: 34px; }
  .ch-nm__play { width: 38px; height: 38px; }
}

/* Tema claro: mismo lenguaje que #hub-dock */
[data-theme="light"] #chNativeMusic {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(15, 23, 42, .1);
  box-shadow: 0 8px 32px rgba(15, 23, 42, .15);
  color: #0f172a;
}
[data-theme="light"] .ch-nm__bar { background: rgba(15, 23, 42, .12); }
[data-theme="light"] .ch-nm__btn {
  border-color: rgba(15, 23, 42, .1);
  background: rgba(15, 23, 42, .04);
}
[data-theme="light"] .ch-nm__btn:hover { background: rgba(15, 23, 42, .08); }
[data-theme="light"] .ch-nm__sub { opacity: .7; }