/* Tablet: el panel de regalos no cabe cómodamente, se oculta — el botón de
   regalo del composer (mobile-gift-btn) aparece en su lugar, mismo
   breakpoint exacto para que nunca falten los dos a la vez. */
@media (max-width: 1023px) {
  .gifts-panel {
    display: none;
  }
  .mobile-gift-btn {
    display: inline-flex;
  }
}

/* Móvil: sidebar pasa a menú off-canvas, y video/chat se muestran por pestañas */
@media (max-width: 767px) {
  .sidebar-toggle {
    display: inline-block;
  }

  /* Bug real reportado (2026-07-21): con 5 íconos en la barra superior
     (mensajes, quiz, en línea, avatar, perfil) + el texto de marca + el
     texto de estado, el topbar no entraba en pantallas angostas y algunos
     íconos quedaban cortados fuera de la vista (nunca tuvo manejo de
     móvil). Se libera espacio ocultando lo que es puramente decorativo
     (nombre de marca, texto "Conectado como...") y achicando el padding de
     los botones — probado a mano que entra incluso en 320px de ancho
     (dispositivos viejos chicos), no solo en teléfonos modernos. */
  /* Pedido explícito (2026-07-26 y 2026-07-27): el logo también ocupa
     espacio que hace falta para los botones del lado derecho en pantallas
     angostas — se deja solo en pc (ver .topbar-logo-crop en components.css). */
  .topbar-logo-crop {
    display: none;
  }

  .status-pill {
    display: none;
  }

  .topbar {
    padding: 0.6rem 0.6rem;
    /* No usar el shorthand "padding" de nuevo acá — pisaría el
       padding-top con env(safe-area-inset-top) del bloque base, que es
       justo donde más importa (celular real, posible notch/isla). */
    padding-top: max(0.6rem, env(safe-area-inset-top));
    gap: 0.4rem;
  }

  .status-group {
    gap: 0.3rem;
  }

  .topbar .icon-btn {
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
  }

  .sidebar {
    position: fixed;
    top: 58px;
    left: 0;
    bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4);
    /* Área segura del home indicator (PWA standalone) — el menú off-canvas
       está fijo al fondo real de la pantalla, no dentro de .layout. */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 58px 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 15;
  }

  .sidebar-backdrop[hidden] {
    display: none;
  }

  .room-body {
    padding: 0.7rem;
    /* Mismo motivo que .topbar arriba: no pisar el padding-bottom con
       env(safe-area-inset-bottom) del bloque base. */
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #mini-mic-btn {
    flex-shrink: 0;
  }

  /* Bug real reportado (2026-07-26): con el botón de regalo nuevo sumado a
     los que ya había (+, emoji, mic), el campo de texto quedaba casi sin
     espacio en pantallas angostas. Los íconos del composer se achican y
     "Enviar" pasa a solo-ícono (el texto ocupaba bastante ancho para lo
     que aporta al lado de un ícono ya bien reconocible). */
  .message-form {
    gap: 0.2rem;
    padding: 0.3rem 0.3rem 0.3rem 0.4rem;
  }
  .message-form .icon-btn {
    padding: 0.4rem;
  }
  .message-form .send-btn {
    padding: 0.55rem;
  }
  .message-form .send-btn span {
    display: none;
  }

  /* Rendimiento en móvil (regla explícita): menos decoración pesada.
     El fondo con dos radiales + fixed-attachment es barato en escritorio
     pero puede notarse en celulares de gama media/baja al hacer scroll —
     se deja un fondo plano. El blur del banner de apartar nick
     (backdrop-filter) es lo más costoso de todo el CSS: se quita en móvil,
     el fondo semitransparente ya es legible sin él. */
  body {
    background: var(--bg-page);
    background-attachment: scroll;
  }

  .entry-modal-backdrop {
    background: var(--bg-page);
  }

  .claim-nick-banner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Pedido explícito (2026-07-27): en celular el aviso "¿Ya tienes cuenta?"
     + su botón se veían igual de grandes que en pc y le robaban espacio a
     la pantalla angosta. Se achican ambos solo acá — en pc quedan igual. */
  .claim-nick-banner {
    padding: 0.35rem 0.6rem;
    gap: 0.5rem;
    font-size: 0.72rem;
  }
  .claim-nick-banner span {
    min-width: 0;
  }
  .claim-nick-banner .btn-primary {
    padding: 0.25rem 0.6rem;
    font-size: 0.68rem;
  }
}

/* Respeta "reducir movimiento" del sistema operativo — suele ir de la mano
   con modo de ahorro de batería/rendimiento en móvil, no solo accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}