/**
 * GX ONE — Barra de chat en celular vertical + modo redacción (compose).
 * Pedido del dueño 2026-09-28 (patrón ChatGPT/Claude):
 *  - Vertical: la barra es « + | texto | mic | tiempo real ». El logo One sale de
 *    la barra (la opción «One by GlobaiX» del hub «+» la pone plus_hub_menu.js).
 *    En horizontal el logo se muestra como siempre.
 *  - Al escribir, el texto ocupa TODO el ancho y crece hasta ~8 líneas (media
 *    pantalla sobre el teclado); abajo quedan «+», mic y enviar/tiempo real.
 * Todo vive bajo body.gx-mobile-portrait / body.gx-compose*: fuera de esos estados
 * esta hoja no cambia nada. El botón enviar es el existente #gxSendBtn
 * (input_send_states.js) — no se crea otro.
 * Especificidad: #chatInputContainer.footer-collapsed #footerControls (2 IDs) manda
 * en el CSS viejo → acá se usa #chatInputContainer #footerControls para ganar.
 */

/* ===== Celular vertical: barra limpia, sin logo ===== */
body.gx-mobile-portrait .logo-and-role-wrap { display: none !important; }
body.gx-mobile-portrait .input-row .btn-attach { margin-left: 2px; }

/* Hallazgo del dueño en su teléfono (28-sep, frente A): al cerrar el menú «+» el input
   quedaba «marcado» en azul (borde :focus rgba(0,153,255) de index.html) y los botones
   de la barra flasheaban con el tap-highlight del navegador. En vertical el foco se
   marca neutro (sin azul) y se apaga el highlight de toque en toda la barra. */
body.gx-mobile-portrait #chatInputContainer,
body.gx-mobile-portrait #chatInputContainer * {
    -webkit-tap-highlight-color: transparent;
}
body.gx-mobile-portrait #chatInputContainer .gx-input-wrap:focus-within,
body.gx-mobile-portrait #chatInputContainer #userInput:focus {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Frente F (28-sep, decisión del dueño): en celular VERTICAL el botón de tiempo real se
   esconde esta semana — el estado «te escucho / te hablo» vive en un label que en el
   círculo de 40px no se ve, y el toque abría el teclado. Opt-in por tenant:
   config.features.realtimeHiddenMobilePortrait (compose_mode.js pone la clase). Desktop
   y horizontal no cambian. */
body.gx-mobile-portrait.gx-rt-hidden-mobile #btnVoiceRealtimeToggle { display: none !important; }

/* ===== Estado compose (todas las pantallas): el textarea crece con --gx-compose-h ===== */
body.gx-compose #userInput {
    height: var(--gx-compose-h, 44px) !important;
    min-height: 44px !important;
    max-height: none !important;
    line-height: 22px !important;
    overflow-y: auto !important;
    resize: none;
}

/* ===== Compose en desktop: la píldora, la fila y el shell siguen al textarea =====
   Dueño 15-oct (visto en vivo al parar un dictado largo): el textarea crecía a 4 líneas
   pero .gx-input-wrap (55px), .input-row (max 82px) y #chatInputContainer (alto fijo)
   no, así que el texto desbordaba la barra «pisando el input». En celular ya se
   levantaban estas tres alturas (bloque mobile de abajo); esta es la rama desktop. */
body.gx-compose:not(.gx-compose-mobile) #chatInputContainer,
body.gx-compose:not(.gx-compose-mobile) #chatInputContainer.footer-collapsed,
body.gx-compose:not(.gx-compose-mobile) #chatInputContainer.footer-expanded.footer-dialog-empty {
    height: auto !important;
}
body.gx-compose:not(.gx-compose-mobile) #chatInputContainer #footerControls.input-row {
    max-height: none !important;
    align-items: flex-end !important;
}
body.gx-compose:not(.gx-compose-mobile) #chatInputContainer .gx-input-wrap {
    height: auto !important;
    min-height: 55px;
    align-items: flex-end;
}

/* ===== Compose en celular/táctil: hoja de escritura ===== */
body.gx-compose-mobile #chatInputContainer,
body.gx-compose-mobile #chatInputContainer.footer-collapsed {
    height: auto !important;
}
body.gx-compose-mobile #navigation-bar { display: none !important; }

/* La fila pasa a grilla de 2 filas: texto arriba a todo el ancho; acciones abajo.
   .gx-input-wrap se «disuelve» (display: contents) para que textarea y mic sean
   hijos directos de la grilla; la píldora visual la toma la fila. */
body.gx-compose-mobile #chatInputContainer #footerControls.input-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    align-items: end !important;
    max-height: none !important;
    height: auto !important;
    gap: 4px 6px !important;
    padding: 8px 8px 8px 8px !important;
    border-radius: 22px !important;
    background: rgba(20, 20, 20, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
body.gx-compose-mobile .gx-input-wrap {
    display: contents !important;
}
body.gx-compose-mobile #chatInputContainer #footerControls #userInput {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    font-size: 16px !important;   /* 16px: iOS no hace zoom al enfocar */
    padding: 8px 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.gx-compose-mobile #chatInputContainer #footerControls .btn-attach {
    grid-column: 1;
    grid-row: 2;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}
body.gx-compose-mobile #chatInputContainer #footerControls .btn-mic-dictate {
    grid-column: 3;
    grid-row: 2;
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}
/* Slot derecho: enviar (con texto) o tiempo real (sin texto) — mismo lugar */
body.gx-compose-mobile #chatInputContainer #footerControls #gxSendBtn,
body.gx-compose-mobile #chatInputContainer #footerControls #btnVoiceRealtimeToggle {
    grid-column: 4;
    grid-row: 2;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin: 0 !important;
}
body.gx-compose-mobile #chatInputContainer #footerControls #gxSendBtn.gx-send-visible { display: inline-flex !important; }
/* Con texto, input_send_states esconde tiempo real (inline) pero el CSS móvil lo
   fuerza visible con !important: respetar la regla 4.6 (mic + enviar, sin ML) */
body.gx-mobile-portrait #btnVoiceRealtimeToggle[data-gx-hidden-by-send="1"],
body.gx-compose-mobile #btnVoiceRealtimeToggle[data-gx-hidden-by-send="1"] { display: none !important; }
/* Frente E (28-sep): la píldora «Te hablo… / Procesando…» (#inputMicPlaying, mic_status_ui.js)
   es absolute right:12px top:50% dentro de .gx-input-wrap; con la wrap disuelta
   (display: contents) quedaba flotando a mitad de la grilla. En compose ocupa el hueco
   de la fila de acciones, entre «+» y el mic. */
body.gx-compose-mobile #chatInputContainer #footerControls #inputMicPlaying {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    transform: none !important;
    margin: 0 4px 0 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Barras de grabación y selector de idioma: fuera del flujo de la grilla */
body.gx-compose-mobile #chatInputContainer #footerControls #inputAudioBars {
    grid-column: 1 / -1;
    grid-row: 1;
}
body.gx-compose-mobile #chatInputContainer #footerControls .gx-lang-pin-wrap { display: none !important; }