/* ============================================================
   pwa-mobile.css
   Ajustes SOLO para la PWA (navegador / celular / app instalada).
   Todo está atado a "html.pwa", una clase que main.js agrega
   ÚNICAMENTE cuando NO estamos en Tauri. Por eso el desktop
   (la app de escritorio) NO se ve afectado jamás, ni aunque su
   ventana sea angosta.
   Va DESPUÉS de styles.css. Si algo del layout no te cierra,
   mandame styles.css y lo afino.
   ============================================================ */

/* Caso 1: PWA en pantallas chicas (celular) */
@media (max-width: 640px) {
  html.pwa,
  html.pwa body {
    margin: 0;
    height: 100%;
    min-height: 100dvh; /* alto real del viewport (descuenta barra del browser) */
    overflow: hidden;
  }

  /* La "ventana" ocupa toda la pantalla, sin bordes ni redondeos */
  html.pwa .ventana {
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
  }

  /* Barra superior: respeta el notch (safe area de arriba) */
  html.pwa .barra {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Los mensajes ocupan el medio y scrollean */
  html.pwa .mensajes {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Entrada abajo: respeta la safe area inferior (home bar iPhone) */
  html.pwa .entrada {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Inputs a 16px para que iOS no haga zoom al tocarlos */
  html.pwa #input,
  html.pwa #login-input {
    font-size: 16px;
  }
}

/* Caso 2: PWA instalada (Agregar a pantalla de inicio), cualquier tamaño */
@media all and (display-mode: standalone) {
  html.pwa .ventana {
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  html.pwa .barra {
    padding-top: env(safe-area-inset-top, 0px);
  }
  html.pwa .entrada {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
}

/* ============================================================
   Login con Google + foto de usuario (solo PWA / html.pwa)
   ============================================================ */
html.pwa #google-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

html.pwa .login-error {
  color: var(--rojo, #e5484d);
  margin-top: 10px;
}

/* Foto de Google del usuario en la barra del chat */
html.pwa .foto-usuario {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
}