/* TAROIA • chat-mobile-hardfix.css v6.1
   - Fondo fijo (body sin scroll)
   - Momentum nativo SOLO en .messages
   - Header y composer fijos
   - Sin touch-action agresivo en ancestros (evita “saltitos”)
   - FIX: textarea = botón (altura y tipografía unificadas y centradas)
*/

@media (max-width:768px) and (hover:none) and (pointer:coarse){

  /* Neutralizar contenedores que rompen fixed en iOS */
  .screen, .stage, #root {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
    overflow: hidden !important;
  }

  /* Fondo bloqueado (el JS agrega .taroia-locked al body) */
  html.taroia-hardfix-on{
    width:100% !important; height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
  body.taroia-locked{
    position:fixed !important;
    left:0; right:0; top:0;
    width:100% !important; height:100% !important;
    overflow:hidden !important;
  }

  /* Header fijo */
  #taroia-header{
    position:fixed !important;
    left:0; right:0; top:0;
    z-index:1000 !important;
    will-change:transform;
  }

  /* Contenedor chat entre header y composer, sin scroll */
  .chat-wrap{
    position:fixed !important;
    left:0; right:0;
    top: var(--anchor-y);
    bottom: var(--composer-h, 64px);
    margin:0 auto;
    max-width:720px; width:100vw;
    padding:12px 14px 0 !important;
    box-sizing:border-box;
    background:transparent !important;
    transform:none !important;
    z-index:9000 !important;

    display:flex; flex-direction:column;
    overflow:hidden !important;
    -webkit-overflow-scrolling:auto;
  }

  /* EL DIÁLOGO SCROLLEA (momentum nativo) */
  .messages,
  [data-role="messages"]{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding:8px 6px 16px !important;
    touch-action:pan-y !important;
  }

  /* Composer fijo pegado abajo */
  .input-row{
    position:fixed !important;
    left:0; right:0; bottom:0;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:10px;
    align-items:end;
    padding:10px 14px calc(env(safe-area-inset-bottom) + 8px) !important;
    background:linear-gradient(180deg, rgba(6,6,10,0) 0%, rgba(6,6,10,.7) 32%, rgba(6,6,10,.95) 100%) !important;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.06);
    z-index:9100 !important;
    box-sizing:border-box;
  }

  /* Rieles laterales con safe areas */
  :root{ --side-gap: 12px; }
  .chat-wrap{
    padding-left:calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right:calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
  .input-row{
    padding-left:calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right:calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }

  /* Burbujas bien anchas */
  :where(.bubble, .msg, .message){
    max-width:min(92%, calc(100vw - (var(--side-gap)*2 + env(safe-area-inset-left) + env(safe-area-inset-right))));
    word-break:break-word; overflow-wrap:break-word;
    line-height:1.45;
    border-radius:18px; padding:10px 12px;
  }
  :where(.bubble, .msg, .message)[data-side="right"], :where(.bubble, .msg, .message).from-user{
    margin-left:auto; border-top-right-radius:6px;
  }
  :where(.bubble, .msg, .message)[data-side="left"], :where(.bubble, .msg, .message).from-ai{
    margin-right:auto; border-top-left-radius:6px;
  }

  /* Desactiva “pane” desktop que separa el input */
  .chat-pane{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  /* === FIX: igualar altura textarea/botón y ajustar composer === */
  .input-row{
    --tui-h-local: var(--tui-h, 56px);
    --composer-h: calc(var(--tui-h-local) + 18px);
    align-items: stretch !important;
    grid-template-columns: 1fr auto !important;
  }

  /* Botón Enviar */
  .input-row button,
  .chat-wrap.is-fixed #send-btn{
    height: var(--tui-h-local) !important;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--tui-font-size, 16px) !important;
    line-height: 1 !important;
    padding: 0 18px !important;
  }

  /* Textarea (centrado vertical exacto) */
  .input-row textarea,
  .chat-wrap.is-fixed #input{
    height: var(--tui-h-local) !important;
    min-height: var(--tui-h-local) !important;
    max-height: var(--tui-h-local) !important;
    line-height: 1 !important;
    padding-block: calc((var(--tui-h-local) - 1em) / 2) !important;
    padding-inline: 14px !important;
    overflow: hidden !important;
    resize: none !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: var(--tui-font-size, 16px) !important;
  }

  /* Ajustar bottom del chat y padding de mensajes */
  .chat-wrap{
    bottom: var(--composer-h) !important;
  }
  .messages,
  [data-role="messages"]{
    padding-bottom: calc(var(--composer-h) + env(safe-area-inset-bottom) + 12px) !important;
  }
}