/* Tablet: el botón de regalo del composer (mobile-gift-btn, atajo directo
   al modal de "regalo a la sala" ya existente) sigue apareciendo igual que
   antes. La visibilidad de .gifts-panel/.gifts-trigger-btn YA NO se fuerza
   acá con display:none — desde el rediseño de layout (2026-07-26) la
   controla giftsPanelState.js vía data-gifts-mode/data-gifts-open en
   #chat-layout (ver components.css), porque en modo drawer el panel
   necesita poder mostrarse aunque el viewport sea angosto. */
@media (max-width: 1023px) {
  .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-26): en Recibidas/Enviadas del modal de
     Amigos, .friend-row-actions tiene botones con texto ("✅ Aceptar",
     "✕ Rechazar") que en pantallas angostas competían por ancho con
     .friend-row-info en la misma fila, dejando el nombre truncado a una
     sola letra pese a min-width:0 (ver comentario arriba de .friend-row-name).
     Se resuelve pasando las acciones a su propia fila debajo del
     avatar+nombre, en vez de intentar comprimir todo en una sola línea. */
  .friend-row {
    flex-wrap: wrap;
  }
  .friend-row-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: 0.3rem;
  }

  /* Bug real encontrado (2026-07-26, al convertir .layout a CSS Grid): con
     .sidebar en position:fixed (regla de abajo, ya existía), un elemento
     grid position:fixed queda FUERA del algoritmo de ubicación automática
     — .room (el próximo hijo en el DOM) pasaría a ocupar la 1ra columna
     (var(--sidebar-width), 270px) en vez de la 2da, quedando aplastado en
     un ancho angosto que no le corresponde. En flex (como era antes) esto
     no pasaba porque flex no reserva tracks fijos de antemano. Se colapsa
     a una sola columna: la única celda real en este ancho es el chat. */
  .chat-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 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;
  }

  /* Bug real reportado (2026-07-25): al sumar el ícono de amigos, ya son 6
     botones + avatar + monedas y el último (engranaje "Mi perfil") quedaba
     fuera del viewport sin ninguna forma de llegar a él — .status-group era
     flex sin wrap ni overflow, así que lo que no entraba simplemente se
     recortaba en silencio. Los íconos más usados ya se reordenaron delante
     en el HTML (avatar/perfil antes que quiz/en línea/muro); esto es la red
     de seguridad para que ABSOLUTAMENTE NADA quede inalcanzable en
     pantallas todavía más angostas. */
  .status-group {
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .status-group::-webkit-scrollbar {
    display: none;
  }

  .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;
  }

  /* Mensajes privados a pantalla completa en móvil (2026-07-26, prompt
     qwaq.txt: "Puede abrirse como panel de pantalla completa dentro de la
     aplicación", mockup eldemoapp.png) — en escritorio sigue siendo la
     tarjeta chica centrada de siempre (ver .pm-modal en components.css). */
  #pm-modal-backdrop {
    padding: 0;
  }
  .pm-modal {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .pm-modal .modal-header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  .pm-modal-footer {
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  /* Bottom sheet de acciones: usar TODO el ancho disponible menos el
     margen mínimo, en vez del max-width pensado para escritorio. */
  .user-action-modal {
    max-width: none;
  }

  /* Tienda de efectos: pantalla casi completa en móvil (pedido explícito,
     2026-07-26) — en escritorio usa el tamaño fijo de components.css
     (min(920px,...) x min(82dvh,...)). */
  #store-modal-backdrop {
    padding: 6px;
  }
  #store-modal-backdrop .modal.store-modal {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
  }

  /* Panel de regalos en móvil (2026-07-26, pedido explícito): bottom sheet
     en vez de drawer lateral — mismo mecanismo de estado (data-gifts-mode=
     "drawer", data-gifts-open), solo cambia CÓMO entra/sale y su tamaño. */
  .chat-layout[data-gifts-mode="drawer"] .gifts-panel {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: min(88dvh, 760px);
    border-left: none;
    border-top: 1px solid var(--border-soft);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chat-layout[data-gifts-mode="drawer"][data-gifts-open="true"] .gifts-panel {
    transform: translateY(0);
  }
  .chat-layout[data-gifts-mode="drawer"] .gifts-trigger-btn {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 84px);
    right: 12px;
    border-radius: var(--radius-lg);
  }
  /* Misma especificidad que la regla de components.css que fija 5-6 columnas
     en modo drawer (.chat-layout[data-gifts-mode="drawer"] .gift-grid) —
     sin repetir ese selector acá, esta regla más simple (.gift-grid sola)
     perdía siempre contra esa por especificidad, sin importar el media
     query. "Móvil angosto: 4 columnas" (pedido explícito). */
  .chat-layout[data-gifts-mode="drawer"] .gift-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Grilla de la Tienda: 3 columnas en escritorio grande, 2 en tablet/móvil
   (pedido explícito) — el modal mide hasta 920px de ancho en desktop (ver
   components.css), a partir de ~900px de viewport ya entran 3 cómodas. */
@media (min-width: 900px) {
  .store-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 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;
  }
}