/* R21 MOBILE CHAT FIX (v3)
   Solo MÓVIL. No modifica ningún otro archivo de R21; PC queda intacto.

   1) Sin zoom al enfocar el input de RIVA: iOS Safari hace zoom automático si el campo
      tiene menos de 16px de fuente. Se fija a 16px (sin bloquear el pellizco de zoom del usuario).
   2) Burbujas pegadas abajo: el hilo de mensajes empuja su contenido hacia el input de RIVA.
   3) Tarjeta R21 TOOLS: se elimina la altura fija por aspect-ratio y el min-height:0 de la lista
      que hacían que los botones se salieran del contenedor y se solaparan. La tarjeta crece
      según su contenido, igual que en PC. */

@media (max-width: 809.98px), (pointer: coarse) and (max-width: 1199.98px) {
  /* 1 — anti-zoom iOS */
  html body .framer-7Lqav .framer-499m6m .r21-riva-input,
  html body .r21-riva-input {
    font-size: 16px !important;
    line-height: 1.35 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html body .r21-music-search-drawer input {
    font-size: 16px !important;
  }
}

@media (max-width: 809.98px) {
  /* 2 — mensajes pegados al input de RIVA (abajo) */
  html body .framer-7Lqav .framer-dpcwyl.r21-riva-thread-host .r21-riva-thread {
    padding-bottom: 6px !important;
  }
  html body .framer-7Lqav .framer-dpcwyl.r21-riva-thread-host .r21-riva-thread::before {
    content: "";
    display: block;
    flex: 0 0 0;
    margin-top: auto;      /* empuja todo el contenido hacia abajo y mantiene el scroll */
    margin-bottom: -10px;  /* compensa el gap del hilo */
  }

  /* 3 — R21 TOOLS: tarjeta a todo el ancho y centrada; botones dentro y sin solaparse */
  html body .framer-7Lqav .framer-1urimcm .framer-a3uj6t.r21-tools-card-host {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  html body .r21-tools-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 22px !important;
    border-radius: 24px !important;
  }
  html body .r21-tools-title {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  html body .r21-tools-list {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
    gap: 12px !important;
  }
  html body .r21-tools-more {
    margin-top: 12px !important;
  }
  html body .r21-tools-item {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: 52px !important;
    height: auto !important;
    gap: 14px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
  html body .r21-tools-item > span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   v2 — CONVERSACIÓN CON RIVA EN MÓVIL (solo ≤ 809.98px; PC/tablet intactos)
   - El hilo de mensajes (framer-dpcwyl) baja y se coloca ENCIMA de la imagen
     framer-qau8lr, a todo el ancho y pegado al input de RIVA.
   - Burbujas más legibles (tamaño de texto cómodo, anclaje abajo, desvanecido arriba).
   - Botón "Crear proyecto" del input → "Crear" (EN: "Create").
   ========================================================================== */
@media (max-width: 809.98px) {
  /* Colocación explícita en la rejilla: Tools (fila 1, col. derecha) · imagen + hilo
     superpuestos (fila 2) · composer (fila 3). Las posiciones visuales no cambian
     salvo el hilo, que pasa a solaparse con la imagen. */
  html body .framer-7Lqav .framer-bxweu9 > .framer-1urimcm {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-items: center !important;
    width: 100% !important;
  }
  html body .framer-7Lqav .framer-bxweu9 > .framer-qau8lr {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
  }
  html body .framer-7Lqav .framer-bxweu9 > .framer-ittenx {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    order: 0 !important;
    align-self: end !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 0 6px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 6 !important;
    pointer-events: none !important;   /* el scroll de la página sigue funcionando sobre la zona vacía */
  }

  /* Contenedor del hilo: ancho completo, altura cómoda, anclado abajo */
  html body .framer-7Lqav .framer-dpcwyl.r21-riva-thread-host {
    width: 100% !important;
    max-width: none !important;
    height: min(310px, 78vw) !important;
    min-height: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
  }
  html body .framer-7Lqav .framer-dpcwyl.r21-riva-thread-host .r21-riva-thread {
    padding: 28px 2px 4px !important;
    gap: 10px !important;
    pointer-events: auto !important;          /* se arrastra desde burbujas, avatares y huecos */
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;   /* al llegar al final, la página sigue su scroll */
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body .r21-riva-msg,
  html body .r21-riva-msg .r21-riva-bubble,
  html body .r21-riva-msg .r21-riva-avatar {
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  /* Burbujas: tamaño legible y aspecto cuidado */
  html body .r21-riva-msg { gap: 8px !important; }
  html body .r21-riva-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  html body .r21-riva-bubble {
    max-width: 82% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
  }
  html body .r21-riva-msg.riva .r21-riva-bubble { border-bottom-left-radius: 6px !important; }
  html body .r21-riva-msg.user .r21-riva-bubble { border-bottom-right-radius: 6px !important; }

  /* Botón "Crear proyecto" → "Crear" (solo el span con el degradado; el <p> padre no se toca) */
  html body .framer-7Lqav .r21-riva-composer .framer-q813g3 p.framer-text {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  html body .framer-7Lqav .r21-riva-composer .framer-q813g3 p.framer-text > span.framer-text {
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }
  html body .framer-7Lqav .r21-riva-composer .framer-q813g3 p.framer-text > span.framer-text::after {
    content: "Crear";
    display: block;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: normal;
  }
  html[lang="en"] body .framer-7Lqav .r21-riva-composer .framer-q813g3 p.framer-text > span.framer-text::after {
    content: "Create";
  }
}