/* ===================================================================
   TAROIA — Chat estilo WhatsApp (MOBILE ONLY) • v9 FINAL
   - Desktop: no afecta
   - Activo solo en pantallas táctiles ≤768px
   - Estabiliza altura con visualViewport → --vh
   - Fija header, mantiene input y bloquea scroll global
   =================================================================== */

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

  html.taroia-mobile-on, body.taroia-mobile-on {
    height: 100%;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: transparent !important;
  }

  /* ====== Chat principal ====== */
  .chat-wrap {
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding: 0 !important;
    z-index: 9000 !important;
  }

  /* ====== Burbujas ====== */
  .messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px calc(var(--composer-h, 64px) + env(safe-area-inset-bottom) + 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .bubble {
    background: rgba(10, 10, 18, .45);
    border: 1px solid rgba(231, 195, 114, .28);
    border-radius: 14px;
    padding: 10px 12px;
    line-height: 1.45;
    color: #f1eeff;
    word-wrap: break-word;
    white-space: pre-wrap;
    max-width: 92%;
  }

  .bubble.bot { align-self: flex-start; }
  .bubble.user {
    align-self: flex-end;
    background: rgba(120, 90, 220, .30);
  }

  /* ====== Input / composer ====== */
  .input-row {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
    background: rgba(8, 8, 16, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(231,195,114,.18);
    z-index: 9100;
    box-sizing: border-box;
  }

  .input-row textarea {
    width: 100%;
    resize: none;
    min-height: 48px;
    max-height: 120px;
    height: auto;
    overflow-y: auto;
    background: rgba(8, 8, 16, .42);
    color: #f5ecff;
    border: 1px solid rgba(231,195,114,.28);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    outline: none;
    box-sizing: border-box;
  }

  .input-row button {
    height: 52px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(231,195,114,.45);
    background: linear-gradient(180deg, rgba(231,195,114,.18), rgba(231,195,114,.12));
    color: #f9f0ff;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  }

  .input-row button:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(231,195,114,.24), rgba(231,195,114,.16));
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }

  /* ====== Sin separación artificial (fix visual del composer) ====== */
  .chat-wrap > .chat-pane,
  .chat-pane {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ====== Hotfix: compositor integrado con chat ====== */
  :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;
  }

  .messages,
  .chat-wrap .messages {
    padding-bottom: calc(var(--composer-h, 64px) + env(safe-area-inset-bottom) + 16px) !important;
  }

  .input-row .card,
  .input-row .pane,
  .input-row .frame {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :where(.bubble, .msg, .message){
    max-width: min(
      92%,
      calc(100vw - (var(--side-gap)*2 + env(safe-area-inset-left) + env(safe-area-inset-right)))
    ) !important;
  }
}