/* jarvis.css — el chat de Jarvis: el hilo, el botón flotante y el cajón.
 *
 * DOS SUPERFICIES, UN SOLO JUEGO DE CLASES. Las burbujas (`jv-msg`, `jv-cita`,
 * la barra de escribir) las usan igual la pantalla `/hub/asistente` y el cajón
 * que cuelga del shell. Lo que cambia entre las dos es el envase, no el chat.
 *
 * LOS COLORES SALEN DE LOS TOKENS de hzn-ds.css, que se carga en TODAS las
 * pantallas del hub. Por eso el cajón se ve bien tanto en una pantalla ya
 * convertida al sistema de diseño (donde además hay modo oscuro) como en una
 * que sigue en Tailwind: en la segunda los tokens claros son los de siempre.
 * Un color literal acá sería el único punto del hub que no sigue el tema.
 *
 * Y CADA var() LLEVA SU RESPALDO, que es lo que hace que este mismo archivo
 * sirva en el FRONT PÚBLICO. El sitio no carga hzn-ds.css: define su propio
 * `:root` con `--red`, `--ink`, `--white` y poco más, así que `var(--tx, #191919)` ahí
 * no resuelve a nada y el cajón saldría sin colores.
 *
 * Con el respaldo puesto, el archivo es uno solo: en el hub toma los tokens del
 * sistema de diseño (modo oscuro incluido) y en el sitio cae a los literales de
 * la marca. La alternativa era una segunda hoja casi idéntica, y dos hojas casi
 * idénticas se separan: alguien arregla el espaciado de la burbuja en una y la
 * otra queda distinta, sin que nada avise.
 */

/* ===================================================================
   EL HILO — común a la pantalla y al cajón
   =================================================================== */
.jv-hilo { display:flex; flex-direction:column; gap:12px; }

.jv-msg { border-radius:12px; padding:13px 15px; font-size:13.5px;
          line-height:1.6; }
.jv-yo { align-self:flex-end; max-width:85%; background:var(--tx, #191919);
         color:var(--tx-inv, #ffffff); }
.jv-el { align-self:flex-start; max-width:94%; background:var(--surface, #ffffff);
         border:1px solid var(--line, rgba(25,25,25,.10)); color:var(--tx, #191919); }
.jv-el.mal { border-color:var(--red-line, #f3b9bb); background:var(--red-soft, #fdeced);
             color:var(--red, #d1060b); }
.jv-pensando { color:var(--tx-3, #6b6a6b); font-style:normal; }

/* EL MARKDOWN YA RENDERIZADO. Estas reglas son la otra mitad del render: sin
   ellas un `<ul>` dentro de una burbuja hereda los márgenes del navegador y
   empuja el texto contra el borde. Se listan las etiquetas que `markdown_seguro`
   puede emitir, y ninguna más: si aparece otra acá, es que alguien amplió la
   lista blanca de allá sin mirar cómo se ve. */
.jv-el p { margin:0 0 9px; }
.jv-el p:last-child { margin-bottom:0; }
.jv-el strong { font-weight:700; }
.jv-el em { font-style:italic; }
.jv-el ul, .jv-el ol { margin:0 0 9px; padding-left:20px; }
.jv-el ul:last-child, .jv-el ol:last-child { margin-bottom:0; }
.jv-el li { margin:3px 0; }
.jv-el a { color:var(--accent, #d1060b); text-decoration:underline;
           text-underline-offset:2px; }
.jv-el code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
              font-size:12.5px; background:var(--surface-2, #f5f4f4);
              border:1px solid var(--line-2, rgba(25,25,25,.18)); border-radius:5px;
              padding:1px 5px; }
.jv-el pre { margin:0 0 9px; padding:10px 12px; overflow-x:auto;
             background:var(--surface-2, #f5f4f4); border:1px solid var(--line-2, rgba(25,25,25,.18));
             border-radius:8px; }
.jv-el pre:last-child { margin-bottom:0; }
.jv-el pre code { background:none; border:0; padding:0; font-size:12.5px; }

/* Las citas */
.jv-citas { margin-top:10px; padding-top:9px; border-top:1px solid var(--line, rgba(25,25,25,.10));
            display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.jv-citas-t { font-size:10.5px; font-weight:700; letter-spacing:.05em;
              text-transform:uppercase; color:var(--tx-3, #6b6a6b); margin-right:2px; }
.jv-cita { font-size:11.5px; color:var(--tx-3, #6b6a6b); background:var(--surface-2, #f5f4f4);
           border:1px solid var(--line-2, rgba(25,25,25,.18)); border-radius:999px; padding:3px 10px; }

/* La barra de escribir */
.jv-barra { display:flex; gap:8px; align-items:flex-end; }
.jv-input { flex:1; font-family:'Inter',sans-serif; font-size:13.5px;
            color:var(--tx, #191919); background:var(--surface, #ffffff); resize:none;
            border:1px solid var(--line-2, rgba(25,25,25,.18)); border-radius:10px;
            padding:11px 13px; min-height:46px; max-height:140px; }
.jv-input:focus { outline:none; border-color:var(--accent, #d1060b);
                  box-shadow:0 0 0 3px var(--line, rgba(25,25,25,.10)); }
.jv-btn { font-family:'Manrope',sans-serif; font-size:13px; font-weight:700;
          color:#fff; background:var(--accent, #d1060b); border:0; border-radius:10px;
          padding:12px 18px; cursor:pointer; flex:none; }
.jv-btn[disabled] { opacity:.55; cursor:default; }

.jv-sugerencias { display:flex; flex-wrap:wrap; gap:6px; }
.jv-sug { font-size:12px; color:var(--tx, #191919); background:var(--surface, #ffffff);
          border:1px solid var(--line-2, rgba(25,25,25,.18)); border-radius:999px; padding:6px 12px;
          cursor:pointer; font-family:'Inter',sans-serif; text-align:left; }
.jv-sug:hover { border-color:var(--tx, #191919); }
.jv-pie { font-size:11.5px; color:var(--tx-3, #6b6a6b); }

/* ===================================================================
   EL BOTÓN FLOTANTE
   =================================================================== */
/* POR QUÉ FLOTA Y NO ES OTRO ITEM MÁS DEL MENÚ. El item del menú ya existe y se
   queda. Este botón resuelve otra cosa: preguntar SIN PERDER LA PANTALLA. La
   pregunta típica («¿esto qué era?») aparece en el medio de una tarea, y hoy
   contestarla cuesta irse de la tarea, leer, y volver a encontrar dónde estaba.
   Por eso el cajón se abre ENCIMA y no navega a ningún lado. */
.jv-launcher { position:fixed; right:22px; bottom:22px; z-index:140;
  width:54px; height:54px; border-radius:999px; border:0; cursor:pointer;
  background:var(--accent, #d1060b); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(25,25,25,0.28);
  transition:transform 140ms ease, box-shadow 140ms ease; }
.jv-launcher:hover { transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(25,25,25,0.34); }
.jv-launcher:active { transform:translateY(0); }
.jv-launcher svg { width:25px; height:25px; }
/* Con el cajón abierto el botón se va: si se quedara, taparía la barra de
   escribir justo cuando hay que escribir. */
.jv-launcher.oculto { opacity:0; pointer-events:none; transform:scale(.85); }

/* ===================================================================
   EL CAJÓN
   =================================================================== */
.jv-scrim { position:fixed; inset:0; z-index:145; background:rgba(25,25,25,.34);
  opacity:0; pointer-events:none; transition:opacity 180ms ease; }
.jv-scrim.abierto { opacity:1; pointer-events:auto; }

/* z-index 150: por encima de la barra lateral (90) y por DEBAJO del banner de
 * sesión de soporte (200), que no se puede tapar nunca.
 *
 * LA ALTURA NO ES `100vh`, Y ESA ERA LA FALLA EN EL CELULAR.
 *
 * En un navegador móvil `100vh` es la altura de la ventana CON la barra de
 * direcciones RETRAÍDA — o sea la más grande que puede llegar a tener, no la
 * que se está viendo. Con la barra a la vista el cajón medía más que la
 * pantalla, y como el compositor es el último hijo de la columna, la caja de
 * escribir y el botón «Enviar» quedaban debajo del fold: invisibles, y sin
 * forma de alcanzarlos porque el que scrollea es el HILO, no el cajón.
 *
 * Las tres declaraciones son una escalera de respaldos y el navegador se queda
 * con la última que entiende:
 *   `100vh`   el de siempre, para un navegador viejo;
 *   `100svh`  el viewport CHICO (barra a la vista). Nunca sobra;
 *   `100dvh`  el DINÁMICO: se ajusta solo cuando la barra aparece o se va.
 * Y encima de las tres, `.jv-vv`, que es la única que sabe del teclado (ver el
 * bloque `visualViewport` en `public/_jarvis_publico.html`). */
.jv-drawer { position:fixed; top:0; right:0; z-index:150;
  width:420px; max-width:100vw;
  height:100vh; height:100svh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--bg, #ffffff); border-left:1px solid var(--line, rgba(25,25,25,.10));
  box-shadow:-14px 0 40px rgba(25,25,25,0.18);
  transform:translateX(100%); transition:transform 200ms ease;
  visibility:hidden; }
.jv-drawer.abierto { transform:translateX(0); visibility:visible; }

/* EL TECLADO, QUE ES LO ÚNICO QUE `dvh` NO VE.
 *
 * `dvh` sigue la barra del navegador y NO el teclado: con el teclado abierto el
 * viewport visual se achica y el cajón —que es `position:fixed` contra el
 * viewport de LAYOUT— se queda del alto de antes, así que el compositor vuelve
 * a caer debajo, tapado. La API que sí lo ve es `window.visualViewport`.
 *
 * El JS mide y escribe `--jv-alto` / `--jv-top`, y SOLO ENTONCES agrega
 * `.jv-vv`. La clase aparte —en vez de un `var(--jv-alto, 100dvh)` en la regla
 * de arriba— es a propósito: una `var()` sin valor es «inválida en tiempo de
 * cómputo» y tira la propiedad entera al default, no a la declaración anterior.
 * O sea que sin JS el cajón se quedaría SIN altura en vez de caer a `dvh`. */
.jv-drawer.jv-vv { height:var(--jv-alto); top:var(--jv-top, 0px); }

/* Con una sesión de soporte abierta el banner ocupa los primeros 40px y no se
   puede tapar. El cajón baja, igual que la barra lateral. */
html.impersonating .jv-drawer { top:40px; height:calc(100vh - 40px);
  height:calc(100svh - 40px); height:calc(100dvh - 40px); }
html.impersonating .jv-drawer.jv-vv { height:calc(var(--jv-alto) - 40px); }

.jv-head { flex:none; display:flex; align-items:center; gap:11px;
  padding:15px 16px; border-bottom:1px solid var(--line, rgba(25,25,25,.10));
  background:var(--surface, #ffffff); }
.jv-head-ico { width:34px; height:34px; border-radius:999px; flex:none;
  background:var(--accent, #d1060b); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.jv-head-ico svg { width:18px; height:18px; }
.jv-head-t { font-family:'Manrope',sans-serif; font-weight:800; font-size:15px;
  color:var(--tx, #191919); line-height:1.2; }
.jv-head-s { font-size:11.5px; color:var(--tx-3, #6b6a6b); line-height:1.3;
  margin-top:1px; }
.jv-cerrar { margin-left:auto; flex:none; background:none; border:0;
  cursor:pointer; color:var(--tx-3, #6b6a6b); padding:6px; border-radius:8px;
  display:flex; }
.jv-cerrar:hover { background:var(--surface-2, #f5f4f4); color:var(--tx, #191919); }
.jv-cerrar svg { width:18px; height:18px; }

/* `min-height:0` ES EL CINTURÓN DEL «el historial hace scroll adentro». Un hijo
   flexible arranca en `min-height:auto`, o sea que se niega a achicarse por
   debajo de su contenido: con eso, un hilo largo empuja la columna y saca al
   compositor por abajo. Medido en Chrome, `overflow-y:auto` ya alcanza para que
   este hijo se pueda achicar, así que hoy esta línea no cambia nada acá — se
   deja porque la garantía tiene que venir de la regla y no del navegador de
   turno, que es lo que se rompe el día que alguien toca el `overflow`.
   `overscroll-behavior:contain` sí cambia algo y se ve: llegar al final del
   hilo deja de llevarse puesta la página de atrás. */
.jv-cuerpo { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:16px; }
/* EL COMPOSITOR ES EL PISO DE LA COLUMNA Y NO SE VA DE AHÍ. `flex:none` con
   el cajón ya acotado alcanza: no scrollea porque no está adentro del que
   scrollea. El `env(safe-area-inset-bottom)` es para el iPhone con barra de
   gestos, que si no se come el borde de abajo del botón. */
.jv-pieza { flex:none; padding:12px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line, rgba(25,25,25,.10));
  background:var(--surface, #ffffff); display:flex; flex-direction:column; gap:9px; }

.jv-nota { font-size:12px; color:var(--tx-2, #504f50); background:var(--surface-2, #f5f4f4);
  border:1px solid var(--line-2, rgba(25,25,25,.18)); border-left:3px solid var(--accent, #d1060b);
  border-radius:8px; padding:10px 12px; }
.jv-nota.prueba { border-left-color:var(--gold, #8a6d1f); background:var(--gold-soft, #fbf3dd);
  color:var(--gold, #8a6d1f); }

/* ===================================================================
   EL CELULAR — donde el compositor tiene que verse SIEMPRE
   =================================================================== */
/* Se medió en 360 y 390 px de ancho, que son los dos anchos con los que se
   reportó el problema. Lo que cambia acá es sólo lo que el teléfono necesita:
   el escritorio queda exactamente como estaba. */
@media (max-width:520px) {
  .jv-drawer { width:100vw; }
  .jv-launcher { right:16px; width:50px; height:50px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* EL ZOOM DE iOS AL ENFOCAR, que también sacaba la caja de la pantalla.
     Safari hace zoom sobre cualquier campo con la letra menor a 16px, y ese
     zoom corre el viewport: el compositor terminaba medio afuera y el usuario
     tenía que despincharlo a mano. 16px exactos es el umbral, no una
     preferencia tipográfica. */
  .jv-input { font-size:16px; min-height:44px; max-height:96px; padding:10px 12px; }
  .jv-btn { font-size:13px; padding:12px 14px; }

  /* Un poco menos de aire arriba y abajo: en 360px cada píxel del compositor
     es un píxel que el hilo no necesita. */
  .jv-cuerpo { padding:14px; }
  .jv-pieza { padding:10px 14px 12px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .jv-pie { font-size:11px; }
}

/* CON EL CAJÓN ABIERTO, LA PÁGINA DE ATRÁS NO SE MUEVE. En el teléfono el
   cajón ocupa todo y el scroll del documento por debajo hace que el dedo, al
   intentar leer el hilo, mueva el sitio en vez del chat. La clase la pone y la
   saca el bloque de `public/_jarvis_publico.html`. Sólo en móvil: en el
   escritorio el cajón es una columna al costado y bloquear el sitio sería un
   cambio de comportamiento que nadie pidió. */
@media (max-width:520px) {
  html.jv-abierto, html.jv-abierto body { overflow:hidden; }
}

/* Sin animación para quien la pidió apagada. */
@media (prefers-reduced-motion:reduce) {
  .jv-drawer, .jv-scrim, .jv-launcher { transition:none; }
}