/* Capa móvil (iPhone / pantallas táctiles). Se carga al final, después de styles.css.
   Todo va dentro de la media query para no cambiar el escritorio con puntero fino. */
@media (max-width: 768px), (pointer: coarse) {
  /* Objetivos táctiles de al menos 44×44 px */
  a.brand { min-height: 44px; min-width: 44px; }
  .icon-button,
  .site-actions .icon-button,
  .app-header-actions .icon-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .faq-grid summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-5, 12px); min-height: 44px; }
  .text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}

/* Solo por ancho: la burbuja pasa a 54 px con la misma media query de chatwootWidget.js.
   Con (pointer: coarse) en tableta horizontal la burbuja sigue en 60 px y el globo se solaparía. */
@media (max-width: 768px) {
  /* Serena: el globo se apila encima de la burbuja (no a su lado) y respeta la zona segura */
  #aia-globo.aia-globo {
    right: 14px;
    bottom: calc(14px + 54px + 10px + env(safe-area-inset-bottom, 0px));
    max-width: min(260px, calc(100vw - 28px));
    border-radius: 16px 16px 4px 16px;
  }
  #aia-globo .aia-globo-quitar { width: 44px; height: 44px; top: 0; right: 0; }
}